@uzum-tech/ui 2.3.0 → 2.3.2

package/dist/index.js

@@ -15760,7 +15760,7 @@
     }
   });
 
-  var ResizeSmallIcon = vue.defineComponent({
+  vue.defineComponent({
     name: "ResizeSmall",
     render() {
       return /* @__PURE__ */ vue.h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20" }, /* @__PURE__ */ vue.h("g", { fill: "none" }, /* @__PURE__ */ vue.h(
@@ -45099,6 +45099,58 @@
   };
 
   function self$17(vars) {
+    const {
+      borderRadiusLarge,
+      elementsSecondary,
+      elementsTertiary,
+      textPrimary,
+      textSecondary,
+      textTertiary,
+      brandPrimary400,
+      staticGreen,
+      staticRed,
+      staticWhite
+    } = vars;
+    return {
+      messageBubbleBackgroundColorOwn: elementsTertiary,
+      messageBubbleBackgroundColorOther: elementsTertiary,
+      messageBubbleTextColorOwn: textPrimary,
+      messageBubbleTextColorOther: textPrimary,
+      messageTimeColor: textTertiary,
+      messageStatusReadColor: brandPrimary400,
+      messageStatusSuccessColor: staticGreen,
+      attachmentBackgroundColorOwn: staticWhite,
+      attachmentBackgroundColorOther: staticWhite,
+      messageErrorColor: staticRed,
+      messageBorderRadius: borderRadiusLarge,
+      unreadNotificationBackgroundColor: brandPrimary400,
+      unreadNotificationTextColor: elementsSecondary,
+      serviceMessageTextColor: textSecondary,
+      serviceMessageBackgroundColor: "transparent",
+      messageTitleColor: textPrimary
+    };
+  }
+  const messageBubbleLight = createTheme$1({
+    name: "MessageBubble",
+    common: derived,
+    peers: {
+      StatusIcon: iconLight
+    },
+    self: self$17
+  });
+
+  const messageBubbleDark = createTheme$1({
+    name: "MessageBubble",
+    common: derived$1,
+    peers: {
+      StatusIcon: iconDark$1
+    },
+    self: vars => ({
+      ...self$17(vars)
+    })
+  });
+
+  function self$16(vars) {
     const {
       shadowDepth2
     } = vars;
@@ -45113,7 +45165,7 @@
       InternalSelection: internalSelectionLight,
       InternalSelectMenu: internalSelectMenuLight
     },
-    self: self$17
+    self: self$16
   });
 
   const selectDark = {
@@ -45123,13 +45175,13 @@
       InternalSelection: internalSelectionDark,
       InternalSelectMenu: internalSelectMenuDark
     },
-    self: self$17
+    self: self$16
   };
 
   ({
     style: c$1([])});
 
-  function self$16(vars) {
+  function self$15(vars) {
     const {
       borderRadiusSmall,
       fontWeightStrong,
@@ -45224,13 +45276,13 @@
   const typographyLight = {
     name: "Typography",
     common: derived,
-    self: self$16
+    self: self$15
   };
 
   const typographyDark = {
     name: "Typography",
     common: derived$1,
-    self: self$16
+    self: self$15
   };
 
   const chatInputLight = {
@@ -45268,7 +45320,7 @@
       };
     }
   };
-  function self$15(vars) {
+  function self$14(vars) {
     const {
       borderRadiusLarge,
       elementsQuaternary,
@@ -45335,13 +45387,14 @@
       Button: buttonLight,
       List: listLight,
       Typography: typographyLight,
+      MessageBubble: messageBubbleLight,
       StatusIcon: iconLight,
       FooterAttachIcon: iconLight,
       FooterSuffixIcon: iconLight,
       HeaderShareIcon: iconLight,
       HeaderProfileIcon: iconLight
     },
-    self: self$15
+    self: self$14
   });
 
   const chatDark = createTheme$1({
@@ -45356,6 +45409,7 @@
       Button: buttonDark,
       List: listDark$1,
       Typography: typographyDark,
+      MessageBubble: messageBubbleDark,
       StatusIcon: iconDark$1,
       FooterAttachIcon: iconDark$1,
       FooterSuffixIcon: iconDark$1,
@@ -45363,7 +45417,7 @@
       HeaderProfileIcon: iconDark$1
     },
     self: vars => {
-      const lightVars = self$15(vars);
+      const lightVars = self$14(vars);
       return {
         ...lightVars
       };
@@ -46712,7 +46766,284 @@
     }
   });
 
-  function self$14(vars) {
+  function isImageFileType(type) {
+    return type.includes("image/");
+  }
+  function getExtname(url = "") {
+    const temp = url.split("/");
+    const filename = temp[temp.length - 1];
+    const filenameWithoutSuffix = filename.split(/#|\?/)[0];
+    return (/\.[^./\\]*$/.exec(filenameWithoutSuffix) || [""])[0];
+  }
+  const imageExtensionRegex = /(webp|svg|png|gif|jpg|jpeg|jfif|bmp|dpg|ico)$/i;
+  function capitalizeFirstLetter(str) {
+    if (!str) return str;
+    return str.charAt(0).toUpperCase() + str.slice(1);
+  }
+  const isImageFile = file => {
+    if (file.type) {
+      return isImageFileType(file.type);
+    }
+    const fileNameExtension = getExtname(file.name || "");
+    if (imageExtensionRegex.test(fileNameExtension)) {
+      return true;
+    }
+    const url = file.thumbnailUrl || file.url || "";
+    const urlExtension = getExtname(url);
+    if (/^data:image\//.test(url) || imageExtensionRegex.test(urlExtension)) {
+      return true;
+    }
+    return false;
+  };
+  async function createImageDataUrl(file) {
+    return await new Promise(resolve => {
+      if (!file.type || !isImageFileType(file.type)) {
+        resolve("");
+        return;
+      }
+      resolve(window.URL.createObjectURL(file));
+    });
+  }
+  const environmentSupportFile = isBrowser$1 && window.FileReader && window.File;
+  function isFileSystemDirectoryEntry(item) {
+    return item.isDirectory;
+  }
+  function isFileSystemFileEntry(item) {
+    return item.isFile;
+  }
+  async function getFilesFromEntries(entries, directory) {
+    const fileAndEntries = [];
+    let _resolve;
+    let requestCallbackCount = 0;
+    function lock() {
+      requestCallbackCount++;
+    }
+    function unlock() {
+      requestCallbackCount--;
+      if (!requestCallbackCount) {
+        _resolve(fileAndEntries);
+      }
+    }
+    function _getFilesFromEntries(entries2) {
+      entries2.forEach(entry => {
+        if (!entry) return;
+        lock();
+        if (directory && isFileSystemDirectoryEntry(entry)) {
+          const directoryReader = entry.createReader();
+          lock();
+          directoryReader.readEntries(entries3 => {
+            _getFilesFromEntries(entries3);
+            unlock();
+          }, () => {
+            unlock();
+          });
+        } else if (isFileSystemFileEntry(entry)) {
+          lock();
+          entry.file(file => {
+            fileAndEntries.push({
+              file,
+              entry,
+              source: "dnd"
+            });
+            unlock();
+          }, () => {
+            unlock();
+          });
+        }
+        unlock();
+      });
+    }
+    await new Promise(resolve => {
+      _resolve = resolve;
+      _getFilesFromEntries(entries);
+    });
+    return fileAndEntries;
+  }
+  function getFilePreviewSrc(file) {
+    return file.url || file.thumbnailUrl || null;
+  }
+  function isFileSizeExceeded(file, maxSize) {
+    if (maxSize === void 0 || !file) return false;
+    return file.size > maxSize;
+  }
+  function createSettledFileInfo(fileInfo) {
+    const {
+      id,
+      name,
+      percentage,
+      status,
+      url,
+      file,
+      thumbnailUrl,
+      type,
+      fullPath,
+      batchId
+    } = fileInfo;
+    return {
+      id,
+      name,
+      percentage: percentage ?? null,
+      status,
+      url: url ?? null,
+      file: file ?? null,
+      thumbnailUrl: thumbnailUrl ?? null,
+      type: type ?? null,
+      fullPath: fullPath ?? null,
+      batchId: batchId ?? null
+    };
+  }
+  function matchType(name, mimeType, accept) {
+    name = name.toLowerCase();
+    mimeType = mimeType.toLocaleLowerCase();
+    accept = accept.toLocaleLowerCase();
+    const acceptAtoms = accept.split(",").map(acceptAtom => acceptAtom.trim()).filter(Boolean);
+    return acceptAtoms.some(acceptAtom => {
+      if (acceptAtom.startsWith(".")) {
+        if (name.endsWith(acceptAtom)) return true;
+      } else if (acceptAtom.includes("/")) {
+        const [type, subtype] = mimeType.split("/");
+        const [acceptType, acceptSubtype] = acceptAtom.split("/");
+        if (acceptType === "*" || type && acceptType && acceptType === type) {
+          if (acceptSubtype === "*" || subtype && acceptSubtype && acceptSubtype === subtype) {
+            return true;
+          }
+        }
+      } else {
+        return true;
+      }
+      return false;
+    });
+  }
+  function download(url, name) {
+    if (!url) return;
+    const a = document.createElement("a");
+    a.href = url;
+    if (name !== void 0) {
+      a.download = name;
+    }
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+  }
+
+  const uploadInjectionKey = createInjectionKey("u-upload");
+  const uploadProps = {
+    ...useTheme.props,
+    name: {
+      type: String,
+      default: "file"
+    },
+    accept: String,
+    action: String,
+    customRequest: Function,
+    directory: Boolean,
+    directoryDnd: {
+      type: Boolean,
+      default: void 0
+    },
+    method: {
+      type: String,
+      default: "POST"
+    },
+    multiple: Boolean,
+    showFileList: {
+      type: Boolean,
+      default: true
+    },
+    data: [Object, Function],
+    headers: [Object, Function],
+    withCredentials: Boolean,
+    responseType: {
+      type: String,
+      default: ""
+    },
+    disabled: {
+      type: Boolean,
+      default: void 0
+    },
+    vertical: {
+      type: Boolean,
+      default: false
+    },
+    icon: Object,
+    onChange: Function,
+    onRemove: Function,
+    onFinish: Function,
+    onError: Function,
+    onRetry: Function,
+    onBeforeUpload: Function,
+    isErrorState: Function,
+    onDownload: Function,
+    defaultUpload: {
+      type: Boolean,
+      default: true
+    },
+    fileList: Array,
+    "onUpdate:fileList": [Function, Array],
+    onUpdateFileList: [Function, Array],
+    fileListClass: String,
+    fileListStyle: [String, Object],
+    defaultFileList: {
+      type: Array,
+      default: () => []
+    },
+    showCancelButton: {
+      type: Boolean,
+      default: true
+    },
+    showRemoveButton: {
+      type: Boolean,
+      default: true
+    },
+    showDownloadButton: Boolean,
+    showRetryButton: {
+      type: Boolean,
+      default: true
+    },
+    customDownload: Function,
+    showPreviewButton: {
+      type: Boolean,
+      default: true
+    },
+    listType: {
+      type: String,
+      default: "text"
+    },
+    onPreview: Function,
+    shouldUseThumbnailUrl: {
+      type: Function,
+      default: file => {
+        if (!environmentSupportFile) return false;
+        return isImageFile(file);
+      }
+    },
+    createThumbnailUrl: Function,
+    abstract: Boolean,
+    max: Number,
+    maxSize: Number,
+    showTrigger: {
+      type: Boolean,
+      default: true
+    },
+    imageGroupProps: Object,
+    inputProps: Object,
+    triggerClass: String,
+    triggerStyle: [String, Object],
+    renderIcon: Function,
+    label: String,
+    size: {
+      type: String,
+      default: "medium"
+    },
+    title: String,
+    subtitle: String,
+    noIcon: {
+      type: Boolean,
+      default: false
+    }
+  };
+
+  function self$13(vars) {
     const {
       fontWeight,
       fontBodyMedium,
@@ -46753,16 +47084,16 @@
   const progressLight = {
     name: "Progress",
     common: derived,
-    self: self$14
+    self: self$13
   };
 
   const progressDark = {
     name: "Progress",
     common: derived$1,
-    self: self$14
+    self: self$13
   };
 
-  function self$13(vars) {
+  function self$12(vars) {
     const {
       staticGreen,
       staticRed,
@@ -46819,7 +47150,7 @@
       Button: buttonLight,
       Progress: progressLight
     },
-    self: self$13
+    self: self$12
   });
 
   const uploadDark = {
@@ -46829,7 +47160,7 @@
       Button: buttonDark,
       Progress: progressDark
     },
-    self: self$13
+    self: self$12
   };
 
   var rtlStyle$i = cB("upload", [cM("rtl", `
@@ -46842,8 +47173,6 @@
     style: rtlStyle$i
   };
 
-  const uploadInjectionKey = createInjectionKey("u-upload");
-
   var style$1a = c$1([cB("upload", "width: var(--u-upload-width)", [cM("dragger-inside", [cB("upload-trigger", `
         display: block;
       `)]), cM("drag-over", [cB("upload-dragger", `
@@ -47308,7 +47637,7 @@
     self: self$1d
   };
 
-  function self$12(vars) {
+  function self$11(vars) {
     const {
       textPrimary,
       fontBodyMedium,
@@ -47336,12 +47665,12 @@
   const codeLight = {
     name: "Code",
     common: derived,
-    self: self$12
+    self: self$11
   };
 
-  function self$11(vars) {
+  function self$10(vars) {
     return {
-      ...self$12(vars),
+      ...self$11(vars),
       // extracted from hljs atom-one-dark.scss
       "mono-3": "#5c6370",
       "hue-1": "#56b6c2",
@@ -47357,10 +47686,10 @@
   const codeDark = {
     name: "Code",
     common: derived$1,
-    self: self$11
+    self: self$10
   };
 
-  function self$10(vars) {
+  function self$$(vars) {
     const {
       cubicBezierEaseInOut
     } = vars;
@@ -47371,13 +47700,13 @@
   const collapseTransitionLight = {
     name: "CollapseTransition",
     common: derived,
-    self: self$10
+    self: self$$
   };
 
   const collapseTransitionDark = {
     name: "CollapseTransition",
     common: derived$1,
-    self: self$10
+    self: self$$
   };
 
   var rtlStyle$g = cB("collapse-transition", [cM("rtl", `
@@ -47390,7 +47719,7 @@
     style: rtlStyle$g
   };
 
-  function self$$(vars) {
+  function self$_(vars) {
     const {
       fontWeight,
       fontBodyLarge,
@@ -47430,13 +47759,13 @@
   const collapseLight = {
     name: "Collapse",
     common: derived,
-    self: self$$
+    self: self$_
   };
 
   const collapseDark = {
     name: "Collapse",
     common: derived$1,
-    self: self$$
+    self: self$_
   };
 
   var rtlStyle$f = cB("collapse", [cM("rtl", `
@@ -47459,7 +47788,7 @@
     style: rtlStyle$f
   };
 
-  function self$_(vars) {
+  function self$Z(vars) {
     const {
       borderRadius,
       fontBodySmall,
@@ -47546,7 +47875,7 @@
     peers: {
       Popover: popoverLight
     },
-    self: self$_
+    self: self$Z
   });
 
   const dropdownDark = {
@@ -47555,7 +47884,7 @@
     peers: {
       Popover: popoverDark
     },
-    self: self$_
+    self: self$Z
   };
 
   const popselect = {
@@ -47567,7 +47896,7 @@
     }
   };
 
-  function self$Z(vars) {
+  function self$Y(vars) {
     const {
       shadowDepth2
     } = vars;
@@ -47582,10 +47911,10 @@
       Popover: popoverLight,
       InternalSelectMenu: internalSelectMenuLight
     },
-    self: self$Z
+    self: self$Y
   });
 
-  function self$Y(vars) {
+  function self$X(vars) {
     const {
       brandPrimary100,
       transparencySecondary,
@@ -47683,7 +48012,7 @@
       Input: inputLight,
       Popselect: popselectLight
     },
-    self: self$Y
+    self: self$X
   });
 
   const paginationDark = {
@@ -47694,7 +48023,7 @@
       Input: inputDark,
       Popselect: popselect
     },
-    self: self$Y
+    self: self$X
   };
 
   var rtlStyle$e = cB("pagination", [cM("rtl", `
@@ -47711,7 +48040,7 @@
     peers: [inputRtl]
   };
 
-  function self$X(vars) {
+  function self$W(vars) {
     const {
       heightTiny,
       heightSmall,
@@ -47803,13 +48132,13 @@
   const radioLight = {
     name: "Radio",
     common: derived,
-    self: self$X
+    self: self$W
   };
 
   const radioDark = {
     name: "Radio",
     common: derived$1,
-    self: self$X
+    self: self$W
   };
 
   var rtlStyle$d = c$1([cB("radio", [cM("rtl", `
@@ -47837,7 +48166,7 @@
     style: rtlStyle$d
   };
 
-  function self$W(vars) {
+  function self$V(vars) {
     const {
       borderRadius,
       opacityDisabled,
@@ -47938,7 +48267,7 @@
       Ellipsis: ellipsisLight,
       Dropdown: dropdownLight
     },
-    self: self$W
+    self: self$V
   });
 
   const dataTableDark = {
@@ -47955,10 +48284,10 @@
       Ellipsis: ellipsisDark,
       Dropdown: dropdownDark
     },
-    self: self$W
+    self: self$V
   };
 
-  function self$V(vars) {
+  function self$U(vars) {
     const {
       opacityDisabled,
       borderRadius,
@@ -48000,7 +48329,7 @@
       Button: buttonLight,
       Input: inputLight
     },
-    self: self$V
+    self: self$U
   });
 
   const timePickerDark = {
@@ -48011,7 +48340,7 @@
       Button: buttonDark,
       Input: inputDark
     },
-    self: self$V
+    self: self$U
   };
 
   const itemWidth = "38px";
@@ -48057,7 +48386,7 @@
     calendarRightPaddingYearrange: "0"
   };
 
-  function self$U(vars) {
+  function self$T(vars) {
     const {
       iconMedium,
       fontWeightStrong,
@@ -48158,7 +48487,7 @@
       Scrollbar: scrollbarLight,
       Select: internalSelectionLight
     },
-    self: self$U
+    self: self$T
   });
 
   const datePickerDark = {
@@ -48171,10 +48500,10 @@
       Scrollbar: scrollbarDark,
       Select: internalSelectionDark
     },
-    self: self$U
+    self: self$T
   };
 
-  function self$T(vars) {
+  function self$S(vars) {
     const {
       borderRadius,
       lineHeightBodyLarge,
@@ -48224,13 +48553,13 @@
   const descriptionsLight = {
     name: "Descriptions",
     common: derived,
-    self: self$T
+    self: self$S
   };
 
   const descriptionsDark = {
     name: "Descriptions",
     common: derived$1,
-    self: self$T
+    self: self$S
   };
 
   var commonVars$5 = {
@@ -48244,7 +48573,7 @@
     closeBorderRadius: "100px"
   };
 
-  function self$S(vars) {
+  function self$R(vars) {
     const {
       borderRadius,
       containerPrimary,
@@ -48301,7 +48630,7 @@
     peers: {
       Button: buttonLight
     },
-    self: self$S
+    self: self$R
   });
 
   const dialogDark = {
@@ -48310,10 +48639,10 @@
     peers: {
       Button: buttonDark
     },
-    self: self$S
+    self: self$R
   };
 
-  function self$R(vars) {
+  function self$Q(vars) {
     const {
       elementsQuaternary,
       textPrimary,
@@ -48333,13 +48662,13 @@
   const dividerLight = {
     name: "Divider",
     common: derived,
-    self: self$R
+    self: self$Q
   };
 
   const dividerDark = {
     name: "Divider",
     common: derived$1,
-    self: self$R
+    self: self$Q
   };
 
   var commonVars$4 = {
@@ -48355,7 +48684,7 @@
     contentBorderRadius: "24px"
   };
 
-  function self$Q(vars) {
+  function self$P(vars) {
     const {
       containerPrimary,
       textPrimary,
@@ -48404,7 +48733,7 @@
     peers: {
       Scrollbar: scrollbarLight
     },
-    self: self$Q
+    self: self$P
   });
 
   const drawerDark = {
@@ -48413,7 +48742,7 @@
     peers: {
       Scrollbar: scrollbarDark
     },
-    self: self$Q
+    self: self$P
   };
 
   var rtlStyle$c = cB("drawer", [cM("rtl", `
@@ -48447,7 +48776,7 @@
     }
   };
 
-  function self$P() {
+  function self$O() {
     return commonVariables$1;
   }
   const dynamicInputLight = createTheme$1({
@@ -48457,7 +48786,7 @@
       Input: inputLight,
       Button: buttonLight
     },
-    self: self$P
+    self: self$O
   });
 
   var rtlStyle$b = cB("input-number", [cM("rtl", `
@@ -48498,12 +48827,12 @@
     }
   };
 
-  function self$O() {
+  function self$N() {
     return commonVars$3;
   }
   const spaceLight = {
     name: "Space",
-    self: self$O
+    self: self$N
   };
 
   var rtlStyle$9 = cB("space", [cM("rtl", `
@@ -48575,7 +48904,7 @@
     }
   };
 
-  function self$N(vars) {
+  function self$M(vars) {
     const {
       containerPrimary,
       elementsQuaternary,
@@ -48591,7 +48920,7 @@
   const themeLight$4 = {
     name: "FloatButtonGroup",
     common: derived,
-    self: self$N
+    self: self$M
   };
 
   const floatButtonDark = {
@@ -48626,7 +48955,7 @@
     }
   };
 
-  function self$M(vars) {
+  function self$L(vars) {
     const {
       containerPrimary,
       textPrimary,
@@ -48655,10 +48984,10 @@
   const themeLight$3 = {
     name: "FloatButton",
     common: derived,
-    self: self$M
+    self: self$L
   };
 
-  function self$L(vars) {
+  function self$K(vars) {
     const {
       heightSmall,
       heightMedium,
@@ -48713,16 +49042,16 @@
   const formLight = {
     name: "Form",
     common: derived,
-    self: self$L
+    self: self$K
   };
 
   const formItemDark = {
     name: "Form",
     common: derived$1,
-    self: self$L
+    self: self$K
   };
 
-  function self$K(vars) {
+  function self$J(vars) {
     const {
       brandPrimary500,
       staticGreen,
@@ -48759,16 +49088,16 @@
   const gradientTextLight = {
     name: "GradientText",
     common: derived,
-    self: self$K
+    self: self$J
   };
 
   const gradientTextDark = {
     name: "GradientText",
     common: derived$1,
-    self: self$K
+    self: self$J
   };
 
-  function self$J(vars) {
+  function self$I(vars) {
     const {
       textSecondary
     } = vars;
@@ -48783,7 +49112,7 @@
       Button: buttonLight,
       Input: inputLight
     },
-    self: self$J
+    self: self$I
   });
 
   const inputNumberDark = {
@@ -48793,10 +49122,10 @@
       Button: buttonDark,
       Input: inputDark
     },
-    self: self$J
+    self: self$I
   };
 
-  function self$I() {
+  function self$H() {
     return {
       inputWidthSmall: "44px",
       inputWidthMedium: "50px",
@@ -48812,7 +49141,7 @@
     peers: {
       Input: inputLight
     },
-    self: self$I
+    self: self$H
   });
 
   const inputOtpDark = {
@@ -48821,7 +49150,7 @@
     peers: {
       Input: inputDark
     },
-    self: self$I
+    self: self$H
   };
 
   var rtlStyle$8 = cB("input-otp", [cM("rtl", `
@@ -48833,7 +49162,7 @@
     style: rtlStyle$8
   };
 
-  function self$H(vars) {
+  function self$G(vars) {
     const {
       textPrimary,
       textQuaternary,
@@ -48879,7 +49208,7 @@
     peers: {
       Scrollbar: scrollbarLight
     },
-    self: self$H
+    self: self$G
   });
 
   const layoutDark = {
@@ -48888,7 +49217,7 @@
     peers: {
       Scrollbar: scrollbarDark
     },
-    self: self$H
+    self: self$G
   };
 
   const rowDark = {
@@ -48925,7 +49254,7 @@
     style: rtlStyle$7
   };
 
-  function self$G(vars) {
+  function self$F(vars) {
     const {
       brandPrimary500,
       staticRed
@@ -48939,16 +49268,16 @@
   const loadingBarLight = {
     name: "LoadingBar",
     common: derived,
-    self: self$G
+    self: self$F
   };
 
   const loadingBarDark = {
     name: "LoadingBar",
     common: derived$1,
-    self: self$G
+    self: self$F
   };
 
-  function self$F(vars) {
+  function self$E(vars) {
     const {
       fontBodyMedium,
       textPrimary,
@@ -48971,7 +49300,7 @@
       Scrollbar: scrollbarLight,
       Code: codeLight
     },
-    self: self$F
+    self: self$E
   });
 
   const logDark = {
@@ -48981,25 +49310,25 @@
       Scrollbar: scrollbarDark,
       Code: codeDark
     },
-    self: self$F
+    self: self$E
   };
 
-  function self$E() {
+  function self$D() {
     return {};
   }
   const marqueeLight = {
     name: "Marquee",
     common: derived,
-    self: self$E
+    self: self$D
   };
 
   const marqueeDark = {
     name: "Marquee",
     common: derived$1,
-    self: self$E
+    self: self$D
   };
 
-  function self$D(vars) {
+  function self$C(vars) {
     const {
       shadowDepth2
     } = vars;
@@ -49014,7 +49343,7 @@
       InternalSelectMenu: internalSelectMenuLight,
       Input: inputLight
     },
-    self: self$D
+    self: self$C
   });
 
   const listDark = {
@@ -49024,7 +49353,7 @@
       InternalSelectMenu: internalSelectMenuDark,
       Input: inputDark
     },
-    self: self$D
+    self: self$C
   };
 
   function createPartialInvertedVars(color, activeItemColor, activeTextColor, groupTextColor) {
@@ -49067,7 +49396,7 @@
       groupTextColorInverted: groupTextColor
     };
   }
-  function self$C(vars) {
+  function self$B(vars) {
     const {
       textSecondary,
       borderRadiusSmall,
@@ -49135,7 +49464,7 @@
       Tooltip: tooltipLight,
       Dropdown: dropdownLight
     },
-    self: self$C
+    self: self$B
   });
 
   const menuDark = {
@@ -49145,60 +49474,8 @@
       Tooltip: tooltipDark,
       Dropdown: dropdownDark
     },
-    self: self$C
-  };
-
-  function self$B(vars) {
-    const {
-      borderRadiusLarge,
-      elementsSecondary,
-      elementsTertiary,
-      textPrimary,
-      textSecondary,
-      textTertiary,
-      brandPrimary400,
-      staticGreen,
-      staticRed,
-      staticWhite
-    } = vars;
-    return {
-      messageBubbleBackgroundColorOwn: elementsTertiary,
-      messageBubbleBackgroundColorOther: elementsTertiary,
-      messageBubbleTextColorOwn: textPrimary,
-      messageBubbleTextColorOther: textPrimary,
-      messageTimeColor: textTertiary,
-      messageStatusReadColor: brandPrimary400,
-      messageStatusSuccessColor: staticGreen,
-      attachmentBackgroundColorOwn: staticWhite,
-      attachmentBackgroundColorOther: staticWhite,
-      messageErrorColor: staticRed,
-      messageBorderRadius: borderRadiusLarge,
-      unreadNotificationBackgroundColor: brandPrimary400,
-      unreadNotificationTextColor: elementsSecondary,
-      serviceMessageTextColor: textSecondary,
-      serviceMessageBackgroundColor: "transparent",
-      messageTitleColor: textPrimary
-    };
-  }
-  const messageBubbleLight = createTheme$1({
-    name: "MessageBubble",
-    common: derived,
-    peers: {
-      StatusIcon: iconLight
-    },
     self: self$B
-  });
-
-  const messageBubbleDark = createTheme$1({
-    name: "MessageBubble",
-    common: derived$1,
-    peers: {
-      StatusIcon: iconDark$1
-    },
-    self: vars => ({
-      ...self$B(vars)
-    })
-  });
+  };
 
   function self$A(vars) {
     const {
@@ -50574,20 +50851,6 @@
     self: self$g
   };
 
-  const prevIcon = /* @__PURE__ */ vue.h("svg", { viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ vue.h(
-    "path",
-    {
-      d: "M6 5C5.75454 5 5.55039 5.17688 5.50806 5.41012L5.5 5.5V14.5C5.5 14.7761 5.72386 15 6 15C6.24546 15 6.44961 14.8231 6.49194 14.5899L6.5 14.5V5.5C6.5 5.22386 6.27614 5 6 5ZM13.8536 5.14645C13.68 4.97288 13.4106 4.9536 13.2157 5.08859L13.1464 5.14645L8.64645 9.64645C8.47288 9.82001 8.4536 10.0894 8.58859 10.2843L8.64645 10.3536L13.1464 14.8536C13.3417 15.0488 13.6583 15.0488 13.8536 14.8536C14.0271 14.68 14.0464 14.4106 13.9114 14.2157L13.8536 14.1464L9.70711 10L13.8536 5.85355C14.0488 5.65829 14.0488 5.34171 13.8536 5.14645Z",
-      fill: "currentColor"
-    }
-  ));
-  const nextIcon = /* @__PURE__ */ vue.h("svg", { viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ vue.h(
-    "path",
-    {
-      d: "M13.5 5C13.7455 5 13.9496 5.17688 13.9919 5.41012L14 5.5V14.5C14 14.7761 13.7761 15 13.5 15C13.2545 15 13.0504 14.8231 13.0081 14.5899L13 14.5V5.5C13 5.22386 13.2239 5 13.5 5ZM5.64645 5.14645C5.82001 4.97288 6.08944 4.9536 6.28431 5.08859L6.35355 5.14645L10.8536 9.64645C11.0271 9.82001 11.0464 10.0894 10.9114 10.2843L10.8536 10.3536L6.35355 14.8536C6.15829 15.0488 5.84171 15.0488 5.64645 14.8536C5.47288 14.68 5.4536 14.4106 5.58859 14.2157L5.64645 14.1464L9.79289 10L5.64645 5.85355C5.45118 5.65829 5.45118 5.34171 5.64645 5.14645Z",
-      fill: "currentColor"
-    }
-  ));
   const closeIcon = /* @__PURE__ */ vue.h("svg", { viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ vue.h(
     "path",
     {
@@ -50595,22 +50858,6 @@
       fill: "currentColor"
     }
   ));
-  const downloadIcon = /* @__PURE__ */ vue.h(
-    "svg",
-    {
-      xmlns: "http://www.w3.org/2000/svg",
-      width: "32",
-      height: "32",
-      viewBox: "0 0 1024 1024"
-    },
-    /* @__PURE__ */ vue.h(
-      "path",
-      {
-        fill: "currentColor",
-        d: "M505.7 661a8 8 0 0 0 12.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"
-      }
-    )
-  );
 
   const imagePreviewSharedProps = {
     ...useTheme.props,
@@ -51060,7 +51307,8 @@
             toolbarIconColor,
             toolbarBorderRadius,
             toolbarBoxShadow,
-            toolbarColor
+            toolbarColor,
+            overlayColor
           }
         } = themeRef.value;
         return {
@@ -51068,7 +51316,8 @@
           "--u-toolbar-icon-color": toolbarIconColor,
           "--u-toolbar-color": toolbarColor,
           "--u-toolbar-border-radius": toolbarBorderRadius,
-          "--u-toolbar-box-shadow": toolbarBoxShadow
+          "--u-toolbar-box-shadow": toolbarBoxShadow,
+          "--u-overlay-color": overlayColor
         };
       });
       const { inlineThemeDisabled } = useConfig();
@@ -51117,14 +51366,6 @@
     },
     render() {
       const { clsPrefix, renderToolbar, withTooltip } = this;
-      const prevNode = withTooltip(
-        /* @__PURE__ */ vue.h(UBaseIcon, { clsPrefix, onClick: this.handleSwitchPrev }, { default: () => prevIcon }),
-        "tipPrevious"
-      );
-      const nextNode = withTooltip(
-        /* @__PURE__ */ vue.h(UBaseIcon, { clsPrefix, onClick: this.handleSwitchNext }, { default: () => nextIcon }),
-        "tipNext"
-      );
       const rotateCounterclockwiseNode = withTooltip(
         /* @__PURE__ */ vue.h(UBaseIcon, { clsPrefix, onClick: this.rotateCounterclockwise }, {
           default: () => /* @__PURE__ */ vue.h(RotateCounterclockwiseIcon, null)
@@ -51137,22 +51378,10 @@
         }),
         "tipClockwise"
       );
-      const originalSizeNode = withTooltip(
-        /* @__PURE__ */ vue.h(UBaseIcon, { clsPrefix, onClick: this.resizeToOrignalImageSize }, {
-          default: () => {
-            return /* @__PURE__ */ vue.h(ResizeSmallIcon, null);
-          }
-        }),
-        "tipOriginalSize"
-      );
       const zoomOutNode = withTooltip(
         /* @__PURE__ */ vue.h(UBaseIcon, { clsPrefix, onClick: this.zoomOut }, { default: () => /* @__PURE__ */ vue.h(ZoomOutIcon, null) }),
         "tipZoomOut"
       );
-      const downloadNode = withTooltip(
-        /* @__PURE__ */ vue.h(UBaseIcon, { clsPrefix, onClick: this.handleDownloadClick }, { default: () => downloadIcon }),
-        "tipDownload"
-      );
       const closeNode = withTooltip(
         /* @__PURE__ */ vue.h(UBaseIcon, { clsPrefix, onClick: () => this.close() }, { default: () => closeIcon }),
         "tipClose"
@@ -51194,17 +51423,13 @@
                     return null;
                   return /* @__PURE__ */ vue.h("div", { class: `${clsPrefix}-image-preview-toolbar` }, renderToolbar ? renderToolbar({
                     nodes: {
-                      prev: prevNode,
-                      next: nextNode,
                       rotateCounterclockwise: rotateCounterclockwiseNode,
                       rotateClockwise: rotateClockwiseNode,
-                      resizeToOriginalSize: originalSizeNode,
                       zoomOut: zoomOutNode,
                       zoomIn: zoomInNode,
-                      download: downloadNode,
                       close: closeNode
                     }
-                  }) : /* @__PURE__ */ vue.h(vue.Fragment, null, this.onPrev ? /* @__PURE__ */ vue.h(vue.Fragment, null, prevNode, nextNode) : null, rotateCounterclockwiseNode, rotateClockwiseNode, originalSizeNode, zoomOutNode, zoomInNode, downloadNode, closeNode));
+                  }) : /* @__PURE__ */ vue.h(vue.Fragment, null, rotateCounterclockwiseNode, rotateClockwiseNode, zoomOutNode, zoomInNode, closeNode));
                 }
               }) : null,
               /* @__PURE__ */ vue.h(
@@ -51859,7 +52084,7 @@
     }
   });
 
-  function useUploadActionsRender(opts) {
+  function useUploadActionsRender(options) {
     const {
       clsPrefix,
       listType,
@@ -51879,7 +52104,7 @@
       handleRetryClick,
       handleDownloadClick,
       capitalizeFirstLetter
-    } = opts;
+    } = options;
     const getExt = (name) => {
       const i = name.lastIndexOf(".");
       return i === -1 || i === name.length - 1 ? "" : name.slice(i + 1);
@@ -52006,159 +52231,6 @@
     return { icon, actionsNode };
   }
 
-  function isImageFileType(type) {
-    return type.includes("image/");
-  }
-  function getExtname(url = "") {
-    const temp = url.split("/");
-    const filename = temp[temp.length - 1];
-    const filenameWithoutSuffix = filename.split(/#|\?/)[0];
-    return (/\.[^./\\]*$/.exec(filenameWithoutSuffix) || [""])[0];
-  }
-  const imageExtensionRegex = /(webp|svg|png|gif|jpg|jpeg|jfif|bmp|dpg|ico)$/i;
-  function capitalizeFirstLetter(str) {
-    if (!str) return str;
-    return str.charAt(0).toUpperCase() + str.slice(1);
-  }
-  const isImageFile = file => {
-    if (file.type) {
-      return isImageFileType(file.type);
-    }
-    const fileNameExtension = getExtname(file.name || "");
-    if (imageExtensionRegex.test(fileNameExtension)) {
-      return true;
-    }
-    const url = file.thumbnailUrl || file.url || "";
-    const urlExtension = getExtname(url);
-    if (/^data:image\//.test(url) || imageExtensionRegex.test(urlExtension)) {
-      return true;
-    }
-    return false;
-  };
-  async function createImageDataUrl(file) {
-    return await new Promise(resolve => {
-      if (!file.type || !isImageFileType(file.type)) {
-        resolve("");
-        return;
-      }
-      resolve(window.URL.createObjectURL(file));
-    });
-  }
-  const environmentSupportFile = isBrowser$1 && window.FileReader && window.File;
-  function isFileSystemDirectoryEntry(item) {
-    return item.isDirectory;
-  }
-  function isFileSystemFileEntry(item) {
-    return item.isFile;
-  }
-  async function getFilesFromEntries(entries, directory) {
-    const fileAndEntries = [];
-    let _resolve;
-    let requestCallbackCount = 0;
-    function lock() {
-      requestCallbackCount++;
-    }
-    function unlock() {
-      requestCallbackCount--;
-      if (!requestCallbackCount) {
-        _resolve(fileAndEntries);
-      }
-    }
-    function _getFilesFromEntries(entries2) {
-      entries2.forEach(entry => {
-        if (!entry) return;
-        lock();
-        if (directory && isFileSystemDirectoryEntry(entry)) {
-          const directoryReader = entry.createReader();
-          lock();
-          directoryReader.readEntries(entries3 => {
-            _getFilesFromEntries(entries3);
-            unlock();
-          }, () => {
-            unlock();
-          });
-        } else if (isFileSystemFileEntry(entry)) {
-          lock();
-          entry.file(file => {
-            fileAndEntries.push({
-              file,
-              entry,
-              source: "dnd"
-            });
-            unlock();
-          }, () => {
-            unlock();
-          });
-        }
-        unlock();
-      });
-    }
-    await new Promise(resolve => {
-      _resolve = resolve;
-      _getFilesFromEntries(entries);
-    });
-    return fileAndEntries;
-  }
-  function createSettledFileInfo(fileInfo) {
-    const {
-      id,
-      name,
-      percentage,
-      status,
-      url,
-      file,
-      thumbnailUrl,
-      type,
-      fullPath,
-      batchId
-    } = fileInfo;
-    return {
-      id,
-      name,
-      percentage: percentage ?? null,
-      status,
-      url: url ?? null,
-      file: file ?? null,
-      thumbnailUrl: thumbnailUrl ?? null,
-      type: type ?? null,
-      fullPath: fullPath ?? null,
-      batchId: batchId ?? null
-    };
-  }
-  function matchType(name, mimeType, accept) {
-    name = name.toLowerCase();
-    mimeType = mimeType.toLocaleLowerCase();
-    accept = accept.toLocaleLowerCase();
-    const acceptAtoms = accept.split(",").map(acceptAtom => acceptAtom.trim()).filter(Boolean);
-    return acceptAtoms.some(acceptAtom => {
-      if (acceptAtom.startsWith(".")) {
-        if (name.endsWith(acceptAtom)) return true;
-      } else if (acceptAtom.includes("/")) {
-        const [type, subtype] = mimeType.split("/");
-        const [acceptType, acceptSubtype] = acceptAtom.split("/");
-        if (acceptType === "*" || type && acceptType && acceptType === type) {
-          if (acceptSubtype === "*" || subtype && acceptSubtype && acceptSubtype === subtype) {
-            return true;
-          }
-        }
-      } else {
-        return true;
-      }
-      return false;
-    });
-  }
-  function download(url, name) {
-    if (!url) return;
-    const a = document.createElement("a");
-    a.href = url;
-    if (name !== void 0) {
-      a.download = name;
-    }
-    document.body.appendChild(a);
-    a.click();
-    document.body.removeChild(a);
-  }
-
   const buttonThemeOverrides = {
     paddingMedium: "0 3px",
     heightMedium: "24px",
@@ -52236,7 +52308,12 @@
           file: { status },
           listType
         } = props;
-        return ["finished"].includes(status) && mergedThumbnailUrlRef.value && listType === "image-card";
+        if (!["finished"].includes(status))
+          return false;
+        if (listType === "preview-list") {
+          return UUpload.isFilePreviewable(props.file);
+        }
+        return !!mergedThumbnailUrlRef.value && listType === "image-card";
       });
       async function handleRetryClick() {
         const onRetry = UUpload.onRetryRef.value;
@@ -52315,6 +52392,8 @@
         } = UUpload;
         if (onPreview) {
           onPreview(props.file);
+        } else if (props.listType === "preview-list") {
+          UUpload.openFilePreview(props.file);
         } else if (props.listType === "image-card") {
           const { value } = imageRef;
           if (!value)
@@ -52401,7 +52480,8 @@
                 `${clsPrefix}-upload-file`,
                 `${clsPrefix}-upload-file--${this.progressStatus}-status`,
                 file.url && file.status !== "error" && imageCardTypes.includes(listType) && `${clsPrefix}-upload-file--with-url`,
-                `${clsPrefix}-upload-file--${listType === "image" || listType === "image-card" ? "image-card" : "text"}-type`
+                `${clsPrefix}-upload-file--${listType === "image" || listType === "image-card" ? "image-card" : "text"}-type`,
+                listType === "preview-list" && `${clsPrefix}-upload-file--preview-list-type`
               ]
             },
             /* @__PURE__ */ vue.h(
@@ -52569,11 +52649,17 @@
         themeClassRef,
         maxReachedRef,
         showTriggerRef,
-        imageGroupPropsRef
+        imageGroupPropsRef,
+        previewSrcListRef,
+        previewShowRef,
+        previewCurrentRef
       } = UUpload;
       const isImageCardTypeRef = vue.computed(
         () => listTypeRef.value === "image-card" || listTypeRef.value === "image"
       );
+      const isPreviewListTypeRef = vue.computed(
+        () => listTypeRef.value === "preview-list"
+      );
       const renderFileList = () => mergedFileListRef.value.map((file) => /* @__PURE__ */ vue.h(
         UUploadFile,
         {
@@ -52587,6 +52673,21 @@
       const renderUploadFileList = () => isImageCardTypeRef.value ? /* @__PURE__ */ vue.h(_UImageGroup, { ...imageGroupPropsRef.value }, { default: renderFileList }) : /* @__PURE__ */ vue.h(FadeInExpandTransition, { group: true }, {
         default: renderFileList
       });
+      const renderPreview = () => /* @__PURE__ */ vue.h(
+        _UImageGroup,
+        {
+          ...imageGroupPropsRef.value,
+          srcList: previewSrcListRef.value,
+          show: previewShowRef.value,
+          current: previewCurrentRef.value,
+          onUpdateShow: (show) => {
+            previewShowRef.value = show;
+          },
+          onUpdateCurrent: (current) => {
+            previewCurrentRef.value = current;
+          }
+        }
+      );
       return () => {
         const { value: mergedClsPrefix } = mergedClsPrefixRef;
         const { value: abstract } = abstractRef;
@@ -52605,6 +52706,7 @@
             ]
           },
           renderUploadFileList(),
+          isPreviewListTypeRef.value && renderPreview(),
           showTriggerRef.value && !maxReachedRef.value && isImageCardTypeRef.value && /* @__PURE__ */ vue.h(_UUploadTrigger, null, slots)
         );
       };
@@ -52870,119 +52972,6 @@
     };
   }
 
-  const uploadProps = {
-    ...useTheme.props,
-    name: {
-      type: String,
-      default: "file"
-    },
-    accept: String,
-    action: String,
-    customRequest: Function,
-    directory: Boolean,
-    directoryDnd: { type: Boolean, default: void 0 },
-    method: {
-      type: String,
-      default: "POST"
-    },
-    multiple: Boolean,
-    showFileList: {
-      type: Boolean,
-      default: true
-    },
-    data: [Object, Function],
-    headers: [Object, Function],
-    withCredentials: Boolean,
-    responseType: {
-      type: String,
-      default: ""
-    },
-    disabled: {
-      type: Boolean,
-      default: void 0
-    },
-    vertical: {
-      type: Boolean,
-      default: false
-    },
-    icon: Object,
-    onChange: Function,
-    onRemove: Function,
-    onFinish: Function,
-    onError: Function,
-    onRetry: Function,
-    onBeforeUpload: Function,
-    isErrorState: Function,
-    /** currently not used */
-    onDownload: Function,
-    defaultUpload: {
-      type: Boolean,
-      default: true
-    },
-    fileList: Array,
-    "onUpdate:fileList": [Function, Array],
-    onUpdateFileList: [Function, Array],
-    fileListClass: String,
-    fileListStyle: [String, Object],
-    defaultFileList: {
-      type: Array,
-      default: () => []
-    },
-    showCancelButton: {
-      type: Boolean,
-      default: true
-    },
-    showRemoveButton: {
-      type: Boolean,
-      default: true
-    },
-    showDownloadButton: Boolean,
-    showRetryButton: {
-      type: Boolean,
-      default: true
-    },
-    customDownload: Function,
-    showPreviewButton: {
-      type: Boolean,
-      default: true
-    },
-    listType: {
-      type: String,
-      default: "text"
-    },
-    onPreview: Function,
-    shouldUseThumbnailUrl: {
-      type: Function,
-      default: (file) => {
-        if (!environmentSupportFile)
-          return false;
-        return isImageFile(file);
-      }
-    },
-    createThumbnailUrl: Function,
-    abstract: Boolean,
-    max: Number,
-    showTrigger: {
-      type: Boolean,
-      default: true
-    },
-    imageGroupProps: Object,
-    inputProps: Object,
-    triggerClass: String,
-    triggerStyle: [String, Object],
-    renderIcon: Function,
-    label: String,
-    size: {
-      type: String,
-      default: "medium"
-    },
-    title: String,
-    subtitle: String,
-    noIcon: {
-      type: Boolean,
-      default: false
-    }
-  };
   var _UUpload = vue.defineComponent({
     name: "Upload",
     props: uploadProps,
@@ -53032,15 +53021,15 @@
       function openFileDialog() {
         inputElRef.value?.click();
       }
-      function handleFileInputChange(e) {
-        const target = e.target;
+      function handleFileInputChange(event) {
+        const target = event.target;
         handleFileAddition(
           target.files ? Array.from(target.files).map((file) => ({
             file,
             entry: null,
             source: "input"
           })) : null,
-          e
+          event
         );
         target.value = "";
       }
@@ -53060,12 +53049,12 @@
         uploadKeyIndexRef.value += 1;
         return key;
       }
-      function handleFileAddition(fileAndEntries, e) {
+      function handleFileAddition(fileAndEntries, event) {
         if (!fileAndEntries || fileAndEntries.length === 0)
           return;
         const { onBeforeUpload } = props;
         fileAndEntries = mergedMultipleRef.value ? fileAndEntries : [fileAndEntries[0]];
-        const { max, accept } = props;
+        const { max, accept, maxSize } = props;
         fileAndEntries = fileAndEntries.filter(({ file, source }) => {
           if (source === "dnd" && accept?.trim()) {
             return matchType(file.name, file.type, accept);
@@ -53094,6 +53083,10 @@
               thumbnailUrl: null,
               fullPath: entry?.fullPath ?? `/${file.webkitRelativePath || file.name}`
             };
+            if (isFileSizeExceeded(file, maxSize)) {
+              fileInfo.status = "error";
+              return fileInfo;
+            }
             if (!onBeforeUpload || await onBeforeUpload({
               file: fileInfo,
               fileList: mergedFileListRef.value
@@ -53106,7 +53099,7 @@
           let nextTickChain = Promise.resolve();
           fileInfos.forEach((fileInfo) => {
             nextTickChain = nextTickChain.then(vue.nextTick).then(() => {
-              fileInfo && doChange(fileInfo, e, {
+              fileInfo && doChange(fileInfo, event, {
                 append: true
               });
             });
@@ -53133,6 +53126,15 @@
         filesToUpload.forEach((file) => {
           const { status } = file;
           if (status === "pending" || status === "error" && shouldReupload) {
+            if (isFileSizeExceeded(file.file, props.maxSize)) {
+              if (status === "pending") {
+                const fileAfterChange = Object.assign({}, file, {
+                  status: "error"
+                });
+                doChange(fileAfterChange);
+              }
+              return;
+            }
             if (props.customRequest) {
               customSubmitImpl({
                 inst: {
@@ -53213,6 +53215,26 @@
         }
         return "";
       }
+      function isFilePreviewable(file) {
+        return props.shouldUseThumbnailUrl(file) && getFilePreviewSrc(file) !== null;
+      }
+      const previewFileListRef = vue.computed(
+        () => mergedFileListRef.value.filter(isFilePreviewable)
+      );
+      const previewSrcListRef = vue.computed(
+        () => previewFileListRef.value.map((file) => getFilePreviewSrc(file))
+      );
+      const previewShowRef = vue.ref(false);
+      const previewCurrentRef = vue.ref(0);
+      function openFilePreview(file) {
+        const index = previewFileListRef.value.findIndex(
+          ({ id }) => id === file.id
+        );
+        if (index < 0)
+          return;
+        previewCurrentRef.value = index;
+        previewShowRef.value = true;
+      }
       const cssVarsRef = vue.computed(() => {
         const { value: size } = formItem.mergedSizeRef;
         const {
@@ -53332,7 +53354,12 @@
         imageGroupPropsRef: vue.toRef(props, "imageGroupProps"),
         mergedDirectoryDndRef: vue.computed(() => {
           return props.directoryDnd ?? props.directory;
-        })
+        }),
+        previewSrcListRef,
+        previewShowRef,
+        previewCurrentRef,
+        isFilePreviewable,
+        openFilePreview
       });
       const exposedMethods = {
         clear: () => {
@@ -54649,6 +54676,8 @@
     width: fit-content;
     display: flex;
     flex-direction: column;
+    padding: 12px;
+    gap: 12px;
   `, [cM("own", `
       background-color: var(--u-message-bubble-background-color-own);
       color: var(--u-message-bubble-text-color-own);
@@ -54656,16 +54685,12 @@
       border-bottom-right-radius: 6px;
     `)]), cE("title", `
     color: var(--u-message-bubble-title-color);
-    padding: 12px 16px 0;
     white-space: pre-wrap;
   `), cE("text", `
-    padding: 12px 16px;
     white-space: pre-wrap;
-  `), cE("text", `
-    padding-top: 8px;
-  `, [c$1("&&:first-child", `
-      padding-top: 12px;
-    `)]), cE("meta", `
+  `), cE("after-content", `
+    white-space: normal;
+  `), cE("meta", `
     display: flex;
     align-items: center;
     gap: 4px;
@@ -54837,6 +54862,12 @@
         );
         return url ?? null;
       };
+      const getAttachmentUrl = (attachment) => {
+        if (!attachment.url || attachment.url === "#")
+          return null;
+        return attachment.url;
+      };
+      const isAttachmentPreviewable = (file) => Boolean(file.thumbnailUrl);
       const handleAttachmentDownload = async (file) => {
         if (props.onAttachmentDownload) {
           const attachment = normalizedAttachmentsRef.value.find(
@@ -54877,7 +54908,7 @@
             name: attachment.name,
             status: attachment.status || MessageBubbleAttachmentStatus.FINISHED,
             percentage: attachment.percentage ?? null,
-            url: attachment.url ?? null,
+            url: getAttachmentUrl(attachment),
             thumbnailUrl: getThumbnailUrl(attachment),
             type: attachment.type ?? null,
             file: null,
@@ -54888,6 +54919,8 @@
           _UUpload,
           {
             abstract: true,
+            listType: "preview-list",
+            shouldUseThumbnailUrl: isAttachmentPreviewable,
             fileList,
             fileListStyle: withPadding ? {
               display: "flex",
@@ -54928,8 +54961,10 @@
           props.actions && props.actions.length > 0
         );
         const hasTitle = Boolean(props.title || slots.title);
+        const afterContentSlot = slots.afterContent || slots["after-content"];
+        const hasAfterContent = Boolean(afterContentSlot);
         const hasContentInsideBubble = Boolean(
-          props.content || slots.default || hasTitle || normalizedAttachmentsRef.value.length > 1
+          props.content || slots.default || hasAfterContent || hasTitle || normalizedAttachmentsRef.value.length > 1
         );
         const messageBubbleContent = hasContentInsideBubble ? /* @__PURE__ */ vue.h(
           "div",
@@ -54948,7 +54983,14 @@
             slots.title ? slots.title(messagePayloadRef.value) : resolveRenderContent(props.title)
           ),
           normalizedAttachmentsRef.value.length > 0 && renderAttachment(true),
-          (props.content || slots.default) && /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefixRef.value}-message-bubble__text` }, slots.default ? slots.default(messagePayloadRef.value) : resolveRenderContent(props.content))
+          (props.content || slots.default) && /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefixRef.value}-message-bubble__text` }, slots.default ? slots.default(messagePayloadRef.value) : resolveRenderContent(props.content)),
+          hasAfterContent && /* @__PURE__ */ vue.h(
+            "div",
+            {
+              class: `${mergedClsPrefixRef.value}-message-bubble__after-content`
+            },
+            afterContentSlot?.(messagePayloadRef.value)
+          )
         ) : normalizedAttachmentsRef.value.length === 1 ? renderAttachment() : null;
         return /* @__PURE__ */ vue.h(
           "div",
@@ -55590,6 +55632,21 @@
       const { mergedClsPrefixRef } = useConfig(props);
       const themeRef = UChat?.mergedThemeRef ?? useTheme("Chat", "-chat", style$15, chatLight, props, mergedClsPrefixRef);
       const { localeRef } = useLocale("Chat");
+      const messageBubbleThemeOverridesRef = vue.computed(() => {
+        const { self, peerOverrides } = themeRef.value;
+        return {
+          messageBubbleBackgroundColorOwn: self.messageBubbleBackgroundColorOwn,
+          messageBubbleBackgroundColorOther: self.messageBubbleBackgroundColorOther,
+          messageBubbleTextColorOwn: self.messageBubbleTextColorOwn,
+          messageBubbleTextColorOther: self.messageBubbleTextColorOther,
+          messageTimeColor: self.messageTimeColor,
+          attachmentBackgroundColorOwn: self.attachmentBackgroundColorOwn,
+          attachmentBackgroundColorOther: self.attachmentBackgroundColorOther,
+          unreadNotificationBackgroundColor: self.unreadNotificationBackgroundColor,
+          unreadNotificationTextColor: self.unreadNotificationTextColor,
+          ...peerOverrides.MessageBubble
+        };
+      });
       const cssVarsRef = vue.computed(() => {
         const {
           common: {
@@ -55705,7 +55762,9 @@
           {
             type: MessageBubbleType.SERVICE,
             serviceVariant: MessageBubbleServiceVariant.UNREAD,
-            content: `${count} ${mergedUnreadNotificationTextRef.value}`
+            content: `${count} ${mergedUnreadNotificationTextRef.value}`,
+            theme: themeRef.value.peers.MessageBubble,
+            themeOverrides: messageBubbleThemeOverridesRef.value
           }
         );
       };
@@ -55717,7 +55776,9 @@
             key: String(message.id),
             type: MessageBubbleType.SERVICE,
             serviceVariant,
-            content: message.content
+            content: message.content,
+            theme: themeRef.value.peers.MessageBubble,
+            themeOverrides: messageBubbleThemeOverridesRef.value
           }
         );
       };
@@ -55760,12 +55821,15 @@
             retryText: mergedRetryTextRef.value,
             actions: getMessageBubbleActions(message),
             onRetry: handleMessageBubbleRetry,
-            onAttachmentDownload: handleMessageBubbleAttachmentDownload
+            onAttachmentDownload: handleMessageBubbleAttachmentDownload,
+            theme: themeRef.value.peers.MessageBubble,
+            themeOverrides: messageBubbleThemeOverridesRef.value
           },
           {
             bubbleActions: slots.bubbleActions ? () => slots.bubbleActions?.(message) : void 0,
             messageStatus: slots.messageStatus ? () => slots.messageStatus?.(message) : void 0,
             messageAttachment: slots.messageAttachment ? () => slots.messageAttachment?.(message) : void 0,
+            afterContent: slots.messageAfterContent ? () => slots.messageAfterContent?.(message) : void 0,
             "upload-file-title": slots.messageAttachmentTitle,
             "upload-file-subtitle": slots.messageAttachmentSubtitle
           }
@@ -56572,6 +56636,7 @@
             messageAttachmentTitle: slots.messageAttachmentTitle,
             messageAttachmentSubtitle: slots.messageAttachmentSubtitle,
             messageStatus: slots.messageStatus,
+            messageAfterContent: slots.messageAfterContent,
             bubbleActions: slots.bubbleActions
           }
         );
@@ -117065,7 +117130,7 @@ ${icon.label}`.toLowerCase()
     });
   }
 
-  var version = "2.3.0";
+  var version = "2.3.2";
 
   function create({
     componentPrefix = "U",