@lobehub/chat 0.152.1 → 0.152.2

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

@@ -1,7 +1,9 @@
-import { Avatar, Form, Icon, Tooltip } from '@lobehub/ui';
+'use client';
+
+import { Avatar, Form, Icon, ItemGroup, Tooltip } from '@lobehub/ui';
 import { Button, Empty, Space, Switch, Tag, Typography } from 'antd';
 import isEqual from 'fast-deep-equal';
-import { LucideToyBrick, LucideTrash2, Store } from 'lucide-react';
+import { LucideTrash2, Store } from 'lucide-react';
 import { memo, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { Center, Flexbox } from 'react-layout-kit';
@@ -90,73 +92,70 @@ const AgentPlugin = memo(() => {
   const hasDeprecated = deprecatedList.length > 0;
 
   const loadingSkeleton = LoadingList();
+
+  const extra = (
+    <Space.Compact style={{ width: 'auto' }}>
+      <AddPluginButton />
+      {hasDeprecated ? (
+        <Tooltip title={t('plugin.clearDeprecated')}>
+          <Button
+            icon={<Icon icon={LucideTrash2} />}
+            onClick={(e) => {
+              e.stopPropagation();
+              for (const i of deprecatedList) {
+                toggleAgentPlugin(i.tag as string);
+              }
+            }}
+            size={'small'}
+          />
+        </Tooltip>
+      ) : null}
+      <Tooltip title={t('plugin.store')}>
+        <Button
+          icon={<Icon icon={Store} />}
+          onClick={(e) => {
+            e.stopPropagation();
+            setShowStore(true);
+          }}
+          size={'small'}
+        />
+      </Tooltip>
+    </Space.Compact>
+  );
+
+  const empty = (
+    <Center padding={40}>
+      <Empty
+        description={
+          <Trans i18nKey={'plugin.empty'} ns={'setting'}>
+            暂无安装插件，
+            <Typography.Link
+              href={'/'}
+              onClick={(e) => {
+                e.preventDefault();
+                setShowStore(true);
+              }}
+            >
+              前往插件市场
+            </Typography.Link>
+            安装
+          </Trans>
+        }
+        image={Empty.PRESENTED_IMAGE_SIMPLE}
+      />
+    </Center>
+  );
+
+  const plugin: ItemGroup = {
+    children: isLoading ? loadingSkeleton : isEmpty ? empty : [...deprecatedList, ...list],
+    extra,
+    title: t('settingPlugin.title'),
+  };
+
   return (
     <>
       <PluginStore open={showStore} setOpen={setShowStore} />
-      <Form
-        items={[
-          {
-            children: isLoading ? (
-              loadingSkeleton
-            ) : isEmpty ? (
-              <Center padding={40}>
-                <Empty
-                  description={
-                    <Trans i18nKey={'plugin.empty'} ns={'setting'}>
-                      暂无安装插件，
-                      <Typography.Link
-                        href={'/'}
-                        onClick={(e) => {
-                          e.preventDefault();
-                          setShowStore(true);
-                        }}
-                      >
-                        前往插件市场
-                      </Typography.Link>
-                      安装
-                    </Trans>
-                  }
-                  image={Empty.PRESENTED_IMAGE_SIMPLE}
-                />
-              </Center>
-            ) : (
-              [...deprecatedList, ...list]
-            ),
-            extra: (
-              <Space.Compact style={{ width: 'auto' }}>
-                <AddPluginButton />
-                {hasDeprecated ? (
-                  <Tooltip title={t('plugin.clearDeprecated')}>
-                    <Button
-                      icon={<Icon icon={LucideTrash2} />}
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        for (const i of deprecatedList) {
-                          toggleAgentPlugin(i.tag as string);
-                        }
-                      }}
-                      size={'small'}
-                    />
-                  </Tooltip>
-                ) : null}
-                <Tooltip title={t('plugin.store')}>
-                  <Button
-                    icon={<Icon icon={Store} />}
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      setShowStore(true);
-                    }}
-                    size={'small'}
-                  />
-                </Tooltip>
-              </Space.Compact>
-            ),
-            icon: LucideToyBrick,
-            title: t('settingPlugin.title'),
-          },
-        ]}
-        {...FORM_STYLE}
-      />
+      <Form items={[plugin]} itemsType={'group'} variant={'pure'} {...FORM_STYLE} />
     </>
   );
 });

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

@@ -1,7 +1,8 @@
-import { EditableMessage, FormGroup } from '@lobehub/ui';
+'use client';
+
+import { EditableMessage, Form } from '@lobehub/ui';
 import { Button } from 'antd';
 import { createStyles } from 'antd-style';
-import { Bot } from 'lucide-react';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
@@ -9,65 +10,118 @@ import { Flexbox } from 'react-layout-kit';
 import { FORM_STYLE } from '@/const/layoutTokens';
 
 import { useStore } from '../store';
-import TokenTag from './TokenTag';
 
-export const useStyles = createStyles(({ css, token }) => ({
+export const useStyles = createStyles(({ css, token, responsive }) => ({
+  container: css`
+    position: relative;
+    width: 100%;
+    background: ${token.colorFillSecondary};
+    border-radius: ${token.borderRadiusLG}px;
+  `,
+  content: css`
+    z-index: 2;
+    padding: 8px;
+    background: ${token.colorBgContainer};
+    border-radius: ${token.borderRadiusLG - 1}px;
+  `,
   markdown: css`
     border: unset;
   `,
-  textarea: css`
-    background: ${token.colorFillTertiary};
+  wrapper: css`
+    width: 100%;
+    ${responsive.mobile} {
+      padding-block: 8px;
+      padding-inline: 4px;
+    }
   `,
 }));
 
-const AgentPrompt = memo(() => {
+const AgentPrompt = memo<{ modal?: boolean }>(({ modal }) => {
   const { t } = useTranslation('setting');
   const { styles } = useStyles();
   const [editing, setEditing] = useState(false);
   const [systemRole, updateConfig] = useStore((s) => [s.config.systemRole, s.setAgentConfig]);
 
-  return (
-    <FormGroup
-      extra={<TokenTag />}
-      icon={Bot}
-      style={FORM_STYLE.style}
-      title={t('settingAgent.prompt.title')}
+  const content = (
+    <EditableMessage
+      classNames={{
+        markdown: styles.markdown,
+      }}
+      editButtonSize={'small'}
+      editing={editing}
+      height={'auto'}
+      inputType={'pure'}
+      onChange={(e) => {
+        updateConfig({ systemRole: e });
+      }}
+      onEditingChange={setEditing}
+      placeholder={t('settingAgent.prompt.placeholder')}
+      showEditWhenEmpty
+      text={{
+        cancel: t('cancel', { ns: 'common' }),
+        confirm: t('ok', { ns: 'common' }),
+      }}
+      value={systemRole}
+    />
+  );
+
+  const editButton = !editing && !!systemRole && (
+    <Button
+      onClick={(e) => {
+        e.stopPropagation();
+        setEditing(true);
+      }}
+      size={'small'}
+      type={'primary'}
     >
-      <Flexbox gap={16} paddingBlock={16}>
-        <EditableMessage
-          classNames={styles}
-          editButtonSize={'small'}
-          editing={editing}
-          height={'auto'}
-          inputType={'ghost'}
-          onChange={(e) => {
-            updateConfig({ systemRole: e });
-          }}
-          onEditingChange={setEditing}
-          placeholder={t('settingAgent.prompt.placeholder')}
-          showEditWhenEmpty
-          text={{
-            cancel: t('cancel', { ns: 'common' }),
-            confirm: t('ok', { ns: 'common' }),
-          }}
-          value={systemRole}
-        />
-        {!editing && !!systemRole && (
-          <Flexbox direction={'horizontal-reverse'}>
-            <Button
-              onClick={(e) => {
-                e.stopPropagation();
-                setEditing(true);
-              }}
-              size={'small'}
-              type={'primary'}
-            >
-              {t('edit', { ns: 'common' })}
-            </Button>
-          </Flexbox>
-        )}
+      {t('edit', { ns: 'common' })}
+    </Button>
+  );
+
+  if (modal)
+    return (
+      <Form
+        items={[
+          {
+            children: (
+              <>
+                <div style={{ height: 24 }} />
+                {content}
+              </>
+            ),
+            extra: editButton,
+            title: t('settingAgent.prompt.title'),
+          },
+        ]}
+        itemsType={'group'}
+        variant={'pure'}
+        {...FORM_STYLE}
+      />
+    );
+
+  return (
+    <div className={styles.wrapper}>
+      <Flexbox className={styles.container} padding={4}>
+        <Flexbox horizontal justify={'space-between'} paddingBlock={8} paddingInline={12}>
+          <h1 style={{ fontSize: 18, fontWeight: 'bold', marginBottom: 4 }}>
+            {t('settingAgent.prompt.title')}
+          </h1>
+          {editButton}
+        </Flexbox>
+        <Flexbox
+          align={'center'}
+          className={styles.content}
+          flex={1}
+          gap={16}
+          horizontal
+          justify={'space-between'}
+          padding={12}
+          wrap={'wrap'}
+        >
+          {content}
+        </Flexbox>
       </Flexbox>
-    </FormGroup>
+    </div>
   );
 });
 

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

@@ -1,3 +1,5 @@
+'use client';
+
 import { VoiceList } from '@lobehub/tts';
 import { Form, ItemGroup } from '@lobehub/ui';
 import { Form as AFrom, Select, Switch } from 'antd';
@@ -107,7 +109,9 @@ const AgentTTS = memo(() => {
         },
       }}
       items={[tts]}
+      itemsType={'group'}
       onValuesChange={debounce(updateConfig, 100)}
+      variant={'pure'}
       {...FORM_STYLE}
     />
   );

package/src/features/AgentSetting/StoreUpdater.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { memo } from 'react';
 import { createStoreUpdater } from 'zustand-utils';
 

package/src/features/AgentSetting/index.tsx

@@ -1,7 +1,6 @@
-import { memo } from 'react';
-
-import AgentConfig from './AgentConfig';
+import AgentChat from './AgentChat';
 import AgentMeta from './AgentMeta';
+import AgentModal from './AgentModal';
 import AgentPlugin from './AgentPlugin';
 import AgentPrompt from './AgentPrompt';
 import AgentTTS from './AgentTTS';
@@ -10,17 +9,18 @@ import { Provider, createStore } from './store';
 
 type AgentSettingsProps = StoreUpdaterProps;
 
-const AgentSettings = memo<AgentSettingsProps>((props) => {
+const AgentSettings = (props: AgentSettingsProps) => {
   return (
     <Provider createStore={createStore}>
       <StoreUpdater {...props} />
       <AgentPrompt />
       <AgentMeta />
-      <AgentConfig />
+      <AgentChat />
+      <AgentModal />
       <AgentTTS />
       <AgentPlugin />
     </Provider>
   );
-});
+};
 
 export default AgentSettings;

package/src/features/AgentSetting/store/index.ts

@@ -1,3 +1,5 @@
+'use client';
+
 import { createContext } from 'zustand-utils';
 import { subscribeWithSelector } from 'zustand/middleware';
 import { shallow } from 'zustand/shallow';

package/src/features/AvatarWithUpload/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { Upload } from 'antd';
 import { createStyles } from 'antd-style';
 import NextImage from 'next/image';

package/src/hooks/useQuery.ts

@@ -0,0 +1,7 @@
+import { useSearchParams } from 'next/navigation';
+import qs from 'query-string';
+
+export const useQuery = () => {
+  const rawQuery = useSearchParams();
+  return qs.parse(rawQuery.toString());
+};

package/src/hooks/useQueryRoute.ts

@@ -0,0 +1,16 @@
+import { useRouter } from 'next/navigation';
+import qs, { type ParsedQuery } from 'query-string';
+
+import { useQuery } from '@/hooks/useQuery';
+
+export const useQueryRoute = () => {
+  const router = useRouter();
+  const parseQuery = useQuery();
+
+  return {
+    push: (url: string, query?: ParsedQuery) =>
+      router.push(qs.stringifyUrl({ query: { ...parseQuery, ...query }, url })),
+    replace: (url: string, query?: ParsedQuery) =>
+      router.replace(qs.stringifyUrl({ query: { ...parseQuery, ...query }, url })),
+  };
+};

package/src/locales/default/common.ts

@@ -133,6 +133,7 @@ export default {
   tab: {
     chat: '会话',
     market: '发现',
+    me: '我',
     setting: '设置',
   },
   telemetry: {
@@ -151,4 +152,17 @@ export default {
     hasNew: '有可用更新',
     newVersion: '有新版本可用：{{version}}',
   },
+  userPanel: {
+    billing: '账单管理',
+    discord: '社区支持',
+    docs: '使用文档',
+    email: '邮件支持',
+    feedback: '反馈与建议',
+    help: '帮助中心',
+    plans: '订阅方案',
+    profile: '账户管理',
+    setting: '应用设置',
+    usages: '用量统计',
+    warn: '此入口即将下线，后续请从左上角头像唤起本菜单',
+  },
 };

package/src/locales/default/setting.ts

@@ -27,9 +27,12 @@ export default {
     },
   },
   header: {
+    desc: '偏好与模型设置。',
     global: '全局设置',
     session: '会话设置',
+    sessionDesc: '角色设定与会话偏好。',
     sessionWithName: '会话设置 · {{name}}',
+    title: '设置',
   },
   llm: {
     checker: {

package/src/server/redirectHard.ts

@@ -0,0 +1,9 @@
+'use server';
+
+import { redirect } from 'next/navigation';
+
+// 当不想被路由拦截时请使用此方法绕过
+
+export default async function redirectHard(uri: string) {
+  redirect(uri);
+}

package/src/store/global/initialState.ts

@@ -6,6 +6,7 @@ import { AsyncLocalStorage } from '@/utils/localStorage';
 export enum SidebarTabKey {
   Chat = 'chat',
   Market = 'market',
+  Me = 'me',
   Setting = 'settings',
 }
 

package/src/app/(main)/@nav/_layout/Desktop/Avatar.tsx

@@ -1,11 +0,0 @@
-import { memo } from 'react';
-
-import AvatarWithUpload from '@/features/AvatarWithUpload';
-
-const Avatar = memo(() => {
-  return <AvatarWithUpload id={'avatar'} />;
-});
-
-Avatar.displayName = 'Avatar';
-
-export default Avatar;

package/src/app/(main)/chat/settings/(desktop)/index.tsx

@@ -1,23 +0,0 @@
-'use client';
-
-import { memo } from 'react';
-import { Flexbox } from 'react-layout-kit';
-
-import SafeSpacing from '@/components/SafeSpacing';
-import ClientResponsiveContent from '@/components/client/ClientResponsiveContent';
-import { HEADER_HEIGHT } from '@/const/layoutTokens';
-
-import EditPage from '../features/EditPage';
-import Header from './Header';
-
-const Desktop = memo(() => (
-  <>
-    <Header />
-    <Flexbox align={'center'} flex={1} gap={16} padding={24} style={{ overflow: 'scroll' }}>
-      <SafeSpacing height={HEADER_HEIGHT - 16} />
-      <EditPage />
-    </Flexbox>
-  </>
-));
-
-export default ClientResponsiveContent({ Desktop, Mobile: () => import('../(mobile)') });

package/src/app/(main)/chat/settings/(mobile)/index.tsx

@@ -1,16 +0,0 @@
-'use client';
-
-import { memo } from 'react';
-
-import MobileContentLayout from '@/components/server/MobileNavLayout';
-
-import EditPage from '../features/EditPage';
-import Header from './Header';
-
-const ChatSettings = memo(() => (
-  <MobileContentLayout header={<Header />} withNav={false}>
-    <EditPage />
-  </MobileContentLayout>
-));
-
-export default ChatSettings;

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

@@ -1,23 +0,0 @@
-'use client';
-
-import dynamic from 'next/dynamic';
-import { FC, memo } from 'react';
-
-import MobileSwitchLoading from '@/features/MobileSwitchLoading';
-import { useIsMobile } from '@/hooks/useIsMobile';
-
-import Common from '../common';
-import { SettingsCommonProps } from '../common/Common';
-
-const Mobile: FC = dynamic(() => import('../(mobile)'), {
-  loading: MobileSwitchLoading,
-  ssr: false,
-}) as FC;
-
-const Desktop = memo<SettingsCommonProps>((props) => {
-  const mobile = useIsMobile();
-
-  return mobile ? <Mobile /> : <Common {...props} />;
-});
-
-export default Desktop;

package/src/app/(main)/settings/(mobile)/features/AvatarBanner.tsx

@@ -1,68 +0,0 @@
-import { DivProps } from '@lobehub/ui';
-import { createStyles } from 'antd-style';
-import Image from 'next/image';
-import { memo } from 'react';
-import { Flexbox } from 'react-layout-kit';
-
-import { DEFAULT_USER_AVATAR_URL } from '@/const/meta';
-
-export const useStyles = createStyles(({ css, token }) => ({
-  banner: css`
-    position: relative;
-
-    overflow: hidden;
-
-    height: 172px;
-    min-height: 172px;
-    max-height: 172px;
-  `,
-  bannerBox: css`
-    position: relative;
-
-    width: 100%;
-    height: 100%;
-
-    background: ${token.colorBgLayout};
-
-    mask-image: linear-gradient(to bottom, #fff, transparent);
-  `,
-  bannerImg: css`
-    position: absolute;
-    top: -50%;
-    filter: blur(100px) saturate(2);
-  `,
-}));
-
-interface AgentCardBannerProps extends DivProps {
-  avatar: string;
-  size?: number;
-}
-
-const AvatarBanner = memo<AgentCardBannerProps>(
-  ({ avatar, className, size = 200, children, ...props }) => {
-    const { styles, cx } = useStyles();
-
-    return (
-      <Flexbox
-        align={'center'}
-        className={cx(styles.banner, className)}
-        justify={'center'}
-        {...props}
-      >
-        <Flexbox align={'center'} className={styles.bannerBox} justify={'center'}>
-          <Image
-            alt={'banner'}
-            className={styles.bannerImg}
-            height={size}
-            src={avatar || DEFAULT_USER_AVATAR_URL}
-            unoptimized
-            width={size}
-          />
-        </Flexbox>
-        {children}
-      </Flexbox>
-    );
-  },
-);
-
-export default AvatarBanner;