stream-chat-react-native-core 9.9.4 → 9.10.0

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

@@ -0,0 +1,163 @@
+import type { JSX } from 'react';
+import type React from 'react';
+import { type PropsWithChildren } from 'react';
+import type {
+  GestureResponderEvent,
+  ImageStyle,
+  TextProps,
+  TextStyle,
+  ViewStyle,
+} from 'react-native';
+
+import type SimpleMarkdown from '@khanacademy/simple-markdown';
+import type { Output } from '@khanacademy/simple-markdown';
+import type {
+  ParserRule,
+  ReactOutputRule,
+  SingleASTNode,
+  State,
+} from '@khanacademy/simple-markdown';
+
+import type { DeepPartial } from '../contexts';
+
+export type LinkInfo = {
+  raw: string;
+  url: string;
+};
+
+export type ReactOutput = Output<React.ReactNode>;
+
+export type DefaultRules = typeof SimpleMarkdown.defaultRules & {
+  [key: string]: ParserRule & ReactOutputRule;
+};
+
+export type MarkdownRules = DeepPartial<DefaultRules>;
+
+export type MarkdownProps = {
+  onLink?: (url: string) => void | Promise<void>;
+  rules?: MarkdownRules;
+  styles?: MarkdownStyle;
+  paragraphNumberOfLines?: number;
+};
+
+export type MarkdownOptions = Partial<Pick<MarkdownProps, 'onLink' | 'paragraphNumberOfLines'>>;
+
+export type MarkdownStyleProp = TextStyle | ViewStyle;
+
+export type MarkdownState = State & {
+  withinText?: boolean;
+  withinQuote?: boolean;
+  withinHeading?: boolean;
+  withinLink?: boolean;
+  withinList?: boolean;
+  withinParagraphWithImage?: boolean;
+  parentLink?: string;
+  style: MarkdownStyleProp;
+};
+
+export type NodeWithContent = SingleASTNode & { content: SingleASTNode[] };
+export type NodeWithStringContent = SingleASTNode & { content: string };
+export type HeadingNode = SingleASTNode & {
+  level: number;
+  content: SingleASTNode[];
+};
+export type ListNode = SingleASTNode & {
+  ordered: boolean;
+  items: SingleASTNode[] | SingleASTNode[][];
+};
+export type TableNode = SingleASTNode & {
+  header: SingleASTNode[];
+  cells: SingleASTNode[][];
+};
+export type TargetNode = SingleASTNode & { target: string };
+
+// Allow dynamic heading style access like styles["heading1"]
+export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6 | undefined;
+
+export type MarkdownStyle = Partial<{
+  autolink: TextStyle;
+  blockQuoteBar: ViewStyle;
+  blockQuoteSection: ViewStyle;
+  blockQuoteSectionBar: ViewStyle;
+  blockQuoteText: TextStyle | ViewStyle;
+  br: TextStyle;
+  codeBlock: TextStyle;
+  codeBlockLineNumberGutter: ViewStyle;
+  codeBlockContainer: ViewStyle;
+  codeBlockWrapper: ViewStyle;
+  codeBlockLineNumberCell: TextStyle;
+  codeBlockHeaderContainer: ViewStyle;
+  codeBlockHeaderTitle: TextStyle;
+  del: TextStyle;
+  em: TextStyle;
+  heading: TextStyle;
+  heading1: TextStyle;
+  heading2: TextStyle;
+  heading3: TextStyle;
+  heading4: TextStyle;
+  heading5: TextStyle;
+  heading6: TextStyle;
+  hr: ViewStyle;
+  image: ImageStyle;
+  inlineCode: TextStyle;
+  list: ViewStyle;
+  listItem: ViewStyle;
+  listItemBullet: TextStyle;
+  listItemNumber: TextStyle;
+  listItemText: TextStyle;
+  listRow: ViewStyle;
+  mailTo: TextStyle;
+  mentions: TextStyle;
+  newline: TextStyle;
+  noMargin: TextStyle;
+  paragraph: TextStyle;
+  paragraphCenter: TextStyle;
+  paragraphWithImage: ViewStyle;
+  strong: TextStyle;
+  sublist: ViewStyle;
+  table: ViewStyle;
+  tableHeader: ViewStyle;
+  tableHeaderCell: TextStyle;
+  tableRow: ViewStyle;
+  tableRowCell: TextStyle;
+  tableRowLast: ViewStyle;
+  text: TextStyle;
+  u: TextStyle;
+  url: TextStyle;
+  view: ViewStyle;
+}>;
+
+export interface MarkdownOutputProps {
+  node: SingleASTNode;
+  output: ReactOutput;
+  state: State;
+  styles: Partial<MarkdownStyle>;
+}
+
+export type MarkdownComponentProps = PropsWithChildren<RuleRenderFunctionProps>;
+
+export interface MarkdownTableRowProps extends MarkdownOutputProps {
+  items: SingleASTNode[];
+}
+
+export interface BulletProps extends TextProps {
+  index?: number;
+}
+
+export type RuleOutputProps = {
+  node: SingleASTNode;
+  output: ReactOutput;
+  state: MarkdownState;
+};
+
+export type RuleRenderFunctionEnrichedProps = {
+  styles: MarkdownStyle;
+  onPress?: (event: GestureResponderEvent) => void;
+  onLongPress?: (event: GestureResponderEvent) => void;
+  onLink?: (url: string) => void;
+  paragraphNumberOfLines?: number;
+};
+
+export type RuleRenderFunctionProps = RuleOutputProps & RuleRenderFunctionEnrichedProps;
+
+export type RuleRenderFunction = (props: RuleRenderFunctionProps) => JSX.Element;

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

@@ -0,0 +1,117 @@
+import { find } from 'linkifyjs';
+import truncate from 'lodash/truncate';
+
+import type { LinkInfo } from '../index';
+
+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)
+ * */
+const removeMarkdownLinksFromText = (input: string) => input.replace(/\[.*\]\(.*\)/g, '');
+
+/**
+ * This is done to avoid parsing usernames with dot as well as an email address in it.
+ */
+const removeUserNamesWithEmailFromText = (input: string) =>
+  input.replace(/@(\w+(\.\w+)?)(@\w+\.\w+)/g, '');
+
+export const parseLinksFromText = (input?: string): LinkInfo[] => {
+  if (!input) {
+    return [];
+  }
+  const strippedInput = [removeMarkdownLinksFromText, removeUserNamesWithEmailFromText].reduce(
+    (acc, fn) => fn(acc),
+    input,
+  );
+
+  const links = find(strippedInput, 'url');
+  const emails = find(strippedInput, 'email');
+
+  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
+    const pattern = new RegExp(/^(mailto:|tel:|sms:|\S+:\/\/)/);
+    if (!pattern.test(hrefWithProtocol)) {
+      hrefWithProtocol = 'http://' + hrefWithProtocol;
+    }
+
+    return {
+      raw: value,
+      url: hrefWithProtocol,
+    };
+  });
+
+  return result;
+};
+
+export const generateMarkdownText = (text?: string) => {
+  if (!text) {
+    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) {
+    const displayLink = truncate(linkInfo.raw, {
+      length: 200,
+      omission: '...',
+    });
+    // Convert raw links/emails in the text to respective markdown syntax.
+    // Eg: Hi @getstream.io -> Hi @[getstream.io](getstream.io).
+    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.
+    const mentionsRegex = new RegExp(
+      `@\\[${escapeRegExp(displayLink)}\\]\\(${escapeRegExp(linkInfo.url)}\\)`,
+      'g',
+    );
+    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.
+  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
+    /(```[\s\S]*?```|`[^`]*?`)|\n([ \t]{2,})/g,
+    (match, code, spaces, offset, full) => {
+      // Preserve code spans / fences exactly as they are
+      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.
+  resultText = resultText.replace(/\n```/g, '\n\n```\n');
+
+  const codeBlockCounts = (resultText.match(/```/g) || []).length;
+  if (codeBlockCounts % 2 > 0) {
+    resultText += '```';
+  }
+
+  return resultText;
+};

package/src/ai-components/markdown/utils/index.ts

@@ -0,0 +1 @@
+export * from './generate-markdown-text';

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

@@ -0,0 +1,99 @@
+import React, { useMemo } from 'react';
+import { Pressable, StyleSheet, View } from 'react-native';
+import Animated, { ZoomIn, ZoomOut } from 'react-native-reanimated';
+
+import { useStateStore } from '@stream-io/state-store/react-bindings';
+
+import type { ComposerViewProps } from './ComposerView';
+
+import { SpeechToTextButton } from './SpeechToTextButton';
+
+import { useMessageComposerContext, useTheme } from '../contexts';
+import { CircleStop } from '../internal/icons/CircleStop';
+import { SendUp } from '../internal/icons/SendUp';
+import { dictationStore, type DictationStoreState, useComposerHasText } from '../store';
+
+const selector = ({ isRecording }: DictationStoreState) => ({
+  isRecording,
+});
+
+export const ActionButton = ({
+  isGenerating,
+  stopGenerating,
+}: Pick<ComposerViewProps, 'isGenerating' | 'stopGenerating'>) => {
+  const { hasText } = useComposerHasText();
+  const { isRecording } = useStateStore(dictationStore, selector);
+  const { sendMessage } = useMessageComposerContext();
+  const {
+    theme: {
+      colors: { black, white },
+      composer: { iconButton, stopGeneratingIcon, sendIcon },
+    },
+  } = useTheme();
+  const styles = useStyles();
+
+  if (isGenerating) {
+    return (
+      <Animated.View
+        key={'stop-generating'}
+        entering={ZoomIn.duration(250)}
+        exiting={ZoomOut.duration(250)}
+      >
+        <Pressable style={[styles.iconButton, iconButton]} onPress={stopGenerating}>
+          <View style={[styles.stopGeneratingIcon, stopGeneratingIcon]}>
+            <CircleStop fill={black} size={32} />
+          </View>
+        </Pressable>
+      </Animated.View>
+    );
+  }
+
+  return hasText && !isRecording ? (
+    <Animated.View
+      key={'send-button'}
+      entering={ZoomIn.duration(250)}
+      exiting={ZoomOut.duration(250)}
+    >
+      <Pressable style={[styles.iconButton, iconButton]} onPress={sendMessage}>
+        <View style={[styles.sendIcon, sendIcon]}>
+          <SendUp pathFill={white} size={24} />
+        </View>
+      </Pressable>
+    </Animated.View>
+  ) : (
+    <SpeechToTextButton />
+  );
+};
+
+const useStyles = () => {
+  const { theme } = useTheme();
+
+  return useMemo(
+    () =>
+      StyleSheet.create({
+        micIcon: {
+          width: 32,
+          height: 32,
+          justifyContent: 'center',
+          alignItems: 'center',
+        },
+        sendIcon: {
+          width: 32,
+          height: 32,
+          backgroundColor: theme.colors.black,
+          borderRadius: 16,
+        },
+        stopGeneratingIcon: {
+          width: 32,
+          height: 32,
+          backgroundColor: theme.colors.transparent,
+          borderRadius: 16,
+        },
+        iconButton: {
+          justifyContent: 'center',
+          alignItems: 'center',
+        },
+      }),
+    [theme],
+  );
+};

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

@@ -0,0 +1,205 @@
+import React, { useCallback, useMemo } from 'react';
+import { Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
+
+import type { BottomSheetOption, ComposerViewProps } from './ComposerView';
+
+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';
+
+type BottomSheetContentProps = Pick<ComposerViewProps, 'bottomSheetOptions' | 'bottomSheetInsets'>;
+
+export const BottomSheetContent = ({
+  bottomSheetOptions,
+  bottomSheetInsets,
+}: BottomSheetContentProps) => {
+  const {
+    theme: {
+      sheet: { contentContainer, quickActionsCard, divider, listSection },
+    },
+  } = useTheme();
+  const styles = useStyles();
+
+  const { mediaPickerService } = useMessageComposerContext();
+
+  const onContentSizeChange = useCallback(
+    (_: unknown, height: number) => sheetStoreApi.setHeight(height),
+    [],
+  );
+
+  const insetStyle = useMemo(
+    () => ({ paddingBottom: 16 + (bottomSheetInsets?.bottom ?? 0) }),
+    [bottomSheetInsets],
+  );
+
+  return (
+    <ScrollView
+      contentContainerStyle={[styles.contentContainer, insetStyle, contentContainer]}
+      showsVerticalScrollIndicator={false}
+      onContentSizeChange={onContentSizeChange}
+    >
+      <View style={[styles.quickActionsCard, quickActionsCard]}>
+        <QuickActionButton
+          label={'Camera'}
+          Icon={Camera}
+          onPress={withCloseSheet(() => mediaPickerService?.takeMedia({}))}
+        />
+        <QuickActionButton
+          label={'Photos'}
+          Icon={Picture}
+          onPress={withCloseSheet(() => mediaPickerService?.pickMedia({}))}
+        />
+      </View>
+
+      {bottomSheetOptions && bottomSheetOptions.length > 0 ? (
+        <>
+          <View style={[styles.divider, divider]} />
+          <View style={[styles.listSection, listSection]}>
+            {bottomSheetOptions.map((option, index) => (
+              <ListItem key={index} option={option} />
+            ))}
+          </View>
+        </>
+      ) : null}
+    </ScrollView>
+  );
+};
+
+type QuickActionButtonProps = {
+  label: string;
+  Icon: React.ComponentType;
+  onPress?: () => void;
+};
+
+export const QuickActionButton = ({ label, Icon, onPress }: QuickActionButtonProps) => {
+  const {
+    theme: {
+      sheet: { quickAction, quickActionLabel },
+    },
+  } = useTheme();
+  const styles = useStyles();
+
+  return (
+    <Pressable
+      onPress={onPress}
+      style={({ pressed }) => [styles.quickAction, quickAction, pressed && styles.pressedView]}
+    >
+      <Icon />
+      <Text style={[styles.quickActionLabel, quickActionLabel]}>{label}</Text>
+    </Pressable>
+  );
+};
+
+export type ListItemProps = {
+  option: BottomSheetOption;
+};
+
+export const ListItem = ({ option }: ListItemProps) => {
+  const {
+    theme: {
+      sheet: { listItem, listIcon, listTextContainer, listTitle, listSubtitle },
+    },
+  } = useTheme();
+  const styles = useStyles();
+
+  const { title, subtitle, action, Icon } = option;
+
+  return (
+    <Pressable
+      onPress={withCloseSheet(action)}
+      style={({ pressed }) => [styles.listItem, listItem, pressed && styles.pressedView]}
+    >
+      {Icon ? (
+        <View style={[styles.listIcon, listIcon]}>
+          <Icon />
+        </View>
+      ) : null}
+
+      <View style={[styles.listTextContainer, listTextContainer]}>
+        <Text style={[styles.listTitle, listTitle]}>{title}</Text>
+        <Text style={[styles.listSubtitle, listSubtitle]}>{subtitle}</Text>
+      </View>
+    </Pressable>
+  );
+};
+
+const useStyles = () => {
+  const { theme } = useTheme();
+
+  return useMemo(() => {
+    const { colors } = theme;
+
+    return StyleSheet.create({
+      container: {
+        flex: 1,
+      },
+      contentContainer: {
+        paddingHorizontal: 16,
+        paddingTop: 12,
+      },
+      quickActionsCard: {
+        flexDirection: 'row',
+        justifyContent: 'center',
+        gap: 12,
+        borderRadius: 18,
+        marginBottom: 16,
+      },
+      quickAction: {
+        flex: 1,
+        alignItems: 'center',
+        padding: 16,
+        borderRadius: 14,
+        marginHorizontal: 4,
+        backgroundColor: colors.white_smoke,
+      },
+      pressedView: {
+        opacity: 0.7,
+      },
+      quickActionLabel: {
+        fontSize: 13,
+        fontWeight: '500',
+        color: colors.black,
+        marginTop: 4,
+      },
+      listSection: {
+        marginTop: 4,
+        borderRadius: 18,
+        backgroundColor: colors.white,
+        paddingHorizontal: 12,
+        paddingVertical: 4,
+      },
+      listItem: {
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+        paddingVertical: 10,
+      },
+      listIcon: {
+        width: 24,
+        height: 24,
+        marginRight: 12,
+        marginTop: 2,
+      },
+      listTextContainer: {
+        flex: 1,
+      },
+      listTitle: {
+        fontSize: 15,
+        fontWeight: '500',
+        color: colors.black,
+      },
+      listSubtitle: {
+        marginTop: 2,
+        fontSize: 13,
+        color: colors.grey_dark,
+      },
+      divider: {
+        height: StyleSheet.hairlineWidth,
+        backgroundColor: colors.grey_whisper,
+        marginTop: 10,
+      },
+    });
+  }, [theme]);
+};

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

@@ -0,0 +1,49 @@
+import React, { useMemo } from 'react';
+import { Pressable, StyleSheet, Text } from 'react-native';
+
+import { useTheme } from '../contexts';
+import { sheetStoreApi } from '../store';
+
+export const AttachmentButton = () => {
+  const {
+    theme: {
+      composer: { roundButton, attachIcon },
+    },
+  } = useTheme();
+  const styles = useStyles();
+
+  return (
+    <Pressable style={[styles.roundButton, roundButton]} onPress={sheetStoreApi.openSheet}>
+      <Text style={[styles.attachIcon, attachIcon]}>+</Text>
+    </Pressable>
+  );
+};
+
+const useStyles = () => {
+  const { theme } = useTheme();
+
+  return useMemo(() => {
+    const { colors, composer } = theme;
+
+    const pillHeight = composer.inputPillHeight;
+
+    return StyleSheet.create({
+      attachIcon: {
+        fontSize: 32,
+        textAlign: 'center',
+        alignSelf: 'center',
+        lineHeight: 32,
+        color: colors.grey,
+      },
+      roundButton: {
+        width: pillHeight,
+        height: pillHeight,
+        borderRadius: pillHeight / 2,
+        backgroundColor: colors.white_smoke,
+        justifyContent: 'center',
+        alignItems: 'center',
+        marginRight: 8,
+      },
+    });
+  }, [theme]);
+};