@lobehub/chat 0.16.1 → 0.18.0

package/CHANGELOG.md

@@ -2,6 +2,56 @@
 
 # Changelog
 
+## [Version 0.18.0](https://github.com/lobehub/lobe-chat/compare/v0.17.0...v0.18.0)
+
+<sup>Released on **2023-07-24**</sup>
+
+#### ✨ Features
+
+- **misc**: 实现会话展示模式切换，并优化默认创建角色的配置.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's improved
+
+- **misc**: 实现会话展示模式切换，并优化默认创建角色的配置 ([27ae82f](https://github.com/lobehub/lobe-chat/commit/27ae82f))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+## [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>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.16.1",
+  "version": "0.18.0",
   "description": "Lobe Chat is an open-source chatbot client using LangChain, Typescript and Next.js",
   "keywords": [
     "chatbot",
@@ -63,7 +63,7 @@
     "@commitlint/cli": "^17",
     "@emoji-mart/data": "^1",
     "@emoji-mart/react": "^1",
-    "@lobehub/ui": "^1",
+    "@lobehub/ui": "latest",
     "@vercel/analytics": "^1",
     "ahooks": "^3",
     "ai": "^2",

package/src/locales/default/setting.ts

@@ -48,7 +48,7 @@ export default {
     chatStyleType: {
       title: '聊天窗口样式',
       type: {
-        bubble: '气泡模式',
+        chat: '对话模式',
         docs: '文档模式',
       },
     },

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

@@ -3,7 +3,7 @@ import isEqual from 'fast-deep-equal';
 import { ReactNode, memo } from 'react';
 import { shallow } from 'zustand/shallow';
 
-import { chatSelectors, useSessionStore } from '@/store/session';
+import { agentSelectors, chatSelectors, useSessionStore } from '@/store/session';
 import { isFunctionMessage } from '@/utils/message';
 
 import FunctionMessage from './FunctionMessage';
@@ -11,8 +11,13 @@ import MessageExtra from './MessageExtra';
 
 const List = () => {
   const data = useSessionStore(chatSelectors.currentChats, isEqual);
-  const [deleteMessage, resendMessage, dispatchMessage] = useSessionStore(
-    (s) => [s.deleteMessage, s.resendMessage, s.dispatchMessage],
+  const [displayMode, deleteMessage, resendMessage, dispatchMessage] = useSessionStore(
+    (s) => [
+      agentSelectors.currentAgentConfigSafe(s).displayMode,
+      s.deleteMessage,
+      s.resendMessage,
+      s.dispatchMessage,
+    ],
     shallow,
   );
 
@@ -45,6 +50,7 @@ const List = () => {
       renderMessage={renderMessage}
       renderMessageExtra={MessageExtra}
       style={{ marginTop: 24 }}
+      type={displayMode}
     />
   );
 };

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

@@ -1,5 +1,6 @@
 import { Form, ItemGroup } from '@lobehub/ui';
-import { Input, Segmented, Select, Switch } from 'antd';
+import { ConfigProvider, Input, Segmented, Select, Switch } from 'antd';
+import { useTheme } from 'antd-style';
 import isEqual from 'fast-deep-equal';
 import { debounce } from 'lodash-es';
 import { BrainCog, MessagesSquare } from 'lucide-react';
@@ -15,19 +16,18 @@ import type { LobeAgentConfig } from '@/types/session';
 
 type SettingItemGroup = ItemGroup & {
   children: {
-    name?: keyof LobeAgentConfig;
+    name?: keyof LobeAgentConfig | string[];
   }[];
 };
 
 const AgentConfig = () => {
   const { t } = useTranslation('setting');
+  const theme = useTheme();
 
   const config = useSessionStore(agentSelectors.currentAgentConfigSafe, isEqual);
 
   const [updateAgentConfig] = useSessionStore((s) => [s.updateAgentConfig], shallow);
 
-  // TODO: setting 结构嵌套，现在是扁平的 params: { temperature: 0.6 }
-  // @ts-ignore
   const chat: SettingItemGroup = useMemo(
     () => ({
       children: [
@@ -35,20 +35,20 @@ const AgentConfig = () => {
           children: (
             <Segmented
               options={[
-                { label: t('settingChat.chatStyleType.type.bubble'), value: 'chat' },
+                { label: t('settingChat.chatStyleType.type.chat'), value: 'chat' },
                 { label: t('settingChat.chatStyleType.type.docs'), value: 'docs' },
               ]}
             />
           ),
           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 +60,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 +74,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 +85,6 @@ const AgentConfig = () => {
     [config],
   );
 
-  // TODO: setting 结构嵌套，现在是扁平的 params: { temperature: 0.6 }
-  // @ts-ignore
   const model: SettingItemGroup = useMemo(
     () => ({
       children: [
@@ -110,28 +106,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 +140,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,15 +152,23 @@ const AgentConfig = () => {
     [config],
   );
 
-  const items = useMemo(() => [chat, model], [config]);
-
   return (
-    <Form
-      initialValues={config}
-      items={items}
-      onValuesChange={debounce(updateAgentConfig, 100)}
-      {...FORM_STYLE}
-    />
+    <ConfigProvider
+      theme={{
+        components: {
+          Segmented: {
+            colorBgLayout: theme.isDarkMode ? '#111' : '#f1f1f1',
+          },
+        },
+      }}
+    >
+      <Form
+        initialValues={config}
+        items={[chat, model]}
+        onValuesChange={debounce(updateAgentConfig, 100)}
+        {...FORM_STYLE}
+      />
+    </ConfigProvider>
   );
 };
 

package/src/services/chatModel.ts

@@ -1,5 +1,6 @@
 import { merge } from 'lodash-es';
 
+import { initialLobeAgentConfig } from '@/store/session';
 import type { OpenAIStreamPayload } from '@/types/openai';
 
 import { URLS } from './url';
@@ -13,12 +14,9 @@ export const fetchChatModel = (
 ) => {
   const payload = merge(
     {
-      frequency_penalty: 0,
-      model: 'gpt-3.5-turbo',
-      presence_penalty: 0,
+      model: initialLobeAgentConfig.model,
       stream: true,
-      temperature: 0.6,
-      top_p: 1,
+      ...initialLobeAgentConfig.params,
     },
     params,
   );

package/src/store/session/index.ts

@@ -32,4 +32,5 @@ export const useSessionStore = create<SessionStore>()(
 );
 
 export * from './selectors';
+export { initialLobeAgentConfig } from './slices/agentConfig';
 export type { SessionStore } from './store';

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

@@ -11,8 +11,15 @@ export interface AgentConfigState {
 }
 
 export const initialLobeAgentConfig: LobeAgentConfig = {
+  displayMode: 'chat',
   model: LanguageModel.GPT3_5,
-  params: { temperature: 0.6 },
+  params: {
+    frequency_penalty: 0,
+    presence_penalty: 0,
+    temperature: 0.6,
+    top_p: 1,
+  },
+  plugins: [],
   systemRole: '',
 };
 

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/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/llm.ts

@@ -18,6 +18,7 @@ export enum LanguageModel {
 export interface LLMParams {
   /**
    * 控制生成文本中的惩罚系数，用于减少重复性
+   * @default 0
    */
   frequency_penalty?: number;
   /**
@@ -26,6 +27,7 @@ export interface LLMParams {
   max_tokens?: number;
   /**
    * 控制生成文本中的惩罚系数，用于减少主题的变化
+   * @default 0
    */
   presence_penalty?: number;
   /**
@@ -35,6 +37,7 @@ export interface LLMParams {
   temperature?: number;
   /**
    * 控制生成文本中最高概率的单个 token
+   * @default 1
    */
   top_p?: number;
 }

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