@lobehub/chat 0.152.0 → 0.152.2

package/src/app/@modal/(.)settings/about/layout.tsx

@@ -0,0 +1 @@
+export { default } from '@/app/(main)/settings/about/layout';

package/src/app/@modal/(.)settings/about/page.tsx

@@ -0,0 +1 @@
+export { default } from '@/app/(main)/settings/about/page';

package/src/app/@modal/(.)settings/agent/layout.tsx

@@ -0,0 +1 @@
+export { default } from '@/app/(main)/settings/agent/layout';

package/src/app/@modal/(.)settings/agent/page.tsx

@@ -0,0 +1 @@
+export { default } from '@/app/(main)/settings/agent/page';

package/src/app/@modal/(.)settings/common/page.tsx

@@ -0,0 +1 @@
+export { default } from '@/app/(main)/settings/common/page';

package/src/app/@modal/(.)settings/layout.tsx

@@ -0,0 +1,28 @@
+import { Skeleton } from 'antd';
+import dynamic from 'next/dynamic';
+import { PropsWithChildren } from 'react';
+
+import SettingModalLayout from '../_layout/SettingModalLayout';
+
+const CategoryContent = dynamic(
+  () => import('@/app/(main)/settings/@category/features/CategoryContent'),
+  { loading: () => <Skeleton paragraph={{ rows: 6 }} title={false} /> },
+);
+const UpgradeAlert = dynamic(() => import('@/app/(main)/settings/features/UpgradeAlert'), {});
+
+const Layout = ({ children }: PropsWithChildren) => {
+  return (
+    <SettingModalLayout
+      category={
+        <>
+          <CategoryContent modal />
+          <UpgradeAlert />
+        </>
+      }
+    >
+      {children}
+    </SettingModalLayout>
+  );
+};
+
+export default Layout;

package/src/app/@modal/(.)settings/llm/page.tsx

@@ -0,0 +1 @@
+export { default } from '@/app/(main)/settings/llm/page';

package/src/app/@modal/(.)settings/loading.tsx

@@ -0,0 +1,5 @@
+import { Skeleton } from 'antd';
+
+export default () => {
+  return <Skeleton paragraph={{ rows: 6 }} style={{ paddingBlock: 16 }} />;
+};

package/src/app/@modal/(.)settings/sync/page.tsx

@@ -0,0 +1 @@
+export { default } from '@/app/(main)/settings/sync/page';

package/src/app/@modal/(.)settings/tts/page.tsx

@@ -0,0 +1 @@
+export { default } from '@/app/(main)/settings/tts/page';

package/src/app/@modal/_layout/SettingModalLayout.tsx

@@ -0,0 +1,59 @@
+'use client';
+
+import { useResponsive, useTheme, useThemeMode } from 'antd-style';
+import { ReactNode, useRef } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import Header from '@/app/(main)/settings/_layout/Desktop/Header';
+import SideBar from '@/app/(main)/settings/_layout/Desktop/SideBar';
+
+interface SettingLayoutProps {
+  category: ReactNode;
+  children: ReactNode;
+  desc?: string;
+  title?: string;
+}
+
+const SettingModalLayout = ({ children, category, desc, title }: SettingLayoutProps) => {
+  const ref = useRef<any>(null);
+  const theme = useTheme();
+  const { isDarkMode } = useThemeMode();
+  const { md = true } = useResponsive();
+
+  return (
+    <>
+      {md ? (
+        <SideBar
+          desc={desc}
+          style={{
+            background: isDarkMode ? theme.colorBgContainer : theme.colorFillTertiary,
+            borderColor: theme.colorFillTertiary,
+          }}
+          title={title}
+        >
+          {category}
+        </SideBar>
+      ) : (
+        <Header getContainer={() => ref.current}>{category}</Header>
+      )}
+      <Flexbox
+        align={'center'}
+        gap={64}
+        style={{
+          background: isDarkMode ? theme.colorFillQuaternary : theme.colorBgElevated,
+          overflowX: 'hidden',
+          overflowY: 'auto',
+          paddingBlock: 32,
+          paddingInline: 56,
+        }}
+        width={'100%'}
+      >
+        {children}
+      </Flexbox>
+    </>
+  );
+};
+
+SettingModalLayout.displayName = 'SettingModalLayout';
+
+export default SettingModalLayout;

package/src/app/@modal/chat/(.)settings/features/CategoryContent.tsx

@@ -0,0 +1,36 @@
+'use client';
+
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import HeaderContent from '@/app/(main)/chat/settings/features/HeaderContent';
+import Menu from '@/components/Menu';
+import { useQuery } from '@/hooks/useQuery';
+import { useQueryRoute } from '@/hooks/useQueryRoute';
+
+import { SettingsTabs, useCategory } from './useCategory';
+
+const CategoryContent = memo(() => {
+  const cateItems = useCategory();
+  const router = useQueryRoute();
+  const { tab = SettingsTabs.Meta } = useQuery();
+
+  return (
+    <>
+      <Menu
+        items={cateItems}
+        onClick={({ key }) => {
+          router.replace('/chat/settings', { tab: key });
+        }}
+        selectable
+        selectedKeys={[tab as any]}
+        variant={'compact'}
+      />
+      <Flexbox align={'center'} gap={8} paddingInline={8} width={'100%'}>
+        <HeaderContent modal />
+      </Flexbox>
+    </>
+  );
+});
+
+export default CategoryContent;

package/src/app/@modal/chat/(.)settings/features/useCategory.tsx

@@ -0,0 +1,62 @@
+import { Icon } from '@lobehub/ui';
+import { Blocks, Bot, BrainCog, MessagesSquare, Mic2, UserCircle } from 'lucide-react';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import type { MenuProps } from '@/components/Menu';
+
+export enum SettingsTabs {
+  Chat = 'chat',
+  Meta = 'meta',
+  Modal = 'modal',
+  Plugin = 'plugin',
+  Prompt = 'prompt',
+  TTS = 'tts',
+}
+
+interface UseCategoryOptions {
+  mobile?: boolean;
+}
+
+export const useCategory = ({ mobile }: UseCategoryOptions = {}) => {
+  const { t } = useTranslation('setting');
+  const iconSize = mobile ? { fontSize: 20 } : undefined;
+
+  const cateItems: MenuProps['items'] = useMemo(
+    () => [
+      {
+        icon: <Icon icon={UserCircle} size={iconSize} />,
+        key: SettingsTabs.Meta,
+        label: t('settingAgent.title'),
+      },
+      {
+        icon: <Icon icon={Bot} size={iconSize} />,
+        key: SettingsTabs.Prompt,
+        label: t('settingAgent.prompt.title'),
+      },
+      {
+        icon: <Icon icon={MessagesSquare} size={iconSize} />,
+        key: SettingsTabs.Chat,
+        label: t('settingChat.title'),
+      },
+      {
+        icon: <Icon icon={BrainCog} size={iconSize} />,
+        key: SettingsTabs.Modal,
+        label: t('settingModel.title'),
+      },
+      {
+        icon: <Icon icon={Mic2} size={iconSize} />,
+        key: SettingsTabs.TTS,
+        label: t('settingTTS.title'),
+      },
+      {
+        icon: <Icon icon={Blocks} size={iconSize} />,
+        key: SettingsTabs.Plugin,
+        label: t('settingPlugin.title'),
+      },
+    ],
+    [t],
+  );
+
+  return cateItems;
+};

package/src/app/@modal/chat/(.)settings/layout.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+import { Skeleton } from 'antd';
+import isEqual from 'fast-deep-equal';
+import dynamic from 'next/dynamic';
+import { PropsWithChildren } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import StoreUpdater from '@/features/AgentSetting/StoreUpdater';
+import { Provider, createStore } from '@/features/AgentSetting/store';
+import { useAgentStore } from '@/store/agent';
+import { agentSelectors } from '@/store/agent/slices/chat';
+import { useSessionStore } from '@/store/session';
+import { sessionMetaSelectors } from '@/store/session/selectors';
+
+import SettingModalLayout from '../../_layout/SettingModalLayout';
+
+const CategoryContent = dynamic(() => import('./features/CategoryContent'), {
+  loading: () => <Skeleton paragraph={{ rows: 6 }} title={false} />,
+  ssr: false,
+});
+
+const Layout = ({ children }: PropsWithChildren) => {
+  const { t } = useTranslation('setting');
+  const id = useSessionStore((s) => s.activeId);
+  const config = useAgentStore(agentSelectors.currentAgentConfig, isEqual);
+  const meta = useSessionStore(sessionMetaSelectors.currentAgentMeta, isEqual);
+  const [updateAgentConfig] = useAgentStore((s) => [s.updateAgentConfig]);
+
+  const [updateAgentMeta] = useSessionStore((s) => [
+    s.updateSessionMeta,
+    sessionMetaSelectors.currentAgentTitle(s),
+  ]);
+
+  return (
+    <SettingModalLayout
+      category={<CategoryContent />}
+      desc={t('header.sessionDesc')}
+      title={t('header.session')}
+    >
+      <Provider createStore={createStore}>
+        <StoreUpdater
+          config={config}
+          id={id}
+          meta={meta}
+          onConfigChange={updateAgentConfig}
+          onMetaChange={updateAgentMeta}
+        />
+        {children}
+      </Provider>
+    </SettingModalLayout>
+  );
+};
+
+export default Layout;

package/src/app/@modal/chat/(.)settings/loading.tsx

@@ -0,0 +1,5 @@
+import { Skeleton } from 'antd';
+
+export default () => {
+  return <Skeleton paragraph={{ rows: 6 }} style={{ paddingBlock: 16 }} />;
+};

package/src/app/@modal/chat/(.)settings/page.tsx

@@ -0,0 +1,40 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+import { useSearchParams } from 'next/navigation';
+import qs from 'query-string';
+
+import AgentMeta from '@/features/AgentSetting/AgentMeta';
+
+import { SettingsTabs } from './features/useCategory';
+import Skeleton from './loading';
+
+const loading = () => <Skeleton />;
+
+const AgentChat = dynamic(() => import('@/features/AgentSetting/AgentChat'), { loading });
+
+const AgentPrompt = dynamic(() => import('@/features/AgentSetting/AgentPrompt'), { loading });
+
+const AgentPlugin = dynamic(() => import('@/features/AgentSetting/AgentPlugin'), { loading });
+
+const AgentModal = dynamic(() => import('@/features/AgentSetting/AgentModal'), { loading });
+
+const AgentTTS = dynamic(() => import('@/features/AgentSetting/AgentTTS'), { loading });
+const Page = () => {
+  const rawQuery = useSearchParams();
+  const { tab = SettingsTabs.Meta } = qs.parse(rawQuery.toString());
+  return (
+    <>
+      {tab === SettingsTabs.Meta && <AgentMeta />}
+      {tab === SettingsTabs.Prompt && <AgentPrompt modal />}
+      {tab === SettingsTabs.Chat && <AgentChat />}
+      {tab === SettingsTabs.Modal && <AgentModal />}
+      {tab === SettingsTabs.TTS && <AgentTTS />}
+      {tab === SettingsTabs.Plugin && <AgentPlugin />}
+    </>
+  );
+};
+
+Page.displayName = 'AgentSettingModal';
+
+export default Page;

package/src/app/@modal/default.tsx

@@ -0,0 +1 @@
+export default () => null;

package/src/app/@modal/layout.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import { Modal } from '@lobehub/ui';
+import { useRouter } from 'next/navigation';
+import { PropsWithChildren, useState } from 'react';
+
+const SessionSettingsModal = ({ children }: PropsWithChildren) => {
+  const [open, setOpen] = useState(true);
+  const router = useRouter();
+
+  return (
+    <Modal
+      footer={null}
+      onCancel={() => {
+        setOpen(false);
+        setTimeout(() => router.back(), 250);
+      }}
+      open={open}
+      styles={{
+        body: { display: 'flex', minHeight: 'min(75vh, 750px)', overflow: 'hidden', padding: 0 },
+      }}
+      title={false}
+      width={1024}
+    >
+      {children}
+    </Modal>
+  );
+};
+
+export default SessionSettingsModal;

package/src/app/@modal/loading.tsx

@@ -0,0 +1,5 @@
+import { Skeleton } from 'antd';
+
+export default () => {
+  return <Skeleton paragraph={{ rows: 6 }} style={{ padding: 56 }} />;
+};

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,12 @@ import AuthProvider from '@/layout/AuthProvider';
 import GlobalProvider from '@/layout/GlobalProvider';
 import { isMobileDevice } from '@/utils/responsive';
 
-const RootLayout = async ({ children }: PropsWithChildren) => {
+type RootLayoutProps = {
+  children: ReactNode;
+  modal: ReactNode;
+};
+
+const RootLayout = async ({ children, modal }: RootLayoutProps) => {
   const cookieStore = cookies();
 
   const lang = cookieStore.get(LOBE_LOCALE_COOKIE);
@@ -20,7 +25,10 @@ const RootLayout = async ({ children }: PropsWithChildren) => {
     <html dir={direction} lang={lang?.value || DEFAULT_LANG} suppressHydrationWarning>
       <body>
         <GlobalProvider>
-          <AuthProvider>{children}</AuthProvider>
+          <AuthProvider>
+            {children}
+            {modal}
+          </AuthProvider>
         </GlobalProvider>
         <Analytics />
         <SpeedInsights />

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';