'use client'
|
import Button from '@/app/components/base/button'
|
import { RiEditLine } from '@remixicon/react'
|
import type { FC } from 'react'
|
import React, { useCallback } from 'react'
|
import { type SchemaRoot, type StructuredOutput, Type } 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'
|
import { useTranslation } from 'react-i18next'
|
|
type Props = {
|
className?: string
|
value?: StructuredOutput
|
onChange: (value: StructuredOutput) => void,
|
}
|
|
const StructureOutput: FC<Props> = ({
|
className,
|
value,
|
onChange,
|
}) => {
|
const { t } = useTranslation()
|
const [showConfig, {
|
setTrue: showConfigModal,
|
setFalse: hideConfigModal,
|
}] = useBoolean(false)
|
|
const handleChange = useCallback((value: SchemaRoot) => {
|
onChange({
|
schema: value,
|
})
|
}, [onChange])
|
return (
|
<div className={cn(className)}>
|
<div className='flex justify-between'>
|
<div className='flex items-center leading-[18px]'>
|
<div className='code-sm-semibold text-text-secondary'>structured_output</div>
|
<div className='system-xs-regular ml-2 text-text-tertiary'>object</div>
|
</div>
|
<Button
|
size='small'
|
variant='secondary'
|
className='flex'
|
onClick={showConfigModal}
|
>
|
<RiEditLine className='mr-1 size-3.5' />
|
<div className='system-xs-medium text-components-button-secondary-text'>{t('app.structOutput.configure')}</div>
|
</Button>
|
</div>
|
{(value?.schema && value.schema.properties && Object.keys(value.schema.properties).length > 0) ? (
|
<ShowPanel
|
payload={value}
|
/>) : (
|
<div className='system-xs-regular mt-1.5 flex h-10 cursor-pointer items-center justify-center rounded-[10px] bg-background-section text-text-tertiary' onClick={showConfigModal}>{t('app.structOutput.notConfiguredTip')}</div>
|
)}
|
|
{showConfig && (
|
<JsonSchemaConfigModal
|
isShow
|
defaultSchema={(value?.schema || {
|
type: Type.object,
|
properties: {},
|
required: [],
|
additionalProperties: false,
|
}) as any} // wait for types change
|
onSave={handleChange as any} // wait for types change
|
onClose={hideConfigModal}
|
/>
|
)}
|
</div>
|
)
|
}
|
export default React.memo(StructureOutput)
|
