@agentscope-ai/chat 1.1.20 → 1.1.22

package/components/Conversations/index.tsx

@@ -0,0 +1,176 @@
+import type { MenuProps } from 'antd';
+import classnames from 'classnames';
+import React from 'react';
+
+import GroupTitle, { GroupTitleContext } from './GroupTitle';
+import ConversationsItem, { type ConversationsItemProps } from './Item';
+
+import useMergedState from 'rc-util/lib/hooks/useMergedState';
+import { useProviderContext } from '@agentscope-ai/chat';
+import useGroupable from './hooks/useGroupable';
+import Style from './style';
+
+
+import pickAttrs from 'rc-util/lib/pickAttrs';
+import type { Conversation, Groupable } from './interface';
+
+export interface ConversationsProps extends React.HTMLAttributes<HTMLUListElement> {
+  /**
+   * @description 会话列表的数据源数组，包含所有会话信息
+   * @descriptionEn Data source array for the conversation list containing all conversation information
+   */
+  items?: Conversation[];
+
+  /**
+   * @description 当前激活的会话标识符，用于高亮显示选中项
+   * @descriptionEn Currently active conversation identifier for highlighting selected item
+   */
+  activeKey?: Conversation['key'];
+
+  /**
+   * @description 组件初始化时的默认选中会话标识符
+   * @descriptionEn Default selected conversation identifier when component initializes
+   */
+  defaultActiveKey?: Conversation['key'];
+
+  /**
+   * @description 会话选择发生变化时的回调函数，接收新的会话标识符
+   * @descriptionEn Callback function when conversation selection changes, receives new conversation identifier
+   */
+  onActiveChange?: (value: string) => void;
+
+  /**
+   * @description 会话操作菜单配置
+   * @descriptionEn Conversation operation menu configuration
+   */
+  menu?: {
+    label?: string;
+    key?: string;
+    icon?: React.ReactNode;
+    danger?: boolean;
+    onClick?: (info: Conversation) => void;
+    onEdit?: (label: string, session: Conversation) => Promise<void>;
+    disabled?: boolean;
+  }[];
+
+  /**
+   * @description 语义化样式对象，用于精确控制不同区域的样式
+   * @descriptionEn Semantic style object for precise control of different area styles
+   */
+  styles?: Partial<Record<'item', React.CSSProperties>>;
+
+  /**
+   * @description 语义化CSS类名，用于为不同区域添加自定义类名
+   * @descriptionEn Semantic CSS class names for adding custom classes to different areas
+   */
+  classNames?: Partial<Record<'item', string>>;
+
+  /**
+   * @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;
+}
+
+const Conversations: React.FC<ConversationsProps & { groupable?: boolean | Groupable }> = (props) => {
+  const {
+    prefixCls: customizePrefixCls,
+    rootClassName,
+    items,
+    activeKey,
+    defaultActiveKey,
+    onActiveChange,
+    menu,
+    styles = {},
+    classNames = {},
+    groupable,
+    className,
+    style,
+    ...restProps
+  } = props;
+
+  const domProps = pickAttrs(restProps, {
+    attr: true,
+    aria: true,
+    data: true,
+  });
+
+  const [mergedActiveKey, setMergedActiveKey] = useMergedState<ConversationsProps['activeKey']>(
+    defaultActiveKey,
+    {
+      value: activeKey,
+    },
+  );
+
+  const [groupList, enableGroup] = useGroupable(groupable, items);
+
+  const { direction, getPrefixCls } = useProviderContext();
+  const prefixCls = getPrefixCls('conversations');
+  const mergedCls = classnames(
+    prefixCls,
+    className,
+    rootClassName,
+    {
+      [`${prefixCls}-rtl`]: direction === 'rtl',
+    },
+  );
+
+  const onConversationItemClick: ConversationsItemProps['onClick'] = (info) => {
+    setMergedActiveKey(info.key);
+
+    if (onActiveChange) {
+      onActiveChange(info.key);
+    }
+  };
+
+  return <>
+    <Style />
+    <ul
+      {...domProps}
+      style={style}
+      className={mergedCls}
+    >
+      {groupList.map((groupInfo, groupIndex) => {
+        const convItems = groupInfo.data.map((convInfo: Conversation, convIndex: number) => {
+          return (
+            <ConversationsItem
+              key={convInfo.key || `key-${convIndex}`}
+              info={convInfo}
+              prefixCls={prefixCls}
+              direction={direction}
+              className={classnames(classNames.item)}
+              style={styles.item}
+              menu={menu}
+              active={mergedActiveKey === convInfo.key}
+              onClick={onConversationItemClick}
+            />
+          )
+        });
+
+        if (enableGroup) {
+          return (
+            <li key={groupInfo.name || `key-${groupIndex}`}>
+              <GroupTitleContext.Provider value={{ prefixCls }}>
+                {groupInfo.title?.(groupInfo.name!, { components: { GroupTitle } }) || (
+                  <GroupTitle key={groupInfo.name}>{groupInfo.name}</GroupTitle>
+                )}
+              </GroupTitleContext.Provider>
+              <ul className={`${prefixCls}-list`}>{convItems}</ul>
+            </li>
+          );
+        }
+
+        return convItems;
+      })}
+    </ul></>
+};
+
+
+export type { Conversation };
+export default Conversations;

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

@@ -0,0 +1,31 @@
+---
+order: 2
+group:
+  title: 展现
+  order: 1
+title: HistoryPanel
+description: 对话历史面板
+---
+
+<DemoTitle title="HistoryPanel" desc="对话历史面板" llmTxtName="Conversations"></DemoTitle>
+
+<code src="./demo/basic.tsx" height="auto">示例</code>
+
+<Install>import { HistoryPanel } from '@agentscope-ai/chat'</Install>
+
+#### 历史面板示例
+
+以下是此组件的示例和变体
+
+<code src="./demo/timestamp.tsx" height="auto">展示时间戳</code>
+<code src="./demo/timeline.tsx" height="auto">展示时间戳 & 时间线</code>
+
+#### API
+
+##### HistoryPanel
+
+<ApiParser source="./index.tsx" id="ConversationsProps"></ApiParser>
+
+##### Conversation
+
+<ApiParser source="./interface.ts" id="Conversation"></ApiParser>

package/components/Conversations/interface.ts

@@ -0,0 +1,69 @@
+import type React from 'react';
+import type { AnyObject } from '../Util/type';
+import type { GroupTitleProps } from './GroupTitle';
+
+type GroupType = string;
+
+export interface Conversation extends AnyObject {
+  /**
+   * @description 会话的唯一标识符，用于区分不同的聊天会话
+   * @descriptionEn Unique identifier for the conversation to distinguish different chat sessions
+   */
+  key: string;
+
+  /**
+   * @description 会话的显示名称，支持文本或React元素
+   * @descriptionEn Display name for the conversation, supports text or React elements
+   */
+  label?: React.ReactNode;
+
+  /**
+   * @description 会话创建或最后活动的时间戳，用于排序和显示
+   * @descriptionEn Timestamp of conversation creation or last activity for sorting and display
+   */
+  timestamp?: number;
+  
+
+  /**
+   * @description 会话的图标元素，用于视觉识别
+   * @descriptionEn Icon element for the conversation for visual identification
+   */
+  icon?: React.ReactNode;
+
+  /**
+   * @description 是否禁用该会话，影响交互功能
+   * @descriptionEn Whether to disable this conversation, affects interaction functionality
+   */
+  disabled?: boolean;
+
+  /**
+   * @description 是否在时间线中显示该会话，用于分组显示
+   * @descriptionEn Whether to show this conversation in timeline for grouped display
+   */
+  timeline?: boolean;
+}
+
+export type GroupSorter = Parameters<GroupType[]['sort']>[0];
+
+export type GroupTitleRenderComponents = {
+  components: {
+    GroupTitle: React.ComponentType<GroupTitleProps>;
+  };
+};
+
+export type GroupTitleRender =
+  | ((group: GroupType, info: GroupTitleRenderComponents) => React.ReactNode)
+  | undefined;
+
+export interface Groupable {
+  /**
+   * @description 会话分组的排序函数，用于自定义排序逻辑
+   * @descriptionEn Sorting function for conversation grouping for custom sorting logic
+   */
+  sort?: GroupSorter;
+  /**
+   * @description 自定义分组标题的渲染函数，用于个性化显示
+   * @descriptionEn Custom rendering function for group titles for personalized display
+   */
+  title?: GroupTitleRender;
+}

package/components/Conversations/style.ts

@@ -0,0 +1,153 @@
+import { createGlobalStyle } from 'antd-style';
+
+export default createGlobalStyle`
+.${(p) => p.theme.prefixCls}-conversations {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 0;
+  overflow-y: hidden;
+  margin: 0;
+
+  &-rtl {
+    direction: rtl;
+  }
+
+  &-list {
+    display: flex;
+    gap: ${(p) => p.theme.paddingXXS}px;
+    flex-direction: column;
+
+    .${(p) => p.theme.prefixCls}-conversations-item {
+      padding-inline-start: ${(p) => p.theme.paddingXL}px;
+    }
+
+    .${(p) => p.theme.prefixCls}-conversations-label {
+      color: ${(p) => p.theme.colorTextSecondary};
+    }
+  }
+
+  &-timeline {
+    position: relative;
+    z-index: 1;
+    width: 8px;
+    height: 8px;
+    border-radius: 8px;
+    background-color: ${(p) => p.theme.colorBgBase};
+    border: 1px solid ${(p) => p.theme.colorBorder};
+    margin-right: 8px;
+  }
+
+  &-content {
+    height: 36px;
+    display: flex;
+    align-items: center;
+    padding: 6px 2px 6px 16px;
+  }
+
+  &-desc {
+    font-size: 12px;
+    padding: 0 16px 6px 16px;
+    color: ${(p) => p.theme.colorTextSecondary};
+  }
+
+  &-item {
+    position: relative;
+    border-radius: ${(p) => p.theme.borderRadiusLG}px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+
+    &-timeline {
+      &::before {
+        content: '';
+        position: absolute;
+        left: 19.5px;
+        top: 0;
+        bottom: -8px;
+        width: 1px;
+        background: ${(p) => p.theme.colorBorder};
+      }
+    }
+
+    &:hover {
+      background-color: ${(p) => p.theme.colorFillTertiary};
+    }
+
+    &-active {
+      background-color: ${(p) => p.theme.colorFillTertiary};
+
+      .${(p) => p.theme.prefixCls}-conversations-label,
+      .${(p) => p.theme.prefixCls}-conversations-menu-icon {
+        color: ${(p) => p.theme.colorText};
+      }
+    }
+
+    &-disabled {
+      cursor: not-allowed;
+
+      .${(p) => p.theme.prefixCls}-conversations-label {
+        color: ${(p) => p.theme.colorTextDisabled};
+      }
+
+      .${(p) => p.theme.prefixCls}-conversations-menu-icon {
+        opacity: 0;
+      }
+    }
+
+    &:hover,
+    &-active {
+      .${(p) => p.theme.prefixCls}-conversations-menu-icon {
+        opacity: 1;
+      }
+    }
+
+    &:focus-within {
+      background-color: ${(p) => p.theme.colorFillTertiary};
+      
+    
+    }
+  }
+
+  &-label {
+    flex: 1;
+    color: ${(p) => p.theme.colorText};
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+
+  &-label-edit {
+    font-size: 14px;
+    color: ${(p) => p.theme.colorText};
+    font-family: ${(p) => p.theme.fontFamily};
+    flex: 1;
+    border: none;
+    height: 22px;
+    line-height: 22px;
+    outline: none;
+    background-color: transparent;
+    padding: 0;
+  }
+
+
+  &-menu-icon {
+    opacity: 0;
+    transition: all 0.3s;
+    font-size: ${(p) => p.theme.fontSizeXL}px;
+  }
+
+  &-menu-popover {
+    display: flex;
+    flex-direction: column;
+    &-item {
+    }
+  }
+
+  &-group-title {
+    display: flex;
+    align-items: center;
+    height: ${(p) => p.theme.controlHeightLG}px;
+    min-height: ${(p) => p.theme.controlHeightLG}px;
+    padding: 0 ${(p) => p.theme.paddingXS}px;
+  }
+}`;

package/components/DefaultCards/DeepThinking/index.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { DeepThinking } from '@agentscope-ai/chat';
+
+interface IProps {
+  data: {
+    block?: boolean;
+    title?: string;
+    subTitle?: string;
+    loading?: boolean;
+    content?: string;
+    className?: string;
+    defaultOpen?: boolean;
+    open?: boolean;
+    autoCloseOnFinish?: boolean;
+    maxHeight?: number;
+  }
+}
+
+export default function (props: IProps) {
+
+  return <DeepThinking
+    defaultOpen={props.data.defaultOpen !== undefined ? props.data.defaultOpen : true}
+    title={props.data.title}
+    loading={props.data.loading}
+    content={props.data.content}
+    className={props.data.className}
+    open={props.data.open}
+    autoCloseOnFinish={props.data.autoCloseOnFinish}
+    maxHeight={props.data.maxHeight}
+  />
+
+
+}

package/components/DefaultCards/Files/index.tsx

@@ -0,0 +1,69 @@
+import { Space } from 'antd';
+import React from 'react';
+import { Attachments } from '@agentscope-ai/chat';
+import { createGlobalStyle } from 'antd-style';
+import { useProviderContext } from '@agentscope-ai/chat';
+import { SparkDownloadLine } from '@agentscope-ai/icons';
+
+const Style = createGlobalStyle`
+.${p => p.theme.prefixCls}-bubble-files-file {
+  position: relative;
+}
+
+.${p => p.theme.prefixCls}-bubble-files-download {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0,0,0,0.5);
+  z-index: 1;
+  opacity: 0;
+  font-size: 16px;
+  border-radius: ${p => p.theme.borderRadius}px;
+  cursor: pointer;
+  color: ${p => p.theme.colorWhite};
+  transition: opacity ${p => p.theme.motionDurationSlow}
+
+}
+
+.${p => p.theme.prefixCls}-bubble-files-file:hover .${p => p.theme.prefixCls}-bubble-files-download {
+  opacity: 1;
+}
+`
+export default function Files(props) {
+
+  const { getPrefixCls } = useProviderContext();
+  const prefixCls = getPrefixCls('bubble-files');
+
+
+  return <>
+
+    <Style />
+    <Space className={prefixCls}>
+      {props.data.map((file, index) => {
+        const fileInfo = {
+          name: file.name || file.filename,
+          size: file.size || file.bytes,
+          url: file.url,
+        }
+
+        return <div key={index} className={`${prefixCls}-file`}>
+          <Attachments.FileCard
+            // @ts-ignore
+            item={fileInfo}
+          />
+
+          {
+            fileInfo.url && <div className={`${prefixCls}-download`} onClick={() => {
+              window.open(fileInfo.url, '_blank');
+            }}>
+              <SparkDownloadLine />
+            </div>
+          }
+        </div>
+      })}
+    </Space>
+  </>
+}
+

package/components/DefaultCards/Footer/index.tsx

@@ -0,0 +1,16 @@
+import React, { ReactElement } from 'react';
+
+import Footer, { FooterActions, FooterCount } from "../../Bubble/Footer";
+
+
+export default function (props: {
+  data: {
+    left?: React.ReactElement;
+    right?: React.ReactElement;
+  },
+  id: string;
+}) {
+  return <Footer {...props.data} />;
+}
+
+export { FooterActions, FooterCount };

package/components/DefaultCards/Images/index.tsx

@@ -0,0 +1,53 @@
+import { createGlobalStyle } from 'antd-style';
+import { useProviderContext } from '@agentscope-ai/chat';
+import { Space, Image as AntdImage, ConfigProvider } from 'antd';
+import { Locale } from 'antd/es/locale';
+
+const Style = createGlobalStyle`
+.${p => p.theme.prefixCls}-bubble-image {
+  border-radius: 8px;
+  overflow: hidden;
+
+  .${p => p.theme.prefixCls}-image {
+    display: block;
+  }
+  .${p => p.theme.prefixCls}-image-img {
+    object-fit: cover;
+  }
+
+  .${p => p.theme.prefixCls}-image-mask-info {
+    span {
+      margin-inline-end: 0 !important;
+    }
+  }
+}
+`
+function Image(image) {
+  const { getPrefixCls } = useProviderContext();
+  const prefixCls = getPrefixCls('bubble-image');
+
+  return <>
+    <Style />
+    <div className={`${prefixCls}`}>
+      <AntdImage
+        fallback="data:image/png;base64,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"
+        src={image.url} width={56} height={56} preview={{
+          transitionName: '',
+        }} />
+    </div></>
+
+}
+export default function Files(props) {
+  return <ConfigProvider
+    locale={{
+      Image: { preview: '' }
+    } as Locale}
+  >
+
+    <Space>
+      {props.data.map((image, index) =>
+        <Image key={index} url={image.url} />
+      )}
+    </Space>
+  </ConfigProvider>
+}

package/components/DefaultCards/Interrupted/index.tsx

@@ -0,0 +1,13 @@
+import Interrupted from '../../Bubble/Interrupted';
+
+interface IProps {
+  data: {
+    title?: string;
+    type?: 'error' | 'interrupted';
+    desc?: string;
+  }
+}
+
+export default function (props: IProps) {
+  return <Interrupted {...props.data} />;
+}

package/components/DefaultCards/Text/index.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Markdown } from "@agentscope-ai/chat";
+
+
+export default function (props) {
+  const cursor = props.data.msgStatus === 'generating';
+
+  return <Markdown
+    cursor={cursor}
+    {...props.data}
+    typing={props.data.msgStatus === 'generating' ? props.data.typing : false}
+  />
+}

package/components/DefaultCards/index.tsx

@@ -0,0 +1,6 @@
+export { default as DeepThink, default as DeepThinking } from './DeepThinking';
+export { default as Files } from './Files';
+export { default as Images } from './Images';
+export { default as Text } from './Text';
+export { default as Footer, FooterActions, FooterCount } from './Footer';
+export { default as Interrupted } from './Interrupted';