refactor: why this answer links + multiline source with expand

memori-ai · Apr 30, 2024 · 10ff06d · 10ff06d
1 parent 45ecf68
commit 10ff06d
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 38 deletions.
diff --git a/src/components/WhyThisAnswer/WhyThisAnswer.css b/src/components/WhyThisAnswer/WhyThisAnswer.css
@@ -64,12 +64,30 @@ ul.memori--whythisanswer-list li:last-child {
     margin: 0;
 }
 
-.memori-whythisanswer-drawer .memori-media-items--grid {
+.memori-whythisanswer-drawer .memori-snippet--content {
+    font-size: 0.75rem;
+}
+
+.memori-whythisanswer-drawer .memori-card--content {
+    padding: 1rem;
+}
+
+.memori-whythisanswer-drawer .memori-card--cover {
     display: none;
 }
 
-.memori-whythisanswer-drawer .memori-snippet--content {
-    font-size: 0.75rem;
+.memori-whythisanswer-drawer .memori-card--title {
+    margin-bottom: 0;
+    font-size: 1rem;
+}
+
+.memori--whythisanswer-snippet-expandable {
+    min-height: 54px;
+    line-height: 40px;
+}
+
+.memori-whythisanswer-drawer .memori-card--description {
+    display: none;
 }
 
 .memori--whythisanswer-skeleton {

diff --git a/src/components/WhyThisAnswer/WhyThisAnswer.stories.tsx b/src/components/WhyThisAnswer/WhyThisAnswer.stories.tsx
@@ -68,7 +68,7 @@ WithData.args = {
       confidence: 0.8,
       confidenceLevel: 'HIGH',
       memory: {
-        ...memoryQuestion,
+        memoryID: '1',
         title: 'This is the title of the content',
         titleVariants: [
           "This is a variant of the content's title",
@@ -78,24 +78,22 @@ WithData.args = {
           {
             text: 'This is a test answer',
           },
+          {
+            text: 'This is another answer',
+          },
         ],
-        memoryID: '1',
       },
     } as SearchMatches,
     {
-      confidence: 0.7,
-      confidenceLevel: 'MEDIUM',
+      confidence: 0.5,
+      confidenceLevel: 'LOW',
       memory: {
-        ...memoryQuestion,
         memoryID: '2',
-        title: 'This is a test title',
+        title: 'Content with a long answer',
         titleVariants: undefined,
         answers: [
           {
-            text: 'This is a an answer',
-          },
-          {
-            text: 'This is another answer',
+            text: 'Suspendisse a sodales nulla, sed semper nisi. Suspendisse a sodales nulla, sed semper nisi. Suspendisse a sodales nulla, sed semper nisi. Suspendisse a sodales nulla, sed semper nisi. Suspendisse a sodales nulla, sed semper nisi.',
           },
         ],
       },
@@ -104,36 +102,55 @@ WithData.args = {
       confidence: 0.5,
       confidenceLevel: 'LOW',
       memory: {
-        ...memoryQuestion,
         memoryID: '3',
-        title: 'Content with a long answer',
+        title: 'Content with sources',
         titleVariants: undefined,
         answers: [
           {
-            text: 'Suspendisse a sodales nulla, sed semper nisi. Suspendisse a sodales nulla, sed semper nisi. Suspendisse a sodales nulla, sed semper nisi. Suspendisse a sodales nulla, sed semper nisi. Suspendisse a sodales nulla, sed semper nisi.',
+            text: 'This is a test answer',
+          },
+        ],
+        media: [
+          {
+            mediumID: '1',
+            mimeType: 'text/plain',
+            content:
+              'This is a source. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a sodales nulla, sed semper nisi. Suspendisse a sodales nulla, sed semper nisi.',
+          },
+          {
+            mediumID: '2',
+            mimeType: 'text/plain',
+            content:
+              'This is a source.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit.\nCras lobortis volutpat nunc.\nProin tincidunt enim in felis aliquet, a ultricies purus bibendum.\n\nQuisque in ultrices lectus.\nNulla at urna diam.\n\nProin sodales lobortis libero eu facilisis.',
           },
         ],
       },
     } as SearchMatches,
     {
-      confidence: 0.5,
-      confidenceLevel: 'LOW',
+      confidence: 0.7,
+      confidenceLevel: 'MEDIUM',
       memory: {
         ...memoryQuestion,
         memoryID: '4',
-        title: 'Content with a source',
+        title: 'Content with links',
         titleVariants: undefined,
         answers: [
           {
-            text: 'This is a test answer',
+            text: 'This is a an answer',
           },
         ],
         media: [
           {
             mediumID: '1',
-            mimeType: 'text/plain',
-            content:
-              'This is a source. Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+            mimeType: 'text/html',
+            url: 'https://memori.ai',
+            title: 'Memori.AI',
+          },
+          {
+            mediumID: '2',
+            mimeType: 'text/html',
+            url: 'https://nzambello.dev',
+            title: 'Nicola Zambello',
           },
         ],
       },

diff --git a/src/components/WhyThisAnswer/WhyThisAnswer.tsx b/src/components/WhyThisAnswer/WhyThisAnswer.tsx
@@ -11,6 +11,7 @@ import toast from 'react-hot-toast';
 import { getErrori18nKey } from '../../helpers/error';
 import { useTranslation } from 'react-i18next';
 import Snippet from '../Snippet/Snippet';
+import MediaWidget from '../MediaWidget/MediaWidget';
 
 export interface Props {
   apiURL: string;
@@ -165,20 +166,29 @@ const WhyThisAnswer = ({
                   </p>
                 ))}
 
-                {!!m.memory.media?.filter(m => m.mimeType === 'text/plain')
-                  ?.length && (
-                  <Snippet
-                    medium={{
-                      mediumID: m.memory.memoryID,
-                      mimeType: 'text/plain',
-                      content: m.memory.media.filter(
-                        m => m.mimeType === 'text/plain'
-                      )[0].content,
-                    }}
-                    showCopyButton={false}
-                    showLineNumbers={false}
-                  />
-                )}
+                <MediaWidget
+                  links={m.memory.media?.filter(
+                    m => m.mimeType === 'text/html'
+                  )}
+                />
+
+                {m.memory.media
+                  ?.filter(m => m.mimeType === 'text/plain')
+                  ?.map(m => (
+                    <Expandable
+                      rows={2}
+                      key={m.mediumID}
+                      lineHeightMultiplier={2}
+                      innerClassName="memori--whythisanswer-snippet-expandable"
+                    >
+                      <Snippet
+                        key={m.mediumID}
+                        medium={m}
+                        showCopyButton={false}
+                        showLineNumbers={false}
+                      />
+                    </Expandable>
+                  ))}
               </li>
             ))}
           </ul>

diff --git a/src/components/ui/Expandable.tsx b/src/components/ui/Expandable.tsx
@@ -8,6 +8,7 @@ export interface Props {
   className?: string;
   innerClassName?: string;
   btnClassName?: string;
+  lineHeightMultiplier?: number;
   defaultExpanded?: boolean;
   expandSymbol?: (lang: string) => React.ReactNode;
   collapseSymbol?: (lang: string) => React.ReactNode;
@@ -19,6 +20,7 @@ const Expandable = ({
   className,
   innerClassName,
   btnClassName,
+  lineHeightMultiplier = 1.2,
   defaultExpanded = false,
   expandSymbol = () => '...',
   collapseSymbol = (lang: string) =>
@@ -41,7 +43,7 @@ const Expandable = ({
       let elLineHeight = computedStyle.lineHeight;
       let lineHeight =
         elLineHeight === 'normal' || !elLineHeight?.length
-          ? 1.2 * parseInt(computedStyle.fontSize, 10)
+          ? lineHeightMultiplier * parseInt(computedStyle.fontSize, 10)
           : parseInt(elLineHeight, 10);
 
       console.table({