diff --git a/src/App.tsx b/src/App.tsx index c0cd59a..95a423a 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -19,7 +19,7 @@ export const QuickGpt = () => { {shouldDisplayGptResponse && } {shouldDisplaySettings && } - {gptResponseError && } + {gptResponseError && } ); } diff --git a/src/components/ErrorMessage.tsx b/src/components/ErrorMessage.tsx index a1b8fb7..840aad6 100644 --- a/src/components/ErrorMessage.tsx +++ b/src/components/ErrorMessage.tsx @@ -1,11 +1,8 @@ -import { useGptResponseStore } from "../state/gptResponseStore" import { ResultLayout } from "./ResultLayout" -export const ErrorMessage = () => { - const gptErrorResponse = useGptResponseStore(s => s.error) - +export const ErrorMessage = ({ error }: { error: string }) => { return - Error: {gptErrorResponse} + Error: {error}
Check your API key typing :settings: in the input box.
diff --git a/src/components/GptResponse.tsx b/src/components/GptResponse.tsx index b6a718a..969e16d 100644 --- a/src/components/GptResponse.tsx +++ b/src/components/GptResponse.tsx @@ -4,9 +4,21 @@ import { Prism } from 'react-syntax-highlighter' import a11yDark from 'react-syntax-highlighter/dist/esm/styles/prism/a11y-dark' import styles from "./gptresponse.module.css" import { ResultLayout } from "./ResultLayout"; +import { useInputStore } from "../state/inputStore"; export const GptResponse = () => { - const gptResponse = useGptResponseStore(state => state.gptResponse) + const setInput = useInputStore(s => s.setInput) + + const [gptResponse, setGptResponse, loadingResponse] = useGptResponseStore(s => [ + s.gptResponse, + s.setGptResponse, + s.loadingResponse + ]) + + const handleClear = () => { + setInput(""); + setGptResponse(""); + } return { } }} /> + { + loadingResponse + ? + : + } }; diff --git a/src/components/InputBox.tsx b/src/components/InputBox.tsx index 664b665..2f13653 100644 --- a/src/components/InputBox.tsx +++ b/src/components/InputBox.tsx @@ -1,21 +1,14 @@ import { askGpt } from "../services/askGpt" -import { useGptResponseStore } from "../state/gptResponseStore" import { useInputStore } from "../state/inputStore" import styles from "./inputbox.module.css" export const InputBox = () => { const [input, setInput] = useInputStore(s => [s.input, s.setInput]) - const [setGptResponse, loadingResponse] = useGptResponseStore(s => [s.setGptResponse, s.loadingResponse]) const handleChange = (event: React.ChangeEvent) => { setInput(event.target.value); } - const handleClear = () => { - setInput(""); - setGptResponse(""); - } - const handleKeyDown = async (event: React.KeyboardEvent) => { if (event.key === "Enter") { askGpt(input) @@ -33,7 +26,5 @@ export const InputBox = () => { className={styles.inputBox} value={input} /> - {loadingResponse ? - : } } diff --git a/src/components/gptresponse.module.css b/src/components/gptresponse.module.css index 28331c9..f72f405 100644 --- a/src/components/gptresponse.module.css +++ b/src/components/gptresponse.module.css @@ -1,6 +1,7 @@ .response { padding: 4px 8px; font-size: medium; + margin-bottom: 20px; } .reponse h1, @@ -52,3 +53,17 @@ font-weight: 400; margin: 5px 0; } + +.clearButton { + color: white; + background-color: rgba(21, 21, 21, 0.875); + border: none; + cursor: pointer; + border-radius: 5px; + padding: 4px 8px; + font-size: large; + font-weight: 600; + position: fixed; + bottom: 10px; + right: 10px; +} diff --git a/src/components/inputbox.module.css b/src/components/inputbox.module.css index f1dedd1..fac10f9 100644 --- a/src/components/inputbox.module.css +++ b/src/components/inputbox.module.css @@ -17,14 +17,3 @@ .inputBox:placeholder-shown { color: gray; } - -button { - color: white; - background-color: rgba(21, 21, 21, 0.875); - border: none; - cursor: pointer; - border-radius: 5px; - padding: 4px 8px; - font-size: large; - font-weight: 600; -}