Add exampleQuestions prop. Adjust default empty state design. Refacto…

…r tests.

README.md

@@ -95,9 +95,13 @@ Configure the title in the header of the chatbot window.
 
 Configure the placeholder text in the chatbot's input.
 
+##### `exampleQuestions` (optional)
+
+Configure the example questions that will be suggested to the user when there are no messages to display.
+
 ##### `emptyStateDisplay` (optional)
 
-Configure JSX content to render in the messages window when there are no messages to display.
+Configure JSX content to render in the messages window when there are no messages to display. When configured, this will supersede `exampleQuestions`.
 
 ##### `isInitiallyOpen` (optional)
 

docs/src/components/ConfigurationDrawer.tsx

@@ -39,6 +39,8 @@ type Props = {
   onUpdateIsStreamingEnabled: (isStreamingEnabled: boolean) => void;
   language: SummaryLanguage;
   onUpdateLanguage: (language: SummaryLanguage) => void;
+  exampleQuestions: string;
+  onUpdateExampleQuestions: (event: React.ChangeEvent<HTMLInputElement>) => void;
 };
 
 export const ConfigurationDrawer = ({
@@ -61,7 +63,9 @@ export const ConfigurationDrawer = ({
   isStreamingEnabled,
   onUpdateIsStreamingEnabled,
   language,
-  onUpdateLanguage
+  onUpdateLanguage,
+  exampleQuestions,
+  onUpdateExampleQuestions
 }: Props) => {
   return (
     <VuiDrawer
@@ -126,6 +130,12 @@ export const ConfigurationDrawer = ({
 
       <VuiSpacer size="m" />
 
+      <VuiFormGroup label="Example questions" labelFor="exampleQuestions">
+        <VuiTextInput value={exampleQuestions} onChange={onUpdateExampleQuestions} fullWidth />
+      </VuiFormGroup>
+
+      <VuiSpacer size="m" />
+
       <VuiLabel>Enable Streaming</VuiLabel>
 
       <VuiSpacer size="xs" />
@@ -143,7 +153,7 @@ export const ConfigurationDrawer = ({
         <VuiSelect
           value={language}
           onChange={(evt) => {
-            onUpdateLanguage(evt.target.value);
+            onUpdateLanguage(evt.target.value as SummaryLanguage);
           }}
           options={SUMMARY_LANGUAGES.filter((lang) => lang !== "auto").map((lang) => ({
             text: lang,

docs/src/index.tsx

@@ -40,7 +40,8 @@ const generateCodeSnippet = (
   inputSize?: string,
   emptyStateDisplay?: string,
   isStreamingEnabled?: boolean,
-  language?: SummaryLanguage
+  language?: SummaryLanguage,
+  exampleQuestions?: string
 ) => {
   const props = [
     `customerId="${customerId === "" ? "<Your Vectara customer ID>" : customerId}"`,
@@ -58,6 +59,15 @@ const generateCodeSnippet = (
     props.push(`placeholder=${formatStringProp(placeholder)}`);
   }
 
+  if (exampleQuestions) {
+    props.push(
+      `exampleQuestions={[${exampleQuestions
+        .split(",")
+        .map((value) => formatStringProp(value.trim()))
+        .join(", ")}]}`
+    );
+  }
+
   if (inputSize) {
     props.push(`inputSize="${inputSize}"`);
   }
@@ -102,6 +112,7 @@ const App = () => {
   const [isStreamingEnabled, setIsStreamingEnabled] = useState<boolean>(true);
   const [language, setLanguage] = useState<SummaryLanguage>("eng");
   const [emptyStateJsx, setEmptyStateJsx] = useState<string>("");
+  const [exampleQuestions, setExampleQuestions] = useState<string>("What is Vectara?, How does RAG work?");
 
   const onUpdateCorpusIds = useCallback((e: ChangeEvent<HTMLInputElement>) => {
     const sanitizedValue = e.target.value.trim();
@@ -133,13 +144,19 @@ const App = () => {
     setEmptyStateJsx(e.target.value);
   }, []);
 
+  const onUpdateExampleQuestions = useCallback((e: ChangeEvent<HTMLInputElement>) => {
+    setExampleQuestions(e.target.value);
+  }, []);
+
   const CustomEmptyStateDisplay = useCallback(() => {
     return (
       // @ts-ignore
       <JsxParser jsx={emptyStateJsx} />
     );
   }, [emptyStateJsx]);
 
+  const parsedExampleQuestions = exampleQuestions && exampleQuestions.split(",");
+
   return (
     <>
       <VuiAppHeader
@@ -196,6 +213,7 @@ const App = () => {
               title={title === "" ? undefined : title}
               placeholder={placeholder}
               inputSize={inputSize}
+              exampleQuestions={parsedExampleQuestions}
               emptyStateDisplay={emptyStateJsx === "" ? undefined : <CustomEmptyStateDisplay />}
               isInitiallyOpen={isChatbotForcedOpen}
               zIndex={9}
@@ -238,7 +256,8 @@ const App = () => {
                 inputSize,
                 emptyStateJsx,
                 isStreamingEnabled,
-                language
+                language,
+                exampleQuestions
               )}
             </VuiCode>
             <VuiSpacer size="xxl" />
@@ -327,6 +346,8 @@ export const App = () => {
               onUpdateIsStreamingEnabled={setIsStreamingEnabled}
               language={language}
               onUpdateLanguage={setLanguage}
+              exampleQuestions={exampleQuestions}
+              onUpdateExampleQuestions={onUpdateExampleQuestions}
             />
           </div>
         </VuiAppContent>

src/components/ChatView.tsx

@@ -1,30 +1,18 @@
-import { Fragment, ReactNode, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { VuiButtonSecondary, VuiFlexContainer, VuiFlexItem, VuiSpacer } from "../vui";
+import { Fragment, ReactNode, useEffect, useMemo, useRef, useState } from "react";
+import { VuiButtonSecondary, VuiContextProvider, VuiFlexContainer, VuiFlexItem, VuiSpacer } from "../vui";
 import { QueryInput } from "./QueryInput";
 import { ChatItem } from "./ChatItem";
 import { useChat } from "../useChat";
 import { Loader } from "./Loader";
-import { ChatBubbleIcon, MinimizeIcon } from "./Icons";
+import { MinimizeIcon } from "./Icons";
 import { SummaryLanguage } from "types";
+import { ExampleQuestions } from "./exampleQuestions/ExampleQuestions";
 
 const inputSizeToQueryInputSize = {
   large: "l",
   medium: "m"
 } as const;
 
-const DefaultEmptyMessagesState = () => (
-  <VuiFlexContainer
-    className="vrcbEmptyMessages"
-    spacing="none"
-    alignItems="center"
-    justifyContent="center"
-    direction="column"
-  >
-    <ChatBubbleIcon size="150px" color="#000000" />
-    Ask anything.
-  </VuiFlexContainer>
-);
-
 interface Props {
   customerId: string;
   corpusIds: string[];
@@ -33,6 +21,7 @@ interface Props {
   language: SummaryLanguage;
   title?: string;
   placeholder?: string;
+  exampleQuestions?: string[];
   inputSize?: "large" | "medium";
   emptyStateDisplay?: ReactNode;
   isInitiallyOpen?: boolean;
@@ -50,8 +39,9 @@ export const ChatView = ({
   apiKey,
   title = "My Chatbot",
   placeholder = "Chat with your AI Assistant",
+  exampleQuestions,
   inputSize = "large",
-  emptyStateDisplay = <DefaultEmptyMessagesState />,
+  emptyStateDisplay,
   isInitiallyOpen,
   zIndex = 9999,
   enableStreaming,
@@ -124,17 +114,17 @@ export const ChatView = ({
   const hasContent = isLoading || messageHistory.length > 0 || activeMessage;
   const isRequestDisabled = isLoading || isStreamingResponse || query.trim().length === 0;
 
-  const onSendQuery = () => {
-    if (isRequestDisabled) return;
-    sendMessage({ query });
+  const onSendQuery = (queryOverride?: string) => {
+    if (isRequestDisabled && !queryOverride) return;
+    sendMessage({ query: queryOverride ?? query });
     setQuery("");
   };
 
   const spacer = historyItems.length === 0 ? null : <VuiSpacer size={activeMessage ? "m" : "l"} />;
 
   useEffect(updateScrollPosition, [isLoading, activeMessage]);
 
-  return isOpen ? (
+  const content = isOpen ? (
     <div className="vrcbChatbotWrapper" style={{ zIndex }}>
       <VuiFlexContainer className="vrcbHeader" spacing="none" direction="row">
         <VuiFlexItem grow={1} alignItems="center">
@@ -152,7 +142,9 @@ export const ChatView = ({
         <VuiFlexItem className="vrcbMessagesWrapper" basis="fill">
           <div ref={appLayoutRef}>
             {!hasContent ? (
-              emptyStateDisplay
+              emptyStateDisplay ?? (
+                <ExampleQuestions exampleQuestions={exampleQuestions ?? []} onSubmitChat={onSendQuery} />
+              )
             ) : (
               <>
                 <VuiSpacer size="xs" />
@@ -204,4 +196,6 @@ export const ChatView = ({
       {title}
     </button>
   );
+
+  return <VuiContextProvider>{content}</VuiContextProvider>;
 };

src/components/chatView.scss

@@ -171,10 +171,7 @@ $chatbotPosition: $sizeS;
 }
 
 .vrcbEmptyMessages {
-  color: $colorFullShade;
-  font-weight: $fontWeightBold;
   height: 100%;
-  opacity: 0.3;
 }
 
 .vrcbRetryButton {

src/components/exampleQuestions/DefaultEmptyPrompt.tsx

@@ -0,0 +1,20 @@
+import { VuiFlexContainer, VuiText, VuiTextColor } from "vui";
+import { ChatBubbleIcon } from "../Icons";
+
+export const DefaultEmptyPrompt = () => (
+  <VuiFlexContainer
+    className="vrcbEmptyMessages"
+    spacing="none"
+    alignItems="center"
+    justifyContent="center"
+    direction="column"
+  >
+    <ChatBubbleIcon size="80px" color="#cbcdde" />
+
+    <VuiText>
+      <p>
+        <VuiTextColor color="subdued">Ask anything.</VuiTextColor>
+      </p>
+    </VuiText>
+  </VuiFlexContainer>
+);

src/components/exampleQuestions/ExampleQuestion.tsx

@@ -0,0 +1,33 @@
+import { VuiSpacer, VuiTextColor, VuiTitle, VuiTopicButton } from "../../vui";
+
+type Props = {
+  children?: React.ReactNode;
+  onClick: () => void;
+  title?: string;
+};
+
+export const ExampleQuestion = ({ children, onClick, title }: Props) => {
+  const content = (
+    <>
+      {title && (
+        <>
+          <VuiTitle size="s">
+            <p>
+              <VuiTextColor color="primary">{title}</VuiTextColor>
+            </p>
+          </VuiTitle>
+
+          {children && <VuiSpacer size="xxs" />}
+        </>
+      )}
+
+      {children}
+    </>
+  );
+
+  return (
+    <VuiTopicButton onClick={onClick} data-testid="exampleQuestion">
+      {content}
+    </VuiTopicButton>
+  );
+};

src/components/exampleQuestions/ExampleQuestions.tsx

@@ -0,0 +1,35 @@
+import { VuiGrid, VuiSpacer, VuiText, VuiTextColor } from "../../vui";
+import { ExampleQuestion } from "./ExampleQuestion";
+import { DefaultEmptyPrompt } from "./DefaultEmptyPrompt";
+
+type Props = {
+  exampleQuestions: string[];
+  onSubmitChat: (query: string) => void;
+};
+
+export const ExampleQuestions = ({ exampleQuestions, onSubmitChat }: Props) => {
+  const hasExampleQuestions = exampleQuestions.length > 0;
+  if (!hasExampleQuestions) return <DefaultEmptyPrompt />;
+
+  return (
+    <div className="vrcbExampleQuestionsContainer">
+      <VuiText>
+        <p>
+          <VuiTextColor color="subdued">Try out these example questions</VuiTextColor>
+        </p>
+      </VuiText>
+
+      <VuiSpacer size="m" />
+
+      <VuiGrid columns={3}>
+        {exampleQuestions.map((exampleQuestion) => (
+          <ExampleQuestion
+            key={exampleQuestion}
+            onClick={() => onSubmitChat(exampleQuestion)}
+            title={exampleQuestion}
+          />
+        ))}
+      </VuiGrid>
+    </div>
+  );
+};

src/components/exampleQuestions/exampleQuestions.scss

@@ -0,0 +1,9 @@
+@import "../../vui/styleUtils/index.scss";
+
+.vrcbExampleQuestionsContainer {
+  padding: $sizeM;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}

src/index.scss

@@ -6,4 +6,5 @@
 
 @import "./components/chatView.scss";
 @import "./components/loader.scss";
+@import "./components/exampleQuestions/exampleQuestions.scss";
 @import "./vui/_index.scss";