feat: optimize AIAgent components

Author: liuxy0551

.github/workflows/CI.yml

@@ -5,9 +5,9 @@ name: CI
 # Triggers the workflow on push or pull request events but only for the master branch
 on:
   # push:
-  #   branches: "*"
+  #   branches: ["*"]
   pull_request:
-    branches: "*"
+    branches: ["*"]
 
 # A workflow run is made up of one or more jobs that can run sequentially or in parallel
 jobs:

src/chat/__tests__/useChat.test.ts

@@ -138,21 +138,21 @@ describe('Test useChat', () => {
         act(() => {
             result.current.message.update(mockPrompt.id, mockMessage.id, (m) => ({
                 ...m,
-                assistantId: 111,
+                assistantId: '111',
             }));
         });
         expect(result.current.message.get(mockPrompt.id, mockMessage.id)).toEqual<BaseMessage>(
-            new BaseMessage({ ...mockMessage, assistantId: 111 })
+            new BaseMessage({ ...mockMessage, assistantId: '111' })
         );
 
         fn.mockRestore();
         act(() => {
             result.current.message.update(mockPrompt.id, mockMessage.id, {
-                assistantId: 123,
+                assistantId: '123',
             });
         });
         expect(result.current.message.get(mockPrompt.id, mockMessage.id)).toEqual<BaseMessage>(
-            new BaseMessage({ ...mockMessage, assistantId: 123 })
+            new BaseMessage({ ...mockMessage, assistantId: '123' })
         );
         expect(fn).toBeCalledTimes(1);
 
@@ -162,13 +162,13 @@ describe('Test useChat', () => {
                 mockMessage.id,
                 (m) => ({
                     ...m,
-                    assistantId: 111,
+                    assistantId: '111',
                 }),
                 false
             );
         });
         expect(result.current.message.get(mockPrompt.id, mockMessage.id)).toEqual<BaseMessage>(
-            new BaseMessage({ ...mockMessage, assistantId: 111 })
+            new BaseMessage({ ...mockMessage, assistantId: '111' })
         );
         expect(fn).toBeCalledTimes(1);
 
@@ -418,7 +418,7 @@ describe('Test useChat', () => {
         act(() => {
             result.current.message.create(mockPrompt.id, mockMessage);
             result.current.message.update(mockPrompt.id, mockMessage.id, {
-                assistantId: 1,
+                assistantId: '1',
             });
             result.current.message.remove(mockPrompt.id, mockMessage.id);
         });
@@ -428,7 +428,7 @@ describe('Test useChat', () => {
             result.current.conversation.create(mockConversation);
             result.current.prompt.update(mockPrompt.id, { assistantId: 'assistant_prompt_id' });
             result.current.message.create(mockPrompt.id, mockMessage);
-            result.current.message.update(mockPrompt.id, mockMessage.id, { assistantId: 1 });
+            result.current.message.update(mockPrompt.id, mockMessage.id, { assistantId: '1' });
             result.current.message.remove(mockPrompt.id, mockMessage.id);
         });
         expect(result.error).toBeUndefined();

src/chat/codeBlock/index.tsx

@@ -3,12 +3,13 @@ import { Prism as SyntaxHighlighter, SyntaxHighlighterProps } from 'react-syntax
 import { oneLight } from 'react-syntax-highlighter/dist/cjs/styles/prism';
 import classNames from 'classnames';
 
-import Copy, { type ICopyProps } from '../../copy';
+import Copy from '../../copy';
 import { CopyIcon } from '../icon';
+import { CopyOptions } from '../useContext';
 import './index.scss';
 
 export interface ICodeBlockProps {
-    copy?: boolean | ICopyProps;
+    copy?: boolean | CopyOptions;
     className?: string;
     style?: React.CSSProperties;
     convert?: boolean;
@@ -34,7 +35,7 @@ export default function CodeBlock({
         return { value, language };
     }, [children]);
 
-    const copy = useMemo<{ disabled: boolean; options: Partial<ICopyProps> }>(() => {
+    const copy = useMemo<{ disabled: boolean; options: CopyOptions }>(() => {
         if (typeof rawCopy === 'boolean') {
             return {
                 disabled: !rawCopy,

src/chat/entity.ts

@@ -43,7 +43,7 @@ export type PromptProperties = {
 
 export type MessageProperties = {
     id: Id;
-    assistantId?: number;
+    assistantId?: string;
     creator?: string;
     createdAt?: Timestamp;
     content?: string;
@@ -100,7 +100,7 @@ export abstract class Prompt {
 export abstract class Message {
     id: Id;
     // 后端 Id
-    assistantId?: number;
+    assistantId?: string;
     creator?: string;
     createdAt: Timestamp;
     content: string;

src/chat/markdown/index.scss

@@ -111,4 +111,7 @@
             }
         }
     }
+    img {
+        max-width: 100%;
+    }
 }

src/chat/markdown/index.tsx

@@ -1,6 +1,7 @@
 import React, { memo, type PropsWithChildren, useEffect } from 'react';
 import ReactMarkdown from 'react-markdown';
 import { type ReactMarkdownOptions } from 'react-markdown/lib/react-markdown';
+import { Image } from 'antd';
 import classNames from 'classnames';
 import remarkGfm from 'remark-gfm';
 
@@ -48,6 +49,9 @@ export default memo(
                     hr() {
                         return <hr color="#ebecf0" className="dtc__aigc__markdown__hr" />;
                     },
+                    img({ src, ...rest }) {
+                        return <Image src={src} {...(rest as any)} />;
+                    },
                     ...components,
                 }}
                 {...rest}

src/chat/pagination/index.scss

@@ -1,4 +1,5 @@
 .dtc-aigc-pagination {
+    user-select: none;
     display: flex;
     align-items: center;
     gap: 4px;

src/chat/welcome/index.scss

@@ -1,6 +1,7 @@
 $primaryGradient: #00BAC6 0%, #0067FF 50%, #450FDE 100%;
 
 .dtc__welcome {
+    border-radius: 8px;
     overflow: hidden;
     color: #FFF;
     background: linear-gradient(110deg, $primaryGradient) border-box;

src/useIntersectionObserver/index.ts

@@ -1,5 +1,8 @@
 import { MutableRefObject, useEffect, useRef, useState } from 'react';
 
+/**
+ * 自动观察元素是否可见，处理元素是否进入可是区域
+ */
 const useIntersectionObserver = <T extends Element>(
     callback: IntersectionObserverCallback,
     options: IntersectionObserverInit & { freezeOnceVisible?: boolean } = {}