Repository navigation
feat(studio): Update chat interface styling - #176
Merged
Merged
Conversation
Signed-off-by: Danielle Ali <44468613+dmariali@users.noreply.github.com>
show 'code' blocks with background, hide unnecessary action blocks, fix spacing (still needs some more work) Signed-off-by: Danielle Ali <44468613+dmariali@users.noreply.github.com>
Contributor
|
Note Reviews pausedIt 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 Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
📝 WalkthroughWalkthroughStructured assistant outputs (reasoning, text, tool-call) are extracted from Claude events, streamed into a part-aware runtime, stored as parts in history, and rendered by AssistantChatThread via pluggable reasoning and tool-call components; also adds unified code-surface classes and related tests and minor UI/routing tweaks. ChangesClaude Code structured message parts
Possibly related PRs
Suggested reviewers
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 inconclusive)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 4
🤖 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/AssistantChat/AssistantChatThread.tsx`:
- Around line 26-27: Replace the relative imports in AssistantChatThread.tsx
with the project's absolute alias paths: update the import statements that
currently reference '../Chat/ChatEmptyState' and '../Chat/MessageContent' to use
the `@nemo/common` alias (e.g., import { ChatEmptyState } from
'`@nemo/common/components/Chat/ChatEmptyState`' and import { MessageContent } from
'`@nemo/common/components/Chat/MessageContent`') so ChatEmptyState and
MessageContent are imported via the absolute alias as required by
web/**/*.{ts,tsx,js,jsx} guidelines.
- Around line 8-10: The imports for ReasoningMessagePartComponent,
TextMessagePartComponent, and ToolCallMessagePartComponent are type-only and
should use TypeScript's `import type` syntax; update the import statements in
AssistantChatThread.tsx to prefix these specific symbols with `import type` (or
convert the entire import to an `import type { ... } from '...'`) so the
compiler and bundler treat them as type-only imports.
- Around line 246-257: AssistantMessageWithReasoningPart and
UserMessageWithReasoningPart are currently declared inside the
AssistantChatThread render, causing new component identities each render; move
their definitions out of the render scope (declare them at module level) or
memoize them with useMemo/useCallback so they keep stable identity, and ensure
they still receive reasoningPartComponent and toolCallPartComponent (pass those
as props or capture them via stable refs) before assigning them to the
components prop where they are used.
In `@web/packages/studio/src/routes/agents/ClaudeCodeChatRoute/util.ts`:
- Around line 30-33: getAssistantMessagePart currently builds toolCallId from
only toolName and part index which can collide across different assistant
messages; update the toolCallId construction in getAssistantMessagePart (and the
analogous spots referenced around the same area) to include the message scope
(for example the parent assistant message's unique id or an
assistantMessageIndex) in the id string so it becomes unique per assistant
message (e.g., combine part.toolName + partIndex + assistantMessageId or
assistantMessageIndex). Locate the toolCallId assembly inside
getAssistantMessagePart and replace/augment it to include the message-level
identifier so every assistant message emits a distinct toolCallId.
🪄 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: bbe0b233-606c-4e12-b81a-7bd3bda06d3b
📒 Files selected for processing (22)
web/packages/common/src/components/AssistantChat/AssistantChatThread.tsxweb/packages/common/src/components/AssistantChat/index.spec.tsxweb/packages/common/src/components/Chat/MessageContent/index.spec.tsxweb/packages/common/src/components/Chat/MessageContent/index.tsxweb/packages/common/src/components/CodeDisplay/index.spec.tsxweb/packages/common/src/components/CodeDisplay/index.tsxweb/packages/common/src/components/MarkdownContent/MarkdownContent.spec.tsxweb/packages/common/src/components/MarkdownContent/components/CodeBlock.tsxweb/packages/studio/src/routes/agents/ClaudeCodeChatRoute/ClaudeCodeHistoryPanel.tsxweb/packages/studio/src/routes/agents/ClaudeCodeChatRoute/ClaudeCodeLayout.tsxweb/packages/studio/src/routes/agents/ClaudeCodeChatRoute/ClaudeCodeReasoningPart.spec.tsxweb/packages/studio/src/routes/agents/ClaudeCodeChatRoute/ClaudeCodeReasoningPart.tsxweb/packages/studio/src/routes/agents/ClaudeCodeChatRoute/ClaudeCodeToolCallPart.spec.tsxweb/packages/studio/src/routes/agents/ClaudeCodeChatRoute/ClaudeCodeToolCallPart.tsxweb/packages/studio/src/routes/agents/ClaudeCodeChatRoute/index.tsxweb/packages/studio/src/routes/agents/ClaudeCodeChatRoute/stream.spec.tsweb/packages/studio/src/routes/agents/ClaudeCodeChatRoute/stream.tsweb/packages/studio/src/routes/agents/ClaudeCodeChatRoute/toolParts.tsweb/packages/studio/src/routes/agents/ClaudeCodeChatRoute/useClaudeCodeChatRuntime.tsweb/packages/studio/src/routes/agents/ClaudeCodeChatRoute/useCustomAssistantChatRuntime.tsweb/packages/studio/src/routes/agents/ClaudeCodeChatRoute/util.spec.tsweb/packages/studio/src/routes/agents/ClaudeCodeChatRoute/util.ts
Contributor
|
Signed-off-by: Danielle Ali <44468613+dmariali@users.noreply.github.com>
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 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/studio/src/routes/DashboardLandingRoute/index.tsx`:
- Around line 98-103: The composer textarea currently suppresses keyboard focus
visibility by using "outline-none" and removing "focus-visible" outlines in both
the outer className and attributes.TextAreaElement; restore an accessible focus
indicator by removing the global outline-none and replacing it with a visible
focus style (e.g., a focus-visible ring or border) on the TextAreaElement so
keyboard users can see focus, or rely on the framework's default accessible
focus by deleting the focus-within:outline-none / focus-visible:outline-none
entries; target the className on the textarea and the attributes.TextAreaElement
to apply the change.
🪄 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: 52063695-e228-41ee-a646-69c4e0842562
📒 Files selected for processing (2)
web/packages/studio/src/routes/DashboardLandingRoute/index.tsxweb/packages/studio/src/routes/agents/ClaudeCodeChatRoute/ClaudeCodeHistoryPanel.tsx
Signed-off-by: Danielle Ali <44468613+dmariali@users.noreply.github.com>
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 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/AssistantChat/index.spec.tsx`:
- Line 19: Replace the relative import of AssistantChatThread in the test
(import { AssistantChatThread } from './AssistantChatThread') with the project's
configured absolute alias import; locate the import in AssistantChat
index.spec.tsx and update it to use the repository's alias-based path for
AssistantChatThread so it complies with the no-relative-import-paths lint rule.
🪄 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: 46c33870-c7fb-451e-b1d3-bb1abb4aa1a8
📒 Files selected for processing (3)
web/packages/common/src/components/AssistantChat/AssistantChatThread.tsxweb/packages/common/src/components/AssistantChat/index.spec.tsxweb/packages/studio/src/routes/agents/ClaudeCodeChatRoute/index.tsx
🚧 Files skipped from review as they are similar to previous changes (2)
- web/packages/studio/src/routes/agents/ClaudeCodeChatRoute/index.tsx
- web/packages/common/src/components/AssistantChat/AssistantChatThread.tsx
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>
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>
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
approved these changes
Jun 4, 2026
This was referenced Jun 10, 2026
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
2 participants
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 by CodeRabbit
New Features
UI Improvements
Tests