@agentscope-ai/chat 1.1.20 → 1.1.22

package/components/Util/hooks/use-proxy-imperative-handle.ts

@@ -0,0 +1,25 @@
+// Proxy the dom ref with `{ nativeElement, otherFn }` type
+// ref: https://github.com/ant-design/ant-design/discussions/45242
+
+import { useImperativeHandle } from 'react';
+import type { Ref } from 'react';
+
+export default function useProxyImperativeHandle<
+  NativeELementType extends HTMLElement,
+  ReturnRefType extends { nativeElement: NativeELementType },
+>(ref: Ref<any> | undefined, init: () => ReturnRefType) {
+  return useImperativeHandle(ref, () => {
+    const refObj = init();
+    const { nativeElement } = refObj;
+
+    return new Proxy(nativeElement, {
+      get(obj: any, prop: any) {
+        if ((refObj as any)[prop]) {
+          return (refObj as any)[prop];
+        }
+
+        return Reflect.get(obj, prop);
+      },
+    });
+  });
+}

package/components/Util/sleep.ts

@@ -0,0 +1,3 @@
+export default function sleep(ms: number) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}

package/components/Util/type.ts

@@ -0,0 +1 @@
+export type AnyObject = Record<PropertyKey, any>;

package/components/Util/warning.ts

@@ -0,0 +1,118 @@
+import rcWarning, { resetWarned as rcResetWarned } from 'rc-util/lib/warning';
+import * as React from 'react';
+
+/* istanbul ignore next */
+export function noop() {}
+
+let deprecatedWarnList: Record<string, string[]> | null = null;
+
+export function resetWarned() {
+  deprecatedWarnList = null;
+  rcResetWarned();
+}
+
+type Warning = (valid: boolean, component: string, message?: string) => void;
+
+let warning: Warning = noop;
+if (process.env.NODE_ENV !== 'production') {
+  warning = (valid, component, message) => {
+    rcWarning(valid, `[antd: ${component}] ${message}`);
+
+    // StrictMode will inject console which will not throw warning in React 17.
+    if (process.env.NODE_ENV === 'test') {
+      resetWarned();
+    }
+  };
+}
+
+type BaseTypeWarning = (
+  valid: boolean,
+  /**
+   * - deprecated: Some API will be removed in future but still support now.
+   * - usage: Some API usage is not correct.
+   * - breaking: Breaking change like API is removed.
+   */
+  type: 'deprecated' | 'usage' | 'breaking',
+  message?: string,
+) => void;
+
+type TypeWarning = BaseTypeWarning & {
+  deprecated: (
+    valid: boolean,
+    oldProp: string,
+    newProp: string,
+    message?: string,
+  ) => void;
+};
+
+export interface WarningContextProps {
+  /**
+   * @description 设置警告等级，当设置为false时会将废弃相关信息聚合为单条信息
+   * @descriptionEn Set the warning level. When set to `false`, discard related information will be aggregated into a single message.
+   */
+  strict?: boolean;
+}
+
+export const WarningContext = React.createContext<WarningContextProps>({});
+
+/**
+ * This is a hook but we not named as `useWarning`
+ * since this is only used in development.
+ * We should always wrap this in `if (process.env.NODE_ENV !== 'production')` condition
+ */
+export const devUseWarning: (component: string) => TypeWarning =
+  process.env.NODE_ENV !== 'production'
+    ? (component) => {
+        const { strict } = React.useContext(WarningContext);
+
+        const typeWarning: TypeWarning = (valid, type, message) => {
+          if (!valid) {
+            if (strict === false && type === 'deprecated') {
+              const existWarning = deprecatedWarnList;
+
+              if (!deprecatedWarnList) {
+                deprecatedWarnList = {};
+              }
+
+              deprecatedWarnList[component] =
+                deprecatedWarnList[component] || [];
+
+              if (!deprecatedWarnList[component].includes(message || '')) {
+                deprecatedWarnList[component].push(message || '');
+              }
+
+              // Warning for the first time
+              if (!existWarning) {
+                // eslint-disable-next-line no-console
+                console.warn(
+                  '[antd] There exists deprecated usage in your code:',
+                  deprecatedWarnList,
+                );
+              }
+            } else {
+              warning(valid, component, message);
+            }
+          }
+        };
+
+        typeWarning.deprecated = (valid, oldProp, newProp, message) => {
+          typeWarning(
+            valid,
+            'deprecated',
+            `\`${oldProp}\` is deprecated. Please use \`${newProp}\` instead.${
+              message ? ` ${message}` : ''
+            }`,
+          );
+        };
+
+        return typeWarning;
+      }
+    : () => {
+        const noopWarning: TypeWarning = () => {};
+
+        noopWarning.deprecated = noop;
+
+        return noopWarning;
+      };
+
+export default warning;

package/components/Version/index.ts

@@ -0,0 +1,3 @@
+import pkg from '../../package.json'
+
+export default pkg.version;

package/components/Voice/Recorder.tsx

@@ -0,0 +1,3 @@
+export default function Recorder() {
+  return <div>...</div>
+}

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

@@ -0,0 +1,8 @@
+---
+group:
+  title: Input
+  order: 2
+title: Voice
+description: Voice Input
+---
+<DemoTitle title="Voice" desc="Voice Input"></DemoTitle>

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

@@ -0,0 +1,9 @@
+---
+group:
+  title: 输入
+  order: 2
+title: Voice
+description: 语音输入
+---
+
+<DemoTitle title="Voice" desc="语音输入"></DemoTitle>

package/components/Welcome/demo/EyeFollower.tsx

@@ -0,0 +1,161 @@
+
+import { createStyles } from "antd-style";
+import React, { useState, useEffect, useRef } from "react";
+
+interface MousePosition {
+  x: number;
+  y: number;
+}
+
+interface EyePosition {
+  x: number;
+  y: number;
+}
+
+const EyeFollower: React.FC = () => {
+  const [mousePosition, setMousePosition] = useState<MousePosition>({
+    x: 0,
+    y: 0,
+  });
+  const [isBlinking, setIsBlinking] = useState<boolean>(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const { styles, cx } = useStyle();
+
+  useEffect(() => {
+    const handleMouseMove = (e: MouseEvent) => {
+      if (containerRef.current) {
+        const rect = containerRef.current.getBoundingClientRect();
+        setMousePosition({
+          x: e.clientX - rect.left,
+          y: e.clientY - rect.top,
+        });
+      }
+    };
+
+    window.addEventListener("mousemove", handleMouseMove);
+    return () => window.removeEventListener("mousemove", handleMouseMove);
+  }, []);
+
+  useEffect(() => {
+    const blinkInterval = setInterval(() => {
+      setIsBlinking(true);
+      setTimeout(() => setIsBlinking(false), 150);
+    }, 5000);
+
+    return () => clearInterval(blinkInterval);
+  }, []);
+
+  const calculateEyePosition = (): EyePosition => {
+    const containerCenterX = 32;
+    const containerCenterY = 32;
+
+    const deltaX = mousePosition.x - containerCenterX;
+    const deltaY = mousePosition.y - containerCenterY;
+
+    const maxMoveX = 6;
+    const maxMoveY = 6;
+
+    const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+    const maxDistance = 50;
+
+    if (distance === 0) return { x: 0, y: 0 };
+
+    const moveRatio = Math.min(distance / maxDistance, 1);
+
+    const moveX = (deltaX / distance) * maxMoveX * moveRatio;
+    const moveY = (deltaY / distance) * maxMoveY * moveRatio;
+
+    return {
+      x: Math.max(-maxMoveX, Math.min(maxMoveX, moveX)),
+      y: Math.max(-maxMoveY, Math.min(maxMoveY, moveY)),
+    };
+  };
+
+  const calculateEyeScale = (isLeftEye: boolean) => {
+    const containerCenterX = 32;
+    const deltaX = mousePosition.x - containerCenterX;
+    const threshold = 400;
+
+    if (Math.abs(deltaX) < threshold) {
+      return 1;
+    }
+
+    const extremeDelta = Math.abs(deltaX) - threshold;
+    const maxExtremeDelta = 32 - threshold;
+    const scaleRatio = Math.min(extremeDelta / maxExtremeDelta, 1);
+
+    if (deltaX > threshold) {
+      if (isLeftEye) {
+        return 1 - scaleRatio * 0.5;
+      } else {
+        return 1;
+      }
+    } else if (deltaX < -threshold) {
+      if (isLeftEye) {
+        return 1;
+      } else {
+        return 1 - scaleRatio * 0.5;
+      }
+    }
+
+    return 1;
+  };
+
+  const leftEyePosition = calculateEyePosition();
+  const rightEyePosition = calculateEyePosition();
+  const leftEyeScale = calculateEyeScale(true);
+  const rightEyeScale = calculateEyeScale(false);
+
+  return (
+    <div ref={containerRef} className={styles.container}>
+      <div
+        className={cx(styles.eye, styles.leftEye, isBlinking ? styles.blinkingEye : '')}
+        style={{
+          transform: `translate(${leftEyePosition.x}px, ${leftEyePosition.y
+            }px) ${isBlinking ? "scaleY(0.1)" : `scaleY(${leftEyeScale})`}`,
+        }}
+      />
+      <div
+        className={cx(styles.eye, styles.rightEye, isBlinking ? styles.blinkingEye : '')}
+        style={{
+          transform: `translate(${rightEyePosition.x}px, ${rightEyePosition.y
+            }px) ${isBlinking ? "scaleY(0.1)" : `scaleY(${rightEyeScale})`}`,
+        }}
+      />
+    </div>
+  );
+};
+
+export default EyeFollower;
+
+const useStyle = createStyles(({ css, token }) => ({
+  container: {
+    width: 64,
+    height: 64,
+    backgroundColor: "black",
+    borderRadius: 12,
+    position: 'relative',
+    cursor: 'pointer',
+    overflow: 'hidden',
+    boxShadow:
+      "15px 0px 30px -10px rgba(131, 88, 246, 0.4), 0px 0px 30px -10px rgba(255, 142, 168, 0.4), -15px 0px 30px -10px rgba(225, 163, 37, 0.4)",
+  },
+  eye: {
+    width: 6,
+    height: 12,
+    backgroundColor: 'white',
+    borderRadius: 99,
+    position: 'absolute',
+    top: 16,
+    transition: 'transform 0.1s ease-out',
+  },
+  leftEye: {
+    left: 22,
+  },
+  rightEye: {
+    left: 36,
+  },
+  blinkingEye: {
+    transition: "transform 0.05s ease-out",
+  },
+}))

package/components/Welcome/demo/demo0.tsx

@@ -0,0 +1,14 @@
+import { Welcome, ChatInput } from '@agentscope-ai/chat';
+import { Flex } from 'antd';
+
+export default function () {
+  return <Flex vertical  style={{ height: '100%', }}>
+    <Welcome
+      style={{ justifyContent: 'center', flex: 1 }}
+      logo={null}
+      title={<div style={{ textAlign: 'center' }}>Nice to meet you!</div>}
+      desc="How can I help you today?"
+    />
+    <ChatInput placeholder='Please type here...' />
+  </Flex>
+}

package/components/Welcome/demo/demo1.tsx

@@ -0,0 +1,16 @@
+import { ChatInput, Welcome } from '@agentscope-ai/chat';
+import { Flex } from "antd";
+
+
+export default function () {
+  return <Flex vertical style={{ height: '100%', }}>
+    <Welcome
+      style={{ justifyContent: 'center', flex: 1 }}
+      title="Nice to meet you!"
+      desc="How can I help you today?"
+      logo="https://gw.alicdn.com/imgextra/i3/O1CN01VFloZL1oERpBMx2Nv_!!6000000005193-55-tps-56-56.svg"
+    />
+
+    <ChatInput placeholder='Please type here...' />
+  </Flex>
+}

package/components/Welcome/demo/demo2.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { ChatInput, Welcome } from '@agentscope-ai/chat';
+import { Flex } from "antd";
+
+
+export default function () {
+  return <Flex vertical style={{ height: '100%', }}>
+
+
+    <Welcome
+      style={{ display: 'block', marginTop: 32,  flex: 1 }}
+      title="How can I help you today?"
+      desc={null}
+      logo={
+        <img
+          style={{
+            width: 40,
+            height: 40,
+            marginBottom: 10,
+          }}
+          src="https://gw.alicdn.com/imgextra/i3/O1CN01VFloZL1oERpBMx2Nv_!!6000000005193-55-tps-56-56.svg" />
+      }
+    />
+
+
+    <ChatInput placeholder='Please type here...' />
+
+
+  </Flex>
+}

package/components/Welcome/demo/demo3.tsx

@@ -0,0 +1,16 @@
+import { ChatInput } from '@agentscope-ai/chat';
+import { Flex } from "antd";
+import EyeFollower from './EyeFollower';
+
+
+export default function () {
+
+  return <Flex vertical style={{ height: '100%', }}>
+    <Flex justify='center' style={{ margin: '64px 0 32px 0', }}>
+      <EyeFollower />
+    </Flex>
+
+    <ChatInput placeholder='Please type here...' />
+  </Flex>
+}
+

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

@@ -0,0 +1,28 @@
+---
+order: 3
+
+group:
+  title: Display
+  order: 1
+title: Welcome
+description: Landing welcome page for conversations
+---
+
+<DemoTitle title="Welcome" desc="Landing welcome page for conversations"></DemoTitle>
+
+<code src="./demo/demo0.tsx">Example</code>
+
+<Install>import { Welcome } from '@agentscope-ai/chat'</Install>
+
+
+#### Welcome Examples
+
+The following are examples and variations of the welcome page component
+
+<code src="./demo/demo1.tsx">With Branding - A</code>
+<code src="./demo/demo2.tsx">With Branding - B</code>
+<code src="./demo/demo3.tsx" height="400">Custom</code>
+
+#### API
+
+<ApiParser source="./index.tsx" id="IWelcomeProps"></ApiParser>

package/components/Welcome/index.tsx

@@ -0,0 +1,72 @@
+import React, { useMemo } from 'react';
+import { createGlobalStyle } from 'antd-style';
+import { useProviderContext } from '@agentscope-ai/chat';
+export interface IWelcomeProps {
+  /**
+   * @description 欢迎页面的主标题，支持文本或React元素
+   * @descriptionEn Main title of the welcome page, supports text or React elements
+   */
+  title?: React.ReactNode | string;
+
+  /**
+   * @description 欢迎页面的描述文本，用于补充说明或引导用户
+   * @descriptionEn Description text of the welcome page for supplementary explanation or user guidance
+   */
+  desc?: React.ReactNode | string;
+
+  /**
+   * @description 欢迎页面的品牌标识，支持图片URL或自定义React元素
+   * @descriptionEn Brand logo of the welcome page, supports image URL or custom React elements
+   */
+  logo?: React.ReactNode | string;
+
+  /**
+   * @description 欢迎组件的内联样式对象，用于自定义外观
+   * @descriptionEn Inline style object for the welcome component for customizing appearance
+   */
+  style?: React.CSSProperties;
+}
+
+const Style = createGlobalStyle`
+.${(p) => p.theme.prefixCls}-welcome {
+  display: flex;
+  align-items: center;
+
+  &-logo {
+    display: block;
+    margin-right: 20px;
+  }
+
+  &-title {
+    font-size: 24px;
+    line-height: 36px;
+    font-weight: bold;
+    color: ${(p) => p.theme.colorText};
+  }
+
+  &-desc {
+    margin-top: 4px;
+    font-size: 24px;
+    line-height: 36px;
+    color: ${(p) => p.theme.colorTextSecondary};
+  }
+}
+`;
+
+export default function (props: IWelcomeProps) {
+  const { getPrefixCls } = useProviderContext();
+  const prefix = getPrefixCls('welcome');
+  const logoEle = typeof props.logo === 'string' ? <img className={prefix + '-logo'} src={props.logo} /> : props.logo;
+
+
+  return <>
+    <Style />
+    <div className={prefix} style={props.style}>
+      {logoEle}
+      <div>
+        {<div className={prefix + '-title'}>{props.title}</div>}
+        {<div className={prefix + '-desc'}>{props.desc}</div>}
+      </div>
+    </div>
+  </>;
+}

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

@@ -0,0 +1,28 @@
+---
+order: 3
+
+group:
+  title: 展现
+  order: 1
+title: Welcome
+description: 对话的落地欢迎页
+---
+
+<DemoTitle title="Welcome" desc="对话的落地欢迎页"></DemoTitle>
+
+<code src="./demo/demo0.tsx">示例</code>
+
+<Install>import { Welcome } from '@agentscope-ai/chat'</Install>
+
+#### 欢迎页示例
+
+以下是欢迎页组件的示例和变体
+
+<code src="./demo/demo1.tsx">附带品牌 - A</code>
+<code src="./demo/demo2.tsx">附带品牌 - B</code>
+<code src="./demo/demo3.tsx" height="400">自定义</code>
+
+
+#### API
+
+<ApiParser source="./index.tsx" id="IWelcomeProps"></ApiParser>

package/components/index.ts

@@ -0,0 +1,88 @@
+export { ConfigProvider } from 'antd';
+
+export { default as version } from './Version';
+
+export * from '@copilotkit/react-core';
+export * from './AGUI';
+
+export {
+  CustomCardsContext,
+  CustomCardsProvider,
+  default as SparkChatProvider,
+  useCustomCardsContext,
+  useGlobalContext,
+  useProviderContext,
+} from './Provider';
+
+export { default as Stream } from './Stream';
+export type { StreamOptions as StreamOptions } from './Stream';
+
+export { createCard } from './Bubble/Cards';
+export {
+  default as ChatAnywhere,
+  useChatAnywhere,
+  useInput,
+  useMessages,
+  useSessionList,
+  uuid,
+} from './ChatAnywhere';
+export type { ChatAnywhereRef, TMessage, TSession } from './ChatAnywhere';
+export * as DefaultCards from './DefaultCards';
+
+export { default as AgentScopeRuntimeWebUI } from './AgentScopeRuntimeWebUI';
+export * from './AgentScopeRuntimeWebUI/lib/types';
+
+export {
+  Accordion,
+  Accordion as Process,
+  type IAccordionProps,
+  type IAccordionProps as IProcess,
+} from './Accordion';
+export {
+  default as DeepThink,
+  default as DeepThinking,
+  type IDeepThinking,
+} from './Accordion/DeepThinking';
+export {
+  default as Attachments,
+  type AttachmentsProps,
+  type AttachmentsProps as IAttachmentsProps,
+} from './Attachments';
+export {
+  default as Bubble,
+  type BubbleProps,
+  type BubbleProps as IBubbleProps,
+} from './Bubble';
+export {
+  default as Conversations,
+  default as HistoryPanel,
+  type ConversationsProps,
+  type ConversationsProps as IHistoryPanel,
+} from './Conversations';
+export {
+  default as DeviceAction,
+  type IDeviceActionProps,
+} from './DeviceAction';
+export { default as Disclaimer, type IDisclaimerProps } from './Disclaimer';
+export {
+  default as ImageGenerator,
+  type IImageGeneratorProps,
+} from './ImageGenerator';
+export { default as Mermaid, type IMermaidProps } from './Mermaid';
+export { default as OperateCard, type IOperateCardProps } from './OperateCard';
+export * from './OperateCard/preset';
+export {
+  default as ChatInput,
+  default as Sender,
+  type SenderProps as IChatInputProps,
+  type SenderProps,
+} from './Sender';
+export { default as StatusCard, type IStatusCardProps } from './StatusCard';
+export { default as sleep } from './Util/sleep';
+export { default as Welcome, type IWelcomeProps } from './Welcome';
+
+export {
+  default as Markdown,
+  type MarkdownProps as IMarkdownProps,
+  type MarkdownProps,
+} from './Markdown';

package/components/overview.en-US.md

@@ -0,0 +1,10 @@
+---
+order: 0
+title: Overview
+---
+
+## Overview
+
+Here you can find all the components available in the library. We are working on adding more components.
+
+<ComponentsOverview></ComponentsOverview>

package/components/overview.zh-CN.md

@@ -0,0 +1,10 @@
+---
+order: 0
+title: 组件概览
+---
+
+## 组件概览
+
+您可以在这里找到本库中所有可用的组件，我们正在持续添加更多组件。
+
+<ComponentsOverview ></ComponentsOverview>

package/lib/AgentScopeRuntimeWebUI/index.d.ts

@@ -1,2 +1,3 @@
 export { default } from './lib/ChatAnywhere';
+export { default as Demo } from './starter';
 export * from './lib/types';

package/lib/AgentScopeRuntimeWebUI/index.js

@@ -1,2 +1,3 @@
 export { default } from "./lib/ChatAnywhere";
+export { default as Demo } from "./starter";
 export * from "./lib/types";