feat: support jump to message (#1478)

Author: petyosi

.gitignore

@@ -60,6 +60,7 @@ typings/
 
 # dotenv environment variables file
 .env
+/.env.local
 /.env.development
 /.env.production
 
@@ -70,4 +71,3 @@ client/dist
 /.virtualgo
 .vscode/
 coverage.out
-.env.local

docusaurus/docs/React/contexts/channel-action-context.mdx

@@ -50,6 +50,59 @@ A function that takes a message to be edited, returns a Promise.
 | -------- |
 | function |
 
+### jumpToLatestMessage
+
+Used in conjunction with `jumpToMessage`. Restores the position of the message list back to the most recent messages.
+
+| Type                  |
+| --------------------- |
+| `() => Promise<void>` |
+
+### jumpToMessage
+
+When called, `jumpToMessage` causes the current message list to jump to the message with the id specified in the `messageId` parameter. 
+Here's an example of a button, which, when clicked, searches for a given message and  navigates to it:
+
+```tsx
+const JumpToMessage = () => {
+  const { jumpToMessage } = useChannelActionContext();
+
+  return (
+    <button
+      data-testid='jump-to-message'
+      onClick={async () => {
+        // the filtering based on channelId is just for example purposes. 
+        const results = await chatClient.search(
+          {
+            id: { $eq: channelId },
+          },
+          'Message 29',
+          { limit: 1, offset: 0 },
+        );
+
+        jumpToMessage(results.results[0].message.id);
+      }}
+    >
+      Jump to message 29
+    </button>
+  );
+};
+
+// further down the line, add the JumpToMessage to the component tree as a child of `Channel`
+// ...
+  return (<Channel channel={channel}>
+    <JumpToMessage />
+    <Window>
+      <MessageList />
+    </Window>
+  </Channel>)
+```
+
+
+| Type                                   |
+| ------------------------------------   |
+| `(messageId: string) => Promise<void>` |
+
 ### loadMore
 
 The function to load next page/batch of `messages` (used for pagination).

docusaurus/docs/React/hooks/message-list-hooks.mdx

@@ -7,11 +7,6 @@ title: MessageList Hooks
 The `MessageList` and `VirtualizedMessageList` components use a variety of custom hooks to assemble a scrollable list of `Message` components, with all of the necessary data and handlers provided to each.
 These hooks can be useful when building a custom list component.
 
-### useCallLoadMore
-
-A [custom hook](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageList/hooks/useCallLoadMore.ts) that returns a memoized callback of the loadMore function that only changes if the limit paramter changes.
-This returned value is then added to the props object given to the `InfiniteScroll` component.
-
 ### useEnrichedMessages
 
 A [custom hook](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageList/hooks/useEnrichedMessages.ts) that determines which messages need date separators and group css styles, returns the processed array of messages.

e2e/fixtures.mjs

@@ -30,15 +30,21 @@ dotenv.config({ path: `.env.local` });
     });
     await channel.create();
     await channel.truncate();
+    let messageToQuote;
     for (let i = 0; i < MESSAGES_COUNT; i++) {
       if (process.stdout.clearLine && process.stdout.cursorTo) {
         printProgress(i / MESSAGES_COUNT);
       }
 
-      await channel.sendMessage({
+      const res = await channel.sendMessage({
         text: `Message ${i}`,
         user: { id: i % 2 ? E2E_TEST_USER_1 : E2E_TEST_USER_2 },
+        ...(i === 140 ? { quoted_message_id: messageToQuote.message.id } : {}),
       });
+
+      if (i === 20) {
+        messageToQuote = res;
+      }
     }
     process.stdout.write('\n');
   }

e2e/jump-to-message.test.ts

@@ -0,0 +1,40 @@
+/* eslint-disable jest/no-done-callback */
+/* eslint-disable jest/require-top-level-describe */
+import { expect, test } from '@playwright/test';
+
+test.describe('jump to message', () => {
+  [
+    ['virtualized', 'jump-to-message--jump-in-virtualized-message-list'],
+    ['regular', 'jump-to-message--jump-in-regular-message-list'],
+  ].forEach(([mode, story]) => {
+    test.beforeEach(async ({ baseURL, page }) => {
+      await page.goto(`${baseURL}/?story=${story}`);
+      await page.waitForSelector('[data-storyloaded]');
+      await page.waitForSelector('text=Message 149');
+    });
+
+    test(`${mode} jumps to message 29 and then back to bottom`, async ({ page }) => {
+      const message29 = page.locator('text=Message 29');
+      await expect(message29).not.toBeVisible();
+      await page.click('data-testid=jump-to-message');
+      await expect(message29).toBeVisible();
+      await page.click('text=Latest Messages');
+      await expect(page.locator('text=Message 149')).toBeVisible();
+    });
+
+    test(`${mode} jumps to quoted message`, async ({ page }) => {
+      await page.click('.quoted-message :text("Message 20")');
+      await expect(page.locator('text=Message 20')).toBeVisible();
+    });
+  });
+
+  test('only the current message set is loaded', async ({ baseURL, page }) => {
+    await page.goto(`${baseURL}/?story=jump-to-message--jump-in-regular-message-list`);
+    await page.waitForSelector('[data-storyloaded]');
+    await page.waitForSelector('text=Message 149');
+    await page.click('data-testid=jump-to-message');
+    await page.waitForSelector('text=Message 29');
+    const listItems = page.locator('.str-chat__ul > li');
+    await expect(listItems).toHaveCount(26);
+  });
+});

jest.config.js

@@ -11,7 +11,7 @@ module.exports = {
   },
   preset: 'ts-jest',
   setupFiles: ['core-js'],
-  testPathIgnorePatterns: ['/node_modules/', '/examples/', '__snapshots__', '/e2e'],
+  testPathIgnorePatterns: ['/node_modules/', '/examples/', '__snapshots__', '/e2e/'],
   testRegex: [
     /**
      * If you want to test single file, mention it here
@@ -21,8 +21,8 @@ module.exports = {
      */
   ],
   transform: {
-    '^.+\\.(js|jsx)?$': 'babel-jest',
     '\\.(ts|tsx)?$': ['ts-jest'],
+    '^.+\\.(js|jsx)?$': 'babel-jest',
   },
   transformIgnorePatterns: [],
   verbose: true,

package.json

@@ -60,7 +60,7 @@
   "peerDependencies": {
     "react": "^17.0.0 || ^16.8.0",
     "react-dom": "^17.0.0 || ^16.8.0",
-    "stream-chat": "^6.2.0"
+    "stream-chat": "^6.4.0"
   },
   "files": [
     "dist",
@@ -160,7 +160,7 @@
     "rollup-plugin-visualizer": "^4.2.0",
     "semantic-release": "^18.0.0",
     "semantic-release-cli": "^5.4.4",
-    "stream-chat": "^6.2.0",
+    "stream-chat": "6.4.0",
     "style-loader": "^2.0.0",
     "ts-jest": "^26.5.1",
     "tslib": "2.3.0",

src/@types/vite-env.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly E2E_APP_KEY: string;
+  readonly E2E_APP_SECRET: string;
+  readonly E2E_TEST_USER_1: string;
+  readonly E2E_TEST_USER_1_TOKEN: string;
+  readonly E2E_TEST_USER_2: string;
+  readonly E2E_TEST_USER_2_TOKEN: string;
+  readonly E2E_JUMP_TO_MESSAGE_CHANNEL: string;
+  readonly E2E_ADD_MESSAGE_CHANNEL: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}

src/components/Channel/Channel.tsx

@@ -191,6 +191,8 @@ export type ChannelProps<
   VirtualMessage?: ComponentContextValue<StreamChatGenerics>['VirtualMessage'];
 };
 
+const JUMP_MESSAGE_PAGE_SIZE = 25;
+
 const UnMemoizedChannel = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
   V extends CustomTrigger = CustomTrigger
@@ -449,7 +451,9 @@ const ChannelInner = <
     // prevent duplicate loading events...
     const oldestMessage = state?.messages?.[0];
 
-    if (state.loadingMore || oldestMessage?.status !== 'received') return 0;
+    if (state.loadingMore || state.loadingMoreNewer || oldestMessage?.status !== 'received') {
+      return 0;
+    }
 
     // initial state loads with up to 25 messages, so if less than 25 no need for additional query
     if (channel.state.messages.length < 25) {
@@ -480,6 +484,67 @@ const ChannelInner = <
     return queryResponse.messages.length;
   };
 
+  const loadMoreNewer = async (limit = 100) => {
+    if (!online.current || !window.navigator.onLine) return 0;
+
+    const newestMessage = state?.messages?.[state?.messages?.length - 1];
+    if (state.loadingMore || state.loadingMoreNewer) return 0;
+
+    dispatch({ loadingMoreNewer: true, type: 'setLoadingMoreNewer' });
+
+    const newestId = newestMessage?.id;
+    const perPage = limit;
+    let queryResponse: ChannelAPIResponse<StreamChatGenerics>;
+
+    try {
+      queryResponse = await channel.query({
+        messages: { id_gt: newestId, limit: perPage },
+        watchers: { limit: perPage },
+      });
+    } catch (e) {
+      console.warn('message pagination request failed with error', e);
+      dispatch({ loadingMoreNewer: false, type: 'setLoadingMoreNewer' });
+      return 0;
+    }
+
+    const hasMoreNewer = channel.state.messages !== channel.state.latestMessages;
+
+    dispatch({ hasMoreNewer, messages: channel.state.messages, type: 'loadMoreNewerFinished' });
+    return queryResponse.messages.length;
+  };
+
+  const jumpToMessage = async (messageId: string) => {
+    dispatch({ loadingMore: true, type: 'setLoadingMore' });
+    await channel.state.loadMessageIntoState(messageId);
+
+    /**
+     * if the message we are jumping to has less than half of the page size older messages,
+     * we have jumped to the beginning of the channel.
+     */
+    const indexOfMessage = channel.state.messages.findIndex((message) => message.id === messageId);
+    const hasMoreMessages = indexOfMessage >= Math.floor(JUMP_MESSAGE_PAGE_SIZE / 2);
+
+    loadMoreFinished(hasMoreMessages, channel.state.messages);
+    dispatch({
+      hasMoreNewer: channel.state.messages !== channel.state.latestMessages,
+      highlightedMessageId: messageId,
+      type: 'jumpToMessageFinished',
+    });
+
+    setTimeout(() => {
+      dispatch({ type: 'clearHighlightedMessage' });
+    }, 500);
+  };
+
+  const jumpToLatestMessage = async () => {
+    await channel.state.loadMessageIntoState('latest');
+    const hasMoreOlder = channel.state.messages.length >= 25;
+    loadMoreFinished(hasMoreOlder, channel.state.messages);
+    dispatch({
+      type: 'jumpToLatestMessage',
+    });
+  };
+
   const updateMessage = (
     updatedMessage: MessageToSend<StreamChatGenerics> | StreamMessage<StreamChatGenerics>,
   ) => {
@@ -707,7 +772,10 @@ const ChannelInner = <
       closeThread,
       dispatch,
       editMessage,
+      jumpToLatestMessage,
+      jumpToMessage,
       loadMore,
+      loadMoreNewer,
       loadMoreThread,
       onMentionsClick: onMentionsHoverOrClick,
       onMentionsHover: onMentionsHoverOrClick,
@@ -719,7 +787,7 @@ const ChannelInner = <
       skipMessageDataMemoization,
       updateMessage,
     }),
-    [channel.cid, loadMore, quotedMessage],
+    [channel.cid, loadMore, loadMoreNewer, quotedMessage, jumpToMessage, jumpToLatestMessage],
   );
 
   const componentContextValue: ComponentContextValue<StreamChatGenerics> = useMemo(