fix: ui improvements

Author: dubisdev

src/components/GptResponse.tsx

@@ -5,8 +5,10 @@ import a11yDark from 'react-syntax-highlighter/dist/esm/styles/prism/a11y-dark'
 import styles from "./gptresponse.module.css"
 import { ResultLayout } from "./ResultLayout";
 import { getCurrent } from "@tauri-apps/api/window";
+import { useRef } from "react";
 
 export const GptResponse = () => {
+    const responseEndRef = useRef<HTMLDivElement>(null)
     const [gptResponse, setGptResponse, loadingResponse] = useGptResponseStore(s => [
         s.gptResponse,
         s.setGptResponse,
@@ -18,7 +20,14 @@ export const GptResponse = () => {
         getCurrent().emit("set-input", "");
     }
 
+    const scrollToBottom = () => {
+        responseEndRef.current?.scrollIntoView({ behavior: "smooth" })
+    }
+
+    scrollToBottom()
+
     return <ResultLayout>
+
         <ReactMarkdown children={gptResponse} className={styles.response}
             components={{
                 code({ node, inline, className, children, ...props }) {
@@ -38,11 +47,8 @@ export const GptResponse = () => {
 
                 }
             }} />
-        {
-            loadingResponse
-                ? <button className={styles.clearButton}>Loading...</button>
-                : <button onClick={handleClear} className={styles.clearButton}>Clear</button>
-        }
+        {!loadingResponse && <button onClick={handleClear} className={styles.clearButton}>Clear</button>}
+        <div ref={responseEndRef}></div>
     </ResultLayout>
 
 };

src/components/Settings.tsx

@@ -8,7 +8,7 @@ export const Settings = () => {
             <h2 className={styles.title}>QuickGTP Settings</h2>
             <section className={styles.options}>
                 <label>
-                    Model (only one available for now):
+                    Model:
                     <input defaultValue={settingsManager.getCache("model")} disabled />
                 </label>
                 <label>

src/components/gptresponse.module.css

@@ -54,6 +54,16 @@
     margin: 5px 0;
 }
 
+.response>p>code,
+.response>pre>code {
+    font-family: monospace;
+    font-size: medium;
+    font-weight: 600;
+    background-color: rgb(192, 212, 255);
+    border-radius: 5px;
+    padding: 1px 4px;
+}
+
 .clearButton {
     color: white;
     background-color: rgba(21, 21, 21, 0.875);

src/components/inputbox.module.css

@@ -1,12 +1,13 @@
 .topArea {
     display: flex;
-    background-color: rgb(255, 255, 255, 0.5);
+    background-color: rgb(39, 43, 84);
     padding: 2px 12px;
     height: 40px;
     width: 100%;
-    border-bottom: .5px solid rgb(104, 101, 101);
+    border-bottom: .5px solid rgb(29, 28, 28);
     justify-content: space-between;
     align-items: center;
+    color: white;
 }
 
 .inputBox {
@@ -16,7 +17,7 @@
 }
 
 .inputBox:placeholder-shown {
-    color: gray;
+    color: rgb(186, 186, 186);
 }
 
 .settingsIcon {

src/components/loadingicon.module.css

@@ -13,10 +13,10 @@
     position: absolute;
     width: 20px;
     height: 20px;
-    border: 2px solid black;
+    border: 2px solid rgb(255, 255, 255);
     border-radius: 50%;
     animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
-    border-color: black transparent transparent transparent;
+    border-color: white transparent transparent transparent;
 }
 
 .loadingIcon div:nth-child(1) {

src/components/settings.module.css

@@ -23,7 +23,6 @@
     gap: 1rem;
     font-size: large;
     font-weight: 500;
-    background-color: rgb(255, 255, 255);
     border-radius: 5px;
     padding: 10px 4px;
 }

src/styles.module.css

@@ -1,6 +1,7 @@
 .container {
-    background-color: rgb(192, 192, 192);
+    background-color: rgb(248, 248, 248);
     border-radius: 8px;
+    border: 0.25px solid black;
     height: 100%;
     overflow: hidden;
 }