@lobehub/chat 0.152.0 → 0.152.2

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;

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

package/src/features/ChatInput/STT/browser.tsx

@@ -1,5 +1,5 @@
 import { SpeechRecognitionOptions, useSpeechRecognition } from '@lobehub/tts/react';
-import { isEqual } from 'lodash';
+import isEqual from 'fast-deep-equal';
 import { memo, useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { SWRConfiguration } from 'swr';

package/src/features/ChatInput/STT/openai.tsx

@@ -1,6 +1,6 @@
 import { getRecordMineType } from '@lobehub/tts';
 import { OpenAISTTOptions, useOpenAISTT } from '@lobehub/tts/react';
-import { isEqual } from 'lodash';
+import isEqual from 'fast-deep-equal';
 import { memo, useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { SWRConfiguration } from 'swr';

package/src/features/Conversation/components/InboxWelcome/AgentsSuggest.tsx

@@ -10,7 +10,7 @@ import { memo, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import { agentMarketSelectors, useMarketStore } from '@/store/market';
+import { useMarketStore } from '@/store/market';
 
 const { Paragraph } = Typography;
 
@@ -53,7 +53,7 @@ const AgentsSuggest = memo(() => {
   const [sliceStart, setSliceStart] = useState(0);
   const useFetchAgentList = useMarketStore((s) => s.useFetchAgentList);
   const { isLoading } = useFetchAgentList();
-  const agentList = useMarketStore((s) => agentMarketSelectors.getAgentList(s), isEqual);
+  const agentList = useMarketStore((s) => s.agentList, isEqual);
   const { styles } = useStyles();
 
   const loadingCards = Array.from({ length: 4 }).map((_, index) => (