Skip to content

feat(chat): show real-time AI thinking steps inline while chatting#13360

Merged
hazemadelkhalel merged 3 commits into
mainfrom
feat/chat-thinking-ui-revamp
May 23, 2026
Merged

feat(chat): show real-time AI thinking steps inline while chatting#13360
hazemadelkhalel merged 3 commits into
mainfrom
feat/chat-thinking-ui-revamp

Conversation

@hazemadelkhalel
Copy link
Copy Markdown
Collaborator

Summary

  • Replace side panel thinking details with inline accordion matching Attio's UX
  • During streaming: show latest thinking step with shimmer animation, fading between steps
  • After completion: collapsible "Thought for X seconds" with full timeline (reasoning + tool calls + Done marker)
  • Add ap_update_thinking_status tool for AI to announce steps in real-time
  • Tool calls render as compact pill cards with piece icons and expandable JSON viewer
  • Track and persist thinkingDurationMs for accurate duration on reload
  • Consolidate duplicated utilities (deriveToolStatus, extractToolOutputText, extractPieceNames) into chatPartUtils

Test plan

  • Send a chat message that triggers tool calls — verify current step appears below "Thinking..." with shimmer
  • After completion, verify "Thought for X seconds" label
  • Click accordion to expand — verify full timeline with reasoning, thinking status, tool cards, and Done marker
  • Verify tool cards show piece icons (Gmail, Slack, etc.) when pieces are involved
  • Reload the page — verify historical conversations reconstruct the accordion correctly
  • Verify old conversations without THINKING_STATUS parts render gracefully
  • Verify side panel is gone, bottom bar always visible

… progress

Replace the side panel thinking details with an inline accordion experience matching Attio's UX:

- During streaming: show the latest thinking step outside the accordion with shimmer animation
- After completion: collapsible "Thought for X seconds" with full timeline inside
- Add ap_update_thinking_status tool for AI to announce steps in real-time
- Show tool calls as compact pill cards with piece icons and expandable JSON
- Track and persist thinkingDurationMs for accurate duration display on reload
- Consolidate duplicated utilities (deriveToolStatus, extractToolOutputText) into chatPartUtils
@hazemadelkhalel hazemadelkhalel added the 🌟 feature new major feature label May 23, 2026
@hazemadelkhalel hazemadelkhalel self-assigned this May 23, 2026
@hazemadelkhalel hazemadelkhalel added ✨ polishing and removed 🌟 feature new major feature labels May 23, 2026
@greptile-apps
Copy link
Copy Markdown
Contributor

greptile-apps Bot commented May 23, 2026

Confidence Score: 4/5

The chat feature's logic changes are well-contained and backwards-compatible; the main gap is that the feature documentation was not updated to reflect the deleted panel, removed store state, and new thinking tool.

The code changes themselves are clean and additive — new part type, new tool, inline UI replacing the old side panel — and historical conversations reconstruct correctly. The missing update to .agents/features/chat.md is the only blocking gap: the doc still references the deleted thinking-details-panel.tsx, the old thinking panel store state, and omits ap_update_thinking_status from the tool inventory.

packages/web/src/app/routes/chat-with-ai/components/activity-accordion.tsx has the most new logic (streaming step renderer, tool cards, duration label) and warrants a careful manual test. The feature doc .agents/features/chat.md needs updating before merge.

Important Files Changed

Filename Overview
packages/web/src/app/routes/chat-with-ai/components/activity-accordion.tsx Major rewrite replacing the old simple button with a full inline accordion showing streaming thinking steps, a Done marker, and expandable tool cards with piece icons and JSON viewers.
packages/shared/src/lib/ee/chat/index.ts Adds THINKING_STATUS part type with Zod schema, thinkingDurationMs optional field on messages, and ap_update_thinking_status to ChatToolOutputs; all are additive/backwards-compatible.
packages/web/src/features/chat/lib/chat-types.ts Adds ThinkingStep union type, ToolStatus, isThinkingStatusTool, and consolidates deriveToolStatus/extractToolOutputText/extractPieceNames into chatPartUtils.
packages/web/src/features/chat/lib/chat-utils.ts Adds THINKING_STATUS case in persistedPartToUIPart, reconstructing it as a synthetic dynamic-tool part with a part-index-based toolCallId; correctly spreads thinkingDurationMs onto historical messages.
packages/server/worker/src/lib/execute/jobs/ee/chat/execute-chat-agent.ts Captures thinkingStartTime before streaming and attaches thinkingDurationMs to both in-progress and final saves; correctly includes thinkingTools in the tool set.
packages/web/src/app/routes/chat-with-ai/ai-chat-box.tsx Removes the side-panel ThinkingDetailsPanel and the conditional AnimatePresence toggle; ChatBottomBar is now always rendered unconditionally.
packages/web/src/features/chat/lib/chat-store.ts Removes thinkingPanelMessageId state and openThinkingDetails/closeThinkingPanel actions, which are no longer needed with inline thinking steps.

Reviews (2): Last reviewed commit: "fix(chat): resolve PR review comments" | Re-trigger Greptile

Comment thread packages/web/src/app/routes/chat-with-ai/components/activity-accordion.tsx Outdated
Comment thread packages/web/src/features/chat/lib/chat-types.ts
- Remove dead thinkingToolParts array from AssistantMessage useMemo
- Fix mutation of memoized object (use spread instead of direct assignment)
- Replace humanizeToolName with existing formatToolActionName
- Use StepLayout in ToolStep instead of duplicating DOM structure
- Memoize pieceNames in ToolCard to avoid invalidating usePieceSummariesByNames
- Add xxs (16px) size variant to PieceIcon for compact tool cards
@hazemadelkhalel hazemadelkhalel changed the title feat(chat): revamp thinking UI with inline accordion feat(chat): show real-time AI thinking steps inline while chatting May 23, 2026
- Remove detailsOpen guard on CollapsibleContent so close animation runs
- Remove THINKING_STATUS_TOOL_NAME from HIDDEN_TOOL_NAMES (unreachable dead code)
@hazemadelkhalel hazemadelkhalel merged commit 2339e1e into main May 23, 2026
14 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant