Merge branch 'lobehub:main' into confirm-page-unload

src/modules/PromptHighlight/App.tsx

@@ -40,6 +40,14 @@ const App = memo<AppProps>(({ parentId }) => {
     setPrompt(event.target.value);
   }, []);
 
+  const handlePromptResize = useCallback(() => {
+    if (nativeTextarea.clientHeight < nativeTextarea.scrollHeight) {
+      return size?.width === undefined ? '' : size?.width + 6;
+    } else {
+      return size?.width === undefined ? '' : size?.width + 2;
+    }
+  }, [nativeTextarea.clientWidth]);
+
   useEffect(() => {
     ref.current.scroll(0, scroll?.top || 0);
   }, [scroll?.top]);
@@ -67,7 +75,7 @@ const App = memo<AppProps>(({ parentId }) => {
       className={styles.container}
       data-code-type="highlighter"
       ref={ref}
-      style={{ height: size?.height, width: size?.width }}
+      style={{ height: size?.height, width: handlePromptResize() }}
     >
       <SyntaxHighlighter language="prompt" options={options}>
         {prompt.trim()}

src/modules/PromptHighlight/prompt.tmLanguage.json

@@ -15,6 +15,10 @@
       "match": "AND",
       "name": "and"
     },
+    {
+      "match": "BREAK",
+      "name": "break"
+    },
     {
       "match": "<([^:]+):([^:]+):([^>]+)>",
       "captures": {
@@ -41,7 +45,7 @@
       "name": "bracket"
     },
     {
-      "match": "\\d+(\\.\\d+)?",
+      "match": "(?<!\\w)(\\d*\\.?\\d+|\\.\\d+)",
       "name": "number"
     },
     {

src/modules/PromptHighlight/promptTheme.ts

@@ -4,12 +4,12 @@ import { ThemeAppearance } from 'antd-style';
 export const themeConfig: any = (isDarkMode: ThemeAppearance) => {
   const type = isDarkMode ? 'dark' : 'light';
 
-  const colorTextTertiary = isDarkMode ? colorScales.gray[type][6] : colorScales.gray[type][7];
-  const colorYellow = isDarkMode ? colorScales.yellow[type][9] : colorScales.yellow[type][10];
-  const colorOrange = isDarkMode ? colorScales.gold[type][9] : colorScales.orange[type][9];
+  const colorYellow = isDarkMode ? colorScales.yellow[type][9] : colorScales.gold[type][10];
+  const colorOrange = isDarkMode ? colorScales.gold[type][9] : colorScales.orange[type][10];
+  const colorVolcano = isDarkMode ? colorScales.volcano[type][10] : colorScales.volcano[type][8];
   const colorGreen = isDarkMode ? colorScales.lime[type][9] : colorScales.green[type][10];
-  const colorBlue = isDarkMode ? colorScales.blue[type][9] : colorScales.geekblue[type][8];
-  const colorPurple = isDarkMode ? colorScales.purple[type][10] : colorScales.purple[type][9];
+  const colorBlue = isDarkMode ? colorScales.blue[type][9] : colorScales.geekblue[type][9];
+  const colorPurple = isDarkMode ? colorScales.purple[type][11] : colorScales.purple[type][8];
   return {
     colors: {
       'editor.foreground': colorGreen,
@@ -19,46 +19,44 @@ export const themeConfig: any = (isDarkMode: ThemeAppearance) => {
       {
         scope: 'comma',
         settings: {
-          foreground: colorTextTertiary,
+          foreground: colorGreen,
         },
       },
       {
         scope: 'func',
         settings: {
-          foreground: colorBlue,
+          foreground: colorPurple,
         },
       },
       {
-        scope: 'and',
+        scope: ['and', 'break'],
         settings: {
-          fontStyle: 'bold',
           foreground: colorBlue,
         },
       },
       {
         scope: 'bracket',
         settings: {
-          foreground: colorBlue,
+          foreground: colorPurple,
         },
       },
       {
         scope: 'model-type',
         settings: {
           fontStyle: 'italic',
-          foreground: colorOrange,
+          foreground: colorVolcano,
         },
       },
       {
         scope: 'model-name',
         settings: {
-          fontStyle: 'bold',
           foreground: colorOrange,
         },
       },
       {
         scope: 'model-bracket',
         settings: {
-          foreground: colorOrange,
+          foreground: colorPurple,
         },
       },
       {
@@ -70,7 +68,6 @@ export const themeConfig: any = (isDarkMode: ThemeAppearance) => {
       {
         scope: 'wildcards',
         settings: {
-          fontStyle: 'italic',
           foreground: colorYellow,
         },
       },

src/modules/PromptHighlight/style.ts

@@ -7,14 +7,12 @@ export const useStyles = createStyles(({ css, token, cx, stylish, prefixCls }) =
       pointer-events: none;
       position: absolute;
       overflow: hidden auto;
-      padding: 8px;
+      padding: calc(8px + var(--input-border-width));
 
       pre {
         font-family: var(--font) !important;
         font-size: var(--input-text-size) !important;
         line-height: 1.5 !important;
-        color: ${token.colorSuccess};
-        text-overflow: ellipsis !important;
         word-wrap: break-word;
         white-space: pre-wrap;
         vertical-align: bottom !important;
@@ -45,11 +43,9 @@ export const useStyles = createStyles(({ css, token, cx, stylish, prefixCls }) =
       `${prefix}-shiki`,
       css`
         margin: 0;
-        padding: var(--input-border-width);
 
         .shiki {
           overflow-x: auto;
-          margin: 0;
           padding: 0;
           background: none !important;