fix: move button to bottom

src/App.tsx

@@ -19,7 +19,7 @@ export const QuickGpt = () => {
 
       {shouldDisplayGptResponse && <GptResponse />}
       {shouldDisplaySettings && <Settings />}
-      {gptResponseError && <ErrorMessage />}
+      {gptResponseError && <ErrorMessage error={gptResponseError} />}
     </div>
   );
 }

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 <ResultLayout>
-        Error: {gptErrorResponse}
+        Error: {error}
         <br />
         Check your API key typing <strong>:settings:</strong> in the input box.
     </ResultLayout>

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 <ResultLayout>
         <ReactMarkdown children={gptResponse} className={styles.response}
@@ -28,6 +40,11 @@ export const GptResponse = () => {
 
                 }
             }} />
+        {
+            loadingResponse
+                ? <button className={styles.clearButton}>Loading...</button>
+                : <button onClick={handleClear} className={styles.clearButton}>Clear</button>
+        }
     </ResultLayout>
 
 };

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<HTMLInputElement>) => {
         setInput(event.target.value);
     }
 
-    const handleClear = () => {
-        setInput("");
-        setGptResponse("");
-    }
-
     const handleKeyDown = async (event: React.KeyboardEvent<HTMLInputElement>) => {
         if (event.key === "Enter") {
             askGpt(input)
@@ -33,7 +26,5 @@ export const InputBox = () => {
             className={styles.inputBox}
             value={input}
         />
-        {loadingResponse ? <button>Loading...</button>
-            : <button onClick={handleClear}>Clear</button>}
     </div>
 }

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;
+}

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;
-}