opensource/sqlchat
1
0
Fork 0
mirror of https://github.com/sqlchat/sqlchat.git synced 2025-07-29 02:04:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: add message renderer style

Browse Source
This commit is contained in:
Steven
2023-03-19 21:25:51 +08:00
parent 262d6904d3
commit 990d7d83fe
4 changed files with 37 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
components/ChatView/MessageView.tsx
View File

@ -1,7 +1,6 @@
import { marked } from "marked";
import { useUserStore } from "../../store";
import { Message } from "../../types";
import "highlight.js/styles/github.css";
interface Props {
message: Message;
@ -14,12 +13,14 @@ const MessageView = (props: Props) => {
const isCurrentUser = message.creatorId === currentUser.id;
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"}`}>
<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">{message.content}</div>
<div className="w-auto max-w-full bg-indigo-600 text-white px-4 py-2 rounded-lg rounded-tr-none shadow whitespace-pre">
{message.content}
</div>
) : (
<div
className="w-auto max-w-full bg-gray-100 px-4 py-2 rounded-lg rounded-tl-none shadow"
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>
)}