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

feat: update ChatView layout

Browse Source
This commit is contained in:
Steven
2023-03-16 21:29:19 +08:00
parent 5ff430fe34
commit 4ea6ce143f
12 changed files with 154 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
components/ChatView/MessageView.tsx
View File

@ -1,4 +1,7 @@
import { marked } from "marked";
import { useUserStore } from "../../store";
import { Message } from "../../types";
import "highlight.js/styles/github.css";
interface Props {
message: Message;
@ -6,8 +9,22 @@ interface Props {
const Message = (props: Props) => {
const message = props.message;
const userStore = useUserStore();
const currentUser = userStore.currentUser;
const isCurrentUser = message.creatorId === currentUser.id;
return <div>{message.content}</div>;
return (
<div className={`w-full flex flex-row justify-start items-start my-4 ${isCurrentUser ? "justify-end pl-8 sm:pl-16" : "pr-8 sm:pr-16"}`}>
{isCurrentUser ? (
<div className="w-auto max-w-full bg-white px-3 py-2 rounded-lg rounded-tr-none shadow">{message.content}</div>
) : (
<div
className="w-auto max-w-full bg-white px-3 py-2 rounded-lg rounded-tl-none shadow"
dangerouslySetInnerHTML={{ __html: marked.parse(message.content) }}
></div>
)}
</div>
);
};
export default Message;