Skip to content

Conversation

Simon-He95
Copy link
Contributor

@Simon-He95 Simon-He95 commented Sep 24, 2025

Pull Request Description

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is.
*For example: I'm always frustrated when [...] *

Describe the solution you'd like
A clear and concise description of what you want to happen.

UI/UX changes for Desktop Application
If this PR introduces UI/UX changes, please describe them in detail.

  • Include screenshots or GIFs if applicable to visually demonstrate the changes.
  • Explain the reasoning behind the UI/UX decisions and how they improve the user experience of the desktop application.

Platform Compatibility Notes
If this PR has specific platform compatibility considerations (Windows, macOS, Linux), please describe them here.

  • Are there any platform-specific behaviors or code adjustments?
  • Have you tested on all relevant platforms?

Additional context
Add any other context about the pull request here.


Pull Request Description (中文)

你的功能请求是否与某个问题有关?请描述一下。
请对问题进行清晰扼要的描述。
*例如:我增加了 [...] 的功能 *

请描述你希望的解决方案
请对你希望实现的效果进行清晰扼要的描述。

桌面应用程序的 UI/UX 更改
如果此 PR 引入了 UI/UX 更改,请详细描述它们。

  • 如果适用,请包含屏幕截图或 GIF 以直观地演示更改。
  • 解释 UI/UX 决策背后的原因,以及它们如何改善桌面应用程序的用户体验。

平台兼容性注意事项
如果此 PR 具有特定的平台兼容性考虑因素(Windows、macOS、Linux),请在此处描述。

  • 是否有任何平台特定的行为或代码调整?
  • 你是否已在所有相关平台上进行过测试?

附加背景
在此处添加关于此 Pull Request 的任何其他背景信息。

Summary by CodeRabbit

  • Bug Fixes

    • Fixed code/pre blocks in Markdown views appearing with a transparent background, improving readability across themes.
  • Style

    • Updated Markdown styling so preformatted blocks now use the appropriate theme background and spacing, enhancing contrast and consistency in light/dark modes.
    • Improves legibility of code samples and aligns visuals with surrounding prose.
    • No changes to functionality or interactions; presentation only.

Copy link
Contributor

coderabbitai bot commented Sep 24, 2025

Walkthrough

Changed MarkdownRenderer.vue styling: switched the <style> block to lang="css" and removed the .prose pre { background: transparent !important; } rule. No JavaScript or component structure changes.

Changes

Cohort / File(s) Summary
Styling adjustment
src/renderer/src/components/markdown/MarkdownRenderer.vue
Style block now uses lang="css"; removed .prose pre { background: transparent !important; } rule. No JS/component logic changes.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Possibly related PRs

Poem

I nibble CSS like clover leaves,
A pre tag’s coat now subtly weaves—
No script disturbed, just hues set free,
In prose I hop, more naturally.
Tap-tap my paws: styles align—
A tidy warren, neat design. 🐇✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)
Check name Status Explanation Resolution
Description Check ⚠️ Warning The PR description contains only the repository template text and has not been filled in with any concrete details about the problem, the implemented solution, UI/UX impact, platform compatibility, or testing steps, so it does not satisfy the repository's required description template. Please replace the template placeholders with a clear problem statement and the specific change (for example, note that src/renderer/src/components/markdown/MarkdownRenderer.vue had its style tag changed to lang="css" and the .prose pre { background: transparent !important; } rule removed), describe any UI/UX impact and include before/after screenshots if applicable, list platform compatibility and testing performed, and provide any instructions or notes needed for reviewers to validate the change.
✅ Passed checks (2 passed)
Check name Status Explanation
Title Check ✅ Passed The title "fix(thinkingBlock): pre style" is concise and directly relates to the main change in the diff (CSS adjustment for pre blocks in the thinkingBlock/Markdown renderer), so it accurately summarizes the primary change and is understandable to teammates.
Docstring Coverage ✅ Passed No functions found in the changes. Docstring coverage check skipped.
✨ Finishing touches
🧪 Generate unit tests
  • Create PR with unit tests
  • Post copyable unit tests in a comment

Tip

👮 Agentic pre-merge checks are now available in preview!

Pro plan users can now enable pre-merge checks in their settings to enforce checklists before merging PRs.

  • Built-in checks – Quickly apply ready-made checks to enforce title conventions, require pull request descriptions that follow templates, validate linked issues for compliance, and more.
  • Custom agentic checks – Define your own rules using CodeRabbit’s advanced agentic capabilities to enforce organization-specific policies and workflows. For example, you can instruct CodeRabbit’s agent to verify that API documentation is updated whenever API schema files are modified in a PR. Note: Upto 5 custom checks are currently allowed during the preview period. Pricing for this feature will be announced in a few weeks.

Please see the documentation for more information.

Example:

reviews:
  pre_merge_checks:
    custom_checks:
      - name: "Undocumented Breaking Changes"
        mode: "warning"
        instructions: |
          Pass/fail criteria: All breaking changes to public APIs, CLI flags, environment variables, configuration keys, database schemas, or HTTP/GraphQL endpoints must be documented in the "Breaking Change" section of the PR description and in CHANGELOG.md. Exclude purely internal or private changes (e.g., code not exported from package entry points or explicitly marked as internal).

Please share your feedback with us on this Discord post.


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.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 0

🧹 Nitpick comments (3)
src/renderer/src/components/markdown/MarkdownRenderer.vue (3)

25-29: Translate comments to English per repo guidelines

Repo rule: use English for all comments/logs. Please translate these Chinese comments.


78-85: Translate block comment to English (keeps intent clear for future contributors)

Same guideline—consider providing an English version of this explanatory comment.


58-86: Verify code-block backgrounds across light/dark themes

No .prose pre or global pre background overrides found. Repository contains explicit .code backgrounds in src/main/presenter/threadPresenter/index.ts (≈lines 3454 and 3489) that set dark/light code backgrounds and colors; confirm CodeBlockNode + .prose / dark:prose-invert don’t produce double backgrounds or low-contrast text — centralize background handling in CodeBlockNode if needed.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between dc4d824 and fc54855.

📒 Files selected for processing (1)
  • src/renderer/src/components/markdown/MarkdownRenderer.vue (1 hunks)
🧰 Additional context used
📓 Path-based instructions (15)
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.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.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.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.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.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.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.vue
**/*.{ts,tsx,js,vue}

📄 CodeRabbit inference engine (CLAUDE.md)

Use English for all logs and comments

Files:

  • src/renderer/src/components/markdown/MarkdownRenderer.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/markdown/MarkdownRenderer.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.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.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/markdown/MarkdownRenderer.vue
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/markdown/MarkdownRenderer.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/markdown/MarkdownRenderer.vue
src/renderer/**/*.vue

📄 CodeRabbit inference engine (AGENTS.md)

Name Vue components in PascalCase (e.g., ChatInput.vue)

Files:

  • src/renderer/src/components/markdown/MarkdownRenderer.vue
🧠 Learnings (5)
📓 Common learnings
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.
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 template syntax for declarative rendering.
Learnt from: CR
PR: ThinkInAIXYZ/deepchat#0
File: .cursor/rules/vue-best-practices.mdc:0-0
Timestamp: 2025-07-21T01:47:28.817Z
Learning: Applies to src/renderer/src/**/*.vue : Use scoped styles to prevent CSS conflicts between components
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 Shadcn Vue, Radix Vue, and Tailwind for components and styling.
📚 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
📚 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 template syntax for declarative rendering.

Applied to files:

  • src/renderer/src/components/markdown/MarkdownRenderer.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 Shadcn Vue, Radix Vue, and Tailwind for components and styling.

Applied to files:

  • src/renderer/src/components/markdown/MarkdownRenderer.vue
📚 Learning: 2025-07-21T01:47:28.817Z
Learnt from: CR
PR: ThinkInAIXYZ/deepchat#0
File: .cursor/rules/vue-best-practices.mdc:0-0
Timestamp: 2025-07-21T01:47:28.817Z
Learning: Applies to src/renderer/src/**/*.vue : Use scoped styles to prevent CSS conflicts between components

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 (1)
src/renderer/src/components/markdown/MarkdownRenderer.vue (1)

58-86: Confirm CSS nesting/@apply still compile with lang="css"

This block uses nested selectors and Tailwind @apply. With lang="css", PostCSS must still process SFC styles. If the build previously relied on lang="postcss", please confirm no regressions in the pipeline.

Copy link
Collaborator

@yyhhyyyyyy yyhhyyyyyy left a comment

Choose a reason for hiding this comment

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

LGTM

@yyhhyyyyyy yyhhyyyyyy merged commit 5876d61 into ThinkInAIXYZ:dev Sep 24, 2025
2 checks passed
zerob13 added a commit that referenced this pull request Sep 26, 2025
* fix: katex style (#926)

* refactor: reorganize artifact processing logic and improve attribute parsing (#927)

* fix(thinkingBlock): pre style (#930)

* refactor: remove DOMPurify dependency and replace MessageBlockThink `v-html` with vue-markdown-renderer (#931)

* refactor: remove DOMPurify dependency and replace MessageBlockThink `v-html` with vue-markdown-renderer

* chore: update

* feat: add Qwen3-VL and Qwen3-Max 0924 (#932)

* refactor: update vue-renderer-markdown to 0.0.54-beta.6 and remove Re… (#934)

* refactor: update vue-renderer-markdown to 0.0.54-beta.6 and remove ReferenceNode component

* chore: format

* chore: version 0.3.7

---------

Co-authored-by: Simon He <[email protected]>
Co-authored-by: yyhhyyyyyy <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants