adding custom prompt

README.md

@@ -133,6 +133,10 @@ 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.
 
+##### `customPrompt` (optional)
+
+Define the [custom prompt](https://docs.vectara.com/docs/prompts/vectara-prompt-engine) 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.

docs/src/components/ConfigurationDrawer.tsx

@@ -45,6 +45,8 @@ type Props = {
   onUpdateEnableFactualConsistencyScore: (enableFactualConsistencyScore: boolean) => void;
   summaryPromptName: string;
   onUpdateSummaryPromptName: (summaryPromptName: string) => void;
+  customPrompt: string;
+  onUpdateCustomPrompt: (customPrompt: string) => void;
   rerankerId: RerankerId;
   onUpdateRerankerId: (rerankerId: RerankerId) => void;
   lambda: number;
@@ -80,6 +82,8 @@ export const ConfigurationDrawer = ({
   onUpdateEnableFactualConsistencyScore,
   summaryPromptName,
   onUpdateSummaryPromptName,
+  customPrompt,
+  onUpdateCustomPrompt,
   rerankerId,
   onUpdateRerankerId,
   lambda,
@@ -234,6 +238,12 @@ export const ConfigurationDrawer = ({
 
       <VuiSpacer size="m" />
 
+      <VuiFormGroup label="Custom prompt" labelFor="customPrompt">
+        <VuiTextArea value={customPrompt} onChange={(e) => onUpdateCustomPrompt(e.target.value)} fullWidth />
+      </VuiFormGroup>
+
+      <VuiSpacer size="m" />
+
       <VuiFormGroup label="Reranker ID" labelFor="rerankerId">
         <VuiNumberInput value={rerankerId} onChange={(rerankerId) => onUpdateRerankerId(rerankerId as RerankerId)} />
       </VuiFormGroup>

docs/src/index.tsx

@@ -51,7 +51,8 @@ const generateCodeSnippet = (
   exampleQuestions?: string,
   rerankerId?: RerankerId,
   lambda?: number,
-  isStreamingEnabled?: boolean
+  isStreamingEnabled?: boolean,
+  customPrompt?: string,
 ) => {
   const props = [
     `customerId="${customerId === "" ? "<Your Vectara customer ID>" : customerId}"`,
@@ -87,6 +88,7 @@ const generateCodeSnippet = (
   props.push(`enableStreaming={${isStreamingEnabled}}`);
   props.push(`numberOfSearchResultsForSummary={${numberOfSearchResults}}`);
 
+  props.push(`customPrompt="${customPrompt}"`)
   props.push(`language="${language}"`);
   props.push(`rerankerId=${rerankerId}`);
   props.push(`lambda=${lambda}`);
@@ -127,6 +129,7 @@ const App = () => {
   const [exampleQuestions, setExampleQuestions] = useState<string>("What is Vectara?, How does RAG work?");
   const [enableFactualConsistencyScore, setEnableFactualConsistencyScore] = useState<boolean>(false);
   const [summaryPromptName, setSummaryPromptName] = useState<string>(DEFAULT_SUMMARIZER);
+  const [customPrompt, setCustomPrompt] = useState<string>("");
   const [rerankerId, setRerankerId] = useState<RerankerId>(DEFAULT_RERANKER_ID);
   const [lambda, setLambda] = useState<number>(DEFAULT_LAMBDA_VALUE);
 
@@ -232,6 +235,7 @@ const App = () => {
               language={language}
               enableFactualConsistencyScore={enableFactualConsistencyScore}
               summaryPromptName={summaryPromptName}
+              customPrompt={customPrompt}
               rerankerId={rerankerId}
               lambda={lambda}
               enableStreaming={isStreamingEnabled}
@@ -410,6 +414,8 @@ export const App = () => {
               onUpdateEnableFactualConsistencyScore={setEnableFactualConsistencyScore}
               summaryPromptName={summaryPromptName}
               onUpdateSummaryPromptName={setSummaryPromptName}
+              customPrompt={customPrompt}
+              onUpdateCustomPrompt={setCustomPrompt}
               rerankerId={rerankerId}
               onUpdateRerankerId={setRerankerId}
               lambda={lambda}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vectara/react-chatbot",
-  "version": "3.1.0",
+  "version": "3.2.0",
   "description": "A Vectara-powered Chatbot component",
   "main": "lib/index.js",
   "module": "lib/index.js",

src/components/ChatView.tsx

@@ -64,6 +64,9 @@ export interface Props {
   // Defines the name of the summary prompt. Defaults to "vectara-summary-ext-v1.2.0".
   summaryPromptName?: string;
 
+  // Define custom prompt
+  customPrompt?: string;
+
   // Define the reranker Id to be used , Defaults to "272725718"
   rerankerId?: RerankerId;
 
@@ -102,6 +105,7 @@ export const ChatView = ({
   language = "eng",
   enableFactualConsistencyScore,
   summaryPromptName,
+  customPrompt,
   rerankerId,
   lambda,
   enableStreaming = true,
@@ -119,6 +123,7 @@ export const ChatView = ({
       language,
       enableFactualConsistencyScore,
       summaryPromptName,
+      customPrompt,
       rerankerId,
       lambda,
       enableStreaming,

src/index.tsx

@@ -92,6 +92,7 @@ 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 customPrompt = this.getAttribute("customPrompt") ?? undefined;
     const rerankerId =
       this.getAttribute("rerankerId") !== null ? parseInt(this.getAttribute("rerankerId")!, 10) : undefined;
     const lambda = this.getAttribute("lambda") !== null ? parseFloat(this.getAttribute("lambda")!) : undefined;
@@ -118,6 +119,7 @@ class ReactChatbotWebComponent extends HTMLElement {
           language={language}
           enableFactualConsistencyScore={enableFactualConsistencyScore}
           summaryPromptName={summaryPromptName}
+          customPrompt={customPrompt}
           rerankerId={rerankerId as RerankerId}
           lambda={lambda}
           agenticConfiguration={agenticConfiguration}

src/useChat.ts

@@ -42,6 +42,7 @@ type UseChatConfig = {
   language?: SummaryLanguage;
   enableFactualConsistencyScore?: boolean;
   summaryPromptName?: string;
+  customPrompt?: string
   rerankerId?: number;
   lambda?: number;
   enableStreaming?: boolean;
@@ -60,6 +61,7 @@ export const useChat = ({
   language = "eng",
   enableFactualConsistencyScore,
   summaryPromptName = DEFAULT_SUMMARIZER,
+  customPrompt = undefined,
   rerankerId = DEFAULT_RERANKER_ID,
   lambda = DEFAULT_LAMBDA_VALUE,
   enableStreaming = true,
@@ -296,7 +298,8 @@ export const useChat = ({
               generationPresetName: summaryPromptName,
               maxUsedSearchResults: numberOfSearchResults,
               enableFactualConsistencyScore: enableFactualConsistencyScore,
-              responseLanguage: language
+              responseLanguage: language,
+              promptTemplate: customPrompt
             }
           };