@lobehub/chat 0.40.2 → 0.40.3

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 # Changelog
 
+### [Version 0.40.3](https://github.com/lobehub/lobe-chat/compare/v0.40.2...v0.40.3)
+
+<sup>Released on **2023-08-10**</sup>
+
+#### 🐛 Bug Fixes
+
+- **misc**: 修正没有 prompt 的编辑与保存按钮的问题.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's fixed
+
+- **misc**: 修正没有 prompt 的编辑与保存按钮的问题 ([b7e1648](https://github.com/lobehub/lobe-chat/commit/b7e1648))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.40.2](https://github.com/lobehub/lobe-chat/compare/v0.40.1...v0.40.2)
 
 <sup>Released on **2023-08-08**</sup>

package/package.json

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

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

@@ -1,9 +1,11 @@
-import { CodeEditor, FormGroup, TokenTag } from '@lobehub/ui';
+import { EditableMessage, FormGroup, TokenTag } from '@lobehub/ui';
+import { Button } from 'antd';
 import { createStyles } from 'antd-style';
 import { encode } from 'gpt-tokenizer';
 import { Bot } from 'lucide-react';
-import { memo, useMemo } from 'react';
+import { memo, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
 
 import { FORM_STYLE } from '@/const/layoutTokens';
 import { ModelTokens } from '@/const/modelTokens';
@@ -11,11 +13,16 @@ import { AgentAction } from '@/store/session/slices/agentConfig';
 import { LobeAgentConfig } from '@/types/session';
 
 export const useStyles = createStyles(({ css, token }) => ({
-  token: css`
-    padding-left: 8px;
-    background: ${token.colorBgLayout};
-    border: 1px solid ${token.colorBorder};
-    border-radius: ${token.borderRadiusSM}px;
+  input: css`
+    padding: 12px;
+    background: ${token.colorFillTertiary};
+    border: 1px solid ${token.colorPrimaryBorder};
+    border-radius: 8px;
+  `,
+  markdown: css`
+    padding: 12px;
+    background: ${token.colorFillTertiary};
+    border: 1px solid transparent;
   `,
 }));
 
@@ -27,37 +34,55 @@ export interface AgentPromptProps {
 const AgentPrompt = memo<AgentPromptProps>(({ config, updateConfig }) => {
   const { t } = useTranslation('setting');
   const { styles } = useStyles();
+  const [editing, setEditing] = useState(false);
   const { systemRole, model } = config;
   const systemTokenCount = useMemo(() => encode(systemRole || '').length, [systemRole]);
 
   return (
     <FormGroup
       extra={
-        <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}
-        />
+        <Flexbox align={'center'} gap={8} horizontal>
+          <TokenTag
+            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}
+          />
+        </Flexbox>
       }
       icon={Bot}
       style={FORM_STYLE.style}
       title={t('settingAgent.prompt.title')}
     >
-      <CodeEditor
-        language={'md'}
-        onValueChange={(e) => updateConfig({ systemRole: e })}
-        placeholder={t('settingAgent.prompt.placeholder')}
-        resize={false}
-        style={{ padding: '16px 0' }}
-        type={'pure'}
-        value={systemRole}
-      />
+      <Flexbox gap={16} paddingBlock={16}>
+        <EditableMessage
+          classNames={styles}
+          editing={editing}
+          onChange={(e) => {
+            updateConfig({ systemRole: e });
+          }}
+          onEditingChange={setEditing}
+          showEditWhenEmpty
+          value={systemRole}
+        />
+        {!editing && !!systemRole && (
+          <Flexbox direction={'horizontal-reverse'}>
+            <Button
+              onClick={(e) => {
+                e.stopPropagation();
+                setEditing(true);
+              }}
+              type={'primary'}
+            >
+              {t('edit', { ns: 'common' })}
+            </Button>
+          </Flexbox>
+        )}
+      </Flexbox>
     </FormGroup>
   );
 });