Merge pull request #349 from FlowiseAI/feature/Thinking-Message

Feat/add thinking message

Author: HenryHengZJ

dist/components/Bot.d.ts

@@ -77,6 +77,9 @@ export type MessageType = {
     id?: string;
     followUpPrompts?: string;
     dateTime?: string;
+    thinking?: string;
+    thinkingDuration?: number;
+    isThinking?: boolean;
 };
 type observerConfigType = (accessor: string | boolean | object | MessageType[]) => void;
 export type observersConfigType = Record<'observeUserInput' | 'observeLoading' | 'observeMessages', observerConfigType>;

dist/components/Bot.d.ts.map

@@ -0,0 +1,10 @@
+type Props = {
+    thinking?: string;
+    thinkingDuration?: number;
+    isThinking?: boolean;
+    backgroundColor?: string;
+    textColor?: string;
+};
+export declare const ThinkingCard: (props: Props) => import("solid-js").JSX.Element;
+export {};
+//# sourceMappingURL=ThinkingBubble.d.ts.map

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

@@ -134,6 +134,9 @@ export type MessageType = {
   id?: string;
   followUpPrompts?: string;
   dateTime?: string;
+  thinking?: string;
+  thinkingDuration?: number;
+  isThinking?: boolean;
 };
 
 type IUploads = {
@@ -496,6 +499,7 @@ export const Bot = (botProps: BotProps & { class?: string }) => {
   const [isLeadSaved, setIsLeadSaved] = createSignal(false);
   const [leadEmail, setLeadEmail] = createSignal('');
   const [disclaimerPopupOpen, setDisclaimerPopupOpen] = createSignal(false);
+  const [isThinking, setIsThinking] = createSignal(false);
 
   const [openFeedbackDialog, setOpenFeedbackDialog] = createSignal(false);
   const [feedback, setFeedback] = createSignal('');
@@ -789,6 +793,41 @@ export const Bot = (botProps: BotProps & { class?: string }) => {
     });
   };
 
+  const handleThinkingEvent = (data: string, duration?: number) => {
+    if (data && duration === undefined) {
+      setIsThinking(true);
+      setMessages((prevMessages) => {
+        const lastMsg = prevMessages[prevMessages.length - 1];
+        if (lastMsg.type === 'userMessage') return prevMessages;
+        const allMessages = [...prevMessages.slice(0, -1), { ...lastMsg, thinking: (lastMsg.thinking || '') + data, isThinking: true }];
+        addChatMessage(allMessages);
+        return allMessages;
+      });
+    } else if (data === '' && duration !== undefined) {
+      setIsThinking(false);
+      setMessages((prevMessages) => {
+        const lastMsg = prevMessages[prevMessages.length - 1];
+        if (lastMsg.type === 'userMessage') return prevMessages;
+        const allMessages = [...prevMessages.slice(0, -1), { ...lastMsg, thinkingDuration: duration, isThinking: false }];
+        addChatMessage(allMessages);
+        return allMessages;
+      });
+    }
+  };
+
+  const finalizeThinking = () => {
+    if (isThinking()) {
+      setIsThinking(false);
+      setMessages((prevMessages) => {
+        const lastMsg = prevMessages[prevMessages.length - 1];
+        if (lastMsg.type === 'userMessage') return prevMessages;
+        const allMessages = [...prevMessages.slice(0, -1), { ...lastMsg, isThinking: false }];
+        addChatMessage(allMessages);
+        return allMessages;
+      });
+    }
+  };
+
   const clearPreviews = () => {
     // Revoke the data uris to avoid memory leaks
     previews().forEach((file) => URL.revokeObjectURL(file.preview));
@@ -919,6 +958,9 @@ export const Bot = (botProps: BotProps & { class?: string }) => {
           case 'agentReasoning':
             updateLastMessageAgentReasoning(payload.data);
             break;
+          case 'thinking':
+            handleThinkingEvent(payload.data, payload.duration);
+            break;
           case 'agentFlowEvent':
             updateAgentFlowEvent(payload.data);
             break;
@@ -942,6 +984,7 @@ export const Bot = (botProps: BotProps & { class?: string }) => {
             closeResponse();
             break;
           case 'end':
+            finalizeThinking();
             setLocalStorageChatflow(chatflowid, chatId);
             closeResponse();
             break;
@@ -1194,6 +1237,8 @@ export const Bot = (botProps: BotProps & { class?: string }) => {
             agentFlowExecutedData: data?.agentFlowExecutedData,
             action: data?.action,
             artifacts: data?.artifacts,
+            thinking: data?.reasonContent?.thinking,
+            thinkingDuration: data?.reasonContent?.thinkingDuration,
             type: 'apiMessage' as messageType,
             feedback: null,
             dateTime: new Date().toISOString(),
@@ -1315,6 +1360,7 @@ export const Bot = (botProps: BotProps & { class?: string }) => {
         messages.push({ message: '', type: 'leadCaptureMessage' });
       }
       setMessages(messages);
+      setShowScrollButton(false);
     } catch (error: any) {
       const errorData = error.response.data || `${error.response.status}: ${error.response.statusText}`;
       console.error(`error: ${errorData}`);
@@ -1398,6 +1444,12 @@ export const Bot = (botProps: BotProps & { class?: string }) => {
               if (message.fileAnnotations) chatHistory.fileAnnotations = message.fileAnnotations;
               if (message.fileUploads) chatHistory.fileUploads = message.fileUploads;
               if (message.agentReasoning) chatHistory.agentReasoning = message.agentReasoning;
+              if ((message as any).reasonContent && typeof (message as any).reasonContent === 'object') {
+                chatHistory.thinking = (message as any).reasonContent.thinking;
+                chatHistory.thinkingDuration = (message as any).reasonContent.thinkingDuration;
+              }
+              if (message.thinking) chatHistory.thinking = message.thinking;
+              if (message.thinkingDuration !== undefined) chatHistory.thinkingDuration = message.thinkingDuration;
               if (message.action) chatHistory.action = message.action;
               if (message.artifacts) chatHistory.artifacts = message.artifacts;
               if (message.followUpPrompts) chatHistory.followUpPrompts = message.followUpPrompts;

dist/components/bubbles/ThinkingBubble.d.ts

@@ -12,6 +12,7 @@ import { TickIcon, XIcon } from '../icons';
 import { SourceBubble } from '../bubbles/SourceBubble';
 import { DateTimeToggleTheme } from '@/features/bubble/types';
 import { WorkflowTreeView } from '../treeview/WorkflowTreeView';
+import { ThinkingCard } from './ThinkingBubble';
 
 type Props = {
   message: MessageType;
@@ -455,6 +456,17 @@ export const BotBubble = (props: Props) => {
               </For>
             </div>
           )}
+          {props.message.thinking && (
+            <div class="ml-2 mb-1 max-w-full">
+              <ThinkingCard
+                thinking={props.message.thinking}
+                thinkingDuration={props.message.thinkingDuration}
+                isThinking={props.message.isThinking}
+                backgroundColor={props.backgroundColor ?? defaultBackgroundColor}
+                textColor={props.textColor ?? defaultTextColor}
+              />
+            </div>
+          )}
           {props.message.message && (
             <span
               ref={setBotMessageRef}