@schlenkr/quassel 0.5.1 → 0.5.2

package/chat.css

@@ -43,6 +43,9 @@
   .qsl\:absolute {
     position: absolute;
   }
+  .qsl\:fixed {
+    position: fixed;
+  }
   .qsl\:relative {
     position: relative;
   }
@@ -55,6 +58,9 @@
   .qsl\:top-1 {
     top: var(--qsl-spacing);
   }
+  .qsl\:top-1\/2 {
+    top: calc(1 / 2 * 100%);
+  }
   .qsl\:right-1 {
     right: var(--qsl-spacing);
   }
@@ -64,6 +70,9 @@
   .qsl\:bottom-\[calc\(var\(--qsl-composer-height\,0px\)_\+_12px\)\] {
     bottom: calc(var(--qsl-composer-height,0px) + 12px);
   }
+  .qsl\:left-1\/2 {
+    left: calc(1 / 2 * 100%);
+  }
   .qsl\:isolate {
     isolation: isolate;
   }
@@ -79,6 +88,12 @@
   .qsl\:z-\[110\] {
     z-index: 110;
   }
+  .qsl\:z-\[120\] {
+    z-index: 120;
+  }
+  .qsl\:z-\[121\] {
+    z-index: 121;
+  }
   .qsl\:-mx-\[16px\] {
     margin-inline: calc(16px * -1);
   }
@@ -198,6 +213,9 @@
   .qsl\:max-h-\[240px\] {
     max-height: 240px;
   }
+  .qsl\:max-h-\[calc\(100vh-6rem\)\] {
+    max-height: calc(100vh - 6rem);
+  }
   .qsl\:max-h-\[calc\(var\(--qsl-panel-height\,100dvh\)_\/_2\)\] {
     max-height: calc(var(--qsl-panel-height,100dvh) / 2);
   }
@@ -225,6 +243,9 @@
   .qsl\:w-\[190px\] {
     width: 190px;
   }
+  .qsl\:w-\[320px\] {
+    width: 320px;
+  }
   .qsl\:w-\[calc\(100\%_-_2_\*_var\(--qsl-chat-horizontal-padding\,24px\)\)\] {
     width: calc(100% - 2 * var(--qsl-chat-horizontal-padding,24px));
   }
@@ -246,6 +267,9 @@
   .qsl\:max-w-\[86\%\] {
     max-width: 86%;
   }
+  .qsl\:max-w-\[94vw\] {
+    max-width: 94vw;
+  }
   .qsl\:max-w-\[220px\] {
     max-width: 220px;
   }
@@ -294,6 +318,14 @@
   .qsl\:origin-\(--transform-origin\) {
     transform-origin: var(--transform-origin);
   }
+  .qsl\:-translate-x-1\/2 {
+    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .qsl\:-translate-y-1\/2 {
+    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .qsl\:rotate-90 {
     rotate: 90deg;
   }
@@ -309,6 +341,9 @@
   .qsl\:cursor-pointer {
     cursor: pointer;
   }
+  .qsl\:cursor-zoom-in {
+    cursor: zoom-in;
+  }
   .qsl\:resize-none {
     resize: none;
   }
@@ -515,6 +550,12 @@
       background-color: color-mix(in oklab, var(--qsl-color-black) 15%, transparent);
     }
   }
+  .qsl\:bg-black\/75 {
+    background-color: var(--qsl-color-black);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--qsl-color-black) 75%, transparent);
+    }
+  }
   .qsl\:bg-card {
     background-color: var(--qsl-card);
   }
@@ -822,6 +863,9 @@
     --tw-numeric-spacing: tabular-nums;
     font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
   }
+  .qsl\:underline {
+    text-decoration-line: underline;
+  }
   .qsl\:\[text-underline-offset\:2px\] {
     text-underline-offset: 2px;
   }
@@ -857,6 +901,10 @@
     --tw-shadow: var(--qsl-bar-shadow);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .qsl\:shadow-lg {
+    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .qsl\:shadow-md {
     --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -1858,6 +1906,21 @@
     display: none;
   }
 }
+@property --tw-translate-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-translate-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-translate-z {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
 @property --tw-space-y-reverse {
   syntax: "*";
   inherits: false;
@@ -1974,21 +2037,6 @@
   syntax: "*";
   inherits: false;
 }
-@property --tw-translate-x {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0;
-}
-@property --tw-translate-y {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0;
-}
-@property --tw-translate-z {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0;
-}
 @keyframes enter {
   from {
     opacity: var(--tw-enter-opacity,1);
@@ -2029,6 +2077,9 @@
       --qsl-base: 13px;
     }
     *, ::before, ::after, ::backdrop {
+      --tw-translate-x: 0;
+      --tw-translate-y: 0;
+      --tw-translate-z: 0;
       --tw-space-y-reverse: 0;
       --tw-border-style: solid;
       --tw-leading: initial;
@@ -2055,9 +2106,6 @@
       --tw-ring-offset-shadow: 0 0 #0000;
       --tw-outline-style: solid;
       --tw-duration: initial;
-      --tw-translate-x: 0;
-      --tw-translate-y: 0;
-      --tw-translate-z: 0;
       --tw-animation-delay: 0s;
       --tw-animation-direction: normal;
       --tw-animation-duration: initial;

package/index.js

@@ -72,6 +72,8 @@ var englishTexts = {
   attachFiles: "Attach files",
   attachFilesHint: "Attach files (up to {count} files, {size} in total)",
   removeAttachment: "Remove {name}",
+  enlargeImage: "Enlarge {name}",
+  downloadAttachment: "Download",
   attachmentPreparing: "Preparing ...",
   attachmentsPreparing: "Preparing attachments ...",
   attachmentReadFailed: "The file could not be read. Remove it and add it again.",
@@ -139,6 +141,8 @@ var germanTexts = {
   attachFiles: "Dateien anh\xE4ngen",
   attachFilesHint: "Dateien anh\xE4ngen (bis zu {count} Dateien, insgesamt {size})",
   removeAttachment: "{name} entfernen",
+  enlargeImage: "{name} vergr\xF6\xDFern",
+  downloadAttachment: "Herunterladen",
   attachmentPreparing: "Wird vorbereitet ...",
   attachmentsPreparing: "Anh\xE4nge werden vorbereitet ...",
   attachmentReadFailed: "Die Datei konnte nicht gelesen werden. Den Anhang entfernen und erneut hinzuf\xFCgen.",
@@ -163,6 +167,7 @@ var cn = createCn({ prefix: "qsl", extend: { theme: { text: ["meta", "trace", "t
 // packages/quassel/src/ChatMessages.tsx
 import { useCallback as useCallback2, useContext as useContext3, useEffect as useEffect3, useLayoutEffect, useMemo as useMemo3, useRef as useRef3, useState as useState4 } from "react";
 import { createPortal } from "react-dom";
+import { Dialog } from "@base-ui/react/dialog";
 
 // packages/quassel/src/chat-scroll.ts
 var atEnd = (viewport) => viewport.scrollHeight - viewport.clientHeight - viewport.scrollTop <= 24;
@@ -1760,7 +1765,7 @@ function Bubble({
   if (message.role === "system") {
     return /* @__PURE__ */ jsxs6("div", { className: cn(stepSpacing, "qsl:border-l-2 qsl:border-destructive/50 qsl:pl-3 qsl:text-sm qsl:text-muted-foreground"), "data-message": "system", children: [
       /* @__PURE__ */ jsx13(Markdown, { text: message.text }),
-      /* @__PURE__ */ jsx13(MessageAttachments, { label: texts.attachments, message })
+      /* @__PURE__ */ jsx13(MessageAttachments, { message, texts })
     ] });
   }
   if (!message.text.trim() && !message.attachments?.length) return null;
@@ -1775,7 +1780,7 @@ function Bubble({
       useBubble && message.bubble && "qsl:rounded-full qsl:border qsl:border-white/30 qsl:bg-black/15 qsl:px-[7px] qsl:py-px qsl:tracking-[0.02em]"
     ), "data-chat": "sender", children: sender }),
     /* @__PURE__ */ jsx13(Markdown, { text: message.text, streaming: message.role === "assistant" && !message.closed }),
-    /* @__PURE__ */ jsx13(MessageAttachments, { label: texts.attachments, message }),
+    /* @__PURE__ */ jsx13(MessageAttachments, { message, texts }),
     message.steered && /* @__PURE__ */ jsx13("small", { className: "qsl:mt-1 qsl:block qsl:text-label qsl:leading-[1.45] qsl:opacity-70", "data-chat": "steered", children: texts.steered }),
     /* @__PURE__ */ jsx13(MessageActions, { message, options: messageActions, texts })
   ] });
@@ -1826,16 +1831,56 @@ function ActionContent({
     }
   );
 }
-function MessageAttachments({ message, label }) {
+function MessageAttachments({ message, texts }) {
+  const [enlarged, setEnlarged] = useState4();
   if (!message.attachments?.length) return null;
-  return /* @__PURE__ */ jsx13("ul", { className: "qsl:mt-2.5 qsl:flex qsl:flex-wrap qsl:gap-2", "aria-label": label, children: message.attachments.map((attachment, index) => /* @__PURE__ */ jsxs6("li", { className: "qsl:relative qsl:flex qsl:w-[190px] qsl:max-w-full qsl:min-w-0 qsl:flex-col qsl:overflow-hidden qsl:rounded-lg qsl:border qsl:border-border qsl:text-sm", children: [
-    attachment.mediaType.startsWith("image/") && /* @__PURE__ */ jsx13("a", { href: attachmentDownloadUrl(attachment.url), download: attachment.name, children: /* @__PURE__ */ jsx13("img", { className: "qsl:block qsl:h-[112px] qsl:w-full qsl:bg-secondary qsl:object-contain", src: attachment.url, alt: attachment.name, loading: "lazy" }) }),
-    attachment.mediaType.startsWith("video/") && /* @__PURE__ */ jsx13("video", { className: "qsl:block qsl:h-[112px] qsl:w-full qsl:bg-secondary qsl:object-contain", src: attachment.url, controls: true, preload: "metadata", "aria-label": attachment.name }),
-    /* @__PURE__ */ jsxs6("div", { className: "qsl:flex qsl:flex-col qsl:gap-1 qsl:p-2 qsl:[overflow-wrap:anywhere]", children: [
-      /* @__PURE__ */ jsx13("a", { className: "qsl:font-medium", href: attachmentDownloadUrl(attachment.url), download: attachment.name, children: attachment.name }),
-      /* @__PURE__ */ jsx13("small", { children: formatAttachmentSize(attachment.size) })
-    ] })
-  ] }, `${attachment.url}-${index}`)) });
+  return /* @__PURE__ */ jsxs6(Fragment2, { children: [
+    /* @__PURE__ */ jsx13("ul", { className: "qsl:mt-2.5 qsl:flex qsl:flex-wrap qsl:gap-2", "aria-label": texts.attachments, children: message.attachments.map((attachment, index) => {
+      const isImage = attachment.mediaType.startsWith("image/");
+      return /* @__PURE__ */ jsxs6("li", { className: cn("qsl:relative qsl:flex qsl:max-w-full qsl:min-w-0 qsl:flex-col qsl:overflow-hidden qsl:rounded-lg qsl:border qsl:border-border qsl:text-sm", isImage ? "qsl:w-[320px]" : "qsl:w-[190px]"), children: [
+        isImage && /* @__PURE__ */ jsx13(
+          "button",
+          {
+            type: "button",
+            className: "qsl:block qsl:w-full qsl:cursor-zoom-in qsl:bg-secondary",
+            "aria-label": fillText(texts.enlargeImage ?? defaultTexts.enlargeImage, { name: attachment.name }),
+            onClick: () => setEnlarged(attachment),
+            "data-chat": "attachment-image",
+            children: /* @__PURE__ */ jsx13("img", { className: "qsl:mx-auto qsl:block qsl:max-h-[240px] qsl:max-w-full qsl:object-contain", src: attachment.url, alt: attachment.name, loading: "lazy" })
+          }
+        ),
+        attachment.mediaType.startsWith("video/") && /* @__PURE__ */ jsx13("video", { className: "qsl:block qsl:h-[112px] qsl:w-full qsl:bg-secondary qsl:object-contain", src: attachment.url, controls: true, preload: "metadata", "aria-label": attachment.name }),
+        /* @__PURE__ */ jsxs6("div", { className: "qsl:flex qsl:flex-col qsl:gap-1 qsl:p-2 qsl:[overflow-wrap:anywhere]", children: [
+          /* @__PURE__ */ jsx13("a", { className: "qsl:font-medium", href: attachmentDownloadUrl(attachment.url), download: attachment.name, children: attachment.name }),
+          /* @__PURE__ */ jsx13("small", { children: formatAttachmentSize(attachment.size) })
+        ] })
+      ] }, `${attachment.url}-${index}`);
+    }) }),
+    /* @__PURE__ */ jsx13(ImageViewer, { attachment: enlarged, onClose: () => setEnlarged(void 0), texts })
+  ] });
+}
+function ImageViewer({ attachment, onClose, texts }) {
+  const portalContainer = useQuasselPortalContainer();
+  return /* @__PURE__ */ jsx13(Dialog.Root, { open: attachment !== void 0, onOpenChange: (open) => !open && onClose(), children: /* @__PURE__ */ jsxs6(Dialog.Portal, { container: portalContainer, children: [
+    /* @__PURE__ */ jsx13(Dialog.Backdrop, { className: "qsl:fixed qsl:inset-0 qsl:z-[120] qsl:bg-black/75", "data-quassel": "" }),
+    /* @__PURE__ */ jsx13(
+      Dialog.Popup,
+      {
+        className: "qsl:fixed qsl:top-1/2 qsl:left-1/2 qsl:z-[121] qsl:flex qsl:max-w-[94vw] qsl:-translate-x-1/2 qsl:-translate-y-1/2 qsl:flex-col qsl:items-center qsl:gap-2 qsl:outline-none",
+        "aria-label": attachment?.name,
+        "data-quassel": "",
+        "data-chat": "image-viewer",
+        children: attachment && /* @__PURE__ */ jsxs6(Fragment2, { children: [
+          /* @__PURE__ */ jsx13("img", { className: "qsl:block qsl:max-h-[calc(100vh-6rem)] qsl:max-w-full qsl:rounded-md qsl:bg-background qsl:object-contain qsl:shadow-lg", src: attachment.url, alt: attachment.name }),
+          /* @__PURE__ */ jsxs6("div", { className: "qsl:flex qsl:items-center qsl:gap-4 qsl:text-sm qsl:text-white", children: [
+            /* @__PURE__ */ jsx13("span", { className: "qsl:[overflow-wrap:anywhere]", children: attachment.name }),
+            /* @__PURE__ */ jsx13("a", { className: "qsl:underline", href: attachmentDownloadUrl(attachment.url), download: attachment.name, children: texts.downloadAttachment ?? defaultTexts.downloadAttachment }),
+            /* @__PURE__ */ jsx13(Dialog.Close, { className: "qsl:cursor-pointer qsl:underline", children: texts.close })
+          ] })
+        ] })
+      }
+    )
+  ] }) });
 }
 
 // packages/quassel/src/ChatPanel.tsx