@tylertech/forge-ai 0.4.1 → 0.6.0

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

@@ -2,8 +2,6 @@ import { unsafeCSS, LitElement, html } from "lit";
 import { property, state, customElement } from "lit/decorators.js";
 import { createRef, ref } from "lit/directives/ref.js";
 import "../ai-dialog/ai-dialog.mjs";
-import "../ai-chat-interface/ai-chat-interface.mjs";
-import "../ai-chat-header/ai-chat-header.mjs";
 import styles from "./ai-floating-chat.scss.mjs";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -22,7 +20,7 @@ var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot
 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 _dialogRef, _AiFloatingChatComponent_instances, handleFullscreenChange_fn, handleHeaderExpand_fn, handleHeaderMinimize_fn, handleDialogClose_fn, dispatchEvent_fn;
+var _dialogRef, _AiFloatingChatComponent_instances, handleFullscreenChange_fn, handleChatbotExpand_fn, handleChatbotMinimize_fn, handleDialogClose_fn, dispatchEvent_fn;
 const AiFloatingChatComponentTagName = "forge-ai-floating-chat";
 let AiFloatingChatComponent = class extends LitElement {
   constructor() {
@@ -30,14 +28,9 @@ let AiFloatingChatComponent = class extends LitElement {
     __privateAdd(this, _AiFloatingChatComponent_instances);
     this.open = false;
     this.expanded = false;
-    this._isFullscreen = false;
+    this._userExpanded = false;
     __privateAdd(this, _dialogRef, createRef());
   }
-  updated() {
-    if (__privateGet(this, _dialogRef).value && this._isFullscreen !== __privateGet(this, _dialogRef).value.isFullscreen) {
-      this._isFullscreen = __privateGet(this, _dialogRef).value.isFullscreen;
-    }
-  }
   render() {
     return html`
       <forge-ai-dialog
@@ -46,33 +39,16 @@ let AiFloatingChatComponent = class extends LitElement {
         ?expanded=${this.expanded}
         @forge-ai-dialog-fullscreen-change=${__privateMethod(this, _AiFloatingChatComponent_instances, handleFullscreenChange_fn)}
         @forge-ai-dialog-close=${__privateMethod(this, _AiFloatingChatComponent_instances, handleDialogClose_fn)}>
-        <forge-ai-chat-interface>
-          <forge-ai-chat-header
-            slot="header"
-            @forge-ai-chat-header-expand=${__privateMethod(this, _AiFloatingChatComponent_instances, handleHeaderExpand_fn)}
-            @forge-ai-chat-header-minimize=${__privateMethod(this, _AiFloatingChatComponent_instances, handleHeaderMinimize_fn)}
-            ?show-expand-button=${!this._isFullscreen}
-            show-minimize-button
-            minimize-icon="default"
-            ?expanded=${this.expanded}>
-          </forge-ai-chat-header>
-          <slot></slot>
-          <slot name="suggestions" slot="suggestions"></slot>
-          <slot name="prompt" slot="prompt"></slot>
-        </forge-ai-chat-interface>
+        <slot
+          @forge-ai-chatbot-expand=${__privateMethod(this, _AiFloatingChatComponent_instances, handleChatbotExpand_fn)}
+          @forge-ai-chatbot-minimize=${__privateMethod(this, _AiFloatingChatComponent_instances, handleChatbotMinimize_fn)}></slot>
       </forge-ai-dialog>
     `;
   }
-  /**
-   * Opens the chat.
-   */
   show() {
     this.open = true;
     __privateMethod(this, _AiFloatingChatComponent_instances, dispatchEvent_fn).call(this, "forge-ai-floating-chat-open");
   }
-  /**
-   * Closes the chat.
-   */
   close() {
     if (this.expanded) {
       this.expanded = false;
@@ -81,9 +57,6 @@ let AiFloatingChatComponent = class extends LitElement {
     this.open = false;
     __privateMethod(this, _AiFloatingChatComponent_instances, dispatchEvent_fn).call(this, "forge-ai-floating-chat-close");
   }
-  /**
-   * Toggles the chat open state.
-   */
   toggle() {
     if (this.open) {
       this.close();
@@ -91,21 +64,17 @@ let AiFloatingChatComponent = class extends LitElement {
       this.show();
     }
   }
-  /**
-   * Expands the chat to full width.
-   */
   expand() {
     if (!this.expanded) {
       this.expanded = true;
+      this._userExpanded = true;
       __privateMethod(this, _AiFloatingChatComponent_instances, dispatchEvent_fn).call(this, "forge-ai-floating-chat-expand");
     }
   }
-  /**
-   * Collapses the chat to normal width.
-   */
   collapse() {
     if (this.expanded) {
       this.expanded = false;
+      this._userExpanded = false;
       __privateMethod(this, _AiFloatingChatComponent_instances, dispatchEvent_fn).call(this, "forge-ai-floating-chat-collapse");
     }
   }
@@ -113,17 +82,25 @@ let AiFloatingChatComponent = class extends LitElement {
 _dialogRef = /* @__PURE__ */ new WeakMap();
 _AiFloatingChatComponent_instances = /* @__PURE__ */ new WeakSet();
 handleFullscreenChange_fn = function(event) {
-  this._isFullscreen = event.detail.isFullscreen;
+  const { isFullscreen } = event.detail;
+  if (isFullscreen && !this.expanded) {
+    this.expanded = true;
+    __privateMethod(this, _AiFloatingChatComponent_instances, dispatchEvent_fn).call(this, "forge-ai-floating-chat-expand");
+  } else if (!isFullscreen && this.expanded && !this._userExpanded) {
+    this.expanded = false;
+    __privateMethod(this, _AiFloatingChatComponent_instances, dispatchEvent_fn).call(this, "forge-ai-floating-chat-collapse");
+  }
 };
-handleHeaderExpand_fn = function() {
+handleChatbotExpand_fn = function() {
   this.expanded = !this.expanded;
+  this._userExpanded = this.expanded;
   if (this.expanded) {
     __privateMethod(this, _AiFloatingChatComponent_instances, dispatchEvent_fn).call(this, "forge-ai-floating-chat-expand");
   } else {
     __privateMethod(this, _AiFloatingChatComponent_instances, dispatchEvent_fn).call(this, "forge-ai-floating-chat-collapse");
   }
 };
-handleHeaderMinimize_fn = function() {
+handleChatbotMinimize_fn = function() {
   this.close();
 };
 handleDialogClose_fn = function() {
@@ -147,7 +124,7 @@ __decorateClass([
 ], AiFloatingChatComponent.prototype, "expanded", 2);
 __decorateClass([
   state()
-], AiFloatingChatComponent.prototype, "_isFullscreen", 2);
+], AiFloatingChatComponent.prototype, "_userExpanded", 2);
 AiFloatingChatComponent = __decorateClass([
   customElement(AiFloatingChatComponentTagName)
 ], AiFloatingChatComponent);

package/dist/ai-gradient-container/ai-gradient-container.scss.mjs

@@ -1,4 +1,4 @@
-const styles = "/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n@keyframes fadein {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n:host {\n  display: block;\n  --forge-gradient-container-radius: var(--forge-shape-large);\n  --forge-drawer-background: transparent;\n  border: var(--forge-shape-small) solid transparent;\n  border-radius: var(--forge-gradient-container-radius);\n  background-origin: border-box;\n  background-clip: padding-box, border-box;\n}\n\n:host(:state(low)) {\n  background-image: linear-gradient(var(--forge-theme-surface, #ffffff), var(--forge-theme-surface, #ffffff)), linear-gradient(to top, var(--forge-theme-tertiary-container-low, #e8ebff), var(--forge-theme-outline, #e0e0e0));\n}\n\n:host(:state(medium)) {\n  background-image: linear-gradient(var(--forge-theme-surface, #ffffff), var(--forge-theme-surface, #ffffff)), linear-gradient(to top, var(--forge-theme-tertiary-container), var(--forge-theme-outline, #e0e0e0));\n}\n\n:host(:state(high)) {\n  background-image: linear-gradient(var(--forge-theme-surface, #ffffff), var(--forge-theme-surface, #ffffff)), linear-gradient(to top, var(--forge-theme-tertiary, #3d5afe), var(--forge-theme-outline, #e0e0e0));\n}\n\n:host(:state(disabled)) {\n  background-image: linear-gradient(var(--forge-theme-surface, #ffffff), var(--forge-theme-surface, #ffffff)), linear-gradient(to top, var(--forge-theme-text-low, rgba(0, 0, 0, 0.38)), var(--forge-theme-text-low, rgba(0, 0, 0, 0.38)));\n}";
+const styles = "/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n@keyframes fadein {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n:host {\n  display: block;\n  --forge-drawer-background: transparent;\n  border: calc(var(--forge-shape-small, 2px) * var(--forge-shape-factor, 1)) solid transparent;\n  border-radius: var(--forge-ai-gradient-container-radius, calc(var(--forge-shape-large, 8px) * var(--forge-shape-factor, 1)));\n  background-origin: border-box;\n  background-clip: padding-box, border-box;\n}\n\n:host(:state(low)) {\n  background-image: linear-gradient(var(--forge-theme-surface, #ffffff), var(--forge-theme-surface, #ffffff)), linear-gradient(to top, var(--forge-theme-tertiary-container-low, #e8ebff), var(--forge-theme-outline, #e0e0e0));\n}\n\n:host(:state(medium)) {\n  background-image: linear-gradient(var(--forge-theme-surface, #ffffff), var(--forge-theme-surface, #ffffff)), linear-gradient(to top, var(--forge-theme-tertiary-container, #d0d7ff), var(--forge-theme-outline, #e0e0e0));\n}\n\n:host(:state(high)) {\n  background-image: linear-gradient(var(--forge-theme-surface, #ffffff), var(--forge-theme-surface, #ffffff)), linear-gradient(to top, var(--forge-theme-tertiary, #3d5afe), var(--forge-theme-outline, #e0e0e0));\n}\n\n:host(:state(disabled)) {\n  background-image: linear-gradient(var(--forge-theme-surface, #ffffff), var(--forge-theme-surface, #ffffff)), linear-gradient(to top, var(--forge-theme-text-low, rgba(0, 0, 0, 0.38)), var(--forge-theme-text-low, rgba(0, 0, 0, 0.38)));\n}";
 export {
   styles as default
 };

package/dist/ai-icon/ai-icon.scss.mjs

@@ -1,4 +1,4 @@
-const styles = "/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n:host {\n  --forge-ai-icon-fill-color: var(--forge-theme-tertiary, #3d5afe);\n  box-sizing: border-box;\n  display: grid;\n  place-items: center;\n  height: 36px;\n  width: 36px;\n}\n\nforge-ai-gradient-container {\n  display: grid;\n  place-items: center;\n  height: 36px;\n  width: 36px;\n}\n\nsvg {\n  fill: var(--forge-ai-icon-fill-color);\n  height: 24px;\n  width: 24px;\n}\n\n:host(:state(outline)) forge-ai-gradient-container {\n  --forge-gradient-container-radius: 100%;\n}";
+const styles = "/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n:host {\n  --_ai-icon-fill-color: var(--forge-ai-icon-fill-color, var(--forge-theme-tertiary, #3d5afe));\n  box-sizing: border-box;\n  display: grid;\n  place-items: center;\n  height: 36px;\n  width: 36px;\n}\n\nforge-ai-gradient-container {\n  display: grid;\n  place-items: center;\n  height: 36px;\n  width: 36px;\n}\n\nsvg {\n  fill: var(--_ai-icon-fill-color);\n  height: 24px;\n  width: 24px;\n}\n\n:host(:state(outline)) forge-ai-gradient-container {\n  --forge-gradient-container-radius: 100%;\n}";
 export {
   styles as default
 };

package/dist/ai-icon-button/ai-icon-button.d.ts

@@ -0,0 +1,19 @@
+import { LitElement, TemplateResult, PropertyValues } from 'lit';
+declare global {
+    interface HTMLElementTagNameMap {
+        'forge-ai-icon-button': AiIconButtonComponent;
+    }
+}
+export declare const AiIconButtonComponentTagName: keyof HTMLElementTagNameMap;
+/**
+ * @tag forge-ai-icon-button
+ */
+export declare class AiIconButtonComponent extends LitElement {
+    #private;
+    static styles: import('lit').CSSResult;
+    /** Whether the button is disabled */
+    disabled: boolean;
+    constructor();
+    willUpdate(changedProperties: PropertyValues<this>): void;
+    render(): TemplateResult;
+}

package/dist/ai-icon-button/ai-icon-button.mjs

@@ -0,0 +1,63 @@
+import { toggleState } from "../utils.mjs";
+import { unsafeCSS, LitElement, html } from "lit";
+import { property, customElement } from "lit/decorators.js";
+import "../ai-icon/ai-icon.mjs";
+import styles from "./ai-icon-button.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 __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
+var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
+var _internals, _AiIconButtonComponent_instances, setCssState_fn;
+const AiIconButtonComponentTagName = "forge-ai-icon-button";
+let AiIconButtonComponent = class extends LitElement {
+  constructor() {
+    super();
+    __privateAdd(this, _AiIconButtonComponent_instances);
+    this.disabled = false;
+    __privateAdd(this, _internals);
+    __privateSet(this, _internals, this.attachInternals());
+    __privateMethod(this, _AiIconButtonComponent_instances, setCssState_fn).call(this);
+  }
+  willUpdate(changedProperties) {
+    if (changedProperties.has("disabled")) {
+      __privateMethod(this, _AiIconButtonComponent_instances, setCssState_fn).call(this);
+    }
+  }
+  render() {
+    return html`
+      <button aria-label="AI Icon Button" class="forge-icon-button ai-icon-button" .disabled=${this.disabled}>
+        <forge-ai-icon></forge-ai-icon>
+      </button>
+    `;
+  }
+};
+_internals = /* @__PURE__ */ new WeakMap();
+_AiIconButtonComponent_instances = /* @__PURE__ */ new WeakSet();
+setCssState_fn = function() {
+  toggleState(__privateGet(this, _internals), "disabled", this.disabled);
+};
+AiIconButtonComponent.styles = unsafeCSS(styles);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], AiIconButtonComponent.prototype, "disabled", 2);
+AiIconButtonComponent = __decorateClass([
+  customElement(AiIconButtonComponentTagName)
+], AiIconButtonComponent);
+export {
+  AiIconButtonComponent,
+  AiIconButtonComponentTagName
+};

package/dist/ai-icon-button/ai-icon-button.scss.mjs

@@ -0,0 +1,4 @@
+const styles = '/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/* prettier-ignore */\n.forge-icon-button {\n  --_icon-button-display: var(--forge-icon-button-display, inline-flex);\n  --_icon-button-size: var(--forge-icon-button-size, 48px);\n  --_icon-button-gap: var(--forge-icon-button-gap, 0);\n  --_icon-button-icon-color: var(--forge-icon-button-icon-color, currentColor);\n  --_icon-button-background-color: var(--forge-icon-button-background-color, none);\n  --_icon-button-icon-size: var(--forge-icon-button-icon-size, calc(var(--forge-typography-font-size, 1rem) * 1.5));\n  --_icon-button-cursor: var(--forge-icon-button-cursor, pointer);\n  --_icon-button-padding: var(--forge-icon-button-padding, var(--forge-spacing-xxsmall, 4px));\n  --_icon-button-border: var(--forge-icon-button-border, none);\n  --_icon-button-shadow: var(--forge-icon-button-shadow, none);\n  --_icon-button-transition-duration: var(--forge-icon-button-transition-duration, var(--forge-animation-duration-short3, 150ms));\n  --_icon-button-transition-timing: var(--forge-icon-button-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));\n  --_icon-button-shape: var(--forge-icon-button-shape, calc(var(--forge-shape-full, 9999px) * var(--forge-shape-factor, 1)));\n  --_icon-button-shape-start-start: var(--forge-icon-button-shape-start-start, var(--_icon-button-shape));\n  --_icon-button-shape-start-end: var(--forge-icon-button-shape-start-end, var(--_icon-button-shape));\n  --_icon-button-shape-end-start: var(--forge-icon-button-shape-end-start, var(--_icon-button-shape));\n  --_icon-button-shape-end-end: var(--forge-icon-button-shape-end-end, var(--_icon-button-shape));\n  --_icon-button-shape-squared: var(--forge-icon-button-shape-squared, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));\n  --_icon-button-outlined-border-width: var(--forge-icon-button-outlined-border-width, 1px);\n  --_icon-button-outlined-border-style: var(--forge-icon-button-outlined-border-style, solid);\n  --_icon-button-outlined-border-color: var(--forge-icon-button-outlined-border-color, var(--_icon-button-icon-color));\n  --_icon-button-tonal-icon-color: var(--forge-icon-button-tonal-icon-color, var(--forge-theme-on-primary-container, #222c62));\n  --_icon-button-tonal-background-color: var(--forge-icon-button-tonal-background-color, var(--forge-theme-primary-container, #d1d5ed));\n  --_icon-button-filled-icon-color: var(--forge-icon-button-filled-icon-color, var(--forge-theme-on-primary, #ffffff));\n  --_icon-button-filled-background-color: var(--forge-icon-button-filled-background-color, var(--forge-theme-primary, #3f51b5));\n  --_icon-button-raised-shadow: var(--forge-icon-button-raised-shadow, 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12));\n  --_icon-button-raised-hover-shadow: var(--forge-icon-button-raised-hover-shadow, 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12));\n  --_icon-button-raised-active-shadow: var(--forge-icon-button-raised-active-shadow, 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12));\n  --_icon-button-raised-disabled-shadow: var(--forge-icon-button-raised-disabled-shadow, none);\n  --_icon-button-density-small-size: var(--forge-icon-button-density-small-size, 24px);\n  --_icon-button-density-small-padding: var(--forge-icon-button-density-small-padding, var(--forge-spacing-xxxsmall, 2px));\n  --_icon-button-density-small-icon-size: var(--forge-icon-button-density-small-icon-size, calc(var(--forge-typography-font-size, 1rem) * 1.125));\n  --_icon-button-density-medium-size: var(--forge-icon-button-density-medium-size, 36px);\n  --_icon-button-density-medium-padding: var(--forge-icon-button-density-medium-padding, var(--forge-spacing-xxsmall, 4px));\n  --_icon-button-density-large-size: var(--forge-icon-button-density-large-size, var(--_icon-button-size));\n  --_icon-button-toggle-on-background-color: var(--forge-icon-button-toggle-on-background-color, var(--forge-theme-primary-container, #d1d5ed));\n  --_icon-button-toggle-on-icon-color: var(--forge-icon-button-toggle-on-icon-color, var(--forge-theme-primary, #3f51b5));\n  --_icon-button-outlined-toggle-on-background-color: var(--forge-icon-button-outlined-toggle-on-background-color, var(--forge-theme-primary-container, #d1d5ed));\n  --_icon-button-outlined-toggle-on-icon-color: var(--forge-icon-button-outlined-toggle-on-icon-color, var(--forge-theme-primary, #3f51b5));\n  --_icon-button-tonal-toggle-background-color: var(--forge-icon-button-tonal-toggle-background-color, var(--forge-theme-surface-container-low, #ebebeb));\n  --_icon-button-tonal-toggle-on-background-color: var(--forge-icon-button-tonal-toggle-on-background-color, var(--forge-theme-primary-container, #d1d5ed));\n  --_icon-button-tonal-toggle-on-icon-color: var(--forge-icon-button-tonal-toggle-on-icon-color, var(--forge-theme-primary, #3f51b5));\n  --_icon-button-filled-toggle-background-color: var(--forge-icon-button-filled-toggle-background-color, var(--forge-theme-surface-container-low, #ebebeb));\n  --_icon-button-filled-toggle-icon-color: var(--forge-icon-button-filled-toggle-icon-color, var(--forge-theme-primary, #3f51b5));\n  --_icon-button-filled-toggle-on-background-color: var(--forge-icon-button-filled-toggle-on-background-color, var(--forge-theme-primary, #3f51b5));\n  --_icon-button-filled-toggle-on-icon-color: var(--forge-icon-button-filled-toggle-on-icon-color, var(--forge-theme-on-primary, #ffffff));\n  --_icon-button-disabled-cursor: var(--forge-icon-button-disabled-cursor, not-allowed);\n  --_icon-button-disabled-opacity: var(--forge-icon-button-disabled-opacity, 0.38);\n  --_icon-button-popover-icon-padding: var(--forge-icon-button-popover-icon-padding, var(--forge-spacing-xsmall, 8px));\n  --_icon-button-focus-indicator-color: var(--forge-icon-button-focus-indicator-color, var(--forge-theme-primary, #3f51b5));\n}\n\n.forge-icon-button {\n  display: var(--_icon-button-display);\n  position: relative;\n  outline: none;\n  -webkit-tap-highlight-color: transparent;\n  position: relative;\n  z-index: 0;\n  display: var(--_icon-button-display);\n  align-items: center;\n  justify-content: center;\n  gap: var(--_icon-button-gap);\n  box-sizing: border-box;\n  height: var(--_icon-button-density-large-size);\n  min-width: var(--_icon-button-density-large-size);\n  border: var(--_icon-button-border);\n  border-start-start-radius: var(--_icon-button-shape-start-start);\n  border-start-end-radius: var(--_icon-button-shape-start-end);\n  border-end-start-radius: var(--_icon-button-shape-end-start);\n  border-end-end-radius: var(--_icon-button-shape-end-end);\n  padding: var(--_icon-button-padding);\n  box-shadow: var(--_icon-button-shadow);\n  color: var(--_icon-button-icon-color);\n  background: var(--_icon-button-background-color);\n  font-size: var(--_icon-button-icon-size);\n  cursor: var(--_icon-button-cursor);\n  user-select: none;\n  transition-property: box-shadow, background;\n  transition-duration: var(--_icon-button-transition-duration);\n  transition-timing-function: var(--_icon-button-transition-timing);\n}\n\n.forge-icon-button img,\n.forge-icon-button svg {\n  height: var(--_icon-button-icon-size);\n  width: var(--_icon-button-icon-size);\n}\n\n.forge-icon-button svg {\n  fill: currentColor;\n}\n\n.forge-icon-button:not(:disabled) {\n  --_state-layer-display: var(--forge-state-layer-display, flex);\n  --_state-layer-color: var(--forge-state-layer-color, var(--forge-theme-on-surface, #000000));\n  --_state-layer-hover-color: var(--forge-state-layer-hover-color, var(--_state-layer-color));\n  --_state-layer-hover-opacity: var(--forge-state-layer-hover-opacity, 0.08);\n  --_state-layer-pressed-color: var(--forge-state-layer-pressed-color, var(--_state-layer-color));\n  --_state-layer-pressed-opacity: var(--forge-state-layer-pressed-opacity, 0.12);\n  --_state-layer-hover-duration: var(--forge-state-layer-hover-duration, 15ms);\n  --_state-layer-pressed-duration: var(--forge-state-layer-pressed-duration, 105ms);\n  --_state-layer-animation-duration: var(--forge-state-layer-animation-duration, 375ms);\n}\n\n.forge-icon-button:not(:disabled)::before {\n  opacity: 0;\n  position: absolute;\n  backface-visibility: hidden;\n  transform: translateZ(0);\n  background-color: var(--_state-layer-hover-color);\n  inset: 0;\n  transition: opacity var(--_state-layer-hover-duration) linear, background-color var(--_state-layer-hover-duration) linear;\n  --_state-layer-hover-duration: var(--forge-state-layer-hover-duration, 100ms);\n  content: "";\n  opacity: 0;\n  border-radius: inherit;\n}\n\n.forge-icon-button:not(:disabled):hover::before {\n  background-color: var(--_state-layer-hover-color);\n  opacity: var(--_state-layer-hover-opacity);\n}\n\n.forge-icon-button:not(:disabled):active::before {\n  opacity: var(--_state-layer-pressed-opacity);\n  transition-duration: var(--_state-layer-pressed-duration);\n  --_state-layer-pressed-opacity: var(--forge-state-layer-pressed-opacity, 0.18);\n}\n\n.forge-icon-button:not(:disabled) {\n  --forge-state-layer-color: var(--_icon-button-icon-color);\n}\n\n@keyframes forge-focus-indicator-outward-grow {\n  from {\n    outline-width: 0;\n  }\n  to {\n    outline-width: var(--_focus-indicator-active-width);\n  }\n}\n@keyframes forge-focus-indicator-outward-shrink {\n  from {\n    outline-width: var(--_focus-indicator-active-width);\n  }\n}\n@keyframes forge-focus-indicator-inward-grow {\n  from {\n    border-width: 0;\n  }\n  to {\n    border-width: var(--_focus-indicator-active-width);\n  }\n}\n@keyframes forge-focus-indicator-inward-shrink {\n  from {\n    border-width: var(--_focus-indicator-active-width);\n  }\n}\n.forge-icon-button:not(:disabled) {\n  outline: none;\n}\n\n.forge-icon-button:not(:disabled):focus-visible::after {\n  --_focus-indicator-display: var(--forge-focus-indicator-display, flex);\n  --_focus-indicator-width: var(--forge-focus-indicator-width, var(--forge-border-medium, 2px));\n  --_focus-indicator-active-width: var(--forge-focus-indicator-active-width, 6px);\n  --_focus-indicator-color: var(--forge-focus-indicator-color, var(--forge-theme-primary, #3f51b5));\n  --_focus-indicator-shape: var(--forge-focus-indicator-shape, calc(var(--forge-shape-extra-small, 1px) * var(--forge-shape-factor, 1)));\n  --_focus-indicator-duration: var(--forge-focus-indicator-duration, var(--forge-animation-duration-long4, 600ms));\n  --_focus-indicator-easing: var(--forge-focus-indicator-easing, var(--forge-animation-easing-emphasized, cubic-bezier(0.2, 0, 0, 1)));\n  --_focus-indicator-shape-start-start: var(--forge-focus-indicator-shape-start-start, var(--_focus-indicator-shape));\n  --_focus-indicator-shape-start-end: var(--forge-focus-indicator-shape-start-end, var(--_focus-indicator-shape));\n  --_focus-indicator-shape-end-end: var(--forge-focus-indicator-shape-end-end, var(--_focus-indicator-shape));\n  --_focus-indicator-shape-end-start: var(--forge-focus-indicator-shape-end-start, var(--_focus-indicator-shape));\n  --_focus-indicator-outward-offset: var(--forge-focus-indicator-outward-offset, var(--forge-spacing-xxsmall, 4px));\n  --_focus-indicator-inward-offset: var(--forge-focus-indicator-inward-offset, 0px);\n  --_focus-indicator-offset-block: var(--forge-focus-indicator-offset-block, 0);\n  --_focus-indicator-offset-inline: var(--forge-focus-indicator-offset-inline, 0);\n}\n\n.forge-icon-button:not(:disabled):focus-visible::after {\n  animation-delay: 0s, calc(var(--_focus-indicator-duration) * 0.25);\n  animation-duration: calc(var(--_focus-indicator-duration) * 0.25), calc(var(--_focus-indicator-duration) * 0.75);\n  animation-timing-function: var(--_focus-indicator-easing);\n  box-sizing: border-box;\n  color: var(--_focus-indicator-color);\n  display: none;\n  pointer-events: none;\n  position: absolute;\n  margin-block: var(--_focus-indicator-offset-block);\n  margin-inline: var(--_focus-indicator-offset-inline);\n  animation-name: forge-focus-indicator-outward-grow, forge-focus-indicator-outward-shrink;\n  border-end-end-radius: calc(var(--_focus-indicator-shape-end-end) + var(--_focus-indicator-outward-offset));\n  border-end-start-radius: calc(var(--_focus-indicator-shape-end-start) + var(--_focus-indicator-outward-offset));\n  border-start-end-radius: calc(var(--_focus-indicator-shape-start-end) + var(--_focus-indicator-outward-offset));\n  border-start-start-radius: calc(var(--_focus-indicator-shape-start-start) + var(--_focus-indicator-outward-offset));\n  inset: calc(-1 * var(--_focus-indicator-outward-offset));\n  outline: var(--_focus-indicator-width) solid currentColor;\n  content: "";\n  display: block;\n}\n\n.forge-icon-button:not(:disabled) {\n  --forge-focus-indicator-color: var(--_icon-button-focus-indicator-color);\n  --forge-focus-indicator-shape: var(--_icon-button-shape);\n}\n\n.forge-icon-button:not(:disabled):where(.forge-icon-button--text,\n:not(:where(.forge-icon-button--outlined, .forge-icon-button--tonal, .forge-icon-button--filled, .forge-icon-button--raised))) {\n  --forge-focus-indicator-outward-offset: 0px;\n}\n\n.forge-icon-button--outlined {\n  border-width: var(--_icon-button-outlined-border-width);\n  border-style: var(--_icon-button-outlined-border-style);\n  border-color: var(--_icon-button-outlined-border-color);\n}\n\n.forge-icon-button--tonal {\n  --_icon-button-icon-color: var(--_icon-button-tonal-icon-color);\n  --_icon-button-background-color: var(--_icon-button-tonal-background-color);\n}\n\n.forge-icon-button--filled, .forge-icon-button--raised {\n  --_icon-button-icon-color: var(--_icon-button-filled-icon-color);\n  --_icon-button-background-color: var(--_icon-button-filled-background-color);\n}\n\n.forge-icon-button--raised {\n  --_icon-button-shadow: var(--_icon-button-raised-shadow);\n}\n\n.forge-icon-button--raised:hover {\n  --_icon-button-raised-shadow: var(--_icon-button-raised-hover-shadow);\n}\n\n.forge-icon-button--raised:active {\n  --_icon-button-raised-shadow: var(--_icon-button-raised-active-shadow);\n}\n\n.forge-icon-button--squared {\n  --_icon-button-shape: var(--_icon-button-shape-squared);\n}\n\n.forge-icon-button--small {\n  --_icon-button-size: var(--_icon-button-density-small-size);\n  --_icon-button-icon-size: var(--_icon-button-density-small-icon-size);\n  --_icon-button-padding: var(--_icon-button-density-small-padding);\n}\n\n.forge-icon-button--small > * {\n  font-size: var(--_icon-button-density-small-icon-size);\n}\n\n.forge-icon-button--medium {\n  --_icon-button-size: var(--_icon-button-density-medium-size);\n  --_icon-button-padding: var(--_icon-button-density-medium-padding);\n}\n\n.forge-icon-button:disabled {\n  pointer-events: none;\n  opacity: var(--_icon-button-disabled-opacity);\n  pointer-events: auto;\n  cursor: not-allowed;\n}\n\n.forge-icon-button forge-circular-progress {\n  --forge-circular-progress-indicator-color: var(--_icon-button-icon-color);\n  --forge-circular-progress-track-color: transparent;\n  --forge-circular-progress-size: 1em;\n}\n\n@keyframes fadein {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n:host {\n  display: inline-block;\n}\n\nforge-ai-icon {\n  --forge-ai-icon-fill-color: currentColor;\n}\n\n:host(:state(disabled)) forge-ai-icon {\n  --forge-ai-icon-fill-color: var(--forge-theme-text-low);\n}';
+export {
+  styles as default
+};

package/dist/ai-icon-button/index.d.ts

@@ -0,0 +1 @@
+export * from './ai-icon-button';

package/dist/ai-icon-button/index.mjs

@@ -0,0 +1,5 @@
+import { AiIconButtonComponent, AiIconButtonComponentTagName } from "./ai-icon-button.mjs";
+export {
+  AiIconButtonComponent,
+  AiIconButtonComponentTagName
+};

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

@@ -0,0 +1,59 @@
+import { LitElement, TemplateResult, PropertyValues } from 'lit';
+import { MessageItem, ToolDefinition } from '../ai-chatbot/types.js';
+import { FeatureToggle } from '../ai-chatbot/ai-chatbot.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'forge-ai-message-thread': AiMessageThreadComponent;
+    }
+    interface HTMLElementEventMap {
+        'forge-ai-message-thread-copy': CustomEvent<ForgeAiMessageThreadCopyEventData>;
+        'forge-ai-message-thread-refresh': CustomEvent<ForgeAiMessageThreadRefreshEventData>;
+        'forge-ai-message-thread-thumbs-up': CustomEvent<ForgeAiMessageThreadThumbsEventData>;
+        'forge-ai-message-thread-thumbs-down': CustomEvent<ForgeAiMessageThreadThumbsEventData>;
+    }
+}
+export interface ForgeAiMessageThreadCopyEventData {
+    messageId: string;
+}
+export interface ForgeAiMessageThreadRefreshEventData {
+    messageId: string;
+}
+export interface ForgeAiMessageThreadThumbsEventData {
+    messageId: string;
+}
+export declare const AiMessageThreadComponentTagName: keyof HTMLElementTagNameMap;
+/**
+ * @tag forge-ai-message-thread
+ *
+ * @summary A primitive component for rendering a thread of chat messages, including user, assistant, system, and tool call messages.
+ *
+ * @description
+ * The AI Message Thread component displays a chronological list of messages with support for markdown rendering,
+ * tool calls, empty states, and thinking indicators. It handles its own scrolling behavior with auto-scroll support.
+ *
+ * @slot empty-state-heading - Slot for custom empty state heading content
+ * @slot empty-state-actions - Slot for custom empty state actions (e.g., suggestions)
+ *
+ * @event {CustomEvent<ForgeAiMessageThreadCopyEventData>} forge-ai-message-thread-copy - Fired when user clicks copy on a message
+ * @event {CustomEvent<ForgeAiMessageThreadRefreshEventData>} forge-ai-message-thread-refresh - Fired when user clicks refresh on a message
+ * @event {CustomEvent<ForgeAiMessageThreadThumbsEventData>} forge-ai-message-thread-thumbs-up - Fired when user gives thumbs up
+ * @event {CustomEvent<ForgeAiMessageThreadThumbsEventData>} forge-ai-message-thread-thumbs-down - Fired when user gives thumbs down
+ */
+export declare class AiMessageThreadComponent extends LitElement {
+    #private;
+    static styles: import('lit').CSSResult;
+    messageItems: MessageItem[];
+    tools?: Map<string, ToolDefinition>;
+    enableReactions: boolean;
+    showThinking: boolean;
+    autoScroll: FeatureToggle;
+    debugMode: boolean;
+    private _messageThreadContainer;
+    connectedCallback(): void;
+    updated(changedProperties: PropertyValues<this>): void;
+    scrollToBottom({ force, behavior }?: {
+        force?: boolean;
+        behavior?: ScrollBehavior;
+    }): void;
+    render(): TemplateResult;
+}

package/dist/ai-message-thread/ai-message-thread.mjs

@@ -0,0 +1,238 @@
+import { unsafeCSS, LitElement, html, nothing } from "lit";
+import { property, query, customElement } from "lit/decorators.js";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import { when } from "lit/directives/when.js";
+import { MarkdownStreamController } from "../ai-chatbot/markdown-stream-controller.mjs";
+import "../ai-empty-state/ai-empty-state.mjs";
+import "../ai-error-message/ai-error-message.mjs";
+import "../ai-response-message/ai-response-message.mjs";
+import "../ai-thinking-indicator/ai-thinking-indicator.mjs";
+import "../ai-user-message/ai-user-message.mjs";
+import "../ai-chatbot/ai-chatbot-tool-call.mjs";
+import styles from "./ai-message-thread.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 __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
+var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
+var _markdownController, _canAutoScroll, _handleScroll, _AiMessageThreadComponent_instances, handleCopy_fn, handleRefresh_fn, handleThumbsUp_fn, handleThumbsDown_fn, renderToolCall_fn, emptyState_get, thinkingIndicator_get, messages_get, dispatchEvent_fn;
+const AiMessageThreadComponentTagName = "forge-ai-message-thread";
+const SCROLL_THRESHOLD = 100;
+let AiMessageThreadComponent = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _AiMessageThreadComponent_instances);
+    this.messageItems = [];
+    this.enableReactions = false;
+    this.showThinking = false;
+    this.autoScroll = "on";
+    this.debugMode = false;
+    __privateAdd(this, _markdownController);
+    __privateAdd(this, _canAutoScroll, true);
+    __privateAdd(this, _handleScroll, () => {
+      const { scrollTop, scrollHeight, clientHeight } = this._messageThreadContainer;
+      __privateSet(this, _canAutoScroll, scrollTop + clientHeight >= scrollHeight - SCROLL_THRESHOLD);
+    });
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    __privateSet(this, _markdownController, new MarkdownStreamController(this));
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (this.autoScroll === "on" && (changedProperties.has("messageItems") || changedProperties.has("showThinking"))) {
+      this.scrollToBottom();
+    }
+  }
+  scrollToBottom({
+    force = false,
+    behavior = "smooth"
+  } = {}) {
+    if (!force && !__privateGet(this, _canAutoScroll)) {
+      return;
+    }
+    const container = this._messageThreadContainer;
+    container.scrollTo({
+      top: container.scrollHeight,
+      behavior
+    });
+  }
+  render() {
+    return html`
+      <div class="message-thread" @scroll=${this.autoScroll ? __privateGet(this, _handleScroll) : void 0}>
+        ${__privateGet(this, _AiMessageThreadComponent_instances, emptyState_get)} ${__privateGet(this, _AiMessageThreadComponent_instances, messages_get)} ${__privateGet(this, _AiMessageThreadComponent_instances, thinkingIndicator_get)}
+      </div>
+    `;
+  }
+};
+_markdownController = /* @__PURE__ */ new WeakMap();
+_canAutoScroll = /* @__PURE__ */ new WeakMap();
+_handleScroll = /* @__PURE__ */ new WeakMap();
+_AiMessageThreadComponent_instances = /* @__PURE__ */ new WeakSet();
+handleCopy_fn = function(messageId) {
+  __privateMethod(this, _AiMessageThreadComponent_instances, dispatchEvent_fn).call(this, {
+    type: "forge-ai-message-thread-copy",
+    detail: { messageId }
+  });
+};
+handleRefresh_fn = function(messageId) {
+  __privateMethod(this, _AiMessageThreadComponent_instances, dispatchEvent_fn).call(this, {
+    type: "forge-ai-message-thread-refresh",
+    detail: { messageId }
+  });
+};
+handleThumbsUp_fn = function(messageId) {
+  __privateMethod(this, _AiMessageThreadComponent_instances, dispatchEvent_fn).call(this, {
+    type: "forge-ai-message-thread-thumbs-up",
+    detail: { messageId }
+  });
+};
+handleThumbsDown_fn = function(messageId) {
+  __privateMethod(this, _AiMessageThreadComponent_instances, dispatchEvent_fn).call(this, {
+    type: "forge-ai-message-thread-thumbs-down",
+    detail: { messageId }
+  });
+};
+renderToolCall_fn = function(toolCall) {
+  const toolDefinition = this.tools?.get(toolCall.name);
+  return html`<forge-ai-chatbot-tool-call
+      .toolCall=${toolCall}
+      .toolDefinition=${toolDefinition}
+      ?debug-mode=${this.debugMode}></forge-ai-chatbot-tool-call>`;
+};
+emptyState_get = function() {
+  if (this.messageItems.length) {
+    return nothing;
+  }
+  return html`
+      <forge-ai-empty-state>
+        <slot name="empty-state-heading" slot="heading">
+          <span>How can I help you today?</span>
+        </slot>
+        <slot name="empty-state-message" slot="body">
+          Start a conversation by asking a question or describing what you'd like help with.
+        </slot>
+        <slot name="empty-state-actions" slot="actions"></slot>
+      </forge-ai-empty-state>
+    `;
+};
+thinkingIndicator_get = function() {
+  if (!this.showThinking) {
+    return nothing;
+  }
+  const lastItem = this.messageItems[this.messageItems.length - 1];
+  const hasAssistantContent = lastItem?.type !== "toolCall" && lastItem?.type === "message" && lastItem.data.role === "assistant" && lastItem.data.content.trim().length;
+  if (hasAssistantContent) {
+    return nothing;
+  }
+  const hasActiveToolCall = this.debugMode && lastItem?.type === "toolCall" && (lastItem.data.status === "parsing" || lastItem.data.status === "executing" || lastItem.data.status === "pending");
+  if (hasActiveToolCall) {
+    return nothing;
+  }
+  return html`<div class="thinking-indicator">
+      <forge-ai-thinking-indicator class="status-indicator" show-text></forge-ai-thinking-indicator>
+    </div>`;
+};
+messages_get = function() {
+  const itemsToRender = this.messageItems.filter((item) => {
+    if (item.type === "toolCall") {
+      if (this.debugMode) {
+        return true;
+      }
+      const toolDef = this.tools?.get(item.data.name);
+      return !!toolDef?.renderer;
+    }
+    if (item.type === "message") {
+      return item.data.role !== "tool";
+    }
+    return false;
+  });
+  return itemsToRender.map((item) => {
+    if (item.type === "toolCall") {
+      return __privateMethod(this, _AiMessageThreadComponent_instances, renderToolCall_fn).call(this, item.data);
+    }
+    const msg = item.data;
+    if (msg.role === "user") {
+      const renderedHtml = __privateGet(this, _markdownController).getCachedHtml(msg.id, msg.content);
+      return html`<forge-ai-user-message>${unsafeHTML(renderedHtml)}</forge-ai-user-message>`;
+    } else if (msg.role === "system") {
+      return html`<div class="system-message">${msg.content}</div>`;
+    } else if (msg.status === "error") {
+      const renderedHtml = __privateGet(this, _markdownController).getCachedHtml(msg.id, msg.content);
+      return html`
+          <forge-ai-error-message>
+            <span slot="title">Error</span>
+            ${unsafeHTML(renderedHtml)}
+          </forge-ai-error-message>
+        `;
+    } else {
+      return when(msg.content?.trim().length, () => {
+        const renderedHtml = __privateGet(this, _markdownController).getCachedHtml(msg.id, msg.content);
+        return html`
+            <forge-ai-response-message
+              ?complete=${msg.status === "complete"}
+              ?enable-reactions=${this.enableReactions}
+              ?has-debug-data=${this.debugMode && (msg.eventStream?.length ?? 0) > 0}
+              .eventStream=${msg.eventStream}
+              @forge-ai-response-message-copy=${() => __privateMethod(this, _AiMessageThreadComponent_instances, handleCopy_fn).call(this, msg.id)}
+              @forge-ai-response-message-refresh=${() => __privateMethod(this, _AiMessageThreadComponent_instances, handleRefresh_fn).call(this, msg.id)}
+              @forge-ai-response-message-thumbs-up=${() => __privateMethod(this, _AiMessageThreadComponent_instances, handleThumbsUp_fn).call(this, msg.id)}
+              @forge-ai-response-message-thumbs-down=${() => __privateMethod(this, _AiMessageThreadComponent_instances, handleThumbsDown_fn).call(this, msg.id)}>
+              ${unsafeHTML(renderedHtml)}
+            </forge-ai-response-message>
+          `;
+      });
+    }
+  });
+};
+dispatchEvent_fn = function(config) {
+  const event = new CustomEvent(config.type, {
+    detail: config.detail,
+    bubbles: true,
+    composed: true
+  });
+  this.dispatchEvent(event);
+  return event;
+};
+AiMessageThreadComponent.styles = unsafeCSS(styles);
+__decorateClass([
+  property({ attribute: false })
+], AiMessageThreadComponent.prototype, "messageItems", 2);
+__decorateClass([
+  property({ attribute: false })
+], AiMessageThreadComponent.prototype, "tools", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "enable-reactions" })
+], AiMessageThreadComponent.prototype, "enableReactions", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "show-thinking" })
+], AiMessageThreadComponent.prototype, "showThinking", 2);
+__decorateClass([
+  property({ attribute: "auto-scroll" })
+], AiMessageThreadComponent.prototype, "autoScroll", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "debug-mode" })
+], AiMessageThreadComponent.prototype, "debugMode", 2);
+__decorateClass([
+  query(".message-thread")
+], AiMessageThreadComponent.prototype, "_messageThreadContainer", 2);
+AiMessageThreadComponent = __decorateClass([
+  customElement(AiMessageThreadComponentTagName)
+], AiMessageThreadComponent);
+export {
+  AiMessageThreadComponent,
+  AiMessageThreadComponentTagName
+};

package/dist/ai-message-thread/ai-message-thread.scss.mjs

@@ -0,0 +1,4 @@
+const styles = '/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/* prettier-ignore */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n:host {\n  display: grid;\n  height: 100%;\n}\n\n.message-thread::-webkit-scrollbar {\n  height: var(--forge-scrollbar-height, 16px);\n  width: var(--forge-scrollbar-width, 16px);\n}\n.message-thread::-webkit-scrollbar-track {\n  background-color: var(--forge-scrollbar-track-container, var(--forge-theme-surface-container-low, #ebebeb));\n}\n.message-thread::-webkit-scrollbar-track:hover {\n  background-color: var(--forge-scrollbar-track-container-hover, var(--forge-theme-surface-container-low, #ebebeb));\n}\n.message-thread::-webkit-scrollbar-corner {\n  background-color: var(--forge-scrollbar-track-container, var(--forge-theme-surface-container-low, #ebebeb));\n}\n.message-thread::-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.message-thread::-webkit-scrollbar-thumb:hover {\n  background-color: var(--forge-scrollbar-thumb-container-hover, var(--forge-theme-surface-container-high, #9e9e9e));\n}\n.message-thread {\n  display: flex;\n  flex-direction: column;\n  gap: var(--forge-spacing-medium, 16px);\n  padding-block-end: var(--forge-spacing-large, 24px);\n  overflow-y: auto;\n  padding: var(--forge-spacing-medium, 16px) var(--forge-spacing-medium, 16px) var(--forge-spacing-xxlarge, 48px) var(--forge-spacing-medium, 16px);\n}\n@media not all and (min-resolution: 0.001dpcm) {\n  @supports (-webkit-appearance: none) {\n    .message-thread {\n      overflow-y: scroll;\n    }\n  }\n}\n\n.thinking-indicator {\n  margin-block-start: var(--forge-spacing-xsmall, 8px);\n}\n\n.system-message {\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-font-smoothing: antialiased;\n  font-family: var(--forge-typography-subheading2-font-family, var(--forge-typography-font-family, "Roboto", sans-serif));\n  font-size: var(--forge-typography-subheading2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-subheading2-font-size-scale, 1)));\n  font-weight: var(--forge-typography-subheading2-font-weight, 400);\n  line-height: var(--forge-typography-subheading2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-subheading2-line-height-scale, 1.25)));\n  letter-spacing: var(--forge-typography-subheading2-letter-spacing, normal);\n  text-transform: var(--forge-typography-subheading2-text-transform, inherit);\n  text-decoration: var(--forge-typography-subheading2-text-decoration, inherit);\n  color: var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6));\n  padding-block: var(--forge-spacing-small, 12px);\n}';
+export {
+  styles as default
+};

package/dist/ai-message-thread/index.d.ts

@@ -0,0 +1,2 @@
+export { AiMessageThreadComponent, AiMessageThreadComponentTagName } from './ai-message-thread.js';
+export type { ForgeAiMessageThreadCopyEventData, ForgeAiMessageThreadRefreshEventData, ForgeAiMessageThreadThumbsEventData } from './ai-message-thread.js';

package/dist/ai-message-thread/index.mjs

@@ -0,0 +1,5 @@
+import { AiMessageThreadComponent, AiMessageThreadComponentTagName } from "./ai-message-thread.mjs";
+export {
+  AiMessageThreadComponent,
+  AiMessageThreadComponentTagName
+};