|
| 1 | +import { useEffect, useRef, useState } from "react"; |
| 2 | +import { FiSend } from "react-icons/fi"; |
| 3 | +import { BsChevronDown, BsPlusLg } from "react-icons/bs"; |
| 4 | +import { RxHamburgerMenu } from "react-icons/rx"; |
| 5 | +import useAnalytics from "@/hooks/useAnalytics"; |
| 6 | +import useAutoResizeTextArea from "@/hooks/useAutoResizeTextArea"; |
| 7 | +import Message from "./Message"; |
| 8 | +import { DEFAULT_OPENAI_MODEL } from "@/shared/Constants"; |
| 9 | + |
| 10 | +const Chat = (props: any) => { |
| 11 | + const { toggleComponentVisibility } = props; |
| 12 | + |
| 13 | + const [isLoading, setIsLoading] = useState(false); |
| 14 | + const [errorMessage, setErrorMessage] = useState(""); |
| 15 | + const [showEmptyChat, setShowEmptyChat] = useState(true); |
| 16 | + const [conversation, setConversation] = useState<any[]>([]); |
| 17 | + const [message, setMessage] = useState(""); |
| 18 | + const { trackEvent } = useAnalytics(); |
| 19 | + const textAreaRef = useAutoResizeTextArea(); |
| 20 | + const bottomOfChatRef = useRef<HTMLDivElement>(null); |
| 21 | + |
| 22 | + const selectedModel = DEFAULT_OPENAI_MODEL; |
| 23 | + |
| 24 | + useEffect(() => { |
| 25 | + if (textAreaRef.current) { |
| 26 | + textAreaRef.current.style.height = "24px"; |
| 27 | + textAreaRef.current.style.height = `${textAreaRef.current.scrollHeight}px`; |
| 28 | + } |
| 29 | + }, [message, textAreaRef]); |
| 30 | + |
| 31 | + useEffect(() => { |
| 32 | + if (bottomOfChatRef.current) { |
| 33 | + bottomOfChatRef.current.scrollIntoView({ behavior: "smooth" }); |
| 34 | + } |
| 35 | + }, [conversation]); |
| 36 | + |
| 37 | + const sendMessage = async (e: any) => { |
| 38 | + e.preventDefault(); |
| 39 | + |
| 40 | + // Don't send empty messages |
| 41 | + if (message.length < 1) { |
| 42 | + setErrorMessage("Please enter a message."); |
| 43 | + return; |
| 44 | + } else { |
| 45 | + setErrorMessage(""); |
| 46 | + } |
| 47 | + |
| 48 | + trackEvent("send.message", { message: message }); |
| 49 | + setIsLoading(true); |
| 50 | + |
| 51 | + // Add the message to the conversation |
| 52 | + setConversation([ |
| 53 | + ...conversation, |
| 54 | + { content: message, role: "user" }, |
| 55 | + { content: null, role: "system" }, |
| 56 | + ]); |
| 57 | + |
| 58 | + // Clear the message & remove empty chat |
| 59 | + setMessage(""); |
| 60 | + setShowEmptyChat(false); |
| 61 | + |
| 62 | + try { |
| 63 | + const response = await fetch(`/api/openai`, { |
| 64 | + method: "POST", |
| 65 | + headers: { |
| 66 | + "Content-Type": "application/json", |
| 67 | + }, |
| 68 | + body: JSON.stringify({ |
| 69 | + messages: [...conversation, { content: message, role: "user" }], |
| 70 | + model: selectedModel, |
| 71 | + }), |
| 72 | + }); |
| 73 | + |
| 74 | + if (response.ok) { |
| 75 | + const data = await response.json(); |
| 76 | + |
| 77 | + // Add the message to the conversation |
| 78 | + setConversation([ |
| 79 | + ...conversation, |
| 80 | + { content: message, role: "user" }, |
| 81 | + { content: data.message, role: "system" }, |
| 82 | + ]); |
| 83 | + } else { |
| 84 | + console.error(response); |
| 85 | + setErrorMessage(response.statusText); |
| 86 | + } |
| 87 | + |
| 88 | + setIsLoading(false); |
| 89 | + } catch (error: any) { |
| 90 | + console.error(error); |
| 91 | + setErrorMessage(error.message); |
| 92 | + |
| 93 | + setIsLoading(false); |
| 94 | + } |
| 95 | + }; |
| 96 | + |
| 97 | + const handleKeypress = (e: any) => { |
| 98 | + // It's triggers by pressing the enter key |
| 99 | + if (e.keyCode == 13 && !e.shiftKey) { |
| 100 | + sendMessage(e); |
| 101 | + e.preventDefault(); |
| 102 | + } |
| 103 | + }; |
| 104 | + |
| 105 | + return ( |
| 106 | + <div className="flex max-w-full flex-1 flex-col"> |
| 107 | + <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"> |
| 108 | + <button |
| 109 | + type="button" |
| 110 | + 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" |
| 111 | + onClick={toggleComponentVisibility} |
| 112 | + > |
| 113 | + <span className="sr-only">Open sidebar</span> |
| 114 | + <RxHamburgerMenu className="h-6 w-6 text-white" /> |
| 115 | + </button> |
| 116 | + <h1 className="flex-1 text-center text-base font-normal">New chat</h1> |
| 117 | + <button type="button" className="px-3"> |
| 118 | + <BsPlusLg className="h-6 w-6" /> |
| 119 | + </button> |
| 120 | + </div> |
| 121 | + <div className="relative h-full w-full transition-width flex flex-col overflow-hidden items-stretch flex-1"> |
| 122 | + <div className="flex-1 overflow-hidden"> |
| 123 | + <div className="react-scroll-to-bottom--css-ikyem-79elbk h-full dark:bg-gray-800"> |
| 124 | + <div className="react-scroll-to-bottom--css-ikyem-1n7m0yu"> |
| 125 | + {!showEmptyChat && conversation.length > 0 ? ( |
| 126 | + <div className="flex flex-col items-center text-sm bg-gray-800"> |
| 127 | + <div className="flex w-full items-center justify-center gap-1 border-b border-black/10 bg-gray-50 p-3 text-gray-500 dark:border-gray-900/50 dark:bg-gray-700 dark:text-gray-300"> |
| 128 | + Model: {selectedModel.name} |
| 129 | + </div> |
| 130 | + {conversation.map((message, index) => ( |
| 131 | + <Message key={index} message={message} /> |
| 132 | + ))} |
| 133 | + <div className="w-full h-32 md:h-48 flex-shrink-0"></div> |
| 134 | + <div ref={bottomOfChatRef}></div> |
| 135 | + </div> |
| 136 | + ) : null} |
| 137 | + {showEmptyChat ? ( |
| 138 | + <div className="py-10 relative w-full flex flex-col h-full"> |
| 139 | + <div className="flex items-center justify-center gap-2"> |
| 140 | + <div className="relative w-full md:w-1/2 lg:w-1/3 xl:w-1/4"> |
| 141 | + <button |
| 142 | + className="relative flex w-full cursor-default flex-col rounded-md border border-black/10 bg-white py-2 pl-3 pr-10 text-left focus:border-gray-400 focus:outline-none focus:ring-1 focus:ring-gray-400 dark:border-white/20 dark:bg-gray-800 sm:text-sm align-center" |
| 143 | + id="headlessui-listbox-button-:r0:" |
| 144 | + type="button" |
| 145 | + aria-haspopup="true" |
| 146 | + aria-expanded="false" |
| 147 | + data-headlessui-state="" |
| 148 | + aria-labelledby="headlessui-listbox-label-:r1: headlessui-listbox-button-:r0:" |
| 149 | + > |
| 150 | + <label |
| 151 | + className="block text-xs text-gray-700 dark:text-gray-500 text-center" |
| 152 | + id="headlessui-listbox-label-:r1:" |
| 153 | + data-headlessui-state="" |
| 154 | + > |
| 155 | + Model |
| 156 | + </label> |
| 157 | + <span className="inline-flex w-full truncate"> |
| 158 | + <span className="flex h-6 items-center gap-1 truncate text-white"> |
| 159 | + {selectedModel.name} |
| 160 | + </span> |
| 161 | + </span> |
| 162 | + <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"> |
| 163 | + <BsChevronDown className="h-4 w-4 text-gray-400" /> |
| 164 | + </span> |
| 165 | + </button> |
| 166 | + </div> |
| 167 | + </div> |
| 168 | + <h1 className="text-2xl sm:text-4xl font-semibold text-center text-gray-200 dark:text-gray-600 flex gap-2 items-center justify-center h-screen"> |
| 169 | + ChatGPT Clone |
| 170 | + </h1> |
| 171 | + </div> |
| 172 | + ) : null} |
| 173 | + <div className="flex flex-col items-center text-sm dark:bg-gray-800"></div> |
| 174 | + </div> |
| 175 | + </div> |
| 176 | + </div> |
| 177 | + <div className="absolute bottom-0 left-0 w-full border-t md:border-t-0 dark:border-white/20 md:border-transparent md:dark:border-transparent md:bg-vert-light-gradient bg-white dark:bg-gray-800 md:!bg-transparent dark:md:bg-vert-dark-gradient pt-2"> |
| 178 | + <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"> |
| 179 | + <div className="relative flex flex-col h-full flex-1 items-stretch md:flex-col"> |
| 180 | + {errorMessage ? ( |
| 181 | + <div className="mb-2 md:mb-0"> |
| 182 | + <div className="h-full flex ml-1 md:w-full md:m-auto md:mb-2 gap-0 md:gap-2 justify-center"> |
| 183 | + <span className="text-red-500 text-sm">{errorMessage}</span> |
| 184 | + </div> |
| 185 | + </div> |
| 186 | + ) : null} |
| 187 | + <div className="flex flex-col w-full py-2 flex-grow md:py-3 md:pl-4 relative border border-black/10 bg-white dark:border-gray-900/50 dark:text-white dark:bg-gray-700 rounded-md shadow-[0_0_10px_rgba(0,0,0,0.10)] dark:shadow-[0_0_15px_rgba(0,0,0,0.10)]"> |
| 188 | + <textarea |
| 189 | + ref={textAreaRef} |
| 190 | + value={message} |
| 191 | + tabIndex={0} |
| 192 | + data-id="root" |
| 193 | + style={{ |
| 194 | + height: "24px", |
| 195 | + maxHeight: "200px", |
| 196 | + overflowY: "hidden", |
| 197 | + }} |
| 198 | + // rows={1} |
| 199 | + placeholder="Send a message..." |
| 200 | + className="m-0 w-full resize-none border-0 bg-transparent p-0 pr-7 focus:ring-0 focus-visible:ring-0 dark:bg-transparent pl-2 md:pl-0" |
| 201 | + onChange={(e) => setMessage(e.target.value)} |
| 202 | + onKeyDown={handleKeypress} |
| 203 | + ></textarea> |
| 204 | + <button |
| 205 | + disabled={isLoading || message?.length === 0} |
| 206 | + onClick={sendMessage} |
| 207 | + className="absolute p-1 rounded-md bottom-1.5 md:bottom-2.5 bg-transparent disabled:bg-gray-500 right-1 md:right-2 disabled:opacity-40" |
| 208 | + > |
| 209 | + <FiSend className="h-4 w-4 mr-1 text-white " /> |
| 210 | + </button> |
| 211 | + </div> |
| 212 | + </div> |
| 213 | + </form> |
| 214 | + <div className="px-3 pt-2 pb-3 text-center text-xs text-black/50 dark:text-white/50 md:px-4 md:pt-3 md:pb-6"> |
| 215 | + <span> |
| 216 | + ChatGPT Clone may produce inaccurate information about people, |
| 217 | + places, or facts. |
| 218 | + </span> |
| 219 | + </div> |
| 220 | + </div> |
| 221 | + </div> |
| 222 | + </div> |
| 223 | + ); |
| 224 | +}; |
| 225 | + |
| 226 | +export default Chat; |
0 commit comments