mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-10-24 16:03:02 +00:00
Maurice
b64da26651
Adds an in-app assistant that reads and plans the open trip. Users connect their own provider (Sign in with ChatGPT, or an Anthropic, OpenAI, Gemini or OpenRouter key) or use the one the admin set up, including a custom OpenAI-compatible server. It is an addon and only shows while a connection is usable. The chat runs on the existing MCP tools, pinned to the trip. Every change is held as a change card the user applies or discards, and applied changes can be undone. On the desktop it is a floating window that can be moved and resized; on the phone it is fullscreen. Search results show as place cards that can go onto a day, weather lookups as a strip, proposed places as ghost markers on the map with a before/after switch, and an answer can be shared into the trip chat. Booking files can be dropped in and are read into change cards.
101 lines
3.9 KiB
TypeScript
101 lines
3.9 KiB
TypeScript
/**
|
|
* FE-MAP-ASSIST-LEAFLET-001 to 003
|
|
*
|
|
* The assistant on the Leaflet map, against real Leaflet: ghosts outside the
|
|
* clusters that only change a class on hover, a camera that frames with the
|
|
* same scale limit as a day fit and skips the request it mounted with, and
|
|
* the pop on a real pin.
|
|
*/
|
|
import L from 'leaflet';
|
|
import { MapContainer } from 'react-leaflet';
|
|
import { afterAll, afterEach, beforeAll, describe, expect, it, vi } from 'vitest';
|
|
import { act, render } from '../../../tests/helpers/render';
|
|
import { MAX_ZOOM_RASTER } from '../../utils/mapViewport';
|
|
import { AssistantMapLeaflet } from './AssistantMapLeaflet';
|
|
import type { AssistantCamera, AssistantMapProps } from './mapViewContract';
|
|
|
|
const PADDING = { top: 60, right: 40, bottom: 60, left: 40 };
|
|
const NO_PIN = () => null;
|
|
|
|
const sized = ['clientWidth', 'clientHeight'] as const;
|
|
const originals = new Map<string, PropertyDescriptor | undefined>();
|
|
beforeAll(() => {
|
|
for (const key of sized) {
|
|
originals.set(key, Object.getOwnPropertyDescriptor(HTMLElement.prototype, key));
|
|
Object.defineProperty(HTMLElement.prototype, key, {
|
|
configurable: true,
|
|
get: () => (key === 'clientWidth' ? 1000 : 700),
|
|
});
|
|
}
|
|
});
|
|
afterAll(() => {
|
|
for (const key of sized) {
|
|
const original = originals.get(key);
|
|
if (original) Object.defineProperty(HTMLElement.prototype, key, original);
|
|
else delete (HTMLElement.prototype as unknown as Record<string, unknown>)[key];
|
|
}
|
|
});
|
|
afterEach(() => vi.restoreAllMocks());
|
|
|
|
function onMap(assistant: AssistantMapProps, markerEl: (id: number) => HTMLElement | null = NO_PIN) {
|
|
return (
|
|
<MapContainer center={[41.9, 12.5]} zoom={12} style={{ width: 1000, height: 700 }}>
|
|
<AssistantMapLeaflet assistant={assistant} padding={PADDING} markerEl={markerEl} />
|
|
</MapContainer>
|
|
);
|
|
}
|
|
|
|
const GHOSTS = [{ id: 'c1', lat: 41.9, lng: 12.48, name: 'Pantheon' }];
|
|
|
|
describe('AssistantMapLeaflet', () => {
|
|
it('FE-MAP-ASSIST-LEAFLET-001: a ghost stands on the map and is marked while its suggestion is hovered', () => {
|
|
const onHover = vi.fn();
|
|
const view = render(onMap({ assistantGhosts: GHOSTS, assistantHoveredId: null, onAssistantGhostHover: onHover }));
|
|
const ghost = view.container.querySelector<HTMLElement>('.trek-ghost');
|
|
expect(ghost?.getAttribute('aria-label')).toBe('Pantheon');
|
|
ghost?.dispatchEvent(new Event('pointerenter'));
|
|
expect(onHover).toHaveBeenCalledWith('c1');
|
|
|
|
view.rerender(onMap({ assistantGhosts: GHOSTS, assistantHoveredId: 'c1', onAssistantGhostHover: onHover }));
|
|
expect(view.container.querySelectorAll('.trek-ghost')).toHaveLength(1);
|
|
expect(view.container.querySelector('.trek-ghost')).toBe(ghost);
|
|
expect(ghost?.classList.contains('is-hot')).toBe(true);
|
|
});
|
|
|
|
it('FE-MAP-ASSIST-LEAFLET-002: the camera skips the request it mounted with and frames a new one', () => {
|
|
const fit = vi.spyOn(L.Map.prototype, 'fitBounds');
|
|
const cam = (key: string): AssistantCamera => ({
|
|
key,
|
|
points: [
|
|
[41.8, 12.4],
|
|
[42, 12.6],
|
|
],
|
|
mode: 'fit',
|
|
animate: false,
|
|
auto: false,
|
|
cover: { side: 'left', px: 400 },
|
|
});
|
|
const view = render(onMap({ assistantCamera: cam('1') }));
|
|
expect(fit).not.toHaveBeenCalled();
|
|
|
|
view.rerender(onMap({ assistantCamera: cam('2') }));
|
|
expect(fit).toHaveBeenCalledOnce();
|
|
expect(fit.mock.calls[0]?.[1]).toMatchObject({
|
|
paddingTopLeft: [400, 60],
|
|
paddingBottomRight: [40, 60],
|
|
maxZoom: MAX_ZOOM_RASTER,
|
|
animate: false,
|
|
});
|
|
});
|
|
|
|
it('FE-MAP-ASSIST-LEAFLET-003: a place that just arrived pops on its own pin', async () => {
|
|
const pin = document.createElement('div');
|
|
pin.appendChild(document.createElement('div'));
|
|
render(onMap({ poppedPlaceIds: [5] }, (id) => (id === 5 ? pin : null)));
|
|
await act(async () => {
|
|
await new Promise((resolve) => requestAnimationFrame(() => resolve(null)));
|
|
});
|
|
expect(pin.classList.contains('trek-place-pop')).toBe(true);
|
|
});
|
|
});
|