@lobehub/chat 1.81.1 → 1.81.2

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 # Changelog
 
+### [Version 1.81.2](https://github.com/lobehub/lobe-chat/compare/v1.81.1...v1.81.2)
+
+<sup>Released on **2025-04-18**</sup>
+
+#### 💄 Styles
+
+- **misc**: Allow folding SystemRole box.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Styles
+
+- **misc**: Allow folding SystemRole box, closes [#7421](https://github.com/lobehub/lobe-chat/issues/7421) ([c147df7](https://github.com/lobehub/lobe-chat/commit/c147df7))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 1.81.1](https://github.com/lobehub/lobe-chat/compare/v1.81.0...v1.81.1)
 
 <sup>Released on **2025-04-18**</sup>

package/changelog/v1.json

@@ -1,4 +1,13 @@
 [
+  {
+    "children": {
+      "improvements": [
+        "Allow folding SystemRole box."
+      ]
+    },
+    "date": "2025-04-18",
+    "version": "1.81.2"
+  },
   {
     "children": {
       "improvements": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "1.81.1",
+  "version": "1.81.2",
   "description": "Lobe Chat - an open-source, high-performance chatbot framework that supports speech synthesis, multimodal, and extensible Function Call plugin system. Supports one-click free deployment of your private ChatGPT/LLM web application.",
   "keywords": [
     "framework",

package/src/app/[variants]/(main)/chat/(workspace)/@topic/features/SystemRole/SystemRoleContent.tsx

@@ -4,7 +4,7 @@ import { ActionIcon } from '@lobehub/ui';
 import { EditableMessage } from '@lobehub/ui/chat';
 import { Skeleton } from 'antd';
 import { Edit } from 'lucide-react';
-import { memo, useState } from 'react';
+import { MouseEvent, memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 import useMergeState from 'use-merge-value';
@@ -24,11 +24,12 @@ import { useStyles } from './style';
 
 const SystemRole = memo(() => {
   const [editing, setEditing] = useState(false);
-  const { styles } = useStyles();
+  const { styles, cx } = useStyles();
   const openChatSettings = useOpenChatSettings(ChatSettingsTabs.Prompt);
-  const [init, meta] = useSessionStore((s) => [
+  const [init, meta, sessionId] = useSessionStore((s) => [
     sessionSelectors.isSomeSessionActive(s),
     sessionMetaSelectors.currentAgentMeta(s),
+    s.activeId,
   ]);
 
   const [isAgentConfigLoading, systemRole, updateAgentConfig] = useAgentStore((s) => [
@@ -52,8 +53,10 @@ const SystemRole = memo(() => {
 
   const isLoading = !init || isAgentConfigLoading;
 
-  const handleOpenWithEdit = () => {
+  const handleOpenWithEdit = (e: MouseEvent) => {
     if (isLoading) return;
+
+    e.stopPropagation();
     setEditing(true);
     setOpen(true);
   };
@@ -64,20 +67,36 @@ const SystemRole = memo(() => {
     setOpen(true);
   };
 
+  const [expanded, toggleAgentSystemRoleExpand] = useGlobalStore((s) => [
+    systemStatusSelectors.getAgentSystemRoleExpanded(sessionId)(s),
+    s.toggleAgentSystemRoleExpand,
+  ]);
+
+  const toggleExpanded = () => {
+    toggleAgentSystemRoleExpand(sessionId);
+  };
+
   return (
     <Flexbox height={'fit-content'}>
       <SidebarHeader
         actions={
           <ActionIcon icon={Edit} onClick={handleOpenWithEdit} size={'small'} title={t('edit')} />
         }
+        onClick={toggleExpanded}
+        style={{ cursor: 'pointer' }}
         title={t('settingAgent.prompt.title', { ns: 'setting' })}
       />
       <Flexbox
-        className={styles.promptBox}
-        height={200}
+        className={cx(styles.promptBox, styles.animatedContainer)}
+        height={expanded ? 200 : 0}
         onClick={handleOpen}
         onDoubleClick={(e) => {
-          if (e.altKey) handleOpenWithEdit();
+          if (e.altKey) handleOpenWithEdit(e);
+        }}
+        style={{
+          opacity: expanded ? 1 : 0,
+          overflow: 'hidden',
+          transition: 'height 0.3s ease',
         }}
       >
         {isLoading ? (

package/src/app/[variants]/(main)/chat/(workspace)/@topic/features/SystemRole/style.ts

@@ -1,6 +1,11 @@
 import { createStyles } from 'antd-style';
 
 export const useStyles = createStyles(({ css, token }) => ({
+  animatedContainer: css`
+    transition:
+      height 0.3s ease,
+      opacity 0.3s ease;
+  `,
   prompt: css`
     overflow: hidden auto;
 

package/src/components/SidebarHeader/index.tsx

@@ -10,11 +10,12 @@ const useStyles = createStyles(({ css }) => ({
 
 interface SidebarHeaderProps {
   actions?: ReactNode;
+  onClick?: () => void;
   style?: CSSProperties;
   title: ReactNode;
 }
 
-const SidebarHeader = memo<SidebarHeaderProps>(({ title, style, actions }) => {
+const SidebarHeader = memo<SidebarHeaderProps>(({ title, style, actions, onClick }) => {
   const { styles } = useStyles();
 
   return (
@@ -23,6 +24,7 @@ const SidebarHeader = memo<SidebarHeaderProps>(({ title, style, actions }) => {
       className={styles.header}
       distribution={'space-between'}
       horizontal
+      onClick={onClick}
       padding={14}
       paddingInline={16}
       style={style}

package/src/store/global/actions/workspacePane.ts

@@ -10,6 +10,7 @@ const n = setNamespace('w');
 
 export interface GlobalWorkspacePaneAction {
   switchBackToChat: (sessionId?: string) => void;
+  toggleAgentSystemRoleExpand: (agentId: string, expanded?: boolean) => void;
   toggleChatSideBar: (visible?: boolean) => void;
   toggleExpandSessionGroup: (id: string, expand: boolean) => void;
   toggleMobilePortal: (visible?: boolean) => void;
@@ -28,6 +29,21 @@ export const globalWorkspaceSlice: StateCreator<
     get().router?.push(SESSION_CHAT_URL(sessionId || INBOX_SESSION_ID, get().isMobile));
   },
 
+  toggleAgentSystemRoleExpand: (agentId, expanded) => {
+    const { status } = get();
+    const systemRoleExpandedMap = status.systemRoleExpandedMap || {};
+    const nextExpanded = typeof expanded === 'boolean' ? expanded : !systemRoleExpandedMap[agentId];
+
+    get().updateSystemStatus(
+      {
+        systemRoleExpandedMap: {
+          ...systemRoleExpandedMap,
+          [agentId]: nextExpanded,
+        },
+      },
+      n('toggleAgentSystemRoleExpand', { agentId, expanded: nextExpanded }),
+    );
+  },
   toggleChatSideBar: (newValue) => {
     const showChatSideBar =
       typeof newValue === 'boolean' ? newValue : !get().status.showChatSideBar;

package/src/store/global/initialState.ts

@@ -66,6 +66,7 @@ export interface SystemStatus {
   showHotkeyHelper?: boolean;
   showSessionPanel?: boolean;
   showSystemRole?: boolean;
+  systemRoleExpandedMap: Record<string, boolean>;
   /**
    * theme mode
    */
@@ -111,6 +112,7 @@ export const INITIAL_STATUS = {
   showHotkeyHelper: false,
   showSessionPanel: true,
   showSystemRole: false,
+  systemRoleExpandedMap: {},
   themeMode: 'auto',
   threadInputHeight: 200,
   zenMode: false,

package/src/store/global/selectors/systemStatus.ts

@@ -50,8 +50,16 @@ const isPgliteInited = (s: GlobalState): boolean =>
 // 这个变量控制 clientdb 是否完成初始化，正常来说，只有 pgliteDB 模式下，才会存在变化，其他时候都是 true
 const isDBInited = (s: GlobalState): boolean => (isUsePgliteDB ? isPgliteInited(s) : true);
 
+const getAgentSystemRoleExpanded =
+  (agentId: string) =>
+  (s: GlobalState): boolean => {
+    const map = s.status.systemRoleExpandedMap || {};
+    return map[agentId] !== false; // 角色设定默认为展开状态
+  };
+
 export const systemStatusSelectors = {
   filePanelWidth,
+  getAgentSystemRoleExpanded,
   hidePWAInstaller,
   inZenMode,
   inputHeight,