opensource/sqlchat
1
0
Fork 0
mirror of https://github.com/sqlchat/sqlchat.git synced 2025-07-29 18:23:25 +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

2
components/ChatView/MessageTextarea.tsx
View File

@ -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"> <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 <TextareaAutosize
ref={textareaRef} 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..." placeholder="Type a message..."
rows={1} rows={1}
minRows={1} minRows={1}

15
components/ChatView/MessageView.tsx
View File

@ -1,6 +1,7 @@
import { marked } from "marked"; import { marked } from "marked";
import { useUserStore } from "@/store"; import { useUserStore } from "@/store";
import { Message } from "@/types"; import { Message } from "@/types";
import Icon from "../Icon";
interface Props { interface Props {
message: Message; message: Message;
@ -14,14 +15,24 @@ const MessageView = (props: Props) => {
return ( 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"}`}> <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 ? ( {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"> <>
<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} {message.content}
</div> </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-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 <div
className="w-auto max-w-full bg-gray-100 px-4 py-2 rounded-lg rounded-tl-none shadow prose prose-neutral" 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) }} dangerouslySetInnerHTML={{ __html: marked.parse(message.content) }}
></div> ></div>
</>
)} )}
</div> </div>
); );