@atelier-ui/react 0.0.28 → 0.0.29

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/package.json +1 -1
  3. package/src/lib/chat/llm-chat.d.ts +3 -1
  4. package/src/lib/chat/llm-chat.d.ts.map +1 -1
  5. package/src/lib/chat/llm-chat.js +30 -3
  6. package/src/lib/chat/llm-chat.js.map +1 -1
package/CHANGELOG.md CHANGED
@@ -1,3 +1,14 @@
1
+ ## 0.0.29 (2026-04-25)
2
+
3
+ ### 🚀 Features
4
+
5
+ - **chat:** auto-scroll messages + focus input on open ([686af87](https://github.com/DominikPieper/atelier-ui/commit/686af87))
6
+
7
+ ### ❤️ Thank You
8
+
9
+ - Claude Opus 4.7 (1M context)
10
+ - Dominik Pieper
11
+
1
12
  ## 0.0.28 (2026-04-25)
2
13
 
3
14
  This was a version bump only for react to align it with other projects, there were no code changes.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atelier-ui/react",
3
- "version": "0.0.28",
3
+ "version": "0.0.29",
4
4
  "description": "Atelier UI component library for React — LLM-optimised, accessible, design-token-driven",
5
5
  "keywords": [
6
6
  "react",
package/src/lib/chat/llm-chat.d.ts CHANGED
@@ -29,7 +29,9 @@ export declare function LlmChat({ variant, status, open, onOpenChange, children,
29
29
  export declare function LlmChatHeader({ children, className, ...rest }: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
30
30
  /**
31
31
  * Scrollable message list. Project `LlmChatMessage`, `LlmChatTyping`, or
32
- * `LlmChatSuggestion` children inside.
32
+ * `LlmChatSuggestion` children inside. Auto-scrolls to the bottom whenever
33
+ * children are added or content changes — important for streaming responses
34
+ * where new tokens are appended live.
33
35
  */
34
36
  export declare function LlmChatMessages({ children, className, ...rest }: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
35
37
  /**
package/src/lib/chat/llm-chat.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"llm-chat.d.ts","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/chat/llm-chat.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,cAAc,EAGd,SAAS,EACT,sBAAsB,EAOvB,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EACV,kBAAkB,EAClB,aAAa,EACb,cAAc,EACf,MAAM,SAAS,CAAC;AACjB,OAAO,gBAAgB,CAAC;AAgBxB;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,sBAAsB;IACtB,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,oCAAoC;IACpC,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,0DAA0D;IAC1D,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,8CAA8C;IAC9C,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;GAKG;AACH,wBAAgB,OAAO,CAAC,EACtB,OAAkB,EAClB,MAAe,EACf,IAAY,EACZ,YAAY,EACZ,QAAQ,GACT,EAAE,YAAY,2CA2Gd;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,cAAc,CAAC,cAAc,CAAC,2CAiChC;AAED;;;GAGG;AACH,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,cAAc,CAAC,cAAc,CAAC,2CAShC;AAED;;GAEG;AACH,MAAM,WAAW,mBAAoB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACzE,6BAA6B;IAC7B,IAAI,CAAC,EAAE,kBAAkB,CAAC;IAC1B,uDAAuD;IACvD,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,wBAAgB,cAAc,CAAC,EAC7B,IAAkB,EAClB,MAAc,EACd,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,mBAAmB,2CAcrB;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,EAC5B,SAAS,EACT,GAAG,IAAI,EACR,EAAE,cAAc,CAAC,cAAc,CAAC,2CAchC;AAED;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACrC,uCAAuC;IACvC,KAAK,EAAE,MAAM,CAAC;IACd,oCAAoC;IACpC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6CAA6C;IAC7C,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,IAAI,EACJ,UAAU,EACV,SAAS,GACV,EAAE,sBAAsB,2CAexB;AAED;;;;;;GAMG;AACH,MAAM,WAAW,iBACf,SAAQ,IAAI,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,EAAE,UAAU,CAAC;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,4CAA4C;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,aAAa,EACb,MAAM,EACN,MAAM,EACN,WAAW,EACX,SAAuC,EACvC,GAAG,IAAI,EACR,EAAE,iBAAiB,2CAuEnB"}
1
+ {"version":3,"file":"llm-chat.d.ts","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/chat/llm-chat.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,cAAc,EAGd,SAAS,EACT,sBAAsB,EAOvB,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EACV,kBAAkB,EAClB,aAAa,EACb,cAAc,EACf,MAAM,SAAS,CAAC;AACjB,OAAO,gBAAgB,CAAC;AAgBxB;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,sBAAsB;IACtB,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,oCAAoC;IACpC,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,0DAA0D;IAC1D,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,8CAA8C;IAC9C,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;GAKG;AACH,wBAAgB,OAAO,CAAC,EACtB,OAAkB,EAClB,MAAe,EACf,IAAY,EACZ,YAAY,EACZ,QAAQ,GACT,EAAE,YAAY,2CAuHd;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,cAAc,CAAC,cAAc,CAAC,2CAiChC;AAED;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,cAAc,CAAC,cAAc,CAAC,2CAoBhC;AAED;;GAEG;AACH,MAAM,WAAW,mBAAoB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACzE,6BAA6B;IAC7B,IAAI,CAAC,EAAE,kBAAkB,CAAC;IAC1B,uDAAuD;IACvD,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,wBAAgB,cAAc,CAAC,EAC7B,IAAkB,EAClB,MAAc,EACd,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,mBAAmB,2CAcrB;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,EAC5B,SAAS,EACT,GAAG,IAAI,EACR,EAAE,cAAc,CAAC,cAAc,CAAC,2CAchC;AAED;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACrC,uCAAuC;IACvC,KAAK,EAAE,MAAM,CAAC;IACd,oCAAoC;IACpC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6CAA6C;IAC7C,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,IAAI,EACJ,UAAU,EACV,SAAS,GACV,EAAE,sBAAsB,2CAexB;AAED;;;;;;GAMG;AACH,MAAM,WAAW,iBACf,SAAQ,IAAI,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,EAAE,UAAU,CAAC;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,4CAA4C;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,aAAa,EACb,MAAM,EACN,MAAM,EACN,WAAW,EACX,SAAuC,EACvC,GAAG,IAAI,EACR,EAAE,iBAAiB,2CAuEnB"}
package/src/lib/chat/llm-chat.js CHANGED
@@ -35,6 +35,20 @@ export function LlmChat({ variant = 'drawer', status = 'idle', open = false, onO
35
35
  triggerElRef.current = null;
36
36
  }
37
37
  }, [open, variant]);
38
+ // Auto-focus the input on open for drawer / popup. Inline keeps user focus.
39
+ const hostRef = useRef(null);
40
+ useEffect(() => {
41
+ if (!open)
42
+ return;
43
+ if (variant === 'inline')
44
+ return;
45
+ const host = hostRef.current;
46
+ if (!host)
47
+ return;
48
+ requestAnimationFrame(() => {
49
+ host.querySelector('textarea')?.focus();
50
+ });
51
+ }, [open, variant]);
38
52
  useEffect(() => {
39
53
  if (variant !== 'drawer')
40
54
  return;
@@ -71,7 +85,7 @@ export function LlmChat({ variant = 'drawer', status = 'idle', open = false, onO
71
85
  close: () => onOpenChange?.(false),
72
86
  toggle: () => onOpenChange?.(!open),
73
87
  };
74
- return (_jsx(ChatContext.Provider, { value: ctx, children: _jsxs("div", { className: hostClass, children: [variant === 'drawer' && (_jsx("dialog", { ref: dialogRef, "aria-labelledby": headerId, "aria-modal": "true", onClick: handleBackdropClick, children: _jsx("div", { className: "surface drawer-surface", onClick: (e) => e.stopPropagation(), children: children }) })), variant === 'popup' && (_jsxs(_Fragment, { children: [open && (_jsx("div", { className: "surface popup-surface", role: "dialog", "aria-labelledby": headerId, children: children })), _jsx("button", { type: "button", className: "fab-bubble", "aria-label": open ? 'Close AI assistant' : 'Open AI assistant', "aria-expanded": open, onClick: () => onOpenChange?.(!open), children: _jsx("span", { "aria-hidden": "true", children: "AI" }) })] })), variant === 'inline' && (_jsx("section", { className: "surface inline-surface", "aria-labelledby": headerId, children: children }))] }) }));
88
+ return (_jsx(ChatContext.Provider, { value: ctx, children: _jsxs("div", { ref: hostRef, className: hostClass, children: [variant === 'drawer' && (_jsx("dialog", { ref: dialogRef, "aria-labelledby": headerId, "aria-modal": "true", onClick: handleBackdropClick, children: _jsx("div", { className: "surface drawer-surface", onClick: (e) => e.stopPropagation(), children: children }) })), variant === 'popup' && (_jsxs(_Fragment, { children: [open && (_jsx("div", { className: "surface popup-surface", role: "dialog", "aria-labelledby": headerId, children: children })), _jsx("button", { type: "button", className: "fab-bubble", "aria-label": open ? 'Close AI assistant' : 'Open AI assistant', "aria-expanded": open, onClick: () => onOpenChange?.(!open), children: _jsx("span", { "aria-hidden": "true", children: "AI" }) })] })), variant === 'inline' && (_jsx("section", { className: "surface inline-surface", "aria-labelledby": headerId, children: children }))] }) }));
75
89
  }
76
90
  /**
77
91
  * Header slot for `LlmChat`. Holds the title block; the close button
@@ -83,10 +97,23 @@ export function LlmChatHeader({ children, className, ...rest }) {
83
97
  }
84
98
  /**
85
99
  * Scrollable message list. Project `LlmChatMessage`, `LlmChatTyping`, or
86
- * `LlmChatSuggestion` children inside.
100
+ * `LlmChatSuggestion` children inside. Auto-scrolls to the bottom whenever
101
+ * children are added or content changes — important for streaming responses
102
+ * where new tokens are appended live.
87
103
  */
88
104
  export function LlmChatMessages({ children, className, ...rest }) {
89
- return (_jsx("div", { className: ['llm-chat-messages', className].filter(Boolean).join(' '), ...rest, children: children }));
105
+ const ref = useRef(null);
106
+ useEffect(() => {
107
+ const el = ref.current;
108
+ if (!el)
109
+ return;
110
+ const stickToBottom = () => { el.scrollTop = el.scrollHeight; };
111
+ stickToBottom();
112
+ const observer = new MutationObserver(stickToBottom);
113
+ observer.observe(el, { childList: true, subtree: true, characterData: true });
114
+ return () => observer.disconnect();
115
+ }, []);
116
+ return (_jsx("div", { ref: ref, className: ['llm-chat-messages', className].filter(Boolean).join(' '), ...rest, children: children }));
90
117
  }
91
118
  export function LlmChatMessage({ role = 'assistant', failed = false, children, className, ...rest }) {
92
119
  const classes = [
package/src/lib/chat/llm-chat.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"llm-chat.js","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/chat/llm-chat.tsx"],"names":[],"mappings":";AAAA,OAAO,EAOL,aAAa,EACb,UAAU,EACV,SAAS,EACT,KAAK,EACL,MAAM,EACN,QAAQ,GACT,MAAM,OAAO,CAAC;AAMf,OAAO,gBAAgB,CAAC;AASxB,MAAM,WAAW,GAAG,aAAa,CAAmB;IAClD,QAAQ,EAAE,EAAE;IACZ,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,GAAG,EAAE,CAAC,SAAS;IACtB,MAAM,EAAE,GAAG,EAAE,CAAC,SAAS;CACxB,CAAC,CAAC;AAiBH;;;;;GAKG;AACH,MAAM,UAAU,OAAO,CAAC,EACtB,OAAO,GAAG,QAAQ,EAClB,MAAM,GAAG,MAAM,EACf,IAAI,GAAG,KAAK,EACZ,YAAY,EACZ,QAAQ,GACK;IACb,MAAM,SAAS,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAClD,MAAM,QAAQ,GAAG,KAAK,EAAE,CAAC;IACzB,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAElD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,OAAO,KAAK,QAAQ;YAAE,OAAO;QACjC,MAAM,MAAM,GAAG,SAAS,CAAC,OAAO,CAAC;QACjC,IAAI,CAAC,MAAM;YAAE,OAAO;QACpB,IAAI,IAAI,EAAE,CAAC;YACT,YAAY,CAAC,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC;YAC9C,IAAI,CAAC,MAAM,CAAC,IAAI;gBAAE,MAAM,CAAC,SAAS,EAAE,CAAC;QACvC,CAAC;aAAM,CAAC;YACN,IAAI,MAAM,CAAC,IAAI;gBAAE,MAAM,CAAC,KAAK,EAAE,CAAC;YAC/B,YAAY,CAAC,OAA8B,EAAE,KAAK,EAAE,CAAC;YACtD,YAAY,CAAC,OAAO,GAAG,IAAI,CAAC;QAC9B,CAAC;IACH,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC;IAEpB,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,OAAO,KAAK,QAAQ;YAAE,OAAO;QACjC,MAAM,MAAM,GAAG,SAAS,CAAC,OAAO,CAAC;QACjC,IAAI,CAAC,MAAM;YAAE,OAAO;QACpB,MAAM,OAAO,GAAG,GAAG,EAAE,CAAC,YAAY,EAAE,CAAC,KAAK,CAAC,CAAC;QAC5C,MAAM,QAAQ,GAAG,CAAC,CAAQ,EAAE,EAAE;YAC5B,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,YAAY,EAAE,CAAC,KAAK,CAAC,CAAC;QACxB,CAAC,CAAC;QACF,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;QAC1C,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;QAC5C,OAAO,GAAG,EAAE;YACV,MAAM,CAAC,mBAAmB,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;YAC7C,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;QACjD,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,YAAY,EAAE,OAAO,CAAC,CAAC,CAAC;IAE5B,MAAM,mBAAmB,GAAG,CAAC,CAAgC,EAAE,EAAE;QAC/D,IAAI,CAAC,CAAC,MAAM,KAAK,SAAS,CAAC,OAAO;YAAE,YAAY,EAAE,CAAC,KAAK,CAAC,CAAC;IAC5D,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG;QAChB,UAAU;QACV,WAAW,OAAO,EAAE;QACpB,UAAU,MAAM,EAAE;QAClB,IAAI,IAAI,SAAS;KAClB;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IAEb,MAAM,GAAG,GAAqB;QAC5B,QAAQ;QACR,MAAM;QACN,KAAK,EAAE,GAAG,EAAE,CAAC,YAAY,EAAE,CAAC,KAAK,CAAC;QAClC,MAAM,EAAE,GAAG,EAAE,CAAC,YAAY,EAAE,CAAC,CAAC,IAAI,CAAC;KACpC,CAAC;IAEF,OAAO,CACL,KAAC,WAAW,CAAC,QAAQ,IAAC,KAAK,EAAE,GAAG,YAC9B,eAAK,SAAS,EAAE,SAAS,aACtB,OAAO,KAAK,QAAQ,IAAI,CACvB,iBACE,GAAG,EAAE,SAAS,qBACG,QAAQ,gBACd,MAAM,EACjB,OAAO,EAAE,mBAAmB,YAE5B,cACE,SAAS,EAAC,wBAAwB,EAClC,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,YAElC,QAAQ,GACL,GACC,CACV,EACA,OAAO,KAAK,OAAO,IAAI,CACtB,8BACG,IAAI,IAAI,CACP,cACE,SAAS,EAAC,uBAAuB,EACjC,IAAI,EAAC,QAAQ,qBACI,QAAQ,YAExB,QAAQ,GACL,CACP,EACD,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,YAAY,gBACV,IAAI,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,mBAAmB,mBAC9C,IAAI,EACnB,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,EAAE,CAAC,CAAC,IAAI,CAAC,YAEpC,8BAAkB,MAAM,mBAAU,GAC3B,IACR,CACJ,EACA,OAAO,KAAK,QAAQ,IAAI,CACvB,kBACE,SAAS,EAAC,wBAAwB,qBACjB,QAAQ,YAExB,QAAQ,GACD,CACX,IACG,GACe,CACxB,CAAC;AACJ,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,aAAa,CAAC,EAC5B,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACwB;IAC/B,MAAM,GAAG,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IACpC,OAAO,CACL,eACE,EAAE,EAAE,GAAG,CAAC,QAAQ,EAChB,SAAS,EAAE,CAAC,iBAAiB,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,KAC/D,IAAI,aAER,cAAK,SAAS,EAAC,aAAa,YAAE,QAAQ,GAAO,EAC7C,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,WAAW,gBACV,YAAY,EACvB,OAAO,EAAE,GAAG,CAAC,KAAK,YAElB,eACE,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,KAAK,EACjB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,iBACV,MAAM,aAElB,eAAM,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,IAAI,GAAG,EACtC,eAAM,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,GAAG,IAClC,GACC,IACL,CACP,CAAC;AACJ,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,eAAe,CAAC,EAC9B,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACwB;IAC/B,OAAO,CACL,cACE,SAAS,EAAE,CAAC,mBAAmB,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,KACjE,IAAI,YAEP,QAAQ,GACL,CACP,CAAC;AACJ,CAAC;AAYD,MAAM,UAAU,cAAc,CAAC,EAC7B,IAAI,GAAG,WAAW,EAClB,MAAM,GAAG,KAAK,EACd,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACa;IACpB,MAAM,OAAO,GAAG;QACd,kBAAkB;QAClB,QAAQ,IAAI,EAAE;QACd,MAAM,IAAI,WAAW;QACrB,SAAS;KACV;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IACb,OAAO,CACL,cAAK,IAAI,EAAC,UAAU,EAAC,SAAS,EAAE,OAAO,KAAM,IAAI,YAC9C,QAAQ,GACL,CACP,CAAC;AACJ,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,aAAa,CAAC,EAC5B,SAAS,EACT,GAAG,IAAI,EACwB;IAC/B,OAAO,CACL,eACE,IAAI,EAAC,QAAQ,eACH,QAAQ,EAClB,SAAS,EAAE,CAAC,iBAAiB,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,KAC/D,IAAI,aAER,eAAM,SAAS,EAAC,KAAK,GAAG,EACxB,eAAM,SAAS,EAAC,KAAK,GAAG,EACxB,eAAM,SAAS,EAAC,KAAK,GAAG,EACxB,eAAM,SAAS,EAAC,SAAS,oCAA2B,IAChD,CACP,CAAC;AACJ,CAAC;AAeD,MAAM,UAAU,iBAAiB,CAAC,EAChC,KAAK,EACL,IAAI,EACJ,UAAU,EACV,SAAS,GACc;IACvB,OAAO,CACL,cACE,SAAS,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,YAEvE,kBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,MAAM,EAChB,OAAO,EAAE,GAAG,EAAE,CAAC,UAAU,EAAE,CAAC,KAAK,CAAC,aAElC,eAAM,SAAS,EAAC,YAAY,YAAE,KAAK,GAAQ,EAC1C,IAAI,IAAI,eAAM,SAAS,EAAC,WAAW,YAAE,IAAI,GAAQ,IAC3C,GACL,CACP,CAAC;AACJ,CAAC;AAmBD,MAAM,UAAU,YAAY,CAAC,EAC3B,KAAK,EACL,aAAa,EACb,MAAM,EACN,MAAM,EACN,WAAW,EACX,SAAS,GAAG,2BAA2B,EACvC,GAAG,IAAI,EACW;IAClB,MAAM,GAAG,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IACpC,MAAM,WAAW,GAAG,GAAG,CAAC,MAAM,KAAK,WAAW,CAAC;IAC/C,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAC7C,MAAM,YAAY,GAAG,KAAK,KAAK,SAAS,CAAC;IACzC,MAAM,OAAO,GAAG,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC;IAEhD,MAAM,UAAU,GAAG,CAAC,IAAY,EAAE,EAAE;QAClC,IAAI,CAAC,YAAY;YAAE,WAAW,CAAC,IAAI,CAAC,CAAC;QACrC,aAAa,EAAE,CAAC,IAAI,CAAC,CAAC;IACxB,CAAC,CAAC;IAEF,MAAM,oBAAoB,GACxB,WAAW;QACX,CAAC,WAAW;YACV,CAAC,CAAC,uBAAuB;YACzB,CAAC,CAAC,GAAG,CAAC,MAAM,KAAK,OAAO;gBACtB,CAAC,CAAC,YAAY;gBACd,CAAC,CAAC,4BAA4B,CAAC,CAAC;IAEtC,MAAM,QAAQ,GAAG,GAAG,EAAE;QACpB,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,EAAE,CAAC;QAC5B,IAAI,CAAC,IAAI,IAAI,WAAW;YAAE,OAAO;QACjC,MAAM,EAAE,CAAC,IAAI,CAAC,CAAC;QACf,UAAU,CAAC,EAAE,CAAC,CAAC;IACjB,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,CAAC,CAAmC,EAAE,EAAE;QAC3D,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAC7B,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,CAAC,CAAqC,EAAE,EAAE;QAC9D,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC;YACrC,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,QAAQ,EAAE,CAAC;QACb,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,CACL,eAAK,SAAS,EAAC,gBAAgB,aAC7B,mBACE,SAAS,EAAC,OAAO,EACjB,IAAI,EAAE,CAAC,EACP,KAAK,EAAE,OAAO,EACd,WAAW,EAAE,oBAAoB,EACjC,QAAQ,EAAE,WAAW,gBACT,SAAS,EACrB,QAAQ,EAAE,YAAY,EACtB,SAAS,EAAE,aAAa,KACpB,IAAI,GACR,EACD,WAAW,CAAC,CAAC,CAAC,CACb,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,mCAAmC,EAC7C,OAAO,EAAE,MAAM,qBAGR,CACV,CAAC,CAAC,CAAC,CACF,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,oCAAoC,EAC9C,QAAQ,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,EACzB,OAAO,EAAE,QAAQ,qBAGV,CACV,IACG,CACP,CAAC;AACJ,CAAC","sourcesContent":["import {\n ChangeEvent,\n HTMLAttributes,\n KeyboardEvent,\n MouseEvent,\n ReactNode,\n TextareaHTMLAttributes,\n createContext,\n useContext,\n useEffect,\n useId,\n useRef,\n useState,\n} from 'react';\nimport type {\n LlmChatMessageRole,\n LlmChatStatus,\n LlmChatVariant,\n} from '../spec';\nimport './llm-chat.css';\n\ninterface ChatContextValue {\n headerId: string;\n status: LlmChatStatus;\n close: () => void;\n toggle: () => void;\n}\n\nconst ChatContext = createContext<ChatContextValue>({\n headerId: '',\n status: 'idle',\n close: () => undefined,\n toggle: () => undefined,\n});\n\n/**\n * Properties for the LlmChat component.\n */\nexport interface LlmChatProps {\n /** Layout variant. */\n variant?: LlmChatVariant;\n /** Connection / response status. */\n status?: LlmChatStatus;\n /** Whether the chat is open (drawer / popup variants). */\n open?: boolean;\n /** Callback when open state should change. */\n onOpenChange?: (open: boolean) => void;\n children?: ReactNode;\n}\n\n/**\n * AI assistant surface. Three layout variants share the same content slots:\n * `drawer` (slide-in panel), `popup` (floating bubble + window), `inline`\n * (embedded card). Compose with `LlmChatHeader`, `LlmChatMessages`,\n * `LlmChatMessage`, `LlmChatTyping`, `LlmChatSuggestion`, `LlmChatInput`.\n */\nexport function LlmChat({\n variant = 'drawer',\n status = 'idle',\n open = false,\n onOpenChange,\n children,\n}: LlmChatProps) {\n const dialogRef = useRef<HTMLDialogElement>(null);\n const headerId = useId();\n const triggerElRef = useRef<Element | null>(null);\n\n useEffect(() => {\n if (variant !== 'drawer') return;\n const dialog = dialogRef.current;\n if (!dialog) return;\n if (open) {\n triggerElRef.current = document.activeElement;\n if (!dialog.open) dialog.showModal();\n } else {\n if (dialog.open) dialog.close();\n (triggerElRef.current as HTMLElement | null)?.focus();\n triggerElRef.current = null;\n }\n }, [open, variant]);\n\n useEffect(() => {\n if (variant !== 'drawer') return;\n const dialog = dialogRef.current;\n if (!dialog) return;\n const onClose = () => onOpenChange?.(false);\n const onCancel = (e: Event) => {\n e.preventDefault();\n onOpenChange?.(false);\n };\n dialog.addEventListener('close', onClose);\n dialog.addEventListener('cancel', onCancel);\n return () => {\n dialog.removeEventListener('close', onClose);\n dialog.removeEventListener('cancel', onCancel);\n };\n }, [onOpenChange, variant]);\n\n const handleBackdropClick = (e: MouseEvent<HTMLDialogElement>) => {\n if (e.target === dialogRef.current) onOpenChange?.(false);\n };\n\n const hostClass = [\n 'llm-chat',\n `variant-${variant}`,\n `status-${status}`,\n open && 'is-open',\n ]\n .filter(Boolean)\n .join(' ');\n\n const ctx: ChatContextValue = {\n headerId,\n status,\n close: () => onOpenChange?.(false),\n toggle: () => onOpenChange?.(!open),\n };\n\n return (\n <ChatContext.Provider value={ctx}>\n <div className={hostClass}>\n {variant === 'drawer' && (\n <dialog\n ref={dialogRef}\n aria-labelledby={headerId}\n aria-modal=\"true\"\n onClick={handleBackdropClick}\n >\n <div\n className=\"surface drawer-surface\"\n onClick={(e) => e.stopPropagation()}\n >\n {children}\n </div>\n </dialog>\n )}\n {variant === 'popup' && (\n <>\n {open && (\n <div\n className=\"surface popup-surface\"\n role=\"dialog\"\n aria-labelledby={headerId}\n >\n {children}\n </div>\n )}\n <button\n type=\"button\"\n className=\"fab-bubble\"\n aria-label={open ? 'Close AI assistant' : 'Open AI assistant'}\n aria-expanded={open}\n onClick={() => onOpenChange?.(!open)}\n >\n <span aria-hidden=\"true\">AI</span>\n </button>\n </>\n )}\n {variant === 'inline' && (\n <section\n className=\"surface inline-surface\"\n aria-labelledby={headerId}\n >\n {children}\n </section>\n )}\n </div>\n </ChatContext.Provider>\n );\n}\n\n/**\n * Header slot for `LlmChat`. Holds the title block; the close button\n * is rendered automatically (hidden on the inline variant via CSS).\n */\nexport function LlmChatHeader({\n children,\n className,\n ...rest\n}: HTMLAttributes<HTMLDivElement>) {\n const ctx = useContext(ChatContext);\n return (\n <div\n id={ctx.headerId}\n className={['llm-chat-header', className].filter(Boolean).join(' ')}\n {...rest}\n >\n <div className=\"title-block\">{children}</div>\n <button\n type=\"button\"\n className=\"close-btn\"\n aria-label=\"Close chat\"\n onClick={ctx.close}\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n aria-hidden=\"true\"\n >\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n </svg>\n </button>\n </div>\n );\n}\n\n/**\n * Scrollable message list. Project `LlmChatMessage`, `LlmChatTyping`, or\n * `LlmChatSuggestion` children inside.\n */\nexport function LlmChatMessages({\n children,\n className,\n ...rest\n}: HTMLAttributes<HTMLDivElement>) {\n return (\n <div\n className={['llm-chat-messages', className].filter(Boolean).join(' ')}\n {...rest}\n >\n {children}\n </div>\n );\n}\n\n/**\n * A single chat message. Role drives bubble alignment and color.\n */\nexport interface LlmChatMessageProps extends HTMLAttributes<HTMLDivElement> {\n /** Sender of the message. */\n role?: LlmChatMessageRole;\n /** Marks the message as failed (red dashed border). */\n failed?: boolean;\n}\n\nexport function LlmChatMessage({\n role = 'assistant',\n failed = false,\n children,\n className,\n ...rest\n}: LlmChatMessageProps) {\n const classes = [\n 'llm-chat-message',\n `role-${role}`,\n failed && 'is-failed',\n className,\n ]\n .filter(Boolean)\n .join(' ');\n return (\n <div role=\"listitem\" className={classes} {...rest}>\n {children}\n </div>\n );\n}\n\n/**\n * Typing indicator (three animated dots). Render at the end of the\n * message list while the assistant is streaming.\n */\nexport function LlmChatTyping({\n className,\n ...rest\n}: HTMLAttributes<HTMLDivElement>) {\n return (\n <div\n role=\"status\"\n aria-live=\"polite\"\n className={['llm-chat-typing', className].filter(Boolean).join(' ')}\n {...rest}\n >\n <span className=\"dot\" />\n <span className=\"dot\" />\n <span className=\"dot\" />\n <span className=\"sr-only\">Assistant is typing</span>\n </div>\n );\n}\n\n/**\n * Tappable suggestion chip used in the empty state to seed a conversation.\n */\nexport interface LlmChatSuggestionProps {\n /** Primary label of the suggestion. */\n label: string;\n /** Optional secondary hint text. */\n hint?: string;\n /** Fires the label string when activated. */\n onSelected?: (label: string) => void;\n className?: string;\n}\n\nexport function LlmChatSuggestion({\n label,\n hint,\n onSelected,\n className,\n}: LlmChatSuggestionProps) {\n return (\n <div\n className={['llm-chat-suggestion', className].filter(Boolean).join(' ')}\n >\n <button\n type=\"button\"\n className=\"chip\"\n onClick={() => onSelected?.(label)}\n >\n <span className=\"chip-label\">{label}</span>\n {hint && <span className=\"chip-hint\">{hint}</span>}\n </button>\n </div>\n );\n}\n\n/**\n * Composable input footer for `LlmChat`. Wraps a textarea and emits\n * `onSend` (or `onStop` when the chat status is `'streaming'`).\n *\n * The action button automatically switches between primary \"Send\" and\n * danger \"Stop\" based on the parent chat's status.\n */\nexport interface LlmChatInputProps\n extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange'> {\n value?: string;\n onValueChange?: (value: string) => void;\n onSend?: (text: string) => void;\n onStop?: () => void;\n /** Accessible label for the input field. */\n ariaLabel?: string;\n}\n\nexport function LlmChatInput({\n value,\n onValueChange,\n onSend,\n onStop,\n placeholder,\n ariaLabel = 'Message your AI assistant',\n ...rest\n}: LlmChatInputProps) {\n const ctx = useContext(ChatContext);\n const isStreaming = ctx.status === 'streaming';\n const [internal, setInternal] = useState('');\n const isControlled = value !== undefined;\n const current = isControlled ? value : internal;\n\n const setCurrent = (next: string) => {\n if (!isControlled) setInternal(next);\n onValueChange?.(next);\n };\n\n const effectivePlaceholder =\n placeholder ??\n (isStreaming\n ? 'Waiting for response…'\n : ctx.status === 'error'\n ? 'Try again…'\n : 'Message your AI assistant…');\n\n const emitSend = () => {\n const text = current.trim();\n if (!text || isStreaming) return;\n onSend?.(text);\n setCurrent('');\n };\n\n const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {\n setCurrent(e.target.value);\n };\n\n const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {\n if (e.key === 'Enter' && !e.shiftKey) {\n e.preventDefault();\n emitSend();\n }\n };\n\n return (\n <div className=\"llm-chat-input\">\n <textarea\n className=\"field\"\n rows={1}\n value={current}\n placeholder={effectivePlaceholder}\n disabled={isStreaming}\n aria-label={ariaLabel}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n {...rest}\n />\n {isStreaming ? (\n <button\n type=\"button\"\n className=\"action-btn variant-danger size-md\"\n onClick={onStop}\n >\n Stop\n </button>\n ) : (\n <button\n type=\"button\"\n className=\"action-btn variant-primary size-md\"\n disabled={!current.trim()}\n onClick={emitSend}\n >\n Send\n </button>\n )}\n </div>\n );\n}\n"]}
1
+ {"version":3,"file":"llm-chat.js","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/chat/llm-chat.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n ChangeEvent,\n HTMLAttributes,\n KeyboardEvent,\n MouseEvent,\n ReactNode,\n TextareaHTMLAttributes,\n createContext,\n useContext,\n useEffect,\n useId,\n useRef,\n useState,\n} from 'react';\nimport type {\n LlmChatMessageRole,\n LlmChatStatus,\n LlmChatVariant,\n} from '../spec';\nimport './llm-chat.css';\n\ninterface ChatContextValue {\n headerId: string;\n status: LlmChatStatus;\n close: () => void;\n toggle: () => void;\n}\n\nconst ChatContext = createContext<ChatContextValue>({\n headerId: '',\n status: 'idle',\n close: () => undefined,\n toggle: () => undefined,\n});\n\n/**\n * Properties for the LlmChat component.\n */\nexport interface LlmChatProps {\n /** Layout variant. */\n variant?: LlmChatVariant;\n /** Connection / response status. */\n status?: LlmChatStatus;\n /** Whether the chat is open (drawer / popup variants). */\n open?: boolean;\n /** Callback when open state should change. */\n onOpenChange?: (open: boolean) => void;\n children?: ReactNode;\n}\n\n/**\n * AI assistant surface. Three layout variants share the same content slots:\n * `drawer` (slide-in panel), `popup` (floating bubble + window), `inline`\n * (embedded card). Compose with `LlmChatHeader`, `LlmChatMessages`,\n * `LlmChatMessage`, `LlmChatTyping`, `LlmChatSuggestion`, `LlmChatInput`.\n */\nexport function LlmChat({\n variant = 'drawer',\n status = 'idle',\n open = false,\n onOpenChange,\n children,\n}: LlmChatProps) {\n const dialogRef = useRef<HTMLDialogElement>(null);\n const headerId = useId();\n const triggerElRef = useRef<Element | null>(null);\n\n useEffect(() => {\n if (variant !== 'drawer') return;\n const dialog = dialogRef.current;\n if (!dialog) return;\n if (open) {\n triggerElRef.current = document.activeElement;\n if (!dialog.open) dialog.showModal();\n } else {\n if (dialog.open) dialog.close();\n (triggerElRef.current as HTMLElement | null)?.focus();\n triggerElRef.current = null;\n }\n }, [open, variant]);\n\n // Auto-focus the input on open for drawer / popup. Inline keeps user focus.\n const hostRef = useRef<HTMLDivElement>(null);\n useEffect(() => {\n if (!open) return;\n if (variant === 'inline') return;\n const host = hostRef.current;\n if (!host) return;\n requestAnimationFrame(() => {\n host.querySelector<HTMLTextAreaElement>('textarea')?.focus();\n });\n }, [open, variant]);\n\n useEffect(() => {\n if (variant !== 'drawer') return;\n const dialog = dialogRef.current;\n if (!dialog) return;\n const onClose = () => onOpenChange?.(false);\n const onCancel = (e: Event) => {\n e.preventDefault();\n onOpenChange?.(false);\n };\n dialog.addEventListener('close', onClose);\n dialog.addEventListener('cancel', onCancel);\n return () => {\n dialog.removeEventListener('close', onClose);\n dialog.removeEventListener('cancel', onCancel);\n };\n }, [onOpenChange, variant]);\n\n const handleBackdropClick = (e: MouseEvent<HTMLDialogElement>) => {\n if (e.target === dialogRef.current) onOpenChange?.(false);\n };\n\n const hostClass = [\n 'llm-chat',\n `variant-${variant}`,\n `status-${status}`,\n open && 'is-open',\n ]\n .filter(Boolean)\n .join(' ');\n\n const ctx: ChatContextValue = {\n headerId,\n status,\n close: () => onOpenChange?.(false),\n toggle: () => onOpenChange?.(!open),\n };\n\n return (\n <ChatContext.Provider value={ctx}>\n <div ref={hostRef} className={hostClass}>\n {variant === 'drawer' && (\n <dialog\n ref={dialogRef}\n aria-labelledby={headerId}\n aria-modal=\"true\"\n onClick={handleBackdropClick}\n >\n <div\n className=\"surface drawer-surface\"\n onClick={(e) => e.stopPropagation()}\n >\n {children}\n </div>\n </dialog>\n )}\n {variant === 'popup' && (\n <>\n {open && (\n <div\n className=\"surface popup-surface\"\n role=\"dialog\"\n aria-labelledby={headerId}\n >\n {children}\n </div>\n )}\n <button\n type=\"button\"\n className=\"fab-bubble\"\n aria-label={open ? 'Close AI assistant' : 'Open AI assistant'}\n aria-expanded={open}\n onClick={() => onOpenChange?.(!open)}\n >\n <span aria-hidden=\"true\">AI</span>\n </button>\n </>\n )}\n {variant === 'inline' && (\n <section\n className=\"surface inline-surface\"\n aria-labelledby={headerId}\n >\n {children}\n </section>\n )}\n </div>\n </ChatContext.Provider>\n );\n}\n\n/**\n * Header slot for `LlmChat`. Holds the title block; the close button\n * is rendered automatically (hidden on the inline variant via CSS).\n */\nexport function LlmChatHeader({\n children,\n className,\n ...rest\n}: HTMLAttributes<HTMLDivElement>) {\n const ctx = useContext(ChatContext);\n return (\n <div\n id={ctx.headerId}\n className={['llm-chat-header', className].filter(Boolean).join(' ')}\n {...rest}\n >\n <div className=\"title-block\">{children}</div>\n <button\n type=\"button\"\n className=\"close-btn\"\n aria-label=\"Close chat\"\n onClick={ctx.close}\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n aria-hidden=\"true\"\n >\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n </svg>\n </button>\n </div>\n );\n}\n\n/**\n * Scrollable message list. Project `LlmChatMessage`, `LlmChatTyping`, or\n * `LlmChatSuggestion` children inside. Auto-scrolls to the bottom whenever\n * children are added or content changes — important for streaming responses\n * where new tokens are appended live.\n */\nexport function LlmChatMessages({\n children,\n className,\n ...rest\n}: HTMLAttributes<HTMLDivElement>) {\n const ref = useRef<HTMLDivElement>(null);\n useEffect(() => {\n const el = ref.current;\n if (!el) return;\n const stickToBottom = () => { el.scrollTop = el.scrollHeight; };\n stickToBottom();\n const observer = new MutationObserver(stickToBottom);\n observer.observe(el, { childList: true, subtree: true, characterData: true });\n return () => observer.disconnect();\n }, []);\n return (\n <div\n ref={ref}\n className={['llm-chat-messages', className].filter(Boolean).join(' ')}\n {...rest}\n >\n {children}\n </div>\n );\n}\n\n/**\n * A single chat message. Role drives bubble alignment and color.\n */\nexport interface LlmChatMessageProps extends HTMLAttributes<HTMLDivElement> {\n /** Sender of the message. */\n role?: LlmChatMessageRole;\n /** Marks the message as failed (red dashed border). */\n failed?: boolean;\n}\n\nexport function LlmChatMessage({\n role = 'assistant',\n failed = false,\n children,\n className,\n ...rest\n}: LlmChatMessageProps) {\n const classes = [\n 'llm-chat-message',\n `role-${role}`,\n failed && 'is-failed',\n className,\n ]\n .filter(Boolean)\n .join(' ');\n return (\n <div role=\"listitem\" className={classes} {...rest}>\n {children}\n </div>\n );\n}\n\n/**\n * Typing indicator (three animated dots). Render at the end of the\n * message list while the assistant is streaming.\n */\nexport function LlmChatTyping({\n className,\n ...rest\n}: HTMLAttributes<HTMLDivElement>) {\n return (\n <div\n role=\"status\"\n aria-live=\"polite\"\n className={['llm-chat-typing', className].filter(Boolean).join(' ')}\n {...rest}\n >\n <span className=\"dot\" />\n <span className=\"dot\" />\n <span className=\"dot\" />\n <span className=\"sr-only\">Assistant is typing</span>\n </div>\n );\n}\n\n/**\n * Tappable suggestion chip used in the empty state to seed a conversation.\n */\nexport interface LlmChatSuggestionProps {\n /** Primary label of the suggestion. */\n label: string;\n /** Optional secondary hint text. */\n hint?: string;\n /** Fires the label string when activated. */\n onSelected?: (label: string) => void;\n className?: string;\n}\n\nexport function LlmChatSuggestion({\n label,\n hint,\n onSelected,\n className,\n}: LlmChatSuggestionProps) {\n return (\n <div\n className={['llm-chat-suggestion', className].filter(Boolean).join(' ')}\n >\n <button\n type=\"button\"\n className=\"chip\"\n onClick={() => onSelected?.(label)}\n >\n <span className=\"chip-label\">{label}</span>\n {hint && <span className=\"chip-hint\">{hint}</span>}\n </button>\n </div>\n );\n}\n\n/**\n * Composable input footer for `LlmChat`. Wraps a textarea and emits\n * `onSend` (or `onStop` when the chat status is `'streaming'`).\n *\n * The action button automatically switches between primary \"Send\" and\n * danger \"Stop\" based on the parent chat's status.\n */\nexport interface LlmChatInputProps\n extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange'> {\n value?: string;\n onValueChange?: (value: string) => void;\n onSend?: (text: string) => void;\n onStop?: () => void;\n /** Accessible label for the input field. */\n ariaLabel?: string;\n}\n\nexport function LlmChatInput({\n value,\n onValueChange,\n onSend,\n onStop,\n placeholder,\n ariaLabel = 'Message your AI assistant',\n ...rest\n}: LlmChatInputProps) {\n const ctx = useContext(ChatContext);\n const isStreaming = ctx.status === 'streaming';\n const [internal, setInternal] = useState('');\n const isControlled = value !== undefined;\n const current = isControlled ? value : internal;\n\n const setCurrent = (next: string) => {\n if (!isControlled) setInternal(next);\n onValueChange?.(next);\n };\n\n const effectivePlaceholder =\n placeholder ??\n (isStreaming\n ? 'Waiting for response…'\n : ctx.status === 'error'\n ? 'Try again…'\n : 'Message your AI assistant…');\n\n const emitSend = () => {\n const text = current.trim();\n if (!text || isStreaming) return;\n onSend?.(text);\n setCurrent('');\n };\n\n const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {\n setCurrent(e.target.value);\n };\n\n const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {\n if (e.key === 'Enter' && !e.shiftKey) {\n e.preventDefault();\n emitSend();\n }\n };\n\n return (\n <div className=\"llm-chat-input\">\n <textarea\n className=\"field\"\n rows={1}\n value={current}\n placeholder={effectivePlaceholder}\n disabled={isStreaming}\n aria-label={ariaLabel}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n {...rest}\n />\n {isStreaming ? (\n <button\n type=\"button\"\n className=\"action-btn variant-danger size-md\"\n onClick={onStop}\n >\n Stop\n </button>\n ) : (\n <button\n type=\"button\"\n className=\"action-btn variant-primary size-md\"\n disabled={!current.trim()}\n onClick={emitSend}\n >\n Send\n </button>\n )}\n </div>\n );\n}\n"]}