fix(Icons, RTL): update icon catalog, RTL layout fixes, dark mode & thread voice recording (#3090)

### 🎯 Goal

Sync remaining out-of-date icons with the refreshed Phosphor Line SVG
catalog, add automatic RTL mirroring for directional icons,
comprehensively fix RTL layout issues across the SDK, fix reaction count
dark mode support, and enable voice recording in threads.

### 🛠 Implementation details

**Icon catalog sync** (follows up on #3080):
- **`IconCrossSmall` → `IconXmarkSmall`**: updated path from
`xmark-small.svg`
- **`IconExclamationTriangle` → `IconExclamationTriangleFill`**:
upgraded from 16×16 to 20×20 filled variant
- **`IconEyeOpen` → `IconEyeFill`**: upgraded from 16×16 to 20×20 filled
variant
- **`IconGiphy`**: synced precision updates
- All renames include `// was:` comments; updated all consumer imports

**RTL icon mirroring**:
- Extended `createIcon`'s `defaultProps` type to accept `data-*`
attributes
- Flagged 12 directional icons with `{ 'data-rtl-mirror': '' }` via
`defaultProps`
- Added CSS rule: `[dir='rtl'] .str-chat__icon[data-rtl-mirror] {
transform: scaleX(-1) }`
- Mirrored icons: `IconArrowLeft`, `IconArrowUpRight`, `IconReply`,
`IconChevronLeft`, `IconChevronRight`, `IconSidebar`, `IconSearch`,
`IconMute`, `IconSend`, `IconVideo`, `IconVideoFill`, `IconAudio`

**RTL layout fixes** (comprehensive audit — physical → logical CSS
properties):
- **ContextMenu**: `text-align: left` → `start`
- **AttachmentPreview**: `right` → `inset-inline-end` (remove button),
`padding-right` → `padding-inline-end`, `left` → `inset-inline-start`
(video indicator, loading/error icons)
- **AudioPlayback**: `left` → `inset-inline-start` on progress
indicators (CSS + inline), gradient direction flips in RTL
- **AudioRecorder**: `padding-left` → `padding-inline-start`, removed
arbitrary `max-width` caps on waveform containers
- **Message**: `margin-left`/`margin-right` → logical on edited
indicator and reactions host, `text-align: right` → `end`
- **Reply connector**: physical `border-*`/`left`/`right` → logical
`border-inline-*`/`border-end-*`/`inset-inline-*` on `::after`
pseudo-element
- **AvatarStack**: `margin-left` → `margin-inline-start`
- **Avatar**: `left` → `inset-inline-start` (status badge)
- **GroupAvatar**: `left`/`right` → `inset-inline-start`/`end` (grid
positions + online badge)
- **ChatView**: `border-right` → `border-inline-end`, `left` →
`inset-inline-start` (tooltip)
- **ChannelListItem**: `right` → `inset-inline-end` (action buttons)
- **Gallery**: `left`/`right` → logical (nav buttons)
- **Giphy**: `left` → `inset-inline-start` (badge)
- **Modal**: `right` → `inset-inline-end` (close button)
- **Callout**: `right` → `inset-inline-end` (close button)
- **ScrollToLatestMessage**: `right` → `inset-inline-end` (unread badge)
- **MessageReactionsDetail**: `left` → `inset-inline-start`, physical
border-radius → logical
- **QuotedMessagePreview**: `left` → `inset-inline-start` (play
indicator)
- **TextInput**: `margin-right` → `margin-inline-end` (trailing slot)

**Dark mode fix**:
- **Reactions**: applied `color: var(--reaction-text)` to reaction
button mixin — the variable was defined for light/dark modes but never
used, causing invisible count text in dark mode

**Example app fixes**:
- Panel resize logic: detect `direction` at drag start and flip
`clientX` calculations for RTL
- Thread composer: enable `audioRecordingEnabled` via
`additionalMessageComposerProps`

**Tests**: updated 3 assertions (`left` → `inset-inline-start`) and
refreshed 4 snapshots.

### 🎨 UI Changes

- No visual changes in LTR light mode
- In RTL (`dir="rtl"`): icons auto-flip, all layout elements position
correctly, waveforms respect reading direction, avatar stacks/group
avatars mirror properly, context menus/modals/callouts align to correct
side
- In dark mode: reaction count text is now visible
- Voice recording now available in thread composer (example app)

Author: oliverlaz

examples/vite/src/AppSettings/ActionsMenu/NotificationPromptDialog.tsx

@@ -14,7 +14,7 @@ import {
   IconExclamationMark,
   IconClock,
   IconXmark,
-  IconExclamationTriangle,
+  IconExclamationTriangleFill,
   IconPlusSmall,
   NumericInput,
   Prompt,
@@ -53,7 +53,7 @@ const severityIcons: Partial<
   info: IconExclamationMark,
   loading: IconRefresh,
   success: IconCheckmark,
-  warning: IconExclamationTriangle,
+  warning: IconExclamationTriangleFill,
 };
 
 const directionIcons: Record<

examples/vite/src/ChatLayout/Panels.tsx

@@ -37,7 +37,10 @@ const ChannelThreadPanel = () => {
           'app-chat-thread-panel--open': isOpen,
         })}
       >
-        <Thread virtualized />
+        <Thread
+          additionalMessageComposerProps={{ audioRecordingEnabled: true }}
+          virtualized
+        />
       </WithDragAndDropUpload>
     </>
   );
@@ -155,7 +158,10 @@ export const ThreadsPanels = ({
           <ChatView.ThreadAdapter>
             <WithDragAndDropUpload className='str-chat__dropzone-root--thread'>
               <WithComponents overrides={{ TypingIndicator }}>
-                <Thread virtualized />
+                <Thread
+                  additionalMessageComposerProps={{ audioRecordingEnabled: true }}
+                  virtualized
+                />
               </WithComponents>
             </WithDragAndDropUpload>
           </ChatView.ThreadAdapter>

examples/vite/src/ChatLayout/Resize.tsx

@@ -259,11 +259,15 @@ export const SidebarResizeHandle = ({
         ? 'collapsed'
         : 'expanded';
 
+      const isRtl = getComputedStyle(appLayoutElement).direction === 'rtl';
+
       beginHorizontalResize({
         bodyClassName: 'app-chat-resizing-sidebar',
         handle: event.currentTarget,
         onMove: (pointerEvent) => {
-          const nextWidth = pointerEvent.clientX - layoutBounds.left;
+          const nextWidth = isRtl
+            ? layoutBounds.right - pointerEvent.clientX
+            : pointerEvent.clientX - layoutBounds.left;
           const maxWidth = layoutBounds.width - MESSAGE_VIEW_MIN_WIDTH;
           const shouldCollapse = nextWidth < LEFT_PANEL_MIN_WIDTH;
 
@@ -361,12 +365,15 @@ export const ThreadResizeHandle = ({ isOpen }: { isOpen: boolean }) => {
       const dragState = {
         width: threadPanelWidthRef.current,
       };
+      const isRtl = getComputedStyle(appLayoutElement).direction === 'rtl';
 
       beginHorizontalResize({
         bodyClassName: 'app-chat-resizing-thread',
         handle: event.currentTarget,
         onMove: (pointerEvent) => {
-          const nextWidth = containerBounds.right - pointerEvent.clientX;
+          const nextWidth = isRtl
+            ? pointerEvent.clientX - containerBounds.left
+            : containerBounds.right - pointerEvent.clientX;
           const maxWidth = containerBounds.width - MESSAGE_VIEW_MIN_WIDTH;
           const width = clamp(nextWidth, THREAD_PANEL_MIN_WIDTH, maxWidth);
 

src/components/Attachment/VisibilityDisclaimer.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
-import { IconEyeOpen } from '../Icons';
+import { IconEyeFill } from '../Icons';
 import { useTranslationContext } from '../../context';
 
 export const VisibilityDisclaimer = () => {
   const { t } = useTranslationContext();
   return (
     <div className='str-chat__visibility-disclaimer'>
-      <IconEyeOpen />
+      <IconEyeFill />
       {t('Only visible to you')}
     </div>
   );

src/components/Attachment/__tests__/WaveProgressBar.test.tsx

@@ -111,7 +111,9 @@ describe('WaveProgressBar', () => {
     render(<WaveProgressBar seek={vi.fn()} waveformData={originalSample} />);
     expect(screen.getAllByTestId(AMPLITUDE_BAR_TEST_ID)).toHaveLength(40);
     expect(screen.getByTestId(PROGRESS_INDICATOR_TEST_ID)).toBeInTheDocument();
-    expect(screen.getByTestId(PROGRESS_INDICATOR_TEST_ID)).toHaveStyle('left: 0px');
+    expect(screen.getByTestId(PROGRESS_INDICATOR_TEST_ID)).toHaveStyle(
+      'inset-inline-start: 0px',
+    );
   });
 
   it('is rendered with highlighted bars with non-zero progress', () => {

src/components/Attachment/styling/Giphy.scss

@@ -36,7 +36,7 @@
   align-items: center;
   gap: var(--spacing-xxs, 4px);
   position: absolute;
-  left: 8px;
+  inset-inline-start: 8px;
   bottom: 8px;
 
   border-radius: var(--radius-lg, 12px);

src/components/AudioPlayback/components/ProgressBar.tsx

@@ -44,7 +44,7 @@ export const ProgressBar = ({ className, progress, seek }: ProgressBarProps) =>
       <div
         className='str-chat__message-attachment-audio-widget--progress-indicator'
         ref={setProgressIndicator}
-        style={{ left: `${indicatorLeft}px` }}
+        style={{ insetInlineStart: `${indicatorLeft}px` }}
       />
     </div>
   );

src/components/AudioPlayback/components/WaveProgressBar.tsx

@@ -156,7 +156,7 @@ export const WaveProgressBar = ({
         data-testid='wave-progress-bar-progress-indicator'
         ref={setProgressIndicator}
         style={{
-          left: `${indicatorLeft}px`,
+          insetInlineStart: `${indicatorLeft}px`,
         }}
       />
     </div>

src/components/AudioPlayback/styling/ProgressBar.scss

@@ -6,12 +6,16 @@
     min-width: 0;
     cursor: pointer;
     background: linear-gradient(
-      to right,
+      to var(--str-chat__progress-direction, right),
       var(--str-chat__primary-color)
         var(--str-chat__message-attachment-audio-widget-progress),
       var(--str-chat__disabled-color)
         var(--str-chat__message-attachment-audio-widget-progress)
     );
+
+    [dir='rtl'] & {
+      --str-chat__progress-direction: left;
+    }
     border-radius: calc(var(--str-chat__spacing-px) * 5);
 
     .str-chat__message-attachment-audio-widget--progress-indicator {

src/components/AudioPlayback/styling/WaveProgressBar.scss

@@ -33,7 +33,7 @@
 
     .str-chat__wave-progress-bar__progress-indicator {
       position: absolute;
-      left: 0;
+      inset-inline-start: 0;
       // todo: CSS use semantic variable instead of --base-white
       border: 2px solid var(--base-white);
       box-shadow: var(--light-elevation-3);