@marktiderman/genesis-chat 0.1.0 → 0.2.0

package/src/web/format.ts

@@ -0,0 +1,55 @@
+/**
+ * @feat:chat
+ * Small formatting helpers for the web renderers: times, sizes, and the
+ * one-line description of a message a screen reader hears.
+ */
+import { previewText } from "../core/thread";
+import type { ChatMessage } from "../core/types";
+
+/** A person as the app names them. The package knows no people tables: the app supplies this. */
+export interface ChatUser {
+  name: string;
+  avatarUrl?: string | null;
+}
+
+export type ResolveUser = (userId: string) => ChatUser;
+
+/** 10:42 (in the reader's locale). */
+export function clockTime(iso: string, locale?: string): string {
+  return new Date(iso).toLocaleTimeString(locale, { hour: "numeric", minute: "2-digit" });
+}
+
+/** The inbox's time: "now", "5m", "10:42" today, "Yesterday", "Mon", or "12 Mar". */
+export function relativeTime(iso: string | null | undefined, now = new Date(), locale?: string): string {
+  if (!iso) return "";
+  const d = new Date(iso);
+  const diff = now.getTime() - d.getTime();
+  if (diff < 60_000) return "now";
+  if (diff < 3_600_000) return `${Math.floor(diff / 60_000)}m`;
+  const startOf = (x: Date) => new Date(x.getFullYear(), x.getMonth(), x.getDate()).getTime();
+  const days = Math.round((startOf(now) - startOf(d)) / 86_400_000);
+  if (days === 0) return clockTime(iso, locale);
+  if (days === 1) return "Yesterday";
+  if (days > 1 && days < 7) return d.toLocaleDateString(locale, { weekday: "short" });
+  return d.toLocaleDateString(locale, {
+    day: "numeric",
+    month: "short",
+    year: d.getFullYear() === now.getFullYear() ? undefined : "numeric",
+  });
+}
+
+/** 12 KB, 3.4 MB. */
+export function formatBytes(bytes: number | null | undefined): string {
+  if (bytes == null || !Number.isFinite(bytes)) return "";
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${Math.round(bytes / 1024)} KB`;
+  if (bytes < 1024 * 1024 * 1024) return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
+  return `${(bytes / 1024 / 1024 / 1024).toFixed(1)} GB`;
+}
+
+/** What a screen reader hears for one bubble: "Sam, 10:42: See you then". */
+export function messageLabel(message: Pick<ChatMessage, "body" | "createdAt" | "deletedAt" | "attachments" | "editedAt" | "visibility">, sender: string, locale?: string): string {
+  const what = previewText(message.body, message.attachments[0]?.kind ?? null, Boolean(message.deletedAt)) || "Message";
+  const extra = [message.visibility === "observers" ? "internal note" : null, message.editedAt && !message.deletedAt ? "edited" : null].filter(Boolean);
+  return `${sender}, ${clockTime(message.createdAt, locale)}: ${what}${extra.length ? ` (${extra.join(", ")})` : ""}`;
+}

package/src/web/inbox.tsx

@@ -0,0 +1,195 @@
+/**
+ * @feat:chat
+ * The inbox: your conversations, newest first, each a button with an avatar,
+ * the title (the other person's name in a two-person conversation), a one-line
+ * preview, the time, an unread count, an @ when you were mentioned, and muted
+ * and pinned marks. Arrow keys move between rows.
+ */
+import { useRef, type KeyboardEvent } from "react";
+import { AtSign, BellOff, MessageSquare, Pin } from "lucide-react";
+import { Badge, Button, EmptyState, Skeleton, UserAvatar, cn } from "@marktiderman/genesis-ui";
+import { renderSlot, type SlotOverride } from "@marktiderman/genesis-core/slots";
+import { previewText } from "../core/thread";
+import type { ChatInboxItem } from "../core/types";
+import { useChat, useInbox } from "../react/index";
+import { relativeTime, type ResolveUser } from "./format";
+
+export interface ChatInboxEmptyProps {
+  archived: boolean;
+}
+
+export interface ChatInboxProps {
+  /** Names people (the app knows them; the package doesn't). */
+  resolveUser: ResolveUser;
+  /** Called with a conversation's id when its row is chosen. */
+  onSelect: (conversationId: string) => void;
+  /** The open conversation, marked as current. */
+  selectedId?: string | null;
+  /** Only this kind of conversation. */
+  kind?: string;
+  /** The archived conversations instead. */
+  archived?: boolean;
+  /** A conversation's title when it has none and isn't two-person. */
+  fallbackTitle?: (item: ChatInboxItem) => string;
+  /** Replace or eject (`null`) the empty state. */
+  slots?: { empty?: SlotOverride<ChatInboxEmptyProps> };
+  "aria-label"?: string;
+  className?: string;
+}
+
+function DefaultEmpty({ archived }: ChatInboxEmptyProps) {
+  return (
+    <EmptyState
+      icon={MessageSquare}
+      title={archived ? "No archived conversations" : "No conversations yet"}
+      description={archived ? undefined : "When someone messages you, it shows up here."}
+    />
+  );
+}
+
+/** The title an inbox row shows. */
+export function inboxTitle(item: ChatInboxItem, resolveUser: ResolveUser, fallback?: (item: ChatInboxItem) => string): string {
+  if (item.title) return item.title;
+  if (item.otherUserId) return resolveUser(item.otherUserId).name;
+  return fallback?.(item) ?? "Conversation";
+}
+
+export function ChatInbox({ resolveUser, onSelect, selectedId, kind, archived = false, fallbackTitle, slots, className, ...rest }: ChatInboxProps) {
+  const { userId: me } = useChat();
+  const { items, isLoading, error, refetch } = useInbox({ kind, archived });
+  const list = useRef<HTMLUListElement>(null);
+
+  // Rows are native buttons (Tab reaches each); the arrows are added here
+  // because no Radix primitive is a list of buttons with vertical roving focus.
+  const onKeyDown = (e: KeyboardEvent<HTMLUListElement>) => {
+    const buttons = Array.from(list.current?.querySelectorAll<HTMLButtonElement>("button[data-inbox-row]") ?? []);
+    const at = buttons.indexOf(document.activeElement as HTMLButtonElement);
+    const to =
+      e.key === "ArrowDown" ? Math.min(buttons.length - 1, at + 1) : e.key === "ArrowUp" ? Math.max(0, at - 1) : e.key === "Home" ? 0 : e.key === "End" ? buttons.length - 1 : -2;
+    if (to === -2 || buttons.length === 0) return;
+    e.preventDefault();
+    buttons[to < 0 ? 0 : to]?.focus();
+  };
+
+  if (isLoading) {
+    return (
+      <div className={cn("flex flex-col", className)} aria-busy aria-label="Loading conversations" data-testid="genesis-chat-inbox-loading">
+        {Array.from({ length: 6 }, (_, i) => (
+          <div key={i} className="flex items-center gap-3 px-3 py-3">
+            <Skeleton className="size-10 shrink-0 rounded-full" />
+            <div className="flex-1 space-y-2">
+              <Skeleton className="h-3.5 w-2/5" />
+              <Skeleton className="h-3 w-4/5" />
+            </div>
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className={className}>
+        <EmptyState
+          icon={MessageSquare}
+          title="Couldn't load your conversations"
+          description="Check your connection and try again."
+          action={
+            <Button type="button" variant="outline" onClick={() => void refetch()}>
+              Try again
+            </Button>
+          }
+        />
+      </div>
+    );
+  }
+
+  if (items.length === 0) {
+    return <div className={className}>{renderSlot(DefaultEmpty, slots?.empty, { archived })}</div>;
+  }
+
+  return (
+    <nav aria-label={rest["aria-label"] ?? "Conversations"} className={cn("min-h-0", className)} data-testid="genesis-chat-inbox">
+      <ul ref={list} className="flex flex-col" onKeyDown={onKeyDown}>
+        {items.map((item) => (
+          <li key={item.conversationId}>
+            <InboxRow item={item} me={me} resolveUser={resolveUser} fallbackTitle={fallbackTitle} selected={item.conversationId === selectedId} onSelect={onSelect} />
+          </li>
+        ))}
+      </ul>
+    </nav>
+  );
+}
+
+interface InboxRowProps {
+  item: ChatInboxItem;
+  me: string;
+  resolveUser: ResolveUser;
+  fallbackTitle?: (item: ChatInboxItem) => string;
+  selected: boolean;
+  onSelect: (id: string) => void;
+}
+
+function InboxRow({ item, me, resolveUser, fallbackTitle, selected, onSelect }: InboxRowProps) {
+  const title = inboxTitle(item, resolveUser, fallbackTitle);
+  const other = item.otherUserId ? resolveUser(item.otherUserId) : null;
+  const last = item.lastMessage;
+  const unread = item.unread > 0;
+  let preview = last ? previewText(last.body, last.attachment, last.deleted) : "";
+  if (last && last.kind !== "system" && !last.deleted && last.senderId) {
+    if (last.senderId === me) preview = `You: ${preview}`;
+    else if (!item.otherUserId && item.memberCount > 2) preview = `${resolveUser(last.senderId).name}: ${preview}`;
+  }
+  const time = relativeTime(item.lastMessageAt ?? last?.createdAt);
+  const count = item.unread >= 99 ? "99+" : String(item.unread);
+  const label = [
+    title,
+    unread ? `${count} unread` : null,
+    item.mentioned ? "you were mentioned" : null,
+    item.muted ? "muted" : null,
+    item.pinned ? "pinned" : null,
+    preview || null,
+    time || null,
+  ]
+    .filter(Boolean)
+    .join(", ");
+
+  return (
+    <button
+      type="button"
+      data-inbox-row
+      aria-current={selected ? "true" : undefined}
+      aria-label={label}
+      onClick={() => onSelect(item.conversationId)}
+      className={cn(
+        "flex w-full items-center gap-3 px-3 py-2.5 text-left transition-colors hover:bg-accent focus-visible:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
+        selected && "bg-accent",
+      )}
+      data-testid={`genesis-chat-inbox-row-${item.conversationId}`}
+    >
+      <UserAvatar name={title} src={other?.avatarUrl} className="shrink-0" />
+      <span className="flex min-w-0 flex-1 flex-col gap-0.5" aria-hidden>
+        <span className="flex items-center gap-2">
+          <span className={cn("min-w-0 flex-1 truncate text-sm", unread ? "font-semibold text-foreground" : "font-medium text-foreground")}>{title}</span>
+          <span className={cn("shrink-0 text-xs tabular-nums", unread && !item.muted ? "font-medium text-primary" : "text-muted-foreground")}>{time}</span>
+        </span>
+        <span className="flex items-center gap-1.5">
+          <span className={cn("min-w-0 flex-1 truncate text-sm", unread ? "text-foreground" : "text-muted-foreground")}>{preview || " "}</span>
+          {item.pinned ? <Pin className="size-3.5 shrink-0 text-muted-foreground" /> : null}
+          {item.muted ? <BellOff className="size-3.5 shrink-0 text-muted-foreground" /> : null}
+          {item.mentioned ? (
+            <span className="flex size-5 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground">
+              <AtSign className="size-3" />
+            </span>
+          ) : null}
+          {unread ? (
+            <Badge variant={item.muted ? "muted" : "default"} className="h-5 min-w-5 shrink-0 justify-center rounded-full px-1.5 text-[11px] tabular-nums">
+              {count}
+            </Badge>
+          ) : null}
+        </span>
+      </span>
+    </button>
+  );
+}
+

package/src/web/index.ts

@@ -0,0 +1,75 @@
+/**
+ * @feat:chat
+ * `@marktiderman/genesis-chat/web`: chat on Genesis UI. `ChatPanel` (inbox and
+ * thread side by side), `ChatInbox`, `ChatThread` and `ChatComposer`, the
+ * voice note player and recorder, topics, scheduled send, availability,
+ * broadcast, search, link previews, video, the emoji picker, the safe
+ * markdown renderer, and an in-memory client for demos and tests. Render them under `ChatProvider`
+ * (from `/react`) inside a TanStack QueryClientProvider.
+ *
+ * @stability Beta
+ */
+export { ChatPanel, type ChatPanelProps, type ChatPanelNoSelectionProps } from "./panel";
+export { ChatInbox, inboxTitle, type ChatInboxProps, type ChatInboxEmptyProps } from "./inbox";
+export {
+  ChatThread,
+  type ChatThreadProps,
+  type ChatThreadSlots,
+  type ChatThreadHeaderProps,
+  type ChatThreadEmptyProps,
+  type ChatComposerAccessoryProps,
+} from "./thread";
+export { ChatComposer, type ChatComposerProps, type ChatComposerHandle } from "./composer";
+export { MessageRow, plainText, type MessageRowProps } from "./bubble";
+export {
+  GenericAttachment,
+  ImageGrid,
+  Lightbox,
+  FileChip,
+  VideoAttachment,
+  MessageAttachments,
+  toAttachmentView,
+  type AttachmentView,
+  type ChatAttachmentSlotProps,
+  type ImageGridProps,
+  type LightboxProps,
+  type MessageAttachmentsProps,
+} from "./attachments";
+export { VoiceNote, type VoiceNoteProps } from "./voice-note";
+export {
+  useVoiceRecorder,
+  pickVoiceMimeType,
+  voiceFile,
+  type UseVoiceRecorderOptions,
+  type VoiceRecorder,
+  type VoiceRecorderState,
+  type VoiceRecording,
+} from "./use-voice-recorder";
+export { ChatMarkdown, parseMarkdown, isSafeHref, type ChatMarkdownProps, type MarkdownNode } from "./markdown";
+export { clockTime, relativeTime, formatBytes, messageLabel, type ChatUser, type ResolveUser } from "./format";
+export { QUICK_REACTIONS } from "./thread-context";
+export { createMemoryChatClient, type MemoryChatClient, type MemoryChatOptions, type MemoryConversationSeed } from "./memory-client";
+export { ChatTopicBar, type ChatTopicBarProps } from "./topics";
+export { ChatScheduleMenu, ChatScheduledList, toLocalInput, type ChatScheduleMenuProps, type ChatScheduledListProps } from "./schedule";
+export { ChatAwayBanner, ChatAvailabilitySettings, type ChatAwayBannerProps, type ChatAvailabilitySettingsProps } from "./availability";
+export { ChatBroadcast, type ChatBroadcastProps } from "./broadcast";
+export { ChatSearch, SearchSnippet, type ChatSearchProps } from "./search";
+export { ChatLinkPreview, ChatAttachmentCard, linkPreviewImageSrc, type ChatLinkPreviewProps, type ChatAttachmentCardProps, type LinkPreviewImages } from "./cards";
+export { ChatErrorBoundary, type ChatErrorBoundaryProps } from "./error-boundary";
+export { ChatEmojiPicker, canPickEmoji, type ChatEmojiPickerProps } from "./emoji-picker";
+export {
+  ChatVideoRecorder,
+  ChatVideoPlayer,
+  useVideoRecorder,
+  pickVideoMimeType,
+  videoFile,
+  uploadVideo,
+  muxStreamUrl,
+  muxPosterUrl,
+  type ChatVideoRecorderProps,
+  type ChatVideoPlayerProps,
+  type UseVideoRecorderOptions,
+  type VideoRecorder,
+  type VideoRecorderState,
+  type VideoRecording,
+} from "./video";

package/src/web/markdown.tsx

@@ -0,0 +1,245 @@
+/**
+ * @feat:chat
+ * The safe inline markdown a message body is written in: **bold**, *italic*
+ * (or _italic_), `code`, [links](https://…), bare https links, line breaks and
+ * mentions written `@[Name](user:<uuid>)`. A small tokenizer turns the text
+ * into nodes and the nodes into React elements, so every character of the
+ * body reaches the page as text: no HTML is ever parsed, and nothing uses
+ * dangerouslySetInnerHTML. Links open only for http and https.
+ */
+import { Fragment, type ReactNode } from "react";
+import { cn } from "@marktiderman/genesis-ui";
+
+export type MarkdownNode =
+  | { type: "text"; text: string }
+  | { type: "bold"; children: MarkdownNode[] }
+  | { type: "italic"; children: MarkdownNode[] }
+  | { type: "code"; text: string }
+  | { type: "link"; href: string; children: MarkdownNode[] }
+  | { type: "mention"; name: string; userId: string }
+  | { type: "break" };
+
+/** True for an absolute http or https URL; everything else (javascript:, data:, relative) is refused. */
+export function isSafeHref(href: string): boolean {
+  try {
+    const url = new URL(href);
+    return url.protocol === "http:" || url.protocol === "https:";
+  } catch {
+    return false;
+  }
+}
+
+const MENTION = /^@\[([^\]\n]{1,80})\]\(user:([0-9a-f-]{36})\)/i;
+const LINK = /^\[([^\]\n]{1,300})\]\(((?:[^()\s]|\([^()\s]*\)){1,2000})\)/;
+const BARE_URL = /^https?:\/\/[^\s<>"]+/i;
+const TRAILING_PUNCTUATION = /[.,;:!?)\]'"]+$/;
+
+/** Parses one message body into inline nodes. Never throws. */
+export function parseMarkdown(text: string): MarkdownNode[] {
+  const out: MarkdownNode[] = [];
+  const lines = text.replace(/\r\n?/g, "\n").split("\n");
+  lines.forEach((line, i) => {
+    if (i > 0) out.push({ type: "break" });
+    out.push(...parseInline(line, 0));
+  });
+  return mergeText(out);
+}
+
+function parseInline(src: string, depth: number): MarkdownNode[] {
+  const out: MarkdownNode[] = [];
+  let text = "";
+  const flush = () => {
+    if (text) out.push({ type: "text", text });
+    text = "";
+  };
+  let i = 0;
+  while (i < src.length) {
+    const ch = src[i]!;
+    const rest = src.slice(i);
+    const prev = i > 0 ? src[i - 1]! : "";
+
+    if (ch === "\\" && i + 1 < src.length && /[*_`[\]@\\]/.test(src[i + 1]!)) {
+      text += src[i + 1];
+      i += 2;
+      continue;
+    }
+
+    if (ch === "`") {
+      const end = src.indexOf("`", i + 1);
+      if (end > i + 1) {
+        flush();
+        out.push({ type: "code", text: src.slice(i + 1, end) });
+        i = end + 1;
+        continue;
+      }
+    }
+
+    if (ch === "@") {
+      const m = MENTION.exec(rest);
+      if (m) {
+        flush();
+        out.push({ type: "mention", name: m[1]!, userId: m[2]!.toLowerCase() });
+        i += m[0].length;
+        continue;
+      }
+    }
+
+    if (ch === "[") {
+      const m = LINK.exec(rest);
+      if (m) {
+        flush();
+        const label = depth < 3 ? parseInline(m[1]!, depth + 1) : [{ type: "text" as const, text: m[1]! }];
+        if (isSafeHref(m[2]!)) out.push({ type: "link", href: m[2]!, children: label });
+        // A link we won't open keeps its words and drops the target.
+        else out.push(...label);
+        i += m[0].length;
+        continue;
+      }
+    }
+
+    if ((ch === "h" || ch === "H") && !/[\w/]/.test(prev)) {
+      const m = BARE_URL.exec(rest);
+      if (m) {
+        const url = m[0].replace(TRAILING_PUNCTUATION, "");
+        if (isSafeHref(url)) {
+          flush();
+          out.push({ type: "link", href: url, children: [{ type: "text", text: url }] });
+          i += url.length;
+          continue;
+        }
+      }
+    }
+
+    if ((ch === "*" || ch === "_") && depth < 3) {
+      const double = src[i + 1] === ch;
+      const marker = double ? ch + ch : ch;
+      // `_` only opens at a word edge, so snake_case stays as written.
+      const opens = ch === "*" || !/\w/.test(prev);
+      const after = src[i + marker.length];
+      if (opens && after && after !== " " && after !== ch) {
+        const end = findClose(src, i + marker.length, marker);
+        if (end > 0) {
+          flush();
+          const inner = parseInline(src.slice(i + marker.length, end), depth + 1);
+          out.push(double ? { type: "bold", children: inner } : { type: "italic", children: inner });
+          i = end + marker.length;
+          continue;
+        }
+      }
+    }
+
+    text += ch;
+    i += 1;
+  }
+  flush();
+  return out;
+}
+
+/** Where `marker` closes: not after a space, and (for `_`) at a word edge. */
+function findClose(src: string, from: number, marker: string): number {
+  let j = from;
+  while (j < src.length) {
+    const k = src.indexOf(marker, j);
+    if (k < 0) return -1;
+    const before = src[k - 1]!;
+    const next = src[k + marker.length];
+    const doubled = marker.length === 1 && next === marker;
+    const edge = marker[0] !== "_" || !next || !/\w/.test(next);
+    if (k > from && before !== " " && !doubled && edge) return k;
+    j = k + (doubled ? 2 : 1);
+  }
+  return -1;
+}
+
+function mergeText(nodes: MarkdownNode[]): MarkdownNode[] {
+  const out: MarkdownNode[] = [];
+  for (const n of nodes) {
+    const last = out[out.length - 1];
+    if (n.type === "text" && last?.type === "text") last.text += n.text;
+    else out.push(n);
+  }
+  return out;
+}
+
+export interface ChatMarkdownProps {
+  /** The message body. */
+  text: string;
+  /** Draws a mention; a highlighted chip by default. */
+  renderMention?: (mention: { name: string; userId: string }) => ReactNode;
+  /** Mentions of this user are drawn stronger. */
+  me?: string;
+  /** Bubble colours: on `primary`, links and chips use the primary foreground. */
+  tone?: "default" | "primary";
+  className?: string;
+}
+
+/** Renders a message body's inline markdown as React elements. */
+export function ChatMarkdown({ text, renderMention, me, tone = "default", className }: ChatMarkdownProps) {
+  const nodes = parseMarkdown(text);
+  return <span className={cn("whitespace-pre-wrap break-words [overflow-wrap:anywhere]", className)}>{renderNodes(nodes, { renderMention, me, tone })}</span>;
+}
+
+interface RenderOptions {
+  renderMention?: ChatMarkdownProps["renderMention"];
+  me?: string;
+  tone: "default" | "primary";
+}
+
+function renderNodes(nodes: MarkdownNode[], opts: RenderOptions): ReactNode[] {
+  return nodes.map((n, i) => {
+    switch (n.type) {
+      case "text":
+        return <Fragment key={i}>{n.text}</Fragment>;
+      case "break":
+        return <br key={i} />;
+      case "bold":
+        return <strong key={i} className="font-semibold">{renderNodes(n.children, opts)}</strong>;
+      case "italic":
+        return <em key={i}>{renderNodes(n.children, opts)}</em>;
+      case "code":
+        return (
+          <code
+            key={i}
+            className={cn(
+              "rounded px-1 py-0.5 font-mono text-[0.85em]",
+              opts.tone === "primary" ? "bg-primary-foreground/15" : "bg-background/70",
+            )}
+          >
+            {n.text}
+          </code>
+        );
+      case "link":
+        return (
+          <a
+            key={i}
+            href={n.href}
+            target="_blank"
+            rel="noopener noreferrer"
+            className={cn("underline underline-offset-2", opts.tone === "primary" ? "text-primary-foreground" : "text-primary")}
+          >
+            {renderNodes(n.children, opts)}
+          </a>
+        );
+      case "mention": {
+        if (opts.renderMention) return <Fragment key={i}>{opts.renderMention(n)}</Fragment>;
+        const mine = opts.me && n.userId === opts.me.toLowerCase();
+        return (
+          <span
+            key={i}
+            data-mention={n.userId}
+            className={cn(
+              "rounded px-1 font-medium",
+              opts.tone === "primary"
+                ? "bg-primary-foreground/20 text-primary-foreground"
+                : mine
+                  ? "bg-primary/20 text-primary"
+                  : "bg-primary/10 text-primary",
+            )}
+          >
+            @{n.name}
+          </span>
+        );
+      }
+    }
+  });
+}