From 0031a3b58ba394a5f3f506a2702ff1631a866a79 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Mon, 10 Mar 2025 16:16:25 +0800
Subject: [PATCH] feat: handle tiny ui and required

---
 .../object-child-tree-panel/show/field.tsx    | 11 +++++++--
 .../object-child-tree-panel/show/index.tsx    | 23 +++++++++++--------
 web/i18n/en-US/app.ts                         |  1 +
 web/i18n/zh-Hans/app.ts                       |  1 +
 4 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/show/field.tsx b/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/show/field.tsx
index 0114b44271..9915f8248e 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/show/field.tsx
+++ b/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>
diff --git a/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/show/index.tsx b/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/show/index.tsx
index 82748e0ff7..def806d73a 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/show/index.tsx
+++ b/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 fieldNames = Object.keys(schema.properties)
+  const { t } = useTranslation()
+  const schema = {
+    ...payload,
+    schema: {
+      ...payload.schema,
+      description: t('app.structOutput.LLMResponse'),
+    },
+  }
   return (
     <div>
-      {fieldNames.map(name => (
-        <Field
-          key={name}
-          name={name}
-          payload={schema.properties[name]}
-        />
-      ))}
+      <Field
+        name={'response'}
+        payload={schema.schema}
+        required
+      />
     </div>
   )
 }
diff --git a/web/i18n/en-US/app.ts b/web/i18n/en-US/app.ts
index 87e282c6a3..089dd2888b 100644
--- a/web/i18n/en-US/app.ts
+++ b/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',
   },
 }
 
diff --git a/web/i18n/zh-Hans/app.ts b/web/i18n/zh-Hans/app.ts
index 747fccc432..4b51f1a736 100644
--- a/web/i18n/zh-Hans/app.ts
+++ b/web/i18n/zh-Hans/app.ts
@@ -184,6 +184,7 @@ const translation = {
   structOutput: {
     moreFillTip: '最多显示 10 级嵌套',
     required: '必填',
+    LLMResponse: 'LLM 的响应',
   },
 }