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