docs(bubble): add think demo #138
Conversation
WalkthroughThe pull request adds a new "深度思考" section to the bubble component documentation, which now references a demo located in the Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Component as AXBubbleWithThink
participant Renderer as Markdown Renderer
User->>Component: Click "Start Thinking" button
Component->>Component: Update "think" state and append to "thinkContent"
Component->>Renderer: Call renderMarkdown() to format content
Renderer-->>Component: Return formatted markdown
Component->>User: Render Bubble with avatar, status, and final answer
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure. 🔧 ESLint
docs/examples/bubble/with-think.vueOops! Something went wrong! :( ESLint: 8.57.1 Error: Failed to load parser 'vue-eslint-parser' declared in '.eslintrc.js': Cannot find module 'vue-eslint-parser'
docs/examples-setup/bubble/with-think.vueOops! Something went wrong! :( ESLint: 8.57.1 Error: Failed to load parser 'vue-eslint-parser' declared in '.eslintrc.js': Cannot find module 'vue-eslint-parser'
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
✅ Deploy Preview for antd-design-x-vue ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (5)
docs/component/bubble.md (1)
100-106: Consider enhancing the demo description for clarity.The new section follows the documentation structure well, but the description "带深度思考" is quite minimal. Consider providing a more detailed explanation of what this demo showcases and its use cases, similar to other demo sections in the document.
docs/examples/bubble/with-think.vue (4)
17-21: Consider a safer approach to rendering markdown content.Using
v-htmlwith content processed by markdown-it bypasses Vue's built-in XSS protections. If you're only rendering trusted content, this might be acceptable, but it's worth exploring safer alternatives like DOMPurify or markdown-it plugins that sanitize HTML if any user input will be processed.
30-31: Consider providing more realistic demo content.The current thinking content is minimal. Consider expanding this with a more realistic example that better demonstrates the "deep thinking" process, perhaps with multiple steps or reasoning paths to showcase the capabilities.
- thinkContent.value += '> 好的，用户之前询问过我一些问题，我需要综合考虑，首先...'; + thinkContent.value += '> 好的，用户询问如何优化React应用性能，我需要综合考虑：\n\n' + + '1. **渲染优化**：\n' + + ' - 使用React.memo避免不必要的重渲染\n' + + ' - 实现shouldComponentUpdate\n\n' + + '2. **状态管理**：\n' + + ' - 优化Redux状态更新\n' + + ' - 使用useCallback和useMemo\n\n' + + '3. **代码分割**：\n' + + ' - 使用React.lazy和Suspense';
44-52: Improve accessibility for the collapse functionality.The current collapse button only has an icon, which may not be clear to all users or accessible to screen readers. Consider adding an aria-label or title to enhance accessibility.
type="text" size="small" style={{ background: 'transparent' }} icon={collapse.value ? <UpOutlined /> : <DownOutlined />} + aria-label={collapse.value ? "展开思考过程" : "收起思考过程"} + title={collapse.value ? "展开思考过程" : "收起思考过程"} onClick={() => { collapse.value = !collapse.value; }}
65-65: Add more meaningful answer content.The current answer is very brief and doesn't reflect a thoughtful response that would follow from a deep thinking process. Consider expanding this to demonstrate the value of the thinking component.
- answerContent.value += '思考完毕，这是我的答案。'; + answerContent.value += '经过深度思考，我认为优化React应用性能的关键在于减少不必要的渲染、高效管理状态和实现代码分割。\n\n' + + '具体建议：\n' + + '1. 使用React.memo、useMemo和useCallback来避免组件重渲染\n' + + '2. 采用虚拟列表处理大数据渲染\n' + + '3. 对路由实现代码分割，减小初始加载体积';
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
docs/component/bubble.md(1 hunks)docs/examples-setup/bubble/with-think.vue(1 hunks)docs/examples/bubble/with-think.vue(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- docs/examples-setup/bubble/with-think.vue
⏰ Context from checks skipped due to timeout of 90000ms (3)
- GitHub Check: Redirect rules - antd-design-x-vue
- GitHub Check: Header rules - antd-design-x-vue
- GitHub Check: Pages changed - antd-design-x-vue
|
|
||
| defineOptions({ name: 'AXBubbleWithThink' }); | ||
|
|
||
| const md = markdownit({ html: true, breaks: true }); |
There was a problem hiding this comment.
Security concern: Enabling HTML in markdown-it could lead to XSS vulnerabilities.
The markdown-it configuration has HTML rendering enabled with html: true. This could potentially lead to XSS vulnerabilities if the content contains malicious HTML. Consider disabling HTML or implementing a sanitization strategy if user input will be rendered.
-const md = markdownit({ html: true, breaks: true });
+const md = markdownit({ html: false, breaks: true });📝 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.
| const md = markdownit({ html: true, breaks: true }); | |
| const md = markdownit({ html: false, breaks: true }); |
| variant="borderless" | ||
| style={{ marginTop: '-24px' }} | ||
| typing | ||
| content={answerContent} |
There was a problem hiding this comment.
Fix the content prop usage.
The content prop is being passed a ref object directly, which may cause unexpected behavior. You should pass the .value property of the ref.
- content={answerContent}
+ content={answerContent.value}📝 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.
| content={answerContent} | |
| content={answerContent.value} |
|
作者你好，为什么这个demo没有merge进去？我根据这个demo写了一个setup语法的的demo，如果这个demo merge进去，我可以提个setup语法的demo的PR |
|
@quanbisen 近几天就会合并，非常欢迎pr❤️ |
已提PR：#299 |
Summary by CodeRabbit
Documentation
New Features