import useWidgetInstance from '@chatbotkit/react/hooks/useWidgetInstance' import { BriefcaseIcon, ChatBubbleLeftRightIcon, CheckCircleIcon, CheckIcon, ClockIcon, CreditCardIcon, MagnifyingGlassIcon, PaperAirplaneIcon, SparklesIcon, Squares2X2Icon, UsersIcon, } from '@heroicons/react/24/outline' import clsx from 'clsx' /** * The ordered steps of the booking journey. The agent moves the customer * between these by calling the `goToStep` function (and the side effects of the * other booking functions). */ const STEPS = [ { key: 'search', label: 'Search', icon: MagnifyingGlassIcon }, { key: 'flights', label: 'Flights', icon: PaperAirplaneIcon }, { key: 'passengers', label: 'Travellers', icon: UsersIcon }, { key: 'seats', label: 'Seats', icon: Squares2X2Icon }, { key: 'baggage', label: 'Baggage', icon: BriefcaseIcon }, { key: 'extras', label: 'Extras', icon: SparklesIcon }, { key: 'payment', label: 'Payment', icon: CreditCardIcon }, { key: 'confirmation', label: 'Done', icon: CheckCircleIcon }, ] const CABINS = [ { value: 'economy', label: 'Economy', mult: 1 }, { value: 'premium', label: 'Premium Economy', mult: 1.8 }, { value: 'business', label: 'Business', mult: 3.2 }, { value: 'first', label: 'First', mult: 5 }, ] /** * The single, growing booking object that captures everything collected during * the journey. This is the "massive object" that is the final result. */ const INITIAL_BOOKING = { tripType: 'return', from: '', to: '', departDate: '', returnDate: '', passengerCount: 1, cabin: 'economy', flight: null, passengers: [], seats: {}, // passengerId -> seat code baggage: { cabin: 1, checked: 0 }, extras: { meal: null, insurance: false, priorityBoarding: false }, payment: null, // { cardholderName, last4, expiry } fare: null, reference: null, } /** * Build a small, deterministic set of flight options for a route and cabin. */ function generateFlights(from, to, cabin) { const mult = CABINS.find((c) => c.value === cabin)?.mult || 1 const base = [ { code: 'SW', no: '118', dep: '07:25', arr: '10:55', dur: '3h 30m', stops: 0, price: 189, airline: 'Skyway' }, // prettier-ignore { code: 'SW', no: '204', dep: '11:40', arr: '15:05', dur: '3h 25m', stops: 0, price: 169, airline: 'Skyway' }, // prettier-ignore { code: 'AU', no: '882', dep: '14:15', arr: '18:30', dur: '4h 15m', stops: 1, price: 142, airline: 'Aurora Air' }, // prettier-ignore { code: 'SW', no: '376', dep: '18:50', arr: '22:10', dur: '3h 20m', stops: 0, price: 224, airline: 'Skyway' }, // prettier-ignore ] return base.map((f) => ({ id: `${f.code}${f.no}`, airline: f.airline, flightNo: `${f.code}${f.no}`, from, to, departTime: f.dep, arriveTime: f.arr, duration: f.dur, stops: f.stops, cabin, price: Math.round(f.price * mult), })) } /** * Build a deterministic seat map so it does not reshuffle between renders. */ function generateSeatMap() { const letters = ['A', 'B', 'C', 'D', 'E', 'F'] const rows = [] for (let r = 1; r <= 20; r++) { const seats = letters.map((letter) => ({ code: `${r}${letter}`, row: r, letter, legroom: r === 1 || r === 10 || r === 11, occupied: (r * 7 + letter.charCodeAt(0)) % 6 === 0, })) rows.push({ row: r, seats }) } return rows } /** * Compute the fare breakdown from the current booking. Used both for the live * price summary and for the final confirmation. */ function computeFare(booking, seatMap) { const pax = booking.passengerCount || booking.passengers.length || 1 const base = (booking.flight?.price || 0) * pax const taxes = Math.round(base * 0.18) const baggage = (booking.baggage?.checked || 0) * 40 const meal = booking.extras?.meal ? 15 * pax : 0 const insurance = booking.extras?.insurance ? 25 * pax : 0 const priority = booking.extras?.priorityBoarding ? 8 * pax : 0 const allSeats = seatMap.flatMap((row) => row.seats) const seatSurcharge = Object.values(booking.seats || {}).reduce( (sum, code) => { const seat = allSeats.find((s) => s.code === code) return sum + (seat?.legroom ? 18 : 0) }, 0 ) const extras = meal + insurance + priority const total = base + taxes + baggage + extras + seatSurcharge return { pax, base, taxes, baggage, meal, insurance, priority, seatSurcharge, extras, total, } } function cabinLabel(value) { return CABINS.find((c) => c.value === value)?.label || value } function reducer(state, action) { const { booking } = state switch (action.type) { case 'GO_TO': { return { ...state, step: action.step } } case 'SEARCH': { return { ...state, step: 'flights', flightOptions: action.flightOptions, booking: { ...booking, ...action.trip, flight: null }, } } case 'SELECT_FLIGHT': { return { ...state, step: 'passengers', booking: { ...booking, flight: action.flight }, } } case 'SET_PASSENGERS': { return { ...state, step: 'seats', booking: { ...booking, passengers: action.passengers, passengerCount: action.passengers.length || booking.passengerCount, seats: {}, }, } } case 'ASSIGN_SEAT': { return { ...state, booking: { ...booking, seats: { ...booking.seats, [action.passengerId]: action.seat }, }, } } case 'SET_BAGGAGE': { return { ...state, step: 'extras', booking: { ...booking, baggage: { ...booking.baggage, ...action.baggage } }, // prettier-ignore } } case 'SET_EXTRAS': { return { ...state, step: 'payment', booking: { ...booking, extras: { ...booking.extras, ...action.extras } }, } } case 'SET_PAYMENT': { return { ...state, booking: { ...booking, payment: action.payment } } } case 'CONFIRM': { return { ...state, step: 'confirmation', booking: { ...booking, reference: action.reference, fare: action.fare, }, } } case 'RESET': { return { ...state, step: 'search', flightOptions: [], booking: INITIAL_BOOKING } // prettier-ignore } default: { return state } } } /* ----------------------------- shared UI bits ----------------------------- */ // banner-aligned brand palette (sampled from banner.png) // deep #18559a · primary #2470bd · mid #2873c1 · light #6ba1e0 · navy #143f74 const inputClass = 'w-full rounded-lg border border-gray-300 px-3 py-2 text-sm text-gray-900 focus:border-[#2470bd] focus:ring-1 focus:ring-[#2470bd] outline-none' function Field({ label, children }) { return ( {label} {children} ) } function Chip({ children }) { return ( {children} ) } function BrandHeader({ booking }) { const hasTrip = !!booking.from return (

{hasTrip ? ( <> {`${booking.from} → ${booking.to}`} {booking.departDate ? {booking.departDate} : null} {cabinLabel(booking.cabin)} {`${booking.passengerCount} traveller${ booking.passengerCount > 1 ? 's' : '' }`} ) : ( Your journey starts with a message — just say hello to Sky. )}

) } function Stepper({ step }) { const idx = STEPS.findIndex((s) => s.key === step) const containerRef = useRef(null) const activeRef = useRef(null) // keep the current step centred without letting the user scroll the bar useEffect(() => { const container = containerRef.current const active = activeRef.current if (!container || !active) { return } const target = active.offsetLeft - container.clientWidth / 2 + active.offsetWidth / 2 container.scrollTo({ left: Math.max(0, target), behavior: 'smooth' }) }, [idx]) return (

{STEPS.map((s, i) => { const Icon = s.icon const done = i < idx const active = i === idx return (

{done ? ( ) : ( )} {s.label}

{i < STEPS.length - 1 ? (

) : null} ) })}

) } function Card({ className, ...props }) { return (

) } function ScreenHeader({ title, subtitle }) { return (

{title}

{subtitle ? (

{subtitle}

) : null}

) } /** * A guidance callout reminding the customer that the booking is driven entirely * by chatting to Sky - the screens themselves have no inputs. */ function ChatHint({ children }) { return (

{children}

) } function FareRow({ label, value }) { return (

{label} £{value}

) } function OrderSummary({ booking, seatMap }) { const fare = computeFare(booking, seatMap) return (

Price summary

{fare.baggage ? ( ) : null} {fare.seatSurcharge ? ( ) : null} {fare.meal ? : null} {fare.insurance ? ( ) : null} {fare.priority ? ( ) : null}

Total £{fare.total}

) } /* ------------------------------- screens ---------------------------------- */ // Every screen is display-only. The customer never types here - they talk to // Sky, and Sky updates these screens by calling the registered functions. function SearchScreen() { const destinations = [ 'New York', 'Tokyo', 'Paris', 'Dubai', 'Sydney', 'Rome', 'Singapore', 'Reykjavík', 'Cape Town', 'Bali', ] return (

Where to next?

Tell Sky where you dream of going and watch your journey take shape. No forms, no buttons — just a conversation.

{[...destinations, ...destinations].map((d, i) => ( {d} ))}

{`Try saying: "I'd like a return flight from London to New York next Friday for 2 people in business class."`}

) } function FlightsScreen({ booking, flightOptions }) { return (

1 ? 's' : '' }`} />

{flightOptions.map((f) => { const selected = booking.flight?.id === f.id return (

{f.flightNo}

{f.departTime} {f.arriveTime}

{f.duration} {f.stops === 0 ? 'Direct' : `${f.stops} stop${f.stops > 1 ? 's' : ''}`} {f.airline}

£{f.price}

{selected ? ( Selected ) : ( {f.flightNo} )}

) })}

{`Tell Sky which flight you'd like - for example "I'll take SW118" or "the cheapest direct one".`}

) } function PassengersScreen({ booking }) { const count = booking.passengerCount || 1 const slots = booking.passengers.length ? booking.passengers : Array.from({ length: count }, (_, i) => ({ id: `p${i + 1}` })) return (

{slots.map((p, i) => { const filled = !!p.firstName return (

{filled ? `${p.firstName[0]}${p.lastName?.[0] || ''}`.toUpperCase() : i + 1}

{filled ? ( <>

{p.title} {p.firstName} {p.lastName}

{p.dob ? (

Born {p.dob}

) : null} ) : ( Passenger {i + 1} · awaiting details… )}

{filled ? ( ) : null} ) })}

Tell Sky the full name and date of birth for each traveller.

) } function SeatsScreen({ booking, seatMap }) { const next = booking.passengers.find((p) => !booking.seats[p.id]) const ownerByCode = {} booking.passengers.forEach((p) => { if (booking.seats[p.id]) { ownerByCode[booking.seats[p.id]] = p } }) return (

Available Extra legroom (+£18) Taken Yours

{seatMap.map((row) => (

{row.row} {row.seats.map((seat, idx) => { const owner = ownerByCode[seat.code] return ( {idx === 3 ? : null}

{owner ? `${owner.firstName[0]}${owner.lastName?.[0] || ''}`.toUpperCase() : seat.letter}

) })}

))}

{booking.passengers.length ? (

{booking.passengers.map((p) => (

{p.firstName} {p.lastName} {booking.seats[p.id] || '—'}

))}

) : null} {next ? `Tell Sky the seat you'd like, e.g. "12C" or "a window seat near the front".` : `Everyone's seated — tell Sky you're ready to continue.`}

) } function BaggageScreen({ booking }) { const options = [0, 1, 2, 3] return (

{options.map((n) => { const selected = booking.baggage.checked === n return (

{n === 0 ? 'No checked bags' : `${n} checked bag${n > 1 ? 's' : ''}`}

{n === 0 ? 'Cabin bag only' : `£${n * 40}`}

) })}

Tell Sky how many checked bags you need.

) } function ExtraRow({ label, hint, active, value }) { return (

{label}

{hint}

{active ? ( {value || 'Added'} ) : ( Not added )}

) } function ExtrasScreen({ booking }) { const { meal, insurance, priorityBoarding } = booking.extras return (

Ask Sky to add a meal, travel insurance or priority boarding — or to skip them.

) } // Payment is the one exception to the "no inputs" rule - a card number can't // safely be typed into chat, so it is captured in this secure on-screen form. // On submit it notifies the agent, which then confirms the booking. function PaymentScreen({ booking, seatMap, onSubmit }) { const fare = computeFare(booking, seatMap) const paid = !!booking.payment const [card, setCard] = useState({ name: booking.payment?.cardholderName || '', number: '', expiry: booking.payment?.expiry || '', cvc: '', }) const set = (key) => (e) => setCard((c) => ({ ...c, [key]: e.target.value })) const digits = card.number.replace(/\D/g, '') const last4 = booking.payment?.last4 || digits.slice(-4) const complete = card.name.trim() && digits.length >= 12 && card.expiry.trim() && card.cvc.trim().length >= 3 return (

Skyway Pay

{last4 ? `•••• •••• •••• ${last4}` : '•••• •••• •••• ••••'}

Cardholder

{card.name || '—'}

Expires

{card.expiry || '—'}

{paid ? `Thanks! Sky is confirming your booking…` : `Fill in your card and tap Pay — Sky will confirm your booking the moment payment goes through.`}

) } function Detail({ label, value }) { return (

{label}

{value || '—'}

) } function ConfirmationScreen({ booking }) { return (

You're all booked!

A confirmation has been sent. Have a wonderful trip.

Booking reference {booking.reference}

`${p.firstName} ${p.lastName}`) .join(', ')} />

Captured booking object

          {JSON.stringify(booking, null, 2)}

Want to go again? Just tell Sky you'd like to book another trip.

) } /** * The example demonstrates how an AI agent can orchestrate a complete, multi-step * airline booking journey. The screens on the left are display-only and driven by * the chat agent, which records every choice into a single growing booking object * and decides which screen is rendered by calling client-side functions. The one * exception is the payment form, which is completed on screen and then notifies * the agent so it can confirm the booking. */ export default function Page() { const [state, dispatch] = useReducer(reducer, undefined, () => ({ step: 'search', booking: INITIAL_BOOKING, flightOptions: [], seatMap: generateSeatMap(), })) const widget = useWidgetInstance('chatbotkit-widget', { waitForReady: true, }) // payment is captured on screen; record it locally then let the agent know so // it can confirm the booking (the only place the UI talks back to the agent) function handlePaymentSubmit(card) { const last4 = card.number.replace(/\D/g, '').slice(-4) dispatch({ type: 'SET_PAYMENT', payment: { cardholderName: card.name, last4, expiry: card.expiry, }, }) widget?.sendMessage({ message: `I've entered my card in the secure form (card ending ${last4}) and completed payment. Please confirm my booking.`, respond: true, }) } useEffect(() => { if (!widget) { return } const { booking, seatMap } = state // The functions the AI agent uses to drive the booking app. The customer // never touches the screens directly - the agent collects everything in // conversation and reflects it here by calling these functions. widget.functions = { goToStep: { description: 'Show a specific screen of the booking app. Use this to navigate the customer through the journey.', parameters: { type: 'object', properties: { step: { type: 'string', enum: STEPS.map((s) => s.key), description: 'The screen to display', }, }, required: ['step'], }, handler: async ({ step }) => { dispatch({ type: 'GO_TO', step }) return { step } }, }, searchFlights: { description: 'Record the trip details and search for available flights. Shows the flights screen.', parameters: { type: 'object', properties: { from: { type: 'string', description: 'Origin city or airport' }, to: { type: 'string', description: 'Destination city or airport' }, departDate: { type: 'string', description: 'Departure date (YYYY-MM-DD)' }, // prettier-ignore returnDate: { type: 'string', description: 'Return date (YYYY-MM-DD), if a return trip' }, // prettier-ignore tripType: { type: 'string', enum: ['return', 'oneway'] }, passengers: { type: 'number', description: 'Number of passengers' }, cabin: { type: 'string', enum: CABINS.map((c) => c.value), description: 'Cabin class', }, }, required: ['from', 'to'], }, handler: async ({ from, to, departDate = '', returnDate = '', tripType = 'return', passengers = 1, cabin = 'economy', }) => { const flightOptions = generateFlights(from, to, cabin) dispatch({ type: 'SEARCH', trip: { from, to, departDate, returnDate, tripType, passengerCount: passengers, cabin, }, flightOptions, }) return { step: 'flights', options: flightOptions } }, }, selectFlight: { description: 'Select one of the flights returned by searchFlights. Shows the passengers screen.', parameters: { type: 'object', properties: { flightId: { type: 'string', description: 'The id of the flight to select (e.g. SW118)', }, }, required: ['flightId'], }, handler: async ({ flightId }) => { const flight = state.flightOptions.find((f) => f.id === flightId) if (!flight) { return { error: `Flight ${flightId} not found` } } dispatch({ type: 'SELECT_FLIGHT', flight }) return { step: 'passengers', flight } }, }, setPassengers: { description: 'Record the traveller details for every passenger. Shows the seats screen.', parameters: { type: 'object', properties: { passengers: { type: 'array', items: { type: 'object', properties: { title: { type: 'string' }, firstName: { type: 'string' }, lastName: { type: 'string' }, dateOfBirth: { type: 'string', description: 'YYYY-MM-DD' }, }, required: ['firstName', 'lastName'], }, }, }, required: ['passengers'], }, handler: async ({ passengers = [] }) => { const list = passengers.map((p, i) => ({ id: `p${i + 1}`, title: p.title || 'Mr', firstName: p.firstName || '', lastName: p.lastName || '', dob: p.dateOfBirth || p.dob || '', })) dispatch({ type: 'SET_PASSENGERS', passengers: list }) return { step: 'seats', passengers: list } }, }, assignSeat: { description: 'Assign a seat to a passenger. Pass the passenger name (or leave blank for the next unseated passenger).', parameters: { type: 'object', properties: { seat: { type: 'string', description: 'Seat code, e.g. 12C' }, passenger: { type: 'string', description: 'The passenger name or id the seat is for', }, }, required: ['seat'], }, handler: async ({ seat, passenger }) => { const code = String(seat).toUpperCase().replace(/\s/g, '') const seatInfo = seatMap .flatMap((row) => row.seats) .find((s) => s.code === code) if (!seatInfo) { return { error: `Seat ${code} not found` } } if (seatInfo.occupied) { return { error: `Seat ${code} is already taken` } } const match = booking.passengers.find( (p) => passenger && (p.id === passenger || `${p.firstName} ${p.lastName}` .toLowerCase() .includes(String(passenger).toLowerCase()) || p.firstName.toLowerCase() === String(passenger).toLowerCase()) ) || booking.passengers.find((p) => !booking.seats[p.id]) if (!match) { return { error: 'Every passenger already has a seat' } } dispatch({ type: 'ASSIGN_SEAT', passengerId: match.id, seat: code }) const remaining = booking.passengers.filter( (p) => !booking.seats[p.id] && p.id !== match.id ).length return { assigned: { passenger: `${match.firstName} ${match.lastName}`, seat: code, }, allAssigned: remaining === 0, } }, }, setBaggage: { description: 'Record how many checked bags the customer wants. Shows the extras screen.', parameters: { type: 'object', properties: { checkedBags: { type: 'number', description: 'Number of checked bags (£40 each)', }, }, required: ['checkedBags'], }, handler: async ({ checkedBags = 0 }) => { dispatch({ type: 'SET_BAGGAGE', baggage: { checked: checkedBags } }) return { step: 'extras', checkedBags } }, }, setExtras: { description: 'Record optional extras. Shows the payment screen afterwards.', parameters: { type: 'object', properties: { meal: { type: 'string', description: 'Meal choice, or empty for none', }, insurance: { type: 'boolean' }, priorityBoarding: { type: 'boolean' }, }, }, handler: async ({ meal, insurance, priorityBoarding }) => { const extras = { meal: meal && meal.toLowerCase() !== 'none' ? meal : null, insurance: !!insurance, priorityBoarding: !!priorityBoarding, } dispatch({ type: 'SET_EXTRAS', extras }) return { step: 'payment', extras } }, }, confirmBooking: { description: 'Finalise the booking. Computes the fare, generates a booking reference and shows the confirmation screen. Returns the complete booking object.', parameters: { type: 'object', properties: {} }, handler: async () => { const fare = computeFare(booking, seatMap) const reference = 'SW' + Math.random().toString(36).slice(2, 8).toUpperCase() dispatch({ type: 'CONFIRM', reference, fare }) return { reference, fare, booking: { ...booking, reference, fare } } }, }, startOver: { description: 'Clear the current booking and return to the start so the customer can book a brand new trip.', parameters: { type: 'object', properties: {} }, handler: async () => { dispatch({ type: 'RESET' }) return { step: 'search' } }, }, getBooking: { description: 'Get the current booking object and which screen is showing. Use this to recall what has been captured so far.', parameters: { type: 'object', properties: {} }, handler: async () => ({ step: state.step, booking }), }, } }, [widget, state]) const { step, booking, flightOptions, seatMap } = state let screen = null switch (step) { case 'search': screen = break case 'flights': screen = break case 'passengers': screen = break case 'seats': screen = break case 'baggage': screen = break case 'extras': screen = break case 'payment': screen = ( ) break case 'confirmation': screen = break default: screen = null } return (

{screen}

) }