feat: handle tiny ui and required

web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/show/field.tsx

@@ -10,12 +10,18 @@ import { useTranslation } from 'react-i18next'
 import { useBoolean } from 'ahooks'
 import { RiArrowDropDownLine } from '@remixicon/react'
 
-type Props = { name: string, payload: FieldType, depth?: number }
+type Props = {
+  name: string,
+  payload: FieldType,
+  required: boolean,
+  depth?: number,
+}
 
 const Field: FC<Props> = ({
   name,
   payload,
   depth = 1,
+  required,
 }) => {
   const { t } = useTranslation()
   const hasChildren = payload.type === Type.object && payload.properties
@@ -36,7 +42,7 @@ const Field: FC<Props> = ({
             )}
             <div className='h-6 truncate system-sm-medium text-text-secondary leading-6'>{name}</div>
             <div className='ml-3 shrink-0 system-xs-regular text-text-tertiary leading-6'>{getFieldType(payload)}</div>
-            <div className='ml-3 text-text-warning system-2xs-medium-uppercase leading-6'>{t('app.structOutput.required')}</div>
+            {required && <div className='ml-3 text-text-warning system-2xs-medium-uppercase leading-6'>{t('app.structOutput.required')}</div>}
           </div>
           {payload.description && (
             <div className='flex'>
@@ -54,6 +60,7 @@ const Field: FC<Props> = ({
               name={name}
               payload={payload.properties?.[name] as FieldType}
               depth={depth + 1}
+              required={!!payload.required?.includes(name)}
             />
           ))}
         </div>

web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/show/index.tsx

@@ -3,6 +3,7 @@ import type { FC } from 'react'
 import React from 'react'
 import type { StructuredOutput } from '../../../../../llm/types'
 import Field from './field'
+import { useTranslation } from 'react-i18next'
 
 type Props = {
   payload: StructuredOutput
@@ -11,17 +12,21 @@ type Props = {
 const ShowPanel: FC<Props> = ({
   payload,
 }) => {
-  const schema = payload.schema
+  const { t } = useTranslation()
-  const fieldNames = Object.keys(schema.properties)
+  const schema = {
+    ...payload,
+    schema: {
+      ...payload.schema,
+      description: t('app.structOutput.LLMResponse'),
+    },
+  }
   return (
     <div>
-      {fieldNames.map(name => (
+      <Field
-        <Field
+        name={'response'}
-          key={name}
+        payload={schema.schema}
-          name={name}
+        required
-          payload={schema.properties[name]}
+      />
-        />
-      ))}
     </div>
   )
 }

web/i18n/en-US/app.ts

@@ -183,6 +183,7 @@ const translation = {
   structOutput: {
     moreFillTip: 'Showing max 10 levels of nesting',
     required: 'Required',
+    LLMResponse: 'LLM Response',
   },
 }
 

web/i18n/zh-Hans/app.ts

@@ -184,6 +184,7 @@ const translation = {
   structOutput: {
     moreFillTip: '最多显示 10 级嵌套',
     required: '必填',
+    LLMResponse: 'LLM 的响应',
   },
 }