pixelon 0.7.4 → 0.8.0

package/dist/components/molecules/chat/StructuredContent/components/ServiceShortcuts/ServiceShortcuts.d.ts

@@ -7,6 +7,7 @@ export interface ServiceShortcut {
     /** A dónde llevar. Alternativa a `prompt`. */
     route?: string;
     prompt?: string;
+    newChat?: boolean;
     icon?: 'map' | 'list' | 'tow' | 'search' | 'user' | 'chat' | 'enroll';
 }
 export interface ServiceShortcutsProps {

package/dist/core/chat/ChatConfigContext.d.ts

@@ -101,6 +101,13 @@ export interface ChatConfig {
         message: string;
         type?: 'success' | 'warning' | 'error' | 'info';
     };
+    /**
+     * SPEC-157 — tema visual del chat. `'dark'`/`'light'` fuerzan uno explícito (se pintan como
+     * atributo `data-theme` en la raíz del chat); `'system'` no fuerza nada y deja que
+     * `prefers-color-scheme` del sistema operativo decida. Default `'dark'`: mientras el host no
+     * tenga dónde guardar la preferencia de cada usuario (ver SPEC-157 Fase 3), el chat abre oscuro.
+     */
+    theme?: 'light' | 'dark' | 'system';
 }
 export declare const CHAT_CONFIG_DEFAULTS: ChatConfig;
 export interface ChatConfigProviderProps {

package/dist/index.esm.js

@@ -2495,7 +2495,8 @@ const CHAT_CONFIG_DEFAULTS = {
   showMicrophoneButton: true,
   placeholderText: "Type a message...",
   enableStreamingEffect: false,
-  contained: false
+  contained: false,
+  theme: "dark"
 };
 const ChatConfigContext = createContext(CHAT_CONFIG_DEFAULTS);
 const ChatConfigProvider = ({ value, children }) => /* @__PURE__ */ jsx(ChatConfigContext.Provider, { value, children });
@@ -15637,6 +15638,33 @@ const DEFAULT_HEIGHT$1 = 320;
 const SINGLE_POINT_ZOOM = 15;
 const FOLLOW_EDGE_RATIO = 0.2;
 const HEADING_STEP = 5;
+const MAPA_ESTILO_OSCURO = [
+  { elementType: "geometry", stylers: [{ color: "#212121" }] },
+  { elementType: "labels.icon", stylers: [{ visibility: "off" }] },
+  { elementType: "labels.text.fill", stylers: [{ color: "#757575" }] },
+  { elementType: "labels.text.stroke", stylers: [{ color: "#212121" }] },
+  { featureType: "administrative", elementType: "geometry", stylers: [{ color: "#757575" }] },
+  { featureType: "administrative.country", elementType: "labels.text.fill", stylers: [{ color: "#9e9e9e" }] },
+  { featureType: "administrative.land_parcel", stylers: [{ visibility: "off" }] },
+  { featureType: "administrative.locality", elementType: "labels.text.fill", stylers: [{ color: "#bdbdbd" }] },
+  { featureType: "poi", elementType: "labels.text.fill", stylers: [{ color: "#757575" }] },
+  { featureType: "poi.park", elementType: "geometry", stylers: [{ color: "#181818" }] },
+  { featureType: "poi.park", elementType: "labels.text.fill", stylers: [{ color: "#616161" }] },
+  { featureType: "poi.park", elementType: "labels.text.stroke", stylers: [{ color: "#1b1b1b" }] },
+  { featureType: "road", elementType: "geometry.fill", stylers: [{ color: "#2c2c2c" }] },
+  { featureType: "road", elementType: "labels.text.fill", stylers: [{ color: "#8a8a8a" }] },
+  { featureType: "road.arterial", elementType: "geometry", stylers: [{ color: "#373737" }] },
+  { featureType: "road.highway", elementType: "geometry", stylers: [{ color: "#3c3c3c" }] },
+  { featureType: "road.highway.controlled_access", elementType: "geometry", stylers: [{ color: "#4e4e4e" }] },
+  { featureType: "road.local", elementType: "labels.text.fill", stylers: [{ color: "#616161" }] },
+  { featureType: "transit", elementType: "labels.text.fill", stylers: [{ color: "#757575" }] },
+  { featureType: "water", elementType: "geometry", stylers: [{ color: "#000000" }] },
+  { featureType: "water", elementType: "labels.text.fill", stylers: [{ color: "#3d3d3d" }] }
+];
+const MAPA_ESTILO_CLARO = [];
+function leerEstiloDelTema() {
+  return document.body.getAttribute("data-theme") === "dark" ? MAPA_ESTILO_OSCURO : MAPA_ESTILO_CLARO;
+}
 const SMOOTHING = 1.25;
 function moveMarker(entry, to, duration) {
   if (entry.raf) cancelAnimationFrame(entry.raf);
@@ -15727,13 +15755,22 @@ const MapView = ({
       zoom,
       mapTypeControl: false,
       streetViewControl: false,
-      fullscreenControl: false
+      fullscreenControl: false,
+      styles: leerEstiloDelTema()
     });
     mapRef.current.addListener("dragstart", () => {
       followSuspendedRef.current = true;
     });
     setMapReady(true);
   }, [status]);
+  useEffect(() => {
+    if (!mapReady || !mapRef.current) return;
+    const observer = new MutationObserver(() => {
+      mapRef.current?.setOptions({ styles: leerEstiloDelTema() });
+    });
+    observer.observe(document.body, { attributes: true, attributeFilter: ["data-theme"] });
+    return () => observer.disconnect();
+  }, [mapReady]);
   useEffect(() => {
     if (!mapReady || !mapRef.current) return;
     const maps = window.google.maps;
@@ -17035,7 +17072,8 @@ const ServiceShortcuts = ({
         onClick: () => {
           if (elegido) return;
           onSelect?.(o.id);
-          if (o.prompt) eventBus?.emit(CHAT_EVENT.SEND_MESSAGE, { content: o.prompt });
+          if (o.newChat) eventBus?.emit(CHAT_EVENT.NEW_CHAT, null);
+          else if (o.prompt) eventBus?.emit(CHAT_EVENT.SEND_MESSAGE, { content: o.prompt });
           else if (o.route) eventBus?.emit(CHAT_EVENT.NAVIGATE, { route: o.route });
         },
         children: [
@@ -19997,7 +20035,34 @@ const Chat = ({
     messages,
     showThinking
   });
-  const { showHeader, showCloseButton, headerTitle, headerAvatarSrc, showAttachmentButton, showMicrophoneButton, placeholderText, enableStreamingEffect, contained } = resolvedConfig;
+  const { showHeader, showCloseButton, headerTitle, headerAvatarSrc, showAttachmentButton, showMicrophoneButton, placeholderText, enableStreamingEffect, contained, theme } = resolvedConfig;
+  const dataTheme = theme === "system" ? void 0 : theme;
+  useEffect(() => {
+    const previousTheme = document.body.getAttribute("data-theme");
+    const previousLumiTheme = document.body.getAttribute("data-lumi-theme");
+    if (dataTheme) {
+      document.body.setAttribute("data-theme", dataTheme);
+    } else {
+      document.body.removeAttribute("data-theme");
+    }
+    if (dataTheme === "dark") {
+      document.body.setAttribute("data-lumi-theme", "dark");
+    } else {
+      document.body.removeAttribute("data-lumi-theme");
+    }
+    return () => {
+      if (previousTheme === null) {
+        document.body.removeAttribute("data-theme");
+      } else {
+        document.body.setAttribute("data-theme", previousTheme);
+      }
+      if (previousLumiTheme === null) {
+        document.body.removeAttribute("data-lumi-theme");
+      } else {
+        document.body.setAttribute("data-lumi-theme", previousLumiTheme);
+      }
+    };
+  }, [dataTheme]);
   const streamedMessages = useStreamingMessage({ messages, enabled: enableStreamingEffect });
   const messageGroups = groupMessagesByDate(streamedMessages);
   const headerSubtitle = dynamicSubtitle !== void 0 ? dynamicSubtitle : resolvedConfig.headerSubtitle;
@@ -20009,7 +20074,7 @@ const Chat = ({
     // SPEC-009 — lo lee el SCSS para no reservar el borde inferior mientras el teclado tapa.
     isKeyboardOpen ? `${COMPONENT_PREFIX$1}layout--keyboard` : ""
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx(ChatConfigProvider, { value: resolvedConfig, children: /* @__PURE__ */ jsxs("div", { className: layoutClasses, ref: layoutRef, children: [
+  return /* @__PURE__ */ jsx(ChatConfigProvider, { value: resolvedConfig, children: /* @__PURE__ */ jsxs("div", { className: layoutClasses, ref: layoutRef, "data-theme": dataTheme, children: [
     showHeader && /* @__PURE__ */ jsx("header", { className: `${COMPONENT_PREFIX$1}header`, children: /* @__PURE__ */ jsx(
       ChatHeader,
       {

package/dist/index.js

@@ -2516,7 +2516,8 @@ const CHAT_CONFIG_DEFAULTS = {
   showMicrophoneButton: true,
   placeholderText: "Type a message...",
   enableStreamingEffect: false,
-  contained: false
+  contained: false,
+  theme: "dark"
 };
 const ChatConfigContext = React.createContext(CHAT_CONFIG_DEFAULTS);
 const ChatConfigProvider = ({ value, children }) => /* @__PURE__ */ jsxRuntime.jsx(ChatConfigContext.Provider, { value, children });
@@ -15658,6 +15659,33 @@ const DEFAULT_HEIGHT$1 = 320;
 const SINGLE_POINT_ZOOM = 15;
 const FOLLOW_EDGE_RATIO = 0.2;
 const HEADING_STEP = 5;
+const MAPA_ESTILO_OSCURO = [
+  { elementType: "geometry", stylers: [{ color: "#212121" }] },
+  { elementType: "labels.icon", stylers: [{ visibility: "off" }] },
+  { elementType: "labels.text.fill", stylers: [{ color: "#757575" }] },
+  { elementType: "labels.text.stroke", stylers: [{ color: "#212121" }] },
+  { featureType: "administrative", elementType: "geometry", stylers: [{ color: "#757575" }] },
+  { featureType: "administrative.country", elementType: "labels.text.fill", stylers: [{ color: "#9e9e9e" }] },
+  { featureType: "administrative.land_parcel", stylers: [{ visibility: "off" }] },
+  { featureType: "administrative.locality", elementType: "labels.text.fill", stylers: [{ color: "#bdbdbd" }] },
+  { featureType: "poi", elementType: "labels.text.fill", stylers: [{ color: "#757575" }] },
+  { featureType: "poi.park", elementType: "geometry", stylers: [{ color: "#181818" }] },
+  { featureType: "poi.park", elementType: "labels.text.fill", stylers: [{ color: "#616161" }] },
+  { featureType: "poi.park", elementType: "labels.text.stroke", stylers: [{ color: "#1b1b1b" }] },
+  { featureType: "road", elementType: "geometry.fill", stylers: [{ color: "#2c2c2c" }] },
+  { featureType: "road", elementType: "labels.text.fill", stylers: [{ color: "#8a8a8a" }] },
+  { featureType: "road.arterial", elementType: "geometry", stylers: [{ color: "#373737" }] },
+  { featureType: "road.highway", elementType: "geometry", stylers: [{ color: "#3c3c3c" }] },
+  { featureType: "road.highway.controlled_access", elementType: "geometry", stylers: [{ color: "#4e4e4e" }] },
+  { featureType: "road.local", elementType: "labels.text.fill", stylers: [{ color: "#616161" }] },
+  { featureType: "transit", elementType: "labels.text.fill", stylers: [{ color: "#757575" }] },
+  { featureType: "water", elementType: "geometry", stylers: [{ color: "#000000" }] },
+  { featureType: "water", elementType: "labels.text.fill", stylers: [{ color: "#3d3d3d" }] }
+];
+const MAPA_ESTILO_CLARO = [];
+function leerEstiloDelTema() {
+  return document.body.getAttribute("data-theme") === "dark" ? MAPA_ESTILO_OSCURO : MAPA_ESTILO_CLARO;
+}
 const SMOOTHING = 1.25;
 function moveMarker(entry, to, duration) {
   if (entry.raf) cancelAnimationFrame(entry.raf);
@@ -15748,13 +15776,22 @@ const MapView = ({
       zoom,
       mapTypeControl: false,
       streetViewControl: false,
-      fullscreenControl: false
+      fullscreenControl: false,
+      styles: leerEstiloDelTema()
     });
     mapRef.current.addListener("dragstart", () => {
       followSuspendedRef.current = true;
     });
     setMapReady(true);
   }, [status]);
+  React.useEffect(() => {
+    if (!mapReady || !mapRef.current) return;
+    const observer = new MutationObserver(() => {
+      mapRef.current?.setOptions({ styles: leerEstiloDelTema() });
+    });
+    observer.observe(document.body, { attributes: true, attributeFilter: ["data-theme"] });
+    return () => observer.disconnect();
+  }, [mapReady]);
   React.useEffect(() => {
     if (!mapReady || !mapRef.current) return;
     const maps = window.google.maps;
@@ -17056,7 +17093,8 @@ const ServiceShortcuts = ({
         onClick: () => {
           if (elegido) return;
           onSelect?.(o.id);
-          if (o.prompt) eventBus?.emit(CHAT_EVENT.SEND_MESSAGE, { content: o.prompt });
+          if (o.newChat) eventBus?.emit(CHAT_EVENT.NEW_CHAT, null);
+          else if (o.prompt) eventBus?.emit(CHAT_EVENT.SEND_MESSAGE, { content: o.prompt });
           else if (o.route) eventBus?.emit(CHAT_EVENT.NAVIGATE, { route: o.route });
         },
         children: [
@@ -20018,7 +20056,34 @@ const Chat = ({
     messages,
     showThinking
   });
-  const { showHeader, showCloseButton, headerTitle, headerAvatarSrc, showAttachmentButton, showMicrophoneButton, placeholderText, enableStreamingEffect, contained } = resolvedConfig;
+  const { showHeader, showCloseButton, headerTitle, headerAvatarSrc, showAttachmentButton, showMicrophoneButton, placeholderText, enableStreamingEffect, contained, theme } = resolvedConfig;
+  const dataTheme = theme === "system" ? void 0 : theme;
+  React.useEffect(() => {
+    const previousTheme = document.body.getAttribute("data-theme");
+    const previousLumiTheme = document.body.getAttribute("data-lumi-theme");
+    if (dataTheme) {
+      document.body.setAttribute("data-theme", dataTheme);
+    } else {
+      document.body.removeAttribute("data-theme");
+    }
+    if (dataTheme === "dark") {
+      document.body.setAttribute("data-lumi-theme", "dark");
+    } else {
+      document.body.removeAttribute("data-lumi-theme");
+    }
+    return () => {
+      if (previousTheme === null) {
+        document.body.removeAttribute("data-theme");
+      } else {
+        document.body.setAttribute("data-theme", previousTheme);
+      }
+      if (previousLumiTheme === null) {
+        document.body.removeAttribute("data-lumi-theme");
+      } else {
+        document.body.setAttribute("data-lumi-theme", previousLumiTheme);
+      }
+    };
+  }, [dataTheme]);
   const streamedMessages = useStreamingMessage({ messages, enabled: enableStreamingEffect });
   const messageGroups = groupMessagesByDate(streamedMessages);
   const headerSubtitle = dynamicSubtitle !== void 0 ? dynamicSubtitle : resolvedConfig.headerSubtitle;
@@ -20030,7 +20095,7 @@ const Chat = ({
     // SPEC-009 — lo lee el SCSS para no reservar el borde inferior mientras el teclado tapa.
     isKeyboardOpen ? `${COMPONENT_PREFIX$1}layout--keyboard` : ""
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxRuntime.jsx(ChatConfigProvider, { value: resolvedConfig, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: layoutClasses, ref: layoutRef, children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(ChatConfigProvider, { value: resolvedConfig, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: layoutClasses, ref: layoutRef, "data-theme": dataTheme, children: [
     showHeader && /* @__PURE__ */ jsxRuntime.jsx("header", { className: `${COMPONENT_PREFIX$1}header`, children: /* @__PURE__ */ jsxRuntime.jsx(
       ChatHeader,
       {