zenit-sdk 0.0.5 → 0.0.6

package/dist/index.mjs

@@ -35,7 +35,7 @@ import {
   sendMessageStream,
   useSendMessage,
   useSendMessageStream
-} from "./chunk-LX2N2BXV.mjs";
+} from "./chunk-R73LRYVJ.mjs";
 
 // src/http/HttpClient.ts
 var HttpClient = class {

package/dist/react/index.d.mts

@@ -1,4 +1,4 @@
-export { an as FloatingChatBox, ao as FloatingChatBoxProps, aj as LayerSnapshot, ar as LayerStyle, am as ZenitFeatureFilterPanel, al as ZenitLayerManager, ah as ZenitMap, ak as ZenitMapProps, ai as ZenitMapRef, aw as ZoomOpacityOptions, ax as clampNumber, ay as clampOpacity, av as getAccentByLayerId, aC as getEffectiveLayerOpacity, at as getLayerColor, aB as getLayerZoomOpacityFactor, au as getStyleByLayerId, aA as getZoomOpacityFactor, az as isPolygonLayer, as as resolveLayerAccent, ap as useSendMessage, aq as useSendMessageStream } from '../index-kGwfqTc_.mjs';
+export { an as FloatingChatBox, ao as FloatingChatBoxProps, aj as LayerSnapshot, ar as LayerStyle, am as ZenitFeatureFilterPanel, al as ZenitLayerManager, ah as ZenitMap, ak as ZenitMapProps, ai as ZenitMapRef, aw as ZoomOpacityOptions, ax as clampNumber, ay as clampOpacity, av as getAccentByLayerId, aC as getEffectiveLayerOpacity, at as getLayerColor, aB as getLayerZoomOpacityFactor, au as getStyleByLayerId, aA as getZoomOpacityFactor, az as isPolygonLayer, as as resolveLayerAccent, ap as useSendMessage, aq as useSendMessageStream } from '../index-Da0hFqDL.mjs';
 export { ChevronLeft, ChevronRight, Eye, EyeOff, Layers, Upload, X, ZoomIn } from 'lucide-react';
 import 'react';
 import 'leaflet';

package/dist/react/index.d.ts

@@ -1,4 +1,4 @@
-export { an as FloatingChatBox, ao as FloatingChatBoxProps, aj as LayerSnapshot, ar as LayerStyle, am as ZenitFeatureFilterPanel, al as ZenitLayerManager, ah as ZenitMap, ak as ZenitMapProps, ai as ZenitMapRef, aw as ZoomOpacityOptions, ax as clampNumber, ay as clampOpacity, av as getAccentByLayerId, aC as getEffectiveLayerOpacity, at as getLayerColor, aB as getLayerZoomOpacityFactor, au as getStyleByLayerId, aA as getZoomOpacityFactor, az as isPolygonLayer, as as resolveLayerAccent, ap as useSendMessage, aq as useSendMessageStream } from '../index-kGwfqTc_.js';
+export { an as FloatingChatBox, ao as FloatingChatBoxProps, aj as LayerSnapshot, ar as LayerStyle, am as ZenitFeatureFilterPanel, al as ZenitLayerManager, ah as ZenitMap, ak as ZenitMapProps, ai as ZenitMapRef, aw as ZoomOpacityOptions, ax as clampNumber, ay as clampOpacity, av as getAccentByLayerId, aC as getEffectiveLayerOpacity, at as getLayerColor, aB as getLayerZoomOpacityFactor, au as getStyleByLayerId, aA as getZoomOpacityFactor, az as isPolygonLayer, as as resolveLayerAccent, ap as useSendMessage, aq as useSendMessageStream } from '../index-Da0hFqDL.js';
 export { ChevronLeft, ChevronRight, Eye, EyeOff, Layers, Upload, X, ZoomIn } from 'lucide-react';
 import 'react';
 import 'leaflet';

package/dist/react/index.js

@@ -58,7 +58,7 @@ __export(react_exports, {
 module.exports = __toCommonJS(react_exports);
 
 // src/react/ZenitMap.tsx
-var import_react = __toESM(require("react"));
+var import_react = require("react");
 var import_react_leaflet = require("react-leaflet");
 var import_leaflet = __toESM(require("leaflet"));
 
@@ -344,121 +344,6 @@ function getFeatureLayerId(feature) {
 function escapeHtml(value) {
   return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
-var DESCRIPTION_KEYS = /* @__PURE__ */ new Set(["descripcion", "description"]);
-function normalizeDescriptionValue(value) {
-  if (value === void 0 || value === null) return null;
-  if (typeof value === "string") {
-    const trimmed = value.trim();
-    return trimmed ? trimmed : null;
-  }
-  if (typeof value === "number" || typeof value === "boolean") {
-    return String(value);
-  }
-  return null;
-}
-function extractDescriptionValue(properties) {
-  if (!properties) return null;
-  const matches = Object.entries(properties).find(
-    ([key]) => DESCRIPTION_KEYS.has(key.toLowerCase())
-  );
-  if (!matches) return null;
-  return normalizeDescriptionValue(matches[1]);
-}
-function safeJsonStringify(value) {
-  try {
-    const json = JSON.stringify(value, null, 2);
-    if (json !== void 0) return json;
-  } catch {
-  }
-  return String(value);
-}
-function renderPropertyValue(value) {
-  if (value === null || value === void 0) {
-    return '<span class="prop-empty">\u2014</span>';
-  }
-  if (typeof value === "object") {
-    const json = safeJsonStringify(value);
-    return `<pre class="prop-json">${escapeHtml(json)}</pre>`;
-  }
-  return `<span class="prop-text">${escapeHtml(String(value))}</span>`;
-}
-var POPUP_TITLE_KEYS = ["name", "title", "nombre", "label", "id"];
-var POPUP_CHIP_KEYS = /* @__PURE__ */ new Set(["churn", "color", "sector"]);
-function isChipValue(value) {
-  return typeof value === "string" || typeof value === "number" || typeof value === "boolean";
-}
-function getSanitizedChipColor(value) {
-  if (typeof value !== "string") return null;
-  const trimmed = value.trim();
-  if (/^#([0-9a-fA-F]{3}){1,2}$/.test(trimmed)) {
-    return trimmed;
-  }
-  if (/^rgb\((\s*\d+\s*,){2}\s*\d+\s*\)$/.test(trimmed)) {
-    return trimmed;
-  }
-  if (/^rgba\((\s*\d+\s*,){3}\s*(0|1|0?\.\d+)\s*\)$/.test(trimmed)) {
-    return trimmed;
-  }
-  return null;
-}
-function getPopupTitle(entries) {
-  for (const candidate of POPUP_TITLE_KEYS) {
-    const match = entries.find((entry) => entry.normalized === candidate);
-    if (!match || match.value === null || match.value === void 0) continue;
-    const value = String(match.value).trim();
-    if (!value) continue;
-    return { title: value, key: match.key };
-  }
-  return null;
-}
-function renderProperties(properties) {
-  const description = extractDescriptionValue(properties);
-  const entries = Object.entries(properties).filter(([key]) => !DESCRIPTION_KEYS.has(key.toLowerCase())).map(([key, value]) => ({
-    key,
-    value,
-    normalized: key.trim().toLowerCase()
-  }));
-  if (!description && entries.length === 0) return "";
-  const titleEntry = getPopupTitle(entries);
-  const titleText = titleEntry?.title ?? "Detalle del elemento";
-  const chipEntries = entries.filter(
-    (entry) => POPUP_CHIP_KEYS.has(entry.normalized) && isChipValue(entry.value)
-  );
-  const listEntries = entries.filter((entry) => {
-    if (titleEntry && entry.key === titleEntry.key) return false;
-    if (chipEntries.find((chip) => chip.key === entry.key)) return false;
-    return true;
-  });
-  const descriptionHtml = description ? `<div class="popup-description">${escapeHtml(description)}</div>` : "";
-  const chipsHtml = chipEntries.length ? `<div class="popup-chip-row">${chipEntries.map((entry) => {
-    const label = escapeHtml(entry.key.replace(/_/g, " "));
-    const value = escapeHtml(String(entry.value));
-    const color = getSanitizedChipColor(entry.value);
-    const colorStyle = color ? ` style="--chip-color: ${color}"` : "";
-    return `<span class="popup-chip"${colorStyle}><span class="popup-chip-label">${label}</span><span class="popup-chip-value">${value}</span></span>`;
-  }).join("")}</div>` : "";
-  const rowsHtml = listEntries.map((entry) => {
-    const label = escapeHtml(entry.key.replace(/_/g, " "));
-    const valueHtml = renderPropertyValue(entry.value);
-    return `<div class="prop-key">${label}</div><div class="prop-value">${valueHtml}</div>`;
-  }).join("");
-  const listHtml = rowsHtml ? `<div class="prop-list">${rowsHtml}</div>` : "";
-  return `
-    <div class="feature-popup">
-      <div class="feature-popup-card">
-        <div class="feature-popup-header">
-          <p class="popup-eyebrow">Informaci\xF3n</p>
-          <h3 class="popup-title">${escapeHtml(titleText)}</h3>
-        </div>
-        <div class="feature-popup-body">
-          ${descriptionHtml}
-          ${chipsHtml}
-          ${listHtml}
-        </div>
-      </div>
-    </div>
-  `;
-}
 function withAlpha(color, alpha) {
   const trimmed = color.trim();
   if (trimmed.startsWith("#")) {
@@ -527,39 +412,40 @@ function getFeatureStyleOverrides(feature) {
 function buildFeaturePopupHtml(feature) {
   const properties = feature?.properties;
   if (!properties) return null;
-  const rendered = renderProperties(properties);
-  return rendered ? rendered : null;
-}
-var POINT_GEOMETRY_TYPES = /* @__PURE__ */ new Set(["Point", "MultiPoint"]);
-function getGeometryType(feature) {
-  const t = feature?.geometry?.type;
-  return typeof t === "string" ? t : null;
-}
-function isPointGeometry(feature) {
-  const geometryType = getGeometryType(feature);
-  return geometryType !== null && POINT_GEOMETRY_TYPES.has(geometryType);
-}
-function isNonPointGeometry(feature) {
-  const geometryType = getGeometryType(feature);
-  return geometryType !== null && !POINT_GEOMETRY_TYPES.has(geometryType);
-}
-function buildFeatureCollection(features) {
-  return {
-    type: "FeatureCollection",
-    features
-  };
-}
-function pickIntersectFeature(baseFeature, candidates) {
-  if (!Array.isArray(candidates) || candidates.length === 0) return null;
-  const baseId = baseFeature?.id;
-  if (baseId !== void 0 && baseId !== null) {
-    const matchById = candidates.find((candidate) => candidate?.id === baseId);
-    if (matchById) return matchById;
+  const layerName = properties.layerName ?? properties.layer_name ?? properties.name;
+  const descripcion = properties.descripcion ?? properties.description;
+  const reservedKeys = /* @__PURE__ */ new Set([
+    "_style",
+    "layerId",
+    "layer_id",
+    "__zenit_layerId",
+    "layerName",
+    "layer_name",
+    "name",
+    "descripcion",
+    "description"
+  ]);
+  const extraEntries = Object.entries(properties).filter(([key, value]) => {
+    if (reservedKeys.has(key)) return false;
+    return ["string", "number", "boolean"].includes(typeof value);
+  }).slice(0, 5);
+  if (!layerName && !descripcion && extraEntries.length === 0) return null;
+  const parts = [];
+  if (layerName) {
+    parts.push(`<div style="font-weight:600;margin-bottom:4px;">${escapeHtml(layerName)}</div>`);
   }
-  const matchWithDescription = candidates.find(
-    (candidate) => extractDescriptionValue(candidate?.properties)
-  );
-  return matchWithDescription ?? candidates[0];
+  if (descripcion) {
+    parts.push(`<div style="margin-bottom:6px;">${escapeHtml(descripcion)}</div>`);
+  }
+  if (extraEntries.length > 0) {
+    const rows = extraEntries.map(([key, value]) => {
+      const label = escapeHtml(key.replace(/_/g, " "));
+      const val = escapeHtml(String(value));
+      return `<div><strong>${label}:</strong> ${val}</div>`;
+    }).join("");
+    parts.push(`<div style="font-size:12px;line-height:1.4;">${rows}</div>`);
+  }
+  return `<div>${parts.join("")}</div>`;
 }
 function normalizeCenterTuple(center) {
   if (!center) return null;
@@ -680,7 +566,6 @@ var ZenitMap = (0, import_react.forwardRef)(({
   const [loadingMap, setLoadingMap] = (0, import_react.useState)(false);
   const [mapError, setMapError] = (0, import_react.useState)(null);
   const [mapInstance, setMapInstance] = (0, import_react.useState)(null);
-  const [panesReady, setPanesReady] = (0, import_react.useState)(false);
   const [currentZoom, setCurrentZoom] = (0, import_react.useState)(initialZoom ?? DEFAULT_ZOOM);
   const [isMobile, setIsMobile] = (0, import_react.useState)(() => {
     if (typeof window === "undefined") return false;
@@ -995,23 +880,16 @@ var ZenitMap = (0, import_react.forwardRef)(({
     (targetMap, targetLayers) => {
       const baseZIndex = 400;
       targetLayers.forEach((layer) => {
+        const paneName = `zenit-layer-${layer.layerId}`;
+        const pane = targetMap.getPane(paneName) ?? targetMap.createPane(paneName);
         const order = Number.isFinite(layer.displayOrder) ? layer.displayOrder : 0;
-        const fillPaneName = `zenit-layer-${layer.layerId}-fill`;
-        const pointPaneName = `zenit-layer-${layer.layerId}-points`;
-        const labelPaneName = `zenit-layer-${layer.layerId}-labels`;
-        const fillPane = targetMap.getPane(fillPaneName) ?? targetMap.createPane(fillPaneName);
-        const pointPane = targetMap.getPane(pointPaneName) ?? targetMap.createPane(pointPaneName);
-        const labelPane = targetMap.getPane(labelPaneName) ?? targetMap.createPane(labelPaneName);
-        fillPane.style.zIndex = String(baseZIndex + order);
-        pointPane.style.zIndex = String(baseZIndex + order + 1e3);
-        labelPane.style.zIndex = String(baseZIndex + order + 2e3);
+        pane.style.zIndex = String(baseZIndex + order);
       });
     },
     []
   );
   const handleMapReady = (0, import_react.useCallback)(
     (instance) => {
-      setPanesReady(false);
       setMapInstance(instance);
       onMapReady?.(instance);
     },
@@ -1019,7 +897,6 @@ var ZenitMap = (0, import_react.forwardRef)(({
   );
   (0, import_react.useEffect)(() => {
     if (!mapInstance) {
-      setPanesReady(false);
       return;
     }
     if (orderedLayers.length === 0) {
@@ -1030,11 +907,6 @@ var ZenitMap = (0, import_react.forwardRef)(({
       displayOrder: layer.displayOrder
     }));
     ensureLayerPanes(mapInstance, layerTargets);
-    const first = layerTargets[0];
-    const testPane = mapInstance.getPane(`zenit-layer-${first.layerId}-labels`);
-    if (testPane) {
-      setPanesReady(true);
-    }
   }, [mapInstance, orderedLayers, ensureLayerPanes]);
   const overlayOnEachFeature = (0, import_react.useMemo)(() => {
     return (feature, layer) => {
@@ -1052,14 +924,7 @@ var ZenitMap = (0, import_react.forwardRef)(({
       if (featureInfoMode === "popup") {
         const content = buildFeaturePopupHtml(feature);
         if (content) {
-          layer.bindPopup(content, {
-            maxWidth: 420,
-            minWidth: 280,
-            className: "zenit-feature-popup-shell",
-            autoPan: true,
-            closeButton: true,
-            offset: import_leaflet.default.point(0, -24)
-          });
+          layer.bindPopup(content, { maxWidth: 320 });
         }
       }
       if (isPointFeature && layer.bindTooltip) {
@@ -1070,37 +935,7 @@ var ZenitMap = (0, import_react.forwardRef)(({
           className: "zenit-map-tooltip"
         });
       }
-      layer.on("click", () => {
-        if (featureInfoMode === "popup" && client && layerId !== void 0 && !extractDescriptionValue(feature?.properties) && feature?.geometry) {
-          const trackedFeature = feature;
-          if (!trackedFeature.__zenit_popup_loaded) {
-            trackedFeature.__zenit_popup_loaded = true;
-            client.layers.getLayerGeoJsonIntersect({
-              id: layerId,
-              geometry: feature.geometry
-            }).then((response) => {
-              const candidates = response.data?.features ?? [];
-              const resolved = pickIntersectFeature(feature, candidates);
-              if (!resolved?.properties) return;
-              const mergedProperties = {
-                ...trackedFeature.properties ?? {},
-                ...resolved.properties
-              };
-              trackedFeature.properties = mergedProperties;
-              const updatedHtml = buildFeaturePopupHtml({
-                ...feature,
-                properties: mergedProperties
-              });
-              if (updatedHtml && layer.setPopupContent) {
-                layer.setPopupContent(updatedHtml);
-              }
-            }).catch(() => {
-              trackedFeature.__zenit_popup_loaded = false;
-            });
-          }
-        }
-        onFeatureClick?.(feature, layerId);
-      });
+      layer.on("click", () => onFeatureClick?.(feature, layerId));
       layer.on("mouseover", () => {
         if (layer instanceof import_leaflet.default.Path && originalStyle) {
           layer.setStyle({
@@ -1124,7 +959,7 @@ var ZenitMap = (0, import_react.forwardRef)(({
         }
       });
     };
-  }, [client, featureInfoMode, onFeatureClick, onFeatureHover]);
+  }, [featureInfoMode, onFeatureClick, onFeatureHover]);
   const buildLayerStyle = (layerId, baseOpacity, feature, layerType) => {
     const style = resolveLayerStyle(layerId);
     const featureStyleOverrides = getFeatureStyleOverrides(feature);
@@ -1305,50 +1140,22 @@ var ZenitMap = (0, import_react.forwardRef)(({
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ZoomBasedOpacityHandler, { onZoomChange: handleZoomChange }),
               orderedLayers.map((layerState) => {
                 const baseOpacity = layerState.effective?.baseOpacity ?? layerState.effective?.opacity ?? 1;
-                const fillPaneName = `zenit-layer-${layerState.mapLayer.layerId}-fill`;
-                const pointsPaneName = `zenit-layer-${layerState.mapLayer.layerId}-points`;
-                const labelPaneName = `zenit-layer-${layerState.mapLayer.layerId}-labels`;
+                const paneName = `zenit-layer-${layerState.mapLayer.layerId}`;
                 const layerType = layerState.layer?.layerType ?? layerState.mapLayer.layerType ?? void 0;
-                const data = layerState.data?.features ?? [];
-                const fillFeatures = data.filter(isNonPointGeometry);
-                const pointFeatures = data.filter(isPointGeometry);
-                const fillData = fillFeatures.length > 0 ? buildFeatureCollection(fillFeatures) : null;
-                const pointsData = pointFeatures.length > 0 ? buildFeatureCollection(pointFeatures) : null;
-                return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.default.Fragment, { children: [
-                  fillData && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                    import_react_leaflet.GeoJSON,
-                    {
-                      data: fillData,
-                      pane: panesReady && mapInstance?.getPane(fillPaneName) ? fillPaneName : void 0,
-                      style: (feature) => buildLayerStyle(layerState.mapLayer.layerId, baseOpacity, feature, layerType),
-                      onEachFeature: overlayOnEachFeature
-                    }
-                  ),
-                  pointsData && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                    import_react_leaflet.GeoJSON,
-                    {
-                      data: pointsData,
-                      pane: panesReady && mapInstance?.getPane(pointsPaneName) ? pointsPaneName : void 0,
-                      pointToLayer: (feature, latlng) => import_leaflet.default.circleMarker(latlng, {
-                        radius: isMobile ? 8 : 6,
-                        ...buildLayerStyle(layerState.mapLayer.layerId, baseOpacity, feature, layerType)
-                      }),
-                      onEachFeature: overlayOnEachFeature
-                    }
-                  ),
-                  panesReady && mapInstance?.getPane(labelPaneName) ? labelMarkers.filter(
-                    (marker) => String(marker.layerId) === String(layerState.mapLayer.layerId)
-                  ).map((marker) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                    import_react_leaflet.Marker,
-                    {
-                      position: marker.position,
-                      icon: buildLabelIcon(marker.label, marker.opacity, marker.color),
-                      interactive: false,
-                      pane: labelPaneName
-                    },
-                    marker.key
-                  )) : null
-                ] }, layerState.mapLayer.layerId.toString());
+                return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_react_leaflet.GeoJSON,
+                  {
+                    data: layerState.data,
+                    pane: mapInstance?.getPane(paneName) ? paneName : void 0,
+                    style: (feature) => buildLayerStyle(layerState.mapLayer.layerId, baseOpacity, feature, layerType),
+                    pointToLayer: (feature, latlng) => import_leaflet.default.circleMarker(latlng, {
+                      radius: isMobile ? 8 : 6,
+                      ...buildLayerStyle(layerState.mapLayer.layerId, baseOpacity, feature, layerType)
+                    }),
+                    onEachFeature: overlayOnEachFeature
+                  },
+                  layerState.mapLayer.layerId.toString()
+                );
               }),
               overlayGeojson && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                 import_react_leaflet.GeoJSON,
@@ -1358,7 +1165,16 @@ var ZenitMap = (0, import_react.forwardRef)(({
                   onEachFeature: overlayOnEachFeature
                 },
                 "zenit-overlay-geojson"
-              )
+              ),
+              labelMarkers.map((marker) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_react_leaflet.Marker,
+                {
+                  position: marker.position,
+                  icon: buildLabelIcon(marker.label, marker.opacity, marker.color),
+                  interactive: false
+                },
+                marker.key
+              ))
             ]
           },
           String(mapId)
@@ -2770,19 +2586,9 @@ var FloatingChatBox = ({
   getAccessToken,
   onActionClick,
   onOpenChange,
-  hideButton,
-  open: openProp
+  hideButton
 }) => {
-  const isControlled = openProp !== void 0;
-  const [internalOpen, setInternalOpen] = (0, import_react4.useState)(false);
-  const open = isControlled ? openProp : internalOpen;
-  const setOpen = (0, import_react4.useCallback)((value) => {
-    const newValue = typeof value === "function" ? value(open) : value;
-    if (!isControlled) {
-      setInternalOpen(newValue);
-    }
-    onOpenChange?.(newValue);
-  }, [isControlled, open, onOpenChange]);
+  const [open, setOpen] = (0, import_react4.useState)(false);
   const [expanded, setExpanded] = (0, import_react4.useState)(false);
   const [messages, setMessages] = (0, import_react4.useState)([]);
   const [inputValue, setInputValue] = (0, import_react4.useState)("");
@@ -2799,6 +2605,9 @@ var FloatingChatBox = ({
   }, [accessToken, baseUrl, getAccessToken]);
   const { sendMessage: sendMessage2, isStreaming, streamingText, completeResponse } = useSendMessageStream(chatConfig);
   const canSend = Boolean(mapId) && Boolean(baseUrl) && inputValue.trim().length > 0 && !isStreaming;
+  (0, import_react4.useEffect)(() => {
+    onOpenChange?.(open);
+  }, [open, onOpenChange]);
   (0, import_react4.useEffect)(() => {
     if (open && isMobile) {
       setExpanded(true);
@@ -2951,13 +2760,6 @@ var FloatingChatBox = ({
       ] }, index)) })
     ] });
   };
-  const handleActionClick = (0, import_react4.useCallback)((action) => {
-    if (isStreaming) return;
-    setOpen(false);
-    requestAnimationFrame(() => {
-      onActionClick?.(action);
-    });
-  }, [isStreaming, setOpen, onActionClick]);
   const renderActions = (response) => {
     if (!response?.suggestedActions?.length) return null;
     return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: styles.actionsSection, children: [
@@ -2971,7 +2773,7 @@ var FloatingChatBox = ({
             opacity: isStreaming ? 0.5 : 1,
             cursor: isStreaming ? "not-allowed" : "pointer"
           },
-          onClick: () => handleActionClick(action),
+          onClick: () => !isStreaming && onActionClick?.(action),
           disabled: isStreaming,
           onMouseEnter: (e) => {
             if (!isStreaming) {