ant-design-x-vue/es/bubble/Bubble.mjs

Craft AI-driven interfaces effortlessly

import { defineComponent as j, mergeDefaults as D, toRef as h, useSlots as H, ref as d, watch as N, unref as k, watchEffect as q, computed as r, createVNode as l, isVNode as z, Fragment as G, toValue as c, mergeProps as J } from "vue";
import { a as K } from "../attachments/Attachments2.mjs";
import { Avatar as L } from "ant-design-vue";
import M from "../_util/hooks/use-x-component-config.mjs";
import O from "../x-provider/hooks/use-x-provider-context.mjs";
import "../x-provider/context.mjs";
import Q from "./hooks/useTypedEffect.mjs";
import W from "./hooks/useTypingConfig.mjs";
import Y from "./loading.mjs";
import Z from "./style/index.mjs";
import { useBubbleContextInject as U } from "./context.mjs";
const ie = /* @__PURE__ */ j({
  name: "AXBubble",
  __name: "Bubble",
  props: D({
    prefixCls: null,
    rootClassName: null,
    styles: null,
    classNames: null,
    avatar: null,
    placement: null,
    loading: {
      type: Boolean
    },
    typing: null,
    content: null,
    messageRender: {
      type: Function
    },
    loadingRender: {
      type: Function
    },
    variant: null,
    shape: null,
    onTypingComplete: null,
    header: null,
    footer: null
  }, {
    classNames: () => ({}),
    styles: () => ({}),
    placement: "start",
    loading: !1,
    content: "",
    variant: "filled"
  }),
  setup(e, {
    expose: x
  }) {
    const $ = K(e, ["prefixCls", "rootClassName", "classNames", "styles", "avatar", "placement", "loading", "loadingRender", "typing", "content", "messageRender", "variant", "shape", "onTypingComplete", "header", "footer"]);
    h(e, "content"), h(e, "prefixCls");
    const a = H(), g = d(e.content);
    N(() => e.content, () => {
      g.value = e.content;
    });
    const {
      onUpdate: i
    } = k(U()), y = d(null), {
      direction: b,
      getPrefixCls: R
    } = O(), t = R("bubble", e.prefixCls), n = M("bubble"), [T, P, S, C] = W(() => e.typing), [s, u] = Q(g, T, P, S), f = d(!1);
    N(s, () => {
      i == null || i();
    }), q(() => {
      var o;
      !u.value && !e.loading ? f.value || (f.value = !0, (o = e.onTypingComplete) == null || o.call(e)) : f.value = !1;
    });
    const [V, w, B] = Z(() => t), E = r(() => [t, e.rootClassName, n.value.className, w.value, B, `${t}-${e.placement}`, {
      [`${t}-rtl`]: b.value === "rtl"
    }, {
      [`${t}-typing`]: u.value && !e.loading && !e.messageRender && !a.message && !C.value
    }]), F = r(() => a.avatar ? a.avatar() : z(e.avatar) ? e.avatar : l(L, e.avatar, null)), I = r(() => a.message ? a.message({
      content: s.value
    }) : e.messageRender ? e.messageRender(s.value) : s.value), X = r(() => e.loading ? a.loading ? a.loading() : e.loadingRender ? e.loadingRender() : l(Y, {
      prefixCls: t
    }, null) : l(G, null, [I.value, u.value && c(C)])), A = r(() => {
      const o = l("div", {
        style: {
          ...n.value.styles.content,
          ...e.styles.content
        },
        class: [`${t}-content`, `${t}-content-${e.variant}`, {
          [`${t}-content-${e.shape}`]: e.shape
        }, n.value.classNames.content, e.classNames.content]
      }, [c(X)]), m = a.header ? a.header({
        content: s.value
      }) : typeof e.header == "function" ? e.header(s.value) : e.header, v = a.footer ? a.footer({
        content: s.value
      }) : typeof e.footer == "function" ? e.footer(s.value) : e.footer;
      return m || v ? l("div", {
        class: `${t}-content-wrapper`
      }, [m && l("div", {
        class: [`${t}-header`, n.value.classNames.header, e.classNames.header],
        style: {
          ...n.value.styles.header,
          ...e.styles.header
        }
      }, [m]), o, v && l("div", {
        class: [`${t}-footer`, n.value.classNames.footer, e.classNames.footer],
        style: {
          ...n.value.styles.footer,
          ...e.styles.footer
        }
      }, [v])]) : o;
    });
    return x({
      nativeElement: y
    }), () => V(l("div", J({
      style: {
        ...n.value.style
        // ...(style as object),
      },
      class: c(E)
    }, $, {
      ref: y
    }), [(a.avatar || e.avatar) && l("div", {
      style: {
        ...n.value.styles.avatar,
        ...e.styles.avatar
      },
      class: [`${t}-avatar`, n.value.classNames.avatar, e.classNames.avatar]
    }, [c(F)]), c(A)]));
  }
});
export {
  ie as default
};