chore(deps): remove mml-react

examples/vite/package.json

@@ -24,6 +24,6 @@
     "eslint-plugin-react-refresh": "^0.4.6",
     "sass": "^1.75.0",
     "typescript": "^5.4.5",
-    "vite": "^5.2.10"
+    "vite": "^6.3.5"
   }
 }

package.json

@@ -133,8 +133,7 @@
     "use-sync-external-store": "^1.4.0"
   },
   "optionalDependencies": {
-    "@stream-io/transliterate": "^1.5.5",
-    "mml-react": "^0.4.7"
+    "@stream-io/transliterate": "^1.5.5"
   },
   "peerDependencies": {
     "@breezystack/lamejs": "^1.2.7",

src/components/Message/FixedHeightMessage.tsx

@@ -1,14 +1,13 @@
 import React, { useCallback, useMemo } from 'react';
 
-import { useActionHandler, useDeleteHandler, useUserRole } from './hooks';
+import { useDeleteHandler, useUserRole } from './hooks';
 import { MessageDeleted as DefaultMessageDeleted } from './MessageDeleted';
 import { MessageTimestamp } from './MessageTimestamp';
 import { getMessageActions } from './utils';
 
 import { Avatar } from '../Avatar';
 import { Gallery } from '../Gallery';
 import { MessageActions } from '../MessageActions';
-import { MML } from '../MML';
 
 import { useChatContext } from '../../context/ChatContext';
 import { useComponentContext } from '../../context/ComponentContext';
@@ -56,7 +55,6 @@ const UnMemoizedFixedHeightMessage = (props: FixedHeightMessageProps) => {
     propGroupedByUser !== undefined ? propGroupedByUser : contextGroupedByUser;
   const message = propMessage || contextMessage;
 
-  const handleAction = useActionHandler(message);
   const handleDelete = useDeleteHandler(message);
   const role = useUserRole(message);
 
@@ -106,9 +104,6 @@ const UnMemoizedFixedHeightMessage = (props: FixedHeightMessageProps) => {
             {images && <Gallery images={images} />}
             <div className='str-chat__virtual-message__text' data-testid='msg-text'>
               {renderedText}
-              {message.mml && (
-                <MML actionHandler={handleAction} align='left' source={message.mml} />
-              )}
               <div className='str-chat__virtual-message__data'>
                 <MessageActions
                   customWrapperClass='str-chat__virtual-message__actions'

src/components/Message/MessageSimple.tsx

@@ -27,7 +27,6 @@ import {
 import { Avatar as DefaultAvatar } from '../Avatar';
 import { Attachment as DefaultAttachment } from '../Attachment';
 import { EditMessageModal } from '../MessageInput';
-import { MML } from '../MML';
 import { Poll } from '../Poll';
 import { ReactionsList as DefaultReactionList } from '../Reactions';
 import { MessageBounceModal } from '../MessageBounce/MessageBounceModal';
@@ -197,13 +196,6 @@ const MessageSimpleWithContext = (props: MessageSimpleWithContextProps) => {
               ) : (
                 <MessageText message={message} renderText={renderText} />
               )}
-              {message.mml && (
-                <MML
-                  actionHandler={handleAction}
-                  align={isMyMessage() ? 'right' : 'left'}
-                  source={message.mml}
-                />
-              )}
               <MessageErrorIcon />
             </div>
           </div>

src/components/Message/__tests__/FixedHeightMessage.test.js

@@ -8,7 +8,6 @@ import { Avatar as AvatarMock } from '../../Avatar';
 import { Gallery as GalleryMock } from '../../Gallery';
 import { Message } from '../Message';
 import { MessageActions as MessageActionsMock } from '../../MessageActions';
-import { MML as MMLMock } from '../../MML';
 
 import { ChannelActionProvider } from '../../../context/ChannelActionContext';
 import { ChannelStateProvider } from '../../../context/ChannelStateContext';
@@ -24,7 +23,6 @@ import {
 import { ComponentProvider } from '../../../context';
 
 jest.mock('../../Avatar', () => ({ Avatar: jest.fn(() => <div />) }));
-jest.mock('../../MML', () => ({ MML: jest.fn(() => <div />) }));
 jest.mock('../../Gallery', () => ({ Gallery: jest.fn(() => <div />) }));
 jest.mock('../../MessageActions', () => ({
   MessageActions: jest.fn((props) => props.getMessageActions()),
@@ -95,16 +93,6 @@ describe('<FixedHeightMessage />', () => {
     );
   });
 
-  it('should render MML', async () => {
-    const mml = '<mml>text</mml>';
-    const message = generateMessage({ mml, user: alice });
-    await renderMsg(message);
-    expect(MMLMock).toHaveBeenCalledWith(
-      expect.objectContaining({ align: 'left', source: mml }),
-      undefined,
-    );
-  });
-
   it('should render message action for owner', async () => {
     const message = generateMessage({ user: alice });
     await renderMsg(message);

src/components/Message/__tests__/MessageSimple.test.js

@@ -15,7 +15,6 @@ import { Chat } from '../../Chat';
 import { Attachment as AttachmentMock } from '../../Attachment';
 import { Avatar as AvatarMock } from '../../Avatar';
 import { getReadStates } from '../../MessageList';
-import { MML as MMLMock } from '../../MML';
 import { defaultReactionOptions } from '../../Reactions';
 
 import {
@@ -48,7 +47,6 @@ jest.mock('../MessageOptions', () => ({
 jest.mock('../MessageText', () => ({
   MessageText: jest.fn(() => <div data-testid='mocked-message-text' />),
 }));
-jest.mock('../../MML', () => ({ MML: jest.fn(() => <div data-testid='mocked-mml' />) }));
 jest.mock('../../Avatar', () => ({
   Avatar: jest.fn(() => <div data-testid='mocked-avatar' />),
 }));
@@ -563,33 +561,6 @@ describe('<MessageSimple />', () => {
     expect(results).toHaveNoViolations();
   });
 
-  it('should render MML', async () => {
-    const mml = '<mml>text</mml>';
-    const message = generateAliceMessage({ mml });
-    const { container } = await renderMessageSimple({ message });
-    expect(MMLMock).toHaveBeenCalledWith(
-      expect.objectContaining({ align: 'right', source: mml }),
-      undefined,
-    );
-    const results = await axe(container);
-    expect(results).toHaveNoViolations();
-  });
-
-  it('should render MML on left for others', async () => {
-    const mml = '<mml>text</mml>';
-    const message = generateBobMessage({ mml });
-    const { container } = await renderMessageSimple({
-      message,
-      props: { isMyMessage: () => false },
-    });
-    expect(MMLMock).toHaveBeenCalledWith(
-      expect.objectContaining({ align: 'left', source: mml }),
-      undefined,
-    );
-    const results = await axe(container);
-    expect(results).toHaveNoViolations();
-  });
-
   it('should render message text when message has text', async () => {
     const message = generateAliceMessage({ text: 'Hello' });
     const actionsEnabled = true;

src/components/index.ts

@@ -20,7 +20,6 @@ export * from './MessageActions';
 export type { MessageBouncePromptProps } from './MessageBounce';
 export * from './MessageInput';
 export * from './MessageList';
-export * from './MML';
 export * from './Modal';
 export * from './Notifications';
 export * from './Poll';