feat(question-classifier): add drag-and-drop sorting for topics list
- Implement topic sorting functionality using react-sortablejs - Add draggable handle and visual feedback during sorting - Update node internals after sorting to ensure proper renderingpull/22066/head
Mminamiyama
11 months ago
parent
d61ea5a2de
commit
d6cfb21992
@ -1,144 +1,146 @@
|
|||||||
import type { FC } from 'react'
|
import type { FC } from 'react'
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
import { useTranslation } from 'react-i18next'
|
import { useTranslation } from 'react-i18next'
|
||||||
import VarReferencePicker from '../_base/components/variable/var-reference-picker'
|
import VarReferencePicker from '../_base/components/variable/var-reference-picker'
|
||||||
import ConfigVision from '../_base/components/config-vision'
|
import ConfigVision from '../_base/components/config-vision'
|
||||||
import useConfig from './use-config'
|
import useConfig from './use-config'
|
||||||
import ClassList from './components/class-list'
|
import ClassList from './components/class-list'
|
||||||
import AdvancedSetting from './components/advanced-setting'
|
import AdvancedSetting from './components/advanced-setting'
|
||||||
import type { QuestionClassifierNodeType } from './types'
|
import type { QuestionClassifierNodeType } from './types'
|
||||||
import Field from '@/app/components/workflow/nodes/_base/components/field'
|
import Field from '@/app/components/workflow/nodes/_base/components/field'
|
||||||
import ModelParameterModal from '@/app/components/header/account-setting/model-provider-page/model-parameter-modal'
|
import ModelParameterModal from '@/app/components/header/account-setting/model-provider-page/model-parameter-modal'
|
||||||
import type { NodePanelProps } from '@/app/components/workflow/types'
|
import type { NodePanelProps } from '@/app/components/workflow/types'
|
||||||
import Split from '@/app/components/workflow/nodes/_base/components/split'
|
import Split from '@/app/components/workflow/nodes/_base/components/split'
|
||||||
import OutputVars, { VarItem } from '@/app/components/workflow/nodes/_base/components/output-vars'
|
import OutputVars, { VarItem } from '@/app/components/workflow/nodes/_base/components/output-vars'
|
||||||
import { FieldCollapse } from '@/app/components/workflow/nodes/_base/components/collapse'
|
import { FieldCollapse } from '@/app/components/workflow/nodes/_base/components/collapse'
|
||||||
|
|
||||||
const i18nPrefix = 'workflow.nodes.questionClassifiers'
|
const i18nPrefix = 'workflow.nodes.questionClassifiers'
|
||||||
|
|
||||||
const Panel: FC<NodePanelProps<QuestionClassifierNodeType>> = ({
|
const Panel: FC<NodePanelProps<QuestionClassifierNodeType>> = ({
|
||||||
id,
|
id,
|
||||||
data,
|
data,
|
||||||
}) => {
|
}) => {
|
||||||
const { t } = useTranslation()
|
const { t } = useTranslation()
|
||||||
|
|
||||||
const {
|
const {
|
||||||
readOnly,
|
readOnly,
|
||||||
inputs,
|
inputs,
|
||||||
handleModelChanged,
|
handleModelChanged,
|
||||||
isChatMode,
|
isChatMode,
|
||||||
isChatModel,
|
isChatModel,
|
||||||
handleCompletionParamsChange,
|
handleCompletionParamsChange,
|
||||||
handleQueryVarChange,
|
handleQueryVarChange,
|
||||||
handleTopicsChange,
|
handleTopicsChange,
|
||||||
hasSetBlockStatus,
|
hasSetBlockStatus,
|
||||||
availableVars,
|
availableVars,
|
||||||
availableNodesWithParent,
|
availableNodesWithParent,
|
||||||
handleInstructionChange,
|
handleInstructionChange,
|
||||||
handleMemoryChange,
|
handleMemoryChange,
|
||||||
isVisionModel,
|
isVisionModel,
|
||||||
handleVisionResolutionChange,
|
handleVisionResolutionChange,
|
||||||
handleVisionResolutionEnabledChange,
|
handleVisionResolutionEnabledChange,
|
||||||
filterVar,
|
filterVar,
|
||||||
} = useConfig(id, data)
|
handleSortTopic,
|
||||||
|
} = useConfig(id, data)
|
||||||
const model = inputs.model
|
|
||||||
|
const model = inputs.model
|
||||||
return (
|
|
||||||
<div className='pt-2'>
|
return (
|
||||||
<div className='space-y-4 px-4'>
|
<div className='pt-2'>
|
||||||
<Field
|
<div className='space-y-4 px-4'>
|
||||||
title={t(`${i18nPrefix}.model`)}
|
<Field
|
||||||
required
|
title={t(`${i18nPrefix}.model`)}
|
||||||
>
|
required
|
||||||
<ModelParameterModal
|
>
|
||||||
popupClassName='!w-[387px]'
|
<ModelParameterModal
|
||||||
isInWorkflow
|
popupClassName='!w-[387px]'
|
||||||
isAdvancedMode={true}
|
isInWorkflow
|
||||||
mode={model?.mode}
|
isAdvancedMode={true}
|
||||||
provider={model?.provider}
|
mode={model?.mode}
|
||||||
completionParams={model.completion_params}
|
provider={model?.provider}
|
||||||
modelId={model.name}
|
completionParams={model.completion_params}
|
||||||
setModel={handleModelChanged}
|
modelId={model.name}
|
||||||
onCompletionParamsChange={handleCompletionParamsChange}
|
setModel={handleModelChanged}
|
||||||
hideDebugWithMultipleModel
|
onCompletionParamsChange={handleCompletionParamsChange}
|
||||||
debugWithMultipleModel={false}
|
hideDebugWithMultipleModel
|
||||||
readonly={readOnly}
|
debugWithMultipleModel={false}
|
||||||
/>
|
readonly={readOnly}
|
||||||
</Field>
|
/>
|
||||||
<Field
|
</Field>
|
||||||
title={t(`${i18nPrefix}.inputVars`)}
|
<Field
|
||||||
required
|
title={t(`${i18nPrefix}.inputVars`)}
|
||||||
>
|
required
|
||||||
<VarReferencePicker
|
>
|
||||||
readonly={readOnly}
|
<VarReferencePicker
|
||||||
isShowNodeName
|
readonly={readOnly}
|
||||||
nodeId={id}
|
isShowNodeName
|
||||||
value={inputs.query_variable_selector}
|
nodeId={id}
|
||||||
onChange={handleQueryVarChange}
|
value={inputs.query_variable_selector}
|
||||||
filterVar={filterVar}
|
onChange={handleQueryVarChange}
|
||||||
/>
|
filterVar={filterVar}
|
||||||
</Field>
|
/>
|
||||||
<Split />
|
</Field>
|
||||||
<ConfigVision
|
<Split />
|
||||||
nodeId={id}
|
<ConfigVision
|
||||||
readOnly={readOnly}
|
nodeId={id}
|
||||||
isVisionModel={isVisionModel}
|
readOnly={readOnly}
|
||||||
enabled={inputs.vision?.enabled}
|
isVisionModel={isVisionModel}
|
||||||
onEnabledChange={handleVisionResolutionEnabledChange}
|
enabled={inputs.vision?.enabled}
|
||||||
config={inputs.vision?.configs}
|
onEnabledChange={handleVisionResolutionEnabledChange}
|
||||||
onConfigChange={handleVisionResolutionChange}
|
config={inputs.vision?.configs}
|
||||||
/>
|
onConfigChange={handleVisionResolutionChange}
|
||||||
<Field
|
/>
|
||||||
title={t(`${i18nPrefix}.class`)}
|
<Field
|
||||||
required
|
title={t(`${i18nPrefix}.class`)}
|
||||||
>
|
required
|
||||||
<ClassList
|
>
|
||||||
nodeId={id}
|
<ClassList
|
||||||
list={inputs.classes}
|
nodeId={id}
|
||||||
onChange={handleTopicsChange}
|
list={inputs.classes}
|
||||||
readonly={readOnly}
|
onChange={handleTopicsChange}
|
||||||
filterVar={filterVar}
|
readonly={readOnly}
|
||||||
/>
|
filterVar={filterVar}
|
||||||
</Field>
|
handleSortTopic={handleSortTopic}
|
||||||
<Split />
|
/>
|
||||||
</div>
|
</Field>
|
||||||
<FieldCollapse
|
<Split />
|
||||||
title={t(`${i18nPrefix}.advancedSetting`)}
|
</div>
|
||||||
>
|
<FieldCollapse
|
||||||
<AdvancedSetting
|
title={t(`${i18nPrefix}.advancedSetting`)}
|
||||||
hideMemorySetting={!isChatMode}
|
>
|
||||||
instruction={inputs.instruction}
|
<AdvancedSetting
|
||||||
onInstructionChange={handleInstructionChange}
|
hideMemorySetting={!isChatMode}
|
||||||
memory={inputs.memory}
|
instruction={inputs.instruction}
|
||||||
onMemoryChange={handleMemoryChange}
|
onInstructionChange={handleInstructionChange}
|
||||||
readonly={readOnly}
|
memory={inputs.memory}
|
||||||
isChatApp={isChatMode}
|
onMemoryChange={handleMemoryChange}
|
||||||
isChatModel={isChatModel}
|
readonly={readOnly}
|
||||||
hasSetBlockStatus={hasSetBlockStatus}
|
isChatApp={isChatMode}
|
||||||
nodesOutputVars={availableVars}
|
isChatModel={isChatModel}
|
||||||
availableNodes={availableNodesWithParent}
|
hasSetBlockStatus={hasSetBlockStatus}
|
||||||
/>
|
nodesOutputVars={availableVars}
|
||||||
</FieldCollapse>
|
availableNodes={availableNodesWithParent}
|
||||||
<Split />
|
/>
|
||||||
<div>
|
</FieldCollapse>
|
||||||
<OutputVars>
|
<Split />
|
||||||
<>
|
<div>
|
||||||
<VarItem
|
<OutputVars>
|
||||||
name='class_name'
|
<>
|
||||||
type='string'
|
<VarItem
|
||||||
description={t(`${i18nPrefix}.outputVars.className`)}
|
name='class_name'
|
||||||
/>
|
type='string'
|
||||||
<VarItem
|
description={t(`${i18nPrefix}.outputVars.className`)}
|
||||||
name='usage'
|
/>
|
||||||
type='object'
|
<VarItem
|
||||||
description={t(`${i18nPrefix}.outputVars.usage`)}
|
name='usage'
|
||||||
/>
|
type='object'
|
||||||
</>
|
description={t(`${i18nPrefix}.outputVars.usage`)}
|
||||||
</OutputVars>
|
/>
|
||||||
</div>
|
</>
|
||||||
</div>
|
</OutputVars>
|
||||||
)
|
</div>
|
||||||
}
|
</div>
|
||||||
|
)
|
||||||
export default React.memo(Panel)
|
}
|
||||||
|
|
||||||
|
export default React.memo(Panel)
|
||||||
|
|||||||
Loading…
Reference in New Issue