@lobehub/chat 0.152.5 → 0.152.7

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

@@ -0,0 +1,17 @@
+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/(main)/settings/sync/page.tsx

@@ -1,28 +1,24 @@
 import { notFound } from 'next/navigation';
 
 import { serverFeatureFlags } from '@/config/server/featureFlags';
+import { translation } from '@/server/translation';
 import { gerServerDeviceInfo, isMobileDevice } from '@/utils/responsive';
 
-import Alert from './Alert';
-import DeviceCard from './DeviceInfo';
-import PageTitle from './PageTitle';
-import WebRTC from './WebRTC';
+import Page from './index';
+
+export const generateMetadata = async () => {
+  const { t } = await translation('setting');
+  return {
+    title: t('tab.sync'),
+  };
+};
 
 export default () => {
   const enableWebrtc = serverFeatureFlags().enableWebrtc;
-
   if (!enableWebrtc) return notFound();
 
-  const { os, browser } = gerServerDeviceInfo();
   const isMobile = isMobileDevice();
+  const { os, browser } = gerServerDeviceInfo();
 
-  return (
-    <>
-      {isMobile && <Alert mobile />}
-      <PageTitle />
-      <DeviceCard browser={browser} os={os} />
-      <WebRTC />
-      {!isMobile && <Alert />}
-    </>
-  );
+  return <Page browser={browser} mobile={isMobile} os={os} />;
 };

package/src/app/(main)/settings/tts/features/OpenAI.tsx

@@ -0,0 +1,54 @@
+'use client';
+
+import { Form, type ItemGroup } from '@lobehub/ui';
+import { Select } from 'antd';
+import isEqual from 'fast-deep-equal';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { FORM_STYLE } from '@/const/layoutTokens';
+import { useUserStore } from '@/store/user';
+import { settingsSelectors } from '@/store/user/selectors';
+
+import { opeanaiSTTOptions, opeanaiTTSOptions } from './const';
+
+type SettingItemGroup = ItemGroup;
+
+const TTS_SETTING_KEY = 'tts';
+
+const OpenAI = memo(() => {
+  const { t } = useTranslation('setting');
+  const [form] = Form.useForm();
+  const settings = useUserStore(settingsSelectors.currentSettings, isEqual);
+  const [setSettings] = useUserStore((s) => [s.setSettings]);
+
+  const openai: SettingItemGroup = {
+    children: [
+      {
+        children: <Select options={opeanaiTTSOptions} />,
+        label: t('settingTTS.openai.ttsModel'),
+        name: [TTS_SETTING_KEY, 'openAI', 'ttsModel'],
+      },
+      {
+        children: <Select options={opeanaiSTTOptions} />,
+        label: t('settingTTS.openai.sttModel'),
+        name: [TTS_SETTING_KEY, 'openAI', 'sttModel'],
+      },
+    ],
+    title: t('settingTTS.openai.title'),
+  };
+
+  return (
+    <Form
+      form={form}
+      initialValues={settings}
+      items={[openai]}
+      itemsType={'group'}
+      onValuesChange={setSettings}
+      variant={'pure'}
+      {...FORM_STYLE}
+    />
+  );
+});
+
+export default OpenAI;

package/src/app/(main)/settings/tts/{TTS/index.tsx → features/STT.tsx}

@@ -1,8 +1,8 @@
+'use client';
+
 import { Form, type ItemGroup } from '@lobehub/ui';
-import { Form as AntForm, Select, Switch } from 'antd';
+import { Select, Switch } from 'antd';
 import isEqual from 'fast-deep-equal';
-import { debounce } from 'lodash-es';
-import { Mic, Webhook } from 'lucide-react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -10,15 +10,15 @@ import { FORM_STYLE } from '@/const/layoutTokens';
 import { useUserStore } from '@/store/user';
 import { settingsSelectors } from '@/store/user/selectors';
 
-import { opeanaiSTTOptions, opeanaiTTSOptions, sttOptions } from './options';
+import { sttOptions } from './const';
 
 type SettingItemGroup = ItemGroup;
 
 const TTS_SETTING_KEY = 'tts';
 
-const TTS = memo(() => {
+const STT = memo(() => {
   const { t } = useTranslation('setting');
-  const [form] = AntForm.useForm();
+  const [form] = Form.useForm();
   const settings = useUserStore(settingsSelectors.currentSettings, isEqual);
   const [setSettings] = useUserStore((s) => [s.setSettings]);
 
@@ -39,36 +39,20 @@ const TTS = memo(() => {
         valuePropName: 'checked',
       },
     ],
-    icon: Mic,
     title: t('settingTTS.stt'),
   };
 
-  const openai: SettingItemGroup = {
-    children: [
-      {
-        children: <Select options={opeanaiTTSOptions} />,
-        label: t('settingTTS.openai.ttsModel'),
-        name: [TTS_SETTING_KEY, 'openAI', 'ttsModel'],
-      },
-      {
-        children: <Select options={opeanaiSTTOptions} />,
-        label: t('settingTTS.openai.sttModel'),
-        name: [TTS_SETTING_KEY, 'openAI', 'sttModel'],
-      },
-    ],
-    icon: Webhook,
-    title: t('settingTTS.openai.title'),
-  };
-
   return (
     <Form
       form={form}
       initialValues={settings}
-      items={[stt, openai]}
-      onValuesChange={debounce(setSettings, 100)}
+      items={[stt]}
+      itemsType={'group'}
+      onValuesChange={setSettings}
+      variant={'pure'}
       {...FORM_STYLE}
     />
   );
 });
 
-export default TTS;
+export default STT;

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

@@ -0,0 +1,15 @@
+import OpenAI from './features/OpenAI';
+import STT from './features/STT';
+
+const Page = () => {
+  return (
+    <>
+      <STT />
+      <OpenAI />
+    </>
+  );
+};
+
+Page.displayName = 'TtsSetting';
+
+export default Page;

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

@@ -1,18 +1,10 @@
-'use client';
+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.tts'),
+  };
+};
 
-import PageTitle from '@/components/PageTitle';
-
-import TTS from './TTS';
-
-export default memo(() => {
-  const { t } = useTranslation('setting');
-  return (
-    <>
-      <PageTitle title={t('tab.tts')} />
-      <TTS />
-    </>
-  );
-});
+export { default } from './index';

package/src/app/layout.tsx

@@ -1,7 +1,7 @@
 import { SpeedInsights } from '@vercel/speed-insights/next';
 import { ResolvingViewport } from 'next';
 import { cookies } from 'next/headers';
-import { PropsWithChildren } from 'react';
+import { ReactNode } from 'react';
 import { isRtlLang } from 'rtl-detect';
 
 import Analytics from '@/components/Analytics';
@@ -10,7 +10,11 @@ import AuthProvider from '@/layout/AuthProvider';
 import GlobalProvider from '@/layout/GlobalProvider';
 import { isMobileDevice } from '@/utils/responsive';
 
-const RootLayout = async ({ children }: PropsWithChildren) => {
+type RootLayoutProps = {
+  children: ReactNode;
+};
+
+const RootLayout = async ({ children }: RootLayoutProps) => {
   const cookieStore = cookies();
 
   const lang = cookieStore.get(LOBE_LOCALE_COOKIE);

package/src/components/BrandWatermark/index.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import { Logo } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import Link from 'next/link';
+import { memo } from 'react';
+import { Flexbox, FlexboxProps } from 'react-layout-kit';
+
+const useStyles = createStyles(({ token, css }) => ({
+  logoLink: css`
+    height: 20px;
+    color: inherit;
+
+    &:hover {
+      color: ${token.colorLink};
+    }
+  `,
+}));
+
+const BrandWatermark = memo<Omit<FlexboxProps, 'children'>>(({ style, ...rest }) => {
+  const { styles, theme } = useStyles();
+  return (
+    <Flexbox
+      align={'center'}
+      flex={'none'}
+      gap={4}
+      horizontal
+      style={{ color: theme.colorTextDescription, fontSize: 12, ...style }}
+      {...rest}
+    >
+      <span>Powered by</span>
+      <Link className={styles.logoLink} href={'https://lobehub.com'} target={'_blank'}>
+        <Logo size={20} type={'text'} />
+      </Link>
+    </Flexbox>
+  );
+});
+
+export default BrandWatermark;

package/src/components/Cell/Divider.tsx

@@ -0,0 +1,19 @@
+'use client';
+
+import { createStyles } from 'antd-style';
+import { memo } from 'react';
+
+const useStyles = createStyles(
+  ({ css, token }) => css`
+    height: 6px;
+    background: ${token.colorBgLayout};
+  `,
+);
+
+const Divider = memo(() => {
+  const { styles } = useStyles();
+
+  return <div className={styles} />;
+});
+
+export default Divider;

package/src/components/Cell/index.tsx

@@ -0,0 +1,38 @@
+import { Icon, List } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { ChevronRight } from 'lucide-react';
+import { ReactNode, memo } from 'react';
+
+const { Item } = List;
+
+const useStyles = createStyles(({ css }) => ({
+  container: css`
+    position: relative;
+    padding-block: 16px !important;
+    border-radius: 0;
+  `,
+}));
+
+export interface CellProps {
+  icon: ReactNode;
+  label: string | ReactNode;
+  onClick?: () => void;
+}
+
+const Cell = memo<CellProps>(({ label, icon, onClick }) => {
+  const { cx, styles } = useStyles();
+
+  return (
+    <Item
+      active={false}
+      avatar={icon}
+      className={cx(styles.container)}
+      onClick={onClick}
+      title={label as string}
+    >
+      <Icon icon={ChevronRight} size={{ fontSize: 16 }} />
+    </Item>
+  );
+});
+
+export default Cell;

package/src/components/Menu/index.tsx

@@ -0,0 +1,97 @@
+import { Menu as AntdMenu, MenuProps as AntdMenuProps, ConfigProvider } from 'antd';
+import { createStyles } from 'antd-style';
+import { memo } from 'react';
+
+const useStyles = createStyles(({ css, token, prefixCls }) => ({
+  compact: css`
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+  `,
+  menu: css`
+    flex: 1;
+    background: transparent;
+    border: none !important;
+
+    .${prefixCls}-menu-item-divider {
+      margin-block: 0.125rem;
+      border-color: ${token.colorFillTertiary};
+
+      &:first-child {
+        margin-top: 0;
+      }
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    .${prefixCls}-menu-item, .${prefixCls}-menu-submenu-title {
+      display: flex;
+      gap: 0.75rem;
+      align-items: center;
+
+      height: unset;
+      min-height: 2rem;
+      padding: 0.375rem 0.75rem;
+
+      line-height: 2;
+
+      .anticon + .${prefixCls}-menu-title-content {
+        margin-inline-start: 0;
+      }
+    }
+
+    .${prefixCls}-menu-item-selected {
+      .${prefixCls}-menu-item-icon svg {
+        color: ${token.colorText};
+      }
+    }
+
+    .${prefixCls}-menu-item-icon svg {
+      color: ${token.colorTextSecondary};
+    }
+
+    .${prefixCls}-menu-title-content {
+      flex: 1;
+    }
+  `,
+}));
+
+export interface MenuProps extends AntdMenuProps {
+  variant?: 'default' | 'compact';
+}
+
+const Menu = memo<MenuProps>(({ className, selectable = false, variant, ...rest }) => {
+  const isCompact = variant === 'compact';
+  const { cx, styles, theme } = useStyles();
+  return (
+    <ConfigProvider
+      theme={{
+        components: {
+          Menu: {
+            controlHeightLG: 36,
+            iconMarginInlineEnd: 8,
+            iconSize: 16,
+            itemBorderRadius: theme.borderRadius,
+            itemColor: selectable ? theme.colorTextSecondary : theme.colorText,
+            itemHoverBg: theme.colorFillTertiary,
+            itemMarginBlock: isCompact ? 0 : 4,
+            itemMarginInline: isCompact ? 0 : 4,
+            itemSelectedBg: theme.colorFillSecondary,
+            paddingXS: -8,
+          },
+        },
+      }}
+    >
+      <AntdMenu
+        className={cx(styles.menu, isCompact && styles.compact, className)}
+        mode="vertical"
+        selectable={selectable}
+        {...rest}
+      />
+    </ConfigProvider>
+  );
+});
+
+export default Menu;

package/src/components/SkeletonLoading/index.tsx

@@ -0,0 +1,21 @@
+'use client';
+
+import { Skeleton, SkeletonProps } from 'antd';
+import { createStyles } from 'antd-style';
+import { memo } from 'react';
+
+const useStyles = createStyles(
+  ({ css, responsive }) => css`
+    ${responsive.mobile} {
+      padding: 16px;
+    }
+  `,
+);
+
+const SkeletonLoading = memo<SkeletonProps>(({ className, ...rest }) => {
+  const { cx, styles } = useStyles();
+
+  return <Skeleton className={cx(styles, className)} paragraph={{ rows: 8 }} {...rest} />;
+});
+
+export default SkeletonLoading;

package/src/const/url.ts

@@ -29,6 +29,7 @@ export const ABOUT = OFFICIAL_SITE;
 export const FEEDBACK = pkg.bugs.url;
 export const DISCORD = 'https://discord.gg/AYFPHvv2jT';
 export const PRIVACY_URL = urlJoin(OFFICIAL_SITE, '/privacy');
+export const TERMS_URL = urlJoin(OFFICIAL_SITE, '/terms');
 
 export const PLUGINS_INDEX_URL = 'https://chat-plugins.lobehub.com';
 
@@ -49,3 +50,4 @@ export const EMAIL_BUSINESS = 'hello@lobehub.com';
 
 export const MEDIDUM = 'https://medium.com/@lobehub';
 export const X = 'https://x.com/lobehub';
+export const RELEASES_URL = urlJoin(GITHUB, 'releases');

package/src/features/AgentSetting/AgentChat/index.tsx

@@ -0,0 +1,135 @@
+'use client';
+
+import { Form, ItemGroup, SelectWithImg, SliderWithInput } from '@lobehub/ui';
+import { Input, Switch } from 'antd';
+import { useThemeMode } from 'antd-style';
+import { debounce } from 'lodash-es';
+import { LayoutList, MessagesSquare } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useSyncSettings } from '@/app/(main)/settings/hooks/useSyncSettings';
+import { FORM_STYLE } from '@/const/layoutTokens';
+import { imageUrl } from '@/const/url';
+
+import { useStore } from '../store';
+
+const AgentChat = memo(() => {
+  const { t } = useTranslation('setting');
+  const [form] = Form.useForm();
+  const { isDarkMode } = useThemeMode();
+
+  const [
+    displayMode,
+    enableAutoCreateTopic,
+    enableHistoryCount,
+    enableCompressThreshold,
+    updateConfig,
+  ] = useStore((s) => [
+    s.config.displayMode,
+    s.config.enableAutoCreateTopic,
+    s.config.enableHistoryCount,
+    s.config.enableCompressThreshold,
+    s.setAgentConfig,
+  ]);
+
+  useSyncSettings(form);
+
+  const chat: ItemGroup = {
+    children: [
+      {
+        children: (
+          <SelectWithImg
+            height={86}
+            onChange={(mode) => updateConfig({ displayMode: mode })}
+            options={[
+              {
+                icon: MessagesSquare,
+                img: imageUrl(`chatmode_chat_${isDarkMode ? 'dark' : 'light'}.webp`),
+                label: t('settingChat.chatStyleType.type.chat'),
+                value: 'chat',
+              },
+              {
+                icon: LayoutList,
+                img: imageUrl(`chatmode_docs_${isDarkMode ? 'dark' : 'light'}.webp`),
+                label: t('settingChat.chatStyleType.type.docs'),
+                value: 'docs',
+              },
+            ]}
+            unoptimized={false}
+            value={displayMode}
+            width={144}
+          />
+        ),
+        label: t('settingChat.chatStyleType.title'),
+        minWidth: undefined,
+      },
+      {
+        children: <Input.TextArea placeholder={t('settingChat.inputTemplate.placeholder')} />,
+        desc: t('settingChat.inputTemplate.desc'),
+        label: t('settingChat.inputTemplate.title'),
+        name: 'inputTemplate',
+      },
+      {
+        children: <Switch />,
+        desc: t('settingChat.enableAutoCreateTopic.desc'),
+        label: t('settingChat.enableAutoCreateTopic.title'),
+        minWidth: undefined,
+        name: 'enableAutoCreateTopic',
+        valuePropName: 'checked',
+      },
+      {
+        children: <SliderWithInput max={8} min={0} />,
+        desc: t('settingChat.autoCreateTopicThreshold.desc'),
+        divider: false,
+        hidden: !enableAutoCreateTopic,
+        label: t('settingChat.autoCreateTopicThreshold.title'),
+        name: 'autoCreateTopicThreshold',
+      },
+      {
+        children: <Switch />,
+        label: t('settingChat.enableHistoryCount.title'),
+        minWidth: undefined,
+        name: 'enableHistoryCount',
+        valuePropName: 'checked',
+      },
+      {
+        children: <SliderWithInput max={32} min={1} />,
+        desc: t('settingChat.historyCount.desc'),
+        divider: false,
+        hidden: !enableHistoryCount,
+        label: t('settingChat.historyCount.title'),
+        name: 'historyCount',
+      },
+      {
+        children: <Switch />,
+        label: t('settingChat.enableCompressThreshold.title'),
+        minWidth: undefined,
+        name: 'enableCompressThreshold',
+        valuePropName: 'checked',
+      },
+      {
+        children: <SliderWithInput max={32} min={0} />,
+        desc: t('settingChat.compressThreshold.desc'),
+        divider: false,
+        hidden: !enableCompressThreshold,
+        label: t('settingChat.compressThreshold.title'),
+        name: 'compressThreshold',
+      },
+    ],
+    title: t('settingChat.title'),
+  };
+
+  return (
+    <Form
+      form={form}
+      items={[chat]}
+      itemsType={'group'}
+      onValuesChange={debounce(updateConfig, 100)}
+      variant={'pure'}
+      {...FORM_STYLE}
+    />
+  );
+});
+
+export default AgentChat;

package/src/features/AgentSetting/AgentMeta/index.tsx

@@ -1,8 +1,10 @@
+'use client';
+
 import { Form, type FormItemProps, Icon, type ItemGroup, Tooltip } from '@lobehub/ui';
 import { Button } from 'antd';
 import isEqual from 'fast-deep-equal';
 import { isString } from 'lodash-es';
-import { UserCircle, Wand2 } from 'lucide-react';
+import { Wand2 } from 'lucide-react';
 import dynamic from 'next/dynamic';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -118,13 +120,12 @@ const AgentMeta = memo(() => {
           </Button>
         </Tooltip>
       ),
-      icon: UserCircle,
       title: t('settingAgent.title'),
     }),
     [autocompleteItems, meta],
   );
 
-  return <Form items={[metaData]} {...FORM_STYLE} />;
+  return <Form items={[metaData]} itemsType={'group'} variant={'pure'} {...FORM_STYLE} />;
 });
 
 export default AgentMeta;