♻️ refactor: migration the ChatList into Conversation (lobehub#916)

* ♻️ refactor: migration the ChatList into conversation

* ♻️ refactor: refactor chat list

* 🎨 chore: improve code

* 🚚 refactor: refactor with hooks

next.config.mjs

@@ -20,7 +20,6 @@ const withPWA = nextPWA({
 const nextConfig = {
   compress: isProd,
   experimental: {
-    forceSwcTransforms: true,
     optimizePackageImports: [
       'modern-screenshot',
       'emoji-mart',

src/app/chat/features/ChatHeader/ShareButton/Preview.tsx

@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import pkg from '@/../package.json';
-import ChatList from '@/features/Conversation/ChatList';
+import ChatList from '@/features/Conversation/container';
 import { useSessionStore } from '@/store/session';
 import { agentSelectors, sessionSelectors } from '@/store/session/selectors';
 

src/features/Conversation/ChatList/Actions/Assistant.tsx → src/features/Conversation/Actions/Assistant.tsx

@@ -1,6 +1,8 @@
-import { ActionIconGroup, RenderAction, useChatListActionsBar } from '@lobehub/ui';
+import { ActionIconGroup } from '@lobehub/ui';
 import { memo } from 'react';
 
+import { RenderAction } from '../components/ChatList';
+import { useChatListActionsBar } from '../hooks/useChatListActionsBar';
 import { ErrorActionsBar } from './Error';
 import { useCustomActions } from './customAction';
 

src/features/Conversation/ChatList/Actions/Error.tsx → src/features/Conversation/Actions/Error.tsx

@@ -1,7 +1,9 @@
-import { ActionIconGroup, useChatListActionsBar } from '@lobehub/ui';
+import { ActionIconGroup } from '@lobehub/ui';
 import { ActionsBarProps } from '@lobehub/ui/es/ChatList/ActionsBar';
 import { memo } from 'react';
 
+import { useChatListActionsBar } from '../hooks/useChatListActionsBar';
+
 export const ErrorActionsBar = memo<ActionsBarProps>(({ text, onActionClick }) => {
   const { regenerate, del } = useChatListActionsBar(text);
 

src/features/Conversation/ChatList/Actions/Fallback.tsx → src/features/Conversation/Actions/Fallback.tsx

@@ -1,6 +1,9 @@
-import { ActionIconGroup, RenderAction, useChatListActionsBar } from '@lobehub/ui';
+import { ActionIconGroup } from '@lobehub/ui';
 import { memo } from 'react';
 
+import { RenderAction } from '../components/ChatList';
+import { useChatListActionsBar } from '../hooks/useChatListActionsBar';
+
 export const DefaultActionsBar: RenderAction = memo(({ text, onActionClick }) => {
   const { del } = useChatListActionsBar(text);
   return (

src/features/Conversation/ChatList/Actions/Function.tsx → src/features/Conversation/Actions/Function.tsx

@@ -1,6 +1,9 @@
-import { ActionIconGroup, RenderAction, useChatListActionsBar } from '@lobehub/ui';
+import { ActionIconGroup } from '@lobehub/ui';
 import { memo } from 'react';
 
+import { RenderAction } from '../components/ChatList';
+import { useChatListActionsBar } from '../hooks/useChatListActionsBar';
+
 export const FunctionActionsBar: RenderAction = memo(({ text, onActionClick }) => {
   const { regenerate, divider, del } = useChatListActionsBar(text);
   return (

src/features/Conversation/ChatList/Actions/User.tsx → src/features/Conversation/Actions/User.tsx

@@ -1,6 +1,8 @@
-import { ActionIconGroup, RenderAction, useChatListActionsBar } from '@lobehub/ui';
+import { ActionIconGroup } from '@lobehub/ui';
 import { memo } from 'react';
 
+import { RenderAction } from '../components/ChatList';
+import { useChatListActionsBar } from '../hooks/useChatListActionsBar';
 import { useCustomActions } from './customAction';
 
 export const UserActionsBar: RenderAction = memo(({ text, onActionClick }) => {

src/features/Conversation/ChatList/Actions/index.ts → src/features/Conversation/Actions/index.ts

@@ -1,7 +1,6 @@
-import { ChatListProps } from '@lobehub/ui';
-
 import { useChatStore } from '@/store/chat';
 
+import { ChatListProps } from '../components/ChatList';
 import { AssistantActionsBar } from './Assistant';
 import { DefaultActionsBar } from './Fallback';
 import { FunctionActionsBar } from './Function';

src/features/Conversation/ChatList/Error/InvalidAccess.tsx → src/features/Conversation/Error/InvalidAccess.tsx

@@ -1,4 +1,4 @@
-import { Icon, RenderErrorMessage } from '@lobehub/ui';
+import { Icon } from '@lobehub/ui';
 import { Button, Input, Segmented } from 'antd';
 import { KeySquare, SquareAsterisk } from 'lucide-react';
 import { memo, useState } from 'react';
@@ -8,6 +8,7 @@ import { Flexbox } from 'react-layout-kit';
 import { useChatStore } from '@/store/chat';
 import { useGlobalStore } from '@/store/global';
 
+import { RenderErrorMessage } from '../components/ChatList';
 import APIKeyForm from './ApiKeyForm';
 import { ErrorActionContainer, FormAction } from './style';
 

src/features/Conversation/ChatList/Error/OpenAPIKey.tsx → src/features/Conversation/Error/OpenAPIKey.tsx

@@ -1,6 +1,6 @@
-import { RenderErrorMessage } from '@lobehub/ui';
 import { memo } from 'react';
 
+import { RenderErrorMessage } from '../components/ChatList';
 import APIKeyForm from './ApiKeyForm';
 import { ErrorActionContainer } from './style';
 

src/features/Conversation/ChatList/Error/OpenAiBizError.tsx → src/features/Conversation/Error/OpenAiBizError.tsx

@@ -1,7 +1,8 @@
-import { Highlighter, RenderErrorMessage } from '@lobehub/ui';
+import { Highlighter } from '@lobehub/ui';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
+import { RenderErrorMessage } from '../components/ChatList';
 import OpenAPIKey from './OpenAPIKey';
 
 interface OpenAIError {

src/features/Conversation/ChatList/Error/Plugin/PluginError.tsx → src/features/Conversation/Error/Plugin/PluginError.tsx

@@ -1,7 +1,9 @@
-import { Highlighter, RenderErrorMessage } from '@lobehub/ui';
+import { Highlighter } from '@lobehub/ui';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
+import { RenderErrorMessage } from '../../components/ChatList';
+
 interface OpenAIError {
   code: 'invalid_api_key' | string;
   message: string;

src/features/Conversation/ChatList/Error/Plugin/PluginSettings.tsx → src/features/Conversation/Error/Plugin/PluginSettings.tsx

@@ -1,4 +1,4 @@
-import { Avatar, RenderErrorMessage } from '@lobehub/ui';
+import { Avatar } from '@lobehub/ui';
 import { Button, Divider } from 'antd';
 import { useTheme } from 'antd-style';
 import isEqual from 'fast-deep-equal';
@@ -11,6 +11,7 @@ import { useChatStore } from '@/store/chat';
 import { pluginHelpers, useToolStore } from '@/store/tool';
 import { pluginSelectors } from '@/store/tool/selectors';
 
+import { RenderErrorMessage } from '../../components/ChatList';
 import { ErrorActionContainer, useStyles } from '../style';
 
 const PluginSettings: RenderErrorMessage['Render'] = memo(({ id, plugin }) => {

src/features/Conversation/ChatList/Error/index.tsx → src/features/Conversation/Error/index.tsx

@@ -1,8 +1,8 @@
 import { PluginErrorType } from '@lobehub/chat-plugin-sdk';
-import { ChatListProps } from '@lobehub/ui';
 
 import { ChatErrorType } from '@/types/fetch';
 
+import { ChatListProps } from '../components/ChatList';
 import InvalidAccess from './InvalidAccess';
 import OpenAPIKey from './OpenAPIKey';
 import OpenAiBizError from './OpenAiBizError';

src/features/Conversation/ChatList/Extras/Translate.tsx → src/features/Conversation/Extras/Translate.tsx

@@ -10,7 +10,7 @@ import { Flexbox } from 'react-layout-kit';
 import { useChatStore } from '@/store/chat';
 import { ChatTranslate } from '@/types/message';
 
-import BubblesLoading from '../Loading';
+import BubblesLoading from '../components/BubblesLoading';
 
 const useStyles = createStyles(({ stylish }) => ({
   markdown: stylish.markdownInChat,

src/features/Conversation/ChatList/Extras/index.ts → src/features/Conversation/Extras/index.ts

@@ -1,5 +1,4 @@
-import { ChatListProps, RenderMessageExtra } from '@lobehub/ui';
-
+import { ChatListProps, RenderMessageExtra } from '../components/ChatList';
 import { AssistantMessageExtra } from './Assistant';
 import { UserMessageExtra } from './User';
 

src/features/Conversation/ChatList/Messages/Default.tsx → src/features/Conversation/Messages/Default.tsx

@@ -3,7 +3,7 @@ import { ReactNode, memo } from 'react';
 import { LOADING_FLAT } from '@/const/message';
 import { ChatMessage } from '@/types/message';
 
-import BubblesLoading from '../Loading';
+import BubblesLoading from '../components/BubblesLoading';
 
 export const DefaultMessage = memo<
   ChatMessage & {

src/features/Conversation/ChatList/Messages/User.tsx → src/features/Conversation/Messages/User.tsx

@@ -5,7 +5,7 @@ import FileList from '@/components/FileList';
 import { LOADING_FLAT } from '@/const/message';
 import { ChatMessage } from '@/types/message';
 
-import BubblesLoading from '../Loading';
+import BubblesLoading from '../components/BubblesLoading';
 
 export const UserMessage = memo<
   ChatMessage & {

src/features/Conversation/ChatList/Messages/index.ts → src/features/Conversation/Messages/index.ts

@@ -1,4 +1,3 @@
-import { ChatListProps } from '@lobehub/ui';
 import { useResponsive } from 'antd-style';
 import { useRouter } from 'next/navigation';
 
@@ -7,16 +6,17 @@ import { useSessionStore } from '@/store/session';
 import { sessionSelectors } from '@/store/session/selectors';
 import { pathString } from '@/utils/url';
 
+import { ChatListProps } from '../components/ChatList';
 import { AssistantMessage } from './Assistant';
 import { DefaultMessage } from './Default';
 import { FunctionMessage } from './Function';
 import { UserMessage } from './User';
 
 export const renderMessages: ChatListProps['renderMessages'] = {
-  assistant: AssistantMessage as any,
-  default: DefaultMessage as any,
-  function: FunctionMessage as any,
-  user: UserMessage as any,
+  assistant: AssistantMessage,
+  default: DefaultMessage,
+  function: FunctionMessage,
+  user: UserMessage,
 };
 
 export const useAvatarsClick = (): ChatListProps['onAvatarsClick'] => {

src/features/Conversation/ChatList/Plugins/Render/Loading.tsx → src/features/Conversation/Plugins/Render/Loading.tsx

@@ -1,11 +1,10 @@
-import {createStyles} from 'antd-style';
-import {useTranslation} from 'react-i18next';
-import {Flexbox} from 'react-layout-kit';
-import {memo} from "react";
-
+import { createStyles } from 'antd-style';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
 
 const useStyles = createStyles(
-  ({css, token}) => css`
+  ({ css, token }) => css`
     position: relative;
 
     overflow: hidden;
@@ -46,16 +45,16 @@ const useStyles = createStyles(
     }
   `,
 );
- const Loading = memo(() => {
-  const {t} = useTranslation('plugin');
-  const {styles} = useStyles();
+const Loading = memo(() => {
+  const { t } = useTranslation('plugin');
+  const { styles } = useStyles();
 
   return (
     <Flexbox align={'center'} gap={8} padding={16}>
-      <span className={styles}/>
+      <span className={styles} />
       {t('loading.content')}
     </Flexbox>
   );
 });
 
-export default Loading
+export default Loading;

src/features/Conversation/components/ChatList/ActionsBar.tsx

@@ -0,0 +1,27 @@
+import { ActionIconGroup, type ActionIconGroupProps } from '@lobehub/ui';
+import { memo } from 'react';
+
+import { useChatListActionsBar } from '../../hooks/useChatListActionsBar';
+
+export interface ActionsBarProps extends ActionIconGroupProps {
+  text?: {
+    copy?: string;
+    delete?: string;
+    edit?: string;
+    regenerate?: string;
+  };
+}
+
+const ActionsBar = memo<ActionsBarProps>(({ text, ...rest }) => {
+  const { regenerate, edit, copy, divider, del } = useChatListActionsBar(text);
+  return (
+    <ActionIconGroup
+      dropdownMenu={[edit, copy, regenerate, divider, del]}
+      items={[regenerate, edit]}
+      type="ghost"
+      {...rest}
+    />
+  );
+});
+
+export default ActionsBar;

src/features/Conversation/components/ChatList/HistoryDivider.tsx

@@ -0,0 +1,23 @@
+import { Icon, Tag } from '@lobehub/ui';
+import { Divider } from 'antd';
+import { Timer } from 'lucide-react';
+import { memo } from 'react';
+
+interface HistoryDividerProps {
+  enable?: boolean;
+  text?: string;
+}
+
+const HistoryDivider = memo<HistoryDividerProps>(({ enable, text }) => {
+  if (!enable) return null;
+
+  return (
+    <div style={{ padding: '0 20px' }}>
+      <Divider>
+        <Tag icon={<Icon icon={Timer} />}>{text || 'History Message'}</Tag>
+      </Divider>
+    </div>
+  );
+});
+
+export default HistoryDivider;