import { head } from "lodash-es"; import { useEffect, useRef, useState } from "react"; import { toast } from "react-hot-toast"; import { getAssistantById, getPromptGeneratorOfAssistant, useChatStore, useMessageStore, useConnectionStore } from "@/store"; import { CreatorRole, Message } from "@/types"; import { generateUUID } from "@/utils"; import Icon from "../Icon"; import Header from "./Header"; import MessageView from "./MessageView"; import MessageTextarea from "./MessageTextarea"; import EmptyView from "../EmptyView"; const ChatView = () => { const connectionStore = useConnectionStore(); const chatStore = useChatStore(); const messageStore = useMessageStore(); const [isRequesting, setIsRequesting] = useState(false); const chatViewRef = useRef(null); const currentChat = chatStore.currentChat; const messageList = messageStore.messageList.filter((message) => message.chatId === currentChat?.id); useEffect(() => { setTimeout(() => { if (!chatViewRef.current) { return; } chatViewRef.current.scrollTop = chatViewRef.current.scrollHeight; }); }, [currentChat, isRequesting]); useEffect(() => { if (!connectionStore.currentConnectionCtx) { return; } if (currentChat?.connectionId === connectionStore.currentConnectionCtx.connection.id) { return; } const chatList = chatStore.chatList.filter((chat) => chat.connectionId === connectionStore.currentConnectionCtx?.connection.id); chatStore.setCurrentChat(head(chatList)); }, [connectionStore.currentConnectionCtx]); const sendMessageToCurrentChat = async () => { const currentChat = chatStore.getState().currentChat; if (!currentChat) { return; } if (isRequesting) { return; } setIsRequesting(true); const messageList = messageStore.getState().messageList.filter((message) => message.chatId === currentChat.id); let prompt = ""; if (connectionStore.currentConnectionCtx?.database) { const tables = await connectionStore.getOrFetchDatabaseSchema(connectionStore.currentConnectionCtx?.database); const promptGenerator = getPromptGeneratorOfAssistant(getAssistantById(currentChat.assistantId)!); prompt = promptGenerator(tables.map((table) => table.structure).join("/n")); } const rawRes = await fetch("/api/chat", { method: "POST", body: JSON.stringify({ messages: [ { role: CreatorRole.System, content: prompt, }, ...messageList.map((message) => ({ role: message.creatorRole, content: message.content, })), ], }), }); setIsRequesting(false); if (!rawRes.ok) { const res = await rawRes.json(); toast.error(res.error.message); return; } const data = rawRes.body; if (!data) { toast.error("No data return"); return; } const message: Message = { id: generateUUID(), chatId: currentChat.id, creatorId: currentChat.assistantId, creatorRole: CreatorRole.Assistant, createdAt: Date.now(), content: "", }; messageStore.addMessage(message); const reader = data.getReader(); const decoder = new TextDecoder("utf-8"); let done = false; while (!done) { const { value, done: readerDone } = await reader.read(); if (value) { const char = decoder.decode(value); if (char) { message.content = message.content + char; messageStore.updateMessageContent(message.id, message.content); } } done = readerDone; } }; return (
{messageList.length === 0 ? ( ) : ( messageList.map((message) => ) )} {isRequesting && (
Requesting...
)}
); }; export default ChatView;