From 94e5b02c6b0964d6fe11ea74bd2b9cb058613f88 Mon Sep 17 00:00:00 2001
From: yunji <yunji.me@outlook.com>
Date: Mon, 2 Dec 2024 14:39:39 +0800
Subject: [PATCH] chore: note stream output

---
 components/bubble/demo/gpt-vis.md  |  4 ++--
 components/bubble/demo/gpt-vis.tsx | 32 +++++++++++++++++++++---------
 2 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/components/bubble/demo/gpt-vis.md b/components/bubble/demo/gpt-vis.md
index 92d2a37d..8c6357f9 100644
--- a/components/bubble/demo/gpt-vis.md
+++ b/components/bubble/demo/gpt-vis.md
@@ -1,7 +1,7 @@
 ## zh-CN
 
-配合 `@antv/GPT-Vis` 实现大模型输出的图表渲染。
+配合 `@antv/GPT-Vis` 实现大模型输出的图表渲染，支持模型流式输出。
 
 ## en-US
 
-Cooperate with `@antv/GPT-Vis` to achieve customized rendering chart of LLM output.
+Cooperate with `@antv/GPT-Vis` to achieve customized rendering chart of LLM stream output.
diff --git a/components/bubble/demo/gpt-vis.tsx b/components/bubble/demo/gpt-vis.tsx
index 14e538a2..60108181 100644
--- a/components/bubble/demo/gpt-vis.tsx
+++ b/components/bubble/demo/gpt-vis.tsx
@@ -1,6 +1,7 @@
 import { Bubble } from '@ant-design/x';
 import type { BubbleProps } from '@ant-design/x';
 import { GPTVis } from '@antv/gpt-vis';
+import { Button, Flex } from 'antd';
 /* eslint-disable react/no-danger */
 import React from 'react';
 
@@ -22,16 +23,29 @@ Here’s a visualization of Haidilao's food delivery revenue from 2013 to 2022.
 const RenderMarkdown: BubbleProps['messageRender'] = (content) => <GPTVis>{content}</GPTVis>;
 
 const App = () => {
+  const [rerenderKey, setRerenderKey] = React.useState(0);
+
   return (
-    <Bubble
-      typing={{ step: 20, interval: 150 }}
-      content={text}
-      messageRender={RenderMarkdown}
-      avatar={{
-        src: 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*2Q5LRJ3LFPUAAAAAAAAAAAAADmJ7AQ/fmt.webp',
-      }}
-      variant="outlined"
-    />
+    <Flex vertical gap="small" key={rerenderKey}>
+      <Button
+        style={{ alignSelf: 'flex-end' }}
+        onClick={() => {
+          setRerenderKey((prev) => prev + 1);
+        }}
+      >
+        ReRender
+      </Button>
+
+      <Bubble
+        typing={{ step: 20, interval: 150 }}
+        content={text}
+        messageRender={RenderMarkdown}
+        avatar={{
+          src: 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*2Q5LRJ3LFPUAAAAAAAAAAAAADmJ7AQ/fmt.webp',
+        }}
+        variant="outlined"
+      />
+    </Flex>
   );
 };