fixes PR comments for the tour guide app

example/assets/js/App.tsx

@@ -19,6 +19,7 @@ import {
   IconXboxX,
   IconMovie,
   IconChecklist,
+  IconPlane,
 } from "@tabler/icons-react";
 import { Chat, TourGuide } from "@/components";
 import { createBrowserRouter, Link, RouterProvider } from "react-router-dom";
@@ -139,7 +140,13 @@ const ExampleIndex = () => {
         >
           <Link to="/htmx">HTMX demo (no React)</Link>
         </List.Item>
-        <List.Item>
+        <List.Item
+          icon={
+            <ThemeIcon color="blue" size={28} radius="xl">
+              <IconPlane style={{ width: rem(18), height: rem(18) }} />
+            </ThemeIcon>
+          }
+        >
           <Link to="/tour-guide">Tour Guide Assistant</Link>
         </List.Item>
       </List>
@@ -203,7 +210,11 @@ const router = createBrowserRouter([
   },
   {
     path: "/tour-guide",
-    element: (<PageWrapper><TourGuide assistantId="tour_guide_assistant" /></PageWrapper>),
+    element: (
+      <PageWrapper>
+        <TourGuide assistantId="tour_guide_assistant" />
+      </PageWrapper>
+    ),
   },
   {
     path: "/admin",

example/assets/js/components/TourGuide/TourGuide.module.css

@@ -1,6 +1,9 @@
 .searchBar {
-  padding: 10px 0 5px 0;
-  .searchItem {
-    padding-right: 5px;
+  .inputBlock{
+    display: inline-block;
+    margin-right: 5px;
+  }
+  .coordinateInput {
+    width: 300px;
   }
 }

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

@@ -1,56 +1,91 @@
 import "@mantine/core/styles.css";
-import { Container } from "@mantine/core";
-import axios from 'axios';
-import { useEffect, useState } from "react";
+import { Container, TextInput, Button } from "@mantine/core";
+import { useState } from "react";
 import classes from "./TourGuide.module.css";
 
-
 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));
+  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))
-  }
+    setLoading(true);
+    fetch(`/tour-guide/?coordinate=${latitude},${longitude}`)
+      .then((response) => response.json())
+      .then((data: any) => {
+        console.log(data);
 
-  console.log(attractions)
+        setAttractions(data.nearby_attractions);
+      })
+      .finally(() => setLoading(false));
+  }
 
   return (
     <Container>
       <div className={classes.searchBar}>
-        <span className={classes.searchItem}>Latitude: <input type="text" value={latitude} onChange={(e) => setLatitude(e.target.value)} /></span>
-        <span className={classes.searchItem}>Longitude: <input type="text" value={longitude} onChange={(e) => setLongitude(e.target.value)} /></span>
-        <button className={classes.searchItem} onClick={findAttractions}>Guide Me!</button>
+        <span className={classes.inputBlock}>
+          Latitude:
+          <TextInput
+            type="text"
+            value={latitude}
+            onChange={(e) => setLatitude(e.target.value)}
+            className={classes.coordinateInput}
+          />
+        </span>
+        <span className={classes.inputBlock}>
+          Longitude:
+          <TextInput
+            type="text"
+            value={longitude}
+            onChange={(e) => setLongitude(e.target.value)}
+            className={classes.coordinateInput}
+          />
+        </span>
+        <Button className={classes.inputBlock} onClick={findAttractions}>
+          Guide Me!
+        </Button>
       </div>
       {loading ? <h3>Loading</h3> : null}
       <div>
-        {attractions.map((item, i) =>
+        {attractions.map((item, i) => (
           <div key={i}>
-            <h2>{item.attraction_url ? <a href={item.attraction_url}>{item.attraction_name}</a> : item.attraction_name }</h2>
+            <h2>
+              {item.attraction_url ? (
+                <a href={item.attraction_url} target="_blank">
+                  {item.attraction_name}
+                </a>
+              ) : (
+                item.attraction_name
+              )}
+            </h2>
             <span>{item.attraction_description}</span>
-            <div><a href={`https://www.google.com/maps?q=${item.attraction_name}`} target="_blank">Open in Google Maps</a></div>
+            <div>
+              <a
+                href={`https://www.google.com/maps?q=${item.attraction_name}`}
+                target="_blank"
+              >
+                Open in Google Maps
+              </a>
+            </div>
           </div>
-        )}
+        ))}
       </div>
     </Container>
   );
-};
-
+}

example/demo/views.py

@@ -1,9 +1,9 @@
 import json
 
 from django.contrib import messages
-from django.contrib.auth.models import User
 from django.http import JsonResponse
 from django.shortcuts import get_object_or_404, redirect, render
+from django.utils import timezone
 from django.views import View
 from django.views.generic.base import TemplateView
 
@@ -117,7 +117,9 @@ def get(self, request, *args, **kwargs):
         if not coordinates:
             return JsonResponse({})
 
-        thread = create_thread(name="Tour Guide Chat", user=User.objects.first())
+        thread = create_thread(
+            name=f"{timezone.now().isoformat()} - Tour Guide Chat", user=request.user
+        )
 
         a = TourGuideAIAssistant()
         data = a.run(f"My coordinates are: ({coordinates})", thread.id)

example/package.json

@@ -43,7 +43,6 @@
     "@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",