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/FormInput.tsx

@@ -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/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/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

@@ -88,17 +88,17 @@ export const CarouselMessage = ({ streaming, textBody, streamingBody, items }: P
         startPadding={leftMargin}
         endPadding={listPadding}
         gap={avatarMargin}
-        style={{ marginLeft: -leftMargin, marginRight: -listPadding }}
+        style={{ marginInlineStart: -leftMargin, marginInlineEnd: -listPadding }}
         renderButtons={({ activeIndex, onClickPrev, onClickNext }) =>
           shouldRenderButtons && (
             <>
               {activeIndex !== 0 && (
-                <Button style={{ left: -leftMargin }} onClick={onClickPrev} direction={'left'}>
+                <Button style={{ insetInlineStart: -leftMargin }} onClick={onClickPrev} direction={'left'}>
                   <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={'right'}>
                   <ChevronRight width={24} height={24} fill={theme.bgColor.carouselButtonIcon} />
                 </Button>
               )}

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/widget/ChatAiWidget.tsx

@@ -16,7 +16,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;

src/components/widget/WidgetToggleButton.tsx

@@ -11,7 +11,8 @@ const FloatingWidgetButton = styled(WidgetButton)`
     position: fixed;
     z-index: ${MAX_Z_INDEX};
     bottom: 24px;
-    right: 24px;
+    right: unset;
+    inset-inline-end: 24px;
   }
 `;
 

src/components/widget/WidgetWindow.tsx

@@ -13,7 +13,7 @@ const StyledWidgetWindowWrapper = styled.div<{
   -webkit-overflow-scrolling: auto;
   position: fixed;
   bottom: 84px;
-  right: 20px;
+  inset-inline-end: 20px;
   height: 640px;
   min-height: 80px;
   width: 400px;

src/components/widget/WidgetWindowFullScreen.tsx

@@ -12,7 +12,14 @@ function WidgetWindowFullScreen(props: ChatAiWidgetProps) {
     <ProviderContainer {...props}>
       <div
         id={elementIds.widgetWindow}
-        style={{ position: 'fixed', left: 0, top: 0, width: '100%', height: '100%', transform: 'scale(1)' }}
+        style={{
+          position: 'fixed',
+          top: 0,
+          insetInlineStart: 0,
+          width: '100%',
+          height: '100%',
+          transform: 'scale(1)',
+        }}
       >
         <Chat fullscreen />
       </div>