stream-chat-react-native-core 9.12.1 → 9.14.0

package/src/ai-components/contexts/composer-context.tsx

@@ -4,6 +4,7 @@ import type { StateStore } from '@stream-io/state-store';
 
 import { useStableCallback } from '../internal/hooks/useStableCallback';
 import type { ComposerViewProps } from '../message-composer';
+import type { AIChatOption } from '../message-composer/ChatOptions';
 import { MediaPickerService } from '../services';
 import type { AbstractMediaPickerService } from '../services/media-picker-service/AbstractMediaPickerService';
 import { type ComposerState, createNewComposerStore } from '../store';
@@ -11,6 +12,8 @@ import { type ComposerState, createNewComposerStore } from '../store';
 export type ComposerContext = {
   state: StateStore<ComposerState>;
   setText: (text: string) => void | Promise<void>;
+  /** Picks the chat option for the next message, or removes it with `null`. */
+  setChatOption: (option: AIChatOption | null) => void;
   sendMessage: () => void | Promise<void>;
   mediaPickerService?: AbstractMediaPickerService;
 };
@@ -30,9 +33,13 @@ export const ComposerProvider = ({
   const [mediaPickerService] = useState(
     () => mediaPickerServiceOverride ?? (MediaPickerService ? new MediaPickerService() : undefined),
   );
-  const [state] = useState(() => stateOverride ?? createNewComposerStore());
+  const [ownState] = useState(createNewComposerStore);
+  const state = stateOverride ?? ownState;
 
   const setText = useStableCallback((text: string) => state.partialNext({ text }));
+  const setChatOption = useStableCallback((chatOption: AIChatOption | null) =>
+    state.partialNext({ chatOption }),
+  );
 
   const clearState = useStableCallback(() => {
     setText('');
@@ -40,22 +47,23 @@ export const ComposerProvider = ({
   });
 
   const sendMessage = useStableCallback(async () => {
-    const { text, custom } = state.getLatestValue();
+    const { chatOption, custom, text } = state.getLatestValue();
 
     const data = {
       text,
       attachments: mediaPickerService?.state.getLatestValue().assets,
+      chatOption: chatOption ?? undefined,
       custom,
     };
 
     clearState();
 
-    await onSendMessage(data);
+    await onSendMessage?.(data);
   });
 
   const contextValue = useMemo(
-    () => ({ mediaPickerService, state, setText, sendMessage, clearState }),
-    [state, mediaPickerService, setText, sendMessage, clearState],
+    () => ({ mediaPickerService, state, setChatOption, setText, sendMessage, clearState }),
+    [state, mediaPickerService, setChatOption, setText, sendMessage, clearState],
   );
 
   return <ComposerContext.Provider value={contextValue}>{children}</ComposerContext.Provider>;

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

@@ -1,2 +1,3 @@
 export * from './composer-context';
 export * from './theme-context';
+export * from './translation-context';

package/src/ai-components/contexts/theme-context.tsx

@@ -2,7 +2,7 @@ import React, { createContext, type PropsWithChildren, useContext, useMemo } fro
 
 import merge from 'lodash/merge';
 
-import { defaultTheme, type Theme } from '../theme';
+import { defaultTheme, PALETTE_COLORED_PARTS, type Theme } from '../theme';
 
 export type DeepPartial<T> = T extends (...args: never[]) => unknown
   ? T
@@ -26,15 +26,30 @@ export type ThemeContextValue = {
 
 export const mergeThemes = (params: MergedThemesParams) => {
   const { style, theme } = params;
+  // Icons are components, which the JSON copy below would drop and a deep merge would take apart,
+  // so they are carried over as they are.
+  const { icons: themeIcons, ...themeRest } = theme ?? {};
+  const { icons: styleIcons, ...styleRest } = style ?? {};
   // TODO: Use structured-clone here or something similar.
   const finalTheme = (
-    !theme || Object.keys(theme).length === 0
+    !theme || Object.keys(themeRest).length === 0
       ? JSON.parse(JSON.stringify(defaultTheme))
-      : JSON.parse(JSON.stringify(theme))
+      : JSON.parse(JSON.stringify(themeRest))
   ) as Theme;
 
   if (style) {
-    merge(finalTheme, style);
+    merge(finalTheme, styleRest);
+    // The parts drawn in a palette color follow it when the style changes it, as for dark mode.
+    const parts = styleRest as Record<string, Record<string, unknown> | undefined>;
+    const sections = finalTheme as unknown as Record<string, Record<string, unknown>>;
+    for (const [section, part, color] of PALETTE_COLORED_PARTS) {
+      if (styleRest.colors?.[color] === undefined || parts[section]?.[part] !== undefined) continue;
+      (sections[section] ??= {})[part] = finalTheme.colors[color];
+    }
+  }
+
+  if (themeIcons || styleIcons) {
+    finalTheme.icons = { ...themeIcons, ...styleIcons } as Theme['icons'];
   }
 
   return finalTheme;

package/src/ai-components/contexts/translation-context.tsx

@@ -0,0 +1,44 @@
+import { useContext, useMemo } from 'react';
+
+import { TranslationContext } from '../../contexts/translationContext/TranslationContext';
+import { defaultTranslatorFunction } from '../../utils/i18n/utils';
+
+// The chat SDK's own provider, for apps that use the AI components without `<Chat>`.
+export {
+  TranslationProvider,
+  type TranslationContextValue,
+} from '../../contexts/translationContext/TranslationContext';
+
+/**
+ * Translates one of the AI components' strings. The key is the English string itself, with
+ * `{{ name }}` placeholders filled from `options`, as in the chat SDK's i18n files.
+ */
+export type AITranslate = (key: string, options?: Record<string, unknown>) => string;
+
+const PLACEHOLDER = /{{\s*([\w.]+)\s*}}/g;
+
+/** Fills `{{ name }}` placeholders in `text` from `options`, leaving unknown ones as they are. */
+export const interpolateAIString = (text: string, options?: Record<string, unknown>) =>
+  options
+    ? text.replace(PLACEHOLDER, (placeholder, name: string) =>
+        options[name] === undefined || options[name] === null ? placeholder : String(options[name]),
+      )
+    : text;
+
+/** English: the key itself, with its placeholders filled. */
+export const defaultAITranslate: AITranslate = (key, options) => interpolateAIString(key, options);
+
+/**
+ * The chat SDK's translator, so the AI components follow the chat's language inside `<Chat>`. With
+ * no translator set up (no `<Chat>`, or before it has one) they are in English.
+ */
+export const useAITranslation = () => {
+  const { t, userLanguage } = useContext(TranslationContext);
+  return useMemo(
+    () => ({
+      t: t === defaultTranslatorFunction ? defaultAITranslate : (t as AITranslate),
+      userLanguage: userLanguage ?? 'en',
+    }),
+    [t, userLanguage],
+  );
+};