feat: the frontend part of mcp (#22131)

Co-authored-by: jZonG <jzongcode@gmail.com>
Co-authored-by: Novice <novice12185727@gmail.com>
Co-authored-by: nite-knite <nkCoding@gmail.com>
Co-authored-by: Hanqing Zhao <sherry9277@gmail.com>

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

@@ -64,8 +64,9 @@ import cn from '@/utils/classnames'
 export type PromptEditorProps = {
   instanceId?: string
   compact?: boolean
+  wrapperClassName?: string
   className?: string
-  placeholder?: string
+  placeholder?: string | JSX.Element
   placeholderClassName?: string
   style?: React.CSSProperties
   value?: string
@@ -85,6 +86,7 @@ export type PromptEditorProps = {
 const PromptEditor: FC<PromptEditorProps> = ({
   instanceId,
   compact,
+  wrapperClassName,
   className,
   placeholder,
   placeholderClassName,
@@ -147,10 +149,25 @@ const PromptEditor: FC<PromptEditorProps> = ({
 
   return (
     <LexicalComposer initialConfig={{ ...initialConfig, editable }}>
-      <div className='relative min-h-5'>
+      <div className={cn('relative', wrapperClassName)}>
         <RichTextPlugin
-          contentEditable={<ContentEditable className={`${className} outline-none ${compact ? 'text-[13px] leading-5' : 'text-sm leading-6'} text-text-secondary`} style={style || {}} />}
-          placeholder={<Placeholder value={placeholder} className={cn('truncate', placeholderClassName)} compact={compact} />}
+          contentEditable={
+            <ContentEditable
+              className={cn(
+                'text-text-secondary outline-none',
+                compact ? 'text-[13px] leading-5' : 'text-sm leading-6',
+                className,
+              )}
+              style={style || {}}
+            />
+          }
+          placeholder={
+            <Placeholder
+              value={placeholder}
+              className={cn('truncate', placeholderClassName)}
+              compact={compact}
+            />
+          }
           ErrorBoundary={LexicalErrorBoundary}
         />
         <ComponentPickerBlock

web/app/components/base/prompt-editor/plugins/custom-text/node.tsx

@@ -16,7 +16,6 @@ export class CustomTextNode extends TextNode {
 
   createDOM(config: EditorConfig) {
     const dom = super.createDOM(config)
-    dom.classList.add('align-middle')
     return dom
   }
 

web/app/components/base/prompt-editor/plugins/placeholder.tsx

@@ -8,7 +8,7 @@ const Placeholder = ({
   className,
 }: {
   compact?: boolean
-  value?: string
+  value?: string | JSX.Element
   className?: string
 }) => {
   const { t } = useTranslation()