Theming v2 message component

[MartinCupela]

🎯 Goal

Depends on GetStream/react-file-utils#69
Depends on GetStream/stream-chat-css#146
Fixes #1583

1. Introduce class names used in V2 stylesheet by @stream-io/stream-chat-css and associated changes in markup. The goal is to keep the markup in sync with stream-chat-angular (see Message theme v2 stream-chat-angular#300)
2. Create separate v1 and v2 components. This dichotomy is planned to be temporal. once the V1 styles are deprecated, the v1 components will be removed. Mainly:
   1. Audio (widget)
   2. Card
   3. FileAttachment
3. Introduce grouping into attachment rendering - attachments of the same type are rendered together and not ad hoc. The groups are moreover ordered from top to bottom as follows:
   1. card (scraped content - only the first encountered scraped attachment)
   2. uploaded image (or gallery)
   3. uploaded video
   4. uploaded audio files
   5. uploaded text files
4. Add refactor by @arnautov-anton where attachment components are not rendered by normal functions but by container components
5. Scraped attachment rendered by the component called Card now renders as video, audio and image as follows:
   1. Og image + audio widget (og text info rendered within it)
   2. Video + og text info (title, text)
   3. Og image + og text info (this was the original implementation)
6. FileAttachment component now uses new icon set from react-file-utils (see feat: add new set of file icons v2 react-file-utils#69)
7. Parameter themeVersion has been added to the ChatContext to temporarily decide what component version to display
8. Gallery and Image components have been refactored to allow rendering of custom image gallery in modal. New ModalGallery value has been added to the ComponentContext
9. Gallery modal has in v2 background and overlay styling matching the styling of stream-chat-angular
10. Date separator styles
11. Long-term deprecated message components have been removed

🎨 UI Changes

What	V1	V2	Figma
Message text
Message error
Message delivered status indicator (single checkmark)
Message read status
Quoted message
Quoted message with attachment (does it make sense to keep the text to the side? What about readability?)
Quoted message with scraped attachment			N/A
System message
Date separator
Uploaded single image attachment
Uploaded multiple images attachment - gallery
Uploaded video attachment			N/A
Uploaded audio attachment
Uploaded file attachment
Scraped image attachment
Scraped audio attachment
Scraped video attachment
Combination of attachments in one massage
Giphy card with actions
Giphy card sent
Modal gallery			N/A
Message actions menu
Thread replies count button
Thread header

Not implemented

Feature	Figma design
Uploaded file attachment available locally (not implemented) - folder icon, audio length
Audio playlist for scraped audio attachment
Robust image carousel - solved in a separate PR	N/A
Figma design missing for date separators - used the old styles	N/A

[szuperaz]

@szuperaz @arnautov-anton @oliverlaz When clicked on a download icon of a audio widget, the file is not downloaded but a new tab is opened with browser specific audio widget. There it is possible to also download the content. Is this a desired behavior or do we want the window.open() button click handler? That latter causes a page to blink and is more invasive I think. Or do you have some other suggestions?

Chrome audio widget in a new tab:

I think it's ok to have this behavior

[codecov]

Codecov Report

Merging #1665 (21152b5) into theming-v2 (430bf24) will increase coverage by 2.44%.
The diff coverage is 90.38%.

@@              Coverage Diff               @@
##           theming-v2    #1665      +/-   ##
==============================================
+ Coverage       79.54%   81.98%   +2.44%     
==============================================
  Files             237      241       +4     
  Lines            5851     5817      -34     
  Branches         1643     1639       -4     
==============================================
+ Hits             4654     4769     +115     
+ Misses           1050      895     -155     
- Partials          147      153       +6     

Impacted Files	Coverage Δ
src/components/Avatar/Avatar.tsx	100.00% <ø> (ø)
src/components/Channel/Channel.tsx	81.78% <ø> (ø)
src/components/Chat/hooks/useCreateChatContext.ts	100.00% <ø> (ø)
src/components/Message/MessageDeleted.tsx	100.00% <ø> (ø)
src/components/Message/MessageText.tsx	94.28% <ø> (ø)
src/components/Message/index.ts	100.00% <ø> (ø)
src/components/MessageInput/EditMessageForm.tsx	100.00% <ø> (ø)
src/components/MessageList/CustomNotification.tsx	100.00% <ø> (ø)
src/components/Thread/ThreadHead.tsx	100.00% <ø> (ø)
src/context/ChatContext.tsx	63.15% <ø> (ø)
... and 44 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 430bf24...21152b5. Read the comment docs.

[petyosi]

🎉 This PR is included in version 10.0.0-theming-v2.1 🎉

The release is available on:

• GitHub release
• npm package (@theming-v2 dist-tag)

Your semantic-release bot 📦🚀

[petyosi]

🎉 This PR is included in version 10.0.0 🎉

The release is available on:

• GitHub release
• npm package (@latest dist-tag)

Your semantic-release bot 📦🚀