50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T426b,"use client"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import { useEffect, useRef, useState } from "react"; import { Drawer } from "@/components/motion-lexicon/drawer"; import { InlineEdit } from "@/components/motion-lexicon/inline-edit"; import { LoadingButton } from "@/components/motion-lexicon/loading-button"; import { MetricTicker } from "@/components/motion-lexicon/metric-ticker"; type Locale = "zh" | "en"; type SendState = "idle" | "sending" | "sent"; export type SupportInboxBlockProps = { locale?: Locale; className?: string; }; const ease = [0.23, 1, 0.32, 1] as const; export function SupportInboxBlock({ locale = "en", className = "" }: SupportInboxBlockProps) { const reduced = useReducedMotion(); const copy = locale === "zh" ? zh : en; const [activeId, setActiveId] = useState(copy.conversations[0].id); const [reply, setReply] = useState(""); const [sendState, setSendState] = useState("idle"); const [detailsOpen, setDetailsOpen] = useState(false); const timer = useRef | null>(null); const active = copy.conversations.find((conversation) => conversation.id === activeId) ?? copy.conversations[0]; useEffect(() => () => { if (timer.current) clearTimeout(timer.current); }, []); function sendReply() { if (!reply.trim() || sendState === "sending") return; if (timer.current) clearTimeout(timer.current); setSendState("sending"); timer.current = setTimeout(() => { setSendState("sent"); setReply(""); timer.current = setTimeout(() => setSendState("idle"), 1200); }, reduced ? 0 : 720); } return (

Relay

{active.ticket}
{active.subject}

{active.messages.map((message, index) => {message.author} · {message.time}
{message.body}
)} {sendState === "sent" ? {copy.you} · {copy.now}
{copy.sentMessage}
: null}

{copy.reply} { setReply(event.target.value); setSendState("idle"); }} onKeyDown={(event) => { if ((event.metaKey || event.ctrlKey) && event.key === "Enter") { event.preventDefault(); sendReply(); } }} placeholder={copy.placeholder} value={reply} /> <div className="flex items-center justify-between gap-3 px-1 pb-1"><span className="font-mono text-[8px] text-neutral-400">{sendState === "sending" ? copy.sending : sendState === "sent" ? copy.sent : copy.shortcut}</span><LoadingButton className="min-h-11 bg-neutral-950 text-white dark:bg-neutral-50 dark:text-neutral-950" disabled={!reply.trim() || sendState === "sending"} onAction={sendReply} pendingLabel={copy.sending} successLabel={copy.sent}>{copy.send}</LoadingButton></div> </div> </div> </motion.div> </AnimatePresence> </section> <aside className="hidden border-l border-neutral-200 bg-[#fafafa] p-4 lg:block dark:border-white/10 dark:bg-[#181818]"> <div className="flex items-center gap-3"><span className={`grid size-10 place-items-center rounded-full text-[12px] font-bold ${active.avatarTone}`}>{active.initials}</span><div className="min-w-0"><strong className="block truncate text-[12px]">{active.name}</strong><span className="text-[9px] text-neutral-400">{active.company}</span></div></div> <MetricTicker label={locale === "zh" ? "首响时间" : "First response"} value={42} format={(value) => `${value}m`} delta={-18} period={locale === "zh" ? "本周" : "this week"} className="mt-5" /> <dl className="mt-6 grid gap-4"> {active.details.map((detail) => <div className="grid gap-1 border-b border-neutral-900/[.07] pb-3 dark:border-white/[.07]" key={detail.label}><dt className="text-[9px] text-neutral-400">{detail.label}</dt><dd className="m-0 text-[11px] font-medium">{detail.value}</dd></div>)} </dl> <section className="mt-6 border-t border-neutral-200 pt-4 dark:border-white/10" aria-labelledby={`relay-context-${active.id}`}><h3 className="text-[10px] font-semibold" id={`relay-context-${active.id}`}>{copy.context}</h3><p className="mb-0 mt-3 text-[10px] leading-5 text-neutral-500 dark:text-neutral-300">{active.context}</p></section> </aside> </div> <Drawer open={detailsOpen} onOpenChange={setDetailsOpen} title={copy.settings} description={active.company} side="right"> <div className="grid gap-3 text-[12px]"> {active.details.map((detail) => <div className="flex items-center justify-between gap-4 border-b border-neutral-200 pb-3 dark:border-white/10" key={detail.label}><span className="text-neutral-500 dark:text-neutral-400">{detail.label}</span><strong>{detail.value}</strong></div>)} </div> </Drawer> </section> ); } type Conversation = { id: string; name: string; initials: string; avatarTone: string; company: string; time: string; subject: string; ticket: string; channel: string; priority: boolean; context: string; messages: Array<{ author: string; time: string; body: string; agent?: boolean }>; details: Array<{ label: string; value: string }>; }; const enConversations: Conversation[] = [ { id: "conv-1", name: "Maya Chen", initials: "MC", avatarTone: "bg-[#d6b08e] text-[#5a321c]", company: "Morrow Labs", time: "4m", subject: "Workspace members cannot accept invites", ticket: "TICKET · 2841", channel: "Email", priority: true, context: "Morrow Labs is rolling out Atlas to 42 teammates this week. Their security review was approved yesterday.", messages: [{ author: "Maya", time: "09:14", body: "Three teammates see an expired-link message even though the invitations were sent this morning." }, { author: "You", time: "09:18", body: "I found the affected invitation batch. I’m checking the workspace domain policy before I refresh those links.", agent: true }, { author: "Maya", time: "09:21", body: "Thanks. Everyone is using our @morrowlabs.com address." }], details: [{ label: "Plan", value: "Scale" }, { label: "Workspace", value: "morrow-labs" }, { label: "Region", value: "Singapore" }, { label: "Owner", value: "You" }] }, { id: "conv-2", name: "Leo Martins", initials: "LM", avatarTone: "bg-[#a8bfd3] text-[#24405a]", company: "Fable Studio", time: "12m", subject: "Need a copy of the July invoice", ticket: "TICKET · 2837", channel: "Chat", priority: false, context: "Fable Studio has been active for 18 months and recently added two contractor seats.", messages: [{ author: "Leo", time: "09:02", body: "Could you send the July invoice with our updated legal address?" }, { author: "You", time: "09:07", body: "I can regenerate it after confirming the billing profile. The new address is already saved.", agent: true }], details: [{ label: "Plan", value: "Team" }, { label: "Workspace", value: "fable-studio" }, { label: "Region", value: "Portugal" }, { label: "Owner", value: "You" }] }, { id: "conv-3", name: "Nora Singh", initials: "NS", avatarTone: "bg-[#b6c9aa] text-[#304b27]", company: "Aster Works", time: "26m", subject: "Export stopped at 92 percent", ticket: "TICKET · 2832", channel: "Email", priority: true, context: "Aster Works exports weekly research archives. Their latest archive contains 1,840 records.", messages: [{ author: "Nora", time: "08:41", body: "Our weekly export has stayed at 92 percent for about fifteen minutes." }, { author: "You", time: "08:49", body: "The archive is still processing attachments. I’m watching the job and can restart only that stage if it stalls.", agent: true }], details: [{ label: "Plan", value: "Scale" }, { label: "Workspace", value: "aster-works" }, { label: "Region", value: "London" }, { label: "Owner", value: "You" }] }, ]; function localizeConversations(): Conversation[] { const labels = ["方案", "工作区", "区域", "负责人"]; return enConversations.map((conversation, index) => ({ ...conversation, time: ["4 分钟", "12 分钟", "26 分钟"][index], subject: ["工作区成员无法接受邀请", "需要一份七月发票", "导出停在 92%"][index], channel: conversation.channel === "Email" ? "邮件" : "在线聊天", context: ["Morrow Labs 本周正在向 42 位团队成员推广 Atlas，安全审查已于昨天通过。", "Fable Studio 已使用产品 18 个月，最近增加了两个外部协作者席位。", "Aster Works 每周导出研究档案，最新档案包含 1,840 条记录。"][index], messages: index === 0 ? [{ author: "Maya", time: "09:14", body: "三位同事看到链接已过期，但这些邀请都是今天上午发送的。" }, { author: "我", time: "09:18", body: "我已经找到受影响的邀请批次，正在检查工作区域名策略，然后会刷新链接。", agent: true }, { author: "Maya", time: "09:21", body: "谢谢，大家都使用 @morrowlabs.com 邮箱。" }] : index === 1 ? [{ author: "Leo", time: "09:02", body: "可以提供更新公司地址后的七月发票吗？" }, { author: "我", time: "09:07", body: "新的账单地址已经保存，我确认资料后会重新生成发票。", agent: true }] : [{ author: "Nora", time: "08:41", body: "本周导出已经停在 92% 大约十五分钟。" }, { author: "我", time: "08:49", body: "系统仍在处理附件。我正在观察任务，如果停滞会只重启这个阶段。", agent: true }], details: conversation.details.map((detail, detailIndex) => ({ label: labels[detailIndex], value: detail.value === "You" ? "我" : detail.value })) })); } const en = { search: "Search conversations", settings: "Inbox settings", inbox: "Priority inbox", resolve: "Resolve", reply: "Reply", placeholder: "Write a clear next step…", shortcut: "⌘ ENTER TO SEND", send: "Send reply", sending: "Sending…", sent: "Reply sent", sentMessage: "I refreshed the invitation batch and confirmed the new links are active.", you: "You", now: "Now", context: "Customer context", conversations: enConversations }; const zh = { search: "搜索会话", settings: "收件箱设置", inbox: "优先收件箱", resolve: "解决会话", reply: "回复", placeholder: "写下清楚的下一步…", shortcut: "⌘ ENTER 发送", send: "发送回复", sending: "发送中…", sent: "回复已发送", sentMessage: "我已刷新邀请批次，并确认新链接可以正常使用。", you: "我", now: "刚刚", context: "客户背景", conversations: localizeConversations() }; 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L50",null,{"namespace":"@motion-lexicon","registryDependencies":["https://motion-lexicon.pages.dev/r/drawer.json","https://motion-lexicon.pages.dev/r/inline-edit.json","https://motion-lexicon.pages.dev/r/loading-button.json","https://motion-lexicon.pages.dev/r/metric-ticker.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"src/registry/blocks/support-inbox.tsx","content":"$52","type":"registry:component","target":"components/motion-lexicon/blocks/support-inbox.tsx"}],"className":"h-[70svh] min-h-80"}]]}] </article></body></html>