@agentscope-ai/chat 1.1.20 → 1.1.22

package/components/OperateCard/demo/webSearch.tsx

@@ -0,0 +1,12 @@
+import { WebSearch } from "@agentscope-ai/chat";
+
+export default function () {
+  return <WebSearch
+    subTitle="Transformer 领域的重要研究"
+    list={[
+      { title: 'Transformer登上nature，被誉为大模型基石的它到底凭什么这么火？', subTitle: '新浪新闻', link: 'https://www.baidu.com', icon: 'https://www.baidu.com/favicon.ico' },
+      { title: 'Transformer登上nature，它的技术核心是什么？', subTitle: '网易新闻', link: 'https://www.baidu.com', icon: 'https://www.baidu.com/favicon.ico' },
+
+    ]}
+  />
+}

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

@@ -0,0 +1,51 @@
+---
+order: 3
+
+group:
+  title: Output
+  order: 3
+title: OperateCard
+description: A card that displays AI actions in a conversation flow
+---
+
+<DemoTitle title="OperateCard" desc="A card that displays AI actions in a conversation flow" llmTxtName="OperateCard"></DemoTitle>
+
+<code src="./demo/index.tsx" height="auto">Example</code>
+
+<Install>import { OperateCard } from '@agentscope-ai/chat'</Install>
+
+#### OperateCard Examples
+
+<code src="./demo/rag.tsx" height="auto">RAG</code>
+<code src="./demo/toolCall.tsx" height="auto">Tool Call</code>
+<code src="./demo/webSearch.tsx" height="auto">Web Search</code>
+<code src="./demo/todo.tsx" height="auto">Todo List</code>
+<code src="./demo/thinking.tsx" height="auto">Thinking</code>
+
+#### API
+
+##### IOperateCardProps
+
+<ApiParser source="./OperateCard.tsx" id="IOperateCardProps"></ApiParser>
+
+##### IRagProps
+
+<ApiParser source="./preset/Rag.tsx" id="IRagProps"></ApiParser>
+
+##### IThinkingProps
+
+<ApiParser source="./preset/Thinking.tsx" id="IThinkingProps"></ApiParser>
+
+##### ITodoListProps
+
+<ApiParser source="./preset/TodoList.tsx" id="ITodoListProps"></ApiParser>
+
+##### IToolCallProps
+
+<ApiParser source="./preset/ToolCall.tsx" id="IToolCallProps"></ApiParser>
+
+##### IWebSearchProps
+
+<ApiParser source="./preset/WebSearch.tsx" id="IWebSearchProps"></ApiParser>
+
+

package/components/OperateCard/index.tsx

@@ -0,0 +1 @@
+export { default, type IOperateCardProps } from './OperateCard';

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

@@ -0,0 +1,51 @@
+---
+order: 3
+
+group:
+  title: 输出
+  order: 3
+title: OperateCard
+description: 一种展示对话流中AI操作行为的卡片
+---
+
+<DemoTitle title="OperateCard" desc="一种展示对话流中AI操作行为的卡片" llmTxtName="OperateCard"></DemoTitle>
+
+<code src="./demo/index.tsx" height="auto">示例</code>
+
+<Install>import { OperateCard } from '@agentscope-ai/chat'</Install>
+
+#### 更多 OperateCard 示例
+
+<code src="./demo/rag.tsx" height="auto">RAG</code>
+<code src="./demo/toolCall.tsx" height="auto"> 工具调用</code>
+<code src="./demo/webSearch.tsx" height="auto">联网搜索</code>
+<code src="./demo/todo.tsx" height="auto">待办</code>
+<code src="./demo/thinking.tsx" height="auto">思考</code>
+
+#### API
+
+##### IOperateCardProps
+
+<ApiParser source="./OperateCard.tsx" id="IOperateCardProps"></ApiParser>
+
+##### IRagProps
+
+<ApiParser source="./preset/Rag.tsx" id="IRagProps"></ApiParser>
+
+##### IThinkingProps
+
+<ApiParser source="./preset/Thinking.tsx" id="IThinkingProps"></ApiParser>
+
+##### ITodoListProps
+
+<ApiParser source="./preset/TodoList.tsx" id="ITodoListProps"></ApiParser>
+
+##### IToolCallProps
+
+<ApiParser source="./preset/ToolCall.tsx" id="IToolCallProps"></ApiParser>
+
+##### IWebSearchProps
+
+<ApiParser source="./preset/WebSearch.tsx" id="IWebSearchProps"></ApiParser>
+
+

package/components/OperateCard/preset/Rag.tsx

@@ -0,0 +1,90 @@
+import { OperateCard, useProviderContext, Markdown } from '@agentscope-ai/chat';
+import { SparkBookLine } from '@agentscope-ai/icons';
+import { ConfigProvider, Image } from 'antd';
+import { Locale } from "antd/es/locale";
+
+export interface IRagProps {
+  /**
+   * @description 标题
+   * @descriptionEn Title
+   * @default '知识库检索'
+   */
+  title?: string;
+  /**
+   * @description 副标题
+   * @descriptionEn Subtitle
+   * @default ''
+   */
+  subTitle?: string;
+  /**
+   * @description 召回知识列表
+   * @descriptionEn RAG List
+   * @default []
+   */
+  list: {
+    title: string;
+    content: string;
+    footer: string;
+    images?: string[];
+    link?: string;
+  }[]
+}
+
+function Images({ images }: { images: string[] }) {
+  const { getPrefixCls } = useProviderContext();
+
+  const prefixCls = getPrefixCls('operate-card');
+
+  return <ConfigProvider
+    locale={{
+      Image: { preview: '' }
+    } as Locale}
+  >
+    <Image.PreviewGroup>
+      <div className={`${prefixCls}-rag-item-images`}>
+        {images.map((image, index) => <Image src={image} key={index} />)}
+      </div>
+    </Image.PreviewGroup>
+  </ConfigProvider>
+
+
+}
+
+
+export default function (props: IRagProps) {
+  const { getPrefixCls } = useProviderContext();
+  const prefixCls = getPrefixCls('operate-card');
+  const { title = '知识库检索', subTitle } = props;
+
+  return <OperateCard
+    header={{
+      icon: <SparkBookLine />,
+      title: title,
+      description: subTitle,
+    }}
+    body={{
+      defaultOpen: true,
+      children: <OperateCard.LineBody>
+        {props.list.map((item, index) => {
+          return <div key={index} className={`${prefixCls}-rag-item`}>
+            <div className={`${prefixCls}-rag-item-title`}>{item.title}</div>
+            <div className={`${prefixCls}-rag-item-content`}>
+              <Markdown content={item.content} />
+
+              {
+                item.images && <Images images={item.images} />
+              }
+
+              {
+                item.link ? <a onClick={() => {
+                  window.open(item.link, '_blank');
+                }} className={`${prefixCls}-rag-item-footer`} href={item.link} target="_blank">{item.footer}</a> :
+                  <div className={`${prefixCls}-rag-item-footer`}>{item.footer}</div>
+              }
+            </div>
+          </div>
+        })}
+      </OperateCard.LineBody>
+    }}
+  />
+}

package/components/OperateCard/preset/Thinking.tsx

@@ -0,0 +1,45 @@
+import { OperateCard, useProviderContext } from '@agentscope-ai/chat';
+import { SparkMemoryLine } from '@agentscope-ai/icons';
+
+export interface IThinkingProps {
+  /**
+   * @description 标题
+   * @descriptionEn Title
+   * @default ''
+   */
+  title: string;
+  /**
+   * @description 副标题
+   * @descriptionEn Subtitle
+   * @default ''
+   */
+  subTitle?: string;
+  /**
+   * @description 思考内容
+   * @descriptionEn Thinking Content
+   * @default ''
+   */
+  content: string;
+}
+export default function (props: IThinkingProps) {
+  const { getPrefixCls } = useProviderContext();
+  const prefixCls = getPrefixCls('operate-card');
+
+
+  return <OperateCard
+
+    header={{
+      icon: <SparkMemoryLine />,
+      title: props.title,
+      description: props.subTitle,
+    }}
+    body={{
+      defaultOpen: true,
+      children: <OperateCard.LineBody>
+        <div className={`${prefixCls}-thinking`}>
+          {props.content}
+        </div>
+      </OperateCard.LineBody>
+    }}
+  />
+}

package/components/OperateCard/preset/TodoList.tsx

@@ -0,0 +1,73 @@
+import { OperateCard, useProviderContext } from '@agentscope-ai/chat';
+import { SparkCheckCircleLine, SparkLoadingLine, SparkProjectNoLine } from '@agentscope-ai/icons';
+import classNames from 'classnames';
+
+
+export interface ITodoListProps {
+  /**
+   * @description 标题
+   * @descriptionEn Title
+   * @default 'Task List'
+   */
+  title?: string;
+  /**
+   * @description 默认展开
+   * @descriptionEn Default Open
+   * @default false
+   */
+  defaultOpen?: boolean;
+  /**
+   * @description Todo 列表
+   * @descriptionEn Todo List
+   * @default []
+   */
+  list: {
+    title: string;
+    status: 'done' | 'todo' | 'running';
+  }[]
+}
+
+export default function (props: ITodoListProps) {
+
+  const { getPrefixCls } = useProviderContext();
+  const prefixCls = getPrefixCls('operate-card');
+  const { title = 'Task List' } = props;
+  const doneCount = props.list.filter((item) => item.status === 'done').length;
+
+
+
+  return <OperateCard
+    header={{
+      icon: <SparkProjectNoLine />,
+      title: title,
+      description: `· ${doneCount ? doneCount + ' of ' : ''} ${props.list.length}`,
+    }}
+    body={{
+      defaultOpen: props.defaultOpen,
+      children: <div className={`${prefixCls}-todo-list`}>
+        {props.list.map((item) => {
+          return <div key={item.title} className={classNames({
+            [`${prefixCls}-todo-list-item`]: true,
+            [`${prefixCls}-todo-list-item-${item.status}`]: true,
+          })}>
+            <div className={`${prefixCls}-todo-list-item-icon`}>
+              {{
+                'done': <SparkCheckCircleLine />,
+                'todo': <SparkCheckCircleLine />,
+                'running': <SparkLoadingLine spin={true} />,
+              }[item.status]}
+            </div>
+            <div className={`${prefixCls}-todo-list-item-title`} style={{
+              textDecoration: item.status === 'done' ? 'line-through' : 'none',
+            }}>
+              {item.title}
+            </div>
+          </div>
+        })}
+
+      </div>
+    }}
+  />
+
+
+}

package/components/OperateCard/preset/ToolCall.tsx

@@ -0,0 +1,67 @@
+
+import { OperateCard, useProviderContext } from '@agentscope-ai/chat';
+import { SparkToolLine } from '@agentscope-ai/icons';
+
+
+function Block(props: {
+  title: string;
+  content: string | Record<string, any>
+}) {
+  const { getPrefixCls } = useProviderContext();
+  const prefixCls = getPrefixCls('operate-card');
+  const contentString = typeof props.content === 'string' ? props.content : JSON.stringify(props.content, null, 2);
+  return <div className={`${prefixCls}-tool-call-block`}>
+    <div className={`${prefixCls}-tool-call-block-title`}>{props.title}</div>
+    <div className={`${prefixCls}-tool-call-block-content`}>{contentString}</div>
+  </div>
+}
+
+export interface IToolCallProps {
+  /**
+   * @description 标题
+   * @descriptionEn Title
+   * @default 'Call Tool'
+   */
+  title?: string;
+  /**
+   * @description 副标题
+   * @descriptionEn Subtitle
+   * @default ''
+   */
+  subTitle?: string;
+  /**
+   * @description 工具调用入参
+   * @descriptionEn Tool Call Input
+   * @default ''
+   */
+  input: string | Record<string, any>;
+  /**
+   * @description 工具调用输出
+   * @descriptionEn Tool Call Output
+   * @default ''
+   */
+  output: string | Record<string, any>;
+}
+
+export default function (props: IToolCallProps) {
+
+  const { title = 'Call Tool', subTitle } = props;
+
+  return <OperateCard
+
+    header={{
+      icon: <SparkToolLine />,
+      title: title,
+      description: subTitle,
+    }}
+
+    body={{
+      defaultOpen: true,
+      children: <OperateCard.LineBody>
+        <Block title="Input" content={props.input} />
+        <Block title="Output" content={props.output} />
+      </OperateCard.LineBody>
+    }}
+  >
+  </OperateCard>
+}

package/components/OperateCard/preset/WebSearch.tsx

@@ -0,0 +1,65 @@
+import { OperateCard, useProviderContext } from '@agentscope-ai/chat';
+import { SparkSearchLine } from '@agentscope-ai/icons';
+import classNames from 'classnames';
+
+
+export interface IWebSearchProps {
+  /**
+   * @description 标题
+   * @descriptionEn Title
+   * @default '联网搜索'
+   */
+  title?: string;
+  /**
+   * @description 副标题
+   * @descriptionEn Subtitle
+   * @default ''
+   */
+  subTitle?: string;
+  /**
+   * @description 列表
+   * @descriptionEn List
+   * @default []
+   */
+  list: {
+    title: string;
+    subTitle?: string;
+    link: string;
+    icon: string;
+  }[]
+}
+export default function (props: IWebSearchProps) {
+
+  const { getPrefixCls } = useProviderContext();
+  const prefixCls = getPrefixCls('operate-card');
+  const { title = '联网搜索', subTitle } = props;
+
+
+  return <OperateCard
+    header={{
+      icon: <SparkSearchLine />,
+      title: title,
+      description: subTitle,
+    }}
+    body={{
+      defaultOpen: true,
+      children: <OperateCard.LineBody>{
+        props.list.map((item) => {
+          return <div key={item.title} className={classNames({
+            [`${prefixCls}-web-search-item`]: true,
+          })} onClick={() => {
+            window.open(item.link, '_blank');
+          }}>
+            <img className={`${prefixCls}-web-search-item-icon`} src={item.icon} alt={item.title} />
+
+            <div className={`${prefixCls}-web-search-item-title`}>{item.title}</div>
+            {
+              item.subTitle && <div className={`${prefixCls}-web-search-item-subTitle`}>{item.subTitle}</div>
+            }
+          </div>
+        })
+
+      }</OperateCard.LineBody>
+    }}
+  />
+}

package/components/OperateCard/preset/index.tsx

@@ -0,0 +1,5 @@
+export { default as Thinking, type IThinkingProps } from './Thinking'
+export { default as TodoList, type ITodoListProps } from './TodoList'
+export { default as ToolCall, type IToolCallProps } from './ToolCall'
+export { default as WebSearch, type IWebSearchProps } from './WebSearch'
+export { default as Rag, type IRagProps } from './Rag'