@lobehub/chat 0.148.2 → 0.148.4

package/src/features/Conversation/Error/InvalidOllamaModel/index.tsx

@@ -10,7 +10,7 @@ import { ollamaService } from '@/services/ollama';
 import { useChatStore } from '@/store/chat';
 
 import { ErrorActionContainer, FormAction } from '../style';
-import { useDownloadMonitor } from './useDownloadMonitor';
+import { formatSize, useDownloadMonitor } from './useDownloadMonitor';
 
 interface OllamaModelFormProps {
   id: string;
@@ -61,12 +61,12 @@ const OllamaModelForm = memo<OllamaModelFormProps>(({ id, model }) => {
       <FormAction
         avatar={<Ollama color={theme.colorPrimary} size={64} />}
         description={
-          isDownloading ? settingT('ollama.download.desc') : t('unlock.model.Ollama.description')
+          isDownloading ? settingT('ollama.download.desc') : t('unlock.ollama.description')
         }
         title={
           isDownloading
             ? settingT('ollama.download.title', { model: modelToPull })
-            : t('unlock.model.Ollama.title')
+            : t('unlock.ollama.title')
         }
       >
         {!isDownloading && (
@@ -110,15 +110,33 @@ const OllamaModelForm = memo<OllamaModelFormProps>(({ id, model }) => {
           style={{ marginTop: 8 }}
           type={'primary'}
         >
-          {t('unlock.model.Ollama.confirm')}
-        </Button>
-        <Button
-          onClick={() => {
-            deleteMessage(id);
-          }}
-        >
-          {t('unlock.closeMessage')}
+          {!isDownloading
+            ? t('unlock.ollama.confirm')
+            : // if total is 0, show starting, else show downloaded
+              !total
+              ? t('unlock.ollama.starting')
+              : t('unlock.ollama.downloaded', {
+                  completed: formatSize(completed),
+                  total: formatSize(total),
+                })}
         </Button>
+        {isDownloading ? (
+          <Button
+            onClick={() => {
+              ollamaService.abort();
+            }}
+          >
+            {t('unlock.ollama.cancel')}
+          </Button>
+        ) : (
+          <Button
+            onClick={() => {
+              deleteMessage(id);
+            }}
+          >
+            {t('unlock.closeMessage')}
+          </Button>
+        )}
       </Flexbox>
     </Center>
   );

package/src/features/Conversation/Error/InvalidOllamaModel/useDownloadMonitor.ts

@@ -1,15 +1,22 @@
-import { useEffect, useMemo, useState } from 'react';
-
-const formatSpeed = (speed: number): string => {
-  const kbPerSecond = speed / 1024;
-  if (kbPerSecond < 1024) {
-    return `${kbPerSecond.toFixed(1)} KB/s`;
+import { useEffect, useRef, useState } from 'react';
+
+export const formatSize = (bytes: number): string => {
+  const kbSize = bytes / 1024;
+  if (kbSize < 1024) {
+    return `${kbSize.toFixed(1)} KB`;
+  } else if (kbSize < 1_048_576) {
+    const mbSize = kbSize / 1024;
+    return `${mbSize.toFixed(1)} MB`;
   } else {
-    const mbPerSecond = kbPerSecond / 1024;
-    return `${mbPerSecond.toFixed(1)} MB/s`;
+    const gbSize = kbSize / 1_048_576;
+    return `${gbSize.toFixed(1)} GB`;
   }
 };
 
+const formatSpeed = (speed: number): string => {
+  return `${formatSize(speed)}/s`;
+};
+
 const formatTime = (timeInSeconds: number): string => {
   if (timeInSeconds < 60) {
     return `${timeInSeconds.toFixed(1)} s`;
@@ -21,28 +28,27 @@ const formatTime = (timeInSeconds: number): string => {
 };
 
 export const useDownloadMonitor = (totalSize: number, completedSize: number) => {
-  const [startTime, setStartTime] = useState<number>(Date.now());
   const [downloadSpeed, setDownloadSpeed] = useState<string>('0 KB/s');
   const [remainingTime, setRemainingTime] = useState<string>('-');
 
-  const isReady = useMemo(() => completedSize > 0, [completedSize]);
+  const lastCompletedRef = useRef(completedSize);
+  const lastTimedRef = useRef(Date.now());
 
   useEffect(() => {
     const currentTime = Date.now();
-    // mark as start download
-    if (isReady) {
-      const elapsedTime = (currentTime - startTime) / 1000; // in seconds
-      const speed = completedSize / elapsedTime; // in bytes per second
+    const elapsedTime = (currentTime - lastTimedRef.current) / 1000; // in seconds
+    if (completedSize > 0 && elapsedTime > 1) {
+      const speed = Math.max(0, (completedSize - lastCompletedRef.current) / elapsedTime); // in bytes per second
+      setDownloadSpeed(formatSpeed(speed));
 
       const remainingSize = totalSize - completedSize;
       const time = remainingSize / speed; // in seconds
-
-      setDownloadSpeed(formatSpeed(speed));
       setRemainingTime(formatTime(time));
-    } else {
-      setStartTime(currentTime);
+
+      lastCompletedRef.current = completedSize;
+      lastTimedRef.current = currentTime;
     }
-  }, [isReady, completedSize]);
+  }, [completedSize]);
 
   return { downloadSpeed, remainingTime };
 };

package/src/layout/GlobalProvider/StoreInitialization.tsx

@@ -0,0 +1,45 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+import { memo, useEffect } from 'react';
+import { createStoreUpdater } from 'zustand-utils';
+
+import { useIsMobile } from '@/hooks/useIsMobile';
+import { useEnabledDataSync } from '@/hooks/useSyncData';
+import { useGlobalStore } from '@/store/global';
+
+const StoreInitialization = memo(() => {
+  const [useFetchServerConfig, useFetchUserConfig, useInitPreference] = useGlobalStore((s) => [
+    s.useFetchServerConfig,
+    s.useFetchUserConfig,
+    s.useInitPreference,
+  ]);
+  // init the system preference
+  useInitPreference();
+
+  const { isLoading } = useFetchServerConfig();
+  useFetchUserConfig(!isLoading);
+
+  useEnabledDataSync();
+
+  const useStoreUpdater = createStoreUpdater(useGlobalStore);
+
+  const mobile = useIsMobile();
+  const router = useRouter();
+
+  useStoreUpdater('isMobile', mobile);
+  useStoreUpdater('router', router);
+
+  useEffect(() => {
+    router.prefetch('/chat');
+    router.prefetch('/chat/settings');
+    router.prefetch('/market');
+    router.prefetch('/settings/common');
+    router.prefetch('/settings/agent');
+    router.prefetch('/settings/sync');
+  }, [router]);
+
+  return null;
+});
+
+export default StoreInitialization;

package/src/layout/GlobalProvider/index.tsx

@@ -13,7 +13,7 @@ import { getAntdLocale } from '@/utils/locale';
 
 import AppTheme from './AppTheme';
 import Locale from './Locale';
-import StoreHydration from './StoreHydration';
+import StoreInitialization from './StoreInitialization';
 import StyleRegistry from './StyleRegistry';
 
 let DebugUI: FC = () => null;
@@ -50,7 +50,7 @@ const GlobalLayout = async ({ children }: GlobalLayoutProps) => {
           defaultNeutralColor={neutralColor?.value as any}
           defaultPrimaryColor={primaryColor?.value as any}
         >
-          <StoreHydration />
+          <StoreInitialization />
           {children}
           <DebugUI />
         </AppTheme>

package/src/locales/default/error.ts

@@ -111,19 +111,20 @@ export default {
     addProxyUrl: '添加 OpenAI 代理地址（可选）',
     closeMessage: '关闭提示',
     confirm: '确认并重试',
-    model: {
-      Ollama: {
-        confirm: '下载',
-        description: '输入你的 Ollama 模型标签，完成即可继续会话',
-        title: '下载指定的 Ollama 模型',
-      },
-    },
     oauth: {
       description: '管理员已开启统一登录认证，点击下方按钮登录，即可解锁应用',
       success: '登录成功',
       title: '登录账号',
       welcome: '欢迎你！',
     },
+    ollama: {
+      cancel: '取消下载',
+      confirm: '下载',
+      description: '输入你的 Ollama 模型标签，完成即可继续会话',
+      downloaded: '{{completed}} / {{total}}',
+      starting: '开始下载...',
+      title: '下载指定的 Ollama 模型',
+    },
     password: {
       description: '管理员已开启应用加密，输入应用密码后即可解锁应用。密码只需填写一次',
       placeholder: '请输入密码',

package/src/services/__tests__/ollama.test.ts

@@ -1,9 +1,11 @@
 import { Mock, describe, expect, it, vi } from 'vitest';
 
-import { ollamaService } from '../ollama';
+import { OllamaService } from '../ollama';
 
 vi.stubGlobal('fetch', vi.fn());
 
+const ollamaService = new OllamaService({ fetch });
+
 describe('OllamaService', () => {
   describe('list models', async () => {
     it('should make a GET request with the correct payload', async () => {
@@ -11,7 +13,7 @@ describe('OllamaService', () => {
 
       expect(await ollamaService.getModels()).toEqual({ models: [] });
 
-      expect(global.fetch).toHaveBeenCalled();
+      expect(fetch).toHaveBeenCalled();
     });
 
     it('should make a GET request with the error', async () => {
@@ -20,7 +22,7 @@ describe('OllamaService', () => {
 
       await expect(ollamaService.getModels()).rejects.toThrow();
 
-      expect(global.fetch).toHaveBeenCalled();
+      expect(fetch).toHaveBeenCalled();
     });
   });
 });

package/src/services/ollama.ts

@@ -9,7 +9,21 @@ import { getMessageError } from '@/utils/fetch';
 
 const DEFAULT_BASE_URL = 'http://127.0.0.1:11434/v1';
 
-class OllamaService {
+interface OllamaServiceParams {
+  fetch?: typeof fetch;
+}
+
+export class OllamaService {
+  private _host: string;
+  private _client: OllamaBrowser;
+  private _fetch?: typeof fetch;
+
+  constructor(params: OllamaServiceParams = {}) {
+    this._host = this.getHost();
+    this._fetch = params.fetch;
+    this._client = new OllamaBrowser({ fetch: params?.fetch, host: this._host });
+  }
+
   getHost = (): string => {
     const config = modelConfigSelectors.ollamaConfig(useGlobalStore.getState());
 
@@ -18,7 +32,15 @@ class OllamaService {
   };
 
   getOllamaClient = () => {
-    return new OllamaBrowser({ host: this.getHost() });
+    if (this.getHost() !== this._host) {
+      this._host = this.getHost();
+      this._client = new OllamaBrowser({ fetch: this._fetch, host: this.getHost() });
+    }
+    return this._client;
+  };
+
+  abort = () => {
+    this._client.abort();
   };
 
   pullModel = async (model: string): Promise<AsyncGenerator<ProgressResponse>> => {

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

@@ -147,7 +147,7 @@ export const createCommonSlice: StateCreator<
       },
       {
         onSuccess: (syncEnabled) => {
-          set({ syncEnabled });
+          set({ syncEnabled }, false, n('useEnabledSync'));
         },
         revalidateOnFocus: false,
       },
@@ -165,7 +165,7 @@ export const createCommonSlice: StateCreator<
 
           set({ defaultSettings, serverConfig: data }, false, n('initGlobalConfig'));
 
-          get().refreshDefaultModelProviderList();
+          get().refreshDefaultModelProviderList({ trigger: 'fetchServerConfig' });
         }
       },
       revalidateOnFocus: false,
@@ -188,7 +188,7 @@ export const createCommonSlice: StateCreator<
           );
 
           // when get the user config ,refresh the model provider list to the latest
-          get().refreshModelProviderList();
+          get().refreshDefaultModelProviderList({ trigger: 'fetchUserConfig' });
 
           const { language } = settingsSelectors.currentSettings(get());
           if (language === 'auto') {

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

@@ -1,11 +1,13 @@
 import { produce } from 'immer';
+import { SWRResponse } from 'swr';
 import type { StateCreator } from 'zustand/vanilla';
 
+import { useClientDataSWR } from '@/libs/swr';
 import type { GlobalStore } from '@/store/global';
 import { merge } from '@/utils/merge';
 import { setNamespace } from '@/utils/storeDebug';
 
-import type { GlobalPreference, GlobalPreferenceState, Guide } from './initialState';
+import type { GlobalPreference, Guide } from './initialState';
 
 const n = setNamespace('preference');
 
@@ -18,7 +20,8 @@ export interface PreferenceAction {
   toggleMobileTopic: (visible?: boolean) => void;
   toggleSystemRole: (visible?: boolean) => void;
   updateGuideState: (guide: Partial<Guide>) => void;
-  updatePreference: (preference: Partial<GlobalPreference>, action?: string) => void;
+  updatePreference: (preference: Partial<GlobalPreference>, action?: any) => void;
+  useInitPreference: () => SWRResponse;
 }
 
 export const createPreferenceSlice: StateCreator<
@@ -31,7 +34,7 @@ export const createPreferenceSlice: StateCreator<
     const showChatSideBar =
       typeof newValue === 'boolean' ? newValue : !get().preference.showChatSideBar;
 
-    get().updatePreference({ showChatSideBar }, n('toggleAgentPanel', newValue) as string);
+    get().updatePreference({ showChatSideBar }, n('toggleAgentPanel', newValue));
   },
   toggleExpandSessionGroup: (id, expand) => {
     const { preference } = get();
@@ -50,13 +53,13 @@ export const createPreferenceSlice: StateCreator<
     const mobileShowTopic =
       typeof newValue === 'boolean' ? newValue : !get().preference.mobileShowTopic;
 
-    get().updatePreference({ mobileShowTopic }, n('toggleMobileTopic', newValue) as string);
+    get().updatePreference({ mobileShowTopic }, n('toggleMobileTopic', newValue));
   },
   toggleSystemRole: (newValue) => {
     const showSystemRole =
       typeof newValue === 'boolean' ? newValue : !get().preference.mobileShowTopic;
 
-    get().updatePreference({ showSystemRole }, n('toggleMobileTopic', newValue) as string);
+    get().updatePreference({ showSystemRole }, n('toggleMobileTopic', newValue));
   },
   updateGuideState: (guide) => {
     const { updatePreference } = get();
@@ -64,12 +67,23 @@ export const createPreferenceSlice: StateCreator<
     updatePreference({ guide: nextGuide });
   },
   updatePreference: (preference, action) => {
-    set(
-      produce((draft: GlobalPreferenceState) => {
-        draft.preference = merge(draft.preference, preference);
-      }),
-      false,
-      action,
-    );
+    const nextPreference = merge(get().preference, preference);
+
+    set({ preference: nextPreference }, false, action || n('updatePreference'));
+
+    get().preferenceStorage.saveToLocalStorage(nextPreference);
   },
+
+  useInitPreference: () =>
+    useClientDataSWR<GlobalPreference>(
+      'preference',
+      () => get().preferenceStorage.getFromLocalStorage(),
+      {
+        onSuccess: (preference) => {
+          if (preference) {
+            set({ preference }, false, n('initPreference'));
+          }
+        },
+      },
+    ),
 });

package/src/store/global/slices/preference/initialState.ts

@@ -1,4 +1,5 @@
 import { SessionDefaultGroup, SessionGroupId } from '@/types/session';
+import { AsyncLocalStorage } from '@/utils/localStorage';
 
 export interface Guide {
   // Topic 引导
@@ -18,6 +19,7 @@ export interface GlobalPreference {
   showSessionPanel?: boolean;
   showSystemRole?: boolean;
   telemetry: boolean | null;
+
   /**
    * whether to use cmd + enter to send message
    */
@@ -26,10 +28,10 @@ export interface GlobalPreference {
 
 export interface GlobalPreferenceState {
   /**
-   *  用户偏好的 UI 状态
-   *  @localStorage
+   * the user preference, which only store in local storage
    */
   preference: GlobalPreference;
+  preferenceStorage: AsyncLocalStorage<GlobalPreference>;
 }
 
 export const initialPreferenceState: GlobalPreferenceState = {
@@ -45,4 +47,5 @@ export const initialPreferenceState: GlobalPreferenceState = {
     telemetry: null,
     useCmdEnterToSend: false,
   },
+  preferenceStorage: new AsyncLocalStorage('LOBE_PREFERENCE'),
 };

package/src/store/global/slices/settings/actions/llm.ts

@@ -20,11 +20,14 @@ import {
 import { GlobalStore } from '@/store/global';
 import { ChatModelCard } from '@/types/llm';
 import { GlobalLLMConfig, GlobalLLMProviderKey } from '@/types/settings';
+import { setNamespace } from '@/utils/storeDebug';
 
 import { CustomModelCardDispatch, customModelCardsReducer } from '../reducers/customModelCard';
 import { modelProviderSelectors } from '../selectors/modelProvider';
 import { settingsSelectors } from '../selectors/settings';
 
+const n = setNamespace('settings');
+
 /**
  * 设置操作
  */
@@ -36,8 +39,8 @@ export interface LLMSettingsAction {
   /**
    * make sure the default model provider list is sync to latest state
    */
-  refreshDefaultModelProviderList: () => void;
-  refreshModelProviderList: () => void;
+  refreshDefaultModelProviderList: (params?: { trigger?: string }) => void;
+  refreshModelProviderList: (params?: { trigger?: string }) => void;
   removeEnabledModels: (provider: GlobalLLMProviderKey, model: string) => Promise<void>;
   setModelProviderConfig: <T extends GlobalLLMProviderKey>(
     provider: T,
@@ -69,7 +72,7 @@ export const llmSettingsSlice: StateCreator<
     await get().setModelProviderConfig(provider, { customModelCards: nextState });
   },
 
-  refreshDefaultModelProviderList: () => {
+  refreshDefaultModelProviderList: (params) => {
     /**
      * Because we have several model cards sources, we need to merge the model cards
      * the priority is below:
@@ -113,12 +116,12 @@ export const llmSettingsSlice: StateCreator<
       ZhiPuProviderCard,
     ];
 
-    set({ defaultModelProviderList }, false, 'refreshDefaultModelProviderList');
+    set({ defaultModelProviderList }, false, n(`refreshDefaultModelList - ${params?.trigger}`));
 
-    get().refreshModelProviderList();
+    get().refreshModelProviderList({ trigger: 'refreshDefaultModelList' });
   },
 
-  refreshModelProviderList: () => {
+  refreshModelProviderList: (params) => {
     const modelProviderList = get().defaultModelProviderList.map((list) => ({
       ...list,
       chatModels: modelProviderSelectors
@@ -136,7 +139,7 @@ export const llmSettingsSlice: StateCreator<
       enabled: modelProviderSelectors.isProviderEnabled(list.id as any)(get()),
     }));
 
-    set({ modelProviderList }, false, 'refreshModelProviderList');
+    set({ modelProviderList }, false, n(`refreshModelList - ${params?.trigger}`));
   },
 
   removeEnabledModels: async (provider, model) => {

package/src/store/global/store.ts

@@ -1,11 +1,10 @@
-import { PersistOptions, devtools, persist, subscribeWithSelector } from 'zustand/middleware';
+import { devtools, subscribeWithSelector } from 'zustand/middleware';
 import { shallow } from 'zustand/shallow';
 import { createWithEqualityFn } from 'zustand/traditional';
 import { StateCreator } from 'zustand/vanilla';
 
 import { isDev } from '@/utils/env';
 
-import { createHyperStorage } from '../middleware/createHyperStorage';
 import { type GlobalState, initialState } from './initialState';
 import { type CommonAction, createCommonSlice } from './slices/common/action';
 import { type PreferenceAction, createPreferenceSlice } from './slices/preference/action';
@@ -22,32 +21,13 @@ const createStore: StateCreator<GlobalStore, [['zustand/devtools', never]]> = (.
   ...createPreferenceSlice(...parameters),
 });
 
-//  ===============  persist 本地缓存中间件配置 ============ //
-type GlobalPersist = Pick<GlobalStore, 'preference' | 'settings'>;
-
-const persistOptions: PersistOptions<GlobalStore, GlobalPersist> = {
-  name: 'LOBE_GLOBAL',
-
-  skipHydration: true,
-
-  storage: createHyperStorage({
-    localStorage: {
-      dbName: 'LobeHub',
-      selectors: ['preference'],
-    },
-  }),
-};
-
 //  ===============  实装 useStore ============ //
 
 export const useGlobalStore = createWithEqualityFn<GlobalStore>()(
-  persist(
-    subscribeWithSelector(
-      devtools(createStore, {
-        name: 'LobeChat_Global' + (isDev ? '_DEV' : ''),
-      }),
-    ),
-    persistOptions,
+  subscribeWithSelector(
+    devtools(createStore, {
+      name: 'LobeChat_Global' + (isDev ? '_DEV' : ''),
+    }),
   ),
   shallow,
 );

package/src/utils/localStorage.ts

@@ -0,0 +1,36 @@
+const PREV_KEY = 'LOBE_GLOBAL';
+
+type StorageKey = 'LOBE_PREFERENCE';
+
+export class AsyncLocalStorage<State> {
+  private storageKey: StorageKey;
+
+  constructor(storageKey: StorageKey) {
+    this.storageKey = storageKey;
+
+    // skip server side rendering
+    if (typeof window === 'undefined') return;
+
+    // migrate old data
+    if (localStorage.getItem(PREV_KEY)) {
+      const data = JSON.parse(localStorage.getItem(PREV_KEY) || '{}');
+
+      const preference = data.state.preference;
+
+      if (data.state?.preference) {
+        localStorage.setItem('LOBE_PREFERENCE', JSON.stringify(preference));
+      }
+      localStorage.removeItem(PREV_KEY);
+    }
+  }
+
+  async saveToLocalStorage(state: object) {
+    const data = await this.getFromLocalStorage();
+
+    localStorage.setItem(this.storageKey, JSON.stringify({ ...data, ...state }));
+  }
+
+  async getFromLocalStorage(key: StorageKey = this.storageKey): Promise<State> {
+    return JSON.parse(localStorage.getItem(key) || '{}');
+  }
+}

package/src/layout/GlobalProvider/StoreHydration.tsx

@@ -1,61 +0,0 @@
-'use client';
-
-import { useResponsive } from 'antd-style';
-import { useRouter } from 'next/navigation';
-import { memo, useEffect } from 'react';
-
-import { useEnabledDataSync } from '@/hooks/useSyncData';
-import { useGlobalStore } from '@/store/global';
-import { useEffectAfterGlobalHydrated } from '@/store/global/hooks/useEffectAfterHydrated';
-
-const StoreHydration = memo(() => {
-  const [useFetchServerConfig, useFetchUserConfig] = useGlobalStore((s) => [
-    s.useFetchServerConfig,
-    s.useFetchUserConfig,
-  ]);
-
-  const { isLoading } = useFetchServerConfig();
-
-  useFetchUserConfig(!isLoading);
-
-  useEnabledDataSync();
-
-  useEffect(() => {
-    // refs: https://github.com/pmndrs/zustand/blob/main/docs/integrations/persisting-store-data.md#hashydrated
-    useGlobalStore.persist.rehydrate();
-  }, []);
-
-  const { mobile } = useResponsive();
-  useEffectAfterGlobalHydrated(
-    (store) => {
-      const prevState = store.getState().isMobile;
-
-      if (prevState !== mobile) {
-        store.setState({ isMobile: mobile });
-      }
-    },
-    [mobile],
-  );
-
-  const router = useRouter();
-
-  useEffectAfterGlobalHydrated(
-    (store) => {
-      store.setState({ router });
-    },
-    [router],
-  );
-
-  useEffect(() => {
-    router.prefetch('/chat');
-    router.prefetch('/chat/settings');
-    router.prefetch('/market');
-    router.prefetch('/settings/common');
-    router.prefetch('/settings/agent');
-    router.prefetch('/settings/sync');
-  }, [router]);
-
-  return null;
-});
-
-export default StoreHydration;

package/src/store/global/hooks/useEffectAfterHydrated.ts

@@ -1,22 +0,0 @@
-import { useEffect } from 'react';
-
-import { useGlobalStore } from '../store';
-
-export const useEffectAfterGlobalHydrated = (
-  fn: (store: typeof useGlobalStore) => void,
-  deps: any[] = [],
-) => {
-  useEffect(() => {
-    const hasRehydrated = useGlobalStore.persist.hasHydrated();
-
-    if (hasRehydrated) {
-      // 等价 useEffect 多次触发
-      fn(useGlobalStore);
-    } else {
-      // 等价于 useEffect 第一次触发
-      useGlobalStore.persist.onFinishHydration(() => {
-        fn(useGlobalStore);
-      });
-    }
-  }, deps);
-};