mlogclub
86ff71596d
- 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.
39 lines
1.3 KiB
TypeScript
39 lines
1.3 KiB
TypeScript
"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>
|
|
)
|
|
}
|