Wd/1.1.200 (#1008)

* loader rework
* update icons
* fix auto scroll
* fix github button

CHANGELOG.md

@@ -8,6 +8,20 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 Nothing unreleased!
 
+## [1.1.200] - 2024-05-21
+
+### Changed
+
+- User message UI has been updated
+- Loading indicator has been improved and visually updated
+- Icons have been updated
+- Dark theme is now the default
+
+### Fixed
+
+- Scroll issues on mobile browsers
+- Github button now showing
+
 ## [1.1.101] - 2024-05-14
 
 ### Added

backend/chainlit/discord/app.py

@@ -100,10 +100,16 @@ async def send_step(self, step_dict: StepDict):
         if not self.enabled:
             return
 
+        step_type = step_dict.get("type")
+        is_message = step_type in [
+            "user_message",
+            "assistant_message",
+            "system_message",
+        ]
         is_chain_of_thought = bool(step_dict.get("parentId"))
         is_empty_output = not step_dict.get("output")
 
-        if is_chain_of_thought or is_empty_output:
+        if is_chain_of_thought or is_empty_output or not is_message:
             return
         else:
             enable_feedback = not step_dict.get("disableFeedback") and get_data_layer()

backend/chainlit/message.py

@@ -206,7 +206,7 @@ class Message(MessageBase):
     def __init__(
         self,
         content: Union[str, Dict],
-        author: str = config.ui.name,
+        author: Optional[str] = None,
         language: Optional[str] = None,
         actions: Optional[List[Action]] = None,
         elements: Optional[List[ElementBased]] = None,
@@ -243,7 +243,7 @@ def __init__(
         self.metadata = metadata
         self.tags = tags
 
-        self.author = author
+        self.author = author or config.ui.name
         self.type = type
         self.actions = actions if actions is not None else []
         self.elements = elements if elements is not None else []

backend/chainlit/slack/app.py

@@ -67,10 +67,16 @@ async def send_step(self, step_dict: StepDict):
         if not self.enabled:
             return
 
+        step_type = step_dict.get("type")
+        is_message = step_type in [
+            "user_message",
+            "assistant_message",
+            "system_message",
+        ]
         is_chain_of_thought = bool(step_dict.get("parentId"))
         is_empty_output = not step_dict.get("output")
 
-        if is_chain_of_thought or is_empty_output:
+        if is_chain_of_thought or is_empty_output or not is_message:
             return
 
         enable_feedback = not step_dict.get("disableFeedback") and get_data_layer()

backend/chainlit/step.py

@@ -299,7 +299,7 @@ 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:
+        if config.ui.hide_cot and (self.parent_id or not self.root):
             return
 
         if not config.features.prompt_playground and "generation" in step_dict:
@@ -332,7 +332,7 @@ async def remove(self):
 
     async def send(self):
         if self.persisted:
-            return
+            return self
 
         if config.code.author_rename:
             self.name = await config.code.author_rename(self.name)
@@ -356,37 +356,36 @@ 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 config.ui.hide_cot and (self.parent_id or not self.root):
+            return self
 
         if not config.features.prompt_playground and "generation" in step_dict:
             step_dict.pop("generation", None)
 
         await context.emitter.send_step(step_dict)
 
-        return self.id
+        return self
 
     async def stream_token(self, token: str, is_sequence=False):
         """
         Sends a token to the UI.
         Once all tokens have been streamed, call .send() to end the stream and persist the step if persistence is enabled.
         """
-
-        if not self.streaming:
-            self.streaming = True
-            step_dict = self.to_dict()
-            await context.emitter.stream_start(step_dict)
-
         if is_sequence:
             self.output = token
         else:
             self.output += token
 
         assert self.id
 
-        if config.ui.hide_cot and self.parent_id:
+        if config.ui.hide_cot and (self.parent_id or not self.root):
             return
 
+        if not self.streaming:
+            self.streaming = True
+            step_dict = self.to_dict()
+            await context.emitter.stream_start(step_dict)
+
         await context.emitter.send_token(
             id=self.id, token=token, is_sequence=is_sequence
         )

backend/pyproject.toml

@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "chainlit"
-version = "1.1.101"
+version = "1.1.200"
 keywords = ['LLM', 'Agents', 'gen ai', 'chat ui', 'chatbot ui', 'openai', 'copilot', 'langchain', 'conversational ai']
 description = "Build Conversational AI."
 authors = ["Chainlit"]

cypress/e2e/step/.chainlit/config.toml

@@ -2,6 +2,7 @@
 # Whether to enable telemetry (default: true). No personal data is collected.
 enable_telemetry = true
 
+
 # List of environment variables to be provided by each user to use the app.
 user_env = []
 
@@ -11,17 +12,53 @@ session_timeout = 3600
 # Enable third parties caching (e.g LangChain cache)
 cache = false
 
+# Authorized origins
+allow_origins = ["*"]
+
 # Follow symlink for asset mount (see https://github.com/Chainlit/chainlit/issues/317)
 # follow_symlink = false
 
 [features]
 # Show the prompt playground
 prompt_playground = true
 
+# Process and display HTML in messages. This can be a security risk (see https://stackoverflow.com/questions/19603097/why-is-it-dangerous-to-render-user-generated-html-or-javascript)
+unsafe_allow_html = false
+
+# Process and display mathematical expressions. This can clash with "$" characters in messages.
+latex = false
+
+# Automatically tag threads with the current chat profile (if a chat profile is used)
+auto_tag_thread = true
+
+# Authorize users to spontaneously upload files with messages
+[features.spontaneous_file_upload]
+    enabled = true
+    accept = ["*/*"]
+    max_files = 20
+    max_size_mb = 500
+
+[features.audio]
+    # Threshold for audio recording
+    min_decibels = -45
+    # Delay for the user to start speaking in MS
+    initial_silence_timeout = 3000
+    # Delay for the user to continue speaking in MS. If the user stops speaking for this duration, the recording will stop.
+    silence_timeout = 1500
+    # Above this duration (MS), the recording will forcefully stop.
+    max_duration = 15000
+    # Duration of the audio chunks in MS
+    chunk_duration = 1000
+    # Sample rate of the audio
+    sample_rate = 44100
+
 [UI]
 # Name of the app and chatbot.
 name = "Chatbot"
 
+# Show the readme while the thread is empty.
+show_readme_as_default = true
+
 # Description of the app and chatbot. This is used for HTML tags.
 # description = ""
 
@@ -37,6 +74,25 @@ hide_cot = false
 # Link to your github repo. This will add a github button in the UI's header.
 # github = ""
 
+# Specify a CSS file that can be used to customize the user interface.
+# The CSS file can be served from the public directory or via an external link.
+# custom_css = "/public/test.css"
+
+# Specify a Javascript file that can be used to customize the user interface.
+# The Javascript file can be served from the public directory.
+# custom_js = "/public/test.js"
+
+# Specify a custom font url.
+# custom_font = "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap"
+
+# Specify a custom build directory for the frontend.
+# This can be used to customize the frontend code.
+# Be careful: If this is a relative path, it should not start with a slash.
+# custom_build = "./public/build"
+
+[UI.theme]
+    #layout = "wide"
+    #font_family = "Inter, sans-serif"
 # Override default MUI light theme. (Check theme.ts)
 [UI.theme.light]
     #background = "#FAFAFA"
@@ -59,4 +115,4 @@ hide_cot = false
 
 
 [meta]
-generated_by = "0.6.402"
+generated_by = "1.1.0rc1"

frontend/package.json

@@ -46,6 +46,7 @@
     "remark-math": "^6.0.0",
     "sonner": "^1.2.3",
     "swr": "^2.2.2",
+    "unist-util-visit": "^5.0.0",
     "usehooks-ts": "^2.9.1",
     "uuid": "^9.0.0",
     "yup": "^1.2.0"

frontend/src/assets/attachment.tsx

@@ -0,0 +1,21 @@
+import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
+
+const AttachmentIcon = (props: SvgIconProps) => {
+  return (
+    <SvgIcon
+      {...props}
+      style={{
+        strokeLinecap: 'round',
+        strokeLinejoin: 'round',
+        strokeWidth: 2,
+        fill: 'none',
+        stroke: 'currentColor'
+      }}
+      viewBox="0 0 24 24"
+    >
+      <path d="m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48" />
+    </SvgIcon>
+  );
+};
+
+export default AttachmentIcon;

frontend/src/assets/chevronDown.tsx

@@ -0,0 +1,21 @@
+import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
+
+const ChevronDownIcon = (props: SvgIconProps) => {
+  return (
+    <SvgIcon>
+      <svg
+        {...props}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <path d="m6 9 6 6 6-6" />
+      </svg>
+    </SvgIcon>
+  );
+};
+
+export default ChevronDownIcon;

frontend/src/assets/chevronUp.tsx

@@ -12,8 +12,7 @@ const ChevronUpIcon = (props: SvgIconProps) => {
         strokeLinecap="round"
         strokeLinejoin="round"
       >
-        <path d="m17 11-5-5-5 5" />
-        <path d="m17 18-5-5-5 5" />
+        <path d="m18 15-6-6-6 6" />
       </svg>
     </SvgIcon>
   );

frontend/src/assets/copy.tsx

@@ -0,0 +1,22 @@
+import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
+
+const CopyIcon = (props: SvgIconProps) => {
+  return (
+    <SvgIcon
+      {...props}
+      style={{
+        strokeLinecap: 'round',
+        strokeLinejoin: 'round',
+        strokeWidth: 2,
+        fill: 'none',
+        stroke: 'currentColor'
+      }}
+      viewBox="0 0 24 24"
+    >
+      <rect width="14" height="14" x="8" y="8" rx="2" ry="2" />
+      <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
+    </SvgIcon>
+  );
+};
+
+export default CopyIcon;

frontend/src/assets/messageBubble.tsx

@@ -0,0 +1,21 @@
+import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
+
+const MessageBubbleIcon = (props: SvgIconProps) => {
+  return (
+    <SvgIcon>
+      <svg
+        {...props}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z" />{' '}
+      </svg>
+    </SvgIcon>
+  );
+};
+
+export default MessageBubbleIcon;

frontend/src/assets/microphone.tsx

@@ -0,0 +1,23 @@
+import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
+
+const MicrophoneIcon = (props: SvgIconProps) => {
+  return (
+    <SvgIcon
+      {...props}
+      style={{
+        strokeLinecap: 'round',
+        strokeLinejoin: 'round',
+        strokeWidth: 2,
+        fill: 'none',
+        stroke: 'currentColor'
+      }}
+      viewBox="0 0 24 24"
+    >
+      <path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z" />
+      <path d="M19 10v2a7 7 0 0 1-14 0v-2" />
+      <line x1="12" x2="12" y1="19" y2="22" />{' '}
+    </SvgIcon>
+  );
+};
+
+export default MicrophoneIcon;