@lobehub/chat 0.35.0 → 0.36.0

package/.github/workflows/release.yml

@@ -24,6 +24,9 @@ jobs:
       - name: Install deps
         run: pnpm install
 
+      - name: Lint
+        run: pnpm run type-check
+
       - name: Test
         run: pnpm run test
 

package/CHANGELOG.md

@@ -2,6 +2,72 @@
 
 # Changelog
 
+## [Version 0.36.0](https://github.com/lobehub/lobe-chat/compare/v0.35.1...v0.36.0)
+
+<sup>Released on **2023-08-03**</sup>
+
+#### ✨ Features
+
+- **misc**: 实现自定义历史消息数功能.
+
+#### 🐛 Bug Fixes
+
+- **misc**: Fix setting type.
+
+#### 💄 Styles
+
+- **misc**: Fix session item height.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's improved
+
+- **misc**: 实现自定义历史消息数功能 ([7baa022](https://github.com/lobehub/lobe-chat/commit/7baa022))
+
+#### What's fixed
+
+- **misc**: Fix setting type ([57e415e](https://github.com/lobehub/lobe-chat/commit/57e415e))
+
+#### Styles
+
+- **misc**: Fix session item height ([6cd1de5](https://github.com/lobehub/lobe-chat/commit/6cd1de5))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+### [Version 0.35.1](https://github.com/lobehub/lobe-chat/compare/v0.35.0...v0.35.1)
+
+<sup>Released on **2023-07-31**</sup>
+
+#### 💄 Styles
+
+- **misc**: Update doc mode and token tags.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Styles
+
+- **misc**: Update doc mode and token tags ([1d3c5b6](https://github.com/lobehub/lobe-chat/commit/1d3c5b6))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ## [Version 0.35.0](https://github.com/lobehub/lobe-chat/compare/v0.34.0...v0.35.0)
 
 <sup>Released on **2023-07-31**</sup>

package/locales/en_US/common.json

@@ -1,33 +1,31 @@
 {
-  "DefaultSession": "Default Session",
   "about": "About",
   "advanceSettings": "Advanced Settings",
   "agentMaxToken": "Max Token Length",
   "agentModel": "Model",
   "agentProfile": "Agent Profile",
   "archive": "Archive",
-  "archiveCurrentMessages": "Archive Current Session",
   "autoGenerate": "Auto Generate",
   "autoGenerateTooltip": "Auto generate assistant description based on prompts",
   "cancel": "Cancel",
   "changelog": "Changelog",
-  "clearCurrentMessages": "Clear Current Session Messages",
+  "clearCurrentMessages": "Clear Current Messages",
   "close": "Close",
-  "confirmClearCurrentMessages": "You are about to clear the current session messages. Once cleared, they cannot be recovered. Please confirm your action.",
+  "confirmClearCurrentMessages": "You are about to clear the current messages. Once cleared, they cannot be recovered. Please confirm your action.",
   "confirmRemoveSessionItemAlert": "You are about to delete this assistant. Once deleted, it cannot be recovered. Please confirm your action.",
   "copy": "Copy",
-  "copySuccess": "Copy Success",
+  "copySuccess": "Copy Successful",
   "defaultAgent": "Default Assistant",
   "defaultSession": "Default Session",
   "delete": "Delete",
   "edit": "Edit",
-  "export": "Export",
+  "export": "Export Configuration",
   "exportType": {
-    "agent": "Export Agent Settings",
-    "agentWithMessage": "Export Agent Settings and Messages",
-    "all": "Export Global Settings and All Agent Data",
-    "allAgent": "Export All Agent Settings",
-    "allAgentWithMessage": "Export All Agent Settings and Messages",
+    "agent": "Export Assistant Settings",
+    "agentWithMessage": "Export Assistant and Messages",
+    "all": "Export Global Settings and All Assistant Data",
+    "allAgent": "Export All Assistant Settings",
+    "allAgentWithMessage": "Export All Assistants and Messages",
     "globalSetting": "Export Global Settings"
   },
   "feedback": "Feedback",
@@ -35,21 +33,19 @@
   "message": {
     "function_loading": "Plugin request in progress..."
   },
-  "moreSetting": "More settings...",
+  "moreSetting": "More Settings...",
   "newAgent": "New Assistant",
   "noDescription": "No description available",
   "ok": "OK",
-  "overload": "Exceed Limit",
   "pin": "Pin",
   "pinOff": "Unpin",
   "regenerate": "Regenerate",
   "rename": "Rename",
   "reset": "Reset",
-  "roleAndArchive": "Roles and Archives",
-  "searchAgentPlaceholder": "Search assistants and sessions...",
+  "roleAndArchive": "Roles and Archive",
+  "searchAgentPlaceholder": "Search Assistants and Sessions...",
   "send": "Send",
   "sendPlaceholder": "Enter chat content...",
-  "sessionSetting": "Session Settings",
   "setting": "Settings",
   "share": "Share",
   "tab": {
@@ -57,12 +53,17 @@
     "market": "Assistant Market"
   },
   "temp": "Temporary",
-  "tokenDetail": "System Role Token: {{systemRoleToken}} Chats Token: {{chatsToken}}",
+  "tokenDetail": "Role Setting: {{systemRoleToken}} · Chat History: {{chatsToken}}",
+  "tokenTag": {
+    "overload": "Exceeded Limit",
+    "remained": "Remaining",
+    "used": "Used"
+  },
   "topic": {
-    "saveCurrentMessages": "Save Current Conversation as Topic",
-    "searchPlaceholder": "Search Topics...",
     "confirmRemoveTopic": "You are about to delete this topic. Once deleted, it cannot be recovered. Please proceed with caution.",
-    "defaultTitle": "Default Topic"
+    "defaultTitle": "Default Topic",
+    "saveCurrentMessages": "Save the current session as a topic",
+    "searchPlaceholder": "Search Topics..."
   },
   "updateAgent": "Update Assistant Profile",
   "updatePrompt": "Update Prompts"

package/locales/en_US/plugin.json

@@ -1,14 +1,13 @@
 {
   "loading": {
-    "content": "Loading...",
+    "content": "Loading data...",
     "plugin": "Plugin is running..."
   },
   "pluginList": "Plugin List",
-  "pluginLoading": "Plugin Loading...",
   "plugins": {
     "realtimeWeather": "Real-time Weather Forecast",
     "searchEngine": "Search Engine",
-    "undefined": "Plugin Detection...",
+    "undefined": "Plugin detection in progress...",
     "websiteCrawler": "Website Content Extraction"
   },
   "realtimeWeather": {

package/locales/en_US/setting.json

@@ -1,16 +1,15 @@
 {
-  "agentHeader": "Edit Assistant Information",
   "danger": {
     "clear": {
       "action": "Clear Now",
-      "confirm": "Are you sure you want to clear all chat and settings data?",
-      "desc": "Clear all chat and settings data",
-      "title": "Clear All Data",
-      "success": "All session messages have been cleared."
+      "confirm": "Confirm clearing all chat data?",
+      "desc": "Clear all session data",
+      "success": "All session messages have been cleared",
+      "title": "Clear All Session Messages"
     },
     "reset": {
       "action": "Reset Now",
-      "confirm": "Are you sure you want to reset all settings?",
+      "confirm": "Confirm resetting all settings?",
       "currentVersion": "Current Version",
       "desc": "Reset all settings to default values",
       "title": "Reset All Settings"
@@ -25,34 +24,41 @@
     "avatar": {
       "title": "Avatar"
     },
+    "backgroundColor": {
+      "title": "Background Color"
+    },
     "description": {
-      "placeholder": "Please enter assistant description",
+      "placeholder": "Enter assistant description",
       "title": "Assistant Description"
     },
     "name": {
-      "placeholder": "Please enter assistant name",
+      "placeholder": "Enter assistant name",
       "title": "Name"
     },
     "prompt": {
-      "placeholder": "Please enter AI prompt",
-      "title": "Assistant Role"
+      "placeholder": "Enter role prompt",
+      "title": "Role Prompt"
     },
     "tag": {
-      "placeholder": "Please enter tags",
-      "title": "Tags"
+      "placeholder": "Enter tag",
+      "title": "Tag"
     },
-    "title": "Assistant Information",
-    "backgroundColor": {
-      "title": "Background Color"
-    }
+    "title": "Assistant Information"
   },
   "settingChat": {
+    "chatStyleType": {
+      "title": "Chat Window Style",
+      "type": {
+        "chat": "Chat Mode",
+        "docs": "Document Mode"
+      }
+    },
     "compressThreshold": {
-      "desc": "When the uncompressed chat history exceeds this value, it will be compressed",
-      "title": "Chat History Compression Threshold"
+      "desc": "When the uncompressed history messages exceed this value, compression will be performed",
+      "title": "History Message Length Compression Threshold"
     },
     "enableCompressThreshold": {
-      "title": "Enable Chat History Compression Threshold"
+      "title": "Enable History Message Length Compression Threshold"
     },
     "enableHistoryCount": {
       "title": "Enable History Message Count Limit"
@@ -63,24 +69,17 @@
     },
     "inputTemplate": {
       "desc": "The latest user message will be filled into this template",
-      "title": "User Input Preprocessing",
-      "placeholder": "Enter pre-processing template, {text} will be replaced with real-time input information"
+      "placeholder": "Enter the input template, {text} will be replaced with real-time input",
+      "title": "User Input Preprocessing"
     },
-    "title": "Chat Settings",
-    "chatStyleType": {
-      "title": "Chat Window Style",
-      "type": {
-        "chat": "Chat Mode",
-        "docs": "Document Mode"
-      }
-    }
+    "title": "Chat Settings"
   },
   "settingModel": {
     "enableMaxTokens": {
       "title": "Enable Single Reply Limit"
     },
     "frequencyPenalty": {
-      "desc": "The higher the value, the more likely it is to reduce repeated words",
+      "desc": "The larger the value, the more likely it is to reduce repeated words",
       "title": "Frequency Penalty"
     },
     "maxTokens": {
@@ -98,18 +97,18 @@
       "title": "Model"
     },
     "presencePenalty": {
-      "desc": "The higher the value, the more likely it is to expand to new topics",
+      "desc": "The larger the value, the more likely it is to expand to new topics",
       "title": "Topic Freshness"
     },
     "temperature": {
-      "desc": "The higher the value, the more random the reply",
+      "desc": "The larger the value, the more random the reply",
       "title": "Randomness",
       "titleWithValue": "Randomness {{value}}"
     },
     "title": "Model Settings",
     "topP": {
       "desc": "Similar to randomness, but do not change together with randomness",
-      "title": "Nucleus Sampling"
+      "title": "Top-p Sampling"
     }
   },
   "settingOpenAI": {
@@ -130,8 +129,8 @@
   },
   "settingSystem": {
     "accessCode": {
-      "desc": "Encrypted access has been enabled by the administrator",
-      "placeholder": "Please enter access password",
+      "desc": "Encryption access has been enabled by the administrator",
+      "placeholder": "Enter access password",
       "title": "Access Password"
     },
     "title": "System Settings"

package/locales/zh_CN/common.json

@@ -37,7 +37,6 @@
   "newAgent": "新建助手",
   "noDescription": "暂无描述",
   "ok": "确定",
-  "overload": "超过限制",
   "pin": "置顶",
   "pinOff": "取消置顶",
   "regenerate": "重新生成",
@@ -54,7 +53,12 @@
     "market": "助手市场"
   },
   "temp": "临时",
-  "tokenDetail": "系统设定: {{systemRoleToken}} 历史消息: {{chatsToken}}",
+  "tokenDetail": "角色设定: {{systemRoleToken}} · 历史消息: {{chatsToken}}",
+  "tokenTag": {
+    "overload": "超过限制",
+    "remained": "剩余",
+    "used": "使用"
+  },
   "topic": {
     "confirmRemoveTopic": "即将删除该话题，删除后将不可恢复，请谨慎操作。",
     "defaultTitle": "默认话题",

package/locales/zh_CN/setting.json

@@ -36,8 +36,8 @@
       "title": "名称"
     },
     "prompt": {
-      "placeholder": "请输入 AI 提示词",
-      "title": "助手角色"
+      "placeholder": "请输入角色 Prompt 提示词",
+      "title": "角色设定"
     },
     "tag": {
       "placeholder": "请输入标签",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.35.0",
+  "version": "0.36.0",
   "description": "Lobe Chat is an open-source chatbot client using LangChain, Typescript and Next.js",
   "keywords": [
     "chatbot",

package/src/components/SliderWithInput/index.tsx

@@ -21,6 +21,7 @@ const SliderWithInput = memo<SliderWithInputProps>(
     controls,
     style,
     className,
+    disabled,
     ...props
   }) => {
     const handleOnchange = useCallback((value: number | null) => {
@@ -38,6 +39,7 @@ const SliderWithInput = memo<SliderWithInputProps>(
       >
         <Slider
           defaultValue={defaultValue}
+          disabled={disabled}
           max={max}
           min={min}
           onChange={handleOnchange}
@@ -50,6 +52,7 @@ const SliderWithInput = memo<SliderWithInputProps>(
         <InputNumber
           controls={size !== 'small' || controls}
           defaultValue={defaultValue}
+          disabled={disabled}
           max={max}
           min={min}
           onChange={handleOnchange}

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

@@ -11,10 +11,11 @@ import { FORM_STYLE } from '@/const/layoutTokens';
 import { AgentAction } from '@/store/session/slices/agentConfig';
 import { LanguageModel } from '@/types/llm';
 import type { LobeAgentConfig } from '@/types/session';
+import { LobeAgentConfigKeys } from '@/types/session';
 
 type SettingItemGroup = ItemGroup & {
   children: {
-    name?: keyof LobeAgentConfig | string[];
+    name?: LobeAgentConfigKeys | string | string[];
   }[];
 };
 

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

@@ -11,15 +11,11 @@ import { AgentAction } from '@/store/session/slices/agentConfig';
 import { LobeAgentConfig } from '@/types/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};
+  token: css`
+    padding-left: 8px;
+    background: ${token.colorBgLayout};
+    border: 1px solid ${token.colorBorder};
+    border-radius: ${token.borderRadiusSM}px;
   `,
 }));
 
@@ -30,14 +26,24 @@ export interface AgentPromptProps {
 
 const AgentPrompt = memo<AgentPromptProps>(({ config, updateConfig }) => {
   const { t } = useTranslation('setting');
-
+  const { styles } = useStyles();
   const { systemRole, model } = config;
   const systemTokenCount = useMemo(() => encode(systemRole || '').length, [systemRole]);
 
   return (
     <FormGroup
       extra={
-        <TokenTag displayMode={'used'} maxValue={ModelTokens[model]} value={systemTokenCount} />
+        <TokenTag
+          className={styles.token}
+          displayMode={'used'}
+          maxValue={ModelTokens[model]}
+          text={{
+            overload: t('tokenTag.overload', { ns: 'common' }),
+            remained: t('tokenTag.remained', { ns: 'common' }),
+            used: t('tokenTag.used', { ns: 'common' }),
+          }}
+          value={systemTokenCount}
+        />
       }
       icon={Bot}
       style={FORM_STYLE.style}
@@ -46,9 +52,9 @@ const AgentPrompt = memo<AgentPromptProps>(({ config, updateConfig }) => {
       <CodeEditor
         language={'md'}
         onValueChange={(e) => updateConfig({ systemRole: e })}
-        placeholder={t('settingAgent.name.placeholder')}
+        placeholder={t('settingAgent.prompt.placeholder')}
         resize={false}
-        style={{ marginTop: 16 }}
+        style={{ padding: '16px 0' }}
         type={'pure'}
         value={systemRole}
       />

package/src/locales/default/common.ts

@@ -37,7 +37,6 @@ export default {
   newAgent: '新建助手',
   noDescription: '暂无描述',
   ok: '确定',
-  overload: '超过限制',
   pin: '置顶',
   pinOff: '取消置顶',
   regenerate: '重新生成',
@@ -54,7 +53,12 @@ export default {
     market: '助手市场',
   },
   temp: '临时',
-  tokenDetail: '系统设定: {{systemRoleToken}} 历史消息: {{chatsToken}}',
+  tokenDetail: '角色设定: {{systemRoleToken}} · 历史消息: {{chatsToken}}',
+  tokenTag: {
+    overload: '超过限制',
+    remained: '剩余',
+    used: '使用',
+  },
   topic: {
     confirmRemoveTopic: '即将删除该话题，删除后将不可恢复，请谨慎操作。',
     defaultTitle: '默认话题',

package/src/locales/default/setting.ts

@@ -36,8 +36,8 @@ export default {
       title: '名称',
     },
     prompt: {
-      placeholder: '请输入 AI 提示词',
-      title: '助手角色',
+      placeholder: '请输入角色 Prompt 提示词',
+      title: '角色设定',
     },
     tag: {
       placeholder: '请输入标签',
@@ -61,7 +61,10 @@ export default {
       title: '是否开启历史消息长度压缩阈值',
     },
     enableHistoryCount: {
-      title: '是否开启携带的历史消息数限制',
+      alias: '不限制',
+      limited: '只包含 {{number}} 条会话消息',
+      title: '限制历史消息数',
+      unlimited: '不限历史消息数',
     },
     historyCount: {
       desc: '每次请求携带的历史消息数',

package/src/locales/resources/en_US.ts

@@ -1,11 +1,3 @@
-import common from '../../../locales/en_US/common.json';
-import plugin from '../../../locales/en_US/plugin.json';
-import setting from '../../../locales/en_US/setting.json';
-
-const resources = {
-  common,
-  plugin,
-  setting,
-} as const;
+const resources = {} as const;
 
 export default resources;

package/src/pages/chat/SessionList/List/SessionItem.tsx

@@ -2,7 +2,7 @@ import { ActionIcon, Avatar, Icon, List } from '@lobehub/ui';
 import { useHover } from 'ahooks';
 import { App, Dropdown, type MenuProps, Tag } from 'antd';
 import { FolderOutput, MoreVertical, Pin, PinOff, Trash } from 'lucide-react';
-import { FC, memo, useMemo, useRef } from 'react';
+import { FC, memo, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 import { shallow } from 'zustand/shallow';
@@ -22,13 +22,13 @@ interface SessionItemProps {
 }
 
 const SessionItem: FC<SessionItemProps> = memo(({ id, active = true, loading }) => {
+  const [open, setOpen] = useState(false);
   const ref = useRef(null);
   const isHovering = useHover(ref);
 
   const { t } = useTranslation('common');
-  const isHighlight = isHovering;
 
-  const { styles, theme, cx } = useStyles(isHighlight);
+  const { styles, theme } = useStyles();
   const [defaultModel] = useSettings((s) => [s.settings.model], shallow);
 
   const [
@@ -50,13 +50,13 @@ const SessionItem: FC<SessionItemProps> = memo(({ id, active = true, loading })
     return [
       session.pinned,
       agentSelectors.getTitle(meta),
-      meta.description,
+      agentSelectors.getDescription(meta),
       systemRole,
       agentSelectors.getAvatar(meta),
       meta.backgroundColor,
       session?.updateAt,
       session.config.model,
-      chatSelectors.currentChats(s).length,
+      chatSelectors.getChatsById(id)(s).length,
       s.removeSession,
       s.pinSession,
     ];
@@ -115,49 +115,15 @@ const SessionItem: FC<SessionItemProps> = memo(({ id, active = true, loading })
         },
       },
     ],
-    [id],
+    [id, pin],
   );
 
   const showModel = model !== defaultModel;
   const showChatLength = chatLength > 0;
 
   return (
-    <div ref={ref}>
-      <Flexbox className={cx(styles.container, pin && styles.pin)} style={{ position: 'relative' }}>
-        <Item
-          active={active}
-          avatar={
-            <Avatar
-              animation={isHovering}
-              avatar={avatar}
-              background={avatarBackground}
-              shape="circle"
-              size={46}
-              title={title}
-            />
-          }
-          className={isHighlight ? styles.hover : undefined}
-          classNames={{ time: cx('session-time', styles.time) }}
-          date={updateAt}
-          description={
-            <Flexbox gap={4}>
-              <Flexbox>{description || systemRole}</Flexbox>
-
-              {!(showModel || showChatLength) ? undefined : (
-                <Flexbox horizontal>
-                  {showModel && (
-                    <Tag bordered={false} style={{ color: theme.colorTextSecondary }}>
-                      {model}
-                    </Tag>
-                  )}
-                </Flexbox>
-              )}
-            </Flexbox>
-          }
-          loading={loading}
-          style={{ color: theme.colorText }}
-          title={title}
-        />
+    <Item
+      actions={
         <Dropdown
           arrow={false}
           menu={{
@@ -166,23 +132,53 @@ const SessionItem: FC<SessionItemProps> = memo(({ id, active = true, loading })
               domEvent.stopPropagation();
             },
           }}
+          onOpenChange={setOpen}
+          open={open}
           trigger={['click']}
         >
           <ActionIcon
-            className="session-remove"
             icon={MoreVertical}
-            onClick={(e) => {
-              e.preventDefault();
-              e.stopPropagation();
-            }}
             size={{
               blockSize: 28,
               fontSize: 16,
             }}
           />
         </Dropdown>
-      </Flexbox>
-    </div>
+      }
+      active={active}
+      avatar={
+        <Avatar
+          animation={isHovering}
+          avatar={avatar}
+          background={avatarBackground}
+          shape="circle"
+          size={46}
+          title={title}
+        />
+      }
+      className={styles.container}
+      date={updateAt}
+      description={
+        <Flexbox gap={4}>
+          <Flexbox>{description || systemRole}</Flexbox>
+
+          {!(showModel || showChatLength) ? undefined : (
+            <Flexbox horizontal>
+              {showModel && (
+                <Tag bordered={false} style={{ color: theme.colorTextSecondary }}>
+                  {model}
+                </Tag>
+              )}
+            </Flexbox>
+          )}
+        </Flexbox>
+      }
+      loading={loading}
+      pin={pin}
+      ref={ref}
+      showAction={open || isHovering}
+      title={title}
+    />
   );
 }, shallow);
 

package/src/pages/chat/SessionList/List/style.ts

@@ -1,11 +1,8 @@
 import { createStyles } from 'antd-style';
 import { rgba } from 'polished';
 
-export const useStyles = createStyles(({ css, token }, isHighlight: boolean) => {
+export const useStyles = createStyles(({ css, token }) => {
   return {
-    active: css`
-      display: flex;
-    `,
     button: css`
       position: sticky;
       z-index: 30;
@@ -24,34 +21,8 @@ export const useStyles = createStyles(({ css, token }, isHighlight: boolean) =>
     `,
     container: css`
       position: relative;
-
-      .session-remove {
-        position: absolute;
-        top: 50%;
-        right: 16px;
-        transform: translateY(-50%);
-
-        opacity: ${isHighlight ? 1 : 0};
-      }
-
-      .session-time {
-        opacity: ${isHighlight ? 0 : 1};
-        transition: opacity 100ms ${token.motionEaseOut};
-      }
-
-      &:hover {
-        .session-time {
-          opacity: 0;
-        }
-
-        .session-remove {
-          opacity: 1;
-        }
-      }
-    `,
-    hover: css`
-      background-color: ${token.colorFillSecondary};
     `,
+
     modalRoot: css`
       z-index: 2000;
     `,

package/src/pages/chat/[id]/Conversation/ChatList/Error/ApiKeyForm.tsx

@@ -19,10 +19,10 @@ const APIKeyForm = memo<{ onConfirm?: () => void }>(({ onConfirm }) => {
 
   return (
     <Center gap={16} style={{ maxWidth: 300 }}>
-      <Avatar avatar={'🔑'} background={theme.colorText} gap={12} size={80} />
+      <Avatar avatar={'🔑'} background={theme.colorFillContent} gap={12} size={80} />
       <Flexbox style={{ fontSize: 20 }}>{t('unlock.apikey.title')}</Flexbox>
       <Flexbox className={styles.desc}>{t('unlock.apikey.description')}</Flexbox>
-      <Input
+      <Input.Password
         onChange={(e) => {
           setSettings({ OPENAI_API_KEY: e.target.value });
         }}

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

@@ -1,8 +1,9 @@
 import { ActionIcon } from '@lobehub/ui';
-import { Dropdown, Popconfirm, Popover } from 'antd';
-import { BrainCog, Eraser, Thermometer } from 'lucide-react';
+import { Dropdown, Popover, Switch } from 'antd';
+import { BrainCog, Thermometer, Timer, TimerOff } from 'lucide-react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
 import { shallow } from 'zustand/shallow';
 
 import SliderWithInput from '@/components/SliderWithInput';
@@ -11,16 +12,15 @@ import { LanguageModel } from '@/types/llm';
 
 const InputActions = memo(() => {
   const { t } = useTranslation('setting');
-  const [clearMessage, updateAgentConfig] = useSessionStore(
-    (s) => [s.clearMessage, s.updateAgentConfig],
-    shallow,
-  );
-  const [model, temperature] = useSessionStore((s) => {
+
+  const [model, temperature, historyCount, unlimited, updateAgentConfig] = useSessionStore((s) => {
     const config = agentSelectors.currentAgentConfig(s);
     return [
       config.model,
       config.params.temperature,
-      // config.historyCount
+      config.historyCount,
+      !config.enableHistoryCount,
+      s.updateAgentConfig,
     ];
   }, shallow);
 
@@ -54,6 +54,7 @@ const InputActions = memo(() => {
             value={temperature}
           />
         }
+        placement={'top'}
         trigger={'click'}
       >
         <ActionIcon
@@ -62,36 +63,47 @@ const InputActions = memo(() => {
           title={t('settingModel.temperature.titleWithValue', { value: temperature })}
         />
       </Popover>
-      {/*TODO 历史记录功能实现 */}
-      {/*<Popover*/}
-      {/*  content={*/}
-      {/*    <SliderWithInput*/}
-      {/*      min={0}*/}
-      {/*      onChange={(v) => {*/}
-      {/*        updateAgentConfig({ historyCount: v });*/}
-      {/*      }}*/}
-      {/*      step={1}*/}
-      {/*      style={{ width: 120 }}*/}
-      {/*      value={historyCount}*/}
-      {/*    />*/}
-      {/*  }*/}
-      {/*  trigger={'click'}*/}
-      {/*>*/}
-      {/*  <ActionIcon icon={Timer} title={t('settingChat.historyCount.title')} />*/}
-      {/*</Popover>*/}
-      <Popconfirm
-        cancelText={t('cancel', { ns: 'common' })}
-        okButtonProps={{ danger: true }}
-        okText={t('ok', { ns: 'common' })}
-        onConfirm={() => clearMessage()}
-        title={t('confirmClearCurrentMessages', { ns: 'common' })}
+      <Popover
+        arrow={false}
+        content={
+          <Flexbox align={'center'} gap={16} horizontal>
+            <SliderWithInput
+              disabled={unlimited}
+              max={30}
+              min={1}
+              onChange={(v) => {
+                updateAgentConfig({ historyCount: v });
+              }}
+              step={1}
+              style={{ width: 160 }}
+              value={historyCount}
+            />
+            <Flexbox align={'center'} gap={4} horizontal>
+              <Switch
+                checked={unlimited}
+                onChange={(checked) => {
+                  updateAgentConfig({ enableHistoryCount: !checked });
+                }}
+                size={'small'}
+              />
+              {t('settingChat.enableHistoryCount.alias')}
+            </Flexbox>
+          </Flexbox>
+        }
+        placement={'top'}
+        trigger={'click'}
       >
         <ActionIcon
-          icon={Eraser}
+          icon={unlimited ? TimerOff : Timer}
           placement={'bottom'}
-          title={t('clearCurrentMessages', { ns: 'common' })}
+          title={t(
+            unlimited
+              ? 'settingChat.enableHistoryCount.unlimited'
+              : 'settingChat.enableHistoryCount.limited',
+            { number: historyCount || 0 },
+          )}
         />
-      </Popconfirm>
+      </Popover>
     </>
   );
 });

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

@@ -0,0 +1,31 @@
+import { ActionIcon } from '@lobehub/ui';
+import { Popconfirm } from 'antd';
+import { Eraser } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { shallow } from 'zustand/shallow';
+
+import { useSessionStore } from '@/store/session';
+
+const ActionsRight = memo(() => {
+  const { t } = useTranslation('setting');
+  const [clearMessage] = useSessionStore((s) => [s.clearMessage, s.updateAgentConfig], shallow);
+
+  return (
+    <Popconfirm
+      cancelText={t('cancel', { ns: 'common' })}
+      okButtonProps={{ danger: true }}
+      okText={t('ok', { ns: 'common' })}
+      onConfirm={() => clearMessage()}
+      title={t('confirmClearCurrentMessages', { ns: 'common' })}
+    >
+      <ActionIcon
+        icon={Eraser}
+        placement={'bottom'}
+        title={t('clearCurrentMessages', { ns: 'common' })}
+      />
+    </Popconfirm>
+  );
+});
+
+export default ActionsRight;

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

@@ -23,10 +23,14 @@ const Token = memo<{ input: string }>(({ input }) => {
   );
 
   return (
-    <Tooltip title={t('tokenDetail', { chatsToken, systemRoleToken })}>
+    <Tooltip placement={'bottom'} title={t('tokenDetail', { chatsToken, systemRoleToken })}>
       <TokenTag
         maxValue={ModelTokens[model]}
-        text={{ overload: t('overload') }}
+        text={{
+          overload: t('tokenTag.overload'),
+          remained: t('tokenTag.remained'),
+          used: t('tokenTag.used'),
+        }}
         value={totalToken + inputTokenCount}
       />
     </Tooltip>

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

@@ -10,6 +10,7 @@ import { useSessionStore } from '@/store/session';
 import { useSettings } from '@/store/settings';
 
 import InputActions from './Action';
+import ActionsRight from './ActionRight';
 import Token from './Token';
 
 const ChatInput = () => {
@@ -52,6 +53,7 @@ const ChatInput = () => {
             <Token input={text} />
           </>
         }
+        actionsRight={<ActionsRight />}
         expand={expand}
         footer={footer}
         minHeight={CHAT_TEXTAREA_HEIGHT}

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

@@ -3,7 +3,7 @@ import Head from 'next/head';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import { sessionSelectors, useSessionStore } from '@/store/session';
+import { agentSelectors, useSessionStore } from '@/store/session';
 import { genSiteHeadTitle } from '@/utils/genSiteHeadTitle';
 
 import Layout from '../layout';
@@ -12,12 +12,12 @@ import Header from './Header';
 import Config from './Sidebar';
 
 const Chat = memo(() => {
-  const [title] = useSessionStore((s) => {
-    const context = sessionSelectors.currentSession(s);
-    return [context?.meta.title];
-  }, isEqual);
+  const [avatar, title] = useSessionStore(
+    (s) => [agentSelectors.currentAgentAvatar(s), agentSelectors.currentAgentTitle(s)],
+    isEqual,
+  );
 
-  const pageTitle = genSiteHeadTitle(title);
+  const pageTitle = genSiteHeadTitle([avatar, title].filter(Boolean).join(' '));
 
   return (
     <>

package/src/pages/settings/Settings/Common.tsx

@@ -20,7 +20,7 @@ import { ThemeSwatchesNeutral, ThemeSwatchesPrimary } from '../ThemeSwatches';
 
 type SettingItemGroup = ItemGroup & {
   children: {
-    name?: ConfigKeys;
+    name?: ConfigKeys | string;
   }[];
 };
 

package/src/store/session/slices/agentConfig/selectors.ts

@@ -62,7 +62,10 @@ const hasSystemRole = (s: SessionStore) => {
 };
 
 export const getAvatar = (s: MetaData) => s.avatar || DEFAULT_AVATAR;
-export const getTitle = (s: MetaData) => s.title || t('defaultSession');
+export const getTitle = (s: MetaData) => s.title || t('defaultSession', { ns: 'common' });
+
+export const getDescription = (s: MetaData) =>
+  s.description || t('noDescription', { ns: 'common' });
 
 export const agentSelectors = {
   currentAgentAvatar,
@@ -75,6 +78,7 @@ export const agentSelectors = {
   currentAgentTitle,
   currentAutocomplete,
   getAvatar,
+  getDescription,
   getTitle,
   hasSystemRole,
 };

package/src/store/session/slices/chat/actions/message.ts

@@ -5,6 +5,7 @@ import { LOADING_FLAT } from '@/const/message';
 import { fetchChatModel } from '@/services/chatModel';
 import { fetchPlugin } from '@/services/plugin';
 import { SessionStore, agentSelectors, chatSelectors, sessionSelectors } from '@/store/session';
+import { getSlicedMessagesWithConfig } from '@/store/session/slices/chat/utils';
 import { ChatMessage, OpenAIFunctionCall } from '@/types/chatMessage';
 import { fetchSSE } from '@/utils/fetch';
 import { isFunctionMessage } from '@/utils/message';
@@ -123,12 +124,17 @@ export const chatMessage: StateCreator<
 
     const compiler = template(config.inputTemplate, { interpolate: /{{([\S\s]+?)}}/g });
 
-    // 对 message 做统一预处理
+    // ========================== //
+    //   对 messages 做统一预处理    //
+    // ========================== //
 
-    // 1. 替换 inputMessage 模板
+    // 1. 按参数设定截断长度
+    const slicedMessages = getSlicedMessagesWithConfig(messages, config);
+
+    // 2. 替换 inputMessage 模板
     const postMessages = !config.inputTemplate
-      ? messages
-      : messages.map((m) => {
+      ? slicedMessages
+      : slicedMessages.map((m) => {
           if (m.role === 'user') {
             try {
               return { ...m, content: compiler({ text: m.content }) };
@@ -141,12 +147,9 @@ export const chatMessage: StateCreator<
           return m;
         });
 
-    // 2. TODO 按参数设定截断长度
-
     // 3. 添加 systemRole
-    const { systemRole } = agentSelectors.currentAgentConfig(get());
-    if (systemRole) {
-      postMessages.unshift({ content: systemRole, role: 'system' } as ChatMessage);
+    if (config.systemRole) {
+      postMessages.unshift({ content: config.systemRole, role: 'system' } as ChatMessage);
     }
 
     const fetcher = () =>

package/src/store/session/slices/chat/selectors/chat.ts

@@ -1,29 +1,40 @@
 import { DEFAULT_USER_AVATAR } from '@/const/meta';
-import { agentSelectors } from '@/store/session';
 import { useSettings } from '@/store/settings';
 import { ChatMessage } from '@/types/chatMessage';
 
 import type { SessionStore } from '../../../store';
+import { agentSelectors } from '../../agentConfig';
 import { sessionSelectors } from '../../session';
+import { getSlicedMessagesWithConfig } from '../utils';
 import { organizeChats } from './utils';
 
-// 展示在聊天框中的消息
+export const getChatsById =
+  (id: string) =>
+  (s: SessionStore): ChatMessage[] => {
+    const session = sessionSelectors.getSessionById(id)(s);
+
+    if (!session) return [];
+
+    return organizeChats(
+      session,
+      {
+        assistant: agentSelectors.currentAgentAvatar(s),
+        user: useSettings.getState().settings.avatar || DEFAULT_USER_AVATAR,
+      },
+      s.activeTopicId,
+    );
+  };
+
+// 当前激活的消息列表
 export const currentChats = (s: SessionStore): ChatMessage[] => {
-  const session = sessionSelectors.currentSession(s);
-  if (!session) return [];
-
-  return organizeChats(
-    session,
-    {
-      assistant: agentSelectors.currentAgentAvatar(s),
-      user: useSettings.getState().settings.avatar || DEFAULT_USER_AVATAR,
-    },
-    s.activeTopicId,
-  );
+  if (!s.activeId) return [];
+
+  return getChatsById(s.activeId)(s);
 };
 
-export const systemRoleSel = (s: SessionStore): string => {
+export const currentChatsWithHistoryConfig = (s: SessionStore): ChatMessage[] => {
+  const chats = currentChats(s);
   const config = agentSelectors.currentAgentConfig(s);
 
-  return config.systemRole;
+  return getSlicedMessagesWithConfig(chats, config);
 };

package/src/store/session/slices/chat/selectors/index.ts

@@ -1,10 +1,11 @@
-import { currentChats } from './chat';
+import { currentChats, getChatsById } from './chat';
 import { chatsTokenCount, systemRoleTokenCount, totalTokenCount } from './token';
 import { currentTopics, getTopicMessages } from './topic';
 
 export const chatSelectors = {
   chatsTokenCount,
   currentChats,
+  getChatsById,
   systemRoleTokenCount,
   totalTokenCount,
 };

package/src/store/session/slices/chat/selectors/token.ts

@@ -1,7 +1,15 @@
 import { encode } from 'gpt-tokenizer';
 
+import { agentSelectors } from '@/store/session';
+
 import type { SessionStore } from '../../../store';
-import { currentChats, systemRoleSel } from './chat';
+import { currentChatsWithHistoryConfig } from './chat';
+
+export const systemRoleSel = (s: SessionStore): string => {
+  const config = agentSelectors.currentAgentConfig(s);
+
+  return config.systemRole;
+};
 
 const systemRoleTokens = (s: SessionStore): number[] => {
   const systemRole = systemRoleSel(s);
@@ -10,7 +18,7 @@ const systemRoleTokens = (s: SessionStore): number[] => {
 };
 
 const chatsTokens = (s: SessionStore): number[] => {
-  const chats = currentChats(s);
+  const chats = currentChatsWithHistoryConfig(s);
   return encode(chats.map((m) => m.content).join(''));
 };
 

package/src/store/session/slices/chat/utils.ts

@@ -0,0 +1,13 @@
+import { ChatMessage } from '@/types/chatMessage';
+import { LobeAgentConfig } from '@/types/session';
+
+export const getSlicedMessagesWithConfig = (
+  messages: ChatMessage[],
+  config: LobeAgentConfig,
+): ChatMessage[] => {
+  // 如果没有开启历史消息数限制，或者限制为 0，则直接返回
+  if (!config.enableHistoryCount || !config.historyCount) return messages;
+
+  // 如果开启了，则返回尾部的N条消息
+  return messages.reverse().slice(0, config.historyCount).reverse();
+};

package/src/types/session.ts

@@ -85,3 +85,7 @@ export interface LobeAgentSession extends LobeSessionBase {
 }
 
 export type LobeSessions = Record<string, LobeAgentSession>;
+
+export type LobeAgentConfigKeys =
+  | keyof LobeAgentConfig
+  | ['params', keyof LobeAgentConfig['params']];