diff --git a/components/Chat/Chat.tsx b/components/Chat/Chat.tsx index f275701..37e31a2 100644 --- a/components/Chat/Chat.tsx +++ b/components/Chat/Chat.tsx @@ -8,13 +8,14 @@ import { ModelSelect } from "./ModelSelect"; interface Props { model: OpenAIModel; messages: Message[]; + messageIsStreaming: boolean, loading: boolean; lightMode: "light" | "dark"; onSend: (message: Message) => void; onSelect: (model: OpenAIModel) => void; } -export const Chat: FC = ({ model, messages, loading, lightMode, onSend, onSelect }) => { +export const Chat: FC = ({ model, messages, messageIsStreaming, loading, lightMode, onSend, onSelect }) => { const messagesEndRef = useRef(null); const scrollToBottom = () => { @@ -57,7 +58,7 @@ export const Chat: FC = ({ model, messages, loading, lightMode, onSend, o
- +
); diff --git a/components/Chat/ChatInput.tsx b/components/Chat/ChatInput.tsx index 4cfd168..cb10feb 100644 --- a/components/Chat/ChatInput.tsx +++ b/components/Chat/ChatInput.tsx @@ -3,10 +3,11 @@ import { IconSend } from "@tabler/icons-react"; import { FC, KeyboardEvent, useEffect, useRef, useState } from "react"; interface Props { + messageIsStreaming: boolean, onSend: (message: Message) => void; } -export const ChatInput: FC = ({ onSend }) => { +export const ChatInput: FC = ({ onSend, messageIsStreaming }) => { const [content, setContent] = useState(); const [isTyping, setIsTyping] = useState(false); @@ -23,6 +24,10 @@ export const ChatInput: FC = ({ onSend }) => { }; const handleSend = () => { + if (messageIsStreaming) { + return; + } + if (!content) { alert("Please enter a message"); return; diff --git a/pages/index.tsx b/pages/index.tsx index fe466d9..ee1051a 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -11,7 +11,7 @@ export default function Home() { const [loading, setLoading] = useState(false); const [model, setModel] = useState(OpenAIModel.GPT_3_5); const [lightMode, setLightMode] = useState<"dark" | "light">("dark"); - const [disabled, setDisabled] = useState(false); + const [messageIsStreaming, setmessageIsStreaming] = useState(false); const [showSidebar, setShowSidebar] = useState(true); const handleSend = async (message: Message) => { @@ -23,7 +23,7 @@ export default function Home() { setSelectedConversation(updatedConversation); setLoading(true); - setDisabled(true); + setmessageIsStreaming(true); const response = await fetch("/api/chat", { method: "POST", @@ -111,7 +111,7 @@ export default function Home() { localStorage.setItem("conversationHistory", JSON.stringify(updatedConversations)); - setDisabled(false); + setmessageIsStreaming(false); } }; @@ -230,7 +230,7 @@ export default function Home() {
{showSidebar ? (