@schlenkr/quassel 0.5.0 → 0.5.2

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.",
@@ -158,11 +162,12 @@ var defaultTexts = englishTexts;
 
 // packages/quassel/src/ui/cn.ts
 import { createCn } from "cn/config";
-var cn = createCn({ prefix: "qsl", extend: { theme: { text: ["meta", "trace", "label", "chat"] } } });
+var cn = createCn({ prefix: "qsl", extend: { theme: { text: ["meta", "trace", "timestamp", "label", "chat"] } } });
 
 // 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;
@@ -933,10 +938,14 @@ import { CheckIcon as CheckIcon4, ChevronDownIcon, ChevronRightIcon, ChevronUpIc
 // packages/quassel/src/options.ts
 var cssLength = (value) => typeof value === "number" ? `${value}px` : value;
 var appearanceStyle = (appearance) => ({
+  "--qsl-font-size": cssLength(appearance?.fontSize),
   "--qsl-chat-font-size": cssLength(appearance?.fontSize),
   "--qsl-chat-line-height": appearance?.lineHeight,
   "--qsl-chat-message-gap": cssLength(appearance?.messageGap),
-  "--qsl-chat-dense-message-gap": cssLength(appearance?.denseMessageGap)
+  "--qsl-chat-dense-message-gap": cssLength(appearance?.denseMessageGap),
+  "--qsl-tool-font-scale": appearance?.toolFontScale,
+  "--qsl-tool-group-gap": cssLength(appearance?.toolGroupGap),
+  "--qsl-tool-row-padding": cssLength(appearance?.toolRowPadding)
 });
 
 // packages/quassel/src/timestamps.ts
@@ -1159,10 +1168,10 @@ function announce(text) {
 
 // packages/quassel/src/ChatMessages.tsx
 import { Fragment as Fragment2, jsx as jsx13, jsxs as jsxs6 } from "react/jsx-runtime";
-var stepClasses = "qsl:mt-[var(--qsl-chat-message-gap,16px)]";
-var denseStepClasses = "qsl:mt-[var(--qsl-chat-dense-message-gap,8px)]";
-var traceClasses = "qsl:flex qsl:w-full qsl:gap-2 qsl:pl-6 qsl:text-left qsl:text-trace qsl:leading-[1.375] qsl:text-muted-foreground";
-var traceButtonClasses = "qsl:cursor-pointer qsl:rounded-md qsl:py-1 qsl:pr-2 qsl:transition-colors qsl:hover:bg-secondary qsl:hover:text-foreground qsl:focus-visible:bg-secondary qsl:focus-visible:text-foreground qsl:focus-visible:outline-none";
+var stepClasses = "qsl:mt-[var(--qsl-chat-message-gap,10px)]";
+var denseStepClasses = "qsl:mt-[var(--qsl-chat-dense-message-gap,3px)]";
+var traceClasses = "qsl:flex qsl:w-full qsl:gap-2 qsl:py-[var(--qsl-tool-row-padding,1px)] qsl:pl-6 qsl:text-left qsl:text-trace qsl:leading-[1.375] qsl:text-muted-foreground";
+var traceButtonClasses = "qsl:cursor-pointer qsl:rounded-md qsl:pr-2 qsl:transition-colors qsl:hover:bg-secondary qsl:hover:text-foreground qsl:focus-visible:bg-secondary qsl:focus-visible:text-foreground qsl:focus-visible:outline-none";
 var traceIconClasses = "qsl:mt-0.5 qsl:flex-none qsl:opacity-60";
 var traceErrorIconClasses = "qsl:mt-0.5 qsl:flex-none qsl:text-destructive qsl:opacity-100";
 var traceLineClasses = "qsl:min-w-0 qsl:self-baseline qsl:[overflow-wrap:anywhere]";
@@ -1181,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.625)] 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.5)] qsl:[overflow-wrap:anywhere] qsl:@max-[620px]/chat:max-w-full";
 function isStep(message) {
   return !!message && (message.role === "thinking" || message.role === "tool");
 }
@@ -1337,13 +1346,22 @@ function ChatMessages({
     [selected, detailMode, running2, dock]
   );
   const openActions = dock ? messages.filter(isOpenAction) : [];
-  const withTime = (content, key, at, dense = false) => showTimestamps ? /* @__PURE__ */ jsxs6("div", { className: cn("qsl:flex qsl:items-baseline qsl:gap-2", dense ? denseStepClasses : stepClasses), children: [
-    /* @__PURE__ */ jsx13("time", { dateTime: messageDate(at)?.toISOString(), className: cn(
-      "qsl:flex-none qsl:text-meta qsl:tabular-nums qsl:text-muted-foreground qsl:opacity-85",
-      timestampOptions?.format && timestampOptions.format !== "time" ? "qsl:w-[clamp(60px,20%,120px)]" : "qsl:min-w-[5ch] qsl:whitespace-nowrap"
-    ), children: messageDate(at) ? timestampLabel(messageDate(at), timestampOptions, now) : "" }),
-    /* @__PURE__ */ jsx13("div", { className: "qsl:min-w-0 qsl:flex-1 qsl:[&>*:first-child]:mt-0", children: content })
-  ] }, `time-${key}`) : content;
+  const withTime = (content, key, at, dense = false) => showTimestamps ? /* @__PURE__ */ jsxs6(
+    "div",
+    {
+      className: cn("qsl:flex", timestampOptions?.position === "above" ? "qsl:flex-col qsl:items-stretch qsl:gap-1" : "qsl:items-baseline qsl:gap-2", dense ? denseStepClasses : stepClasses),
+      "data-chat": "timestamped",
+      "data-timestamp-position": timestampOptions?.position ?? "aside",
+      children: [
+        /* @__PURE__ */ jsx13("time", { dateTime: messageDate(at)?.toISOString(), className: cn(
+          "qsl:flex-none qsl:text-timestamp qsl:leading-[1.375] qsl:tabular-nums qsl:text-muted-foreground qsl:opacity-85",
+          timestampOptions?.position === "above" ? "qsl:self-start" : timestampOptions?.format && timestampOptions.format !== "time" ? "qsl:w-[clamp(60px,20%,120px)]" : "qsl:min-w-[5ch] qsl:whitespace-nowrap"
+        ), children: messageDate(at) ? timestampLabel(messageDate(at), timestampOptions, now) : "" }),
+        /* @__PURE__ */ jsx13("div", { className: "qsl:min-w-0 qsl:flex-1 qsl:[&>*:first-child]:mt-0", children: content })
+      ]
+    },
+    `time-${key}`
+  ) : content;
   const chipMode = detailMode === "current" || detailMode === "chips" || detailMode === "icons";
   const elapsedAfter = running2 && toolElapsedThreshold !== false ? toolElapsedThreshold : void 0;
   const groupMode = detailMode === "grouped";
@@ -1439,7 +1457,8 @@ function ChatMessages({
   const transcript = /* @__PURE__ */ jsxs6("div", { className: cn("qsl:@container/chat qsl:relative qsl:flex qsl:min-h-0 qsl:flex-1 qsl:flex-col", className), "data-quassel": "", style: {
     ...appearanceStyle(appearance),
     "--qsl-chat-content-max-width": typeof maxWidth === "number" ? `${maxWidth}px` : maxWidth,
-    "--qsl-chat-horizontal-padding": typeof horizontalPadding === "number" ? `${horizontalPadding}px` : horizontalPadding
+    "--qsl-chat-horizontal-padding": typeof horizontalPadding === "number" ? `${horizontalPadding}px` : horizontalPadding,
+    "--qsl-timestamp-font-size": timestampOptions?.fontScale === void 0 ? void 0 : `calc(var(--qsl-base) * ${timestampOptions.fontScale})`
   }, children: [
     /* @__PURE__ */ jsx13(
       "div",
@@ -1505,7 +1524,7 @@ function ChatMessages({
       }
     }, children: /* @__PURE__ */ jsx13(ChevronDownIcon, {}) }) }),
     dock && openActions.length > 0 && createPortal(
-      /* @__PURE__ */ jsx13("div", { className: "qsl:flex qsl:flex-col qsl:gap-[var(--qsl-chat-dense-message-gap,8px)] qsl:text-chat qsl:text-foreground", style: appearanceStyle(appearance), children: openActions.map((message) => /* @__PURE__ */ jsx13("div", { children: /* @__PURE__ */ jsx13(ActionContent, { action: message.action, onDismissAction, renderAction, text: message.text, texts: allTexts }) }, message.key)) }),
+      /* @__PURE__ */ jsx13("div", { className: "qsl:flex qsl:flex-col qsl:gap-[var(--qsl-chat-dense-message-gap,3px)] qsl:text-chat qsl:text-foreground", style: appearanceStyle(appearance), children: openActions.map((message) => /* @__PURE__ */ jsx13("div", { children: /* @__PURE__ */ jsx13(ActionContent, { action: message.action, onDismissAction, renderAction, text: message.text, texts: allTexts }) }, message.key)) }),
       dock
     )
   ] });
@@ -1604,7 +1623,7 @@ function StepGroup({
     ] })
   ] });
   if (!groupExpandable) {
-    return /* @__PURE__ */ jsx13("div", { className: stepClasses, "data-step": "group", children: /* @__PURE__ */ jsx13("div", { className: cn(traceClasses, "qsl:items-center qsl:py-1 qsl:pr-2 qsl:pl-1", active && "qsl:animate-fade-pulse qsl:motion-reduce:animate-none"), children: summary }) });
+    return /* @__PURE__ */ jsx13("div", { className: stepClasses, "data-step": "group", children: /* @__PURE__ */ jsx13("div", { className: cn(traceClasses, "qsl:items-center qsl:pr-2 qsl:pl-1", active && "qsl:animate-fade-pulse qsl:motion-reduce:animate-none"), children: summary }) });
   }
   return /* @__PURE__ */ jsxs6("div", { className: stepClasses, "data-step": "group", children: [
     /* @__PURE__ */ jsxs6(
@@ -1621,7 +1640,7 @@ function StepGroup({
         ]
       }
     ),
-    open && /* @__PURE__ */ jsx13("div", { className: "qsl:mt-0.5 qsl:flex qsl:flex-col qsl:gap-0.5 qsl:pl-3", children: messages.map((message) => /* @__PURE__ */ jsx13(TraceLine, { className: "qsl:pl-3", elapsedAfter, expandable, message, texts, toolArgumentsText }, message.key)) }),
+    open && /* @__PURE__ */ jsx13("div", { className: "qsl:mt-0.5 qsl:flex qsl:flex-col qsl:gap-[var(--qsl-tool-group-gap,1px)] qsl:pl-3", children: messages.map((message) => /* @__PURE__ */ jsx13(TraceLine, { className: "qsl:pl-3", elapsedAfter, expandable, message, texts, toolArgumentsText }, message.key)) }),
     open && messages.length >= collapseAtBottomFrom && /* @__PURE__ */ jsxs6(
       "button",
       {
@@ -1746,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;
@@ -1761,28 +1780,35 @@ 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.625)] qsl:text-foreground"), "data-message": "answer", children: content });
-  return /* @__PURE__ */ jsx13(
+  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 });
+  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(
     "div",
     {
       "data-chat-text-cursor": cursor,
-      className: cn(stepSpacing, "qsl:flex", side === "end" ? "qsl:justify-end" : "qsl:justify-start"),
+      className: cn(stepSpacing, "qsl:relative qsl:flex", side === "end" ? "qsl:justify-end" : "qsl:justify-start"),
       "data-message": message.role === "user" && !message.bubble && variant === "default" ? "user" : "bubble",
       "data-side": side,
-      children: /* @__PURE__ */ jsx13(
-        "div",
-        {
-          className: cn(bubbleBodyClasses, "qsl:group", message.bubble ? "qsl:rounded-lg qsl:text-white qsl:[--qsl-scroll-cover:var(--qsl-primary)]" : "qsl:rounded-[var(--qsl-bubble-radius,10px_10px_4px_10px)] qsl:border qsl:border-border qsl:bg-secondary qsl:text-foreground qsl:[--qsl-scroll-cover:var(--qsl-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 qsl:in-data-[tone=material]:text-foreground"),
-          "data-tone": message.bubble ? "on-color" : void 0,
-          style: { background: message.bubble?.color, maxWidth: bubbleOptions?.maxWidth },
-          children: content
-        }
-      )
+      "data-background-width": fullBackground ? "full" : "content",
+      children: [
+        fullBackground && /* @__PURE__ */ jsx13("div", { "aria-hidden": "true", className: cn("qsl:pointer-events-none qsl:absolute qsl:inset-0", surfaceClasses), "data-chat": "bubble-background", style: { background: message.bubble?.color } }),
+        /* @__PURE__ */ jsx13(
+          "div",
+          {
+            className: cn(bubbleBodyClasses, "qsl:group", !fullBackground && surfaceClasses, fullBackground && !message.bubble && "qsl:border qsl:border-transparent", message.bubble ? "qsl:text-white qsl:[--qsl-scroll-cover:var(--qsl-primary)]" : "qsl:text-foreground qsl:[--qsl-scroll-cover:var(--qsl-secondary)]"),
+            "data-chat": "bubble-content",
+            "data-tone": message.bubble ? "on-color" : void 0,
+            style: { background: fullBackground ? void 0 : message.bubble?.color, maxWidth: bubbleOptions?.maxWidth },
+            children: content
+          }
+        )
+      ]
     }
   );
 }
@@ -1805,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
@@ -1884,7 +1950,7 @@ function ChatPanel({
           /* @__PURE__ */ jsx14("div", { children: /* @__PURE__ */ jsx14(
             "div",
             {
-              className: "qsl:-mx-[16px] qsl:max-h-[calc(var(--qsl-panel-height,100dvh)_/_2)] qsl:overflow-y-auto qsl:overscroll-contain qsl:px-[16px] qsl:pb-[var(--qsl-chat-message-gap,16px)] qsl:[-webkit-mask-image:linear-gradient(to_bottom,#000_calc(100%_-_var(--qsl-chat-message-gap,16px)),transparent)] qsl:[mask-image:linear-gradient(to_bottom,#000_calc(100%_-_var(--qsl-chat-message-gap,16px)),transparent)] qsl:empty:hidden",
+              className: "qsl:-mx-[16px] qsl:max-h-[calc(var(--qsl-panel-height,100dvh)_/_2)] qsl:overflow-y-auto qsl:overscroll-contain qsl:px-[16px] qsl:pb-[var(--qsl-chat-message-gap,10px)] qsl:[-webkit-mask-image:linear-gradient(to_bottom,#000_calc(100%_-_var(--qsl-chat-message-gap,10px)),transparent)] qsl:[mask-image:linear-gradient(to_bottom,#000_calc(100%_-_var(--qsl-chat-message-gap,10px)),transparent)] qsl:empty:hidden",
               "data-chat": "actions",
               ref: setDock
             }