valtech-components 4.0.1037 → 4.0.1038

package/fesm2022/valtech-components.mjs

@@ -70,7 +70,7 @@ import fixWebmDuration from 'fix-webm-duration';
  * Current version of valtech-components.
  * This is automatically updated during the publish process.
  */
-const VERSION = '4.0.1037';
+const VERSION = '4.0.1038';
 
 function evaluateValtechAccess(rule, context, features = {}, visitedFeatures = new Set()) {
     if (rule == null)
@@ -24127,11 +24127,32 @@ class AiMessageRendererComponent {
         @if (part.kind === 'code') {
           <pre class="code"><code>{{ part.code }}</code></pre>
         } @else {
-          <p class="text">{{ part.text }}</p>
+          @switch (part.tag) {
+            @case ('h3') {
+              <h3 class="heading" [innerHTML]="part.html"></h3>
+            }
+            @case ('ul') {
+              <ul class="list">
+                @for (item of part.items ?? []; track item) {
+                  <li [innerHTML]="item"></li>
+                }
+              </ul>
+            }
+            @case ('ol') {
+              <ol class="list">
+                @for (item of part.items ?? []; track item) {
+                  <li [innerHTML]="item"></li>
+                }
+              </ol>
+            }
+            @default {
+              <p class="text" [innerHTML]="part.html"></p>
+            }
+          }
         }
       }
     </div>
-  `, isInline: true, styles: [":host{display:block}.ai-message{display:flex;flex-direction:column;gap:.65rem}.text{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}.code{max-width:100%;margin:0;padding:.75rem;overflow-x:auto;border-radius:8px;background:var(--val-ai-message-code-background, rgba(15, 23, 42, .06));color:var(--val-ai-message-code-color, currentColor);font-size:.82rem;line-height:1.45}code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,monospace}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+  `, isInline: true, styles: [":host{display:block}.ai-message{display:flex;flex-direction:column;gap:.65rem}.text,.heading,.list{margin:0;overflow-wrap:anywhere}.heading{font-size:1rem;line-height:1.3;font-weight:750}.text{white-space:pre-wrap}.list{display:flex;flex-direction:column;gap:.28rem;padding-inline-start:1.15rem}.code{max-width:100%;margin:0;padding:.75rem;overflow-x:auto;border-radius:8px;background:var(--val-ai-message-code-background, rgba(15, 23, 42, .06));color:var(--val-ai-message-code-color, currentColor);font-size:.82rem;line-height:1.45}code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,monospace}.text ::ng-deep code,.heading ::ng-deep code,.list ::ng-deep code{padding:.08rem .28rem;border-radius:5px;background:var(--val-ai-message-inline-code-background, rgba(15, 23, 42, .08));font-size:.9em}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AiMessageRendererComponent, decorators: [{
             type: Component,
@@ -24141,11 +24162,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         @if (part.kind === 'code') {
           <pre class="code"><code>{{ part.code }}</code></pre>
         } @else {
-          <p class="text">{{ part.text }}</p>
+          @switch (part.tag) {
+            @case ('h3') {
+              <h3 class="heading" [innerHTML]="part.html"></h3>
+            }
+            @case ('ul') {
+              <ul class="list">
+                @for (item of part.items ?? []; track item) {
+                  <li [innerHTML]="item"></li>
+                }
+              </ul>
+            }
+            @case ('ol') {
+              <ol class="list">
+                @for (item of part.items ?? []; track item) {
+                  <li [innerHTML]="item"></li>
+                }
+              </ol>
+            }
+            @default {
+              <p class="text" [innerHTML]="part.html"></p>
+            }
+          }
         }
       }
     </div>
-  `, styles: [":host{display:block}.ai-message{display:flex;flex-direction:column;gap:.65rem}.text{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}.code{max-width:100%;margin:0;padding:.75rem;overflow-x:auto;border-radius:8px;background:var(--val-ai-message-code-background, rgba(15, 23, 42, .06));color:var(--val-ai-message-code-color, currentColor);font-size:.82rem;line-height:1.45}code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,monospace}\n"] }]
+  `, styles: [":host{display:block}.ai-message{display:flex;flex-direction:column;gap:.65rem}.text,.heading,.list{margin:0;overflow-wrap:anywhere}.heading{font-size:1rem;line-height:1.3;font-weight:750}.text{white-space:pre-wrap}.list{display:flex;flex-direction:column;gap:.28rem;padding-inline-start:1.15rem}.code{max-width:100%;margin:0;padding:.75rem;overflow-x:auto;border-radius:8px;background:var(--val-ai-message-code-background, rgba(15, 23, 42, .06));color:var(--val-ai-message-code-color, currentColor);font-size:.82rem;line-height:1.45}code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,monospace}.text ::ng-deep code,.heading ::ng-deep code,.list ::ng-deep code{padding:.08rem .28rem;border-radius:5px;background:var(--val-ai-message-inline-code-background, rgba(15, 23, 42, .08));font-size:.9em}\n"] }]
         }] });
 function parseAiMessage(text) {
     const parts = [];
@@ -24156,7 +24198,8 @@ function parseAiMessage(text) {
     while ((match = fence.exec(text)) !== null) {
         const before = text.slice(lastIndex, match.index).trim();
         if (before) {
-            parts.push({ kind: 'text', id: `text-${index++}`, text: before });
+            parts.push(...parseMarkdownBlocks(before, index));
+            index = parts.length;
         }
         parts.push({
             kind: 'code',
@@ -24168,9 +24211,81 @@ function parseAiMessage(text) {
     }
     const rest = text.slice(lastIndex).trim();
     if (rest) {
-        parts.push({ kind: 'text', id: `text-${index++}`, text: rest });
+        parts.push(...parseMarkdownBlocks(rest, index));
+    }
+    return parts.length > 0 ? parts : [{ kind: 'block', id: 'text-0', tag: 'p', html: renderInline(text) }];
+}
+function parseMarkdownBlocks(text, offset) {
+    const blocks = [];
+    const lines = text.split('\n');
+    let paragraph = [];
+    let listItems = [];
+    let orderedItems = [];
+    let index = offset;
+    const flushParagraph = () => {
+        if (paragraph.length === 0)
+            return;
+        blocks.push({ kind: 'block', id: `text-${index++}`, tag: 'p', html: renderInline(paragraph.join('\n')) });
+        paragraph = [];
+    };
+    const flushLists = () => {
+        if (listItems.length > 0) {
+            blocks.push({ kind: 'block', id: `list-${index++}`, tag: 'ul', items: listItems });
+            listItems = [];
+        }
+        if (orderedItems.length > 0) {
+            blocks.push({ kind: 'block', id: `list-${index++}`, tag: 'ol', items: orderedItems });
+            orderedItems = [];
+        }
+    };
+    for (const raw of lines) {
+        const line = raw.trim();
+        if (!line) {
+            flushParagraph();
+            flushLists();
+            continue;
+        }
+        const heading = line.match(/^#{1,4}\s+(.+)$/);
+        if (heading) {
+            flushParagraph();
+            flushLists();
+            blocks.push({ kind: 'block', id: `heading-${index++}`, tag: 'h3', html: renderInline(heading[1]) });
+            continue;
+        }
+        const bullet = line.match(/^[-*]\s+(.+)$/);
+        if (bullet) {
+            flushParagraph();
+            orderedItems = [];
+            listItems.push(renderInline(bullet[1]));
+            continue;
+        }
+        const ordered = line.match(/^\d+\.\s+(.+)$/);
+        if (ordered) {
+            flushParagraph();
+            listItems = [];
+            orderedItems.push(renderInline(ordered[1]));
+            continue;
+        }
+        flushLists();
+        paragraph.push(raw);
     }
-    return parts.length > 0 ? parts : [{ kind: 'text', id: 'text-0', text }];
+    flushParagraph();
+    flushLists();
+    return blocks;
+}
+function renderInline(text) {
+    return escapeHtml(text)
+        .replace(/`([^`]+)`/g, '<code>$1</code>')
+        .replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>')
+        .replace(/\*([^*]+)\*/g, '<em>$1</em>');
+}
+function escapeHtml(text) {
+    return text
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;');
 }
 
 /**
@@ -93166,6 +93281,21 @@ class MessageBubbleComponent {
             this.showCopyAction() ||
             (this.showEditAction() && this.msg().isMine) ||
             (this.showDeleteAction() && (this.msg().isMine || this.canModerate())));
+        this.copyOnlyActions = computed(() => this.showCopyAction() && this.hasActionsCount() === 1);
+        this.hasActionsCount = computed(() => {
+            let count = 0;
+            if (this.showReactAction())
+                count++;
+            if (this.showReplyAction())
+                count++;
+            if (this.showCopyAction())
+                count++;
+            if (this.showEditAction() && this.msg().isMine)
+                count++;
+            if (this.showDeleteAction() && (this.msg().isMine || this.canModerate()))
+                count++;
+            return count;
+        });
         this.time = computed(() => formatClockTime(this.msg().createdAt, this.locale()));
         this.initials = computed(() => {
             const name = this.msg().senderName?.trim() ?? '';
@@ -93348,7 +93478,7 @@ class MessageBubbleComponent {
         }
 
         @if (!msg().isDeleted && hasActions()) {
-          <div class="actions" [class.open]="actionsOpen()">
+          <div class="actions" [class.open]="actionsOpen()" [class.copy-only]="copyOnlyActions()">
             @if (showReactAction()) {
               <button class="act" [attr.aria-label]="t('react')" (click)="emit('react', '👍')">
                 <ion-icon name="happy-outline" aria-hidden="true" />
@@ -93378,7 +93508,7 @@ class MessageBubbleComponent {
         }
       </div>
     </div>
-  `, isInline: true, styles: [":host{display:block}.row{display:flex;align-items:flex-end;gap:8px;margin:0}.row.mine{flex-direction:row-reverse}.row.tail{margin-bottom:8px}.avatar{width:28px;height:28px;border-radius:50%;overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--ion-color-primary);color:#fff;font-size:.6875rem;font-weight:700}.avatar.hidden{visibility:hidden}.avatar img{width:100%;height:100%;object-fit:cover}.bubble-wrap{position:relative;max-width:min(86%,680px);display:flex;flex-direction:column}.row.mine .bubble-wrap{align-items:flex-end}.bubble{position:relative;padding:9px 12px;border-radius:18px;background:var(--val-message-background, transparent);border:1px solid var(--val-message-border, transparent);color:var(--ion-text-color, #000);font-size:.95rem;line-height:1.45;cursor:pointer;outline:none;word-break:break-word}.row:not(.mine).tail .bubble{border-bottom-left-radius:18px}.mine .bubble{background:var(--val-message-mine-background, var(--ion-color-dark, #111));border-color:var(--val-message-mine-border, var(--val-message-mine-background, var(--ion-color-dark, #111)));color:var(--val-message-mine-color, #fff)}.mine.tail .bubble{border-bottom-right-radius:18px}.bubble.deleted{background:transparent;border-style:dashed;cursor:default}.name{display:block;font-size:.75rem;font-weight:700;color:var(--ion-color-primary);margin-bottom:2px}.reply-preview{display:flex;flex-direction:column;gap:1px;padding:4px 8px;margin-bottom:4px;border-left:3px solid currentColor;border-radius:6px;background:var(--ion-color-step-100, rgba(127, 127, 127, .12));font-size:.8125rem;opacity:.85}.reply-name{font-weight:700}.reply-body{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px}.body{white-space:pre-wrap}.deleted-text{font-style:italic;opacity:.6}.attachments{display:flex;flex-direction:column;gap:4px;margin-bottom:4px}.att-image{max-width:100%;border-radius:10px;display:block;cursor:pointer}.audios{display:flex;flex-direction:column;gap:4px;margin-bottom:4px}.att-audio{width:240px;max-width:100%;height:40px}.files{display:flex;flex-direction:column;gap:4px;margin-bottom:4px}.file-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:8px;background:var(--ion-color-step-100, rgba(127, 127, 127, .12));color:inherit;text-decoration:none;font-size:.8125rem}.meta{display:inline-flex;align-items:center;gap:4px;float:right;margin:2px 0 -2px 8px;font-size:.6875rem;opacity:var(--val-message-meta-opacity, 0)}.edited{font-style:italic}.status{font-size:.875rem}.status.read{color:var(--ion-color-secondary, #4fc3f7);opacity:1}.status.failed{color:var(--ion-color-danger, #eb445a);opacity:1}.reactions{display:flex;flex-wrap:wrap;gap:4px;margin-top:3px}.reaction{display:inline-flex;align-items:center;gap:3px;padding:1px 7px;border-radius:999px;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));background:var(--ion-card-background, var(--ion-background-color, #fff));font-size:.75rem;cursor:pointer;color:var(--ion-text-color, #000)}.reaction.active{border-color:var(--ion-color-primary);background:var(--ion-color-primary-tint, var(--ion-color-primary));color:var(--ion-color-primary-contrast, #fff)}.reaction .count{opacity:.75}.actions{position:absolute;top:-14px;display:flex;gap:2px;padding:2px;border-radius:999px;background:var(--ion-card-background, var(--ion-background-color, #fff));border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));box-shadow:0 2px 8px #0000001f;opacity:0;pointer-events:none;transition:opacity .12s ease;z-index:2}.row.mine .actions{right:0}.row:not(.mine) .actions{left:0}.bubble-wrap:hover .actions,.actions.open{opacity:1;pointer-events:auto}.act{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;border-radius:50%;background:transparent;color:var(--ion-color-dark, #92949c);cursor:pointer;font-size:1rem}.act:hover{background:var(--ion-color-step-100, rgba(127, 127, 127, .12));color:var(--ion-text-color, #000)}.act.danger:hover{color:var(--ion-color-danger, #eb445a)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: AiMessageRendererComponent, selector: "val-ai-message-renderer", inputs: ["text"] }] }); }
+  `, isInline: true, styles: [":host{display:block}.row{display:flex;align-items:flex-end;gap:8px;margin:0}.row.mine{flex-direction:row-reverse}.row.tail{margin-bottom:8px}.avatar{width:28px;height:28px;border-radius:50%;overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--ion-color-primary);color:#fff;font-size:.6875rem;font-weight:700}.avatar.hidden{visibility:hidden}.avatar img{width:100%;height:100%;object-fit:cover}.bubble-wrap{position:relative;max-width:min(86%,680px);display:flex;flex-direction:column}.row.mine .bubble-wrap{align-items:flex-end}.bubble{position:relative;padding:9px 12px;border-radius:18px;background:var(--val-message-background, transparent);border:1px solid var(--val-message-border, transparent);color:var(--ion-text-color, #000);font-size:.95rem;line-height:1.45;cursor:pointer;outline:none;word-break:break-word}.row:not(.mine).tail .bubble{border-bottom-left-radius:18px}.mine .bubble{background:var(--val-message-mine-background, var(--ion-color-dark, #111));border-color:var(--val-message-mine-border, var(--val-message-mine-background, var(--ion-color-dark, #111)));color:var(--val-message-mine-color, #fff)}.mine.tail .bubble{border-bottom-right-radius:18px}.bubble.deleted{background:transparent;border-style:dashed;cursor:default}.name{display:block;font-size:.75rem;font-weight:700;color:var(--ion-color-primary);margin-bottom:2px}.reply-preview{display:flex;flex-direction:column;gap:1px;padding:4px 8px;margin-bottom:4px;border-left:3px solid currentColor;border-radius:6px;background:var(--ion-color-step-100, rgba(127, 127, 127, .12));font-size:.8125rem;opacity:.85}.reply-name{font-weight:700}.reply-body{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px}.body{white-space:pre-wrap}.deleted-text{font-style:italic;opacity:.6}.attachments{display:flex;flex-direction:column;gap:4px;margin-bottom:4px}.att-image{max-width:100%;border-radius:10px;display:block;cursor:pointer}.audios{display:flex;flex-direction:column;gap:4px;margin-bottom:4px}.att-audio{width:240px;max-width:100%;height:40px}.files{display:flex;flex-direction:column;gap:4px;margin-bottom:4px}.file-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:8px;background:var(--ion-color-step-100, rgba(127, 127, 127, .12));color:inherit;text-decoration:none;font-size:.8125rem}.meta{display:inline-flex;align-items:center;gap:4px;float:right;margin:2px 0 -2px 8px;font-size:.6875rem;opacity:var(--val-message-meta-opacity, 0)}.edited{font-style:italic}.status{font-size:.875rem}.status.read{color:var(--ion-color-secondary, #4fc3f7);opacity:1}.status.failed{color:var(--ion-color-danger, #eb445a);opacity:1}.reactions{display:flex;flex-wrap:wrap;gap:4px;margin-top:3px}.reaction{display:inline-flex;align-items:center;gap:3px;padding:1px 7px;border-radius:999px;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));background:var(--ion-card-background, var(--ion-background-color, #fff));font-size:.75rem;cursor:pointer;color:var(--ion-text-color, #000)}.reaction.active{border-color:var(--ion-color-primary);background:var(--ion-color-primary-tint, var(--ion-color-primary));color:var(--ion-color-primary-contrast, #fff)}.reaction .count{opacity:.75}.actions{position:absolute;top:-14px;display:flex;gap:2px;padding:2px;border-radius:999px;background:var(--ion-card-background, var(--ion-background-color, #fff));border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));box-shadow:0 2px 8px #0000001f;opacity:0;pointer-events:none;transition:opacity .12s ease;z-index:2}.row.mine .actions{right:0}.row:not(.mine) .actions{left:0}.actions.copy-only{inset:auto auto -14px 0}.row.mine .actions.copy-only{left:0;right:auto}.bubble-wrap:hover .actions,.actions.open{opacity:1;pointer-events:auto}.act{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;border-radius:50%;background:transparent;color:var(--ion-color-dark, #92949c);cursor:pointer;font-size:1rem}.act:hover{background:var(--ion-color-step-100, rgba(127, 127, 127, .12));color:var(--ion-text-color, #000)}.act.danger:hover{color:var(--ion-color-danger, #eb445a)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: AiMessageRendererComponent, selector: "val-ai-message-renderer", inputs: ["text"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MessageBubbleComponent, decorators: [{
             type: Component,
@@ -93484,7 +93614,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         }
 
         @if (!msg().isDeleted && hasActions()) {
-          <div class="actions" [class.open]="actionsOpen()">
+          <div class="actions" [class.open]="actionsOpen()" [class.copy-only]="copyOnlyActions()">
             @if (showReactAction()) {
               <button class="act" [attr.aria-label]="t('react')" (click)="emit('react', '👍')">
                 <ion-icon name="happy-outline" aria-hidden="true" />
@@ -93514,7 +93644,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         }
       </div>
     </div>
-  `, styles: [":host{display:block}.row{display:flex;align-items:flex-end;gap:8px;margin:0}.row.mine{flex-direction:row-reverse}.row.tail{margin-bottom:8px}.avatar{width:28px;height:28px;border-radius:50%;overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--ion-color-primary);color:#fff;font-size:.6875rem;font-weight:700}.avatar.hidden{visibility:hidden}.avatar img{width:100%;height:100%;object-fit:cover}.bubble-wrap{position:relative;max-width:min(86%,680px);display:flex;flex-direction:column}.row.mine .bubble-wrap{align-items:flex-end}.bubble{position:relative;padding:9px 12px;border-radius:18px;background:var(--val-message-background, transparent);border:1px solid var(--val-message-border, transparent);color:var(--ion-text-color, #000);font-size:.95rem;line-height:1.45;cursor:pointer;outline:none;word-break:break-word}.row:not(.mine).tail .bubble{border-bottom-left-radius:18px}.mine .bubble{background:var(--val-message-mine-background, var(--ion-color-dark, #111));border-color:var(--val-message-mine-border, var(--val-message-mine-background, var(--ion-color-dark, #111)));color:var(--val-message-mine-color, #fff)}.mine.tail .bubble{border-bottom-right-radius:18px}.bubble.deleted{background:transparent;border-style:dashed;cursor:default}.name{display:block;font-size:.75rem;font-weight:700;color:var(--ion-color-primary);margin-bottom:2px}.reply-preview{display:flex;flex-direction:column;gap:1px;padding:4px 8px;margin-bottom:4px;border-left:3px solid currentColor;border-radius:6px;background:var(--ion-color-step-100, rgba(127, 127, 127, .12));font-size:.8125rem;opacity:.85}.reply-name{font-weight:700}.reply-body{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px}.body{white-space:pre-wrap}.deleted-text{font-style:italic;opacity:.6}.attachments{display:flex;flex-direction:column;gap:4px;margin-bottom:4px}.att-image{max-width:100%;border-radius:10px;display:block;cursor:pointer}.audios{display:flex;flex-direction:column;gap:4px;margin-bottom:4px}.att-audio{width:240px;max-width:100%;height:40px}.files{display:flex;flex-direction:column;gap:4px;margin-bottom:4px}.file-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:8px;background:var(--ion-color-step-100, rgba(127, 127, 127, .12));color:inherit;text-decoration:none;font-size:.8125rem}.meta{display:inline-flex;align-items:center;gap:4px;float:right;margin:2px 0 -2px 8px;font-size:.6875rem;opacity:var(--val-message-meta-opacity, 0)}.edited{font-style:italic}.status{font-size:.875rem}.status.read{color:var(--ion-color-secondary, #4fc3f7);opacity:1}.status.failed{color:var(--ion-color-danger, #eb445a);opacity:1}.reactions{display:flex;flex-wrap:wrap;gap:4px;margin-top:3px}.reaction{display:inline-flex;align-items:center;gap:3px;padding:1px 7px;border-radius:999px;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));background:var(--ion-card-background, var(--ion-background-color, #fff));font-size:.75rem;cursor:pointer;color:var(--ion-text-color, #000)}.reaction.active{border-color:var(--ion-color-primary);background:var(--ion-color-primary-tint, var(--ion-color-primary));color:var(--ion-color-primary-contrast, #fff)}.reaction .count{opacity:.75}.actions{position:absolute;top:-14px;display:flex;gap:2px;padding:2px;border-radius:999px;background:var(--ion-card-background, var(--ion-background-color, #fff));border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));box-shadow:0 2px 8px #0000001f;opacity:0;pointer-events:none;transition:opacity .12s ease;z-index:2}.row.mine .actions{right:0}.row:not(.mine) .actions{left:0}.bubble-wrap:hover .actions,.actions.open{opacity:1;pointer-events:auto}.act{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;border-radius:50%;background:transparent;color:var(--ion-color-dark, #92949c);cursor:pointer;font-size:1rem}.act:hover{background:var(--ion-color-step-100, rgba(127, 127, 127, .12));color:var(--ion-text-color, #000)}.act.danger:hover{color:var(--ion-color-danger, #eb445a)}\n"] }]
+  `, styles: [":host{display:block}.row{display:flex;align-items:flex-end;gap:8px;margin:0}.row.mine{flex-direction:row-reverse}.row.tail{margin-bottom:8px}.avatar{width:28px;height:28px;border-radius:50%;overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--ion-color-primary);color:#fff;font-size:.6875rem;font-weight:700}.avatar.hidden{visibility:hidden}.avatar img{width:100%;height:100%;object-fit:cover}.bubble-wrap{position:relative;max-width:min(86%,680px);display:flex;flex-direction:column}.row.mine .bubble-wrap{align-items:flex-end}.bubble{position:relative;padding:9px 12px;border-radius:18px;background:var(--val-message-background, transparent);border:1px solid var(--val-message-border, transparent);color:var(--ion-text-color, #000);font-size:.95rem;line-height:1.45;cursor:pointer;outline:none;word-break:break-word}.row:not(.mine).tail .bubble{border-bottom-left-radius:18px}.mine .bubble{background:var(--val-message-mine-background, var(--ion-color-dark, #111));border-color:var(--val-message-mine-border, var(--val-message-mine-background, var(--ion-color-dark, #111)));color:var(--val-message-mine-color, #fff)}.mine.tail .bubble{border-bottom-right-radius:18px}.bubble.deleted{background:transparent;border-style:dashed;cursor:default}.name{display:block;font-size:.75rem;font-weight:700;color:var(--ion-color-primary);margin-bottom:2px}.reply-preview{display:flex;flex-direction:column;gap:1px;padding:4px 8px;margin-bottom:4px;border-left:3px solid currentColor;border-radius:6px;background:var(--ion-color-step-100, rgba(127, 127, 127, .12));font-size:.8125rem;opacity:.85}.reply-name{font-weight:700}.reply-body{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px}.body{white-space:pre-wrap}.deleted-text{font-style:italic;opacity:.6}.attachments{display:flex;flex-direction:column;gap:4px;margin-bottom:4px}.att-image{max-width:100%;border-radius:10px;display:block;cursor:pointer}.audios{display:flex;flex-direction:column;gap:4px;margin-bottom:4px}.att-audio{width:240px;max-width:100%;height:40px}.files{display:flex;flex-direction:column;gap:4px;margin-bottom:4px}.file-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:8px;background:var(--ion-color-step-100, rgba(127, 127, 127, .12));color:inherit;text-decoration:none;font-size:.8125rem}.meta{display:inline-flex;align-items:center;gap:4px;float:right;margin:2px 0 -2px 8px;font-size:.6875rem;opacity:var(--val-message-meta-opacity, 0)}.edited{font-style:italic}.status{font-size:.875rem}.status.read{color:var(--ion-color-secondary, #4fc3f7);opacity:1}.status.failed{color:var(--ion-color-danger, #eb445a);opacity:1}.reactions{display:flex;flex-wrap:wrap;gap:4px;margin-top:3px}.reaction{display:inline-flex;align-items:center;gap:3px;padding:1px 7px;border-radius:999px;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));background:var(--ion-card-background, var(--ion-background-color, #fff));font-size:.75rem;cursor:pointer;color:var(--ion-text-color, #000)}.reaction.active{border-color:var(--ion-color-primary);background:var(--ion-color-primary-tint, var(--ion-color-primary));color:var(--ion-color-primary-contrast, #fff)}.reaction .count{opacity:.75}.actions{position:absolute;top:-14px;display:flex;gap:2px;padding:2px;border-radius:999px;background:var(--ion-card-background, var(--ion-background-color, #fff));border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));box-shadow:0 2px 8px #0000001f;opacity:0;pointer-events:none;transition:opacity .12s ease;z-index:2}.row.mine .actions{right:0}.row:not(.mine) .actions{left:0}.actions.copy-only{inset:auto auto -14px 0}.row.mine .actions.copy-only{left:0;right:auto}.bubble-wrap:hover .actions,.actions.open{opacity:1;pointer-events:auto}.act{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;border-radius:50%;background:transparent;color:var(--ion-color-dark, #92949c);cursor:pointer;font-size:1rem}.act:hover{background:var(--ion-color-step-100, rgba(127, 127, 127, .12));color:var(--ion-text-color, #000)}.act.danger:hover{color:var(--ion-color-danger, #eb445a)}\n"] }]
         }], ctorParameters: () => [] });
 
 addIcons({ sendOutline });