feat(theme): add markdown layout style and table style #1039
Conversation
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
Contributor
WalkthroughThis PR updates renderer UI components with styling refinements and a restructured model/settings selection workflow. NewThread replaces hover-based settings toggling with explicit popovers for model selection and settings, while ChatInput accommodates the slot rename. MarkdownRenderer gains comprehensive typography and table styling, error blocks become collapsible, and message padding is adjusted. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant NewThread
participant ModelPopover as ModelPopover<br/>(Trigger)
participant ModelContent as ModelContent<br/>(PopoverContent)
participant SettingsPopover as SettingsPopover<br/>(Trigger)
participant SettingsContent as SettingsContent<br/>(ScrollablePopover)
User->>NewThread: Render component
Note over NewThread: Both popovers visible<br/>(no hover logic)
User->>ModelPopover: Click model selector
activate ModelPopover
ModelPopover->>ModelContent: Display ModelSelect
ModelContent-->>User: Show available models
deactivate ModelPopover
User->>SettingsPopover: Click settings icon
activate SettingsPopover
SettingsPopover->>SettingsContent: Display ChatConfig
SettingsContent-->>User: Show settings
deactivate SettingsPopover
Note over NewThread: Settings always accessible<br/>(not hidden on blur)
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes The diff spans diverse component changes: NewThread undergoes substantial UI restructuring with removed hover logic, MarkdownRenderer introduces extensive styling rules across multiple elements, and several components receive targeted styling tweaks. While each change is relatively self-contained, the variety of concerns (component structure, state management, CSS classes) and the NewThread complexity warrant moderate review effort. Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ 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 |
Collaborator
|
@codex review |
Contributor
There was a problem hiding this comment.
Actionable comments posted: 3
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
src/renderer/src/components/ModelSelect.vue(1 hunks)src/renderer/src/components/NewThread.vue(1 hunks)src/renderer/src/components/chat-input/ChatInput.vue(1 hunks)src/renderer/src/components/markdown/MarkdownRenderer.vue(3 hunks)src/renderer/src/components/message/MessageBlockError.vue(2 hunks)src/renderer/src/components/message/MessageItemAssistant.vue(1 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/markdown/MarkdownRenderer.vuesrc/renderer/src/components/ModelSelect.vuesrc/renderer/src/components/chat-input/ChatInput.vuesrc/renderer/src/components/NewThread.vuesrc/renderer/src/components/message/MessageItemAssistant.vuesrc/renderer/src/components/message/MessageBlockError.vue
src/renderer/**/*.{vue,ts,js,tsx,jsx}
📄 CodeRabbit inference engine (.cursor/rules/project-structure.mdc)
渲染进程代码放在
src/renderer
Files:
src/renderer/src/components/markdown/MarkdownRenderer.vuesrc/renderer/src/components/ModelSelect.vuesrc/renderer/src/components/chat-input/ChatInput.vuesrc/renderer/src/components/NewThread.vuesrc/renderer/src/components/message/MessageItemAssistant.vuesrc/renderer/src/components/message/MessageBlockError.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/markdown/MarkdownRenderer.vuesrc/renderer/src/components/ModelSelect.vuesrc/renderer/src/components/chat-input/ChatInput.vuesrc/renderer/src/components/NewThread.vuesrc/renderer/src/components/message/MessageItemAssistant.vuesrc/renderer/src/components/message/MessageBlockError.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/markdown/MarkdownRenderer.vuesrc/renderer/src/components/ModelSelect.vuesrc/renderer/src/components/chat-input/ChatInput.vuesrc/renderer/src/components/NewThread.vuesrc/renderer/src/components/message/MessageItemAssistant.vuesrc/renderer/src/components/message/MessageBlockError.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/markdown/MarkdownRenderer.vuesrc/renderer/src/components/ModelSelect.vuesrc/renderer/src/components/chat-input/ChatInput.vuesrc/renderer/src/components/NewThread.vuesrc/renderer/src/components/message/MessageItemAssistant.vuesrc/renderer/src/components/message/MessageBlockError.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/markdown/MarkdownRenderer.vuesrc/renderer/src/components/ModelSelect.vuesrc/renderer/src/components/chat-input/ChatInput.vuesrc/renderer/src/components/NewThread.vuesrc/renderer/src/components/message/MessageItemAssistant.vuesrc/renderer/src/components/message/MessageBlockError.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/markdown/MarkdownRenderer.vuesrc/renderer/src/components/ModelSelect.vuesrc/renderer/src/components/chat-input/ChatInput.vuesrc/renderer/src/components/NewThread.vuesrc/renderer/src/components/message/MessageItemAssistant.vuesrc/renderer/src/components/message/MessageBlockError.vue
**/*.{ts,tsx,js,vue}
📄 CodeRabbit inference engine (CLAUDE.md)
Use English for all logs and comments
Files:
src/renderer/src/components/markdown/MarkdownRenderer.vuesrc/renderer/src/components/ModelSelect.vuesrc/renderer/src/components/chat-input/ChatInput.vuesrc/renderer/src/components/NewThread.vuesrc/renderer/src/components/message/MessageItemAssistant.vuesrc/renderer/src/components/message/MessageBlockError.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/markdown/MarkdownRenderer.vuesrc/renderer/src/components/ModelSelect.vuesrc/renderer/src/components/chat-input/ChatInput.vuesrc/renderer/src/components/NewThread.vuesrc/renderer/src/components/message/MessageItemAssistant.vuesrc/renderer/src/components/message/MessageBlockError.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/markdown/MarkdownRenderer.vuesrc/renderer/src/components/ModelSelect.vuesrc/renderer/src/components/chat-input/ChatInput.vuesrc/renderer/src/components/NewThread.vuesrc/renderer/src/components/message/MessageItemAssistant.vuesrc/renderer/src/components/message/MessageBlockError.vue
src/renderer/src/components/**/*
📄 CodeRabbit inference engine (CLAUDE.md)
Organize UI components by feature within src/renderer/src/
Files:
src/renderer/src/components/markdown/MarkdownRenderer.vuesrc/renderer/src/components/ModelSelect.vuesrc/renderer/src/components/chat-input/ChatInput.vuesrc/renderer/src/components/NewThread.vuesrc/renderer/src/components/message/MessageItemAssistant.vuesrc/renderer/src/components/message/MessageBlockError.vue
src/renderer/src/**
📄 CodeRabbit inference engine (AGENTS.md)
Place Vue 3 app source under src/renderer/src (components, stores, views, i18n, lib)
Files:
src/renderer/src/components/markdown/MarkdownRenderer.vuesrc/renderer/src/components/ModelSelect.vuesrc/renderer/src/components/chat-input/ChatInput.vuesrc/renderer/src/components/NewThread.vuesrc/renderer/src/components/message/MessageItemAssistant.vuesrc/renderer/src/components/message/MessageBlockError.vue
src/renderer/src/**/*.{vue,ts}
📄 CodeRabbit inference engine (AGENTS.md)
All user-facing strings must use vue-i18n ($t/keys) rather than hardcoded literals
Files:
src/renderer/src/components/markdown/MarkdownRenderer.vuesrc/renderer/src/components/ModelSelect.vuesrc/renderer/src/components/chat-input/ChatInput.vuesrc/renderer/src/components/NewThread.vuesrc/renderer/src/components/message/MessageItemAssistant.vuesrc/renderer/src/components/message/MessageBlockError.vue
**/*.{ts,tsx,js,jsx,vue,css,scss,md,json,yml,yaml}
📄 CodeRabbit inference engine (AGENTS.md)
Prettier style: single quotes, no semicolons, print width 100; run pnpm run format
Files:
src/renderer/src/components/markdown/MarkdownRenderer.vuesrc/renderer/src/components/ModelSelect.vuesrc/renderer/src/components/chat-input/ChatInput.vuesrc/renderer/src/components/NewThread.vuesrc/renderer/src/components/message/MessageItemAssistant.vuesrc/renderer/src/components/message/MessageBlockError.vue
**/*.{ts,tsx,js,jsx,vue}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,tsx,js,jsx,vue}: Use OxLint for JS/TS code; keep lint clean
Use camelCase for variables and functions
Use SCREAMING_SNAKE_CASE for constants
Files:
src/renderer/src/components/markdown/MarkdownRenderer.vuesrc/renderer/src/components/ModelSelect.vuesrc/renderer/src/components/chat-input/ChatInput.vuesrc/renderer/src/components/NewThread.vuesrc/renderer/src/components/message/MessageItemAssistant.vuesrc/renderer/src/components/message/MessageBlockError.vue
src/renderer/**/*.vue
📄 CodeRabbit inference engine (AGENTS.md)
Name Vue component files in PascalCase (e.g., ChatInput.vue)
Files:
src/renderer/src/components/markdown/MarkdownRenderer.vuesrc/renderer/src/components/ModelSelect.vuesrc/renderer/src/components/chat-input/ChatInput.vuesrc/renderer/src/components/NewThread.vuesrc/renderer/src/components/message/MessageItemAssistant.vuesrc/renderer/src/components/message/MessageBlockError.vue
🧠 Learnings (1)
📚 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
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: build-check (x64)
🔇 Additional comments (9)
src/renderer/src/components/ModelSelect.vue (1)
5-5: LGTM: Text size adjustment aligns with UI refinement.The addition of
text-smimproves visual consistency with the new popover-based model selection UI introduced in NewThread.vue.src/renderer/src/components/message/MessageItemAssistant.vue (1)
4-4: LGTM: Vertical padding reduction tightens message layout.Removing
py-4aligns with the PR's broader UI consolidation effort, creating a more compact message presentation.src/renderer/src/components/message/MessageBlockError.vue (1)
21-29: Consider error visibility trade-offs and consistency.Two concerns:
- UX: Errors are collapsed by default, potentially hiding critical failure information that users need to see immediately.
- Consistency: The
errorExplanation(lines 27-29) remains visible even when the error content is collapsed, creating an inconsistent disclosure pattern.Consider either expanding errors by default (
isExpanded = ref(true)) or moving the explanation inside the collapsible section for consistency.src/renderer/src/components/markdown/MarkdownRenderer.vue (3)
128-128: LGTM: Paragraph spacing improves readability.Changing from
my-0tomy-2adds vertical rhythm to markdown content, improving text readability.
137-159: LGTM: Comprehensive typography hierarchy.The heading styles establish a clear visual hierarchy:
- H1/H2 use larger sizes and bold/medium weights for primary sections
- H3/H4 provide intermediate levels with medium weight
- H5/H6 offer subtle distinction for deeper nesting
- List margins maintain consistent spacing
This enhances markdown rendering significantly.
174-197: LGTM: Well-structured table styling.The table styles provide:
- Proper visual containment (border, rounded corners, shadow)
- Distinct header styling with
bg-muted- Clean border collapse and cell separation
- Correct handling of last row borders
Based on learnings
src/renderer/src/components/chat-input/ChatInput.vue (1)
107-108: LGTM: Slot rename improves semantic clarity.The rename from
addon-buttonstoaddon-actionsbetter describes the slot's purpose (model selection, settings, etc.). NewThread.vue correctly uses the new slot name at line 18.src/renderer/src/components/NewThread.vue (2)
298-318: LGTM: Model update logic correctly preserved.The
handleModelUpdatefunction maintains the complete flow:
- Updates local
activeModelstate- Syncs with chat store configuration
- Persists user preference
- Closes the popover
The integration with the new Popover structure is clean and functional.
18-87: LGTM: Successful UI restructuring with improved separation of concerns.The refactoring achieves several improvements:
- Explicit state management: Replacing hover-based UI with explicit
modelSelectOpenandsettingsPopoverOpenrefs provides clearer state control- Better separation: Model selection and settings are now independent, logically separated popovers
- Preserved functionality: All core behaviors (model initialization, deep-link handling, handleSend) remain intact
- Cleaner architecture: Removal of hover event listeners simplifies the component
The slot integration with ChatInput's renamed
addon-actionsslot is correct and maintains the extension point pattern.
Comment on lines
+9
to
20
| <div v-else class="cursor-default select-none"> | ||
| <div | ||
| class="text-xs text-red-500 flex flex-row items-center group" | ||
| @click="isExpanded = !isExpanded" | ||
| > | ||
| {{ t('common.error.requestFailed') | ||
| }}<Icon | ||
| class="hidden group-hover:block ml-2 transition-all" | ||
| :class="[isExpanded ? ' rotate-90' : '']" | ||
| icon="lucide:chevron-right" | ||
| ></Icon> | ||
| </div> |
Contributor
There was a problem hiding this comment.
Add accessibility support for the collapsible error header.
The collapsible header should support keyboard navigation and include proper ARIA attributes for screen readers.
Apply this diff to improve accessibility:
<div
- class="text-xs text-red-500 flex flex-row items-center group"
+ role="button"
+ tabindex="0"
+ :aria-expanded="isExpanded"
+ aria-controls="error-content"
+ class="text-xs text-red-500 flex flex-row items-center group cursor-pointer"
@click="isExpanded = !isExpanded"
+ @keydown.enter="isExpanded = !isExpanded"
+ @keydown.space.prevent="isExpanded = !isExpanded"
>And add an id to the error content container:
<div
v-if="isExpanded"
+ id="error-content"
class="text-xs max-w-full break-all whitespace-pre-wrap leading-7 text-red-400"
>Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In src/renderer/src/components/message/MessageBlockError.vue around lines 9 to
20, the collapsible error header lacks keyboard accessibility and ARIA
attributes; update the header container to be operable via keyboard (add
tabindex="0" and a keydown handler that toggles isExpanded when Enter or Space
is pressed), add role="button", add :aria-expanded="isExpanded" and
aria-controls pointing to the error content id, and ensure the error content
container has a stable id (e.g., error-details-<unique> or a component-local id)
and a corresponding :aria-hidden="!isExpanded"; implement the keydown handler in
the component methods and keep click behavior intact so both mouse and keyboard
toggle the panel.
Comment on lines
+19
to
+51
| <Popover v-model:open="modelSelectOpen"> | ||
| <PopoverTrigger as-child> | ||
| <Button | ||
| variant="ghost" | ||
| class="flex items-center gap-1.5 h-7 px-2 rounded-md text-xs font-semibold text-muted-foreground hover:bg-muted/60 hover:text-foreground dark:text-white/70 dark:hover:bg-white/10 dark:hover:text-white" | ||
| size="sm" | ||
| > | ||
| <ModelIcon | ||
| class="w-4 h-4" | ||
| :model-id="activeModel.providerId" | ||
| :is-dark="themeStore.isDark" | ||
| ></ModelIcon> | ||
| <span class="text-xs font-semibold truncate max-w-[140px] text-foreground">{{ | ||
| name | ||
| }}</span> | ||
| <Badge | ||
| v-for="tag in activeModel.tags" | ||
| :key="tag" | ||
| variant="outline" | ||
| class="flex border-none rounded-none shadow-none items-center gap-1.5 px-2 h-full" | ||
| size="sm" | ||
| class="py-0 px-1 rounded-lg text-[10px]" | ||
| > | ||
| <ModelIcon | ||
| class="w-4 h-4" | ||
| :model-id="activeModel.providerId" | ||
| :is-dark="themeStore.isDark" | ||
| ></ModelIcon> | ||
| <!-- <Icon icon="lucide:message-circle" class="w-5 h-5 text-muted-foreground" /> --> | ||
| <h2 class="text-xs font-bold max-w-[150px] truncate">{{ name }}</h2> | ||
| <Badge | ||
| v-for="tag in activeModel.tags" | ||
| :key="tag" | ||
| variant="outline" | ||
| class="py-0 rounded-lg" | ||
| size="sm" | ||
| > | ||
| {{ t(`model.tags.${tag}`) }}</Badge | ||
| > | ||
| <Icon icon="lucide:chevron-right" class="w-4 h-4" /> | ||
| </Button> | ||
| </PopoverTrigger> | ||
| <PopoverContent align="start" class="p-0 w-80"> | ||
| <ModelSelect | ||
| :type="[ModelType.Chat, ModelType.ImageGeneration]" | ||
| @update:model="handleModelUpdate" | ||
| /> | ||
| </PopoverContent> | ||
| </Popover> | ||
| <ScrollablePopover | ||
| v-model:open="settingsPopoverOpen" | ||
| @update:open="handleSettingsPopoverUpdate" | ||
| align="start" | ||
| content-class="w-80" | ||
| :enable-scrollable="true" | ||
| > | ||
| <template #trigger> | ||
| <Button | ||
| class="w-7 h-full rounded-none border-none shadow-none transition-all duration-300" | ||
| :class="{ | ||
| 'w-0 opacity-0 p-0 overflow-hidden': !showSettingsButton && !isHovering, | ||
| 'w-7 opacity-100': showSettingsButton || isHovering | ||
| }" | ||
| size="icon" | ||
| variant="outline" | ||
| {{ t(`model.tags.${tag}`) }}</Badge | ||
| > | ||
| <Icon icon="lucide:settings-2" class="w-4 h-4" /> | ||
| </Button> | ||
| </template> | ||
| <ChatConfig | ||
| v-model:temperature="temperature" | ||
| v-model:context-length="contextLength" | ||
| v-model:max-tokens="maxTokens" | ||
| v-model:system-prompt="systemPrompt" | ||
| v-model:artifacts="artifacts" | ||
| v-model:thinking-budget="thinkingBudget" | ||
| v-model:enable-search="enableSearch" | ||
| v-model:forced-search="forcedSearch" | ||
| v-model:search-strategy="searchStrategy" | ||
| v-model:reasoning-effort="reasoningEffort" | ||
| v-model:verbosity="verbosity" | ||
| :context-length-limit="contextLengthLimit" | ||
| :max-tokens-limit="maxTokensLimit" | ||
| :model-id="activeModel?.id" | ||
| :provider-id="activeModel?.providerId" | ||
| :model-type="activeModel?.type" | ||
| <Icon icon="lucide:chevron-right" class="w-4 h-4 text-muted-foreground" /> | ||
| </Button> | ||
| </PopoverTrigger> | ||
| <PopoverContent align="end" class="w-80 p-0"> | ||
| <ModelSelect | ||
| :type="[ModelType.Chat, ModelType.ImageGeneration]" | ||
| @update:model="handleModelUpdate" | ||
| /> | ||
| </ScrollablePopover> | ||
| </div> | ||
| </PopoverContent> | ||
| </Popover> |
Contributor
There was a problem hiding this comment.
Add accessible labels for the model selection trigger.
The model selection button should include an aria-label for screen readers, especially important for keyboard navigation users.
Apply this diff:
<Button
variant="ghost"
class="flex items-center gap-1.5 h-7 px-2 rounded-md text-xs font-semibold text-muted-foreground hover:bg-muted/60 hover:text-foreground dark:text-white/70 dark:hover:bg-white/10 dark:hover:text-white"
size="sm"
+ :aria-label="t('model.select.trigger')"
>You'll need to add the corresponding i18n key. As per coding guidelines
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| <Popover v-model:open="modelSelectOpen"> | |
| <PopoverTrigger as-child> | |
| <Button | |
| variant="ghost" | |
| class="flex items-center gap-1.5 h-7 px-2 rounded-md text-xs font-semibold text-muted-foreground hover:bg-muted/60 hover:text-foreground dark:text-white/70 dark:hover:bg-white/10 dark:hover:text-white" | |
| size="sm" | |
| > | |
| <ModelIcon | |
| class="w-4 h-4" | |
| :model-id="activeModel.providerId" | |
| :is-dark="themeStore.isDark" | |
| ></ModelIcon> | |
| <span class="text-xs font-semibold truncate max-w-[140px] text-foreground">{{ | |
| name | |
| }}</span> | |
| <Badge | |
| v-for="tag in activeModel.tags" | |
| :key="tag" | |
| variant="outline" | |
| class="flex border-none rounded-none shadow-none items-center gap-1.5 px-2 h-full" | |
| size="sm" | |
| class="py-0 px-1 rounded-lg text-[10px]" | |
| > | |
| <ModelIcon | |
| class="w-4 h-4" | |
| :model-id="activeModel.providerId" | |
| :is-dark="themeStore.isDark" | |
| ></ModelIcon> | |
| <!-- <Icon icon="lucide:message-circle" class="w-5 h-5 text-muted-foreground" /> --> | |
| <h2 class="text-xs font-bold max-w-[150px] truncate">{{ name }}</h2> | |
| <Badge | |
| v-for="tag in activeModel.tags" | |
| :key="tag" | |
| variant="outline" | |
| class="py-0 rounded-lg" | |
| size="sm" | |
| > | |
| {{ t(`model.tags.${tag}`) }}</Badge | |
| > | |
| <Icon icon="lucide:chevron-right" class="w-4 h-4" /> | |
| </Button> | |
| </PopoverTrigger> | |
| <PopoverContent align="start" class="p-0 w-80"> | |
| <ModelSelect | |
| :type="[ModelType.Chat, ModelType.ImageGeneration]" | |
| @update:model="handleModelUpdate" | |
| /> | |
| </PopoverContent> | |
| </Popover> | |
| <ScrollablePopover | |
| v-model:open="settingsPopoverOpen" | |
| @update:open="handleSettingsPopoverUpdate" | |
| align="start" | |
| content-class="w-80" | |
| :enable-scrollable="true" | |
| > | |
| <template #trigger> | |
| <Button | |
| class="w-7 h-full rounded-none border-none shadow-none transition-all duration-300" | |
| :class="{ | |
| 'w-0 opacity-0 p-0 overflow-hidden': !showSettingsButton && !isHovering, | |
| 'w-7 opacity-100': showSettingsButton || isHovering | |
| }" | |
| size="icon" | |
| variant="outline" | |
| {{ t(`model.tags.${tag}`) }}</Badge | |
| > | |
| <Icon icon="lucide:settings-2" class="w-4 h-4" /> | |
| </Button> | |
| </template> | |
| <ChatConfig | |
| v-model:temperature="temperature" | |
| v-model:context-length="contextLength" | |
| v-model:max-tokens="maxTokens" | |
| v-model:system-prompt="systemPrompt" | |
| v-model:artifacts="artifacts" | |
| v-model:thinking-budget="thinkingBudget" | |
| v-model:enable-search="enableSearch" | |
| v-model:forced-search="forcedSearch" | |
| v-model:search-strategy="searchStrategy" | |
| v-model:reasoning-effort="reasoningEffort" | |
| v-model:verbosity="verbosity" | |
| :context-length-limit="contextLengthLimit" | |
| :max-tokens-limit="maxTokensLimit" | |
| :model-id="activeModel?.id" | |
| :provider-id="activeModel?.providerId" | |
| :model-type="activeModel?.type" | |
| <Icon icon="lucide:chevron-right" class="w-4 h-4 text-muted-foreground" /> | |
| </Button> | |
| </PopoverTrigger> | |
| <PopoverContent align="end" class="w-80 p-0"> | |
| <ModelSelect | |
| :type="[ModelType.Chat, ModelType.ImageGeneration]" | |
| @update:model="handleModelUpdate" | |
| /> | |
| </ScrollablePopover> | |
| </div> | |
| </PopoverContent> | |
| </Popover> | |
| <Popover v-model:open="modelSelectOpen"> | |
| <PopoverTrigger as-child> | |
| <Button | |
| variant="ghost" | |
| class="flex items-center gap-1.5 h-7 px-2 rounded-md text-xs font-semibold text-muted-foreground hover:bg-muted/60 hover:text-foreground dark:text-white/70 dark:hover:bg-white/10 dark:hover:text-white" | |
| size="sm" | |
| :aria-label="t('model.select.trigger')" | |
| > | |
| <ModelIcon | |
| class="w-4 h-4" | |
| :model-id="activeModel.providerId" | |
| :is-dark="themeStore.isDark" | |
| ></ModelIcon> | |
| <span class="text-xs font-semibold truncate max-w-[140px] text-foreground">{{ | |
| name | |
| }}</span> | |
| <Badge | |
| v-for="tag in activeModel.tags" | |
| :key="tag" | |
| variant="outline" | |
| class="py-0 px-1 rounded-lg text-[10px]" | |
| > | |
| {{ t(`model.tags.${tag}`) }}</Badge | |
| > | |
| <Icon icon="lucide:chevron-right" class="w-4 h-4 text-muted-foreground" /> | |
| </Button> | |
| </PopoverTrigger> | |
| <PopoverContent align="end" class="w-80 p-0"> | |
| <ModelSelect | |
| :type="[ModelType.Chat, ModelType.ImageGeneration]" | |
| @update:model="handleModelUpdate" | |
| /> | |
| </PopoverContent> | |
| </Popover> |
🤖 Prompt for AI Agents
In src/renderer/src/components/NewThread.vue around lines 19 to 51, the model
selection trigger Button is missing an accessible label for screen readers; add
an aria-label attribute to the Button that uses i18n (e.g.
t('model.select_button') or better t('model.select_button_with_name', { name }))
so it conveys purpose (optionally include the current model name for context),
and then add the corresponding i18n key(s) to the locale files following
existing translations (one key for a generic label and one with a name
placeholder if you include name interpolation).
Comment on lines
+53
to
+86
| <ScrollablePopover | ||
| v-model:open="settingsPopoverOpen" | ||
| align="end" | ||
| content-class="w-80" | ||
| :enable-scrollable="true" | ||
| > | ||
| <template #trigger> | ||
| <Button | ||
| class="h-7 w-7 rounded-md border border-border/60 hover:border-border dark:border-white/10 dark:bg-white/[0.04] dark:text-white/70 dark:hover:border-white/25 dark:hover:bg-white/15 dark:hover:text-white" | ||
| size="icon" | ||
| variant="outline" | ||
| > | ||
| <Icon icon="lucide:settings-2" class="w-4 h-4" /> | ||
| </Button> | ||
| </template> | ||
| <ChatConfig | ||
| v-model:temperature="temperature" | ||
| v-model:context-length="contextLength" | ||
| v-model:max-tokens="maxTokens" | ||
| v-model:system-prompt="systemPrompt" | ||
| v-model:artifacts="artifacts" | ||
| v-model:thinking-budget="thinkingBudget" | ||
| v-model:enable-search="enableSearch" | ||
| v-model:forced-search="forcedSearch" | ||
| v-model:search-strategy="searchStrategy" | ||
| v-model:reasoning-effort="reasoningEffort" | ||
| v-model:verbosity="verbosity" | ||
| :context-length-limit="contextLengthLimit" | ||
| :max-tokens-limit="maxTokensLimit" | ||
| :model-id="activeModel?.id" | ||
| :provider-id="activeModel?.providerId" | ||
| :model-type="activeModel?.type" | ||
| /> | ||
| </ScrollablePopover> |
Contributor
There was a problem hiding this comment.
Add accessible label for the settings trigger button.
The icon-only settings button lacks an accessible label for screen readers.
Apply this diff:
<Button
class="h-7 w-7 rounded-md border border-border/60 hover:border-border dark:border-white/10 dark:bg-white/[0.04] dark:text-white/70 dark:hover:border-white/25 dark:hover:bg-white/15 dark:hover:text-white"
size="icon"
variant="outline"
+ :aria-label="t('settings.trigger')"
>Add the corresponding i18n key. As per coding guidelines
Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In src/renderer/src/components/NewThread.vue around lines 53 to 86, the
icon-only settings trigger Button lacks an accessible label; add an accessible
label by setting the Button's aria-label (or :aria-label binding) to an i18n
string (e.g., $t('newThread.settingsButton')) and update the i18n resource files
with the corresponding key and translations; ensure the aria-label uses the
active locale via the existing i18n setup and keep the label succinct (e.g.,
"Settings") so screen readers can announce the button.
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 "@codex address that feedback".
Comment on lines
+190
to
+192
| th, | ||
| td { | ||
| @apply border-b not-last:border-r border-border; |
There was a problem hiding this comment.
Replace unsupported Tailwind variant usage in table cell styles
The new table styling uses @apply border-b not-last:border-r border-border. Tailwind in this repo only declares the default variants plus a custom dark variant in assets/style.css, and there is no plugin defining not-last. During a build Tailwind will error with “The variant not-last does not exist…”, causing the stylesheet compilation to fail. Use a supported approach such as last:border-r-0 or an arbitrary selector ([&:not(:last-child)]:border-r) instead.
Useful? React with 👍 / 👎.
zerob13
added a commit
that referenced
this pull request
Oct 22, 2025
* style(settings): format about page link handler (#1016) * style(ollama): format model config handlers (#1018) * fix: think content scroll issue (#1023) * fix: remove shimmer for think content * chore: update screen shot and fix scroll issue * chore: update markdown renderer * fix: import button bug and prevent backup overwriting during import (#1024) * fix(sync): fix import button bug and prevent backup overwriting during import * fix(sync): fix import button bug and prevent backup overwriting during import * fix(sync): fix import button bug and prevent backup overwriting during import * refactor(messageList): refactor message list ui components (#1026) * feat: remove new thread button, add clean button. * refactor(messageList): refactor message list ui components * feat: add configurable fields for chat settings - Introduced ConfigFieldHeader component for consistent field headers. - Added ConfigInputField, ConfigSelectField, ConfigSliderField, and ConfigSwitchField components for various input types. - Created types for field configurations in types.ts to standardize field definitions. - Implemented useChatConfigFields composable to manage field configurations dynamically. - Added useModelCapabilities and useModelTypeDetection composables for handling model-specific capabilities and requirements. - Developed useSearchConfig and useThinkingBudget composables for managing search and budget configurations. * feat: implement input history management in prompt input - Added `useInputHistory` composable for managing input history and navigation. - Implemented methods for setting, clearing, and confirming history placeholders. - Integrated arrow key navigation for browsing through input history. feat: enhance mention data handling in prompt input - Created `useMentionData` composable to aggregate mention data from selected files and MCP resources. - Implemented watchers to update mention data based on selected files, MCP resources, tools, and prompts. feat: manage prompt input configuration with store synchronization - Developed `usePromptInputConfig` composable for managing model configuration. - Implemented bidirectional sync between local config and chat store. - Added debounced watcher to reduce updates and improve performance. feat: streamline TipTap editor operations in prompt input - Introduced `usePromptInputEditor` composable for managing TipTap editor lifecycle and content transformation. - Implemented methods for handling mentions, pasting content, and clearing editor content. feat: handle file operations in prompt input - Created `usePromptInputFiles` composable for managing file selection, paste, and drag-drop operations. - Implemented methods for processing files, handling dropped files, and clearing selected files. feat: manage rate limit status in prompt input - Developed `useRateLimitStatus` composable for displaying and polling rate limit status. - Implemented methods for handling rate limit events and computing status icons, classes, and tooltips. * refactor(artifacts): migrate component logic to composables and update documentation - Refactor ArtifactDialog.vue to use composables for view mode, viewport size, code editor, and export functionality - Simplify HTMLArtifact.vue by removing drag-resize logic and using fixed viewport dimensions - Clean up MermaidArtifact.vue styling and structure - Update component refactoring guide to reflect new patterns and best practices - Adjust prompt input composable to allow delayed editor initialization - Update internationalization files for new responsive label * fix(lint): unused variables * fix(format): format code * CodeRabbit Generated Unit Tests: Add renderer unit tests for components and composables * feat: implement input history management in chat input component - Added `useInputHistory` composable for managing input history and placeholder navigation. - Implemented methods for setting, clearing, and confirming history placeholders. - Integrated arrow key navigation for cycling through input history. feat: enhance mention data handling in chat input - Created `useMentionData` composable to manage mention data aggregation. - Implemented watchers for selected files and MCP resources/tools/prompts to update mention data. feat: manage prompt input configuration and synchronization - Developed `usePromptInputConfig` composable for managing model configuration. - Implemented bidirectional sync between local config refs and chat store. - Added debounced watcher to reduce updates to the store. feat: manage prompt input editor operations - Introduced `usePromptInputEditor` composable for handling TipTap editor operations. - Implemented content transformation, mention insertion, and paste handling. - Added methods for handling editor updates and restoring focus. feat: handle prompt input files management - Created `usePromptInputFiles` composable for managing file operations in prompt input. - Implemented file selection, paste, drag-drop, and prompt files integration. feat: implement rate limit status management - Developed `useRateLimitStatus` composable for managing rate limit status display and polling. - Added methods for retrieving rate limit status icon, class, tooltip, and wait time formatting. * feat: enhance chat input component with context length management and settings integration * feat: update model configuration and enhance error handling in providers * feat: add MCP tools list component and integrate with chat settings feat: enhance artifact dialog with improved error handling and localization fix: update Mermaid artifact rendering error handling and localization fix: improve input settings error handling and state management fix: update drag and drop composable to handle drag events correctly fix: update Vitest configuration for better project structure and alias resolution * fix(i18n): add unknownError translation --------- Co-authored-by: deepinsect <deepinsect@github.com> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * feat: add Poe provider integration and icon support (#1028) * feat: add Poe provider integration and icon support * chore: format and lint --------- Co-authored-by: zerob13 <zerob13@gmail.com> * fix: make auto scroll works (#1030) * fix: allow settings window links to open externally (#1029) * fix(settings): allow target blank links * fix: harden settings window link handling * feat: enhance GitHub Copilot Device Flow with OAuth token management and API token retrieval (#1021) * feat: enhance GitHub Copilot Device Flow with OAuth token management and API token retrieval - Fixed request header for managing OAuth tokens and retrieving API tokens. - Enhanced model definitions and added new models for better compatibility. * fix: remove privacy related log * fix: OAuth 2.0 for slow_down response * fix: handle lint errors * fix: provider fetched from publicdb * fix(githubCopilotProvider): update request body logging format for clarity * fix(githubCopilotProvider): improve error handling and logging in device flow * feat(theme): fix message paragraph gap and toolcall block (#1031) Co-authored-by: deepinsect <deepinsect@github.com> * fix: scroll to bottom (#1034) * fix: add debounce for renderer * feat: add max wait for renderer * chore(deps): upgrade markdown renderer add worker support * chore: bump markdown version * fix(build): use es module worker format (#1037) * feat: remove function deleteOllamaModel (#1036) * feat: remove function deleteOllamaModel * fix(build): use es module worker format (#1037) --------- Co-authored-by: duskzhen <zerob13@gmail.com> * perf: update dependencies to use stream-monaco and bump vue-renderer-markdown version (#1038) * feat(theme): add markdown layout style and table style (#1039) * feat(theme): add markdown layout style and table style * fix(lint): remove props --------- Co-authored-by: deepinsect <deepinsect@github.com> * feat: support effort and verbosity (#1040) * chore: bump up version * feat: add jiekou.ai as LLM provider (#1041) * feat: add jiekou.ai as LLM provider * fix: change api type to jiekou --------- Co-authored-by: zerob13 <zerob13@gmail.com> * chore: update provider db --------- Co-authored-by: 韦伟 <xweimvp@gmail.com> Co-authored-by: Happer <ericted8810us@gmail.com> Co-authored-by: deepinsect <deepinsect@github.com> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> Co-authored-by: cp90 <153345481+cp90-pixel@users.noreply.github.com> Co-authored-by: Cedric <14017092+douyixuan@users.noreply.github.com> Co-authored-by: Simon He <57086651+Simon-He95@users.noreply.github.com> Co-authored-by: yyhhyyyyyy <yyhhyyyyyy8@gmail.com> Co-authored-by: cnJasonZ <gbdzxalbb@qq.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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
Release Notes
New Features
Style