stream-chat-react-native-core 6.0.0-rc.8 → 6.0.0

package/src/components/Message/MessageSimple/utils/generateMarkdownText.ts

@@ -33,7 +33,21 @@ export const generateMarkdownText = (text?: string) => {
     resultText = resultText.replace(mentionsRegex, `@${displayLink}`);
   }
 
-  resultText = resultText.replace(/[<"'>]/g, '\\$&');
+  // Escape the " and ' characters, except in code blocks where we deem this allowed.
+  resultText = resultText.replace(/(```[\s\S]*?```|`.*?`)|[<"'>]/g, (match, code) => {
+    if (code) return code;
+    return `\\${match}`;
+  });
+
+  // Remove whitespaces that come directly after newlines except in code blocks where we deem this allowed.
+  resultText = resultText.replace(/(```[\s\S]*?```|`.*?`)|\n[ ]{2,}/g, (_, code) => {
+    if (code) return code;
+    return '\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```');
 
   return resultText;
 };

package/src/components/Message/MessageSimple/utils/renderText.tsx

@@ -1,8 +1,18 @@
-import React, { PropsWithChildren } from 'react';
-import { GestureResponderEvent, Linking, Text, TextProps, View, ViewProps } from 'react-native';
-
+import React, { PropsWithChildren, ReactNode, useCallback, useMemo } from 'react';
+import {
+  GestureResponderEvent,
+  Linking,
+  Platform,
+  Text,
+  TextProps,
+  View,
+  ViewProps,
+} from 'react-native';
+
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 // @ts-expect-error
 import Markdown from 'react-native-markdown-package';
+import Animated, { clamp, scrollTo, useAnimatedRef, useSharedValue } from 'react-native-reanimated';
 
 import {
   DefaultRules,
@@ -26,7 +36,64 @@ import type { DefaultStreamChatGenerics } from '../../../../types/types';
 import { escapeRegExp } from '../../../../utils/utils';
 import type { MessageType } from '../../../MessageList/hooks/useMessageList';
 
+export const MarkdownReactiveScrollView = ({ children }: { children: ReactNode }) => {
+  const scrollViewRef = useAnimatedRef<Animated.ScrollView>();
+  const contentWidth = useSharedValue(0);
+  const visibleContentWidth = useSharedValue(0);
+  const offsetBeforeScroll = useSharedValue(0);
+
+  const panGesture = Gesture.Pan()
+    .activeOffsetX([-5, 5])
+    .onUpdate((event) => {
+      const { translationX } = event;
+
+      scrollTo(scrollViewRef, offsetBeforeScroll.value - translationX, 0, false);
+    })
+    .onEnd((event) => {
+      const { translationX } = event;
+
+      const velocityEffect = event.velocityX * 0.3;
+
+      const finalPosition = clamp(
+        offsetBeforeScroll.value - translationX - velocityEffect,
+        0,
+        contentWidth.value - visibleContentWidth.value,
+      );
+
+      offsetBeforeScroll.value = finalPosition;
+
+      scrollTo(scrollViewRef, finalPosition, 0, true);
+    });
+
+  return (
+    <View style={{ width: '100%' }}>
+      <GestureDetector gesture={panGesture}>
+        <Animated.ScrollView
+          contentContainerStyle={{ flexGrow: 1 }}
+          horizontal
+          nestedScrollEnabled={true}
+          onContentSizeChange={(width) => {
+            contentWidth.value = width;
+          }}
+          onLayout={(e) => {
+            visibleContentWidth.value = e.nativeEvent.layout.width;
+          }}
+          ref={scrollViewRef}
+          scrollEnabled={false}
+        >
+          {children}
+        </Animated.ScrollView>
+      </GestureDetector>
+    </View>
+  );
+};
+
 const defaultMarkdownStyles: MarkdownStyle = {
+  codeBlock: {
+    fontFamily: Platform.OS === 'ios' ? 'Courier' : 'Monospace',
+    fontWeight: '500',
+    marginVertical: 8,
+  },
   inlineCode: {
     fontSize: 13,
     padding: 3,
@@ -60,6 +127,26 @@ const defaultMarkdownStyles: MarkdownStyle = {
     marginBottom: 8,
     marginTop: 8,
   },
+  table: {
+    borderRadius: 3,
+    borderWidth: 1,
+    flex: 1,
+    flexDirection: 'row',
+  },
+  tableHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+  },
+  tableHeaderCell: {
+    fontWeight: '500',
+  },
+  tableRow: {
+    alignItems: 'center',
+    justifyContent: 'space-around',
+  },
+  tableRowCell: {
+    flex: 1,
+  },
 };
 
 const mentionsParseFunction: ParseFunction = (capture, parse, state) => ({
@@ -113,6 +200,13 @@ export const renderText = <
       color: colors.accent_blue,
       ...markdownStyles?.autolink,
     },
+    codeBlock: {
+      ...defaultMarkdownStyles.codeBlock,
+      backgroundColor: colors.code_block,
+      color: colors.black,
+      padding: 8,
+      ...markdownStyles?.codeBlock,
+    },
     inlineCode: {
       ...defaultMarkdownStyles.inlineCode,
       backgroundColor: colors.white_smoke,
@@ -125,6 +219,35 @@ export const renderText = <
       color: colors.accent_blue,
       ...markdownStyles?.mentions,
     },
+    table: {
+      ...defaultMarkdownStyles.table,
+      borderColor: colors.grey_dark,
+      marginVertical: 8,
+      ...markdownStyles?.table,
+    },
+    tableHeader: {
+      ...defaultMarkdownStyles.tableHeader,
+      backgroundColor: colors.grey,
+      ...markdownStyles?.tableHeader,
+    },
+    tableHeaderCell: {
+      ...defaultMarkdownStyles.tableHeaderCell,
+      padding: 5,
+      ...markdownStyles?.tableHeaderCell,
+    },
+    tableRow: {
+      ...defaultMarkdownStyles.tableRow,
+      ...markdownStyles?.tableRow,
+    },
+    tableRowCell: {
+      ...defaultMarkdownStyles.tableRowCell,
+      borderColor: colors.grey_dark,
+      padding: 5,
+      ...markdownStyles?.tableRowCell,
+    },
+    tableRowLast: {
+      ...markdownStyles?.tableRowLast,
+    },
     text: {
       ...defaultMarkdownStyles.text,
       color: colors.black,
@@ -263,6 +386,18 @@ export const renderText = <
     />
   );
 
+  const codeBlockReact: ReactNodeOutput = (node, _, state) => (
+    <MarkdownReactiveScrollView key={state.key}>
+      <Text style={styles.codeBlock}>{node?.content?.trim()}</Text>
+    </MarkdownReactiveScrollView>
+  );
+
+  const tableReact: ReactNodeOutput = (node, output, state) => (
+    <MarkdownReactiveScrollView key={state.key}>
+      <MarkdownTable node={node} output={output} state={state} styles={styles} />
+    </MarkdownReactiveScrollView>
+  );
+
   const customRules = {
     // do not render images, we will scrape them out of the message and show on attachment card component
     image: { match: () => null },
@@ -283,6 +418,8 @@ export const renderText = <
           },
         }
       : {}),
+    codeBlock: { react: codeBlockReact },
+    table: { react: tableReact },
   };
 
   return (
@@ -373,3 +510,70 @@ const ListRow = ({ children, style }: PropsWithChildren<ViewProps>) => (
 const ListItem = ({ children, style }: PropsWithChildren<TextProps>) => (
   <Text style={style}>{children}</Text>
 );
+
+export type MarkdownTableProps = {
+  node: SingleASTNode;
+  output: ReactOutput;
+  state: State;
+  styles: Partial<MarkdownStyle>;
+};
+
+const transpose = (matrix: SingleASTNode[][]) =>
+  matrix[0].map((_, colIndex) => matrix.map((row) => row[colIndex]));
+
+const MarkdownTable = ({ node, output, state, styles }: MarkdownTableProps) => {
+  const content = useMemo(() => {
+    const nodeContent = [node?.header, ...node?.cells];
+    return transpose(nodeContent);
+  }, [node?.cells, node?.header]);
+  const columns = content?.map((column, idx) => (
+    <MarkdownTableColumn
+      items={column}
+      key={`column-${idx}`}
+      output={output}
+      state={state}
+      styles={styles}
+    />
+  ));
+
+  return (
+    <View key={state.key} style={styles.table}>
+      {columns}
+    </View>
+  );
+};
+
+export type MarkdownTableRowProps = {
+  items: SingleASTNode[];
+  output: ReactOutput;
+  state: State;
+  styles: Partial<MarkdownStyle>;
+};
+
+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>
+  );
+};

package/src/components/Message/hooks/useCreateMessageContext.ts

@@ -20,6 +20,7 @@ export const useCreateMessageContext = <
   hasReactions,
   images,
   isEditedMessageOpen,
+  isMessageAIGenerated,
   isMyMessage,
   lastGroupMessage,
   lastReceivedId,
@@ -66,6 +67,7 @@ export const useCreateMessageContext = <
       hasReactions,
       images,
       isEditedMessageOpen,
+      isMessageAIGenerated,
       isMyMessage,
       lastGroupMessage,
       lastReceivedId,

package/src/components/Message/hooks/useStreamingMessage.ts

@@ -0,0 +1,54 @@
+import { useEffect, useRef, useState } from 'react';
+
+import type { DefaultStreamChatGenerics } from '../../../types/types';
+import { StreamingMessageViewProps } from '../MessageSimple/StreamingMessageView';
+
+export type UseStreamingMessageProps<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Pick<
+  StreamingMessageViewProps<StreamChatGenerics>,
+  'letterInterval' | 'renderingLetterCount'
+> & { text: string };
+
+const DEFAULT_LETTER_INTERVAL = 0;
+const DEFAULT_RENDERING_LETTER_COUNT = 2;
+
+/**
+ * A hook that returns text in a streamed, typewriter fashion. The speed of streaming is
+ * configurable.
+ * @param {number} [letterInterval=0] - The timeout between each typing animation in milliseconds.
+ * @param {number} [renderingLetterCount=2] - The number of letters to be rendered each time we update.
+ * @param {string} text - The text that we want to render in a typewriter fashion.
+ * @returns {{ streamedMessageText: string }} - A substring of the text property, up until we've finished rendering the typewriter animation.
+ */
+export const useStreamingMessage = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>({
+  letterInterval = DEFAULT_LETTER_INTERVAL,
+  renderingLetterCount = DEFAULT_RENDERING_LETTER_COUNT,
+  text,
+}: UseStreamingMessageProps<StreamChatGenerics>): { streamedMessageText: string } => {
+  const [streamedMessageText, setStreamedMessageText] = useState<string>(text);
+  const textCursor = useRef<number>(text.length);
+
+  useEffect(() => {
+    const textLength = text.length;
+    const interval = setInterval(() => {
+      if (!text || textCursor.current >= textLength) {
+        clearInterval(interval);
+      }
+      const newCursorValue = textCursor.current + renderingLetterCount;
+      const newText = text.substring(0, newCursorValue);
+      textCursor.current += newText.length - textCursor.current;
+      const codeBlockCounts = (newText.match(/```/g) || []).length;
+      const shouldOptimisticallyCloseCodeBlock = codeBlockCounts > 0 && codeBlockCounts % 2 > 0;
+      setStreamedMessageText(shouldOptimisticallyCloseCodeBlock ? newText + '```' : newText);
+    }, letterInterval);
+
+    return () => {
+      clearInterval(interval);
+    };
+  }, [letterInterval, renderingLetterCount, text]);
+
+  return { streamedMessageText };
+};

package/src/components/MessageInput/MessageInput.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import {
   Modal,
   NativeSyntheticEvent,
@@ -58,6 +58,7 @@ import {
 
 import { isImageMediaLibraryAvailable, triggerHaptic } from '../../native';
 import type { Asset, DefaultStreamChatGenerics } from '../../types/types';
+import { AIStates, useAIState } from '../AITypingIndicatorView';
 import { AutoCompleteInput } from '../AutoCompleteInput/AutoCompleteInput';
 import { CreatePoll } from '../Poll/CreatePollContent';
 
@@ -159,6 +160,7 @@ type MessageInputPropsWithContext<
     | 'showPollCreationDialog'
     | 'sendMessage'
     | 'CreatePollContent'
+    | 'StopMessageStreamingButton'
   > &
   Pick<MessagesContextValue<StreamChatGenerics>, 'Reply'> &
   Pick<
@@ -228,6 +230,7 @@ const MessageInputWithContext = <
     showPollCreationDialog,
     ShowThreadMessageInChannelButton,
     StartAudioRecordingButton,
+    StopMessageStreamingButton,
     suggestions,
     text,
     thread,
@@ -727,6 +730,13 @@ const MessageInputWithContext = <
     })),
   };
 
+  const { channel } = useChannelContext<StreamChatGenerics>();
+  const { aiState } = useAIState(channel);
+
+  const stopGenerating = useCallback(() => channel?.stopAIResponse(), [channel]);
+  const shouldDisplayStopAIGeneration =
+    [AIStates.Thinking, AIStates.Generating].includes(aiState) && !!StopMessageStreamingButton;
+
   return (
     <>
       <View
@@ -832,7 +842,10 @@ const MessageInputWithContext = <
                 </>
               )}
 
-              {isSendingButtonVisible() &&
+              {shouldDisplayStopAIGeneration ? (
+                <StopMessageStreamingButton onPress={stopGenerating} />
+              ) : (
+                isSendingButtonVisible() &&
                 (cooldownRemainingSeconds ? (
                   <CooldownTimer seconds={cooldownRemainingSeconds} />
                 ) : (
@@ -841,7 +854,8 @@ const MessageInputWithContext = <
                       disabled={sending.current || !isValidMessage() || (giphyActive && !isOnline)}
                     />
                   </View>
-                ))}
+                ))
+              )}
               {audioRecordingEnabled && !micLocked && (
                 <GestureDetector gesture={panGestureMic}>
                   <Animated.View
@@ -894,21 +908,23 @@ const MessageInputWithContext = <
         </View>
       )}
       {showPollCreationDialog ? (
-        <Modal
-          animationType='slide'
-          onRequestClose={closePollCreationDialog}
-          visible={showPollCreationDialog}
-        >
-          <GestureHandlerRootView style={{ flex: 1 }}>
-            <SafeAreaView style={{ backgroundColor: white, flex: 1 }}>
-              <CreatePoll
-                closePollCreationDialog={closePollCreationDialog}
-                CreatePollContent={CreatePollContent}
-                sendMessage={sendMessage}
-              />
-            </SafeAreaView>
-          </GestureHandlerRootView>
-        </Modal>
+        <View style={{ alignItems: 'center', flex: 1, justifyContent: 'center' }}>
+          <Modal
+            animationType='slide'
+            onRequestClose={closePollCreationDialog}
+            visible={showPollCreationDialog}
+          >
+            <GestureHandlerRootView style={{ flex: 1 }}>
+              <SafeAreaView style={{ backgroundColor: white, flex: 1 }}>
+                <CreatePoll
+                  closePollCreationDialog={closePollCreationDialog}
+                  CreatePollContent={CreatePollContent}
+                  sendMessage={sendMessage}
+                />
+              </SafeAreaView>
+            </GestureHandlerRootView>
+          </Modal>
+        </View>
       ) : null}
     </>
   );
@@ -1086,7 +1102,7 @@ export const MessageInput = <
   const { isOnline } = useChatContext();
   const ownCapabilities = useOwnCapabilitiesContext();
 
-  const { disabled, members, threadList, watchers } = useChannelContext<StreamChatGenerics>();
+  const { members, threadList, watchers } = useChannelContext<StreamChatGenerics>();
 
   const {
     additionalTextInputProps,
@@ -1141,6 +1157,7 @@ export const MessageInput = <
     showPollCreationDialog,
     ShowThreadMessageInChannelButton,
     StartAudioRecordingButton,
+    StopMessageStreamingButton,
     text,
     uploadNewFile,
     uploadNewImage,
@@ -1164,7 +1181,7 @@ export const MessageInput = <
    * Disable the message input if the channel is frozen, or the user doesn't have the capability to send a message.
    * Enable it in frozen mode, if it the input has editing state.
    */
-  if ((disabled || !ownCapabilities.sendMessage) && !editing && SendMessageDisallowedIndicator) {
+  if (!ownCapabilities.sendMessage && !editing && SendMessageDisallowedIndicator) {
     return <SendMessageDisallowedIndicator />;
   }
 
@@ -1230,6 +1247,7 @@ export const MessageInput = <
         showPollCreationDialog,
         ShowThreadMessageInChannelButton,
         StartAudioRecordingButton,
+        StopMessageStreamingButton,
         suggestions,
         t,
         text,

package/src/components/MessageInput/StopMessageStreamingButton.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Pressable } from 'react-native';
+
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import { CircleStop } from '../../icons';
+
+export type StopMessageStreamingButtonProps = {
+  /** Function that opens attachment options bottom sheet */
+  onPress?: () => void;
+};
+
+export const StopMessageStreamingButton = (props: StopMessageStreamingButtonProps) => {
+  const { onPress } = props;
+
+  const {
+    theme: {
+      colors: { accent_blue },
+      messageInput: { stopMessageStreamingButton, stopMessageStreamingIcon },
+    },
+  } = useTheme();
+
+  return (
+    <Pressable
+      hitSlop={{ bottom: 15, left: 15, right: 15, top: 15 }}
+      onPress={onPress}
+      style={[stopMessageStreamingButton]}
+      testID='more-options-button'
+    >
+      <CircleStop fill={accent_blue} size={32} {...stopMessageStreamingIcon} />
+    </Pressable>
+  );
+};
+
+StopMessageStreamingButton.displayName = 'StopMessageStreamingButton{messageInput}';

package/src/components/MessageInput/__tests__/MessageInput.test.js

@@ -1,9 +1,10 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 
 import { Alert } from 'react-native';
 
-import { cleanup, fireEvent, render, userEvent, waitFor } from '@testing-library/react-native';
+import { act, cleanup, fireEvent, render, userEvent, waitFor } from '@testing-library/react-native';
 
+import { useMessagesContext } from '../../../contexts';
 import * as AttachmentPickerUtils from '../../../contexts/attachmentPickerContext/AttachmentPickerContext';
 import { OverlayProvider } from '../../../contexts/overlayContext/OverlayProvider';
 import { getOrCreateChannelApi } from '../../../mock-builders/api/getOrCreateChannel';
@@ -188,4 +189,117 @@ describe('MessageInput', () => {
       expect(Alert.alert).toHaveBeenCalledWith('Hold to start recording.');
     });
   });
+
+  it('should render the SendMessageDisallowedIndicator if the send-message capability is not present', async () => {
+    await initializeChannel(generateChannelResponse());
+
+    const { queryByTestId } = render(
+      <Chat client={chatClient}>
+        <Channel audioRecordingEnabled channel={channel}>
+          <MessageInput />
+        </Channel>
+      </Chat>,
+    );
+
+    await waitFor(() => {
+      expect(queryByTestId('send-message-disallowed-indicator')).toBeNull();
+    });
+
+    act(() => {
+      chatClient.dispatchEvent({
+        cid: channel.data.cid,
+        own_capabilities: channel.data.own_capabilities.filter(
+          (capability) => capability !== 'send-message',
+        ),
+        type: 'capabilities.changed',
+      });
+    });
+
+    await waitFor(() => {
+      expect(queryByTestId('send-message-disallowed-indicator')).toBeTruthy();
+    });
+  });
+
+  it('should not render the SendMessageDisallowedIndicator if the channel is frozen and the send-message capability is present', async () => {
+    await initializeChannel(generateChannelResponse({ channel: { frozen: true } }));
+
+    const { queryByTestId } = render(
+      <Chat client={chatClient}>
+        <Channel audioRecordingEnabled channel={channel}>
+          <MessageInput />
+        </Channel>
+      </Chat>,
+    );
+
+    await waitFor(() => {
+      expect(queryByTestId('send-message-disallowed-indicator')).toBeNull();
+    });
+  });
+
+  it('should render the SendMessageDisallowedIndicator in a frozen channel only if the send-message capability is not present', async () => {
+    await initializeChannel(generateChannelResponse({ channel: { frozen: true } }));
+
+    const { queryByTestId } = render(
+      <Chat client={chatClient}>
+        <Channel audioRecordingEnabled channel={channel}>
+          <MessageInput />
+        </Channel>
+      </Chat>,
+    );
+
+    act(() => {
+      chatClient.dispatchEvent({
+        channel: {
+          ...channel.data,
+          own_capabilities: channel.data.own_capabilities.filter(
+            (capability) => capability !== 'send-message',
+          ),
+        },
+        cid: channel.data.cid,
+        type: 'channel.updated',
+      });
+    });
+
+    await waitFor(() => {
+      expect(queryByTestId('send-message-disallowed-indicator')).toBeTruthy();
+    });
+  });
+
+  const EditingStateMessageInput = () => {
+    const { setEditingState } = useMessagesContext();
+    useEffect(() => {
+      setEditingState({ id: 'some-message-id' });
+    }, []);
+    return <MessageInput />;
+  };
+
+  it('should not render the SendMessageDisallowedIndicator if we are editing a message, regardless of capabilities', async () => {
+    await initializeChannel(generateChannelResponse());
+
+    const { queryByTestId } = render(
+      <Chat client={chatClient}>
+        <Channel audioRecordingEnabled channel={channel}>
+          <EditingStateMessageInput />
+        </Channel>
+      </Chat>,
+    );
+
+    await waitFor(() => {
+      expect(queryByTestId('send-message-disallowed-indicator')).toBeNull();
+    });
+
+    act(() => {
+      chatClient.dispatchEvent({
+        cid: channel.data.cid,
+        own_capabilities: channel.data.own_capabilities.filter(
+          (capability) => capability !== 'send-message',
+        ),
+        type: 'capabilities.changed',
+      });
+    });
+
+    await waitFor(() => {
+      expect(queryByTestId('send-message-disallowed-indicator')).toBeNull();
+    });
+  });
 });