@lobehub/chat 1.119.2 → 1.120.0

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

@@ -4,7 +4,6 @@ import { ZodObject } from 'zod';
 import { nanoid } from '@/utils/uuid';
 
 import { BrowserDB, BrowserDBSchema, browserDB } from './db';
-import { dataSync } from './sync';
 import { DBBaseFieldsSchema } from './types/db';
 
 export class BaseModel<N extends keyof BrowserDBSchema = any, T = BrowserDBSchema[N]['table']> {
@@ -22,10 +21,6 @@ export class BaseModel<N extends keyof BrowserDBSchema = any, T = BrowserDBSchem
     return this.db[this._tableName] as Dexie.Table;
   }
 
-  get yMap() {
-    return dataSync.getYMap(this._tableName);
-  }
-
   // **************** Create *************** //
 
   /**
@@ -79,7 +74,6 @@ export class BaseModel<N extends keyof BrowserDBSchema = any, T = BrowserDBSchem
        */
       createWithNewId?: boolean;
       idGenerator?: () => string;
-      withSync?: boolean;
     } = {},
   ): Promise<{
     added: number;
@@ -88,7 +82,7 @@ export class BaseModel<N extends keyof BrowserDBSchema = any, T = BrowserDBSchem
     skips: string[];
     success: boolean;
   }> {
-    const { idGenerator = nanoid, createWithNewId = false, withSync = true } = options;
+    const { idGenerator = nanoid, createWithNewId = false } = options;
     const validatedData: any[] = [];
     const errors = [];
     const skips: string[] = [];
@@ -141,15 +135,6 @@ export class BaseModel<N extends keyof BrowserDBSchema = any, T = BrowserDBSchem
     try {
       await this.table.bulkAdd(validatedData);
 
-      if (withSync) {
-        dataSync.transact(() => {
-          const pools = validatedData.map(async (item) => {
-            await this.updateYMapItem(item.id);
-          });
-          Promise.all(pools);
-        });
-      }
-
       return {
         added: validatedData.length,
         ids: validatedData.map((item) => item.id),
@@ -174,28 +159,16 @@ export class BaseModel<N extends keyof BrowserDBSchema = any, T = BrowserDBSchem
   // **************** Delete *************** //
 
   protected async _deleteWithSync(id: string) {
-    const result = await this.table.delete(id);
-    // sync delete data to yjs data map
-    this.yMap?.delete(id);
-    return result;
+    return await this.table.delete(id);
   }
 
   protected async _bulkDeleteWithSync(keys: string[]) {
     await this.table.bulkDelete(keys);
     // sync delete data to yjs data map
-
-    dataSync.transact(() => {
-      keys.forEach((id) => {
-        this.yMap?.delete(id);
-      });
-    });
   }
 
   protected async _clearWithSync() {
-    const result = await this.table.clear();
-    // sync clear data to yjs data map
-    this.yMap?.clear();
-    return result;
+    return await this.table.clear();
   }
 
   // **************** Update *************** //
@@ -235,18 +208,11 @@ export class BaseModel<N extends keyof BrowserDBSchema = any, T = BrowserDBSchem
 
   protected async _bulkPutWithSync(items: T[]) {
     await this.table.bulkPut(items);
-
-    await dataSync.transact(() => {
-      items.forEach((items) => {
-        this.updateYMapItem((items as any).id);
-      });
-    });
   }
 
   // **************** Helper *************** //
 
   private updateYMapItem = async (id: string) => {
-    const newData = await this.table.get(id);
-    this.yMap?.set(id, newData);
+    await this.table.get(id);
   };
 }

package/src/database/_deprecated/models/message.ts

@@ -118,7 +118,7 @@ class _MessageModel extends BaseModel {
   async batchCreate(messages: ChatMessage[]) {
     const data: DB_Message[] = messages.map((m) => this.mapChatMessageToDBMessage(m));
 
-    return this._batchAdd(data, { withSync: true });
+    return this._batchAdd(data);
   }
 
   async duplicateMessages(messages: ChatMessage[]): Promise<ChatMessage[]> {

package/src/layout/GlobalProvider/StoreInitialization.tsx

@@ -7,7 +7,6 @@ import { createStoreUpdater } from 'zustand-utils';
 
 import { enableNextAuth } from '@/const/auth';
 import { useIsMobile } from '@/hooks/useIsMobile';
-import { useEnabledDataSync } from '@/hooks/useSyncData';
 import { useAgentStore } from '@/store/agent';
 import { useAiInfraStore } from '@/store/aiInfra';
 import { useGlobalStore } from '@/store/global';
@@ -70,8 +69,6 @@ const StoreInitialization = memo(() => {
     },
   });
 
-  useEnabledDataSync();
-
   const useStoreUpdater = createStoreUpdater(useGlobalStore);
 
   const mobile = useIsMobile();

package/src/store/serverConfig/selectors.test.ts

@@ -17,7 +17,6 @@ describe('featureFlagsSelectors', () => {
     const result = featureFlagsSelectors(store.getState());
 
     expect(result).toEqual({
-      enableWebrtc: false,
       isAgentEditable: false,
       showApiKeyManage: false,
       enablePlugins: true,

package/src/store/user/initialState.ts

@@ -3,17 +3,14 @@ import { CommonState, initialCommonState } from './slices/common/initialState';
 import { ModelListState, initialModelListState } from './slices/modelList/initialState';
 import { UserPreferenceState, initialPreferenceState } from './slices/preference/initialState';
 import { UserSettingsState, initialSettingsState } from './slices/settings/initialState';
-import { UserSyncState, initialSyncState } from './slices/sync/initialState';
 
-export type UserState = UserSyncState &
-  UserSettingsState &
+export type UserState = UserSettingsState &
   UserPreferenceState &
   UserAuthState &
   ModelListState &
   CommonState;
 
 export const initialState: UserState = {
-  ...initialSyncState,
   ...initialSettingsState,
   ...initialPreferenceState,
   ...initialAuthState,

package/src/store/user/selectors.ts

@@ -10,4 +10,3 @@ export {
   systemAgentSelectors,
   userGeneralSettingsSelectors,
 } from './slices/settings/selectors';
-export { syncSettingsSelectors } from './slices/sync/selectors';

package/src/store/user/store.ts

@@ -10,12 +10,10 @@ import { type CommonAction, createCommonSlice } from './slices/common/action';
 import { type ModelListAction, createModelListSlice } from './slices/modelList/action';
 import { type PreferenceAction, createPreferenceSlice } from './slices/preference/action';
 import { type UserSettingsAction, createSettingsSlice } from './slices/settings/action';
-import { type SyncAction, createSyncSlice } from './slices/sync/action';
 
 //  ===============  聚合 createStoreFn ============ //
 
-export type UserStore = SyncAction &
-  UserState &
+export type UserStore = UserState &
   UserSettingsAction &
   PreferenceAction &
   ModelListAction &
@@ -24,7 +22,6 @@ export type UserStore = SyncAction &
 
 const createStore: StateCreator<UserStore, [['zustand/devtools', never]]> = (...parameters) => ({
   ...initialState,
-  ...createSyncSlice(...parameters),
   ...createSettingsSlice(...parameters),
   ...createPreferenceSlice(...parameters),
   ...createAuthSlice(...parameters),

package/docs/self-hosting/advanced/webrtc.mdx

@@ -1,86 +0,0 @@
----
-title: LobeChat WebRTC Sync - Real-Time Data Sharing
-description: >-
-  Explore LobeChat's WebRTC sync for real-time data sharing and privacy without servers.
-
-tags:
-  - WebRTC
-  - LobeChat
-  - Data Synchronization
-  - Real-Time Communication
-  - Peer-to-Peer
----
-
-# LobeChat WebRTC Sync
-
-## Introduction to WebRTC
-
-WebRTC (Web Real-Time Communication) is a technology that enables peer-to-peer communication between browsers. In LobeChat, we experimentally implemented real-time data synchronization between devices based on WebRTC and YJS, without relying on traditional server databases. This solution offers high privacy, zero conflicts, and provides a real-time session synchronization experience.
-
-## Configuring WebRTC for Synchronization
-
-To use the WebRTC synchronization feature in LobeChat, you need to complete the following steps:
-
-<Steps>
-  ### Deploy Signaling Server
-
-  Deploy a WebRTC signaling server with one click using the Zeabur platform:
-
-  [![Deploy on Zeabur](https://zeabur.com/button.svg)](https://zeabur.com/templates/MY0JZG?referralCode=arvinxx)
-
-  Alternatively, you can view the [source code](https://github.com/lobehub/y-webrtc-signaling) and deploy it on your own.
-
-  After deployment, you will receive a URL, for example: `https://my-signaling-server.zeabur.app`.
-
-  ### Enable WebRTC Sync in the Deployment Instance
-
-  The WebRTC sync feature in LobeChat is hidden by default and needs to be enabled by adding the environment variable `FEATURE_FLAGS=+webrtc_sync`.
-
-  ### Configure WebRTC Sync Settings in LobeChat
-
-  1. Open LobeChat settings -> Data Sync
-  2. Enter the signaling server address in the WebRTC sync section;
-  3. Set the sync channel name and password
-
-  <Image alt={'LobeChat Data Sync Settings Page'} height={356} inStep src={'https://github.com/lobehub/lobe-chat/assets/28616219/bf86bf1e-87fb-4015-8587-15ff28bb9c24'} />
-
-  ### Repeat the Above Configuration on Devices that Need to Sync
-
-  Ensure all devices use the same signaling server, channel name, and password. Once configured, the devices should automatically start syncing data.
-</Steps>
-
-## Limitations and Known Issues
-
-Although WebRTC has the advantages of no database and flexibility, after extensive community testing, the following limitations and known issues have been identified:
-
-### Requirement for Devices to be Online Simultaneously
-
-WebRTC requires devices to be online simultaneously to synchronize, meaning changes cannot be made on one device while offline and then synced later on another device.
-
-This limitation is due to the communication nature of WebRTC. In a pure frontend, serverless scenario, data synchronization between two devices can only be achieved through peer-to-peer communication. When one device is online and the other is offline, it is impossible to determine where the data should come from. Only when both devices are online can data communication occur. This mode is more like an online chat room where everyone needs to be online to see each other's data and achieve synchronization.
-
-Therefore, in certain situations, WebRTC's pure peer-to-peer approach may not fully meet users' needs (e.g., one device is a work computer, and the other is a home computer), and there are also some issues with data synchronization.
-
-### Network Issues Leading to Sync Failures
-
-Due to the implementation mechanism of WebRTC, its peer-to-peer communication has strict network requirements. Many of our users have reported:
-
-- Syncing between PCs is possible, but syncing between a mobile device with a SIM card and a PC is not, although syncing is possible when using the same WIFI as the PC;
-- Syncing fails when switching networks.
-
-### Stability and Performance Issues
-
-- Some users have reported ICE connection failures on the Firefox browser: [WebRTC Data Sync Feedback](https://github.com/lobehub/lobe-chat/issues/1683#issuecomment-2094745907)
-- For extremely long text or large amounts of conversation records, the synchronization process may slow down or become unstable: [When the model outputs a very long conversation, the end of the conversation will contain synchronization-related content tags, leading to sync failures](https://github.com/lobehub/lobe-chat/issues/1962)
-
-## Our Recommendations
-
-Considering the above reasons, we recommend users treat the WebRTC sync feature as experimental and regularly back up important data.
-
-We have already released a more stable and user-friendly server database synchronization solution ([deployment guide](/docs/self-hosting/advanced/server-database)). We recommend users prioritize using the server database synchronization solution.
-
-<Callout type={'warning'}>
-  Please note that we have officially announced the archiving of this sync feature in [PR
-  3182](https://github.com/lobehub/lobe-chat/pull/3182), and the above issues will no longer be
-  considered for fixes.
-</Callout>

package/docs/self-hosting/advanced/webrtc.zh-CN.mdx

@@ -1,80 +0,0 @@
----
-title: LobeChat WebRTC 同步配置指南
-description: 在 LobeChat 中实现基于 WebRTC 和 YJS 的设备间实时数据同步。了解如何配置 WebRTC 并开启同步功能，以及使用局限性和已知问题。
-tags:
-  - YJS
-  - 信令服务器
----
-
-# LobeChat WebRTC 同步
-
-## WebRTC 简介
-
-WebRTC (Web Real-Time Communication) 是一项实现浏览器之间点对点通信的技术。在 LobeChat 中，我们实验性地基于 WebRTC 和 YJS 实现了设备间的实时数据同步，无需依赖传统的服务器数据库。这种方案具有高度隐私性、零冲突性，并能提供实时会话同步体验。
-
-## 配置 WebRTC 并实现同步
-
-要使用 LobeChat 的 WebRTC 同步功能，需要完成以下步骤:
-
-<Steps>
-  ### 部署信令服务器
-
-  使用 Zeabur 平台一键部署 WebRTC 信令服务器：
-
-  [![Deploy on Zeabur](https://zeabur.com/button.svg)](https://zeabur.com/templates/MY0JZG?referralCode=arvinxx)
-
-  或者查看 [源码](https://github.com/lobehub/y-webrtc-signaling) 自行部署。
-
-  部署完成后，可以得到一个 URL，例如：`https://my-signaling-server.zeabur.app`。
-
-  ### 在部署实例中开启 WebRTC 同步
-
-  LobeChat 默认隐藏了 WebRTC 同步功能，需要通过添加环境变量 `FEATURE_FLAGS=+webrtc_sync` 来开启 WebRTC 同步特性。
-
-  ### 配置 LobeChat 的 WebRTC 同步设置
-
-  1. 打开 LobeChat 设置 -> 数据同步
-  2. 在 WebRTC 同步中填写信令服务器地址；
-  3. 设置同步频道名称和密码
-
-  <Image alt={'LobeChat 数据同步设置页'} height={356} inStep src={'https://github.com/lobehub/lobe-chat/assets/28616219/bf86bf1e-87fb-4015-8587-15ff28bb9c24'} />
-
-  ### 在需要同步的设备上重复以上配置
-
-  确保所有设备使用相同的信令服务器、频道名称和密码，完成配置后，设备间应该可以开始自动同步数据。
-</Steps>
-
-## 使用局限性和已知问题
-
-虽然 WebRTC 具有无数据库、比较灵活的特性，但目前该功能经过大范围社区测试，存在以下局限性和已知问题：
-
-### 设备同时在线要求
-
-WebRTC 要求设备同时在线才能进行同步，这意味着无法在一台设备离线时在另一台设备上进行更改并稍后同步。
-
-这是 WebRTC 本身的通信特性有关系，由于在纯前端、无服务端的情况下，两个设备的数据同步只能通过点对点通信的形式达成。当一个设备在线，一个设备离线的情况下，我们无从感知数据到底应该从哪来，只有当两台设备都在线的时候，双发数据才能通信。其实这种模式更像是一个在线聊天室，大家都在线时才能看到对方的数据，然后达成同步。
-
-因此 WebRTC 这种纯点对点的方式在某些情况下并无法完全满足用户的诉求（例如一个是公司电脑，一个是家里电脑），同时也存在一些数据同步层面的问题。
-
-### 网络问题可能导致同步失败
-
-由于 WebRTC 的实现机制，其点对点通信对于网络要求非常苛刻，我们的很多用户反馈：
-
-- 在 PC 上可以互相同步、 手机 sim 卡无法和 PC 同步、但是换成和 PC 一样的 WIFI 可以和 PC 同步；
-- 任何切换网络都无法同步；
-
-### 稳定性与性能问题
-
-- 部分用户报告在 Firefox 浏览器上遇到 ICE 连接失败的问题：[WebRTC Data Sync Feedback](https://github.com/lobehub/lobe-chat/issues/1683#issuecomment-2094745907)
-- 对于超长文本或大量对话记录，同步过程可能变慢或不稳定：[当模型输出超长对话时，对话末尾会出现同步相关的内容标签，导致同步失败](https://github.com/lobehub/lobe-chat/issues/1962)
-
-## 我们的建议
-
-鉴于以上原因，我们建议用户将 WebRTC 同步功能视为实验性功能，并定期备份重要数据。
-
-目前我们已经发布了更稳定、更用户友好的服务端数据库同步方案（[部署指南](/zh/docs/self-hosting/advanced/server-database)），我们建议用户优先考虑使用服务端数据库同步方案。
-
-<Callout type={'warning'}>
-  请注意，我们已经在 [PR 3182](https://github.com/lobehub/lobe-chat/pull/3182)
-  中正式宣布归档该同步特性，上述问题将不再考虑进行修复。
-</Callout>

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

@@ -1,53 +0,0 @@
-'use client';
-
-import { Alert } from '@lobehub/ui';
-import Link from 'next/link';
-import { memo } from 'react';
-import { Trans } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
-
-import { MAX_WIDTH } from '@/const/layoutTokens';
-import { WEBRTC_SYNC_DOCUMENTS } from '@/const/url';
-import { useUserStore } from '@/store/user';
-import { preferenceSelectors } from '@/store/user/selectors';
-
-interface ExperimentAlertProps {
-  mobile?: boolean;
-}
-const ExperimentAlert = memo<ExperimentAlertProps>(({ mobile }) => {
-  const [hideSyncAlert, updatePreference] = useUserStore((s) => [
-    preferenceSelectors.hideSyncAlert(s),
-    s.updatePreference,
-  ]);
-
-  return (
-    !hideSyncAlert && (
-      <Flexbox style={{ maxWidth: MAX_WIDTH }} width={'100%'}>
-        <Alert
-          banner={mobile}
-          closable
-          message={
-            <Trans i18nKey="sync.warning.tip" ns={'setting'}>
-              经过较长一段时间测试，WebRTC 同步可能无法稳定满足通用的数据同步诉求。请自行
-              <Link
-                aria-label={'Webrtc Sync deployment'}
-                href={WEBRTC_SYNC_DOCUMENTS}
-                style={{ color: 'inherit', textDecoration: 'underline' }}
-                target="_blank"
-              >
-                部署信令服务器
-              </Link>
-              后使用。
-            </Trans>
-          }
-          onClose={() => {
-            updatePreference({ hideSyncAlert: true });
-          }}
-          type={'warning'}
-        />
-      </Flexbox>
-    )
-  );
-});
-
-export default ExperimentAlert;

package/src/app/[variants]/(main)/settings/sync/features/DeviceInfo/Card.tsx

@@ -1,42 +0,0 @@
-import { createStyles } from 'antd-style';
-import { ReactNode, memo } from 'react';
-import { Center, Flexbox } from 'react-layout-kit';
-
-const useStyles = createStyles(({ css, token, responsive }) => ({
-  container: css`
-    border-radius: ${token.borderRadius}px;
-    background: ${token.colorFillTertiary};
-
-    .${responsive.mobile} {
-      width: 100%;
-    }
-  `,
-  icon: css`
-    width: 24px;
-    height: 24px;
-  `,
-  title: css`
-    font-size: 16px;
-  `,
-}));
-
-const Card = memo<{ icon: ReactNode; title: string }>(({ title, icon }) => {
-  const { styles } = useStyles();
-
-  return (
-    <Flexbox
-      align={'center'}
-      className={styles.container}
-      flex={1}
-      gap={12}
-      horizontal
-      paddingBlock={12}
-      paddingInline={20}
-    >
-      <Center className={styles.icon}>{icon}</Center>
-      <div className={styles.title}>{title}</div>
-    </Flexbox>
-  );
-});
-
-export default Card;

package/src/app/[variants]/(main)/settings/sync/features/DeviceInfo/DeviceName.tsx

@@ -1,62 +0,0 @@
-'use client';
-
-import { EditableText, Text } from '@lobehub/ui';
-import { memo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
-
-import { useUserStore } from '@/store/user';
-import { syncSettingsSelectors } from '@/store/user/selectors';
-
-const DeviceName = memo(() => {
-  const { t } = useTranslation('setting');
-
-  const [deviceName, setSettings] = useUserStore((s) => [
-    syncSettingsSelectors.deviceName(s),
-    s.setSettings,
-  ]);
-
-  const [editing, setEditing] = useState(false);
-
-  const updateDeviceName = (deviceName: string) => {
-    setSettings({ sync: { deviceName } });
-    setEditing(false);
-  };
-
-  return (
-    <Flexbox
-      align={'center'}
-      flex={1}
-      height={40}
-      horizontal
-      style={{ fontSize: 20, fontWeight: 'bold', lineHeight: 1, minWidth: 240, paddingLeft: 8 }}
-    >
-      {!deviceName && !editing && (
-        <Flexbox
-          onClick={() => {
-            setEditing(true);
-          }}
-          style={{ cursor: 'pointer' }}
-        >
-          <Text type={'secondary'}>{t('sync.device.deviceName.hint')}</Text>
-        </Flexbox>
-      )}
-      <EditableText
-        editing={editing}
-        inputProps={{
-          placeholder: t('sync.device.deviceName.placeholder'),
-        }}
-        onBlur={(e) => updateDeviceName(e.target.value)}
-        onChange={(e) => {
-          updateDeviceName(e);
-        }}
-        onEditingChange={setEditing}
-        size={'large'}
-        value={deviceName}
-        variant={'filled'}
-      />
-    </Flexbox>
-  );
-});
-
-export default DeviceName;

package/src/app/[variants]/(main)/settings/sync/features/DeviceInfo/SystemIcon.tsx

@@ -1,31 +0,0 @@
-import {
-  SiAndroid,
-  SiApple,
-  SiBlackberry,
-  SiGooglechrome,
-  SiLinux,
-  SiWindows11,
-} from '@icons-pack/react-simple-icons';
-import { memo } from 'react';
-
-const SystemIcon = memo<{ title?: string }>(({ title }) => {
-  if (!title) return;
-
-  if (['Mac OS', 'iOS', 'iPadOS'].includes(title)) return <SiApple size={24} />;
-
-  // Remove Microsoft brands in @icons-pack/react-simple-icons v10
-  // https://github.com/simple-icons/simple-icons/pull/10019
-  if (['Windows'].includes(title)) return <SiWindows11 size={24} />;
-
-  if (title === 'Android') return <SiAndroid size={24} />;
-
-  if (['BlackBerry'].includes(title)) return <SiBlackberry size={24} />;
-
-  if (title === 'Linux') return <SiLinux size={24} />;
-
-  if (title === 'Chrome OS') return <SiGooglechrome size={24} />;
-
-  return null;
-});
-
-export default SystemIcon;

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

@@ -1,103 +0,0 @@
-'use client';
-
-import { Text } from '@lobehub/ui';
-import { createStyles } from 'antd-style';
-import { rgba } from 'polished';
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
-
-import { BrowserIcon } from '@/components/BrowserIcon';
-import { MAX_WIDTH } from '@/const/layoutTokens';
-
-import Card from './Card';
-import DeviceName from './DeviceName';
-import SystemIcon from './SystemIcon';
-
-const useStyles = createStyles(({ css, cx, responsive, isDarkMode, token, stylish }) => ({
-  container: css`
-    position: relative;
-    width: 100%;
-    border-radius: ${token.borderRadiusLG}px;
-  `,
-  content: css`
-    z-index: 2;
-    padding: 8px;
-    border-radius: ${token.borderRadiusLG - 1}px;
-    background: ${rgba(token.colorBgContainer, isDarkMode ? 0.7 : 1)};
-  `,
-  glow: cx(
-    stylish.gradientAnimation,
-    css`
-      pointer-events: none;
-      opacity: 0.5;
-      background-image: linear-gradient(
-        -45deg,
-        ${isDarkMode ? token.geekblue4 : token.geekblue},
-        ${isDarkMode ? token.cyan4 : token.cyan}
-      );
-      animation-duration: 10s;
-    `,
-  ),
-  wrapper: css`
-    ${responsive.mobile} {
-      padding-block: 8px;
-      padding-inline: 4px;
-    }
-  `,
-}));
-
-interface DeviceCardProps {
-  browser?: string;
-  os?: string;
-}
-
-const DeviceCard = memo<DeviceCardProps>(({ browser, os }) => {
-  const { styles } = useStyles();
-  const { t } = useTranslation('setting');
-
-  return (
-    <Flexbox
-      className={styles.wrapper}
-      style={{ maxWidth: MAX_WIDTH, position: 'relative' }}
-      width={'100%'}
-    >
-      <Flexbox className={styles.container} padding={4}>
-        <Flexbox horizontal paddingBlock={8} paddingInline={12}>
-          <div>
-            <Text strong style={{ fontSize: 18 }}>
-              {t('sync.device.title')}
-            </Text>
-          </div>
-        </Flexbox>
-        <Flexbox
-          align={'center'}
-          className={styles.content}
-          flex={1}
-          gap={16}
-          horizontal
-          justify={'space-between'}
-          padding={12}
-          wrap={'wrap'}
-        >
-          <DeviceName />
-          <Flexbox flex={1} gap={12} horizontal>
-            <Card icon={<SystemIcon title={os} />} title={os || t('sync.device.unknownOS')} />
-            <Card
-              icon={browser && <BrowserIcon browser={browser} size={24} />}
-              title={browser || t('sync.device.unknownBrowser')}
-            />
-          </Flexbox>
-        </Flexbox>
-        <Flexbox
-          className={styles.glow}
-          height={'100%'}
-          style={{ left: 0, position: 'absolute', top: 0 }}
-          width={'100%'}
-        />
-      </Flexbox>
-    </Flexbox>
-  );
-});
-
-export default DeviceCard;