Merge branch 'master' into feat/button-variant-props

# Conflicts:
#	src/components/Badge/Badge.tsx
#	src/components/MessageList/ScrollToLatestMessageButton.tsx
#	src/components/MessageList/UnreadMessagesNotification.tsx
#	src/components/MessageList/UnreadMessagesSeparator.tsx
#	src/components/MessageList/VirtualizedMessageList.tsx
#	src/components/MessageList/styling/ScrollToLatestMessageButton.scss

Author: MartinCupela

src/components/Badge/Badge.tsx

@@ -20,7 +20,7 @@ export const Badge = ({
   children,
   className,
   size = 'md',
-  variant = 'primary',
+  variant = 'default',
   ...spanProps
 }: BadgeProps) => (
   <span

src/components/Button/styling/Button.scss

@@ -111,6 +111,10 @@
       box-shadow: var(--light-elevation-2);
     }
 
+    &::after {
+      border-radius: inherit;
+    }
+
     &.str-chat__button--size-lg {
       padding-block: var(--button-padding-y-lg);
       padding-inline: var(--button-padding-x-with-label-lg);

src/components/MessageInput/AttachmentSelector/CommandsMenu.tsx

@@ -59,9 +59,11 @@ export const CommandsMenu = () => {
   const channelConfig = messageComposer.channel.getConfig();
   const commands = useMemo<(CommandResponse & { name: string })[]>(
     () =>
-      (channelConfig?.commands ?? []).filter(
-        (command): command is CommandResponse & { name: string } => !!command.name,
-      ),
+      (channelConfig?.commands ?? [])
+        .filter(
+          (command): command is CommandResponse & { name: string } => !!command.name,
+        )
+        .sort((a, b) => (a.name ?? '').localeCompare(b.name ?? '')),
     [channelConfig],
   );
 

src/components/MessageList/MessageList.tsx

@@ -299,6 +299,16 @@ const MessageListWithContext = (props: MessageListWithContextProps) => {
                 threadList={threadList}
               />
             </div>
+            <NewMessageNotification
+              newMessageCount={channelUnreadUiState?.unread_messages}
+              showNotification={hasNewMessages || hasMoreNewer}
+            />
+            <ScrollToLatestMessageButton
+              isMessageListScrolledToBottom={isMessageListScrolledToBottom}
+              isNotAtLatestMessageSet={hasMoreNewer}
+              onClick={scrollToBottomFromNotification}
+              threadList={threadList}
+            />
           </DialogManagerProvider>
         </MessageListMainPanel>
         <MessageListNotifications notifications={notifications} />

src/components/MessageList/styling/MessageList.scss

@@ -10,6 +10,13 @@
   align-items: center;
 }
 
+.str-chat__message-list-main-panel {
+  --str-chat__message-list-scroll-max-width: calc(
+    var(--str-chat__message-composer-max-width) +
+      var(--str-chat__message-composer-padding)
+  );
+}
+
 .str-chat__message-list {
   @include utils.scrollable;
   display: flex;
@@ -24,10 +31,7 @@
   .str-chat__message-list-scroll {
     @include utils.message-list-spacing;
     /* Max container 800px, 16px padding → 768px readable content; matches composer width + padding */
-    max-width: calc(
-      var(--str-chat__message-composer-max-width) +
-        var(--str-chat__message-composer-padding)
-    );
+    max-width: var(--str-chat__message-list-scroll-max-width);
     .str-chat__ul {
       list-style: none;
       padding: 0;

src/components/MessageList/styling/ScrollToLatestMessageButton.scss

@@ -3,7 +3,10 @@
   width: 40px;
   position: absolute;
   inset-block-end: var(--spacing-md);
-  inset-inline-end: var(--spacing-md);
+  inset-inline-end: max(
+    var(--spacing-md),
+    calc((100% - var(--str-chat__message-list-scroll-max-width)) / 2 + var(--spacing-md))
+  );
   z-index: 2;
   border-radius: var(--radius-max);
   background-color: var(--background-elevation-elevation-1);

src/components/MessageList/styling/VirtualizedMessageList.scss

@@ -5,6 +5,10 @@
 // Layout
 .str-chat__virtual-list {
   @include utils.scrollable;
+  --str-chat__message-list-scroll-max-width: calc(
+    var(--str-chat__message-composer-max-width) +
+      var(--str-chat__message-composer-padding)
+  );
   position: relative;
   flex: 1;
   -webkit-overflow-scrolling: touch; /* enable smooth scrolling on ios */

src/components/TextareaComposer/SuggestionList/SuggestionList.tsx

@@ -118,7 +118,15 @@ export const SuggestionList = ({
 
   const contextMenuItems = useMemo<ContextMenuItemComponent[]>(() => {
     if (!component) return [];
-    return (items ?? []).map((item, i) => {
+    const sortedItems =
+      suggestions?.searchSource.type === 'commands'
+        ? [...(items ?? [])].sort((a, b) =>
+            String((a as { name?: string }).name ?? '').localeCompare(
+              String((b as { name?: string }).name ?? ''),
+            ),
+          )
+        : (items ?? []);
+    return sortedItems.map((item, i) => {
       const Item: ContextMenuItemComponent = ({
         closeMenu: _, // eslint-disable-line @typescript-eslint/no-unused-vars
         openSubmenu: __, //eslint-disable-line @typescript-eslint/no-unused-vars
@@ -141,6 +149,7 @@ export const SuggestionList = ({
     focusedItemIndex,
     setFocusedItemIndex,
     AutocompleteSuggestionItem,
+    suggestions?.searchSource.type,
   ]);
 
   const ItemsWrapper = useCallback(