StephCurry07 · StephCurry07 · Oct 1, 2024 · Oct 2, 2024 · Oct 3, 2024 · Oct 4, 2024
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+node_modules
diff --git a/frontend/app/api/copilotkit/route.jsx b/frontend/app/api/copilotkit/route.jsx
@@ -0,0 +1,21 @@
+import {
+    CopilotRuntime,
+    GroqAdapter,
+    copilotRuntimeNextJSAppRouterEndpoint,
+  } from '@copilotkit/runtime';
+  import Groq from 'groq-sdk';
+  import { NextRequest } from 'next/server';
+
+  const groq = new Groq({ model: "llama3-8b-8192"  });
+  const serviceAdapter = new GroqAdapter({ groq });
+  const runtime = new CopilotRuntime();
+
+  export const POST = async (req) => {
+    const { handleRequest } = copilotRuntimeNextJSAppRouterEndpoint({
+      runtime,
+      serviceAdapter,
+      endpoint: '/api/copilotkit',
+    });
+
+    return handleRequest(req);
+  };
diff --git a/frontend/app/create-ride/layout.jsx b/frontend/app/create-ride/layout.jsx
@@ -1,5 +1,6 @@
 "use client";
 import { useSearchParams } from "next/navigation";
+import { CopilotPopup } from "@copilotkit/react-ui";
 import Header from "@components/Header";
 
 const registerlayout = ({ children }) => {
@@ -15,6 +16,14 @@ const registerlayout = ({ children }) => {
         role={role}
       />
       {children}
+      <CopilotPopup
+        instructions={"You are on the Create Ride page. Guide the user through creating a new ride by entering details such as starting location, destination, departure time and available seats, The cost will be calculated and displayed according to the fuel price of youre region. User has to sign transaction to list your ride. Inform the user that this ride will be visible to passengers on the Book Rides page and that the fuel cost will be shared among all passengers, making it cost-efficient and eco-friendly."}
+        labels={{
+          title: "EtherBot",
+          initial: "What can I help you with?",
+        }}
+      />
+
     </div>
   );
 };

diff --git a/frontend/app/global.css b/frontend/app/global.css
@@ -2,6 +2,12 @@ body {
   margin: 0;
 }
 
+#root {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
 .imageContainer {
   width: 100%;
   height: 100%;
@@ -61,7 +67,7 @@ body {
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 }
 
-.header {
+/* .header {
   background-color:yellow;
   display: flex;
   flex-direction: row;
@@ -78,11 +84,15 @@ body {
   padding: 10px;
   border-radius: 15px;
   transition: background-color 0.3s, color 0.3s;
-}
+} */
 
-.header-ele-links:hover {
+/* .header-ele-links:hover {
   background-color: white;
   box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
+} */
+
+.footer {
+  margin-bottom : auto;
 }
 
 .link-text {

diff --git a/frontend/app/layout.jsx b/frontend/app/layout.jsx
@@ -1,6 +1,8 @@
 import { Inter } from "next/font/google";
+import { CopilotChat } from './../components/CopilotChat';
 import "./global.css";
-import SupportChatbot from "./test/page";
+import { CopilotKit } from "@copilotkit/react-core";
+import "@copilotkit/react-ui/styles.css";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -23,8 +25,10 @@ export default function RootLayout({ children }) {
   return (
     <html lang="en">
       <body className={inter.className}>
-        {children}
-        <SupportChatbot />
+        <CopilotKit runtimeUrl="/api/copilotkit">
+          {children}
+          <CopilotChat/>
+        </CopilotKit>
       </body>
     </html>
   );

diff --git a/frontend/app/my-rides/layout.jsx b/frontend/app/my-rides/layout.jsx
@@ -1,6 +1,7 @@
 "use client";
 import React from "react";
 import Header from "@components/Header";
+import { CopilotPopup } from "@copilotkit/react-ui";
 import { useSearchParams } from "next/navigation";
 
 const myRidesLayout = ({ children }) => {
@@ -16,6 +17,14 @@ const myRidesLayout = ({ children }) => {
         role={role}
       />
       {children}
+      <CopilotPopup
+        instructions={"You are on the My Rides page, where users can see their current and past ride participations. If the user is a driver, display rides they have created. For passengers, show rides they have booked. Provide options to manage or view ride details and assist with any modifications if needed."}
+        labels={{
+          title: "EtherBot",
+          initial: "What can I help you with?",
+        }}
+      />
+
     </div>
   );
 };

diff --git a/frontend/app/my-rides/page.jsx b/frontend/app/my-rides/page.jsx
@@ -138,6 +138,8 @@ const MyRides = () => {
         display: "flex",
         flexDirection: "column",
         alignItems: "center",
+        minHeight: "82vh",
+        marginTop: "25px",
       }}
     >
       {role === "not chosen" || myRides.length == 0 ? (

diff --git a/frontend/app/page.jsx b/frontend/app/page.jsx
@@ -12,6 +12,7 @@ const HomePage = () => {
   const [ethereum, setEthereum] = useState(undefined);
   const [connectedAccount, setConnectedAccount] = useState(undefined);
   const [balance, setBalance] = useState(undefined);
+  const [isGuest, setIsGuest] = useState(false);
 
 
   const handleAccounts = async (accounts) => {
@@ -76,8 +77,17 @@ const HomePage = () => {
     ToastService.success("Connected to MetaMask");
   };
 
-  if (!ethereum) {
-    return <InstallMetaMask />;
+  const loginAsGuest = () => {
+    setIsGuest(true);
+  };
+
+  if (!ethereum && !isGuest) {
+    return (
+      <>
+        <InstallMetaMask />
+        <button onClick={loginAsGuest}>Continue as Guest</button>
+      </>
+    );
   }
 
   return (
@@ -90,7 +100,7 @@ const HomePage = () => {
         height={200}
         className="image"
       />
-      {!connectedAccount ? (
+      {!connectedAccount && !isGuest ? (
         <div
           style={{
             display: "flex",
@@ -109,9 +119,15 @@ const HomePage = () => {
             metamask wallet so go ahead and do that and we'll see you on the
             other side.
           </p>
-          <PrimaryButton onClick={connectAccount}>
-            Connect MetaMask Wallet
-          </PrimaryButton>
+          <div className="login-buttons"  style={{ display: "flex"}}>
+            <PrimaryButton onClick={connectAccount}  style={{marginRight:"10px"}}>
+              Connect MetaMask Wallet
+            </PrimaryButton>
+            <PrimaryButton onClick={loginAsGuest}  style={{marginLeft:"10px"}}>
+              Continue as Guest <br />
+              (<span style={{ fontSize: "small", color: "red" }}>backend won't work</span>)
+            </PrimaryButton>
+          </div>
         </div>
       ) : (
         <div
@@ -129,12 +145,12 @@ const HomePage = () => {
             as either a Driver or a Passenger for the current session and get
             started.
           </p>
-          <p>Connected Account: {connectedAccount}</p>
+          <p>Connected Account: {connectedAccount || "Guest User"}</p>
           <Link
             href={{
               pathname: "/register",
               query: {
-                connectedAccount: connectedAccount,
+                connectedAccount: connectedAccount || "guest",
                 balance: balance,
                 role: "not chosen",
               },

diff --git a/frontend/app/register/layout.jsx b/frontend/app/register/layout.jsx
@@ -2,6 +2,7 @@
 import React from "react";
 import Header from "@components/Header";
 import { useSearchParams } from "next/navigation";
+import { CopilotPopup } from "@copilotkit/react-ui";
 
 const registerlayout = ({ children }) => {
   const searchParams = useSearchParams();
@@ -16,6 +17,13 @@ const registerlayout = ({ children }) => {
         role={role}
       />
       {children}
+      <CopilotPopup
+        instructions={"You are assisting the user in navigating and using EtherWheels, a web3-based ride-sharing platform that helps users connect as drivers and passengers for shared rides on Ethereum or Polygon. Provide guidance based on the user's role: 'driver' or 'passenger'. For example, help drivers with registration, car details entry, and ride creation, and help passengers find and book rides effectively. Always aim to enhance the user's experience by making the platform's eco-friendly and cost-sharing benefits clear."}
+        labels={{
+          title: "EtherBot",
+          initial: "What can I help you with?",
+        }}
+      />
     </div>
   );
 };

diff --git a/frontend/app/register/page.jsx b/frontend/app/register/page.jsx
@@ -9,7 +9,7 @@ const RegisterPage = () => {
   const balance = searchParams.get("balance");
 
   return (
-    <div className="registerContainer">
+    <div className="registerContainer" style={{ minHeight: "72vh" }}>
       <div className="register-card">
         <Image
           src="/images/driver.jpg"

diff --git a/frontend/app/styles/get-rides.module.css b/frontend/app/styles/get-rides.module.css
@@ -4,6 +4,7 @@
   flex-direction: column; 
   align-items: center; 
   padding: 20px;
+  margin-top: 55px;
 }
 
 .filterContainer {

diff --git a/frontend/app/styles/user-registration.module.css b/frontend/app/styles/user-registration.module.css
@@ -1,8 +1,11 @@
 /* styles/passenger-registration.module.css */
 
+
 .container {
   max-width: 40%;
   margin: auto;
+  min-height: 80vh;
+  margin-top: 55px;
 }
 
 .formGroup {

diff --git a/frontend/app/test/chatbot.css b/frontend/app/test/chatbot.css
diff --git a/frontend/app/test/page.jsx b/frontend/app/test/page.jsx
@@ -4,8 +4,6 @@ import { useSpring, animated } from 'react-spring';
 import styled from 'styled-components';
 import ChatHeader from "./ui/Header";
 import LoadingIndicator from "./ui/Loading";
-import './chatbot.css';
-// import { Chatbox } from '@talkjs/react';
 
 const ChatbotContainer = styled(animated.div)`
   position: fixed;
@@ -48,9 +46,9 @@ const MessageInput = styled.input`
 
 
 const AssistantButton = styled.button`
-  position: fixed;
-  bottom: 20px;
-  right: 100px;
+  position: fixed; /* Change to fixed to stay relative to viewport */
+  bottom: 80px; /* Space above the footer */
+  right: 20px; /* Adjusted for better positioning */
   padding: 10px 15px;
   background-color: #007bff;
   color: white;
@@ -64,6 +62,7 @@ const AssistantButton = styled.button`
 `;
 
 
+
 const BoldText = ({ children }) => <strong>{children}</strong>;
 const LineBreak = () => <br />;
 

diff --git a/frontend/components/CopilotChat.jsx b/frontend/components/CopilotChat.jsx
@@ -0,0 +1,15 @@
+import { CopilotPopup } from "@copilotkit/react-ui";
+
+export function CopilotChat() {
+  return (
+    <>
+      <CopilotPopup
+        instructions={"You are assisting the user in navigating and using EtherWheels, a web3-based ride-sharing platform that helps users connect as drivers and passengers for shared rides on Ethereum or Polygon. Assist the user in connecting their MetaMask wallet to proceed. Ensure the user understands the importance of connecting a wallet to access EtherWheels features like registering as a driver or passenger, viewing rides, and booking options.Provide guidance based on the user's role: 'driver' or 'passenger'. For example, help drivers with registration, car details entry, and ride creation, and help passengers find and book rides effectively. Always aim to enhance the user's experience by making the platform's eco-friendly and cost-sharing benefits clear."}
+        labels={{
+          title: "EtherBot",
+          initial: "What can I help you with?",
+        }}
+      />
+    </>
+  );
+}