Improve emoji to support custom

app/soapbox/actions/streaming.ts

@@ -2,6 +2,7 @@ import { InfiniteData } from '@tanstack/react-query';
 
 import { getSettings } from 'soapbox/actions/settings';
 import messages from 'soapbox/locales/messages';
+import { normalizeChatMessage } from 'soapbox/normalizers';
 import { ChatKeys, IChat, isLastMessage } from 'soapbox/queries/chats';
 import { queryClient } from 'soapbox/queries/client';
 import { updatePageItem, appendPageItem, removePageItem, flattenPages, PaginatedResult } from 'soapbox/utils/queries';
@@ -73,7 +74,7 @@ const updateChat = (payload: ChatPayload) => {
 
   if (lastMessage) {
     // Update the Chat Messages query data.
-    appendPageItem(ChatKeys.chatMessages(payload.id), lastMessage);
+    appendPageItem(ChatKeys.chatMessages(payload.id), normalizeChatMessage(lastMessage));
   }
 };
 
@@ -152,7 +153,7 @@ const connectTimelineStream = (
           break;
         case 'pleroma:chat_update':
         case 'chat_message.created': // TruthSocial
-          dispatch((dispatch: AppDispatch, getState: () => RootState) => {
+          dispatch((_dispatch: AppDispatch, getState: () => RootState) => {
             const chat = JSON.parse(data.payload);
             const me = getState().me;
             const messageOwned = chat.last_message?.account_id === me;

app/soapbox/features/chats/components/chat-message-list.tsx

@@ -1,10 +1,10 @@
 import { useMutation } from '@tanstack/react-query';
 import classNames from 'clsx';
-import { List as ImmutableList } from 'immutable';
+import { List as ImmutableList, Map as ImmutableMap } from 'immutable';
 import escape from 'lodash/escape';
 import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react';
 import { useIntl, defineMessages } from 'react-intl';
-import { Virtuoso, VirtuosoHandle } from 'react-virtuoso';
+import { Components, Virtuoso, VirtuosoHandle } from 'react-virtuoso';
 
 import { openModal } from 'soapbox/actions/modals';
 import { initReport } from 'soapbox/actions/reports';
@@ -55,13 +55,22 @@ const timeChange = (prev: IChatMessage, curr: IChatMessage): TimeFormat | null =
   return null;
 };
 
+const makeEmojiMap = (record: any) => record.get('emojis', ImmutableList()).reduce((map: ImmutableMap<string, any>, emoji: ImmutableMap<string, any>) => {
+  return map.set(`:${emoji.get('shortcode')}:`, emoji);
+}, ImmutableMap());
+
+const START_INDEX = 10000;
+
+const List: Components['List'] = React.forwardRef((props, ref) => {
+  const { context, ...rest } = props;
+  return <div ref={ref} {...rest} className='mb-2' />;
+});
+
 interface IChatMessageList {
   /** Chat the messages are being rendered from. */
   chat: IChat,
 }
 
-const START_INDEX = 10000;
-
 /** Scrollable list of chat messages. */
 const ChatMessageList: React.FC<IChatMessageList> = ({ chat }) => {
   const intl = useIntl();
@@ -198,7 +207,8 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chat }) => {
     const pending = chatMessage.pending;
     const deleting = chatMessage.deleting;
     const formatted = (pending && !deleting) ? parsePendingContent(content) : content;
-    return emojify(formatted);
+    const emojiMap = makeEmojiMap(chatMessage);
+    return emojify(formatted, emojiMap.toJS());
   };
 
   const renderDivider = (key: React.Key, text: string) => <Divider key={key} text={text} textSize='sm' />;
@@ -455,20 +465,14 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chat }) => {
               return renderDivider(index, chatMessage.text);
             } else {
               return (
-                <div
+                <div className='px-4 py-2'>
-                  className={
-                    classNames('px-4', {
-                      'py-2': index !== START_INDEX,
-                      'pt-2 pb-4': index === START_INDEX || chatMessage.pending,
-                    })
-                  }
-                >
                   {renderMessage(chatMessage)}
                 </div>
               );
             }
           }}
           components={{
+            List,
             Header: () => {
               if (hasNextPage || isFetchingNextPage) {
                 return <Spinner withText={false} />;

app/soapbox/normalizers/chat_message.ts

@@ -19,7 +19,6 @@ export const ChatMessageRecord = ImmutableRecord({
   emojis: ImmutableList<Emoji>(),
   id: '',
   unread: false,
-
   deleting: false,
   pending: false as boolean | undefined,
 });

app/soapbox/queries/chats.ts

@@ -253,14 +253,17 @@ const useChatActions = (chatId: string) => {
             if (idx === 0) {
               return {
                 ...page,
-                result: [...page.result, {
+                result: [
-                  content: variables.content,
+                  ...page.result,
-                  id: String(Number(new Date())),
+                  normalizeChatMessage({
-                  created_at: new Date(),
+                    content: variables.content,
-                  account_id: account?.id,
+                    id: String(Number(new Date())),
-                  pending: true,
+                    created_at: new Date(),
-                  unread: true,
+                    account_id: account?.id,
-                }],
+                    pending: true,
+                    unread: true,
+                  }),
+                ],
               };
             }