@kesha-antonov/react-native-chat 5.0.1 → 6.0.1

package/lib/components/ChatEmpty.js

@@ -0,0 +1,125 @@
+import { c as _c } from "react/compiler-runtime";
+import React from 'react';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+import { useLabels } from '../hooks/useLabels';
+import { useThemedStyles } from '../hooks/useTheme';
+/**
+ * The empty chat: a service-colored card in the middle of
+ * the wallpaper with "No messages here yet..." in bold, a line of help below it, and a greeting
+ * sticker that sends itself when tapped. Without a sticker of the app's own, the waving hand
+ * stands in for it.
+ */
+export function ChatEmpty(t0) {
+  const $ = _c(22);
+  const {
+    greeting: t1,
+    onPressGreeting
+  } = t0;
+  const greeting = t1 === undefined ? "\uD83D\uDC4B" : t1;
+  const styles = useThemedStyles(createStyles);
+  const labels = useLabels();
+  let t2;
+  if ($[0] !== styles.text || $[1] !== styles.title) {
+    t2 = [styles.text, styles.title];
+    $[0] = styles.text;
+    $[1] = styles.title;
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  let t3;
+  if ($[3] !== labels.emptyChatTitle || $[4] !== t2) {
+    t3 = <Text style={t2}>{labels.emptyChatTitle}</Text>;
+    $[3] = labels.emptyChatTitle;
+    $[4] = t2;
+    $[5] = t3;
+  } else {
+    t3 = $[5];
+  }
+  let t4;
+  if ($[6] !== greeting || $[7] !== labels.emptyChatText || $[8] !== styles.text) {
+    t4 = !!greeting && <Text style={styles.text}>{labels.emptyChatText}</Text>;
+    $[6] = greeting;
+    $[7] = labels.emptyChatText;
+    $[8] = styles.text;
+    $[9] = t4;
+  } else {
+    t4 = $[9];
+  }
+  let t5;
+  if ($[10] !== greeting || $[11] !== labels.send || $[12] !== onPressGreeting || $[13] !== styles.greeting || $[14] !== styles.sticker || $[15] !== styles.stickerPressed) {
+    t5 = !!greeting && <Pressable onPress={() => onPressGreeting?.(greeting)} disabled={!onPressGreeting} accessibilityRole="button" accessibilityLabel={`${labels.send} ${greeting}`} style={t6 => {
+      const {
+        pressed
+      } = t6;
+      return [styles.sticker, pressed && styles.stickerPressed];
+    }}><Text style={styles.greeting} allowFontScaling={false}>{greeting}</Text></Pressable>;
+    $[10] = greeting;
+    $[11] = labels.send;
+    $[12] = onPressGreeting;
+    $[13] = styles.greeting;
+    $[14] = styles.sticker;
+    $[15] = styles.stickerPressed;
+    $[16] = t5;
+  } else {
+    t5 = $[16];
+  }
+  let t6;
+  if ($[17] !== styles.card || $[18] !== t3 || $[19] !== t4 || $[20] !== t5) {
+    t6 = <View style={styles.card} testID="chat-empty">{t3}{t4}{t5}</View>;
+    $[17] = styles.card;
+    $[18] = t3;
+    $[19] = t4;
+    $[20] = t5;
+    $[21] = t6;
+  } else {
+    t6 = $[21];
+  }
+  return t6;
+}
+
+// The greeting card: 8 padding on top; title and description 14dp (the title bold) in
+// the service text color, 20 from the sides and 6 above and below each; a 112dp sticker 10 below
+// them and 16 from the bottom; the card is the service color with radius 16.
+const createStyles = theme => StyleSheet.create({
+  card: {
+    alignSelf: 'center',
+    maxWidth: 260,
+    paddingTop: 8,
+    borderRadius: 16,
+    backgroundColor: theme.colors.dayPillBackground,
+    alignItems: 'center'
+  },
+  text: {
+    marginHorizontal: 20,
+    marginVertical: 6,
+    fontSize: 14,
+    lineHeight: 18,
+    textAlign: 'center',
+    color: theme.colors.dayPillText
+  },
+  title: {
+    fontWeight: '700'
+  },
+  sticker: {
+    width: 112,
+    height: 112,
+    marginTop: 10,
+    marginBottom: 16,
+    marginHorizontal: 16,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  // The greeting sticker shrinks a little while pressed.
+  stickerPressed: {
+    transform: [{
+      scale: 0.9
+    }]
+  },
+  greeting: {
+    fontSize: 80,
+    lineHeight: 96,
+    textAlign: 'center'
+  }
+});
+//# sourceMappingURL=ChatEmpty.js.map

package/lib/components/ChatEmpty.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatEmpty.js","names":["React","Pressable","StyleSheet","Text","View","useLabels","useThemedStyles","ChatEmpty","t0","$","_c","greeting","t1","onPressGreeting","undefined","styles","createStyles","labels","t2","text","title","t3","emptyChatTitle","t4","emptyChatText","t5","send","sticker","stickerPressed","t6","pressed","card","theme","create","alignSelf","maxWidth","paddingTop","borderRadius","backgroundColor","colors","dayPillBackground","alignItems","marginHorizontal","marginVertical","fontSize","lineHeight","textAlign","color","dayPillText","fontWeight","width","height","marginTop","marginBottom","justifyContent","transform","scale"],"sources":["../../src/components/ChatEmpty.tsx"],"sourcesContent":["import React from 'react'\nimport { Pressable, StyleSheet, Text, View } from 'react-native'\n\nimport { useLabels } from '../hooks/useLabels'\nimport { useThemedStyles } from '../hooks/useTheme'\nimport { ChatTheme } from '../Theme'\n\nexport interface ChatEmptyProps {\n  /**\n   * The big greeting under the text, sent as a message when tapped. `null` leaves it out.\n   * @default '👋'\n   */\n  greeting?: string | null\n  /** Called with the greeting when it is tapped. */\n  onPressGreeting?: (greeting: string) => void\n}\n\n/**\n * The empty chat: a service-colored card in the middle of\n * the wallpaper with \"No messages here yet...\" in bold, a line of help below it, and a greeting\n * sticker that sends itself when tapped. Without a sticker of the app's own, the waving hand\n * stands in for it.\n */\nexport function ChatEmpty ({ greeting = '👋', onPressGreeting }: ChatEmptyProps) {\n  const styles = useThemedStyles(createStyles)\n  const labels = useLabels()\n\n  return (\n    <View style={styles.card} testID='chat-empty'>\n      <Text style={[styles.text, styles.title]}>{labels.emptyChatTitle}</Text>\n      {!!greeting && <Text style={styles.text}>{labels.emptyChatText}</Text>}\n      {!!greeting && (\n        <Pressable\n          onPress={() => onPressGreeting?.(greeting)}\n          disabled={!onPressGreeting}\n          accessibilityRole='button'\n          accessibilityLabel={`${labels.send} ${greeting}`}\n          style={({ pressed }) => [styles.sticker, pressed && styles.stickerPressed]}\n        >\n          <Text style={styles.greeting} allowFontScaling={false}>{greeting}</Text>\n        </Pressable>\n      )}\n    </View>\n  )\n}\n\n// The greeting card: 8 padding on top; title and description 14dp (the title bold) in\n// the service text color, 20 from the sides and 6 above and below each; a 112dp sticker 10 below\n// them and 16 from the bottom; the card is the service color with radius 16.\nconst createStyles = (theme: ChatTheme) => StyleSheet.create({\n  card: {\n    alignSelf: 'center',\n    maxWidth: 260,\n    paddingTop: 8,\n    borderRadius: 16,\n    backgroundColor: theme.colors.dayPillBackground,\n    alignItems: 'center',\n  },\n  text: {\n    marginHorizontal: 20,\n    marginVertical: 6,\n    fontSize: 14,\n    lineHeight: 18,\n    textAlign: 'center',\n    color: theme.colors.dayPillText,\n  },\n  title: {\n    fontWeight: '700',\n  },\n  sticker: {\n    width: 112,\n    height: 112,\n    marginTop: 10,\n    marginBottom: 16,\n    marginHorizontal: 16,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  // The greeting sticker shrinks a little while pressed.\n  stickerPressed: {\n    transform: [{ scale: 0.9 }],\n  },\n  greeting: {\n    fontSize: 80,\n    lineHeight: 96,\n    textAlign: 'center',\n  },\n})\n"],"mappings":"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","ignoreList":[]}

package/lib/components/ChatLoadingOverlay.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+/**
+ * The spinner grows from 0.3 and fades in over 150ms, and shrinks back out the same way, on an
+ * accelerate-decelerate curve.
+ */
+export declare const LOADING_OVERLAY_MS = 150;
+export declare function ChatLoadingOverlay({ isVisible }: {
+    isVisible: boolean;
+}): React.JSX.Element | null;
+//# sourceMappingURL=ChatLoadingOverlay.d.ts.map

package/lib/components/ChatLoadingOverlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatLoadingOverlay.d.ts","sourceRoot":"","sources":["../../src/components/ChatLoadingOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAazB;;;GAGG;AACH,eAAO,MAAM,kBAAkB,MAAM,CAAA;AAIrC,wBAAgB,kBAAkB,CAAE,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,EAAE,OAAO,CAAA;CAAE,4BA8BxE"}

package/lib/components/ChatLoadingOverlay.js

@@ -0,0 +1,89 @@
+import { c as _c } from "react/compiler-runtime";
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import Animated, { Easing, runOnJS, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
+import { useAnimatedPresence } from '../hooks/useAnimatedPresence';
+import { ServiceSpinner } from './ServiceSpinner';
+
+/**
+ * The spinner grows from 0.3 and fades in over 150ms, and shrinks back out the same way, on an
+ * accelerate-decelerate curve.
+ */
+export const LOADING_OVERLAY_MS = 150;
+const FROM_SCALE = 0.3;
+const ACCELERATE_DECELERATE = Easing.bezier(0.37, 0, 0.63, 1);
+export function ChatLoadingOverlay(t0) {
+  const $ = _c(7);
+  const {
+    isVisible
+  } = t0;
+  const progress = useSharedValue(0);
+  let t1;
+  let t2;
+  if ($[0] !== progress) {
+    t1 = () => {
+      progress.value = withTiming(1, {
+        duration: LOADING_OVERLAY_MS,
+        easing: ACCELERATE_DECELERATE
+      });
+    };
+    t2 = onDone => {
+      progress.value = withTiming(0, {
+        duration: LOADING_OVERLAY_MS,
+        easing: ACCELERATE_DECELERATE
+      }, finished => {
+        if (finished) {
+          runOnJS(onDone)();
+        }
+      });
+    };
+    $[0] = progress;
+    $[1] = t1;
+    $[2] = t2;
+  } else {
+    t1 = $[1];
+    t2 = $[2];
+  }
+  const {
+    isMounted
+  } = useAnimatedPresence(isVisible, t1, t2);
+  const style = useAnimatedStyle(() => ({
+    opacity: progress.value,
+    transform: [{
+      scale: FROM_SCALE + (1 - FROM_SCALE) * progress.value
+    }]
+  }));
+  if (!isMounted) {
+    return null;
+  }
+  let t3;
+  if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = [StyleSheet.absoluteFill, styles.center];
+    $[3] = t3;
+  } else {
+    t3 = $[3];
+  }
+  let t4;
+  if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+    t4 = <ServiceSpinner />;
+    $[4] = t4;
+  } else {
+    t4 = $[4];
+  }
+  let t5;
+  if ($[5] !== style) {
+    t5 = <Animated.View testID="chat-loading" pointerEvents="none" style={t3}><Animated.View style={style}>{t4}</Animated.View></Animated.View>;
+    $[5] = style;
+    $[6] = t5;
+  } else {
+    t5 = $[6];
+  }
+  return t5;
+}
+const styles = StyleSheet.create({
+  center: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+});
+//# sourceMappingURL=ChatLoadingOverlay.js.map

package/lib/components/ChatLoadingOverlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatLoadingOverlay.js","names":["React","StyleSheet","Animated","Easing","runOnJS","useAnimatedStyle","useSharedValue","withTiming","useAnimatedPresence","ServiceSpinner","LOADING_OVERLAY_MS","FROM_SCALE","ACCELERATE_DECELERATE","bezier","ChatLoadingOverlay","t0","$","_c","isVisible","progress","t1","t2","value","duration","easing","onDone","finished","isMounted","style","opacity","transform","scale","t3","Symbol","for","absoluteFill","styles","center","t4","t5","create","alignItems","justifyContent"],"sources":["../../src/components/ChatLoadingOverlay.tsx"],"sourcesContent":["import React from 'react'\nimport { StyleSheet } from 'react-native'\nimport Animated, {\n  Easing,\n  runOnJS,\n  useAnimatedStyle,\n  useSharedValue,\n  withTiming,\n} from 'react-native-reanimated'\n\nimport { useAnimatedPresence } from '../hooks/useAnimatedPresence'\nimport { ServiceSpinner } from './ServiceSpinner'\n\n/**\n * The spinner grows from 0.3 and fades in over 150ms, and shrinks back out the same way, on an\n * accelerate-decelerate curve.\n */\nexport const LOADING_OVERLAY_MS = 150\nconst FROM_SCALE = 0.3\nconst ACCELERATE_DECELERATE = Easing.bezier(0.37, 0, 0.63, 1)\n\nexport function ChatLoadingOverlay ({ isVisible }: { isVisible: boolean }) {\n  const progress = useSharedValue(0)\n  const { isMounted } = useAnimatedPresence(\n    isVisible,\n    () => {\n      progress.value = withTiming(1, { duration: LOADING_OVERLAY_MS, easing: ACCELERATE_DECELERATE })\n    },\n    onDone => {\n      progress.value = withTiming(0, { duration: LOADING_OVERLAY_MS, easing: ACCELERATE_DECELERATE }, finished => {\n        if (finished)\n          runOnJS(onDone)()\n      })\n    }\n  )\n\n  const style = useAnimatedStyle(() => ({\n    opacity: progress.value,\n    transform: [{ scale: FROM_SCALE + (1 - FROM_SCALE) * progress.value }],\n  }))\n\n  if (!isMounted)\n    return null\n\n  return (\n    <Animated.View testID='chat-loading' pointerEvents='none' style={[StyleSheet.absoluteFill, styles.center]}>\n      <Animated.View style={style}>\n        <ServiceSpinner />\n      </Animated.View>\n    </Animated.View>\n  )\n}\n\nconst styles = StyleSheet.create({\n  center: {\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n})\n"],"mappings":"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","ignoreList":[]}

package/lib/components/ChatOverlay.d.ts

@@ -0,0 +1,9 @@
+import React, { ReactNode } from 'react';
+export declare function ChatOverlayProvider({ children }: {
+    children: ReactNode;
+}): React.JSX.Element;
+/** Where the overlay is drawn: over the message list, never over the composer. */
+export declare function ChatOverlaySlot(): React.JSX.Element | null;
+/** The overlay setter, or `null` when rendered outside a `Chat`. */
+export declare const useChatOverlay: () => ((node: ReactNode) => void) | null;
+//# sourceMappingURL=ChatOverlay.d.ts.map

package/lib/components/ChatOverlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatOverlay.d.ts","sourceRoot":"","sources":["../../src/components/ChatOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAiB,SAAS,EAAwB,MAAM,OAAO,CAAA;AAmB7E,wBAAgB,mBAAmB,CAAE,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,qBAUzE;AAED,kFAAkF;AAClF,wBAAgB,eAAe,6BAU9B;AAED,oEAAoE;AACpE,eAAO,MAAM,cAAc,gBA7BqB,SAAS,KAAK,IAAI,QA6BD,CAAA"}

package/lib/components/ChatOverlay.js

@@ -0,0 +1,60 @@
+import { c as _c } from "react/compiler-runtime";
+import React, { createContext, useContext, useState } from 'react';
+import { StyleSheet, View } from 'react-native';
+
+/*
+ * A layer over the message list that the composer can draw into.
+ *
+ * The round video recorder used to open in a `Modal`, and a modal is a new
+ * native window: the press that opened it is cancelled the moment it appears,
+ * so a note took two presses - hold the camera to open it, then hold its
+ * shutter. A round note records on the first hold, with the finger still on the
+ * button, so the camera has to be a view inside the chat. Drawing the camera
+ * into this slot keeps it in the same window, so the toolbar's gesture lives on.
+ *
+ * Two contexts so that only the slot re-renders when the content changes: the
+ * setter is stable, and the provider's children are the same elements.
+ */
+const SetOverlayContext = createContext(null);
+const OverlayNodeContext = createContext(null);
+export function ChatOverlayProvider(t0) {
+  const $ = _c(3);
+  const {
+    children
+  } = t0;
+  const [node, setNode] = useState(null);
+  let t1;
+  if ($[0] !== children || $[1] !== node) {
+    t1 = <SetOverlayContext.Provider value={setNode}><OverlayNodeContext.Provider value={node}>{children}</OverlayNodeContext.Provider></SetOverlayContext.Provider>;
+    $[0] = children;
+    $[1] = node;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  return t1;
+}
+
+/** Where the overlay is drawn: over the message list, never over the composer. */
+export function ChatOverlaySlot() {
+  const $ = _c(2);
+  const node = useContext(OverlayNodeContext);
+  if (!node) {
+    return null;
+  }
+  let t0;
+  if ($[0] !== node) {
+    t0 = <View style={StyleSheet.absoluteFill} pointerEvents="box-none">{node}</View>;
+    $[0] = node;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+/** The overlay setter, or `null` when rendered outside a `Chat`. */
+export const useChatOverlay = () => {
+  return useContext(SetOverlayContext);
+};
+//# sourceMappingURL=ChatOverlay.js.map

package/lib/components/ChatOverlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatOverlay.js","names":["React","createContext","useContext","useState","StyleSheet","View","SetOverlayContext","OverlayNodeContext","ChatOverlayProvider","t0","$","_c","children","node","setNode","t1","ChatOverlaySlot","absoluteFill","useChatOverlay"],"sources":["../../src/components/ChatOverlay.tsx"],"sourcesContent":["import React, { createContext, ReactNode, useContext, useState } from 'react'\nimport { StyleSheet, View } from 'react-native'\n\n/*\n * A layer over the message list that the composer can draw into.\n *\n * The round video recorder used to open in a `Modal`, and a modal is a new\n * native window: the press that opened it is cancelled the moment it appears,\n * so a note took two presses - hold the camera to open it, then hold its\n * shutter. A round note records on the first hold, with the finger still on the\n * button, so the camera has to be a view inside the chat. Drawing the camera\n * into this slot keeps it in the same window, so the toolbar's gesture lives on.\n *\n * Two contexts so that only the slot re-renders when the content changes: the\n * setter is stable, and the provider's children are the same elements.\n */\nconst SetOverlayContext = createContext<((node: ReactNode) => void) | null>(null)\nconst OverlayNodeContext = createContext<ReactNode>(null)\n\nexport function ChatOverlayProvider ({ children }: { children: ReactNode }) {\n  const [node, setNode] = useState<ReactNode>(null)\n\n  return (\n    <SetOverlayContext.Provider value={setNode}>\n      <OverlayNodeContext.Provider value={node}>\n        {children}\n      </OverlayNodeContext.Provider>\n    </SetOverlayContext.Provider>\n  )\n}\n\n/** Where the overlay is drawn: over the message list, never over the composer. */\nexport function ChatOverlaySlot () {\n  const node = useContext(OverlayNodeContext)\n  if (!node)\n    return null\n\n  return (\n    <View style={StyleSheet.absoluteFill} pointerEvents='box-none'>\n      {node}\n    </View>\n  )\n}\n\n/** The overlay setter, or `null` when rendered outside a `Chat`. */\nexport const useChatOverlay = () => useContext(SetOverlayContext)\n"],"mappings":";AAAA,OAAOA,KAAK,IAAIC,aAAa,EAAaC,UAAU,EAAEC,QAAQ,QAAQ,OAAO;AAC7E,SAASC,UAAU,EAAEC,IAAI,QAAQ,cAAc;;AAE/C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,iBAAiB,GAAGL,aAAa,CAAqC,IAAI,CAAC;AACjF,MAAMM,kBAAkB,GAAGN,aAAa,CAAY,IAAI,CAAC;AAEzD,OAAO,SAAAO,oBAAAC,EAAA;EAAA,MAAAC,CAAA,GAAAC,EAAA;EAA8B;IAAAC;EAAA,IAAAH,EAAqC;EACxE,OAAAI,IAAA,EAAAC,OAAA,IAAwBX,QAAQ,CAAY,IAAI,CAAC;EAAA,IAAAY,EAAA;EAAA,IAAAL,CAAA,QAAAE,QAAA,IAAAF,CAAA,QAAAG,IAAA;IAG/CE,EAAA,+BAAmCD,KAAO,CAAPA,QAAM,CAAC,CACxC,6BAAoCD,KAAI,CAAJA,KAAG,CAAC,CACrCD,SAAO,CACV,8BACF,6BAA6B;IAAAF,CAAA,MAAAE,QAAA;IAAAF,CAAA,MAAAG,IAAA;IAAAH,CAAA,MAAAK,EAAA;EAAA;IAAAA,EAAA,GAAAL,CAAA;EAAA;EAAA,OAJ7BK,EAI6B;AAAA;;AAIjC;AACA,OAAO,SAAAC,gBAAA;EAAA,MAAAN,CAAA,GAAAC,EAAA;EACL,MAAAE,IAAA,GAAaX,UAAU,CAACK,kBAAkB,CAAC;EAC3C,IAAI,CAACM,IAAI;IAAA,OACA,IAAI;EAAA;EAAA,IAAAJ,EAAA;EAAA,IAAAC,CAAA,QAAAG,IAAA;IAGXJ,EAAA,IAAC,IAAI,CAAQ,KAAuB,CAAvB,CAAAL,UAAU,CAAAa,YAAY,CAAC,CAAgB,aAAU,CAAV,UAAU,CAC3DJ,KAAG,CACN,EAFC,IAAI,CAEE;IAAAH,CAAA,MAAAG,IAAA;IAAAH,CAAA,MAAAD,EAAA;EAAA;IAAAA,EAAA,GAAAC,CAAA;EAAA;EAAA,OAFPD,EAEO;AAAA;;AAIX;AACA,OAAO,MAAMS,cAAc,GAAGA,CAAA;EAAA,OAAMhB,UAAU,CAACI,iBAAiB,CAAC;AAAA","ignoreList":[]}

package/lib/components/ChatWallpaper.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+import { ImageSourcePropType, StyleProp, ViewStyle } from 'react-native';
+import { IMessage } from '../Models';
+export interface ChatWallpaperProps {
+    /** Three or four gradient colors; defaults to the theme's `wallpaper.colors`. */
+    colors?: string[];
+    /**
+     * How many steps the gradient has turned. It turns one step back per outgoing
+     * message; any change animates to the new position.
+     */
+    step?: number;
+    /** Animate step changes; defaults to the theme's `wallpaper.isAnimated`. */
+    isAnimated?: boolean;
+    /** An image tiled over the gradient; defaults to the theme's `wallpaper.pattern`. */
+    pattern?: ImageSourcePropType | null;
+    patternOpacity?: number;
+    patternColor?: string;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * The default chat background: a four-color
+ * swirl gradient that turns one step, with a 500ms crossfade, every time you send a message.
+ * Fills its parent. No doodle pattern is bundled; pass your own tile as `pattern` (drawn soft-light, black over a light gradient and
+ * white over a dark one).
+ */
+export declare function ChatWallpaper({ colors: colorsProp, step, isAnimated: isAnimatedProp, pattern: patternProp, patternOpacity: patternOpacityProp, patternColor: patternColorProp, style, }: ChatWallpaperProps): React.JSX.Element;
+/**
+ * How many outgoing messages have arrived since mount - the wallpaper's step. A message the
+ * current user sent becoming the newest one turns it, wherever it came from.
+ */
+export declare function useOutgoingStep(messages: IMessage[], userId: string | number | undefined, isInverted: boolean): number;
+//# sourceMappingURL=ChatWallpaper.d.ts.map

package/lib/components/ChatWallpaper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatWallpaper.d.ts","sourceRoot":"","sources":["../../src/components/ChatWallpaper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAA;AAChF,OAAO,EAAS,mBAAmB,EAAc,SAAS,EAAoB,SAAS,EAAE,MAAM,cAAc,CAAA;AAK7G,OAAO,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAA;AAMpC,MAAM,WAAW,kBAAkB;IACjC,iFAAiF;IACjF,MAAM,CAAC,EAAE,MAAM,EAAE,CAAA;IACjB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,4EAA4E;IAC5E,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,qFAAqF;IACrF,OAAO,CAAC,EAAE,mBAAmB,GAAG,IAAI,CAAA;IACpC,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;CAC7B;AAKD;;;;;GAKG;AACH,wBAAgB,aAAa,CAAE,EAC7B,MAAM,EAAE,UAAU,EAClB,IAAQ,EACR,UAAU,EAAE,cAAc,EAC1B,OAAO,EAAE,WAAW,EACpB,cAAc,EAAE,kBAAkB,EAClC,YAAY,EAAE,gBAAgB,EAC9B,KAAK,GACN,EAAE,kBAAkB,qBA+EpB;AAED;;;GAGG;AACH,wBAAgB,eAAe,CAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,EAAE,UAAU,EAAE,OAAO,GAAG,MAAM,CAevH"}

package/lib/components/ChatWallpaper.js

@@ -0,0 +1,277 @@
+import { c as _c } from "react/compiler-runtime";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Image, StyleSheet, View } from 'react-native';
+import Animated, { Easing, runOnJS, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
+import { averageBrightness } from '../colorUtils';
+import { useTheme } from '../hooks/useTheme';
+import { getWallpaperUri, WALLPAPER_PHASES } from './wallpaperGradient';
+
+// Each step to the next position takes 500ms on bezier(0.33, 0, 0, 1).
+const STEP = {
+  duration: 500,
+  easing: Easing.bezier(0.33, 0, 0, 1)
+};
+const toPhase = step => (-step % WALLPAPER_PHASES + WALLPAPER_PHASES) % WALLPAPER_PHASES;
+
+/**
+ * The default chat background: a four-color
+ * swirl gradient that turns one step, with a 500ms crossfade, every time you send a message.
+ * Fills its parent. No doodle pattern is bundled; pass your own tile as `pattern` (drawn soft-light, black over a light gradient and
+ * white over a dark one).
+ */
+export function ChatWallpaper(t0) {
+  const $ = _c(46);
+  const {
+    colors: colorsProp,
+    step: t1,
+    isAnimated: isAnimatedProp,
+    pattern: patternProp,
+    patternOpacity: patternOpacityProp,
+    patternColor: patternColorProp,
+    style
+  } = t0;
+  const step = t1 === undefined ? 0 : t1;
+  const theme = useTheme();
+  const colors = colorsProp ?? theme.wallpaper.colors;
+  const isAnimated = isAnimatedProp ?? theme.wallpaper.isAnimated;
+  const pattern = patternProp === undefined ? theme.wallpaper.pattern : patternProp;
+  const patternOpacity = patternOpacityProp ?? theme.wallpaper.patternOpacity;
+  let t2;
+  if ($[0] !== colors) {
+    t2 = colors.join(",");
+    $[0] = colors;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  const colorsKey = t2;
+  let t3;
+  if ($[2] !== step) {
+    t3 = toPhase(step);
+    $[2] = step;
+    $[3] = t3;
+  } else {
+    t3 = $[3];
+  }
+  const phase = t3;
+  let t4;
+  if ($[4] !== phase) {
+    t4 = {
+      base: phase,
+      top: phase
+    };
+    $[4] = phase;
+    $[5] = t4;
+  } else {
+    t4 = $[5];
+  }
+  const [layers, setLayers] = useState(t4);
+  const topOpacity = useSharedValue(1);
+  let t5;
+  let t6;
+  if ($[6] !== isAnimated || $[7] !== phase) {
+    t5 = () => {
+      setLayers(previous => {
+        if (previous.top === phase) {
+          return previous;
+        }
+        return isAnimated ? {
+          base: previous.top,
+          top: phase
+        } : {
+          base: phase,
+          top: phase
+        };
+      });
+    };
+    t6 = [phase, isAnimated];
+    $[6] = isAnimated;
+    $[7] = phase;
+    $[8] = t5;
+    $[9] = t6;
+  } else {
+    t5 = $[8];
+    t6 = $[9];
+  }
+  useEffect(t5, t6);
+  let t7;
+  if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+    t7 = settledPhase => {
+      setLayers(previous_0 => previous_0.top === settledPhase ? {
+        base: settledPhase,
+        top: settledPhase
+      } : previous_0);
+    };
+    $[10] = t7;
+  } else {
+    t7 = $[10];
+  }
+  const settle = t7;
+  let t8;
+  if ($[11] !== layers.base || $[12] !== layers.top || $[13] !== topOpacity) {
+    t8 = () => {
+      if (layers.base === layers.top) {
+        topOpacity.value = 1;
+        return;
+      }
+      const target = layers.top;
+      topOpacity.value = 0;
+      topOpacity.value = withTiming(1, STEP, isFinished => {
+        if (isFinished) {
+          runOnJS(settle)(target);
+        }
+      });
+    };
+    $[11] = layers.base;
+    $[12] = layers.top;
+    $[13] = topOpacity;
+    $[14] = t8;
+  } else {
+    t8 = $[14];
+  }
+  let t9;
+  if ($[15] !== layers || $[16] !== topOpacity) {
+    t9 = [layers, topOpacity, settle];
+    $[15] = layers;
+    $[16] = topOpacity;
+    $[17] = t9;
+  } else {
+    t9 = $[17];
+  }
+  useEffect(t8, t9);
+  const topStyle = useAnimatedStyle(() => ({
+    opacity: topOpacity.value
+  }));
+  let t10;
+  if ($[18] !== colorsKey || $[19] !== layers.base) {
+    t10 = getWallpaperUri(colorsKey.split(","), layers.base);
+    $[18] = colorsKey;
+    $[19] = layers.base;
+    $[20] = t10;
+  } else {
+    t10 = $[20];
+  }
+  let t11;
+  if ($[21] !== t10) {
+    t11 = {
+      uri: t10
+    };
+    $[21] = t10;
+    $[22] = t11;
+  } else {
+    t11 = $[22];
+  }
+  const baseSource = t11;
+  let t12;
+  if ($[23] !== colorsKey || $[24] !== layers.top) {
+    t12 = getWallpaperUri(colorsKey.split(","), layers.top);
+    $[23] = colorsKey;
+    $[24] = layers.top;
+    $[25] = t12;
+  } else {
+    t12 = $[25];
+  }
+  let t13;
+  if ($[26] !== t12) {
+    t13 = {
+      uri: t12
+    };
+    $[26] = t12;
+    $[27] = t13;
+  } else {
+    t13 = $[27];
+  }
+  const topSource = t13;
+  const patternColor = patternColorProp ?? theme.wallpaper.patternColor ?? (averageBrightness(colors) < 0.3 ? "#FFFFFF" : "#000000");
+  let t14;
+  if ($[28] !== style) {
+    t14 = [StyleSheet.absoluteFill, style];
+    $[28] = style;
+    $[29] = t14;
+  } else {
+    t14 = $[29];
+  }
+  let t15;
+  if ($[30] !== baseSource) {
+    t15 = <Image source={baseSource} style={StyleSheet.absoluteFill} resizeMode="stretch" fadeDuration={0} />;
+    $[30] = baseSource;
+    $[31] = t15;
+  } else {
+    t15 = $[31];
+  }
+  let t16;
+  if ($[32] !== layers.base || $[33] !== layers.top || $[34] !== topSource || $[35] !== topStyle) {
+    t16 = layers.base !== layers.top && <Animated.Image source={topSource} style={[StyleSheet.absoluteFill, topStyle]} resizeMode="stretch" fadeDuration={0} />;
+    $[32] = layers.base;
+    $[33] = layers.top;
+    $[34] = topSource;
+    $[35] = topStyle;
+    $[36] = t16;
+  } else {
+    t16 = $[36];
+  }
+  let t17;
+  if ($[37] !== pattern || $[38] !== patternColor || $[39] !== patternOpacity) {
+    t17 = !!pattern && <Image source={pattern} resizeMode="repeat" style={[StyleSheet.absoluteFill, {
+      opacity: patternOpacity,
+      tintColor: patternColor,
+      mixBlendMode: "soft-light"
+    }]} />;
+    $[37] = pattern;
+    $[38] = patternColor;
+    $[39] = patternOpacity;
+    $[40] = t17;
+  } else {
+    t17 = $[40];
+  }
+  let t18;
+  if ($[41] !== t14 || $[42] !== t15 || $[43] !== t16 || $[44] !== t17) {
+    t18 = <View pointerEvents="none" style={t14} testID="chat-wallpaper">{t15}{t16}{t17}</View>;
+    $[41] = t14;
+    $[42] = t15;
+    $[43] = t16;
+    $[44] = t17;
+    $[45] = t18;
+  } else {
+    t18 = $[45];
+  }
+  return t18;
+}
+
+/**
+ * How many outgoing messages have arrived since mount - the wallpaper's step. A message the
+ * current user sent becoming the newest one turns it, wherever it came from.
+ */
+export function useOutgoingStep(messages, userId, isInverted) {
+  const $ = _c(4);
+  const newest = messages.length ? isInverted ? messages[0] : messages[messages.length - 1] : undefined;
+  const newestId = newest?._id;
+  const isNewestOutgoing = !!newest && userId != null && newest.user?._id === userId && !newest.system;
+  const [step, setStep] = useState(0);
+  const previousNewestRef = useRef(newestId);
+  let t0;
+  let t1;
+  if ($[0] !== isNewestOutgoing || $[1] !== newestId) {
+    t0 = () => {
+      const previous = previousNewestRef.current;
+      previousNewestRef.current = newestId;
+      if (previous !== undefined && newestId !== undefined && newestId !== previous && isNewestOutgoing) {
+        setStep(_temp);
+      }
+    };
+    t1 = [newestId, isNewestOutgoing];
+    $[0] = isNewestOutgoing;
+    $[1] = newestId;
+    $[2] = t0;
+    $[3] = t1;
+  } else {
+    t0 = $[2];
+    t1 = $[3];
+  }
+  useEffect(t0, t1);
+  return step;
+}
+function _temp(value) {
+  return value + 1;
+}
+//# sourceMappingURL=ChatWallpaper.js.map