@erplora/outfitkit 0.1.1

package/dist/ok-chat.js

@@ -0,0 +1,320 @@
+import { LitElement, css, html } from "lit";
+import { property, query } from "lit/decorators.js";
+import { define } from "./define.js";
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = decorator(target, key, result) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+const DEFAULT_LABELS = {
+  composerPlaceholder: "Type a message…",
+  send: "Send"
+};
+class OkChat extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.messages = [];
+    this.title = "";
+    this.placeholder = "";
+    this.readonly = false;
+    this.labels = {};
+  }
+  static {
+    this.styles = css`
+    :host {
+      /* Vars overridable (estilo Ionic), default = cadena --ok-* → --ion-* → hex */
+      --color: var(--ok-text, var(--ion-text-color, #1c1b17));
+      --color-muted: var(--ok-text-muted, rgba(var(--ion-text-color-rgb, 28, 27, 23), 0.55));
+      --surface: var(--ok-surface, var(--ion-color-step-50, #f5f5f4));
+      --surface-2: var(--ok-surface-2, var(--ion-background-color, #ffffff));
+      --border-soft: var(--ok-border-soft, rgba(var(--ion-text-color-rgb, 28, 27, 23), 0.12));
+      --primary-color: var(--ok-primary, var(--ion-color-primary, #3880ff));
+      --primary-rgb: var(--ok-primary-rgb, var(--ion-color-primary-rgb, 56, 128, 255));
+      --primary-contrast: var(--ok-primary-contrast, var(--ion-color-primary-contrast, #ffffff));
+      --bubble-self: rgba(var(--primary-rgb), 0.14);
+      --border-radius: var(--ok-radius, 14px);
+      --font: var(--ok-font, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
+
+      /* Rellena el contenedor: columna flex de alto/ancho completo. */
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      width: 100%;
+      min-height: 0;
+      color: var(--color);
+      font-family: var(--font);
+      font-size: 0.95rem;
+      background: var(--surface-2);
+    }
+
+    /* Cabecera opcional. */
+    .header {
+      flex: 0 0 auto;
+      display: flex;
+      align-items: center;
+      padding: 0.7rem 1rem;
+      font-weight: 600;
+      border-bottom: 1px solid var(--border-soft);
+    }
+
+    /* Lista scrollable de burbujas. */
+    .log {
+      flex: 1 1 auto;
+      min-height: 0;
+      overflow-y: auto;
+      display: flex;
+      flex-direction: column;
+      gap: 0.15rem;
+      padding: 0.85rem 1rem;
+      box-sizing: border-box;
+    }
+
+    /* Fila de un mensaje (avatar + burbuja). */
+    .msg {
+      display: flex;
+      align-items: flex-end;
+      gap: 0.5rem;
+      max-width: 100%;
+    }
+    .msg.self {
+      flex-direction: row-reverse;
+    }
+    /* Separación extra entre grupos (cambio de lado/autor). */
+    .msg.group-start {
+      margin-top: 0.6rem;
+    }
+    .msg.group-start:first-child {
+      margin-top: 0;
+    }
+
+    /* Avatar (imagen o iniciales) — solo en mensajes ajenos. */
+    .avatar {
+      flex: 0 0 auto;
+      width: 30px;
+      height: 30px;
+      border-radius: 50%;
+      overflow: hidden;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 0.72rem;
+      font-weight: 600;
+      background: var(--surface);
+      color: var(--color-muted);
+      border: 1px solid var(--border-soft);
+    }
+    .avatar img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+    /* Hueco del avatar cuando no toca mostrarlo (mantiene alineación del grupo). */
+    .avatar.spacer {
+      visibility: hidden;
+      border: 0;
+      background: none;
+    }
+
+    /* Burbuja. */
+    .bubble {
+      max-width: min(78%, 560px);
+      box-sizing: border-box;
+      padding: 0.5rem 0.7rem;
+      border-radius: var(--border-radius);
+      background: var(--surface);
+      border: 1px solid var(--border-soft);
+      word-wrap: break-word;
+      overflow-wrap: anywhere;
+    }
+    .msg.self .bubble {
+      background: var(--bubble-self);
+      border-color: transparent;
+    }
+    /* Esquinas: "pico" hacia su lado en el primer mensaje del grupo. */
+    .msg.group-start:not(.self) .bubble {
+      border-top-left-radius: 4px;
+    }
+    .msg.group-start.self .bubble {
+      border-top-right-radius: 4px;
+    }
+
+    .author {
+      display: block;
+      font-size: 0.72rem;
+      font-weight: 600;
+      color: var(--primary-color);
+      margin-bottom: 0.15rem;
+    }
+    .text {
+      white-space: pre-wrap;
+      line-height: 1.35;
+    }
+    .time {
+      display: block;
+      margin-top: 0.2rem;
+      font-size: 0.66rem;
+      color: var(--color-muted);
+      text-align: right;
+    }
+
+    /* Compositor abajo. */
+    .composer {
+      flex: 0 0 auto;
+      display: flex;
+      align-items: flex-end;
+      gap: 0.4rem;
+      padding: 0.55rem 0.7rem;
+      border-top: 1px solid var(--border-soft);
+      background: var(--surface-2);
+    }
+    .composer ion-textarea {
+      flex: 1 1 auto;
+      --background: var(--surface);
+      --border-radius: var(--border-radius);
+      --padding-start: 0.7rem;
+      --padding-end: 0.7rem;
+      --padding-top: 0.4rem;
+      --padding-bottom: 0.4rem;
+    }
+    .composer ion-button {
+      flex: 0 0 auto;
+      margin: 0;
+    }
+
+    @media (max-width: 480px) {
+      .bubble {
+        max-width: 84%;
+      }
+      .log {
+        padding: 0.7rem 0.7rem;
+      }
+    }
+  `;
+  }
+  /** Textos efectivos (defaults inglés + overrides). */
+  get t() {
+    return { ...DEFAULT_LABELS, ...this.labels };
+  }
+  /** Placeholder efectivo: prop explícita o el de labels. */
+  get effectivePlaceholder() {
+    return this.placeholder || this.t.composerPlaceholder;
+  }
+  // ¿El mensaje empieza un nuevo grupo? (cambia el lado o el autor respecto al anterior).
+  isGroupStart(index) {
+    if (index === 0) return true;
+    const prev = this.messages[index - 1];
+    const cur = this.messages[index];
+    return !!prev.self !== !!cur.self || prev.author !== cur.author;
+  }
+  // ¿El mensaje termina un grupo? (el siguiente cambia de lado/autor o no hay siguiente).
+  isGroupEnd(index) {
+    if (index === this.messages.length - 1) return true;
+    const next = this.messages[index + 1];
+    const cur = this.messages[index];
+    return !!next.self !== !!cur.self || next.author !== cur.author;
+  }
+  // Avatar de un mensaje ajeno: imagen si parece URL, iniciales en caso contrario.
+  renderAvatar(msg, show) {
+    if (msg.self) return "";
+    if (!show) return html`<span class="avatar spacer"></span>`;
+    const av = msg.avatar;
+    const isUrl = !!av && /^(https?:|data:|\/|\.)/.test(av);
+    return html`<span class="avatar">
+      ${isUrl ? html`<img src=${av} alt="" />` : html`<span>${(av || msg.author || "?").slice(0, 2).toUpperCase()}</span>`}
+    </span>`;
+  }
+  // Render de un mensaje (fila avatar + burbuja).
+  renderMessage(msg, index) {
+    const start = this.isGroupStart(index);
+    const end = this.isGroupEnd(index);
+    const cls = ["msg", msg.self ? "self" : "", start ? "group-start" : ""].filter(Boolean).join(" ");
+    const showAuthor = start && !msg.self && !!msg.author;
+    return html`<div class=${cls}>
+      ${this.renderAvatar(msg, end)}
+      <div class="bubble">
+        ${showAuthor ? html`<span class="author">${msg.author}</span>` : ""}
+        <span class="text">${msg.text}</span>
+        ${msg.time ? html`<span class="time">${msg.time}</span>` : ""}
+      </div>
+    </div>`;
+  }
+  // Envía el contenido del compositor si no está vacío y limpia el campo.
+  send() {
+    const el = this.textareaEl;
+    const text = (el?.value ?? "").trim();
+    if (!text) return;
+    this.dispatchEvent(
+      new CustomEvent("ok-send", {
+        detail: { text },
+        bubbles: true,
+        composed: true
+      })
+    );
+    if (el) el.value = "";
+  }
+  // Enter envía; Shift+Enter inserta salto de línea (comportamiento por defecto del textarea).
+  onKeydown(e) {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      this.send();
+    }
+  }
+  // Tras cada render, si han cambiado los mensajes hace auto-scroll al fondo.
+  updated(changed) {
+    if (changed.has("messages") && this.logEl) {
+      this.logEl.scrollTop = this.logEl.scrollHeight;
+    }
+  }
+  render() {
+    return html`
+      ${this.title ? html`<div class="header">${this.title}</div>` : ""}
+      <div class="log" role="log" aria-live="polite">
+        ${this.messages.map((msg, i) => this.renderMessage(msg, i))}
+      </div>
+      ${this.readonly ? "" : html`<div class="composer">
+            <ion-textarea
+              auto-grow
+              rows="1"
+              placeholder=${this.effectivePlaceholder}
+              @keydown=${(e) => this.onKeydown(e)}
+            ></ion-textarea>
+            <ion-button
+              fill="solid"
+              aria-label=${this.t.send}
+              @click=${() => this.send()}
+            >
+              <ion-icon slot="icon-only" name="send"></ion-icon>
+            </ion-button>
+          </div>`}
+    `;
+  }
+}
+__decorateClass([
+  property({ attribute: false })
+], OkChat.prototype, "messages");
+__decorateClass([
+  property()
+], OkChat.prototype, "title");
+__decorateClass([
+  property()
+], OkChat.prototype, "placeholder");
+__decorateClass([
+  property({ type: Boolean })
+], OkChat.prototype, "readonly");
+__decorateClass([
+  property({ attribute: false })
+], OkChat.prototype, "labels");
+__decorateClass([
+  query(".log")
+], OkChat.prototype, "logEl");
+__decorateClass([
+  query("ion-textarea")
+], OkChat.prototype, "textareaEl");
+define("ok-chat", OkChat);
+export {
+  OkChat
+};