@agentscope-ai/chat 1.1.20 → 1.1.22

package/components/Accordion/Accordion.tsx

@@ -0,0 +1,203 @@
+import React, { useMemo, useRef } from 'react';
+import cls from 'classnames';
+import BodyContent from './BodyContent';
+import SoftLightTitle from './SoftLightTitle';
+import Style from './style';
+import { useProviderContext } from '../Provider';
+import { SparkCheckCircleFill, SparkErrorCircleFill, SparkDownLine, SparkUpLine, SparkLoadingLine, SparkStopCircleLine } from '@agentscope-ai/icons';
+import { Transition } from 'react-transition-group';
+
+export interface IAccordionProps {
+  /**
+   * @description 组件的当前执行状态，用于显示不同的图标和样式
+   * @descriptionEn Current execution status of the component, used to display different icons and styles
+   */
+  status?: 'finished' | 'interrupted' | 'generating' | 'error';
+  /**
+   * @description 组件的标题内容，支持文本或React元素
+   * @descriptionEn Title content of the component, supports text or React elements
+   */
+  title: string | React.ReactElement;
+  /**
+   * @description 组件展开时显示的主要内容
+   * @descriptionEn Main content displayed when the component is expanded
+   */
+  children?: string | React.ReactElement;
+  /**
+   * @description 自定义图标，会覆盖默认的状态图标
+   * @descriptionEn Custom icon that overrides the default status icon
+   */
+  icon?: string | React.ReactElement;
+  /**
+   * @description 是否显示图标与内容之间的连接线
+   * @descriptionEn Whether to display the connecting line between the icon and content
+   */
+  iconLine?: boolean;
+  /**
+   * @description 组件的唯一标识符，用于React的key属性
+   * @descriptionEn Unique identifier for the component, used for React's key prop
+   */
+  id?: string;
+  /**
+   * @description 显示在标题右侧的额外内容
+   * @descriptionEn Additional content displayed on the right side of the title
+   */
+  rightChildren?: string | React.ReactElement;
+  /**
+   * @description 子步骤数组，支持递归嵌套结构
+   * @descriptionEn Array of child steps, supports recursive nested structure
+   */
+  steps?: IAccordionProps[];
+  /**
+   * @description 组件初始化时是否默认展开
+   * @descriptionEn Whether the component is expanded by default when initialized
+   */
+  defaultOpen?: boolean;
+  /**
+   * @description 受控模式：控制组件是否展开
+   * @descriptionEn Controlled mode: controls whether the component is expanded
+   */
+  open?: boolean;
+  /**
+   * @description 内容区域的样式对象
+   * @descriptionEn Style object for the content area
+   */
+  bodyStyle?: React.CSSProperties;
+  /**
+   * @description 是否使用内联模式，影响布局和交互方式
+   * @descriptionEn Whether to use inline mode, affects layout and interaction behavior
+   */
+  inline?: boolean;
+}
+
+
+function Item(props: IAccordionProps) {
+  const { getPrefixCls } = useProviderContext();
+
+  const prefixCls = getPrefixCls('accordion-group');
+  const [stateOpen, setStateOpen] = React.useState(props.defaultOpen);
+  
+  // 支持受控模式：如果提供了 open prop，则使用它；否则使用内部状态
+  const isOpen = props.open !== undefined ? props.open : stateOpen;
+  const status = props.inline ? 'close' : (isOpen ? 'open' : 'close');
+
+  const icon = useMemo(() => {
+    if (props.icon) return props.icon;
+    if (props.status === 'generating') return <SparkLoadingLine className={`${prefixCls}-icon-loading`} spin />;
+    if (props.status === 'finished') return <SparkCheckCircleFill className={`${prefixCls}-icon-success`} />;
+    if (props.status === 'interrupted') return <SparkStopCircleLine />
+    if (props.status === 'error') return <SparkErrorCircleFill className={`${prefixCls}-icon-error`} />;
+
+  }, [props.status, props.icon]);
+
+
+  const content = useMemo(() => {
+    if (props.steps) {
+      return props.steps.map((item, index) => {
+        const isFirst = index === 0;
+        const isLast = index === props.steps.length - 1;
+
+        // @ts-ignore
+        return <Item key={item.id || index} {...item} isFirst={isFirst} isLast={isLast} />
+      })
+    } else {
+      return props.children
+    }
+  }, [props.steps, props.children]);
+
+
+  return <div className={cls(`${prefixCls}`, `${prefixCls}-${status}`)}>
+    <div
+      className={cls(`${prefixCls}-header`, `${prefixCls}-header-${status}`)}
+      onClick={() => content && props.open === undefined && setStateOpen(!stateOpen)}>
+      {icon ? <div className={cls(`${prefixCls}-header-icon`, {
+        [`${prefixCls}-header-icon-line`]: props.iconLine,
+        // @ts-ignore
+        [`${prefixCls}-header-icon-first`]: props.isFirst,
+        // @ts-ignore
+        [`${prefixCls}-header-icon-last`]: props.isLast && status === 'close' || props.level,
+      })}>{icon}</div> : null}
+      <div>
+        {props.title}
+      </div>
+      {content && <div className={cls(`${prefixCls}-header-arrow`)}>
+        {!isOpen ? <SparkDownLine /> : <SparkUpLine />}
+      </div>}
+      {<>
+        <span style={{ flex: 1 }}></span>
+        {props.rightChildren}
+      </>}
+    </div>
+
+    <Children
+      prefixCls={prefixCls}
+      stateOpen={isOpen}
+      status={status}
+      inline={props.inline}
+      content={content}
+      bodyStyle={props.bodyStyle}
+      // @ts-ignore
+      level={props.level}
+    />
+  </div>
+}
+
+const transitionStyles = {
+  entering: { opacity: 1 },
+  entered: { opacity: 1 },
+  exiting: { opacity: 0 },
+  exited: { opacity: 0 },
+};
+
+function Children(props: any) {
+  const nodeRef = useRef(null);
+  if (!props.content) return null;
+
+  const prefixCls = props.prefixCls;
+  const stateOpen = props.stateOpen;
+  const inline = props.inline;
+  const bodyStyle = props.bodyStyle;
+  const level = props.level;
+
+  return <Transition nodeRef={nodeRef} in={stateOpen} timeout={300}>
+
+    {state => (
+      <div
+        style={{
+          ...bodyStyle,
+          ...(level ? { marginTop: 0 } : {}),
+          transition: `opacity ${300}ms ease-in-out`,
+          ...transitionStyles[state]
+
+        }}
+        className={cls(`${prefixCls}-body`, `${prefixCls}-body-${stateOpen ? 'open' : 'close'}`, {
+          [`${prefixCls}-body-inline`]: inline
+        })}
+      >
+        {props.content}
+      </div>
+    )}
+
+
+  </Transition>
+
+
+
+
+}
+
+function Accordion(props: IAccordionProps) {
+  // @ts-ignore
+  const { level = 1, isFirst = true, isLast = true } = props;
+  return <>
+    <Style />
+    {/* @ts-ignore */}
+    <Item {...props} level={level} isFirst={isFirst} isLast={isLast} />
+  </>
+}
+
+
+Accordion.BodyContent = BodyContent;
+Accordion.SoftLightTitle = SoftLightTitle
+
+export default Accordion;

package/components/Accordion/BodyContent.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { useProviderContext } from "../Provider";
+
+
+interface IBodyContentProps {
+  children: React.ReactNode;
+  headerLeft?: React.ReactNode;
+  headerRight?: React.ReactNode;
+}
+
+export default function (props: IBodyContentProps) {
+  const { getPrefixCls } = useProviderContext();
+  const prefixCls = getPrefixCls('accordion-content-body');
+
+  return <div className={prefixCls}>
+    {
+      (props.headerLeft || props.headerRight) ?
+        <div className={`${prefixCls}-header`}>
+          {props.headerLeft}
+          <div style={{ flex: 1 }} />
+          {props.headerRight}
+        </div> : null
+    }
+    <div className={`${prefixCls}-body`}>
+      {props.children}
+    </div>
+  </div>
+}

package/components/Accordion/DeepThinking.tsx

@@ -0,0 +1,91 @@
+import { Accordion } from '@agentscope-ai/chat';
+import { useProviderContext } from '@agentscope-ai/chat';
+import { theme as AntdTheme } from 'antd'
+import cls from 'classnames';
+
+
+export interface IDeepThinking {
+  /**
+   * @description 深度思考过程的标题，用于描述思考的主题或方向
+   * @descriptionEn Title of the deep thinking process for describing the topic or direction of thinking
+   */
+  title?: string;
+  /**
+   * @description 是否正在生成思考内容，影响显示状态和动画效果
+   * @descriptionEn Whether the thinking content is being generated, affects display state and animation effects
+   */
+  loading?: boolean;
+  /**
+   * @description 深度思考的具体内容，包含思考过程和结果
+   * @descriptionEn Specific content of deep thinking, including thinking process and results
+   */
+  content?: string;
+  /**
+   * @description 组件初始化时是否默认展开，控制初始显示状态
+   * @descriptionEn Whether to expand by default when component initializes, controls initial display state
+   */
+  defaultOpen?: boolean;
+  /**
+   * @description 受控模式：控制组件是否展开
+   * @descriptionEn Controlled mode: controls whether the component is expanded
+   */
+  open?: boolean;
+  /**
+   * @description 生成结束后是否自动关闭（默认 false）
+   * @descriptionEn Whether to automatically close after generation is complete (default false)
+   */
+  autoCloseOnFinish?: boolean;
+  /**
+   * @description 内容区域的最大高度（单位：像素）
+   * @descriptionEn Maximum height of the content area (in pixels)
+   */
+  maxHeight?: number;
+  /**
+   * @description 组件的CSS类名，用于自定义样式
+   * @descriptionEn CSS class name for the component for custom styling
+   */
+  className?: string;
+}
+
+export default function (props: IDeepThinking) {
+  const { theme: providerTheme, getPrefixCls } = useProviderContext();
+  const prefixCls = getPrefixCls('accordion-deep-thinking');
+  const isDarkMode = providerTheme?.algorithm === AntdTheme.darkAlgorithm;
+  const icon = <img style={{ display: 'block', width: 16, height: 16, filter: isDarkMode ? 'invert(1)  brightness(100%) saturate(0%)' : '' }} src="https://img.alicdn.com/imgextra/i2/O1CN01QZgWRv1I4JM0BAZ9O_!!6000000000839-54-tps-56-56.apng" />
+  
+  // 构建标题文本
+  let titleText = props.title || 'Deep thinking';
+  if (props.loading) {
+    titleText += '...';
+  }
+  
+  // 构建标题
+  const title = props.loading ? (
+    <Accordion.SoftLightTitle>{titleText}</Accordion.SoftLightTitle>
+  ) : titleText;
+
+  // 构建 bodyStyle，添加 maxHeight 支持
+  const bodyStyle: React.CSSProperties = props.maxHeight 
+    ? { maxHeight: props.maxHeight, overflowY: 'auto' as const }
+    : {};
+
+  // 确定默认展开状态：如果设置了 autoCloseOnFinish 且不在 loading 状态，默认关闭
+  const finalDefaultOpen = props.defaultOpen !== undefined 
+    ? props.defaultOpen 
+    : (props.autoCloseOnFinish && !props.loading) ? false : undefined;
+
+  return <Accordion
+    title={title}
+    status={props.loading ? 'generating' : 'finished'}
+    icon={props.loading ? icon : null}
+    defaultOpen={finalDefaultOpen}
+    open={props.open}
+    bodyStyle={bodyStyle}
+    inline
+  >
+    <div className={cls(prefixCls, props.className)}>{props.content || '...'}</div>
+  </Accordion>
+}
+
+
+

package/components/Accordion/SoftLightTitle.tsx

@@ -0,0 +1,13 @@
+import { useProviderContext } from '@agentscope-ai/chat';
+import { theme as AntdTheme } from 'antd'
+
+export default function (props: { children }) {
+  const { theme, getPrefixCls } = useProviderContext();
+  const isDarkMode = theme?.algorithm === AntdTheme.darkAlgorithm;
+  const prefixCls = getPrefixCls('accordion-soft-light-title');
+
+  return <div
+    className={prefixCls}
+    style={isDarkMode ? {} : { color: 'rgba(38, 36, 76, 0.88)' }}
+  >{props.children}</div>
+}

package/components/Accordion/demo/search.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Accordion } from '@agentscope-ai/chat';
+import { Flex } from 'antd'
+import { SparkDeepSearchLine, SparkCheckCircleLine } from '@agentscope-ai/icons'
+const App = () => <>
+  <Flex gap={32} vertical>
+    <Accordion
+      status="generating"
+      icon={<SparkDeepSearchLine />}
+      title={<Accordion.SoftLightTitle>Searching from 10 pages</Accordion.SoftLightTitle>}
+
+      steps={[{
+        icon: <SparkCheckCircleLine />,
+        title: 'File analysis',
+      }, {
+        icon: <SparkCheckCircleLine />,
+        title: 'Url analysis',
+      }]}
+    >
+    </Accordion>
+
+    <Accordion
+      defaultOpen
+      status="finished"
+      icon={<SparkDeepSearchLine />}
+      title={"Searching from 10 pages"}
+      steps={[{
+        icon: <SparkCheckCircleLine />,
+        title: 'File analysis',
+      }, {
+        icon: <SparkCheckCircleLine />,
+        title: 'Url analysis',
+      }]}
+    >
+    </Accordion>
+  </Flex>
+</>;
+
+export default App;

package/components/Accordion/demo/steps.tsx

@@ -0,0 +1,135 @@
+import { Accordion } from '@agentscope-ai/chat';
+import { Flex } from 'antd'
+import { CodeBlock } from '@agentscope-ai/design';
+import { SparkCheckCircleLine, SparkTimeLine, SparkTimestampLine } from '@agentscope-ai/icons';
+
+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.'
+    }
+  ]
+
+})
+
+const App = () => <>
+  <Flex gap={24} vertical>
+    <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>
+
+
+    {[{ label: 'steps error', value: 'error' },
+    { label: 'steps interrupted', value: 'interrupted' },
+    { label: 'steps generating', value: 'generating' }].map(({ label, value }) => (
+      <Accordion
+        title={label}
+        // @ts-ignore
+        status={value}
+        defaultOpen={false}
+        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>,
+        }]}
+      >
+      </Accordion>
+    ))}
+
+
+    <Accordion
+      title="Completed deep thinking"
+      status="generating"
+      defaultOpen
+      steps={[{
+        icon: <SparkCheckCircleLine />,
+        iconLine: true,
+        title: 'File analysis',
+        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>,
+      }, {
+        status: "generating",
+        iconLine: true,
+        title: <b>MCP Call</b>,
+        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>,
+      },
+      {
+        icon: <SparkTimestampLine />,
+        iconLine: true,
+        title: 'Long Memory',
+      },
+      {
+        icon: <SparkTimestampLine />,
+        iconLine: true,
+        title: 'Final output',
+      },
+      ]}
+    >
+    </Accordion>
+  </Flex>
+</>;
+
+export default App;

package/components/Accordion/demo/thinking.tsx

@@ -0,0 +1,62 @@
+import { DeepThinking } from '@agentscope-ai/chat';
+import { Flex } from 'antd'
+
+
+const App = () => {
+  return <>
+  <Flex gap={32} vertical>
+    {/* 示例 1: 正在生成中 */}
+    <DeepThinking
+      loading={true}
+      content='你好，我是AI智能助手，我正在思考...'
+    />
+
+    {/* 示例 2: 生成完成，展开状态 */}
+    <DeepThinking
+      defaultOpen
+      loading={false}
+      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.`}
+    />
+
+    {/* 示例 3: 使用 maxHeight 限制高度 */}
+    <DeepThinking
+      title="限制最大高度示例"
+      defaultOpen
+      maxHeight={150}
+      content={`这是一个很长的思考内容，用于演示 maxHeight 属性。
+
+当内容超出设定的最大高度时，会出现滚动条。
+
+这样可以避免内容过长导致页面布局问题。
+
+让我们添加更多文字来演示滚动效果...
+
+第一段：City Pop 是日本在 1970 年代末到 1980 年代流行的音乐类型。
+第二段：它融合了西方的放克、爵士、迪斯科等元素。
+第三段：代表艺术家包括山下达郎、竹内玛莉亚等。
+第四段：近年来通过互联网重新流行起来。
+第五段：其特点是使用合成器、流畅的人声和华丽的制作。
+第六段：与日本经济泡沫时期的乐观氛围密切相关。
+第七段：影响了后来的 Future Funk 和 Vaporwave 等音乐流派。`}
+    />
+
+    {/* 示例 4: 生成结束后自动关闭 */}
+    <DeepThinking
+      title="自动关闭示例"
+      autoCloseOnFinish
+      loading={false}
+      content="这个示例演示了 autoCloseOnFinish 功能，生成结束后默认是关闭状态，需要手动点击才能展开查看内容。"
+    />
+  </Flex>
+</>
+};
+
+export default App;

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

@@ -0,0 +1,34 @@
+---
+order: 2
+
+group:
+  title: Output
+  order: 3
+title: Process
+description: Visualization of model problem-solving process
+
+demo:
+  cols: 1
+---
+
+<DemoTitle title="Process" desc="Visualization of model problem-solving process" llmTxtName="Accordion"></DemoTitle>
+
+<code src="./demo/thinking.tsx" height="auto">Deep Thinking Example</code>
+
+<Install>import { Process, DeepThinking } from '@agentscope-ai/chat'</Install>
+
+#### Process Examples
+
+The following are examples and variations of this component
+<code src="./demo/steps.tsx" height="auto">With Multiple Steps</code>
+<code src="./demo/search.tsx" height="auto">Search Scenario Steps</code>
+
+#### API
+
+##### IAccordionProps
+
+<ApiParser source="./Accordion.tsx" id="IAccordionProps"></ApiParser>
+
+##### IDeepThinking
+
+<ApiParser source="./DeepThinking.tsx" id="IDeepThinking"></ApiParser>

package/components/Accordion/index.tsx

@@ -0,0 +1,3 @@
+
+export { default as Accordion } from './Accordion';
+export type { IAccordionProps, IAccordionProps as IProcessProps } from './Accordion';

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

@@ -0,0 +1,34 @@
+---
+order: 2
+
+group:
+  title: 输出
+  order: 3
+title: Process
+description: 模型处理问题的过程展示
+
+demo:
+  cols: 1
+---
+
+<DemoTitle title="Process" desc="模型处理问题的过程展示" llmTxtName="Accordion"></DemoTitle>
+
+<code src="./demo/thinking.tsx" height="auto">深度思考示例</code>
+
+<Install>import { Process, DeepThinking } from '@agentscope-ai/chat'</Install>
+
+#### 模型处理过程示例
+
+以下是此组件的示例和变体
+<code src="./demo/steps.tsx" height="auto">包含多个步骤</code>
+<code src="./demo/search.tsx" height="auto">搜索场景的步骤展示</code>
+
+#### API
+
+##### IAccordionProps
+
+<ApiParser source="./Accordion.tsx" id="IAccordionProps"></ApiParser>
+
+##### IDeepThinking
+
+<ApiParser source="./DeepThinking.tsx" id="IDeepThinking"></ApiParser>