pixelon 0.6.2 → 0.7.0

package/dist/components/molecules/chat/ChatNotice/ChatNotice.d.ts

@@ -0,0 +1,17 @@
+import { type FC } from 'react';
+import './ChatNotice.scss';
+export type ChatNoticeType = 'success' | 'warning' | 'error' | 'info';
+export type ChatNoticeMode = 'temporary' | 'static';
+export interface ChatNoticeData {
+    id: string;
+    type: ChatNoticeType;
+    message: string;
+    mode: ChatNoticeMode;
+    duration?: number;
+}
+export interface ChatNoticeProps {
+    notice: ChatNoticeData;
+    onClose: (id: string) => void;
+}
+export declare const ChatNotice: FC<ChatNoticeProps>;
+export default ChatNotice;

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

@@ -90,6 +90,17 @@ export interface ChatConfig {
      * agente no tiene por qué conocerla). Sin ella, `map_view` muestra su estado de error.
      */
     googleMapsApiKey?: string;
+    /**
+     * SPEC-015 — aviso temporal (5s, sin X) que se muestra automáticamente encima del input, una
+     * vez por instancia del chat — al entrar, sea una conversación nueva o con historial (no mira
+     * `messages` para nada). El texto y el tipo los pone el host — pixelon sigue sin saber de copy
+     * ni de dominio. Sin este campo, no se muestra nada. El nombre quedó de cuando solo aplicaba a
+     * chats vacíos; el campo ya no distingue eso.
+     */
+    newChatNotice?: {
+        message: string;
+        type?: 'success' | 'warning' | 'error' | 'info';
+    };
 }
 export declare const CHAT_CONFIG_DEFAULTS: ChatConfig;
 export interface ChatConfigProviderProps {

package/dist/core/eventBus/chatEventBus.d.ts

@@ -48,6 +48,8 @@ export declare const CHAT_EVENT: {
     readonly REOPEN_CHAT: "reopenChat";
     readonly CHAT_STATUS: "chatStatus";
     readonly CONVERSATIONS_UPDATED: "conversationsUpdated";
+    readonly NOTICE_SHOW: "noticeShow";
+    readonly NOTICE_DISMISS: "noticeDismiss";
 };
 export type ChatEvents = {
     /** UI component interaction (select, confirm, etc.) */
@@ -192,6 +194,21 @@ export type ChatEvents = {
     conversationsUpdated: {
         items: unknown[];
     };
+    /** SPEC-015 — Consumer/Chat -> Chat: muestra un aviso encima del input. `mode` por omisión
+     *  'temporary' (se autocierra en `duration` ms, default 4000). Hay DOS slots independientes, uno
+     *  por `mode` — un `temporary` reemplaza al `temporary` anterior, un `static` al `static`
+     *  anterior; no compiten entre sí. */
+    noticeShow: {
+        id: string;
+        type: 'success' | 'warning' | 'error' | 'info';
+        message: string;
+        mode?: 'temporary' | 'static';
+        duration?: number;
+    };
+    /** SPEC-015 — cierra el aviso con este id, si sigue siendo el que está mostrando ese slot. */
+    noticeDismiss: {
+        id: string;
+    };
     /** ReactiveForm -> Consumer: trace info for observability */
     formTrace: {
         chatId: string;

package/dist/index.esm.js

@@ -1881,7 +1881,12 @@ const CHAT_EVENT = {
   // SPEC-029 B1
   CHAT_STATUS: "chatStatus",
   // SPEC-005
-  CONVERSATIONS_UPDATED: "conversationsUpdated"
+  CONVERSATIONS_UPDATED: "conversationsUpdated",
+  // SPEC-015 (pixelon) — aviso encima del input: éxito/warning/error/info, temporal o fijo
+  // (`static`). Cualquiera puede emitirlo (el propio Chat, para el disclaimer de IA; el host, para
+  // redirigir aquí sus toasts mientras el chat está en pantalla — ver towing-web SPEC-015).
+  NOTICE_SHOW: "noticeShow",
+  NOTICE_DISMISS: "noticeDismiss"
 };
 const chatEventBus = createEventBus();
 
@@ -18913,6 +18918,42 @@ const NewMessageDivider = ({
   ] });
 };
 
+const DEFAULT_DURATION_MS = 4e3;
+const NOTICE_ICONS = {
+  success: "CHECK",
+  error: "CLOSE",
+  warning: "BELL",
+  info: "HELP"
+};
+const ChatNotice = ({ notice, onClose }) => {
+  const timeoutRef = useRef(null);
+  useEffect(() => {
+    if (notice.mode !== "temporary") return void 0;
+    timeoutRef.current = setTimeout(() => onClose(notice.id), notice.duration ?? DEFAULT_DURATION_MS);
+    return () => {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    };
+  }, [notice.id, notice.mode, notice.duration]);
+  const cls = [
+    `${COMPONENT_PREFIX$1}chat-notice`,
+    `${COMPONENT_PREFIX$1}chat-notice--${notice.type}`
+  ].join(" ");
+  return /* @__PURE__ */ jsxs("div", { className: cls, role: "status", "aria-live": "polite", children: [
+    /* @__PURE__ */ jsx("span", { className: `${COMPONENT_PREFIX$1}chat-notice__icon`, children: /* @__PURE__ */ jsx(Icon, { type: LUMI_ICON_TYPES[NOTICE_ICONS[notice.type]], size: "small" }) }),
+    /* @__PURE__ */ jsx("span", { className: `${COMPONENT_PREFIX$1}chat-notice__message`, children: notice.message }),
+    notice.mode === "static" && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: `${COMPONENT_PREFIX$1}chat-notice__close`,
+        onClick: () => onClose(notice.id),
+        "aria-label": "Cerrar aviso",
+        children: /* @__PURE__ */ jsx(Icon, { type: LUMI_ICON_TYPES.CLOSE, size: "small" })
+      }
+    )
+  ] });
+};
+
 const useAppHeight$2 = (enabled = true) => {
   useEffect(() => {
     if (!enabled) return;
@@ -19782,6 +19823,8 @@ const Chat = ({
   const [isClosed, setIsClosed] = useState(false);
   const [readOnly, setReadOnly] = useState(false);
   const [readOnlyReason, setReadOnlyReason] = useState(null);
+  const [noticiaTemporal, setNoticiaTemporal] = useState(null);
+  const [noticiaFija, setNoticiaFija] = useState(null);
   useEffect(() => {
     const unsubMessages = eventBus.on(CHAT_EVENT.MESSAGES_UPDATED, ({ messages: newMessages }) => {
       setMessages(newMessages);
@@ -19824,6 +19867,47 @@ const Chat = ({
       unsubStatus();
     };
   }, [eventBus]);
+  useEffect(() => {
+    const unsubShow = eventBus.on(CHAT_EVENT.NOTICE_SHOW, (n) => {
+      const notice = {
+        id: n.id,
+        type: n.type,
+        message: n.message,
+        mode: n.mode ?? "temporary",
+        duration: n.duration
+      };
+      if (notice.mode === "static") {
+        setNoticiaFija(notice);
+      } else {
+        setNoticiaTemporal(notice);
+      }
+    });
+    const unsubDismiss = eventBus.on(CHAT_EVENT.NOTICE_DISMISS, ({ id }) => {
+      setNoticiaTemporal((cur) => cur?.id === id ? null : cur);
+      setNoticiaFija((cur) => cur?.id === id ? null : cur);
+    });
+    return () => {
+      unsubShow();
+      unsubDismiss();
+    };
+  }, [eventBus]);
+  const cerrarAviso = (id) => {
+    setNoticiaTemporal((cur) => cur?.id === id ? null : cur);
+    setNoticiaFija((cur) => cur?.id === id ? null : cur);
+  };
+  const avisoNuevoChatMostrado = useRef(false);
+  useEffect(() => {
+    if (avisoNuevoChatMostrado.current) return;
+    if (!resolvedConfig.newChatNotice) return;
+    avisoNuevoChatMostrado.current = true;
+    eventBus.emit(CHAT_EVENT.NOTICE_SHOW, {
+      id: "new-chat-disclaimer",
+      type: resolvedConfig.newChatNotice.type ?? "info",
+      message: resolvedConfig.newChatNotice.message,
+      mode: "temporary",
+      duration: 5e3
+    });
+  }, [eventBus, resolvedConfig.newChatNotice]);
   const handleSend = (content, files) => {
     eventBus.emit(CHAT_EVENT.SEND_MESSAGE, { content, files });
   };
@@ -19982,6 +20066,19 @@ const Chat = ({
         className: `${COMPONENT_PREFIX$1}footer`,
         onClick: (e) => handleFooterClick(e, COMPONENT_PREFIX$1),
         children: [
+          (noticiaFija || noticiaTemporal) && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: [
+                `${COMPONENT_PREFIX$1}chat-notice-slot`,
+                !isClosed && !readOnly ? `${COMPONENT_PREFIX$1}chat-notice-slot--anchored` : ""
+              ].filter(Boolean).join(" "),
+              children: [
+                noticiaFija && /* @__PURE__ */ jsx(ChatNotice, { notice: noticiaFija, onClose: cerrarAviso }, noticiaFija.id),
+                noticiaTemporal && /* @__PURE__ */ jsx(ChatNotice, { notice: noticiaTemporal, onClose: cerrarAviso }, noticiaTemporal.id)
+              ]
+            }
+          ),
           isClosed ? (
             // SPEC-028 T7 — chat cerrado: input off + botón "Continuar chat".
             /* @__PURE__ */ jsxs("div", { className: `${COMPONENT_PREFIX$1}closed-banner`, children: [

package/dist/index.js

@@ -1902,7 +1902,12 @@ const CHAT_EVENT = {
   // SPEC-029 B1
   CHAT_STATUS: "chatStatus",
   // SPEC-005
-  CONVERSATIONS_UPDATED: "conversationsUpdated"
+  CONVERSATIONS_UPDATED: "conversationsUpdated",
+  // SPEC-015 (pixelon) — aviso encima del input: éxito/warning/error/info, temporal o fijo
+  // (`static`). Cualquiera puede emitirlo (el propio Chat, para el disclaimer de IA; el host, para
+  // redirigir aquí sus toasts mientras el chat está en pantalla — ver towing-web SPEC-015).
+  NOTICE_SHOW: "noticeShow",
+  NOTICE_DISMISS: "noticeDismiss"
 };
 const chatEventBus = createEventBus();
 
@@ -18934,6 +18939,42 @@ const NewMessageDivider = ({
   ] });
 };
 
+const DEFAULT_DURATION_MS = 4e3;
+const NOTICE_ICONS = {
+  success: "CHECK",
+  error: "CLOSE",
+  warning: "BELL",
+  info: "HELP"
+};
+const ChatNotice = ({ notice, onClose }) => {
+  const timeoutRef = React.useRef(null);
+  React.useEffect(() => {
+    if (notice.mode !== "temporary") return void 0;
+    timeoutRef.current = setTimeout(() => onClose(notice.id), notice.duration ?? DEFAULT_DURATION_MS);
+    return () => {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    };
+  }, [notice.id, notice.mode, notice.duration]);
+  const cls = [
+    `${COMPONENT_PREFIX$1}chat-notice`,
+    `${COMPONENT_PREFIX$1}chat-notice--${notice.type}`
+  ].join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cls, role: "status", "aria-live": "polite", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${COMPONENT_PREFIX$1}chat-notice__icon`, children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { type: LUMI_ICON_TYPES[NOTICE_ICONS[notice.type]], size: "small" }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${COMPONENT_PREFIX$1}chat-notice__message`, children: notice.message }),
+    notice.mode === "static" && /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        className: `${COMPONENT_PREFIX$1}chat-notice__close`,
+        onClick: () => onClose(notice.id),
+        "aria-label": "Cerrar aviso",
+        children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { type: LUMI_ICON_TYPES.CLOSE, size: "small" })
+      }
+    )
+  ] });
+};
+
 const useAppHeight$2 = (enabled = true) => {
   React.useEffect(() => {
     if (!enabled) return;
@@ -19803,6 +19844,8 @@ const Chat = ({
   const [isClosed, setIsClosed] = React.useState(false);
   const [readOnly, setReadOnly] = React.useState(false);
   const [readOnlyReason, setReadOnlyReason] = React.useState(null);
+  const [noticiaTemporal, setNoticiaTemporal] = React.useState(null);
+  const [noticiaFija, setNoticiaFija] = React.useState(null);
   React.useEffect(() => {
     const unsubMessages = eventBus.on(CHAT_EVENT.MESSAGES_UPDATED, ({ messages: newMessages }) => {
       setMessages(newMessages);
@@ -19845,6 +19888,47 @@ const Chat = ({
       unsubStatus();
     };
   }, [eventBus]);
+  React.useEffect(() => {
+    const unsubShow = eventBus.on(CHAT_EVENT.NOTICE_SHOW, (n) => {
+      const notice = {
+        id: n.id,
+        type: n.type,
+        message: n.message,
+        mode: n.mode ?? "temporary",
+        duration: n.duration
+      };
+      if (notice.mode === "static") {
+        setNoticiaFija(notice);
+      } else {
+        setNoticiaTemporal(notice);
+      }
+    });
+    const unsubDismiss = eventBus.on(CHAT_EVENT.NOTICE_DISMISS, ({ id }) => {
+      setNoticiaTemporal((cur) => cur?.id === id ? null : cur);
+      setNoticiaFija((cur) => cur?.id === id ? null : cur);
+    });
+    return () => {
+      unsubShow();
+      unsubDismiss();
+    };
+  }, [eventBus]);
+  const cerrarAviso = (id) => {
+    setNoticiaTemporal((cur) => cur?.id === id ? null : cur);
+    setNoticiaFija((cur) => cur?.id === id ? null : cur);
+  };
+  const avisoNuevoChatMostrado = React.useRef(false);
+  React.useEffect(() => {
+    if (avisoNuevoChatMostrado.current) return;
+    if (!resolvedConfig.newChatNotice) return;
+    avisoNuevoChatMostrado.current = true;
+    eventBus.emit(CHAT_EVENT.NOTICE_SHOW, {
+      id: "new-chat-disclaimer",
+      type: resolvedConfig.newChatNotice.type ?? "info",
+      message: resolvedConfig.newChatNotice.message,
+      mode: "temporary",
+      duration: 5e3
+    });
+  }, [eventBus, resolvedConfig.newChatNotice]);
   const handleSend = (content, files) => {
     eventBus.emit(CHAT_EVENT.SEND_MESSAGE, { content, files });
   };
@@ -20003,6 +20087,19 @@ const Chat = ({
         className: `${COMPONENT_PREFIX$1}footer`,
         onClick: (e) => handleFooterClick(e, COMPONENT_PREFIX$1),
         children: [
+          (noticiaFija || noticiaTemporal) && /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: [
+                `${COMPONENT_PREFIX$1}chat-notice-slot`,
+                !isClosed && !readOnly ? `${COMPONENT_PREFIX$1}chat-notice-slot--anchored` : ""
+              ].filter(Boolean).join(" "),
+              children: [
+                noticiaFija && /* @__PURE__ */ jsxRuntime.jsx(ChatNotice, { notice: noticiaFija, onClose: cerrarAviso }, noticiaFija.id),
+                noticiaTemporal && /* @__PURE__ */ jsxRuntime.jsx(ChatNotice, { notice: noticiaTemporal, onClose: cerrarAviso }, noticiaTemporal.id)
+              ]
+            }
+          ),
           isClosed ? (
             // SPEC-028 T7 — chat cerrado: input off + botón "Continuar chat".
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${COMPONENT_PREFIX$1}closed-banner`, children: [