diff --git a/example/assets/js/App.tsx b/example/assets/js/App.tsx index 6afe750..b879996 100644 --- a/example/assets/js/App.tsx +++ b/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 = () => { > HTMX demo (no React) - + + + + } + > Tour Guide Assistant @@ -203,7 +210,11 @@ const router = createBrowserRouter([ }, { path: "/tour-guide", - element: (), + element: ( + + + + ), }, { path: "/admin", diff --git a/example/assets/js/components/TourGuide/TourGuide.module.css b/example/assets/js/components/TourGuide/TourGuide.module.css index 7a44745..ea4ef86 100644 --- a/example/assets/js/components/TourGuide/TourGuide.module.css +++ b/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; } } diff --git a/example/assets/js/components/TourGuide/TourGuide.tsx b/example/assets/js/components/TourGuide/TourGuide.tsx index 3c08e96..fcdcfb2 100644 --- a/example/assets/js/components/TourGuide/TourGuide.tsx +++ b/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 ( - Latitude: setLatitude(e.target.value)} /> - Longitude: setLongitude(e.target.value)} /> - Guide Me! + + Latitude: + setLatitude(e.target.value)} + className={classes.coordinateInput} + /> + + + Longitude: + setLongitude(e.target.value)} + className={classes.coordinateInput} + /> + + + Guide Me! + {loading ? Loading : null} - {attractions.map((item, i) => + {attractions.map((item, i) => ( - {item.attraction_url ? {item.attraction_name} : item.attraction_name } + + {item.attraction_url ? ( + + {item.attraction_name} + + ) : ( + item.attraction_name + )} + {item.attraction_description} - Open in Google Maps + + + Open in Google Maps + + - )} + ))} ); -}; - +} diff --git a/example/demo/views.py b/example/demo/views.py index adb5417..467b768 100644 --- a/example/demo/views.py +++ b/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) diff --git a/example/package.json b/example/package.json index 484c709..381fa9e 100644 --- a/example/package.json +++ b/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", diff --git a/example/pnpm-lock.yaml b/example/pnpm-lock.yaml index 57ad579..c5518f5 100644 --- a/example/pnpm-lock.yaml +++ b/example/pnpm-lock.yaml @@ -20,9 +20,6 @@ importers: '@tabler/icons-react': specifier: ^3.7.0 version: 3.7.0(react@18.3.1) - axios: - specifier: ^1.7.5 - version: 1.7.5 cookie: specifier: ^0.6.0 version: 0.6.0