mlogclub
1055 lines
33 KiB
TypeScript
1055 lines
33 KiB
TypeScript
"use client";
|
|
import {
|
|
AlertTriangleIcon,
|
|
Building2Icon,
|
|
Link2Icon,
|
|
MailIcon,
|
|
PencilIcon,
|
|
PhoneIcon,
|
|
TimerIcon,
|
|
UserRoundIcon,
|
|
WorkflowIcon,
|
|
} from "lucide-react";
|
|
import { useCallback, useEffect, useState } from "react";
|
|
import { toast } from "sonner";
|
|
|
|
import { type CustomerFormSavePayload } from "@/components/customer-form";
|
|
import { CustomerFormDialog } from "@/components/customer-form-dialog";
|
|
import { CustomerLinkOrCreateDialog } from "@/components/customer-link-or-create-dialog";
|
|
import { JsonTreeViewer } from "@/components/json-tree-viewer";
|
|
import { ProjectDialog } from "@/components/project-dialog";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from "@/components/ui/dialog";
|
|
import {
|
|
Field,
|
|
FieldContent,
|
|
FieldLabel,
|
|
} from "@/components/ui/field";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Textarea } from "@/components/ui/textarea";
|
|
import type { AgentConversation } from "@/lib/api/agent";
|
|
import {
|
|
fetchAIWorkflowRun,
|
|
fetchAIWorkflowRuns,
|
|
type AIWorkflowNodeRun,
|
|
type AIWorkflowRun,
|
|
type TagTree,
|
|
fetchTagsAll,
|
|
} from "@/lib/api/admin";
|
|
import { updateCompany, type AdminCompany } from "@/lib/api/company";
|
|
import { fetchTickets, type TicketItem } from "@/lib/api/ticket";
|
|
import {
|
|
fetchCustomer,
|
|
saveCustomerProfile,
|
|
type AdminCustomer,
|
|
} from "@/lib/api/customer";
|
|
import {
|
|
fetchCustomerContacts,
|
|
type AdminCustomerContact,
|
|
} from "@/lib/api/customer-contact";
|
|
import {
|
|
ContactType,
|
|
Gender,
|
|
} from "@/lib/generated/enums";
|
|
import { useAgentConversationsStore } from "@/lib/stores/agent-conversations";
|
|
import { cn, formatDateTime } from "@/lib/utils";
|
|
import { useI18n } from "@/i18n/provider";
|
|
import {
|
|
ConversationTagBadges,
|
|
ConversationTagPicker,
|
|
} from "./conversation-tag-picker";
|
|
import { TicketStatusBadge } from "../../tickets/_components/ticket-status-badge";
|
|
|
|
function contactTypeLabel(
|
|
contactType: ContactType | string,
|
|
t: (key: string, values?: Record<string, string | number>) => string
|
|
) {
|
|
switch (contactType) {
|
|
case ContactType.Mobile:
|
|
return t("conversation.contactMobile");
|
|
case ContactType.Email:
|
|
return t("conversation.contactEmail");
|
|
case ContactType.Other:
|
|
return t("conversation.contactOther");
|
|
default:
|
|
return String(contactType);
|
|
}
|
|
}
|
|
|
|
function ContactTypeIcon({ contactType }: { contactType: ContactType | string }) {
|
|
const cls = "size-3.5 shrink-0 text-muted-foreground";
|
|
switch (contactType) {
|
|
case ContactType.Mobile:
|
|
return <PhoneIcon className={cls} aria-hidden />;
|
|
case ContactType.Email:
|
|
return <MailIcon className={cls} aria-hidden />;
|
|
default:
|
|
return <Link2Icon className={cls} aria-hidden />;
|
|
}
|
|
}
|
|
|
|
function DetailRow({
|
|
label,
|
|
value,
|
|
valueClassName,
|
|
}: {
|
|
label: string;
|
|
value: string;
|
|
valueClassName?: string;
|
|
}) {
|
|
const empty = !value.trim();
|
|
return (
|
|
<div className="flex gap-2.5 text-sm leading-snug">
|
|
<span className="w-17 shrink-0 pt-px text-xs text-muted-foreground">{label}</span>
|
|
<span
|
|
className={cn(
|
|
"min-w-0 flex-1 break-all text-foreground",
|
|
empty && "text-muted-foreground",
|
|
valueClassName,
|
|
)}
|
|
>
|
|
{empty ? "—" : value}
|
|
</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function SectionHeading({
|
|
children,
|
|
action,
|
|
}: {
|
|
children: React.ReactNode;
|
|
action?: React.ReactNode;
|
|
}) {
|
|
return (
|
|
<div className="flex items-center justify-between gap-2">
|
|
<h3 className="text-xs font-medium text-muted-foreground">{children}</h3>
|
|
{action}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function UnlinkedCustomerEmpty({ conversation }: { conversation: AgentConversation }) {
|
|
const t = useI18n();
|
|
const [linkDialogOpen, setLinkDialogOpen] = useState(false);
|
|
const loadConversations = useAgentConversationsStore((s) => s.loadConversations);
|
|
|
|
return (
|
|
<div className="space-y-6 pt-2">
|
|
<div className="flex flex-col items-center justify-center rounded-xl bg-muted/35 px-4 py-8 text-center">
|
|
<UserRoundIcon className="mb-2 size-10 text-muted-foreground" aria-hidden />
|
|
<p className="text-sm font-medium text-foreground">
|
|
{t("conversation.unlinkedCustomerTitle")}
|
|
</p>
|
|
<p className="mt-1 max-w-xs text-xs leading-relaxed text-muted-foreground">
|
|
{t("conversation.unlinkedCustomerDescription")}
|
|
</p>
|
|
<Button
|
|
type="button"
|
|
className="mt-4 gap-2"
|
|
onClick={() => setLinkDialogOpen(true)}
|
|
>
|
|
<Link2Icon className="size-4" />
|
|
{t("conversation.linkOrCreateCustomer")}
|
|
</Button>
|
|
</div>
|
|
<CustomerLinkOrCreateDialog
|
|
open={linkDialogOpen}
|
|
onOpenChange={setLinkDialogOpen}
|
|
conversationId={conversation.id}
|
|
onSuccess={() => void loadConversations()}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function MissingCustomerEmpty({ conversation }: { conversation: AgentConversation }) {
|
|
const t = useI18n();
|
|
const [linkDialogOpen, setLinkDialogOpen] = useState(false);
|
|
const loadConversations = useAgentConversationsStore((s) => s.loadConversations);
|
|
|
|
return (
|
|
<div className="space-y-6 pt-2">
|
|
<div className="flex flex-col items-center justify-center rounded-xl bg-muted/35 px-4 py-8 text-center">
|
|
<UserRoundIcon className="mb-2 size-10 text-muted-foreground" aria-hidden />
|
|
<p className="text-sm font-medium text-foreground">
|
|
{t("conversation.missingCustomerTitle")}
|
|
</p>
|
|
<p className="mt-1 max-w-xs text-xs leading-relaxed text-muted-foreground">
|
|
{t("conversation.missingCustomerDescription")}
|
|
</p>
|
|
<Button
|
|
type="button"
|
|
className="mt-4 gap-2"
|
|
onClick={() => setLinkDialogOpen(true)}
|
|
>
|
|
<Link2Icon className="size-4" />
|
|
{t("conversation.relinkOrCreateCustomer")}
|
|
</Button>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<SectionHeading>{t("conversation.conversationOwner")}</SectionHeading>
|
|
<div className="space-y-2">
|
|
<DetailRow label={t("conversation.channelId")} value={conversation.channelId ? `${conversation.channelId}` : "-"} />
|
|
<DetailRow label={t("conversation.customerId")} value={conversation.customerId ? `${conversation.customerId}` : "-"} />
|
|
</div>
|
|
</div>
|
|
<CustomerLinkOrCreateDialog
|
|
open={linkDialogOpen}
|
|
onOpenChange={setLinkDialogOpen}
|
|
conversationId={conversation.id}
|
|
onSuccess={() => void loadConversations()}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
type ConversationInfoPanelProps = {
|
|
conversation: AgentConversation | null;
|
|
className?: string;
|
|
variant?: "default" | "embedded";
|
|
};
|
|
|
|
export function ConversationInfoPanel({
|
|
conversation,
|
|
className,
|
|
variant = "default",
|
|
}: ConversationInfoPanelProps) {
|
|
const t = useI18n();
|
|
const embedded = variant === "embedded";
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"flex h-full min-h-0 flex-col overflow-hidden",
|
|
embedded
|
|
? "bg-card text-card-foreground"
|
|
: "border-border/80 bg-card text-card-foreground",
|
|
className,
|
|
)}
|
|
>
|
|
<div className="flex h-12.5 shrink-0 items-center border-b border-border/80 bg-card px-3">
|
|
<h2 className="text-sm font-medium text-foreground">
|
|
{t("conversation.conversationInfo")}
|
|
</h2>
|
|
</div>
|
|
|
|
<div
|
|
className={cn(
|
|
"min-h-0 flex-1 overflow-y-auto px-3 pb-4",
|
|
embedded && "pb-[max(1rem,env(safe-area-inset-bottom))] pt-1",
|
|
)}
|
|
>
|
|
{!conversation ? (
|
|
<p className="pt-4 text-sm text-muted-foreground">
|
|
{embedded
|
|
? t("conversation.selectConversationForInfo")
|
|
: t("conversation.selectSidebarConversationForInfo")}
|
|
</p>
|
|
) : (
|
|
<div className="space-y-4 py-3">
|
|
<CustomerBody conversation={conversation} />
|
|
<WorkflowRunsSection conversation={conversation} />
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function ConversationTagSection({
|
|
conversation,
|
|
}: {
|
|
conversation: AgentConversation;
|
|
}) {
|
|
const t = useI18n();
|
|
const setConversationTags = useAgentConversationsStore(
|
|
(state) => state.setConversationTags,
|
|
);
|
|
const [availableTags, setAvailableTags] = useState<TagTree[]>([]);
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
useEffect(() => {
|
|
let cancelled = false;
|
|
|
|
async function loadTags() {
|
|
setLoading(true);
|
|
try {
|
|
const data = await fetchTagsAll();
|
|
if (!cancelled) {
|
|
setAvailableTags(Array.isArray(data) ? data : []);
|
|
}
|
|
} catch (error) {
|
|
if (!cancelled) {
|
|
toast.error(error instanceof Error ? error.message : t("conversation.loadTagsFailed"));
|
|
}
|
|
} finally {
|
|
if (!cancelled) {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
}
|
|
|
|
void loadTags();
|
|
|
|
return () => {
|
|
cancelled = true;
|
|
};
|
|
}, [t]);
|
|
|
|
return (
|
|
<section className="space-y-2 border-t pt-2">
|
|
<SectionHeading
|
|
action={
|
|
<ConversationTagPicker
|
|
conversation={conversation}
|
|
availableTags={availableTags}
|
|
loading={loading}
|
|
onTagsChange={(tags) => {
|
|
setConversationTags(conversation.id, tags);
|
|
}}
|
|
/>
|
|
}
|
|
>
|
|
{t("conversation.conversationTags")}
|
|
</SectionHeading>
|
|
<ConversationTagBadges
|
|
tags={conversation.tags}
|
|
availableTags={availableTags}
|
|
/>
|
|
{!conversation.tags || conversation.tags.length === 0 ? (
|
|
<p className="text-sm text-muted-foreground">{t("conversation.noConversationTags")}</p>
|
|
) : null}
|
|
</section>
|
|
);
|
|
}
|
|
|
|
function WorkflowRunsSection({ conversation }: { conversation: AgentConversation }) {
|
|
const [runs, setRuns] = useState<AIWorkflowRun[]>([]);
|
|
const [loading, setLoading] = useState(false);
|
|
const [detailLoading, setDetailLoading] = useState(false);
|
|
const [activeRun, setActiveRun] = useState<AIWorkflowRun | null>(null);
|
|
const [detailOpen, setDetailOpen] = useState(false);
|
|
|
|
useEffect(() => {
|
|
let cancelled = false;
|
|
|
|
async function loadRuns() {
|
|
setLoading(true);
|
|
try {
|
|
const data = await fetchAIWorkflowRuns({
|
|
conversationId: conversation.id,
|
|
page: 1,
|
|
limit: 5,
|
|
});
|
|
if (!cancelled) {
|
|
setRuns(Array.isArray(data.results) ? data.results : []);
|
|
}
|
|
} catch (error) {
|
|
if (!cancelled) {
|
|
toast.error(error instanceof Error ? error.message : "加载 AI 执行记录失败");
|
|
}
|
|
} finally {
|
|
if (!cancelled) {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
}
|
|
|
|
void loadRuns();
|
|
return () => {
|
|
cancelled = true;
|
|
};
|
|
}, [conversation.id]);
|
|
|
|
async function openDetail(runId: number) {
|
|
setDetailOpen(true);
|
|
setDetailLoading(true);
|
|
try {
|
|
const data = await fetchAIWorkflowRun(runId);
|
|
setActiveRun(data);
|
|
} catch (error) {
|
|
toast.error(error instanceof Error ? error.message : "加载 AI 执行详情失败");
|
|
setDetailOpen(false);
|
|
} finally {
|
|
setDetailLoading(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<section className="space-y-2 border-t pt-2">
|
|
<SectionHeading>AI 执行记录</SectionHeading>
|
|
{loading ? (
|
|
<p className="text-sm text-muted-foreground">加载执行记录中</p>
|
|
) : runs.length > 0 ? (
|
|
<div className="space-y-2">
|
|
{runs.map((run) => (
|
|
<button
|
|
key={run.id}
|
|
type="button"
|
|
className="w-full rounded-lg border border-border bg-background px-3 py-2 text-left transition-colors hover:bg-muted/40"
|
|
onClick={() => void openDetail(run.id)}
|
|
>
|
|
<div className="flex items-start justify-between gap-3">
|
|
<div className="min-w-0 flex-1">
|
|
<div className="flex min-w-0 items-center gap-2">
|
|
<WorkflowIcon className="size-3.5 shrink-0 text-muted-foreground" />
|
|
<span className="truncate text-sm font-medium text-foreground">
|
|
Run #{run.id}
|
|
</span>
|
|
<WorkflowRunStatusBadge statusName={run.statusName} />
|
|
</div>
|
|
<div className="mt-1 flex flex-wrap gap-x-3 gap-y-1 text-xs text-muted-foreground">
|
|
<span>Workflow #{run.workflowVersionId || run.workflowId || "-"}</span>
|
|
<span>Message #{run.messageId || "-"}</span>
|
|
</div>
|
|
</div>
|
|
<span className="shrink-0 text-xs text-muted-foreground">
|
|
{run.startedAt ? formatDateTime(run.startedAt) : "—"}
|
|
</span>
|
|
</div>
|
|
{run.errorMessage ? (
|
|
<div className="mt-2 flex items-start gap-1.5 text-xs text-destructive">
|
|
<AlertTriangleIcon className="mt-0.5 size-3.5 shrink-0" />
|
|
<span className="line-clamp-2 break-all">{run.errorMessage}</span>
|
|
</div>
|
|
) : null}
|
|
</button>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<p className="text-sm text-muted-foreground">暂无 AI 执行记录</p>
|
|
)}
|
|
<WorkflowRunDetailDialog
|
|
open={detailOpen}
|
|
loading={detailLoading}
|
|
run={activeRun}
|
|
onOpenChange={(open) => {
|
|
setDetailOpen(open);
|
|
if (!open) {
|
|
setActiveRun(null);
|
|
}
|
|
}}
|
|
/>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
function WorkflowRunDetailDialog({
|
|
open,
|
|
loading,
|
|
run,
|
|
onOpenChange,
|
|
}: {
|
|
open: boolean;
|
|
loading: boolean;
|
|
run: AIWorkflowRun | null;
|
|
onOpenChange: (open: boolean) => void;
|
|
}) {
|
|
return (
|
|
<ProjectDialog
|
|
open={open}
|
|
onOpenChange={onOpenChange}
|
|
title={
|
|
<span className="flex items-center gap-2">
|
|
<WorkflowIcon className="size-4" />
|
|
AI 执行详情
|
|
</span>
|
|
}
|
|
description={run ? `Run #${run.id}` : "Workflow 执行链路"}
|
|
size="xl"
|
|
allowFullscreen
|
|
footer={
|
|
<Button variant="outline" onClick={() => onOpenChange(false)}>
|
|
关闭
|
|
</Button>
|
|
}
|
|
>
|
|
{loading ? (
|
|
<div className="px-6 py-10 text-sm text-muted-foreground">加载执行详情中</div>
|
|
) : run ? (
|
|
<div className="space-y-4 px-6 pb-6">
|
|
<div className="grid gap-2 rounded-lg border bg-muted/20 p-3 text-sm md:grid-cols-2">
|
|
<DetailRow label="Workflow" value={`#${run.workflowId} / v${run.workflowVersionId}`} />
|
|
<DetailRow label="会话" value={`#${run.conversationId}`} />
|
|
<DetailRow label="消息" value={`#${run.messageId}`} />
|
|
<DetailRow label="Agent" value={`#${run.aiAgentId}`} />
|
|
<DetailRow label="状态" value={run.statusName || String(run.status)} />
|
|
<DetailRow label="开始" value={run.startedAt ? formatDateTime(run.startedAt) : ""} />
|
|
<DetailRow label="结束" value={run.endedAt ? formatDateTime(run.endedAt) : ""} />
|
|
<DetailRow label="中断节点" value={run.interruptNodeId || ""} />
|
|
</div>
|
|
{run.errorMessage ? (
|
|
<div className="rounded-lg border border-destructive/30 bg-destructive/5 px-3 py-2 text-sm text-destructive">
|
|
{run.errorMessage}
|
|
</div>
|
|
) : null}
|
|
<div className="space-y-3">
|
|
{(run.nodes ?? []).map((node) => (
|
|
<WorkflowNodeRunBlock key={node.id} node={node} />
|
|
))}
|
|
{!run.nodes || run.nodes.length === 0 ? (
|
|
<p className="text-sm text-muted-foreground">暂无节点记录</p>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="px-6 py-10 text-sm text-muted-foreground">未找到执行记录</div>
|
|
)}
|
|
</ProjectDialog>
|
|
);
|
|
}
|
|
|
|
function WorkflowNodeRunBlock({ node }: { node: AIWorkflowNodeRun }) {
|
|
const inputValue = safeParseJSON(node.inputPreview);
|
|
const outputValue = safeParseJSON(node.outputPreview);
|
|
|
|
return (
|
|
<div className="rounded-lg border bg-background p-3">
|
|
<div className="flex flex-wrap items-start justify-between gap-2">
|
|
<div className="min-w-0">
|
|
<div className="flex min-w-0 items-center gap-2">
|
|
<span className="truncate text-sm font-medium text-foreground">
|
|
{node.nodeId || `Node #${node.id}`}
|
|
</span>
|
|
<WorkflowRunStatusBadge statusName={node.statusName} />
|
|
</div>
|
|
<div className="mt-1 text-xs text-muted-foreground">{node.nodeType || "unknown"}</div>
|
|
</div>
|
|
<div className="flex items-center gap-1 text-xs text-muted-foreground">
|
|
<TimerIcon className="size-3.5" />
|
|
{node.durationMs} ms
|
|
</div>
|
|
</div>
|
|
{node.errorMessage ? (
|
|
<div className="mt-3 rounded-md bg-destructive/5 px-3 py-2 text-xs text-destructive">
|
|
{node.errorMessage}
|
|
</div>
|
|
) : null}
|
|
<div className="mt-3 grid gap-3 lg:grid-cols-2">
|
|
<PreviewBlock title="输入" raw={node.inputPreview} value={inputValue} />
|
|
<PreviewBlock title="输出" raw={node.outputPreview} value={outputValue} />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function PreviewBlock({
|
|
title,
|
|
raw,
|
|
value,
|
|
}: {
|
|
title: string;
|
|
raw: string;
|
|
value: unknown;
|
|
}) {
|
|
return (
|
|
<div className="min-w-0">
|
|
<div className="mb-1 text-xs font-medium text-muted-foreground">{title}</div>
|
|
{value !== null ? (
|
|
<JsonTreeViewer value={value} collapsed={2} />
|
|
) : raw.trim() ? (
|
|
<pre className="max-h-72 overflow-auto rounded-md border bg-muted/20 p-3 text-xs whitespace-pre-wrap break-all">
|
|
{raw}
|
|
</pre>
|
|
) : (
|
|
<div className="rounded-md border bg-muted/20 px-3 py-2 text-xs text-muted-foreground">
|
|
—
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function WorkflowRunStatusBadge({ statusName }: { statusName: string }) {
|
|
const normalized = statusName.trim();
|
|
const variant =
|
|
normalized === "failed"
|
|
? "destructive"
|
|
: normalized === "interrupted"
|
|
? "outline"
|
|
: "secondary";
|
|
return (
|
|
<Badge variant={variant} className="h-5 px-1.5 text-[11px]">
|
|
{normalized || "unknown"}
|
|
</Badge>
|
|
);
|
|
}
|
|
|
|
function safeParseJSON(raw: string): unknown | null {
|
|
const trimmed = raw.trim();
|
|
if (!trimmed) {
|
|
return null;
|
|
}
|
|
try {
|
|
return JSON.parse(trimmed);
|
|
} catch {
|
|
return null;
|
|
}
|
|
}
|
|
|
|
function CustomerBody({ conversation }: { conversation: AgentConversation }) {
|
|
const customerId = conversation.customerId ?? 0;
|
|
|
|
if (customerId <= 0) {
|
|
return (
|
|
<div className="space-y-4">
|
|
<UnlinkedCustomerEmpty conversation={conversation} />
|
|
<ConversationTagSection conversation={conversation} />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return <CustomerLinkedBody conversation={conversation} customerId={customerId} />;
|
|
}
|
|
|
|
type CustomerLinkedBodyProps = {
|
|
conversation: AgentConversation;
|
|
customerId: number;
|
|
};
|
|
|
|
function CustomerLinkedBody({ conversation, customerId }: CustomerLinkedBodyProps) {
|
|
const t = useI18n();
|
|
const [loading, setLoading] = useState(true);
|
|
const [customer, setCustomer] = useState<AdminCustomer | null>(null);
|
|
const [contacts, setContacts] = useState<AdminCustomerContact[]>([]);
|
|
|
|
const [customerEditOpen, setCustomerEditOpen] = useState(false);
|
|
const [customerEditSaving, setCustomerEditSaving] = useState(false);
|
|
const [companyEditOpen, setCompanyEditOpen] = useState(false);
|
|
|
|
const load = useCallback(async () => {
|
|
setLoading(true);
|
|
try {
|
|
const c = await fetchCustomer(customerId);
|
|
setCustomer(c);
|
|
if (!c) {
|
|
setContacts([]);
|
|
return;
|
|
}
|
|
const list = await fetchCustomerContacts(customerId);
|
|
setContacts(Array.isArray(list) ? list : []);
|
|
} catch (e) {
|
|
const msg = e instanceof Error ? e.message : t("conversation.loadCustomerFailed");
|
|
toast.error(msg);
|
|
setCustomer(null);
|
|
setContacts([]);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, [customerId, t]);
|
|
|
|
useEffect(() => {
|
|
void load();
|
|
}, [load]);
|
|
|
|
const isProfileEmpty =
|
|
customer &&
|
|
!customer.name.trim() &&
|
|
!customer.primaryMobile.trim() &&
|
|
!customer.primaryEmail.trim() &&
|
|
customer.companyId === 0 &&
|
|
!customer.remark.trim();
|
|
|
|
if (loading && !customer) {
|
|
return (
|
|
<p className="pt-4 text-sm text-muted-foreground">{t("conversation.loadingCustomer")}</p>
|
|
);
|
|
}
|
|
|
|
if (!customer) {
|
|
return (
|
|
<div className="space-y-4">
|
|
<MissingCustomerEmpty conversation={conversation} />
|
|
<ConversationTagSection conversation={conversation} />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const displayName = customer.name.trim() || t("conversation.unnamedCustomer");
|
|
const company = customer.company ?? null;
|
|
const genderLabel =
|
|
customer.gender === Gender.Male
|
|
? t("conversation.genderMale")
|
|
: customer.gender === Gender.Female
|
|
? t("conversation.genderFemale")
|
|
: null;
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
{isProfileEmpty ? (
|
|
<div className="rounded-lg bg-amber-500/10 px-3 py-2.5 text-xs leading-relaxed text-amber-950 dark:text-amber-100">
|
|
{t("conversation.customerProfileEmpty")}
|
|
</div>
|
|
) : null}
|
|
|
|
<section className="space-y-2">
|
|
<div className="flex items-start justify-between gap-2">
|
|
<div className="flex min-w-0 flex-1 items-start gap-2 text-sm">
|
|
<UserRoundIcon
|
|
className="mt-0.5 size-4 shrink-0 text-muted-foreground"
|
|
aria-hidden
|
|
/>
|
|
<div className="min-w-0 flex-1 space-y-0.5">
|
|
<p className="line-clamp-2 leading-snug text-foreground">
|
|
<span className="font-medium">{displayName}</span>
|
|
{genderLabel ? (
|
|
<span className="font-normal text-muted-foreground">
|
|
{" "}
|
|
· {genderLabel}
|
|
</span>
|
|
) : null}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="sm"
|
|
className="h-7 shrink-0 gap-1 px-2 text-xs"
|
|
onClick={() => setCustomerEditOpen(true)}
|
|
>
|
|
<PencilIcon className="size-3.5" />
|
|
{t("conversation.edit")}
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<DetailRow
|
|
label={t("conversation.lastActive")}
|
|
value={
|
|
customer.lastActiveAt ? formatDateTime(customer.lastActiveAt) : ""
|
|
}
|
|
/>
|
|
<DetailRow
|
|
label={t("conversation.remark")}
|
|
value={customer.remark.trim() ? customer.remark : ""}
|
|
valueClassName="whitespace-pre-wrap"
|
|
/>
|
|
<DetailRow
|
|
label={t("conversation.createdAt")}
|
|
value={formatDateTime(customer.createdAt)}
|
|
valueClassName="whitespace-pre-wrap"
|
|
/>
|
|
<DetailRow
|
|
label={t("conversation.updatedAt")}
|
|
value={formatDateTime(customer.updatedAt)}
|
|
valueClassName="whitespace-pre-wrap"
|
|
/>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="space-y-2">
|
|
{contacts.length === 0 ? (
|
|
<p className="text-sm text-muted-foreground">{t("conversation.noContacts")}</p>
|
|
) : (
|
|
<ul className="space-y-3">
|
|
{contacts.map((row) => {
|
|
const tags: string[] = [];
|
|
if (row.isPrimary) {
|
|
tags.push(t("conversation.primaryContactBadge"));
|
|
}
|
|
if (row.isVerified) {
|
|
tags.push(t("conversation.verifiedContactBadge"));
|
|
}
|
|
return (
|
|
<li key={row.id} className="text-sm">
|
|
<div className="flex items-center gap-2">
|
|
<ContactTypeIcon contactType={row.contactType} />
|
|
<div className="min-w-0 flex-1">
|
|
<p className="break-all font-medium leading-snug text-foreground">
|
|
{row.contactValue}
|
|
<span className="ml-2 text-xs font-normal text-muted-foreground">
|
|
{contactTypeLabel(row.contactType, t)}
|
|
</span>
|
|
{tags.length > 0 ? (
|
|
<span className="ml-2 text-xs text-muted-foreground">
|
|
{tags.join(" · ")}
|
|
</span>
|
|
) : null}
|
|
</p>
|
|
{row.remark ? (
|
|
<p className="mt-1 line-clamp-3 break-all text-xs leading-relaxed text-muted-foreground">
|
|
{row.remark}
|
|
</p>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
)}
|
|
</section>
|
|
|
|
{customer.companyId > 0 ? (
|
|
<section className="border-t pt-2">
|
|
{company ? (
|
|
<div className="space-y-2">
|
|
<div className="flex items-start justify-between gap-2">
|
|
<div className="flex min-w-0 flex-1 items-start gap-2 text-sm">
|
|
<Building2Icon
|
|
className="mt-0.5 size-4 shrink-0 text-muted-foreground"
|
|
aria-hidden
|
|
/>
|
|
<div className="min-w-0 flex-1 space-y-0.5">
|
|
<p className="line-clamp-2 font-medium leading-snug text-foreground">
|
|
{company.name}
|
|
</p>
|
|
{company.code ? (
|
|
<p className="font-mono text-xs text-muted-foreground">
|
|
{company.code}
|
|
</p>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="sm"
|
|
className="h-7 shrink-0 gap-1 px-2 text-xs"
|
|
onClick={() => setCompanyEditOpen(true)}
|
|
>
|
|
<PencilIcon className="size-3.5" />
|
|
{t("conversation.edit")}
|
|
</Button>
|
|
</div>
|
|
<div className="space-y-2 pt-1">
|
|
<DetailRow
|
|
label={t("conversation.createdAt")}
|
|
value={formatDateTime(company.createdAt)}
|
|
/>
|
|
<DetailRow
|
|
label={t("conversation.updatedAt")}
|
|
value={formatDateTime(company.updatedAt)}
|
|
/>
|
|
</div>
|
|
<DetailRow
|
|
label={t("conversation.remark")}
|
|
value={company.remark.trim() ? company.remark : ""}
|
|
valueClassName="whitespace-pre-wrap"
|
|
/>
|
|
</div>
|
|
) : (
|
|
<p className="text-sm text-muted-foreground">
|
|
{t("conversation.companyUnavailable")}
|
|
</p>
|
|
)}
|
|
</section>
|
|
) : null}
|
|
|
|
<RelatedTicketsSection conversation={conversation} />
|
|
|
|
<ConversationTagSection conversation={conversation} />
|
|
|
|
<CustomerFormDialog
|
|
open={customerEditOpen}
|
|
onOpenChange={setCustomerEditOpen}
|
|
saving={customerEditSaving}
|
|
itemId={customer.id}
|
|
onSave={async (payload: CustomerFormSavePayload) => {
|
|
if (customerEditSaving) {
|
|
return;
|
|
}
|
|
setCustomerEditSaving(true);
|
|
try {
|
|
await saveCustomerProfile({ ...payload, id: customer.id });
|
|
toast.success(t("conversation.saved"));
|
|
void load();
|
|
setCustomerEditOpen(false);
|
|
} catch (e) {
|
|
toast.error(e instanceof Error ? e.message : t("conversation.saveFailed"));
|
|
} finally {
|
|
setCustomerEditSaving(false);
|
|
}
|
|
}}
|
|
/>
|
|
{company ? (
|
|
<CompanyEditDialog
|
|
open={companyEditOpen}
|
|
onOpenChange={setCompanyEditOpen}
|
|
company={company}
|
|
onSaved={() => {
|
|
void load();
|
|
}}
|
|
/>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function RelatedTicketsSection({ conversation }: { conversation: AgentConversation }) {
|
|
const t = useI18n();
|
|
const [tickets, setTickets] = useState<TicketItem[]>([]);
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
useEffect(() => {
|
|
let cancelled = false;
|
|
async function loadTickets() {
|
|
setLoading(true);
|
|
try {
|
|
const data = await fetchTickets({
|
|
conversationId: conversation.id,
|
|
page: 1,
|
|
limit: 5,
|
|
});
|
|
if (!cancelled) {
|
|
setTickets(Array.isArray(data.results) ? data.results : []);
|
|
}
|
|
} catch (error) {
|
|
if (!cancelled) {
|
|
toast.error(error instanceof Error ? error.message : t("conversation.loadTicketsFailed"));
|
|
}
|
|
} finally {
|
|
if (!cancelled) {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
}
|
|
void loadTickets();
|
|
return () => {
|
|
cancelled = true;
|
|
};
|
|
}, [conversation.id, t]);
|
|
|
|
return (
|
|
<section className="space-y-2 border-t pt-2">
|
|
<SectionHeading>{t("conversation.relatedTickets")}</SectionHeading>
|
|
{loading ? (
|
|
<p className="text-sm text-muted-foreground">{t("conversation.loadingTickets")}</p>
|
|
) : tickets.length > 0 ? (
|
|
<div className="space-y-2">
|
|
{tickets.map((ticket) => (
|
|
<div
|
|
key={ticket.id}
|
|
className="rounded-lg border border-border bg-background px-3 py-2"
|
|
>
|
|
<div className="flex items-start justify-between gap-3">
|
|
<div className="min-w-0 flex-1">
|
|
<div className="truncate text-sm font-medium text-foreground">
|
|
{ticket.title}
|
|
</div>
|
|
<div className="mt-0.5 text-xs text-muted-foreground">
|
|
{ticket.ticketNo}
|
|
</div>
|
|
</div>
|
|
<TicketStatusBadge status={ticket.status} />
|
|
</div>
|
|
<div className="mt-2 flex items-center justify-between gap-3">
|
|
<span className="text-xs text-muted-foreground">
|
|
{ticket.updatedAt ? formatDateTime(ticket.updatedAt) : "—"}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<p className="text-sm text-muted-foreground">{t("conversation.noRelatedTickets")}</p>
|
|
)}
|
|
</section>
|
|
);
|
|
}
|
|
|
|
type CompanyEditDialogProps = {
|
|
open: boolean;
|
|
onOpenChange: (open: boolean) => void;
|
|
company: AdminCompany;
|
|
onSaved: () => void;
|
|
};
|
|
|
|
function CompanyEditDialog({
|
|
open,
|
|
onOpenChange,
|
|
company,
|
|
onSaved,
|
|
}: CompanyEditDialogProps) {
|
|
const t = useI18n();
|
|
const [name, setName] = useState("");
|
|
const [code, setCode] = useState("");
|
|
const [remark, setRemark] = useState("");
|
|
const [saving, setSaving] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (!open) {
|
|
return;
|
|
}
|
|
setName(company.name);
|
|
setCode(company.code);
|
|
setRemark(company.remark);
|
|
}, [open, company]);
|
|
|
|
const handleSubmit = async () => {
|
|
const trimmedName = name.trim();
|
|
if (!trimmedName) {
|
|
toast.error(t("conversation.companyNameRequired"));
|
|
return;
|
|
}
|
|
setSaving(true);
|
|
try {
|
|
await updateCompany({
|
|
id: company.id,
|
|
name: trimmedName,
|
|
code: code.trim(),
|
|
remark: remark.trim(),
|
|
});
|
|
toast.success(t("conversation.saved"));
|
|
onSaved();
|
|
onOpenChange(false);
|
|
} catch (e) {
|
|
toast.error(e instanceof Error ? e.message : t("conversation.saveFailed"));
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
|
<DialogContent className="sm:max-w-md" showCloseButton>
|
|
<DialogHeader>
|
|
<DialogTitle>{t("conversation.editCompany")}</DialogTitle>
|
|
</DialogHeader>
|
|
<div className="flex flex-col gap-4 py-1">
|
|
<Field orientation="vertical">
|
|
<FieldLabel htmlFor="co-name">{t("conversation.companyName")}</FieldLabel>
|
|
<FieldContent>
|
|
<Input id="co-name" value={name} onChange={(e) => setName(e.target.value)} />
|
|
</FieldContent>
|
|
</Field>
|
|
<Field orientation="vertical">
|
|
<FieldLabel htmlFor="co-code">{t("conversation.companyCode")}</FieldLabel>
|
|
<FieldContent>
|
|
<Input id="co-code" value={code} onChange={(e) => setCode(e.target.value)} />
|
|
</FieldContent>
|
|
</Field>
|
|
<Field orientation="vertical">
|
|
<FieldLabel htmlFor="co-remark">{t("conversation.remark")}</FieldLabel>
|
|
<FieldContent>
|
|
<Textarea
|
|
id="co-remark"
|
|
value={remark}
|
|
onChange={(e) => setRemark(e.target.value)}
|
|
rows={3}
|
|
/>
|
|
</FieldContent>
|
|
</Field>
|
|
</div>
|
|
<DialogFooter>
|
|
<Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
|
|
{t("conversation.cancel")}
|
|
</Button>
|
|
<Button type="button" disabled={saving} onClick={() => void handleSubmit()}>
|
|
{saving ? t("conversation.saving") : t("conversation.save")}
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|