wzj/dify-1.72
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat(question-classifier): add drag-and-drop sorting for topics list (#22066)

Browse Source 
Co-authored-by: crazywoola <427733928@qq.com>
This commit is contained in:
Minamiyama 2025-07-10 10:03:11 +08:00 committed by GitHub
parent 881a151d30
commit a9cc19f530
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 66 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
web/app/components/workflow/nodes/question-classifier/components/class-item.tsx
View File

@ -11,6 +11,8 @@ import { uniqueId } from 'lodash-es'
const i18nPrefix = 'workflow.nodes.questionClassifiers'
type Props = {
className?: string
headerClassName?: string
nodeId: string
payload: Topic
onChange: (payload: Topic) => void
@ -21,6 +23,8 @@ type Props = {
}
const ClassItem: FC<Props> = ({
className,
headerClassName,
nodeId,
payload,
onChange,
@ -49,6 +53,8 @@ const ClassItem: FC<Props> = ({
return (
<Editor
className={className}
headerClassName={headerClassName}
title={`${t(`${i18nPrefix}.class`)} ${index}`}
placeholder={t(`${i18nPrefix}.topicPlaceholder`)!}
value={payload.name}

55
web/app/components/workflow/nodes/question-classifier/components/class-list.tsx
View File

@ -8,6 +8,9 @@ import AddButton from '../../_base/components/add-button'
import Item from './class-item'
import type { Topic } from '@/app/components/workflow/nodes/question-classifier/types'
import type { ValueSelector, Var } from '@/app/components/workflow/types'
import { ReactSortable } from 'react-sortablejs'
import { noop } from 'lodash-es'
import cn from '@/utils/classnames'
const i18nPrefix = 'workflow.nodes.questionClassifiers'
@ -17,6 +20,7 @@ type Props = {
onChange: (list: Topic[]) => void
readonly?: boolean
filterVar: (payload: Var, valueSelector: ValueSelector) => boolean
handleSortTopic?: (newTopics: (Topic & { id: string })[]) => void
}
const ClassList: FC<Props> = ({
@ -25,6 +29,7 @@ const ClassList: FC<Props> = ({
onChange,
readonly,
filterVar,
handleSortTopic = noop,
}) => {
const { t } = useTranslation()
const { handleEdgeDeleteByDeleteBranch } = useEdgesInteractions()
@ -55,22 +60,48 @@ const ClassList: FC<Props> = ({
}
}, [list, onChange, handleEdgeDeleteByDeleteBranch, nodeId])
const topicCount = list.length
const handleSideWidth = 3
// Todo Remove; edit topic name
return (
<div className='space-y-2'>
<ReactSortable
list={list.map(item => ({ ...item }))}
setList={handleSortTopic}
handle='.handle'
ghostClass='bg-components-panel-bg'
animation={150}
disabled={readonly}
className='space-y-2'
>
{
list.map((item, index) => {
const canDrag = (() => {
if (readonly)
return false
return topicCount >= 2
})()
return (
<Item
nodeId={nodeId}
key={list[index].id}
payload={item}
onChange={handleClassChange(index)}
onRemove={handleRemoveClass(index)}
index={index + 1}
readonly={readonly}
filterVar={filterVar}
/>
<div key={item.id}
className={cn(
'group relative rounded-[10px] bg-components-panel-bg',
`-ml-${handleSideWidth} min-h-[40px] px-0 py-0`,
)}>
<div >
<Item
className={cn(canDrag && 'handle')}
headerClassName={cn(canDrag && 'cursor-grab')}
nodeId={nodeId}
key={list[index].id}
payload={item}
onChange={handleClassChange(index)}
onRemove={handleRemoveClass(index)}
index={index + 1}
readonly={readonly}
filterVar={filterVar}
/>
</div>
</div>
)
})
}
@ -81,7 +112,7 @@ const ClassList: FC<Props> = ({
/>
)}
</div>
</ReactSortable>
)
}
export default React.memo(ClassList)

2
web/app/components/workflow/nodes/question-classifier/panel.tsx
View File

@ -40,6 +40,7 @@ const Panel: FC<NodePanelProps<QuestionClassifierNodeType>> = ({
handleVisionResolutionChange,
handleVisionResolutionEnabledChange,
filterVar,
handleSortTopic,
} = useConfig(id, data)
const model = inputs.model
@ -99,6 +100,7 @@ const Panel: FC<NodePanelProps<QuestionClassifierNodeType>> = ({
onChange={handleTopicsChange}
readonly={readOnly}
filterVar={filterVar}
handleSortTopic={handleSortTopic}
/>
</Field>
<Split />

16
web/app/components/workflow/nodes/question-classifier/use-config.ts
View File

@ -9,13 +9,15 @@ import {
import { useStore } from '../../store'
import useAvailableVarList from '../_base/hooks/use-available-var-list'
import useConfigVision from '../../hooks/use-config-vision'
import type { QuestionClassifierNodeType } from './types'
import type { QuestionClassifierNodeType, Topic } from './types'
import useNodeCrud from '@/app/components/workflow/nodes/_base/hooks/use-node-crud'
import { useModelListAndDefaultModelAndCurrentProviderAndModel } from '@/app/components/header/account-setting/model-provider-page/hooks'
import { ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
import { checkHasQueryBlock } from '@/app/components/base/prompt-editor/constants'
import { useUpdateNodeInternals } from 'reactflow'
const useConfig = (id: string, payload: QuestionClassifierNodeType) => {
const updateNodeInternals = useUpdateNodeInternals()
const { nodesReadOnly: readOnly } = useNodesReadOnly()
const isChatMode = useIsChatMode()
const defaultConfig = useStore(s => s.nodesDefaultConfigs)[payload.type]
@ -166,6 +168,17 @@ const useConfig = (id: string, payload: QuestionClassifierNodeType) => {
return varPayload.type === VarType.string
}, [])
const handleSortTopic = useCallback((newTopics: (Topic & { id: string })[]) => {
const newInputs = produce(inputs, (draft) => {
draft.classes = newTopics.filter(Boolean).map(item => ({
id: item.id,
name: item.name,
}))
})
setInputs(newInputs)
updateNodeInternals(id)
}, [id, inputs, setInputs, updateNodeInternals])
return {
readOnly,
inputs,
@ -185,6 +198,7 @@ const useConfig = (id: string, payload: QuestionClassifierNodeType) => {
isVisionModel,
handleVisionResolutionEnabledChange,
handleVisionResolutionChange,
handleSortTopic,
}
}