✨ feat: import settings from url

src/const/url.ts

@@ -43,5 +43,6 @@ export const SESSION_CHAT_URL = (id: string = INBOX_SESSION_ID, mobile?: boolean
 
 export const imageUrl = (filename: string) => withBasePath(`/images/${filename}`);
 
+export const LOBE_URL_IMPORT_NAME = 'settings';
 export const EMAIL_SUPPORT = 'support@lobehub.com';
 export const EMAIL_BUSINESS = 'hello@lobehub.com';

src/hooks/useImportConfig.ts

@@ -1,13 +1,16 @@
 import { useMemo } from 'react';
 
 import { ImportResults, configService } from '@/services/config';
+import { shareGPTService } from '@/services/share';
 import { useChatStore } from '@/store/chat';
 import { useSessionStore } from '@/store/session';
 import { importConfigFile } from '@/utils/config';
+import { useUserStore } from '@/store/user';
 
 export const useImportConfig = () => {
   const refreshSessions = useSessionStore((s) => s.refreshSessions);
   const [refreshMessages, refreshTopics] = useChatStore((s) => [s.refreshMessages, s.refreshTopic]);
+  const [setSettings] = useUserStore((s)=>[s.setSettings]);
 
   const importConfig = async (file: File) =>
     new Promise<ImportResults | undefined>((resolve) => {
@@ -22,5 +25,21 @@ export const useImportConfig = () => {
       });
     });
 
-  return useMemo(() => ({ importConfig }), []);
+  /**
+   * Import settings from a string in json format
+   * @param settingsParams
+   * @returns
+   */
+  const importSettings = (settingsParams: string | null) => {
+    if (settingsParams) {
+      const importSettings = shareGPTService.decodeShareSettings(settingsParams);
+      if (importSettings?.message || !importSettings?.data) {
+        // handle some error
+        return;
+      }
+      setSettings(importSettings.data);
+    }
+  };
+
+  return useMemo(() => ({ importConfig, importSettings }), []);
 };

src/hooks/useSTT.ts

@@ -0,0 +1,62 @@
+import { getRecordMineType } from '@lobehub/tts';
+import {
+  OpenAISTTOptions,
+  SpeechRecognitionOptions,
+  useOpenAISTT,
+  useSpeechRecognition,
+} from '@lobehub/tts/react';
+import isEqual from 'fast-deep-equal';
+import { SWRConfiguration } from 'swr';
+
+import { createHeaderWithOpenAI } from '@/services/_header';
+import { API_ENDPOINTS } from '@/services/_url';
+import { useGlobalStore } from '@/store/global';
+import { settingsSelectors } from '@/store/global/selectors';
+import { useSessionStore } from '@/store/session';
+import { agentSelectors } from '@/store/session/selectors';
+
+interface STTConfig extends SWRConfiguration {
+  onTextChange: (value: string) => void;
+}
+
+export const useOpenaiSTT = (config: STTConfig) => {
+  const ttsSettings = useGlobalStore(settingsSelectors.currentTTS, isEqual);
+  const ttsAgentSettings = useSessionStore(agentSelectors.currentAgentTTS, isEqual);
+  const locale = useGlobalStore(settingsSelectors.currentLanguage);
+
+  const autoStop = ttsSettings.sttAutoStop;
+  const sttLocale =
+    ttsAgentSettings?.sttLocale && ttsAgentSettings.sttLocale !== 'auto'
+      ? ttsAgentSettings.sttLocale
+      : locale;
+
+  return useOpenAISTT(sttLocale, {
+        ...config,
+        api: {
+          headers: createHeaderWithOpenAI(),
+          serviceUrl: API_ENDPOINTS.stt,
+        },
+        autoStop,
+        options: {
+          mineType: getRecordMineType(),
+          model: ttsSettings.openAI.sttModel,
+        },
+      } as OpenAISTTOptions)
+}
+
+export const useBrowserSTT = (config: STTConfig) => {
+  const ttsSettings = useGlobalStore(settingsSelectors.currentTTS, isEqual);
+  const ttsAgentSettings = useSessionStore(agentSelectors.currentAgentTTS, isEqual);
+  const locale = useGlobalStore(settingsSelectors.currentLanguage);
+
+  const autoStop = ttsSettings.sttAutoStop;
+  const sttLocale =
+    ttsAgentSettings?.sttLocale && ttsAgentSettings.sttLocale !== 'auto'
+      ? ttsAgentSettings.sttLocale
+      : locale;
+
+  return useSpeechRecognition(sttLocale, {
+        ...config,
+        autoStop,
+      } as SpeechRecognitionOptions)
+} 

src/layout/GlobalProvider/StoreInitialization.tsx

@@ -1,9 +1,11 @@
 'use client';
 
-import { useRouter } from 'next/navigation';
+import { useRouter, useSearchParams } from 'next/navigation';
 import { memo, useEffect } from 'react';
 import { createStoreUpdater } from 'zustand-utils';
 
+import { LOBE_URL_IMPORT_NAME } from '@/const/url';
+import { useImportConfig } from '@/hooks/useImportConfig';
 import { useIsMobile } from '@/hooks/useIsMobile';
 import { useEnabledDataSync } from '@/hooks/useSyncData';
 import { useAgentStore } from '@/store/agent';
@@ -38,6 +40,13 @@ const StoreInitialization = memo(() => {
   useStoreUpdater('isMobile', mobile);
   useStoreUpdater('router', router);
 
+  // Import settings from the url
+  const { importSettings } = useImportConfig();
+  const searchParam = useSearchParams().get(LOBE_URL_IMPORT_NAME);
+  useEffect(() => {
+    importSettings(searchParam);
+  }, [searchParam]);
+
   useEffect(() => {
     router.prefetch('/chat');
     router.prefetch('/chat/settings');

src/services/__tests__/share.test.ts

@@ -1,5 +1,8 @@
+import { DeepPartial } from 'utility-types';
 import { Mock, afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
+import { LOBE_URL_IMPORT_NAME } from '@/const/url';
+import { GlobalSettings } from '@/types/settings';
 import { ShareGPTConversation } from '@/types/share';
 import { parseMarkdown } from '@/utils/parseMarkdown';
 
@@ -84,3 +87,45 @@ describe('ShareGPTService', () => {
     await expect(shareGPTService.createShareGPTUrl(conversation)).rejects.toThrow();
   });
 });
+
+describe('ShareViaUrl', () => {
+  describe('createShareSettingsUrl', () => {
+    it('should create a share settings URL with the provided settings', () => {
+      const settings: DeepPartial<GlobalSettings> = {
+        languageModel: {
+          openai: {
+            apiKey: 'user-key',
+          },
+        },
+      };
+      const url = shareGPTService.createShareSettingsUrl(settings);
+      expect(url).toBe(
+        `/?${LOBE_URL_IMPORT_NAME}=%7B%22languageModel%22:%7B%22openai%22:%7B%22apiKey%22:%22user-key%22%7D%7D%7D`,
+      );
+    });
+  });
+
+  describe('decodeShareSettings', () => {
+    it('should decode share settings from search params', () => {
+      const settings = '{"languageModel":{"openai":{"apiKey":"user-key"}}}';
+      const decodedSettings = shareGPTService.decodeShareSettings(settings);
+      expect(decodedSettings).toEqual({
+        data: {
+          languageModel: {
+            openai: {
+              apiKey: 'user-key',
+            },
+          },
+        },
+      });
+    });
+
+    it('should return an error message if decoding fails', () => {
+      const settings = '%7B%22theme%22%3A%22dark%22%2C%22fontSize%22%3A16%';
+      const decodedSettings = shareGPTService.decodeShareSettings(settings);
+      expect(decodedSettings).toEqual({
+        message: expect.any(String),
+      });
+    });
+  });
+});

src/services/share.ts

@@ -1,4 +1,9 @@
+import { DeepPartial } from 'utility-types';
+
+import { LOBE_URL_IMPORT_NAME } from '@/const/url';
+import { GlobalSettings } from '@/types/settings';
 import { ShareGPTConversation } from '@/types/share';
+import { withBasePath } from '@/utils/basePath';
 import { parseMarkdown } from '@/utils/parseMarkdown';
 
 export const SHARE_GPT_URL = 'https://sharegpt.com/api/conversations';
@@ -29,6 +34,28 @@ class ShareGPTService {
     // short link to the ShareGPT post
     return `https://shareg.pt/${id}`;
   }
+
+  /**
+   * Creates a share settings URL with the provided settings.
+   * @param settings - The settings object to be encoded in the URL.
+   * @returns The share settings URL.
+   */
+  public createShareSettingsUrl(settings: DeepPartial<GlobalSettings>) {
+    return withBasePath(`/?${LOBE_URL_IMPORT_NAME}=${encodeURI(JSON.stringify(settings))}`);
+  }
+
+  /**
+   * Decode share settings from search params
+   * @param settings
+   * @returns
+   */
+  public decodeShareSettings(settings: string) {
+    try {
+      return { data: JSON.parse(settings) as DeepPartial<GlobalSettings> };
+    } catch (e) {
+      return { message: JSON.stringify(e) };
+    }
+  }
 }
 
 export const shareGPTService = new ShareGPTService();