stream-chat-react-native-core 10.0.0-rc.1 → 10.0.0-rc.2

package/src/a11y/hooks/useResolvedModalAccessibilityProps.ts

@@ -9,15 +9,11 @@ export type ResolvedModalAccessibilityProps = {
 };
 
 /**
- * Returns the platform-appropriate set of a11y props for a modal/sheet root.
- * Equivalent of stream-chat-react's `useResolvedModalAriaProps` — but aware of
- * RN's iOS-vs-Android split:
- *   - iOS uses `accessibilityViewIsModal` to trap focus.
- *   - Android uses `importantForAccessibility="yes"` on the modal root and
- *     `"no-hide-descendants"` on background siblings (caller's responsibility).
+ * Returns the accessibility props for a modal or sheet root: `accessibilityViewIsModal` on iOS
+ * to trap focus, `importantForAccessibility="yes"` on Android. On Android the caller must also set
+ * `"no-hide-descendants"` on background siblings.
  *
- * Returns an empty object when AccessibilityContext is disabled, so the modal
- * stays a no-op for integrators that haven't opted in.
+ * @returns The props to spread on the root, or an empty object when accessibility is disabled.
  */
 export const useResolvedModalAccessibilityProps = (): ResolvedModalAccessibilityProps => {
   const { enabled } = useAccessibilityContext();

package/src/a11y/hooks/useScreenReaderEnabled.ts

@@ -2,12 +2,10 @@ import { useAccessibilityContext } from '../../contexts/accessibilityContext/Acc
 import { useScreenReaderContext } from '../../contexts/screenReaderContext/ScreenReaderContext';
 
 /**
- * Returns the live screen-reader state from the app-wide {@link ScreenReaderContext}.
- * Returns false when the AccessibilityContext is disabled, regardless of the OS state,
- * so consumers don't pay the listener cost when the SDK's a11y is opted out.
+ * Reads the screen-reader state from the app-wide {@link ScreenReaderContext}.
  *
- * `forceScreenReaderMode: true` in the config short-circuits to true (used in tests
- * and for integrator preview).
+ * @returns Whether a screen reader is on. False when accessibility is disabled, whatever the OS
+ * reports; true when `forceScreenReaderMode` is set in the accessibility config.
  */
 export const useScreenReaderEnabled = (): boolean => {
   const { enabled, forceScreenReaderMode } = useAccessibilityContext();

package/src/a11y/hooks/useScreenReaderMountFocus.ts

@@ -7,9 +7,10 @@ import {
 } from './useSetAccessibilityFocus';
 
 /**
- * Moves the screen reader cursor onto `target` as it mounts (and refires once the
- * screen reader state resolves, since that is detected asynchronously). Like
- * {@link useSetAccessibilityFocus}, it only moves accessibility focus.
+ * Moves the screen reader cursor onto `target` on mount, and again once the asynchronously detected
+ * screen reader state resolves. Like {@link useSetAccessibilityFocus}, it only moves focus.
+ *
+ * @param target The ref or native node handle to focus.
  */
 export const useScreenReaderMountFocus = (target: AccessibilityFocusTarget) => {
   const setAccessibilityFocus = useSetAccessibilityFocus();

package/src/a11y/hooks/useSetAccessibilityFocus.ts

@@ -5,10 +5,7 @@ import { useScreenReaderEnabled } from './useScreenReaderEnabled';
 
 type FindNodeHandleArg = Parameters<typeof findNodeHandle>[0];
 
-/**
- * Something the screen reader cursor can be moved onto: a ref (whose `.current` is
- * read at call time), a raw native node handle, or nothing.
- */
+/** A ref (its `.current` is read at call time), a native node handle, or nothing. */
 export type AccessibilityFocusTarget = RefObject<unknown> | number | null | undefined;
 
 const resolveNode = (target: AccessibilityFocusTarget): number | null => {
@@ -23,29 +20,19 @@ const resolveNode = (target: AccessibilityFocusTarget): number | null => {
 };
 
 /**
- * Returns a stable callback that moves the screen reader cursor onto a given
- * target (a ref or a raw node handle). It ONLY moves accessibility focus and it
- * does not activate the target: i.e no keyboard opens and no field becomes first
- * responder. The user still double taps to act on whatever is focused.
- *
- * The target's `.current` is read at call time, so this is safe to wire into a
- * deferred/event callback.
+ * Returns a stable callback that moves the screen reader cursor onto a target on the next frame.
+ * It only moves accessibility focus: it opens no keyboard and does not activate the target.
+ * Does nothing unless a screen reader is running (see {@link useScreenReaderEnabled}).
  *
- * Noop unless a screen reader is running. {@link useScreenReaderEnabled} returns
- * false whenever the SDK's accessibility config is disabled, so this costs nothing
- * for the default (a11y opted out) configuration.
+ * Focus set on mount only sticks on Android forward navigation. On iOS forward navigation and on
+ * back navigation, set it after the screen transition completes (React Navigation's
+ * `transitionEnd`); {@link useScreenReaderMountFocus} covers the mount case.
  *
- * Note: Navigation timing is platform nuanced: Android forward navigation lands a focus
- * set on mount, whereas iOS forward navigation and back navigation on both
- * platforms need it set after the screen transition completes (React Navigation's
- * `transitionEnd`). {@link useScreenReaderMountFocus} covers the mount case; wire
- * `transitionEnd` yourself for the rest (the SampleApp's
- * `useScreenReaderComposerFocusEffect` is a reference implementation).
+ * @returns A callback taking the {@link AccessibilityFocusTarget} to focus.
  */
 export const useSetAccessibilityFocus = () => {
   const screenReaderEnabled = useScreenReaderEnabled();
-  // Track the latest value so the returned callback can stay referentially stable
-  // (it's typically wired into a focus effect and read much later).
+  // A ref keeps the returned callback referentially stable while reading the latest value.
   const screenReaderEnabledRef = useRef(screenReaderEnabled);
   screenReaderEnabledRef.current = screenReaderEnabled;
 
@@ -71,7 +58,7 @@ export const useSetAccessibilityFocus = () => {
     if (rafRef.current != null) {
       cancelAnimationFrame(rafRef.current);
     }
-    // Defer a frame so the target has laid out before we move the cursor onto it.
+    // Defer a frame so the target has laid out before the cursor moves onto it.
     rafRef.current = requestAnimationFrame(() => {
       rafRef.current = null;
       AccessibilityInfo.setAccessibilityFocus(node);

package/src/ai-components/AITypingIndicatorView.tsx

@@ -13,8 +13,7 @@ export const AITypingIndicatorView = ({ text }: { text: string }) => {
   } = useTheme();
   const styles = useStyles();
 
-  // The native shimmer paints behind its children, so it is laid over the text instead: the
-  // highlight has to sweep across the glyphs, which a transparent background would otherwise hide.
+  // The native shimmer paints behind its children, so it overlays the text.
   return (
     <View style={styles.wrapper}>
       <Text style={styles.text}>{text}</Text>
@@ -35,7 +34,7 @@ const useStyles = () => {
   return useMemo(
     () =>
       StyleSheet.create({
-        // The native highlight band is soft and wide, so it is kept fairly strong over the text.
+        // The native highlight band is soft and wide, so the opacity stays high.
         shimmer: { opacity: 0.8 },
         text: {
           fontSize: 16,

package/src/ai-components/__tests__/Markdown.test.tsx

@@ -40,6 +40,26 @@ describe('ai-components Markdown', () => {
     expect(onLink).toHaveBeenCalledWith('https://getstream.io');
   });
 
+  it('logs a rejected onLink without leaving an unhandled rejection', async () => {
+    const unhandled = jest.fn();
+    process.on('unhandledRejection', unhandled);
+    const logSpy = jest.spyOn(console, 'log').mockImplementation(() => {});
+    const onLink = jest.fn().mockRejectedValue(new Error('cannot open'));
+
+    try {
+      renderMarkdown('[docs](https://getstream.io)', { onLink });
+      fireEvent.press(screen.getByText('docs'));
+      await new Promise((resolve) => setTimeout(resolve, 0));
+
+      expect(onLink).toHaveBeenCalledWith('https://getstream.io');
+      expect(logSpy).toHaveBeenCalledWith(expect.stringContaining('cannot open'));
+      expect(unhandled).not.toHaveBeenCalled();
+    } finally {
+      process.off('unhandledRejection', unhandled);
+      logSpy.mockRestore();
+    }
+  });
+
   it('renders tables, block quotes, inline code and horizontal rules', () => {
     renderMarkdown('| a | b |\n|---|---|\n| 1 | 2 |\n\n> quoted\n\nuse `npm i`\n\n---\n\nafter');
 

package/src/ai-components/__tests__/charts.test.ts

@@ -97,7 +97,10 @@ describe('ai-components chart parsers', () => {
           }),
         ),
       ).toThrow();
-      expect(() => parseJsonChart('{ not json')).toThrow();
+    });
+
+    it('rejects invalid JSON with the same error as an unsupported chart', () => {
+      expect(() => parseJsonChart('{ not json')).toThrow('Unknown type of JSON formatted chart.');
     });
   });
 

package/src/ai-components/charts/components/PieLegend.tsx

@@ -37,7 +37,7 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     gap: 6,
-    maxWidth: '48%', // lets two items sit per row, tweak as needed
+    maxWidth: '48%', // Two items per row.
   },
   swatch: {
     borderRadius: 2,

package/src/ai-components/charts/components/VictoryChart.tsx

@@ -2,16 +2,7 @@ import React from 'react';
 import { Platform, View } from 'react-native';
 
 import { LinearGradient, matchFont, vec } from '@shopify/react-native-skia';
-import {
-  Area,
-  Bar,
-  CartesianChart,
-  Line,
-  Pie,
-  PolarChart,
-  Scatter,
-  // useChartTransformState,
-} from 'victory-native';
+import { Area, Bar, CartesianChart, Line, Pie, PolarChart, Scatter } from 'victory-native';
 
 import { PieLegend } from './PieLegend';
 
@@ -40,11 +31,6 @@ const DEFAULT_WIDTH = 225;
 export const VictoryChart = (props: VictoryChartProps) => {
   const { spec, height = DEFAULT_HEIGHT, width = DEFAULT_WIDTH } = props;
 
-  // const { state: transformState } = useChartTransformState({
-  //   scaleX: 1.5,
-  //   scaleY: 1.0,
-  // });
-
   if (spec.type === 'pie') {
     if (!spec?.data.length) return null;
     return (
@@ -128,11 +114,6 @@ export const VictoryChart = (props: VictoryChartProps) => {
         }}
         yAxis={[{ font }]}
         padding={{ bottom: hasLongLabels ? 2 * maxTickCharCount + 12 : 0 }}
-        // transformState={transformState}
-        // transformConfig={{
-        //   pinch: { enabled: false },
-        //   pan: { enabled: true, dimensions: 'x', activateAfterLongPress: 10 },
-        // }}
       >
         {({ points, chartBounds }) => (
           <>

package/src/ai-components/charts/index.ts

@@ -1,13 +1,9 @@
-// components
 export * from './Chart';
 export * from './components';
 
-// schemas and parsers
 export * from './vega-lite';
 export * from './mermaid';
 
-// utils
 export * from './utils';
 
-// types
 export * from './types';

package/src/ai-components/charts/types.ts

@@ -1,13 +1,12 @@
 export type Dim = string;
 
 export type Datum = {
-  /** The categorical/temporal dimension (label, category, or time). */
+  /** The categorical or temporal dimension: a label, category or time. */
   dimension: Dim;
-  /** The numeric measure/value. */
   value: number;
-  /** Color for this datum; the renderer will fall back to series color. */
+  /** Color of this datum. In non-pie charts, datums sharing a color form one series. */
   color: string;
-  /** Optional series key for multi-series charts (e.g., region). */
+  /** Optional series key for multi-series charts. */
   series?: string;
 };
 

package/src/ai-components/charts/utils/generate-pie-colors.ts

@@ -1,5 +1,4 @@
 /* eslint-disable no-bitwise -- FNV-1a hashing and xorshift PRNG are bitwise by definition */
-// hashing and rng
 export const hashLabel = (raw: string) => {
   const s = raw.trim().toLowerCase().normalize('NFKC');
   let h = 2166136261 >>> 0; // FNV-1a
@@ -20,7 +19,6 @@ export const xorshift32 = (seed: number) => {
   };
 };
 
-// color utils
 export const hslToHex = (h: number, s = 68, l = 52) => {
   const S = s / 100,
     L = l / 100;
@@ -51,7 +49,8 @@ export const hslToHex = (h: number, s = 68, l = 52) => {
   return `#${r}${g}${b}`;
 };
 
-// ensure hues not closer than MIN_SEP degrees within the same chart
+// Derives a stable color from `label`. Its hue is nudged away from `usedHues` (by at least
+// `minSep` degrees, over at most 48 attempts) and then appended to `usedHues`.
 export const colorFromLabel = (
   label: string,
   usedHues: number[],
@@ -61,10 +60,9 @@ export const colorFromLabel = (
   const seed = hashLabel(label);
   const rand = xorshift32(seed);
 
-  // base hue from RNG (looks random, but stable)
+  // Seeded by the label, so the base hue is stable.
   let hue = Math.floor(rand() * 360);
 
-  // nudge away from already used hues in THIS chart
   let attempts = 0;
   const tooClose = (h: number) =>
     usedHues.some((u) => {

package/src/ai-components/charts/utils/parse-json-chart.ts

@@ -2,13 +2,11 @@ import type { ChartSpec } from '../types';
 import { parseVegalite, VegaLiteSchema } from '../vega-lite';
 
 export const parseJsonChart = (code: string): ChartSpec => {
-  const json = JSON.parse(code);
-
   try {
-    const parsedVegaLite = VegaLiteSchema.parse(json);
+    const parsedVegaLite = VegaLiteSchema.parse(JSON.parse(code));
     return parseVegalite(parsedVegaLite);
   } catch (_error) {
-    /* do nothing */
+    // Invalid JSON or not a supported chart spec: fall through to the error below.
   }
 
   throw new Error('Unknown type of JSON formatted chart.');

package/src/ai-components/charts/vega-lite/schema.ts

@@ -1,6 +1,5 @@
 import { z } from 'zod';
 
-/* primitives */
 export const VLType = z.enum(['quantitative', 'ordinal', 'nominal', 'temporal']);
 
 const FieldRef = z.object({
@@ -14,29 +13,13 @@ const ColorXY = z.object({
 });
 const ColorPie = z.object({ field: z.string(), type: VLType.optional() });
 
-/* we support only these currently */
-const MarkName = z.enum([
-  'bar',
-  'line',
-  'area',
-  'point',
-  'arc',
-  // 'rect',
-  // 'rule',
-  // 'text',
-  // 'tick',
-  // 'circle',
-  // 'square',
-  // 'trail',
-  // 'geoshape',
-  // 'image',
-]);
+// Supported mark types.
+const MarkName = z.enum(['bar', 'line', 'area', 'point', 'arc']);
 
 const MarkDef = z.looseObject({
   type: z.union([MarkName, z.string()]).optional(),
 });
 
-/* encodings */
 const XyEncoding = z.object({
   x: FieldRef,
   y: FieldRef,
@@ -48,7 +31,6 @@ const PieEncoding = z.object({
   color: ColorPie.optional(),
 });
 
-/* base spec */
 const BaseVL = z.object({
   archetype: z.literal('vegalite'),
   $schema: z.string().optional(),
@@ -61,7 +43,6 @@ const BaseVL = z.object({
   markName: MarkName,
 });
 
-/* branches (with explicit kind) */
 const VL_XY = BaseVL.extend({
   type: z.literal('xy'),
   encoding: XyEncoding,
@@ -97,7 +78,8 @@ const deriveMarkName = (o: any): string | undefined => {
 
 export const VegaLiteCore = z.discriminatedUnion('type', [VL_XY, VL_PIE]);
 
-/* final schema: preprocess to inject needed metadata, then discriminated union */
+// Injects `type` (`pie` for an `arc` mark or a `theta` encoding, else `xy`), `archetype` and
+// `markName`, then validates against the discriminated union.
 export const VegaLiteSchema = z.preprocess((raw) => {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any -- untyped JSON input, validated by the zod schema below
   const o: any = raw ?? {};

package/src/ai-components/components/BottomSheet.tsx

@@ -75,7 +75,7 @@ export function BottomSheet({ children }: Props) {
           : next;
     })
     .onEnd((e) => {
-      // very basic momentum bias
+      // Snap to the nearest end, biased by the release velocity.
       const projected = e.translationY + e.velocityY * 0.15;
       const nearest = projected >= bottomSheetHeight * 0.5 ? maxTranslateY : bottomSheetY;
       translateY.value = withTiming(nearest, SPRING, (finished) => {

package/src/ai-components/index.ts

@@ -1,4 +1,3 @@
-// primitives
 export * from './markdown';
 export * from './syntax-highlighting';
 export * from './charts';
@@ -6,24 +5,18 @@ export * from './message-composer';
 export * from './StreamingMessageView';
 export * from './AITypingIndicatorView';
 
-// components
 export * from './components';
 
-// contexts
 export * from './contexts';
 
-// services
 export * from './services';
 export * from './transcription/useDictation';
 export { isDictationAvailable } from './native/AIDictation';
 
-// state-stores
 export * from './store';
 
-// theme
 export * from './theme';
 
-// Native handler registration, used by the `stream-chat-react-native/ai-components` and
-// `stream-chat-expo/ai-components` entry points to register only the native pieces this entry
-// point needs (without importing, and therefore bundling, the main SDK entry point).
+// Lets the `stream-chat-react-native/ai-components` and `stream-chat-expo/ai-components` entry
+// points register only the native pieces needed here, without bundling the main SDK entry point.
 export { registerNativeHandlers } from '../native';

package/src/ai-components/internal/hooks/useStableCallback.ts

@@ -3,27 +3,14 @@ import { useCallback, useRef } from 'react';
 export type StableCallback<A extends unknown[], R> = (...args: A) => R;
 
 /**
- * A utility hook implementing a stable callback. It takes in an unstable method that
- * is supposed to be invoked somewhere deeper in the DOM tree without making it
- * change its reference every time the parent component rerenders. It will also return
- * the value of the callback if it does return one.
- * A common use-case would be having a function whose invocation depends on state
- * somewhere high up in the DOM tree and wanting to use the same function deeper
- * down, for example in a leaf node and simply using useCallback results in
- * cascading dependency hell. If we wrap it in useStableCallback, we would be able
- * to:
- * - Use the same function as a dependency of another hook (since it is stable)
- * - Still invoke it and get the latest state
+ * Returns a function with a stable identity that always calls the latest `callback`, so it is safe
+ * as a hook dependency without stale closures.
  *
- * **Caveats:**
- * - Never wrap a function that is supposed to return a React.ReactElement in
- *   useStableCallback, since React will not know that the DOM needs to be updated
- *   whenever the callback value changes (for example, renderItem from FlatList must
- *   never be wrapped in this hook)
- * - Always prefer using a standard useCallback/stable function wherever possible
- *   (the purpose of useStableCallback is to bridge the gap between top level contexts
- *   and cascading rereders in downstream components - **not** as an escape hatch)
- * @param callback - the callback we want to stabilize
+ * Do not wrap functions that return elements (such as a list render function): React cannot tell
+ * when their output should change. Prefer a plain `useCallback` where it suffices.
+ *
+ * @param callback The function to stabilize.
+ * @returns The stable function, returning whatever `callback` returns.
  */
 export const useStableCallback = <A extends unknown[], R>(
   callback: StableCallback<A, R>,

package/src/ai-components/internal/icons/SendUp.tsx

@@ -10,7 +10,6 @@ type Props = IconProps & {
 
 export const SendUp = ({ size, ...rest }: Props) => (
   <Svg height={size} viewBox={`0 0 ${size} ${size}`} width={size} {...rest} testID='send-up'>
-    {/*<Circle cx={size / 2} cy={size / 2} r={size / 2} {...rest} />*/}
     <Path
       clipRule='evenodd'
       d='M14.6673 16V22.6667H17.334V16H22.6673L16.0007 9.33337L9.33398 16H14.6673Z'

package/src/ai-components/markdown/components/CodeBlock.tsx

@@ -64,7 +64,7 @@ export const CodeBlock = React.memo(({ styles, node }: MarkdownComponentProps) =
         return <Chart spec={parsed} />;
       }
     } catch (_e) {
-      /* do nothing */
+      // Not a renderable chart: fall back to the code block below.
     }
   }
 
@@ -75,7 +75,7 @@ export const CodeBlock = React.memo(({ styles, node }: MarkdownComponentProps) =
         return <Chart spec={parsed} />;
       }
     } catch (_e) {
-      /* do nothing */
+      // Not a renderable chart: fall back to the code block below.
     }
   }
 

package/src/ai-components/markdown/components/Table.tsx

@@ -18,9 +18,8 @@ export const Table = ({ node, output, styles, state }: MarkdownComponentProps) =
 );
 
 const transpose = (matrix: SingleASTNode[][]) =>
-  // TS gets confused because it considers the matrix to be potentially ragged,
-  // while the markdown parser can never output a ragged matrix of AST nodes
-  // when parsing a table. Hence, we use the forced type coercion.
+  // TS treats the matrix as potentially ragged, but the markdown parser never outputs a ragged
+  // table, so the non-null assertion is safe.
   (matrix[0] ?? []).map((_, colIndex) => matrix.map((row) => row[colIndex]!));
 
 const MarkdownTable = ({ node, output, state, styles }: MarkdownOutputProps) => {

package/src/ai-components/markdown/rules.ts

@@ -40,10 +40,7 @@ import type {
 } from './types';
 
 const LINK_INSIDE = '(?:\\[(?:\\\\.|[^\\\\\\[\\]])*\\]|\\\\.|[^\\[\\]\\\\])*';
-/**
- * Href + optional title (escape-aware). Group 1 === href (angle or bare).
- * The title is in groups 2, 3 or 4.
- */
+/** Href (group 1, angle-bracketed or bare) and an optional escape-aware title (groups 2 to 4). */
 const LINK_HREF_AND_TITLE =
   '\\s*<?([^\\s>]*?)>?\\s*' + // 1: href
   '(?:' +
@@ -61,7 +58,7 @@ export const getLocalRules = (
   const { onLink, paragraphNumberOfLines } = opts;
   const openLinkHandler = (target: string) => {
     if (onLink) {
-      // user-supplied handler may be async; we keep the behavior
+      // `onLink` may be async: nothing awaits this press handler, so a rejection is only logged.
       Promise.resolve(onLink(target)).catch((error: unknown) => {
         const msg =
           error && typeof error === 'object' && 'toString' in error
@@ -69,7 +66,6 @@ export const getLocalRules = (
             : 'Unknown error';
 
         console.log('There has been a problem with this action. ' + msg);
-        throw error;
       });
     }
   };
@@ -98,9 +94,8 @@ export const getLocalRules = (
     let lang = (capture[2] || '').trim() || undefined;
     let content = capture[3] || '';
 
-    // If we've found no lang on the fence line (the opening fence) but the first code line
-    // is a lone token, treat it as lang and strip it from content. Helps with some specific
-    // use-cases such as "```<newline>sql<newline>...".
+    // Without a language on the opening fence line, a lone-token first code line is taken as the
+    // language and stripped from the content, as in "```<newline>sql<newline>...".
     if (!lang) {
       const nl = content.indexOf('\n');
       const firstLine = (nl === -1 ? content : content.slice(0, nl)).trim();
@@ -110,7 +105,7 @@ export const getLocalRules = (
       }
     }
 
-    // Mirror your trimming behavior
+    // Drop trailing newlines.
     content = content.replace(/\n+$/, '');
 
     return { type: 'codeBlock', lang, content };
@@ -139,7 +134,7 @@ export const getLocalRules = (
     fence: {
       match: SimpleMarkdown.blockRegex(
         // 1: fence (``` or ~~~)
-        // 2: info string (lang etc.) - SAME CAPTURE INDEX AS YOURS
+        // 2: info string (lang etc.)
         // 3: code content
         /^ {0,3}(`{3,}|~{3,})[ \t]*(\S+)?[ \t]*\r?\n([\s\S]*?)\r?\n?(?: {0,3})\1[ \t]*(?:\r?\n+|$)/,
       ),
@@ -159,7 +154,7 @@ export const getLocalRules = (
       react: enrichedRenderFunction(renderHorizontalRule),
     },
     image: {
-      // We intentionally disable parsing images; keep the shape
+      // Images are not parsed.
       match: () => null,
     },
     inlineCode: {
@@ -201,7 +196,7 @@ export const getLocalRules = (
       react: enrichedRenderFunction(renderText),
     },
     u: {
-      // no support for underlines yet
+      // Underlines are not supported.
       match: () => null,
     },
     url: {
@@ -209,7 +204,7 @@ export const getLocalRules = (
         onLink: openLinkHandler,
       }),
     },
-    // no support for reflinks
+    // Reference links and images are not supported.
     reflink: { match: () => null },
     refimage: { match: () => null },
   } as unknown as OutputRules<ReactOutputRule>;

package/src/ai-components/markdown/styles.ts

@@ -58,7 +58,7 @@ export const getLocalStyles = ({ theme }: { theme: Theme }) => {
     codeBlockLineNumberCell: {
       fontFamily: Platform.OS === 'ios' ? 'Courier' : 'Monospace',
       color: colors.grey,
-      paddingVertical: 1, // should be (codeBlock.lineHeight - this.fontSize) / 2
+      paddingVertical: 1, // (codeBlock.lineHeight - fontSize) / 2
       fontSize: 12,
     },
     codeBlockHeaderContainer: {

package/src/ai-components/markdown/types.ts

@@ -71,7 +71,7 @@ export type TableNode = SingleASTNode & {
 };
 export type TargetNode = SingleASTNode & { target: string };
 
-// Allow dynamic heading style access like styles["heading1"]
+// Heading levels that index the `heading1` to `heading6` styles.
 export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6 | undefined;
 
 export type MarkdownStyle = Partial<{