update styles

src/components/ChatApp/ChatApp.tsx

@@ -41,9 +41,11 @@ export const ChatApp = ({ onClose }: Props): JSX.Element => {
                 width: 370,
                 height: 660,
                 position: 'fixed',
+                zIndex: 99999,
                 bottom: 0,
-                right: 24,
+                right: 6,
                 background: '#fff',
+                // position: 'relative',
                 borderRadius: '24px 24px 0px 0px',
                 '--shadow-1': 'rgba(0, 0, 0, 0.1)',
                 '--shadow-2': 'rgba(0, 0, 0, 0.2)',
@@ -53,7 +55,12 @@ export const ChatApp = ({ onClose }: Props): JSX.Element => {
         >
             <Header onClose={onClose} />
             <FancyMessagePanel />
-            <Box sx={{ position: 'relative', paddingTop: 16, borderTop: '1px solid #eee' }}>
+            <Box
+                left={0}
+                right={0}
+                bottom={0}
+                sx={{ position: 'absolute', paddingTop: 1, borderTop: '1px solid #eee' }}
+            >
                 <MessageInput />
                 <Copyright />
             </Box>

src/components/ChatApp/Copyright.tsx

@@ -1,8 +1,8 @@
-import { Box, Text } from "@chakra-ui/react"
+import { Box, Text } from '@chakra-ui/react'
 
 export const Copyright = (): JSX.Element => {
     return (
-        <Box sx={{ paddingTop: 4, paddingBottom: 4 }}>
+        <Box sx={{ paddingTop: 1, paddingBottom: 1 }}>
             <Text
                 fontSize={14}
                 align='center'

src/components/ChatApp/Header.tsx

@@ -1,6 +1,6 @@
 import { Box, CloseButton, Flex, Text } from '@chakra-ui/react'
 import { AppState, useAppStore } from '../../stores'
-import { OpenAi } from '../OpenAI'
+import { OpenAI } from '../OpenAI'
 
 interface Props {
     onClose?: () => void
@@ -14,13 +14,13 @@ export const Header = ({ onClose }: Props): JSX.Element => {
     return (
         <Box
             sx={{
-                padding: 16,
+                padding: 4,
                 borderBottom: '1px solid #eee',
             }}
         >
             <Flex align={'center'}>
-                <Box w={32} h={32} mr={16}>
-                    <OpenAi w={32} h={32} />
+                <Box w={8} h={8} mr={4}>
+                    <OpenAI w={8} h={8} />
                     {/* <Image w={32} h={32} src={Openai} alt='Openai' /> */}
                 </Box>
                 <Box>

src/components/ChatApp/MessageBox.tsx

@@ -1,5 +1,5 @@
 import { Box, Flex, Text } from '@chakra-ui/react'
-import { OpenAi } from '../OpenAI'
+import { OpenAI } from '../OpenAI'
 
 interface Props {
     isMe?: boolean
@@ -8,15 +8,10 @@ interface Props {
 
 export const MessageBox = ({ isMe = false, message = '' }: Props): JSX.Element => {
     return (
-        <Box bg={isMe ? '#eee' : '#fff'} p={12} w='auto'>
+        <Box bg={isMe ? '#eee' : '#fff'} p={3} w='auto'>
             <Flex w='100%'>
-                <Box
-                    sx={{
-                        width: 24,
-                    }}
-                    mr={12}
-                >
-                    {!isMe ? <OpenAi w={24} /> : null}
+                <Box w={'28px'} mr={1}>
+                    {!isMe ? <OpenAI w={6} /> : null}
                 </Box>
                 <Box
                     sx={{

src/components/ChatApp/MessagePanel.tsx

@@ -23,7 +23,7 @@ export const MessagePanel = (): JSX.Element => {
             sx={{
                 flex: 1,
                 overflowY: 'scroll',
-                paddingBottom: 40,
+                paddingBottom: 10,
             }}
         >
             <Box>
@@ -36,7 +36,7 @@ export const MessagePanel = (): JSX.Element => {
                                 <MessageBox isMe={message.sender === 'me'} message={message.text} />
                             )}
 
-                            {index < getMessageList().length - 1 && <Divider color='#eee' />}
+                            {index < getMessageList().length - 1 && <Divider my={0} color='#eee' />}
                         </Box>
                     )
                 })}

src/index.css

@@ -1,11 +0,0 @@
-body {
-    margin: 0;
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
-        'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
-}