Skip to content

chore(studio): Chat Style update - #497

Merged
dmariali merged 6 commits into
mainfrom
chat-rendering-update
Jun 30, 2026
Merged

dmariali merged 6 commits into
mainfrom
chat-rendering-update

Conversation

@dmariali

@dmariali dmariali commented Jun 29, 2026 •

Copy link
Copy Markdown
Contributor

NOTE: I have a follow up commit to this specifically for the super long messages in coding agent which will collapse everything before and present a summary of what was done. The messages are long as heck, there's no getting around that. This is an attempt to make them more palatable.

Screenshot 2026-06-29 at 9 39 47 AM Screenshot 2026-06-29 at 1 23 28 PM Screenshot 2026-06-29 at 1 23 37 PM

Summary by CodeRabbit

Summary by CodeRabbit

  • New Features

    • Assistant chat can now resume after a pause within the same assistant message, keeping the continuation together.
    • Added support for rendering assistant messages that contain only tool-call content.
  • UI Improvements

    • Refreshed chat layout and density across assistant/user messages, composer spacing, action-row/button sizing, and markdown typography (headings, lists, paragraphs, blockquotes, images), including plaintext snippet styling.
    • Made CodeDisplay and subtle tool-call blocks slightly denser and more consistent.
  • Tests

    • Updated and expanded assertions to match the new visual spacing/typography behavior.

@dmariali
dmariali requested review from a team as code owners June 29, 2026 13:38
@github-actions github-actions Bot added the chore label Jun 29, 2026
Signed-off-by: Danielle Ali <44468613+dmariali@users.noreply.github.com>
@dmariali
dmariali force-pushed the chat-rendering-update branch from 7371a02 to 7b4eed3 Compare June 29, 2026 13:41
@coderabbitai

coderabbitai Bot commented Jun 29, 2026 •

Copy link
Copy Markdown
Contributor

Review Change Stack

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

  • @coderabbitai resume to resume automatic reviews.
  • @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

  • ▶️ Resume reviews
  • 🔍 Trigger review

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Enterprise

Run ID: a09095a0-0d2e-454b-8e8e-c3adfd86fd1f

📥 Commits

Reviewing files that changed from the base of the PR and between beb6f79 and b8179b1.

📒 Files selected for processing (2)
  • web/packages/studio/src/routes/agents/ClaudeCodeChatRoute/ClaudeCodeToolCallPart.test.tsx
  • web/packages/studio/src/routes/agents/ClaudeCodeChatRoute/toolCall/FileChangeToolCallCard.tsx
✅ Files skipped from review due to trivial changes (1)
  • web/packages/studio/src/routes/agents/ClaudeCodeChatRoute/toolCall/FileChangeToolCallCard.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
  • web/packages/studio/src/routes/agents/ClaudeCodeChatRoute/ClaudeCodeToolCallPart.test.tsx

📝 Walkthrough

Walkthrough

Updates chat styling, markdown/plaintext rendering, code and tool-call blocks, and Claude Code assistant resume behavior with runtime tests.

Changes

Chat UI restyling

Layer / File(s) Summary
Message shell and actions
web/packages/common/src/components/AssistantChat/AssistantMessage.tsx, web/packages/common/src/components/AssistantChat/UserMessage.tsx, web/packages/common/src/components/AssistantChat/UserEditComposer.tsx, web/packages/common/src/components/AssistantChat/messageActions.tsx, web/packages/common/src/components/AssistantChat/AssistantChatThread.tsx, web/packages/common/src/components/AssistantChat/index.test.tsx
Updates assistant and user message containers, thread spacing, composer styling, action button styling, and tool-only assistant message rendering.
Markdown and plaintext content
web/packages/common/src/components/Chat/MessageContent/markdownComponents.tsx, web/packages/common/src/components/Chat/MessageContent/MarkdownParagraph.tsx, web/packages/common/src/components/Chat/MessageContent/index.tsx, web/packages/common/src/components/Chat/MessageContent/index.test.tsx
Changes markdown heading/list/block styling and plaintext paragraph styling, with updated test assertions.
Code and tool blocks
web/packages/common/src/components/CodeDisplay/index.tsx, web/packages/common/src/components/CodeDisplay/index.test.tsx, web/packages/studio/src/routes/agents/ClaudeCodeChatRoute/toolCall/SubtleToolCallRow.tsx, web/packages/studio/src/routes/agents/ClaudeCodeChatRoute/ClaudeCodeToolCallPart.test.tsx, web/packages/studio/src/routes/agents/ClaudeCodeChatRoute/toolCall/FileChangeToolCallCard.tsx
Updates code display spacing and subtle tool-call/file-change block styling, with matching test assertions.

Assistant message resume logic

Layer / File(s) Summary
Resume assistant response
web/packages/studio/src/routes/agents/ClaudeCodeChatRoute/useCustomAssistantChatRuntime.ts, web/packages/studio/src/routes/agents/ClaudeCodeChatRoute/useCustomAssistantChatRuntime.test.ts
Adds assistant message part normalization, reuses the last completed assistant message on resume, and merges continued text into existing assistant content.

Possibly related PRs

Suggested reviewers

  • htolentino-nvidia
🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name Status Explanation Resolution
Title check ❓ Inconclusive The title is related to the PR, but it's too generic to convey the actual chat UI and message styling changes. Use a specific title like "chore(studio): update chat message and markdown styling".
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch chat-rendering-update

Comment @coderabbitai help to get the list of available commands.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In
`@web/packages/common/src/components/Chat/MessageContent/markdownComponents.tsx`:
- Around line 52-59: The list item styling change in the markdown components
still won’t affect the common list-item path because renderListItemChildren in
helpers.tsx wraps the first paragraph with its own leading-[160%]. Update that
helper alongside the li renderer in markdownComponents.tsx so the first
paragraph uses the same leading as the rest of the list item, keeping list
density consistent across both paths.

In
`@web/packages/studio/src/routes/agents/ClaudeCodeChatRoute/useCustomAssistantChatRuntime.ts`:
- Around line 204-223: The resumed assistant message flow in
useCustomAssistantChatRuntime should preserve existing parts when
setAssistantText() is called after resumeLastAssistantMessage() seeds
responseContent from the previous completed message. Update the setAssistantText
path to append or replace only the text portion of the current assistant content
instead of clearing responseContent, so earlier tool calls and prior assistant
text remain intact in the message transcript. Use the existing
resumeLastAssistantMessage(), setAssistantText(), responseContent, and
updateAssistantMessageContent() logic to keep resumed parts preserved.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Enterprise

Run ID: e0557e8b-bc6a-4c27-93ae-459f10f769e9

📥 Commits

Reviewing files that changed from the base of the PR and between a012393 and 7371a02.

📒 Files selected for processing (15)
  • web/packages/common/src/components/AssistantChat/AssistantChatThread.tsx
  • web/packages/common/src/components/AssistantChat/AssistantMessage.tsx
  • web/packages/common/src/components/AssistantChat/UserEditComposer.tsx
  • web/packages/common/src/components/AssistantChat/UserMessage.tsx
  • web/packages/common/src/components/AssistantChat/messageActions.tsx
  • web/packages/common/src/components/Chat/MessageContent/MarkdownParagraph.tsx
  • web/packages/common/src/components/Chat/MessageContent/index.test.tsx
  • web/packages/common/src/components/Chat/MessageContent/index.tsx
  • web/packages/common/src/components/Chat/MessageContent/markdownComponents.tsx
  • web/packages/common/src/components/CodeDisplay/index.test.tsx
  • web/packages/common/src/components/CodeDisplay/index.tsx
  • web/packages/studio/src/routes/agents/ClaudeCodeChatRoute/ClaudeCodeToolCallPart.test.tsx
  • web/packages/studio/src/routes/agents/ClaudeCodeChatRoute/toolCall/SubtleToolCallRow.tsx
  • web/packages/studio/src/routes/agents/ClaudeCodeChatRoute/useCustomAssistantChatRuntime.test.ts
  • web/packages/studio/src/routes/agents/ClaudeCodeChatRoute/useCustomAssistantChatRuntime.ts

@github-actions

github-actions Bot commented Jun 29, 2026 •

Copy link
Copy Markdown
Contributor
Suite Lines Covered Line Rate Branch Rate
Unit Tests 21917/28725 76.3% 61.0%
Integration Tests 12583/27405 45.9% 19.2%

dmariali added 4 commits June 29, 2026 10:49
Signed-off-by: Danielle Ali <44468613+dmariali@users.noreply.github.com>
Signed-off-by: Danielle Ali <44468613+dmariali@users.noreply.github.com>
Signed-off-by: Danielle Ali <44468613+dmariali@users.noreply.github.com>

@htolentino-nvidia htolentino-nvidia left a comment •

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, one quick question, the messages look a lot like the Notification component from KUI (with the border-left nvidia green), I wonder if we could use that. Not a blocker though

@dmariali
dmariali added this pull request to the merge queue Jun 30, 2026
Merged via the queue into main with commit 3f25b9a Jun 30, 2026
54 checks passed
@dmariali
dmariali deleted the chat-rendering-update branch June 30, 2026 20:13
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants