ele-admin-plus 1.5.1-beta.4 → 1.6.0-beta.2

package/lib/ele-chat/components/input-tool.d.ts

@@ -0,0 +1,67 @@
+import { EleDropdownPropsAndEmits } from '../../ele-app/plus';
+
+declare function __VLS_template(): Readonly<{
+    /** 默认插槽 */
+    default: () => any;
+    /** 最前面插槽 */
+    prefix: () => any;
+}> & {
+    /** 默认插槽 */
+    default: () => any;
+    /** 最前面插槽 */
+    prefix: () => any;
+};
+declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    icon: import('vue').PropType<import('../../ele-app/types').UserComponent>;
+    iconProps: import('vue').PropType<import('../../ele-app/el').ElIconProps>;
+    iconStyle: import('vue').PropType<import('../../ele-app/types').StyleValues>;
+    round: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    button: BooleanConstructor;
+    label: StringConstructor;
+    labelStyle: import('vue').PropType<import('../../ele-app/types').StyleValues>;
+    tooltipProps: import('vue').PropType<import('../../ele-app/plus').EleTooltipPropsAndEmits>;
+    dropdownProps: import('vue').PropType<EleDropdownPropsAndEmits>;
+    dropdownItems: import('vue').PropType<import('../../ele-dropdown/types').DropdownItem[]>;
+    type: import('vue').PropType<"default" | "primary">;
+    selected: BooleanConstructor;
+    disabled: BooleanConstructor;
+    loading: BooleanConstructor;
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    click: (_e: MouseEvent) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    icon: import('vue').PropType<import('../../ele-app/types').UserComponent>;
+    iconProps: import('vue').PropType<import('../../ele-app/el').ElIconProps>;
+    iconStyle: import('vue').PropType<import('../../ele-app/types').StyleValues>;
+    round: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    button: BooleanConstructor;
+    label: StringConstructor;
+    labelStyle: import('vue').PropType<import('../../ele-app/types').StyleValues>;
+    tooltipProps: import('vue').PropType<import('../../ele-app/plus').EleTooltipPropsAndEmits>;
+    dropdownProps: import('vue').PropType<EleDropdownPropsAndEmits>;
+    dropdownItems: import('vue').PropType<import('../../ele-dropdown/types').DropdownItem[]>;
+    type: import('vue').PropType<"default" | "primary">;
+    selected: BooleanConstructor;
+    disabled: BooleanConstructor;
+    loading: BooleanConstructor;
+}>> & Readonly<{
+    onClick?: ((_e: MouseEvent) => any) | undefined;
+}>, {
+    button: boolean;
+    round: boolean;
+    disabled: boolean;
+    loading: boolean;
+    selected: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/lib/ele-chat/index.cjs

@@ -0,0 +1,616 @@
+"use strict";
+const vue = require("vue");
+const elementPlus = require("element-plus");
+const index = require("../icons/index");
+const common = require("../utils/common");
+const hook = require("../utils/hook");
+const util$1 = require("../ele-tooltip-provider/util");
+const receiver = require("../ele-config-provider/receiver");
+const util = require("../ele-dropdown-provider/util");
+const util$2 = require("../ele-pro-layout/util");
+const EleImageViewer = require("../ele-image-viewer/index");
+const EleTooltip = require("../ele-tooltip/index");
+const EleDropdown = require("../ele-dropdown/index");
+const MainContent = require("../ele-loading/components/main-content");
+const ChatConversations = require("./components/chat-conversations");
+const ChatBubble = require("./components/chat-bubble");
+const ChatInput = require("./components/chat-input");
+const props = require("./props");
+const _hoisted_1 = { class: "ele-chat-logo-wrapper" };
+const _hoisted_2 = ["src"];
+const _hoisted_3 = { class: "ele-chat-logo-tools" };
+const _hoisted_4 = { class: "ele-chat-side-main" };
+const _hoisted_5 = { class: "ele-chat-side-tools" };
+const _hoisted_6 = {
+  key: 0,
+  class: "ele-chat-side-footer"
+};
+const _hoisted_7 = { class: "ele-chat-body" };
+const _hoisted_8 = ["src"];
+const _hoisted_9 = {
+  key: 1,
+  class: "ele-chat-backbottom"
+};
+const _hoisted_10 = { class: "ele-chat-bottom" };
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...{ name: "EleChat" },
+  __name: "index",
+  props: props.chatProps,
+  emits: props.chatEmits,
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props$1 = __props;
+    const emit = __emit;
+    const { lang } = receiver.useLocale("chat", props$1);
+    const {
+      dropdownRef,
+      dropdownVirtualRef,
+      dropdownItems: dropdownMergedItems,
+      dropdownProps: dropdownMergedProps,
+      openDropdown,
+      removeDropdown
+    } = util.useDropdownProviderPro();
+    const {
+      tooltipRef,
+      tooltipVirtualRef,
+      tooltipProps: tooltipMergedProps,
+      showTooltip,
+      removeTooltip
+    } = util$1.useTooltipProviderPro();
+    const isResponsive = util$2.useResponsive(props$1);
+    const [isMobileDevice] = hook.useMobileDevice();
+    const sideCollapse = vue.ref(props$1.collapse);
+    const previewVisible = vue.ref(false);
+    const previewProps = vue.ref({});
+    const contentRef = vue.ref(null);
+    const enableBackbottom = vue.ref(false);
+    const mobile = vue.ref(false);
+    const activeConversation = vue.computed(() => {
+      if (props$1.active == null || !props$1.conversations) {
+        return;
+      }
+      return common.findTree(props$1.conversations, (d) => d.key === props$1.active);
+    });
+    const imageObjectUrls = [];
+    let tooltipDisabled = false;
+    const [startDisableTooltipTimer] = hook.useTimer(350, () => {
+      tooltipDisabled = false;
+    });
+    const showTooltipPro = (triggerEl, options) => {
+      const tooltipProps = props$1.tooltipProps;
+      if (tooltipProps === false || tooltipDisabled || isMobileDevice.value) {
+        return;
+      }
+      showTooltip(triggerEl, {
+        ...props.defaultTooltipProps,
+        ...(tooltipProps === true ? void 0 : tooltipProps) || {},
+        ...options || {}
+      });
+    };
+    const updateCollapse = (collapse) => {
+      removeTooltip();
+      tooltipDisabled = true;
+      startDisableTooltipTimer();
+      sideCollapse.value = collapse ?? !sideCollapse.value;
+      emit("update:collapse", sideCollapse.value);
+    };
+    const handleCollapse = () => {
+      updateCollapse();
+    };
+    const handleLogoClick = (e) => {
+      emit("logoClick", e);
+    };
+    const handleNewBtnClick = (e) => {
+      emit("newBtnClick", e);
+      emit("update:active");
+    };
+    const handleChatItemClick = (item) => {
+      emit("conversationClick", item);
+    };
+    const handleSend = (content) => {
+      emit("send", content);
+    };
+    const handleSendBtnClick = (e) => {
+      emit("sendBtnClick", e);
+    };
+    const handleInput = (e) => {
+      emit("input", e);
+    };
+    const handleFocus = (e) => {
+      emit("focus", e);
+    };
+    const handleBlur = (e) => {
+      emit("blur", e);
+    };
+    const openImagePreview = (viewerProps) => {
+      previewProps.value = viewerProps;
+      previewVisible.value = true;
+    };
+    const getItemPreviewUrl = (item) => {
+      if (item.imageUrl) {
+        return item.imageUrl;
+      }
+      const itemFile = item.file;
+      if (itemFile != null && itemFile.type.startsWith("image")) {
+        const t = imageObjectUrls.find((u) => u.file === itemFile);
+        if (t != null) {
+          return t.url;
+        }
+        const url = URL.createObjectURL(itemFile);
+        imageObjectUrls.push({ file: itemFile, url });
+        return url;
+      }
+    };
+    const previewImage = (item, viewerProps, message) => {
+      const options = { ...viewerProps || {} };
+      if (!options.urlList) {
+        if (message) {
+          let index2 = -1;
+          const urls = [];
+          (message.files || []).forEach((f) => {
+            const url = getItemPreviewUrl(f);
+            if (url) {
+              if (f === item) {
+                index2 = urls.length;
+              }
+              urls.push(url);
+            }
+          });
+          options.urlList = urls;
+          options.initialIndex = index2;
+        } else {
+          let index2 = -1;
+          const urls = [];
+          (props$1.files || []).forEach((f) => {
+            const url = getItemPreviewUrl(f);
+            if (url) {
+              if (f === item) {
+                index2 = urls.length;
+              }
+              urls.push(url);
+            }
+          });
+          options.urlList = urls;
+          options.initialIndex = index2;
+        }
+      } else if (options.initialIndex == null) {
+        options.initialIndex = 0;
+      }
+      if (options.urlList?.length && options.initialIndex != null && options.initialIndex >= 0) {
+        openImagePreview(options);
+      }
+    };
+    const handleFileClick = (item) => {
+      const viewerProps = typeof props$1.imageViewerProps === "function" ? props$1.imageViewerProps(item) : props$1.imageViewerProps;
+      if (viewerProps !== false) {
+        previewImage(item, viewerProps === true ? void 0 : viewerProps);
+      }
+      emit("fileClick", item);
+    };
+    const handleFileRemove = (item) => {
+      emit("fileRemove", item);
+    };
+    const handleFileUpload = (item) => {
+      emit("fileUpload", item);
+    };
+    const handleUpdateModelValue = (content) => {
+      emit("update:modelValue", content);
+    };
+    const handleBubbleFileClick = (item, fileItem) => {
+      const viewerProps = typeof props$1.imageViewerProps === "function" ? props$1.imageViewerProps(fileItem, item) : props$1.imageViewerProps;
+      if (viewerProps !== false) {
+        previewImage(fileItem, viewerProps === true ? void 0 : viewerProps, item);
+      }
+      emit("bubbleFileClick", item, fileItem);
+    };
+    const handleBubbleFileRemove = (item, fileItem) => {
+      emit("bubbleFileRemove", item, fileItem);
+    };
+    const handleBubbleEditCancel = (item) => {
+      emit("bubbleEditCancel", item);
+    };
+    const handleBubbleEditConfirm = (item, content) => {
+      emit("bubbleEditConfirm", item, content);
+    };
+    const clearImageObjectUrls = () => {
+      imageObjectUrls.forEach((item) => {
+        URL.revokeObjectURL(item.url);
+      });
+      imageObjectUrls.splice(0, imageObjectUrls.length);
+    };
+    const handleUpdateActive = (active) => {
+      emit("update:active", active);
+    };
+    const handleLogoCollapseToolMouseenter = (e) => {
+      showTooltipPro(e.currentTarget, {
+        content: lang.value.sideFoldTip,
+        placement: "right"
+      });
+    };
+    const handleHeaderCollapseToolMouseenter = (e) => {
+      showTooltipPro(e.currentTarget, {
+        content: lang.value.sideExpandTip,
+        placement: "bottom"
+      });
+    };
+    const handleHeaderNewBtnMouseenter = (e) => {
+      showTooltipPro(e.currentTarget, {
+        content: lang.value.newText,
+        placement: "bottom"
+      });
+    };
+    const checkBackbottom = () => {
+      const contentEl = contentRef.value;
+      if (!contentEl) {
+        return false;
+      }
+      const top = contentEl.scrollTop || 0;
+      const height = contentEl.scrollHeight - contentEl.clientHeight - 1;
+      if (!(height > 1 && top < height)) {
+        enableBackbottom.value = false;
+        return false;
+      }
+      return true;
+    };
+    const contentScrollToTop = (option) => {
+      const contentEl = contentRef.value;
+      if (contentEl) {
+        contentEl.scrollTo({ top: 0, behavior: "smooth", ...option || {} });
+      }
+      checkBackbottom();
+    };
+    const contentScrollToBottom = (option) => {
+      if (!checkBackbottom()) {
+        return;
+      }
+      const contentEl = contentRef.value;
+      if (contentEl) {
+        contentEl.scrollTo({
+          top: contentEl.scrollHeight - contentEl.clientHeight,
+          behavior: "smooth",
+          ...option || {}
+        });
+      }
+    };
+    const handleBackbottom = () => {
+      contentScrollToBottom();
+    };
+    const handleContentScroll = () => {
+      if (checkBackbottom()) {
+        enableBackbottom.value = true;
+      }
+    };
+    vue.watch(
+      () => props$1.collapse,
+      (collapse) => {
+        if (sideCollapse.value !== collapse) {
+          sideCollapse.value = collapse;
+        }
+      }
+    );
+    const [media, startMedia, stopMedia] = hook.useMediaQuery(hook.mobileMediaQuery, () => {
+      const isMobile = isResponsive.value ? media.matches : false;
+      if (mobile.value !== isMobile) {
+        mobile.value = isMobile;
+        updateCollapse(mobile.value);
+      }
+    });
+    vue.watch(
+      isResponsive,
+      (responsive) => {
+        if (responsive) {
+          startMedia();
+        } else {
+          stopMedia();
+        }
+      },
+      { immediate: true }
+    );
+    vue.watch(
+      () => props$1.active,
+      () => {
+        if (mobile.value) {
+          updateCollapse(true);
+        }
+      }
+    );
+    vue.onBeforeUnmount(() => {
+      previewVisible.value = false;
+      previewProps.value = {};
+      clearImageObjectUrls();
+    });
+    const chatProvide = vue.shallowReactive({
+      openDropdown,
+      removeDropdown,
+      showTooltip,
+      removeTooltip
+    });
+    vue.provide(props.CHAT_KEY, chatProvide);
+    __expose({
+      contentRef,
+      contentScrollToTop,
+      contentScrollToBottom,
+      openImagePreview,
+      dropdownRef,
+      openDropdown,
+      removeDropdown,
+      tooltipRef,
+      showTooltip,
+      removeTooltip
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        class: vue.normalizeClass(["ele-chat ele-chat-wrapper", {
+          "is-collapse": sideCollapse.value,
+          "is-responsive": vue.unref(isResponsive) && _ctx.sideStyle !== false
+        }])
+      }, [
+        _ctx.sideStyle !== false ? (vue.openBlock(), vue.createElementBlock("div", {
+          key: 0,
+          style: vue.normalizeStyle(_ctx.sideStyle === true ? void 0 : _ctx.sideStyle),
+          class: "ele-chat-side"
+        }, [
+          vue.createElementVNode("div", _hoisted_1, [
+            vue.createElementVNode("div", {
+              style: vue.normalizeStyle(_ctx.logoStyle),
+              class: "ele-chat-logo",
+              onClick: handleLogoClick
+            }, [
+              vue.renderSlot(_ctx.$slots, "logo", {}, () => [
+                _ctx.logoSrc ? (vue.openBlock(), vue.createElementBlock("img", {
+                  key: 0,
+                  src: _ctx.logoSrc,
+                  style: vue.normalizeStyle(_ctx.logoImgStyle),
+                  class: "ele-chat-logo-img"
+                }, null, 12, _hoisted_2)) : vue.createCommentVNode("", true),
+                _ctx.logoTitle ? (vue.openBlock(), vue.createElementBlock("div", {
+                  key: 1,
+                  style: vue.normalizeStyle(_ctx.logoTitleStyle),
+                  class: "ele-chat-logo-title"
+                }, vue.toDisplayString(_ctx.logoTitle), 5)) : vue.createCommentVNode("", true)
+              ])
+            ], 4),
+            vue.createElementVNode("div", _hoisted_3, [
+              vue.renderSlot(_ctx.$slots, "logoTool"),
+              vue.createElementVNode("div", {
+                class: "ele-chat-logo-tool",
+                onMouseenter: handleLogoCollapseToolMouseenter,
+                onClick: handleCollapse
+              }, [
+                vue.createVNode(vue.unref(elementPlus.ElIcon), null, {
+                  default: vue.withCtx(() => [
+                    vue.createVNode(vue.unref(index.SideFoldOutlined))
+                  ]),
+                  _: 1
+                })
+              ], 32)
+            ])
+          ]),
+          vue.renderSlot(_ctx.$slots, "sideTop"),
+          vue.createElementVNode("div", _hoisted_4, [
+            vue.createElementVNode("div", _hoisted_5, [
+              vue.renderSlot(_ctx.$slots, "sideTool"),
+              _ctx.newBtnProps !== false ? (vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElButton), vue.mergeProps({
+                key: 0,
+                icon: vue.unref(index.MessageAddOutlined),
+                class: "ele-chat-new-btn"
+              }, (_ctx.newBtnProps === true ? void 0 : _ctx.newBtnProps) || {}, { onClick: handleNewBtnClick }), {
+                default: vue.withCtx(() => [
+                  vue.createTextVNode(vue.toDisplayString(vue.unref(lang).newText), 1)
+                ]),
+                _: 1
+              }, 16, ["icon"])) : vue.createCommentVNode("", true)
+            ]),
+            vue.createVNode(ChatConversations, {
+              items: _ctx.conversations,
+              active: _ctx.active,
+              dropdownProps: _ctx.dropdownProps,
+              dropdownItems: _ctx.dropdownItems,
+              onItemClick: handleChatItemClick,
+              "onUpdate:active": handleUpdateActive
+            }, vue.createSlots({ _: 2 }, [
+              vue.renderList(Object.keys(_ctx.$slots), (name) => {
+                return {
+                  name,
+                  fn: vue.withCtx((slotProps) => [
+                    vue.renderSlot(_ctx.$slots, name, vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
+                  ])
+                };
+              })
+            ]), 1032, ["items", "active", "dropdownProps", "dropdownItems"])
+          ]),
+          _ctx.$slots.sideBottom ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6, [
+            vue.renderSlot(_ctx.$slots, "sideBottom")
+          ])) : vue.createCommentVNode("", true)
+        ], 4)) : vue.createCommentVNode("", true),
+        vue.createElementVNode("div", _hoisted_7, [
+          _ctx.headerStyle !== false ? (vue.openBlock(), vue.createElementBlock("div", {
+            key: 0,
+            style: vue.normalizeStyle(_ctx.headerStyle === true ? void 0 : _ctx.headerStyle),
+            class: "ele-chat-header"
+          }, [
+            vue.renderSlot(_ctx.$slots, "headerLeft"),
+            vue.createElementVNode("div", {
+              style: vue.normalizeStyle(_ctx.headerLogoStyle),
+              class: "ele-chat-header-logo",
+              onClick: handleLogoClick
+            }, [
+              vue.renderSlot(_ctx.$slots, "logo", { header: true }, () => [
+                _ctx.logoSrc ? (vue.openBlock(), vue.createElementBlock("img", {
+                  key: 0,
+                  src: _ctx.logoSrc,
+                  style: vue.normalizeStyle(_ctx.logoImgStyle),
+                  class: "ele-chat-header-logo-img"
+                }, null, 12, _hoisted_8)) : vue.createCommentVNode("", true)
+              ])
+            ], 4),
+            _ctx.headerToolsStyle !== false ? (vue.openBlock(), vue.createElementBlock("div", {
+              key: 0,
+              style: vue.normalizeStyle(_ctx.headerToolsStyle === true ? void 0 : _ctx.headerToolsStyle),
+              class: "ele-chat-header-tools"
+            }, [
+              vue.renderSlot(_ctx.$slots, "headerTool"),
+              vue.createElementVNode("div", {
+                class: "ele-chat-header-tool",
+                onClick: handleCollapse,
+                onMouseenter: handleHeaderCollapseToolMouseenter
+              }, [
+                vue.createVNode(vue.unref(elementPlus.ElIcon), null, {
+                  default: vue.withCtx(() => [
+                    vue.createVNode(vue.unref(index.SideExpandOutlined))
+                  ]),
+                  _: 1
+                })
+              ], 32),
+              _ctx.newBtnProps !== false ? (vue.openBlock(), vue.createElementBlock("div", {
+                key: 0,
+                class: "ele-chat-header-tool",
+                onClick: handleNewBtnClick,
+                onMouseenter: handleHeaderNewBtnMouseenter
+              }, [
+                vue.createVNode(vue.unref(elementPlus.ElIcon), null, {
+                  default: vue.withCtx(() => [
+                    vue.createVNode(vue.unref(index.MessageAddOutlined))
+                  ]),
+                  _: 1
+                })
+              ], 32)) : vue.createCommentVNode("", true)
+            ], 4)) : vue.createCommentVNode("", true),
+            vue.createElementVNode("div", {
+              style: vue.normalizeStyle(_ctx.headerTitleStyle),
+              class: "ele-chat-header-title"
+            }, [
+              vue.renderSlot(_ctx.$slots, "headerTitle", { activeConversation: activeConversation.value }, () => [
+                vue.createTextVNode(vue.toDisplayString(activeConversation.value?.label), 1)
+              ])
+            ], 4),
+            vue.renderSlot(_ctx.$slots, "headerRight")
+          ], 4)) : vue.createCommentVNode("", true),
+          vue.createElementVNode("div", {
+            ref_key: "contentRef",
+            ref: contentRef,
+            class: "ele-chat-content",
+            onScroll: handleContentScroll
+          }, [
+            vue.renderSlot(_ctx.$slots, "content"),
+            vue.createVNode(MainContent, { class: "ele-chat-bubble-list" }, {
+              default: vue.withCtx((contentProps) => [
+                _ctx.messages?.length && contentProps?.["size"] == 1 ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 0 }, vue.renderList(_ctx.messages, (item) => {
+                  return vue.openBlock(), vue.createBlock(ChatBubble, {
+                    key: item.key ?? item.content,
+                    item,
+                    uploadError: vue.unref(lang).uploadError,
+                    thinkingText: vue.unref(lang).thinkingText,
+                    thoughtText: vue.unref(lang).thoughtText,
+                    editPlaceholder: vue.unref(lang).placeholder,
+                    editCancelText: vue.unref(lang).editCancel,
+                    editConfirmText: vue.unref(lang).editConfirm,
+                    editConfirmBtnProps: _ctx.editConfirmBtnProps,
+                    editCancelBtnProps: _ctx.editCancelBtnProps,
+                    editInputProps: _ctx.editInputProps,
+                    onFileClick: handleBubbleFileClick,
+                    onFileRemove: handleBubbleFileRemove,
+                    onEditCancel: handleBubbleEditCancel,
+                    onEditConfirm: handleBubbleEditConfirm
+                  }, vue.createSlots({ _: 2 }, [
+                    vue.renderList(Object.keys(_ctx.$slots), (name) => {
+                      return {
+                        name,
+                        fn: vue.withCtx((slotProps) => [
+                          vue.renderSlot(_ctx.$slots, name, vue.mergeProps({ ref_for: true }, slotProps || {}))
+                        ])
+                      };
+                    })
+                  ]), 1032, ["item", "uploadError", "thinkingText", "thoughtText", "editPlaceholder", "editCancelText", "editConfirmText", "editConfirmBtnProps", "editCancelBtnProps", "editInputProps"]);
+                }), 128)) : vue.createCommentVNode("", true)
+              ]),
+              _: 3
+            })
+          ], 544),
+          enableBackbottom.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_9, [
+            vue.createVNode(vue.unref(elementPlus.ElIcon), vue.mergeProps({ class: "ele-chat-backbottom-icon" }, _ctx.backbottomProps, { onClick: handleBackbottom }), {
+              default: vue.withCtx(() => [
+                vue.renderSlot(_ctx.$slots, "backbottomIcon", {}, () => [
+                  vue.createVNode(vue.unref(index.ArrowDown), { style: { "transform": "translateY(1px)" } })
+                ])
+              ]),
+              _: 3
+            }, 16)
+          ])) : vue.createCommentVNode("", true),
+          vue.createElementVNode("div", _hoisted_10, [
+            vue.createVNode(ChatInput, {
+              modelValue: _ctx.modelValue,
+              sendBtnProps: _ctx.sendBtnProps,
+              uploadBtnProps: _ctx.uploadBtnProps,
+              files: _ctx.files,
+              placeholder: _ctx.placeholder ?? vue.unref(lang).placeholder,
+              uploadProps: _ctx.uploadProps,
+              uploadTip: vue.unref(lang).uploadTip,
+              uploadError: vue.unref(lang).uploadError,
+              onInput: handleInput,
+              onFocus: handleFocus,
+              onBlur: handleBlur,
+              onSend: handleSend,
+              onSendBtnClick: handleSendBtnClick,
+              onFileClick: handleFileClick,
+              onFileRemove: handleFileRemove,
+              onFileUpload: handleFileUpload,
+              "onUpdate:modelValue": handleUpdateModelValue
+            }, vue.createSlots({ _: 2 }, [
+              vue.renderList(Object.keys(_ctx.$slots), (name) => {
+                return {
+                  name,
+                  fn: vue.withCtx((slotProps) => [
+                    vue.renderSlot(_ctx.$slots, name, vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
+                  ])
+                };
+              })
+            ]), 1032, ["modelValue", "sendBtnProps", "uploadBtnProps", "files", "placeholder", "uploadProps", "uploadTip", "uploadError"]),
+            _ctx.footerStyle !== false ? (vue.openBlock(), vue.createElementBlock("div", {
+              key: 0,
+              style: vue.normalizeStyle(_ctx.footerStyle === true ? void 0 : _ctx.footerStyle),
+              class: "ele-chat-footer"
+            }, [
+              vue.renderSlot(_ctx.$slots, "footer", {}, () => [
+                vue.createElementVNode("div", {
+                  style: vue.normalizeStyle(_ctx.active == null ? { visibility: "hidden" } : void 0)
+                }, vue.toDisplayString(vue.unref(lang).footerText), 5)
+              ])
+            ], 4)) : vue.createCommentVNode("", true)
+          ])
+        ]),
+        vue.createElementVNode("div", {
+          class: "ele-chat-mask",
+          onClick: handleCollapse
+        }),
+        _ctx.imageViewerProps !== false ? (vue.openBlock(), vue.createBlock(EleImageViewer, vue.mergeProps({
+          key: 1,
+          infinite: false
+        }, previewProps.value || {}, {
+          modelValue: previewVisible.value,
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => previewVisible.value = $event)
+        }), null, 16, ["modelValue"])) : vue.createCommentVNode("", true),
+        vue.unref(dropdownVirtualRef) ? (vue.openBlock(), vue.createBlock(EleDropdown, vue.mergeProps({ key: 2 }, vue.unref(dropdownMergedProps), {
+          ref_key: "dropdownRef",
+          ref: dropdownRef,
+          persistent: false,
+          validateEvent: false,
+          componentType: "pro",
+          virtualTriggering: true,
+          virtualRef: vue.unref(dropdownVirtualRef),
+          disabled: !vue.unref(dropdownMergedItems).length,
+          items: vue.unref(dropdownMergedItems)
+        }), null, 16, ["virtualRef", "disabled", "items"])) : vue.createCommentVNode("", true),
+        vue.unref(tooltipVirtualRef) ? (vue.openBlock(), vue.createBlock(EleTooltip, vue.mergeProps({
+          key: 3,
+          persistent: false
+        }, vue.unref(tooltipMergedProps), {
+          ref_key: "tooltipRef",
+          ref: tooltipRef,
+          virtualTriggering: true,
+          virtualRef: vue.unref(tooltipVirtualRef)
+        }), null, 16, ["virtualRef"])) : vue.createCommentVNode("", true)
+      ], 2);
+    };
+  }
+});
+module.exports = _sfc_main;