wmq
65 lines
2.7 KiB
TypeScript
65 lines
2.7 KiB
TypeScript
import { Brain, ChevronRight } from 'lucide-react'
|
|
import type { Conversation, Customer, CustomerStage } from '@/types'
|
|
import { Button } from '@/components/ui/button'
|
|
import {
|
|
CustomerStageBadge,
|
|
IntentScoreBadge,
|
|
RiskLevelBadge,
|
|
SentimentBadge,
|
|
} from '@/components/common/StatusBadges'
|
|
|
|
const validStages = new Set([
|
|
'initial', 'comparing', 'sample', 'custom', 'closing',
|
|
'fulfillment', 'aftersales', 'repurchase',
|
|
])
|
|
|
|
export function ConversationInsightBar({
|
|
customer,
|
|
conversation,
|
|
onOpenProfile,
|
|
}: {
|
|
customer: Customer
|
|
conversation: Conversation
|
|
onOpenProfile: () => void
|
|
}) {
|
|
const stage = validStages.has(customer.stage) ? customer.stage : 'initial'
|
|
const summary = customer.aiProfile?.summary || conversation.summary || '收到更多客户消息后将补充客户画像'
|
|
|
|
return (
|
|
<div
|
|
data-testid="conversation-insight-bar"
|
|
className="shrink-0 border-b border-slate-100 bg-white px-3 py-2 shadow-[0_1px_0_rgba(15,23,42,.02)] sm:px-4"
|
|
>
|
|
<div className="flex min-w-0 items-center gap-2">
|
|
<span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-xl border border-violet-100 bg-violet-50 text-violet-600">
|
|
<Brain className="h-4 w-4" />
|
|
</span>
|
|
<div className="flex min-w-0 flex-1 items-center gap-2">
|
|
<span className="hidden shrink-0 text-[10px] font-semibold uppercase tracking-[0.12em] text-violet-600 sm:inline">
|
|
客户洞察
|
|
</span>
|
|
<p className="truncate text-xs leading-5 text-slate-600">{summary}</p>
|
|
</div>
|
|
<div className="hidden shrink-0 items-center gap-2 md:flex">
|
|
<span className="flex items-center gap-1 text-xs text-muted-foreground">
|
|
意向 <IntentScoreBadge score={Number(customer.intentScore || 0)} />
|
|
</span>
|
|
<SentimentBadge sentiment={customer.sentiment || 'neutral'} />
|
|
<CustomerStageBadge stage={stage as CustomerStage} />
|
|
<RiskLevelBadge level={customer.riskLevel || 'none'} />
|
|
</div>
|
|
<Button variant="ghost" size="sm" onClick={onOpenProfile} title="打开客户画像">
|
|
<span className="hidden lg:inline">客户画像</span>
|
|
<ChevronRight className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
<div className="mt-1.5 flex items-center gap-2 overflow-x-auto pb-0.5 md:hidden">
|
|
<span className="flex shrink-0 items-center gap-1 text-[11px]">意向 <IntentScoreBadge score={Number(customer.intentScore || 0)} /></span>
|
|
<SentimentBadge sentiment={customer.sentiment || 'neutral'} />
|
|
<CustomerStageBadge stage={stage as CustomerStage} />
|
|
<RiskLevelBadge level={customer.riskLevel || 'none'} />
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|