@lobehub/chat 0.140.1 → 0.141.0

package/src/store/chat/slices/topic/action.ts

@@ -9,6 +9,7 @@ import { StateCreator } from 'zustand/vanilla';
 import { chainSummaryTitle } from '@/chains/summaryTitle';
 import { LOADING_FLAT } from '@/const/message';
 import { TraceNameMap } from '@/const/trace';
+import { useClientDataSWR } from '@/libs/swr';
 import { chatService } from '@/services/chat';
 import { messageService } from '@/services/message';
 import { topicService } from '@/services/topic';
@@ -22,6 +23,9 @@ import { topicSelectors } from './selectors';
 
 const n = setNamespace('topic');
 
+const SWR_USE_FETCH_TOPIC = 'SWR_USE_FETCH_TOPIC';
+const SWR_USE_SEARCH_TOPIC = 'SWR_USE_SEARCH_TOPIC';
+
 export interface ChatTopicAction {
   favoriteTopic: (id: string, favState: boolean) => Promise<void>;
   openNewTopicOrSaveTopic: () => Promise<void>;
@@ -141,18 +145,25 @@ export const chatTopic: StateCreator<
   },
   // query
   useFetchTopics: (sessionId) =>
-    useSWR<ChatTopic[]>(sessionId, async (sessionId) => topicService.getTopics({ sessionId }), {
-      onSuccess: (topics) => {
-        set({ topics, topicsInit: true }, false, n('useFetchTopics(success)', { sessionId }));
+    useClientDataSWR<ChatTopic[]>(
+      [SWR_USE_FETCH_TOPIC, sessionId],
+      async ([, sessionId]: [string, string]) => topicService.getTopics({ sessionId }),
+      {
+        onSuccess: (topics) => {
+          set({ topics, topicsInit: true }, false, n('useFetchTopics(success)', { sessionId }));
+        },
       },
-      dedupingInterval: 0,
-    }),
+    ),
   useSearchTopics: (keywords) =>
-    useSWR<ChatTopic[]>(keywords, topicService.searchTopics, {
-      onSuccess: (data) => {
-        set({ searchTopics: data }, false, n('useSearchTopics(success)', { keywords }));
+    useSWR<ChatTopic[]>(
+      [SWR_USE_SEARCH_TOPIC, keywords],
+      ([, keywords]: [string, string]) => topicService.searchTopics(keywords),
+      {
+        onSuccess: (data) => {
+          set({ searchTopics: data }, false, n('useSearchTopics(success)', { keywords }));
+        },
       },
-    }),
+    ),
   switchTopic: async (id) => {
     set({ activeTopicId: id }, false, n('toggleTopic'));
 
@@ -213,6 +224,6 @@ export const chatTopic: StateCreator<
     set({ topicLoadingId: id }, false, n('updateTopicLoading'));
   },
   refreshTopic: async () => {
-    await mutate(get().activeId);
+    await mutate([SWR_USE_FETCH_TOPIC, get().activeId]);
   },
 });

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

@@ -11,12 +11,15 @@ import { messageService } from '@/services/message';
 import { UserConfig, userService } from '@/services/user';
 import type { GlobalStore } from '@/store/global';
 import type { GlobalServerConfig, GlobalSettings } from '@/types/settings';
+import { OnSyncEvent, PeerSyncStatus } from '@/types/sync';
 import { merge } from '@/utils/merge';
+import { browserInfo } from '@/utils/platform';
 import { setNamespace } from '@/utils/storeDebug';
 import { switchLang } from '@/utils/switchLang';
 
 import { preferenceSelectors } from '../preference/selectors';
-import { settingsSelectors } from '../settings/selectors';
+import { settingsSelectors, syncSettingsSelectors } from '../settings/selectors';
+import { commonSelectors } from './selectors';
 
 const n = setNamespace('common');
 
@@ -24,11 +27,18 @@ const n = setNamespace('common');
  * 设置操作
  */
 export interface CommonAction {
+  refreshConnection: (onEvent: OnSyncEvent) => Promise<void>;
   refreshUserConfig: () => Promise<void>;
   switchBackToChat: (sessionId?: string) => void;
+  triggerEnableSync: (userId: string, onEvent: OnSyncEvent) => Promise<boolean>;
   updateAvatar: (avatar: string) => Promise<void>;
   useCheckLatestVersion: () => SWRResponse<string>;
   useCheckTrace: (shouldFetch: boolean) => SWRResponse;
+  useEnabledSync: (
+    userEnableSync: boolean,
+    userId: string | undefined,
+    onEvent: OnSyncEvent,
+  ) => SWRResponse;
   useFetchServerConfig: () => SWRResponse;
   useFetchUserConfig: (initServer: boolean) => SWRResponse<UserConfig | undefined>;
 }
@@ -41,13 +51,53 @@ export const createCommonSlice: StateCreator<
   [],
   CommonAction
 > = (set, get) => ({
+  refreshConnection: async (onEvent) => {
+    const userId = commonSelectors.userId(get());
+
+    if (!userId) return;
+
+    await get().triggerEnableSync(userId, onEvent);
+  },
+
   refreshUserConfig: async () => {
     await mutate([USER_CONFIG_FETCH_KEY, true]);
   },
+
   switchBackToChat: (sessionId) => {
     get().router?.push(SESSION_CHAT_URL(sessionId || INBOX_SESSION_ID, get().isMobile));
   },
+  triggerEnableSync: async (userId: string, onEvent: OnSyncEvent) => {
+    // double-check the sync ability
+    // if there is no channelName, don't start sync
+    const sync = syncSettingsSelectors.webrtcConfig(get());
+    if (!sync.channelName) return false;
+
+    const name = syncSettingsSelectors.deviceName(get());
 
+    const defaultUserName = `My ${browserInfo.browser} (${browserInfo.os})`;
+
+    set({ syncStatus: PeerSyncStatus.Connecting });
+    return globalService.enabledSync({
+      channel: {
+        name: sync.channelName,
+        password: sync.channelPassword,
+      },
+      onAwarenessChange(state) {
+        set({ syncAwareness: state });
+      },
+      onSyncEvent: onEvent,
+      onSyncStatusChange: (status) => {
+        set({ syncStatus: status });
+      },
+      signaling: sync.signaling,
+      user: {
+        id: userId,
+        // if user don't set the name, use default name
+        name: name || defaultUserName,
+        ...browserInfo,
+      },
+    });
+  },
   updateAvatar: async (avatar) => {
     await userService.updateAvatar(avatar);
     await get().refreshUserConfig();
@@ -78,6 +128,26 @@ export const createCommonSlice: StateCreator<
         revalidateOnFocus: false,
       },
     ),
+
+  useEnabledSync: (userEnableSync, userId, onEvent) =>
+    useSWR<boolean>(
+      ['enableSync', userEnableSync, userId],
+      async () => {
+        // if user don't enable sync or no userId ,don't start sync
+        if (!userId) return false;
+
+        // if user don't enable sync, stop sync
+        if (!userEnableSync) return globalService.disableSync();
+
+        return get().triggerEnableSync(userId, onEvent);
+      },
+      {
+        onSuccess: (syncEnabled) => {
+          set({ syncEnabled });
+        },
+        revalidateOnFocus: false,
+      },
+    ),
   useFetchServerConfig: () =>
     useSWR<GlobalServerConfig>('fetchGlobalConfig', globalService.getGlobalConfig, {
       onSuccess: (data) => {

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

@@ -1,5 +1,7 @@
 import { AppRouterInstance } from 'next/dist/shared/lib/app-router-context.shared-runtime';
 
+import { PeerSyncStatus, SyncAwarenessState } from '@/types/sync';
+
 export enum SidebarTabKey {
   Chat = 'chat',
   Market = 'market',
@@ -11,6 +13,7 @@ export enum SettingsTabs {
   Agent = 'agent',
   Common = 'common',
   LLM = 'llm',
+  Sync = 'sync',
   TTS = 'tts',
 }
 
@@ -25,9 +28,15 @@ export interface GlobalCommonState {
   latestVersion?: string;
   router?: AppRouterInstance;
   sidebarKey: SidebarTabKey;
+  syncAwareness: SyncAwarenessState[];
+  syncEnabled: boolean;
+  syncStatus: PeerSyncStatus;
 }
 
 export const initialCommonState: GlobalCommonState = {
   isMobile: false,
   sidebarKey: SidebarTabKey.Chat,
+  syncAwareness: [],
+  syncEnabled: false,
+  syncStatus: PeerSyncStatus.Disabled,
 };

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

@@ -4,4 +4,5 @@ export const commonSelectors = {
   enabledOAuthSSO: (s: GlobalStore) => s.serverConfig.enabledOAuthSSO,
   enabledTelemetryChat: (s: GlobalStore) => s.serverConfig.telemetry.langfuse || false,
   userAvatar: (s: GlobalStore) => s.avatar || '',
+  userId: (s: GlobalStore) => s.userId,
 };

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

@@ -9,10 +9,11 @@ export interface GlobalPreference {
   // which sessionGroup should expand
   expandSessionGroupKeys: SessionGroupId[];
   guide?: Guide;
+  hideSyncAlert?: boolean;
   inputHeight: number;
   mobileShowTopic?: boolean;
-  sessionsWidth: number;
 
+  sessionsWidth: number;
   showChatSideBar?: boolean;
   showSessionPanel?: boolean;
   showSystemRole?: boolean;

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

@@ -6,7 +6,10 @@ const useCmdEnterToSend = (s: GlobalStore): boolean => s.preference.useCmdEnterT
 
 const userAllowTrace = (s: GlobalStore) => s.preference.telemetry;
 
+const hideSyncAlert = (s: GlobalStore) => s.preference.hideSyncAlert;
+
 export const preferenceSelectors = {
+  hideSyncAlert,
   sessionGroupKeys,
   useCmdEnterToSend,
   userAllowTrace,

package/src/store/global/slices/settings/selectors/index.ts

@@ -1,2 +1,3 @@
 export { modelProviderSelectors } from './modelProvider';
 export { settingsSelectors } from './settings';
+export { syncSettingsSelectors } from './sync';

package/src/store/global/slices/settings/selectors/sync.ts

@@ -0,0 +1,14 @@
+import { GlobalStore } from '../../../store';
+import { currentSettings } from './settings';
+
+const webrtcConfig = (s: GlobalStore) => currentSettings(s).sync.webrtc;
+const webrtcChannelName = (s: GlobalStore) => webrtcConfig(s).channelName;
+const enableWebRTC = (s: GlobalStore) => webrtcConfig(s).enabled;
+const deviceName = (s: GlobalStore) => currentSettings(s).sync.deviceName;
+
+export const syncSettingsSelectors = {
+  deviceName,
+  enableWebRTC,
+  webrtcChannelName,
+  webrtcConfig,
+};

package/src/types/settings/index.ts

@@ -4,12 +4,14 @@ import type { LobeAgentSession } from '@/types/session';
 
 import { GlobalBaseSettings } from './base';
 import { GlobalLLMConfig } from './modelProvider';
+import { GlobalSyncSettings } from './sync';
 import { GlobalTTSConfig } from './tts';
 
 export type GlobalDefaultAgent = Pick<LobeAgentSession, 'config' | 'meta'>;
 
 export * from './base';
 export * from './modelProvider';
+export * from './sync';
 export * from './tts';
 
 export interface GlobalTool {
@@ -34,6 +36,7 @@ export interface GlobalServerConfig {
 export interface GlobalSettings extends GlobalBaseSettings {
   defaultAgent: GlobalDefaultAgent;
   languageModel: GlobalLLMConfig;
+  sync: GlobalSyncSettings;
   tool: GlobalTool;
   tts: GlobalTTSConfig;
 }

package/src/types/settings/sync.ts

@@ -0,0 +1,10 @@
+export interface WebRTCSyncConfig {
+  channelName?: string;
+  channelPassword?: string;
+  enabled: boolean;
+  signaling?: string;
+}
+export interface GlobalSyncSettings {
+  deviceName?: string;
+  webrtc: WebRTCSyncConfig;
+}

package/src/types/sync.ts

@@ -0,0 +1,41 @@
+import { LobeDBSchemaMap } from '@/database/core/db';
+
+export type OnSyncEvent = (tableKey: keyof LobeDBSchemaMap) => void;
+export type OnSyncStatusChange = (status: PeerSyncStatus) => void;
+export type OnAwarenessChange = (state: SyncAwarenessState[]) => void;
+
+// export type PeerSyncStatus = 'syncing' | 'synced' | 'ready' | 'unconnected';
+
+export enum PeerSyncStatus {
+  Connecting = 'connecting',
+  Disabled = 'disabled',
+  Ready = 'ready',
+  Synced = 'synced',
+  Syncing = 'syncing',
+  Unconnected = 'unconnected',
+}
+
+export interface StartDataSyncParams {
+  channel: {
+    name: string;
+    password?: string;
+  };
+  onAwarenessChange: OnAwarenessChange;
+  onSyncEvent: OnSyncEvent;
+  onSyncStatusChange: OnSyncStatusChange;
+  signaling?: string;
+  user: SyncUserInfo;
+}
+
+export interface SyncUserInfo {
+  browser?: string;
+  id: string;
+  isMobile: boolean;
+  name?: string;
+  os?: string;
+}
+
+export interface SyncAwarenessState extends SyncUserInfo {
+  clientID: number;
+  current: boolean;
+}

package/src/utils/platform.ts

@@ -1,6 +1,6 @@
 import UAParser from 'ua-parser-js';
 
-const getPaser = () => {
+const getParser = () => {
   if (typeof window === 'undefined') return new UAParser('Node');
 
   let ua = navigator.userAgent;
@@ -8,11 +8,17 @@ const getPaser = () => {
 };
 
 export const getPlatform = () => {
-  return getPaser().getOS().name;
+  return getParser().getOS().name;
 };
 
 export const getBrowser = () => {
-  return getPaser().getResult().browser.name;
+  return getParser().getResult().browser.name;
+};
+
+export const browserInfo = {
+  browser: getBrowser(),
+  isMobile: getParser().getDevice().type === 'mobile',
+  os: getParser().getOS().name,
 };
 
 export const isMacOS = () => getPlatform() === 'Mac OS';

package/src/utils/responsive.ts

@@ -17,3 +17,24 @@ export const isMobileDevice = () => {
 
   return device.type === 'mobile';
 };
+
+/**
+ * check mobile device in server
+ */
+export const gerServerDeviceInfo = () => {
+  if (typeof process === 'undefined') {
+    throw new Error('[Server method] you are importing a server-only module outside of server');
+  }
+
+  const { get } = headers();
+  const ua = get('user-agent');
+
+  // console.debug(ua);
+  const parser = new UAParser(ua || '');
+
+  return {
+    browser: parser.getBrowser().name,
+    isMobile: isMobileDevice(),
+    os: parser.getOS().name,
+  };
+};