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