feat: redesign of the Message Input component

[khushal87]

📝 Changelog — Message Composer & Input Refactor

✨ Design & UX Improvements

• Introduced a new unified icon set across the Message Composer.
• Added smoother and more contextual animations throughout the component.
• Message Composer now internally handles bottom spacing, removing the need for extra padding in the sample app’s ChannelScreen.
• Added a new Edit button with a tick icon for clearer editing actions.
• Reply UI received theming updates due to internal component refactor.

---

⬇️ Scroll to Bottom Enhancements

• Refactored Scroll to Bottom button with:
  • Dedicated wrapper
  • Configurable chevronColor
  • Touchable support
• Button visibility logic improved:
  • Now appears when scroll distance exceeds the composer height
  • Replaces the previous hardcoded 150px threshold

---

🧱 Architectural & State Improvements

• Message Composer height is now stored in a detached internal state.
• Introduced messageInputFloating config prop at the Channel level.
• Introduced OutputButtons as a new dedicated component to manage:
  • Send
  • Cooldown
  • Edit
  • Audio recording buttons

---

🎨 Theme Updates

MessageList

New theme properties:

• scrollToBottomButtonContainer
• stickyHeaderContainer
• unreadMessagesNotificationContainer

---

Removed / Deprecated Themes

• audioRecordingButton theme is no longer relevant.
• SendButton theme props removed:
  • sendUpIcon
  • sendRightIcon
  • searchIcon
• CooldownTimer.container theme removed.
• InputButtons
  • MoreOptionsButton
  • CommandsButton are no longer used.

---

📎 Attachment & Preview Changes

ImageAttachmentUploadPreview

• itemContainer theme removed.
• New unified container theme introduced.

AttachmentUploadListPreview

• Removed:
  • imagesFlatList
  • filesFlatList
  • wrapper
• Now uses:
  • Single unified flatList
  • itemSeparator as the only theme prop.

FileAttachmentUploadPreview

• wrapper theme removed.
• flatListWidth prop removed.
• Title rendering logic simplified and made more consistent.

---

⌨️ AutoComplete & Cooldown Updates

• AutoCompleteInput
  • coolDownActive → cooldownRemainingSeconds
• CooldownTimer
  • container theme removed.

---

✂️ Removed Components

The following components are no longer part of the Message Input flow:

• InputEditingStateHeader
• InputReplyStateHeader
• CommandButton
• MoreOptionsButton

---

🧩 MessageInput — Breaking Changes

❌ Removed Props

• InputEditingStateHeader
• InputReplyStateHeader
• StopMessageStreamingButton
• SendButton
• CooldownTimer
• channel

➕ Added Props

• isKeyboardVisible
• hasAttachments

---

🎨 MessageInput Theme Changes

Removed Theme Keys

• editingBoxContainer
• editingBoxHeader
• editingBoxHeaderTitle
• editingStateHeader.editingBoxHeader
• editingStateHeader.editingBoxHeaderTitle
• imageUploadPreview.flatList
• moreOptionsButton
• autoCompleteInputContainer
• optionsContainer
• composerContainer
• inputBox

Added Theme Keys

• wrapper
• contentContainer
• inputBoxWrapper
• inputButtonsContainer
• inputContainer
• inputFloatingContainer
• floatingWrapper
• editButton
• cooldownButtonContainer
• outputButtonsContainer

---

⚠️ Migration Notes

• Custom themes targeting removed keys will need updates.
• Remove manual bottom padding from ChannelScreen.
• Update AutoCompleteInput usage to cooldownRemainingSeconds.
• Consumers using removed MessageInput props must migrate to the new API.

---

[Stream-SDK-Bot]

SDK Size

title	develop	branch	diff	status
js_bundle_size	306 KB	325 KB	+20089 B	🔴