Merge pull request #9854 from weseek/imprv/164698-display-behavior-of-accept-and-discard-buttons

imprv: Display behavior of accept and discard buttons

apps/app/src/features/openai/client/components/AiAssistant/AiAssistantSidebar/AiAssistantSidebar.tsx

@@ -114,6 +114,26 @@ const AiAssistantSidebarSubstance: React.FC<AiAssistantSidebarSubstanceProps> =
     }
   }, [mutateMessageData, threadData]);
 
+  const isActionButtonShown = useCallback((messageId: string) => {
+    if (!isEditorAssistant) {
+      return false;
+    }
+
+    if (generatingAnswerMessage != null) {
+      return false;
+    }
+
+    const latestAssistantMessageLogId = messageLogs
+      .filter(message => !message.isUserMessage)
+      .slice(-1)[0];
+
+    if (messageId === latestAssistantMessageLogId?.id) {
+      return true;
+    }
+
+    return false;
+  }, [generatingAnswerMessage, isEditorAssistant, messageLogs]);
+
   const headerIcon = useMemo(() => {
     return isEditorAssistant
       ? <span className="material-symbols-outlined growi-ai-chat-icon me-3 fs-4">support_agent</span>
@@ -349,7 +369,7 @@ const AiAssistantSidebarSubstance: React.FC<AiAssistantSidebarSubstanceProps> =
                   <MessageCard
                     key={message.id}
                     role={message.isUserMessage ? 'user' : 'assistant'}
-                    showActionButtons={isEditorAssistant}
+                    showActionButtons={isActionButtonShown(message.id)}
                     onAccept={clickAcceptHandler}
                     onDiscard={clickDiscardHandler}
                   >

apps/app/src/features/openai/client/components/AiAssistant/AiAssistantSidebar/MessageCard.tsx

@@ -1,4 +1,4 @@
-import { useCallback, type JSX } from 'react';
+import { useCallback, useState, type JSX } from 'react';
 
 import type { LinkProps } from 'next/link';
 import { useTranslation } from 'react-i18next';
@@ -50,6 +50,18 @@ const AssistantMessageCard = ({
 }): JSX.Element => {
   const { t } = useTranslation();
 
+  const [isActionButtonClicked, setIsActionButtonClicked] = useState(false);
+
+  const clickActionButtonHandler = useCallback((action: 'accept' | 'discard') => {
+    setIsActionButtonClicked(true);
+    if (action === 'accept') {
+      onAccept?.();
+      return;
+    }
+
+    onDiscard?.();
+  }, [onAccept, onDiscard]);
+
   return (
     <div className={`card border-0 ${moduleClass} ${assistantMessageCardModuleClass}`}>
       <div className="card-body d-flex">
@@ -62,19 +74,19 @@ const AssistantMessageCard = ({
               <>
                 <ReactMarkdown components={{ a: NextLinkWrapper }}>{children}</ReactMarkdown>
 
-                {showActionButtons && (
+                {showActionButtons && !isActionButtonClicked && (
                   <div className="d-flex mt-2 justify-content-start">
                     <button
                       type="button"
                       className="btn btn-outline-secondary me-2"
-                      onClick={onDiscard}
+                      onClick={() => clickActionButtonHandler('discard')}
                     >
                       {t('sidebar_ai_assistant.discard')}
                     </button>
                     <button
                       type="button"
                       className="btn btn-outline-success"
-                      onClick={onAccept}
+                      onClick={() => clickActionButtonHandler('accept')}
                     >
                       {t('sidebar_ai_assistant.accept')}
                     </button>