send final streamed mesage (#533)

* send final streamed mesage

* disable feedback buttons while streaming

* fix disabled human feedback while streaming

* bump version

* update changelog

Author: willydouhard

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
 

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 {}

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

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"]

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,51 +83,60 @@ 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>
       )
     ];
 
     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 (
     <>