[AC-3912] feat: added stack direction to message list and set as bott…

…om (#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

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

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 {

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}

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