fix: disable send button for AI readonly mode (#1954)

* fix: disable send button for AI readonly mode * chore: changeset * chore: readOnly chat
commercetools · Mar 25, 2024 · b661c74 · b661c74
1 parent bb025af
commit b661c74
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 6 deletions.
diff --git a/.changeset/funny-beers-reflect.md b/.changeset/funny-beers-reflect.md
@@ -0,0 +1,5 @@
+---
+'@commercetools-docs/gatsby-theme-docs': patch
+---
+
+Adjust readonly mode for AI assistant. It will hide the send button and enable the restart conversation button
diff --git a/packages/gatsby-theme-docs/src/modules/ai-assistant/components/chat-modal.jsx b/packages/gatsby-theme-docs/src/modules/ai-assistant/components/chat-modal.jsx
@@ -454,9 +454,11 @@ const ChatModal = () => {
   };
 
   useEffect(() => {
-    if (replayMessage) {
+    if (replayMessage && currentChatMode !== DEV_TOOLING_MODE) {
       // if the chat mode changes and there is at least one message sent from
-      // the user, we switch mode and re-submit this latest message
+      // the user, we switch mode and re-submit this latest message.
+      // We don't want to replay the last message if the user is entering dev-tooling mode
+      // as free text input is going to be blocked.
       submitChatMessages([replayMessage], formik.values);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -492,7 +494,7 @@ const ChatModal = () => {
         setReplayMessage();
         formik.resetForm();
       }}
-      displayPrimaryButton={!!chatConfig?.readOnly}
+      displayPrimaryButton={false}
       isPrimaryButtonDisabled={
         !(formik.isValid && formik.dirty) || formik.isSubmitting
       }
@@ -538,9 +540,10 @@ const ChatModal = () => {
               />
             </ChatMessagesWrapper>
 
-            {!chatConfig?.readOnly && !chatLocked && (
+            {!chatLocked && (
               <ChatInputBox>
-                <InputTextWrapper>
+
+                {!chatConfig?.readOnly && <InputTextWrapper>
                   <MultilineTextField
                     data-testid="chat-input-field"
                     key="chatInput"
@@ -577,7 +580,7 @@ const ChatModal = () => {
                       }
                     />
                   </SubmitButtonBox>
-                </InputTextWrapper>
+                </InputTextWrapper>}
                 <RestartButtonBox>
                   <FlatButton
                     label="Tip: Restart the conversation when changing the topic"