stream-chat-react-native-core 9.7.3 → 9.7.4

package/src/components/Poll/components/__tests__/PollOption.test.tsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+
+import { render, screen } from '@testing-library/react-native';
+
+import {
+  OwnCapabilitiesProvider,
+  PollContextProvider,
+  ThemeProvider,
+  TranslationProvider,
+} from '../../../../contexts';
+import { mergeThemes } from '../../../../contexts/themeContext/ThemeContext';
+import { generateMessage } from '../../../../mock-builders/generator/message';
+import { PollOption } from '../PollOption';
+
+const option = { id: 'option-1', text: 'An option' };
+
+const mockIsPollCreatedByCurrentUser = jest.fn();
+
+jest.mock('../../hook/useIsPollCreatedByCurrentUser', () => ({
+  useIsPollCreatedByCurrentUser: () => mockIsPollCreatedByCurrentUser(),
+}));
+
+jest.mock('../../hooks/usePollState', () => ({
+  usePollState: () => ({
+    isClosed: false,
+    latestVotesByOption: {},
+    ownVotesByOptionId: {},
+    voteCount: 4,
+    voteCountsByOption: { 'option-1': 2 },
+  }),
+}));
+
+jest.mock('../../hooks/usePollVoteToggle', () => ({
+  usePollVoteToggle: () => jest.fn(),
+}));
+
+describe('PollOption chat text side', () => {
+  const lightTheme = mergeThemes({ scheme: 'light' });
+
+  const renderOption = ({ forceIncoming }: { forceIncoming?: boolean } = {}) =>
+    render(
+      <ThemeProvider>
+        <TranslationProvider value={{ t: (key: string) => key } as never}>
+          <OwnCapabilitiesProvider value={{ castPollVote: true } as never}>
+            <PollContextProvider
+              value={{ message: generateMessage(), poll: { data: {} } as never }}
+            >
+              <PollOption forceIncoming={forceIncoming} option={option as never} />
+            </PollContextProvider>
+          </OwnCapabilitiesProvider>
+        </TranslationProvider>
+      </ThemeProvider>,
+    );
+
+  const optionTextColor = () =>
+    StyleSheet.flatten(screen.getByText('An option').props.style)?.color;
+
+  const voteButtonBorderColor = () => {
+    const style = screen.getByLabelText('An option').props.style;
+    return StyleSheet.flatten(typeof style === 'function' ? style({ pressed: false }) : style)
+      ?.borderColor;
+  };
+
+  afterEach(() => {
+    mockIsPollCreatedByCurrentUser.mockReset();
+  });
+
+  it('uses the outgoing chat text colour for our own poll', () => {
+    mockIsPollCreatedByCurrentUser.mockReturnValue(true);
+    renderOption();
+
+    expect(optionTextColor()).toBe(lightTheme.semantics.chatTextOutgoing);
+  });
+
+  it("uses the incoming chat text colour for another user's poll", () => {
+    mockIsPollCreatedByCurrentUser.mockReturnValue(false);
+    renderOption();
+
+    expect(optionTextColor()).toBe(lightTheme.semantics.chatTextIncoming);
+  });
+
+  // The full-options list is a neutral card, not a bubble, so `forceIncoming`
+  // has to win over ownership for every token - the vote button included.
+  it('forces incoming text and vote button border on our own poll', () => {
+    mockIsPollCreatedByCurrentUser.mockReturnValue(true);
+    renderOption({ forceIncoming: true });
+
+    expect(optionTextColor()).toBe(lightTheme.semantics.chatTextIncoming);
+    expect(voteButtonBorderColor()).toBe(lightTheme.semantics.chatBorderOnChatIncoming);
+  });
+
+  it('uses the outgoing vote button border for our own poll in the bubble', () => {
+    mockIsPollCreatedByCurrentUser.mockReturnValue(true);
+    renderOption();
+
+    expect(voteButtonBorderColor()).toBe(lightTheme.semantics.chatBorderOnChatOutgoing);
+  });
+});

package/src/components/Reply/Reply.tsx

@@ -99,6 +99,7 @@ export type ReplyPropsWithContext = { ImageComponent: React.ComponentType<ImageP
 > &
   Pick<MessagesContextValue, 'quotedMessage'> & {
     isMyMessage: boolean;
+    isParentMessageMine?: boolean;
     onDismiss?: () => void;
     mode: 'reply' | 'edit';
     // This is temporary for the MessageContent Component to style the Reply component
@@ -116,6 +117,7 @@ export const ReplyWithContext = (props: ReplyPropsWithContext) => {
   const { t } = useTranslationContext();
   const {
     isMyMessage,
+    isParentMessageMine = isMyMessage,
     ImageComponent,
     message: messageFromContext,
     mode,
@@ -135,7 +137,7 @@ export const ReplyWithContext = (props: ReplyPropsWithContext) => {
       },
     },
   } = useTheme();
-  const styles = useStyles();
+  const styles = useStyles({ isMyMessage: isParentMessageMine });
 
   const title = useMemo(
     () =>
@@ -165,7 +167,8 @@ export const ReplyWithContext = (props: ReplyPropsWithContext) => {
             {title}
           </Text>
 
-          <ReplyMessageView message={quotedMessage} isMyMessage={isMyMessage} />
+          {/* `isMyMessage` here selects which side to paint, so it takes the surface. */}
+          <ReplyMessageView message={quotedMessage} isMyMessage={isParentMessageMine} />
         </View>
         <View style={[styles.rightContainer, rightContainer, stylesProp?.rightContainer]}>
           <RightContent ImageComponent={ImageComponent} message={quotedMessage} />
@@ -187,6 +190,7 @@ const areEqual = (prevProps: ReplyPropsWithContext, nextProps: ReplyPropsWithCon
   const {
     styles: prevStyles,
     isMyMessage: prevIsMyMessage,
+    isParentMessageMine: prevIsParentMessageMine,
     mode: prevMode,
     quotedMessage: prevQuotedMessage,
     onDismiss: prevOnDismiss,
@@ -194,6 +198,7 @@ const areEqual = (prevProps: ReplyPropsWithContext, nextProps: ReplyPropsWithCon
   const {
     styles: nextStyles,
     isMyMessage: nextIsMyMessage,
+    isParentMessageMine: nextIsParentMessageMine,
     mode: nextMode,
     quotedMessage: nextQuotedMessage,
     onDismiss: nextOnDismiss,
@@ -209,6 +214,12 @@ const areEqual = (prevProps: ReplyPropsWithContext, nextProps: ReplyPropsWithCon
     return false;
   }
 
+  const isParentMessageMineEqual = prevIsParentMessageMine === nextIsParentMessageMine;
+
+  if (!isParentMessageMineEqual) {
+    return false;
+  }
+
   const modeEqual = prevMode === nextMode;
   if (!modeEqual) {
     return false;
@@ -275,7 +286,7 @@ const ReplyComposerAnnouncer = ({
 };
 
 export const Reply = (props: ReplyProps) => {
-  const { message: messageFromContext } = useMessageContext();
+  const { isMyMessage: isMyMessageFromContext, message: messageFromContext } = useMessageContext();
   const { client } = useChatContext();
   const { ImageComponent } = useComponentsContext();
 
@@ -289,7 +300,10 @@ export const Reply = (props: ReplyProps) => {
     ? (messageFromContext.quoted_message as MessagesContextValue['quotedMessage'])
     : quotedMessageFromComposer;
 
-  const isMyMessage = client.user?.id === quotedMessage?.user?.id;
+  // `mode='edit'` supplies the edited message via `props.quotedMessage` and leaves
+  // the composer's quoted message empty, so ownership must consider both.
+  const isMyMessage = client.user?.id === (props.quotedMessage ?? quotedMessage)?.user?.id;
+  const isParentMessageMine = messageFromContext ? !!isMyMessageFromContext : undefined;
 
   // Composer header passes `onDismiss`; the in-message quoted-reply renderer
   // does not. Only the composer-preview path pays for announcement work.
@@ -305,6 +319,7 @@ export const Reply = (props: ReplyProps) => {
       <MemoizedReply
         ImageComponent={ImageComponent}
         isMyMessage={isMyMessage}
+        isParentMessageMine={isParentMessageMine}
         message={messageFromContext}
         quotedMessage={quotedMessage}
         {...props}
@@ -313,18 +328,10 @@ export const Reply = (props: ReplyProps) => {
   );
 };
 
-const useStyles = () => {
+const useStyles = ({ isMyMessage = false }: { isMyMessage?: boolean } = {}) => {
   const {
     theme: { semantics },
   } = useTheme();
-  const messageComposer = useMessageComposer();
-  const { quotedMessage: quotedMessageFromComposer } = useStateStore(
-    messageComposer.state,
-    messageComposerStateStoreSelector,
-  );
-  const { client } = useChatContext();
-
-  const isMyMessage = client.user?.id === quotedMessageFromComposer?.user?.id;
   const isRTL = I18nManager.isRTL;
 
   return useMemo(

package/src/components/Reply/__tests__/Reply.test.tsx

@@ -1,13 +1,19 @@
 import React from 'react';
+import { StyleSheet } from 'react-native';
 
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 
-import { render, waitFor } from '@testing-library/react-native';
+import { render, screen, waitFor } from '@testing-library/react-native';
 
+import type { MessageContextValue } from '../../../contexts/messageContext/MessageContext';
+import { MessageProvider } from '../../../contexts/messageContext/MessageContext';
 import { OverlayProvider } from '../../../contexts/overlayContext/OverlayProvider';
+import { mergeThemes } from '../../../contexts/themeContext/ThemeContext';
 import { getOrCreateChannelApi } from '../../../mock-builders/api/getOrCreateChannel';
 import { useMockedApis } from '../../../mock-builders/api/useMockedApis';
 import { generateChannelResponse } from '../../../mock-builders/generator/channel';
+import { generateMessage } from '../../../mock-builders/generator/message';
+import { generateUser } from '../../../mock-builders/generator/user';
 import { getTestClientWithUser } from '../../../mock-builders/mock';
 import { Channel } from '../../Channel/Channel';
 import { Chat } from '../../Chat/Chat';
@@ -49,4 +55,108 @@ describe('<Reply/>', () => {
 
     process.env = oldEnvironment;
   });
+
+  describe('chat text side', () => {
+    const lightTheme = mergeThemes({ scheme: 'light' });
+
+    const setup = async () => {
+      const chatClient = await getTestClientWithUser({ id: 'neil' });
+      const mockedChannel = generateChannelResponse();
+      useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
+      const channel = chatClient.channel('messaging', 'some-chat');
+      await channel.watch();
+      return { chatClient, channel };
+    };
+
+    const titleColor = (title: string) =>
+      StyleSheet.flatten(screen.getByText(title).props.style)?.color;
+
+    // An in-message quoted reply is painted inside the parent bubble, whose
+    // background `MessageContent` resolves from the parent message. The colours
+    // must follow that surface; only the title *copy* describes the quoted author.
+    // The composer holds no quoted message in either case, so these also pin that
+    // the block never styles itself from composer state.
+    const renderInMessageQuotedReply = (
+      { chatClient, channel }: Awaited<ReturnType<typeof setup>>,
+      {
+        isMyMessage,
+        quotedMessageUser,
+      }: { isMyMessage: boolean; quotedMessageUser: { id: string; name?: string } },
+    ) => {
+      const quotedMessage = generateMessage({ user: quotedMessageUser });
+      const message = generateMessage({
+        quoted_message: quotedMessage,
+        quoted_message_id: quotedMessage.id,
+        user: isMyMessage ? { id: 'neil' } : generateUser(),
+      });
+
+      render(
+        <GestureHandlerRootView>
+          <OverlayProvider>
+            <Chat client={chatClient}>
+              <Channel channel={channel} client={chatClient}>
+                <MessageProvider value={{ isMyMessage, message } as unknown as MessageContextValue}>
+                  <Reply mode='reply' />
+                </MessageProvider>
+              </Channel>
+            </Chat>
+          </OverlayProvider>
+        </GestureHandlerRootView>,
+      );
+    };
+
+    it('styles an in-message quoted reply from the parent message, not the quoted author', async () => {
+      const setupResult = await setup();
+
+      // Our own message quoting somebody else: outgoing surface, so outgoing text
+      // even though the quoted author is not us.
+      renderInMessageQuotedReply(setupResult, {
+        isMyMessage: true,
+        quotedMessageUser: { id: 'other-user', name: 'Other User' },
+      });
+
+      await waitFor(() => {
+        expect(titleColor('Reply to Other User')).toBe(lightTheme.semantics.chatTextOutgoing);
+      });
+    });
+
+    it('keeps the title copy on the quoted author while the colours follow the parent', async () => {
+      const setupResult = await setup();
+
+      // Somebody else's message quoting us: incoming surface, so incoming text -
+      // but the title still reads "You", because that describes the quoted author.
+      renderInMessageQuotedReply(setupResult, {
+        isMyMessage: false,
+        quotedMessageUser: { id: 'neil' },
+      });
+
+      await waitFor(() => {
+        expect(titleColor('You')).toBe(lightTheme.semantics.chatTextIncoming);
+      });
+    });
+
+    it('uses outgoing colors for the edit-mode composer header', async () => {
+      const { chatClient, channel } = await setup();
+
+      // `mode='edit'` supplies the message through props and leaves the
+      // composer's quoted message empty - you can only ever edit your own message.
+      const editedMessage = generateMessage({ user: { id: 'neil' } });
+
+      render(
+        <GestureHandlerRootView>
+          <OverlayProvider>
+            <Chat client={chatClient}>
+              <Channel channel={channel} client={chatClient}>
+                <Reply mode='edit' quotedMessage={editedMessage} />
+              </Channel>
+            </Chat>
+          </OverlayProvider>
+        </GestureHandlerRootView>,
+      );
+
+      await waitFor(() => {
+        expect(titleColor('Edit Message')).toBe(lightTheme.semantics.chatTextOutgoing);
+      });
+    });
+  });
 });

package/src/contexts/themeContext/ThemeContext.tsx

@@ -39,7 +39,11 @@ export const mergeThemes = (params: MergedThemesParams) => {
       : JSON.parse(JSON.stringify(theme))
   ) as Theme;
 
-  const semantics = resolveTokensTopologically(scheme === 'dark' ? darkSemantics : lightSemantics);
+  let semantics = scheme === 'dark' ? darkSemantics : lightSemantics;
+  if (theme?.semantics) {
+    semantics = { ...semantics, ...theme.semantics };
+  }
+  semantics = resolveTokensTopologically(semantics);
 
   const finalTheme = { ...baseTheme, semantics };
 

package/src/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "9.7.3"
+  "version": "9.7.4"
 }