various bug fixes (#600)

* various bug fixes

* file upload should flush thread queues

* relax python dependency

* fix deps

* don't send steps if hide_cot is true

* make oauth cookie samesite policy configurable

* add copy button and replace message buttons

* 1.0.0rc2

* changelog

* bump sdk version

CHANGELOG.md

@@ -8,6 +8,19 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 Nothing is unreleased!
 
+## [1.0.0rc2] - 2023-12-18
+
+### Added
+
+- Copy button under messages
+- OAuth samesite cookie policy is now configurable through the `CHAINLIT_COOKIE_SAMESITE` env var
+
+### Changed
+
+- Relax Python version requirements
+- If `hide_cot` is configured to `true`, steps will never be sent to the UI, but still persisted.
+- Message buttons are now positioned below
+
 ## [1.0.0rc0] - 2023-12-12
 
 ### Added

backend/chainlit/data/__init__.py

@@ -3,6 +3,7 @@
 from collections import deque
 from typing import TYPE_CHECKING, Dict, List, Optional
 
+from chainlit.config import config
 from chainlit.context import context
 from chainlit.logger import logger
 from chainlit.session import WebsocketSession
@@ -332,6 +333,8 @@ async def get_thread(self, thread_id: str) -> "Optional[ThreadDict]":
  steps = [] # List[StepDict]
  if thread.steps:
  for step in thread.steps:
+ if config.ui.hide_cot and step.parent_id:
+ continue
  for attachment in step.attachments:
  elements.append(self.attachment_to_element_dict(attachment))
  steps.append(self.step_to_step_dict(step))

backend/chainlit/emitter.py

@@ -167,8 +167,7 @@ def clear_ask(self):
 
  return self.emit("clear_ask", {})
 
- async def init_thread(self, step: StepDict):
- """Signal the UI that a new thread (with a user message) exists"""
+ async def flush_thread_queues(self, name: str):
  if data_layer := get_data_layer():
  if isinstance(self.session.user, PersistedUser):
  user_id = self.session.user.id
@@ -177,10 +176,13 @@ async def init_thread(self, step: StepDict):
  await data_layer.update_thread(
  thread_id=self.session.thread_id,
  user_id=user_id,
- metadata={"name": step["output"]},
+ metadata={"name": name},
  )
  await self.session.flush_method_queue()
 
+ async def init_thread(self, step: StepDict):
+ """Signal the UI that a new thread (with a user message) exists"""
+ await self.flush_thread_queues(name=step["output"])
  await self.emit("init_thread", step)
 
  async def process_user_message(self, payload: UIMessagePayload):
@@ -251,6 +253,12 @@ async def send_ask_user(
  if file["id"] in self.session.files
  ]
  final_res = files
+ if not self.session.has_user_message:
+ self.session.has_user_message = True
+ await self.flush_thread_queues(
+ name=",".join([file["name"] for file in files])
+ )
+
  if get_data_layer():
  coros = [
  File(

backend/chainlit/message.py

@@ -1,5 +1,6 @@
 import asyncio
 import json
+import time
 import uuid
 from abc import ABC
 from datetime import datetime
@@ -146,7 +147,6 @@ async def _create(self):
  async def send(self):
  if not self.created_at:
  self.created_at = datetime.utcnow().isoformat()
-
  if self.content is None:
  self.content = ""
 
@@ -157,7 +157,6 @@ async def send(self):
  self.streaming = False
 
  step_dict = await self._create()
-
  await context.emitter.send_step(step_dict)
 
  return self.id
@@ -209,6 +208,7 @@ def __init__(
  id: Optional[str] = None,
  created_at: Union[str, None] = None,
  ):
+ time.sleep(0.001)
  self.language = language
 
  if isinstance(content, dict):

backend/chainlit/playground/providers/langchain.py

@@ -56,7 +56,7 @@ def format_message(self, message, prompt):
  return self.prompt_message_to_langchain_message(message)
 
  def message_to_string(self, message: BaseMessage) -> str: # type: ignore[override]
- return message.content
+ return str(message.content)
 
  async def create_completion(self, request):
  from langchain.schema.messages import BaseMessageChunk

backend/chainlit/server.py

@@ -3,7 +3,7 @@
 import mimetypes
 import shutil
 import urllib.parse
-from typing import Optional, Union
+from typing import Any, Optional, Union
 
 from chainlit.oauth_providers import get_oauth_provider
 from chainlit.secret import random_secret
@@ -317,7 +317,10 @@ async def oauth_login(provider_id: str, request: Request):
  response = RedirectResponse(
  url=f"{provider.authorize_url}?{params}",
  )
- response.set_cookie("oauth_state", random, httponly=True, max_age=3 * 60)
+ samesite = os.environ.get("CHAINLIT_COOKIE_SAMESITE", "lax") # type: Any
+ response.set_cookie(
+ "oauth_state", random, httponly=True, samesite=samesite, max_age=3 * 60
+ )
  return response
 
 

backend/chainlit/step.py

@@ -1,6 +1,7 @@
 import asyncio
 import inspect
 import json
+import time
 import uuid
 from datetime import datetime
 from functools import wraps
@@ -158,6 +159,7 @@ def __init__(
  show_input: Union[bool, str] = False,
  ):
  trace_event(f"init {self.__class__.__name__} {type}")
+ time.sleep(0.001)
  self._input = ""
  self._output = ""
  self.thread_id = context.session.thread_id
@@ -264,6 +266,9 @@ async def update(self):
  tasks = [el.send(for_id=self.id) for el in self.elements]
  await asyncio.gather(*tasks)
 
+ if config.ui.hide_cot and self.parent_id:
+ return
+
  if not config.features.prompt_playground and "generation" in step_dict:
  step_dict.pop("generation", None)
 
@@ -318,6 +323,9 @@ async def send(self):
  tasks = [el.send(for_id=self.id) for el in self.elements]
  await asyncio.gather(*tasks)
 
+ if config.ui.hide_cot and self.parent_id:
+ return self.id
+
  if not config.features.prompt_playground and "generation" in step_dict:
  step_dict.pop("generation", None)
 
@@ -342,6 +350,10 @@ async def stream_token(self, token: str, is_sequence=False):
  self.output += token
 
  assert self.id
+
+ if config.ui.hide_cot and self.parent_id:
+ return
+
  await context.emitter.send_token(
  id=self.id, token=token, is_sequence=is_sequence
  )
@@ -372,7 +384,9 @@ async def __aenter__(self):
 
  async def __aexit__(self, exc_type, exc_val, exc_tb):
  self.end = datetime.utcnow().isoformat()
- context.session.active_steps.pop()
+
+ if self in context.session.active_steps:
+ context.session.active_steps.remove(self)
  await self.update()
 
  def __enter__(self):
@@ -389,5 +403,6 @@ def __enter__(self):
 
  def __exit__(self, exc_type, exc_val, exc_tb):
  self.end = datetime.utcnow().isoformat()
- context.session.active_steps.pop()
+ if self in context.session.active_steps:
+ context.session.active_steps.remove(self)
  asyncio.create_task(self.update())

backend/pyproject.toml

@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "chainlit"
-version = "1.0.0rc1"
+version = "1.0.0rc2"
 keywords = ['LLM', 'Agents', 'gen ai', 'chat ui', 'chatbot ui', 'langchain']
 description = "A faster way to build chatbot UIs."
 authors = ["Chainlit"]
@@ -19,8 +19,8 @@ include = [
 chainlit = 'chainlit.cli:cli'
 
 [tool.poetry.dependencies]
-python = ">=3.8.1,<3.12"
-chainlit_client = "0.1.0rc5"
+python = ">=3.8.1,<4.0.0"
+chainlit_client = "0.1.0rc7"
 dataclasses_json = "^0.5.7"
 uvicorn = "^0.23.2"
 fastapi = "^0.100"
@@ -48,8 +48,8 @@ optional = true
 
 [tool.poetry.group.tests.dependencies]
 openai = ">=1.1.0"
-langchain = "^0.0.331"
-llama-index = "^0.8.64"
+langchain = "^0.0.350"
+llama-index = "^0.9.15"
 transformers = "^4.30.1"
 matplotlib = "3.7.1"
 farm-haystack = "^1.18.0"

cypress/e2e/avatar/main.py

@@ -8,12 +8,8 @@ async def start():
  url="https://avatars.githubusercontent.com/u/128686189?s=400&u=a1d1553023f8ea0921fba0debbe92a8c5f840dd9&v=4",
  ).send()
 
- await cl.Avatar(name="Cat", path="./cat.jpeg").send()
-
- await cl.Avatar(
- name="Tool 1",
- url="https://avatars.githubusercontent.com/u/128686189?s=400&u=a1d1553023f8ea0921fba0debbe92a8c5f840dd9&v=4",
- ).send()
+ await cl.Avatar(name="Cat", path="./public/cat.jpeg").send()
+ await cl.Avatar(name="Cat 2", url="/public/cat.jpeg").send()
 
  await cl.Message(
  content="This message should not have an avatar!", author="Tool 0"
@@ -30,3 +26,7 @@ async def start():
  await cl.Message(
  content="This message should have a cat avatar!", author="Cat"
  ).send()
+
+ await cl.Message(
+ content="This message should have a cat avatar!", author="Cat 2"
+ ).send()

cypress/e2e/avatar/spec.cy.ts

@@ -6,12 +6,13 @@ describe('Avatar', () => {
  });
 
  it('should be able to display avatars', () => {
- cy.get('.step').should('have.length', 4);
+ cy.get('.step').should('have.length', 5);
 
  cy.get('.step').eq(0).find('.message-avatar').should('have.length', 0);
  cy.get('.step').eq(1).find('.message-avatar').should('have.length', 1);
  cy.get('.step').eq(2).find('.message-avatar').should('have.length', 0);
  cy.get('.step').eq(3).find('.message-avatar').should('have.length', 1);
+ cy.get('.step').eq(4).find('.message-avatar').should('have.length', 1);
 
  cy.get('.element-link').should('have.length', 0);
  });

frontend/src/App.css

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

libs/react-components/src/ClipboardCopy.tsx

@@ -1,60 +1,40 @@
-import { grey } from 'theme/palette';
-import { useCopyToClipboard, useToggle } from 'usehooks-ts';
+import { useState } from 'react';
+import { useCopyToClipboard } from 'usehooks-ts';
 
-import CopyAll from '@mui/icons-material/CopyAll';
-import { IconProps } from '@mui/material/Icon';
-import IconButton from '@mui/material/IconButton';
+import ContentPaste from '@mui/icons-material/ContentPaste';
+import IconButton, { IconButtonProps } from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 
-import { useIsDarkMode } from 'hooks/useIsDarkMode';
-
 interface ClipboardCopyProps {
  value: string;
  theme?: 'dark' | 'light';
- size?: IconProps['fontSize'];
+ edge?: IconButtonProps['edge'];
 }
 
-const ClipboardCopy = ({
- value,
- size,
- theme
-}: ClipboardCopyProps): JSX.Element => {
- const [showTooltip, toggleTooltip] = useToggle();
- const isDarkMode = useIsDarkMode();
+const ClipboardCopy = ({ value, edge }: ClipboardCopyProps): JSX.Element => {
+ const [isCopied, setIsCopied] = useState(false);
  const [_, copy] = useCopyToClipboard();
 
- const getColor = () => {
- if (theme) {
- if (theme === 'dark') return grey[200];
- else if (theme === 'light') return grey[800];
- }
+ const handleCopy = () => {
+ copy(value)
+ .then(() => {
+ setIsCopied(true);
+ })
+ .catch((err) => console.log('An error occurred while copying: ', err));
+ };
 
- return isDarkMode ? grey[200] : grey[800];
+ const handleTooltipClose = () => {
+ setIsCopied(false);
  };
 
  return (
  <Tooltip
- open={showTooltip}
- title={'Copied to clipboard!'}
- onClose={toggleTooltip}
+ title={isCopied ? 'Copied to clipboard!' : 'Copy'}
+ onClose={handleTooltipClose}
  sx={{ zIndex: 2 }}
  >
- <IconButton
- sx={{
- color: getColor(),
- position: 'absolute',
- right: 0,
- top: 0
- }}
- onClick={() => {
- copy(value)
- .then(() => toggleTooltip())
- .catch((err) =>
- console.log('An error occurred while copying: ', err)
- );
- }}
- >
- <CopyAll fontSize={size} />
+ <IconButton color="inherit" edge={edge} onClick={handleCopy}>
+ <ContentPaste sx={{ height: 16, width: 16 }} />
  </IconButton>
  </Tooltip>
  );

libs/react-components/src/Code.tsx

@@ -86,17 +86,19 @@ const Code = ({ children, ...props }: any) => {
  >
  <Stack
  px={2}
- py={1}
+ py={0.5}
  direction="row"
  sx={{
+ justifyContent: 'space-between',
+ alignItems: 'center',
  borderTopLeftRadius: '4px',
  borderTopRightRadius: '4px',
  background: isDarkMode ? grey[900] : grey[200],
  borderBottom: `1px solid ${grey[950]}`
  }}
  >
  <Typography variant="caption">{match?.[1] || 'Raw code'}</Typography>
- <ClipboardCopy value={code} size="small" />
+ <ClipboardCopy edge="end" value={code} />
  </Stack>
 
  {highlightedCode}