@juspay/svelte-ui-components 4.44.1 → 4.45.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.
|
@@ -323,6 +323,18 @@
|
|
|
323
323
|
margin: var(--chat-message-margin, 0);
|
|
324
324
|
}
|
|
325
325
|
|
|
326
|
+
/* The root had no min-width, so its initial value, auto, is what every parent saw: a
|
|
327
|
+
content-based minimum in a flex row or a grid track, and 0 in a block. Falling back to
|
|
328
|
+
0 would change the first two, so an unset token must leave the property alone. It does
|
|
329
|
+
that with revert-layer, which gives this declaration up and lets any lower layer, such
|
|
330
|
+
as an app rule inside @layer, decide; where nothing else sets min-width the value is
|
|
331
|
+
still auto. A plain auto here would beat a layered rule, because unlayered rules win.
|
|
332
|
+
:where() keeps the rule at no specificity, so an app rule on .chat-message that
|
|
333
|
+
already sets min-width is not tied by Svelte's scope class. */
|
|
334
|
+
:where(.chat-message) {
|
|
335
|
+
min-width: var(--chat-message-min-width, revert-layer);
|
|
336
|
+
}
|
|
337
|
+
|
|
326
338
|
.chat-message.party-sender {
|
|
327
339
|
align-self: flex-end;
|
|
328
340
|
align-items: flex-end;
|
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);}.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;}.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 }"
|
|
51694
51694
|
};
|
|
51695
51695
|
function ChatMessage(e, t) {
|
|
51696
51696
|
let n = props_id();
|