@lindaui/blocks 0.4.2 → 0.5.0

package/src/chat-avatar.tsx

@@ -0,0 +1,57 @@
+"use client";
+import { useState } from "react";
+
+export type ChatAvatarSize = "sm" | "md" | "lg";
+
+export interface ChatAvatarProps {
+  src?: string;
+  name: string;
+  size?: ChatAvatarSize;
+  /** Se dispara cuando `src` falla en cargar (además del fallback automático a iniciales). */
+  onError?: () => void;
+}
+
+const sizeClasses: Record<ChatAvatarSize, string> = {
+  sm: "size-8 text-xs",
+  md: "size-10 text-sm",
+  lg: "size-12 text-base",
+};
+
+function initials(name: string): string {
+  const parts = name.trim().split(/\s+/).filter(Boolean);
+  if (parts.length === 0) return "?";
+  if (parts.length === 1) return parts[0]!.slice(0, 2).toUpperCase();
+  return (parts[0]![0] + parts[parts.length - 1]![0]).toUpperCase();
+}
+
+/**
+ * Avatar de chat con fallback a iniciales. Bespoke (no compone
+ * `@lindaui/ui/avatar`): ese wrapper solo expone el Root de HeroUI, sin
+ * `Avatar.Image`/`Avatar.Fallback` — no alcanza para un fallback-on-error real.
+ */
+export function ChatAvatar({ src, name, size = "md", onError }: ChatAvatarProps) {
+  const [broken, setBroken] = useState(false);
+  const showImage = src != null && !broken;
+
+  return (
+    <div
+      role="img"
+      aria-label={name}
+      className={`grid shrink-0 place-items-center overflow-hidden rounded-full bg-secondary font-medium text-secondary-foreground ${sizeClasses[size]}`}
+    >
+      {showImage ? (
+        <img
+          src={src}
+          alt=""
+          className="h-full w-full object-cover"
+          onError={() => {
+            setBroken(true);
+            onError?.();
+          }}
+        />
+      ) : (
+        <span aria-hidden="true">{initials(name)}</span>
+      )}
+    </div>
+  );
+}

package/src/chat-date-divider.tsx

@@ -0,0 +1,18 @@
+"use client";
+import { formatRelativeTime } from "@lindaui/ui/date";
+
+export interface ChatDateDividerProps {
+  date: Date | number | string;
+}
+
+/** Divider centrado de día ("Hoy"/"Ayer"/fecha corta) para timelines de chat. */
+export function ChatDateDivider({ date }: ChatDateDividerProps) {
+  const label = formatRelativeTime(date);
+  return (
+    <div className="my-3 flex items-center justify-center" role="separator" aria-label={label}>
+      <span className="rounded-full bg-secondary px-3 py-1 text-xs font-medium text-secondary-foreground">
+        {label}
+      </span>
+    </div>
+  );
+}

package/src/chat-header.tsx

@@ -0,0 +1,24 @@
+"use client";
+import type { ReactNode } from "react";
+
+export interface ChatHeaderProps {
+  avatar?: ReactNode;
+  title: ReactNode;
+  subtitle?: ReactNode;
+  actions?: ReactNode;
+}
+
+export function ChatHeader({ avatar, title, subtitle, actions }: ChatHeaderProps) {
+  return (
+    <div className="flex items-center gap-3 border-b border-border bg-card px-4 py-3">
+      {avatar}
+      <div className="min-w-0 flex-1">
+        <div className="truncate text-sm font-semibold">{title}</div>
+        {subtitle != null && (
+          <div className="truncate text-xs text-muted-foreground">{subtitle}</div>
+        )}
+      </div>
+      {actions != null && <div className="flex shrink-0 items-center gap-1">{actions}</div>}
+    </div>
+  );
+}

package/src/chat-layout.tsx

@@ -0,0 +1,41 @@
+"use client";
+import type { ReactNode } from "react";
+
+export type ChatLayoutPanel = "sidebar" | "main" | "detail";
+
+export interface ChatLayoutProps {
+  sidebar: ReactNode;
+  main: ReactNode;
+  detail?: ReactNode;
+  /** Panel visible en mobile (un solo panel a la vez). Default "sidebar". */
+  activePanel?: ChatLayoutPanel;
+}
+
+/** Shell responsive de 3 columnas (sidebar/main/detail); mobile-first, un panel a la vez. */
+export function ChatLayout({ sidebar, main, detail, activePanel = "sidebar" }: ChatLayoutProps) {
+  return (
+    <div className="flex h-full min-h-0 w-full overflow-hidden">
+      <div
+        className={`w-full shrink-0 border-r border-border sm:block sm:w-80 ${
+          activePanel === "sidebar" ? "block" : "hidden sm:block"
+        }`}
+      >
+        {sidebar}
+      </div>
+      <div
+        className={`min-w-0 flex-1 sm:block ${activePanel === "main" ? "block" : "hidden sm:block"}`}
+      >
+        {main}
+      </div>
+      {detail != null && (
+        <div
+          className={`w-full shrink-0 border-l border-border lg:block lg:w-96 ${
+            activePanel === "detail" ? "block" : "hidden lg:block"
+          }`}
+        >
+          {detail}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/chat-time-divider.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+export interface ChatTimeDividerProps {
+  label: string;
+}
+
+/** Header sticky de grupo horario (variante más chica que {@link ChatDateDivider}). */
+export function ChatTimeDivider({ label }: ChatTimeDividerProps) {
+  return (
+    <div
+      className="sticky top-0 z-10 flex justify-center bg-card/80 py-1.5 backdrop-blur"
+      role="separator"
+      aria-label={label}
+    >
+      <span className="rounded-full bg-secondary px-2.5 py-0.5 text-[11px] font-medium text-secondary-foreground">
+        {label}
+      </span>
+    </div>
+  );
+}

package/src/chat-types.ts

@@ -0,0 +1,32 @@
+/**
+ * Tipos compartidos por la familia `chat-*`. Agnósticos de dominio — el
+ * consumidor mapea su shape real (mensajes de WhatsApp, tickets, etc.) a
+ * estos antes de pasarlos a los blocks.
+ */
+
+export type MessageSide = "incoming" | "outgoing";
+
+export type MessageStatus = "sending" | "sent" | "delivered" | "read" | "failed";
+
+export type GenericMessageMedia =
+  | { kind: "image"; url: string; alt?: string }
+  | { kind: "audio"; url: string; durationSeconds?: number }
+  | { kind: "pdf"; url: string; name?: string };
+
+export interface GenericMessage {
+  id: string;
+  side: MessageSide;
+  text?: string;
+  media?: GenericMessageMedia;
+  sentAt: Date | number | string;
+  status?: MessageStatus;
+}
+
+export interface ConversationSummary {
+  id: string;
+  title: string;
+  subtitle?: string;
+  avatarUrl?: string;
+  lastMessageAt?: Date | number | string;
+  unreadCount?: number;
+}

package/src/chat.ts

@@ -0,0 +1,21 @@
+/** Generic migration API. The existing individual chat entry points are unchanged. */
+export { ChatAvatar } from "./compat-chat/chat-avatar";
+export type { ChatAvatarProps, ChatAvatarClassNames } from "./compat-chat/chat-avatar";
+export { ChatHeader } from "./compat-chat/chat-header";
+export type { ChatHeaderProps } from "./compat-chat/chat-header";
+export { ChatLayout } from "./compat-chat/chat-layout";
+export type { ChatLayoutProps } from "./compat-chat/chat-layout";
+export { ConversationList } from "./compat-chat/conversation-list";
+export type { ConversationListProps, ConversationListLabels } from "./compat-chat/conversation-list";
+export { ConversationListItem } from "./compat-chat/conversation-list-item";
+export type { ConversationListItemProps } from "./compat-chat/conversation-list-item";
+export { ConversationThread } from "./compat-chat/conversation-thread";
+export type { ConversationThreadProps } from "./compat-chat/conversation-thread";
+export { EmptyChatView } from "./compat-chat/empty-chat-view";
+export type { EmptyChatViewProps } from "./compat-chat/empty-chat-view";
+export { MessageBubble } from "./compat-chat/message-bubble";
+export type { MessageBubbleProps } from "./compat-chat/message-bubble";
+export { MessageComposer } from "./compat-chat/message-composer";
+export type { MessageComposerProps } from "./compat-chat/message-composer";
+export type { ConversationSummary, ConversationThreadLabels, GenericMessage, GenericMessageMedia, MessageMediaKind, MessageSide } from "./compat-chat/types";
+export type { TimeGroup } from "./compat-chat/time-grouping";

package/src/command-palette.tsx

@@ -0,0 +1,110 @@
+"use client";
+
+import {
+  Avatar, Description, Header, InputGroup, Kbd, Label, ListBox,
+  Modal, ScrollShadow, Separator, TextField,
+} from "@lindaui/ui/compound";
+import { Search } from "lucide-react";
+import { useCallback, useMemo, useState } from "react";
+import type { ReactNode } from "react";
+
+export interface CommandPaletteItem {
+  description?: string;
+  identifier: string;
+  name: string;
+}
+
+export interface CommandPaletteProps<T extends CommandPaletteItem = CommandPaletteItem> {
+  isOpen: boolean;
+  items: T[];
+  onClose: () => void;
+  onSelect: (item: T) => void;
+  placeholder?: string;
+  recentIds?: string[];
+  title?: string;
+  recentLabel?: string;
+  allItemsLabel?: string;
+  renderEmptyState?: (query: string) => ReactNode;
+  renderAvatar?: (item: T) => ReactNode;
+}
+
+/** Search names and descriptions, keeping recent items first in their original collection order. */
+export function CommandPalette<T extends CommandPaletteItem>({
+  isOpen, onClose, items, onSelect, placeholder = "Search…", title = "Search",
+  recentIds = [], recentLabel = "Recent", allItemsLabel = "All items",
+  renderEmptyState, renderAvatar,
+}: CommandPaletteProps<T>) {
+  const [query, setQuery] = useState("");
+  const filtered = useMemo(() => {
+    if (!query.trim()) return items;
+    const search = query.toLowerCase();
+    return items.filter((item) => item.name.toLowerCase().includes(search)
+      || item.description?.toLowerCase().includes(search));
+  }, [items, query]);
+  const recents = filtered.filter((item) => recentIds.includes(item.identifier));
+  const rest = filtered.filter((item) => !recentIds.includes(item.identifier));
+
+  const handleClose = useCallback(() => {
+    onClose();
+    setQuery("");
+  }, [onClose]);
+  const handleSelect = useCallback((key: string | number) => {
+    const item = items.find((candidate) => candidate.identifier === String(key));
+    if (item) {
+      onSelect(item);
+      setQuery("");
+    }
+  }, [items, onSelect]);
+  const renderItem = (item: T) => (
+    <ListBox.Item id={item.identifier} key={item.identifier} textValue={item.name}>
+      <Avatar size="sm">
+        {renderAvatar ? renderAvatar(item) : (
+          <Avatar.Fallback>{item.name.charAt(0).toUpperCase()}</Avatar.Fallback>
+        )}
+      </Avatar>
+      <Label>{item.name}</Label>
+      {item.description ? <Description>{item.description}</Description> : null}
+    </ListBox.Item>
+  );
+
+  return (
+    <Modal.Backdrop isOpen={isOpen} onOpenChange={(open) => { if (!open) handleClose(); }} variant="blur">
+      <Modal.Container placement="top" size="lg">
+        <Modal.Dialog aria-label={title}>
+          <Modal.Body className="gap-0 p-0">
+            <TextField aria-label={title} value={query}>
+              <InputGroup className="rounded-none rounded-t-xl border-b shadow-none">
+                <InputGroup.Prefix><Search className="text-muted" size={18} /></InputGroup.Prefix>
+                <InputGroup.Input autoFocus onChange={(event) => setQuery(event.target.value)} placeholder={placeholder} value={query} />
+                <InputGroup.Suffix>
+                  <Kbd><Kbd.Abbr keyValue="escape" /><Kbd.Content>ESC</Kbd.Content></Kbd>
+                </InputGroup.Suffix>
+              </InputGroup>
+            </TextField>
+            <ScrollShadow className="max-h-[360px]">
+              <ListBox
+                aria-label={title}
+                onAction={handleSelect}
+                renderEmptyState={() => renderEmptyState ? renderEmptyState(query) : (
+                  <p className="py-6 text-center text-muted text-sm">No results for &ldquo;{query}&rdquo;</p>
+                )}
+              >
+                {recents.length > 0 ? (
+                  <ListBox.Section>
+                    <Header>{recentLabel}</Header>
+                    {recents.map(renderItem)}
+                    <Separator />
+                  </ListBox.Section>
+                ) : null}
+                <ListBox.Section>
+                  {recents.length > 0 ? <Header>{allItemsLabel}</Header> : null}
+                  {rest.map(renderItem)}
+                </ListBox.Section>
+              </ListBox>
+            </ScrollShadow>
+          </Modal.Body>
+        </Modal.Dialog>
+      </Modal.Container>
+    </Modal.Backdrop>
+  );
+}

package/src/compat-chat/chat-avatar.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { Avatar } from "@lindaui/ui/compound";
+
+export interface ChatAvatarClassNames { base?: string; fallback?: string; img?: string; }
+export interface ChatAvatarProps {
+  className?: string;
+  classNames?: ChatAvatarClassNames;
+  name: string;
+  onError?: () => void;
+  size?: "lg" | "md" | "sm";
+  src?: string | null;
+}
+function getInitials(name: string): string {
+  return name.split(" ").map((part) => part[0]).filter(Boolean).join("").toUpperCase().slice(0, 2);
+}
+/** Image refresh stays in the consumer's onError callback. */
+export function ChatAvatar({ name, src, size, className, classNames, onError }: ChatAvatarProps) {
+  return <Avatar className={[className, classNames?.base].filter(Boolean).join(" ")} size={size}>
+    {src ? <Avatar.Image alt={name} className={classNames?.img} onError={onError} src={src} /> : null}
+    <Avatar.Fallback className={classNames?.fallback}>{getInitials(name)}</Avatar.Fallback>
+  </Avatar>;
+}

package/src/compat-chat/chat-header.tsx

@@ -0,0 +1,12 @@
+import type { ReactNode } from "react";
+
+export interface ChatHeaderProps { actions?: ReactNode; avatar?: ReactNode; subtitle?: ReactNode; title: ReactNode; }
+export function ChatHeader({ title, subtitle, avatar, actions }: ChatHeaderProps) {
+  return <div className="flex items-center justify-between gap-3 border-border border-b px-4 py-3">
+    <div className="flex min-w-0 flex-1 items-center gap-3">
+      {avatar}
+      <div className="min-w-0 flex-1"><h3 className="truncate font-medium text-foreground text-sm">{title}</h3>{subtitle && <p className="truncate text-muted text-xs">{subtitle}</p>}</div>
+    </div>
+    {actions}
+  </div>;
+}

package/src/compat-chat/chat-layout.tsx

@@ -0,0 +1,14 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { cn } from "@lindaui/ui/cn";
+
+export interface ChatLayoutProps { detail?: ReactNode; main: ReactNode; selectedChatId?: string; sidebar: ReactNode; }
+/** Mobile selection switching, 350px tablet sidebar, 320px desktop detail. */
+export function ChatLayout({ sidebar, main, detail, selectedChatId }: ChatLayoutProps) {
+  return <div className="flex h-full w-full overflow-hidden bg-background">
+    <div className={cn("border-border border-r", "md:flex md:w-[350px] md:flex-col", selectedChatId ? "hidden" : "flex w-full flex-col")}>{sidebar}</div>
+    <div className={cn("flex-1 flex-col overflow-hidden", "md:flex", selectedChatId ? "flex" : "hidden")}>{main}</div>
+    {detail && <div className="hidden w-[320px] flex-col border-border border-l lg:flex">{detail}</div>}
+  </div>;
+}

package/src/compat-chat/conversation-list-item.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import { memo, type ReactNode } from "react";
+import { cn, formatRelativeTime } from "@lindaui/ui/compat";
+import type { ConversationSummary } from "./types";
+
+export interface ConversationListItemProps { avatar?: ReactNode; emptyPreview?: string; item: ConversationSummary; onClick: () => void; }
+export const ConversationListItem = memo(({ item, onClick, avatar, emptyPreview }: ConversationListItemProps) => (
+  <button className={cn("w-full cursor-pointer px-4 py-3 transition-colors", "md:hover:bg-surface-secondary", item.isSelected && "bg-blue-50 dark:bg-blue-950/20")} onClick={onClick} type="button">
+    <div className="flex items-start gap-3">
+      {avatar}
+      <div className="min-w-0 flex-1 text-left">
+        <div className="mb-0.5 flex items-center justify-between gap-2">
+          <h4 className="truncate font-semibold text-foreground">{item.title}</h4>
+          {item.timestamp && <span className="flex-shrink-0 text-muted text-xs">{formatRelativeTime(item.timestamp)}</span>}
+        </div>
+        <div className="flex items-center justify-between gap-2">
+          <p className="truncate text-muted text-sm">{item.preview ?? emptyPreview}</p>
+          <div className="flex flex-shrink-0 items-center gap-1.5">
+            {item.badge}
+            {item.unreadCount ? <span className="inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-accent px-1.5 font-semibold text-accent-foreground text-xs">{item.unreadCount}</span> : null}
+          </div>
+        </div>
+      </div>
+    </div>
+  </button>
+));

package/src/compat-chat/conversation-list.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import { InputGroup, ScrollShadow, Spinner } from "@lindaui/ui/compound";
+import { Search, X } from "lucide-react";
+import { type ReactNode, useCallback } from "react";
+import { TimeDivider } from "./time-divider";
+import { groupByTime, TIME_GROUP_ORDER, type TimeGroup } from "./time-grouping";
+import { ConversationListItem } from "./conversation-list-item";
+import type { ConversationSummary } from "./types";
+
+export interface ConversationListLabels { emptyPreview?: string; loading: string; periods: Record<TimeGroup, string>; }
+export interface ConversationListProps {
+  emptyMessage?: ReactNode;
+  filters?: ReactNode;
+  isLoading?: boolean;
+  items: ConversationSummary[];
+  labels: ConversationListLabels;
+  onItemSelect: (id: string) => void;
+  onSearchChange: (value: string) => void;
+  renderAvatar?: (item: ConversationSummary) => ReactNode;
+  searchPlaceholder?: string;
+  searchValue: string;
+  /** Optional virtualized list. The consumer owns row placement and group headers. */
+  renderItems?: (items: ConversationSummary[], renderItem: (item: ConversationSummary) => ReactNode) => ReactNode;
+}
+export function ConversationList({ items, searchValue, onSearchChange, searchPlaceholder, filters, labels, isLoading = false, emptyMessage, onItemSelect, renderAvatar, renderItems }: ConversationListProps) {
+  const grouped = groupByTime(items, (item) => item.timestamp ?? new Date());
+  const handleSearchChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => onSearchChange(e.target.value), [onSearchChange]);
+  const handleClearSearch = useCallback(() => onSearchChange(""), [onSearchChange]);
+  const handleItemSelect = useCallback((id: string) => () => onItemSelect(id), [onItemSelect]);
+  const renderItem = (item: ConversationSummary) => <ConversationListItem avatar={renderAvatar?.(item)} emptyPreview={labels.emptyPreview} item={item} key={item.id} onClick={handleItemSelect(item.id)} />;
+  return <div className="flex h-full flex-col bg-background">
+    <div className="space-y-3 border-border border-b p-4">
+      <InputGroup className="w-full rounded-lg">
+        <InputGroup.Prefix><Search className="h-4 w-4 text-muted" /></InputGroup.Prefix>
+        <InputGroup.Input className="text-sm" onChange={handleSearchChange} placeholder={searchPlaceholder} value={searchValue} />
+        {searchValue && <InputGroup.Suffix><button className="text-muted hover:text-muted" onClick={handleClearSearch} type="button"><X className="h-4 w-4" /></button></InputGroup.Suffix>}
+      </InputGroup>
+      {filters}
+    </div>
+    <ScrollShadow className="flex-1 overflow-y-auto">
+      {isLoading && <div className="flex items-center justify-center gap-2 py-8"><Spinner size="sm" /><span className="text-muted text-sm">{labels.loading}</span></div>}
+      {!isLoading && items.length === 0 && <div className="flex flex-col items-center justify-center px-4 py-12 text-center"><p className="text-muted text-sm">{emptyMessage}</p></div>}
+      {!isLoading && items.length > 0 && (renderItems ? renderItems(items, renderItem) : <div>
+        {TIME_GROUP_ORDER.map((timeGroup) => grouped[timeGroup].length === 0 ? null : <div key={timeGroup}><TimeDivider label={labels.periods[timeGroup]} />{grouped[timeGroup].map(renderItem)}</div>)}
+      </div>)}
+    </ScrollShadow>
+  </div>;
+}

package/src/compat-chat/conversation-thread.tsx

@@ -0,0 +1,92 @@
+"use client";
+
+import { ScrollShadow, Spinner } from "@lindaui/ui/compound";
+import { cn } from "@lindaui/ui/cn";
+import dayjs from "dayjs";
+import { AlertCircle } from "lucide-react";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, type ReactNode } from "react";
+import { DateDivider } from "./date-divider";
+import { MessageBubble } from "./message-bubble";
+import type { ConversationThreadLabels, GenericMessage } from "./types";
+
+export interface ConversationThreadProps {
+  /** undefined uses the original light/dark pattern; null uses a flat background. */
+  backgroundImage?: { dark: string; light: string } | null;
+  isError?: boolean;
+  isLoading?: boolean;
+  labels: ConversationThreadLabels;
+  messages: GenericMessage[];
+  showPollingFallback?: boolean;
+  /** Optional virtualizer. The consumer owns row placement and date dividers. */
+  renderMessages?: (messages: GenericMessage[], renderMessage: (message: GenericMessage) => ReactNode) => ReactNode;
+}
+const DEFAULT_BACKGROUND = { dark: "/images/chat-bg-dark.png", light: "/images/chat-bg-light.png" } as const;
+export function ConversationThread({ messages, isLoading = false, isError = false, labels, backgroundImage, showPollingFallback = false, renderMessages }: ConversationThreadProps) {
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const messageListRef = useRef<HTMLDivElement>(null);
+  const groupedMessages = useMemo(() => {
+    const groups: { date: Date | string; messages: GenericMessage[] }[] = [];
+    let currentDay = "";
+    for (const msg of messages) {
+      const day = dayjs(msg.timestamp).format("YYYY-MM-DD");
+      if (day === currentDay) groups.at(-1)?.messages.push(msg);
+      else { currentDay = day; groups.push({ date: msg.timestamp, messages: [msg] }); }
+    }
+    return groups;
+  }, [messages]);
+  const hasScrolledOnLoad = useRef(false);
+  const firstId = messages.at(0)?.id ?? "";
+  const prevFirstIdRef = useRef(firstId);
+  const scrollToBottom = useCallback((behavior: ScrollBehavior = "smooth") => {
+    const el = scrollRef.current;
+    if (!el) return;
+    if (behavior === "auto") { el.scrollTop = el.scrollHeight; return; }
+    el.scrollTo({ behavior, top: el.scrollHeight });
+  }, []);
+  useLayoutEffect(() => {
+    if (prevFirstIdRef.current !== firstId) { prevFirstIdRef.current = firstId; hasScrolledOnLoad.current = false; }
+    if (isLoading || messages.length === 0 || hasScrolledOnLoad.current) return;
+    const el = scrollRef.current;
+    const listEl = messageListRef.current;
+    if (!el || !listEl) return;
+    let settleTimeout: ReturnType<typeof setTimeout> | null = null;
+    let settled = false;
+    const scrollNow = () => { el.scrollTop = el.scrollHeight; };
+    const scheduleSettle = () => {
+      if (settleTimeout) clearTimeout(settleTimeout);
+      settleTimeout = setTimeout(() => {
+        settled = true;
+        hasScrolledOnLoad.current = true;
+        resizeObserver.disconnect();
+        mutationObserver.disconnect();
+      }, 250);
+    };
+    scrollNow();
+    scheduleSettle();
+    const resizeObserver = new ResizeObserver(() => { if (!settled) { scrollNow(); scheduleSettle(); } });
+    const mutationObserver = new MutationObserver(() => { if (!settled) { scrollNow(); scheduleSettle(); } });
+    resizeObserver.observe(listEl);
+    mutationObserver.observe(listEl, { childList: true, subtree: true });
+    return () => { if (settleTimeout) clearTimeout(settleTimeout); resizeObserver.disconnect(); mutationObserver.disconnect(); };
+  }, [isLoading, messages.length, firstId]);
+  const messageCount = messages.length;
+  const prevMessageCount = useRef(messageCount);
+  useEffect(() => {
+    if (messageCount > prevMessageCount.current) requestAnimationFrame(() => scrollToBottom("smooth"));
+    prevMessageCount.current = messageCount;
+  }, [messageCount, scrollToBottom]);
+  const bg = backgroundImage === undefined ? DEFAULT_BACKGROUND : backgroundImage;
+  const renderMessage = (message: GenericMessage) => <MessageBubble key={message.id} message={message} />;
+  return <div className={cn("relative flex h-full flex-col", bg ? "bg-[#efeae2] dark:bg-[#0b141a]" : "bg-background")}>
+    {bg && <><div className="pointer-events-none absolute inset-0 bg-contain opacity-15 dark:hidden" style={{ backgroundImage: `url('${bg.light}')` }} /><div className="pointer-events-none absolute inset-0 hidden bg-contain opacity-15 dark:block" style={{ backgroundImage: `url('${bg.dark}')` }} /></>}
+    {showPollingFallback && labels.pollingFallback && <div className="flex items-center justify-center py-1.5 text-muted text-xs">{labels.pollingFallback}</div>}
+    <ScrollShadow className="relative flex-1 overflow-y-auto px-4 pt-4 pb-20" ref={scrollRef}>
+      {isLoading && <div className="flex items-center justify-center gap-2 py-8"><Spinner size="sm" /><span className="text-muted text-sm">{labels.loading}</span></div>}
+      {isError && <div className="flex items-center justify-center gap-2 py-8 text-danger"><AlertCircle className="h-5 w-5" /><p className="text-sm">{labels.errorLoading}</p></div>}
+      {!isLoading && messages.length === 0 && <div className="flex items-center justify-center py-12 text-center"><p className="text-muted text-sm">{labels.noMessages}</p></div>}
+      {!isLoading && messages.length > 0 && <div className="space-y-3" ref={messageListRef}>
+        {renderMessages ? renderMessages(messages, renderMessage) : groupedMessages.map((group) => <div className="space-y-3" key={String(group.date)}><DateDivider date={group.date} />{group.messages.map(renderMessage)}</div>)}
+      </div>}
+    </ScrollShadow>
+  </div>;
+}

package/src/compat-chat/date-divider.tsx

@@ -0,0 +1,7 @@
+import dayjs from "dayjs";
+import { isToday, isYesterday } from "@lindaui/ui/compat";
+
+export interface DateDividerProps { date: string | Date; }
+export function DateDivider({ date }: DateDividerProps) {
+  return <div className="flex justify-center py-2"><span className="rounded-lg bg-surface-secondary px-3 py-1 text-muted text-xs shadow-sm dark:bg-surface-secondary/50">{isToday(date) ? "Hoy" : isYesterday(date) ? "Ayer" : dayjs(date).format("DD/MM/YYYY")}</span></div>;
+}

package/src/compat-chat/empty-chat-view.tsx

@@ -0,0 +1,9 @@
+import { MessageCircle } from "lucide-react";
+
+export interface EmptyChatViewProps { description: string; title: string; }
+export function EmptyChatView({ title, description }: EmptyChatViewProps) {
+  return <div className="flex h-full flex-col items-center justify-center gap-4 px-6 py-8 text-center">
+    <div className="rounded-full bg-surface-secondary p-4"><MessageCircle className="h-8 w-8 text-muted" /></div>
+    <div className="space-y-2"><h3 className="font-semibold text-foreground text-lg">{title}</h3><p className="text-muted text-sm">{description}</p></div>
+  </div>;
+}

package/src/compat-chat/image-lightbox.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import { Modal } from "@lindaui/ui/compound";
+import { useCallback } from "react";
+import { useDisclosure } from "@lindaui/ui/use-disclosure";
+
+export interface ImageLightboxProps { alt?: string; className?: string; src: string; }
+export function ImageLightbox({ src, alt = "Media", className }: ImageLightboxProps) {
+  const { isOpen, open: onOpen, close: onClose } = useDisclosure();
+  const handleOpenChange = useCallback((open: boolean) => { if (!open) onClose(); }, [onClose]);
+  return <>
+    <button aria-label={`Ver imagen: ${alt}`} className={`cursor-pointer rounded-lg p-0 transition-opacity hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-accent ${className ?? ""}`} onClick={onOpen} type="button">
+      <img alt={alt} className="h-44 w-full max-w-[220px] rounded-lg object-cover" height={600} loading="lazy" src={src} width={800} />
+    </button>
+    <Modal.Backdrop className="bg-black/80" isOpen={isOpen} onOpenChange={handleOpenChange} variant="blur">
+      <Modal.Container className="overflow-hidden" size="full"><Modal.Dialog className="m-0 rounded-none shadow-none">
+        <Modal.CloseTrigger className="top-4 right-4 z-10 rounded-full bg-black/50 text-white hover:bg-black/70" />
+        <Modal.Body className="flex h-full items-center justify-center overflow-hidden p-4"><img alt={alt} className="max-h-full max-w-full rounded-lg object-contain" height={1080} src={src} width={1920} /></Modal.Body>
+      </Modal.Dialog></Modal.Container>
+    </Modal.Backdrop>
+  </>;
+}

package/src/compat-chat/message-bubble.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import dayjs from "dayjs";
+import { motion } from "framer-motion";
+import { cn } from "@lindaui/ui/cn";
+import { ImageLightbox } from "./image-lightbox";
+import { WhatsAppAudioPlayer } from "./whatsapp-audio-player";
+import type { GenericMessage } from "./types";
+
+export interface MessageBubbleProps { message: GenericMessage; }
+function formatTime(date: Date | string): string { return dayjs(date).format("HH:mm"); }
+export function MessageBubble({ message }: MessageBubbleProps) {
+  const isBot = message.side === "right";
+  const hasAudio = message.media?.kind === "audio";
+  if (message.side === "center") return <motion.div animate={{ opacity: 1 }} className="my-2 flex justify-center" initial={{ opacity: 0 }}><div className="rounded-full bg-surface-secondary px-3 py-1 text-muted text-xs">{message.text}</div></motion.div>;
+  return <motion.div animate={{ opacity: 1, y: 0 }} className={cn("flex w-full", isBot ? "justify-end" : "justify-start")} initial={{ opacity: 0, y: 10 }}>
+    <div className={cn("relative p-3 text-sm shadow-sm", hasAudio ? "w-[90%] max-w-[330px]" : "max-w-[85%] sm:max-w-[70%]", "rounded-2xl transition-all duration-200", isBot ? "rounded-tr-none bg-[#d9fdd3] text-[#111b21] dark:bg-[#005c4b] dark:text-white" : "rounded-tl-none bg-white text-[#111b21] dark:bg-[#202c33] dark:text-white")}>
+      <div className={cn("absolute top-0 h-0 w-0 border-solid", isBot ? "-right-[12px] border-t-[#d9fdd3] border-t-[10px] border-r-[12px] border-r-transparent dark:border-t-[#005c4b]" : "-left-[12px] border-t-[10px] border-t-white border-l-[12px] border-l-transparent dark:border-t-[#202c33]")} />
+      {message.media?.kind === "image" && <div className="mb-2 overflow-hidden rounded-lg"><ImageLightbox alt="Media compartida" src={message.media.url} /></div>}
+      {message.media?.kind === "audio" && <div className="mb-2"><WhatsAppAudioPlayer isBot={isBot} src={message.media.url} /></div>}
+      {message.media?.kind === "pdf" && <div className="mb-2"><a className="flex items-center gap-1.5 rounded-lg border border-border bg-surface-secondary px-3 py-2 text-sm text-foreground transition-colors hover:bg-surface-secondary dark:border-border dark:bg-default dark:text-muted dark:hover:bg-default" download href={message.media.url} rel="noopener noreferrer" target="_blank"><span>PDF</span><span className="max-w-[180px] truncate">{message.media.label ?? "Documento adjunto"}</span></a></div>}
+      <div className="relative">
+        <p className="whitespace-pre-wrap break-words">{message.text}<span className="invisible text-[10px]">{"  "}{formatTime(message.timestamp)}{message.authorTag ? ` ${message.authorTag}` : ""}</span></p>
+        <span className="absolute right-0 bottom-0 flex items-center gap-1 text-[#52616b] text-[10px] dark:text-[#d1dedb]">{formatTime(message.timestamp)}{message.authorTag && <span>{message.authorTag}</span>}</span>
+      </div>
+    </div>
+  </motion.div>;
+}