feat: Compact CoT display

backend/chainlit/config.py

@@ -210,6 +210,12 @@
 # Chain of Thought (CoT) display mode. Can be "hidden", "tool_call" or "full".
 cot = "full"
 
+# CoT display layout. "list" shows each step individually, "compact" collapses into one summary line.
+# cot_display = "list"
+
+# Whether steps are expandable to show input/output details.
+# show_step_details = true
+
 # 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"
@@ -437,6 +443,8 @@ class UISettings(BaseModel):
     name: str
     description: str = ""
     cot: Literal["hidden", "tool_call", "full"] = "full"
+    cot_display: Literal["list", "compact"] = "list"
+    show_step_details: bool = True
     default_theme: Optional[Literal["light", "dark"]] = "dark"
     language: Optional[str] = None
     layout: Optional[Literal["default", "wide"]] = "default"

backend/chainlit/translations/ar-SA.json

@@ -99,7 +99,9 @@
     "messages": {
       "status": {
         "using": "يستخدم",
-        "used": "مستخدم"
+        "used": "مستخدم",
+        "usedSteps": "الخطوات المستخدمة: {{count}}",
+        "usedTools": "الأدوات المستخدمة: {{count}}"
       },
       "actions": {
         "copy": {

backend/chainlit/translations/bn.json

@@ -100,7 +100,9 @@
     "messages": {
       "status": {
         "using": "ব্যবহার করছে",
-        "used": "ব্যবহৃত"
+        "used": "ব্যবহৃত",
+        "usedSteps": "{{count}}টি ধাপ ব্যবহার করেছে",
+        "usedTools": "{{count}}টি টুল ব্যবহার করেছে"
       },
       "actions": {
         "copy": {

backend/chainlit/translations/da-DK.json

@@ -99,7 +99,9 @@
     "messages": {
       "status": {
         "using": "Bruger",
-        "used": "Brugte"
+        "used": "Brugte",
+        "usedSteps": "Brugte {{count}} trin",
+        "usedTools": "Brugte {{count}} værktøjer"
       },
       "actions": {
         "copy": {

backend/chainlit/translations/de-DE.json

@@ -100,7 +100,9 @@
     "messages": {
       "status": {
         "using": "Verwendet",
-        "used": "Verwendete"
+        "used": "Verwendete",
+        "usedSteps": "{{count}} Schritte verwendet",
+        "usedTools": "{{count}} Tools verwendet"
       },
       "actions": {
         "copy": {

backend/chainlit/translations/el-GR.json

@@ -100,7 +100,9 @@
     "messages": {
       "status": {
         "using": "Με τη χρήση",
-        "used": "Χρησιμοποιήθηκε"
+        "used": "Χρησιμοποιήθηκε",
+        "usedSteps": "Χρησιμοποιήθηκαν {{count}} βήματα",
+        "usedTools": "Χρησιμοποιήθηκαν {{count}} εργαλεία"
       },
       "actions": {
         "copy": {

backend/chainlit/translations/en-US.json

@@ -100,7 +100,9 @@
     "messages": {
       "status": {
         "using": "Using",
-        "used": "Used"
+        "used": "Used",
+        "usedSteps": "Used {{count}} steps",
+        "usedTools": "Used {{count}} tools"
       },
       "actions": {
         "copy": {

backend/chainlit/translations/es.json

@@ -100,7 +100,9 @@
     "messages": {
       "status": {
         "using": "Usando",
-        "used": "Usado"
+        "used": "Usado",
+        "usedSteps": "Usó {{count}} pasos",
+        "usedTools": "Usó {{count}} herramientas"
       },
       "actions": {
         "copy": {

backend/chainlit/translations/fr-FR.json

@@ -100,7 +100,9 @@
     "messages": {
       "status": {
         "using": "Utilise",
-        "used": "Utilisé"
+        "used": "Utilisé",
+        "usedSteps": "{{count}} étapes utilisées",
+        "usedTools": "{{count}} outils utilisés"
       },
       "actions": {
         "copy": {

backend/chainlit/translations/gu.json

@@ -100,7 +100,9 @@
     "messages": {
       "status": {
         "using": "વાપરી રહ્યા છે",
-        "used": "વપરાયેલ"
+        "used": "વપરાયેલ",
+        "usedSteps": "{{count}} પગલાં વાપર્યાં",
+        "usedTools": "{{count}} ટૂલ્સ વાપર્યાં"
       },
       "actions": {
         "copy": {

backend/chainlit/translations/he-IL.json

@@ -100,7 +100,9 @@
     "messages": {
       "status": {
         "using": "משתמש ב",
-        "used": "השתמש ב"
+        "used": "השתמש ב",
+        "usedSteps": "השתמש ב-{{count}} שלבים",
+        "usedTools": "השתמש ב-{{count}} כלים"
       },
       "actions": {
         "copy": {

backend/chainlit/translations/hi.json

@@ -100,7 +100,9 @@
     "messages": {
       "status": {
         "using": "उपयोग कर रहे हैं",
-        "used": "उपयोग किया"
+        "used": "उपयोग किया",
+        "usedSteps": "{{count}} चरणों का उपयोग किया",
+        "usedTools": "{{count}} टूल्स का उपयोग किया"
       },
       "actions": {
         "copy": {

backend/chainlit/translations/it.json

@@ -100,7 +100,9 @@
     "messages": {
       "status": {
         "using": "In uso",
-        "used": "Utilizzato"
+        "used": "Utilizzato",
+        "usedSteps": "Utilizzati {{count}} passaggi",
+        "usedTools": "Utilizzati {{count}} strumenti"
       },
       "actions": {
         "copy": {

backend/chainlit/translations/ja.json

@@ -99,7 +99,9 @@
     "messages": {
       "status": {
         "using": "使用中",
-        "used": "使用済み"
+        "used": "使用済み",
+        "usedSteps": "{{count}}個のステップを使用",
+        "usedTools": "{{count}}個のツールを使用"
       },
       "actions": {
         "copy": {

backend/chainlit/translations/kn.json

@@ -100,7 +100,9 @@
     "messages": {
       "status": {
         "using": "ಬಳಸುತ್ತಿರುವುದು",
-        "used": "ಬಳಸಲಾಗಿದೆ"
+        "used": "ಬಳಸಲಾಗಿದೆ",
+        "usedSteps": "{{count}} ಹಂತಗಳನ್ನು ಬಳಸಲಾಗಿದೆ",
+        "usedTools": "{{count}} ಸಾಧನಗಳನ್ನು ಬಳಸಲಾಗಿದೆ"
       },
       "actions": {
         "copy": {

backend/chainlit/translations/ko.json

@@ -100,7 +100,9 @@
     "messages": {
       "status": {
         "using": "사용 중",
-        "used": "사용됨"
+        "used": "사용됨",
+        "usedSteps": "{{count}}개의 단계 사용됨",
+        "usedTools": "{{count}}개의 도구 사용됨"
       },
       "actions": {
         "copy": {

backend/chainlit/translations/ml.json

@@ -100,7 +100,9 @@
     "messages": {
       "status": {
         "using": "ഉപയോഗിക്കുന്നു",
-        "used": "ഉപയോഗിച്ചു"
+        "used": "ഉപയോഗിച്ചു",
+        "usedSteps": "{{count}} ഘട്ടങ്ങൾ ഉപയോഗിച്ചു",
+        "usedTools": "{{count}} ടൂളുകൾ ഉപയോഗിച്ചു"
       },
       "actions": {
         "copy": {

backend/chainlit/translations/mr.json

@@ -100,7 +100,9 @@
     "messages": {
       "status": {
         "using": "वापरत आहे",
-        "used": "वापरले"
+        "used": "वापरले",
+        "usedSteps": "{{count}} पायऱ्या वापरल्या",
+        "usedTools": "{{count}} साधने वापरली"
       },
       "actions": {
         "copy": {

backend/chainlit/translations/nl.json

@@ -100,7 +100,9 @@
     "messages": {
       "status": {
         "using": "In gebruik",
-        "used": "Gebruikt"
+        "used": "Gebruikt",
+        "usedSteps": "{{count}} stappen gebruikt",
+        "usedTools": "{{count}} hulpmiddelen gebruikt"
       },
       "actions": {
         "copy": {

backend/chainlit/translations/pt-PT.json

@@ -100,7 +100,9 @@
     "messages": {
       "status": {
         "using": "A utilizar",
-        "used": "Utilizado"
+        "used": "Utilizado",
+        "usedSteps": "{{count}} passos utilizados",
+        "usedTools": "{{count}} ferramentas utilizadas"
       },
       "actions": {
         "copy": {

backend/chainlit/translations/ta.json

@@ -100,7 +100,9 @@
     "messages": {
       "status": {
         "using": "பயன்படுத்துகிறது",
-        "used": "பயன்படுத்தப்பட்டது"
+        "used": "பயன்படுத்தப்பட்டது",
+        "usedSteps": "{{count}} படிகள் பயன்படுத்தப்பட்டன",
+        "usedTools": "{{count}} கருவிகள் பயன்படுத்தப்பட்டன"
       },
       "actions": {
         "copy": {

backend/chainlit/translations/te.json

@@ -100,7 +100,9 @@
     "messages": {
       "status": {
         "using": "ఉపయోగిస్తోంది",
-        "used": "ఉపయోగించబడింది"
+        "used": "ఉపయోగించబడింది",
+        "usedSteps": "{{count}} దశలు ఉపయోగించబడ్డాయి",
+        "usedTools": "{{count}} సాధనాలు ఉపయోగించబడ్డాయి"
       },
       "actions": {
         "copy": {

backend/chainlit/translations/zh-CN.json

@@ -100,7 +100,9 @@
     "messages": {
       "status": {
         "using": "使用中",
-        "used": "已使用"
+        "used": "已使用",
+        "usedSteps": "使用了 {{count}} 个步骤",
+        "usedTools": "使用了 {{count}} 个工具"
       },
       "actions": {
         "copy": {

backend/chainlit/translations/zh-TW.json

@@ -100,7 +100,9 @@
     "messages": {
       "status": {
         "using": "正在使用",
-        "used": "已使用"
+        "used": "已使用",
+        "usedSteps": "使用了 {{count}} 個步驟",
+        "usedTools": "使用了 {{count}} 個工具"
       },
       "actions": {
         "copy": {

cypress/e2e/compact_steps/.chainlit/config.toml

@@ -0,0 +1,14 @@
+[project]
+allow_origins = ["*"]
+
+[UI]
+name = "Assistant"
+
+# Show every step of the chain of thought.
+cot = "full"
+
+# Collapse the chain of thought steps into a single compact summary line.
+cot_display = "compact"
+
+[meta]
+generated_by = "2.11.1"

cypress/e2e/compact_steps/main.py

@@ -0,0 +1,68 @@
+import chainlit as cl
+
+
+@cl.step(type="tool", name="tool1")
+async def tool1():
+    return "Result from tool1"
+
+
+@cl.step(type="tool", name="tool2")
+async def tool2():
+    return "Result from tool2"
+
+
+@cl.step(type="tool", name="tool3")
+async def tool3():
+    return "Result from tool3"
+
+
+@cl.step(type="tool", name="tool_icon", icon="search")
+async def tool_icon():
+    return "Result from tool_icon"
+
+
+@cl.step(type="tool", name="agent")
+async def agent():
+    # Two tools nested under an intermediate step. Compact mode must count the
+    # nested steps recursively (not just top-level ones) to activate.
+    await tool1()
+    await tool2()
+    return "Result from agent"
+
+
+@cl.step(type="tool", name="answering-agent")
+async def answering_agent():
+    await tool1()
+    await tool2()
+    # Assistant message emitted from inside a nested step.
+    await cl.Message(content="Nested answer").send()
+
+
+@cl.on_message
+async def main(message: cl.Message):
+    content = message.content.strip().lower()
+
+    if content == "single":
+        # A single visible step must not be collapsed into a compact summary.
+        await tool1()
+    elif content == "nested":
+        # Only one top-level step, but it nests two tools -> 3 visible steps.
+        await agent()
+    elif content == "nested_message":
+        # An assistant message produced inside a nested step must still render
+        # at the root, not be trapped inside the collapsed compact summary.
+        await answering_agent()
+        return
+    elif content == "icon":
+        # The last visible step carries an icon, so the compact summary avatar
+        # must render that icon instead of a fallback avatar image.
+        await tool1()
+        await tool2()
+        await tool_icon()
+    else:
+        # Three sequential tools -> collapsed into one compact summary.
+        await tool1()
+        await tool2()
+        await tool3()
+
+    await cl.Message(content="Final answer").send()