@adecore/agents-react 0.31.11 → 0.32.0

package/dist/chat/ui/intelligent-ui/renderers/map-view.js

@@ -1,4 +1,3 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import 'maplibre-gl/dist/maplibre-gl.css';
 import { useEffect, useRef, useState } from 'react';
 import { Map as MapLibreMap, Marker, setWorkerUrl } from 'maplibre-gl';
@@ -8,6 +7,8 @@ import { ButtonGroup, IconButton } from '@adecore/ui';
 import { useChatHost } from '../../../../host.js';
 import { watchTheme } from '../../theme-watch.js';
 import { baseMapStyle, boundsOf, localizedTextField, mapFitOptions, spreadOverlaps } from './map-style.js';
+import { useHostCodeMode } from '../../../../host-hooks.js';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const MARKER = 'flex size-5 items-center justify-center rounded-full bg-map-marker text-xs text-map-marker-text tabular-nums shadow-raised';
 const PICKED = 'z-1 bg-accent text-accent-text outline-2 outline-surface';
 // A tile that fails this many times with none loading in between leaves the map empty, so the outline stands in.
@@ -19,231 +20,295 @@ let workerUrlSet = null;
  * host hands the address from its own source.
  */
 function ensureBundledWorker(hosted) {
-    const url = hosted ?? new URL('maplibre-gl/dist/maplibre-gl-worker.mjs', import.meta.url).href;
-    if (url !== workerUrlSet) {
-        setWorkerUrl(url);
-        workerUrlSet = url;
-    }
+  const url = hosted ?? new URL('maplibre-gl/dist/maplibre-gl-worker.mjs', import.meta.url).href;
+  if (url !== workerUrlSet) {
+    setWorkerUrl(url);
+    workerUrlSet = url;
+  }
 }
 /* The grounds of the built-in map are theme tokens, which the page resolves; the style needs plain colors. */
 function readColors(element) {
-    const style = getComputedStyle(element);
-    return { land: style.getPropertyValue('--map-land').trim() || 'transparent', water: style.getPropertyValue('--map-water').trim() || 'transparent' };
+  const style = getComputedStyle(element);
+  return {
+    land: style.getPropertyValue('--map-land').trim() || 'transparent',
+    water: style.getPropertyValue('--map-water').trim() || 'transparent'
+  };
 }
 /*
  * The map itself, in the chunk that holds MapLibre. It draws the host's tiles when the source has them
  * and the outline of the world otherwise, also when the tiles turn out to be out of reach. Its
  * canvas is hidden from assistive technology, since the list of places beside it says the same.
  */
-export function MapView({ markers, source, selected, onPick, onStatus }) {
-    const { t, i18n } = useTranslation('agent-chat');
-    const host = useChatHost();
-    const mode = host.code.useMode();
-    const workerUrl = host.maps?.workerUrl;
-    const element = useRef(null);
-    const [map, setMap] = useState(null);
-    const [outline, setOutline] = useState(false);
-    const latest = useRef({ source, onStatus, onPick });
-    useEffect(() => {
-        latest.current = { source, onStatus, onPick };
-    });
-    const language = i18n.language.split('-')[0] ?? 'en';
-    const styleKey = `${mode}:${source.state === 'tiles' ? source.styleUrl(mode) : 'outline'}`;
-    const pointsKey = JSON.stringify(markers.map((marker) => [marker.id, marker.lat, marker.lon]));
-    useEffect(() => {
-        const container = element.current;
-        if (container === null) {
-            return;
-        }
-        const current = latest.current.source;
-        let colors = readColors(container);
-        const offline = current.state === 'tiles' && typeof navigator !== 'undefined' && navigator.onLine === false;
-        const tiles = current.state === 'tiles' && !offline;
-        let created;
-        try {
-            ensureBundledWorker(workerUrl);
-            created = new MapLibreMap({
-                container,
-                style: current.state === 'tiles' && tiles ? current.styleUrl(mode) : baseMapStyle(colors),
-                center: [0, 20],
-                zoom: 1,
-                keyboard: false,
-                cooperativeGestures: true,
-                attributionControl: false,
-                dragRotate: false,
-                pitchWithRotate: false,
-                locale: {
-                    'CooperativeGesturesHandler.WindowsHelpText': t('blocks.map.scrollHint'),
-                    'CooperativeGesturesHandler.MacHelpText': t('blocks.map.scrollHint'),
-                    'CooperativeGesturesHandler.MobileHelpText': t('blocks.map.touchHint')
-                },
-                transformRequest: (url) => {
-                    const now = latest.current.source;
-                    return now.state === 'tiles' && now.transformRequest ? now.transformRequest(url) : { url };
-                }
-            });
-        }
-        catch {
-            latest.current.onStatus('failed');
-            return;
-        }
-        created.touchZoomRotate.disableRotation();
-        const canvas = created.getCanvas();
-        canvas.tabIndex = -1;
-        const wantsTiles = current.state === 'tiles';
-        let drawing = tiles ? 'tiles' : 'outline';
-        // Why the outline is drawn in place of tiles that were asked for; null while the tiles are.
-        let reason = wantsTiles && !tiles ? 'offline' : null;
-        let styleLoaded = false;
-        let restoring = false;
-        let tileErrors = 0;
-        setOutline(!tiles);
-        latest.current.onStatus(tiles ? 'loading' : wantsTiles ? 'offline' : 'base');
-        const drawOutline = (why) => {
-            if (drawing === 'outline' || !wantsTiles) {
-                return;
-            }
-            drawing = 'outline';
-            reason = why;
-            setOutline(true);
-            created.setStyle(baseMapStyle(colors));
-            latest.current.onStatus(why);
-        };
-        const drawTiles = () => {
-            if (current.state !== 'tiles') {
-                return;
-            }
-            drawing = 'tiles';
-            reason = null;
-            styleLoaded = false;
-            restoring = true;
-            tileErrors = 0;
-            setOutline(false);
-            created.setStyle(current.styleUrl(mode));
-            latest.current.onStatus('loading');
-        };
-        const unreachable = () => (typeof navigator !== 'undefined' && navigator.onLine === false ? 'offline' : 'unavailable');
-        created.on('style.load', () => {
-            if (drawing !== 'tiles') {
-                return;
-            }
-            styleLoaded = true;
-            if (restoring) {
-                restoring = false;
-                latest.current.onStatus('tiles');
-            }
-            const field = current.state === 'tiles' ? current.labelField?.(language) : undefined;
-            if (field === undefined) {
-                return;
-            }
-            for (const layer of created.getStyle().layers) {
-                const textField = layer.type === 'symbol' ? layer.layout?.['text-field'] : undefined;
-                if (textField !== undefined) {
-                    created.setLayoutProperty(layer.id, 'text-field', localizedTextField(textField, field));
-                }
-            }
-        });
-        created.on('load', () => {
-            if (drawing === 'tiles') {
-                latest.current.onStatus('tiles');
-            }
-        });
-        created.on('sourcedata', (event) => {
-            if ('tile' in event) {
-                tileErrors = 0;
-            }
-        });
-        created.on('error', (event) => {
-            if (drawing !== 'tiles') {
-                return;
-            }
-            // Before the style is here there is nothing to draw. After it, a tile the host refuses (a ticket
-            // that ran out) or several in a row leave an empty map; a single one the map retries itself.
-            const status = event.error?.status;
-            if (!styleLoaded || status === 401 || status === 403 || ++tileErrors >= TILE_ERRORS_IN_A_ROW) {
-                drawOutline(unreachable());
-            }
-        });
-        const goOffline = () => drawOutline('offline');
-        const goOnline = () => {
-            if (reason === 'offline') {
-                drawTiles();
-            }
-        };
-        const contextLost = () => latest.current.onStatus('lost');
-        if (wantsTiles) {
-            window.addEventListener('offline', goOffline);
-            window.addEventListener('online', goOnline);
-        }
-        canvas.addEventListener('webglcontextlost', contextLost);
-        // Colors that change within the side repaint the outline in place: a style that differs only in its paint is
-        // applied as a diff, so the map, its camera and its markers stay. The tiles draw colors of their own.
-        const stopWatching = watchTheme(container.ownerDocument, () => {
-            const next = readColors(container);
-            if (next.land === colors.land && next.water === colors.water) {
-                return;
-            }
-            colors = next;
-            if (drawing === 'outline') {
-                created.setStyle(baseMapStyle(colors));
-            }
-        });
-        setMap(created);
-        return () => {
-            stopWatching();
-            window.removeEventListener('offline', goOffline);
-            window.removeEventListener('online', goOnline);
-            canvas.removeEventListener('webglcontextlost', contextLost);
-            setMap(null);
-            created.remove();
-        };
-        // The map is made again when the style it draws changes, and not for any other change of the source.
-        // oxlint-disable-next-line react-hooks/exhaustive-deps
-    }, [styleKey, language]);
-    useEffect(() => {
-        const bounds = boundsOf(markers);
-        if (map === null || bounds === null) {
-            return;
-        }
-        map.fitBounds(bounds, { ...mapFitOptions(outline), duration: 0 });
-        // The points are compared by their coordinates, so a render that rebuilt the same list does not move the map.
-        // oxlint-disable-next-line react-hooks/exhaustive-deps
-    }, [map, pointsKey, outline]);
-    const pickable = onPick !== null;
-    useEffect(() => {
-        if (map === null) {
-            return;
+export function MapView({
+  markers,
+  source,
+  selected,
+  onPick,
+  onStatus
+}) {
+  const {
+    t,
+    i18n
+  } = useTranslation('agent-chat');
+  const host = useChatHost();
+  const mode = useHostCodeMode();
+  const workerUrl = host.maps?.workerUrl;
+  const element = useRef(null);
+  const [map, setMap] = useState(null);
+  const [outline, setOutline] = useState(false);
+  const latest = useRef({
+    source,
+    onStatus,
+    onPick
+  });
+  useEffect(() => {
+    latest.current = {
+      source,
+      onStatus,
+      onPick
+    };
+  });
+  const language = i18n.language.split('-')[0] ?? 'en';
+  const styleKey = `${mode}:${source.state === 'tiles' ? source.styleUrl(mode) : 'outline'}`;
+  const pointsKey = JSON.stringify(markers.map(marker => [marker.id, marker.lat, marker.lon]));
+  useEffect(() => {
+    const container = element.current;
+    if (container === null) {
+      return;
+    }
+    const current = latest.current.source;
+    let colors = readColors(container);
+    const offline = current.state === 'tiles' && typeof navigator !== 'undefined' && navigator.onLine === false;
+    const tiles = current.state === 'tiles' && !offline;
+    let created;
+    try {
+      ensureBundledWorker(workerUrl);
+      created = new MapLibreMap({
+        container,
+        style: current.state === 'tiles' && tiles ? current.styleUrl(mode) : baseMapStyle(colors),
+        center: [0, 20],
+        zoom: 1,
+        keyboard: false,
+        cooperativeGestures: true,
+        attributionControl: false,
+        dragRotate: false,
+        pitchWithRotate: false,
+        locale: {
+          'CooperativeGesturesHandler.WindowsHelpText': t('blocks.map.scrollHint'),
+          'CooperativeGesturesHandler.MacHelpText': t('blocks.map.scrollHint'),
+          'CooperativeGesturesHandler.MobileHelpText': t('blocks.map.touchHint')
+        },
+        transformRequest: url => {
+          const now = latest.current.source;
+          return now.state === 'tiles' && now.transformRequest ? now.transformRequest(url) : {
+            url
+          };
         }
-        const drawn = markers.map((marker) => {
-            const node = document.createElement('div');
-            node.setAttribute('aria-hidden', 'true');
-            node.dataset.mapMarker = marker.id;
-            node.className = `${MARKER} ${marker.id === selected ? PICKED : ''} ${pickable ? 'cursor-pointer' : ''}`;
-            node.textContent = String(marker.number);
-            node.addEventListener('click', () => latest.current.onPick?.(marker.id));
-            return { marker, drawing: new Marker({ element: node }).setLngLat([marker.lon, marker.lat]).addTo(map) };
-        });
-        const spread = () => {
-            const offsets = spreadOverlaps(drawn.map(({ marker }) => ({ id: marker.id, ...map.project([marker.lon, marker.lat]) })));
-            for (const { marker, drawing } of drawn) {
-                drawing.setOffset(offsets.get(marker.id) ?? [0, 0]);
-            }
-        };
-        spread();
-        map.on('zoomend', spread);
-        return () => {
-            map.off('zoomend', spread);
-            for (const { drawing } of drawn) {
-                drawing.remove();
-            }
-        };
-        // oxlint-disable-next-line react-hooks/exhaustive-deps
-    }, [map, pointsKey, selected, pickable]);
-    const showAll = () => {
-        const bounds = boundsOf(markers);
-        if (map !== null && bounds !== null) {
-            map.fitBounds(bounds, mapFitOptions(outline));
+      });
+    } catch {
+      latest.current.onStatus('failed');
+      return;
+    }
+    created.touchZoomRotate.disableRotation();
+    const canvas = created.getCanvas();
+    canvas.tabIndex = -1;
+    const wantsTiles = current.state === 'tiles';
+    let drawing = tiles ? 'tiles' : 'outline';
+    // Why the outline is drawn in place of tiles that were asked for; null while the tiles are.
+    let reason = wantsTiles && !tiles ? 'offline' : null;
+    let styleLoaded = false;
+    let restoring = false;
+    let tileErrors = 0;
+    setOutline(!tiles);
+    latest.current.onStatus(tiles ? 'loading' : wantsTiles ? 'offline' : 'base');
+    const drawOutline = why => {
+      if (drawing === 'outline' || !wantsTiles) {
+        return;
+      }
+      drawing = 'outline';
+      reason = why;
+      setOutline(true);
+      created.setStyle(baseMapStyle(colors));
+      latest.current.onStatus(why);
+    };
+    const drawTiles = () => {
+      if (current.state !== 'tiles') {
+        return;
+      }
+      drawing = 'tiles';
+      reason = null;
+      styleLoaded = false;
+      restoring = true;
+      tileErrors = 0;
+      setOutline(false);
+      created.setStyle(current.styleUrl(mode));
+      latest.current.onStatus('loading');
+    };
+    const unreachable = () => typeof navigator !== 'undefined' && navigator.onLine === false ? 'offline' : 'unavailable';
+    created.on('style.load', () => {
+      if (drawing !== 'tiles') {
+        return;
+      }
+      styleLoaded = true;
+      if (restoring) {
+        restoring = false;
+        latest.current.onStatus('tiles');
+      }
+      const field = current.state === 'tiles' ? current.labelField?.(language) : undefined;
+      if (field === undefined) {
+        return;
+      }
+      for (const layer of created.getStyle().layers) {
+        const textField = layer.type === 'symbol' ? layer.layout?.['text-field'] : undefined;
+        if (textField !== undefined) {
+          created.setLayoutProperty(layer.id, 'text-field', localizedTextField(textField, field));
         }
+      }
+    });
+    created.on('load', () => {
+      if (drawing === 'tiles') {
+        latest.current.onStatus('tiles');
+      }
+    });
+    created.on('sourcedata', event => {
+      if ('tile' in event) {
+        tileErrors = 0;
+      }
+    });
+    created.on('error', event_0 => {
+      if (drawing !== 'tiles') {
+        return;
+      }
+      // Before the style is here there is nothing to draw. After it, a tile the host refuses (a ticket
+      // that ran out) or several in a row leave an empty map; a single one the map retries itself.
+      const status = event_0.error?.status;
+      if (!styleLoaded || status === 401 || status === 403 || ++tileErrors >= TILE_ERRORS_IN_A_ROW) {
+        drawOutline(unreachable());
+      }
+    });
+    const goOffline = () => drawOutline('offline');
+    const goOnline = () => {
+      if (reason === 'offline') {
+        drawTiles();
+      }
     };
-    return (_jsxs("div", { className: "absolute inset-0", children: [_jsx("div", { ref: element, "aria-hidden": true, className: "size-full" }), _jsxs(ButtonGroup, { className: "absolute top-2 right-2 rounded-md border border-border bg-surface-raised shadow-raised", children: [_jsx(IconButton, { icon: Plus, size: "sm", label: t('blocks.map.zoomIn'), onClick: () => map?.zoomIn() }), _jsx(IconButton, { icon: Minus, size: "sm", label: t('blocks.map.zoomOut'), onClick: () => map?.zoomOut() }), markers.length > 1 && _jsx(IconButton, { icon: Maximize, size: "sm", label: t('blocks.map.showAll'), onClick: showAll })] })] }));
-}
+    const contextLost = () => latest.current.onStatus('lost');
+    if (wantsTiles) {
+      window.addEventListener('offline', goOffline);
+      window.addEventListener('online', goOnline);
+    }
+    canvas.addEventListener('webglcontextlost', contextLost);
+    // Colors that change within the side repaint the outline in place: a style that differs only in its paint is
+    // applied as a diff, so the map, its camera and its markers stay. The tiles draw colors of their own.
+    const stopWatching = watchTheme(container.ownerDocument, () => {
+      const next = readColors(container);
+      if (next.land === colors.land && next.water === colors.water) {
+        return;
+      }
+      colors = next;
+      if (drawing === 'outline') {
+        created.setStyle(baseMapStyle(colors));
+      }
+    });
+    setMap(created);
+    return () => {
+      stopWatching();
+      window.removeEventListener('offline', goOffline);
+      window.removeEventListener('online', goOnline);
+      canvas.removeEventListener('webglcontextlost', contextLost);
+      setMap(null);
+      created.remove();
+    };
+    // The map is made again when the style it draws changes, and not for any other change of the source.
+    // oxlint-disable-next-line react-hooks/exhaustive-deps
+  }, [styleKey, language]);
+  useEffect(() => {
+    const bounds = boundsOf(markers);
+    if (map === null || bounds === null) {
+      return;
+    }
+    map.fitBounds(bounds, {
+      ...mapFitOptions(outline),
+      duration: 0
+    });
+    // The points are compared by their coordinates, so a render that rebuilt the same list does not move the map.
+    // oxlint-disable-next-line react-hooks/exhaustive-deps
+  }, [map, pointsKey, outline]);
+  const pickable = onPick !== null;
+  useEffect(() => {
+    if (map === null) {
+      return;
+    }
+    const drawn = markers.map(marker_0 => {
+      const node = document.createElement('div');
+      node.setAttribute('aria-hidden', 'true');
+      node.dataset.mapMarker = marker_0.id;
+      node.className = `${MARKER} ${marker_0.id === selected ? PICKED : ''} ${pickable ? 'cursor-pointer' : ''}`;
+      node.textContent = String(marker_0.number);
+      node.addEventListener('click', () => latest.current.onPick?.(marker_0.id));
+      return {
+        marker: marker_0,
+        drawing: new Marker({
+          element: node
+        }).setLngLat([marker_0.lon, marker_0.lat]).addTo(map)
+      };
+    });
+    const spread = () => {
+      const offsets = spreadOverlaps(drawn.map(({
+        marker: marker_1
+      }) => ({
+        id: marker_1.id,
+        ...map.project([marker_1.lon, marker_1.lat])
+      })));
+      for (const {
+        marker: marker_2,
+        drawing: drawing_0
+      } of drawn) {
+        drawing_0.setOffset(offsets.get(marker_2.id) ?? [0, 0]);
+      }
+    };
+    spread();
+    map.on('zoomend', spread);
+    return () => {
+      map.off('zoomend', spread);
+      for (const {
+        drawing: drawing_1
+      } of drawn) {
+        drawing_1.remove();
+      }
+    };
+    // oxlint-disable-next-line react-hooks/exhaustive-deps
+  }, [map, pointsKey, selected, pickable]);
+  const showAll = () => {
+    const bounds_0 = boundsOf(markers);
+    if (map !== null && bounds_0 !== null) {
+      map.fitBounds(bounds_0, mapFitOptions(outline));
+    }
+  };
+  return /*#__PURE__*/_jsxs("div", {
+    className: "absolute inset-0",
+    children: [/*#__PURE__*/_jsx("div", {
+      ref: element,
+      "aria-hidden": true,
+      className: "size-full"
+    }), /*#__PURE__*/_jsxs(ButtonGroup, {
+      className: "absolute top-2 right-2 rounded-md border border-border bg-surface-raised shadow-raised",
+      children: [/*#__PURE__*/_jsx(IconButton, {
+        icon: Plus,
+        size: "sm",
+        label: t('blocks.map.zoomIn'),
+        onClick: () => map?.zoomIn()
+      }), /*#__PURE__*/_jsx(IconButton, {
+        icon: Minus,
+        size: "sm",
+        label: t('blocks.map.zoomOut'),
+        onClick: () => map?.zoomOut()
+      }), markers.length > 1 && /*#__PURE__*/_jsx(IconButton, {
+        icon: Maximize,
+        size: "sm",
+        label: t('blocks.map.showAll'),
+        onClick: showAll
+      })]
+    })]
+  });
+}