Skip to content

Fixes #216,Add collapsible Reasoning panel for assistant messages - #221

Open
山丘 (LAF523) wants to merge 2 commits into
langchain-ai:mainfrom
LAF523:feat/reasoning-panel
Open

Fixes #216,Add collapsible Reasoning panel for assistant messages#221
山丘 (LAF523) wants to merge 2 commits into
langchain-ai:mainfrom
LAF523:feat/reasoning-panel

Conversation

@LAF523

Copy link
Copy Markdown

Title

Add optional “Reasoning” panel for AI messages

Summary

This PR introduces a collapsible “Reasoning” panel for assistant messages. When a model/provider returns reasoning/thinking text (as metadata or content blocks), the UI can display it in a lightweight component without affecting the main message rendering.

Related

Fixes #216

What’s included

  • A new Reasoning message component:
    • Collapsible panel UI aligned with existing styling tokens
    • Streaming-friendly header state with a left-to-right shimmer while content is updating
    • Allows users to pin the panel open by manually expanding it
  • A small helper to extract reasoning text from common message shapes (best-effort)
  • Global CSS utility for the shimmer animation
  • Wiring in AssistantMessage (ai.tsx) to render the panel when reasoning is present

Demo

PixPin_2026-01-09_23-50-28

Component docs

<Reasoning />

Props

  • content: string
    The reasoning text to display.
  • defaultExpanded?: boolean (default: false)
    Whether the panel starts expanded.
  • enabled?: boolean (default: true)
    Whether the panel is allowed to render at all.

Behavior

  • Returns null when enabled is false or content is empty.
  • Auto-expands while content is updating (streaming-like behavior).
  • When updates stop, it can auto-collapse unless the user pinned it open.

Usage

const thinkingText = getThinkingText(message);

{thinkingText && (
  <Reasoning
    content={thinkingText}
    defaultExpanded={true}
    enabled={true}
  />
)}

Notes

  • This feature is additive and does not change existing message rendering when reasoning is absent.

@vercel

vercel Bot commented Jan 9, 2026

Copy link
Copy Markdown

Someone is attempting to deploy a commit to the LangChain Team on Vercel.

A member of the Team first needs to authorize it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

agent-chat-ui cannot display reasoning content

1 participant