@copilotkit/web-inspector 1.60.1 → 1.61.0

package/dist/index.cjs

@@ -2126,6 +2126,10 @@ var WebInspectorElement = class extends lit.LitElement {
 				this.requestUpdate();
 			}
 		};
+		this.handleDismissAnnouncementPreview = (event) => {
+			event.stopPropagation();
+			this.handleDismissAnnouncement();
+		};
 		this.handleDismissAnnouncement = () => {
 			this.trackBannerClickedOnce({ cta: "dismiss" });
 			this.markAnnouncementSeen();
@@ -2796,6 +2800,11 @@ ${argsString}</pre
         transition: transform 300ms ease;
       }
 
+      .console-button-wrapper {
+        position: relative;
+        display: inline-flex;
+      }
+
       .console-button {
         transition:
           transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1),
@@ -2923,6 +2932,36 @@ ${argsString}</pre
         box-shadow: -6px 6px 10px rgba(1, 5, 7, 0.08);
       }
 
+      .announcement-preview__dismiss {
+        flex: none;
+        margin-top: -1px;
+        width: 20px;
+        height: 20px;
+        padding: 0;
+        appearance: none;
+        background: none;
+        border: 0;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 6px;
+        color: #838389;
+        cursor: pointer;
+        transition:
+          background 120ms ease,
+          color 120ms ease;
+      }
+
+      .announcement-preview__dismiss:hover {
+        background: rgba(0, 0, 0, 0.06);
+        color: #010507;
+      }
+
+      .announcement-preview__dismiss:focus-visible {
+        outline: 2px solid #bec2ff;
+        outline-offset: 1px;
+      }
+
       .announcement-dismiss {
         background: none;
         border: none;
@@ -3543,8 +3582,9 @@ ${argsString}</pre
 	}
 	renderButton() {
 		return lit.html`
-      <button
-        class=${[
+      <div class="console-button-wrapper">
+        <button
+          class=${[
 			"console-button",
 			"group",
 			"relative",
@@ -3576,24 +3616,25 @@ ${argsString}</pre
 			"select-none",
 			this.isDragging ? "cursor-grabbing" : "cursor-grab"
 		].join(" ")}
-        type="button"
-        aria-label="Web Inspector"
-        data-drag-context="button"
-        data-dragging=${this.isDragging && this.pointerContext === "button" ? "true" : "false"}
-        @pointerdown=${this.handlePointerDown}
-        @pointermove=${this.handlePointerMove}
-        @pointerup=${this.handlePointerUp}
-        @pointercancel=${this.handlePointerCancel}
-        @click=${this.handleButtonClick}
-      >
+          type="button"
+          aria-label="Web Inspector"
+          data-drag-context="button"
+          data-dragging=${this.isDragging && this.pointerContext === "button" ? "true" : "false"}
+          @pointerdown=${this.handlePointerDown}
+          @pointermove=${this.handlePointerMove}
+          @pointerup=${this.handlePointerUp}
+          @pointercancel=${this.handlePointerCancel}
+          @click=${this.handleButtonClick}
+        >
+          <img
+            src=${require_inspector_logo_icon.default}
+            alt="Inspector logo"
+            class="h-5 w-auto"
+            loading="lazy"
+          />
+        </button>
         ${this.renderAnnouncementPreview()}
-        <img
-          src=${require_inspector_logo_icon.default}
-          alt="Inspector logo"
-          class="h-5 w-auto"
-          loading="lazy"
-        />
-      </button>
+      </div>
     `;
 	}
 	renderWindow() {
@@ -5424,6 +5465,14 @@ ${prettyEvent}</pre
       @click=${() => this.handleAnnouncementPreviewClick()}
     >
       <span>${this.announcementPreviewText}</span>
+      <button
+        type="button"
+        class="announcement-preview__dismiss"
+        aria-label="Dismiss announcement"
+        @click=${this.handleDismissAnnouncementPreview}
+      >
+        ${this.renderIcon("X")}
+      </button>
       <span class="announcement-preview__arrow"></span>
     </div>`;
 	}