@lobehub/chat 0.14.0 → 0.15.1

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

@@ -0,0 +1,26 @@
+import { type ReactNode, memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+interface HeaderProps {
+  actions?: ReactNode;
+  title: string;
+}
+
+const Header = memo<HeaderProps>(({ title, actions }) => {
+  return (
+    <Flexbox
+      align={'center'}
+      distribution={'space-between'}
+      horizontal
+      padding={12}
+      paddingInline={16}
+    >
+      <Flexbox>{title}</Flexbox>
+      <Flexbox gap={4} horizontal>
+        {actions}
+      </Flexbox>
+    </Flexbox>
+  );
+});
+
+export default Header;

package/src/pages/chat/[id]/Config/SideBar.tsx

@@ -0,0 +1,86 @@
+import { ActionIcon, DraggablePanelBody, EditableMessage, SearchBar } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { ChevronRight } from 'lucide-react';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+import { shallow } from 'zustand/shallow';
+
+import { agentSelectors, useSessionStore } from '@/store/session';
+
+import Header from './Header';
+
+const useStyles = createStyles(({ css, token }) => ({
+  desc: css`
+    color: ${token.colorText};
+  `,
+  model: css`
+    color: ${token.colorTextTertiary};
+  `,
+  prompt: css`
+    overflow-x: hidden;
+    overflow-y: auto;
+
+    height: 200px;
+    padding: 0 16px 16px;
+
+    opacity: 0.75;
+    border-bottom: 1px solid ${token.colorBorder};
+
+    transition: 200ms ${token.motionEaseOut};
+
+    &:hover {
+      opacity: 1;
+    }
+  `,
+  title: css`
+    font-size: ${token.fontSizeHeading4}px;
+    font-weight: bold;
+  `,
+}));
+
+const SideBar = memo(() => {
+  const [openModal, setOpenModal] = useState(false);
+  const { styles } = useStyles();
+  const [updateAgentConfig] = useSessionStore((s) => [s.updateAgentConfig], shallow);
+  const systemRole = useSessionStore(agentSelectors.currentAgentSystemRole, shallow);
+
+  const { t } = useTranslation('common');
+  return (
+    <DraggablePanelBody style={{ padding: 0 }}>
+      <Header
+        actions={
+          <ActionIcon
+            icon={ChevronRight}
+            onClick={() => setOpenModal(true)}
+            size="small"
+            title={t('edit')}
+          />
+        }
+        title={t('settingAgent.prompt.title', { ns: 'setting' })}
+      />
+      <EditableMessage
+        classNames={{ markdown: styles.prompt }}
+        onChange={(e) => {
+          updateAgentConfig({ systemRole: e });
+        }}
+        onOpenChange={setOpenModal}
+        openModal={openModal}
+        placeholder={`${t('settingAgent.prompt.placeholder', { ns: 'setting' })}...`}
+        styles={{ markdown: systemRole ? {} : { opacity: 0.5 } }}
+        text={{
+          cancel: t('cancel'),
+          confirm: t('ok'),
+          edit: t('edit'),
+          title: t('settingAgent.prompt.title', { ns: 'setting' }),
+        }}
+        value={systemRole}
+      />
+      <Flexbox style={{ padding: 16 }}>
+        <SearchBar placeholder={t('archiveSearchPlaceholder')} />
+      </Flexbox>
+    </DraggablePanelBody>
+  );
+});
+
+export default SideBar;

package/src/pages/chat/[id]/Config/index.tsx

@@ -1,22 +1,13 @@
-import {
-  ActionIcon,
-  DraggablePanel,
-  DraggablePanelBody,
-  DraggablePanelContainer,
-} from '@lobehub/ui';
+import { DraggablePanel, DraggablePanelContainer } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
-import { LucideEdit, LucideX } from 'lucide-react';
-import Router from 'next/router';
 import { rgba } from 'polished';
-import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
 import { shallow } from 'zustand/shallow';
 
 import HeaderSpacing from '@/components/HeaderSpacing';
 import { CHAT_SIDEBAR_WIDTH } from '@/const/layoutTokens';
 import { useSessionStore } from '@/store/session';
 
-import ReadMode from './ReadMode';
+import SideBar from './SideBar';
 
 const useStyles = createStyles(({ cx, css, token, stylish }) => ({
   drawer: cx(
@@ -31,10 +22,9 @@ const useStyles = createStyles(({ cx, css, token, stylish }) => ({
 }));
 
 const Config = () => {
-  const { t } = useTranslation('common');
   const { styles } = useStyles();
-  const [showAgentSettings, toggleConfig, id] = useSessionStore(
-    (s) => [s.showAgentSettings, s.toggleConfig, s.activeId],
+  const [showAgentSettings, toggleConfig] = useSessionStore(
+    (s) => [s.showAgentSettings, s.toggleConfig],
     shallow,
   );
 
@@ -50,37 +40,7 @@ const Config = () => {
     >
       <HeaderSpacing />
       <DraggablePanelContainer style={{ flex: 'none', minWidth: CHAT_SIDEBAR_WIDTH }}>
-        <Flexbox
-          align={'center'}
-          className={styles.header}
-          distribution={'space-between'}
-          horizontal
-          padding={12}
-          paddingInline={16}
-        >
-          <Flexbox>{t('agentProfile')}</Flexbox>
-          <Flexbox gap={4} horizontal>
-            <ActionIcon
-              icon={LucideEdit}
-              onClick={() => {
-                Router.push(`/chat/${id}/edit`);
-              }}
-              size={{ blockSize: 32, fontSize: 20 }}
-              title={t('edit')}
-            />
-            <ActionIcon
-              icon={LucideX}
-              onClick={() => {
-                toggleConfig(false);
-              }}
-              size={{ blockSize: 32, fontSize: 20 }}
-              title={t('close')}
-            />
-          </Flexbox>
-        </Flexbox>
-        <DraggablePanelBody>
-          <ReadMode />
-        </DraggablePanelBody>
+        <SideBar />
       </DraggablePanelContainer>
     </DraggablePanel>
   );

package/src/pages/chat/[id]/Conversation/FunctionMessage.tsx

@@ -16,7 +16,7 @@ const useStyles = createStyles(({ css, token }) => ({
   `,
 }));
 const FunctionMessage = memo(() => {
-  const { t } = useTranslation();
+  const { t } = useTranslation('plugin');
   const { styles } = useStyles();
   return (
     <Flexbox className={styles.container} gap={8} horizontal>

package/src/pages/chat/[id]/Conversation/Input/Action.tsx

@@ -1,6 +1,6 @@
 import { ActionIcon } from '@lobehub/ui';
 import { Popconfirm } from 'antd';
-import { Eraser, Languages } from 'lucide-react';
+import { BrainCog, Eraser, Thermometer, Timer } from 'lucide-react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { shallow } from 'zustand/shallow';
@@ -8,14 +8,22 @@ import { shallow } from 'zustand/shallow';
 import { useSessionStore } from '@/store/session';
 
 const InputActions = memo(() => {
-  const { t } = useTranslation();
+  const { t } = useTranslation('setting');
   const [clearMessage] = useSessionStore((s) => [s.clearMessage], shallow);
 
   return (
     <>
-      <ActionIcon icon={Languages} />
-      <Popconfirm onConfirm={() => clearMessage()} title={t('confirmClearCurrentMessages')}>
-        <ActionIcon icon={Eraser} title={t('clearCurrentMessages')} />
+      <ActionIcon icon={BrainCog} title={t('settingModel.model.title')} />
+      <ActionIcon icon={Thermometer} title={t('settingModel.temperature.title')} />
+      <ActionIcon icon={Timer} title={t('settingChat.historyCount.title')} />
+      <Popconfirm
+        cancelText={t('cancel', { ns: 'common' })}
+        okButtonProps={{ danger: true }}
+        okText={t('ok', { ns: 'common' })}
+        onConfirm={() => clearMessage()}
+        title={t('confirmClearCurrentMessages', { ns: 'common' })}
+      >
+        <ActionIcon icon={Eraser} title={t('clearCurrentMessages', { ns: 'common' })} />
       </Popconfirm>
     </>
   );

package/src/pages/chat/[id]/Conversation/Input/index.tsx

@@ -1,4 +1,4 @@
-import { ChatInputArea, DraggablePanel, Icon } from '@lobehub/ui';
+import { ChatInputArea, DraggablePanel, Icon, Tooltip } from '@lobehub/ui';
 import { Button } from 'antd';
 import { Archive } from 'lucide-react';
 import { memo, useMemo, useState } from 'react';
@@ -13,7 +13,7 @@ import InputActions from './Action';
 import Token from './Token';
 
 const ChatInput = () => {
-  const { t } = useTranslation();
+  const { t } = useTranslation('common');
   const [expand, setExpand] = useState<boolean>(false);
   const [text, setText] = useState('');
 
@@ -21,7 +21,11 @@ const ChatInput = () => {
   const [sendMessage] = useSessionStore((s) => [s.createOrSendMsg], shallow);
 
   const footer = useMemo(
-    () => <Button icon={<Icon icon={Archive} title={t('archiveCurrentMessages')} />} />,
+    () => (
+      <Tooltip title={t('archiveCurrentMessages')}>
+        <Button icon={<Icon icon={Archive} />} />
+      </Tooltip>
+    ),
     [],
   );
 
@@ -54,6 +58,10 @@ const ChatInput = () => {
         onExpandChange={setExpand}
         onInputChange={setText}
         onSend={sendMessage}
+        placeholder={t('sendPlaceholder')}
+        text={{
+          send: t('send'),
+        }}
       />
     </DraggablePanel>
   );

package/src/pages/chat/[id]/Conversation/MessageExtra.tsx

@@ -38,7 +38,7 @@ const MessageExtra = ({ role, extra, function_call }: ChatMessage): ReactNode =>
         ) : (
           <Icon icon={LucideToyBrick} />
         )}
-        {t(`plugin-${function_call?.name}` as any)}
+        {t(`plugins:${function_call?.name}` as any)}
       </Tag>
     </Tooltip>
   );

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

@@ -1,61 +1,45 @@
 import { ActionIcon, Avatar, ChatHeader } from '@lobehub/ui';
 import { Tag } from 'antd';
-import { createStyles } from 'antd-style';
-import { ArchiveIcon, MoreVerticalIcon, Share2 } from 'lucide-react';
+import { PanelRightClose, PanelRightOpen, Settings, Share2 } from 'lucide-react';
+import Router from 'next/router';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
 import { shallow } from 'zustand/shallow';
 
-import { agentSelectors, sessionSelectors, useSessionStore } from '@/store/session';
-
-const useStyles = createStyles(({ css, token }) => ({
-  desc: css`
-    font-size: 12px;
-    color: ${token.colorTextTertiary};
-  `,
-  title: css`
-    font-weight: bold;
-    color: ${token.colorText};
-  `,
-}));
+import HeaderTitle from '@/components/HeaderTitle';
+import { agentSelectors, useSessionStore } from '@/store/session';
 
 const Header = memo(() => {
   const { t } = useTranslation('common');
-  const [avatar, model] = useSessionStore(
-    (s) => [agentSelectors.currentAgentAvatar(s), agentSelectors.currentAgentModel(s)],
+
+  const [meta, id, modle] = useSessionStore(
+    (s) => [agentSelectors.currentAgentMeta(s), s.activeId, agentSelectors.currentAgentModel(s)],
     shallow,
   );
-  const [meta, id] = useSessionStore((s) => {
-    const chat = sessionSelectors.currentSession(s);
-    return [chat?.meta, s.activeId];
-  }, shallow);
-
-  const [
-    // genShareUrl,
-
-    toggleConfig,
-  ] = useSessionStore(
-    (s) => [
-      // s.genShareUrl,
-      s.toggleConfig,
-    ],
+  const [showAgentSettings, toggleConfig] = useSessionStore(
+    (s) => [s.showAgentSettings, s.toggleConfig],
     shallow,
   );
 
-  const { styles } = useStyles();
   return (
     <ChatHeader
       left={
         <>
-          <Avatar avatar={avatar} size={40} title={meta?.title} />
-          <Flexbox>
-            <Flexbox align={'center'} className={styles.title} gap={8} horizontal>
-              {meta?.title || t('defaultAgent')}
-              <Tag bordered={false}>{model}</Tag>
-            </Flexbox>
-            <Flexbox className={styles.desc}>{meta?.description || t('noDescription')}</Flexbox>
-          </Flexbox>
+          <Avatar
+            avatar={meta?.avatar}
+            background={meta?.backgroundColor}
+            onClick={() => {
+              Router.push(`/chat/${id}/edit`);
+            }}
+            size={40}
+            style={{ cursor: 'pointer' }}
+            title={meta?.title}
+          />
+          <HeaderTitle
+            desc={meta?.description || t('noDescription')}
+            tag={<Tag>{modle}</Tag>}
+            title={meta?.title || t('defaultAgent')}
+          />
         </>
       }
       right={
@@ -69,12 +53,19 @@ const Header = memo(() => {
               size={{ fontSize: 24 }}
               title={t('share')}
             />
-            <ActionIcon icon={ArchiveIcon} size={{ fontSize: 24 }} title={t('archive')} />
             <ActionIcon
-              icon={MoreVerticalIcon}
+              icon={showAgentSettings ? PanelRightClose : PanelRightOpen}
               onClick={() => toggleConfig()}
               size={{ fontSize: 24 }}
-              title={t('sessionSetting')}
+              title={t('roleAndArchive')}
+            />
+            <ActionIcon
+              icon={Settings}
+              onClick={() => {
+                Router.push(`/chat/${id}/edit`);
+              }}
+              size={{ fontSize: 24 }}
+              title={t('header.session', { ns: 'setting' })}
             />
           </>
         )

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}
+    />
   );
 };