stream-chat-react-native-core 9.9.4 → 9.10.0-beta.1

package/src/ai-components/syntax-highlighting/utils/converter.ts

@@ -0,0 +1,145 @@
+import type { TextStyle } from 'react-native';
+
+import type { ConvertOpts, CSSP } from '../types';
+
+const EM_DEFAULT = 16;
+
+// React Native's strict TypeScript API declares style properties as readonly.
+type MutableTextStyle = { -readonly [K in keyof TextStyle]: TextStyle[K] };
+
+/** Parse CSS lengths like 14, "14", "14px", "1.25em", "0.875rem" */
+const len = (v: unknown, { baseFontSize, rootFontSize }: ConvertOpts): number | undefined => {
+  if (v == null) return undefined;
+  if (typeof v === 'number') return v;
+  if (typeof v !== 'string') return undefined;
+
+  const s = v.trim().toLowerCase();
+  if (s.endsWith('px')) {
+    const n = Number(s.slice(0, -2));
+    return Number.isFinite(n) ? n : undefined;
+  }
+  if (s.endsWith('em')) {
+    const n = Number(s.slice(0, -2));
+    return Number.isFinite(n) ? n * (baseFontSize ?? EM_DEFAULT) : undefined;
+  }
+  if (s.endsWith('rem')) {
+    const n = Number(s.slice(0, -3));
+    const root = rootFontSize ?? baseFontSize ?? EM_DEFAULT;
+    return Number.isFinite(n) ? n * root : undefined;
+  }
+  // plain number-like string
+  const n = Number(s);
+  return Number.isFinite(n) ? n : undefined;
+};
+
+/** Font shorthand: e.g. "italic small-caps 700 14px/20px Menlo, monospace" */
+const parseFontShorthand = (v: string, opts: ConvertOpts) => {
+  const out: MutableTextStyle = {};
+  const parts = v.split(/\s+/);
+  // Very light parser: pick out style, weight, size[/lineHeight], and family
+  // Strategy:
+  // - style: "normal|italic"
+  // - weight: "normal|bold|100..900"
+  // - when we hit a token like "14px" or "14px/20px" → size & optional lineHeight
+  // - everything after size token is font family (may contain commas/spaces)
+  let i = 0;
+
+  // style
+  if (parts[i] === 'italic' || parts[i] === 'normal') {
+    if (parts[i] !== 'normal') out.fontStyle = 'italic';
+    i++;
+  }
+
+  // (skip small-caps if present; RN uses fontVariant which is separate)
+  if (parts[i] === 'small-caps') {
+    out.fontVariant = ['small-caps'];
+    i++;
+  }
+
+  // weight
+  if (/^(normal|bold|[1-9]00)$/.test(parts[i] ?? '')) {
+    const token = parts[i]!;
+    out.fontWeight = (token === 'normal' ? undefined : token) as TextStyle['fontWeight'];
+    i++;
+  }
+
+  // size[/lineHeight]
+  const sizeToken = parts[i];
+  if (
+    sizeToken &&
+    (/.+(px|em|rem)$/.test(sizeToken) || /^[\d.]+(\/[\d.]+)?(px|em|rem)?$/.test(sizeToken))
+  ) {
+    const [fs, lh] = sizeToken.split('/');
+    const fontSize = len(fs, opts);
+    if (fontSize != null) out.fontSize = fontSize;
+    if (lh) {
+      const lineHeight = len(lh, opts);
+      if (lineHeight != null) out.lineHeight = lineHeight;
+    }
+    i++;
+  }
+
+  // family
+  const family = parts.slice(i).join(' ').replace(/^,|,$/g, '').trim();
+  if (family) {
+    // basic cleanup: take first family; strip quotes
+    const first = family
+      .split(',')[0]
+      ?.trim()
+      .replace(/^["']|["']$/g, '');
+    if (first) out.fontFamily = first;
+  }
+
+  return out;
+};
+
+/** map CSS (web) to RN TextStyle */
+export const cssToRNTextStyle = (css: Partial<CSSP>, options: ConvertOpts = {}): TextStyle => {
+  const opts: ConvertOpts = {
+    baseFontSize: options.baseFontSize ?? EM_DEFAULT,
+    rootFontSize: options.rootFontSize ?? options.baseFontSize ?? EM_DEFAULT,
+  };
+
+  const out: MutableTextStyle = {};
+
+  // Simple 1:1 or unit-converted mappings
+  if (css.color) out.color = String(css.color);
+
+  if (css.fontFamily) out.fontFamily = String(css.fontFamily);
+  if (css.fontStyle) out.fontStyle = css.fontStyle as TextStyle['fontStyle'];
+  if (css.fontWeight) out.fontWeight = String(css.fontWeight) as TextStyle['fontWeight'];
+
+  if (css.fontSize != null) {
+    const n = len(css.fontSize, opts);
+    if (n != null) out.fontSize = n;
+  }
+
+  if (css.lineHeight != null) {
+    const n = len(css.lineHeight, opts);
+    if (n != null) out.lineHeight = n;
+  }
+
+  if (css.letterSpacing != null) {
+    const n = len(css.letterSpacing, opts);
+    if (n != null) out.letterSpacing = n;
+  }
+
+  if (css.textAlign) out.textAlign = css.textAlign as TextStyle['textAlign'];
+
+  if (css.font && typeof css.font === 'string') {
+    Object.assign(out, parseFontShorthand(css.font, opts));
+  }
+
+  // Simulating the closest we can get to a CSS overflow-like functionality
+  const overflowLike = css.overflow ?? css.overflowX ?? css.overflowY;
+  if (typeof overflowLike === 'string') {
+    out.overflow =
+      overflowLike === 'hidden'
+        ? 'hidden'
+        : overflowLike === 'scroll' || overflowLike === 'auto'
+          ? 'scroll'
+          : 'visible';
+  }
+
+  return out as TextStyle;
+};

package/src/ai-components/syntax-highlighting/utils/flatten-nodes.ts

@@ -0,0 +1,150 @@
+import { processColor } from 'react-native';
+
+// @ts-expect-error createStyleObject is not available in the type exports, it is still exported though
+import { createStyleObject } from 'react-syntax-highlighter/dist/esm/create-element';
+
+import type { ColorRange } from '../SyntaxHighlighter';
+import type { SyntaxHighlighterStylesheet } from '../types';
+
+type FlattenOptions = {
+  nodes: rendererNode | rendererNode[];
+  stylesheet: SyntaxHighlighterStylesheet;
+  defaultColor: string;
+  fontFamily?: string;
+  fontSize?: number;
+};
+
+export const flattenNodesToTextAndColorRanges = ({
+  nodes,
+  stylesheet,
+  defaultColor,
+  fontFamily,
+  fontSize = 13,
+}: FlattenOptions): { text: string; ranges: ColorRange[] } => {
+  let text = '';
+  const rawRanges: { start: number; end: number; color: string | number }[] = [];
+
+  const startingStyle = { fontFamily, fontSize };
+
+  const walk = (node: rendererNode | null | undefined, inheritedColor: string | number) => {
+    if (!node) return;
+
+    const { type, tagName, value, properties } = node;
+
+    // leaf node
+    if (type === 'text') {
+      if (value == null || value === '') return;
+      const chunk = String(value);
+      const start = text.length;
+      text += chunk;
+
+      const color = inheritedColor ?? defaultColor;
+      if (color != null && chunk.length) {
+        rawRanges.push({ start, end: start + chunk.length, color });
+      }
+      return;
+    }
+
+    // node with children
+    if (tagName) {
+      const baseStyle =
+        properties && properties.className
+          ? createStyleObject(
+              properties.className,
+              Object.assign({ color: defaultColor }, properties.style, startingStyle),
+              stylesheet,
+            )
+          : { ...startingStyle, color: defaultColor };
+
+      // we take the node's color if present, then its inherited color
+      // if present and finally the block's default color if all else
+      // fails.
+      const effectiveColor =
+        (baseStyle as { color?: string | number }).color ?? inheritedColor ?? defaultColor;
+
+      const children = node.children || [];
+      const childArray = Array.isArray(children) ? children : [children];
+      for (let i = 0; i < childArray.length; i++) {
+        walk(childArray[i], effectiveColor);
+      }
+      return;
+    }
+
+    // fallback
+    if (value != null) {
+      const chunk = String(value);
+      const start = text.length;
+      text += chunk;
+      const color = inheritedColor ?? defaultColor;
+      if (color != null && chunk.length) {
+        rawRanges.push({ start, end: start + chunk.length, color });
+      }
+    }
+  };
+
+  // Recursively flatten nodes
+  const nodeArray = Array.isArray(nodes) ? nodes : [nodes];
+  for (let i = 0; i < nodeArray.length; i++) {
+    walk(nodeArray[i], defaultColor);
+  }
+
+  // Merge adjacent ranges with same color and convert them to integers
+  rawRanges.sort((a, b) => a.start - b.start);
+  const merged: ColorRange[] = [];
+  for (let i = 0; i < rawRanges.length; i++) {
+    const r = rawRanges[i]!;
+    // in case the color is malformed for some reason, use the defaultColor
+    // as this one should always be non-nullish.
+    const colorInt = processColor(r.color)!; // ?? processColor(defaultColor))!;
+
+    if (!merged.length) {
+      merged.push({ start: r.start, end: r.end, color: colorInt });
+      continue;
+    }
+
+    const last = merged[merged.length - 1];
+    if (last && last.end === r.start && last.color === colorInt) {
+      last.end = r.end;
+    } else {
+      merged.push({ start: r.start, end: r.end, color: colorInt });
+    }
+  }
+
+  return { text, ranges: merged };
+};
+
+export const flattenRowsToTextAndColorRanges = (
+  rows: rendererNode[],
+  opts: Omit<FlattenOptions, 'nodes'>,
+): { text: string; ranges: ColorRange[] } => {
+  let fullText = '';
+  const fullRanges: ColorRange[] = [];
+
+  for (let rowIndex = 0; rowIndex < rows.length; rowIndex++) {
+    const rowNodes = rows[rowIndex];
+
+    const { text, ranges } = flattenNodesToTextAndColorRanges({
+      ...opts,
+      nodes: rowNodes ?? [],
+    });
+
+    const offset = fullText.length;
+    fullText += text;
+
+    // Add newline between rows (no color)
+    if (rowIndex < rows.length - 1) {
+      fullText += '\n';
+    }
+
+    // Shift ranges by current offset & push
+    for (const r of ranges) {
+      fullRanges.push({
+        start: r.start + offset,
+        end: r.end + offset,
+        color: r.color,
+      });
+    }
+  }
+
+  return { text: fullText, ranges: fullRanges };
+};

package/src/ai-components/syntax-highlighting/utils/index.ts

@@ -0,0 +1,3 @@
+export * from './converter';
+export * from './flatten-nodes';
+export * from './renderer';

package/src/ai-components/syntax-highlighting/utils/renderer.tsx

@@ -0,0 +1,151 @@
+import React from 'react';
+import { Platform, Text } from 'react-native';
+
+import type { SyntaxHighlighterProps } from 'react-syntax-highlighter';
+
+// @ts-expect-error createStyleObject is not available in the type exports, it is still exported though
+import { createStyleObject } from 'react-syntax-highlighter/dist/esm/create-element';
+
+import { cssToRNTextStyle } from './converter';
+
+import { AndroidNativeRenderer } from '../components';
+import type {
+  NativeSyntaxHighlighterProps,
+  RNSheet,
+  RNStyle,
+  SyntaxHighlighterStylesheet,
+} from '../types';
+
+export const DEFAULT_FONT_SIZE = 13;
+
+export const generateNewStylesheet = ({
+  stylesheet,
+  highlighter,
+}: {
+  stylesheet: SyntaxHighlighterStylesheet;
+  highlighter: NativeSyntaxHighlighterProps['highlighter'];
+}) => {
+  stylesheet = Array.isArray(stylesheet) ? stylesheet[0] : stylesheet;
+
+  const transformedStyle = Object.entries(stylesheet ?? {}).reduce<RNSheet>(
+    (newStylesheet, [className, style]) => {
+      const rn = cssToRNTextStyle(style);
+
+      newStylesheet[className] = rn as RNStyle;
+      return newStylesheet;
+    },
+    {},
+  );
+
+  const topLevel = (
+    highlighter === 'prism' ? transformedStyle['pre[class*="language-"]'] : transformedStyle.hljs
+  ) as RNStyle;
+
+  const defaultColor = (topLevel && topLevel.color) || '#000';
+
+  return { transformedStyle, defaultColor };
+};
+
+export const createChildren = ({
+  stylesheet,
+  fontSize,
+  fontFamily,
+}: {
+  stylesheet: SyntaxHighlighterStylesheet;
+  fontSize?: number;
+  fontFamily?: string;
+}) => {
+  let childrenCount = 0;
+  return (children: rendererNode['children'], defaultColor: string) => {
+    childrenCount += 1;
+    return (children ?? []).map((child, i) =>
+      createNativeElement({
+        node: child,
+        stylesheet,
+        key: `code-segment-${childrenCount}-${i}`,
+        defaultColor,
+        fontSize,
+        fontFamily,
+      }),
+    );
+  };
+};
+
+export const createNativeElement = ({
+  node,
+  stylesheet,
+  key,
+  defaultColor,
+  fontFamily,
+  fontSize = DEFAULT_FONT_SIZE,
+}: {
+  node: rendererNode;
+  stylesheet: SyntaxHighlighterStylesheet;
+  key: string;
+  defaultColor: string;
+  fontFamily?: string;
+  fontSize?: number;
+}) => {
+  const { properties, type, tagName: TagName, value } = node;
+  const startingStyle = { fontFamily, fontSize };
+  if (type === 'text') {
+    return (
+      <Text key={key} style={Object.assign({ color: defaultColor }, startingStyle)}>
+        {value}
+      </Text>
+    );
+  } else if (TagName) {
+    const childrenFactory = createChildren({
+      stylesheet,
+      fontSize,
+      fontFamily,
+    });
+    const style = properties
+      ? createStyleObject(
+          properties.className,
+          Object.assign({ color: defaultColor }, properties.style, startingStyle),
+          stylesheet,
+        )
+      : {};
+    const children = childrenFactory(node.children, style.color || defaultColor);
+    return (
+      <Text key={key} style={style}>
+        {children}
+      </Text>
+    );
+  }
+  return null;
+};
+
+export const nativeRenderer = ({
+  defaultColor,
+  fontFamily,
+  fontSize = 13,
+}: {
+  defaultColor: string;
+  fontFamily?: string;
+  fontSize?: number;
+}): SyntaxHighlighterProps['renderer'] => {
+  return ({ rows, stylesheet }) =>
+    Platform.OS === 'android' ? (
+      <AndroidNativeRenderer
+        rows={rows}
+        stylesheet={stylesheet}
+        defaultColor={defaultColor}
+        fontFamily={fontFamily}
+        fontSize={fontSize}
+        lineHeight={fontSize - 4}
+      />
+    ) : (
+      rows.map((node, i) =>
+        createNativeElement({
+          node,
+          stylesheet,
+          key: `code-segment-${i}`,
+          defaultColor,
+          fontFamily,
+          fontSize,
+        }),
+      )
+    );
+};

package/src/ai-components/theme.ts

@@ -0,0 +1,138 @@
+import type { ImageStyle, TextStyle, ViewStyle } from 'react-native';
+
+import type { MarkdownStyle } from './markdown';
+
+export const colors = {
+  accent_blue: '#005FFF',
+  accent_red: '#FF3742',
+  black: '#000000',
+  code_block: '#DDDDDD',
+  grey: '#7A7A7A',
+  grey_neutral: '#9E9E9E',
+  grey_dark: '#72767E',
+  grey_gainsboro: '#DBDBDB',
+  grey_whisper: '#ECEBEB',
+  overlay: '#000000CC',
+  transparent: 'transparent',
+  white: '#FFFFFF',
+  white_smoke: '#F2F2F2',
+  shimmer: '#FFFFFF',
+};
+
+export type Theme = {
+  colors: typeof colors;
+  markdown: MarkdownStyle;
+  composer: {
+    container: ViewStyle;
+    containerRow: ViewStyle;
+    inputPillHeight: number;
+    inputPillContainer: ViewStyle;
+    inputPill: ViewStyle;
+    textInput: TextStyle;
+    roundButton: ViewStyle;
+    attachIcon: TextStyle;
+    mediaPreviewStyle: ViewStyle;
+    mediaPreviewContentContainerStyle: ViewStyle;
+    mediaPreviewImage: ImageStyle;
+    mediaPreviewRemoveButton: ViewStyle;
+    micIcon: ViewStyle;
+    sendIcon: ViewStyle;
+    stopGeneratingIcon: ViewStyle;
+    iconButton: ViewStyle;
+  };
+  sheet: {
+    contentContainer: ViewStyle;
+    quickActionsCard: ViewStyle;
+    divider: ViewStyle;
+    listSection: ViewStyle;
+    quickAction: ViewStyle;
+    quickActionLabel: TextStyle;
+    listItem: ViewStyle;
+    listIcon: ViewStyle;
+    listTextContainer: ViewStyle;
+    listTitle: TextStyle;
+    listSubtitle: TextStyle;
+  };
+  aiTypingIndicatorView: {
+    text: TextStyle;
+  };
+};
+
+export const defaultTheme: Theme = {
+  colors,
+  markdown: {
+    autolink: {},
+    blockQuoteSection: {},
+    blockQuoteSectionBar: {},
+    blockQuoteText: {},
+    strong: {},
+    codeBlock: {},
+    codeBlockWrapper: {},
+    codeBlockContainer: {},
+    codeBlockHeaderContainer: {},
+    codeBlockHeaderTitle: {},
+    em: {},
+    heading: {},
+    heading1: {},
+    heading2: {},
+    heading3: {},
+    heading4: {},
+    heading5: {},
+    heading6: {},
+    hr: {},
+    inlineCode: {},
+    br: {},
+    list: {},
+    listItem: {},
+    listItemBullet: {},
+    listItemNumber: {},
+    listItemText: {},
+    listRow: {},
+    sublist: {},
+    url: {},
+    noMargin: {},
+    paragraph: {},
+    paragraphCenter: {},
+    del: {},
+    text: {},
+    table: {},
+    tableRow: {},
+    tableRowCell: {},
+    tableHeader: {},
+    tableHeaderCell: {},
+  },
+  composer: {
+    container: {},
+    containerRow: {},
+    inputPillHeight: 48,
+    inputPillContainer: {},
+    inputPill: {},
+    textInput: {},
+    roundButton: {},
+    attachIcon: {},
+    mediaPreviewStyle: {},
+    mediaPreviewContentContainerStyle: {},
+    mediaPreviewImage: {},
+    mediaPreviewRemoveButton: {},
+    micIcon: {},
+    sendIcon: {},
+    stopGeneratingIcon: {},
+    iconButton: {},
+  },
+  sheet: {
+    contentContainer: {},
+    quickActionsCard: {},
+    divider: {},
+    listSection: {},
+    quickAction: {},
+    quickActionLabel: {},
+    listItem: {},
+    listIcon: {},
+    listTextContainer: {},
+    listTitle: {},
+    listSubtitle: {},
+  },
+  aiTypingIndicatorView: {
+    text: {},
+  },
+};

package/src/ai-components/transcription/useDictation.ts

@@ -0,0 +1,106 @@
+import { useCallback, useEffect } from 'react';
+import { PermissionsAndroid, Platform } from 'react-native';
+
+import { useStateStore } from '@stream-io/state-store/react-bindings';
+
+import { useStableCallback } from '../internal/hooks/useStableCallback';
+import { AIDictation } from '../native/AIDictation';
+import type { DictationResult, DictationStartOptions } from '../native-specs/NativeAIDictation';
+import { dictationStore, type DictationStoreState } from '../store';
+
+const DEFAULT_OPTIONS = {
+  language: 'en-US',
+  interimResults: true,
+  silenceTimeoutMs: 2500,
+};
+
+const ensureAndroidRecordingPermissions = async (): Promise<boolean> => {
+  if (Platform.OS !== 'android') return true;
+
+  const granted = await PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.RECORD_AUDIO);
+
+  return granted === PermissionsAndroid.RESULTS.GRANTED;
+};
+
+const selector = ({ isRecording }: DictationStoreState) => ({
+  isRecording,
+});
+
+// TODO: add proper jsdocs
+export const useDictation = (defaultOptions: DictationStartOptions = DEFAULT_OPTIONS) => {
+  const { isRecording } = useStateStore(dictationStore, selector);
+
+  useEffect(() => {
+    const unsubscribeResult = AIDictation.addResultListener((result: DictationResult) => {
+      dictationStore.partialNext({
+        transcript: result.text,
+        ...(result.isFinal ? { isRecording: false, state: 'idle' } : {}),
+      });
+    });
+
+    const unsubscribeState = AIDictation.addStateListener(({ state: next }) => {
+      dictationStore.partialNext({
+        state: next,
+        isRecording: next === 'listening' || next === 'starting',
+      });
+    });
+
+    const unsubscribeError = AIDictation.addErrorListener((error) => {
+      dictationStore.partialNext({ error, isRecording: false, state: 'idle' });
+    });
+
+    return () => {
+      unsubscribeResult();
+      unsubscribeState();
+      unsubscribeError();
+    };
+  }, []);
+
+  const start = useCallback(
+    async (override?: DictationStartOptions) => {
+      const hasPermission = await ensureAndroidRecordingPermissions();
+      if (!hasPermission) {
+        dictationStore.partialNext({
+          error: {
+            code: 'NO_PERMISSION',
+            message: 'Microphone permission not granted',
+          },
+        });
+        return;
+      }
+
+      dictationStore.partialNext({ error: null, transcript: '' });
+
+      const opts: DictationStartOptions = {
+        ...defaultOptions,
+        ...override,
+      };
+
+      AIDictation.start(opts);
+    },
+    [defaultOptions],
+  );
+
+  const stop = useCallback(() => {
+    AIDictation.stop();
+  }, []);
+
+  const cancel = useCallback(() => {
+    AIDictation.cancel();
+  }, []);
+
+  const toggle = useStableCallback(() => {
+    if (isRecording) {
+      stop();
+    } else {
+      void start();
+    }
+  });
+
+  return {
+    start,
+    stop,
+    toggle,
+    cancel,
+  };
+};