devflowinc · skeptrunedev · Nov 24, 2024 · Nov 20, 2024 · Nov 21, 2024 · Nov 21, 2024
diff --git a/clients/search-component/example/src/routes/ecommerce.tsx b/clients/search-component/example/src/routes/ecommerce.tsx
@@ -56,6 +56,7 @@ export default function ECommerce() {
               baseUrl={baseUrl}
               datasetId={datasetId}
               problemLink={problemLink}
+              theme={theme}
               brandLogoImgSrcUrl={brandLogoSrcUrl}
               brandName={brandName}
               brandColor={brandColor}

diff --git a/clients/search-component/src/TrieveModal/Chat/AIInitalMessage.tsx b/clients/search-component/src/TrieveModal/Chat/AIInitalMessage.tsx
@@ -3,9 +3,10 @@ import { useModalState } from "../../utils/hooks/modal-context";
 import { AIIcon } from "../icons";
 import { SuggestedQuestions } from "./SuggestedQuestions";
 import { useChatState } from "../../utils/hooks/chat-context";
+import { GroupChatImgCarousel } from "./GroupChatImgCarousel";
 
 export const AIInitialMessage = () => {
-  const { props } = useModalState();
+  const { props, currentGroup } = useModalState();
   const { messages } = useChatState();
 
   return (
@@ -46,11 +47,12 @@ export const AIInitialMessage = () => {
             }}
             className="brand-name"
           >
-            {props.brandName || "Trieve"}
+            {currentGroup?.name || props.brandName || "Trieve"}
           </span>
         </p>
+        <GroupChatImgCarousel />
       </span>
-      {!messages.length ? <SuggestedQuestions /> : null}
+      {!messages.length && !currentGroup ? <SuggestedQuestions /> : null}
     </>
   );
 };
diff --git a/clients/search-component/src/TrieveModal/Chat/ChatMessage.tsx b/clients/search-component/src/TrieveModal/Chat/ChatMessage.tsx
@@ -183,7 +183,7 @@ export const Message = ({
                           (chunk.metadata.heading ||
                             chunk.metadata.title ||
                             chunk.metadata.page_title) &&
-                          chunk.link
+                          chunk.link,
                       )
                       .map((chunk) => [
                         chunk.metadata.heading ||
@@ -194,7 +194,7 @@ export const Message = ({
                       .filter(
                         (link, index, array) =>
                           array.findIndex((item) => item[0] === link[0]) ===
-                            index && link[0]
+                            index && link[0],
                       )
                       .map((link, index) => (
                         <a key={index} href={link[1] as string} target="_blank">

diff --git a/clients/search-component/src/TrieveModal/Chat/ChatMode.tsx b/clients/search-component/src/TrieveModal/Chat/ChatMode.tsx
@@ -1,17 +1,27 @@
 import React, { Suspense } from "react";
-import { BackIcon } from "../icons";
+import { BackIcon, CloseIcon } from "../icons";
 import { useModalState } from "../../utils/hooks/modal-context";
 import { AIInitialMessage } from "./AIInitalMessage";
 import { useChatState } from "../../utils/hooks/chat-context";
 import { ChatMessage } from "./ChatMessage";
 import { Tags } from "../Tags";
 
 export const ChatMode = () => {
-  const { props, setMode, modalRef, open, setOpen, mode } = useModalState();
+  const {
+    props,
+    setMode,
+    modalRef,
+    open,
+    setOpen,
+    mode,
+    currentGroup,
+    setCurrentGroup,
+  } = useModalState();
   const {
     askQuestion,
     messages,
     currentQuestion,
+    cancelGroupChat,
     setCurrentQuestion,
     clearConversation,
     isDoneReading,
@@ -56,21 +66,41 @@ export const ChatMode = () => {
             <div className="chat-modal-wrapper">
               <div className="ai-message initial-message">
                 <AIInitialMessage />
-                {messages.map((chat, i) => (
-                  <div key={i} className="message-wrapper">
-                    {chat.map((message, idx) => (
-                      <ChatMessage key={idx} idx={idx} message={message} />
-                    ))}
-                  </div>
-                ))}
               </div>
+              {messages.map((chat, i) => (
+                <div key={i} className="message-wrapper">
+                  {chat.map((message, idx) => (
+                    <ChatMessage key={idx} idx={idx} message={message} />
+                  ))}
+                </div>
+              ))}
             </div>
           </div>
         </div>
       </div>
       <div className="chat-footer-wrapper">
+        {currentGroup && (
+          <div className="chat-group-disclaimer">
+            <div>Chatting with {currentGroup.name}</div>
+            <button
+              onClick={() => {
+                cancelGroupChat();
+              }}
+            >
+              <CloseIcon />
+            </button>
+          </div>
+        )}
         <div className="input-wrapper chat">
-          <button onClick={() => setMode("search")} className="back-icon">
+          <button
+            onClick={() => {
+              if (currentGroup) {
+                setCurrentGroup(null);
+              }
+              setMode("search");
+            }}
+            className="back-icon"
+          >
             <BackIcon />
           </button>
           <form
@@ -85,7 +115,7 @@ export const ChatMode = () => {
               ref={chatInput}
               value={currentQuestion}
               onChange={(e) => setCurrentQuestion(e.target.value)}
-              placeholder="Ask me anything"
+              placeholder="Ask me anything about"
             />
           </form>
         </div>

diff --git a/clients/search-component/src/TrieveModal/Chat/GroupChatImgCarousel.tsx b/clients/search-component/src/TrieveModal/Chat/GroupChatImgCarousel.tsx
@@ -0,0 +1,50 @@
+import { useEffect, useState } from "react";
+import React from "react";
+import { useModalState } from "../../utils/hooks/modal-context";
+import { cached } from "../../utils/cache";
+import { getAllChunksForGroup } from "../../utils/trieve";
+
+export const GroupChatImgCarousel = () => {
+  const { currentGroup, trieveSDK } = useModalState();
+
+  const [groupCarouselItems, setGroupCarouselItems] = useState<
+    string[] | null
+  >();
+
+  useEffect(() => {
+    const setGroupCarousel = async () => {
+      if (currentGroup) {
+        const groupChunks = await cached(() => {
+          return getAllChunksForGroup(currentGroup.id, trieveSDK);
+        }, `chunk-ids-${currentGroup.id}`);
+
+        const images = groupChunks
+          .map((chunk) => {
+            return chunk.image_urls?.[0] || undefined;
+          })
+          .filter(Boolean) as string[];
+        // Deduplicate with set
+        const uniqueImages = [...new Set(images)];
+        setGroupCarouselItems(uniqueImages);
+      } else {
+        setGroupCarouselItems(null);
+      }
+    };
+
+    setGroupCarousel();
+  }, [currentGroup]);
+
+  return (
+    <>
+      {currentGroup && groupCarouselItems ? (
+        <div className="group-chat-carousel">
+          {groupCarouselItems.map((image) => (
+            <div key={image}>
+              <img className="max-h-[270px]" src={image} />
+            </div>
+          ))}
+        </div>
+      ) : undefined}
+    </>
+  );
+};
diff --git a/clients/search-component/src/TrieveModal/OpenModalButton.tsx b/clients/search-component/src/TrieveModal/OpenModalButton.tsx
@@ -32,7 +32,6 @@ export const OpenModalButton = ({ setOpen }: OpenModalButtonProps) => {
           className={`${props.theme} ${
             props.responsive ?? false ? "responsive" : ""
           }`}
-          key="open-button-container"
         >
           <div className={`${props.responsive ?? false ? "responsive" : ""}`}>
             <svg
@@ -54,11 +53,11 @@ export const OpenModalButton = ({ setOpen }: OpenModalButtonProps) => {
             </div>
           </div>
           <span
-            key="open-button"
+            key={"open-button"}
             className={`open ${props.responsive ?? false ? "responsive" : ""}`}
           >
             {keyCombo.map((key) => (
-              <div key={key.key}>
+              <div key={JSON.stringify(key)}>
                 {key.ctrl ? (
                   <span key="ctrl-present">
                     <span key="mac" className="mac">

diff --git a/clients/search-component/src/TrieveModal/Search/ProductGroupItem.tsx b/clients/search-component/src/TrieveModal/Search/ProductGroupItem.tsx
@@ -1,27 +1,47 @@
-import React, { useState, useMemo } from "react";
+import React, { useMemo } from "react";
 import { ProductItem } from "./ProductItem";
 import { GroupChunk } from "../../utils/types";
-
+import { findCommonName, guessTitleAndDesc } from "../../utils/estimation";
 
 type Props = {
   requestID: string;
-  // Group of Groups (with subvariants)
   group: GroupChunk[];
   index: number;
-}
+};
 
 export const ProductGroupItem = ({ index, group, requestID }: Props) => {
+  const selectedItem = useMemo(
+    () => group[0].chunks[0],
+    [],
+  );
+
+  // Shopify 
+  const betterGroupName = useMemo(
+    () => {
+      const productNames: string[] = [];
+      group.forEach(
+        g => g.chunks.forEach(c => {
+          const {title} = guessTitleAndDesc(c);
+          productNames.push(title)
+        })
+      )
+
+      // Calculate the overlap of the strings
+      const commonName = findCommonName(productNames);
+      return commonName || undefined;
+    },
+    [group]
+  )
 
-  const [groupItemIndex] = useState(0);
-  const selectedItem = useMemo(() => group[groupItemIndex].chunks[0], [groupItemIndex]);
 
   return (
     <ProductItem
       item={selectedItem}
       index={index}
+      betterGroupName={betterGroupName}
+      group={group[0].group}
       requestID={requestID}
       key={selectedItem.chunk.id}
     />
   );
 };
-