ant-design-x-vue/es/sender/Sender.mjs

Craft AI-driven interfaces effortlessly

import { defineComponent as ee, mergeDefaults as te, toRef as ne, useSlots as ae, computed as a, ref as f, watch as le, createVNode as l, mergeProps as oe } from "vue";
import { c as se, _ as ie } from "../chunks/helper-chunk.mjs";
import { Input as ue, Flex as re } from "ant-design-vue";
import { b as c } from "../chunks/module-chunk.mjs";
import ce from "../_util/pick-attrs.mjs";
import de from "../_util/hooks/use-x-component-config.mjs";
import "../x-provider/index.mjs";
import { SenderHeaderContextProvider as fe } from "./context.mjs";
import { ActionButtonContextProvider as me } from "./components/ActionButton/context.mjs";
import ve from "./components/ClearButton.mjs";
import F from "./components/LoadingButton.mjs";
import B from "./components/SendButton.mjs";
import I from "./components/SpeechButton/index.mjs";
import ye from "./style/index.mjs";
import Ce from "./useSpeech.mjs";
import he from "../_util/getValue.mjs";
import Se from "../x-provider/hooks/use-x-provider-context.mjs";
const ge = /* @__PURE__ */ ee({
  name: "AXSender",
  __name: "Sender",
  props: te({
    onKeyPress: {
      type: Function,
      required: !1
    },
    onFocus: {
      type: null,
      required: !1
    },
    onBlur: {
      type: null,
      required: !1
    },
    prefixCls: {
      type: String,
      required: !1
    },
    defaultValue: {
      type: String,
      required: !1
    },
    value: {
      type: String,
      required: !1
    },
    loading: {
      type: Boolean,
      required: !1
    },
    placeholder: {
      type: null,
      required: !1
    },
    readOnly: {
      type: Boolean,
      required: !1
    },
    submitType: {
      type: [String, Boolean],
      required: !1
    },
    disabled: {
      type: Boolean,
      required: !1
    },
    sendDisabled: {
      type: Boolean,
      required: !1
    },
    onSubmit: {
      type: Function,
      required: !1
    },
    onChange: {
      type: Function,
      required: !1
    },
    onCancel: {
      required: !1
    },
    onKeyDown: {
      type: Function,
      required: !1
    },
    onPaste: {
      type: Function,
      required: !1
    },
    onPasteFile: {
      type: Function,
      required: !1
    },
    components: {
      type: Object,
      required: !1
    },
    styles: {
      type: Object,
      required: !1
    },
    rootClassName: {
      type: String,
      required: !1
    },
    classNames: {
      type: Object,
      required: !1
    },
    style: {
      required: !1
    },
    className: {
      type: String,
      required: !1
    },
    actions: {
      type: [Function, Boolean],
      skipCheck: !0,
      required: !1
    },
    allowSpeech: {
      required: !1
    },
    prefix: {
      type: Function,
      skipCheck: !0,
      required: !1
    },
    footer: {
      type: Function,
      skipCheck: !0,
      required: !1
    },
    header: {
      type: Function,
      skipCheck: !0,
      required: !1
    },
    autoSize: {
      required: !1
    }
  }, {
    styles: () => ({}),
    classNames: () => ({}),
    submitType: "enter",
    actions: void 0,
    disabled: void 0,
    autoSize: () => ({
      maxRows: 8
    })
  }),
  emits: ["update:value"],
  setup(e, {
    expose: k,
    emit: p
  }) {
    const $ = se(e, ["prefixCls", "styles", "classNames", "className", "rootClassName", "style", "defaultValue", "value", "placeholder", "readOnly", "submitType", "onSubmit", "sendDisabled", "loading", "components", "onCancel", "onChange", "actions", "onKeyPress", "onKeyDown", "disabled", "allowSpeech", "prefix", "footer", "header", "onPaste", "onPasteFile", "autoSize"]);
    ne(e, "prefixCls");
    function K(t, n, r) {
      return he(t, n) || r;
    }
    const m = {
      SendButton: B,
      ClearButton: ve,
      LoadingButton: F,
      SpeechButton: I
    }, R = p, i = ae(), {
      direction: O,
      getPrefixCls: V
    } = Se(), o = a(() => V("sender", e.prefixCls)), v = f(null), d = f(null), s = de("sender"), S = a(() => `${o.value}-input`), [z, E, T] = ye(o.value), A = a(() => c(o.value, s.value.className, e.className, e.rootClassName, E.value, T, {
      [`${o.value}-rtl`]: O.value === "rtl",
      [`${o.value}-disabled`]: e.disabled
    })), j = a(() => `${o.value}-actions-btn`), g = a(() => `${o.value}-actions-list`), u = f(e.value ?? e.defaultValue ?? ""), b = (t) => {
      u.value = t;
    };
    le(() => e.value, () => {
      b(e.value);
    });
    const y = (t, n) => {
      b(t), R("update:value", t), e.onChange && e.onChange(t, n);
    }, {
      speechPermission: X,
      triggerSpeech: x,
      recording: L
    } = Ce((t) => {
      y(`${u.value} ${t}`);
    }, () => e.allowSpeech), M = K(e.components, ["input"], ue.TextArea), H = a(() => ce($, {
      attr: !0,
      aria: !0,
      data: !0
    })), U = a(() => ({
      ...H.value,
      ref: d
    })), C = () => {
      (e.sendDisabled !== void 0 ? !e.sendDisabled : !!(u.value && !e.loading)) && !!e.onSubmit && e.onSubmit(u.value);
    }, G = () => {
      y("");
    }, h = f(!1), J = () => {
      h.value = !0;
    }, Q = () => {
      h.value = !1;
    }, W = (t) => {
      const n = t.key === "Enter" && !h.value;
      switch (e.submitType) {
        case "enter":
          n && !t.shiftKey && (t.preventDefault(), C());
          break;
        case "shiftEnter":
          n && t.shiftKey && (t.preventDefault(), C());
          break;
      }
      e.onKeyPress && e.onKeyPress(t);
    }, Y = (t) => {
      var r, w;
      const n = (r = t.clipboardData) == null ? void 0 : r.files;
      n != null && n.length && e.onPasteFile && (e.onPasteFile(n[0], n), t.preventDefault()), (w = e.onPaste) == null || w.call(e, t);
    }, Z = (t) => {
      var n, r;
      t.target !== ((n = v.value) == null ? void 0 : n.querySelector(`.${S.value}`)) && t.preventDefault(), (r = d.value) == null || r.focus();
    }, q = a(() => {
      let t = l(re, {
        class: `${g.value}-presets`
      }, {
        default: () => [e.allowSpeech && l(I, typeof e.allowSpeech == "object" ? {
          audioIcon: e.allowSpeech.audioIcon,
          audioDisabledIcon: e.allowSpeech.audioDisabledIcon,
          audioRecordingIcon: e.allowSpeech.audioRecordingIcon
        } : {}, null), e.loading ? l(F, null, null) : l(B, null, null)]
      });
      const n = {
        components: m
      };
      return i.actions ? t = i.actions({
        ori: t,
        info: n
      }) : typeof e.actions == "function" ? t = e.actions(t, n) : (e.actions || e.actions === !1) && (t = e.actions), t;
    }), _ = a(() => ({
      prefixCls: j.value,
      onSend: C,
      onSendDisabled: e.sendDisabled !== void 0 ? e.sendDisabled : !u.value,
      onClear: G,
      onClearDisabled: !u.value,
      onCancel: e.onCancel,
      onCancelDisabled: !e.loading,
      onSpeech: () => x(!1),
      onSpeechDisabled: !X.value,
      speechRecording: L.value,
      disabled: e.disabled
    })), P = a(() => {
      let t = null;
      const n = {
        components: m
      };
      return i.footer ? t = i.footer({
        info: n
      }) : typeof e.footer == "function" ? t = e.footer({
        components: m
      }) : e.footer && (t = e.footer), t;
    }), N = a(() => i.header ? i.header() : typeof e.header == "function" ? e.header() : e.header), D = a(() => i.prefix ? i.prefix() : typeof e.prefix == "function" ? e.prefix() : e.prefix);
    return k({
      nativeElement: v.value,
      // @ts-expect-error
      focus: (t) => {
        var n;
        return (n = d.value) == null ? void 0 : n.focus(t);
      },
      // @ts-expect-error
      blur: () => {
        var t;
        return (t = d.value) == null ? void 0 : t.blur();
      }
    }), () => z(l("div", {
      ref: v,
      class: A.value,
      style: {
        ...s.value.style,
        ...e.style
      }
    }, [N.value && l(fe, {
      value: {
        prefixCls: o.value
      }
    }, {
      default: () => [N.value]
    }), l(me, {
      value: _.value
    }, {
      default: () => [l("div", {
        class: `${o.value}-content`,
        onMousedown: Z
      }, [D.value && l("div", {
        class: c(`${o.value}-prefix`, s.value.classNames.prefix, e.classNames.prefix),
        style: {
          ...s.value.styles.prefix,
          ...e.styles.prefix
        }
      }, [D.value]), l(M, oe(U.value, {
        disabled: e.disabled,
        style: {
          ...s.value.styles.input,
          ...e.styles.input
        },
        class: c(S.value, s.value.classNames.input, e.classNames.input),
        autoSize: e.autoSize,
        value: u.value,
        onChange: (t) => {
          y(t.target.value, t), x(!0);
        },
        onPressEnter: W,
        onCompositionstart: J,
        onCompositionend: Q,
        onKeydown: e.onKeyDown,
        placeholder: e.placeholder,
        onPaste: Y,
        bordered: !1,
        readOnly: e.readOnly
      }), null), q.value && l("div", {
        class: c(g.value, s.value.classNames.actions, e.classNames.actions),
        style: {
          ...s.value.styles.actions,
          ...e.styles.actions
        }
      }, [q.value])]), P.value && l("div", {
        class: c(`${o.value}-footer`, s.value.classNames.footer, e.classNames.footer),
        style: {
          ...s.value.styles.footer,
          ...e.styles.footer
        }
      }, [P.value])]
    })]));
  }
}), ze = /* @__PURE__ */ ie(ge, [["__file", "/Users/wangzhichao/办公/code/github/ant-design-x-vue-pure/ant-design-x-vue/src/sender/Sender.vue"]]);
export {
  ze as default
};