@traky-app/ui 1.6.6 → 1.6.8

package/registry/traky/ui/internal-chat-panel.tsx

@@ -82,6 +82,7 @@ import {
   InputGroupTextarea,
 } from "@/components/ui/input-group";
 import { Input } from "@/components/ui/input";
+import { Skeleton } from "@/components/ui/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">

package/src/lib/file-items.ts

@@ -0,0 +1,99 @@
+export const STORAGE_FILE_PROVIDERS = ["traky", "legacy"] as const
+
+export type FileStorageProvider = (typeof STORAGE_FILE_PROVIDERS)[number]
+
+export type FileItem = {
+  name: string
+  url: string
+  type: string
+  /** `traky` = objeto nuevo; `legacy` = externo. El host decide el valor. */
+  provider?: FileStorageProvider
+}
+
+function inferMimeFromName(name: string) {
+  const lower = name.toLowerCase()
+  if (/\.pdf$/i.test(lower)) return "application/pdf"
+  if (/\.(webm)$/i.test(lower)) return "video/webm"
+  if (/\.(mp4|mov|mkv)$/i.test(lower)) return "video/mp4"
+  if (/\.(png|jpe?g|webp|gif|bmp|svg)$/i.test(lower)) return "image/jpeg"
+  return ""
+}
+
+function resolveFileProvider(explicit?: unknown): FileStorageProvider | undefined {
+  if (explicit === "traky" || explicit === "legacy") return explicit
+  return undefined
+}
+
+/** Normaliza entradas (strings, objetos incompletos o sin `type`). */
+export function normalizeFileItem(file: unknown): FileItem | null {
+  if (typeof file === "string" && file.trim()) {
+    const url = file.trim()
+    const name = url.split("/").pop()?.split("?")[0] || "archivo"
+    return {
+      name,
+      url,
+      type: inferMimeFromName(name),
+    }
+  }
+
+  if (!file || typeof file !== "object") return null
+
+  const item = file as Record<string, unknown>
+  const urlCandidate = [item.url, item.fileUrl, item.href, item.path, item.src].find(
+    (value) => typeof value === "string" && value.trim(),
+  )
+  if (typeof urlCandidate !== "string") return null
+
+  const url = urlCandidate.trim()
+  const name =
+    (typeof item.name === "string" && item.name.trim()) ||
+    (typeof item.fileName === "string" && item.fileName.trim()) ||
+    url.split("/").pop()?.split("?")[0] ||
+    "archivo"
+  const type =
+    (typeof item.type === "string" && item.type) ||
+    (typeof item.mimeType === "string" && item.mimeType) ||
+    inferMimeFromName(name) ||
+    inferMimeFromName(url)
+
+  return {
+    name,
+    url,
+    type,
+    provider: resolveFileProvider(item.provider),
+  }
+}
+
+export function normalizeFileItems(files: unknown): FileItem[] {
+  if (typeof files === "string") {
+    const trimmed = files.trim()
+    if (!trimmed) return []
+
+    if (trimmed.startsWith("[") || trimmed.startsWith("{")) {
+      try {
+        return normalizeFileItems(JSON.parse(trimmed) as unknown)
+      } catch {
+        // JSON inválido: tratar como URL suelta abajo.
+      }
+    }
+
+    const single = normalizeFileItem(trimmed)
+    return single ? [single] : []
+  }
+
+  if (files && typeof files === "object" && !Array.isArray(files)) {
+    const single = normalizeFileItem(files)
+    return single ? [single] : []
+  }
+
+  if (!Array.isArray(files)) return []
+  return files
+    .map(normalizeFileItem)
+    .filter((file): file is FileItem => file !== null)
+}
+
+export function fileListSignature(files: unknown): string {
+  return normalizeFileItems(files)
+    .map((file) => `${file.url}|${file.name}|${file.type}`)
+    .join("\n")
+}

package/src/lib/file-manager-utils.test.tsx

@@ -0,0 +1,71 @@
+import { describe, expect, it } from "vitest"
+import {
+  getFileDisplayName,
+  isAcceptedFile,
+  isImageFile,
+  isPdfFile,
+  toFileItem,
+} from "./file-manager-utils"
+import { normalizeFileItems } from "./file-items"
+
+describe("file-manager-utils", () => {
+  it("detecta imagen, pdf y tipos aceptados", () => {
+    expect(
+      isImageFile({ name: "a.png", url: "https://cdn.example/a.png", type: "" }),
+    ).toBe(true)
+    expect(
+      isPdfFile({
+        name: "doc.pdf",
+        url: "https://cdn.example/doc.pdf",
+        type: "",
+      }),
+    ).toBe(true)
+    expect(
+      isAcceptedFile(
+        new File(["x"], "foto.jpg", { type: "image/jpeg" }),
+        false,
+      ),
+    ).toBe(true)
+    expect(
+      isAcceptedFile(new File(["x"], "clip.mp4", { type: "video/mp4" }), false),
+    ).toBe(false)
+    expect(
+      isAcceptedFile(new File(["x"], "clip.mp4", { type: "video/mp4" }), true),
+    ).toBe(true)
+  })
+
+  it("arma FileItem desde el archivo subido", () => {
+    const file = new File(["x"], "bodega.webp", { type: "image/webp" })
+    expect(toFileItem(file, "https://cdn.example/bodega.webp", "traky")).toEqual({
+      name: "bodega.webp",
+      url: "https://cdn.example/bodega.webp",
+      type: "image/webp",
+      provider: "traky",
+    })
+  })
+
+  it("acorta nombres largos conservando extensión", () => {
+    expect(
+      getFileDisplayName(
+        {
+          name: "foto-de-bodega-muy-larga-para-mostrar.png",
+          url: "https://cdn.example/x.png",
+          type: "image/png",
+        },
+        20,
+      ),
+    ).toMatch(/…\.png$/)
+  })
+
+  it("normaliza JSON y conserva provider explícito", () => {
+    const files = normalizeFileItems({
+      url: "https://cdn.example.com/foto.jpg",
+      name: "foto.jpg",
+      provider: "legacy",
+    })
+    expect(files[0]).toMatchObject({
+      url: "https://cdn.example.com/foto.jpg",
+      provider: "legacy",
+    })
+  })
+})

package/src/lib/file-manager-utils.ts

@@ -0,0 +1,116 @@
+import type { FileItem, FileStorageProvider } from "./file-items"
+
+export const ACCEPTED_TYPES = ".png,.jpg,.jpeg,.webp,.gif,.pdf"
+export const ACCEPTED_TYPES_WITH_VIDEO =
+  ".png,.jpg,.jpeg,.webp,.gif,.pdf,.mp4,.webm,.mov,.mkv"
+export const ACCEPTED_MIME = [
+  "image/png",
+  "image/jpeg",
+  "image/webp",
+  "image/gif",
+  "application/pdf",
+]
+export const VIDEO_MIME = [
+  "video/mp4",
+  "video/webm",
+  "video/quicktime",
+  "video/x-matroska",
+]
+
+export function isImageFile(file: FileItem) {
+  const type = file.type ?? ""
+  const name = file.name ?? ""
+  const url = file.url ?? ""
+  return (
+    type.startsWith("image/") ||
+    /\.(png|jpe?g|gif|webp|bmp|svg)$/i.test(name) ||
+    /\.(png|jpe?g|gif|webp|bmp|svg)(\?|$)/i.test(url)
+  )
+}
+
+export function isPdfFile(file: FileItem) {
+  const type = file.type ?? ""
+  const name = file.name ?? ""
+  const url = file.url ?? ""
+  return (
+    type.includes("pdf") || /\.pdf$/i.test(name) || /\.pdf(\?|$)/i.test(url)
+  )
+}
+
+export function isVideoFile(file: FileItem) {
+  const type = file.type ?? ""
+  const name = file.name ?? ""
+  const url = file.url ?? ""
+  return (
+    type.startsWith("video/") ||
+    /\.(mp4|webm|mov|mkv)$/i.test(name) ||
+    /\.(mp4|webm|mov|mkv)(\?|$)/i.test(url)
+  )
+}
+
+export function isAcceptedFile(file: File, acceptVideos: boolean) {
+  const type = file.type ?? ""
+  if (ACCEPTED_MIME.includes(type)) return true
+  if (acceptVideos && (VIDEO_MIME.includes(type) || type.startsWith("video/"))) {
+    return true
+  }
+  if (/\.(png|jpe?g|webp|gif|pdf)$/i.test(file.name)) return true
+  if (acceptVideos && /\.(mp4|webm|mov|mkv)$/i.test(file.name)) return true
+  return false
+}
+
+export function getFileDisplayName(file: FileItem, maxLength = 40): string {
+  let label = file.name?.trim() ?? ""
+  const looksLikeUrl =
+    /^https?:\/\//i.test(label) || (label.length > 72 && !label.includes(" "))
+
+  if (!label || looksLikeUrl) {
+    try {
+      const pathname = decodeURIComponent(new URL(file.url ?? "").pathname)
+      const fromUrl = pathname.split("/").filter(Boolean).pop() ?? ""
+      if (fromUrl) label = fromUrl
+    } catch {
+      // ignore invalid URL
+    }
+  }
+
+  if (!label) return "Archivo"
+  if (label.length <= maxLength) return label
+
+  const dot = label.lastIndexOf(".")
+  const ext = dot > 0 && label.length - dot <= 8 ? label.slice(dot) : ""
+  const stem = ext ? label.slice(0, dot) : label
+  const budget = maxLength - ext.length - 1
+  if (budget < 8) return `${label.slice(0, maxLength - 1)}…`
+  return `${stem.slice(0, budget)}…${ext}`
+}
+
+export function getFileFullName(file: FileItem): string {
+  const label = file.name?.trim()
+  if (label && !/^https?:\/\//i.test(label)) return label
+  return getFileDisplayName(file, 200)
+}
+
+export function downloadFile(file: FileItem) {
+  const link = document.createElement("a")
+  link.href = file.url
+  link.download = file.name || "archivo"
+  link.target = "_blank"
+  link.rel = "noopener noreferrer"
+  document.body.appendChild(link)
+  link.click()
+  link.remove()
+}
+
+export function toFileItem(
+  file: File,
+  url: string,
+  provider?: FileStorageProvider,
+): FileItem {
+  return {
+    name: file.name,
+    url,
+    type: file.type,
+    ...(provider ? { provider } : {}),
+  }
+}