format and fix build

.gitignore

@@ -28,6 +28,7 @@ yarn-error.log*
 
 # local env files
 .env*.local
+.env*
 
 # vercel
 .vercel

README.md

@@ -15,9 +15,11 @@ Run the development server:
 ```bash
 pnpm dev
 ```
+
 Run a snyk scan localy
 If snyk is configure do a local snyk test
 Setup Instruction: [Here](https://docs.snyk.io/snyk-cli/install-or-update-the-snyk-cli)
+
 ```bash
 snyk test
 ```

package.json

@@ -1,7 +1,6 @@
 {
   "name": "website",
   "version": "0.1.0",
-  "type": "module",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -28,8 +27,6 @@
     "axios": "^1.7.5",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
-    "dompurify": "^3.2.3",
-    "force": "^0.0.3",
     "isomorphic-dompurify": "^2.20.0",
     "lodash-es": "^4.17.21",
     "lucide-react": "^0.383.0",
@@ -39,7 +36,6 @@
     "openai": "^4.78.1",
     "react": "^18",
     "react-dom": "^18",
-    "react-query": "^3.39.3",
     "react-quill": "^2.0.0",
     "swiper": "^11.1.4",
     "tailwind-merge": "^2.3.0",

src/app/api/chat/ai.ts

@@ -1,10 +1,15 @@
-import { ChatMessage } from "@/interface";
-import  { AzureOpenAI } from "openai";
+import { ChatMessage } from "@/models/XploresAI";
+import { AzureOpenAI } from "openai";
+
 export const callAzureOpenAI = async (messages: ChatMessage[]) => {
   const endpoint = process.env.AZURE_OPENAI_ENDPOINT;
   const apiKey = process.env.AZURE_OPENAI_API_KEY;
   const apiVersion = process.env.AZURE_OPENAI_VERSION;
 
+  if (!endpoint || !apiKey || !apiVersion) {
+    throw new Error("Missing required Azure OpenAI configuration");
+  }
+
   const client = new AzureOpenAI({
     endpoint,
     apiKey,

src/components/layout/footer.tsx

@@ -29,7 +29,7 @@ const SocialLink = ({
 
 const Footer = React.memo(() => {
   return (
-    <footer className="z-20 mt-auto bg-[#283E70] p-10">
+    <footer className="mt-auto bg-[#283E70] p-10">
       <div className="container mx-auto">
         <div className="flex flex-wrap items-center justify-center gap-1 text-center md:justify-between">
           <div>

src/context/XplorersAIContext.tsx → src/components/shared/XplorersAIContextProvider.tsx

@@ -1,18 +1,10 @@
 "use client";
-import React, {
-  ChangeEvent,
-  createContext,
-  useContext,
-  useRef,
-  useState,
-  MouseEvent,
-} from "react";
-import { ChatMessage, FileUploadEvent, XploresAIType } from "@/interface";
+import React, { ChangeEvent, useRef, useState, MouseEvent } from "react";
 import { callAzureOpenAI } from "@/app/api/chat/ai";
+import { ChatMessage, FileUploadEvent } from "@/models/XploresAI";
+import { XplorersAIContext } from "@/context/XplorersAIContext";
 
-const XplorersAIContext = createContext<XploresAIType | undefined>(undefined);
-
-export const XplorersAIContextProvider: React.FC<{
+const XplorersAIContextProvider: React.FC<{
   children: React.ReactNode;
 }> = ({ children }) => {
   const [value, setValue] = useState<string>("");
@@ -34,7 +26,7 @@ export const XplorersAIContextProvider: React.FC<{
   const handleFileUpload = (e: FileUploadEvent) => {
     const file = e.target.files ? e.target.files[0] : null;
     if (file) {
-      console.log("File uploaded:", file);
+      console.debug("File uploaded:", file);
     }
   };
   const handleSubmit = async (e: MouseEvent<HTMLButtonElement>) => {
@@ -64,7 +56,7 @@ export const XplorersAIContextProvider: React.FC<{
 
       setLoading(false);
     } catch (error) {
-      console.log("AI Call Failed", error);
+      console.debug("AI Call Failed", error);
     }
   };
 
@@ -86,13 +78,4 @@ export const XplorersAIContextProvider: React.FC<{
   );
 };
 
-// Custom Hook to Access Context
-export const useXplorersAIContext = () => {
-  const context = useContext(XplorersAIContext);
-  if (!context) {
-    throw new Error(
-      "useXplorersAIContext must be used within XplorersAIContextProvider",
-    );
-  }
-  return context;
-};
+export default XplorersAIContextProvider;

src/components/ui/accordion.tsx

@@ -1,12 +1,12 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as AccordionPrimitive from "@radix-ui/react-accordion"
-import { ChevronDown } from "lucide-react"
+import * as React from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDown } from "lucide-react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
-const Accordion = AccordionPrimitive.Root
+const Accordion = AccordionPrimitive.Root;
 
 const AccordionItem = React.forwardRef<
   React.ElementRef<typeof AccordionPrimitive.Item>,
@@ -17,8 +17,8 @@ const AccordionItem = React.forwardRef<
     className={cn("border-b", className)}
     {...props}
   />
-))
-AccordionItem.displayName = "AccordionItem"
+));
+AccordionItem.displayName = "AccordionItem";
 
 const AccordionTrigger = React.forwardRef<
   React.ElementRef<typeof AccordionPrimitive.Trigger>,
@@ -29,16 +29,16 @@ const AccordionTrigger = React.forwardRef<
       ref={ref}
       className={cn(
         "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
-        className
+        className,
       )}
       {...props}
     >
       {children}
       <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
     </AccordionPrimitive.Trigger>
   </AccordionPrimitive.Header>
-))
-AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
 
 const AccordionContent = React.forwardRef<
   React.ElementRef<typeof AccordionPrimitive.Content>,
@@ -51,8 +51,8 @@ const AccordionContent = React.forwardRef<
   >
     <div className={cn("pb-4 pt-0", className)}>{children}</div>
   </AccordionPrimitive.Content>
-))
+));
 
-AccordionContent.displayName = AccordionPrimitive.Content.displayName
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
 
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

src/components/ui/card.tsx

@@ -1,6 +1,6 @@
-import * as React from "react"
+import * as React from "react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const Card = React.forwardRef<
   HTMLDivElement,
@@ -10,12 +10,12 @@ const Card = React.forwardRef<
     ref={ref}
     className={cn(
       "rounded-lg border border-slate-200 bg-white text-slate-950 shadow-sm dark:border-slate-800 dark:bg-slate-950 dark:text-slate-50",
-      className
+      className,
     )}
     {...props}
   />
-))
-Card.displayName = "Card"
+));
+Card.displayName = "Card";
 
 const CardHeader = React.forwardRef<
   HTMLDivElement,
@@ -26,8 +26,8 @@ const CardHeader = React.forwardRef<
     className={cn("flex flex-col space-y-1.5 p-6", className)}
     {...props}
   />
-))
-CardHeader.displayName = "CardHeader"
+));
+CardHeader.displayName = "CardHeader";
 
 const CardTitle = React.forwardRef<
   HTMLParagraphElement,
@@ -37,12 +37,12 @@ const CardTitle = React.forwardRef<
     ref={ref}
     className={cn(
       "text-2xl font-semibold leading-none tracking-tight",
-      className
+      className,
     )}
     {...props}
   />
-))
-CardTitle.displayName = "CardTitle"
+));
+CardTitle.displayName = "CardTitle";
 
 const CardDescription = React.forwardRef<
   HTMLParagraphElement,
@@ -53,16 +53,16 @@ const CardDescription = React.forwardRef<
     className={cn("text-sm text-slate-500 dark:text-slate-400", className)}
     {...props}
   />
-))
-CardDescription.displayName = "CardDescription"
+));
+CardDescription.displayName = "CardDescription";
 
 const CardContent = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
   <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
-))
-CardContent.displayName = "CardContent"
+));
+CardContent.displayName = "CardContent";
 
 const CardFooter = React.forwardRef<
   HTMLDivElement,
@@ -73,7 +73,14 @@ const CardFooter = React.forwardRef<
     className={cn("flex items-center p-6 pt-0", className)}
     {...props}
   />
-))
-CardFooter.displayName = "CardFooter"
+));
+CardFooter.displayName = "CardFooter";
 
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  CardContent,
+};

src/constants/links.ts

@@ -7,7 +7,7 @@ export const slackLink = "https://xplorers-io.slack.com/";
 
 //Xplorers AI Constants
 
-export const XPLORERS_AI_LOGO =
+export const xplorersAiLogo =
   "https://res.cloudinary.com/dumkkicev/image/upload/v1733812951/xplorers-ai/koo5k69yxpmaxqg21v5m.png";
-export const XPLORERS_AI_BACKGROUND =
+export const xplorersAiBackground =
   "https://res.cloudinary.com/dumkkicev/image/upload/v1732681551/xplorers-ai/yo0qwmjllhczcf4ywpri.jpg";

src/context/XplorersAIContext.ts

@@ -0,0 +1,19 @@
+"use client";
+
+import React, { createContext, useContext } from "react";
+import { XploresAIType } from "@/models/XploresAI";
+
+export const XplorersAIContext = createContext<XploresAIType | undefined>(
+  undefined,
+);
+
+// Custom Hook to Access Context
+export const useXplorersAIContext = () => {
+  const context = useContext(XplorersAIContext);
+  if (!context) {
+    throw new Error(
+      "useXplorersAIContext must be used within XplorersAIContextProvider",
+    );
+  }
+  return context;
+};

src/interface.ts → src/models/XploresAI.ts

@@ -16,6 +16,7 @@ export interface XplorersAIChatBoxProps {
 export interface FileUploadEvent extends ChangeEvent<HTMLInputElement> {
   target: HTMLInputElement;
 }
+
 export interface ChatMessage {
   role: "user" | "system";
   content: string;

src/modules/xplorers-ai/xplorersAIBody.tsx

@@ -2,20 +2,19 @@
 
 import XplorersAISearch from "./xplorersAISearch";
 import XplorersAIChatBox from "./xplorersAIChatBox";
-import { ChangeEvent } from "react";
-import { FileUploadEvent } from "@/interface";
 import { useXplorersAIContext } from "@/context/XplorersAIContext";
 
 const XplorersAIBody = () => {
   const { getMessages } = useXplorersAIContext();
   const messages = getMessages();
+
   return (
     <div className="pt-8">
       <h2 className="typing-text py-8">
         Hey there! I&apos;m Xplorers AI—how can I help you today?
       </h2>
       <div className="min-h-[70vh] overflow-auto">
-        {messages.length > 1 && <XplorersAIChatBox messages={messages} />}
+        {messages.length && <XplorersAIChatBox messages={messages} />}
         <XplorersAISearch />
       </div>
     </div>

src/modules/xplorers-ai/xplorersAIChatBox.tsx

@@ -1,12 +1,9 @@
 "use client";
-import { ChatMessage, XplorersAIChatBoxProps } from "@/interface";
-import React, { useEffect, useRef } from "react";
-import { marked } from "marked";
-import DOMPurify from "dompurify";
 
-export function sanitizeMarkdown(content: string): string {
-  return marked.parse(content, { async: false }) as string;
-}
+import React, { useEffect, useRef } from "react";
+import DOMPurify from "isomorphic-dompurify";
+import { sanitizeMarkdown } from "@/utils/sanitizeMarkdown";
+import { XplorersAIChatBoxProps, ChatMessage } from "@/models/XploresAI";
 
 const XplorersAIChatBox: React.FC<XplorersAIChatBoxProps> = ({ messages }) => {
   const chatContainerRef = useRef<HTMLDivElement | null>(null);

src/modules/xplorers-ai/xplorersAIHero.tsx

@@ -1,11 +1,11 @@
 import Image from "next/image";
-import { XPLORERS_AI_LOGO } from "@/constants/links";
+import { xplorersAiLogo } from "@/constants/links";
 
 const XplorersAIHero = () => {
   return (
     <div className="grid grid-cols-2">
       <Image
-        src={XPLORERS_AI_LOGO}
+        src={xplorersAiLogo}
         alt="Xplorers AI Logo"
         width={160}
         height={160}

src/modules/xplorers-ai/xplorersAIPage.tsx

@@ -2,15 +2,15 @@ import XplorersAIHero from "./xplorersAIHero";
 import XplorersAIBody from "./xplorersAIBody";
 import PagesWrapper from "@/components/layout/PagesWrapper";
 import Image from "next/image";
-import { XplorersAIContextProvider } from "@/context/XplorersAIContext";
-import { XPLORERS_AI_BACKGROUND } from "@/constants/links";
+import { xplorersAiBackground } from "@/constants/links";
+import XplorersAIContextProvider from "@/components/shared/XplorersAIContextProvider";
 
 const XplorersAIPage = () => {
   return (
     <div className="relative flex h-screen w-screen flex-col">
       <div className="absolute inset-0 -z-10">
         <Image
-          src={XPLORERS_AI_BACKGROUND}
+          src={xplorersAiBackground}
           alt="Background"
           layout="fill"
           objectFit="cover"