@lobehub/chat 0.106.0 → 0.107.0

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

@@ -0,0 +1,119 @@
+import { LobePluginType } from '@lobehub/chat-plugin-sdk';
+import { t } from 'i18next';
+
+import { DEFAULT_INBOX_AVATAR, DEFAULT_USER_AVATAR } from '@/const/meta';
+import { INBOX_SESSION_ID } from '@/const/session';
+import { chatHelpers } from '@/store/chat/helpers';
+import { useGlobalStore } from '@/store/global';
+import { useSessionStore } from '@/store/session';
+import { agentSelectors } from '@/store/session/selectors';
+import { ChatMessage } from '@/types/chatMessage';
+import { merge } from '@/utils/merge';
+
+import type { ChatStore } from '../store';
+
+const getMeta = (message: ChatMessage) => {
+  switch (message.role) {
+    case 'user': {
+      return {
+        avatar: useGlobalStore.getState().settings.avatar || DEFAULT_USER_AVATAR,
+      };
+    }
+
+    case 'system': {
+      return message.meta;
+    }
+
+    case 'assistant': {
+      return agentSelectors.currentAgentMeta(useSessionStore.getState());
+    }
+
+    case 'function': {
+      // TODO: 后续改成将 plugin metadata 写入 message metadata 的方案
+      return {
+        avatar: '🧩',
+        title: 'plugin-unknown',
+      };
+    }
+  }
+};
+
+// 当前激活的消息列表
+const currentChats = (s: ChatStore): ChatMessage[] => {
+  if (!s.activeId) return [];
+
+  return s.messages.map((i) => ({ ...i, meta: getMeta(i) }));
+};
+
+const initTime = Date.now();
+// 针对新助手添加初始化时的自定义消息
+const currentChatsWithGuideMessage = (s: ChatStore): ChatMessage[] => {
+  const data = currentChats(s);
+
+  const isBrandNewChat = data.length === 0;
+
+  if (!isBrandNewChat) return data;
+
+  const [activeId, isInbox] = [s.activeId, s.activeId === INBOX_SESSION_ID];
+  const meta = agentSelectors.currentAgentMeta(useSessionStore.getState());
+
+  const inboxMsg = t('inbox.defaultMessage', { ns: 'chat' });
+  const agentSystemRoleMsg = t('agentDefaultMessageWithSystemRole', {
+    name: meta.title || t('defaultAgent'),
+    ns: 'chat',
+    systemRole: meta.description,
+  });
+  const agentMsg = t('agentDefaultMessage', {
+    id: activeId,
+    name: meta.title || t('defaultAgent'),
+    ns: 'chat',
+  });
+
+  const emptyInboxGuideMessage = {
+    content: isInbox ? inboxMsg : !!meta.description ? agentSystemRoleMsg : agentMsg,
+    createdAt: initTime,
+    extra: {},
+    id: 'default',
+    meta: merge({ avatar: DEFAULT_INBOX_AVATAR }, meta),
+    role: 'assistant',
+    updatedAt: initTime,
+  } as ChatMessage;
+
+  return [emptyInboxGuideMessage];
+};
+
+const currentChatsWithHistoryConfig = (s: ChatStore): ChatMessage[] => {
+  const chats = currentChats(s);
+  const config = agentSelectors.currentAgentConfig(useSessionStore.getState());
+
+  return chatHelpers.getSlicedMessagesWithConfig(chats, config);
+};
+
+const chatsMessageString = (s: ChatStore): string => {
+  const chats = currentChatsWithHistoryConfig(s);
+  return chats.map((m) => m.content).join('');
+};
+
+const getFunctionMessageProps =
+  ({ plugin, content, id }: Pick<ChatMessage, 'plugin' | 'content' | 'id'>) =>
+  (s: ChatStore) => ({
+    arguments: plugin?.arguments,
+    command: plugin,
+    content,
+    id: plugin?.identifier,
+    loading: id === s.chatLoadingId,
+    type: plugin?.type as LobePluginType,
+  });
+
+const getMessageById = (id: string) => (s: ChatStore) => {
+  return s.messages.find((m) => m.id === id);
+};
+
+export const chatSelectors = {
+  chatsMessageString,
+  currentChats,
+  currentChatsWithGuideMessage,
+  currentChatsWithHistoryConfig,
+  getFunctionMessageProps,
+  getMessageById,
+};

package/src/store/chat/selectors/index.ts

@@ -0,0 +1,2 @@
+export { chatSelectors } from './chat';
+export { topicSelectors } from './topic';

package/src/store/chat/selectors/topic.ts

@@ -0,0 +1,28 @@
+import { ChatTopic } from '@/types/topic';
+
+import { ChatStore } from '../store';
+
+const currentTopics = (s: ChatStore): ChatTopic[] => s.topics;
+
+const searchTopics = (s: ChatStore): ChatTopic[] => s.searchTopics;
+
+const displayTopics = (s: ChatStore): ChatTopic[] =>
+  s.isSearchingTopic ? searchTopics(s) : currentTopics(s);
+
+const currentUnFavTopics = (s: ChatStore): ChatTopic[] => s.topics.filter((s) => !s.favorite);
+
+const currentTopicLength = (s: ChatStore): number => currentTopics(s).length;
+
+const getTopicById =
+  (id: string) =>
+  (s: ChatStore): ChatTopic | undefined =>
+    currentTopics(s).find((topic) => topic.id === id);
+
+export const topicSelectors = {
+  currentTopicLength,
+  currentTopics,
+  currentUnFavTopics,
+  displayTopics,
+  getTopicById,
+  searchTopics,
+};

package/src/store/chat/store.ts

@@ -0,0 +1,63 @@
+import { PersistOptions, devtools, persist } from 'zustand/middleware';
+import { shallow } from 'zustand/shallow';
+import { createWithEqualityFn } from 'zustand/traditional';
+import { StateCreator } from 'zustand/vanilla';
+
+import { createHyperStorage } from '@/store/middleware/createHyperStorage';
+import { isDev } from '@/utils/env';
+
+import { ChatEnhanceAction, chatEnhance } from './actions/enhance';
+import { ChatMessageAction, chatMessage } from './actions/message';
+import { ChatPluginAction, chatPlugin } from './actions/plugin';
+import { ShareAction, chatShare } from './actions/share';
+import { ChatTopicAction, chatTopic } from './actions/topic';
+import { ChatStoreState, initialState } from './initialState';
+
+export interface ChatStoreAction
+  extends ChatMessageAction,
+    ChatTopicAction,
+    ShareAction,
+    ChatEnhanceAction,
+    ChatPluginAction {}
+
+export type ChatStore = ChatStoreAction & ChatStoreState;
+
+//  ===============  聚合 createStoreFn ============ //
+
+const createStore: StateCreator<ChatStore, [['zustand/devtools', never]]> = (...params) => ({
+  ...initialState,
+
+  ...chatMessage(...params),
+  ...chatTopic(...params),
+  ...chatShare(...params),
+  ...chatEnhance(...params),
+  ...chatPlugin(...params),
+});
+
+const persistOptions: PersistOptions<ChatStore> = {
+  name: 'LobeChat_Chat',
+
+  // 手动控制 Hydration ，避免 ssr 报错
+  skipHydration: true,
+
+  storage: createHyperStorage({
+    localStorage: false,
+    url: {
+      mode: 'hash',
+      selectors: [{ activeTopicId: 'topic' }],
+    },
+  }),
+  version: 0,
+};
+
+//  ===============  实装 useStore ============ //
+
+export const useChatStore = createWithEqualityFn<ChatStore>()(
+  persist(
+    devtools(createStore, {
+      name: 'LobeChat_Chat' + (isDev ? '_DEV' : ''),
+    }),
+    persistOptions,
+  ),
+  shallow,
+);

package/src/store/files/slices/images/action.ts

@@ -8,14 +8,13 @@ import { setNamespace } from '@/utils/storeDebug';
 
 import { FileStore } from '../../store';
 
-const t = setNamespace('files/image');
+const t = setNamespace('image');
 
-/**
- * 代理行为接口
- */
 export interface FileAction {
   clearImageList: () => void;
+  removeAllFiles: () => Promise<void>;
   removeFile: (id: string) => Promise<void>;
+
   setImageMapItem: (id: string, item: FilePreview) => void;
   uploadFile: (file: File) => Promise<void>;
 
@@ -31,6 +30,9 @@ export const createFileSlice: StateCreator<
   clearImageList: () => {
     set({ inputFilesList: [] }, false, t('clearImageList'));
   },
+  removeAllFiles: async () => {
+    await fileService.removeAllFiles();
+  },
   removeFile: async (id) => {
     await fileService.removeFile(id);
 

package/src/store/global/store.ts

@@ -77,7 +77,7 @@ const persistOptions: PersistOptions<GlobalStore, GlobalPersist> = {
 export const useGlobalStore = createWithEqualityFn<GlobalStore>()(
   persist(
     devtools(createStore, {
-      name: 'LOBE_GLOBAL' + (isDev ? '_DEV' : ''),
+      name: 'LobeChat_Global' + (isDev ? '_DEV' : ''),
     }),
     persistOptions,
   ),

package/src/store/middleware/createHyperStorage/index.ts

@@ -10,9 +10,20 @@ import { creatUrlStorage } from './urlStorage';
 export const createHyperStorage = <T extends object>(
   options: HyperStorageOptions,
 ): PersistStorage<T> => {
+  const getLocalStorageConfig = () => {
+    if (options.localStorage === false) {
+      return { dbName: '', skipLocalStorage: true, useIndexedDB: false };
+    }
+
+    const useIndexedDB = options.localStorage?.mode === 'indexedDB';
+    const dbName = options.localStorage?.dbName || 'indexedDB';
+
+    return { dbName, skipLocalStorage: false, useIndexedDB };
+  };
+
   const hasUrl = !!options.url;
-  const useIndexedDB = options.localStorage?.mode === 'indexedDB';
-  const dbName = options.localStorage?.dbName || 'indexedDB';
+
+  const { skipLocalStorage, useIndexedDB, dbName } = getLocalStorageConfig();
 
   const { mapStateKeyToStorageKey, getStateKeyFromStorageKey } = createKeyMapper(options);
 
@@ -25,20 +36,22 @@ export const createHyperStorage = <T extends object>(
       let version: number | undefined;
 
       // ============== 处理 Local Storage  ============== //
-      let localState: StorageValue<T> | undefined;
+      if (!skipLocalStorage) {
+        let localState: StorageValue<T> | undefined;
 
-      // 如果使用 indexedDB，优先从 indexedDB 中获取
-      if (useIndexedDB) {
-        localState = await indexedDB.getItem(name);
-      }
-      // 如果 indexedDB 中不存在，则再试试 localStorage
-      if (!localState) localState = localStorage.getItem(name);
-
-      if (localState) {
-        version = localState.version;
-        for (const [k, v] of Object.entries(localState.state)) {
-          const key = getStateKeyFromStorageKey(k, 'localStorage');
-          if (key) state[key] = v;
+        // 如果使用 indexedDB，优先从 indexedDB 中获取
+        if (useIndexedDB) {
+          localState = await indexedDB.getItem(name);
+        }
+        // 如果 indexedDB 中不存在，则再试试 localStorage
+        if (!localState) localState = localStorage.getItem(name);
+
+        if (localState) {
+          version = localState.version;
+          for (const [k, v] of Object.entries(localState.state)) {
+            const key = getStateKeyFromStorageKey(k, 'localStorage');
+            if (key) state[key] = v;
+          }
         }
       }
 
@@ -62,11 +75,12 @@ export const createHyperStorage = <T extends object>(
     },
     removeItem: async (key) => {
       // ============== 处理 Local Storage  ============== //
-
-      if (useIndexedDB) {
-        await indexedDB.removeItem(key);
-      } else {
-        localStorage.removeItem(key);
+      if (!skipLocalStorage) {
+        if (useIndexedDB) {
+          await indexedDB.removeItem(key);
+        } else {
+          localStorage.removeItem(key);
+        }
       }
 
       // ============== 处理 URL Storage  ============== //
@@ -85,10 +99,12 @@ export const createHyperStorage = <T extends object>(
         if (localKey) localState[localKey] = v;
       }
 
-      if (useIndexedDB) {
-        await indexedDB.setItem(name, localState, newValue.version);
-      } else {
-        localStorage.setItem(name, localState, newValue.version);
+      if (!skipLocalStorage) {
+        if (useIndexedDB) {
+          await indexedDB.setItem(name, localState, newValue.version);
+        } else {
+          localStorage.setItem(name, localState, newValue.version);
+        }
       }
 
       // ============== 处理 URL Storage  ============== //

package/src/store/middleware/createHyperStorage/keyMapper.ts

@@ -5,7 +5,10 @@ export const createKeyMapper = (options: HyperStorageOptions) => {
     key: string,
     mode: keyof HyperStorageOptions = 'localStorage',
   ) => {
-    const selectors = options[mode]?.selectors;
+    const media = options[mode];
+    if (media === false) return key;
+
+    const selectors = media?.selectors;
     if (!selectors) return key;
 
     let storageKey: string | undefined;
@@ -27,7 +30,10 @@ export const createKeyMapper = (options: HyperStorageOptions) => {
     key: string,
     mode: keyof HyperStorageOptions = 'localStorage',
   ) => {
-    const selectors = options[mode]?.selectors;
+    const media = options[mode];
+    if (media === false) return key;
+
+    const selectors = media?.selectors;
     if (!selectors) return key;
 
     let stateKey: string | undefined;

package/src/store/middleware/createHyperStorage/type.ts

@@ -1,14 +1,16 @@
 export type StorageSelector = string | Record<string, string>;
 
+export interface LocalStorageOptions {
+  dbName?: string;
+  /**
+   * @default 'localStorage'
+   */
+  mode?: 'indexedDB' | 'localStorage';
+  selectors: StorageSelector[];
+}
+
 export interface HyperStorageOptions {
-  localStorage?: {
-    dbName?: string;
-    /**
-     * @default 'localStorage'
-     */
-    mode?: 'indexedDB' | 'localStorage';
-    selectors: StorageSelector[];
-  };
+  localStorage?: LocalStorageOptions | false;
   url?: {
     /**
      * @default 'hash'

package/src/store/plugin/slices/plugin/action.ts

@@ -48,7 +48,7 @@ export const createPluginSlice: StateCreator<
 
     let enabledPlugins: string[] = [];
 
-    for (const session of Object.values(sessions)) {
+    for (const session of sessions) {
       const plugins = session.config.plugins;
       if (!plugins || plugins.length === 0) continue;
 

package/src/store/plugin/store.ts

@@ -26,10 +26,8 @@ type SessionPersist = Pick<
   'pluginList' | 'pluginManifestMap' | 'pluginsSettings' | 'customPluginList'
 >;
 
-const storeName = 'LOBE_PLUGIN';
-
 const persistOptions: PersistOptions<PluginStore, SessionPersist> = {
-  name: storeName,
+  name: 'LOBE_PLUGIN',
 
   partialize: (s) => ({
     customPluginList: s.customPluginList,
@@ -48,7 +46,7 @@ const persistOptions: PersistOptions<PluginStore, SessionPersist> = {
 export const usePluginStore = createWithEqualityFn<PluginStore>()(
   persist(
     devtools(createStore, {
-      name: storeName + (isDev ? '_DEV' : ''),
+      name: 'LobeChat_Plugin' + (isDev ? '_DEV' : ''),
     }),
     persistOptions,
   ),

package/src/store/session/helpers.ts

@@ -1 +1 @@
-export * from './slices/chat/helpers';
+export * from './slices/session/helpers';

package/src/store/session/hooks/useSessionHydrated.ts

@@ -1,17 +1,13 @@
-import { useState } from 'react';
-
-import { sessionSelectors } from '../selectors';
 import { useSessionStore } from '../store';
-import { useEffectAfterSessionHydrated } from './useEffectAfterHydrated';
 
 export const useSessionHydrated = () => {
-  const hasInited = sessionSelectors.hasConversion(useSessionStore.getState());
+  const [fetchSessionsLoading, useFetchSessions] = useSessionStore((s) => [
+    s.fetchSessionsLoading,
 
-  const [isInit, setInit] = useState(hasInited);
+    s.useFetchSessions,
+  ]);
 
-  useEffectAfterSessionHydrated(() => {
-    if (!isInit) setInit(true);
-  }, []);
+  const { isLoading } = useFetchSessions();
 
-  return isInit;
+  return !(isLoading || fetchSessionsLoading);
 };

package/src/store/session/initialState.ts

@@ -1,11 +1,30 @@
-import { ChatState, initialChatState } from './slices/chat/initialState';
-import { SessionState, initialSessionState } from './slices/session/initialState';
+import { AppRouterInstance } from 'next/dist/shared/lib/app-router-context.shared-runtime';
 
-export type SessionStoreState = SessionState & ChatState;
+import { LobeAgentSession } from '@/types/session';
+
+export type SessionStoreState = SessionState;
+
+export interface SessionState {
+  /**
+   * @title 当前活动的会话
+   * @description 当前正在编辑或查看的会话
+   */
+  activeId: string;
+  fetchSessionsLoading: boolean;
+  isMobile?: boolean;
+  isSearching: boolean;
+  router?: AppRouterInstance;
+  searchKeywords: string;
+  searchSessions: LobeAgentSession[];
+  sessions: LobeAgentSession[];
+}
 
 export const initialState: SessionStoreState = {
-  ...initialSessionState,
-  ...initialChatState,
+  activeId: 'inbox',
+  fetchSessionsLoading: true,
+  isMobile: false,
+  isSearching: false,
+  searchKeywords: '',
+  searchSessions: [],
+  sessions: [],
 };
-
-export { initLobeSession } from './slices/session/initialState';

package/src/store/session/selectors.ts

@@ -1,3 +1,2 @@
 export { agentSelectors } from './slices/agent/selectors';
-export { chatSelectors, topicSelectors } from './slices/chat/selectors';
-export { sessionSelectors } from './slices/session/selectors';
+export { sessionExportSelectors,sessionSelectors } from './slices/session/selectors';

package/src/store/session/slices/agent/action.ts

@@ -1,9 +1,10 @@
 import { produce } from 'immer';
 import { StateCreator } from 'zustand/vanilla';
 
+import { sessionService } from '@/services/session';
 import { useGlobalStore } from '@/store/global';
+import { LobeAgentConfig } from '@/types/agent';
 import { MetaData } from '@/types/meta';
-import { LobeAgentConfig } from '@/types/session';
 
 import { SessionStore } from '../../store';
 import { sessionSelectors } from '../session/selectors';
@@ -13,10 +14,6 @@ import { sessionSelectors } from '../session/selectors';
  */
 export interface AgentAction {
   removePlugin: (id: string) => void;
-  /**
-   * 更新代理配置
-   * @param config - 部分 LobeAgentConfig 的配置
-   */
   updateAgentConfig: (config: Partial<LobeAgentConfig>) => void;
   updateAgentMeta: (meta: Partial<MetaData>) => void;
 }
@@ -27,51 +24,45 @@ export const createAgentSlice: StateCreator<
   [],
   AgentAction
 > = (set, get) => ({
-  removePlugin: (id) => {
-    const { activeId } = get();
+  removePlugin: async (id) => {
     const session = sessionSelectors.currentSession(get());
-    if (!activeId || !session) return;
+    if (!session) return;
+
+    const { activeId, refreshSessions } = get();
 
     const config = produce(session.config, (draft) => {
       draft.plugins = draft.plugins?.filter((i) => i !== id) || [];
     });
 
-    get().dispatchSession({ config, id: activeId, type: 'updateSessionConfig' });
+    await sessionService.updateSessionConfig(activeId, config);
+    await refreshSessions();
   },
 
-  updateAgentConfig: (config) => {
-    const { activeId, dispatchSession } = get();
-    const session = sessionSelectors.currentSession(get());
-    if (!activeId || !session) return;
-
+  updateAgentConfig: async (config) => {
     // if is the inbox session, update the global config
-    if (sessionSelectors.isInboxSession(get())) {
+    const isInbox = sessionSelectors.isInboxSession(get());
+    if (isInbox) {
       useGlobalStore.getState().updateDefaultAgent({ config });
-      // NOTE: DON'T ADD RETURN HERE.
-      // we need to use `dispatchSession` below to update inbox config to trigger the inbox config rerender
+    } else {
+      const session = sessionSelectors.currentSession(get());
+      if (!session) return;
+
+      const { activeId } = get();
+
+      await sessionService.updateSessionConfig(activeId, config);
     }
 
-    // Although we use global store to store the default agent config,
-    // due to the `currentAgentConfig` selector use `useGlobalStore.getState()`
-    // to get the default agent config which not rerender on global store update
-    // we need to update the session config here.
-    dispatchSession({ config, id: activeId, type: 'updateSessionConfig' });
+    // trigger store rerender
+    await get().refreshSessions();
   },
 
-  updateAgentMeta: (meta) => {
-    const { activeId } = get();
+  updateAgentMeta: async (meta) => {
     const session = sessionSelectors.currentSession(get());
-    if (!activeId || !session) return;
+    if (!session) return;
 
-    for (const [key, value] of Object.entries(meta)) {
-      if (value !== undefined) {
-        get().dispatchSession({
-          id: activeId,
-          key: key as keyof MetaData,
-          type: 'updateSessionMeta',
-          value,
-        });
-      }
-    }
+    const { activeId, refreshSessions } = get();
+
+    await sessionService.updateSessionMeta(activeId, meta);
+    await refreshSessions();
   },
 });