feat: struct enabled switch

web/app/components/workflow/hooks/use-workflow-variables.ts

@@ -94,7 +94,7 @@ export const useWorkflowVariableType = () => {
   }) => {
     // debugger
     const node = getNodes().find(n => n.id === nodeId)
-    console.log(nodeId, valueSelector)
+    // console.log(nodeId, valueSelector)
     const isInIteration = !!node?.data.isInIteration
     const iterationNode = isInIteration ? getNodes().find(n => n.id === node.parentId) : null
     const availableNodes = getBeforeNodesInSameBranch(nodeId)

web/app/components/workflow/nodes/_base/components/collapse/field-collapse.tsx

@@ -4,10 +4,12 @@ import Collapse from '.'
 type FieldCollapseProps = {
   title: string
   children: ReactNode
+  operations?: ReactNode
 }
 const FieldCollapse = ({
   title,
   children,
+  operations,
 }: FieldCollapseProps) => {
   return (
     <div className='py-4'>
@@ -15,6 +17,7 @@ const FieldCollapse = ({
         trigger={
           <div className='flex items-center h-6 system-sm-semibold-uppercase text-text-secondary cursor-pointer'>{title}</div>
         }
+        operations={operations}
       >
         <div className='px-4'>
           {children}

web/app/components/workflow/nodes/_base/components/collapse/index.tsx

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react'
 import { useState } from 'react'
 import { RiArrowDropRightLine } from '@remixicon/react'
 import cn from '@/utils/classnames'
@@ -10,6 +11,8 @@ type CollapseProps = {
   children: JSX.Element
   collapsed?: boolean
   onCollapse?: (collapsed: boolean) => void
+  operations?: ReactNode
+
 }
 const Collapse = ({
   disabled,
@@ -17,34 +20,38 @@ const Collapse = ({
   children,
   collapsed,
   onCollapse,
+  operations,
 }: CollapseProps) => {
   const [collapsedLocal, setCollapsedLocal] = useState(true)
   const collapsedMerged = collapsed !== undefined ? collapsed : collapsedLocal
 
   return (
     <>
-      <div
-        className='flex items-center'
-        onClick={() => {
-          if (!disabled) {
-            setCollapsedLocal(!collapsedMerged)
-            onCollapse?.(!collapsedMerged)
-          }
-        }}
-      >
-        <div className='shrink-0 w-4 h-4'>
-          {
-            !disabled && (
-              <RiArrowDropRightLine
-                className={cn(
-                  'w-4 h-4 text-text-tertiary',
-                  !collapsedMerged && 'transform rotate-90',
-                )}
-              />
-            )
-          }
+      <div className='flex justify-between items-center'>
+        <div
+          className='flex items-center'
+          onClick={() => {
+            if (!disabled) {
+              setCollapsedLocal(!collapsedMerged)
+              onCollapse?.(!collapsedMerged)
+            }
+          }}
+        >
+          <div className='shrink-0 w-4 h-4'>
+            {
+              !disabled && (
+                <RiArrowDropRightLine
+                  className={cn(
+                    'w-4 h-4 text-text-tertiary',
+                    !collapsedMerged && 'transform rotate-90',
+                  )}
+                />
+              )
+            }
+          </div>
+          {trigger}
         </div>
-        {trigger}
+        {operations}
       </div>
       {
         !collapsedMerged && children

web/app/components/workflow/nodes/_base/components/output-vars.tsx

@@ -8,15 +8,20 @@ type Props = {
   className?: string
   title?: string
   children: ReactNode
+  operations?: ReactNode
 }
 
 const OutputVars: FC<Props> = ({
   title,
   children,
+  operations,
 }) => {
   const { t } = useTranslation()
   return (
-    <FieldCollapse title={title || t('workflow.nodes.common.outputVars')}>
+    <FieldCollapse
+      title={title || t('workflow.nodes.common.outputVars')}
+      operations={operations}
+    >
       {children}
     </FieldCollapse>
   )
@@ -40,9 +45,11 @@ export const VarItem: FC<VarItemProps> = ({
 }) => {
   return (
     <div className='py-1'>
-      <div className='flex leading-[18px] items-center'>
-        <div className='code-sm-semibold text-text-secondary'>{name}</div>
-        <div className='ml-2 system-xs-regular text-text-tertiary'>{type}</div>
+      <div className='flex justify-between'>
+        <div className='flex leading-[18px] items-center'>
+          <div className='code-sm-semibold text-text-secondary'>{name}</div>
+          <div className='ml-2 system-xs-regular text-text-tertiary'>{type}</div>
+        </div>
       </div>
       <div className='mt-0.5 system-xs-regular text-text-tertiary'>
         {description}

web/app/components/workflow/nodes/llm/components/structure-output.tsx

@@ -7,13 +7,16 @@ import type { SchemaRoot, StructuredOutput } from '../types'
 import ShowPanel from '@/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/show'
 import { useBoolean } from 'ahooks'
 import JsonSchemaConfigModal from './json-schema-config-modal'
+import cn from '@/utils/classnames'
 
 type Props = {
+  className?: string
   value?: StructuredOutput
   onChange: (value: StructuredOutput) => void,
 }
 
 const StructureOutput: FC<Props> = ({
+  className,
   value,
   onChange,
 }) => {
@@ -28,13 +31,18 @@ const StructureOutput: FC<Props> = ({
     })
   }, [onChange])
   return (
-    <div>
+    <div className={cn(className)}>
       <div className='flex justify-between'>
         <div className='flex leading-[18px] items-center'>
           <div className='code-sm-semibold text-text-secondary'>structured_output</div>
           <div className='ml-2 system-xs-regular text-text-tertiary'>object</div>
         </div>
-        <Button className='flex' variant='secondary' onClick={showConfigModal}>
+        <Button
+          size='small'
+          variant='secondary'
+          className='flex'
+          onClick={showConfigModal}
+        >
           <RiEditLine className='size-3.5 mr-1' />
           <div className='system-xs-medium text-components-button-secondary-text'>Configure</div>
         </Button>
@@ -43,7 +51,7 @@ const StructureOutput: FC<Props> = ({
         <ShowPanel
           payload={value}
         />) : (
-        <div className='flex items-center h-10 justify-center rounded-[10px] bg-background-section system-xs-regular text-text-tertiary'>no data</div>
+        <div className='mt-1.5 flex items-center h-10 justify-center rounded-[10px] bg-background-section system-xs-regular text-text-tertiary'>no data</div>
       )}
 
       {showConfig && (

web/app/components/workflow/nodes/llm/panel.tsx

@@ -21,6 +21,7 @@ import ResultPanel from '@/app/components/workflow/run/result-panel'
 import Tooltip from '@/app/components/base/tooltip'
 import Editor from '@/app/components/workflow/nodes/_base/components/prompt/editor'
 import StructureOutput from './components/structure-output'
+import Switch from '@/app/components/base/switch'
 
 const i18nPrefix = 'workflow.nodes.llm'
 
@@ -65,6 +66,7 @@ const Panel: FC<NodePanelProps<LLMNodeType>> = ({
     contexts,
     setContexts,
     runningStatus,
+    handleStructureOutputEnableChange,
     handleStructureOutputChange,
     handleRun,
     handleStop,
@@ -274,17 +276,34 @@ const Panel: FC<NodePanelProps<LLMNodeType>> = ({
         />
       </div>
       <Split />
-      <OutputVars>
+      <OutputVars
+        operations={
+          <div className='mr-4'>
+            <Switch
+              defaultValue={!!inputs.structured_output_enabled}
+              onChange={handleStructureOutputEnableChange}
+              size='md'
+              disabled={readOnly}
+            />
+          </div>
+        }
+      >
         <>
           <VarItem
             name='text'
             type='string'
             description={t(`${i18nPrefix}.outputVars.output`)}
           />
-          <StructureOutput
-            value={inputs.structured_output}
-            onChange={handleStructureOutputChange}
-          />
+          {inputs.structured_output_enabled && (
+            <>
+              <Split className='mt-3' />
+              <StructureOutput
+                className='mt-4'
+                value={inputs.structured_output}
+                onChange={handleStructureOutputChange}
+              />
+            </>
+          )}
         </>
       </OutputVars>
       {isShowSingleRun && (

web/app/components/workflow/nodes/llm/use-config.ts

@@ -277,6 +277,13 @@ const useConfig = (id: string, payload: LLMNodeType) => {
     setInputs(newInputs)
   }, [inputs, setInputs])
 
+  const handleStructureOutputEnableChange = useCallback((enabled: boolean) => {
+    const newInputs = produce(inputs, (draft) => {
+      draft.structured_output_enabled = enabled
+    })
+    setInputs(newInputs)
+  }, [inputs, setInputs])
+
   const handleStructureOutputChange = useCallback((newOutput: StructuredOutput) => {
     const newInputs = produce(inputs, (draft) => {
       draft.structured_output = newOutput
@@ -416,6 +423,7 @@ const useConfig = (id: string, payload: LLMNodeType) => {
     varInputs,
     runningStatus,
     handleStructureOutputChange,
+    handleStructureOutputEnableChange,
     handleRun,
     handleStop,
     runResult,