@schlenkr/quassel 0.5.1 → 0.5.3

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);
   }
@@ -730,9 +771,9 @@
     --tw-leading: 1.625;
     line-height: 1.625;
   }
-  .qsl\:leading-\[var\(--qsl-chat-line-height\,1\.5\)\] {
-    --tw-leading: var(--qsl-chat-line-height,1.5);
-    line-height: var(--qsl-chat-line-height,1.5);
+  .qsl\:leading-\[var\(--qsl-chat-line-height\,1\.65\)\] {
+    --tw-leading: var(--qsl-chat-line-height,1.65);
+    line-height: var(--qsl-chat-line-height,1.65);
   }
   .qsl\:leading-normal {
     --tw-leading: var(--qsl-leading-normal);
@@ -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);
@@ -1560,11 +1608,14 @@
       opacity: 100%;
     }
   }
+  li + .qsl\:\[li\+\&\]\:mt-1 {
+    margin-top: var(--qsl-spacing);
+  }
   li > .qsl\:\[li\>\&\]\:my-0 {
     margin-block: 0px;
   }
-  p + .qsl\:\[p\+\&\]\:mt-2 {
-    margin-top: calc(var(--qsl-spacing) * 2);
+  p + .qsl\:\[p\+\&\]\:mt-3 {
+    margin-top: calc(var(--qsl-spacing) * 3);
   }
   pre > .qsl\:\[pre\>\&\]\:bg-transparent {
     background-color: transparent;
@@ -1858,6 +1909,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 +2040,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 +2080,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 +2109,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;
@@ -530,10 +535,10 @@ var components = {
   h4: ({ children }) => /* @__PURE__ */ jsx8("h4", { className: "qsl:mt-2 qsl:mb-1 qsl:font-medium", children }),
   h5: ({ children }) => /* @__PURE__ */ jsx8("h5", { className: "qsl:mt-2 qsl:mb-1 qsl:font-medium", children }),
   h6: ({ children }) => /* @__PURE__ */ jsx8("h6", { className: "qsl:mt-2 qsl:mb-1 qsl:font-medium", children }),
-  p: ({ children }) => /* @__PURE__ */ jsx8("p", { className: "qsl:[p+&]:mt-2", children }),
-  ul: ({ children }) => /* @__PURE__ */ jsx8("ul", { className: "qsl:my-2 qsl:list-disc qsl:pl-6 qsl:[li>&]:my-0", children }),
-  ol: ({ children }) => /* @__PURE__ */ jsx8("ol", { className: "qsl:my-2 qsl:list-decimal qsl:pl-6 qsl:[li>&]:my-0", children }),
-  li: ({ children }) => /* @__PURE__ */ jsx8("li", { className: "qsl:marker:text-muted-foreground qsl:in-data-[tone=on-color]:marker:text-inherit", children }),
+  p: ({ children }) => /* @__PURE__ */ jsx8("p", { className: "qsl:[p+&]:mt-3", children }),
+  ul: ({ children }) => /* @__PURE__ */ jsx8("ul", { className: "qsl:my-3 qsl:list-disc qsl:pl-6 qsl:[li>&]:my-0", children }),
+  ol: ({ children }) => /* @__PURE__ */ jsx8("ol", { className: "qsl:my-3 qsl:list-decimal qsl:pl-6 qsl:[li>&]:my-0", children }),
+  li: ({ children }) => /* @__PURE__ */ jsx8("li", { className: "qsl:[li+&]:mt-1 qsl:marker:text-muted-foreground qsl:in-data-[tone=on-color]:marker:text-inherit", children }),
   hr: () => /* @__PURE__ */ jsx8("hr", { className: "qsl:my-3 qsl:border-t qsl:border-border" }),
   img: ({ src, alt }) => /* @__PURE__ */ jsx8("img", { alt, className: "qsl:h-auto qsl:max-w-full", src: typeof src === "string" ? src : void 0 }),
   blockquote: ({ children }) => /* @__PURE__ */ jsx8("blockquote", { className: "qsl:my-1 qsl:border-l-2 qsl:border-border qsl:pl-3 qsl:text-muted-foreground qsl:in-data-[tone=on-color]:border-white/50 qsl:in-data-[tone=on-color]:text-inherit", children }),
@@ -1185,7 +1190,7 @@ var chipClasses = cn(
 var chipInteractiveClasses = "qsl:cursor-pointer qsl:hover:border-border qsl:hover:bg-secondary qsl:hover:text-foreground qsl:focus-visible:border-border qsl:focus-visible:bg-secondary qsl:focus-visible:text-foreground qsl:focus-visible:outline-none qsl:data-[state=done]:hover:opacity-100 qsl:data-[state=done]:focus-visible:opacity-100";
 var collapseAtBottomFrom = 11;
 var maxAnnouncementsAtOnce = 2;
-var bubbleBodyClasses = "qsl:relative qsl:max-w-[86%] qsl:px-3 qsl:py-2 qsl:leading-[var(--qsl-chat-line-height,1.5)] qsl:[overflow-wrap:anywhere] qsl:@max-[620px]/chat:max-w-full";
+var bubbleBodyClasses = "qsl:relative qsl:max-w-[86%] qsl:px-3 qsl:py-2 qsl:leading-[var(--qsl-chat-line-height,1.65)] qsl:[overflow-wrap:anywhere] qsl:@max-[620px]/chat:max-w-full";
 function isStep(message) {
   return !!message && (message.role === "thinking" || message.role === "tool");
 }
@@ -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,12 +1780,12 @@ 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 })
   ] });
   const cursor = message.role === "assistant" && message.textCursor ? JSON.stringify(message.textCursor) : void 0;
-  if (!useBubble) return /* @__PURE__ */ jsx13("div", { "data-chat-text-cursor": cursor, className: cn(stepSpacing, "qsl:group qsl:relative qsl:w-full qsl:leading-[var(--qsl-chat-line-height,1.5)] qsl:text-foreground"), "data-message": "answer", children: content });
+  if (!useBubble) return /* @__PURE__ */ jsx13("div", { "data-chat-text-cursor": cursor, className: cn(stepSpacing, "qsl:group qsl:relative qsl:w-full qsl:leading-[var(--qsl-chat-line-height,1.65)] qsl:text-foreground"), "data-message": "answer", children: content });
   const fullBackground = message.role === "user" && bubbleOptions?.userBackgroundFullWidth !== false;
   const surfaceClasses = message.bubble ? "qsl:rounded-lg" : "qsl:rounded-[var(--qsl-bubble-radius,10px_10px_4px_10px)] qsl:border qsl:border-border qsl:bg-secondary qsl:in-data-[tone=material]:rounded-[var(--qsl-bubble-radius,9px)] qsl:in-data-[tone=material]:border-glass-edge/20 qsl:in-data-[tone=material]:bg-primary/15";
   return /* @__PURE__ */ jsxs6(
@@ -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
@@ -2125,7 +2170,7 @@ function ChatInputToolbar({
     fileInput.dragging && "qsl:outline-2 qsl:outline-offset-[3px] qsl:outline-dashed qsl:outline-primary"
   );
   const textareaClasses = cn(
-    "qsl:resize-none qsl:overscroll-contain qsl:border-0 qsl:bg-transparent qsl:text-chat qsl:leading-[var(--qsl-chat-line-height,1.5)] qsl:text-foreground qsl:placeholder:text-muted-foreground qsl:focus:outline-none",
+    "qsl:resize-none qsl:overscroll-contain qsl:border-0 qsl:bg-transparent qsl:text-chat qsl:leading-[var(--qsl-chat-line-height,1.65)] qsl:text-foreground qsl:placeholder:text-muted-foreground qsl:focus:outline-none",
     inline ? "qsl:min-w-0 qsl:flex-1 qsl:px-2.5 qsl:py-2" : toolbar ? "qsl:w-full qsl:min-w-0 qsl:flex-auto qsl:px-2 qsl:py-[3px] qsl:leading-[1.3]" : "qsl:px-3 qsl:pt-3 qsl:pb-2"
   );
   const toolbarRowClasses = cn(