diff --git a/CHANGELOG.md b/CHANGELOG.md index 19e95ac559..b8860243d6 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/backend/chainlit/socket.py b/backend/chainlit/socket.py index 7bc44413b8..23be4b1be2 100644 --- a/backend/chainlit/socket.py +++ b/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, diff --git a/backend/pyproject.toml b/backend/pyproject.toml index ea60985d24..bf8fd06cb6 100644 --- a/backend/pyproject.toml +++ b/backend/pyproject.toml @@ -1,6 +1,6 @@ [tool.poetry] name = "chainlit" -version = "1.1.300rc1" +version = "1.1.300rc2" keywords = [ 'LLM', 'Agents', diff --git a/frontend/src/App.css b/frontend/src/App.css index d00655f0e4..7e6a96945a 100644 --- a/frontend/src/App.css +++ b/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; } diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 71006e5036..f416e45664 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -40,7 +40,6 @@ type ThemOverride = { declare global { interface Window { - renderingCodeBlock?: boolean; theme?: { default: string; light?: ThemOverride; diff --git a/frontend/src/assets/expand.tsx b/frontend/src/assets/expand.tsx new file mode 100644 index 0000000000..d900e60be8 --- /dev/null +++ b/frontend/src/assets/expand.tsx @@ -0,0 +1,24 @@ +import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon'; + +const ExpandIcon = (props: SvgIconProps) => { + return ( + + + + + + + ); +}; + +export default ExpandIcon; diff --git a/frontend/src/assets/minimize.tsx b/frontend/src/assets/minimize.tsx new file mode 100644 index 0000000000..9b1a0e4ef2 --- /dev/null +++ b/frontend/src/assets/minimize.tsx @@ -0,0 +1,24 @@ +import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon'; + +const MinimizeIcon = (props: SvgIconProps) => { + return ( + + + + + + + ); +}; + +export default MinimizeIcon; diff --git a/frontend/src/components/molecules/BlinkingCursor.tsx b/frontend/src/components/molecules/BlinkingCursor.tsx index 9fb7aa2bed..380802796f 100644 --- a/frontend/src/components/molecules/BlinkingCursor.tsx +++ b/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 ( ); diff --git a/frontend/src/components/molecules/Markdown.tsx b/frontend/src/components/molecules/Markdown.tsx index 8228fe30ca..a1115006ef 100644 --- a/frontend/src/components/molecules/Markdown.tsx +++ b/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 ; }, pre({ ...props }) { - window.renderingCodeBlock = true; return ; }, table({ children, ...props }) { @@ -173,7 +170,7 @@ function Markdown({ refElements, allowHtml, latex, children }: Props) { return {children}; }, // @ts-expect-error custom plugin - blinkingCursor: () => + blinkingCursor: () => }} > {children} diff --git a/frontend/src/components/molecules/messages/Message.tsx b/frontend/src/components/molecules/messages/Message.tsx index f996caa751..08f7ce0635 100644 --- a/frontend/src/components/molecules/messages/Message.tsx +++ b/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 ( @@ -98,7 +96,7 @@ const Message = memo( /> {forceDisplayCursor && ( - + )} @@ -129,16 +127,15 @@ const Message = memo( {!isRunning && isLast && isAsk && ( )} - - {forceDisplayCursor && ( - - - - )} {actions?.length ? ( ) : null} + {forceDisplayCursor && ( + + + + )} )} diff --git a/frontend/src/components/molecules/messages/ToolCalls.tsx b/frontend/src/components/molecules/messages/ToolCalls.tsx index d739b76d05..437dde036b 100644 --- a/frontend/src/components/molecules/messages/ToolCalls.tsx +++ b/frontend/src/components/molecules/messages/ToolCalls.tsx @@ -58,7 +58,7 @@ export default function ToolCalls({ message, elements, isRunning }: Props) { } return ( - + {toolCalls.map((toolCall, index) => ( { const show = displayedActions.length || drawerActions.length; - if (!show) { + if (!show || message.streaming) { return null; } diff --git a/libs/copilot/src/chat/body.tsx b/libs/copilot/src/chat/body.tsx index 3c7be16586..2e5f33ffc9 100644 --- a/libs/copilot/src/chat/body.tsx +++ b/libs/copilot/src/chat/body.tsx @@ -208,6 +208,7 @@ const Chat = () => { setAutoScroll={setAutoScroll} > + ( +interface Props { + expanded: boolean; + setExpanded: (expanded: boolean) => void; +} + +const Header = ({ expanded, setExpanded }: Props): JSX.Element => ( ( justifyContent="space-between" bgcolor="background.paper" > - + + + setExpanded(!expanded)}> + {expanded ? ( + + ) : ( + + )} + + diff --git a/libs/copilot/src/popover.tsx b/libs/copilot/src/popover.tsx index d52a22a29c..8fe806871e 100644 --- a/libs/copilot/src/popover.tsx +++ b/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 ( theme.palette.background.default, @@ -40,7 +42,7 @@ export default function PopOver({ anchorEl }: Props) { width: '100%' }} > -
+
diff --git a/libs/react-client/src/useChatSession.ts b/libs/react-client/src/useChatSession.ts index fa325cbd03..dac358abbb 100644 --- a/libs/react-client/src/useChatSession.ts +++ b/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) => {