migrated to stream query APIV2 (#53)

* migrated to stream query APIV2

* fixing tests

* enabled non streaming response

* updated README

* changed the max search results to 10

* removed debug logs

* minor update

* added back FCS calculating spinner

* renamed corpusKey to corpusKeys

* reformatted with 2 spaces

* parsed the facts text using snippets

Author: adeelehsan

README.md

@@ -60,7 +60,7 @@ import { ReactChatbot } from "@vectara/react-chatbot";
 
 <ReactChatbot
   customerId="CUSTOMER_ID"
-  corpusIds={["CORPUS_ID_1", "CORPUS_ID_2", "CORPUS_ID_N"]}
+  corpusKeys={["CORPUS_KEY_1", "CORPUS_KEY_2", "CORPUS_KEY_N"]}
   apiKey="API_KEY"
   title="My Chatbot"
   placeholder="Chat with your AI assistant"
@@ -79,9 +79,10 @@ import { ReactChatbot } from "@vectara/react-chatbot";
 
 Every Vectara account is associated with a customer ID. You can find your customer ID by logging into the [Vectara Console](https://console.vectara.com/) and opening your account dropdown in the top-right corner.
 
-##### `corpusIds` (required)
+##### `corpuskeys` (required)
 
-After you [create a corpus](https://docs.vectara.com/docs/console-ui/creating-a-corpus), you can find its ID by navigating to the corpus and looking in the top-left corner, next to the corpus name.
+After you [create a corpus](https://docs.vectara.com/docs/console-ui/creating-a-corpus), you can find its Key by navigating to the corpus and looking in the top-left corner, next to the corpus name.
+To run queries against multiple corpora, use a comma-separated list of corpus keys. For example: "corpus_1,corpus_2".
 
 ##### `apiKey` (required)
 
@@ -132,6 +133,18 @@ When set, this will calculate the [Factual Consistency Score (FCS)](https://docs
 
 Define the [summarizer and prompt](https://docs.vectara.com/docs/learn/grounded-generation/select-a-summarizer) to use to generate the chat response.
 
+##### `numberOfSearchResults` (optional)
+
+Define the number of search results to be used to generate summary. Default is set to 15.
+
+##### `rerankerId` (optional)
+
+Define the reranker Id to be used , Defaults to 272725718.
+
+##### `lambda` (optional)
+
+How much to weigh lexical scores compared to the embedding score. 0 means lexical search is not used at all, and 1 means only lexical search is used.
+
 ### Use your own views with the useChat hook
 
 Install React-Chatbot:
@@ -218,7 +231,7 @@ export const App = (props: Props): ReactNode => {
       setChatWidget(
         <ReactChatbot
           customerId="CUSTOMER_ID"
-          corpusIds={["CORPUS_ID_1", "CORPUS_ID_2", "CORPUS_ID_N"]}
+          corpusKeys={["CORPUS_KEY_1", "CORPUS_KEY_2", "CORPUS_KEY_N"]}
           apiKey="API_KEY"
         />
       );

docs/package-lock.json

@@ -21,8 +21,8 @@ import { SUMMARY_LANGUAGES, RerankerId } from "../../../src/types";
 type Props = {
   isOpen: boolean;
   onClose: () => void;
-  corpusIds: string[];
-  onUpdateCorpusIds: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  corpusKeys: string;
+  onUpdateCorpusKeys: (event: React.ChangeEvent<HTMLInputElement>) => void;
   customerId: string;
   onUpdateCustomerId: (event: React.ChangeEvent<HTMLInputElement>) => void;
   apiKey: string;
@@ -35,8 +35,8 @@ type Props = {
   onUpdateInputSize: (inputSize: "large" | "medium") => void;
   emptyMessagesContent: string;
   onUpdateEmptyMessagesContent: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
-  isStreamingEnabled: boolean;
-  onUpdateIsStreamingEnabled: (isStreamingEnabled: boolean) => void;
+  numberOfSearchResults: number;
+  onUpdateNumberOfSearchResults: (isStreamingEnabled: number) => void;
   language: SummaryLanguage;
   onUpdateLanguage: (language: SummaryLanguage) => void;
   exampleQuestions: string;
@@ -49,13 +49,15 @@ type Props = {
   onUpdateRerankerId: (rerankerId: RerankerId) => void;
   lambda: number;
   onUpdateLambda: (lamda: number) => void;
+  isStreamingEnabled: boolean;
+  onUpdateIsStreamingEnabled: (isStreamingEnabled: boolean) => void;
 };
 
 export const ConfigurationDrawer = ({
   isOpen,
   onClose,
-  corpusIds,
-  onUpdateCorpusIds,
+  corpusKeys,
+  onUpdateCorpusKeys,
   customerId,
   onUpdateCustomerId,
   apiKey,
@@ -68,8 +70,8 @@ export const ConfigurationDrawer = ({
   onUpdateInputSize,
   emptyMessagesContent,
   onUpdateEmptyMessagesContent,
-  isStreamingEnabled,
-  onUpdateIsStreamingEnabled,
+  numberOfSearchResults,
+  onUpdateNumberOfSearchResults,
   language,
   onUpdateLanguage,
   exampleQuestions,
@@ -81,7 +83,9 @@ export const ConfigurationDrawer = ({
   rerankerId,
   onUpdateRerankerId,
   lambda,
-  onUpdateLambda
+  onUpdateLambda,
+  isStreamingEnabled,
+  onUpdateIsStreamingEnabled,
 }: Props) => {
   return (
     <VuiDrawer
@@ -116,8 +120,8 @@ export const ConfigurationDrawer = ({
 
       <VuiSpacer size="m" />
 
-      <VuiFormGroup label="Corpus IDs (comma-separated)" labelFor="corpusId">
-        <VuiTextInput value={corpusIds.join(",")} onChange={onUpdateCorpusIds} />
+      <VuiFormGroup label="Corpus Key" labelFor="corpusId">
+        <VuiTextInput value={corpusKeys} onChange={onUpdateCorpusKeys} />
       </VuiFormGroup>
 
       <VuiSpacer size="m" />
@@ -153,18 +157,21 @@ export const ConfigurationDrawer = ({
       <VuiSpacer size="m" />
 
       <VuiLabel>Enable streaming</VuiLabel>
-
-      <VuiSpacer size="xs" />
-
       <VuiToggle
-        onChange={(e) => {
-          onUpdateIsStreamingEnabled(e.target.checked);
-        }}
-        checked={isStreamingEnabled}
+          onChange={(e) => {
+            onUpdateIsStreamingEnabled(e.target.checked);
+          }}
+          checked={isStreamingEnabled}
       />
 
       <VuiSpacer size="m" />
 
+      <VuiFormGroup label="Number of search results to summarize" labelFor="numberOfSearchResults">
+        <VuiNumberInput value={numberOfSearchResults} onChange={(numberOfSearchResults) => onUpdateNumberOfSearchResults(numberOfSearchResults as number)} step={1} />
+      </VuiFormGroup>
+
+      <VuiSpacer size="m" />
+
       <VuiFormGroup label="Response language" labelFor="responseLanguage">
         <VuiSelect
           value={language}

docs/src/components/ConfigurationDrawer.tsx

@@ -34,23 +34,22 @@ const formatStringProp = (value?: string) => {
 
 const generateCodeSnippet = (
   customerId?: string,
-  corpusIds?: string[],
+  corpusKeys?: string,
   apiKey?: string,
   title?: string,
   placeholder?: string,
   inputSize?: string,
   emptyStateDisplay?: string,
-  isStreamingEnabled?: boolean,
+  numberOfSearchResults?: number,
   language?: SummaryLanguage,
   exampleQuestions?: string,
   rerankerId?: RerankerId,
-  lambda?: number
+  lambda?: number,
+  isStreamingEnabled?: boolean,
 ) => {
   const props = [
     `customerId="${customerId === "" ? "<Your Vectara customer ID>" : customerId}"`,
-    `corpusIds=${
-      corpusIds?.length === 0 ? '"<Your Vectara corpus IDs>"' : `{["${corpusIds?.join('","').replace(/\s/g, "")}"]}`
-    }`,
+    `corpusKeys="${corpusKeys === "" ? "<Your Vectara Corpus key>" : corpusKeys}"`,
     `apiKey="${apiKey === "" ? "<Your Vectara API key>" : apiKey}"`
   ];
 
@@ -80,6 +79,7 @@ const generateCodeSnippet = (
   }
 
   props.push(`enableStreaming={${isStreamingEnabled}}`);
+  props.push(`numberOfSearchResultsForSummary={${numberOfSearchResults}}`);
 
   props.push(`language="${language}"`);
   props.push(`rerankerId=${rerankerId}`);
@@ -99,7 +99,7 @@ export const App = () => (
 );`;
 };
 
-const DEFAULT_CORPUS_IDS = ["1"];
+const DEFAULT_CORPUS_KEY = "vectara-docs_1";
 const DEFAULT_CUSTOMER_ID = "1366999410";
 const DEFAULT_API_KEY = "zqt_UXrBcnI2UXINZkrv4g1tQPhzj02vfdtqYJIDiA";
 const DEFAULT_TITLE = "Vectara Docs Chatbot";
@@ -108,13 +108,14 @@ const DEFAULT_PLACEHOLDER = 'Try "What is Vectara?" or "How does RAG work?"';
 const App = () => {
   const [isConfigurationDrawerOpen, setIsConfigurationDrawerOpen] = useState(false);
   const [isChatbotForcedOpen, setIsChatbotForcedOpen] = useState(true);
-  const [corpusIds, setCorpusIds] = useState<string[]>([]);
+  const [corpusKeys, setCorpusKeys] = useState<string>("");
   const [customerId, setCustomerId] = useState<string>("");
   const [apiKey, setApiKey] = useState<string>("");
   const [title, setTitle] = useState<string>(DEFAULT_TITLE);
   const [placeholder, setPlaceholder] = useState<string>(DEFAULT_PLACEHOLDER);
   const [inputSize, setInputSize] = useState<"large" | "medium">("large");
   const [isStreamingEnabled, setIsStreamingEnabled] = useState<boolean>(true);
+  const [numberOfSearchResults, setNumberOfSearchResults] = useState<number>(15);
   const [language, setLanguage] = useState<SummaryLanguage>("eng");
   const [emptyStateJsx, setEmptyStateJsx] = useState<string>("");
   const [exampleQuestions, setExampleQuestions] = useState<string>("What is Vectara?, How does RAG work?");
@@ -123,14 +124,8 @@ const App = () => {
   const [rerankerId, setRerankerId] = useState<RerankerId>(DEFAULT_RERANKER_ID);
   const [lambda, setLambda] = useState<number>(DEFAULT_LAMBDA_VALUE);
 
-  const onUpdateCorpusIds = useCallback((e: ChangeEvent<HTMLInputElement>) => {
-    const sanitizedValue = e.target.value.trim();
-
-    if (sanitizedValue === "") {
-      setCorpusIds([]);
-      return;
-    }
-    setCorpusIds(sanitizedValue.split(","));
+  const onUpdateCorpusKeys = useCallback((e: ChangeEvent<HTMLInputElement>) => {
+    setCorpusKeys(e.target.value);
   }, []);
 
   const onUpdateCustomerId = useCallback((e: ChangeEvent<HTMLInputElement>) => {
@@ -217,7 +212,7 @@ const App = () => {
              * This ensures that we don't voluntarily display the docs corpus details in the text fields.
              */}
             <ReactChatbot
-              corpusIds={corpusIds.length === 0 ? DEFAULT_CORPUS_IDS : corpusIds}
+              corpusKey={corpusKeys === "" ? DEFAULT_CORPUS_KEY : corpusKeys}
               customerId={customerId === "" ? DEFAULT_CUSTOMER_ID : customerId}
               apiKey={apiKey === "" ? DEFAULT_API_KEY : apiKey}
               title={title === "" ? undefined : title}
@@ -227,12 +222,13 @@ const App = () => {
               emptyStateDisplay={emptyStateJsx === "" ? undefined : <CustomEmptyStateDisplay />}
               isInitiallyOpen={isChatbotForcedOpen}
               zIndex={9}
-              enableStreaming={isStreamingEnabled}
+              numberOfSearchResults={numberOfSearchResults}
               language={language}
               enableFactualConsistencyScore={enableFactualConsistencyScore}
               summaryPromptName={summaryPromptName}
               rerankerId={rerankerId}
               lambda={lambda}
+              enableStreaming={isStreamingEnabled}
             />
 
             <VuiSpacer size="m" />
@@ -265,17 +261,18 @@ const App = () => {
             <VuiCode language="tsx">
               {generateCodeSnippet(
                 customerId,
-                corpusIds,
+                corpusKeys,
                 apiKey,
                 title,
                 placeholder,
                 inputSize,
                 emptyStateJsx,
-                isStreamingEnabled,
+                numberOfSearchResults,
                 language,
                 exampleQuestions,
                 rerankerId,
-                lambda
+                lambda,
+                isStreamingEnabled
               )}
             </VuiCode>
 
@@ -308,9 +305,10 @@ export const App = () => {
     startNewConversation
   } = useChat({
     customerId: DEFAULT_CUSTOMER_ID,
-    corpusIds: DEFAULT_CORPUS_IDS,
+    corpusKeys: DEFAULT_CORPUS_KEY,
     apiKey: DEFAULT_API_KEY,
     enableStreaming: true, // Enable streaming, false otherwise. Defaults to true.
+    numberOfSearchResults: 15, // Number of search results to use for summary.
     language: "fra" // Response language. Defaults to "eng" for English.
   });
 
@@ -350,8 +348,8 @@ export const App = () => {
             <ConfigurationDrawer
               isOpen={isConfigurationDrawerOpen}
               onClose={() => setIsConfigurationDrawerOpen(false)}
-              corpusIds={corpusIds}
-              onUpdateCorpusIds={onUpdateCorpusIds}
+              corpusKeys={corpusKeys}
+              onUpdateCorpusKeys={onUpdateCorpusKeys}
               customerId={customerId}
               onUpdateCustomerId={onUpdateCustomerId}
               apiKey={apiKey}
@@ -364,8 +362,8 @@ export const App = () => {
               onUpdateInputSize={setInputSize}
               emptyMessagesContent={emptyStateJsx}
               onUpdateEmptyMessagesContent={onUpdateEmptyMessagesContent}
-              isStreamingEnabled={isStreamingEnabled}
-              onUpdateIsStreamingEnabled={setIsStreamingEnabled}
+              numberOfSearchResults={numberOfSearchResults}
+              onUpdateNumberOfSearchResults={setNumberOfSearchResults}
               language={language}
               onUpdateLanguage={setLanguage}
               exampleQuestions={exampleQuestions}
@@ -378,6 +376,8 @@ export const App = () => {
               onUpdateRerankerId={setRerankerId}
               lambda={lambda}
               onUpdateLambda={setLambda}
+              isStreamingEnabled={isStreamingEnabled}
+              onUpdateIsStreamingEnabled={setIsStreamingEnabled}
             />
           </div>
         </VuiAppContent>

docs/src/index.tsx

@@ -1,6 +1,6 @@
 {
   "name": "@vectara/react-chatbot",
-  "version": "2.0.0",
+  "version": "3.0.0",
   "description": "A Vectara-powered Chatbot component",
   "main": "lib/index.js",
   "module": "lib/index.js",
@@ -32,7 +32,7 @@
   "dependencies": {
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
-    "@vectara/stream-query-client": "^2.0.2",
+    "@vectara/stream-query-client": "^3.2.0",
     "classnames": "^2.3.2",
     "lodash": "^4.17.21",
     "prismjs": "^1.29.0",