mirror of
https://github.com/drawdb-io/drawdb.git
synced 2025-10-19 17:54:02 +00:00
refactor chat
This commit is contained in:
@@ -1,30 +1,54 @@
|
||||
import React, { useContext, useState } from "react";
|
||||
import { Button, Input } from "@douyinfe/semi-ui";
|
||||
import { Button, Input, Tag, Avatar } from "@douyinfe/semi-ui";
|
||||
import { IconSend } from "@douyinfe/semi-icons";
|
||||
import { socket } from "../data/socket";
|
||||
import { MessageContext } from "../pages/editor";
|
||||
|
||||
export default function Chat() {
|
||||
const [message, setMessage] = useState("");
|
||||
const { messages, setMessages } = useContext(MessageContext);
|
||||
const { messages } = useContext(MessageContext);
|
||||
|
||||
return (
|
||||
<div className="mx-5 flex flex-col h-full">
|
||||
<div className="h-full flex-1 overflow-y-auto" id="message-box">
|
||||
{messages.map((m, i) => (
|
||||
<div key={i}>{m}</div>
|
||||
))}
|
||||
<div className="h-full flex-1 overflow-y-auto flex flex-col-reverse py-2">
|
||||
{messages.map((m, i) =>
|
||||
m.type === "note" ? (
|
||||
<div key={i} className="text-center my-1">
|
||||
<Tag size="large" color={m.action === "join" ? "blue" : "amber"}>
|
||||
{m.message}
|
||||
</Tag>
|
||||
</div>
|
||||
) : messages[i + 1].id !== m.id ? (
|
||||
<div key={i} className="flex pt-1">
|
||||
<Avatar
|
||||
size="small"
|
||||
alt={m.name}
|
||||
color={m.color}
|
||||
className="border border-grey-900"
|
||||
>
|
||||
{m.name.split(" ").map((c) => c[0])}
|
||||
</Avatar>
|
||||
<div className="ms-2">
|
||||
<div className="font-semibold">{m.name}</div>
|
||||
<div>{m.message}</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div key={i} className="ms-10">
|
||||
{m.message}
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
if (message !== "") {
|
||||
setMessages((prev) => [...prev, message]);
|
||||
if (message.trim() !== "") {
|
||||
socket.emit("send-message", message);
|
||||
}
|
||||
setMessage("");
|
||||
}}
|
||||
className="flex"
|
||||
className="flex mt-2"
|
||||
>
|
||||
<Input
|
||||
onChange={(v) => setMessage(v)}
|
||||
|
Reference in New Issue
Block a user