@agentscope-ai/chat 1.1.20 → 1.1.22

package/components/OperateCard/style.ts

@@ -0,0 +1,268 @@
+import { createGlobalStyle } from 'antd-style';
+
+export default createGlobalStyle`
+.${(p) => p.theme.prefixCls}-operate-card {
+  width: 100%;
+  border-radius: ${(p) => p.theme.borderRadiusLG}px;
+  overflow: hidden;
+  background-color: ${(p) => p.theme.colorFillTertiary};
+
+  &-header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 0 12px;
+    height: 32px;
+
+    &-icon {
+      font-size: 16px;
+    }
+
+    &-title {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      font-size: 13px;
+      font-weight: 500;
+      color: ${(p) => p.theme.colorText};
+    }
+
+    &-description {
+    overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      font-size: 12px;
+      color: ${(p) => p.theme.colorTextTertiary};
+    }
+
+    &-arrow {
+      margin: 0 0 0 auto;
+    }
+
+    &-has-body {
+      cursor: pointer;
+    }
+  }
+
+  &-body {
+    opacity: 0;
+    animation: ${(p) =>
+      p.theme.prefixCls}-operate-card-body-open 0.2s ease-in-out forwards;
+    
+    @keyframes ${(p) => p.theme.prefixCls}-operate-card-body-open {
+      from {
+        opacity: 0;
+      }
+      to {
+        opacity: 1;
+      }
+    }
+  
+  }
+
+
+  &-line-body {
+    margin: 0 12px 12px 20px;
+    border-left: 1px solid ${(p) => p.theme.colorBorderSecondary};
+  }
+
+  &-thinking {
+    padding-left: 16px;
+    font-size: 12px;
+    line-height: 20px;
+    color: ${(p) => p.theme.colorTextTertiary};
+    opacity: 0.85;
+    white-space: pre-wrap;
+  }
+
+
+  &-todo-list {
+
+    &-item {
+      height: 32px;
+      display: flex;
+      align-items: center;
+      padding: 0 12px;
+      gap: 8px;
+      
+      color: ${(p) => p.theme.colorText};
+
+
+      &-done {
+        color: ${(p) => p.theme.colorTextTertiary};
+      }
+
+      &-icon {
+        font-size: 16px;
+      }
+
+      &-title {
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+        font-size: 12px;
+      }
+
+      &-done {
+        
+      }
+
+    }
+  
+  }
+
+
+  &-web-search-item {
+    display: flex;
+    height: 32px;
+    align-items: center;
+    padding: 0 12px;
+    gap: 8px;
+    color: ${(p) => p.theme.colorText};
+    cursor: pointer;
+
+    &-icon {
+      display: block;
+      width: 16px;
+      height: 16px;
+      border: 1px solid ${(p) => p.theme.colorBorderSecondary};
+      border-radius: 99px;
+    }
+
+    &-title {
+      font-size: 12px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      color: ${(p) => p.theme.colorTextSecondary};
+
+      &:hover {
+        color: ${(p) => p.theme.colorText};
+        
+      }
+
+    }
+
+    &-subTitle {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      border-left: 1px solid ${(p) => p.theme.colorBorderSecondary};
+      font-size: 12px;
+      line-height: 1;
+      color: ${(p) => p.theme.colorTextTertiary};
+      padding-left: 8px;
+      margin-left: 4px;
+    }
+
+  }
+
+
+  &-tool-call-block {
+    margin-left: 16px;
+  
+    &-title {
+      font-size: 12px;
+      color: ${(p) => p.theme.colorText};
+      line-height: 20px;
+      margin-bottom: 4px;
+    }
+
+    &-content {
+      font-size: 12px;
+      line-height: 20px;
+      font-family: ${(p) => p.theme.fontFamilyCode};
+      border-radius: 6px;
+      padding: 8px;
+      background-color: ${(p) => p.theme.colorFillTertiary};
+      white-space: pre-wrap;
+    }
+  }
+
+  &-tool-call-block ~ &-tool-call-block {
+    margin-top: 8px;
+  }
+
+
+  &-device-action {
+    height: auto;
+    align-items: flex-start;
+
+    &-icon {
+      margin-top: 6px;
+    }
+
+    &-time {
+      margin-bottom: 4px;
+      font-size: 12px;
+      line-height: 20px;
+      color: ${(p) => p.theme.colorTextSecondary};
+    }
+
+    &-content {
+      
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+    }
+
+    &-description {
+      width: 0;
+      flex: 1;
+      margin: 8px 0 6px 0;
+    }
+
+    &-image {
+      margin: 4px 0;
+      height: 32px;
+      margin-left: 8px;
+      display: block;
+      border-radius: 6px;
+      overflow: hidden;
+      border: 1px solid ${(p) => p.theme.colorBorderSecondary};
+    }
+
+
+    
+  }
+
+  &-rag-item {
+    margin-left: 16px;
+
+    &-title {
+      font-size: 12px;
+      color: ${(p) => p.theme.colorText};
+      line-height: 20px;
+      margin-bottom: 4px;
+    }
+
+    &-content {
+      padding: 8px;
+      border-radius: 6px;
+      background-color: ${(p) => p.theme.colorFillTertiary};
+    }
+
+    &-images {
+      margin-top: 8px;
+      padding: 8px;
+      display: flex;
+      gap: 8px;
+      background-color: ${(p) => p.theme.colorFillQuaternary};
+      
+    }
+
+    &-footer {
+      display: block;
+      margin-top: 8px;
+      font-size: 12px;
+      line-height: 20px;
+      color: ${(p) => p.theme.colorTextTertiary};
+    }
+
+  }
+
+  &-rag-item ~ &-rag-item {
+    margin-top: 8px;
+  }
+}
+`;

package/components/Provider/CustomCardsProvider.tsx

@@ -0,0 +1,17 @@
+import React, { createContext } from "react";
+import { ProviderProps } from './types';
+import { DefaultCards } from '@agentscope-ai/chat';
+
+
+export const CustomCardsContext = createContext<ProviderProps['cardConfig']>(undefined);
+
+export const CustomCardsProvider = function (props: Pick<ProviderProps, 'cardConfig' | 'children'>) {
+  return <CustomCardsContext.Provider value={props.cardConfig}>
+    {props.children}
+  </CustomCardsContext.Provider>
+}
+
+export const useCustomCardsContext = () => {
+  const cardConfig = React.useContext(CustomCardsContext);
+  return React.useMemo(() => ({ ...DefaultCards, ...cardConfig }), [cardConfig]);
+}

package/components/Provider/GlobalProvider.tsx

@@ -0,0 +1,17 @@
+
+import React, { createContext } from "react";
+import { ProviderProps } from './types';
+
+
+export const GlobalContext = createContext<Pick<ProviderProps, 'markdown'>>(undefined);
+
+export const GlobalProvider = function (props: Pick<ProviderProps, 'markdown' | 'children'>) {
+  return <GlobalContext.Provider value={props}>
+    {props.children}
+  </GlobalContext.Provider>
+}
+
+export const useGlobalContext = () => {
+  const context = React.useContext(GlobalContext);
+  return context || {};
+}

package/components/Provider/index.tsx

@@ -0,0 +1,33 @@
+import { ConfigProvider } from "@agentscope-ai/design";
+import React from "react";
+import { CustomCardsProvider, CustomCardsContext, useCustomCardsContext } from './CustomCardsProvider';
+import { GlobalProvider, GlobalContext, useGlobalContext } from './GlobalProvider';
+import type { ProviderProps } from './types';
+
+
+const SparkChatProvider = (props: ProviderProps) => {
+  const { children, cardConfig, markdown } = props;
+  return <GlobalProvider markdown={markdown}>
+    <CustomCardsProvider cardConfig={cardConfig}>
+      {children}
+    </CustomCardsProvider>
+  </GlobalProvider>
+};
+
+
+export function useProviderContext() {
+  const context = React.useContext(ConfigProvider.ConfigContext);
+  return context;
+}
+
+
+export default SparkChatProvider;
+export {
+  useCustomCardsContext,
+  CustomCardsProvider,
+  useGlobalContext,
+  CustomCardsContext,
+  GlobalProvider,
+  GlobalContext,
+  ProviderProps
+}

package/components/Provider/types.ts

@@ -0,0 +1,23 @@
+export interface ProviderProps {
+  /**
+   * @description 提供者组件的子元素，用于包装应用内容
+   * @descriptionEn Child elements of the provider component for wrapping application content
+   */
+  children: React.ReactNode;
+  /**
+   * @description 卡片配置对象，用于自定义不同类型卡片的渲染
+   * @descriptionEn Card configuration object for customizing rendering of different card types
+   */
+  cardConfig: Record<string, any>;
+  /**
+   * @description Markdown渲染配置，用于控制文本显示效果
+   * @descriptionEn Markdown rendering configuration for controlling text display effects
+   */
+  markdown?: {
+    /**
+     * @description 基础字体大小，影响所有Markdown内容的字体大小
+     * @descriptionEn Base font size that affects font size of all Markdown content
+     */
+    baseFontSize?: number;
+  };
+}

package/components/Sender/ModeSelect/index.tsx

@@ -0,0 +1,160 @@
+import React, { useMemo } from "react";
+import { createGlobalStyle } from 'antd-style';
+import { useProviderContext } from '@agentscope-ai/chat'
+import { SparkFalseLine } from "@agentscope-ai/icons";
+import { Tooltip } from "@agentscope-ai/design";
+
+
+interface IItem {
+  icon: string | React.ReactNode;
+  label: string | React.ReactNode;
+  selectedLabel?: string | React.ReactNode;
+  tooltip?: string | React.ReactNode;
+  value: string;
+}
+interface IProps {
+  options: IItem[],
+  value: string,
+  desc?: React.ReactNode | string;
+  onChange: (value: string) => void
+  style?: React.CSSProperties,
+  closeTip?: React.ReactNode | string;
+}
+
+const Style = createGlobalStyle`
+.${p => p.theme.prefixCls}-sender-mode-select {
+  position: relative;
+  height: 40px;
+
+  &-options {
+    position: absolute;
+    top: 4px;
+    left: 0;
+    right: 0;
+    display: flex;
+    gap: 8px;
+    transition: all 0.3s;
+  }
+
+  &-option {
+    height: 28px;
+    display: flex;
+    align-items: center;
+    fonts: 14px;
+    padding: 0 8px;
+    border-radius: ${p => p.theme.borderRadius}px;
+    gap: 4px;
+    border: 1px solid ${p => p.theme.colorBorderSecondary};
+    cursor: pointer;
+    color: ${p => p.theme.colorTextSecondary};
+    transition: all 0.3s;
+
+    &:hover {
+      border-color: ${p => p.theme.colorPrimary};
+      color: ${p => p.theme.colorPrimary};
+    }
+  }
+
+  &-display {
+    position: absolute;
+    top: 8px;
+    left: 0;
+    right: 0;
+    height: 40px;
+    border: 1px solid ${p => p.theme.colorBorderSecondary};
+    border-radius: ${p => p.theme.borderRadiusLG}px ${p => p.theme.borderRadiusLG}px 0 0;
+    background: ${p => p.theme.colorFillTertiary};
+    transition: all 0.3s;
+
+    &-flex {
+      display: flex;
+      justify-content: space-between; 
+      align-items: center;
+      height: 32px;
+      padding: 0 12px;
+    }
+
+    &-label {
+      width: 0;
+      flex: 1;
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      fontsize: 14px;
+      color: ${p => p.theme.colorTextSecondary};
+    }
+
+    &-desc {
+      display: flex;
+      align-items: center;
+      margin: 0 12px 0 auto;
+    }
+  }
+
+  &-hide {
+    top: 45px;
+  }
+}
+
+`
+
+export default function (props: IProps) {
+  const { getPrefixCls } = useProviderContext();
+  const prefixCls = getPrefixCls('sender-mode-select');
+
+  const { value, onChange } = props;
+
+  const valueObject = useMemo(() => {
+    const item = props.options.find(item => item.value === value) || {};
+    return item;
+  }, [props.value]) as IItem;
+
+
+  const close = <SparkFalseLine onClick={() => onChange(undefined)} style={{ cursor: 'pointer', fontSize: 20 }} />
+
+  return <>
+    <Style />
+    <div className={prefixCls} style={props.style}>
+      <div className={(`${prefixCls}-options ${value ? `${prefixCls}-hide` : ''}`)}>
+        {
+          props.options.map(item => {
+            const node = <Display key={item.value} onClick={() => onChange(item.value)} className={(`${prefixCls}-option`)} {...item} />
+            return node;
+          })
+        }
+      </div>
+
+      <div className={(`${prefixCls}-display ${value ? '' : `${prefixCls}-hide`}`)}>
+        <div className={(`${prefixCls}-display-flex`)}>
+          <Display {...valueObject} label={valueObject?.selectedLabel || valueObject?.label} className={(`${prefixCls}-display-label`)} />
+          {
+            props.desc && <div className={(`${prefixCls}-display-desc`)}>{props.desc}</div>
+          }
+          {
+            props.closeTip ? <Tooltip title={props.closeTip}>
+              {close}
+            </Tooltip> :
+              close
+          }
+        </div>
+      </div>
+    </div>
+  </>
+}
+
+function Display(props: IItem & { className?: string, onClick?: () => void }) {
+
+  const node = <div className={props.className} onClick={props.onClick}>
+    {props.icon}
+    {props.label}
+  </div>
+
+
+  if (props.tooltip) {
+    return <Tooltip title={props.tooltip} placement="topLeft">
+      {node}
+    </Tooltip>
+  } else {
+    return node;
+  }
+}

package/components/Sender/SenderHeader.tsx

@@ -0,0 +1,164 @@
+import { CloseOutlined } from '@ant-design/icons';
+import { Button } from 'antd';
+import classNames from 'classnames';
+import CSSMotion, { type MotionEventHandler } from 'rc-motion';
+import * as React from 'react';
+
+export interface SendHeaderContextProps {
+  /**
+   * @description 自定义CSS类名前缀，用于样式隔离和主题定制
+   * @descriptionEn Custom CSS class name prefix for style isolation and theme customization
+   */
+  prefixCls: string;
+}
+
+export const SendHeaderContext = React.createContext<SendHeaderContextProps>({} as any);
+
+export type SemanticType = 'header' | 'content';
+
+export interface SenderHeaderProps {
+  /**
+   * @description 是否强制渲染组件，即使不可见也保持DOM结构
+   * @descriptionEn Whether to force render the component, maintaining DOM structure even when invisible
+   */
+  forceRender?: boolean;
+  /**
+   * @description 是否展开头部区域，控制显示状态
+   * @descriptionEn Whether to expand the header area, controls display state
+   */
+  open?: boolean;
+  /**
+   * @description 展开状态变化时的回调函数
+   * @descriptionEn Callback function when expand state changes
+   */
+  onOpenChange?: (open: boolean) => void;
+  /**
+   * @description 头部标题内容，支持文本或React元素
+   * @descriptionEn Header title content, supports text or React elements
+   */
+  title?: React.ReactNode;
+  /**
+   * @description 头部内容区域，用于显示额外的信息或控件
+   * @descriptionEn Header content area for displaying additional information or controls
+   */
+  children?: React.ReactNode;
+  /**
+   * @description 组件的CSS类名
+   * @descriptionEn CSS class name for the component
+   */
+  className?: string;
+  /**
+   * @description 组件的内联样式对象
+   * @descriptionEn Inline style object for the component
+   */
+  style?: React.CSSProperties;
+  /**
+   * @description 语义化CSS类名，用于为不同区域添加自定义类名
+   * @descriptionEn Semantic CSS class names for adding custom classes to different areas
+   */
+  classNames?: Partial<Record<SemanticType, string>>;
+  /**
+   * @description 语义化样式对象，用于精确控制不同区域的样式
+   * @descriptionEn Semantic style object for precise control of different area styles
+   */
+  styles?: Partial<Record<SemanticType, React.CSSProperties>>;
+  /**
+   * @description 是否显示关闭按钮，用于控制头部区域的展开/收起
+   * @descriptionEn Whether to show close button for controlling header area expand/collapse
+   */
+  closable?: boolean;
+}
+
+const collapseHeight: MotionEventHandler = () => ({
+  height: 0,
+});
+const expandedHeight: MotionEventHandler = (ele) => ({
+  height: ele.scrollHeight,
+});
+
+export default function SenderHeader(props: SenderHeaderProps) {
+  const {
+    title,
+    onOpenChange,
+    open,
+    children,
+    className,
+    style,
+    classNames: classes = {},
+    styles = {},
+    closable,
+    forceRender,
+  } = props;
+
+  const { prefixCls } = React.useContext(SendHeaderContext);
+
+  const headerCls = `${prefixCls}-header`;
+
+  return (
+    <CSSMotion
+      motionEnter
+      motionLeave
+      motionName={`${headerCls}-motion`}
+      leavedClassName={`${headerCls}-motion-hidden`}
+      onEnterStart={collapseHeight}
+      onEnterActive={expandedHeight}
+      onLeaveStart={expandedHeight}
+      onLeaveActive={collapseHeight}
+      visible={open}
+      forceRender={forceRender}
+    >
+      {({ className: motionClassName, style: motionStyle }) => {
+        return (
+          <div
+            className={classNames(headerCls, motionClassName, className)}
+            style={{
+              ...motionStyle,
+              ...style,
+            }}
+          >
+            {/* Header */}
+            {(closable !== false || title) && (
+              <div
+                className={
+                  // We follow antd naming standard here.
+                  // So the header part is use `-header` suffix.
+                  // Though its little bit weird for double `-header`.
+                  classNames(`${headerCls}-header`, classes.header)
+                }
+                style={{
+                  ...styles.header,
+                }}
+              >
+                <div className={`${headerCls}-title`}>{title}</div>
+                {closable !== false && (
+                  <div className={`${headerCls}-close`}>
+                    <Button
+                      type="text"
+                      icon={<CloseOutlined />}
+                      size="small"
+                      onClick={() => {
+                        onOpenChange?.(!open);
+                      }}
+                    />
+                  </div>
+                )}
+              </div>
+            )}
+
+            {/* Content */}
+            {children && (
+              <div
+                className={classNames(`${headerCls}-content`, classes.content)}
+                style={{
+                  ...styles.content,
+                }}
+              >
+                {children}
+              </div>
+            )}
+          </div>
+        );
+      }}
+    </CSSMotion>
+  );
+}