Merge branch 'main' into feat/rag-pipeline
commit
ac68d62d1c
@ -0,0 +1,24 @@
|
||||
from enum import StrEnum
|
||||
|
||||
|
||||
class ResponseFormat(StrEnum):
|
||||
"""Constants for model response formats"""
|
||||
|
||||
JSON_SCHEMA = "json_schema" # model's structured output mode. some model like gemini, gpt-4o, support this mode.
|
||||
JSON = "JSON" # model's json mode. some model like claude support this mode.
|
||||
JSON_OBJECT = "json_object" # json mode's another alias. some model like deepseek-chat, qwen use this alias.
|
||||
|
||||
|
||||
class SpecialModelType(StrEnum):
|
||||
"""Constants for identifying model types"""
|
||||
|
||||
GEMINI = "gemini"
|
||||
OLLAMA = "ollama"
|
||||
|
||||
|
||||
class SupportStructuredOutputStatus(StrEnum):
|
||||
"""Constants for structured output support status"""
|
||||
|
||||
SUPPORTED = "supported"
|
||||
UNSUPPORTED = "unsupported"
|
||||
DISABLED = "disabled"
|
||||
@ -0,0 +1,82 @@
|
||||
import { fireEvent, render, screen } from '@testing-library/react'
|
||||
import ConfigSelect from './index'
|
||||
|
||||
jest.mock('react-sortablejs', () => ({
|
||||
ReactSortable: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
|
||||
}))
|
||||
|
||||
jest.mock('react-i18next', () => ({
|
||||
useTranslation: () => ({
|
||||
t: (key: string) => key,
|
||||
}),
|
||||
}))
|
||||
|
||||
describe('ConfigSelect Component', () => {
|
||||
const defaultProps = {
|
||||
options: ['Option 1', 'Option 2'],
|
||||
onChange: jest.fn(),
|
||||
}
|
||||
|
||||
afterEach(() => {
|
||||
jest.clearAllMocks()
|
||||
})
|
||||
|
||||
it('renders all options', () => {
|
||||
render(<ConfigSelect {...defaultProps} />)
|
||||
|
||||
defaultProps.options.forEach((option) => {
|
||||
expect(screen.getByDisplayValue(option)).toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
|
||||
it('renders add button', () => {
|
||||
render(<ConfigSelect {...defaultProps} />)
|
||||
|
||||
expect(screen.getByText('appDebug.variableConfig.addOption')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('handles option deletion', () => {
|
||||
render(<ConfigSelect {...defaultProps} />)
|
||||
const optionContainer = screen.getByDisplayValue('Option 1').closest('div')
|
||||
const deleteButton = optionContainer?.querySelector('div[role="button"]')
|
||||
|
||||
if (!deleteButton) return
|
||||
fireEvent.click(deleteButton)
|
||||
expect(defaultProps.onChange).toHaveBeenCalledWith(['Option 2'])
|
||||
})
|
||||
|
||||
it('handles adding new option', () => {
|
||||
render(<ConfigSelect {...defaultProps} />)
|
||||
const addButton = screen.getByText('appDebug.variableConfig.addOption')
|
||||
|
||||
fireEvent.click(addButton)
|
||||
|
||||
expect(defaultProps.onChange).toHaveBeenCalledWith([...defaultProps.options, ''])
|
||||
})
|
||||
|
||||
it('applies focus styles on input focus', () => {
|
||||
render(<ConfigSelect {...defaultProps} />)
|
||||
const firstInput = screen.getByDisplayValue('Option 1')
|
||||
|
||||
fireEvent.focus(firstInput)
|
||||
|
||||
expect(firstInput.closest('div')).toHaveClass('border-components-input-border-active')
|
||||
})
|
||||
|
||||
it('applies delete hover styles', () => {
|
||||
render(<ConfigSelect {...defaultProps} />)
|
||||
const optionContainer = screen.getByDisplayValue('Option 1').closest('div')
|
||||
const deleteButton = optionContainer?.querySelector('div[role="button"]')
|
||||
|
||||
if (!deleteButton) return
|
||||
fireEvent.mouseEnter(deleteButton)
|
||||
expect(optionContainer).toHaveClass('border-components-input-border-destructive')
|
||||
})
|
||||
|
||||
it('renders empty state correctly', () => {
|
||||
render(<ConfigSelect options={[]} onChange={defaultProps.onChange} />)
|
||||
|
||||
expect(screen.queryByRole('textbox')).not.toBeInTheDocument()
|
||||
expect(screen.getByText('appDebug.variableConfig.addOption')).toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
@ -0,0 +1,67 @@
|
||||
import { fireEvent, render, screen } from '@testing-library/react'
|
||||
import Checkbox from './index'
|
||||
|
||||
describe('Checkbox Component', () => {
|
||||
const mockProps = {
|
||||
id: 'test',
|
||||
}
|
||||
|
||||
it('renders unchecked checkbox by default', () => {
|
||||
render(<Checkbox {...mockProps} />)
|
||||
const checkbox = screen.getByTestId('checkbox-test')
|
||||
expect(checkbox).toBeInTheDocument()
|
||||
expect(checkbox).not.toHaveClass('bg-components-checkbox-bg')
|
||||
})
|
||||
|
||||
it('renders checked checkbox when checked prop is true', () => {
|
||||
render(<Checkbox {...mockProps} checked />)
|
||||
const checkbox = screen.getByTestId('checkbox-test')
|
||||
expect(checkbox).toHaveClass('bg-components-checkbox-bg')
|
||||
expect(screen.getByTestId('check-icon-test')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('renders indeterminate state correctly', () => {
|
||||
render(<Checkbox {...mockProps} indeterminate />)
|
||||
expect(screen.getByTestId('indeterminate-icon')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('handles click events when not disabled', () => {
|
||||
const onCheck = jest.fn()
|
||||
render(<Checkbox {...mockProps} onCheck={onCheck} />)
|
||||
const checkbox = screen.getByTestId('checkbox-test')
|
||||
|
||||
fireEvent.click(checkbox)
|
||||
expect(onCheck).toHaveBeenCalledTimes(1)
|
||||
})
|
||||
|
||||
it('does not handle click events when disabled', () => {
|
||||
const onCheck = jest.fn()
|
||||
render(<Checkbox {...mockProps} disabled onCheck={onCheck} />)
|
||||
const checkbox = screen.getByTestId('checkbox-test')
|
||||
|
||||
fireEvent.click(checkbox)
|
||||
expect(onCheck).not.toHaveBeenCalled()
|
||||
expect(checkbox).toHaveClass('cursor-not-allowed')
|
||||
})
|
||||
|
||||
it('applies custom className when provided', () => {
|
||||
const customClass = 'custom-class'
|
||||
render(<Checkbox {...mockProps} className={customClass} />)
|
||||
const checkbox = screen.getByTestId('checkbox-test')
|
||||
expect(checkbox).toHaveClass(customClass)
|
||||
})
|
||||
|
||||
it('applies correct styles for disabled checked state', () => {
|
||||
render(<Checkbox {...mockProps} checked disabled />)
|
||||
const checkbox = screen.getByTestId('checkbox-test')
|
||||
expect(checkbox).toHaveClass('bg-components-checkbox-bg-disabled-checked')
|
||||
expect(checkbox).toHaveClass('cursor-not-allowed')
|
||||
})
|
||||
|
||||
it('applies correct styles for disabled unchecked state', () => {
|
||||
render(<Checkbox {...mockProps} disabled />)
|
||||
const checkbox = screen.getByTestId('checkbox-test')
|
||||
expect(checkbox).toHaveClass('bg-components-checkbox-bg-disabled')
|
||||
expect(checkbox).toHaveClass('cursor-not-allowed')
|
||||
})
|
||||
})
|
||||
@ -0,0 +1,53 @@
|
||||
import { fireEvent, render, screen } from '@testing-library/react'
|
||||
import Label from './label'
|
||||
|
||||
jest.mock('react-i18next', () => ({
|
||||
useTranslation: () => ({
|
||||
t: (key: string) => key,
|
||||
}),
|
||||
}))
|
||||
|
||||
describe('Label Component', () => {
|
||||
const defaultProps = {
|
||||
htmlFor: 'test-input',
|
||||
label: 'Test Label',
|
||||
}
|
||||
|
||||
it('renders basic label correctly', () => {
|
||||
render(<Label {...defaultProps} />)
|
||||
const label = screen.getByTestId('label')
|
||||
expect(label).toBeInTheDocument()
|
||||
expect(label).toHaveAttribute('for', 'test-input')
|
||||
})
|
||||
|
||||
it('shows optional text when showOptional is true', () => {
|
||||
render(<Label {...defaultProps} showOptional />)
|
||||
expect(screen.getByText('common.label.optional')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('shows required asterisk when isRequired is true', () => {
|
||||
render(<Label {...defaultProps} isRequired />)
|
||||
expect(screen.getByText('*')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('renders tooltip when tooltip prop is provided', () => {
|
||||
const tooltipText = 'Test Tooltip'
|
||||
render(<Label {...defaultProps} tooltip={tooltipText} />)
|
||||
const trigger = screen.getByTestId('test-input-tooltip')
|
||||
fireEvent.mouseEnter(trigger)
|
||||
expect(screen.getByText(tooltipText)).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('applies custom className when provided', () => {
|
||||
const customClass = 'custom-label'
|
||||
render(<Label {...defaultProps} className={customClass} />)
|
||||
const label = screen.getByTestId('label')
|
||||
expect(label).toHaveClass(customClass)
|
||||
})
|
||||
|
||||
it('does not show optional text and required asterisk simultaneously', () => {
|
||||
render(<Label {...defaultProps} isRequired showOptional />)
|
||||
expect(screen.queryByText('common.label.optional')).not.toBeInTheDocument()
|
||||
expect(screen.getByText('*')).toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
@ -0,0 +1,5 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="arrow-down-round-fill">
|
||||
<path id="Vector" d="M6.02913 6.23572C5.08582 6.23572 4.56482 7.33027 5.15967 8.06239L7.13093 10.4885C7.57922 11.0403 8.42149 11.0403 8.86986 10.4885L10.8411 8.06239C11.4359 7.33027 10.9149 6.23572 9.97158 6.23572H6.02913Z" fill="#101828"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 380 B |
@ -0,0 +1,36 @@
|
||||
{
|
||||
"icon": {
|
||||
"type": "element",
|
||||
"isRootNode": true,
|
||||
"name": "svg",
|
||||
"attributes": {
|
||||
"width": "16",
|
||||
"height": "16",
|
||||
"viewBox": "0 0 16 16",
|
||||
"fill": "none",
|
||||
"xmlns": "http://www.w3.org/2000/svg"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"type": "element",
|
||||
"name": "g",
|
||||
"attributes": {
|
||||
"id": "arrow-down-round-fill"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"type": "element",
|
||||
"name": "path",
|
||||
"attributes": {
|
||||
"id": "Vector",
|
||||
"d": "M6.02913 6.23572C5.08582 6.23572 4.56482 7.33027 5.15967 8.06239L7.13093 10.4885C7.57922 11.0403 8.42149 11.0403 8.86986 10.4885L10.8411 8.06239C11.4359 7.33027 10.9149 6.23572 9.97158 6.23572H6.02913Z",
|
||||
"fill": "currentColor"
|
||||
},
|
||||
"children": []
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
"name": "ArrowDownRoundFill"
|
||||
}
|
||||
@ -0,0 +1,20 @@
|
||||
// GENERATE BY script
|
||||
// DON NOT EDIT IT MANUALLY
|
||||
|
||||
import * as React from 'react'
|
||||
import data from './ArrowDownRoundFill.json'
|
||||
import IconBase from '@/app/components/base/icons/IconBase'
|
||||
import type { IconData } from '@/app/components/base/icons/IconBase'
|
||||
|
||||
const Icon = (
|
||||
{
|
||||
ref,
|
||||
...props
|
||||
}: React.SVGProps<SVGSVGElement> & {
|
||||
ref?: React.RefObject<React.MutableRefObject<HTMLOrSVGElement>>;
|
||||
},
|
||||
) => <IconBase {...props} ref={ref} data={data as IconData} />
|
||||
|
||||
Icon.displayName = 'ArrowDownRoundFill'
|
||||
|
||||
export default Icon
|
||||
@ -0,0 +1,97 @@
|
||||
import { fireEvent, render, screen } from '@testing-library/react'
|
||||
import { InputNumber } from './index'
|
||||
|
||||
jest.mock('react-i18next', () => ({
|
||||
useTranslation: () => ({
|
||||
t: (key: string) => key,
|
||||
}),
|
||||
}))
|
||||
|
||||
describe('InputNumber Component', () => {
|
||||
const defaultProps = {
|
||||
onChange: jest.fn(),
|
||||
}
|
||||
|
||||
afterEach(() => {
|
||||
jest.clearAllMocks()
|
||||
})
|
||||
|
||||
it('renders input with default values', () => {
|
||||
render(<InputNumber {...defaultProps} />)
|
||||
const input = screen.getByRole('textbox')
|
||||
expect(input).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('handles increment button click', () => {
|
||||
render(<InputNumber {...defaultProps} value={5} />)
|
||||
const incrementBtn = screen.getByRole('button', { name: /increment/i })
|
||||
|
||||
fireEvent.click(incrementBtn)
|
||||
expect(defaultProps.onChange).toHaveBeenCalledWith(6)
|
||||
})
|
||||
|
||||
it('handles decrement button click', () => {
|
||||
render(<InputNumber {...defaultProps} value={5} />)
|
||||
const decrementBtn = screen.getByRole('button', { name: /decrement/i })
|
||||
|
||||
fireEvent.click(decrementBtn)
|
||||
expect(defaultProps.onChange).toHaveBeenCalledWith(4)
|
||||
})
|
||||
|
||||
it('respects max value constraint', () => {
|
||||
render(<InputNumber {...defaultProps} value={10} max={10} />)
|
||||
const incrementBtn = screen.getByRole('button', { name: /increment/i })
|
||||
|
||||
fireEvent.click(incrementBtn)
|
||||
expect(defaultProps.onChange).not.toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('respects min value constraint', () => {
|
||||
render(<InputNumber {...defaultProps} value={0} min={0} />)
|
||||
const decrementBtn = screen.getByRole('button', { name: /decrement/i })
|
||||
|
||||
fireEvent.click(decrementBtn)
|
||||
expect(defaultProps.onChange).not.toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('handles direct input changes', () => {
|
||||
render(<InputNumber {...defaultProps} />)
|
||||
const input = screen.getByRole('textbox')
|
||||
|
||||
fireEvent.change(input, { target: { value: '42' } })
|
||||
expect(defaultProps.onChange).toHaveBeenCalledWith(42)
|
||||
})
|
||||
|
||||
it('handles empty input', () => {
|
||||
render(<InputNumber {...defaultProps} value={0} />)
|
||||
const input = screen.getByRole('textbox')
|
||||
|
||||
fireEvent.change(input, { target: { value: '' } })
|
||||
expect(defaultProps.onChange).toHaveBeenCalledWith(undefined)
|
||||
})
|
||||
|
||||
it('handles invalid input', () => {
|
||||
render(<InputNumber {...defaultProps} />)
|
||||
const input = screen.getByRole('textbox')
|
||||
|
||||
fireEvent.change(input, { target: { value: 'abc' } })
|
||||
expect(defaultProps.onChange).not.toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('displays unit when provided', () => {
|
||||
const unit = 'px'
|
||||
render(<InputNumber {...defaultProps} unit={unit} />)
|
||||
expect(screen.getByText(unit)).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('disables controls when disabled prop is true', () => {
|
||||
render(<InputNumber {...defaultProps} disabled />)
|
||||
const input = screen.getByRole('textbox')
|
||||
const incrementBtn = screen.getByRole('button', { name: /increment/i })
|
||||
const decrementBtn = screen.getByRole('button', { name: /decrement/i })
|
||||
|
||||
expect(input).toBeDisabled()
|
||||
expect(incrementBtn).toBeDisabled()
|
||||
expect(decrementBtn).toBeDisabled()
|
||||
})
|
||||
})
|
||||
@ -0,0 +1,37 @@
|
||||
import abcjs from 'abcjs'
|
||||
import { useEffect, useRef } from 'react'
|
||||
import 'abcjs/abcjs-audio.css'
|
||||
|
||||
const MarkdownMusic = ({ children }: { children: React.ReactNode }) => {
|
||||
const containerRef = useRef<HTMLDivElement>(null)
|
||||
const controlsRef = useRef<HTMLDivElement>(null)
|
||||
|
||||
useEffect(() => {
|
||||
if (containerRef.current && controlsRef.current) {
|
||||
if (typeof children === 'string') {
|
||||
const visualObjs = abcjs.renderAbc(containerRef.current, children, {
|
||||
add_classes: true, // Add classes to SVG elements for cursor tracking
|
||||
responsive: 'resize', // Make notation responsive
|
||||
})
|
||||
const synthControl = new abcjs.synth.SynthController()
|
||||
synthControl.load(controlsRef.current, {}, { displayPlay: true })
|
||||
const synth = new abcjs.synth.CreateSynth()
|
||||
const visualObj = visualObjs[0]
|
||||
synth.init({ visualObj }).then(() => {
|
||||
synthControl.setTune(visualObj, false)
|
||||
})
|
||||
containerRef.current.style.overflow = 'auto'
|
||||
}
|
||||
}
|
||||
}, [children])
|
||||
|
||||
return (
|
||||
<div style={{ minWidth: '100%', overflow: 'auto' }}>
|
||||
<div ref={containerRef} />
|
||||
<div ref={controlsRef} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
MarkdownMusic.displayName = 'MarkdownMusic'
|
||||
|
||||
export default MarkdownMusic
|
||||
@ -0,0 +1,68 @@
|
||||
import React from 'react'
|
||||
import classNames from '@/utils/classnames'
|
||||
import type { RemixiconComponentType } from '@remixicon/react'
|
||||
import Divider from '../divider'
|
||||
|
||||
// Updated generic type to allow enum values
|
||||
type SegmentedControlProps<T extends string | number | symbol> = {
|
||||
options: { Icon: RemixiconComponentType, text: string, value: T }[]
|
||||
value: T
|
||||
onChange: (value: T) => void
|
||||
className?: string
|
||||
}
|
||||
|
||||
export const SegmentedControl = <T extends string | number | symbol>({
|
||||
options,
|
||||
value,
|
||||
onChange,
|
||||
className,
|
||||
}: SegmentedControlProps<T>): JSX.Element => {
|
||||
const selectedOptionIndex = options.findIndex(option => option.value === value)
|
||||
|
||||
return (
|
||||
<div className={classNames(
|
||||
'flex items-center rounded-lg bg-components-segmented-control-bg-normal gap-x-[1px] p-0.5',
|
||||
className,
|
||||
)}>
|
||||
{options.map((option, index) => {
|
||||
const { Icon } = option
|
||||
const isSelected = index === selectedOptionIndex
|
||||
const isNextSelected = index === selectedOptionIndex - 1
|
||||
const isLast = index === options.length - 1
|
||||
return (
|
||||
<button
|
||||
type='button'
|
||||
key={String(option.value)}
|
||||
className={classNames(
|
||||
'flex items-center justify-center relative px-2 py-1 rounded-lg gap-x-0.5 group border-0.5 border-transparent',
|
||||
isSelected
|
||||
? 'border-components-segmented-control-item-active-border bg-components-segmented-control-item-active-bg shadow-xs shadow-shadow-shadow-3'
|
||||
: 'hover:bg-state-base-hover',
|
||||
)}
|
||||
onClick={() => onChange(option.value)}
|
||||
>
|
||||
<span className='flex h-5 w-5 items-center justify-center'>
|
||||
<Icon className={classNames(
|
||||
'w-4 h-4 text-text-tertiary',
|
||||
isSelected ? 'text-text-accent-light-mode-only' : 'group-hover:text-text-secondary',
|
||||
)} />
|
||||
</span>
|
||||
<span className={classNames(
|
||||
'p-0.5 text-text-tertiary system-sm-medium',
|
||||
isSelected ? 'text-text-accent-light-mode-only' : 'group-hover:text-text-secondary',
|
||||
)}>
|
||||
{option.text}
|
||||
</span>
|
||||
{!isLast && !isSelected && !isNextSelected && (
|
||||
<div className='absolute right-[-1px] top-0 flex h-full items-center'>
|
||||
<Divider type='vertical' className='mx-0 h-3.5' />
|
||||
</div>
|
||||
)}
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(SegmentedControl) as typeof SegmentedControl
|
||||
@ -0,0 +1,77 @@
|
||||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import React from 'react'
|
||||
import { Type } from '../../../../../llm/types'
|
||||
import { getFieldType } from '../../../../../llm/utils'
|
||||
import type { Field as FieldType } from '../../../../../llm/types'
|
||||
import cn from '@/utils/classnames'
|
||||
import TreeIndentLine from '../tree-indent-line'
|
||||
import { RiMoreFill } from '@remixicon/react'
|
||||
import Tooltip from '@/app/components/base/tooltip'
|
||||
import type { ValueSelector } from '@/app/components/workflow/types'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
const MAX_DEPTH = 10
|
||||
|
||||
type Props = {
|
||||
valueSelector: ValueSelector
|
||||
name: string,
|
||||
payload: FieldType,
|
||||
depth?: number
|
||||
readonly?: boolean
|
||||
onSelect?: (valueSelector: ValueSelector) => void
|
||||
}
|
||||
|
||||
const Field: FC<Props> = ({
|
||||
valueSelector,
|
||||
name,
|
||||
payload,
|
||||
depth = 1,
|
||||
readonly,
|
||||
onSelect,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
const isLastFieldHighlight = readonly
|
||||
const hasChildren = payload.type === Type.object && payload.properties
|
||||
const isHighlight = isLastFieldHighlight && !hasChildren
|
||||
if (depth > MAX_DEPTH + 1)
|
||||
return null
|
||||
return (
|
||||
<div>
|
||||
<Tooltip popupContent={t('app.structOutput.moreFillTip')} disabled={depth !== MAX_DEPTH + 1}>
|
||||
<div
|
||||
className={cn('flex items-center justify-between rounded-md pr-2', !readonly && 'hover:bg-state-base-hover', depth !== MAX_DEPTH + 1 && 'cursor-pointer')}
|
||||
onClick={() => !readonly && onSelect?.([...valueSelector, name])}
|
||||
>
|
||||
<div className='flex grow items-stretch'>
|
||||
<TreeIndentLine depth={depth} />
|
||||
{depth === MAX_DEPTH + 1 ? (
|
||||
<RiMoreFill className='h-3 w-3 text-text-tertiary' />
|
||||
) : (<div className={cn('system-sm-medium h-6 w-0 grow truncate leading-6 text-text-secondary', isHighlight && 'text-text-accent')}>{name}</div>)}
|
||||
|
||||
</div>
|
||||
{depth < MAX_DEPTH + 1 && (
|
||||
<div className='system-xs-regular ml-2 shrink-0 text-text-tertiary'>{getFieldType(payload)}</div>
|
||||
)}
|
||||
</div>
|
||||
</Tooltip>
|
||||
|
||||
{depth <= MAX_DEPTH && payload.type === Type.object && payload.properties && (
|
||||
<div>
|
||||
{Object.keys(payload.properties).map(propName => (
|
||||
<Field
|
||||
key={propName}
|
||||
name={propName}
|
||||
payload={payload.properties?.[propName] as FieldType}
|
||||
depth={depth + 1}
|
||||
readonly={readonly}
|
||||
valueSelector={[...valueSelector, name]}
|
||||
onSelect={onSelect}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default React.memo(Field)
|
||||
@ -0,0 +1,82 @@
|
||||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import React, { useRef } from 'react'
|
||||
import type { StructuredOutput } from '../../../../../llm/types'
|
||||
import Field from './field'
|
||||
import cn from '@/utils/classnames'
|
||||
import { useHover } from 'ahooks'
|
||||
import type { ValueSelector } from '@/app/components/workflow/types'
|
||||
|
||||
type Props = {
|
||||
className?: string
|
||||
root: { nodeId?: string, nodeName?: string, attrName: string }
|
||||
payload: StructuredOutput
|
||||
readonly?: boolean
|
||||
onSelect?: (valueSelector: ValueSelector) => void
|
||||
onHovering?: (value: boolean) => void
|
||||
}
|
||||
|
||||
export const PickerPanelMain: FC<Props> = ({
|
||||
className,
|
||||
root,
|
||||
payload,
|
||||
readonly,
|
||||
onHovering,
|
||||
onSelect,
|
||||
}) => {
|
||||
const ref = useRef<HTMLDivElement>(null)
|
||||
useHover(ref, {
|
||||
onChange: (hovering) => {
|
||||
if (hovering) {
|
||||
onHovering?.(true)
|
||||
}
|
||||
else {
|
||||
setTimeout(() => {
|
||||
onHovering?.(false)
|
||||
}, 100)
|
||||
}
|
||||
},
|
||||
})
|
||||
const schema = payload.schema
|
||||
const fieldNames = Object.keys(schema.properties)
|
||||
return (
|
||||
<div className={cn(className)} ref={ref}>
|
||||
{/* Root info */}
|
||||
<div className='flex items-center justify-between px-2 py-1'>
|
||||
<div className='flex'>
|
||||
{root.nodeName && (
|
||||
<>
|
||||
<div className='system-sm-medium max-w-[100px] truncate text-text-tertiary'>{root.nodeName}</div>
|
||||
<div className='system-sm-medium text-text-tertiary'>.</div>
|
||||
</>
|
||||
)}
|
||||
<div className='system-sm-medium text-text-secondary'>{root.attrName}</div>
|
||||
</div>
|
||||
{/* It must be object */}
|
||||
<div className='system-xs-regular ml-2 shrink-0 text-text-tertiary'>object</div>
|
||||
</div>
|
||||
{fieldNames.map(name => (
|
||||
<Field
|
||||
key={name}
|
||||
name={name}
|
||||
payload={schema.properties[name]}
|
||||
readonly={readonly}
|
||||
valueSelector={[root.nodeId!, root.attrName]}
|
||||
onSelect={onSelect}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const PickerPanel: FC<Props> = ({
|
||||
className,
|
||||
...props
|
||||
}) => {
|
||||
return (
|
||||
<div className={cn('w-[296px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 pb-0 shadow-lg backdrop-blur-[5px]', className)}>
|
||||
<PickerPanelMain {...props} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default React.memo(PickerPanel)
|
||||
@ -0,0 +1,74 @@
|
||||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import React from 'react'
|
||||
import { Type } from '../../../../../llm/types'
|
||||
import { getFieldType } from '../../../../../llm/utils'
|
||||
import type { Field as FieldType } from '../../../../../llm/types'
|
||||
import cn from '@/utils/classnames'
|
||||
import TreeIndentLine from '../tree-indent-line'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { useBoolean } from 'ahooks'
|
||||
import { RiArrowDropDownLine } from '@remixicon/react'
|
||||
|
||||
type Props = {
|
||||
name: string,
|
||||
payload: FieldType,
|
||||
required: boolean,
|
||||
depth?: number,
|
||||
rootClassName?: string
|
||||
}
|
||||
|
||||
const Field: FC<Props> = ({
|
||||
name,
|
||||
payload,
|
||||
depth = 1,
|
||||
required,
|
||||
rootClassName,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
const isRoot = depth === 1
|
||||
const hasChildren = payload.type === Type.object && payload.properties
|
||||
const [fold, {
|
||||
toggle: toggleFold,
|
||||
}] = useBoolean(false)
|
||||
return (
|
||||
<div>
|
||||
<div className={cn('flex pr-2')}>
|
||||
<TreeIndentLine depth={depth} />
|
||||
<div className='w-0 grow'>
|
||||
<div className='relative flex select-none'>
|
||||
{hasChildren && (
|
||||
<RiArrowDropDownLine
|
||||
className={cn('absolute left-[-18px] top-[50%] h-4 w-4 translate-y-[-50%] cursor-pointer bg-components-panel-bg text-text-tertiary', fold && 'rotate-[270deg] text-text-accent')}
|
||||
onClick={toggleFold}
|
||||
/>
|
||||
)}
|
||||
<div className={cn('system-sm-medium ml-[7px] h-6 truncate leading-6 text-text-secondary', isRoot && rootClassName)}>{name}</div>
|
||||
<div className='system-xs-regular ml-3 shrink-0 leading-6 text-text-tertiary'>{getFieldType(payload)}</div>
|
||||
{required && <div className='system-2xs-medium-uppercase ml-3 leading-6 text-text-warning'>{t('app.structOutput.required')}</div>}
|
||||
</div>
|
||||
{payload.description && (
|
||||
<div className='ml-[7px] flex'>
|
||||
<div className='system-xs-regular w-0 grow truncate text-text-tertiary'>{payload.description}</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{hasChildren && !fold && (
|
||||
<div>
|
||||
{Object.keys(payload.properties!).map(name => (
|
||||
<Field
|
||||
key={name}
|
||||
name={name}
|
||||
payload={payload.properties?.[name] as FieldType}
|
||||
depth={depth + 1}
|
||||
required={!!payload.required?.includes(name)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default React.memo(Field)
|
||||
@ -0,0 +1,39 @@
|
||||
'use client'
|
||||
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
|
||||
rootClassName?: string
|
||||
}
|
||||
|
||||
const ShowPanel: FC<Props> = ({
|
||||
payload,
|
||||
rootClassName,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
const schema = {
|
||||
...payload,
|
||||
schema: {
|
||||
...payload.schema,
|
||||
description: t('app.structOutput.LLMResponse'),
|
||||
},
|
||||
}
|
||||
return (
|
||||
<div className='relative left-[-7px]'>
|
||||
{Object.keys(schema.schema.properties!).map(name => (
|
||||
<Field
|
||||
key={name}
|
||||
name={name}
|
||||
payload={schema.schema.properties![name]}
|
||||
required={!!schema.schema.required?.includes(name)}
|
||||
rootClassName={rootClassName}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default React.memo(ShowPanel)
|
||||
@ -0,0 +1,24 @@
|
||||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import React from 'react'
|
||||
import cn from '@/utils/classnames'
|
||||
|
||||
type Props = {
|
||||
depth?: number,
|
||||
className?: string,
|
||||
}
|
||||
|
||||
const TreeIndentLine: FC<Props> = ({
|
||||
depth = 1,
|
||||
className,
|
||||
}) => {
|
||||
const depthArray = Array.from({ length: depth }, (_, index) => index)
|
||||
return (
|
||||
<div className={cn('flex', className)}>
|
||||
{depthArray.map(d => (
|
||||
<div key={d} className={cn('ml-2.5 mr-2.5 w-px bg-divider-regular')}></div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default React.memo(TreeIndentLine)
|
||||
@ -0,0 +1,59 @@
|
||||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import React from 'react'
|
||||
import type { Field, StructuredOutput, TypeWithArray } from '../../../llm/types'
|
||||
import { Type } from '../../../llm/types'
|
||||
import { PickerPanelMain as Panel } from '@/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/picker'
|
||||
import BlockIcon from '@/app/components/workflow/block-icon'
|
||||
import { BlockEnum } from '@/app/components/workflow/types'
|
||||
|
||||
type Props = {
|
||||
nodeName: string
|
||||
path: string[]
|
||||
varType: TypeWithArray
|
||||
nodeType?: BlockEnum
|
||||
}
|
||||
|
||||
const VarFullPathPanel: FC<Props> = ({
|
||||
nodeName,
|
||||
path,
|
||||
varType,
|
||||
nodeType = BlockEnum.LLM,
|
||||
}) => {
|
||||
const schema: StructuredOutput = (() => {
|
||||
const schema: StructuredOutput['schema'] = {
|
||||
type: Type.object,
|
||||
properties: {} as { [key: string]: Field },
|
||||
required: [],
|
||||
additionalProperties: false,
|
||||
}
|
||||
let current = schema
|
||||
for (let i = 1; i < path.length; i++) {
|
||||
const isLast = i === path.length - 1
|
||||
const name = path[i]
|
||||
current.properties[name] = {
|
||||
type: isLast ? varType : Type.object,
|
||||
properties: {},
|
||||
} as Field
|
||||
current = current.properties[name] as { type: Type.object; properties: { [key: string]: Field; }; required: never[]; additionalProperties: false; }
|
||||
}
|
||||
return {
|
||||
schema,
|
||||
}
|
||||
})()
|
||||
return (
|
||||
<div className='w-[280px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur pb-0 shadow-lg backdrop-blur-[5px]'>
|
||||
<div className='flex space-x-1 border-b-[0.5px] border-divider-subtle p-3 pb-2 '>
|
||||
<BlockIcon size='xs' type={nodeType} />
|
||||
<div className='system-xs-medium w-0 grow truncate text-text-secondary'>{nodeName}</div>
|
||||
</div>
|
||||
<Panel
|
||||
className='px-1 pb-3 pt-2'
|
||||
root={{ attrName: path[0] }}
|
||||
payload={schema}
|
||||
readonly
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default React.memo(VarFullPathPanel)
|
||||
@ -0,0 +1,140 @@
|
||||
import React, { type FC, useCallback, useEffect, useRef } from 'react'
|
||||
import useTheme from '@/hooks/use-theme'
|
||||
import { Theme } from '@/types/app'
|
||||
import classNames from '@/utils/classnames'
|
||||
import { Editor } from '@monaco-editor/react'
|
||||
import { RiClipboardLine, RiIndentIncrease } from '@remixicon/react'
|
||||
import copy from 'copy-to-clipboard'
|
||||
import Tooltip from '@/app/components/base/tooltip'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
type CodeEditorProps = {
|
||||
value: string
|
||||
onUpdate?: (value: string) => void
|
||||
showFormatButton?: boolean
|
||||
editorWrapperClassName?: string
|
||||
readOnly?: boolean
|
||||
} & React.HTMLAttributes<HTMLDivElement>
|
||||
|
||||
const CodeEditor: FC<CodeEditorProps> = ({
|
||||
value,
|
||||
onUpdate,
|
||||
showFormatButton = true,
|
||||
editorWrapperClassName,
|
||||
readOnly = false,
|
||||
className,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
const { theme } = useTheme()
|
||||
const monacoRef = useRef<any>(null)
|
||||
const editorRef = useRef<any>(null)
|
||||
|
||||
useEffect(() => {
|
||||
if (monacoRef.current) {
|
||||
if (theme === Theme.light)
|
||||
monacoRef.current.editor.setTheme('light-theme')
|
||||
else
|
||||
monacoRef.current.editor.setTheme('dark-theme')
|
||||
}
|
||||
}, [theme])
|
||||
|
||||
const handleEditorDidMount = useCallback((editor: any, monaco: any) => {
|
||||
editorRef.current = editor
|
||||
monacoRef.current = monaco
|
||||
monaco.editor.defineTheme('light-theme', {
|
||||
base: 'vs',
|
||||
inherit: true,
|
||||
rules: [],
|
||||
colors: {
|
||||
'editor.background': '#00000000',
|
||||
'editor.lineHighlightBackground': '#00000000',
|
||||
'focusBorder': '#00000000',
|
||||
},
|
||||
})
|
||||
monaco.editor.defineTheme('dark-theme', {
|
||||
base: 'vs-dark',
|
||||
inherit: true,
|
||||
rules: [],
|
||||
colors: {
|
||||
'editor.background': '#00000000',
|
||||
'editor.lineHighlightBackground': '#00000000',
|
||||
'focusBorder': '#00000000',
|
||||
},
|
||||
})
|
||||
monaco.editor.setTheme('light-theme')
|
||||
}, [])
|
||||
|
||||
const formatJsonContent = useCallback(() => {
|
||||
if (editorRef.current)
|
||||
editorRef.current.getAction('editor.action.formatDocument')?.run()
|
||||
}, [])
|
||||
|
||||
const handleEditorChange = useCallback((value: string | undefined) => {
|
||||
if (value !== undefined)
|
||||
onUpdate?.(value)
|
||||
}, [onUpdate])
|
||||
|
||||
return (
|
||||
<div className={classNames('flex flex-col h-full bg-components-input-bg-normal overflow-hidden', className)}>
|
||||
<div className='flex items-center justify-between pl-2 pr-1 pt-1'>
|
||||
<div className='system-xs-semibold-uppercase py-0.5 text-text-secondary'>
|
||||
<span className='px-1 py-0.5'>JSON</span>
|
||||
</div>
|
||||
<div className='flex items-center gap-x-0.5'>
|
||||
{showFormatButton && (
|
||||
<Tooltip popupContent={t('common.operation.format')}>
|
||||
<button
|
||||
type='button'
|
||||
className='flex h-6 w-6 items-center justify-center'
|
||||
onClick={formatJsonContent}
|
||||
>
|
||||
<RiIndentIncrease className='h-4 w-4 text-text-tertiary' />
|
||||
</button>
|
||||
</Tooltip>
|
||||
)}
|
||||
<Tooltip popupContent={t('common.operation.copy')}>
|
||||
<button
|
||||
type='button'
|
||||
className='flex h-6 w-6 items-center justify-center'
|
||||
onClick={() => copy(value)}>
|
||||
<RiClipboardLine className='h-4 w-4 text-text-tertiary' />
|
||||
</button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<div className={classNames('relative', editorWrapperClassName)}>
|
||||
<Editor
|
||||
height='100%'
|
||||
defaultLanguage='json'
|
||||
value={value}
|
||||
onChange={handleEditorChange}
|
||||
onMount={handleEditorDidMount}
|
||||
options={{
|
||||
readOnly,
|
||||
domReadOnly: true,
|
||||
minimap: { enabled: false },
|
||||
tabSize: 2,
|
||||
scrollBeyondLastLine: false,
|
||||
wordWrap: 'on',
|
||||
wrappingIndent: 'same',
|
||||
// Add these options
|
||||
overviewRulerBorder: false,
|
||||
hideCursorInOverviewRuler: true,
|
||||
renderLineHighlightOnlyWhenFocus: false,
|
||||
renderLineHighlight: 'none',
|
||||
// Hide scrollbar borders
|
||||
scrollbar: {
|
||||
vertical: 'hidden',
|
||||
horizontal: 'hidden',
|
||||
verticalScrollbarSize: 0,
|
||||
horizontalScrollbarSize: 0,
|
||||
alwaysConsumeMouseWheel: false,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(CodeEditor)
|
||||
@ -0,0 +1,27 @@
|
||||
import React from 'react'
|
||||
import type { FC } from 'react'
|
||||
import { RiErrorWarningFill } from '@remixicon/react'
|
||||
import classNames from '@/utils/classnames'
|
||||
|
||||
type ErrorMessageProps = {
|
||||
message: string
|
||||
} & React.HTMLAttributes<HTMLDivElement>
|
||||
|
||||
const ErrorMessage: FC<ErrorMessageProps> = ({
|
||||
message,
|
||||
className,
|
||||
}) => {
|
||||
return (
|
||||
<div className={classNames(
|
||||
'flex gap-x-1 mt-1 p-2 rounded-lg border-[0.5px] border-components-panel-border bg-toast-error-bg',
|
||||
className,
|
||||
)}>
|
||||
<RiErrorWarningFill className='h-4 w-4 shrink-0 text-text-destructive' />
|
||||
<div className='system-xs-medium max-h-12 grow overflow-y-auto break-words text-text-primary'>
|
||||
{message}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(ErrorMessage)
|
||||
@ -0,0 +1,34 @@
|
||||
import React, { type FC } from 'react'
|
||||
import Modal from '../../../../../base/modal'
|
||||
import type { SchemaRoot } from '../../types'
|
||||
import JsonSchemaConfig from './json-schema-config'
|
||||
|
||||
type JsonSchemaConfigModalProps = {
|
||||
isShow: boolean
|
||||
defaultSchema?: SchemaRoot
|
||||
onSave: (schema: SchemaRoot) => void
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
const JsonSchemaConfigModal: FC<JsonSchemaConfigModalProps> = ({
|
||||
isShow,
|
||||
defaultSchema,
|
||||
onSave,
|
||||
onClose,
|
||||
}) => {
|
||||
return (
|
||||
<Modal
|
||||
isShow={isShow}
|
||||
onClose={onClose}
|
||||
className='h-[800px] max-w-[960px] p-0'
|
||||
>
|
||||
<JsonSchemaConfig
|
||||
defaultSchema={defaultSchema}
|
||||
onSave={onSave}
|
||||
onClose={onClose}
|
||||
/>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
|
||||
export default JsonSchemaConfigModal
|
||||
@ -0,0 +1,136 @@
|
||||
import React, { type FC, useCallback, useEffect, useRef, useState } from 'react'
|
||||
import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '@/app/components/base/portal-to-follow-elem'
|
||||
import cn from '@/utils/classnames'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { RiCloseLine } from '@remixicon/react'
|
||||
import Button from '@/app/components/base/button'
|
||||
import { checkJsonDepth } from '../../utils'
|
||||
import { JSON_SCHEMA_MAX_DEPTH } from '@/config'
|
||||
import CodeEditor from './code-editor'
|
||||
import ErrorMessage from './error-message'
|
||||
import { useVisualEditorStore } from './visual-editor/store'
|
||||
import { useMittContext } from './visual-editor/context'
|
||||
|
||||
type JsonImporterProps = {
|
||||
onSubmit: (schema: any) => void
|
||||
updateBtnWidth: (width: number) => void
|
||||
}
|
||||
|
||||
const JsonImporter: FC<JsonImporterProps> = ({
|
||||
onSubmit,
|
||||
updateBtnWidth,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
const [open, setOpen] = useState(false)
|
||||
const [json, setJson] = useState('')
|
||||
const [parseError, setParseError] = useState<any>(null)
|
||||
const importBtnRef = useRef<HTMLButtonElement>(null)
|
||||
const advancedEditing = useVisualEditorStore(state => state.advancedEditing)
|
||||
const isAddingNewField = useVisualEditorStore(state => state.isAddingNewField)
|
||||
const { emit } = useMittContext()
|
||||
|
||||
useEffect(() => {
|
||||
if (importBtnRef.current) {
|
||||
const rect = importBtnRef.current.getBoundingClientRect()
|
||||
updateBtnWidth(rect.width)
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [])
|
||||
|
||||
const handleTrigger = useCallback((e: React.MouseEvent<HTMLElement, MouseEvent>) => {
|
||||
e.stopPropagation()
|
||||
if (advancedEditing || isAddingNewField)
|
||||
emit('quitEditing', {})
|
||||
setOpen(!open)
|
||||
}, [open, advancedEditing, isAddingNewField, emit])
|
||||
|
||||
const onClose = useCallback(() => {
|
||||
setOpen(false)
|
||||
}, [])
|
||||
|
||||
const handleSubmit = useCallback(() => {
|
||||
try {
|
||||
const parsedJSON = JSON.parse(json)
|
||||
if (typeof parsedJSON !== 'object' || Array.isArray(parsedJSON)) {
|
||||
setParseError(new Error('Root must be an object, not an array or primitive value.'))
|
||||
return
|
||||
}
|
||||
const maxDepth = checkJsonDepth(parsedJSON)
|
||||
if (maxDepth > JSON_SCHEMA_MAX_DEPTH) {
|
||||
setParseError({
|
||||
type: 'error',
|
||||
message: `Schema exceeds maximum depth of ${JSON_SCHEMA_MAX_DEPTH}.`,
|
||||
})
|
||||
return
|
||||
}
|
||||
onSubmit(parsedJSON)
|
||||
setParseError(null)
|
||||
setOpen(false)
|
||||
}
|
||||
catch (e: any) {
|
||||
if (e instanceof Error)
|
||||
setParseError(e)
|
||||
else
|
||||
setParseError(new Error('Invalid JSON'))
|
||||
}
|
||||
}, [onSubmit, json])
|
||||
|
||||
return (
|
||||
<PortalToFollowElem
|
||||
open={open}
|
||||
onOpenChange={setOpen}
|
||||
placement='bottom-end'
|
||||
offset={{
|
||||
mainAxis: 4,
|
||||
crossAxis: 16,
|
||||
}}
|
||||
>
|
||||
<PortalToFollowElemTrigger ref={importBtnRef} onClick={handleTrigger}>
|
||||
<button
|
||||
type='button'
|
||||
className={cn(
|
||||
'system-xs-medium flex shrink-0 rounded-md px-1.5 py-1 text-text-tertiary hover:bg-components-button-ghost-bg-hover',
|
||||
open && 'bg-components-button-ghost-bg-hover',
|
||||
)}
|
||||
>
|
||||
<span className='px-0.5'>{t('workflow.nodes.llm.jsonSchema.import')}</span>
|
||||
</button>
|
||||
</PortalToFollowElemTrigger>
|
||||
<PortalToFollowElemContent className='z-[100]'>
|
||||
<div className='flex w-[400px] flex-col rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-2xl shadow-shadow-shadow-9'>
|
||||
{/* Title */}
|
||||
<div className='relative px-3 pb-1 pt-3.5'>
|
||||
<div className='absolute bottom-0 right-2.5 flex h-8 w-8 items-center justify-center' onClick={onClose}>
|
||||
<RiCloseLine className='h-4 w-4 text-text-tertiary' />
|
||||
</div>
|
||||
<div className='system-xl-semibold flex pl-1 pr-8 text-text-primary'>
|
||||
{t('workflow.nodes.llm.jsonSchema.import')}
|
||||
</div>
|
||||
</div>
|
||||
{/* Content */}
|
||||
<div className='px-4 py-2'>
|
||||
<CodeEditor
|
||||
className='rounded-lg'
|
||||
editorWrapperClassName='h-[340px]'
|
||||
value={json}
|
||||
onUpdate={setJson}
|
||||
showFormatButton={false}
|
||||
/>
|
||||
{parseError && <ErrorMessage message={parseError.message} />}
|
||||
</div>
|
||||
{/* Footer */}
|
||||
<div className='flex items-center justify-end gap-x-2 p-4 pt-2'>
|
||||
<Button variant='secondary' onClick={onClose}>
|
||||
{t('common.operation.cancel')}
|
||||
</Button>
|
||||
<Button variant='primary' onClick={handleSubmit}>
|
||||
{t('common.operation.submit')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</PortalToFollowElemContent>
|
||||
</PortalToFollowElem>
|
||||
)
|
||||
}
|
||||
|
||||
export default JsonImporter
|
||||
@ -0,0 +1,301 @@
|
||||
import React, { type FC, useCallback, useState } from 'react'
|
||||
import { type SchemaRoot, Type } from '../../types'
|
||||
import { RiBracesLine, RiCloseLine, RiExternalLinkLine, RiTimelineView } from '@remixicon/react'
|
||||
import { SegmentedControl } from '../../../../../base/segmented-control'
|
||||
import JsonSchemaGenerator from './json-schema-generator'
|
||||
import Divider from '@/app/components/base/divider'
|
||||
import JsonImporter from './json-importer'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Button from '@/app/components/base/button'
|
||||
import VisualEditor from './visual-editor'
|
||||
import SchemaEditor from './schema-editor'
|
||||
import {
|
||||
checkJsonSchemaDepth,
|
||||
convertBooleanToString,
|
||||
getValidationErrorMessage,
|
||||
jsonToSchema,
|
||||
preValidateSchema,
|
||||
validateSchemaAgainstDraft7,
|
||||
} from '../../utils'
|
||||
import { MittProvider, VisualEditorContextProvider, useMittContext } from './visual-editor/context'
|
||||
import ErrorMessage from './error-message'
|
||||
import { useVisualEditorStore } from './visual-editor/store'
|
||||
import Toast from '@/app/components/base/toast'
|
||||
import { useGetLanguage } from '@/context/i18n'
|
||||
import { JSON_SCHEMA_MAX_DEPTH } from '@/config'
|
||||
|
||||
type JsonSchemaConfigProps = {
|
||||
defaultSchema?: SchemaRoot
|
||||
onSave: (schema: SchemaRoot) => void
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
enum SchemaView {
|
||||
VisualEditor = 'visualEditor',
|
||||
JsonSchema = 'jsonSchema',
|
||||
}
|
||||
|
||||
const VIEW_TABS = [
|
||||
{ Icon: RiTimelineView, text: 'Visual Editor', value: SchemaView.VisualEditor },
|
||||
{ Icon: RiBracesLine, text: 'JSON Schema', value: SchemaView.JsonSchema },
|
||||
]
|
||||
|
||||
const DEFAULT_SCHEMA: SchemaRoot = {
|
||||
type: Type.object,
|
||||
properties: {},
|
||||
required: [],
|
||||
additionalProperties: false,
|
||||
}
|
||||
|
||||
const HELP_DOC_URL = {
|
||||
zh_Hans: 'https://docs.dify.ai/zh-hans/guides/workflow/structured-outputs',
|
||||
en_US: 'https://docs.dify.ai/guides/workflow/structured-outputs',
|
||||
ja_JP: 'https://docs.dify.ai/ja-jp/guides/workflow/structured-outputs',
|
||||
}
|
||||
|
||||
type LocaleKey = keyof typeof HELP_DOC_URL
|
||||
|
||||
const JsonSchemaConfig: FC<JsonSchemaConfigProps> = ({
|
||||
defaultSchema,
|
||||
onSave,
|
||||
onClose,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
const locale = useGetLanguage() as LocaleKey
|
||||
const [currentTab, setCurrentTab] = useState(SchemaView.VisualEditor)
|
||||
const [jsonSchema, setJsonSchema] = useState(defaultSchema || DEFAULT_SCHEMA)
|
||||
const [json, setJson] = useState(JSON.stringify(jsonSchema, null, 2))
|
||||
const [btnWidth, setBtnWidth] = useState(0)
|
||||
const [parseError, setParseError] = useState<Error | null>(null)
|
||||
const [validationError, setValidationError] = useState<string>('')
|
||||
const advancedEditing = useVisualEditorStore(state => state.advancedEditing)
|
||||
const setAdvancedEditing = useVisualEditorStore(state => state.setAdvancedEditing)
|
||||
const isAddingNewField = useVisualEditorStore(state => state.isAddingNewField)
|
||||
const setIsAddingNewField = useVisualEditorStore(state => state.setIsAddingNewField)
|
||||
const setHoveringProperty = useVisualEditorStore(state => state.setHoveringProperty)
|
||||
const { emit } = useMittContext()
|
||||
|
||||
const updateBtnWidth = useCallback((width: number) => {
|
||||
setBtnWidth(width + 32)
|
||||
}, [])
|
||||
|
||||
const handleTabChange = useCallback((value: SchemaView) => {
|
||||
if (currentTab === value) return
|
||||
if (currentTab === SchemaView.JsonSchema) {
|
||||
try {
|
||||
const schema = JSON.parse(json)
|
||||
setParseError(null)
|
||||
const result = preValidateSchema(schema)
|
||||
if (!result.success) {
|
||||
setValidationError(result.error.message)
|
||||
return
|
||||
}
|
||||
const schemaDepth = checkJsonSchemaDepth(schema)
|
||||
if (schemaDepth > JSON_SCHEMA_MAX_DEPTH) {
|
||||
setValidationError(`Schema exceeds maximum depth of ${JSON_SCHEMA_MAX_DEPTH}.`)
|
||||
return
|
||||
}
|
||||
convertBooleanToString(schema)
|
||||
const validationErrors = validateSchemaAgainstDraft7(schema)
|
||||
if (validationErrors.length > 0) {
|
||||
setValidationError(getValidationErrorMessage(validationErrors))
|
||||
return
|
||||
}
|
||||
setJsonSchema(schema)
|
||||
setValidationError('')
|
||||
}
|
||||
catch (error) {
|
||||
setValidationError('')
|
||||
if (error instanceof Error)
|
||||
setParseError(error)
|
||||
else
|
||||
setParseError(new Error('Invalid JSON'))
|
||||
return
|
||||
}
|
||||
}
|
||||
else if (currentTab === SchemaView.VisualEditor) {
|
||||
if (advancedEditing || isAddingNewField)
|
||||
emit('quitEditing', { callback: (backup: SchemaRoot) => setJson(JSON.stringify(backup || jsonSchema, null, 2)) })
|
||||
else
|
||||
setJson(JSON.stringify(jsonSchema, null, 2))
|
||||
}
|
||||
|
||||
setCurrentTab(value)
|
||||
}, [currentTab, jsonSchema, json, advancedEditing, isAddingNewField, emit])
|
||||
|
||||
const handleApplySchema = useCallback((schema: SchemaRoot) => {
|
||||
if (currentTab === SchemaView.VisualEditor)
|
||||
setJsonSchema(schema)
|
||||
else if (currentTab === SchemaView.JsonSchema)
|
||||
setJson(JSON.stringify(schema, null, 2))
|
||||
}, [currentTab])
|
||||
|
||||
const handleSubmit = useCallback((schema: any) => {
|
||||
const jsonSchema = jsonToSchema(schema) as SchemaRoot
|
||||
if (currentTab === SchemaView.VisualEditor)
|
||||
setJsonSchema(jsonSchema)
|
||||
else if (currentTab === SchemaView.JsonSchema)
|
||||
setJson(JSON.stringify(jsonSchema, null, 2))
|
||||
}, [currentTab])
|
||||
|
||||
const handleVisualEditorUpdate = useCallback((schema: SchemaRoot) => {
|
||||
setJsonSchema(schema)
|
||||
}, [])
|
||||
|
||||
const handleSchemaEditorUpdate = useCallback((schema: string) => {
|
||||
setJson(schema)
|
||||
}, [])
|
||||
|
||||
const handleResetDefaults = useCallback(() => {
|
||||
if (currentTab === SchemaView.VisualEditor) {
|
||||
setHoveringProperty(null)
|
||||
advancedEditing && setAdvancedEditing(false)
|
||||
isAddingNewField && setIsAddingNewField(false)
|
||||
}
|
||||
setJsonSchema(DEFAULT_SCHEMA)
|
||||
setJson(JSON.stringify(DEFAULT_SCHEMA, null, 2))
|
||||
}, [currentTab, advancedEditing, isAddingNewField, setAdvancedEditing, setIsAddingNewField, setHoveringProperty])
|
||||
|
||||
const handleCancel = useCallback(() => {
|
||||
onClose()
|
||||
}, [onClose])
|
||||
|
||||
const handleSave = useCallback(() => {
|
||||
let schema = jsonSchema
|
||||
if (currentTab === SchemaView.JsonSchema) {
|
||||
try {
|
||||
schema = JSON.parse(json)
|
||||
setParseError(null)
|
||||
const result = preValidateSchema(schema)
|
||||
if (!result.success) {
|
||||
setValidationError(result.error.message)
|
||||
return
|
||||
}
|
||||
const schemaDepth = checkJsonSchemaDepth(schema)
|
||||
if (schemaDepth > JSON_SCHEMA_MAX_DEPTH) {
|
||||
setValidationError(`Schema exceeds maximum depth of ${JSON_SCHEMA_MAX_DEPTH}.`)
|
||||
return
|
||||
}
|
||||
convertBooleanToString(schema)
|
||||
const validationErrors = validateSchemaAgainstDraft7(schema)
|
||||
if (validationErrors.length > 0) {
|
||||
setValidationError(getValidationErrorMessage(validationErrors))
|
||||
return
|
||||
}
|
||||
setJsonSchema(schema)
|
||||
setValidationError('')
|
||||
}
|
||||
catch (error) {
|
||||
setValidationError('')
|
||||
if (error instanceof Error)
|
||||
setParseError(error)
|
||||
else
|
||||
setParseError(new Error('Invalid JSON'))
|
||||
return
|
||||
}
|
||||
}
|
||||
else if (currentTab === SchemaView.VisualEditor) {
|
||||
if (advancedEditing || isAddingNewField) {
|
||||
Toast.notify({
|
||||
type: 'warning',
|
||||
message: t('workflow.nodes.llm.jsonSchema.warningTips.saveSchema'),
|
||||
})
|
||||
return
|
||||
}
|
||||
}
|
||||
onSave(schema)
|
||||
onClose()
|
||||
}, [currentTab, jsonSchema, json, onSave, onClose, advancedEditing, isAddingNewField, t])
|
||||
|
||||
return (
|
||||
<div className='flex h-full flex-col'>
|
||||
{/* Header */}
|
||||
<div className='relative flex p-6 pb-3 pr-14'>
|
||||
<div className='title-2xl-semi-bold grow truncate text-text-primary'>
|
||||
{t('workflow.nodes.llm.jsonSchema.title')}
|
||||
</div>
|
||||
<div className='absolute right-5 top-5 flex h-8 w-8 items-center justify-center p-1.5' onClick={onClose}>
|
||||
<RiCloseLine className='h-[18px] w-[18px] text-text-tertiary' />
|
||||
</div>
|
||||
</div>
|
||||
{/* Content */}
|
||||
<div className='flex items-center justify-between px-6 py-2'>
|
||||
{/* Tab */}
|
||||
<SegmentedControl<SchemaView>
|
||||
options={VIEW_TABS}
|
||||
value={currentTab}
|
||||
onChange={handleTabChange}
|
||||
/>
|
||||
<div className='flex items-center gap-x-0.5'>
|
||||
{/* JSON Schema Generator */}
|
||||
<JsonSchemaGenerator
|
||||
crossAxisOffset={btnWidth}
|
||||
onApply={handleApplySchema}
|
||||
/>
|
||||
<Divider type='vertical' className='h-3' />
|
||||
{/* JSON Schema Importer */}
|
||||
<JsonImporter
|
||||
updateBtnWidth={updateBtnWidth}
|
||||
onSubmit={handleSubmit}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex grow flex-col gap-y-1 overflow-hidden px-6'>
|
||||
{currentTab === SchemaView.VisualEditor && (
|
||||
<VisualEditor
|
||||
schema={jsonSchema}
|
||||
onChange={handleVisualEditorUpdate}
|
||||
/>
|
||||
)}
|
||||
{currentTab === SchemaView.JsonSchema && (
|
||||
<SchemaEditor
|
||||
schema={json}
|
||||
onUpdate={handleSchemaEditorUpdate}
|
||||
/>
|
||||
)}
|
||||
{parseError && <ErrorMessage message={parseError.message} />}
|
||||
{validationError && <ErrorMessage message={validationError} />}
|
||||
</div>
|
||||
{/* Footer */}
|
||||
<div className='flex items-center gap-x-2 p-6 pt-5'>
|
||||
<a
|
||||
className='flex grow items-center gap-x-1 text-text-accent'
|
||||
href={HELP_DOC_URL[locale]}
|
||||
target='_blank'
|
||||
rel='noopener noreferrer'
|
||||
>
|
||||
<span className='system-xs-regular'>{t('workflow.nodes.llm.jsonSchema.doc')}</span>
|
||||
<RiExternalLinkLine className='h-3 w-3' />
|
||||
</a>
|
||||
<div className='flex items-center gap-x-3'>
|
||||
<div className='flex items-center gap-x-2'>
|
||||
<Button variant='secondary' onClick={handleResetDefaults}>
|
||||
{t('workflow.nodes.llm.jsonSchema.resetDefaults')}
|
||||
</Button>
|
||||
<Divider type='vertical' className='ml-1 mr-0 h-4' />
|
||||
</div>
|
||||
<div className='flex items-center gap-x-2'>
|
||||
<Button variant='secondary' onClick={handleCancel}>
|
||||
{t('common.operation.cancel')}
|
||||
</Button>
|
||||
<Button variant='primary' onClick={handleSave}>
|
||||
{t('common.operation.save')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const JsonSchemaConfigWrapper: FC<JsonSchemaConfigProps> = (props) => {
|
||||
return (
|
||||
<MittProvider>
|
||||
<VisualEditorContextProvider>
|
||||
<JsonSchemaConfig {...props} />
|
||||
</VisualEditorContextProvider>
|
||||
</MittProvider>
|
||||
)
|
||||
}
|
||||
|
||||
export default JsonSchemaConfigWrapper
|
||||
@ -0,0 +1,7 @@
|
||||
import SchemaGeneratorLight from './schema-generator-light'
|
||||
import SchemaGeneratorDark from './schema-generator-dark'
|
||||
|
||||
export {
|
||||
SchemaGeneratorLight,
|
||||
SchemaGeneratorDark,
|
||||
}
|
||||
@ -0,0 +1,15 @@
|
||||
const SchemaGeneratorDark = () => {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
|
||||
<path d="M9.33329 2.95825C10.2308 2.95825 10.9583 2.23071 10.9583 1.33325H11.7083C11.7083 2.23071 12.4358 2.95825 13.3333 2.95825V3.70825C12.4358 3.70825 11.7083 4.43579 11.7083 5.33325H10.9583C10.9583 4.43579 10.2308 3.70825 9.33329 3.70825V2.95825ZM0.666626 7.33325C2.87577 7.33325 4.66663 5.54239 4.66663 3.33325H5.99996C5.99996 5.54239 7.79083 7.33325 9.99996 7.33325V8.66659C7.79083 8.66659 5.99996 10.4575 5.99996 12.6666H4.66663C4.66663 10.4575 2.87577 8.66659 0.666626 8.66659V7.33325ZM11.5 9.33325C11.5 10.5299 10.5299 11.4999 9.33329 11.4999V12.4999C10.5299 12.4999 11.5 13.47 11.5 14.6666H12.5C12.5 13.47 13.47 12.4999 14.6666 12.4999V11.4999C13.47 11.4999 12.5 10.5299 12.5 9.33325H11.5Z" fill="url(#paint0_linear_13059_32065)" fillOpacity="0.95" />
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_13059_32065" x1="14.9996" y1="15" x2="-2.55847" y2="16.6207" gradientUnits="userSpaceOnUse">
|
||||
<stop stopColor="#36BFFA" />
|
||||
<stop offset="1" stopColor="#296DFF" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default SchemaGeneratorDark
|
||||
@ -0,0 +1,15 @@
|
||||
const SchemaGeneratorLight = () => {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
|
||||
<path d="M9.33329 2.95837C10.2308 2.95837 10.9583 2.23083 10.9583 1.33337H11.7083C11.7083 2.23083 12.4358 2.95837 13.3333 2.95837V3.70837C12.4358 3.70837 11.7083 4.43591 11.7083 5.33337H10.9583C10.9583 4.43591 10.2308 3.70837 9.33329 3.70837V2.95837ZM0.666626 7.33337C2.87577 7.33337 4.66663 5.54251 4.66663 3.33337H5.99996C5.99996 5.54251 7.79083 7.33337 9.99996 7.33337V8.66671C7.79083 8.66671 5.99996 10.4576 5.99996 12.6667H4.66663C4.66663 10.4576 2.87577 8.66671 0.666626 8.66671V7.33337ZM11.5 9.33337C11.5 10.53 10.5299 11.5 9.33329 11.5V12.5C10.5299 12.5 11.5 13.4701 11.5 14.6667H12.5C12.5 13.4701 13.47 12.5 14.6666 12.5V11.5C13.47 11.5 12.5 10.53 12.5 9.33337H11.5Z" fill="url(#paint0_linear_13059_18704)" fillOpacity="0.95" />
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_13059_18704" x1="14.9996" y1="15.0001" x2="-2.55847" y2="16.6209" gradientUnits="userSpaceOnUse">
|
||||
<stop stopColor="#0BA5EC" />
|
||||
<stop offset="1" stopColor="#155AEF" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default SchemaGeneratorLight
|
||||
@ -0,0 +1,121 @@
|
||||
import React, { type FC, useCallback, useMemo, useState } from 'react'
|
||||
import type { SchemaRoot } from '../../../types'
|
||||
import { RiArrowLeftLine, RiCloseLine, RiSparklingLine } from '@remixicon/react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Button from '@/app/components/base/button'
|
||||
import CodeEditor from '../code-editor'
|
||||
import ErrorMessage from '../error-message'
|
||||
import { getValidationErrorMessage, validateSchemaAgainstDraft7 } from '../../../utils'
|
||||
import Loading from '@/app/components/base/loading'
|
||||
|
||||
type GeneratedResultProps = {
|
||||
schema: SchemaRoot
|
||||
isGenerating: boolean
|
||||
onBack: () => void
|
||||
onRegenerate: () => void
|
||||
onClose: () => void
|
||||
onApply: () => void
|
||||
}
|
||||
|
||||
const GeneratedResult: FC<GeneratedResultProps> = ({
|
||||
schema,
|
||||
isGenerating,
|
||||
onBack,
|
||||
onRegenerate,
|
||||
onClose,
|
||||
onApply,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
const [parseError, setParseError] = useState<Error | null>(null)
|
||||
const [validationError, setValidationError] = useState<string>('')
|
||||
|
||||
const formatJSON = (json: SchemaRoot) => {
|
||||
try {
|
||||
const schema = JSON.stringify(json, null, 2)
|
||||
setParseError(null)
|
||||
return schema
|
||||
}
|
||||
catch (e) {
|
||||
if (e instanceof Error)
|
||||
setParseError(e)
|
||||
else
|
||||
setParseError(new Error('Invalid JSON'))
|
||||
return ''
|
||||
}
|
||||
}
|
||||
|
||||
const jsonSchema = useMemo(() => formatJSON(schema), [schema])
|
||||
|
||||
const handleApply = useCallback(() => {
|
||||
const validationErrors = validateSchemaAgainstDraft7(schema)
|
||||
if (validationErrors.length > 0) {
|
||||
setValidationError(getValidationErrorMessage(validationErrors))
|
||||
return
|
||||
}
|
||||
onApply()
|
||||
setValidationError('')
|
||||
}, [schema, onApply])
|
||||
|
||||
return (
|
||||
<div className='flex w-[480px] flex-col rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-2xl shadow-shadow-shadow-9'>
|
||||
{
|
||||
isGenerating ? (
|
||||
<div className='flex h-[600px] flex-col items-center justify-center gap-y-3'>
|
||||
<Loading type='area' />
|
||||
<div className='system-xs-regular text-text-tertiary'>{t('workflow.nodes.llm.jsonSchema.generating')}</div>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className='absolute right-2.5 top-2.5 flex h-8 w-8 items-center justify-center' onClick={onClose}>
|
||||
<RiCloseLine className='h-4 w-4 text-text-tertiary' />
|
||||
</div>
|
||||
{/* Title */}
|
||||
<div className='flex flex-col gap-y-[0.5px] px-3 pb-1 pt-3.5'>
|
||||
<div className='system-xl-semibold flex pl-1 pr-8 text-text-primary'>
|
||||
{t('workflow.nodes.llm.jsonSchema.generatedResult')}
|
||||
</div>
|
||||
<div className='system-xs-regular flex px-1 text-text-tertiary'>
|
||||
{t('workflow.nodes.llm.jsonSchema.resultTip')}
|
||||
</div>
|
||||
</div>
|
||||
{/* Content */}
|
||||
<div className='px-4 py-2'>
|
||||
<CodeEditor
|
||||
className='rounded-lg'
|
||||
editorWrapperClassName='h-[424px]'
|
||||
value={jsonSchema}
|
||||
readOnly
|
||||
showFormatButton={false}
|
||||
/>
|
||||
{parseError && <ErrorMessage message={parseError.message} />}
|
||||
{validationError && <ErrorMessage message={validationError} />}
|
||||
</div>
|
||||
{/* Footer */}
|
||||
<div className='flex items-center justify-between p-4 pt-2'>
|
||||
<Button variant='secondary' className='flex items-center gap-x-0.5' onClick={onBack}>
|
||||
<RiArrowLeftLine className='h-4 w-4' />
|
||||
<span>{t('workflow.nodes.llm.jsonSchema.back')}</span>
|
||||
</Button>
|
||||
<div className='flex items-center gap-x-2'>
|
||||
<Button
|
||||
variant='secondary'
|
||||
className='flex items-center gap-x-0.5'
|
||||
onClick={onRegenerate}
|
||||
>
|
||||
<RiSparklingLine className='h-4 w-4' />
|
||||
<span>{t('workflow.nodes.llm.jsonSchema.regenerate')}</span>
|
||||
</Button>
|
||||
<Button variant='primary' onClick={handleApply}>
|
||||
{t('workflow.nodes.llm.jsonSchema.apply')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(GeneratedResult)
|
||||
@ -0,0 +1,183 @@
|
||||
import React, { type FC, useCallback, useEffect, useState } from 'react'
|
||||
import type { SchemaRoot } from '../../../types'
|
||||
import {
|
||||
PortalToFollowElem,
|
||||
PortalToFollowElemContent,
|
||||
PortalToFollowElemTrigger,
|
||||
} from '@/app/components/base/portal-to-follow-elem'
|
||||
import useTheme from '@/hooks/use-theme'
|
||||
import type { CompletionParams, Model } from '@/types/app'
|
||||
import { ModelModeType } from '@/types/app'
|
||||
import { Theme } from '@/types/app'
|
||||
import { SchemaGeneratorDark, SchemaGeneratorLight } from './assets'
|
||||
import cn from '@/utils/classnames'
|
||||
import type { ModelInfo } from './prompt-editor'
|
||||
import PromptEditor from './prompt-editor'
|
||||
import GeneratedResult from './generated-result'
|
||||
import { useGenerateStructuredOutputRules } from '@/service/use-common'
|
||||
import Toast from '@/app/components/base/toast'
|
||||
import { type FormValue, ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
|
||||
import { useModelListAndDefaultModelAndCurrentProviderAndModel } from '@/app/components/header/account-setting/model-provider-page/hooks'
|
||||
import { useVisualEditorStore } from '../visual-editor/store'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { useMittContext } from '../visual-editor/context'
|
||||
|
||||
type JsonSchemaGeneratorProps = {
|
||||
onApply: (schema: SchemaRoot) => void
|
||||
crossAxisOffset?: number
|
||||
}
|
||||
|
||||
enum GeneratorView {
|
||||
promptEditor = 'promptEditor',
|
||||
result = 'result',
|
||||
}
|
||||
|
||||
export const JsonSchemaGenerator: FC<JsonSchemaGeneratorProps> = ({
|
||||
onApply,
|
||||
crossAxisOffset,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
const [open, setOpen] = useState(false)
|
||||
const [view, setView] = useState(GeneratorView.promptEditor)
|
||||
const [model, setModel] = useState<Model>({
|
||||
name: '',
|
||||
provider: '',
|
||||
mode: ModelModeType.completion,
|
||||
completion_params: {} as CompletionParams,
|
||||
})
|
||||
const [instruction, setInstruction] = useState('')
|
||||
const [schema, setSchema] = useState<SchemaRoot | null>(null)
|
||||
const { theme } = useTheme()
|
||||
const {
|
||||
defaultModel,
|
||||
} = useModelListAndDefaultModelAndCurrentProviderAndModel(ModelTypeEnum.textGeneration)
|
||||
const advancedEditing = useVisualEditorStore(state => state.advancedEditing)
|
||||
const isAddingNewField = useVisualEditorStore(state => state.isAddingNewField)
|
||||
const { emit } = useMittContext()
|
||||
const SchemaGenerator = theme === Theme.light ? SchemaGeneratorLight : SchemaGeneratorDark
|
||||
|
||||
useEffect(() => {
|
||||
if (defaultModel) {
|
||||
setModel(prev => ({
|
||||
...prev,
|
||||
name: defaultModel.model,
|
||||
provider: defaultModel.provider.provider,
|
||||
}))
|
||||
}
|
||||
}, [defaultModel])
|
||||
|
||||
const handleTrigger = useCallback((e: React.MouseEvent<HTMLElement, MouseEvent>) => {
|
||||
e.stopPropagation()
|
||||
if (advancedEditing || isAddingNewField)
|
||||
emit('quitEditing', {})
|
||||
setOpen(!open)
|
||||
}, [open, advancedEditing, isAddingNewField, emit])
|
||||
|
||||
const onClose = useCallback(() => {
|
||||
setOpen(false)
|
||||
}, [])
|
||||
|
||||
const handleModelChange = useCallback((model: ModelInfo) => {
|
||||
setModel(prev => ({
|
||||
...prev,
|
||||
provider: model.provider,
|
||||
name: model.modelId,
|
||||
mode: model.mode as ModelModeType,
|
||||
}))
|
||||
}, [])
|
||||
|
||||
const handleCompletionParamsChange = useCallback((newParams: FormValue) => {
|
||||
setModel(prev => ({
|
||||
...prev,
|
||||
completion_params: newParams as CompletionParams,
|
||||
}),
|
||||
)
|
||||
}, [])
|
||||
|
||||
const { mutateAsync: generateStructuredOutputRules, isPending: isGenerating } = useGenerateStructuredOutputRules()
|
||||
|
||||
const generateSchema = useCallback(async () => {
|
||||
const { output, error } = await generateStructuredOutputRules({ instruction, model_config: model! })
|
||||
if (error) {
|
||||
Toast.notify({
|
||||
type: 'error',
|
||||
message: error,
|
||||
})
|
||||
setSchema(null)
|
||||
setView(GeneratorView.promptEditor)
|
||||
return
|
||||
}
|
||||
return output
|
||||
}, [instruction, model, generateStructuredOutputRules])
|
||||
|
||||
const handleGenerate = useCallback(async () => {
|
||||
setView(GeneratorView.result)
|
||||
const output = await generateSchema()
|
||||
if (output === undefined) return
|
||||
setSchema(JSON.parse(output))
|
||||
}, [generateSchema])
|
||||
|
||||
const goBackToPromptEditor = () => {
|
||||
setView(GeneratorView.promptEditor)
|
||||
}
|
||||
|
||||
const handleRegenerate = useCallback(async () => {
|
||||
const output = await generateSchema()
|
||||
if (output === undefined) return
|
||||
setSchema(JSON.parse(output))
|
||||
}, [generateSchema])
|
||||
|
||||
const handleApply = () => {
|
||||
onApply(schema!)
|
||||
setOpen(false)
|
||||
}
|
||||
|
||||
return (
|
||||
<PortalToFollowElem
|
||||
open={open}
|
||||
onOpenChange={setOpen}
|
||||
placement='bottom-end'
|
||||
offset={{
|
||||
mainAxis: 4,
|
||||
crossAxis: crossAxisOffset ?? 0,
|
||||
}}
|
||||
>
|
||||
<PortalToFollowElemTrigger onClick={handleTrigger}>
|
||||
<button
|
||||
type='button'
|
||||
className={cn(
|
||||
'flex h-6 w-6 items-center justify-center rounded-md p-0.5 hover:bg-state-accent-hover',
|
||||
open && 'bg-state-accent-active',
|
||||
)}
|
||||
>
|
||||
<SchemaGenerator />
|
||||
</button>
|
||||
</PortalToFollowElemTrigger>
|
||||
<PortalToFollowElemContent className='z-[100]'>
|
||||
{view === GeneratorView.promptEditor && (
|
||||
<PromptEditor
|
||||
instruction={instruction}
|
||||
model={model}
|
||||
onInstructionChange={setInstruction}
|
||||
onCompletionParamsChange={handleCompletionParamsChange}
|
||||
onGenerate={handleGenerate}
|
||||
onClose={onClose}
|
||||
onModelChange={handleModelChange}
|
||||
/>
|
||||
)}
|
||||
{view === GeneratorView.result && (
|
||||
<GeneratedResult
|
||||
schema={schema!}
|
||||
isGenerating={isGenerating}
|
||||
onBack={goBackToPromptEditor}
|
||||
onRegenerate={handleRegenerate}
|
||||
onApply={handleApply}
|
||||
onClose={onClose}
|
||||
/>
|
||||
)}
|
||||
</PortalToFollowElemContent>
|
||||
</PortalToFollowElem>
|
||||
)
|
||||
}
|
||||
|
||||
export default JsonSchemaGenerator
|
||||
@ -0,0 +1,108 @@
|
||||
import React, { useCallback } from 'react'
|
||||
import type { FC } from 'react'
|
||||
import { RiCloseLine, RiSparklingFill } from '@remixicon/react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Textarea from '@/app/components/base/textarea'
|
||||
import Tooltip from '@/app/components/base/tooltip'
|
||||
import Button from '@/app/components/base/button'
|
||||
import type { FormValue } from '@/app/components/header/account-setting/model-provider-page/declarations'
|
||||
import ModelParameterModal from '@/app/components/header/account-setting/model-provider-page/model-parameter-modal'
|
||||
import type { Model } from '@/types/app'
|
||||
|
||||
export type ModelInfo = {
|
||||
modelId: string
|
||||
provider: string
|
||||
mode?: string
|
||||
features?: string[]
|
||||
}
|
||||
|
||||
type PromptEditorProps = {
|
||||
instruction: string
|
||||
model: Model
|
||||
onInstructionChange: (instruction: string) => void
|
||||
onCompletionParamsChange: (newParams: FormValue) => void
|
||||
onModelChange: (model: ModelInfo) => void
|
||||
onClose: () => void
|
||||
onGenerate: () => void
|
||||
}
|
||||
|
||||
const PromptEditor: FC<PromptEditorProps> = ({
|
||||
instruction,
|
||||
model,
|
||||
onInstructionChange,
|
||||
onCompletionParamsChange,
|
||||
onClose,
|
||||
onGenerate,
|
||||
onModelChange,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
const handleInstructionChange = useCallback((e: React.ChangeEvent<HTMLTextAreaElement>) => {
|
||||
onInstructionChange(e.target.value)
|
||||
}, [onInstructionChange])
|
||||
|
||||
return (
|
||||
<div className='relative flex w-[480px] flex-col rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-2xl shadow-shadow-shadow-9'>
|
||||
<div className='absolute right-2.5 top-2.5 flex h-8 w-8 items-center justify-center' onClick={onClose}>
|
||||
<RiCloseLine className='h-4 w-4 text-text-tertiary'/>
|
||||
</div>
|
||||
{/* Title */}
|
||||
<div className='flex flex-col gap-y-[0.5px] px-3 pb-1 pt-3.5'>
|
||||
<div className='system-xl-semibold flex pl-1 pr-8 text-text-primary'>
|
||||
{t('workflow.nodes.llm.jsonSchema.generateJsonSchema')}
|
||||
</div>
|
||||
<div className='system-xs-regular flex px-1 text-text-tertiary'>
|
||||
{t('workflow.nodes.llm.jsonSchema.generationTip')}
|
||||
</div>
|
||||
</div>
|
||||
{/* Content */}
|
||||
<div className='flex flex-col gap-y-1 px-4 py-2'>
|
||||
<div className='system-sm-semibold-uppercase flex h-6 items-center text-text-secondary'>
|
||||
{t('common.modelProvider.model')}
|
||||
</div>
|
||||
<ModelParameterModal
|
||||
popupClassName='!w-[448px]'
|
||||
portalToFollowElemContentClassName='z-[1000]'
|
||||
isAdvancedMode={true}
|
||||
provider={model.provider}
|
||||
mode={model.mode}
|
||||
completionParams={model.completion_params}
|
||||
modelId={model.name}
|
||||
setModel={onModelChange}
|
||||
onCompletionParamsChange={onCompletionParamsChange}
|
||||
hideDebugWithMultipleModel
|
||||
/>
|
||||
</div>
|
||||
<div className='flex flex-col gap-y-1 px-4 py-2'>
|
||||
<div className='system-sm-semibold-uppercase flex h-6 items-center text-text-secondary'>
|
||||
<span>{t('workflow.nodes.llm.jsonSchema.instruction')}</span>
|
||||
<Tooltip popupContent={t('workflow.nodes.llm.jsonSchema.promptTooltip')} />
|
||||
</div>
|
||||
<div className='flex items-center'>
|
||||
<Textarea
|
||||
className='h-[364px] resize-none px-2 py-1'
|
||||
value={instruction}
|
||||
placeholder={t('workflow.nodes.llm.jsonSchema.promptPlaceholder')}
|
||||
onChange={handleInstructionChange}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/* Footer */}
|
||||
<div className='flex justify-end gap-x-2 p-4 pt-2'>
|
||||
<Button variant='secondary' onClick={onClose}>
|
||||
{t('common.operation.cancel')}
|
||||
</Button>
|
||||
<Button
|
||||
variant='primary'
|
||||
className='flex items-center gap-x-0.5'
|
||||
onClick={onGenerate}
|
||||
>
|
||||
<RiSparklingFill className='h-4 w-4' />
|
||||
<span>{t('workflow.nodes.llm.jsonSchema.generate')}</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(PromptEditor)
|
||||
@ -0,0 +1,23 @@
|
||||
import React, { type FC } from 'react'
|
||||
import CodeEditor from './code-editor'
|
||||
|
||||
type SchemaEditorProps = {
|
||||
schema: string
|
||||
onUpdate: (schema: string) => void
|
||||
}
|
||||
|
||||
const SchemaEditor: FC<SchemaEditorProps> = ({
|
||||
schema,
|
||||
onUpdate,
|
||||
}) => {
|
||||
return (
|
||||
<CodeEditor
|
||||
className='rounded-xl'
|
||||
editorWrapperClassName='grow'
|
||||
value={schema}
|
||||
onUpdate={onUpdate}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export default SchemaEditor
|
||||
@ -0,0 +1,33 @@
|
||||
import React, { useCallback } from 'react'
|
||||
import Button from '@/app/components/base/button'
|
||||
import { RiAddCircleFill } from '@remixicon/react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { useVisualEditorStore } from './store'
|
||||
import { useMittContext } from './context'
|
||||
|
||||
const AddField = () => {
|
||||
const { t } = useTranslation()
|
||||
const setIsAddingNewField = useVisualEditorStore(state => state.setIsAddingNewField)
|
||||
const { emit } = useMittContext()
|
||||
|
||||
const handleAddField = useCallback(() => {
|
||||
setIsAddingNewField(true)
|
||||
emit('addField', { path: [] })
|
||||
}, [setIsAddingNewField, emit])
|
||||
|
||||
return (
|
||||
<div className='py-2 pl-5'>
|
||||
<Button
|
||||
size='small'
|
||||
variant='secondary-accent'
|
||||
className='flex items-center gap-x-[1px]'
|
||||
onClick={handleAddField}
|
||||
>
|
||||
<RiAddCircleFill className='h-3.5 w-3.5'/>
|
||||
<span className='px-[3px]'>{t('workflow.nodes.llm.jsonSchema.addField')}</span>
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(AddField)
|
||||
@ -0,0 +1,46 @@
|
||||
import React, { type FC } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
type CardProps = {
|
||||
name: string
|
||||
type: string
|
||||
required: boolean
|
||||
description?: string
|
||||
}
|
||||
|
||||
const Card: FC<CardProps> = ({
|
||||
name,
|
||||
type,
|
||||
required,
|
||||
description,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
return (
|
||||
<div className='flex flex-col py-0.5'>
|
||||
<div className='flex h-6 items-center gap-x-1 pl-1 pr-0.5'>
|
||||
<div className='system-sm-semibold truncate border border-transparent px-1 py-px text-text-primary'>
|
||||
{name}
|
||||
</div>
|
||||
<div className='system-xs-medium px-1 py-0.5 text-text-tertiary'>
|
||||
{type}
|
||||
</div>
|
||||
{
|
||||
required && (
|
||||
<div className='system-2xs-medium-uppercase px-1 py-0.5 text-text-warning'>
|
||||
{t('workflow.nodes.llm.jsonSchema.required')}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
|
||||
{description && (
|
||||
<div className='system-xs-regular truncate px-2 pb-1 text-text-tertiary'>
|
||||
{description}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(Card)
|
||||
@ -0,0 +1,50 @@
|
||||
import {
|
||||
createContext,
|
||||
useContext,
|
||||
useRef,
|
||||
} from 'react'
|
||||
import { createVisualEditorStore } from './store'
|
||||
import { useMitt } from '@/hooks/use-mitt'
|
||||
import { noop } from 'lodash-es'
|
||||
|
||||
type VisualEditorStore = ReturnType<typeof createVisualEditorStore>
|
||||
|
||||
type VisualEditorContextType = VisualEditorStore | null
|
||||
|
||||
type VisualEditorProviderProps = {
|
||||
children: React.ReactNode
|
||||
}
|
||||
|
||||
export const VisualEditorContext = createContext<VisualEditorContextType>(null)
|
||||
|
||||
export const VisualEditorContextProvider = ({ children }: VisualEditorProviderProps) => {
|
||||
const storeRef = useRef<VisualEditorStore>()
|
||||
|
||||
if (!storeRef.current)
|
||||
storeRef.current = createVisualEditorStore()
|
||||
|
||||
return (
|
||||
<VisualEditorContext.Provider value={storeRef.current}>
|
||||
{children}
|
||||
</VisualEditorContext.Provider>
|
||||
)
|
||||
}
|
||||
|
||||
export const MittContext = createContext<ReturnType<typeof useMitt>>({
|
||||
emit: noop,
|
||||
useSubscribe: noop,
|
||||
})
|
||||
|
||||
export const MittProvider = ({ children }: { children: React.ReactNode }) => {
|
||||
const mitt = useMitt()
|
||||
|
||||
return (
|
||||
<MittContext.Provider value={mitt}>
|
||||
{children}
|
||||
</MittContext.Provider>
|
||||
)
|
||||
}
|
||||
|
||||
export const useMittContext = () => {
|
||||
return useContext(MittContext)
|
||||
}
|
||||
@ -0,0 +1,56 @@
|
||||
import type { FC } from 'react'
|
||||
import React from 'react'
|
||||
import Tooltip from '@/app/components/base/tooltip'
|
||||
import { RiAddCircleLine, RiDeleteBinLine, RiEditLine } from '@remixicon/react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
type ActionsProps = {
|
||||
disableAddBtn: boolean
|
||||
onAddChildField: () => void
|
||||
onEdit: () => void
|
||||
onDelete: () => void
|
||||
}
|
||||
|
||||
const Actions: FC<ActionsProps> = ({
|
||||
disableAddBtn,
|
||||
onAddChildField,
|
||||
onEdit,
|
||||
onDelete,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
return (
|
||||
<div className='flex items-center gap-x-0.5'>
|
||||
<Tooltip popupContent={t('workflow.nodes.llm.jsonSchema.addChildField')}>
|
||||
<button
|
||||
type='button'
|
||||
className='flex h-6 w-6 items-center justify-center rounded-md text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary disabled:cursor-not-allowed disabled:text-text-disabled'
|
||||
onClick={onAddChildField}
|
||||
disabled={disableAddBtn}
|
||||
>
|
||||
<RiAddCircleLine className='h-4 w-4'/>
|
||||
</button>
|
||||
</Tooltip>
|
||||
<Tooltip popupContent={t('common.operation.edit')}>
|
||||
<button
|
||||
type='button'
|
||||
className='flex h-6 w-6 items-center justify-center rounded-md text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary'
|
||||
onClick={onEdit}
|
||||
>
|
||||
<RiEditLine className='h-4 w-4' />
|
||||
</button>
|
||||
</Tooltip>
|
||||
<Tooltip popupContent={t('common.operation.remove')}>
|
||||
<button
|
||||
type='button'
|
||||
className='flex h-6 w-6 items-center justify-center rounded-md text-text-tertiary hover:bg-state-destructive-hover hover:text-text-destructive'
|
||||
onClick={onDelete}
|
||||
>
|
||||
<RiDeleteBinLine className='h-4 w-4' />
|
||||
</button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(Actions)
|
||||
@ -0,0 +1,59 @@
|
||||
import React, { type FC } from 'react'
|
||||
import Button from '@/app/components/base/button'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { getKeyboardKeyCodeBySystem, getKeyboardKeyNameBySystem } from '@/app/components/workflow/utils'
|
||||
import { useKeyPress } from 'ahooks'
|
||||
|
||||
type AdvancedActionsProps = {
|
||||
isConfirmDisabled: boolean
|
||||
onCancel: () => void
|
||||
onConfirm: () => void
|
||||
}
|
||||
|
||||
const Key = (props: { keyName: string }) => {
|
||||
const { keyName } = props
|
||||
return (
|
||||
<kbd className='system-kbd flex h-4 min-w-4 items-center justify-center rounded-[4px] bg-components-kbd-bg-white px-px text-text-primary-on-surface'>
|
||||
{keyName}
|
||||
</kbd>
|
||||
)
|
||||
}
|
||||
|
||||
const AdvancedActions: FC<AdvancedActionsProps> = ({
|
||||
isConfirmDisabled,
|
||||
onCancel,
|
||||
onConfirm,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
useKeyPress([`${getKeyboardKeyCodeBySystem('ctrl')}.enter`], (e) => {
|
||||
e.preventDefault()
|
||||
onConfirm()
|
||||
}, {
|
||||
exactMatch: true,
|
||||
useCapture: true,
|
||||
})
|
||||
|
||||
return (
|
||||
<div className='flex items-center gap-x-1'>
|
||||
<Button size='small' variant='secondary' onClick={onCancel}>
|
||||
{t('common.operation.cancel')}
|
||||
</Button>
|
||||
<Button
|
||||
className='flex items-center gap-x-1'
|
||||
disabled={isConfirmDisabled}
|
||||
size='small'
|
||||
variant='primary'
|
||||
onClick={onConfirm}
|
||||
>
|
||||
<span>{t('common.operation.confirm')}</span>
|
||||
<div className='flex items-center gap-x-0.5'>
|
||||
<Key keyName={getKeyboardKeyNameBySystem('ctrl')} />
|
||||
<Key keyName='⏎' />
|
||||
</div>
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(AdvancedActions)
|
||||
@ -0,0 +1,77 @@
|
||||
import React, { type FC, useCallback, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Divider from '@/app/components/base/divider'
|
||||
import Textarea from '@/app/components/base/textarea'
|
||||
|
||||
export type AdvancedOptionsType = {
|
||||
enum: string
|
||||
}
|
||||
|
||||
type AdvancedOptionsProps = {
|
||||
options: AdvancedOptionsType
|
||||
onChange: (options: AdvancedOptionsType) => void
|
||||
}
|
||||
|
||||
const AdvancedOptions: FC<AdvancedOptionsProps> = ({
|
||||
onChange,
|
||||
options,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
// const [showAdvancedOptions, setShowAdvancedOptions] = useState(false)
|
||||
const [enumValue, setEnumValue] = useState(options.enum)
|
||||
|
||||
const handleEnumChange = useCallback((e: React.ChangeEvent<HTMLTextAreaElement>) => {
|
||||
setEnumValue(e.target.value)
|
||||
}, [])
|
||||
|
||||
const handleEnumBlur = useCallback((e: React.FocusEvent<HTMLTextAreaElement>) => {
|
||||
onChange({ enum: e.target.value })
|
||||
}, [onChange])
|
||||
|
||||
// const handleToggleAdvancedOptions = useCallback(() => {
|
||||
// setShowAdvancedOptions(prev => !prev)
|
||||
// }, [])
|
||||
|
||||
return (
|
||||
<div className='border-t border-divider-subtle'>
|
||||
{/* {showAdvancedOptions ? ( */}
|
||||
<div className='flex flex-col gap-y-1 px-2 py-1.5'>
|
||||
<div className='flex w-full items-center gap-x-2'>
|
||||
<span className='system-2xs-medium-uppercase text-text-tertiary'>
|
||||
{t('workflow.nodes.llm.jsonSchema.stringValidations')}
|
||||
</span>
|
||||
<div className='grow'>
|
||||
<Divider type='horizontal' className='my-0 h-px bg-line-divider-bg' />
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex flex-col'>
|
||||
<div className='system-xs-medium flex h-6 items-center text-text-secondary'>
|
||||
Enum
|
||||
</div>
|
||||
<Textarea
|
||||
size='small'
|
||||
className='min-h-6'
|
||||
value={enumValue}
|
||||
onChange={handleEnumChange}
|
||||
onBlur={handleEnumBlur}
|
||||
placeholder={'abcd, 1, 1.5, etc.'}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/* ) : (
|
||||
<button
|
||||
type='button'
|
||||
className='flex items-center gap-x-0.5 pb-1 pl-1.5 pr-2 pt-2'
|
||||
onClick={handleToggleAdvancedOptions}
|
||||
>
|
||||
<RiArrowDownDoubleLine className='h-3 w-3 text-text-tertiary' />
|
||||
<span className='system-xs-regular text-text-tertiary'>
|
||||
{t('workflow.nodes.llm.jsonSchema.showAdvancedOptions')}
|
||||
</span>
|
||||
</button>
|
||||
)} */}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(AdvancedOptions)
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue