Ayobami
233 lines
8.9 KiB
React
233 lines
8.9 KiB
React
import { useContext, useEffect, useRef, useState } from "react";
|
|
import { FiSend } from "react-icons/fi";
|
|
import { BsPlusLg } from "react-icons/bs";
|
|
import { RxHamburgerMenu } from "react-icons/rx";
|
|
|
|
import Message from "./Message";
|
|
import { homePage } from "./ChatUtils";
|
|
|
|
import MkdSDK from "Utils/MkdSDK";
|
|
import { GlobalContext } from "Context/Global";
|
|
import { AuthContext, tokenExpireError } from "Context/Auth";
|
|
|
|
const Chat = (props) => {
|
|
const { toggleComponentVisibility, index, currentRoom } = props;
|
|
|
|
const { state, dispatch } = useContext(GlobalContext);
|
|
const { dispatch: authDispatch } = useContext(AuthContext);
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const [errorMessage, setErrorMessage] = useState("");
|
|
const [showEmptyChat, setShowEmptyChat] = useState(true);
|
|
const [conversation, setConversation] = useState([]);
|
|
const [message, setMessage] = useState("");
|
|
const [generating, setGenerating] = useState(false);
|
|
const bottomOfChatRef = useRef(null);
|
|
|
|
let sdk = new MkdSDK();
|
|
|
|
useEffect(() => {
|
|
if (bottomOfChatRef.current) {
|
|
bottomOfChatRef.current.scrollIntoView({ behavior: "smooth" });
|
|
}
|
|
}, [conversation]);
|
|
|
|
const sendMessage = async (e) => {
|
|
// Don't send empty messages
|
|
if (message.length < 1) {
|
|
setErrorMessage("Please enter a message.");
|
|
return;
|
|
} else {
|
|
setErrorMessage("");
|
|
dispatch({
|
|
type: "SETROOM",
|
|
payload: { position: props.index, value: message },
|
|
});
|
|
}
|
|
|
|
setIsLoading(true);
|
|
|
|
// Add the message to the conversation
|
|
setConversation([
|
|
...conversation,
|
|
{ content: message, role: "user", content2: null, role2: "system" },
|
|
]);
|
|
|
|
// Clear the message & remove empty chat
|
|
setMessage("");
|
|
setShowEmptyChat(false);
|
|
|
|
try {
|
|
setGenerating(true);
|
|
const response = await sdk.chatGPT(message);
|
|
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
setGenerating(false);
|
|
|
|
// Add the message to the conversation
|
|
setConversation([
|
|
...conversation,
|
|
{
|
|
content: message,
|
|
role: "user",
|
|
content2: data.Answer,
|
|
role2: "system",
|
|
},
|
|
]);
|
|
} else {
|
|
console.error(response);
|
|
setGenerating(false);
|
|
|
|
setErrorMessage(response.statusText);
|
|
}
|
|
|
|
setIsLoading(false);
|
|
} catch (error) {
|
|
console.error(error);
|
|
setGenerating(false);
|
|
setErrorMessage(error.message);
|
|
tokenExpireError(
|
|
authDispatch,
|
|
error?.response?.data?.messsage
|
|
? error?.response?.data?.messsage
|
|
: error?.message
|
|
);
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleKeypress = (e) => {
|
|
// It's triggers by pressing the enter key
|
|
if (e.keyCode == 13 && !e.shiftKey) {
|
|
sendMessage(e);
|
|
e.preventDefault();
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className={`${
|
|
index !== currentRoom && "hidden"
|
|
} flex max-w-full flex-1 flex-col dark:bg-gray-800`}
|
|
>
|
|
<div className="sticky top-0 z-10 flex items-center border-b border-white/20 bg-gray-800 pl-1 pt-1 text-gray-200 sm:pl-3 md:hidden">
|
|
<button
|
|
type="button"
|
|
className="-ml-0.5 -mt-0.5 inline-flex h-10 w-10 items-center justify-center rounded-md hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white dark:hover:text-white"
|
|
onClick={toggleComponentVisibility}
|
|
>
|
|
<span className="sr-only">Open sidebar</span>
|
|
<RxHamburgerMenu className="h-6 w-6 text-white" />
|
|
</button>
|
|
<h1 className="flex-1 text-center text-base font-normal">New chat</h1>
|
|
<button type="button" className="px-3">
|
|
<BsPlusLg className="h-6 w-6" />
|
|
</button>
|
|
</div>
|
|
<div className="transition-width relative mx-auto flex h-full w-full flex-1 flex-col items-stretch overflow-hidden">
|
|
<div className="overflow-scroll sm:h-[700px]">
|
|
<div className="react-scroll-to-bottom--css-ikyem-79elbk dark:bg-gray-800">
|
|
<div
|
|
className={`react-scroll-to-bottom--css-ikyem-1n7m0yu ${
|
|
!showEmptyChat && conversation.length ? " sm:mt-2" : "sm:mt-20"
|
|
}`}
|
|
>
|
|
{!showEmptyChat && conversation.length > 0 ? (
|
|
<div className="flex flex-col items-center bg-gray-800 text-sm">
|
|
<Message
|
|
generating={generating}
|
|
conversation={conversation}
|
|
message={message}
|
|
genert
|
|
/>
|
|
<div className="h-32 w-full flex-shrink-0 md:h-48"></div>
|
|
<div ref={bottomOfChatRef}></div>
|
|
</div>
|
|
) : null}
|
|
{showEmptyChat ? (
|
|
<div className="relative mx-auto mb-28 h-full max-w-[90%] py-10 sm:mb-0 sm:max-w-[80%]">
|
|
<h1 className="flex items-center justify-center gap-2 text-center text-4xl font-bold text-[white]">
|
|
ChatGPT
|
|
</h1>
|
|
<div className="mt-5 items-center gap-4 sm:mt-10 sm:flex sm:flex-wrap sm:justify-center">
|
|
{homePage.map((item, index) => (
|
|
<div key={index}>
|
|
<div className="mt-4 flex items-center justify-center gap-2 sm:mt-0 sm:grid">
|
|
<span className="flex justify-center text-center text-2xl text-[white] sm:mt-4">
|
|
{item.icon}
|
|
</span>
|
|
<h3 className="text-lg text-gray-100 sm:my-3">
|
|
{item.title}
|
|
</h3>
|
|
</div>
|
|
<div className="mt-4 sm:mt-10">
|
|
{item.details.map((details, index) => (
|
|
<div
|
|
key={index}
|
|
className="mb-4 w-full rounded-md bg-gray-500 px-2 py-4 text-sm text-gray-100 sm:my-4 sm:w-[250px]"
|
|
>
|
|
{details}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
<div className="flex flex-col items-center text-sm dark:bg-gray-800"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="md:bg-vert-light-gradient dark:md:bg-vert-dark-gradient absolute bottom-0 left-0 w-full border-t bg-white pt-2 dark:border-white/20 dark:bg-gray-800 md:border-t-0 md:border-transparent md:!bg-transparent md:dark:border-transparent">
|
|
<form className="stretch mx-2 flex flex-row gap-3 last:mb-2 md:mx-4 md:last:mb-6 lg:mx-auto lg:max-w-2xl xl:max-w-3xl">
|
|
<div className="relative flex h-full flex-1 flex-col items-stretch md:flex-col">
|
|
<div className="relative flex h-[55px] w-full flex-grow items-center rounded-md border border-black/10 bg-white px-4 shadow-[0_0_10px_rgba(0,0,0,0.10)] dark:border-gray-900/50 dark:bg-gray-700 dark:text-white dark:shadow-[0_0_15px_rgba(0,0,0,0.10)]">
|
|
<textarea
|
|
// ref={textAreaRef}
|
|
value={message}
|
|
tabIndex={0}
|
|
data-id="root"
|
|
style={{
|
|
height: "24px",
|
|
maxHeight: "200px",
|
|
overflowY: "hidden",
|
|
}}
|
|
// rows={1}
|
|
placeholder="Send a message"
|
|
className="m-0 flex h-6 w-full resize-none items-center border-0 bg-transparent focus:outline-none focus:ring-0 focus-visible:ring-0 dark:bg-transparent"
|
|
onChange={(e) => setMessage(e.target.value)}
|
|
onKeyDown={handleKeypress}
|
|
/>
|
|
<button
|
|
disabled={isLoading || message?.length === 0}
|
|
onClick={() => sendMessage()}
|
|
className={`absolute right-1 rounded-md bg-green-500 bg-transparent p-1 disabled:bg-gray-500 disabled:opacity-40 md:right-2`}
|
|
>
|
|
<FiSend className="mr-1 h-4 w-4 text-white " />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
{errorMessage ? (
|
|
<div className="mb-2 md:mb-0">
|
|
<div className="ml-1 flex h-full justify-center gap-0 md:m-auto md:mb-2 md:w-full md:gap-2">
|
|
<span className="text-sm text-red-500">{errorMessage}</span>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
<div className="px-3 pb-3 pt-2 text-center text-xs text-black/50 dark:text-white/50 md:px-4 md:pb-6 md:pt-3">
|
|
<span>
|
|
ChatGPT may produce inaccurate information about people, places,
|
|
or facts.
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Chat;
|
|
|
|
|