@agentscope-ai/chat 1.1.20 → 1.1.22

package/components/Bubble/demo/assistantWithErrorStatus.tsx

@@ -0,0 +1,102 @@
+import { Accordion, Bubble, DefaultCards } from "@agentscope-ai/chat";
+import { Flex } from "antd";
+import { SparkCopyLine, SparkThumbsUpLine, SparkThumbsDownLine, SparkReplaceLine } from '@agentscope-ai/icons';
+
+function footerCard() {
+  return {
+    code: 'Footer',
+    data: {
+      left: <DefaultCards.FooterActions data={[
+        {
+          icon: <SparkCopyLine />, onClick: () => {
+          }
+        },
+        {
+          icon: <SparkThumbsUpLine />, onClick: () => {
+          }
+        },
+        {
+          icon: <SparkThumbsDownLine />, onClick: () => {
+          }
+        },
+        {
+          icon: <SparkReplaceLine />, onClick: () => {
+          }
+        },
+      ]} />,
+    },
+  }
+}
+
+export default function () {
+  return <Flex vertical gap={32}>
+    <Bubble
+      cards={[
+        {
+          code: 'Text',
+          data: {
+            content: `City Pop, short for City Pop, is a genre of music that originated in Japan during the late 1970s and early 1980s. It blends elements of jazz, folk, easy listening, and AOR (Adult Oriented Rock) with a distinctly urban feel. The term "City Pop" often evokes images of the sophisticated, stylish, and sometimes nostalgic lifestyle of Tokyo and other major Japanese cities during this period.
+City Pop is characterized by its smooth melodies, mellow rhythms, and often dreamy or introspective lyrics. Common themes include city life, summer vibes, nature, and romantic encounters. The music is frequently associated with a particular aesthetic that reflects the fashion, design, and cultural trends of urban Japan in the 1980s.
+Some notable City Pop artists include Mariya Takeuchi, known for her iconic song " Plastic Love," and Joe Hisaishi, a composer famous for his work on Studio Ghibli films, though he is not strictly considered a City Pop artist.
+Today, City Pop has experienced a resurgence in popularity, particularly among younger generations who appreciate its unique sound and the nostalgic value it holds.`
+          },
+        },
+        {
+          code: 'Interrupted',
+          data: {
+            title: 'Answers have stopped',
+            type: 'interrupted',
+          },
+        },
+        footerCard(),
+      ]}
+      role="assistant" />
+
+    <Bubble
+      cards={[
+        {
+          code: 'Text',
+          data: {
+            content: `City Pop, short for City Pop, is a genre of music that originated in Japan during the late 1970s and early 1980s. It blends elements of jazz, folk, easy listening, and AOR (Adult Oriented Rock) with a distinctly urban feel. The term "City Pop" often evokes images of the sophisticated, stylish, and sometimes nostalgic lifestyle of Tokyo and other major Japanese cities during this period.
+City Pop is characterized by its smooth melodies, mellow rhythms, and often dreamy or introspective lyrics. Common themes include city life, summer vibes, nature, and romantic encounters. The music is frequently associated with a particular aesthetic that reflects the fashion, design, and cultural trends of urban Japan in the 1980s.
+Some notable City Pop artists include Mariya Takeuchi, known for her iconic song " Plastic Love," and Joe Hisaishi, a composer famous for his work on Studio Ghibli films, though he is not strictly considered a City Pop artist.
+Today, City Pop has experienced a resurgence in popularity, particularly among younger generations who appreciate its unique sound and the nostalgic value it holds.`
+          },
+        },
+        {
+          code: 'Interrupted',
+          data: {
+            type: 'error',
+            title: 'Network Error',
+          },
+        },
+        footerCard(),
+      ]}
+      role="assistant" />
+
+    <Bubble
+      cards={[
+        {
+          code: 'Text',
+          data: {
+            content: `City Pop, short for City Pop, is a genre of music that originated in Japan during the late 1970s and early 1980s. It blends elements of jazz, folk, easy listening, and AOR (Adult Oriented Rock) with a distinctly urban feel. The term "City Pop" often evokes images of the sophisticated, stylish, and sometimes nostalgic lifestyle of Tokyo and other major Japanese cities during this period.
+City Pop is characterized by its smooth melodies, mellow rhythms, and often dreamy or introspective lyrics. Common themes include city life, summer vibes, nature, and romantic encounters. The music is frequently associated with a particular aesthetic that reflects the fashion, design, and cultural trends of urban Japan in the 1980s.
+Some notable City Pop artists include Mariya Takeuchi, known for her iconic song " Plastic Love," and Joe Hisaishi, a composer famous for his work on Studio Ghibli films, though he is not strictly considered a City Pop artist.
+Today, City Pop has experienced a resurgence in popularity, particularly among younger generations who appreciate its unique sound and the nostalgic value it holds.`
+          },
+        },
+        {
+          code: 'Interrupted',
+          data: {
+            type: 'error',
+            title: 'Network Error',
+            desc: 'This is a description this is a description  this is a description this is a description',
+          },
+        },
+        footerCard(),
+      ]}
+      role="assistant" />
+
+
+  </Flex>
+}

package/components/Bubble/demo/assistantWithImage.tsx

@@ -0,0 +1,46 @@
+import { Bubble, DefaultCards } from "@agentscope-ai/chat";
+import { SparkCopyLine, SparkThumbsUpLine, SparkThumbsDownLine, SparkReplaceLine } from '@agentscope-ai/icons';
+
+
+export default function () {
+  return <Bubble cards={[
+    {
+      code: 'Text',
+      data: {
+        content: `City Pop, short for City Pop, is a genre of music that originated in Japan during the late 1970s and early 1980s. It blends elements of jazz, folk, easy listening, and AOR (Adult Oriented Rock) with a distinctly urban feel. The term "City Pop" often evokes images of the sophisticated, stylish, and sometimes nostalgic lifestyle of Tokyo and other major Japanese cities during this period.
+City Pop is characterized by its smooth melodies, mellow rhythms, and often dreamy or introspective lyrics. Common themes include city life, summer vibes, nature, and romantic encounters. The music is frequently associated with a particular aesthetic that reflects the fashion, design, and cultural trends of urban Japan in the 1980s.
+Some notable City Pop artists include Mariya Takeuchi, known for her iconic song " Plastic Love," and Joe Hisaishi, a composer famous for his work on Studio Ghibli films, though he is not strictly considered a City Pop artist.
+Today, City Pop has experienced a resurgence in popularity, particularly among younger generations who appreciate its unique sound and the nostalgic value it holds.
+
+![](https://gw.alicdn.com/imgextra/i4/O1CN01sjZ4Uu1erFDOC6IkA_!!6000000003924-2-tps-396-224.png)`
+      },
+    }, {
+      code: 'Footer',
+      data: {
+        left: <DefaultCards.FooterActions data={[
+          {
+            icon: <SparkCopyLine />, onClick: () => {
+            }
+          },
+          {
+            icon: <SparkThumbsUpLine />, onClick: () => {
+            }
+          },
+          {
+            icon: <SparkThumbsDownLine />, onClick: () => {
+            }
+          },
+          {
+            icon: <SparkReplaceLine />, onClick: () => {
+            }
+          },
+        ]} />,
+      },
+    }
+
+  ]}
+
+
+
+    role="assistant"></Bubble>
+}

package/components/Bubble/demo/assistantWithProcess.tsx

@@ -0,0 +1,103 @@
+import { CodeBlock } from "@agentscope-ai/design";
+import { Accordion, Bubble, DefaultCards } from "@agentscope-ai/chat";
+import { SparkCopyLine, SparkThumbsUpLine, SparkThumbsDownLine, SparkReplaceLine, SparkCheckCircleLine } from '@agentscope-ai/icons';
+
+import { Flex } from "antd";
+
+const input = JSON.stringify({
+  'query': 'What is city pop?',
+  'top_k': 1,
+  'threshold': 0.5,
+  'return_metadata': true,
+});
+
+const output = JSON.stringify({
+  'results': [
+    {
+      'score': 0.9999999999999998,
+      'metadata': {
+        'source': 'https://en.wikipedia.org/wiki/City_population',
+        'title': 'City population',
+      },
+      'content': 'city pop, short for city pop, is a genre of music that originated in japan during the late 1970s and early 1980s. it blends elements of jazz, folk, easy listening, and aor (adult oriented rock) with a distinctly urban feel. the term "city pop" often evokes images of the sophisticated, stylish, and sometimes nostalgic lifestyle of tokyo and other major japanese cities during this period.'
+    }
+  ]
+
+})
+function MutiProcess(props) {
+  return <Accordion
+    title="Completed"
+    status="finished"
+    defaultOpen
+    steps={[{
+      icon: <SparkCheckCircleLine />,
+      iconLine: true,
+      title: 'Knowledge base search',
+      rightChildren: <span>52.21ms</span>,
+      children: <Accordion.BodyContent headerLeft="What is city pop?" headerRight="Similarity: 78%">
+        <div style={{ padding: 12 }}>
+          city pop, short for city pop, is a genre of music that originated in japan during the late 1970s and early 1980s. it blends elements of jazz, folk, easy listening, and aor (adult oriented rock) with a distinctly urban feel. the term "city pop" often evokes images of the sophisticated, stylish, and sometimes nostalgic lifestyle of tokyo and other major japanese cities during this period.
+          city pop is characterized by its smooth melodies, mellow rhythms, and often dreamy or introspective lyrics. common themes include city life, summer vibes, nature, and romantic encounters. the music is frequently associated with a particular aesthetic that reflects the fashion, design, and cultural trends of urban japan in the 1980s.
+          some notable city pop artists include mariya takeuchi, known for her iconic song " plastic love," and joe hisaishi, a composer famous for his work on studio ghibli films, though he is not strictly considered a city pop artist.
+        </div>
+      </Accordion.BodyContent>,
+    }, {
+      defaultOpen: true,
+      icon: <SparkCheckCircleLine />,
+      iconLine: true,
+      title: 'Long Memory',
+      children: <Flex gap={8} vertical>
+        <Accordion.BodyContent headerLeft="input">
+          <CodeBlock language="json" value={input} />
+        </Accordion.BodyContent>
+        <Accordion.BodyContent headerLeft="output">
+          <CodeBlock language="json" value={output} />
+        </Accordion.BodyContent>
+      </Flex>,
+    }
+    ]}
+  >
+  </Accordion>
+}
+
+export default function () {
+  return <Bubble cards={[
+    {
+      code: 'CustomCard',
+      data: {},
+      component: MutiProcess,
+    },
+    {
+      code: 'Text',
+      data: {
+        content: `City Pop, short for City Pop, is a genre of music that originated in Japan during the late 1970s and early 1980s. It blends elements of jazz, folk, easy listening, and AOR (Adult Oriented Rock) with a distinctly urban feel. The term "City Pop" often evokes images of the sophisticated, stylish, and sometimes nostalgic lifestyle of Tokyo and other major Japanese cities during this period.
+City Pop is characterized by its smooth melodies, mellow rhythms, and often dreamy or introspective lyrics. Common themes include city life, summer vibes, nature, and romantic encounters. The music is frequently associated with a particular aesthetic that reflects the fashion, design, and cultural trends of urban Japan in the 1980s.
+Some notable City Pop artists include Mariya Takeuchi, known for her iconic song " Plastic Love," and Joe Hisaishi, a composer famous for his work on Studio Ghibli films, though he is not strictly considered a City Pop artist.
+Today, City Pop has experienced a resurgence in popularity, particularly among younger generations who appreciate its unique sound and the nostalgic value it holds.`
+      },
+    }, {
+      code: 'Footer',
+      data: {
+        left: <DefaultCards.FooterActions data={[
+          {
+            icon: <SparkCopyLine />, onClick: () => {
+            }
+          },
+          {
+            icon: <SparkThumbsUpLine />, onClick: () => {
+            }
+          },
+          {
+            icon: <SparkThumbsDownLine />, onClick: () => {
+            }
+          },
+          {
+            icon: <SparkReplaceLine />, onClick: () => {
+            }
+          },
+        ]} />,
+      },
+    }
+  ]}
+    role="assistant"></Bubble>
+}

package/components/Bubble/demo/assistantWithSearch.tsx

@@ -0,0 +1,69 @@
+import { SparkDeepSearchLine } from "@agentscope-ai/icons";
+import { Accordion, Bubble, DefaultCards } from "@agentscope-ai/chat";
+import { SparkCopyLine, SparkThumbsUpLine, SparkThumbsDownLine, SparkReplaceLine, SparkCheckCircleLine } from '@agentscope-ai/icons';
+
+function SearchProcess(props) {
+  return <Accordion
+    defaultOpen
+    status="finished"
+    icon={<SparkDeepSearchLine />}
+    title={"Searching from 10 pages"}
+    steps={[{
+      icon: <SparkCheckCircleLine />,
+      title: 'File analysis',
+    }, {
+      icon: <SparkCheckCircleLine />,
+      title: 'Url analysis',
+    }]}
+  >
+  </Accordion>
+}
+
+export default function () {
+  return <Bubble cards={[
+    {
+      code: 'CustomCard',
+      data: {},
+      component: SearchProcess,
+    },
+    {
+      code: 'Text',
+      data: {
+        citations: [
+          {
+            url: 'https://www.zhihu.com/question/48784242',
+            content: 'https://www.zhihu.com/question/48784242',
+            title: 'What is city pop?',
+          }
+        ],
+        content: `City Pop[1], short for City Pop, is a genre of music that originated in Japan during the late 1970s and early 1980s. It blends elements of jazz, folk, easy listening, and AOR (Adult Oriented Rock) with a distinctly urban feel. The term "City Pop" often evokes images of the sophisticated, stylish, and sometimes nostalgic lifestyle of Tokyo and other major Japanese cities during this period.
+City Pop is characterized by its smooth melodies, mellow rhythms, and often dreamy or introspective lyrics. Common themes include city life, summer vibes, nature, and romantic encounters. The music is frequently associated with a particular aesthetic that reflects the fashion, design, and cultural trends of urban Japan in the 1980s.
+Some notable City Pop artists include Mariya Takeuchi, known for her iconic song " Plastic Love," and Joe Hisaishi, a composer famous for his work on Studio Ghibli films, though he is not strictly considered a City Pop artist.
+Today, City Pop has experienced a resurgence in popularity, particularly among younger generations who appreciate its unique sound and the nostalgic value it holds.[1]`
+      },
+    }, {
+      code: 'Footer',
+      data: {
+        left: <DefaultCards.FooterActions data={[
+          {
+            icon: <SparkCopyLine />, onClick: () => {
+            }
+          },
+          {
+            icon: <SparkThumbsUpLine />, onClick: () => {
+            }
+          },
+          {
+            icon: <SparkThumbsDownLine />, onClick: () => {
+            }
+          },
+          {
+            icon: <SparkReplaceLine />, onClick: () => {
+            }
+          },
+        ]} />,
+      },
+    }
+  ]}
+    role="assistant"></Bubble>
+}

package/components/Bubble/demo/assistantWithThinking.tsx

@@ -0,0 +1,54 @@
+import { Bubble, DefaultCards } from "@agentscope-ai/chat";
+import { SparkCopyLine, SparkThumbsUpLine, SparkThumbsDownLine, SparkReplaceLine } from '@agentscope-ai/icons';
+
+
+export default function () {
+  return <Bubble cards={[
+    {
+      code: 'DeepThink',
+      data: {
+        content: `Okay, the user is asking about "citypop." Let me start by recalling what I know about that term. I remember that City Pop is a genre of music, but I need to make sure I'm accurate.
+
+First, when did City Pop originate? I think it was in Japan during the late 1970s and 1980s. That makes sense because Japan's economy was booming then, leading to a vibrant urban culture. The genre probably blends Western styles like funk, jazz, and disco with Japanese pop elements. Artists like Tatsuro Yamashita and Mariya Takeuchi come to mind. Oh, and there's that song "Plastic Love" by Mariya Takeuchi that went viral online recently, which might have sparked renewed interest.
+
+I should also mention the themes of City Pop songs—they often reflect city life, romance, and leisure, fitting the upbeat and cosmopolitan vibe of the time. The visual style associated with it includes retro anime and vibrant cityscapes, which adds to its aesthetic appeal. It's interesting how the internet, especially platforms like YouTube and Spotify, helped revive this genre internationally. Maybe I should note that connection between modern digital culture and the resurgence of City Pop.
+
+Wait, are there any subgenres or key characteristics I should highlight? The use of synthesizers, smooth vocals, and lush production are typical. Also, City Pop was influenced by yacht rock and soft rock from the West. It's important to link it to Japan's economic bubble era, as that context explains the music's optimistic and luxurious feel.
+
+I need to ensure I don't confuse it with other Japanese genres like J-pop or Enka. City Pop is distinct in its fusion with Western sounds. Including notable albums, like Tatsuro Yamashita's "For You" or Anri's "Timely!!", could be helpful. Oh, and the connection to future funk and vaporwave genres that sample City Pop tracks is a good point for its modern influence.`,
+      },
+    },
+    {
+      code: 'Text',
+      data: {
+        content: `City Pop, short for City Pop, is a genre of music that originated in Japan during the late 1970s and early 1980s. It blends elements of jazz, folk, easy listening, and AOR (Adult Oriented Rock) with a distinctly urban feel. The term "City Pop" often evokes images of the sophisticated, stylish, and sometimes nostalgic lifestyle of Tokyo and other major Japanese cities during this period.
+City Pop is characterized by its smooth melodies, mellow rhythms, and often dreamy or introspective lyrics. Common themes include city life, summer vibes, nature, and romantic encounters. The music is frequently associated with a particular aesthetic that reflects the fashion, design, and cultural trends of urban Japan in the 1980s.
+Some notable City Pop artists include Mariya Takeuchi, known for her iconic song " Plastic Love," and Joe Hisaishi, a composer famous for his work on Studio Ghibli films, though he is not strictly considered a City Pop artist.
+Today, City Pop has experienced a resurgence in popularity, particularly among younger generations who appreciate its unique sound and the nostalgic value it holds.`
+      },
+    }, {
+      code: 'Footer',
+      data: {
+        left: <DefaultCards.FooterActions data={[
+          {
+            icon: <SparkCopyLine />, onClick: () => {
+            }
+          },
+          {
+            icon: <SparkThumbsUpLine />, onClick: () => {
+            }
+          },
+          {
+            icon: <SparkThumbsDownLine />, onClick: () => {
+            }
+          },
+          {
+            icon: <SparkReplaceLine />, onClick: () => {
+            }
+          },
+        ]} />,
+      },
+    }
+  ]}
+    role="assistant"></Bubble>
+}

package/components/Bubble/demo/basic.tsx

@@ -0,0 +1,55 @@
+import { Bubble, DefaultCards } from '@agentscope-ai/chat';
+import { Flex } from 'antd';
+import { SparkCopyLine, SparkThumbsUpLine, SparkThumbsDownLine, SparkReplaceLine } from '@agentscope-ai/icons';
+
+
+export default function () {
+  return <Flex vertical gap={24}>
+    <Bubble cards={[
+      {
+        code: 'Text',
+        data: {
+          content: 'what is citypop'
+        }
+      },
+    ]} role="user"></Bubble>
+    <Bubble cards={[
+      {
+        code: 'Text',
+        data: {
+          content: `City Pop, short for City Pop, is a genre of music that originated in Japan during the late 1970s and early 1980s. It blends elements of jazz, folk, easy listening, and AOR (Adult Oriented Rock) with a distinctly urban feel. The term "City Pop" often evokes images of the sophisticated, stylish, and sometimes nostalgic lifestyle of Tokyo and other major Japanese cities during this period.
+City Pop is characterized by its smooth melodies, mellow rhythms, and often dreamy or introspective lyrics. Common themes include city life, summer vibes, nature, and romantic encounters. The music is frequently associated with a particular aesthetic that reflects the fashion, design, and cultural trends of urban Japan in the 1980s.
+Some notable City Pop artists include Mariya Takeuchi, known for her iconic song " Plastic Love," and Joe Hisaishi, a composer famous for his work on Studio Ghibli films, though he is not strictly considered a City Pop artist.
+Today, City Pop has experienced a resurgence in popularity, particularly among younger generations who appreciate its unique sound and the nostalgic value it holds.`
+        },
+      }, {
+        code: 'Footer',
+        data: {
+          left: <DefaultCards.FooterActions data={[
+            {
+              icon: <SparkCopyLine />, onClick: () => {
+              }
+            },
+            {
+              icon: <SparkThumbsUpLine />, onClick: () => {
+              }
+            },
+            {
+              icon: <SparkThumbsDownLine />, onClick: () => {
+              }
+            },
+
+            {
+              icon: <SparkReplaceLine />, onClick: () => {
+              }
+            },
+          ]} />,
+        },
+      }
+
+    ]}
+      role="assistant"></Bubble>
+    {/* 空消息的时候会有 loading */}
+    {/* <Bubble msgStatus="generating" role="assistant"></Bubble> */}
+  </Flex >
+}

package/components/Bubble/demo/userWithFile.tsx

@@ -0,0 +1,27 @@
+import { Bubble, DefaultCards } from '@agentscope-ai/chat';
+
+export default function () {
+  return <Bubble cards={[
+    {
+      code: 'Text',
+      data: {
+        content: 'what is citypop'
+      }
+    },
+    {
+      code: 'Files',
+      data: [
+        {
+          url: 'https://aliyun.com',
+          name: 'test.txt',
+          size: 1000,
+        },
+        {
+          name: 'test.pdf',
+          size: 10000,
+        },
+        
+      ]
+    },
+  ]} role="user"></Bubble>
+}

package/components/Bubble/demo/userWithImage.tsx

@@ -0,0 +1,26 @@
+import { Bubble, DefaultCards } from '@agentscope-ai/chat';
+
+export default function () {
+  return <Bubble cards={[
+    {
+      code: 'Text',
+      data: {
+        content: 'what is citypop'
+      }
+    },
+    {
+      code: 'Images',
+      data: [
+        {
+          url: 'https://gw.alicdn.com/imgextra/i4/O1CN01sjZ4Uu1erFDOC6IkA_!!6000000003924-2-tps-396-224.png',
+        },
+        {
+          url: 'https://gw.alicdn.com/imgextra/i4/O1CN01sjZ4Uu1erFDOC6IkA_!!6000000003924-2-tps-396-224.png',
+        },
+        {
+          url: 'https://gw.alicdn.com/imgextra/i4/O1CN01sjZ4Uu1erFDOC6IkA_!!6000000003924-2-tps-396-224.png',
+        },
+      ]
+    },
+  ]} role="user"></Bubble>
+}

package/components/Bubble/index.en-US.md

@@ -0,0 +1,33 @@
+---
+group:
+  title: Output
+  order: 3
+title: Bubble
+description: Chat Bubble
+---
+
+<DemoTitle title="Bubble" desc="Chat Bubble"></DemoTitle>
+
+<code src="./demo/basic.tsx" height="auto">Example</code>
+
+#### User Bubble Examples
+
+The following are examples and variations of this component
+
+<code src="./demo/userWithImage.tsx" height="auto">With Image</code>
+<code src="./demo/userWithFile.tsx" height="auto">With File</code>
+
+#### Model Bubble Examples
+The following are examples and variations of this component
+
+
+<code src="./demo/assistantWithCode.tsx" height="auto">With Code</code>
+<code src="./demo/assistantWithImage.tsx" height="auto">With Image</code>
+<code src="./demo/assistantWithThinking.tsx" height="auto">With Thinking Process</code>
+<code src="./demo/assistantWithProcess.tsx" height="auto">With Step-by-Step Processing</code>
+<code src="./demo/assistantWithSearch.tsx" height="auto">With Link References</code>
+<code src="./demo/assistantWithErrorStatus.tsx" height="auto">Status Display</code>
+
+#### API
+
+<ApiParser source="./interface.ts" id="BubbleProps"></ApiParser>

package/components/Bubble/index.tsx

@@ -0,0 +1,21 @@
+import Bubble from './Bubble';
+import List from './BubbleList';
+import Spin from './Spin';
+import Footer from './Footer';
+import Interrupted from './Interrupted';
+
+export type { BubbleProps } from './interface';
+
+type BubbleType = typeof Bubble & {
+  List: typeof List;
+  Spin: typeof Spin;
+  Footer: typeof Footer;
+  Interrupted: typeof Interrupted;
+};
+
+(Bubble as BubbleType).List = List;
+(Bubble as BubbleType).Spin = Spin;
+(Bubble as BubbleType).Footer = Footer;
+(Bubble as BubbleType).Interrupted = Interrupted;
+
+export default Bubble as BubbleType;

package/components/Bubble/index.zh-CN.md

@@ -0,0 +1,33 @@
+---
+group:
+  title: 输出
+  order: 3
+title: Bubble
+description: 对话气泡
+---
+
+<DemoTitle title="Bubble" desc="对话气泡"></DemoTitle>
+
+<code src="./demo/basic.tsx" height="auto">示例</code>
+
+#### 用户气泡示例
+
+以下是此组件的示例和变体
+
+<code src="./demo/userWithImage.tsx" height="auto">附带图片</code>
+<code src="./demo/userWithFile.tsx" height="auto">附带文件</code>
+
+#### 模型气泡示例
+
+以下是此组件的示例和变体
+
+<code src="./demo/assistantWithCode.tsx" height="auto">附带 Code</code>
+<code src="./demo/assistantWithImage.tsx" height="auto">附带图片</code>
+<code src="./demo/assistantWithThinking.tsx" height="auto">包含思考</code>
+<code src="./demo/assistantWithProcess.tsx" height="auto">包含步骤处理</code>
+<code src="./demo/assistantWithSearch.tsx" height="auto">包含链接引用</code>
+<code src="./demo/assistantWithErrorStatus.tsx" height="auto">状态展示</code>
+
+#### API
+
+<ApiParser source="./interface.ts" id="BubbleProps"></ApiParser>

package/components/Bubble/interface.ts

@@ -0,0 +1,71 @@
+import type { AvatarProps } from 'antd';
+import type { AnyObject } from '../Util/type';
+
+type SemanticType = 'avatar' | 'content' | 'header' | 'footer';
+
+export type BubbleContentType = React.ReactNode | AnyObject;
+
+export interface BubbleProps<ContentType extends BubbleContentType = string>
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'content'> {
+  /**
+   * @description 自定义CSS类名前缀，用于样式隔离和主题定制
+   * @descriptionEn Custom CSS class name prefix for style isolation and theme customization
+   */
+  prefixCls?: string;
+  /**
+   * @description 自定义根容器的CSS类名，用于覆盖默认样式
+   * @descriptionEn Custom CSS class name for the root container to override default styles
+   */
+  rootClassName?: string;
+
+  /**
+   * @description 语义化样式对象，用于精确控制不同区域的样式
+   * @descriptionEn Semantic style object for precise control of different area styles
+   */
+  styles?: Partial<Record<SemanticType, React.CSSProperties>>;
+  /**
+   * @description 语义化CSS类名，用于为不同区域添加自定义类名
+   * @descriptionEn Semantic CSS class names for adding custom classes to different areas
+   */
+  classNames?: Partial<Record<SemanticType, string>>;
+
+  /**
+   * @description 用户头像配置，支持Antd Avatar属性或自定义React元素
+   * @descriptionEn User avatar configuration, supports Antd Avatar props or custom React elements
+   */
+  avatar?: AvatarProps | React.ReactElement;
+  /**
+   * @description 是否显示加载状态，影响组件的视觉反馈
+   * @descriptionEn Whether to display loading state, affects visual feedback of the component
+   */
+  loading?: boolean;
+  /**
+   * @description 气泡内容，支持文本、React元素或复杂数据结构
+   * @descriptionEn Bubble content, supports text, React elements, or complex data structures
+   */
+  content?: BubbleContentType;
+
+  /**
+   * @description 自定义渲染卡片配置，用于展示特殊类型的内容
+   * @descriptionEn Custom render card configuration for displaying special types of content
+   */
+  cards?: { code: string; data?: any; component?: any }[];
+
+  /**
+   * @description 消息处理状态，影响显示样式和交互行为
+   * @descriptionEn Message processing status that affects display style and interaction behavior
+   */
+  msgStatus?: 'finished' | 'generating' | 'interrupted' | 'error';
+
+  /**
+   * @description 消息的唯一标识符，用于状态管理和事件处理
+   * @descriptionEn Unique identifier for the message, used for state management and event handling
+   */
+  id?: any;
+
+  /**
+   * @description 是否是最后一条消息
+   * @descriptionEn Whether the message is the last message
+   */
+  isLast?: boolean;
+}