feat:modified user-message view (All-Hands-AI#54)

Signed-off-by: Vikramaditya <[email protected]>
enyst · Mar 19, 2024 · 1e733b0 · 1e733b0
1 parent d5c28a4
commit 1e733b0
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 11 deletions.
diff --git a/frontend/src/components/ChatInterface.css b/frontend/src/components/ChatInterface.css
@@ -12,16 +12,27 @@
     margin-bottom: 20px;
   }
 
-  .message {
+  .message-layout {
     display: flex;
     margin-bottom: 10px;
   }
-
+  .message{
+    display: flex;
+  }
+  .user-message{
+    display: flex;
+    flex-direction: row-reverse;
+    margin:10px 10px 0 auto
+  }
+ .user-message .message-content {
+  background-color: #007acc ;
+}
+
   .avatar {
     width: 40px;
     height: 40px;
     border-radius: 50%;
-    margin-right: 10px;
+    margin:0 10px;
   }
 
   .message-content {
@@ -32,6 +43,7 @@
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
   }
 
+
   .input-container {
     display: flex;
     align-items: center;
@@ -61,6 +73,8 @@
     font-size: 16px;
   }
 
+
   .input-container svg {
     height: 16px;
-  }
+  }
+
diff --git a/frontend/src/components/ChatInterface.tsx b/frontend/src/components/ChatInterface.tsx
@@ -45,13 +45,17 @@ function ChatInterface(): JSX.Element {
     <div className="chat-interface">
       <div className="message-list">
         {messages.map((msg, index) => (
-          <div key={index} className="message">
-            <img
-              src={msg.sender === "user" ? userAvatar : assistantAvatar}
-              alt={`${msg.sender} avatar`}
-              className="avatar"
-            />
-            <div className="message-content">{msg.content}</div>
+          <div key={index} className="message-layout">
+            <div
+              className={`${msg.sender === "user" ? "user-message" : "message"}`}
+            >
+              <img
+                src={msg.sender === "user" ? userAvatar : assistantAvatar}
+                alt={`${msg.sender} avatar`}
+                className="avatar"
+              />
+              <div className="message-content">{msg.content}</div>
+            </div>
           </div>
         ))}
       </div>
@@ -77,6 +81,11 @@ function ChatInterface(): JSX.Element {
           value={inputMessage}
           onChange={(e) => setInputMessage(e.target.value)}
           placeholder="Send a message (won't interrupt the Assistant)"
+          onKeyDown={(e) => {
+            if (e.key === "Enter") {
+              handleSendMessage();
+            }
+          }}
         />
         <button type="button" onClick={handleSendMessage}>
           <span className="button-text">Send</span>