refactor: Use Ant Design X instead

assistant/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@petercatai/assistant",
-  "version": "1.0.22",
+  "version": "1.0.23",
   "description": "PeterCat Assistant Application",
-  "module": "dist/esm/index.js",
-  "types": "dist/esm/index.d.ts",
-  "style": "dist/esm/style.css",
-  "browser": "dist/umd/assistant.min.js",
+  "repository": "https://github.com/petercat-ai/petercat.git",
+  "license": "MIT",
+  "sideEffects": [
+    "**/*.css"
+  ],
   "exports": {
     ".": {
       "import": "./dist/esm/index.js"
@@ -14,25 +15,24 @@
       "import": "./dist/esm/style.css"
     }
   },
+  "module": "dist/esm/index.js",
+  "browser": "dist/umd/assistant.min.js",
+  "types": "dist/esm/index.d.ts",
+  "style": "dist/esm/style.css",
   "scripts": {
-    "start": "npm run dev",
-    "dev": "dumi dev",
-    "build:css": "tailwindcss -i tailwind.css -o ./src/style.css",
     "build": "npm run build:css && cp ./src/style.css ./.dumi/tmp/style.css && father build",
+    "build:css": "tailwindcss -i tailwind.css -o ./src/style.css",
     "build:watch": "father dev",
+    "dev": "dumi dev",
     "docs:build": "dumi build",
-    "prepare": "dumi setup",
     "doctor": "father doctor",
     "lint": "npm run lint:es && npm run lint:css",
     "lint:css": "stylelint \"{src,test}/**/*.{css,less}\"",
     "lint:es": "eslint \"{src,test}/**/*.{js,jsx,ts,tsx}\"",
-    "prepublishOnly": "father doctor && npm run build"
+    "prepare": "dumi setup",
+    "prepublishOnly": "father doctor && npm run build",
+    "start": "npm run dev"
   },
-  "authors": [],
-  "license": "MIT",
-  "sideEffects": [
-    "**/*.css"
-  ],
   "commitlint": {
     "extends": [
       "@commitlint/config-conventional"
@@ -55,17 +55,11 @@
       "prettier --parser=typescript --write"
     ]
   },
-  "publishConfig": {
-    "access": "public"
-  },
-  "peerDependencies": {
-    "react": ">=16.9.0 <19.0.0",
-    "react-dom": ">=16.9.0 <19.0.0"
-  },
   "dependencies": {
     "@ant-design/icons": "^5.3.5",
     "@ant-design/pro-chat": "^1.9.0",
     "@ant-design/pro-editor": "^1.1.1",
+    "@ant-design/x": "^1.0.0",
     "@babel/runtime": "^7.18.0",
     "antd": "^5.15.3",
     "antd-style": "^3.6.1",
@@ -81,7 +75,7 @@
   "devDependencies": {
     "@commitlint/cli": "^17.1.2",
     "@commitlint/config-conventional": "^17.1.0",
-    "@types/lodash": "^4.14.202",
+    "@types/lodash": "^4.17.13",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "@umijs/lint": "^4.0.0",
@@ -97,5 +91,12 @@
     "react-dom": "^18.0.0",
     "stylelint": "^14.9.1"
   },
-  "repository": "https://github.com/petercat-ai/petercat.git"
+  "peerDependencies": {
+    "react": ">=16.9.0 <19.0.0",
+    "react-dom": ">=16.9.0 <19.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "authors": []
 }

assistant/src/Assistant/index.tsx

@@ -10,12 +10,19 @@ export interface AssistantProps extends ChatProps {
   showBubble: boolean;
   isVisible: boolean;
   onClose?: () => void;
+  bottom?: number;
 }
 
 const Assistant = (props: AssistantProps) => {
-  const { showBubble = true, isVisible, onClose, drawerWidth = 500 } = props;
+  const {
+    showBubble = true,
+    isVisible,
+    onClose,
+    drawerWidth = 500,
+    bottom = 120,
+  } = props;
   const [chatVisible, setChatVisible] = useState(isVisible);
-  const [position, setPosition] = useState({ bottom: 120 });
+  const [position, setPosition] = useState({ bottom: bottom });
 
   const toggleDrawer = () => {
     setChatVisible(!chatVisible);

assistant/src/Chat/components/InputAreaRender.tsx

@@ -157,7 +157,7 @@ const InputAreaRender = (props: {
   return (
     <Form
       form={form}
-      className="relative px-[12px] py-[10px] m-[12px] rounded-[10px] lui-input-area bg-[#f1f1f1]"
+      className="relative px-[12px] py-[10px] rounded-[10px] lui-input-area bg-[#f1f1f1]"
       style={{ opacity: disabled ? 0.6 : 1 }}
     >
       {disabled && disabledPlaceholder && (

assistant/src/Chat/components/LoadingStart.tsx

@@ -5,13 +5,14 @@ const LoadingAnimationStart = require('../../assets/bubble-start.json');
 interface LoadingStartProps {
   loop?: boolean;
   onComplete?: () => void;
+  className?: string;
 }
 
 const LoadingStart: React.FC<LoadingStartProps> = (props) => {
   const { onComplete, loop = true } = props;
 
   return (
-    <div className="loading">
+    <div className={`loading ${props.className || ''}`}>
       <Lottie
         animationData={LoadingAnimationStart}
         loop={loop}

assistant/src/Chat/components/MarkdownRender.tsx

@@ -0,0 +1,18 @@
+/* eslint-disable react/no-danger */
+import { Markdown } from '@ant-design/pro-editor';
+import React from 'react';
+
+interface IProps {
+  className?: string;
+  content: string;
+}
+
+const MarkdownRender = (props: IProps) => (
+  <Markdown
+    className="ant-pro-chat-list-item-message-content"
+    style={{ overflowX: 'hidden', overflowY: 'auto' }}
+  >
+    {props.content}
+  </Markdown>
+);
+export default MarkdownRender;

assistant/src/Chat/components/MySpinner.tsx

@@ -0,0 +1,26 @@
+'use client';
+import { Spin } from 'antd';
+import React from 'react';
+
+export interface ISpinnerProps {
+  loading?: boolean;
+  spinner?: React.ReactNode;
+  children?: React.ReactNode;
+}
+
+const MySpinner = (props: ISpinnerProps) => {
+  const { loading } = props;
+  if (loading) {
+    return (
+      <div className="relative w-full h-full">
+        <div className="absolute top-0 left-0 w-full h-full pointer-events-none flex justify-center items-center bg-white bg-opacity-75">
+          {props.spinner ?? <Spin />}
+        </div>
+        {props.children}
+      </div>
+    );
+  }
+  return props.children;
+};
+
+export default MySpinner;

assistant/src/Chat/index.css

@@ -1,8 +1,38 @@
-.chat_item_container{
+.chat_item_container {
   position: relative;
-    width: 100%;
-    max-width: 100vw;
-    padding: 16px;
-    content-visibility: auto;
-    contain-intrinsic-size: 100px;
-}
+  width: 100%;
+  max-width: 100vw;
+  padding: 16px;
+  content-visibility: auto;
+  contain-intrinsic-size: 100px;
+}
+.petercat-avatar {
+  flex: 0 0 40px;
+}
+.petercat-avatar .ant-avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+}
+.petercat-header {
+  font-size: 12px !important;
+  line-height: 1 !important;
+  color: rgba(0, 0, 0, 0.45) !important;
+}
+
+.petercat-content-start {
+  padding: 8px 16px 8px 16px !important;
+  border-radius: 16px !important;
+  background: rgba(241, 241, 241, 1) !important;
+}
+
+.petercat-content-end {
+  padding: 8px 16px 8px 16px !important;
+  border-radius: 16px !important;
+  background: rgba(250, 228, 203, 1) !important;
+}
+
+.pertercat-assistant-spin-wrapper .ant-spin-container {
+  width: 100%;
+  height: 100%;
+}

assistant/src/Chat/index.md

@@ -4,7 +4,7 @@ atomId: Chat
 
 # Chat
 
-Chat 是一个基于 @ant-design/pro-chat 和 @ant-design/pro-editor 构建的聊天组件，提供了丰富的功能和配置选项。它支持与一个基于API的聊天服务进行交互，并且可以渲染多种消息类型。
+Chat 是一个基于 @ant-design/pro-chat 和 @ant-design/pro-editor 构建的聊天组件，提供了丰富的功能和配置选项。它支持与一个基于 API 的聊天服务进行交互，并且可以渲染多种消息类型。
 
 ## 安装
 
@@ -16,6 +16,7 @@ npm install @petercatai/assistant
 
 ## 使用示例
 
+
 ```jsx
 import React, { useEffect, useState } from 'react';
 import { Chat } from '@petercatai/assistant';
@@ -26,16 +27,25 @@ export default () => {
   useEffect(() => {
     console.log('res', res);
   }, [res]);
-
+  const meta = {
+      avatar: `https://mdn.alipayobjects.com/huamei_bfc7ch/afts/img/A*allUQLXaWmYAAAAAAAAAAAAADst8AQ/original`,
+      title: 'AI助手',
+  }
   return (
     <div style={{ height: '100vh' }}>
       <Chat
         disabled={false}
-        disabledPlaceholder="`机器人尚未配置任何内容  请在完成配置后进行对话测试`"
-        starters={['介绍下xxx这个项目', '查看xxx的贡献指南', '我该怎样快速上手']}
-        apiUrl="/api/chat/stream_builder"
+        helloMessage={"您好！感谢您的热情和支持！作为阿里巴巴云的AI助手Qwen，我的目标是尽可能地为您提供帮助和服务。您可以向我提出各种问题或需求，比如： 1. **技术咨询**：如果您在使用阿里云的产品或服务时遇到技术难题，或者想了解最新的技术趋势，都可以随时询问。 2. **产品使用指导**：对于阿里云的各种产品，如ECS、RDS等，如果您需要详细的使用指南或操作建议，我也很乐意提供帮助。 3. **创意灵感**：如果您正在寻找新的业务想法或是想要提升现有项目的创新点，我们可以一起探讨，激发更多可能性。 4. **行业资讯**：如果您对特定行业的最新动态感兴趣，例如云计算、人工智能等领域的发展情况，我可以帮您搜集相关信息。 无论您的需求是什么，只要是我能力范围内的，我都会尽全力协助。期待能够成为您值得信赖的伙伴，共同成长进步！如果有具体的需求，请随时告诉我哦。😊"}
+        disabledPlaceholder="`机器人尚未配置任何内容 ,请在完成配置后进行对话测试`"
+        starters={[
+          '介绍下xxx这个项目',
+          '查看xxx的贡献指南',
+          '我该怎样快速上手',
+        ]}
+        apiUrl="/api/chat/stream_qa"
         hideLogo="true"
         getToolsResult={setRes}
+        assistantMeta={meta}
       />
     </div>
   );
@@ -44,19 +54,18 @@ export default () => {
 
 ## API
 
-
-| 属性名               | 类型                             | 默认值                    | 描述                                                                                  |
-| -------------------- | -------------------------------- | ------------------------- | ------------------------------------------------------------------------------------- |
-| `apiDomain`          | `string`                         | `'http://api.petercat.ai'` | API域名地址，组件将通过此域名与后端服务进行通信。                                      |
-| `apiUrl`             | `string`                         | `undefined`               | 指定聊天API的URL路径，如果未指定，将使用默认路径。                                     |
-| `drawerWidth`        | `number`                         | `500`                     | 控制聊天窗口的宽度。                                                                  |
-| `assistantMeta`      | `MetaData`                       | `{}`                      | 设置聊天助手的元数据信息，包括头像、标题和背景颜色。                                   |
-| `helloMessage`       | `string`                         | `undefined`               | 设定聊天窗口打开时的欢迎消息。                                                        |
-| `starters`           | `string[]`                       | `[]`                      | 聊天启动器消息的数组，用户可以选择这些消息来快速开始对话。                            |
-| `prompt`             | `string`                         | `undefined`               | 指定聊天的提示内容，用于指导对话的进行。                                              |
-| `token`              | `string`                         | `undefined`               | 用于验证聊天服务的令牌。                                                              |
-| `style`              | `React.CSSProperties`            | `{}`                      | 自定义聊天组件的内联样式。                                                            |
-| `hideLogo`           | `boolean`                        | `false`                   | 是否隐藏聊天窗口顶部的Logo。                                                          |
-| `disabled`           | `boolean`                        | `false`                   | 是否禁用聊天输入区域，禁用后用户无法输入消息。                                         |
-| `disabledPlaceholder`| `string`                         | `undefined`               | 当聊天输入区域被禁用时显示的占位符文本。                                              |
-| `getToolsResult`     | `(response: any) => void`        | `undefined`               | 用于接收工具处理结果的回调函数。                                                      |
+| 属性名 | 类型 | 默认值 | 描述 |
+| --- | --- | --- | --- |
+| `apiDomain` | `string` | `'http://api.petercat.ai'` | API 域名地址，组件将通过此域名与后端服务进行通信。 |
+| `apiUrl` | `string` | `undefined` | 指定聊天 API 的 URL 路径，如果未指定，将使用默认路径。 |
+| `drawerWidth` | `number` | `500` | 控制聊天窗口的宽度。 |
+| `assistantMeta` | `MetaData` | `{}` | 设置聊天助手的元数据信息，包括头像、标题和背景颜色。 |
+| `helloMessage` | `string` | `undefined` | 设定聊天窗口打开时的欢迎消息。 |
+| `starters` | `string[]` | `[]` | 聊天启动器消息的数组，用户可以选择这些消息来快速开始对话。 |
+| `prompt` | `string` | `undefined` | 指定聊天的提示内容，用于指导对话的进行。 |
+| `token` | `string` | `undefined` | 用于验证聊天服务的令牌。 |
+| `style` | `React.CSSProperties` | `{}` | 自定义聊天组件的内联样式。 |
+| `hideLogo` | `boolean` | `false` | 是否隐藏聊天窗口顶部的 Logo。 |
+| `disabled` | `boolean` | `false` | 是否禁用聊天输入区域，禁用后用户无法输入消息。 |
+| `disabledPlaceholder` | `string` | `undefined` | 当聊天输入区域被禁用时显示的占位符文本。 |
+| `getToolsResult` | `(response: any) => void` | `undefined` | 用于接收工具处理结果的回调函数。 |