fix: improve API response handling and update UI styles (#7)

Eyevinn · Dec 10, 2024 · 532ce2d · 532ce2d
1 parent 276c245
commit 532ce2d
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 23 deletions.
diff --git a/src/api_service.ts b/src/api_service.ts
@@ -36,12 +36,12 @@ const apiService: FastifyPluginCallback<ApiServiceOptions> = (
         { role: 'user', content: userMessage }
       ]
     });
-
     if (chatCompletion.choices[0].message.content) {
-      const content = JSON.parse(chatCompletion.choices[0].message.content);
-      return reply.send(content.assistantMessage);
+      const content = chatCompletion.choices[0].message.content;
+
+      return reply.send(content);
     }
-    return reply.send('empty response');
+    return reply.send('I am sorry, I do not understand.');
   }
 
   next();

diff --git a/src/app/globals.css b/src/app/globals.css
@@ -3,8 +3,9 @@
 @tailwind utilities;
 
 :root {
-  --background: transparent;
-  --foreground: #ededed;
+  --background: #282c35;
+  --foreground: transparent;
+  --borderradius: 20px;
 }
 
 body {
@@ -18,18 +19,10 @@ body {
     text-wrap: balance;
   }
 }
-.glassmorphism {
-  background: linear-gradient(from left, right, to right-d, #51259dff, #00bcd4);
-  backdrop-filter: blur(7px);
-  border: 2px solid rgba(205, 118, 205, 0.2);
-  border-radius: 10px;
-}
+
 .gradient-text {
   background: linear-gradient(to right, rgb(140, 96, 214), #00bcd4);
   -webkit-text-fill-color: transparent;
   background-clip: text;
   -webkit-background-clip: text;
 }
-.gradient-bg {
-  background: linear-gradient(to bottom, right, to right, #7e57c2, #00bcd4);
-}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,4 +1,5 @@
 import './globals.css';
+
 import { Providers } from './providers';
 
 export default function RootLayout({
@@ -7,8 +8,8 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en" className="w-screen h-screen bg-transparent">
-      <body className={`antialiased dark text-foreground `}>
+    <html lang="en">
+      <body className="antialiased text-foreground background">
         <Providers>{children}</Providers>
       </body>
     </html>

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -25,6 +25,7 @@ export default function Page() {
         method: 'POST',
         body: JSON.stringify({ userMessage: input })
       });
+      setInput('');
       if (response.ok) {
         setResponse(await response.text());
       }
@@ -35,9 +36,9 @@ export default function Page() {
   };
 
   return (
-    <div className="w-screen h-screen glassmorphism ">
-      <Card radius="none" className="w-full h-full bg-transparent">
-        <div className=" flex">
+    <div className="w-screen h-screen">
+      <Card radius="none" className="w-full h-full  bg-transparent">
+        <div className="flex">
           <Button isIconOnly className="bg-transparen">
             <IconTrash color="purple" size={24} />
           </Button>
@@ -46,10 +47,12 @@ export default function Page() {
           </CardHeader>
         </div>
         <Spacer y={1} />
-        <CardBody className="flex-grow text-white font-bold p-3">
+        <CardBody className="flex-grow dark:text-white light:text-purple-600 font-bold ">
           {loading && <p>Loading...</p>}
           {error && <p>{error}</p>}
-          {response && <p>{response}</p>}
+          <div className="m-4">
+            {response && <p className="flex-shrink m-5  ">{response}</p>}
+          </div>
         </CardBody>
         <div className="flex flex-grow items-center p-3 overflow-scroll">
           <Textarea
@@ -62,8 +65,11 @@ export default function Page() {
           />
           <Button
             onClick={fetchChatCompletion}
+            isDisabled={loading}
             isIconOnly
-            className="bg-secondary py-1  mr-0 mb-2 ml-2 h-[30px] w-[32px] rounded-full"
+            isLoading={loading}
+            color={loading ? 'default' : 'secondary'}
+            className="py-1  mr-0 mb-2 ml-2 h-[30px] w-[32px] rounded-full"
           >
             <IconArrowUp color="gray" size={30} stroke={3} />
           </Button>