diff --git a/web/app/dashboard/ai-workflows/_components/node-config-panel.tsx b/web/app/dashboard/ai-workflows/_components/node-config-panel.tsx index da0e0c4..22ca9d7 100644 --- a/web/app/dashboard/ai-workflows/_components/node-config-panel.tsx +++ b/web/app/dashboard/ai-workflows/_components/node-config-panel.tsx @@ -1,10 +1,23 @@ "use client" import { useEffect, useMemo, useState, type ReactNode } from "react" -import { ArrowDownIcon, ArrowUpIcon, Trash2Icon } from "lucide-react" +import { ArrowDownIcon, ArrowUpIcon, CheckIcon, ChevronsUpDownIcon, Trash2Icon } from "lucide-react" import { Button } from "@/components/ui/button" +import { + Command, + CommandEmpty, + CommandGroup, + CommandInput, + CommandItem, + CommandList, +} from "@/components/ui/command" import { Input } from "@/components/ui/input" +import { + Popover, + PopoverContent, + PopoverTrigger, +} from "@/components/ui/popover" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { OptionCombobox } from "@/components/option-combobox" import { fetchKnowledgeBasesAll, type AIWorkflowDefinition, type AIWorkflowNodeSpec, type KnowledgeBase } from "@/lib/api/admin" @@ -293,7 +306,7 @@ function KnowledgeRetrieveConfigPanel({ onChange: (config: Record) => void }) { const [knowledgeBases, setKnowledgeBases] = useState([]) - const [knowledgeToAdd, setKnowledgeToAdd] = useState("") + const [open, setOpen] = useState(false) const selectedKnowledgeIds = normalizeKnowledgeBaseIds(config.knowledgeBaseIds) const knowledgeOptions = useMemo( () => knowledgeBases.map((item) => ({ value: String(item.id), label: item.name })), @@ -324,11 +337,14 @@ function KnowledgeRetrieveConfigPanel({ const updateKnowledgeBaseIds = (ids: number[]) => { onChange({ ...config, knowledgeBaseIds: uniquePositiveNumbers(ids) }) } - const addKnowledgeBase = () => { - const id = Number(knowledgeToAdd) - if (!Number.isFinite(id) || id <= 0 || selectedKnowledgeIds.includes(id)) return + const toggleKnowledgeBase = (value: string) => { + const id = Number(value) + if (!Number.isFinite(id) || id <= 0) return + if (selectedKnowledgeIds.includes(id)) { + updateKnowledgeBaseIds(selectedKnowledgeIds.filter((item) => item !== id)) + return + } updateKnowledgeBaseIds([...selectedKnowledgeIds, id]) - setKnowledgeToAdd("") } const moveKnowledgeBase = (index: number, direction: -1 | 1) => { const targetIndex = index + direction @@ -344,21 +360,59 @@ function KnowledgeRetrieveConfigPanel({
-
- !selectedKnowledgeIds.includes(Number(option.value)))} - placeholder="选择知识库" - searchPlaceholder="搜索知识库" - emptyText="没有可用知识库" - triggerClassName={inspectorComboboxClassName} - onChange={setKnowledgeToAdd} - /> - -
- + + + } + > + + {selectedKnowledgeOptions.length === 0 + ? "选择知识库" + : selectedKnowledgeOptions.length === 1 + ? selectedKnowledgeOptions[0].label + : `已选择 ${selectedKnowledgeOptions.length} 个知识库`} + + + + + + + + 没有可用知识库 + + {knowledgeOptions.map((option) => { + const selected = selectedKnowledgeIds.includes(Number(option.value)) + return ( + toggleKnowledgeBase(option.value)} + > + + {option.label} + + ) + })} + + + + +
{selectedKnowledgeOptions.length === 0 ? (