feature: yt previews in search component

Author: skeptrunedev

clients/search-component/package.json

@@ -19,7 +19,7 @@
       "import": "./dist/vanilla/index.js"
     }
   },
-  "version": "0.2.39",
+  "version": "0.2.40",
   "license": "MIT",
   "homepage": "https://github.com/devflowinc/trieve/tree/main/clients/search-component",
   "scripts": {

clients/search-component/src/TrieveModal/Chat/ChatMessage.tsx

@@ -87,7 +87,7 @@ export const Message = ({
   const [positive, setPositive] = React.useState<boolean | null>(null);
   const [copied, setCopied] = React.useState<boolean>(false);
   const { props } = useModalState();
-  
+
   const ecommerceItems = message.additional
     ?.filter(
       (chunk) =>
@@ -184,25 +184,34 @@ export const Message = ({
                             chunk.metadata.page_title) &&
                           chunk.link
                       )
-                      .map((chunk) => [
-                        chunk.metadata.heading ||
-                          chunk.metadata.title ||
-                          chunk.metadata.page_title,
-                        chunk.link,
-                      ])
-                      .filter(
-                        (link, index, array) =>
-                          array.findIndex((item) => item[0] === link[0]) ===
-                            index && link[0]
-                      )
-                      .map((link, index) => (
+                      .map((chunk) => {
+                        return {
+                          title:
+                            chunk.metadata.heading ||
+                            chunk.metadata.title ||
+                            chunk.metadata.page_title,
+                          link: chunk.link,
+                          metadata: chunk.metadata,
+                        };
+                      })
+                      .map((item, index) => (
                         <a
-                          className="source-anchor"
+                          className={`source-anchor${
+                            item.metadata?.yt_preview_src ? " yt-anchor" : ""
+                          }`}
                           key={index}
-                          href={link[1] as string}
+                          href={item.link as string}
                           target="_blank"
                         >
-                          {link[0]}
+                          {item.metadata?.yt_preview_src ? (
+                            <img
+                              className="yt-preview"
+                              src={item.metadata?.yt_preview_src}
+                            />
+                          ) : (
+                            <></>
+                          )}
+                          {item.title}
                         </a>
                       ))}
                   </div>

clients/search-component/src/TrieveModal/Search/DocsItem.tsx

@@ -170,14 +170,24 @@ export const DocsItem = ({ item, requestID, index, className }: Props) => {
             }
           : {})}
       >
-        <div>
+        <div className="docs-item-container">
+          {item.chunk.metadata?.yt_preview_src ? (
+            <img
+              className="yt-preview"
+              src={item.chunk.metadata?.yt_preview_src}
+            />
+          ) : (
+            <></>
+          )}
           {title ? (
-            <div>
+            <div className="docs-chunk-html">
               {props.type === "docs" ? (
                 <h6 className="chunk-path">{getChunkPath()}</h6>
               ) : null}
               <h4
-                className={`chunk-title ${props.type}`}
+                className={`chunk-title ${props.type}${
+                  item.chunk.metadata?.yt_preview_src ? " yt-item" : ""
+                }`}
                 dangerouslySetInnerHTML={{
                   __html: title,
                 }}

clients/search-component/src/TrieveModal/index.css

@@ -130,6 +130,12 @@ body {
     .mode-switch-wrapper {
       @apply flex items-center justify-end mt-2 absolute top-2.5 right-4 z-30 font-medium;
 
+      &.docs.chat {
+        @apply top-0;
+
+        right: calc(max(calc(50% - 39.85rem), 4rem) + 0.25rem);
+      }
+
       &.search.has-query {
         @apply hidden;
       }
@@ -306,6 +312,14 @@ body {
           @apply rounded px-2 text-xs py-1 bg-zinc-200/50;
           color: var(--tv-zinc-950);
 
+          &.yt-anchor {
+            @apply max-w-44 text-center pt-3;
+          }
+
+          .yt-preview {
+            @apply h-16 w-28 block mx-auto;
+          }
+
           &:hover {
             background-color: var(--tv-zinc-200);
           }
@@ -641,11 +655,7 @@ body {
       }
     }
 
-    .close-modal-button:not(.ecommerce) {
-      @apply hidden;
-    }
-
-    .close-modal-button.ecommerce {
+    .close-modal-button {
       @apply w-full flex justify-end text-xs items-center absolute top-1 right-1.5 p-2 gap-0.5 cursor-pointer;
     }
 
@@ -753,6 +763,18 @@ body {
         }
       }
 
+      .docs-item-container {
+        @apply flex gap-x-4 w-full justify-start;
+
+        .docs-chunk-html {
+          @apply w-full;
+        }
+      }
+
+      .yt-preview {
+        @apply h-16 w-28 block;
+      }
+
       .chunk-path {
         color: var(--tv-zinc-600);
         @apply text-xs line-clamp-1 overflow-ellipsis;
@@ -791,7 +813,11 @@ body {
       }
 
       h4 {
-        @apply overflow-hidden whitespace-nowrap text-ellipsis max-w-[calc(90vw-45px)] sm:max-w-[450px];
+        @apply overflow-hidden whitespace-nowrap text-ellipsis max-w-[calc(90vw-45px)] sm:max-w-[590px];
+
+        &.yt-item {
+          @apply max-w-[calc(90vw-45px-7rem)] sm:max-w-[590px];
+        }
       }
 
       svg {