Release/1.1.300 (#1040)

* enhance conversation spacing and make copilot expandable

* fix non ascii characters for chat profiles

CHANGELOG.md

@@ -8,6 +8,17 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 Nothing unreleased!
 
+## [1.1.300rc2] - 2024-05-28
+
+### Added
+
+- Expand copilot button
+
+### Fix
+
+- Reworked message padding and spacing
+- Chat profile should now support non-ASCII characters (like chinese)
+
 ## [1.1.300rc1] - 2024-05-28
 
 ### Fix

backend/chainlit/socket.py

@@ -2,6 +2,7 @@
 import json
 import time
 import uuid
+from urllib.parse import unquote
 from typing import Any, Dict, Literal
 
 from chainlit.action import Action
@@ -138,6 +139,8 @@ def emit_call_fn(event: Literal["ask", "call_fn"], data, timeout):
 
     client_type = environ.get("HTTP_X_CHAINLIT_CLIENT_TYPE")
     http_referer = environ.get("HTTP_REFERER")
+    url_encoded_chat_profile = environ.get("HTTP_X_CHAINLIT_CHAT_PROFILE")
+    chat_profile = unquote(url_encoded_chat_profile) if url_encoded_chat_profile else None
 
     ws_session = WebsocketSession(
         id=session_id,
@@ -148,7 +151,7 @@ def emit_call_fn(event: Literal["ask", "call_fn"], data, timeout):
         user_env=user_env,
         user=user,
         token=token,
-        chat_profile=environ.get("HTTP_X_CHAINLIT_CHAT_PROFILE"),
+        chat_profile=chat_profile,
         thread_id=environ.get("HTTP_X_CHAINLIT_THREAD_ID"),
         languages=environ.get("HTTP_ACCEPT_LANGUAGE"),
         http_referer=http_referer,

backend/pyproject.toml

@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "chainlit"
-version = "1.1.300rc1"
+version = "1.1.300rc2"
 keywords = [
     'LLM',
     'Agents',

frontend/src/App.css

@@ -7,14 +7,6 @@
   max-width: 100%;
 }
 
-.markdown-body *:first-child:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
-  margin-top: 0;
-}
-
-.markdown-body *:last-child {
-  margin-bottom: 0;
-}
-
 .markdown-body p {
   white-space: break-spaces;
 }

frontend/src/App.tsx

@@ -40,7 +40,6 @@ type ThemOverride = {
 
 declare global {
   interface Window {
-    renderingCodeBlock?: boolean;
     theme?: {
       default: string;
       light?: ThemOverride;

frontend/src/assets/expand.tsx

@@ -0,0 +1,24 @@
+import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
+
+const ExpandIcon = (props: SvgIconProps) => {
+  return (
+    <SvgIcon
+      {...props}
+      style={{
+        strokeLinecap: 'round',
+        strokeLinejoin: 'round',
+        strokeWidth: 2,
+        fill: 'none',
+        stroke: 'currentColor'
+      }}
+      viewBox="0 0 24 24"
+    >
+      <polyline points="15 3 21 3 21 9" />
+      <polyline points="9 21 3 21 3 15" />
+      <line x1="21" x2="14" y1="3" y2="10" />
+      <line x1="3" x2="10" y1="21" y2="14" />
+    </SvgIcon>
+  );
+};
+
+export default ExpandIcon;

frontend/src/assets/minimize.tsx

@@ -0,0 +1,24 @@
+import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
+
+const MinimizeIcon = (props: SvgIconProps) => {
+  return (
+    <SvgIcon
+      {...props}
+      style={{
+        strokeLinecap: 'round',
+        strokeLinejoin: 'round',
+        strokeWidth: 2,
+        fill: 'none',
+        stroke: 'currentColor'
+      }}
+      viewBox="0 0 24 24"
+    >
+      <polyline points="4 14 10 14 10 20" />
+      <polyline points="20 10 14 10 14 4" />
+      <line x1="14" x2="21" y1="10" y2="3" />
+      <line x1="3" x2="10" y1="21" y2="14" />
+    </SvgIcon>
+  );
+};
+
+export default MinimizeIcon;

frontend/src/components/molecules/BlinkingCursor.tsx

@@ -16,7 +16,11 @@ const blink = keyframes`
 
 export const CURSOR_PLACEHOLDER = '\u200B';
 
-export default function BlinkingCursor() {
+interface Props {
+  whitespace?: boolean;
+}
+
+export default function BlinkingCursor({ whitespace }: Props) {
   return (
     <Box
       component="span"
@@ -26,7 +30,8 @@ export default function BlinkingCursor() {
         height: '12px',
         backgroundColor: 'text.primary',
         borderRadius: '50%',
-        animation: `1s ease-in-out 0.1s ${blink} infinite`
+        animation: `1s ease-in-out 0.1s ${blink} infinite`,
+        ml: whitespace ? '0.5em' : 0
       }}
     />
   );

frontend/src/components/molecules/Markdown.tsx

@@ -90,8 +90,6 @@ function Markdown({ refElements, allowHtml, latex, children }: Props) {
     return rehypePlugins;
   }, [allowHtml, latex]);
 
-  window.renderingCodeBlock = false;
-
   const remarkPlugins = useMemo(() => {
     let remarkPlugins: PluggableList = [cursorPlugin, remarkGfm as any];
 
@@ -126,7 +124,6 @@ function Markdown({ refElements, allowHtml, latex, children }: Props) {
           return <InlineCode {...props} />;
         },
         pre({ ...props }) {
-          window.renderingCodeBlock = true;
           return <Code {...props} />;
         },
         table({ children, ...props }) {
@@ -173,7 +170,7 @@ function Markdown({ refElements, allowHtml, latex, children }: Props) {
           return <TableBody {...props}>{children}</TableBody>;
         },
         // @ts-expect-error custom plugin
-        blinkingCursor: () => <BlinkingCursor />
+        blinkingCursor: () => <BlinkingCursor whitespace />
       }}
     >
       {children}

frontend/src/components/molecules/messages/Message.tsx

@@ -42,8 +42,7 @@ const Message = memo(
     const isAsk = message.waitForAnswer;
     const isUserMessage = message.type === 'user_message';
 
-    const forceDisplayCursor =
-      isLast && isRunning && (!message.streaming || window.renderingCodeBlock);
+    const forceDisplayCursor = isLast && isRunning && !message.streaming;
     return (
       <Box
         sx={{
@@ -80,10 +79,9 @@ const Message = memo(
                 <Box
                   sx={{
                     px: 2.5,
-                    py: 1,
                     borderRadius: '1.5rem',
                     backgroundColor: 'background.paper',
-                    maxWidth: '90%',
+                    maxWidth: '70%',
                     ml: 'auto'
                   }}
                 >
@@ -98,7 +96,7 @@ const Message = memo(
                   />
                 </Box>
                 {forceDisplayCursor && (
-                  <Box my={1}>
+                  <Box mt={1}>
                     <BlinkingCursor />
                   </Box>
                 )}
@@ -129,16 +127,15 @@ const Message = memo(
                   {!isRunning && isLast && isAsk && (
                     <AskUploadButton onError={onError} />
                   )}
-                  <Box my={1} />
-                  {forceDisplayCursor && (
-                    <Box position="absolute" bottom={0}>
-                      <BlinkingCursor />
-                    </Box>
-                  )}
                   {actions?.length ? (
                     <MessageActions message={message} actions={actions} />
                   ) : null}
                   <MessageButtons message={message} />
+                  {forceDisplayCursor && (
+                    <Box my={0.5}>
+                      <BlinkingCursor />
+                    </Box>
+                  )}
                 </Stack>
               </Stack>
             )}

frontend/src/components/molecules/messages/ToolCalls.tsx

@@ -58,7 +58,7 @@ export default function ToolCalls({ message, elements, isRunning }: Props) {
   }
 
   return (
-    <Stack width="100%" direction="column" gap={1} mb={1}>
+    <Stack width="100%" direction="column" gap={1}>
       {toolCalls.map((toolCall, index) => (
         <ToolCall
           key={index}

frontend/src/components/molecules/messages/components/MessageActions.tsx

@@ -24,7 +24,7 @@ const MessageActions = ({ message, actions }: Props) => {
 
   const show = displayedActions.length || drawerActions.length;
 
-  if (!show) {
+  if (!show || message.streaming) {
     return null;
   }
 

libs/copilot/src/chat/body.tsx

@@ -208,6 +208,7 @@ const Chat = () => {
             setAutoScroll={setAutoScroll}
           >
             <WelcomeScreen hideLogo />
+            <Box my={1} />
             <Messages />
           </ScrollContainer>
           <InputBox

libs/copilot/src/components/Header.tsx

@@ -1,11 +1,18 @@
-import { Stack } from '@mui/material';
+import { IconButton, Stack } from '@mui/material';
 
+import ExpandIcon from '@chainlit/app/src/assets/expand';
+import MinimizeIcon from '@chainlit/app/src/assets/minimize';
 import { Logo } from '@chainlit/app/src/components/atoms/logo';
 
 import ChatProfiles from './ChatProfiles';
 import NewChatButton from './NewChatButton';
 
-const Header = (): JSX.Element => (
+interface Props {
+  expanded: boolean;
+  setExpanded: (expanded: boolean) => void;
+}
+
+const Header = ({ expanded, setExpanded }: Props): JSX.Element => (
   <Stack
     px={2}
     py={1.5}
@@ -14,7 +21,16 @@ const Header = (): JSX.Element => (
     justifyContent="space-between"
     bgcolor="background.paper"
   >
-    <Logo style={{ maxHeight: '25px' }} />
+    <Stack direction="row" alignItems="center" spacing={0.5}>
+      <Logo style={{ maxHeight: '25px' }} />
+      <IconButton onClick={() => setExpanded(!expanded)}>
+        {expanded ? (
+          <MinimizeIcon sx={{ width: 16, height: 16 }} />
+        ) : (
+          <ExpandIcon sx={{ width: 16, height: 16 }} />
+        )}
+      </IconButton>
+    </Stack>
     <Stack direction="row" alignItems="center" spacing={1}>
       <ChatProfiles />
       <NewChatButton />

libs/copilot/src/popover.tsx

@@ -1,4 +1,5 @@
 import Chat from 'chat';
+import { useState } from 'react';
 
 import { Box } from '@mui/material';
 import Fade from '@mui/material/Fade';
@@ -11,6 +12,7 @@ interface Props {
 }
 
 export default function PopOver({ anchorEl }: Props) {
+  const [expanded, setExpanded] = useState(false);
   return (
     <Popper
       id="chainlit-copilot-popover"
@@ -22,7 +24,7 @@ export default function PopOver({ anchorEl }: Props) {
         flexDirection: 'column',
         inset: 'auto auto 14px -24px !important',
         height: 'min(730px, calc(100vh - 100px))',
-        width: 'min(400px, 80vw)',
+        width: expanded ? '80vw' : 'min(400px, 80vw)',
         overflow: 'hidden',
         borderRadius: '12px',
         background: (theme) => theme.palette.background.default,
@@ -40,7 +42,7 @@ export default function PopOver({ anchorEl }: Props) {
             width: '100%'
           }}
         >
-          <Header />
+          <Header expanded={expanded} setExpanded={setExpanded} />
           <Chat />
         </Box>
       </Fade>

libs/react-client/src/useChatSession.ts

@@ -63,7 +63,6 @@ const useChatSession = () => {
   const [chatProfile, setChatProfile] = useRecoilState(chatProfileState);
   const idToResume = useRecoilValue(threadIdToResumeState);
   const setCurrentThreadId = useSetRecoilState(currentThreadIdState);
-
   const _connect = useCallback(
     ({
       client,
@@ -86,7 +85,9 @@ const useChatSession = () => {
           'X-Chainlit-Session-Id': sessionId,
           'X-Chainlit-Thread-Id': idToResume || '',
           'user-env': JSON.stringify(userEnv),
-          'X-Chainlit-Chat-Profile': chatProfile || ''
+          'X-Chainlit-Chat-Profile': chatProfile
+            ? encodeURIComponent(chatProfile)
+            : ''
         }
       });
       setSession((old) => {