@traky-app/ui 1.6.0 → 1.6.1

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

@@ -0,0 +1,1115 @@
+"use client";
+
+import {
+  IconArrowUp,
+  IconDotsVertical,
+  IconLoader2,
+  IconMessages,
+  IconPackage,
+  IconPaperclip,
+  IconPlus,
+  IconTrash,
+  IconTruckLoading,
+  IconX,
+  type Icon,
+} from "@tabler/icons-react";
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+  type FormEvent,
+  type ReactNode,
+} from "react";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "./alert-dialog";
+import { Bubble, BubbleContent } from "./bubble";
+import { Button } from "./button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "./dialog";
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerTitle,
+} from "./drawer";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "./dropdown-menu";
+import {
+  Empty,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from "./empty";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupTextarea,
+} from "./input-group";
+import { Input } from "./input";
+import {
+  Message,
+  MessageAvatar,
+  MessageContent,
+  MessageFooter,
+  MessageHeader,
+} from "./message";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "./tooltip";
+import { cn } from "../lib/utils";
+import {
+  buildMentionList,
+  DEFAULT_MENTION_KIND_LABEL,
+  DEFAULT_MENTION_KIND_ORDER,
+  formatMessageTime,
+  parseMentionSegment,
+  parseSlashMention,
+  roomInitialLetter,
+  type InternalChatMentionConfig,
+  type InternalChatMentionItem,
+  type InternalChatMentionKind,
+} from "./internal-chat-mention";
+
+export type InternalChatRoom = {
+  id: string;
+  name: string;
+  isOrganization?: boolean;
+};
+
+export type InternalChatMessageLine = {
+  id: string;
+  role: "me" | "team";
+  author: string;
+  initials: string;
+  text: string;
+  at: string;
+};
+
+export type InternalChatMessagesStatus =
+  | "idle"
+  | "loading"
+  | "error"
+  | "empty"
+  | "ready";
+
+export type InternalChatPanelLabels = {
+  openChat: string;
+  newRoom: string;
+  roomMenu: string;
+  deleteRoom: string;
+  closeChat: string;
+  newRoomTitle: string;
+  newRoomDescription: string;
+  newRoomPlaceholder: string;
+  cancel: string;
+  create: string;
+  deleteRoomTitle: string;
+  deleteRoomDescription: (roomName: string) => string;
+  deleteConfirm: string;
+  noRoomTitle: string;
+  noRoomDescription: string;
+  loadingMessages: string;
+  loadMessagesErrorTitle: string;
+  loadMessagesErrorFallback: string;
+  emptyThreadTitle: string;
+  emptyThreadDescription: (roomName: string) => string;
+  loadingOlderMessages: string;
+  mentionListLabel: string;
+  messagePlaceholder: string;
+  messagePlaceholderNoRoom: string;
+  messageAriaLabel: string;
+  attachAriaLabel: string;
+  attachPhotos: string;
+  sendSrOnly: string;
+  orgRoomSuffix: string;
+  orgRoomTooltip: string;
+  slashMentionHint: string;
+  selectRoomHint: string;
+};
+
+const DEFAULT_LABELS: InternalChatPanelLabels = {
+  openChat: "Abrir chat de la empresa",
+  newRoom: "Nueva sala",
+  roomMenu: "Más acciones de salas",
+  deleteRoom: "Eliminar sala actual",
+  closeChat: "Cerrar chat",
+  newRoomTitle: "Nueva sala",
+  newRoomDescription:
+    "Crea un espacio para conversar con tu equipo en tiempo real.",
+  newRoomPlaceholder: "Nombre de la sala",
+  cancel: "Cancelar",
+  create: "Crear",
+  deleteRoomTitle: "¿Eliminar esta sala?",
+  deleteRoomDescription: (roomName) =>
+    `Se borrarán los mensajes de «${roomName}» en el servidor. Esta acción no se puede deshacer.`,
+  deleteConfirm: "Eliminar",
+  noRoomTitle: "Sin sala",
+  noRoomDescription: "Crea una sala con el botón + a la izquierda.",
+  loadingMessages: "Cargando mensajes…",
+  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.",
+  emptyThreadTitle: "¿De qué hablamos?",
+  emptyThreadDescription: (roomName) =>
+    `Escribe el primer mensaje en «${roomName}».`,
+  loadingOlderMessages: "Cargando mensajes anteriores…",
+  mentionListLabel: "Insertar mención",
+  messagePlaceholder: "Mensaje… · / comandos",
+  messagePlaceholderNoRoom: "Selecciona una sala…",
+  messageAriaLabel: "Mensaje",
+  attachAriaLabel: "Adjuntar",
+  attachPhotos: "Fotos y archivos",
+  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.",
+};
+
+const DEFAULT_MENTION_CONFIG: InternalChatMentionConfig = {
+  kindOrder: DEFAULT_MENTION_KIND_ORDER,
+  kindIcons: {
+    guide: IconTruckLoading,
+    package: IconPackage,
+  },
+  categoryMeta: {
+    guide: {
+      label: "Guía",
+      hint: "Guías de envío",
+      keywords: ["guía", "guia", "guide", "envío", "envio"],
+    },
+    package: {
+      label: "Paquete",
+      hint: "Paquetes de la empresa (WR / tracking)",
+      keywords: ["paquete", "paquetes", "package", "trk", "wr"],
+    },
+  },
+};
+
+function renderMessageTextWithMentions(text: string): ReactNode {
+  const parts = text.split(/(@\[[^\]]+\])/g);
+  return parts.map((part, index) => {
+    const mention = /^@\[(.+)\]$/.exec(part);
+    if (mention) {
+      return (
+        <span
+          key={index}
+          className="inline-flex max-w-full items-center rounded-md border border-primary/35 bg-primary/12 px-1.5 py-0.5 font-medium text-primary"
+        >
+          {mention[1]}
+        </span>
+      );
+    }
+    return <span key={index}>{part}</span>;
+  });
+}
+
+export type InternalChatPanelProps = {
+  title: string;
+  rooms: InternalChatRoom[];
+  activeRoomId: string | null;
+  onActiveRoomChange: (roomId: string) => void;
+  messages: InternalChatMessageLine[];
+  messagesStatus: InternalChatMessagesStatus;
+  messagesError?: string | null;
+  onLoadOlderMessages?: () => void | Promise<void>;
+  isLoadingOlder?: boolean;
+  hasOlderMessages?: boolean;
+  mentionGuideItems?: InternalChatMentionItem[];
+  mentionPackageItems?: InternalChatMentionItem[];
+  mentionConfig?: InternalChatMentionConfig;
+  typingLine?: string | null;
+  onSendMessage: (text: string) => void | Promise<void>;
+  onCreateRoom: (name: string) => void | Promise<void>;
+  onDeleteRoom: (roomId: string) => void | Promise<void>;
+  onOpenChange?: (open: boolean) => void;
+  onDraftChange?: (draft: string) => void;
+  onUserGesture?: () => void;
+  isSending?: boolean;
+  isCreatingRoom?: boolean;
+  isDeletingRoom?: boolean;
+  onDeleteRoomBlocked?: (reason: string) => void;
+  labels?: Partial<InternalChatPanelLabels>;
+  className?: string;
+};
+
+function InternalChatPanel({
+  title,
+  rooms,
+  activeRoomId,
+  onActiveRoomChange,
+  messages,
+  messagesStatus,
+  messagesError = null,
+  onLoadOlderMessages,
+  isLoadingOlder = false,
+  hasOlderMessages = false,
+  mentionGuideItems = [],
+  mentionPackageItems = [],
+  mentionConfig = DEFAULT_MENTION_CONFIG,
+  typingLine = null,
+  onSendMessage,
+  onCreateRoom,
+  onDeleteRoom,
+  onOpenChange,
+  onDraftChange,
+  onUserGesture,
+  isSending = false,
+  isCreatingRoom = false,
+  isDeletingRoom = false,
+  onDeleteRoomBlocked,
+  labels: labelsPartial,
+  className,
+}: InternalChatPanelProps) {
+  const labels = { ...DEFAULT_LABELS, ...labelsPartial };
+
+  const [open, setOpen] = useState(false);
+  const [draft, setDraft] = useState("");
+  const [createOpen, setCreateOpen] = useState(false);
+  const [newRoomName, setNewRoomName] = useState("");
+  const [deleteOpen, setDeleteOpen] = useState(false);
+  const [mentionStart, setMentionStart] = useState<number | null>(null);
+  const [mentionQuery, setMentionQuery] = useState("");
+  const [mentionHighlight, setMentionHighlight] = useState(0);
+  const lastMentionQueryRef = useRef("");
+  const loadingOlderMessagesRef = useRef(false);
+
+  const formRef = useRef<HTMLFormElement>(null);
+  const scrollerRef = useRef<HTMLDivElement>(null);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  const activeRoom = useMemo(
+    () => rooms.find((r) => r.id === activeRoomId) ?? null,
+    [rooms, activeRoomId],
+  );
+
+  const mentionEntries = useMemo(
+    () =>
+      buildMentionList(
+        mentionQuery,
+        mentionGuideItems,
+        mentionPackageItems,
+        mentionConfig,
+      ),
+    [mentionQuery, mentionGuideItems, mentionPackageItems, mentionConfig],
+  );
+
+  const mentionSeg = useMemo(
+    () => parseMentionSegment(mentionQuery, mentionConfig),
+    [mentionQuery, mentionConfig],
+  );
+
+  const mentionOpen =
+    Boolean(activeRoom) &&
+    mentionStart !== null &&
+    mentionEntries.length > 0;
+
+  const canSend =
+    draft.trim().length > 0 &&
+    !isSending &&
+    Boolean(activeRoomId);
+
+  const setOpenWithNotify = useCallback(
+    (next: boolean) => {
+      if (next) onUserGesture?.();
+      setOpen(next);
+      onOpenChange?.(next);
+    },
+    [onOpenChange, onUserGesture],
+  );
+
+  const handleMessagesScroll = useCallback(() => {
+    const node = scrollerRef.current;
+    if (!node || !activeRoomId || !onLoadOlderMessages) return;
+    if (loadingOlderMessagesRef.current) return;
+    if (node.scrollTop > 120) return;
+    if (!hasOlderMessages || isLoadingOlder) return;
+    loadingOlderMessagesRef.current = true;
+    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;
+      });
+    });
+  }, [
+    activeRoomId,
+    hasOlderMessages,
+    isLoadingOlder,
+    onLoadOlderMessages,
+  ]);
+
+  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);
+    };
+  }, [open, activeRoomId, messages.length]);
+
+  useEffect(() => {
+    if (!mentionOpen || mentionEntries.length === 0) return;
+    setMentionHighlight((h) => Math.min(h, mentionEntries.length - 1));
+  }, [mentionOpen, mentionEntries.length]);
+
+  useEffect(() => {
+    setMentionStart(null);
+    setMentionQuery("");
+    lastMentionQueryRef.current = "";
+  }, [activeRoomId]);
+
+  function closeMentionMenu() {
+    setMentionStart(null);
+    setMentionQuery("");
+    lastMentionQueryRef.current = "";
+  }
+
+  function syncMentionMenu(nextDraft: string, cursor: number) {
+    const m = parseSlashMention(nextDraft, cursor);
+    if (!m) {
+      closeMentionMenu();
+      return;
+    }
+    const entries = buildMentionList(
+      m.query,
+      mentionGuideItems,
+      mentionPackageItems,
+      mentionConfig,
+    );
+    if (entries.length === 0) {
+      closeMentionMenu();
+      return;
+    }
+    if (m.query !== lastMentionQueryRef.current) {
+      setMentionHighlight(0);
+      lastMentionQueryRef.current = m.query;
+    }
+    setMentionStart(m.start);
+    setMentionQuery(m.query);
+  }
+
+  function replaceSlashSegment(newSegment: string) {
+    const el = textareaRef.current;
+    if (el === null || mentionStart === null) return;
+    const cursor = el.selectionStart ?? draft.length;
+    const before = draft.slice(0, mentionStart);
+    const after = draft.slice(cursor);
+    const newDraft = `${before}/${newSegment}${after}`;
+    const slashEnd = before.length + 1 + newSegment.length;
+    setDraft(newDraft);
+    onDraftChange?.(newDraft);
+    setMentionQuery(newSegment);
+    lastMentionQueryRef.current = newSegment;
+    requestAnimationFrame(() => {
+      el.focus();
+      el.setSelectionRange(slashEnd, slashEnd);
+    });
+  }
+
+  function applyCategoryPick(kind: InternalChatMentionKind) {
+    replaceSlashSegment(`${kind}:`);
+    setMentionHighlight(0);
+  }
+
+  function applyItemPick(item: InternalChatMentionItem) {
+    const el = textareaRef.current;
+    if (el === null || mentionStart === null) return;
+    const cursor = el.selectionStart ?? draft.length;
+    const before = draft.slice(0, mentionStart);
+    const after = draft.slice(cursor);
+    const token = `@[${item.insertLabel}]`;
+    const needsSpace =
+      after.length > 0 && !/^\s/.test(after) && !after.startsWith("\n");
+    const newDraft = `${before}${token}${needsSpace ? " " : ""}${after}`;
+    setDraft(newDraft);
+    onDraftChange?.(newDraft);
+    closeMentionMenu();
+    const newPos = before.length + token.length + (needsSpace ? 1 : 0);
+    requestAnimationFrame(() => {
+      el.focus();
+      el.setSelectionRange(newPos, newPos);
+    });
+  }
+
+  async function onSubmit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    if (mentionOpen) return;
+    const text = draft.trim();
+    if (!text || !activeRoomId) return;
+    onUserGesture?.();
+    try {
+      await onSendMessage(text);
+      setDraft("");
+      onDraftChange?.("");
+    } catch {
+      /* errores vía contenedor */
+    }
+  }
+
+  async function handleCreateRoom() {
+    const name = newRoomName.trim();
+    if (!name) return;
+    try {
+      await onCreateRoom(name);
+      setNewRoomName("");
+      setCreateOpen(false);
+    } catch {
+      /* contenedor */
+    }
+  }
+
+  async function handleConfirmDeleteRoom() {
+    if (!activeRoom) return;
+    try {
+      await onDeleteRoom(activeRoom.id);
+      setDeleteOpen(false);
+    } catch {
+      /* contenedor */
+    }
+  }
+
+  function requestDeleteRoom() {
+    if (!activeRoom) return;
+    if (activeRoom.isOrganization) {
+      onDeleteRoomBlocked?.("La sala Organización no se puede eliminar.");
+      return;
+    }
+    if (rooms.length <= 1) {
+      onDeleteRoomBlocked?.("Debe existir al menos una sala.");
+      return;
+    }
+    setDeleteOpen(true);
+  }
+
+  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>
+
+      <Dialog open={createOpen} onOpenChange={setCreateOpen}>
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle>{labels.newRoomTitle}</DialogTitle>
+            <DialogDescription>{labels.newRoomDescription}</DialogDescription>
+          </DialogHeader>
+          <Input
+            value={newRoomName}
+            onChange={(e) => setNewRoomName(e.target.value)}
+            placeholder={labels.newRoomPlaceholder}
+            autoFocus
+            onKeyDown={(e) => {
+              if (e.key === "Enter") {
+                e.preventDefault();
+                void handleCreateRoom();
+              }
+            }}
+          />
+          <DialogFooter className="gap-2 sm:gap-0">
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => {
+                setCreateOpen(false);
+                setNewRoomName("");
+              }}
+            >
+              {labels.cancel}
+            </Button>
+            <Button
+              type="button"
+              onClick={() => void handleCreateRoom()}
+              disabled={isCreatingRoom}
+            >
+              {labels.create}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <AlertDialog open={deleteOpen} onOpenChange={setDeleteOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>{labels.deleteRoomTitle}</AlertDialogTitle>
+            <AlertDialogDescription>
+              {labels.deleteRoomDescription(activeRoom?.name ?? "la sala")}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>{labels.cancel}</AlertDialogCancel>
+            <AlertDialogAction
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+              onClick={() => void handleConfirmDeleteRoom()}
+              disabled={isDeletingRoom}
+            >
+              {labels.deleteConfirm}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
+      <Drawer
+        open={open}
+        onOpenChange={setOpenWithNotify}
+        direction="right"
+        shouldScaleBackground={false}
+      >
+        <DrawerContent
+          className={cn(
+            "gap-0 overflow-hidden p-0 shadow-xl",
+            "data-[vaul-drawer-direction=right]:inset-y-3",
+            "data-[vaul-drawer-direction=right]:right-3",
+            "data-[vaul-drawer-direction=right]:left-auto",
+            "data-[vaul-drawer-direction=right]:h-[calc(100%-1.5rem)]",
+            "data-[vaul-drawer-direction=right]:max-h-[calc(100%-1.5rem)]",
+            "data-[vaul-drawer-direction=right]:w-[min(36rem,calc(100vw-1.5rem))]",
+            "data-[vaul-drawer-direction=right]:max-w-[min(36rem,calc(100vw-1.5rem))]",
+            "data-[vaul-drawer-direction=right]:sm:max-w-[min(36rem,calc(100vw-1.5rem))]",
+            "data-[vaul-drawer-direction=right]:rounded-2xl",
+            "data-[vaul-drawer-direction=right]:border",
+          )}
+        >
+          <div className="flex h-full min-h-0 flex-row">
+            <div className="flex w-[3.25rem] shrink-0 flex-col items-center gap-2 border-r border-border py-4">
+              <Tooltip delayDuration={300}>
+                <TooltipTrigger asChild>
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="icon"
+                    className="size-9 shrink-0 rounded-full"
+                    aria-label={labels.newRoom}
+                    onClick={() => setCreateOpen(true)}
+                  >
+                    <IconPlus className="size-4" />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent side="left">{labels.newRoom}</TooltipContent>
+              </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) => {
+                  const selected = room.id === activeRoomId;
+                  return (
+                    <Tooltip key={room.id} delayDuration={300}>
+                      <TooltipTrigger asChild>
+                        <button
+                          type="button"
+                          onClick={() => onActiveRoomChange(room.id)}
+                          className={cn(
+                            "relative flex size-9 shrink-0 items-center justify-center rounded-full border-2 transition-colors",
+                            selected
+                              ? "border-primary bg-primary/15"
+                              : "border-transparent bg-muted hover:bg-muted/80",
+                          )}
+                          aria-label={`Sala ${room.name}${room.isOrganization ? " (toda la organización)" : ""}`}
+                          aria-current={selected ? "true" : undefined}
+                        >
+                          <span className="text-xs font-semibold leading-none">
+                            {roomInitialLetter(room.name)}
+                          </span>
+                        </button>
+                      </TooltipTrigger>
+                      <TooltipContent side="left">
+                        {room.isOrganization
+                          ? `${room.name}${labels.orgRoomTooltip}`
+                          : room.name}
+                      </TooltipContent>
+                    </Tooltip>
+                  );
+                })}
+              </div>
+
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="icon"
+                    className="size-9 shrink-0 rounded-full"
+                    aria-label={labels.roomMenu}
+                  >
+                    <IconDotsVertical className="size-4" />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent side="left" align="end" className="w-48">
+                  <DropdownMenuItem onClick={() => setCreateOpen(true)}>
+                    <IconPlus className="size-4" />
+                    {labels.newRoom}
+                  </DropdownMenuItem>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem
+                    disabled={
+                      rooms.length <= 1 || activeRoom?.isOrganization
+                    }
+                    className="text-destructive focus:text-destructive"
+                    onClick={requestDeleteRoom}
+                  >
+                    <IconTrash className="size-4" />
+                    {labels.deleteRoom}
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </div>
+
+            <div className="flex min-h-0 min-w-0 flex-1 flex-col">
+              <div className="flex items-start justify-between gap-4 px-5 pt-5 pb-3">
+                <div className="flex min-w-0 flex-col gap-1">
+                  <DrawerTitle className="flex items-center gap-2 font-medium">
+                    <IconMessages className="size-5 shrink-0" aria-hidden />
+                    <span className="min-w-0 truncate">{title}</span>
+                  </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}
+                      </>
+                    ) : (
+                      labels.selectRoomHint
+                    )}
+                  </DrawerDescription>
+                </div>
+                <DrawerClose asChild>
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="icon"
+                    className="size-8 shrink-0"
+                    aria-label={labels.closeChat}
+                  >
+                    <IconX className="size-4" />
+                  </Button>
+                </DrawerClose>
+              </div>
+
+              <div
+                ref={scrollerRef}
+                className="min-h-0 flex-1 overflow-y-auto"
+                onScroll={handleMessagesScroll}
+              >
+                {!activeRoom ? (
+                  <Empty className="h-full border-0">
+                    <EmptyHeader>
+                      <EmptyMedia variant="icon">
+                        <IconMessages />
+                      </EmptyMedia>
+                      <EmptyTitle>{labels.noRoomTitle}</EmptyTitle>
+                      <EmptyDescription>
+                        {labels.noRoomDescription}
+                      </EmptyDescription>
+                    </EmptyHeader>
+                  </Empty>
+                ) : messagesStatus === "loading" ? (
+                  <div className="flex h-full flex-col items-center justify-center gap-2 text-muted-foreground">
+                    <IconLoader2 className="size-6 animate-spin" aria-hidden />
+                    <span className="text-sm">{labels.loadingMessages}</span>
+                  </div>
+                ) : messagesStatus === "error" ? (
+                  <Empty className="h-full border-0">
+                    <EmptyHeader>
+                      <EmptyMedia variant="icon">
+                        <IconMessages />
+                      </EmptyMedia>
+                      <EmptyTitle>{labels.loadMessagesErrorTitle}</EmptyTitle>
+                      <EmptyDescription className="text-left">
+                        {messagesError ?? labels.loadMessagesErrorFallback}
+                      </EmptyDescription>
+                    </EmptyHeader>
+                  </Empty>
+                ) : messagesStatus === "empty" ? (
+                  <Empty className="h-full border-0">
+                    <EmptyHeader>
+                      <EmptyMedia variant="icon">
+                        <IconMessages />
+                      </EmptyMedia>
+                      <EmptyTitle>{labels.emptyThreadTitle}</EmptyTitle>
+                      <EmptyDescription>
+                        {labels.emptyThreadDescription(activeRoom.name)}
+                      </EmptyDescription>
+                    </EmptyHeader>
+                  </Empty>
+                ) : (
+                  <div className="flex flex-col gap-6 px-5 py-2">
+                    {isLoadingOlder ? (
+                      <div className="flex items-center justify-center gap-2 py-2 text-xs text-muted-foreground">
+                        <IconLoader2
+                          className="size-3.5 shrink-0 animate-spin"
+                          aria-hidden
+                        />
+                        {labels.loadingOlderMessages}
+                      </div>
+                    ) : null}
+                    {messages.map((message) => {
+                      const mine = message.role === "me";
+                      return (
+                        <Message
+                          key={message.id}
+                          align={mine ? "end" : "start"}
+                        >
+                          {mine ? null : (
+                            <MessageAvatar className="size-8 text-xs font-medium">
+                              {message.initials}
+                            </MessageAvatar>
+                          )}
+                          <MessageContent>
+                            {mine ? null : (
+                              <MessageHeader>{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)}
+                            </MessageFooter>
+                          </MessageContent>
+                        </Message>
+                      );
+                    })}
+                  </div>
+                )}
+                {activeRoom && typingLine ? (
+                  <div
+                    className="border-t border-border px-5 py-2 text-xs text-muted-foreground"
+                    aria-live="polite"
+                  >
+                    {typingLine}
+                  </div>
+                ) : null}
+              </div>
+
+              <form
+                ref={formRef}
+                onSubmit={onSubmit}
+                className="relative px-5 pt-2 pb-5"
+              >
+                {mentionOpen ? (
+                  <div
+                    role="listbox"
+                    aria-label={labels.mentionListLabel}
+                    className="absolute bottom-full left-5 right-5 z-50 mb-1 flex max-h-60 flex-col overflow-hidden rounded-xl border border-border bg-popover text-popover-foreground shadow-md"
+                  >
+                    <div className="shrink-0 border-b border-border px-2 py-1.5 text-[0.7rem] text-muted-foreground">
+                      {mentionSeg.phase === "category" ? (
+                        <>
+                          <span className="font-medium text-foreground">
+                            Tipo
+                          </span>
+                          {" · "}
+                          <kbd className="rounded bg-muted px-1 font-mono text-[0.65rem]">
+                            Tab
+                          </kbd>
+                          /
+                          <kbd className="rounded bg-muted px-1 font-mono text-[0.65rem]">
+                            ↵
+                          </kbd>
+                        </>
+                      ) : (
+                        <>
+                          <span className="font-medium text-foreground">
+                            {DEFAULT_MENTION_KIND_LABEL[mentionSeg.kind]}
+                          </span>
+                          {" · "}
+                          <kbd className="rounded bg-muted px-1 font-mono text-[0.65rem]">
+                            ←
+                          </kbd>
+                        </>
+                      )}
+                    </div>
+                    <div className="min-h-0 flex-1 overflow-y-auto p-1">
+                      {mentionEntries.map((entry, index) => {
+                        if (entry.type === "category") {
+                          const IconComp = entry.icon;
+                          return (
+                            <button
+                              key={`cat-${entry.kind}`}
+                              type="button"
+                              role="option"
+                              aria-selected={index === mentionHighlight}
+                              className={cn(
+                                "flex w-full items-start gap-2 rounded-lg px-2 py-2 text-left text-sm",
+                                index === mentionHighlight
+                                  ? "bg-accent text-accent-foreground"
+                                  : "hover:bg-muted/80",
+                              )}
+                              onMouseEnter={() => setMentionHighlight(index)}
+                              onMouseDown={(event) => {
+                                event.preventDefault();
+                                applyCategoryPick(entry.kind);
+                              }}
+                            >
+                              <IconComp className="mt-0.5 size-4 shrink-0 opacity-80" />
+                              <span className="min-w-0 flex-1">
+                                <span className="block font-medium leading-tight">
+                                  {entry.label}
+                                </span>
+                                <span className="mt-0.5 block text-xs text-muted-foreground">
+                                  {entry.hint}
+                                </span>
+                              </span>
+                            </button>
+                          );
+                        }
+                        const item = entry.data;
+                        const IconComp = item.icon;
+                        return (
+                          <button
+                            key={item.id}
+                            type="button"
+                            role="option"
+                            aria-selected={index === mentionHighlight}
+                            className={cn(
+                              "flex w-full items-start gap-2 rounded-lg px-2 py-2 text-left text-sm",
+                              index === mentionHighlight
+                                ? "bg-accent text-accent-foreground"
+                                : "hover:bg-muted/80",
+                            )}
+                            onMouseEnter={() => setMentionHighlight(index)}
+                            onMouseDown={(event) => {
+                              event.preventDefault();
+                              applyItemPick(item);
+                            }}
+                          >
+                            <IconComp className="mt-0.5 size-4 shrink-0 opacity-80" />
+                            <span className="min-w-0 flex-1">
+                              <span className="block font-medium leading-tight">
+                                {item.label}
+                              </span>
+                              <span className="mt-0.5 block text-xs text-muted-foreground">
+                                {item.subtitle}
+                              </span>
+                            </span>
+                          </button>
+                        );
+                      })}
+                    </div>
+                  </div>
+                ) : null}
+
+                <InputGroup>
+                  <InputGroupTextarea
+                    ref={textareaRef}
+                    value={draft}
+                    onChange={(event) => {
+                      const v = event.target.value;
+                      const cursor =
+                        event.target.selectionStart ?? v.length;
+                      setDraft(v);
+                      onDraftChange?.(v);
+                      syncMentionMenu(v, cursor);
+                    }}
+                    onSelect={(event) => {
+                      const t = event.target as HTMLTextAreaElement;
+                      syncMentionMenu(
+                        t.value,
+                        t.selectionStart ?? t.value.length,
+                      );
+                    }}
+                    placeholder={
+                      activeRoom
+                        ? labels.messagePlaceholder
+                        : labels.messagePlaceholderNoRoom
+                    }
+                    aria-label={labels.messageAriaLabel}
+                    className="min-h-14"
+                    disabled={!activeRoom}
+                    onKeyDown={(event) => {
+                      onUserGesture?.();
+                      if (mentionOpen) {
+                        if (event.key === "ArrowDown") {
+                          event.preventDefault();
+                          setMentionHighlight((h) =>
+                            (h + 1) % mentionEntries.length,
+                          );
+                          return;
+                        }
+                        if (event.key === "ArrowUp") {
+                          event.preventDefault();
+                          setMentionHighlight((h) =>
+                            (h - 1 + mentionEntries.length) %
+                            mentionEntries.length,
+                          );
+                          return;
+                        }
+                        if (event.key === "Backspace") {
+                          const seg = parseMentionSegment(
+                            mentionQuery,
+                            mentionConfig,
+                          );
+                          if (seg.phase === "item" && seg.filter === "") {
+                            event.preventDefault();
+                            replaceSlashSegment("");
+                            setMentionHighlight(0);
+                            return;
+                          }
+                        }
+                        if (event.key === "ArrowLeft") {
+                          const seg = parseMentionSegment(
+                            mentionQuery,
+                            mentionConfig,
+                          );
+                          if (seg.phase === "item" && seg.filter === "") {
+                            event.preventDefault();
+                            replaceSlashSegment("");
+                            setMentionHighlight(0);
+                            return;
+                          }
+                        }
+                        if (event.key === "Enter" && !event.shiftKey) {
+                          event.preventDefault();
+                          const pick = mentionEntries[mentionHighlight];
+                          if (!pick) return;
+                          if (pick.type === "category") {
+                            applyCategoryPick(pick.kind);
+                          } else {
+                            applyItemPick(pick.data);
+                          }
+                          return;
+                        }
+                        if (event.key === "Tab") {
+                          event.preventDefault();
+                          const pick = mentionEntries[mentionHighlight];
+                          if (!pick) return;
+                          if (pick.type === "category") {
+                            applyCategoryPick(pick.kind);
+                          } else {
+                            applyItemPick(pick.data);
+                          }
+                          return;
+                        }
+                        if (event.key === "Escape") {
+                          event.preventDefault();
+                          closeMentionMenu();
+                          return;
+                        }
+                      }
+                      if (event.key === "Enter" && !event.shiftKey) {
+                        event.preventDefault();
+                        formRef.current?.requestSubmit();
+                      }
+                    }}
+                  />
+                  <InputGroupAddon align="block-end" className="pt-1">
+                    <DropdownMenu>
+                      <DropdownMenuTrigger asChild>
+                        <InputGroupButton
+                          aria-label={labels.attachAriaLabel}
+                          type="button"
+                          size="icon-sm"
+                          variant="outline"
+                          disabled={!activeRoom}
+                        >
+                          <IconPlus className="size-4" />
+                        </InputGroupButton>
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent
+                        align="start"
+                        side="top"
+                        className="w-44"
+                      >
+                        <DropdownMenuItem>
+                          <IconPaperclip className="size-4" />
+                          {labels.attachPhotos}
+                        </DropdownMenuItem>
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                    <InputGroupButton
+                      type="submit"
+                      variant="default"
+                      size="icon-sm"
+                      disabled={!canSend || !activeRoom}
+                      className="ml-auto"
+                    >
+                      <IconArrowUp className="size-4" />
+                      <span className="sr-only">{labels.sendSrOnly}</span>
+                    </InputGroupButton>
+                  </InputGroupAddon>
+                </InputGroup>
+              </form>
+            </div>
+          </div>
+        </DrawerContent>
+      </Drawer>
+    </>
+  );
+}
+
+export {
+  InternalChatPanel,
+  DEFAULT_MENTION_CONFIG,
+  DEFAULT_LABELS as DEFAULT_INTERNAL_CHAT_PANEL_LABELS,
+};
+
+export { initialsFromDisplayName } from "./internal-chat-mention";
+
+export type {
+  InternalChatMentionConfig,
+  InternalChatMentionItem,
+  InternalChatMentionKind,
+} from "./internal-chat-mention";