adds a frontend to use the tour guide assistant

example/assets/js/App.tsx

@@ -20,7 +20,7 @@ import {
   IconMovie,
   IconChecklist,
 } from "@tabler/icons-react";
-import { Chat, ResultsPage } from "@/components";
+import { Chat, TourGuide } from "@/components";
 import { createBrowserRouter, Link, RouterProvider } from "react-router-dom";
 import {
   ApiError,
@@ -203,7 +203,7 @@ const router = createBrowserRouter([
   },
   {
     path: "/tour-guide",
-    element: (<PageWrapper><ResultsPage assistantId="tour_guide_assistant" /></PageWrapper>),
+    element: (<PageWrapper><TourGuide assistantId="tour_guide_assistant" /></PageWrapper>),
   },
   {
     path: "/admin",

example/assets/js/components/Chat/Chat.tsx

@@ -1,7 +1,6 @@
 import {
   ActionIcon,
   Avatar,
-  Box,
   Button,
   Container,
   Group,

example/assets/js/components/TourGuide/TourGuide.tsx

@@ -0,0 +1,53 @@
+import "@mantine/core/styles.css";
+import { Container } from "@mantine/core";
+import axios from 'axios';
+import { useEffect, useState } from "react";
+
+
+export function TourGuide() {
+  const [latitude, setLatitude] = useState("");
+  const [longitude, setLongitude] = useState("");
+  const [attractions, setAttractions] = useState([]);
+  const [loading, setLoading] = useState(false);
+
+  navigator.geolocation.getCurrentPosition((position: any) => {
+    if (latitude && longitude) {
+      return;
+    }
+    setLatitude(position.coords.latitude);
+    setLongitude(position.coords.longitude);
+  }, (error) => console.log(error));
+
+  function findAttractions() {
+    if (!latitude || !longitude) {
+      return;
+    }
+
+    setLoading(true)
+    axios.get(`/tour-guide/?coordinate=${latitude},${longitude}`)
+      .then((response: any) => {
+        setAttractions(response.data.nearby_attractions)
+      }).finally(() => setLoading(false))
+  }
+
+  console.log(attractions)
+
+  return (
+    <Container>
+      Latitude: <input type="text" value={latitude} onChange={(e) => setLatitude(e.target.value)} />
+      Longitude: <input type="text" value={longitude} onChange={(e) => setLongitude(e.target.value)} />
+      <button onClick={findAttractions}>Guide Me!</button>
+      {loading ? <h3>Loading</h3> : null}
+      <div>
+        {attractions.map((item, i) =>
+          <div key={i}>
+            <h2>{item.attraction_url ? <a href={item.attraction_url}>{item.attraction_name}</a> : item.attraction_name }</h2>
+            <span>{item.attraction_description}</span>
+
+          </div>
+        )}
+      </div>
+    </Container>
+  );
+};
+

example/assets/js/components/index.ts

@@ -1,3 +1,3 @@
 export { ThreadsNav } from "./ThreadsNav/ThreadsNav";
 export { Chat } from "./Chat/Chat";
-export { ResultsPage } from "./ResultsPage/ResultsPage";
+export { TourGuide } from "./TourGuide/TourGuide";

example/demo/views.py

@@ -121,6 +121,5 @@ def get(self, request, *args, **kwargs):
 
         a = TourGuideAIAssistant()
         data = a.run(f"My coordinates are: ({coordinates})", thread.id)
-        print(data)
 
         return JsonResponse(json.loads(data))

example/package.json

@@ -43,6 +43,7 @@
     "@mantine/hooks": "^7.11.0",
     "@mantine/notifications": "^7.11.0",
     "@tabler/icons-react": "^3.7.0",
+    "axios": "^1.7.5",
     "cookie": "^0.6.0",
     "django-ai-assistant-client": "0.0.1",
     "modern-normalize": "^2.0.0",