✨ feat: ProChat 初步组件化

.dumirc.ts

@@ -8,4 +8,5 @@ export default defineConfig({
   },
   outputPath: 'docs-dist',
   html2sketch: {},
+  extraBabelPlugins: ['antd-style'],
 });

package.json

@@ -70,13 +70,16 @@
     "dayjs": "^1",
     "emoji-regex": "^10",
     "fast-deep-equal": "^3",
+    "gpt-tokenizer": "^2.1.2",
     "immer": "^10",
     "lodash-es": "^4",
     "lucide-react": "^0.288.0",
+    "nanoid": "^5",
     "polished": "^4",
     "prism-react-renderer": "^2",
     "re-resizable": "^6",
     "react-error-boundary": "^4",
+    "react-intersection-observer": "^9.5.2",
     "react-layout-kit": "^1.7.1",
     "react-markdown": "^8",
     "react-rnd": "^10",
@@ -102,6 +105,7 @@
     "@umijs/lint": "^4",
     "@vitest/coverage-v8": "latest",
     "antd-style": "^3",
+    "babel-plugin-antd-style": "^1.0.4",
     "commitlint": "^17",
     "commitlint-config-gitmoji": "^2",
     "conventional-changelog-gitmoji-config": "^1",

src/ChatItem/components/Avatar.tsx

@@ -21,7 +21,6 @@ const Avatar = memo<AvatarProps>(({ loading, avatar, placement, addon, onClick,
   const avatarContent = (
     <div className={styles.avatarContainer}>
       <A
-        animation={loading}
         avatar={avatar.avatar}
         background={avatar.backgroundColor}
         onClick={onClick}

src/ChatItem/demos/data.tsx

@@ -1,5 +1,4 @@
-import { type ActionIconGroupProps } from '@ant-design/pro-chat';
-import { MetaData } from '@ant-design/pro-chat/types/meta';
+import type { ActionIconGroupProps, MetaData } from '@ant-design/pro-chat';
 import { Copy, Edit, RotateCw, Trash } from 'lucide-react';
 
 export const avatar: MetaData = {

src/ProChat/components/ChatList/Extras/Assistant.tsx

@@ -4,11 +4,10 @@ import { RenderMessageExtra } from '@/index';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import { useChatStore } from '@/ProChat/store';
-import { agentSelectors } from '@/ProChat/store/selectors';
+import { useStore } from '@/ProChat/store';
 
 export const AssistantMessageExtra: RenderMessageExtra = memo(({ extra }) => {
-  const model = useChatStore(agentSelectors.currentAgentModel);
+  const model = useStore((s) => s.config.model);
 
   const showModelTag = extra?.fromModel && model !== extra?.fromModel;
   const hasTranslate = !!extra?.translate;

src/ProChat/components/ChatList/index.tsx

@@ -2,46 +2,50 @@ import { ChatList } from '@lobehub/ui';
 import isEqual from 'fast-deep-equal';
 import { memo } from 'react';
 
-import { useChatStore, useSessionChatInit } from '@/ProChat/store';
-import { agentSelectors, chatSelectors } from '@/ProChat/store/selectors';
+import { useStore } from '@/ProChat/store';
+import { chatSelectors } from '@/ProChat/store/selectors';
 
 import { renderActions } from './Actions';
 import { renderMessagesExtra } from './Extras';
 import { renderMessages } from './Messages';
 import SkeletonList from './SkeletonList';
 
-const List = memo(() => {
-  const init = useSessionChatInit();
-
-  const data = useChatStore(chatSelectors.currentChatsWithGuideMessage, isEqual);
+interface ListProps {
+  showTitle?: boolean;
+}
+const List = memo<ListProps>(({ showTitle }) => {
+  const data = useStore(chatSelectors.currentChatsWithGuideMessage, isEqual);
 
   const [
+    init,
     displayMode,
     enableHistoryCount,
     historyCount,
     chatLoadingId,
     deleteMessage,
     resendMessage,
     dispatchMessage,
-    translateMessage,
-  ] = useChatStore((s) => {
-    const config = agentSelectors.currentAgentConfig(s);
+  ] = useStore((s) => {
+    const config = s.config;
+
     return [
-      config.displayMode,
+      s.init,
+      s.displayMode,
       config.enableHistoryCount,
       config.historyCount,
       s.chatLoadingId,
       s.deleteMessage,
       s.resendMessage,
       s.dispatchMessage,
-      s.translateMessage,
     ];
   });
 
   if (!init) return <SkeletonList />;
 
   return (
     <ChatList
+      showTitle={showTitle}
+      // @ts-ignore
       data={data}
       enableHistoryCount={enableHistoryCount}
       historyCount={historyCount}
@@ -61,13 +65,7 @@ const List = memo(() => {
           }
         }
 
-        // click the menu item with translate item, the result is:
-        // key: 'en-US'
-        // keyPath: ['en-US','translate']
-        if (action.keyPath.at(-1) === 'translate') {
-          const lang = action.keyPath[0];
-          translateMessage(id, lang);
-        }
+        // TODO: need a custom callback
       }}
       onMessageChange={(id, content) =>
         dispatchMessage({ id, key: 'content', type: 'updateMessage', value: content })

src/ProChat/components/ScrollAnchor/index.tsx

@@ -1,12 +1,12 @@
 import { memo, useEffect } from 'react';
 import { useInView } from 'react-intersection-observer';
 
-import { useChatStore } from '@/ProChat/store';
+import { useStore } from '@/ProChat/store';
 
 import { useAtBottom } from './useAtBottom';
 
 const ChatScrollAnchor = memo(() => {
-  const trackVisibility = useChatStore((s) => !!s.chatLoadingId);
+  const trackVisibility = useStore((s) => !!s.chatLoadingId);
 
   const isAtBottom = useAtBottom();
   const { ref, entry, inView } = useInView({

src/ProChat/const/message.ts

@@ -2,5 +2,3 @@ export const LOADING_FLAT = '...';
 
 // 只要 start with 这个，就可以判断为 function message
 export const FUNCTION_MESSAGE_FLAG = '{"function';
-
-export const FUNCTION_LOADING = 'FUNCTION_LOADING';

src/ProChat/const/meta.ts

@@ -1,9 +1,2 @@
-import { MetaData } from '@/types/meta';
-
 export const DEFAULT_AVATAR = '🤖';
 export const DEFAULT_USER_AVATAR = '😀';
-export const DEFAULT_BACKGROUND_COLOR = 'rgba(0,0,0,0)';
-export const DEFAULT_AGENT_META: MetaData = {};
-export const DEFAULT_INBOX_AVATAR = '🤯';
-export const DEFAULT_USER_AVATAR_URL =
-  'https://registry.npmmirror.com/@lobehub/assets-logo/1.1.0/files/assets/logo-3d.webp';

src/ProChat/container/App.tsx

@@ -0,0 +1,44 @@
+import BackBottom from '@/BackBottom';
+import { createStyles } from 'antd-style';
+import { ReactNode, memo, useRef } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { useOverrideStyles } from '@/ProChat/container/OverrideStyle';
+import ChatList from '../components/ChatList';
+import ChatScrollAnchor from '../components/ScrollAnchor';
+
+const useStyles = createStyles(
+  ({ css, responsive, stylish }) => css`
+    overflow: hidden scroll;
+    height: 100%;
+    ${responsive.mobile} {
+      ${stylish.noScrollbar}
+      width: 100vw;
+    }
+  `,
+);
+
+interface ConversationProps {
+  chatInput?: ReactNode;
+  showTitle?: boolean;
+}
+
+const App = memo<ConversationProps>(({ chatInput, showTitle }) => {
+  const ref = useRef(null);
+  const { styles } = useStyles();
+  const { styles: override } = useOverrideStyles();
+  return (
+    <Flexbox className={override.container} flex={1} style={{ position: 'relative' }}>
+      <div style={{ flex: 1, overflow: 'hidden', position: 'relative' }}>
+        <div className={styles} ref={ref}>
+          <ChatList showTitle={showTitle} />
+          <ChatScrollAnchor />
+        </div>
+        <BackBottom target={ref} text={'返回底部'} />
+      </div>
+      {chatInput}
+    </Flexbox>
+  );
+});
+
+export default App;