1502 lines
83 KiB
TypeScript
1502 lines
83 KiB
TypeScript
/**
|
|
* <folk-trips-planner> — collaborative trip planning dashboard.
|
|
*
|
|
* Views: trip list → trip detail (tabs: overview, destinations,
|
|
* itinerary, bookings, expenses, packing).
|
|
* Demo: 4 trips with varied statuses and rich destination chains.
|
|
*/
|
|
|
|
import { tripSchema, type TripDoc } from "../schemas";
|
|
import type { DocumentId } from "../../../shared/local-first/document";
|
|
import { TourEngine } from "../../../shared/tour-engine";
|
|
import { ViewHistory } from "../../../shared/view-history.js";
|
|
import { startPresenceHeartbeat } from '../../../shared/collab-presence';
|
|
|
|
class FolkTripsPlanner extends HTMLElement {
|
|
private shadow: ShadowRoot;
|
|
private space = "";
|
|
private view: "list" | "detail" | "ai-planner" = "list";
|
|
private trips: any[] = [];
|
|
private trip: any = null;
|
|
private tab: "overview" | "destinations" | "itinerary" | "bookings" | "expenses" | "packing" = "overview";
|
|
private error = "";
|
|
private _offlineUnsubs: (() => void)[] = [];
|
|
private _stopPresence: (() => void) | null = null;
|
|
private _history = new ViewHistory<"list" | "detail" | "ai-planner">("list");
|
|
private _aiMessages: { role: string; content: string; toolCalls?: any[] }[] = [];
|
|
private _aiGeneratedItems: { type: string; props: Record<string, any>; accepted: boolean; id: string }[] = [];
|
|
private _aiLoading = false;
|
|
private _aiModel = 'gemini-flash';
|
|
private _aiTripContext: any = null;
|
|
private _mapInstance: any = null;
|
|
private _mapMarkers: any[] = [];
|
|
private _mapPins: { lat: number; lng: number; label: string; color?: string }[] = [];
|
|
private _mapRoutes: any[] = [];
|
|
private _aiToolResults: { type: string; data: any; id: string }[] = [];
|
|
private _tour!: TourEngine;
|
|
private static readonly TOUR_STEPS = [
|
|
{ target: '#create-trip', title: "Plan a Trip", message: "Start planning a new trip — add destinations, itinerary, and budget.", advanceOnClick: false },
|
|
{ target: '.trip-card', title: "Trip Cards", message: "View trip details, status, budget progress, and collaborators.", advanceOnClick: true },
|
|
{ target: '.tab', title: "Detail Tabs", message: "Explore destinations, itinerary, bookings, expenses, and packing lists.", advanceOnClick: false },
|
|
];
|
|
|
|
constructor() {
|
|
super();
|
|
this.shadow = this.attachShadow({ mode: "open" });
|
|
this._tour = new TourEngine(
|
|
this.shadow,
|
|
FolkTripsPlanner.TOUR_STEPS,
|
|
"rtrips_tour_done",
|
|
() => this.shadow.host as HTMLElement,
|
|
);
|
|
}
|
|
|
|
connectedCallback() {
|
|
this.space = this.getAttribute("space") || "demo";
|
|
if (this.space === "demo") { this.loadDemoData(); }
|
|
else {
|
|
this.subscribeOffline();
|
|
this.loadTrips();
|
|
this.render();
|
|
}
|
|
if (!localStorage.getItem("rtrips_tour_done")) {
|
|
setTimeout(() => this._tour.start(), 1200);
|
|
}
|
|
this._stopPresence = startPresenceHeartbeat(() => ({ module: 'rtrips', context: this.trip?.name || 'Trips' }));
|
|
}
|
|
|
|
disconnectedCallback() {
|
|
for (const unsub of this._offlineUnsubs) unsub();
|
|
this._offlineUnsubs = [];
|
|
this._stopPresence?.();
|
|
this.destroyMap();
|
|
}
|
|
|
|
private async subscribeOffline() {
|
|
const runtime = (window as any).__rspaceOfflineRuntime;
|
|
if (!runtime?.isInitialized) return;
|
|
|
|
try {
|
|
const docs = await runtime.subscribeModule('trips', 'trips', tripSchema);
|
|
if (docs.size > 0 && this.trips.length === 0) {
|
|
const fromDocs: any[] = [];
|
|
for (const [docId, doc] of docs) {
|
|
const d = doc as TripDoc;
|
|
if (!d?.trip) continue;
|
|
fromDocs.push({
|
|
id: d.trip.id, title: d.trip.title, status: d.trip.status,
|
|
start_date: d.trip.startDate, end_date: d.trip.endDate,
|
|
budget_total: d.trip.budgetTotal, description: d.trip.description,
|
|
destination_count: Object.keys(d.destinations || {}).length,
|
|
});
|
|
this._offlineUnsubs.push(runtime.onChange(docId, () => {}));
|
|
}
|
|
if (fromDocs.length > 0) {
|
|
this.trips = fromDocs;
|
|
this.render();
|
|
}
|
|
}
|
|
} catch { /* runtime unavailable */ }
|
|
}
|
|
|
|
private loadDemoData() {
|
|
this.trips = [
|
|
{
|
|
id: "alpine-2026", title: "Alpine Explorer 2026", status: "PLANNING",
|
|
start_date: "2026-07-06", end_date: "2026-07-20", budget_total: "4500", total_spent: "1203",
|
|
destination_count: 3, destinations_chain: "Chamonix \u2192 Zermatt \u2192 Dolomites",
|
|
description: "15-day adventure through the Alps \u2014 3 countries, 6 explorers, endless peaks.",
|
|
collaborator_count: 6
|
|
},
|
|
{
|
|
id: "berlin-dweb-2026", title: "DWeb Camp Berlin", status: "BOOKED",
|
|
start_date: "2026-05-15", end_date: "2026-05-18", budget_total: "800", total_spent: "650",
|
|
destination_count: 1, destinations_chain: "Berlin",
|
|
description: "Decentralized Web camp at c-base \u2014 workshops, hackathons, and local-first demos.",
|
|
collaborator_count: 12
|
|
},
|
|
{
|
|
id: "portugal-retreat-2026", title: "Portugal Team Retreat", status: "IN_PROGRESS",
|
|
start_date: "2026-02-20", end_date: "2026-02-28", budget_total: "3200", total_spent: "2870",
|
|
destination_count: 2, destinations_chain: "Lisbon \u2192 Sintra",
|
|
description: "Team offsite \u2014 strategy workshops, co-working from surf hostels, and exploring Sintra's castles.",
|
|
collaborator_count: 8
|
|
},
|
|
{
|
|
id: "japan-2025", title: "Japan Autumn 2025", status: "COMPLETED",
|
|
start_date: "2025-10-10", end_date: "2025-10-24", budget_total: "5200", total_spent: "4980",
|
|
destination_count: 4, destinations_chain: "Tokyo \u2192 Kyoto \u2192 Osaka \u2192 Hiroshima",
|
|
description: "14-day autumn foliage tour \u2014 temples, street food, and bullet trains.",
|
|
collaborator_count: 4
|
|
},
|
|
];
|
|
this.render();
|
|
}
|
|
|
|
private getDemoTripDetail(id: string): any {
|
|
const trips: Record<string, any> = {
|
|
"alpine-2026": {
|
|
id: "alpine-2026", title: "Alpine Explorer 2026", status: "PLANNING",
|
|
start_date: "2026-07-06", end_date: "2026-07-20", budget_total: "4500",
|
|
description: "15-day adventure through the Alps \u2014 Chamonix (France) \u2192 Zermatt (Switzerland) \u2192 Dolomites (Italy). 6 explorers, 3 countries, endless peaks.",
|
|
destinations: [
|
|
{ id: "d1", name: "Chamonix", country: "France", arrival_date: "2026-07-06", lat: 45.9237, lng: 6.8694 },
|
|
{ id: "d2", name: "Zermatt", country: "Switzerland", arrival_date: "2026-07-12", lat: 46.0207, lng: 7.7491 },
|
|
{ id: "d3", name: "Dolomites", country: "Italy", arrival_date: "2026-07-17", lat: 46.4102, lng: 11.8440 },
|
|
],
|
|
itinerary: [
|
|
{ id: "i1", title: "Fly Geneva \u2192 Chamonix shuttle", category: "TRANSPORT", date: "2026-07-06", start_time: "10:00" },
|
|
{ id: "i2", title: "Acclimatization hike \u2014 Lac Blanc", category: "ACTIVITY", date: "2026-07-07", start_time: "07:00" },
|
|
{ id: "i3", title: "Via Ferrata \u2014 Aiguille du Midi", category: "ACTIVITY", date: "2026-07-08", start_time: "08:00" },
|
|
{ id: "i4", title: "Rest day / Chamonix town", category: "FREE_TIME", date: "2026-07-09", start_time: "10:00" },
|
|
{ id: "i5", title: "Group dinner \u2014 La Cabane", category: "MEAL", date: "2026-07-09", start_time: "19:00" },
|
|
{ id: "i6", title: "Mont Blanc viewpoint hike", category: "ACTIVITY", date: "2026-07-10", start_time: "06:30" },
|
|
{ id: "i7", title: "Farewell lunch in Chamonix", category: "MEAL", date: "2026-07-11", start_time: "12:00" },
|
|
{ id: "i8", title: "Train to Zermatt via Glacier Express", category: "TRANSPORT", date: "2026-07-12", start_time: "08:00" },
|
|
{ id: "i9", title: "Gornergrat sunrise hike", category: "ACTIVITY", date: "2026-07-13", start_time: "05:30" },
|
|
{ id: "i10", title: "Matterhorn base camp trek", category: "ACTIVITY", date: "2026-07-14", start_time: "07:00" },
|
|
{ id: "i11", title: "Paragliding over Zermatt", category: "ACTIVITY", date: "2026-07-15", start_time: "10:00" },
|
|
{ id: "i12", title: "Fondue dinner \u2014 Chez Vrony", category: "MEAL", date: "2026-07-15", start_time: "19:30" },
|
|
{ id: "i13", title: "Transfer to Dolomites", category: "TRANSPORT", date: "2026-07-16", start_time: "09:00" },
|
|
{ id: "i14", title: "Tre Cime di Lavaredo loop", category: "ACTIVITY", date: "2026-07-17", start_time: "07:00" },
|
|
{ id: "i15", title: "Lago di Braies kayaking", category: "ACTIVITY", date: "2026-07-18", start_time: "09:00" },
|
|
{ id: "i16", title: "Cooking class in Bolzano", category: "ACTIVITY", date: "2026-07-19", start_time: "11:00" },
|
|
{ id: "i17", title: "Free day \u2014 shopping & packing", category: "FREE_TIME", date: "2026-07-19", start_time: "14:00" },
|
|
{ id: "i18", title: "Fly home from Innsbruck", category: "TRANSPORT", date: "2026-07-20", start_time: "12:00" },
|
|
],
|
|
bookings: [
|
|
{ id: "bk1", type: "FLIGHT", provider: "easyJet \u2014 Geneva", confirmation_number: "EZY-20260706-ALP", cost: "890" },
|
|
{ id: "bk2", type: "TRANSPORT", provider: "Glacier Express", confirmation_number: "GEX-445920", cost: "240" },
|
|
{ id: "bk3", type: "ACCOMMODATION", provider: "Refuge du Lac Blanc", confirmation_number: "LB2026-234", cost: "320" },
|
|
{ id: "bk4", type: "ACCOMMODATION", provider: "Hotel Matterhorn Focus, Zermatt", confirmation_number: "MF-88201", cost: "780" },
|
|
{ id: "bk5", type: "ACCOMMODATION", provider: "Rifugio Locatelli, Dolomites", confirmation_number: "TRE2026-089", cost: "280" },
|
|
{ id: "bk6", type: "ACTIVITY", provider: "Paragliding Zermatt (tandem x6)", confirmation_number: "PGZ-1120", cost: "1080" },
|
|
],
|
|
expenses: [
|
|
{ id: "e1", category: "TRANSPORT", description: "Geneva \u2192 Chamonix shuttle (6 pax)", amount: "186", date: "2026-07-06" },
|
|
{ id: "e2", category: "ACCOMMODATION", description: "Mountain hut reservations (3 nights)", amount: "420", date: "2026-07-07" },
|
|
{ id: "e3", category: "ACTIVITY", description: "Via Ferrata gear rental (6 sets)", amount: "216", date: "2026-07-08" },
|
|
{ id: "e4", category: "FOOD", description: "Groceries \u2014 Chamonix Carrefour", amount: "93", date: "2026-07-06" },
|
|
{ id: "e5", category: "ACTIVITY", description: "Paragliding deposit (4 of 6 booked)", amount: "288", date: "2026-07-13" },
|
|
],
|
|
packing: [
|
|
{ id: "pk1", name: "Hiking boots (broken in)", category: "FOOTWEAR", quantity: 1, packed: true },
|
|
{ id: "pk2", name: "Rain jacket", category: "CLOTHING", quantity: 1, packed: true },
|
|
{ id: "pk3", name: "Trekking poles", category: "GEAR", quantity: 1, packed: false },
|
|
{ id: "pk4", name: "Headlamp + batteries", category: "GEAR", quantity: 1, packed: true },
|
|
{ id: "pk5", name: "Sunscreen SPF 50", category: "PERSONAL", quantity: 1, packed: false },
|
|
{ id: "pk6", name: "Water filter", category: "GEAR", quantity: 1, packed: false },
|
|
{ id: "pk7", name: "First aid kit", category: "SAFETY", quantity: 1, packed: true },
|
|
{ id: "pk8", name: "Passport + travel insurance", category: "DOCUMENTS", quantity: 1, packed: true },
|
|
],
|
|
collaborators: [
|
|
{ name: "Alex", role: "organizer", avatar: "\u{1F9D1}\u200D\u{1F4BB}" },
|
|
{ name: "Sam", role: "photographer", avatar: "\u{1F4F8}" },
|
|
{ name: "Jordan", role: "logistics", avatar: "\u{1F5FA}\uFE0F" },
|
|
{ name: "Riley", role: "navigator", avatar: "\u{1F9ED}" },
|
|
{ name: "Casey", role: "gear lead", avatar: "\u{1F3D4}\uFE0F" },
|
|
{ name: "Morgan", role: "safety", avatar: "\u26D1\uFE0F" },
|
|
],
|
|
},
|
|
"berlin-dweb-2026": {
|
|
id: "berlin-dweb-2026", title: "DWeb Camp Berlin", status: "BOOKED",
|
|
start_date: "2026-05-15", end_date: "2026-05-18", budget_total: "800",
|
|
description: "Decentralized Web camp at c-base hackerspace \u2014 3 days of workshops, hackathons, local-first demos, and rStack presentations.",
|
|
destinations: [
|
|
{ id: "d1", name: "Berlin", country: "Germany", arrival_date: "2026-05-15", lat: 52.5130, lng: 13.4200 },
|
|
],
|
|
itinerary: [
|
|
{ id: "i1", title: "Arrive & check in at c-base", category: "TRANSPORT", date: "2026-05-15", start_time: "14:00" },
|
|
{ id: "i2", title: "Welcome session & icebreaker", category: "ACTIVITY", date: "2026-05-15", start_time: "16:00" },
|
|
{ id: "i3", title: "Workshop: CRDT Fundamentals", category: "ACTIVITY", date: "2026-05-16", start_time: "09:00" },
|
|
{ id: "i4", title: "Workshop: Automerge in Practice", category: "ACTIVITY", date: "2026-05-16", start_time: "14:00" },
|
|
{ id: "i5", title: "Group dinner at Markthalle Neun", category: "MEAL", date: "2026-05-16", start_time: "19:30" },
|
|
{ id: "i6", title: "Hackathon Day", category: "ACTIVITY", date: "2026-05-17", start_time: "09:00" },
|
|
{ id: "i7", title: "Demo presentations", category: "ACTIVITY", date: "2026-05-17", start_time: "16:00" },
|
|
{ id: "i8", title: "Wrap-up & departure", category: "FREE_TIME", date: "2026-05-18", start_time: "10:00" },
|
|
],
|
|
bookings: [
|
|
{ id: "bk1", type: "ACCOMMODATION", provider: "Hostel One80\u00B0, Berlin", confirmation_number: "H180-5520", cost: "240" },
|
|
{ id: "bk2", type: "ACTIVITY", provider: "c-base space rental", confirmation_number: "CB-DWEB-2026", cost: "350" },
|
|
],
|
|
expenses: [
|
|
{ id: "e1", category: "FOOD", description: "Group catering (3 days)", amount: "180", date: "2026-05-15" },
|
|
{ id: "e2", category: "ACTIVITY", description: "Workshop materials & supplies", amount: "120", date: "2026-05-14" },
|
|
{ id: "e3", category: "TRANSPORT", description: "BVG group day passes x3", amount: "48", date: "2026-05-15" },
|
|
{ id: "e4", category: "FOOD", description: "Markthalle Neun dinner (12 pax)", amount: "302", date: "2026-05-16" },
|
|
],
|
|
packing: [
|
|
{ id: "pk1", name: "Laptop + charger", category: "ELECTRONICS", quantity: 1, packed: true },
|
|
{ id: "pk2", name: "USB-C hub", category: "ELECTRONICS", quantity: 1, packed: true },
|
|
{ id: "pk3", name: "Notebook & pen", category: "SUPPLIES", quantity: 1, packed: true },
|
|
{ id: "pk4", name: "Water bottle", category: "PERSONAL", quantity: 1, packed: false },
|
|
],
|
|
collaborators: [
|
|
{ name: "Alex", role: "organizer", avatar: "\u{1F9D1}\u200D\u{1F4BB}" },
|
|
{ name: "Mia", role: "facilitator", avatar: "\u{1F3A4}" },
|
|
{ name: "Leo", role: "AV setup", avatar: "\u{1F3AC}" },
|
|
],
|
|
},
|
|
"portugal-retreat-2026": {
|
|
id: "portugal-retreat-2026", title: "Portugal Team Retreat", status: "IN_PROGRESS",
|
|
start_date: "2026-02-20", end_date: "2026-02-28", budget_total: "3200",
|
|
description: "Team offsite in Portugal \u2014 strategy workshops, co-working from surf hostels, exploring Sintra's fairy-tale castles, and Lisbon street food adventures.",
|
|
destinations: [
|
|
{ id: "d1", name: "Lisbon", country: "Portugal", arrival_date: "2026-02-20", lat: 38.7223, lng: -9.1393 },
|
|
{ id: "d2", name: "Sintra", country: "Portugal", arrival_date: "2026-02-25", lat: 38.7979, lng: -9.3906 },
|
|
],
|
|
itinerary: [
|
|
{ id: "i1", title: "Arrive Lisbon \u2014 check in", category: "TRANSPORT", date: "2026-02-20", start_time: "14:00" },
|
|
{ id: "i2", title: "Welcome dinner \u2014 Time Out Market", category: "MEAL", date: "2026-02-20", start_time: "19:30" },
|
|
{ id: "i3", title: "Strategy workshop: Q2 roadmap", category: "ACTIVITY", date: "2026-02-21", start_time: "09:00" },
|
|
{ id: "i4", title: "Co-working at Second Home", category: "ACTIVITY", date: "2026-02-22", start_time: "09:30" },
|
|
{ id: "i5", title: "Alfama walking tour", category: "ACTIVITY", date: "2026-02-22", start_time: "15:00" },
|
|
{ id: "i6", title: "Surf lesson in Cascais", category: "ACTIVITY", date: "2026-02-23", start_time: "09:00" },
|
|
{ id: "i7", title: "Team retrospective", category: "ACTIVITY", date: "2026-02-24", start_time: "10:00" },
|
|
{ id: "i8", title: "Train to Sintra", category: "TRANSPORT", date: "2026-02-25", start_time: "09:00" },
|
|
{ id: "i9", title: "Pena Palace visit", category: "ACTIVITY", date: "2026-02-25", start_time: "11:00" },
|
|
{ id: "i10", title: "Quinta da Regaleira", category: "ACTIVITY", date: "2026-02-26", start_time: "10:00" },
|
|
{ id: "i11", title: "Free day \u2014 explore Sintra", category: "FREE_TIME", date: "2026-02-27", start_time: "09:00" },
|
|
{ id: "i12", title: "Return to Lisbon & fly home", category: "TRANSPORT", date: "2026-02-28", start_time: "08:00" },
|
|
],
|
|
bookings: [
|
|
{ id: "bk1", type: "FLIGHT", provider: "TAP Air Portugal BER\u2192LIS", confirmation_number: "TAP-2026-8834", cost: "420" },
|
|
{ id: "bk2", type: "ACCOMMODATION", provider: "Lisbon Surf House (5 nights)", confirmation_number: "LSH-FEB26", cost: "850" },
|
|
{ id: "bk3", type: "ACCOMMODATION", provider: "Sintra B&B (3 nights)", confirmation_number: "SBB-8820", cost: "540" },
|
|
{ id: "bk4", type: "ACTIVITY", provider: "Cascais Surf School (8 pax)", confirmation_number: "CSS-G8-0223", cost: "480" },
|
|
{ id: "bk5", type: "TRANSPORT", provider: "CP Train Lisbon\u2192Sintra return", confirmation_number: "CP-ROUND-26", cost: "64" },
|
|
],
|
|
expenses: [
|
|
{ id: "e1", category: "FOOD", description: "Time Out Market welcome dinner", amount: "310", date: "2026-02-20" },
|
|
{ id: "e2", category: "TRANSPORT", description: "Airport shuttle + Uber rides", amount: "95", date: "2026-02-20" },
|
|
{ id: "e3", category: "ACTIVITY", description: "Second Home day passes (8 pax)", amount: "240", date: "2026-02-22" },
|
|
{ id: "e4", category: "FOOD", description: "Groceries & coffee (week)", amount: "175", date: "2026-02-21" },
|
|
{ id: "e5", category: "ACTIVITY", description: "Pena Palace tickets (8 pax)", amount: "112", date: "2026-02-25" },
|
|
{ id: "e6", category: "ACTIVITY", description: "Quinta da Regaleira tickets", amount: "96", date: "2026-02-26" },
|
|
{ id: "e7", category: "FOOD", description: "Farewell dinner \u2014 Ramiro", amount: "280", date: "2026-02-27" },
|
|
],
|
|
packing: [
|
|
{ id: "pk1", name: "Laptop + charger", category: "ELECTRONICS", quantity: 1, packed: true },
|
|
{ id: "pk2", name: "Swimsuit & towel", category: "CLOTHING", quantity: 1, packed: true },
|
|
{ id: "pk3", name: "Sunscreen SPF 50", category: "PERSONAL", quantity: 1, packed: true },
|
|
{ id: "pk4", name: "Light jacket", category: "CLOTHING", quantity: 1, packed: true },
|
|
{ id: "pk5", name: "Comfortable walking shoes", category: "FOOTWEAR", quantity: 1, packed: true },
|
|
{ id: "pk6", name: "Passport", category: "DOCUMENTS", quantity: 1, packed: true },
|
|
],
|
|
collaborators: [
|
|
{ name: "Alex", role: "organizer", avatar: "\u{1F9D1}\u200D\u{1F4BB}" },
|
|
{ name: "Sam", role: "co-lead", avatar: "\u{1F91D}" },
|
|
{ name: "Jordan", role: "logistics", avatar: "\u{1F5FA}\uFE0F" },
|
|
{ name: "Mia", role: "facilitator", avatar: "\u{1F3A4}" },
|
|
{ name: "Leo", role: "content", avatar: "\u{1F4DD}" },
|
|
{ name: "Kai", role: "surf guide", avatar: "\u{1F3C4}" },
|
|
{ name: "Riley", role: "finance", avatar: "\u{1F4B0}" },
|
|
{ name: "Morgan", role: "wellbeing", avatar: "\u{1F9D8}" },
|
|
],
|
|
},
|
|
"japan-2025": {
|
|
id: "japan-2025", title: "Japan Autumn 2025", status: "COMPLETED",
|
|
start_date: "2025-10-10", end_date: "2025-10-24", budget_total: "5200",
|
|
description: "14-day autumn foliage tour through Japan \u2014 Tokyo \u2192 Kyoto \u2192 Osaka \u2192 Hiroshima. Temples, street food, bullet trains, and unforgettable views.",
|
|
destinations: [
|
|
{ id: "d1", name: "Tokyo", country: "Japan", arrival_date: "2025-10-10", lat: 35.6762, lng: 139.6503 },
|
|
{ id: "d2", name: "Kyoto", country: "Japan", arrival_date: "2025-10-14", lat: 35.0116, lng: 135.7681 },
|
|
{ id: "d3", name: "Osaka", country: "Japan", arrival_date: "2025-10-19", lat: 34.6937, lng: 135.5023 },
|
|
{ id: "d4", name: "Hiroshima", country: "Japan", arrival_date: "2025-10-22", lat: 34.3853, lng: 132.4553 },
|
|
],
|
|
itinerary: [
|
|
{ id: "i1", title: "Arrive Tokyo \u2014 Narita Express", category: "TRANSPORT", date: "2025-10-10", start_time: "15:00" },
|
|
{ id: "i2", title: "Shibuya & Harajuku exploration", category: "ACTIVITY", date: "2025-10-11", start_time: "10:00" },
|
|
{ id: "i3", title: "Tsukiji Outer Market & teamLab", category: "ACTIVITY", date: "2025-10-12", start_time: "08:00" },
|
|
{ id: "i4", title: "Day trip to Nikko", category: "ACTIVITY", date: "2025-10-13", start_time: "07:30" },
|
|
{ id: "i5", title: "Shinkansen to Kyoto", category: "TRANSPORT", date: "2025-10-14", start_time: "10:00" },
|
|
{ id: "i6", title: "Fushimi Inari & Kiyomizu-dera", category: "ACTIVITY", date: "2025-10-15", start_time: "07:00" },
|
|
{ id: "i7", title: "Arashiyama bamboo grove", category: "ACTIVITY", date: "2025-10-16", start_time: "08:00" },
|
|
{ id: "i8", title: "Tea ceremony in Gion", category: "ACTIVITY", date: "2025-10-17", start_time: "14:00" },
|
|
{ id: "i9", title: "Nara day trip (deer park)", category: "ACTIVITY", date: "2025-10-18", start_time: "09:00" },
|
|
{ id: "i10", title: "Train to Osaka", category: "TRANSPORT", date: "2025-10-19", start_time: "10:00" },
|
|
{ id: "i11", title: "Dotonbori street food crawl", category: "MEAL", date: "2025-10-19", start_time: "17:00" },
|
|
{ id: "i12", title: "Osaka Castle & Shinsekai", category: "ACTIVITY", date: "2025-10-20", start_time: "09:00" },
|
|
{ id: "i13", title: "Cooking class \u2014 takoyaki", category: "ACTIVITY", date: "2025-10-21", start_time: "11:00" },
|
|
{ id: "i14", title: "Shinkansen to Hiroshima", category: "TRANSPORT", date: "2025-10-22", start_time: "09:00" },
|
|
{ id: "i15", title: "Peace Memorial & Museum", category: "ACTIVITY", date: "2025-10-22", start_time: "13:00" },
|
|
{ id: "i16", title: "Miyajima Island (floating torii)", category: "ACTIVITY", date: "2025-10-23", start_time: "08:00" },
|
|
{ id: "i17", title: "Return to Tokyo & fly home", category: "TRANSPORT", date: "2025-10-24", start_time: "08:00" },
|
|
],
|
|
bookings: [
|
|
{ id: "bk1", type: "FLIGHT", provider: "ANA Berlin \u2192 Tokyo Narita", confirmation_number: "ANA-NH204-1010", cost: "1240" },
|
|
{ id: "bk2", type: "TRANSPORT", provider: "JR Pass 14-day (4 pax)", confirmation_number: "JRP-4X14-2025", cost: "1680" },
|
|
{ id: "bk3", type: "ACCOMMODATION", provider: "Hotel Gracery Shinjuku (4 nights)", confirmation_number: "GRA-TKY-2210", cost: "560" },
|
|
{ id: "bk4", type: "ACCOMMODATION", provider: "Kyoto Machiya Guesthouse (5 nights)", confirmation_number: "KMG-KYO-1415", cost: "480" },
|
|
{ id: "bk5", type: "ACCOMMODATION", provider: "Hostel 64 Osaka (3 nights)", confirmation_number: "H64-OSA-1920", cost: "195" },
|
|
{ id: "bk6", type: "ACCOMMODATION", provider: "Hiroshima Hana Hostel (2 nights)", confirmation_number: "HHH-HIR-2224", cost: "120" },
|
|
],
|
|
expenses: [
|
|
{ id: "e1", category: "TRANSPORT", description: "Narita Express x4", amount: "120", date: "2025-10-10" },
|
|
{ id: "e2", category: "FOOD", description: "Ramen, sushi, yakitori (week 1)", amount: "380", date: "2025-10-11" },
|
|
{ id: "e3", category: "ACTIVITY", description: "teamLab Borderless tickets x4", amount: "96", date: "2025-10-12" },
|
|
{ id: "e4", category: "ACTIVITY", description: "Kyoto tea ceremony (4 pax)", amount: "160", date: "2025-10-17" },
|
|
{ id: "e5", category: "FOOD", description: "Dotonbori street food evening", amount: "85", date: "2025-10-19" },
|
|
{ id: "e6", category: "ACTIVITY", description: "Takoyaki cooking class (4 pax)", amount: "120", date: "2025-10-21" },
|
|
{ id: "e7", category: "FOOD", description: "Okonomiyaki farewell dinner", amount: "68", date: "2025-10-23" },
|
|
{ id: "e8", category: "SHOPPING", description: "Souvenirs & gifts", amount: "245", date: "2025-10-23" },
|
|
],
|
|
packing: [
|
|
{ id: "pk1", name: "Comfortable walking shoes", category: "FOOTWEAR", quantity: 1, packed: true },
|
|
{ id: "pk2", name: "Rain jacket (light)", category: "CLOTHING", quantity: 1, packed: true },
|
|
{ id: "pk3", name: "JR Pass printout", category: "DOCUMENTS", quantity: 1, packed: true },
|
|
{ id: "pk4", name: "Portable WiFi hotspot", category: "ELECTRONICS", quantity: 1, packed: true },
|
|
{ id: "pk5", name: "Camera + extra battery", category: "ELECTRONICS", quantity: 1, packed: true },
|
|
{ id: "pk6", name: "Passport + visa", category: "DOCUMENTS", quantity: 1, packed: true },
|
|
{ id: "pk7", name: "Power adapter (Type A)", category: "ELECTRONICS", quantity: 1, packed: true },
|
|
{ id: "pk8", name: "Day backpack", category: "GEAR", quantity: 1, packed: true },
|
|
],
|
|
collaborators: [
|
|
{ name: "Alex", role: "organizer", avatar: "\u{1F9D1}\u200D\u{1F4BB}" },
|
|
{ name: "Sam", role: "photographer", avatar: "\u{1F4F8}" },
|
|
{ name: "Mia", role: "food guide", avatar: "\u{1F363}" },
|
|
{ name: "Leo", role: "translator", avatar: "\u{1F5E3}\uFE0F" },
|
|
],
|
|
},
|
|
};
|
|
return trips[id] || trips["alpine-2026"];
|
|
}
|
|
|
|
private getApiBase(): string {
|
|
const path = window.location.pathname;
|
|
const match = path.match(/^(\/[^/]+)?\/rtrips/);
|
|
return match ? match[0] : "";
|
|
}
|
|
|
|
private async loadTrips() {
|
|
try {
|
|
const base = this.getApiBase();
|
|
const res = await fetch(`${base}/api/trips`);
|
|
if (res.ok) this.trips = await res.json();
|
|
} catch { this.trips = []; }
|
|
this.render();
|
|
}
|
|
|
|
private async loadTrip(id: string) {
|
|
if (this.space === "demo") {
|
|
this.trip = this.getDemoTripDetail(id);
|
|
this.render();
|
|
return;
|
|
}
|
|
try {
|
|
const base = this.getApiBase();
|
|
const res = await fetch(`${base}/api/trips/${id}`);
|
|
if (res.ok) this.trip = await res.json();
|
|
} catch { this.error = "Failed to load trip"; }
|
|
this.render();
|
|
}
|
|
|
|
private async createTrip() {
|
|
const title = prompt("Trip name:");
|
|
if (!title?.trim()) return;
|
|
try {
|
|
const base = this.getApiBase();
|
|
const res = await fetch(`${base}/api/trips`, {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ title: title.trim() }),
|
|
});
|
|
if (res.ok) this.loadTrips();
|
|
} catch { this.error = "Failed to create trip"; this.render(); }
|
|
}
|
|
|
|
private getCategoryEmoji(cat: string): string {
|
|
const map: Record<string, string> = {
|
|
TRANSPORT: "\u{1F68C}", ACTIVITY: "\u{1F3AF}", MEAL: "\u{1F37D}\uFE0F",
|
|
FREE_TIME: "\u2615", FLIGHT: "\u2708\uFE0F", ACCOMMODATION: "\u{1F3E8}",
|
|
};
|
|
return map[cat] || "\u{1F4CC}";
|
|
}
|
|
|
|
private getStatusStyle(status: string): { bg: string; color: string; label: string } {
|
|
const map: Record<string, { bg: string; color: string; label: string }> = {
|
|
PLANNING: { bg: "#1e3a5f", color: "#60a5fa", label: "Planning" },
|
|
BOOKED: { bg: "#1a3b2e", color: "#34d399", label: "Booked" },
|
|
IN_PROGRESS: { bg: "#3b2e11", color: "#fbbf24", label: "In Progress" },
|
|
COMPLETED: { bg: "#1a3b1a", color: "#22c55e", label: "Completed" },
|
|
CANCELLED: { bg: "#3b1a1a", color: "#f87171", label: "Cancelled" },
|
|
};
|
|
return map[status] || map.PLANNING;
|
|
}
|
|
|
|
private render() {
|
|
// Map container is destroyed by innerHTML — release the instance
|
|
if (this._mapInstance) { try { this._mapInstance.remove(); } catch {} this._mapInstance = null; this._mapMarkers = []; }
|
|
this.shadow.innerHTML = `
|
|
<style>
|
|
:host { display: flex; flex-direction: column; height: calc(100vh - 112px); font-family: system-ui, -apple-system, sans-serif; color: var(--rs-text-primary); overflow: hidden; }
|
|
* { box-sizing: border-box; }
|
|
.rtrips-shell { display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: hidden; }
|
|
.rtrips-scroll { flex: 1; overflow-y: auto; min-height: 0; padding-bottom: 8px; }
|
|
|
|
.rapp-nav { flex-shrink: 0; display: flex; gap: 8px; margin-bottom: 12px; align-items: center; min-height: 36px; }
|
|
.rapp-nav__back { padding: 4px 10px; border-radius: 6px; border: 1px solid var(--rs-border-subtle); background: transparent; color: var(--rs-text-secondary); cursor: pointer; font-size: 13px; }
|
|
.rapp-nav__back:hover { color: var(--rs-text-primary); border-color: rgba(255,255,255,0.2); }
|
|
.rapp-nav__title { font-size: 15px; font-weight: 600; flex: 1; color: var(--rs-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.rapp-nav__btn { padding: 6px 14px; border-radius: 6px; border: none; background: #14b8a6; color: #fff; font-weight: 600; cursor: pointer; font-size: 13px; }
|
|
.rapp-nav__btn:hover { background: #0d9488; }
|
|
.rapp-nav__btn--ai { background: linear-gradient(135deg, #0ea5e9, #6366f1); }
|
|
.rapp-nav__btn--ai:hover { opacity: 0.9; background: linear-gradient(135deg, #0ea5e9, #6366f1); }
|
|
|
|
.trip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
|
|
.trip-card {
|
|
background: var(--rs-bg-surface); border: 1px solid var(--rs-border-strong); border-radius: 12px; padding: 16px;
|
|
cursor: pointer; transition: border-color 0.2s, transform 0.15s;
|
|
}
|
|
.trip-card:hover { border-color: var(--rs-bg-surface-raised); transform: translateY(-1px); }
|
|
.trip-card-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
|
|
.trip-name { font-size: 15px; font-weight: 600; flex: 1; }
|
|
.trip-status {
|
|
display: inline-block; font-size: 10px; font-weight: 600; padding: 3px 10px;
|
|
border-radius: 12px; text-transform: uppercase; letter-spacing: 0.04em;
|
|
}
|
|
.trip-chain { font-size: 12px; color: var(--rs-text-secondary); margin-bottom: 8px; display: flex; align-items: center; gap: 4px; }
|
|
.trip-chain-icon { color: var(--rs-text-muted); }
|
|
.trip-dates { font-size: 12px; color: var(--rs-text-muted); margin-bottom: 6px; }
|
|
.trip-stats { display: flex; gap: 12px; font-size: 11px; color: var(--rs-text-muted); margin-bottom: 8px; }
|
|
.trip-stat { display: flex; align-items: center; gap: 3px; }
|
|
.trip-budget-bar { height: 4px; background: var(--rs-bg-surface-sunken); border-radius: 2px; overflow: hidden; }
|
|
.trip-budget-fill { height: 100%; border-radius: 2px; transition: width 0.3s; }
|
|
.trip-budget-label { display: flex; justify-content: space-between; font-size: 10px; color: var(--rs-text-muted); margin-top: 4px; }
|
|
|
|
.tabs { display: flex; gap: 4px; margin-bottom: 12px; flex-wrap: wrap; flex-shrink: 0; }
|
|
.tab { padding: 6px 14px; border-radius: 6px; border: 1px solid var(--rs-border-strong); background: var(--rs-bg-surface-sunken); color: var(--rs-text-muted); cursor: pointer; font-size: 12px; }
|
|
.tab:hover { border-color: var(--rs-bg-surface-raised); }
|
|
.tab.active { border-color: #14b8a6; color: #14b8a6; }
|
|
|
|
.section-title { font-size: 14px; font-weight: 600; margin: 16px 0 8px; color: var(--rs-text-secondary); }
|
|
.item-row { background: var(--rs-bg-surface); border: 1px solid var(--rs-border-strong); border-radius: 8px; padding: 10px 12px; margin-bottom: 6px; display: flex; gap: 10px; align-items: center; }
|
|
.item-title { font-size: 13px; font-weight: 500; flex: 1; }
|
|
.item-meta { font-size: 11px; color: var(--rs-text-muted); }
|
|
.badge { font-size: 10px; padding: 2px 6px; border-radius: 4px; background: var(--rs-bg-surface-sunken); color: var(--rs-text-secondary); }
|
|
|
|
.budget-bar { height: 8px; background: var(--rs-bg-surface-sunken); border-radius: 4px; margin: 8px 0; overflow: hidden; }
|
|
.budget-fill { height: 100%; background: #14b8a6; border-radius: 4px; transition: width 0.3s; }
|
|
|
|
/* Collaborators */
|
|
.collab-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
|
|
.collab {
|
|
display: flex; align-items: center; gap: 6px; padding: 6px 10px;
|
|
background: var(--rs-bg-surface-sunken); border: 1px solid var(--rs-border-strong); border-radius: 8px; font-size: 12px;
|
|
}
|
|
.collab-avatar { font-size: 16px; }
|
|
.collab-name { font-weight: 500; color: var(--rs-text-primary); }
|
|
.collab-role { font-size: 10px; color: var(--rs-text-muted); }
|
|
|
|
/* Itinerary with emoji categories */
|
|
.itin-row { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; margin-bottom: 4px; background: var(--rs-bg-surface); border: 1px solid var(--rs-border-strong); border-radius: 8px; }
|
|
.itin-emoji { font-size: 18px; flex-shrink: 0; width: 28px; text-align: center; }
|
|
.itin-body { flex: 1; min-width: 0; }
|
|
.itin-title { font-size: 13px; font-weight: 500; color: var(--rs-text-primary); }
|
|
.itin-meta { font-size: 11px; color: var(--rs-text-muted); margin-top: 2px; }
|
|
|
|
/* Destination cards */
|
|
.dest-card { background: var(--rs-bg-surface); border: 1px solid var(--rs-border-strong); border-radius: 10px; padding: 14px; margin-bottom: 8px; display: flex; gap: 12px; align-items: center; }
|
|
.dest-pin { font-size: 24px; }
|
|
.dest-info { flex: 1; }
|
|
.dest-name { font-size: 14px; font-weight: 600; color: var(--rs-text-primary); }
|
|
.dest-country { font-size: 12px; color: var(--rs-text-secondary); }
|
|
.dest-date { font-size: 11px; color: var(--rs-text-muted); }
|
|
|
|
.packing-item { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--rs-border-strong); }
|
|
.packing-check { width: 16px; height: 16px; cursor: pointer; }
|
|
|
|
.empty { text-align: center; color: var(--rs-text-muted); padding: 40px; }
|
|
|
|
/* AI Planner */
|
|
.ai-planner { display: flex; flex: 1; min-height: 0; gap: 0; }
|
|
.ai-chat { width: 40%; min-width: 280px; display: flex; flex-direction: column; border-right: 1px solid var(--rs-border, #e5e7eb); }
|
|
.ai-chat-messages { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; }
|
|
.ai-msg { padding: 8px 10px; border-radius: 8px; margin-bottom: 6px; font-size: 13px; line-height: 1.4; max-width: 85%; white-space: pre-wrap; word-break: break-word; }
|
|
.ai-msg.user { background: #14b8a6; color: white; align-self: flex-end; margin-left: auto; }
|
|
.ai-msg.assistant { background: var(--rs-bg-surface-raised, #f1f5f9); align-self: flex-start; }
|
|
.ai-msg.tool-action { background: #dbeafe; color: #1e40af; font-size: 11px; text-align: center; max-width: 100%; align-self: center; padding: 4px 12px; border-radius: 12px; }
|
|
.ai-chat-input-row { display: flex; gap: 6px; padding: 12px; border-top: 1px solid var(--rs-border, #e5e7eb); align-items: flex-end; }
|
|
.ai-chat-input { flex: 1; padding: 8px 10px; border: 1px solid var(--rs-border, #e5e7eb); border-radius: 8px; font-size: 13px; resize: none; min-height: 36px; max-height: 100px; background: var(--rs-bg-surface, #fff); color: var(--rs-text-primary); font-family: inherit; }
|
|
.ai-chat-input:focus { outline: none; border-color: #14b8a6; }
|
|
.ai-model-select { padding: 6px 8px; border-radius: 6px; border: 1px solid var(--rs-border, #e5e7eb); font-size: 11px; background: var(--rs-bg-surface, #fff); color: var(--rs-text-primary); }
|
|
.ai-cards { flex: 1; overflow-y: auto; padding: 16px; }
|
|
.ai-cards-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
|
|
.ai-cards-header h3 { margin: 0; font-size: 14px; font-weight: 600; }
|
|
.ai-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
|
|
.ai-card { border-radius: 10px; border: 1px solid var(--rs-border-subtle, #e5e7eb); padding: 12px; background: var(--rs-bg-surface, #fff); transition: border-color 0.2s; }
|
|
.ai-card.accepted { border-color: #14b8a6; background: color-mix(in srgb, #14b8a6 5%, transparent); }
|
|
.ai-card-type { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--rs-text-muted, #999); margin-bottom: 4px; }
|
|
.ai-card-title { font-weight: 600; font-size: 14px; margin-bottom: 6px; }
|
|
.ai-card-detail { font-size: 12px; color: var(--rs-text-secondary, #666); line-height: 1.4; }
|
|
.ai-card-actions { display: flex; gap: 6px; margin-top: 8px; }
|
|
.ai-card-btn { padding: 4px 12px; border-radius: 6px; border: none; font-size: 11px; cursor: pointer; font-weight: 500; }
|
|
.ai-card-btn.accept { background: #14b8a6; color: white; }
|
|
.ai-card-btn.accept:hover { background: #0d9488; }
|
|
.ai-card-btn.discard { background: var(--rs-bg-surface-raised, #f1f5f9); color: var(--rs-text-secondary, #666); }
|
|
.ai-card-btn.discard:hover { background: var(--rs-bg-surface-sunken, #e2e8f0); }
|
|
.ai-card-btn.accepted-badge { background: #14b8a6; color: white; cursor: default; opacity: 0.7; }
|
|
.ai-send-btn { padding: 6px 14px; border-radius: 6px; border: none; background: #14b8a6; color: white; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
|
|
.ai-send-btn:hover { background: #0d9488; }
|
|
.ai-send-btn:disabled { opacity: 0.5; cursor: not-allowed; }
|
|
.ai-clear-btn { padding: 6px 10px; border-radius: 6px; border: 1px solid var(--rs-border, #e5e7eb); background: transparent; color: var(--rs-text-muted); font-size: 11px; cursor: pointer; }
|
|
.ai-loading { display: inline-block; width: 16px; height: 16px; border: 2px solid #14b8a640; border-top: 2px solid #14b8a6; border-radius: 50%; animation: ai-spin 0.8s linear infinite; }
|
|
@keyframes ai-spin { to { transform: rotate(360deg); } }
|
|
.ai-empty { text-align: center; color: var(--rs-text-muted); padding: 40px 20px; }
|
|
.ai-empty p { margin: 4px 0; }
|
|
|
|
/* Workspace layout */
|
|
.ai-workspace { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
|
|
.ai-map-container { height: 40%; min-height: 180px; border-bottom: 1px solid var(--rs-border, #333); position: relative; background: #0c1222; }
|
|
.ai-map-container .map-placeholder { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--rs-text-muted); font-size: 13px; }
|
|
.ai-cards-scroll { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
|
|
|
|
/* Flight results card */
|
|
.ai-card--flights .flight-results { display: flex; flex-direction: column; gap: 4px; }
|
|
.flight-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; font-size: 12px; background: var(--rs-bg-surface-sunken, #1a1f2e); }
|
|
.flight-airline { font-weight: 600; width: 50px; flex-shrink: 0; }
|
|
.flight-times { flex: 1; font-size: 11px; }
|
|
.flight-duration { color: var(--rs-text-muted); font-size: 11px; white-space: nowrap; }
|
|
.flight-price { font-weight: 700; color: #14b8a6; white-space: nowrap; }
|
|
.flight-book { color: #0ea5e9; text-decoration: none; font-size: 11px; font-weight: 500; white-space: nowrap; }
|
|
.flight-book:hover { text-decoration: underline; }
|
|
.flight-search-link { display: block; text-align: center; margin-top: 8px; font-size: 11px; color: #0ea5e9; text-decoration: none; }
|
|
.flight-search-link:hover { text-decoration: underline; }
|
|
|
|
/* Route card */
|
|
.ai-card--route .route-info { font-size: 13px; color: var(--rs-text-secondary); display: flex; gap: 8px; align-items: center; }
|
|
|
|
/* Nearby POI card */
|
|
.ai-card--nearby .nearby-list { display: flex; flex-direction: column; gap: 4px; }
|
|
.nearby-item { display: flex; gap: 8px; align-items: center; font-size: 12px; padding: 4px 0; border-bottom: 1px solid var(--rs-border-strong, #222); }
|
|
.nearby-item:last-child { border-bottom: none; }
|
|
.nearby-name { flex: 1; font-weight: 500; }
|
|
.nearby-dist { color: var(--rs-text-muted); font-size: 11px; }
|
|
.nearby-type { font-size: 10px; color: var(--rs-text-muted); background: var(--rs-bg-surface-sunken, #1a1f2e); padding: 1px 6px; border-radius: 4px; }
|
|
</style>
|
|
|
|
${this.error ? `<div style="color:var(--rs-error);text-align:center;padding:8px">${this.esc(this.error)}</div>` : ""}
|
|
<div class="rtrips-shell">
|
|
${this.view === "ai-planner" ? this.renderAiPlanner() : this.view === "list" ? this.renderList() : this.renderDetail()}
|
|
</div>
|
|
`;
|
|
this.attachListeners();
|
|
if (this.view === 'ai-planner') {
|
|
this.initOrUpdateMap();
|
|
} else {
|
|
this._tour.renderOverlay();
|
|
}
|
|
}
|
|
|
|
startTour() {
|
|
this._tour.start();
|
|
}
|
|
|
|
private renderList(): string {
|
|
return `
|
|
<div class="rapp-nav">
|
|
<span class="rapp-nav__title">My Trips</span>
|
|
<button class="rapp-nav__btn" id="create-trip">+ Plan a Trip</button>
|
|
<button class="rapp-nav__btn rapp-nav__btn--ai" id="btn-plan-ai">✨ Plan with AI</button>
|
|
<button class="rapp-nav__btn" id="btn-tour" style="font-size:0.78rem;padding:4px 10px;opacity:0.7">Tour</button>
|
|
</div>
|
|
<div class="rtrips-scroll">
|
|
${this.trips.length > 0 ? `<div class="trip-grid">
|
|
${this.trips.map(t => {
|
|
const st = this.getStatusStyle(t.status || "PLANNING");
|
|
const spent = parseFloat(t.total_spent || 0);
|
|
const budget = parseFloat(t.budget_total || 0);
|
|
const pct = budget > 0 ? Math.min(100, (spent / budget) * 100) : 0;
|
|
const budgetColor = pct > 90 ? "#ef4444" : pct > 70 ? "#fbbf24" : "#14b8a6";
|
|
return `
|
|
<div class="trip-card" data-trip="${t.id}" data-collab-id="trip:${t.id}">
|
|
<div class="trip-card-header">
|
|
<span class="trip-name">${this.esc(t.title)}</span>
|
|
<span class="trip-status" style="background:${st.bg};color:${st.color}">${st.label}</span>
|
|
</div>
|
|
${t.destinations_chain ? `<div class="trip-chain"><span class="trip-chain-icon">\u{1F4CD}</span> ${this.esc(t.destinations_chain)}</div>` : ""}
|
|
<div class="trip-dates">${t.start_date ? new Date(t.start_date + "T00:00:00").toLocaleDateString("default", { month: "short", day: "numeric" }) : ""} \u2013 ${t.end_date ? new Date(t.end_date + "T00:00:00").toLocaleDateString("default", { month: "short", day: "numeric", year: "numeric" }) : "open"}</div>
|
|
<div class="trip-stats">
|
|
<span class="trip-stat">\u{1F4CD} ${t.destination_count || 0} destinations</span>
|
|
${t.collaborator_count ? `<span class="trip-stat">\u{1F465} ${t.collaborator_count} people</span>` : ""}
|
|
</div>
|
|
${budget > 0 ? `
|
|
<div class="trip-budget-bar"><div class="trip-budget-fill" style="width:${pct}%;background:${budgetColor}"></div></div>
|
|
<div class="trip-budget-label"><span>$${spent.toFixed(0)} spent</span><span>$${budget.toFixed(0)} budget</span></div>
|
|
` : ""}
|
|
</div>
|
|
`;}).join("")}
|
|
</div>` : `<div class="empty">
|
|
<p style="font-size:16px;margin-bottom:8px">No trips yet</p>
|
|
<p style="font-size:13px">Start planning your next adventure</p>
|
|
</div>`}
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
private renderDetail(): string {
|
|
if (!this.trip) return '<div class="empty">Loading...</div>';
|
|
const t = this.trip;
|
|
const st = this.getStatusStyle(t.status || "PLANNING");
|
|
return `
|
|
<div class="rapp-nav">
|
|
${this._history.canGoBack ? `<button class="rapp-nav__back" data-back="list">\u2190 Trips</button>` : ""}
|
|
<span class="rapp-nav__title">${this.esc(t.title)}</span>
|
|
<button class="rapp-nav__btn rapp-nav__btn--ai" id="btn-plan-ai">✨ Plan with AI</button>
|
|
<span class="trip-status" style="background:${st.bg};color:${st.color}">${st.label}</span>
|
|
</div>
|
|
<div class="tabs">
|
|
${(["overview", "destinations", "itinerary", "bookings", "expenses", "packing"] as const).map(tab =>
|
|
`<button class="tab ${this.tab === tab ? "active" : ""}" data-tab="${tab}">${tab.charAt(0).toUpperCase() + tab.slice(1)}</button>`
|
|
).join("")}
|
|
</div>
|
|
<div class="rtrips-scroll">${this.renderTab()}</div>
|
|
`;
|
|
}
|
|
|
|
private renderTab(): string {
|
|
const t = this.trip;
|
|
switch (this.tab) {
|
|
case "overview": {
|
|
const spent = (t.expenses || []).reduce((s: number, e: any) => s + parseFloat(e.amount || 0), 0);
|
|
const pct = t.budget_total ? Math.min(100, (spent / parseFloat(t.budget_total)) * 100) : 0;
|
|
const budgetColor = pct > 90 ? "#ef4444" : pct > 70 ? "#fbbf24" : "#14b8a6";
|
|
return `
|
|
<div class="section-title">Trip Details</div>
|
|
<div class="item-row"><span class="item-title">${t.description || "No description"}</span></div>
|
|
${t.start_date ? `<div class="item-row"><span class="item-title">\u{1F4C5} ${new Date(t.start_date + "T00:00:00").toLocaleDateString("default", { weekday: "short", month: "long", day: "numeric", year: "numeric" })} \u2014 ${t.end_date ? new Date(t.end_date + "T00:00:00").toLocaleDateString("default", { weekday: "short", month: "long", day: "numeric" }) : "open"}</span></div>` : ""}
|
|
${t.budget_total ? `
|
|
<div class="section-title">Budget</div>
|
|
<div class="item-row" style="flex-direction:column;align-items:stretch">
|
|
<div style="display:flex;justify-content:space-between;font-size:13px">
|
|
<span>$${spent.toFixed(0)} spent</span>
|
|
<span>$${parseFloat(t.budget_total).toFixed(0)} budget</span>
|
|
</div>
|
|
<div class="budget-bar"><div class="budget-fill" style="width:${pct}%;background:${budgetColor}"></div></div>
|
|
</div>
|
|
` : ""}
|
|
<div class="section-title">Summary</div>
|
|
<div class="item-row"><span class="item-meta">${(t.destinations || []).length} destinations \u00B7 ${(t.itinerary || []).length} activities \u00B7 ${(t.bookings || []).length} bookings \u00B7 ${(t.packing || []).length} packing items</span></div>
|
|
${(t.collaborators || []).length > 0 ? `
|
|
<div class="section-title">Team (${t.collaborators.length})</div>
|
|
<div class="collab-row">
|
|
${t.collaborators.map((c: any) => `
|
|
<div class="collab">
|
|
<span class="collab-avatar">${c.avatar || "\u{1F464}"}</span>
|
|
<div>
|
|
<span class="collab-name">${this.esc(c.name)}</span>
|
|
<span class="collab-role"> \u00B7 ${this.esc(c.role)}</span>
|
|
</div>
|
|
</div>
|
|
`).join("")}
|
|
</div>
|
|
` : ""}
|
|
`;
|
|
}
|
|
case "destinations":
|
|
return (t.destinations || []).length > 0
|
|
? (t.destinations || []).map((d: any, i: number) => `
|
|
<div class="dest-card" data-collab-id="dest:${d.id || i}">
|
|
<span class="dest-pin">${i === 0 ? "\u{1F6EB}" : i === (t.destinations.length - 1) ? "\u{1F6EC}" : "\u{1F4CD}"}</span>
|
|
<div class="dest-info">
|
|
<div class="dest-name">${this.esc(d.name)}</div>
|
|
<div class="dest-country">${this.esc(d.country || "")}</div>
|
|
${d.arrival_date ? `<div class="dest-date">Arrives ${new Date(d.arrival_date + "T00:00:00").toLocaleDateString("default", { weekday: "short", month: "short", day: "numeric" })}</div>` : ""}
|
|
</div>
|
|
</div>
|
|
`).join("")
|
|
: '<div class="empty">No destinations added yet</div>';
|
|
case "itinerary": {
|
|
const items = (t.itinerary || []) as any[];
|
|
if (items.length === 0) return '<div class="empty">No itinerary items yet</div>';
|
|
// Group by date
|
|
const grouped: Record<string, any[]> = {};
|
|
for (const item of items) {
|
|
const d = item.date || "undated";
|
|
if (!grouped[d]) grouped[d] = [];
|
|
grouped[d].push(item);
|
|
}
|
|
let html = "";
|
|
for (const [date, dayItems] of Object.entries(grouped)) {
|
|
const label = date !== "undated" ? new Date(date + "T00:00:00").toLocaleDateString("default", { weekday: "short", month: "short", day: "numeric" }) : "Undated";
|
|
html += `<div class="section-title">${label}</div>`;
|
|
for (const item of dayItems) {
|
|
html += `<div class="itin-row">
|
|
<span class="itin-emoji">${this.getCategoryEmoji(item.category)}</span>
|
|
<div class="itin-body">
|
|
<div class="itin-title">${this.esc(item.title)}</div>
|
|
<div class="itin-meta">${item.start_time || ""} \u00B7 ${item.category || "ACTIVITY"}</div>
|
|
</div>
|
|
</div>`;
|
|
}
|
|
}
|
|
return html;
|
|
}
|
|
case "bookings":
|
|
return (t.bookings || []).length > 0
|
|
? (t.bookings || []).map((b: any) => `
|
|
<div class="item-row">
|
|
<span style="font-size:16px">${this.getCategoryEmoji(b.type)}</span>
|
|
<div style="flex:1">
|
|
<div class="item-title">${this.esc(b.provider || "Booking")}</div>
|
|
<div class="item-meta">${b.confirmation_number ? `#${b.confirmation_number}` : ""} ${b.cost ? `\u00B7 $${parseFloat(b.cost).toFixed(0)}` : ""}</div>
|
|
</div>
|
|
</div>
|
|
`).join("")
|
|
: '<div class="empty">No bookings yet</div>';
|
|
case "expenses":
|
|
return (t.expenses || []).length > 0
|
|
? (t.expenses || []).map((e: any) => `
|
|
<div class="item-row">
|
|
<span class="badge">${e.category || "OTHER"}</span>
|
|
<div style="flex:1">
|
|
<div class="item-title">${this.esc(e.description)}</div>
|
|
<div class="item-meta">${e.date ? new Date(e.date + "T00:00:00").toLocaleDateString() : ""}</div>
|
|
</div>
|
|
<span style="font-weight:600;color:#14b8a6">$${parseFloat(e.amount).toFixed(2)}</span>
|
|
</div>
|
|
`).join("")
|
|
: '<div class="empty">No expenses recorded yet</div>';
|
|
case "packing":
|
|
return (t.packing || []).length > 0
|
|
? `<div style="padding:0 4px">${(t.packing || []).map((p: any) => `
|
|
<div class="packing-item">
|
|
<input type="checkbox" class="packing-check" data-pack="${p.id}" ${p.packed ? "checked" : ""}>
|
|
<span class="item-title" style="${p.packed ? "text-decoration:line-through;opacity:0.5" : ""}">${this.esc(p.name)}</span>
|
|
<span class="badge">${p.category}</span>
|
|
${p.quantity > 1 ? `<span class="item-meta">x${p.quantity}</span>` : ""}
|
|
</div>
|
|
`).join("")}</div>`
|
|
: '<div class="empty">No packing items yet</div>';
|
|
default: return "";
|
|
}
|
|
}
|
|
|
|
private attachListeners() {
|
|
this.shadow.querySelector("#btn-tour")?.addEventListener("click", () => this.startTour());
|
|
this.shadow.getElementById("create-trip")?.addEventListener("click", () => this.createTrip());
|
|
this.shadow.getElementById("btn-plan-ai")?.addEventListener("click", () => {
|
|
this._aiTripContext = this.trip || null;
|
|
this._aiMessages = [];
|
|
this._aiGeneratedItems = [];
|
|
this._aiToolResults = [];
|
|
this._mapPins = [];
|
|
this._mapRoutes = [];
|
|
this._aiLoading = false;
|
|
this.destroyMap();
|
|
this._history.push(this.view as any);
|
|
this.view = 'ai-planner';
|
|
this.render();
|
|
});
|
|
|
|
this.shadow.querySelectorAll("[data-trip]").forEach(el => {
|
|
el.addEventListener("click", () => {
|
|
this._history.push("list");
|
|
this.view = "detail";
|
|
this.tab = "overview";
|
|
this._history.push("detail", { tripId: (el as HTMLElement).dataset.trip });
|
|
this.loadTrip((el as HTMLElement).dataset.trip!);
|
|
});
|
|
});
|
|
this.shadow.querySelectorAll("[data-back]").forEach(el => {
|
|
el.addEventListener("click", () => this.goBack());
|
|
});
|
|
this.shadow.querySelectorAll("[data-tab]").forEach(el => {
|
|
el.addEventListener("click", () => {
|
|
this.tab = (el as HTMLElement).dataset.tab as any;
|
|
this.render();
|
|
});
|
|
});
|
|
this.shadow.querySelectorAll("[data-pack]").forEach(el => {
|
|
el.addEventListener("change", async () => {
|
|
const checkbox = el as HTMLInputElement;
|
|
try {
|
|
const base = this.getApiBase();
|
|
await fetch(`${base}/api/packing/${checkbox.dataset.pack}`, {
|
|
method: "PATCH",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ packed: checkbox.checked }),
|
|
});
|
|
} catch {}
|
|
});
|
|
});
|
|
|
|
// AI Planner listeners
|
|
const aiInput = this.shadow.getElementById('ai-input') as HTMLTextAreaElement | null;
|
|
const aiSend = this.shadow.getElementById('ai-send');
|
|
if (aiInput && aiSend) {
|
|
const doSend = () => {
|
|
const text = aiInput.value;
|
|
if (text.trim()) this.sendAiMessage(text);
|
|
};
|
|
aiSend.addEventListener('click', doSend);
|
|
aiInput.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); doSend(); }
|
|
});
|
|
// Auto-resize textarea
|
|
aiInput.addEventListener('input', () => {
|
|
aiInput.style.height = 'auto';
|
|
aiInput.style.height = Math.min(aiInput.scrollHeight, 100) + 'px';
|
|
});
|
|
// Auto-focus
|
|
setTimeout(() => aiInput.focus(), 50);
|
|
}
|
|
this.shadow.getElementById('ai-model')?.addEventListener('change', (e) => {
|
|
this._aiModel = (e.target as HTMLSelectElement).value;
|
|
});
|
|
this.shadow.getElementById('ai-clear')?.addEventListener('click', () => {
|
|
this._aiMessages = [];
|
|
this._aiGeneratedItems = [];
|
|
this._aiToolResults = [];
|
|
this._mapPins = [];
|
|
this._mapRoutes = [];
|
|
this.destroyMap();
|
|
this.render();
|
|
});
|
|
this.shadow.getElementById('btn-export-canvas')?.addEventListener('click', () => this.exportToCanvas());
|
|
this.shadow.querySelectorAll('[data-accept]').forEach(el => {
|
|
el.addEventListener('click', () => this.acceptItem((el as HTMLElement).dataset.accept!));
|
|
});
|
|
this.shadow.querySelectorAll('[data-discard]').forEach(el => {
|
|
el.addEventListener('click', () => this.discardItem((el as HTMLElement).dataset.discard!));
|
|
});
|
|
}
|
|
|
|
/* ── AI Planner View ── */
|
|
|
|
private renderAiPlanner(): string {
|
|
const acceptedCount = this._aiGeneratedItems.filter(i => i.accepted).length;
|
|
const totalCount = this._aiGeneratedItems.length;
|
|
const tripName = this._aiTripContext?.title || '';
|
|
return `
|
|
<div class="rapp-nav">
|
|
<button class="rapp-nav__back" data-back="prev">\u2190 Back</button>
|
|
<span class="rapp-nav__title">AI Trip Planner${tripName ? ` \u2014 ${this.esc(tripName)}` : ''}</span>
|
|
${totalCount > 0 && acceptedCount > 0 ? `<button class="rapp-nav__btn" id="btn-export-canvas">Export to Canvas (${acceptedCount})</button>` : ''}
|
|
</div>
|
|
<div class="ai-planner">
|
|
<div class="ai-chat">
|
|
<div class="ai-chat-messages" id="ai-messages">
|
|
${this._aiMessages.length === 0 ? `
|
|
<div class="ai-empty">
|
|
<p style="font-size:20px">✨</p>
|
|
<p style="font-size:14px;font-weight:500">Plan your trip with AI</p>
|
|
<p style="font-size:12px">Tell me where you want to go and I'll search flights, find routes, discover nearby places, and build your full itinerary.</p>
|
|
${tripName ? `<p style="font-size:11px;margin-top:8px;color:var(--rs-text-secondary)">Context: ${this.esc(tripName)}</p>` : ''}
|
|
</div>
|
|
` : this._aiMessages.map(m => {
|
|
if (m.toolCalls?.length) {
|
|
const labels = m.toolCalls.map((tc: any) => tc.label || tc.name.replace(/_/g, ' ')).slice(0, 4);
|
|
return `<div class="ai-msg tool-action">\u{1F6E0}\uFE0F ${labels.join(' \u00B7 ')}${m.toolCalls.length > 4 ? ` +${m.toolCalls.length - 4} more` : ''}</div>`;
|
|
}
|
|
return `<div class="ai-msg ${m.role}">${this.esc(m.content)}</div>`;
|
|
}).join('')}
|
|
${this._aiLoading ? '<div class="ai-msg assistant"><span class="ai-loading"></span></div>' : ''}
|
|
</div>
|
|
<div class="ai-chat-input-row">
|
|
<textarea class="ai-chat-input" id="ai-input" placeholder="Plan 5 days in Japan..." rows="1"></textarea>
|
|
<select class="ai-model-select" id="ai-model">
|
|
<option value="gemini-flash"${this._aiModel === 'gemini-flash' ? ' selected' : ''}>Gemini Flash</option>
|
|
<option value="gemini-pro"${this._aiModel === 'gemini-pro' ? ' selected' : ''}>Gemini Pro</option>
|
|
</select>
|
|
<button class="ai-send-btn" id="ai-send"${this._aiLoading ? ' disabled' : ''}>Send</button>
|
|
${this._aiMessages.length > 0 ? '<button class="ai-clear-btn" id="ai-clear">Clear</button>' : ''}
|
|
</div>
|
|
</div>
|
|
<div class="ai-workspace">
|
|
<div class="ai-map-container" id="ai-map">
|
|
<div class="map-placeholder">${this._mapPins.length === 0 ? '\u{1F5FA}\uFE0F Destinations will appear on the map' : ''}</div>
|
|
</div>
|
|
<div class="ai-cards-scroll">
|
|
${this._aiToolResults.map(tr => this.renderToolResultCard(tr)).join('')}
|
|
${totalCount > 0 ? `
|
|
<div style="font-size:12px;font-weight:600;color:var(--rs-text-secondary);margin:4px 0">Generated Items (${acceptedCount}/${totalCount} accepted)</div>
|
|
${this._aiGeneratedItems.map(item => this.renderAiCard(item)).join('')}
|
|
` : (this._aiToolResults.length === 0 ? `<div class="ai-empty">
|
|
<p style="font-size:28px">\u{1F5FA}\uFE0F</p>
|
|
<p style="font-size:13px">AI-generated trip items will appear here</p>
|
|
</div>` : '')}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
private renderAiCard(item: { type: string; props: Record<string, any>; accepted: boolean; id: string }): string {
|
|
const { type, props, accepted, id } = item;
|
|
let emoji = '\u{1F4CC}';
|
|
let title = type;
|
|
let detail = '';
|
|
|
|
switch (type) {
|
|
case 'create_destination':
|
|
emoji = '\u{1F4CD}';
|
|
title = `${props.destName || 'Destination'}${props.country ? ', ' + props.country : ''}`;
|
|
detail = [props.arrivalDate, props.departureDate].filter(Boolean).join(' \u2192 ') || (props.notes || '');
|
|
break;
|
|
case 'create_itinerary': {
|
|
emoji = '\u{1F4C5}';
|
|
title = props.tripTitle || 'Itinerary';
|
|
let items: any[] = [];
|
|
try { items = typeof props.itemsJson === 'string' ? JSON.parse(props.itemsJson) : (props.items || []); } catch {}
|
|
detail = `${items.length} activities`;
|
|
break;
|
|
}
|
|
case 'create_booking': {
|
|
const typeEmojis: Record<string, string> = { FLIGHT: '\u2708\uFE0F', HOTEL: '\u{1F3E8}', CAR_RENTAL: '\u{1F697}', TRAIN: '\u{1F682}', BUS: '\u{1F68C}', FERRY: '\u26F4\uFE0F', ACTIVITY: '\u{1F3AF}', RESTAURANT: '\u{1F37D}\uFE0F' };
|
|
emoji = typeEmojis[props.bookingType] || '\u{1F4CB}';
|
|
title = `${props.bookingType || 'Booking'} \u2014 ${props.provider || ''}`;
|
|
detail = [props.cost != null ? `${props.currency || 'USD'} ${props.cost}` : '', props.startDate || ''].filter(Boolean).join(' \u00B7 ');
|
|
break;
|
|
}
|
|
case 'create_budget': {
|
|
emoji = '\u{1F4B0}';
|
|
title = `Budget: ${props.currency || 'USD'} ${props.budgetTotal}`;
|
|
let expenses: any[] = [];
|
|
try { expenses = typeof props.expensesJson === 'string' ? JSON.parse(props.expensesJson) : (props.expenses || []); } catch {}
|
|
detail = `${expenses.length} expense${expenses.length !== 1 ? 's' : ''}`;
|
|
break;
|
|
}
|
|
case 'create_packing_list': {
|
|
emoji = '\u{1F392}';
|
|
title = 'Packing List';
|
|
let pItems: any[] = [];
|
|
try { pItems = typeof props.itemsJson === 'string' ? JSON.parse(props.itemsJson) : (props.items || []); } catch {}
|
|
detail = `${pItems.length} items`;
|
|
break;
|
|
}
|
|
case 'create_map':
|
|
emoji = '\u{1F5FA}\uFE0F';
|
|
title = props.location_name || 'Map';
|
|
detail = props.latitude != null ? `(${props.latitude.toFixed(2)}, ${props.longitude.toFixed(2)})` : '';
|
|
break;
|
|
case 'create_note':
|
|
emoji = '\u{1F4DD}';
|
|
title = props.title || 'Note';
|
|
detail = (props.content || '').slice(0, 80) + ((props.content || '').length > 80 ? '...' : '');
|
|
break;
|
|
default:
|
|
title = type.replace('create_', '').replace(/_/g, ' ');
|
|
detail = JSON.stringify(props).slice(0, 80);
|
|
}
|
|
|
|
const typePretty = type.replace('create_', '').replace(/_/g, ' ');
|
|
return `
|
|
<div class="ai-card${accepted ? ' accepted' : ''}" data-card-id="${id}">
|
|
<div class="ai-card-type">${emoji} ${this.esc(typePretty)}</div>
|
|
<div class="ai-card-title">${this.esc(title)}</div>
|
|
${detail ? `<div class="ai-card-detail">${this.esc(detail)}</div>` : ''}
|
|
<div class="ai-card-actions">
|
|
${accepted
|
|
? '<button class="ai-card-btn accepted-badge">\u2713 Accepted</button>'
|
|
: `<button class="ai-card-btn accept" data-accept="${id}">Accept</button>
|
|
<button class="ai-card-btn discard" data-discard="${id}">Discard</button>`
|
|
}
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
private renderToolResultCard(tr: { type: string; data: any; id: string }): string {
|
|
const { type, data, id } = tr;
|
|
switch (type) {
|
|
case 'search_flights': {
|
|
const flights = data.flights || [];
|
|
const from = data._from || '';
|
|
const to = data._to || '';
|
|
return `
|
|
<div class="ai-card ai-card--flights" data-card-id="${id}">
|
|
<div class="ai-card-type">\u2708\uFE0F Flights${from && to ? `: ${this.esc(from)} \u2192 ${this.esc(to)}` : ''}</div>
|
|
${flights.length > 0 ? `<div class="flight-results">
|
|
${flights.map((f: any) => `
|
|
<div class="flight-row">
|
|
<span class="flight-airline">${this.esc(f.airline || '?')}</span>
|
|
<span class="flight-times">${f.departTime ? new Date(f.departTime).toLocaleTimeString([], {hour:'2-digit',minute:'2-digit'}) : '?'} \u2192 ${f.arriveTime ? new Date(f.arriveTime).toLocaleTimeString([], {hour:'2-digit',minute:'2-digit'}) : '?'}</span>
|
|
<span class="flight-duration">${f.duration || '?'} \u00B7 ${f.stops === 0 ? 'Direct' : f.stops + ' stop' + (f.stops > 1 ? 's' : '')}</span>
|
|
<span class="flight-price">${f.currency || '\u20AC'}${f.price}</span>
|
|
${f.bookingUrl ? `<a class="flight-book" href="${f.bookingUrl}" target="_blank">Book \u2192</a>` : ''}
|
|
</div>
|
|
`).join('')}
|
|
</div>` : `<div class="ai-card-detail">No flight results found</div>`}
|
|
${data.searchUrl ? `<a class="flight-search-link" href="${data.searchUrl}" target="_blank">See all results on Kiwi \u2192</a>` : ''}
|
|
${data.note ? `<div class="ai-card-detail" style="margin-top:4px;font-style:italic">${this.esc(data.note)}</div>` : ''}
|
|
</div>`;
|
|
}
|
|
case 'get_route': {
|
|
if (data.error) return `<div class="ai-card ai-card--route"><div class="ai-card-type">\u{1F6E3}\uFE0F Route</div><div class="ai-card-detail">Error: ${this.esc(data.error)}</div></div>`;
|
|
return `
|
|
<div class="ai-card ai-card--route" data-card-id="${id}">
|
|
<div class="ai-card-type">\u{1F6E3}\uFE0F Route${data._label ? `: ${this.esc(data._label)}` : ''}</div>
|
|
<div class="route-info">
|
|
<span>${data.distanceKm || '?'} km</span>
|
|
<span>\u00B7</span>
|
|
<span>${data.durationFormatted || '?'}</span>
|
|
<span>\u00B7</span>
|
|
<span>${data._mode || 'driving'}</span>
|
|
</div>
|
|
</div>`;
|
|
}
|
|
case 'geocode_place': {
|
|
if (data.error) return '';
|
|
return `
|
|
<div class="ai-card" data-card-id="${id}">
|
|
<div class="ai-card-type">\u{1F4CD} Location</div>
|
|
<div class="ai-card-title">${this.esc(data.displayName || data._query || 'Unknown')}</div>
|
|
<div class="ai-card-detail">${data.lat?.toFixed(4)}, ${data.lng?.toFixed(4)}</div>
|
|
</div>`;
|
|
}
|
|
case 'find_nearby': {
|
|
const results = data.results || [];
|
|
return `
|
|
<div class="ai-card ai-card--nearby" data-card-id="${id}">
|
|
<div class="ai-card-type">\u{1F4CD} ${this.esc((data.category || 'Places').charAt(0).toUpperCase() + (data.category || 'places').slice(1))}s nearby</div>
|
|
${results.length > 0 ? `<div class="nearby-list">
|
|
${results.map((r: any) => `
|
|
<div class="nearby-item">
|
|
<span class="nearby-name">${this.esc(r.name)}</span>
|
|
${r.distance != null ? `<span class="nearby-dist">${r.distance}m</span>` : ''}
|
|
<span class="nearby-type">${this.esc(r.type || data.category)}</span>
|
|
</div>
|
|
`).join('')}
|
|
</div>` : '<div class="ai-card-detail">No results found</div>'}
|
|
</div>`;
|
|
}
|
|
default:
|
|
return `<div class="ai-card"><div class="ai-card-type">${this.esc(type)}</div><div class="ai-card-detail">${this.esc(JSON.stringify(data).slice(0, 120))}</div></div>`;
|
|
}
|
|
}
|
|
|
|
private async sendAiMessage(text: string) {
|
|
if (!text.trim() || this._aiLoading) return;
|
|
this._aiMessages.push({ role: 'user', content: text.trim() });
|
|
this._aiLoading = true;
|
|
this.render();
|
|
|
|
// Scroll chat to bottom
|
|
const msgBox = this.shadow.getElementById('ai-messages');
|
|
if (msgBox) msgBox.scrollTop = msgBox.scrollHeight;
|
|
|
|
try {
|
|
let result: { content: string; toolCalls?: any[]; toolResults?: Record<string, any> };
|
|
|
|
if (this.space === 'demo') {
|
|
result = this.mockAiResponse(text);
|
|
} else {
|
|
const systemPrompt = this.buildAiSystemPrompt();
|
|
const messages = this._aiMessages
|
|
.filter(m => m.role === 'user' || (m.role === 'assistant' && m.content))
|
|
.map(m => ({ role: m.role, content: m.content }));
|
|
const res = await fetch('/api/trips/ai-prompt', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ messages, model: this._aiModel, systemPrompt }),
|
|
});
|
|
if (!res.ok) throw new Error(`API error: ${res.status}`);
|
|
result = await res.json();
|
|
}
|
|
|
|
// Process tool calls — separate canvas items from live tool results
|
|
if (result.toolCalls?.length) {
|
|
const canvasTools = ['create_destination', 'create_itinerary', 'create_booking', 'create_budget', 'create_packing_list', 'create_map', 'create_note'];
|
|
for (const tc of result.toolCalls) {
|
|
if (canvasTools.includes(tc.name)) {
|
|
this._aiGeneratedItems.push({
|
|
type: tc.name,
|
|
props: tc.args || {},
|
|
accepted: false,
|
|
id: `ai-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`,
|
|
});
|
|
// Also add destination pins to map
|
|
if (tc.name === 'create_destination' && tc.args?.lat && tc.args?.lng) {
|
|
this._mapPins.push({ lat: tc.args.lat, lng: tc.args.lng, label: tc.args.destName || 'Destination', color: '#14b8a6' });
|
|
}
|
|
}
|
|
}
|
|
this._aiMessages.push({ role: 'assistant', content: '', toolCalls: result.toolCalls });
|
|
}
|
|
|
|
// Process tool results from server-executed trip tools
|
|
if (result.toolResults) {
|
|
for (const [key, data] of Object.entries(result.toolResults)) {
|
|
const toolName = key.replace(/_\d+$/, '');
|
|
const id = `tr-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`;
|
|
this._aiToolResults.push({ type: toolName, data, id });
|
|
this.processToolResultForMap(toolName, data);
|
|
}
|
|
}
|
|
|
|
if (result.content) {
|
|
this._aiMessages.push({ role: 'assistant', content: result.content });
|
|
}
|
|
} catch (err: any) {
|
|
this._aiMessages.push({ role: 'assistant', content: `Error: ${err.message || 'Failed to get response'}` });
|
|
}
|
|
|
|
this._aiLoading = false;
|
|
this.render();
|
|
const msgBox2 = this.shadow.getElementById('ai-messages');
|
|
if (msgBox2) msgBox2.scrollTop = msgBox2.scrollHeight;
|
|
}
|
|
|
|
private processToolResultForMap(toolName: string, data: any) {
|
|
if (toolName === 'geocode_place' && data.lat && data.lng) {
|
|
this._mapPins.push({ lat: data.lat, lng: data.lng, label: data.displayName?.split(',')[0] || 'Pin', color: '#14b8a6' });
|
|
}
|
|
if (toolName === 'get_route' && data.geometry) {
|
|
this._mapRoutes.push(data.geometry);
|
|
}
|
|
if (toolName === 'find_nearby' && data.results) {
|
|
for (const r of data.results.slice(0, 4)) {
|
|
if (r.lat && r.lng) {
|
|
this._mapPins.push({ lat: r.lat, lng: r.lng, label: r.name, color: '#f59e0b' });
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
private buildAiSystemPrompt(): string {
|
|
let prompt = `You are a travel planning assistant in rTrips. Help users plan trips by understanding their needs first, then organizing the practical details.
|
|
|
|
CONVERSATION APPROACH:
|
|
1. First, understand the trip: Ask about destinations, dates, group size, budget, interests, and constraints
|
|
2. Then research: Use geocode_place for each destination to get coordinates, search_flights when dates are known, get_route for distances between places, find_nearby for restaurants/hotels/attractions
|
|
3. Then organize: Create structured destination cards, itineraries, budgets, and packing lists
|
|
4. Finally, refine: Ask if anything needs adjusting
|
|
|
|
AVAILABLE TOOLS:
|
|
Research tools (these execute live and return real data):
|
|
- search_flights: Search real flights between cities with prices and booking links
|
|
- get_route: Get driving/walking distance and duration between coordinates
|
|
- geocode_place: Look up coordinates for a city or place name
|
|
- find_nearby: Find restaurants, hotels, cafes, museums near a location
|
|
|
|
Planning tools (these create items the user can accept or discard):
|
|
- create_destination: Create a destination card with dates and coordinates
|
|
- create_itinerary: Create a day-by-day activity plan
|
|
- create_booking: Record a booking with confirmation details
|
|
- create_budget: Create a budget breakdown with estimated costs
|
|
- create_packing_list: Create a packing checklist
|
|
|
|
GUIDELINES:
|
|
- Always use geocode_place for destinations to get real coordinates for the map
|
|
- Use search_flights when the user confirms dates and origin city
|
|
- Use get_route to show distances between consecutive destinations
|
|
- Use find_nearby to suggest restaurants, hotels, or attractions at destinations
|
|
- Ask follow-up questions — don't generate everything at once
|
|
- Be specific with dates, prices, and logistics
|
|
- Use YYYY-MM-DD for dates, ISO currency codes (EUR, USD, JPY)`;
|
|
|
|
|
|
if (this._aiTripContext) {
|
|
const t = this._aiTripContext;
|
|
prompt += `\n\nCurrent trip context:
|
|
- Title: ${t.title || 'Untitled'}
|
|
- Status: ${t.status || 'PLANNING'}
|
|
- Dates: ${t.start_date || '?'} to ${t.end_date || '?'}
|
|
- Budget: $${t.budget_total || '0'}`;
|
|
if (t.destinations?.length) {
|
|
prompt += `\n- Existing destinations: ${t.destinations.map((d: any) => d.name).join(', ')}`;
|
|
}
|
|
if (t.description) {
|
|
prompt += `\n- Description: ${t.description}`;
|
|
}
|
|
}
|
|
return prompt;
|
|
}
|
|
|
|
private mockAiResponse(text: string): { content: string; toolCalls: any[]; toolResults: Record<string, any> } {
|
|
const lower = text.toLowerCase();
|
|
const toolCalls: any[] = [];
|
|
const toolResults: Record<string, any> = {};
|
|
|
|
if (lower.includes('japan') || lower.includes('tokyo') || lower.includes('kyoto')) {
|
|
// Geocode results for map pins
|
|
toolResults['geocode_place_1'] = { lat: 35.6762, lng: 139.6503, displayName: 'Tokyo, Japan', _query: 'Tokyo' };
|
|
toolResults['geocode_place_2'] = { lat: 35.0116, lng: 135.7681, displayName: 'Kyoto, Japan', _query: 'Kyoto' };
|
|
|
|
// Flight results
|
|
toolCalls.push({ name: 'search_flights', args: { from: 'Berlin', to: 'Tokyo', departDate: '2026-06-01' }, label: 'Searching flights Berlin \u2192 Tokyo' });
|
|
toolResults['search_flights_3'] = {
|
|
_from: 'Berlin', _to: 'Tokyo',
|
|
flights: [
|
|
{ airline: 'ANA', duration: '12h 20m', stops: 1, price: 480, currency: '\u20AC', departTime: '2026-06-01T10:30:00Z', arriveTime: '2026-06-02T06:50:00Z', bookingUrl: 'https://www.kiwi.com/en/search/results/berlin/tokyo' },
|
|
{ airline: 'JAL', duration: '11h 45m', stops: 1, price: 520, currency: '\u20AC', departTime: '2026-06-01T13:15:00Z', arriveTime: '2026-06-02T09:00:00Z', bookingUrl: 'https://www.kiwi.com/en/search/results/berlin/tokyo' },
|
|
{ airline: 'Lufthansa+ANA', duration: '14h 10m', stops: 1, price: 445, currency: '\u20AC', departTime: '2026-06-01T08:00:00Z', arriveTime: '2026-06-02T06:10:00Z', bookingUrl: 'https://www.kiwi.com/en/search/results/berlin/tokyo' },
|
|
{ airline: 'Turkish', duration: '16h 30m', stops: 1, price: 390, currency: '\u20AC', departTime: '2026-06-01T18:20:00Z', arriveTime: '2026-06-02T14:50:00Z', bookingUrl: 'https://www.kiwi.com/en/search/results/berlin/tokyo' },
|
|
],
|
|
searchUrl: 'https://www.kiwi.com/en/search/results/berlin/tokyo/2026-06-01',
|
|
};
|
|
|
|
// Route between Tokyo and Kyoto
|
|
toolCalls.push({ name: 'get_route', args: { startLat: 35.6762, startLng: 139.6503, endLat: 35.0116, endLng: 135.7681 }, label: 'Getting route Tokyo \u2192 Kyoto' });
|
|
toolResults['get_route_4'] = {
|
|
_label: 'Tokyo \u2192 Kyoto', _mode: 'driving',
|
|
distanceKm: 476.3, durationFormatted: '5h 12m',
|
|
distance: 476300, duration: 18720,
|
|
geometry: { type: 'LineString', coordinates: [[139.6503, 35.6762], [138.5, 35.3], [137.0, 35.1], [136.0, 35.0], [135.7681, 35.0116]] },
|
|
};
|
|
|
|
// Nearby restaurants in Tokyo
|
|
toolCalls.push({ name: 'find_nearby', args: { lat: 35.6762, lng: 139.6503, category: 'restaurant' }, label: 'Finding restaurants near Tokyo' });
|
|
toolResults['find_nearby_5'] = {
|
|
category: 'restaurant',
|
|
results: [
|
|
{ name: 'Ichiran Ramen Shibuya', type: 'ramen', lat: 35.6598, lng: 139.7006, distance: 350 },
|
|
{ name: 'Sukiyabashi Jiro', type: 'sushi', lat: 35.6733, lng: 139.7638, distance: 780 },
|
|
{ name: 'Narisawa', type: 'fine dining', lat: 35.6656, lng: 139.7216, distance: 520 },
|
|
{ name: 'Tsuta Ramen', type: 'ramen', lat: 35.7189, lng: 139.7226, distance: 1200 },
|
|
],
|
|
};
|
|
|
|
// Canvas items
|
|
toolCalls.push(
|
|
{ name: 'create_destination', args: { destName: 'Tokyo', country: 'Japan', lat: 35.6762, lng: 139.6503, arrivalDate: '2026-06-01', departureDate: '2026-06-04', notes: 'Explore Shibuya, Akihabara, and Tsukiji Market' }, label: 'Created destination: Tokyo' },
|
|
{ name: 'create_destination', args: { destName: 'Kyoto', country: 'Japan', lat: 35.0116, lng: 135.7681, arrivalDate: '2026-06-04', departureDate: '2026-06-06', notes: 'Visit Fushimi Inari, Arashiyama bamboo grove' }, label: 'Created destination: Kyoto' },
|
|
{ name: 'create_itinerary', args: { tripTitle: 'Japan Adventure', itemsJson: JSON.stringify([
|
|
{ id: 'it1', title: 'Arrive Tokyo \u2014 Narita Express', date: '2026-06-01', startTime: '15:00', category: 'TRANSPORT' },
|
|
{ id: 'it2', title: 'Shibuya & Harajuku exploration', date: '2026-06-02', startTime: '10:00', category: 'ACTIVITY' },
|
|
{ id: 'it3', title: 'Tsukiji Market & teamLab', date: '2026-06-03', startTime: '08:00', category: 'ACTIVITY' },
|
|
{ id: 'it4', title: 'Shinkansen to Kyoto', date: '2026-06-04', startTime: '10:00', category: 'TRANSPORT' },
|
|
{ id: 'it5', title: 'Fushimi Inari & Kiyomizu-dera', date: '2026-06-05', startTime: '07:00', category: 'ACTIVITY' },
|
|
]) }, label: 'Created itinerary: Japan Adventure' },
|
|
{ name: 'create_budget', args: { budgetTotal: 3500, currency: 'USD', expensesJson: JSON.stringify([
|
|
{ id: 'e1', category: 'TRANSPORT', description: 'Round-trip flights', amount: 1200, date: '2026-06-01' },
|
|
{ id: 'e2', category: 'ACCOMMODATION', description: 'Hotels (5 nights)', amount: 800, date: '2026-06-01' },
|
|
{ id: 'e3', category: 'TRANSPORT', description: 'JR Pass (7 day)', amount: 280, date: '2026-06-01' },
|
|
{ id: 'e4', category: 'FOOD', description: 'Food & dining', amount: 500, date: '2026-06-01' },
|
|
{ id: 'e5', category: 'ACTIVITY', description: 'Activities & entrance fees', amount: 300, date: '2026-06-01' },
|
|
]) }, label: 'Created budget: $3,500' },
|
|
{ name: 'create_packing_list', args: { itemsJson: JSON.stringify([
|
|
{ id: 'p1', name: 'Comfortable walking shoes', category: 'FOOTWEAR', quantity: 1, packed: false },
|
|
{ id: 'p2', name: 'Rain jacket (light)', category: 'CLOTHING', quantity: 1, packed: false },
|
|
{ id: 'p3', name: 'Portable WiFi hotspot', category: 'ELECTRONICS', quantity: 1, packed: false },
|
|
{ id: 'p4', name: 'Power adapter (Type A)', category: 'ELECTRONICS', quantity: 1, packed: false },
|
|
{ id: 'p5', name: 'Passport + visa', category: 'DOCUMENTS', quantity: 1, packed: false },
|
|
]) }, label: 'Created packing list' },
|
|
);
|
|
return { content: "Here's a 5-day Japan plan! I found flights from \u20AC390 (Turkish with 1 stop) to \u20AC520 (JAL direct). Tokyo to Kyoto is 476km by car, but I'd recommend the Shinkansen bullet train (2h 15m). I also found some great restaurants near Shibuya. Accept the items you like and I can refine further!", toolCalls, toolResults };
|
|
}
|
|
|
|
if (lower.includes('europe') || lower.includes('paris') || lower.includes('rome') || lower.includes('barcelona')) {
|
|
toolResults['geocode_place_1'] = { lat: 48.8566, lng: 2.3522, displayName: 'Paris, France', _query: 'Paris' };
|
|
toolResults['geocode_place_2'] = { lat: 41.3874, lng: 2.1686, displayName: 'Barcelona, Spain', _query: 'Barcelona' };
|
|
|
|
toolCalls.push({ name: 'search_flights', args: { from: 'Paris', to: 'Barcelona', departDate: '2026-07-04' }, label: 'Searching flights Paris \u2192 Barcelona' });
|
|
toolResults['search_flights_3'] = {
|
|
_from: 'Paris', _to: 'Barcelona',
|
|
flights: [
|
|
{ airline: 'Vueling', duration: '1h 55m', stops: 0, price: 65, currency: '\u20AC', departTime: '2026-07-04T07:30:00Z', arriveTime: '2026-07-04T09:25:00Z', bookingUrl: 'https://www.kiwi.com/en/search/results/paris/barcelona' },
|
|
{ airline: 'Air France', duration: '2h 00m', stops: 0, price: 95, currency: '\u20AC', departTime: '2026-07-04T12:00:00Z', arriveTime: '2026-07-04T14:00:00Z', bookingUrl: 'https://www.kiwi.com/en/search/results/paris/barcelona' },
|
|
{ airline: 'Ryanair', duration: '2h 05m', stops: 0, price: 42, currency: '\u20AC', departTime: '2026-07-04T06:15:00Z', arriveTime: '2026-07-04T08:20:00Z', bookingUrl: 'https://www.kiwi.com/en/search/results/paris/barcelona' },
|
|
],
|
|
searchUrl: 'https://www.kiwi.com/en/search/results/paris/barcelona/2026-07-04',
|
|
};
|
|
|
|
toolCalls.push({ name: 'get_route', args: { startLat: 48.8566, startLng: 2.3522, endLat: 41.3874, endLng: 2.1686 }, label: 'Getting route Paris \u2192 Barcelona' });
|
|
toolResults['get_route_4'] = {
|
|
_label: 'Paris \u2192 Barcelona', _mode: 'driving',
|
|
distanceKm: 1035, durationFormatted: '9h 45m',
|
|
distance: 1035000, duration: 35100,
|
|
geometry: { type: 'LineString', coordinates: [[2.3522, 48.8566], [2.5, 46.0], [2.0, 43.0], [2.1686, 41.3874]] },
|
|
};
|
|
|
|
toolCalls.push(
|
|
{ name: 'create_destination', args: { destName: 'Paris', country: 'France', lat: 48.8566, lng: 2.3522, arrivalDate: '2026-07-01', departureDate: '2026-07-04' }, label: 'Created destination: Paris' },
|
|
{ name: 'create_destination', args: { destName: 'Barcelona', country: 'Spain', lat: 41.3874, lng: 2.1686, arrivalDate: '2026-07-04', departureDate: '2026-07-07' }, label: 'Created destination: Barcelona' },
|
|
{ name: 'create_budget', args: { budgetTotal: 4000, currency: 'EUR', expensesJson: JSON.stringify([
|
|
{ id: 'e1', category: 'TRANSPORT', description: 'Flights', amount: 900, date: '2026-07-01' },
|
|
{ id: 'e2', category: 'ACCOMMODATION', description: 'Hotels (6 nights)', amount: 1200, date: '2026-07-01' },
|
|
{ id: 'e3', category: 'FOOD', description: 'Dining', amount: 700, date: '2026-07-01' },
|
|
]) }, label: 'Created budget: \u20AC4,000' },
|
|
);
|
|
return { content: "Here's a week in Europe \u2014 Paris and Barcelona! Flights between the two start at just \u20AC42 (Ryanair). It's 1,035km by car but only 2 hours by plane. I've set up destinations and a \u20AC4,000 budget.", toolCalls, toolResults };
|
|
}
|
|
|
|
if (lower.includes('beach') || lower.includes('tropical') || lower.includes('bali') || lower.includes('thailand')) {
|
|
toolResults['geocode_place_1'] = { lat: -8.3405, lng: 115.0920, displayName: 'Bali, Indonesia', _query: 'Bali' };
|
|
|
|
toolCalls.push({ name: 'find_nearby', args: { lat: -8.3405, lng: 115.0920, category: 'hotel' }, label: 'Finding hotels near Bali' });
|
|
toolResults['find_nearby_2'] = {
|
|
category: 'hotel',
|
|
results: [
|
|
{ name: 'Four Seasons Jimbaran', type: 'resort', lat: -8.7900, lng: 115.1600, distance: 2100 },
|
|
{ name: 'Hanging Gardens of Bali', type: 'boutique', lat: -8.4200, lng: 115.3800, distance: 3400 },
|
|
{ name: 'Alila Seminyak', type: 'beach hotel', lat: -8.6800, lng: 115.1500, distance: 1800 },
|
|
],
|
|
};
|
|
|
|
toolCalls.push(
|
|
{ name: 'create_destination', args: { destName: 'Bali', country: 'Indonesia', lat: -8.3405, lng: 115.0920, arrivalDate: '2026-08-10', departureDate: '2026-08-17', notes: 'Ubud rice terraces, Seminyak beach, temple tours' }, label: 'Created destination: Bali' },
|
|
{ name: 'create_itinerary', args: { tripTitle: 'Bali Beach Retreat', itemsJson: JSON.stringify([
|
|
{ id: 'it1', title: 'Arrive Ngurah Rai Airport', date: '2026-08-10', startTime: '14:00', category: 'TRANSPORT' },
|
|
{ id: 'it2', title: 'Ubud rice terrace trek', date: '2026-08-11', startTime: '08:00', category: 'ACTIVITY' },
|
|
{ id: 'it3', title: 'Temple tour \u2014 Tirta Empul', date: '2026-08-12', startTime: '09:00', category: 'ACTIVITY' },
|
|
{ id: 'it4', title: 'Surf lesson at Seminyak', date: '2026-08-13', startTime: '07:00', category: 'ACTIVITY' },
|
|
{ id: 'it5', title: 'Beach day & spa', date: '2026-08-14', startTime: '10:00', category: 'FREE_TIME' },
|
|
]) }, label: 'Created itinerary' },
|
|
{ name: 'create_budget', args: { budgetTotal: 2000, currency: 'USD', expensesJson: JSON.stringify([
|
|
{ id: 'e1', category: 'TRANSPORT', description: 'Flights', amount: 800, date: '2026-08-10' },
|
|
{ id: 'e2', category: 'ACCOMMODATION', description: 'Villa (7 nights)', amount: 600, date: '2026-08-10' },
|
|
{ id: 'e3', category: 'FOOD', description: 'Food & drinks', amount: 300, date: '2026-08-10' },
|
|
]) }, label: 'Created budget: $2,000' },
|
|
);
|
|
return { content: "Here's a relaxing week in Bali! I found some great hotels nearby including Four Seasons and Alila Seminyak. Budget is very affordable at $2,000 including flights, villa, and food.", toolCalls, toolResults };
|
|
}
|
|
|
|
// Generic fallback — conversational
|
|
return { content: "I'd love to help you plan a trip! To give you the best suggestions, could you tell me:\n\n1. **Where** do you want to go? (or what kind of trip \u2014 beach, city, adventure?)\n2. **When** are you thinking of traveling?\n3. **How many days** do you have?\n4. **Budget range** \u2014 backpacker, mid-range, or luxury?\n5. **Traveling solo** or with others?\n\nOnce I know more, I'll search for flights, find great spots, and build a full itinerary!", toolCalls: [], toolResults: {} };
|
|
}
|
|
|
|
private acceptItem(id: string) {
|
|
const item = this._aiGeneratedItems.find(i => i.id === id);
|
|
if (item) { item.accepted = true; this.render(); }
|
|
}
|
|
|
|
private discardItem(id: string) {
|
|
this._aiGeneratedItems = this._aiGeneratedItems.filter(i => i.id !== id);
|
|
this.render();
|
|
}
|
|
|
|
private exportToCanvas() {
|
|
const accepted = this._aiGeneratedItems.filter(i => i.accepted);
|
|
if (accepted.length === 0) return;
|
|
sessionStorage.setItem('rtrips-canvas-export', JSON.stringify(accepted.map(i => ({ type: i.type, props: i.props }))));
|
|
const nav = (window as any).__rspaceNavUrl;
|
|
window.location.href = (nav ? nav(this.space, 'rspace') : `/${this.space}/rspace`) + '#trip-import';
|
|
}
|
|
|
|
private goBack() {
|
|
this.destroyMap();
|
|
const prev = this._history.back();
|
|
if (!prev) return;
|
|
this.view = prev.view;
|
|
if (this.view === "list") {
|
|
if (this.space === "demo") { this.loadDemoData(); } else { this.loadTrips(); }
|
|
} else {
|
|
this.render();
|
|
}
|
|
}
|
|
|
|
/* ── MapLibre GL ── */
|
|
|
|
private async initOrUpdateMap() {
|
|
const container = this.shadow.getElementById('ai-map');
|
|
if (!container) return;
|
|
|
|
// Load MapLibre CSS + JS if not already loaded
|
|
const maplibreGL = (window as any).maplibregl;
|
|
if (!maplibreGL) {
|
|
// Load CSS into document head (for global elements)
|
|
const link = document.createElement('link');
|
|
link.rel = 'stylesheet';
|
|
link.href = 'https://unpkg.com/maplibre-gl@4.1.2/dist/maplibre-gl.css';
|
|
document.head.appendChild(link);
|
|
// Load JS
|
|
await new Promise<void>((resolve, reject) => {
|
|
const script = document.createElement('script');
|
|
script.src = 'https://unpkg.com/maplibre-gl@4.1.2/dist/maplibre-gl.js';
|
|
script.onload = () => resolve();
|
|
script.onerror = reject;
|
|
document.head.appendChild(script);
|
|
});
|
|
}
|
|
|
|
// Inject MapLibre CSS into shadow DOM too (needed for popups, controls)
|
|
if (!this.shadow.querySelector('link[data-maplibre-css]')) {
|
|
const shadowLink = document.createElement('link');
|
|
shadowLink.rel = 'stylesheet';
|
|
shadowLink.href = 'https://unpkg.com/maplibre-gl@4.1.2/dist/maplibre-gl.css';
|
|
shadowLink.setAttribute('data-maplibre-css', '');
|
|
this.shadow.prepend(shadowLink);
|
|
}
|
|
|
|
const ml = (window as any).maplibregl;
|
|
if (!ml) return;
|
|
|
|
// Clear placeholder
|
|
const placeholder = container.querySelector('.map-placeholder');
|
|
if (placeholder) placeholder.remove();
|
|
|
|
if (!this._mapInstance) {
|
|
this._mapInstance = new ml.Map({
|
|
container,
|
|
style: {
|
|
version: 8,
|
|
sources: { osm: { type: 'raster', tiles: ['https://tile.openstreetmap.org/{z}/{x}/{y}.png'], tileSize: 256, attribution: '© OpenStreetMap' } },
|
|
layers: [{ id: 'osm', type: 'raster', source: 'osm' }],
|
|
},
|
|
center: [0, 20],
|
|
zoom: 1.5,
|
|
});
|
|
// Dark filter
|
|
this._mapInstance.on('load', () => {
|
|
this._mapInstance?.getCanvas()?.style && (this._mapInstance.getCanvas().style.filter = 'brightness(0.7) contrast(1.1)');
|
|
this.updateMapPinsAndRoutes();
|
|
});
|
|
} else {
|
|
this.updateMapPinsAndRoutes();
|
|
}
|
|
}
|
|
|
|
private updateMapPinsAndRoutes() {
|
|
const ml = (window as any).maplibregl;
|
|
if (!this._mapInstance || !ml) return;
|
|
|
|
// Clear existing markers
|
|
for (const m of this._mapMarkers) m.remove();
|
|
this._mapMarkers = [];
|
|
|
|
// Add pins
|
|
for (const pin of this._mapPins) {
|
|
const el = document.createElement('div');
|
|
el.style.cssText = `width:12px;height:12px;background:${pin.color || '#14b8a6'};border:2px solid white;border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,0.3);cursor:pointer;`;
|
|
const marker = new ml.Marker({ element: el })
|
|
.setLngLat([pin.lng, pin.lat])
|
|
.setPopup(new ml.Popup({ offset: 8, closeButton: false }).setText(pin.label))
|
|
.addTo(this._mapInstance);
|
|
this._mapMarkers.push(marker);
|
|
}
|
|
|
|
// Add route lines
|
|
for (let i = 0; i < this._mapRoutes.length; i++) {
|
|
const sourceId = `route-${i}`;
|
|
const layerId = `route-line-${i}`;
|
|
if (this._mapInstance.getSource(sourceId)) {
|
|
(this._mapInstance.getSource(sourceId) as any).setData({ type: 'Feature', geometry: this._mapRoutes[i], properties: {} });
|
|
} else {
|
|
this._mapInstance.addSource(sourceId, {
|
|
type: 'geojson',
|
|
data: { type: 'Feature', geometry: this._mapRoutes[i], properties: {} },
|
|
});
|
|
this._mapInstance.addLayer({
|
|
id: layerId, type: 'line', source: sourceId,
|
|
paint: { 'line-color': '#14b8a6', 'line-width': 3, 'line-opacity': 0.8, 'line-dasharray': [2, 1] },
|
|
});
|
|
}
|
|
}
|
|
|
|
// Fit bounds if we have pins
|
|
if (this._mapPins.length > 0) {
|
|
const bounds = new ml.LngLatBounds();
|
|
for (const pin of this._mapPins) bounds.extend([pin.lng, pin.lat]);
|
|
this._mapInstance.fitBounds(bounds, { padding: 40, maxZoom: 12, duration: 800 });
|
|
}
|
|
}
|
|
|
|
private destroyMap() {
|
|
if (this._mapInstance) {
|
|
try { this._mapInstance.remove(); } catch {}
|
|
this._mapInstance = null;
|
|
}
|
|
this._mapMarkers = [];
|
|
}
|
|
|
|
private esc(s: string): string {
|
|
const d = document.createElement("div");
|
|
d.textContent = s || "";
|
|
return d.innerHTML;
|
|
}
|
|
}
|
|
|
|
customElements.define("folk-trips-planner", FolkTripsPlanner);
|