@agentscope-ai/chat 1.1.20 → 1.1.22

package/components/Attachments/util.ts

@@ -0,0 +1,56 @@
+// Follow code is copy from `antd/components/upload/utils.ts`:
+
+export const isImageFileType = (type: string): boolean => type.indexOf('image/') === 0;
+
+const MEASURE_SIZE = 200;
+
+export function previewImage(file: File | Blob): Promise<string> {
+  return new Promise<string>((resolve) => {
+    if (!file || !file.type || !isImageFileType(file.type)) {
+      resolve('');
+      return;
+    }
+
+    const img = new Image();
+    img.onload = () => {
+      const { width, height } = img;
+
+      const ratio = width / height;
+      const MEASURE_SIZE_WIDTH = ratio > 1 ? MEASURE_SIZE : MEASURE_SIZE * ratio;
+      const MEASURE_SIZE_HEIGHT = ratio > 1 ? MEASURE_SIZE / ratio : MEASURE_SIZE;
+
+      const canvas = document.createElement('canvas');
+      canvas.width = MEASURE_SIZE_WIDTH;
+      canvas.height = MEASURE_SIZE_HEIGHT;
+      canvas.style.cssText = `position: fixed; left: 0; top: 0; width: ${MEASURE_SIZE_WIDTH}px; height: ${MEASURE_SIZE_HEIGHT}px; z-index: 9999; display: none;`;
+      document.body.appendChild<HTMLCanvasElement>(canvas);
+      const ctx = canvas.getContext('2d');
+
+      ctx!.drawImage(img, 0, 0, MEASURE_SIZE_WIDTH, MEASURE_SIZE_HEIGHT);
+      const dataURL = canvas.toDataURL();
+      document.body.removeChild(canvas);
+      window.URL.revokeObjectURL(img.src);
+      resolve(dataURL);
+    };
+    img.crossOrigin = 'anonymous';
+    if (file.type.startsWith('image/svg+xml')) {
+      const reader = new FileReader();
+      reader.onload = () => {
+        if (reader.result && typeof reader.result === 'string') {
+          img.src = reader.result;
+        }
+      };
+      reader.readAsDataURL(file);
+    } else if (file.type.startsWith('image/gif')) {
+      const reader = new FileReader();
+      reader.onload = () => {
+        if (reader.result) {
+          resolve(reader.result as string);
+        }
+      };
+      reader.readAsDataURL(file);
+    } else {
+      img.src = window.URL.createObjectURL(file);
+    }
+  });
+}

package/components/Bubble/Avatar.tsx

@@ -0,0 +1,39 @@
+import { Avatar as AAvatar } from 'antd';
+import classnames from 'classnames';
+import React from 'react';
+import { BubbleProps } from './interface';
+
+interface AvatarProps
+  extends Pick<BubbleProps, 'avatar' | 'msgStatus' | 'prefixCls'> {
+  isAssistant?: boolean;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+const Avatar: React.FC<AvatarProps> = (props) => {
+  const { avatar, msgStatus, isAssistant, prefixCls, className, style } = props;
+
+  const avatarNode = React.isValidElement(avatar) ? (
+    avatar
+  ) : (
+    <AAvatar {...avatar} />
+  );
+
+  return (
+    <div
+      className={classnames(
+        `${prefixCls}-avatar`,
+        {
+          [`${prefixCls}-avatar-loading`]:
+            isAssistant && msgStatus === 'generating',
+        },
+        className,
+      )}
+      style={style}
+    >
+      {avatarNode}
+    </div>
+  );
+};
+
+export default Avatar;

package/components/Bubble/Bubble.tsx

@@ -0,0 +1,131 @@
+import classnames from 'classnames';
+import React from 'react';
+import type { BubbleProps } from './interface';
+import Style from './style/index';
+import { Markdown, useProviderContext } from '@agentscope-ai/chat';
+import Cards from './Cards';
+import Spin from './Spin';
+import Avatar from './Avatar';
+
+export interface BubbleRef {
+  /**
+   * @description 气泡组件的原生DOM元素引用，用于直接操作DOM
+   * @descriptionEn Native DOM element reference of the bubble component for direct DOM manipulation
+   */
+  nativeElement: HTMLElement;
+}
+
+export interface BubbleContextProps {
+  /**
+   * @description 气泡内容更新时的回调函数，用于触发重新渲染
+   * @descriptionEn Callback function when bubble content updates for triggering re-render
+   */
+  onUpdate?: VoidFunction;
+}
+
+export const BubbleContext = React.createContext<BubbleContextProps>({});
+
+const Bubble: React.FC<BubbleProps> = (props) => {
+
+  const {
+    isLast,
+    className,
+    rootClassName,
+    style,
+    classNames = {},
+    styles = {},
+    avatar,
+    content = '',
+    cards,
+    msgStatus,
+    id,
+    role,
+    // @ts-ignore
+    variant,
+  } = props;
+
+  const placement = {
+    'assistant': 'start',
+    'user': 'end',
+  }[role] || 'start'
+  const { getPrefixCls } = useProviderContext();
+  const prefixCls = getPrefixCls('bubble');
+
+  const mergedCls = classnames(
+    prefixCls,
+    rootClassName,
+    className,
+    `${prefixCls}-${placement}`,
+  );
+
+  let contentNode;
+  // @ts-ignore
+  const isEmpty = !content?.length && !cards?.length;
+  if (props.msgStatus === 'generating' && (isEmpty)) {
+    contentNode = <Spin />
+  } else {
+    contentNode = content ? (
+      <Markdown
+        content={content as string}
+        cursor={props.msgStatus === 'generating'}
+      />
+    ) : null
+  }
+
+  const isAssistant = placement === 'assistant' || placement === 'start';
+  const variantClassname = `${prefixCls}-content-${variant || (isAssistant ? 'borderless' : 'filled')}`;
+  let fullContent: React.ReactNode = (
+    <div
+      style={!isAssistant && contentNode ? { flexDirection: 'column-reverse' } : {}}
+      className={`${prefixCls}-content-wrapper`}
+    >
+      <Cards cards={cards} id={id} isLast={isLast} className={classnames(
+        `${prefixCls}-content`,
+        `${prefixCls}-content-wrapper-card`,
+        variantClassname,
+        classNames.content,
+      )} />
+
+      {
+        contentNode && <div
+          style={{
+            ...styles.content,
+          }}
+          className={classnames(
+            `${prefixCls}-content`,
+            `${prefixCls}-content-wrapper-card`,
+            variantClassname,
+            classNames.content,
+          )}
+        >
+          {contentNode}
+        </div>
+      }
+    </div>);
+
+  return <>
+    <Style />
+    <div
+      style={style}
+      className={mergedCls}
+      id={id}
+      data-role={role}
+    >
+      {
+        avatar && <Avatar
+          avatar={avatar}
+          msgStatus={msgStatus}
+          isAssistant={isAssistant}
+          prefixCls={prefixCls}
+          className={classNames.avatar}
+          style={styles.avatar}
+        />
+      }
+
+      {fullContent}
+    </div>
+  </>
+};
+
+
+export default React.memo(Bubble);

package/components/Bubble/BubbleList.tsx

@@ -0,0 +1,105 @@
+import Bubble from './Bubble';
+import type { BubbleProps } from './interface';
+import ScrollToBottom from './ScrollToBottom';
+import { StickToBottom } from 'use-stick-to-bottom';
+import Style from './style/list';
+import { useProviderContext } from '@agentscope-ai/chat';
+import React, { useEffect, useRef, useState } from 'react';
+import cls from 'classnames';
+import { useMount } from 'ahooks';
+
+export interface BubbleListRef {
+  /**
+   * @description 滚动到列表底部的方法，用于自动滚动到最新消息
+   * @descriptionEn Method to scroll to the bottom of the list for auto-scrolling to latest messages
+   */
+  scrollToBottom(): void
+}
+
+export type BubbleDataType = BubbleProps & {
+  key?: string | number;
+  role?: string;
+  id?: string;
+};
+
+
+export interface BubbleListProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * @description 气泡消息数据数组，用于渲染消息列表
+   * @descriptionEn Bubble message data array for rendering message list
+   */
+  items?: BubbleDataType[];
+  /**
+   * @description 自定义子元素，用于扩展组件功能或自定义渲染
+   * @descriptionEn Custom child elements for extending component functionality or custom rendering
+   */
+  children?: React.ReactNode | React.ReactNode[];
+  /**
+   * @description 是否启用平滑滚动效果，影响滚动动画的流畅度
+   * @descriptionEn Whether to enable smooth scrolling effect, affects scrolling animation smoothness
+   */
+  smooth?: boolean;
+  /**
+   * @description 语义化CSS类名，用于为不同区域添加自定义类名
+   * @descriptionEn Semantic CSS class names for adding custom classes to different areas
+   */
+  classNames?: {
+    wrapper?: string;
+    list?: string;
+  }
+}
+
+
+const BubbleList: React.ForwardRefRenderFunction<BubbleListRef, BubbleListProps> = (props, ref) => {
+  const {
+    items = [],
+    smooth = true,
+  } = props;
+
+  const [initial, setInitial] = useState(false);
+  const scrollToBottomRef = React.useRef();
+  const { getPrefixCls } = useProviderContext();
+  const prefixCls = getPrefixCls('bubble-list');
+
+  React.useImperativeHandle(ref, () => ({
+    scrollToBottom: () => {
+      // @ts-ignore
+      scrollToBottomRef.current.scrollToBottom()
+    }
+  }));
+
+  useMount(() => {
+    setInitial(true);
+  });
+
+  const resize = initial ? (smooth ? 'smooth' : 'instant') : 'instant';
+
+  return <>
+    <Style />
+    <StickToBottom
+      id={props.id}
+      className={cls(`${prefixCls}-wrapper`, props.classNames?.wrapper)}
+      resize={resize}
+      initial="instant"
+      style={props.style}
+    >
+      <StickToBottom.Content className={cls(`${prefixCls}`, props.classNames?.list)}>
+        {props.children ? props.children : items.map(({ key, ...bubble }, index) => {
+          const isLast = index === items.length - 1;
+          return (
+            <Bubble
+              {...bubble}
+              isLast={isLast}
+              key={bubble.id || key}
+            />
+          )
+        })}
+      </StickToBottom.Content>
+      <ScrollToBottom ref={scrollToBottomRef}></ScrollToBottom>
+    </StickToBottom>
+  </>;
+};
+
+const ForwardBubbleList = React.forwardRef(BubbleList);
+
+export default ForwardBubbleList;

package/components/Bubble/Cards.tsx

@@ -0,0 +1,61 @@
+import React, { useContext, useMemo } from 'react';
+import { useChatAnywhere, useCustomCardsContext } from '@agentscope-ai/chat';
+
+
+interface ICardProps {
+  code: string,
+  component?: React.FC,
+  data?: string | any,
+  index?: number,
+  id?: string,
+  isLast?: boolean,
+}
+
+const Card = React.memo(function (props: ICardProps) {
+  const cardConfig = useCustomCardsContext();
+  const onInput = useChatAnywhere(v => v.onInput);
+
+
+  const Component = useMemo(() => {
+    if (props.component) return props.component;
+    const cardConfigMap = cardConfig;
+
+    return cardConfigMap?.[props.code] || (() => `${props.code} not found`);
+  }, [])
+
+  if (typeof Component === 'function') {
+    const { component, ...rest } = props;
+    return <Component {...rest} context={{ onInput }} />
+  } else {
+    return Component;
+  }
+})
+
+export default function Cards(props: {
+  cards: ICardProps[],
+  id: string,
+  className?: string,
+  isLast?: boolean,
+}) {
+  const { cards } = props;
+  if (!cards?.length) return null;
+  return cards.map((card, index) => {
+    const cardComp = <Card
+      key={card?.id || index + card.code}
+      index={index}
+      id={props.id}
+      isLast={props.isLast}
+      {...card}
+    />;
+
+    if (card.code === 'Text') return <div className={props.className} key={index}>{cardComp}</div>
+    return cardComp;
+  });
+}
+
+export function createCard(code: string, data: any) {
+  return {
+    code,
+    data
+  }
+}

package/components/Bubble/Footer.tsx

@@ -0,0 +1,55 @@
+import React, { ReactElement } from 'react';
+import { useProviderContext } from '@agentscope-ai/chat';
+import { IconButton } from '@agentscope-ai/design';
+import Style from './style/footer';
+
+export default function Footer(props: {
+  left?: React.ReactElement;
+  right?: React.ReactElement;
+
+}) {
+  const { getPrefixCls } = useProviderContext();
+  const prefixCls = getPrefixCls('bubble-footer');
+  const { left, right } = props;
+  if ((left && !left.type) || (right && !right.type)) return null;
+
+  return <>
+    <Style />
+    <div className={prefixCls}>
+      <div className={`${prefixCls}-left`}>{props.left}</div>
+      <div className={`${prefixCls}-right`}>{props.right}</div>
+    </div>
+  </>;
+}
+
+
+export function FooterActions(props: {
+  data: { icon: string | ReactElement, label?: string, onClick: () => void }[]
+}) {
+  const { getPrefixCls } = useProviderContext();
+  const prefixCls = getPrefixCls('bubble-footer-actions');
+
+  return <div className={prefixCls}>
+    {props.data.map((item, index) => {
+      return <IconButton bordered={false} key={index} icon={item.icon} size='small' onClick={item.onClick}></IconButton>
+    })}
+  </div>;
+
+};
+
+
+export function FooterCount(props: {
+  data: [string | number, string | number][]
+}) {
+  const { getPrefixCls } = useProviderContext();
+  const prefixCls = getPrefixCls('bubble-footer-count');
+
+  return <div className={prefixCls}>
+    {props.data.map(item => {
+      return <div className={`${prefixCls}-item`} key={item[0]}>{item[0]}：{item[1]}</div>
+    })}
+  </div>;
+}
+
+Footer.Actions = FooterActions;
+Footer.Count = FooterCount;

package/components/Bubble/Interrupted.tsx

@@ -0,0 +1,82 @@
+import { createGlobalStyle } from 'antd-style';
+import { useProviderContext } from '@agentscope-ai/chat';
+import { SparkErrorCircleFill, SparkStopCircleLine } from '@agentscope-ai/icons';
+
+const Style = createGlobalStyle`
+.${p => p.theme.prefixCls}-interrupted {
+  display: inline-flex;
+  flex-direction: column;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 18px;
+  letter-spacing: 0px;
+  background-color: ${p => p.theme.colorFillSecondary};
+  padding: 10px 12px;
+  line-height: 1;
+  border-radius: 8px;
+  gap: 8px;
+}
+.${p => p.theme.prefixCls}-interrupted-desc {
+  font-weight: normal;
+  word-break: break-word;
+}
+
+.${p => p.theme.prefixCls}-interrupted-header {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  color: ${p => p.theme.colorText};
+
+  &-icon-wrapper {
+    width: 16px;
+    height: 16px;
+    flex: 0 0 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &-error {
+    color: ${p => p.theme.colorError};
+    font-size: 16px;
+  }
+
+  &-interrupted {
+    font-size: 16px;
+  }
+  
+}
+
+`
+
+interface IProps {
+
+  title?: string;
+  type?: 'error' | 'interrupted';
+  desc?: string;
+}
+
+
+export default function Interrupted(props: IProps) {
+  const { title = 'Answers have stopped', type = 'interrupted', desc } = props;
+  const { getPrefixCls } = useProviderContext();
+  const prefixCls = getPrefixCls('interrupted');
+
+
+  return <>
+    <Style />
+    <div className={`${prefixCls}`}>
+      <div className={`${prefixCls}-header`}>
+        <div className={`${prefixCls}-icon-wrapper`}>
+          {
+            type === 'interrupted' ? <SparkStopCircleLine className={`${prefixCls}-header-interrupted`} /> : <SparkErrorCircleFill className={`${prefixCls}-header-error`} />
+          }
+        </div>
+        <span>{title}</span>
+      </div>
+      {
+        desc && <div className={`${prefixCls}-desc`}>{desc}</div>
+      }
+    </div>
+  </>
+}

package/components/Bubble/ScrollToBottom.tsx

@@ -0,0 +1,42 @@
+import React, { useState, useEffect } from 'react';
+import { useProviderContext } from '@agentscope-ai/chat';
+import cls from 'classnames';
+import { ScrollToBottomOptions, useStickToBottomContext } from 'use-stick-to-bottom';
+import { IconButton } from '@agentscope-ai/design';
+import { SparkDownArrowLine } from '@agentscope-ai/icons';
+
+
+const ScrollToBottomButton: React.ForwardRefRenderFunction<{
+  scrollToBottom(options?: ScrollToBottomOptions): void
+}> = (_, ref) => {
+  const { getPrefixCls } = useProviderContext();
+  const { isAtBottom, scrollToBottom } = useStickToBottomContext();
+
+  React.useImperativeHandle(ref, () => ({
+    scrollToBottom: (options?: ScrollToBottomOptions) => {
+      options = options || {
+        animation: 'instant'
+      }
+      scrollToBottom(options)
+    },
+  }));
+
+
+  const prefixCls = getPrefixCls('bubble-list-scroll-to-bottom');
+
+  return (
+    <div className={cls(prefixCls, `${prefixCls}-${!isAtBottom ? 'show' : 'hide'}`)}>
+
+      <IconButton
+        icon={<SparkDownArrowLine />}
+        shape='circle'
+        onClick={() => scrollToBottom({
+          animation: 'instant'
+        })}
+      />
+
+    </div>
+  );
+};
+
+export default React.forwardRef(ScrollToBottomButton);

package/components/Bubble/Spin.tsx

@@ -0,0 +1,13 @@
+import { useProviderContext } from "@agentscope-ai/chat";
+
+export default function () {
+  const { getPrefixCls } = useProviderContext();
+  const prefixCls = getPrefixCls('bubble-loading');
+
+  return <div className={prefixCls} >
+    <div className={`${prefixCls}-dot1`} />
+    <div className={`${prefixCls}-dot2`} />
+    <div className={`${prefixCls}-dot3`} />
+    <div className={`${prefixCls}-text`}>-</div>
+  </div>
+}

package/components/Bubble/demo/assistantWithCode.tsx

@@ -0,0 +1,60 @@
+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.
+
+\`\`\`javascript
+function bubbleSort(arr) {
+  const n = arr.length;
+  for (let i = 0; i < n - 1; i++) {
+    for (let j = 0; j < n - i - 1; j++) {
+      if (arr[j] > arr[j + 1]) {
+        [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];
+      }
+    }
+  }
+  return arr;
+}
+\`\`\`
+
+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.`
+      },
+    }, {
+      code: 'Footer',
+      data: {
+        left: <DefaultCards.FooterActions data={[
+          {
+            icon: <SparkCopyLine />, onClick: () => {
+            }
+          },
+          {
+            icon: <SparkThumbsUpLine />, onClick: () => {
+            }
+          },
+          {
+            icon: <SparkThumbsDownLine />, onClick: () => {
+            }
+          },
+
+          {
+            icon: <SparkReplaceLine />, onClick: () => {
+            }
+          },
+        ]} />,
+      },
+    }
+
+  ]}
+
+
+
+    role="assistant"></Bubble>
+}