feat: simplify WorkflowNodeCard and WorkflowNodeIcon by removing tone handling and unused imports
This commit is contained in:
@@ -2,7 +2,6 @@ import type { ReactNode } from "react"
|
|||||||
|
|
||||||
import { cn } from "@/lib/utils"
|
import { cn } from "@/lib/utils"
|
||||||
import type { AIWorkflowNodeSpec } from "@/lib/api/admin"
|
import type { AIWorkflowNodeSpec } from "@/lib/api/admin"
|
||||||
import { getWorkflowNodeMeta } from "./workflow-node-meta"
|
|
||||||
import { WorkflowNodeIcon } from "./workflow-node-icon"
|
import { WorkflowNodeIcon } from "./workflow-node-icon"
|
||||||
|
|
||||||
export function WorkflowNodeCard({
|
export function WorkflowNodeCard({
|
||||||
@@ -20,8 +19,6 @@ export function WorkflowNodeCard({
|
|||||||
width?: "normal" | "wide"
|
width?: "normal" | "wide"
|
||||||
children?: ReactNode
|
children?: ReactNode
|
||||||
}) {
|
}) {
|
||||||
const meta = getWorkflowNodeMeta(nodeType)
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className={cn(
|
className={cn(
|
||||||
@@ -34,7 +31,7 @@ export function WorkflowNodeCard({
|
|||||||
>
|
>
|
||||||
<div className="overflow-hidden rounded-lg border border-transparent bg-background">
|
<div className="overflow-hidden rounded-lg border border-transparent bg-background">
|
||||||
<div className="flex items-center gap-2 px-3 pb-2 pt-3">
|
<div className="flex items-center gap-2 px-3 pb-2 pt-3">
|
||||||
<WorkflowNodeIcon type={nodeType} tone={meta.tone} />
|
<WorkflowNodeIcon type={nodeType} />
|
||||||
<div className="min-w-0 flex-1">
|
<div className="min-w-0 flex-1">
|
||||||
<div className="truncate text-sm font-semibold leading-5 text-foreground">
|
<div className="truncate text-sm font-semibold leading-5 text-foreground">
|
||||||
{title}
|
{title}
|
||||||
|
|||||||
@@ -1,31 +1,23 @@
|
|||||||
import { cn } from "@/lib/utils"
|
import { cn } from "@/lib/utils"
|
||||||
import {
|
import { getWorkflowNodeMeta } from "./workflow-node-meta"
|
||||||
getWorkflowNodeIconClass,
|
|
||||||
getWorkflowNodeMeta,
|
|
||||||
type WorkflowNodeTone,
|
|
||||||
} from "./workflow-node-meta"
|
|
||||||
|
|
||||||
export function WorkflowNodeIcon({
|
export function WorkflowNodeIcon({
|
||||||
type,
|
type,
|
||||||
tone,
|
|
||||||
size = "md",
|
size = "md",
|
||||||
className,
|
className,
|
||||||
}: {
|
}: {
|
||||||
type: string
|
type: string
|
||||||
tone?: WorkflowNodeTone
|
|
||||||
size?: "sm" | "md"
|
size?: "sm" | "md"
|
||||||
className?: string
|
className?: string
|
||||||
}) {
|
}) {
|
||||||
const meta = getWorkflowNodeMeta(type)
|
const meta = getWorkflowNodeMeta(type)
|
||||||
const Icon = meta.icon
|
const Icon = meta.icon
|
||||||
const resolvedTone = tone ?? meta.tone
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<span
|
<span
|
||||||
className={cn(
|
className={cn(
|
||||||
"flex shrink-0 items-center justify-center rounded-lg shadow-sm",
|
"flex shrink-0 items-center justify-center rounded-lg bg-muted text-muted-foreground shadow-sm",
|
||||||
size === "md" ? "size-7" : "size-6",
|
size === "md" ? "size-7" : "size-6",
|
||||||
getWorkflowNodeIconClass(resolvedTone),
|
|
||||||
className
|
className
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -17,52 +17,27 @@ import {
|
|||||||
type LucideIcon,
|
type LucideIcon,
|
||||||
} from "lucide-react"
|
} from "lucide-react"
|
||||||
|
|
||||||
export type WorkflowNodeTone =
|
|
||||||
| "blue"
|
|
||||||
| "cyan"
|
|
||||||
| "emerald"
|
|
||||||
| "indigo"
|
|
||||||
| "amber"
|
|
||||||
| "violet"
|
|
||||||
| "rose"
|
|
||||||
| "slate"
|
|
||||||
|
|
||||||
export type WorkflowNodeMeta = {
|
export type WorkflowNodeMeta = {
|
||||||
icon: LucideIcon
|
icon: LucideIcon
|
||||||
tone: WorkflowNodeTone
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const workflowNodeMetaByType: Record<string, WorkflowNodeMeta> = {
|
const workflowNodeMetaByType: Record<string, WorkflowNodeMeta> = {
|
||||||
start: { icon: PlayCircleIcon, tone: "blue" },
|
start: { icon: PlayCircleIcon },
|
||||||
conversation_understanding: { icon: MessageCircleIcon, tone: "indigo" },
|
conversation_understanding: { icon: MessageCircleIcon },
|
||||||
reply_policy: { icon: ShieldCheckIcon, tone: "violet" },
|
reply_policy: { icon: ShieldCheckIcon },
|
||||||
knowledge_retrieve: { icon: BookOpenIcon, tone: "emerald" },
|
knowledge_retrieve: { icon: BookOpenIcon },
|
||||||
answerability_gate: { icon: HelpCircleIcon, tone: "cyan" },
|
answerability_gate: { icon: HelpCircleIcon },
|
||||||
llm_reply: { icon: BotIcon, tone: "indigo" },
|
llm_reply: { icon: BotIcon },
|
||||||
condition: { icon: GitBranchIcon, tone: "cyan" },
|
condition: { icon: GitBranchIcon },
|
||||||
analyze_conversation: { icon: SearchIcon, tone: "blue" },
|
analyze_conversation: { icon: SearchIcon },
|
||||||
prepare_ticket_draft: { icon: ClipboardListIcon, tone: "amber" },
|
prepare_ticket_draft: { icon: ClipboardListIcon },
|
||||||
human_confirm: { icon: UserCheckIcon, tone: "amber" },
|
human_confirm: { icon: UserCheckIcon },
|
||||||
create_ticket: { icon: TicketIcon, tone: "rose" },
|
create_ticket: { icon: TicketIcon },
|
||||||
handoff_to_human: { icon: HeadphonesIcon, tone: "amber" },
|
handoff_to_human: { icon: HeadphonesIcon },
|
||||||
send_reply: { icon: SendIcon, tone: "emerald" },
|
send_reply: { icon: SendIcon },
|
||||||
end: { icon: FlagIcon, tone: "slate" },
|
end: { icon: FlagIcon },
|
||||||
}
|
}
|
||||||
|
|
||||||
export function getWorkflowNodeMeta(type: string): WorkflowNodeMeta {
|
export function getWorkflowNodeMeta(type: string): WorkflowNodeMeta {
|
||||||
return workflowNodeMetaByType[type] ?? { icon: FileTextIcon, tone: "slate" }
|
return workflowNodeMetaByType[type] ?? { icon: FileTextIcon }
|
||||||
}
|
|
||||||
|
|
||||||
export function getWorkflowNodeIconClass(tone: WorkflowNodeTone) {
|
|
||||||
const classes: Record<WorkflowNodeTone, string> = {
|
|
||||||
blue: "bg-blue-500 text-white shadow-blue-500/20",
|
|
||||||
cyan: "bg-cyan-500 text-white shadow-cyan-500/20",
|
|
||||||
emerald: "bg-emerald-500 text-white shadow-emerald-500/20",
|
|
||||||
indigo: "bg-indigo-500 text-white shadow-indigo-500/20",
|
|
||||||
amber: "bg-amber-500 text-white shadow-amber-500/20",
|
|
||||||
violet: "bg-violet-500 text-white shadow-violet-500/20",
|
|
||||||
rose: "bg-rose-500 text-white shadow-rose-500/20",
|
|
||||||
slate: "bg-slate-600 text-white shadow-slate-600/20",
|
|
||||||
}
|
|
||||||
return classes[tone]
|
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user