@lobehub/chat 0.152.4 → 0.152.6

package/src/app/(main)/settings/llm/Minimax/index.tsx

@@ -1,6 +1,5 @@
-'use client';
-
 import { Minimax } from '@lobehub/icons';
+import { useTheme } from 'antd-style';
 import { memo } from 'react';
 
 import { ModelProvider } from '@/libs/agent-runtime';
@@ -8,11 +7,18 @@ import { ModelProvider } from '@/libs/agent-runtime';
 import ProviderConfig from '../components/ProviderConfig';
 
 const MinimaxProvider = memo(() => {
+  const theme = useTheme();
+
   return (
     <ProviderConfig
       checkModel={'abab5.5s-chat'}
       provider={ModelProvider.Minimax}
-      title={<Minimax.Combine size={32} type={'color'} />}
+      title={
+        <Minimax.Combine
+          color={theme.isDarkMode ? theme.colorText : Minimax.colorPrimary}
+          size={32}
+        />
+      }
     />
   );
 });

package/src/app/(main)/settings/llm/Mistral/index.tsx

@@ -1,6 +1,5 @@
-'use client';
-
 import { Mistral } from '@lobehub/icons';
+import { useTheme } from 'antd-style';
 import { memo } from 'react';
 
 import { ModelProvider } from '@/libs/agent-runtime';
@@ -8,11 +7,18 @@ import { ModelProvider } from '@/libs/agent-runtime';
 import ProviderConfig from '../components/ProviderConfig';
 
 const MistralProvider = memo(() => {
+  const theme = useTheme();
+
   return (
     <ProviderConfig
       checkModel={'open-mistral-7b'}
       provider={ModelProvider.Mistral}
-      title={<Mistral.Combine size={26} type={'color'} />}
+      title={
+        <Mistral.Combine
+          color={theme.isDarkMode ? theme.colorText : Mistral.colorPrimary}
+          size={24}
+        />
+      }
     />
   );
 });

package/src/app/(main)/settings/llm/Moonshot/index.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { Moonshot } from '@lobehub/icons';
 import { useTheme } from 'antd-style';
 import { memo } from 'react';
@@ -18,7 +16,7 @@ const MoonshotProvider = memo(() => {
       title={
         <Moonshot.Combine
           color={theme.isDarkMode ? theme.colorText : Moonshot.colorPrimary}
-          size={22}
+          size={24}
         />
       }
     />

package/src/app/(main)/settings/llm/Ollama/index.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { Ollama } from '@lobehub/icons';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -25,7 +23,7 @@ const OllamaProvider = memo(() => {
       showApiKey={false}
       showBrowserRequest
       showEndpoint
-      title={<Ollama.Combine size={28} />}
+      title={<Ollama.Combine size={24} />}
     />
   );
 });

package/src/app/(main)/settings/llm/OpenAI/index.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { OpenAI } from '@lobehub/icons';
 import { memo } from 'react';
 

package/src/app/(main)/settings/llm/OpenRouter/index.tsx

@@ -1,6 +1,5 @@
-'use client';
-
 import { OpenRouter } from '@lobehub/icons';
+import { useTheme } from 'antd-style';
 import { memo } from 'react';
 
 import { ModelProvider } from '@/libs/agent-runtime';
@@ -8,12 +7,19 @@ import { ModelProvider } from '@/libs/agent-runtime';
 import ProviderConfig from '../components/ProviderConfig';
 
 const OpenRouterProvider = memo(() => {
+  const theme = useTheme();
+
   return (
     <ProviderConfig
       checkModel={'mistralai/mistral-7b-instruct:free'}
       modelList={{ showModelFetcher: true }}
       provider={ModelProvider.OpenRouter}
-      title={<OpenRouter.Combine iconProps={{ color: OpenRouter.colorPrimary }} size={20} />}
+      title={
+        <OpenRouter.Combine
+          color={theme.isDarkMode ? theme.colorText : OpenRouter.colorPrimary}
+          size={24}
+        />
+      }
     />
   );
 });

package/src/app/(main)/settings/llm/Perplexity/index.tsx

@@ -1,6 +1,5 @@
-'use client';
-
 import { Perplexity } from '@lobehub/icons';
+import { useTheme } from 'antd-style';
 import { memo } from 'react';
 
 import { ModelProvider } from '@/libs/agent-runtime';
@@ -8,11 +7,18 @@ import { ModelProvider } from '@/libs/agent-runtime';
 import ProviderConfig from '../components/ProviderConfig';
 
 const PerplexityProvider = memo(() => {
+  const theme = useTheme();
+
   return (
     <ProviderConfig
       checkModel={'pplx-7b-chat'}
       provider={ModelProvider.Perplexity}
-      title={<Perplexity.Combine size={24} type={'color'} />}
+      title={
+        <Perplexity.Combine
+          color={theme.isDarkMode ? theme.colorText : Perplexity.colorPrimary}
+          size={24}
+        />
+      }
     />
   );
 });

package/src/app/(main)/settings/llm/TogetherAI/index.tsx

@@ -1,17 +1,23 @@
-'use client';
-
 import { Together } from '@lobehub/icons';
+import { useTheme } from 'antd-style';
 import { memo } from 'react';
 
 import ProviderConfig from '../components/ProviderConfig';
 
 const TogetherAIProvider = memo(() => {
+  const theme = useTheme();
+
   return (
     <ProviderConfig
       checkModel={'togethercomputer/alpaca-7b'}
       modelList={{ showModelFetcher: true }}
       provider={'togetherai'}
-      title={<Together.Combine size={26} type={'color'} />}
+      title={
+        <Together.Combine
+          color={theme.isDarkMode ? theme.colorText : Together.colorPrimary}
+          size={24}
+        />
+      }
     />
   );
 });

package/src/app/(main)/settings/llm/ZeroOne/index.tsx

@@ -1,6 +1,5 @@
-'use client';
-
 import { ZeroOne } from '@lobehub/icons';
+import { useTheme } from 'antd-style';
 import { memo } from 'react';
 
 import { ModelProvider } from '@/libs/agent-runtime';
@@ -8,11 +7,18 @@ import { ModelProvider } from '@/libs/agent-runtime';
 import ProviderConfig from '../components/ProviderConfig';
 
 const ZeroOneProvider = memo(() => {
+  const theme = useTheme();
+
   return (
     <ProviderConfig
       checkModel={'yi-34b-chat-0205'}
       provider={ModelProvider.ZeroOne}
-      title={<ZeroOne.Text size={20} />}
+      title={
+        <ZeroOne.Combine
+          color={theme.isDarkMode ? theme.colorText : ZeroOne.colorPrimary}
+          size={32}
+        />
+      }
     />
   );
 });

package/src/app/(main)/settings/llm/Zhipu/index.tsx

@@ -1,16 +1,23 @@
-'use client';
-
 import { Zhipu } from '@lobehub/icons';
+import { useTheme } from 'antd-style';
+import { lighten } from 'polished';
 import { memo } from 'react';
 
 import ProviderConfig from '../components/ProviderConfig';
 
 const ZhipuProvider = memo(() => {
+  const theme = useTheme();
+
   return (
     <ProviderConfig
       checkModel={'glm-3-turbo'}
       provider={'zhipu'}
-      title={<Zhipu.Combine size={32} type={'color'} />}
+      title={
+        <Zhipu.Combine
+          color={theme.isDarkMode ? lighten(0.1, Zhipu.colorPrimary) : Zhipu.colorPrimary}
+          size={32}
+        />
+      }
     />
   );
 });

package/src/app/(main)/settings/llm/components/Checker.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { CheckCircleFilled } from '@ant-design/icons';
 import { Alert, Highlighter } from '@lobehub/ui';
 import { Button } from 'antd';

package/src/app/(main)/settings/llm/components/ProviderConfig/index.tsx

@@ -1,11 +1,8 @@
-'use client';
-
 import { Form, type FormItemProps, type ItemGroup } from '@lobehub/ui';
 import { Form as AntForm, Input, Switch } from 'antd';
 import { debounce } from 'lodash-es';
 import { ReactNode, memo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
 
 import { useSyncSettings } from '@/app/(main)/settings/hooks/useSyncSettings';
 import {
@@ -145,19 +142,7 @@ const ProviderConfig = memo<ProviderConfigProps>(
           value={enabled}
         />
       ) : undefined,
-      title: (
-        <Flexbox
-          align={'center'}
-          horizontal
-          style={{
-            height: 24,
-            maxHeight: 24,
-            ...(enabled ? {} : { filter: 'grayscale(100%)', maxHeight: 24, opacity: 0.66 }),
-          }}
-        >
-          {title}
-        </Flexbox>
-      ),
+      title,
     };
 
     return (

package/src/app/(main)/settings/llm/index.tsx

@@ -1,7 +1,13 @@
 'use client';
 
-import { Flexbox } from 'react-layout-kit';
+import Link from 'next/link';
+import { memo } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
 
+import PageTitle from '@/components/PageTitle';
+import { MORE_MODEL_PROVIDER_REQUEST_URL } from '@/const/url';
+
+import Footer from '../features/Footer';
 import Anthropic from './Anthropic';
 import Azure from './Azure';
 import Bedrock from './Bedrock';
@@ -17,14 +23,16 @@ import Perplexity from './Perplexity';
 import TogetherAI from './TogetherAI';
 import ZeroOne from './ZeroOne';
 import Zhipu from './Zhipu';
-import Footer from './components/Footer';
 
-const Page = () => {
+export default memo(() => {
+  const { t } = useTranslation('setting');
+
   return (
-    <Flexbox gap={24}>
+    <>
+      <PageTitle title={t('tab.llm')} />
       <OpenAI />
-      <Azure />
       <Ollama />
+      <Azure />
       <Google />
       <Anthropic />
       <Bedrock />
@@ -37,11 +45,15 @@ const Page = () => {
       <Moonshot />
       <Zhipu />
       <ZeroOne />
-      <Footer />
-    </Flexbox>
+      <Footer>
+        <Trans i18nKey="llm.waitingForMore" ns={'setting'}>
+          更多模型正在
+          <Link aria-label={'todo'} href={MORE_MODEL_PROVIDER_REQUEST_URL} target="_blank">
+            计划接入
+          </Link>
+          中 ，敬请期待 ✨
+        </Trans>
+      </Footer>
+    </>
   );
-};
-
-Page.displayName = 'LlmSetting';
-
-export default Page;
+});

package/src/app/(main)/settings/llm/layout.tsx

@@ -0,0 +1,11 @@
+import { notFound } from 'next/navigation';
+import { PropsWithChildren } from 'react';
+
+import { serverFeatureFlags } from '@/config/server/featureFlags';
+
+export default ({ children }: PropsWithChildren) => {
+  const showLLM = serverFeatureFlags().showLLM;
+  if (!showLLM) return notFound();
+
+  return children;
+};

package/src/app/(main)/settings/llm/loading.tsx

@@ -0,0 +1,3 @@
+import { Skeleton } from 'antd';
+
+export default () => <Skeleton paragraph={{ rows: 8 }} />;

package/src/app/(main)/settings/llm/page.tsx

@@ -1,20 +1,5 @@
-import { notFound } from 'next/navigation';
-
-import { serverFeatureFlags } from '@/config/server/featureFlags';
-import { translation } from '@/server/translation';
-
 import Page from './index';
 
-export const generateMetadata = async () => {
-  const { t } = await translation('setting');
-  return {
-    title: t('tab.llm'),
-  };
-};
-
 export default () => {
-  const showLLM = serverFeatureFlags().showLLM;
-  if (!showLLM) return notFound();
-
   return <Page />;
 };

package/src/app/(main)/settings/page.tsx

@@ -1,7 +1,19 @@
-import { redirect } from 'next/navigation';
+import { getServerConfig } from '@/config/server';
+import { isMobileDevice } from '@/utils/responsive';
+
+import DesktopPage from './(desktop)';
+import MobilePage from './(mobile)';
 
 const Page = () => {
-  return redirect('/settings/common');
+  const mobile = isMobileDevice();
+
+  if (mobile) return <MobilePage />;
+
+  const { SHOW_ACCESS_CODE_CONFIG, ENABLE_OAUTH_SSO } = getServerConfig();
+
+  return (
+    <DesktopPage showAccessCodeConfig={SHOW_ACCESS_CODE_CONFIG} showOAuthLogin={ENABLE_OAUTH_SSO} />
+  );
 };
 
 export default Page;

package/src/app/(main)/settings/sync/{features/DeviceInfo → DeviceInfo}/Card.tsx

@@ -5,18 +5,18 @@ import { Center, Flexbox } from 'react-layout-kit';
 const useStyles = createStyles(({ css, token, responsive }) => ({
   container: css`
     background: ${token.colorFillTertiary};
-    border-radius: ${token.borderRadius}px;
+    border-radius: 12px;
 
     .${responsive.mobile} {
       width: 100%;
     }
   `,
   icon: css`
-    width: 24px;
-    height: 24px;
+    width: 40px;
+    height: 40px;
   `,
   title: css`
-    font-size: 16px;
+    font-size: 20px;
   `,
 }));
 
@@ -27,14 +27,13 @@ const Card = memo<{ icon: ReactNode; title: string }>(({ title, icon }) => {
     <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 className={styles.title}>{title}</Flexbox>
     </Flexbox>
   );
 });

package/src/app/(main)/settings/sync/DeviceInfo/DeviceName.tsx

@@ -0,0 +1,66 @@
+'use client';
+
+import { EditableText } from '@lobehub/ui';
+import { Typography } from 'antd';
+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 gap={4}>
+      <Flexbox
+        align={'center'}
+        height={40}
+        horizontal
+        style={{ fontSize: 20, fontWeight: 'bold' }}
+        width={'100%'}
+      >
+        {!deviceName && !editing && (
+          <Flexbox
+            onClick={() => {
+              setEditing(true);
+            }}
+            style={{ cursor: 'pointer' }}
+          >
+            <Typography.Text type={'secondary'}>{t('sync.device.deviceName.hint')}</Typography.Text>
+          </Flexbox>
+        )}
+        <EditableText
+          editing={editing}
+          onBlur={(e) => {
+            updateDeviceName(e.target.value);
+          }}
+          onChange={(e) => {
+            updateDeviceName(e);
+          }}
+          onEditingChange={setEditing}
+          placeholder={t('sync.device.deviceName.placeholder')}
+          size={'large'}
+          style={{ maxWidth: 200 }}
+          type={'block'}
+          value={deviceName}
+        />
+      </Flexbox>
+    </Flexbox>
+  );
+});
+
+export default DeviceName;

package/src/app/(main)/settings/sync/{features/DeviceInfo → DeviceInfo}/index.tsx

@@ -10,22 +10,47 @@ import { Flexbox } from 'react-layout-kit';
 import { BrowserIcon } from '@/components/BrowserIcon';
 import { MAX_WIDTH } from '@/const/layoutTokens';
 
+import SystemIcon from '../components/SystemIcon';
 import Card from './Card';
 import DeviceName from './DeviceName';
-import SystemIcon from './SystemIcon';
 
 const useStyles = createStyles(({ css, cx, responsive, isDarkMode, token, stylish }) => ({
+  cards: css`
+    flex-direction: row;
+    ${responsive.mobile} {
+      flex-direction: column;
+      width: 100%;
+    }
+  `,
   container: css`
     position: relative;
     width: 100%;
     border-radius: ${token.borderRadiusLG}px;
   `,
-  content: css`
-    z-index: 2;
-    padding: 8px;
-    background: ${rgba(token.colorBgContainer, isDarkMode ? 0.7 : 1)};
-    border-radius: ${token.borderRadiusLG - 1}px;
-  `,
+  content: cx(
+    stylish.blurStrong,
+    css`
+      z-index: 2;
+
+      flex-direction: row;
+      justify-content: space-between;
+
+      height: 88px;
+      padding: 12px;
+
+      background: ${rgba(token.colorBgContainer, isDarkMode ? 0.7 : 1)};
+      border-radius: ${token.borderRadiusLG - 1}px;
+
+      ${responsive.mobile} {
+        flex-direction: column;
+        gap: 16px;
+        align-items: flex-start;
+
+        width: 100%;
+        padding: 8px;
+      }
+    `,
+  ),
   glow: cx(
     stylish.gradientAnimation,
     css`
@@ -65,26 +90,15 @@ const DeviceCard = memo<DeviceCardProps>(({ browser, os }) => {
       <Flexbox className={styles.container} padding={4}>
         <Flexbox horizontal paddingBlock={8} paddingInline={12}>
           <div>
-            <Typography style={{ fontSize: 18, fontWeight: 'bold' }}>
-              {t('sync.device.title')}
-            </Typography>
+            <Typography style={{ fontWeight: 'bold' }}>{t('sync.device.title')}</Typography>
           </div>
         </Flexbox>
-        <Flexbox
-          align={'center'}
-          className={styles.content}
-          flex={1}
-          gap={16}
-          horizontal
-          justify={'space-between'}
-          padding={12}
-          wrap={'wrap'}
-        >
+        <Flexbox align={'center'} className={styles.content} flex={1} padding={12}>
           <DeviceName />
-          <Flexbox flex={1} gap={12} horizontal>
+          <Flexbox className={styles.cards} gap={12}>
             <Card icon={<SystemIcon title={os} />} title={os || t('sync.device.unknownOS')} />
             <Card
-              icon={browser && <BrowserIcon browser={browser} size={24} />}
+              icon={browser && <BrowserIcon browser={browser} size={32} />}
               title={browser || t('sync.device.unknownBrowser')}
             />
           </Flexbox>

package/src/app/(main)/settings/sync/PageTitle.tsx

@@ -0,0 +1,11 @@
+'use client';
+
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import PageTitle from '@/components/PageTitle';
+
+export default memo(() => {
+  const { t } = useTranslation('setting');
+  return <PageTitle title={t('tab.sync')} />;
+});

package/src/app/(main)/settings/sync/{features/WebRTC → WebRTC}/ChannelNameInput.tsx

@@ -5,13 +5,13 @@ import { LucideDices } from 'lucide-react';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { generateRandomRoomName } from './generateRandomRoomName';
+import { generateRandomRoomName } from '../util';
 
 interface ChannelNameInputProps extends Omit<InputProps, 'form'> {
   form: FormInstance;
 }
 
-const ChannelNameInput = memo<ChannelNameInputProps>(({ form, ...rest }) => {
+const ChannelNameInput = memo<ChannelNameInputProps>(({ form, ...res }) => {
   const { t } = useTranslation('setting');
   const [loading, setLoading] = useState(false);
 
@@ -38,7 +38,7 @@ const ChannelNameInput = memo<ChannelNameInputProps>(({ form, ...rest }) => {
           title={t('sync.webrtc.channelName.shuffle')}
         />
       }
-      {...rest}
+      {...res}
     />
   );
 });