feat(theme): fix message paragraph gap and toolcall block #1031

deepinfect · 2025-10-19T14:20:17Z

new toolcall ui

Summary by CodeRabbit

New Features
- Enhanced message content rendering with improved handling of thinking blocks, artifacts, and tool calls for clearer visual organization.
Bug Fixes
- Fixed minimap interaction handling to properly enable/disable click and hover events.
Style
- Adjusted padding and height spacing across multiple components for improved visual consistency.
- Refined typography spacing and margins for better readability in content blocks.

coderabbitai · 2025-10-19T14:20:38Z

Walkthrough

This PR applies styling refinements and component structure adjustments across multiple message renderer components. Changes include padding and height modifications via utility classes, CSS margin rules for prose elements, a rework of message content rendering with conditional blocks for different content types (thinking, artifact, tool_call), simplified tool call headers using computed properties, spacing adjustments, pointer-events behavior modifications, and explicit margin rules for typography.

Changes

Cohort / File(s)	Change Summary
Padding and Height Adjustments `src/renderer/src/components/SearchStatusIndicator.vue`, `src/renderer/src/components/message/MessageItemAssistant.vue`	Replaced px-2 with py-1.5 and added min-h-7; removed scoped style block for min-height and padding. Changed spacing class from space-y-2 to gap-1.5 in else branch.
Margin and Spacing Styles `src/renderer/src/components/markdown/MarkdownRenderer.vue`, `src/renderer/src/components/think-content/ThinkContent.vue`	Added @apply my-0 to paragraph elements within .prose container. Removed mt-[6px] from NodeRenderer wrapper and added explicit margin rules for prose elements (.think-prose p, ul, li).
Message Content Rendering Refactor `src/renderer/src/components/message/MessageBlockContent.vue`	Replaced single container with direct v-for iteration over processedContent; introduced conditional blocks for part.type (text, thinking, artifact, tool_call). Added loading prop to MarkdownRenderer; renders ArtifactThinking, ArtifactPreview, and ToolCallPreview conditionally. Removed outer div wrapper and associated ref.
Tool Call UI Simplification `src/renderer/src/components/message/MessageBlockToolCall.vue`	Replaced multi-part header with simplified inline icon and label row. Introduced computed properties (statusVariant, primaryLabel, functionLabel, statusIconName, statusIconClass) for compact header rendering. Replaced conditional status logic with computed icon determination.
Interaction Layer Changes `src/renderer/src/components/message/MessageMinimap.vue`	Changed outer container from pointer-events-auto to pointer-events-none; inner bar container explicitly enables pointer-events-auto, affecting interactive hit-testing on minimap.

Sequence Diagram(s)

sequenceDiagram
    participant Template as MessageBlockContent Template
    participant Store as ArtifactStore
    participant Children as Child Components
    
    rect rgb(230, 245, 255)
    Note over Template: New Conditional Rendering
    end
    
    loop For each part in processedContent
        alt part.type === 'text'
            Template->>Children: Render MarkdownRenderer<br/>(with :loading prop)
        else part.type === 'thinking'
            Template->>Children: Render ArtifactThinking<br/>(when part.loading)
        else part.type === 'artifact'
            Template->>Children: Render ArtifactPreview<br/>(with block, messageId, threadId)
        else part.type === 'tool_call'
            Template->>Children: Render ToolCallPreview<br/>(with block, block-status)
        end
    end
    
    rect rgb(245, 245, 245)
    Note over Template,Store: Watch on processedContent<br/>maintains artifact interactions
    end

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

The changes span 7 files with mixed complexity: most are straightforward utility class and CSS rule updates (trivial), but MessageBlockContent.vue and MessageBlockToolCall.vue involve significant structural refactoring with new computed properties and conditional rendering logic that requires separate reasoning per component.

Possibly related PRs

bugfix: think content scroll issue #1023: Modifies ThinkContent.vue with adjustments to layout and styles, directly overlapping with this PR's changes to the same file.
feat(uikit): add new think content block #947: Updates MessageBlockThink and ThinkContent component integration and styling, related to this PR's ThinkContent.vue modifications.
feat(ui): new design tokens #969: Modifies MessageBlockToolCall.vue and other UI components for design-token and style updates, directly related to the tool call UI simplification in this PR.

Suggested reviewers

zerob13

Poem

🐰 A rabbit's musing on the UI refresh...

Margins aligned and paddings tight,
Prose containers gleaming bright,
Tool calls trimmed to sleek delight,
Conditional rendering paths take flight,
Content flows through day and night! ✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The PR title "feat(theme): fix message paragraph gap and toolcall block" is partially related to the changeset. It accurately references real components of the changes, specifically the toolcall block UI refactor in MessageBlockToolCall.vue and the paragraph margin adjustments in MarkdownRenderer.vue and ThinkContent.vue. However, the title frames these primarily as theme/styling changes when the PR also includes significant structural refactoring, most notably the major rework of MessageBlockContent.vue that introduces new conditional rendering logic for different content types. The title captures only a subset of the changes and doesn't fully represent the broader scope, though it does correctly identify genuine aspects of the PR.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

✨ Finishing touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch feat/message-ui-refactor

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

zerob13 · 2025-10-19T14:22:05Z

@codex review

chatgpt-codex-connector · 2025-10-19T14:25:10Z

Codex Review: Didn't find any major issues. 👍

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

coderabbitai

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

src/renderer/src/components/message/MessageItemAssistant.vue (1)
259-259: Use English for log messages and avoid hardcoded user-facing strings.

Line 259 contains a Chinese error message '创建对话分支失败'. Per coding guidelines, all logs and comments must use English. Additionally, if this is displayed to users, it should use i18n rather than a hardcoded string.

Apply this diff to fix the issue:
- console.error('创建对话分支失败:', error)
+ console.error('Failed to create conversation branch:', error)
If this error message is user-facing, consider adding an i18n key and notification instead of just logging.

🧹 Nitpick comments (7)

src/renderer/src/components/message/MessageBlockToolCall.vue (4)

11-12: Avoid trailing dot when function name is empty.

Render the dot only when functionLabel is present.

-        <span class="truncate text-xs">{{ primaryLabel }}.{{ functionLabel }}</span>
+        <span class="truncate text-xs">
+          {{ primaryLabel }}<template v-if="functionLabel">.{{ functionLabel }}</template>
+        </span>

65-85: i18n fallback should not hardcode user-visible strings; also use English comments.

Per guidelines, avoid hardcoded UI text and keep comments/logs in English. Return the key as fallback (or a minimal English map), and update comments.

-// 创建一个安全的翻译函数
+// Safe translation function with fallback (returns key when i18n is unavailable)
 const t = (() => {
   try {
     const { t } = useI18n()
     return t
   } catch (e) {
-    // 如果 i18n 未初始化，提供默认翻译
-    return (key: string) => {
-      if (key === 'toolCall.calling') return '工具调用中'
-      if (key === 'toolCall.response') return '工具响应'
-      if (key === 'toolCall.end') return '工具调用完成'
-      if (key === 'toolCall.error') return '工具调用错误'
-      if (key === 'toolCall.title') return '工具调用'
-      if (key === 'toolCall.clickToView') return '点击查看详情'
-      if (key === 'toolCall.functionName') return '函数名称'
-      if (key === 'toolCall.params') return '参数'
-      if (key === 'toolCall.responseData') return '响应数据'
-      return key
-    }
+    // If i18n is not initialized, return the key so UI strings are not hardcoded
+    return (key: string) => key
   }
 })()

[ suggest_recommended_refactor ]

4-13: Prefer button semantics for disclosure; add ARIA for accessibility.

Use a button (or add ARIA) for keyboard and screen reader support.

-    <div
-      class="w-fit min-h-7 py-1.5 flex bg-accent hover:bg-accent/40 border rounded-lg flex-wrap items-center gap-2 px-2 text-xs leading-4 transition-colors duration-150 select-none cursor-pointer"
-      @click="toggleExpanded"
-    >
+    <button
+      type="button"
+      class="w-fit min-h-7 py-1.5 flex bg-accent hover:bg-accent/40 border rounded-lg flex-wrap items-center gap-2 px-2 text-xs leading-4 transition-colors duration-150 select-none cursor-pointer"
+      @click="toggleExpanded"
+      :aria-expanded="isExpanded"
+      aria-controls="toolcall-details"
+    >
 ...
-    </div>
+    </button>

Also add id="toolcall-details" on the expandable container:

-      <div
-        v-if="isExpanded"
-        class="rounded-lg border bg-muted text-card-foreground px-2 py-3 mt-2 mb-4"
-      >
+      <div
+        v-if="isExpanded"
+        id="toolcall-details"
+        class="rounded-lg border bg-muted text-card-foreground px-2 py-3 mt-2 mb-4"
+      >

178-183: Dead CSS: .message-tool-call is unused.

Either add the class to the header, or remove this block. Given you already use min-h-7 py-1.5, removal is cleaner.

- .message-tool-call {
-   min-height: 28px;
-   padding-top: 6px;
-   padding-bottom: 6px;
- }

src/renderer/src/components/SearchStatusIndicator.vue (2)

56-59: Localize the default label via i18n.

To meet i18n guidelines, treat label as an i18n key and translate in-component, falling back to the key.

 <script setup lang="ts">
 import { Icon } from '@iconify/vue'
-import { computed } from 'vue'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 
+const { t } = useI18n()
 const props = withDefaults(
   defineProps<{
     status:
@@
     interactive?: boolean
   }>(),
   {
-    label: 'web_search',
+    // default i18n key
+    label: 'web_search',
     favicons: () => [],
     interactive: false
   }
 )
@@
+const translatedLabel = computed(() => t(props.label))

And in template:

-      <span class="font-mono font-medium tracking-tight text-foreground/80 truncate leading-none">
-        {{ label }}
+      <span class="font-mono font-medium tracking-tight text-foreground/80 truncate leading-none">
+        {{ translatedLabel }}
       </span>

94-104: Consider consistent “running” visuals across components.

Here, “running” uses emerald color; MessageBlockToolCall uses muted + animate-pulse. Unifying improves UX. Optional.

-    default:
-      return 'text-emerald-500'
+    default:
+      return 'text-muted-foreground animate-pulse'

src/renderer/src/components/message/MessageBlockContent.vue (1)

3-4: Use stable keys instead of array index.

Index keys can cause reuse bugs during dynamic updates.
-  <template v-for="(part, index) in processedContent" :key="index">
+  <template v-for="(part, index) in processedContent" :key="part.id ?? `${part.type}-${index}`">

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between b3e5e93 and d2f74ca.

📒 Files selected for processing (7)

src/renderer/src/components/SearchStatusIndicator.vue (1 hunks)
src/renderer/src/components/markdown/MarkdownRenderer.vue (1 hunks)
src/renderer/src/components/message/MessageBlockContent.vue (1 hunks)
src/renderer/src/components/message/MessageBlockToolCall.vue (4 hunks)
src/renderer/src/components/message/MessageItemAssistant.vue (1 hunks)
src/renderer/src/components/message/MessageMinimap.vue (1 hunks)
src/renderer/src/components/think-content/ThinkContent.vue (2 hunks)

🧰 Additional context used

📓 Path-based instructions (16)

src/renderer/src/**/*

📄 CodeRabbit inference engine (.cursor/rules/i18n.mdc)

src/renderer/src/**/*: All user-facing strings must use i18n keys (avoid hardcoded user-visible text in code)
Use the 'vue-i18n' framework for all internationalization in the renderer
Ensure all user-visible text in the renderer uses the translation system

Files:

src/renderer/src/components/SearchStatusIndicator.vue
src/renderer/src/components/markdown/MarkdownRenderer.vue
src/renderer/src/components/message/MessageItemAssistant.vue
src/renderer/src/components/think-content/ThinkContent.vue
src/renderer/src/components/message/MessageBlockToolCall.vue
src/renderer/src/components/message/MessageBlockContent.vue
src/renderer/src/components/message/MessageMinimap.vue

src/renderer/**/*.{vue,ts,js,tsx,jsx}

📄 CodeRabbit inference engine (.cursor/rules/project-structure.mdc)

渲染进程代码放在 src/renderer

Files:

src/renderer/src/components/SearchStatusIndicator.vue
src/renderer/src/components/markdown/MarkdownRenderer.vue
src/renderer/src/components/message/MessageItemAssistant.vue
src/renderer/src/components/think-content/ThinkContent.vue
src/renderer/src/components/message/MessageBlockToolCall.vue
src/renderer/src/components/message/MessageBlockContent.vue
src/renderer/src/components/message/MessageMinimap.vue

src/renderer/src/**/*.{vue,ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.cursor/rules/vue-best-practices.mdc)

src/renderer/src/**/*.{vue,ts,tsx,js,jsx}: Use the Composition API for better code organization and reusability
Implement proper state management with Pinia
Utilize Vue Router for navigation and route management
Leverage Vue's built-in reactivity system for efficient data handling

Files:

src/renderer/src/components/SearchStatusIndicator.vue
src/renderer/src/components/markdown/MarkdownRenderer.vue
src/renderer/src/components/message/MessageItemAssistant.vue
src/renderer/src/components/think-content/ThinkContent.vue
src/renderer/src/components/message/MessageBlockToolCall.vue
src/renderer/src/components/message/MessageBlockContent.vue
src/renderer/src/components/message/MessageMinimap.vue

src/renderer/src/**/*.vue

📄 CodeRabbit inference engine (.cursor/rules/vue-best-practices.mdc)

Use scoped styles to prevent CSS conflicts between components

Files:

src/renderer/src/components/SearchStatusIndicator.vue
src/renderer/src/components/markdown/MarkdownRenderer.vue
src/renderer/src/components/message/MessageItemAssistant.vue
src/renderer/src/components/think-content/ThinkContent.vue
src/renderer/src/components/message/MessageBlockToolCall.vue
src/renderer/src/components/message/MessageBlockContent.vue
src/renderer/src/components/message/MessageMinimap.vue

src/renderer/**/*.{ts,tsx,vue}

📄 CodeRabbit inference engine (.cursor/rules/vue-shadcn.mdc)

src/renderer/**/*.{ts,tsx,vue}: Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError).
Use TypeScript for all code; prefer types over interfaces.
Avoid enums; use const objects instead.
Use arrow functions for methods and computed properties.
Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements.

Files:

src/renderer/src/components/SearchStatusIndicator.vue
src/renderer/src/components/markdown/MarkdownRenderer.vue
src/renderer/src/components/message/MessageItemAssistant.vue
src/renderer/src/components/think-content/ThinkContent.vue
src/renderer/src/components/message/MessageBlockToolCall.vue
src/renderer/src/components/message/MessageBlockContent.vue
src/renderer/src/components/message/MessageMinimap.vue

src/renderer/**/*.{vue,ts}

📄 CodeRabbit inference engine (.cursor/rules/vue-shadcn.mdc)

Implement lazy loading for routes and components.

Files:

src/renderer/src/components/SearchStatusIndicator.vue
src/renderer/src/components/markdown/MarkdownRenderer.vue
src/renderer/src/components/message/MessageItemAssistant.vue
src/renderer/src/components/think-content/ThinkContent.vue
src/renderer/src/components/message/MessageBlockToolCall.vue
src/renderer/src/components/message/MessageBlockContent.vue
src/renderer/src/components/message/MessageMinimap.vue

src/renderer/**/*.{ts,vue}

📄 CodeRabbit inference engine (.cursor/rules/vue-shadcn.mdc)

src/renderer/**/*.{ts,vue}: Use useFetch and useAsyncData for data fetching.
Implement SEO best practices using Nuxt's useHead and useSeoMeta.

Use Pinia for frontend state management (do not introduce alternative state libraries)

Files:

src/renderer/src/components/SearchStatusIndicator.vue
src/renderer/src/components/markdown/MarkdownRenderer.vue
src/renderer/src/components/message/MessageItemAssistant.vue
src/renderer/src/components/think-content/ThinkContent.vue
src/renderer/src/components/message/MessageBlockToolCall.vue
src/renderer/src/components/message/MessageBlockContent.vue
src/renderer/src/components/message/MessageMinimap.vue

**/*.{ts,tsx,js,vue}

📄 CodeRabbit inference engine (CLAUDE.md)

Use English for all logs and comments

Files:

src/renderer/src/components/SearchStatusIndicator.vue
src/renderer/src/components/markdown/MarkdownRenderer.vue
src/renderer/src/components/message/MessageItemAssistant.vue
src/renderer/src/components/think-content/ThinkContent.vue
src/renderer/src/components/message/MessageBlockToolCall.vue
src/renderer/src/components/message/MessageBlockContent.vue
src/renderer/src/components/message/MessageMinimap.vue

**/*.{ts,tsx,vue}

📄 CodeRabbit inference engine (CLAUDE.md)

Enable and adhere to strict TypeScript typing (avoid implicit any, prefer precise types)

Use PascalCase for TypeScript types and classes

Files:

src/renderer/src/components/SearchStatusIndicator.vue
src/renderer/src/components/markdown/MarkdownRenderer.vue
src/renderer/src/components/message/MessageItemAssistant.vue
src/renderer/src/components/think-content/ThinkContent.vue
src/renderer/src/components/message/MessageBlockToolCall.vue
src/renderer/src/components/message/MessageBlockContent.vue
src/renderer/src/components/message/MessageMinimap.vue

src/renderer/{src,shell,floating}/**/*.vue

📄 CodeRabbit inference engine (CLAUDE.md)

src/renderer/{src,shell,floating}/**/*.vue: Use Vue 3 Composition API for all components
All user-facing strings must use i18n keys via vue-i18n (no hard-coded UI strings)
Use Tailwind CSS utilities and ensure styles are scoped in Vue components

Files:

src/renderer/src/components/SearchStatusIndicator.vue
src/renderer/src/components/markdown/MarkdownRenderer.vue
src/renderer/src/components/message/MessageItemAssistant.vue
src/renderer/src/components/think-content/ThinkContent.vue
src/renderer/src/components/message/MessageBlockToolCall.vue
src/renderer/src/components/message/MessageBlockContent.vue
src/renderer/src/components/message/MessageMinimap.vue

src/renderer/src/components/**/*

📄 CodeRabbit inference engine (CLAUDE.md)

Organize UI components by feature within src/renderer/src/

Files:

src/renderer/src/components/SearchStatusIndicator.vue
src/renderer/src/components/markdown/MarkdownRenderer.vue
src/renderer/src/components/message/MessageItemAssistant.vue
src/renderer/src/components/think-content/ThinkContent.vue
src/renderer/src/components/message/MessageBlockToolCall.vue
src/renderer/src/components/message/MessageBlockContent.vue
src/renderer/src/components/message/MessageMinimap.vue

src/renderer/src/**