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: update chat view layout

Browse Source
This commit is contained in:
Steven
2023-03-19 00:42:35 +08:00
parent 19c3905e9e
commit 208c894db8
15 changed files with 210 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
components/ChatView/MessageTextarea.tsx
View File

@ -1,16 +1,21 @@
import axios from "axios";
import { useEffect, useRef, useState } from "react";
import { toast } from "react-hot-toast";
import TextareaAutosize from "react-textarea-autosize";
import { useChatStore, useMessageStore, useUserStore } from "../../store";
import { UserRole } from "../../types";
import { generateUUID } from "../../utils";
import Icon from "../Icon";
const MessageTextarea = () => {
interface Props {
sendMessage: () => Promise<void>;
}
const MessageTextarea = (props: Props) => {
const { sendMessage } = props;
const userStore = useUserStore();
const chatStore = useChatStore();
const messageStore = useMessageStore();
const [value, setValue] = useState<string>("");
const [isInIME, setIsInIME] = useState(false);
const textareaRef = useRef<HTMLTextAreaElement>(null);
useEffect(() => {
@ -25,10 +30,20 @@ const MessageTextarea = () => {
const handleSend = async () => {
if (!chatStore.currentChat) {
toast.error("Please select a chat first.");
return;
}
if (!value) {
toast.error("Please enter a message.");
return;
}
const currentChat = chatStore.currentChat;
if (currentChat.isRequesting) {
toast.error("Please wait for the previous message to be sent.");
return;
}
messageStore.addMessage({
id: generateUUID(),
chatId: currentChat.id,
@ -39,35 +54,32 @@ const MessageTextarea = () => {
setValue("");
textareaRef.current!.value = "";
const messageList = messageStore.getState().messageList.filter((message) => message.chatId === currentChat.id);
const { data } = await axios.post<string>("/api/chat", {
messages: messageList.map((message) => ({
role: message.creatorId === userStore.currentUser.id ? UserRole.User : UserRole.Assistant,
content: message.content,
})),
});
messageStore.addMessage({
id: generateUUID(),
chatId: currentChat.id,
creatorId: currentChat.userId,
createdAt: Date.now(),
content: data,
});
await sendMessage();
};
const handleKeyDown = (event: React.KeyboardEvent) => {
if (event.key === "Enter" && !event.shiftKey && !isInIME) {
event.preventDefault();
handleSend();
}
};
return (
<div className="w-full h-auto border rounded-md 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
ref={textareaRef}
className="w-full h-full outline-none border-none bg-transparent pt-1 mt-1 px-2 resize-none hide-scrollbar"
className="w-full h-full outline-none border-none bg-transparent leading-6 py-1 px-2 resize-none hide-scrollbar"
placeholder="Type a message..."
rows={1}
minRows={1}
maxRows={5}
onCompositionStart={() => setIsInIME(true)}
onCompositionEnd={() => setIsInIME(false)}
onChange={handleChange}
onSubmit={handleSend}
onKeyDown={handleKeyDown}
/>
<div className="absolute bottom-2 right-2 w-8 p-1 cursor-pointer rounded-md hover:shadow hover:bg-gray-100" onClick={handleSend}>
<Icon.Io.IoMdSend className="w-full h-auto text-blue-800" />
<div className="w-8 p-1 cursor-pointer rounded-md hover:shadow hover:bg-gray-100" onClick={handleSend}>
<Icon.Io.IoMdSend className="w-full h-auto text-indigo-600" />
</div>
</div>
);