Merge pull request #694 from StampyAI/Ticket-#673

Ticket #376
StampyAI · Jun 6, 2024 · a8ed49d · a8ed49d
2 parents 4c7c229 + e42d18b
commit a8ed49d
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 11 deletions.
diff --git a/app/components/Article/Contents.tsx b/app/components/Article/Contents.tsx
@@ -156,7 +156,17 @@ const insertGlossary = (pageid: string, glossary: Glossary) => {
   }
 }
 
-const Contents = ({pageid, html, glossary}: {pageid: PageId; html: string; glossary: Glossary}) => {
+const Contents = ({
+  pageid,
+  html,
+  glossary,
+  className = '',
+}: {
+  pageid: PageId
+  html: string
+  glossary: Glossary
+  className?: string
+}) => {
   const elementRef = useRef<HTMLDivElement>(null)
   const mobile = useIsMobile()
 
@@ -194,7 +204,7 @@ const Contents = ({pageid, html, glossary}: {pageid: PageId; html: string; gloss
 
   return (
     <div
-      className="contents large-reading padding-bottom-80"
+      className={`contents large-reading ${className}`}
       dangerouslySetInnerHTML={{
         __html: html,
       }}

diff --git a/app/components/Article/index.tsx b/app/components/Article/index.tsx
@@ -148,7 +148,12 @@ export const Article = ({question, glossary, className}: ArticleProps) => {
       {question.banners?.filter((b) => b.title).map(Banner)}
       <ArticleMeta question={question} className="padding-bottom-56" />
 
-      <Contents pageid={pageid} html={text || ''} glossary={glossary || {}} />
+      <Contents
+        className="padding-bottom-80"
+        pageid={pageid}
+        html={text || ''}
+        glossary={glossary || {}}
+      />
 
       <KeepGoing {...question} />
 

diff --git a/app/components/Chatbot/ChatEntry.tsx b/app/components/Chatbot/ChatEntry.tsx
@@ -32,8 +32,12 @@ const AnswerInfo = ({
       <span className="small grey">
         {answerType === 'human' ? 'Human-written' : 'Bot-generated'} response
       </span>
-      <QuestionMarkIcon className="hint" />
-      <div className="hint-contents bordered">{hint}</div>
+      <div className="icon-container leading-0">
+        <QuestionMarkIcon className="hint" />
+        <div className="hint-contents-container">
+          <div className="hint-contents xs">{hint}</div>
+        </div>
+      </div>
     </span>
   )
 }

diff --git a/app/components/Chatbot/chat_entry.css b/app/components/Chatbot/chat_entry.css
@@ -24,24 +24,41 @@ article.stampy {
 }
 
 .chat-entry .info {
+  position: relative;
   display: flex;
   gap: var(--spacing-8);
   align-items: center;
 }
 
-.chat-entry .hint-contents {
+.chat-entry .icon-container {
+  position: relative;
+}
+
+.chat-entry .hint-contents-container {
   position: absolute;
-  transform: translateY(var(--spacing-24));
+  top: 0;
+  right: 0;
+  transform: translateX(50%);
   visibility: hidden;
   width: 256px;
+  padding-top: 120%;
+  z-index: 100;
 }
 
-.chat-entry .hint-contents:hover,
-.chat-entry .hint:hover + .hint-contents {
-  visibility: visible;
-  background: var(--colors-cool-grey-800);
+.chat-entry .hint-contents {
+  background: var(--colors-cool-grey-900);
   color: white;
   padding: var(--spacing-16);
+  border-radius: var(--border-radius);
+}
+
+.chat-entry .hint-contents-container:hover,
+.chat-entry .hint:hover + .hint-contents-container {
+  visibility: visible;
+}
+
+.chat-entry .footnotes {
+  padding-top: var(--spacing-32);
 }
 
 .chat-entry .reference-link {