♻️ refactor: remove webrtc sync feature flag (#9002)

* refactor to clean code

* clean yjs

* upgrade icons

* Update package.json

* fix tests

* fix tests

* fix tests

Author: arvinxx

docs/self-hosting/advanced/webrtc.mdx

@@ -275,10 +275,7 @@
     "use-merge-value": "^1.2.0",
     "uuid": "^11.1.0",
     "ws": "^8.18.3",
-    "y-protocols": "^1.0.6",
-    "y-webrtc": "^10.3.0",
     "yaml": "^2.8.1",
-    "yjs": "^13.6.27",
     "zod": "^3.25.76",
     "zustand": "5.0.4",
     "zustand-utils": "^2.1.0"

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

@@ -1,8 +1,6 @@
-import { Tag } from '@lobehub/ui';
-import { Bot, Brain, Cloudy, Info, Mic2, Settings2, Sparkles } from 'lucide-react';
+import { Bot, Brain, Info, Mic2, Settings2, Sparkles } from 'lucide-react';
 import { useRouter } from 'next/navigation';
 import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
 import urlJoin from 'url-join';
 
 import { CellProps } from '@/components/Cell';
@@ -13,7 +11,7 @@ import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfi
 export const useCategory = () => {
   const router = useRouter();
   const { t } = useTranslation('setting');
-  const { enableWebrtc, showLLM } = useServerConfigStore(featureFlagsSelectors);
+  const { showLLM } = useServerConfigStore(featureFlagsSelectors);
 
   const items: CellProps[] = [
     {
@@ -26,18 +24,6 @@ export const useCategory = () => {
       key: SettingsTabs.SystemAgent,
       label: t('tab.system-agent'),
     },
-    enableWebrtc && {
-      icon: Cloudy,
-      key: SettingsTabs.Sync,
-      label: (
-        <Flexbox align={'center'} gap={8} horizontal>
-          {t('tab.sync')}
-          <Tag bordered={false} color={'warning'}>
-            {t('tab.experiment')}
-          </Tag>
-        </Flexbox>
-      ),
-    },
     showLLM &&
       (isDeprecatedEdition
         ? {

package.json

@@ -9,7 +9,6 @@ import { Flexbox } from 'react-layout-kit';
 
 import { ProductLogo } from '@/components/Branding';
 import { DESKTOP_HEADER_ICON_SIZE } from '@/const/layoutTokens';
-import SyncStatusTag from '@/features/SyncStatusInspector';
 import { useActionSWR } from '@/libs/swr';
 import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
 import { useSessionStore } from '@/store/session';
@@ -33,7 +32,7 @@ const Header = memo(() => {
   const { styles } = useStyles();
   const { t } = useTranslation('chat');
   const [createSession] = useSessionStore((s) => [s.createSession]);
-  const { enableWebrtc, showCreateSession } = useServerConfigStore(featureFlagsSelectors);
+  const { showCreateSession } = useServerConfigStore(featureFlagsSelectors);
 
   const { mutate, isValidating } = useActionSWR('session.createSession', () => createSession());
 
@@ -50,7 +49,6 @@ const Header = memo(() => {
           }}
         >
           <ProductLogo className={styles.logo} size={36} type={'text'} />
-          {enableWebrtc && <SyncStatusTag />}
         </Flexbox>
         <Flexbox align={'center'} gap={4} horizontal>
           <TogglePanelButton />

src/app/[variants]/(main)/(mobile)/me/settings/features/useCategory.tsx

@@ -9,7 +9,6 @@ import { Flexbox } from 'react-layout-kit';
 
 import { ProductLogo } from '@/components/Branding';
 import { MOBILE_HEADER_ICON_SIZE } from '@/const/layoutTokens';
-import SyncStatusInspector from '@/features/SyncStatusInspector';
 import UserAvatar from '@/features/User/UserAvatar';
 import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
 import { useSessionStore } from '@/store/session';
@@ -18,15 +17,14 @@ import { mobileHeaderSticky } from '@/styles/mobileHeader';
 const Header = memo(() => {
   const [createSession] = useSessionStore((s) => [s.createSession]);
   const router = useRouter();
-  const { enableWebrtc, showCreateSession } = useServerConfigStore(featureFlagsSelectors);
+  const { showCreateSession } = useServerConfigStore(featureFlagsSelectors);
 
   return (
     <ChatHeader
       left={
         <Flexbox align={'center'} gap={8} horizontal style={{ marginLeft: 8 }}>
           <UserAvatar onClick={() => router.push('/me')} size={32} />
           <ProductLogo type={'text'} />
-          {enableWebrtc && <SyncStatusInspector placement={'bottom'} />}
         </Flexbox>
       }
       right={

src/app/[variants]/(main)/chat/@session/_layout/Desktop/SessionHeader.tsx

@@ -1,8 +1,7 @@
-import { Icon, Tag } from '@lobehub/ui';
+import { Icon } from '@lobehub/ui';
 import {
   Bot,
   Brain,
-  Cloudy,
   Database,
   EthernetPort,
   Info,
@@ -14,7 +13,6 @@ import {
 import Link from 'next/link';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
 
 import type { MenuProps } from '@/components/Menu';
 import { isDeprecatedEdition, isDesktop } from '@/const/version';
@@ -24,8 +22,7 @@ import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfi
 export const useCategory = () => {
   const { t } = useTranslation('setting');
   const mobile = useServerConfigStore((s) => s.isMobile);
-  const { enableWebrtc, showLLM, enableSTT, hideDocs } =
-    useServerConfigStore(featureFlagsSelectors);
+  const { showLLM, enableSTT, hideDocs } = useServerConfigStore(featureFlagsSelectors);
 
   const cateItems: MenuProps['items'] = useMemo(
     () =>
@@ -48,21 +45,6 @@ export const useCategory = () => {
             </Link>
           ),
         },
-        // TODO: remove in V2
-        enableWebrtc && {
-          icon: <Icon icon={Cloudy} />,
-          key: SettingsTabs.Sync,
-          label: (
-            <Link href={'/settings/sync'} onClick={(e) => e.preventDefault()}>
-              <Flexbox align={'center'} gap={8} horizontal>
-                {t('tab.sync')}
-                <Tag bordered={false} color={'warning'}>
-                  {t('tab.experiment')}
-                </Tag>
-              </Flexbox>
-            </Link>
-          ),
-        },
         !mobile && {
           icon: <Icon icon={KeyboardIcon} />,
           key: SettingsTabs.Hotkey,
@@ -146,7 +128,7 @@ export const useCategory = () => {
           ),
         },
       ].filter(Boolean) as MenuProps['items'],
-    [t, enableWebrtc, showLLM],
+    [t, showLLM],
   );
 
   return cateItems;