feat: add support chat widget demo and state management

- Implemented SupportWidgetDemo component for configuring and mounting the support chat widget.
- Introduced Zustand store for managing support chat state, including message handling and socket connection.
- Created support host bridge for communication between the widget and parent window.
- Added utility functions for JWT token generation and local storage management.
- Enhanced user experience with notifications for new messages and chat status updates.

web/components/support-chat/connection-status.tsx

@@ -0,0 +1,38 @@
+"use client"
+
+import { Badge } from "@/components/ui/badge"
+import { cn } from "@/lib/utils"
+import { useI18n } from "@/i18n/provider"
+
+type SupportChatConnectionStatusProps = {
+  status: "connecting" | "connected" | "disconnected"
+}
+
+export function SupportChatConnectionStatus({ status }: SupportChatConnectionStatusProps) {
+  const t = useI18n()
+  const toneClass =
+    status === "connected"
+      ? "border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-900/70 dark:bg-emerald-950/50 dark:text-emerald-300"
+      : status === "connecting"
+        ? "border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-900/70 dark:bg-amber-950/50 dark:text-amber-300"
+        : "border-border bg-muted text-muted-foreground"
+
+  return (
+    <Badge
+      variant="outline"
+      className={cn("h-6 gap-2 px-2.5 text-[11px] font-medium shadow-sm", toneClass)}
+    >
+      <span
+        className={cn(
+          "inline-block size-2 rounded-full",
+          status === "connected"
+            ? "bg-emerald-500 shadow-[0_0_0_4px_rgba(16,185,129,0.14)]"
+            : status === "connecting"
+              ? "bg-amber-500 shadow-[0_0_0_4px_rgba(245,158,11,0.16)]"
+              : "bg-muted-foreground shadow-[0_0_0_4px_rgba(148,163,184,0.14)]"
+        )}
+      />
+      <span>{t(`supportChat.${status}`)}</span>
+    </Badge>
+  )
+}