feat: implement standalone closed page navigation and add related tests

web/app/kefu/closed/page.tsx

@@ -0,0 +1,19 @@
+import { CheckCircle2Icon } from "lucide-react"
+
+export default function Page() {
+  return (
+    <main className="flex min-h-svh items-center justify-center bg-muted px-6 text-foreground">
+      <section className="grid max-w-sm justify-items-center gap-4 text-center">
+        <div className="flex size-14 items-center justify-center rounded-full bg-emerald-50 text-emerald-600 ring-1 ring-emerald-100 dark:bg-emerald-950/40 dark:text-emerald-300 dark:ring-emerald-900">
+          <CheckCircle2Icon className="size-7" />
+        </div>
+        <div className="grid gap-2">
+          <h1 className="text-lg font-semibold text-foreground">会话已结束</h1>
+          <p className="text-sm leading-6 text-muted-foreground">
+            当前客服会话已关闭，感谢您的使用。
+          </p>
+        </div>
+      </section>
+    </main>
+  )
+}

web/components/kefu/chat-shell.tsx

@@ -1,7 +1,6 @@
 "use client"
 
 import {
-  CheckCircle2Icon,
   Maximize2Icon,
   Minimize2Icon,
   MinusIcon,
@@ -19,6 +18,7 @@ import {
 import { useShallow } from "zustand/react/shallow"
 
 import { KefuConnectionStatus } from "@/components/kefu/connection-status"
+import { getStandaloneClosedUrl } from "@/components/kefu/close-navigation"
 import { CustomerMessageEditor } from "@/components/kefu/customer-message-editor"
 import {
   KefuMessageList,
@@ -89,7 +89,6 @@ export function KefuChatShell() {
   const [isMaximized, setIsMaximized] = useState(false)
   const [isCloseDialogOpen, setIsCloseDialogOpen] = useState(false)
   const [isClosingConversation, setIsClosingConversation] = useState(false)
-  const [isConversationClosed, setIsConversationClosed] = useState(false)
 
   const {
     title,
@@ -219,10 +218,6 @@ export function KefuChatShell() {
     requestKefuHostToggleMaximize()
   }
 
-  function handleRestartConversation() {
-    window.location.reload()
-  }
-
   async function confirmCloseConversation() {
     if (isClosingConversation) {
       return
@@ -236,7 +231,7 @@ export function KefuChatShell() {
       if (isEmbedded) {
         requestKefuHostClose()
       } else {
-        setIsConversationClosed(true)
+        window.location.replace(getStandaloneClosedUrl())
       }
     } catch (closeError) {
       window.alert(closeError instanceof Error ? closeError.message : "关闭会话失败")
@@ -258,47 +253,6 @@ export function KefuChatShell() {
     return () => window.removeEventListener("keydown", handleKeyDown)
   }, [isCloseDialogOpen, isClosingConversation])
 
-  if (isConversationClosed) {
-    return (
-      <main
-        className="relative flex h-screen overflow-hidden bg-muted text-foreground"
-        style={{ "--primary": themeColor } as CSSProperties}
-      >
-        <section className="flex h-full w-full flex-col overflow-hidden border border-border bg-card text-card-foreground">
-          {/* <header className="shrink-0 border-b border-border bg-card/95 px-4 py-3 shadow-[0_8px_24px_rgba(15,23,42,0.04)] dark:shadow-none">
-            <div className="min-w-0">
-              <div className="truncate text-base font-semibold text-foreground">
-                {title}
-              </div>
-              {subtitle ? (
-                <div className="mt-1 truncate text-xs text-muted-foreground">
-                  {subtitle}
-                </div>
-              ) : null}
-            </div>
-          </header> */}
-
-          <div className="flex min-h-0 flex-1 items-center justify-center bg-muted/70 px-6">
-            <div className="grid max-w-sm justify-items-center gap-4 text-center">
-              <div className="flex size-14 items-center justify-center rounded-full bg-emerald-50 text-emerald-600 ring-1 ring-emerald-100 dark:bg-emerald-950/40 dark:text-emerald-300 dark:ring-emerald-900">
-                <CheckCircle2Icon className="size-7" />
-              </div>
-              <div className="grid gap-2">
-                <div className="text-lg font-semibold text-foreground">会话已结束</div>
-                <p className="text-sm leading-6 text-muted-foreground">
-                  当前客服会话已关闭，感谢您的使用。
-                </p>
-              </div>
-              {/* <Button type="button" onClick={handleRestartConversation}>
-                重新发起对话
-              </Button> */}
-            </div>
-          </div>
-        </section>
-      </main>
-    )
-  }
-
   return (
     <main
       className="relative flex h-screen overflow-hidden bg-muted text-foreground"

web/components/kefu/close-navigation.test.mjs

@@ -0,0 +1,29 @@
+import assert from "node:assert/strict"
+import test from "node:test"
+import ts from "typescript"
+import { readFile } from "node:fs/promises"
+import vm from "node:vm"
+
+async function loadCloseNavigation() {
+  const source = await readFile(new URL("./close-navigation.ts", import.meta.url), "utf8")
+  const compiled = ts.transpileModule(source, {
+    compilerOptions: {
+      target: ts.ScriptTarget.ES2017,
+      module: ts.ModuleKind.CommonJS,
+    },
+    fileName: "close-navigation.ts",
+  })
+  const sandbox = {
+    exports: {},
+    module: { exports: {} },
+  }
+  sandbox.exports = sandbox.module.exports
+  vm.runInNewContext(compiled.outputText, sandbox)
+  return sandbox.module.exports
+}
+
+test("standalone close navigates to the non-bootstrapping closed page", async () => {
+  const { getStandaloneClosedUrl } = await loadCloseNavigation()
+
+  assert.equal(getStandaloneClosedUrl(), "/kefu/closed")
+})

web/components/kefu/close-navigation.ts

@@ -0,0 +1,5 @@
+export const KEFU_CLOSED_PATH = "/kefu/closed"
+
+export function getStandaloneClosedUrl() {
+  return KEFU_CLOSED_PATH
+}