feat: use code editor in prompt settings (#8456)

* refactor(CodeEditor): add fontSize to props

* feat: use CodeEditor in assistant prompt settings

* refactor(font): add code font family for windows

* refactor: support Sarasa

src/renderer/src/assets/styles/font.scss

@@ -17,4 +17,7 @@ body[os='windows'] {
     'Twemoji Country Flags', Ubuntu, -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, Roboto, Oxygen,
     Cantarell, 'Open Sans', 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
     'Segoe UI Symbol', 'Noto Color Emoji';
+
+  --code-font-family:
+    'Cascadia Code', 'Fira Code', 'Consolas', 'Sarasa Mono SC', 'Microsoft YaHei UI', Courier, monospace;
 }

src/renderer/src/components/CodeEditor/index.tsx

@@ -30,6 +30,7 @@ interface Props {
   height?: string
   minHeight?: string
   maxHeight?: string
+  fontSize?: string
   /** 用于覆写编辑器的某些设置 */
   options?: {
     stream?: boolean // 用于流式响应场景，默认 false
@@ -61,13 +62,14 @@ const CodeEditor = ({
   height,
   minHeight,
   maxHeight,
+  fontSize,
   options,
   extensions,
   style,
   editable = true
 }: Props) => {
   const {
-    fontSize,
+    fontSize: _fontSize,
     codeShowLineNumbers: _lineNumbers,
     codeCollapsible: _collapsible,
     codeWrappable: _wrappable,
@@ -86,6 +88,8 @@ const CodeEditor = ({
     }
   }, [codeEditor, _lineNumbers, options])
 
+  const customFontSize = useMemo(() => fontSize ?? `${_fontSize - 1}px`, [fontSize, _fontSize])
+
   const { activeCmTheme } = useCodeStyle()
   const [isExpanded, setIsExpanded] = useState(!collapsible)
   const [isUnwrapped, setIsUnwrapped] = useState(!wrappable)
@@ -221,7 +225,7 @@ const CodeEditor = ({
         ...customBasicSetup // override basicSetup
       }}
       style={{
-        fontSize: `${fontSize - 1}px`,
+        fontSize: customFontSize,
         marginTop: 0,
         borderRadius: 'inherit',
         ...style

src/renderer/src/pages/settings/AssistantSettings/AssistantPromptSettings.tsx

@@ -1,13 +1,13 @@
 import 'emoji-picker-element'
 
 import { CloseCircleFilled, QuestionCircleOutlined } from '@ant-design/icons'
+import CodeEditor from '@renderer/components/CodeEditor'
 import EmojiPicker from '@renderer/components/EmojiPicker'
 import { Box, HSpaceBetweenStack, HStack } from '@renderer/components/Layout'
 import { estimateTextTokens } from '@renderer/services/TokenService'
 import { Assistant, AssistantSettings } from '@renderer/types'
 import { getLeadingEmoji } from '@renderer/utils'
 import { Button, Input, Popover } from 'antd'
-import TextArea from 'antd/es/input/TextArea'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import ReactMarkdown from 'react-markdown'
@@ -116,32 +116,34 @@ const AssistantPromptSettings: React.FC<Props> = ({ assistant, updateAssistant }
             <div style={{ height: '30px' }} />
           </MarkdownContainer>
         ) : (
-          <TextArea
-            rows={10}
-            placeholder={t('common.assistant') + t('common.prompt')}
+          <CodeEditor
             value={prompt}
-            onChange={(e) => setPrompt(e.target.value)}
-            onBlur={() => {
-              onUpdate()
+            language="markdown"
+            placeholder={t('common.assistant') + t('common.prompt')}
+            onChange={setPrompt}
+            onBlur={onUpdate}
+            height="calc(80vh - 202px)"
+            fontSize="var(--ant-font-size)"
+            options={{
+              autocompletion: false,
+              collapsible: false,
+              keymap: true,
+              lineNumbers: false,
+              lint: false,
+              wrappable: true
+            }}
+            style={{
+              border: '0.5px solid var(--color-border)',
+              borderRadius: '5px'
             }}
-            autoFocus={true}
-            spellCheck={false}
-            style={{ minHeight: 'calc(80vh - 200px)', maxHeight: 'calc(80vh - 200px)', paddingBottom: '30px' }}
           />
         )}
       </TextAreaContainer>
       <HSpaceBetweenStack width="100%" justifyContent="flex-end" mt="10px">
         <TokenCount>Tokens: {tokenCount}</TokenCount>
-
-        {showMarkdown ? (
-          <Button type="primary" onClick={() => setShowMarkdown(false)}>
-            {t('common.edit')}
-          </Button>
-        ) : (
-          <Button type="primary" onClick={() => setShowMarkdown(true)}>
-            {t('common.save')}
-          </Button>
-        )}
+        <Button type="primary" onClick={() => setShowMarkdown((prev) => !prev)}>
+          {t(showMarkdown ? 'common.edit' : 'common.save')}
+        </Button>
       </HSpaceBetweenStack>
     </Container>
   )