From e333115ecf5044b319150de8537826250eba035e Mon Sep 17 00:00:00 2001
From: Pamella Bezerra <pamella@vinta.com.br>
Date: Tue, 1 Oct 2024 21:10:49 -0300
Subject: [PATCH 1/2] Minor tour guide UI refactor

---
 .../js/components/TourGuide/TourGuide.tsx     | 95 ++++++++++++-------
 1 file changed, 61 insertions(+), 34 deletions(-)

diff --git a/example/assets/js/components/TourGuide/TourGuide.tsx b/example/assets/js/components/TourGuide/TourGuide.tsx
index 1baecc1..a0a7225 100644
--- a/example/assets/js/components/TourGuide/TourGuide.tsx
+++ b/example/assets/js/components/TourGuide/TourGuide.tsx
@@ -1,21 +1,30 @@
-import "@mantine/core/styles.css";
+import { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
 import {
-  Container,
-  TextInput,
   Button,
-  LoadingOverlay,
+  Card,
+  Container,
+  Flex,
   Group,
+  LoadingOverlay,
+  Text,
+  TextInput,
+  Title,
 } from "@mantine/core";
-import { useEffect, useState } from "react";
 import { notifications } from "@mantine/notifications";
-import { Link } from "react-router-dom";
+
+interface Attraction {
+  attraction_name: string;
+  attraction_description: string;
+  attraction_url: string;
+}
 
 export function TourGuide() {
   const [showLoginNotification, setShowLoginNotification] =
     useState<boolean>(false);
   const [latitude, setLatitude] = useState("");
   const [longitude, setLongitude] = useState("");
-  const [attractions, setAttractions] = useState([]);
+  const [attractions, setAttractions] = useState<Attraction[]>([]);
   const [loading, setLoading] = useState(false);
 
   useEffect(() => {
@@ -34,14 +43,16 @@ export function TourGuide() {
     }
 
     setLoading(true);
-    const response = await fetch(`/tour-guide/?coordinate=${latitude},${longitude}`);
+    const response = await fetch(
+      `/tour-guide/?coordinate=${latitude},${longitude}`
+    );
     const data = await response.json();
     if (data.error) {
       setShowLoginNotification(true);
     } else {
       setAttractions(data.nearby_attractions);
     }
-    setLoading(false)
+    setLoading(false);
   }
 
   useEffect(() => {
@@ -67,7 +78,12 @@ export function TourGuide() {
   return (
     <Container>
       <LoadingOverlay visible={loading} />
-      <Group justify="left" align="flex-end">
+
+      <Title mt="md" order={2}>
+        Tour Guide
+      </Title>
+
+      <Group justify="left" align="flex-end" my="lg">
         <TextInput
           required
           label="Latitude"
@@ -82,31 +98,42 @@ export function TourGuide() {
         />
         <Button onClick={findAttractions}>Guide Me!</Button>
       </Group>
-      {loading ? <h3>Loading</h3> : null}
-      <div>
-        {attractions.map((item, i) => (
-          <div key={i}>
-            <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>
+
+      <Flex
+        gap="md"
+        justify="center"
+        align="flex-start"
+        direction="row"
+        wrap="wrap"
+        miw={460}
+      >
+        {attractions.map((attraction, index) => (
+          <Card
+            key={index}
+            w={280}
+            shadow="sm"
+            padding="lg"
+            radius="md"
+            withBorder
+          >
+            <Text fw={500} size="lg" mb="xs">
+              {attraction.attraction_name}
+            </Text>
+            <Text size="sm" c="dimmed" mb="md">
+              {attraction.attraction_description}
+            </Text>
+            <Button
+              component="a"
+              href={`https://www.google.com/maps/search/?api=1&query=${attraction.attraction_name}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              variant="light"
+            >
+              View on Google Maps
+            </Button>
+          </Card>
         ))}
-      </div>
+      </Flex>
     </Container>
   );
 }

From c664dc18759dc52bc7ffc4246e5bdc6f5432d792 Mon Sep 17 00:00:00 2001
From: Pamella Bezerra <pamella@vinta.com.br>
Date: Tue, 1 Oct 2024 22:15:28 -0300
Subject: [PATCH 2/2] Rename attributes

---
 .../js/components/TourGuide/TourGuide.tsx     | 34 +++++++++----------
 example/tour_guide/ai_assistants.py           |  8 ++---
 2 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/example/assets/js/components/TourGuide/TourGuide.tsx b/example/assets/js/components/TourGuide/TourGuide.tsx
index a0a7225..5c2a096 100644
--- a/example/assets/js/components/TourGuide/TourGuide.tsx
+++ b/example/assets/js/components/TourGuide/TourGuide.tsx
@@ -12,11 +12,12 @@ import {
   Title,
 } from "@mantine/core";
 import { notifications } from "@mantine/notifications";
+import { IconLocation, IconMap2 } from "@tabler/icons-react";
 
 interface Attraction {
-  attraction_name: string;
-  attraction_description: string;
-  attraction_url: string;
+  name: string;
+  description: string;
+  url: string;
 }
 
 export function TourGuide() {
@@ -83,7 +84,7 @@ export function TourGuide() {
         Tour Guide
       </Title>
 
-      <Group justify="left" align="flex-end" my="lg">
+      <Group justify="left" align="flex-end" mb="xl">
         <TextInput
           required
           label="Latitude"
@@ -96,17 +97,15 @@ export function TourGuide() {
           value={longitude}
           onChange={(e) => setLongitude(e.target.value)}
         />
-        <Button onClick={findAttractions}>Guide Me!</Button>
+        <Button
+          leftSection={<IconMap2 size={18} stroke={1.5} />}
+          onClick={findAttractions}
+        >
+          Guide Me!
+        </Button>
       </Group>
 
-      <Flex
-        gap="md"
-        justify="center"
-        align="flex-start"
-        direction="row"
-        wrap="wrap"
-        miw={460}
-      >
+      <Flex gap="md" align="flex-start" direction="row" wrap="wrap" miw={460}>
         {attractions.map((attraction, index) => (
           <Card
             key={index}
@@ -116,18 +115,19 @@ export function TourGuide() {
             radius="md"
             withBorder
           >
-            <Text fw={500} size="lg" mb="xs">
-              {attraction.attraction_name}
+            <Text fw={500} size="lg" mt="md" mb="xs">
+              {attraction.name}
             </Text>
             <Text size="sm" c="dimmed" mb="md">
-              {attraction.attraction_description}
+              {attraction.description}
             </Text>
             <Button
               component="a"
-              href={`https://www.google.com/maps/search/?api=1&query=${attraction.attraction_name}`}
+              href={`https://www.google.com/maps/search/?api=1&query=${attraction.name}`}
               target="_blank"
               rel="noopener noreferrer"
               variant="light"
+              leftSection={<IconLocation size={18} stroke={1.5} />}
             >
               View on Google Maps
             </Button>
diff --git a/example/tour_guide/ai_assistants.py b/example/tour_guide/ai_assistants.py
index c91dd85..a1802e8 100644
--- a/example/tour_guide/ai_assistants.py
+++ b/example/tour_guide/ai_assistants.py
@@ -9,11 +9,11 @@
 
 
 class Attraction(BaseModel):
-    attraction_name: str = Field(description="The name of the attraction in english")
-    attraction_description: str = Field(
+    name: str = Field(description="The name of the attraction in english")
+    description: str = Field(
         description="The description of the attraction, provide information in an entertaining way"
     )
-    attraction_url: str = Field(
+    url: str = Field(
         description="The URL of the attraction, keep empty if you don't have this information"
     )
 
@@ -31,7 +31,7 @@ class TourGuideAIAssistant(AIAssistant):
         "Only include in your response the items that are relevant to a tourist visiting the area. "
         "Only call the find_nearby_attractions tool once. "
     )
-    model = "gpt-4o-2024-08-06"
+    model = "gpt-4o-mini"
     structured_output = TourGuide
 
     def get_instructions(self):