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

@@ -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 (
  <>