webmcp-demo/declarative.html at main · khushalsagar/webmcp-demo · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flight Booking (Declarative Form Version)</title>
    <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>✈️</text></svg>">
    <link rel="stylesheet" href="styles.css">
    <script>window.is_declarative_tool = true;</script>
    <script src="script.js" defer></script>
</head>
<body>
    <div class="container" id="searchPage">
        <h2 id="webmcp-support-message"></h2>

        <div class="simulation-settings">
            <div class="settings-grid">
                <div style="margin-bottom: 0;">
                    <label for="latencyInput">Tool Execution Latency (ms)</label>
                    <input type="number" id="latencyInput" placeholder="0" min="0" step="100" value="0">
                </div>
                <div class="settings-checkbox">
                    <input type="checkbox" id="toolBugWorkaround" checked>
                    <label for="toolBugWorkaround">Tool declaration bug workaround</label>
                </div>
                <div class="settings-checkbox">
                    <input type="checkbox" id="spaMode">
                    <label for="spaMode">Use SPA form submission</label>
                </div>
            </div>
        </div>

        <h1>✈️ Book Your Flight (Declarative Version)</h1>
        <p class="subtitle">Find the best flights for your journey</p>

        <form id="flightForm" toolname="search_flights"
                tooldescription="Search for available flights between cities. Returns detailed
                flight information including airline, price, times, stops, duration, aircraft type,
                amenities, and seat details.">
            <div class="form-group">
                <label for="origin">Origin City</label>
                <input type="text" id="origin" name="origin" placeholder="e.g., New York" required>
            </div>

            <div class="form-group">
                <label for="destination">Destination City</label>
                <input type="text" id="destination" name="destination" placeholder="e.g., Los Angeles" required>
            </div>

            <div class="form-group">
                <label for="departureDate">Departure Date</label>
                <input type="date" id="departureDate" name="departureDate" required>
            </div>

            <div class="checkbox-group">
                <input type="checkbox" id="oneWay">
                <label for="oneWay">One-way trip</label>
            </div>

            <div class="form-group" id="returnDateGroup">
                <label for="returnDate">Return Date</label>
                <input type="date" id="returnDate" name="returnDate">
            </div>

            <div class="form-group">
                <label for="passengers">Number of Passengers</label>
                <select id="passengers" name="passengers" required>
                    <option value="1">1 Passenger</option>
                    <option value="2">2 Passengers</option>
                    <option value="3">3 Passengers</option>
                    <option value="4">4 Passengers</option>
                    <option value="5">5 Passengers</option>
                    <option value="6">6 Passengers</option>
                    <option value="7">7 Passengers</option>
                    <option value="8">8 Passengers</option>
                </select>
            </div>

            <button type="submit">Search Flights</button>
        </form>
    </div>

    <div class="container results-container hidden" id="resultsPage">
        <button class="back-button" id="backButton">← Back to Search</button>

        <div class="search-summary" id="searchSummary"></div>

        <h1>Available Flights</h1>
        <p class="subtitle" id="resultsCount"></p>

        <div id="flightResults"></div>

        <div class="pagination">
            <button id="prevButton" disabled>Previous</button>
            <span class="page-info" id="pageInfo"></span>
            <button id="nextButton">Next</button>
        </div>
    </div>
    <script>
        window.addEventListener('DOMContentLoaded', () => {
            const form = document.getElementById('flightForm');
            const spaCheckbox = document.getElementById('spaMode');

            if (form && spaCheckbox) {
                form.addEventListener('submit', (e) => {
                    if (spaCheckbox.checked) {
                        e.preventDefault();

                        const formData = new FormData(form);
                        const searchParams = {
                            origin: formData.get('origin'),
                            destination: formData.get('destination'),
                            departureDate: formData.get('departureDate'),
                            returnDate: formData.get('returnDate'),
                            passengers: parseInt(formData.get('passengers'))
                        };

                        if (!searchParams.returnDate) {
                            searchParams.returnDate = undefined;
                        }

                        const promise = window.searchFlights(searchParams);

                        if (typeof e.respondWith === 'function') {
                            e.respondWith(promise);
                        }
                    }
                });
            }
        });
    </script>
</body>
</html>