Feat/web workflow improvements (#27981)

Co-authored-by: crazywoola <100913391+crazywoola@users.noreply.github.com>
Co-authored-by: johnny0120 <johnny0120@users.noreply.github.com>
Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
Co-authored-by: Wood <tuiskuwood@outlook.com>

web/app/components/app/configuration/config-var/config-modal/index.tsx

@@ -109,6 +109,13 @@ const ConfigModal: FC<IConfigModalProps> = ({
           [key]: value,
         }
 
+        // Clear default value if modified options no longer include current default
+        if (key === 'options' && prev.default) {
+          const optionsArray = Array.isArray(value) ? value : []
+          if (!optionsArray.includes(prev.default))
+            newPayload.default = undefined
+        }
+
         return newPayload
       })
     }

web/app/components/app/configuration/config-var/config-select/index.tsx

@@ -71,6 +71,7 @@ const ConfigSelect: FC<IConfigSelectProps> = ({
                   className='absolute right-1.5 top-1/2 block translate-y-[-50%] cursor-pointer rounded-md p-1 text-text-tertiary hover:bg-state-destructive-hover hover:text-text-destructive'
                   onClick={() => {
                     onChange(options.filter((_, i) => index !== i))
+                    setDeletingID(null)
                   }}
                   onMouseEnter={() => setDeletingID(index)}
                   onMouseLeave={() => setDeletingID(null)}

web/app/components/app/configuration/debug/chat-user-input.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import ConfigContext from '@/context/debug-configuration'
@@ -32,6 +32,24 @@ const ChatUserInput = ({
     return obj
   })()
 
+  // Initialize inputs with default values from promptVariables
+  useEffect(() => {
+    const newInputs = { ...inputs }
+    let hasChanges = false
+
+    promptVariables.forEach((variable) => {
+      const { key, default: defaultValue } = variable
+      // Only set default value if the field is empty and a default exists
+      if (defaultValue !== undefined && defaultValue !== null && defaultValue !== '' && (inputs[key] === undefined || inputs[key] === null || inputs[key] === '')) {
+        newInputs[key] = defaultValue
+        hasChanges = true
+      }
+    })
+
+    if (hasChanges)
+      setInputs(newInputs)
+  }, [promptVariables, inputs, setInputs])
+
   const handleInputValueChange = (key: string, value: string | boolean) => {
     if (!(key in promptVariableObj))
       return

web/app/components/app/configuration/prompt-value-panel/index.tsx

@@ -1,6 +1,6 @@
 'use client'
 import type { FC } from 'react'
-import React, { useMemo, useState } from 'react'
+import React, { useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import {
@@ -54,6 +54,24 @@ const PromptValuePanel: FC<IPromptValuePanelProps> = ({
     return obj
   }, [promptVariables])
 
+  // Initialize inputs with default values from promptVariables
+  useEffect(() => {
+    const newInputs = { ...inputs }
+    let hasChanges = false
+
+    promptVariables.forEach((variable) => {
+      const { key, default: defaultValue } = variable
+      // Only set default value if the field is empty and a default exists
+      if (defaultValue !== undefined && defaultValue !== null && defaultValue !== '' && (inputs[key] === undefined || inputs[key] === null || inputs[key] === '')) {
+        newInputs[key] = defaultValue
+        hasChanges = true
+      }
+    })
+
+    if (hasChanges)
+      setInputs(newInputs)
+  }, [promptVariables, inputs, setInputs])
+
   const canNotRun = useMemo(() => {
     if (mode !== AppModeEnum.COMPLETION)
       return true