From e4afa926b265c9390f854593322446f62f59c7d1 Mon Sep 17 00:00:00 2001
From: bang9 <gusrn1423@naver.com>
Date: Wed, 13 Nov 2024 17:05:06 +0900
Subject: [PATCH] chore: apply start, end styles

---
 packages/uikit                                   | 2 +-
 src/components/BotMessageWithBodyInput.tsx       | 2 +-
 src/components/CustomMessageBody.tsx             | 2 +-
 src/components/FormInput.tsx                     | 4 ++--
 src/components/MessageDataContent.tsx            | 6 +++---
 src/components/TokensBody.tsx                    | 2 +-
 src/components/UserMessageWithBodyInput.tsx      | 2 +-
 src/components/chat/ui/ChatHeader.tsx            | 2 +-
 src/components/chat/ui/ChatMessageList.tsx       | 2 +-
 src/components/messages/CarouselMessage.tsx      | 6 +++---
 src/components/ui/CodeBlock.tsx                  | 6 +++---
 src/components/widget/ChatAiWidget.tsx           | 2 +-
 src/components/widget/WidgetToggleButton.tsx     | 3 ++-
 src/components/widget/WidgetWindow.tsx           | 2 +-
 src/components/widget/WidgetWindowFullScreen.tsx | 9 ++++++++-
 15 files changed, 30 insertions(+), 22 deletions(-)

diff --git a/packages/uikit b/packages/uikit
index 4fc061947..39d66cbf2 160000
--- a/packages/uikit
+++ b/packages/uikit
@@ -1 +1 @@
-Subproject commit 4fc0619472906ca5a0a3a8992650ca8bcfdf54c0
+Subproject commit 39d66cbf215e0e995aba9c86d16d9c80a5fadb27
diff --git a/src/components/BotMessageWithBodyInput.tsx b/src/components/BotMessageWithBodyInput.tsx
index 6b72aa6a3..b90985d65 100644
--- a/src/components/BotMessageWithBodyInput.tsx
+++ b/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;
diff --git a/src/components/CustomMessageBody.tsx b/src/components/CustomMessageBody.tsx
index 3dba5db22..8fd350931 100644
--- a/src/components/CustomMessageBody.tsx
+++ b/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;
diff --git a/src/components/FormInput.tsx b/src/components/FormInput.tsx
index 8d82a6a87..a611e33d1 100644
--- a/src/components/FormInput.tsx
+++ b/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`
diff --git a/src/components/MessageDataContent.tsx b/src/components/MessageDataContent.tsx
index f61a17264..a7c822b65 100644
--- a/src/components/MessageDataContent.tsx
+++ b/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};
 `;
diff --git a/src/components/TokensBody.tsx b/src/components/TokensBody.tsx
index 8c5838bd4..c77ccc9fb 100644
--- a/src/components/TokensBody.tsx
+++ b/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;
diff --git a/src/components/UserMessageWithBodyInput.tsx b/src/components/UserMessageWithBodyInput.tsx
index b05970085..4449475a6 100644
--- a/src/components/UserMessageWithBodyInput.tsx
+++ b/src/components/UserMessageWithBodyInput.tsx
@@ -20,7 +20,7 @@ const Root = styled.div`
 
 const Sender = styled(Label)`
   margin: 0 0 4px 12px;
-  text-align: left;
+  text-align: start;
 `;
 
 interface BodyContainerProps {
diff --git a/src/components/chat/ui/ChatHeader.tsx b/src/components/chat/ui/ChatHeader.tsx
index aa405f01c..e09d4c98b 100644
--- a/src/components/chat/ui/ChatHeader.tsx
+++ b/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}>
diff --git a/src/components/chat/ui/ChatMessageList.tsx b/src/components/chat/ui/ChatMessageList.tsx
index adbbe1893..a5e7ec198 100644
--- a/src/components/chat/ui/ChatMessageList.tsx
+++ b/src/components/chat/ui/ChatMessageList.tsx
@@ -144,5 +144,5 @@ const dateSeparatorMargin = css`
 const scrollBottomPosition = css`
   position: absolute;
   bottom: 20px;
-  right: 20px;
+  inset-inline-end: 20px;
 `;
diff --git a/src/components/messages/CarouselMessage.tsx b/src/components/messages/CarouselMessage.tsx
index baa294e46..19bcf393b 100644
--- a/src/components/messages/CarouselMessage.tsx
+++ b/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>
               )}
diff --git a/src/components/ui/CodeBlock.tsx b/src/components/ui/CodeBlock.tsx
index 833bb5919..949db652a 100644
--- a/src/components/ui/CodeBlock.tsx
+++ b/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;
diff --git a/src/components/widget/ChatAiWidget.tsx b/src/components/widget/ChatAiWidget.tsx
index 348b3ab65..457567721 100644
--- a/src/components/widget/ChatAiWidget.tsx
+++ b/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;
diff --git a/src/components/widget/WidgetToggleButton.tsx b/src/components/widget/WidgetToggleButton.tsx
index 3f41ab6b3..97d987eb9 100644
--- a/src/components/widget/WidgetToggleButton.tsx
+++ b/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;
   }
 `;
 
diff --git a/src/components/widget/WidgetWindow.tsx b/src/components/widget/WidgetWindow.tsx
index 7b488c772..7e3c40b16 100644
--- a/src/components/widget/WidgetWindow.tsx
+++ b/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;
diff --git a/src/components/widget/WidgetWindowFullScreen.tsx b/src/components/widget/WidgetWindowFullScreen.tsx
index 60f82dd40..0cd1845b6 100644
--- a/src/components/widget/WidgetWindowFullScreen.tsx
+++ b/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>