docs: add GPT-Vis demo for bubble #288
Conversation
📝 Walkthrough📝 WalkthroughWalkthrough此次更改在多个文件中引入了与“GPT-Vis”相关的新功能和配置。在 Changes
Possibly related PRs
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 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 (
|
|
|
Bundle ReportBundle size has no change ✅ |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Outside diff range and nitpick comments (4)
components/bubble/demo/gpt-vis.tsx (3)
7-20: 建议将示例数据抽离为单独的常量建议将可视化数据从模板字符串中抽离出来，以提高代码的可维护性和可读性。
建议修改如下：
+const CHART_DATA = { + type: "line", + data: [ + {"time":2013,"value":59.3}, + {"time":2014,"value":64.4}, + // ... other data points + ], + axisXTitle: "year", + axisYTitle: "sale" +}; const text = ` **GPT-Vis**, Components for GPTs, generative AI, and LLM projects. Not only UI Components. [more...](https://github.com/antvis/GPT-Vis) \n\n Here's a visualization of Haidilao's food delivery revenue from 2013 to 2022. You can see a steady increase over the years, with notable *growth* particularly in recent years. \`\`\`vis-chart ${JSON.stringify(CHART_DATA, null, 2)} \`\`\` `;
22-22: 建议添加类型注解为了提高代码的可维护性和类型安全性，建议为
content参数添加明确的类型注解。建议修改如下：
-const RenderMarkdown: BubbleProps['messageRender'] = (content) => <GPTVis>{content}</GPTVis>; +const RenderMarkdown: BubbleProps['messageRender'] = (content: string) => <GPTVis>{content}</GPTVis>;
24-36: 建议添加错误边界处理考虑到 GPT-Vis 可能在渲染过程中出现错误，建议添加错误边界处理。
建议添加 ErrorBoundary 组件：
+class ChartErrorBoundary extends React.Component { + state = { hasError: false }; + + static getDerivedStateFromError() { + return { hasError: true }; + } + + render() { + if (this.state.hasError) { + return <div>图表渲染失败</div>; + } + return this.props.children; + } +} const App = () => { return ( + <ChartErrorBoundary> <Bubble typing={{ step: 30, interval: 300 }} content={text} messageRender={RenderMarkdown} avatar={{ src: 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*2Q5LRJ3LFPUAAAAAAAAAAAAADmJ7AQ/fmt.webp', }} variant="outlined" /> + </ChartErrorBoundary> ); };components/bubble/demo/gpt-vis.md (1)
Line range hint
5-8: 英文描述需要优化英文描述的语法需要改进，建议修改为：
-Cooperate with `@antv/GPT-Vis` to achieve customized rendering chart of LLM output. +Cooperate with `@antv/GPT-Vis` to achieve customized chart rendering for LLM output.🧰 Tools
🪛 LanguageTool
[uncategorized] ~7-~7: You might be missing the article “a” here.
Context: ...operate with@antv/GPT-Visto achieve customized rendering chart of LLM output.(AI_EN_LECTOR_MISSING_DETERMINER_A)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (8)
.dumirc.ts(1 hunks)components/bubble/__tests__/demo-extend.test.ts(1 hunks)components/bubble/__tests__/demo.test.ts(1 hunks)components/bubble/demo/gpt-vis.md(1 hunks)components/bubble/demo/gpt-vis.tsx(1 hunks)components/bubble/index.en-US.md(1 hunks)components/bubble/index.zh-CN.md(1 hunks)package.json(1 hunks)
🧰 Additional context used
🪛 LanguageTool
components/bubble/demo/gpt-vis.md
[uncategorized] ~7-~7: You might be missing the article “a” here.
Context: ...operate with @antv/GPT-Vis to achieve customized rendering chart of LLM output.
(AI_EN_LECTOR_MISSING_DETERMINER_A)
🔇 Additional comments (6)
components/bubble/__tests__/demo.test.ts (1)
3-6: 测试配置更改合理！
跳过 gpt-vis 演示测试的配置是正确的，因为该演示需要真实的浏览器环境而不是 jsdom。这种处理方式可以避免在不适合的环境中运行测试而导致的失败。
components/bubble/__tests__/demo-extend.test.ts (1)
3-6: 测试配置保持一致性！
与 demo.test.ts 保持了一致的配置，同样跳过了 gpt-vis 演示测试。这种一致性的处理方式确保了测试行为的可预测性。
components/bubble/index.zh-CN.md (1)
33-33: 文档示例顺序合理
新增的 GPT-Vis 示例放置在文档末尾是合适的，保持了文档的连贯性。
components/bubble/index.en-US.md (1)
32-32: 中英文文档保持一致
新增的 GPT-Vis 示例在中英文文档中的位置和描述保持一致，符合双语文档维护规范。
.dumirc.ts (1)
43-47: 构建优化配置正确！
外部依赖配置正确映射了 mapbox-gl 和 maplibre-gl，这有助于优化 GPT-Vis 的构建过程。
package.json (1)
100-100: 请验证 GPT-Vis 的版本兼容性
建议验证 @antv/gpt-vis 0.3.0 版本是否为最新的稳定版本，并确认其与项目的其他依赖没有兼容性问题。
✅ Verification successful
@antv/gpt-vis 版本兼容性验证完成
经验证：
- 当前使用的 0.3.0 版本是最新的稳定版本
- 项目仅在 bubble 组件的演示文件中使用该依赖，用于渲染 Markdown 内容
- 与项目的 peer dependencies（React、React DOM 和 Antd）没有冲突
- 使用方式符合预期，作为开发依赖使用合适
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查 GPT-Vis 的最新版本和已知问题
npm view @antv/gpt-vis versions --json | jq -r '.[-1]'
# 检查是否存在依赖冲突
npm ls @antv/gpt-vis
Length of output: 137
Script:
#!/bin/bash
# 检查项目中使用 @antv/gpt-vis 的地方
rg -l "@antv/gpt-vis"
# 检查 package.json 中的 peer dependencies
cat package.json | jq '.peerDependencies'
# 检查项目中的其他 AntV 相关依赖
cat package.json | jq '.dependencies, .devDependencies' | rg -i "antv"
Length of output: 285
Script:
#!/bin/bash
# 检查 gpt-vis demo 文件的具体使用方式
cat components/bubble/demo/gpt-vis.tsx
# 检查是否有相关的测试文件
fd -e test.tsx -e test.ts -e spec.tsx -e spec.ts gpt-vis
Length of output: 1444
components/bubble/demo/gpt-vis.md
Outdated
| ## zh-CN | ||
|
|
||
| 配合 `@antv/GPT-Vis` 实现大模型输出的图表渲染。 | ||
|
|
There was a problem hiding this comment.
🛠️ Refactor suggestion
建议添加示例代码
当前文档缺少具体的使用示例，建议添加：
- 基本的集成代码示例
- 数据格式示例
- 常见用例展示
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #288 +/- ##
=======================================
Coverage 91.13% 91.13%
=======================================
Files 66 66
Lines 1422 1422
Branches 379 364 -15
=======================================
Hits 1296 1296
Misses 126 126 ☔ View full report in Codecov by Sentry. |
Summary by CodeRabbit
gpt-vis组件，支持基于大语言模型输出的图表渲染。@antv/GPT-Vis的支持，提供了动态内容展示。gpt-vis.md文件，增加了中英文使用说明。GPT-Vis渲染图表的示例。devDependencies中添加了@antv/gpt-vis依赖。