commit

.env

@@ -0,0 +1,10 @@
+NEXT_PUBLIC_SUPABASE_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImlpZWhrb2xzaXRicGlqamh0amZ1Iiwicm9sZSI6ImFub24iLCJpYXQiOjE2OTQ5NTg0OTEsImV4cCI6MjAxMDUzNDQ5MX0.arr0B4gUCabegTVk439G7IFm1kG0AEA9xbOLmlEFDP8
+NEXT_PUBLIC_SUPABASE_URL=https://iiehkolsitbpijjhtjfu.supabase.co
+GOOGLE_CLIENT_ID=146606603734-cp01g76uroirlstlasvbp6ihb9at18ki.apps.googleusercontent.com
+GOOGLE_CLIENT_SECRET=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
+NEXTAUTH_URL=http://localhost:3001
+NEXTAUTH_URL_INTERNAL=http://localhost:3001
+NEXTAUTH_SECRET=B6J21rBJZIrkLK1Kgqro3eJ4g1j2ibKPxTW9m77cG6s=
+API_KEY=AIzaSyA6B01DPsXtGIhUQjckCshbD1E99Edd2Tg
+OPENAI_API_KEY=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
+SMTP_PASS=soudishtiaq

.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

Provider/Provider.jsx

@@ -0,0 +1,27 @@
+"use client";
+
+import { SessionProvider, useSession } from "next-auth/react";
+import { createContext, useContext, useEffect, useState } from "react";
+
+export async function getUser () {
+  try {
+    let body = await fetch( "/api/auth/session" );
+    let user = await body.json();
+    if ( Object.keys( user ).length && Object.keys( user.user ).length ) {
+      return { session: user, signedIn: true };
+    }
+    return { session: null, signedIn: false };
+  } catch ( e ) {
+    console.log( e );
+  }
+}
+
+const Provider = ( { children, session } ) => {
+  return (
+    <SessionProvider session={ session }>
+      { children }
+    </SessionProvider>
+  );
+};
+
+export default Provider;

README.md

@@ -1,10 +1,34 @@
----
-title: Ai
-emoji: 🏃
-colorFrom: blue
-colorTo: indigo
-sdk: docker
-pinned: false
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.js`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

app/(beta)/api-access/page.jsx

@@ -0,0 +1,83 @@
+"use client";
+
+import { exists, insertData } from "@/app/Supabase/Supabase";
+import styles from "./page.module.css";
+import { useState } from "react";
+
+
+const ApiPage = () => {
+
+  const [ disabled, setDisabled ] = useState( false );
+  const [ email, setEmail ] = useState( "" );
+
+
+
+  const handleButtonClick = async () => {
+    if ( email.trim().length && email.includes( "@" ) ) {
+      try {
+        setDisabled( true );
+
+        const userExists = await exists( {
+          table: "Early_Access",
+          where: {
+            email: email
+          }
+        } );
+
+        if ( !userExists ) {
+
+          await insertData( {
+            table: "Early_Access",
+            object: {
+              email
+            }
+          } );
+
+          const response = await fetch( "/api/api-access", {
+            method: "POST",
+            body: JSON.stringify( {
+              email
+            } )
+          } );
+
+          if ( response.ok ) {
+            console.log( await response.json() );
+          }
+
+        } else {
+          alert( "User has already signed up for Early Access!" );
+        }
+
+      } catch ( e ) {
+        console.log( e );
+      } finally {
+        setDisabled( false );
+      }
+
+    }
+  };
+
+  const handleInputClick = e => {
+    if ( e.key == "Enter" && !e.shiftKey && !disabled ) {
+      handleButtonClick();
+    }
+  };
+
+  return (
+    <section className={ styles[ "api" ] }>
+      <div className={ styles[ "heading" ] }>
+        <p className={ styles[ "note" ] }>API under Development</p>
+        <p className={ styles[ "title" ] }>COMING SOON!</p>
+      </div>
+      <div className={ styles[ "form" ] }>
+        <p className={ styles[ "desc" ] }>Unlock the future – be among the first to access our API with early access</p>
+        <div className={ styles[ "input" ] }>
+          <input onKeyDown={ handleInputClick } type="text" value={ email } onChange={ ( e ) => setEmail( e.target.value ) } placeholder='Enter your Email' />
+          <button disabled={ disabled } type='button' onClick={ handleButtonClick }>{ disabled ? "Sending" : "Send" }</button>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default ApiPage;

app/(beta)/api-access/page.module.css

@@ -0,0 +1,139 @@
+section.api {
+  background: url("/bg.svg") center no-repeat;
+  background-size: cover;
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 15vh;
+  font-family: Montserrat;
+}
+
+div.heading {
+  display: flex;
+  flex-direction: column;
+  gap: 3vh;
+}
+
+section.api div.heading p.note {
+  color: rgba(255, 255, 255, 0.50);
+  font-size: 1.45vw;
+  text-align: center;
+}
+
+section.api div.heading p.title {
+  color: #FFF;
+  text-align: center;
+  font-size: 6.65vw;
+  font-weight: 700;
+}
+
+div.form {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10vh;
+}
+
+div.form p.desc {
+  text-align: center;
+  color: rgba(255, 255, 255, 0.70);
+  font-size: 1.159vw;
+}
+
+div.input {
+  width: 50vw;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  position: relative;
+  align-items: center;
+}
+
+div.input input {
+  outline: none;
+  border: none;
+  border-radius: 6vw;
+  background: rgba(255, 255, 255, 0.1);
+  width: 100%;
+  padding: 2.25vh 3.15vw 2.25vh 1.65vw;
+  color: rgb(234, 234, 234);
+  position: relative;
+  font-size: 1.125vw;
+  letter-spacing: .075vw;
+}
+
+div.input button {
+  position: absolute;
+  right: .3vw;
+  height: calc(100% - .45vw);
+  width: 6vw;
+  border: none;
+  outline: none;
+  color: rgb(244, 244, 244);
+  border-radius: 3.38vw;
+  background: #1F7268;
+  letter-spacing: .075vw;
+  text-align: center;
+  cursor: pointer;
+  transition: 60ms ease-in;
+  font-size: .98vw;
+}
+
+div.input button:hover {
+  width: 6.75vw;
+}
+
+@media (max-width: 767px) {
+
+  section.api {
+    gap: 90px;
+  }
+
+  div.heading {
+    gap: 17px;
+  }
+
+  section.api div.heading p.note {
+    font-size: 14px;
+  }
+
+  section.api div.heading p.title {
+    font-size: 70px;
+  }
+
+  div.form {
+    gap: 70px;
+  }
+
+  div.form p.desc {
+    font-size: 14.5px;
+    width: 85%;
+  }
+
+  div.input {
+    width: 85%;
+  }
+
+  div.input input {
+    border-radius: 80px;
+    padding: 15px 42px 15px 22px;
+    font-size: 15px;
+    letter-spacing: 1px;
+  }
+
+  div.input button {
+    font-size: 13.333px;
+    right: 3px;
+    height: calc(100% - 6px);
+    width: 80px;
+    border-radius: 45px;
+    letter-spacing: 1px;
+  }
+
+  div.input button:hover {
+    width: 85px;
+  }
+}

app/(beta)/layout.js

@@ -0,0 +1,25 @@
+import Provider from '@/Provider/Provider.jsx';
+
+
+import "../globals.css";
+
+export const metadata = {
+  title: 'RayAI API',
+  description: 'RayAI: Your Personal AI , Now use as API.',
+
+};
+
+export default function RootLayout ( { children } ) {
+
+  return (
+    <html lang="en">
+      <body>
+        <Provider >
+
+          { children }
+
+        </Provider>
+      </body>
+    </html>
+  );
+}

app/(working)/ChildLayout.js

@@ -0,0 +1,192 @@
+"use client";
+
+import styles from "./layout.module.css";
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faGears, faMagnifyingGlass, faRightFromBracket, faServer } from '@fortawesome/free-solid-svg-icons';
+import { faEnvelope, faMessage } from '@fortawesome/free-regular-svg-icons';
+import { signIn, signOut, useSession } from 'next-auth/react';
+import Image from 'next/image';
+import Link from 'next/link';
+import { faGoogle } from '@fortawesome/free-brands-svg-icons';
+import { useTheme } from '../Contexts/ThemeContext/ThemeContext';
+import Loading from "./loading";
+import { isMobileDevice, toggleNavDevice } from "../Contexts/IsMobileContext/IsMobileContext";
+import { useEffect, useState } from "react";
+import { usePathname } from "next/navigation";
+
+
+const ChildLayout = ( { children } ) => {
+
+  const { data: session, status } = useSession();
+  const { darkMode } = useTheme();
+  const { isMobile, setIsMobile } = isMobileDevice();
+  const { toggleNav, setToggleNav } = toggleNavDevice();
+  const [ isLoading, setLoading ] = useState( true );
+  const [ sessionLoading, setSessionLoading ] = useState( true );
+  const specialRoutes = [ "api-access" ];
+  const pathName = usePathname();
+
+  useEffect( () => {
+    if ( status != "loading" ) {
+      setSessionLoading( false );
+    }
+    console.log( sessionLoading );
+  }, [ session, status ] );
+
+  useEffect( () => {
+
+    const handleResize = () => setIsMobile( window.innerWidth <= 767 );
+
+    handleResize();
+
+    window.addEventListener( "resize", handleResize );
+
+    setLoading( false );
+
+    return () => {
+      window.removeEventListener( "resize", handleResize );
+    };
+
+  }, [] );
+
+  let content;
+
+  // if ( specialRoutes.includes( pathName ) ) {
+  //   content =
+  //     <div className={ styles[ "chat-container" ] }>
+  //       { !isLoading && (
+  //         <>
+  //           <div className={ styles[ "previous-chats" ] } style={ isMobile ? {
+  //             left: toggleNav ? "0" : -150,
+  //             zIndex: 10
+  //           } : null }>
+  //             { isMobile && (
+  //               <button className={ styles[ "close-nav" ] } onClick={ () => {
+  //                 setToggleNav( false );
+  //               } }>
+  //                 ✖
+  //               </button>
+  //             ) }
+  //             <div className={ styles[ "logo" ] }>
+  //               <Image
+  //                 src={ "/logo.png" }
+  //                 alt='logo'
+  //                 width={ "100" }
+  //                 height={ "70" }
+  //               />
+
+  //             </div>
+  //             <div className={ styles[ "links" ] }>
+  //               <Link href={ "/" }><FontAwesomeIcon className={ styles[ 'link-icons' ] } icon={ faMessage } />&nbsp;&nbsp;&nbsp;Chats</Link>
+  //               <Link href={ "/search" }><FontAwesomeIcon className={ styles[ 'link-icons' ] } icon={ faMagnifyingGlass } />&nbsp;&nbsp;&nbsp;Search</Link>
+  //               <Link href={ "/settings" }><FontAwesomeIcon className={ styles[ 'link-icons' ] } icon={ faGears } />&nbsp;&nbsp;&nbsp;Settings</Link>
+  //               <Link href={ "/api-access" }><FontAwesomeIcon className={ styles[ 'link-icons' ] } icon={ faServer } />&nbsp;&nbsp;&nbsp;Use as API</Link>
+  //             </div>
+  //             <div className={ styles[ 'account' ] }>
+  //               { session?.user && !sessionLoading ? (
+  //                 <div className={ styles[ 'profile' ] }>
+  //                   <div className={ styles[ 'img' ] }>
+  //                     <Image
+  //                       src={ session.user.image }
+  //                       alt='profile'
+  //                       width={ 30 }
+  //                       height={ 30 }
+  //                     />
+  //                   </div>
+  //                   <div className={ styles[ 'name-email' ] }>
+  //                     <p className={ styles[ "name" ] }>{ session.user.name }</p>
+  //                     <p className={ styles[ "email" ] }>{ session.user.email.length > 22 ? session.user.email.substring( 0, 22 ) + "..." : session.user.email }</p>
+  //                   </div>
+  //                   <FontAwesomeIcon onClick={ () => signOut() } className={ styles[ "logout-icon" ] } icon={ faRightFromBracket } />
+  //                 </div>
+  //               ) : status != "loading" ? (
+  //                 <button onClick={ () => signIn( "google" ) } type="button"><FontAwesomeIcon className={ styles[ 'google-icon' ] } icon={ faGoogle } /><span>Continue with Google</span></button>
+  //               ) : (
+  //                 <Loading />
+  //               ) }
+  //             </div>
+  //           </div>
+  //           <div className={ `${ styles[ "layout" ] } ${ !darkMode ? styles[ "light" ] : "" }` }>
+  //             { isMobile && (
+  //               <button className={ styles[ "open-nav" ] } onClick={ () => setToggleNav( true ) }>
+  //                 ☰
+  //               </button>
+  //             ) }
+  //             { children }
+  //           </div>
+  //         </>
+  //       ) }
+  //     </div >;
+  // } else {
+  //   content = children;
+  // }
+
+  return (
+    <div className={ styles[ "chat-container" ] }>
+      { !isLoading && (
+        <>
+          <div className={ styles[ "previous-chats" ] } style={ isMobile ? {
+            left: toggleNav ? "0" : -150,
+            zIndex: 10
+          } : null }>
+            { isMobile && (
+              <button className={ styles[ "close-nav" ] } onClick={ () => {
+                setToggleNav( false );
+              } }>
+                ✖
+              </button>
+            ) }
+            <div className={ styles[ "logo" ] }>
+              <Image
+                src={ "/logo.png" }
+                alt='logo'
+                width={ "100" }
+                height={ "70" }
+              />
+
+            </div>
+            <div className={ styles[ "links" ] }>
+              <Link href={ "/" }><FontAwesomeIcon className={ styles[ 'link-icons' ] } icon={ faMessage } />&nbsp;&nbsp;&nbsp;Chats</Link>
+              <Link href={ "/search" }><FontAwesomeIcon className={ styles[ 'link-icons' ] } icon={ faMagnifyingGlass } />&nbsp;&nbsp;&nbsp;Search</Link>
+              <Link href={ "/settings" }><FontAwesomeIcon className={ styles[ 'link-icons' ] } icon={ faGears } />&nbsp;&nbsp;&nbsp;Settings</Link>
+              <Link href={ "/api-access" }><FontAwesomeIcon className={ styles[ 'link-icons' ] } icon={ faServer } />&nbsp;&nbsp;&nbsp;Use as API</Link>
+            </div>
+            <div className={ styles[ 'account' ] }>
+              { session?.user && !sessionLoading ? (
+                <div className={ styles[ 'profile' ] }>
+                  <div className={ styles[ 'img' ] }>
+                    <Image
+                      src={ session.user.image }
+                      alt='profile'
+                      width={ 30 }
+                      height={ 30 }
+                    />
+                  </div>
+                  <div className={ styles[ 'name-email' ] }>
+                    <p className={ styles[ "name" ] }>{ session.user.name }</p>
+                    <p className={ styles[ "email" ] }>{ session.user.email.length > 22 ? session.user.email.substring( 0, 22 ) + "..." : session.user.email }</p>
+                  </div>
+                  <FontAwesomeIcon onClick={ () => signOut() } className={ styles[ "logout-icon" ] } icon={ faRightFromBracket } />
+                </div>
+              ) : status != "loading" && !isLoading ? (
+                <button onClick={ () => signIn( "google" ) } type="button"><FontAwesomeIcon className={ styles[ 'google-icon' ] } icon={ faGoogle } /><span>Continue with Google</span></button>
+              ) : (
+                <Loading />
+              ) }
+            </div>
+          </div>
+          <div className={ `${ styles[ "layout" ] } ${ !darkMode ? styles[ "light" ] : "" }` }>
+            { isMobile && (
+              <button className={ styles[ "open-nav" ] } onClick={ () => setToggleNav( true ) }>
+                ☰
+              </button>
+            ) }
+            { children }
+          </div>
+        </>
+      ) }
+    </div >
+  );
+};
+
+export default ChildLayout;

app/(working)/layout.js

@@ -0,0 +1,44 @@
+import Provider from '@/Provider/Provider.jsx';
+import ThemeProvider from '../Contexts/ThemeContext/ThemeContext';
+import MessagesProvider from '../Contexts/MessagesContext/MessagesContext';
+import ChildLayout from './ChildLayout';
+import IsMobileProvider, { ToggleNavProvider } from '../Contexts/IsMobileContext/IsMobileContext';
+
+
+import "../globals.css";
+
+export const metadata = {
+  title: 'RayAI',
+  description: 'RayAI: Your Personal AI',
+
+};
+
+export default function RootLayout ( { children } ) {
+
+  return (
+    <html lang="en">
+      <body>
+        <Provider >
+          <ThemeProvider>
+            <main>
+              <div className='bg1'></div>
+              <div className='bg2'></div>
+              <div className='bg3'></div>
+              <div className='bg4'></div>
+              <div className='bg5'></div>
+              <MessagesProvider>
+                <IsMobileProvider>
+                  <ToggleNavProvider>
+                    <ChildLayout>
+                      { children }
+                    </ChildLayout>
+                  </ToggleNavProvider>
+                </IsMobileProvider>
+              </MessagesProvider>
+            </main>
+          </ThemeProvider>
+        </Provider>
+      </body>
+    </html>
+  );
+}

app/(working)/layout.module.css

@@ -0,0 +1,317 @@
+div.chat-container {
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  flex-direction: row;
+}
+
+div.previous-chats {
+  /* background: #fff; */
+  height: 100%;
+  width: 20.5vw;
+  display: flex;
+  flex-direction: column;
+  padding: .9vw 1.45vw;
+}
+
+div.layout {
+  width: calc(100% - 20.5vw);
+  display: flex;
+  margin: .75vw;
+  background: #b3b3b308;
+  overflow: hidden;
+  border-radius: 3.75vw;
+  border: .075vw solid #365057;
+  flex-direction: column;
+  backdrop-filter: blur(71px);
+  align-items: center;
+}
+
+div.layout.light {
+  border: none;
+  background: #ffffffe6;
+}
+
+div.previous-chats div.links {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  top: 7vh;
+  /* Updated from 5.86vw to 12.12vh */
+  /* gap: 2px; */
+}
+
+.link-icons {
+  opacity: 0.4;
+}
+
+div.previous-chats div.links a {
+  text-decoration: none;
+  color: #eee;
+  padding: .9vw;
+  font-family: abeezee;
+  font-size: .97vw;
+}
+
+div.previous-chats div.logo {
+  display: flex;
+  position: relative;
+  top: 2.62vh;
+  /* Updated from 1.125vw to 2.62vh */
+}
+
+div.previous-chats div.logo img {
+  width: 6.3vw;
+  height: auto;
+}
+
+div.account {
+  position: absolute;
+  bottom: 8vh;
+  left: 2vw;
+  width: 17vw;
+}
+
+div.build-info {
+  padding: .8vw;
+  position: relative;
+  top: 22vh;
+  border-radius: .7vw;
+  display: flex;
+  width: 90%;
+  justify-content: center;
+  /* align-items: center; */
+  flex-direction: column;
+  gap: 2.5vh;
+  font-family: Quicksand;
+  /* border: .05vw solid #2f2f2f; */
+  /* box-shadow: inset 0 0 2px; */
+  color: white;
+  transform: scale(1);
+  animation: card infinite 3s ease-in-out;
+  /* background: linear-gradient(108deg, #1a0044 -7.56%, #660868 29.51%, #db5e83 69.57%, #ffd098 107.24%); */
+  /* background: linear-gradient(rgba(255, 255, 255, .1), rgba(255, 255, 255, .1)), url("/card-bg.svg"); */
+  /* background: url("/card-bg-3.svg") no-repeat; */
+  background: linear-gradient(108deg, #052437 -7.56%, #14507d 29.51%, #47a2a5 69.57%, #bcf7ff 107.24%);
+  backdrop-filter: blur(50px);
+}
+
+div.version {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  font-size: 1.3vw;
+  font-family: abeezee;
+  font-weight: bold;
+}
+
+div.build-info p.desc {
+  position: relative;
+  top: -1.2vh;
+  font-size: .97vw;
+}
+
+div.build-info button.card-btn {
+  width: fit-content;
+  position: relative;
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 1.2vh 1.5vw;
+  font-size: .9vw;
+  border-radius: .3vw;
+  border: none;
+  background: #00000049;
+  color: white;
+  cursor: pointer;
+  transition: 90ms linear;
+}
+
+div.build-info button.card-btn.light {
+  background: white;
+  color: rgb(34, 42, 46);
+}
+
+div.build-info button.card-btn:hover {
+  background: white;
+  color: rgb(34, 42, 46);
+}
+
+@keyframes card {
+  0% {
+    transform: scale(1);
+  }
+
+  50% {
+    transform: scale(1.03);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}
+
+div.profile {
+  display: flex;
+  flex-direction: row;
+  gap: .7vw;
+  align-items: center;
+  font-family: abeezee;
+  width: 100%;
+}
+
+div.img img {
+  border-radius: 50%;
+  width: 2.5vw;
+  height: 2.5vw;
+}
+
+div.name-email {
+  display: flex;
+  flex-direction: column;
+  font-size: .9vw;
+  color: white;
+  gap: .6vh;
+}
+
+p.email {
+  font-size: .85vw;
+}
+
+div.account button {
+  background-color: #4285F4;
+  color: #fff;
+  padding: .75vw .75vw;
+  border: none;
+  border-radius: .375vw;
+  cursor: pointer;
+  display: flex;
+  flex-direction: row;
+  font-size: 1vw;
+  gap: .65vw;
+}
+
+.logout-icon {
+  color: white;
+  position: absolute;
+  right: 0;
+  font-size: .9vw;
+  cursor: pointer;
+  padding: .7vw;
+}
+
+@media (max-width: 767px) {
+
+  div.previous-chats {
+    /* background: #fff; */
+    height: 100%;
+    /* width: 20.5vw; */
+    width: 150px;
+    display: flex;
+    flex-direction: column;
+    /* padding: .9vw 1.45vw; */
+    padding: 5px;
+    position: absolute;
+    transition: 150ms ease-in-out;
+    background: rgb(13 36 40);
+  }
+
+  div.layout {
+    width: 100%;
+    height: 100%;
+  }
+
+  div.previous-chats div.links {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    top: 50px;
+    /* Updated from 5.86vw to 12.12vh */
+    gap: 2px;
+  }
+
+  .link-icons {
+    opacity: 0.4;
+  }
+
+  div.previous-chats div.links a {
+    text-decoration: none;
+    color: #eee;
+    padding: 6px;
+    font-family: abeezee;
+    font-size: 10px;
+  }
+
+  div.previous-chats div.logo {
+    display: flex;
+    position: relative;
+    top: 20px;
+    /* Updated from 1.125vw to 2.62vh */
+  }
+
+  div.previous-chats div.logo img {
+    width: 60px;
+    height: auto;
+  }
+
+  div.account {
+    position: absolute;
+    bottom: 30px;
+    left: 20px;
+    width: 120px;
+  }
+
+  button.close-nav {
+    position: absolute;
+    right: 0;
+    border: none;
+    width: 25px;
+    height: 25px;
+    background: #ffffff;
+    font-size: 12px;
+    border-radius: 50%;
+  }
+
+  button.open-nav {
+    position: relative;
+    left: calc(-50% + 17px);
+    border: none;
+    width: 25px;
+    height: 25px;
+    background: #ffffff;
+    font-size: 12px;
+    border-radius: 50%;
+  }
+
+  div.profile {
+    gap: 7px;
+    width: 100%;
+  }
+
+  div.img img {
+    border-radius: 50%;
+    width: 20px;
+    height: 20px;
+  }
+
+  div.name-email {
+    font-size: 7px;
+    gap: 6px;
+  }
+
+  p.email {
+    font-size: 6px;
+  }
+
+  div.account button {
+    padding: 10px;
+    border-radius: 3px;
+    font-size: 12px;
+    gap: 8px;
+  }
+
+  .logout-icon {
+    font-size: 9px;
+    padding: 3px;
+  }
+
+}

app/(working)/loading.js

@@ -0,0 +1,10 @@
+import styles from "./loading.module.css";
+
+
+const Loading = () => {
+  return (
+    <div className={ styles[ 'loading' ] }></div>
+  );
+};
+
+export default Loading;

app/(working)/loading.module.css

@@ -0,0 +1,20 @@
+div.loading {
+  border-radius: 50%;
+  background: transparent;
+  border: .5vw solid #6464d1;
+  width: 2.5vw;
+  height: 2.5vw;
+  animation: loader infinite ease-in-out 1s;
+  transform: rotate(0);
+  border-top-color: #2d2d85;
+}
+
+@keyframes loader {
+  0% {
+    transform: rotate(0);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}

app/(working)/page.jsx

@@ -0,0 +1,42 @@
+"use client";
+
+import { useEffect, useState } from 'react';
+import Chat from '../Components/Chat/chat';
+import { useMessages } from '../Contexts/MessagesContext/MessagesContext';
+import { signIn, useSession } from 'next-auth/react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faGoogle } from '@fortawesome/free-brands-svg-icons';
+
+import styles from "./page.module.css";
+import Loading from './loading';
+
+
+
+const page = () => {
+  const { data: session, status } = useSession();
+  const [ signedIn, setSignedIn ] = useState( false );
+
+  useEffect( () => {
+    if ( session?.user ) {
+      setSignedIn( true );
+    } else {
+      setSignedIn( false );
+    }
+  }, [ session ] );
+
+  const { messages, setMessages, Msgsloading } = useMessages();
+
+  return (
+    <>
+      { signedIn && status != "loading" ? (
+        <Chat messages={ messages } setMessages={ setMessages } Msgsloading={ Msgsloading } />
+      ) : status == "loading" ? (
+        <Loading />
+      ) : (
+        <button className={ styles[ 'google-btn' ] } onClick={ () => signIn( "google" ) } type="button"><FontAwesomeIcon className={ styles[ 'google-icon' ] } icon={ faGoogle } /><span>Continue with Google</span></button >
+      ) }
+    </>
+  );
+};
+
+export default page;

app/(working)/page.module.css

@@ -0,0 +1,24 @@
+button.google-btn {
+  background-color: #4285F4;
+  color: #fff;
+  padding: .75vw .75vw;
+  border: none;
+  border-radius: .375vw;
+  cursor: pointer;
+  display: flex;
+  flex-direction: row;
+  font-size: 1vw;
+  gap: .65vw;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.logout-icon {
+  color: white;
+  position: absolute;
+  right: 0;
+  font-size: .9vw;
+  cursor: pointer;
+  padding: .7vw;
+}

app/(working)/search/page.jsx

@@ -0,0 +1,227 @@
+"use client";
+
+import { useEffect, useRef, useState } from 'react';
+import styles from "./page.module.css";
+import { useMessages } from '../../Contexts/MessagesContext/MessagesContext';
+import { useTheme } from '../../Contexts/ThemeContext/ThemeContext';
+import { useSession } from 'next-auth/react';
+import { useRouter } from 'next/navigation';
+import dynamic from 'next/dynamic';
+
+
+const Loading = dynamic( () => import( '../loading.js' ) );
+
+const Message = dynamic( () => import( '../../Components/Message/Message' ), {
+  loading: Loading
+} );
+
+const Search = () => {
+  const { messages } = useMessages();
+  const { darkMode } = useTheme();
+  const { data: session } = useSession();
+  const router = useRouter();
+  const [ prompts, setPrompts ] = useState( [] );
+  const [ cancel, setCancel ] = useState( false );
+  const msgsRef = useRef();
+
+  // Debounce the input with a 500ms delay
+  const debounce = ( func, delay ) => {
+    let timeoutId;
+    return function ( ...args ) {
+      clearTimeout( timeoutId );
+      timeoutId = setTimeout( () => {
+        func.apply( this, args );
+      }, delay );
+    };
+  };
+
+  const filtering = ( searchText ) => {
+    try {
+      if ( cancel ) {
+        return;
+      }
+
+      if ( searchText.trim().length === 0 ) {
+        setPrompts( [] );
+      } else {
+        let filteredArray = messages.filter( ( message ) =>
+          message.content.toLowerCase().includes( searchText.toLowerCase() )
+        );
+        console.log( "filtered: ", filteredArray );
+        setPrompts( filteredArray );
+      }
+    } catch ( err ) {
+      console.log( err );
+    }
+  };
+
+  const debouncedFiltering = useRef( debounce( filtering, 500 ) );
+
+  const handleInputChange = ( e ) => {
+    setCancel( false );
+    debouncedFiltering.current( e.target.value );
+  };
+
+  useEffect( () => {
+    return () => {
+      setCancel( true );
+    };
+  }, [] );
+
+  return (
+    <div className={ styles[ "search-container" ] }>
+      <div className={ styles[ "input" ] }>
+        <input
+          type="text"
+          onChange={ handleInputChange }
+          placeholder="Search Message"
+        />
+      </div>
+      { !prompts.length && (
+        <p className={ styles[ 'placeholder' ] }>No Messages :(</p>
+      ) }
+      <div className={ `${ styles[ "msgs" ] } ${ !darkMode ? styles[ "light" ] : "" }` } ref={ msgsRef }>
+        { prompts.map( ( msg, key ) => (
+          <Message
+            onClick={ ( e ) => {
+              e.stopPropagation();
+              router.replace( "/#" + msg.key, { scroll: false } );
+            } }
+            key={ key }
+            msg={ msg }
+            session={ session }
+            styles={ styles }
+          />
+        ) ) }
+      </div>
+    </div>
+  );
+};
+
+export default Search;
+
+
+
+
+
+
+
+
+
+// "use client";
+
+// import { useEffect, useRef, useState } from 'react';
+// import styles from "./page.module.css";
+// import { useMessages } from '../Contexts/MessagesContext/MessagesContext';
+// import Message from '../Components/Message/Message';
+// import { useTheme } from '../Contexts/ThemeContext/ThemeContext';
+// import { useSession } from 'next-auth/react';
+// import { useRouter } from 'next/navigation';
+// import { useChat } from 'ai/react';
+
+
+// const Search = () => {
+
+//   const { messages } = useMessages();
+//   const { darkMode, _ } = useTheme();
+//   const { data: session } = useSession();
+//   const [ prompts, setPrompts ] = useState( [] );
+//   const router = useRouter();
+//   const [ Input, setInput ] = useState( "" );
+//   const [ cancel, setCancel ] = useState( false );
+//   const msgsRef = useRef();
+
+//   const debounce = ( func, delay ) => {
+//     let timeoutId;
+//     return function ( ...args ) {
+//       clearTimeout( timeoutId );
+//       timeoutId = setTimeout( () => {
+//         func.apply( this, args );
+//       }, delay );
+//     };
+//   };
+
+//   // const handleInputChange = debounce( ( e ) => {
+
+//   //   console.log( messages );
+
+//   //   if ( e.target.value.trim().length == 0 ) {
+//   //     setPrompts( [] );
+//   //   } else {
+//   //     let filteredMessages = messages.filter( ( message ) => message.content.toLowerCase().includes( e.target.value.toLowerCase() ) );
+//   //     setPrompts( [ ...filteredMessages ] );
+//   //   }
+
+//   // }, 300 );
+
+//   const handleInputChange = ( e ) => {
+//     setCancel( false );
+//     setInput( e.target.value );
+//   };
+
+//   useEffect( () => {
+
+//     const Filtering = async () => {
+//       console.log( messages );
+
+//       try {
+
+//         if ( cancel ) {
+//           return;
+//         }
+
+//         if ( Input.trim().length == 0 ) {
+
+//           setPrompts( [] );
+
+//         } else {
+
+//           let filteredArray = await filtering();
+//           console.log( "filtered: ", filteredArray );
+//           setPrompts( filteredArray );
+
+//         }
+
+//       } catch ( err ) {
+//         console.log( err );
+//       }
+
+//     };
+
+//     Filtering();
+
+//     return () => {
+//       setCancel( true );
+//     };
+
+//   }, [ Input ] );
+
+//   const filtering = async () => {
+
+//     let filteredMessages = messages.filter( ( message ) => message.content.toLowerCase().includes( Input.toLowerCase() ) );
+//     return filteredMessages;
+
+//   };
+
+
+//   return (
+//     <div className={ styles[ "search-container" ] }>
+//       <div className={ styles[ "input" ] }>
+//         <input type={ styles[ "text" ] } onChange={ handleInputChange } placeholder='Search Message' />
+//       </div>
+//       { !prompts.length && (
+//         <p className={ styles[ 'placeholder' ] }>No Messages :(</p>
+//       ) }
+//       <div className={ `${ styles[ "msgs" ] } ${ !darkMode ? styles[ "light" ] : "" }` } ref={ msgsRef }>
+//         { prompts.map( ( msg, key ) => (
+//           <Message onClick={ ( e ) => {
+//             e.stopPropagation();
+//             router.replace( "/#" + msg.key, { scroll: false } );
+//           } } key={ key } msg={ msg } session={ session } styles={ styles } />
+//         ) ) }
+//       </div>
+//     </div>
+//   );
+// };
+
+// export default Search;

app/(working)/search/page.module.css

@@ -0,0 +1,152 @@
+div.search-container {
+  width: calc(100% - 4.6vw);
+  height: calc(100% - 4.6vw);
+  position: relative;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6vh;
+}
+
+p.placeholder {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 4vw;
+  font-family: abeezee;
+  color: #17c4ab26;
+}
+
+div.search-container div.input {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
+
+div.search-container div.input input {
+  width: 100%;
+  border: none;
+  padding: 1.1vw 1.3vw;
+  outline: none;
+  border-radius: .4vw;
+  font-size: 1.3vw;
+  color: #cbcbcb;
+  background: #22454D;
+}
+
+div.msgs {
+  width: 100%;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  align-items: center;
+  gap: 3.1vh;
+  scroll-behavior: smooth;
+  transition: 150ms ease-in-out;
+}
+
+div.msgs.light div.user,
+div.msgs.light div.ai {
+  border-color: #c9e0df;
+  background: #def7f352;
+  color: #254a4d;
+}
+
+div.msgs div.markdown-content > pre {
+  position: relative;
+}
+
+div.msgs.light div.markdown-content > pre > pre {
+  border: 1px solid #e8ebec;
+  transition: 150ms ease-in-out;
+}
+
+div.markdown-content,
+div.markdown-content * {
+  white-space: pre-wrap;
+  line-height: 1.7;
+}
+
+div.user,
+div.ai {
+  font-family: abeezee;
+  font-size: 1vw;
+  background: #5656563c;
+  border-radius: 1.4vw;
+  padding: 2vw 2vw 2vw 3vw;
+  border: #365057 1px solid;
+  display: flex;
+  color: #bebebe;
+  flex-direction: row;
+  width: calc(100% - 1.8vw);
+  position: relative;
+  left: .5vw !important;
+  cursor: pointer;
+  transition: 200ms ease-in-out;
+}
+
+@keyframes msg {
+  0% {
+    height: 0;
+  }
+
+  100% {
+    height: auto;
+  }
+}
+
+.text-pic {
+  width: 2.7vw;
+  height: 2.7vw;
+  position: absolute;
+  left: -1vw;
+  top: 2.8vh;
+  border-radius: .5vw;
+}
+
+@media (max-width: 767px) {
+  div.search-container {
+    width: calc(100% - 13px);
+    height: calc(100% - 43px);
+    gap: 30px;
+    position: absolute;
+    top: calc(50% + 20px);
+    transform: translateY(-50%);
+  }
+
+  p.placeholder {
+    font-size: 10px;
+  }
+
+  div.search-container div.input input {
+    padding: 5px 10px;
+    border-radius: 4px;
+    font-size: 10px;
+  }
+
+  div.msgs {
+    gap: 20px;
+  }
+
+  div.user,
+  div.ai {
+    font-size: 11px;
+    border-radius: 10px;
+    padding: 10px 10px 10px 20px;
+    width: calc(100% - 20px);
+    left: 2px;
+  }
+
+  .text-pic {
+    width: 20px;
+    height: 20px;
+    left: -10px;
+    top: 10px;
+    border-radius: 5px;
+  }
+}

app/(working)/settings/page.jsx

@@ -0,0 +1,59 @@
+"use client";
+
+import ToggleButton from '@/app/Components/ToggleButton/ToggleButton';
+import { useTheme } from '@/app/Contexts/ThemeContext/ThemeContext';
+
+import styles from "./page.module.css";
+import { signIn, signOut } from 'next-auth/react';
+import { getUser } from '@/Provider/Provider';
+import { memo, useCallback, useEffect, useMemo, useState } from "react";
+
+
+const ThemeButton = memo( () => {
+
+  const { darkMode, toggleDarkMode } = useTheme();
+  const themeToggle = useCallback( () => toggleDarkMode(), [] );
+
+  return <ToggleButton checked={ darkMode } onChange={ themeToggle } />;
+
+} );
+
+const page = () => {
+  const { darkMode } = useTheme();
+  const [ user, setUser ] = useState( null );
+
+  useEffect( () => {
+    async function fetchUser () {
+      const user = await getUser();
+      setUser( user );
+    }
+
+    fetchUser();
+  } );
+
+  const signedIn = useMemo( () => {
+    return user !== null;
+  }, [ user ] );
+
+  let button;
+
+  if ( signedIn ) {
+    button = <button className={ styles[ "logout-btn" ] } onClick={ () => signOut() }>Sign-Out</button>;
+  } else {
+    button = <button className={ styles[ "logout-btn" ] } onClick={ () => signIn( "google" ) }>Sign-In</button>;
+  }
+
+  return (
+    <div className={ `${ styles[ 'options' ] } ${ !darkMode ? styles[ 'light' ] : "" }` }>
+      <div className={ styles[ 'theme-changer' ] }>
+        <p className="label">Toggle Dark Mode</p>
+        <ThemeButton />
+      </div>
+      <div className={ styles[ "logout" ] }>
+        { button }
+      </div>
+    </div>
+  );
+};
+
+export default page;

app/(working)/settings/page.module.css

@@ -0,0 +1,67 @@
+div.options {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+div.theme-changer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 80%;
+  font-family: abeezee;
+  font-size: 1.3vw;
+  color: #a5c6c8;
+  position: relative;
+  top: 5vh;
+  left: 7.5vw;
+}
+
+div.options.light div.theme-changer {
+  color: #3b5557;
+}
+
+div.logout {
+  position: relative;
+  top: 13vh;
+  background: #555;
+  left: 7.5vw;
+}
+
+div.logout button {
+  background: #a30f3e;
+  padding: 1vw 2vw;
+  color: white;
+  border: none;
+  font-size: 1.1vw;
+}
+
+div.options.light div.logout button {
+  background: #d40c4c;
+}
+
+@media (max-width: 768px) {
+  div.theme-changer {
+    font-size: 13px;
+    color: #a5c6c8;
+    top: 45px;
+    left: 37px;
+  }
+
+  div.logout {
+    position: relative;
+    top: 90px;
+    background: #555;
+    left: 37px;
+  }
+
+  div.logout button {
+    background: #a30f3e;
+    padding: 8px 12px;
+    color: white;
+    border: none;
+    font-size: 12px;
+  }
+}

app/Components/Chat/chat.jsx

@@ -0,0 +1,368 @@
+"use client";
+
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faBarsStaggered, faChevronDown, faPaperPlane, faStop, faTriangleExclamation } from '@fortawesome/free-solid-svg-icons';
+import { useSession } from 'next-auth/react';
+import { useChat } from "ai/react";
+import { useTheme } from "../../Contexts/ThemeContext/ThemeContext";
+import { memo, useCallback, useEffect, useRef, useState } from "react";
+import { insertData } from "@/app/Supabase/Supabase";
+import { v4 as uuid } from "uuid";
+import Image from 'next/image';
+import styles from "./chat.module.css";
+import Message from "../Message/Message";
+import { isMobileDevice } from '@/app/Contexts/IsMobileContext/IsMobileContext';
+
+const debounce = ( func, delay ) => {
+  let timeoutId;
+  return function ( ...args ) {
+    clearTimeout( timeoutId );
+    timeoutId = setTimeout( () => {
+      func.apply( this, args );
+    }, delay );
+  };
+};
+
+const Chat = ( { messages, setMessages, Msgsloading } ) => {
+
+  const { data: session } = useSession();
+  const { darkMode } = useTheme();
+  const [ newPrompt, setNewPrompt ] = useState( [] );
+  const [ pageRendered, setPageRendered ] = useState( false );
+  const [ hash, setHash ] = useState( "" );
+  const [ buttonToBottom, setbuttonToBottom ] = useState( false );
+  const { isMobile, setIsMobile } = isMobileDevice();
+  const [ input, setInput ] = useState( "" );
+  const [ isLoading, setLoading ] = useState( false );
+
+  const inputChange = ( e ) => {
+    setInput( e.target.value );
+  };
+
+  const handleSubmit = async ( e ) => {
+    e.preventDefault();
+    setInput( "" );
+
+    try {
+      setLoading( true );
+
+      const response = await fetch( "/api/chat", {
+        method: "POST",
+        body: JSON.stringify( {
+          input,
+          // chatbot_model: 0,
+          // web_search: true,
+          new_convo: !messages.length
+        } )
+      } );
+
+      // const response = await fetch( "https://AIONS.pythonanywhere.com/api/huggingface", {
+      //   method: "POST",
+      //   body: JSON.stringify( {
+      //     prompt: input,
+      //     chatbot_model: 0,
+      //     web_search: true,
+      //     new_conversation: false
+      //   } ),
+      //   headers: {
+      //     'Content-Type': 'application/json'
+      //   },
+      //   mode: "cors"
+      // } );
+
+      if ( response.ok ) {
+        let body = await response.json();
+        console.log( body );
+
+        let key = uuid();
+
+        setMessages( prev => [
+          ...prev,
+          { content: body.body.response, role: "assistant", key }
+        ] );
+
+        setNewPrompt( prev => [ ...prev, { value: body.body.response, key } ] );
+        // setNewPrompt( [] );
+      }
+
+    } catch ( e ) {
+      console.log( e );
+      setNewPrompt( [] );
+    } finally {
+      setLoading( false );
+    }
+  };
+
+  const stop = () => { };
+
+
+
+  // const { messages: msgs, input, handleInputChange: inputChange, handleSubmit, stop, isLoading } = useChat( {
+  //   id: "_RAY_AI_CHAT_",
+  //   initialMessages: messages,
+  //   onFinish: ( msg ) => {
+  //     setNewPrompt( prev => [ ...prev, { value: msg.content, key: msg.id } ] );
+  //   }
+  // } );
+
+  useEffect( () => {
+
+    if ( typeof window !== "undefined" ) {
+      setHash( window.location.hash.slice( 1 ) );
+    }
+
+    const handleResize = () => setIsMobile( window.innerWidth <= 767 );
+
+    handleResize();
+
+    window.addEventListener( "resize", handleResize );
+
+    const scrollEvent = e => {
+
+      let element = e.target;
+
+      if ( element.scrollHeight - element.clientHeight - element.scrollTop >= 2000 ) setbuttonToBottom( true );
+      else setbuttonToBottom( false );
+
+    };
+
+    let msgsDiv = document.getElementsByClassName( styles[ "msgs" ] )[ 0 ];
+    msgsDiv.addEventListener( "scroll", scrollEvent );
+
+    return () => {
+      window.removeEventListener( "resize", handleResize );
+      msgsDiv.removeEventListener( "scroll", scrollEvent );
+    };
+
+  }, [] );
+
+  useEffect( () => {
+    console.log( "isLoading: ", isLoading );
+  }, [ isLoading ] );
+
+  const msgsRef = useRef();
+
+
+  const scrollToMessage = () => {
+    const messageElement = document.getElementById( hash );
+
+    if ( messageElement ) {
+      messageElement.scrollIntoView( { behavior: 'smooth' } );
+    }
+  };
+
+  useEffect( () => {
+
+    if ( hash.trim().length ) scrollToMessage();
+
+  }, [ hash, pageRendered ] );
+
+  const send = async ( e ) => {
+
+    if ( input.trim().length && !isLoading ) {
+
+      let key = uuid();
+
+      setMessages( prev => [
+        ...prev,
+        { content: input, role: "user", key }
+      ] );
+
+      handleSubmit( e );
+
+      setNewPrompt( prev => [ ...prev, { value: input, key } ] );
+
+    }
+
+  };
+
+  const debouncedScrollToBottom = debounce( () => {
+    let isNearBottom = msgsRef.current.scrollHeight - msgsRef.current.clientHeight - msgsRef.current.scrollTop <= 250;
+
+    if ( isNearBottom ) {
+
+      msgsRef.current.scrollTo( {
+        top: msgsRef.current.scrollHeight,
+        // behavior: "smooth"
+      } );
+
+      // msgsRef.current.scrollIntoView( { behavior: 'smooth', block: 'end' } );
+
+    }
+
+  }, 500 );
+
+  useEffect( () => {
+    if ( messages.length ) {
+
+      debouncedScrollToBottom();
+
+      if ( !pageRendered ) {
+        msgsRef.current.scroll( 0, msgsRef.current.scrollHeight );
+      }
+
+      setPageRendered( true );
+    }
+  }, [ messages ] );
+
+  useEffect( () => {
+
+    console.log( "useffectt newPromp: ", newPrompt );
+
+    if ( newPrompt.length == 2 ) {
+
+      // setMessages( prev => [ ...prev,
+      // { content: newPrompt[ 0 ].value, role: "user", key: newPrompt[ 0 ].key },
+      // { content: newPrompt[ 1 ].value, role: "assistant", key: newPrompt[ 1 ].key }
+      // ] );
+
+      const sendMsg = async () => {
+        try {
+
+          let currentDate = new Date();
+
+          await insertData( {
+            table: "prompts",
+            object: {
+              author: session?.user.id,
+              prompt: newPrompt,
+              created_at: `${ currentDate.getDate() }-${ currentDate.toLocaleString( 'default', { month: 'long' } ).substring( 0, 3 ) } ${ currentDate.getFullYear() }`
+            }
+          } );
+
+        } catch ( e ) {
+          console.log( e );
+        } finally {
+          setNewPrompt( [] );
+        }
+      };
+
+      sendMsg();
+
+    }
+
+
+  }, [ newPrompt ] );
+
+  const handleTermination = () => {
+    // setProcessing( false );
+    stop();
+    setNewPrompt( [] );
+  };
+
+  const handleInputSubmit = e => {
+    if ( e.key == "Enter" && !e.shiftKey && !isLoading && !isMobile ) {
+      // e.preventDefault();
+      send( e );
+    } else if ( isMobile && e.key == "Enter" ) {
+      return;
+    }
+  };
+
+  const handleInputChange = useCallback( ( e ) => {
+
+    inputChange( e );
+
+    e.target.style.height = 'auto';
+    e.target.style.height = e.target.scrollHeight + 'px';
+
+  }, [] );
+
+  function handleExampleCopy ( e ) {
+    let text = e.target.innerText;
+    text = [ ...text ];
+
+    text.pop();
+    text.shift();
+    text = text.join( "" );
+
+    navigator.clipboard.writeText( text );
+  }
+
+  function handleBottomButtonClick () {
+    msgsRef.current.scrollTo( {
+      top: msgsRef.current.scrollHeight,
+      behavior: "smooth"
+    } );
+  }
+
+  return (
+    <>
+      { ( !messages.length && !Msgsloading ) && (
+        <>
+          <Image
+            src={ darkMode ? "/logo.png" : "/logo-dark.png" }
+            alt='logo'
+            width={ 100 }
+            height={ 65 }
+            className={ `${ styles[ 'placeholder-img' ] } ${ !darkMode ? styles[ "light" ] : "" }` }
+          />
+          <h1 className={ `${ styles[ 'title' ] } ${ !darkMode ? styles[ "light" ] : "" }` }><span className={ styles[ 'highlight' ] }>RayAI:{ " " }</span>Your Personal AI.</h1>
+          <div className={ `${ styles[ "examples" ] } ${ !darkMode ? styles[ "light" ] : "" }` }>
+            <div className={ styles[ "example" ] }>
+              <div className={ styles[ "header" ] }>
+                <FontAwesomeIcon className={ styles[ 'example-icon' ] } icon={ faBarsStaggered } />
+                <span>Example</span>
+              </div>
+              <div className={ styles[ "columns" ] }>
+                <p className={ styles[ "col" ] } onClick={ handleExampleCopy }>{ `"Tell me about the history of Eiffel Tower."` }</p>
+                <p className={ styles[ "col" ] } onClick={ handleExampleCopy }>{ `"Give me information related to EarthQuakes."` }</p>
+                <p className={ styles[ "col" ] } onClick={ handleExampleCopy }>{ `"Calculate the derivative of the function : 4x + 9"` }</p>
+              </div>
+            </div>
+            <div className={ styles[ "example" ] }>
+              <div className={ styles[ "header" ] }>
+                <FontAwesomeIcon className={ styles[ 'example-icon' ] } icon={ faTriangleExclamation } />
+                <span>Limitations</span>
+              </div>
+              <div className={ styles[ "columns" ] }>
+                <p className={ styles[ "col" ] }>{ `May Somatimes produce in-accurate Results.` }</p>
+                <p className={ styles[ "col" ] }>{ `Might Create Harmful or Biased Content.` }</p>
+                <p className={ styles[ "col" ] }>{ `Limited Knowledge.` }</p>
+              </div>
+            </div>
+          </div>
+        </>
+      ) }
+
+      <div className={ `${ styles[ "msgs" ] } ${ !darkMode ? styles[ "light" ] : "" }` } ref={ msgsRef }>
+        { messages.map( ( m, i, a ) => (
+          <>
+            <Message id={ m.key } msg={ m } session={ session } key={ i } styles={ styles } />
+
+            { ( () => {
+
+              if ( i == a.length - 1 ) {
+                if ( m.role == "user" && isLoading ) {
+                  return (
+                    <Message id={ "" } msg={ { content: "...", id: "", role: "assistant" } } session={ session } key={ i + 1 } styles={ styles } />
+                  );
+                }
+              }
+
+            } )() }
+          </>
+        ) ) }
+      </div>
+      {/* { !isMobile && (
+        <button onClick={ handleTermination } className={ `${ styles[ "terminate" ] } ${ isLoading ? styles[ "processing" ] : "" }` }>Terminate...</button>
+      )} */}
+      { buttonToBottom && (
+        <button onClick={ handleBottomButtonClick } type='button' className={ styles[ "to-bottom" ] }><FontAwesomeIcon icon={ faChevronDown } /></button>
+      ) }
+      <div className={ `${ styles[ "input" ] } ${ !darkMode ? styles[ "light" ] : "" }` }>
+        <textarea rows={ 1 } onKeyDown={ handleInputSubmit } type="text" placeholder='Enter Prompt' onInput={ handleInputChange } value={ input } />
+        <button type='button' title={ isLoading ? "Terminate" : "Send" } onClick={ !isLoading ? send : handleTermination }>
+          { !isLoading ? (
+            <FontAwesomeIcon icon={ faPaperPlane } />
+          ) : (
+            <FontAwesomeIcon icon={ faStop } />
+          ) }
+        </button>
+      </div>
+      <p className={ styles[ 'note' ] }>Free Research Preview. RayAI may produce inaccurate information about people, places, or facts.</p>
+    </>
+  );
+};
+
+export default memo( Chat );

app/Components/Chat/chat.module.css

@@ -0,0 +1,516 @@
+h1.title {
+  color: rgba(255, 255, 255, 0.2);
+  text-align: center;
+  font-family: Righteous;
+  font-size: 2vw;
+  position: absolute;
+  top: 15.5vh;
+  left: 50%;
+  width: 90%;
+  transform: translateX(-50%);
+}
+
+h1.title.light {
+  color: #05858d5c;
+}
+
+h1.title.light span.highlight {
+  color: #05858d5c;
+}
+
+img.placeholder-img {
+  opacity: 0.3;
+  position: absolute;
+  top: 3.1vh;
+  /* Updated from 3.1vh to 6.4vh */
+  width: 7.43vw;
+  height: auto !important;
+}
+
+div.msgs {
+  /* background: #000; */
+  width: 100%;
+  height: calc(100% - 20.5vh);
+  /* Updated from 7.5vw to 15.5vh */
+  overflow-y: auto;
+  overflow-x: hidden;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  /* align-items: center; */
+  gap: 3.1vh;
+  padding: 1.5vw 1.5vw 6vw 1.5vw;
+  /* scroll-behavior: smooth; */
+  transition: 150ms ease-in-out;
+}
+
+div.input {
+  display: flex;
+  /* position: fixed; */
+  bottom: 48px;
+
+  position: absolute;
+  /* margin-bottom: 15.7vh; now*/
+  /* Updated from 4.2vw to 8.7vh */
+  height: fit-content;
+  width: 80%;
+  align-items: center;
+  justify-content: center;
+  transition: 150ms ease-in-out;
+}
+
+div.input textarea,
+div.input button {
+  outline: none;
+  border: none;
+  transition: 150ms ease-in-out;
+  z-index: 100;
+}
+
+div.input textarea {
+  position: relative;
+  padding: 1.9vh 5.625vw 1.9vh 1.35vw;
+  /* Updated padding values */
+  min-height: 7.12vh;
+  /* Updated from 3.45vw to 7.12vh */
+  height: 7.12vh;
+  /* Updated from 3.45vw to 7.12vh */
+  width: 100%;
+  /* bottom: -7.5vh; now */
+  /* Updated from 0.375vw to 0.77vh */
+  font-family: AbeeZee;
+  line-height: 1.6;
+  max-height: 20.12vh;
+  /* Updated from 9.75vw to 20.12vh */
+  box-sizing: border-box;
+  resize: none;
+  font-family: Abeezee;
+  border-radius: .525vw;
+  font-size: 1.1vw;
+  color: #cbcbcb;
+  background: #2a3e43;
+  transition: 200ms ease-in-out;
+  /* #364057 */
+}
+
+div.input.light textarea {
+  background: #fff;
+  box-shadow: 0 0 2px #b9b9b9;
+  color: #474747;
+}
+
+div.code-options {
+  position: absolute;
+  bottom: .3vw;
+  left: calc(100% - 2.8vw);
+  display: none;
+  transition: 150ms ease-in-out;
+}
+
+div.markdown-content pre:hover div.code-options {
+  display: inline-block;
+}
+
+div.code-options > * {
+  padding: .6vw;
+  cursor: pointer;
+  border-radius: .35vw;
+}
+
+div.code-options > *:hover {
+  background: #cde5eb;
+  color: #474747;
+}
+
+button.terminate {
+  position: absolute;
+  bottom: 5vw;
+  transition: 200ms ease-in-out;
+  border: none;
+  padding: .9vw 5vw;
+  cursor: pointer;
+  border-radius: .4vw;
+  color: white;
+  opacity: 0;
+  background: linear-gradient(108deg, #052437 -7.56%, #14507d 29.51%, #47a2a5 69.57%, #bcf7ff 107.24%);
+}
+
+button.terminate.processing {
+  bottom: 11vw;
+  opacity: 1;
+}
+
+button.terminate:hover {
+  transform: scale(1.04);
+}
+
+div.input button {
+  height: 6.51vh;
+  /* Updated from 3.15vw to 6.51vh */
+  width: 3.15vw;
+  position: absolute;
+  right: 1.5vw;
+  background: transparent;
+  cursor: pointer;
+  font-size: 1.6vw;
+  /* Updated from 1.6vw to 3.29vh */
+  color: #dadada;
+  /* bottom: -7.5vh; */
+  /* Updated from 0.375vw to 0.77vh */
+}
+
+div.input.light button {
+  color: #18868d;
+}
+
+p.note {
+  position: absolute;
+  bottom: 3.72vh;
+  /* Updated from 1.8vw to 3.72vh */
+  font-size: .83vw;
+  font-family: Quicksand;
+  color: #cbcbcb;
+  width: 80%;
+  text-align: center;
+}
+
+div.examples {
+  position: absolute;
+  top: calc(50%);
+  transform: translateY(-50%);
+  display: flex;
+  flex-direction: row;
+  width: calc(100% - 35.5vw);
+  /* Updated from 35.5vw to 73.63vh */
+  gap: 3vw;
+  /* Updated from 3vw to 6.21vh */
+  transition: 150ms;
+  z-index: 100;
+}
+
+div.example {
+  background: #ffffff05;
+  border: 1px solid #365057;
+  border-radius: 1.1247vw;
+  display: flex;
+  flex-direction: column;
+  gap: 2.42vh;
+  padding: 1.12vw;
+  color: #bfbfbf;
+  font-family: Quicksand;
+  width: 100%;
+  transition: 150ms;
+}
+
+div.examples.light div.example {
+  background: #fff;
+  /* border-color: #dee7e9; */
+  border: none;
+  color: #676767;
+  box-shadow: 0 0 5px #e9e9e9;
+}
+
+div.header {
+  color: #eee;
+  display: flex;
+  flex-direction: row;
+  gap: 1vw;
+  align-items: center;
+  font-size: 1.4vw;
+}
+
+div.header .example-icon {
+  padding: .55vw;
+  background: #18868d;
+  border-radius: .5vw;
+}
+
+div.examples.light div.example div.header .example-icon {
+  color: #18868d;
+  background: white;
+}
+
+div.columns {
+  display: flex;
+  flex-direction: column;
+  gap: 1.55vh;
+  /* Updated from 0.75vw to 1.55vh */
+}
+
+div.msgs.light div.user,
+div.msgs.light div.ai {
+  border-color: #c9e0df;
+  background: #def7f352;
+  color: #254a4d;
+}
+
+div.msgs div.markdown-content > pre {
+  position: relative;
+}
+
+div.msgs.light div.markdown-content > pre > pre {
+  border: 1px solid #e8ebec;
+  transition: 150ms ease-in-out;
+}
+
+div.examples.light div.example div.header {
+  color: #18868d;
+}
+
+div.columns p.col {
+  padding: .891vw;
+  border-radius: .586vw;
+  background: #ffffff15;
+  font-size: .935vw;
+  cursor: pointer;
+  transition: 200ms ease-in-out;
+}
+
+div.columns p.col:hover {
+  transform: scale(1.04);
+}
+
+div.markdown-content,
+div.markdown-content * {
+  white-space: pre-wrap;
+  line-height: 1.7;
+}
+
+div.ai .text-pic,
+div.user .text-pic {
+  width: 2.7vw;
+  height: 2.7vw;
+  position: absolute;
+  top: 2.8vh;
+  border-radius: .5vw;
+}
+
+div.ai .text-pic {
+  left: -1vw;
+}
+
+div.user .text-pic {
+  left: calc(100% - 1.8vw);
+}
+
+div.user,
+div.ai {
+  font-family: abeezee;
+  font-size: 1vw;
+  background: #5656563c;
+  max-width: 55%;
+  border: #365057 1px solid;
+  display: flex;
+  color: #bebebe;
+  flex-direction: row;
+  /* width: calc(100% - 1.8vw); */
+  width: fit-content;
+  position: relative;
+  transition: 200ms ease-in-out;
+}
+
+div.ai {
+  left: .8vw;
+  padding: 2vw 2vw 2vw 3vw;
+  border-radius: 1.4vw 2vw .4vw 1.4vw;
+}
+
+div.user {
+  position: relative;
+  /* setting the left property in Message.jsx (from js) */
+  padding: 2vw 3vw 2vw 2vw;
+  opacity: 0;
+  border-radius: 2vw 1.4vw 1.4vw .4vw;
+  transition: 150ms ease-in-out;
+}
+
+button.to-bottom {
+  position: fixed;
+  bottom: 25vh;
+  right: 8vw;
+  height: 3vw;
+  font-size: 1.1vw;
+  width: 3vw;
+  border: none;
+  cursor: pointer;
+  outline: none;
+  border-radius: 50%;
+  color: #254a4d;
+  transition: 150ms ease-out;
+}
+
+button.to-bottom:hover {
+  transform: scale(1.1);
+}
+
+@keyframes msg {
+  0% {
+    height: 0;
+  }
+
+  100% {
+    height: auto;
+  }
+}
+
+@media (max-width: 768px) {
+  div.msgs {
+    /* background: #000; */
+    width: 100%;
+    height: calc(100vh - 220px);
+    top: 20px;
+    /* Updated from 7.5vw to 15.5vh */
+    gap: 20px;
+    padding: 7px 7px 14px 7px;
+    /* scroll-behavior: smooth; */
+    transition: 150ms ease-in-out;
+  }
+
+  div.input {
+    display: flex;
+    position: absolute;
+    margin: 0;
+    bottom: 90px;
+    /* Updated from 4.2vw to 8.7vh */
+    height: fit-content;
+    width: 83%;
+    align-items: center;
+    justify-content: center;
+    transition: 150ms ease-in-out;
+  }
+
+  div.input textarea,
+  div.input button {
+    outline: none;
+    border: none;
+    transition: 150ms ease-in-out;
+    z-index: 100;
+  }
+
+  div.input textarea {
+    position: relative;
+    padding: 6px 53px 6px 13px;
+    /* Updated padding values */
+    min-height: 29px;
+    /* Updated from 3.45vw to 7.12vh */
+    height: 29px;
+    /* Updated from 3.45vw to 7.12vh */
+    width: 100%;
+    bottom: 0;
+    /* Updated from 0.375vw to 0.77vh */
+    font-family: AbeeZee;
+    line-height: 1.6;
+    max-height: 150px;
+    /* Updated from 9.75vw to 20.12vh */
+    box-sizing: border-box;
+    resize: none;
+    font-family: Abeezee;
+    border-radius: 5px;
+    font-size: 12px;
+    color: #cbcbcb;
+    background: #2a3e43;
+    /* #364057 */
+    overflow: hidden;
+  }
+
+  div.input.light textarea {
+    background: #fff;
+    box-shadow: 0 0 2px #b9b9b9;
+    color: #474747;
+  }
+
+  div.input button {
+    height: 29px;
+    /* Updated from 3.15vw to 6.51vh */
+    width: 29px;
+    position: absolute;
+    right: 10px;
+    background: transparent;
+    cursor: pointer;
+    font-size: 12px;
+    /* Updated from 1.6vw to 3.29vh */
+    color: #dadada;
+    bottom: 0;
+    /* Updated from 0.375vw to 0.77vh */
+  }
+
+  div.ai .text-pic,
+  div.user .text-pic {
+    width: 20px;
+    height: 20px;
+    position: absolute;
+    top: 11px;
+    border-radius: 6px;
+  }
+
+  div.ai .text-pic {
+    left: -10px;
+  }
+
+  div.user .text-pic {
+    left: calc(100% - 12px);
+  }
+
+  div.user,
+  div.ai {
+    font-size: 12px;
+    border-radius: 10px;
+    border: #365057 1px solid;
+    color: #bebebe;
+    width: fit-content;
+    max-width: calc(100% - 20px);
+    position: relative;
+    transition: 200ms ease-in-out;
+  }
+
+  div.ai {
+    left: 8px;
+    padding: 10px 10px 10px 23px;
+  }
+
+  div.user {
+    position: relative;
+    /* setting the left property in Message.jsx (from js) */
+    padding: 10px 23px 10px 10px;
+    opacity: 0;
+    transition: 150ms ease-in-out;
+  }
+
+  /* .text-pic {
+    width: 20px;
+    height: 20px;
+    position: absolute;
+    left: -10px;
+    top: 11px;
+    border-radius: .5vw;
+  } */
+
+  button.terminate {
+    position: absolute;
+    bottom: -30px;
+    transition: 200ms ease-in-out;
+    border: none;
+    width: 120px;
+    height: 28px;
+    font-size: 11px;
+    border-radius: 5px;
+    color: white;
+    border: 2px solid;
+    background: none;
+    opacity: 0;
+    border-image: linear-gradient(108deg, #052437 -7.56%, #14507d 29.51%, #47a2a5 69.57%, #bcf7ff 107.24%) 1;
+  }
+
+  button.terminate.processing {
+    bottom: 80px;
+    opacity: 1;
+  }
+
+  p.note {
+    position: fixed;
+    bottom: 70px;
+    /* Updated from 1.8vw to 3.72vh */
+    font-size: 6px;
+    width: 85%;
+  }
+}

app/Components/MarkdownRenderer/MarkdownRenderer.jsx

@@ -0,0 +1,58 @@
+"use client";
+
+import { useTheme } from '@/app/Contexts/ThemeContext/ThemeContext';
+import { faCopy as copyRegular } from '@fortawesome/free-regular-svg-icons';
+import { faCopy as copySolid } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { memo, useRef, useState } from 'react';
+import ReactMarkdown from 'react-markdown';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { atomDark, oneLight } from 'react-syntax-highlighter/dist/cjs/styles/prism';
+
+const MarkdownRenderer = ( { text, className, optionsClassName = "" } ) => {
+
+  const { darkMode } = useTheme();
+  const [ copied, setCopied ] = useState( false );
+
+  return (
+    <div className={ className }>
+      <ReactMarkdown components={ {
+        code ( { node, inline, className, children, ...props } ) {
+          const match = /language-(\w+)/.exec( className || "" );
+          return match ? (
+            <>
+              <SyntaxHighlighter
+                children={ String( children ).replace( /\n$/, "" ) }
+                language={ match[ 1 ] }
+                style={ darkMode ? atomDark : oneLight }
+                { ...props }
+              />
+              <div className={ optionsClassName }>
+                <FontAwesomeIcon onClick={ ( e ) => {
+                  if ( !copied ) {
+                    navigator.clipboard.writeText( e.target.parentNode.previousSibling?.innerText );
+                    setCopied( true );
+                    let timeOut = setTimeout( () => {
+                      setCopied( false );
+                      clearTimeout( timeOut );
+                    }, 2000 );
+                  }
+                } } icon={ copied ? copySolid : copyRegular } />
+              </div>
+            </>
+          ) : (
+            <>
+              <code className={ className } { ...props }>
+                { children }
+              </code>
+            </>
+          );
+        },
+      } }>
+        { text }
+      </ReactMarkdown>
+    </div>
+  );
+};
+
+export default memo( MarkdownRenderer );

app/Components/Message/Message.jsx

@@ -0,0 +1,40 @@
+import { memo, useRef } from 'react';
+import MarkdownRenderer from '../MarkdownRenderer/MarkdownRenderer';
+import Image from 'next/image';
+import { isMobileDevice } from '@/app/Contexts/IsMobileContext/IsMobileContext';
+
+
+const Message = ( { msg, session, styles, onClick = () => { }, id } ) => {
+
+
+  const { isMobile } = isMobileDevice();
+
+  return (
+    <div className={ msg.role == "user" ? styles[ "user" ] : styles[ "ai" ] }
+      onLoad={ ( e ) => {
+        if ( msg.role == "user" ) {
+          e.currentTarget.style.left = !isMobile ? `calc(100% - ${ ( e.currentTarget.offsetWidth / window.innerWidth ) * 100 }vw - .8vw )` : `calc( 100% - ${ ( e.currentTarget.offsetWidth ) }px - 5px)`;
+          e.currentTarget.style.opacity = 1;
+        }
+      } }
+      style={ {
+        animation: "msg ease-in-out 2s 1",
+      } }
+      id={ id || msg.key }
+      onClick={ onClick }
+    >
+      <Image
+        src={ msg.role.toLowerCase() != "user" ? "/RayAI.svg" : session?.user.image }
+        alt='img'
+        width={ 50 }
+        height={ 50 }
+        className={ styles[ 'text-pic' ] }
+      />
+      {/* <p key={ key } className={ styles[ "msg" ] }>{ marked( msg.content ) }</p> */ }
+      <MarkdownRenderer text={ msg.content } optionsClassName={ styles[ "code-options" ] } className={ styles[ "markdown-content" ] } />
+
+    </div>
+  );
+};
+
+export default memo( Message );

app/Components/ToggleButton/ToggleButton.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import styles from "./ToggleButton.module.css";
+
+const ToggleButton = ( { checked = true, className = "", ...props } ) => {
+  return (
+    <label className={ `${ styles[ "switch" ] } ${ className }` }>
+      <input type="checkbox" checked={ checked } { ...props } />
+      <span className={ styles[ "slider" ] }></span>
+    </label>
+  );
+};
+
+export default ToggleButton;

app/Components/ToggleButton/ToggleButton.module.css

@@ -0,0 +1,72 @@
+label.switch {
+  position: relative;
+  display: inline-block;
+  width: 3.5vw;
+  height: 4.5vh;
+}
+
+label.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+span.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  -webkit-transition: .4s;
+  transition: .4s;
+  border-radius: 34px;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 4.2vh;
+  width: 4.2vh;
+  left: .05vw;
+  bottom: .2vh;
+  background-color: white;
+  -webkit-transition: .4s;
+  transition: .4s;
+  border-radius: 50%;
+}
+
+input:checked + .slider {
+  background-color: #23bca6;
+}
+
+input:focus + .slider {
+  box-shadow: 0 0 1px #0a9290;
+}
+
+input:checked + .slider:before {
+  -webkit-transform: translateX(1.4vw);
+  -ms-transform: translateX(1.4vw);
+  transform: translateX(1.4vw);
+}
+
+@media (max-width: 767px) {
+  label.switch {
+    width: 35px;
+    height: 20px;
+  }
+
+  .slider:before {
+    height: 17px;
+    width: 17px;
+    left: 1px;
+    bottom: 1.5px;
+  }
+
+  input:checked + .slider:before {
+    -webkit-transform: translateX(17px);
+    -ms-transform: translateX(17px);
+    transform: translateX(17px);
+  }
+}

app/Contexts/IsMobileContext/IsMobileContext.js

@@ -0,0 +1,35 @@
+"use client";
+import { createContext, useContext, useEffect, useState } from 'react';
+
+const IsMobileContext = createContext();
+
+export const isMobileDevice = () => {
+  return useContext( IsMobileContext );
+};
+
+const IsMobileProvider = ( { children } ) => {
+
+  const [ isMobile, setIsMobile ] = useState( true );
+
+  return (
+    <IsMobileContext.Provider value={ { isMobile, setIsMobile } }>{ children }</IsMobileContext.Provider>
+  );
+};
+
+
+const toggleNavContext = createContext();
+
+export const toggleNavDevice = () => {
+  return useContext( toggleNavContext );
+};
+
+export const ToggleNavProvider = ( { children } ) => {
+
+  const [ toggleNav, setToggleNav ] = useState( false );
+
+  return (
+    <toggleNavContext.Provider value={ { toggleNav, setToggleNav } }>{ children }</toggleNavContext.Provider>
+  );
+};
+
+export default IsMobileProvider;

app/Contexts/MessagesContext/MessagesContext.jsx

@@ -0,0 +1,82 @@
+"use client";
+import { getUser } from '@/Provider/Provider';
+import { getData } from '@/app/Supabase/Supabase';
+import { createContext, useContext, useEffect, useState } from 'react';
+
+const MessagesContext = createContext();
+
+export const useMessages = () => {
+  return useContext( MessagesContext );
+};
+
+
+function* convertArray ( inputArray ) {
+  // const outputArray = [];
+
+  for ( const [ user, assistant ] of inputArray ) {
+    const userValue = user.value;
+    const assistantValue = assistant.value;
+
+    if ( userValue.trim().length && assistantValue.trim().length ) {
+      // outputArray.push(
+      yield { content: userValue, role: "user", key: user.key };
+      yield { content: assistantValue, role: "assistant", key: assistant.key };
+      // );
+    }
+  }
+
+  // return outputArray;
+}
+
+
+const MessagesProvider = ( { children } ) => {
+
+  const [ messages, setMessages ] = useState( [] );
+  const [ Msgsloading, setMsgsLoading ] = useState( true );
+
+  useEffect( () => {
+
+    const fetchMessages = async () => {
+
+      let { session, signedIn } = await getUser();
+      if ( signedIn ) {
+
+        try {
+
+          let { data: prompts } = await getData( {
+            table: "prompts",
+            columns: "prompt",
+            orderBy: {
+              property: "id",
+              ascending: true
+            },
+            where: {
+              author: `${ session.user.id }`
+            }
+          } );
+
+          if ( prompts.length ) {
+            console.time( "start" );
+            setMessages( [ ...convertArray( prompts.map( prompt => prompt.prompt ) ) ] );
+            console.timeEnd( "start" );
+          }
+
+        } catch ( e ) {
+          console.log( e );
+        } finally {
+          setMsgsLoading( false );
+        }
+      }
+
+    };
+
+    fetchMessages();
+
+  }, [] );
+
+  return (
+    <MessagesContext.Provider value={ { messages, setMessages, Msgsloading } }>{ children }</MessagesContext.Provider>
+  );
+};
+
+export default MessagesProvider;

app/Contexts/ThemeContext/ThemeContext.jsx

@@ -0,0 +1,60 @@
+"use client";
+import React, { createContext, useContext, useEffect, useState } from 'react';
+
+const ThemeContext = createContext();
+
+export const useTheme = () => {
+  return useContext( ThemeContext );
+};
+
+const ThemeProvider = ( { children } ) => {
+
+  const [ darkMode, setDarkMode ] = useState();
+
+  useEffect( () => {
+    const storedDarkMode = JSON.parse( localStorage.getItem( "darkMode" ) );
+
+    if ( storedDarkMode && "darkMode" in storedDarkMode ) {
+      setDarkMode( storedDarkMode.darkMode );
+      console.log( storedDarkMode );
+    } else {
+      setDarkMode( true );
+      console.log( storedDarkMode );
+    }
+  }, [] );
+
+
+  useEffect( () => {
+    const rootStyles = getComputedStyle( document.documentElement );
+    const getProp = rootStyles.getPropertyValue.bind( rootStyles );
+
+    if ( darkMode != undefined && darkMode != null && typeof darkMode != "undefined" ) localStorage.setItem( "darkMode", JSON.stringify( { darkMode } ) );
+
+    if ( darkMode ) {
+      document.body.classList.remove( "lightMode" );
+      document.documentElement.style.setProperty( "--top-left", getProp( "--top-left-dark" ) );
+      document.documentElement.style.setProperty( "--mid-left", getProp( "--mid-left-dark" ) );
+      document.documentElement.style.setProperty( "--center", getProp( "--center-dark" ) );
+      document.documentElement.style.setProperty( "--top-right", getProp( "--top-right-dark" ) );
+      document.documentElement.style.setProperty( "--bottom-right", getProp( "--bottom-right-dark" ) );
+    } else {
+      document.body.classList.add( "lightMode" );
+      document.documentElement.style.setProperty( "--top-left", getProp( "--top-left-light" ) );
+      document.documentElement.style.setProperty( "--mid-left", getProp( "--mid-left-light" ) );
+      document.documentElement.style.setProperty( "--center", getProp( "--center-light" ) );
+      document.documentElement.style.setProperty( "--top-right", getProp( "--top-right-light" ) );
+      document.documentElement.style.setProperty( "--bottom-right", getProp( "--bottom-right-light" ) );
+    }
+
+  }, [ darkMode ] );
+
+  const toggleDarkMode = () => {
+    setDarkMode( prev => !prev );
+  };
+
+  return (
+    <ThemeContext.Provider value={ { darkMode, toggleDarkMode } }>{ children }</ThemeContext.Provider>
+  );
+};
+
+export default ThemeProvider;

app/Supabase/Supabase.js

@@ -0,0 +1,193 @@
+import { createClient } from '@supabase/supabase-js';
+
+const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
+const supabaseKey = process.env.NEXT_PUBLIC_SUPABASE_KEY;
+
+export const supabase = createClient(supabaseUrl, supabaseKey, {
+  auth: { persistSession: false }
+});
+
+
+
+export const getData = async ({
+  table,
+  range,
+  columns = [],
+  where = {},
+  contains = {},
+  orderBy = {
+    property: 'id',
+    ascending: false
+  }
+}) => {
+
+  try {
+
+    if (Array.isArray(columns)) {
+      columns = columns.join(",");
+    }
+
+    let Data = supabase
+      .from(table)
+      .select(columns)
+      .match(where)
+      .order(orderBy.property, { ascending: orderBy.ascending });
+
+    if (range && range.length === 2) {
+      Data.range(range[0], range[1]);
+    }
+
+    if (Object.keys(contains).length) {
+      for (let key in contains) {
+        Data.ilike(key, `%${contains[key].join("%")}%`);
+      }
+    }
+
+    Data = await Data;
+
+    return { data: Data.data, statusText: Data.statusText, error: Data.error };
+
+  } catch (error) {
+
+    console.log(error);
+
+  }
+
+  return false;
+
+};
+
+export const insertData = async ({
+  table,
+  object
+}) => {
+
+  try {
+
+    const { data, error, statusText } = await supabase
+      .from(table)
+      .insert(object)
+      .select();
+
+    return { data, error, statusText };
+
+  } catch (error) {
+
+    console.log(error);
+
+  }
+
+  return false;
+
+};
+
+export const updateData = async ({
+  table,
+  object,
+  where
+}) => {
+
+  try {
+
+    let Data = await supabase
+      .from(table)
+      .update(object)
+      .match(where);
+
+
+    return Data.data;
+
+  } catch (error) {
+
+    console.log(error);
+
+  }
+
+  return false;
+
+};
+
+export const exists = async ({
+  table,
+  where,
+  columns = []
+}) => {
+  try {
+
+    if (Array.isArray(columns)) {
+      columns = columns.join(",");
+    }
+
+    let { data, error } = await supabase
+      .from(table)
+      .select(columns)
+      .match(where);
+
+    return !!data.length;
+
+  } catch (e) {
+    console.log(e);
+  }
+
+  return false;
+};
+
+export const deleteData = async ({
+  table,
+  where,
+}) => {
+  try {
+    const { data, error, statusText } = await supabase
+      .from(table)
+      .delete()
+      .match(where);
+
+    return { data, error, statusText };
+  } catch (e) {
+    console.log(e);
+  }
+
+  return false;
+};
+
+export const uploadFile = async (userID, postID, id, file) => {
+
+  try {
+
+    supabase.storage
+      .from("images")
+      .upload(`users/${userID}/${postID}/${id}`, file, {
+        cacheControl: '3600',
+        upsert: false
+      }).then(console.log);
+
+  } catch (e) {
+
+    console.log(e);
+
+  }
+
+};
+
+export const getFile = (FolderPath, id) => {
+
+  let { data: { publicUrl: src } } = supabase.storage.from(`images/${FolderPath}`).getPublicUrl(id);
+
+  return src;
+
+};
+
+export const deleteFile = async (path) => {
+
+  let { data } = await supabase.storage.from(`images`).remove([`${path}`]);
+
+  return data;
+
+};
+
+export const deleteAllFiles = async (FolderPath) => {
+  let { data: list } = await supabase.storage.from(`images`).list(FolderPath);
+  const filesToDelete = list.map(file => `${FolderPath}/${file.name}`);
+  const { data, error } = await supabase.storage.from("images").remove(filesToDelete);
+  return data;
+};

app/api/api-access/route.js

@@ -0,0 +1,115 @@
+import { createTransport } from 'nodemailer';
+
+export async function POST ( req ) {
+    const { email } = await req.json();
+
+    try {
+        const transporter = createTransport( {
+            service: "SMTP",
+            host: "aions.co",
+            port: 465,
+            auth: {
+                user: "chat@aions.co",
+                pass: process.env.SMTP_PASS
+            }
+        } );
+
+        const res = await transporter.sendMail( {
+            from: 'aions.co <chat@aions.co>',
+            to: email,
+            subject: 'Early Access Signup Confirmation',
+            html: `<!DOCTYPE html>
+      <html>
+      <head>
+          <style>
+              body {
+                  font-family: Arial, sans-serif;
+                  margin: 0;
+                  padding: 0;
+                  background-color: #f4f4f4;
+              }
+              .header {
+                  background-color: #0073e6;
+                  color: #fff;
+                  text-align: center;
+                  padding: 20px;
+              }
+              .container {
+                  max-width: 600px;
+                  margin: 0 auto;
+                  background-color: #fff;
+                  border-radius: 5px;
+                  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+              }
+              .services {
+                  padding: 20px;
+              }
+              .services h2{
+                  color: black;
+              }
+              .service {
+                  margin-bottom: 20px;
+              }
+              .service h3 {
+                  color: #0073e6;
+              }
+              .service p {
+                  line-height: 1.6;
+                  color: #333;
+              }
+              .contact {
+                  text-align: center;
+                  margin-top: 20px;
+              }
+              .thanks {
+                  text-align: center;
+                  background-color: #0073e6;
+                  color: #fff;
+                  padding: 10px;
+              }
+          </style>
+      </head>
+      <body>
+          <div class="header">
+              <h1>AIONS (Animated Interactive Objects and Neural Software)</h1>
+              <p>Revolutionizing animation with the power of AI</p>
+          </div>
+          <div class="container">
+              <div class="services">
+                  <h2>Our Services</h2>
+                  <div class="service">
+                      <h3>PreBytes</h3>
+                      <p>We specialize in developing games that push the boundaries of innovation and entertainment. Our team of experienced game developers and AI engineers collaborate to create immersive gaming experiences that adapt and learn from player behavior. From procedural generation and intelligent NPCs to adaptive difficulty and real-time decision-making, our AI game development services will take your gaming experience to the next level.</p>
+                  </div>
+                  <div class="service">
+                      <h3>Chaperone</h3>
+                      <p>An Android app connecting users with companions for enjoyable activities and conversations. Personalized and convenient, it's the platform for meaningful connections and memorable experiences.</p>
+                  </div>
+                  <div class="service">
+                      <h3>Valora</h3>
+                      <p>Valora is a pioneering software company specializing in HR Management services. With a focus on modernizing and streamlining human resources processes, Valora offers innovative solutions to optimize talent acquisition, employee onboarding, performance management, and more. Through its cutting-edge technology, Valora empowers businesses to enhance workforce efficiency, engagement, and overall organizational success. With a commitment to delivering user-friendly and scalable HR solutions, Valora is reshaping the future of human resource management for companies across various industries.</p>
+                  </div>
+                  <div class="service">
+                      <h3>Neural Softwares</h3>
+                      <p>Neural Softwares is a pioneering AI company at the forefront of developing a diverse range of cutting-edge AI tools. Leveraging advanced neural network architectures and machine learning techniques, Neural Softwares creates innovative solutions tailored to address various industries' unique challenges. From natural language processing and computer vision to predictive analytics and automation, their AI tools empower businesses with intelligent insights and streamlined processes, unlocking new levels of efficiency and productivity.</p>
+                  </div>
+                  <div class="thanks">
+                      <p>Thank you for signing up for early access</p>
+                  </div>
+                  <div class="contact">
+                      <p>Contact: <a href="mailto:info@aions.co">info@aions.co</a></p>
+                  </div>
+              </div>
+          </div>
+      </body>
+      </html>
+      `
+        } );
+
+        return new Response( JSON.stringify( { response: res } ), { status: 200 } );
+
+    } catch ( e ) {
+        console.log( e );
+        return new Response( JSON.stringify( { error: e } ), { status: 500 } );
+    }
+}

app/api/auth/[...nextauth]/route.js

@@ -0,0 +1,77 @@
+import { exists, getData, insertData } from "@/app/Supabase/Supabase";
+import NextAuth from "next-auth";
+import GoogleProvider from "next-auth/providers/google";
+
+const handler = NextAuth( {
+
+  providers: [
+
+    GoogleProvider( {
+      clientId: process.env.GOOGLE_CLIENT_ID,
+      clientSecret: process.env.GOOGLE_CLIENT_SECRET
+    } )
+
+  ],
+  callbacks: {
+
+    async session ( { session, user, token } ) {
+      try {
+
+        const sessionUser = await getData( {
+          table: "users",
+          where: {
+            email: session.user.email
+          }
+
+        } ).then( users => users.data[ 0 ] );
+
+        session.user.id = sessionUser.id;
+
+        return session;
+
+      } catch ( e ) {
+        console.log( e );
+      }
+    },
+    async signIn ( { profile } ) {
+
+      try {
+
+        const userExist = await exists( {
+          table: "users",
+          where: {
+            email: profile.email
+          },
+          columns: "email"
+        } );
+
+        if ( !userExist ) {
+
+          const currentDate = new Date();
+
+          await insertData( {
+            table: "users",
+            object: {
+              email: profile.email,
+              name: profile.name.toLowerCase(),
+              image: profile.picture,
+              created_at: `${ currentDate.getDate() }-${ currentDate.toLocaleString( 'default', { month: 'long' } ).substring( 0, 3 ) } ${ currentDate.getFullYear() }`
+            }
+          } );
+
+        }
+
+        return true;
+
+      } catch ( e ) {
+
+        console.log( e );
+        return false;
+
+      }
+
+    }
+  }
+} );
+
+export { handler as GET, handler as POST };

app/api/bard/route.js

@@ -0,0 +1,52 @@
+import { DiscussServiceClient } from "@google-ai/generativelanguage";
+import { GoogleAuth } from "google-auth-library";
+
+
+const API_KEY = process.env.API_KEY;
+const MODEL_NAME = "models/chat-bison-001";
+
+const client = new DiscussServiceClient( {
+  authClient: new GoogleAuth().fromAPIKey( "AIzaSyA6B01DPsXtGIhUQjckCshbD1E99Edd2Tg" ),
+} );
+
+
+const MAX_RETRIES = 5;
+
+export const POST = async ( req, { params } ) => {
+  try {
+    let { messages } = await req.json();
+
+    let retries = 0;
+    let answer;
+
+    while ( retries < MAX_RETRIES ) {
+      console.log( `ran ${ retries + 1 } times` );
+      const result = await client.generateMessage( {
+        model: MODEL_NAME,
+        temperature: ( retries + 1.6 ) * 0.1,
+        prompt: {
+          context: "You Are Ray-AI and this is also your name.",
+          messages,
+        },
+      } );
+
+      if ( result[ 0 ]?.candidates?.[ 0 ]?.content ) {
+        answer = result[ 0 ].candidates[ 0 ].content;
+        break;
+      } else {
+        messages.push( { content: "hmm" } );
+        retries++;
+        console.log( result[ 0 ] );
+      }
+    }
+
+    if ( !answer ) {
+      return new Response( JSON.stringify( { answer: "I Apologize Can you Clearify?" } ), { status: 200 } );
+    }
+
+    return new Response( JSON.stringify( { answer } ), { status: 200 } );
+  } catch ( e ) {
+    console.log( e );
+    return new Response( JSON.stringify( { error: e } ), { status: 500 } );
+  }
+};

app/api/chat/route.js

@@ -0,0 +1,114 @@
+// // import { OpenAIStream, StreamingTextResponse } from "ai";
+// // import OpenAI from "openai";
+
+import axios from "axios";
+
+// // const openai = new OpenAI( {
+// //   apiKey: process.env.OPENAI_API_KEY,
+// // } );
+
+// // export const runtime = 'edge';
+
+// // export async function POST ( req ) {
+// //   try {
+// //     const { messages } = await req.json();
+// //     const response = await openai.chat.completions.create( {
+// //       model: 'gpt-3.5-turbo',
+// //       stream: true,
+// //       messages,
+// //     } );
+// //     const stream = OpenAIStream( response );
+// //     return new StreamingTextResponse( stream );
+// //   } catch ( e ) {
+// //     console.log( e );
+// //     return null;
+// //   }
+// // }
+
+
+// import { HfInference } from '@huggingface/inference';
+// import { HuggingFaceStream, StreamingTextResponse } from 'ai';
+// import { experimental_buildOpenAssistantPrompt } from 'ai/prompts';
+
+
+// const Hf = new HfInference( "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" );
+
+
+// export const runtime = 'edge';
+
+// export async function POST ( req ) {
+//   try {
+
+//     const { messages } = await req.json();
+
+//     const response = await Hf.textGenerationStream( {
+//       model: 'OpenAssistant/oasst-sft-4-pythia-12b-epoch-3.5',
+//       inputs: experimental_buildOpenAssistantPrompt( messages ),
+//       parameters: {
+//         max_new_tokens: 1000,
+//         // @ts-ignore (this is a valid parameter specifically in OpenAssistant models)
+//         typical_p: 0.2,
+//         repetition_penalty: 1,
+//         truncate: 1000,
+//         return_full_text: false,
+//       }
+//     } );
+
+
+//     const stream = HuggingFaceStream( response );
+
+
+//     return new StreamingTextResponse( stream );
+
+//   } catch ( e ) {
+//     console.log( e );
+//   }
+// }
+
+
+export async function POST ( req ) {
+  const { input, new_convo } = await req.json();
+
+  try {
+
+    // const response = await fetch( "https://AIONS.pythonanywhere.com/api/huggingface", {
+    //   method: "POST",
+    //   body: JSON.stringify( {
+    //     prompt: input,
+    //     chatbot_model: 0,
+    //     web_search: true,
+    //     new_conversation: new_convo
+    //   } ),
+    //   headers: {
+    //     'Content-Type': 'application/json',
+    //   }
+    // } );
+
+    // if ( response.ok ) {
+    //   const body = await response.json();
+    //   console.log( body.response );
+    //   return new Response( JSON.stringify( { body } ), { status: 200 } );
+    // }
+
+    // console.log( await response.json() );
+
+    let response = await axios.post( "https://AIONS.pythonanywhere.com/api/huggingface", {
+      prompt: input,
+      chatbot_model: 0,
+      web_search: true,
+      new_conversation: new_convo
+    } );
+
+    if ( response.status == 200 ) {
+      console.log( response.data.response );
+      return new Response( JSON.stringify( { body: { response: response.data.response } } ), { status: response.status } );
+    } else {
+      console.log( response.data );
+      return new Response( JSON.stringify( { error: { error: response.statusText } } ), { status: response.status } );
+    }
+
+  } catch ( e ) {
+    console.log( e );
+    return new Response( JSON.stringify( { error: e } ), { status: 500 } );
+  }
+}

app/globals.css

@@ -0,0 +1,169 @@
+@font-face {
+  font-family: Quicksand;
+  src: url("/Fonts/Quicksand.ttf");
+}
+
+@font-face {
+  font-family: Righteous;
+  src: url("/Fonts/Righteous.ttf");
+}
+
+@font-face {
+  font-family: Aharoni;
+  src: url("/Fonts/Aharoni.ttf");
+}
+
+@font-face {
+  font-family: ABeeZee;
+  src: url("/Fonts/ABeeZee.ttf");
+}
+
+@font-face {
+  font-family: Roboto;
+  src: url("/Fonts/Roboto.ttf");
+}
+
+@font-face {
+  font-family: Montserrat;
+  src: url("/Fonts/Montserrat.ttf");
+}
+
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+
+/* ::placeholder {
+  font-size: 0.9em;
+} */
+
+:root {
+  --top-left: #1c3651;
+  /* #330624: #65133a, #432d39 #1c3651: #18868d, #365057 */
+  --mid-left: #1a303a;
+  /* #33192c #1a303a */
+  --center: #1c364f;
+  /* #470932db #1c364f */
+  --top-right: #1e204d;
+  /* #41183d #1e204d */
+  --bottom-right: #273643;
+  /* #432741 #273643 */
+
+  --top-left-dark: #1c3651;
+  /* #391c51 */
+  --mid-left-dark: #1a303a;
+  /* #1D1A3A */
+  --center-dark: #1c364f;
+  /* #1C224F */
+  --top-right-dark: #1e204d;
+  /* #2B1E4D */
+  --bottom-right-dark: #273643;
+  /* #2D2743 */
+
+  --top-left-light: #0b6c6d;
+  --mid-left-light: #176da0;
+  --center-light: #aaf0ff;
+  --top-right-light: #c1c3ff;
+  --bottom-right-light: #aaf1ff;
+}
+
+body {
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+  --body-bg: #012127;
+  --body-bg-dark: #012127;
+  --body-bg-light: #96dade;
+  background: var(--body-bg);
+  /* background: #160722; */
+  /* #11192A */
+  /* #012127 */
+  /* #160815 */
+}
+
+::-webkit-scrollbar {
+  width: 8.5px;
+  height: 5px;
+  background: transparent;
+  border-radius: 5px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #7cd0cc;
+  border-radius: 5px;
+  min-height: 30px;
+}
+
+body.lightMode {
+  background: var(--body-bg-light);
+}
+
+div.bg1 {
+  position: fixed;
+  background: var(--top-left);
+  width: 35.625vw;
+  height: 77.19005vh;
+  border-radius: 50%;
+  top: -34.7225vh;
+  /* Updated value */
+  left: -16.875vw;
+  z-index: -100000;
+  filter: blur(100px);
+}
+
+div.bg2 {
+  position: fixed;
+  background: var(--mid-left);
+  width: 35.625vw;
+  height: 77.01675vh;
+  /* Updated value */
+  border-radius: 50%;
+  top: 34.7225vh;
+  /* Updated value */
+  left: -16.875vw;
+  z-index: -100000;
+  filter: blur(100px);
+}
+
+div.bg3 {
+  position: fixed;
+  background: var(--center);
+  width: 29.1vw;
+  height: 66.4765vh;
+  /* Updated value */
+  border-radius: 50%;
+  top: -23.73115vh;
+  /* Updated value */
+  left: 24.9vw;
+  z-index: -100000;
+  filter: blur(100px);
+}
+
+div.bg4 {
+  position: fixed;
+  background: var(--top-right);
+  width: 51.6vw;
+  height: 66.4765vh;
+  /* Updated value */
+  border-radius: 50%;
+  top: -23.73115vh;
+  /* Updated value */
+  right: -11.25vw;
+  z-index: -100000;
+  filter: blur(100px);
+}
+
+div.bg5 {
+  position: fixed;
+  background: var(--bottom-right);
+  width: 51.6vw;
+  height: 66.4765vh;
+  /* Updated value */
+  border-radius: 50%;
+  bottom: -46.5066vh;
+  /* Updated value */
+  right: 6.15vw;
+  z-index: -100000;
+  filter: blur(100px);
+}

jsconfig.json

@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": [ "./*" ]
+    }
+  }
+}

next.config.js

@@ -0,0 +1,8 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  images: {
+    domains: [ 'lh3.googleusercontent.com', "res.cloudinary.com", "iiehkolsitbpijjhtjfu.supabase.co" ]
+  }
+};
+
+module.exports = nextConfig;

package.json

@@ -0,0 +1,45 @@
+{
+  "name": "client",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev -p 3001",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.4.2",
+    "@fortawesome/free-brands-svg-icons": "^6.4.2",
+    "@fortawesome/free-regular-svg-icons": "^6.4.2",
+    "@fortawesome/free-solid-svg-icons": "^6.4.2",
+    "@fortawesome/react-fontawesome": "^0.2.0",
+    "@google-ai/generativelanguage": "^1.1.0",
+    "@huggingface/inference": "^2.6.3",
+    "@supabase/supabase-js": "^2.36.0",
+    "ai": "^2.2.14",
+    "axios": "^1.5.1",
+    "google-auth-library": "^9.0.0",
+    "marked": "^9.0.3",
+    "next": "13.5.2",
+    "next-auth": "^4.23.1",
+    "nodemailer": "^6.9.6",
+    "openai": "^4.11.1",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-markdown": "^8.0.7",
+    "react-syntax-highlighter": "^15.5.0",
+    "request": "^2.88.2",
+    "uuid": "^9.0.1"
+  },
+  "devDependencies": {
+    "encoding": "^0.1.13"
+  },
+  "browser": {
+    "tls": false,
+    "net": false,
+    "fs": false,
+    "path": false,
+    "child_process": false
+  }
+}