From 0fd6824b30ffe4259cd750cac6b0865c683f7d6d Mon Sep 17 00:00:00 2001
From: Hyungu Kang | Airen <gusrn1423@naver.com>
Date: Fri, 27 Sep 2024 12:01:37 +0900
Subject: [PATCH] [AC-3912] feat: added stack direction to message list and set
 as bottom (#369)

## Changes
- Added message stack direction and set it to bottom.

ticket: [AC-3912]

## Additional Notes
-

## Checklist
Before requesting a code review, please check the following:
- [x] **[Required]** CI has passed all checks.
- [x] **[Required]** A self-review has been conducted to ensure there
are no minor mistakes.
- [x] **[Required]** Unnecessary comments/debugging code have been
removed.
- [x] **[Required]** All requirements specified in the ticket have been
accurately implemented.
- [x] Ensure the ticket has been updated with the sprint, status, and
story points.


[AC-3912]:
https://sendbird.atlassian.net/browse/AC-3912?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ
---
 src/components/chat/ui/ChatMessageList.tsx              | 1 +
 src/css/index.css                                       | 2 +-
 src/foundation/components/InfiniteMessageList/index.tsx | 4 ++++
 src/theme.ts                                            | 9 +++------
 4 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/components/chat/ui/ChatMessageList.tsx b/src/components/chat/ui/ChatMessageList.tsx
index 5f3f06a72..1e40766d2 100644
--- a/src/components/chat/ui/ChatMessageList.tsx
+++ b/src/components/chat/ui/ChatMessageList.tsx
@@ -42,6 +42,7 @@ export const ChatMessageList = () => {
         scrollPositionRef={scrollSource.scrollPositionRef}
         scrollDistanceFromBottomRef={scrollSource.scrollDistanceFromBottomRef}
         onScrollPosition={(it) => scrollSource.setIsScrollBottomReached(it === 'bottom')}
+        stackDirection={'bottom'}
         messages={filteredMessages}
         onLoadPrev={dataSource.loadPrevious}
         onLoadNext={dataSource.loadNext}
diff --git a/src/css/index.css b/src/css/index.css
index e6a26e852..99abb8971 100644
--- a/src/css/index.css
+++ b/src/css/index.css
@@ -42,7 +42,7 @@
 
 .sendbird-suggested-replies {
   margin: 0 !important;
-  padding: 8px 0 16px;
+  padding: 8px 0 4px 0;
 }
 
 .sendbird-form-chip__container {
diff --git a/src/foundation/components/InfiniteMessageList/index.tsx b/src/foundation/components/InfiniteMessageList/index.tsx
index 3d89c3c76..d73c47d16 100644
--- a/src/foundation/components/InfiniteMessageList/index.tsx
+++ b/src/foundation/components/InfiniteMessageList/index.tsx
@@ -29,6 +29,8 @@ type Props = {
 
   scrollPositionRef?: MutableRefObject<number>;
   scrollDistanceFromBottomRef?: MutableRefObject<number>;
+
+  stackDirection?: 'top' | 'bottom';
 };
 
 export const InfiniteMessageList = forwardRef<HTMLDivElement, Props>(function InfiniteMessageList(props, ref) {
@@ -49,6 +51,7 @@ export const InfiniteMessageList = forwardRef<HTMLDivElement, Props>(function In
 
     scrollPositionRef: _scrollPositionRef,
     scrollDistanceFromBottomRef: _scrollDistanceFromBottomRef,
+    stackDirection = 'top',
   } = props;
 
   const listRef = ref && 'current' in ref ? ref : { current: null };
@@ -112,6 +115,7 @@ export const InfiniteMessageList = forwardRef<HTMLDivElement, Props>(function In
   return (
     <div id={'infinite-list-container'} className={infiniteListContainer}>
       <div id={'infinite-list-inner'} ref={listRef} onScroll={handleScroll} className={infiniteListInner}>
+        {stackDirection === 'bottom' && <div style={{ flexGrow: 1 }} />}
         {messageTopArea}
         {messages.map((message, index) => renderMessage({ message, index }))}
         {messageBottomArea}
diff --git a/src/theme.ts b/src/theme.ts
index 39d946129..ced7442af 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -2,7 +2,6 @@ import { getColorBasedOnSaturation, generateColorVariants } from './colors';
 export interface CommonTheme {
   bgColor: {
     base: string;
-    chatBottom: string;
     messageInput: string;
     incomingMessage: string;
     outgoingMessage: string;
@@ -131,7 +130,6 @@ export function getTheme({
     light: {
       bgColor: {
         base: 'var(--sendbird-light-background-50)',
-        chatBottom: 'var(--sendbird-light-background-50)',
         messageInput: 'var(--sendbird-light-background-100)',
         incomingMessage: botMessageBGColor ?? 'var(--sendbird-dark-background-100)',
         outgoingMessage: accentColor ?? 'var(--sendbird-light-primary-300)',
@@ -237,14 +235,13 @@ export function getTheme({
     },
     dark: {
       bgColor: {
-        base: 'var(--sendbird-light-background-600)',
-        chatBottom: 'var(--sendbird-dark-background-600)',
+        base: 'var(--sendbird-dark-background-700)',
         messageInput: 'var(--sendbird-dark-background-500)',
         incomingMessage: botMessageBGColor ?? 'var(--sendbird-dark-background-400)',
         outgoingMessage: accentColor ?? 'var(--sendbird-dark-primary-200)',
         suggestedReply: 'var(--sendbird-dark-background-600)',
-        bottomBanner: 'var(--sendbird-dark-background-600)',
-        loadingScreen: 'var(--sendbird-dark-background-600)',
+        bottomBanner: 'var(--sendbird-dark-background-700)',
+        loadingScreen: 'var(--sendbird-dark-background-700)',
         hover: {
           // Give 1 level lighter color for hover
           incomingMessage: colorVarsForBotMessageBGColor