@dialpad/dialtone-vue 3.150.0 → 3.150.1

package/dist/lib/message-input.js

@@ -1,834 +1,5 @@
-import { Node, mergeAttributes } from "@tiptap/core";
-import { NodeViewWrapper, nodeViewProps, VueNodeViewRenderer } from "@tiptap/vue-3";
-import { resolveComponent, openBlock, createBlock, withCtx, createVNode, createElementVNode, createTextVNode, toDisplayString, resolveDirective, createElementBlock, normalizeClass, withModifiers, renderSlot, withDirectives, normalizeStyle, mergeProps, createCommentVNode, vShow, createSlots } from "vue";
-import { _export_sfc } from "../chunks/_plugin-vue_export-helper-caHeSgYY.js";
-import { DtItemLayout } from "./item-layout.js";
-import { DtIcon } from "./icon.js";
-import { DtButton } from "./button.js";
-import { DtEmojiPicker as _sfc_main$2 } from "./emoji-picker.js";
-import { DtInput } from "./input.js";
-import { DtPopover } from "./popover.js";
-import { DtRichTextEditor, RICH_TEXT_EDITOR_AUTOFOCUS_TYPES, RICH_TEXT_EDITOR_OUTPUT_FORMATS } from "./rich-text-editor.js";
-import { DtTooltip } from "./tooltip.js";
-import "../common/utils.js";
-import "../common/constants.js";
-import "@dialpad/dialtone-icons/vue3";
-import "../chunks/icon_constants-H9ahUVCG.js";
-import "@dialpad/dialtone-icons/icons.js";
-import "../chunks/link_constants-AfTWrr-n.js";
-import "../chunks/tab-RTDgnD9-.js";
-import "@dialpad/dialtone-emojis";
-import "../chunks/input-NmYDD5bn.js";
-import "../common/validators.js";
-import "./validation-messages.js";
-import "../chunks/popover_constants-WsOUIY-m.js";
-import "tippy.js";
-import "../chunks/modal-XOr4kiNZ.js";
-import "../chunks/sr_only_close_button-3EdsV-dH.js";
-import "./lazy-show.js";
-import "@tiptap/extension-blockquote";
-import "@tiptap/extension-code-block";
-import "@tiptap/extension-document";
-import "@tiptap/extension-hard-break";
-import "@tiptap/extension-paragraph";
-import "@tiptap/extension-placeholder";
-import "@tiptap/extension-bold";
-import "@tiptap/extension-bullet-list";
-import "@tiptap/extension-italic";
-import "@tiptap/extension-link";
-import "@tiptap/extension-list-item";
-import "@tiptap/extension-ordered-list";
-import "@tiptap/extension-strike";
-import "@tiptap/extension-underline";
-import "@tiptap/extension-text";
-import "@tiptap/extension-text-align";
-import "@tiptap/extension-history";
-import "./emoji.js";
-import "../chunks/index-GVD15GIB.js";
-import "./skeleton.js";
-import "@tiptap/pm/state";
-import "@tiptap/suggestion";
-import "./list-item.js";
-import "../chunks/list_item_constants-u1xcN9Dd.js";
-import "./stack.js";
-import "../chunks/stack_constants-HraCekPm.js";
-import "@tiptap/extension-mention";
-import "./link.js";
-import "./avatar.js";
-import "./presence.js";
-import "@dialpad/dialtone-icons/vue3/hash";
-import "@dialpad/dialtone-icons/vue3/lock";
-const _sfc_main$1 = {
-  name: "MeetingPill",
-  components: {
-    NodeViewWrapper,
-    DtItemLayout,
-    DtIcon,
-    DtButton
-  },
-  props: nodeViewProps,
-  emits: ["meeting-pill-close"],
-  methods: {
-    close(e) {
-      this.$parent.$emit("meeting-pill-close", e);
-    }
-  }
-};
-const _hoisted_1$1 = { class: "dt-message-input-meeting-pill__icon" };
-const _hoisted_2$1 = { class: "dt-message-input-meeting-pill__close" };
-function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_dt_icon = resolveComponent("dt-icon");
-  const _component_dt_button = resolveComponent("dt-button");
-  const _component_dt_item_layout = resolveComponent("dt-item-layout");
-  const _component_node_view_wrapper = resolveComponent("node-view-wrapper");
-  return openBlock(), createBlock(_component_node_view_wrapper, { class: "dt-message-input-meeting-pill" }, {
-    default: withCtx(() => [
-      createVNode(_component_dt_item_layout, {
-        class: "dt-message-input-meeting-pill__layout",
-        unstyled: ""
-      }, {
-        left: withCtx(() => [
-          createElementVNode("div", _hoisted_1$1, [
-            createVNode(_component_dt_icon, {
-              name: "video",
-              size: "400"
-            })
-          ])
-        ]),
-        right: withCtx(() => [
-          createElementVNode("div", _hoisted_2$1, [
-            createVNode(_component_dt_button, {
-              circle: "",
-              "aria-label": _ctx.node.attrs["close-button-aria-label"],
-              size: "xs",
-              importance: "clear",
-              onClick: $options.close
-            }, {
-              icon: withCtx(() => [
-                createVNode(_component_dt_icon, {
-                  name: "close",
-                  size: "300"
-                })
-              ]),
-              _: 1
-            }, 8, ["aria-label", "onClick"])
-          ])
-        ]),
-        default: withCtx(() => [
-          createTextVNode(" " + toDisplayString(_ctx.node.attrs.text) + " ", 1)
-        ]),
-        _: 1
-      })
-    ]),
-    _: 1
-  });
-}
-const MeetingPill = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
-const meetingPill = Node.create({
-  atom: true,
-  group: "inline",
-  inline: true,
-  addNodeView() {
-    return VueNodeViewRenderer(MeetingPill);
-  },
-  addAttributes() {
-    return {
-      text: {
-        default: 'Please pass in "text" attribute'
-      },
-      "close-button-aria-label": {}
-    };
-  },
-  parseHTML() {
-    return [
-      {
-        tag: "meeting-pill"
-      }
-    ];
-  },
-  renderText({ node }) {
-    return "/dpm";
-  },
-  renderHTML({ HTMLAttributes }) {
-    return ["meeting-pill", mergeAttributes(HTMLAttributes)];
-  }
-});
-const _sfc_main = {
-  name: "DtRecipeMessageInput",
-  components: {
-    DtButton,
-    DtEmojiPicker: _sfc_main$2,
-    DtIcon,
-    DtInput,
-    DtPopover,
-    DtRichTextEditor,
-    DtTooltip
-  },
-  mixins: [],
-  inheritAttrs: false,
-  props: {
-    /**
-     * Value of the input. The object format should match TipTap's JSON
-     * document structure: https://tiptap.dev/guide/output#option-1-json
-     */
-    modelValue: {
-      type: [Object, String],
-      default: ""
-    },
-    /**
-     * Whether the input is editable
-     */
-    editable: {
-      type: Boolean,
-      default: true
-    },
-    /**
-     * Descriptive label for the input element
-     */
-    inputAriaLabel: {
-      type: String,
-      required: true,
-      default: ""
-    },
-    /**
-     * Prevents the user from typing any further. Deleting text will still work.
-     */
-    preventTyping: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * Additional class name for the input element. Only accepts a String value
-     * because this is passed to the editor via options. For multiple classes,
-     * join them into one string, e.g. "d-p8 d-hmx96"
-     */
-    inputClass: {
-      type: String,
-      default: ""
-    },
-    /**
-     * Whether the input should receive focus after the component has been
-     * mounted. Either one of `start`, `end`, `all` or a Boolean or a Number.
-     * - `start`  Sets the focus to the beginning of the input
-     * - `end`    Sets the focus to the end of the input
-     * - `all`    Selects the whole contents of the input
-     * - `Number` Sets the focus to a specific position in the input
-     * - `true`   Defaults to `start`
-     * - `false`  Disables autofocus
-     * @values true, false, start, end, all, number
-     */
-    autoFocus: {
-      type: [Boolean, String, Number],
-      default: false,
-      validator(autoFocus) {
-        if (typeof autoFocus === "string") {
-          return RICH_TEXT_EDITOR_AUTOFOCUS_TYPES.includes(autoFocus);
-        }
-        return true;
-      }
-    },
-    /**
-     * The output format that the editor uses when emitting the "@input" event.
-     * One of `text`, `json`, `html`. See https://tiptap.dev/guide/output for
-     * examples.
-     * @values text, json, html
-     */
-    outputFormat: {
-      type: String,
-      default: "text",
-      validator(outputFormat) {
-        return RICH_TEXT_EDITOR_OUTPUT_FORMATS.includes(outputFormat);
-      }
-    },
-    /**
-     * Enables the Link extension and optionally passes configurations to it
-     */
-    link: {
-      type: [Boolean, Object],
-      default: true
-    },
-    /**
-     * Placeholder text
-     */
-    placeholder: {
-      type: String,
-      default: ""
-    },
-    /**
-     * Disable Send Button
-     */
-    disableSend: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * Content area needs to dynamically adjust height based on the conversation area height.
-     * can be vh|px|rem|em|%
-     */
-    maxHeight: {
-      type: String,
-      default: "unset"
-    },
-    // Emoji picker props
-    showEmojiPicker: {
-      type: Boolean,
-      default: true
-    },
-    /**
-     * Props to pass into the emoji picker.
-     */
-    emojiPickerProps: {
-      type: Object,
-      default: () => ({}),
-      validate(emojiPickerProps) {
-        return [
-          "searchNoResultsLabel",
-          "searchResultsLabel",
-          "searchPlaceholderLabel",
-          "skinSelectorButtonTooltipLabel",
-          "tabSetLabels"
-        ].every((prop) => emojiPickerProps[prop] != null);
-      }
-    },
-    /**
-     * Emoji button tooltip label
-     */
-    emojiTooltipMessage: {
-      type: String,
-      default: "Emoji"
-    },
-    // Aria label for buttons
-    /**
-     * Emoji button aria label
-     */
-    emojiButtonAriaLabel: {
-      type: String,
-      default: "emoji button"
-    },
-    /**
-     * Enable character Limit warning
-     */
-    showCharacterLimit: {
-      type: [Boolean, Object],
-      default: () => ({ count: 1500, warning: 500, message: "" })
-    },
-    showImagePicker: {
-      type: [Boolean, Object],
-      default: () => ({ tooltipLabel: "Attach Image", ariaLabel: "image button" })
-    },
-    /**
-     * Send button defaults.
-     */
-    showSend: {
-      type: [Boolean, Object],
-      default: () => ({ icon: "send" })
-    },
-    /**
-     * Cancel button defaults.
-     */
-    showCancel: {
-      type: [Boolean, Object],
-      default: () => ({ text: "Cancel" })
-    },
-    /**
-     * suggestion object containing the items query function.
-     * The valid keys passed into this object can be found here: https://tiptap.dev/api/utilities/suggestion
-     *
-     * The only required key is the items function which is used to query the contacts for suggestion.
-     * items({ query }) => { return [ContactObject]; }
-     * ContactObject format:
-     * { name: string, avatarSrc: string, id: string }
-     *
-     * When null, it does not add the plugin.
-     */
-    mentionSuggestion: {
-      type: Object,
-      default: null
-    },
-    /**
-     * suggestion object containing the items query function.
-     * The valid keys passed into this object can be found here: https://tiptap.dev/api/utilities/suggestion
-     *
-     * The only required key is the items function which is used to query the channels for suggestion.
-     * items({ query }) => { return [ChannelObject]; }
-     * ChannelObject format:
-     * { name: string, id: string, locked: boolean }
-     *
-     * When null, it does not add the plugin. Setting locked to true will display a lock rather than hash.
-     */
-    channelSuggestion: {
-      type: Object,
-      default: null
-    },
-    /**
-     * suggestion object containing the items query function.
-     * The valid keys passed into this object can be found here: https://tiptap.dev/api/utilities/suggestion
-     *
-     * The only required key is the items function which is used to query the slash commands for suggestion.
-     * items({ query }) => { return [SlashCommandObject]; }
-     * SlashCommandObject format:
-     * { command: string, description: string, parametersExample?: string }
-     * The "parametersExample" parameter is optional, and describes an example
-     * of the parameters that command can take.
-     *
-     * When null, it does not add the plugin.
-     */
-    slashCommandSuggestion: {
-      type: Object,
-      default: null
-    },
-    /**
-     * Whether the input allows for block quote.
-     */
-    allowBlockquote: {
-      type: Boolean,
-      default: true
-    },
-    /**
-     * Whether the input allows for bold to be introduced in the text.
-     */
-    allowBold: {
-      type: Boolean,
-      default: true
-    },
-    /**
-     * Whether the input allows for bullet list to be introduced in the text.
-    */
-    allowBulletList: {
-      type: Boolean,
-      default: true
-    },
-    /**
-     * Whether the input allows for italic to be introduced in the text.
-     */
-    allowItalic: {
-      type: Boolean,
-      default: true
-    },
-    /**
-     * Whether the input allows for strike to be introduced in the text.
-     */
-    allowStrike: {
-      type: Boolean,
-      default: true
-    },
-    /**
-     * Whether the input allows for underline to be introduced in the text.
-     */
-    allowUnderline: {
-      type: Boolean,
-      default: true
-    },
-    /**
-     * Whether the input allows codeblock to be introduced in the text.
-     */
-    allowCodeblock: {
-      type: Boolean,
-      default: true
-    }
-  },
-  emits: [
-    /**
-     * Fires when send button is clicked
-     *
-     * @event submit
-     * @type {String}
-     */
-    "submit",
-    /**
-     * Fires when media is selected from image button
-     *
-     * @event select-media
-     * @type {Array}
-     */
-    "select-media",
-    /**
-     * Fires when media is dropped into the message input
-     *
-     * @event add-media
-     * @type {Array}
-     */
-    "add-media",
-    /**
-     * Fires when media is pasted into the message input
-     *
-     * @event paste-media
-     * @type {Array}
-     */
-    "paste-media",
-    /**
-     * Fires when cancel button is pressed (only on edit mode)
-     *
-     * @event cancel
-     * @type {Boolean}
-     */
-    "cancel",
-    /**
-     * Fires when skin tone is selected from the emoji picker
-     *
-     * @event skin-tone
-     * @type {String}
-     */
-    "skin-tone",
-    /**
-     * Fires when emoji is selected from the emoji picker
-     *
-     * @event selected-emoji
-     * @type {String}
-     */
-    "selected-emoji",
-    /**
-     * Fires when a slash command is selected
-     *
-     * @event selected-command
-     * @type {String}
-     */
-    "selected-command",
-    /**
-     * Fires when meeting pill is closed
-     *
-     * @event meeting-pill-close
-     * @type {String}
-     */
-    "meeting-pill-close",
-    /**
-     * Event to sync the value with the parent
-     * @event update:modelValue
-     * @type {String|JSON}
-     */
-    "update:modelValue"
-  ],
-  data() {
-    return {
-      additionalExtensions: [meetingPill],
-      internalInputValue: this.modelValue,
-      // internal input content
-      imagePickerFocus: false,
-      emojiPickerFocus: false,
-      emojiPickerOpened: false
-    };
-  },
-  computed: {
-    inputLength() {
-      return this.internalInputValue.length;
-    },
-    displayCharacterLimitWarning() {
-      return Boolean(this.showCharacterLimit) && this.showCharacterLimit.count - this.inputLength <= this.showCharacterLimit.warning;
-    },
-    characterLimitTooltipEnabled() {
-      return this.showCharacterLimit.message && this.showCharacterLimit.count - this.inputLength < 0;
-    },
-    isSendDisabled() {
-      return this.disableSend || this.showCharacterLimit && this.inputLength > this.showCharacterLimit.count;
-    },
-    computedCloseButtonProps() {
-      return {
-        ariaLabel: "Close"
-      };
-    },
-    emojiPickerHovered() {
-      return this.emojiPickerFocus || this.emojiPickerOpened;
-    }
-  },
-  watch: {
-    modelValue(newValue) {
-      this.internalInputValue = newValue;
-    },
-    emojiPickerOpened(newValue) {
-      var _a;
-      if (!newValue) {
-        (_a = this.$refs.richTextEditor) == null ? void 0 : _a.focusEditor();
-      }
-    }
-  },
-  created() {
-    if (this.modelValue && this.outputFormat === "text") {
-      this.internalInputValue = this.modelValue.replace(/\n/g, "<br>");
-    }
-  },
-  methods: {
-    // Mousedown instead of click because it fires before the blur event.
-    onMousedown(e) {
-      const isWithinInput = this.$refs.richTextEditor.$el.querySelector(".tiptap").contains(e.target);
-      if (!isWithinInput) {
-        e.preventDefault();
-        this.$refs.richTextEditor.focusEditor();
-      }
-    },
-    onDrop(e) {
-      const dt = e.dataTransfer;
-      const files = Array.from(dt.files);
-      this.$emit("add-media", files);
-    },
-    onPaste(e) {
-      if (e.clipboardData.files.length) {
-        e.stopPropagation();
-        e.preventDefault();
-        const files = [...e.clipboardData.files];
-        this.$emit("paste-media", files);
-      }
-    },
-    onSkinTone(skinTone) {
-      this.$emit("skin-tone", skinTone);
-    },
-    onSelectEmoji(emoji) {
-      if (!emoji) {
-        return;
-      }
-      this.$refs.richTextEditor.editor.commands.insertContent({
-        type: "emoji",
-        attrs: {
-          code: emoji.shortname
-        }
-      });
-      this.$emit("selected-emoji", emoji);
-    },
-    onSelectImage() {
-      this.$refs.messageInputImageUpload.$refs.input.click();
-    },
-    onImageUpload() {
-      this.$emit("select-media", this.$refs.messageInputImageUpload.$refs.input.files);
-    },
-    toggleEmojiPicker() {
-      this.emojiPickerOpened = !this.emojiPickerOpened;
-    },
-    onSend() {
-      if (this.isSendDisabled) {
-        return;
-      }
-      this.$emit("submit", this.internalInputValue);
-    },
-    onCancel() {
-      this.$emit("cancel");
-    },
-    onInput(event) {
-      this.$emit("update:modelValue", event);
-    }
-  }
-};
-const _hoisted_1 = { class: "dt-message-input__bottom-section" };
-const _hoisted_2 = { class: "dt-message-input__bottom-section-left" };
-const _hoisted_3 = { class: "dt-message-input__bottom-section-right" };
-const _hoisted_4 = { class: "d-d-flex d-ai-center" };
-const _hoisted_5 = { key: 0 };
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  var _a;
-  const _component_dt_rich_text_editor = resolveComponent("dt-rich-text-editor");
-  const _component_dt_icon = resolveComponent("dt-icon");
-  const _component_dt_button = resolveComponent("dt-button");
-  const _component_dt_input = resolveComponent("dt-input");
-  const _component_dt_emoji_picker = resolveComponent("dt-emoji-picker");
-  const _component_dt_popover = resolveComponent("dt-popover");
-  const _component_dt_tooltip = resolveComponent("dt-tooltip");
-  const _directive_dt_scrollbar = resolveDirective("dt-scrollbar");
-  const _directive_dt_tooltip = resolveDirective("dt-tooltip");
-  return openBlock(), createElementBlock("div", {
-    "data-qa": "dt-message-input",
-    role: "presentation",
-    class: normalizeClass(["dt-message-input"]),
-    onDragover: _cache[10] || (_cache[10] = withModifiers(() => {
-    }, ["prevent"])),
-    onDrop: _cache[11] || (_cache[11] = withModifiers((...args) => $options.onDrop && $options.onDrop(...args), ["prevent"])),
-    onPaste: _cache[12] || (_cache[12] = (...args) => $options.onPaste && $options.onPaste(...args)),
-    onMousedown: _cache[13] || (_cache[13] = (...args) => $options.onMousedown && $options.onMousedown(...args))
-  }, [
-    renderSlot(_ctx.$slots, "top"),
-    withDirectives((openBlock(), createElementBlock("div", {
-      class: "dt-message-input__editor-wrapper",
-      style: normalizeStyle({ "max-height": $props.maxHeight })
-    }, [
-      createVNode(_component_dt_rich_text_editor, mergeProps({
-        ref: "richTextEditor",
-        modelValue: $data.internalInputValue,
-        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => $data.internalInputValue = $event),
-        "allow-blockquote": $props.allowBlockquote,
-        "allow-bold": $props.allowBold,
-        "allow-bullet-list": $props.allowBulletList,
-        "allow-codeblock": $props.allowCodeblock,
-        "allow-italic": $props.allowItalic,
-        "allow-strike": $props.allowStrike,
-        "allow-underline": $props.allowUnderline,
-        editable: $props.editable,
-        "input-aria-label": $props.inputAriaLabel,
-        "input-class": $props.inputClass,
-        "output-format": $props.outputFormat,
-        "auto-focus": $props.autoFocus,
-        link: $props.link,
-        placeholder: $props.placeholder,
-        "prevent-typing": $props.preventTyping,
-        "mention-suggestion": $props.mentionSuggestion,
-        "channel-suggestion": $props.channelSuggestion,
-        "slash-command-suggestion": $props.slashCommandSuggestion,
-        "additional-extensions": $data.additionalExtensions
-      }, _ctx.$attrs, { onInput: $options.onInput }), null, 16, ["modelValue", "allow-blockquote", "allow-bold", "allow-bullet-list", "allow-codeblock", "allow-italic", "allow-strike", "allow-underline", "editable", "input-aria-label", "input-class", "output-format", "auto-focus", "link", "placeholder", "prevent-typing", "mention-suggestion", "channel-suggestion", "slash-command-suggestion", "additional-extensions", "onInput"])
-    ], 4)), [
-      [_directive_dt_scrollbar]
-    ]),
-    renderSlot(_ctx.$slots, "middle"),
-    createElementVNode("section", _hoisted_1, [
-      createElementVNode("div", _hoisted_2, [
-        $props.showImagePicker ? withDirectives((openBlock(), createBlock(_component_dt_button, {
-          key: 0,
-          "data-qa": "dt-message-input-image-btn",
-          size: "sm",
-          circle: "",
-          kind: $data.imagePickerFocus ? "default" : "muted",
-          importance: "clear",
-          "aria-label": $props.showImagePicker.ariaLabel,
-          onClick: $options.onSelectImage,
-          onMouseenter: _cache[1] || (_cache[1] = ($event) => $data.imagePickerFocus = true),
-          onMouseleave: _cache[2] || (_cache[2] = ($event) => $data.imagePickerFocus = false),
-          onFocus: _cache[3] || (_cache[3] = ($event) => $data.imagePickerFocus = true),
-          onBlur: _cache[4] || (_cache[4] = ($event) => $data.imagePickerFocus = false)
-        }, {
-          icon: withCtx(() => [
-            createVNode(_component_dt_icon, {
-              name: "image",
-              size: "300"
-            })
-          ]),
-          _: 1
-        }, 8, ["kind", "aria-label", "onClick"])), [
-          [_directive_dt_tooltip, (_a = $props.showImagePicker) == null ? void 0 : _a.tooltipLabel, "top-start"]
-        ]) : createCommentVNode("", true),
-        createVNode(_component_dt_input, {
-          ref: "messageInputImageUpload",
-          "data-qa": "dt-message-input-image-input",
-          accept: "image/*, video/*",
-          type: "file",
-          class: "dt-message-input__image-input",
-          multiple: "",
-          hidden: "",
-          onInput: $options.onImageUpload
-        }, null, 8, ["onInput"]),
-        $props.showEmojiPicker ? (openBlock(), createBlock(_component_dt_popover, {
-          key: 1,
-          open: $data.emojiPickerOpened,
-          "onUpdate:open": _cache[9] || (_cache[9] = ($event) => $data.emojiPickerOpened = $event),
-          "data-qa": "dt-message-input-emoji-picker-popover",
-          "initial-focus-element": "#searchInput",
-          padding: "none"
-        }, {
-          anchor: withCtx(({ attrs }) => [
-            withDirectives((openBlock(), createBlock(_component_dt_button, mergeProps(attrs, {
-              "data-qa": "dt-message-input-emoji-picker-btn",
-              size: "sm",
-              circle: "",
-              kind: $options.emojiPickerHovered ? "default" : "muted",
-              importance: "clear",
-              "aria-label": $props.emojiButtonAriaLabel,
-              onClick: $options.toggleEmojiPicker,
-              onMouseenter: _cache[5] || (_cache[5] = ($event) => $data.emojiPickerFocus = true),
-              onMouseleave: _cache[6] || (_cache[6] = ($event) => $data.emojiPickerFocus = false),
-              onFocus: _cache[7] || (_cache[7] = ($event) => $data.emojiPickerFocus = true),
-              onBlur: _cache[8] || (_cache[8] = ($event) => $data.emojiPickerFocus = false)
-            }), {
-              icon: withCtx(() => [
-                createVNode(_component_dt_icon, {
-                  name: !$options.emojiPickerHovered ? "satisfied" : "very-satisfied",
-                  size: "300"
-                }, null, 8, ["name"])
-              ]),
-              _: 2
-            }, 1040, ["kind", "aria-label", "onClick"])), [
-              [_directive_dt_tooltip, $props.emojiTooltipMessage]
-            ])
-          ]),
-          content: withCtx(({ close }) => [
-            createVNode(_component_dt_emoji_picker, mergeProps($props.emojiPickerProps, {
-              onSkinTone: $options.onSkinTone,
-              onSelectedEmoji: (emoji) => {
-                close();
-                $options.onSelectEmoji(emoji);
-              }
-            }), null, 16, ["onSkinTone", "onSelectedEmoji"])
-          ]),
-          _: 1
-        }, 8, ["open"])) : createCommentVNode("", true),
-        renderSlot(_ctx.$slots, "emojiGiphyPicker")
-      ]),
-      createElementVNode("div", _hoisted_3, [
-        createElementVNode("div", _hoisted_4, [
-          renderSlot(_ctx.$slots, "smsCount")
-        ]),
-        Boolean($props.showCharacterLimit) ? (openBlock(), createBlock(_component_dt_tooltip, {
-          key: 0,
-          class: "dt-message-input__remaining-char-tooltip",
-          placement: "top-end",
-          enabled: $options.characterLimitTooltipEnabled,
-          message: $props.showCharacterLimit.message,
-          offset: [10, 8]
-        }, {
-          anchor: withCtx(() => [
-            withDirectives(createElementVNode("p", {
-              class: "dt-message-input__remaining-char",
-              "data-qa": "dt-message-input-character-limit"
-            }, toDisplayString($props.showCharacterLimit.count - $options.inputLength), 513), [
-              [vShow, $options.displayCharacterLimitWarning]
-            ])
-          ]),
-          _: 1
-        }, 8, ["enabled", "message"])) : createCommentVNode("", true),
-        $props.showCancel ? (openBlock(), createBlock(_component_dt_button, {
-          key: 1,
-          "data-qa": "dt-message-input-cancel-button",
-          class: "dt-message-input__cancel-button",
-          size: "sm",
-          kind: "muted",
-          importance: "clear",
-          "aria-label": $props.showCancel.ariaLabel,
-          onClick: $options.onCancel
-        }, {
-          default: withCtx(() => [
-            createElementVNode("p", null, toDisplayString($props.showCancel.text), 1)
-          ]),
-          _: 1
-        }, 8, ["aria-label", "onClick"])) : createCommentVNode("", true),
-        renderSlot(_ctx.$slots, "sendButton", {}, () => {
-          var _a2;
-          return [
-            $props.showSend ? withDirectives((openBlock(), createBlock(_component_dt_button, {
-              key: 0,
-              "data-qa": "dt-message-input-send-btn",
-              size: "sm",
-              kind: "default",
-              importance: "primary",
-              class: normalizeClass([
-                {
-                  "dt-message-input__send-button--disabled": $options.isSendDisabled,
-                  "d-btn--circle": $props.showSend.icon
-                }
-              ]),
-              "aria-label": $props.showSend.ariaLabel,
-              "aria-disabled": $options.isSendDisabled,
-              onClick: $options.onSend
-            }, createSlots({
-              default: withCtx(() => [
-                $props.showSend.text ? (openBlock(), createElementBlock("p", _hoisted_5, toDisplayString($props.showSend.text), 1)) : createCommentVNode("", true)
-              ]),
-              _: 2
-            }, [
-              $props.showSend.icon ? {
-                name: "icon",
-                fn: withCtx(() => [
-                  createVNode(_component_dt_icon, {
-                    name: $props.showSend.icon,
-                    size: "300"
-                  }, null, 8, ["name"])
-                ]),
-                key: "0"
-              } : void 0
-            ]), 1032, ["class", "aria-label", "aria-disabled", "onClick"])), [
-              [_directive_dt_tooltip, (_a2 = $props.showSend) == null ? void 0 : _a2.tooltipLabel, "top-end"]
-            ]) : createCommentVNode("", true)
-          ];
-        })
-      ])
-    ])
-  ], 32);
-}
-const message_input = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+import { default as default2 } from "../recipes/conversation_view/message_input/message_input.vue.js";
 export {
-  message_input as DtRecipeMessageInput
+  default2 as DtRecipeMessageInput
 };
 //# sourceMappingURL=message-input.js.map