From f33c686dc9bbdd49660130f2e5e0d3e5a67d12a5 Mon Sep 17 00:00:00 2001
From: orlowska <orlowska@adobe.com>
Date: Tue, 7 Jul 2026 11:52:40 +0200
Subject: [PATCH] =?UTF-8?q?=20=20feat(canvas):=20move=20chat's=20AI=20disc?=
 =?UTF-8?q?laimer=20outside=20its=20bordered=20body=20Adds=20an=20optional?=
 =?UTF-8?q?=20`styled`=20property=20to=20nx-chat,=20reflected=20as=20the?=
 =?UTF-8?q?=20`styled-as-panel`=20attribute.=20When=20set,=20nx-chat=20wra?=
 =?UTF-8?q?ps=20its=20header,=20messages,=20and=20input=20in=20a=20bordere?=
 =?UTF-8?q?d/rounded/backgrounded=20`.chat-body`,=20and=20renders=20the=20?=
 =?UTF-8?q?AI=20disclaimer=20below=20it,=20outside=20that=20border=20?=
 =?UTF-8?q?=E2=80=94=20all=20within=20its=20own=20shadow=20DOM.=20styles.c?=
 =?UTF-8?q?ss=20removes=20the=20outer=20panel's=20own=20background,=20bord?=
 =?UTF-8?q?er,=20and=20border-radius=20whenever=20it=20contains=20an=20ele?=
 =?UTF-8?q?ment=20with=20the=20`styled-as-panel`=20attribute,=20so=20the?=
 =?UTF-8?q?=20two=20don't=20stack.=20panel.js=20is=20unchanged:=20it=20has?=
 =?UTF-8?q?=20no=20knowledge=20of=20chat=20or=20any=20specific=20consumer,?=
 =?UTF-8?q?=20just=20a=20generic=20`:has([styled-as-panel])`=20check.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 nx2/blocks/chat/chat.css |  27 ++++++-
 nx2/blocks/chat/chat.js  | 165 ++++++++++++++++++++-------------------
 nx2/styles/styles.css    |  10 +++
 3 files changed, 120 insertions(+), 82 deletions(-)

diff --git a/nx2/blocks/chat/chat.css b/nx2/blocks/chat/chat.css
index 94e299c28..3721bad2d 100644
--- a/nx2/blocks/chat/chat.css
+++ b/nx2/blocks/chat/chat.css
@@ -76,6 +76,29 @@
   }
 }
 
+:host([styled-as-panel]) {
+  padding-top: 0;
+}
+
+.chat-body {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-height: 0;
+  width: 100%;
+  align-items: center;
+  gap: var(--s2-spacing-300);
+  box-sizing: border-box;
+}
+
+:host([styled-as-panel]) .chat-body {
+  border: 1px solid var(--s2-gray-100);
+  border-radius: var(--s2-corner-radius-800);
+  background: light-dark(#fff, #000);
+  overflow: hidden;
+  padding: var(--s2-spacing-200) 0;
+}
+
 .chat-header {
   display: flex;
   align-items: center;
@@ -627,12 +650,14 @@
 }
 
 .chat-disclaimer {
+  flex-shrink: 0;
   max-width: 720px;
   width: calc(100% - 2 * var(--s2-spacing-200));
   margin: 0;
   font-size: var(--s2-body-size-xs);
-  color: var(--s2-gray-700);
+  color: var(--s2-gray-600);
   line-height: 1.5;
+  text-align: center;
   box-sizing: border-box;
 
   a {
diff --git a/nx2/blocks/chat/chat.js b/nx2/blocks/chat/chat.js
index 6a6921e5a..83be6177c 100644
--- a/nx2/blocks/chat/chat.js
+++ b/nx2/blocks/chat/chat.js
@@ -33,6 +33,7 @@ class NxChat extends LitElement {
     thinking: { type: Boolean },
     connected: { type: Boolean },
     toolCards: { type: Object },
+    styled: { type: Boolean, reflect: true, attribute: 'styled-as-panel' },
     _prompts: { state: true },
     _items: { state: true },
     _dragging: { state: true },
@@ -502,89 +503,91 @@ class NxChat extends LitElement {
           .onSend=${(p) => this._sendPrompt(p)}
         ></nx-prompts>
       </nx-popover>
-      <div class="chat-header">
-        <button
-          type="button"
-          class="chat-header-btn clear-btn"
-          aria-label="Clear chat"
-          ?hidden=${!this.messages?.length}
-          @click=${() => this.clear()}
-        >${icon('clear')}<span>Clear</span></button>
-        <button
-          type="button"
-          class="chat-header-btn"
-          aria-label="Close chat panel"
-          @click=${this._closePanel}
-        >${icon('close')}</button>
-      </div>
-      <div class="chat-scroll-container">
-        <div class="chat-messages-container" role="log" aria-live="polite">
-          ${!this.messages?.length && !this.thinking
-        ? html`<nx-chat-welcome
-              .prompts=${prompts}
-              .onSend=${(p) => this._sendPrompt(p)}
-              @nx-show-prompts=${this._openPrompts}
-            ></nx-chat-welcome>`
-        : nothing}
-        ${this.messages?.map((msg) => renderMessage(msg, this.toolCards))}
-        ${this.thinking && !this.messages?.at(-1)?.streaming ? html`<div class="chat-thinking">Thinking...</div>` : nothing}
+      <div class="chat-body">
+        <div class="chat-header">
+          <button
+            type="button"
+            class="chat-header-btn clear-btn"
+            aria-label="Clear chat"
+            ?hidden=${!this.messages?.length}
+            @click=${() => this.clear()}
+          >${icon('clear')}<span>Clear</span></button>
+          <button
+            type="button"
+            class="chat-header-btn"
+            aria-label="Close chat panel"
+            @click=${this._closePanel}
+          >${icon('close')}</button>
         </div>
-      </div>
-      <div class="chat-form-wrap">
-        <nx-menu
-          class="slash-menu"
-          .ignoreFocus=${true}
-          .scoped=${true}
-          @select=${({ detail }) => this._onSlashSelect(detail.id)}
-          @mousedown=${(e) => e.preventDefault()}
-        ></nx-menu>
-        ${renderApprovalCard(this._pendingApproval(), this._controller.approveToolCall)}
-        <form class="chat-form" autocomplete="off" @submit=${this._submit}
-          @dragenter=${this._onDragEnter}
-          @dragleave=${this._onDragLeave}
-          @dragover=${this._onDragOver}
-          @drop=${this._onDrop}
-        >
-        <input
-          class="chat-file-input"
-          type="file"
-          accept="image/*,text/markdown,.md,application/pdf,.pdf"
-          multiple
-          hidden
-          @change=${this._onFileInputChange}
-        />
-        ${this._dragging ? html`
-          <div class="chat-drop-zone" aria-hidden="true">
-            <span class="chat-drop-title">Drop a file to add context</span>
-            <span class="chat-drop-hint">Supports PDF, images, and documents</span>
-          </div>` : nothing}
-        ${this._items?.length ? html`
-          <nx-chat-pills
-            .items=${this._items}
-            @nx-pill-remove=${this._handlePillRemove}
-            @nx-pill-pin=${this._handlePillPin}
-            @nx-pill-activate=${this._handlePillActivate}
-          ></nx-chat-pills>` : nothing}
-        <textarea
-          name="chat-input"
-          class="chat-input"
-          placeholder="Ask anything, or type / for skills..."
-          ?disabled=${this.thinking || !this.connected}
-          @input=${this._handleInput}
-          @keydown=${this._handleKeydown}
-          @blur=${this._handleBlur}
-        ></textarea>
-        <div class="chat-actions" ?data-thinking=${this.thinking} ?data-has-items=${!!this._items?.length}>
-          <nx-menu .items=${ADD_MENU_ITEMS} placement="above" @select=${this._handleMenuSelect}>
-            <button slot="trigger" class="chat-add" type="button" aria-label="Add" @click=${this._onAddClick}>
-              <span class="icon-add">${icon('add')}</span>
-              <span class="icon-up">${icon('up')}</span>
-            </button>
-          </nx-menu>
-          <button class="chat-stop action-btn" type="button" aria-label="Stop" @click=${this._submit}>${icon('stop')}</button>
-          <button class="chat-send action-btn" type="submit" aria-label="Send">${icon('send')}</button>
+        <div class="chat-scroll-container">
+          <div class="chat-messages-container" role="log" aria-live="polite">
+            ${!this.messages?.length && !this.thinking
+          ? html`<nx-chat-welcome
+                .prompts=${prompts}
+                .onSend=${(p) => this._sendPrompt(p)}
+                @nx-show-prompts=${this._openPrompts}
+              ></nx-chat-welcome>`
+          : nothing}
+          ${this.messages?.map((msg) => renderMessage(msg, this.toolCards))}
+          ${this.thinking && !this.messages?.at(-1)?.streaming ? html`<div class="chat-thinking">Thinking...</div>` : nothing}
+          </div>
+        </div>
+        <div class="chat-form-wrap">
+          <nx-menu
+            class="slash-menu"
+            .ignoreFocus=${true}
+            .scoped=${true}
+            @select=${({ detail }) => this._onSlashSelect(detail.id)}
+            @mousedown=${(e) => e.preventDefault()}
+          ></nx-menu>
+          ${renderApprovalCard(this._pendingApproval(), this._controller.approveToolCall)}
+          <form class="chat-form" autocomplete="off" @submit=${this._submit}
+            @dragenter=${this._onDragEnter}
+            @dragleave=${this._onDragLeave}
+            @dragover=${this._onDragOver}
+            @drop=${this._onDrop}
+          >
+          <input
+            class="chat-file-input"
+            type="file"
+            accept="image/*,text/markdown,.md,application/pdf,.pdf"
+            multiple
+            hidden
+            @change=${this._onFileInputChange}
+          />
+          ${this._dragging ? html`
+            <div class="chat-drop-zone" aria-hidden="true">
+              <span class="chat-drop-title">Drop a file to add context</span>
+              <span class="chat-drop-hint">Supports PDF, images, and documents</span>
+            </div>` : nothing}
+          ${this._items?.length ? html`
+            <nx-chat-pills
+              .items=${this._items}
+              @nx-pill-remove=${this._handlePillRemove}
+              @nx-pill-pin=${this._handlePillPin}
+              @nx-pill-activate=${this._handlePillActivate}
+            ></nx-chat-pills>` : nothing}
+          <textarea
+            name="chat-input"
+            class="chat-input"
+            placeholder="Ask anything, or type / for skills..."
+            ?disabled=${this.thinking || !this.connected}
+            @input=${this._handleInput}
+            @keydown=${this._handleKeydown}
+            @blur=${this._handleBlur}
+          ></textarea>
+          <div class="chat-actions" ?data-thinking=${this.thinking} ?data-has-items=${!!this._items?.length}>
+            <nx-menu .items=${ADD_MENU_ITEMS} placement="above" @select=${this._handleMenuSelect}>
+              <button slot="trigger" class="chat-add" type="button" aria-label="Add" @click=${this._onAddClick}>
+                <span class="icon-add">${icon('add')}</span>
+                <span class="icon-up">${icon('up')}</span>
+              </button>
+            </nx-menu>
+            <button class="chat-stop action-btn" type="button" aria-label="Stop" @click=${this._submit}>${icon('stop')}</button>
+            <button class="chat-send action-btn" type="submit" aria-label="Send">${icon('send')}</button>
+          </div>
+          </form>
         </div>
-        </form>
       </div>
       <p class="chat-disclaimer">
         Responses are generated using AI, and may be inaccurate. Check before using.
diff --git a/nx2/styles/styles.css b/nx2/styles/styles.css
index 0f7180094..993f852f2 100644
--- a/nx2/styles/styles.css
+++ b/nx2/styles/styles.css
@@ -560,6 +560,16 @@ html:has(meta[content="edge-delivery"]) {
             left: -12px;
           }
         }
+
+        &:has([styled-as-panel]) .panel-wrapper {
+          border-radius: 0;
+          background: none;
+        }
+
+        &:has([styled-as-panel]) .panel-shell {
+          border: none;
+          overflow: visible;
+        }
       }
 
       footer {