bug: overrideSubmitHandler does not support URL enrichment

[thecannabisapp]

Describe the bug

I've implemented Virgil E3Kit as per the HIPAA chatbot tutorial. To encrypt my messages, I've chosen to use the overrideSubmitHandler. However, I've noticed that this doesn't support messages that contain URLs and enrich them in the message.attachment prop.

To Reproduce

Steps to reproduce the behavior:

1. Customise component with the overrideSubmitHandler prop.
2. Console.log out the message from the custom overrideSubmitHandler.

3. const overrideSubmitHandler = async (message: MessageToSend) => {
   console.debug("overrideSubmitHandler", message);
   const encryptedMessage = await encryptMessage(message.text!, recepients);
   sendMessage({ ...message, text: encryptedMessage as string });
   };

4. Send a message that contains a URL, like a youtube link.
5. The message logged doesn't contain any attachment props.

Expected behavior

A message that contains a URL should be passed through the custom overrideSubmitHandler and the attachment prop on the message should contain the attachment.

Screenshots

Package version

• stream-chat-react: 10.4.1
• stream-chat-css: 3.7.0
• stream-chat-js: 8.1.2

Desktop (please complete the following information):

• OS: MacOS
• Browser: Chrome
• Version: 107.0.5304.110 (Official Build) (x86_64)

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context

import {
  MessageInput,
  MessageList,
  MessageToSend,
  useChannelActionContext,
  useChannelStateContext,
  Window,
} from "stream-chat-react";
import { CustomChannelHeader } from "../components/CustomChannelHeader";
import { useUserContext } from "../contexts/UserProvider";
import useEncryption from "../hooks/useEncryption";
import { ChatUser } from "../types/stream/chatuser";
import MessageEncrypted from "./MessageEncrypted";

export const ChannelContent = () => {
  const { members, channel } = useChannelStateContext();
  const { encryptMessage } = useEncryption();
  const { sendMessage } = useChannelActionContext();
  const { user } = useUserContext();

  if (!members || !channel) return <></>;

  const recepients = Object.entries(members).map(([key]) => key);
  const reciepient = Object.values(members).find(
    (member) => member.user?.id !== user?.uid
  )?.user as ChatUser | undefined;

  const overrideSubmitHandler = async (message: MessageToSend) => {
    console.debug("overrideSubmitHandler", message);
    const encryptedMessage = await encryptMessage(message.text!, recepients);
    sendMessage({ ...message, text: encryptedMessage as string });
  };

  return (
    <Window>
      <CustomChannelHeader image={reciepient?.image} />
      <MessageList Message={MessageEncrypted} />
      <MessageInput grow overrideSubmitHandler={overrideSubmitHandler} />
    </Window>
  );
};

[petyosi]

Hi @chinesehemp,

This is a known limitation of e2e - in fact, it is by design. The URL enrichment happens on the server side. Since the messages are fully encrypted, there's no way for the server to analyze the message contents and attach the necessary information.

[thecannabisapp]

@petyosi thank you.

[thecannabisapp]

@petyosi, out of curiosity, how can WhatsApp perform URL enrichment if they are also E2EE? Also, does E2EE affect media attachment previews in MessageSimple and ChannelPreviewItem components?

[petyosi]

It is possible to do URL enrichment on the client side, after the message is decoded. However, this has reliability and performance implications. Regarding your second question: Media previews should be fine, but you may have to do some additional logic in the channel preview item.

For further assistance, I may suggest you reach out to support@getstream.io - we are using the issues here for bug reports and project management.