From 529a30a899063cb2c740f62a32f45946ff06fa38 Mon Sep 17 00:00:00 2001
From: Willy Douhard <willy.douhard@gmail.com>
Date: Sat, 11 Nov 2023 19:14:44 +0100
Subject: [PATCH] send final streamed mesage (#533)

* send final streamed mesage

* disable feedback buttons while streaming

* fix disabled human feedback while streaming

* bump version

* update changelog
---
 CHANGELOG.md                                  |  2 +
 backend/chainlit/langchain/callbacks.py       |  6 ++
 backend/chainlit/message.py                   |  7 +-
 backend/pyproject.toml                        |  2 +-
 .../messages/components/FeedbackButtons.tsx   | 70 +++++++++++--------
 5 files changed, 53 insertions(+), 34 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f2a9f6c0b3..4bd71b9226 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -13,6 +13,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 ### Fixed
 
 - Now properly displaying empty messages with inlined elements
+- Too many values to unpack error in langchain callback
+- Final streamed answer is not annotable with human feedback
 
 ## [0.7.600rc0] - 2023-11-08
 
diff --git a/backend/chainlit/langchain/callbacks.py b/backend/chainlit/langchain/callbacks.py
index 984471ebae..bb9fc29b9a 100644
--- a/backend/chainlit/langchain/callbacks.py
+++ b/backend/chainlit/langchain/callbacks.py
@@ -602,6 +602,12 @@ def _on_run_update(self, run: Run) -> None:
                 msg.language = language
                 msg.prompt = current_prompt
                 self._run_sync(msg.update())
+
+            if self.final_stream and self.has_streamed_final_answer:
+                self.final_stream.content = completion
+                self.final_stream.language = language
+                self.final_stream.prompt = current_prompt
+                self._run_sync(self.final_stream.send())
             return
 
         outputs = run.outputs or {}
diff --git a/backend/chainlit/message.py b/backend/chainlit/message.py
index f8e7c39fdf..4dcade7152 100644
--- a/backend/chainlit/message.py
+++ b/backend/chainlit/message.py
@@ -79,7 +79,8 @@ async def update(
         Update a message already sent to the UI.
         """
         trace_event("update_message")
-
+        if self.streaming:
+            self.streaming = False
         msg_dict = self.to_dict()
         asyncio.create_task(self._persist_update(msg_dict))
         await context.emitter.update_message(msg_dict)
@@ -129,11 +130,11 @@ async def send(self):
         if config.code.author_rename:
             self.author = await config.code.author_rename(self.author)
 
-        msg_dict = await self._create()
-
         if self.streaming:
             self.streaming = False
 
+        msg_dict = await self._create()
+
         await context.emitter.send_message(msg_dict)
 
         return self.id
diff --git a/backend/pyproject.toml b/backend/pyproject.toml
index 8c36c0dc28..12937ec2ac 100644
--- a/backend/pyproject.toml
+++ b/backend/pyproject.toml
@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "chainlit"
-version = "0.7.601rc0"
+version = "0.7.602rc0"
 keywords = ['LLM', 'Agents', 'gen ai', 'chat ui', 'chatbot ui', 'langchain']
 description = "A faster way to build chatbot UIs."
 authors = ["Chainlit"]
diff --git a/libs/components/src/messages/components/FeedbackButtons.tsx b/libs/components/src/messages/components/FeedbackButtons.tsx
index 5e2463ee93..4aa5e59e7e 100644
--- a/libs/components/src/messages/components/FeedbackButtons.tsx
+++ b/libs/components/src/messages/components/FeedbackButtons.tsx
@@ -29,7 +29,6 @@ interface Props {
 
 const FeedbackButtons = ({ message }: Props) => {
   const { onFeedbackUpdated } = useContext(MessageContext);
-
   const [showFeedbackDialog, setShowFeedbackDialog] = useState<number>();
   const [commentInput, setCommentInput] = useState<string>();
 
@@ -69,6 +68,8 @@ const FeedbackButtons = ({ message }: Props) => {
     }
   };
 
+  const disabled = !!message.streaming;
+
   const buttons = useMemo(() => {
     const iconSx = {
       width: ICON_SIZE,
@@ -82,28 +83,34 @@ const FeedbackButtons = ({ message }: Props) => {
     const baseButtons = [
       () => (
         <Tooltip title="Negative feedback">
-          <Button
-            className={`negative-feedback-${feedback === -1 ? 'on' : 'off'}`}
-            onClick={() => {
-              handleFeedbackClick(-1);
-            }}
-            size="small"
-          >
-            <DownIcon sx={iconSx} />
-          </Button>
+          <span>
+            <Button
+              disabled={disabled}
+              className={`negative-feedback-${feedback === -1 ? 'on' : 'off'}`}
+              onClick={() => {
+                handleFeedbackClick(-1);
+              }}
+              size="small"
+            >
+              <DownIcon sx={iconSx} />
+            </Button>
+          </span>
         </Tooltip>
       ),
       () => (
         <Tooltip title="Positive feedback">
-          <Button
-            className={`positive-feedback-${feedback === 1 ? 'on' : 'off'}`}
-            onClick={() => {
-              handleFeedbackClick(1);
-            }}
-            size="small"
-          >
-            <UpIcon sx={iconSx} />
-          </Button>
+          <span>
+            <Button
+              disabled={disabled}
+              className={`positive-feedback-${feedback === 1 ? 'on' : 'off'}`}
+              onClick={() => {
+                handleFeedbackClick(1);
+              }}
+              size="small"
+            >
+              <UpIcon sx={iconSx} />
+            </Button>
+          </span>
         </Tooltip>
       )
     ];
@@ -111,22 +118,25 @@ const FeedbackButtons = ({ message }: Props) => {
     if (comment) {
       baseButtons.push(() => (
         <Tooltip title="Feedback comment">
-          <Button
-            onClick={() => {
-              setShowFeedbackDialog(feedback);
-              setCommentInput(comment);
-            }}
-            className="feedback-comment-edit"
-            size="small"
-          >
-            <StickyNote2Outlined sx={iconSx} />
-          </Button>
+          <span>
+            <Button
+              disabled={disabled}
+              onClick={() => {
+                setShowFeedbackDialog(feedback);
+                setCommentInput(comment);
+              }}
+              className="feedback-comment-edit"
+              size="small"
+            >
+              <StickyNote2Outlined sx={iconSx} />
+            </Button>
+          </span>
         </Tooltip>
       ));
     }
 
     return baseButtons;
-  }, [feedback, comment]);
+  }, [feedback, comment, disabled]);
 
   return (
     <>