@lobehub/chat 0.118.9 → 0.119.0

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/create.ts

@@ -28,7 +28,7 @@ export const createI18nNext = (lang?: string) => {
     init: () =>
       instance.init({
         debug: debugMode,
-        defaultNS: ['error', 'common', 'empty'],
+        defaultNS: ['error', 'common', 'empty', 'chat'],
         detection: {
           caches: ['cookie'],
           cookieMinutes: 60 * 24 * COOKIE_CACHE_DAYS,

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/locales/default/error.ts

@@ -9,7 +9,26 @@ export default {
     403: '很抱歉，服务器拒绝了您的请求，您没有访问此内容的权限 ',
     404: '很抱歉，服务器找不到您请求的页面或资源，请确认您的 URL 是否正确',
     405: '很抱歉，服务器不支持您使用的请求方法，请确认您的请求方法是否正确',
+    406: '很抱歉，服务器无法根据您请求的内容特性完成请求',
+    407: '很抱歉，您需要进行代理认证后才能继续此请求',
+    408: '很抱歉，服务器在等待请求时超时，请检查您的网络连接后再试',
+    409: '很抱歉，请求存在冲突无法处理，可能是因为资源状态与请求不兼容',
+    410: '很抱歉，您请求的资源已被永久移除，无法找到',
+    411: '很抱歉，服务器无法处理不含有效内容长度的请求',
+    412: '很抱歉，您的请求未满足服务器端的条件，无法完成请求',
+    413: '很抱歉，您的请求数据量过大，服务器无法处理',
+    414: '很抱歉，您的请求的 URI 过长，服务器无法处理',
+    415: '很抱歉，服务器无法处理请求附带的媒体格式',
+    416: '很抱歉，服务器无法满足您请求的范围',
+    417: '很抱歉，服务器无法满足您的期望值',
+    422: '很抱歉，您的请求格式正确，但是由于含有语义错误，无法响应',
+    423: '很抱歉，您请求的资源被锁定',
+    424: '很抱歉，由于之前的请求失败，导致当前请求无法完成',
+    426: '很抱歉，服务器要求您的客户端升级到更高的协议版本',
+    428: '很抱歉，服务器要求先决条件，要求您的请求包含正确的条件头',
     429: '很抱歉，您的请求太多，服务器有点累了，请稍后再试',
+    431: '很抱歉，您的请求头字段太大，服务器无法处理',
+    451: '很抱歉，由于法律原因，服务器拒绝提供此资源',
     500: '很抱歉，服务器似乎遇到了一些困难，暂时无法完成您的请求，请稍后再试',
     502: '很抱歉，服务器似乎迷失了方向，暂时无法提供服务，请稍后再试',
     503: '很抱歉，服务器当前无法处理您的请求，可能是由于过载或正在进行维护，请稍后再试',

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'));