@traky-app/ui 1.6.3 → 1.6.5

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

@@ -2,12 +2,22 @@
 
 import {
   IconArrowUp,
+  IconCheck,
+  IconChecks,
   IconDotsVertical,
+  IconFile,
+  IconHeadset,
   IconLoader2,
+  IconMicrophone,
   IconMessages,
   IconPackage,
   IconPaperclip,
+  IconPhoto,
+  IconPlayerPause,
+  IconPlayerPlay,
+  IconSquare,
   IconPlus,
+  IconScreenShare,
   IconSparkles,
   IconTrash,
   IconTruckLoading,
@@ -105,6 +115,29 @@ export type InternalChatRoom = {
   id: string;
   name: string;
   isOrganization?: boolean;
+  /** Canal reservado con el administrador / soporte Traky. */
+  isSupport?: boolean;
+};
+
+/** Acuse de recibo estilo mensajería (1 palomita = enviado, 2 grises = llegó, 2 azules = leído). */
+export type InternalChatMessageReceiptStatus =
+  | "pending"
+  | "sent"
+  | "delivered"
+  | "read";
+
+export type InternalChatMessageAttachment = {
+  kind: "image" | "file" | "video";
+  name: string;
+  url?: string;
+  sizeLabel?: string;
+};
+
+const SCREEN_RECORD_MAX_MS = 60_000;
+
+export type InternalChatMessageAudio = {
+  src: string;
+  durationMs?: number;
 };
 
 export type InternalChatMessageLine = {
@@ -114,6 +147,11 @@ export type InternalChatMessageLine = {
   initials: string;
   text: string;
   at: string;
+  kind?: "text" | "audio";
+  audio?: InternalChatMessageAudio;
+  attachments?: InternalChatMessageAttachment[];
+  /** Solo mensajes propios (`role: "me"`). */
+  receiptStatus?: InternalChatMessageReceiptStatus;
 };
 
 export type InternalChatMessagesStatus =
@@ -151,11 +189,36 @@ export type InternalChatPanelLabels = {
   messageAriaLabel: string;
   attachAriaLabel: string;
   attachPhotos: string;
+  attachFiles: string;
+  attachAudio: string;
+  attachAudioFile: string;
+  attachmentPending: string;
+  voiceRecordTitle: string;
+  voiceRecordHint: string;
+  voiceRecordStart: string;
+  voiceRecordStop: string;
+  voiceRecordSend: string;
+  voiceRecordCancel: string;
+  voiceRecordPermissionError: string;
+  screenCaptureAriaLabel: string;
+  screenRecordTitle: string;
+  screenRecordHint: string;
+  screenRecordStart: string;
+  screenRecordStop: string;
+  screenRecordSend: string;
+  screenRecordCancel: string;
+  screenRecordPermissionError: string;
+  screenRecordMaxReached: string;
+  screenRecordBackgroundHint: string;
+  screenRecordOpenChatToFinish: string;
   sendSrOnly: string;
   orgRoomSuffix: string;
   orgRoomTooltip: string;
   slashMentionHint: string;
   selectRoomHint: string;
+  supportChat: string;
+  supportChatTooltip: string;
+  supportRoomDescription: string;
 };
 
 const DEFAULT_LABELS: InternalChatPanelLabels = {
@@ -189,12 +252,42 @@ const DEFAULT_LABELS: InternalChatPanelLabels = {
   messagePlaceholderNoRoom: "Selecciona una sala…",
   messageAriaLabel: "Mensaje",
   attachAriaLabel: "Adjuntar",
-  attachPhotos: "Fotos y archivos",
+  attachPhotos: "Fotos",
+  attachFiles: "Archivos",
+  attachAudio: "Grabar nota de voz",
+  attachAudioFile: "Enviar audio guardado",
+  attachmentPending: "Vista previa · conexión lista",
+  voiceRecordTitle: "Grabar nota de voz",
+  voiceRecordHint: "Pulsa grabar, habla y envía cuando termines.",
+  voiceRecordStart: "Grabar",
+  voiceRecordStop: "Detener",
+  voiceRecordSend: "Enviar audio",
+  voiceRecordCancel: "Cancelar",
+  voiceRecordPermissionError:
+    "No pudimos usar el micrófono. Revisa los permisos del navegador.",
+  screenCaptureAriaLabel: "Capturar pantalla",
+  screenRecordTitle: "Captura de pantalla",
+  screenRecordHint:
+    "Inicia y elige compartir la pestaña de Traky (no solo el panel del chat). Puedes cerrar el chat y seguir navegando (máx. 1 min).",
+  screenRecordStart: "Iniciar captura",
+  screenRecordStop: "Detener",
+  screenRecordSend: "Enviar video",
+  screenRecordCancel: "Cancelar",
+  screenRecordPermissionError:
+    "No se pudo iniciar la captura. Revisa los permisos del navegador.",
+  screenRecordMaxReached: "Se alcanzó el máximo de 1 minuto.",
+  screenRecordBackgroundHint:
+    "Puedes cerrar el chat; la grabación continúa. Vuelve aquí para detener y enviar.",
+  screenRecordOpenChatToFinish: "Abrir chat · captura en curso",
   sendSrOnly: "Enviar",
   orgRoomSuffix: " · Sala de toda la organización",
   orgRoomTooltip: " — toda la organización (no se elimina)",
   slashMentionHint: "menciones (guías y paquetes)",
   selectRoomHint: "Selecciona una sala o crea una nueva.",
+  supportChat: "Soporte Traky",
+  supportChatTooltip: "Chat con el equipo de soporte de Traky",
+  supportRoomDescription:
+    "Canal directo con soporte Traky para tu organización.",
 };
 
 const DEFAULT_MENTION_CONFIG: InternalChatMentionConfig = {
@@ -249,6 +342,867 @@ function stepMentionHighlight(
   return current;
 }
 
+function formatUnreadBadge(count: number): string {
+  if (count <= 0) return "";
+  if (count > 9) return "9+";
+  return String(count);
+}
+
+/** Contador en círculo perfecto (sin `min-w`/`px` que lo ovalan). */
+function unreadCountBadgeClasses(label: string): string {
+  const wide = label.length > 1;
+  return cn(
+    "pointer-events-none absolute flex shrink-0 items-center justify-center rounded-full bg-destructive font-bold tabular-nums leading-none text-destructive-foreground shadow-sm",
+    wide
+      ? "-right-1 -top-1 size-5 text-[0.5rem]"
+      : "-right-0.5 -top-0.5 size-4 text-[0.625rem]",
+  );
+}
+
+function MessageReceiptTicks({
+  status,
+}: {
+  status: InternalChatMessageReceiptStatus;
+}) {
+  if (status === "pending") {
+    return (
+      <IconLoader2
+        className="size-3 shrink-0 animate-spin text-muted-foreground"
+        aria-hidden
+      />
+    );
+  }
+  if (status === "sent") {
+    return (
+      <IconCheck
+        className="size-3.5 shrink-0 text-muted-foreground"
+        aria-hidden
+      />
+    );
+  }
+  const read = status === "read";
+  return (
+    <IconChecks
+      className={cn(
+        "size-3.5 shrink-0",
+        read ? "text-sky-500 dark:text-sky-400" : "text-muted-foreground",
+      )}
+      aria-hidden
+    />
+  );
+}
+
+function formatAudioDuration(ms: number): string {
+  const totalSec = Math.max(0, Math.round(ms / 1000));
+  const m = Math.floor(totalSec / 60);
+  const s = totalSec % 60;
+  return `${m}:${s.toString().padStart(2, "0")}`;
+}
+
+function pseudoWaveformBars(seed: string, count = 28): number[] {
+  let h = 0;
+  for (let i = 0; i < seed.length; i++) h = (h * 31 + seed.charCodeAt(i)) >>> 0;
+  return Array.from({ length: count }, (_, i) => {
+    h = (h * 1103515245 + 12345 + i) >>> 0;
+    return 0.25 + (h % 75) / 100;
+  });
+}
+
+function InternalChatAudioBubble({
+  audio,
+  seed,
+  mine,
+}: {
+  audio: InternalChatMessageAudio;
+  seed: string;
+  mine: boolean;
+}) {
+  const ref = useRef<HTMLAudioElement>(null);
+  const [playing, setPlaying] = useState(false);
+  const [durationMs, setDurationMs] = useState(audio.durationMs ?? 0);
+  const [progress, setProgress] = useState(0);
+
+  const bars = useMemo(() => pseudoWaveformBars(seed), [seed]);
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const onMeta = () => {
+      if (Number.isFinite(el.duration) && el.duration > 0) {
+        setDurationMs(Math.round(el.duration * 1000));
+      }
+    };
+    const onTime = () => {
+      if (!el.duration) return;
+      setProgress(el.currentTime / el.duration);
+    };
+    const onEnd = () => {
+      setPlaying(false);
+      setProgress(0);
+    };
+    el.addEventListener("loadedmetadata", onMeta);
+    el.addEventListener("timeupdate", onTime);
+    el.addEventListener("ended", onEnd);
+    return () => {
+      el.removeEventListener("loadedmetadata", onMeta);
+      el.removeEventListener("timeupdate", onTime);
+      el.removeEventListener("ended", onEnd);
+    };
+  }, [audio.src]);
+
+  const toggle = useCallback(() => {
+    const el = ref.current;
+    if (!el) return;
+    if (playing) {
+      el.pause();
+      setPlaying(false);
+      return;
+    }
+    void el.play();
+    setPlaying(true);
+  }, [playing]);
+
+  const displayMs = durationMs || audio.durationMs || 0;
+
+  return (
+    <div className="flex min-w-[min(100%,14rem)] items-center gap-2">
+      <audio ref={ref} src={audio.src} preload="metadata" className="hidden" />
+      <Button
+        type="button"
+        variant={mine ? "secondary" : "outline"}
+        size="icon"
+        className="size-9 shrink-0 rounded-full"
+        aria-label={playing ? "Pausar audio" : "Reproducir audio"}
+        onClick={toggle}
+      >
+        {playing ? (
+          <IconPlayerPause className="size-4" />
+        ) : (
+          <IconPlayerPlay className="size-4" />
+        )}
+      </Button>
+      <div className="flex min-w-0 flex-1 flex-col gap-1">
+        <div className="flex h-7 items-end gap-px" aria-hidden>
+          {bars.map((h, i) => {
+            const lit = progress > 0 && i / bars.length <= progress;
+            return (
+              <span
+                key={i}
+                className={cn(
+                  "w-[3px] shrink-0 rounded-full transition-colors",
+                  lit
+                    ? mine
+                      ? "bg-foreground/70"
+                      : "bg-primary"
+                    : "bg-muted-foreground/35",
+                )}
+                style={{ height: `${Math.round(h * 100)}%` }}
+              />
+            );
+          })}
+        </div>
+        <span className="text-[0.65rem] tabular-nums text-muted-foreground">
+          {displayMs > 0 ? formatAudioDuration(displayMs) : "0:00"}
+        </span>
+      </div>
+    </div>
+  );
+}
+
+function InternalChatAttachmentStack({
+  items,
+  labels,
+}: {
+  items: InternalChatMessageAttachment[];
+  labels: InternalChatPanelLabels;
+}) {
+  if (items.length === 0) return null;
+  return (
+    <div className="flex flex-col gap-1.5">
+      {items.map((att, i) => (
+        <div
+          key={`${att.name}-${i}`}
+          className="overflow-hidden rounded-lg border border-border bg-muted/40"
+        >
+          {att.kind === "video" && att.url ? (
+            <video
+              src={att.url}
+              controls
+              playsInline
+              className="max-h-48 w-full bg-black object-contain"
+            />
+          ) : att.kind === "image" && att.url ? (
+            <img
+              src={att.url}
+              alt={att.name}
+              className="max-h-40 w-full object-cover"
+            />
+          ) : (
+            <div className="flex items-center gap-2 px-3 py-2 text-sm">
+              {att.kind === "image" ? (
+                <IconPhoto className="size-4 shrink-0 text-muted-foreground" />
+              ) : att.kind === "video" ? (
+                <IconScreenShare className="size-4 shrink-0 text-muted-foreground" />
+              ) : (
+                <IconFile className="size-4 shrink-0 text-muted-foreground" />
+              )}
+              <span className="min-w-0 truncate font-medium">{att.name}</span>
+              {att.sizeLabel ? (
+                <span className="ml-auto shrink-0 text-xs text-muted-foreground">
+                  {att.sizeLabel}
+                </span>
+              ) : null}
+            </div>
+          )}
+          {!att.url ? (
+            <p className="border-t border-border px-3 py-1 text-[0.65rem] text-muted-foreground">
+              {labels.attachmentPending}
+            </p>
+          ) : null}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function InternalChatVoiceRecorderBar({
+  labels,
+  onClose,
+  onSendBlob,
+  onSendLegacy,
+}: {
+  labels: InternalChatPanelLabels;
+  onClose: () => void;
+  onSendBlob?: (blob: Blob, durationMs: number) => void | Promise<void>;
+  onSendLegacy?: () => void | Promise<void>;
+}) {
+  const recorderRef = useRef<MediaRecorder | null>(null);
+  const chunksRef = useRef<Blob[]>([]);
+  const startedAtRef = useRef(0);
+  const [recording, setRecording] = useState(false);
+  const [blob, setBlob] = useState<Blob | null>(null);
+  const [durationMs, setDurationMs] = useState(0);
+  const [error, setError] = useState<string | null>(null);
+  const [sending, setSending] = useState(false);
+
+  const stopTracks = useCallback((recorder: MediaRecorder | null) => {
+    recorder?.stream.getTracks().forEach((t) => t.stop());
+  }, []);
+
+  const startRecording = useCallback(async () => {
+    setError(null);
+    setBlob(null);
+    chunksRef.current = [];
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+      const mime = MediaRecorder.isTypeSupported("audio/webm")
+        ? "audio/webm"
+        : "audio/mp4";
+      const recorder = new MediaRecorder(stream, { mimeType: mime });
+      recorderRef.current = recorder;
+      recorder.ondataavailable = (e) => {
+        if (e.data.size > 0) chunksRef.current.push(e.data);
+      };
+      recorder.onstop = () => {
+        const next = new Blob(chunksRef.current, { type: mime });
+        setBlob(next);
+        const ms = Math.max(
+          0,
+          Date.now() - (startedAtRef.current || Date.now()),
+        );
+        setDurationMs(ms);
+        stopTracks(recorder);
+        recorderRef.current = null;
+      };
+      startedAtRef.current = Date.now();
+      recorder.start();
+      setRecording(true);
+    } catch {
+      setError(labels.voiceRecordPermissionError);
+    }
+  }, [labels.voiceRecordPermissionError, stopTracks]);
+
+  const stopRecording = useCallback(() => {
+    const rec = recorderRef.current;
+    if (!rec || rec.state === "inactive") return;
+    rec.stop();
+    setRecording(false);
+  }, []);
+
+  const handleClose = useCallback(() => {
+    if (recording) stopRecording();
+    stopTracks(recorderRef.current);
+    recorderRef.current = null;
+    onClose();
+  }, [onClose, recording, stopRecording, stopTracks]);
+
+  const handleSend = useCallback(async () => {
+    if (sending) return;
+    setSending(true);
+    try {
+      if (blob && onSendBlob) {
+        await onSendBlob(blob, durationMs);
+      } else if (onSendLegacy) {
+        await onSendLegacy();
+      }
+      onClose();
+    } finally {
+      setSending(false);
+    }
+  }, [blob, durationMs, onClose, onSendBlob, onSendLegacy, sending]);
+
+  const previewUrl = useMemo(
+    () => (blob ? URL.createObjectURL(blob) : null),
+    [blob],
+  );
+
+  useEffect(() => {
+    return () => {
+      if (previewUrl) URL.revokeObjectURL(previewUrl);
+    };
+  }, [previewUrl]);
+
+  return (
+    <div
+      className="mx-5 mb-2 rounded-xl border border-border bg-muted/35 px-3 py-2"
+      role="region"
+      aria-label={labels.voiceRecordTitle}
+    >
+      <div className="flex items-center justify-between gap-2">
+        <p className="text-xs font-medium text-foreground">
+          {labels.voiceRecordTitle}
+        </p>
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          className="size-8 shrink-0"
+          aria-label={labels.voiceRecordCancel}
+          onClick={handleClose}
+        >
+          <IconX className="size-4" />
+        </Button>
+      </div>
+      {error ? (
+        <p className="mt-1 text-xs leading-snug text-destructive">{error}</p>
+      ) : (
+        <p className="mt-0.5 text-xs leading-snug text-muted-foreground">
+          {recording
+            ? "Pulsa el cuadrado rojo para terminar."
+            : blob
+              ? "Escucha la vista previa y envía cuando quieras."
+              : labels.voiceRecordHint}
+        </p>
+      )}
+      <div className="mt-2 flex items-center gap-2">
+        {previewUrl && blob ? (
+          <VoiceRecorderPreviewBar
+            src={previewUrl}
+            durationMs={durationMs}
+          />
+        ) : recording ? (
+          <>
+            <Button
+              type="button"
+              variant="destructive"
+              size="sm"
+              className="h-8 shrink-0 gap-1.5"
+              onClick={stopRecording}
+            >
+              <IconSquare className="size-3.5 fill-current" />
+              {labels.voiceRecordStop}
+            </Button>
+            <span className="inline-flex min-w-0 flex-1 items-center gap-1.5 text-xs text-destructive">
+              <span className="size-2 shrink-0 animate-pulse rounded-full bg-destructive" />
+              Grabando…
+            </span>
+          </>
+        ) : (
+          <Button
+            type="button"
+            variant="secondary"
+            size="sm"
+            className="h-8 gap-1.5"
+            onClick={() => void startRecording()}
+          >
+            <IconMicrophone className="size-3.5" />
+            {labels.voiceRecordStart}
+          </Button>
+        )}
+        <Button
+          type="button"
+          size="sm"
+          className="ml-auto h-8 shrink-0"
+          disabled={sending || (!blob && !onSendLegacy)}
+          onClick={() => void handleSend()}
+        >
+          {labels.voiceRecordSend}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+function VoiceRecorderPreviewBar({
+  src,
+  durationMs,
+}: {
+  src: string;
+  durationMs: number;
+}) {
+  const ref = useRef<HTMLAudioElement>(null);
+  const [playing, setPlaying] = useState(false);
+  const [progress, setProgress] = useState(0);
+  const [resolvedMs, setResolvedMs] = useState(durationMs);
+  const bars = useMemo(() => pseudoWaveformBars("voice-recorder-preview"), []);
+
+  const toggle = useCallback(() => {
+    const el = ref.current;
+    if (!el) return;
+    if (playing) {
+      el.pause();
+      setPlaying(false);
+      return;
+    }
+    void el.play();
+    setPlaying(true);
+  }, [playing]);
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const onMeta = () => {
+      if (Number.isFinite(el.duration) && el.duration > 0) {
+        setResolvedMs(Math.round(el.duration * 1000));
+      }
+    };
+    const onTime = () => {
+      if (!el.duration) return;
+      setProgress(el.currentTime / el.duration);
+    };
+    const onEnd = () => {
+      setPlaying(false);
+      setProgress(0);
+    };
+    el.addEventListener("loadedmetadata", onMeta);
+    el.addEventListener("timeupdate", onTime);
+    el.addEventListener("ended", onEnd);
+    return () => {
+      el.removeEventListener("loadedmetadata", onMeta);
+      el.removeEventListener("timeupdate", onTime);
+      el.removeEventListener("ended", onEnd);
+    };
+  }, [src]);
+
+  const displayMs = resolvedMs || durationMs;
+
+  return (
+    <div className="flex min-w-0 flex-1 items-center gap-2">
+      <audio ref={ref} src={src} preload="metadata" className="hidden" />
+      <Button
+        type="button"
+        variant="outline"
+        size="icon"
+        className="size-8 shrink-0 rounded-full"
+        aria-label={playing ? "Pausar vista previa" : "Reproducir vista previa"}
+        onClick={toggle}
+      >
+        {playing ? (
+          <IconPlayerPause className="size-4" />
+        ) : (
+          <IconPlayerPlay className="size-4" />
+        )}
+      </Button>
+      <div className="flex min-w-0 flex-1 flex-col gap-0.5">
+        <div className="flex h-6 items-end gap-px" aria-hidden>
+          {bars.map((h, i) => {
+            const lit = progress > 0 && i / bars.length <= progress;
+            return (
+              <span
+                key={i}
+                className={cn(
+                  "w-[2px] shrink-0 rounded-full transition-colors",
+                  lit ? "bg-primary" : "bg-muted-foreground/35",
+                )}
+                style={{ height: `${Math.round(h * 100)}%` }}
+              />
+            );
+          })}
+        </div>
+        <span className="text-[0.65rem] tabular-nums text-muted-foreground">
+          {displayMs > 0 ? formatAudioDuration(displayMs) : "0:00"}
+        </span>
+      </div>
+    </div>
+  );
+}
+
+function pickScreenRecorderMime(): string {
+  const candidates = [
+    "video/webm;codecs=vp9",
+    "video/webm;codecs=vp8",
+    "video/webm",
+    "video/mp4",
+  ];
+  return candidates.find((m) => MediaRecorder.isTypeSupported(m)) ?? "video/webm";
+}
+
+type ScreenRecorderSession = {
+  recording: boolean;
+  elapsedMs: number;
+  blob: Blob | null;
+  error: string | null;
+  maxReached: boolean;
+  sending: boolean;
+  previewUrl: string | null;
+  canSend: boolean;
+  timerLabel: string;
+  active: boolean;
+  startCapture: () => Promise<void>;
+  stopRecording: () => void;
+  cancelSession: () => void;
+  sendRecording: () => Promise<void>;
+};
+
+function useInternalChatScreenRecorderSession(
+  labels: InternalChatPanelLabels,
+  onSendBlob?: (blob: Blob, durationMs: number) => void | Promise<void>,
+  onRecordingChange?: (recording: boolean) => void,
+): ScreenRecorderSession {
+  const recorderRef = useRef<MediaRecorder | null>(null);
+  const streamRef = useRef<MediaStream | null>(null);
+  const chunksRef = useRef<Blob[]>([]);
+  const startedAtRef = useRef(0);
+  const durationMsRef = useRef(0);
+  const tickRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  const maxTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const previewUrlRef = useRef<string | null>(null);
+
+  const [recording, setRecording] = useState(false);
+  const [elapsedMs, setElapsedMs] = useState(0);
+  const [blob, setBlob] = useState<Blob | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [maxReached, setMaxReached] = useState(false);
+  const [sending, setSending] = useState(false);
+  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
+
+  const clearTimers = useCallback(() => {
+    if (tickRef.current) {
+      clearInterval(tickRef.current);
+      tickRef.current = null;
+    }
+    if (maxTimerRef.current) {
+      clearTimeout(maxTimerRef.current);
+      maxTimerRef.current = null;
+    }
+  }, []);
+
+  const stopStream = useCallback(() => {
+    streamRef.current?.getTracks().forEach((t) => t.stop());
+    streamRef.current = null;
+  }, []);
+
+  const revokePreview = useCallback(() => {
+    if (previewUrlRef.current) {
+      URL.revokeObjectURL(previewUrlRef.current);
+      previewUrlRef.current = null;
+    }
+    setPreviewUrl(null);
+  }, []);
+
+  const stopRecording = useCallback(
+    (reason?: "max") => {
+      const rec = recorderRef.current;
+      if (rec && rec.state !== "inactive") {
+        rec.stop();
+      } else {
+        clearTimers();
+        stopStream();
+        setRecording(false);
+        onRecordingChange?.(false);
+      }
+      if (reason === "max") setMaxReached(true);
+    },
+    [clearTimers, onRecordingChange, stopStream],
+  );
+
+  const startCapture = useCallback(async () => {
+    setError(null);
+    revokePreview();
+    setBlob(null);
+    setMaxReached(false);
+    setElapsedMs(0);
+    chunksRef.current = [];
+    try {
+      const stream = await navigator.mediaDevices.getDisplayMedia({
+        video: true,
+        audio: false,
+        preferCurrentTab: true,
+      } as DisplayMediaStreamOptions);
+      streamRef.current = stream;
+      const videoTrack = stream.getVideoTracks()[0];
+      videoTrack?.addEventListener("ended", () => stopRecording());
+
+      const mime = pickScreenRecorderMime();
+      const recorder = new MediaRecorder(stream, { mimeType: mime });
+      recorderRef.current = recorder;
+      recorder.ondataavailable = (e) => {
+        if (e.data.size > 0) chunksRef.current.push(e.data);
+      };
+      recorder.onstop = () => {
+        clearTimers();
+        const finalMs = Math.min(
+          SCREEN_RECORD_MAX_MS,
+          Math.max(0, Date.now() - (startedAtRef.current || Date.now())),
+        );
+        durationMsRef.current = finalMs;
+        setElapsedMs(finalMs);
+        const next = new Blob(chunksRef.current, {
+          type: recorder.mimeType || mime,
+        });
+        setBlob(next);
+        const url = URL.createObjectURL(next);
+        previewUrlRef.current = url;
+        setPreviewUrl(url);
+        stopStream();
+        recorderRef.current = null;
+        setRecording(false);
+        onRecordingChange?.(false);
+      };
+      startedAtRef.current = Date.now();
+      recorder.start(500);
+      setRecording(true);
+      onRecordingChange?.(true);
+      tickRef.current = setInterval(() => {
+        const ms = Date.now() - startedAtRef.current;
+        const clamped = Math.min(ms, SCREEN_RECORD_MAX_MS);
+        setElapsedMs(clamped);
+        if (ms >= SCREEN_RECORD_MAX_MS) stopRecording("max");
+      }, 200);
+      maxTimerRef.current = setTimeout(
+        () => stopRecording("max"),
+        SCREEN_RECORD_MAX_MS,
+      );
+    } catch {
+      stopStream();
+      setError(labels.screenRecordPermissionError);
+      setRecording(false);
+      onRecordingChange?.(false);
+    }
+  }, [
+    clearTimers,
+    labels.screenRecordPermissionError,
+    onRecordingChange,
+    revokePreview,
+    stopRecording,
+    stopStream,
+  ]);
+
+  const cancelSession = useCallback(() => {
+    if (recording) stopRecording();
+    clearTimers();
+    stopStream();
+    recorderRef.current = null;
+    revokePreview();
+    setBlob(null);
+    setError(null);
+    setMaxReached(false);
+    setElapsedMs(0);
+    durationMsRef.current = 0;
+    setRecording(false);
+    onRecordingChange?.(false);
+  }, [
+    clearTimers,
+    onRecordingChange,
+    recording,
+    revokePreview,
+    stopRecording,
+    stopStream,
+  ]);
+
+  const sendRecording = useCallback(async () => {
+    if (sending || !blob || !onSendBlob) return;
+    setSending(true);
+    try {
+      await onSendBlob(blob, durationMsRef.current || elapsedMs);
+      cancelSession();
+    } finally {
+      setSending(false);
+    }
+  }, [blob, cancelSession, elapsedMs, onSendBlob, sending]);
+
+  useEffect(() => {
+    return () => {
+      clearTimers();
+      if (recorderRef.current?.state === "recording") {
+        recorderRef.current.stop();
+      }
+      stopStream();
+      revokePreview();
+    };
+  }, [clearTimers, revokePreview, stopStream]);
+
+  const timerLabel = `${formatAudioDuration(elapsedMs)} / ${formatAudioDuration(SCREEN_RECORD_MAX_MS)}`;
+  const active = recording || Boolean(blob) || Boolean(error);
+
+  return {
+    recording,
+    elapsedMs,
+    blob,
+    error,
+    maxReached,
+    sending,
+    previewUrl,
+    canSend: Boolean(blob) && Boolean(onSendBlob),
+    timerLabel,
+    active,
+    startCapture,
+    stopRecording: () => stopRecording(),
+    cancelSession,
+    sendRecording,
+  };
+}
+
+function InternalChatScreenRecorderBar({
+  labels,
+  session,
+  onDismiss,
+}: {
+  labels: InternalChatPanelLabels;
+  session: ScreenRecorderSession;
+  onDismiss: () => void;
+}) {
+  const {
+    recording,
+    blob,
+    error,
+    maxReached,
+    sending,
+    previewUrl,
+    canSend,
+    timerLabel,
+    startCapture,
+    stopRecording,
+    cancelSession,
+    sendRecording,
+  } = session;
+
+  const handleDismiss = () => {
+    if (!recording && !blob) {
+      cancelSession();
+    }
+    onDismiss();
+  };
+
+  return (
+    <div
+      className="mx-5 mb-2 rounded-xl border border-border bg-muted/35 px-3 py-2"
+      role="region"
+      aria-label={labels.screenRecordTitle}
+    >
+      <div className="flex items-center justify-between gap-2">
+        <p className="text-xs font-medium text-foreground">
+          {labels.screenRecordTitle}
+        </p>
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          className="size-8 shrink-0"
+          aria-label={
+            recording
+              ? "Ocultar panel (la grabación continúa)"
+              : labels.screenRecordCancel
+          }
+          onClick={handleDismiss}
+        >
+          <IconX className="size-4" />
+        </Button>
+      </div>
+      {error ? (
+        <p className="mt-1 text-xs leading-snug text-destructive">{error}</p>
+      ) : (
+        <p className="mt-0.5 text-xs leading-snug text-muted-foreground">
+          {recording
+            ? labels.screenRecordBackgroundHint
+            : maxReached
+              ? labels.screenRecordMaxReached
+              : blob
+                ? "Revisa el video y envíalo al chat."
+                : labels.screenRecordHint}
+        </p>
+      )}
+      {recording ? (
+        <p className="mt-1 text-xs font-medium tabular-nums text-destructive">
+          {timerLabel}
+        </p>
+      ) : null}
+      <div className="mt-2 flex flex-col gap-2">
+        {previewUrl && blob ? (
+          <video
+            src={previewUrl}
+            controls
+            playsInline
+            className="max-h-32 w-full rounded-md border border-border bg-black object-contain"
+          />
+        ) : null}
+        <div className="flex flex-wrap items-center gap-2">
+          {recording ? (
+            <Button
+              type="button"
+              variant="destructive"
+              size="sm"
+              className="h-8 gap-1.5"
+              onClick={stopRecording}
+            >
+              <IconSquare className="size-3.5 fill-current" />
+              {labels.screenRecordStop}
+            </Button>
+          ) : (
+            <Button
+              type="button"
+              variant="secondary"
+              size="sm"
+              className="h-8 gap-1.5"
+              disabled={Boolean(blob)}
+              onClick={() => void startCapture()}
+            >
+              <IconScreenShare className="size-3.5" />
+              {labels.screenRecordStart}
+            </Button>
+          )}
+          {recording ? (
+            <span className="inline-flex min-w-0 flex-1 items-center gap-1.5 text-xs text-destructive">
+              <span className="size-2 shrink-0 animate-pulse rounded-full bg-destructive" />
+              Grabando pantalla
+            </span>
+          ) : null}
+          {(recording || blob) && (
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              className="h-8 text-xs text-muted-foreground"
+              onClick={cancelSession}
+            >
+              {labels.screenRecordCancel}
+            </Button>
+          )}
+          <Button
+            type="button"
+            size="sm"
+            className="ml-auto h-8 shrink-0"
+            disabled={sending || !canSend}
+            onClick={() => void sendRecording()}
+          >
+            {labels.screenRecordSend}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
 function renderMessageTextWithMentions(text: string): ReactNode {
   const parts = text.split(/(@\[[^\]]+\])/g);
   return parts.map((part, index) => {
@@ -298,6 +1252,32 @@ export type InternalChatPanelProps = {
   onDeleteRoomBlocked?: (reason: string) => void;
   labels?: Partial<InternalChatPanelLabels>;
   className?: string;
+  /** Mensajes no vistos (icono del header: badge rojo, hasta «9+»). */
+  unreadTotal?: number;
+  /** No leídos por sala (badge en el rail de salas). */
+  unreadByRoomId?: Record<string, number>;
+  /** Se invoca al abrir el panel o al cambiar de sala con el chat visible. */
+  onMarkRoomRead?: (roomId: string) => void;
+  /** Conexión BFF: el contenedor sube el archivo. */
+  onAttachPhotos?: (file: File) => void | Promise<void>;
+  onAttachFiles?: (file: File) => void | Promise<void>;
+  /** Tras grabar en el panel (conexión BFF / subida). */
+  onSendAudioBlob?: (
+    blob: Blob,
+    durationMs: number,
+  ) => void | Promise<void>;
+  /** Atajo legacy: el host abre su propio flujo sin el grabador integrado. */
+  onSendAudio?: () => void | Promise<void>;
+  onAttachAudioFile?: (file: File) => void | Promise<void>;
+  /** Video de captura de pantalla (máx. 1 min en el grabador integrado). */
+  onSendScreenRecordingBlob?: (
+    blob: Blob,
+    durationMs: number,
+  ) => void | Promise<void>;
+  /** Abre el drawer al montar (p. ej. `/admin/.../chat`). */
+  defaultOpen?: boolean;
+  /** Oculta el botón flotante; usar con `defaultOpen` en página dedicada. */
+  hideTrigger?: boolean;
 };
 
 function InternalChatPanel({
@@ -330,14 +1310,33 @@ function InternalChatPanel({
   onDeleteRoomBlocked,
   labels: labelsPartial,
   className,
+  unreadTotal = 0,
+  unreadByRoomId,
+  onMarkRoomRead,
+  onAttachPhotos,
+  onAttachFiles,
+  onSendAudioBlob,
+  onSendAudio,
+  onSendScreenRecordingBlob,
+  defaultOpen = false,
+  hideTrigger = false,
 }: InternalChatPanelProps) {
   const labels = { ...DEFAULT_LABELS, ...labelsPartial };
 
-  const [open, setOpen] = useState(false);
+  const [open, setOpen] = useState(defaultOpen);
   const [draft, setDraft] = useState("");
   const [createOpen, setCreateOpen] = useState(false);
   const [newRoomName, setNewRoomName] = useState("");
   const [deleteOpen, setDeleteOpen] = useState(false);
+  const [voiceRecorderOpen, setVoiceRecorderOpen] = useState(false);
+  const [screenRecorderOpen, setScreenRecorderOpen] = useState(false);
+  const screenRecorderSession = useInternalChatScreenRecorderSession(
+    labels,
+    onSendScreenRecordingBlob,
+    useCallback((isRecording: boolean) => {
+      if (isRecording) setScreenRecorderOpen(true);
+    }, []),
+  );
   const [mentionStart, setMentionStart] = useState<number | null>(null);
   const [mentionQuery, setMentionQuery] = useState("");
   const [mentionHighlight, setMentionHighlight] = useState(0);
@@ -346,7 +1345,20 @@ function InternalChatPanel({
 
   const formRef = useRef<HTMLFormElement>(null);
   const scrollerRef = useRef<HTMLDivElement>(null);
+  const messagesListRef = useRef<HTMLDivElement>(null);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const photoInputRef = useRef<HTMLInputElement>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const supportRoom = useMemo(
+    () => rooms.find((r) => r.isSupport) ?? null,
+    [rooms],
+  );
+
+  const teamRooms = useMemo(
+    () => rooms.filter((r) => !r.isSupport),
+    [rooms],
+  );
 
   const activeRoom = useMemo(
     () => rooms.find((r) => r.id === activeRoomId) ?? null,
@@ -395,6 +1407,47 @@ function InternalChatPanel({
     !isSending &&
     Boolean(activeRoomId);
 
+  const messagesScrollTail = useMemo(() => {
+    if (messages.length === 0) {
+      return `empty:${messagesStatus}`;
+    }
+    const last = messages[messages.length - 1]!;
+    const attachCount = last.attachments?.length ?? 0;
+    const hasAudio = last.audio ? 1 : 0;
+    return [
+      messages.length,
+      last.id,
+      last.text.length,
+      attachCount,
+      hasAudio,
+      last.receiptStatus ?? "",
+      messagesStatus,
+    ].join("|");
+  }, [messages, messagesStatus]);
+
+  const scrollMessagesToBottom = useCallback(() => {
+    const node = scrollerRef.current;
+    if (!node) return;
+    node.scrollTop = node.scrollHeight;
+  }, []);
+
+  const scheduleScrollMessagesToBottom = useCallback(() => {
+    scrollMessagesToBottom();
+    let rafNested = 0;
+    const rafOuter = requestAnimationFrame(() => {
+      scrollMessagesToBottom();
+      rafNested = requestAnimationFrame(scrollMessagesToBottom);
+    });
+    const timeouts = [50, 150, 320].map((ms) =>
+      window.setTimeout(scrollMessagesToBottom, ms),
+    );
+    return () => {
+      cancelAnimationFrame(rafOuter);
+      if (rafNested) cancelAnimationFrame(rafNested);
+      timeouts.forEach(clearTimeout);
+    };
+  }, [scrollMessagesToBottom]);
+
   const setOpenWithNotify = useCallback(
     (next: boolean) => {
       if (next) onUserGesture?.();
@@ -404,6 +1457,18 @@ function InternalChatPanel({
     [onOpenChange, onUserGesture],
   );
 
+  useEffect(() => {
+    if (!open || !activeRoomId) return;
+    onMarkRoomRead?.(activeRoomId);
+  }, [open, activeRoomId, onMarkRoomRead]);
+
+  useEffect(() => {
+    if (!open) return;
+    if (screenRecorderSession.active) {
+      setScreenRecorderOpen(true);
+    }
+  }, [open, screenRecorderSession.active]);
+
   const handleMessagesScroll = useCallback(() => {
     const node = scrollerRef.current;
     if (!node || !activeRoomId || !onLoadOlderMessages) return;
@@ -414,12 +1479,12 @@ function InternalChatPanel({
     const prevHeight = node.scrollHeight;
     const prevTop = node.scrollTop;
     void Promise.resolve(onLoadOlderMessages()).finally(() => {
-      loadingOlderMessagesRef.current = false;
       requestAnimationFrame(() => {
         const n = scrollerRef.current;
         if (!n) return;
         const delta = n.scrollHeight - prevHeight;
         n.scrollTop = prevTop + delta;
+        loadingOlderMessagesRef.current = false;
       });
     });
   }, [
@@ -430,27 +1495,46 @@ function InternalChatPanel({
   ]);
 
   useLayoutEffect(() => {
-    if (!open) return;
-    const scrollToEnd = () => {
-      const node = scrollerRef.current;
-      if (!node) return;
-      node.scrollTop = node.scrollHeight;
-    };
-    scrollToEnd();
-    let rafNested = 0;
-    const rafOuter = requestAnimationFrame(() => {
-      scrollToEnd();
-      rafNested = requestAnimationFrame(scrollToEnd);
-    });
-    const timeouts = [0, 50, 150].map((ms) =>
-      window.setTimeout(scrollToEnd, ms),
-    );
-    return () => {
-      cancelAnimationFrame(rafOuter);
-      if (rafNested) cancelAnimationFrame(rafNested);
-      timeouts.forEach(clearTimeout);
+    if (!open || !activeRoomId) return;
+    if (loadingOlderMessagesRef.current) return;
+    return scheduleScrollMessagesToBottom();
+  }, [
+    open,
+    activeRoomId,
+    messagesScrollTail,
+    typingLine,
+    draft,
+    voiceRecorderOpen,
+    screenRecorderOpen,
+    scheduleScrollMessagesToBottom,
+  ]);
+
+  useEffect(() => {
+    if (!open || !activeRoomId) return;
+    const scroller = scrollerRef.current;
+    const list = messagesListRef.current;
+    const textarea = textareaRef.current;
+    if (!scroller) return;
+
+    const pinBottom = () => {
+      if (loadingOlderMessagesRef.current) return;
+      scrollMessagesToBottom();
     };
-  }, [open, activeRoomId, messages.length]);
+
+    const ro = new ResizeObserver(pinBottom);
+    ro.observe(scroller);
+    if (list) ro.observe(list);
+    if (textarea) ro.observe(textarea);
+    const form = formRef.current;
+    if (form) ro.observe(form);
+
+    return () => ro.disconnect();
+  }, [
+    open,
+    activeRoomId,
+    messagesScrollTail,
+    scrollMessagesToBottom,
+  ]);
 
   useEffect(() => {
     if (!mentionOpen || mentionEntries.length === 0) return;
@@ -582,6 +1666,7 @@ function InternalChatPanel({
       await onSendMessage(text);
       setDraft("");
       onDraftChange?.("");
+      scheduleScrollMessagesToBottom();
     } catch {
       /* errores vía contenedor */
     }
@@ -615,7 +1700,11 @@ function InternalChatPanel({
       onDeleteRoomBlocked?.("La sala Organización no se puede eliminar.");
       return;
     }
-    if (rooms.length <= 1) {
+    if (activeRoom.isSupport) {
+      onDeleteRoomBlocked?.("La sala de soporte no se puede eliminar.");
+      return;
+    }
+    if (teamRooms.length <= 1) {
       onDeleteRoomBlocked?.("Debe existir al menos una sala.");
       return;
     }
@@ -624,15 +1713,65 @@ function InternalChatPanel({
 
   return (
     <>
-      <Button
-        type="button"
-        size="icon"
-        className={cn("relative size-9 text-primary-foreground", className)}
-        aria-label={labels.openChat}
-        onClick={() => setOpenWithNotify(true)}
-      >
-        <IconMessages className="size-4" />
-      </Button>
+      {!hideTrigger ? (
+        <Button
+          type="button"
+          size="icon"
+          className={cn("relative size-9 text-primary-foreground", className)}
+          aria-label={
+            unreadTotal > 0
+              ? `${labels.openChat} · ${unreadTotal} sin leer`
+              : labels.openChat
+          }
+          onClick={() => setOpenWithNotify(true)}
+        >
+          <IconMessages className="size-4" />
+          {unreadTotal > 0 ? (
+            <span
+              className={unreadCountBadgeClasses(formatUnreadBadge(unreadTotal))}
+              aria-hidden
+            >
+              {formatUnreadBadge(unreadTotal)}
+            </span>
+          ) : null}
+          {screenRecorderSession.recording ? (
+            <span
+              className="absolute -top-0.5 -left-0.5 size-2.5 animate-pulse rounded-full bg-destructive ring-2 ring-background"
+              aria-hidden
+            />
+          ) : null}
+        </Button>
+      ) : !open ? (
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          className="gap-2"
+          onClick={() => setOpenWithNotify(true)}
+        >
+          <IconMessages className="size-4" />
+          {labels.openChat}
+        </Button>
+      ) : null}
+
+      {!open && screenRecorderSession.active ? (
+        <Button
+          type="button"
+          variant="destructive"
+          size="sm"
+          className="fixed bottom-6 right-6 z-[200] h-9 gap-2 shadow-lg"
+          onClick={() => setOpenWithNotify(true)}
+        >
+          <span className="size-2 animate-pulse rounded-full bg-destructive-foreground" />
+          <span className="text-xs font-medium tabular-nums">
+            {screenRecorderSession.recording
+              ? `REC ${screenRecorderSession.timerLabel}`
+              : screenRecorderSession.blob
+                ? labels.screenRecordOpenChatToFinish
+                : labels.screenRecordTitle}
+          </span>
+        </Button>
+      ) : null}
 
       <Dialog open={createOpen} onOpenChange={setCreateOpen}>
         <DialogContent className="sm:max-w-md">
@@ -735,7 +1874,7 @@ function InternalChatPanel({
               </Tooltip>
 
               <div className="flex min-h-0 flex-1 flex-col items-center gap-2 overflow-y-auto px-1 py-1">
-                {rooms.map((room) => {
+                {teamRooms.map((room) => {
                   const selected = room.id === activeRoomId;
                   return (
                     <Tooltip key={room.id} delayDuration={300}>
@@ -755,6 +1894,19 @@ function InternalChatPanel({
                           <span className="text-xs font-semibold leading-none">
                             {roomInitialLetter(room.name)}
                           </span>
+                          {(unreadByRoomId?.[room.id] ?? 0) > 0 ? (
+                            <span
+                              className={cn(
+                                unreadCountBadgeClasses(
+                                  formatUnreadBadge(unreadByRoomId![room.id]!),
+                                ),
+                                "ring-2 ring-background",
+                              )}
+                              aria-hidden
+                            >
+                              {formatUnreadBadge(unreadByRoomId![room.id]!)}
+                            </span>
+                          ) : null}
                         </button>
                       </TooltipTrigger>
                       <TooltipContent side="left">
@@ -767,6 +1919,49 @@ function InternalChatPanel({
                 })}
               </div>
 
+              {supportRoom ? (
+                <Tooltip delayDuration={300}>
+                  <TooltipTrigger asChild>
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="icon"
+                      className={cn(
+                        "relative size-9 shrink-0 rounded-full border shadow-sm",
+                        activeRoomId === supportRoom.id
+                          ? "border-sky-600 bg-sky-600 text-white hover:bg-sky-600/90 hover:text-white dark:border-sky-500 dark:bg-sky-500"
+                          : "border-sky-500/70 bg-sky-500/20 text-sky-800 hover:bg-sky-500/30 dark:border-sky-400/60 dark:bg-sky-500/25 dark:text-sky-100",
+                      )}
+                      aria-label={labels.supportChatTooltip}
+                      aria-current={
+                        activeRoomId === supportRoom.id ? "true" : undefined
+                      }
+                      onClick={() => onActiveRoomChange(supportRoom.id)}
+                    >
+                      <IconHeadset className="size-4 stroke-[2.25]" />
+                      {(unreadByRoomId?.[supportRoom.id] ?? 0) > 0 ? (
+                        <span
+                          className={cn(
+                            unreadCountBadgeClasses(
+                              formatUnreadBadge(
+                                unreadByRoomId![supportRoom.id]!,
+                              ),
+                            ),
+                            "ring-2 ring-background",
+                          )}
+                          aria-hidden
+                        >
+                          {formatUnreadBadge(unreadByRoomId![supportRoom.id]!)}
+                        </span>
+                      ) : null}
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent side="left">
+                    {labels.supportChatTooltip}
+                  </TooltipContent>
+                </Tooltip>
+              ) : null}
+
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>
                   <Button
@@ -787,7 +1982,9 @@ function InternalChatPanel({
                   <DropdownMenuSeparator />
                   <DropdownMenuItem
                     disabled={
-                      rooms.length <= 1 || activeRoom?.isOrganization
+                      teamRooms.length <= 1 ||
+                      activeRoom?.isOrganization ||
+                      activeRoom?.isSupport
                     }
                     className="text-destructive focus:text-destructive"
                     onClick={requestDeleteRoom}
@@ -808,19 +2005,23 @@ function InternalChatPanel({
                   </DrawerTitle>
                   <DrawerDescription className="line-clamp-2">
                     {activeRoom ? (
-                      <>
-                        <span className="font-medium text-foreground">
-                          {activeRoom.name}
-                        </span>
-                        {activeRoom.isOrganization ? (
-                          <>{labels.orgRoomSuffix}</>
-                        ) : null}
-                        {" · "}
-                        <kbd className="pointer-events-none rounded border bg-muted px-0.5 font-mono text-[0.65rem]">
-                          /
-                        </kbd>{" "}
-                        {labels.slashMentionHint}
-                      </>
+                      activeRoom.isSupport ? (
+                        <span>{labels.supportRoomDescription}</span>
+                      ) : (
+                        <>
+                          <span className="font-medium text-foreground">
+                            {activeRoom.name}
+                          </span>
+                          {activeRoom.isOrganization ? (
+                            <>{labels.orgRoomSuffix}</>
+                          ) : null}
+                          {" · "}
+                          <kbd className="pointer-events-none rounded border bg-muted px-0.5 font-mono text-[0.65rem]">
+                            /
+                          </kbd>{" "}
+                          {labels.slashMentionHint}
+                        </>
+                      )
                     ) : (
                       labels.selectRoomHint
                     )}
@@ -841,7 +2042,7 @@ function InternalChatPanel({
 
               <div
                 ref={scrollerRef}
-                className="min-h-0 flex-1 overflow-y-auto"
+                className="min-h-0 flex-1 overflow-y-auto overscroll-contain"
                 onScroll={handleMessagesScroll}
               >
                 {!activeRoom ? (
@@ -886,7 +2087,10 @@ function InternalChatPanel({
                     </EmptyHeader>
                   </Empty>
                 ) : (
-                  <div className="flex flex-col gap-6 px-5 py-2">
+                  <div
+                    ref={messagesListRef}
+                    className="flex flex-col gap-4 px-5 pt-2 pb-6"
+                  >
                     {isLoadingOlder ? (
                       <div className="flex items-center justify-center gap-2 py-2 text-xs text-muted-foreground">
                         <IconLoader2
@@ -908,20 +2112,64 @@ function InternalChatPanel({
                               {message.initials}
                             </MessageAvatar>
                           )}
-                          <MessageContent>
+                          <MessageContent className="gap-0.5">
                             {mine ? null : (
-                              <MessageHeader>{message.author}</MessageHeader>
+                              <MessageHeader className="px-3 pb-0 leading-snug">
+                                {message.author}
+                              </MessageHeader>
                             )}
-                            <Bubble
-                              align={mine ? "end" : "start"}
-                              variant={mine ? "muted" : "outline"}
-                            >
-                              <BubbleContent className="break-words whitespace-pre-wrap">
-                                {renderMessageTextWithMentions(message.text)}
-                              </BubbleContent>
-                            </Bubble>
-                            <MessageFooter>
-                              {formatMessageTime(message.at)}
+                            {message.attachments?.length ? (
+                              <InternalChatAttachmentStack
+                                items={message.attachments}
+                                labels={labels}
+                              />
+                            ) : null}
+                            {message.audio ? (
+                              <Bubble
+                                align={mine ? "end" : "start"}
+                                variant={mine ? "muted" : "outline"}
+                              >
+                                <BubbleContent className="py-2">
+                                  <InternalChatAudioBubble
+                                    audio={message.audio}
+                                    seed={message.id}
+                                    mine={mine}
+                                  />
+                                </BubbleContent>
+                              </Bubble>
+                            ) : null}
+                            {message.text.trim() ? (
+                              <Bubble
+                                align={mine ? "end" : "start"}
+                                variant={mine ? "muted" : "outline"}
+                              >
+                                <BubbleContent className="break-words whitespace-pre-wrap">
+                                  {renderMessageTextWithMentions(message.text)}
+                                </BubbleContent>
+                              </Bubble>
+                            ) : null}
+                            <MessageFooter className="flex items-center justify-end gap-1 px-3 pt-0 leading-none">
+                              <span className="text-[0.65rem] tabular-nums text-muted-foreground">
+                                {formatMessageTime(message.at)}
+                              </span>
+                              {mine && message.receiptStatus ? (
+                                <span
+                                  className="inline-flex shrink-0"
+                                  title={
+                                    message.receiptStatus === "pending"
+                                      ? "Enviando"
+                                      : message.receiptStatus === "sent"
+                                        ? "Enviado"
+                                        : message.receiptStatus === "delivered"
+                                          ? "Entregado"
+                                          : "Leído"
+                                  }
+                                >
+                                  <MessageReceiptTicks
+                                    status={message.receiptStatus}
+                                  />
+                                </span>
+                              ) : null}
                             </MessageFooter>
                           </MessageContent>
                         </Message>
@@ -939,6 +2187,23 @@ function InternalChatPanel({
                 ) : null}
               </div>
 
+              {voiceRecorderOpen && activeRoom ? (
+                <InternalChatVoiceRecorderBar
+                  labels={labels}
+                  onClose={() => setVoiceRecorderOpen(false)}
+                  onSendBlob={onSendAudioBlob}
+                  onSendLegacy={onSendAudio}
+                />
+              ) : null}
+
+              {activeRoom && screenRecorderOpen ? (
+                <InternalChatScreenRecorderBar
+                  labels={labels}
+                  session={screenRecorderSession}
+                  onDismiss={() => setScreenRecorderOpen(false)}
+                />
+              ) : null}
+
               <form
                 ref={formRef}
                 onSubmit={onSubmit}
@@ -1204,24 +2469,105 @@ function InternalChatPanel({
                       <DropdownMenuContent
                         align="start"
                         side="top"
-                        className="w-44"
+                        className="w-48"
                       >
-                        <DropdownMenuItem>
-                          <IconPaperclip className="size-4" />
+                        <DropdownMenuItem
+                          onClick={() => {
+                            onUserGesture?.();
+                            photoInputRef.current?.click();
+                          }}
+                        >
+                          <IconPhoto className="size-4" />
                           {labels.attachPhotos}
                         </DropdownMenuItem>
+                        <DropdownMenuItem
+                          onClick={() => {
+                            onUserGesture?.();
+                            fileInputRef.current?.click();
+                          }}
+                        >
+                          <IconPaperclip className="size-4" />
+                          {labels.attachFiles}
+                        </DropdownMenuItem>
                       </DropdownMenuContent>
                     </DropdownMenu>
                     <InputGroupButton
-                      type="submit"
-                      variant="default"
+                      type="button"
+                      variant={
+                        screenRecorderOpen || screenRecorderSession.recording
+                          ? "default"
+                          : "outline"
+                      }
                       size="icon-sm"
-                      disabled={!canSend || !activeRoom}
-                      className="ml-auto"
+                      disabled={!activeRoom}
+                      aria-label={labels.screenCaptureAriaLabel}
+                      aria-pressed={
+                        screenRecorderOpen || screenRecorderSession.recording
+                      }
+                      className={cn(
+                        !screenRecorderOpen &&
+                          !screenRecorderSession.recording &&
+                          "text-violet-600 hover:text-violet-700 dark:text-violet-400 dark:hover:text-violet-300",
+                      )}
+                      onClick={() => {
+                        onUserGesture?.();
+                        setVoiceRecorderOpen(false);
+                        setScreenRecorderOpen((prev) => !prev);
+                      }}
                     >
-                      <IconArrowUp className="size-4" />
-                      <span className="sr-only">{labels.sendSrOnly}</span>
+                      <IconScreenShare className="size-4" />
                     </InputGroupButton>
+                    <input
+                      ref={photoInputRef}
+                      type="file"
+                      accept="image/*"
+                      className="hidden"
+                      onChange={(e) => {
+                        const file = e.target.files?.[0];
+                        if (file && onAttachPhotos) void onAttachPhotos(file);
+                        e.target.value = "";
+                      }}
+                    />
+                    <input
+                      ref={fileInputRef}
+                      type="file"
+                      className="hidden"
+                      onChange={(e) => {
+                        const file = e.target.files?.[0];
+                        if (file && onAttachFiles) void onAttachFiles(file);
+                        e.target.value = "";
+                      }}
+                    />
+                    <div className="ml-auto flex shrink-0 items-center gap-1">
+                      <InputGroupButton
+                        type="button"
+                        variant={voiceRecorderOpen ? "default" : "outline"}
+                        size="icon-sm"
+                        disabled={!activeRoom}
+                        aria-label={labels.attachAudio}
+                        aria-pressed={voiceRecorderOpen}
+                        className={cn(
+                          !voiceRecorderOpen &&
+                            "text-sky-600 hover:text-sky-700 dark:text-sky-400 dark:hover:text-sky-300",
+                        )}
+                        onClick={() => {
+                          onUserGesture?.();
+                          setScreenRecorderOpen(false);
+                          setVoiceRecorderOpen((open) => !open);
+                        }}
+                      >
+                        <IconMicrophone className="size-4" />
+                      </InputGroupButton>
+                      <InputGroupButton
+                        type="submit"
+                        variant="default"
+                        size="icon-sm"
+                        disabled={!canSend || !activeRoom}
+                      >
+                        <IconArrowUp className="size-4" />
+                        <span className="sr-only">{labels.sendSrOnly}</span>
+                      </InputGroupButton>
+                    </div>
                   </InputGroupAddon>
                 </InputGroup>
               </form>