@traky-app/ui 1.6.6 → 1.6.8

package/src/ui/internal-chat-panel.tsx

@@ -82,6 +82,7 @@ import {
   InputGroupTextarea,
 } from "./input-group";
 import { Input } from "./input";
+import { Skeleton } from "./skeleton";
 import {
   Message,
   MessageAvatar,
@@ -219,6 +220,8 @@ export type InternalChatPanelLabels = {
   supportChat: string;
   supportChatTooltip: string;
   supportRoomDescription: string;
+  reconnectingMessages: string;
+  connectionOffline: string;
 };
 
 const DEFAULT_LABELS: InternalChatPanelLabels = {
@@ -240,6 +243,10 @@ const DEFAULT_LABELS: InternalChatPanelLabels = {
   noRoomTitle: "Sin sala",
   noRoomDescription: "Crea una sala con el botón + a la izquierda.",
   loadingMessages: "Cargando mensajes…",
+  reconnectingMessages:
+    "Reconectando el chat… Si tarda, cierra y vuelve a abrir el panel.",
+  connectionOffline:
+    "Sin conexión en tiempo real. Cierra el chat un momento o recarga la página.",
   loadMessagesErrorTitle: "No se pudieron cargar los mensajes",
   loadMessagesErrorFallback:
     "Revisa que la API esté en marcha y que el módulo de chat interno esté migrado.",
@@ -1283,6 +1290,10 @@ export type InternalChatPanelProps = {
    * y no bloquea clics en el resto del admin (sin overlay a pantalla completa).
    */
   embedded?: boolean;
+  /** Tras pestaña suspendida o pérdida del WebSocket. */
+  realtimeStatus?: "connected" | "reconnecting" | "offline";
+  /** Si es false, no monta trigger ni drawer (flag del host). */
+  featureEnabled?: boolean;
 };
 
 function InternalChatPanel({
@@ -1326,9 +1337,27 @@ function InternalChatPanel({
   defaultOpen = false,
   hideTrigger = false,
   embedded = false,
+  realtimeStatus = "connected",
+  featureEnabled = true,
 }: InternalChatPanelProps) {
+  if (!featureEnabled) {
+    return null;
+  }
+
   const labels = { ...DEFAULT_LABELS, ...labelsPartial };
 
+  const displayMessagesStatus: InternalChatMessagesStatus =
+    realtimeStatus === "reconnecting"
+      ? "loading"
+      : realtimeStatus === "offline" && messagesStatus === "ready"
+        ? "error"
+        : messagesStatus;
+
+  const displayMessagesError =
+    realtimeStatus === "offline" && messagesStatus === "ready"
+      ? labels.connectionOffline
+      : messagesError;
+
   const [open, setOpen] = useState(defaultOpen);
   const [draft, setDraft] = useState("");
   const [createOpen, setCreateOpen] = useState(false);
@@ -2063,12 +2092,21 @@ function InternalChatPanel({
                       </EmptyDescription>
                     </EmptyHeader>
                   </Empty>
-                ) : messagesStatus === "loading" ? (
-                  <div className="flex h-full flex-col items-center justify-center gap-2 text-muted-foreground">
+                ) : displayMessagesStatus === "loading" ? (
+                  <div className="flex h-full flex-col items-center justify-center gap-4 px-6 text-muted-foreground">
                     <IconLoader2 className="size-6 animate-spin" aria-hidden />
-                    <span className="text-sm">{labels.loadingMessages}</span>
+                    <span className="text-center text-sm">
+                      {realtimeStatus === "reconnecting"
+                        ? labels.reconnectingMessages
+                        : labels.loadingMessages}
+                    </span>
+                    <div className="flex w-full max-w-sm flex-col gap-2">
+                      <Skeleton className="h-10 w-3/4 self-end rounded-xl" />
+                      <Skeleton className="h-14 w-full rounded-xl" />
+                      <Skeleton className="h-10 w-2/3 rounded-xl" />
+                    </div>
                   </div>
-                ) : messagesStatus === "error" ? (
+                ) : displayMessagesStatus === "error" ? (
                   <Empty className="h-full border-0">
                     <EmptyHeader>
                       <EmptyMedia variant="icon">
@@ -2076,11 +2114,11 @@ function InternalChatPanel({
                       </EmptyMedia>
                       <EmptyTitle>{labels.loadMessagesErrorTitle}</EmptyTitle>
                       <EmptyDescription className="text-left">
-                        {messagesError ?? labels.loadMessagesErrorFallback}
+                        {displayMessagesError ?? labels.loadMessagesErrorFallback}
                       </EmptyDescription>
                     </EmptyHeader>
                   </Empty>
-                ) : messagesStatus === "empty" ? (
+                ) : displayMessagesStatus === "empty" ? (
                   <Empty className="h-full border-0">
                     <EmptyHeader>
                       <EmptyMedia variant="icon">