@lobehub/chat 0.13.1 → 0.15.0

package/src/pages/chat/[id]/edit/AgentConfig/index.tsx

@@ -1,113 +1,172 @@
-import { Collapse, ConfigProvider, InputNumber, Segmented, Slider } from 'antd';
+import { Form, ItemGroup } from '@lobehub/ui';
+import { Input, Segmented, Select, Switch } from 'antd';
 import isEqual from 'fast-deep-equal';
+import { debounce } from 'lodash-es';
+import { BrainCog, MessagesSquare } from 'lucide-react';
+import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
 import { shallow } from 'zustand/shallow';
 
+import { FORM_STYLE } from '@/const/layoutTokens';
+import SliderWithInput from '@/features/SliderWithInput';
 import { agentSelectors, useSessionStore } from '@/store/session';
 import { LanguageModel } from '@/types/llm';
+import type { LobeAgentConfig } from '@/types/session';
 
-import { FormItem } from '../FormItem';
-import { useStyles } from '../style';
-import Plugin from './Plugin';
-import Prompt from './Prompt';
+type SettingItemGroup = ItemGroup & {
+  children: {
+    name?: keyof LobeAgentConfig;
+  }[];
+};
 
 const AgentConfig = () => {
-  const { t } = useTranslation('common');
-
-  const { styles, theme } = useStyles();
+  const { t } = useTranslation('setting');
 
   const config = useSessionStore(agentSelectors.currentAgentConfigSafe, isEqual);
 
   const [updateAgentConfig] = useSessionStore((s) => [s.updateAgentConfig], shallow);
 
-  return (
-    <ConfigProvider
-      theme={{
-        components: {
-          Segmented: {
-            colorBgLayout: theme.isDarkMode ? '#111' : '#f1f1f1',
-          },
+  // TODO: setting 结构嵌套，现在是扁平的 params: { temperature: 0.6 }
+  // @ts-ignore
+  const chat: SettingItemGroup = useMemo(
+    () => ({
+      children: [
+        {
+          children: (
+            <Segmented
+              options={[
+                { label: t('settingChat.chatStyleType.type.bubble'), value: 'chat' },
+                { label: t('settingChat.chatStyleType.type.docs'), value: 'docs' },
+              ]}
+            />
+          ),
+          label: t('settingChat.chatStyleType.title'),
+          minWidth: undefined,
+          name: 'chatStyleType',
+        },
+        {
+          children: <Input placeholder={t('settingChat.inputTemplate.placeholder')} />,
+          desc: t('settingChat.inputTemplate.desc'),
+          label: t('settingChat.inputTemplate.title'),
+          name: 'enableHistoryCount',
+        },
+        {
+          children: <Switch />,
+          label: t('settingChat.enableHistoryCount.title'),
+          minWidth: undefined,
+          name: 'enableHistoryCount',
+          valuePropName: 'checked',
+        },
+        {
+          children: <SliderWithInput max={32} min={0} />,
+          desc: t('settingChat.historyCount.desc'),
+          // @ts-ignore
+          hidden: !config.params.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'),
+          // @ts-ignore
+          hidden: !config.params.enableCompressThreshold,
+          label: t('settingChat.compressThreshold.title'),
+          name: 'compressThreshold',
+        },
+      ],
+      icon: MessagesSquare,
+      title: t('settingChat.title'),
+    }),
+    [config],
+  );
+
+  // TODO: setting 结构嵌套，现在是扁平的 params: { temperature: 0.6 }
+  // @ts-ignore
+  const model: SettingItemGroup = useMemo(
+    () => ({
+      children: [
+        {
+          children: (
+            <Select
+              options={Object.values(LanguageModel).map((value) => ({
+                label: value,
+                value,
+              }))}
+            />
+          ),
+          desc: t('settingModel.model.desc'),
+          label: t('settingModel.model.title'),
+          name: 'model',
+          tag: 'model',
         },
-      }}
-    >
-      <Flexbox
-        align={'center'}
-        distribution={'space-between'}
-        horizontal
-        paddingBlock={12}
-        style={{
-          borderBottom: `1px solid ${theme.colorBorder}`,
-        }}
-      >
-        <Flexbox className={styles.profile}> {t('modelConfig')}</Flexbox>
-      </Flexbox>
-      <Flexbox gap={24}>
-        <FormItem label={t('agentModel')}>
-          <Segmented
-            block
-            onChange={(value) => {
-              updateAgentConfig({ model: value as LanguageModel });
-            }}
-            options={Object.values(LanguageModel).map((value) => ({
-              label: t(value),
-              value,
-            }))}
-            size={'large'}
-            value={config.model}
-          />
-        </FormItem>
-        <Prompt />
-        <Collapse
-          className={styles.title}
-          expandIconPosition={'end'}
-          items={[
-            {
-              children: (
-                <Flexbox paddingBlock={16}>
-                  <FormItem label={t('modelTemperature')}>
-                    <Flexbox gap={16} horizontal>
-                      <Slider
-                        max={1}
-                        min={0}
-                        onChange={(value) => {
-                          updateAgentConfig({ params: { temperature: value } });
-                        }}
-                        step={0.1}
-                        style={{ flex: 1 }}
-                        value={Number(config.params.temperature)}
-                      />
-                      <InputNumber
-                        max={1}
-                        min={0}
-                        onChange={(value) => {
-                          if (value) updateAgentConfig({ params: { temperature: value } });
-                        }}
-                        value={config.params.temperature}
-                      />
-                    </Flexbox>
-                  </FormItem>
-                </Flexbox>
-              ),
-              key: 'advanceSettings',
-              label: t('advanceSettings'),
-            },
-          ]}
-        />
-        <Flexbox
-          align={'center'}
-          distribution={'space-between'}
-          horizontal
-          paddingBlock={12}
-          style={{
-            borderBottom: `1px solid ${theme.colorBorder}`,
-          }}
-        >
-          <Flexbox className={styles.profile}> {t('pluginList')}</Flexbox>
-        </Flexbox>
-        <Plugin />
-      </Flexbox>
-    </ConfigProvider>
+        {
+          children: <SliderWithInput max={1} min={0} step={0.1} />,
+          desc: t('settingModel.temperature.desc'),
+          label: t('settingModel.temperature.title'),
+          name: 'temperature',
+          tag: 'temperature',
+        },
+        {
+          children: <SliderWithInput max={1} min={0} step={0.1} />,
+          desc: t('settingModel.topP.desc'),
+          label: t('settingModel.topP.title'),
+          name: 'topP',
+          tag: 'top_p',
+        },
+        {
+          children: <SliderWithInput max={2} min={-2} step={0.1} />,
+          desc: t('settingModel.presencePenalty.desc'),
+          label: t('settingModel.presencePenalty.title'),
+          name: 'presencePenalty',
+          tag: 'presence_penalty',
+        },
+        {
+          children: <SliderWithInput max={2} min={-2} step={0.1} />,
+          desc: t('settingModel.frequencyPenalty.desc'),
+          label: t('settingModel.frequencyPenalty.title'),
+          name: 'frequencyPenalty',
+          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'),
+          // TODO
+          // @ts-ignore
+          hidden: !config?.params?.enableMaxTokens,
+          label: t('settingModel.maxTokens.title'),
+          name: 'params.maxTokens',
+          tag: 'max_tokens',
+        },
+      ],
+      icon: BrainCog,
+      title: t('settingModel.title'),
+    }),
+    [config],
+  );
+
+  const items = useMemo(() => [chat, model], [config]);
+
+  return (
+    <Form
+      initialValues={config}
+      items={items}
+      onValuesChange={debounce(updateAgentConfig, 100)}
+      {...FORM_STYLE}
+    />
   );
 };
 

package/src/pages/chat/[id]/edit/AgentMeta/AutoGenerateInput.tsx

@@ -0,0 +1,39 @@
+import { ActionIcon } from '@lobehub/ui';
+import { Input, InputProps } from 'antd';
+import { useTheme } from 'antd-style';
+import { Wand2 } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+export interface AutoGenerateInputProps extends InputProps {
+  loading: boolean;
+  onGenerate: () => void;
+}
+
+const AutoGenerateInput = memo<AutoGenerateInputProps>(({ loading, onGenerate, ...props }) => {
+  const { t } = useTranslation('common');
+  const theme = useTheme();
+
+  return (
+    <Input
+      suffix={
+        <ActionIcon
+          active
+          icon={Wand2}
+          loading={loading}
+          onClick={onGenerate}
+          size={'small'}
+          style={{
+            color: theme.colorInfo,
+            marginRight: -4,
+          }}
+          title={t('autoGenerate')}
+        />
+      }
+      type={'block'}
+      {...props}
+    />
+  );
+});
+
+export default AutoGenerateInput;

package/src/pages/chat/[id]/edit/AgentMeta/BackgroundSwatches.tsx

@@ -0,0 +1,31 @@
+import { Swatches, primaryColorsSwatches } from '@lobehub/ui';
+import { memo } from 'react';
+import { shallow } from 'zustand/shallow';
+
+import { DEFAULT_BACKGROUND_COLOR } from '@/const/meta';
+import { agentSelectors, useSessionStore } from '@/store/session';
+
+const BackgroundSwatches = memo(() => {
+  const [backgroundColor, updateAgentMeta] = useSessionStore(
+    (s) => [agentSelectors.currentAgentBackgroundColor(s), s.updateAgentMeta],
+    shallow,
+  );
+
+  const handleSelect = (v: any) => {
+    if (v) {
+      updateAgentMeta({ backgroundColor: v });
+    } else {
+      updateAgentMeta({ backgroundColor: DEFAULT_BACKGROUND_COLOR });
+    }
+  };
+
+  return (
+    <Swatches
+      activeColor={backgroundColor}
+      colors={primaryColorsSwatches}
+      onSelect={handleSelect}
+    />
+  );
+});
+
+export default BackgroundSwatches;

package/src/pages/chat/[id]/edit/AgentMeta/EmojiPicker.tsx

@@ -39,8 +39,12 @@ const useStyles = createStyles(({ css, token, prefixCls }) => ({
 
 const EmojiPicker = () => {
   const { styles } = useStyles();
-  const [avatar, updateAgentMeta] = useSessionStore(
-    (s) => [agentSelectors.currentAgentAvatar(s), s.updateAgentMeta],
+  const [avatar, backgroundColor, updateAgentMeta] = useSessionStore(
+    (s) => [
+      agentSelectors.currentAgentAvatar(s),
+      agentSelectors.currentAgentBackgroundColor(s),
+      s.updateAgentMeta,
+    ],
     shallow,
   );
 
@@ -65,7 +69,7 @@ const EmojiPicker = () => {
       trigger={'click'}
     >
       <div className={styles.avatar} style={{ width: 'fit-content' }}>
-        <Avatar avatar={avatar} size={200} />
+        <Avatar avatar={avatar} background={backgroundColor} size={44} />
       </div>
     </Popover>
   );

package/src/pages/chat/[id]/edit/AgentMeta/index.tsx

@@ -1,21 +1,20 @@
-import { ActionIcon, Input, Tooltip } from '@lobehub/ui';
-import { Button, Collapse } from 'antd';
+import { Form, Icon, type ItemGroup, Tooltip } from '@lobehub/ui';
+import { Button } from 'antd';
 import isEqual from 'fast-deep-equal';
-import { LucideSparkles } from 'lucide-react';
+import { UserCircle, Wand2 } from 'lucide-react';
+import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
 import { shallow } from 'zustand/shallow';
 
+import { FORM_STYLE } from '@/const/layoutTokens';
 import { agentSelectors, useSessionStore } from '@/store/session';
 
-import { FormItem } from '../FormItem';
-import { useStyles } from '../style';
+import AutoGenerateInput from './AutoGenerateInput';
+import BackgroundSwatches from './BackgroundSwatches';
 import EmojiPicker from './EmojiPicker';
 
-const AgentMeta = () => {
-  const { t } = useTranslation('common');
-
-  const { styles, theme } = useStyles();
+const AgentMeta = memo(() => {
+  const { t } = useTranslation('setting');
 
   const metaData = useSessionStore(agentSelectors.currentAgentMeta, isEqual);
 
@@ -39,80 +38,74 @@ const AgentMeta = () => {
   );
 
   const basic = [
-    { key: 'title', label: t('agentName'), placeholder: t('agentNamePlaceholder') },
+    {
+      key: 'title',
+      label: t('settingAgent.name.title'),
+      placeholder: t('settingAgent.name.placeholder'),
+    },
     {
       key: 'description',
-      label: t('agentDescription'),
-      placeholder: t('agentDescriptionPlaceholder'),
+      label: t('settingAgent.description.title'),
+      placeholder: t('settingAgent.description.placeholder'),
     },
     // { key: 'tag', label: t('agentTag'), placeholder: t('agentTagPlaceholder') },
   ];
 
-  return (
-    <Collapse
-      defaultActiveKey={hasSystemRole ? ['meta'] : []}
-      items={[
+  const meta: ItemGroup = useMemo(
+    () => ({
+      children: [
+        {
+          children: <EmojiPicker />,
+          label: t('settingAgent.avatar.title'),
+          minWidth: undefined,
+        },
         {
+          children: <BackgroundSwatches />,
+          label: t('settingAgent.backgroundColor.title'),
+          minWidth: undefined,
+        },
+        ...basic.map((item) => ({
           children: (
-            <Flexbox gap={80} horizontal style={{ marginTop: 16 }}>
-              <Flexbox flex={1} gap={24}>
-                {basic.map((item) => (
-                  <FormItem key={item.key} label={item.label}>
-                    <Input
-                      onChange={(e) => {
-                        updateAgentMeta({ [item.key]: e.target.value });
-                      }}
-                      placeholder={item.placeholder}
-                      suffix={
-                        <ActionIcon
-                          icon={LucideSparkles}
-                          loading={loading[item.key as keyof typeof loading]}
-                          onClick={() => {
-                            autocompleteMeta(item.key as keyof typeof metaData);
-                          }}
-                          size={'small'}
-                          style={{
-                            color: theme.purple,
-                          }}
-                          title={t('autoGenerate')}
-                        />
-                      }
-                      type={'block'}
-                      value={metaData[item.key as keyof typeof metaData]}
-                    />
-                  </FormItem>
-                ))}
-              </Flexbox>
-              <FormItem label={t('agentAvatar')}>
-                <EmojiPicker />
-              </FormItem>
-            </Flexbox>
-          ),
-          className: styles.collapseHeader,
-          extra: (
-            <Tooltip title={t('autoGenerateTooltip')}>
-              <Button
-                disabled={!hasSystemRole}
-                loading={Object.values(loading).some((i) => !!i)}
-                onClick={(e: any) => {
-                  e.stopPropagation();
-                  console.log(id);
-                  if (!id) return;
-
-                  autocompleteSessionAgentMeta(id, true);
-                }}
-                size={'large'}
-              >
-                {t('autoGenerate')}
-              </Button>
-            </Tooltip>
+            <AutoGenerateInput
+              loading={loading[item.key as keyof typeof loading]}
+              onChange={(e) => {
+                updateAgentMeta({ [item.key]: e.target.value });
+              }}
+              onGenerate={() => {
+                autocompleteMeta(item.key as keyof typeof metaData);
+              }}
+              placeholder={item.placeholder}
+              value={metaData[item.key as keyof typeof metaData]}
+            />
           ),
-          key: 'meta',
-          label: <Flexbox className={styles.profile}>{t('profile')}</Flexbox>,
-        },
-      ]}
-    />
+          label: item.label,
+        })),
+      ],
+      extra: (
+        <Tooltip title={t('autoGenerateTooltip', { ns: 'common' })}>
+          <Button
+            disabled={!hasSystemRole}
+            icon={<Icon icon={Wand2} />}
+            loading={Object.values(loading).some((i) => !!i)}
+            onClick={(e: any) => {
+              e.stopPropagation();
+              console.log(id);
+              if (!id) return;
+              autocompleteSessionAgentMeta(id, true);
+            }}
+            size={'small'}
+          >
+            {t('autoGenerate', { ns: 'common' })}
+          </Button>
+        </Tooltip>
+      ),
+      icon: UserCircle,
+      title: t('settingAgent.title'),
+    }),
+    [basic, metaData],
   );
-};
+
+  return <Form items={[meta]} {...FORM_STYLE} />;
+});
 
 export default AgentMeta;

package/src/pages/chat/[id]/edit/AgentPlugin/index.tsx

@@ -0,0 +1,44 @@
+import { Avatar, Form, ItemGroup } from '@lobehub/ui';
+import { Switch } from 'antd';
+import isEqual from 'fast-deep-equal';
+import { ToyBrick } from 'lucide-react';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { shallow } from 'zustand/shallow';
+
+import { FORM_STYLE } from '@/const/layoutTokens';
+import pluginList from '@/plugins';
+import { agentSelectors, useSessionStore } from '@/store/session';
+
+const PluginList = () => {
+  const { t } = useTranslation('setting');
+
+  const config = useSessionStore(agentSelectors.currentAgentConfigSafe, isEqual);
+
+  const toggleAgentPlugin = useSessionStore((s) => s.toggleAgentPlugin, shallow);
+
+  const plugin: ItemGroup = useMemo(
+    () => ({
+      children: pluginList.map((item) => ({
+        avatar: <Avatar avatar={item.avatar} />,
+        children: (
+          <Switch
+            checked={!config.plugins ? false : config.plugins.includes(item.name)}
+            onChange={() => toggleAgentPlugin(item.name)}
+          />
+        ),
+        desc: item.schema.description,
+        label: t(`plugins.${item.name}` as any, { ns: 'plugin' }),
+        minWidth: undefined,
+        tag: item.name,
+      })),
+      icon: ToyBrick,
+      title: t('settingPlugin.title'),
+    }),
+    [config],
+  );
+
+  return <Form items={[plugin]} {...FORM_STYLE} />;
+};
+
+export default PluginList;

package/src/pages/chat/[id]/edit/AgentPrompt/index.tsx

@@ -0,0 +1,48 @@
+import { CodeEditor, FormGroup } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { Bot } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { shallow } from 'zustand/shallow';
+
+import { FORM_STYLE } from '@/const/layoutTokens';
+import { agentSelectors, useSessionStore } from '@/store/session';
+
+export const useStyles = createStyles(({ css, token }) => ({
+  input: css`
+    padding: 12px;
+    background: ${token.colorFillTertiary};
+    border: 1px solid ${token.colorPrimaryBorder};
+    border-radius: 8px;
+  `,
+  markdown: css`
+    padding: 12px;
+    background: ${token.colorFillTertiary};
+  `,
+}));
+
+const AgentPrompt = memo(() => {
+  const { t } = useTranslation('setting');
+
+  const systemRole = useSessionStore(agentSelectors.currentAgentSystemRole, shallow);
+
+  const [updateAgentConfig] = useSessionStore((s) => [s.updateAgentConfig], shallow);
+
+  return (
+    <FormGroup icon={Bot} style={FORM_STYLE.style} title={t('settingAgent.prompt.title')}>
+      <CodeEditor
+        language={'md'}
+        onValueChange={(e) => {
+          updateAgentConfig({ systemRole: e });
+        }}
+        placeholder={t('settingAgent.name.placeholder')}
+        resize={false}
+        style={{ marginBottom: 16, marginTop: 16 }}
+        type={'pure'}
+        value={systemRole}
+      />
+    </FormGroup>
+  );
+});
+
+export default AgentPrompt;

package/src/pages/chat/[id]/edit/Header.tsx

@@ -0,0 +1,31 @@
+import { ActionIcon, ChatHeader } from '@lobehub/ui';
+import { Download, Share2 } from 'lucide-react';
+import Router from 'next/router';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import HeaderTitle from '@/components/HeaderTitle';
+
+const Header = memo(() => {
+  const { t } = useTranslation('setting');
+
+  return (
+    <ChatHeader
+      left={<HeaderTitle title={t('header.session')} />}
+      onBackClick={() => Router.back()}
+      right={
+        <>
+          <ActionIcon icon={Share2} size={{ fontSize: 24 }} title={t('share', { ns: 'common' })} />
+          <ActionIcon
+            icon={Download}
+            size={{ fontSize: 24 }}
+            title={t('export', { ns: 'common' })}
+          />
+        </>
+      }
+      showBackButton
+    />
+  );
+});
+
+export default Header;