jadq-x-vue/es/sender/Sender.mjs

Craft AI-driven interfaces effortlessly

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