@copilotkit/web-inspector 1.60.0 → 1.60.2

package/dist/index.umd.js

@@ -2416,6 +2416,10 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(event.payload))}
 					this.requestUpdate();
 				}
 			};
+			this.handleDismissAnnouncementPreview = (event) => {
+				event.stopPropagation();
+				this.handleDismissAnnouncement();
+			};
 			this.handleDismissAnnouncement = () => {
 				this.trackBannerClickedOnce({ cta: "dismiss" });
 				this.markAnnouncementSeen();
@@ -3157,8 +3161,9 @@ ${argsString}</pre
 		}
 		renderButton() {
 			return lit.html`
-      <button
-        class=${[
+      <div class="console-button-wrapper">
+        <button
+          class=${[
 				"console-button",
 				"group",
 				"relative",
@@ -3190,24 +3195,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=${inspector_logo_icon_default}
+            alt="Inspector logo"
+            class="h-5 w-auto"
+            loading="lazy"
+          />
+        </button>
         ${this.renderAnnouncementPreview()}
-        <img
-          src=${inspector_logo_icon_default}
-          alt="Inspector logo"
-          class="h-5 w-auto"
-          loading="lazy"
-        />
-      </button>
+      </div>
     `;
 		}
 		renderWindow() {
@@ -5069,6 +5075,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>`;
 		}
@@ -5206,6 +5220,11 @@ ${prettyEvent}</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),
@@ -5333,6 +5352,36 @@ ${prettyEvent}</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;