UI/refactor #977
UI/refactor #977
Conversation
|
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. WalkthroughReclassifies dayjs as a devDependency. Adjusts tab view height. Updates window chrome and broadcasts WINDOW_EVENTS to renderer. Consolidates renderer event constants. Introduces/updates window control icons and AppBar/UI chrome. Broad theme/token CSS overhaul. Tweaks message list/minimap interactions and transitions. Simplifies PromptInput styling. Minor view/component class changes. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor User as User
participant OS as OS Window
participant Main as Main Process (WindowPresenter)
participant Renderer as Renderer (App/AppBar)
User->>OS: Click window control (maximize/unmaximize/fullscreen/restore)
OS-->>Main: Emit BrowserWindow event
rect rgba(200,220,255,0.25)
note right of Main: New/updated behavior
Main->>Renderer: webContents.send(WINDOW_EVENTS.X)
Main->>Main: (Existing) eventBus notify
end
Renderer->>Renderer: Update UI state (AppBar buttons, drag regions)
Renderer-->>User: Window chrome/state reflects change
sequenceDiagram
participant Renderer as Renderer (AppBar)
participant Main as Main Process
Renderer->>Main: IPC (e.g., maximize / unmaximize)
Main-->>Renderer: WINDOW_EVENTS (confirmation/state change)
Renderer->>Renderer: Toggle appropriate control states
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 inconclusive)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
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. Comment |
|
@codex review |
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
ℹ️ 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
There was a problem hiding this comment.
Actionable comments posted: 5
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (3)
src/renderer/src/components/prompt-input/PromptInput.vue (1)
804-804: Replace Chinese comments and logs with English.Several comments and error messages use Chinese text, violating the coding guideline: "Use English for all logs and comments". This affects code maintainability for international contributors.
As per coding guidelines.
Examples to translate:
- Line 804:
// 处理图片文件→// Process image files- Line 833:
// 处理其他类型的文件→// Process other file types- Line 844:
'文件处理失败:'→'File processing failed:'- Line 869:
'文件准备失败:'→'File preparation failed:'- Line 941:
'读取资源失败:'→'Failed to read resource:'- Line 1245:
'文件准备失败:'→'File preparation failed:'- Line 1636:
'恢复焦点时出错:'→'Error restoring focus:'Apply this pattern to all Chinese text in comments and logs.
Also applies to: 833-833, 844-844, 869-869, 941-941, 1245-1245, 1636-1636
src/renderer/src/views/ChatTabView.vue (1)
91-91: Use i18n key for user-facing string.The hardcoded string 'New Chat' violates the coding guideline requiring all user-facing strings to use i18n keys.
As per coding guidelines, apply this diff:
- title.value = 'New Chat' + title.value = t('common.newChat') // or appropriate i18n keyNote: You'll need to import
useI18nif not already present:import { useI18n } from 'vue-i18n' const { t } = useI18n()src/renderer/shell/components/AppBar.vue (1)
544-549: Restore button currently re-maximizes instead of unmaximizingWhen
isMaximizedis true we render the restore icon, but clicking it still callswindowPresenter.maximize(id). In Electron this is a no-op on an already-maximized window, so users can’t actually restore. Please branch onisMaximizedand call the unmaximize/restore presenter method when needed.const toggleMaximize = () => { const id = window.api.getWindowId() - if (id != null) { - windowPresenter.maximize(id) - } + if (id == null) return + if (isMaximized.value) { + windowPresenter.unmaximize?.(id) ?? windowPresenter.restore?.(id) + } else { + windowPresenter.maximize(id) + } }
♻️ Duplicate comments (1)
src/main/presenter/windowPresenter/index.ts (1)
756-765: Verify window state synchronization on restore.A previous review flagged that the restore handler (line 763) unconditionally sends
WINDOW_UNMAXIMIZEDto the renderer. The developer responded that "electron's window unmaximize event = restored," but this may not accurately reflect all restore scenarios.Verify that the window state remains synchronized with the renderer UI in these scenarios:
- Minimize a maximized window → Restore it (should remain maximized)
- Minimize a normal window → Restore it (should remain normal)
Consider checking
shellWindow.isMaximized()before sending the event:const handleRestore = async () => { console.log(`Window ${windowId} restored.`) this.handleWindowRestore(windowId).catch((error) => { console.error(`Error handling restore logic for window ${windowId}:`, error) }) this.focusActiveTab(windowId, 'restore') // Send appropriate state based on actual window state if (shellWindow.isMaximized()) { shellWindow.webContents.send(WINDOW_EVENTS.WINDOW_MAXIMIZED) } else { shellWindow.webContents.send(WINDOW_EVENTS.WINDOW_UNMAXIMIZED) } eventBus.sendToMain(WINDOW_EVENTS.WINDOW_RESTORED, windowId) }Run this script to verify the window state handling:
#!/bin/bash # Check if there are other restore/unmaximize event handlers rg -n "unmaximize|restore" --type=ts src/renderer --type=ts | grep -i "event\|handler"
🧹 Nitpick comments (8)
src/renderer/src/components/SearchStatusIndicator.vue (1)
74-74: Remove extra space for consistency.There are two spaces between
bg-mutedandtext-muted-foreground.Apply this diff:
- return 'border-border/50 bg-muted text-muted-foreground' + return 'border-border/50 bg-muted text-muted-foreground'src/renderer/src/components/message/MessageMinimap.vue (1)
12-33: Extract hard-coded color values to theme tokens.Lines 18-20 and 38 contain hard-coded RGBA color values directly in the template. Given that the PR summary mentions "Broad theme/token CSS overhaul," these values should be extracted to centralized theme tokens or CSS variables for consistency and maintainability.
Consider refactoring to use CSS variables or Tailwind theme extensions:
- bar.role === 'assistant' - ? 'bg-[rgba(37,37,37,0.65)] dark:bg-[rgba(255,255,255,0.9)]' - : 'bg-[rgba(37,37,37,0.25)] dark:bg-[rgba(255,255,255,0.6)]', + bar.role === 'assistant' + ? 'bg-minimap-assistant dark:bg-minimap-assistant-dark' + : 'bg-minimap-user dark:bg-minimap-user-dark',Similarly for line 38, replace the hard-coded color classes with theme tokens.
src/renderer/shell/App.vue (1)
14-21: Consider removing unused macOS detection code.The
isMacOSref and its computation are no longer used in the template (the dynamic class binding was removed at line 2). Consider removing this dead code unless it's needed for future use.Apply this diff to remove the unused code:
<script setup lang="ts"> import AppBar from './components/AppBar.vue' -import { ref, onMounted } from 'vue' -import { usePresenter } from '@/composables/usePresenter' -const isMacOS = ref(false) -const devicePresenter = usePresenter('devicePresenter') -// Shell component setup -onMounted(() => { - devicePresenter.getDeviceInfo().then((deviceInfo) => { - isMacOS.value = deviceInfo.platform === 'darwin' - }) -}) +// Shell component setup </script>src/renderer/src/views/ChatTabView.vue (1)
17-17: Remove commented-out code.The TitleView component is commented out but not removed. Dead code should be cleaned up to improve maintainability.
Apply this diff to remove the commented-out code:
- <!-- <TitleView @messageNavigationToggle="handleMessageNavigationToggle" /> -->src/renderer/shell/components/app-bar/AppBarTabItem.vue (2)
5-6: LGTM with minor observation.The container styling updates look good. The change from
bg-bg-cardtobg-cardaligns with the broader theme consolidation in this PR, and the height adjustment fromh-9toh-fullprovides better flexibility.Optional: Consider extracting the long class string into a computed property for better readability:
const containerClasses = computed(() => [ 'shrink-0 hover:bg-card/80 text-xs font-medium text-foreground px-3 h-full', 'flex items-center justify-between group border-r first:border-l border-border', active ? 'bg-card' : '' ])
14-19: Consider using dedicated CloseIcon component for consistency.The PR introduces new dedicated icon components (CloseIcon.vue, MaximizeIcon.vue, MinimizeIcon.vue) with a consistent fill-based API. For consistency with the window chrome icons, consider using the CloseIcon component here instead of the Iconify icon.
Based on learnings, apply this diff:
+import CloseIcon from '../icons/CloseIcon.vue'- <Icon - icon="lucide:x" - class="w-5 h-5 ml-2 text-muted-foreground opacity-0 transition-opacity duration-200 rounded-full hover:text-foreground p-0.5" + <CloseIcon + class="w-5 h-5 ml-2 text-muted-foreground opacity-0 transition-opacity duration-200 rounded-full hover:text-foreground p-0.5" :class="[size > 1 ? 'group-hover:opacity-100' : 'pointer-events-none cursor-default']" @click.stop="onClose" />src/renderer/src/components/message/MessageList.vue (2)
199-218: Document transition handler implementation.The
handleActionBeforeLeaveandhandleActionAfterLeavefunctions directly manipulate element styles to achieve smooth transitions. While this is necessary for the animation effect, consider adding comments explaining why this direct DOM manipulation is required.Apply this diff to add explanatory comments:
const handleActionBeforeLeave = (el: Element) => { + // Fix element dimensions and position before transition to prevent layout shift const element = el as HTMLElement const { offsetWidth, offsetHeight, offsetLeft, offsetTop } = element element.style.width = `${offsetWidth}px` element.style.height = `${offsetHeight}px` element.style.left = `${offsetLeft}px` element.style.top = `${offsetTop}px` element.style.position = 'absolute' element.style.pointerEvents = 'none' } const handleActionAfterLeave = (el: Element) => { + // Reset element styles after transition completes const element = el as HTMLElement element.style.width = '' element.style.height = '' element.style.left = '' element.style.top = '' element.style.position = '' element.style.pointerEvents = '' }
373-390: Consider making scroll behavior configurable.The scroll behavior changed from
'instant'to'smooth'(line 378), which improves UX but may be slower. Consider accepting a parameter to allow callers to choose the behavior based on context.Apply this diff:
/** * 滚动到指定消息 */ -const scrollToMessage = (messageId: string) => { +const scrollToMessage = (messageId: string, smooth = true) => { nextTick(() => { const messageElement = document.querySelector(`[data-message-id="${messageId}"]`) if (messageElement) { messageElement.scrollIntoView({ - behavior: 'smooth', + behavior: smooth ? 'smooth' : 'instant', block: 'start' }) // 添加高亮效果 messageElement.classList.add('message-highlight') setTimeout(() => { messageElement.classList.remove('message-highlight') }, 2000) } updateScrollInfo() }) }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (4)
src/renderer/shell/assets/ChromeClose.svgis excluded by!**/*.svgsrc/renderer/shell/assets/ChromeMaximize-1.svgis excluded by!**/*.svgsrc/renderer/shell/assets/ChromeMaximize.svgis excluded by!**/*.svgsrc/renderer/shell/assets/ChromeMinimize.svgis excluded by!**/*.svg
📒 Files selected for processing (29)
package.json(1 hunks)src/main/presenter/tabPresenter.ts(1 hunks)src/main/presenter/windowPresenter/index.ts(6 hunks)src/renderer/shell/App.vue(1 hunks)src/renderer/shell/components/AppBar.vue(5 hunks)src/renderer/shell/components/app-bar/AppBarTabItem.vue(1 hunks)src/renderer/shell/components/icons/CloseIcon.vue(1 hunks)src/renderer/shell/components/icons/MaximizeIcon.vue(1 hunks)src/renderer/shell/components/icons/MinimizeIcon.vue(1 hunks)src/renderer/shell/components/icons/RestoreIcon.vue(1 hunks)src/renderer/shell/lib/events.ts(1 hunks)src/renderer/src/App.vue(1 hunks)src/renderer/src/assets/style.css(11 hunks)src/renderer/src/components/ChatInput.vue(1 hunks)src/renderer/src/components/MessageNavigationSidebar.vue(1 hunks)src/renderer/src/components/SearchStatusIndicator.vue(2 hunks)src/renderer/src/components/ThreadView.vue(1 hunks)src/renderer/src/components/ThreadsView.vue(1 hunks)src/renderer/src/components/markdown/MarkdownRenderer.vue(1 hunks)src/renderer/src/components/message/MessageBlockToolCall.vue(1 hunks)src/renderer/src/components/message/MessageList.vue(9 hunks)src/renderer/src/components/message/MessageMinimap.vue(3 hunks)src/renderer/src/components/prompt-input/PromptInput.vue(5 hunks)src/renderer/src/components/settings/McpBuiltinMarket.vue(1 hunks)src/renderer/src/components/settings/McpSettings.vue(1 hunks)src/renderer/src/components/settings/ModelProviderSettings.vue(2 hunks)src/renderer/src/components/settings/PromptSetting.vue(1 hunks)src/renderer/src/views/ChatTabView.vue(2 hunks)src/renderer/src/views/SettingsTabView.vue(1 hunks)
🧰 Additional context used
📓 Path-based instructions (23)
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/settings/McpBuiltinMarket.vuesrc/renderer/src/components/MessageNavigationSidebar.vuesrc/renderer/src/App.vuesrc/renderer/src/components/ChatInput.vuesrc/renderer/src/views/SettingsTabView.vuesrc/renderer/src/components/settings/ModelProviderSettings.vuesrc/renderer/src/components/settings/PromptSetting.vuesrc/renderer/src/components/message/MessageBlockToolCall.vuesrc/renderer/src/components/ThreadsView.vuesrc/renderer/src/components/markdown/MarkdownRenderer.vuesrc/renderer/src/components/prompt-input/PromptInput.vuesrc/renderer/src/components/ThreadView.vuesrc/renderer/src/components/settings/McpSettings.vuesrc/renderer/src/components/message/MessageMinimap.vuesrc/renderer/src/components/message/MessageList.vuesrc/renderer/src/components/SearchStatusIndicator.vuesrc/renderer/src/views/ChatTabView.vuesrc/renderer/src/assets/style.css
src/renderer/**/*.{vue,ts,js,tsx,jsx}
📄 CodeRabbit inference engine (.cursor/rules/project-structure.mdc)
渲染进程代码放在
src/renderer
Files:
src/renderer/src/components/settings/McpBuiltinMarket.vuesrc/renderer/src/components/MessageNavigationSidebar.vuesrc/renderer/shell/lib/events.tssrc/renderer/src/App.vuesrc/renderer/src/components/ChatInput.vuesrc/renderer/src/views/SettingsTabView.vuesrc/renderer/src/components/settings/ModelProviderSettings.vuesrc/renderer/src/components/settings/PromptSetting.vuesrc/renderer/shell/components/icons/MinimizeIcon.vuesrc/renderer/shell/components/icons/RestoreIcon.vuesrc/renderer/src/components/message/MessageBlockToolCall.vuesrc/renderer/src/components/ThreadsView.vuesrc/renderer/src/components/markdown/MarkdownRenderer.vuesrc/renderer/shell/App.vuesrc/renderer/src/components/prompt-input/PromptInput.vuesrc/renderer/shell/components/icons/MaximizeIcon.vuesrc/renderer/src/components/ThreadView.vuesrc/renderer/shell/components/icons/CloseIcon.vuesrc/renderer/shell/components/app-bar/AppBarTabItem.vuesrc/renderer/src/components/settings/McpSettings.vuesrc/renderer/shell/components/AppBar.vuesrc/renderer/src/components/message/MessageMinimap.vuesrc/renderer/src/components/message/MessageList.vuesrc/renderer/src/components/SearchStatusIndicator.vuesrc/renderer/src/views/ChatTabView.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/settings/McpBuiltinMarket.vuesrc/renderer/src/components/MessageNavigationSidebar.vuesrc/renderer/src/App.vuesrc/renderer/src/components/ChatInput.vuesrc/renderer/src/views/SettingsTabView.vuesrc/renderer/src/components/settings/ModelProviderSettings.vuesrc/renderer/src/components/settings/PromptSetting.vuesrc/renderer/src/components/message/MessageBlockToolCall.vuesrc/renderer/src/components/ThreadsView.vuesrc/renderer/src/components/markdown/MarkdownRenderer.vuesrc/renderer/src/components/prompt-input/PromptInput.vuesrc/renderer/src/components/ThreadView.vuesrc/renderer/src/components/settings/McpSettings.vuesrc/renderer/src/components/message/MessageMinimap.vuesrc/renderer/src/components/message/MessageList.vuesrc/renderer/src/components/SearchStatusIndicator.vuesrc/renderer/src/views/ChatTabView.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/settings/McpBuiltinMarket.vuesrc/renderer/src/components/MessageNavigationSidebar.vuesrc/renderer/src/App.vuesrc/renderer/src/components/ChatInput.vuesrc/renderer/src/views/SettingsTabView.vuesrc/renderer/src/components/settings/ModelProviderSettings.vuesrc/renderer/src/components/settings/PromptSetting.vuesrc/renderer/src/components/message/MessageBlockToolCall.vuesrc/renderer/src/components/ThreadsView.vuesrc/renderer/src/components/markdown/MarkdownRenderer.vuesrc/renderer/src/components/prompt-input/PromptInput.vuesrc/renderer/src/components/ThreadView.vuesrc/renderer/src/components/settings/McpSettings.vuesrc/renderer/src/components/message/MessageMinimap.vuesrc/renderer/src/components/message/MessageList.vuesrc/renderer/src/components/SearchStatusIndicator.vuesrc/renderer/src/views/ChatTabView.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/settings/McpBuiltinMarket.vuesrc/renderer/src/components/MessageNavigationSidebar.vuesrc/renderer/shell/lib/events.tssrc/renderer/src/App.vuesrc/renderer/src/components/ChatInput.vuesrc/renderer/src/views/SettingsTabView.vuesrc/renderer/src/components/settings/ModelProviderSettings.vuesrc/renderer/src/components/settings/PromptSetting.vuesrc/renderer/shell/components/icons/MinimizeIcon.vuesrc/renderer/shell/components/icons/RestoreIcon.vuesrc/renderer/src/components/message/MessageBlockToolCall.vuesrc/renderer/src/components/ThreadsView.vuesrc/renderer/src/components/markdown/MarkdownRenderer.vuesrc/renderer/shell/App.vuesrc/renderer/src/components/prompt-input/PromptInput.vuesrc/renderer/shell/components/icons/MaximizeIcon.vuesrc/renderer/src/components/ThreadView.vuesrc/renderer/shell/components/icons/CloseIcon.vuesrc/renderer/shell/components/app-bar/AppBarTabItem.vuesrc/renderer/src/components/settings/McpSettings.vuesrc/renderer/shell/components/AppBar.vuesrc/renderer/src/components/message/MessageMinimap.vuesrc/renderer/src/components/message/MessageList.vuesrc/renderer/src/components/SearchStatusIndicator.vuesrc/renderer/src/views/ChatTabView.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/settings/McpBuiltinMarket.vuesrc/renderer/src/components/MessageNavigationSidebar.vuesrc/renderer/shell/lib/events.tssrc/renderer/src/App.vuesrc/renderer/src/components/ChatInput.vuesrc/renderer/src/views/SettingsTabView.vuesrc/renderer/src/components/settings/ModelProviderSettings.vuesrc/renderer/src/components/settings/PromptSetting.vuesrc/renderer/shell/components/icons/MinimizeIcon.vuesrc/renderer/shell/components/icons/RestoreIcon.vuesrc/renderer/src/components/message/MessageBlockToolCall.vuesrc/renderer/src/components/ThreadsView.vuesrc/renderer/src/components/markdown/MarkdownRenderer.vuesrc/renderer/shell/App.vuesrc/renderer/src/components/prompt-input/PromptInput.vuesrc/renderer/shell/components/icons/MaximizeIcon.vuesrc/renderer/src/components/ThreadView.vuesrc/renderer/shell/components/icons/CloseIcon.vuesrc/renderer/shell/components/app-bar/AppBarTabItem.vuesrc/renderer/src/components/settings/McpSettings.vuesrc/renderer/shell/components/AppBar.vuesrc/renderer/src/components/message/MessageMinimap.vuesrc/renderer/src/components/message/MessageList.vuesrc/renderer/src/components/SearchStatusIndicator.vuesrc/renderer/src/views/ChatTabView.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/settings/McpBuiltinMarket.vuesrc/renderer/src/components/MessageNavigationSidebar.vuesrc/renderer/shell/lib/events.tssrc/renderer/src/App.vuesrc/renderer/src/components/ChatInput.vuesrc/renderer/src/views/SettingsTabView.vuesrc/renderer/src/components/settings/ModelProviderSettings.vuesrc/renderer/src/components/settings/PromptSetting.vuesrc/renderer/shell/components/icons/MinimizeIcon.vuesrc/renderer/shell/components/icons/RestoreIcon.vuesrc/renderer/src/components/message/MessageBlockToolCall.vuesrc/renderer/src/components/ThreadsView.vuesrc/renderer/src/components/markdown/MarkdownRenderer.vuesrc/renderer/shell/App.vuesrc/renderer/src/components/prompt-input/PromptInput.vuesrc/renderer/shell/components/icons/MaximizeIcon.vuesrc/renderer/src/components/ThreadView.vuesrc/renderer/shell/components/icons/CloseIcon.vuesrc/renderer/shell/components/app-bar/AppBarTabItem.vuesrc/renderer/src/components/settings/McpSettings.vuesrc/renderer/shell/components/AppBar.vuesrc/renderer/src/components/message/MessageMinimap.vuesrc/renderer/src/components/message/MessageList.vuesrc/renderer/src/components/SearchStatusIndicator.vuesrc/renderer/src/views/ChatTabView.vue
**/*.{ts,tsx,js,vue}
📄 CodeRabbit inference engine (CLAUDE.md)
Use English for all logs and comments
Files:
src/renderer/src/components/settings/McpBuiltinMarket.vuesrc/renderer/src/components/MessageNavigationSidebar.vuesrc/renderer/shell/lib/events.tssrc/renderer/src/App.vuesrc/renderer/src/components/ChatInput.vuesrc/renderer/src/views/SettingsTabView.vuesrc/renderer/src/components/settings/ModelProviderSettings.vuesrc/renderer/src/components/settings/PromptSetting.vuesrc/renderer/shell/components/icons/MinimizeIcon.vuesrc/main/presenter/tabPresenter.tssrc/renderer/shell/components/icons/RestoreIcon.vuesrc/renderer/src/components/message/MessageBlockToolCall.vuesrc/renderer/src/components/ThreadsView.vuesrc/renderer/src/components/markdown/MarkdownRenderer.vuesrc/renderer/shell/App.vuesrc/renderer/src/components/prompt-input/PromptInput.vuesrc/renderer/shell/components/icons/MaximizeIcon.vuesrc/renderer/src/components/ThreadView.vuesrc/renderer/shell/components/icons/CloseIcon.vuesrc/renderer/shell/components/app-bar/AppBarTabItem.vuesrc/renderer/src/components/settings/McpSettings.vuesrc/renderer/shell/components/AppBar.vuesrc/main/presenter/windowPresenter/index.tssrc/renderer/src/components/message/MessageMinimap.vuesrc/renderer/src/components/message/MessageList.vuesrc/renderer/src/components/SearchStatusIndicator.vuesrc/renderer/src/views/ChatTabView.vue
**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (CLAUDE.md)
Enable and adhere to strict TypeScript typing (avoid implicit any, prefer precise types)
Files:
src/renderer/src/components/settings/McpBuiltinMarket.vuesrc/renderer/src/components/MessageNavigationSidebar.vuesrc/renderer/shell/lib/events.tssrc/renderer/src/App.vuesrc/renderer/src/components/ChatInput.vuesrc/renderer/src/views/SettingsTabView.vuesrc/renderer/src/components/settings/ModelProviderSettings.vuesrc/renderer/src/components/settings/PromptSetting.vuesrc/renderer/shell/components/icons/MinimizeIcon.vuesrc/main/presenter/tabPresenter.tssrc/renderer/shell/components/icons/RestoreIcon.vuesrc/renderer/src/components/message/MessageBlockToolCall.vuesrc/renderer/src/components/ThreadsView.vuesrc/renderer/src/components/markdown/MarkdownRenderer.vuesrc/renderer/shell/App.vuesrc/renderer/src/components/prompt-input/PromptInput.vuesrc/renderer/shell/components/icons/MaximizeIcon.vuesrc/renderer/src/components/ThreadView.vuesrc/renderer/shell/components/icons/CloseIcon.vuesrc/renderer/shell/components/app-bar/AppBarTabItem.vuesrc/renderer/src/components/settings/McpSettings.vuesrc/renderer/shell/components/AppBar.vuesrc/main/presenter/windowPresenter/index.tssrc/renderer/src/components/message/MessageMinimap.vuesrc/renderer/src/components/message/MessageList.vuesrc/renderer/src/components/SearchStatusIndicator.vuesrc/renderer/src/views/ChatTabView.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/settings/McpBuiltinMarket.vuesrc/renderer/src/components/MessageNavigationSidebar.vuesrc/renderer/src/App.vuesrc/renderer/src/components/ChatInput.vuesrc/renderer/src/views/SettingsTabView.vuesrc/renderer/src/components/settings/ModelProviderSettings.vuesrc/renderer/src/components/settings/PromptSetting.vuesrc/renderer/shell/components/icons/MinimizeIcon.vuesrc/renderer/shell/components/icons/RestoreIcon.vuesrc/renderer/src/components/message/MessageBlockToolCall.vuesrc/renderer/src/components/ThreadsView.vuesrc/renderer/src/components/markdown/MarkdownRenderer.vuesrc/renderer/shell/App.vuesrc/renderer/src/components/prompt-input/PromptInput.vuesrc/renderer/shell/components/icons/MaximizeIcon.vuesrc/renderer/src/components/ThreadView.vuesrc/renderer/shell/components/icons/CloseIcon.vuesrc/renderer/shell/components/app-bar/AppBarTabItem.vuesrc/renderer/src/components/settings/McpSettings.vuesrc/renderer/shell/components/AppBar.vuesrc/renderer/src/components/message/MessageMinimap.vuesrc/renderer/src/components/message/MessageList.vuesrc/renderer/src/components/SearchStatusIndicator.vuesrc/renderer/src/views/ChatTabView.vue
src/renderer/src/components/**/*
📄 CodeRabbit inference engine (CLAUDE.md)
Organize UI components by feature within src/renderer/src/
Files:
src/renderer/src/components/settings/McpBuiltinMarket.vuesrc/renderer/src/components/MessageNavigationSidebar.vuesrc/renderer/src/components/ChatInput.vuesrc/renderer/src/components/settings/ModelProviderSettings.vuesrc/renderer/src/components/settings/PromptSetting.vuesrc/renderer/src/components/message/MessageBlockToolCall.vuesrc/renderer/src/components/ThreadsView.vuesrc/renderer/src/components/markdown/MarkdownRenderer.vuesrc/renderer/src/components/prompt-input/PromptInput.vuesrc/renderer/src/components/ThreadView.vuesrc/renderer/src/components/settings/McpSettings.vuesrc/renderer/src/components/message/MessageMinimap.vuesrc/renderer/src/components/message/MessageList.vuesrc/renderer/src/components/SearchStatusIndicator.vue
src/renderer/src/**
📄 CodeRabbit inference engine (AGENTS.md)
Put application code for the Vue app under src/renderer/src (components, stores, views, i18n, lib)
Files:
src/renderer/src/components/settings/McpBuiltinMarket.vuesrc/renderer/src/components/MessageNavigationSidebar.vuesrc/renderer/src/App.vuesrc/renderer/src/components/ChatInput.vuesrc/renderer/src/views/SettingsTabView.vuesrc/renderer/src/components/settings/ModelProviderSettings.vuesrc/renderer/src/components/settings/PromptSetting.vuesrc/renderer/src/components/message/MessageBlockToolCall.vuesrc/renderer/src/components/ThreadsView.vuesrc/renderer/src/components/markdown/MarkdownRenderer.vuesrc/renderer/src/components/prompt-input/PromptInput.vuesrc/renderer/src/components/ThreadView.vuesrc/renderer/src/components/settings/McpSettings.vuesrc/renderer/src/components/message/MessageMinimap.vuesrc/renderer/src/components/message/MessageList.vuesrc/renderer/src/components/SearchStatusIndicator.vuesrc/renderer/src/views/ChatTabView.vuesrc/renderer/src/assets/style.css
src/renderer/src/**/*.{vue,ts}
📄 CodeRabbit inference engine (AGENTS.md)
All user-facing strings in the renderer must use vue-i18n keys defined in src/renderer/src/i18n
Files:
src/renderer/src/components/settings/McpBuiltinMarket.vuesrc/renderer/src/components/MessageNavigationSidebar.vuesrc/renderer/src/App.vuesrc/renderer/src/components/ChatInput.vuesrc/renderer/src/views/SettingsTabView.vuesrc/renderer/src/components/settings/ModelProviderSettings.vuesrc/renderer/src/components/settings/PromptSetting.vuesrc/renderer/src/components/message/MessageBlockToolCall.vuesrc/renderer/src/components/ThreadsView.vuesrc/renderer/src/components/markdown/MarkdownRenderer.vuesrc/renderer/src/components/prompt-input/PromptInput.vuesrc/renderer/src/components/ThreadView.vuesrc/renderer/src/components/settings/McpSettings.vuesrc/renderer/src/components/message/MessageMinimap.vuesrc/renderer/src/components/message/MessageList.vuesrc/renderer/src/components/SearchStatusIndicator.vuesrc/renderer/src/views/ChatTabView.vue
**/*.{js,jsx,ts,tsx,vue}
📄 CodeRabbit inference engine (AGENTS.md)
Apply Prettier formatting: single quotes, no semicolons, max width 100
Files:
src/renderer/src/components/settings/McpBuiltinMarket.vuesrc/renderer/src/components/MessageNavigationSidebar.vuesrc/renderer/shell/lib/events.tssrc/renderer/src/App.vuesrc/renderer/src/components/ChatInput.vuesrc/renderer/src/views/SettingsTabView.vuesrc/renderer/src/components/settings/ModelProviderSettings.vuesrc/renderer/src/components/settings/PromptSetting.vuesrc/renderer/shell/components/icons/MinimizeIcon.vuesrc/main/presenter/tabPresenter.tssrc/renderer/shell/components/icons/RestoreIcon.vuesrc/renderer/src/components/message/MessageBlockToolCall.vuesrc/renderer/src/components/ThreadsView.vuesrc/renderer/src/components/markdown/MarkdownRenderer.vuesrc/renderer/shell/App.vuesrc/renderer/src/components/prompt-input/PromptInput.vuesrc/renderer/shell/components/icons/MaximizeIcon.vuesrc/renderer/src/components/ThreadView.vuesrc/renderer/shell/components/icons/CloseIcon.vuesrc/renderer/shell/components/app-bar/AppBarTabItem.vuesrc/renderer/src/components/settings/McpSettings.vuesrc/renderer/shell/components/AppBar.vuesrc/main/presenter/windowPresenter/index.tssrc/renderer/src/components/message/MessageMinimap.vuesrc/renderer/src/components/message/MessageList.vuesrc/renderer/src/components/SearchStatusIndicator.vuesrc/renderer/src/views/ChatTabView.vue
src/renderer/**/*.vue
📄 CodeRabbit inference engine (AGENTS.md)
Name Vue components in PascalCase (e.g., ChatInput.vue)
Files:
src/renderer/src/components/settings/McpBuiltinMarket.vuesrc/renderer/src/components/MessageNavigationSidebar.vuesrc/renderer/src/App.vuesrc/renderer/src/components/ChatInput.vuesrc/renderer/src/views/SettingsTabView.vuesrc/renderer/src/components/settings/ModelProviderSettings.vuesrc/renderer/src/components/settings/PromptSetting.vuesrc/renderer/shell/components/icons/MinimizeIcon.vuesrc/renderer/shell/components/icons/RestoreIcon.vuesrc/renderer/src/components/message/MessageBlockToolCall.vuesrc/renderer/src/components/ThreadsView.vuesrc/renderer/src/components/markdown/MarkdownRenderer.vuesrc/renderer/shell/App.vuesrc/renderer/src/components/prompt-input/PromptInput.vuesrc/renderer/shell/components/icons/MaximizeIcon.vuesrc/renderer/src/components/ThreadView.vuesrc/renderer/shell/components/icons/CloseIcon.vuesrc/renderer/shell/components/app-bar/AppBarTabItem.vuesrc/renderer/src/components/settings/McpSettings.vuesrc/renderer/shell/components/AppBar.vuesrc/renderer/src/components/message/MessageMinimap.vuesrc/renderer/src/components/message/MessageList.vuesrc/renderer/src/components/SearchStatusIndicator.vuesrc/renderer/src/views/ChatTabView.vue
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development-setup.mdc)
**/*.{js,jsx,ts,tsx}: 使用 OxLint 进行代码检查
Log和注释使用英文书写
**/*.{js,jsx,ts,tsx}: Use OxLint for JS/TS code; pre-commit hooks run lint-staged and typecheck
Use camelCase for variables and functions
Use PascalCase for types and classes
Use SCREAMING_SNAKE_CASE for constants
Files:
src/renderer/shell/lib/events.tssrc/main/presenter/tabPresenter.tssrc/main/presenter/windowPresenter/index.ts
src/{main,renderer}/**/*.ts
📄 CodeRabbit inference engine (.cursor/rules/electron-best-practices.mdc)
src/{main,renderer}/**/*.ts: Use context isolation for improved security
Implement proper inter-process communication (IPC) patterns
Optimize application startup time with lazy loading
Implement proper error handling and logging for debugging
Files:
src/renderer/shell/lib/events.tssrc/main/presenter/tabPresenter.tssrc/main/presenter/windowPresenter/index.ts
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/error-logging.mdc)
**/*.{ts,tsx}: 始终使用 try-catch 处理可能的错误
提供有意义的错误信息
记录详细的错误日志
优雅降级处理
日志应包含时间戳、日志级别、错误代码、错误描述、堆栈跟踪（如适用）、相关上下文信息
日志级别应包括 ERROR、WARN、INFO、DEBUG
不要吞掉错误
提供用户友好的错误信息
实现错误重试机制
避免记录敏感信息
使用结构化日志
设置适当的日志级别
Files:
src/renderer/shell/lib/events.tssrc/main/presenter/tabPresenter.tssrc/main/presenter/windowPresenter/index.ts
src/renderer/shell/**
📄 CodeRabbit inference engine (AGENTS.md)
Keep shell UI code in src/renderer/shell/
Files:
src/renderer/shell/lib/events.tssrc/renderer/shell/components/icons/MinimizeIcon.vuesrc/renderer/shell/components/icons/RestoreIcon.vuesrc/renderer/shell/App.vuesrc/renderer/shell/components/icons/MaximizeIcon.vuesrc/renderer/shell/components/icons/CloseIcon.vuesrc/renderer/shell/components/app-bar/AppBarTabItem.vuesrc/renderer/shell/components/AppBar.vue
src/main/**/*.ts
📄 CodeRabbit inference engine (.cursor/rules/electron-best-practices.mdc)
Use Electron's built-in APIs for file system and native dialogs
Files:
src/main/presenter/tabPresenter.tssrc/main/presenter/windowPresenter/index.ts
src/main/**/*.{ts,js,tsx,jsx}
📄 CodeRabbit inference engine (.cursor/rules/project-structure.mdc)
主进程代码放在
src/main
Files:
src/main/presenter/tabPresenter.tssrc/main/presenter/windowPresenter/index.ts
src/main/**
📄 CodeRabbit inference engine (AGENTS.md)
Place all Electron main-process code under src/main/
Files:
src/main/presenter/tabPresenter.tssrc/main/presenter/windowPresenter/index.ts
src/main/presenter/**
📄 CodeRabbit inference engine (AGENTS.md)
src/main/presenter/**: Organize main-process presenters under src/main/presenter/ (Window/Tab/Thread/Mcp/Config/LLMProvider)
Follow the Presenter pattern for main-process modules
Files:
src/main/presenter/tabPresenter.tssrc/main/presenter/windowPresenter/index.ts
🧠 Learnings (3)
📚 Learning: 2025-09-16T07:06:30.939Z
Learnt from: CR
PR: ThinkInAIXYZ/deepchat#0
File: AGENTS.md:0-0
Timestamp: 2025-09-16T07:06:30.939Z
Learning: Applies to src/renderer/**/*.vue : Name Vue components in PascalCase (e.g., ChatInput.vue)
Applied to files:
src/renderer/src/components/ChatInput.vue
📚 Learning: 2025-07-23T00:45:57.322Z
Learnt from: CR
PR: ThinkInAIXYZ/deepchat#0
File: .cursor/rules/vue-shadcn.mdc:0-0
Timestamp: 2025-07-23T00:45:57.322Z
Learning: Applies to src/renderer/**/*.{vue} : Use Iconify/Vue for icon implementation.
Applied to files:
src/renderer/shell/components/icons/MinimizeIcon.vuesrc/renderer/shell/components/icons/MaximizeIcon.vuesrc/renderer/shell/components/icons/CloseIcon.vue
📚 Learning: 2025-08-28T08:07:05.182Z
Learnt from: neoragex2002
PR: ThinkInAIXYZ/deepchat#807
File: src/renderer/src/components/markdown/MarkdownRenderer.vue:58-58
Timestamp: 2025-08-28T08:07:05.182Z
Learning: In src/renderer/src/components/markdown/MarkdownRenderer.vue, the unscoped <style> tag is intentionally used for global prose styles and the anchor .markdown-renderer fix, as confirmed by user neoragex2002.
Applied to files:
src/renderer/src/components/markdown/MarkdownRenderer.vue
🧬 Code graph analysis (1)
src/main/presenter/windowPresenter/index.ts (2)
src/renderer/shell/lib/events.ts (1)
WINDOW_EVENTS(1-20)src/main/events.ts (1)
WINDOW_EVENTS(79-98)
🔇 Additional comments (27)
src/renderer/src/components/SearchStatusIndicator.vue (2)
7-7: LGTM: Focus outline simplified.The removal of
outline-2simplifies the focus styling while maintaining accessibility. The default outline width is sufficient.
74-78: LGTM: Background colors standardized.The change from opacity variants (
bg-muted/40,bg-muted/30,bg-background/40) to consistentbg-mutedaligns with the global theme token updates and improves visual consistency across status variants.src/renderer/src/components/prompt-input/PromptInput.vue (2)
3-3: LGTM! Styling simplification is clean.The removal of custom wrapper classes and CSS chrome in favor of direct Tailwind utilities (
border-t,focus-within:border-primary) simplifies the styling approach while maintaining functionality.Also applies to: 13-13, 41-41
69-69: LGTM! Button styling simplified appropriately.The search engine select and button styling changes reduce redundant classes while preserving the visual design through cleaner Tailwind utilities.
Also applies to: 78-78, 80-80
src/renderer/src/components/message/MessageMinimap.vue (3)
2-5: LGTM: Container structure updated correctly.The absolute positioning and Tailwind utility classes are well-organized. The component follows the Composition API and scoped styling guidelines.
72-72: LGTM: MAX_WIDTH adjustment is intentional.The reduction from 24 to 20 pixels appears to be a deliberate refinement of the minimap bar width, consistent with the UI refactoring goals of this PR.
109-134: LGTM: Bar calculation logic is sound.The computed property correctly normalizes message lengths, applies width constraints, and constructs bar metadata with proper ARIA labels.
src/renderer/src/components/settings/McpBuiltinMarket.vue (1)
3-3: LGTM! Theme token update is consistent.The class change from
bg-bg-cardtobg-cardaligns with the broader UI theme refactor observed across multiple components in this PR.src/renderer/src/components/ThreadsView.vue (1)
2-2: LGTM! Consistent theme update.The background class change maintains consistency with the theme refactor applied across the codebase.
src/renderer/src/views/SettingsTabView.vue (1)
2-2: LGTM! Theme token aligned.Consistent with the theme update pattern throughout this PR.
src/renderer/src/components/settings/ModelProviderSettings.vue (1)
6-6: LGTM! Consistent theme updates.All three background class changes (
bg-bg-card→bg-card) align with the theme refactor pattern throughout this PR.Also applies to: 121-123
src/renderer/src/components/settings/McpSettings.vue (1)
4-6: LGTM! Theme tokens updated consistently.Both background class changes maintain consistency with the broader UI refactor.
src/renderer/src/components/message/MessageBlockToolCall.vue (1)
2-4: LGTM! Spacing adjustments applied.Removing the margin classes (
my-1andmy-2) adjusts vertical spacing without affecting functionality or layout integrity.src/renderer/src/components/ThreadView.vue (1)
23-23: LGTM! Final theme token update.Consistent with the theme refactor pattern applied throughout this PR.
src/main/presenter/tabPresenter.ts (1)
645-645: Verify the increased view height aligns with the new chrome.The view height calculation was increased by 4 pixels (removed the
- 4adjustment). Ensure this change correctly aligns with the updated window chrome and doesn't cause content to overlap with the tab bar or other UI elements.src/renderer/src/assets/style.css (1)
19-355: LGTM: Comprehensive theme token overhaul.The extensive updates to color tokens, including the shift from semantic hue-based base colors to grayscale and the introduction of window-related tokens (--bg-window-background, --window-inner-border, etc.), are consistent and well-structured. These changes support the broader UI chrome refresh mentioned in the PR objectives.
src/renderer/src/components/MessageNavigationSidebar.vue (1)
3-3: LGTM: Class name updated to match new token structure.The change from
bg-bg-cardtobg-cardaligns with the simplified token structure introduced in the CSS overhaul. No functional changes.src/renderer/src/components/markdown/MarkdownRenderer.vue (1)
3-3: LGTM: Markdown styling theme updated.The addition of
prose-zincclass adjusts the markdown rendering theme to align with the broader UI refresh. No functional changes.src/renderer/src/App.vue (1)
325-327: LGTM: Window chrome styling updated.The addition of border classes and rounded bottom corners aligns with the new window chrome design. These styling-only changes integrate well with the broader UI refresh.
src/renderer/shell/components/icons/RestoreIcon.vue (1)
2-18: LGTM: Icon updated with customization support.The icon has been replaced with a compact 10×10 filled SVG and now exposes a
fillprop (defaulting to'currentColor'), enabling external color control. This change aligns with similar updates to MaximizeIcon and MinimizeIcon in the PR.src/renderer/src/components/ChatInput.vue (1)
13-13: Verify the removal of focus-within border behavior is intentional.The styling has been simplified from
bg-bg-card border border-border rounded-lg focus-within:border-primary ...tobg-card rounded-lg border ..., which removes the visual feedback when the input receives focus (the blue border on focus). Ensure this removal aligns with the new design intent.src/renderer/src/views/ChatTabView.vue (1)
126-128: Consider UX impact of immediate navigation close.The removal of the setTimeout delay means the message navigation closes immediately upon scrolling to a message on small screens. This might close the sidebar before the user can see the scroll animation complete, degrading the user experience.
Consider testing this behavior on small screens to ensure the navigation doesn't close too abruptly. If the immediate close feels jarring, consider adding a short delay (e.g., 300ms) to allow the scroll animation to complete before closing.
src/renderer/shell/components/icons/MaximizeIcon.vue (1)
1-20: LGTM with question about opacity value.The icon component follows the established pattern from CloseIcon.vue. However, the
fill-opacity="0.8956"at line 6 is an unusual precision.Is there a specific reason for the opacity value of 0.8956 instead of a rounder value like 0.9? If this is a design specification, consider adding a comment explaining the rationale. Otherwise, consider simplifying to
0.9for maintainability.src/renderer/shell/components/icons/MinimizeIcon.vue (1)
1-19: LGTM!The MinimizeIcon component follows the established pattern from CloseIcon.vue and MaximizeIcon.vue, providing a consistent API across window chrome icons. The implementation is clean and straightforward.
src/main/presenter/windowPresenter/index.ts (2)
656-657: Verify macOS window appearance changes.The vibrancy effect changed from
'under-window'to'hud', and the background color changed from transparent black ('#00000000') to transparent white ('#00ffffff'). These changes will significantly affect the window's visual appearance on macOS.Test these changes on macOS to ensure:
- The 'hud' vibrancy provides the desired frosted glass effect
- The transparent white background doesn't cause unexpected visual artifacts
- The traffic light button positioning (line 661) still looks correct with these changes
Consider documenting the reasoning for these specific values if they address a particular visual issue.
731-789: LGTM on centralized event usage.The window lifecycle events now correctly use the centralized
WINDOW_EVENTSconstants for broadcasting to the renderer, improving maintainability and reducing the risk of typos.src/renderer/src/components/message/MessageList.vue (1)
38-92: LGTM on TransitionGroup enhancement.The addition of TransitionGroup for action buttons provides smooth enter/leave animations, improving the user experience. The transition classes and handlers are well-implemented.
agentic ui
Summary by CodeRabbit
New Features
Style