feat: Compact CoT display#2954
Open
RoyBA wants to merge 3 commits into
Open
Conversation
Add two new UI configuration options for controlling Chain of Thought step rendering: - `cot_display`: "list" (default, current behavior) or "compact" (collapses all steps into a single summary accordion line like "Using search_web" / "Used 5 tools") - `show_step_details`: boolean (default true). When false, steps render as flat labels without expandable input/output details. New CompactSteps component groups step-type children under one accordion with an animated "Using X" label while running and a "Used N steps/tools" summary when complete. Includes translations for all 23 supported languages.
- Add countVisibleSteps helper that walks the full step subtree, fixing compact mode not activating when tools are nested under intermediate agent/run steps (e.g. LangGraph, LangChain). - In CompactSteps, use collectVisible for recursive count/naming and pass all step-type children to <Messages> so existing skip logic drills through intermediates to reach tools. - Switch showUsing signal from isRunning to !hasAnswer (presence of assistant_message in subtree), preventing both the flash between sequential tools and the stale "Using" label during answer streaming.
RoyBA
requested review from
asvishnyakov,
hayescode and
sandangel
as code owners
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
2 issues found across 32 files
Reply with feedback, questions, or to request a fix.
Re-trigger cubic
…middelen' feat(ReadOnlyThread): add support for latex and dataPersistence features
dosubot
Bot
added
the
size:L
|
This PR is stale because it has been open for 14 days with no activity. |
github-actions
Bot
added
stale
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds two new
[UI]config options (cot_displayandshow_step_details) that give app developers control over how Chain of Thought steps are displayed in the chat interface.Motivation
When an agent uses many tools sequentially, the default "list" display creates a long vertical stack of individual step accordions. This can overwhelm users who only care about the final result. The new
compactmode provides a ChatGPT-style collapsible summary.New Config Options
Added to
.chainlit/config.tomlunder[UI]:cot_display"list"|"compact""list"list= current behavior (each step as its own accordion).compact= all steps collapsed into one summary line.show_step_detailstrue|falsetruefalse, steps render as flat labels without expandable input/output.Compact Mode Behavior
tool_callcot mode) when completeChanges
Backend:
config.py— Addedcot_displayandshow_step_detailstoUISettingsmodel + TOML templatetranslations/*.json— AddedusedStepsandusedToolskeys to all 23 language filesFrontend:
messageContext.ts/MessageContext.tsx— AddedcotDisplayandshowStepDetailsto contextMessagesContainer/index.tsx/ReadOnlyThread.tsx— Wire config values into contextMessages/index.tsx— Compact mode branching logic for CL_RUN_NAMES handlerMessages/CompactSteps.tsx— New component for compact step summaryMessages/Message/Step.tsx— RespectshowStepDetailsto render flat labelTypes:
libs/react-client/src/types/config.ts— Added TS types for new config fieldsTesting
listandcompactmodesBackward Compatibility
Both options default to the existing behavior (
list/true). No breaking changes — apps without these config keys behave identically to before..chainlit/translations/files will see lint warnings for the newusedSteps/usedToolskeys on startup. This only affects users who opt intocot_display = "compact". To pick up the new keys, delete the local.chainlit/translations/folder and restart — Chainlit will regenerate it from the updated source. This follows the same pattern as all prior translation additions in this project.Summary by cubic
Adds a compact Chain of Thought display with a toggle to hide step details, plus improved nested step counting and smoother “Using …” timing. This reduces chat clutter and lets apps control how tool runs are shown.
New Features
[UI]config:cot_display="list"|"compact"(default"list"),show_step_details=true|false(defaulttrue).cotDisplayandshowStepDetails; steps respectshowStepDetails;ReadOnlyThreadnow respectsfeatures.latexanddataPersistence.UISettingsadds fields; TS types updated; new i18n keysusedSteps/usedTools; DutchusedToolswording updated to “hulpmiddelen”.Migration
[UI]cot_display = "compact"(and optionallyshow_step_details = false) in.chainlit/config.toml..chainlit/translations/folder, delete it to regenerate and pick upusedSteps/usedTools.Written for commit b3983ed. Summary will update on new commits.