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

package/lib/components/GlassSurface.js

@@ -0,0 +1,114 @@
+import { c as _c } from "react/compiler-runtime";
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import { withAlpha } from '../colorUtils';
+import { useColorScheme } from '../hooks/useColorScheme';
+import { getExpoBlur } from '../optional';
+// A light glass surface carries a faint drop
+// (#20000000, radius 1, dy 0.333); a dark one none.
+const LIGHT_SHADOW = [{
+  offsetX: 0,
+  offsetY: 0.333,
+  blurRadius: 1,
+  color: 'rgba(0, 0, 0, 0.125)'
+}];
+
+/**
+ * A "glass" surface: a blur of what is behind it
+ * under its fill at 85%, with a thin light stroke. Without `expo-blur` the fill is drawn
+ * opaque, as with blur turned off. Fills its parent; give the parent the shape.
+ */
+export const GlassSurface = t0 => {
+  const $ = _c(21);
+  const {
+    color,
+    borderColor,
+    style
+  } = t0;
+  const colorScheme = useColorScheme();
+  const BlurView = getExpoBlur()?.BlurView;
+  const isDark = colorScheme === "dark";
+  let t1;
+  if ($[0] !== isDark) {
+    t1 = !isDark && {
+      boxShadow: LIGHT_SHADOW
+    };
+    $[0] = isDark;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  let t2;
+  if ($[2] !== style || $[3] !== t1) {
+    t2 = [StyleSheet.absoluteFill, styles.clip, t1, style];
+    $[2] = style;
+    $[3] = t1;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  let t3;
+  if ($[5] !== isDark) {
+    t3 = BlurView && <BlurView style={StyleSheet.absoluteFill} intensity={isDark ? 40 : 30} tint={isDark ? "dark" : "light"} />;
+    $[5] = isDark;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  let t4;
+  if ($[7] !== color) {
+    t4 = BlurView ? color : withAlpha(color, 1);
+    $[7] = color;
+    $[8] = t4;
+  } else {
+    t4 = $[8];
+  }
+  let t5;
+  if ($[9] !== t4) {
+    t5 = {
+      backgroundColor: t4
+    };
+    $[9] = t4;
+    $[10] = t5;
+  } else {
+    t5 = $[10];
+  }
+  let t6;
+  if ($[11] !== borderColor) {
+    t6 = !!borderColor && {
+      borderColor,
+      borderWidth: 0.667
+    };
+    $[11] = borderColor;
+    $[12] = t6;
+  } else {
+    t6 = $[12];
+  }
+  let t7;
+  if ($[13] !== style || $[14] !== t5 || $[15] !== t6) {
+    t7 = <View style={[StyleSheet.absoluteFill, t5, t6, style]} />;
+    $[13] = style;
+    $[14] = t5;
+    $[15] = t6;
+    $[16] = t7;
+  } else {
+    t7 = $[16];
+  }
+  let t8;
+  if ($[17] !== t2 || $[18] !== t3 || $[19] !== t7) {
+    t8 = <View pointerEvents="none" style={t2}>{t3}{t7}</View>;
+    $[17] = t2;
+    $[18] = t3;
+    $[19] = t7;
+    $[20] = t8;
+  } else {
+    t8 = $[20];
+  }
+  return t8;
+};
+const styles = StyleSheet.create({
+  clip: {
+    overflow: 'hidden'
+  }
+});
+//# sourceMappingURL=GlassSurface.js.map

package/lib/components/GlassSurface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GlassSurface.js","names":["React","StyleSheet","View","withAlpha","useColorScheme","getExpoBlur","LIGHT_SHADOW","offsetX","offsetY","blurRadius","color","GlassSurface","t0","$","_c","borderColor","style","colorScheme","BlurView","isDark","t1","boxShadow","t2","absoluteFill","styles","clip","t3","t4","t5","backgroundColor","t6","borderWidth","t7","t8","create","overflow"],"sources":["../../src/components/GlassSurface.tsx"],"sourcesContent":["import React from 'react'\nimport { StyleProp, StyleSheet, View, ViewStyle } from 'react-native'\n\nimport { withAlpha } from '../colorUtils'\nimport { useColorScheme } from '../hooks/useColorScheme'\nimport { getExpoBlur } from '../optional'\n\nexport interface GlassSurfaceProps {\n  /** The translucent fill; drawn opaque when there is no blur behind it. */\n  color: string\n  /** The thin light edge around the surface. */\n  borderColor?: string\n  style?: StyleProp<ViewStyle>\n}\n\n// A light glass surface carries a faint drop\n// (#20000000, radius 1, dy 0.333); a dark one none.\nconst LIGHT_SHADOW = [{ offsetX: 0, offsetY: 0.333, blurRadius: 1, color: 'rgba(0, 0, 0, 0.125)' }]\n\n/**\n * A \"glass\" surface: a blur of what is behind it\n * under its fill at 85%, with a thin light stroke. Without `expo-blur` the fill is drawn\n * opaque, as with blur turned off. Fills its parent; give the parent the shape.\n */\nexport const GlassSurface = ({ color, borderColor, style }: GlassSurfaceProps) => {\n  const colorScheme = useColorScheme()\n  const BlurView = getExpoBlur()?.BlurView\n  const isDark = colorScheme === 'dark'\n\n  return (\n    <View\n      pointerEvents='none'\n      style={[\n        StyleSheet.absoluteFill,\n        styles.clip,\n        !isDark && { boxShadow: LIGHT_SHADOW },\n        style,\n      ]}\n    >\n      {BlurView && (\n        <BlurView\n          style={StyleSheet.absoluteFill}\n          intensity={isDark ? 40 : 30}\n          tint={isDark ? 'dark' : 'light'}\n        />\n      )}\n      <View\n        style={[\n          StyleSheet.absoluteFill,\n          { backgroundColor: BlurView ? color : withAlpha(color, 1) },\n          !!borderColor && { borderColor, borderWidth: 0.667 },\n          style,\n        ]}\n      />\n    </View>\n  )\n}\n\nconst styles = StyleSheet.create({\n  clip: {\n    overflow: 'hidden',\n  },\n})\n"],"mappings":"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","ignoreList":[]}

package/lib/components/Icon.js

@@ -1,3 +1,4 @@
+import { c as _c } from "react/compiler-runtime";
 import React from 'react';
 import { useIcons } from '../hooks/useIcons';
 import { LucideIcon, isSvgAvailable } from './LucideIcon';
@@ -7,13 +8,61 @@ import { LucideIcon, isSvgAvailable } from './LucideIcon';
  *   2. the built-in Lucide glyph (rendered via react-native-svg),
  *   3. the dependency-free drawn `fallback` when react-native-svg is absent.
  */
-export const Icon = ({ name, color, size, fallback }) => {
-    const icons = useIcons();
-    const render = icons[name];
-    if (render)
-        return <>{render({ color, size })}</>;
-    if (isSvgAvailable)
-        return <LucideIcon name={name} color={color} size={size}/>;
-    return <>{fallback}</>;
+export const Icon = t0 => {
+  const $ = _c(12);
+  const {
+    name,
+    color,
+    size,
+    fallback
+  } = t0;
+  const icons = useIcons();
+  const render = icons[name];
+  if (render) {
+    let t1;
+    if ($[0] !== color || $[1] !== render || $[2] !== size) {
+      t1 = render({
+        color,
+        size
+      });
+      $[0] = color;
+      $[1] = render;
+      $[2] = size;
+      $[3] = t1;
+    } else {
+      t1 = $[3];
+    }
+    let t2;
+    if ($[4] !== t1) {
+      t2 = <>{t1}</>;
+      $[4] = t1;
+      $[5] = t2;
+    } else {
+      t2 = $[5];
+    }
+    return t2;
+  }
+  if (isSvgAvailable) {
+    let t1;
+    if ($[6] !== color || $[7] !== name || $[8] !== size) {
+      t1 = <LucideIcon name={name} color={color} size={size} />;
+      $[6] = color;
+      $[7] = name;
+      $[8] = size;
+      $[9] = t1;
+    } else {
+      t1 = $[9];
+    }
+    return t1;
+  }
+  let t1;
+  if ($[10] !== fallback) {
+    t1 = <>{fallback}</>;
+    $[10] = fallback;
+    $[11] = t1;
+  } else {
+    t1 = $[11];
+  }
+  return t1;
 };
 //# sourceMappingURL=Icon.js.map

package/lib/components/Icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../src/components/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE5C,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,cAAc,CAAA;AAUzD;;;;;GAKG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAa,EAAsB,EAAE;IACrF,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IACxB,MAAM,MAAM,GAAG,KAAK,CAAC,IAAI,CAAC,CAAA;IAE1B,IAAI,MAAM;QACR,OAAO,EAAE,CAAC,MAAM,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC,GAAG,CAAA;IAEvC,IAAI,cAAc;QAChB,OAAO,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,EAAG,CAAA;IAE7D,OAAO,EAAE,CAAC,QAAQ,CAAC,GAAG,CAAA;AACxB,CAAC,CAAA"}
+{"version":3,"file":"Icon.js","names":["React","useIcons","LucideIcon","isSvgAvailable","Icon","t0","$","_c","name","color","size","fallback","icons","render","t1","t2"],"sources":["../../src/components/Icon.tsx"],"sourcesContent":["import React from 'react'\nimport { useIcons } from '../hooks/useIcons'\nimport { IconName } from '../Icons'\nimport { LucideIcon, isSvgAvailable } from './LucideIcon'\n\nexport interface IconProps {\n  name: IconName\n  color: string\n  size: number\n  /** Drawn fallback, used only when react-native-svg is not installed. */\n  fallback: React.ReactNode\n}\n\n/**\n * Resolves an icon in priority order:\n *   1. a consumer override from the `icons` registry (e.g. lucide-react-native),\n *   2. the built-in Lucide glyph (rendered via react-native-svg),\n *   3. the dependency-free drawn `fallback` when react-native-svg is absent.\n */\nexport const Icon = ({ name, color, size, fallback }: IconProps): React.ReactElement => {\n  const icons = useIcons()\n  const render = icons[name]\n\n  if (render)\n    return <>{render({ color, size })}</>\n\n  if (isSvgAvailable)\n    return <LucideIcon name={name} color={color} size={size} />\n\n  return <>{fallback}</>\n}\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,QAAQ,QAAQ,mBAAmB;AAE5C,SAASC,UAAU,EAAEC,cAAc,QAAQ,cAAc;AAUzD;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,IAAI,GAAGC,EAAA;EAAA,MAAAC,CAAA,GAAAC,EAAA;EAAC;IAAAC,IAAA;IAAAC,KAAA;IAAAC,IAAA;IAAAC;EAAA,IAAAN,EAA0C;EAC7D,MAAAO,KAAA,GAAcX,QAAQ,CAAC,CAAC;EACxB,MAAAY,MAAA,GAAeD,KAAK,CAACJ,IAAI,CAAC;EAE1B,IAAIK,MAAM;IAAA,IAAAC,EAAA;IAAA,IAAAR,CAAA,QAAAG,KAAA,IAAAH,CAAA,QAAAO,MAAA,IAAAP,CAAA,QAAAI,IAAA;MACEI,EAAA,GAAAD,MAAM,CAAC;QAAAJ,KAAA;QAAAC;MAAc,CAAC,CAAC;MAAAJ,CAAA,MAAAG,KAAA;MAAAH,CAAA,MAAAO,MAAA;MAAAP,CAAA,MAAAI,IAAA;MAAAJ,CAAA,MAAAQ,EAAA;IAAA;MAAAA,EAAA,GAAAR,CAAA;IAAA;IAAA,IAAAS,EAAA;IAAA,IAAAT,CAAA,QAAAQ,EAAA;MAA1BC,EAAA,KAAG,CAAAD,EAAsB,CAAC,GAAI;MAAAR,CAAA,MAAAQ,EAAA;MAAAR,CAAA,MAAAS,EAAA;IAAA;MAAAA,EAAA,GAAAT,CAAA;IAAA;IAAA,OAA9BS,EAA8B;EAAA;EAEvC,IAAIZ,cAAc;IAAA,IAAAW,EAAA;IAAA,IAAAR,CAAA,QAAAG,KAAA,IAAAH,CAAA,QAAAE,IAAA,IAAAF,CAAA,QAAAI,IAAA;MACTI,EAAA,IAAC,UAAU,CAAON,IAAI,CAAJA,KAAG,CAAC,CAASC,KAAK,CAALA,MAAI,CAAC,CAAQC,IAAI,CAAJA,KAAG,CAAC,GAAI;MAAAJ,CAAA,MAAAG,KAAA;MAAAH,CAAA,MAAAE,IAAA;MAAAF,CAAA,MAAAI,IAAA;MAAAJ,CAAA,MAAAQ,EAAA;IAAA;MAAAA,EAAA,GAAAR,CAAA;IAAA;IAAA,OAApDQ,EAAoD;EAAA;EAAA,IAAAA,EAAA;EAAA,IAAAR,CAAA,SAAAK,QAAA;IAEtDG,EAAA,KAAGH,SAAO,CAAC,GAAI;IAAAL,CAAA,OAAAK,QAAA;IAAAL,CAAA,OAAAQ,EAAA;EAAA;IAAAA,EAAA,GAAAR,CAAA;EAAA;EAAA,OAAfQ,EAAe;AAAA,CACvB","ignoreList":[]}

package/lib/components/LinkPreviewCard.d.ts

@@ -0,0 +1,36 @@
+import React from 'react';
+import { IMessage, LinkPreview } from '../Models';
+/** What a custom `renderLinkPreview` receives. */
+export interface LinkPreviewProps<TMessage extends IMessage = IMessage> {
+    preview: LinkPreview & {
+        url: string;
+    };
+    currentMessage: TMessage;
+    position: 'left' | 'right';
+    /** The widest the card can be inside the bubble. */
+    maxWidth: number;
+    onPress?: (preview: LinkPreview & {
+        url: string;
+    }, message: TMessage) => void;
+}
+/** Fetches a preview for a URL; resolve `null` when the page has none. */
+export type FetchLinkPreview = (url: string) => Promise<LinkPreview | null | undefined>;
+/** The first link in a text, with a scheme, or undefined. */
+export declare function findFirstUrl(text: string | undefined): string | undefined;
+/** @internal Only for tests. */
+export declare const resetLinkPreviewCache: () => void;
+/**
+ * The preview to draw for a message: its own `linkPreview`, or one fetched for the first link
+ * in its text through `fetchPreview`. `linkPreview: null` turns it off for that message.
+ */
+export declare function useLinkPreview(message: IMessage | undefined, fetchPreview: FetchLinkPreview | undefined): (LinkPreview & {
+    url: string;
+}) | null;
+/**
+ * The web page preview: a rounded block in
+ * the sender's color at 10% with a 3dp bar down its left side, the site name in that color,
+ * the title in bold, a few lines of description, and the page's picture - full width under the
+ * text, or a 48dp thumbnail at the top right. A tap opens the page.
+ */
+export declare function LinkPreviewCard<TMessage extends IMessage>({ preview, currentMessage, position, maxWidth, onPress, }: LinkPreviewProps<TMessage>): React.JSX.Element;
+//# sourceMappingURL=LinkPreviewCard.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LinkPreviewCard.d.ts","sourceRoot":"","sources":["../../src/components/LinkPreviewCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAA;AAKxC,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AAIjD,kDAAkD;AAClD,MAAM,WAAW,gBAAgB,CAAC,QAAQ,SAAS,QAAQ,GAAG,QAAQ;IACpE,OAAO,EAAE,WAAW,GAAG;QAAE,GAAG,EAAE,MAAM,CAAA;KAAE,CAAA;IACtC,cAAc,EAAE,QAAQ,CAAA;IACxB,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAA;IAC1B,oDAAoD;IACpD,QAAQ,EAAE,MAAM,CAAA;IAChB,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,GAAG;QAAE,GAAG,EAAE,MAAM,CAAA;KAAE,EAAE,OAAO,EAAE,QAAQ,KAAK,IAAI,CAAA;CAC9E;AAED,0EAA0E;AAC1E,MAAM,MAAM,gBAAgB,GAAG,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC,WAAW,GAAG,IAAI,GAAG,SAAS,CAAC,CAAA;AAOvF,6DAA6D;AAC7D,wBAAgB,YAAY,CAAE,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAc1E;AAOD,gCAAgC;AAChC,eAAO,MAAM,qBAAqB,YAGjC,CAAA;AAkBD;;;GAGG;AACH,wBAAgB,cAAc,CAC5B,OAAO,EAAE,QAAQ,GAAG,SAAS,EAC7B,YAAY,EAAE,gBAAgB,GAAG,SAAS,GACzC,CAAC,WAAW,GAAG;IAAE,GAAG,EAAE,MAAM,CAAA;CAAE,CAAC,GAAG,IAAI,CA0BxC;AAeD;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,QAAQ,SAAS,QAAQ,EAAG,EAC1D,OAAO,EACP,cAAc,EACd,QAAQ,EACR,QAAQ,EACR,OAAO,GACR,EAAE,gBAAgB,CAAC,QAAQ,CAAC,qBAwE5B"}

package/lib/components/LinkPreviewCard.js

@@ -0,0 +1,416 @@
+import { c as _c } from "react/compiler-runtime";
+import React, { useEffect } from 'react';
+import { Image, Linking, Pressable, StyleSheet, Text, View } from 'react-native';
+import { multiplyAlpha } from '../colorUtils';
+import { useTheme, useThemedStyles } from '../hooks/useTheme';
+import { createKeyedStore, useKeyedValue } from '../store';
+import { getNameColor } from '../Theme';
+
+/** What a custom `renderLinkPreview` receives. */
+
+/** Fetches a preview for a URL; resolve `null` when the page has none. */
+
+// Same matching as the text's own links: an explicit scheme, `www.`, or a bare domain.
+const URL_PATTERN = /(?:https?:\/\/|www\.)[^\s<>"]+|\b[a-z0-9][a-z0-9-]*(?:\.[a-z0-9-]+)*\.[a-z]{2,}(?:\/[^\s<>"]*)?/i;
+// Punctuation that ends a sentence rather than the link.
+const TRAILING_PUNCTUATION = /[.,;:!?)\]}'"»]+$/;
+
+/** The first link in a text, with a scheme, or undefined. */
+export function findFirstUrl(text) {
+  if (!text) return undefined;
+  const match = text.match(URL_PATTERN);
+  if (!match) return undefined;
+
+  // An e-mail address is not a page.
+  if (match.index != null && match.index > 0 && text[match.index - 1] === '@') return undefined;
+  const url = match[0].replace(TRAILING_PUNCTUATION, '');
+  return /^https?:\/\//i.test(url) ? url : `https://${url}`;
+}
+
+// One request per URL for the app's lifetime; the rows that show it share the answer, and a
+// landed fetch wakes only the rows showing that URL.
+const fetched = createKeyedStore();
+const pending = new Map();
+
+/** @internal Only for tests. */
+export const resetLinkPreviewCache = () => {
+  fetched.clear();
+  pending.clear();
+};
+const fetchOnce = (url, fetchPreview) => {
+  let request = pending.get(url);
+  if (!request) {
+    request = Promise.resolve().then(() => fetchPreview(url)).then(result => result ?? null, () => null).then(result => {
+      pending.delete(url);
+      fetched.set(url, result);
+      return result;
+    });
+    pending.set(url, request);
+  }
+  return request;
+};
+
+/**
+ * The preview to draw for a message: its own `linkPreview`, or one fetched for the first link
+ * in its text through `fetchPreview`. `linkPreview: null` turns it off for that message.
+ */
+export function useLinkPreview(message, fetchPreview) {
+  const $ = _c(13);
+  const own = message?.linkPreview;
+  let t0;
+  if ($[0] !== message?.text || $[1] !== own) {
+    t0 = own === null ? undefined : findFirstUrl(message?.text);
+    $[0] = message?.text;
+    $[1] = own;
+    $[2] = t0;
+  } else {
+    t0 = $[2];
+  }
+  const firstUrl = t0;
+  const fetchUrl = own === undefined && fetchPreview ? firstUrl : undefined;
+  const fetchedPreview = useKeyedValue(fetched, fetchUrl);
+  let t1;
+  let t2;
+  if ($[3] !== fetchPreview || $[4] !== fetchUrl) {
+    t1 = () => {
+      if (fetchUrl && fetchPreview && !fetched.has(fetchUrl)) {
+        fetchOnce(fetchUrl, fetchPreview);
+      }
+    };
+    t2 = [fetchUrl, fetchPreview];
+    $[3] = fetchPreview;
+    $[4] = fetchUrl;
+    $[5] = t1;
+    $[6] = t2;
+  } else {
+    t1 = $[5];
+    t2 = $[6];
+  }
+  useEffect(t1, t2);
+  if (own) {
+    const url = own.url ?? firstUrl;
+    if (!url || !(own.title || own.description || own.siteName || own.image)) {
+      return null;
+    }
+    let t3;
+    if ($[7] !== own || $[8] !== url) {
+      t3 = {
+        ...own,
+        url
+      };
+      $[7] = own;
+      $[8] = url;
+      $[9] = t3;
+    } else {
+      t3 = $[9];
+    }
+    return t3;
+  }
+  if (!fetchUrl) {
+    return null;
+  }
+  const result = fetchedPreview;
+  if (!result || !(result.title || result.description || result.siteName || result.image)) {
+    return null;
+  }
+  const t3 = result.url ?? fetchUrl;
+  let t4;
+  if ($[10] !== result || $[11] !== t3) {
+    t4 = {
+      ...result,
+      url: t3
+    };
+    $[10] = result;
+    $[11] = t3;
+    $[12] = t4;
+  } else {
+    t4 = $[12];
+  }
+  return t4;
+}
+const hostOf = url => url.replace(/^https?:\/\//i, '').replace(/^www\./i, '').split(/[/?#]/)[0];
+
+// The preview block is filled with its accent at 10%.
+const BOX_ALPHA = 0.1;
+const BOX_ALPHA_ON_WHITE_LINE = 0.12;
+/** The thumbnail's side and its margin. */
+const SMALL_IMAGE = 48;
+const SMALL_IMAGE_MARGIN = 10;
+/** Insets of the block's content: past the 3dp bar on the left, `dp(10)` on the right. */
+const INSET_LEFT = 10;
+const INSET_RIGHT = 10;
+const MAX_IMAGE_HEIGHT = 320;
+
+/**
+ * The web page preview: a rounded block in
+ * the sender's color at 10% with a 3dp bar down its left side, the site name in that color,
+ * the title in bold, a few lines of description, and the page's picture - full width under the
+ * text, or a 48dp thumbnail at the top right. A tap opens the page.
+ */
+export function LinkPreviewCard(t0) {
+  const $ = _c(65);
+  const {
+    preview,
+    currentMessage,
+    position,
+    maxWidth,
+    onPress
+  } = t0;
+  const theme = useTheme();
+  const styles = useThemedStyles(createStyles);
+  let t1;
+  if ($[0] !== currentMessage || $[1] !== position || $[2] !== theme) {
+    t1 = position === "left" ? theme.nameColors.length ? getNameColor(theme, currentMessage.user?._id) : theme.colors.incomingReplyLine : theme.colors.outgoingReplyLine;
+    $[0] = currentMessage;
+    $[1] = position;
+    $[2] = theme;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  const accent = t1;
+  const siteColor = position === "left" ? theme.nameColors.length ? accent : theme.colors.incomingReplyName : theme.colors.outgoingReplyName;
+  const textColor = position === "left" ? theme.colors.incomingText : theme.colors.outgoingText;
+  const boxAlpha = position === "right" && accent.toUpperCase() === "#FFFFFF" ? BOX_ALPHA_ON_WHITE_LINE : BOX_ALPHA;
+  const aspect = preview.imageWidth && preview.imageHeight ? preview.imageWidth / preview.imageHeight : undefined;
+  const isSmallImage = !!preview.image && (preview.imageSize === "small" || preview.imageSize !== "large" && aspect != null && aspect <= 1);
+  const isLargeImage = !!preview.image && !isSmallImage;
+  const imageWidth = Math.max(0, maxWidth - INSET_LEFT - INSET_RIGHT);
+  const imageHeight = Math.min(MAX_IMAGE_HEIGHT, imageWidth / (aspect ?? 1.91));
+  let t2;
+  if ($[4] !== currentMessage || $[5] !== onPress || $[6] !== preview) {
+    t2 = () => {
+      if (onPress) {
+        onPress(preview, currentMessage);
+        return;
+      }
+      Linking.openURL(preview.url).catch(_temp);
+    };
+    $[4] = currentMessage;
+    $[5] = onPress;
+    $[6] = preview;
+    $[7] = t2;
+  } else {
+    t2 = $[7];
+  }
+  const handlePress = t2;
+  let t3;
+  if ($[8] !== preview.siteName || $[9] !== preview.url) {
+    t3 = preview.siteName ?? hostOf(preview.url);
+    $[8] = preview.siteName;
+    $[9] = preview.url;
+    $[10] = t3;
+  } else {
+    t3 = $[10];
+  }
+  const siteName = t3;
+  let t4;
+  if ($[11] !== preview.title || $[12] !== siteName) {
+    t4 = [siteName, preview.title].filter(Boolean);
+    $[11] = preview.title;
+    $[12] = siteName;
+    $[13] = t4;
+  } else {
+    t4 = $[13];
+  }
+  const t5 = t4.join(", ");
+  const t6 = styles.card;
+  let t7;
+  if ($[14] !== accent || $[15] !== boxAlpha) {
+    t7 = multiplyAlpha(accent, boxAlpha);
+    $[14] = accent;
+    $[15] = boxAlpha;
+    $[16] = t7;
+  } else {
+    t7 = $[16];
+  }
+  let t8;
+  if ($[17] !== accent || $[18] !== t7) {
+    t8 = {
+      borderLeftColor: accent,
+      backgroundColor: t7
+    };
+    $[17] = accent;
+    $[18] = t7;
+    $[19] = t8;
+  } else {
+    t8 = $[19];
+  }
+  let t9;
+  if ($[20] !== isLargeImage || $[21] !== maxWidth) {
+    t9 = isLargeImage && {
+      width: maxWidth
+    };
+    $[20] = isLargeImage;
+    $[21] = maxWidth;
+    $[22] = t9;
+  } else {
+    t9 = $[22];
+  }
+  let t10;
+  if ($[23] !== styles.card || $[24] !== t8 || $[25] !== t9) {
+    t10 = [t6, t8, t9];
+    $[23] = styles.card;
+    $[24] = t8;
+    $[25] = t9;
+    $[26] = t10;
+  } else {
+    t10 = $[26];
+  }
+  let t11;
+  if ($[27] !== siteColor || $[28] !== siteName || $[29] !== styles.siteName) {
+    t11 = !!siteName && <Text style={[styles.siteName, {
+      color: siteColor
+    }]} numberOfLines={1}>{siteName}</Text>;
+    $[27] = siteColor;
+    $[28] = siteName;
+    $[29] = styles.siteName;
+    $[30] = t11;
+  } else {
+    t11 = $[30];
+  }
+  let t12;
+  if ($[31] !== preview.title || $[32] !== styles.title || $[33] !== textColor) {
+    t12 = !!preview.title && <Text style={[styles.title, {
+      color: textColor
+    }]} numberOfLines={2}>{preview.title}</Text>;
+    $[31] = preview.title;
+    $[32] = styles.title;
+    $[33] = textColor;
+    $[34] = t12;
+  } else {
+    t12 = $[34];
+  }
+  let t13;
+  if ($[35] !== isSmallImage || $[36] !== preview.description || $[37] !== styles.description || $[38] !== textColor) {
+    t13 = !!preview.description && <Text style={[styles.description, {
+      color: textColor
+    }]} numberOfLines={isSmallImage ? 3 : 4}>{preview.description}</Text>;
+    $[35] = isSmallImage;
+    $[36] = preview.description;
+    $[37] = styles.description;
+    $[38] = textColor;
+    $[39] = t13;
+  } else {
+    t13 = $[39];
+  }
+  let t14;
+  if ($[40] !== styles.texts || $[41] !== t11 || $[42] !== t12 || $[43] !== t13) {
+    t14 = <View style={styles.texts}>{t11}{t12}{t13}</View>;
+    $[40] = styles.texts;
+    $[41] = t11;
+    $[42] = t12;
+    $[43] = t13;
+    $[44] = t14;
+  } else {
+    t14 = $[44];
+  }
+  let t15;
+  if ($[45] !== isSmallImage || $[46] !== preview.image || $[47] !== styles.smallImage) {
+    t15 = isSmallImage && <Image source={{
+      uri: preview.image
+    }} style={styles.smallImage} accessibilityIgnoresInvertColors={true} />;
+    $[45] = isSmallImage;
+    $[46] = preview.image;
+    $[47] = styles.smallImage;
+    $[48] = t15;
+  } else {
+    t15 = $[48];
+  }
+  let t16;
+  if ($[49] !== styles.row || $[50] !== t14 || $[51] !== t15) {
+    t16 = <View style={styles.row}>{t14}{t15}</View>;
+    $[49] = styles.row;
+    $[50] = t14;
+    $[51] = t15;
+    $[52] = t16;
+  } else {
+    t16 = $[52];
+  }
+  let t17;
+  if ($[53] !== imageHeight || $[54] !== imageWidth || $[55] !== isLargeImage || $[56] !== preview.image || $[57] !== styles.largeImage) {
+    t17 = isLargeImage && <Image source={{
+      uri: preview.image
+    }} style={[styles.largeImage, {
+      width: imageWidth,
+      height: imageHeight
+    }]} resizeMode="cover" accessibilityIgnoresInvertColors={true} />;
+    $[53] = imageHeight;
+    $[54] = imageWidth;
+    $[55] = isLargeImage;
+    $[56] = preview.image;
+    $[57] = styles.largeImage;
+    $[58] = t17;
+  } else {
+    t17 = $[58];
+  }
+  let t18;
+  if ($[59] !== handlePress || $[60] !== t10 || $[61] !== t16 || $[62] !== t17 || $[63] !== t5) {
+    t18 = <Pressable onPress={handlePress} accessibilityRole="link" accessibilityLabel={t5} style={t10} testID="link-preview">{t16}{t17}</Pressable>;
+    $[59] = handlePress;
+    $[60] = t10;
+    $[61] = t16;
+    $[62] = t17;
+    $[63] = t5;
+    $[64] = t18;
+  } else {
+    t18 = $[64];
+  }
+  return t18;
+}
+
+// Text at the reply quote's size, (2 * 16 + 10) / 3 = 14dp; site name and
+// title bold. The block starts 6 below the text and keeps the reply quote's corner radii.
+function _temp() {}
+const createStyles = theme => StyleSheet.create({
+  card: {
+    marginTop: 2,
+    marginHorizontal: theme.spacing.bubblePaddingH,
+    marginBottom: 2,
+    borderLeftWidth: 3,
+    borderTopLeftRadius: theme.radii.replyQuote,
+    borderBottomLeftRadius: theme.radii.replyQuote,
+    borderTopRightRadius: theme.radii.replyQuote * 2,
+    borderBottomRightRadius: theme.radii.replyQuote * 2,
+    paddingLeft: INSET_LEFT - 3,
+    paddingRight: INSET_RIGHT,
+    paddingTop: 5,
+    paddingBottom: 7,
+    overflow: 'hidden'
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'flex-start'
+  },
+  texts: {
+    flexShrink: 1
+  },
+  siteName: {
+    fontSize: theme.typography.replyName.fontSize,
+    lineHeight: theme.typography.replyName.lineHeight,
+    fontWeight: '700'
+  },
+  title: {
+    marginTop: 2,
+    fontSize: theme.typography.replyName.fontSize,
+    lineHeight: theme.typography.replyName.lineHeight,
+    fontWeight: '700'
+  },
+  description: {
+    marginTop: 2,
+    fontSize: theme.typography.replyText.fontSize,
+    lineHeight: theme.typography.replyText.lineHeight
+  },
+  smallImage: {
+    width: SMALL_IMAGE,
+    height: SMALL_IMAGE,
+    marginLeft: SMALL_IMAGE_MARGIN,
+    marginTop: 2,
+    borderRadius: 6
+  },
+  largeImage: {
+    marginTop: 6,
+    borderRadius: 6
+  }
+});
+//# sourceMappingURL=LinkPreviewCard.js.map