@q9labsai/chalk-react-native 4.1.17 → 5.0.1

package/src/components/Chalk.tsx

@@ -1,363 +0,0 @@
-import type { ChatUploadFile, ClientEventMap, FeedbackEvidenceInput, GetAccess, SpaceClient } from "@q9labsai/chalk-client";
-import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from "react";
-import { Pressable, StyleSheet, Text, View } from "react-native";
-
-import { ChalkProvider, useSpaceClient } from "../context/space-client-context";
-import { useConnection } from "../hooks/space-hooks";
-import { createNativeSpaceClient } from "../space-client/create-native-space-client";
-import { NativeAppearanceProvider, NativeTextureOverlay, useNativeAppearance } from "../ui/native-appearance-context";
-import { type ThemePalette, type ThemeTexture } from "../ui/appearance";
-import { NativeThemeProvider, useNativeTheme } from "../ui/native-theme";
-import { DEFAULT_CHALK_THEME_TOKENS } from "../ui/theme-tokens";
-import { SpaceView } from "./SpaceView";
-import { Entrance, type EntranceDefaults } from "./Entrance";
-
-export type ChalkFeatures = {
-  readonly chat?: boolean;
-  readonly participants?: boolean;
-  readonly admission?: boolean;
-  readonly screenShare?: boolean;
-  readonly whiteboard?: boolean;
-  readonly reactions?: boolean;
-  readonly handRaise?: boolean;
-  readonly info?: boolean;
-  readonly settings?: boolean;
-};
-
-export const CHALK_THEME_TOKENS = DEFAULT_CHALK_THEME_TOKENS;
-
-export type ChalkThemeTokens = {
-  readonly [Token in keyof typeof CHALK_THEME_TOKENS]: string;
-};
-
-export type ChalkTheme = {
-  readonly colorScheme?: "dark" | "light";
-  readonly palette?: ThemePalette;
-  readonly texture?: ThemeTexture;
-  readonly accent?: string;
-  readonly tokens?: Partial<ChalkThemeTokens>;
-};
-
-export type SpaceLayout = "grid" | "focus" | "presentation";
-
-type ChalkCallbacks = {
-  readonly onJoined?: () => void;
-  readonly onLeft?: () => void;
-  readonly onEpisodeEnded?: (event: ClientEventMap["episodeEnded"]) => void;
-  readonly onParticipantJoined?: (event: ClientEventMap["participantJoined"]) => void;
-  readonly onParticipantLeft?: (event: ClientEventMap["participantLeft"]) => void;
-  readonly onScreenShareStarted?: (event: ClientEventMap["screenShareStarted"]) => void;
-  readonly onScreenShareStopped?: (event: ClientEventMap["screenShareStopped"]) => void;
-  readonly onError?: (event: ClientEventMap["error"]) => void;
-};
-
-type ChalkCommonProps = ChalkCallbacks & {
-  readonly displayName?: string;
-  readonly entrance?: boolean;
-  readonly defaults?: EntranceDefaults;
-  readonly features?: ChalkFeatures;
-  readonly theme?: ChalkTheme;
-  /** Selects files; the SDK owns bounds, upload, and send sequencing. */
-  readonly pickChatFiles?: () => Promise<readonly ChatUploadFile[]>;
-  readonly logoUrl?: string;
-  readonly spaceName?: string;
-  readonly inviteLink?: string;
-  readonly layout?: SpaceLayout;
-  readonly onLayoutChange?: (layout: SpaceLayout) => void;
-  readonly onOpenDiagnostics?: () => void;
-  readonly feedbackEvidence?: Partial<FeedbackEvidenceInput>;
-};
-
-export type ChalkProps = ChalkCommonProps &
-  (
-    | {
-        readonly client: SpaceClient;
-        readonly space?: never;
-        readonly getAccess?: never;
-      }
-    | {
-        readonly client?: never;
-        readonly space: string;
-        readonly getAccess: GetAccess;
-      }
-  );
-
-export function Chalk(props: ChalkProps): React.JSX.Element {
-  const suppliedClient = props.client;
-  const space = props.space;
-  const getAccess = props.getAccess;
-  const getAccessRef = useRef(getAccess);
-  getAccessRef.current = getAccess;
-  const defaults = useRef(props.defaults).current;
-  const getLatestAccess = useCallback((...args: Parameters<GetAccess>): ReturnType<GetAccess> => {
-    const currentGetAccess = getAccessRef.current;
-    if (!currentGetAccess) throw new Error("Chalk requires getAccess when it creates the SpaceClient.");
-    return currentGetAccess(...args);
-  }, []);
-  const ownedClient = useMemo(
-    () =>
-      suppliedClient
-        ? null
-        : createNativeSpaceClient({
-            space: space!,
-            getAccess: getLatestAccess,
-            microphone: defaults?.microphone,
-            camera: defaults?.camera,
-          }),
-    [getLatestAccess, space, suppliedClient],
-  );
-  const client = suppliedClient ?? ownedClient!;
-
-  useEffect(() => {
-    if (!ownedClient) return;
-    return () => {
-      void ownedClient
-        .leave()
-        .catch(() => undefined)
-        .finally(() => ownedClient.dispose());
-    };
-  }, [ownedClient]);
-
-  return (
-    <NativeAppearanceProvider initialAppearance={{ palette: props.theme?.palette, texture: props.theme?.texture }}>
-      <AppearanceThemeBridge theme={props.theme}>
-        <ChalkProvider client={client}>
-          <SpaceExperience {...props} />
-        </ChalkProvider>
-      </AppearanceThemeBridge>
-    </NativeAppearanceProvider>
-  );
-}
-
-function AppearanceThemeBridge({ children, theme }: { readonly children: ReactNode; readonly theme?: ChalkTheme }): React.JSX.Element {
-  const { appearance } = useNativeAppearance();
-  return (
-    <NativeThemeProvider appearance={appearance} theme={theme}>
-      {children}
-    </NativeThemeProvider>
-  );
-}
-
-function SpaceExperience(props: ChalkProps): React.JSX.Element {
-  const client = useSpaceClient();
-  const connection = useConnection();
-  const previousStatus = useRef(connection.status);
-  const hasObservedStatus = useRef(false);
-  const hasBeenLive = useRef(connection.status === "live" || connection.status === "reconnecting");
-  const autoJoinAttempted = useRef(false);
-  const previousClient = useRef(client);
-  const [joinError, setJoinError] = useState<string | null>(null);
-
-  if (previousClient.current !== client) {
-    previousClient.current = client;
-    previousStatus.current = connection.status;
-    hasObservedStatus.current = false;
-    hasBeenLive.current = connection.status === "live" || connection.status === "reconnecting";
-    autoJoinAttempted.current = false;
-  }
-
-  const entrance = props.entrance ?? true;
-  const spaceName = props.spaceName ?? props.space ?? "Space";
-  const join = useCallback(
-    async (options: Parameters<SpaceClient["join"]>[0]) => {
-      try {
-        setJoinError(null);
-        await client.join(options);
-      } catch (cause) {
-        setJoinError(cause instanceof Error ? cause.message : "Could not enter this Space.");
-      }
-    },
-    [client],
-  );
-  const retryAutomaticJoin = useCallback(() => {
-    autoJoinAttempted.current = true;
-    void join(defaultJoinOptions(props));
-  }, [join, props]);
-
-  useEffect(() => {
-    setJoinError(null);
-  }, [client]);
-
-  useEffect(() => {
-    const subscriptions = [
-      props.onEpisodeEnded && client.on("episodeEnded", props.onEpisodeEnded),
-      props.onParticipantJoined && client.on("participantJoined", props.onParticipantJoined),
-      props.onParticipantLeft && client.on("participantLeft", props.onParticipantLeft),
-      props.onScreenShareStarted && client.on("screenShareStarted", props.onScreenShareStarted),
-      props.onScreenShareStopped && client.on("screenShareStopped", props.onScreenShareStopped),
-      props.onError && client.on("error", props.onError),
-    ].filter((unsubscribe): unsubscribe is () => void => Boolean(unsubscribe));
-    return () => subscriptions.forEach((unsubscribe) => unsubscribe());
-  }, [client, props.onEpisodeEnded, props.onError, props.onParticipantJoined, props.onParticipantLeft, props.onScreenShareStarted, props.onScreenShareStopped]);
-
-  useEffect(() => {
-    if (!entrance && connection.status === "idle" && !autoJoinAttempted.current) {
-      autoJoinAttempted.current = true;
-      void join(defaultJoinOptions(props));
-    }
-  }, [connection.status, entrance, join, props.defaults?.camera, props.defaults?.microphone, props.displayName]);
-
-  useEffect(() => {
-    const previous = previousStatus.current;
-    if (hasObservedStatus.current) {
-      if (connection.status === "live" && previous !== "live" && previous !== "reconnecting") props.onJoined?.();
-      if (connection.status === "left" && previous !== "left") props.onLeft?.();
-    }
-    previousStatus.current = connection.status;
-    hasObservedStatus.current = true;
-    if (connection.status === "live" || connection.status === "reconnecting") hasBeenLive.current = true;
-  }, [connection.status, props.onJoined, props.onLeft]);
-
-  if (connection.status === "idle" && entrance) {
-    return (
-      <AppearanceLayer>
-        <Entrance defaultDisplayName={props.displayName} defaults={props.defaults} error={joinError ?? undefined} logoUrl={props.logoUrl} onJoin={join} spaceName={spaceName} />
-      </AppearanceLayer>
-    );
-  }
-
-  if (connection.status === "idle") {
-    return (
-      <AppearanceLayer>
-        <SpaceStatus message={joinError ?? `Entering ${spaceName}…`} onRetry={joinError ? retryAutomaticJoin : undefined} />
-      </AppearanceLayer>
-    );
-  }
-
-  if (connection.status === "joining") {
-    if (!entrance)
-      return (
-        <AppearanceLayer>
-          <SpaceStatus message={`Entering ${spaceName}…`} />
-        </AppearanceLayer>
-      );
-    return (
-      <AppearanceLayer>
-        <Entrance defaultDisplayName={props.displayName} defaults={props.defaults} joining logoUrl={props.logoUrl} onJoin={join} spaceName={spaceName} />
-      </AppearanceLayer>
-    );
-  }
-
-  if (connection.status === "failed") {
-    if (!hasBeenLive.current && entrance) {
-      return (
-        <AppearanceLayer>
-          <Entrance defaultDisplayName={props.displayName} defaults={props.defaults} error={connection.lastError?.message ?? "Unable to enter this Space."} logoUrl={props.logoUrl} onJoin={join} spaceName={spaceName} />
-        </AppearanceLayer>
-      );
-    }
-    return (
-      <AppearanceLayer>
-        <SpaceStatus message={connection.lastError?.message ?? "This Space is unavailable."} onRetry={() => void join(defaultJoinOptions(props))} />
-      </AppearanceLayer>
-    );
-  }
-
-  if (connection.status === "leaving")
-    return (
-      <AppearanceLayer>
-        <SpaceStatus message={`Leaving ${spaceName}…`} />
-      </AppearanceLayer>
-    );
-  if (connection.status === "left")
-    return (
-      <AppearanceLayer>
-        <SpaceStatus message="You have left this Space." onRetry={() => void join(defaultJoinOptions(props))} />
-      </AppearanceLayer>
-    );
-
-  return (
-    <NativeSpaceView
-      features={props.features}
-      inviteLink={props.inviteLink}
-      layout={props.layout}
-      logoUrl={props.logoUrl}
-      onLayoutChange={props.onLayoutChange}
-      onOpenDiagnostics={props.onOpenDiagnostics}
-      feedbackEvidence={props.feedbackEvidence}
-      pickChatFiles={props.pickChatFiles}
-      reconnecting={connection.status === "reconnecting"}
-      spaceName={spaceName}
-    />
-  );
-}
-
-function defaultJoinOptions(props: ChalkProps): Parameters<SpaceClient["join"]>[0] {
-  const displayName = props.displayName?.trim();
-  return {
-    ...(displayName ? { displayName } : {}),
-    microphone: props.defaults?.microphone ?? true,
-    camera: props.defaults?.camera ?? true,
-  };
-}
-
-type NativeSpaceViewProps = {
-  readonly features?: ChalkFeatures;
-  readonly inviteLink?: string;
-  readonly layout?: SpaceLayout;
-  readonly logoUrl?: string;
-  readonly onLayoutChange?: (layout: SpaceLayout) => void;
-  readonly onOpenDiagnostics?: () => void;
-  readonly feedbackEvidence?: Partial<FeedbackEvidenceInput>;
-  readonly pickChatFiles?: () => Promise<readonly ChatUploadFile[]>;
-  readonly reconnecting: boolean;
-  readonly spaceName: string;
-};
-
-function NativeSpaceView({ features, inviteLink, layout, logoUrl, onLayoutChange, onOpenDiagnostics, feedbackEvidence, pickChatFiles, reconnecting, spaceName }: NativeSpaceViewProps): React.JSX.Element {
-  const client = useSpaceClient();
-  const theme = useNativeTheme();
-
-  return (
-    <View style={[styles.space, { backgroundColor: theme.colors.background }]}>
-      <SpaceView
-        features={features}
-        inviteLink={inviteLink}
-        layout={layout}
-        logoUrl={logoUrl}
-        onEndEpisode={() => client.endEpisode()}
-        onLayoutChange={onLayoutChange}
-        onLeave={() => client.leave()}
-        onOpenDiagnostics={onOpenDiagnostics}
-        feedbackEvidence={feedbackEvidence}
-        pickChatFiles={pickChatFiles}
-        reconnecting={reconnecting}
-        spaceName={spaceName}
-      />
-      <NativeTextureOverlay />
-    </View>
-  );
-}
-
-function AppearanceLayer({ children }: { readonly children: ReactNode }): React.JSX.Element {
-  const theme = useNativeTheme();
-  return (
-    <View style={[styles.appearanceLayer, { backgroundColor: theme.colors.background }]}>
-      {children}
-      <NativeTextureOverlay />
-    </View>
-  );
-}
-
-function SpaceStatus({ message, onRetry }: { readonly message: string; readonly onRetry?: () => void }): React.JSX.Element {
-  const theme = useNativeTheme();
-  return (
-    <View accessibilityLiveRegion="polite" style={[styles.status, { backgroundColor: theme.colors.background }]}>
-      <Text style={[styles.statusText, { color: theme.colors.foreground }]}>{message}</Text>
-      {onRetry ? (
-        <Pressable accessibilityRole="button" onPress={onRetry} style={[styles.retry, { backgroundColor: theme.colors.primary }]}>
-          <Text style={[styles.retryText, { color: theme.colors.primaryForeground }]}>Try again</Text>
-        </Pressable>
-      ) : null}
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  space: { flex: 1 },
-  appearanceLayer: { flex: 1 },
-  status: { flex: 1, alignItems: "center", justifyContent: "center", gap: 16, padding: 24 },
-  statusText: { fontSize: 16, textAlign: "center" },
-  retry: { borderRadius: 12, paddingHorizontal: 18, paddingVertical: 12 },
-  retryText: { fontWeight: "800" },
-});

package/src/components/ChatMessageList.tsx

@@ -1,209 +0,0 @@
-import type { NativeChatMessage as ChatMessage } from "../ui/native-types";
-import { useCallback, useRef } from "react";
-import { type LayoutChangeEvent, type NativeScrollEvent, type NativeSyntheticEvent, ScrollView, StyleSheet, Text, type StyleProp, View, type ViewStyle } from "react-native";
-import { Theme } from "../ui/theme";
-import { formatChatAttachmentSize, isLatestChatMessageVisible, type NativeChatViewport } from "./native-chat";
-
-export interface ChatMessageListProps {
-  readonly messages: readonly ChatMessage[];
-  readonly localParticipantId: string | null;
-  readonly onLatestMessageVisible: (sequence: string) => void;
-  readonly style?: StyleProp<ViewStyle>;
-  readonly contentContainerStyle?: StyleProp<ViewStyle>;
-}
-
-export function ChatMessageList({ messages, localParticipantId, onLatestMessageVisible, style, contentContainerStyle }: ChatMessageListProps): React.JSX.Element {
-  const latestSequence = messages.at(-1)?.sequence ?? null;
-  const viewport = useRef<NativeChatViewport>({ contentHeight: 0, viewportHeight: 0, scrollOffset: 0 });
-  const renderedSequence = useRef<string | null>(null);
-  const measuredSequence = useRef<string | null>(null);
-  const reportedSequence = useRef<string | null>(null);
-
-  if (renderedSequence.current !== latestSequence) {
-    renderedSequence.current = latestSequence;
-    measuredSequence.current = null;
-  }
-
-  const reportLatestIfVisible = useCallback(() => {
-    if (!latestSequence || measuredSequence.current !== latestSequence || reportedSequence.current === latestSequence) return;
-    if (!isLatestChatMessageVisible(viewport.current)) return;
-    reportedSequence.current = latestSequence;
-    onLatestMessageVisible(latestSequence);
-  }, [latestSequence, onLatestMessageVisible]);
-
-  const handleLayout = useCallback(
-    (event: LayoutChangeEvent) => {
-      viewport.current = { ...viewport.current, viewportHeight: event.nativeEvent.layout.height };
-      reportLatestIfVisible();
-    },
-    [reportLatestIfVisible],
-  );
-
-  const handleContentSizeChange = useCallback(
-    (_width: number, height: number) => {
-      viewport.current = { ...viewport.current, contentHeight: height };
-      measuredSequence.current = latestSequence;
-      reportLatestIfVisible();
-    },
-    [latestSequence, reportLatestIfVisible],
-  );
-
-  const handleScroll = useCallback(
-    (event: NativeSyntheticEvent<NativeScrollEvent>) => {
-      const { contentOffset, contentSize, layoutMeasurement } = event.nativeEvent;
-      viewport.current = {
-        contentHeight: contentSize.height,
-        viewportHeight: layoutMeasurement.height,
-        scrollOffset: contentOffset.y,
-      };
-      measuredSequence.current = latestSequence;
-      reportLatestIfVisible();
-    },
-    [latestSequence, reportLatestIfVisible],
-  );
-
-  return (
-    <ScrollView accessibilityLabel="Chat messages" contentContainerStyle={[styles.content, contentContainerStyle]} onContentSizeChange={handleContentSizeChange} onLayout={handleLayout} onScroll={handleScroll} scrollEventThrottle={16} showsVerticalScrollIndicator={false} style={style}>
-      {messages.length === 0 ? (
-        <View style={styles.emptyState}>
-          <Text style={styles.emptyTitle}>No messages yet.</Text>
-          <Text style={styles.emptyText}>Send a message to start the conversation.</Text>
-        </View>
-      ) : null}
-      {messages.map((message) => {
-        const isLocal = message.senderId === localParticipantId;
-        const readByNames = message.readBy.map((receipt) => receipt.displayName);
-        const status = readByNames.length > 0 ? `Read by ${readByNames.join(", ")}` : "Sent";
-
-        return (
-          <View key={message.id} style={[styles.messageGroup, isLocal && styles.localMessageGroup]}>
-            {!isLocal ? <Text style={styles.sender}>{message.senderName}</Text> : null}
-            <View style={[styles.bubble, isLocal ? styles.localBubble : styles.remoteBubble]}>
-              {message.content ? <Text style={styles.messageText}>{message.content}</Text> : null}
-              {message.attachments.map((attachment) => {
-                const isImage = attachment.mimeType.startsWith("image/");
-                return (
-                  <View accessibilityLabel={`${isImage ? "Image" : "File"} attachment ${attachment.fileName}, ${formatChatAttachmentSize(attachment.byteLength)}`} key={attachment.attachmentId} style={styles.attachment}>
-                    <Text style={styles.attachmentKind}>{isImage ? "IMAGE" : "FILE"}</Text>
-                    <View style={styles.attachmentMetadata}>
-                      <Text numberOfLines={1} style={styles.attachmentName}>
-                        {attachment.fileName}
-                      </Text>
-                      <Text style={styles.attachmentDetails}>
-                        {formatChatAttachmentSize(attachment.byteLength)} · {attachment.mimeType}
-                      </Text>
-                    </View>
-                  </View>
-                );
-              })}
-            </View>
-            {isLocal ? (
-              <Text accessibilityLabel={status} numberOfLines={1} style={[styles.status, readByNames.length > 0 && styles.readStatus]}>
-                {status}
-              </Text>
-            ) : null}
-          </View>
-        );
-      })}
-    </ScrollView>
-  );
-}
-
-const styles = StyleSheet.create({
-  content: {
-    gap: 12,
-  },
-  emptyState: {
-    flex: 1,
-    minHeight: 160,
-    alignItems: "center",
-    justifyContent: "center",
-    paddingHorizontal: 24,
-  },
-  emptyTitle: {
-    color: Theme.colors.onDark,
-    fontSize: 15,
-    fontWeight: "700",
-  },
-  emptyText: {
-    color: Theme.colors.mutedForeground,
-    fontSize: 12,
-    marginTop: 6,
-    textAlign: "center",
-  },
-  messageGroup: {
-    alignSelf: "flex-start",
-    gap: 5,
-    maxWidth: "85%",
-  },
-  localMessageGroup: {
-    alignSelf: "flex-end",
-    alignItems: "flex-end",
-  },
-  sender: {
-    color: Theme.colors.mutedForeground,
-    fontSize: 11,
-    fontWeight: "700",
-    paddingHorizontal: 4,
-  },
-  bubble: {
-    borderRadius: 18,
-    maxWidth: "100%",
-    paddingHorizontal: 14,
-    paddingVertical: 10,
-  },
-  localBubble: {
-    backgroundColor: Theme.colors.primary,
-    borderBottomRightRadius: 6,
-  },
-  remoteBubble: {
-    backgroundColor: Theme.colors.whiteOverlay06,
-    borderBottomLeftRadius: 6,
-  },
-  messageText: {
-    color: Theme.colors.onDark,
-    fontSize: 14,
-    lineHeight: 20,
-  },
-  attachment: {
-    alignItems: "center",
-    backgroundColor: Theme.colors.darkOverlay16,
-    borderColor: Theme.colors.whiteOverlay16,
-    borderRadius: 10,
-    borderWidth: 1,
-    flexDirection: "row",
-    gap: 10,
-    marginTop: 8,
-    minWidth: 190,
-    padding: 10,
-  },
-  attachmentKind: {
-    color: Theme.colors.whiteOverlay72,
-    fontSize: 9,
-    fontWeight: "800",
-    letterSpacing: 0.6,
-  },
-  attachmentMetadata: {
-    flex: 1,
-    minWidth: 0,
-  },
-  attachmentName: {
-    color: Theme.colors.onDark,
-    fontSize: 13,
-    fontWeight: "700",
-  },
-  attachmentDetails: {
-    color: Theme.colors.whiteOverlay68,
-    fontSize: 10,
-    marginTop: 2,
-  },
-  status: {
-    color: Theme.colors.mutedForeground,
-    fontSize: 10,
-    maxWidth: 240,
-    paddingHorizontal: 4,
-  },
-  readStatus: {
-    color: Theme.colors.primary,
-  },
-});

package/src/components/Entrance.tsx

@@ -1,42 +0,0 @@
-import { EntranceView } from "./EntranceView";
-import { Image } from "react-native";
-import { Logo } from "./logo/Logo";
-
-export type EntranceDefaults = {
-  readonly microphone?: boolean;
-  readonly camera?: boolean;
-};
-
-export type EntranceSettings = {
-  readonly displayName: string;
-  readonly microphone: boolean;
-  readonly camera: boolean;
-};
-
-export type EntranceProps = {
-  readonly spaceName: string;
-  readonly logoUrl?: string;
-  readonly defaultDisplayName?: string;
-  readonly defaults?: EntranceDefaults;
-  readonly error?: string;
-  readonly joining?: boolean;
-  readonly onCancel?: () => void;
-  readonly onJoin: (settings: EntranceSettings) => void | Promise<void>;
-};
-
-/** The native implementation owns the device preview lifecycle and disposal. */
-export function Entrance({ spaceName, logoUrl, defaultDisplayName, defaults, error, joining = false, onCancel, onJoin }: EntranceProps): React.JSX.Element {
-  return (
-    <EntranceView
-      error={error}
-      initialAudioEnabled={defaults?.microphone ?? true}
-      initialVideoEnabled={defaults?.camera ?? true}
-      joinDisabled={joining}
-      logo={logoUrl ? <Image accessibilityLabel="Chalk" source={{ uri: logoUrl }} style={{ height: 32, width: 120 }} /> : <Logo height={32} variant="wordmark" />}
-      onCancel={onCancel}
-      onJoin={({ displayName, microphoneEnabled, cameraEnabled }) => void onJoin({ displayName, microphone: microphoneEnabled, camera: cameraEnabled })}
-      spaceName={spaceName}
-      displayName={defaultDisplayName}
-    />
-  );
-}