Upload 18 files

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

.gitignore

@@ -0,0 +1,38 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# 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*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+.vercel

app/chat.css

@@ -0,0 +1,393 @@
+.chat-container{
+  width: 90%;
+  display: flex;
+  flex-direction: column;
+  max-width: 800px;
+  background-color: rgba(225, 242, 251, 0);
+  height: 100%;
+  border-radius: 20px;
+  align-self: center;
+  /* box-shadow: 0 0 100px 100px rgba(168, 232, 255, 0.177); */
+}
+.history.chat-container{
+  margin: 0;
+  background-color: #dafbff6e;
+  height: 100dvh;
+  border-radius: 0px 0px 0px 0px;
+  border-top-right-radius: 80px;
+  border-right: 2px solid #8ed2ff61;
+}
+
+input::placeholder{
+  text-align: center;
+}
+pre, code {
+  white-space: pre-wrap; /* Ensures the content wraps */
+  word-wrap: break-word; /* Forces long words to break */
+  overflow-wrap: break-word; /* Handles unbreakable words */
+  overflow-x: scroll; /* Allows horizontal scrolling if content exceeds width */
+  max-width: calc(100dvw - 130px); /* Ensures the block doesn't exceed its container's width */
+}
+.message-options{
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  margin: 10px;
+  background-color: rgba(180, 226, 255, 0.333);
+  padding: 10px;
+  border-radius: 20px;
+  width: fit-content;
+}
+
+.message-container{
+  margin-top: 0px;
+  height: 100%;
+  width: calc(100% - 0px);
+  overflow-y: auto;
+  overflow-x: hidden;
+  display: flex;
+  padding: 10px;
+  flex-direction: column;
+}
+
+.inp{
+  
+  width: 100%;
+  
+  border-radius: 10px;
+  border: none;
+  outline: none;
+  margin: 0px 10px 0px 10px;
+  background: transparent;
+  box-shadow: none;
+}
+
+.inpsection{
+
+
+  width: 100%;
+  
+}
+.inpsection .btn2{
+  min-width: 0px;
+  min-height: 0px;
+  height: 30px;
+  border-radius: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* 
+disabled button css
+*/
+.inpsection .btn2:disabled{
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.inpsection{
+  background-color: rgba(168, 227, 255, 0.329);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 30px;
+  padding: 10px;
+
+
+}
+
+.message{
+  background-color: rgba(26, 26, 26, 0);
+  backdrop-filter: blur(5px);
+  color: rgb(84, 84, 84);
+  padding: 10px;
+  border-radius: 10px;
+  border: 2px solid #db34697f;
+  max-width: 600px;
+  width: fit-content;
+  word-wrap: break-word;
+
+}
+.message-holder{
+  display: flex;
+  flex-direction: column;
+  align-self: flex-end;
+  margin: 10px;
+}
+
+.user-message{
+  align-self: flex-end;
+  border: 2px solid #3498db7f;
+  background-color: rgba(200, 238, 255, 0);
+}
+
+.small{
+  font-size: 12px;
+  color:gray;
+}
+
+/* width */
+::-webkit-scrollbar {
+  width: 3px;
+  height: 3px;
+  border-radius: 50px;
+  }
+  
+  /* Track */
+  ::-webkit-scrollbar-track {
+  background: transparent
+  }
+  
+  /* Handle */
+  ::-webkit-scrollbar-thumb {
+  background: #a5a5a564;
+  border-radius: 20px;
+  }
+  
+  .ld-ripple {
+      position: relative;
+      width: 40px;
+      height: 40px;
+    }
+    
+    .ld-ripple div {
+      position: absolute;
+      border: 2px solid #fff;
+      opacity: 1;
+      border-radius: 50%;
+      animation: ld-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
+    }
+    
+    .ld-ripple div:nth-child(2) {
+      animation-delay: -0.5s;
+    }
+    
+    @keyframes ld-ripple {
+      0% {
+        top: 18px;
+        left: 18px;
+        width: 0;
+        height: 0;
+        opacity: 0;
+      }
+    
+      4.9% {
+        top: 18px;
+        left: 18px;
+        width: 0;
+        height: 0;
+        opacity: 0;
+      }
+    
+      5% {
+        top: 18px;
+        left: 18px;
+        width: 0;
+        height: 0;
+        opacity: 1;
+      }
+    
+      100% {
+        top: 0px;
+        left: 0px;
+        width: 36px;
+        height: 36px;
+        opacity: 0;
+      }
+    }
+
+
+/* Style Select */
+select {
+  background-color: rgba(1, 95, 135, 0.265);
+  color: white;
+  padding: 10px;
+  border-radius: 10px;
+  width: fit-content;
+  word-wrap: break-word;
+}
+
+select option{
+  background-color: rgba(35, 93, 97, 0.897);
+  color: white;
+  padding: 10px;
+  border-radius: 10px;
+  width: fit-content;
+  word-wrap: break-word;
+}
+
+
+code{
+  /* Fix so that don't get outside parent */
+  position: relative;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+
+}
+
+pre{
+padding: 10px;
+background-color: rgba(180, 226, 255, 0.333);
+border-radius: 20px;
+border: 2px solid #34a9db7f;
+/* box-shadow: 0 0 10px #db34697f; */
+color: rgb(84, 84, 84);
+margin: 20px 0px 20px 0px;
+
+}
+
+pre code{
+background-color: transparent;
+padding: 0px 0px 0px 0px;
+border: none;
+border-radius: 0px;
+}
+
+code{
+background-color: rgba(227, 227, 227, 0.399);
+color: rgb(84, 84, 84);
+padding: 0px 10px 0px 10px;
+border-radius: 5px;
+}
+
+.goToConv{
+background-color: rgba(255, 255, 255, 0.267);
+padding: 20px;
+border-radius: 20px;
+border: 2px solid rgba(1, 207, 222, 0.382);
+cursor: pointer;
+
+}
+
+.titler{
+font-size: 20px;
+font-weight: bold;
+color: #009898;
+}
+.goToConv p{
+color: gray;
+font-size: small;
+}
+.info{
+padding: 20px;
+}
+.perinfo{
+background-color: rgba(255, 255, 255, 0.267);
+border: 2px solid rgba(1, 207, 222, 0.382);
+width: 100%;
+padding: 20px;
+margin-top: 10px;
+border-radius: 20px;
+}
+
+.message-holder .btn3{
+box-shadow: none;
+background-color: transparent;
+padding: 10px;
+border-radius: 15px;
+border: 2px solid rgb(0, 71, 95);
+cursor: pointer;
+color: rgb(84, 84, 84);
+transition-duration: 300ms;
+}
+
+.message-holder .btn3:hover{
+background-color: rgb(0, 71, 95);
+}
+
+.history{
+
+max-width: "400px";
+display: "flex";
+flex-direction: "column";
+align-items: "center";
+justify-content: "flex-start";
+padding: "20px";
+}
+
+.info{
+
+max-width: "300px";
+display: "flex";
+flex-direction: "column";
+align-items: "center";
+justify-content: "flex-start";
+padding: "20px";
+}
+
+.message-holder .small{
+color: gray;
+}
+.message-holder .small:hover{
+color: white;
+}
+.tabsForMobile{
+display: none;
+}
+.chat{
+display: flex;
+height: 100%;
+padding: 10px;
+}
+.history{
+display: flex;
+margin-top: 30px;
+
+
+}
+.info{
+display: flex;
+margin-top: 30px;
+
+}
+@media screen and (max-width: 1200px) {
+.history{
+  display: none;
+margin-top: 0px;
+width: '90%';
+
+
+}
+
+.chat-container.history{
+  height: 90dvh;
+  border: none;
+  border-radius: 20px;
+}
+.tabsForMobile{
+  display: flex;
+  margin-top: 10px;
+}
+.chat-container{
+  height: 90dvh;
+}
+.info {
+  display: none;
+  width: '90%';
+margin-top: 0px;
+
+}
+
+.chat{
+  display: none;
+margin-top: 0px;
+
+}
+
+}
+
+.btn4{
+padding: 5px 10px 5px 10px;
+border-radius: 10px;
+border: 2px solid rgb(0, 71, 95);
+cursor: pointer;
+color: rgb(84, 84, 84);
+transition-duration: 300ms;
+}
+
+.btn4.active{
+background-color: rgb(0, 71, 95);
+color: white;
+}
+

app/components/MessageOptions.jsx

@@ -0,0 +1,29 @@
+"use client";
+import { useState } from 'react';
+import { MdOutlineDone } from "react-icons/md";
+import { MdContentCopy } from 'react-icons/md';
+import { GrPowerReset } from 'react-icons/gr';
+
+const MessageOptions = ({ message, regenerateMessage }) => {
+  const [icon, setIcon] = useState(<MdContentCopy />);
+
+  const handleCopy = () => {
+    navigator.clipboard.writeText(message.content);
+    setIcon(<MdOutlineDone />);
+
+    setTimeout(() => {
+      setIcon(<MdContentCopy />);
+    }, 1000);
+  };
+
+  return (
+     (
+      <div className="message-options">
+        <button onClick={handleCopy}>{icon}</button>
+        <button onClick={() => regenerateMessage(message)}><GrPowerReset /></button>
+      </div>
+    )
+  );
+};
+
+export default MessageOptions;

app/components/TextField.js

@@ -0,0 +1,63 @@
+"use client";
+import { useEffect } from 'react';
+
+const ResponsiveTextarea = ({ maxRows = 10, ...props }) => {
+  useEffect(() => {
+    const textarea = document.getElementById('responsive-textarea');
+    
+    const adjustHeight = () => {
+      textarea.style.height = 'auto'; // Reset height to auto to recalculate
+      const lineHeight = parseInt(getComputedStyle(textarea).lineHeight); // Get line height
+      const rows = (textarea.scrollHeight / lineHeight)-2; // Calculate rows
+      console.log(rows);
+
+      if (rows <= maxRows) {
+        textarea.style.height = `${(textarea.scrollHeight)/2}px`; // Adjust height based on content
+        textarea.style.overflowY = 'hidden'; // Hide scrollbar if within limit
+      } else {
+        textarea.style.height = `${lineHeight * maxRows}px`; // Cap height at max rows
+        textarea.style.overflowY = 'auto'; // Show scrollbar if max rows are exceeded
+      }
+    };
+
+    textarea.addEventListener('input', adjustHeight);
+    // adjustHeight whenever input changes
+    textarea.addEventListener('change', adjustHeight);
+
+    // Initial adjustment for pre-filled content
+    adjustHeight();
+
+    // Cleanup event listener
+    return () => {
+      textarea.removeEventListener('input', adjustHeight);
+    };
+  }, [maxRows]);
+  useEffect(() => {
+    const textarea = document.getElementById('responsive-textarea');
+    const adjustHeight = () => {
+        textarea.style.height = 'auto'; // Reset height to auto to recalculate
+        const lineHeight = parseInt(getComputedStyle(textarea).lineHeight); // Get line height
+        const rows = (textarea.scrollHeight / lineHeight)-2; // Calculate rows
+        console.log(rows);
+  
+        if (rows <= maxRows) {
+          textarea.style.height = `${(textarea.scrollHeight)/2}px`; // Adjust height based on content
+          textarea.style.overflowY = 'hidden'; // Hide scrollbar if within limit
+        } else {
+          textarea.style.height = `${lineHeight * maxRows}px`; // Cap height at max rows
+          textarea.style.overflowY = 'auto'; // Show scrollbar if max rows are exceeded
+        }
+      };
+      adjustHeight();
+  })
+
+  return (
+    <textarea
+      id="responsive-textarea"
+      style={{ resize: 'none', overflowY: 'hidden', display:'flex', alignItems:'center', justifyContent:'center' }}
+      {...props}
+    />
+  );
+};
+
+export default ResponsiveTextarea;

app/globals.css

@@ -0,0 +1,515 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+html{
+  scroll-behavior: smooth;
+  margin: 0;
+  padding: 0;
+  height: 100dvh;
+  overflow: hidden;
+  transition-duration: 500ms;
+}
+:root {
+  --theme-font-family-base: "Comfortaa", sans-serif;
+  --theme-font-family-heading: system-ui;
+  --theme-font-color-base: var(--color-surface-900);
+  --theme-font-color-dark: var(--color-surface-50);
+  --theme-rounded-base: 24px;
+  --theme-rounded-container: 24px;
+  --theme-border-base: 1px;
+  --on-primary: 255 255 255;
+  --on-secondary: 255 255 255;
+  --on-tertiary: 0 0 0;
+  --on-success: 0 0 0;
+  --on-warning: 0 0 0;
+  --on-error: 0 0 0;
+  --on-surface: 255 255 255;
+  --color-primary-50: 249 220 226;
+  --color-primary-100: 246 208 216;
+  --color-primary-200: 244 197 206;
+  --color-primary-300: 238 162 177;
+  --color-primary-400: 225 92 119;
+  --color-primary-500: 212 22 60;
+  --color-primary-600: 191 20 54;
+  --color-primary-700: 159 17 45;
+  --color-primary-800: 127 13 36;
+  --color-primary-900: 104 11 29;
+  --color-secondary-50: 227 237 243;
+  --color-secondary-100: 218 231 239;
+  --color-secondary-200: 209 225 235;
+  --color-secondary-300: 181 206 223;
+  --color-secondary-400: 126 170 199;
+  --color-secondary-500: 70 133 175;
+  --color-secondary-600: 63 120 158;
+  --color-secondary-700: 53 100 131;
+  --color-secondary-800: 42 80 105;
+  --color-secondary-900: 34 65 86;
+  --color-tertiary-50: 242 230 254;
+  --color-tertiary-100: 238 221 253;
+  --color-tertiary-200: 233 213 253;
+  --color-tertiary-300: 220 187 252;
+  --color-tertiary-400: 194 136 249;
+  --color-tertiary-500: 168 85 247;
+  --color-tertiary-600: 151 77 222;
+  --color-tertiary-700: 126 64 185;
+  --color-tertiary-800: 101 51 148;
+  --color-tertiary-900: 82 42 121;
+  --color-success-50: 228 247 220;
+  --color-success-100: 219 245 208;
+  --color-success-200: 210 242 197;
+  --color-success-300: 183 234 161;
+  --color-success-400: 130 219 91;
+  --color-success-500: 76 203 21;
+  --color-success-600: 68 183 19;
+  --color-success-700: 57 152 16;
+  --color-success-800: 46 122 13;
+  --color-success-900: 37 99 10;
+  --color-warning-50: 253 246 223;
+  --color-warning-100: 253 243 212;
+  --color-warning-200: 252 240 202;
+  --color-warning-300: 251 230 170;
+  --color-warning-400: 247 212 106;
+  --color-warning-500: 244 193 42;
+  --color-warning-600: 220 174 38;
+  --color-warning-700: 183 145 32;
+  --color-warning-800: 146 116 25;
+  --color-warning-900: 120 95 21;
+  --color-error-50: 248 236 236;
+  --color-error-100: 246 229 230;
+  --color-error-200: 244 223 224;
+  --color-error-300: 237 204 205;
+  --color-error-400: 224 165 167;
+  --color-error-500: 210 127 129;
+  --color-error-600: 189 114 116;
+  --color-error-700: 158 95 97;
+  --color-error-800: 126 76 77;
+  --color-error-900: 103 62 63;
+  --color-surface-50: 223 224 226;
+  --color-surface-100: 213 213 217;
+  --color-surface-200: 202 203 207;
+  --color-surface-300: 170 171 179;
+  --color-surface-400: 107 109 121;
+  --color-surface-500: 43 46 64;
+  --color-surface-600: 39 41 58;
+  --color-surface-700: 32 35 48;
+  --color-surface-800: 26 28 38;
+  --color-surface-900: 21 23 31;
+}
+textarea{
+  resize: none;
+  line-height: 1.5;
+}
+body {
+  transition-duration: 500ms;
+  color: rgb(82, 82, 82);
+  background: #ffffff; /* fallback for old browsers */
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100dvh;
+   background-image: radial-gradient(at 0% 0%, rgba(var(--color-secondary-500) / .33) 0px, transparent 50%), radial-gradient(at 98% 1%, rgba(var(--color-error-500) / .33) 0px, transparent 50%);
+
+}
+
+.flex-col {
+  display: flex;
+  flex-direction: column;
+}
+
+.flex-row {
+  display: flex;
+  flex-direction: row;
+}
+
+.fade-in-text {
+  opacity: 0;
+  transition: opacity 0.5s ease-in-out;
+}
+
+.fade-in-text.active {
+  opacity: 1;
+}
+.loader {
+  position: relative;
+  width: 120px;
+  height: 90px;
+  margin: 0 auto;
+}
+
+.loader:before {
+  content: "";
+  position: absolute;
+  bottom: 30px;
+  left: 50px;
+  height: 30px;
+  width: 30px;
+  border-radius: 50%;
+  background: #00b7ff;
+  animation: loading-bounce 0.5s ease-in-out infinite alternate;
+}
+.links-about{
+  background-color: #373737;
+  border: 2px solid #00b7ff;
+  border-radius: 10px;
+  padding: 5px;
+  width: fit-content;
+  flex-wrap: wrap;
+  align-self: center;
+
+}
+.mid {
+  display: flex;
+  flex-direction: column;
+  overflow-y: hidden;
+  justify-content: center;
+  text-align: center;
+  align-items: flex-start;
+  width: 100%;
+}
+.mid span{
+  width: 100%;
+}
+progress{
+  width: 70%;
+  color: #68d5d3;
+  height: 7px;
+  
+
+  
+}
+progress{
+  height: 10px;
+  border-radius: 60px;
+  box-sizing: border-box;
+  margin-bottom: 3px;
+
+
+  }
+  progress::-webkit-progress-value {
+  border-radius: 30px;
+
+  
+  }
+  progress::-webkit-progress-bar{
+  background: transparent;
+
+  }
+progress::-webkit-progress-value{
+  background-image: linear-gradient(90deg, #00b7ff, #68d5d3);
+}
+.links-about a{
+  margin: 0;
+
+}
+.loader:after {
+  content: "";
+  position: absolute;
+  right: 0;
+  top: 0;
+  height: 7px;
+  width: 45px;
+  border-radius: 4px;
+  box-shadow: 0 5px 0 #f2f2f2, -35px 50px 0 #f2f2f2, -70px 95px 0 #f2f2f2;
+  animation: loading-step 1s ease-in-out infinite;
+}
+
+@keyframes loading-bounce {
+  0% {
+    transform: scale(1, 0.7);
+  }
+
+  40% {
+    transform: scale(0.8, 1.2);
+  }
+
+  60% {
+    transform: scale(1, 1);
+  }
+
+  100% {
+    bottom: 140px;
+  }
+}
+
+@keyframes loading-step {
+  0% {
+    box-shadow: 0 10px 0 rgba(0, 0, 0, 0),
+            0 10px 0 #f2f2f2,
+            -35px 50px 0 #f2f2f2,
+            -70px 90px 0 #f2f2f2;
+  }
+
+  100% {
+    box-shadow: 0 10px 0 #f2f2f2,
+            -35px 50px 0 #f2f2f2,
+            -70px 90px 0 #f2f2f2,
+            -70px 90px 0 rgba(0, 0, 0, 0);
+  }
+}
+.modal {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.8);
+  backdrop-filter: blur(10px);
+  display: flex;
+  flex-direction: column;
+  border-radius: 20px;
+  justify-content: center;
+  align-items: center;
+  z-index: 9999;
+  padding: 20px;
+  width: 90%;
+  max-width: 800px;
+}
+
+.modal iframe {
+  width: 100%;
+  height: 100%;
+  border-radius: 10px;
+}
+
+.btn {
+  padding: 10px;
+  border-radius: 10px;
+  /* background-color: white; */
+  background: radial-gradient(
+      231.94% 231.94% at 50% 100%,
+      #00c8ff 0,
+      rgba(38, 53, 193, 0) 25.24%
+    ),
+    linear-gradient(180deg, rgba(243, 238, 255, 0), rgba(243, 238, 255, 0.04)),
+    rgba(147, 130, 255, 0.01);
+  background-image: linear-gradient(to right, #00c8ff, #2635c1);
+
+  color: white;
+  transition: 200ms;
+  box-shadow: 0 0 140px rgb(0, 162, 255);
+  -webkit-background-clip: text; /* Clip the gradient to the text */
+  background-clip: text;
+  -webkit-text-fill-color: transparent; /* Make the text transparent */
+}
+
+input {
+  padding: 10px;
+  border-radius: 10px;
+  border: none;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  background-color: transparent;
+  color: white;
+  padding: 10px;
+  border: #00c8ff 2px solid;
+}
+
+.btn:hover {
+  -webkit-background-clip: text; /* Clip the gradient to the text */
+  background-clip: text;
+  background: linear-gradient(to right, #00c8ff, #2635c1);
+  color: white;
+  -webkit-text-fill-color: white;
+  box-shadow: 0 0 100px rgba(255, 255, 255, 0.55);
+}
+
+.gradient-text {
+  background: linear-gradient(to right, #00c8ff, #2635c1);
+  -webkit-background-clip: text; /* Clip the gradient to the text */
+  background-clip: text;
+  -webkit-text-fill-color: transparent; /* Make the text transparent */
+}
+.title {
+  font-size: 70px;
+  font-weight: "300";
+}
+@media screen and (max-width: 510px) {
+  .title {
+    font-size: 30px;
+    font-weight: bold;
+  }
+}
+
+.thin-scroll::-webkit-scrollbar {
+  width: 4px;
+  background-color: rgba(0, 89, 255, 0.158); /* make scrollbar transparent */
+  border-radius: 10px;
+  cursor: pointer;
+}
+
+.thin-scroll::-webkit-scrollbar-thumb {
+  background-color: rgba(
+    0,
+    89,
+    255,
+    0.2
+  ); /* make scrollbar thumb transparent */
+  border-radius: 10px;
+  cursor: pointer;
+}
+
+.row {
+  flex-wrap: wrap;
+}
+
+.card {
+  margin-top: 100px;
+  border-radius: 30px;
+  box-shadow: 0 20px 50px rgba(0, 172, 240, 0.717);
+  background-color: rgba(67, 67, 67, 0.1);
+  backdrop-filter: blur(10px);
+  transition-duration: 300ms;
+}
+
+.card h3 {
+  background: linear-gradient(to right, #1c758e, #2635c1);
+  font-size: 30px;
+  padding: 10px;
+  border-radius: 30px 30px 0px 0px;
+  font-weight: 200;
+  margin: 0;
+}
+.category-label {
+  display: inline-block;
+  background: linear-gradient(90deg, #00d2ff, #3a7bd5);
+  padding: 5px 10px;
+  border-radius: 50px;
+  margin-bottom: 10px;
+}
+
+.category-label span {
+  font-size: 20px;
+  color: white;
+}
+.circle {
+  animation: shadowAnimation 3s infinite; /* Apply animation */
+}
+
+@keyframes shadowAnimation {
+  0% {
+    box-shadow: 20px 20px 60px #00d2ff, -20px -20px 60px #3a7bd5;
+  }
+  25% {
+    box-shadow: -20px 20px 60px #00d2ff, 20px -20px 60px #3a7bd5;
+  }
+  50% {
+    box-shadow: -20px -20px 60px #00d2ff, 20px 20px 60px #3a7bd5;
+  }
+  75% {
+    box-shadow: 20px -20px 60px #00d2ff, -20px 20px 60px #3a7bd5;
+  }
+  100% {
+    box-shadow: 20px 20px 60px #00d2ff, -20px -20px 60px #3a7bd5;
+  }
+}
+
+.card p {
+  background: linear-gradient(to right, #1c758e, #2635c1);
+  -webkit-background-clip: text; /* Clip the gradient to the text */
+  background-clip: text;
+  -webkit-text-fill-color: transparent; /* Make the text transparent */
+}
+
+.card:hover {
+  box-shadow: 0 30px 50px rgba(0, 172, 240, 0.717);
+  transform: translateY(-10px);
+}
+
+.card p::before {
+  content: "";
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  background: linear-gradient(to right, #00c8ff, #2635c1);
+  border-radius: 50%;
+  margin-right: 20px;
+}
+
+.card p {
+  color: rgba(255, 255, 255, 0.516);
+  font-size: 17px;
+  text-align: left;
+  margin: 10px;
+}
+
+.ai-message {
+  background-color: #f9f9f9; /* Optional: background color */
+  padding: 16px; /* Adds padding inside the message block */
+  border-radius: 8px; /* Optional: rounded corners */
+  overflow-wrap: break-word; /* Breaks long words */
+}
+
+.card .line {
+  background: linear-gradient(to right, #00c8ff, #2635c1);
+}
+
+.card .n {
+  background-image: none;
+  border-radius: 0px 0px 30px 30px;
+  background-color: rgb(11, 11, 11);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 10px;
+}
+.sidenav a{
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  text-align: center;
+  margin:0 ;
+  padding: 0;
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+.btn2 {
+  outline: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  background: linear-gradient(to right, #00c8ff, #2635c1);
+  min-width: 200px;
+  border: 0;
+  border-radius: 30px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  box-sizing: border-box;
+  padding: 16px 20px;
+  color: #fff;
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 1.2px;
+  text-transform: uppercase;
+  overflow: hidden;
+  cursor: pointer;
+  transition-duration: 400ms;
+}
+
+.btn2:hover {
+  opacity: 0.55;
+  padding: 16px 20px;
+}
+
+.btn2 .animation {
+  border-radius: 100%;
+  animation: ripple 0.6s linear infinite;
+}
+
+@keyframes ripple {
+  0% {
+    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.1),
+      0 0 0 20px rgba(255, 255, 255, 0.1), 0 0 0 40px rgba(255, 255, 255, 0.1),
+      0 0 0 60px rgba(255, 255, 255, 0.1);
+  }
+
+  100% {
+    box-shadow: 0 0 0 20px rgba(255, 255, 255, 0.1),
+      0 0 0 40px rgba(255, 255, 255, 0.1), 0 0 0 60px rgba(255, 255, 255, 0.1),
+      0 0 0 80px rgba(255, 255, 255, 0);
+  }
+}
+
+.space {
+  height: 100px;
+}

app/layout.js

@@ -0,0 +1,33 @@
+import { Comfortaa as Inter } from "next/font/google";
+import "./globals.css";
+
+const inter = Inter({ subsets: ["latin"], weight: ['variable'] });
+
+export const metadata = {
+  title: "Smooth AI",
+  description: "Use smooth AI for generating AI responses in a lighting fast way.",
+  openGraph: {
+    title: "Smooth AI",
+    description: "Use smooth AI for generating AI responses in a lighting fast way.",
+    url: "https://smooth-ai.vercel.app",
+    siteName: "Smooth AI",
+    images: [
+      {
+        url: "https://smooth-ai.vercel.app/OIG4.jpeg",
+        width: 630,
+        height: 630,
+      },
+    ],
+    locale: "en-US",
+    type: "website",
+  },
+  icon: "https://smooth-ai.vercel.app/OIG4.jpeg",
+};
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>{children}</body>
+    </html>
+  );
+}

app/page.js

@@ -0,0 +1,642 @@
+"use client";
+import "./chat.css";
+import { useState, useEffect } from "react";
+import ReactMarkdown from "react-markdown";
+import axios from "axios";
+import { RiDeleteBinLine } from "react-icons/ri";
+import TextField from '@/app/components/TextField';
+import { MdContentCopy } from "react-icons/md";
+import { GrPowerReset } from "react-icons/gr";
+import {TiTick} from "react-icons/ti";
+import MessageOptions from "./components/MessageOptions";
+
+function generateRandomId(length) {
+  const id = Math.random().toString(36).substring(2, length + 2);
+  console.log(`ID GENERATION: ${id}`);
+  return id;
+}
+const ChatPage = () => {
+  const apiKey = 'hf_freeall'; // Replace with your OpenAI API key
+  const maxTokens = 3000;
+  const [isGenerating, setIsGenerating] = useState(false);
+  const chatSessionsKey = 'chatSessions';
+  let chatHistory = [];
+  
+  process.on("uncaughtException", (err) => {
+    console.log(err);
+  });
+  const [currentModel, setCurrentModel] = useState("gpt-3.5-turbo-16k-0613");
+  const [sendButtonDisabled, setSendButtonDisabled] = useState(false);
+  const [bingSession, setBingSession] = useState(null);
+  const [currentTab, setCurrentTab] = useState("chat");
+  const [stop, setStop] = useState(false);
+  const [messages, setMessages] = useState([
+    // {
+    //   role: "assistant",
+    //   who: "AI: ",
+    //   content: "Hello! How can I assist you today? 😊",
+    //   greet: true,
+    //   timestamp: 0,
+    //   id: generateRandomId(6),
+    // }
+  ]);
+  const models = ["gpt-3.5-turbo", "gpt-3.5-turbo-0613", "gpt-3.5-turbo-16k", "gpt-3.5-turbo-16k-0613", "gpt-4", "gpt-4-0613", "gpt-4-32k", "gpt-4-32k-0613"];
+  const [modelSelectionModalOpen, setModelSelectionModalOpen] = useState(false);
+  const [conversations, setConversations] = useState({});
+
+
+  const saveToLocalStorage = () => {
+    localStorage.setItem("messages-"+messages[0].content+"|"+messages[0].id, JSON.stringify(messages));
+    setConversations({
+      ...localStorage
+    })
+  };
+
+
+  const getFromLocalStorage = () => {
+    if (localStorage.getItem("messages"+messages[0].content+"|"+messages[0].id)) {
+      setMessages(JSON.parse(localStorage.getItem("messages")));
+    }
+  };
+
+    
+    useEffect(() => {
+      var localStorage = window.localStorage;
+    }, []);
+
+  const getAIResponse = async () => {
+    // setSendButtonDisabled(true);
+    // // ask for response buut also timeout if no response
+    // let resp = await axios.post("/api/v1/chat/completions", {
+    //   messages: messages,
+    //   model: currentModel,
+    //   bingSession: bingSession
+    // }//,
+    // // {
+    // //   timeout: 10000
+    // // }
+    // ).catch(err => {
+    //   console.log(err);
+    //   updateMessages({
+    //     role: "assistant",
+    //     who: "AI: ",
+    //     content: "Error: " + err.message,
+    //     timestamp: Date.now(),
+    //     id: generateRandomId(6),
+    //   })
+    //   setSendButtonDisabled(false);
+    // });
+    // resp = resp.data;
+    // console.log(resp);
+    // if (resp.choices[resp.choices.length - 1].content) {
+    //   if (resp.choices[resp.choices.length - 1].content.includes('BingProdUnAuthenticatedUsers')){
+    //     let message = {
+    //       role: "assistant",
+    //       who: "AI: ",
+    //       content: JSON.parse(resp.choices[resp.choices.length - 1].content).resultant,
+    //       timestamp: Date.now(),
+    //       id: generateRandomId(6),
+    //     }
+    //     setBingSession((prev) => JSON.parse(resp.choices[resp.choices.length - 1].content).session);
+    //     console.log(bingSession);
+    //     console.log(JSON.parse(resp.choices[resp.choices.length - 1].content));
+    //     updateMessages(
+    //       message
+    //     )
+    //   }
+    //   else{
+    //   updateMessages({
+    //     ...resp.choices[resp.choices.length - 1],
+    //     timestamp: Date.now(),
+    //   });
+    // }
+    // }
+    // else{
+    //   updateMessages({
+    //     role: "assistant",
+    //     who: "AI: ",
+    //     content: "Error: No response. Try different AI Model or try again later.",
+    //     timestamp: Date.now(),
+    //     id: generateRandomId(6),
+    //   })
+    // }
+
+    // setSendButtonDisabled(false);
+    // chatHistory.push({ role: 'user', content: messages[messages.length - 1].content });
+    for (let i = 0; i < messages.length; i++) {
+      chatHistory.push({ role: messages[i].role, content: messages[i].content });
+    }
+   
+
+    let controller = new AbortController();
+    const signal = controller.signal;
+
+    const response = await fetch('https://hlb2vp60a9kpy2lu.us-east-1.aws.endpoints.huggingface.cloud/v1/chat/completions', {
+      method: 'POST',
+      headers: {
+          'Authorization': `Bearer ${apiKey}`,
+          'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+          model: 'gpt-3.5-turbo',
+          messages: chatHistory,
+          max_tokens: maxTokens,
+          stream: true
+      }),
+      signal
+  });
+
+  if (!response.ok) {
+      throw new Error(`HTTP error! Status: ${response.status}`);
+  }
+
+  const reader = response.body.getReader();
+  const decoder = new TextDecoder();
+  let finalMessage = '';
+  while (true)  {
+    setIsGenerating(true);
+    console.log(stop);
+    const { done, value } = await reader.read();
+    if (done || stop) {
+        setIsGenerating(false);
+        
+        break;
+    
+    };
+    const chunk = decoder.decode(value, { stream: true });
+    const lines = chunk.split('\n').filter(line => line.startsWith('data:'));
+    for (const line of lines) {
+      const json = line.replace('data:', '');
+      try {
+          const parsed = JSON.parse(json);
+          if (parsed.choices && parsed.choices.length > 0) {
+              finalMessage += parsed.choices[0].delta?.content || '';
+              updateMessages({
+                  role: 'assistant',
+                  who: 'AI: ',
+                  content: finalMessage,
+                  timestamp: Date.now(),
+                  id: generateRandomId(6),
+              });
+          }
+      } catch (error) {
+          console.error('Error parsing JSON:', error);
+      }
+  }
+  };
+  setStop(false);
+}
+
+const regenerateMessage = (message) => {
+  updateMessages({
+    role: "user",
+    who: "You: ",
+    content: message.content,
+    timestamp: Date.now(),
+    id: generateRandomId(6),
+  });
+}
+
+  const AIProcess =  () => {
+    
+    getAIResponse();
+  };
+
+  // message-container scroll to bottom on new message
+  useEffect(() => {
+    if (!messages?.length) return;
+    const messageContainer = document.querySelector(".message-container");
+    messageContainer.scrollTop = messageContainer.scrollHeight;
+    if (messages[messages?.length - 1]?.role === "user") {
+      AIProcess();
+    }
+    if (messages?.length > 1) {
+      saveToLocalStorage();
+    }
+    if (messages?.length === 1) {
+      setConversations({
+        ...localStorage
+      })
+    }
+  }, [messages]);
+
+
+  useEffect(() => {
+    setConversations({
+      ...localStorage
+    })
+  }, [])
+
+
+  useEffect(() => {
+    // scroll to bottom
+    const messageContainer = document.querySelector(".message-container");
+    messageContainer.scrollTop = messageContainer.scrollHeight;
+}, [sendButtonDisabled])
+
+  const updateMessages = (message) => {
+    setMessages([...messages||[], message]);
+  };
+  return (
+    <div className="fullpage" style={{ display: "flex", flexDirection: "column", width: "100%", alignItems: "center", justifyContent: "center" }}>
+      <div className="tabsForMobile chat-container" style={{
+        flexDirection: "row",
+        justifyContent: "center",
+        width: "max-content",
+        gap: "10px",
+        padding: "10px",
+        alignItems: "center",
+       
+        maxWidth: "600px",
+      height: "fit-content",
+    marginBottom: "0px",}
+      }>
+        <button
+          className={`btn4 ${currentTab === "history" ? "active" : ""}`}
+
+          onClick={()=>{
+            setCurrentTab("history");
+          }}
+        >
+          History
+        </button>
+        <button
+          className={`btn4 ${currentTab === "chat" ? "active" : ""}`}
+          onClick={()=>{
+            setCurrentTab("chat");
+          }}
+        >
+          Chat
+        </button>
+        {/* <button
+          className={`btn4 ${currentTab === "settings" ? "active" : ""}`}
+          onClick={()=>{
+            setCurrentTab("settings");
+          }}
+        >
+          Settings
+        </button> */}
+      </div>
+<div className="whole-container" style={{
+      display: "flex",
+      flexDirection: "row",
+      justifyContent: "center",
+      gap: "5px",
+      alignItems: "center",
+      width: "100%",
+      padding: "0px 0px 0px 0px"
+    }}>
+
+    {/* Here goes available chats or conversation history */}
+    <div
+    className="history chat-container"
+    style={{
+      maxWidth: "400px",
+      display: currentTab === "history" ? "flex" : undefined,
+
+      flexDirection: "column",
+      alignItems: "center",
+      justifyContent: "flex-start",
+      padding: "20px",
+    }}
+  >
+    <h1
+      className="gradient-text"
+      style={{ textAlign: "center", fontSize: "30px", fontWeight: "bold", marginBottom: "20px" }}
+    >
+      History
+    </h1>
+    <div className="line"></div>
+
+    <main style={{width: '100%', overflowY: 'auto'}}>
+    <div className="goToConv" style={{width: '100%'}} onClick={()=>{
+      setMessages([]);
+      setCurrentTab("chat");
+    }}>
+      <div className="titler">New Conversation</div>
+      <p>Start a new conversation by simply clicking here!</p>
+    
+    </div>
+    {typeof window !== 'undefined' &&
+      Object.keys(conversations).map((key,index)=>{
+        if (!key.includes('messages') && !key.includes('|')) return
+        let name = key.split('|')[0].replace('messages-', '')
+        // take only first 10 characters from name
+        name = name.slice(0, 20) + '...';
+
+        return <div key={index} style={{marginTop: '10px',width: '100%'}} className="goToConv" onClick={()=>{
+          setMessages(JSON.parse(localStorage.getItem(key)));
+          setCurrentTab("chat");
+        }}>
+          <div className="titler" style={{fontSize: '18px', display: 'flex', justifyContent: 'space-between'}}><span>{name}</span> {/*Delete button*/}
+          <button className="btn3" onClick={
+            ()=>{
+              setMessages({})
+              localStorage.removeItem(key);
+              setConversations({
+                ...localStorage
+              })
+            }
+          } style={{
+            color: '#0000ff',
+          }}>
+            <RiDeleteBinLine/>
+            </button></div>
+          <div className="row">
+          <p>{JSON.parse(localStorage.getItem(key)).length} messages</p>
+          <p>{Date(JSON.parse(localStorage.getItem(key))[0].timestamp)}</p>
+          </div>
+          
+
+        </div>
+      })
+    }
+    
+    </main>
+
+    </div>
+
+
+
+
+
+      {/* Here goes main chat UI */}
+      <div
+      className="chat"
+      style={{
+        width: "100%",
+        maxHeight: "100dvh",
+        minHeight: "100%",
+
+        display: currentTab === "chat" ? "flex" : undefined,
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "space-between",
+      }}
+    >
+      {modelSelectionModalOpen && (
+        <div
+          style={{
+            position: "fixed",
+            top: 0,
+            left: 0,
+            width: "100%",
+            height: "100%",
+            backgroundColor: "rgba(0, 0, 0, 0.5)",
+            zIndex: 9999,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+          }}
+        >
+          <div
+            style={{
+              backgroundColor: "rgba(90, 90, 90, 0.2)",
+              backdropFilter: "blur(5px)",
+              padding: 20,
+              borderRadius: 10,
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              justifyContent: "center",
+            }}
+          >
+            <select
+              value={currentModel}
+              onChange={(e) => setCurrentModel(e.target.value)}
+            >
+              {models.map((model) => (
+                <option key={model} value={model}>
+                  {model}
+                </option>
+              ))}
+            </select>
+            <button
+              onClick={() => setModelSelectionModalOpen(false)}
+              style={{
+                marginTop: 10,
+              }}
+            >
+              Close
+            </button>
+          </div>
+        </div>
+      )}
+      <div className="chat-container">
+        <div className="message-container">
+          {/* Welcome message if the messages array is empty */}
+          {(messages?.length === 0 || !messages) && (
+            <div
+              className="message-holder"
+              style={{
+                alignSelf: "center",
+                justifySelf: "center",
+                alignItems: "center",
+                justifyContent: "flex-start",
+                height: "100%",
+              }}
+            >
+              <div className="gradient-text" style={{fontSize: "30px", textAlign: "center", fontWeight: "bold" }}>Welcome to Smooth AI</div>
+              <div className="small" style={{
+                color: "gray",
+              }}>Get started by asking me a question!</div>
+              {/* Some random AI message and when clicked will be set as input value and be sent */}
+              <div
+                className="message-holder"
+                style={{
+                  display: "flex",
+                  flexDirection: "column",
+                  width: "100%",
+                  alignItems: "center",
+                  justifyContent: "center",
+
+                }}
+              >
+
+                  <button
+                    className="btn3 small"
+                    style={{
+                      width: "90%",
+                      marginTop: "10px",
+                      marginLeft: "20px"
+                    }}
+                    onClick={(e) => {
+                     document.querySelector('textarea').value = e.target.innerText
+     
+                    }}
+                  >
+                    How can I make a beautiful cup cake with extra chocolate flavour! Tell me step by step!
+                  </button>
+                  <button
+                    className="btn3 small"
+                    style={{
+                      width: "90%",
+                      marginTop: "10px",
+                      marginLeft: "20px"
+
+
+                    }}
+                    onClick={(e) => {
+                     document.querySelector('textarea').value = e.target.innerText
+     
+                    }}
+                  >
+                    I am bored! Can you tell me something special! Can we play games together or we would play a quiz game with each other?
+                  </button>
+                  <button
+                    className="btn3 small"
+                    style={{
+                      marginTop: "10px",
+                      width: "90%",
+                      marginLeft: "20px"
+
+                    }}
+                    onClick={(e) => {
+                     document.querySelector('textarea').value = e.target.innerText
+     
+                    }}
+                  >
+                    Ah, the world is beautiful! You, as an Artificial Intelligence, can tell me something about the world! You can express your own thinking and ideas about the world and the human being! I am eagerly waiting to hear from you!
+                  </button>
+   
+              </div>
+            </div>
+          )}
+          {messages?.map((message, index) => (
+            <div
+              className="message-holder"
+              key={index}
+              style={{
+                alignSelf: message.role === "user" ? "flex-end" : "flex-start",
+              }}
+            >
+              <div
+                className="small"
+                style={{
+                  alignSelf:
+                    message.role === "user" ? "flex-end" : "flex-start",
+                }}
+              >
+                {message.role.charAt(0).toUpperCase() + message.role.slice(1)}
+                {!message.greet &&
+                  " - " + new Date(message.timestamp).toLocaleTimeString()}
+              </div>
+
+              <ReactMarkdown
+                key={index}
+                className={`message ${
+                  message.role === "user" ? "user-message" : "ai-message"
+                }`}
+              >
+                {message.content}
+              </ReactMarkdown>
+                {message.role !== "user" && <MessageOptions message={
+                  // previous message of AI
+                  messages[index - 1]
+                } regenerateMessage={regenerateMessage} />}
+            </div>
+          ))}
+          {/* Loading Message */}
+          <div
+            className="message-holder"
+            style={{
+              alignSelf: "flex-start",
+            }}
+          >
+            <div
+              className="small"
+              style={{
+                alignSelf: "flex-start",
+              }}
+            >
+{sendButtonDisabled &&              <div className="" style={{display:"flex", alignItems:"center", justifyContent:"center",}}>
+                <div className="ld-ripple">
+                  <div></div>
+                  <div></div>
+                </div> Generating Response ⚙️
+              </div>}
+            </div>
+          </div>
+        </div>
+        <div
+          className="inpsection"
+          style={{
+            display: "flex",
+            flexDirection: "row",
+            alignItems: "center",
+            justifyContent: "center",
+            margin: "0px 0px 10px 0px",
+
+          }}
+        >
+          <button className="btn2" onClick={() => setModelSelectionModalOpen(true)}>
+            <i className="animation"></i>AI<i className="animation"></i>
+          </button>
+          <TextField
+            type="text"
+            placeholder="Aa"
+            className="inp"
+            multiline
+            maxRows={10}
+            onKeyDown={(e) => {
+              // check if on mobile
+              function checkMobile() {
+                let check = false;
+                (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) check = true;})(navigator.userAgent||navigator.vendor||window.opera);
+                return check;
+              }
+
+              if (e.key === "Enter" && !e.shiftKey && !checkMobile()) {
+                updateMessages({
+                  role: "user",
+                  content: e.target.value,
+                  timestamp: Date.now(),
+                  who: "You: ",
+                  id: generateRandomId(),
+                });
+                document.querySelector(".inp").value = null;
+              }
+            }}
+          />
+          <button
+            disabled={sendButtonDisabled}
+            className="btn2"
+            onClick={() => {
+              if (isGenerating) {
+                setStop(true);
+                console.log("stop");
+                return;
+              }
+              let newMessage = {
+                role: "user",
+                who: "You: ",
+                id: generateRandomId(),
+                content: document.querySelector(".inp").value,
+                timestamp: Date.now(),
+              };
+              updateMessages(newMessage);
+              document.querySelector(".inp").value = null;
+            }}
+          >
+            <i className="animation"></i>{isGenerating? "Stop" : "Send"}<i className="animation"></i>
+          </button>
+        </div>
+        
+      </div>
+      
+    </div>
+    
+
+
+
+    {/* Here goes chat info */}
+
+
+    </div>
+        </div>
+    
+    
+  );
+};
+
+export default ChatPage;

jsconfig.json

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

next.config.mjs

@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+
+export default nextConfig;

package.json

@@ -0,0 +1,28 @@
+{
+  "name": "smooth-ai",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.13.0",
+    "@emotion/styled": "^11.13.0",
+    "@mui/material": "^5.16.7",
+    "axios": "^1.7.4",
+    "next": "14.2.5",
+    "react": "^18",
+    "react-dom": "^18",
+    "react-icons": "^5.3.0",
+    "react-markdown": "^9.0.1"
+  },
+  "devDependencies": {
+    "eslint": "^8",
+    "eslint-config-next": "14.2.5",
+    "postcss": "^8",
+    "tailwindcss": "^3.4.1"
+  }
+}

postcss.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
+
+export default config;

tailwind.config.js

@@ -0,0 +1,18 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {
+      backgroundImage: {
+        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
+        "gradient-conic":
+          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
+      },
+    },
+  },
+  plugins: [],
+};