@tylertech/forge-ai 0.15.3-dev.1 → 0.16.0-dev.0

package/dist/ai-chat-header/ai-chat-header2.mjs

@@ -0,0 +1,319 @@
+import __decorate from "../_virtual/_@oxc-project_runtime@0.154.0/helpers/esm/decorate.mjs";
+import "../core/tooltip/tooltip2.mjs";
+import "../ai-agent-info/ai-agent-info2.mjs";
+import "../ai-agent-selector/ai-agent-selector2.mjs";
+import "../ai-icon/ai-icon2.mjs";
+import "../ai-dropdown-menu/ai-dropdown-menu-separator2.mjs";
+import "../ai-dropdown-menu/ai-dropdown-menu-item2.mjs";
+import "../ai-dropdown-menu/ai-dropdown-menu2.mjs";
+import "../ai-modal/ai-modal2.mjs";
+import ai_chat_header_default from "./ai-chat-header.mjs";
+import { LitElement, html, unsafeCSS } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { when } from "lit/directives/when.js";
+import { createRef, ref } from "lit/directives/ref.js";
+import { html as html$1, unsafeStatic } from "lit/static-html.js";
+//#region src/lib/ai-chat-header/ai-chat-header.ts
+var AiChatHeaderComponentTagName = "forge-ai-chat-header";
+var AiChatHeaderComponent = class AiChatHeaderComponent extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.showExpandButton = false;
+		this.showMinimizeButton = false;
+		this.expanded = false;
+		this.minimizeIcon = "default";
+		this.options = "enabled";
+		this.exportOption = "enabled";
+		this.clearOption = "enabled";
+		this.headingLevel = 2;
+		this.titleText = "AI Assistant";
+		this.agents = [];
+		this.disableAgentSelector = false;
+		this.showConversationsButton = false;
+		this.hasConversationsError = false;
+		this.#agentInfoModalRef = createRef();
+		this._isTitleOverflowing = false;
+	}
+	static {
+		this.styles = unsafeCSS(ai_chat_header_default);
+	}
+	#agentInfoModalRef;
+	updated(changedProperties) {
+		if ((changedProperties.has("titleText") || changedProperties.has("headingLevel")) && this.agents.length === 0) this.#checkTitleOverflow();
+	}
+	get #hasAvailableOptions() {
+		return this.exportOption === "enabled" || this.clearOption === "enabled" || !!this.agentInfo;
+	}
+	get #titleElement() {
+		if (this.agents.length) return html`
+        <forge-ai-agent-selector
+          .agents=${this.agents}
+          .selectedAgentId=${this.selectedAgentId}
+          .titleText=${this.titleText}
+          ?disabled=${this.disableAgentSelector}
+          @forge-ai-agent-selector-change=${this.#handleAgentChange}>
+          <slot name="icon" slot="icon">
+            <forge-ai-icon></forge-ai-icon>
+          </slot>
+        </forge-ai-agent-selector>
+      `;
+		const tagName = unsafeStatic(`h${this.headingLevel}`);
+		return html$1`
+      <slot name="icon" slot="icon">
+        <forge-ai-icon></forge-ai-icon>
+      </slot>
+      <${tagName} class="title" id="title-container">${this.titleText}</${tagName}>
+      ${when(this._isTitleOverflowing, () => html`<forge-ai-tooltip for="title-container" placement="bottom">${this.titleText}</forge-ai-tooltip>`)}
+    `;
+	}
+	render() {
+		return html`
+      <div class="header">
+        <div class="start" id="title-container">
+          ${when(this.showConversationsButton, () => html`
+              <button
+                id="conversations-button"
+                @click=${this.#handleConversationsToggle}
+                aria-label=${this.hasConversationsError ? "Toggle conversations panel - Failed to load" : "Toggle conversations panel"}
+                class="conversations-button forge-icon-button forge-icon-button--medium ai-icon-button">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
+                  <path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z" />
+                </svg>
+                ${when(this.hasConversationsError, () => html`<span class="forge-badge forge-badge--dot conversations-button__error-badge"></span>`)}
+              </button>
+            `)}
+          ${this.#titleElement}
+          <slot name="thread-name"></slot>
+        </div>
+        <div class="end">
+          <slot name="header-actions"></slot>
+          ${when(this.showMinimizeButton, () => html`
+              <button
+                id="minimize-button"
+                @click=${this.#handleMinimizeClick}
+                aria-label="Minimize chat window"
+                class="forge-icon-button forge-icon-button--medium ai-icon-button">
+                ${when(this.minimizeIcon === "default", () => html`
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
+                      <path fill="none" d="M0 0h24v24H0z" />
+                      <path d="M6 19h12v2H6z" />
+                    </svg>
+                  `, () => html`
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
+                      <defs>
+                        <style>
+                          .cls-1 {
+                            fill: none;
+                          }
+                        </style>
+                      </defs>
+                      <path d="M0 0h24v24H0Z" class="cls-1" />
+                      <path d="M0 0h24v24H0Z" class="cls-1" />
+                      <path d="M0 0h24v24H0Z" class="cls-1" />
+                      <path d="M15.89 5H3v14h12.89ZM7.65 15.46l2.58-2.59H4.56v-2h5.67L7.65 8.28l1.41-1.41 5 5-5 5ZM17.89 4.98H21v14.04h-3.11z" class="cls-1" />
+                      <path d="M9.06 6.87 7.65 8.28l2.58 2.59H4.56v2h5.67l-2.58 2.59 1.41 1.41 5-5z" />
+                      <path d="M21 3H3a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2M3 5h12.89v14H3Zm18 14h-3.11V5H21Z" />
+                    </svg>
+                  `)}
+              </button>
+              <forge-ai-tooltip id="minimize-tooltip" for="minimize-button" placement="bottom"> Minimize chat to taskbar </forge-ai-tooltip>
+            `)}
+          ${when(this.showExpandButton, () => html`
+              <button
+                id="expand-button"
+                @click=${this.#handleExpandClick}
+                aria-label=${this.expanded ? "Collapse chat window" : "Expand chat window"}
+                class="forge-icon-button forge-icon-button--medium ai-icon-button">
+                ${when(this.expanded, () => html`
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
+                      <path d="M14 14h5v2h-3v3h-2zm-9 0h5v5H8v-3H5zm3-9h2v5H5V8h3zm11 3v2h-5V5h2v3z" />
+                    </svg>
+                  `, () => html`
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
+                      <path d="M5 5h5v2H7v3H5zm9 0h5v5h-2V7h-3zm3 9h2v5h-5v-2h3zm-7 3v2H5v-5h2v3z" />
+                    </svg>
+                  `)}
+              </button>
+              <forge-ai-tooltip id="expand-tooltip" for="expand-button" placement="bottom">
+                ${this.expanded ? "Collapse to smaller window" : "Expand to full window"}
+              </forge-ai-tooltip>
+            `)}
+          ${when(this.options === "enabled" && this.#hasAvailableOptions, () => html`
+              <forge-ai-dropdown-menu
+                variant="icon-button"
+                popover-placement="bottom-end"
+                selection-mode="none"
+                trigger-label="More options"
+                @forge-ai-dropdown-menu-change=${this.#handleDropdownChange}>
+                <svg slot="trigger-content" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" class="forge-icon ai-icon-button">
+                  <path fill="none" d="M0 0h24v24H0z" />
+                  <path
+                    d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2m0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2" />
+                </svg>
+                ${when(this.exportOption === "enabled", () => html`
+                    <forge-ai-dropdown-menu-item value="export">
+                      <svg slot="start" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="forge-icon" aria-hidden="true">
+                        <path d="m15.61 8.92 1.41-1.41-5-5-5 5 1.41 1.41 2.59-2.58v9.67h2V6.34z" />
+                        <path d="M19.05 14.06V19h-14v-4.94h-2V19a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-4.94z" />
+                      </svg>
+                      <span>Export current chat</span>
+                    </forge-ai-dropdown-menu-item>
+                  `)}
+                ${when(this.agentInfo, () => html`
+                    <forge-ai-dropdown-menu-item value="info">
+                      <svg slot="start" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="forge-icon" aria-hidden="true">
+                        <path fill="none" d="M0 0h24v24H0z" />
+                        <path
+                          d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8" />
+                      </svg>
+                      <span>Info</span>
+                    </forge-ai-dropdown-menu-item>
+                  `)}
+                ${when(this.clearOption === "enabled" && (this.agentInfo || this.exportOption === "enabled"), () => html`<forge-ai-dropdown-menu-separator></forge-ai-dropdown-menu-separator>`)}
+                ${when(this.clearOption === "enabled", () => html`
+                    <forge-ai-dropdown-menu-item value="clear-chat">
+                      <svg slot="start" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="forge-icon" aria-hidden="true">
+                        <path d="M6 19a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V7H6zM8 9h8v10H8zm7.5-5-1-1h-5l-1 1H5v2h14V4z" />
+                      </svg>
+                      <span>Clear chat</span>
+                    </forge-ai-dropdown-menu-item>
+                  `)}
+              </forge-ai-dropdown-menu>
+            `)}
+        </div>
+      </div>
+      ${when(this.agentInfo, () => html`
+          <forge-ai-modal ${ref(this.#agentInfoModalRef)} label="Agent Information">
+            <div class="forge-scaffold">
+              <div class="forge-scaffold__header">
+                <div class="forge-toolbar">
+                  <h2 class="forge-toolbar__start agent-info-title">Agent Information</h2>
+                  <div class="forge-toolbar__end">
+                    <button
+                      class="forge-icon-button forge-icon-button--medium ai-icon-button close-button"
+                      @click=${this.#handleModalClose}
+                      aria-label="Close agent information dialog">
+                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
+                        <path fill="none" d="M0 0h24v24H0z" />
+                        <path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
+                      </svg>
+                    </button>
+                  </div>
+                </div>
+              </div>
+              <div class="forge-scaffold__body">
+                <div class="agent-info-content">
+                  <forge-ai-agent-info .agentInfo=${this.agentInfo}></forge-ai-agent-info>
+                </div>
+              </div>
+              <div class="forge-scaffold__footer">
+                <div class="forge-toolbar forge-toolbar--inverted">
+                  <button class="forge-button forge-button--filled forge-toolbar__end" autofocus @click=${this.#handleModalClose}>Close</button>
+                </div>
+              </div>
+            </div>
+          </forge-ai-modal>
+        `)}
+    `;
+	}
+	#checkTitleOverflow() {
+		const titleElement = this.shadowRoot?.querySelector(".title");
+		if (titleElement) {
+			const isOverflowing = titleElement.scrollWidth > titleElement.offsetWidth;
+			if (this._isTitleOverflowing !== isOverflowing) this._isTitleOverflowing = isOverflowing;
+		}
+	}
+	#handleExpandClick() {
+		const event = new CustomEvent("forge-ai-chat-header-expand", {
+			bubbles: true,
+			composed: true
+		});
+		this.dispatchEvent(event);
+	}
+	#handleMinimizeClick() {
+		const event = new CustomEvent("forge-ai-chat-header-minimize", {
+			bubbles: true,
+			composed: true
+		});
+		this.dispatchEvent(event);
+	}
+	#handleDropdownChange(event) {
+		switch (event.detail.value) {
+			case "export":
+				this.dispatchEvent(new CustomEvent("forge-ai-chat-header-export", {
+					bubbles: true,
+					composed: true
+				}));
+				break;
+			case "info":
+				this.#agentInfoModalRef.value?.show();
+				break;
+			case "clear-chat": this.dispatchEvent(new CustomEvent("forge-ai-chat-header-clear", {
+				bubbles: true,
+				composed: true
+			}));
+		}
+	}
+	#handleModalClose() {
+		this.#agentInfoModalRef.value?.close();
+	}
+	#handleAgentChange(event) {
+		this.dispatchEvent(new CustomEvent("forge-ai-chat-header-agent-change", {
+			detail: event.detail,
+			bubbles: true,
+			composed: true
+		}));
+	}
+	#handleConversationsToggle() {
+		this.dispatchEvent(new CustomEvent("forge-ai-chat-header-conversations-toggle", {
+			bubbles: true,
+			composed: true
+		}));
+	}
+	/**
+	* Shows the agent info modal
+	*/
+	showAgentInfo() {
+		this.#agentInfoModalRef.value?.show();
+	}
+};
+__decorate([property({
+	type: Boolean,
+	attribute: "show-expand-button"
+})], AiChatHeaderComponent.prototype, "showExpandButton", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: "show-minimize-button"
+})], AiChatHeaderComponent.prototype, "showMinimizeButton", void 0);
+__decorate([property({ type: Boolean })], AiChatHeaderComponent.prototype, "expanded", void 0);
+__decorate([property({ attribute: "minimize-icon" })], AiChatHeaderComponent.prototype, "minimizeIcon", void 0);
+__decorate([property({
+	type: Object,
+	attribute: false
+})], AiChatHeaderComponent.prototype, "agentInfo", void 0);
+__decorate([property()], AiChatHeaderComponent.prototype, "options", void 0);
+__decorate([property({ attribute: "export-option" })], AiChatHeaderComponent.prototype, "exportOption", void 0);
+__decorate([property({ attribute: "clear-option" })], AiChatHeaderComponent.prototype, "clearOption", void 0);
+__decorate([property({
+	attribute: "heading-level",
+	type: Number
+})], AiChatHeaderComponent.prototype, "headingLevel", void 0);
+__decorate([property({ attribute: "title-text" })], AiChatHeaderComponent.prototype, "titleText", void 0);
+__decorate([property({ attribute: false })], AiChatHeaderComponent.prototype, "agents", void 0);
+__decorate([property({ attribute: "selected-agent-id" })], AiChatHeaderComponent.prototype, "selectedAgentId", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: "disable-agent-selector"
+})], AiChatHeaderComponent.prototype, "disableAgentSelector", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: "show-conversations-button"
+})], AiChatHeaderComponent.prototype, "showConversationsButton", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: "has-conversations-error"
+})], AiChatHeaderComponent.prototype, "hasConversationsError", void 0);
+__decorate([state()], AiChatHeaderComponent.prototype, "_isTitleOverflowing", void 0);
+AiChatHeaderComponent = __decorate([customElement(AiChatHeaderComponentTagName)], AiChatHeaderComponent);
+//#endregion
+export { AiChatHeaderComponent, AiChatHeaderComponentTagName };

package/dist/ai-chat-header/index.d.ts

@@ -1,2 +1,2 @@
-export { AiChatHeaderComponent, AiChatHeaderComponentTagName } from './ai-chat-header';
-export type { MinimizeIconType, ForgeAiChatHeaderAgentChangeEventData } from './ai-chat-header';
+export { AiChatHeaderComponent, AiChatHeaderComponentTagName } from './ai-chat-header.js';
+export type { MinimizeIconType, ForgeAiChatHeaderAgentChangeEventData } from './ai-chat-header.js';

package/dist/ai-chat-header/index.mjs

@@ -1,5 +1 @@
-import { AiChatHeaderComponent, AiChatHeaderComponentTagName } from "./ai-chat-header.mjs";
-export {
-  AiChatHeaderComponent,
-  AiChatHeaderComponentTagName
-};
+export { AiChatHeaderComponent, AiChatHeaderComponentTagName } from "./ai-chat-header2.mjs";

package/dist/ai-chat-interface/ai-chat-interface.d.ts

@@ -13,6 +13,7 @@ export declare const AiChatInterfaceComponentTagName: keyof HTMLElementTagNameMa
  * @slot suggestions - Slot for AI suggestions component
  * @slot attachments - Slot for file attachments component
  * @slot prompt - Slot for AI prompt component
+ * @slot disclaimer - Slot for disclaimer text shown below the prompt
  */
 export declare class AiChatInterfaceComponent extends LitElement {
     #private;

package/dist/ai-chat-interface/ai-chat-interface.mjs

@@ -1,103 +1,4 @@
-import { unsafeCSS, LitElement, html } from "lit";
-import { queryAssignedNodes, customElement } from "lit/decorators.js";
-import { when } from "lit/directives/when.js";
-import "../ai-gradient-container/ai-gradient-container.mjs";
-import styles from "./ai-chat-interface.scss.mjs";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __typeError = (msg) => {
-  throw TypeError(msg);
-};
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
-  return result;
-};
-var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
-var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _headerSlot, _attachmentsSlot, _suggestionsSlot, _AiChatInterfaceComponent_instances, suggestions_get, attachments_get, _promptSlot, prompt_get, messagesContainer_get, handleSlotChange_fn;
-const AiChatInterfaceComponentTagName = "forge-ai-chat-interface";
-let AiChatInterfaceComponent = class extends LitElement {
-  constructor() {
-    super(...arguments);
-    __privateAdd(this, _AiChatInterfaceComponent_instances);
-    __privateAdd(this, _headerSlot, html`<slot name="header" @slotchange=${__privateMethod(this, _AiChatInterfaceComponent_instances, handleSlotChange_fn)}></slot>`);
-    __privateAdd(this, _attachmentsSlot, html`<slot name="attachments" @slotchange=${__privateMethod(this, _AiChatInterfaceComponent_instances, handleSlotChange_fn)}></slot>`);
-    __privateAdd(this, _suggestionsSlot, html`<slot name="suggestions" @slotchange=${__privateMethod(this, _AiChatInterfaceComponent_instances, handleSlotChange_fn)}></slot>`);
-    __privateAdd(this, _promptSlot, html`<slot name="prompt" @slotchange=${__privateMethod(this, _AiChatInterfaceComponent_instances, handleSlotChange_fn)}></slot>`);
-  }
-  scrollToBottom() {
-    const container = this.shadowRoot?.querySelector(".messages-container");
-    container?.scrollTo({
-      top: container.scrollHeight,
-      behavior: "smooth"
-    });
-  }
-  render() {
-    return html`
-      <div class="ai-chat-interface">
-        ${__privateGet(this, _headerSlot)} ${__privateGet(this, _AiChatInterfaceComponent_instances, messagesContainer_get)} ${__privateGet(this, _AiChatInterfaceComponent_instances, suggestions_get)} ${__privateGet(this, _AiChatInterfaceComponent_instances, attachments_get)}
-        <div class="prompt-container">
-          ${__privateGet(this, _AiChatInterfaceComponent_instances, prompt_get)}
-          <slot name="disclaimer"></slot>
-        </div>
-      </div>
-    `;
-  }
-};
-_headerSlot = /* @__PURE__ */ new WeakMap();
-_attachmentsSlot = /* @__PURE__ */ new WeakMap();
-_suggestionsSlot = /* @__PURE__ */ new WeakMap();
-_AiChatInterfaceComponent_instances = /* @__PURE__ */ new WeakSet();
-suggestions_get = function() {
-  const hasSuggestions = this._slottedSuggestionsNodes.length > 0;
-  return when(
-    hasSuggestions,
-    () => html`<div class="suggestions-container">${__privateGet(this, _suggestionsSlot)}</div>`,
-    () => __privateGet(this, _suggestionsSlot)
-  );
-};
-attachments_get = function() {
-  const hasAttachments = this._slottedAttachmentsNodes.length > 0;
-  return when(
-    hasAttachments,
-    () => html`<div class="attachments-container">${__privateGet(this, _attachmentsSlot)}</div>`,
-    () => html`${__privateGet(this, _attachmentsSlot)}`
-  );
-};
-_promptSlot = /* @__PURE__ */ new WeakMap();
-prompt_get = function() {
-  return __privateGet(this, _promptSlot);
-};
-messagesContainer_get = function() {
-  return html`
-      <div class="messages-container" part="messages">
-        <slot @slotchange=${__privateMethod(this, _AiChatInterfaceComponent_instances, handleSlotChange_fn)}></slot>
-      </div>
-    `;
-};
-handleSlotChange_fn = function(evt) {
-  const slotName = evt.target.name;
-  if (["header", "suggestions", "prompt", "attachments"].includes(slotName)) {
-    this.requestUpdate();
-  }
-};
-AiChatInterfaceComponent.styles = unsafeCSS(styles);
-__decorateClass([
-  queryAssignedNodes({ slot: "suggestions", flatten: true })
-], AiChatInterfaceComponent.prototype, "_slottedSuggestionsNodes", 2);
-__decorateClass([
-  queryAssignedNodes({ slot: "attachments", flatten: true })
-], AiChatInterfaceComponent.prototype, "_slottedAttachmentsNodes", 2);
-AiChatInterfaceComponent = __decorateClass([
-  customElement(AiChatInterfaceComponentTagName)
-], AiChatInterfaceComponent);
-export {
-  AiChatInterfaceComponent,
-  AiChatInterfaceComponentTagName
-};
+//#region src/lib/ai-chat-interface/ai-chat-interface.scss?inline
+var ai_chat_interface_default = ":host {\n  display: block;\n  height: 100%;\n  border-radius: inherit;\n  overflow: hidden;\n  --_ai-chat-interface-message-container-padding: 0;\n}\n\n.ai-chat-interface {\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-font-smoothing: antialiased;\n  font-family: var(--forge-typography-body1-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));\n  font-size: var(--forge-typography-body1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, 0.875)));\n  font-weight: var(--forge-typography-body1-font-weight, 400);\n  line-height: var(--forge-typography-body1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.125)));\n  letter-spacing: var(--forge-typography-body1-letter-spacing, 0.0357142857em);\n  text-transform: var(--forge-typography-body1-text-transform, inherit);\n  text-decoration: var(--forge-typography-body1-text-decoration, inherit);\n  color: var(--forge-theme-on-surface, #000000);\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: linear-gradient(to top, var(--forge-theme-primary-container-minimum, #f7f8fc), var(--forge-theme-surface, #ffffff));\n  border-radius: inherit;\n  overflow: hidden;\n}\n\n.messages-container::-webkit-scrollbar {\n  height: var(--forge-scrollbar-height, 16px);\n  width: var(--forge-scrollbar-width, 16px);\n}\n.messages-container::-webkit-scrollbar-track {\n  background-color: var(--forge-scrollbar-track-container, var(--forge-theme-surface-container-low, #ebebeb));\n}\n.messages-container::-webkit-scrollbar-track:hover {\n  background-color: var(--forge-scrollbar-track-container-hover, var(--forge-theme-surface-container-low, #ebebeb));\n}\n.messages-container::-webkit-scrollbar-corner {\n  background-color: var(--forge-scrollbar-track-container, var(--forge-theme-surface-container-low, #ebebeb));\n}\n.messages-container::-webkit-scrollbar-thumb {\n  height: var(--forge-scrollbar-thumb-min-height, 32px);\n  width: var(--forge-scrollbar-thumb-min-width, 32px);\n  border-radius: var(--forge-scrollbar-border-radius, calc(var(--forge-shape-full, 9999px) * var(--forge-shape-factor, 1)));\n  border-width: var(--forge-scrollbar-border-width, 3px);\n  border-style: solid;\n  border-color: transparent;\n  background-color: var(--forge-scrollbar-thumb-container, var(--forge-theme-surface-container-medium, #c2c2c2));\n  background-clip: content-box;\n}\n.messages-container::-webkit-scrollbar-thumb:hover {\n  background-color: var(--forge-scrollbar-thumb-container-hover, var(--forge-theme-surface-container-high, #9e9e9e));\n}\n.messages-container {\n  padding: var(--forge-ai-chat-interface-message-container-padding, var(--_ai-chat-interface-message-container-padding));\n  overflow-y: auto;\n  display: grid;\n  flex-grow: 1;\n  gap: var(--forge-spacing-medium, 16px);\n}\n@media not all and (min-resolution: 0.001dpcm) {\n  @supports (-webkit-appearance: none) {\n    .messages-container {\n      overflow-y: scroll;\n    }\n  }\n}\n\n.suggestions-container {\n  padding-inline: var(--forge-spacing-medium, 16px);\n  padding-block-start: var(--forge-spacing-medium, 16px);\n}\n\n.attachments-container {\n  padding-block-end: var(--forge-spacing-medium, 16px);\n  padding: var(--forge-spacing-xsmall, 8px) var(--forge-spacing-medium, 16px) 0;\n}\n\n.prompt-container {\n  padding: var(--forge-spacing-medium, 16px);\n}";
+//#endregion
+export { ai_chat_interface_default as default };

package/dist/ai-chat-interface/ai-chat-interface2.mjs

@@ -0,0 +1,73 @@
+import __decorate from "../_virtual/_@oxc-project_runtime@0.154.0/helpers/esm/decorate.mjs";
+import "../ai-gradient-container/ai-gradient-container2.mjs";
+import ai_chat_interface_default from "./ai-chat-interface.mjs";
+import { LitElement, html, unsafeCSS } from "lit";
+import { customElement, queryAssignedNodes } from "lit/decorators.js";
+import { when } from "lit/directives/when.js";
+//#region src/lib/ai-chat-interface/ai-chat-interface.ts
+var AiChatInterfaceComponentTagName = "forge-ai-chat-interface";
+var AiChatInterfaceComponent = class AiChatInterfaceComponent extends LitElement {
+	static {
+		this.styles = unsafeCSS(ai_chat_interface_default);
+	}
+	#headerSlot = html`<slot name="header" @slotchange=${this.#handleSlotChange}></slot>`;
+	#attachmentsSlot = html`<slot name="attachments" @slotchange=${this.#handleSlotChange}></slot>`;
+	#suggestionsSlot = html`<slot name="suggestions" @slotchange=${this.#handleSlotChange}></slot>`;
+	get #suggestions() {
+		const hasSuggestions = this._slottedSuggestionsNodes.length > 0;
+		return when(hasSuggestions, () => html`<div class="suggestions-container">${this.#suggestionsSlot}</div>`, () => this.#suggestionsSlot);
+	}
+	get #attachments() {
+		const hasAttachments = this._slottedAttachmentsNodes.length > 0;
+		return when(hasAttachments, () => html`<div class="attachments-container">${this.#attachmentsSlot}</div>`, () => html`${this.#attachmentsSlot}`);
+	}
+	#promptSlot = html`<slot name="prompt" @slotchange=${this.#handleSlotChange}></slot>`;
+	get #prompt() {
+		return this.#promptSlot;
+	}
+	get #messagesContainer() {
+		return html`
+      <div class="messages-container" part="messages">
+        <slot @slotchange=${this.#handleSlotChange}></slot>
+      </div>
+    `;
+	}
+	#handleSlotChange(evt) {
+		const slotName = evt.target.name;
+		if ([
+			"header",
+			"suggestions",
+			"prompt",
+			"attachments"
+		].includes(slotName)) this.requestUpdate();
+	}
+	scrollToBottom() {
+		const container = this.shadowRoot?.querySelector(".messages-container");
+		container?.scrollTo({
+			top: container.scrollHeight,
+			behavior: "smooth"
+		});
+	}
+	render() {
+		return html`
+      <div class="ai-chat-interface">
+        ${this.#headerSlot} ${this.#messagesContainer} ${this.#suggestions} ${this.#attachments}
+        <div class="prompt-container">
+          ${this.#prompt}
+          <slot name="disclaimer"></slot>
+        </div>
+      </div>
+    `;
+	}
+};
+__decorate([queryAssignedNodes({
+	slot: "suggestions",
+	flatten: true
+})], AiChatInterfaceComponent.prototype, "_slottedSuggestionsNodes", void 0);
+__decorate([queryAssignedNodes({
+	slot: "attachments",
+	flatten: true
+})], AiChatInterfaceComponent.prototype, "_slottedAttachmentsNodes", void 0);
+AiChatInterfaceComponent = __decorate([customElement(AiChatInterfaceComponentTagName)], AiChatInterfaceComponent);
+//#endregion
+export { AiChatInterfaceComponent, AiChatInterfaceComponentTagName };

package/dist/ai-chat-interface/index.mjs

@@ -1,5 +1 @@
-import { AiChatInterfaceComponent, AiChatInterfaceComponentTagName } from "./ai-chat-interface.mjs";
-export {
-  AiChatInterfaceComponent,
-  AiChatInterfaceComponentTagName
-};
+export { AiChatInterfaceComponent, AiChatInterfaceComponentTagName } from "./ai-chat-interface2.mjs";

package/dist/ai-client-message/ai-client-message.d.ts

@@ -1,5 +1,5 @@
 import { LitElement, TemplateResult, CSSResult } from 'lit';
-import { ClientMessageAction, ClientMessageKind } from '../ai-chatbot/types.js';
+import { ClientMessageAction, ClientMessageKind } from '../types/index.js';
 declare global {
     interface HTMLElementTagNameMap {
         'forge-ai-client-message': AiClientMessageComponent;
@@ -9,13 +9,12 @@ export declare const AiClientMessageComponentTagName: keyof HTMLElementTagNameMa
 /**
  * @tag forge-ai-client-message
  *
- * @summary Renders a client-only status message (never sent to the agent adapter) as
- * either plain system-message text or a Forge inline-message banner, depending on `kind`.
+ * @summary A standalone message for client-side or system notices, rendered as either plain
+ * system-message text or a Forge inline-message banner, depending on `kind`.
  *
  * @description
- * Used internally by `forge-ai-message-thread` to render messages added via
- * `AiChatbotBase.addClientMessage()`. Not intended to be used standalone outside a
- * message thread, but exported for direct Storybook/testing use.
+ * Use to show notices such as status, warnings or errors in a conversation. Supports optional
+ * header, content and action buttons.
  */
 export declare class AiClientMessageComponent extends LitElement {
     #private;