chore: llm editor prompt placeholder support sandbox

web/app/components/base/prompt-editor/index.tsx

@@ -30,6 +30,7 @@ import {
 } from 'lexical'
 import * as React from 'react'
 import { useEffect } from 'react'
+import { Trans } from 'react-i18next'
 import { FileReferenceNode } from '@/app/components/workflow/skill/editor/skill-editor/plugins/file-reference-block/node'
 import FileReferenceReplacementBlock from '@/app/components/workflow/skill/editor/skill-editor/plugins/file-reference-block/replacement-block'
 import {
@@ -232,6 +233,37 @@ const PromptEditor: FC<PromptEditorProps> = ({
     }
   }, [onToolMetadataChange, toolMetadata])
 
+  const sandboxPlaceHolder = React.useMemo(
+    () => {
+      return isSupportSandbox && (
+        <Trans
+          i18nKey="promptEditor.placeholderSandbox"
+          ns="common"
+          components={[
+            <span
+              key="slash"
+              className="system-kbd inline-flex h-5 min-w-5 items-center justify-center rounded-[4px] bg-components-kbd-bg-gray px-1 text-text-tertiary"
+            />,
+            <span
+              key="insert"
+              className="border-b border-dotted border-current"
+            />,
+            <span
+              key="at"
+              className="system-kbd inline-flex h-5 min-w-5 items-center justify-center rounded-[4px] bg-components-kbd-bg-gray px-1 text-text-tertiary"
+            />,
+            <span
+              key="tools"
+              className="border-b border-dotted border-current"
+            />,
+          ]}
+        />
+      )
+    },
+
+    [isSupportSandbox],
+  )
+
   return (
     <LexicalComposer initialConfig={{ ...initialConfig, editable }}>
       <ToolBlockContextProvider value={toolBlockContextValue}>
@@ -252,7 +284,7 @@ const PromptEditor: FC<PromptEditorProps> = ({
             )}
             placeholder={(
               <Placeholder
-                value={placeholder}
+                value={placeholder || sandboxPlaceHolder}
                 className={cn('truncate', placeholderClassName)}
                 compact={compact}
               />

web/i18n/en-US/common.json

@@ -509,6 +509,7 @@
   "promptEditor.history.modal.title": "EXAMPLE",
   "promptEditor.history.modal.user": "Hello",
   "promptEditor.placeholder": "Write your prompt word here, enter '{' to insert a variable, enter '/' to insert a prompt content block",
+  "promptEditor.placeholderSandbox": "Write instructions here, <0>/</0> <1>insert</1>, <2>@</2> <3>tools</3>",
   "promptEditor.query.item.desc": "Insert user query template",
   "promptEditor.query.item.title": "Query",
   "promptEditor.skillMarkdown.placeholderPrefix": "Type to write,",

web/i18n/zh-Hans/common.json

@@ -509,6 +509,7 @@
   "promptEditor.history.modal.title": "示例",
   "promptEditor.history.modal.user": "你好",
   "promptEditor.placeholder": "在这里写你的提示词，输入'{' 插入变量、输入'/' 插入提示内容块",
+  "promptEditor.placeholderSandbox": "在这里写你的指令，<0>/</0> <1>插入</1>，<2>@</2> <3>工具</3>",
   "promptEditor.query.item.desc": "插入用户查询模板",
   "promptEditor.query.item.title": "查询内容",
   "promptEditor.skillMarkdown.placeholderPrefix": "输入",

web/i18n/zh-Hant/common.json

@@ -509,6 +509,7 @@
   "promptEditor.history.modal.title": "示例",
   "promptEditor.history.modal.user": "你好",
   "promptEditor.placeholder": "在這裡寫你的提示詞，輸入'{' 插入變數、輸入'/' 插入提示內容塊",
+  "promptEditor.placeholderSandbox": "在這裡寫你的指令，<0>/</0> <1>插入</1>，<2>@</2> <3>工具</3>",
   "promptEditor.query.item.desc": "插入使用者查詢模板",
   "promptEditor.query.item.title": "查詢內容",
   "promptEditor.skillMarkdown.placeholderPrefix": "輸入",