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

package/src/ai-components/message/UserMessageMenu.tsx

@@ -0,0 +1,149 @@
+import React, { type ComponentType, type ReactNode } from 'react';
+import {
+  I18nManager,
+  Modal,
+  Platform,
+  Pressable,
+  StyleSheet,
+  Text,
+  useWindowDimensions,
+  View,
+} from 'react-native';
+import Animated, { Easing, Keyframe } from 'react-native-reanimated';
+
+import { useTheme } from '../contexts';
+import { primitives } from '../internal/tokens';
+
+/** Where the pressed bubble is on the screen, as `measureInWindow` says. */
+export type UserMessageMenuAnchor = { height: number; width: number; x: number; y: number };
+
+export type UserMessageMenuItem = {
+  Icon: ComponentType<{ color?: string; size?: number }>;
+  label: string;
+  onPress: () => void;
+};
+
+type UserMessageMenuProps = {
+  anchor: UserMessageMenuAnchor | undefined;
+  /** The bubble again, drawn lifted over the dimmed screen on iOS. */
+  bubble: ReactNode;
+  items: UserMessageMenuItem[];
+  onClose: () => void;
+};
+
+const MENU_WIDTH = 200;
+const ITEM_HEIGHT = 44;
+const GAP = primitives.spacingXs;
+
+const MENU_IN = new Keyframe({
+  0: { opacity: 0, transform: [{ scale: 0.9 }] },
+  100: { easing: Easing.out(Easing.ease), opacity: 1, transform: [{ scale: 1 }] },
+}).duration(150);
+
+/**
+ * The menu a long press on the person's message opens, under the bubble or above it when there is
+ * no room, at its trailing edge. On iOS the screen dims behind the lifted bubble, as a context menu
+ * does; on Android it drops down from the bubble.
+ */
+export const UserMessageMenu = ({ anchor, bubble, items, onClose }: UserMessageMenuProps) => {
+  const {
+    theme: { colors, message },
+  } = useTheme();
+  const { height: screenHeight, width: screenWidth } = useWindowDimensions();
+  const styles = message?.userMessage;
+  if (!anchor) return null;
+
+  const menuHeight = items.length * ITEM_HEIGHT;
+  const fitsBelow = anchor.y + anchor.height + GAP + menuHeight <= screenHeight - GAP;
+  const top = fitsBelow
+    ? anchor.y + anchor.height + GAP
+    : Math.max(GAP, anchor.y - GAP - menuHeight);
+  // The bubble's trailing edge: its right in a left-to-right layout, its left otherwise.
+  const left = I18nManager.isRTL
+    ? Math.min(anchor.x, screenWidth - MENU_WIDTH - GAP)
+    : Math.max(GAP, anchor.x + anchor.width - MENU_WIDTH);
+  const lifts = Platform.OS === 'ios';
+
+  return (
+    <Modal animationType='fade' onRequestClose={onClose} statusBarTranslucent transparent visible>
+      <Pressable
+        accessibilityRole='button'
+        onPress={onClose}
+        style={[StyleSheet.absoluteFill, lifts && defaultStyles.dim]}
+      />
+      {lifts ? (
+        <View
+          pointerEvents='none'
+          style={[defaultStyles.lifted, { left: anchor.x, top: anchor.y, width: anchor.width }]}
+        >
+          {bubble}
+        </View>
+      ) : null}
+      <Animated.View
+        accessibilityRole='menu'
+        entering={MENU_IN}
+        style={[
+          defaultStyles.menu,
+          { backgroundColor: colors.white, left, top, width: MENU_WIDTH },
+          styles?.menu,
+        ]}
+      >
+        {items.map(({ Icon, label, onPress }) => (
+          <Pressable
+            accessibilityRole='button'
+            key={label}
+            onPress={() => {
+              onClose();
+              onPress();
+            }}
+            style={({ pressed }) => [
+              defaultStyles.item,
+              pressed && { backgroundColor: colors.white_smoke },
+              styles?.menuItem,
+            ]}
+          >
+            <Icon color={MENU_TEXT} size={20} />
+            <Text style={[defaultStyles.itemText, styles?.menuItemText]}>{label}</Text>
+          </Pressable>
+        ))}
+      </Animated.View>
+    </Modal>
+  );
+};
+
+// The design tokens' primary text.
+const MENU_TEXT = '#1A1B25';
+
+const defaultStyles = StyleSheet.create({
+  dim: { backgroundColor: 'rgba(0, 0, 0, 0.2)' },
+  item: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    gap: primitives.spacingXs + 4,
+    height: ITEM_HEIGHT,
+    paddingHorizontal: primitives.spacingMd,
+  },
+  itemText: {
+    color: MENU_TEXT,
+    fontSize: primitives.typographyFontSizeMd,
+  },
+  lifted: {
+    alignItems: 'flex-end',
+    position: 'absolute',
+    shadowColor: '#000000',
+    shadowOffset: { height: 4, width: 0 },
+    shadowOpacity: 0.15,
+    shadowRadius: 12,
+    transform: [{ scale: 1.02 }],
+  },
+  menu: {
+    borderRadius: 12,
+    elevation: 8,
+    overflow: 'hidden',
+    position: 'absolute',
+    shadowColor: '#000000',
+    shadowOffset: { height: 4, width: 0 },
+    shadowOpacity: 0.15,
+    shadowRadius: 12,
+  },
+});

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

@@ -0,0 +1,4 @@
+export * from './AIAssistantMessage';
+export * from './AIMessageAttachment';
+export * from './AIReplyActions';
+export * from './AIUserMessage';

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

@@ -39,7 +39,11 @@ export const ActionButton = ({
         entering={ZoomIn.duration(250)}
         exiting={ZoomOut.duration(250)}
       >
-        <Pressable style={[styles.iconButton, iconButton]} onPress={stopGenerating}>
+        <Pressable
+          onPress={stopGenerating}
+          style={[styles.iconButton, iconButton]}
+          testID='stop-generating'
+        >
           <View style={[styles.stopGeneratingIcon, stopGeneratingIcon]}>
             <CircleStop fill={black} size={32} />
           </View>

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

@@ -1,6 +1,7 @@
 import React, { useCallback, useMemo } from 'react';
 import { Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
 
+import { ChatOptionsList } from './ChatOptions';
 import type { BottomSheetOption, ComposerViewProps } from './ComposerView';
 
 import { withCloseSheet } from './utils/withCloseSheet';
@@ -8,13 +9,18 @@ import { withCloseSheet } from './utils/withCloseSheet';
 import { useMessageComposerContext, useTheme } from '../contexts';
 import { Camera } from '../internal/icons/Camera';
 import { Picture } from '../internal/icons/Picture';
-import { sheetStoreApi } from '../store';
+import { primitives } from '../internal/tokens';
+import { sheetStoreApi, useComposerChatOption } from '../store';
 
-type BottomSheetContentProps = Pick<ComposerViewProps, 'bottomSheetOptions' | 'bottomSheetInsets'>;
+type BottomSheetContentProps = Pick<
+  ComposerViewProps,
+  'bottomSheetOptions' | 'bottomSheetInsets' | 'chatOptions'
+>;
 
 export const BottomSheetContent = ({
   bottomSheetOptions,
   bottomSheetInsets,
+  chatOptions,
 }: BottomSheetContentProps) => {
   const {
     theme: {
@@ -23,7 +29,9 @@ export const BottomSheetContent = ({
   } = useTheme();
   const styles = useStyles();
 
-  const { mediaPickerService } = useMessageComposerContext();
+  const { mediaPickerService, setChatOption } = useMessageComposerContext();
+  const { chatOption } = useComposerChatOption();
+  const selectedId = chatOption?.id ?? null;
 
   const onContentSizeChange = useCallback(
     (_: unknown, height: number) => sheetStoreApi.setHeight(height),
@@ -54,6 +62,20 @@ export const BottomSheetContent = ({
         />
       </View>
 
+      {chatOptions && chatOptions.length > 0 ? (
+        <>
+          <View style={[styles.divider, divider]} />
+          <ChatOptionsList
+            // Picking the option already picked removes it.
+            onSelect={withCloseSheet((option) =>
+              setChatOption(option.id === selectedId ? null : option),
+            )}
+            options={chatOptions}
+            selectedId={selectedId}
+          />
+        </>
+      ) : null}
+
       {bottomSheetOptions && bottomSheetOptions.length > 0 ? (
         <>
           <View style={[styles.divider, divider]} />
@@ -159,7 +181,7 @@ const useStyles = () => {
         opacity: 0.7,
       },
       quickActionLabel: {
-        fontSize: 13,
+        fontSize: primitives.typographyFontSizeXs,
         fontWeight: '500',
         color: colors.black,
         marginTop: 4,
@@ -186,13 +208,13 @@ const useStyles = () => {
         flex: 1,
       },
       listTitle: {
-        fontSize: 15,
+        fontSize: primitives.typographyFontSizeSm,
         fontWeight: '500',
         color: colors.black,
       },
       listSubtitle: {
         marginTop: 2,
-        fontSize: 13,
+        fontSize: primitives.typographyFontSizeXs,
         color: colors.grey_dark,
       },
       divider: {

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

@@ -1,9 +1,17 @@
 import React, { useMemo } from 'react';
 import { Pressable, StyleSheet, Text } from 'react-native';
+import { KeyboardController } from 'react-native-keyboard-controller';
 
 import { useTheme } from '../contexts';
 import { sheetStoreApi } from '../store';
 
+// The sheet opens once the keyboard has closed. A sheet opening over the keyboard takes the focus
+// from the composer: on Android the keyboard then closes with stray events, which move the
+// conversation following it too far, and again as the sheet closes.
+const openSheet = () => {
+  void KeyboardController.dismiss().then(sheetStoreApi.openSheet);
+};
+
 export const AttachmentButton = () => {
   const {
     theme: {
@@ -13,7 +21,7 @@ export const AttachmentButton = () => {
   const styles = useStyles();
 
   return (
-    <Pressable style={[styles.roundButton, roundButton]} onPress={sheetStoreApi.openSheet}>
+    <Pressable style={[styles.roundButton, roundButton]} onPress={openSheet}>
       <Text style={[styles.attachIcon, attachIcon]}>+</Text>
     </Pressable>
   );

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

@@ -0,0 +1,144 @@
+import React, { type ReactNode } from 'react';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+
+import { useAITranslation, useTheme } from '../contexts';
+import { Close } from '../internal/icons/Close';
+import { primitives } from '../internal/tokens';
+
+/**
+ * A way to ask, which the person picks for their next message, such as "Think harder".
+ */
+export type AIChatOption = {
+  id: string;
+  /** The option's name in the menu, such as "Think harder". */
+  title: string;
+  /** Data of your own, such as what the option sends with the message. */
+  customData?: Record<string, unknown>;
+  /** A line under the title in the menu, such as "Takes longer, for harder questions". */
+  description?: string;
+  /** An icon shown in the menu and on the chip. */
+  icon?: ReactNode;
+  /** The option's name on the chip once picked, such as "Think". Defaults to `title`. */
+  shortTitle?: string;
+};
+
+export type ChatOptionsListProps = {
+  onSelect: (option: AIChatOption) => void;
+  options: AIChatOption[];
+  selectedId?: string | null;
+};
+
+/**
+ * The items of the chat options menu, one per option, each with its icon, title and description.
+ * `ComposerView` shows them in its sheet, under the camera and photos.
+ */
+export const ChatOptionsList = ({ onSelect, options, selectedId }: ChatOptionsListProps) => {
+  const {
+    theme: { chatOptions: theme },
+  } = useTheme();
+
+  return (
+    <View style={[styles.list, theme?.list]}>
+      {options.map((option) => (
+        <Pressable
+          accessibilityRole='radio'
+          accessibilityState={{ checked: option.id === selectedId }}
+          key={option.id}
+          onPress={() => onSelect(option)}
+          style={({ pressed }) => [styles.item, { opacity: pressed ? 0.7 : 1 }, theme?.item]}
+        >
+          {option.icon ? (
+            <View style={[styles.itemIcon, theme?.itemIcon]}>{option.icon}</View>
+          ) : null}
+          <View style={styles.itemText}>
+            <Text style={[styles.itemTitle, { color: theme?.titleText }, theme?.itemTitle]}>
+              {option.title}
+            </Text>
+            {option.description ? (
+              <Text
+                style={[
+                  styles.itemDescription,
+                  { color: theme?.descriptionText },
+                  theme?.itemDescription,
+                ]}
+              >
+                {option.description}
+              </Text>
+            ) : null}
+          </View>
+        </Pressable>
+      ))}
+    </View>
+  );
+};
+
+export type SelectedChatOptionChipProps = {
+  onRemove: () => void;
+  option: AIChatOption;
+  disabled?: boolean;
+};
+
+/** The picked option, with a button that removes it. */
+export const SelectedChatOptionChip = ({
+  disabled,
+  onRemove,
+  option,
+}: SelectedChatOptionChipProps) => {
+  const { t } = useAITranslation();
+  const {
+    theme: { chatOptions: theme },
+  } = useTheme();
+  const title = option.shortTitle ?? option.title;
+
+  return (
+    <View
+      style={[styles.chip, { backgroundColor: theme?.chipBackground }, theme?.chip]}
+      testID='ai-selected-chat-option'
+    >
+      {option.icon ? <View style={[styles.chipIcon, theme?.chipIcon]}>{option.icon}</View> : null}
+      <Text style={[styles.chipTitle, { color: theme?.chipText }, theme?.chipTitle]}>{title}</Text>
+      <Pressable
+        accessibilityLabel={t('Remove option: {{ option }}', { option: title })}
+        accessibilityRole='button'
+        accessibilityState={{ disabled }}
+        disabled={disabled}
+        hitSlop={8}
+        onPress={onRemove}
+        style={[styles.chipRemoveButton, theme?.chipRemoveButton]}
+      >
+        <Close height={20} pathFill={theme?.chipText} width={20} />
+      </Pressable>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  chip: {
+    alignItems: 'center',
+    alignSelf: 'flex-start',
+    borderRadius: primitives.radiusXl,
+    flexDirection: 'row',
+    gap: primitives.spacingXs,
+    padding: primitives.spacingXs,
+  },
+  chipIcon: { alignItems: 'center', justifyContent: 'center' },
+  chipRemoveButton: { alignItems: 'center', justifyContent: 'center' },
+  chipTitle: {
+    fontSize: primitives.typographyFontSizeMd,
+    fontWeight: '600',
+    lineHeight: primitives.typographyLineHeightNormal,
+  },
+  item: { alignItems: 'center', flexDirection: 'row', gap: primitives.spacingMd },
+  itemDescription: {
+    fontSize: primitives.typographyFontSizeSm,
+    lineHeight: primitives.typographyLineHeightNormal,
+  },
+  itemIcon: { alignItems: 'center', justifyContent: 'center' },
+  itemText: { flex: 1 },
+  itemTitle: {
+    fontSize: primitives.typographyFontSizeMd,
+    fontWeight: '600',
+    lineHeight: primitives.typographyLineHeightNormal,
+  },
+  list: { gap: primitives.spacingMd, paddingVertical: primitives.spacingMd },
+});