fix: correct dotenv import and enhance error handling for OpenAI API key

feat: implement chat functionality in api_service and update API routes

src/api.ts

@@ -6,10 +6,8 @@ import { TypeBoxTypeProvider } from '@fastify/type-provider-typebox';
 import { Static, Type } from '@sinclair/typebox';
 import { FastifyPluginCallback } from 'fastify';
 import apiService from './api_service';
-
-import { OpenAI } from 'openai';
-import dotenv from 'dotenv';
-dotenv.config();
+import dotnev from 'dotenv';
+dotnev.config();
 
 const HelloWorld = Type.String({
   description: 'The magical words!'
@@ -40,42 +38,7 @@ const healthcheck: FastifyPluginCallback<HealthcheckOptions> = (
   );
   next();
 };
-const aiMassage: FastifyPluginCallback = (fastify, opts, next) => {
-  async function chat(reply: any, userMessage: string) {
-    const openai = process.env.OPENAI_API_KEY as string;
-    if (!openai) {
-      throw new Error(
-        'The OPENAI_API_KEY environment variable is missing or empty; either provide it, or instantiate the OpenAI client with an apiKey option, like new OpenAI({ apiKey: "My API Key" }).'
-      );
-    }
-    const client = new OpenAI({ apiKey: openai });
-    reply.raw.setHeader('Content-Type', 'text/event-stream');
-    reply.raw.setHeader('Cache-Control', 'no-cache');
-    reply.raw.setHeader('Connection', 'keep-alive');
 
-    const chatCompletion = await client.chat.completions.create({
-      model: 'gpt-4',
-      messages: [
-        { role: 'system', content: 'You are a helpful assistant.' },
-        {
-          role: 'assistant',
-          content: [{ type: 'text', text: "Who's there?" }]
-        },
-        { role: 'user', content: userMessage }
-      ]
-    });
-
-    return reply.send(chatCompletion.choices[0].message.content);
-  }
-  fastify.get('/chat', async (_, reply) => {
-    await chat(reply, 'Hello');
-  });
-  fastify.post('/chat/message', async (request, reply) => {
-    const userMessage = request.body as string;
-    await chat(reply, userMessage);
-  });
-  next();
-};
 export interface ApiOptions {
   title: string;
 }
@@ -104,10 +67,12 @@ export default (opts: ApiOptions) => {
 
   api.register(healthcheck, { prefix: '/api', title: opts.title });
   // register other API routes here
-  api.register(aiMassage);
+  console.log('process.env.OPENAI_API_KEY', process.env.OPENAI_API_KEY);
 
   if (!process.env.OPENAI_API_KEY) {
-    throw new Error('OPENAI_API_KEY is required');
+    throw new Error(
+      'The OPENAI_API_KEY environment variable is missing or empty; either provide it, or instantiate the OpenAI client with an apiKey option, like new OpenAI({ apiKey: "My API Key" }).'
+    );
   }
   api.register(apiService, {
     prefix: '/api/v1',

src/api_service.ts

@@ -1,4 +1,5 @@
-import { FastifyPluginCallback } from 'fastify';
+import { FastifyPluginCallback, FastifyReply } from 'fastify';
+import OpenAI from 'openai';
 
 export interface ApiServiceOptions {
   openAiApiKey: string;
@@ -9,11 +10,33 @@ const apiService: FastifyPluginCallback<ApiServiceOptions> = (
   opts,
   next
 ) => {
+  fastify.post('/message', async (request, reply) => {
+    console.log('request.body', request.body);
+    const userMessage = request.body as string;
+    await chat(reply, userMessage);
+  });
   fastify.setErrorHandler((error, request, reply) => {
     reply.code(500).send({ reason: error.message });
   });
 
-  // Insert routes here
+  async function chat(reply: FastifyReply, userMessage: string) {
+    const openai = opts.openAiApiKey;
+
+    const client = new OpenAI({ apiKey: openai });
+    reply.raw.setHeader('Content-Type', 'text/event-stream');
+    reply.raw.setHeader('Cache-Control', 'no-cache');
+    reply.raw.setHeader('Connection', 'keep-alive');
+
+    const chatCompletion = await client.chat.completions.create({
+      model: 'gpt-4',
+      messages: [
+        { role: 'system', content: 'You are a helpful assistant.' },
+        { role: 'user', content: userMessage }
+      ]
+    });
+
+    return reply.send(chatCompletion.choices[0].message.content);
+  }
 
   next();
 };

src/app/globals.css

@@ -3,7 +3,7 @@
 @tailwind utilities;
 
 :root {
-  --background: #0a0a0a;
+  --background: transparent;
   --foreground: #ededed;
 }
 
@@ -18,3 +18,16 @@ body {
     text-wrap: balance;
   }
 }
+.glassmorphism {
+  background: linear-gradient(to bottom, right, to right, #7e57c2, #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;
+}
+.gradient-bg {
+  background: linear-gradient(to bottom, right, to right, #7e57c2, #00bcd4);
+}

src/app/layout.tsx

@@ -7,8 +7,8 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
-      <body className={`antialiased dark text-foreground bg-background`}>
+    <html lang="en" className="w-screen h-screen bg-transparent">
+      <body className={`antialiased dark text-foreground `}>
         <Providers>{children}</Providers>
       </body>
     </html>

src/app/page.tsx

@@ -4,12 +4,14 @@ import { Card, CardHeader, CardBody } from '@nextui-org/card';
 import { Button, Spacer } from '@nextui-org/react';
 import { IconArrowUp, IconTrash } from '@tabler/icons-react';
 import { Textarea } from '@nextui-org/input';
+import { useApiUrl } from '@/hooks/useApiUrl';
 
 export default function Page() {
   const [response, setResponse] = useState('');
   const [loading, setLoading] = useState(false);
   const [input, setInput] = useState('');
   const [error, setError] = useState('');
+  const url = useApiUrl();
 
   const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
     setInput(event.target.value);
@@ -19,7 +21,7 @@ export default function Page() {
     setLoading(true);
 
     try {
-      const response = await fetch('http://localhost:8000/chat/message', {
+      const response = await fetch(`${url}/message`, {
         method: 'POST',
         body: JSON.stringify({ userMessage: input })
       });
@@ -34,27 +36,28 @@ export default function Page() {
   };
 
   return (
-    <div className=" w-screen h-screen glassmorphism">
-      <Card className="w-full h-full fixed py-2 bg-transparent  ">
+    <div className="w-screen h-screen glassmorphism">
+      <Card radius="none" className=" bg-transparent w-full h-full">
         <div className=" flex">
-          <Button className=" bg-transparent " isIconOnly>
-            <IconTrash color="gray" size={24} />
+          <Button isIconOnly className="bg-transparen">
+            <IconTrash color="purple" size={24} />
           </Button>
-          <CardHeader className="text-center fonst-bold text-white">
-            Chat with AI
+          <CardHeader className="text-center  gradient-text font-extrabold">
+            Chat-Agent by Eyevinn Technology OSC
           </CardHeader>
         </div>
-        <Spacer y={10} />
-        <CardBody className="flex-grow text-white font-bold">
+        <Spacer y={1} />
+        <CardBody className="flex-grow text-white font-bold p-3">
           {loading && <p>Loading...</p>}
           {error && <p>{error}</p>}
           {response && <p>{response}</p>}
         </CardBody>
-        <div className="flex bg-gray-200 flex-grow items-center p-2 overflow-scroll">
+        <div className="flex flex-grow items-center p-3 overflow-scroll">
           <Textarea
+            value={input}
             onChange={handleInputChange}
             type="text"
-            placeholder="Type your question..."
+            placeholder="Ask me anything"
             minRows={1}
             maxRows={4}
           />
@@ -63,7 +66,7 @@ export default function Page() {
             isIconOnly
             className="bg-secondary py-1  mr-0 mb-2 ml-2 h-[30px] w-[32px] rounded-full"
           >
-            <IconArrowUp size={30} stroke={3} />
+            <IconArrowUp color="gray" size={30} stroke={3} />
           </Button>
         </div>
       </Card>