From b73f05fdf070275f6d39fe417a74e8794074f686 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Wed, 7 Aug 2024 16:42:48 +0800
Subject: [PATCH] new style of textarea

---
 web/app/components/base/textarea/index.tsx    | 54 +++++++++++++++++++
 .../components/before-run-form/form-item.tsx  |  6 +--
 2 files changed, 57 insertions(+), 3 deletions(-)
 create mode 100644 web/app/components/base/textarea/index.tsx

diff --git a/web/app/components/base/textarea/index.tsx b/web/app/components/base/textarea/index.tsx
new file mode 100644
index 0000000000..c5ee1304d8
--- /dev/null
+++ b/web/app/components/base/textarea/index.tsx
@@ -0,0 +1,54 @@
+import type { CSSProperties } from 'react'
+import React from 'react'
+import { type VariantProps, cva } from 'class-variance-authority'
+import cn from '@/utils/classnames'
+
+const textareaVariants = cva(
+  '',
+  {
+    variants: {
+      size: {
+        regular: 'px-3 radius-md system-sm-regular',
+        large: 'px-4 radius-lg system-md-regular',
+      },
+    },
+    defaultVariants: {
+      size: 'regular',
+    },
+  },
+)
+
+export type TextareaProps = {
+  value: string
+  onChange: (value: string) => void
+  disabled?: boolean
+  destructive?: boolean
+  styleCss?: CSSProperties
+} & React.TextareaHTMLAttributes<HTMLTextAreaElement> & VariantProps<typeof textareaVariants>
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, value, onChange, disabled, size, destructive, styleCss, ...props }, ref) => {
+    return (
+      <textarea
+        ref={ref}
+        style={styleCss}
+        className={cn(
+          'w-full min-h-20 p-2 bg-components-input-bg-normal border border-transparent text-components-input-text-filled hover:bg-components-input-bg-hover hover:border-components-input-border-hover focus:bg-components-input-bg-active focus:border-components-input-border-active focus:shadow-xs placeholder:text-components-input-text-placeholder appearance-none outline-none caret-primary-600',
+          textareaVariants({ size }),
+          disabled && 'bg-components-input-bg-disabled border-transparent text-components-input-text-filled-disabled cursor-not-allowed hover:bg-components-input-bg-disabled hover:border-transparent',
+          destructive && 'bg-components-input-bg-destructive border-components-input-border-destructive text-components-input-text-filled hover:bg-components-input-bg-destructive hover:border-components-input-border-destructive focus:bg-components-input-bg-destructive focus:border-components-input-border-destructive',
+          className,
+        )}
+        value={value}
+        onChange={e => onChange(e.target.value)}
+        disabled={disabled}
+        {...props}
+      >
+      </textarea>
+    )
+  },
+)
+Textarea.displayName = 'Textarea'
+
+export default Textarea
+export { Textarea, textareaVariants }
diff --git a/web/app/components/workflow/nodes/_base/components/before-run-form/form-item.tsx b/web/app/components/workflow/nodes/_base/components/before-run-form/form-item.tsx
index 2a66f2a59a..41d78b8e33 100644
--- a/web/app/components/workflow/nodes/_base/components/before-run-form/form-item.tsx
+++ b/web/app/components/workflow/nodes/_base/components/before-run-form/form-item.tsx
@@ -12,6 +12,7 @@ import CodeEditor from '../editor/code-editor'
 import { CodeLanguage } from '../../../code/types'
 import TextEditor from '../editor/text-editor'
 import Select from '@/app/components/base/select'
+import Textarea from '@/app/components/base/textarea'
 import TextGenerationImageUploader from '@/app/components/base/image-uploader/text-generation-image-uploader'
 import { Resolution } from '@/types/app'
 import { useFeatures } from '@/app/components/base/features/hooks'
@@ -116,10 +117,9 @@ const FormItem: FC<Props> = ({
 
         {
           type === InputVarType.paragraph && (
-            <textarea
-              className="w-full px-3 py-1 text-sm leading-[18px] text-gray-900 border-0 rounded-lg grow h-[120px] bg-gray-50 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
+            <Textarea
               value={value || ''}
-              onChange={e => onChange(e.target.value)}
+              onChange={onChange}
               placeholder={t('appDebug.variableConig.inputPlaceholder')!}
               autoFocus={autoFocus}
             />