@saiboniuma/chat-ui 0.1.0

package/dist/realtime-chat-ui.js

@@ -0,0 +1,1016 @@
+import { isSystemMessage as v, MessageType as p } from "@saiboniuma/realtime-core";
+class k {
+  constructor(e) {
+    this.renderers = [], this.inputTools = [], this.plugins = /* @__PURE__ */ new Map(), this.i18n = e;
+  }
+  /** 注册插件 */
+  register(e) {
+    if (this.plugins.has(e.name)) return;
+    const t = {
+      registerRenderer: (i) => {
+        this.renderers.push(i);
+      },
+      registerInputTool: (i) => {
+        this.inputTools.push(i), this.inputTools.sort((s, n) => (s.order ?? 0) - (n.order ?? 0));
+      },
+      i18n: this.i18n,
+      registerLocale: (i, s) => {
+        this.i18n.registerLocale(i, s);
+      }
+    };
+    e.install(t), this.plugins.set(e.name, e);
+  }
+  /** 注销插件 */
+  unregister(e) {
+    var i;
+    const t = this.plugins.get(e);
+    if (t) {
+      (i = t.uninstall) == null || i.call(t), this.plugins.delete(e), this.renderers = [], this.inputTools = [];
+      for (const s of this.plugins.values()) {
+        const n = {
+          registerRenderer: (o) => {
+            this.renderers.push(o);
+          },
+          registerInputTool: (o) => {
+            this.inputTools.push(o);
+          },
+          i18n: this.i18n,
+          registerLocale: (o, c) => {
+            this.i18n.registerLocale(o, c);
+          }
+        };
+        s.install(n);
+      }
+      this.inputTools.sort((s, n) => (s.order ?? 0) - (n.order ?? 0));
+    }
+  }
+  /** 根据消息查找合适的渲染器 */
+  getRenderer(e) {
+    var t;
+    for (const i of this.renderers)
+      if ((t = i.canRender) != null && t.call(i, e)) return i;
+    for (const i of this.renderers)
+      if (i.contentTypes.includes(Number(e.contentType))) return i;
+    return null;
+  }
+  /** 获取所有输入工具按钮 */
+  getInputTools() {
+    return this.inputTools;
+  }
+  /** 销毁所有插件 */
+  destroy() {
+    var e;
+    for (const t of this.plugins.values())
+      (e = t.uninstall) == null || e.call(t);
+    this.plugins.clear(), this.renderers = [], this.inputTools = [];
+  }
+}
+const E = {
+  "--chat-bg": "#f5f7fb",
+  "--chat-bubble-self-start": "#667eea",
+  "--chat-bubble-self-end": "#764ba2",
+  "--chat-bubble-other": "#ffffff",
+  "--chat-text-primary": "#333333",
+  "--chat-text-secondary": "#666666",
+  "--chat-text-self": "#ffffff",
+  "--chat-border": "#e8e8e8",
+  "--chat-input-bg": "#ffffff",
+  "--chat-avatar-bg": "#e8e8e8",
+  "--chat-avatar-self-start": "#667eea",
+  "--chat-avatar-self-end": "#764ba2",
+  "--chat-error": "#ff4d4f",
+  "--chat-accent-start": "#667eea",
+  "--chat-accent-end": "#764ba2"
+}, T = {
+  "--chat-bg": "#1a1a2e",
+  "--chat-bubble-self-start": "#667eea",
+  "--chat-bubble-self-end": "#764ba2",
+  "--chat-bubble-other": "#2d2d44",
+  "--chat-text-primary": "#e0e0e0",
+  "--chat-text-secondary": "#999999",
+  "--chat-text-self": "#ffffff",
+  "--chat-border": "#3d3d5c",
+  "--chat-input-bg": "#2d2d44",
+  "--chat-avatar-bg": "#3d3d5c",
+  "--chat-avatar-self-start": "#667eea",
+  "--chat-avatar-self-end": "#764ba2",
+  "--chat-error": "#ff4d4f",
+  "--chat-accent-start": "#667eea",
+  "--chat-accent-end": "#764ba2"
+};
+class M {
+  constructor() {
+    this.currentTheme = "light", this.container = null;
+  }
+  /** 绑定容器元素 */
+  bind(e) {
+    this.container = e, this.applyTheme();
+  }
+  /** 设置主题 */
+  setTheme(e) {
+    this.currentTheme = e, this.applyTheme();
+  }
+  /** 获取当前主题 */
+  getTheme() {
+    return this.currentTheme;
+  }
+  /** 应用主题到容器 */
+  applyTheme() {
+    if (!this.container) return;
+    const e = this.currentTheme === "dark" ? T : E;
+    for (const [t, i] of Object.entries(e))
+      this.container.style.setProperty(t, i);
+  }
+}
+function r(a, e, t) {
+  const i = document.createElement(a);
+  if (e && (i.className = e), t)
+    for (const [s, n] of Object.entries(t))
+      i.setAttribute(s, n);
+  return i;
+}
+function V(a, e) {
+  a.textContent = e;
+}
+function u(a) {
+  for (; a.firstChild; )
+    a.removeChild(a.firstChild);
+}
+function Y(a, e, t) {
+  a.classList.toggle(e, t);
+}
+function S(a, e, t = "chat-ui-avatar") {
+  const i = r("div", t);
+  if (a) {
+    const s = r("img", "chat-ui-avatar-img");
+    s.src = a, s.alt = e, s.onerror = () => {
+      s.style.display = "none";
+      const n = y(e);
+      i.appendChild(n);
+    }, i.appendChild(s);
+  } else {
+    const s = y(e);
+    i.appendChild(s);
+  }
+  return i;
+}
+function y(a) {
+  const e = r("div", "chat-ui-avatar-fallback");
+  return e.textContent = L(a), e;
+}
+function L(a) {
+  return a ? a.charAt(0).toUpperCase() : "?";
+}
+function D(a, e) {
+  const t = new Date(a), i = /* @__PURE__ */ new Date(), s = i.getTime() - t.getTime(), n = Math.floor(s / 6e4);
+  if (n < 1)
+    return (e == null ? void 0 : e.t("time.just_now")) ?? "刚刚";
+  if (n < 60)
+    return (e == null ? void 0 : e.t("time.minutes_ago", { n })) ?? `${n}分钟前`;
+  if (t.toDateString() === i.toDateString())
+    return t.toLocaleTimeString("zh-CN", { hour: "2-digit", minute: "2-digit" });
+  const o = new Date(i);
+  return o.setDate(o.getDate() - 1), t.toDateString() === o.toDateString() ? `${(e == null ? void 0 : e.t("time.yesterday")) ?? "昨天"} ${t.toLocaleTimeString("zh-CN", { hour: "2-digit", minute: "2-digit" })}` : t.toLocaleString("zh-CN", {
+    month: "2-digit",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit"
+  });
+}
+function m(a) {
+  requestAnimationFrame(() => {
+    a.scrollTop = a.scrollHeight;
+  });
+}
+function j(a, e = 100) {
+  const { scrollTop: t, scrollHeight: i, clientHeight: s } = a;
+  return i - t - s < e;
+}
+class R {
+  constructor(e, t, i, s, n) {
+    this.currentUserID = "", this.messages = [], this.renderedMsgIds = /* @__PURE__ */ new Set(), this.container = e, this.pluginManager = t, this.i18n = i, this.shadowRoot = s, this.getSenderInfo = n;
+  }
+  /** 设置当前用户 ID */
+  setCurrentUserID(e) {
+    this.currentUserID = e;
+  }
+  /** 更新消息列表 */
+  updateMessages(e) {
+    const t = e.filter((n) => !v(n)), i = [], s = /* @__PURE__ */ new Set();
+    for (const n of t)
+      s.has(n.clientMsgID) || (s.add(n.clientMsgID), i.push(n));
+    this.messages = i, this.render();
+  }
+  /** 追加单条新消息 */
+  appendMessage(e) {
+    if (v(e)) {
+      console.log("[MessageListRenderer] appendMessage 跳过: 系统消息, clientMsgID:", e.clientMsgID);
+      return;
+    }
+    if (this.renderedMsgIds.has(e.clientMsgID)) {
+      console.log("[MessageListRenderer] appendMessage 跳过: 重复消息, clientMsgID:", e.clientMsgID);
+      return;
+    }
+    console.log("[MessageListRenderer] appendMessage 渲染消息, clientMsgID:", e.clientMsgID, "sendID:", e.sendID), this.messages.length === 0 && u(this.container), this.messages.push(e);
+    const t = j(this.container);
+    this.renderMessageItem(e), t && m(this.container);
+  }
+  /** 滚动到底部 */
+  scrollToBottom() {
+    m(this.container);
+  }
+  /** 完整渲染消息列表 */
+  render() {
+    if (u(this.container), this.renderedMsgIds.clear(), this.messages.length === 0) {
+      this.renderEmptyState();
+      return;
+    }
+    for (const e of this.messages)
+      this.renderMessageItem(e);
+    m(this.container);
+  }
+  /** 渲染空状态 */
+  renderEmptyState() {
+    const e = r("div", "chat-ui-empty"), t = r("p");
+    t.textContent = this.i18n.t("message.empty");
+    const i = r("p", "chat-ui-empty-hint");
+    i.textContent = this.i18n.t("message.emptyHint"), e.appendChild(t), e.appendChild(i), this.container.appendChild(e);
+  }
+  /** 渲染单条消息 */
+  renderMessageItem(e) {
+    this.renderedMsgIds.add(e.clientMsgID);
+    const t = e.sendID === this.currentUserID, i = this.getSenderInfo(e), s = r("div", `chat-ui-message-item${t ? " is-self" : ""}`), n = r("div", "chat-ui-message-header"), o = S(
+      i.avatar,
+      i.nickname,
+      `chat-ui-avatar${t ? " avatar-self" : ""}`
+    ), c = r("div", "chat-ui-message-nickname");
+    c.textContent = i.nickname, n.appendChild(o), n.appendChild(c), s.appendChild(n);
+    const d = r("div", "chat-ui-bubble-row"), g = {
+      isSelf: t,
+      currentUserID: this.currentUserID,
+      i18n: this.i18n,
+      shadowRoot: this.shadowRoot
+    }, b = this.pluginManager.getRenderer(e);
+    if (b) {
+      const l = b.render(e, g);
+      d.appendChild(l);
+    } else {
+      const l = r("div", "chat-ui-bubble");
+      l.textContent = this.i18n.t("message.unknownType"), d.appendChild(l);
+    }
+    s.appendChild(d);
+    const x = r("div", "chat-ui-message-time");
+    x.textContent = D(e.sendTime, this.i18n), s.appendChild(x), this.container.appendChild(s);
+  }
+  /** 刷新所有消息的 UI 文本（语言切换时调用） */
+  refreshTexts() {
+    this.render();
+  }
+  /** 清空 */
+  clear() {
+    this.messages = [], this.renderedMsgIds.clear(), u(this.container);
+  }
+}
+class A {
+  constructor(e, t, i, s, n) {
+    this.core = null, this.isSending = !1, this.isDisabled = !1, this.recvID = "", this.groupId = "", this.onAppendMessage = null, this.wrapper = e, this.pluginManager = t, this.i18n = i, this.shadowRoot = s, this.onSend = n, this.build();
+  }
+  /** 设置追加消息回调 */
+  setOnAppendMessage(e) {
+    this.onAppendMessage = e;
+  }
+  /** 绑定 core 实例 */
+  bindCore(e) {
+    this.core = e;
+  }
+  /** 设置接收者 ID */
+  setRecvID(e) {
+    this.recvID = e;
+  }
+  /** 设置群组 ID（广播模式） */
+  setGroupId(e) {
+    this.groupId = e;
+  }
+  /** 设置启用/禁用状态 */
+  setDisabled(e) {
+    this.isDisabled = e, this.inputElement.disabled = e, this.updateSendButton(), this.updateToolbarButtons();
+  }
+  /** 获取输入框元素 */
+  getInputElement() {
+    return this.inputElement;
+  }
+  /** 刷新工具栏 */
+  refreshToolbar() {
+    this.buildToolbar();
+  }
+  /** 刷新 UI 文本 */
+  refreshTexts() {
+    this.inputElement.placeholder = this.i18n.t("input.placeholder"), this.updateSendButton(), this.buildToolbar();
+  }
+  /** 构建输入区域 DOM */
+  build() {
+    this.wrapper.className = "chat-ui-input-wrapper", this.toolbarContainer = r("div", "chat-ui-toolbar"), this.wrapper.appendChild(this.toolbarContainer), this.inputArea = r("div", "chat-ui-input-area"), this.inputElement = r("input", "chat-ui-message-input"), this.inputElement.type = "text", this.inputElement.placeholder = this.i18n.t("input.placeholder"), this.inputElement.addEventListener("keydown", this.handleKeydown.bind(this)), this.inputElement.addEventListener("input", () => this.updateSendButton()), this.inputArea.appendChild(this.inputElement), this.sendButton = r("button", "chat-ui-send-btn"), this.sendButton.textContent = this.i18n.t("input.send"), this.sendButton.addEventListener("click", this.handleSend.bind(this)), this.inputArea.appendChild(this.sendButton), this.wrapper.appendChild(this.inputArea), this.buildToolbar(), this.updateSendButton();
+  }
+  /** 构建工具栏按钮 */
+  buildToolbar() {
+    for (; this.toolbarContainer.firstChild; )
+      this.toolbarContainer.removeChild(this.toolbarContainer.firstChild);
+    const e = this.pluginManager.getInputTools();
+    for (const t of e) {
+      const i = r("button", "chat-ui-tool-btn");
+      i.innerHTML = t.icon, i.title = t.tooltip, i.disabled = this.isDisabled, i.addEventListener("click", () => {
+        const s = {
+          inputElement: this.inputElement,
+          insertText: (n) => {
+            this.inputElement.value += n, this.inputElement.focus(), this.updateSendButton();
+          },
+          getInputText: () => this.inputElement.value,
+          setInputText: (n) => {
+            this.inputElement.value = n, this.updateSendButton();
+          },
+          getRecvID: () => this.groupId || this.recvID,
+          isGroup: () => !!this.groupId,
+          core: this.core,
+          appendMessage: (n) => {
+            this.onAppendMessage && this.onAppendMessage(n);
+          },
+          shadowRoot: this.shadowRoot,
+          i18n: this.i18n
+        };
+        t.onActivate(s);
+      }), this.toolbarContainer.appendChild(i);
+    }
+  }
+  /** 键盘事件处理 */
+  handleKeydown(e) {
+    e.key === "Enter" && !e.shiftKey && (e.preventDefault(), this.handleSend());
+  }
+  /** 发送消息 */
+  async handleSend() {
+    const e = this.inputElement.value.trim();
+    if (!(!e || this.isSending || this.isDisabled)) {
+      this.isSending = !0, this.updateSendButton();
+      try {
+        await this.onSend(e), this.inputElement.value = "";
+      } finally {
+        this.isSending = !1, this.updateSendButton();
+      }
+    }
+  }
+  /** 更新工具栏按钮禁用状态 */
+  updateToolbarButtons() {
+    this.toolbarContainer.querySelectorAll("button").forEach((t) => {
+      t.disabled = this.isDisabled;
+    });
+  }
+  /** 更新发送按钮状态 */
+  updateSendButton() {
+    const e = this.inputElement.value.trim().length > 0;
+    this.sendButton.disabled = !e || this.isDisabled || this.isSending, this.sendButton.textContent = this.isSending ? this.i18n.t("input.sending") : this.i18n.t("input.send");
+  }
+}
+const z = {
+  "input.placeholder": "请输入消息...",
+  "input.send": "发送",
+  "input.sending": "发送中",
+  "message.image": "[图片]",
+  "message.loading": "加载中...",
+  "message.noMore": "没有更多消息了",
+  "message.failed": "发送失败",
+  "message.retry": "重试",
+  "message.empty": "暂无消息",
+  "message.emptyHint": "发送消息开始对话",
+  "message.unknownType": "[未知消息类型]",
+  "message.imageError": "[图片加载失败]",
+  "emoji.title": "表情",
+  "emoji.categories.recent": "常用",
+  "emoji.categories.emotion": "情绪",
+  "emoji.categories.gesture": "手势",
+  "emoji.categories.heart": "心形",
+  "emoji.categories.other": "其他",
+  "emoji.close": "关闭",
+  "image.upload": "发送图片",
+  "image.preview": "查看大图",
+  "image.uploading": "上传中...",
+  "status.connecting": "正在连接服务器...",
+  "status.connected": "已连接",
+  "status.disconnected": "连接失败，请检查网络后重试",
+  "status.reconnect": "重新连接",
+  "time.just_now": "刚刚",
+  "time.minutes_ago": "{n}分钟前",
+  "time.today": "今天",
+  "time.yesterday": "昨天",
+  "common.cancel": "取消",
+  "common.confirm": "确认",
+  "common.close": "关闭",
+  "widget.title": "在线客服"
+}, B = {
+  "input.placeholder": "Type a message...",
+  "input.send": "Send",
+  "input.sending": "Sending",
+  "message.image": "[Image]",
+  "message.loading": "Loading...",
+  "message.noMore": "No more messages",
+  "message.failed": "Failed to send",
+  "message.retry": "Retry",
+  "message.empty": "No messages yet",
+  "message.emptyHint": "Send a message to start",
+  "message.unknownType": "[Unknown message type]",
+  "message.imageError": "[Image load failed]",
+  "emoji.title": "Emoji",
+  "emoji.categories.recent": "Frequent",
+  "emoji.categories.emotion": "Emotion",
+  "emoji.categories.gesture": "Gesture",
+  "emoji.categories.heart": "Heart",
+  "emoji.categories.other": "Other",
+  "emoji.close": "Close",
+  "image.upload": "Send Image",
+  "image.preview": "Preview",
+  "image.uploading": "Uploading...",
+  "status.connecting": "Connecting...",
+  "status.connected": "Connected",
+  "status.disconnected": "Connection failed, please check network",
+  "status.reconnect": "Reconnect",
+  "time.just_now": "Just now",
+  "time.minutes_ago": "{n} min ago",
+  "time.today": "Today",
+  "time.yesterday": "Yesterday",
+  "common.cancel": "Cancel",
+  "common.confirm": "Confirm",
+  "common.close": "Close",
+  "widget.title": "Customer Service"
+};
+class U {
+  constructor(e) {
+    this.currentLocale = "zh-CN", this.messages = /* @__PURE__ */ new Map(), this.changeListeners = /* @__PURE__ */ new Set(), this.messages.set("zh-CN", { ...z }), this.messages.set("en-US", { ...B }), e && (this.currentLocale = e);
+  }
+  /** 翻译文本 */
+  t(e, t) {
+    var n;
+    const i = this.messages.get(this.currentLocale);
+    let s = (i == null ? void 0 : i[e]) ?? ((n = this.messages.get("zh-CN")) == null ? void 0 : n[e]) ?? e;
+    if (t)
+      for (const [o, c] of Object.entries(t))
+        s = s.replace(`{${o}}`, String(c));
+    return s;
+  }
+  /** 获取当前语言 */
+  getLocale() {
+    return this.currentLocale;
+  }
+  /** 切换语言（触发所有监听器刷新 UI） */
+  setLocale(e) {
+    this.currentLocale !== e && (this.currentLocale = e, this.changeListeners.forEach((t) => t()));
+  }
+  /** 注册语言包（可用于插件扩展） */
+  registerLocale(e, t) {
+    const i = this.messages.get(e) || {};
+    this.messages.set(e, { ...i, ...t });
+  }
+  /** 监听语言切换 */
+  onChange(e) {
+    this.changeListeners.add(e);
+  }
+  /** 移除语言切换监听 */
+  offChange(e) {
+    this.changeListeners.delete(e);
+  }
+  /** 销毁 */
+  destroy() {
+    this.changeListeners.clear();
+  }
+}
+const N = ":host{--chat-bg: #f5f7fb;--chat-bubble-self-start: #667eea;--chat-bubble-self-end: #764ba2;--chat-bubble-other: #ffffff;--chat-text-primary: #333333;--chat-text-secondary: #666666;--chat-text-self: #ffffff;--chat-border: #e8e8e8;--chat-input-bg: #ffffff;--chat-avatar-bg: #e8e8e8;--chat-avatar-self-start: #667eea;--chat-avatar-self-end: #764ba2;--chat-error: #ff4d4f;--chat-accent-start: #667eea;--chat-accent-end: #764ba2;display:block;height:100%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;line-height:1.5;color:var(--chat-text-primary);box-sizing:border-box}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}.chat-ui-root{position:relative;display:flex;flex-direction:column;height:100%;background:var(--chat-bg);overflow:hidden}.chat-ui-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:#f5f7fbfa;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;z-index:10}.chat-ui-spinner{width:36px;height:36px;border:3px solid var(--chat-border);border-top-color:var(--chat-accent-start);border-radius:50%;animation:chat-ui-spin .8s linear infinite}.chat-ui-overlay-text{font-size:14px;color:var(--chat-text-secondary)}.chat-ui-error-icon{width:48px;height:48px;border-radius:50%;background:var(--chat-error);color:#fff;font-size:24px;font-weight:700;display:flex;align-items:center;justify-content:center}.chat-ui-reconnect-btn{margin-top:4px;padding:8px 24px;border:none;border-radius:20px;background:linear-gradient(135deg,var(--chat-accent-start) 0%,var(--chat-accent-end) 100%);color:#fff;font-size:14px;cursor:pointer;transition:opacity .2s}.chat-ui-reconnect-btn:hover{opacity:.9}@keyframes chat-ui-spin{to{transform:rotate(360deg)}}", P = ".chat-ui-message-list{flex:1;overflow-y:auto;padding:16px}.chat-ui-empty{text-align:center;color:var(--chat-text-secondary);padding-top:60px}.chat-ui-empty p{margin:8px 0}.chat-ui-empty-hint{font-size:12px}.chat-ui-message-item{display:flex;flex-direction:column;margin-bottom:16px;align-items:flex-start}.chat-ui-message-item.is-self{align-items:flex-end}.chat-ui-message-header{display:flex;align-items:center;gap:8px;margin-bottom:6px}.chat-ui-message-item.is-self .chat-ui-message-header{flex-direction:row-reverse}.chat-ui-avatar{width:28px;height:28px;border-radius:50%;flex-shrink:0;overflow:hidden;background:var(--chat-avatar-bg);display:flex;align-items:center;justify-content:center}.chat-ui-avatar.avatar-self{background:linear-gradient(135deg,var(--chat-avatar-self-start) 0%,var(--chat-avatar-self-end) 100%)}.chat-ui-avatar-img{width:100%;height:100%;object-fit:cover}.chat-ui-avatar-fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:#fff;background:#999}.chat-ui-avatar.avatar-self .chat-ui-avatar-fallback{background:transparent}.chat-ui-message-nickname{font-size:12px;color:var(--chat-text-secondary)}.chat-ui-bubble-row{width:100%;display:flex}.chat-ui-message-item.is-self .chat-ui-bubble-row{justify-content:flex-end}.chat-ui-bubble{padding:10px 14px;border-radius:12px;background:var(--chat-bubble-other);color:var(--chat-text-primary);word-wrap:break-word;box-shadow:0 1px 2px #0000000d;max-width:85%}.chat-ui-message-item.is-self .chat-ui-bubble{background:linear-gradient(135deg,var(--chat-bubble-self-start) 0%,var(--chat-bubble-self-end) 100%);color:var(--chat-text-self)}.chat-ui-message-time{font-size:11px;color:var(--chat-text-secondary);margin-top:4px;padding:0 4px}.chat-ui-message-item.is-self .chat-ui-message-time{text-align:right;align-self:flex-end}", O = ".chat-ui-input-wrapper{position:relative;background:var(--chat-input-bg);border-top:1px solid var(--chat-border)}.chat-ui-toolbar{display:flex;align-items:center;gap:2px;padding:6px 10px 0}.chat-ui-tool-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:none;background:transparent;color:var(--chat-text-secondary);cursor:pointer;border-radius:6px;transition:all .2s;flex-shrink:0;font-size:18px}.chat-ui-tool-btn:hover:not(:disabled){background:#0000000d;color:var(--chat-accent-start)}.chat-ui-tool-btn.active{background:#0000000d;color:var(--chat-accent-start)}.chat-ui-tool-btn:disabled{opacity:.4;cursor:not-allowed}.chat-ui-hidden-input{display:none}.chat-ui-input-area{display:flex;align-items:center;gap:8px;padding:6px 10px 10px;box-sizing:border-box;width:100%}.chat-ui-message-input{flex:1;padding:10px 16px;border:1px solid var(--chat-border);border-radius:20px;font-size:14px;outline:none;transition:border-color .2s;background-color:var(--chat-input-bg);color:var(--chat-text-primary);font-family:inherit}.chat-ui-message-input:focus{border-color:var(--chat-accent-start)}.chat-ui-message-input:disabled{background:#0000000d;cursor:not-allowed}.chat-ui-send-btn{padding:10px 20px;background:linear-gradient(135deg,var(--chat-accent-start) 0%,var(--chat-accent-end) 100%);color:#fff;border:none;border-radius:20px;font-size:14px;cursor:pointer;transition:all .2s;white-space:nowrap;flex-shrink:0;font-family:inherit;font-weight:500}.chat-ui-send-btn:hover:not(:disabled){opacity:.9;box-shadow:0 2px 8px #667eea66}.chat-ui-send-btn:disabled{background:#d1d5db;color:#9ca3af;cursor:not-allowed;box-shadow:none}@media(max-width:480px){.chat-ui-toolbar{padding:4px 8px 0}.chat-ui-tool-btn{width:28px;height:28px;font-size:16px}.chat-ui-input-area{gap:6px;padding:4px 8px 8px}.chat-ui-message-input{padding:8px 12px;font-size:16px}.chat-ui-send-btn{padding:8px 14px;font-size:14px}}", G = ".chat-ui-message-image{padding:4px!important;background:transparent!important;box-shadow:none!important}.chat-ui-message-item.is-self .chat-ui-message-image{background:transparent!important}.chat-ui-chat-image{max-width:200px;max-height:200px;border-radius:8px;cursor:pointer;transition:transform .2s;object-fit:contain}.chat-ui-chat-image:hover{transform:scale(1.02)}.chat-ui-image-error{color:var(--chat-text-secondary);font-size:12px;padding:20px;display:block;background:#0000000d;border-radius:8px}.chat-ui-image-preview-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000d9;display:flex;align-items:center;justify-content:center;z-index:1000}.chat-ui-image-preview-container{position:relative;max-width:90vw;max-height:90vh}.chat-ui-preview-image{max-width:90vw;max-height:90vh;object-fit:contain;border-radius:4px}.chat-ui-close-preview-btn{position:absolute;top:-40px;right:-40px;width:36px;height:36px;border:none;background:#fff3;color:#fff;font-size:24px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s}.chat-ui-close-preview-btn:hover{background:#ffffff4d}", H = ".chat-ui-emoji-picker{position:absolute;bottom:100%;left:0;right:0;background:var(--chat-input-bg);border:1px solid var(--chat-border);border-radius:12px 12px 0 0;box-shadow:0 -4px 12px #0000001a;padding:12px;z-index:100}.chat-ui-emoji-categories{display:flex;gap:8px;margin-bottom:12px;border-bottom:1px solid var(--chat-border);padding-bottom:8px}.chat-ui-category-btn{padding:4px 12px;border:none;background:#0000000d;border-radius:16px;font-size:12px;color:var(--chat-text-secondary);cursor:pointer;transition:all .2s;font-family:inherit}.chat-ui-category-btn:hover{background:#0000001a}.chat-ui-category-btn.active{background:linear-gradient(135deg,var(--chat-accent-start) 0%,var(--chat-accent-end) 100%);color:#fff}.chat-ui-emoji-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;max-height:200px;overflow-y:auto}.chat-ui-emoji-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border:none;background:transparent;font-size:22px;cursor:pointer;border-radius:8px;transition:background .2s}.chat-ui-emoji-btn:hover{background:#0000000d}@media(max-width:480px){.chat-ui-emoji-grid{grid-template-columns:repeat(6,1fr)}.chat-ui-emoji-btn{width:44px;height:44px;font-size:24px}}";
+class Q {
+  constructor(e, t = {}) {
+    this.core = null, this.currentUserID = "", this.userInfo = { nickname: "访客", avatar: "" }, this.agentInfo = { nickname: "客服", avatar: "" }, this.agentUserID = "", this.groupId = "", this.host = r("div", "chat-ui-host"), this.shadowRoot = this.host.attachShadow({ mode: "open" }), e.appendChild(this.host);
+    const i = document.createElement("style");
+    if (i.textContent = [N, P, O, G, H].join(`
+`), this.shadowRoot.appendChild(i), this.root = r("div", `chat-ui-root${t.fullPage ? " full-page" : ""}`), this.shadowRoot.appendChild(this.root), this.i18n = new U(t.locale), this.themeManager = new M(), this.themeManager.bind(this.root), t.theme && this.themeManager.setTheme(t.theme), this.pluginManager = new k(this.i18n), this.messageListEl = r("div", "chat-ui-message-list"), this.root.appendChild(this.messageListEl), this.messageListRenderer = new R(
+      this.messageListEl,
+      this.pluginManager,
+      this.i18n,
+      this.shadowRoot,
+      this.getSenderInfo.bind(this)
+    ), this.inputWrapperEl = r("div"), this.root.appendChild(this.inputWrapperEl), this.inputArea = new A(
+      this.inputWrapperEl,
+      this.pluginManager,
+      this.i18n,
+      this.shadowRoot,
+      this.handleSend.bind(this)
+    ), this.inputArea.setOnAppendMessage((s) => {
+      this.messageListRenderer.appendMessage(s), this.messageListRenderer.scrollToBottom();
+    }), this.inputArea.setDisabled(!0), t.plugins) {
+      for (const s of t.plugins)
+        this.pluginManager.register(s);
+      this.inputArea.refreshToolbar();
+    }
+    this.i18n.onChange(() => {
+      this.messageListRenderer.refreshTexts(), this.inputArea.refreshTexts();
+    });
+  }
+  /** 绑定 RealtimeClient 核心实例 */
+  bindCore(e) {
+    this.core = e, this.inputArea.bindCore(e), e.on("message:received", (t) => {
+      console.log("[ChatUI] message:received 回调触发, clientMsgID:", t.clientMsgID, "sendID:", t.sendID), this.messageListRenderer.appendMessage(t);
+    }), e.on("connection:success", () => {
+      this.inputArea.setDisabled(!1), this.hideOverlay();
+    }), e.on("connection:failed", () => {
+      this.inputArea.setDisabled(!0), this.showErrorOverlay();
+    }), e.on("connection:connecting", () => {
+      this.showLoadingOverlay();
+    });
+  }
+  /** 设置当前用户信息（用于消息渲染） */
+  setUserInfo(e, t, i) {
+    this.currentUserID = e, this.userInfo = { nickname: t, avatar: i }, this.messageListRenderer.setCurrentUserID(e);
+  }
+  /** 设置客服信息（用于消息渲染） */
+  setAgentInfo(e, t, i) {
+    this.agentUserID = e, this.agentInfo = { nickname: t, avatar: i }, this.inputArea.setRecvID(e);
+  }
+  /** 设置群组 ID（广播模式下消息发送到群组） */
+  setGroupId(e) {
+    this.groupId = e, this.inputArea.setGroupId(e);
+  }
+  /** 加载并渲染消息列表 */
+  setMessages(e) {
+    this.messageListRenderer.updateMessages(e);
+  }
+  /** 追加单条消息 */
+  appendMessage(e) {
+    this.messageListRenderer.appendMessage(e);
+  }
+  /** 启用/禁用输入 */
+  setInputEnabled(e) {
+    this.inputArea.setDisabled(!e);
+  }
+  /** 滚动到底部 */
+  scrollToBottom() {
+    this.messageListRenderer.scrollToBottom();
+  }
+  /** 注册插件 */
+  registerPlugin(e) {
+    this.pluginManager.register(e), this.inputArea.refreshToolbar();
+  }
+  /** 注销插件 */
+  unregisterPlugin(e) {
+    this.pluginManager.unregister(e), this.inputArea.refreshToolbar();
+  }
+  /** 切换语言 */
+  setLocale(e) {
+    this.i18n.setLocale(e);
+  }
+  /** 切换主题 */
+  setTheme(e) {
+    this.themeManager.setTheme(e);
+  }
+  /** 获取 i18n 实例（供插件使用） */
+  getI18n() {
+    return this.i18n;
+  }
+  /** 获取 Shadow Root */
+  getShadowRoot() {
+    return this.shadowRoot;
+  }
+  /** 销毁 */
+  destroy() {
+    this.pluginManager.destroy(), this.i18n.destroy(), this.messageListRenderer.clear(), this.host.remove();
+  }
+  /** 获取发送者信息 */
+  getSenderInfo(e) {
+    return e.sendID === this.currentUserID ? this.userInfo : this.agentInfo;
+  }
+  /** 发送消息回调 */
+  async handleSend(e) {
+    if (!this.core || !this.agentUserID) return;
+    const t = !!this.groupId, i = t ? this.groupId : this.agentUserID;
+    try {
+      const s = await this.core.message.sendText(i, e, t);
+      s && (this.messageListRenderer.appendMessage(s), this.messageListRenderer.scrollToBottom());
+    } catch (s) {
+      console.error("[ChatUI] 发送消息失败:", s), this.inputArea.setDisabled(!1);
+    }
+  }
+  /** 显示加载中覆盖层 */
+  showLoadingOverlay() {
+    this.hideOverlay();
+    const e = r("div", "chat-ui-overlay");
+    e.setAttribute("data-type", "loading");
+    const t = r("div", "chat-ui-spinner"), i = r("span", "chat-ui-overlay-text");
+    i.textContent = this.i18n.t("status.connecting"), e.appendChild(t), e.appendChild(i), this.root.appendChild(e);
+  }
+  /** 显示错误覆盖层 */
+  showErrorOverlay() {
+    this.hideOverlay();
+    const e = r("div", "chat-ui-overlay");
+    e.setAttribute("data-type", "error");
+    const t = r("div", "chat-ui-error-icon");
+    t.textContent = "!";
+    const i = r("span", "chat-ui-overlay-text");
+    i.textContent = this.i18n.t("status.disconnected");
+    const s = r("button", "chat-ui-reconnect-btn");
+    s.textContent = this.i18n.t("status.reconnect"), s.addEventListener("click", () => {
+      this.host.dispatchEvent(new CustomEvent("reconnect"));
+    }), e.appendChild(t), e.appendChild(i), e.appendChild(s), this.root.appendChild(e);
+  }
+  /** 隐藏覆盖层 */
+  hideOverlay() {
+    const e = this.root.querySelector(".chat-ui-overlay");
+    e && e.remove();
+  }
+}
+class K {
+  constructor() {
+    this.contentTypes = [p.TextMessage];
+  }
+  render(e, t) {
+    var s;
+    const i = r("div", "chat-ui-bubble");
+    return i.textContent = ((s = e.textElem) == null ? void 0 : s.content) || e.content || t.i18n.t("message.unknownType"), i;
+  }
+}
+class X {
+  constructor() {
+    this.name = "text", this.version = "0.1.0";
+  }
+  install(e) {
+    e.registerRenderer(new K());
+  }
+}
+const h = class h {
+  /** 显示图片预览 */
+  static show(e, t) {
+    h.close(t);
+    const i = r("div", "chat-ui-image-preview-overlay");
+    i.addEventListener("click", () => h.close(t));
+    const s = r("div", "chat-ui-image-preview-container");
+    s.addEventListener("click", (c) => c.stopPropagation());
+    const n = r("img", "chat-ui-preview-image");
+    n.src = e;
+    const o = r("button", "chat-ui-close-preview-btn");
+    o.innerHTML = "&times;", o.addEventListener("click", () => h.close(t)), s.appendChild(n), s.appendChild(o), i.appendChild(s), t.appendChild(i), h.overlay = i;
+  }
+  /** 关闭图片预览 */
+  static close(e) {
+    h.overlay && h.overlay.parentNode === e && (e.removeChild(h.overlay), h.overlay = null);
+  }
+};
+h.overlay = null;
+let f = h;
+function I(a) {
+  var e;
+  if (Number(a.contentType) !== p.CustomMessage || !((e = a.customElem) != null && e.data)) return null;
+  try {
+    const t = JSON.parse(a.customElem.data);
+    if (t.type === "image" && t.url) return t;
+  } catch {
+  }
+  return null;
+}
+function w(a, e = !0) {
+  var i, s, n;
+  if (a.pictureElem) {
+    if (e && ((i = a.pictureElem.snapshotPicture) != null && i.url)) return a.pictureElem.snapshotPicture.url;
+    if ((s = a.pictureElem.bigPicture) != null && s.url) return a.pictureElem.bigPicture.url;
+    if ((n = a.pictureElem.sourcePicture) != null && n.url) return a.pictureElem.sourcePicture.url;
+  }
+  const t = I(a);
+  return t ? t.url : "";
+}
+class $ {
+  constructor() {
+    this.contentTypes = [p.PictureMessage];
+  }
+  /** 同时匹配自定义图片消息 */
+  canRender(e) {
+    return Number(e.contentType) === p.PictureMessage ? !0 : I(e) !== null;
+  }
+  render(e, t) {
+    const i = r("div", "chat-ui-bubble chat-ui-message-image"), s = w(e);
+    if (s) {
+      const n = r("img", "chat-ui-chat-image");
+      n.src = s, n.setAttribute("referrerpolicy", "no-referrer"), n.addEventListener("click", () => {
+        const o = w(e, !1);
+        o && f.show(o, t.shadowRoot);
+      }), n.onerror = () => {
+        n.style.display = "none";
+        const o = r("span", "chat-ui-image-error");
+        o.textContent = t.i18n.t("message.imageError"), i.appendChild(o);
+      }, i.appendChild(n);
+    } else {
+      const n = r("span", "chat-ui-image-error");
+      n.textContent = t.i18n.t("message.imageError"), i.appendChild(n);
+    }
+    return i;
+  }
+}
+class Z {
+  constructor() {
+    this.name = "image", this.version = "0.1.0";
+  }
+  install(e) {
+    e.registerRenderer(new $()), e.registerInputTool({
+      name: "image-upload",
+      icon: "🖼",
+      tooltip: e.i18n.t("image.upload"),
+      order: 10,
+      onActivate(t) {
+        const i = document.createElement("input");
+        i.type = "file", i.accept = "image/*", i.style.display = "none", i.addEventListener("change", async () => {
+          var o;
+          const s = (o = i.files) == null ? void 0 : o[0];
+          if (!s || !s.type.startsWith("image/") || s.size > 10 * 1024 * 1024) return;
+          const n = t.getRecvID();
+          if (!(!n || !t.core)) {
+            try {
+              const c = await F(s), d = await t.core.upload.uploadFile(s), g = await t.core.message.sendImage(n, s, d.absfileName, {
+                width: c.width,
+                height: c.height,
+                size: s.size,
+                type: s.type
+              }, t.isGroup());
+              t.appendMessage(g);
+            } catch (c) {
+              console.error("[ImagePlugin] 发送图片失败:", c);
+            }
+            i.remove();
+          }
+        }), document.body.appendChild(i), i.click();
+      }
+    });
+  }
+}
+function F(a) {
+  return new Promise((e, t) => {
+    const i = new Image();
+    i.onload = () => {
+      e({ width: i.width, height: i.height }), URL.revokeObjectURL(i.src);
+    }, i.onerror = () => {
+      t(new Error("无法读取图片尺寸")), URL.revokeObjectURL(i.src);
+    }, i.src = URL.createObjectURL(a);
+  });
+}
+const W = [
+  "😀",
+  "😃",
+  "😄",
+  "😁",
+  "😆",
+  "😅",
+  "🤣",
+  "😂",
+  "🙂",
+  "😊",
+  "😇",
+  "🥰",
+  "😍",
+  "🤩",
+  "😘",
+  "😗",
+  "😚",
+  "😋",
+  "😛",
+  "😜",
+  "🤪",
+  "😝",
+  "🤑",
+  "🤗",
+  "🤭",
+  "🤫",
+  "🤔",
+  "🤐",
+  "🤨",
+  "😐",
+  "😑",
+  "😶",
+  "😏",
+  "😒",
+  "🙄",
+  "😬",
+  "😮‍💨",
+  "🤥",
+  "😌",
+  "😔",
+  "😪",
+  "🤤",
+  "😴",
+  "😷",
+  "🤒",
+  "🤕",
+  "🤢",
+  "🤮",
+  "🤧",
+  "🥵",
+  "🥶",
+  "🥴",
+  "😵",
+  "🤯",
+  "🤠",
+  "🥳",
+  "😎",
+  "🤓",
+  "🧐",
+  "😕",
+  "😟",
+  "🙁",
+  "☹️",
+  "😮",
+  "😯",
+  "😲",
+  "😳",
+  "🥺",
+  "😦",
+  "😧",
+  "😨",
+  "😰",
+  "😥",
+  "😢",
+  "😭",
+  "😱",
+  "😖",
+  "😣",
+  "😞",
+  "😓",
+  "👍",
+  "👎",
+  "👌",
+  "🤌",
+  "🤏",
+  "✌️",
+  "🤞",
+  "🤟",
+  "🤘",
+  "🤙",
+  "👈",
+  "👉",
+  "👆",
+  "👇",
+  "☝️",
+  "👋",
+  "🤚",
+  "🖐️",
+  "✋",
+  "🖖",
+  "👏",
+  "🙌",
+  "🤝",
+  "🙏",
+  "❤️",
+  "🧡",
+  "💛",
+  "💚",
+  "💙",
+  "💜",
+  "🖤",
+  "🤍",
+  "💔",
+  "❣️",
+  "💕",
+  "💞",
+  "💓",
+  "💗",
+  "💖",
+  "💘",
+  "⭐",
+  "✨",
+  "🌟",
+  "💫",
+  "🔥",
+  "💯",
+  "✅",
+  "❌",
+  "❓",
+  "❗",
+  "💤",
+  "💬",
+  "👀",
+  "🎉",
+  "🎊",
+  "🎁"
+], C = [
+  { nameKey: "emoji.categories.recent", start: 0, end: 32 },
+  { nameKey: "emoji.categories.emotion", start: 32, end: 56 },
+  { nameKey: "emoji.categories.gesture", start: 56, end: 80 },
+  { nameKey: "emoji.categories.heart", start: 80, end: 96 },
+  { nameKey: "emoji.categories.other", start: 96, end: 112 }
+];
+class q {
+  constructor(e, t, i, s) {
+    this.activeCategory = 0, this.visible = !1, this.pickerEl = null, this.gridEl = null, this.categoryBtns = [], this.container = e, this.i18n = t, this.onSelect = i, this.onClose = s;
+  }
+  /** 显示/隐藏表情面板 */
+  toggle() {
+    this.visible ? this.hide() : this.show();
+  }
+  /** 显示面板 */
+  show() {
+    this.visible || (this.visible = !0, this.build());
+  }
+  /** 隐藏面板 */
+  hide() {
+    this.visible && (this.visible = !1, this.pickerEl && (this.pickerEl.remove(), this.pickerEl = null), this.onClose());
+  }
+  /** 是否可见 */
+  isVisible() {
+    return this.visible;
+  }
+  /** 刷新文本（语言切换时） */
+  refreshTexts() {
+    this.visible && this.hide();
+  }
+  /** 构建面板 DOM */
+  build() {
+    this.pickerEl = r("div", "chat-ui-emoji-picker");
+    const e = r("div", "chat-ui-emoji-categories");
+    this.categoryBtns = [], C.forEach((t, i) => {
+      const s = r("button", `chat-ui-category-btn${i === this.activeCategory ? " active" : ""}`);
+      s.textContent = this.i18n.t(t.nameKey), s.addEventListener("click", () => {
+        this.activeCategory = i, this.updateCategoryButtons(), this.renderGrid();
+      }), this.categoryBtns.push(s), e.appendChild(s);
+    }), this.pickerEl.appendChild(e), this.gridEl = r("div", "chat-ui-emoji-grid"), this.renderGrid(), this.pickerEl.appendChild(this.gridEl), this.container.insertBefore(this.pickerEl, this.container.firstChild);
+  }
+  /** 渲染当前分类的 Emoji 网格 */
+  renderGrid() {
+    if (!this.gridEl) return;
+    u(this.gridEl);
+    const e = C[this.activeCategory], t = W.slice(e.start, e.end);
+    for (const i of t) {
+      const s = r("button", "chat-ui-emoji-btn");
+      s.textContent = i, s.addEventListener("click", () => {
+        this.onSelect(i), this.hide();
+      }), this.gridEl.appendChild(s);
+    }
+  }
+  /** 更新分类按钮高亮 */
+  updateCategoryButtons() {
+    this.categoryBtns.forEach((e, t) => {
+      e.className = `chat-ui-category-btn${t === this.activeCategory ? " active" : ""}`;
+    });
+  }
+  /** 销毁 */
+  destroy() {
+    this.hide();
+  }
+}
+class _ {
+  constructor() {
+    this.name = "emoji", this.version = "0.1.0", this.picker = null;
+  }
+  install(e) {
+    e.registerInputTool({
+      name: "emoji",
+      icon: "😀",
+      tooltip: e.i18n.t("emoji.title"),
+      order: 0,
+      onActivate: (t) => {
+        if (!this.picker) {
+          const i = t.inputElement.closest(".chat-ui-input-wrapper");
+          if (!i) return;
+          this.picker = new q(
+            i,
+            t.i18n,
+            (s) => {
+              t.insertText(s);
+            },
+            () => {
+            }
+          );
+        }
+        this.picker.toggle();
+      }
+    });
+  }
+  uninstall() {
+    var e;
+    (e = this.picker) == null || e.destroy(), this.picker = null;
+  }
+}
+export {
+  Q as ChatUI,
+  q as EmojiPicker,
+  _ as EmojiPlugin,
+  U as I18n,
+  Z as ImagePlugin,
+  f as ImagePreview,
+  $ as ImageRenderer,
+  A as InputArea,
+  R as MessageListRenderer,
+  k as PluginManager,
+  X as TextPlugin,
+  K as TextRenderer,
+  M as ThemeManager,
+  u as clearChildren,
+  S as createAvatarElement,
+  r as createElement,
+  C as emojiCategories,
+  W as emojiList,
+  B as enUS,
+  D as formatMessageTime,
+  L as getAvatarText,
+  j as isNearBottom,
+  m as scrollToBottom,
+  V as setTextContent,
+  Y as toggleClass,
+  z as zhCN
+};