@lobehub/chat 0.152.6 → 0.152.8

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

@@ -0,0 +1,95 @@
+'use client';
+
+import { Form, ItemGroup, SliderWithInput } from '@lobehub/ui';
+import { Switch } from 'antd';
+import { debounce } from 'lodash-es';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useSyncSettings } from '@/app/(main)/settings/hooks/useSyncSettings';
+import { FORM_STYLE } from '@/const/layoutTokens';
+
+import { useStore } from '../store';
+import ModelSelect from './ModelSelect';
+
+const AgentModal = memo(() => {
+  const { t } = useTranslation('setting');
+  const [form] = Form.useForm();
+
+  const [enableMaxTokens, updateConfig] = useStore((s) => [
+    s.config.enableMaxTokens,
+    s.setAgentConfig,
+  ]);
+
+  useSyncSettings(form);
+
+  const model: ItemGroup = {
+    children: [
+      {
+        children: <ModelSelect />,
+        desc: t('settingModel.model.desc'),
+        label: t('settingModel.model.title'),
+        name: 'model',
+        tag: 'model',
+      },
+      {
+        children: <SliderWithInput max={1} min={0} step={0.1} />,
+        desc: t('settingModel.temperature.desc'),
+        label: t('settingModel.temperature.title'),
+        name: ['params', 'temperature'],
+        tag: 'temperature',
+      },
+      {
+        children: <SliderWithInput max={1} min={0} step={0.1} />,
+        desc: t('settingModel.topP.desc'),
+        label: t('settingModel.topP.title'),
+        name: ['params', 'top_p'],
+        tag: 'top_p',
+      },
+      {
+        children: <SliderWithInput max={2} min={-2} step={0.1} />,
+        desc: t('settingModel.presencePenalty.desc'),
+        label: t('settingModel.presencePenalty.title'),
+        name: ['params', 'presence_penalty'],
+        tag: 'presence_penalty',
+      },
+      {
+        children: <SliderWithInput max={2} min={-2} step={0.1} />,
+        desc: t('settingModel.frequencyPenalty.desc'),
+        label: t('settingModel.frequencyPenalty.title'),
+        name: ['params', 'frequency_penalty'],
+        tag: 'frequency_penalty',
+      },
+      {
+        children: <Switch />,
+        label: t('settingModel.enableMaxTokens.title'),
+        minWidth: undefined,
+        name: 'enableMaxTokens',
+        valuePropName: 'checked',
+      },
+      {
+        children: <SliderWithInput max={32_000} min={0} step={100} />,
+        desc: t('settingModel.maxTokens.desc'),
+        divider: false,
+        hidden: !enableMaxTokens,
+        label: t('settingModel.maxTokens.title'),
+        name: ['params', 'max_tokens'],
+        tag: 'max_tokens',
+      },
+    ],
+    title: t('settingModel.title'),
+  };
+
+  return (
+    <Form
+      form={form}
+      items={[model]}
+      itemsType={'group'}
+      onValuesChange={debounce(updateConfig, 100)}
+      variant={'pure'}
+      {...FORM_STYLE}
+    />
+  );
+});
+
+export default AgentModal;

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';
@@ -5,7 +7,7 @@ import { CSSProperties, memo, useCallback } from 'react';
 
 import { DEFAULT_USER_AVATAR_URL } from '@/const/meta';
 import { useUserStore } from '@/store/user';
-import { commonSelectors } from '@/store/user/selectors';
+import { userProfileSelectors } from '@/store/user/selectors';
 import { imageToBase64 } from '@/utils/imageToBase64';
 import { createUploadImageHandler } from '@/utils/uploadFIle';
 
@@ -39,7 +41,7 @@ const AvatarWithUpload = memo<AvatarWithUploadProps>(
   ({ size = 40, compressSize = 256, style, id }) => {
     const { styles } = useStyle();
     const [avatar, updateAvatar] = useUserStore((s) => [
-      commonSelectors.userAvatar(s),
+      userProfileSelectors.userAvatar(s),
       s.updateAvatar,
     ]);
 

package/src/hooks/useQuery.test.ts

@@ -0,0 +1,20 @@
+import { renderHook } from '@testing-library/react';
+import { useSearchParams } from 'next/navigation';
+import { describe, expect, it, vi } from 'vitest';
+
+import { useQuery } from './useQuery';
+
+// Mocks
+vi.mock('next/navigation', () => ({
+  useSearchParams: vi.fn(() => 'baz=qux&foo=bar'),
+}));
+
+describe('useQuery', () => {
+  it('should parse query', () => {
+    const { result } = renderHook(() => useQuery());
+    expect(result.current).toEqual({
+      baz: 'qux',
+      foo: 'bar',
+    });
+  });
+});

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.test.ts

@@ -0,0 +1,86 @@
+import { renderHook } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+
+import { useQueryRoute } from './useQueryRoute';
+
+// Mocks
+vi.mock('next/navigation', () => ({
+  useRouter: vi.fn(() => ({
+    push: vi.fn((href) => href),
+    replace: vi.fn((href) => href),
+  })),
+}));
+vi.mock('@/hooks/useQuery', () => ({
+  useQuery: vi.fn(() => ({ foo: 'bar' })),
+}));
+vi.mock('@/utils/env', () => ({
+  isOnServerSide: false,
+}));
+
+describe('useQueryRoute', () => {
+  it('should generate correct href without hash and replace', () => {
+    const { result } = renderHook(() =>
+      useQueryRoute().push('/example', {
+        query: { baz: 'qux' },
+      }),
+    );
+
+    expect(result.current).toBe('/example?baz=qux&foo=bar');
+  });
+
+  it('should replace entire query string when replace is true', () => {
+    const { result } = renderHook(() =>
+      useQueryRoute().push('/example', {
+        replace: true,
+        query: { baz: 'qux' },
+      }),
+    );
+
+    expect(result.current).toBe('/example?baz=qux');
+  });
+
+  it('should append hash to the URL', () => {
+    const { result } = renderHook(() =>
+      useQueryRoute().push('/example', {
+        replace: true,
+        query: { foo: 'bar' },
+        hash: 'section1',
+      }),
+    );
+
+    expect(result.current).toBe('/example?foo=bar#section1');
+  });
+
+  it('should handle scenarios when on server side', () => {
+    const { result } = renderHook(() =>
+      useQueryRoute().push('/example', {
+        query: { foo: 'bar' },
+        hash: 'section1',
+      }),
+    );
+
+    expect(result.current).toBe('/example?foo=bar#section1');
+  });
+
+  it('should handle cases with empty query and hash', () => {
+    const { result } = renderHook(() =>
+      useQueryRoute().replace('/example', {
+        replace: true,
+        query: {},
+        hash: '',
+      }),
+    );
+
+    expect(result.current).toBe('/example');
+  });
+
+  it('should handle cases without hash when on server side', () => {
+    const { result } = renderHook(() =>
+      useQueryRoute().replace('/example', {
+        query: { foo: 'bar' },
+      }),
+    );
+
+    expect(result.current).toBe('/example?foo=bar');
+  });
+});

package/src/hooks/useQueryRoute.ts

@@ -0,0 +1,46 @@
+import { useRouter } from 'next/navigation';
+import qs, { type ParsedQuery } from 'query-string';
+import { useMemo } from 'react';
+
+import { useQuery } from '@/hooks/useQuery';
+import { isOnServerSide } from '@/utils/env';
+
+interface QueryRouteOptions {
+  hash?: string;
+  query?: ParsedQuery;
+  replace?: boolean;
+  replaceHash?: boolean;
+  withHash?: boolean;
+}
+
+interface GenHrefOptions extends QueryRouteOptions {
+  prevQuery?: ParsedQuery;
+  url: string;
+}
+
+const genHref = ({ hash, replace, url, prevQuery = {}, query = {} }: GenHrefOptions): string => {
+  let href = qs.stringifyUrl({ query: replace ? query : { ...prevQuery, ...query }, url });
+
+  if (!isOnServerSide && hash) {
+    href = [href, hash || location?.hash?.slice(1)].filter(Boolean).join('#');
+  }
+
+  return href;
+};
+
+export const useQueryRoute = () => {
+  const router = useRouter();
+  const prevQuery = useQuery();
+
+  return useMemo(
+    () => ({
+      push: (url: string, options: QueryRouteOptions = {}) => {
+        return router.push(genHref({ prevQuery, url, ...options }));
+      },
+      replace: (url: string, options: QueryRouteOptions = {}) => {
+        return router.replace(genHref({ prevQuery, url, ...options }));
+      },
+    }),
+    [prevQuery],
+  );
+};