From f2c4e33be4294d59aa8f38de9a5c49c782e43bec Mon Sep 17 00:00:00 2001
From: steven <stevenlgtm@gmail.com>
Date: Fri, 24 Mar 2023 14:29:43 +0800
Subject: [PATCH] feat: add avatar to message view

---
 components/ChatView/MessageTextarea.tsx |  2 +-
 components/ChatView/MessageView.tsx     | 25 ++++++++++++++++++-------
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/components/ChatView/MessageTextarea.tsx b/components/ChatView/MessageTextarea.tsx
index 46f2f46..1e1bd77 100644
--- a/components/ChatView/MessageTextarea.tsx
+++ b/components/ChatView/MessageTextarea.tsx
@@ -67,7 +67,7 @@ const MessageTextarea = (props: Props) => {
     <div className="w-full h-auto flex flex-row justify-between items-end border rounded-lg mb-2 px-2 py-1 relative shadow bg-white">
       <TextareaAutosize
         ref={textareaRef}
-        className="w-full h-full outline-none border-none bg-transparent leading-8 py-1 px-2 resize-none hide-scrollbar"
+        className="w-full h-full outline-none border-none bg-transparent leading-6 py-2 px-2 resize-none hide-scrollbar"
         placeholder="Type a message..."
         rows={1}
         minRows={1}
diff --git a/components/ChatView/MessageView.tsx b/components/ChatView/MessageView.tsx
index 7c59664..54e43ba 100644
--- a/components/ChatView/MessageView.tsx
+++ b/components/ChatView/MessageView.tsx
@@ -1,6 +1,7 @@
 import { marked } from "marked";
 import { useUserStore } from "@/store";
 import { Message } from "@/types";
+import Icon from "../Icon";
 
 interface Props {
   message: Message;
@@ -14,14 +15,24 @@ const MessageView = (props: Props) => {
   return (
     <div className={`w-full flex flex-row justify-start items-start my-4 ${isCurrentUser ? "justify-end pl-8 sm:pl-24" : "pr-8 sm:pr-24"}`}>
       {isCurrentUser ? (
-        <div className="w-auto max-w-full bg-indigo-600 text-white px-4 py-2 rounded-lg rounded-tr-none shadow whitespace-pre-wrap">
-          {message.content}
-        </div>
+        <>
+          <div className="mt-0.5 w-auto max-w-full bg-indigo-600 text-white px-4 py-2 rounded-lg rounded-tr-none shadow whitespace-pre-wrap">
+            {message.content}
+          </div>
+          <div className="w-10 h-10 p-1 border rounded-full flex justify-center items-center ml-2 shrink-0">
+            <Icon.Ai.AiOutlineUser className="w-6 h-6" />
+          </div>
+        </>
       ) : (
-        <div
-          className="w-auto max-w-full bg-gray-100 px-4 py-2 rounded-lg rounded-tl-none shadow prose prose-neutral"
-          dangerouslySetInnerHTML={{ __html: marked.parse(message.content) }}
-        ></div>
+        <>
+          <div className="w-10 h-10 p-1 border rounded-full flex justify-center items-center mr-2 shrink-0">
+            <Icon.Ai.AiOutlineRobot className="w-6 h-6" />
+          </div>
+          <div
+            className="mt-0.5 w-auto max-w-full bg-gray-100 px-4 py-2 rounded-lg rounded-tl-none shadow prose prose-neutral"
+            dangerouslySetInnerHTML={{ __html: marked.parse(message.content) }}
+          ></div>
+        </>
       )}
     </div>
   );