Search working!!!

client/src/components/EcoconnectSearch.tsx

@@ -1,5 +1,6 @@
 import {
   Button,
+  Card,
   Input,
   Kbd,
   Modal,
@@ -9,15 +10,19 @@ import {
   useDisclosure,
 } from "@nextui-org/react";
 import { useEffect, useState } from "react";
-import { MagnifyingGlassIcon } from "../icons";
+import { ArrowTopRightOnSquare, MagnifyingGlassIcon } from "../icons";
 import config from "../config";
 import instance from "../security/http";
 import EcoconnectFullLogo from "./EcoconnectFullLogo";
+import { useNavigate } from "react-router-dom";
 
 export default function EcoconnectSearch() {
   const [searchQuery, setSearchQuery] = useState("");
-  const [aiResponse, setAiResponse] = useState("");
+  const [aiResponseRoute, setAiResponseRoute] = useState("");
+  const [aiResponseRouteDescription, setAiResponseRouteDescription] =
+    useState("");
   const [isQueryLoading, setIsQueryLoading] = useState(false);
+  const navigate = useNavigate();
 
   const {
     isOpen: isAiDialogOpen,
@@ -28,7 +33,7 @@ export default function EcoconnectSearch() {
   const dialogOpenChange = () => {
     onAiDialogOpenChange();
     setSearchQuery("");
-    setAiResponse("");
+    setAiResponseRoute("");
   };
 
   const handleKeyPress = (event: KeyboardEvent) => {
@@ -42,18 +47,35 @@ export default function EcoconnectSearch() {
     if (searchQuery.length <= 0) return;
     setIsQueryLoading(true);
     instance
-      .get(
-        `${config.serverAddress}/connections/openai-chat-completion/${searchQuery}`
-      )
+      .get(`${config.serverAddress}/connections/nls/${searchQuery}`)
       .then((response) => {
-        console.log(response.data.response);
-        setAiResponse(response.data.response);
+        const rawResponse = response.data.response;
+        const parsedResponse = JSON.parse(rawResponse);
+        const resolvedRoute = parsedResponse.route;
+        setAiResponseRoute(resolvedRoute);
+        setAiResponseRouteDescription(getRouteDescription(resolvedRoute));
       })
       .finally(() => {
         setIsQueryLoading(false);
       });
   };
 
+  const routeDescriptions: { [key: string]: string } = {
+    "/": "Go home",
+    "/springboard": "Go to the Dashboard",
+    "/manage-account": "Management your account",
+    "/events": "Browse events",
+    "/karang-guni-schedules": "Browse available Karang Guni",
+    "/home-bill-contest": "Take part in a contest",
+    "/home-bill-contest/new-submission": "Submit your bill",
+    "/community-posts": "Browse community posts",
+    "/community-posts/create": "Create a post",
+  };
+
+  const getRouteDescription = (route: string) => {
+    return routeDescriptions[route] || "Unknown";
+  };
+
   useEffect(() => {
     window.addEventListener("keydown", handleKeyPress);
 
@@ -93,7 +115,7 @@ export default function EcoconnectSearch() {
         placement="top"
       >
         <ModalContent>
-          {() => {
+          {(onClose) => {
             return (
               <>
                 <ModalBody>
@@ -121,10 +143,30 @@ export default function EcoconnectSearch() {
                         </Button>
                       }
                     />
-                    {aiResponse.length > 0 && (
-                      <p className="bg-neutral-50 p-4 border-2 rounded-xl">
-                        {aiResponse}
-                      </p>
+                    {aiResponseRoute.length > 0 && (
+                      <Card className="p-4">
+                        <div className="flex flex-row justify-between *:my-auto">
+                          <div className="flex flex-col">
+                            <p className="text-xl font-bold">
+                              {aiResponseRouteDescription}
+                            </p>
+                            <p className="text-sm opacity-50">
+                              https://ecoconnect.gov{aiResponseRoute}
+                            </p>
+                          </div>
+                          <Button
+                            isIconOnly
+                            variant="light"
+                            className="text-red-500"
+                            onPress={() => {
+                              onClose();
+                              navigate(aiResponseRoute);
+                            }}
+                          >
+                            <ArrowTopRightOnSquare />
+                          </Button>
+                        </div>
+                      </Card>
                     )}
                   </div>
                 </ModalBody>

client/src/icons.tsx

@@ -520,3 +520,22 @@ export const LifebuoyIcon = () => {
     </svg>
   );
 };
+
+export const ArrowTopRightOnSquare = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={1.5}
+      stroke="currentColor"
+      className="size-6"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"
+      />
+    </svg>
+  );
+};