feat: Accept agenticConfiguration prop to accommodate agentic behaviors.

Author: mrderyk

docs/package-lock.json

@@ -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,33 @@ 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: "Would you like to connect with the Vectara Sales team?",
+                      userActionOptions: [
+                        {
+                          label: "Schedule a demo",
+                          message: "I'd like to connect with sales"
+                        }
+                      ]
+                    };
+                  }
+
+                  if (response.event === "handle_prospect_decline") {
+                    return {
+                      message: "No problem! Let us know when you're ready. Looking forward to helping you out!"
+                    };
+                  }
+
+                  if (response.event === "schedule_sales") {
+                    return { message: "In a live context, this would connect you to the Vectara Sales team." };
+                  }
+                }
+              }}
+              requestSource="react-chatbot-docs"
             />
 
             <VuiSpacer size="m" />

docs/src/index.tsx

@@ -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",

package-lock.json

@@ -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" />
 

package.json

@@ -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,38 +168,66 @@ 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]
   );
 
   const hasContent = isLoading || messageHistory.length > 0 || activeMessage;
   const isRequestDisabled = isLoading || isStreamingResponse || query.trim().length === 0;
 
-  const onSendQuery = (queryOverride?: string) => {
+  const onSendQuery = async (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/ChatItem.tsx

@@ -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;

src/components/ChatView.tsx

@@ -1,7 +1,7 @@
 import { ReactNode, useEffect, useRef } from "react";
 import * as ReactDOM from "react-dom";
 import { Props, ChatView } from "./components/ChatView";
-import type {RerankerId, SummaryLanguage} from "./types";
+import type { AgenticConfiguration, RerankerId, SummaryLanguage } from "./types";
 export type { Props } from "components/ChatView";
 export { DEFAULT_SUMMARIZER, DEFAULT_RERANKER_ID, DEFAULT_LAMBDA_VALUE } from "./useChat";
 
@@ -15,6 +15,7 @@ class ReactChatbotWebComponent extends HTMLElement {
 
   // References
   emptyStateDisplay!: ReactNode;
+  agenticConfiguration!: AgenticConfiguration;
 
   static get observedAttributes() {
     return [
@@ -35,6 +36,8 @@ class ReactChatbotWebComponent extends HTMLElement {
       "rerankerId",
       "lambda",
       "enablestreaming",
+      "agenticconfigurationupdatetime",
+      "requestsource"
     ];
   }
 
@@ -67,9 +70,15 @@ class ReactChatbotWebComponent extends HTMLElement {
     this.setAttribute("emptystatedisplayupdatetime", Date.now().toString());
   }
 
+  public setAgenticConfiguration(agenticConfiguration: AgenticConfiguration) {
+    this.agenticConfiguration = agenticConfiguration;
+
+    this.setAttribute("agenticconfigurationupdatetime", Date.now().toString());
+  }
+
   public connectedCallback() {
     const customerId = this.getAttribute("customerId") ?? "";
-    const corpusKeys = (this.getAttribute("corpuskeys") ?? "");
+    const corpusKeys = this.getAttribute("corpuskeys") ?? "";
     const apiKey = this.getAttribute("apiKey") ?? "";
     const title = this.getAttribute("title") ?? undefined;
     const placeholder = this.getAttribute("placeholder") ?? undefined;
@@ -83,12 +92,14 @@ class ReactChatbotWebComponent extends HTMLElement {
     const language = (this.getAttribute("language") as SummaryLanguage) ?? undefined;
     const enableFactualConsistencyScore = this.getAttribute("enableFactualConsistencyScore") === "true";
     const summaryPromptName = this.getAttribute("summaryPromptName") ?? undefined;
-    const rerankerId = this.getAttribute("rerankerId") !== null ? parseInt(this.getAttribute("rerankerId")!, 10) : undefined;
+    const rerankerId =
+      this.getAttribute("rerankerId") !== null ? parseInt(this.getAttribute("rerankerId")!, 10) : undefined;
     const lambda = this.getAttribute("lambda") !== null ? parseFloat(this.getAttribute("lambda")!) : undefined;
     const enableStreaming =
-        this.getAttribute("enableStreaming") !== null ? this.getAttribute("enableStreaming") == "true" : undefined;
+      this.getAttribute("enableStreaming") !== null ? this.getAttribute("enableStreaming") == "true" : undefined;
+    const agenticConfiguration = this.agenticConfiguration ?? undefined;
+    const requestSource = this.getAttribute("requestsource") ?? undefined;
 
-    console.log(corpusKeys)
     ReactDOM.render(
       <div>
         <ChatView
@@ -109,6 +120,8 @@ class ReactChatbotWebComponent extends HTMLElement {
           summaryPromptName={summaryPromptName}
           rerankerId={rerankerId as RerankerId}
           lambda={lambda}
+          agenticConfiguration={agenticConfiguration}
+          requestSource={requestSource}
         />
       </div>,
       this.mountPoint
@@ -134,6 +147,11 @@ export const ReactChatbot = (props: Props) => {
       // @ts-ignore
       (ref.current as ReactChatbotWebComponent).setEmptyStateDisplay(props.emptyStateDisplay);
     }
+
+    if (props.agenticConfiguration) {
+      // @ts-ignore
+      (ref.current as ReactChatbotWebComponent).setAgenticConfiguration(props.agenticConfiguration);
+    }
   }, [props]);
 
   const typedProps = props as Record<string, any>;