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

Craft AI-driven interfaces effortlessly

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