@lobehub/chat 0.118.10 → 0.119.0

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}

package/src/locales/default/chat.ts

@@ -8,6 +8,7 @@ export default {
   confirmRemoveSessionItemAlert: '即将删除该助手，删除后该将无法找回，请确认你的操作',
   defaultAgent: '自定义助手',
   defaultSession: '自定义助手',
+  duplicateTitle: '{{title}} 副本',
   historyRange: '历史范围',
   inbox: {
     defaultMessage:
@@ -15,9 +16,12 @@ export default {
     desc: '开启大脑集群，激发思维火花。你的智能助理，在这里与你交流一切',
     title: '随便聊聊',
   },
+  messageAction: {
+    delAndRegenerate: '删除并重新生成',
+    regenerate: '重新生成',
+  },
   newAgent: '新建助手',
   noDescription: '暂无描述',
-
   pin: '置顶',
   pinOff: '取消置顶',
   regenerate: '重新生成',
@@ -52,6 +56,11 @@ export default {
     used: '使用',
   },
   topic: {
+    actions: {
+      autoRename: '智能重命名',
+      duplicate: '创建副本',
+      export: '导出话题',
+    },
     confirmRemoveAll: '即将删除全部话题，删除后将不可恢复，请谨慎操作。',
     confirmRemoveTopic: '即将删除该话题，删除后将不可恢复，请谨慎操作。',
     confirmRemoveUnstarred: '即将删除未收藏话题，删除后将不可恢复，请谨慎操作。',

package/src/locales/default/common.ts

@@ -17,6 +17,7 @@ export default {
   defaultAgent: '自定义助手',
   defaultSession: '自定义助手',
   delete: '删除',
+  duplicate: '创建副本',
   edit: '编辑',
   export: '导出配置',
   exportType: {

package/src/services/config.ts

@@ -127,6 +127,28 @@ class ConfigService {
     exportConfigFile(config, `${session.meta?.title}-session`);
   };
 
+  /**
+   * export a topic
+   */
+  exportSingleTopic = async (sessionId: string, topicId: string) => {
+    const session = this.getSession(sessionId);
+    if (!session) return;
+
+    const messages = await messageService.getMessages(sessionId, topicId);
+    const topics = await topicService.getTopics({ sessionId });
+
+    const topic = topics.find((item) => item.id === topicId);
+    if (!topic) return;
+
+    const config = createConfigFile('singleSession', {
+      messages,
+      sessions: [session],
+      topics: [topic],
+    });
+
+    exportConfigFile(config, `${topic.title}-topic`);
+  };
+
   exportSingleAgent = async (id: string) => {
     const agent = this.getAgent(id);
     if (!agent) return;

package/src/services/session.ts

@@ -58,6 +58,12 @@ class SessionService {
   async searchSessions(keyword: string) {
     return SessionModel.queryByKeyword(keyword);
   }
+
+  async duplicateSession(id: string, newTitle: string): Promise<string | undefined> {
+    const res = await SessionModel.duplicate(id, newTitle);
+
+    if (res) return res?.id;
+  }
 }
 
 export const sessionService = new SessionService();

package/src/services/topic.ts

@@ -51,6 +51,10 @@ class TopicService {
   async searchTopics(keyword: string) {
     return TopicModel.queryByKeyword(keyword);
   }
+
+  async duplicateTopic(id: string, newTitle?: string) {
+    return TopicModel.duplicateTopic(id, newTitle);
+  }
 }
 
 export const topicService = new TopicService();

package/src/store/chat/slices/message/selectors.ts

@@ -84,6 +84,12 @@ const currentChatsWithGuideMessage =
     return [emptyInboxGuideMessage];
   };
 
+const currentChatIDsWithGuideMessage = (s: ChatStore) => {
+  const meta = agentSelectors.currentAgentMeta(useSessionStore.getState());
+
+  return currentChatsWithGuideMessage(meta)(s).map((s) => s.id);
+};
+
 const currentChatsWithHistoryConfig = (s: ChatStore): ChatMessage[] => {
   const chats = currentChats(s);
   const config = agentSelectors.currentAgentConfig(useSessionStore.getState());
@@ -109,11 +115,15 @@ const getFunctionMessageProps =
 
 const getMessageById = (id: string) => (s: ChatStore) => chatHelpers.getMessageById(s.messages, id);
 
+const latestMessage = (s: ChatStore) => currentChats(s).at(-1);
+
 export const chatSelectors = {
   chatsMessageString,
+  currentChatIDsWithGuideMessage,
   currentChats,
   currentChatsWithGuideMessage,
   currentChatsWithHistoryConfig,
   getFunctionMessageProps,
   getMessageById,
+  latestMessage,
 };

package/src/store/chat/slices/topic/action.ts

@@ -30,6 +30,8 @@ export interface ChatTopicAction {
   removeTopic: (id: string) => Promise<void>;
   removeUnstarredTopic: () => void;
   saveToTopic: () => Promise<string | undefined>;
+  autoRenameTopicTitle: (id: string) => Promise<void>;
+  duplicateTopic: (id: string) => Promise<void>;
   summaryTopicTitle: (topicId: string, messages: ChatMessage[]) => Promise<void>;
   switchTopic: (id?: string) => Promise<void>;
   updateTopicTitleInSummary: (id: string, title: string) => void;
@@ -78,6 +80,19 @@ export const chatTopic: StateCreator<
 
     return topicId;
   },
+  duplicateTopic: async (id) => {
+    const { refreshTopic, switchTopic } = get();
+
+    const topic = topicSelectors.getTopicById(id)(get());
+    if (!topic) return;
+
+    const newTitle = t('duplicateTitle', { ns: 'chat', title: topic?.title });
+
+    const newTopicId = await topicService.duplicateTopic(id, newTitle);
+    await refreshTopic();
+
+    switchTopic(newTopicId);
+  },
   // update
   summaryTopicTitle: async (topicId, messages) => {
     const { updateTopicTitleInSummary, updateTopicLoading, refreshTopic } = get();
@@ -115,6 +130,13 @@ export const chatTopic: StateCreator<
     await topicService.updateTitle(id, title);
     await get().refreshTopic();
   },
+
+  autoRenameTopicTitle: async (id) => {
+    const { activeId: sessionId, summaryTopicTitle } = get();
+    const messages = await messageService.getMessages(sessionId, id);
+
+    await summaryTopicTitle(id, messages);
+  },
   // query
   useFetchTopics: (sessionId) =>
     useSWR<ChatTopic[]>(sessionId, async (sessionId) => topicService.getTopics({ sessionId }), {

package/src/store/global/slices/common/action.ts

@@ -75,6 +75,8 @@ export const createCommonSlice: StateCreator<
   },
   useCheckLatestVersion: () =>
     useSWR('checkLatestVersion', globalService.getLatestVersion, {
+      // check latest version every 30 minutes
+      focusThrottleInterval: 1000 * 60 * 30,
       onSuccess: (data: string) => {
         if (gt(data, CURRENT_VERSION))
           set({ hasNewVersion: true, latestVersion: data }, false, n('checkLatestVersion'));