@marktiderman/genesis-chat 0.1.1 → 0.2.0

package/src/native/index.ts

@@ -0,0 +1,184 @@
+/**
+ * @feat:chat
+ * `@marktiderman/genesis-chat/native`: chat on genesis-ui-native, over the
+ * hooks in `/react`.
+ *
+ * Rung 1: `ChatInboxScreen` and `ChatThreadScreen` in two routes, under
+ * `ChatProvider` (from `/react`) and `ChatNativeProvider` (the native modules,
+ * copy and people).
+ * Rung 2: the parts (`ChatComposer`, `MessageBubble`, `MessageActionsSheet`,
+ * `VoiceNotePlayer`, `ChatPhotoViewer`, `ChatEmojiPicker`, `ChatStartSheet`) in your own screen.
+ * Rung 3: the logic (`composerReducer`, `recorderStep`, `buildThreadRows`,
+ * `messageActionsFor`, `useVoiceRecorder`, `useChatComposer`).
+ * Glue: `createTusUpload` (resumable uploads for `ChatProvider upload`) and
+ * the push block's `messages` category, actions and reply handler.
+ *
+ * Video messages: `ChatVideoRecorder` (expo-camera), `ChatVideoPlayer`
+ * (expo-video, HLS), uploads through `ChatProvider videoUpload` with
+ * `chunkedPut`; link previews (`ChatLinkPreviewCard`) and the app's own
+ * attachment cards (`ChatAttachmentCard`).
+ *
+ * Optional peers, passed in rather than imported: expo-audio,
+ * expo-image-picker, expo-haptics, expo-clipboard, expo-camera, expo-video,
+ * expo-web-browser, expo-sharing, expo-media-library, NetInfo, react-native-keyboard-controller; FlashList and expo-image through
+ * GenesisNativeApp's `modules`.
+ *
+ * @stability Beta
+ */
+export { ChatInboxScreen, inboxRow, type ChatInboxScreenProps } from "./inbox-screen";
+export { ChatThreadScreen, threadListMode, nearBottom, AT_BOTTOM_POINTS, type ChatThreadScreenProps } from "./thread-screen";
+export { chatThreadStackOptions, useChatThreadStackOptions, type ChatThreadStackOptionsProps } from "./stack-options";
+export { ChatStartSheet, ChatStartButton, type ChatStartPerson, type ChatStartSheetProps } from "./start-sheet";
+export { ChatComposer, type ChatComposerProps } from "./composer";
+export { MessageBubble, displayBody, formatClock, type MessageBubbleProps } from "./message-bubble";
+export { MessageActionsSheet, type MessageActionsSheetProps } from "./message-actions-sheet";
+export { VoiceNotePlayer, claimPlayback, releasePlayback, activePlaybackId, toggleVoiceNote, cycleVoiceNoteRate, usePlayingVoiceNote, scrubSeconds, waveformBars, barsThatFit, type VoiceNotePlayerProps } from "./voice-player";
+export { MessageAttachments, attachmentPaths, type BubbleAttachment } from "./media";
+export {
+  ChatMediaViewer,
+  ChatPhotoViewer,
+  galleryFor,
+  shouldDismiss,
+  pinchScale,
+  panLimit,
+  isLocalUri,
+  DISMISS_DISTANCE,
+  DISMISS_VELOCITY,
+  MAX_ZOOM,
+  type ChatMediaViewerProps,
+  type ChatPhoto,
+  type ChatPhotoViewerProps,
+} from "./photo-viewer";
+export { ChatEmojiPicker, ChatEmojiPickerSheet, forgetRecentEmoji, type ChatEmojiPickerProps, type ChatEmojiPickerSheetProps } from "./emoji-picker";
+export {
+  EMOJI_CATEGORIES,
+  emojiInCategory,
+  emojiEntry,
+  searchEmoji,
+  pushRecentEmoji,
+  recentEmojiKey,
+  loadRecentEmoji,
+  saveRecentEmoji,
+  insertAtSelection,
+  RECENT_EMOJI_MAX,
+  type EmojiCategoryId,
+  type EmojiEntry,
+} from "./emoji";
+export { ChatAccessError, type ChatAccessErrorProps } from "./access-error";
+export { ChatAutoRetry, useChatAutoRetry, isOnline, type ChatAutoRetryOptions, type AppStateLike } from "./auto-retry";
+export { ChatVideoRecorder, type ChatVideoRecorderProps } from "./video-recorder";
+export { videoRecorderStep, initialVideoRecorder, recordingType, VIDEO_HOLD_MS, VIDEO_MIN_MS, type VideoRecorderState, type VideoRecorderEvent, type VideoRecorderEffect, type VideoRecorderPhase } from "./video-recorder-state";
+export { ChatVideoPlayer, videoState, videoSource, muxStreamUrl, muxPosterUrl, toggleVideo, fullScreenVideo, isVideoPlaying, usePlayingVideo, toggleVideoMute, cycleVideoRate, type ChatVideoPlayerProps, type ChatVideoState } from "./video-player";
+export { chunkedPut, fileSource, nextOffset, createVideoUploads, videoUploads, type VideoUploadError, type MintedUpload, useVideoUploads, recordedVideoFile, VIDEO_CHUNK_BYTES, type ByteSource, type ChunkedPutOptions, type RecordedVideo, type VideoUploadTask, type VideoUploads, type StartVideoInput, type OutboxSend } from "./video-upload";
+export { VideoUploadTray, type VideoUploadTrayProps } from "./video-upload-tray";
+export { ChatLinkPreviewCard, previewToShow, linkPreviewIds, openChatLink, linkHost, type ChatLinkPreviewCardProps } from "./link-preview";
+export { ChatAttachmentCard, splitCardAttachments, isOpenableHref, cardAction, type ChatAttachmentCardProps, type OpenAttachment } from "./attachment-cards";
+export { ChatNativeProvider, useChatNative, initials, type ChatNativeProviderProps, type ChatNativeContextValue, type ChatPerson } from "./context";
+export { chatNativeCopy, resolveChatCopy, fill, type ChatNativeCopy, type ChatNativeCopyOverrides } from "./copy";
+export {
+  composerReducer,
+  emptyComposer,
+  canSend,
+  composerDisabledReason,
+  toSend,
+  replyTargetFor,
+  filesFromAssets,
+  fileFromDataUri,
+  base64ToBytes,
+  draftKey,
+  clearDrafts,
+  loadDraft,
+  createDraftSaver,
+  memoryDraftStorage,
+  type ComposerAction,
+  type ComposerAttachment,
+  type ComposerDraft,
+  type ComposerState,
+  type ReplyTarget,
+} from "./composer-state";
+export { useChatComposer, type ChatComposerHandle } from "./use-composer";
+export {
+  recorderStep,
+  idleRecorder,
+  liveBars,
+  type RecorderConfig,
+  type RecorderEffect,
+  type RecorderEvent,
+  type RecorderPhase,
+  type RecorderState,
+  type RecorderNotice,
+} from "./recorder-machine";
+export { useVoiceRecorder, voiceNoteFile, type UseVoiceRecorderOptions } from "./use-voice-recorder";
+export { invertedRows, buildThreadRows, rowKey, type ThreadRow, type BuildRowsOptions } from "./rows";
+export { messageActionsFor, canReactTo, QUICK_REACTIONS, type MessageActionId, type MessageActionContext } from "./actions";
+export { createTusUpload, base64Utf8, TUS_CHUNK_BYTES, type TusUploadOptions } from "./tus";
+export {
+  CHAT_PUSH_CATEGORY,
+  CHAT_REPLY_ACTION,
+  CHAT_MARK_READ_ACTION,
+  chatPushCopy,
+  chatPath,
+  chatPushCategory,
+  chatNotificationActions,
+  registerChatNotificationActions,
+  conversationIdFromData,
+  replyClientId,
+  replyClientIdFor,
+  failedReply,
+  PUSH_REPLY_WAIT_MS,
+  handleChatPushResponse,
+  chatThreadMatch,
+  chatPushPayload,
+  type ChatPushCopy,
+  type ChatPushData,
+  type ChatPushPayload,
+  type ChatPushPayloadInput,
+  type ChatPushOutcome,
+  type ChatPushOutboxDeps,
+  type ChatPushResponseLike,
+  type NotificationCategoriesLike,
+} from "./push";
+export { haptic, type ChatNativeModules, type ExpoAudioLike, type ImagePickerLike, type HapticsLike, type ClipboardLike, type KeyboardAvoidingLike, type DraftStorageLike, type AudioPlayerLike, type AudioRecorderLike, type AudioStatusLike, type RecorderStateLike, type PickedAssetLike, type PickerResultLike, type HapticEvent, type ExpoCameraLike, type ExpoVideoLike, type WebBrowserLike, type ChunkFileLike, type VideoPlayerLike, type CameraViewHandleLike, type VideoViewHandleLike, type PermissionLike, type SharingLike, type MediaLibraryLike, type NetInfoLike } from "./modules";
+
+// Organising: topics, scheduled send, availability, broadcast, search and moderation.
+export { chatOrganiseCopy, type ChatOrganiseCopy } from "./organise-copy";
+export { ChatIconButton, type ChatIconButtonProps } from "./icon-button";
+export { ChatTopicBar, canManageTopics, topicClosedFor, topicMenuFor, checkTopicName, type ChatTopicBarProps, type TopicMenuAction } from "./topics";
+export {
+  ChatScheduleSheet,
+  ChatScheduledList,
+  ChatScheduledBar,
+  useScheduleSend,
+  scheduleInputFrom,
+  defaultScheduleAt,
+  withDay,
+  withTime,
+  type ChatScheduleSheetProps,
+  type ChatScheduledListProps,
+  type ChatScheduledBarProps,
+} from "./schedule-sheet";
+export {
+  ChatAvailabilityScreen,
+  ChatAwayLine,
+  useAwayLine,
+  awayLineFor,
+  defaultWeek,
+  weekFromHours,
+  hoursFromWeek,
+  sameTimeDays,
+  formFrom,
+  availabilityInput,
+  timeZones,
+  deviceTimeZone,
+  clockToDate,
+  dateToClock,
+  type ChatAvailabilityScreenProps,
+  type ChatAwayLineProps,
+  type AvailabilityForm,
+  type DayHours,
+  type WeekHours,
+} from "./availability";
+export { ChatBroadcastSheet, broadcastOutcome, broadcastRows, type ChatBroadcastSheetProps } from "./broadcast-sheet";
+export { ChatSearchScreen, SearchSnippet, snippetText, type ChatSearchScreenProps } from "./search-screen";
+export { ModerationMarker, moderationNote, moderationText, type ModerationNote } from "./moderation";
+export { useJumpToMessage, rowIndexOf, type JumpTarget, type UseJumpOptions } from "./use-jump";

package/src/native/link-preview.tsx

@@ -0,0 +1,104 @@
+/**
+ * @feat:chat
+ * A link's preview under its message, from `useLinkPreviews`: the site, the title and the
+ * description, all plain text the server fetched (Open Graph, never HTML). Tap to open: in an
+ * in-app browser with `modules.webBrowser` (expo-web-browser), else the system's (`Linking`).
+ * Only https links. The image shows only when the app turns on `linkPreviewImages`: fetching
+ * a page's og:image from the phone tells that site the reader's address, so by default the
+ * card has none and nothing is fetched. The thread screen reads that switch from `ChatProvider
+ * linkPreviewImages` once the provider has it (the chat owner's change); until then it is off.
+ */
+import { Linking, Pressable, View } from "react-native";
+import { NativeImage, NativeText } from "@marktiderman/genesis-ui-native/components";
+import { useThemeRoles } from "@marktiderman/genesis-ui-native/hooks";
+import { extractLinks, isHttpsUrl } from "../core/extras";
+import type { ChatLinkPreview, ChatMessage } from "../core/types";
+import { fill } from "./copy";
+import { useChatNative } from "./context";
+import { ON_TINT_FILL } from "./media-colors";
+import type { WebBrowserLike } from "./modules";
+
+/** The site a link is on, without `www.`. */
+export function linkHost(url: string): string {
+  try {
+    return new URL(url).hostname.replace(/^www\./, "");
+  } catch {
+    return url;
+  }
+}
+
+/** The preview a bubble shows: the first one the server fetched for a link in its text, https only. */
+export function previewToShow(previews: readonly ChatLinkPreview[] | undefined): ChatLinkPreview | null {
+  return previews?.find((p) => p.status === "ok" && isHttpsUrl(p.url)) ?? null;
+}
+
+/** The messages to ask previews for: shown (not deleted, not hidden by moderation), with a link. */
+export function linkPreviewIds(messages: readonly ChatMessage[]): string[] {
+  return messages.filter((m) => !m.deletedAt && m.moderation !== "hidden" && extractLinks(m.body).length > 0).map((m) => m.id);
+}
+
+/** Opens a link from chat: https only, in the in-app browser when there is one. */
+export async function openChatLink(url: string, webBrowser?: WebBrowserLike): Promise<boolean> {
+  if (!isHttpsUrl(url)) return false;
+  try {
+    if (webBrowser) await webBrowser.openBrowserAsync(url);
+    else await Linking.openURL(url);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+export interface ChatLinkPreviewCardProps {
+  preview: ChatLinkPreview;
+  /** On the tint bubble. */
+  mine?: boolean;
+  /** Show the og:image. Off by default: fetching it tells the site the reader's address. */
+  images?: boolean;
+  testID?: string;
+}
+
+export function ChatLinkPreviewCard({ preview, mine = false, images = false, testID = "chat-link-preview" }: ChatLinkPreviewCardProps) {
+  const { copy, modules } = useChatNative();
+  const colors = useThemeRoles();
+  if (preview.status !== "ok" || !isHttpsUrl(preview.url)) return null;
+  const host = linkHost(preview.url);
+  const site = preview.siteName?.trim() || host;
+  const title = preview.title?.trim() || host;
+  const image = images && isHttpsUrl(preview.imageUrl) ? preview.imageUrl : null;
+  const fg = mine ? "text-primary-foreground" : undefined;
+  return (
+    <Pressable
+      testID={testID}
+      accessibilityRole="link"
+      accessibilityLabel={fill(copy.linkPreview, { title, site })}
+      accessibilityHint={copy.openLink}
+      onPress={() => void openChatLink(preview.url, modules.webBrowser)}
+      style={{
+        marginTop: 2,
+        borderLeftWidth: 3,
+        borderLeftColor: mine ? colors.surface : colors.tint,
+        borderRadius: 10,
+        overflow: "hidden",
+        backgroundColor: mine ? ON_TINT_FILL : colors.groupedBackground,
+      }}
+    >
+      {image ? (
+        <NativeImage testID={`${testID}-image`} src={image} width={240} height={126} contentFit="cover" />
+      ) : null}
+      <View style={{ paddingHorizontal: 10, paddingVertical: 8, gap: 2 }}>
+        <NativeText preset="caption" numberOfLines={1} className={fg} style={mine ? { opacity: 0.8 } : { color: colors.secondaryLabel }}>
+          {site}
+        </NativeText>
+        <NativeText numberOfLines={2} className={fg} style={mine ? { fontWeight: "600", fontSize: 15 } : { fontWeight: "600", fontSize: 15, color: colors.label }}>
+          {title}
+        </NativeText>
+        {preview.description ? (
+          <NativeText preset="caption" numberOfLines={2} className={fg} style={mine ? { opacity: 0.85 } : { color: colors.secondaryLabel }}>
+            {preview.description}
+          </NativeText>
+        ) : null}
+      </View>
+    </Pressable>
+  );
+}

package/src/native/media-colors.ts

@@ -0,0 +1,15 @@
+/**
+ * @feat:chat
+ * Colors over a camera feed or a video frame, the same in light and dark mode: the picture
+ * behind them is what it is, so the theme roles (which follow the scheme) don't apply. Genesis
+ * has no "on media" role yet; these are the one place chat names them.
+ */
+export const ON_MEDIA = "#ffffff";
+export const MEDIA_BACKDROP = "#000000";
+export const MEDIA_FRAME = "#111111";
+/** Behind controls and labels laid over a picture. */
+export const MEDIA_SCRIM = "rgba(0,0,0,0.5)";
+export const MEDIA_SCRIM_LIGHT = "rgba(0,0,0,0.35)";
+/** A tint-bubble card's fill, over the tint. */
+export const ON_TINT_FILL = "rgba(255,255,255,0.16)";
+export const ON_TINT_FILL_STRONG = "rgba(255,255,255,0.2)";

package/src/native/media.tsx

@@ -0,0 +1,187 @@
+/**
+ * @feat:chat
+ * Pictures and files in a message: photos as a grid of NativeImage (expo-image
+ * when the app gave it) over signed links from `useFileUrls`, a local preview
+ * while one still uploads, a tap opening the full-screen viewer (photo-viewer.tsx); voice notes
+ * as VoiceNotePlayer; other files as a row with their name.
+ */
+import { Pressable, View, useWindowDimensions } from "react-native";
+import { NativeIcon, NativeImage, NativeText } from "@marktiderman/genesis-ui-native/components";
+import { useThemeRoles } from "@marktiderman/genesis-ui-native/hooks";
+import { formatDuration } from "../core/media";
+import type { AttachmentInput, ChatAttachment } from "../core/types";
+import { useChatNative } from "./context";
+import { ChatVideoPlayer } from "./video-player";
+import { VoiceNotePlayer } from "./voice-player";
+
+/** An attachment as the bubble draws it: from the server, or still on the phone. */
+export interface BubbleAttachment {
+  key: string;
+  kind: string;
+  /** What to show now: a signed URL, or the local preview. */
+  uri: string | null;
+  name: string | null;
+  width: number | null;
+  height: number | null;
+  durationMs: number | null;
+  waveform: number[] | null;
+  thumbhash: string | null;
+  /** A hosted video: who hosts it, its playback id once processed, and whether it is ready. */
+  provider?: string | null;
+  playbackId?: string | null;
+  status?: "pending" | "ready" | "failed" | null;
+  posterUri?: string | null;
+  /** Still on its way from this phone. */
+  uploading?: boolean;
+}
+
+export function fromServer(a: ChatAttachment, urls: Record<string, string>): BubbleAttachment {
+  return {
+    key: a.id,
+    kind: a.kind,
+    uri: (a.path ? urls[a.path] : null) ?? a.url ?? null,
+    name: a.name,
+    width: a.width,
+    height: a.height,
+    durationMs: a.durationMs,
+    waveform: a.waveform,
+    thumbhash: a.thumbhash,
+    provider: a.provider,
+    playbackId: a.playbackId,
+    status: a.status,
+    posterUri: a.posterPath ? (urls[a.posterPath] ?? null) : null,
+  };
+}
+
+export function fromPending(
+  clientId: string,
+  index: number,
+  file: { name: string; contentType: string; meta?: Partial<AttachmentInput> },
+  preview: string | undefined,
+): BubbleAttachment {
+  const kind = file.meta?.kind ?? (file.contentType.startsWith("image/") ? "image" : file.contentType.startsWith("audio/") ? "voice" : "file");
+  return {
+    key: `${clientId}:${index}`,
+    kind,
+    uri: preview ?? null,
+    name: file.name,
+    width: file.meta?.width ?? null,
+    height: file.meta?.height ?? null,
+    durationMs: file.meta?.durationMs ?? null,
+    waveform: file.meta?.waveform ?? null,
+    thumbhash: null,
+    provider: file.meta?.provider ?? null,
+    uploading: true,
+  };
+}
+
+/** An attachment a pending message already carries (a hosted video, uploaded before it was queued). */
+export function fromPendingInput(clientId: string, index: number, a: AttachmentInput): BubbleAttachment {
+  return {
+    key: `${clientId}:input:${index}`,
+    kind: a.kind,
+    uri: a.url ?? null,
+    name: a.name ?? null,
+    width: a.width ?? null,
+    height: a.height ?? null,
+    durationMs: a.durationMs ?? null,
+    waveform: a.waveform ?? null,
+    thumbhash: a.thumbhash ?? null,
+    provider: a.provider ?? null,
+    status: a.status ?? null,
+  };
+}
+
+/** The paths a set of messages needs signed links for. */
+export function attachmentPaths(attachments: readonly ChatAttachment[]): string[] {
+  const out: string[] = [];
+  for (const a of attachments) {
+    if (a.path && a.provider === "storage") out.push(a.path);
+    if (a.posterPath) out.push(a.posterPath);
+  }
+  return out;
+}
+
+export interface AttachmentsProps {
+  attachments: BubbleAttachment[];
+  mine: boolean;
+  onOpenImage?: (uri: string, alt: string) => void;
+  testID: string;
+}
+
+export function MessageAttachments({ attachments, mine, onOpenImage, testID }: AttachmentsProps) {
+  const { copy, modules } = useChatNative();
+  const colors = useThemeRoles();
+  const { width: screen } = useWindowDimensions();
+  const images = attachments.filter((a) => a.kind === "image");
+  const others = attachments.filter((a) => a.kind !== "image");
+  const max = Math.min(260, Math.round(screen * 0.66));
+  return (
+    <View style={{ gap: 6 }}>
+      {images.length ? (
+        <View style={{ flexDirection: "row", flexWrap: "wrap", gap: 4, maxWidth: max, justifyContent: mine ? "flex-end" : "flex-start" }}>
+          {images.map((a, i) => {
+            const single = images.length === 1;
+            const ratio = a.width && a.height ? a.width / a.height : 1;
+            const w = single ? max : Math.floor((max - 4) / 2);
+            const h = single ? Math.round(Math.max(120, Math.min(max * 1.3, w / ratio))) : w;
+            const alt = a.name ? `${copy.photo}, ${a.name}` : copy.photo;
+            return (
+              <Pressable
+                key={a.key}
+                testID={`${testID}-image-${i}`}
+                accessibilityRole="imagebutton"
+                accessibilityLabel={alt}
+                accessibilityHint={copy.openImage}
+                disabled={!a.uri || !onOpenImage}
+                onPress={() => a.uri && onOpenImage?.(a.uri, alt)}
+                style={{ borderRadius: 14, overflow: "hidden" }}
+              >
+                {a.uri ? (
+                  <NativeImage src={a.uri} width={w} height={h} placeholder={a.thumbhash ? { thumbhash: a.thumbhash } : undefined} recyclingKey={a.key} />
+                ) : (
+                  <View style={{ width: w, height: h, backgroundColor: colors.fill }} />
+                )}
+              </Pressable>
+            );
+          })}
+        </View>
+      ) : null}
+      {others.map((a, i) =>
+        a.kind === "voice" ? (
+          <VoiceNotePlayer key={a.key} id={a.key} uri={a.uri} durationMs={a.durationMs} waveform={a.waveform} mine={mine} testID={`${testID}-voice-${i}`} />
+        ) : a.kind === "video" && modules.video ? (
+          <ChatVideoPlayer
+            key={a.key}
+            id={a.key}
+            uri={a.uri}
+            playbackId={a.playbackId}
+            posterUri={a.posterUri}
+            provider={a.provider}
+            status={a.status}
+            durationMs={a.durationMs}
+            width={a.width}
+            height={a.height}
+            uploading={a.uploading}
+            testID={`${testID}-video-${i}`}
+          />
+        ) : (
+          <View
+            key={a.key}
+            testID={`${testID}-file-${i}`}
+            accessible
+            accessibilityLabel={`${a.kind === "video" ? copy.video : copy.file}, ${a.name ?? ""}${a.durationMs ? `, ${formatDuration(a.durationMs)}` : ""}`}
+            style={{ flexDirection: "row", alignItems: "center", gap: 8, minHeight: 44 }}
+          >
+            <NativeIcon name={a.kind === "video" ? "play" : "file"} size={20} color={mine ? colors.surface : colors.secondaryLabel} />
+            <NativeText numberOfLines={1} className={mine ? "text-primary-foreground" : undefined} style={{ flexShrink: 1, fontSize: 15 }}>
+              {a.name ?? (a.kind === "video" ? copy.video : copy.file)}
+            </NativeText>
+          </View>
+        ),
+      )}
+    </View>
+  );
+}
+
+// ChatMediaViewer (one picture) is in photo-viewer.tsx, over the full-screen ChatPhotoViewer.

package/src/native/message-actions-sheet.tsx

@@ -0,0 +1,121 @@
+/**
+ * @feat:chat
+ * The long-press sheet: a row of quick reactions and "+" for every emoji
+ * (the picker takes the sheet's place), then Reply, Copy, Pin or
+ * Unpin, and Delete (confirmed), offered per `messageActionsFor`. Each runs
+ * through `useMessageActions`; a refusal from the server is a toast.
+ */
+import { useEffect, useState } from "react";
+import { Alert, Pressable, View } from "react-native";
+import { NativeIcon, NativeListItem, NativeSheet, NativeText, type NativeIconName } from "@marktiderman/genesis-ui-native/components";
+import { useThemeRoles } from "@marktiderman/genesis-ui-native/hooks";
+import { previewText, summarizeReactions } from "../core/thread";
+import type { ChatMessage } from "../core/types";
+import { QUICK_REACTIONS, canReactTo, messageActionsFor, type MessageActionContext, type MessageActionId } from "./actions";
+import { fill } from "./copy";
+import { useChatNative } from "./context";
+import { ChatEmojiPicker } from "./emoji-picker";
+
+export interface MessageActionsSheetProps {
+  message: ChatMessage | null;
+  context: MessageActionContext;
+  onClose: () => void;
+  onReact: (message: ChatMessage, emoji: string, on: boolean) => void;
+  onAction: (message: ChatMessage, action: MessageActionId) => void;
+  testID?: string;
+}
+
+const ICONS: Record<MessageActionId, NativeIconName> = { reply: "reply", copy: "copy", pin: "pin", unpin: "pin", delete: "trash" };
+
+export function MessageActionsSheet({ message, context, onClose, onReact, onAction, testID = "chat-message-actions" }: MessageActionsSheetProps) {
+  const { copy } = useChatNative();
+  const colors = useThemeRoles();
+  const actions = message ? messageActionsFor(message, context) : [];
+  const mineReactions = new Set(message ? summarizeReactions(message, context.me).filter((r) => r.mine).map((r) => r.emoji) : []);
+  const labels: Record<MessageActionId, string> = { reply: copy.reply, copy: copy.copy, pin: copy.pin, unpin: copy.unpin, delete: copy.delete };
+  // "+" swaps the sheet's content for the full picker (iOS can't present a second sheet over this one).
+  const [picking, setPicking] = useState(false);
+  useEffect(() => {
+    if (!message) setPicking(false);
+  }, [message]);
+
+  const run = (action: MessageActionId) => {
+    if (!message) return;
+    if (action === "delete") {
+      Alert.alert(copy.deleteConfirm, undefined, [
+        { text: copy.delete, style: "destructive", onPress: () => onAction(message, "delete") },
+        { text: copy.cancel, style: "cancel" },
+      ]);
+      onClose();
+      return;
+    }
+    onClose();
+    onAction(message, action);
+  };
+
+  return (
+    <NativeSheet open={message !== null} onOpenChange={(open) => (open ? undefined : onClose())} testID={testID}>
+      {message && picking ? (
+        <View style={{ paddingHorizontal: 16 }}>
+        <ChatEmojiPicker
+          userId={context.me}
+          testID={`${testID}-picker`}
+          onSelect={(emoji) => {
+            onClose();
+            onReact(message, emoji, !mineReactions.has(emoji));
+          }}
+        />
+        </View>
+      ) : message ? (
+        <View style={{ gap: 12, paddingBottom: 8, paddingHorizontal: 16 }}>
+          <NativeText numberOfLines={2} preset="body-sm" style={{ color: colors.secondaryLabel, paddingHorizontal: 4 }}>
+            {previewText(message.body, message.attachments[0]?.kind, Boolean(message.deletedAt))}
+          </NativeText>
+          {canReactTo(message, context) ? (
+            <View accessibilityRole="toolbar" style={{ flexDirection: "row", justifyContent: "space-between" }}>
+              {QUICK_REACTIONS.map((emoji) => {
+                const on = mineReactions.has(emoji);
+                return (
+                  <Pressable
+                    key={emoji}
+                    testID={`${testID}-react-${emoji}`}
+                    accessibilityRole="button"
+                    accessibilityState={{ selected: on }}
+                    accessibilityLabel={fill(copy.react, { emoji })}
+                    onPress={() => {
+                      onClose();
+                      onReact(message, emoji, !on);
+                    }}
+                    style={{ width: 48, height: 48, borderRadius: 24, alignItems: "center", justifyContent: "center", backgroundColor: on ? colors.fill : undefined }}
+                  >
+                    <NativeText style={{ fontSize: 26, lineHeight: 34 }}>{emoji}</NativeText>
+                  </Pressable>
+                );
+              })}
+              <Pressable
+                testID={`${testID}-react-more`}
+                accessibilityRole="button"
+                accessibilityLabel={copy.moreReactions}
+                onPress={() => setPicking(true)}
+                style={{ width: 48, height: 48, borderRadius: 24, alignItems: "center", justifyContent: "center", backgroundColor: colors.fill }}
+              >
+                <NativeIcon name="plus" size={22} color={colors.secondaryLabel} />
+              </Pressable>
+            </View>
+          ) : null}
+          <View>
+            {actions.map((action) => (
+              <NativeListItem
+                key={action}
+                testID={`${testID}-${action}`}
+                title={labels[action]}
+                leading={<NativeIcon name={ICONS[action]} size={20} color={action === "delete" ? colors.destructive : colors.label} />}
+                onPress={() => run(action)}
+              />
+            ))}
+          </View>
+        </View>
+      ) : null}
+    </NativeSheet>
+  );
+}