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

Craft AI-driven interfaces effortlessly

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