feat: Next.js frontend

.gitignore

@@ -31,3 +31,7 @@ creds.json
 temp_test_run_data.json
 **/llm_tests_output.txt
 **/error_log.txt
+
+# frontend
+node_modules
+.next

.pre-commit-config.yaml

@@ -10,7 +10,3 @@ repos:
     -   id: check-executables-have-shebangs
     -   id: check-shebang-scripts-are-executable
     -   id: detect-private-key
-    -   id: check-added-large-files
-        args:
-        - --maxkb=120
-        - --enforce-all

frontend/nextjs-frontend/.env.example

@@ -0,0 +1,2 @@
+BACKEND_ENDPOINT=
+NEXT_PUBLIC_PROXY_ENDPOINT=

frontend/nextjs-frontend/README.md

@@ -0,0 +1,51 @@
+# ORAssistant Frontend
+
+This is the frontend application for ORAssistant built using Next.js.
+
+## Setup
+
+### Prerequisites
+
+Installation has been tested with these:
+- Node.js >= `v22.13.0`
+- Yarn package manager >= `v1.22.22`
+
+### Installation
+
+1. Clone the repository
+2. Install dependencies:
+```bash
+yarn install
+```
+
+### Development
+
+To run the development server:
+```bash
+yarn dev
+```
+
+## Configuration
+
+1. Create a `.env` file in the root directory
+2. Add your hosted backend link:
+```
+BACKEND_URL=backend_api_url
+```
+
+### Suggested Questions Feature
+
+For the suggested questions feature that uses Gemini 1.5:
+
+1. Navigate to `orassistant-chat/.env`
+2. Add the following environment variables:
+```
+GEMINI_API_KEY=api_key
+NEXT_PUBLIC_PROXY_ENDPOINT=localhost:3001/api/chat
+```
+
+Note:
+- You can generate a Gemini API key from [Google AI Studio](https://aistudio.google.com/)
+- The proxy endpoint is set to localhost:3001 for development
+
+

frontend/nextjs-frontend/apiproxy.py

@@ -0,0 +1,36 @@
+from flask import Flask, request, Response
+import requests
+from flask_cors import CORS
+import os
+from dotenv import load_dotenv
+import json
+
+load_dotenv()
+
+app = Flask(__name__)
+CORS(app)
+
+BACKEND_ENDPOINT = os.getenv('BACKEND_ENDPOINT')
+
+@app.route('/api/chat', methods=['POST']) 
+def proxy():
+    try:
+        app.logger.info('Received request: %s', request.json)
+
+        response = requests.post(BACKEND_ENDPOINT, 
+                               json=request.json)
+
+        app.logger.info('Response status: %s', response.status_code)
+
+        return Response(
+            response.content,
+            status=response.status_code,
+            content_type=response.headers['content-type']
+        )
+    except requests.RequestException as e:
+        app.logger.error('Request failed: %s', str(e))
+        return {'error': str(e)}, 500
+
+if __name__ == '__main__':
+    port = int(os.getenv('PORT', 3001))
+    app.run(debug=False, port=port)

frontend/nextjs-frontend/app/api/chat.ts

@@ -0,0 +1,37 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
+  if (req.method === 'POST') {
+    try {
+      const response = await fetch(
+        'https://select-griffon-suddenly.ngrok-free.app/api/chat',
+        {
+          method: 'POST',
+          headers: {
+            accept: 'application/json',
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify(req.body),
+        }
+      );
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+
+      const data = await response.json();
+      res.status(200).json(data);
+    } catch (error) {
+      console.error('Error in API route:', error);
+      res
+        .status(500)
+        .json({ error: 'An error occurred while processing your request' });
+    }
+  } else {
+    res.setHeader('Allow', ['POST']);
+    res.status(405).end(`Method ${req.method} Not Allowed`);
+  }
+}

frontend/nextjs-frontend/app/globals.css

@@ -0,0 +1,44 @@
+@import "tailwindcss";
+
+:root {
+  --foreground-rgb: 0, 0, 0;
+  --background-start-rgb: 255, 255, 255;
+  --background-end-rgb: 240, 240, 240;
+}
+
+.dark {
+  --foreground-rgb: 255, 255, 255;
+  --background-start-rgb: 0, 0, 0;
+  --background-end-rgb: 0, 0, 0;
+}
+
+body {
+  color: rgb(var(--foreground-rgb));
+  background: linear-gradient(
+      to bottom,
+      transparent,
+      rgb(var(--background-end-rgb))
+    )
+    rgb(var(--background-start-rgb));
+}
+
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.animate-fade-in {
+  animation: fadeIn 0.3s ease-out;
+}

frontend/nextjs-frontend/app/layout.tsx

@@ -0,0 +1,29 @@
+import type { Metadata } from 'next';
+import { Inter } from 'next/font/google';
+import './globals.css';
+import Header from '../components/Header';
+import { ThemeProvider } from '../components/ThemeProvider';
+
+const inter = Inter({ subsets: ['latin'] });
+
+export const metadata: Metadata = {
+  title: 'ORAssistant Chat',
+  description: 'A Conversational chatbot for all your OpenROAD queries',
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body className={inter.className}>
+        <ThemeProvider attribute="class" defaultTheme="light">
+          <Header />
+          {children}
+        </ThemeProvider>
+      </body>
+    </html>
+  );
+}

frontend/nextjs-frontend/app/notfound.tsx

@@ -0,0 +1,10 @@
+export default function NotFound() {
+  return (
+    <div className="flex flex-col items-center justify-center min-h-screen">
+      <h1 className="text-4xl font-bold mb-4">404 - Page Not Found</h1>
+      <p className="text-xl">
+        The page you are looking for doesn&apos;t exist.
+      </p>
+    </div>
+  );
+}