feat: Accept agenticConfiguration prop to accommodate agentic behaviors.

docs/src/index.tsx

@@ -28,7 +28,7 @@ import { HeaderLogo } from "./components/HeaderLogo";
 import { ConfigurationDrawer } from "components/ConfigurationDrawer";
 import "./ui/_index.scss";
 import "./index.scss";
-import { RerankerId } from "../../src/types";
+import { AgenticResponse, RerankerId } from "../../src/types";
 
 const formatStringProp = (value?: string) => {
   if (!value) {
@@ -235,6 +235,38 @@ const App = () => {
               rerankerId={rerankerId}
               lambda={lambda}
               enableStreaming={isStreamingEnabled}
+              agenticConfiguration={{
+                url: "https://vectara-com-chatbot-agent-server.onrender.com/verify-prospect",
+                onAgenticResponse: (response: AgenticResponse) => {
+                  if (response.event === "prompt_schedule_sales") {
+                    return {
+                      message: response.message,
+                      userActionOptions: [
+                        {
+                          label: "Schedule a demo",
+                          onSelect: () =>
+                            console.log("In a live context, this would connect you to the Vectara Sales team.")
+                        }
+                      ]
+                    };
+                  }
+
+                  if (response.event === "handle_prospect_decline") {
+                    return {
+                      message: response.message
+                    };
+                  }
+
+                  if (response.event === "schedule_sales") {
+                    return {
+                      message: {
+                        content: "In a live context, this would connect you to the Vectara Sales team."
+                      }
+                    };
+                  }
+                }
+              }}
+              requestSource="react-chatbot-docs"
             />
 
             <VuiSpacer size="m" />

package.json

@@ -32,7 +32,7 @@
   "dependencies": {
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
-    "@vectara/stream-query-client": "^3.2.0",
+    "@vectara/stream-query-client": "^5.1.0",
     "classnames": "^2.3.2",
     "lodash": "^4.17.21",
     "prismjs": "^1.29.0",

src/components/ChatItem.tsx

@@ -114,14 +114,12 @@ export const ChatItem = ({ question, answer, searchResults, factualConsistencySc
               </span>
             )}
           </VuiText>
-
           {factualConsistencyScore && (
             <>
               <VuiSpacer size="xs" />
               {factualConsistencyScore}
             </>
           )}
-
           {reorderedSearchResults && reorderedSearchResults.length > 0 && (
             <>
               <VuiSpacer size="s" />
@@ -140,9 +138,11 @@ export const ChatItem = ({ question, answer, searchResults, factualConsistencySc
 
   return (
     <>
-      <div className="vrcbChatMessageContainer vrcbChatMessageContainer--question">
-        <div className="vrcbChatMessage">{question}</div>
-      </div>
+      {question && (
+        <div className="vrcbChatMessageContainer vrcbChatMessageContainer--question">
+          <div className="vrcbChatMessage">{question}</div>
+        </div>
+      )}
 
       <VuiSpacer size="xs" />
 

src/components/ChatReferences.tsx

@@ -1,6 +1,6 @@
-import {VuiFlexContainer, VuiFlexItem, VuiText, VuiAccordion, VuiSpacer} from "../vui";
+import { VuiFlexContainer, VuiFlexItem, VuiText, VuiAccordion, VuiSpacer } from "../vui";
 import { SearchResultWithSnippet } from "../types";
-import {parseSnippet} from "../utils/parseSnippet";
+import { parseSnippet } from "../utils/parseSnippet";
 
 type Props = {
   searchResults: SearchResultWithSnippet[];
@@ -32,7 +32,7 @@ export const ChatReferences = ({ searchResults, isOpen = false, setIsOpen = () =
 
 const ChatReference = ({ result, position }: { result: SearchResultWithSnippet; position: number }) => {
   const url = result.document_metadata.url as string;
-  const { text } =  parseSnippet(result?.snippet?.text)
+  const { text } = parseSnippet(result?.snippet?.text);
   return (
     <>
       <VuiFlexContainer alignItems="start" spacing="s">
@@ -48,7 +48,7 @@ const ChatReference = ({ result, position }: { result: SearchResultWithSnippet;
                   {text}
                 </a>
               ) : (
-                  text
+                text
               )}
             </p>
           </VuiText>

src/components/ChatView.tsx

@@ -1,13 +1,20 @@
 import { Fragment, ReactNode, useEffect, useMemo, useRef, useState } from "react";
-import { VuiButtonSecondary, VuiContextProvider, VuiFlexContainer, VuiFlexItem, VuiSpacer } from "../vui";
+import {
+  VuiButtonSecondary,
+  VuiContextProvider,
+  VuiFlexContainer,
+  VuiFlexItem,
+  VuiSpacer,
+  VuiTopicButton
+} from "../vui";
 import { QueryInput } from "./QueryInput";
 import { ChatItem } from "./ChatItem";
 import { useChat } from "../useChat";
 import { Loader } from "./Loader";
 import { MinimizeIcon } from "./Icons";
 import { FactualConsistencyBadge } from "./FactualConsistencyBadge";
 import { ExampleQuestions } from "./exampleQuestions/ExampleQuestions";
-import {RerankerId, SummaryLanguage} from "types";
+import { AgenticConfiguration, ChatActionOption, RerankerId, SummaryLanguage } from "types";
 
 const inputSizeToQueryInputSize = {
   large: "l",
@@ -66,6 +73,13 @@ export interface Props {
 
   // Enables streaming responses from the API. Defaults to true.
   enableStreaming?: boolean;
+
+  // Enables the chatbot to modify its behavior by sending requests to an agentic service.
+  agenticConfiguration?: AgenticConfiguration;
+
+  // A string that allows the Vectara platform to track where chat requests are coming from.
+  // This could be an application name, for example.
+  requestSource?: string;
 }
 
 /**
@@ -91,6 +105,8 @@ export const ChatView = ({
   rerankerId,
   lambda,
   enableStreaming = true,
+  agenticConfiguration,
+  requestSource
 }: Props) => {
   const [isOpen, setIsOpen] = useState<boolean>(isInitiallyOpen ?? false);
   const [query, setQuery] = useState<string>("");
@@ -105,7 +121,9 @@ export const ChatView = ({
       summaryPromptName,
       rerankerId,
       lambda,
-      enableStreaming
+      enableStreaming,
+      agenticConfiguration,
+      requestSource
     });
 
   const appLayoutRef = useRef<HTMLDivElement>(null);
@@ -150,27 +168,53 @@ export const ChatView = ({
 
   const historyItems = useMemo(
     () =>
-      messageHistory.map((turn, index) => {
-        const { question, answer, results, factualConsistencyScore } = turn;
-        const onRetry =
-          hasError && index === messageHistory.length - 1
-            ? () => sendMessage({ query: question, isRetry: true })
-            : undefined;
-
-        return (
-          <Fragment key={index}>
-            <ChatItem
-              question={question}
-              answer={answer}
-              searchResults={results}
-              factualConsistencyScore={
-                enableFactualConsistencyScore && <FactualConsistencyBadge score={factualConsistencyScore} />
-              }
-              onRetry={onRetry}
-            />
-            {index < messageHistory.length - 1 && <VuiSpacer size="m" />}
-          </Fragment>
-        );
+      messageHistory.map((messageHistoryItem, index) => {
+        if (messageHistoryItem.type === "action") {
+          const { options } = messageHistoryItem;
+
+          return (
+            <Fragment key={index}>
+              <div className="vrcbChatMessageContainer vrcbChatMessageContainer--actionResponse">
+                <VuiFlexContainer spacing="m">
+                  {options?.map((option: ChatActionOption, optionIndex: number) => (
+                    <VuiTopicButton
+                      key={`messageHistoryItem-${index}-actionOption-${optionIndex}`}
+                      href={option.url}
+                      title={option.label}
+                      onClick={() => {
+                        if (option.message) {
+                          sendMessage({ query: option.message });
+                        }
+                        option.onSelect?.();
+                      }}
+                    />
+                  ))}
+                </VuiFlexContainer>
+              </div>
+            </Fragment>
+          );
+        } else {
+          const { question, answer, results, factualConsistencyScore } = messageHistoryItem;
+          const onRetry =
+            hasError && index === messageHistory.length - 1
+              ? () => sendMessage({ query: question, isRetry: true })
+              : undefined;
+
+          return (
+            <Fragment key={index}>
+              <ChatItem
+                question={question}
+                answer={answer}
+                searchResults={results}
+                factualConsistencyScore={
+                  enableFactualConsistencyScore && <FactualConsistencyBadge score={factualConsistencyScore} />
+                }
+                onRetry={onRetry}
+              />
+              {index < messageHistory.length - 1 && <VuiSpacer size="m" />}
+            </Fragment>
+          );
+        }
       }),
     [messageHistory]
   );
@@ -180,8 +224,10 @@ export const ChatView = ({
 
   const onSendQuery = (queryOverride?: string) => {
     if (isRequestDisabled && !queryOverride) return;
-    sendMessage({ query: queryOverride ?? query });
+
     setQuery("");
+
+    sendMessage({ query: queryOverride ?? query });
   };
 
   const spacer = historyItems.length === 0 ? null : <VuiSpacer size={activeMessage ? "m" : "l"} />;

src/components/chatView.scss

@@ -49,6 +49,18 @@ $chatbotPosition: $sizeS;
   }
 }
 
+.vrcbChatMessageContainer--actionResponse {
+  justify-content: flex-start;
+  padding: $sizeM $sizeXxl $sizeM $sizeS;
+
+  .vrcbChatMessage {
+    color: $colorText;
+    font-weight: $fontWeightBold;
+    font-size: $fontSizeStandard;
+    padding-left: 0;
+  }
+}
+
 .vrcbChatMessageContainer--thinking,
 .vrcbChatMessageContainer--answer {
   padding: 0 $sizeXxl;