fix(feedback): form closing bug

i-am-bee · Oct 29, 2024 · 2f4dfde · 2f4dfde
1 parent a8db861
commit 2f4dfde
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 13 deletions.
diff --git a/src/modules/chat/message/ActionBar.module.scss b/src/modules/chat/message/ActionBar.module.scss
@@ -26,10 +26,6 @@
   transform: translateY(-50%);
 }
 
-:where(.root) {
-  opacity: 0;
-}
-
 :where(.btnWrapper) {
   :global(.#{$prefix}--btn--ghost) {
     border-color: $border-subtle-00;

diff --git a/src/modules/chat/message/ActionBar.tsx b/src/modules/chat/message/ActionBar.tsx
@@ -19,7 +19,7 @@ import { CopyButton, IconButton, InlineLoading } from '@carbon/react';
 import { Reset } from '@carbon/react/icons';
 import clsx from 'clsx';
 import { AnimatePresence, motion } from 'framer-motion';
-import { useEffect, useId } from 'react';
+import { useId } from 'react';
 import { useRetry } from '../hooks/useRetry';
 import { useChat } from '../providers/ChatProvider';
 import { useMessageFeedback } from '../providers/MessageFeedbackProvider';
@@ -39,17 +39,11 @@ export function ActionBar({ message, visible, isPast, className }: Props) {
   const { pending, retry, isDeleting } = useRetry(message);
   const { assistant } = useChat();
 
-  const { closeForm } = useMessageFeedback();
-
-  useEffect(() => {
-    if (!visible) {
-      closeForm();
-    }
-  }, [visible, closeForm]);
+  const { formOpen } = useMessageFeedback();
 
   return (
     <AnimatePresence>
-      {visible && (
+      {(visible || formOpen) && (
         <motion.aside
           {...fadeProps()}
           key={`${id}:root`}

diff --git a/src/modules/chat/message/Message.tsx b/src/modules/chat/message/Message.tsx
@@ -89,6 +89,9 @@ export const Message = memo(function Message({
         className={clsx(classes.root, { [classes.hovered]: showActions })}
         {...focusWithinProps}
         {...contentHover.hoverProps}
+        onBlur={() => {
+          setFocusWithin(false);
+        }}
       >
         <Container size="sm" className={classes.container}>
           <div

diff --git a/src/modules/chat/message/feedback/MessageFeedbackForm.tsx b/src/modules/chat/message/feedback/MessageFeedbackForm.tsx
@@ -77,6 +77,7 @@ export function MessageFeedbackForm() {
                 controllerProps={{
                   control: form.control,
                   name: 'categories',
+                  disabled: isSubmitting,
                 }}
               >
                 {label}
@@ -91,6 +92,7 @@ export function MessageFeedbackForm() {
           labelText="Comments (optional)"
           placeholder="Add more details on what went wrong and how the answer could be improved"
           rows={4}
+          autoFocus
           {...form.register('comment', {
             maxLength: {
               value: COMMENT_MAX_LENGTH,
@@ -129,6 +131,7 @@ function Item({
   const { field } = useController({
     control: controllerProps.control,
     name: controllerProps.name,
+    disabled: controllerProps.disabled,
   });
 
   const prevValue = useMemo(() => field.value || [], [field.value]);
@@ -157,6 +160,7 @@ function Item({
 
           handleChange(value, !isSelected);
         }}
+        disabled={controllerProps.disabled}
       >
         {children}
       </Tag>