pixelon 0.3.79 → 0.3.80

package/dist/components/molecules/chat/StructuredContent/components/ChatNavigator/types.d.ts

@@ -69,6 +69,27 @@ export interface ChatNavigatorConfig {
         label: string;
         color?: string;
     }>;
+    /** SPEC-098 — agrupa varios chats en UNA tarjeta con varias puertas.
+     *
+     *  Genérico a propósito: este componente no sabe qué agrupa el consumidor ni por qué. Lo único
+     *  que exige es que la lista llegue con los items de un grupo JUNTOS y COMPLETOS —el que pagina
+     *  es quien sabe qué forma un grupo, y partir un grupo entre dos páginas lo rompería—. La
+     *  etiqueta de cada puerta sale de `tagField`/`tagOptions`, el mismo catálogo que sin agrupar
+     *  pinta un pill.
+     *
+     *  Un item sin valor en `field` se pinta como una fila normal. */
+    group?: {
+        /** Campo cuyo valor comparten los items de una tarjeta (items CONSECUTIVOS). */
+        field: string;
+        /** Campo con el título de la tarjeta; sin él se usa el título del primer chat. */
+        titleField?: string;
+        /** Campos que, unidos por «·», forman el subtítulo. Los vacíos se omiten. */
+        subtitleFields?: string[];
+        /** Campo de estado de la tarjeta (se pinta con `serviceStatusOptions`). */
+        statusField?: string;
+    };
+    /** SPEC-098 — `agent_name` es el nombre técnico del agente; en un producto no se enseña. */
+    showAgent?: boolean;
 }
 export interface ChatNavigatorItem {
     id: string;

package/dist/index.esm.js

@@ -16878,6 +16878,11 @@ function fallbackTitle(item) {
   if (Number.isNaN(d.getTime())) return "Chat";
   return `Chat del ${String(d.getDate()).padStart(2, "0")}/${String(d.getMonth() + 1).padStart(2, "0")}`;
 }
+function campo(item, field) {
+  if (!field) return "";
+  const v = item[field];
+  return v == null || v === "" ? "" : String(v);
+}
 function relativeTime(raw) {
   if (!raw) return "";
   const d = new Date(raw);
@@ -16976,6 +16981,25 @@ function ChatNavigator({ config, eventBus }) {
   const listaRef = useRef(null);
   const loadRef = useRef(load);
   loadRef.current = load;
+  useEffect(() => {
+    const host = listaRef.current;
+    const scroller = host?.querySelector(".px-chat-chat-navigator__list");
+    if (!scroller) return;
+    const MARGEN = 8;
+    const revisar = () => {
+      scroller.dataset.desvaneceArriba = scroller.scrollTop > MARGEN ? "1" : "";
+      const abajo = scroller.scrollHeight - scroller.clientHeight - scroller.scrollTop;
+      scroller.dataset.desvaneceAbajo = abajo > MARGEN ? "1" : "";
+    };
+    revisar();
+    scroller.addEventListener("scroll", revisar, { passive: true });
+    const ro = new ResizeObserver(revisar);
+    ro.observe(scroller);
+    return () => {
+      scroller.removeEventListener("scroll", revisar);
+      ro.disconnect();
+    };
+  }, [items, loading]);
   useEffect(() => {
     if (!eventBus) return;
     let t = null;
@@ -17021,6 +17045,82 @@ function ChatNavigator({ config, eventBus }) {
   };
   const page = Math.floor(skip / pageSize) + 1;
   const totalPages = Math.max(1, Math.ceil(total / pageSize));
+  const bloques = useMemo(() => {
+    const field = config.group?.field;
+    const out = [];
+    items.forEach((item) => {
+      const clave = campo(item, field);
+      const ultimo = out[out.length - 1];
+      if (clave && ultimo && ultimo.agrupado && ultimo.clave === clave) {
+        ultimo.chats.push(item);
+        return;
+      }
+      out.push({ clave: clave || item.id, agrupado: !!clave, chats: [item] });
+    });
+    return out;
+  }, [items, config.group?.field]);
+  const insigniaEstado = (valor) => {
+    if (!valor) return null;
+    const opt = (config.serviceStatusOptions ?? []).find((o) => o.value === valor);
+    const c = opt?.color;
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "px-chat-chat-navigator__service-badge",
+        style: c ? { color: c, background: `${c}22`, borderColor: `${c}55` } : void 0,
+        children: opt?.label ?? valor
+      }
+    );
+  };
+  const contador = (item) => item.unread_proactive_count && item.unread_proactive_count >= 1 ? /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: "px-chat-chat-navigator__badge-count",
+      "aria-label": `${item.unread_proactive_count} mensajes nuevos sin leer`,
+      title: `${item.unread_proactive_count} sin leer`,
+      children: item.unread_proactive_count >= 100 ? "100+" : item.unread_proactive_count
+    }
+  ) : null;
+  const tarjeta = (bloque) => {
+    const g = config.group;
+    const primero = bloque.chats[0];
+    const titulo = campo(primero, g.titleField) || primero.title?.trim() || fallbackTitle(primero);
+    const subtitulo = (g.subtitleFields ?? []).map((f) => campo(primero, f)).filter(Boolean).join(" \xB7 ");
+    const reciente = bloque.chats.reduce(
+      (max, c) => !max || c.updated_date && c.updated_date > max ? c.updated_date : max,
+      null
+    );
+    return /* @__PURE__ */ jsxs("li", { className: "px-chat-chat-navigator__item px-chat-chat-navigator__item--card", children: [
+      /* @__PURE__ */ jsxs("div", { className: "px-chat-chat-navigator__card-head", children: [
+        /* @__PURE__ */ jsx("span", { className: "px-chat-chat-navigator__title", children: titulo }),
+        insigniaEstado(campo(primero, g.statusField))
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "px-chat-chat-navigator__card-sub", children: [
+        subtitulo ? /* @__PURE__ */ jsx("span", { className: "px-chat-chat-navigator__card-detail", children: subtitulo }) : null,
+        /* @__PURE__ */ jsx("span", { className: "px-chat-chat-navigator__time", children: relativeTime(reciente) })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "px-chat-chat-navigator__doors", children: bloque.chats.map((chat) => {
+        const opt = (config.tagOptions ?? []).find(
+          (o) => o.value === campo(chat, config.tagField)
+        );
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: "px-chat-chat-navigator__door",
+            style: opt?.color ? { "--px-door-color": opt.color } : void 0,
+            onClick: () => open(chat),
+            children: [
+              opt?.label ?? chat.title?.trim() ?? "Abrir",
+              contador(chat),
+              chat.closed ? /* @__PURE__ */ jsx("span", { className: "px-chat-chat-navigator__door-closed", "aria-hidden": "true" }) : null
+            ]
+          },
+          chat.id
+        );
+      }) })
+    ] }, bloque.clave);
+  };
   return /* @__PURE__ */ jsxs("div", { className: "px-chat-chat-navigator", children: [
     config.search && /* @__PURE__ */ jsxs("div", { className: "px-chat-chat-navigator__search", children: [
       /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "px-chat-chat-navigator__search-icon", children: [
@@ -17101,7 +17201,9 @@ function ChatNavigator({ config, eventBus }) {
     error && !loading && /* @__PURE__ */ jsx("div", { className: "px-chat-chat-navigator__state px-chat-chat-navigator__state--error", children: error }),
     !loading && !error && items.length === 0 && /* @__PURE__ */ jsx("div", { className: "px-chat-chat-navigator__state", children: labels.emptyText ?? "Sin conversaciones" }),
     /* @__PURE__ */ jsxs("div", { className: "px-chat-chat-navigator__list-wrap", ref: listaRef, children: [
-      /* @__PURE__ */ jsx("ul", { className: "px-chat-chat-navigator__list", children: items.map((item) => {
+      /* @__PURE__ */ jsx("ul", { className: "px-chat-chat-navigator__list", children: bloques.map((bloque) => {
+        if (bloque.agrupado) return tarjeta(bloque);
+        const item = bloque.chats[0];
         const isRenaming = renamingId === item.id;
         const displayTitle = item.title?.trim() || fallbackTitle(item);
         return /* @__PURE__ */ jsxs("li", { className: "px-chat-chat-navigator__item", children: [
@@ -17128,18 +17230,10 @@ function ChatNavigator({ config, eventBus }) {
           ) : /* @__PURE__ */ jsxs("button", { type: "button", className: "px-chat-chat-navigator__open", onClick: () => open(item), children: [
             /* @__PURE__ */ jsxs("span", { className: "px-chat-chat-navigator__title", children: [
               displayTitle,
-              item.unread_proactive_count && item.unread_proactive_count >= 1 ? /* @__PURE__ */ jsx(
-                "span",
-                {
-                  className: "px-chat-chat-navigator__badge-count",
-                  "aria-label": `${item.unread_proactive_count} mensajes nuevos sin leer`,
-                  title: `${item.unread_proactive_count} sin leer`,
-                  children: item.unread_proactive_count >= 100 ? "100+" : item.unread_proactive_count
-                }
-              ) : null
+              contador(item)
             ] }),
             /* @__PURE__ */ jsxs("span", { className: "px-chat-chat-navigator__meta", children: [
-              item.agent_name ? /* @__PURE__ */ jsx("span", { className: "px-chat-chat-navigator__agent", children: item.agent_name }) : null,
+              item.agent_name && config.showAgent !== false ? /* @__PURE__ */ jsx("span", { className: "px-chat-chat-navigator__agent", children: item.agent_name }) : null,
               /* @__PURE__ */ jsx("span", { className: "px-chat-chat-navigator__time", children: relativeTime(item.updated_date) }),
               (() => {
                 const opt = item.rol_code ? (config.originActorOptions ?? []).find((o) => o.value === item.rol_code) : void 0;

package/dist/index.js

@@ -16899,6 +16899,11 @@ function fallbackTitle(item) {
   if (Number.isNaN(d.getTime())) return "Chat";
   return `Chat del ${String(d.getDate()).padStart(2, "0")}/${String(d.getMonth() + 1).padStart(2, "0")}`;
 }
+function campo(item, field) {
+  if (!field) return "";
+  const v = item[field];
+  return v == null || v === "" ? "" : String(v);
+}
 function relativeTime(raw) {
   if (!raw) return "";
   const d = new Date(raw);
@@ -16997,6 +17002,25 @@ function ChatNavigator({ config, eventBus }) {
   const listaRef = React.useRef(null);
   const loadRef = React.useRef(load);
   loadRef.current = load;
+  React.useEffect(() => {
+    const host = listaRef.current;
+    const scroller = host?.querySelector(".px-chat-chat-navigator__list");
+    if (!scroller) return;
+    const MARGEN = 8;
+    const revisar = () => {
+      scroller.dataset.desvaneceArriba = scroller.scrollTop > MARGEN ? "1" : "";
+      const abajo = scroller.scrollHeight - scroller.clientHeight - scroller.scrollTop;
+      scroller.dataset.desvaneceAbajo = abajo > MARGEN ? "1" : "";
+    };
+    revisar();
+    scroller.addEventListener("scroll", revisar, { passive: true });
+    const ro = new ResizeObserver(revisar);
+    ro.observe(scroller);
+    return () => {
+      scroller.removeEventListener("scroll", revisar);
+      ro.disconnect();
+    };
+  }, [items, loading]);
   React.useEffect(() => {
     if (!eventBus) return;
     let t = null;
@@ -17042,6 +17066,82 @@ function ChatNavigator({ config, eventBus }) {
   };
   const page = Math.floor(skip / pageSize) + 1;
   const totalPages = Math.max(1, Math.ceil(total / pageSize));
+  const bloques = React.useMemo(() => {
+    const field = config.group?.field;
+    const out = [];
+    items.forEach((item) => {
+      const clave = campo(item, field);
+      const ultimo = out[out.length - 1];
+      if (clave && ultimo && ultimo.agrupado && ultimo.clave === clave) {
+        ultimo.chats.push(item);
+        return;
+      }
+      out.push({ clave: clave || item.id, agrupado: !!clave, chats: [item] });
+    });
+    return out;
+  }, [items, config.group?.field]);
+  const insigniaEstado = (valor) => {
+    if (!valor) return null;
+    const opt = (config.serviceStatusOptions ?? []).find((o) => o.value === valor);
+    const c = opt?.color;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: "px-chat-chat-navigator__service-badge",
+        style: c ? { color: c, background: `${c}22`, borderColor: `${c}55` } : void 0,
+        children: opt?.label ?? valor
+      }
+    );
+  };
+  const contador = (item) => item.unread_proactive_count && item.unread_proactive_count >= 1 ? /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: "px-chat-chat-navigator__badge-count",
+      "aria-label": `${item.unread_proactive_count} mensajes nuevos sin leer`,
+      title: `${item.unread_proactive_count} sin leer`,
+      children: item.unread_proactive_count >= 100 ? "100+" : item.unread_proactive_count
+    }
+  ) : null;
+  const tarjeta = (bloque) => {
+    const g = config.group;
+    const primero = bloque.chats[0];
+    const titulo = campo(primero, g.titleField) || primero.title?.trim() || fallbackTitle(primero);
+    const subtitulo = (g.subtitleFields ?? []).map((f) => campo(primero, f)).filter(Boolean).join(" \xB7 ");
+    const reciente = bloque.chats.reduce(
+      (max, c) => !max || c.updated_date && c.updated_date > max ? c.updated_date : max,
+      null
+    );
+    return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "px-chat-chat-navigator__item px-chat-chat-navigator__item--card", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-chat-chat-navigator__card-head", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-chat-chat-navigator__title", children: titulo }),
+        insigniaEstado(campo(primero, g.statusField))
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-chat-chat-navigator__card-sub", children: [
+        subtitulo ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-chat-chat-navigator__card-detail", children: subtitulo }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-chat-chat-navigator__time", children: relativeTime(reciente) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-chat-chat-navigator__doors", children: bloque.chats.map((chat) => {
+        const opt = (config.tagOptions ?? []).find(
+          (o) => o.value === campo(chat, config.tagField)
+        );
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            className: "px-chat-chat-navigator__door",
+            style: opt?.color ? { "--px-door-color": opt.color } : void 0,
+            onClick: () => open(chat),
+            children: [
+              opt?.label ?? chat.title?.trim() ?? "Abrir",
+              contador(chat),
+              chat.closed ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-chat-chat-navigator__door-closed", "aria-hidden": "true" }) : null
+            ]
+          },
+          chat.id
+        );
+      }) })
+    ] }, bloque.clave);
+  };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-chat-chat-navigator", children: [
     config.search && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-chat-chat-navigator__search", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "px-chat-chat-navigator__search-icon", children: [
@@ -17122,7 +17222,9 @@ function ChatNavigator({ config, eventBus }) {
     error && !loading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-chat-chat-navigator__state px-chat-chat-navigator__state--error", children: error }),
     !loading && !error && items.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-chat-chat-navigator__state", children: labels.emptyText ?? "Sin conversaciones" }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-chat-chat-navigator__list-wrap", ref: listaRef, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "px-chat-chat-navigator__list", children: items.map((item) => {
+      /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "px-chat-chat-navigator__list", children: bloques.map((bloque) => {
+        if (bloque.agrupado) return tarjeta(bloque);
+        const item = bloque.chats[0];
         const isRenaming = renamingId === item.id;
         const displayTitle = item.title?.trim() || fallbackTitle(item);
         return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "px-chat-chat-navigator__item", children: [
@@ -17149,18 +17251,10 @@ function ChatNavigator({ config, eventBus }) {
           ) : /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: "px-chat-chat-navigator__open", onClick: () => open(item), children: [
             /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "px-chat-chat-navigator__title", children: [
               displayTitle,
-              item.unread_proactive_count && item.unread_proactive_count >= 1 ? /* @__PURE__ */ jsxRuntime.jsx(
-                "span",
-                {
-                  className: "px-chat-chat-navigator__badge-count",
-                  "aria-label": `${item.unread_proactive_count} mensajes nuevos sin leer`,
-                  title: `${item.unread_proactive_count} sin leer`,
-                  children: item.unread_proactive_count >= 100 ? "100+" : item.unread_proactive_count
-                }
-              ) : null
+              contador(item)
             ] }),
             /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "px-chat-chat-navigator__meta", children: [
-              item.agent_name ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-chat-chat-navigator__agent", children: item.agent_name }) : null,
+              item.agent_name && config.showAgent !== false ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-chat-chat-navigator__agent", children: item.agent_name }) : null,
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-chat-chat-navigator__time", children: relativeTime(item.updated_date) }),
               (() => {
                 const opt = item.rol_code ? (config.originActorOptions ?? []).find((o) => o.value === item.rol_code) : void 0;