@artmate/chat/dist/es/packages/src/bubble/index.vue.js

**开箱即用的AI组件库（基于 Vue3 + ElementPlus）**

import { defineComponent as U, useSlots as W, ref as V, computed as b, watch as w, createElementBlock as o, openBlock as a, normalizeStyle as p, normalizeClass as c, unref as t, createCommentVNode as v, renderSlot as l, createBlock as i, resolveDynamicComponent as g, createElementVNode as X, Fragment as D, createTextVNode as F, toDisplayString as j } from "vue";
import { ElAvatar as Y } from "element-plus";
import { useNamespace as Z } from "../hooks/useNamespace.js";
import _ from "./hooks/useTypedEffect.js";
import x from "./hooks/useTypingConfig.js";
import A from "./loading.vue.js";
/* empty css             */
const ee = ["innerHTML"], te = ["innerHTML"], ce = /* @__PURE__ */ U({
  __name: "index",
  props: {
    avatar: { default: "" },
    classNames: {},
    content: { default: void 0 },
    loading: { type: Boolean, default: !1 },
    loadingRender: { type: Function, default: void 0 },
    messageRender: {},
    placement: { default: "start" },
    shape: {},
    styles: { default: () => ({}) },
    typing: { type: [Boolean, Object], default: !1 },
    variant: { default: "filled" }
  },
  emits: ["update", "typingComplete"],
  setup(I, { expose: O, emit: q }) {
    const e = I, $ = q, s = Z("bubble"), d = W(), h = V(), [G, J, K, f] = x(e.typing), P = b(() => e.content ?? ""), [r, y] = _(
      P,
      G,
      J,
      K
    );
    w(
      () => r.value,
      () => {
        $("update");
      }
    );
    const u = b(
      () => {
        var n;
        return e.messageRender ? e.messageRender(((n = r.value) == null ? void 0 : n.call(r)) ?? "") : r.value;
      }
    ), k = V(!1);
    w(
      () => y.value || e.loading,
      () => {
        !y.value && !e.loading ? k.value || (k.value = !0, $("typingComplete")) : k.value = !1;
      }
    );
    const Q = b(() => [
      s.b(),
      s.b(e.placement),
      {
        [s.b("typing")]: y.value && !e.loading && !e.messageRender && !f
      }
    ]);
    function R(n) {
      return typeof n == "string";
    }
    function m() {
      return typeof r.value == "function" ? r.value() : r.value;
    }
    return O({
      nativeElement: h
    }), (n, ne) => {
      var N, C, T, S, E, B, H, L, M, z;
      return a(), o("div", {
        ref_key: "divRef",
        ref: h,
        class: c(Q.value),
        style: p([t(f) ? `--cursor-char: ${t(f)}` : ""])
      }, [
        t(d).avatar || n.avatar ? (a(), o("div", {
          key: 0,
          class: c([t(s).b("avatar"), (N = e.classNames) == null ? void 0 : N.avatar]),
          style: p((C = e.styles) == null ? void 0 : C.avatar)
        }, [
          l(n.$slots, "avatar", {
            content: m()
          }, () => [
            typeof n.avatar == "string" ? (a(), i(t(Y), {
              key: 0,
              size: 32,
              src: n.avatar
            }, null, 8, ["src"])) : (a(), i(g(n.avatar), { key: 1 }))
          ])
        ], 6)) : v("", !0),
        t(d).header || t(d).footer ? (a(), o("div", {
          key: 1,
          class: c([t(s).b("content-wrapper")])
        }, [
          t(d).header ? (a(), o("div", {
            key: 0,
            class: c([t(s).b("header"), (T = e.classNames) == null ? void 0 : T.header]),
            style: p((S = e.styles) == null ? void 0 : S.header)
          }, [
            l(n.$slots, "header", {
              content: m()
            })
          ], 6)) : v("", !0),
          X("div", {
            class: c([
              t(s).b("content"),
              t(s).b(`content-${e.variant}`),
              (E = e.classNames) == null ? void 0 : E.content,
              e.shape && t(s).b(`content-${e.placement}-${e.shape}`)
            ]),
            style: p((B = e.styles) == null ? void 0 : B.content)
          }, [
            e.loading ? (a(), o(D, { key: 0 }, [
              t(d).loading ? l(n.$slots, "loading", { key: 0 }) : n.loadingRender ? (a(), i(g(n.loadingRender()), { key: 1 })) : (a(), i(A, {
                key: 2,
                "prefix-cls": t(s).b()
              }, null, 8, ["prefix-cls"]))
            ], 64)) : l(n.$slots, "content", {
              key: 1,
              content: m()
            }, () => [
              R(u.value) ? (a(), o("div", {
                key: 1,
                innerHTML: u.value
              }, null, 8, ee)) : (a(), i(g(u.value), { key: 0 })),
              t(y) ? l(n.$slots, "suffix", { key: 2 }, () => [
                F(j(t(f)), 1)
              ]) : v("", !0)
            ])
          ], 6),
          t(d).footer ? (a(), o("div", {
            key: 1,
            class: c([t(s).b("footer"), (H = e.classNames) == null ? void 0 : H.footer]),
            style: p((L = e.styles) == null ? void 0 : L.footer)
          }, [
            l(n.$slots, "footer", {
              content: m()
            })
          ], 6)) : v("", !0)
        ], 2)) : (a(), o("div", {
          key: 2,
          class: c([
            t(s).b("content"),
            t(s).b(`content-${e.variant}`),
            (M = e.classNames) == null ? void 0 : M.content,
            e.shape && t(s).b(`content-${e.placement}-${e.shape}`)
          ]),
          style: p((z = e.styles) == null ? void 0 : z.content)
        }, [
          e.loading ? (a(), o(D, { key: 0 }, [
            t(d).loading ? l(n.$slots, "loading", { key: 0 }) : n.loadingRender ? (a(), i(g(n.loadingRender()), { key: 1 })) : (a(), i(A, {
              key: 2,
              "prefix-cls": t(s).b()
            }, null, 8, ["prefix-cls"]))
          ], 64)) : l(n.$slots, "content", {
            key: 1,
            content: m()
          }, () => [
            R(u.value) ? (a(), o("div", {
              key: 1,
              innerHTML: u.value
            }, null, 8, te)) : (a(), i(g(u.value), { key: 0 })),
            t(y) ? l(n.$slots, "suffix", { key: 2 }, () => [
              F(j(t(f)), 1)
            ]) : v("", !0)
          ])
        ], 6))
      ], 6);
    };
  }
});
export {
  ce as default
};