feature: product view for demo page

clients/search-component/example/src/routes/ecommerce.tsx

@@ -2,7 +2,6 @@
 import { TrieveModalSearch } from "../../../src/index";
 import "../../../dist/index.css";
 import { useState } from "react";
-
 import { createFileRoute } from "@tanstack/react-router";
 
 export const Route = createFileRoute("/ecommerce")({

clients/search-component/package.json

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

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

@@ -1,4 +1,4 @@
-import React, { Suspense } from "react";
+import React, { Suspense, useEffect, useRef } from "react";
 import { useModalState } from "../../utils/hooks/modal-context";
 import { AIInitialMessage } from "./AIInitalMessage";
 import { useChatState } from "../../utils/hooks/chat-context";
@@ -27,9 +27,9 @@ export const ChatMode = () => {
     stopGeneratingMessage,
   } = useChatState();
 
-  const chatInput = React.useRef<HTMLInputElement>(null);
+  const chatInput = useRef<HTMLInputElement>(null);
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (mode == "chat" && open) {
       chatInput.current?.focus();
     }

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

@@ -148,7 +148,10 @@ export const ProductItem = ({
                 </h6>
                 {group && (
                   <button
-                    title={`Chat with ${betterGroupName || group.name}`}
+                    title={`Chat with ${(betterGroupName || group.name).replace(
+                      /<[^>]*>/g,
+                      ""
+                    )}`}
                     className="chat-product-button"
                     onClick={(e) => {
                       e.preventDefault();

clients/search-component/src/TrieveModal/Tags.tsx

@@ -10,7 +10,10 @@ export const Tags = () => {
     (props.tags?.length ? (
       <ul className="tags">
         {[ALL_TAG, ...props.tags].map((tag, idx) => (
-          <li className={currentTag === tag.tag ? "active" : ""} key={tag.tag}>
+          <li
+            className={currentTag === tag.tag ? "active" : ""}
+            key={tag.tag ?? idx}
+          >
             <button onClick={() => setCurrentTag(tag.tag)}>
               {tag.iconClassName && <i className={tag.iconClassName}></i>}
               {tag.icon && typeof tag.icon === "function" && tag.icon()}

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

@@ -253,10 +253,6 @@ body {
       }
     }
 
-    .trieve-footer.ecommerce {
-      @apply -mx-4;
-    }
-
     .commands.ecommerce {
       visibility: hidden;
     }

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

@@ -10,14 +10,16 @@ import {
 import { useKeyboardNavigation } from "../utils/hooks/useKeyboardNavigation";
 import { ModeSwitch } from "./ModeSwitch";
 import { OpenModalButton } from "./OpenModalButton";
-import { ChatProvider } from "../utils/hooks/chat-context";
+import { ChatProvider, useChatState } from "../utils/hooks/chat-context";
 import r2wc from "@r2wc/react-to-web-component";
 import { setClickTriggers } from "../utils/hooks/setClickTriggers";
+import { ChunkGroup } from "trieve-ts-sdk";
 
 const Modal = () => {
   useKeyboardNavigation();
   setClickTriggers();
   const { mode, open, setOpen, setMode, props } = useModalState();
+  const { askQuestion, chatWithGroup } = useChatState();
 
   useEffect(() => {
     const script = document.createElement("script");
@@ -26,6 +28,31 @@ const Modal = () => {
     script.setAttribute("data-auto-replace-svg", "");
 
     document.head.appendChild(script);
+
+    const eventListener: EventListener = (e: Event) => {
+      const customEvent = e as CustomEvent<{
+        message: string;
+        group: ChunkGroup;
+        betterGroupName?: string;
+      }>;
+      if (customEvent.detail?.message && customEvent.detail.group) {
+        setOpen(true);
+        if (customEvent.detail.betterGroupName) {
+          customEvent.detail.group.name = customEvent.detail.betterGroupName;
+        }
+        chatWithGroup(
+          customEvent.detail.group,
+          customEvent.detail.betterGroupName
+        );
+        askQuestion(customEvent.detail.message, customEvent.detail.group);
+      }
+    };
+    window.removeEventListener("trieve-start-chat-with-group", eventListener);
+    window.addEventListener("trieve-start-chat-with-group", eventListener);
+
+    return () => {
+      window.removeEventListener("trieve-start-chat-with-group", eventListener);
+    };
   }, []);
 
   useEffect(() => {

clients/search-component/src/utils/hooks/chat-context.tsx

@@ -32,7 +32,7 @@ function removeBrackets(str: string) {
 }
 
 const ChatContext = createContext<{
-  askQuestion: (question?: string) => Promise<void>;
+  askQuestion: (question?: string, group?: ChunkGroup) => Promise<void>;
   isLoading: boolean;
   messages: Messages;
   currentQuestion: string;
@@ -167,18 +167,22 @@ function ChatProvider({ children }: { children: React.ReactNode }) {
   const createQuestion = async ({
     id,
     question,
+    group,
   }: {
     id?: string;
     question?: string;
+    group?: ChunkGroup;
   }) => {
     setIsLoading(true);
 
+    const curGroup = group || currentGroup;
+
     // Use group search
-    if (currentGroup) {
+    if (curGroup) {
       // Should already be preloaded when group selected to chat with
       const groupChunks = await cached(() => {
-        return getAllChunksForGroup(currentGroup.id, trieveSDK);
-      }, `chunk-ids-${currentGroup.id}`);
+        return getAllChunksForGroup(curGroup.id, trieveSDK);
+      }, `chunk-ids-${curGroup.id}`);
 
       const { reader, queryId } = await trieveSDK.ragOnChunkReaderWithQueryId(
         {
@@ -220,7 +224,7 @@ function ChatProvider({ children }: { children: React.ReactNode }) {
     }
   };
 
-  const chatWithGroup = async (group: ChunkGroup, betterGroupName?: string) => {
+  const chatWithGroup = (group: ChunkGroup, betterGroupName?: string) => {
     if (betterGroupName) {
       group.name = betterGroupName;
     }
@@ -256,7 +260,7 @@ function ChatProvider({ children }: { children: React.ReactNode }) {
     clearConversation();
   };
 
-  const askQuestion = async (question?: string) => {
+  const askQuestion = async (question?: string, group?: ChunkGroup) => {
     isDoneReading.current = false;
     setMessages((m) => [
       ...m,
@@ -270,10 +274,15 @@ function ChatProvider({ children }: { children: React.ReactNode }) {
       ],
     ]);
 
-    if (!currentTopic) {
+    if (!currentGroup && group) {
+      chatWithGroup(group);
+      setCurrentGroup(group);
+    }
+
+    if (!currentTopic && !currentGroup && !group) {
       await createTopic({ question: question || currentQuestion });
     } else {
-      await createQuestion({ question: question || currentQuestion });
+      await createQuestion({ question: question || currentQuestion, group });
     }
 
     setCurrentQuestion("");

clients/ts-sdk/openapi.json

@@ -12142,6 +12142,28 @@
           }
         }
       },
+      "Pdf2MdOptions": {
+        "type": "object",
+        "required": [
+          "use_pdf2md_ocr"
+        ],
+        "properties": {
+          "split_headings": {
+            "type": "boolean",
+            "description": "Split headings is an optional field which allows you to specify whether or not to split headings into separate chunks. Default is false.",
+            "nullable": true
+          },
+          "system_prompt": {
+            "type": "string",
+            "description": "Prompt to use for the gpt-4o model. Default is None.",
+            "nullable": true
+          },
+          "use_pdf2md_ocr": {
+            "type": "boolean",
+            "description": "Parameter to use pdf2md_ocr. If true, the file will be converted to markdown using gpt-4o. Default is false."
+          }
+        }
+      },
       "PopularFilters": {
         "type": "object",
         "required": [
@@ -12354,6 +12376,14 @@
             ],
             "nullable": true
           },
+          "singleProductOptions": {
+            "allOf": [
+              {
+                "$ref": "#/components/schemas/SingleProductOptions"
+              }
+            ],
+            "nullable": true
+          },
           "suggestedQueries": {
             "type": "boolean",
             "nullable": true
@@ -12849,6 +12879,8 @@
       "RAGSortBy": {
         "type": "string",
         "enum": [
+          "hallucination_score",
+          "top_score",
           "created_at",
           "latency"
         ]
@@ -12893,6 +12925,7 @@
           "results",
           "dataset_id",
           "llm_response",
+          "top_score",
           "hallucination_score",
           "detected_hallucinations",
           "created_at",
@@ -12942,6 +12975,10 @@
             "type": "string",
             "format": "uuid"
           },
+          "top_score": {
+            "type": "number",
+            "format": "float"
+          },
           "user_id": {
             "type": "string"
           },
@@ -15247,6 +15284,42 @@
           }
         }
       },
+      "SingleProductOptions": {
+        "type": "object",
+        "properties": {
+          "groupTrackingId": {
+            "type": "string",
+            "nullable": true
+          },
+          "productDescriptionHtml": {
+            "type": "string",
+            "nullable": true
+          },
+          "productName": {
+            "type": "string",
+            "nullable": true
+          },
+          "productPrimaryImageUrl": {
+            "type": "string",
+            "nullable": true
+          },
+          "productQuestions": {
+            "type": "array",
+            "items": {
+              "type": "string"
+            },
+            "nullable": true
+          },
+          "productTrackingId": {
+            "type": "string",
+            "nullable": true
+          },
+          "recSearchQuery": {
+            "type": "string",
+            "nullable": true
+          }
+        }
+      },
       "SingleQueuedChunkResponse": {
         "type": "object",
         "required": [
@@ -16575,6 +16648,14 @@
             "description": "Metadata is a JSON object which can be used to filter chunks. This is useful for when you want to filter chunks by arbitrary metadata. Unlike with tag filtering, there is a performance hit for filtering on metadata. Will be passed down to the file's chunks.",
             "nullable": true
           },
+          "pdf2md_options": {
+            "allOf": [
+              {
+                "$ref": "#/components/schemas/Pdf2MdOptions"
+              }
+            ],
+            "nullable": true
+          },
           "rebalance_chunks": {
             "type": "boolean",
             "description": "Rebalance chunks is an optional field which allows you to specify whether or not to rebalance the chunks created from the file. If not specified, the default true is used. If true, Trieve will evenly distribute remainder splits across chunks such that 66 splits with a `target_splits_per_chunk` of 20 will result in 3 chunks with 22 splits each.",
@@ -16606,11 +16687,6 @@
             "type": "string",
             "description": "Time stamp should be an ISO 8601 combined date and time without timezone. Time_stamp is used for time window filtering and recency-biasing search results. Will be passed down to the file's chunks.",
             "nullable": true
-          },
-          "use_pdf2md_ocr": {
-            "type": "boolean",
-            "description": "Parameter to use pdf2md_ocr. If true, the file will be converted to markdown using gpt-4o. Default is false.",
-            "nullable": true
           }
         },
         "example": {

clients/ts-sdk/package.json

@@ -6,7 +6,7 @@
   "files": [
     "dist"
   ],
-  "version": "0.0.43",
+  "version": "0.0.44",
   "license": "MIT",
   "scripts": {
     "lint": "eslint 'src/**/*.ts'",