feat(ew): move chat's AI disclaimer outside its bordered body#580
feat(ew): move chat's AI disclaimer outside its bordered body#580magdalenaorlowska wants to merge 1 commit into
Conversation
Adds an optional `styled` property to nx-chat, reflected as the `styled-as-panel` attribute. When set, nx-chat wraps its header, messages, and input in a bordered/rounded/backgrounded `.chat-body`, and renders the AI disclaimer below it, outside that border — all within its own shadow DOM. styles.css removes the outer panel's own background, border, and border-radius whenever it contains an element with the `styled-as-panel` attribute, so the two don't stack. panel.js is unchanged: it has no knowledge of chat or any specific consumer, just a generic `:has([styled-as-panel])` check.
| thinking: { type: Boolean }, | ||
| connected: { type: Boolean }, | ||
| toolCards: { type: Object }, | ||
| styled: { type: Boolean, reflect: true, attribute: 'styled-as-panel' }, |
There was a problem hiding this comment.
styled is a boolean, we prefer to prefix those with is/has, conventionally. the prop/attr mismatch is also confusing. why not isPanel: { type: Boolean, reflect: true, attribute: 'styled-as-panel' } so the intent is clear on both sides?
| :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); |
There was a problem hiding this comment.
we use tokens for colors everywhere else in this file. is there a reason not to use light-dark(var(--s2-gray-50), var(--s2-gray-900)) (or whatever the white/black tokens are) here?
There was a problem hiding this comment.
Tbh I dont agree with this approach - styling is a pure ux concern and this shouldnt be creeping into the core logic nor requiring a reactive property imo. Should be either controlled by classes or css properties. The panel can then check for panel-wrapper:has(nx-chat) or something similar and we only touch the css. Why not go in this direction?
|
To add to @sharanyavinod 's comment above - I'm also not sure we should be doing this. We built the panels system to be generic but in the end if it's only being used in 2 places so far - the chat and the right panel. If one of those places already becomes an exception, we should be wondering if that generic approach makes sense at all or if we need to build it in a different way. So I guess my question is:
|
4 participants
Adds an optional
styledproperty to nx-chat, reflected as thestyled-as-panelattribute. When set, nx-chat wraps its header, messages, and input in a bordered/rounded/backgrounded.chat-body, and renders the AI disclaimer below it, outside that border — all within its own shadow DOM. styles.css removes the outer panel's own background, border, and border-radius whenever it contains an element with thestyled-as-panelattribute, so the two don't stack. panel.js is unchanged: it has no knowledge of chat or any specific consumer, just a generic:has([styled-as-panel])check.