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

Craft AI-driven interfaces effortlessly

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