@cognivo/components 0.8.0

package/dist/components/ai-chat/ai-chat.js

@@ -0,0 +1,707 @@
+import { css as p, LitElement as u, html as n, nothing as d } from "lit";
+import { property as g, state as h, query as m, customElement as v } from "lit/decorators.js";
+import { h as _, r as b } from "../../chunks/premium.css-9I4kHrsl.js";
+var f = Object.defineProperty, y = Object.getOwnPropertyDescriptor, o = (t, e, i, s) => {
+  for (var r = s > 1 ? void 0 : s ? y(e, i) : e, c = t.length - 1, l; c >= 0; c--)
+    (l = t[c]) && (r = (s ? l(e, i, r) : l(r)) || r);
+  return s && r && f(e, i, r), r;
+};
+let a = class extends u {
+  constructor() {
+    super(...arguments), this.rounded = "lg", this.aiClient = null, this.chatDataset = [], this.showActions = !0, this.showFollowUps = !0, this.welcomeMessage = "Ask me about your data!", this.placeholder = "Type a message...", this.maxMessages = 100, this.intent = "chat", this.useStreaming = !1, this.showVoice = !1, this.voiceLanguage = "en-US", this._messages = [], this._isRecording = !1, this._input = "", this._isStreaming = !1, this._isThinking = !1, this._isComposing = !1, this._showScrollBtn = !1, this._copiedId = null, this._followUps = [], this._streamingContent = "", this._msgCounter = 0, this._abortController = null, this._recognition = null;
+  }
+  _genId() {
+    return `msg-${++this._msgCounter}`;
+  }
+  // ── Voice input ──
+  _getSpeechRecognition() {
+    return typeof window > "u" ? null : window.SpeechRecognition || window.webkitSpeechRecognition || null;
+  }
+  _toggleVoice() {
+    this._isRecording ? this._stopVoice() : this._startVoice();
+  }
+  _startVoice() {
+    const t = this._getSpeechRecognition();
+    if (!t) return;
+    this._stopVoice();
+    const e = new t();
+    e.lang = this.voiceLanguage, e.continuous = !1, e.interimResults = !0, e.onstart = () => {
+      this._isRecording = !0;
+    }, e.onresult = (i) => {
+      let s = "", r = "";
+      for (let c = i.resultIndex; c < i.results.length; c++) {
+        const l = i.results[c];
+        l && (l.isFinal ? r += l[0]?.transcript ?? "" : s += l[0]?.transcript ?? "");
+      }
+      if (r)
+        this._input = (this._input ? this._input + " " : "") + r.trim();
+      else if (s) {
+        const c = this.shadowRoot?.querySelector("textarea");
+        c && (c.placeholder = s + "...");
+      }
+    }, e.onend = () => {
+      this._isRecording = !1, this._recognition = null;
+      const i = this.shadowRoot?.querySelector("textarea");
+      i && (i.placeholder = this.placeholder);
+    }, e.onerror = () => {
+      this._isRecording = !1, this._recognition = null;
+    }, this._recognition = e;
+    try {
+      e.start();
+    } catch {
+      this._isRecording = !1;
+    }
+  }
+  _stopVoice() {
+    if (this._recognition) {
+      try {
+        this._recognition.stop();
+      } catch {
+      }
+      this._recognition = null;
+    }
+    this._isRecording = !1;
+  }
+  disconnectedCallback() {
+    if (super.disconnectedCallback(), this._stopVoice(), this._copyResetTimer && (clearTimeout(this._copyResetTimer), this._copyResetTimer = void 0), this._abortController) {
+      try {
+        this._abortController.abort();
+      } catch {
+      }
+      this._abortController = null;
+    }
+  }
+  _scrollToBottom() {
+    requestAnimationFrame(() => {
+      this._messagesEl && (this._messagesEl.scrollTop = this._messagesEl.scrollHeight);
+    });
+  }
+  _handleScroll() {
+    if (!this._messagesEl) return;
+    const { scrollTop: t, scrollHeight: e, clientHeight: i } = this._messagesEl;
+    this._showScrollBtn = e - t - i > 100;
+  }
+  /** Build conversation history for AI context */
+  _buildHistory() {
+    return this._messages.map((t) => ({
+      role: t.role,
+      content: t.versions[t.activeVersion]?.content ?? ""
+    }));
+  }
+  /** Enforce maxMessages limit by trimming oldest messages */
+  _trimMessages() {
+    this._messages.length > this.maxMessages && (this._messages = this._messages.slice(this._messages.length - this.maxMessages));
+  }
+  /** Add a message programmatically from outside the component */
+  addMessage(t, e) {
+    const i = this._genId();
+    return this._messages = [...this._messages, {
+      id: i,
+      role: t,
+      versions: [{ content: e, timestamp: Date.now() }],
+      activeVersion: 0
+    }], this._trimMessages(), this._scrollToBottom(), i;
+  }
+  /** Clear all messages */
+  clearMessages() {
+    this._messages = [], this._followUps = [], this._streamingContent = "";
+  }
+  async _sendMessage() {
+    if (!this._input.trim() || !this.aiClient || this._isStreaming || this._isThinking) return;
+    const t = this._input.trim();
+    this._input = "", this._followUps = [];
+    const e = this.shadowRoot?.querySelector(".input-box textarea");
+    e && (e.value = "", e.style.height = "auto"), this._messages = [...this._messages, {
+      id: this._genId(),
+      role: "user",
+      versions: [{ content: t, timestamp: Date.now() }],
+      activeVersion: 0
+    }], this._trimMessages(), this.dispatchEvent(new CustomEvent("ai-message-sent", {
+      bubbles: !0,
+      composed: !0,
+      detail: { message: t, timestamp: Date.now() }
+    })), await this.updateComplete, this._scrollToBottom(), this._isThinking = !0, this._abortController = new AbortController();
+    const i = {
+      dataset: this.chatDataset.length > 0 ? this.chatDataset : [{ info: "No data provided" }],
+      meta: {
+        userQuestion: t,
+        conversationHistory: JSON.stringify(this._buildHistory())
+      }
+    };
+    try {
+      this.useStreaming && this.aiClient.streamIntent ? await this._sendStreaming(i) : await this._sendNonStreaming(i);
+    } catch (s) {
+      if (this._abortController?.signal.aborted) return;
+      this._isThinking = !1, this._isStreaming = !1;
+      const r = s instanceof Error ? s.message : "An error occurred";
+      this._messages = [...this._messages, {
+        id: this._genId(),
+        role: "ai",
+        versions: [{ content: r, timestamp: Date.now() }],
+        activeVersion: 0,
+        isError: !0
+      }], this._trimMessages(), this.dispatchEvent(new CustomEvent("ai-error", {
+        bubbles: !0,
+        composed: !0,
+        detail: { error: r, timestamp: Date.now() }
+      }));
+    } finally {
+      this._isStreaming = !1, this._isThinking = !1, this._abortController = null, await this.updateComplete, this._scrollToBottom();
+    }
+  }
+  async _sendNonStreaming(t) {
+    const e = { signal: this._abortController.signal }, i = await this.aiClient.runIntent(
+      this.intent,
+      t,
+      e
+    );
+    this._isThinking = !1;
+    const s = String(
+      i.explanation || i.metadata?.content || i.metadata?.text || "Analysis complete."
+    );
+    this._messages = [...this._messages, {
+      id: this._genId(),
+      role: "ai",
+      versions: [{ content: s, timestamp: Date.now() }],
+      activeVersion: 0
+    }], this._trimMessages(), this.dispatchEvent(new CustomEvent("ai-response-received", {
+      bubbles: !0,
+      composed: !0,
+      detail: { message: s, timestamp: Date.now() }
+    }));
+  }
+  async _sendStreaming(t) {
+    this._isThinking = !1, this._isStreaming = !0, this._streamingContent = "";
+    const e = "msg-stream";
+    this._messages = [...this._messages, {
+      id: e,
+      role: "ai",
+      versions: [{ content: "", timestamp: Date.now() }],
+      activeVersion: 0
+    }];
+    const i = { signal: this._abortController.signal }, s = this.aiClient.streamIntent(
+      this.intent,
+      t,
+      i
+    );
+    for await (const r of s) {
+      if (this._abortController?.signal.aborted) break;
+      const c = String(r.explanation || r.metadata?.content || r.metadata?.text || "");
+      this._streamingContent += c, this._messages = this._messages.map(
+        (l) => l.id === e ? { ...l, versions: [{ content: this._streamingContent, timestamp: Date.now() }] } : l
+      ), this._scrollToBottom();
+    }
+    this.completeStream();
+  }
+  /** Append streaming content to a new or existing AI message (for external streaming control) */
+  streamResponse(t) {
+    this._isStreaming = !0, this._isThinking = !1, this._streamingContent += t;
+    const e = "msg-stream";
+    this._messages.some((s) => s.id === e) ? this._messages = this._messages.map(
+      (s) => s.id === e ? { ...s, versions: [{ content: this._streamingContent, timestamp: Date.now() }] } : s
+    ) : this._messages = [...this._messages, {
+      id: e,
+      role: "ai",
+      versions: [{ content: this._streamingContent, timestamp: Date.now() }],
+      activeVersion: 0
+    }], this._scrollToBottom();
+  }
+  /** Complete streaming */
+  completeStream(t) {
+    this._isStreaming = !1;
+    const e = this._genId();
+    this._messages = this._messages.map(
+      (s) => s.id === "msg-stream" ? { ...s, id: e } : s
+    ), this._trimMessages();
+    const i = this._messages[this._messages.length - 1];
+    this._streamingContent = "", t && (this._followUps = t), this.dispatchEvent(new CustomEvent("ai-response-received", {
+      bubbles: !0,
+      composed: !0,
+      detail: { message: i?.versions[0]?.content ?? "", timestamp: Date.now() }
+    }));
+  }
+  /** Export conversation as markdown */
+  exportConversation() {
+    return this._messages.map((t) => {
+      const e = t.versions[t.activeVersion];
+      return `**${t.role === "user" ? "User" : "AI"}:** ${e.content}`;
+    }).join(`
+
+`);
+  }
+  _handleStop() {
+    this._abortController?.abort(), this._isStreaming = !1, this._isThinking = !1, this.dispatchEvent(new CustomEvent("ai-chat-stop", { bubbles: !0, composed: !0 }));
+  }
+  _handleCopy(t) {
+    const e = t.versions[t.activeVersion].content;
+    navigator.clipboard?.writeText(e), this._copiedId = t.id, this._copyResetTimer && clearTimeout(this._copyResetTimer), this._copyResetTimer = setTimeout(() => {
+      this._copiedId = null, this._copyResetTimer = void 0;
+    }, 2e3), this.dispatchEvent(new CustomEvent("ai-chat-copy", {
+      bubbles: !0,
+      composed: !0,
+      detail: { content: e }
+    }));
+  }
+  _handleRegenerate(t) {
+    this.dispatchEvent(new CustomEvent("ai-chat-regenerate", {
+      bubbles: !0,
+      composed: !0,
+      detail: { messageId: t.id }
+    }));
+  }
+  _handleRate(t, e) {
+    this.dispatchEvent(new CustomEvent("ai-chat-rate", {
+      bubbles: !0,
+      composed: !0,
+      detail: { messageId: t.id, rating: e }
+    }));
+  }
+  _handleFollowUp(t) {
+    this._input = t, this._followUps = [], this._sendMessage();
+  }
+  _switchVersion(t, e) {
+    const i = t.activeVersion + e;
+    i >= 0 && i < t.versions.length && (this._messages = this._messages.map(
+      (s) => s.id === t.id ? { ...s, activeVersion: i } : s
+    ));
+  }
+  _handleKeyDown(t) {
+    t.key === "Enter" && !t.shiftKey && !this._isComposing && (t.preventDefault(), this._sendMessage());
+  }
+  render() {
+    return this.aiClient ? n`
+      <div class="chat">
+        <div class="wrapper">
+          <div class="messages" role="log" aria-live="polite" aria-label="Chat messages" @scroll=${this._handleScroll}>
+            ${this._messages.length === 0 && !this._isThinking ? n`
+              <div class="empty">
+                <cg-icon name="chat" size="lg"></cg-icon>
+                <div class="empty-text">${this.welcomeMessage}</div>
+              </div>
+            ` : this._messages.map((t) => {
+      const e = t.versions[t.activeVersion];
+      return n`
+                <div class="msg ${t.role}" role="article" aria-label="${t.role === "user" ? "Your message" : "AI response"}">
+                  <div class="msg-content">
+                    <div class="bubble ${t.isError ? "error" : ""}">
+                      ${t.role === "ai" && !t.isError ? n`<cg-markdown .text=${e.content}></cg-markdown>` : e.content}
+                      ${this._isStreaming && t.id === "msg-stream" ? n`<span class="cursor" aria-hidden="true"></span>` : d}
+                    </div>
+
+                    ${t.role === "ai" && this.showActions && !this._isStreaming ? n`
+                      <div class="actions">
+                        <cg-button variant="tertiary" size="sm"
+                          status=${this._copiedId === t.id ? "success" : "idle"}
+                          @click=${() => this._handleCopy(t)}
+                          aria-label=${this._copiedId === t.id ? "Copied to clipboard" : "Copy message"}>
+                          <cg-icon slot="prefix" name=${this._copiedId === t.id ? "check" : "copy"} size="xs"></cg-icon>
+                          ${this._copiedId === t.id ? "Copied" : "Copy"}
+                        </cg-button>
+                        <cg-button variant="tertiary" size="sm" @click=${() => this._handleRegenerate(t)} aria-label="Regenerate response">
+                          <cg-icon slot="prefix" name="refresh" size="xs"></cg-icon> Retry
+                        </cg-button>
+                        <cg-button variant="tertiary" size="sm" @click=${() => this._handleRate(t, "up")} aria-label="Rate good">
+                          <cg-icon name="star" size="xs"></cg-icon>
+                        </cg-button>
+                        <cg-button variant="tertiary" size="sm" @click=${() => this._handleRate(t, "down")} aria-label="Rate bad">
+                          <cg-icon name="warning" size="xs"></cg-icon>
+                        </cg-button>
+                      </div>
+                    ` : d}
+
+                    ${t.versions.length > 1 ? n`
+                      <nav class="version-nav" aria-label="Message versions">
+                        <cg-button variant="tertiary" size="sm" ?disabled=${t.activeVersion === 0} @click=${() => this._switchVersion(t, -1)} aria-label="Previous version">
+                          <cg-icon name="chevron-left" size="xs"></cg-icon>
+                        </cg-button>
+                        <span class="version-label">${t.activeVersion + 1} / ${t.versions.length}</span>
+                        <cg-button variant="tertiary" size="sm" ?disabled=${t.activeVersion === t.versions.length - 1} @click=${() => this._switchVersion(t, 1)} aria-label="Next version">
+                          <cg-icon name="chevron-right" size="xs"></cg-icon>
+                        </cg-button>
+                      </nav>
+                    ` : d}
+                  </div>
+                </div>
+              `;
+    })}
+
+            ${this._isThinking ? n`
+              <div class="thinking-area" role="status" aria-label="AI is thinking">
+                <ai-thinking text="Analyzing" shimmer delay="0"></ai-thinking>
+              </div>
+            ` : d}
+          </div>
+
+          ${this._showScrollBtn ? n`
+            <cg-button class="scroll-btn" variant="secondary" size="sm" rounded="full"
+              @click=${this._scrollToBottom} aria-label="Scroll to bottom">
+              <cg-icon name="arrow-down" size="xs"></cg-icon>
+            </cg-button>
+          ` : d}
+
+          ${this._isStreaming || this._isThinking ? n`
+            <cg-button class="stop-btn" type="danger" size="sm" @click=${this._handleStop} aria-label="Stop generating">
+              <cg-icon slot="prefix" name="close" size="xs"></cg-icon> Stop generating
+            </cg-button>
+          ` : d}
+
+          ${this._followUps.length > 0 && this.showFollowUps ? n`
+            <cg-follow-up
+              class="follow-ups"
+              .items=${this._followUps}
+              hideLabel
+              variant="chips"
+              ?disabled=${this._isStreaming || this._isThinking}
+              @cg-follow-up-click=${(t) => this._handleFollowUp(t.detail.text)}
+            ></cg-follow-up>
+          ` : d}
+        </div>
+
+        <div class="input-area">
+          <div class="input-box">
+            <textarea
+              rows="1"
+              placeholder=${this.placeholder}
+              .value=${this._input}
+              ?disabled=${this._isStreaming || this._isThinking}
+              @input=${(t) => {
+      const e = t.target;
+      this._input = e.value, e.style.height = "auto", e.style.height = e.scrollHeight + "px";
+    }}
+              @keydown=${this._handleKeyDown}
+              @compositionstart=${() => this._isComposing = !0}
+              @compositionend=${() => this._isComposing = !1}
+              aria-label="Chat message"
+            ></textarea>
+            ${this.showVoice && this._getSpeechRecognition() ? n`
+              <button
+                class="icon-btn mic-btn ${this._isRecording ? "recording" : ""}"
+                @click=${this._toggleVoice}
+                ?disabled=${this._isStreaming || this._isThinking}
+                aria-label="${this._isRecording ? "Stop voice input" : "Start voice input"}"
+                aria-pressed="${this._isRecording ? "true" : "false"}"
+              >
+                <cg-icon name=${this._isRecording ? "close" : "mic"} size="sm"></cg-icon>
+              </button>
+            ` : d}
+            <button
+              class="icon-btn send-btn"
+              @click=${this._sendMessage}
+              ?disabled=${this._isStreaming || this._isThinking || !this._input.trim()}
+              aria-label="Send message"
+            >
+              <cg-icon name="arrow-up" size="sm"></cg-icon>
+            </button>
+          </div>
+        </div>
+      </div>
+    ` : n`
+        <div class="chat">
+          <div class="empty" role="status">
+            <cg-icon name="settings" size="lg"></cg-icon>
+            <div class="empty-text">Set <code>aiClient</code> to start chatting</div>
+          </div>
+        </div>
+      `;
+  }
+};
+a.styles = [_, b, p`
+    .chat {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      min-height: var(--cg-component-ai-chat-min-height);
+      max-height: var(--cg-component-ai-chat-max-height);
+      background: var(--cg-color-surface-cards-background);
+      border-radius: var(--cg-component-ai-chat-radius);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      overflow: hidden;
+    }
+
+    .wrapper { position: relative; display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
+
+    /* ── Messages ── */
+    .messages {
+      flex: 1;
+      overflow-y: auto;
+      padding: var(--cg-spacing-24);
+      display: flex;
+      flex-direction: column;
+      gap: var(--cg-spacing-16);
+      scroll-behavior: smooth;
+    }
+
+    .msg {
+      max-width: 85%;
+      animation: slideIn var(--cg-transition-duration-slow) var(--cg-transition-easing-default);
+    }
+    .msg.user { align-self: flex-end; }
+    .msg.ai { align-self: flex-start; }
+
+    @keyframes slideIn {
+      from { opacity: 0; transform: translateY(var(--cg-spacing-8)); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+
+    /* ── Bubble ── */
+    .bubble {
+      padding: var(--cg-spacing-12) var(--cg-spacing-20);
+      border-radius: var(--cg-border-radius-200);
+      line-height: var(--cg-line-height-relaxed);
+      font-size: var(--cg-font-size-sm);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+    }
+    .msg.user .bubble {
+      background: var(--cg-overlay-accent-subtle);
+      color: var(--cg-color-surface-base-text);
+      border-bottom-right-radius: var(--cg-spacing-4);
+      border-color: var(--cg-overlay-accent-medium);
+    }
+    .msg.ai .bubble {
+      background: var(--cg-color-surface-cards-background);
+      color: var(--cg-color-surface-base-text);
+      border-bottom-left-radius: var(--cg-spacing-4);
+    }
+    .msg.ai .bubble.error {
+      background: var(--cg-color-status-error-background-default);
+      color: var(--cg-color-status-error-text-default);
+      border-color: var(--cg-color-status-error-border-default);
+    }
+
+    /* ── Streaming cursor ── */
+    .cursor {
+      display: inline-block;
+      width: var(--cg-spacing-2);
+      height: var(--cg-spacing-16);
+      background: var(--cg-color-action-primary-background-default);
+      margin-left: var(--cg-spacing-1);
+      vertical-align: text-bottom;
+      animation: blink 1s step-end infinite;
+    }
+    @keyframes blink {
+      0%, 50% { opacity: 1; }
+      51%, 100% { opacity: 0; }
+    }
+
+    /* ── Message actions (layout only — buttons are cg-button) ── */
+    .actions {
+      display: flex;
+      gap: var(--cg-spacing-4);
+      margin-top: var(--cg-spacing-6);
+      opacity: 0;
+      transition: opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .msg:hover .actions, .msg:focus-within .actions { opacity: 1; }
+
+    /* ── Version nav ── */
+    .version-nav {
+      display: flex;
+      align-items: center;
+      gap: var(--cg-spacing-4);
+      margin-top: var(--cg-spacing-4);
+    }
+    .version-label {
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-surface-container-outlined);
+    }
+
+    /* ── Thinking ── */
+    .thinking-area {
+      align-self: flex-start;
+      padding: 0 var(--cg-spacing-20) var(--cg-spacing-4);
+    }
+
+    /* ── Positioned elements ── */
+    .stop-btn { margin: 0 auto var(--cg-spacing-8); }
+    .scroll-btn { position: absolute; bottom: var(--cg-spacing-80); right: var(--cg-spacing-20); z-index: 10; }
+    .follow-ups { padding: 0 var(--cg-spacing-20) var(--cg-spacing-12); }
+
+    /* ── Input area — fused container like ChatGPT/Claude ── */
+    .input-area {
+      padding: var(--cg-spacing-12) var(--cg-spacing-16);
+      flex-shrink: 0;
+    }
+    .input-box {
+      display: flex;
+      align-items: flex-end;
+      gap: var(--cg-spacing-8);
+      padding: var(--cg-spacing-8) var(--cg-spacing-8) var(--cg-spacing-8) var(--cg-spacing-16);
+      background: var(--cg-color-input-background-default);
+      border: var(--cg-border-width-50) solid var(--cg-color-input-border-default);
+      border-radius: var(--cg-border-radius-200);
+      transition:
+        border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        box-shadow var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .input-box:focus-within {
+      border-color: var(--cg-color-input-border-focus);
+      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);
+    }
+    .input-box textarea {
+      flex: 1;
+      border: none;
+      outline: none;
+      background: transparent;
+      color: var(--cg-color-input-text-default);
+      font: inherit;
+      font-size: var(--cg-font-size-sm);
+      line-height: var(--cg-line-height-relaxed);
+      resize: none;
+      padding: var(--cg-spacing-4) 0;
+      min-height: var(--cg-spacing-24);
+      max-height: var(--cg-component-ai-chat-textarea-max-height);
+    }
+    .input-box textarea::placeholder {
+      color: var(--cg-color-input-text-placeholder);
+    }
+    /* Shared icon button style for send + mic */
+    .icon-btn {
+      flex-shrink: 0;
+      width: var(--cg-spacing-32);
+      height: var(--cg-spacing-32);
+      border-radius: var(--cg-border-radius-full);
+      border: none;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition:
+        background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .icon-btn:active:not(:disabled) { transform: scale(var(--cg-interaction-press-scale)); }
+    .icon-btn:disabled { opacity: 0.3; cursor: default; }
+
+    .send-btn {
+      background: var(--cg-color-action-primary-background-default);
+      color: var(--cg-color-action-primary-text-default);
+    }
+    .send-btn:hover:not(:disabled) {
+      background: var(--cg-color-action-primary-background-hover);
+    }
+
+    .mic-btn {
+      background: transparent;
+      color: var(--cg-color-input-text-placeholder);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+    }
+    .mic-btn:hover:not(:disabled) {
+      color: var(--cg-color-surface-base-text);
+      border-color: var(--cg-color-input-border-hover);
+    }
+    .mic-btn.recording {
+      color: var(--cg-color-status-error-text-default);
+      border-color: var(--cg-color-status-error-text-default);
+      background: var(--cg-color-status-error-background-default);
+      animation: micPulse 1.5s ease-in-out infinite;
+    }
+    @keyframes micPulse {
+      0%, 100% { opacity: 1; }
+      50% { opacity: 0.6; }
+    }
+
+    /* ── Empty state ── */
+    .empty {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      color: var(--cg-color-surface-container-outlined);
+      gap: var(--cg-spacing-12);
+      text-align: center;
+    }
+    .empty-text {
+      font-size: var(--cg-font-size-base);
+      font-weight: var(--cg-font-weight-medium);
+    }
+
+    /* ── Rounded variants ── */
+    :host([rounded="none"]) .chat { border-radius: 0; }
+    :host([rounded="sm"]) .chat { border-radius: var(--cg-border-radius-100); }
+    :host([rounded="md"]) .chat { border-radius: var(--cg-border-radius-150); }
+    :host([rounded="lg"]) .chat { border-radius: var(--cg-component-ai-chat-radius); }
+
+    /* Reduced motion */
+    @media (prefers-reduced-motion: reduce) {
+      .msg { animation: none; }
+      .cursor { animation: none; opacity: 1; }
+    }
+  `];
+o([
+  g({ reflect: !0 })
+], a.prototype, "rounded", 2);
+o([
+  g({ type: Object })
+], a.prototype, "aiClient", 2);
+o([
+  g({ type: Array })
+], a.prototype, "chatDataset", 2);
+o([
+  g({ type: Boolean })
+], a.prototype, "showActions", 2);
+o([
+  g({ type: Boolean })
+], a.prototype, "showFollowUps", 2);
+o([
+  g({ type: String })
+], a.prototype, "welcomeMessage", 2);
+o([
+  g({ type: String })
+], a.prototype, "placeholder", 2);
+o([
+  g({ type: Number })
+], a.prototype, "maxMessages", 2);
+o([
+  g({ type: String })
+], a.prototype, "intent", 2);
+o([
+  g({ type: Boolean })
+], a.prototype, "useStreaming", 2);
+o([
+  g({ type: Boolean })
+], a.prototype, "showVoice", 2);
+o([
+  g({ type: String })
+], a.prototype, "voiceLanguage", 2);
+o([
+  h()
+], a.prototype, "_messages", 2);
+o([
+  h()
+], a.prototype, "_isRecording", 2);
+o([
+  h()
+], a.prototype, "_input", 2);
+o([
+  h()
+], a.prototype, "_isStreaming", 2);
+o([
+  h()
+], a.prototype, "_isThinking", 2);
+o([
+  h()
+], a.prototype, "_isComposing", 2);
+o([
+  h()
+], a.prototype, "_showScrollBtn", 2);
+o([
+  h()
+], a.prototype, "_copiedId", 2);
+o([
+  h()
+], a.prototype, "_followUps", 2);
+o([
+  h()
+], a.prototype, "_streamingContent", 2);
+o([
+  m(".messages")
+], a.prototype, "_messagesEl", 2);
+a = o([
+  v("ai-chat")
+], a);
+export {
+  a as AiChat
+};
+//# sourceMappingURL=ai-chat.js.map