cleanup: yt button linkls + rec width

Author: skeptrunedev

clients/search-component/package.json

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

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

@@ -137,6 +137,41 @@ export const Message = ({
       </a>
     ));
 
+  const youtubeItems = message.additional
+    ?.filter(
+      (chunk) =>
+        (chunk.metadata.heading ||
+          chunk.metadata.title ||
+          chunk.metadata.page_title) &&
+        chunk.link &&
+        chunk.metadata.yt_preview_src
+    )
+    .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 yt-anchor"
+        key={index}
+        href={item.link as string}
+        target="_blank"
+      >
+        {item.metadata?.yt_preview_src ? (
+          <img className="yt-preview" src={item.metadata?.yt_preview_src} />
+        ) : (
+          <></>
+        )}
+        {item.title}
+      </a>
+    ));
+
   return (
     <div>
       {message.text === "Loading..." ? (
@@ -155,6 +190,11 @@ export const Message = ({
               <Carousel>{ecommerceItems}</Carousel>
             </div>
           )}
+          {youtubeItems && youtubeItems.length > 0 && (
+            <div className="additional-image-links">
+              <Carousel>{youtubeItems}</Carousel>
+            </div>
+          )}
           {message.text.length > 0 ? (
             <Markdown
               components={{
@@ -181,7 +221,8 @@ export const Message = ({
                           (chunk.metadata.heading ||
                             chunk.metadata.title ||
                             chunk.metadata.page_title) &&
-                          chunk.link
+                          chunk.link &&
+                          !chunk.metadata.yt_preview_src
                       )
                       .map((chunk) => {
                         return {

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

@@ -352,7 +352,11 @@ body {
           box-sizing: border-box;
 
           a {
-            @apply rounded px-2 text-xs py-1 bg-zinc-200/50;
+            @apply rounded px-2 text-xs py-1 bg-zinc-200/50 flex flex-col gap-y-1 h-full;
+
+            &.yt-anchor {
+              @apply text-center;
+            }
 
             &:hover {
               background-color: var(--tv-zinc-200);
@@ -394,6 +398,10 @@ body {
         .ecommerce-featured-image-chat {
           @apply mb-1 max-h-48 aspect-auto mx-auto;
         }
+
+        .yt-preview {
+          @apply h-16 w-28 block mx-auto;
+        }
       }
 
       .user {
@@ -437,6 +445,10 @@ body {
           @apply list-decimal pl-4 my-4 overflow-hidden;
         }
 
+        li {
+          @apply my-2;
+        }
+
         hr {
           @apply mb-4;
         }

server/src/public/navbar.html

@@ -17,7 +17,7 @@
           params.forBrandName) else 'Prospect'|safe}}
         </span>
       </p>
-      <p class="signature mt-0.5 pl-0.5 text-right text-sm">
+      <p class="signature mt-1 pl-0.5 text-right text-sm">
         - From
         <a
           class="creator"

server/src/public/page.html

@@ -157,6 +157,10 @@
         font-family: "Maven Pro", sans-serif;
       }
 
+      .recs-section {
+        width: 100%;
+      }
+
       h1,h2,h3,h4,h5,h6,p,pre,button,nav,.paragraph-text {
         position: relative;
         z-index: 15;
@@ -379,7 +383,7 @@
         type: "underline",
         animationDuration: 50,
         color: window.paramsData.brandColor || "black",
-        padding: 3,
+        padding: 2,
       });
 
       canvas.style.position = "absolute";

server/src/public/product.html

@@ -1,9 +1,9 @@
 <div class="max-w-full">
   <div
     id="product-display"
-    class="mx-auto py-6 px-4 mt-40 sm:px-6 sm:mt-30 lg:max-w-7xl lg:px-8"
+    class="mx-auto py-4 px-4 mt-40 sm:px-6 sm:mt-30 lg:max-w-7xl lg:px-8"
   >
-    <section class="lg:flex gap-2 lg:gap-x-8 lg:gap-y-10 xl:gap-x-16">
+    <section class="lg:flex gap-2 lg:gap-x-8 lg:gap-y-10 xl:gap-x-16 py-2">
       <div class="lg:w-1/2">
         <img
           src="{{ params.singleProductOptions.productPrimaryImageUrl }}"

server/static/output.css

@@ -584,10 +584,6 @@ video {
   margin-right: 1rem;
 }
 
-.mt-0\.5 {
-  margin-top: 0.125rem;
-}
-
 .mt-1 {
   margin-top: 0.25rem;
 }
@@ -844,9 +840,9 @@ video {
   padding-bottom: 0.75rem;
 }
 
-.py-6 {
-  padding-top: 1.5rem;
-  padding-bottom: 1.5rem;
+.py-4 {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
 }
 
 .pl-0\.5 {