feat: Add regenrate response functionality

dist/components/bubbles/BotBubble.d.ts

@@ -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/buttons/RegenerateResponseButton.d.ts

@@ -0,0 +1,10 @@
+import { JSX } from 'solid-js';
+type RegenerateResponseButtonProps = {
+    feedbackColor?: string;
+    isDisabled?: boolean;
+    isLoading?: boolean;
+    disableIcon?: boolean;
+} & JSX.ButtonHTMLAttributes<HTMLButtonElement>;
+export declare const RegenerateResponseButton: (props: RegenerateResponseButtonProps) => JSX.Element;
+export {};
+//# sourceMappingURL=RegenerateResponseButton.d.ts.map

src/assets/index.css

@@ -272,6 +272,11 @@ textarea {
   stroke: var(--chatbot-button-color);
 }
 
+.regenerate-response-button > .icon-tabler-refresh {
+  width: 16px;
+  height: 16px;
+}
+
 .chatbot-chat-view {
   max-width: 800px;
 }

src/components/Bot.tsx

@@ -881,6 +881,28 @@ export const Bot = (botProps: BotProps & { class?: string }) => {
     handleSubmit(prompt);
   };
 
+  const handleRegenerateResponse = async (messageIndex: number) => {
+    if (loading()) return;
+    if (previews().length) return;
+    if (startInputType() === 'formInput') return;
+
+    const currentMessages = messages();
+    const targetMessage = currentMessages[messageIndex];
+    if (!targetMessage || targetMessage.type !== 'apiMessage') return;
+
+    const previousMessage = currentMessages[messageIndex - 1];
+    if (!previousMessage || previousMessage.type !== 'userMessage' || previousMessage.fileUploads?.length) return;
+
+    setFollowUpPrompts([]);
+    const updatedMessages = currentMessages.slice(0, messageIndex);
+    addChatMessage(updatedMessages);
+    setMessages(updatedMessages);
+
+    // Note: chatId is kept so the server retains conversation context up to this point.
+    // The server's history will still include messages that were removed client-side
+    await handleSubmit(previousMessage.message, undefined, undefined, { skipAddUserMessage: true });
+  };
+
   const updateMetadata = (data: any, input: string) => {
     if (data.chatId) {
       setChatId(data.chatId);
@@ -1166,7 +1188,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)) {
@@ -1203,11 +1230,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,
@@ -2603,6 +2632,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}

src/components/bubbles/BotBubble.tsx

@@ -5,6 +5,7 @@ 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 { RegenerateResponseButton } from '../buttons/RegenerateResponseButton';
 import { TTSButton } from '../buttons/TTSButton';
 import FeedbackContentDialog from '../FeedbackContentDialog';
 import { AgentReasoningBubble } from './AgentReasoningBubble';
@@ -35,6 +36,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>;
@@ -581,6 +583,7 @@ export const BotBubble = (props: Props) => {
           </Show>
           {props.chatFeedbackStatus && props.message.messageId && (
             <>
+              <RegenerateResponseButton class="regenerate-response-button" feedbackColor={props.feedbackColor} onClick={() => props.onRegenerateResponse?.()} />
               <CopyToClipboardButton feedbackColor={props.feedbackColor} onClick={() => copyMessageToClipboard()} />
               <Show when={copiedMessage()}>
                 <div class="copied-message" style={{ color: props.feedbackColor ?? defaultFeedbackColor }}>

src/components/buttons/RegenerateResponseButton.tsx

@@ -0,0 +1,32 @@
+import { JSX, Show } from 'solid-js';
+import { Spinner } from './SendButton';
+import { DeleteIcon as RefreshIcon } from '../icons';
+
+type RegenerateResponseButtonProps = {
+  feedbackColor?: string;
+  isDisabled?: boolean;
+  isLoading?: boolean;
+  disableIcon?: boolean;
+} & JSX.ButtonHTMLAttributes<HTMLButtonElement>;
+
+const defaultFeedbackColor = '#3B81F6';
+
+export const RegenerateResponseButton = (props: RegenerateResponseButtonProps) => {
+  return (
+    <button
+      type="button"
+      disabled={props.isDisabled || props.isLoading}
+      {...props}
+      class={
+        'p-2 justify-center font-semibold text-white focus:outline-none 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>
+  );
+};