stream-chat-react-native-core 9.9.4 → 9.10.0-beta.1

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

@@ -0,0 +1,81 @@
+import { useCallback, useMemo } from 'react';
+import { Text, View } from 'react-native';
+
+import type { SingleASTNode } from '@khanacademy/simple-markdown';
+
+import { MarkdownReactiveScrollView } from '../../components';
+import type {
+  MarkdownComponentProps,
+  MarkdownOutputProps,
+  MarkdownTableRowProps,
+  RuleRenderFunction,
+} from '../types';
+
+export const Table = ({ node, output, styles, state }: MarkdownComponentProps) => (
+  <MarkdownReactiveScrollView>
+    <MarkdownTable node={node} output={output} state={state} styles={styles} />
+  </MarkdownReactiveScrollView>
+);
+
+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.
+  (matrix[0] ?? []).map((_, colIndex) => matrix.map((row) => row[colIndex]!));
+
+const MarkdownTable = ({ node, output, state, styles }: MarkdownOutputProps) => {
+  const content = useMemo(() => {
+    const nodeContent = [node?.header, ...(node?.cells ?? [])];
+    return transpose(nodeContent);
+  }, [node?.cells, node?.header]);
+  const columns = content?.map((column, idx) => (
+    <MarkdownTableColumn
+      node={node}
+      items={column}
+      key={`column-${idx}`}
+      output={output}
+      state={state}
+      styles={styles}
+    />
+  ));
+
+  return (
+    <View key={state.key} style={styles.table}>
+      {columns}
+    </View>
+  );
+};
+
+const MarkdownTableColumn = ({ items, output, state, styles }: MarkdownTableRowProps) => {
+  const [headerCellContent, ...columnCellContents] = items;
+
+  const ColumnCell = useCallback(
+    ({ content }: { content: SingleASTNode }) =>
+      content ? (
+        <View style={styles.tableRow}>
+          <View style={styles.tableRowCell}>{output(content, state)}</View>
+        </View>
+      ) : null,
+    [output, state, styles],
+  );
+
+  return (
+    <View style={{ flex: 1, flexDirection: 'column' }}>
+      {headerCellContent ? (
+        <View key={-1} style={styles.tableHeader}>
+          <Text style={styles.tableHeaderCell}>{output(headerCellContent, state)}</Text>
+        </View>
+      ) : null}
+      {columnCellContents &&
+        columnCellContents.map((content, idx) => (
+          <ColumnCell content={content} key={`cell-${idx}`} />
+        ))}
+    </View>
+  );
+};
+
+export const renderTable: RuleRenderFunction = ({ node, output, state, styles }) => (
+  <Table key={state.key} node={node} output={output} state={state} styles={styles}>
+    {node.content?.trim()}
+  </Table>
+);

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

@@ -0,0 +1,37 @@
+import { useMemo } from 'react';
+import { Text } from 'react-native';
+
+import type { MarkdownComponentProps, RuleRenderFunction } from '../types';
+
+export const TextUI = ({ children, styles, state }: MarkdownComponentProps) => {
+  const textStyle = useMemo(() => {
+    const style = [styles.text, state.style];
+
+    if (state.withinQuote) {
+      style.push(styles.blockQuoteText);
+    }
+
+    if (state.withinLink) {
+      style.push(styles.autolink);
+    }
+
+    return style;
+  }, [
+    state.style,
+    state.withinLink,
+    state.withinQuote,
+    styles.text,
+    styles.autolink,
+    styles.blockQuoteText,
+  ]);
+
+  return <Text style={textStyle}>{children}</Text>;
+};
+
+export const renderText: RuleRenderFunction = ({ node, output, state, styles }) => {
+  return (
+    <TextUI key={state.key} node={node} output={output} state={state} styles={styles}>
+      {node.content}
+    </TextUI>
+  );
+};

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

@@ -0,0 +1,26 @@
+import { Text } from 'react-native';
+
+import type { MarkdownComponentProps, RuleRenderFunction } from '../types';
+
+export const Url = ({ children, styles, onPress }: MarkdownComponentProps) => (
+  <Text style={styles.url} onPress={onPress}>
+    {children}
+  </Text>
+);
+
+export const renderUrl: RuleRenderFunction = ({ node, output, state, styles, onLink }) => {
+  state.withinLink = true;
+  const onLinkPress = () => onLink && onLink(node.target);
+  return (
+    <Url
+      key={state.key}
+      node={node}
+      output={output}
+      state={state}
+      styles={styles}
+      onPress={onLinkPress}
+    >
+      {output(node.content, state)}
+    </Url>
+  );
+};

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

@@ -0,0 +1,20 @@
+export * from './Autolink';
+export * from './BlockQuote';
+export * from './Bold';
+export * from './CodeBlock';
+export * from './Emphasis';
+export * from './Heading';
+export * from './HorizontalRule';
+export * from './InlineCode';
+export * from './LineBreak';
+export * from './Link';
+export * from './List';
+export * from './Mailto';
+export * from './NewLine';
+export * from './Paragraph';
+export * from './Strikethrough';
+export * from './Table';
+export * from './Text';
+export * from './Url';
+
+export * from './Markdown';

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

@@ -0,0 +1,5 @@
+export * from './rules';
+export * from './styles';
+export * from './components';
+export * from './utils';
+export * from './types';

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

@@ -0,0 +1,216 @@
+import type React from 'react';
+
+import type {
+  MatchFunction,
+  Output,
+  OutputRules,
+  ParseFunction,
+  Parser,
+  ReactOutputRule,
+  SingleASTNode,
+} from '@khanacademy/simple-markdown';
+import SimpleMarkdown from '@khanacademy/simple-markdown';
+
+import {
+  renderAutolink,
+  renderBlockQuote,
+  renderBold,
+  renderCodeBlock,
+  renderEmphasis,
+  renderHeading,
+  renderHorizontalRule,
+  renderInlineCode,
+  renderLineBreak,
+  renderLink,
+  renderList,
+  renderMailto,
+  renderNewLine,
+  renderParagraph,
+  renderStrikethrough,
+  renderTable,
+  renderText,
+  renderUrl,
+} from './components';
+import type {
+  MarkdownOptions,
+  MarkdownState,
+  MarkdownStyle,
+  RuleRenderFunction,
+  RuleRenderFunctionEnrichedProps,
+} 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.
+ */
+const LINK_HREF_AND_TITLE =
+  '\\s*<?([^\\s>]*?)>?\\s*' + // 1: href
+  '(?:' +
+  '\\\\"((?:\\\\.|[^"\\\\])*)\\\\"' + // 2: "title"
+  "|\\\\'((?:\\\\.|[^'\\\\])*)\\\\'" + // 3: 'title'
+  '|\\(((?:\\\\.|[^)\\\\])*)\\)' + // 4: (title)
+  ')?\\s*';
+
+const LINK_REGEX = new RegExp('^\\[(' + LINK_INSIDE + ')\\]\\(' + LINK_HREF_AND_TITLE + '\\)');
+
+export const getLocalRules = (
+  styles: MarkdownStyle,
+  opts: MarkdownOptions = {},
+): OutputRules<ReactOutputRule> => {
+  const { onLink, paragraphNumberOfLines } = opts;
+  const openLinkHandler = (target: string) => {
+    if (onLink) {
+      // user-supplied handler may be async; we keep the behavior
+      Promise.resolve(onLink(target)).catch((error: unknown) => {
+        const msg =
+          error && typeof error === 'object' && 'toString' in error
+            ? String(error)
+            : 'Unknown error';
+
+        console.log('There has been a problem with this action. ' + msg);
+        throw error;
+      });
+    }
+  };
+
+  const parseInline = function (
+    parse: Parser,
+    content: string,
+    state: MarkdownState,
+  ): SingleASTNode[] {
+    const isCurrentlyInline = state.inline || false;
+    state.inline = true;
+    const result = parse(content, state);
+    state.inline = isCurrentlyInline;
+    return result;
+  };
+
+  const parseCaptureInline: ParseFunction = (capture, parse, state) => {
+    return {
+      content: parseInline(parse, capture[2] as string, state as MarkdownState),
+    };
+  };
+
+  const parseFence: ParseFunction = (capture) => {
+    // capture[2] = language string (may be undefined/empty)
+    // capture[3] = code content
+    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>...".
+    if (!lang) {
+      const nl = content.indexOf('\n');
+      const firstLine = (nl === -1 ? content : content.slice(0, nl)).trim();
+      if (/^[A-Za-z0-9_+.-]+$/.test(firstLine)) {
+        lang = firstLine;
+        content = nl === -1 ? '' : content.slice(nl + 1);
+      }
+    }
+
+    // Mirror your trimming behavior
+    content = content.replace(/\n+$/, '');
+
+    return { type: 'codeBlock', lang, content };
+  };
+
+  const enrichedRenderFunction =
+    (render: RuleRenderFunction, options: Partial<RuleRenderFunctionEnrichedProps> = {}) =>
+    (node: SingleASTNode, output: Output<React.ReactNode>, { ...state }: MarkdownState) =>
+      render({ node, output, state, styles, ...options });
+
+  return {
+    autolink: {
+      react: enrichedRenderFunction(renderAutolink, {
+        onLink: openLinkHandler,
+      }),
+    },
+    blockQuote: {
+      react: enrichedRenderFunction(renderBlockQuote),
+    },
+    br: {
+      react: enrichedRenderFunction(renderLineBreak),
+    },
+    codeBlock: {
+      react: enrichedRenderFunction(renderCodeBlock),
+    },
+    fence: {
+      match: SimpleMarkdown.blockRegex(
+        // 1: fence (``` or ~~~)
+        // 2: info string (lang etc.) - SAME CAPTURE INDEX AS YOURS
+        // 3: code content
+        /^ {0,3}(`{3,}|~{3,})[ \t]*(\S+)?[ \t]*\r?\n([\s\S]*?)\r?\n?(?: {0,3})\1[ \t]*(?:\r?\n+|$)/,
+      ),
+      parse: parseFence,
+    },
+    del: {
+      react: enrichedRenderFunction(renderStrikethrough),
+    },
+    em: {
+      react: enrichedRenderFunction(renderEmphasis),
+    },
+    heading: {
+      match: SimpleMarkdown.blockRegex(/^ *(#{1,6}) *([^\n]+?) *#* *(?:\n *)+/),
+      react: enrichedRenderFunction(renderHeading),
+    },
+    hr: {
+      react: enrichedRenderFunction(renderHorizontalRule),
+    },
+    image: {
+      // We intentionally disable parsing images; keep the shape
+      match: () => null,
+    },
+    inlineCode: {
+      parse: parseCaptureInline,
+      react: enrichedRenderFunction(renderInlineCode),
+    },
+    link: {
+      match: SimpleMarkdown.inlineRegex(LINK_REGEX) as MatchFunction,
+      react: enrichedRenderFunction(renderLink, {
+        onLink: openLinkHandler,
+      }),
+    },
+    list: {
+      react: enrichedRenderFunction(renderList),
+    },
+    mailto: {
+      react: enrichedRenderFunction(renderMailto, {
+        onLink: openLinkHandler,
+      }),
+    },
+    newline: {
+      react: enrichedRenderFunction(renderNewLine),
+    },
+    paragraph: {
+      react: enrichedRenderFunction(renderParagraph, {
+        paragraphNumberOfLines,
+      }),
+    },
+    strong: {
+      react: enrichedRenderFunction(renderBold),
+    },
+    sublist: {
+      react: enrichedRenderFunction(renderList),
+    },
+    table: {
+      react: enrichedRenderFunction(renderTable),
+    },
+    text: {
+      react: enrichedRenderFunction(renderText),
+    },
+    u: {
+      // no support for underlines yet
+      match: () => null,
+    },
+    url: {
+      react: enrichedRenderFunction(renderUrl, {
+        onLink: openLinkHandler,
+      }),
+    },
+    // no support for reflinks
+    reflink: { match: () => null },
+    refimage: { match: () => null },
+  } as unknown as OutputRules<ReactOutputRule>;
+};

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

@@ -0,0 +1,236 @@
+import { Dimensions, Platform, StyleSheet } from 'react-native';
+
+import type { Theme } from '../theme';
+
+export const getLocalStyles = ({ theme }: { theme: Theme }) => {
+  const colors = theme.colors;
+
+  return StyleSheet.create({
+    autolink: {
+      color: colors.accent_blue,
+    },
+    bgImage: {
+      bottom: 0,
+      flex: 1,
+      left: 0,
+      position: 'absolute',
+      right: 0,
+      top: 0,
+    },
+    bgImageView: {
+      flex: 1,
+      overflow: 'hidden',
+    },
+    blockQuoteSection: {
+      flexDirection: 'row',
+      padding: 8,
+    },
+    blockQuoteSectionBar: {
+      backgroundColor: colors.grey_gainsboro,
+      height: null,
+      marginRight: 8,
+      width: 2,
+    },
+    blockQuoteText: {
+      color: colors.grey_dark,
+    },
+    codeBlock: {
+      backgroundColor: colors.code_block,
+      fontFamily: Platform.OS === 'ios' ? 'Courier' : 'Monospace',
+      fontWeight: '500',
+      color: colors.black,
+      paddingLeft: 8,
+      lineHeight: 14,
+    },
+    codeBlockWrapper: {
+      backgroundColor: colors.code_block,
+      borderRadius: 8,
+      marginVertical: 8,
+      padding: 12,
+    },
+    codeBlockContainer: {
+      flexDirection: 'row',
+    },
+    codeBlockLineNumberGutter: {
+      flexDirection: 'column',
+      color: colors.black,
+    },
+    codeBlockLineNumberCell: {
+      fontFamily: Platform.OS === 'ios' ? 'Courier' : 'Monospace',
+      color: colors.grey,
+      paddingVertical: 1, // should be (codeBlock.lineHeight - this.fontSize) / 2
+      fontSize: 12,
+    },
+    codeBlockHeaderContainer: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      marginBottom: 8,
+    },
+    codeBlockHeaderTitle: {
+      fontSize: 12,
+      color: colors.grey,
+      fontFamily: Platform.OS === 'ios' ? 'Courier' : 'Monospace',
+    },
+    del: {
+      textDecorationLine: 'line-through',
+      textDecorationStyle: 'solid',
+    },
+    em: {
+      fontStyle: 'italic',
+    },
+    heading: {
+      fontWeight: '200',
+    },
+    heading1: {
+      fontSize: 32,
+    },
+    heading2: {
+      fontSize: 24,
+    },
+    heading3: {
+      fontSize: 18,
+    },
+    heading4: {
+      fontSize: 16,
+    },
+    heading5: {
+      fontSize: 13,
+    },
+    heading6: {
+      fontSize: 11,
+    },
+    hr: {
+      backgroundColor: colors.grey_gainsboro,
+      height: 1,
+    },
+    image: {
+      alignSelf: 'center',
+      height: 200,
+      resizeMode: 'contain',
+      width: Dimensions.get('window').width - 30,
+    },
+    imageBox: {
+      flex: 1,
+      resizeMode: 'cover',
+    },
+    inlineCode: {
+      backgroundColor: colors.white_smoke,
+      borderColor: colors.grey_gainsboro,
+      borderRadius: 3,
+      borderWidth: 1,
+      color: colors.accent_red,
+      fontFamily: Platform.OS === 'ios' ? 'Courier' : 'Monospace',
+      fontWeight: '500',
+      fontSize: 13,
+      padding: 3,
+      paddingHorizontal: 5,
+    },
+    list: {
+      marginBottom: 8,
+      marginTop: 8,
+    },
+    listItem: {
+      flexDirection: 'row',
+    },
+    listItemBullet: {
+      fontSize: 20,
+      lineHeight: 20,
+    },
+    listItemNumber: {
+      fontWeight: '500',
+    },
+    listItemText: {
+      flex: 0,
+    },
+    listRow: {
+      flexDirection: 'row',
+    },
+    mentions: {
+      color: colors.accent_blue,
+      fontWeight: '700',
+    },
+    noMargin: {
+      marginBottom: 0,
+      marginTop: 0,
+    },
+    paragraph: {
+      alignItems: 'flex-start',
+      flexDirection: 'row',
+      flexWrap: 'wrap',
+      justifyContent: 'flex-start',
+      marginBottom: 8,
+      marginTop: 8,
+    },
+    paragraphCenter: {
+      alignItems: 'flex-start',
+      flexDirection: 'row',
+      flexWrap: 'wrap',
+      justifyContent: 'center',
+      marginBottom: 8,
+      marginTop: 8,
+      textAlign: 'center',
+    },
+    paragraphWithImage: {
+      alignItems: 'flex-start',
+      flex: 1,
+      justifyContent: 'flex-start',
+      marginBottom: 8,
+      marginTop: 8,
+    },
+    strong: {
+      fontWeight: 'bold',
+    },
+    sublist: {
+      paddingLeft: 10,
+      width: Dimensions.get('window').width - 60,
+    },
+    table: {
+      borderColor: colors.grey_dark,
+      borderRadius: 3,
+      borderWidth: 1,
+      flex: 1,
+      flexDirection: 'row',
+      marginVertical: 8,
+    },
+    tableHeader: {
+      backgroundColor: colors.grey,
+      flexDirection: 'row',
+      justifyContent: 'space-around',
+    },
+    tableHeaderCell: {
+      color: colors.white,
+      fontWeight: '500',
+      padding: 5,
+    },
+    tableRow: {
+      alignItems: 'center',
+      borderColor: colors.grey_dark,
+      flexDirection: 'row',
+      justifyContent: 'space-around',
+    },
+    tableRowCell: {
+      borderColor: colors.grey_dark,
+      flex: 1,
+      padding: 5,
+    },
+    tableRowLast: {
+      borderColor: 'transparent',
+    },
+    text: {
+      color: colors.black,
+    },
+    textRow: {
+      flexDirection: 'row',
+    },
+    u: {
+      borderBottomWidth: 1,
+      borderColor: colors.grey_dark,
+    },
+    url: {
+      color: colors.accent_blue,
+    },
+    view: {
+      alignSelf: 'stretch',
+    },
+  });
+};