Merge branch 'stampy-redesign' into stampy-redesign-598

app/components/Article/article.css

@@ -171,6 +171,21 @@ article a.see-more.visible:after {
   content: 'See less';
 }
 
+article .banner {
+  padding: var(--spacing-12) var(--spacing-24);
+  margin-bottom: var(--spacing-12);
+}
+article .banner h3 {
+  display: flex;
+  align-items: center;
+}
+article .banner h3 img {
+  width: 2em;
+}
+article .banner h3 .title {
+  padding-left: 10px;
+}
+
 @media only screen and (max-width: 780px) {
   article {
     max-width: 100%;

app/components/Article/index.tsx

@@ -7,6 +7,7 @@ import Button, {CompositeButton} from '~/components/Button'
 import Feedback, {logFeedback} from '~/components/Feedback'
 import type {Glossary, Question} from '~/server-utils/stampy'
 import {tagUrl} from '~/routesMapper'
+import type {Glossary, Question, Banner as BannerType} from '~/server-utils/stampy'
 import Contents from './Contents'
 import './article.css'
 
@@ -100,6 +101,30 @@ const ArticleMeta = ({question, className}: {question: Question; className?: str
   )
 }
 
+const Banner = ({title, text, icon, backgroundColour, textColour}: BannerType) => {
+  return (
+    <div
+      key={title}
+      className="banner rounded"
+      style={{
+        backgroundColor: backgroundColour || 'inherit',
+        color: textColour || 'inherit',
+      }}
+    >
+      <h3>
+        <img src={icon?.url} alt={icon?.name} />
+        <span className="title">{title}</span>
+      </h3>
+      <div
+        className="banner-contents"
+        dangerouslySetInnerHTML={{
+          __html: text,
+        }}
+      ></div>
+    </div>
+  )
+}
+
 const Tags = ({tags}: Question) => (
   <div className="tags">
     {tags?.map((tag) => (
@@ -121,6 +146,7 @@ export const Article = ({question, glossary, className}: ArticleProps) => {
   return (
     <article className={`${className} ${isLoading(question) ? 'loading' : ''}`}>
       <h1 className="teal-500 padding-bottom-24">{title}</h1>
+      {question.banners?.map(Banner)}
       <ArticleMeta question={question} className="padding-bottom-56" />
 
       <Contents pageid={pageid} html={text || ''} glossary={glossary || {}} />

app/components/Chatbot/index.tsx

@@ -170,7 +170,7 @@ const SplashScreen = ({
   <div className="padding-top-40">
     <IconStampyLarge />
     <div className="fcol-6 padding-bottom-40 padding-top-40">
-      n<h2 className="teal-500">Hi there, I'm Stampy.</h2>
+      <h2 className="teal-500">Hi there, I'm Stampy.</h2>
       <h2>I can answer your questions about AI Safety</h2>
     </div>
     <Followups
@@ -190,7 +190,7 @@ export const Chatbot = ({question, questions, settings}: ChatbotProps) => {
   const [followups, setFollowups] = useState<Followup[]>()
 
   // FIXME: Generate session id
-  const [sessionId] = useState('asd')
+  const [sessionId] = useState(crypto.randomUUID())
   const [history, setHistory] = useState([] as Entry[])
   const [controller, setController] = useState(() => new AbortController())
   const fetcher = useFetcher({key: 'followup-fetcher'})