@getnexorai/sdk 0.1.5 → 0.1.7

package/dist/chat.cjs

@@ -712,6 +712,40 @@ var widgetCss = (accent, accentText) => `
 }
 .nexor-chat__msg--bot .nexor-chat__msg-time { text-align: left; }
 
+/* File Library attachment: the image itself is the bubble (no padding/bg). */
+.nexor-chat__msg--media {
+  padding: 0;
+  background: transparent;
+  border: none;
+  box-shadow: none;
+  overflow: hidden;
+}
+.nexor-chat__media-img {
+  display: block;
+  max-width: 100%;
+  max-height: 260px;
+  width: auto;
+  height: auto;
+  border-radius: 14px;
+  border-bottom-left-radius: 4px;
+  object-fit: cover;
+}
+.nexor-chat__media-doc {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 12px;
+  border-radius: 14px;
+  border-bottom-left-radius: 4px;
+  background: #fff;
+  border: 1px solid rgba(0,0,0,0.06);
+  color: ${accent};
+  text-decoration: none;
+  font-size: 13px;
+  font-weight: 500;
+}
+.nexor-chat__media-doc::before { content: "\\1F4CE"; }
+
 @keyframes nexor-msg-in {
   from { transform: translateY(8px) scale(0.96); opacity: 0; }
   to   { transform: translateY(0) scale(1);     opacity: 1; }
@@ -851,7 +885,8 @@ var widgetCss = (accent, accentText) => `
   transition: border-color 140ms ease, box-shadow 140ms ease;
 }
 /* Composer textarea: auto-grows (height managed in JS) up to ~4 lines, then
-   scrolls. resize:none disables the manual drag handle. */
+   scrolls. resize:none disables the manual drag handle. Filled style: neutral
+   pill at rest that "lights up" white on focus \u2014 calmer than a glowing ring. */
 textarea.nexor-chat__input {
   display: block;
   resize: none;
@@ -860,11 +895,22 @@ textarea.nexor-chat__input {
   max-height: 98px; /* 4 lines (20\xD74) + 16 padding + 2 border */
   white-space: pre-wrap;
   word-break: break-word;
+  background: #f3f4f6;
+  border-color: transparent;
+  border-radius: 19px;
+  padding: 8px 14px;
+  transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
 }
+textarea.nexor-chat__input::placeholder { color: #9ca3af; }
 .nexor-chat__input:focus,
 .nexor-chat__capture input:focus {
   border-color: ${accent};
-  box-shadow: 0 0 0 3px ${accent}33;
+  box-shadow: 0 0 0 2px ${accent}1f;
+}
+textarea.nexor-chat__input:focus {
+  background: #fff;
+  border-color: ${accent}99;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
 }
 .nexor-chat__input--error,
 .nexor-chat__capture input.nexor-chat__input--error {
@@ -1005,21 +1051,26 @@ textarea.nexor-chat__input {
   background: ${accent};
   color: ${accentText};
   border: none;
-  border-radius: 8px;
-  padding: 0 14px;
+  border-radius: 9999px; /* circle, matches the pill composer */
+  padding: 0;
   font: inherit;
   font-weight: 600;
   cursor: pointer;
-  min-width: 44px;
+  width: 38px;
   height: 38px; /* matches the one-line textarea height */
   flex: none;
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: transform 140ms ease, filter 140ms ease;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
+  transition: transform 140ms ease, filter 140ms ease, box-shadow 140ms ease;
+}
+.nexor-chat__send:hover {
+  filter: brightness(1.08);
+  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
+  transform: translateY(-1px);
 }
-.nexor-chat__send:hover { filter: brightness(1.08); }
-.nexor-chat__send:active { transform: scale(0.95); }
+.nexor-chat__send:active { transform: scale(0.93); }
 .nexor-chat__send[disabled] {
   opacity: 0.6;
   cursor: not-allowed;
@@ -1030,7 +1081,7 @@ textarea.nexor-chat__input {
   height: 18px;
   transition: transform 200ms ease;
 }
-.nexor-chat__send:not([disabled]):hover svg { transform: translateX(2px); }
+.nexor-chat__send:not([disabled]):hover svg { transform: translateY(-1.5px); }
 
 /* Small spinner inside the send button while a turn is in flight */
 .nexor-chat__send--loading svg { display: none; }
@@ -1183,11 +1234,13 @@ textarea.nexor-chat__input {
 // src/chat/dom.ts
 var STYLE_ATTR = "data-nexor-chat-styles";
 function injectStyles(accent, accentText) {
-  if (document.querySelector(`style[${STYLE_ATTR}]`)) return;
-  const style = document.createElement("style");
-  style.setAttribute(STYLE_ATTR, "1");
+  let style = document.querySelector(`style[${STYLE_ATTR}]`);
+  if (!style) {
+    style = document.createElement("style");
+    style.setAttribute(STYLE_ATTR, "1");
+    document.head.appendChild(style);
+  }
   style.textContent = widgetCss(accent, accentText);
-  document.head.appendChild(style);
 }
 var CHAT_ICON = `
   <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
@@ -1550,8 +1603,8 @@ function buildComposer(cfg) {
   send.setAttribute("aria-label", "Send message");
   send.innerHTML = `
     <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
-      <path d="M3.4 11.2 20.5 4.3c.7-.3 1.4.4 1.1 1.1l-6.9 17.1c-.3.8-1.4.8-1.8 0L10 14l-7.5-3c-.8-.3-.8-1.5 0-1.8Z"
-            stroke="currentColor" stroke-width="1.6" stroke-linejoin="round" fill="currentColor"/>
+      <path d="M12 19V5.8M5.8 12 12 5.8 18.2 12"
+            stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/>
     </svg>
   `;
   form.appendChild(input);
@@ -1593,6 +1646,28 @@ function buildMessage(role, text, ts, locale) {
   }
   return el;
 }
+function buildMediaMessage(item) {
+  const el = document.createElement("div");
+  el.className = "nexor-chat__msg nexor-chat__msg--bot nexor-chat__msg--media";
+  if (item.type === "image") {
+    const img = document.createElement("img");
+    img.className = "nexor-chat__media-img";
+    img.src = item.url;
+    img.alt = item.filename || "";
+    img.loading = "lazy";
+    img.addEventListener("error", () => el.remove());
+    el.appendChild(img);
+  } else {
+    const a = document.createElement("a");
+    a.className = "nexor-chat__media-doc";
+    a.href = item.url;
+    a.target = "_blank";
+    a.rel = "noopener noreferrer";
+    a.textContent = item.filename || "Descargar archivo";
+    el.appendChild(a);
+  }
+  return el;
+}
 function formatRelativeTime(ts, locale, now = Date.now()) {
   try {
     const diff = Math.max(0, now - ts);
@@ -1770,7 +1845,8 @@ function initChat(client, options) {
     setView("chat");
     renderResumeBanner();
     for (const m of persisted.history) {
-      appendBubble(m.role === "user" ? "user" : "bot", m.text, m.ts);
+      if (m.media) appendNode(buildMediaMessage(m.media));
+      else appendBubble(m.role === "user" ? "user" : "bot", m.text, m.ts);
     }
     scrollToBottom();
   }
@@ -2303,9 +2379,12 @@ function initChat(client, options) {
         renderResumeBanner(true);
       }
       const reply = (res.reply ?? "").trim();
+      const hasMedia = Array.isArray(res.media) && res.media.length > 0;
       hideTyping();
       if (reply) {
-        appendBotReply(reply);
+        appendBotReply(reply, hasMedia ? () => appendBotMedia(res.media) : void 0);
+      } else if (hasMedia) {
+        appendBotMedia(res.media);
       } else {
         appendSystem(cfg.errorText);
         cfg.onError?.(new Error("Nexor SDK: empty reply from server"));
@@ -2340,10 +2419,21 @@ function initChat(client, options) {
     if (!state.isOpen) bumpUnread();
     cfg.onMessage?.({ role: "bot", text });
   }
-  function appendBotReply(text) {
+  function appendBotMedia(items) {
+    if (!Array.isArray(items) || items.length === 0) return;
+    for (const item of items) {
+      if (!item || typeof item.url !== "string" || !item.url) continue;
+      appendNode(buildMediaMessage(item));
+      state.history.push({ role: "bot", text: "", ts: Date.now(), media: item });
+    }
+    saveHistory();
+    if (!state.isOpen) bumpUnread();
+  }
+  function appendBotReply(text, after) {
     const parts = cfg.splitReplies ? splitReply(text) : [text];
     if (parts.length <= 1) {
       appendBot(text);
+      after?.();
       return;
     }
     const [first, ...rest] = parts;
@@ -2351,7 +2441,10 @@ function initChat(client, options) {
     let i = 0;
     const sendNext = () => {
       const part = rest[i];
-      if (part === void 0) return;
+      if (part === void 0) {
+        after?.();
+        return;
+      }
       const isLast = i === rest.length - 1;
       i++;
       showTyping();