@lobehub/chat 0.16.0 → 0.17.0

package/CHANGELOG.md

@@ -2,6 +2,64 @@
 
 # Changelog
 
+## [Version 0.17.0](https://github.com/lobehub/lobe-chat/compare/v0.16.1...v0.17.0)
+
+<sup>Released on **2023-07-24**</sup>
+
+#### ✨ Features
+
+- **misc**: 表单配置支持设定各项高级参数.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's improved
+
+- **misc**: 表单配置支持设定各项高级参数 ([6949cc6](https://github.com/lobehub/lobe-chat/commit/6949cc6))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+### [Version 0.16.1](https://github.com/lobehub/lobe-chat/compare/v0.16.0...v0.16.1)
+
+<sup>Released on **2023-07-24**</sup>
+
+#### ♻ Code Refactoring
+
+- **misc**: 重构优化 selectors 实现.
+
+#### 💄 Styles
+
+- **misc**: 优化 document title.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Code refactoring
+
+- **misc**: 重构优化 selectors 实现 ([97fe1cd](https://github.com/lobehub/lobe-chat/commit/97fe1cd))
+
+#### Styles
+
+- **misc**: 优化 document title ([c3cda00](https://github.com/lobehub/lobe-chat/commit/c3cda00))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ## [Version 0.16.0](https://github.com/lobehub/lobe-chat/compare/v0.15.1...v0.16.0)
 
 <sup>Released on **2023-07-24**</sup>

package/package.json

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

package/src/locales/default/setting.ts

@@ -17,6 +17,7 @@ export default {
   header: {
     global: '全局设置',
     session: '会话设置',
+    sessionWithName: '会话设置 · {{name}}',
   },
   settingAgent: {
     avatar: {

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

@@ -6,7 +6,7 @@ import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 import { shallow } from 'zustand/shallow';
 
-import { chatSelectors, sessionSelectors, useSessionStore } from '@/store/session';
+import { agentSelectors, chatSelectors, sessionSelectors, useSessionStore } from '@/store/session';
 import { useSettings } from '@/store/settings';
 
 import { useStyles } from './style';
@@ -39,10 +39,10 @@ const SessionItem: FC<SessionItemProps> = memo(({ id, active = true, loading })
     const meta = session.meta;
     const systemRole = session.config.systemRole;
     return [
-      meta.title,
+      agentSelectors.getTitle(meta),
       meta.description,
       systemRole,
-      sessionSelectors.getAgentAvatar(meta),
+      agentSelectors.getAvatar(meta),
       meta.backgroundColor,
       session?.updateAt,
       session.config.model,
@@ -95,7 +95,7 @@ const SessionItem: FC<SessionItemProps> = memo(({ id, active = true, loading })
         }
         loading={loading}
         style={{ color: theme.colorText }}
-        title={title || t('defaultSession')}
+        title={title}
       />
       <Popconfirm
         arrow={false}

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

@@ -8,7 +8,7 @@ import { sessionSelectors, useSessionStore } from '@/store/session';
 import SessionItem from './SessionItem';
 
 const SessionList = memo(() => {
-  const list = useSessionStore((s) => sessionSelectors.chatList(s), isEqual);
+  const list = useSessionStore((s) => sessionSelectors.sessionList(s), isEqual);
   const [activeId, loading] = useSessionStore(
     (s) => [s.activeId, s.autocompleteLoading.title],
     shallow,

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

@@ -15,7 +15,7 @@ import type { LobeAgentConfig } from '@/types/session';
 
 type SettingItemGroup = ItemGroup & {
   children: {
-    name?: keyof LobeAgentConfig;
+    name?: keyof LobeAgentConfig | string[];
   }[];
 };
 
@@ -26,8 +26,6 @@ const AgentConfig = () => {
 
   const [updateAgentConfig] = useSessionStore((s) => [s.updateAgentConfig], shallow);
 
-  // TODO: setting 结构嵌套，现在是扁平的 params: { temperature: 0.6 }
-  // @ts-ignore
   const chat: SettingItemGroup = useMemo(
     () => ({
       children: [
@@ -42,13 +40,13 @@ const AgentConfig = () => {
           ),
           label: t('settingChat.chatStyleType.title'),
           minWidth: undefined,
-          name: 'chatStyleType',
+          name: 'displayMode',
         },
         {
           children: <Input placeholder={t('settingChat.inputTemplate.placeholder')} />,
           desc: t('settingChat.inputTemplate.desc'),
           label: t('settingChat.inputTemplate.title'),
-          name: 'enableHistoryCount',
+          name: 'inputTemplate',
         },
         {
           children: <Switch />,
@@ -60,8 +58,7 @@ const AgentConfig = () => {
         {
           children: <SliderWithInput max={32} min={0} />,
           desc: t('settingChat.historyCount.desc'),
-          // @ts-ignore
-          hidden: !config.params.enableHistoryCount,
+          hidden: !config.enableHistoryCount,
           label: t('settingChat.historyCount.title'),
           name: 'historyCount',
         },
@@ -75,8 +72,7 @@ const AgentConfig = () => {
         {
           children: <SliderWithInput max={32} min={0} />,
           desc: t('settingChat.compressThreshold.desc'),
-          // @ts-ignore
-          hidden: !config.params.enableCompressThreshold,
+          hidden: !config.enableCompressThreshold,
           label: t('settingChat.compressThreshold.title'),
           name: 'compressThreshold',
         },
@@ -87,8 +83,6 @@ const AgentConfig = () => {
     [config],
   );
 
-  // TODO: setting 结构嵌套，现在是扁平的 params: { temperature: 0.6 }
-  // @ts-ignore
   const model: SettingItemGroup = useMemo(
     () => ({
       children: [
@@ -110,28 +104,28 @@ const AgentConfig = () => {
           children: <SliderWithInput max={1} min={0} step={0.1} />,
           desc: t('settingModel.temperature.desc'),
           label: t('settingModel.temperature.title'),
-          name: 'temperature',
+          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: 'topP',
+          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: 'presencePenalty',
+          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: 'frequencyPenalty',
+          name: ['params', 'frequency_penalty'],
           tag: 'frequency_penalty',
         },
         {
@@ -144,11 +138,9 @@ const AgentConfig = () => {
         {
           children: <SliderWithInput max={32_000} min={0} step={100} />,
           desc: t('settingModel.maxTokens.desc'),
-          // TODO
-          // @ts-ignore
-          hidden: !config?.params?.enableMaxTokens,
+          hidden: !config?.enableMaxTokens,
           label: t('settingModel.maxTokens.title'),
-          name: 'params.maxTokens',
+          name: ['params', 'max_tokens'],
           tag: 'max_tokens',
         },
       ],
@@ -158,12 +150,10 @@ const AgentConfig = () => {
     [config],
   );
 
-  const items = useMemo(() => [chat, model], [config]);
-
   return (
     <Form
       initialValues={config}
-      items={items}
+      items={[chat, model]}
       onValuesChange={debounce(updateAgentConfig, 100)}
       {...FORM_STYLE}
     />

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

@@ -2,9 +2,11 @@ import Head from 'next/head';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
+import { shallow } from 'zustand/shallow';
 
 import HeaderSpacing from '@/components/HeaderSpacing';
 import { HEADER_HEIGHT } from '@/const/layoutTokens';
+import { agentSelectors, useSessionStore } from '@/store/session';
 import { genSiteHeadTitle } from '@/utils/genSiteHeadTitle';
 
 import ChatLayout from '../../layout';
@@ -17,7 +19,8 @@ import Header from './Header';
 const EditPage = memo(() => {
   const { t } = useTranslation('setting');
 
-  const pageTitle = genSiteHeadTitle(t('header.session'));
+  const title = useSessionStore(agentSelectors.currentAgentTitle, shallow);
+  const pageTitle = genSiteHeadTitle(t('header.sessionWithName', { name: title }));
 
   return (
     <>

package/src/pages/chat/index.page.tsx

@@ -6,14 +6,14 @@ import { sessionSelectors, useSessionStore } from '@/store/session';
 import Chat from './[id]/index.page';
 
 export default () => {
-  // 支持用户在进到首页时，自动激活第一个列表中的角色
+  // 支持用户在进到首页时，自动激活列表中的第一个角色
   useEffect(() => {
     const hasRehydrated = useSessionStore.persist.hasHydrated();
     // 只有当水合完毕后，才往下走
     if (!hasRehydrated) return;
 
     // 如果当前有会话，那么就激活第一个会话
-    const list = sessionSelectors.chatList(useSessionStore.getState());
+    const list = sessionSelectors.sessionList(useSessionStore.getState());
     if (list.length > 0) {
       const sessionId = list[0].id;
       Router.push(`/chat/${sessionId}`);

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

@@ -1,3 +1,5 @@
+import { t } from 'i18next';
+
 import { DEFAULT_AVATAR, DEFAULT_BACKGROUND_COLOR } from '@/const/meta';
 import { SessionStore } from '@/store/session';
 import { LanguageModel } from '@/types/llm';
@@ -13,7 +15,7 @@ const currentAgentMeta = (s: SessionStore): MetaData => {
   return { avatar: DEFAULT_AVATAR, backgroundColor: DEFAULT_BACKGROUND_COLOR, ...session?.meta };
 };
 
-const currentAgentTitle = (s: SessionStore) => currentAgentMeta(s)?.title;
+const currentAgentTitle = (s: SessionStore) => currentAgentMeta(s)?.title || t('defaultSession');
 
 const currentAgentBackgroundColor = (s: SessionStore) => {
   const session = sessionSelectors.currentSession(s);
@@ -51,6 +53,10 @@ const hasSystemRole = (s: SessionStore) => {
 
   return !!config.systemRole;
 };
+
+export const getAvatar = (s: MetaData) => s.avatar || DEFAULT_AVATAR;
+export const getTitle = (s: MetaData) => s.title || t('defaultSession');
+
 export const agentSelectors = {
   currentAgentAvatar,
   currentAgentBackgroundColor,
@@ -60,5 +66,7 @@ export const agentSelectors = {
   currentAgentModel,
   currentAgentSystemRole,
   currentAgentTitle,
+  getAvatar,
+  getTitle,
   hasSystemRole,
 };

package/src/store/session/slices/session/reducers/session.ts

@@ -102,7 +102,11 @@ export const sessionsReducer = (state: LobeSessions, payload: SessionDispatch):
         const chat = draft[id];
         if (!chat) return;
 
-        chat.config = { ...chat.config, ...config };
+        chat.config = {
+          ...chat.config,
+          ...config,
+          params: { ...chat.config.params, ...config.params },
+        };
       });
     }
 

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

@@ -1,20 +1,15 @@
-import { getAgentAvatar } from './chat';
 import {
-  chatListSel,
   currentSessionSafe,
   currentSessionSel,
   getSessionById,
   getSessionMetaById,
+  sessionList,
 } from './list';
 
 export const sessionSelectors = {
-  chatList: chatListSel,
   currentSession: currentSessionSel,
   currentSessionSafe,
-
-  getAgentAvatar,
-
   getSessionById,
-  // sessionTree: sessionTreeSel,
   getSessionMetaById,
+  sessionList,
 };

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

@@ -14,7 +14,7 @@ export const currentSessionSafe = (s: SessionStore): LobeAgentSession => {
   return currentSessionSel(s) || initLobeSession;
 };
 
-export const chatListSel = (s: SessionStore) => {
+export const sessionList = (s: SessionStore) => {
   const filterChats = filterWithKeywords(s.sessions, s.searchKeywords, (item) => [
     Object.values(item.chats)
       .map((c) => c.content)

package/src/store/settings/initialState.ts

@@ -7,8 +7,8 @@ export const DEFAULT_SETTINGS: ConfigSettings = {
   accessCode: '',
   avatar: '',
   compressThreshold: 24,
-  enableCompressThreshold: true,
-  enableHistoryCount: true,
+  enableCompressThreshold: false,
+  enableHistoryCount: false,
   enableMaxTokens: true,
   endpoint: '',
   fontSize: 14,

package/src/types/session.ts

@@ -26,10 +26,26 @@ interface LobeSessionBase extends BaseDataModel {
 }
 
 export interface LobeAgentConfig {
+  compressThreshold?: number;
+  displayMode?: 'chat' | 'docs';
+  /**
+   * 历史消息长度压缩阈值
+   */
+  enableCompressThreshold?: boolean;
+  /**
+   * 开启历史记录条数
+   */
+  enableHistoryCount?: boolean;
+  enableMaxTokens?: boolean;
   /**
    * 语言模型示例
    */
   example?: LLMExample;
+  /**
+   * 历史消息条数
+   */
+  historyCount?: number;
+  inputTemplate?: string;
   /**
    * 角色所使用的语言模型
    * @default gpt-3.5-turbo

package/src/utils/genSiteHeadTitle.ts

@@ -1 +1 @@
-export const genSiteHeadTitle = (title?: string) => (title ? `${title} - LobeChat` : 'LobeChat');
+export const genSiteHeadTitle = (title?: string) => (title ? `${title} · LobeChat` : 'LobeChat');

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

@@ -1,26 +0,0 @@
-import { createStyles } from 'antd-style';
-import { ReactNode, memo } from 'react';
-import { Flexbox } from 'react-layout-kit';
-
-const useStyles = createStyles(({ css, token }) => ({
-  header: css``,
-  title: css`
-    color: ${token.colorTextSecondary};
-  `,
-}));
-
-interface FormItemProps {
-  children: ReactNode;
-  label: string;
-}
-
-export const FormItem = memo<FormItemProps>(({ label, children }) => {
-  const { styles } = useStyles();
-
-  return (
-    <Flexbox className={styles.header} gap={12}>
-      <Flexbox className={styles.title}>{label}</Flexbox>
-      <Flexbox>{children}</Flexbox>
-    </Flexbox>
-  );
-});

package/src/pages/chat/[id]/edit/style.ts

@@ -1,34 +0,0 @@
-import { createStyles } from 'antd-style';
-
-export const useStyles = createStyles(({ css, token }) => ({
-  collapseHeader: css`
-    .ant-collapse-header {
-      align-items: center !important;
-    }
-  `,
-  footer: css`
-    position: sticky;
-    bottom: 0;
-    border-top: 1px solid ${token.colorBorder};
-  `,
-  form: css`
-    overflow-y: auto;
-  `,
-  header: css`
-    background: ${token.colorBgContainer};
-    border-bottom: 1px solid ${token.colorSplit};
-  `,
-  profile: css`
-    font-size: 20px;
-    font-weight: bold;
-    color: ${token.colorText};
-  `,
-  prompt: css`
-    padding: 12px;
-    background: ${token.colorFillTertiary};
-  `,
-  title: css`
-    font-size: 16px;
-    font-weight: 500;
-  `,
-}));

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

@@ -1,4 +0,0 @@
-import { DEFAULT_AVATAR } from '@/const/meta';
-import { MetaData } from '@/types/meta';
-
-export const getAgentAvatar = (s: MetaData) => s.avatar || DEFAULT_AVATAR;