Merge pull request #25 from langchain-ai/brace/fix-tool-calls
fix: Tool calls for trip planner
This commit is contained in:
Brace Sproul
@@ -10,5 +10,5 @@ interface ToolCall {
|
||||
export function findToolCall<Name extends string>(name: Name) {
|
||||
return <Args extends ZodTypeAny>(
|
||||
x: ToolCall,
|
||||
): x is { name: Name; args: z.infer<Args> } => x.name === name;
|
||||
): x is { name: Name; args: z.infer<Args>; id?: string } => x.name === name;
|
||||
}
|
||||
|
||||
@@ -195,8 +195,7 @@ export async function callTools(
|
||||
{
|
||||
name: "buy-stock",
|
||||
content: {
|
||||
toolCallId:
|
||||
message.tool_calls?.find((tc) => tc.name === "buy-stock")?.id ?? "",
|
||||
toolCallId: buyStockToolCall.id ?? "",
|
||||
snapshot,
|
||||
quantity: buyStockToolCall.args.quantity,
|
||||
},
|
||||
|
||||
@@ -1,7 +1,10 @@
|
||||
import { v4 as uuidv4 } from "uuid";
|
||||
import { ChatOpenAI } from "@langchain/openai";
|
||||
import { TripDetails, TripPlannerState, TripPlannerUpdate } from "../types";
|
||||
import { z } from "zod";
|
||||
import { formatMessages } from "agent/utils/format-messages";
|
||||
import { ToolMessage } from "@langchain/langgraph-sdk";
|
||||
import { DO_NOT_RENDER_ID_PREFIX } from "@/lib/ensure-tool-responses";
|
||||
|
||||
function calculateDates(
|
||||
startDate: string | undefined,
|
||||
@@ -60,9 +63,9 @@ export async function extraction(
|
||||
.describe("The end date of the trip. Should be in YYYY-MM-DD format"),
|
||||
numberOfGuests: z
|
||||
.number()
|
||||
.optional()
|
||||
.default(2)
|
||||
.describe("The number of guests for the trip"),
|
||||
.describe(
|
||||
"The number of guests for the trip. Should default to 2 if not specified",
|
||||
),
|
||||
});
|
||||
|
||||
const model = new ChatOpenAI({ model: "gpt-4o", temperature: 0 }).bindTools([
|
||||
@@ -96,15 +99,13 @@ Extract only what is specified by the user. It is okay to leave fields blank if
|
||||
{ role: "human", content: humanMessage },
|
||||
]);
|
||||
|
||||
const extractedDetails = response.tool_calls?.[0]?.args as
|
||||
| z.infer<typeof schema>
|
||||
| undefined;
|
||||
|
||||
if (!extractedDetails) {
|
||||
const toolCall = response.tool_calls?.[0];
|
||||
if (!toolCall) {
|
||||
return {
|
||||
messages: [response],
|
||||
};
|
||||
}
|
||||
const extractedDetails = toolCall.args as z.infer<typeof schema>;
|
||||
|
||||
const { startDate, endDate } = calculateDates(
|
||||
extractedDetails.startDate,
|
||||
@@ -114,13 +115,19 @@ Extract only what is specified by the user. It is okay to leave fields blank if
|
||||
const extractionDetailsWithDefaults: TripDetails = {
|
||||
startDate,
|
||||
endDate,
|
||||
numberOfGuests: extractedDetails.numberOfGuests
|
||||
? extractedDetails.numberOfGuests
|
||||
: 2,
|
||||
numberOfGuests: extractedDetails.numberOfGuests ?? 2,
|
||||
location: extractedDetails.location,
|
||||
};
|
||||
|
||||
const extractToolResponse: ToolMessage = {
|
||||
type: "tool",
|
||||
id: `${DO_NOT_RENDER_ID_PREFIX}${uuidv4()}`,
|
||||
tool_call_id: toolCall.id ?? "",
|
||||
content: "Successfully extracted trip details",
|
||||
};
|
||||
|
||||
return {
|
||||
tripDetails: extractionDetailsWithDefaults,
|
||||
messages: [response, extractToolResponse],
|
||||
};
|
||||
}
|
||||
|
||||
@@ -5,46 +5,27 @@ import type ComponentMap from "../../uis/index";
|
||||
import { z } from "zod";
|
||||
import { LangGraphRunnableConfig } from "@langchain/langgraph";
|
||||
import { getAccommodationsListProps } from "../utils/get-accommodations";
|
||||
import { findToolCall } from "../../find-tool-call";
|
||||
|
||||
const schema = z.object({
|
||||
listAccommodations: z
|
||||
.boolean()
|
||||
.optional()
|
||||
.describe(
|
||||
"Whether or not the user has requested a list of accommodations for their trip.",
|
||||
),
|
||||
bookAccommodation: z
|
||||
.boolean()
|
||||
.optional()
|
||||
.describe(
|
||||
"Whether or not the user has requested to book a reservation for an accommodation. If true, you MUST also set the 'accommodationName' field",
|
||||
),
|
||||
accommodationName: z
|
||||
.string()
|
||||
.optional()
|
||||
.describe(
|
||||
"The name of the accommodation to book a reservation for. Only required if the 'bookAccommodation' field is true.",
|
||||
),
|
||||
const listAccommodationsSchema = z
|
||||
.object({})
|
||||
.describe("A tool to list accommodations for the user");
|
||||
const listRestaurantsSchema = z
|
||||
.object({})
|
||||
.describe("A tool to list restaurants for the user");
|
||||
|
||||
listRestaurants: z
|
||||
.boolean()
|
||||
.optional()
|
||||
.describe(
|
||||
"Whether or not the user has requested a list of restaurants for their trip.",
|
||||
),
|
||||
bookRestaurant: z
|
||||
.boolean()
|
||||
.optional()
|
||||
.describe(
|
||||
"Whether or not the user has requested to book a reservation for a restaurant. If true, you MUST also set the 'restaurantName' field",
|
||||
),
|
||||
restaurantName: z
|
||||
.string()
|
||||
.optional()
|
||||
.describe(
|
||||
"The name of the restaurant to book a reservation for. Only required if the 'bookRestaurant' field is true.",
|
||||
),
|
||||
});
|
||||
const ACCOMMODATIONS_TOOLS = [
|
||||
{
|
||||
name: "list-accommodations",
|
||||
description: "A tool to list accommodations for the user",
|
||||
schema: listAccommodationsSchema,
|
||||
},
|
||||
{
|
||||
name: "list-restaurants",
|
||||
description: "A tool to list restaurants for the user",
|
||||
schema: listRestaurantsSchema,
|
||||
},
|
||||
];
|
||||
|
||||
export async function callTools(
|
||||
state: TripPlannerState,
|
||||
@@ -57,16 +38,7 @@ export async function callTools(
|
||||
const ui = typedUi<typeof ComponentMap>(config);
|
||||
|
||||
const llm = new ChatOpenAI({ model: "gpt-4o", temperature: 0 }).bindTools(
|
||||
[
|
||||
{
|
||||
name: "trip-planner",
|
||||
description: "A series of actions to take for planning a trip",
|
||||
schema,
|
||||
},
|
||||
],
|
||||
{
|
||||
tool_choice: "trip-planner",
|
||||
},
|
||||
ACCOMMODATIONS_TOOLS,
|
||||
);
|
||||
|
||||
const response = await llm.invoke([
|
||||
@@ -78,40 +50,31 @@ export async function callTools(
|
||||
...state.messages,
|
||||
]);
|
||||
|
||||
const tripPlan = response.tool_calls?.[0]?.args as
|
||||
| z.infer<typeof schema>
|
||||
| undefined;
|
||||
const toolCallId = response.tool_calls?.[0]?.id;
|
||||
if (!tripPlan || !toolCallId) {
|
||||
throw new Error("No trip plan found");
|
||||
const listAccommodationsToolCall = response.tool_calls?.find(
|
||||
findToolCall("list-accommodations")<typeof listAccommodationsSchema>,
|
||||
);
|
||||
const listRestaurantsToolCall = response.tool_calls?.find(
|
||||
findToolCall("list-restaurants")<typeof listRestaurantsSchema>,
|
||||
);
|
||||
|
||||
if (!listAccommodationsToolCall && !listRestaurantsToolCall) {
|
||||
throw new Error("No tool calls found");
|
||||
}
|
||||
|
||||
if (tripPlan.listAccommodations) {
|
||||
if (listAccommodationsToolCall) {
|
||||
ui.push(
|
||||
{
|
||||
name: "accommodations-list",
|
||||
content: {
|
||||
toolCallId,
|
||||
toolCallId: listAccommodationsToolCall.id ?? "",
|
||||
...getAccommodationsListProps(state.tripDetails),
|
||||
},
|
||||
},
|
||||
{ message: response },
|
||||
);
|
||||
}
|
||||
if (tripPlan.bookAccommodation && tripPlan.accommodationName) {
|
||||
ui.push(
|
||||
{
|
||||
name: "book-accommodation",
|
||||
content: {
|
||||
tripDetails: state.tripDetails,
|
||||
accommodationName: tripPlan.accommodationName,
|
||||
},
|
||||
},
|
||||
{ message: response },
|
||||
);
|
||||
}
|
||||
|
||||
if (tripPlan.listRestaurants) {
|
||||
if (listRestaurantsToolCall) {
|
||||
ui.push(
|
||||
{
|
||||
name: "restaurants-list",
|
||||
@@ -121,19 +84,6 @@ export async function callTools(
|
||||
);
|
||||
}
|
||||
|
||||
if (tripPlan.bookRestaurant && tripPlan.restaurantName) {
|
||||
ui.push(
|
||||
{
|
||||
name: "book-restaurant",
|
||||
content: {
|
||||
tripDetails: state.tripDetails,
|
||||
restaurantName: tripPlan.restaurantName,
|
||||
},
|
||||
},
|
||||
{ message: response },
|
||||
);
|
||||
}
|
||||
|
||||
return {
|
||||
messages: [response],
|
||||
ui: ui.items,
|
||||
|
||||
@@ -1,9 +1,7 @@
|
||||
import StockPrice from "./stockbroker/stock-price";
|
||||
import PortfolioView from "./stockbroker/portfolio-view";
|
||||
import AccommodationsList from "./trip-planner/accommodations-list";
|
||||
import BookAccommodation from "./trip-planner/book-accommodation";
|
||||
import RestaurantsList from "./trip-planner/restaurants-list";
|
||||
import BookRestaurant from "./trip-planner/book-restaurant";
|
||||
import BuyStock from "./stockbroker/buy-stock";
|
||||
import Plan from "./open-code/plan";
|
||||
import ProposedChange from "./open-code/proposed-change";
|
||||
@@ -12,9 +10,7 @@ const ComponentMap = {
|
||||
"stock-price": StockPrice,
|
||||
portfolio: PortfolioView,
|
||||
"accommodations-list": AccommodationsList,
|
||||
"book-accommodation": BookAccommodation,
|
||||
"restaurants-list": RestaurantsList,
|
||||
"book-restaurant": BookRestaurant,
|
||||
"buy-stock": BuyStock,
|
||||
"code-plan": Plan,
|
||||
"proposed-change": ProposedChange,
|
||||
|
||||
@@ -275,7 +275,7 @@ export default function AccommodationsList({
|
||||
type: "tool",
|
||||
tool_call_id: toolCallId,
|
||||
id: `${DO_NOT_RENDER_ID_PREFIX}${uuidv4()}`,
|
||||
name: "trip-planner",
|
||||
name: "book-accommodation",
|
||||
content: JSON.stringify(orderDetails),
|
||||
},
|
||||
{
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
@import "tailwindcss";
|
||||
@@ -1,403 +0,0 @@
|
||||
import "./index.css";
|
||||
import { TripDetails } from "../../../trip-planner/types";
|
||||
import { useState } from "react";
|
||||
|
||||
export default function BookAccommodation({
|
||||
tripDetails,
|
||||
accommodationName,
|
||||
}: {
|
||||
tripDetails: TripDetails;
|
||||
accommodationName: string;
|
||||
}) {
|
||||
// Placeholder data - ideally would come from props
|
||||
const [accommodation] = useState({
|
||||
name: accommodationName,
|
||||
type: "Hotel",
|
||||
price: "$150/night",
|
||||
rating: 4.8,
|
||||
totalPrice:
|
||||
"$" +
|
||||
150 *
|
||||
Math.ceil(
|
||||
(new Date(tripDetails.endDate).getTime() -
|
||||
new Date(tripDetails.startDate).getTime()) /
|
||||
(1000 * 60 * 60 * 24),
|
||||
),
|
||||
image: "https://placehold.co/300x200?text=Accommodation",
|
||||
roomTypes: ["Standard", "Deluxe", "Suite"],
|
||||
checkInTime: "3:00 PM",
|
||||
checkOutTime: "11:00 AM",
|
||||
});
|
||||
|
||||
const [selectedRoom, setSelectedRoom] = useState("Standard");
|
||||
const [bookingStep, setBookingStep] = useState<
|
||||
"details" | "payment" | "confirmed"
|
||||
>("details");
|
||||
const [formData, setFormData] = useState({
|
||||
name: "",
|
||||
email: "",
|
||||
phone: "",
|
||||
specialRequests: "",
|
||||
});
|
||||
|
||||
const handleInputChange = (
|
||||
e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
|
||||
) => {
|
||||
setFormData({ ...formData, [e.target.name]: e.target.value });
|
||||
};
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setBookingStep("payment");
|
||||
};
|
||||
|
||||
const handlePayment = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setBookingStep("confirmed");
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="w-full max-w-md bg-white rounded-lg shadow-md overflow-hidden">
|
||||
<div className="bg-blue-600 px-4 py-3">
|
||||
<h3 className="text-white font-medium">Book {accommodation.name}</h3>
|
||||
<p className="text-blue-100 text-xs">
|
||||
{new Date(tripDetails.startDate).toLocaleDateString()} -{" "}
|
||||
{new Date(tripDetails.endDate).toLocaleDateString()} ·{" "}
|
||||
{tripDetails.numberOfGuests} guests
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="p-4">
|
||||
{bookingStep === "details" && (
|
||||
<>
|
||||
<div className="flex items-center space-x-3 mb-4">
|
||||
<div className="flex-shrink-0 w-16 h-16 bg-gray-200 rounded-md overflow-hidden">
|
||||
<img
|
||||
src={accommodation.image}
|
||||
alt={accommodation.name}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-medium text-gray-900">
|
||||
{accommodation.name}
|
||||
</h4>
|
||||
<div className="flex items-center mt-1">
|
||||
<svg
|
||||
className="w-4 h-4 text-yellow-400"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
|
||||
</svg>
|
||||
<span className="text-xs text-gray-500 ml-1">
|
||||
{accommodation.rating}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between mt-1">
|
||||
<span className="text-sm text-gray-500">
|
||||
{accommodation.type}
|
||||
</span>
|
||||
<span className="text-sm font-semibold text-blue-600">
|
||||
{accommodation.price}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border-t border-b py-3 mb-4">
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-gray-600">Check-in</span>
|
||||
<span className="font-medium">
|
||||
{new Date(tripDetails.startDate).toLocaleDateString()} (
|
||||
{accommodation.checkInTime})
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between text-sm mt-2">
|
||||
<span className="text-gray-600">Check-out</span>
|
||||
<span className="font-medium">
|
||||
{new Date(tripDetails.endDate).toLocaleDateString()} (
|
||||
{accommodation.checkOutTime})
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between text-sm mt-2">
|
||||
<span className="text-gray-600">Guests</span>
|
||||
<span className="font-medium">
|
||||
{tripDetails.numberOfGuests}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mb-4">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Room Type
|
||||
</label>
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
{accommodation.roomTypes.map((room) => (
|
||||
<button
|
||||
key={room}
|
||||
type="button"
|
||||
onClick={() => setSelectedRoom(room)}
|
||||
className={`text-sm py-2 px-3 rounded-md border transition-colors ${
|
||||
selectedRoom === room
|
||||
? "border-blue-500 bg-blue-50 text-blue-700"
|
||||
: "border-gray-300 text-gray-700 hover:border-gray-400"
|
||||
}`}
|
||||
>
|
||||
{room}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-3">
|
||||
<div>
|
||||
<label
|
||||
htmlFor="name"
|
||||
className="block text-sm font-medium text-gray-700 mb-1"
|
||||
>
|
||||
Full Name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
name="name"
|
||||
value={formData.name}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 text-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label
|
||||
htmlFor="email"
|
||||
className="block text-sm font-medium text-gray-700 mb-1"
|
||||
>
|
||||
Email
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
name="email"
|
||||
value={formData.email}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 text-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label
|
||||
htmlFor="phone"
|
||||
className="block text-sm font-medium text-gray-700 mb-1"
|
||||
>
|
||||
Phone
|
||||
</label>
|
||||
<input
|
||||
type="tel"
|
||||
id="phone"
|
||||
name="phone"
|
||||
value={formData.phone}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 text-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label
|
||||
htmlFor="specialRequests"
|
||||
className="block text-sm font-medium text-gray-700 mb-1"
|
||||
>
|
||||
Special Requests
|
||||
</label>
|
||||
<textarea
|
||||
id="specialRequests"
|
||||
name="specialRequests"
|
||||
value={formData.specialRequests}
|
||||
onChange={handleInputChange}
|
||||
rows={2}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 text-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="border-t pt-3 mt-4">
|
||||
<div className="flex justify-between items-center mb-3">
|
||||
<span className="text-gray-600 text-sm">Total Price:</span>
|
||||
<span className="font-semibold text-lg">
|
||||
{accommodation.totalPrice}
|
||||
</span>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-md transition-colors"
|
||||
>
|
||||
Continue to Payment
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</>
|
||||
)}
|
||||
|
||||
{bookingStep === "payment" && (
|
||||
<form onSubmit={handlePayment} className="space-y-3">
|
||||
<h4 className="font-medium text-lg text-gray-900 mb-3">
|
||||
Payment Details
|
||||
</h4>
|
||||
|
||||
<div>
|
||||
<label
|
||||
htmlFor="cardName"
|
||||
className="block text-sm font-medium text-gray-700 mb-1"
|
||||
>
|
||||
Name on Card
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="cardName"
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 text-sm"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label
|
||||
htmlFor="cardNumber"
|
||||
className="block text-sm font-medium text-gray-700 mb-1"
|
||||
>
|
||||
Card Number
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="cardNumber"
|
||||
placeholder="XXXX XXXX XXXX XXXX"
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 text-sm"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label
|
||||
htmlFor="expiry"
|
||||
className="block text-sm font-medium text-gray-700 mb-1"
|
||||
>
|
||||
Expiry Date
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="expiry"
|
||||
placeholder="MM/YY"
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 text-sm"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
htmlFor="cvc"
|
||||
className="block text-sm font-medium text-gray-700 mb-1"
|
||||
>
|
||||
CVC
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="cvc"
|
||||
placeholder="XXX"
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 text-sm"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border-t pt-3 mt-4">
|
||||
<div className="flex justify-between items-center mb-3">
|
||||
<span className="text-gray-600 text-sm">Total Amount:</span>
|
||||
<span className="font-semibold text-lg">
|
||||
{accommodation.totalPrice}
|
||||
</span>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-md transition-colors"
|
||||
>
|
||||
Complete Booking
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setBookingStep("details")}
|
||||
className="w-full mt-2 bg-white border border-gray-300 text-gray-700 font-medium py-2 px-4 rounded-md hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
Back
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
|
||||
{bookingStep === "confirmed" && (
|
||||
<div className="text-center py-6">
|
||||
<div className="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100 mb-3">
|
||||
<svg
|
||||
className="h-6 w-6 text-green-600"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M5 13l4 4L19 7"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-lg font-medium text-gray-900">
|
||||
Booking Confirmed!
|
||||
</h3>
|
||||
<div className="mt-2">
|
||||
<p className="text-sm text-gray-500">
|
||||
Your booking at {accommodation.name} has been confirmed. You'll
|
||||
receive a confirmation email shortly at {formData.email}.
|
||||
</p>
|
||||
</div>
|
||||
<div className="mt-4 p-3 bg-gray-50 rounded-lg text-left">
|
||||
<h4 className="font-medium text-sm text-gray-700">
|
||||
Booking Summary
|
||||
</h4>
|
||||
<ul className="mt-2 space-y-1 text-xs text-gray-600">
|
||||
<li className="flex justify-between">
|
||||
<span>Check-in:</span>
|
||||
<span className="font-medium">
|
||||
{new Date(tripDetails.startDate).toLocaleDateString()}
|
||||
</span>
|
||||
</li>
|
||||
<li className="flex justify-between">
|
||||
<span>Check-out:</span>
|
||||
<span className="font-medium">
|
||||
{new Date(tripDetails.endDate).toLocaleDateString()}
|
||||
</span>
|
||||
</li>
|
||||
<li className="flex justify-between">
|
||||
<span>Room type:</span>
|
||||
<span className="font-medium">{selectedRoom}</span>
|
||||
</li>
|
||||
<li className="flex justify-between">
|
||||
<span>Guests:</span>
|
||||
<span className="font-medium">
|
||||
{tripDetails.numberOfGuests}
|
||||
</span>
|
||||
</li>
|
||||
<li className="flex justify-between pt-1 mt-1 border-t">
|
||||
<span>Total paid:</span>
|
||||
<span className="font-medium">
|
||||
{accommodation.totalPrice}
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
@import "tailwindcss";
|
||||
@@ -1,350 +0,0 @@
|
||||
import "./index.css";
|
||||
import { TripDetails } from "../../../trip-planner/types";
|
||||
import { useState } from "react";
|
||||
|
||||
export default function BookRestaurant({
|
||||
tripDetails,
|
||||
restaurantName,
|
||||
}: {
|
||||
tripDetails: TripDetails;
|
||||
restaurantName: string;
|
||||
}) {
|
||||
// Placeholder data - ideally would come from props
|
||||
const [restaurant] = useState({
|
||||
name: restaurantName,
|
||||
cuisine: "Contemporary",
|
||||
priceRange: "$$",
|
||||
rating: 4.7,
|
||||
image: "https://placehold.co/300x200?text=Restaurant",
|
||||
openingHours: "5:00 PM - 10:00 PM",
|
||||
address: "123 Main St, " + tripDetails.location,
|
||||
availableTimes: ["6:00 PM", "7:00 PM", "8:00 PM", "9:00 PM"],
|
||||
});
|
||||
|
||||
const [reservationStep, setReservationStep] = useState<
|
||||
"selection" | "details" | "confirmed"
|
||||
>("selection");
|
||||
const [selectedDate, setSelectedDate] = useState<Date>(
|
||||
new Date(tripDetails.startDate),
|
||||
);
|
||||
const [selectedTime, setSelectedTime] = useState<string | null>(null);
|
||||
const [guests, setGuests] = useState(Math.min(tripDetails.numberOfGuests, 8));
|
||||
const [formData, setFormData] = useState({
|
||||
name: "",
|
||||
email: "",
|
||||
phone: "",
|
||||
specialRequests: "",
|
||||
});
|
||||
|
||||
const handleDateChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const date = new Date(e.target.value);
|
||||
setSelectedDate(date);
|
||||
};
|
||||
|
||||
const handleGuestsChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
|
||||
setGuests(Number(e.target.value));
|
||||
};
|
||||
|
||||
const handleInputChange = (
|
||||
e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
|
||||
) => {
|
||||
setFormData({ ...formData, [e.target.name]: e.target.value });
|
||||
};
|
||||
|
||||
const handleTimeSelection = (time: string) => {
|
||||
setSelectedTime(time);
|
||||
};
|
||||
|
||||
const handleContinue = () => {
|
||||
if (selectedTime) {
|
||||
setReservationStep("details");
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setReservationStep("confirmed");
|
||||
};
|
||||
|
||||
const formatDate = (date: Date) => {
|
||||
return date.toISOString().split("T")[0];
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="w-full max-w-md bg-white rounded-lg shadow-md overflow-hidden">
|
||||
<div className="bg-orange-600 px-4 py-3">
|
||||
<h3 className="text-white font-medium">Reserve at {restaurant.name}</h3>
|
||||
<p className="text-orange-100 text-xs">
|
||||
{restaurant.cuisine} • {restaurant.priceRange} • {restaurant.rating}★
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="p-4">
|
||||
{reservationStep === "selection" && (
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center space-x-3 mb-4">
|
||||
<div className="flex-shrink-0 w-16 h-16 bg-gray-200 rounded-md overflow-hidden">
|
||||
<img
|
||||
src={restaurant.image}
|
||||
alt={restaurant.name}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-medium text-gray-900">{restaurant.name}</h4>
|
||||
<p className="text-sm text-gray-500">{restaurant.address}</p>
|
||||
<p className="text-sm text-gray-500">
|
||||
{restaurant.openingHours}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label
|
||||
htmlFor="date"
|
||||
className="block text-sm font-medium text-gray-700 mb-1"
|
||||
>
|
||||
Date
|
||||
</label>
|
||||
<input
|
||||
type="date"
|
||||
id="date"
|
||||
min={formatDate(new Date(tripDetails.startDate))}
|
||||
max={formatDate(new Date(tripDetails.endDate))}
|
||||
value={formatDate(selectedDate)}
|
||||
onChange={handleDateChange}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-orange-500 focus:border-orange-500 text-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label
|
||||
htmlFor="guests"
|
||||
className="block text-sm font-medium text-gray-700 mb-1"
|
||||
>
|
||||
Guests
|
||||
</label>
|
||||
<select
|
||||
id="guests"
|
||||
value={guests}
|
||||
onChange={handleGuestsChange}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-orange-500 focus:border-orange-500 text-sm"
|
||||
>
|
||||
{Array.from({ length: 8 }, (_, i) => i + 1).map((num) => (
|
||||
<option key={num} value={num}>
|
||||
{num} {num === 1 ? "person" : "people"}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Available Times
|
||||
</label>
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
{restaurant.availableTimes.map((time) => (
|
||||
<button
|
||||
key={time}
|
||||
type="button"
|
||||
onClick={() => handleTimeSelection(time)}
|
||||
className={`text-sm py-2 px-3 rounded-md border transition-colors ${
|
||||
selectedTime === time
|
||||
? "border-orange-500 bg-orange-50 text-orange-700"
|
||||
: "border-gray-300 text-gray-700 hover:border-gray-400"
|
||||
}`}
|
||||
>
|
||||
{time}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={handleContinue}
|
||||
disabled={!selectedTime}
|
||||
className={`w-full py-2 rounded-md text-white font-medium ${
|
||||
selectedTime
|
||||
? "bg-orange-600 hover:bg-orange-700"
|
||||
: "bg-gray-400 cursor-not-allowed"
|
||||
}`}
|
||||
>
|
||||
Continue
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{reservationStep === "details" && (
|
||||
<form onSubmit={handleSubmit} className="space-y-3">
|
||||
<div className="border-b pb-3 mb-1">
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-gray-600">Date & Time</span>
|
||||
<span className="font-medium">
|
||||
{selectedDate.toLocaleDateString()} at {selectedTime}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between text-sm mt-1">
|
||||
<span className="text-gray-600">Party Size</span>
|
||||
<span className="font-medium">
|
||||
{guests} {guests === 1 ? "person" : "people"}
|
||||
</span>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setReservationStep("selection")}
|
||||
className="text-orange-600 text-xs hover:underline mt-2"
|
||||
>
|
||||
Change
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label
|
||||
htmlFor="name"
|
||||
className="block text-sm font-medium text-gray-700 mb-1"
|
||||
>
|
||||
Full Name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
name="name"
|
||||
value={formData.name}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-orange-500 focus:border-orange-500 text-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label
|
||||
htmlFor="email"
|
||||
className="block text-sm font-medium text-gray-700 mb-1"
|
||||
>
|
||||
Email
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
name="email"
|
||||
value={formData.email}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-orange-500 focus:border-orange-500 text-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label
|
||||
htmlFor="phone"
|
||||
className="block text-sm font-medium text-gray-700 mb-1"
|
||||
>
|
||||
Phone
|
||||
</label>
|
||||
<input
|
||||
type="tel"
|
||||
id="phone"
|
||||
name="phone"
|
||||
value={formData.phone}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-orange-500 focus:border-orange-500 text-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label
|
||||
htmlFor="specialRequests"
|
||||
className="block text-sm font-medium text-gray-700 mb-1"
|
||||
>
|
||||
Special Requests
|
||||
</label>
|
||||
<textarea
|
||||
id="specialRequests"
|
||||
name="specialRequests"
|
||||
value={formData.specialRequests}
|
||||
onChange={handleInputChange}
|
||||
rows={2}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-orange-500 focus:border-orange-500 text-sm"
|
||||
placeholder="Allergies, special occasions, seating preferences..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="pt-2">
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full bg-orange-600 hover:bg-orange-700 text-white font-medium py-2 px-4 rounded-md transition-colors"
|
||||
>
|
||||
Confirm Reservation
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
|
||||
{reservationStep === "confirmed" && (
|
||||
<div className="text-center py-6">
|
||||
<div className="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100 mb-3">
|
||||
<svg
|
||||
className="h-6 w-6 text-green-600"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M5 13l4 4L19 7"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-lg font-medium text-gray-900">
|
||||
Reservation Confirmed!
|
||||
</h3>
|
||||
<div className="mt-2">
|
||||
<p className="text-sm text-gray-500">
|
||||
Your table at {restaurant.name} has been reserved. You'll
|
||||
receive a confirmation email shortly at {formData.email}.
|
||||
</p>
|
||||
</div>
|
||||
<div className="mt-4 p-3 bg-gray-50 rounded-lg text-left">
|
||||
<h4 className="font-medium text-sm text-gray-700">
|
||||
Reservation Details
|
||||
</h4>
|
||||
<ul className="mt-2 space-y-1 text-xs text-gray-600">
|
||||
<li className="flex justify-between">
|
||||
<span>Restaurant:</span>
|
||||
<span className="font-medium">{restaurant.name}</span>
|
||||
</li>
|
||||
<li className="flex justify-between">
|
||||
<span>Date:</span>
|
||||
<span className="font-medium">
|
||||
{selectedDate.toLocaleDateString()}
|
||||
</span>
|
||||
</li>
|
||||
<li className="flex justify-between">
|
||||
<span>Time:</span>
|
||||
<span className="font-medium">{selectedTime}</span>
|
||||
</li>
|
||||
<li className="flex justify-between">
|
||||
<span>Party Size:</span>
|
||||
<span className="font-medium">
|
||||
{guests} {guests === 1 ? "person" : "people"}
|
||||
</span>
|
||||
</li>
|
||||
<li className="flex justify-between">
|
||||
<span>Reservation Name:</span>
|
||||
<span className="font-medium">{formData.name}</span>
|
||||
</li>
|
||||
</ul>
|
||||
<p className="mt-3 text-xs text-gray-500">
|
||||
Need to cancel or modify? Please call the restaurant directly at
|
||||
(123) 456-7890.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
6411
pnpm-lock.yaml
generated
6411
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user