support lcel (#508)

* support lcel

* fix mypy

backend/chainlit/message.py

@@ -189,20 +189,24 @@ def __init__(
  elements: Optional[List[ElementBased]] = None,
  disable_human_feedback: Optional[bool] = False,
  author_is_user: Optional[bool] = False,
+ id: Optional[uuid.UUID] = None,
  ):
  self.language = language
 
  if isinstance(content, dict):
- self.content = json.dumps(content, indent=4)
- self.language = "json"
+ try:
+ self.content = json.dumps(content, indent=4)
+ self.language = "json"
+ except TypeError:
+ self.content = str(content)
  elif isinstance(content, str):
  self.content = content
  else:
- logger.warn(
- f"Unsupported type {type(content)} for message content. Attempting to stringify it"
- )
  self.content = str(content)
 
+ if id:
+ self.id = str(id)
+
  self.author = author
  self.author_is_user = author_is_user
  self.prompt = prompt

frontend/src/components/organisms/chat/Messages/index.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {
  useChatData,
  useChatInteract,

libs/components/src/ClipboardCopy.tsx

@@ -37,8 +37,8 @@ const ClipboardCopy = ({ value, theme }: ClipboardCopyProps): JSX.Element => {
  sx={{
  color: getColor(),
  position: 'absolute',
- right: 4,
- top: 4
+ right: 0,
+ top: 0
  }}
  onClick={() => {
  copy(value)

libs/components/src/Code.tsx

@@ -71,7 +71,13 @@ const Code = ({ inline, children, ...props }: CodeProps) => {
  };
 
  return (
- <code style={{ position: 'relative' }}>
+ <Box
+ sx={{
+ display: inline ? 'inline' : 'block',
+ position: 'relative',
+ maxWidth: '90%'
+ }}
+ >
  {!inline ? (
  <ClipboardCopy
  value={children[0] as string}
@@ -80,7 +86,7 @@ const Code = ({ inline, children, ...props }: CodeProps) => {
  />
  ) : null}
  {renderCode()}
- </code>
+ </Box>
  );
 };
 

libs/components/src/messages/components/MessageContent.tsx

@@ -30,8 +30,10 @@ const COLLAPSE_MIN_LENGTH = 3000; // Set this to the maximum number of character
 const MessageContent = memo(
  ({ message, elements, preserveSize }: IMessageContent) => {
  const { preparedContent, inlinedElements, refElements } = prepareContent({
- message,
- elements
+ elements,
+ id: message.id,
+ content: message.content,
+ language: message.language
  });
 
  if (!preparedContent) return null;

libs/components/utils/message.ts

@@ -1,7 +1,7 @@
 import isEqual from 'lodash/isEqual';
 
 import { IMessageElement } from 'src/types/element';
-import { IMessage, IMessageContent } from 'src/types/message';
+import { IMessage } from 'src/types/message';
 
 const nestMessages = (messages: IMessage[]): IMessage[] => {
  let nestedMessages: IMessage[] = [];
@@ -49,7 +49,17 @@ const escapeRegExp = (string: string) => {
  return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
 };
 
-const prepareContent = ({ elements, message }: IMessageContent) => {
+const prepareContent = ({
+ elements,
+ content,
+ id,
+ language
+}: {
+ elements: IMessageElement[];
+ content?: string;
+ id: string;
+ language?: string;
+}) => {
  const elementNames = elements.map((e) => escapeRegExp(e.name));
 
  // Sort by descending length to avoid matching substrings
@@ -59,9 +69,9 @@ const prepareContent = ({ elements, message }: IMessageContent) => {
  ? new RegExp(`(${elementNames.join('|')})`, 'g')
  : undefined;
 
- let preparedContent = message.content ? message.content.trim() : '';
+ let preparedContent = content ? content.trim() : '';
  const inlinedElements = elements.filter(
- (e) => isForIdMatch(message.id, e?.forIds) && e.display === 'inline'
+ (e) => isForIdMatch(id, e?.forIds) && e.display === 'inline'
  );
  const refElements: IMessageElement[] = [];
 
@@ -70,7 +80,7 @@ const prepareContent = ({ elements, message }: IMessageContent) => {
  const element = elements.find((e) => {
  const nameMatch = e.name === match;
  const scopeMatch =
- isGlobalMatch(e?.forIds) || isForIdMatch(message.id, e?.forIds);
+ isGlobalMatch(e?.forIds) || isForIdMatch(id, e?.forIds);
  return nameMatch && scopeMatch;
  });
  const foundElement = !!element;
@@ -94,8 +104,8 @@ const prepareContent = ({ elements, message }: IMessageContent) => {
  });
  }
 
- if (message.language) {
- preparedContent = `\`\`\`${message.language}\n${preparedContent}\n\`\`\``;
+ if (language) {
+ preparedContent = `\`\`\`${language}\n${preparedContent}\n\`\`\``;
  }
  return {
  preparedContent,
@@ -204,7 +214,7 @@ const updateMessageById = (
  const msg = nextMessages[index];
 
  if (isEqual(msg.id, messageId)) {
- nextMessages[index] = { ...updatedMessage };
+ nextMessages[index] = { subMessages: msg.subMessages, ...updatedMessage };
  } else if (hasMessageById(nextMessages, messageId) && msg.subMessages) {
  msg.subMessages = updateMessageById(
  msg.subMessages,