581 lines
21 KiB
TypeScript
581 lines
21 KiB
TypeScript
import * as React from 'react'
|
||
import {
|
||
AlertTriangle,
|
||
ArrowRight,
|
||
BrainCircuit,
|
||
Check,
|
||
CheckCircle2,
|
||
ChevronDown,
|
||
CircleDashed,
|
||
ExternalLink,
|
||
History,
|
||
Link2,
|
||
RefreshCw,
|
||
ShieldAlert,
|
||
X
|
||
} from 'lucide-react'
|
||
|
||
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
|
||
import { Badge } from '@/components/ui/badge'
|
||
import { Button } from '@/components/ui/button'
|
||
import {
|
||
Collapsible,
|
||
CollapsibleContent,
|
||
CollapsibleTrigger
|
||
} from '@/components/ui/collapsible'
|
||
import {
|
||
Select,
|
||
SelectContent,
|
||
SelectGroup,
|
||
SelectItem,
|
||
SelectTrigger,
|
||
SelectValue
|
||
} from '@/components/ui/select'
|
||
import { Separator } from '@/components/ui/separator'
|
||
import { formatDateTime } from '@/lib/format'
|
||
import { cn } from '@/lib/utils'
|
||
|
||
import {
|
||
buildSupportAnalysisViewModel,
|
||
type GroupedSupportReferences,
|
||
type SupportRecommendation
|
||
} from './supportAnalysisViewModel'
|
||
import type {
|
||
CustomerReplyTask,
|
||
Ticket,
|
||
TicketSupportAnalysis
|
||
} from './types'
|
||
|
||
const REFERENCE_GROUPS: Array<{
|
||
key: keyof GroupedSupportReferences
|
||
label: string
|
||
}> = [
|
||
{ key: 'knowledge', label: '正式知识' },
|
||
{ key: 'solution', label: '已发布方案' },
|
||
{ key: 'historical_ticket', label: '历史工单' }
|
||
]
|
||
|
||
const STATUS_LABELS: Record<string, string> = {
|
||
queued: '排队中',
|
||
running: '分析中',
|
||
succeeded: '成功',
|
||
completed: '成功',
|
||
failed: '失败'
|
||
}
|
||
|
||
function scrollToSection(id: string) {
|
||
document.getElementById(id)?.scrollIntoView({ block: 'start' })
|
||
}
|
||
|
||
function scopeText(scope: Record<string, unknown>) {
|
||
const entries = Object.entries(scope).filter(([, value]) => {
|
||
if (Array.isArray(value)) return value.length > 0
|
||
return value !== null && value !== undefined && value !== ''
|
||
})
|
||
if (entries.length === 0) return '未限制适用环境'
|
||
return entries
|
||
.slice(0, 3)
|
||
.map(([key, value]) => `${key}: ${Array.isArray(value) ? value.join('、') : String(value)}`)
|
||
.join(' · ')
|
||
}
|
||
|
||
function SupportReferenceList({
|
||
groups,
|
||
emptyText
|
||
}: {
|
||
groups: GroupedSupportReferences
|
||
emptyText: string
|
||
}) {
|
||
const count = REFERENCE_GROUPS.reduce((total, group) => total + groups[group.key].length, 0)
|
||
if (count === 0) {
|
||
return (
|
||
<div className="flex items-start gap-2 rounded-lg border border-dashed p-3 text-sm text-muted-foreground">
|
||
<ShieldAlert className="mt-0.5 size-4 shrink-0" />
|
||
<span>{emptyText}</span>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
return (
|
||
<div className="grid gap-4">
|
||
{REFERENCE_GROUPS.map((group) => {
|
||
const references = groups[group.key]
|
||
if (references.length === 0) return null
|
||
return (
|
||
<section key={group.key} className="grid gap-2" aria-label={group.label}>
|
||
<h5 className="text-xs font-medium text-muted-foreground">
|
||
{group.label} · {references.length}
|
||
</h5>
|
||
<div className="grid gap-2">
|
||
{references.map((reference) => (
|
||
<a
|
||
key={`${reference.source_type}-${reference.rank}-${reference.source_id}`}
|
||
href={
|
||
reference.source_type === 'knowledge'
|
||
? '#/knowledge'
|
||
: reference.source_type === 'solution'
|
||
? '#/solutions'
|
||
: `#/tickets/${reference.source_id}`
|
||
}
|
||
className="group grid gap-2 rounded-lg border p-3 outline-none transition-colors hover:bg-muted/40 focus-visible:ring-2 focus-visible:ring-ring"
|
||
>
|
||
<div className="flex flex-wrap items-center gap-2">
|
||
<Badge variant="outline">#{reference.rank}</Badge>
|
||
<span className="min-w-0 flex-1 text-sm font-medium">{reference.title}</span>
|
||
<span className="text-xs tabular-nums text-muted-foreground">
|
||
匹配 {Math.round(reference.score * 100)}%
|
||
</span>
|
||
<ExternalLink className="size-4 text-muted-foreground group-hover:text-foreground" />
|
||
</div>
|
||
<p className="line-clamp-2 text-sm leading-6 text-muted-foreground">
|
||
{reference.excerpt || '暂无摘要'}
|
||
</p>
|
||
<div className="flex flex-wrap gap-x-4 gap-y-1 text-xs text-muted-foreground">
|
||
<span>{scopeText(reference.applicable_scope)}</span>
|
||
<span>版本 {reference.source_version || '未标注'}</span>
|
||
</div>
|
||
</a>
|
||
))}
|
||
</div>
|
||
</section>
|
||
)
|
||
})}
|
||
</div>
|
||
)
|
||
}
|
||
|
||
function RecommendationCard({
|
||
recommendation,
|
||
busy,
|
||
readOnly,
|
||
onRecommend,
|
||
onAdopt
|
||
}: {
|
||
recommendation: SupportRecommendation
|
||
busy: boolean
|
||
readOnly: boolean
|
||
onRecommend: (solutionId: number) => void
|
||
onAdopt: (solutionId: number) => void
|
||
}) {
|
||
return (
|
||
<div className="grid gap-3 rounded-xl border bg-muted/20 p-4">
|
||
<div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
|
||
<div className="min-w-0">
|
||
<div className="flex flex-wrap items-center gap-2">
|
||
<h5 className="font-medium">{recommendation.title}</h5>
|
||
<Badge variant="info">匹配 {Math.round(recommendation.score * 100)}%</Badge>
|
||
<Badge variant={recommendation.autoResolveEligible ? 'success' : 'warning'}>
|
||
{recommendation.autoResolveEligible ? <Check /> : <AlertTriangle />}
|
||
{recommendation.autoResolveEligible ? '允许自动化' : '需要人工确认'}
|
||
</Badge>
|
||
</div>
|
||
<p className="mt-2 text-sm text-muted-foreground">
|
||
{scopeText(recommendation.applicableScope)}
|
||
</p>
|
||
{recommendation.riskLabels.length ? (
|
||
<div className="mt-2 flex flex-wrap gap-2">
|
||
{recommendation.riskLabels.map((label) => (
|
||
<Badge key={label} variant="outline">
|
||
<AlertTriangle />
|
||
{label}
|
||
</Badge>
|
||
))}
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
<span className="shrink-0 text-xs text-muted-foreground">
|
||
冻结依据 #{recommendation.reference.rank}
|
||
</span>
|
||
</div>
|
||
<div className="flex flex-wrap gap-2">
|
||
<Button asChild size="sm" variant="outline">
|
||
<a href="#/solutions">
|
||
查看方案
|
||
<ExternalLink data-icon="inline-end" />
|
||
</a>
|
||
</Button>
|
||
{!readOnly ? (
|
||
<>
|
||
<Button
|
||
size="sm"
|
||
variant="secondary"
|
||
disabled={busy}
|
||
onClick={() => onRecommend(recommendation.solutionId)}
|
||
>
|
||
<Link2 data-icon="inline-start" />
|
||
标记推荐
|
||
</Button>
|
||
<Button
|
||
size="sm"
|
||
disabled={busy}
|
||
onClick={() => onAdopt(recommendation.solutionId)}
|
||
>
|
||
<CheckCircle2 data-icon="inline-start" />
|
||
采纳并解决
|
||
</Button>
|
||
</>
|
||
) : null}
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export function SupportAnalysisWorkspace({
|
||
ticket,
|
||
items,
|
||
replyTasks,
|
||
error,
|
||
starting,
|
||
solutionBusy,
|
||
onStart,
|
||
onRecommendSolution,
|
||
onAdoptSolution
|
||
}: {
|
||
ticket: Ticket
|
||
items: TicketSupportAnalysis[]
|
||
replyTasks: CustomerReplyTask[]
|
||
error: string
|
||
starting: boolean
|
||
solutionBusy: boolean
|
||
onStart: () => void
|
||
onRecommendSolution: (solutionId: number) => void
|
||
onAdoptSolution: (solutionId: number) => void
|
||
}) {
|
||
const [selectedId, setSelectedId] = React.useState(items[0] ? String(items[0].id) : '')
|
||
const [allReferencesOpen, setAllReferencesOpen] = React.useState(false)
|
||
const [policyOpen, setPolicyOpen] = React.useState(false)
|
||
|
||
React.useEffect(() => {
|
||
if (!items.length) {
|
||
setSelectedId('')
|
||
return
|
||
}
|
||
if (!items.some((item) => String(item.id) === selectedId)) {
|
||
setSelectedId(String(items[0].id))
|
||
}
|
||
}, [items, selectedId])
|
||
|
||
const selected = items.find((item) => String(item.id) === selectedId) ?? items[0] ?? null
|
||
const view = buildSupportAnalysisViewModel(ticket, selected, replyTasks)
|
||
const active = view.displayState === 'queued' || view.displayState === 'running'
|
||
const readOnly = view.displayState === 'read_only'
|
||
const output = selected?.final_output
|
||
|
||
if (!selected) {
|
||
return (
|
||
<section aria-labelledby="support-analysis-title" className="grid gap-4">
|
||
<div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
|
||
<div>
|
||
<h3 id="support-analysis-title" className="flex items-center gap-2 font-semibold">
|
||
<BrainCircuit className="size-5 text-primary" />
|
||
支持分析
|
||
</h3>
|
||
<p className="mt-1 text-sm text-muted-foreground">
|
||
尚未运行支持分析。基于已发布知识、方案与已解决历史工单生成可追溯的排查建议。
|
||
</p>
|
||
</div>
|
||
<Button onClick={onStart} disabled={starting || readOnly}>
|
||
<BrainCircuit data-icon="inline-start" />
|
||
{starting ? '正在启动' : '开始分析'}
|
||
</Button>
|
||
</div>
|
||
<div className="flex flex-wrap gap-2 text-sm text-muted-foreground">
|
||
<Badge variant="outline">问题描述已就绪</Badge>
|
||
<Badge variant="outline">正式依据由运行时冻结</Badge>
|
||
<span>分析前不会展示空的结论、步骤和引用区域。</span>
|
||
</div>
|
||
{error ? (
|
||
<Alert variant="destructive">
|
||
<X />
|
||
<AlertTitle>支持分析未启动</AlertTitle>
|
||
<AlertDescription>{error}</AlertDescription>
|
||
</Alert>
|
||
) : null}
|
||
</section>
|
||
)
|
||
}
|
||
|
||
return (
|
||
<section aria-labelledby="support-analysis-title" className="grid gap-5">
|
||
<div className="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
|
||
<div className="min-w-0">
|
||
<div className="flex flex-wrap items-center gap-2">
|
||
<h3 id="support-analysis-title" className="flex items-center gap-2 font-semibold">
|
||
<BrainCircuit className="size-5 text-primary" />
|
||
支持分析
|
||
</h3>
|
||
<Badge
|
||
variant={
|
||
selected.status === 'failed'
|
||
? 'destructive'
|
||
: active
|
||
? 'info'
|
||
: 'success'
|
||
}
|
||
>
|
||
{active ? <CircleDashed className="animate-spin" /> : null}
|
||
{STATUS_LABELS[selected.status] ?? selected.status}
|
||
</Badge>
|
||
<Badge variant="outline">Agent v{selected.agent_version}</Badge>
|
||
<Badge variant="outline">{selected.references.length} 条冻结依据</Badge>
|
||
</div>
|
||
<p className="mt-2 text-sm text-muted-foreground">
|
||
{selected.started_at
|
||
? `开始于 ${formatDateTime(selected.started_at)}`
|
||
: `创建于 ${formatDateTime(selected.created_at)}`}
|
||
{readOnly ? ' · 工单已结束，分析结果只读保留' : ''}
|
||
</p>
|
||
</div>
|
||
<div className="flex flex-wrap gap-2">
|
||
{items.length > 1 ? (
|
||
<Select value={String(selected.id)} onValueChange={setSelectedId}>
|
||
<SelectTrigger className="w-full sm:w-64" aria-label="选择历史分析版本">
|
||
<History className="size-4" />
|
||
<SelectValue />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
<SelectGroup>
|
||
{items.map((item) => (
|
||
<SelectItem key={item.id} value={String(item.id)}>
|
||
{formatDateTime(item.created_at)} · v{item.agent_version} ·{' '}
|
||
{STATUS_LABELS[item.status] ?? item.status}
|
||
</SelectItem>
|
||
))}
|
||
</SelectGroup>
|
||
</SelectContent>
|
||
</Select>
|
||
) : null}
|
||
{!readOnly ? (
|
||
<Button
|
||
size="sm"
|
||
variant={selected.status === 'failed' ? 'default' : 'outline'}
|
||
onClick={onStart}
|
||
disabled={starting || active}
|
||
>
|
||
<RefreshCw data-icon="inline-start" />
|
||
{starting
|
||
? '正在启动'
|
||
: active
|
||
? '分析进行中'
|
||
: selected.status === 'failed'
|
||
? '重新分析'
|
||
: '再次分析'}
|
||
</Button>
|
||
) : null}
|
||
<Button asChild size="sm" variant="outline">
|
||
<a href={`#/agent-runs/${selected.run_public_id}`}>
|
||
运行轨迹
|
||
<ExternalLink data-icon="inline-end" />
|
||
</a>
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
{error ? (
|
||
<Alert variant="destructive">
|
||
<X />
|
||
<AlertTitle>支持分析未启动</AlertTitle>
|
||
<AlertDescription>{error}</AlertDescription>
|
||
</Alert>
|
||
) : null}
|
||
|
||
{active ? (
|
||
<Alert>
|
||
<RefreshCw className="animate-spin" />
|
||
<AlertTitle>{selected.progress_message || '正在执行支持分析'}</AlertTitle>
|
||
<AlertDescription>
|
||
已冻结 {selected.references.length} 条候选依据。运行期间不可重复启动，可从运行轨迹查看详细进度。
|
||
</AlertDescription>
|
||
</Alert>
|
||
) : null}
|
||
|
||
{selected.status === 'failed' ? (
|
||
<Alert variant="destructive">
|
||
<AlertTriangle />
|
||
<AlertTitle>本次分析需要人工接管</AlertTitle>
|
||
<AlertDescription>
|
||
{selected.error_message || '模型、检索或结构化输出未完成。原有历史成功结果仍可通过上方版本选择器查看。'}
|
||
</AlertDescription>
|
||
<Button
|
||
size="sm"
|
||
variant="outline"
|
||
onClick={() => scrollToSection('activity-section')}
|
||
>
|
||
继续人工排查
|
||
<ArrowRight data-icon="inline-end" />
|
||
</Button>
|
||
</Alert>
|
||
) : null}
|
||
|
||
{output ? (
|
||
<>
|
||
<div className="grid gap-2">
|
||
<p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
|
||
分析结论
|
||
</p>
|
||
<p className="max-w-4xl whitespace-pre-wrap text-base leading-7">
|
||
{output.analysis_summary}
|
||
</p>
|
||
</div>
|
||
|
||
{output.troubleshooting_steps.length ? (
|
||
<div className="grid gap-3">
|
||
<p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
|
||
建议排查顺序
|
||
</p>
|
||
<ol className="grid gap-2">
|
||
{output.troubleshooting_steps.map((step, index) => (
|
||
<li
|
||
key={`${index}-${step}`}
|
||
className="grid grid-cols-[2.25rem_minmax(0,1fr)] gap-3 rounded-lg border-l-2 border-primary/40 bg-muted/20 px-3 py-2.5"
|
||
>
|
||
<span className="font-mono text-sm tabular-nums text-muted-foreground">
|
||
{String(index + 1).padStart(2, '0')}
|
||
</span>
|
||
<span className="text-sm leading-6">{step}</span>
|
||
</li>
|
||
))}
|
||
</ol>
|
||
<p className="text-xs text-muted-foreground">
|
||
排查步骤为只读建议；实际执行结果请记录到下方统一活动流。
|
||
</p>
|
||
</div>
|
||
) : null}
|
||
|
||
<Separator />
|
||
|
||
<div className="grid gap-3">
|
||
<div className="flex flex-wrap items-center justify-between gap-2">
|
||
<div>
|
||
<h4 className="font-medium">Agent 推荐方案</h4>
|
||
<p className="mt-1 text-sm text-muted-foreground">
|
||
仅展示本次输出明确列入 candidate_solution_ids 的冻结方案。
|
||
</p>
|
||
</div>
|
||
<Badge
|
||
variant={
|
||
view.automation.status === 'auto_resolved'
|
||
? 'success'
|
||
: view.automation.status === 'eligible'
|
||
? 'info'
|
||
: 'warning'
|
||
}
|
||
>
|
||
{view.automation.status === 'manual_recommendation' ? (
|
||
<AlertTriangle />
|
||
) : (
|
||
<CheckCircle2 />
|
||
)}
|
||
{view.automation.label}
|
||
</Badge>
|
||
</div>
|
||
<p className="text-sm text-muted-foreground">{view.automation.primaryReason}</p>
|
||
{view.recommendations.length ? (
|
||
<div className="grid gap-3">
|
||
{view.recommendations.map((recommendation) => (
|
||
<RecommendationCard
|
||
key={recommendation.solutionId}
|
||
recommendation={recommendation}
|
||
busy={solutionBusy}
|
||
readOnly={readOnly}
|
||
onRecommend={onRecommendSolution}
|
||
onAdopt={onAdoptSolution}
|
||
/>
|
||
))}
|
||
</div>
|
||
) : (
|
||
<p className="rounded-lg border border-dashed p-3 text-sm text-muted-foreground">
|
||
本次分析未明确推荐可复用方案，请继续按排查步骤人工处理。
|
||
</p>
|
||
)}
|
||
{view.automation.checks.length ? (
|
||
<Collapsible open={policyOpen} onOpenChange={setPolicyOpen}>
|
||
<CollapsibleTrigger asChild>
|
||
<Button variant="ghost" size="sm" className="w-fit">
|
||
策略判断
|
||
<ChevronDown
|
||
data-icon="inline-end"
|
||
className={cn('transition-transform', policyOpen && 'rotate-180')}
|
||
/>
|
||
</Button>
|
||
</CollapsibleTrigger>
|
||
<CollapsibleContent className="pt-2">
|
||
<div className="grid gap-2 rounded-lg border bg-muted/20 p-3 sm:grid-cols-2">
|
||
{view.automation.checks.map((check) => (
|
||
<div key={check.key} className="flex items-center gap-2 text-sm">
|
||
{check.passed ? (
|
||
<Check className="size-4 text-success" />
|
||
) : (
|
||
<X className="size-4 text-destructive" />
|
||
)}
|
||
<span>{check.label}</span>
|
||
<span className="ml-auto text-xs text-muted-foreground">
|
||
{check.passed ? '通过' : '未通过'}
|
||
</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</CollapsibleContent>
|
||
</Collapsible>
|
||
) : null}
|
||
</div>
|
||
|
||
<div className="flex flex-col gap-3 rounded-lg border bg-muted/20 p-3 sm:flex-row sm:items-center sm:justify-between">
|
||
<div>
|
||
<p className="text-sm font-medium">
|
||
{view.formalReplyTask ? '已生成客户回复任务' : '正在生成正式回复任务'}
|
||
</p>
|
||
<p className="mt-1 text-sm text-muted-foreground">
|
||
{view.formalReplyTask
|
||
? '正式任务是唯一可编辑、发送和确认送达的回复来源。'
|
||
: output.customer_reply_draft || '分析结果已完成，等待回复任务同步。'}
|
||
</p>
|
||
</div>
|
||
{view.formalReplyTask ? (
|
||
<Button
|
||
size="sm"
|
||
variant="outline"
|
||
onClick={() => scrollToSection('customer-reply-section')}
|
||
>
|
||
前往编辑回复
|
||
<ArrowRight data-icon="inline-end" />
|
||
</Button>
|
||
) : null}
|
||
</div>
|
||
|
||
<div className="grid gap-3">
|
||
<div className="flex flex-wrap items-center justify-between gap-2">
|
||
<h4 className="font-medium">正式引用依据</h4>
|
||
<Badge variant="outline">
|
||
<Link2 />
|
||
{view.citedCount}/{selected.references.length}
|
||
</Badge>
|
||
</div>
|
||
<SupportReferenceList
|
||
groups={view.citedReferences}
|
||
emptyText="本次输出没有正式引用，仅供人工排查，不允许自动复用。"
|
||
/>
|
||
<Collapsible open={allReferencesOpen} onOpenChange={setAllReferencesOpen}>
|
||
<CollapsibleTrigger asChild>
|
||
<Button variant="ghost" size="sm" className="w-fit">
|
||
查看全部冻结依据
|
||
<ChevronDown
|
||
data-icon="inline-end"
|
||
className={cn('transition-transform', allReferencesOpen && 'rotate-180')}
|
||
/>
|
||
</Button>
|
||
</CollapsibleTrigger>
|
||
<CollapsibleContent className="pt-3">
|
||
<SupportReferenceList
|
||
groups={view.allReferences}
|
||
emptyText="本次运行没有冻结检索依据。"
|
||
/>
|
||
</CollapsibleContent>
|
||
</Collapsible>
|
||
</div>
|
||
</>
|
||
) : null}
|
||
</section>
|
||
)
|
||
}
|