Allow custom GIF selector

[oatsoda]

Motivation Users aren't necessarily going to know that they can/must type / in order to be able to send a GIF.

Proposed solution We're looking at ways to provide, ideally, a button which pops up a GIF selection screen, but it seems at the moment we would need to provider an entire MessageInput component (keeping all existing functionality) to add this.

Possible solutions roughly in descending order of complexity:

• Add a button which pops up a GIF selector window (like the EmojiPicker) that you can search, scroll and pick the appropriate GIF, then click on the one you wish to send.
• Add an (optional) button to the standard MessageInputFlat next to the File Upload which creates the existing GIF input (With the Send, Shuffle, Cancel buttons),
  • Potentially allow a custom handler so that a custom popup could be implemented by us to select and then send a GIF
• Add the CommandButton facility like there is in the react-native implementation which at least gives the visual element so that users don't need to know to type / to send a GIF.

[arnautov-anton]

Hey, @oatsoda, thank you for your feature submission; we're aware of this issue but we do not plan on adding such feature anytime soon. I'll keep the issue open as we'll definitely revisit it in the future to at least make it close to what our React Native SDK does but in the meantime I can only suggest this crude solution you could use - there's no need to re-implement the whole MessageInput component, slight changes to styling should be sufficient:

const CustomGIFSelector = () => {
  const { sendMessage } = useChannelActionContext();
  const [open, setOpen] = useState(false);

  const GIFSelectionHandler = (url) => {
    sendMessage({
      attachments: [
        {
          type: 'image',
          image_url: url,
        },
      ],
    });
  };

  return (
    <>
      {open && <GIFListWithSearch onGIFSelected={GIFSelectionHandler} />}
      <button onClick={() => setOpen((pv) => !pv)}>GIF</button>
    </>
  );
};

And to integrate it with our input you'd do something like this:

<Channel>
  {/*...other components...*/}

  <div style={{ display: 'flex', alignItems: 'center' }}>
    <CustomGIFSelector />
    <MessageInput />
  </div>
<Channel />

Hope this helps, let me know if you have any other questions. :)

cc @DannyBiezen