Merge pull request #259 from FlowiseAI/feature/follow-up-prompts

Feature: Follow-up Prompts

Author: HenryHengZJ

dist/components/Bot.d.ts

@@ -63,6 +63,7 @@ export type MessageType = {
     action?: IAction | null;
     rating?: FeedbackRatingType;
     id?: string;
+    followUpPrompts?: string;
     dateTime?: string;
 };
 type observerConfigType = (accessor: string | boolean | object | MessageType[]) => void;

dist/components/Bot.d.ts.map

@@ -0,0 +1,8 @@
+type Props = {
+    prompt: string;
+    onPromptClick?: () => void;
+    starterPromptFontSize?: number;
+};
+export declare const FollowUpPromptBubble: (props: Props) => import("solid-js").JSX.Element;
+export {};
+//# sourceMappingURL=FollowUpPromptBubble.d.ts.map

dist/components/bubbles/FollowUpPromptBubble.d.ts

@@ -0,0 +1,3 @@
+import { JSX } from 'solid-js/jsx-runtime';
+export declare const SparklesIcon: (props: JSX.SvgSVGAttributes<SVGSVGElement>) => JSX.Element;
+//# sourceMappingURL=SparklesIcon.d.ts.map

dist/components/bubbles/FollowUpPromptBubble.d.ts.map

@@ -10,4 +10,5 @@ export * from './TrashIcon';
 export * from './XIcon';
 export * from './TickIcon';
 export * from './AttachmentIcon';
+export * from './SparklesIcon';
 //# sourceMappingURL=index.d.ts.map

dist/components/icons/SparklesIcon.d.ts

@@ -27,12 +27,13 @@ import { Popup, DisclaimerPopup } from '@/features/popup';
 import { Avatar } from '@/components/avatars/Avatar';
 import { DeleteButton, SendButton } from '@/components/buttons/SendButton';
 import { FilePreview } from '@/components/inputs/textInput/components/FilePreview';
-import { CircleDotIcon, TrashIcon } from './icons';
+import { CircleDotIcon, SparklesIcon, TrashIcon } from './icons';
 import { CancelButton } from './buttons/CancelButton';
 import { cancelAudioRecording, startAudioRecording, stopAudioRecording } from '@/utils/audioRecording';
 import { LeadCaptureBubble } from '@/components/bubbles/LeadCaptureBubble';
 import { removeLocalStorageChatHistory, getLocalStorageChatflow, setLocalStorageChatflow, setCookie, getCookie } from '@/utils';
 import { cloneDeep } from 'lodash';
+import { FollowUpPromptBubble } from '@/components/bubbles/FollowUpPromptBubble';
 import { fetchEventSource, EventStreamContentType } from '@microsoft/fetch-event-source';
 
 export type FileEvent<T = EventTarget> = {
@@ -107,6 +108,7 @@ export type MessageType = {
   action?: IAction | null;
   rating?: FeedbackRatingType;
   id?: string;
+  followUpPrompts?: string;
   dateTime?: string;
 };
 
@@ -279,6 +281,10 @@ export const Bot = (botProps: BotProps & { class?: string }) => {
   const [recordingNotSupported, setRecordingNotSupported] = createSignal(false);
   const [isLoadingRecording, setIsLoadingRecording] = createSignal(false);
 
+  // follow-up prompts
+  const [followUpPromptsStatus, setFollowUpPromptsStatus] = createSignal<boolean>(false);
+  const [followUpPrompts, setFollowUpPrompts] = createSignal<string[]>([]);
+
   // drag & drop
   const [isDragActive, setIsDragActive] = createSignal(false);
   const [uploadedFiles, setUploadedFiles] = createSignal<File[]>([]);
@@ -473,6 +479,11 @@ export const Bot = (botProps: BotProps & { class?: string }) => {
     handleSubmit(prompt);
   };
 
+  const followUpPromptClick = (prompt: string) => {
+    setFollowUpPrompts([]);
+    handleSubmit(prompt);
+  };
+
   const updateMetadata = (data: any, input: string) => {
     if (data.chatId) {
       setChatId(data.chatId);
@@ -501,6 +512,17 @@ export const Bot = (botProps: BotProps & { class?: string }) => {
         return allMessages;
       });
     }
+
+    if (data.followUpPrompts) {
+      setMessages((prevMessages) => {
+        const allMessages = [...cloneDeep(prevMessages)];
+        if (allMessages[allMessages.length - 1].type === 'userMessage') return allMessages;
+        allMessages[allMessages.length - 1].followUpPrompts = data.followUpPrompts;
+        addChatMessage(allMessages);
+        return allMessages;
+      });
+      setFollowUpPrompts(JSON.parse(data.followUpPrompts));
+    }
   };
 
   const fetchResponseFromEventStream = async (chatflowid: string, params: any) => {
@@ -861,6 +883,7 @@ export const Bot = (botProps: BotProps & { class?: string }) => {
               if (message.agentReasoning) chatHistory.agentReasoning = message.agentReasoning;
               if (message.action) chatHistory.action = message.action;
               if (message.artifacts) chatHistory.artifacts = message.artifacts;
+              if (message.followUpPrompts) chatHistory.followUpPrompts = message.followUpPrompts;
               return chatHistory;
             })
           : [{ message: props.welcomeMessage ?? defaultWelcomeMessage, type: 'apiMessage' }];
@@ -909,6 +932,9 @@ export const Bot = (botProps: BotProps & { class?: string }) => {
           setMessages((prevMessages) => [...prevMessages, { message: '', type: 'leadCaptureMessage' }]);
         }
       }
+      if (chatbotConfig.followUpPrompts) {
+        setFollowUpPromptsStatus(chatbotConfig.followUpPrompts.status);
+      }
     }
 
     // eslint-disable-next-line solid/reactivity
@@ -925,6 +951,17 @@ export const Bot = (botProps: BotProps & { class?: string }) => {
     };
   });
 
+  createEffect(() => {
+    if (followUpPromptsStatus() && messages().length > 0) {
+      const lastMessage = messages()[messages().length - 1];
+      if (lastMessage.type === 'apiMessage' && lastMessage.followUpPrompts) {
+        setFollowUpPrompts(JSON.parse(lastMessage.followUpPrompts));
+      } else if (lastMessage.type === 'userMessage') {
+        setFollowUpPrompts([]);
+      }
+    }
+  });
+
   const addRecordingToPreviews = (blob: Blob) => {
     let mimeType = '';
     const pos = blob.type.indexOf(';');
@@ -1366,6 +1403,27 @@ export const Bot = (botProps: BotProps & { class?: string }) => {
               </div>
             </Show>
           </Show>
+          <Show when={messages().length > 2 && followUpPromptsStatus()}>
+            <Show when={followUpPrompts().length > 0}>
+              <>
+                <div class="flex items-center gap-1 px-5">
+                  <SparklesIcon class="w-4 h-4" />
+                  <span class="text-sm text-gray-700">Try these prompts</span>
+                </div>
+                <div class="w-full flex flex-row flex-wrap px-5 py-[10px] gap-2">
+                  <For each={[...followUpPrompts()]}>
+                    {(prompt, index) => (
+                      <FollowUpPromptBubble
+                        prompt={prompt}
+                        onPromptClick={() => followUpPromptClick(prompt)}
+                        starterPromptFontSize={botProps.starterPromptFontSize} // Pass it here as a number
+                      />
+                    )}
+                  </For>
+                </div>
+              </>
+            </Show>
+          </Show>
           <Show when={previews().length > 0}>
             <div class="w-full flex items-center justify-start gap-2 px-5 pt-2 border-t border-[#eeeeee]">
               <For each={[...previews()]}>{(item) => <>{previewDisplay(item)}</>}</For>