docs: update MessageInput cookbook

[myandrienko]

Preview here: https://staging.getstream.io/chat/docs/sdk/react/guides/theming/input_ui/

Updated the MessageInput Cookbook (hopfully) to our new standards.

What's covered:

1. The input itself
2. Adding attachments
3. Handling link previews
4. Slow mode

What's not covered:

1. Handling autocompletion triggers - that should its own page IMO.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 85.09%. Comparing base (1ff586a) to head (f650695).

Additional details and impacted files

@@           Coverage Diff           @@
##           master    #2335   +/-   ##
=======================================
  Coverage   85.09%   85.09%           
=======================================
  Files         353      353           
  Lines        8037     8037           
  Branches     2119     2119           
=======================================
  Hits         6839     6839           
  Misses       1013     1013           
  Partials      185      185           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[github-actions]

Size Change: 0 B

Total Size: 1.82 MB

ℹ️ View Unchanged

Filename	Size
./dist/browser.full-bundle.js	722 kB
./dist/browser.full-bundle.min.js	391 kB
./dist/components/Attachment/attachment-sizing.js	1.08 kB
./dist/components/Attachment/Attachment.js	1.08 kB
./dist/components/Attachment/AttachmentActions.js	524 B
./dist/components/Attachment/AttachmentContainer.js	2.21 kB
./dist/components/Attachment/Audio.js	1.42 kB
./dist/components/Attachment/Card.js	1.77 kB
./dist/components/Attachment/components/DownloadButton.js	262 B
./dist/components/Attachment/components/FileSizeIndicator.js	289 B
./dist/components/Attachment/components/index.js	112 B
./dist/components/Attachment/components/PlaybackRateButton.js	215 B
./dist/components/Attachment/components/PlayButton.js	279 B
./dist/components/Attachment/components/ProgressBar.js	288 B
./dist/components/Attachment/components/WaveProgressBar.js	1.99 kB
./dist/components/Attachment/FileAttachment.js	555 B
./dist/components/Attachment/hooks/useAudioController.js	1.05 kB
./dist/components/Attachment/icons.js	573 B
./dist/components/Attachment/index.js	120 B
./dist/components/Attachment/UnsupportedAttachment.js	267 B
./dist/components/Attachment/utils.js	1.93 kB
./dist/components/Attachment/VoiceRecording.js	1.03 kB
./dist/components/AutoCompleteTextarea/Header.js	332 B
./dist/components/AutoCompleteTextarea/index.js	157 B
./dist/components/AutoCompleteTextarea/Item.js	527 B
./dist/components/AutoCompleteTextarea/List.js	1.52 kB
./dist/components/AutoCompleteTextarea/Textarea.js	6.86 kB
./dist/components/AutoCompleteTextarea/types.js	31 B
./dist/components/AutoCompleteTextarea/utils.js	834 B
./dist/components/Avatar/Avatar.js	740 B
./dist/components/Avatar/index.js	46 B
./dist/components/Channel/Channel.js	10.2 kB
./dist/components/Channel/channelState.js	1.04 kB
./dist/components/Channel/hooks/useChannelContainerClasses.js	353 B
./dist/components/Channel/hooks/useCreateChannelStateContext.js	1.56 kB
./dist/components/Channel/hooks/useCreateTypingContext.js	235 B
./dist/components/Channel/hooks/useEditMessageHandler.js	252 B
./dist/components/Channel/hooks/useIsMounted.js	168 B
./dist/components/Channel/hooks/useMentionsHandlers.js	422 B
./dist/components/Channel/index.js	117 B
./dist/components/Channel/LoadingChannel.js	360 B
./dist/components/Channel/utils.js	848 B
./dist/components/ChannelHeader/ChannelHeader.js	901 B
./dist/components/ChannelHeader/icons.js	458 B
./dist/components/ChannelHeader/index.js	53 B
./dist/components/ChannelList/ChannelList.js	3.03 kB
./dist/components/ChannelList/ChannelListMessenger.js	490 B
./dist/components/ChannelList/hooks/index.js	196 B
./dist/components/ChannelList/hooks/useChannelDeletedListener.js	454 B
./dist/components/ChannelList/hooks/useChannelHiddenListener.js	450 B
./dist/components/ChannelList/hooks/useChannelTruncatedListener.js	379 B
./dist/components/ChannelList/hooks/useChannelUpdatedListener.js	614 B
./dist/components/ChannelList/hooks/useChannelVisibleListener.js	616 B
./dist/components/ChannelList/hooks/useConnectionRecoveredListener.js	275 B
./dist/components/ChannelList/hooks/useMessageNewListener.js	599 B
./dist/components/ChannelList/hooks/useMobileNavigation.js	276 B
./dist/components/ChannelList/hooks/useNotificationAddedToChannelListener.js	825 B
./dist/components/ChannelList/hooks/useNotificationMessageNewListener.js	702 B
./dist/components/ChannelList/hooks/useNotificationRemovedFromChannelListener.js	411 B
./dist/components/ChannelList/hooks/usePaginatedChannels.js	1.59 kB
./dist/components/ChannelList/hooks/useUserPresenceChangedListener.js	466 B
./dist/components/ChannelList/index.js	78 B
./dist/components/ChannelList/utils.js	314 B
./dist/components/ChannelPreview/ChannelPreview.js	1.06 kB
./dist/components/ChannelPreview/ChannelPreviewMessenger.js	881 B
./dist/components/ChannelPreview/hooks/index.js	97 B
./dist/components/ChannelPreview/hooks/useChannelPreviewInfo.js	471 B
./dist/components/ChannelPreview/hooks/useIsChannelMuted.js	319 B
./dist/components/ChannelPreview/hooks/useMessageDeliveryStatus.js	829 B
./dist/components/ChannelPreview/index.js	81 B
./dist/components/ChannelPreview/utils.js	695 B
./dist/components/ChannelSearch/ChannelSearch.js	1.11 kB
./dist/components/ChannelSearch/hooks/useChannelSearch.js	2.26 kB
./dist/components/ChannelSearch/icons.js	701 B
./dist/components/ChannelSearch/index.js	85 B
./dist/components/ChannelSearch/SearchBar.js	1.33 kB
./dist/components/ChannelSearch/SearchInput.js	335 B
./dist/components/ChannelSearch/SearchResults.js	1.59 kB
./dist/components/ChannelSearch/utils.js	89 B
./dist/components/Chat/Chat.js	933 B
./dist/components/Chat/hooks/useChannelsQueryState.js	212 B
./dist/components/Chat/hooks/useChat.js	1.46 kB
./dist/components/Chat/hooks/useCreateChatClient.js	490 B
./dist/components/Chat/hooks/useCreateChatContext.js	671 B
./dist/components/Chat/hooks/useCustomStyles.js	649 B
./dist/components/Chat/index.js	84 B
./dist/components/ChatAutoComplete/ChatAutoComplete.js	1.25 kB
./dist/components/ChatAutoComplete/index.js	56 B
./dist/components/ChatDown/ChatDown.js	530 B
./dist/components/ChatDown/icons.js	1.26 kB
./dist/components/ChatDown/index.js	48 B
./dist/components/CommandItem/CommandItem.js	265 B
./dist/components/CommandItem/index.js	51 B
./dist/components/DateSeparator/DateSeparator.js	514 B
./dist/components/DateSeparator/index.js	53 B
./dist/components/Emojis/EmojiPicker.js	1.32 kB
./dist/components/Emojis/index.cjs.js	1.9 kB
./dist/components/Emojis/index.js	51 B
./dist/components/EmoticonItem/EmoticonItem.js	417 B
./dist/components/EmoticonItem/index.js	52 B
./dist/components/EmptyStateIndicator/EmptyStateIndicator.js	458 B
./dist/components/EmptyStateIndicator/icons.js	323 B
./dist/components/EmptyStateIndicator/index.js	59 B
./dist/components/EventComponent/EventComponent.js	831 B
./dist/components/EventComponent/index.js	52 B
./dist/components/Gallery/BaseImage.js	478 B
./dist/components/Gallery/Gallery.js	1.13 kB
./dist/components/Gallery/Image.js	681 B
./dist/components/Gallery/index.js	70 B
./dist/components/Gallery/ModalGallery.js	627 B
./dist/components/index.js	307 B
./dist/components/InfiniteScrollPaginator/index.js	54 B
./dist/components/InfiniteScrollPaginator/InfiniteScroll.js	1.5 kB
./dist/components/Loading/index.js	76 B
./dist/components/Loading/LoadingChannels.js	285 B
./dist/components/Loading/LoadingErrorIndicator.js	366 B
./dist/components/Loading/LoadingIndicator.js	671 B
./dist/components/LoadMore/index.js	68 B
./dist/components/LoadMore/LoadMoreButton.js	570 B
./dist/components/LoadMore/LoadMorePaginator.js	484 B
./dist/components/Message/FixedHeightMessage.js	1.7 kB
./dist/components/Message/hooks/index.js	146 B
./dist/components/Message/hooks/useActionHandler.js	751 B
./dist/components/Message/hooks/useDeleteHandler.js	616 B
./dist/components/Message/hooks/useEditHandler.js	300 B
./dist/components/Message/hooks/useFlagHandler.js	753 B
./dist/components/Message/hooks/useMarkUnreadHandler.js	714 B
./dist/components/Message/hooks/useMentionsHandler.js	387 B
./dist/components/Message/hooks/useMuteHandler.js	941 B
./dist/components/Message/hooks/useOpenThreadHandler.js	266 B
./dist/components/Message/hooks/usePinHandler.js	930 B
./dist/components/Message/hooks/useReactionHandler.js	2.16 kB
./dist/components/Message/hooks/useReactionsFetcher.js	788 B
./dist/components/Message/hooks/useRetryHandler.js	343 B
./dist/components/Message/hooks/useUserHandler.js	223 B
./dist/components/Message/hooks/useUserRole.js	760 B
./dist/components/Message/icons.js	1.63 kB
./dist/components/Message/index.js	162 B
./dist/components/Message/Message.js	2.31 kB
./dist/components/Message/MessageDeleted.js	374 B
./dist/components/Message/MessageEditedTimestamp.js	488 B
./dist/components/Message/MessageErrorText.js	381 B
./dist/components/Message/MessageOptions.js	951 B
./dist/components/Message/MessageRepliesCountButton.js	523 B
./dist/components/Message/MessageSimple.js	2.57 kB
./dist/components/Message/MessageStatus.js	1.23 kB
./dist/components/Message/MessageText.js	999 B
./dist/components/Message/MessageTimestamp.js	352 B
./dist/components/Message/QuotedMessage.js	822 B
./dist/components/Message/renderText/componentRenderers/Anchor.js	327 B
./dist/components/Message/renderText/componentRenderers/Emoji.js	173 B
./dist/components/Message/renderText/componentRenderers/index.js	65 B
./dist/components/Message/renderText/componentRenderers/Mention.js	195 B
./dist/components/Message/renderText/index.js	132 B
./dist/components/Message/renderText/regex.js	374 B
./dist/components/Message/renderText/rehypePlugins/emojiMarkdownPlugin.js	252 B
./dist/components/Message/renderText/rehypePlugins/index.js	72 B
./dist/components/Message/renderText/rehypePlugins/mentionsMarkdownPlugin.js	1.04 kB
./dist/components/Message/renderText/remarkPlugins/htmlToTextPlugin.js	178 B
./dist/components/Message/renderText/remarkPlugins/index.js	75 B
./dist/components/Message/renderText/remarkPlugins/keepLineBreaksPlugin.js	531 B
./dist/components/Message/renderText/renderText.js	1.76 kB
./dist/components/Message/renderText/types.js	31 B
./dist/components/Message/Timestamp.js	506 B
./dist/components/Message/types.js	31 B
./dist/components/Message/utils.js	2.94 kB
./dist/components/MessageActions/CustomMessageActionsList.js	346 B
./dist/components/MessageActions/hooks/index.js	66 B
./dist/components/MessageActions/hooks/useMessageActionsBoxPopper.js	517 B
./dist/components/MessageActions/index.js	76 B
./dist/components/MessageActions/MessageActions.js	1.53 kB
./dist/components/MessageActions/MessageActionsBox.js	1.18 kB
./dist/components/MessageBounce/index.js	68 B
./dist/components/MessageBounce/MessageBounceModal.js	253 B
./dist/components/MessageBounce/MessageBouncePrompt.js	507 B
./dist/components/MessageInput/AttachmentPreviewList.js	1.25 kB
./dist/components/MessageInput/CooldownTimer.js	377 B
./dist/components/MessageInput/DefaultTriggerProvider.js	442 B
./dist/components/MessageInput/DropzoneProvider.js	548 B
./dist/components/MessageInput/EditMessageForm.js	1.05 kB
./dist/components/MessageInput/hooks/index.js	78 B
./dist/components/MessageInput/hooks/useAttachments.js	1.02 kB
./dist/components/MessageInput/hooks/useCommandTrigger.js	903 B
./dist/components/MessageInput/hooks/useCooldownTimer.js	818 B
./dist/components/MessageInput/hooks/useCreateMessageInputContext.js	1.42 kB
./dist/components/MessageInput/hooks/useEmojiTrigger.js	734 B
./dist/components/MessageInput/hooks/useFileState.js	169 B
./dist/components/MessageInput/hooks/useFileUploads.js	1.27 kB
./dist/components/MessageInput/hooks/useImageUploads.js	1.38 kB
./dist/components/MessageInput/hooks/useLinkPreviews.js	1.41 kB
./dist/components/MessageInput/hooks/useMessageInputState.js	2.74 kB
./dist/components/MessageInput/hooks/useMessageInputText.js	958 B
./dist/components/MessageInput/hooks/usePasteHandler.js	871 B
./dist/components/MessageInput/hooks/useSubmitHandler.js	2.54 kB
./dist/components/MessageInput/hooks/useUserTrigger.js	1.92 kB
./dist/components/MessageInput/hooks/utils.js	1.69 kB
./dist/components/MessageInput/icons.js	2.85 kB
./dist/components/MessageInput/index.js	181 B
./dist/components/MessageInput/LinkPreviewList.js	778 B
./dist/components/MessageInput/MessageInput.js	641 B
./dist/components/MessageInput/MessageInputFlat.js	2.4 kB
./dist/components/MessageInput/MessageInputSmall.js	1.72 kB
./dist/components/MessageInput/QuotedMessagePreview.js	927 B
./dist/components/MessageInput/types.js	387 B
./dist/components/MessageInput/UploadsPreview.js	871 B
./dist/components/MessageList/ConnectionStatus.js	457 B
./dist/components/MessageList/CustomNotification.js	300 B
./dist/components/MessageList/GiphyPreviewMessage.js	197 B
./dist/components/MessageList/hooks/index.js	183 B
./dist/components/MessageList/hooks/MessageList/index.js	126 B
./dist/components/MessageList/hooks/MessageList/useEnrichedMessages.js	687 B
./dist/components/MessageList/hooks/MessageList/useMessageListElements.js	645 B
./dist/components/MessageList/hooks/MessageList/useMessageListScrollManager.js	960 B
./dist/components/MessageList/hooks/MessageList/useScrollLocationLogic.js	895 B
./dist/components/MessageList/hooks/MessageList/useUnreadMessagesNotification.js	1.03 kB
./dist/components/MessageList/hooks/useLastReadData.js	266 B
./dist/components/MessageList/hooks/useMarkRead.js	1.25 kB
./dist/components/MessageList/hooks/VirtualizedMessageList/index.js	158 B
./dist/components/MessageList/hooks/VirtualizedMessageList/useGiphyPreview.js	423 B
./dist/components/MessageList/hooks/VirtualizedMessageList/useMessageSetKey.js	388 B
./dist/components/MessageList/hooks/VirtualizedMessageList/useNewMessageNotification.js	691 B
./dist/components/MessageList/hooks/VirtualizedMessageList/usePrependMessagesCount.js	1.32 kB
./dist/components/MessageList/hooks/VirtualizedMessageList/useScrollToBottomOnNewMessage.js	471 B
./dist/components/MessageList/hooks/VirtualizedMessageList/useShouldForceScrollToBottom.js	423 B
./dist/components/MessageList/hooks/VirtualizedMessageList/useUnreadMessagesNotificationVirtualized.js	665 B
./dist/components/MessageList/icons.js	622 B
./dist/components/MessageList/index.js	204 B
./dist/components/MessageList/MessageList.js	3.32 kB
./dist/components/MessageList/MessageListMainPanel.js	290 B
./dist/components/MessageList/MessageListNotifications.js	471 B
./dist/components/MessageList/MessageNotification.js	293 B
./dist/components/MessageList/renderMessages.js	1.16 kB
./dist/components/MessageList/ScrollToBottomButton.js	1.12 kB
./dist/components/MessageList/UnreadMessagesNotification.js	441 B
./dist/components/MessageList/UnreadMessagesSeparator.js	316 B
./dist/components/MessageList/utils.js	2.85 kB
./dist/components/MessageList/VirtualizedMessageList.js	4.41 kB
./dist/components/MessageList/VirtualizedMessageListComponents.js	2.14 kB
./dist/components/MML/index.js	43 B
./dist/components/MML/MML.js	535 B
./dist/components/Modal/icons.js	435 B
./dist/components/Modal/index.js	45 B
./dist/components/Modal/Modal.js	821 B
./dist/components/ReactFileUtilities/FileIcon/FileIcon.js	536 B
./dist/components/ReactFileUtilities/FileIcon/FileIconSet/v1.js	2.73 kB
./dist/components/ReactFileUtilities/FileIcon/FileIconSet/v2.js	5.46 kB
./dist/components/ReactFileUtilities/FileIcon/iconMap.js	800 B
./dist/components/ReactFileUtilities/FileIcon/index.js	53 B
./dist/components/ReactFileUtilities/FileIcon/mimeTypes.js	834 B
./dist/components/ReactFileUtilities/FilePreviewer.js	634 B
./dist/components/ReactFileUtilities/FileUploadButton.js	543 B
./dist/components/ReactFileUtilities/IconButton.js	320 B
./dist/components/ReactFileUtilities/icons/AttachmentIcon.js	397 B
./dist/components/ReactFileUtilities/icons/CloseIcon.js	560 B
./dist/components/ReactFileUtilities/icons/FilePlaceholderIcon.js	1.52 kB
./dist/components/ReactFileUtilities/icons/index.js	96 B
./dist/components/ReactFileUtilities/icons/PictureIcon.js	333 B
./dist/components/ReactFileUtilities/icons/RetryIcon.js	325 B
./dist/components/ReactFileUtilities/ImageDropzone.js	1.02 kB
./dist/components/ReactFileUtilities/ImagePreviewer.js	779 B
./dist/components/ReactFileUtilities/ImageUploadButton.js	472 B
./dist/components/ReactFileUtilities/index.js	177 B
./dist/components/ReactFileUtilities/LoadingIndicator.js	307 B
./dist/components/ReactFileUtilities/Thumbnail.js	468 B
./dist/components/ReactFileUtilities/ThumbnailPlaceholder.js	384 B
./dist/components/ReactFileUtilities/types.js	31 B
./dist/components/ReactFileUtilities/UploadButton.js	289 B
./dist/components/ReactFileUtilities/utils.js	1.21 kB
./dist/components/Reactions/hooks/useFetchReactions.js	600 B
./dist/components/Reactions/hooks/useProcessReactions.js	1.01 kB
./dist/components/Reactions/index.js	108 B
./dist/components/Reactions/reactionOptions.js	330 B
./dist/components/Reactions/ReactionSelector.js	1.81 kB
./dist/components/Reactions/ReactionsList.js	1.02 kB
./dist/components/Reactions/ReactionsListModal.js	1.23 kB
./dist/components/Reactions/SimpleReactionsList.js	1.05 kB
./dist/components/Reactions/SpriteImage.js	705 B
./dist/components/Reactions/StreamEmoji.js	385 B
./dist/components/Reactions/types.js	31 B
./dist/components/Reactions/utils/utils.js	300 B
./dist/components/SafeAnchor/index.js	74 B
./dist/components/SafeAnchor/SafeAnchor.js	347 B
./dist/components/Thread/icons.js	370 B
./dist/components/Thread/index.js	71 B
./dist/components/Thread/Thread.js	1.52 kB
./dist/components/Thread/ThreadHead.js	314 B
./dist/components/Thread/ThreadHeader.js	464 B
./dist/components/Thread/ThreadStart.js	283 B
./dist/components/Tooltip/hooks/index.js	61 B
./dist/components/Tooltip/hooks/useEnterLeaveHandlers.js	305 B
./dist/components/Tooltip/index.js	47 B
./dist/components/Tooltip/Tooltip.js	478 B
./dist/components/TypingIndicator/index.js	55 B
./dist/components/TypingIndicator/TypingIndicator.js	1.22 kB
./dist/components/UserItem/index.js	48 B
./dist/components/UserItem/UserItem.js	628 B
./dist/components/Window/index.js	46 B
./dist/components/Window/Window.js	372 B
./dist/constants/limits.js	126 B
./dist/constants/messageTypes.js	99 B
./dist/context/ChannelActionContext.js	588 B
./dist/context/ChannelListContext.js	377 B
./dist/context/ChannelStateContext.js	586 B
./dist/context/ChatContext.js	573 B
./dist/context/ComponentContext.js	579 B
./dist/context/index.js	131 B
./dist/context/MessageBounceContext.js	630 B
./dist/context/MessageContext.js	580 B
./dist/context/MessageInputContext.js	350 B
./dist/context/MessageListContext.js	377 B
./dist/context/TranslationContext.js	783 B
./dist/context/TypingContext.js	581 B
./dist/context/utils/getDisplayName.js	102 B
./dist/css/index.css	26.7 kB
./dist/css/v2/emoji-mart.css	1.84 kB
./dist/css/v2/emoji-replacement.css	299 B
./dist/css/v2/index.css	20.7 kB
./dist/css/v2/index.layout.css	8.88 kB
./dist/i18n/de.json	2.46 kB
./dist/i18n/en.json	1.55 kB
./dist/i18n/es.json	2.47 kB
./dist/i18n/fr.json	2.52 kB
./dist/i18n/hi.json	2.83 kB
./dist/i18n/index.js	67 B
./dist/i18n/it.json	2.49 kB
./dist/i18n/ja.json	2.7 kB
./dist/i18n/ko.json	2.61 kB
./dist/i18n/nl.json	2.38 kB
./dist/i18n/pt.json	2.49 kB
./dist/i18n/ru.json	3 kB
./dist/i18n/Streami18n.js	5.76 kB
./dist/i18n/tr.json	2.46 kB
./dist/i18n/translations.js	172 B
./dist/i18n/utils.js	528 B
./dist/index_UMD.js	175 B
./dist/index.cjs.js	25.5 kB
./dist/index.js	78 B
./dist/types/index.js	31 B
./dist/types/types.js	31 B
./dist/utils/browsers.js	156 B
./dist/utils/deprecationWarning.js	317 B
./dist/utils/generateRandomId.js	130 B
./dist/utils/getChannel.js	968 B
./dist/utils/getWholeChar.js	411 B
./dist/utils/index.js	79 B
./dist/version.js	60 B
./dist/Window-44a85f63.js	347 kB

_{compressed-size-action}

[arnautov-anton]

I like this, it's SUPER nicely written, kudos!

[oliverlaz]

I didn't update all components to arrow functions but I think you get the point :)

The article looks very good. I think once the "styleguide" is resolved we can merge it.

[stream-ci-bot]

🎉 This PR is included in version 11.13.0 🎉

The release is available on:

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

Your semantic-release bot 📦🚀