update style

package.json

@@ -3,12 +3,14 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@chatscope/chat-ui-kit-react": "^2.0.3",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-scripts": "5.0.1",
+    "styled-components": "^6.1.12",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/App.css

@@ -36,3 +36,4 @@
     transform: rotate(360deg);
   }
 }
+

src/App.jsx

@@ -49,6 +49,8 @@ function App() {
       return { role: role, content: messageObject.message };
   });
 
+
+
     const systemMessage = {
       role: "system",
       content: "You are a conversational AI designed to emulate fictional characters from various media. When a user provides the name of a character and the title of the media they are from, you should respond in a way that matches the character's personality, speech patterns, and knowledge. Your goal is to provide an immersive and engaging interaction that feels authentic to the character chosen by the user. Remember to stay true to the character's attributes and context within their story."
@@ -86,10 +88,10 @@ function App() {
 
   return (
     <div className="App">
-      <h1>Chatbot Title</h1> {/* Add your title here */}
       <div className="chat-container">
+      <h1>Chat with Your Favorite Fictional Characters!💬</h1>
         <MainContainer>
-          <ChatContainer>
+        <ChatContainer className="my-chat-container">
             <MessageList>
               {messages.map((message, i) => (
                 <Message key={i} model={message} />