🐛 fix: 修正发送的请求不包含 systemRole 的问题

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

@@ -1,8 +1,9 @@
 import { ActionIcon, Avatar, ChatHeader } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
-import { ArchiveIcon, MoreVerticalIcon, Share2Icon } from 'lucide-react';
-import { useTranslation } from 'react-i18next';
+import { ArchiveIcon, LucideEdit, MoreVerticalIcon, Share2Icon } 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';
 
@@ -20,9 +21,9 @@ const useStyles = createStyles(({ css, token }) => ({
 }));
 const Header = memo(() => {
   const { t } = useTranslation('common');
-  const meta = useSessionStore((s) => {
+  const [meta, id] = useSessionStore((s) => {
     const chat = sessionSelectors.currentSession(s);
-    return chat?.meta;
+    return [chat?.meta, s.activeId];
   }, shallow);
 
   const [
@@ -50,23 +51,33 @@ const Header = memo(() => {
         </>
       }
       right={
-        <>
-          <ActionIcon
-            icon={Share2Icon}
-            onClick={() => {
-              // genShareUrl();
-            }}
-            size={{ fontSize: 24 }}
-            title={t('share')}
-          />
-          <ActionIcon icon={ArchiveIcon} size={{ fontSize: 24 }} title={t('archive')} />
-          <ActionIcon
-            icon={MoreVerticalIcon}
-            onClick={() => toggleConfig()}
-            size={{ fontSize: 24 }}
-            title={t('sessionSetting')}
-          />
-        </>
+        id && (
+          <>
+            <ActionIcon
+              icon={Share2Icon}
+              onClick={() => {
+                // genShareUrl();
+              }}
+              size={{ fontSize: 24 }}
+              title={t('share')}
+            />
+            <ActionIcon icon={ArchiveIcon} size={{ fontSize: 24 }} title={t('archive')} />
+            <ActionIcon
+              icon={LucideEdit}
+              onClick={() => {
+                Router.push(`/chat/${id}/edit`);
+              }}
+              size={{ blockSize: 32, fontSize: 20 }}
+              title={t('edit')}
+            />
+            <ActionIcon
+              icon={MoreVerticalIcon}
+              onClick={() => toggleConfig()}
+              size={{ fontSize: 24 }}
+              title={t('sessionSetting')}
+            />
+          </>
+        )
       }
     />
   );

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

@@ -1,4 +1,3 @@
-import { TextArea } from '@lobehub/ui';
 import { Collapse, InputNumber, Segmented, Slider } from 'antd';
 import isEqual from 'fast-deep-equal';
 import { useTranslation } from 'react-i18next';
@@ -9,6 +8,7 @@ import { agentSelectors, useSessionStore } from '@/store/session';
 import { LanguageModel } from '@/types/llm';
 
 import { FormItem } from './FormItem';
+import Prompt from './Prompt';
 import { useStyles } from './style';
 
 const AgentConfig = () => {
@@ -48,19 +48,7 @@ const AgentConfig = () => {
             value={config.model}
           />
         </FormItem>
-        <FormItem label={t('agentPrompt')}>
-          <Flexbox gap={16}>
-            <TextArea
-              onChange={(e) => {
-                updateAgentConfig({ systemRole: e.target.value });
-              }}
-              placeholder={t('agentPromptPlaceholder')}
-              style={{ minHeight: 160 }}
-              type={'block'}
-              value={config.systemRole}
-            />
-          </Flexbox>
-        </FormItem>
+        <Prompt />
         <Collapse
           activeKey={['advanceSettings']}
           bordered={false}

src/pages/chat/[id]/edit/Prompt.tsx

@@ -0,0 +1,68 @@
+import { EditableMessage } from '@lobehub/ui';
+import { Button } from 'antd';
+import { createStyles } from 'antd-style';
+import { 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 { FormItem } from './FormItem';
+
+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};
+  `,
+}));
+
+const Prompt = () => {
+  const { t } = useTranslation('common');
+
+  const [editing, setEditing] = useState(false);
+  const { styles } = useStyles();
+
+  const systemRole = useSessionStore((s) => {
+    const config = agentSelectors.currentAgentConfigSafe(s);
+    return config.systemRole;
+  }, shallow);
+
+  const [updateAgentConfig] = useSessionStore((s) => [s.updateAgentConfig], shallow);
+
+  return (
+    <FormItem label={t('agentPrompt')}>
+      <Flexbox gap={16}>
+        <EditableMessage
+          classNames={styles}
+          editing={editing}
+          onChange={(e) => {
+            updateAgentConfig({ systemRole: e });
+          }}
+          onEditingChange={setEditing}
+          value={systemRole}
+        />
+        {!editing && (
+          <Flexbox direction={'horizontal-reverse'}>
+            <Button
+              onClick={() => {
+                setEditing(true);
+              }}
+              type={'primary'}
+            >
+              {t('edit')}
+            </Button>
+          </Flexbox>
+        )}
+      </Flexbox>
+    </FormItem>
+  );
+};
+
+export default Prompt;

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

@@ -18,6 +18,10 @@ export const useStyles = createStyles(({ css, token }) => ({
     font-weight: bold;
     color: ${token.colorText};
   `,
+  prompt: css`
+    padding: 12px;
+    background: ${token.colorFillTertiary};
+  `,
   title: css`
     font-size: 16px;
     font-weight: 500;