feat: output vars

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

+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import cn from 'classnames'
+
+type Props = {
+  className?: string
+  children: JSX.Element
+}
+
+const OutputVars: FC<Props> = ({
+  className,
+  children,
+}) => {
+  const { t } = useTranslation()
+
+  return (
+    <div>
+      <div className={cn(className, 'leading-[18px] text-[13px] font-semibold text-gray-700 uppercase')}>
+        {t('workflow.nodes.common.outputVars')}
+      </div>
+      <div className='mt-2 space-y-1'>
+        {children}
+      </div>
+    </div>
+  )
+}
+type VarItemProps = {
+  name: string
+  type: string
+  description: string
+}
+
+export const VarItem: FC<VarItemProps> = ({
+  name,
+  type,
+  description,
+}) => {
+  return (
+    <div className='py-1'>
+      <div className='flex leading-[18px]'>
+        <div className='text-[13px] font-medium text-gray-900'>{name}</div>
+        <div className='ml-2 text-xs font-normal text-gray-500 capitalize'>{type}</div>
+      </div>
+      <div className='mt-0.5 leading-[18px] text-xs font-normal text-gray-600'>{description}</div>
+    </div>
+  )
+}
+export default React.memo(OutputVars)

web/app/components/workflow/nodes/_base/components/variable/var-reference-popup.tsx

@@ -47,7 +47,7 @@ const Item: FC<ItemProps> = ({
         <Variable02 className='shrink-0 w-3.5 h-3.5 text-primary-500' />
         <div className='ml-1 w-0 grow text-ellipsis text-[13px] font-normal text-gray-900'>{itemData.variable}</div>
       </div>
-      <div className='ml-1 shrink-0 text-xs font-normal text-gray-500'>{itemData.type}</div>
+      <div className='ml-1 shrink-0 text-xs font-normal text-gray-500 capitalize'>{itemData.type}</div>
       {isObj && (
         <ChevronRight className='ml-0.5 w-3 h-3 text-gray-500' />
       )}

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

@@ -8,6 +8,7 @@ import AddButton from '@/app/components/base/button/add-button'
 import Split from '@/app/components/workflow/nodes/_base/components/split'
 import ModelParameterModal from '@/app/components/header/account-setting/model-provider-page/model-parameter-modal'
 import Switch from '@/app/components/base/switch'
+import OutputVars, { VarItem } from '@/app/components/workflow/nodes/_base/components/output-vars'
 
 const i18nPrefix = 'workflow.nodes.llm'
 
@@ -94,6 +95,21 @@ const Panel: FC = () => {
         >
           Functions
         </Field> */}
+
+      <OutputVars>
+        <>
+          <VarItem
+            name='output'
+            type='string'
+            description={t(`${i18nPrefix}.outputVars.output`)}
+          />
+          <VarItem
+            name='usage'
+            type='object'
+            description={t(`${i18nPrefix}.outputVars.usage`)}
+          />
+        </>
+      </OutputVars>
     </div>
   )
 }

web/i18n/lang/workflow.en.ts

 const translation = {
   nodes: {
+    common: {
+      outputVars: 'Output Variables',
+    },
     llm: {
       model: 'model',
       variables: 'variables',
       context: 'context',
       prompt: 'prompt',
       vision: 'vision',
+      outputVars: {
+        output: 'Generate content',
+        usage: 'Model Usage Information',
+      },
     },
   },
 }