[AC-4189] feat: RTL

src/components/BotMessageWithBodyInput.tsx

@@ -18,7 +18,7 @@ const Root = styled.span`
 
 const Sender = styled.div`
   padding: 0 0 4px 12px;
-  text-align: left;
+  text-align: start;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;

src/components/CustomMessageBody.tsx

@@ -8,7 +8,7 @@ const Root = styled.div`
 
 const Text = styled.span`
   width: 100%;
-  text-align: left;
+  text-align: start;
   white-space: pre-line;
   word-break: break-word;
   line-height: 1.43;

src/components/MessageDataContent.tsx

@@ -84,14 +84,14 @@ const Root = styled.div`
   display: flex;
   justify-content: flex-start;
   margin-top: 16px;
-  padding-left: 36px;
+  padding-inline-start: 36px;
 `;
 
 const SideBar = styled.div`
   width: 4px;
   border-radius: 100px;
   background-color: ${({ theme }) => theme.bgColor.messageDataContent.sidebar};
-  margin-left: 8px;
+  margin-inline-start: 8px;
 `;
 
 const DataContainer = styled.div`
@@ -100,7 +100,7 @@ const DataContainer = styled.div`
   justify-content: flex-start;
   align-items: flex-start;
   gap: 4px;
-  margin-left: 16px;
+  margin-inline-start: 16px;
   flex: 1; // Without this, Sidebar width is reduced.
   color: ${({ theme }) => theme.textColor.messageDataContent.default};
 `;

src/components/TokensBody.tsx

@@ -34,7 +34,7 @@ const MultipleTokenTypeContainer = styled.div`
 
 export const TextContainer = styled.div`
   width: inherit;
-  text-align: left;
+  text-align: start;
   word-break: break-word;
   padding: 8px 12px;
   gap: 12px;

src/components/UserMessageWithBodyInput.tsx

@@ -21,7 +21,7 @@ const Root = styled.div`
 
 const Sender = styled(Label)`
   margin: 0 0 4px 12px;
-  text-align: left;
+  text-align: start;
 `;
 
 interface BodyContainerProps {

src/components/chat/ui/ChatHeader.tsx

@@ -41,7 +41,7 @@ export const ChatHeader = ({ fullscreen }: Props) => {
 
   return (
     <div className={container}>
-      <div style={{ marginRight: 6 }}>
+      <div style={{ marginInlineEnd: 6 }}>
         <BotProfileImage size={34} />
       </div>
       <div className={headerCenter}>

src/components/chat/ui/ChatInput.tsx

@@ -116,6 +116,9 @@ const container = css`
         right: unset;
         bottom: unset;
         background-color: transparent;
+        [dir='rtl'] & {
+          transform: scaleX(-1);
+        }
       }
       .sendbird-message-input--attach {
         right: unset;

src/components/chat/ui/ChatMessageList.tsx

@@ -149,5 +149,5 @@ const dateSeparatorMargin = css`
 const scrollBottomPosition = css`
   position: absolute;
   bottom: 20px;
-  right: 20px;
+  inset-inline-end: 20px;
 `;

src/components/messages/CarouselMessage.tsx

@@ -11,7 +11,7 @@ import { SnapCarousel } from '../ui/SnapCarousel';
 const listPadding = 16;
 const avatarSize = 28;
 const avatarMargin = 8;
-const leftMargin = avatarSize + avatarMargin + listPadding;
+const startMargin = avatarSize + avatarMargin + listPadding;
 
 const BodyWrapper = styled.div({
   display: 'flex',
@@ -49,7 +49,7 @@ const Image = styled.img`
   background-color: ${({ theme }) => theme.bgColor.carouselItem};
 `;
 
-const Button = styled.button<{ direction: 'left' | 'right' }>(({ theme, direction }) => ({
+const Button = styled.button<{ direction: 'start' | 'end' }>(({ theme, direction }) => ({
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
@@ -58,14 +58,23 @@ const Button = styled.button<{ direction: 'left' | 'right' }>(({ theme, directio
   transform: 'translateY(-50%)',
   border: 'none',
   cursor: 'pointer',
-  borderRadius: direction === 'right' ? '100px 0px 0px 100px' : '0px 100px 100px 0px',
-  padding: direction === 'right' ? '8px 8px 8px 12px' : '8px 12px 8px 8px',
+  borderStartStartRadius: direction === 'start' ? 0 : 100,
+  borderStartEndRadius: direction === 'end' ? 0 : 100,
+  borderEndStartRadius: direction === 'start' ? 0 : 100,
+  borderEndEndRadius: direction === 'end' ? 0 : 100,
+  paddingTop: 8,
+  paddingBottom: 8,
+  paddingInlineStart: direction === 'end' ? 12 : 8,
+  paddingInlineEnd: direction === 'start' ? 12 : 8,
   backgroundColor: theme.bgColor.carouselButton,
   boxShadow:
     '0px 8px 10px 1px rgba(13, 13, 13, 0.12), 0px 3px 14px 2px rgba(13, 13, 13, 0.08), 0px 3px 5px -3px rgba(13, 13, 13, 0.04)',
   '&:hover': {
     backgroundColor: theme.bgColor.hover.carouselButton,
   },
+  '[dir=rtl] & svg': {
+    transform: 'scaleX(-1)',
+  },
 }));
 
 type Props = {
@@ -85,20 +94,20 @@ export const CarouselMessage = ({ streaming, textBody, streamingBody, items }: P
 
     return (
       <SnapCarousel
-        startPadding={leftMargin}
+        startPadding={startMargin}
         endPadding={listPadding}
         gap={avatarMargin}
-        style={{ marginLeft: -leftMargin, marginRight: -listPadding }}
+        style={{ marginInlineStart: -startMargin, marginInlineEnd: -listPadding }}
         renderButtons={({ activeIndex, onClickPrev, onClickNext }) =>
           shouldRenderButtons && (
             <>
               {activeIndex !== 0 && (
-                <Button style={{ left: -leftMargin }} onClick={onClickPrev} direction={'left'}>
+                <Button style={{ insetInlineStart: -startMargin }} onClick={onClickPrev} direction={'start'}>
                   <ChevronLeft width={24} height={24} fill={theme.bgColor.carouselButtonIcon} />
                 </Button>
               )}
               {activeIndex !== items.length - 1 && (
-                <Button style={{ right: -listPadding }} onClick={onClickNext} direction={'right'}>
+                <Button style={{ insetInlineEnd: -listPadding }} onClick={onClickNext} direction={'end'}>
                   <ChevronRight width={24} height={24} fill={theme.bgColor.carouselButtonIcon} />
                 </Button>
               )}

src/components/FormInput.tsx → src/components/messages/FormMessage/FormInput.tsx

@@ -2,8 +2,8 @@ import { MessageFormItemStyle } from '@sendbird/chat/message';
 import { ReactElement, ReactNode } from 'react';
 import styled from 'styled-components';
 
-import { Icon } from '../foundation/components/Icon';
-import { Label as UILabel } from '../foundation/components/Label';
+import { Icon } from '../../../foundation/components/Icon';
+import { Label as UILabel } from '../../../foundation/components/Label';
 
 export interface InputLabelProps {
   children: ReactNode;
@@ -17,7 +17,7 @@ const Label = styled(UILabel)`
 
 export const InputLabel = ({ children }: InputLabelProps): ReactElement => (
   <div style={{ marginBottom: '6px' }}>
-    <Label className="sendbird-input-label" type={'caption2'} color={'onbackground2'}>
+    <Label className={'sendbird-input-label'} type={'caption2'} color={'onbackground2'}>
       {children}
     </Label>
   </div>
@@ -79,7 +79,7 @@ const Placeholder = styled.div<PlaceholderProps>`
   position: absolute;
   pointer-events: none;
   top: 8px;
-  left: 13px;
+  inset-inline-start: 13px;
   font-size: 14px;
   line-height: 1.43;
   color: ${({ theme }) => theme.textColor.placeholder};
@@ -261,7 +261,7 @@ const CheckIconContainer = styled.div`
 `;
 
 const CheckIconForChip = styled(Icon)<CheckIconProps>`
-  margin-left: 4px;
+  margin-inline-start: 4px;
 `;
 
 const InputContainer = styled.div`

src/components/messages/FormMessage.tsx → src/components/messages/FormMessage/index.tsx

@@ -5,12 +5,12 @@ import styled from 'styled-components';
 import { isFormVersionCompatible } from '@uikit/modules/GroupChannel/context/utils';
 import Button from '@uikit/ui/Button';
 
-import FallbackUserMessage from './FallbackUserMessage';
-import { widgetStringSet } from '../../const';
-import { useConstantState } from '../../context/ConstantContext';
-import { Label } from '../../foundation/components/Label';
-import FormInput from '../FormInput';
-import { AlertModal } from '../ui/AlertModal';
+import FallbackUserMessage from './../FallbackUserMessage';
+import FormInput from './FormInput';
+import { widgetStringSet } from '../../../const';
+import { useConstantState } from '../../../context/ConstantContext';
+import { Label } from '../../../foundation/components/Label';
+import { AlertModal } from '../../ui/AlertModal';
 
 interface Props {
   message: BaseMessage;

src/components/ui/CodeBlock.tsx

@@ -22,8 +22,8 @@ const Line = styled.div`
 
 const LineNumber = styled.span`
   display: table-cell;
-  text-align: right;
-  padding-right: 10px;
+  text-align: end;
+  padding-inline-end: 10px;
   user-select: none;
   opacity: 0.5;
 `;
@@ -35,7 +35,7 @@ const LineContent = styled.span`
 const CopyButton = styled.button`
   position: absolute;
   top: 8px;
-  right: 12px;
+  inset-inline-end: 12px;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;

src/components/ui/PoweredByBanner.tsx

@@ -48,7 +48,7 @@ function Banner() {
   const { chatBottomContent } = useConstantState();
 
   return (
-    <InnerContainer chatBottomBackgroundColor={chatBottomContent.backgroundColor}>
+    <InnerContainer chatBottomBackgroundColor={chatBottomContent.backgroundColor} dir={'ltr'}>
       {chatBottomContent?.text}&nbsp;&nbsp;&nbsp;Powered by&nbsp;
       <Highlighter
         aria-label="Learn more about Sendbird"

src/components/ui/SnapCarousel/index.tsx

@@ -11,7 +11,7 @@ const Container = styled.div({
   overflowY: 'scroll',
   gap: 12,
   scrollPadding: 0,
-  paddingLeft: 0,
+  paddingInlineStart: 0,
   scrollbarWidth: 'none',
   userSelect: 'none',
   '::-webkit-scrollbar': {
@@ -58,25 +58,23 @@ export const SnapCarousel = ({
 }: SnapCarouselProps) => {
   const ref = useRef<HTMLDivElement>(null);
   const [activeIndex, setActiveState] = useState(0);
-  const itemLength = React.Children.toArray(children).length;
 
+  const direction = (ref.current ? getComputedStyle(ref.current).direction : 'ltr') as 'rtl' | 'ltr';
+  const itemLength = React.Children.toArray(children).length;
   const itemWidth = useMemo(() => {
     const total = ref.current?.scrollWidth ?? 0;
     return (total - (startPadding + endPadding + gap * (itemLength - 1))) / itemLength;
   }, [ref.current?.scrollWidth, itemLength, gap, startPadding, endPadding]);
 
   const onScroll = (e: React.UIEvent<HTMLDivElement>) => {
-    const idx = Math.round(e.currentTarget.scrollLeft / itemWidth);
+    const idx = Math.round(e.currentTarget.scrollLeft / itemWidth) * (direction === 'ltr' ? 1 : -1);
     if (idx !== activeIndex) setActiveState(idx);
   };
 
   const scrollTo = (index: number) => {
     if (ref.current) {
       const nextIdx = Math.min(Math.max(0, index), itemLength - 1);
-      ref.current.scroll({
-        left: nextIdx * itemWidth,
-        behavior: 'smooth',
-      });
+      ref.current.scroll({ left: nextIdx * itemWidth * (direction === 'ltr' ? 1 : -1), behavior: 'smooth' });
     }
   };
 
@@ -88,8 +86,8 @@ export const SnapCarousel = ({
         style={{
           gap,
           scrollPadding: startPadding,
-          paddingLeft: startPadding,
-          paddingRight: endPadding,
+          paddingInlineStart: startPadding,
+          paddingInlineEnd: endPadding,
           ...style,
         }}
       >

src/components/ui/WidgetButton.tsx

@@ -117,6 +117,7 @@ export interface WidgetButtonProps {
   onClick?: () => void;
   className?: string;
   animated?: boolean;
+  dir?: 'ltr' | 'rtl';
 }
 
 export const WidgetButton = ({
@@ -126,9 +127,11 @@ export const WidgetButton = ({
   onClick,
   className,
   animated = true,
+  dir,
 }: WidgetButtonProps) => {
   return (
     <ButtonContainer
+      dir={dir}
       id={elementIds.widgetToggleButton}
       aria-label="Widget toggle button"
       className={className}

src/components/widget/ChatAiWidget.tsx

@@ -6,6 +6,7 @@ import ProviderContainer from './ProviderContainer';
 import WidgetToggleButton from './WidgetToggleButton';
 import WidgetWindow from './WidgetWindow';
 import { type Constant, elementIds, WIDGET_WINDOW_Z_INDEX } from '../../const';
+import { useConstantState } from '../../context/ConstantContext';
 import { useWidgetState } from '../../context/WidgetStateContext';
 import useMobileView from '../../hooks/useMobileView';
 import { useWidgetAutoOpen } from '../../hooks/useWidgetAutoOpen';
@@ -16,7 +17,7 @@ const MobileContainer = styled.div<{ width: number }>`
   position: fixed;
   z-index: ${WIDGET_WINDOW_Z_INDEX};
   top: 0;
-  left: 0;
+  inset-inline-start: 0;
   width: ${({ width }) => `${width}px`};
   height: 100%;
   overflow: hidden;
@@ -39,11 +40,13 @@ const DesktopComponent = () => {
 
 const MobileComponent = () => {
   const { isOpen, isVisible } = useWidgetState();
+  const { dir } = useConstantState();
   const { width: mobileContainerWidth } = useMobileView();
 
   return (
     <>
       <MobileContainer
+        dir={dir}
         style={{ display: isOpen && isVisible ? 'block' : 'none' }}
         width={mobileContainerWidth}
         id={elementIds.widgetWindow}

src/components/widget/WidgetToggleButton.tsx

@@ -11,25 +11,27 @@ const FloatingWidgetButton = styled(WidgetButton)`
     position: fixed;
     z-index: ${MAX_Z_INDEX};
     bottom: 24px;
-    right: 24px;
+    right: unset;
+    inset-inline-end: 24px;
   }
 `;
 
-export type ToggleButtonProps = Omit<WidgetButtonProps, 'imageUrl'>;
 export default function WidgetToggleButton() {
   const { botStyle } = useWidgetSetting();
-  const { renderWidgetToggleButton } = useConstantState();
+  const { dir, renderWidgetToggleButton } = useConstantState();
   const { isOpen, setIsOpen } = useWidgetState();
 
-  const toggleButtonProps: ToggleButtonProps = {
+  const toggleButtonProps: WidgetButtonProps = {
+    dir,
     isOpen,
     onClick: () => setIsOpen(!isOpen),
     accentColor: botStyle.accentColor,
+    imageUrl: botStyle.toggleButtonUrl,
   };
 
   if (typeof renderWidgetToggleButton === 'function') {
     return renderWidgetToggleButton(toggleButtonProps);
   }
 
-  return <FloatingWidgetButton {...toggleButtonProps} imageUrl={botStyle.toggleButtonUrl} />;
+  return <FloatingWidgetButton {...toggleButtonProps} />;
 }