From e250f5aab24799b61ae94233b2acf90cc812b409 Mon Sep 17 00:00:00 2001
From: twwu <twwu@dify.ai>
Date: Thu, 27 Mar 2025 14:39:25 +0800
Subject: [PATCH] feat: implement AutoWidthInput component for dynamic input
 sizing in visual editor

---
 .../visual-editor/card.tsx                    |  4 +-
 .../edit-card/auto-width-input.tsx            | 81 +++++++++++++++++++
 .../visual-editor/edit-card/index.tsx         | 11 ++-
 web/app/dev-preview/page.tsx                  |  3 -
 4 files changed, 88 insertions(+), 11 deletions(-)
 create mode 100644 web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/auto-width-input.tsx

diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/card.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/card.tsx
index bdfc2a53fc..4f53f6b163 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/card.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/card.tsx
@@ -18,8 +18,8 @@ const Card: FC<CardProps> = ({
 
   return (
     <div className='flex flex-col py-0.5'>
-      <div className='flex items-center gap-x-1 p-0.5 pl-1'>
-        <div className='system-sm-semibold truncate px-1 py-0.5 text-text-primary'>
+      <div className='flex h-6 items-center gap-x-1 pl-1 pr-0.5'>
+        <div className='system-sm-semibold truncate border border-transparent px-1 py-px text-text-primary'>
           {name}
         </div>
         <div className='system-xs-medium px-1 py-0.5 text-text-tertiary'>
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/auto-width-input.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/auto-width-input.tsx
new file mode 100644
index 0000000000..af4a82c772
--- /dev/null
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/auto-width-input.tsx
@@ -0,0 +1,81 @@
+import React, { useEffect, useState } from 'react'
+import type { FC } from 'react'
+import cn from '@/utils/classnames'
+
+type AutoWidthInputProps = {
+  value: string
+  placeholder: string
+  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void
+  onBlur: () => void
+  minWidth?: number
+  maxWidth?: number
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'>
+
+const AutoWidthInput: FC<AutoWidthInputProps> = ({
+  value,
+  placeholder,
+  onChange,
+  onBlur,
+  minWidth = 60,
+  maxWidth = 300,
+  className,
+  ...props
+}) => {
+  const [width, setWidth] = useState(minWidth)
+  const textRef = React.useRef<HTMLSpanElement>(null)
+
+  useEffect(() => {
+    if (textRef.current) {
+      textRef.current.textContent = value || placeholder
+      const textWidth = textRef.current.offsetWidth
+      const newWidth = Math.max(minWidth, Math.min(textWidth + 16, maxWidth))
+      if (width !== newWidth)
+        setWidth(newWidth)
+    }
+  }, [value, placeholder, minWidth, maxWidth, width])
+
+  // Handle Enter key
+  const handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter' && e.currentTarget.blur)
+      e.currentTarget.blur()
+    if (props.onKeyUp)
+      props.onKeyUp(e)
+  }
+
+  return (
+    <div className='relative inline-flex items-center'>
+      {/* Hidden measurement span */}
+      <span
+        ref={textRef}
+        className='system-sm-semibold invisible absolute left-0 top-0 -z-10 whitespace-pre px-1'
+        aria-hidden="true"
+      >
+        {value || placeholder}
+      </span>
+
+      {/* Actual input element */}
+      <input
+        value={value}
+        className={cn(
+          'system-sm-semibold placeholder:system-sm-semibold h-5 rounded-[5px] border border-transparent px-1',
+          'py-px text-text-primary caret-[#295EFF] shadow-shadow-shadow-3 outline-none',
+          'placeholder:text-text-placeholder hover:bg-state-base-hover focus:border-components-input-border-active focus:bg-components-input-bg-active focus:shadow-xs',
+          className,
+        )}
+        style={{
+          width: `${width}px`,
+          minWidth: `${minWidth}px`,
+          maxWidth: `${maxWidth}px`,
+          transition: 'width 100ms ease-out',
+        }}
+        placeholder={placeholder}
+        onChange={onChange}
+        onBlur={onBlur}
+        onKeyUp={handleKeyUp}
+        {...props}
+      />
+    </div>
+  )
+}
+
+export default React.memo(AutoWidthInput)
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/index.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/index.tsx
index e162ca0c6c..7425facb79 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/index.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/index.tsx
@@ -14,6 +14,7 @@ import { useVisualEditorStore } from '../store'
 import { useMittContext } from '../context'
 import { useUnmount } from 'ahooks'
 import { JSON_SCHEMA_MAX_DEPTH } from '@/config'
+import AutoWidthInput from './auto-width-input'
 
 export type EditData = {
   name: string
@@ -192,17 +193,15 @@ const EditCard: FC<EditCardProps> = ({
 
   return (
     <div className='flex flex-col rounded-lg bg-components-panel-bg py-0.5 shadow-sm shadow-shadow-shadow-4'>
-      <div className='flex items-center pl-1 pr-0.5'>
+      <div className='flex h-6 items-center pl-1 pr-0.5'>
         <div className='flex grow items-center gap-x-1'>
-          <input
+          <AutoWidthInput
             value={currentFields.name}
-            className='system-sm-semibold placeholder:system-sm-semibold h-5 max-w-20 rounded-[5px] border border-transparent px-1
-              py-0.5 text-text-primary caret-[#295EFF] shadow-shadow-shadow-3 outline-none
-              placeholder:text-text-placeholder hover:bg-state-base-hover focus:border-components-input-border-active focus:bg-components-input-bg-active focus:shadow-xs'
             placeholder={t('workflow.nodes.llm.jsonSchema.fieldNamePlaceholder')}
+            minWidth={80}
+            maxWidth={300}
             onChange={handlePropertyNameChange}
             onBlur={handlePropertyNameBlur}
-            onKeyUp={e => e.key === 'Enter' && e.currentTarget.blur()}
           />
           <TypeSelector
             currentValue={currentFields.type}
diff --git a/web/app/dev-preview/page.tsx b/web/app/dev-preview/page.tsx
index 61877f7cbf..6749653953 100644
--- a/web/app/dev-preview/page.tsx
+++ b/web/app/dev-preview/page.tsx
@@ -48,9 +48,6 @@ export default function Page() {
           ],
         },
       },
-      completed: {
-        type: Type.boolean,
-      },
     },
     required: [
       'userId',