Merged
Conversation
MartinCupela
requested review from
arnautov-anton and
oliverlaz
as code owners
|
Size Change: 0 B Total Size: 317 kB ℹ️ View Unchanged
|
# Conflicts: # examples/vite/src/stream-imports-layout.scss # examples/vite/src/stream-imports-theme.scss # package.json # src/components/Attachment/Card.tsx # src/components/Attachment/VoiceRecording.tsx # src/components/AudioPlayback/styling/DurationDisplay.scss # src/components/AudioPlayback/styling/WaveProgressBar.scss # src/components/Dialog/base/index.ts # src/components/Dialog/styling/ContextMenu.scss # src/components/Dialog/styling/Dialog.scss # src/components/Dialog/styling/index.scss # src/components/Icons/IconMicrophone.tsx # src/components/Icons/index.ts # src/components/Icons/styling/IconExclamationCircle.scss # src/components/Icons/styling/IconExclamationTriangle.scss # src/components/Icons/styling/index.scss # src/components/MediaRecorder/AudioRecorder/AudioRecorder.tsx # src/components/MediaRecorder/AudioRecorder/AudioRecordingButtonWithNotification.tsx # src/components/MediaRecorder/AudioRecorder/AudioRecordingButtons.tsx # src/components/MediaRecorder/RecordingPermissionDeniedNotification.tsx # src/components/MessageInput/AttachmentPreviewList/AudioAttachmentPreview.tsx # src/components/MessageInput/MessageComposerActions.tsx # src/components/MessageInput/MessageInputFlat.tsx # src/components/MessageInput/QuotedMessagePreview.tsx # src/components/MessageInput/SendButton.tsx # src/components/MessageInput/hooks/useCreateMessageInputContext.ts # src/components/MessageInput/styling/AttachmentPreview.scss # src/components/MessageInput/styling/AttachmentSelector.scss # src/components/MessageInput/styling/MessageComposer.scss # src/components/MessageInput/styling/QuotedMessagePreview.scss # src/components/MessageInput/styling/RemoveAttachmentPreviewButton.scss # src/context/ComponentContext.tsx # src/styling/_utils.scss # src/styling/base.scss # src/styling/index.scss # src/styling/variables.css # yarn.lock
github-actions bot
pushed a commit
that referenced
this pull request
Mar 23, 2026
## [14.0.0-beta.1](v13.13.1...v14.0.0-beta.1) (2026-03-23) ### ⚠ BREAKING CHANGES * All `str-chat__channel-preview*` CSS classes have been renamed to `str-chat__channel-list-item*` (e.g. `.str-chat__channel-preview-container` → `.str-chat__channel-list-item-container`); `.str-chat__message-input-cooldown` has been renamed to `.str-chat__message-composer-cooldown`; `.str-chat__message-simple-name` has been renamed to `.str-chat__message-metadata__name`; `.str-chat__simple-message--error-failed` has been renamed to `.str-chat__message-inner--error`; `.str-chat__message-simple-timestamp` has been renamed to `.str-chat__message-metadata__timestamp`. Removed `.str-chat__message-simple` and `.str-chat__message-simple--me` root class names from `MessageUI` and `MessageBlocked` components. Component `MessageActionsWrapper` has been dropped. * replace MessageListNotifications with NotificationList * remove PauseIcon, PlayTriangleIcon, GeolocationIcon * replace openButtonProps with TriggerComponent in DropdownProps * remove dialogId from DropdownProps * the BaseImage component uses ImageFallback component instead of CSS masl to display fallback on error * replaced addNotification from ChannelStateContenxt with client.notifications API * NotificationList was moved with new parent now being MessageListMainPanel * rename MessageListNotificationsProps to NotificationListProps * `useAudioController` has been removed from the public API. Migrate custom audio playback code to `useAudioPlayer`. ### 🛠 Implementation details - delete `src/components/Attachment/hooks/useAudioController.ts` - remove the public export from `src/components/Attachment/index.ts` - decouple `WaveProgressBar` from the deleted hook file by giving it its own UI-level seek callback type - keep the current audio playback components compatible with `audioPlayer.seek` - validated with `yarn types` ### 🎨 UI Changes None. * ChannelSearch component set has been dropped, use Search instead. * useChannelPreviewInfo now always returns a defined `groupChannelDisplayInfo` (object with `members` and `overflowCount`). For 1:1 or ≤2 members it returns `{ members: [], overflowCount: undefined }`. Code that treated `groupChannelDisplayInfo == null` as “not a group” should use e.g. `groupChannelDisplayInfo.members.length >= 2` instead. * close modals from within modal contents using ModalContextValue.close * removed Modal component and kept only GlobalModal component * removed div with class str-chat_modal-inner * remove support for "live" label * remove support for displaying channel.data.subtitle under the title * replace str-chat__channel-header-end with str-chat__channel-header__data * remove MessageIsThreadReplyInChannelButtonIndicator from ComponentContext * replace MessageIsThreadReplyInChannelButtonIndicator with MessageAlsoSentInChannelIndicator * remove CSS variables for --str-chat__jump-to-latest-message-* * rename MessageNotification to NewMessageNotification * rename ScrollToBottomButton to ScrollToLatestMessageButton * introduce ScrollToLatestMessageButton by default into message list * change the markup of ScrollToLatestMessageButton * change the markup of UnreadMessagesSeparator * `MessageReactionsDetail`'s (formerly `ReactionsListModal`) composition (markup) has changed, class names have been renamed or removed (see table bellow). It no longer renders in a modal but rather in a dialog - this change required a container-agnostic rename. | Change Type | Old Class Name | New Class Name | | -------------------- | ------------------------------------------------------------- | * replaced isOnlyEmojis util function with messageTextHasEmojisOnly * replaced component MessageDeleted with MessageDeletedBubble. * in Message, the MessageDeleted does not have default component. Instead, message deleted is now rendered within message bubble using MessageDeletedBubble. Thus the default deleted message UI now shows message annotations, metadata and replies button. * remove FixedHeightMessage component * change props for VirtualMessage in ComponentContext from FixedHeightMessageProps to MessageUIComponentProps * Remove legacy high-order context wrappers (`with*Context`) from `stream-chat-react` since the docs and internal usage are hook-based (`use*Context`). ### 🛠 Implementation details - Removed the following exported HOCs from context modules: - `withChannelActionContext` - `withChannelStateContext` - `withChatContext` - `withComponentContext` - `withMessageContext` - `withTranslationContext` - `withTypingContext` - Kept provider/hook APIs intact (`*Provider` and `use*Context`). - Removed now-unused imports/types tied to HOC implementations (including `UnknownType` usages in these files). - Deleted now-unused helper `src/context/utils/getDisplayName.ts`. ### 🎨 UI Changes N/A (no UI changes). * change the signature of MessageContextValue['handleDelete'] * remove props endOfGroup, firstOfGroup and groupedByUser from MessageProps as their purpose is unknown and message grouping should be done by Message prop groupStyles * order of actions in MessageActions has changed * removed CSS variables --str-chat__message-bounce-* * remove RemindMeActionButton and RemindMeActionButtonProps * remove QuotedPoll component and isQuoted prop from Poll * str-chat__message-composer-container now wraps the message composer * date separator does not contain separation lines * 1 or more images and giphy attachment are now rendered with ModalGallery component * ModalGallery component is now user to render the image preview in message bubble and Gallery in full-screen mode if clicked on the attachment in the bubble * Assets rendered in Gallery have to be of a new type GalleryItem * Overriding ModalGallery in ComponentContext means overriding the attachment preview as well as the Gallery on Modal view * Overriding Gallery in ComponentContext means overriding a component that renders media assets in slideshow and provides the slideshow navigation API * `GroupAvatar` component now renders a singular `Avatar` component without any wrappers if the `groupChannelDisplayInfo` contains only a single entry. Some class names have been removed, see the table bellow: | Change Type | Old Class Name | New Class Name | | ----------- | ------------------------------------ | -------------- | | Removed | `str-chat__avatar--single` | - | | Removed | `str-chat__avatar-group--three-part` | - | * Certain element classes have been renamed, some have been removed, see the table of the actual changes bellow: | Change Type | Old Class Name | New Class Name | | ----------- | --------------------------------------- | --------------------------------------------------- | | Changed | `str-chat__reaction-list` | `str-chat__message-reactions` | | Removed | `str-chat__message-reactions-container` | - | | Removed | `str-chat__reaction-list--reverse` | - | | Changed | `str-chat__message-reactions` | `str-chat__message-reactions__list` | | Changed | `str-chat__message-reaction` | `str-chat__message-reactions__list-item` | | Removed | `str-chat__message-reaction-own` | - | | Changed | `str-chat__message-reaction-emoji` | `str-chat__message-reactions__item-icon` | | Changed | `str-chat__message-reaction-count` | `str-chat__message-reactions__item-count` | | Changed | `str-chat__reaction-list--counter` | `str-chat__message-reactions__total-count` | * replace specific components in MessageActions with general purpose ContextMenu components * MessageOptions, CustomMessageActions, CustomMessageActionsList, MessageActionsBox are no longer available, use MessageActions functionality instead. * suggestion list and suggestion list items were re-implemented with new ContextMenu API. * the suggestion list and suggestion list items have changed the markup * `Avatar` component no longer takes `user` prop, prop `image` has been renamed to `imageUrl` and prop `name` has been renamed to `userName`. * Props `Avatar`, `detailedView`, `latest_reactions`, `reaction_counts`, `reaction_groups`, `reactionOptions` & `reverse` have been removed from `ReactionSelector` component. The reason is that some of them were deprecated and some of them weren't being used in a way the component was set up by default. The component's class names have also changed, see table. | Change Type | Old Class Name | New Class Name | | ----------- | * `Channel` component no longer supports component overrides, use `WithComponents` instead. ### chore * remove with*Context HOC wrappers ([#2962](#2962)) ([e0cd4f2](e0cd4f2)) ### Bug Fixes * add integration guide md file to help AI assistant's work ([8441f5b](8441f5b)) * add integration guide md file to help AI assistant's work ([#2911](#2911)) ([2efd30e](2efd30e)) * add temporarily CSS v2 palette-variables ([#3040](#3040)) ([48d4647](48d4647)) * adjust ChatView.Selector buttons styles ([#2990](#2990)) ([7907f51](7907f51)) * **ai:** stop typewriter animation on `ai_indicator.stop` ([#2918](#2918)) ([7777721](7777721)) * align chat view sidebars and attachment preview remove icon ([#3004](#3004)) ([08dc4b6](08dc4b6)) * align message list width constraints ([#2965](#2965)) ([02c9b8d](02c9b8d)) * allow forwarding `unsafeHTML` to system messages (`EventComponent`) ([#2973](#2973)) ([99c3960](99c3960)) * change class names to reflect component renames ([#3035](#3035)) ([7c978a9](7c978a9)) * component renames ([#3030](#3030)) ([a563248](a563248)) * **demo:** remove archived filter param ([46da3f8](46da3f8)) * **demo:** remove pinned_at sort param ([0bc9ed6](0bc9ed6)) * don't expose giphy arg in quoted message preview and channel preview ([21b905c](21b905c)) * exit search on blur [REACT-855] ([#3013](#3013)) ([97f485d](97f485d)) * focus outline visual glitch for input ([212e449](212e449)) * giphy and command ui fixes ([#3025](#3025)) ([aa36a4d](aa36a4d)) * hide buttons in message input if a command is selected ([22d32d4](22d32d4)) * improve md file to guide AI assistants used by our integrators ([7339614](7339614)) * improve md file to guide AI assistants used by our integrators ([#2912](#2912)) ([c249ef7](c249ef7)) * isDayjs import usage for ESM ([#2924](#2924)) ([73f8767](73f8767)) * make poll forms submitable ([#2989](#2989)) ([7dc82ca](7dc82ca)) * make the full option list container take the available height ([da77bf3](da77bf3)) * make vite example channel selection bookmarkable ([#2997](#2997)) ([1fbbfd1](1fbbfd1)) * move show all options button to PollOptionList component ([e75ca3a](e75ca3a)) * only categorize giphy type as giphy attachment ([f032187](f032187)) * poll UI fixes ([#3034](#3034)) ([885b7a6](885b7a6)) * prevent increasing unread count by useMarkRead hook if read-events are disabled ([#2925](#2925)) ([d0e7b5f](d0e7b5f)) * prevent mobile sidebar overlays from shifting chat content ([#2995](#2995)) ([35f4282](35f4282)) * recert interactive flag, make Giphy use BaseImage ([59163cc](59163cc)) * remove Channel component propagation ([#2904](#2904)) ([cd6001f](cd6001f)) * remove customMessageData from handleSubmit type declaration ([#2950](#2950)) ([fc547be](fc547be)) * remove MessageEditedTimestamp component ([7cbe67e](7cbe67e)) * remove the tooltip from PollVote ([ca11f90](ca11f90)) * remove unnecessary CSS ([3fc6f3f](3fc6f3f)) * rename ChannelListMessenger to ChannelListUI ([#3036](#3036)) ([d251338](d251338)) * revert changes to EndPollAlert ([c364b0b](c364b0b)) * show ToggleSidebarButton in threads view's ThreadHeader ([#3020](#3020)) ([53d5639](53d5639)) * single checkmark color in dark mode ([283fad8](283fad8)) * single checkmark color in dark mode ([#3032](#3032)) ([b3858c8](b3858c8)) * sort command menus consistently ([#2967](#2967)) ([64fd76b](64fd76b)) * stabilize all test suites after v14 breaking changes ([#3039](#3039)) ([91c1602](91c1602)) * suggesting a poll option shouldn't vote for it ([e0659f3](e0659f3)) * turn off interactions for giphy ([d403eee](d403eee)) * unified SummarizedMessagePreview, cover more cases ([#2977](#2977)) ([1589481](1589481)) * unify poll modal: title casing for EN; placeholders; button placement ([33fed1e](33fed1e)) * update ChatView selector icons ([#2985](#2985)) ([ea814c3](ea814c3)) * voice recorder button not shown when quoting a message ([3a5dcdd](3a5dcdd)) * voice recorder button not shown when quoting a message ([#3015](#3015)) ([dbd6648](dbd6648)) * wrap attachment previews in message composer ([#2994](#2994)) ([a401978](a401978)) ### Features * add AvatarStack component + message replies button redesign ([#2938](#2938)) ([f7ad774](f7ad774)), closes [#2937](#2937) * add Button component and styles ([#2914](#2914)) ([f4675c6](f4675c6)) * add CSS variables ([#2913](#2913)) ([4bc9ac4](4bc9ac4)) * add dark theme support to stream-chat-react ([#3002](#3002)) ([fbe28d0](fbe28d0)) * add EventComponent (system message) redesign ([#3007](#3007)) ([c17fc99](c17fc99)) * add message translation indicator ([#2958](#2958)) ([5c3a996](5c3a996)) * add MessageEditedIndicator component ([cfbe346](cfbe346)) * add MessageEditedIndicator component ([#3019](#3019)) ([7e9637a](7e9637a)) * add new giphy and audio attachment widget designs and attachment grouping redesign ([#2934](#2934)) ([e990c06](e990c06)) * add ReactionSelector styling + cleanup ([#2916](#2916)) ([24a1169](24a1169)) * add sidebar display control ([#2978](#2978)) ([b77d995](b77d995)) * add smooth scrolling to MessageList ([#3027](#3027)) ([cdf35d2](cdf35d2)) * adjust media gallery viewer ([#3006](#3006)) ([6ea7a78](6ea7a78)) * adjust vertical and horizontal message spacing ([#2954](#2954)) ([ba65752](ba65752)) * align iconOnly API and unread badge styling ([#2982](#2982)) ([c28b8ff](c28b8ff)) * align web sidebar nav icons with mobile tab bar ([#2979](#2979)) ([370caea](370caea)) * channel preview redesign ([#2974](#2974)) ([5ef9027](5ef9027)) * convert ChatView into a general purpose sidebar ([#2939](#2939)) ([cd7a030](cd7a030)) * extended reaction selector ([#2972](#2972)) ([80c14e5](80c14e5)) * implement pinned message redesign ([#2952](#2952)) ([3af135f](3af135f)) * import all the icons that belong to Stream design system ([#2949](#2949)) ([55c9a1a](55c9a1a)) * introduce button variant props ([#2969](#2969)) ([2a4eabd](2a4eabd)) * introduce channelActionSet ([#3026](#3026)) ([199797e](199797e)) * introduce Search component redesign ([#2981](#2981)) ([c0b6230](c0b6230)) * introduce thread preview redesign ([#2975](#2975)) ([90fdfe5](90fdfe5)) * message reactions (`ReactionsList`) redesign ([#2933](#2933)) ([ce087fa](ce087fa)) * message reactions detail redesign ([#2963](#2963)) ([a941ed2](a941ed2)) * migrate MessageActions to use ContextMenu ([#2932](#2932)) ([1d28279](1d28279)) * new Avatar component design & adjustments ([#2926](#2926)) ([2eb04ee](2eb04ee)) * new GroupAvatar component design & adjustments ([#2930](#2930)) ([e307882](e307882)) * poll actions modals adjustments ([#2993](#2993)) ([cc44c3f](cc44c3f)) * promote experimental `MessageActions` to stable ([#2908](#2908)) ([1467b5c](1467b5c)) * promote Search to stable, drop ChannelSearch [REACT-894] ([#3014](#3014)) ([9a7b7a2](9a7b7a2)) * redesign ChannelHeader ([#2970](#2970)) ([57f8a91](57f8a91)) * redesign ChannelList loading skeletons ([#2988](#2988)) ([e5b3b8e](e5b3b8e)) * redesign deleted message ([#2964](#2964)) ([446de99](446de99)) * redesign EmptyStateIndicator for channel message list ([#2960](#2960)) ([e745d69](e745d69)) * redesign file drag-and-drop overlay ([#2959](#2959)) ([d2a72b5](d2a72b5)) * redesign floating indicators in message lists ([#2966](#2966)) ([12d075b](12d075b)) * redesign image loading and error placeholders ([#3000](#3000)) ([3539020](3539020)) * redesign image placeholder ([#3024](#3024)) ([d34a0b8](d34a0b8)) * redesign location sharing components & port the missing component CSS ([#3031](#3031)) ([b72deda](b72deda)) * redesign message annotations ([#2956](#2956)) ([5702090](5702090)) * redesign message composer commands, mentions and emoji suggestion lists ([#2931](#2931)) ([f151abc](f151abc)) * redesign message composer for thread and allow to grow to 10 lines ([#2983](#2983)) ([6b0310a](6b0310a)) * redesign message list elements spacing ([#2937](#2937)) ([1bf815f](1bf815f)) * redesign MessageActions ([#2951](#2951)) ([256d862](256d862)) * redesign notification system ([#3018](#3018)) ([83dec93](83dec93)) * redesign poll actions modals ([#2986](#2986)) ([861d7de](861d7de)) * redesign poll in message and poll creation dialog ([#2944](#2944)) ([c8adac4](c8adac4)) * redesign SendToChannelCheckbox ([#2971](#2971)) ([1695a85](1695a85)) * redesign the LoadingChannel component ([#2991](#2991)) ([790df17](790df17)) * redesign ThreadHeader and ThreadHead ([#2987](#2987)) ([059ae6a](059ae6a)) * redesign typing indicator ([#3005](#3005)) ([d6c08ca](d6c08ca)) * refresh Message design ([#2927](#2927)) ([40525f3](40525f3)) * refresh MessageComposer design ([#2919](#2919)) ([87e89f7](87e89f7)) * remove MessageListNotifications component ([#3028](#3028)) ([e06ec62](e06ec62)) * render voice recording preview in a dedicated slot ([#2957](#2957)) ([2859c76](2859c76)) * replace MessageIsThreadReplyInChannelButtonIndicator with MessageAlsoSentInChannelIndicator ([#2968](#2968)) ([b198029](b198029)) * replace react-image-gallery with proprietary Gallery component ([#2936](#2936)) ([a52de09](a52de09)) * return modal's close button ([#2948](#2948)) ([62a27e8](62a27e8)) * return ProgressBar to Audio attachment component ([#3022](#3022)) ([d3d1e19](d3d1e19)) * reuse channel list loading skeletons for thread list ([#2992](#2992)) ([3d7a3a3](3d7a3a3)) * show only time in MessageTimestamp ([#3021](#3021)) ([da4aa92](da4aa92)) * unify channel and thread display titles ([#2998](#2998)) ([29bb396](29bb396)) * unify dialog UI system ([#2955](#2955)) ([44e2eaf](44e2eaf)) * update empty states across chat views ([#2976](#2976)) ([7eacfb7](7eacfb7)) * use server-defined default limits for channel and channel lists ([#2943](#2943)) ([6302c96](6302c96)), closes [#2940](#2940) * **vite-example:** add custom message UI showcase ([#3029](#3029)) ([629e49f](629e49f)) * **vite-example:** add resizable chat panels ([#3009](#3009)) ([0e34114](0e34114)) ### Refactors * move BaseImage out of gallery ([dfe9d77](dfe9d77)) * remove deprecated useAudioController hook ([#3016](#3016)) ([35f8a5d](35f8a5d)) * remove initialNavOpenResponsive for redundancy ([#3023](#3023)) ([1227617](1227617))
|
🎉 This PR is included in version 14.0.0-beta.1 🎉 The release is available on: Your semantic-release bot 📦🚀 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
🎯 Goal
Add styling for messages and missing improvements for message composer.