@schlenkr/quassel 0.5.4 → 0.5.6

package/MessageActions.d.ts

@@ -1,8 +1,11 @@
+import { type RefObject } from "react";
 import type { MessageActionsOptions } from "./options";
-import type { ChatTexts } from "./texts";
+import { type ChatTexts } from "./texts";
 import type { Message } from "./types";
-export declare function MessageActions({ message, options, texts }: {
+export declare function MessageActions({ message, options, texts, contentRef, side }: {
     message: Message;
     options?: MessageActionsOptions;
     texts: ChatTexts;
+    contentRef?: RefObject<HTMLElement | null>;
+    side?: "start" | "end";
 }): import("react").JSX.Element;

package/chat.css

@@ -79,9 +79,6 @@
   .qsl\:z-10 {
     z-index: 10;
   }
-  .qsl\:z-\[1\] {
-    z-index: 1;
-  }
   .qsl\:z-\[5\] {
     z-index: 5;
   }
@@ -170,6 +167,10 @@
     width: calc(var(--qsl-spacing) * 4);
     height: calc(var(--qsl-spacing) * 4);
   }
+  .qsl\:size-5 {
+    width: calc(var(--qsl-spacing) * 5);
+    height: calc(var(--qsl-spacing) * 5);
+  }
   .qsl\:size-6 {
     width: calc(var(--qsl-spacing) * 6);
     height: calc(var(--qsl-spacing) * 6);
@@ -186,6 +187,9 @@
     width: calc(var(--qsl-spacing) * 9);
     height: calc(var(--qsl-spacing) * 9);
   }
+  .qsl\:h-5 {
+    height: calc(var(--qsl-spacing) * 5);
+  }
   .qsl\:h-6 {
     height: calc(var(--qsl-spacing) * 6);
   }
@@ -395,6 +399,9 @@
   .qsl\:gap-0 {
     gap: 0px;
   }
+  .qsl\:gap-0\.5 {
+    gap: calc(var(--qsl-spacing) * 0.5);
+  }
   .qsl\:gap-1 {
     gap: var(--qsl-spacing);
   }
@@ -890,13 +897,6 @@
   .qsl\:opacity-100 {
     opacity: 100%;
   }
-  .qsl\:shadow-\[0_2px_6px_color-mix\(in_srgb\,var\(--qsl-foreground\)_15\%\,transparent\)\] {
-    --tw-shadow: 0 2px 6px var(--tw-shadow-color, var(--qsl-foreground));
-    @supports (color: color-mix(in lab, red, red)) {
-      --tw-shadow: 0 2px 6px var(--tw-shadow-color, color-mix(in srgb,var(--qsl-foreground) 15%,transparent));
-    }
-    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-bar {
     --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);
@@ -951,6 +951,11 @@
     transition-timing-function: var(--tw-ease, var(--qsl-default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--qsl-default-transition-duration));
   }
+  .qsl\:transition-opacity {
+    transition-property: opacity;
+    transition-timing-function: var(--tw-ease, var(--qsl-default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--qsl-default-transition-duration));
+  }
   .qsl\:transition-transform {
     transition-property: transform, translate, scale, rotate;
     transition-timing-function: var(--tw-ease, var(--qsl-default-transition-timing-function));
@@ -1000,10 +1005,13 @@
     max-width: var(--qsl-chat-content-max-width,none);
   }
   @media (hover: hover) {
-    .qsl\:group-hover\:pointer-events-auto:is(:where(.qsl\:group):hover *) {
+    .qsl\:group-hover\/message\:pointer-events-auto:is(:where(.qsl\:group\/message):hover *) {
       pointer-events: auto;
     }
-    .qsl\:group-hover\:opacity-100:is(:where(.qsl\:group):hover *) {
+    .qsl\:group-hover\/message\:opacity-70:is(:where(.qsl\:group\/message):hover *) {
+      opacity: 70%;
+    }
+    .qsl\:group-hover\/message\:opacity-100:is(:where(.qsl\:group\/message):hover *) {
       opacity: 100%;
     }
   }
@@ -1031,6 +1039,9 @@
   .qsl\:focus-within\:border-primary:focus-within {
     border-color: var(--qsl-primary);
   }
+  .qsl\:focus-within\:opacity-70:focus-within {
+    opacity: 70%;
+  }
   .qsl\:focus-within\:opacity-100:focus-within {
     opacity: 100%;
   }
@@ -1604,6 +1615,9 @@
     .qsl\:\[\@media\(hover\:none\)\]\:pointer-events-auto {
       pointer-events: auto;
     }
+    .qsl\:\[\@media\(hover\:none\)\]\:opacity-70 {
+      opacity: 70%;
+    }
     .qsl\:\[\@media\(hover\:none\)\]\:opacity-100 {
       opacity: 100%;
     }

package/index.d.ts

@@ -14,7 +14,7 @@ export { PendingActionCard } from "./PendingActionCard";
 export { StepPopover } from "./StepPopover";
 export { WorkingScenes, type WorkingScenesProps } from "./WorkingScenes";
 export { announce } from "./announce";
-export { useChatAction, copyChatText } from "./useChatAction";
+export { useChatAction, copyChatText, copyChatHtml } from "./useChatAction";
 export { createChatScroll } from "./chat-scroll";
 export { ChatSendContext, createChatSendScope, type ChatSendScope } from "./ChatSendContext";
 export { messageDate, timestampDay, timestampLabel } from "./timestamps";

package/index.js

@@ -57,7 +57,8 @@ var englishTexts = {
   showLatestExchange: "Show latest reply between inputs",
   showTimestamps: "Show timestamps",
   hideTimestamps: "Hide timestamps",
-  copyMessage: "Copy message",
+  copyMessage: "Copy as Markdown",
+  copyFormatted: "Copy with formatting",
   editMessage: "Edit message",
   retryMessage: "Request answer again",
   copyCode: "Copy code",
@@ -126,7 +127,8 @@ var germanTexts = {
   showLatestExchange: "Letzte Antwort zwischen den Eingaben anzeigen",
   showTimestamps: "Zeitstempel anzeigen",
   hideTimestamps: "Zeitstempel ausblenden",
-  copyMessage: "Nachricht kopieren",
+  copyMessage: "Als Markdown kopieren",
+  copyFormatted: "Mit Formatierung kopieren",
   editMessage: "Nachricht bearbeiten",
   retryMessage: "Antwort erneut anfordern",
   copyCode: "Code kopieren",
@@ -175,6 +177,8 @@ function createChatScroll(onFollowChange = () => {
 }, getThreshold = () => defaultJumpToEndThreshold) {
   const atEnd = (viewport) => viewport.scrollHeight - viewport.clientHeight - viewport.scrollTop <= getThreshold();
   let following = true;
+  let held = false;
+  let heldTop = 0;
   let lastTop = 0;
   let lastHeight = 0;
   let lastClientHeight = 0;
@@ -185,6 +189,7 @@ function createChatScroll(onFollowChange = () => {
     lastClientHeight = viewport.clientHeight;
   };
   const follow = (value) => {
+    if (value) held = false;
     if (following === value) return;
     following = value;
     onFollowChange(value);
@@ -192,19 +197,23 @@ function createChatScroll(onFollowChange = () => {
   const layout = (viewport, dragging = false) => {
     if (viewport.clientHeight <= 0) return;
     if (movedUp(viewport, dragging) && !atEnd(viewport)) follow(false);
-    if (atEnd(viewport)) follow(true);
+    if (viewport.scrollHeight <= viewport.clientHeight || atEnd(viewport) && !held) follow(true);
     if (following) viewport.scrollTop = Math.max(0, viewport.scrollHeight - viewport.clientHeight);
     remember(viewport);
   };
   return {
     layout,
     pause(viewport) {
-      if (viewport.clientHeight > 0) follow(atEnd(viewport));
+      if (viewport.clientHeight <= 0 || viewport.scrollHeight <= viewport.clientHeight) return;
+      follow(false);
+      held = true;
+      heldTop = viewport.scrollTop;
     },
     scroll(viewport, dragging = false) {
       if (viewport.clientHeight <= 0) return;
-      if (atEnd(viewport)) follow(true);
+      if (atEnd(viewport) && (!held || viewport.scrollTop > heldTop)) follow(true);
       else if (movedUp(viewport, dragging) && !atEnd(viewport)) follow(false);
+      heldTop = viewport.scrollTop;
       remember(viewport);
     },
     jump(viewport) {
@@ -456,6 +465,15 @@ async function copyChatText(text, unavailable) {
   if (!navigator.clipboard) throw new Error(unavailable);
   await navigator.clipboard.writeText(text);
 }
+async function copyChatHtml(element, text, unavailable) {
+  if (!navigator.clipboard) throw new Error(unavailable);
+  if (typeof ClipboardItem === "undefined" || !navigator.clipboard.write) return navigator.clipboard.writeText(text);
+  const clone = element.cloneNode(true);
+  clone.querySelectorAll("button").forEach((button) => button.remove());
+  clone.querySelectorAll("[class]").forEach((node) => node.removeAttribute("class"));
+  const blob = (content, type) => new Blob([content], { type });
+  await navigator.clipboard.write([new ClipboardItem({ "text/html": blob(clone.innerHTML, "text/html"), "text/plain": blob(markdownPlainText(text), "text/plain") })]);
+}
 
 // packages/quassel/src/Markdown.tsx
 import { jsx as jsx8, jsxs } from "react/jsx-runtime";
@@ -1041,37 +1059,46 @@ function useElapsed(start) {
 }
 
 // packages/quassel/src/MessageActions.tsx
-import { CheckIcon as CheckIcon3, CopyIcon as CopyIcon2, PencilIcon, RotateCcwIcon } from "lucide-react";
+import { CheckIcon as CheckIcon3, ClipboardTypeIcon, CopyIcon as CopyIcon2, PencilIcon, RotateCcwIcon } from "lucide-react";
 import { useState as useState3 } from "react";
 import { Fragment, jsx as jsx12, jsxs as jsxs5 } from "react/jsx-runtime";
 var actionClasses = cn(
-  "qsl:absolute qsl:top-1 qsl:right-1 qsl:z-[1] qsl:flex qsl:flex-wrap qsl:rounded-sm qsl:bg-secondary qsl:opacity-0",
-  "qsl:shadow-[0_2px_6px_color-mix(in_srgb,var(--qsl-foreground)_15%,transparent)]",
-  "qsl:pointer-events-none qsl:group-hover:pointer-events-auto qsl:group-hover:opacity-100 qsl:focus-within:pointer-events-auto qsl:focus-within:opacity-100",
-  "qsl:[@media(hover:none)]:pointer-events-auto qsl:[@media(hover:none)]:opacity-100"
+  "qsl:mt-0.5 qsl:flex qsl:h-5 qsl:items-center qsl:gap-0.5 qsl:text-muted-foreground qsl:opacity-0 qsl:transition-opacity",
+  "qsl:pointer-events-none qsl:group-hover/message:pointer-events-auto qsl:focus-within:pointer-events-auto",
+  "qsl:[@media(hover:none)]:pointer-events-auto"
 );
-function MessageActions({ message, options, texts }) {
+var visibleClasses = "qsl:group-hover/message:opacity-100 qsl:focus-within:opacity-100 qsl:[@media(hover:none)]:opacity-100";
+var lightClasses = "qsl:group-hover/message:opacity-70 qsl:focus-within:opacity-70 qsl:[@media(hover:none)]:opacity-70";
+function MessageActions({ message, options, texts, contentRef, side = message.role === "user" ? "end" : "start" }) {
   const action = useChatAction();
   const { Button: Button2 } = useQuasselComponents();
   const [lastAction, setLastAction] = useState3();
-  const copy = typeof options?.copy === "function" ? options.copy(message) : options?.copy ?? message.role === "user";
+  const enabled = (option, fallback) => typeof option === "function" ? option(message) : option ?? fallback;
+  const copy = enabled(options?.copy, message.role === "user" || message.role === "assistant") && !!message.text.trim();
+  const copyFormatted = copy && !!contentRef && enabled(options?.copyFormatted, message.role === "assistant");
   const actions = [
-    ...copy && message.text.trim() ? [{ id: "copy", label: texts.copyMessage, icon: /* @__PURE__ */ jsx12(CopyIcon2, {}), onClick: () => copyChatText(message.text, texts.clipboardUnavailable) }] : [],
+    ...copy ? [{ id: "copy", label: texts.copyMessage, icon: /* @__PURE__ */ jsx12(CopyIcon2, {}), onClick: () => copyChatText(message.text, texts.clipboardUnavailable) }] : [],
+    ...copyFormatted ? [{
+      id: "copy-formatted",
+      label: texts.copyFormatted ?? defaultTexts.copyFormatted,
+      icon: /* @__PURE__ */ jsx12(ClipboardTypeIcon, {}),
+      onClick: () => contentRef.current ? copyChatHtml(contentRef.current, message.text, texts.clipboardUnavailable) : copyChatText(message.text, texts.clipboardUnavailable)
+    }] : [],
     ...options?.edit && message.role === "user" ? [{ id: "edit", label: texts.editMessage, icon: /* @__PURE__ */ jsx12(PencilIcon, {}), onClick: options.edit }] : [],
     ...options?.retry && message.role === "assistant" ? [{ id: "retry", label: texts.retryMessage, icon: /* @__PURE__ */ jsx12(RotateCcwIcon, {}), onClick: options.retry }] : [],
     ...options?.custom?.(message) ?? []
   ];
   return /* @__PURE__ */ jsxs5(Fragment, { children: [
-    actions.length > 0 && /* @__PURE__ */ jsx12("div", { className: actionClasses, children: actions.map((item) => {
-      const copied = item.id === "copy" && lastAction === item.id && action.status === "done";
+    actions.length > 0 && /* @__PURE__ */ jsx12("div", { className: cn(actionClasses, message.role === "user" ? visibleClasses : lightClasses, side === "end" && "qsl:justify-end"), "data-chat": "message-actions", children: actions.map((item) => {
+      const copied = ["copy", "copy-formatted"].includes(item.id) && lastAction === item.id && action.status === "done";
       const label = copied ? texts.copied : item.label;
       return /* @__PURE__ */ jsx12(
         Button2,
         {
           "aria-label": label,
-          className: "qsl:text-inherit",
+          className: cn("qsl:text-inherit", item.icon && "qsl:size-5"),
           disabled: item.disabled || action.status === "pending",
-          size: item.icon ? "icon-sm" : "sm",
+          size: item.icon ? "icon-xs" : "xs",
           title: label,
           variant: "ghost",
           onClick: () => {
@@ -1731,6 +1758,7 @@ function Bubble({
   messageActions
 }) {
   const stepSpacing = dense ? denseStepClasses : stepClasses;
+  const textRef = useRef3(null);
   if (message.role === "thinking" || message.role === "tool" && message.tool) {
     if (detailMode === "compact") {
       return /* @__PURE__ */ jsx13(TraceLine, { className: stepSpacing, elapsedAfter, expandable, message, texts, toolArgumentsText });
@@ -1777,38 +1805,43 @@ function Bubble({
       "qsl:mb-[5px] qsl:table qsl:text-label qsl:leading-[1.45] qsl:font-semibold",
       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("div", { "data-chat": "message-text", ref: textRef, children: /* @__PURE__ */ jsx13(Markdown, { text: message.text, streaming: message.role === "assistant" && !message.closed }) }),
     /* @__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 })
+    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 })
   ] });
   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.65)] qsl:text-foreground"), "data-message": "answer", children: content });
+  if (!useBubble) return /* @__PURE__ */ jsxs6("div", { "data-chat-text-cursor": cursor, className: cn(stepSpacing, "qsl:group/message qsl:relative qsl:w-full qsl:leading-[var(--qsl-chat-line-height,1.65)] qsl:text-foreground"), "data-message": "answer", children: [
+    content,
+    /* @__PURE__ */ jsx13(MessageActions, { contentRef: textRef, message, options: messageActions, side, texts })
+  ] });
   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: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,
-      "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
-          }
-        )
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs6("div", { className: cn(stepSpacing, "qsl:group/message"), children: [
+    /* @__PURE__ */ jsxs6(
+      "div",
+      {
+        "data-chat-text-cursor": cursor,
+        className: cn("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,
+        "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, !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
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx13(MessageActions, { contentRef: textRef, message, options: messageActions, side, texts })
+  ] });
 }
 function ActionContent({
   action,
@@ -2602,6 +2635,7 @@ export {
   attachmentDownloadUrl,
   attachmentMediaType,
   compactToolLine,
+  copyChatHtml,
   copyChatText,
   createChatScroll,
   createChatSendScope,