feat: add plain regenerate response action

add a regenerate control to feedback actions andrerun the latest prompt without duplicating the user message - coupled with chatflow config

Author: chloebyun-wd

dist/components/Bot.d.ts.map

@@ -21,6 +21,7 @@ type Props = {
     renderHTML?: boolean;
     handleActionClick: (elem: any, action: IAction | undefined | null) => void;
     handleSourceDocumentsClick: (src: any) => void;
+    onRegenerateResponse?: () => void;
     isTTSEnabled?: boolean;
     isTTSLoading?: Record<string, boolean>;
     isTTSPlaying?: Record<string, boolean>;

dist/components/bubbles/BotBubble.d.ts

@@ -9,5 +9,6 @@ type RatingButtonProps = {
 export declare const CopyToClipboardButton: (props: RatingButtonProps) => JSX.Element;
 export declare const ThumbsUpButton: (props: RatingButtonProps) => JSX.Element;
 export declare const ThumbsDownButton: (props: RatingButtonProps) => JSX.Element;
+export declare const RegenerateResponseButton: (props: RatingButtonProps) => JSX.Element;
 export {};
 //# sourceMappingURL=FeedbackButtons.d.ts.map

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

@@ -865,6 +865,29 @@ export const Bot = (botProps: BotProps & { class?: string }) => {
     handleSubmit(prompt);
   };
 
+  const handleRegenerateResponse = async (messageIndex: number) => {
+    if (loading()) return;
+
+    const currentMessages = messages();
+    const targetMessage = currentMessages[messageIndex];
+    if (!targetMessage || targetMessage.type !== 'apiMessage') return;
+    const lastApiMessageIndex = currentMessages.map((message) => message.type).lastIndexOf('apiMessage');
+    // Regenerate should only replace the latest assistant response (including starter prompt responses).
+    if (messageIndex !== lastApiMessageIndex) return;
+
+    const previousMessage = currentMessages[messageIndex - 1];
+    if (!previousMessage || previousMessage.type !== 'userMessage' || previousMessage.fileUploads?.length) return;
+
+    setFollowUpPrompts([]);
+    setMessages((prevMessages) => {
+      const updatedMessages = prevMessages.slice(0, messageIndex);
+      addChatMessage(updatedMessages);
+      return updatedMessages;
+    });
+
+    await handleSubmit(previousMessage.message, undefined, undefined, { skipAddUserMessage: true });
+  };
+
   const updateMetadata = (data: any, input: string) => {
     if (data.chatId) {
       setChatId(data.chatId);
@@ -1141,7 +1164,12 @@ export const Bot = (botProps: BotProps & { class?: string }) => {
   };
 
   // Handle form submission
-  const handleSubmit = async (value: string | object, action?: IAction | undefined | null, humanInput?: any) => {
+  const handleSubmit = async (
+    value: string | object,
+    action?: IAction | undefined | null,
+    humanInput?: any,
+    options?: { skipAddUserMessage?: boolean },
+  ) => {
     if (typeof value === 'string' && value.trim() === '') {
       const containsFile = previews().filter((item) => !item.mime.startsWith('image') && item.type !== 'audio').length > 0;
       if (!previews().length || (previews().length && containsFile)) {
@@ -1178,11 +1206,13 @@ export const Bot = (botProps: BotProps & { class?: string }) => {
 
     clearPreviews();
 
-    setMessages((prevMessages) => {
-      const messages: MessageType[] = [...prevMessages, { message: value as string, type: 'userMessage', fileUploads: uploads }];
-      addChatMessage(messages);
-      return messages;
-    });
+    if (!options?.skipAddUserMessage) {
+      setMessages((prevMessages) => {
+        const messages: MessageType[] = [...prevMessages, { message: value as string, type: 'userMessage', fileUploads: uploads }];
+        addChatMessage(messages);
+        return messages;
+      });
+    }
 
     const body: IncomingInput = {
       question: value,
@@ -2581,6 +2611,7 @@ export const Bot = (botProps: BotProps & { class?: string }) => {
                           showAvatar={props.botMessage?.showAvatar}
                           avatarSrc={props.botMessage?.avatarSrc}
                           chatFeedbackStatus={chatFeedbackStatus()}
+                          onRegenerateResponse={() => handleRegenerateResponse(index())}
                           fontSize={props.fontSize}
                           isLoading={loading() && index() === messages().length - 1}
                           showAgentMessages={props.showAgentMessages}

dist/components/buttons/FeedbackButtons.d.ts

@@ -4,7 +4,7 @@ import { Marked } from '@ts-stack/markdown';
 import DOMPurify from 'dompurify';
 import { FeedbackRatingType, sendFeedbackQuery, sendFileDownloadQuery, updateFeedbackQuery } from '@/queries/sendMessageQuery';
 import { FileUpload, IAction, MessageType } from '../Bot';
-import { CopyToClipboardButton, ThumbsDownButton, ThumbsUpButton } from '../buttons/FeedbackButtons';
+import { CopyToClipboardButton, RegenerateResponseButton, ThumbsDownButton, ThumbsUpButton } from '../buttons/FeedbackButtons';
 import { TTSButton } from '../buttons/TTSButton';
 import FeedbackContentDialog from '../FeedbackContentDialog';
 import { AgentReasoningBubble } from './AgentReasoningBubble';
@@ -35,6 +35,7 @@ type Props = {
   renderHTML?: boolean;
   handleActionClick: (elem: any, action: IAction | undefined | null) => void;
   handleSourceDocumentsClick: (src: any) => void;
+  onRegenerateResponse?: () => void;
   // TTS props
   isTTSEnabled?: boolean;
   isTTSLoading?: Record<string, boolean>;
@@ -577,6 +578,7 @@ export const BotBubble = (props: Props) => {
           </Show>
           {props.chatFeedbackStatus && props.message.messageId && (
             <>
+              <RegenerateResponseButton feedbackColor={props.feedbackColor} onClick={() => props.onRegenerateResponse?.()} />
               <CopyToClipboardButton feedbackColor={props.feedbackColor} onClick={() => copyMessageToClipboard()} />
               <Show when={copiedMessage()}>
                 <div class="copied-message" style={{ color: props.feedbackColor ?? defaultFeedbackColor }}>

dist/components/buttons/FeedbackButtons.d.ts.map

@@ -1,6 +1,6 @@
 import { JSX, Show } from 'solid-js';
 import { Spinner } from './SendButton';
-import { ClipboardIcon, ThumbsDownIcon, ThumbsUpIcon } from '../icons';
+import { ClipboardIcon, DeleteIcon as RefreshIcon, ThumbsDownIcon, ThumbsUpIcon } from '../icons';
 
 type RatingButtonProps = {
   feedbackColor?: string;
@@ -70,3 +70,23 @@ export const ThumbsDownButton = (props: RatingButtonProps) => {
     </button>
   );
 };
+
+export const RegenerateResponseButton = (props: RatingButtonProps) => {
+  return (
+    <button
+      type="button"
+      disabled={props.isDisabled || props.isLoading}
+      {...props}
+      class={
+        'w-4 h-4 p-0 justify-center font-semibold text-white focus:outline-none inline-flex items-center disabled:opacity-50 disabled:cursor-not-allowed disabled:brightness-100 transition-all filter hover:brightness-90 active:brightness-75 chatbot-button ' +
+        props.class
+      }
+      style={{ background: 'transparent', border: 'none' }}
+      title="Regenerate response"
+    >
+      <Show when={!props.isLoading} fallback={<Spinner class="text-white" />}>
+        <RefreshIcon color={props.feedbackColor ?? defaultFeedbackColor} class={'send-icon flex ' + (props.disableIcon ? 'hidden' : '')} />
+      </Show>
+    </button>
+  );
+};