feat: complete day 20 react task
This commit is contained in:
Ayobami
@@ -0,0 +1,233 @@
|
||||
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;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user