@marktiderman/genesis-chat 0.1.1 → 0.2.1

package/src/web/panel.tsx

@@ -0,0 +1,135 @@
+/**
+ * @feat:chat
+ * Messages, whole: the inbox on the left and the open conversation on the
+ * right (Genesis `Split`); on a narrow screen one at a time, with a back
+ * button from the conversation to the inbox. Search across every conversation
+ * sits above the inbox; a result opens its conversation at the message.
+ */
+import { useState, type ReactNode } from "react";
+import { MessageSquare, Search, X } from "lucide-react";
+import { Button, EmptyState, Split, cn } from "@marktiderman/genesis-ui";
+import { renderSlot, type SlotOverride } from "@marktiderman/genesis-core/slots";
+import type { ChatInboxItem } from "../core/types";
+import { useInbox } from "../react/index";
+import { ChatInbox, inboxTitle, type ChatInboxProps } from "./inbox";
+import { ChatSearch } from "./search";
+import type { ResolveUser } from "./format";
+import { ChatThread, type ChatThreadProps } from "./thread";
+
+export interface ChatPanelNoSelectionProps {
+  /** Words under the title; "Pick one on the left to read and reply." by default. */
+  hint?: string;
+}
+
+export interface ChatPanelProps {
+  resolveUser: ResolveUser;
+  /** The open conversation (controlled). */
+  selectedId?: string | null;
+  /** The conversation open at first (uncontrolled). */
+  defaultSelectedId?: string | null;
+  /** Called when a conversation is opened, or with null on back. Put it in the URL to make it bookmarkable. */
+  onSelectedChange?: (conversationId: string | null) => void;
+  /** Above the inbox list: a title, a "New message" button. */
+  inboxHeader?: ReactNode;
+  inboxProps?: Partial<Omit<ChatInboxProps, "resolveUser" | "onSelect" | "selectedId">>;
+  threadProps?: Partial<Omit<ChatThreadProps, "conversationId" | "resolveUser" | "onBack">>;
+  /** What the right pane shows before a conversation is chosen. */
+  slots?: { noSelection?: SlotOverride<ChatPanelNoSelectionProps> };
+  /** Search across every conversation, above the inbox. Default true. */
+  search?: boolean;
+  className?: string;
+}
+
+function NoSelection({ hint }: ChatPanelNoSelectionProps) {
+  return (
+    <div className="flex h-full items-center justify-center">
+      <EmptyState icon={MessageSquare} title="Choose a conversation" description={hint ?? "Pick one on the left to read and reply."} />
+    </div>
+  );
+}
+
+export function ChatPanel({
+  resolveUser,
+  selectedId: controlled,
+  defaultSelectedId = null,
+  onSelectedChange,
+  inboxHeader,
+  inboxProps,
+  threadProps,
+  slots,
+  search = true,
+  className,
+}: ChatPanelProps) {
+  const [own, setOwn] = useState<string | null>(defaultSelectedId);
+  const [searching, setSearching] = useState(false);
+  const [jump, setJump] = useState<{ messageId: string; seq?: number; threadRootId?: string | null } | null>(null);
+  const { items } = useInbox({ kind: inboxProps?.kind });
+  const titleOf = (id: string) => {
+    const item = items.find((i: ChatInboxItem) => i.conversationId === id);
+    return item ? inboxTitle(item, resolveUser, inboxProps?.fallbackTitle) : "a conversation";
+  };
+  const selected = controlled !== undefined ? controlled : own;
+  const select = (id: string | null) => {
+    if (controlled === undefined) setOwn(id);
+    onSelectedChange?.(id);
+  };
+
+  return (
+    <Split
+      ratio="1/3"
+      at="md"
+      gap="none"
+      testID="genesis-chat-panel"
+      className={cn(
+        "h-full min-h-0 overflow-hidden rounded-lg border bg-background",
+        "[&>[data-slot=split-start]]:min-h-0 [&>[data-slot=split-end]]:min-h-0 max-md:[&>[data-slot]]:flex-1",
+        selected ? "max-md:[&>[data-slot=split-start]]:hidden" : "max-md:[&>[data-slot=split-end]]:hidden",
+        className,
+      )}
+      start={
+        <div className="flex h-full min-h-0 flex-col md:border-r">
+          {inboxHeader || search ? (
+            <div className="flex shrink-0 items-center gap-2 border-b px-3 py-2">
+              <div className="min-w-0 flex-1">{inboxHeader}</div>
+              {search ? (
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon"
+                  className="size-8 shrink-0"
+                  onClick={() => setSearching((s) => !s)}
+                  aria-label={searching ? "Close search" : "Search messages"}
+                  aria-pressed={searching}
+                  data-testid="genesis-chat-panel-search"
+                >
+                  {searching ? <X /> : <Search />}
+                </Button>
+              ) : null}
+            </div>
+          ) : null}
+          {searching ? (
+            <ChatSearch
+              resolveUser={resolveUser}
+              autoFocus
+              conversationTitle={titleOf}
+              onOpen={(hit) => {
+                setJump({ messageId: hit.messageId, seq: hit.seq, threadRootId: hit.threadRootId });
+                select(hit.conversationId);
+              }}
+              className="min-h-0 flex-1"
+            />
+          ) : (
+            <ChatInbox {...inboxProps} resolveUser={resolveUser} selectedId={selected} onSelect={(id) => { setJump(null); select(id); }} className={cn("min-h-0 flex-1 overflow-y-auto", inboxProps?.className)} />
+          )}
+        </div>
+      }
+      end={
+        selected ? (
+          <ChatThread key={selected} {...threadProps} jumpTo={jump} conversationId={selected} resolveUser={resolveUser} onBack={() => select(null)} backClassName="md:hidden" />
+        ) : (
+          renderSlot(NoSelection, slots?.noSelection, {})
+        )
+      }
+    />
+  );
+}

package/src/web/schedule.tsx

@@ -0,0 +1,204 @@
+/**
+ * @feat:chat
+ * Scheduled send on the web: the send button's menu (tomorrow 9 AM, Monday 9 AM, or a date
+ * and time you pick), and `ChatScheduledList`, your messages waiting to go, each with Cancel.
+ */
+import { useEffect, useMemo, useState } from "react";
+import { AlertCircle, CalendarClock, ChevronUp, Clock, X } from "lucide-react";
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  EmptyState,
+  Input,
+  Label,
+  Skeleton,
+  cn,
+  toast,
+} from "@marktiderman/genesis-ui";
+import { isSchedulable, scheduleLabel, scheduleQuickPicks } from "../core/extras";
+import { previewText } from "../core/thread";
+import { useScheduled } from "../react/index";
+
+export interface ChatScheduleMenuProps {
+  /** Called with the chosen time. */
+  onSchedule: (at: Date) => void;
+  disabled?: boolean;
+  /** For tests and demos. */
+  now?: Date;
+}
+
+/** `YYYY-MM-DDTHH:mm` in local time, for a datetime-local input. */
+export function toLocalInput(d: Date): string {
+  const p = (n: number) => String(n).padStart(2, "0");
+  return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())}T${p(d.getHours())}:${p(d.getMinutes())}`;
+}
+
+/** The chevron beside Send: "Schedule message" with quick picks and a custom time. */
+export function ChatScheduleMenu({ onSchedule, disabled, now }: ChatScheduleMenuProps) {
+  const [picking, setPicking] = useState(false);
+  const picks = useMemo(() => scheduleQuickPicks(now ?? new Date()), [now]);
+  return (
+    <>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon"
+            className="-ml-1 size-8 shrink-0 self-center rounded-full text-muted-foreground"
+            disabled={disabled}
+            aria-label="Send options"
+            data-testid="genesis-chat-send-menu"
+          >
+            <ChevronUp />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" side="top" className="w-60">
+          <DropdownMenuLabel className="flex items-center gap-2 text-xs text-muted-foreground">
+            <CalendarClock className="size-3.5" aria-hidden /> Schedule message
+          </DropdownMenuLabel>
+          {picks.map((p) => (
+            <DropdownMenuItem key={p.label} className="gap-2" onSelect={() => onSchedule(p.at)} data-testid="genesis-chat-schedule-pick">
+              <Clock className="size-4" aria-hidden /> {p.label}
+            </DropdownMenuItem>
+          ))}
+          <DropdownMenuSeparator />
+          <DropdownMenuItem className="gap-2" onSelect={() => setPicking(true)} data-testid="genesis-chat-schedule-custom">
+            <CalendarClock className="size-4" aria-hidden /> Pick a date and time…
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+      <ScheduleDialog open={picking} onOpenChange={setPicking} onSchedule={onSchedule} now={now} />
+    </>
+  );
+}
+
+function ScheduleDialog({ open, onOpenChange, onSchedule, now }: { open: boolean; onOpenChange: (o: boolean) => void; onSchedule: (at: Date) => void; now?: Date }) {
+  const base = now ?? new Date();
+  const [value, setValue] = useState(() => toLocalInput(new Date(base.getTime() + 60 * 60_000)));
+  // The default is an hour from when it opens, not from when the composer first drew.
+  useEffect(() => {
+    if (open) setValue(toLocalInput(new Date((now ?? new Date()).getTime() + 60 * 60_000)));
+  }, [open]); // eslint-disable-line react-hooks/exhaustive-deps
+  const at = new Date(value);
+  const ok = isSchedulable(at, now ?? new Date());
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-sm">
+        <DialogHeader>
+          <DialogTitle>Schedule message</DialogTitle>
+          <DialogDescription>It sends at this time, in your time zone, as if you'd sent it then.</DialogDescription>
+        </DialogHeader>
+        <form
+          className="flex flex-col gap-2"
+          onSubmit={(e) => {
+            e.preventDefault();
+            if (!ok) return;
+            onSchedule(at);
+            onOpenChange(false);
+          }}
+        >
+          <Label htmlFor="genesis-chat-schedule-at">Date and time</Label>
+          <Input
+            id="genesis-chat-schedule-at"
+            type="datetime-local"
+            value={value}
+            min={toLocalInput(new Date(base.getTime() + 60_000))}
+            onChange={(e) => setValue(e.target.value)}
+            aria-invalid={!ok}
+            aria-describedby="genesis-chat-schedule-hint"
+            data-testid="genesis-chat-schedule-input"
+          />
+          <p id="genesis-chat-schedule-hint" className={cn("text-xs", ok ? "text-muted-foreground" : "text-destructive")}>
+            {ok ? scheduleLabel(at, now ?? new Date()) : "Pick a time from a minute to a year from now."}
+          </p>
+          <DialogFooter className="mt-2">
+            <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
+              Cancel
+            </Button>
+            <Button type="submit" disabled={!ok} data-testid="genesis-chat-schedule-confirm">
+              Schedule
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export interface ChatScheduledListProps {
+  /** One conversation's; all of yours without it. */
+  conversationId?: string | null;
+  /** Names a conversation in the all-conversations list. */
+  conversationTitle?: (conversationId: string) => string;
+  className?: string;
+}
+
+/** Your scheduled messages, soonest first, each with when it goes and Cancel (Remove for one that failed). */
+export function ChatScheduledList({ conversationId, conversationTitle, className }: ChatScheduledListProps) {
+  const { items, isLoading, cancel } = useScheduled(conversationId);
+  if (isLoading) {
+    return (
+      <div className={cn("flex flex-col gap-2 p-3", className)} aria-busy aria-label="Loading scheduled messages">
+        <Skeleton className="h-12 w-full" />
+        <Skeleton className="h-12 w-full" />
+      </div>
+    );
+  }
+  if (items.length === 0) {
+    return <EmptyState icon={CalendarClock} title="Nothing scheduled" description="Use the arrow beside Send to schedule a message." className={className} />;
+  }
+  return (
+    <ul className={cn("flex flex-col divide-y", className)} aria-label="Scheduled messages" data-testid="genesis-chat-scheduled-list">
+      {items.map((s) => (
+        <li key={s.id} className="flex items-start gap-3 px-3 py-2.5" data-testid="genesis-chat-scheduled-item">
+          {s.status === "failed" ? <AlertCircle className="mt-0.5 size-4 shrink-0 text-destructive" aria-hidden /> : <Clock className="mt-0.5 size-4 shrink-0 text-muted-foreground" aria-hidden />}
+          <div className="min-w-0 flex-1">
+            <div className="text-xs font-medium text-muted-foreground">
+              {s.status === "failed" ? "Couldn't send" : scheduleLabel(s.sendAt)}
+              {!conversationId && conversationTitle ? ` · ${conversationTitle(s.conversationId)}` : null}
+            </div>
+            <div className="truncate text-sm">{previewText(s.body, s.attachments[0]?.kind ?? null)}</div>
+            {s.error ? <div className="text-xs text-destructive">{s.error}</div> : null}
+          </div>
+          {s.status === "failed" ? (
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              className="h-7 shrink-0 gap-1 text-xs"
+              onClick={() => void cancel(s.id).then(() => toast.success("Removed"), () => toast.error("Couldn't remove it"))}
+              aria-label="Remove the message that couldn't send"
+              data-testid="genesis-chat-scheduled-remove"
+            >
+              <X className="size-3.5" aria-hidden /> Remove
+            </Button>
+          ) : s.status === "scheduled" ? (
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              className="h-7 shrink-0 gap-1 text-xs"
+              onClick={() => void cancel(s.id).then(() => toast.success("Scheduled message cancelled"), () => toast.error("Couldn't cancel it"))}
+              aria-label={`Cancel the message scheduled for ${scheduleLabel(s.sendAt)}`}
+              data-testid="genesis-chat-scheduled-cancel"
+            >
+              <X className="size-3.5" aria-hidden /> Cancel
+            </Button>
+          ) : null}
+        </li>
+      ))}
+    </ul>
+  );
+}

package/src/web/search.tsx

@@ -0,0 +1,129 @@
+/**
+ * @feat:chat
+ * `ChatSearch`: a search box and its results, across all your conversations or in one. Each
+ * result shows who, when, where (across conversations) and the snippet with the matched words
+ * highlighted; hits in a voice note's or video's transcript are marked. Choosing one calls
+ * `onOpen`, which the thread uses to jump to the message. Arrow keys move through the results.
+ */
+import { useRef, useState, type KeyboardEvent } from "react";
+import { Mic, Search, X } from "lucide-react";
+import { Badge, Button, EmptyState, Input, Skeleton, cn } from "@marktiderman/genesis-ui";
+import { snippetParts } from "../core/extras";
+import type { ChatSearchHit } from "../core/types";
+import { useSearch } from "../react/index";
+import { relativeTime, type ResolveUser } from "./format";
+
+export interface ChatSearchProps {
+  resolveUser: ResolveUser;
+  /** Search one conversation; all of yours without it. */
+  conversationId?: string | null;
+  /** Called with the chosen result. */
+  onOpen: (hit: ChatSearchHit) => void;
+  /** Names a conversation, on results across conversations. */
+  conversationTitle?: (conversationId: string) => string;
+  /** Start with the box focused. */
+  autoFocus?: boolean;
+  debounceMs?: number;
+  className?: string;
+}
+
+/** A snippet with its « » marks as <mark>. */
+export function SearchSnippet({ snippet, className }: { snippet: string; className?: string }) {
+  return (
+    <span className={className}>
+      {snippetParts(snippet).map((p, i) =>
+        p.match ? (
+          <mark key={i} className="rounded-sm bg-warning/30 px-0.5 text-foreground">
+            {p.text}
+          </mark>
+        ) : (
+          <span key={i}>{p.text}</span>
+        ),
+      )}
+    </span>
+  );
+}
+
+export function ChatSearch({ resolveUser, conversationId, onOpen, conversationTitle, autoFocus, debounceMs, className }: ChatSearchProps) {
+  const [value, setValue] = useState("");
+  const { hits, query, isSearching } = useSearch(value, { conversationId, debounceMs });
+  const list = useRef<HTMLUListElement>(null);
+
+  // Native buttons in a list; the arrows are added here (no Radix primitive is a vertical list of buttons).
+  const onKeyDown = (e: KeyboardEvent<HTMLElement>) => {
+    if (e.key !== "ArrowDown" && e.key !== "ArrowUp") return;
+    const buttons = Array.from(list.current?.querySelectorAll<HTMLButtonElement>("button[data-search-hit]") ?? []);
+    if (!buttons.length) return;
+    e.preventDefault();
+    const at = buttons.indexOf(document.activeElement as HTMLButtonElement);
+    const to = e.key === "ArrowDown" ? Math.min(buttons.length - 1, at + 1) : at <= 0 ? -1 : at - 1;
+    if (to < 0) (e.currentTarget.querySelector("input") as HTMLInputElement | null)?.focus();
+    else buttons[to]?.focus();
+  };
+
+  const short = value.trim().length < 2;
+  return (
+    <div className={cn("flex min-h-0 flex-col", className)} onKeyDown={onKeyDown} data-testid="genesis-chat-search" role="search">
+      <div className="relative p-2">
+        <Search className="pointer-events-none absolute left-4.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" aria-hidden />
+        <Input
+          type="search"
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+          placeholder={conversationId ? "Search this conversation" : "Search messages"}
+          aria-label={conversationId ? "Search this conversation" : "Search messages"}
+          autoFocus={autoFocus}
+          className="pl-8 pr-8"
+          data-testid="genesis-chat-search-input"
+        />
+        {value ? (
+          <Button type="button" variant="ghost" size="icon" className="absolute right-3 top-1/2 size-6 -translate-y-1/2" onClick={() => setValue("")} aria-label="Clear search">
+            <X />
+          </Button>
+        ) : null}
+      </div>
+      <div className="sr-only" aria-live="polite">
+        {short || isSearching ? "" : hits.length === 0 ? "No results" : hits.length === 1 ? "1 result" : `${hits.length} results`}
+      </div>
+      {short ? null : isSearching && hits.length === 0 ? (
+        <div className="flex flex-col gap-2 p-3" aria-busy aria-label="Searching">
+          <Skeleton className="h-12 w-full" />
+          <Skeleton className="h-12 w-full" />
+        </div>
+      ) : hits.length === 0 ? (
+        <EmptyState icon={Search} title="No results" description={`Nothing matches “${query}”.`} />
+      ) : (
+        <ul ref={list} className="min-h-0 flex-1 overflow-y-auto" aria-label="Results">
+          {hits.map((h) => {
+            const who = h.senderId ? resolveUser(h.senderId).name : "Someone";
+            return (
+              <li key={`${h.messageId}:${h.inTranscript}`}>
+                <button
+                  type="button"
+                  data-search-hit
+                  onClick={() => onOpen(h)}
+                  className="flex w-full flex-col gap-0.5 px-3 py-2 text-left hover:bg-accent focus-visible:bg-accent focus-visible:outline-none"
+                  data-testid="genesis-chat-search-hit"
+                >
+                  <span className="flex items-center gap-2 text-xs text-muted-foreground">
+                    <span className="truncate font-medium text-foreground">{who}</span>
+                    {!conversationId && conversationTitle ? <span className="truncate">in {conversationTitle(h.conversationId)}</span> : null}
+                    <span className="ml-auto shrink-0">{relativeTime(h.createdAt)}</span>
+                  </span>
+                  <span className="flex items-start gap-1.5 text-sm">
+                    {h.inTranscript ? (
+                      <Badge variant="secondary" className="mt-0.5 shrink-0 gap-1 px-1.5 py-0 text-[10px]" data-testid="genesis-chat-search-transcript">
+                        <Mic className="size-3" aria-hidden /> Transcript
+                      </Badge>
+                    ) : null}
+                    <SearchSnippet snippet={h.snippet} className="line-clamp-2" />
+                  </span>
+                </button>
+              </li>
+            );
+          })}
+        </ul>
+      )}
+    </div>
+  );
+}

package/src/web/thread-context.ts

@@ -0,0 +1,64 @@
+/**
+ * @feat:chat
+ * What every bubble of one thread shares: who you are, how people are named,
+ * your role, signed file URLs, and the actions, so a row needs only its item.
+ */
+import { createContext, useContext, type ComponentType } from "react";
+import type { ChatLinkPreview, ChatMessage, ChatRole } from "../core/types";
+import type { ChatAttachmentKind } from "../react/index";
+import type { ChatAttachmentSlotProps } from "./attachments";
+import type { LinkPreviewImages } from "./cards";
+import type { ResolveUser } from "./format";
+
+export interface ThreadContextValue {
+  me: string;
+  resolveUser: ResolveUser;
+  role: ChatRole | null;
+  /** More than two people: names and avatars show on others' messages. */
+  isGroup: boolean;
+  /** Owner or admin: may delete anyone's message. */
+  canModerate: boolean;
+  canPin: boolean;
+  canPost: boolean;
+  pins: Set<string>;
+  urls: Record<string, string>;
+  byId: Map<string, ChatMessage>;
+  quickReactions: readonly string[];
+  attachmentSlot?: ComponentType<ChatAttachmentSlotProps> | null;
+  /** Cards for the app's registered attachment kinds. */
+  attachmentKinds?: Record<string, ChatAttachmentKind>;
+  /** Link previews by message id, in link order. */
+  previews: Record<string, ChatLinkPreview[]>;
+  /** Where the full emoji picker loads its data from; no full picker without it. */
+  emojibaseUrl?: string;
+  /** Link preview images: off by default (see LinkPreviewImages). */
+  linkPreviewImages?: LinkPreviewImages;
+  linkPreviewProxyUrl?: (url: string) => string | null | undefined;
+  highlightedId: string | null;
+  editingId: string | null;
+  reply(m: ChatMessage): void;
+  focusComposer(): void;
+  startEdit(id: string | null): void;
+  saveEdit(m: ChatMessage, body: string): Promise<void>;
+  askDelete(m: ChatMessage): void;
+  askReport(m: ChatMessage): void;
+  react(m: ChatMessage, emoji: string, on: boolean): void;
+  pin(m: ChatMessage, on: boolean): void;
+  save(m: ChatMessage): void;
+  copy(m: ChatMessage): void;
+  jumpTo(messageId: string): void;
+  retry(clientId: string): void;
+  discard(clientId: string): void;
+  openThread?: (m: ChatMessage) => void;
+}
+
+export const ThreadContext = createContext<ThreadContextValue | null>(null);
+
+export function useThreadContext(): ThreadContextValue {
+  const ctx = useContext(ThreadContext);
+  if (!ctx) throw new Error("Chat bubbles render inside <ChatThread>.");
+  return ctx;
+}
+
+/** The six quick reactions. */
+export const QUICK_REACTIONS = ["👍", "❤️", "😂", "😮", "😢", "🙏"] as const;