@tylertech/forge-ai 0.13.0 → 0.13.2

package/dist/ai-chatbot/ai-chatbot.mjs

@@ -1,11 +1,13 @@
-import { unsafeCSS, html, nothing } from "lit";
-import { property, customElement } from "lit/decorators.js";
+import { unsafeCSS, html } from "lit";
+import { property, state, customElement } from "lit/decorators.js";
 import { createRef, ref } from "lit/directives/ref.js";
 import { when } from "lit/directives/when.js";
 import { AiChatbotBase } from "./ai-chatbot-base.mjs";
 import "../ai-attachment/ai-attachment.mjs";
 import "../ai-chat-header/ai-chat-header.mjs";
 import "../ai-chat-interface/ai-chat-interface.mjs";
+import "../ai-context-chip/ai-context-chip.mjs";
+import "../ai-conversations-panel/ai-conversations-panel.mjs";
 import "../ai-file-picker/ai-file-picker.mjs";
 import "../ai-message-thread/ai-message-thread.mjs";
 import "../ai-prompt/ai-prompt.mjs";
@@ -30,7 +32,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 _chatInterfaceRef, _headerRef, _AiChatbotComponent_instances, handleHeaderExpand_fn, handleHeaderMinimize_fn, handleHeaderClear_fn, handleHeaderInfo_fn, sessionFilesTemplate_get, promptSlot_get, messageThread_get, _defaultEmptyStateIcon;
+var _chatInterfaceRef, _headerRef, _conversationsPanelRef, _conversationsDialogRef, _boundEscapeHandler, _AiChatbotComponent_instances, handleHeaderExpand_fn, handleHeaderMinimize_fn, handleHeaderClear_fn, handleHeaderInfo_fn, handleConversationsDialogClose_fn, handleEscapeKey_fn, handleBackdropClick_fn, handleConversationsToggle_fn, handleThreadSelect_fn, handleNewChat_fn, handlePanelClose_fn, _handleConversationSearch, _handleConversationLoadMore, _handleConversationRename, _handleConversationDelete, promptSlot_get, messageThread_get, _defaultEmptyStateIcon;
 const AiChatbotComponentTagName = "forge-ai-chatbot";
 let AiChatbotComponent = class extends AiChatbotBase {
   constructor() {
@@ -40,10 +42,65 @@ let AiChatbotComponent = class extends AiChatbotBase {
     this.showMinimizeButton = false;
     this.expanded = false;
     this.minimizeIcon = "default";
+    this.showConversationsButton = false;
+    this.recentThreads = [];
+    this.conversationsOpen = false;
+    this.showConversationRename = false;
+    this.showConversationDelete = false;
+    this._selectedThreadId = null;
     __privateAdd(this, _chatInterfaceRef, createRef());
     this._messageThreadRef = createRef();
     this._promptRef = createRef();
     __privateAdd(this, _headerRef, createRef());
+    __privateAdd(this, _conversationsPanelRef, createRef());
+    __privateAdd(this, _conversationsDialogRef, createRef());
+    __privateAdd(this, _boundEscapeHandler, __privateMethod(this, _AiChatbotComponent_instances, handleEscapeKey_fn).bind(this));
+    __privateAdd(this, _handleConversationSearch, (e) => {
+      const event = new CustomEvent("forge-ai-chatbot-conversation-search", {
+        detail: e.detail,
+        bubbles: true,
+        composed: true,
+        cancelable: true
+      });
+      if (!this.dispatchEvent(event)) {
+        e.preventDefault();
+      }
+    });
+    __privateAdd(this, _handleConversationLoadMore, (e) => {
+      const event = new CustomEvent(
+        "forge-ai-chatbot-conversation-load-more",
+        {
+          detail: e.detail,
+          bubbles: true,
+          composed: true
+        }
+      );
+      this.dispatchEvent(event);
+    });
+    __privateAdd(this, _handleConversationRename, (e) => {
+      const event = new CustomEvent("forge-ai-chatbot-conversation-rename", {
+        detail: e.detail,
+        bubbles: true,
+        composed: true,
+        cancelable: true
+      });
+      const dispatched = this.dispatchEvent(event);
+      if (!dispatched) {
+        e.preventDefault();
+      }
+    });
+    __privateAdd(this, _handleConversationDelete, (e) => {
+      const event = new CustomEvent("forge-ai-chatbot-conversation-delete", {
+        detail: e.detail,
+        bubbles: true,
+        composed: true,
+        cancelable: true
+      });
+      const dispatched = this.dispatchEvent(event);
+      if (!dispatched) {
+        e.preventDefault();
+      }
+    });
     __privateAdd(this, _defaultEmptyStateIcon, html`
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" class="empty-state-icon">
       <defs>
@@ -313,47 +370,127 @@ let AiChatbotComponent = class extends AiChatbotBase {
   focus() {
     this._promptRef.value?.focus();
   }
+  showConversations() {
+    const dialog = __privateGet(this, _conversationsDialogRef).value;
+    if (dialog && !dialog.open) {
+      dialog.show();
+      this.conversationsOpen = true;
+      window.addEventListener("keydown", __privateGet(this, _boundEscapeHandler), { capture: true });
+      this._dispatchHostEvent({ type: "forge-ai-chatbot-conversations-open" });
+    }
+  }
+  hideConversations() {
+    const dialog = __privateGet(this, _conversationsDialogRef).value;
+    if (dialog && dialog.open) {
+      window.removeEventListener("keydown", __privateGet(this, _boundEscapeHandler), { capture: true });
+      dialog.close();
+      setTimeout(() => {
+        __privateGet(this, _conversationsPanelRef).value?.resetToMainView();
+      }, 150);
+    }
+  }
+  /**
+   * Starts a new chat conversation by clearing messages and resetting conversation state.
+   *
+   * This method:
+   * - Clears all messages via the controller
+   * - Resets the selected thread ID
+   *
+   * Does not fire events - meant for programmatic use.
+   * For user-initiated actions, the event handler fires the event before calling this.
+   */
+  startNewChat() {
+    super.startNewChat();
+    this._selectedThreadId = null;
+  }
+  toggleConversations() {
+    if (this.conversationsOpen) {
+      this.hideConversations();
+    } else {
+      this.showConversations();
+    }
+  }
   render() {
     return html`
-      <forge-ai-chat-interface
-        ${ref(__privateGet(this, _chatInterfaceRef))}
-        role="region"
-        aria-label="AI chatbot"
-        aria-live="polite"
-        aria-busy=${this._isStreaming}>
-        <forge-ai-chat-header
-          ${ref(__privateGet(this, _headerRef))}
-          slot="header"
-          ?show-expand-button=${this.showExpandButton}
-          ?show-minimize-button=${this.showMinimizeButton}
-          ?expanded=${this.expanded}
-          ?disable-agent-selector=${this._isStreaming}
-          export-option=${this._hasMessages ? "enabled" : "off"}
-          clear-option=${this._hasMessages ? "enabled" : "off"}
-          .minimizeIcon=${this.minimizeIcon}
-          .agentInfo=${this.agentInfo}
-          .headingLevel=${this.headingLevel}
-          .titleText=${this.titleText}
-          .agents=${this.agents}
-          .selectedAgentId=${this.selectedAgentId}
-          @forge-ai-chat-header-expand=${__privateMethod(this, _AiChatbotComponent_instances, handleHeaderExpand_fn)}
-          @forge-ai-chat-header-minimize=${__privateMethod(this, _AiChatbotComponent_instances, handleHeaderMinimize_fn)}
-          @forge-ai-chat-header-clear=${__privateMethod(this, _AiChatbotComponent_instances, handleHeaderClear_fn)}
-          @forge-ai-chat-header-export=${this._handleExport}
-          @forge-ai-chat-header-info=${__privateMethod(this, _AiChatbotComponent_instances, handleHeaderInfo_fn)}
-          @forge-ai-chat-header-agent-change=${this._handleAgentChange}>
-          <slot name="icon" slot="icon">
-            <forge-ai-icon></forge-ai-icon>
-          </slot>
-        </forge-ai-chat-header>
-        ${__privateGet(this, _AiChatbotComponent_instances, sessionFilesTemplate_get)} ${__privateGet(this, _AiChatbotComponent_instances, messageThread_get)} ${__privateGet(this, _AiChatbotComponent_instances, promptSlot_get)}
-        ${when(this.disclaimerText, () => html`<div class="disclaimer" slot="disclaimer">${this.disclaimerText}</div>`)}
-      </forge-ai-chat-interface>
+      <div class="chatbot-container">
+        <forge-ai-chat-interface
+          ${ref(__privateGet(this, _chatInterfaceRef))}
+          role="region"
+          aria-label="AI chatbot"
+          aria-live="polite"
+          aria-busy=${this._isStreaming}>
+          <forge-ai-chat-header
+            ${ref(__privateGet(this, _headerRef))}
+            slot="header"
+            ?show-expand-button=${this.showExpandButton}
+            ?show-minimize-button=${this.showMinimizeButton}
+            ?show-conversations-button=${this.showConversationsButton}
+            ?expanded=${this.expanded}
+            ?disable-agent-selector=${this._isStreaming}
+            export-option=${this._hasMessages ? "enabled" : "off"}
+            clear-option=${this._hasMessages ? "enabled" : "off"}
+            .minimizeIcon=${this.minimizeIcon}
+            .agentInfo=${this.agentInfo}
+            .headingLevel=${this.headingLevel}
+            .titleText=${this.titleText}
+            .agents=${this.agents}
+            .selectedAgentId=${this.selectedAgentId}
+            @forge-ai-chat-header-expand=${__privateMethod(this, _AiChatbotComponent_instances, handleHeaderExpand_fn)}
+            @forge-ai-chat-header-minimize=${__privateMethod(this, _AiChatbotComponent_instances, handleHeaderMinimize_fn)}
+            @forge-ai-chat-header-clear=${__privateMethod(this, _AiChatbotComponent_instances, handleHeaderClear_fn)}
+            @forge-ai-chat-header-export=${this._handleExport}
+            @forge-ai-chat-header-info=${__privateMethod(this, _AiChatbotComponent_instances, handleHeaderInfo_fn)}
+            @forge-ai-chat-header-agent-change=${this._handleAgentChange}
+            @forge-ai-chat-header-conversations-toggle=${__privateMethod(this, _AiChatbotComponent_instances, handleConversationsToggle_fn)}>
+            <slot name="icon" slot="icon">
+              <forge-ai-icon></forge-ai-icon>
+            </slot>
+            <slot name="header-actions" slot="header-actions"></slot>
+          </forge-ai-chat-header>
+          ${__privateGet(this, _AiChatbotComponent_instances, messageThread_get)} ${__privateGet(this, _AiChatbotComponent_instances, promptSlot_get)}
+          ${when(
+      this.disclaimerText,
+      () => html`<div class="disclaimer" slot="disclaimer">${this.disclaimerText}</div>`
+    )}
+        </forge-ai-chat-interface>
+        ${when(
+      this.showConversationsButton,
+      () => html`
+            ${when(
+        this.conversationsOpen,
+        () => html` <div class="conversations-backdrop" @click=${__privateMethod(this, _AiChatbotComponent_instances, handleBackdropClick_fn)}></div> `
+      )}
+            <dialog
+              ${ref(__privateGet(this, _conversationsDialogRef))}
+              class="conversations-dialog forge-dialog forge-dialog--modal forge-dialog--left-sheet"
+              @close=${__privateMethod(this, _AiChatbotComponent_instances, handleConversationsDialogClose_fn)}>
+              <forge-ai-conversations-panel
+                ${ref(__privateGet(this, _conversationsPanelRef))}
+                .recentThreads=${this.recentThreads}
+                .selectedThreadId=${this._selectedThreadId}
+                ?show-back-button=${true}
+                ?show-conversation-rename=${this.showConversationRename}
+                ?show-conversation-delete=${this.showConversationDelete}
+                @forge-ai-conversations-panel-select=${__privateMethod(this, _AiChatbotComponent_instances, handleThreadSelect_fn)}
+                @forge-ai-conversations-panel-new-chat=${__privateMethod(this, _AiChatbotComponent_instances, handleNewChat_fn)}
+                @forge-ai-conversations-panel-close=${__privateMethod(this, _AiChatbotComponent_instances, handlePanelClose_fn)}
+                @forge-ai-conversations-panel-search=${__privateGet(this, _handleConversationSearch)}
+                @forge-ai-conversations-panel-load-more=${__privateGet(this, _handleConversationLoadMore)}
+                @forge-ai-conversations-panel-rename=${__privateGet(this, _handleConversationRename)}
+                @forge-ai-conversations-panel-delete=${__privateGet(this, _handleConversationDelete)}>
+              </forge-ai-conversations-panel>
+            </dialog>
+          `
+    )}
+      </div>
     `;
   }
 };
 _chatInterfaceRef = /* @__PURE__ */ new WeakMap();
 _headerRef = /* @__PURE__ */ new WeakMap();
+_conversationsPanelRef = /* @__PURE__ */ new WeakMap();
+_conversationsDialogRef = /* @__PURE__ */ new WeakMap();
+_boundEscapeHandler = /* @__PURE__ */ new WeakMap();
 _AiChatbotComponent_instances = /* @__PURE__ */ new WeakSet();
 handleHeaderExpand_fn = function() {
   this._dispatchHostEvent({ type: "forge-ai-chatbot-expand" });
@@ -367,13 +504,55 @@ handleHeaderClear_fn = function() {
 handleHeaderInfo_fn = function() {
   this._handleInfo();
 };
-sessionFilesTemplate_get = function() {
-  const content = this._sessionFilesTemplate;
-  if (content === nothing) {
-    return nothing;
+handleConversationsDialogClose_fn = function() {
+  window.removeEventListener("keydown", __privateGet(this, _boundEscapeHandler), { capture: true });
+  this.conversationsOpen = false;
+  this._dispatchHostEvent({ type: "forge-ai-chatbot-conversations-close" });
+};
+handleEscapeKey_fn = function(event) {
+  if (event.key === "Escape" && this.conversationsOpen) {
+    const path = event.composedPath();
+    const hasEscapeHandler = path.some((el) => el instanceof HTMLElement && el.hasAttribute("data-handles-escape"));
+    if (hasEscapeHandler) {
+      return;
+    }
+    event.stopPropagation();
+    event.preventDefault();
+    this.hideConversations();
+  }
+};
+handleBackdropClick_fn = function() {
+  this.hideConversations();
+};
+handleConversationsToggle_fn = function() {
+  this.toggleConversations();
+};
+handleThreadSelect_fn = function(evt) {
+  const { id, title } = evt.detail;
+  this._selectedThreadId = id;
+  this._dispatchHostEvent({
+    type: "forge-ai-chatbot-conversation-select",
+    detail: { id, title }
+  });
+  this.hideConversations();
+};
+handleNewChat_fn = function(event) {
+  if (event.defaultPrevented) {
+    return;
+  }
+  const hostEvent = this._dispatchHostEvent({ type: "forge-ai-chatbot-new-chat", cancelable: true });
+  if (!hostEvent.defaultPrevented) {
+    this.startNewChat();
   }
-  return html`<div class="session-files" slot="attachments">${content}</div>`;
+  this.hideConversations();
+};
+handlePanelClose_fn = function() {
+  this.hideConversations();
 };
+_handleConversationSearch = /* @__PURE__ */ new WeakMap();
+_handleConversationLoadMore = /* @__PURE__ */ new WeakMap();
+_handleConversationRename = /* @__PURE__ */ new WeakMap();
+_handleConversationDelete = /* @__PURE__ */ new WeakMap();
 promptSlot_get = function() {
   const isUploading = this._isUploading;
   return html`
@@ -383,13 +562,15 @@ promptSlot_get = function() {
         .placeholder=${this.placeholder}
         .running=${this._isStreaming || isUploading}
         .slashCommands=${this._slashCommands}
+        .contextItems=${this._allContextItems}
         ?disabled=${isUploading}
         ?debug-mode=${this.debugMode}
         @forge-ai-prompt-send=${this._handleSend}
         @forge-ai-prompt-stop=${this._handleStop}
         @forge-ai-prompt-cancel=${this._handleCancel}
         @forge-ai-prompt-debug-toggle=${this._handleDebugToggle}
-        @forge-ai-prompt-command=${this._handleSlashCommand}>
+        @forge-ai-prompt-command=${this._handleSlashCommand}
+        @forge-ai-prompt-context-remove=${this._handlePromptContextRemove}>
         ${when(
     this.fileUpload === "on",
     () => html`
@@ -457,6 +638,24 @@ __decorateClass([
 __decorateClass([
   property({ attribute: "minimize-icon" })
 ], AiChatbotComponent.prototype, "minimizeIcon", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "show-conversations-button" })
+], AiChatbotComponent.prototype, "showConversationsButton", 2);
+__decorateClass([
+  property({ type: Array, attribute: false })
+], AiChatbotComponent.prototype, "recentThreads", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "conversations-open", reflect: true })
+], AiChatbotComponent.prototype, "conversationsOpen", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "show-conversation-rename" })
+], AiChatbotComponent.prototype, "showConversationRename", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "show-conversation-delete" })
+], AiChatbotComponent.prototype, "showConversationDelete", 2);
+__decorateClass([
+  state()
+], AiChatbotComponent.prototype, "_selectedThreadId", 2);
 AiChatbotComponent = __decorateClass([
   customElement(AiChatbotComponentTagName)
 ], AiChatbotComponent);

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

@@ -1,4 +1,4 @@
-const styles = '/* prettier-ignore */\n:host {\n  display: block;\n  width: 100%;\n  height: 100%;\n  --_ai-chatbot-icon-shape: var(--forge-ai-chatbot-icon-shape, calc(var(--forge-shape-round, 50%) * var(--forge-shape-factor, 1)));\n}\n\nforge-ai-chat-interface::part(messages) {\n  overflow: hidden;\n}\nforge-ai-chat-interface forge-ai-message-thread {\n  min-height: 0;\n}\n\n.session-files {\n  display: flex;\n  flex-direction: column;\n  gap: var(--forge-spacing-xsmall, 8px);\n  min-width: 0;\n}\n.session-files .session-files-header {\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-font-smoothing: antialiased;\n  font-family: var(--forge-typography-label1-font-family, var(--forge-typography-font-family, "Roboto", sans-serif));\n  font-size: var(--forge-typography-label1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, 0.75)));\n  font-weight: var(--forge-typography-label1-font-weight, 400);\n  line-height: var(--forge-typography-label1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));\n  letter-spacing: var(--forge-typography-label1-letter-spacing, 0.0357142857em);\n  text-transform: var(--forge-typography-label1-text-transform, inherit);\n  text-decoration: var(--forge-typography-label1-text-decoration, inherit);\n  color: var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6));\n}\n.session-files .session-files-list::-webkit-scrollbar {\n  height: var(--forge-scrollbar-height, 16px);\n  width: var(--forge-scrollbar-width, 16px);\n}\n.session-files .session-files-list::-webkit-scrollbar-track {\n  background-color: var(--forge-scrollbar-track-container, var(--forge-theme-surface-container-low, #ebebeb));\n}\n.session-files .session-files-list::-webkit-scrollbar-track:hover {\n  background-color: var(--forge-scrollbar-track-container-hover, var(--forge-theme-surface-container-low, #ebebeb));\n}\n.session-files .session-files-list::-webkit-scrollbar-corner {\n  background-color: var(--forge-scrollbar-track-container, var(--forge-theme-surface-container-low, #ebebeb));\n}\n.session-files .session-files-list::-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.session-files .session-files-list::-webkit-scrollbar-thumb:hover {\n  background-color: var(--forge-scrollbar-thumb-container-hover, var(--forge-theme-surface-container-high, #9e9e9e));\n}\n.session-files .session-files-list {\n  display: flex;\n  gap: var(--forge-spacing-small, 12px);\n  overflow-x: auto;\n  padding-block-end: var(--forge-spacing-xsmall, 8px);\n}\n\n.disclaimer {\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-font-smoothing: antialiased;\n  font-family: var(--forge-typography-label1-font-family, var(--forge-typography-font-family, "Roboto", sans-serif));\n  font-size: var(--forge-typography-label1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, 0.75)));\n  font-weight: var(--forge-typography-label1-font-weight, 400);\n  line-height: var(--forge-typography-label1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));\n  letter-spacing: var(--forge-typography-label1-letter-spacing, 0.0357142857em);\n  text-transform: var(--forge-typography-label1-text-transform, inherit);\n  text-decoration: var(--forge-typography-label1-text-decoration, inherit);\n  color: var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6));\n  text-align: center;\n  margin-block-start: var(--forge-spacing-xxsmall, 4px);\n  margin-block-end: calc(var(--forge-spacing-small, 12px) * -1);\n}\n\n.suggestions-container {\n  width: 100%;\n  align-self: start;\n}\n\n.empty-state-icon,\n::slotted([slot=empty-state-icon]) {\n  height: 200px;\n  width: 200px;\n  border-radius: var(--_ai-chatbot-icon-shape);\n}';
+const styles = '/* prettier-ignore */\n/**\n * @license\n * Copyright Tyler Technologies, Inc.\n * License: Apache-2.0\n */\n@keyframes forge-dialog-zoom-in {\n  from {\n    opacity: var(--_dialog-zoom-opacity);\n    scale: var(--_dialog-zoom-scale);\n  }\n  to {\n    opacity: 1;\n    scale: 1;\n  }\n}\n@keyframes forge-dialog-zoom-out {\n  from {\n    opacity: 1;\n    scale: 1;\n  }\n  to {\n    opacity: var(--_dialog-zoom-opacity);\n    scale: var(--_dialog-zoom-scale);\n  }\n}\n@keyframes forge-dialog-fade-in {\n  from {\n    opacity: var(--_dialog-fade-opacity);\n  }\n  to {\n    opacity: 1;\n  }\n}\n@keyframes forge-dialog-fade-out {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: var(--_dialog-fade-opacity);\n  }\n}\n@keyframes forge-dialog-slide-in {\n  from {\n    opacity: var(--_dialog-slide-opacity);\n    translate: var(--_dialog-slide-translate);\n  }\n  to {\n    opacity: 1;\n    translate: 0 0;\n  }\n}\n@keyframes forge-dialog-slide-out {\n  from {\n    opacity: 1;\n    translate: 0 0;\n  }\n  to {\n    opacity: var(--_dialog-slide-opacity);\n    translate: var(--_dialog-slide-translate);\n  }\n}\n.forge-dialog {\n  --_dialog-background:var(--forge-dialog-background, var(--forge-theme-surface-bright, #ffffff));\n  --_dialog-shape:var(--forge-dialog-shape, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));\n  --_dialog-elevation:var(--forge-dialog-elevation, 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12));\n  --_dialog-spacing:var(--forge-dialog-spacing, auto);\n  --_dialog-block-start-spacing:var(--forge-dialog-block-start-spacing, var(--_dialog-spacing));\n  --_dialog-block-end-spacing:var(--forge-dialog-block-end-spacing, var(--_dialog-spacing));\n  --_dialog-inline-start-spacing:var(--forge-dialog-inline-start-spacing, var(--_dialog-spacing));\n  --_dialog-inline-end-spacing:var(--forge-dialog-inline-end-spacing, var(--_dialog-spacing));\n  --_dialog-padding:var(--forge-dialog-padding, 0);\n  --_dialog-width:var(--forge-dialog-width, fit-content);\n  --_dialog-height:var(--forge-dialog-height, fit-content);\n  --_dialog-min-width:var(--forge-dialog-min-width, 0);\n  --_dialog-max-width:var(--forge-dialog-max-width, calc(100% - var(--forge-spacing-xxlarge, 48px)));\n  --_dialog-min-height:var(--forge-dialog-min-height, 0);\n  --_dialog-max-height:var(--forge-dialog-max-height, calc(100% - var(--forge-spacing-xxlarge, 48px)));\n  --_dialog-z-index:var(--forge-dialog-z-index, var(--forge-z-index-dialog, 8));\n  --_dialog-move-handle-color:var(--forge-dialog-move-handle-color, currentColor);\n  --_dialog-move-handle-size:var(--forge-dialog-move-handle-size, 24px);\n  --_dialog-move-handle-hover-cursor:var(--forge-dialog-move-handle-hover-cursor, grab);\n  --_dialog-move-handle-active-cursor:var(--forge-dialog-move-handle-active-cursor, grabbing);\n  --_dialog-move-handle-spacing:var(--forge-dialog-move-handle-spacing, calc(var(--forge-spacing-xxsmall, 4px) * -1) 0 0);\n  --_dialog-move-transition-duration:var(--forge-dialog-move-transition-duration, var(--forge-animation-duration-short4, 200ms));\n  --_dialog-move-transition-easing:var(--forge-dialog-move-transition-easing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));\n  --_dialog-moving-opacity:var(--forge-dialog-moving-opacity, 0.54);\n  --_dialog-enter-animation-duration:var(--forge-dialog-enter-animation-duration, var(--forge-animation-duration-medium1, 250ms));\n  --_dialog-enter-animation-easing:var(--forge-dialog-enter-animation-easing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));\n  --_dialog-exit-animation-duration:var(--forge-dialog-exit-animation-duration, var(--forge-animation-duration-short2, 100ms));\n  --_dialog-exit-animation-easing:var(--forge-dialog-exit-animation-easing, var(--forge-animation-easing-emphasized-accelerate, cubic-bezier(0.3, 0, 0.8, 0.15)));\n  --_dialog-zoom-opacity:var(--forge-dialog-zoom-opacity, 0);\n  --_dialog-zoom-scale:var(--forge-dialog-zoom-scale, 0.8);\n  --_dialog-fade-opacity:var(--forge-dialog-fade-opacity, 0);\n  --_dialog-slide-opacity:var(--forge-dialog-slide-opacity, 0);\n  --_dialog-slide-translate:var(--forge-dialog-slide-translate, 0 -30%);\n  --_dialog-backdrop-opacity:var(--forge-dialog-backdrop-opacity, var(--forge-backdrop-opacity, 0.54));\n  --_dialog-nonmodal-elevation:var(--forge-dialog-nonmodal-elevation, 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  --_dialog-fullscreen-enter-animation-duration:var(--forge-dialog-fullscreen-enter-animation-duration, var(--forge-animation-duration-medium1, 250ms));\n  --_dialog-fullscreen-exit-animation-duration:var(--forge-dialog-fullscreen-exit-animation-duration, var(--forge-animation-duration-short2, 100ms));\n  --_dialog-position-x:var(--forge-dialog-position-x, 0);\n  --_dialog-position-y:var(--forge-dialog-position-y, 0);\n  --_dialog-preset-sheet-enter-animation-duration:var(--forge-dialog-preset-sheet-enter-animation-duration, var(--forge-animation-duration-medium1, 250ms));\n  --_dialog-preset-sheet-exit-animation-duration:var(--forge-dialog-preset-sheet-exit-animation-duration, var(--forge-animation-duration-short3, 150ms));\n  --_backdrop-background:var(--forge-backdrop-background, #000);\n  --_backdrop-opacity:var(--forge-backdrop-opacity, 0.54);\n  --_backdrop-z-index:var(--forge-backdrop-z-index, var(--forge-z-index-backdrop, 7));\n  --_backdrop-enter-animation-duration:var(--forge-backdrop-enter-animation-duration, var(--forge-animation-duration-short4, 200ms));\n  --_backdrop-enter-animation-easing:var(--forge-backdrop-enter-animation-easing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));\n  --_backdrop-exit-animation-duration:var(--forge-backdrop-exit-animation-duration, var(--forge-animation-duration-short1, 50ms));\n  --_backdrop-exit-animation-easing:var(--forge-backdrop-exit-animation-easing, var(--forge-animation-easing-emphasized-accelerate, cubic-bezier(0.3, 0, 0.8, 0.15)));\n  --forge-theme-surface: var(--forge-theme-surface-bright, #ffffff);\n}\n\n.forge-dialog {\n  position: fixed;\n  inset: 0;\n  z-index: var(--_dialog-z-index);\n  background-color: rgba(0, 0, 0, 0);\n  color: inherit;\n  border: none;\n  width: auto;\n  height: auto;\n  padding: 0;\n  margin: 0;\n  overflow: visible;\n  max-width: 100%;\n  max-height: 100%;\n  box-sizing: border-box;\n  position: absolute;\n  inset: 0;\n  display: flex;\n  background: var(--_dialog-background);\n  box-shadow: var(--_dialog-elevation);\n  z-index: var(--_dialog-z-index);\n  overflow: hidden;\n  border-radius: var(--_dialog-shape);\n  margin-block-start: var(--_dialog-block-start-spacing);\n  margin-block-end: var(--_dialog-block-end-spacing);\n  margin-inline-start: var(--_dialog-inline-start-spacing);\n  margin-inline-end: var(--_dialog-inline-end-spacing);\n  padding: var(--_dialog-padding);\n  width: var(--_dialog-width);\n  height: var(--_dialog-height);\n  min-width: var(--_dialog-min-width);\n  max-width: var(--_dialog-max-width);\n  min-height: var(--_dialog-min-height);\n  max-height: var(--_dialog-max-height);\n  box-sizing: border-box;\n  animation-duration: var(--_dialog-exit-animation-duration);\n  animation-timing-function: var(--_dialog-exit-animation-easing);\n  position: fixed;\n  transition-property: display, opacity, overlay, scale;\n  transition-behavior: allow-discrete;\n}\n\n.forge-dialog > forge-scaffold {\n  height: auto;\n}\n\n.forge-dialog--fullscreen {\n  --_dialog-enter-animation-duration:var(--_dialog-fullscreen-enter-animation-duration);\n  --_dialog-exit-animation-duration:var(--_dialog-fullscreen-exit-animation-duration);\n  height: 100%;\n  width: 100%;\n  max-width: none;\n  max-height: none;\n  border-radius: 0;\n  box-shadow: none;\n}\n\n.forge-dialog:not(:modal) {\n  --_dialog-elevation:var(--_dialog-nonmodal-elevation);\n  pointer-events: all;\n}\n\n.forge-dialog--moveable {\n  user-select: none;\n  transition-property: opacity;\n  transition-duration: var(--_dialog-move-transition-duration);\n  transition-timing-function: var(--_dialog-move-transition-easing);\n}\n\n.forge-dialog--moved {\n  margin: 0;\n}\n\n.forge-dialog--moving {\n  opacity: var(--_dialog-moving-opacity);\n}\n\n.forge-dialog__move-handle {\n  fill: var(--_dialog-move-handle-color);\n  height: var(--_dialog-move-handle-size);\n  width: var(--_dialog-move-handle-size);\n  margin: var(--_dialog-move-handle-spacing);\n  touch-action: none;\n}\n\n.forge-dialog__move-handle:hover {\n  cursor: var(--_dialog-move-handle-hover-cursor);\n}\n\n.forge-dialog__move-handle:active {\n  cursor: var(--_dialog-move-handle-active-cursor);\n}\n\n.forge-dialog__move-handle-container {\n  position: absolute;\n  top: 0;\n  z-index: 1;\n  display: flex;\n  justify-content: center;\n  width: 100%;\n}\n\n.forge-dialog--top {\n  --_dialog-block-start-spacing:var(--forge-dialog-block-start-spacing, 0);\n  top: 0;\n  bottom: auto;\n}\n\n.forge-dialog--top-right {\n  --_dialog-spacing:var(--forge-dialog-spacing, 0);\n  top: 0;\n  left: auto;\n  right: 0;\n  bottom: auto;\n}\n\n.forge-dialog--top-left {\n  --_dialog-spacing:var(--forge-dialog-spacing, 0);\n  top: 0;\n  left: 0;\n  right: auto;\n  bottom: auto;\n}\n\n.forge-dialog--bottom {\n  --_dialog-block-end-spacing:var(--forge-dialog-block-end-spacing, 0);\n  top: auto;\n  bottom: 0;\n}\n\n.forge-dialog--bottom-right {\n  --_dialog-spacing:var(--forge-dialog-spacing, 0);\n  top: auto;\n  left: auto;\n  right: 0;\n  bottom: 0;\n}\n\n.forge-dialog--bottom-left {\n  --_dialog-spacing:var(--forge-dialog-spacing, 0);\n  top: auto;\n  left: 0;\n  right: auto;\n  bottom: 0;\n}\n\n.forge-dialog--right {\n  --_dialog-spacing:var(--forge-dialog-spacing, 0);\n  top: auto;\n  left: auto;\n  right: 0;\n  bottom: auto;\n}\n\n.forge-dialog--left {\n  --_dialog-spacing:var(--forge-dialog-spacing, 0);\n  top: auto;\n  left: 0;\n  right: auto;\n  bottom: auto;\n}\n\n.forge-dialog--custom {\n  margin: 0;\n  top: var(--_dialog-position-x);\n  left: var(--_dialog-position-y);\n}\n\n.forge-dialog--bottom-sheet {\n  --_dialog-enter-animation-duration:var(--_dialog-preset-sheet-enter-animation-duration);\n  --_dialog-exit-animation-duration:var(--_dialog-preset-sheet-exit-animation-duration);\n  --_dialog-max-width:var(--forge-dialog-max-width, none);\n  --_dialog-max-height:var(--forge-dialog-max-height, none);\n  inset: auto;\n  display: inline-flex;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  border-bottom-left-radius: 0;\n  border-bottom-right-radius: 0;\n  --_dialog-slide-translate:var(--forge-dialog-slide-translate, 0 100%);\n}\n\n.forge-dialog--bottom-sheet.forge-dialog {\n  transition-property: display, opacity, overlay, translate;\n}\n\n.forge-dialog--bottom-sheet.forge-dialog[open] {\n  translate: 0 0;\n}\n\n@starting-style {\n  .forge-dialog--bottom-sheet.forge-dialog[open] {\n    opacity: var(--_dialog-slide-opacity);\n    translate: var(--_dialog-slide-translate);\n  }\n}\n.forge-dialog--bottom-sheet.forge-dialog:not([open]) {\n  opacity: var(--_dialog-slide-opacity);\n  scale: 1;\n  translate: var(--_dialog-slide-translate);\n}\n\n.forge-dialog--left-sheet {\n  --_dialog-enter-animation-duration:var(--_dialog-preset-sheet-enter-animation-duration);\n  --_dialog-exit-animation-duration:var(--_dialog-preset-sheet-exit-animation-duration);\n  --_dialog-max-width:var(--forge-dialog-max-width, none);\n  --_dialog-max-height:var(--forge-dialog-max-height, none);\n  inset: auto;\n  display: inline-flex;\n  left: 0;\n  bottom: 0;\n  top: 0;\n  height: 100%;\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n  --_dialog-slide-translate:var(--forge-dialog-slide-translate, -100% 0);\n}\n\n.forge-dialog--left-sheet.forge-dialog {\n  transition-property: display, opacity, overlay, translate;\n}\n\n.forge-dialog--left-sheet.forge-dialog[open] {\n  translate: 0 0;\n}\n\n@starting-style {\n  .forge-dialog--left-sheet.forge-dialog[open] {\n    opacity: var(--_dialog-slide-opacity);\n    translate: var(--_dialog-slide-translate);\n  }\n}\n.forge-dialog--left-sheet.forge-dialog:not([open]) {\n  opacity: var(--_dialog-slide-opacity);\n  scale: 1;\n  translate: var(--_dialog-slide-translate);\n}\n\n.forge-dialog--right-sheet {\n  --_dialog-enter-animation-duration:var(--_dialog-preset-sheet-enter-animation-duration);\n  --_dialog-exit-animation-duration:var(--_dialog-preset-sheet-exit-animation-duration);\n  --_dialog-max-width:var(--forge-dialog-max-width, none);\n  --_dialog-max-height:var(--forge-dialog-max-height, none);\n  inset: auto;\n  display: inline-flex;\n  right: 0;\n  bottom: 0;\n  top: 0;\n  height: 100%;\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n  --_dialog-slide-translate:var(--forge-dialog-slide-translate, 100% 0);\n}\n\n.forge-dialog--right-sheet.forge-dialog {\n  transition-property: display, opacity, overlay, translate;\n}\n\n.forge-dialog--right-sheet.forge-dialog[open] {\n  translate: 0 0;\n}\n\n@starting-style {\n  .forge-dialog--right-sheet.forge-dialog[open] {\n    opacity: var(--_dialog-slide-opacity);\n    translate: var(--_dialog-slide-translate);\n  }\n}\n.forge-dialog--right-sheet.forge-dialog:not([open]) {\n  opacity: var(--_dialog-slide-opacity);\n  scale: 1;\n  translate: var(--_dialog-slide-translate);\n}\n\n.forge-dialog--top-sheet {\n  --_dialog-enter-animation-duration:var(--_dialog-preset-sheet-enter-animation-duration);\n  --_dialog-exit-animation-duration:var(--_dialog-preset-sheet-exit-animation-duration);\n  --_dialog-max-width:var(--forge-dialog-max-width, none);\n  --_dialog-max-height:var(--forge-dialog-max-height, none);\n  inset: auto;\n  display: inline-flex;\n  top: 0;\n  left: 0;\n  right: 0;\n  border-top-left-radius: 0;\n  border-top-right-radius: 0;\n  --_dialog-slide-translate:var(--forge-dialog-slide-translate, 0 -100%);\n}\n\n.forge-dialog--top-sheet.forge-dialog {\n  transition-property: display, opacity, overlay, translate;\n}\n\n.forge-dialog--top-sheet.forge-dialog[open] {\n  translate: 0 0;\n}\n\n@starting-style {\n  .forge-dialog--top-sheet.forge-dialog[open] {\n    opacity: var(--_dialog-slide-opacity);\n    translate: var(--_dialog-slide-translate);\n  }\n}\n.forge-dialog--top-sheet.forge-dialog:not([open]) {\n  opacity: var(--_dialog-slide-opacity);\n  scale: 1;\n  translate: var(--_dialog-slide-translate);\n}\n\n.forge-dialog::backdrop {\n  --forge-backdrop-opacity: var(--_backdrop-opacity);\n  --forge-backdrop-enter-animation-duration: var(--_backdrop-enter-animation-duration);\n  --forge-backdrop-enter-animation-easing: var(--_backdrop-enter-animation-easing);\n  --forge-backdrop-exit-animation-duration: var(--_backdrop-exit-animation-duration);\n  --forge-backdrop-exit-animation-easing: var(--_backdrop-exit-animation-easing);\n  position: absolute;\n  inset: 0;\n  z-index: var(--_backdrop-z-index);\n  background: var(--_backdrop-background);\n  opacity: 0;\n  animation-fill-mode: forwards;\n  transition-property: display, opacity, overlay;\n}\n\n.forge-dialog[open] {\n  opacity: 1;\n  scale: 1;\n  transition-duration: var(--_dialog-enter-animation-duration);\n  transition-timing-function: var(--_dialog-enter-animation-easing);\n}\n\n@starting-style {\n  .forge-dialog[open] {\n    opacity: var(--_dialog-zoom-opacity);\n    scale: var(--_dialog-zoom-scale);\n  }\n}\n.forge-dialog[open]::backdrop {\n  opacity: var(--_backdrop-opacity);\n  transition-duration: var(--_backdrop-enter-animation-duration);\n  transition-timing-function: var(--_backdrop-enter-animation-easing);\n}\n\n@starting-style {\n  .forge-dialog[open]::backdrop {\n    opacity: 0;\n  }\n}\n.forge-dialog:not([open]) {\n  animation-duration: var(--_dialog-enter-animation-duration);\n  animation-timing-function: var(--_dialog-enter-animation-easing);\n  display: none;\n  opacity: var(--_dialog-zoom-opacity);\n  scale: var(--_dialog-zoom-scale);\n  transition-duration: var(--_dialog-exit-animation-duration);\n  transition-timing-function: var(--_dialog-exit-animation-easing);\n}\n\n.forge-dialog:not([open])::backdrop {\n  transition-duration: var(--_backdrop-exit-animation-duration);\n  transition-timing-function: var(--_backdrop-exit-animation-easing);\n}\n\n.forge-dialog--animation-fade.forge-dialog {\n  transition-property: display, opacity, overlay;\n}\n\n@starting-style {\n  .forge-dialog--animation-fade.forge-dialog[open] {\n    opacity: var(--_dialog-fade-opacity);\n  }\n}\n.forge-dialog--animation-fade.forge-dialog:not([open]) {\n  opacity: var(--_dialog-fade-opacity);\n  scale: 1;\n}\n\n.forge-dialog--animation-slide.forge-dialog {\n  transition-property: display, opacity, overlay, translate;\n}\n\n.forge-dialog--animation-slide.forge-dialog[open] {\n  translate: 0 0;\n}\n\n@starting-style {\n  .forge-dialog--animation-slide.forge-dialog[open] {\n    opacity: var(--_dialog-slide-opacity);\n    translate: var(--_dialog-slide-translate);\n  }\n}\n.forge-dialog--animation-slide.forge-dialog:not([open]) {\n  opacity: var(--_dialog-slide-opacity);\n  scale: 1;\n  translate: var(--_dialog-slide-translate);\n}\n\n.forge-dialog--animation-none {\n  --_dialog-enter-animation-duration:var(--forge-dialog-enter-animation-duration, 0s);\n  --_dialog-exit-animation-duration:var(--forge-dialog-exit-animation-duration, 0s);\n  --_backdrop-enter-animation-duration:var(--forge-backdrop-enter-animation-duration, 0s);\n  --_backdrop-exit-animation-duration:var(--forge-backdrop-exit-animation-duration, 0s);\n}\n\n@media (prefers-reduced-motion) {\n  .forge-dialog.forge-dialog {\n    transition-property: display, opacity, overlay;\n  }\n  @starting-style {\n    .forge-dialog.forge-dialog[open] {\n      opacity: var(--_dialog-fade-opacity);\n    }\n  }\n  .forge-dialog.forge-dialog:not([open]) {\n    opacity: var(--_dialog-fade-opacity);\n    scale: 1;\n  }\n}\n:host {\n  display: block;\n  width: 100%;\n  height: 100%;\n  --_ai-chatbot-icon-shape: var(--forge-ai-chatbot-icon-shape, calc(var(--forge-shape-round, 50%) * var(--forge-shape-factor, 1)));\n}\n\n.chatbot-container {\n  position: relative;\n  display: grid;\n  height: 100%;\n  overflow: hidden;\n}\n\nforge-ai-chat-interface::part(messages) {\n  overflow: hidden;\n}\nforge-ai-chat-interface forge-ai-message-thread {\n  min-height: 0;\n}\n\n.disclaimer {\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-font-smoothing: antialiased;\n  font-family: var(--forge-typography-label1-font-family, var(--forge-typography-font-family, "Roboto", sans-serif));\n  font-size: var(--forge-typography-label1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, 0.75)));\n  font-weight: var(--forge-typography-label1-font-weight, 400);\n  line-height: var(--forge-typography-label1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));\n  letter-spacing: var(--forge-typography-label1-letter-spacing, 0.0357142857em);\n  text-transform: var(--forge-typography-label1-text-transform, inherit);\n  text-decoration: var(--forge-typography-label1-text-decoration, inherit);\n  color: var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6));\n  text-align: center;\n  margin-block-start: var(--forge-spacing-xxsmall, 4px);\n  margin-block-end: calc(var(--forge-spacing-small, 12px) * -1);\n}\n\n.suggestions-container {\n  width: 100%;\n  align-self: start;\n}\n\n.empty-state-icon,\n::slotted([slot=empty-state-icon]) {\n  height: 200px;\n  width: 200px;\n  border-radius: var(--_ai-chatbot-icon-shape);\n}\n\n.conversations-backdrop {\n  position: absolute;\n  inset: 0;\n  background-color: transparent;\n  z-index: 1;\n}\n\n.conversations-dialog {\n  display: grid;\n  width: min(90%, 360px);\n  padding: 0;\n  border: 0;\n  position: absolute;\n  z-index: 2;\n  --forge-dialog-shape: 0;\n  --forge-dialog-nonmodal-elevation: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);\n}';
 export {
   styles as default
 };

package/dist/ai-chatbot/index.d.ts

@@ -4,7 +4,7 @@ export type { ForgeAiChatbotMessageEventData, ForgeAiChatbotToolCallEventData, F
 export { AiChatbotToolCallComponent, AiChatbotToolCallComponentTagName } from './ai-chatbot-tool-call.js';
 export type { Suggestion } from '../ai-suggestions/index.js';
 export { AgentAdapter, type MessageStartEvent, type MessageDeltaEvent, type MessageEndEvent, type ToolCallEvent, type ToolCallStartEvent, type ToolCallArgsEvent, type ToolCallEndEvent, type FileUploadEvent, type FileRemoveEvent, type AdapterState, type ErrorEvent, type CustomAgentEvent, type RawAgentEvent, type RunStartedAgentEvent, type StepStartedAgentEvent, type StepFinishedAgentEvent, type StateSnapshotAgentEvent, type StateDeltaAgentEvent, type ActivitySnapshotAgentEvent, type ActivityDeltaAgentEvent } from './agent-adapter.js';
-export type { Agent, ChatMessage, ToolDefinition, ToolCall, ToolRenderer, IToolRenderer, HandlerContext, ToolStartContext, ToolDeltaContext, ToolEndContext, FileAttachment, UploadedFileMetadata, FileUploadCallbacks, FileUploadHandler, FileRemoveCallbacks, ThreadState, FeedbackType, ResponseFeedback } from './types.js';
+export type { Agent, ChatMessage, ContextItem, ToolDefinition, ToolCall, ToolRenderer, IToolRenderer, HandlerContext, ToolStartContext, ToolDeltaContext, ToolEndContext, FileAttachment, UploadedFileMetadata, FileUploadCallbacks, FileUploadHandler, FileRemoveCallbacks, ThreadState, FeedbackType, ResponseFeedback, ForgeAiChatbotContextRemoveEventData } from './types.js';
 export * from './ag-ui-adapter.js';
 export * from './http-agent-with-credentials.js';
 export * from './event-emitter.js';

package/dist/ai-chatbot/types.d.ts

@@ -1,3 +1,4 @@
+import { Thread } from '../ai-threads';
 /**
  * Valid HTML heading levels for accessibility and semantic structure
  */
@@ -277,3 +278,41 @@ export interface ThreadState {
     timestamp?: number;
     selectedAgentId?: string;
 }
+export interface ForgeAiChatbotConversationSelectEventData {
+    id: string;
+    title: string;
+}
+export interface ForgeAiChatbotConversationSearchEventData {
+    query: string;
+    setResults: (results: Thread[]) => void;
+}
+export interface ForgeAiChatbotConversationLoadMoreEventData {
+    query: string;
+    appendResults: (results: Thread[]) => void;
+}
+export interface ForgeAiChatbotConversationRenameEventData {
+    id: string;
+    oldTitle: string;
+    newTitle: string;
+    onSuccess: () => void;
+    onError: (error?: string) => void;
+}
+export interface ForgeAiChatbotConversationDeleteEventData {
+    id: string;
+    thread: Thread;
+    onSuccess: () => void;
+    onError: (error?: string) => void;
+}
+export interface ContextItem {
+    id: string;
+    label: string;
+    removable?: boolean;
+    sublabel?: string;
+    loading?: boolean;
+    type?: 'file' | 'context';
+}
+export interface ForgeAiChatbotContextRemoveEventData {
+    id: string;
+    item: ContextItem;
+}
+export type { Thread };

package/dist/ai-chatbot/utils.d.ts

@@ -1,3 +1,4 @@
+import { FileAttachment, ContextItem } from './types.js';
 /**
  * Generates a unique ID using UUID v4
  */
@@ -10,3 +11,7 @@ export declare function renderMarkdown(content: string): string;
  * Downloads content as a file with specified MIME type
  */
 export declare function downloadFile(content: string, filename: string, mimeType?: string): void;
+/**
+ * Converts file attachments to context items
+ */
+export declare function fileAttachmentsToContextItems(completedAttachments: FileAttachment[], pendingAttachments: FileAttachment[]): ContextItem[];

package/dist/ai-chatbot/utils.mjs

@@ -36,8 +36,36 @@ function downloadFile(content, filename, mimeType = "text/plain") {
   document.body.removeChild(link);
   URL.revokeObjectURL(url);
 }
+function fileAttachmentsToContextItems(completedAttachments, pendingAttachments) {
+  const pending = pendingAttachments.map((file) => ({
+    id: file.id,
+    label: file.filename,
+    sublabel: formatBytes(file.size),
+    loading: file.uploading ?? true,
+    removable: true,
+    type: "file"
+  }));
+  const completed = completedAttachments.map((file) => ({
+    id: file.id,
+    label: file.filename,
+    sublabel: formatBytes(file.size),
+    removable: true,
+    type: "file"
+  }));
+  return [...pending, ...completed];
+}
+function formatBytes(bytes) {
+  if (bytes === 0) {
+    return "0 B";
+  }
+  const k = 1024;
+  const sizes = ["B", "KB", "MB", "GB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return `${Math.round(bytes / Math.pow(k, i) * 100) / 100} ${sizes[i]}`;
+}
 export {
   downloadFile,
+  fileAttachmentsToContextItems,
   generateId,
   renderMarkdown
 };

package/dist/ai-chatbot-launcher/ai-chatbot-launcher.d.ts

@@ -4,14 +4,30 @@ import { AiPromptComponent, ForgeAiPromptSendEventData } from '../ai-prompt';
 import { ForgeAiSuggestionsEventData } from '../ai-suggestions';
 import { AiChatbotBase } from '../ai-chatbot/ai-chatbot-base.js';
 import { ChatMessage, ThreadState } from '../ai-chatbot/types.js';
+import { Thread } from '../ai-threads/ai-threads';
 import { Ref } from 'lit/directives/ref.js';
 export type LauncherViewState = 'welcome' | 'conversation';
+export interface ForgeAiChatbotLauncherThreadRenameEventData {
+    id: string;
+    oldTitle: string;
+    newTitle: string;
+    onSuccess: () => void;
+    onError: (error?: string) => void;
+}
+export interface ForgeAiChatbotLauncherThreadDeleteEventData {
+    id: string;
+    thread: Thread;
+    onSuccess: () => void;
+    onError: (error?: string) => void;
+}
 declare global {
     interface HTMLElementTagNameMap {
         'forge-ai-chatbot-launcher': AiChatbotLauncherComponent;
     }
     interface HTMLElementEventMap {
         'forge-ai-chatbot-launcher-conversation-start': CustomEvent<void>;
+        'forge-ai-chatbot-launcher-thread-rename': CustomEvent<ForgeAiChatbotLauncherThreadRenameEventData>;
+        'forge-ai-chatbot-launcher-thread-delete': CustomEvent<ForgeAiChatbotLauncherThreadDeleteEventData>;
     }
 }
 export declare const AiChatbotLauncherComponentTagName: keyof HTMLElementTagNameMap;
@@ -26,8 +42,9 @@ export declare const AiChatbotLauncherComponentTagName: keyof HTMLElementTagName
  * In conversation mode, a header is displayed with options for clear, export, and agent selection.
  *
  * @slot icon - Slot for custom icon (used in both welcome view and conversation header)
- * @slot heading - Slot for custom heading content
- * @slot description - Slot for custom description/welcome message below the title
+ * @slot heading - Slot for custom heading content (welcome view only)
+ * @slot description - Slot for custom description/welcome message below the title (welcome view only)
+ * @slot header-actions - Slot for custom header action buttons in conversation mode (rendered before built-in header actions)
  *
  * @property {string} titleText - The title text to display in the welcome view and header (default: 'AI Assistant')
  * @property {string} descriptionText - The description text displayed below the title in the welcome view.
@@ -36,6 +53,9 @@ export declare const AiChatbotLauncherComponentTagName: keyof HTMLElementTagName
  * @property {AgentInfo} agentInfo - Agent metadata for info dialog
  * @property {Agent[]} agents - List of available agents for selector
  * @property {string} selectedAgentId - Currently selected agent ID
+ * @property {string} threadName - The name of the current thread (shown in conversation view breadcrumb)
+ * @property {boolean} showThreadRename - Whether to show the rename option in thread actions menu
+ * @property {boolean} showThreadDelete - Whether to show the delete option in thread actions menu
  *
  * @cssproperty --forge-ai-chatbot-launcher-icon-color - The fill color for the AI icon.
  *
@@ -48,14 +68,20 @@ export declare const AiChatbotLauncherComponentTagName: keyof HTMLElementTagName
  * @event {CustomEvent<ForgeAiChatbotResponseFeedbackEventData>} forge-ai-chatbot-response-feedback - Fired when user provides feedback on a response
  * @event {CustomEvent<void>} forge-ai-chatbot-info - Fired when header info option is selected
  * @event {CustomEvent<ForgeAiChatbotAgentChangeEventData>} forge-ai-chatbot-agent-change - Fired when agent selection changes
+ * @event {CustomEvent<ForgeAiChatbotLauncherThreadRenameEventData>} forge-ai-chatbot-launcher-thread-rename - Fired when thread rename is saved. Parent should update threadName property and call onSuccess() or onError()
+ * @event {CustomEvent<ForgeAiChatbotLauncherThreadDeleteEventData>} forge-ai-chatbot-launcher-thread-delete - Fired when thread deletion is confirmed. Parent should delete thread and call onSuccess() or onError()
  */
 export declare class AiChatbotLauncherComponent extends AiChatbotBase {
     #private;
     static styles: CSSResult;
     placeholder: string;
     descriptionText?: string;
+    threadName?: string;
+    showThreadRename: boolean;
+    showThreadDelete: boolean;
     private _viewState;
     private _skipAnimation;
+    private _editingThreadId;
     protected _messageThreadRef: Ref<AiMessageThreadComponent>;
     protected _promptRef: Ref<AiPromptComponent>;
     constructor();
@@ -65,6 +91,7 @@ export declare class AiChatbotLauncherComponent extends AiChatbotBase {
     protected _handleSend(evt: CustomEvent<ForgeAiPromptSendEventData>): Promise<void>;
     protected _handleSuggestionSelect(evt: CustomEvent<ForgeAiSuggestionsEventData>): Promise<void>;
     clearMessages(): boolean;
+    startNewChat(): void;
     setMessages(messages: ChatMessage[]): void;
     sendMessage(content: string, files?: File[]): Promise<void>;
     setThreadState(threadState: ThreadState, options?: {