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

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<{

package/src/ai-components/markdown/utils/generate-markdown-text.ts

@@ -7,15 +7,10 @@ export function escapeRegExp(text: string) {
   return text.replace(/[-[\]{}()*+?.,/\\^$|#]/g, '\\$&');
 }
 
-/**
- * This is done to remove all markdown formatted links.
- * eg: [google.com](https://www.google.com), [Google](https://www.google.com), [https://www.google.com](https://www.google.com)
- * */
+/** Removes markdown links such as `[Google](https://www.google.com)` from `input`. */
 const removeMarkdownLinksFromText = (input: string) => input.replace(/\[.*\]\(.*\)/g, '');
 
-/**
- * This is done to avoid parsing usernames with dot as well as an email address in it.
- */
+/** Removes `@name@domain.tld` mentions so a username with an email is not parsed as a link. */
 const removeUserNamesWithEmailFromText = (input: string) =>
   input.replace(/@(\w+(\.\w+)?)(@\w+\.\w+)/g, '');
 
@@ -33,7 +28,8 @@ export const parseLinksFromText = (input?: string): LinkInfo[] => {
 
   const result: LinkInfo[] = [...links, ...emails].map(({ href, value }) => {
     let hrefWithProtocol = href;
-    // Matching these: https://reactnative.dev/docs/0.73/linking?syntax=ios#built-in-url-schemes
+    // Hrefs without a built-in scheme get `http://`:
+    // https://reactnative.dev/docs/0.73/linking?syntax=ios#built-in-url-schemes
     const pattern = new RegExp(/^(mailto:|tel:|sms:|\S+:\/\/)/);
     if (!pattern.test(hrefWithProtocol)) {
       hrefWithProtocol = 'http://' + hrefWithProtocol;
@@ -53,10 +49,8 @@ export const generateMarkdownText = (text?: string) => {
     return null;
   }
 
-  // Trim the extra spaces from the text.
   let resultText = text;
 
-  // List of all the links present in the text.
   const linkInfos = parseLinksFromText(resultText);
 
   for (const linkInfo of linkInfos) {
@@ -64,14 +58,13 @@ export const generateMarkdownText = (text?: string) => {
       length: 200,
       omission: '...',
     });
-    // Convert raw links/emails in the text to respective markdown syntax.
-    // Eg: Hi @getstream.io -> Hi @[getstream.io](getstream.io).
+    // Wrap each raw link or email in markdown link syntax.
     const normalRegEx = new RegExp(escapeRegExp(linkInfo.raw), 'g');
     const markdown = `[${displayLink}](${linkInfo.url})`;
     resultText = resultText.replace(normalRegEx, markdown);
 
-    // After previous step, in some cases, the mentioned user after `@` might have a link/email so we convert it back to normal raw text.
-    // Eg: Hi, @[test.user@gmail.com](mailto:test.user@gmail.com) to @test.user@gmail.com.
+    // Undo it for a link right after `@`, so a mention stays plain text:
+    // `@[test.user@gmail.com](mailto:test.user@gmail.com)` becomes `@test.user@gmail.com`.
     const mentionsRegex = new RegExp(
       `@\\[${escapeRegExp(displayLink)}\\]\\(${escapeRegExp(linkInfo.url)}\\)`,
       'g',
@@ -79,33 +72,27 @@ export const generateMarkdownText = (text?: string) => {
     resultText = resultText.replace(mentionsRegex, `@${displayLink}`);
   }
 
-  // Remove whitespaces that come directly after newlines except in code blocks where we deem this allowed.
-  // A line starts a (possibly quoted) list item if, after indentation, it has
-  //   - unordered bullet: -, *, +
-  //   - or ordered marker: 1. 2. 10.
-  // and at least one space after the marker.
+  // Collapses indentation after a newline, except in code and before a list item (a `-`, `*`, `+`
+  // or `1.` marker followed by a space, at any nesting depth, optionally quoted with `>`).
   const LIST_START_RE = /^[ \t]*(?:> ?)*?(?:[*+-]|\d+\.)(?: |\t)(?:\[(?: |x|X)\] )?/;
 
   resultText = resultText.replace(
     // 1) fenced code blocks (``` <some code here> ```)
     // 2) inline code (`…`)
-    // 3) newline + 2 + spaces/tabs
+    // 3) newline followed by 2 or more spaces/tabs
     /(```[\s\S]*?```|`[^`]*?`)|\n([ \t]{2,})/g,
     (match, code, spaces, offset, full) => {
-      // Preserve code spans / fences exactly as they are
+      // Code spans and fences are returned untouched.
       if (code) return code;
 
-      // Peek what follows this newline + the indent on the same line
       const after = full.slice(offset + match.length);
 
-      // If that line begins with a list item (any nesting depth, optional > quotes),
-      // keep the indentation; otherwise collapse to a single newline.
       return LIST_START_RE.test(after) ? `\n${spaces}` : '\n';
     },
   );
 
-  // Always replace \n``` with \n\n``` to force the markdown state machine to treat it as a separate block. Otherwise, code blocks inside of list
-  // items for example were broken. We clean up the code block closing state within the rendering itself.
+  // A blank line before each fence makes the parser treat it as a separate block, which code blocks
+  // inside list items need. The renderer cleans up the closing state of the code block.
   resultText = resultText.replace(/\n```/g, '\n\n```\n');
 
   const codeBlockCounts = (resultText.match(/```/g) || []).length;

package/src/ai-components/message-composer/ComposerView.tsx

@@ -19,7 +19,7 @@ import type {
   AbstractMediaPickerService,
   MediaPickerState,
 } from '../services/media-picker-service/AbstractMediaPickerService';
-import { useComposerText } from '../store';
+import { COMPOSER_DICTATION_SOURCE, useComposerText } from '../store';
 import type { ComposerState } from '../store';
 import { useDictationState } from '../store/dictation/useDictationState';
 import { useDictationTranscript } from '../store/dictation/useDictationTranscript';
@@ -100,7 +100,7 @@ export const AIMessageInput = () => {
   } = useTheme();
   const styles = useStyles();
 
-  const { error, isRecording } = useDictationState();
+  const { error, isRecording, source } = useDictationState();
   const { text } = useComposerText();
   const { transcript } = useDictationTranscript();
   const { setText } = useMessageComposerContext();
@@ -109,10 +109,13 @@ export const AIMessageInput = () => {
   useEffect(() => {
     const transcriptChanged = transcript !== previousTranscript.current;
     previousTranscript.current = transcript;
+    // Only dictation from the composer's own button fills the input; dictation started elsewhere
+    // (a voice mode, say) must not overwrite what the user typed.
+    if (source !== COMPOSER_DICTATION_SOURCE) return;
     if (!error && (isRecording || transcriptChanged)) {
       setText(transcript);
     }
-  }, [isRecording, transcript, error, setText]);
+  }, [isRecording, transcript, error, setText, source]);
 
   return (
     <TextInput

package/src/ai-components/message-composer/SpeechToTextButton.tsx

@@ -9,7 +9,7 @@ import { Mic } from '../internal/icons/Mic';
 
 import { isDictationAvailable, warnIfDictationUnavailable } from '../native/AIDictation';
 import type { DictationStartOptions } from '../native-specs/NativeAIDictation';
-import { dictationStore, type DictationStoreState } from '../store';
+import { COMPOSER_DICTATION_SOURCE, dictationStore, type DictationStoreState } from '../store';
 import { useDictation } from '../transcription/useDictation';
 
 const selector = ({ isRecording }: DictationStoreState) => ({
@@ -20,10 +20,7 @@ type SpeechToTextButtonProps = {
   options?: DictationStartOptions;
 };
 
-/**
- * Renders nothing when the native dictation module is not part of the build (see
- * `isDictationAvailable`), so that pressing the button can never reach a missing module.
- */
+/** Renders nothing when the native dictation module is not part of the build. */
 export const SpeechToTextButton = (props: SpeechToTextButtonProps) => {
   if (!isDictationAvailable()) {
     warnIfDictationUnavailable();
@@ -33,6 +30,9 @@ export const SpeechToTextButton = (props: SpeechToTextButtonProps) => {
   return <AvailableSpeechToTextButton {...props} />;
 };
 
+// Marks this button's dictation as the composer's, so `ComposerView` fills its input with it.
+const DICTATION_OPTIONS = { source: COMPOSER_DICTATION_SOURCE };
+
 const AvailableSpeechToTextButton = ({ options }: SpeechToTextButtonProps) => {
   const {
     theme: {
@@ -41,7 +41,7 @@ const AvailableSpeechToTextButton = ({ options }: SpeechToTextButtonProps) => {
     },
   } = useTheme();
 
-  const { cancel, toggle } = useDictation(options);
+  const { cancel, toggle } = useDictation(options, DICTATION_OPTIONS);
   const { isRecording } = useStateStore(dictationStore, selector);
 
   useEffect(() => {

package/src/ai-components/native/AIDictation.ts

@@ -11,6 +11,10 @@ import NativeAIDictation, {
 const ON_STATE_EVENT = 'AIDictationOnState';
 const ON_RESULT_EVENT = 'AIDictationOnResult';
 const ON_ERROR_EVENT = 'AIDictationOnError';
+const ON_LEVEL_EVENT = 'AIDictationOnLevel';
+
+/** The microphone's level while dictation listens, from 0 to 1. */
+export type DictationLevel = { level: number };
 
 let eventEmitter: NativeEventEmitter | undefined;
 const getEventEmitter = () => {
@@ -23,9 +27,11 @@ const getEventEmitter = () => {
 const noop = () => {};
 
 /**
- * Whether the native dictation module is part of this build. It is always compiled in on Android,
- * while on iOS it is opt-in: add `$StreamChatEnableDictation = true` to your
- * `Podfile` (or use the `stream-chat-expo` config plugin) and run `pod install`.
+ * Whether the native dictation module is part of this build. It is always compiled in on Android;
+ * on iOS add `$StreamChatEnableDictation = true` to the `Podfile` (or use the `stream-chat-expo`
+ * config plugin) and run `pod install`.
+ *
+ * @returns True when the native module is present.
  */
 export const isDictationAvailable = () => NativeAIDictation != null;
 
@@ -42,7 +48,6 @@ export const warnIfDictationUnavailable = () => {
   );
 };
 
-// Low-level API
 export const AIDictation = {
   start(options?: DictationStartOptions) {
     NativeAIDictation?.start(options);
@@ -74,4 +79,11 @@ export const AIDictation = {
     );
     return sub ? () => sub.remove() : noop;
   },
+  /** The microphone's level while dictation listens, about 10 to 30 times a second. */
+  addLevelListener(listener: (payload: DictationLevel) => void) {
+    const sub = getEventEmitter()?.addListener(ON_LEVEL_EVENT, (event) =>
+      listener(event as DictationLevel),
+    );
+    return sub ? () => sub.remove() : noop;
+  },
 };

package/src/ai-components/native-specs/NativeAIDictation.ts

@@ -4,13 +4,13 @@ import { TurboModuleRegistry } from 'react-native';
 /**
  * Codegen spec of the native dictation module.
  *
- * This file is duplicated (byte for byte) in `package/native-package/src/native/NativeAIDictation.ts`
- * and `package/expo-package/src/native/NativeAIDictation.ts`, which are the copies codegen reads.
- * `yarn validate-entry-isolation` fails if they drift apart.
+ * Duplicated byte for byte in `package/native-package/src/native/NativeAIDictation.ts` and
+ * `package/expo-package/src/native/NativeAIDictation.ts`, the copies codegen reads;
+ * `yarn validate-entry-isolation` fails when they drift apart.
  *
- * Events are delivered through `addListener`/`removeListeners` and a `NativeEventEmitter` (see
- * `../native/AIDictation.ts`) rather than codegen `EventEmitter` properties, since the latter are
- * not understood by the codegen of every React Native version the SDK supports (>= 0.76).
+ * Events go through `addListener`/`removeListeners` and a `NativeEventEmitter` (see
+ * `../native/AIDictation.ts`), because codegen `EventEmitter` properties are not understood by
+ * every React Native version the SDK supports.
  */
 
 export type DictationStartOptions = {
@@ -42,7 +42,6 @@ export interface Spec extends TurboModule {
   removeListeners(count: number): void;
 }
 
-// `get` rather than `getEnforcing`: the module is only compiled in when dictation is enabled
-// (always on Android, opt-in on iOS), and importing the AI entry point
-// must not throw when it is absent.
+// `get` returns null when absent: the module is only compiled in when dictation is enabled (always
+// on Android, opt-in on iOS), and importing the AI entry point must not throw without it.
 export default TurboModuleRegistry.get<Spec>('AIDictation');

package/src/ai-components/services/clipboard-service/expo.ts

@@ -3,7 +3,7 @@ let Clipboard: { setString: (string: string) => void } | undefined;
 try {
   Clipboard = require('expo-clipboard');
 } catch (_) {
-  // do nothing
+  // `expo-clipboard` is not installed.
 }
 
 export const setClipboardString = Clipboard

package/src/ai-components/services/clipboard-service/rncli.ts

@@ -3,7 +3,7 @@ let Clipboard: { setString: (string: string) => void } | undefined;
 try {
   Clipboard = require('@react-native-clipboard/clipboard').default;
 } catch (_) {
-  // do nothing
+  // `@react-native-clipboard/clipboard` is not installed.
 }
 
 export const setClipboardString = Clipboard

package/src/ai-components/services/media-picker-service/expo.ts

@@ -13,7 +13,7 @@ let internalService = undefined;
 try {
   internalService = require('expo-image-picker');
 } catch (_error) {
-  /* do nothing */
+  // `expo-image-picker` is not installed.
 }
 
 type Size = {
@@ -91,7 +91,7 @@ class ExpoMediaPickerService extends AbstractMediaPickerService {
         if (!result || !result.assets || !result.assets.length || result.canceled) {
           return { cancelled: true };
         }
-        // since we only support single photo upload for now we will only be focusing on 0'th element.
+        // Only a single photo is supported, so only the first asset is read.
         const photo = result.assets[0];
         if (!photo) {
           return { cancelled: true };

package/src/ai-components/services/media-picker-service/optional-modules.d.ts

@@ -1,6 +1,6 @@
-// The image picker libraries are optional peer dependencies (`react-native-image-picker` for React
-// Native CLI apps, `expo-image-picker` for Expo apps) and are not installed in this package. Only
-// the asset shapes the media picker services read are declared here.
+// Optional peer dependencies that are not installed in this package: `react-native-image-picker`
+// (React Native CLI) and `expo-image-picker` (Expo). Only the asset shapes the media picker
+// services read are declared.
 
 declare module 'react-native-image-picker' {
   export type Asset = {

package/src/ai-components/services/media-picker-service/rncli.ts

@@ -12,7 +12,7 @@ let internalService = undefined;
 try {
   internalService = require('react-native-image-picker');
 } catch (_error) {
-  /* do nothing */
+  // `react-native-image-picker` is not installed.
 }
 
 class RNCLIMediaPickerService extends AbstractMediaPickerService {
@@ -96,7 +96,6 @@ class RNCLIMediaPickerService extends AbstractMediaPickerService {
             size.height = height;
             size.width = width;
           } catch (e) {
-            // do nothing
             console.warn('Error while getting image size of picture captured from camera ', e);
           }
         } else {
@@ -122,10 +121,11 @@ class RNCLIMediaPickerService extends AbstractMediaPickerService {
       }
     } catch (e: unknown) {
       if (e instanceof Error) {
-        // on iOS: if it was in inactive state, then the user had just denied the permissions
+        // On iOS the permission dialog makes the app inactive, so an inactive state means the user
+        // just denied it; settings are offered only when the app is active.
         if (Platform.OS === 'ios' && AppState.currentState === 'active') {
           const cameraPermissionDeniedMsg = 'User did not grant camera permission.';
-          // Open settings when the user did not allow camera permissions
+          // Offer to open settings when camera permission was denied.
           if (e.message === cameraPermissionDeniedMsg) {
             return { askToOpenSettings: true, cancelled: true };
           }

package/src/ai-components/store/dictation/store.ts

@@ -7,6 +7,11 @@ export type DictationStoreState = {
   transcript: string;
   isRecording: boolean;
   error?: DictationError | null;
+  /**
+   * Who started the current dictation, as passed to `useDictation`, or `null`. Lets a consumer
+   * such as `ComposerView` pick up only the transcripts meant for it.
+   */
+  source?: string | null;
 };
 
 const DEFAULT_STATE: DictationStoreState = {
@@ -14,8 +19,12 @@ const DEFAULT_STATE: DictationStoreState = {
   transcript: '',
   isRecording: false,
   error: null,
+  source: null,
 };
 
+/** The `source` of dictation started by the composer's own `SpeechToTextButton`. */
+export const COMPOSER_DICTATION_SOURCE = 'composer';
+
 export const dictationStore = new StateStore<DictationStoreState>(DEFAULT_STATE);
 
 const reset = () => dictationStore.next(DEFAULT_STATE);

package/src/ai-components/store/dictation/useDictationState.ts

@@ -2,10 +2,11 @@ import { useStateStore } from '@stream-io/state-store/react-bindings';
 
 import { dictationStore, type DictationStoreState } from './store';
 
-const selector = ({ state, isRecording, error }: DictationStoreState) => ({
+const selector = ({ state, isRecording, error, source }: DictationStoreState) => ({
   state,
   isRecording,
   error,
+  source,
 });
 
 export const useDictationState = () => useStateStore(dictationStore, selector);

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

@@ -1,11 +1,10 @@
-// bottom sheet
 export * from './bottom-sheet/store';
 export * from './bottom-sheet/useBottomSheetState';
 
-// message composer
 export * from './composer/store';
 export * from './composer/useComposerHasText';
 export * from './composer/useComposerText';
 
-// dictation
 export * from './dictation/store';
+export * from './dictation/useDictationState';
+export * from './dictation/useDictationTranscript';

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

@@ -1,7 +1,6 @@
 /**
- * This sub-library is a port/took inspiration from https://github.com/conorhastings/react-native-syntax-highlighter.
- * We create our own since we don't want the version of https://github.com/react-syntax-highlighter/react-syntax-highlighter
- * to be pinned to version 6 but rather use whatever we see fit.
+ * Adapted from https://github.com/conorhastings/react-native-syntax-highlighter.
+ * Maintained here so the `react-syntax-highlighter` dependency can be upgraded independently.
  */
 
 export * from './SyntaxHighlighter';

package/src/ai-components/syntax-highlighting/types.ts

@@ -17,10 +17,9 @@ export type NativeSyntaxHighlighterProps = SyntaxHighlighterProps & ExtraSyntaxH
 
 export type CSSP = React.CSSProperties;
 
-/** Options for unit conversion */
 export type ConvertOpts = {
-  /** base for `em` (defaults to 16) */
+  /** Base for `em` units. Defaults to 16. */
   baseFontSize?: number;
-  /** root base for `rem` (defaults to baseFontSize) */
+  /** Base for `rem` units. Defaults to `baseFontSize`. */
   rootFontSize?: number;
 };