chore: import clean Agent Desk snapshot (6/7)

web/components/support-chat/chat-error-boundary.tsx

@@ -0,0 +1,51 @@
+"use client"
+
+import { RotateCwIcon } from "lucide-react"
+import { Component, type ReactNode } from "react"
+
+import { Button } from "@/components/ui/button"
+import { useI18n } from "@/i18n/provider"
+
+function ChatCrashFallback({ onReset }: { onReset: () => void }) {
+  const t = useI18n()
+  return (
+    <div
+      role="alert"
+      className="flex h-full min-h-0 w-full flex-col items-center justify-center gap-3 bg-card px-6 text-center"
+    >
+      <div className="text-sm font-semibold text-foreground">{t("supportChat.crashTitle")}</div>
+      <p className="max-w-[260px] text-xs leading-5 text-muted-foreground">
+        {t("supportChat.crashDescription")}
+      </p>
+      <Button type="button" size="sm" variant="outline" onClick={onReset}>
+        <RotateCwIcon className="size-4" />
+        {t("supportChat.crashReload")}
+      </Button>
+    </div>
+  )
+}
+
+type State = { failed: boolean }
+
+/**
+ * Keeps a rendering failure inside the chat from blanking the whole embedded
+ * frame; the visitor gets a recoverable state instead.
+ */
+export class SupportChatErrorBoundary extends Component<{ children: ReactNode }, State> {
+  state: State = { failed: false }
+
+  static getDerivedStateFromError(): State {
+    return { failed: true }
+  }
+
+  componentDidCatch(error: unknown) {
+    console.error("Support chat crashed", error)
+  }
+
+  render() {
+    if (this.state.failed) {
+      return <ChatCrashFallback onReset={() => this.setState({ failed: false })} />
+    }
+    return this.props.children
+  }
+}