opensource/sqlchat
1
0
Fork 0
mirror of https://github.com/sqlchat/sqlchat.git synced 2025-07-28 17:53:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: add avatar to message view

Browse Source
This commit is contained in:
steven
2023-03-24 14:29:43 +08:00
parent 11141399aa
commit f2c4e33be4
2 changed files with 19 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
components/ChatView/MessageView.tsx
View File

@ -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>
);