@juspay/svelte-ui-components 4.47.0 → 4.49.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -554,10 +554,14 @@
|
|
|
554
554
|
padding: 0;
|
|
555
555
|
}
|
|
556
556
|
|
|
557
|
+
/* --chat-message-list-padding is also what ChatMessageList reads for its own padding, so an
|
|
558
|
+
app that sets it to 0 for the list loses the indent of every list inside a message. The
|
|
559
|
+
body-list tokens are read first so the two can differ; the older names stay as the
|
|
560
|
+
fallback, which leaves a message that sets neither as it was. */
|
|
557
561
|
.body :global(ul),
|
|
558
562
|
.body :global(ol) {
|
|
559
|
-
margin: var(--chat-message-list-margin, 0.4em 0);
|
|
560
|
-
padding-left: var(--chat-message-list-padding, 1.4em);
|
|
563
|
+
margin: var(--chat-message-body-list-margin, var(--chat-message-list-margin, 0.4em 0));
|
|
564
|
+
padding-left: var(--chat-message-body-list-padding, var(--chat-message-list-padding, 1.4em));
|
|
561
565
|
}
|
|
562
566
|
|
|
563
567
|
.body :global(li) {
|
|
@@ -399,6 +399,23 @@
|
|
|
399
399
|
flex: 1 0 auto;
|
|
400
400
|
}
|
|
401
401
|
|
|
402
|
+
/* Hooks for an app that lays the message column out itself: the clearance below the last
|
|
403
|
+
message, the width it centres at on a wide screen, and the space beside it. An auto margin
|
|
404
|
+
turns the column's stretch off (it shrinks to its content), so centring it takes a width as
|
|
405
|
+
well: width 100% beside a maximum width and auto inline margins. They sit in
|
|
406
|
+
:where() for the reason the list's overflow tokens do, so a rule of the app's own that
|
|
407
|
+
wrote these properties before the tokens existed keeps winning over Svelte's scope class,
|
|
408
|
+
and they fall back to revert-layer, not to a value, so a rule of the app's inside a
|
|
409
|
+
cascade @layer still wins while a token is unset. Unset, the column has no padding, no
|
|
410
|
+
margin and no maximum width, as before. */
|
|
411
|
+
:where(.inner) {
|
|
412
|
+
padding-bottom: var(--chat-message-list-inner-padding-bottom, revert-layer);
|
|
413
|
+
padding-inline: var(--chat-message-list-inner-padding-inline, revert-layer);
|
|
414
|
+
width: var(--chat-message-list-inner-width, revert-layer);
|
|
415
|
+
max-width: var(--chat-message-list-inner-max-width, revert-layer);
|
|
416
|
+
margin-inline: var(--chat-message-list-inner-margin-inline, revert-layer);
|
|
417
|
+
}
|
|
418
|
+
|
|
402
419
|
.jump {
|
|
403
420
|
position: sticky;
|
|
404
421
|
bottom: var(--chat-message-list-jump-bottom, 8px);
|
package/dist-wc/index.js
CHANGED
|
@@ -51690,7 +51690,7 @@ function partyOf(e) {
|
|
|
51690
51690
|
//#region src/lib/ChatMessage/ChatMessage.svelte
|
|
51691
51691
|
var root$15 = /* @__PURE__ */ from_html("<div class=\"avatar svelte-ivh8u\"><!></div>"), root_1$14 = /* @__PURE__ */ from_html("<div class=\"header svelte-ivh8u\"><!></div>"), root_2$8 = /* @__PURE__ */ from_html("<span class=\"marker svelte-ivh8u\" aria-hidden=\"true\"></span>"), root_3$8 = /* @__PURE__ */ from_html("<div class=\"body svelte-ivh8u\"><!></div>"), root_4$7 = /* @__PURE__ */ from_html("<div class=\"body svelte-ivh8u\"></div>"), root_5$6 = /* @__PURE__ */ from_html("<div class=\"body text svelte-ivh8u\"> </div>"), root_6$6 = /* @__PURE__ */ from_html("<div class=\"clamp-toggle svelte-ivh8u\"><!></div>"), root_7$5 = /* @__PURE__ */ from_html("<span class=\"typing svelte-ivh8u\"><!></span>"), root_8$5 = /* @__PURE__ */ from_html("<div class=\"message-attachments svelte-ivh8u\"><!></div>"), root_9$4 = /* @__PURE__ */ from_html("<div class=\"action svelte-ivh8u\"><!></div>"), root_10$4 = /* @__PURE__ */ from_html("<div class=\"action svelte-ivh8u\"><!></div> <div class=\"action svelte-ivh8u\"><!></div>", 1), root_11$3 = /* @__PURE__ */ from_html("<div class=\"actions svelte-ivh8u\"><!> <!> <!> <!></div>"), root_12$3 = /* @__PURE__ */ from_html("<article><div class=\"row svelte-ivh8u\"><!> <div class=\"content svelte-ivh8u\"><!> <div><!> <!> <!> <!></div> <!> <!></div></div></article>"), $$css$35 = {
|
|
51692
51692
|
hash: "svelte-ivh8u",
|
|
51693
|
-
code: ".chat-message.svelte-ivh8u {box-sizing:border-box;display:flex;flex-direction:column;max-width:var(--chat-message-max-width, 82%);margin:var(--chat-message-margin, 0);}\n\n /* The root had no min-width, so its initial value, auto, is what every parent saw: a\n content-based minimum in a flex row or a grid track, and 0 in a block. Falling back to\n 0 would change the first two, so an unset token must leave the property alone. It does\n that with revert-layer, which gives this declaration up and lets any lower layer, such\n as an app rule inside @layer, decide; where nothing else sets min-width the value is\n still auto. A plain auto here would beat a layered rule, because unlayered rules win.\n :where() keeps the rule at no specificity, so an app rule on .chat-message that\n already sets min-width is not tied by Svelte's scope class. */:where(.chat-message.svelte-ivh8u) {min-width:var(--chat-message-min-width, revert-layer);}.chat-message.party-sender.svelte-ivh8u {align-self:flex-end;align-items:flex-end;}.chat-message.party-responder.svelte-ivh8u {align-self:flex-start;align-items:flex-start;}.row.svelte-ivh8u {display:flex;gap:var(--chat-message-gap, 10px);align-items:flex-end;width:100%;}.chat-message.party-sender.svelte-ivh8u .row:where(.svelte-ivh8u) {flex-direction:row-reverse;}.avatar.svelte-ivh8u {display:flex;flex-shrink:0;align-items:center;justify-content:center;}.content.svelte-ivh8u {display:flex;flex-direction:column;gap:var(--chat-message-content-gap, 6px);min-width:0;}.header.svelte-ivh8u {font-size:var(--chat-message-header-font-size, 0.75rem);color:var(--chat-message-header-color, #71717a);}.bubble.svelte-ivh8u {box-sizing:border-box;padding:var(--chat-message-bubble-padding, 9px 13px);border-radius:var(--chat-message-bubble-border-radius, 16px);font-size:var(--chat-message-font-size, 0.9375rem);line-height:var(--chat-message-line-height, 1.5);color:var(--chat-message-color, #27272a);background:var(--chat-message-background, #f4f4f5);border:var(--chat-message-border, none);box-shadow:var(--chat-message-box-shadow, none);word-wrap:break-word;overflow-wrap:anywhere;}\n\n /* Only the marker variant becomes a containing block: making every bubble relative\n would silently re-base any absolutely-positioned content a consumer renders in a\n body snippet. */.bubble.has-marker.svelte-ivh8u {position:relative;}.marker.svelte-ivh8u {\n /* Decorative and absolutely positioned, so it sits over the bubble's leading\n padding — where a link at the start of a responder message also sits. Without\n this it silently eats those clicks. */pointer-events:none;position:absolute;inset-block:var(--chat-message-marker-inset-block, 0);\n /* Logical, so the bar follows `role` alignment into RTL instead of pinning left. */inset-inline-start:var(--chat-message-marker-offset, 0px);width:var(--chat-message-marker-width, 2px);border-radius:var(--chat-message-marker-border-radius, 0);background:var(--chat-message-marker-color, #6d28d9);}.chat-message.party-sender.svelte-ivh8u .bubble:where(.svelte-ivh8u) {color:var(--chat-message-sender-color, #ffffff);background:var(--chat-message-sender-background, #18181b);border:var(--chat-message-sender-border, none);border-radius:var(\n --chat-message-sender-border-radius,\n var(--chat-message-bubble-border-radius, 16px)\n );}.chat-message.party-responder.svelte-ivh8u .bubble:where(.svelte-ivh8u) {color:var(--chat-message-responder-color, var(--chat-message-color, #27272a));background:var(--chat-message-responder-background, transparent);border:var(--chat-message-responder-border, none);padding:var(--chat-message-responder-padding, 2px 0);}.chat-message.error.svelte-ivh8u .bubble:where(.svelte-ivh8u) {color:var(--chat-message-error-color, #e0334b);}.text.svelte-ivh8u {white-space:pre-wrap;}.typing.svelte-ivh8u {display:inline-flex;align-items:center;}.message-attachments.svelte-ivh8u {display:flex;flex-direction:column;gap:var(--chat-message-attachments-gap, 8px);margin:var(--chat-message-attachments-margin, 4px 0 0 0);}.message-attachments.svelte-ivh8u:empty {display:none;}.actions.svelte-ivh8u {display:flex;align-items:center;gap:var(--chat-message-actions-gap, 2px);opacity:var(--chat-message-actions-opacity, 0);transition:var(--chat-message-actions-transition, opacity 0.15s ease);--button-width: var(--chat-message-action-size, 28px);--button-height: var(--chat-message-action-size, 28px);--button-padding: var(--chat-message-action-padding, 6px);--button-border-radius: var(--chat-message-action-border-radius, 6px);--button-color: var(--chat-message-action-background-color, transparent);--button-text-color: var(--chat-message-action-color, #71717a);--button-content-gap: 0px;--button-hover-color: var(--chat-message-action-hover-background-color, #f4f4f5);}\n\n /* The sender bubble is a dark fill in light mode, so the neutral action grey\n above lands at 1.81:1 on it. Actions inside that bubble take their own ink. */.chat-message.party-sender.svelte-ivh8u .actions:where(.svelte-ivh8u) {--button-text-color: var(--chat-message-sender-action-color, #d4d4d8);}\n\n /* The sender bubble is a dark fill in light mode and a light one in dark, so\n anything rendered inside it -- links and inline buttons included -- has to\n invert with it rather than take one fixed colour. */.chat-message.party-sender.svelte-ivh8u .bubble:where(.svelte-ivh8u) a {color:var(--chat-message-sender-link-color, light-dark(#a5b4fc, #4338ca));}.chat-message.party-sender.svelte-ivh8u .bubble:where(.svelte-ivh8u) .button-text {color:var(--chat-message-sender-action-color, light-dark(#d4d4d8, #27272a));}.chat-message.svelte-ivh8u:hover .actions:where(.svelte-ivh8u),\n .chat-message.svelte-ivh8u:focus-within .actions:where(.svelte-ivh8u) {opacity:1;}.action.svelte-ivh8u {display:flex;}.action.svelte-ivh8u svg {height:100%;width:100%;}\n\n @media (hover: none) {.actions.svelte-ivh8u {opacity:1;}\n }.clamp-toggle.svelte-ivh8u {display:flex;margin-top:var(--chat-message-clamp-toggle-margin-top, 4px);}\n\n /* Clamp the rendered body, not the source: the message keeps its markup and its\n copy text, and expanding is a state change rather than a re-render. */.bubble[data-clamped='true'].svelte-ivh8u .body:where(.svelte-ivh8u) {display:-webkit-box;line-clamp:var(--chat-message-clamp-lines, var(--chat-message-clamp-lines-prop, 2));-webkit-line-clamp:var(--chat-message-clamp-lines, var(--chat-message-clamp-lines-prop, 2));-webkit-box-orient:vertical;overflow:hidden;}.body.svelte-ivh8u p {margin:var(--chat-message-paragraph-margin, 0 0 0.5em 0);}.body.svelte-ivh8u p:last-child {margin-bottom:0;}.body.svelte-ivh8u a {color:var(--chat-message-link-color, light-dark(#6d28d9, #a5b4fc));text-decoration:underline;text-underline-offset:2px;}.body.svelte-ivh8u code {font-family:var(--chat-message-code-font-family, ui-monospace, monospace);font-size:0.88em;background:var(--chat-message-code-background, rgba(0, 0, 0, 0.05));padding:1px 5px;border-radius:4px;}.body.svelte-ivh8u pre {background:var(--chat-message-pre-background, rgba(0, 0, 0, 0.05));padding:10px 12px;border-radius:8px;overflow-x:auto;margin:0.5em 0;}.body.svelte-ivh8u pre code {background:transparent;padding:0;}.body.svelte-ivh8u ul,\n .body.svelte-ivh8u ol {margin:var(--chat-message-list-margin, 0.4em 0);padding-left:var(--chat-message-list-padding, 1.4em);}.body.svelte-ivh8u li {margin:0.2em 0;}.body.svelte-ivh8u h1,\n .body.svelte-ivh8u h2,\n .body.svelte-ivh8u h3,\n .body.svelte-ivh8u h4,\n .body.svelte-ivh8u h5,\n .body.svelte-ivh8u h6 {margin:var(--chat-message-heading-margin, 0.8em 0 0.4em 0);line-height:1.3;}.body.svelte-ivh8u h1 {font-size:1.35em;}.body.svelte-ivh8u h2 {font-size:1.2em;}.body.svelte-ivh8u h3 {font-size:1.1em;}.body.svelte-ivh8u h4,\n .body.svelte-ivh8u h5,\n .body.svelte-ivh8u h6 {font-size:1em;}.body.svelte-ivh8u blockquote {margin:0.5em 0;padding:2px 0 2px 12px;border-left:3px solid var(--chat-message-blockquote-border-color, rgba(0, 0, 0, 0.15));opacity:var(--chat-message-blockquote-opacity, 0.85);}\n\n /* Fallback for a bare <table> in caller-supplied `html`, which has no scroll\n container of its own: it keeps the block treatment so a wide table scrolls\n rather than overflowing the message. A table that came from `markdown` (or\n from `renderMarkdown`) arrives inside `.markdown-table-wrapper`, and the\n rules below take it back out of block layout. */.body.svelte-ivh8u table {display:block;max-width:100%;overflow-x:auto;border-collapse:collapse;margin:0.5em 0;}\n\n /* The wrapper scrolls, not the table. `display: block` on a <table> is what\n makes `overflow-x` work on the element itself, but it strips the table's\n semantics for assistive technology -- a screen reader loses row and column\n navigation. MarkdownText separates the scroll container from the table for\n exactly that reason; this component rendered the same wrapper markup and\n styled the table instead, so a chat table was scrollable and no longer a\n table. Chat is where markdown tables overwhelmingly land. */.body.svelte-ivh8u .markdown-table-wrapper {display:block;max-width:100%;overflow-x:auto;margin:0.5em 0;}\n\n /* The wrapper is a tab stop (the renderer emits tabindex=\"0\" so the scroll is\n reachable by keyboard). The browser's default ring already applies; this\n replaces it with the same 2px treatment the rest of the library uses, since\n the 1px UA default is easy to miss against a message bubble. */.body.svelte-ivh8u .markdown-table-wrapper:focus-visible {outline:2px solid var(--chat-message-table-focus-outline-color, #3b82f6);outline-offset:2px;}\n\n /* Without an intrinsic width the table is exactly its container's width and a\n wide table compresses instead of scrolling. `max-content` supplies it;\n `min-width` keeps a narrow table filling the bubble. */.body.svelte-ivh8u .markdown-table-wrapper table {display:table;width:max-content;min-width:100%;overflow-x:visible;margin:0;}.body.svelte-ivh8u th,\n .body.svelte-ivh8u td {padding:5px 10px;border:1px solid var(--chat-message-table-border-color, rgba(0, 0, 0, 0.12));text-align:left;}.body.svelte-ivh8u th {background:var(--chat-message-table-header-background, rgba(0, 0, 0, 0.04));}.body.svelte-ivh8u img {max-width:100%;border-radius:var(--chat-message-image-border-radius, 8px);}.body.svelte-ivh8u hr {border:none;border-top:1px solid var(--chat-message-hr-color, rgba(0, 0, 0, 0.12));margin:0.8em 0;}\n /* The actions row is revealed on hover by fading opacity 0 -> 1. Under a\n reduced-motion preference it appears at once instead: the row is a set of\n controls the user is reaching for, so arriving instantly is the better\n outcome, not a degraded one. */\n @media (prefers-reduced-motion: reduce) {.actions.svelte-ivh8u {transition:none;}\n }"
|
|
51693
|
+
code: ".chat-message.svelte-ivh8u {box-sizing:border-box;display:flex;flex-direction:column;max-width:var(--chat-message-max-width, 82%);margin:var(--chat-message-margin, 0);}\n\n /* The root had no min-width, so its initial value, auto, is what every parent saw: a\n content-based minimum in a flex row or a grid track, and 0 in a block. Falling back to\n 0 would change the first two, so an unset token must leave the property alone. It does\n that with revert-layer, which gives this declaration up and lets any lower layer, such\n as an app rule inside @layer, decide; where nothing else sets min-width the value is\n still auto. A plain auto here would beat a layered rule, because unlayered rules win.\n :where() keeps the rule at no specificity, so an app rule on .chat-message that\n already sets min-width is not tied by Svelte's scope class. */:where(.chat-message.svelte-ivh8u) {min-width:var(--chat-message-min-width, revert-layer);}.chat-message.party-sender.svelte-ivh8u {align-self:flex-end;align-items:flex-end;}.chat-message.party-responder.svelte-ivh8u {align-self:flex-start;align-items:flex-start;}.row.svelte-ivh8u {display:flex;gap:var(--chat-message-gap, 10px);align-items:flex-end;width:100%;}.chat-message.party-sender.svelte-ivh8u .row:where(.svelte-ivh8u) {flex-direction:row-reverse;}.avatar.svelte-ivh8u {display:flex;flex-shrink:0;align-items:center;justify-content:center;}.content.svelte-ivh8u {display:flex;flex-direction:column;gap:var(--chat-message-content-gap, 6px);min-width:0;}.header.svelte-ivh8u {font-size:var(--chat-message-header-font-size, 0.75rem);color:var(--chat-message-header-color, #71717a);}.bubble.svelte-ivh8u {box-sizing:border-box;padding:var(--chat-message-bubble-padding, 9px 13px);border-radius:var(--chat-message-bubble-border-radius, 16px);font-size:var(--chat-message-font-size, 0.9375rem);line-height:var(--chat-message-line-height, 1.5);color:var(--chat-message-color, #27272a);background:var(--chat-message-background, #f4f4f5);border:var(--chat-message-border, none);box-shadow:var(--chat-message-box-shadow, none);word-wrap:break-word;overflow-wrap:anywhere;}\n\n /* Only the marker variant becomes a containing block: making every bubble relative\n would silently re-base any absolutely-positioned content a consumer renders in a\n body snippet. */.bubble.has-marker.svelte-ivh8u {position:relative;}.marker.svelte-ivh8u {\n /* Decorative and absolutely positioned, so it sits over the bubble's leading\n padding — where a link at the start of a responder message also sits. Without\n this it silently eats those clicks. */pointer-events:none;position:absolute;inset-block:var(--chat-message-marker-inset-block, 0);\n /* Logical, so the bar follows `role` alignment into RTL instead of pinning left. */inset-inline-start:var(--chat-message-marker-offset, 0px);width:var(--chat-message-marker-width, 2px);border-radius:var(--chat-message-marker-border-radius, 0);background:var(--chat-message-marker-color, #6d28d9);}.chat-message.party-sender.svelte-ivh8u .bubble:where(.svelte-ivh8u) {color:var(--chat-message-sender-color, #ffffff);background:var(--chat-message-sender-background, #18181b);border:var(--chat-message-sender-border, none);border-radius:var(\n --chat-message-sender-border-radius,\n var(--chat-message-bubble-border-radius, 16px)\n );}.chat-message.party-responder.svelte-ivh8u .bubble:where(.svelte-ivh8u) {color:var(--chat-message-responder-color, var(--chat-message-color, #27272a));background:var(--chat-message-responder-background, transparent);border:var(--chat-message-responder-border, none);padding:var(--chat-message-responder-padding, 2px 0);}.chat-message.error.svelte-ivh8u .bubble:where(.svelte-ivh8u) {color:var(--chat-message-error-color, #e0334b);}.text.svelte-ivh8u {white-space:pre-wrap;}.typing.svelte-ivh8u {display:inline-flex;align-items:center;}.message-attachments.svelte-ivh8u {display:flex;flex-direction:column;gap:var(--chat-message-attachments-gap, 8px);margin:var(--chat-message-attachments-margin, 4px 0 0 0);}.message-attachments.svelte-ivh8u:empty {display:none;}.actions.svelte-ivh8u {display:flex;align-items:center;gap:var(--chat-message-actions-gap, 2px);opacity:var(--chat-message-actions-opacity, 0);transition:var(--chat-message-actions-transition, opacity 0.15s ease);--button-width: var(--chat-message-action-size, 28px);--button-height: var(--chat-message-action-size, 28px);--button-padding: var(--chat-message-action-padding, 6px);--button-border-radius: var(--chat-message-action-border-radius, 6px);--button-color: var(--chat-message-action-background-color, transparent);--button-text-color: var(--chat-message-action-color, #71717a);--button-content-gap: 0px;--button-hover-color: var(--chat-message-action-hover-background-color, #f4f4f5);}\n\n /* The sender bubble is a dark fill in light mode, so the neutral action grey\n above lands at 1.81:1 on it. Actions inside that bubble take their own ink. */.chat-message.party-sender.svelte-ivh8u .actions:where(.svelte-ivh8u) {--button-text-color: var(--chat-message-sender-action-color, #d4d4d8);}\n\n /* The sender bubble is a dark fill in light mode and a light one in dark, so\n anything rendered inside it -- links and inline buttons included -- has to\n invert with it rather than take one fixed colour. */.chat-message.party-sender.svelte-ivh8u .bubble:where(.svelte-ivh8u) a {color:var(--chat-message-sender-link-color, light-dark(#a5b4fc, #4338ca));}.chat-message.party-sender.svelte-ivh8u .bubble:where(.svelte-ivh8u) .button-text {color:var(--chat-message-sender-action-color, light-dark(#d4d4d8, #27272a));}.chat-message.svelte-ivh8u:hover .actions:where(.svelte-ivh8u),\n .chat-message.svelte-ivh8u:focus-within .actions:where(.svelte-ivh8u) {opacity:1;}.action.svelte-ivh8u {display:flex;}.action.svelte-ivh8u svg {height:100%;width:100%;}\n\n @media (hover: none) {.actions.svelte-ivh8u {opacity:1;}\n }.clamp-toggle.svelte-ivh8u {display:flex;margin-top:var(--chat-message-clamp-toggle-margin-top, 4px);}\n\n /* Clamp the rendered body, not the source: the message keeps its markup and its\n copy text, and expanding is a state change rather than a re-render. */.bubble[data-clamped='true'].svelte-ivh8u .body:where(.svelte-ivh8u) {display:-webkit-box;line-clamp:var(--chat-message-clamp-lines, var(--chat-message-clamp-lines-prop, 2));-webkit-line-clamp:var(--chat-message-clamp-lines, var(--chat-message-clamp-lines-prop, 2));-webkit-box-orient:vertical;overflow:hidden;}.body.svelte-ivh8u p {margin:var(--chat-message-paragraph-margin, 0 0 0.5em 0);}.body.svelte-ivh8u p:last-child {margin-bottom:0;}.body.svelte-ivh8u a {color:var(--chat-message-link-color, light-dark(#6d28d9, #a5b4fc));text-decoration:underline;text-underline-offset:2px;}.body.svelte-ivh8u code {font-family:var(--chat-message-code-font-family, ui-monospace, monospace);font-size:0.88em;background:var(--chat-message-code-background, rgba(0, 0, 0, 0.05));padding:1px 5px;border-radius:4px;}.body.svelte-ivh8u pre {background:var(--chat-message-pre-background, rgba(0, 0, 0, 0.05));padding:10px 12px;border-radius:8px;overflow-x:auto;margin:0.5em 0;}.body.svelte-ivh8u pre code {background:transparent;padding:0;}\n\n /* --chat-message-list-padding is also what ChatMessageList reads for its own padding, so an\n app that sets it to 0 for the list loses the indent of every list inside a message. The\n body-list tokens are read first so the two can differ; the older names stay as the\n fallback, which leaves a message that sets neither as it was. */.body.svelte-ivh8u ul,\n .body.svelte-ivh8u ol {margin:var(--chat-message-body-list-margin, var(--chat-message-list-margin, 0.4em 0));padding-left:var(--chat-message-body-list-padding, var(--chat-message-list-padding, 1.4em));}.body.svelte-ivh8u li {margin:0.2em 0;}.body.svelte-ivh8u h1,\n .body.svelte-ivh8u h2,\n .body.svelte-ivh8u h3,\n .body.svelte-ivh8u h4,\n .body.svelte-ivh8u h5,\n .body.svelte-ivh8u h6 {margin:var(--chat-message-heading-margin, 0.8em 0 0.4em 0);line-height:1.3;}.body.svelte-ivh8u h1 {font-size:1.35em;}.body.svelte-ivh8u h2 {font-size:1.2em;}.body.svelte-ivh8u h3 {font-size:1.1em;}.body.svelte-ivh8u h4,\n .body.svelte-ivh8u h5,\n .body.svelte-ivh8u h6 {font-size:1em;}.body.svelte-ivh8u blockquote {margin:0.5em 0;padding:2px 0 2px 12px;border-left:3px solid var(--chat-message-blockquote-border-color, rgba(0, 0, 0, 0.15));opacity:var(--chat-message-blockquote-opacity, 0.85);}\n\n /* Fallback for a bare <table> in caller-supplied `html`, which has no scroll\n container of its own: it keeps the block treatment so a wide table scrolls\n rather than overflowing the message. A table that came from `markdown` (or\n from `renderMarkdown`) arrives inside `.markdown-table-wrapper`, and the\n rules below take it back out of block layout. */.body.svelte-ivh8u table {display:block;max-width:100%;overflow-x:auto;border-collapse:collapse;margin:0.5em 0;}\n\n /* The wrapper scrolls, not the table. `display: block` on a <table> is what\n makes `overflow-x` work on the element itself, but it strips the table's\n semantics for assistive technology -- a screen reader loses row and column\n navigation. MarkdownText separates the scroll container from the table for\n exactly that reason; this component rendered the same wrapper markup and\n styled the table instead, so a chat table was scrollable and no longer a\n table. Chat is where markdown tables overwhelmingly land. */.body.svelte-ivh8u .markdown-table-wrapper {display:block;max-width:100%;overflow-x:auto;margin:0.5em 0;}\n\n /* The wrapper is a tab stop (the renderer emits tabindex=\"0\" so the scroll is\n reachable by keyboard). The browser's default ring already applies; this\n replaces it with the same 2px treatment the rest of the library uses, since\n the 1px UA default is easy to miss against a message bubble. */.body.svelte-ivh8u .markdown-table-wrapper:focus-visible {outline:2px solid var(--chat-message-table-focus-outline-color, #3b82f6);outline-offset:2px;}\n\n /* Without an intrinsic width the table is exactly its container's width and a\n wide table compresses instead of scrolling. `max-content` supplies it;\n `min-width` keeps a narrow table filling the bubble. */.body.svelte-ivh8u .markdown-table-wrapper table {display:table;width:max-content;min-width:100%;overflow-x:visible;margin:0;}.body.svelte-ivh8u th,\n .body.svelte-ivh8u td {padding:5px 10px;border:1px solid var(--chat-message-table-border-color, rgba(0, 0, 0, 0.12));text-align:left;}.body.svelte-ivh8u th {background:var(--chat-message-table-header-background, rgba(0, 0, 0, 0.04));}.body.svelte-ivh8u img {max-width:100%;border-radius:var(--chat-message-image-border-radius, 8px);}.body.svelte-ivh8u hr {border:none;border-top:1px solid var(--chat-message-hr-color, rgba(0, 0, 0, 0.12));margin:0.8em 0;}\n /* The actions row is revealed on hover by fading opacity 0 -> 1. Under a\n reduced-motion preference it appears at once instead: the row is a set of\n controls the user is reaching for, so arriving instantly is the better\n outcome, not a degraded one. */\n @media (prefers-reduced-motion: reduce) {.actions.svelte-ivh8u {transition:none;}\n }"
|
|
51694
51694
|
};
|
|
51695
51695
|
function ChatMessage(e, t) {
|
|
51696
51696
|
let n = props_id();
|
|
@@ -52105,7 +52105,7 @@ create_custom_element(ChatMessage, {
|
|
|
52105
52105
|
//#region src/lib/ChatMessageList/ChatMessageList.svelte
|
|
52106
52106
|
var root$14 = /* @__PURE__ */ from_html("<div class=\"jump svelte-qpm4dm\"><!></div>"), root_1$13 = /* @__PURE__ */ from_html("<div role=\"log\" aria-live=\"polite\"><div class=\"inner svelte-qpm4dm\"><!> <!> <!></div></div>"), $$css$34 = {
|
|
52107
52107
|
hash: "svelte-qpm4dm",
|
|
52108
|
-
code: ".chat-message-list.svelte-qpm4dm {box-sizing:border-box;display:flex;flex-direction:column;flex:1;width:100%;overflow-y:auto;padding:var(--chat-message-list-padding, 0.75rem 1.5rem);scroll-behavior:var(--chat-message-list-scroll-behavior, smooth);}\n\n /* Both properties sit inside :where() so they carry no specificity. A host that\n already sets overflow-x or overscroll-behavior on the list wrote that rule\n before these tokens existed, and Svelte's scope class would otherwise make\n this tie it or beat it.\n An unset token falls back to revert-layer, not to a value: this rule is\n unlayered, and an unlayered declaration beats any rule inside a cascade\n @layer whatever its specificity, so a fixed fallback would override a layered\n rule of the host's that used to win. revert-layer hands the property back to\n what the cascade held below this rule, which is that layered rule if there is\n one and the property's initial value if not: overflow-x `visible` (computing\n to `auto` beside overflow-y `auto`) and overscroll-behavior `auto`, the list\n as it was before the tokens. An engine without revert-layer drops the\n declaration to that same initial value. */:where(.chat-message-list.svelte-qpm4dm) {overflow-x:var(--chat-message-list-overflow-x, revert-layer);overscroll-behavior:var(--chat-message-list-overscroll-behavior, revert-layer);}.chat-message-list.hide-scrollbar.svelte-qpm4dm {-ms-overflow-style:none;scrollbar-width:none;}.chat-message-list.hide-scrollbar.svelte-qpm4dm::-webkit-scrollbar {display:none;}\n\n /* The inner wrapper is what the pin-sender-turn policy reserves height on; it\n carries the column layout so the reservation becomes scrollable headroom. */.inner.svelte-qpm4dm {display:flex;flex-direction:column;gap:var(--chat-message-list-gap, 1rem);flex:1 0 auto;}.jump.svelte-qpm4dm {position:sticky;bottom:var(--chat-message-list-jump-bottom, 8px);align-self:center;margin-top:var(--chat-message-list-jump-margin-top, 4px);--button-width: var(--chat-message-list-jump-size, 36px);--button-height: var(--chat-message-list-jump-size, 36px);--button-padding: var(--chat-message-list-jump-padding, 8px);--button-border-radius: var(--chat-message-list-jump-border-radius, 50%);--button-color: var(--chat-message-list-jump-background-color, #ffffff);--button-text-color: var(--chat-message-list-jump-color, #52525b);--button-border: var(--chat-message-list-jump-border, 1px solid #e4e4e7);--button-box-shadow: var(--chat-message-list-jump-box-shadow, 0 4px 12px rgba(0, 0, 0, 0.12));--button-content-gap: 0px;--button-hover-color: var(--chat-message-list-jump-hover-background-color, #f4f4f5);}.jump.svelte-qpm4dm svg {height:100%;width:100%;}\n\n @media (prefers-reduced-motion: reduce) {.chat-message-list.svelte-qpm4dm {scroll-behavior:auto;}\n }"
|
|
52108
|
+
code: ".chat-message-list.svelte-qpm4dm {box-sizing:border-box;display:flex;flex-direction:column;flex:1;width:100%;overflow-y:auto;padding:var(--chat-message-list-padding, 0.75rem 1.5rem);scroll-behavior:var(--chat-message-list-scroll-behavior, smooth);}\n\n /* Both properties sit inside :where() so they carry no specificity. A host that\n already sets overflow-x or overscroll-behavior on the list wrote that rule\n before these tokens existed, and Svelte's scope class would otherwise make\n this tie it or beat it.\n An unset token falls back to revert-layer, not to a value: this rule is\n unlayered, and an unlayered declaration beats any rule inside a cascade\n @layer whatever its specificity, so a fixed fallback would override a layered\n rule of the host's that used to win. revert-layer hands the property back to\n what the cascade held below this rule, which is that layered rule if there is\n one and the property's initial value if not: overflow-x `visible` (computing\n to `auto` beside overflow-y `auto`) and overscroll-behavior `auto`, the list\n as it was before the tokens. An engine without revert-layer drops the\n declaration to that same initial value. */:where(.chat-message-list.svelte-qpm4dm) {overflow-x:var(--chat-message-list-overflow-x, revert-layer);overscroll-behavior:var(--chat-message-list-overscroll-behavior, revert-layer);}.chat-message-list.hide-scrollbar.svelte-qpm4dm {-ms-overflow-style:none;scrollbar-width:none;}.chat-message-list.hide-scrollbar.svelte-qpm4dm::-webkit-scrollbar {display:none;}\n\n /* The inner wrapper is what the pin-sender-turn policy reserves height on; it\n carries the column layout so the reservation becomes scrollable headroom. */.inner.svelte-qpm4dm {display:flex;flex-direction:column;gap:var(--chat-message-list-gap, 1rem);flex:1 0 auto;}\n\n /* Hooks for an app that lays the message column out itself: the clearance below the last\n message, the width it centres at on a wide screen, and the space beside it. An auto margin\n turns the column's stretch off (it shrinks to its content), so centring it takes a width as\n well: width 100% beside a maximum width and auto inline margins. They sit in\n :where() for the reason the list's overflow tokens do, so a rule of the app's own that\n wrote these properties before the tokens existed keeps winning over Svelte's scope class,\n and they fall back to revert-layer, not to a value, so a rule of the app's inside a\n cascade @layer still wins while a token is unset. Unset, the column has no padding, no\n margin and no maximum width, as before. */:where(.inner.svelte-qpm4dm) {padding-bottom:var(--chat-message-list-inner-padding-bottom, revert-layer);padding-inline:var(--chat-message-list-inner-padding-inline, revert-layer);width:var(--chat-message-list-inner-width, revert-layer);max-width:var(--chat-message-list-inner-max-width, revert-layer);margin-inline:var(--chat-message-list-inner-margin-inline, revert-layer);}.jump.svelte-qpm4dm {position:sticky;bottom:var(--chat-message-list-jump-bottom, 8px);align-self:center;margin-top:var(--chat-message-list-jump-margin-top, 4px);--button-width: var(--chat-message-list-jump-size, 36px);--button-height: var(--chat-message-list-jump-size, 36px);--button-padding: var(--chat-message-list-jump-padding, 8px);--button-border-radius: var(--chat-message-list-jump-border-radius, 50%);--button-color: var(--chat-message-list-jump-background-color, #ffffff);--button-text-color: var(--chat-message-list-jump-color, #52525b);--button-border: var(--chat-message-list-jump-border, 1px solid #e4e4e7);--button-box-shadow: var(--chat-message-list-jump-box-shadow, 0 4px 12px rgba(0, 0, 0, 0.12));--button-content-gap: 0px;--button-hover-color: var(--chat-message-list-jump-hover-background-color, #f4f4f5);}.jump.svelte-qpm4dm svg {height:100%;width:100%;}\n\n @media (prefers-reduced-motion: reduce) {.chat-message-list.svelte-qpm4dm {scroll-behavior:auto;}\n }"
|
|
52109
52109
|
};
|
|
52110
52110
|
function ChatMessageList(e, t) {
|
|
52111
52111
|
push(t, !0), append_styles$1(e, $$css$34);
|