@lobehub/chat 0.69.0 → 0.70.0

package/src/pages/chat/{[id]/setting → setting}/Header.tsx

@@ -7,7 +7,6 @@ import {
 } from '@lobehub/ui';
 import { Dropdown, MenuProps } from 'antd';
 import { HardDriveDownload, Share2 } from 'lucide-react';
-import Router from 'next/router';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -16,7 +15,7 @@ import { useSessionStore } from '@/store/session';
 
 const Header = memo<{ mobile?: boolean }>(({ mobile }) => {
   const { t } = useTranslation('setting');
-  const id = useSessionStore((s) => s.activeId);
+  const [id, onBack] = useSessionStore((s) => [s.activeId, s.switchBackToChat]);
 
   const items = useMemo<MenuProps['items']>(
     () => [
@@ -46,7 +45,7 @@ const Header = memo<{ mobile?: boolean }>(({ mobile }) => {
     return (
       <MobileNavBar
         center={<MobileNavBarTitle title={t('header.session')} />}
-        onBackClick={() => Router.back()}
+        onBackClick={onBack}
         right={
           <>
             <ActionIcon icon={Share2} title={t('share', { ns: 'common' })} />
@@ -62,7 +61,7 @@ const Header = memo<{ mobile?: boolean }>(({ mobile }) => {
   return (
     <ChatHeader
       left={<ChatHeaderTitle title={t('header.session')} />}
-      onBackClick={() => Router.back()}
+      onBackClick={onBack}
       right={
         <>
           <ActionIcon icon={Share2} size={{ fontSize: 24 }} title={t('share', { ns: 'common' })} />

package/src/pages/index.page.tsx

@@ -1,19 +1,25 @@
-import { memo } from 'react';
+import { memo, useEffect } from 'react';
 
 import { useSessionHydrated, useSessionStore } from '@/store/session';
 import { sessionSelectors } from '@/store/session/selectors';
 
-import Chat from './chat/index.page';
 import Loading from './index/Loading';
 import Welcome from './welcome/index.page';
 
 const Home = memo(() => {
   const hydrated = useSessionHydrated();
-  const hasSession = useSessionStore(sessionSelectors.hasSessionList);
+  const [hasSession, switchSession] = useSessionStore((s) => [
+    sessionSelectors.hasSessionList(s),
+    s.switchSession,
+  ]);
+
+  useEffect(() => {
+    if (hasSession) switchSession();
+  }, [hasSession]);
 
   if (!hydrated) return <Loading />;
 
-  return !hasSession ? <Welcome /> : <Chat />;
+  return !hasSession ? <Welcome /> : <Loading />;
 });
 
 export default Home;

package/src/pages/settings/Header.tsx

@@ -1,15 +1,17 @@
 import { ChatHeader, ChatHeaderTitle } from '@lobehub/ui';
-import Router from 'next/router';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { useSessionStore } from '@/store/session';
+
 const Header = memo(() => {
   const { t } = useTranslation('setting');
+  const [switchBackToChat] = useSessionStore((s) => [s.switchBackToChat]);
 
   return (
     <ChatHeader
       left={<ChatHeaderTitle title={t('header.global')} />}
-      onBackClick={() => Router.back()}
+      onBackClick={switchBackToChat}
       showBackButton
     />
   );

package/src/pages/welcome/Banner/index.tsx

@@ -3,12 +3,13 @@ import { useSize } from 'ahooks';
 import { Button, Upload } from 'antd';
 import { SendHorizonal } from 'lucide-react';
 import Link from 'next/link';
-import Router from 'next/router';
 import { memo, useCallback, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
+import { SESSION_CHAT_URL } from '@/const/url';
 import { useImportConfig } from '@/hooks/useImportConfig';
+import { useSessionStore } from '@/store/session';
 
 import { useStyles } from '../style';
 import Hero from './Hero';
@@ -22,9 +23,10 @@ const Banner = memo<{ mobile?: boolean }>(() => {
 
   const { styles } = useStyles();
 
+  const switchSession = useSessionStore((s) => s.switchSession);
   const handleImport = useCallback((e: any) => {
     importConfig(e);
-    Router.push('/chat');
+    switchSession();
   }, []);
 
   return (
@@ -37,7 +39,13 @@ const Banner = memo<{ mobile?: boolean }>(() => {
           <Upload maxCount={1} onChange={handleImport} showUploadList={false}>
             <Button size={'large'}>{t('button.import')}</Button>
           </Upload>
-          <Link href={'/chat'}>
+          <Link
+            href={SESSION_CHAT_URL()}
+            onClick={(e) => {
+              e.preventDefault();
+              switchSession();
+            }}
+          >
             <Button size={'large'} type={'primary'}>
               <Flexbox align={'center'} gap={4} horizontal>
                 {t('button.start')}

package/src/services/chatModel.ts

@@ -1,11 +1,10 @@
 import { merge } from 'lodash-es';
-import { ChatCompletionFunctions } from 'openai-edge/types/api';
 
 import { LOBE_CHAT_ACCESS_CODE, OPENAI_API_KEY_HEADER_KEY, OPENAI_END_POINT } from '@/const/fetch';
 import { useGlobalStore } from '@/store/global';
 import { pluginSelectors, usePluginStore } from '@/store/plugin';
 import { initialLobeAgentConfig } from '@/store/session/initialState';
-import type { OpenAIStreamPayload } from '@/types/openai';
+import type { ChatCompletionFunctions, OpenAIStreamPayload } from '@/types/openai';
 
 import { URLS } from './url';
 

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

@@ -0,0 +1,95 @@
+import { isEmpty } from 'lodash-es';
+import { PersistStorage } from 'zustand/middleware';
+import { StorageValue } from 'zustand/middleware/persist';
+
+import { createKeyMapper } from './keyMapper';
+import { HyperStorageOptions } from './type';
+import { createUrlSearch } from './urlSearch';
+
+export const createHyperStorage = <T extends object>(
+  options: HyperStorageOptions,
+): PersistStorage<T> => {
+  const hasUrl = !!options.url;
+
+  const { setUrlSearch, getUrlSearch } = createUrlSearch(options.url?.mode);
+
+  const { mapStateKeyToStorageKey, getStateKeyFromStorageKey } = createKeyMapper(options);
+
+  return {
+    getItem: (name): StorageValue<T> => {
+      const state: any = {};
+      let version: number | undefined;
+      // ============== 处理 Local Storage  ============== //
+      const string = localStorage.getItem(name);
+      if (string) {
+        const localState: StorageValue<T> = JSON.parse(string);
+        version = localState.version;
+        for (const [k, v] of Object.entries(localState.state)) {
+          const key = getStateKeyFromStorageKey(k, 'localStorage');
+          if (key) state[key] = v;
+        }
+      }
+
+      // ============== 处理 URL Storage  ============== //
+      // 不从 URL 中获取 version，由于 url 状态是临时态 不作为版本控制的依据
+      if (hasUrl) {
+        const searchParameters = new URLSearchParams(getUrlSearch());
+
+        for (const [k, v] of searchParameters.entries()) {
+          const key = getStateKeyFromStorageKey(k, 'url');
+          // 当存在 UrlSelector 逻辑，且 key 有效时，才将状态加入终态 state
+          if (hasUrl && key) {
+            state[key] = v;
+          }
+        }
+      }
+
+      return { state, version };
+    },
+    removeItem: (key): void => {
+      // ============== 处理 URL Storage  ============== //
+      if (hasUrl) {
+        const searchParameters = new URLSearchParams(getUrlSearch());
+
+        const storageKey = getStateKeyFromStorageKey(key, 'url');
+        if (storageKey) searchParameters.delete(storageKey);
+
+        setUrlSearch(searchParameters);
+      }
+    },
+    setItem: (name, newValue) => {
+      // ============== 处理 Local Storage  ============== //
+      const localState: Record<string, any> = {};
+      for (const [k, v] of Object.entries(newValue.state)) {
+        const localKey = mapStateKeyToStorageKey(k, 'localStorage');
+        if (localKey) localState[localKey] = v;
+      }
+
+      localStorage.setItem(name, JSON.stringify({ ...newValue, state: localState }));
+
+      // ============== 处理 URL Storage  ============== //
+      if (hasUrl) {
+        const searchParameters = new URLSearchParams(getUrlSearch());
+
+        for (const [k, v] of Object.entries(newValue.state)) {
+          const urlKey = mapStateKeyToStorageKey(k, 'url');
+
+          if (!urlKey) continue;
+
+          if (isEmpty(v)) {
+            searchParameters.delete(urlKey);
+            continue;
+          }
+
+          if (typeof v === 'string') {
+            searchParameters.set(urlKey, v);
+          } else {
+            searchParameters.set(urlKey, JSON.stringify(v));
+          }
+        }
+
+        setUrlSearch(searchParameters);
+      }
+    },
+  };
+};

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

@@ -0,0 +1,53 @@
+import { HyperStorageOptions } from './type';
+
+export const createKeyMapper = (options: HyperStorageOptions) => {
+  const mapStateKeyToStorageKey = (
+    key: string,
+    mode: keyof HyperStorageOptions = 'localStorage',
+  ) => {
+    const selectors = options[mode]?.selectors;
+    if (!selectors) return key;
+
+    let storageKey: string | undefined;
+
+    if (!selectors) return key;
+
+    for (const selector of selectors) {
+      if (typeof selector === 'string') {
+        if (selector === key) storageKey = key;
+      } else {
+        if (selector[key]) storageKey = selector[key];
+      }
+    }
+
+    return storageKey;
+  };
+
+  const getStateKeyFromStorageKey = (
+    key: string,
+    mode: keyof HyperStorageOptions = 'localStorage',
+  ) => {
+    const selectors = options[mode]?.selectors;
+    if (!selectors) return key;
+
+    let stateKey: string | undefined;
+
+    for (const item of selectors) {
+      // 对象如果是 字符串，直接返回该 item key
+      if (typeof item === 'string') {
+        if (item === key) stateKey = key;
+      } else {
+        for (const [k, v] of Object.entries(item)) {
+          if (v === key) stateKey = k;
+        }
+      }
+    }
+
+    return stateKey;
+  };
+
+  return {
+    getStateKeyFromStorageKey,
+    mapStateKeyToStorageKey,
+  };
+};

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

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

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

@@ -0,0 +1,17 @@
+interface UrlSearchHelper {
+  getUrlSearch: () => string;
+  setUrlSearch: (params: URLSearchParams) => void;
+}
+
+export const createUrlSearch = (mode: 'search' | 'hash' = 'hash'): UrlSearchHelper => {
+  if (mode === 'hash')
+    return {
+      getUrlSearch: () => location.hash.slice(1),
+      setUrlSearch: (params: URLSearchParams) => (location.hash = params.toString()),
+    };
+
+  return {
+    getUrlSearch: () => location.search.slice(1),
+    setUrlSearch: (params: URLSearchParams) => (location.search = params.toString()),
+  };
+};

package/src/store/plugin/selectors.ts

@@ -1,8 +1,8 @@
 import { uniqBy } from 'lodash-es';
-import { ChatCompletionFunctions } from 'openai-edge/types/api';
 
 import { PLUGIN_SCHEMA_SEPARATOR } from '@/const/plugin';
 import { pluginHelpers } from '@/store/plugin/helpers';
+import { ChatCompletionFunctions } from '@/types/openai';
 
 import { PluginStoreState } from './initialState';
 

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

@@ -4,6 +4,7 @@ import Router from 'next/router';
 import { StateCreator } from 'zustand/vanilla';
 
 import { INBOX_SESSION_ID } from '@/const/session';
+import { SESSION_CHAT_URL } from '@/const/url';
 import { useGlobalStore } from '@/store/global';
 import { SessionStore } from '@/store/session';
 import { LobeAgentSession, LobeSessions } from '@/types/session';
@@ -54,12 +55,14 @@ export interface SessionAction {
    */
   removeSession: (sessionId: string) => void;
 
+  switchBackToChat: () => void;
+
   /**
    * @title 切换会话
    * @param sessionId - 会话索引
    * @returns void
    */
-  switchSession: (sessionId?: string) => Promise<void>;
+  switchSession: (sessionId?: string) => void;
 }
 
 export const createSessionSlice: StateCreator<
@@ -69,7 +72,7 @@ export const createSessionSlice: StateCreator<
   SessionAction
 > = (set, get) => ({
   activeSession: (sessionId) => {
-    set({ activeId: sessionId }, false, t('activeSession'));
+    set({ activeId: sessionId, activeTopicId: undefined }, false, t('activeSession'));
   },
 
   clearSessions: () => {
@@ -144,18 +147,24 @@ export const createSessionSlice: StateCreator<
     get().dispatchSession({ id: sessionId, type: 'removeSession' });
 
     if (sessionId === get().activeId) {
-      Router.push('/chat');
+      get().switchSession();
     }
   },
 
-  switchSession: async (sessionId) => {
+  switchBackToChat: () => {
+    const { activeId } = get();
+
+    const id = activeId || INBOX_SESSION_ID;
+
+    get().activeSession(id);
+
+    Router.push(SESSION_CHAT_URL(id));
+  },
+  switchSession: (sessionId = INBOX_SESSION_ID) => {
     if (get().activeId === sessionId) return;
 
-    if (sessionId) {
-      get().activeSession(sessionId);
-    }
+    get().activeSession(sessionId);
 
-    // 新会话
-    await Router.push(`/chat/${sessionId}`);
+    Router.push(SESSION_CHAT_URL(sessionId));
   },
 });

package/src/store/session/slices/session/initialState.ts

@@ -9,9 +9,8 @@ export interface SessionState {
   /**
    * @title 当前活动的会话
    * @description 当前正在编辑或查看的会话
-   * @default null
    */
-  activeId: string | null;
+  activeId: string | undefined;
   // 默认会话
   inbox: LobeAgentSession;
   searchKeywords: string;
@@ -39,7 +38,7 @@ export const initInbox = merge({}, initLobeSession, {
 } as Partial<LobeAgentSession>);
 
 export const initialSessionState: SessionState = {
-  activeId: null,
+  activeId: undefined,
   inbox: initInbox,
   searchKeywords: '',
   sessions: {},

package/src/store/session/slices/session/selectors/index.ts

@@ -1,3 +1,6 @@
+import { INBOX_SESSION_ID } from '@/const/session';
+import { SessionStore } from '@/store/session';
+
 import { exportAgents, exportSessions, getExportAgent } from './export';
 import {
   currentSession,
@@ -8,6 +11,8 @@ import {
   sessionList,
 } from './list';
 
+const isInboxSession = (s: SessionStore) => s.activeId === INBOX_SESSION_ID;
+
 export const sessionSelectors = {
   currentSession,
   currentSessionSafe,
@@ -17,5 +22,6 @@ export const sessionSelectors = {
   getSessionById,
   getSessionMetaById,
   hasSessionList,
+  isInboxSession,
   sessionList,
 };

package/src/store/session/store.ts

@@ -5,6 +5,7 @@ import { StateCreator } from 'zustand/vanilla';
 
 import { isDev } from '@/utils/env';
 
+import { createHyperStorage } from '../middleware/createHyperStorage';
 import { SessionStoreState, initialState } from './initialState';
 import { AgentAction, createAgentSlice } from './slices/agentConfig/action';
 import { ChatAction, createChatSlice } from './slices/chat/actions';
@@ -22,20 +23,27 @@ const createStore: StateCreator<SessionStore, [['zustand/devtools', never]]> = (
 
 //  ===============  persist 本地缓存中间件配置 ============ //
 
-type SessionPersist = Pick<SessionStore, 'sessions' | 'inbox'>;
-
 const LOBE_CHAT = 'LOBE_CHAT';
 
-const persistOptions: PersistOptions<SessionStore, SessionPersist> = {
+const persistOptions: PersistOptions<SessionStore> = {
   name: LOBE_CHAT,
 
-  partialize: (s) => ({
-    inbox: s.inbox,
-    sessions: s.sessions,
-  }),
-
   // 手动控制 Hydration ，避免 ssr 报错
   skipHydration: true,
+
+  storage: createHyperStorage({
+    localStorage: {
+      selectors: ['inbox', 'sessions'],
+    },
+    url: {
+      mode: 'hash',
+      selectors: [
+        // map state key to storage key
+        { activeId: 'session' },
+        { activeTopicId: 'topic' },
+      ],
+    },
+  }),
   version: 0,
 };
 

package/src/types/openai.ts

@@ -68,3 +68,26 @@ export interface OpenAIStreamPayload {
    */
   top_p?: number;
 }
+
+export interface ChatCompletionFunctions {
+  /**
+   * The description of what the function does.
+   * @type {string}
+   * @memberof ChatCompletionFunctions
+   */
+  description?: string;
+  /**
+   * The name of the function to be called. Must be a-z, A-Z, 0-9, or contain underscores and dashes, with a maximum length of 64.
+   * @type {string}
+   * @memberof ChatCompletionFunctions
+   */
+  name: string;
+  /**
+   * The parameters the functions accepts, described as a JSON Schema object. See the [guide](/docs/guides/gpt/function-calling) for examples, and the [JSON Schema reference](https://json-schema.org/understanding-json-schema/) for documentation about the format.
+   * @type {{ [key: string]: any }}
+   * @memberof ChatCompletionFunctions
+   */
+  parameters?: {
+    [key: string]: any;
+  };
+}

package/src/pages/chat/[id]/layout.tsx

@@ -1,34 +0,0 @@
-import { useRouter } from 'next/router';
-import { PropsWithChildren, memo } from 'react';
-import { shallow } from 'zustand/shallow';
-
-import { usePluginStore } from '@/store/plugin';
-import { useOnFinishHydrationSession, useSessionStore } from '@/store/session';
-
-import ChatLayout from '../layout';
-
-const Layout = memo<PropsWithChildren>(({ children }) => {
-  const useFetchPluginList = usePluginStore((s) => s.useFetchPluginList);
-  const [activeSession, toggleTopic] = useSessionStore((s) => {
-    return [s.activeSession, s.toggleTopic];
-  }, shallow);
-
-  const router = useRouter();
-  const { id } = router.query;
-
-  useOnFinishHydrationSession(() => {
-    // 1. 正常激活会话
-    if (typeof id === 'string') {
-      activeSession(id);
-    }
-
-    // 将话题重置为默认值
-    toggleTopic();
-  }, [id]);
-
-  useFetchPluginList();
-
-  return <ChatLayout>{children}</ChatLayout>;
-});
-
-export default Layout;

package/src/pages/chat/[id]/mobile.tsx

@@ -1,31 +0,0 @@
-import { useRouter } from 'next/router';
-import { PropsWithChildren, memo } from 'react';
-import { shallow } from 'zustand/shallow';
-
-import AppMobileLayout from '@/layout/AppMobileLayout';
-import { useOnFinishHydrationSession, useSessionStore } from '@/store/session';
-
-import Header from '../features/Header';
-
-const MobileLayout = memo<PropsWithChildren>(({ children }) => {
-  const [activeSession, toggleTopic] = useSessionStore((s) => {
-    return [s.activeSession, s.toggleTopic];
-  }, shallow);
-
-  const router = useRouter();
-  const { id } = router.query;
-
-  useOnFinishHydrationSession(() => {
-    // 1. 正常激活会话
-    if (typeof id === 'string') {
-      activeSession(id);
-    }
-
-    // 将话题重置为默认值
-    toggleTopic();
-  }, [id]);
-
-  return <AppMobileLayout navBar={<Header />}>{children}</AppMobileLayout>;
-});
-
-export default MobileLayout;

package/src/store/middleware/createHashStorage.ts

@@ -1,49 +0,0 @@
-import { isEmpty } from 'lodash-es';
-import { PersistStorage } from 'zustand/middleware';
-
-import { Compressor } from '@/utils/compass';
-
-export const createHashStorage = <T extends object>(): PersistStorage<T> => {
-  return {
-    getItem: async () => {
-      const searchParameters = new URLSearchParams(location.hash.slice(1));
-      const state: any = {};
-      const pool = [...searchParameters.entries()].map(async ([k, v]) => {
-        const string_ = await Compressor.decompressAsync(v);
-
-        try {
-          state[k] = JSON.parse(string_);
-        } catch {
-          state[k] = string_;
-        }
-      });
-
-      await Promise.all(pool);
-
-      return { state } as any;
-    },
-    removeItem: (key): void => {
-      const searchParameters = new URLSearchParams(location.hash.slice(1));
-      searchParameters.delete(key);
-      location.hash = searchParameters.toString();
-    },
-    setItem: async (_, newValue) => {
-      const searchParameters = new URLSearchParams(location.hash.slice(1));
-
-      const pool = Object.entries(newValue.state).map(async ([k, v]) => {
-        if (isEmpty(v)) {
-          searchParameters.delete(k);
-          return;
-        }
-        if (typeof v === 'string') {
-          searchParameters.set(k, await Compressor.compressAsync(v));
-        } else {
-          searchParameters.set(k, await Compressor.compressAsync(JSON.stringify(v)));
-        }
-      });
-      await Promise.all(pool);
-
-      location.hash = searchParameters.toString();
-    },
-  };
-};