From 950a52f4fc4f7adea530f67577c2aff97b97bbbe Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Fri, 29 Mar 2024 16:19:00 +0800
Subject: [PATCH] feat: input var ui

---
 web/app/components/base/prompt-editor/index.tsx |  4 +++-
 .../base/prompt-editor/plugins/placeholder.tsx  |  5 ++++-
 .../components/input-support-select-var.tsx     |  9 +++++----
 .../nodes/http/components/api-input.tsx         | 17 ++++++-----------
 web/i18n/en-US/workflow.ts                      |  1 +
 web/i18n/zh-Hans/workflow.ts                    |  1 +
 6 files changed, 20 insertions(+), 17 deletions(-)

diff --git a/web/app/components/base/prompt-editor/index.tsx b/web/app/components/base/prompt-editor/index.tsx
index 0111946620..981d41e246 100644
--- a/web/app/components/base/prompt-editor/index.tsx
+++ b/web/app/components/base/prompt-editor/index.tsx
@@ -61,6 +61,7 @@ import { useEventEmitterContextContext } from '@/context/event-emitter'
 export type PromptEditorProps = {
   className?: string
   placeholder?: string
+  placeholderClassName?: string
   style?: React.CSSProperties
   value?: string
   editable?: boolean
@@ -78,6 +79,7 @@ export type PromptEditorProps = {
 const PromptEditor: FC<PromptEditorProps> = ({
   className,
   placeholder,
+  placeholderClassName,
   style,
   value,
   editable = true,
@@ -136,7 +138,7 @@ const PromptEditor: FC<PromptEditorProps> = ({
       <div className='relative'>
         <RichTextPlugin
           contentEditable={<ContentEditable className={`${className} outline-none text-sm text-gray-700 leading-6`} style={style || {}} />}
-          placeholder={<Placeholder value={placeholder} />}
+          placeholder={<Placeholder value={placeholder} className={placeholderClassName} />}
           ErrorBoundary={LexicalErrorBoundary}
         />
         <ComponentPickerBlock
diff --git a/web/app/components/base/prompt-editor/plugins/placeholder.tsx b/web/app/components/base/prompt-editor/plugins/placeholder.tsx
index 0835f90a55..83bf069883 100644
--- a/web/app/components/base/prompt-editor/plugins/placeholder.tsx
+++ b/web/app/components/base/prompt-editor/plugins/placeholder.tsx
@@ -1,14 +1,17 @@
 import { useTranslation } from 'react-i18next'
+import cn from 'classnames'
 
 const Placeholder = ({
   value,
+  className,
 }: {
   value?: string
+  className?: string
 }) => {
   const { t } = useTranslation()
 
   return (
-    <div className='absolute top-0 left-0 h-full w-full text-sm text-gray-300 select-none pointer-events-none leading-6'>
+    <div className={cn(className, 'absolute top-0 left-0 h-full w-full text-sm text-gray-300 select-none pointer-events-none leading-6')}>
       {value || t('common.promptEditor.placeholder')}
     </div>
   )
diff --git a/web/app/components/workflow/nodes/_base/components/input-support-select-var.tsx b/web/app/components/workflow/nodes/_base/components/input-support-select-var.tsx
index 3646b2af07..cdb0c9dbec 100644
--- a/web/app/components/workflow/nodes/_base/components/input-support-select-var.tsx
+++ b/web/app/components/workflow/nodes/_base/components/input-support-select-var.tsx
@@ -9,6 +9,7 @@ import PromptEditor from '@/app/components/base/prompt-editor'
 type Props = {
   className?: string
   placeholder?: string
+  placeholderClassName?: string
   promptMinHeightClassName?: string
   value: string
   onChange: (value: string) => void
@@ -21,14 +22,14 @@ type Props = {
 const Editor: FC<Props> = ({
   className,
   placeholder,
-  promptMinHeightClassName = 'min-h-[30px]',
+  placeholderClassName,
+  promptMinHeightClassName = 'min-h-[20px]',
   value,
   onChange,
   onFocusChange,
   readOnly,
   nodesOutputVars,
 }) => {
-  // const { t } = useTranslation()
   const { getNode } = useWorkflow()
 
   const [isFocus, {
@@ -45,9 +46,9 @@ const Editor: FC<Props> = ({
     <div className={cn(className, 'relative')}>
       <>
         <PromptEditor
-          className={cn(promptMinHeightClassName)}
-          // style={isExpand ? { height: editorExpandHeight - 5 } : {}}
+          className={cn(promptMinHeightClassName, '!leading-[18px]')}
           placeholder={placeholder}
+          placeholderClassName={placeholderClassName}
           value={value}
           outToolDisabled
           canNotAddContext
diff --git a/web/app/components/workflow/nodes/http/components/api-input.tsx b/web/app/components/workflow/nodes/http/components/api-input.tsx
index 982a265767..2b6d81dec5 100644
--- a/web/app/components/workflow/nodes/http/components/api-input.tsx
+++ b/web/app/components/workflow/nodes/http/components/api-input.tsx
@@ -2,6 +2,7 @@
 import type { FC } from 'react'
 import React, { useEffect, useRef, useState } from 'react'
 import cn from 'classnames'
+import { useTranslation } from 'react-i18next'
 import { Method } from '../types'
 import Selector from '../../_base/components/selector'
 import useAvailableVarList from '../../_base/hooks/use-available-var-list'
@@ -35,6 +36,8 @@ const ApiInput: FC<Props> = ({
   url,
   onUrlChange,
 }) => {
+  const { t } = useTranslation()
+
   const inputRef = useRef<HTMLInputElement>(null)
   const [isFocus, setIsFocus] = useState(false)
   const availableVarList = useAvailableVarList(nodeId, {
@@ -65,23 +68,15 @@ const ApiInput: FC<Props> = ({
         readonly={readonly}
       />
 
-      {/* <input
-          type='text'
-          readOnly={readonly}
-          value={url}
-          onChange={handleUrlChange}
-          onFocus={onFocus}
-          onBlur={onBlur}
-          className='w-full h-6 leading-6 px-2.5 border-0  text-gray-900 text-[13px]  placeholder:text-gray-400 focus:outline-none'
-          ref={inputRef}
-        /> */}
       <Input
-        className='w-0 grow rounded-lg px-3 bg-white border border-gray-200 shadow-xs'
+        className={cn(isFocus ? 'shadow-xs bg-gray-50 border-gray-300' : 'bg-gray-100 border-gray-100', 'w-0 grow rounded-lg px-3 py-[6px] border')}
         value={url}
         onChange={onUrlChange}
         readOnly={readonly}
         nodesOutputVars={availableVarList}
         onFocusChange={setIsFocus}
+        placeholder={t('workflow.nodes.http.apiPlaceholder')!}
+        placeholderClassName='!leading-[21px]'
       />
     </div >
   )
diff --git a/web/i18n/en-US/workflow.ts b/web/i18n/en-US/workflow.ts
index 01cb5665de..47b0083c89 100644
--- a/web/i18n/en-US/workflow.ts
+++ b/web/i18n/en-US/workflow.ts
@@ -203,6 +203,7 @@ const translation = {
     http: {
       inputVars: 'Input Variables',
       api: 'API',
+      apiPlaceholder: 'Enter URL, type ‘/’ insert variable',
       notStartWithHttp: 'API should start with http:// or https://',
       key: 'Key',
       value: 'Value',
diff --git a/web/i18n/zh-Hans/workflow.ts b/web/i18n/zh-Hans/workflow.ts
index 5063e1a32d..935ccc4042 100644
--- a/web/i18n/zh-Hans/workflow.ts
+++ b/web/i18n/zh-Hans/workflow.ts
@@ -203,6 +203,7 @@ const translation = {
     http: {
       inputVars: '输入变量',
       api: 'API',
+      apiPlaceholder: '输入 URL，输入变量时请键入‘/’',
       notStartWithHttp: 'API 应该以 http:// 或 https:// 开头',
       key: '键',
       value: '值',