@lobehub/chat 0.152.1 → 0.152.2

package/src/app/(main)/settings/about/features/AboutList.tsx

@@ -0,0 +1,122 @@
+'use client';
+
+import { Grid, Icon } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import {
+  Book,
+  Feather,
+  FileClock,
+  Github,
+  Heart,
+  HeartHandshake,
+  Home,
+  Lock,
+  Rss,
+} from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { ABOUT, CHANGELOG, FEEDBACK, GITHUB, PRIVACY_URL, TERMS_URL } from '@/const/url';
+
+const useStyles = createStyles(({ css, token, responsive }) => ({
+  card: css`
+    cursor: pointer;
+
+    padding: 24px;
+
+    background: ${token.colorFillTertiary};
+    border: 1px solid ${token.colorFillSecondary};
+    border-radius: ${token.borderRadiusLG}px;
+
+    &:hover {
+      background: ${token.colorFillSecondary};
+      border: 1px solid ${token.colorFill};
+    }
+
+    ${responsive.mobile} {
+      padding: 16px;
+    }
+  `,
+  container: css`
+    ${responsive.mobile} {
+      padding-inline: 16px;
+    }
+  `,
+}));
+
+const AboutList = memo(() => {
+  const { styles } = useStyles();
+  const { t } = useTranslation('common');
+
+  const items = [
+    {
+      icon: Home,
+      label: t('officialSite'),
+      onClick: () => window.open('https://lobehub.com', '__blank'),
+      value: 'officialSite',
+    },
+
+    {
+      icon: Book,
+      label: t('document'),
+      onClick: () => window.open(FEEDBACK, '__blank'),
+      value: 'feedback',
+    },
+    {
+      icon: Rss,
+      label: t('blog'),
+      onClick: () => window.open('https://lobehub.com/blog', '__blank'),
+      value: 'blog',
+    },
+    {
+      icon: Github,
+      label: 'GitHub',
+      onClick: () => window.open(GITHUB, '__blank'),
+      value: 'feedback',
+    },
+    {
+      icon: Feather,
+      label: t('feedback'),
+      onClick: () => window.open(FEEDBACK, '__blank'),
+      value: 'feedback',
+    },
+    {
+      icon: FileClock,
+      label: t('changelog'),
+      onClick: () => window.open(CHANGELOG, '__blank'),
+      value: 'changelog',
+    },
+    {
+      icon: HeartHandshake,
+      label: t('terms'),
+      onClick: () => window.open(TERMS_URL, '__blank'),
+      value: 'terms',
+    },
+    {
+      icon: Lock,
+      label: t('privacy'),
+      onClick: () => window.open(PRIVACY_URL, '__blank'),
+      value: 'privacy',
+    },
+    {
+      icon: Heart,
+      label: t('about'),
+      onClick: () => window.open(ABOUT, '__blank'),
+      value: 'about',
+    },
+  ];
+
+  return (
+    <Grid className={styles.container} maxItemWidth={144} width={'100%'}>
+      {items.map(({ value, icon, label, onClick }) => (
+        <Flexbox className={styles.card} gap={8} horizontal key={value} onClick={onClick}>
+          <Icon icon={icon} size={{ fontSize: 20 }} />
+          {label}
+        </Flexbox>
+      ))}
+    </Grid>
+  );
+});
+
+export default AboutList;

package/src/app/(main)/settings/about/features/Analytics.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import { Form, type ItemGroup } from '@lobehub/ui';
+import { Switch } from 'antd';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { FORM_STYLE } from '@/const/layoutTokens';
+import { useUserStore } from '@/store/user';
+import { preferenceSelectors } from '@/store/user/slices/preference/selectors';
+
+type SettingItemGroup = ItemGroup;
+
+const Analytics = memo(() => {
+  const { t } = useTranslation('setting');
+  const checked = useUserStore(preferenceSelectors.userAllowTrace);
+  const [updatePreference] = useUserStore((s) => [s.updatePreference]);
+
+  const items: SettingItemGroup = {
+    children: [
+      {
+        children: (
+          <Switch
+            checked={!!checked}
+            onChange={(e) => {
+              updatePreference({ telemetry: e });
+            }}
+          />
+        ),
+        desc: t('analytics.telemetry.desc'),
+        label: t('analytics.telemetry.title'),
+        minWidth: undefined,
+        valuePropName: 'checked',
+      },
+    ],
+    title: t('analytics.title'),
+  };
+
+  return <Form items={[items]} itemsType={'group'} {...FORM_STYLE} />;
+});
+
+export default Analytics;

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

@@ -0,0 +1,26 @@
+import { Logo, Tag } from '@lobehub/ui';
+import { PropsWithChildren } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { CURRENT_VERSION } from '@/const/version';
+import { isMobileDevice } from '@/utils/responsive';
+
+const COPYRIGHT = `© 2023-${new Date().getFullYear()} LobeHub, LLC`;
+
+const Layout = ({ children }: PropsWithChildren) => {
+  const isMobile = isMobileDevice();
+  return (
+    <Flexbox align={'center'} gap={12} paddingBlock={36} width={'100%'}>
+      <Logo size={isMobile ? 100 : 120} />
+      <h1 style={{ fontSize: isMobile ? 32 : 36, fontWeight: 900, lineHeight: 1, marginBottom: 0 }}>
+        LobeChat
+      </h1>
+      <Tag>v{CURRENT_VERSION}</Tag>
+      {children}
+      <div>Empowering your AI dreams by LobeHub</div>
+      <div style={{ fontWeight: 400, opacity: 0.33 }}>{COPYRIGHT}</div>
+    </Flexbox>
+  );
+};
+
+export default Layout;

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

@@ -0,0 +1,5 @@
+import SkeletonLoading from '@/components/SkeletonLoading';
+
+export default () => {
+  return <SkeletonLoading paragraph={{ rows: 3 }} title={false} />;
+};

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

@@ -1,37 +1,32 @@
-'use client';
-
-import { createStyles } from 'antd-style';
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import PageTitle from '@/components/PageTitle';
-import { useServerConfigStore } from '@/store/serverConfig';
-import { serverConfigSelectors } from '@/store/serverConfig/selectors';
-
-import AboutList from './AboutList';
-import Analytics from './Analytics';
-
-const useStyles = createStyles(({ css }) => ({
-  container: css`
-    width: 100%;
-    max-width: 1024px;
-  `,
-}));
+import Follow from '@//features/Follow';
+import AboutList from '@/app/(main)/settings//about/features/AboutList';
+import Analytics from '@/app/(main)/settings/about/features/Analytics';
+import { getServerConfig } from '@/config/server';
+import { translation } from '@/server/translation';
 
-export default memo(() => {
-  const { t } = useTranslation('setting');
+const enabledTelemetryChat = getServerConfig().ENABLE_LANGFUSE;
 
-  const { styles } = useStyles();
-  const enabledTelemetryChat = useServerConfigStore(serverConfigSelectors.enabledTelemetryChat);
+export const generateMetadata = async () => {
+  const { t } = await translation('setting');
+  return {
+    title: t('tab.about'),
+  };
+};
 
+const Page = () => {
   return (
     <>
-      <PageTitle title={t('tab.tts')} />
-      <Flexbox align={'center'} className={styles.container} gap={12}>
+      <Flexbox gap={24} style={{ marginBlock: 48 }} width={'100%'}>
         <AboutList />
         {enabledTelemetryChat && <Analytics />}
       </Flexbox>
+      <Follow />
     </>
   );
-});
+};
+
+Page.displayName = 'AboutSetting';
+
+export default Page;

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

@@ -0,0 +1,35 @@
+'use client';
+
+import isEqual from 'fast-deep-equal';
+import { PropsWithChildren, memo } from 'react';
+
+import { INBOX_SESSION_ID } from '@/const/session';
+import StoreUpdater from '@/features/AgentSetting/StoreUpdater';
+import { Provider, createStore } from '@/features/AgentSetting/store';
+import { useUserStore } from '@/store/user';
+import { settingsSelectors } from '@/store/user/selectors';
+
+const Layout = memo(({ children }: PropsWithChildren) => {
+  const config = useUserStore(settingsSelectors.defaultAgentConfig, isEqual);
+  const meta = useUserStore(settingsSelectors.defaultAgentMeta, isEqual);
+  const [updateAgent] = useUserStore((s) => [s.updateDefaultAgent]);
+
+  return (
+    <Provider createStore={createStore}>
+      <StoreUpdater
+        config={config}
+        id={INBOX_SESSION_ID}
+        meta={meta}
+        onConfigChange={(config) => {
+          updateAgent({ config });
+        }}
+        onMetaChange={(meta) => {
+          updateAgent({ meta });
+        }}
+      />
+      {children}
+    </Provider>
+  );
+});
+
+export default Layout;

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

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

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

@@ -1,18 +1,31 @@
-'use client';
+import AgentChat from '@/features/AgentSetting/AgentChat';
+import AgentMeta from '@/features/AgentSetting/AgentMeta';
+import AgentModal from '@/features/AgentSetting/AgentModal';
+import AgentPlugin from '@/features/AgentSetting/AgentPlugin';
+import AgentPrompt from '@/features/AgentSetting/AgentPrompt';
+import AgentTTS from '@/features/AgentSetting/AgentTTS';
+import { translation } from '@/server/translation';
 
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
+export const generateMetadata = async () => {
+  const { t } = await translation('setting');
+  return {
+    title: t('tab.agent'),
+  };
+};
 
-import PageTitle from '@/components/PageTitle';
-
-import Agent from './Agent';
-
-export default memo(() => {
-  const { t } = useTranslation('setting');
+const Page = () => {
   return (
     <>
-      <PageTitle title={t('tab.agent')} />
-      <Agent />
+      <AgentPrompt />
+      <AgentMeta />
+      <AgentChat />
+      <AgentModal />
+      <AgentTTS />
+      <AgentPlugin />
     </>
   );
-});
+};
+
+Page.displayName = 'AgentSetting';
+
+export default Page;

package/src/app/(main)/settings/common/{Common.tsx → features/Common.tsx}

@@ -1,12 +1,13 @@
+'use client';
+
 import { Form, type ItemGroup } from '@lobehub/ui';
-import { Form as AntForm, App, Button, Input } from 'antd';
+import { App, Button, Input } from 'antd';
 import isEqual from 'fast-deep-equal';
-import { AppWindow } from 'lucide-react';
 import { signIn, signOut } from 'next-auth/react';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { useSyncSettings } from '@/app/(main)/settings/hooks/useSyncSettings';
+import { useSyncSettings } from '@/app/(main)/settings//hooks/useSyncSettings';
 import { FORM_STYLE } from '@/const/layoutTokens';
 import { DEFAULT_SETTINGS } from '@/const/settings';
 import { useOAuthSession } from '@/hooks/useOAuthSession';
@@ -26,7 +27,7 @@ export interface SettingsCommonProps {
 
 const Common = memo<SettingsCommonProps>(({ showAccessCodeConfig, showOAuthLogin }) => {
   const { t } = useTranslation('setting');
-  const [form] = AntForm.useForm();
+  const [form] = Form.useForm();
 
   const { user, isOAuthLoggedIn } = useOAuthSession();
 
@@ -146,7 +147,6 @@ const Common = memo<SettingsCommonProps>(({ showAccessCodeConfig, showOAuthLogin
         minWidth: undefined,
       },
     ],
-    icon: AppWindow,
     title: t('settingSystem.title'),
   };
 
@@ -157,7 +157,9 @@ const Common = memo<SettingsCommonProps>(({ showAccessCodeConfig, showOAuthLogin
       form={form}
       initialValues={settings}
       items={[system]}
+      itemsType={'group'}
       onValuesChange={setSettings}
+      variant={'pure'}
       {...FORM_STYLE}
     />
   );

package/src/app/(main)/settings/common/{Theme.tsx → features/Theme/index.tsx}

@@ -1,7 +1,9 @@
+'use client';
+
 import { Form, type ItemGroup, SelectWithImg, SliderWithInput } from '@lobehub/ui';
-import { Form as AntForm, Select } from 'antd';
+import { Select } from 'antd';
 import isEqual from 'fast-deep-equal';
-import { Monitor, Moon, Palette, Sun } from 'lucide-react';
+import { Monitor, Moon, Sun } from 'lucide-react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -14,14 +16,13 @@ import { useUserStore } from '@/store/user';
 import { settingsSelectors } from '@/store/user/selectors';
 import { switchLang } from '@/utils/client/switchLang';
 
-import { ThemeSwatchesNeutral, ThemeSwatchesPrimary } from '../features/ThemeSwatches';
+import { ThemeSwatchesNeutral, ThemeSwatchesPrimary } from './ThemeSwatches';
 
 type SettingItemGroup = ItemGroup;
 
 const Theme = memo(() => {
   const { t } = useTranslation('setting');
-  const [form] = AntForm.useForm();
-
+  const [form] = Form.useForm();
   const settings = useUserStore(settingsSelectors.currentSettings, isEqual);
   const [setThemeMode, setSettings] = useUserStore((s) => [s.switchThemeMode, s.setSettings]);
 
@@ -125,7 +126,6 @@ const Theme = memo(() => {
         minWidth: undefined,
       },
     ],
-    icon: Palette,
     title: t('settingTheme.title'),
   };
 
@@ -134,7 +134,9 @@ const Theme = memo(() => {
       form={form}
       initialValues={settings}
       items={[theme]}
+      itemsType={'group'}
       onValuesChange={setSettings}
+      variant={'pure'}
       {...FORM_STYLE}
     />
   );

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

@@ -1,9 +1,26 @@
 import { getServerConfig } from '@/config/server';
+import { translation } from '@/server/translation';
 
-import Index from './index';
+import Common from './features/Common';
+import Theme from './features/Theme';
 
-export default () => {
-  const { SHOW_ACCESS_CODE_CONFIG, ENABLE_OAUTH_SSO } = getServerConfig();
+export const generateMetadata = async () => {
+  const { t } = await translation('setting');
+  return {
+    title: t('tab.common'),
+  };
+};
 
-  return <Index showAccessCodeConfig={SHOW_ACCESS_CODE_CONFIG} showOAuthLogin={ENABLE_OAUTH_SSO} />;
+const Page = () => {
+  const { SHOW_ACCESS_CODE_CONFIG, ENABLE_OAUTH_SSO } = getServerConfig();
+  return (
+    <>
+      <Theme />
+      <Common showAccessCodeConfig={SHOW_ACCESS_CODE_CONFIG} showOAuthLogin={ENABLE_OAUTH_SSO} />
+    </>
+  );
 };
+
+Page.displayName = 'CommonSetting';
+
+export default Page;

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

@@ -0,0 +1,5 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+
+export default dynamic(() => import('@/components/Error'));

package/src/app/(main)/settings/features/Footer.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { Divider } from 'antd';
 import { createStyles } from 'antd-style';
 import { PropsWithChildren, memo } from 'react';

package/src/app/(main)/settings/features/UpgradeAlert.tsx

@@ -1,8 +1,11 @@
+'use client';
+
 import { Alert } from '@lobehub/ui';
 import { Button } from 'antd';
 import Link from 'next/link';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
 
 import { MANUAL_UPGRADE_URL } from '@/const/url';
 import { useGlobalStore } from '@/store/global';
@@ -11,23 +14,28 @@ const UpgradeAlert = memo(() => {
   const [hasNewVersion, latestVersion] = useGlobalStore((s) => [s.hasNewVersion, s.latestVersion]);
   const { t } = useTranslation('common');
 
+  if (!hasNewVersion) return;
+
   return (
-    hasNewVersion && (
-      <Alert
-        action={
-          <Link aria-label={t('upgradeVersion.action')} href={MANUAL_UPGRADE_URL} target={'_blank'}>
-            <Button size={'small'} type={'primary'}>
+    <Alert
+      closable
+      message={
+        <Flexbox gap={8}>
+          <p>{t('upgradeVersion.newVersion', { version: `v${latestVersion}` })}</p>
+          <Link
+            aria-label={t('upgradeVersion.action')}
+            href={MANUAL_UPGRADE_URL}
+            style={{ marginBottom: 6 }}
+            target={'_blank'}
+          >
+            <Button block size={'small'} type={'primary'}>
               {t('upgradeVersion.action')}
             </Button>
           </Link>
-        }
-        closable
-        message={t('upgradeVersion.newVersion', { version: latestVersion })}
-        showIcon={false}
-        style={{ marginBottom: 6 }}
-        type={'info'}
-      />
-    )
+        </Flexbox>
+      }
+      type={'info'}
+    />
   );
 });
 

package/src/app/(main)/settings/hooks/useCategory.tsx

@@ -0,0 +1,54 @@
+import { Icon } from '@lobehub/ui';
+import { Bot, Cloudy, Info, Mic2, Settings2, Webhook } from 'lucide-react';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import type { MenuProps } from '@/components/Menu';
+import { SettingsTabs } from '@/store/global/initialState';
+import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
+
+interface UseCategoryOptions {
+  mobile?: boolean;
+}
+
+export const useCategory = ({ mobile }: UseCategoryOptions = {}) => {
+  const { t } = useTranslation('setting');
+  const { enableWebrtc, showLLM } = useServerConfigStore(featureFlagsSelectors);
+
+  const iconSize = mobile ? { fontSize: 20 } : undefined;
+
+  const cateItems: MenuProps['items'] = useMemo(
+    () =>
+      [
+        {
+          icon: <Icon icon={Settings2} size={iconSize} />,
+          key: SettingsTabs.Common,
+          label: t('tab.common'),
+        },
+        enableWebrtc && {
+          icon: <Icon icon={Cloudy} size={iconSize} />,
+          key: SettingsTabs.Sync,
+          label: t('tab.sync'),
+        },
+        showLLM && {
+          icon: <Icon icon={Webhook} size={iconSize} />,
+          key: SettingsTabs.LLM,
+          label: t('tab.llm'),
+        },
+        { icon: <Icon icon={Mic2} size={iconSize} />, key: SettingsTabs.TTS, label: t('tab.tts') },
+        {
+          icon: <Icon icon={Bot} size={iconSize} />,
+          key: SettingsTabs.Agent,
+          label: t('tab.agent'),
+        },
+        {
+          icon: <Icon icon={Info} size={iconSize} />,
+          key: SettingsTabs.About,
+          label: t('tab.about'),
+        },
+      ].filter(Boolean) as MenuProps['items'],
+    [t, enableWebrtc, showLLM],
+  );
+
+  return cateItems;
+};

package/src/app/(main)/settings/hooks/useSyncSettings.ts

@@ -1,10 +1,10 @@
 import { FormInstance } from 'antd/es/form/hooks/useForm';
-import { useEffect } from 'react';
+import { useLayoutEffect } from 'react';
 
 import { useUserStore } from '@/store/user';
 
 export const useSyncSettings = (form: FormInstance) => {
-  useEffect(() => {
+  useLayoutEffect(() => {
     // set the first time
     form.setFieldsValue(useUserStore.getState().settings);
 

package/src/app/(main)/settings/layout.ts

@@ -2,7 +2,10 @@ import ServerLayout from '@/components/server/ServerLayout';
 
 import Desktop from './_layout/Desktop';
 import Mobile from './_layout/Mobile';
+import { LayoutProps } from './_layout/type';
 
-const SettingsLayout = ServerLayout({ Desktop, Mobile });
+const SettingsLayout = ServerLayout<LayoutProps>({ Desktop, Mobile });
+
+SettingsLayout.displayName = 'SettingsLayout';
 
 export default SettingsLayout;

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

@@ -1,5 +1,6 @@
-import { Anthropic, Claude } from '@lobehub/icons';
-import { useTheme } from 'antd-style';
+'use client';
+
+import { Anthropic } from '@lobehub/icons';
 import { memo } from 'react';
 
 import { ModelProvider } from '@/libs/agent-runtime';
@@ -7,19 +8,12 @@ import { ModelProvider } from '@/libs/agent-runtime';
 import ProviderConfig from '../components/ProviderConfig';
 
 const AnthropicProvider = memo(() => {
-  const theme = useTheme();
-
   return (
     <ProviderConfig
       checkModel={'claude-3-haiku-20240307'}
       provider={ModelProvider.Anthropic}
       showEndpoint
-      title={
-        <Anthropic.Text
-          color={theme.isDarkMode ? theme.colorText : Claude.colorPrimary}
-          size={18}
-        />
-      }
+      title={<Anthropic.Text size={15} />}
     />
   );
 });

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

@@ -1,3 +1,5 @@
+'use client';
+
 import { Azure, OpenAI } from '@lobehub/icons';
 import { Markdown } from '@lobehub/ui';
 import { AutoComplete, Divider, Input } from 'antd';
@@ -95,7 +97,7 @@ const AzureOpenAIProvider = memo(() => {
       provider={providerKey}
       title={
         <Flexbox align={'center'} gap={8} horizontal>
-          <Azure.Combine size={24} type={'color'}></Azure.Combine>
+          <Azure.Combine size={22} type={'color'}></Azure.Combine>
           <Divider style={{ margin: '0 4px' }} type={'vertical'} />
           <OpenAI.Combine size={24}></OpenAI.Combine>
         </Flexbox>