@lobehub/chat 1.119.1 → 1.120.0

package/src/app/[variants]/(main)/settings/sync/features/WebRTC/index.tsx

@@ -1,103 +0,0 @@
-'use client';
-
-import { SiWebrtc } from '@icons-pack/react-simple-icons';
-import { Form, type FormGroupItemType, Input, InputPassword, Text, Tooltip } from '@lobehub/ui';
-import { Form as AntForm, Switch } from 'antd';
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
-
-import { useSyncSettings } from '@/app/[variants]/(main)/settings/hooks/useSyncSettings';
-import { FORM_STYLE } from '@/const/layoutTokens';
-import SyncStatusInspector from '@/features/SyncStatusInspector';
-import { useUserStore } from '@/store/user';
-
-import ChannelNameInput from './ChannelNameInput';
-
-const WebRTC = memo(() => {
-  const { t } = useTranslation('setting');
-  const [form] = Form.useForm();
-
-  const [setSettings] = useUserStore((s) => [s.setSettings]);
-
-  useSyncSettings(form);
-
-  const channelName = AntForm.useWatch(['sync', 'webrtc', 'channelName'], form);
-  const signaling = AntForm.useWatch(['sync', 'webrtc', 'signaling'], form);
-
-  const config: FormGroupItemType = {
-    children: [
-      {
-        children: <Input placeholder={t('sync.webrtc.signaling.placeholder')} />,
-        desc: t('sync.webrtc.signaling.desc'),
-        label: t('sync.webrtc.signaling.title'),
-        name: ['sync', 'webrtc', 'signaling'],
-      },
-      {
-        children: <ChannelNameInput form={form} />,
-        desc: t('sync.webrtc.channelName.desc'),
-        label: t('sync.webrtc.channelName.title'),
-        name: ['sync', 'webrtc', 'channelName'],
-      },
-      {
-        children: (
-          <InputPassword
-            autoComplete={'nw-password'}
-            placeholder={t('sync.webrtc.channelPassword.placeholder')}
-          />
-        ),
-        desc: t('sync.webrtc.channelPassword.desc'),
-        label: t('sync.webrtc.channelPassword.title'),
-        name: ['sync', 'webrtc', 'channelPassword'],
-      },
-      {
-        children:
-          !channelName || !signaling ? (
-            <Tooltip title={t('sync.webrtc.enabled.invalid')}>
-              <Switch disabled />
-            </Tooltip>
-          ) : (
-            <Switch />
-          ),
-
-        label: t('sync.webrtc.enabled.title'),
-        minWidth: undefined,
-        name: ['sync', 'webrtc', 'enabled'],
-      },
-    ],
-    extra: (
-      <div
-        onClick={(e) => {
-          e.stopPropagation();
-        }}
-      >
-        <SyncStatusInspector hiddenActions hiddenEnableGuide />
-      </div>
-    ),
-    title: (
-      <Flexbox align={'center'} gap={12} horizontal wrap={'wrap'}>
-        <Flexbox align={'center'} gap={8} horizontal>
-          <SiWebrtc style={{ flex: 'none' }} />
-          {t('sync.webrtc.title')}
-        </Flexbox>
-        <Text style={{ fontWeight: 'normal' }} type={'secondary'}>
-          {t('sync.webrtc.desc')}
-        </Text>
-      </Flexbox>
-    ),
-  };
-
-  return (
-    <Form
-      form={form}
-      items={[config]}
-      itemsType={'group'}
-      onFinish={setSettings}
-      onValuesChange={setSettings}
-      variant={'borderless'}
-      {...FORM_STYLE}
-    />
-  );
-});
-
-export default WebRTC;

package/src/app/[variants]/(main)/settings/sync/index.tsx

@@ -1,17 +0,0 @@
-import Alert from './features/Alert';
-import DeviceInfo from './features/DeviceInfo';
-import WebRTC from './features/WebRTC';
-
-const Page = ({ browser, os, mobile }: { browser?: string; mobile?: boolean; os?: string }) => {
-  return (
-    <>
-      <DeviceInfo browser={browser} os={os} />
-      <WebRTC />
-      <Alert mobile={mobile} />
-    </>
-  );
-};
-
-Page.displayName = 'SyncSetting';
-
-export default Page;

package/src/app/[variants]/(main)/settings/sync/page.tsx

@@ -1,29 +0,0 @@
-import { gerServerDeviceInfo } from '@lobechat/utils/server';
-import { notFound } from 'next/navigation';
-
-import { serverFeatureFlags } from '@/config/featureFlags';
-import { metadataModule } from '@/server/metadata';
-import { translation } from '@/server/translation';
-import { DynamicLayoutProps } from '@/types/next';
-import { RouteVariants } from '@/utils/server/routeVariants';
-
-import Page from './index';
-
-export const generateMetadata = async (props: DynamicLayoutProps) => {
-  const locale = await RouteVariants.getLocale(props);
-  const { t } = await translation('setting', locale);
-  return metadataModule.generate({
-    description: t('header.desc'),
-    title: t('tab.sync'),
-    url: '/settings/sync',
-  });
-};
-export default async (props: DynamicLayoutProps) => {
-  const enableWebrtc = serverFeatureFlags().enableWebrtc;
-  if (!enableWebrtc) return notFound();
-
-  const isMobile = await RouteVariants.getIsMobile(props);
-  const { os, browser } = await gerServerDeviceInfo();
-
-  return <Page browser={browser} mobile={isMobile} os={os} />;
-};

package/src/database/_deprecated/core/sync.ts

@@ -1,321 +0,0 @@
-import Debug from 'debug';
-import { throttle, uniqBy } from 'lodash-es';
-import type { WebrtcProvider } from 'y-webrtc';
-import type { Doc, Transaction } from 'yjs';
-
-import {
-  OnAwarenessChange,
-  OnSyncEvent,
-  OnSyncStatusChange,
-  PeerSyncStatus,
-  StartDataSyncParams,
-} from '@/types/sync';
-
-import { LobeDBSchemaMap, browserDB } from './db';
-
-const LOG_NAME_SPACE = 'DataSync';
-
-class DataSync {
-  private _ydoc: Doc | null = null;
-  private provider: WebrtcProvider | null = null;
-
-  private syncParams!: StartDataSyncParams;
-  private onAwarenessChange!: OnAwarenessChange;
-
-  private waitForConnecting: any;
-
-  logger = Debug(LOG_NAME_SPACE);
-
-  transact(fn: (transaction: Transaction) => unknown) {
-    this._ydoc?.transact(fn);
-  }
-
-  getYMap = (tableKey: keyof LobeDBSchemaMap) => {
-    return this._ydoc?.getMap(tableKey);
-  };
-
-  startDataSync = async (params: StartDataSyncParams) => {
-    this.syncParams = params;
-    this.onAwarenessChange = params.onAwarenessChange;
-
-    // 开发时由于存在 fast refresh 全局实例会缓存在运行时中
-    // 因此需要在每次重新连接时清理上一次的实例
-    if (window.__ONLY_USE_FOR_CLEANUP_IN_DEV) {
-      await this.cleanConnection(window.__ONLY_USE_FOR_CLEANUP_IN_DEV);
-    }
-
-    await this.connect(params);
-  };
-
-  connect = async (params: StartDataSyncParams) => {
-    const { channel, onSyncEvent, onSyncStatusChange, user, onAwarenessChange, signaling } = params;
-    // ====== 1. init yjs doc ====== //
-
-    await this.initYDoc();
-
-    this.logger('[YJS] start to listen sync event...');
-    this.initYjsObserve(onSyncEvent, onSyncStatusChange);
-
-    // ====== 2. init webrtc provider ====== //
-    this.logger(`[WebRTC] init provider... room: ${channel.name}`);
-    const { WebrtcProvider } = await import('y-webrtc');
-
-    // clients connected to the same room-name share document updates
-    this.provider = new WebrtcProvider(channel.name, this._ydoc!, {
-      password: channel.password,
-      signaling: [signaling],
-    });
-
-    // when fast refresh in dev, the provider will be cached in window
-    // so we need to clean it in destory
-    if (process.env.NODE_ENV === 'development') {
-      window.__ONLY_USE_FOR_CLEANUP_IN_DEV = this.provider;
-    }
-
-    this.logger(`[WebRTC] provider init success`);
-
-    // ====== 3. check signaling server connection  ====== //
-
-    // 当本地设备正确连接到 WebRTC Provider 后，触发 status 事件
-    // 当开始连接，则开始监听事件
-    this.provider.on('status', async ({ connected }) => {
-      this.logger('[WebRTC] peer status:', connected);
-      if (connected) {
-        // this.initObserve(onSyncEvent, onSyncStatusChange);
-        onSyncStatusChange?.(PeerSyncStatus.Connecting);
-      }
-    });
-
-    // check the connection with signaling server
-    let connectionCheckCount = 0;
-
-    this.waitForConnecting = setInterval(() => {
-      const signalingConnection: IWebsocketClient = this.provider!.signalingConns[0];
-
-      if (signalingConnection.connected) {
-        onSyncStatusChange?.(PeerSyncStatus.Ready);
-        clearInterval(this.waitForConnecting);
-        return;
-      }
-
-      connectionCheckCount += 1;
-
-      // check for 5 times, or make it failed
-      if (connectionCheckCount > 5) {
-        onSyncStatusChange?.(PeerSyncStatus.Unconnected);
-        clearInterval(this.waitForConnecting);
-      }
-    }, 2000);
-
-    // ====== 4. handle data sync  ====== //
-
-    // 当各方的数据均完成同步后，YJS 对象之间的数据已经一致时，触发 synced 事件
-    this.provider.on('synced', async ({ synced }) => {
-      this.logger('[WebRTC] peer sync status:', synced);
-      if (synced) {
-        this.logger('[WebRTC] start to init yjs data...');
-        onSyncStatusChange?.(PeerSyncStatus.Syncing);
-        await this.initSync();
-        onSyncStatusChange?.(PeerSyncStatus.Synced);
-        this.logger('[WebRTC] yjs data init success');
-      } else {
-        this.logger('[WebRTC] data not sync, try to reconnect in 1s...');
-        // await this.reconnect(params);
-        setTimeout(() => {
-          onSyncStatusChange?.(PeerSyncStatus.Syncing);
-          this.reconnect(params);
-        }, 1000);
-      }
-    });
-
-    // ====== 5. handle awareness  ====== //
-
-    this.initAwareness({ onAwarenessChange, user });
-
-    return this.provider;
-  };
-
-  reconnect = async (params: StartDataSyncParams) => {
-    await this.cleanConnection(this.provider);
-
-    await this.connect(params);
-  };
-
-  async disconnect() {
-    await this.cleanConnection(this.provider);
-  }
-
-  private initYDoc = async () => {
-    if (typeof window === 'undefined') return;
-
-    this.logger('[YJS] init YDoc...');
-    const { Doc } = await import('yjs');
-    this._ydoc = new Doc();
-  };
-
-  private async cleanConnection(provider: WebrtcProvider | null) {
-    if (provider) {
-      this.logger(`[WebRTC] clean Connection...`);
-      this.logger(`[WebRTC] clean awareness...`);
-      provider.awareness.destroy();
-
-      this.logger(`[WebRTC] clean room...`);
-      provider.room?.disconnect();
-      provider.room?.destroy();
-
-      this.logger(`[WebRTC] clean provider...`);
-      provider.disconnect();
-      provider.destroy();
-
-      this.logger(`[WebRTC] clean yjs doc...`);
-      this._ydoc?.destroy();
-
-      this.logger(`[WebRTC] -------------------`);
-    }
-  }
-
-  private initSync = async () => {
-    await Promise.all(
-      ['sessions', 'sessionGroups', 'topics', 'messages', 'plugins'].map(async (tableKey) =>
-        this.loadDataFromDBtoYjs(tableKey as keyof LobeDBSchemaMap),
-      ),
-    );
-  };
-
-  private initYjsObserve = (onEvent: OnSyncEvent, onSyncStatusChange: OnSyncStatusChange) => {
-    ['sessions', 'sessionGroups', 'topics', 'messages', 'plugins'].forEach((tableKey) => {
-      // listen yjs change
-      this.observeYMapChange(tableKey as keyof LobeDBSchemaMap, onEvent, onSyncStatusChange);
-    });
-  };
-
-  private observeYMapChange = (
-    tableKey: keyof LobeDBSchemaMap,
-    onEvent: OnSyncEvent,
-    onSyncStatusChange: OnSyncStatusChange,
-  ) => {
-    const table = browserDB[tableKey];
-    const yItemMap = this.getYMap(tableKey);
-    const updateSyncEvent = throttle(onEvent, 1000);
-
-    // 定义一个变量来保存定时器的ID
-    // eslint-disable-next-line no-undef
-    let debounceTimer: NodeJS.Timeout;
-
-    yItemMap?.observe(async (event) => {
-      // abort local change
-      if (event.transaction.local) return;
-
-      // 每次有变更时，都先清除之前的定时器（如果有的话），然后设置新的定时器
-      clearTimeout(debounceTimer);
-
-      onSyncStatusChange(PeerSyncStatus.Syncing);
-
-      this.logger(`[YJS] observe ${tableKey} changes:`, event.keysChanged.size);
-      const pools = Array.from(event.keys).map(async ([id, payload]) => {
-        const item: any = yItemMap.get(id);
-
-        switch (payload.action) {
-          case 'add':
-          case 'update': {
-            await table.put(item, id);
-
-            break;
-          }
-
-          case 'delete': {
-            await table.delete(id);
-            break;
-          }
-        }
-      });
-
-      await Promise.all(pools);
-
-      updateSyncEvent(tableKey);
-
-      // 设置定时器，2000ms 后更新状态为'synced'
-      debounceTimer = setTimeout(() => {
-        onSyncStatusChange(PeerSyncStatus.Synced);
-      }, 2000);
-    });
-  };
-
-  private loadDataFromDBtoYjs = async (tableKey: keyof LobeDBSchemaMap) => {
-    const table = browserDB[tableKey];
-    const items = await table.toArray();
-    const yItemMap = this.getYMap(tableKey);
-
-    // 定义每批次最多包含的数据条数
-    const batchSize = 50;
-
-    // 计算总批次数
-    const totalBatches = Math.ceil(items.length / batchSize);
-
-    for (let i = 0; i < totalBatches; i++) {
-      // 计算当前批次的起始和结束索引
-      const start = i * batchSize;
-      const end = start + batchSize;
-
-      // 获取当前批次的数据
-      const batchItems = items.slice(start, end);
-
-      // 将当前批次的数据推送到 Yjs 中
-      this._ydoc?.transact(() => {
-        batchItems.forEach((item) => {
-          yItemMap!.set(item.id, item);
-        });
-      });
-    }
-
-    this.logger('[DB]:', tableKey, yItemMap?.size);
-  };
-
-  private initAwareness = ({ user }: Pick<StartDataSyncParams, 'user' | 'onAwarenessChange'>) => {
-    if (!this.provider) return;
-
-    const awareness = this.provider.awareness;
-
-    awareness.setLocalState({ clientID: awareness.clientID, user });
-    this.onAwarenessChange?.([{ ...user, clientID: awareness.clientID, current: true }]);
-
-    awareness.on('change', () => this.syncAwarenessToUI());
-  };
-
-  private syncAwarenessToUI = async () => {
-    const awareness = this.provider?.awareness;
-
-    if (!awareness) return;
-
-    const state = Array.from(awareness.getStates().values()).map((s) => ({
-      ...s.user,
-      clientID: s.clientID,
-      current: s.clientID === awareness.clientID,
-    }));
-
-    this.onAwarenessChange?.(uniqBy(state, 'id'));
-  };
-}
-
-export const dataSync = new DataSync();
-
-interface IWebsocketClient {
-  binaryType: 'arraybuffer' | 'blob' | null;
-  connect(): void;
-  connected: boolean;
-  connecting: boolean;
-  destroy(): void;
-  disconnect(): void;
-  lastMessageReceived: number;
-  send(message: any): void;
-  shouldConnect: boolean;
-  unsuccessfulReconnects: number;
-  url: string;
-  ws: WebSocket;
-}
-
-declare global {
-  interface Window {
-    __ONLY_USE_FOR_CLEANUP_IN_DEV?: WebrtcProvider | null;
-  }
-}

package/src/features/SyncStatusInspector/DisableSync.tsx

@@ -1,79 +0,0 @@
-import { Button, Icon, Tag } from '@lobehub/ui';
-import { Badge, Popover } from 'antd';
-import { TooltipPlacement } from 'antd/es/tooltip';
-import { LucideCloudCog, LucideCloudy } from 'lucide-react';
-import Link from 'next/link';
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
-
-import { useUserStore } from '@/store/user';
-import { syncSettingsSelectors } from '@/store/user/selectors';
-
-interface DisableSyncProps {
-  noPopover?: boolean;
-  placement?: TooltipPlacement;
-}
-
-const DisableSync = memo<DisableSyncProps>(({ noPopover, placement = 'bottomLeft' }) => {
-  const { t } = useTranslation('common');
-  const [haveConfig, setSettings] = useUserStore((s) => [
-    !!syncSettingsSelectors.webrtcConfig(s).channelName,
-    s.setSettings,
-  ]);
-
-  const enableSync = () => {
-    setSettings({ sync: { webrtc: { enabled: true } } });
-  };
-
-  const tag = (
-    <div>
-      <Tag>
-        <Badge status="default" />
-        {t('sync.status.disabled')}
-      </Tag>
-    </div>
-  );
-
-  return noPopover ? (
-    tag
-  ) : (
-    <Popover
-      arrow={false}
-      content={
-        <Flexbox gap={12} width={320}>
-          {t('sync.disabled.desc')}
-          {haveConfig ? (
-            <Flexbox gap={8} horizontal>
-              <Link href={'/settings/sync'}>
-                <Button block icon={<Icon icon={LucideCloudCog} />}>
-                  {t('sync.disabled.actions.settings')}
-                </Button>
-              </Link>
-              <Button block onClick={enableSync} type={'primary'}>
-                {t('sync.disabled.actions.enable')}
-              </Button>
-            </Flexbox>
-          ) : (
-            <Link href={'/settings/sync'}>
-              <Button block icon={<Icon icon={LucideCloudCog} />} type={'primary'}>
-                {t('sync.disabled.actions.settings')}
-              </Button>
-            </Link>
-          )}
-        </Flexbox>
-      }
-      placement={placement}
-      title={
-        <Flexbox gap={8} horizontal>
-          <Icon icon={LucideCloudy} />
-          {t('sync.disabled.title')}
-        </Flexbox>
-      }
-    >
-      {tag}
-    </Popover>
-  );
-});
-
-export default DisableSync;

package/src/features/SyncStatusInspector/EnableSync.tsx

@@ -1,132 +0,0 @@
-import { ActionIcon, Avatar, Icon, Tag, Text } from '@lobehub/ui';
-import { Divider, Popover, Switch } from 'antd';
-import { createStyles } from 'antd-style';
-import { TooltipPlacement } from 'antd/es/tooltip';
-import isEqual from 'fast-deep-equal';
-import { LucideCloudy, LucideLaptop, LucideSmartphone, SettingsIcon } from 'lucide-react';
-import Link from 'next/link';
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
-
-import { useUserStore } from '@/store/user';
-import { syncSettingsSelectors } from '@/store/user/selectors';
-import { pathString } from '@/utils/url';
-
-import EnableTag from './EnableTag';
-
-const useStyles = createStyles(({ css, token, prefixCls }) => ({
-  text: css`
-    max-width: 100%;
-    color: ${token.colorTextTertiary};
-    .${prefixCls}-typography-copy {
-      color: ${token.colorTextTertiary};
-    }
-  `,
-  title: css`
-    color: ${token.colorTextTertiary};
-  `,
-}));
-
-interface EnableSyncProps {
-  hiddenActions?: boolean;
-  placement?: TooltipPlacement;
-}
-
-const EnableSync = memo<EnableSyncProps>(({ hiddenActions, placement = 'bottomLeft' }) => {
-  const { t } = useTranslation('common');
-
-  const { styles, theme } = useStyles();
-  const [syncStatus, isSyncing, channelName, enableWebRTC, setSettings] = useUserStore((s) => [
-    s.syncStatus,
-    s.syncStatus === 'syncing',
-    syncSettingsSelectors.webrtcChannelName(s),
-    syncSettingsSelectors.enableWebRTC(s),
-    s.setSettings,
-  ]);
-
-  const users = useUserStore((s) => s.syncAwareness, isEqual);
-
-  const switchSync = (enabled: boolean) => {
-    setSettings({ sync: { webrtc: { enabled } } });
-  };
-
-  return (
-    <Popover
-      arrow={false}
-      content={
-        <Flexbox gap={16}>
-          <Flexbox align={'center'} gap={24} horizontal>
-            <Flexbox
-              align={'center'}
-              className={styles.title}
-              gap={4}
-              horizontal
-              style={{ paddingInlineEnd: 12 }}
-            >
-              {t('sync.channel')}
-              <Text className={styles.text}>{channelName}</Text>
-            </Flexbox>
-          </Flexbox>
-          <Divider dashed style={{ margin: 0 }} />
-          <Flexbox gap={12}>
-            {users.map((user) => (
-              <Flexbox gap={12} horizontal key={user.clientID}>
-                <Avatar
-                  avatar={
-                    <Icon
-                      color={theme.purple}
-                      icon={user.isMobile ? LucideSmartphone : LucideLaptop}
-                      size={24}
-                    />
-                  }
-                  background={theme.purple1}
-                  shape={'square'}
-                />
-
-                <Flexbox>
-                  <Flexbox gap={8} horizontal>
-                    {user.name || user.id}
-                    {user.current && (
-                      <Flexbox horizontal>
-                        <Tag bordered={false} color={'blue'}>
-                          {t('sync.awareness.current')}
-                        </Tag>
-                      </Flexbox>
-                    )}
-                  </Flexbox>
-                  <Text type={'secondary'}>
-                    {user.os} · {user.browser}
-                  </Text>
-                </Flexbox>
-              </Flexbox>
-            ))}
-          </Flexbox>
-        </Flexbox>
-      }
-      placement={placement}
-      title={
-        <Flexbox distribution={'space-between'} horizontal>
-          <Flexbox align={'center'} gap={8} horizontal>
-            <Icon icon={LucideCloudy} />
-            {t('sync.title')}
-            {!hiddenActions && (
-              <Switch checked={enableWebRTC} onChange={switchSync} size={'small'} />
-            )}
-          </Flexbox>
-          {!hiddenActions && (
-            <Link href={pathString('/settings/sync')}>
-              <ActionIcon icon={SettingsIcon} title={t('sync.actions.settings')} />
-            </Link>
-          )}
-        </Flexbox>
-      }
-    >
-      <div>
-        <EnableTag isSyncing={isSyncing} status={syncStatus} />
-      </div>
-    </Popover>
-  );
-});
-
-export default EnableSync;