@chatsystem/client 2.0.0 → 2.0.2

package/README.md

@@ -103,6 +103,13 @@ the client itself; it must never be reimplemented in a host-specific adapter.
 
 ## Browser regression tests
 
+Local-preview feedback is translated through `react-intl`: completing or closing
+the form explicitly says that this was a demo and no answers were transmitted.
+The generic renderer does not promise storage, support handling or Slack delivery.
+The server-owned Tool presentation explains its own production journey (for
+example, the support-request inbox and optional Slack channel). This copy remains
+visible after completion without adding a Tool-name switch or browser protocol.
+
 The package has a Playwright suite under `e2e/identity-gate`. It builds this
 library, mounts it inside a fictional customer website, and drives a real
 headless Chromium through identity delegation, redirect/resume, shared-runtime
@@ -159,6 +166,61 @@ programmatic browser API so the provider functions remain JavaScript values:
 This passes the provider to the same internal `App` and identity session used
 by the npm package. Do not place callbacks or secrets in `data-*` attributes.
 
+## Custom CSS and layout
+
+Put custom rules in the Agent's `CSSRules`, which are inserted after the default
+widget styles inside its Shadow DOM. Host-page styles cannot select elements
+inside that boundary. A custom `cssHref` can also provide the widget stylesheet.
+
+| Selector | Layout contract |
+| --- | --- |
+| `.chatBox` | Chat surface; in launcher mode, the actual floating window |
+| `.chatsystem-widget-window` | Launcher window only; owns viewport positioning |
+| `.chatsystem-widget-surface` | Clips window contents and inherits its background and corners |
+| `.launcher` | Floating launcher button |
+| `.chatsystem-header` | Launcher header; contains the existing `.chatSystem-widgetLogo` and action group |
+| `.chatsystem-header__actions` | Menu and close buttons in a shared flex row; customize spacing with `gap` |
+| `.chatsystem-header__menu` | Discussion menu wrapper inside the header |
+| `.chatsystem-close-button` | Header close button |
+| `.chatbox-input-wrapper` | Existing conversation input area |
+| `.chatsystem-composer` | Text input and actions in a shared flex row |
+| `.chatsystem-composer__input` | Textarea; customize padding, border and maximum height |
+| `.chatsystem-composer__actions` | Mic, Send or Stop action group; customize its `gap` and padding |
+| `.chatsystem-mic-button`, `.chatsystem-paperplane-button`, `.chatsystem-stop-button` | Existing action button selectors |
+| `.chatsystem-powered-by-inline`, `.chatsystem-powered-by-mobile`, `.chatsystem-powered-by-widget-badge` | Existing branding placement selectors; presentation defaults can be overridden |
+| `.chatsystem-powered-by__link` | Branding link |
+| `.chatsystem-scroll-to-bottom` | Recent-messages button, positioned relative to the messages' lower edge |
+| `.chatsystem-interactive-widget` | Form panel inside the scrolling conversation |
+
+For example, these Agent rules move the launcher and its window to the left:
+
+```css
+.chatsystem-widget-window, .launcher { left: 18px; right: auto; }
+.chatsystem-interactive-widget { border-radius: 6px; }
+```
+
+Legacy `.chatBox` positioning rules remain supported. Inline chat stays in normal
+document flow. Interactive forms stay in the message flow and scroll with it;
+they do not create a floating overlay. Defaults remain overridable in both the
+constructable stylesheet and style-tag fallback paths.
+
+Header actions share normal flex layout, so their hit targets remain separated
+when the host document changes its root font size. The default action gap is
+8px and can be overridden, for example `.chatsystem-header__actions { gap: 12px; }`.
+The widget does not change the host page's root font size.
+
+The composer also uses normal flow, so its buttons cannot cover the text area
+when the host changes rem sizing. Long drafts scroll within a default maximum
+height of `min(160px, 25dvh)`; customize `max-height` on
+`.chatsystem-composer__input` when needed. Only its measured auto-grow height is
+set dynamically; borders, padding and width remain CSS-overridable.
+
+On desktop, the window height is bounded by the available viewport. Set
+`--chatsystem-widget-bottom` on `.chatsystem-widget-window` to customize its
+bottom offset together with that bound. Existing `.chatBox` positioning rules
+still apply. A custom `cssHref` replaces the bundled base stylesheet: keep that
+stylesheet compatible with the client version you deploy.
+
 ## Completed AI answers per discussion
 
 The API controls the discussion allowance through