@q9labsai/chalk-react-native 4.1.17 → 5.0.1

package/src/components/native-space-view/SettingsSheet.tsx

@@ -1,164 +0,0 @@
-import CheckmarkCircle01Icon from "@hugeicons/core-free-icons/dist/esm/CheckmarkCircle01Icon";
-import Mic01Icon from "@hugeicons/core-free-icons/dist/esm/Mic01Icon";
-import MicOff01Icon from "@hugeicons/core-free-icons/dist/esm/MicOff01Icon";
-import Speaker01Icon from "@hugeicons/core-free-icons/dist/esm/Speaker01Icon";
-import Video01Icon from "@hugeicons/core-free-icons/dist/esm/Video01Icon";
-import VideoOffIcon from "@hugeicons/core-free-icons/dist/esm/VideoOffIcon";
-import { HugeiconsIcon } from "@hugeicons/react-native";
-import { useEffect, useState } from "react";
-import { Modal, Platform, Pressable, ScrollView, StyleSheet, Text, View } from "react-native";
-
-import { Theme } from "../../ui/theme";
-import { CloseButton, IconTile, SheetGrip } from "./SpaceSurfacePrimitives";
-import type { SpaceController } from "./space-progressive-surface-types";
-import { AppearanceSettings } from "./AppearanceSettings";
-
-type SettingsTab = "devices" | "appearance" | "space";
-
-export function SettingsSheet({ controller, isOpen, onClose }: { readonly controller: SpaceController; readonly isOpen: boolean; readonly onClose: () => void }): React.JSX.Element {
-  const [tab, setTab] = useState<SettingsTab>("devices");
-
-  useEffect(() => {
-    if (!isOpen) setTab("devices");
-  }, [isOpen]);
-
-  return (
-    <Modal animationType="slide" onRequestClose={onClose} transparent visible={isOpen}>
-      <View style={styles.modalRoot}>
-        <Pressable accessibilityLabel="Close Settings" onPress={onClose} style={styles.backdrop} />
-        <View style={styles.sheet}>
-          <SheetGrip />
-          <View style={styles.header}>
-            <Text style={styles.title}>Settings</Text>
-            <CloseButton label="Close Settings" onPress={onClose} />
-          </View>
-          <View accessibilityRole="tablist" style={styles.tabs}>
-            {(["devices", "appearance", "space"] as const).map((nextTab) => (
-              <Pressable accessibilityRole="tab" accessibilityState={{ selected: tab === nextTab }} key={nextTab} onPress={() => setTab(nextTab)} style={({ pressed }) => [styles.tab, tab === nextTab && styles.tabSelected, pressed && styles.pressed]}>
-                <Text style={[styles.tabText, tab === nextTab && styles.tabTextSelected]}>{nextTab[0]!.toUpperCase() + nextTab.slice(1)}</Text>
-              </Pressable>
-            ))}
-          </View>
-          <ScrollView contentContainerStyle={styles.content} showsVerticalScrollIndicator={false}>
-            {tab === "devices" ? <DevicesSettings controller={controller} /> : null}
-            {tab === "appearance" ? <AppearanceSettings /> : null}
-            {tab === "space" ? <SpaceSettings controller={controller} /> : null}
-          </ScrollView>
-          <Pressable accessibilityRole="button" onPress={onClose} style={({ pressed }) => [styles.doneButton, pressed && styles.pressed]}>
-            <Text style={styles.doneText}>Done</Text>
-          </Pressable>
-        </View>
-      </View>
-    </Modal>
-  );
-}
-
-function DevicesSettings({ controller }: { readonly controller: SpaceController }): React.JSX.Element {
-  const microphoneEnabled = !controller.isMuted;
-  const cameraEnabled = !controller.isCameraOff;
-  return (
-    <View style={styles.section}>
-      <Text style={styles.sectionIntro}>Use the controls below to set what you share in this Episode.</Text>
-      <DeviceControl disabled={controller.simulatorMediaDisabled} enabled={microphoneEnabled} icon={microphoneEnabled ? Mic01Icon : MicOff01Icon} label="Microphone" onPress={controller.toggleAudio} value={microphoneEnabled ? "On" : "Off"} />
-      <DeviceControl disabled={controller.simulatorMediaDisabled} enabled={cameraEnabled} icon={cameraEnabled ? Video01Icon : VideoOffIcon} label="Camera" onPress={controller.toggleVideo} value={cameraEnabled ? "On" : "Off"} />
-      <View style={styles.deviceRow}>
-        <IconTile icon={Speaker01Icon} />
-        <View style={styles.rowCopy}>
-          <Text style={styles.rowLabel}>Speaker</Text>
-          <Text style={styles.rowMeta}>System audio output</Text>
-        </View>
-        <Text style={styles.rowValue}>Automatic</Text>
-      </View>
-      <View style={styles.readyCard}>
-        <HugeiconsIcon color={Theme.colors.success} icon={CheckmarkCircle01Icon} size={22} />
-        <Text style={styles.readyText}>{controller.simulatorMediaDisabled ? "Device controls are unavailable here" : "Devices are ready"}</Text>
-      </View>
-    </View>
-  );
-}
-
-function DeviceControl({ disabled, enabled, icon, label, onPress, value }: { readonly disabled: boolean; readonly enabled: boolean; readonly icon: React.ComponentProps<typeof HugeiconsIcon>["icon"]; readonly label: string; readonly onPress: () => void; readonly value: string }): React.JSX.Element {
-  return (
-    <Pressable accessibilityLabel={`${label} ${value}`} accessibilityRole="button" disabled={disabled} onPress={onPress} style={({ pressed }) => [styles.deviceRow, disabled && styles.disabled, pressed && styles.pressed]}>
-      <IconTile icon={icon} color={enabled ? Theme.colors.ink : Theme.colors.error} wash={enabled ? Theme.colors.surface : Theme.colors.washPink} />
-      <View style={styles.rowCopy}>
-        <Text style={styles.rowLabel}>{label}</Text>
-        <Text style={styles.rowMeta}>{disabled ? "Unavailable on this device" : "Tap to change state"}</Text>
-      </View>
-      <Text style={[styles.rowValue, !enabled && styles.valueOff]}>{value}</Text>
-    </Pressable>
-  );
-}
-
-function SpaceSettings({ controller }: { readonly controller: SpaceController }): React.JSX.Element {
-  return (
-    <View style={styles.section}>
-      <Text style={styles.sectionIntro}>Canonical information about this Space and its current Episode.</Text>
-      <InfoRow label="Space" value="Current Space" />
-      <InfoRow label="Episode" value={controller.formattedDuration} />
-      <InfoRow label="People" value={String(controller.participantCount)} />
-      <View style={styles.infoCard}>
-        <Text style={styles.infoTitle}>Space content stays here</Text>
-        <Text style={styles.infoText}>Chat and Board content belong to this Space and remain available across Episodes.</Text>
-      </View>
-    </View>
-  );
-}
-
-function InfoRow({ label, value }: { readonly label: string; readonly value: string }): React.JSX.Element {
-  return (
-    <View style={styles.infoRow}>
-      <Text style={styles.rowLabel}>{label}</Text>
-      <Text numberOfLines={1} style={styles.infoValue}>
-        {value || "—"}
-      </Text>
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  modalRoot: { flex: 1, justifyContent: "flex-end" },
-  backdrop: { ...StyleSheet.absoluteFillObject, backgroundColor: Theme.colors.darkOverlay22 },
-  sheet: {
-    backgroundColor: Theme.colors.surface,
-    borderColor: Theme.colors.line,
-    borderTopLeftRadius: Theme.radius.xl,
-    borderTopRightRadius: Theme.radius.xl,
-    elevation: 8,
-    flex: 1,
-    marginTop: 72,
-    overflow: "hidden",
-    paddingBottom: Platform.OS === "ios" ? Theme.spacing.md : Theme.spacing.xs,
-    shadowColor: Theme.colors.ink,
-    shadowOffset: { height: -8, width: 0 },
-    shadowOpacity: 0.12,
-    shadowRadius: 22,
-  },
-  header: { alignItems: "center", borderBottomColor: Theme.colors.line, borderBottomWidth: 1, flexDirection: "row", justifyContent: "space-between", minHeight: 78, paddingHorizontal: Theme.spacing.lg },
-  title: { ...Theme.typography.heading, color: Theme.colors.ink },
-  tabs: { backgroundColor: Theme.colors.paper2, borderColor: Theme.colors.line, borderRadius: Theme.radius.md, borderWidth: 1, flexDirection: "row", margin: Theme.spacing.lg, padding: 3 },
-  tab: { alignItems: "center", borderRadius: Theme.radius.sm, flex: 1, justifyContent: "center", minHeight: 46, paddingHorizontal: Theme.spacing.sm },
-  tabSelected: { backgroundColor: Theme.colors.surface, ...Theme.shadows.sm },
-  tabText: { color: Theme.colors.ink2, fontSize: 14, fontWeight: "500" },
-  tabTextSelected: { color: Theme.colors.ink, fontWeight: "700" },
-  content: { paddingBottom: Theme.spacing.lg, paddingHorizontal: Theme.spacing.lg },
-  section: { gap: Theme.spacing.md },
-  sectionIntro: { ...Theme.typography.body, color: Theme.colors.ink2, marginBottom: Theme.spacing.sm },
-  deviceRow: { alignItems: "center", borderColor: Theme.colors.line, borderRadius: Theme.radius.md, borderWidth: 1, flexDirection: "row", gap: Theme.spacing.md, minHeight: 70, padding: Theme.spacing.md },
-  rowCopy: { flex: 1, minWidth: 0 },
-  rowLabel: { color: Theme.colors.ink, fontSize: 16, fontWeight: "600" },
-  rowMeta: { color: Theme.colors.ink2, fontSize: 13, lineHeight: 18, marginTop: 3 },
-  rowValue: { color: Theme.colors.success, fontSize: 14, fontWeight: "700" },
-  valueOff: { color: Theme.colors.error },
-  readyCard: { alignItems: "center", backgroundColor: Theme.colors.successBackground, borderColor: Theme.colors.line, borderRadius: Theme.radius.md, borderWidth: 1, flexDirection: "row", gap: Theme.spacing.sm, minHeight: 58, paddingHorizontal: Theme.spacing.md },
-  readyText: { color: Theme.colors.ink2, fontSize: 15, fontWeight: "600" },
-  disabled: { opacity: 0.52 },
-  infoRow: { alignItems: "center", borderBottomColor: Theme.colors.line, borderBottomWidth: 1, flexDirection: "row", justifyContent: "space-between", minHeight: 54, paddingHorizontal: Theme.spacing.sm },
-  infoValue: { color: Theme.colors.ink2, flexShrink: 1, fontSize: 15, marginLeft: Theme.spacing.md, maxWidth: "62%", textAlign: "right" },
-  infoCard: { backgroundColor: Theme.colors.washBlue, borderColor: Theme.colors.line, borderRadius: Theme.radius.md, borderWidth: 1, gap: Theme.spacing.sm, marginTop: Theme.spacing.sm, padding: Theme.spacing.md },
-  infoTitle: { color: Theme.colors.ink, fontSize: 15, fontWeight: "700" },
-  infoText: { color: Theme.colors.ink2, fontSize: 14, lineHeight: 20 },
-  doneButton: { alignItems: "center", borderColor: Theme.colors.lineStrong, borderRadius: Theme.radius.md, borderWidth: 1, justifyContent: "center", margin: Theme.spacing.lg, minHeight: 52 },
-  doneText: { color: Theme.colors.ink, fontSize: 16, fontWeight: "700" },
-  pressed: { opacity: 0.72, transform: [{ scale: 0.985 }] },
-});

package/src/components/native-space-view/SpaceActionMenu.tsx

@@ -1,109 +0,0 @@
-import type { Reaction } from "@q9labsai/chalk-client";
-import { Modal, Pressable, StyleSheet, Text, View } from "react-native";
-
-import { Theme } from "../../ui/theme";
-import { useNativeTheme } from "../../ui/native-theme";
-import type { useSpaceViewController } from "./useSpaceViewController";
-
-type Controller = ReturnType<typeof useSpaceViewController>;
-
-export function SpaceActionMenu({ controller, onOpenDiagnostics, onOpenFeedback }: { readonly controller: Controller; readonly onOpenDiagnostics?: () => void; readonly onOpenFeedback?: () => void }): React.JSX.Element {
-  const theme = useNativeTheme();
-  const actions: { label: string; onPress: () => void; disabled?: boolean }[] = [
-    ...(controller.canInvite ? [{ label: "Invite participants", onPress: controller.handleInviteParticipants }] : []),
-    ...(controller.canParticipants ? [{ label: "Participants", onPress: () => controller.openPanel("participants") }] : []),
-    ...(controller.canChat ? [{ label: "Chat", onPress: () => controller.openPanel("chat") }] : []),
-    ...(controller.canScreenShare ? [{ label: controller.screenShare.isLocalSharing ? "Stop presenting" : "Present screen", onPress: controller.toggleScreenShare }] : []),
-    ...(controller.canHandRaise ? [{ label: controller.handRaised ? "Lower hand" : "Raise hand", onPress: controller.toggleHand }] : []),
-    ...(controller.canWhiteboard ? [{ label: controller.whiteboard.isOpen ? "Close whiteboard" : "Open whiteboard", onPress: controller.whiteboard.toggle }] : []),
-    ...(controller.canReactions
-      ? [
-          {
-            label: "Reactions",
-            onPress: () => {
-              controller.setActionsOpen(false);
-              controller.setReactionPickerOpen(true);
-            },
-          },
-        ]
-      : []),
-    ...(controller.canManageRecording
-      ? [
-          {
-            label: controller.recording?.status === "recording" ? "Stop recording" : "Start recording",
-            disabled: !controller.canToggleRecording,
-            onPress: controller.toggleRecording,
-          },
-        ]
-      : []),
-    ...(controller.canSettings ? [{ label: "Settings", onPress: () => controller.openPanel("settings") }] : []),
-    ...(onOpenDiagnostics
-      ? [
-          {
-            label: "Diagnostics",
-            onPress: () => {
-              controller.setActionsOpen(false);
-              onOpenDiagnostics();
-            },
-          },
-        ]
-      : []),
-    ...(onOpenFeedback
-      ? [
-          {
-            label: "Feedback",
-            onPress: () => {
-              controller.setActionsOpen(false);
-              onOpenFeedback();
-            },
-          },
-        ]
-      : []),
-    ...(["grid", "focus", "presentation"] as const).map((layout) => ({
-      label: `${layout === "grid" ? "Grid" : layout === "focus" ? "Focus" : "Presentation"} layout${controller.layout.layout === layout ? " (selected)" : ""}`,
-      onPress: () => {
-        controller.layout.setLayout(layout);
-        controller.setActionsOpen(false);
-      },
-    })),
-  ];
-  return (
-    <Modal animationType="slide" onRequestClose={() => controller.setActionsOpen(false)} transparent visible={controller.actionsOpen}>
-      <Pressable onPress={() => controller.setActionsOpen(false)} style={styles.backdrop}>
-        <View style={[styles.sheet, { backgroundColor: theme.colors.background }]}>
-          <Text style={[styles.title, { color: theme.colors.foreground }]}>Space actions</Text>
-          {actions.map((action) => (
-            <Pressable accessibilityRole="button" accessibilityState={{ disabled: action.disabled ?? false }} disabled={action.disabled} key={action.label} onPress={action.onPress} style={({ pressed }) => [styles.action, { backgroundColor: theme.colors.card }, pressed && styles.pressed]}>
-              <Text style={[styles.actionText, { color: theme.colors.foreground }]}>{action.label}</Text>
-            </Pressable>
-          ))}
-          <Pressable onPress={controller.handleLeave} style={[styles.action, styles.dangerAction, { backgroundColor: theme.colors.card, borderColor: theme.colors.error }]}>
-            <Text style={[styles.actionText, styles.dangerText, { color: theme.colors.error }]}>Leave space</Text>
-          </Pressable>
-        </View>
-      </Pressable>
-    </Modal>
-  );
-}
-
-export function selectSpaceReaction(controller: Controller, reaction: string): void {
-  controller.sendReaction(reaction as Reaction);
-}
-
-const styles = StyleSheet.create({
-  backdrop: { flex: 1, justifyContent: "flex-end", backgroundColor: Theme.colors.darkOverlay55 },
-  sheet: {
-    gap: 8,
-    borderTopLeftRadius: 24,
-    borderTopRightRadius: 24,
-    backgroundColor: Theme.colors.background,
-    padding: 24,
-    paddingBottom: 40,
-  },
-  title: { ...Theme.typography.title, color: Theme.colors.foreground },
-  action: { borderRadius: 14, backgroundColor: Theme.colors.card, padding: 16 },
-  actionText: { color: Theme.colors.foreground, fontSize: 16, fontWeight: "600" },
-  dangerAction: { marginTop: 8, borderWidth: 1, borderColor: Theme.colors.error },
-  dangerText: { color: Theme.colors.error, fontWeight: "700" },
-  pressed: { opacity: 0.65 },
-});

package/src/components/native-space-view/SpaceBottomDock.android.tsx

@@ -1,115 +0,0 @@
-import CallEnd01Icon from "@hugeicons/core-free-icons/dist/esm/CallEnd01Icon";
-import Chat01Icon from "@hugeicons/core-free-icons/dist/esm/Chat01Icon";
-import Mic01Icon from "@hugeicons/core-free-icons/dist/esm/Mic01Icon";
-import MicOff01Icon from "@hugeicons/core-free-icons/dist/esm/MicOff01Icon";
-import MoreHorizontalIcon from "@hugeicons/core-free-icons/dist/esm/MoreHorizontalIcon";
-import Video01Icon from "@hugeicons/core-free-icons/dist/esm/Video01Icon";
-import VideoOffIcon from "@hugeicons/core-free-icons/dist/esm/VideoOffIcon";
-import { HugeiconsIcon } from "@hugeicons/react-native";
-import { Platform, Pressable, StyleSheet, Text, View } from "react-native";
-import { Theme } from "../../ui/theme";
-import { useNativeTheme } from "../../ui/native-theme";
-
-import type { SpaceBottomDockProps } from "./types";
-
-export function SpaceBottomDockAndroid({ simulatorMediaDisabled, isMuted, isCameraOff, unreadChatCount, onToggleAudio, onToggleVideo, onOpenChat, onOpenMore, onLeave }: SpaceBottomDockProps): React.JSX.Element {
-  const theme = useNativeTheme();
-  return (
-    <View style={[styles.bottomDock, { backgroundColor: theme.colors.darkCanvas, borderColor: theme.colors.border }]}>
-      <View style={styles.controlPill}>
-        <Pressable
-          disabled={simulatorMediaDisabled}
-          onPress={onToggleAudio}
-          style={({ pressed }) => [styles.controlButton, { backgroundColor: isMuted ? theme.colors.error : theme.colors.controlsBackground }, simulatorMediaDisabled && styles.controlButtonDisabled, pressed && styles.controlButtonPressed]}
-        >
-          <HugeiconsIcon color={isMuted ? theme.colors.onDark : theme.colors.primary} icon={isMuted ? MicOff01Icon : Mic01Icon} size={22} />
-        </Pressable>
-        <Pressable
-          disabled={simulatorMediaDisabled}
-          onPress={onToggleVideo}
-          style={({ pressed }) => [styles.controlButton, { backgroundColor: isCameraOff ? theme.colors.error : theme.colors.controlsBackground }, simulatorMediaDisabled && styles.controlButtonDisabled, pressed && styles.controlButtonPressed]}
-        >
-          <HugeiconsIcon color={isCameraOff ? theme.colors.onDark : theme.colors.primary} icon={isCameraOff ? VideoOffIcon : Video01Icon} size={22} />
-        </Pressable>
-        {onOpenChat ? (
-          <Pressable onPress={onOpenChat} style={({ pressed }) => [styles.controlButton, { backgroundColor: theme.colors.controlsBackground }, pressed && styles.controlButtonPressed]}>
-            <HugeiconsIcon color={theme.colors.onDark} icon={Chat01Icon} size={22} />
-            {unreadChatCount > 0 ? (
-              <View style={[styles.controlBadge, { backgroundColor: theme.colors.primary, borderColor: theme.colors.darkCanvas }]}>
-                <Text style={[styles.controlBadgeText, { color: theme.colors.primaryForeground }]}>{unreadChatCount > 9 ? "9+" : String(unreadChatCount)}</Text>
-              </View>
-            ) : null}
-          </Pressable>
-        ) : null}
-        <Pressable onPress={onOpenMore} style={({ pressed }) => [styles.controlButton, { backgroundColor: theme.colors.controlsBackground }, pressed && styles.controlButtonPressed]}>
-          <HugeiconsIcon color={theme.colors.onDark} icon={MoreHorizontalIcon} size={22} />
-        </Pressable>
-        <Pressable onPress={onLeave} style={({ pressed }) => [styles.controlButton, styles.controlButtonEndCall, { backgroundColor: theme.colors.error }, pressed && styles.controlButtonPressed]}>
-          <HugeiconsIcon color={theme.colors.onDark} icon={CallEnd01Icon} size={22} />
-        </Pressable>
-      </View>
-    </View>
-  );
-}
-
-export { SpaceBottomDockAndroid as SpaceBottomDock };
-
-const styles = StyleSheet.create({
-  bottomDock: {
-    paddingTop: 20,
-    paddingBottom: Platform.OS === "ios" ? 38 : 24,
-    paddingHorizontal: 24,
-    backgroundColor: Theme.colors.darkCanvas,
-    borderTopWidth: 1,
-    borderColor: Theme.colors.whiteOverlay06,
-    width: "100%",
-  },
-  controlPill: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    width: "100%",
-  },
-  controlButton: {
-    width: 48,
-    height: 48,
-    borderRadius: 24,
-    alignItems: "center",
-    justifyContent: "center",
-    backgroundColor: Theme.colors.whiteOverlay08,
-  },
-  controlButtonDisabled: {
-    opacity: 0.45,
-  },
-  controlButtonPressed: {
-    opacity: 0.7,
-    transform: [{ scale: 0.92 }],
-  },
-  controlButtonDanger: {
-    backgroundColor: Theme.colors.dangerStrong,
-  },
-  controlButtonEndCall: {
-    backgroundColor: Theme.colors.error,
-    width: 68,
-    borderRadius: 18,
-  },
-  controlBadge: {
-    position: "absolute",
-    top: -2,
-    right: -2,
-    minWidth: 18,
-    height: 18,
-    borderRadius: 9,
-    backgroundColor: Theme.colors.primary,
-    alignItems: "center",
-    justifyContent: "center",
-    paddingHorizontal: 4,
-    borderWidth: 2,
-    borderColor: Theme.colors.darkCanvas,
-  },
-  controlBadgeText: {
-    color: Theme.colors.onDark,
-    fontSize: 10,
-    fontWeight: "800",
-  },
-});

package/src/components/native-space-view/SpaceChatAttachment.tsx

@@ -1,105 +0,0 @@
-import type { ChatAttachment } from "@q9labsai/chalk-client";
-import { useEffect, useState } from "react";
-import { Image, Pressable, StyleSheet, Text, View } from "react-native";
-
-import { Theme } from "../../ui/theme";
-
-export function SpaceChatAttachment({ attachment, isLocal, onOpen, resolveUrl }: { readonly attachment: ChatAttachment; readonly isLocal: boolean; readonly onOpen: (attachmentId: string) => void; readonly resolveUrl: (attachmentId: string) => Promise<string | null> }): React.JSX.Element {
-  const isImage = attachment.mimeType.startsWith("image/");
-  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
-  const [previewFailed, setPreviewFailed] = useState(false);
-  const [retryGeneration, setRetryGeneration] = useState(0);
-
-  useEffect(() => {
-    if (!isImage || previewUrl || previewFailed) return;
-    let cancelled = false;
-    void resolveUrl(attachment.attachmentId).then(
-      (url) => {
-        if (cancelled) return;
-        if (!url) {
-          reportAttachmentPreviewFailure(attachment.attachmentId, "resolve");
-          setPreviewFailed(true);
-          return;
-        }
-        setPreviewUrl(url);
-        setPreviewFailed(false);
-      },
-      () => {
-        if (cancelled) return;
-        reportAttachmentPreviewFailure(attachment.attachmentId, "resolve");
-        setPreviewFailed(true);
-      },
-    );
-    return () => {
-      cancelled = true;
-    };
-  }, [attachment.attachmentId, isImage, previewFailed, previewUrl, resolveUrl, retryGeneration]);
-
-  if (!isImage) {
-    return (
-      <Pressable accessibilityRole="link" onPress={() => onOpen(attachment.attachmentId)} style={({ pressed }) => [styles.attachmentLink, pressed && styles.pressed]}>
-        <Text numberOfLines={1} style={[styles.attachment, isLocal && styles.localText]}>
-          {attachment.fileName}
-        </Text>
-      </Pressable>
-    );
-  }
-
-  if (previewFailed) {
-    return (
-      <View style={styles.previewError}>
-        <Text accessibilityLiveRegion="polite" style={[styles.previewErrorText, isLocal && styles.localText]}>
-          Image preview unavailable
-        </Text>
-        <Pressable
-          accessibilityLabel={`Retry preview for ${attachment.fileName}`}
-          accessibilityRole="button"
-          style={styles.retryButton}
-          onPress={() => {
-            setPreviewFailed(false);
-            setPreviewUrl(null);
-            setRetryGeneration((current) => current + 1);
-          }}
-        >
-          <Text style={[styles.retry, isLocal && styles.localText]}>Retry preview</Text>
-        </Pressable>
-      </View>
-    );
-  }
-
-  if (!previewUrl) return <Text style={[styles.previewLoading, isLocal && styles.localText]}>Loading {attachment.fileName}…</Text>;
-
-  return (
-    <Pressable accessibilityLabel={`Open ${attachment.fileName}`} accessibilityRole="imagebutton" onPress={() => onOpen(attachment.attachmentId)} style={({ pressed }) => [styles.imagePreviewButton, pressed && styles.pressed]}>
-      <Image
-        accessibilityLabel={attachment.fileName}
-        onError={() => {
-          reportAttachmentPreviewFailure(attachment.attachmentId, "render");
-          setPreviewFailed(true);
-          setPreviewUrl(null);
-        }}
-        resizeMode="cover"
-        source={{ uri: previewUrl }}
-        style={styles.imagePreview}
-      />
-    </Pressable>
-  );
-}
-
-function reportAttachmentPreviewFailure(attachmentId: string, operation: "render" | "resolve"): void {
-  console.warn("Chat attachment preview unavailable.", { attachmentId, operation });
-}
-
-const styles = StyleSheet.create({
-  attachmentLink: { justifyContent: "center", marginTop: 4, maxWidth: "100%", minHeight: 32 },
-  attachment: { color: Theme.colors.information, fontSize: 14 },
-  imagePreviewButton: { borderRadius: Theme.radius.sm, marginTop: Theme.spacing.sm, maxWidth: "100%", overflow: "hidden" },
-  imagePreview: { height: 160, width: 240 },
-  previewLoading: { color: Theme.colors.ink2, fontSize: 13, marginTop: Theme.spacing.sm },
-  previewError: { borderColor: Theme.colors.line, borderRadius: Theme.radius.sm, borderWidth: 1, marginTop: Theme.spacing.sm, width: 240, maxWidth: "100%", minHeight: 160, justifyContent: "center", alignItems: "center", padding: Theme.spacing.md },
-  previewErrorText: { color: Theme.colors.ink2, fontSize: 13 },
-  retryButton: { minHeight: 44, justifyContent: "center", paddingHorizontal: Theme.spacing.sm },
-  retry: { color: Theme.colors.information, fontSize: 13, fontWeight: "700", marginTop: 6 },
-  localText: { color: Theme.colors.surface },
-  pressed: { opacity: 0.72, transform: [{ scale: 0.98 }] },
-});