From 837fe86970f31569fa5d71c466dbbb0d9cd4492a Mon Sep 17 00:00:00 2001 From: bracesproul Date: Wed, 5 Mar 2025 11:39:08 -0800 Subject: [PATCH] feat: Hookup accommodations actions to graph --- agent/agent.tsx | 10 ++- agent/trip-planner/nodes/extraction.tsx | 6 +- agent/trip-planner/nodes/tools.tsx | 7 +- .../trip-planner/utils/get-accommodations.ts | 64 +++++++++++++++++++ agent/types.ts | 9 +++ .../accommodations-list/index.tsx | 62 +++--------------- agent/utils/capitalize.ts | 15 +++++ 7 files changed, 112 insertions(+), 61 deletions(-) create mode 100644 agent/trip-planner/utils/get-accommodations.ts create mode 100644 agent/utils/capitalize.ts diff --git a/agent/agent.tsx b/agent/agent.tsx index 4e8718c..dfacb6f 100644 --- a/agent/agent.tsx +++ b/agent/agent.tsx @@ -77,12 +77,20 @@ function handleRoute( return state.next; } +const GENERAL_INPUT_SYSTEM_PROMPT = `You are an AI assistant. +If the user asks what you can do, describe these tools. +${allToolDescriptions} + +If the last message is a tool result, describe what the action was, congratulate the user, or send a friendly followup in response to the tool action. Ensure this is a clear and concise message. + +Otherwise, just answer as normal.`; + async function handleGeneralInput(state: GenerativeUIState) { const llm = new ChatOpenAI({ model: "gpt-4o-mini", temperature: 0 }); const response = await llm.invoke([ { role: "system", - content: `You are an AI assistant.\nIf the user asks what you can do, describe these tools. Otherwise, just answer as normal.\n\n${allToolDescriptions}`, + content: GENERAL_INPUT_SYSTEM_PROMPT, }, ...state.messages, ]); diff --git a/agent/trip-planner/nodes/extraction.tsx b/agent/trip-planner/nodes/extraction.tsx index 264e992..aee5a95 100644 --- a/agent/trip-planner/nodes/extraction.tsx +++ b/agent/trip-planner/nodes/extraction.tsx @@ -61,6 +61,7 @@ export async function extraction( numberOfGuests: z .number() .optional() + .default(2) .describe("The number of guests for the trip"), }); @@ -113,7 +114,10 @@ Extract only what is specified by the user. It is okay to leave fields blank if const extractionDetailsWithDefaults: TripDetails = { startDate, endDate, - numberOfGuests: extractedDetails.numberOfGuests ?? 2, + numberOfGuests: + extractedDetails.numberOfGuests !== undefined + ? extractedDetails.numberOfGuests + : 2, location: extractedDetails.location, }; diff --git a/agent/trip-planner/nodes/tools.tsx b/agent/trip-planner/nodes/tools.tsx index 9d45486..8746149 100644 --- a/agent/trip-planner/nodes/tools.tsx +++ b/agent/trip-planner/nodes/tools.tsx @@ -4,6 +4,7 @@ import { typedUi } from "@langchain/langgraph-sdk/react-ui/server"; import type ComponentMap from "../../uis/index"; import { z } from "zod"; import { LangGraphRunnableConfig } from "@langchain/langgraph"; +import { getAccommodationsListProps } from "../utils/get-accommodations"; const schema = z.object({ listAccommodations: z @@ -85,11 +86,9 @@ export async function callTools( } if (tripPlan.listAccommodations) { - // TODO: Replace with an accommodations list UI component - ui.write("accommodations-list", { tripDetails: state.tripDetails }); + ui.write("accommodations-list", getAccommodationsListProps(state.tripDetails)); } if (tripPlan.bookAccommodation && tripPlan.accommodationName) { - // TODO: Replace with a book accommodation UI component ui.write("book-accommodation", { tripDetails: state.tripDetails, accommodationName: tripPlan.accommodationName, @@ -97,12 +96,10 @@ export async function callTools( } if (tripPlan.listRestaurants) { - // TODO: Replace with a restaurants list UI component ui.write("restaurants-list", { tripDetails: state.tripDetails }); } if (tripPlan.bookRestaurant && tripPlan.restaurantName) { - // TODO: Replace with a book restaurant UI component ui.write("book-restaurant", { tripDetails: state.tripDetails, restaurantName: tripPlan.restaurantName, diff --git a/agent/trip-planner/utils/get-accommodations.ts b/agent/trip-planner/utils/get-accommodations.ts new file mode 100644 index 0000000..b4cb4bf --- /dev/null +++ b/agent/trip-planner/utils/get-accommodations.ts @@ -0,0 +1,64 @@ +import { faker } from "@faker-js/faker"; +import { Accommodation } from "../../types"; +import { TripDetails } from "../types"; + +export function getAccommodationsListProps(tripDetails: TripDetails) { + const IMAGE_URLS = [ + "https://a0.muscache.com/im/pictures/c88d4356-9e33-4277-83fd-3053e5695333.jpg?im_w=1200&im_format=avif", + "https://a0.muscache.com/im/pictures/miso/Hosting-999231834211657440/original/fa140513-cc51-48a6-83c9-ef4e11e69bc2.jpeg?im_w=1200&im_format=avif", + "https://a0.muscache.com/im/pictures/miso/Hosting-5264493/original/10d2c21f-84c2-46c5-b20b-b51d1c2c971a.jpeg?im_w=1200&im_format=avif", + "https://a0.muscache.com/im/pictures/d0e3bb05-a96a-45cf-af92-980269168096.jpg?im_w=720&im_format=avif", + "https://a0.muscache.com/im/pictures/miso/Hosting-50597302/original/eb1bb383-4b70-45ae-b3ce-596f83436e6f.jpeg?im_w=720&im_format=avif", + "https://a0.muscache.com/im/pictures/miso/Hosting-900891950206269231/original/7cc71402-9430-48b4-b4f1-e8cac69fd7d3.jpeg?im_w=720&im_format=avif", + "https://a0.muscache.com/im/pictures/460efdcd-1286-431d-b4e5-e316d6427707.jpg?im_w=720&im_format=avif", + "https://a0.muscache.com/im/pictures/prohost-api/Hosting-51234810/original/5231025a-4c39-4a96-ac9c-b088fceb5531.jpeg?im_w=720&im_format=avif", + "https://a0.muscache.com/im/pictures/miso/Hosting-14886949/original/a9d72542-cd1f-418d-b070-a73035f94fe4.jpeg?im_w=720&im_format=avif", + "https://a0.muscache.com/im/pictures/2011683a-c045-4b5a-97a8-37bca4b98079.jpg?im_w=720&im_format=avif", + "https://a0.muscache.com/im/pictures/11bcbeec-749c-4897-8593-1ec6f6dc04ad.jpg?im_w=720&im_format=avif", + "https://a0.muscache.com/im/pictures/prohost-api/Hosting-18327626/original/fba2e4e8-9d68-47a8-838e-dab5353e5209.jpeg?im_w=720&im_format=avif", + "https://a0.muscache.com/im/pictures/miso/Hosting-813949239894880001/original/b2abe806-b60f-4c0b-b4e6-46808024e5b6.jpeg?im_w=720&im_format=avif", + "https://a0.muscache.com/im/pictures/prohost-api/Hosting-894877242638354447/original/29e50d48-1733-4c5b-9068-da4443dd7757.jpeg?im_w=720&im_format=avif",, + "https://a0.muscache.com/im/pictures/hosting/Hosting-1079897686805296552/original/b24bd803-52f2-4ca7-9389-f73c9d9b3c64.jpeg?im_w=720&im_format=avif", + "https://a0.muscache.com/im/pictures/miso/Hosting-43730011/original/29f90186-4f83-408a-89ce-a82e520b4e36.png?im_w=720&im_format=avif", + "https://a0.muscache.com/im/pictures/300ae0e1-fc7e-4a05-93a4-26809311ef19.jpg?im_w=720&im_format=avif", + "https://a0.muscache.com/im/pictures/0c7b03c9-8907-437f-8874-628e89e00679.jpg?im_w=720&im_format=avif", + "https://a0.muscache.com/im/pictures/prohost-api/Hosting-1040593515802997386/original/0c910b31-03d3-450f-8dc3-2d7f7902b93e.jpeg?im_w=720&im_format=avif", + "https://a0.muscache.com/im/pictures/d336587a-a4bf-44c9-b4a6-68b71c359be0.jpg?im_w=720&im_format=avif", + "https://a0.muscache.com/im/pictures/prohost-api/Hosting-50345540/original/f8e911bb-8021-4edd-aca4-913d6f41fc6f.jpeg?im_w=720&im_format=avif", + "https://a0.muscache.com/im/pictures/prohost-api/Hosting-46122096/original/1bd27f94-cf00-4864-8ad9-bc1cd6c5e10d.jpeg?im_w=720&im_format=avif", + "https://a0.muscache.com/im/pictures/574424e1-4935-45f5-a5f0-e960b16a3fcc.jpg?im_w=720&im_format=avif", + "https://a0.muscache.com/im/pictures/181d4be2-6cb2-4306-94bf-89aa45c5de66.jpg?im_w=720&im_format=avif", + "https://a0.muscache.com/im/pictures/miso/Hosting-50545526/original/af14ce0b-481e-41be-88d1-b84758f578e5.jpeg?im_w=720&im_format=avif", + "https://a0.muscache.com/im/pictures/10d8309a-8ae6-492b-b1d5-20a543242c68.jpg?im_w=720&im_format=avif", + "https://a0.muscache.com/im/pictures/miso/Hosting-813727499556203528/original/12c1b750-4bea-40d9-9a10-66804df0530a.jpeg?im_w=720&im_format=avif", + "https://a0.muscache.com/im/pictures/83e4c0a0-65ce-4c5d-967e-d378ed1bfe15.jpg?im_w=720&im_format=avif", + "https://a0.muscache.com/im/pictures/852f2d4d-6786-47b5-a3ca-ff7f21bcac2d.jpg?im_w=720&im_format=avif", + "https://a0.muscache.com/im/pictures/92534e36-d67a-4346-b3cf-7371b1985aca.jpg?im_w=720&im_format=avif", + "https://a0.muscache.com/im/pictures/ecbfed18-29d0-4f86-b6aa-4325b076dfb3.jpg?im_w=720&im_format=avif", + "https://a0.muscache.com/im/pictures/prohost-api/Hosting-52443635/original/05f084c6-60d0-4945-81ff-d23dfb89c3ca.jpeg?im_w=720&im_format=avif", + ]; + + const getAccommodations = (city: string): Accommodation[] => { + // Shuffle the image URLs array and take the first 6 + const shuffledImages = [...IMAGE_URLS] + .sort(() => Math.random() - 0.5) + .slice(0, 6) + .filter((i): i is string => typeof i === "string") + + return Array.from({ length: 6 }, (_, index) => ({ + id: faker.string.uuid(), + name: faker.location.streetAddress(), + price: faker.number.int({ min: 100, max: 1000 }), + rating: Number( + faker.number.float({ min: 4.0, max: 5.0, fractionDigits: 2 }).toFixed(2), + ), + city: city, + image: shuffledImages[index], + })); + }; + + return { + tripDetails, + accommodations: getAccommodations(tripDetails.location), + } +} \ No newline at end of file diff --git a/agent/types.ts b/agent/types.ts index a5355bb..1962a6b 100644 --- a/agent/types.ts +++ b/agent/types.ts @@ -9,3 +9,12 @@ export const GenerativeUIAnnotation = Annotation.Root({ }); export type GenerativeUIState = typeof GenerativeUIAnnotation.State; + +export type Accommodation = { + id: string; + name: string; + price: number; + rating: number; + city: string; + image: string; +}; diff --git a/agent/uis/trip-planner/accommodations-list/index.tsx b/agent/uis/trip-planner/accommodations-list/index.tsx index 99495b6..12da6de 100644 --- a/agent/uis/trip-planner/accommodations-list/index.tsx +++ b/agent/uis/trip-planner/accommodations-list/index.tsx @@ -1,5 +1,5 @@ import "./index.css"; -import React, { useEffect } from "react"; +import React from "react"; import { X } from "lucide-react"; import { Button } from "@/components/ui/button"; import { TripDetails } from "../../../trip-planner/types"; @@ -10,50 +10,9 @@ import { CarouselNext, CarouselPrevious, } from "@/components/ui/carousel"; -import { faker } from "@faker-js/faker"; import { format } from "date-fns"; - -const IMAGE_URLS = [ - "https://a0.muscache.com/im/pictures/c88d4356-9e33-4277-83fd-3053e5695333.jpg?im_w=1200&im_format=avif", - "https://a0.muscache.com/im/pictures/miso/Hosting-999231834211657440/original/fa140513-cc51-48a6-83c9-ef4e11e69bc2.jpeg?im_w=1200&im_format=avif", - "https://a0.muscache.com/im/pictures/miso/Hosting-5264493/original/10d2c21f-84c2-46c5-b20b-b51d1c2c971a.jpeg?im_w=1200&im_format=avif", - "https://a0.muscache.com/im/pictures/d0e3bb05-a96a-45cf-af92-980269168096.jpg?im_w=720&im_format=avif", - "https://a0.muscache.com/im/pictures/miso/Hosting-50597302/original/eb1bb383-4b70-45ae-b3ce-596f83436e6f.jpeg?im_w=720&im_format=avif", - "https://a0.muscache.com/im/pictures/miso/Hosting-900891950206269231/original/7cc71402-9430-48b4-b4f1-e8cac69fd7d3.jpeg?im_w=720&im_format=avif", - "https://a0.muscache.com/im/pictures/460efdcd-1286-431d-b4e5-e316d6427707.jpg?im_w=720&im_format=avif", - "https://a0.muscache.com/im/pictures/prohost-api/Hosting-51234810/original/5231025a-4c39-4a96-ac9c-b088fceb5531.jpeg?im_w=720&im_format=avif", - "https://a0.muscache.com/im/pictures/miso/Hosting-14886949/original/a9d72542-cd1f-418d-b070-a73035f94fe4.jpeg?im_w=720&im_format=avif", - "https://a0.muscache.com/im/pictures/2011683a-c045-4b5a-97a8-37bca4b98079.jpg?im_w=720&im_format=avif", - "https://a0.muscache.com/im/pictures/11bcbeec-749c-4897-8593-1ec6f6dc04ad.jpg?im_w=720&im_format=avif", - "https://a0.muscache.com/im/pictures/prohost-api/Hosting-18327626/original/fba2e4e8-9d68-47a8-838e-dab5353e5209.jpeg?im_w=720&im_format=avif", -]; - -export type Accommodation = { - id: string; - name: string; - price: number; - rating: number; - city: string; - image: string; -}; - -function getAccommodations(city: string): Accommodation[] { - // Shuffle the image URLs array and take the first 6 - const shuffledImages = [...IMAGE_URLS] - .sort(() => Math.random() - 0.5) - .slice(0, 6); - - return Array.from({ length: 6 }, (_, index) => ({ - id: faker.string.uuid(), - name: faker.location.streetAddress(), - price: faker.number.int({ min: 100, max: 1000 }), - rating: Number( - faker.number.float({ min: 4.0, max: 5.0, fractionDigits: 2 }).toFixed(2), - ), - city: city, - image: shuffledImages[index], - })); -} +import { Accommodation } from "agent/types"; +import { capitalizeSentence } from "../../../utils/capitalize"; const StarSVG = ({ fill = "white" }: { fill?: string }) => ( ยท

{accommodation.price}

-

{accommodation.city}

+

{capitalizeSentence(accommodation.city)}

); @@ -144,7 +103,7 @@ function SelectedAccommodation({ {accommodation.rating} -

{accommodation.city}

+

{capitalizeSentence(accommodation.city)}

@@ -179,16 +138,11 @@ function SelectedAccommodation({ export default function AccommodationsList({ tripDetails, + accommodations, }: { tripDetails: TripDetails; + accommodations: Accommodation[]; }) { - const [places, setPlaces] = React.useState([]); - - useEffect(() => { - const accommodations = getAccommodations(tripDetails.location); - setPlaces(accommodations); - }, []); - const [selectedAccommodation, setSelectedAccommodation] = React.useState< Accommodation | undefined >(); @@ -213,7 +167,7 @@ export default function AccommodationsList({ className="w-full sm:max-w-sm md:max-w-2xl lg:max-w-3xl" > - {places.map((accommodation) => ( + {accommodations.map((accommodation) => ( { + return word.charAt(0).toUpperCase() + word.slice(1); + }).join(' '); +} + +/** + * Capitalizes the first letter of a string. + */ +export function capitalize(string: string): string { + return string.charAt(0).toUpperCase() + string.slice(1); +}