@tylertech/forge-ai 0.7.2 → 0.8.0

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

@@ -10,6 +10,7 @@ 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 "../core/tooltip/tooltip.mjs";
 import styles from "./ai-message-thread.scss.mjs";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -29,7 +30,7 @@ var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read fr
 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, renderAssistantResponse_fn, emptyState_get, thinkingIndicator_get, messages_get, dispatchEvent_fn;
+var _markdownController, _canAutoScroll, _resizeObserver, _AiMessageThreadComponent_instances, checkScrollState_fn, _handleScroll, _handleScrollToBottomClick, scrollToBottomButton_get, handleCopy_fn, handleRefresh_fn, handleThumbsUp_fn, handleThumbsDown_fn, handleUserCopy_fn, handleUserResend_fn, handleUserEdit_fn, renderToolCall_fn, renderAssistantResponse_fn, emptyState_get, thinkingIndicator_get, messages_get, dispatchEvent_fn;
 const AiMessageThreadComponentTagName = "forge-ai-message-thread";
 const SCROLL_THRESHOLD = 100;
 let AiMessageThreadComponent = class extends LitElement {
@@ -43,14 +44,25 @@ let AiMessageThreadComponent = class extends LitElement {
     this.debugMode = false;
     __privateAdd(this, _markdownController);
     __privateAdd(this, _canAutoScroll, true);
+    __privateAdd(this, _resizeObserver);
     __privateAdd(this, _handleScroll, () => {
-      const { scrollTop, scrollHeight, clientHeight } = this._messageThreadContainer;
-      __privateSet(this, _canAutoScroll, scrollTop + clientHeight >= scrollHeight - SCROLL_THRESHOLD);
+      __privateMethod(this, _AiMessageThreadComponent_instances, checkScrollState_fn).call(this);
+    });
+    __privateAdd(this, _handleScrollToBottomClick, () => {
+      this.scrollToBottom({ force: true, behavior: "smooth" });
     });
   }
   connectedCallback() {
     super.connectedCallback();
     __privateSet(this, _markdownController, new MarkdownStreamController(this));
+    __privateSet(this, _resizeObserver, new ResizeObserver(() => __privateMethod(this, _AiMessageThreadComponent_instances, checkScrollState_fn).call(this)));
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    __privateGet(this, _resizeObserver)?.disconnect();
+  }
+  firstUpdated() {
+    __privateGet(this, _resizeObserver)?.observe(this._messageThreadContainer);
   }
   updated(changedProperties) {
     super.updated(changedProperties);
@@ -76,13 +88,45 @@ let AiMessageThreadComponent = class extends LitElement {
       <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>
+      ${__privateGet(this, _AiMessageThreadComponent_instances, scrollToBottomButton_get)}
     `;
   }
 };
 _markdownController = /* @__PURE__ */ new WeakMap();
 _canAutoScroll = /* @__PURE__ */ new WeakMap();
-_handleScroll = /* @__PURE__ */ new WeakMap();
+_resizeObserver = /* @__PURE__ */ new WeakMap();
 _AiMessageThreadComponent_instances = /* @__PURE__ */ new WeakSet();
+checkScrollState_fn = function() {
+  const container = this._messageThreadContainer;
+  if (!container) {
+    return;
+  }
+  const { scrollTop, scrollHeight, clientHeight } = container;
+  const canAutoScroll = scrollTop + clientHeight >= scrollHeight - SCROLL_THRESHOLD;
+  if (canAutoScroll !== __privateGet(this, _canAutoScroll)) {
+    __privateSet(this, _canAutoScroll, canAutoScroll);
+    this.requestUpdate();
+  }
+};
+_handleScroll = /* @__PURE__ */ new WeakMap();
+_handleScrollToBottomClick = /* @__PURE__ */ new WeakMap();
+scrollToBottomButton_get = function() {
+  if (__privateGet(this, _canAutoScroll)) {
+    return nothing;
+  }
+  return html`
+      <button
+        id="scroll-to-bottom-btn"
+        class="forge-fab scroll-to-bottom-button"
+        aria-label="Scroll to bottom"
+        @click=${__privateGet(this, _handleScrollToBottomClick)}>
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+          <path d="M7.03 13.92h4V5l2.01-.03v8.95h3.99l-5 5Z" />
+        </svg>
+      </button>
+      <forge-ai-tooltip for="scroll-to-bottom-btn" placement="top">Scroll to bottom</forge-ai-tooltip>
+    `;
+};
 handleCopy_fn = function(messageId) {
   __privateMethod(this, _AiMessageThreadComponent_instances, dispatchEvent_fn).call(this, {
     type: "forge-ai-message-thread-copy",
@@ -103,6 +147,24 @@ handleThumbsDown_fn = function(messageId, feedback) {
   const detail = { messageId, feedback };
   __privateMethod(this, _AiMessageThreadComponent_instances, dispatchEvent_fn).call(this, { type: "forge-ai-message-thread-thumbs-down", detail });
 };
+handleUserCopy_fn = function(messageId) {
+  __privateMethod(this, _AiMessageThreadComponent_instances, dispatchEvent_fn).call(this, {
+    type: "forge-ai-message-thread-user-copy",
+    detail: { messageId }
+  });
+};
+handleUserResend_fn = function(messageId) {
+  __privateMethod(this, _AiMessageThreadComponent_instances, dispatchEvent_fn).call(this, {
+    type: "forge-ai-message-thread-user-resend",
+    detail: { messageId }
+  });
+};
+handleUserEdit_fn = function(messageId, content) {
+  __privateMethod(this, _AiMessageThreadComponent_instances, dispatchEvent_fn).call(this, {
+    type: "forge-ai-message-thread-user-edit",
+    detail: { messageId, content }
+  });
+};
 renderToolCall_fn = function(toolCall) {
   const toolDefinition = this.tools?.get(toolCall.name);
   return html`<forge-ai-chatbot-tool-call
@@ -193,7 +255,18 @@ messages_get = function() {
     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>`;
+      return html`
+          <forge-ai-user-message
+            message-id=${msg.id}
+            .timestamp=${msg.timestamp}
+            .content=${msg.content}
+            ?streaming=${this.showThinking}
+            @forge-ai-user-message-copy=${(e) => __privateMethod(this, _AiMessageThreadComponent_instances, handleUserCopy_fn).call(this, e.detail.messageId)}
+            @forge-ai-user-message-resend=${(e) => __privateMethod(this, _AiMessageThreadComponent_instances, handleUserResend_fn).call(this, e.detail.messageId)}
+            @forge-ai-user-message-edit=${(e) => __privateMethod(this, _AiMessageThreadComponent_instances, handleUserEdit_fn).call(this, e.detail.messageId, e.detail.content)}>
+            ${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") {

package/dist/ai-message-thread/ai-message-thread.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/**\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}';
+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/**\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/**\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-fab {\n  --_fab-display: var(--forge-fab-display, inline-flex);\n  --_fab-gap: var(--forge-fab-gap, var(--forge-spacing-xsmall, 8px));\n  --_fab-background: var(--forge-fab-background, var(--forge-theme-secondary, #ffc107));\n  --_fab-color: var(--forge-fab-color, var(--forge-theme-on-secondary, #000000));\n  --_fab-size: var(--forge-fab-size, 56px);\n  --_fab-padding: var(--forge-fab-padding, var(--forge-spacing-xsmall, 8px));\n  --_fab-shadow: var(--forge-fab-shadow, 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12));\n  --_fab-hover-shadow: var(--forge-fab-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  --_fab-active-shadow: var(--forge-fab-active-shadow, 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12));\n  --_fab-lowered-shadow: var(--forge-fab-lowered-shadow, 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  --_fab-lowered-hover-shadow: var(--forge-fab-lowered-hover-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  --_fab-lowered-active-shadow: var(--forge-fab-lowered-active-shadow, 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  --_fab-transition-duration: var(--forge-fab-transition-duration, var(--forge-animation-duration-short3, 150ms));\n  --_fab-transition-timing: var(--forge-fab-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));\n  --_fab-shape: var(--forge-fab-shape, calc(var(--forge-shape-full, 9999px) * var(--forge-shape-factor, 1)));\n  --_fab-shape-start-start: var(--forge-fab-shape-start-start, var(--_fab-shape));\n  --_fab-shape-start-end: var(--forge-fab-shape-start-end, var(--_fab-shape));\n  --_fab-shape-end-start: var(--forge-fab-shape-end-start, var(--_fab-shape));\n  --_fab-shape-end-end: var(--forge-fab-shape-end-end, var(--_fab-shape));\n  --_fab-extended-padding: var(--forge-fab-extended-padding, var(--forge-spacing-medium-large, 20px));\n  --_fab-extended-min-width: var(--forge-fab-extended-min-width, 96px);\n  --_fab-density-small-size: var(--forge-fab-density-small-size, 40px);\n  --_fab-density-medium-size: var(--forge-fab-density-medium-size, var(--_fab-size));\n  --_fab-density-large-size: var(--forge-fab-density-large-size, 96px);\n  --_fab-disabled-cursor: var(--forge-fab-disabled-cursor, not-allowed);\n  --_fab-disabled-background: var(--forge-fab-disabled-background, var(--forge-theme-surface-container, #e0e0e0));\n  --_fab-disabled-color: var(--forge-fab-disabled-color, var(--forge-theme-on-surface-container, #000000));\n  --_fab-disabled-opacity: var(--forge-fab-disabled-opacity, 0.38);\n}\n\n.forge-fab {\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-font-smoothing: antialiased;\n  font-family: var(--forge-typography-button-font-family, var(--forge-typography-font-family, "Roboto", sans-serif));\n  font-size: var(--forge-typography-button-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-button-font-size-scale, 0.875)));\n  font-weight: var(--forge-typography-button-font-weight, 500);\n  line-height: var(--forge-typography-button-line-height, normal);\n  letter-spacing: var(--forge-typography-button-letter-spacing, 0.0714285714em);\n  text-transform: var(--forge-typography-button-text-transform, inherit);\n  text-decoration: var(--forge-typography-button-text-decoration, inherit);\n  position: relative;\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  gap: var(--_fab-gap);\n  z-index: 0;\n  background: var(--_fab-background);\n  color: var(--_fab-color);\n  cursor: pointer;\n  box-shadow: var(--_fab-shadow);\n  box-sizing: border-box;\n  height: var(--_fab-density-medium-size);\n  min-width: var(--_fab-density-medium-size);\n  padding-inline: var(--_fab-padding);\n  border-width: medium;\n  border-style: none;\n  border-color: currentColor;\n  border-top-left-radius: var(--_fab-shape-start-start);\n  border-top-right-radius: var(--_fab-shape-start-end);\n  border-bottom-left-radius: var(--_fab-shape-end-start);\n  border-bottom-right-radius: var(--_fab-shape-end-end);\n  user-select: none;\n  white-space: nowrap;\n  transition-property: box-shadow, background, color;\n  transition-duration: var(--_fab-transition-duration);\n  transition-timing-function: var(--_fab-transition-timing);\n}\n\n.forge-fab:hover {\n  --_fab-shadow: var(--_fab-hover-shadow);\n}\n\n.forge-fab:active {\n  --_fab-shadow: var(--_fab-active-shadow);\n}\n\n.forge-fab: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-fab: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-fab:not(:disabled):hover::before {\n  background-color: var(--_state-layer-hover-color);\n  opacity: var(--_state-layer-hover-opacity);\n}\n\n.forge-fab: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@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-fab:not(:disabled) {\n  outline: none;\n}\n\n.forge-fab: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-fab: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-fab:not(:disabled) {\n  --forge-focus-indicator-color: var(--_fab-background);\n  --forge-focus-indicator-shape-start-start: var(--_fab-shape-start-start);\n  --forge-focus-indicator-shape-start-end: var(--_fab-shape-start-end);\n  --forge-focus-indicator-shape-end-start: var(--_fab-shape-end-start);\n  --forge-focus-indicator-shape-end-end: var(--_fab-shape-end-end);\n}\n\n.forge-fab--extended {\n  --_fab-padding: var(--_fab-extended-padding);\n  min-width: var(--_fab-extended-min-width);\n}\n\n.forge-fab:disabled {\n  cursor: var(--_fab-disabled-cursor);\n  --_fab-background: var(--_fab-disabled-background);\n  --_fab-color: var(--_fab-disabled-color);\n  pointer-events: none;\n  opacity: var(--_fab-disabled-opacity);\n  pointer-events: auto;\n  cursor: not-allowed;\n}\n\n.forge-fab--dense, .forge-fab--small {\n  --_fab-size: var(--_fab-density-small-size);\n}\n\n.forge-fab--large {\n  --_fab-size: var(--_fab-density-large-size);\n  --_fab-shape: var(--forge-fab-shape, calc(var(--forge-shape-extra-large, 16px) * var(--forge-shape-factor, 1)));\n}\n\n.forge-fab--flat {\n  --_fab-shadow: var(--_fab-lowered-shadow);\n}\n\n.forge-fab--flat:hover {\n  --_fab-shadow: var(--_fab-lowered-hover-shadow);\n}\n\n.forge-fab--flat:active {\n  --_fab-shadow: var(--_fab-lowered-active-shadow);\n}\n\n:host {\n  display: grid;\n  height: 100%;\n  position: relative;\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-xlarge, 32px);\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}\n\n.scroll-to-bottom-button {\n  --forge-fab-size: 40px;\n  --forge-fab-background: var(--forge-theme-surface, #ffffff);\n  position: absolute;\n  bottom: var(--forge-spacing-xxsmall, 4px);\n  left: 50%;\n  transform: translateX(-50%) translateY(24px);\n  opacity: 0;\n  z-index: 1;\n  animation-name: scroll-button-enter;\n  animation-duration: var(--forge-animation-duration-medium1, 250ms);\n  animation-timing-function: var(--forge-animation-easing-decelerate, cubic-bezier(0, 0, 0, 1));\n  animation-fill-mode: forwards;\n}\n.scroll-to-bottom-button svg {\n  width: 24px;\n  height: 24px;\n  fill: currentColor;\n}\n\n@keyframes scroll-button-enter {\n  from {\n    opacity: 0;\n    transform: translateX(-50%) translateY(24px);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(-50%) translateY(0);\n  }\n}\nforge-ai-user-message {\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-font-smoothing: antialiased;\n  font-family: var(--forge-typography-body1-font-family, var(--forge-typography-font-family, "Roboto", sans-serif));\n  font-size: var(--forge-typography-body1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, 0.875)));\n  font-weight: var(--forge-typography-body1-font-weight, 400);\n  line-height: var(--forge-typography-body1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.125)));\n  letter-spacing: var(--forge-typography-body1-letter-spacing, 0.0357142857em);\n  text-transform: var(--forge-typography-body1-text-transform, inherit);\n  text-decoration: var(--forge-typography-body1-text-decoration, inherit);\n  color: var(--forge-theme-on-surface, #000000);\n  overflow-wrap: break-word;\n  line-height: 1.5;\n}\nforge-ai-user-message h1,\nforge-ai-user-message h2,\nforge-ai-user-message h3,\nforge-ai-user-message h4,\nforge-ai-user-message h5,\nforge-ai-user-message h6 {\n  margin: 1.75rem 0 var(--forge-spacing-small, 12px);\n}\nforge-ai-user-message strong {\n  font-weight: 500;\n}\nforge-ai-user-message a {\n  color: var(--forge-theme-primary, #3f51b5);\n}\nforge-ai-user-message hr {\n  border: none;\n  border-top: 1px solid var(--forge-theme-outline, #e0e0e0);\n}\nforge-ai-user-message code {\n  color: var(--forge-theme-on-surface-container-low, #000000);\n  background-color: var(--forge-theme-surface-container-low, #ebebeb);\n  border-radius: calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1));\n  padding: var(--forge-spacing-xxxsmall, 2px) var(--forge-spacing-xxsmall, 4px);\n  font-size: 0.75rem;\n}\nforge-ai-user-message pre {\n  border: 1px solid var(--forge-theme-outline, #e0e0e0);\n  border-radius: calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1));\n  margin-block: var(--forge-spacing-medium, 16px) 0;\n}\nforge-ai-user-message pre code {\n  display: block;\n  padding: var(--forge-spacing-xsmall, 8px) var(--forge-spacing-small, 12px);\n  color: var(--forge-theme-on-surface-container-minimum, #000000);\n  background: var(--forge-theme-surface-container-minimum, #f5f5f5);\n  overflow-x: auto;\n}\nforge-ai-user-message > p:has(+ ol),\nforge-ai-user-message > p:has(+ ul) {\n  margin-block-end: var(--forge-spacing-small, 12px);\n}\nforge-ai-user-message > ul {\n  list-style-type: disc;\n  padding-inline-start: 1.6875rem;\n}\nforge-ai-user-message > ol {\n  padding-inline-start: 1.75rem;\n}\nforge-ai-user-message > ol,\nforge-ai-user-message > ul {\n  margin: var(--forge-spacing-xsmall, 8px) 0;\n  margin-block-end: var(--forge-spacing-medium, 16px);\n}\nforge-ai-user-message > :first-child {\n  margin-block-start: 0;\n}\nforge-ai-user-message > p {\n  margin-block-end: var(--forge-spacing-medium, 16px);\n  overflow-wrap: anywhere;\n}\nforge-ai-user-message > p:first-child {\n  margin-block-start: 0;\n}\nforge-ai-user-message > p:last-child {\n  margin-block-end: 0;\n}';
 export {
   styles as default
 };

package/dist/ai-prompt/ai-prompt.d.ts

@@ -78,6 +78,11 @@ export declare class AiPromptComponent extends LitElement {
      * Use this when sending messages externally (e.g., from suggestions).
      */
     addToHistory(message: string): void;
+    /**
+     * Replaces the entire message history with the provided messages.
+     * Use this when restoring thread state from persistence.
+     */
+    setHistory(messages: string[]): void;
     private _handleSend;
     private _handleInput;
     private _handleKeyDown;

package/dist/ai-prompt/ai-prompt.mjs

@@ -4,6 +4,7 @@ import { when } from "lit/directives/when.js";
 import { toggleState } from "../utils.mjs";
 import styles from "./ai-prompt.scss.mjs";
 import "../ai-slash-command-menu/ai-slash-command-menu.mjs";
+import "../core/tooltip/tooltip.mjs";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __typeError = (msg) => {
@@ -30,7 +31,7 @@ var __privateWrapper = (obj, member, setter, getter) => ({
     return __privateGet(obj, member, getter);
   }
 });
-var _internals, _messageHistory, _historyIndex, _draftMessage, _AiPromptComponent_instances, setCssState_fn, resetHistoryNavigation_fn, navigateHistory_fn, _actionsSlot, shouldShowStopButton_get, conditionalActions_get, handleSlotChange_fn, handleSlashCommandSelect_fn, handleSlashCommandClose_fn, slashCommandMenu_get;
+var _internals, _messageHistory, _historyIndex, _draftMessage, _AiPromptComponent_instances, setCssState_fn, resetHistoryNavigation_fn, isCursorOnFirstLine_fn, isCursorOnLastLine_fn, isCursorAtStart_fn, isCursorAtEnd_fn, moveCursorToStart_fn, moveCursorToEnd_fn, navigateHistory_fn, _actionsSlot, shouldShowStopButton_get, conditionalActions_get, handleSlotChange_fn, handleSlashCommandSelect_fn, handleSlashCommandClose_fn, slashCommandMenu_get;
 const MAX_HISTORY_SIZE = 50;
 const AiPromptComponentTagName = "forge-ai-prompt";
 let AiPromptComponent = class extends LitElement {
@@ -86,6 +87,14 @@ let AiPromptComponent = class extends LitElement {
     }
     __privateMethod(this, _AiPromptComponent_instances, resetHistoryNavigation_fn).call(this);
   }
+  /**
+   * Replaces the entire message history with the provided messages.
+   * Use this when restoring thread state from persistence.
+   */
+  setHistory(messages) {
+    __privateSet(this, _messageHistory, messages.map((msg) => msg?.trim()).filter((msg) => msg.length > 0).slice(-MAX_HISTORY_SIZE));
+    __privateMethod(this, _AiPromptComponent_instances, resetHistoryNavigation_fn).call(this);
+  }
   _handleSend() {
     if (this.sendDisabled || this.inputDisabled || !this.value.trim()) {
       return;
@@ -140,13 +149,26 @@ let AiPromptComponent = class extends LitElement {
     }
     const hasModifier = event.shiftKey || event.ctrlKey || event.metaKey;
     if (!hasModifier) {
-      if (event.key === "ArrowUp") {
-        if (__privateMethod(this, _AiPromptComponent_instances, navigateHistory_fn).call(this, -1)) {
+      if (event.key === "ArrowUp" && __privateMethod(this, _AiPromptComponent_instances, isCursorOnFirstLine_fn).call(this)) {
+        if (__privateMethod(this, _AiPromptComponent_instances, isCursorAtStart_fn).call(this)) {
+          if (__privateMethod(this, _AiPromptComponent_instances, navigateHistory_fn).call(this, -1)) {
+            __privateMethod(this, _AiPromptComponent_instances, moveCursorToStart_fn).call(this);
+            event.preventDefault();
+            return;
+          }
+        } else {
+          __privateMethod(this, _AiPromptComponent_instances, moveCursorToStart_fn).call(this);
           event.preventDefault();
           return;
         }
-      } else if (event.key === "ArrowDown") {
-        if (__privateMethod(this, _AiPromptComponent_instances, navigateHistory_fn).call(this, 1)) {
+      } else if (event.key === "ArrowDown" && __privateMethod(this, _AiPromptComponent_instances, isCursorOnLastLine_fn).call(this)) {
+        if (__privateMethod(this, _AiPromptComponent_instances, isCursorAtEnd_fn).call(this)) {
+          if (__privateMethod(this, _AiPromptComponent_instances, navigateHistory_fn).call(this, 1)) {
+            event.preventDefault();
+            return;
+          }
+        } else {
+          __privateMethod(this, _AiPromptComponent_instances, moveCursorToEnd_fn).call(this);
           event.preventDefault();
           return;
         }
@@ -243,6 +265,7 @@ let AiPromptComponent = class extends LitElement {
       this.debugMode,
       () => html`
                 <button
+                  id="debug-btn"
                   aria-label="Exit debug mode"
                   class="forge-icon-button forge-icon-button--medium forge-icon-button--tonal ai-icon-button debug-button"
                   @click=${this._handleDebugToggle}>
@@ -251,9 +274,11 @@ let AiPromptComponent = class extends LitElement {
                       d="M20 8h-2.81a5.985 5.985 0 0 0-1.82-1.96L17 4.41 15.59 3l-2.17 2.17a6.002 6.002 0 0 0-2.83 0L8.41 3 7 4.41l1.62 1.63C7.88 6.55 7.26 7.22 6.81 8H4v2h2.09c-.05.33-.09.66-.09 1v1H4v2h2v1c0 .34.04.67.09 1H4v2h2.81c1.04 1.79 2.97 3 5.19 3s4.15-1.21 5.19-3H20v-2h-2.09c.05-.33.09-.66.09-1v-1h2v-2h-2v-1c0-.34-.04-.67-.09-1H20V8zm-6 8h-4v-2h4v2zm0-4h-4v-2h4v2z" />
                   </svg>
                 </button>
+                <forge-ai-tooltip for="debug-btn" placement="top">Exit debug mode</forge-ai-tooltip>
               `
     )}
             <button
+              id="send-btn"
               aria-label=${__privateGet(this, _AiPromptComponent_instances, shouldShowStopButton_get) ? "Stop" : "Send message"}
               class="forge-icon-button forge-icon-button--medium ai-icon-button"
               ?disabled=${this.sendDisabled || this.inputDisabled}
@@ -264,6 +289,9 @@ let AiPromptComponent = class extends LitElement {
                     <path d="m2 21 21-9L2 3v7l15 2-15 2z" />
                   </svg>`}
             </button>
+            <forge-ai-tooltip for="send-btn" placement="top"
+              >${__privateGet(this, _AiPromptComponent_instances, shouldShowStopButton_get) ? "Stop" : "Send"}</forge-ai-tooltip
+            >
           </div>
           ${when(this.variant === "stacked", () => html`${__privateGet(this, _AiPromptComponent_instances, conditionalActions_get)}`)}
         </div>
@@ -285,6 +313,29 @@ resetHistoryNavigation_fn = function() {
   __privateSet(this, _historyIndex, -1);
   __privateSet(this, _draftMessage, "");
 };
+isCursorOnFirstLine_fn = function() {
+  const cursorPos = this._inputElement?.selectionStart ?? 0;
+  const textBeforeCursor = this.value.substring(0, cursorPos);
+  return !textBeforeCursor.includes("\n");
+};
+isCursorOnLastLine_fn = function() {
+  const cursorPos = this._inputElement?.selectionStart ?? 0;
+  const textAfterCursor = this.value.substring(cursorPos);
+  return !textAfterCursor.includes("\n");
+};
+isCursorAtStart_fn = function() {
+  return (this._inputElement?.selectionStart ?? 0) === 0;
+};
+isCursorAtEnd_fn = function() {
+  return (this._inputElement?.selectionStart ?? 0) === this.value.length;
+};
+moveCursorToStart_fn = function() {
+  this._inputElement?.setSelectionRange(0, 0);
+};
+moveCursorToEnd_fn = function() {
+  const len = this.value.length;
+  this._inputElement?.setSelectionRange(len, len);
+};
 navigateHistory_fn = function(direction) {
   if (__privateGet(this, _messageHistory).length === 0) {
     return false;

package/dist/ai-slash-command-menu/ai-slash-command-menu.mjs

@@ -69,7 +69,7 @@ let AiSlashCommandMenuComponent = class extends LitElement {
             placement="top-start"
             .open=${this.open}
             dismiss-mode="manual"
-            .offset=${{ mainAxis: 24, crossAxis: -14 }}
+            .offset=${{ mainAxis: 8, crossAxis: -14 }}
             @forge-ai-popover-toggle=${__privateMethod(this, _AiSlashCommandMenuComponent_instances, handlePopoverToggle_fn)}>
             <div class="slash-command-menu__header">
               <span>Slash Commands</span>

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

@@ -3,13 +3,38 @@ declare global {
     interface HTMLElementTagNameMap {
         'forge-ai-user-message': AiUserMessageComponent;
     }
+    interface HTMLElementEventMap {
+        'forge-ai-user-message-copy': CustomEvent<ForgeAiUserMessageCopyEventData>;
+        'forge-ai-user-message-resend': CustomEvent<ForgeAiUserMessageResendEventData>;
+        'forge-ai-user-message-edit': CustomEvent<ForgeAiUserMessageEditEventData>;
+    }
+}
+export interface ForgeAiUserMessageCopyEventData {
+    messageId: string;
+}
+export interface ForgeAiUserMessageResendEventData {
+    messageId: string;
+}
+export interface ForgeAiUserMessageEditEventData {
+    messageId: string;
+    content: string;
 }
 export declare const AiUserMessageComponentTagName: keyof HTMLElementTagNameMap;
 /**
  * @tag forge-ai-user-message
+ *
+ * @event {CustomEvent<ForgeAiUserMessageCopyEventData>} forge-ai-user-message-copy - Fired when user clicks copy button
+ * @event {CustomEvent<ForgeAiUserMessageResendEventData>} forge-ai-user-message-resend - Fired when user clicks resend button
+ * @event {CustomEvent<ForgeAiUserMessageEditEventData>} forge-ai-user-message-edit - Fired when user saves edited message
  */
 export declare class AiUserMessageComponent extends LitElement {
     #private;
     static styles: import('lit').CSSResult;
+    timestamp?: number;
+    messageId?: string;
+    streaming: boolean;
+    content?: string;
+    private _editing;
+    private _editContent;
     render(): TemplateResult;
 }

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

@@ -1,6 +1,9 @@
-import { unsafeCSS, LitElement, html } from "lit";
-import { customElement } from "lit/decorators.js";
+import { unsafeCSS, LitElement, html, nothing } from "lit";
+import { property, state, customElement } from "lit/decorators.js";
+import { when } from "lit/directives/when.js";
+import "../core/tooltip/tooltip.mjs";
 import styles from "./ai-user-message.scss.mjs";
+var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __typeError = (msg) => {
   throw TypeError(msg);
@@ -9,17 +12,41 @@ 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 = decorator(result) || result;
+      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 _messageContainer;
+var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
+var _refreshIcon, _copyIcon, _editIcon, _messageContainer, _AiUserMessageComponent_instances, formattedTime_get, formattedFullDate_get, isSaveDisabled_get, editContainer_get, toolbar_get, handleCopy_fn, handleResend_fn, handleEditClick_fn, handleEditInput_fn, handleCancel_fn, handleSave_fn;
 const AiUserMessageComponentTagName = "forge-ai-user-message";
 let AiUserMessageComponent = class extends LitElement {
   constructor() {
     super(...arguments);
+    __privateAdd(this, _AiUserMessageComponent_instances);
+    this.streaming = false;
+    this._editing = false;
+    this._editContent = "";
+    __privateAdd(this, _refreshIcon, html`
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+      <path
+        d="M17.65 6.35A7.96 7.96 0 0 0 12 4a8 8 0 0 0-8 8 8 8 0 0 0 8 8c3.73 0 6.84-2.55 7.73-6h-2.08A5.99 5.99 0 0 1 12 18a6 6 0 0 1-6-6 6 6 0 0 1 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4z" />
+    </svg>
+  `);
+    __privateAdd(this, _copyIcon, html`
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+      <path
+        d="M19 21H8V7h11m0-2H8a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2m-3-4H4a2 2 0 0 0-2 2v14h2V3h12z" />
+    </svg>
+  `);
+    __privateAdd(this, _editIcon, html`
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+      <path
+        d="M20.71 7.04c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.37-.39-1.02-.39-1.41 0l-1.84 1.83 3.75 3.75M3 17.25V21h3.75L17.81 9.93l-3.75-3.75z" />
+    </svg>
+  `);
     __privateAdd(this, _messageContainer, html`
     <div class="ai-message-container">
       <span>
@@ -29,11 +56,162 @@ let AiUserMessageComponent = class extends LitElement {
   `);
   }
   render() {
-    return html` <div class="grid-container">${__privateGet(this, _messageContainer)}</div> `;
+    return html`
+      <div class="grid-container">${this._editing ? __privateGet(this, _AiUserMessageComponent_instances, editContainer_get) : __privateGet(this, _messageContainer)} ${__privateGet(this, _AiUserMessageComponent_instances, toolbar_get)}</div>
+    `;
   }
 };
+_refreshIcon = /* @__PURE__ */ new WeakMap();
+_copyIcon = /* @__PURE__ */ new WeakMap();
+_editIcon = /* @__PURE__ */ new WeakMap();
 _messageContainer = /* @__PURE__ */ new WeakMap();
+_AiUserMessageComponent_instances = /* @__PURE__ */ new WeakSet();
+formattedTime_get = function() {
+  if (!this.timestamp) {
+    return "";
+  }
+  return new Date(this.timestamp).toLocaleTimeString([], {
+    hour: "2-digit",
+    minute: "2-digit"
+  });
+};
+formattedFullDate_get = function() {
+  if (!this.timestamp) {
+    return "";
+  }
+  return new Intl.DateTimeFormat("en-US", {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+    hour: "numeric",
+    minute: "2-digit"
+  }).format(this.timestamp);
+};
+isSaveDisabled_get = function() {
+  const trimmed = this._editContent.trim();
+  return !trimmed || trimmed === this.content?.trim();
+};
+editContainer_get = function() {
+  return html`
+      <div class="edit-container">
+        <textarea class="edit-textarea" .value=${this._editContent} @input=${__privateMethod(this, _AiUserMessageComponent_instances, handleEditInput_fn)}></textarea>
+        <div class="edit-footer">
+          <button class="forge-button forge-button--outlined" @click=${__privateMethod(this, _AiUserMessageComponent_instances, handleCancel_fn)}>Cancel</button>
+          <button
+            class="forge-button forge-button--raised"
+            ?disabled=${__privateGet(this, _AiUserMessageComponent_instances, isSaveDisabled_get)}
+            @click=${__privateMethod(this, _AiUserMessageComponent_instances, handleSave_fn)}>
+            Save
+          </button>
+        </div>
+      </div>
+    `;
+};
+toolbar_get = function() {
+  if (!this.messageId || this._editing) {
+    return nothing;
+  }
+  return html`
+      <div class="toolbar-container">
+        <span id="timestamp" class="timestamp">${__privateGet(this, _AiUserMessageComponent_instances, formattedTime_get)}</span>
+        <forge-ai-tooltip for="timestamp" placement="bottom">${__privateGet(this, _AiUserMessageComponent_instances, formattedFullDate_get)}</forge-ai-tooltip>
+
+        ${when(
+    !this.streaming,
+    () => html`
+            <button
+              id="resend-btn"
+              aria-label="Resend message"
+              class="forge-icon-button forge-icon-button--small"
+              @click=${__privateMethod(this, _AiUserMessageComponent_instances, handleResend_fn)}>
+              ${__privateGet(this, _refreshIcon)}
+            </button>
+            <forge-ai-tooltip for="resend-btn" placement="bottom">Resend</forge-ai-tooltip>
+
+            <button
+              id="edit-btn"
+              aria-label="Edit message"
+              class="forge-icon-button forge-icon-button--small"
+              @click=${__privateMethod(this, _AiUserMessageComponent_instances, handleEditClick_fn)}>
+              ${__privateGet(this, _editIcon)}
+            </button>
+            <forge-ai-tooltip for="edit-btn" placement="bottom">Edit</forge-ai-tooltip>
+          `
+  )}
+
+        <button
+          id="copy-btn"
+          aria-label="Copy message"
+          class="forge-icon-button forge-icon-button--small"
+          @click=${__privateMethod(this, _AiUserMessageComponent_instances, handleCopy_fn)}>
+          ${__privateGet(this, _copyIcon)}
+        </button>
+        <forge-ai-tooltip for="copy-btn" placement="bottom">Copy</forge-ai-tooltip>
+      </div>
+    `;
+};
+handleCopy_fn = function() {
+  this.dispatchEvent(
+    new CustomEvent("forge-ai-user-message-copy", {
+      detail: { messageId: this.messageId },
+      bubbles: true,
+      composed: true
+    })
+  );
+};
+handleResend_fn = function() {
+  this.dispatchEvent(
+    new CustomEvent("forge-ai-user-message-resend", {
+      detail: { messageId: this.messageId },
+      bubbles: true,
+      composed: true
+    })
+  );
+};
+handleEditClick_fn = function() {
+  this._editContent = this.content ?? "";
+  this._editing = true;
+};
+handleEditInput_fn = function(evt) {
+  this._editContent = evt.target.value;
+};
+handleCancel_fn = function() {
+  this._editing = false;
+  this._editContent = "";
+};
+handleSave_fn = function() {
+  if (__privateGet(this, _AiUserMessageComponent_instances, isSaveDisabled_get)) {
+    return;
+  }
+  this.dispatchEvent(
+    new CustomEvent("forge-ai-user-message-edit", {
+      detail: { messageId: this.messageId, content: this._editContent.trim() },
+      bubbles: true,
+      composed: true
+    })
+  );
+  this._editing = false;
+  this._editContent = "";
+};
 AiUserMessageComponent.styles = unsafeCSS(styles);
+__decorateClass([
+  property({ attribute: false })
+], AiUserMessageComponent.prototype, "timestamp", 2);
+__decorateClass([
+  property({ attribute: "message-id" })
+], AiUserMessageComponent.prototype, "messageId", 2);
+__decorateClass([
+  property({ type: Boolean })
+], AiUserMessageComponent.prototype, "streaming", 2);
+__decorateClass([
+  property({ attribute: false })
+], AiUserMessageComponent.prototype, "content", 2);
+__decorateClass([
+  state()
+], AiUserMessageComponent.prototype, "_editing", 2);
+__decorateClass([
+  state()
+], AiUserMessageComponent.prototype, "_editContent", 2);
 AiUserMessageComponent = __decorateClass([
   customElement(AiUserMessageComponentTagName)
 ], AiUserMessageComponent);