feat: Add feedback comment to message buttons

Chainlit · Aug 28, 2023 · 7c9990c · 7c9990c
1 parent 89b5c41
commit 7c9990c
Showing 1 changed file with 11 additions and 2 deletions.
diff --git a/src/chainlit/frontend/src/components/organisms/chat/message/feedbackButtons.tsx b/src/chainlit/frontend/src/components/organisms/chat/message/feedbackButtons.tsx
@@ -4,6 +4,7 @@ import toast from 'react-hot-toast';
 import { useRecoilValue } from 'recoil';
 import { useToggle } from 'usehooks-ts';
 
+import { StickyNote2 } from '@mui/icons-material';
 import ThumbDownAlt from '@mui/icons-material/ThumbDownAlt';
 import ThumbDownAltOutlined from '@mui/icons-material/ThumbDownAltOutlined';
 import ThumbUpAlt from '@mui/icons-material/ThumbUpAlt';
@@ -30,7 +31,9 @@ export default function FeedbackButtons({ message }: Props) {
   const accessToken = useRecoilValue(accessTokenState);
   const messages = useRecoilValue(messagesState);
 
-  const [commentInput, setCommentInput] = useState('');
+  const [commentInput, setCommentInput] = useState(
+    message.humanFeedbackComment || ''
+  );
   const [feedback, setFeedback] = useState(
     message.humanFeedback || FeedbackStatus.DEFAULT
   );
@@ -60,7 +63,6 @@ export default function FeedbackButtons({ message }: Props) {
       }
 
       onSuccess && onSuccess();
-      setCommentInput('');
     } catch (err) {
       console.log(err);
     }
@@ -143,6 +145,13 @@ export default function FeedbackButtons({ message }: Props) {
           <UpIcon sx={{ width: size, height: size }} />
         </IconButton>
       </Tooltip>
+      {commentInput && commentInput !== '' ? (
+        <Tooltip title="Feedback comment">
+          <IconButton onClick={toggleFeedbackDialog} size="small">
+            <StickyNote2 sx={{ width: size, height: size }} />
+          </IconButton>
+        </Tooltip>
+      ) : null}
       {renderDialog()}
     </Stack>
   );