Merge pull request #45 from xyvora/prettier

Fix lint errors and run prittier

.github/workflows/testing.yml

@@ -86,5 +86,5 @@ jobs:
         run: just frontend-install
       - name: Lint
         run: just frontend-lint
-      - name: Build
-        run: just frontend-build
+        # - name: Build
+        #   run: just frontend-build

frontend/.prettierignore

@@ -0,0 +1,13 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock

frontend/.prettierrc

@@ -0,0 +1,8 @@
+{
+  "useTabs": false,
+  "singleQuote": false,
+  "trailingComma": "all",
+  "printWidth": 100,
+  "plugins": ["prettier-plugin-tailwindcss"],
+  "semi": true
+}

frontend/app/about/page.tsx

@@ -1,20 +1,24 @@
+import React from "react";
+
 export default function About() {
   return (
     <main className="flex min-h-screen flex-col items-center justify-center p-24">
-      <h1 className="text-4xl font-bold mb-8 bg-gradient-to-r from-blue-500 to-purple-600 bg-clip-text text-transparent">
+      <h1 className="mb-8 bg-gradient-to-r from-blue-500 to-purple-600 bg-clip-text text-4xl font-bold text-transparent">
         About AI Chat Interface
       </h1>
-      <p className="text-xl mb-8 text-center max-w-2xl">
-        AI Chat Interface is an advanced conversational AI platform that allows users to interact with different types of AI agents. Our platform leverages cutting-edge natural language processing technologies to provide intelligent and context-aware responses.
+      <p className="mb-8 max-w-2xl text-center text-xl">
+        AI Chat Interface is an advanced conversational AI platform that allows users to interact
+        with different types of AI agents. Our platform leverages cutting-edge natural language
+        processing technologies to provide intelligent and context-aware responses.
       </p>
-      <h2 className="text-2xl font-semibold mt-8 mb-4">Key Features:</h2>
-      <ul className="list-disc list-inside text-lg">
+      <h2 className="mb-4 mt-8 text-2xl font-semibold">Key Features:</h2>
+      <ul className="list-inside list-disc text-lg">
         <li>Multiple AI agent types (PFC and General)</li>
         <li>Real-time conversation with AI</li>
         <li>Dark mode for comfortable viewing</li>
         <li>Emoji support for expressive communication</li>
         <li>Feedback system for continuous improvement</li>
       </ul>
     </main>
-  )
+  );
 }

frontend/app/account/page.tsx

@@ -1,38 +1,36 @@
-'use client'
-
-import { useState } from 'react'
-import { motion } from 'framer-motion'
+import React, { useState } from "react";
+import { motion } from "framer-motion";
 // import { User, Mail, Key, Save } from 'lucide-react'
-import { User, Mail, Key } from 'lucide-react'
+import { User, Mail, Key } from "lucide-react";
 /* import { Input } from "@/components/ui/input"
 import { Button } from "@/components/ui/button"
 import { Label } from "@/components/ui/label"
 import { WavyBackground } from '../../components/ui/wavy-background' */
 
 export default function AccountPage() {
   // const [name, setName] = useState('John Doe')
-  const name = useState('John Doe')
+  const name = useState("John Doe");
   // const [email, setEmail] = useState('[email protected]')
-  const email = useState('[email protected]')
+  const email = useState("[email protected]");
   // const [password, setPassword] = useState('')
-  const password = useState('')
+  const password = useState("");
 
   const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault()
+    e.preventDefault();
     // Here you would typically handle the account update logic
-    console.log('Account update attempt with:', { name, email, password })
-  }
+    console.log("Account update attempt with:", { name, email, password });
+  };
 
   return (
-    <div className="min-h-screen flex items-center justify-center bg-gray-900 p-4">
+    <div className="flex min-h-screen items-center justify-center bg-gray-900 p-4">
       {/*<WavyBackground className="absolute inset-0" />*/}
       <motion.div
         initial={{ opacity: 0, y: -20 }}
         animate={{ opacity: 1, y: 0 }}
         transition={{ duration: 0.5 }}
-        className="w-full max-w-md bg-gray-800 bg-opacity-80 backdrop-blur-md rounded-3xl shadow-xl p-8 relative z-10"
+        className="relative z-10 w-full max-w-md rounded-3xl bg-gray-800 bg-opacity-80 p-8 shadow-xl backdrop-blur-md"
       >
-        <h2 className="text-3xl font-bold text-center mb-6 bg-gradient-to-r from-blue-500 to-purple-600 bg-clip-text text-transparent">
+        <h2 className="mb-6 bg-gradient-to-r from-blue-500 to-purple-600 bg-clip-text text-center text-3xl font-bold text-transparent">
           Your SCANUE-V Account
         </h2>
         <form onSubmit={handleSubmit} className="space-y-4">
@@ -47,7 +45,10 @@ export default function AccountPage() {
                 className="pl-10 rounded-full bg-gray-700 text-white placeholder-gray-400"
                 required
               />*/}
-              <User className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={18} />
+              <User
+                className="absolute left-3 top-1/2 -translate-y-1/2 transform text-gray-400"
+                size={18}
+              />
             </div>
           </div>
           <div className="space-y-2">
@@ -61,7 +62,10 @@ export default function AccountPage() {
                 className="pl-10 rounded-full bg-gray-700 text-white placeholder-gray-400"
                 required
               />*/}
-              <Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={18} />
+              <Mail
+                className="absolute left-3 top-1/2 -translate-y-1/2 transform text-gray-400"
+                size={18}
+              />
             </div>
           </div>
           <div className="space-y-2">
@@ -74,7 +78,10 @@ export default function AccountPage() {
                 onChange={(e) => setPassword(e.target.value)}
                 className="pl-10 rounded-full bg-gray-700 text-white placeholder-gray-400"
               />*/}
-              <Key className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={18} />
+              <Key
+                className="absolute left-3 top-1/2 -translate-y-1/2 transform text-gray-400"
+                size={18}
+              />
             </div>
           </div>
           {/*<Button type="submit" className="w-full rounded-full bg-gradient-to-r from-blue-500 to-purple-600 text-white">
@@ -83,5 +90,5 @@ export default function AccountPage() {
         </form>
       </motion.div>
     </div>
-  )
+  );
 }

frontend/app/chat-interface.tsx

@@ -1,5 +1,6 @@
-import { ChatInterfaceClient } from '../components/ChatInterfaceClient'
+import React from "react";
+import { ChatInterfaceClient } from "../components/ChatInterfaceClient";
 
 export default function ChatInterface() {
-  return <ChatInterfaceClient />
+  return <ChatInterfaceClient />;
 }

frontend/app/chat/page.tsx

@@ -1,9 +1,10 @@
-import ChatInterface from '../chat-interface'
+import React from "react";
+import ChatInterface from "../chat-interface";
 
 export default function ChatPage() {
   return (
     <main className="h-screen overflow-hidden">
       <ChatInterface />
     </main>
-  )
+  );
 }

frontend/app/layout.tsx

@@ -1,28 +1,23 @@
 // import './globals.css'
-import { Inter } from 'next/font/google'
-import { Navigation } from '../components/Navigation'
-import { PageTransition } from '../components/PageTransition'
+import { Inter } from "next/font/google";
+import { Navigation } from "../components/Navigation";
+import { PageTransition } from "../components/PageTransition";
+import React from "react";
 
-const inter = Inter({ subsets: ['latin'] })
+const inter = Inter({ subsets: ["latin"] });
 
 export const metadata = {
-  title: 'AI Chat Interface',
-  description: 'An advanced AI chat interface with multiple agent types',
-}
+  title: "AI Chat Interface",
+  description: "An advanced AI chat interface with multiple agent types",
+};
 
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode
-}) {
+export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en">
       <body className={`${inter.className} antialiased`}>
         <Navigation />
-        <PageTransition>
-          {children}
-        </PageTransition>
+        <PageTransition>{children}</PageTransition>
       </body>
     </html>
-  )
+  );
 }

frontend/app/login/page.tsx

@@ -1,38 +1,34 @@
-'use client'
-
-import { useState } from 'react'
-import { motion } from 'framer-motion'
+import React, { useState } from "react";
+import { motion } from "framer-motion";
 // import { User, Lock, ArrowRight } from 'lucide-react'
-import { User, Lock } from 'lucide-react'
-import Link from 'next/link'
+import { User, Lock } from "lucide-react";
+import Link from "next/link";
 /* import { Input } from "@/components/ui/input"
 import { Button } from "@/components/ui/button"
 import { WavyBackground } from '../../components/ui/wavy-background' */
 
 export default function LoginPage() {
   // const [email, setEmail] = useState('')
-  const email = useState('')
+  const email = useState("");
   // const [password, setPassword] = useState('')
-  const password = useState('')
+  const password = useState("");
 
   const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault()
+    e.preventDefault();
     // Here you would typically handle the login logic
-    console.log('Login attempt with:', { email, password })
-  }
+    console.log("Login attempt with:", { email, password });
+  };
 
   return (
-    <div className="min-h-screen flex items-center justify-center bg-gray-900 p-4">
+    <div className="flex min-h-screen items-center justify-center bg-gray-900 p-4">
       {/*<WavyBackground className="absolute inset-0" />*/}
       <motion.div
         initial={{ opacity: 0, y: -20 }}
         animate={{ opacity: 1, y: 0 }}
         transition={{ duration: 0.5 }}
-        className="w-full max-w-md bg-gray-800 bg-opacity-80 backdrop-blur-md rounded-3xl shadow-xl p-8"
+        className="w-full max-w-md rounded-3xl bg-gray-800 bg-opacity-80 p-8 shadow-xl backdrop-blur-md"
       >
-        <h2 className="text-3xl font-bold text-center mb-6 text-white">
-          Login to SCANUE-V
-        </h2>
+        <h2 className="mb-6 text-center text-3xl font-bold text-white">Login to SCANUE-V</h2>
         <form onSubmit={handleSubmit} className="space-y-4">
           <div className="relative">
             {/*<Input
@@ -43,7 +39,10 @@ export default function LoginPage() {
               className="pl-10 rounded-full bg-gray-700 text-white placeholder-gray-400"
               required
             />*/}
-            <User className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-300" size={18} />
+            <User
+              className="absolute left-3 top-1/2 -translate-y-1/2 transform text-gray-300"
+              size={18}
+            />
           </div>
           <div className="relative">
             {/*<Input
@@ -54,7 +53,10 @@ export default function LoginPage() {
               className="pl-10 rounded-full bg-gray-700 text-white placeholder-gray-400"
               required
             />*/}
-            <Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-300" size={18} />
+            <Lock
+              className="absolute left-3 top-1/2 -translate-y-1/2 transform text-gray-300"
+              size={18}
+            />
           </div>
           {/* <Button type="submit" className="w-full rounded-full bg-gradient-to-r from-blue-500 to-purple-600 text-white">
             Login <ArrowRight className="ml-2" size={18} />
@@ -67,5 +69,5 @@ export default function LoginPage() {
         </div>
       </motion.div>
     </div>
-  )
+  );
 }

frontend/app/page.tsx

@@ -1,5 +1,4 @@
-'use client'
-
+import React from "react";
 // import Link from 'next/link'
 // import { motion } from 'framer-motion'
 // import { Bot, ArrowRight } from 'lucide-react'
@@ -29,7 +28,7 @@ const itemVariants = {
 
 export default function Home() {
   return (
-    <main className="flex min-h-screen flex-col items-center justify-center p-4 sm:p-8 bg-black">
+    <main className="flex min-h-screen flex-col items-center justify-center bg-black p-4 sm:p-8">
       {/*<WavyBackground className="max-w-4xl mx-auto pb-40">
         <motion.div
           variants={containerVariants}
@@ -64,5 +63,5 @@ export default function Home() {
         </motion.div>
       </WavyBackground>*/}
     </main>
-  )
+  );
 }