docs: add GPT-Vis demo for bubble (#278)

* docs: add chart demo for bubble

* docs: rename to gpt-vis

* test: ignore gpt-vis demo for temporary, need browser env not jsdom

---------

Co-authored-by: 🏎️ Imer <[email protected]>

.dumirc.ts

@@ -40,6 +40,11 @@ export default defineConfig({
   define: {
     antdReproduceVersion: version,
   },
+  externals: {
+    // optimize build of GPT-Vis
+    'mapbox-gl': 'mapboxgl',
+    'maplibre-gl': 'maplibregl',
+  },
   alias: {
     '@ant-design/x/lib': path.join(__dirname, 'components'),
     '@ant-design/x/es': path.join(__dirname, 'components'),

components/bubble/__tests__/demo-extend.test.ts

@@ -1,3 +1,6 @@
 import { extendTest } from '../../../tests/shared/demoTest';
 
-extendTest('bubble');
+extendTest('bubble', {
+  // Ignore gpt-vis demo, need browser env not jsdom
+  skip: ['gpt-vis'],
+});

components/bubble/__tests__/demo.test.ts

@@ -1,3 +1,6 @@
 import demoTest from '../../../tests/shared/demoTest';
 
-demoTest('bubble');
+demoTest('bubble', {
+  // Ignore gpt-vis demo, need browser env not jsdom
+  skip: ['gpt-vis'],
+});

components/bubble/demo/gpt-vis.md

@@ -0,0 +1,7 @@
+## zh-CN
+
+配合 `@antv/GPT-Vis` 实现大模型输出的图表渲染。
+
+## en-US
+
+Cooperate with `@antv/GPT-Vis` to achieve customized rendering chart of LLM output.

components/bubble/demo/gpt-vis.tsx

@@ -0,0 +1,38 @@
+import { Bubble } from '@ant-design/x';
+import type { BubbleProps } from '@ant-design/x';
+import { GPTVis } from '@antv/gpt-vis';
+/* eslint-disable react/no-danger */
+import React from 'react';
+
+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
+{
+  "type": "line",
+  "data": [{"time":2013,"value":59.3},{"time":2014,"value":64.4},{"time":2015,"value":68.9},{"time":2016,"value":74.4},{"time":2017,"value":82.7},{"time":2018,"value":91.9},{"time":2019,"value":99.1},{"time":2020,"value":101.6},{"time":2021,"value":114.4},{"time":2022,"value":121}],
+  "axisXTitle": "year",
+  "axisYTitle": "sale"
+}
+\`\`\`
+`;
+
+const RenderMarkdown: BubbleProps['messageRender'] = (content) => <GPTVis>{content}</GPTVis>;
+
+const App = () => {
+  return (
+    <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"
+    />
+  );
+};
+
+export default App;

components/bubble/index.en-US.md

@@ -29,6 +29,7 @@ Often used when chatting.
 <code src="./demo/list.tsx">Bubble List</code>
 <code src="./demo/bubble-custom.tsx">Semantic Custom</code>
 <code src="./demo/list-custom.tsx">Custom List Content</code>
+<code src="./demo/gpt-vis.tsx">Using GPT-Vis to render charts</code>
 
 ## API
 

components/bubble/index.zh-CN.md

@@ -30,6 +30,7 @@ demo:
 <code src="./demo/list.tsx">气泡列表</code>
 <code src="./demo/bubble-custom.tsx">语义化自定义</code>
 <code src="./demo/list-custom.tsx">自定义列表内容</code>
+<code src="./demo/gpt-vis.tsx">使用 GPT-Vis 渲染图表</code>
 
 ## API
 

package.json

@@ -97,6 +97,7 @@
   },
   "devDependencies": {
     "@ant-design/tools": "^18.0.2",
+    "@antv/gpt-vis": "^0.2.2",
     "@biomejs/biome": "^1.9.0",
     "@codecov/webpack-plugin": "^1.4.0",
     "@codesandbox/sandpack-react": "^2.19.8",