@lobehub/chat 0.118.10 → 0.119.1

package/src/features/Conversation/Extras/Assistant.tsx

@@ -8,41 +8,44 @@ import { useSessionStore } from '@/store/session';
 import { agentSelectors } from '@/store/session/selectors';
 import { ChatMessage } from '@/types/message';
 
+import { RenderMessageExtra } from '../types';
 import ExtraContainer from './ExtraContainer';
 import TTS from './TTS';
 import Translate from './Translate';
 
-export const AssistantMessageExtra = memo<ChatMessage>(({ extra, id, content }) => {
-  const model = useSessionStore(agentSelectors.currentAgentModel);
-  const loading = useChatStore((s) => s.chatLoadingId === id);
+export const AssistantMessageExtra: RenderMessageExtra = memo<ChatMessage>(
+  ({ extra, id, content }) => {
+    const model = useSessionStore(agentSelectors.currentAgentModel);
+    const loading = useChatStore((s) => s.chatLoadingId === id);
 
-  const showModelTag = extra?.fromModel && model !== extra?.fromModel;
-  const showTranslate = !!extra?.translate;
-  const showTTS = !!extra?.tts;
+    const showModelTag = extra?.fromModel && model !== extra?.fromModel;
+    const showTranslate = !!extra?.translate;
+    const showTTS = !!extra?.tts;
 
-  const showExtra = showModelTag || showTranslate || showTTS;
+    const showExtra = showModelTag || showTranslate || showTTS;
 
-  if (!showExtra) return;
+    if (!showExtra) return;
 
-  return (
-    <Flexbox gap={8} style={{ marginTop: 8 }}>
-      {showModelTag && (
-        <div>
-          <Tag icon={<SiOpenai size={'1em'} />}>{extra?.fromModel as string}</Tag>
-        </div>
-      )}
-      <>
-        {extra?.tts && (
-          <ExtraContainer>
-            <TTS content={content} id={id} loading={loading} {...extra?.tts} />
-          </ExtraContainer>
+    return (
+      <Flexbox gap={8} style={{ marginTop: 8 }}>
+        {showModelTag && (
+          <div>
+            <Tag icon={<SiOpenai size={'1em'} />}>{extra?.fromModel as string}</Tag>
+          </div>
         )}
-        {extra?.translate && (
-          <ExtraContainer>
-            <Translate id={id} loading={loading} {...extra?.translate} />
-          </ExtraContainer>
-        )}
-      </>
-    </Flexbox>
-  );
-});
+        <>
+          {extra?.tts && (
+            <ExtraContainer>
+              <TTS content={content} id={id} loading={loading} {...extra?.tts} />
+            </ExtraContainer>
+          )}
+          {extra?.translate && (
+            <ExtraContainer>
+              <Translate id={id} loading={loading} {...extra?.translate} />
+            </ExtraContainer>
+          )}
+        </>
+      </Flexbox>
+    );
+  },
+);

package/src/features/Conversation/Extras/User.tsx

@@ -3,11 +3,12 @@ import { memo } from 'react';
 import { useChatStore } from '@/store/chat';
 import { ChatMessage } from '@/types/message';
 
+import { RenderMessageExtra } from '../types';
 import ExtraContainer from './ExtraContainer';
 import TTS from './TTS';
 import Translate from './Translate';
 
-export const UserMessageExtra = memo<ChatMessage>(({ extra, id, content }) => {
+export const UserMessageExtra: RenderMessageExtra = memo<ChatMessage>(({ extra, id, content }) => {
   const loading = useChatStore((s) => s.chatLoadingId === id);
 
   const showTranslate = !!extra?.translate;

package/src/features/Conversation/Extras/index.ts

@@ -1,8 +1,8 @@
-import { ChatListProps, RenderMessageExtra } from '../components/ChatList';
+import { RenderMessageExtra } from '../types';
 import { AssistantMessageExtra } from './Assistant';
 import { UserMessageExtra } from './User';
 
-export const renderMessagesExtra: ChatListProps['renderMessagesExtra'] = {
-  assistant: AssistantMessageExtra as unknown as RenderMessageExtra,
-  user: UserMessageExtra as unknown as RenderMessageExtra,
+export const renderMessagesExtra: Record<string, RenderMessageExtra> = {
+  assistant: AssistantMessageExtra,
+  user: UserMessageExtra,
 };

package/src/features/Conversation/Messages/index.ts

@@ -6,20 +6,20 @@ import { useSessionStore } from '@/store/session';
 import { sessionSelectors } from '@/store/session/selectors';
 import { pathString } from '@/utils/url';
 
-import { ChatListProps } from '../components/ChatList';
+import { OnAvatarsClick, RenderMessage } from '../types';
 import { AssistantMessage } from './Assistant';
 import { DefaultMessage } from './Default';
 import { FunctionMessage } from './Function';
 import { UserMessage } from './User';
 
-export const renderMessages: ChatListProps['renderMessages'] = {
+export const renderMessages: Record<string, RenderMessage> = {
   assistant: AssistantMessage,
   default: DefaultMessage,
   function: FunctionMessage,
   user: UserMessage,
 };
 
-export const useAvatarsClick = (): ChatListProps['onAvatarsClick'] => {
+export const useAvatarsClick = (): OnAvatarsClick => {
   const [isInbox] = useSessionStore((s) => [sessionSelectors.isInboxSession(s)]);
   const [toggleSystemRole] = useGlobalStore((s) => [s.toggleSystemRole]);
   const { mobile } = useResponsive();

package/src/features/Conversation/components/ChatItem/ActionsBar.tsx

@@ -0,0 +1,58 @@
+import { ActionEvent, ActionIconGroup, type ActionIconGroupProps } from '@lobehub/ui';
+import isEqual from 'fast-deep-equal';
+import { memo, useCallback } from 'react';
+
+import { useChatStore } from '@/store/chat';
+import { chatSelectors } from '@/store/chat/selectors';
+import { useSessionStore } from '@/store/session';
+import { agentSelectors } from '@/store/session/selectors';
+
+import { renderActions, useActionsClick } from '../../Actions';
+import { useChatListActionsBar } from '../../hooks/useChatListActionsBar';
+
+export type ActionsBarProps = ActionIconGroupProps;
+
+const ActionsBar = memo<ActionsBarProps>((props) => {
+  const { regenerate, edit, copy, divider, del } = useChatListActionsBar();
+  return (
+    <ActionIconGroup
+      dropdownMenu={[edit, copy, regenerate, divider, del]}
+      items={[regenerate, edit]}
+      type="ghost"
+      {...props}
+    />
+  );
+});
+
+interface ActionsProps {
+  index: number;
+  setEditing: (edit: boolean) => void;
+}
+const Actions = memo<ActionsProps>(({ index, setEditing }) => {
+  const meta = useSessionStore(agentSelectors.currentAgentMeta, isEqual);
+
+  const item = useChatStore(
+    (s) => chatSelectors.currentChatsWithGuideMessage(meta)(s)[index],
+    isEqual,
+  );
+  const onActionsClick = useActionsClick();
+
+  const handleActionClick = useCallback(
+    async (action: ActionEvent) => {
+      switch (action.key) {
+        case 'edit': {
+          setEditing(true);
+        }
+      }
+
+      onActionsClick(action, item);
+    },
+    [item],
+  );
+
+  const RenderFunction = renderActions[item?.role] ?? ActionsBar;
+
+  return <RenderFunction {...item} onActionClick={handleActionClick} />;
+});
+
+export default Actions;

package/src/features/Conversation/components/ChatItem/index.tsx

@@ -0,0 +1,126 @@
+import { type AlertProps, ChatItem } from '@lobehub/ui';
+import isEqual from 'fast-deep-equal';
+import { ReactNode, memo, useCallback, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useChatStore } from '@/store/chat';
+import { chatSelectors } from '@/store/chat/selectors';
+import { useSessionStore } from '@/store/session';
+import { agentSelectors } from '@/store/session/selectors';
+import { ChatMessage } from '@/types/message';
+
+import { renderErrorMessages } from '../../Error';
+import { renderMessagesExtra } from '../../Extras';
+import { renderMessages, useAvatarsClick } from '../../Messages';
+import ActionsBar from './ActionsBar';
+
+export interface ChatListItemProps {
+  index: number;
+}
+
+const Item = memo<ChatListItemProps>(({ index }) => {
+  const { t } = useTranslation('common');
+
+  const [editing, setEditing] = useState(false);
+  const [type = 'chat'] = useSessionStore((s) => {
+    const config = agentSelectors.currentAgentConfig(s);
+    return [config.displayMode];
+  });
+
+  const meta = useSessionStore(agentSelectors.currentAgentMeta, isEqual);
+  const item = useChatStore(
+    (s) => chatSelectors.currentChatsWithGuideMessage(meta)(s)[index],
+    isEqual,
+  );
+
+  const [loading, onMessageChange] = useChatStore((s) => [
+    s.chatLoadingId === item.id,
+    s.updateMessageContent,
+  ]);
+
+  const onAvatarsClick = useAvatarsClick();
+
+  const RenderMessage = useCallback(
+    ({ editableContent, data }: { data: ChatMessage; editableContent: ReactNode }) => {
+      if (!item?.role) return;
+      const RenderFunction = renderMessages[item.role] ?? renderMessages['default'];
+
+      if (!RenderFunction) return;
+
+      return <RenderFunction {...data} editableContent={editableContent} />;
+    },
+    [item.role],
+  );
+
+  const MessageExtra = useCallback(
+    ({ data }: { data: ChatMessage }) => {
+      if (!renderMessagesExtra || !item?.role) return;
+      let RenderFunction;
+      if (renderMessagesExtra?.[item.role]) RenderFunction = renderMessagesExtra[item.role];
+
+      if (!RenderFunction) return;
+      return <RenderFunction {...data} />;
+    },
+    [item.role],
+  );
+
+  const ErrorMessage = useCallback(
+    ({ data }: { data: ChatMessage }) => {
+      if (!renderErrorMessages || !item?.error?.type) return;
+      let RenderFunction;
+      if (renderErrorMessages?.[item.error.type])
+        RenderFunction = renderErrorMessages[item.error.type].Render;
+      if (!RenderFunction && renderErrorMessages?.['default'])
+        RenderFunction = renderErrorMessages['default'].Render;
+      if (!RenderFunction) return;
+      return <RenderFunction {...data} />;
+    },
+    [item.error],
+  );
+
+  const error = useMemo(() => {
+    if (!item.error) return;
+    const message = item.error?.message;
+    let alertConfig = {};
+    if (item.error.type && renderErrorMessages?.[item.error.type]) {
+      alertConfig = renderErrorMessages[item.error.type]?.config as AlertProps;
+    }
+    return { message, ...alertConfig };
+  }, [item.error]);
+
+  return (
+    <ChatItem
+      actions={<ActionsBar index={index} setEditing={setEditing} />}
+      avatar={item.meta}
+      editing={editing}
+      error={error}
+      errorMessage={<ErrorMessage data={item} />}
+      loading={loading}
+      message={item.content}
+      messageExtra={<MessageExtra data={item} />}
+      onAvatarClick={onAvatarsClick?.(item.role)}
+      onChange={(value) => onMessageChange(item.id, value)}
+      onDoubleClick={(e) => {
+        if (item.id === 'default' || item.error) return;
+        if (item.role && ['assistant', 'user'].includes(item.role) && e.altKey) {
+          setEditing(true);
+        }
+      }}
+      onEditingChange={setEditing}
+      placement={type === 'chat' ? (item.role === 'user' ? 'right' : 'left') : 'left'}
+      primary={item.role === 'user'}
+      renderMessage={(editableContent) => (
+        <RenderMessage data={item} editableContent={editableContent} />
+      )}
+      text={{
+        cancel: t('cancel'),
+        confirm: t('ok'),
+        edit: t('edit'),
+      }}
+      time={item.updatedAt || item.createdAt}
+      type={type === 'chat' ? 'block' : 'pure'}
+    />
+  );
+});
+
+export default Item;

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

@@ -2,19 +2,22 @@ import { Icon, Tag } from '@lobehub/ui';
 import { Divider } from 'antd';
 import { Timer } from 'lucide-react';
 import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
 
 interface HistoryDividerProps {
   enable?: boolean;
-  text?: string;
 }
 
-const HistoryDivider = memo<HistoryDividerProps>(({ enable, text }) => {
+const HistoryDivider = memo<HistoryDividerProps>(({ enable }) => {
+  const { t } = useTranslation('common');
   if (!enable) return null;
 
   return (
     <div style={{ padding: '0 20px' }}>
       <Divider>
-        <Tag icon={<Icon icon={Timer} />}>{text || 'History Message'}</Tag>
+        <Tag icon={<Icon icon={Timer} />}>
+          {t('historyRange', { defaultValue: 'History Message' })}
+        </Tag>
       </Divider>
     </div>
   );

package/src/features/Conversation/components/ChatList/index.tsx

@@ -1,88 +1,44 @@
+import isEqual from 'fast-deep-equal';
 import { Fragment, memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import type { ChatMessage } from '@/types/message';
+import { useChatStore } from '@/store/chat';
+import { chatSelectors } from '@/store/chat/selectors';
+import { useSessionStore } from '@/store/session';
+import { agentSelectors } from '@/store/session/selectors';
 
+import Item from '../ChatItem';
 import HistoryDivider from './HistoryDivider';
-import Item, { ListItemProps } from './Item';
 import { useStyles } from './style';
 
-export interface ChatListProps extends ListItemProps {
-  className?: string;
-  /**
-   * @description Data of chat messages to be displayed
-   */
-  data: ChatMessage[];
-  enableHistoryCount?: boolean;
-  historyCount?: number;
-  loadingId?: string;
-}
-export type {
-  OnActionsClick,
-  OnAvatatsClick,
-  OnMessageChange,
-  RenderAction,
-  RenderErrorMessage,
-  RenderItem,
-  RenderMessage,
-  RenderMessageExtra,
-} from './Item';
-
-const ChatList = memo<ChatListProps>(
-  ({
-    onActionsClick,
-    onAvatarsClick,
-    renderMessagesExtra,
-    className,
-    data,
-    type = 'chat',
-    text,
-    showTitle,
-    onMessageChange,
-    renderMessages,
-    renderErrorMessages,
-    loadingId,
-    renderItems,
-    enableHistoryCount,
-    renderActions,
-    historyCount = 0,
-  }) => {
-    const { cx, styles } = useStyles();
-
-    return (
-      <Flexbox className={cx(styles.container, className)}>
-        {data.map((item, index) => {
-          const itemProps = {
-            loading: loadingId === item.id,
-            onActionsClick,
-            onAvatarsClick,
-            onMessageChange,
-            renderActions,
-            renderErrorMessages,
-            renderItems,
-            renderMessages,
-            renderMessagesExtra,
-            showTitle,
-            text,
-            type,
-          };
-
-          const historyLength = data.length;
-          const enableHistoryDivider =
-            enableHistoryCount &&
-            historyLength > historyCount &&
-            historyCount === historyLength - index + 1;
-
-          return (
-            <Fragment key={item.id}>
-              <HistoryDivider enable={enableHistoryDivider} text={text?.history} />
-              <Item {...itemProps} {...item} />
-            </Fragment>
-          );
-        })}
-      </Flexbox>
-    );
-  },
-);
+const ChatList = memo(() => {
+  const { styles } = useStyles();
+
+  const data = useChatStore(chatSelectors.currentChatIDsWithGuideMessage, isEqual);
+
+  const [enableHistoryCount, historyCount = 0] = useSessionStore((s) => {
+    const config = agentSelectors.currentAgentConfig(s);
+    return [config.enableHistoryCount, config.historyCount];
+  });
+
+  return (
+    <Flexbox className={styles.container}>
+      {data.map((item, index) => {
+        const historyLength = data.length;
+        const enableHistoryDivider =
+          enableHistoryCount &&
+          historyLength > historyCount &&
+          historyCount === historyLength - index + 1;
+
+        return (
+          <Fragment key={item}>
+            <HistoryDivider enable={enableHistoryDivider} />
+            <Item index={index} />
+          </Fragment>
+        );
+      })}
+    </Flexbox>
+  );
+});
 
 export default ChatList;

package/src/features/Conversation/hooks/useChatListActionsBar.tsx

@@ -1,43 +1,55 @@
 import { ActionIconGroupItems } from '@lobehub/ui/es/ActionIconGroup';
 import { Copy, Edit, RotateCw, Trash } from 'lucide-react';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
 
 interface ChatListActionsBar {
   copy: ActionIconGroupItems;
   del: ActionIconGroupItems;
+  delAndRegenerate: ActionIconGroupItems;
   divider: { type: 'divider' };
   edit: ActionIconGroupItems;
   regenerate: ActionIconGroupItems;
 }
 
-export const useChatListActionsBar = (text?: {
-  copy?: string;
-  delete?: string;
-  edit?: string;
-  regenerate?: string;
-}): ChatListActionsBar => {
-  return {
-    copy: {
-      icon: Copy,
-      key: 'copy',
-      label: text?.copy || 'Copy',
-    },
-    del: {
-      icon: Trash,
-      key: 'del',
-      label: text?.delete || 'Delete',
-    },
-    divider: {
-      type: 'divider',
-    },
-    edit: {
-      icon: Edit,
-      key: 'edit',
-      label: text?.edit || 'Edit',
-    },
-    regenerate: {
-      icon: RotateCw,
-      key: 'regenerate',
-      label: text?.regenerate || 'Regenerate',
-    },
-  };
+export const useChatListActionsBar = (): ChatListActionsBar => {
+  const { t } = useTranslation('common');
+
+  return useMemo(
+    () => ({
+      copy: {
+        icon: Copy,
+        key: 'copy',
+        label: t('copy', { defaultValue: 'Copy' }),
+      },
+      del: {
+        danger: true,
+        icon: Trash,
+        key: 'del',
+        label: t('delete', { defaultValue: 'Delete' }),
+      },
+      delAndRegenerate: {
+        icon: RotateCw,
+        key: 'delAndRegenerate',
+        label: t('messageAction.delAndRegenerate', {
+          defaultValue: 'Delete and regenerate',
+          ns: 'chat',
+        }),
+      },
+      divider: {
+        type: 'divider',
+      },
+      edit: {
+        icon: Edit,
+        key: 'edit',
+        label: t('edit', { defaultValue: 'Edit' }),
+      },
+      regenerate: {
+        icon: RotateCw,
+        key: 'regenerate',
+        label: t('regenerate', { defaultValue: 'Regenerate' }),
+      },
+    }),
+    [],
+  );
 };

package/src/features/Conversation/hooks/useInitConversation.ts

@@ -8,7 +8,8 @@ import { useToolStore } from '@/store/tool';
 export const useInitConversation = () => {
   const [sessionId] = useSessionStore((s) => [s.activeId]);
   const plugins = useSessionStore((s) => agentSelectors.currentAgentPlugins(s));
-  const [activeTopicId, switchTopic, useFetchMessages, useFetchTopics] = useChatStore((s) => [
+  const [init, activeTopicId, switchTopic, useFetchMessages, useFetchTopics] = useChatStore((s) => [
+    s.messagesInit,
     s.activeTopicId,
     s.switchTopic,
     s.useFetchMessages,
@@ -40,4 +41,6 @@ export const useInitConversation = () => {
       unsubscribe();
     };
   }, []);
+
+  return init;
 };

package/src/features/Conversation/index.tsx

@@ -8,8 +8,9 @@ import SafeSpacing from '@/components/SafeSpacing';
 import { useGlobalStore } from '@/store/global';
 import { settingsSelectors } from '@/store/global/selectors';
 
+import ChatList from './components/ChatList';
 import ChatScrollAnchor from './components/ScrollAnchor';
-import ChatList from './container';
+import SkeletonList from './components/SkeletonList';
 import { useInitConversation } from './hooks/useInitConversation';
 
 const useStyles = createStyles(({ css, responsive, stylish, cx }, fontSize: number = 14) =>
@@ -52,14 +53,14 @@ const Conversation = memo<ConversationProps>(({ mobile, chatInput }) => {
   const { styles } = useStyles(fontSize);
 
   // init conversation
-  useInitConversation();
+  const init = useInitConversation();
 
   return (
     <Flexbox flex={1} style={{ position: 'relative' }}>
       <div style={{ flex: 1, overflow: 'hidden', position: 'relative' }}>
         <div className={styles} ref={ref}>
           {!mobile && <SafeSpacing />}
-          <ChatList />
+          {init ? <ChatList /> : <SkeletonList />}
           <ChatScrollAnchor />
         </div>
         <BackBottom target={ref} text={t('backToBottom')} />

package/src/features/Conversation/types/index.tsx

@@ -0,0 +1,35 @@
+import { type AlertProps, type ChatItemProps } from '@lobehub/ui';
+import { ActionEvent } from '@lobehub/ui';
+import { FC, ReactNode } from 'react';
+
+import { LLMRoleType } from '@/types/llm';
+import { ChatMessage } from '@/types/message';
+
+import { type ActionsBarProps } from '../components/ChatItem/ActionsBar';
+
+export type OnActionsClick = (action: ActionEvent, message: ChatMessage) => void;
+export type OnAvatarsClick = (role: RenderRole) => ChatItemProps['onAvatarClick'];
+export type RenderRole = LLMRoleType | 'default' | string;
+export type RenderMessage = FC<ChatMessage & { editableContent: ReactNode }>;
+export type RenderMessageExtra = FC<ChatMessage>;
+export interface RenderErrorMessage {
+  Render?: FC<ChatMessage>;
+  config?: AlertProps;
+}
+export type RenderAction = FC<ActionsBarProps & ChatMessage>;
+
+export type RenderItem = FC<{ key: string } & ChatMessage & ListItemProps>;
+
+export interface ListItemProps {
+  groupNav?: ChatItemProps['avatarAddon'];
+
+  renderItems?: {
+    [role: RenderRole]: RenderItem;
+  };
+
+  /**
+   * @description 是否显示聊天项的名称
+   * @default false
+   */
+  showTitle?: boolean;
+}

package/src/features/PluginStore/PluginItem/EditCustomPlugin.tsx

@@ -12,9 +12,10 @@ const EditCustomPlugin = memo<{ identifier: string }>(({ identifier }) => {
   const { t } = useTranslation('plugin');
   const [showModal, setModal] = useState(false);
 
-  const [installCustomPlugin, updateNewDevPlugin] = useToolStore((s) => [
+  const [installCustomPlugin, updateNewDevPlugin, uninstallCustomPlugin] = useToolStore((s) => [
     s.installCustomPlugin,
     s.updateNewCustomPlugin,
+    s.uninstallCustomPlugin,
   ]);
 
   const customPlugin = useToolStore(pluginSelectors.getCustomPluginById(identifier), isEqual);
@@ -27,10 +28,14 @@ const EditCustomPlugin = memo<{ identifier: string }>(({ identifier }) => {
     >
       <DevModal
         mode={'edit'}
+        onDelete={() => {
+          uninstallCustomPlugin(identifier);
+          setModal(false);
+        }}
         onOpenChange={setModal}
         onSave={async (devPlugin) => {
           await installCustomPlugin(devPlugin);
-          // toggleAgentPlugin(devPlugin.identifier);
+          setModal(false);
         }}
         onValueChange={updateNewDevPlugin}
         open={showModal}