@schlenkr/quassel 0.5.0 → 0.5.1

package/README.md

@@ -4,7 +4,7 @@ Chat building blocks for React: a streaming transcript with thinking and tool st
 actions, an input card with attachments and steering, and a small event contract that works
 on the server as well. quassel is the chat of [RAgents](https://github.com/SchlenkR/RAgents),
 published as a library. It ships a compiled stylesheet, so hosts need no Tailwind, and every
-color, radius, font and font size is a `--qsl-*` variable, and the text size follows the host by default.
+color, radius, font and font size is a `--qsl-*` variable, with compact defaults for text and tool steps.
 
 ![An agent chat with grouped steps, timestamps, Markdown and the input card](https://raw.githubusercontent.com/SchlenkR/quassel/main/docs/images/agent.png)
 
@@ -93,20 +93,28 @@ Any backend that emits the `@schlenkr/quassel/events` stream works with the same
 
 ## Text size
 
-quassel inherits the font size of the place it is mounted in. Chat text and the input use that
-size, meta lines, step rows and labels are derived from it as smaller steps, and nothing
-compounds when elements nest. One variable changes it for a chat:
+quassel starts at 13px with a line height of 1.5, a 10px message gap and a 3px dense
+step gap. Tool rows and timestamps use 88% of the text size. Expanded tool groups have a
+1px gap between rows; tool rows have 1px of vertical padding on each side.
 
-```css
-.my-chat {
-    --qsl-font-size: 15px;
-}
+Every size derives from one base, so nested elements never compound. Set `--qsl-font-size`
+on a wrapper, or `appearance.fontSize`, to change it. Use `1em` to follow the host's font size.
+`appearance` also offers `toolFontScale`, `toolGroupGap` and `toolRowPadding`.
+
+User message backgrounds fill the available row by default while text keeps its width and
+alignment. `bubbleOptions={{ userBackgroundFullWidth: false }}` restores a fitted background.
+Timestamps sit beside messages by default; their size follows the tool text unless overridden:
+
+```tsx
+<ChatMessages
+    messages={messages}
+    showTimestamps
+    timestampOptions={{ position: "above", fontScale: 0.88 }}
+/>
 ```
 
-`--qsl-chat-font-size` and `--qsl-text-meta` (and `-trace`, `-label`, `-xs` to `-xl`) override
-single steps. Up to 0.4.9 the root was fixed at 14px and the chat text at 13px, so hosts had to
-override sizes by hand; from 0.5.0 on that is no longer needed. Details in the
-[guide](https://github.com/SchlenkR/quassel/blob/main/docs/guide.md#text-size).
+`--qsl-text-trace`, `--qsl-timestamp-font-size` and the other `--qsl-text-*` variables override
+individual sizes. The [guide](https://github.com/SchlenkR/quassel/blob/main/docs/guide.md#text-size) lists the full API.
 
 ## Development
 

package/chat.css

@@ -46,6 +46,9 @@
   .qsl\:relative {
     position: relative;
   }
+  .qsl\:inset-0 {
+    inset: 0px;
+  }
   .qsl\:inset-x-0 {
     inset-inline: 0px;
   }
@@ -112,11 +115,11 @@
   .qsl\:mt-4 {
     margin-top: calc(var(--qsl-spacing) * 4);
   }
-  .qsl\:mt-\[var\(--qsl-chat-dense-message-gap\,8px\)\] {
-    margin-top: var(--qsl-chat-dense-message-gap,8px);
+  .qsl\:mt-\[var\(--qsl-chat-dense-message-gap\,3px\)\] {
+    margin-top: var(--qsl-chat-dense-message-gap,3px);
   }
-  .qsl\:mt-\[var\(--qsl-chat-message-gap\,16px\)\] {
-    margin-top: var(--qsl-chat-message-gap,16px);
+  .qsl\:mt-\[var\(--qsl-chat-message-gap\,10px\)\] {
+    margin-top: var(--qsl-chat-message-gap,10px);
   }
   .qsl\:mb-0\.5 {
     margin-bottom: calc(var(--qsl-spacing) * 0.5);
@@ -336,6 +339,9 @@
   .qsl\:items-end {
     align-items: flex-end;
   }
+  .qsl\:items-stretch {
+    align-items: stretch;
+  }
   .qsl\:justify-between {
     justify-content: space-between;
   }
@@ -354,9 +360,6 @@
   .qsl\:gap-0 {
     gap: 0px;
   }
-  .qsl\:gap-0\.5 {
-    gap: calc(var(--qsl-spacing) * 0.5);
-  }
   .qsl\:gap-1 {
     gap: var(--qsl-spacing);
   }
@@ -375,8 +378,11 @@
   .qsl\:gap-\[5px\] {
     gap: 5px;
   }
-  .qsl\:gap-\[var\(--qsl-chat-dense-message-gap\,8px\)\] {
-    gap: var(--qsl-chat-dense-message-gap,8px);
+  .qsl\:gap-\[var\(--qsl-chat-dense-message-gap\,3px\)\] {
+    gap: var(--qsl-chat-dense-message-gap,3px);
+  }
+  .qsl\:gap-\[var\(--qsl-tool-group-gap\,1px\)\] {
+    gap: var(--qsl-tool-group-gap,1px);
   }
   :where(.qsl\:space-y-0 > :not(:last-child)) {
     --tw-space-y-reverse: 0;
@@ -395,6 +401,9 @@
   .qsl\:self-baseline {
     align-self: baseline;
   }
+  .qsl\:self-start {
+    align-self: flex-start;
+  }
   .qsl\:overflow-auto {
     overflow: auto;
   }
@@ -530,8 +539,8 @@
   .qsl\:bg-\[linear-gradient\(to_right\,var\(--qsl-scroll-cover\,var\(--qsl-background\)\)_50\%\,transparent\)_left\/20px_100\%_no-repeat_local\,linear-gradient\(to_left\,var\(--qsl-scroll-cover\,var\(--qsl-background\)\)_50\%\,transparent\)_right\/20px_100\%_no-repeat_local\,linear-gradient\(to_right\,\#00000047\,transparent\)_left\/14px_100\%_no-repeat_scroll\,linear-gradient\(to_left\,\#00000047\,transparent\)_right\/14px_100\%_no-repeat_scroll\] {
     background-image: linear-gradient(to right,var(--qsl-scroll-cover,var(--qsl-background)) 50%,transparent) left/20px 100% no-repeat local,linear-gradient(to left,var(--qsl-scroll-cover,var(--qsl-background)) 50%,transparent) right/20px 100% no-repeat local,linear-gradient(to right,#00000047,transparent) left/14px 100% no-repeat scroll,linear-gradient(to left,#00000047,transparent) right/14px 100% no-repeat scroll;
   }
-  .qsl\:\[mask-image\:linear-gradient\(to_bottom\,\#000_calc\(100\%_-_var\(--qsl-chat-message-gap\,16px\)\)\,transparent\)\] {
-    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\,10px\)\)\,transparent\)\] {
+    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\(var\(--qsl-fade-edge\)_-_40px\)\,transparent_calc\(var\(--qsl-fade-edge\)_\+_16px\)\)\] {
     mask-image: linear-gradient(to bottom,#000 calc(var(--qsl-fade-edge) - 40px),transparent calc(var(--qsl-fade-edge) + 16px));
@@ -608,6 +617,9 @@
   .qsl\:py-\[3px\] {
     padding-block: 3px;
   }
+  .qsl\:py-\[var\(--qsl-tool-row-padding\,1px\)\] {
+    padding-block: var(--qsl-tool-row-padding,1px);
+  }
   .qsl\:py-px {
     padding-block: 1px;
   }
@@ -635,8 +647,8 @@
   .qsl\:pb-\[calc\(var\(--qsl-composer-height\,0px\)_\+_max\(3\.25em\,40px\)\)\] {
     padding-bottom: calc(var(--qsl-composer-height,0px) + max(3.25em, 40px));
   }
-  .qsl\:pb-\[var\(--qsl-chat-message-gap\,16px\)\] {
-    padding-bottom: var(--qsl-chat-message-gap,16px);
+  .qsl\:pb-\[var\(--qsl-chat-message-gap\,10px\)\] {
+    padding-bottom: var(--qsl-chat-message-gap,10px);
   }
   .qsl\:pl-1 {
     padding-left: var(--qsl-spacing);
@@ -692,8 +704,11 @@
   .qsl\:text-meta {
     font-size: var(--qsl-text-meta, calc(var(--qsl-base) * 0.8));
   }
+  .qsl\:text-timestamp {
+    font-size: var(--qsl-timestamp-font-size, var(--qsl-text-trace, calc(var(--qsl-base) * var(--qsl-tool-font-scale, 0.88))));
+  }
   .qsl\:text-trace {
-    font-size: var(--qsl-text-trace, calc(var(--qsl-base) * 0.85));
+    font-size: var(--qsl-text-trace, calc(var(--qsl-base) * var(--qsl-tool-font-scale, 0.88)));
   }
   .qsl\:leading-\[1\.3\] {
     --tw-leading: 1.3;
@@ -719,10 +734,6 @@
     --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\.625\)\] {
-    --tw-leading: var(--qsl-chat-line-height,1.625);
-    line-height: var(--qsl-chat-line-height,1.625);
-  }
   .qsl\:leading-normal {
     --tw-leading: var(--qsl-leading-normal);
     line-height: var(--qsl-leading-normal);
@@ -925,8 +936,8 @@
   .qsl\:\[--qsl-scroll-cover\:var\(--qsl-secondary\)\] {
     --qsl-scroll-cover: var(--qsl-secondary);
   }
-  .qsl\:\[-webkit-mask-image\:linear-gradient\(to_bottom\,\#000_calc\(100\%_-_var\(--qsl-chat-message-gap\,16px\)\)\,transparent\)\] {
-    -webkit-mask-image: linear-gradient(to bottom,#000 calc(100% - var(--qsl-chat-message-gap,16px)),transparent);
+  .qsl\:\[-webkit-mask-image\:linear-gradient\(to_bottom\,\#000_calc\(100\%_-_var\(--qsl-chat-message-gap\,10px\)\)\,transparent\)\] {
+    -webkit-mask-image: linear-gradient(to bottom,#000 calc(100% - var(--qsl-chat-message-gap,10px)),transparent);
   }
   .qsl\:\[-webkit-mask-image\:linear-gradient\(to_bottom\,\#000_calc\(var\(--qsl-fade-edge\)_-_40px\)\,transparent_calc\(var\(--qsl-fade-edge\)_\+_16px\)\)\] {
     -webkit-mask-image: linear-gradient(to bottom,#000 calc(var(--qsl-fade-edge) - 40px),transparent calc(var(--qsl-fade-edge) + 16px));
@@ -1119,9 +1130,6 @@
   :where([data-tone="material"]) .qsl\:in-data-\[tone\=material\]\:p-0 {
     padding: 0px;
   }
-  :where([data-tone="material"]) .qsl\:in-data-\[tone\=material\]\:text-foreground {
-    color: var(--qsl-foreground);
-  }
   :where([data-tone="on-color"]) .qsl\:in-data-\[tone\=on-color\]\:border-white\/35 {
     border-color: var(--qsl-color-white);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1652,7 +1660,7 @@
 @property --qsl-base {
   syntax: "<length>";
   inherits: true;
-  initial-value: 14px;
+  initial-value: 13px;
 }
 @layer theme {
   :where(:root, :host, [data-theme="light"], [data-theme="system"]) {
@@ -1735,7 +1743,7 @@
     font-family: var(--qsl-font);
     font-feature-settings: normal;
     font-variation-settings: normal;
-    font-size: var(--qsl-font-size, 1em);
+    font-size: var(--qsl-font-size, 13px);
     --qsl-base: 1em;
     color: var(--qsl-foreground);
     -webkit-tap-highlight-color: transparent;
@@ -2018,7 +2026,7 @@
 @layer properties {
   @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
     :root, :host {
-      --qsl-base: 14px;
+      --qsl-base: 13px;
     }
     *, ::before, ::after, ::backdrop {
       --tw-space-y-reverse: 0;

package/index.js

@@ -158,7 +158,7 @@ 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";
@@ -933,10 +933,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 +1163,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 +1185,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 +1341,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 +1452,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 +1519,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 +1618,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 +1635,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",
       {
@@ -1766,23 +1780,30 @@ function Bubble({
     /* @__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
+          }
+        )
+      ]
     }
   );
 }
@@ -1884,7 +1905,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
             }