[AC-2602] fix: style issues (#271)

## Changes
1. update path of files
2. vertical position of powered by banner / vertical position of scroll
to bottom button
### Before
<img width="361" alt="image"
src="https://github.com/sendbird/chat-ai-widget/assets/26326015/cdddb597-d78a-467c-8780-86181bd6a811">

### After
<img width="377" alt="image"
src="https://github.com/sendbird/chat-ai-widget/assets/26326015/1cacfc0b-57c2-4520-8677-3745bdef066b">




ticket: [AC-2602]

[AC-2602]:
https://sendbird.atlassian.net/browse/AC-2602?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

src/components/CustomChannelComponent.tsx

@@ -2,22 +2,20 @@ import { SendableMessage } from '@sendbird/chat/lib/__definition';
 import { SendingStatus, UserMessage } from '@sendbird/chat/message';
 import { isSameDay } from 'date-fns/isSameDay';
 import { useEffect, useMemo, useRef, useState } from 'react';
-import ReactDOM from 'react-dom';
 import styled from 'styled-components';
 
-import useSendbirdStateContext from '@uikit/hooks/useSendbirdStateContext';
 import GroupChannelUI from '@uikit/modules/GroupChannel/components/GroupChannelUI';
 import Message from '@uikit/modules/GroupChannel/components/Message';
 import MessageInputWrapper from '@uikit/modules/GroupChannel/components/MessageInputWrapper';
 import { useGroupChannelContext } from '@uikit/modules/GroupChannel/context/GroupChannelProvider';
 
-import ChatBottom from './ChatBottom';
 import CustomChannelHeader from './CustomChannelHeader';
 import CustomMessage from './CustomMessage';
 import DynamicRepliesPanel from './DynamicRepliesPanel';
 import MessageDataContent from './MessageDataContent';
 import WelcomeMessages from './messages/WelcomeMessages';
 import StaticRepliesPanel from './StaticRepliesPanel';
+import { PoweredByBanner } from './ui/PoweredByBanner';
 import { useConstantState } from '../context/ConstantContext';
 import {
   useWidgetSession,
@@ -27,11 +25,7 @@ import useAutoDismissMobileKeyboardHandler from '../hooks/useAutoDismissMobileKe
 import { useBlockWhileBotResponding } from '../hooks/useBlockWhileBotResponding';
 import { useResetHistoryOnConnected } from '../hooks/useResetHistoryOnConnected';
 import { useScrollOnStreaming } from '../hooks/useScrollOnStreaming';
-import {
-  hideChatBottomBanner,
-  isDashboardPreview,
-  isIOSMobile,
-} from '../utils';
+import { isDashboardPreview, isIOSMobile } from '../utils';
 import {
   getBotWelcomeMessages,
   getSenderUserIdFromMessage,
@@ -58,7 +52,7 @@ const Root = styled.div<RootStyleProps>`
 
   .sendbird-conversation__scroll-bottom-button {
     bottom: ${({ isStaticReplyVisible }) =>
-      isStaticReplyVisible ? '65px' : '50px'};
+      isStaticReplyVisible ? '65px' : '16px'};
   }
 
   .sendbird-message-input-wrapper {
@@ -372,24 +366,7 @@ export function CustomChannelComponent() {
           );
         }}
       />
-      <Banner />
+      <PoweredByBanner />
     </Root>
   );
 }
-
-function Banner() {
-  const store = useSendbirdStateContext();
-  const sdk = store.stores.sdkStore.sdk;
-
-  if (hideChatBottomBanner(sdk)) {
-    return null;
-  }
-
-  const inputElement = document.querySelector(
-    '.sendbird-message-input-wrapper'
-  );
-
-  return inputElement
-    ? ReactDOM.createPortal(<ChatBottom />, inputElement)
-    : null;
-}

src/components/CustomChannelHeader.tsx

@@ -3,8 +3,8 @@ import styled from 'styled-components';
 import Avatar from '@uikit/ui/Avatar';
 import Label, { LabelColors, LabelTypography } from '@uikit/ui/Label';
 
-import BetaLogo from './BetaLogo';
 import BotProfileImage from './BotProfileImage';
+import BetaLogo from './ui/BetaLogo';
 import { elementIds } from '../const';
 import { useConstantState } from '../context/ConstantContext';
 import { useWidgetState } from '../context/WidgetStateContext';

src/components/TokensBody.tsx

@@ -2,8 +2,8 @@ import { ReactNode } from 'react';
 import styled from 'styled-components';
 
 import BotMessageBottom from './BotMessageBottom';
-import { CodeBlock } from './CodeBlock';
 import SourceContainer, { Source } from './SourceContainer';
+import { CodeBlock } from './ui/CodeBlock';
 import { useConstantState } from '../context/ConstantContext';
 import { replaceWithRegex, Token, TokenType } from '../utils';
 

src/components/CodeBlock.tsx → src/components/ui/CodeBlock.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import styled from 'styled-components';
 
-import { Token } from '../utils';
+import { Token } from '../../utils';
 
 const CodeContainer = styled.div`
   position: relative; /* For the copy button positioning */

src/components/ui/PoweredByBanner.tsx

@@ -0,0 +1,69 @@
+import ReactDOM from 'react-dom';
+import styled from 'styled-components';
+
+import useSendbirdStateContext from '@uikit/hooks/useSendbirdStateContext';
+
+import { useConstantState } from '../../context/ConstantContext';
+import SendbirdLogo from '../../icons/sendbird-logo.svg';
+import { hideChatBottomBanner } from '../../utils';
+
+export function PoweredByBanner() {
+  const store = useSendbirdStateContext();
+  const sdk = store.stores.sdkStore.sdk;
+
+  if (hideChatBottomBanner(sdk)) {
+    return null;
+  }
+
+  const inputElement = document.querySelector(
+    '.sendbird-message-input-wrapper'
+  );
+
+  return inputElement ? ReactDOM.createPortal(<Banner />, inputElement) : null;
+}
+
+const InnerContainer = styled.div<{ chatBottomBackgroundColor?: string }>`
+  padding-bottom: 12px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: ${({ theme, chatBottomBackgroundColor }) =>
+    chatBottomBackgroundColor || theme.bgColor.bottomBanner};
+  color: ${({ theme }) => theme.textColor.bottomBanner.poweredBy};
+  flex-wrap: wrap;
+  font-size: 13px;
+
+  svg {
+    path {
+      fill: ${({ theme }) => theme.textColor.bottomBanner.logo};
+    }
+  }
+`;
+
+const Highlighter = styled.a`
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+// link: https://dashboard.sendbird.com/auth/signup
+function Banner() {
+  const { chatBottomContent } = useConstantState();
+
+  return (
+    <InnerContainer
+      chatBottomBackgroundColor={chatBottomContent.backgroundColor}
+    >
+      {chatBottomContent?.text}&nbsp;&nbsp;&nbsp;Powered by&nbsp;
+      <Highlighter
+        aria-label="Learn more about Sendbird Chatbot"
+        href="https://sendbird.com/products/ai-chatbot"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <SendbirdLogo width={'75px'} />
+      </Highlighter>
+    </InnerContainer>
+  );
+}