@wallarm-org/claude-design 0.0.0-stage → 4.9.0

package/dist/project/components/Chat/preview.html

@@ -0,0 +1,2 @@
+<!-- @dsCard group="AI" height=480 -->
+<!doctype html><html><head><meta charset="utf-8"></head><body><div id="preview"></div><script src="./stories.js"></script><script>window.WallarmPreview.mount(document.getElementById('preview'));</script></body></html>

package/dist/project/components/Chat/stories.js

@@ -0,0 +1,12 @@
+var e={vD(e,t,a){let l,n;/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @lightSyntaxTransform
+ * @noflow
+ * @nolint
+ * @preventMunge
+ * @preserve-invariant-messages
+ */var r,o,c=Object.create,i=Object.defineProperty,s=Object.getOwnPropertyDescriptor,m=Object.getOwnPropertyNames,h=Object.getPrototypeOf,d=Object.prototype.hasOwnProperty,u=(e,t,a,l)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let n of m(t))d.call(e,n)||n===a||i(e,n,{get:()=>t[n],enumerable:!(l=s(t,n))||l.enumerable});return e},_={},f={$dispatcherGuard:()=>z,$makeReadOnly:()=>N,$reset:()=>E,$structuralCheck:()=>O,c:()=>C,clearRenderCounterRegistry:()=>$,renderCounterRegistry:()=>M,useRenderCounter:()=>T};for(var y in f)i(_,y,{get:f[y],enumerable:!0});e.exports=u(i({},"__esModule",{value:!0}),_);var b=(n=null!=(l=a("C"))?c(h(l)):{},u(l&&l.__esModule?n:i(n,"default",{value:l,enumerable:!0}),l)),{useRef:p,useEffect:S,isValidElement:g}=b,w=null!=(r=b.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE)?r:b.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,v=Symbol.for("react.memo_cache_sentinel"),C="function"==typeof(null==(o=b.__COMPILER_RUNTIME)?void 0:o.c)?b.__COMPILER_RUNTIME.c:function(e){return b.useMemo(()=>{let t=Array(e);for(let a=0;a<e;a++)t[a]=v;return t[v]=!0,t},[])},D={};["readContext","useCallback","useContext","useEffect","useImperativeHandle","useInsertionEffect","useLayoutEffect","useMemo","useReducer","useRef","useState","useDebugValue","useDeferredValue","useTransition","useMutableSource","useSyncExternalStore","useId","unstable_isNewReconciler","getCacheSignal","getCacheForType","useCacheRefresh"].forEach(e=>{D[e]=()=>{throw Error(`[React] Unexpected React hook call (${e}) from a React compiled function. Check that all hooks are called directly and named according to convention ('use[A-Z]') `)}});var k=null;function R(e){return w.ReactCurrentDispatcher.current=e,w.ReactCurrentDispatcher.current}D.useMemoCache=e=>{if(null!=k)return k.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var W=[];function z(e){let t=w.ReactCurrentDispatcher.current;if(0===e){if(W.push(t),1===W.length&&(k=t),t===D)throw Error("[React] Unexpected call to custom hook or component from a React compiled function. Check that (1) all hooks are called directly and named according to convention ('use[A-Z]') and (2) components are returned as JSX instead of being directly invoked.");R(D)}else if(1===e){let e=W.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");0===W.length&&(k=null),R(e)}else if(2===e)W.push(t),R(k);else if(3===e){let e=W.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");R(e)}else throw Error("React Compiler internal error: unreachable block"+e)}function E(e){for(let t=0;t<e.length;t++)e[t]=v}function N(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var M=new Map;function $(){for(let e of M.values())e.forEach(e=>{e.count=0})}function T(e){let t=p(null);null!=t.current&&(t.current.count+=1),S(()=>{if(null==t.current){let a,l={count:0};null==(a=M.get(e))&&(a=new Set,M.set(e,a)),a.add(l),t.current=l}return()=>{var a;let l;null!==t.current&&(a=t.current,null!=(l=M.get(e))&&l.delete(a))}})}var I=new Set;function O(e,t,a,l,n,r){function o(e,t,o,c){let i=`${l}:${r} [${n}] ${a}${o} changed from ${e} to ${t} at depth ${c}`;I.has(i)||(I.add(i),console.error(i))}!function e(t,a,l,n){if(!(n>2)){if(t!==a)if(typeof t!=typeof a)o(`type ${typeof t}`,`type ${typeof a}`,l,n);else if("object"==typeof t){let r=Array.isArray(t),c=Array.isArray(a);if(null===t&&null!==a)o("null",`type ${typeof a}`,l,n);else if(null===a)o(`type ${typeof t}`,"null",l,n);else if(t instanceof Map)if(a instanceof Map)if(t.size!==a.size)o(`Map instance with size ${t.size}`,`Map instance with size ${a.size}`,l,n);else for(let[r,c]of t)a.has(r)?e(c,a.get(r),`${l}.get(${r})`,n+1):o(`Map instance with key ${r}`,`Map instance without key ${r}`,l,n);else o("Map instance","other value",l,n);else if(a instanceof Map)o("other value","Map instance",l,n);else if(t instanceof Set)if(a instanceof Set)if(t.size!==a.size)o(`Set instance with size ${t.size}`,`Set instance with size ${a.size}`,l,n);else for(let e of a)t.has(e)||o(`Set instance without element ${e}`,`Set instance with element ${e}`,l,n);else o("Set instance","other value",l,n);else if(a instanceof Set)o("other value","Set instance",l,n);else if(r||c)if(r!==c)o(`type ${r?"array":"object"}`,`type ${c?"array":"object"}`,l,n);else if(t.length!==a.length)o(`array with length ${t.length}`,`array with length ${a.length}`,l,n);else for(let r=0;r<t.length;r++)e(t[r],a[r],`${l}[${r}]`,n+1);else if(g(t)||g(a))g(t)!==g(a)?o(`type ${g(t)?"React element":"object"}`,`type ${g(a)?"React element":"object"}`,l,n):t.type!==a.type?o(`React element of type ${t.type}`,`React element of type ${a.type}`,l,n):e(t.props,a.props,`[props of ${l}]`,n+1);else{for(let e in a)e in t||o(`object without key ${e}`,`object with key ${e}`,l,n);for(let r in t)r in a?e(t[r],a[r],`${l}.${r}`,n+1):o(`object with key ${r}`,`object without key ${r}`,l,n)}}else{if("function"==typeof t)return;isNaN(t)||isNaN(a)?isNaN(t)!==isNaN(a)&&o(`${isNaN(t)?"NaN":"non-NaN value"}`,`${isNaN(a)?"NaN":"non-NaN value"}`,l,n):t!==a&&o(t,a,l,n)}}}(e,t,"",0)}},p(e,t,a){let l=new WeakMap,n=new WeakMap;function r(e,t,a){let r=t,o=a;if("object"==typeof r&&null!==r&&"$$typeof"in r&&r.$$typeof===Symbol.for("react.context")&&"Provider"in r&&(r=r.Provider),"function"==typeof r&&null!=o.ref&&!r.prototype?.isReactComponent){let t=r,a=l.get(e);a||(a=new WeakMap,l.set(e,a));let n=a.get(t);n||((n=e.forwardRef((e,a)=>t({...e,ref:a}))).displayName=t.displayName??t.name,a.set(t,n)),r=n}if("string"==typeof r&&"boolean"==typeof o.inert&&((o={...o}).inert?o.inert="":delete o.inert),"string"==typeof r)for(let[e,t]of[["fill-rule","fillRule"],["clip-rule","clipRule"]])e in o&&(o={...o,[t]:o[e]},delete o[e]);return"string"==typeof r&&null!=o.ref&&(r=function(e,t){let a=n.get(e);a||(a=new Map,n.set(e,a));let l=a.get(t);if(l)return l;let r=e.forwardRef((a,l)=>{let n=e.useRef(null);if(!n.current||n.current.original!==l){let e;n.current={original:l,callback:t=>{if(null==t&&e){let t=e;e=void 0,t();return}if("function"==typeof l){let a=l(t);e="function"==typeof a?a:void 0}else l&&(l.current=t)}}}return e.createElement(t,{...a,ref:n.current.callback})});return r.displayName=`CanvasHost(${t})`,a.set(t,r),r}(e,r)),{type:r,props:o}}function o(e){let t=(t,a,l)=>{let n=r(e,t,a??{});return e.createElement(n.type,void 0===l?n.props:{...n.props,key:l})};return{jsx:t,jsxs:(t,a,l)=>{let n=r(e,t,a??{}),{children:o,...c}=n.props;return e.createElement(n.type,void 0===l?c:{...c,key:l},...Array.isArray(o)?o:[o])},jsxDEV:t,Fragment:e.Fragment}}function c(e){return{...e,createElement:(t,a,...l)=>{let n=r(e,t,a??{});return e.createElement(n.type,n.props,...l)},cloneElement:(t,a,...l)=>{let n=e.cloneElement(t,a??void 0,...l),o=n.ref,c=r(e,n.type,{...n.props,ref:o});return c.type===n.type&&"string"!=typeof n.type?n:e.createElement(c.type,{...c.props,key:n.key})}}}a.d(t,{MA:()=>o,YJ:()=>c})},C(e,t,a){a.r(t);let l=(0,a("p").YJ)(window.React),{Children:n,Component:r,Fragment:o,Profiler:c,PureComponent:i,StrictMode:s,Suspense:m,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:h,act:d,cloneElement:u,createContext:_,createElement:f,createFactory:y,createRef:b,forwardRef:p,isValidElement:S,lazy:g,memo:w,startTransition:v,unstable_act:C,useCallback:D,useContext:k,useDebugValue:R,useDeferredValue:W,useEffect:z,useId:E,useImperativeHandle:N,useInsertionEffect:M,useLayoutEffect:$,useMemo:T,useReducer:I,useRef:O,useState:A,useSyncExternalStore:P,useTransition:j,version:x,use:L}=l;a.d(t,{},{Children:n,Component:r,Fragment:o,Profiler:c,PureComponent:i,StrictMode:s,Suspense:m,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:h,act:d,cloneElement:u,createContext:_,createElement:f,createFactory:y,createRef:b,default:l,forwardRef:p,isValidElement:S,lazy:g,memo:w,startTransition:v,unstable_act:C,use:L,useCallback:D,useContext:k,useDebugValue:R,useDeferredValue:W,useEffect:z,useId:E,useImperativeHandle:N,useInsertionEffect:M,useLayoutEffect:$,useMemo:T,useReducer:I,useRef:O,useState:A,useSyncExternalStore:P,useTransition:j,version:x})}},t={};function a(l){var n=t[l];if(void 0!==n)return n.exports;var r=t[l]={exports:{}};return e[l](r,r.exports,a),r.exports}a.d=(e,t,l)=>{var n=(t,l)=>{for(var n in t)a.o(t,n)&&!a.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,[l]:t[n]})};n(t,"get"),n(l,"value")},a.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),a.r=e=>{"u">typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},(()=>{let{jsx:e,jsxs:t,jsxDEV:l,Fragment:n}=(0,a("p").MA)(window.React);var r=a("vD"),o=a("C");let c=window.WallarmDS.Icons.Brain,i=window.WallarmDS.Icons.Database,s=window.WallarmDS.Icons.Ellipsis,m=window.WallarmDS.Icons.History,h=window.WallarmDS.Icons.Plus,d=window.WallarmDS.Icons.Search,u=window.WallarmDS.Icons.ShieldBan,_=window.WallarmDS.Icons.ThumbsDown,f=window.WallarmDS.Icons.ThumbsUp,y=window.WallarmDS.Icons.X,b=window.WallarmDS.ApprovalCard,p=window.WallarmDS.ApprovalCardActions,S=window.WallarmDS.ApprovalCardContent,g=window.WallarmDS.AssistantMessage,w=window.WallarmDS.AssistantMessageContent,v=window.WallarmDS.Button,C=window.WallarmDS.ChainOfThought,D=window.WallarmDS.ChainOfThoughtStep,k=window.WallarmDS.ChatInput,R=window.WallarmDS.ChatInputSubmit,W=window.WallarmDS.ChatInputTextarea,z=window.WallarmDS.ChatPermissions,E=window.WallarmDS.ChatPermissionsContent,N=window.WallarmDS.ChatPermissionsItem,M=window.WallarmDS.ChatPermissionsTrigger,$=window.WallarmDS.InlineCodeSnippet,T=window.WallarmDS.Copyable,I=window.WallarmDS.CopyableIcon,O=window.WallarmDS.Drawer,A=window.WallarmDS.DrawerClose,P=window.WallarmDS.DrawerContent,j=window.WallarmDS.DrawerTrigger,x=window.WallarmDS.DropdownMenu,L=window.WallarmDS.DropdownMenuContent,H=window.WallarmDS.DropdownMenuItem,U=window.WallarmDS.DropdownMenuTrigger,B=window.WallarmDS.MessageAction,V=window.WallarmDS.MessageActions,q=window.WallarmDS.MessageTimestamp,F=window.WallarmDS.createListCollection,Q=window.WallarmDS.Select,Z=window.WallarmDS.SelectButton,G=window.WallarmDS.SelectContent,Y=window.WallarmDS.SelectOption,J=window.WallarmDS.SelectOptionIndicator,X=window.WallarmDS.SelectOptionText,K=window.WallarmDS.SelectPositioner,ee=window.WallarmDS.Separator,et=window.WallarmDS.HStack,ea=window.WallarmDS.UserMessage,el=window.WallarmDS.UserMessageBubble,en=window.WallarmDS.Chat,er=window.WallarmDS.ChatBody,eo=window.WallarmDS.ChatFooter,ec=window.WallarmDS.ChatGreeting,ei=window.WallarmDS.ChatHeader,es=window.WallarmDS.ChatHeaderActions,em=window.WallarmDS.ChatHeaderTitle,eh=window.WallarmDS.ChatSuggestion,ed=window.WallarmDS.ChatSuggestions,eu=window.WallarmDS.ChatTrigger,e_={title:"AI/Chat",component:en,subcomponents:{ChatHeader:ei,ChatHeaderTitle:em,ChatHeaderActions:es,ChatBody:er,ChatFooter:eo,ChatGreeting:ec,ChatSuggestions:ed,ChatSuggestion:eh,ChatTrigger:eu},parameters:{layout:"centered",docs:{description:{component:"The Wally assistant panel: a header, a scrolling message log, and a footer gutter for suggestions, a docked approval card and the input. `Chat` is layout only — it holds no messages or agent state; the app renders `UserMessage`, `AssistantMessage` and `ChatInput` into `ChatBody` and `ChatFooter` from its own data. Header actions are composed from plain ghost `Button`s and vertical `Separator`s, so each one keeps its own `aria-label` and analytics attributes. `background` picks the decorative mesh: `strong` for an empty chat, `subtle` (default) once a conversation is running, `none` to drop it. Host the panel in a right-hand `Drawer` about 480px wide; `ChatBody` exposes its scroll element through `ref` for stick-to-bottom."}}}},ef=["Why was this request blocked?","Show top attacked endpoints","Explain this rule"],ey=F({items:[{value:"blocked",label:"Blocked requests on /login"},{value:"rules",label:"Rule tuning for API v2"}]}),eb=["strong","subtle","none"],ep="Why were requests to /api/login blocked last night?",eS="Wallarm blocked 1,204 SQL injection attempts against /api/login, mostly from 203.0.113.0/24.",eg=["Deny 203.0.113.0/24","Show the matched rule"],ew=[{name:"search_attacks",description:"Search attacks and blocked requests"},{name:"get_api_inventory",description:"Read the discovered API endpoints"},{name:"propose_add_to_denylist",description:"Propose adding IPs to the denylist"}];function ev(a){return t(Y,{item:a,children:[e(X,{children:a.label}),e(J,{})]},a.value)}function eC(t,a){return e(eh,{"data-testid":`chat-footer-suggestions--suggestion-${a}`,children:t},t)}function eD(t,a){return e(eh,{"data-testid":`chat-greeting-suggestions--suggestion-${a}`,children:t},t)}function ek(a){return e("div",{className:"h-640 w-360",children:t(en,{"data-testid":`chat-${a}`,background:a,children:[t(ei,{children:[e(em,{}),t(es,{children:[e(v,{variant:"ghost",color:"neutral",size:"small","aria-label":"Chat history",children:e(m,{})}),t(x,{positioning:{placement:"bottom-end"},children:[e(U,{asChild:!0,children:e(v,{variant:"ghost",color:"neutral",size:"small","aria-label":"More actions",children:e(s,{})})}),t(L,{children:[e(H,{children:"Rename chat"}),e(H,{children:"Delete chat"})]})]}),e(ee,{orientation:"vertical"}),e(v,{variant:"ghost",color:"neutral",size:"small","aria-label":"Close chat",children:e(y,{})})]})]}),e(er,{})]})},a)}function eR(t,a){return e(eh,{"data-testid":`chat--suggestion-${a}`,"data-analytics-id":"AI_CHAT_SUGGESTION","data-analytics-props":JSON.stringify({index:a}),children:t},t)}function eW(t,a){return e(eh,{"data-testid":`chat--suggestion-${a}`,children:t},t)}function ez(t,a){return e(eh,{"data-testid":`chat--suggestion-${a}`,children:t},t)}let eE=[{name:"HeaderDefault",story:()=>{let a,l,n,o,c,i,h,d=(0,r.c)(7);return d[0]===Symbol.for("react.memo_cache_sentinel")?(a=e(em,{}),d[0]=a):a=d[0],d[1]===Symbol.for("react.memo_cache_sentinel")?(l=e(v,{variant:"ghost",color:"neutral",size:"small","aria-label":"Chat history",children:e(m,{})}),d[1]=l):l=d[1],d[2]===Symbol.for("react.memo_cache_sentinel")?(n={placement:"bottom-end"},d[2]=n):n=d[2],d[3]===Symbol.for("react.memo_cache_sentinel")?(o=e(U,{asChild:!0,children:e(v,{variant:"ghost",color:"neutral",size:"small","aria-label":"More actions",children:e(s,{})})}),d[3]=o):o=d[3],d[4]===Symbol.for("react.memo_cache_sentinel")?(c=t(x,{positioning:n,children:[o,t(L,{children:[e(H,{children:"Rename chat"}),e(H,{children:"Delete chat"})]})]}),i=e(ee,{orientation:"vertical"}),d[4]=c,d[5]=i):(c=d[4],i=d[5]),d[6]===Symbol.for("react.memo_cache_sentinel")?(h=e("div",{className:"h-200 w-480",children:t(en,{"data-testid":"chat",background:"none",children:[t(ei,{children:[a,t(es,{children:[l,c,i,e(v,{variant:"ghost",color:"neutral",size:"small","aria-label":"Close chat",children:e(y,{})})]})]}),e(er,{})]})}),d[6]=h):h=d[6],h},meta:e_},{name:"HeaderWithThreadSelect",story:()=>{let a,l,n,o,c,i,d,u,_,f,b,p=(0,r.c)(11);return p[0]===Symbol.for("react.memo_cache_sentinel")?(a=["blocked"],l=e(Z,{variant:"ghost",size:"small",placeholder:"New chat"}),p[0]=a,p[1]=l):(a=p[0],l=p[1]),p[2]===Symbol.for("react.memo_cache_sentinel")?(n=e(em,{children:t(Q,{collection:ey,defaultValue:a,children:[l,e(K,{children:e(G,{children:ey.items.map(ev)})})]})}),p[2]=n):n=p[2],p[3]===Symbol.for("react.memo_cache_sentinel")?(o=e(v,{variant:"ghost",color:"neutral",size:"small","aria-label":"New chat",children:e(h,{})}),c=e(ee,{orientation:"vertical"}),p[3]=o,p[4]=c):(o=p[3],c=p[4]),p[5]===Symbol.for("react.memo_cache_sentinel")?(i=e(v,{variant:"ghost",color:"neutral",size:"small","aria-label":"Chat history",children:e(m,{})}),p[5]=i):i=p[5],p[6]===Symbol.for("react.memo_cache_sentinel")?(d={placement:"bottom-end"},p[6]=d):d=p[6],p[7]===Symbol.for("react.memo_cache_sentinel")?(u=e(U,{asChild:!0,children:e(v,{variant:"ghost",color:"neutral",size:"small","aria-label":"More actions",children:e(s,{})})}),p[7]=u):u=p[7],p[8]===Symbol.for("react.memo_cache_sentinel")?(_=t(x,{positioning:d,children:[u,t(L,{children:[e(H,{children:"Rename chat"}),e(H,{children:"Delete chat"})]})]}),f=e(ee,{orientation:"vertical"}),p[8]=_,p[9]=f):(_=p[8],f=p[9]),p[10]===Symbol.for("react.memo_cache_sentinel")?(b=e("div",{className:"h-200 w-480",children:t(en,{"data-testid":"chat",background:"none",children:[t(ei,{children:[n,t(es,{children:[o,c,i,_,f,e(v,{variant:"ghost",color:"neutral",size:"small","aria-label":"Close chat",children:e(y,{})})]})]}),e(er,{})]})}),p[10]=b):b=p[10],b},meta:e_},{name:"Greeting",story:()=>{let a,l,n,c,i,h,d,u,_,f,b,p=(0,r.c)(13),[S,g]=(0,o.useState)();p[0]===Symbol.for("react.memo_cache_sentinel")?(a=e=>g(e.currentTarget.value),p[0]=a):a=p[0];let w=a;return p[1]===Symbol.for("react.memo_cache_sentinel")?(l=e(em,{}),p[1]=l):l=p[1],p[2]===Symbol.for("react.memo_cache_sentinel")?(n=e(v,{variant:"ghost",color:"neutral",size:"small","aria-label":"Chat history",children:e(m,{})}),p[2]=n):n=p[2],p[3]===Symbol.for("react.memo_cache_sentinel")?(c={placement:"bottom-end"},p[3]=c):c=p[3],p[4]===Symbol.for("react.memo_cache_sentinel")?(i=e(U,{asChild:!0,children:e(v,{variant:"ghost",color:"neutral",size:"small","aria-label":"More actions",children:e(s,{})})}),p[4]=i):i=p[4],p[5]===Symbol.for("react.memo_cache_sentinel")?(h=t(x,{positioning:c,children:[i,t(L,{children:[e(H,{children:"Rename chat"}),e(H,{children:"Delete chat"})]})]}),d=e(ee,{orientation:"vertical"}),p[5]=h,p[6]=d):(h=p[5],d=p[6]),p[7]===Symbol.for("react.memo_cache_sentinel")?(u=t(ei,{children:[l,t(es,{children:[n,h,d,e(v,{variant:"ghost",color:"neutral",size:"small","aria-label":"Close chat",children:e(y,{})})]})]}),p[7]=u):u=p[7],p[8]===Symbol.for("react.memo_cache_sentinel")?(_=e(ec,{title:"How can I help you today?",children:e(ed,{placement:"greeting",label:"Suggestions",children:ef.map((t,a)=>e(eh,{"data-testid":`chat--suggestion-${a}`,value:t,onClick:w,children:t},t))})}),p[8]=_):_=p[8],p[9]!==S?(f=S&&t("p",{"data-testid":"chat--picked",className:"sr-only",children:["Picked: ",S]}),p[9]=S,p[10]=f):f=p[10],p[11]!==f?(b=e("div",{className:"h-640 w-480",children:t(en,{"data-testid":"chat",background:"strong",children:[u,t(er,{children:[_,f]})]})}),p[11]=f,p[12]=b):b=p[12],b},meta:e_},{name:"Suggestions",story:()=>{let a,l,n,o,c,i,h,d,u,_,f,b,p,S,g,w,C,D=(0,r.c)(17);return D[0]===Symbol.for("react.memo_cache_sentinel")?(a=e(em,{}),D[0]=a):a=D[0],D[1]===Symbol.for("react.memo_cache_sentinel")?(l=e(v,{variant:"ghost",color:"neutral",size:"small","aria-label":"Chat history",children:e(m,{})}),D[1]=l):l=D[1],D[2]===Symbol.for("react.memo_cache_sentinel")?(n={placement:"bottom-end"},D[2]=n):n=D[2],D[3]===Symbol.for("react.memo_cache_sentinel")?(o=e(U,{asChild:!0,children:e(v,{variant:"ghost",color:"neutral",size:"small","aria-label":"More actions",children:e(s,{})})}),D[3]=o):o=D[3],D[4]===Symbol.for("react.memo_cache_sentinel")?(c=t(x,{positioning:n,children:[o,t(L,{children:[e(H,{children:"Rename chat"}),e(H,{children:"Delete chat"})]})]}),i=e(ee,{orientation:"vertical"}),D[4]=c,D[5]=i):(c=D[4],i=D[5]),D[6]===Symbol.for("react.memo_cache_sentinel")?(h=t(ei,{children:[a,t(es,{children:[l,c,i,e(v,{variant:"ghost",color:"neutral",size:"small","aria-label":"Close chat",children:e(y,{})})]})]}),d=e(er,{}),D[6]=h,D[7]=d):(h=D[6],d=D[7]),D[8]===Symbol.for("react.memo_cache_sentinel")?(u=e("div",{className:"h-640 w-480",children:t(en,{"data-testid":"chat-footer-suggestions",children:[h,d,e(eo,{children:e(ed,{label:"Suggestions",children:ef.map(eC)})})]})}),D[8]=u):u=D[8],D[9]===Symbol.for("react.memo_cache_sentinel")?(_=e(em,{}),D[9]=_):_=D[9],D[10]===Symbol.for("react.memo_cache_sentinel")?(f=e(v,{variant:"ghost",color:"neutral",size:"small","aria-label":"Chat history",children:e(m,{})}),D[10]=f):f=D[10],D[11]===Symbol.for("react.memo_cache_sentinel")?(b={placement:"bottom-end"},D[11]=b):b=D[11],D[12]===Symbol.for("react.memo_cache_sentinel")?(p=e(U,{asChild:!0,children:e(v,{variant:"ghost",color:"neutral",size:"small","aria-label":"More actions",children:e(s,{})})}),D[12]=p):p=D[12],D[13]===Symbol.for("react.memo_cache_sentinel")?(S=t(x,{positioning:b,children:[p,t(L,{children:[e(H,{children:"Rename chat"}),e(H,{children:"Delete chat"})]})]}),g=e(ee,{orientation:"vertical"}),D[13]=S,D[14]=g):(S=D[13],g=D[14]),D[15]===Symbol.for("react.memo_cache_sentinel")?(w=t(ei,{children:[_,t(es,{children:[f,S,g,e(v,{variant:"ghost",color:"neutral",size:"small","aria-label":"Close chat",children:e(y,{})})]})]}),D[15]=w):w=D[15],D[16]===Symbol.for("react.memo_cache_sentinel")?(C=t(et,{gap:24,align:"start",children:[u,e("div",{className:"h-640 w-480",children:t(en,{"data-testid":"chat-greeting-suggestions",background:"strong",children:[w,e(er,{children:e(ec,{title:"How can I help you today?",children:e(ed,{placement:"greeting",children:ef.map(eD)})})})]})})]}),D[16]=C):C=D[16],C},meta:e_},{name:"Backgrounds",story:()=>{let t,a=(0,r.c)(1);return a[0]===Symbol.for("react.memo_cache_sentinel")?(t=e(et,{gap:24,align:"start",children:eb.map(ek)}),a[0]=t):t=a[0],t},meta:e_},{name:"Analytics",story:()=>{let a,l,n,o,c=(0,r.c)(4);return c[0]===Symbol.for("react.memo_cache_sentinel")?(a=e(em,{}),c[0]=a):a=c[0],c[1]===Symbol.for("react.memo_cache_sentinel")?(l=t(ei,{children:[a,e(es,{children:e(v,{variant:"ghost",color:"neutral",size:"small","aria-label":"Close chat","data-analytics-id":"AI_CHAT_CLOSE",children:e(y,{})})})]}),n=e(er,{}),c[1]=l,c[2]=n):(l=c[1],n=c[2]),c[3]===Symbol.for("react.memo_cache_sentinel")?(o=e("div",{className:"h-640 w-480",children:t(en,{"data-testid":"chat",children:[l,n,e(eo,{children:e(ed,{label:"Suggestions",children:ef.map(eR)})})]})}),c[3]=o):o=c[3],o},meta:e_},{name:"Trigger",story:()=>{let t,a=(0,r.c)(1);return a[0]===Symbol.for("react.memo_cache_sentinel")?(t=e(eu,{"data-testid":"chat-trigger"}),a[0]=t):t=a[0],t},meta:e_},{name:"TriggerWithDrawer",story:()=>{let a,l,n,o,c,i,h,d,u=(0,r.c)(8);return u[0]===Symbol.for("react.memo_cache_sentinel")?(a=e(j,{asChild:!0,children:e(eu,{"data-testid":"chat-trigger","data-analytics-id":"AI_CHAT_OPEN"})}),u[0]=a):a=u[0],u[1]===Symbol.for("react.memo_cache_sentinel")?(l=e(em,{}),u[1]=l):l=u[1],u[2]===Symbol.for("react.memo_cache_sentinel")?(n=e(v,{variant:"ghost",color:"neutral",size:"small","aria-label":"Chat history",children:e(m,{})}),u[2]=n):n=u[2],u[3]===Symbol.for("react.memo_cache_sentinel")?(o={placement:"bottom-end"},u[3]=o):o=u[3],u[4]===Symbol.for("react.memo_cache_sentinel")?(c=e(U,{asChild:!0,children:e(v,{variant:"ghost",color:"neutral",size:"small","aria-label":"More actions",children:e(s,{})})}),u[4]=c):c=u[4],u[5]===Symbol.for("react.memo_cache_sentinel")?(i=t(x,{positioning:o,children:[c,t(L,{children:[e(H,{children:"Rename chat"}),e(H,{children:"Delete chat"})]})]}),h=e(ee,{orientation:"vertical"}),u[5]=i,u[6]=h):(i=u[5],h=u[6]),u[7]===Symbol.for("react.memo_cache_sentinel")?(d=t(O,{width:480,children:[a,e(P,{children:t(en,{"data-testid":"chat",children:[t(ei,{children:[l,t(es,{children:[n,i,h,e(v,{variant:"ghost",color:"neutral",size:"small","aria-label":"Close chat",children:e(y,{})})]})]}),e(er,{})]})})]}),u[7]=d):d=u[7],d},meta:e_},{name:"EmptyPanel",story:()=>{let a,l,n,c,i,h,d,u,_,f,b,p,S=(0,r.c)(13),[g,w]=(0,o.useState)("");S[0]===Symbol.for("react.memo_cache_sentinel")?(a=()=>w(""),S[0]=a):a=S[0];let C=a;return S[1]===Symbol.for("react.memo_cache_sentinel")?(l=e(em,{}),S[1]=l):l=S[1],S[2]===Symbol.for("react.memo_cache_sentinel")?(n=e(v,{variant:"ghost",color:"neutral",size:"small","aria-label":"Chat history",children:e(m,{})}),S[2]=n):n=S[2],S[3]===Symbol.for("react.memo_cache_sentinel")?(c={placement:"bottom-end"},S[3]=c):c=S[3],S[4]===Symbol.for("react.memo_cache_sentinel")?(i=e(U,{asChild:!0,children:e(v,{variant:"ghost",color:"neutral",size:"small","aria-label":"More actions",children:e(s,{})})}),S[4]=i):i=S[4],S[5]===Symbol.for("react.memo_cache_sentinel")?(h=t(x,{positioning:c,children:[i,t(L,{children:[e(H,{children:"Rename chat"}),e(H,{children:"Delete chat"})]})]}),d=e(ee,{orientation:"vertical"}),S[5]=h,S[6]=d):(h=S[5],d=S[6]),S[7]===Symbol.for("react.memo_cache_sentinel")?(u=t(ei,{children:[l,t(es,{children:[n,h,d,e(v,{variant:"ghost",color:"neutral",size:"small","aria-label":"Close chat",children:e(y,{})})]})]}),S[7]=u):u=S[7],S[8]===Symbol.for("react.memo_cache_sentinel")?(_=e(er,{children:e(ec,{title:"How can I help you today?",children:e(ed,{placement:"greeting",label:"Suggestions",children:ef.map(eW)})})}),S[8]=_):_=S[8],S[9]===Symbol.for("react.memo_cache_sentinel")?(b=e(W,{}),f=e(R,{}),S[9]=f,S[10]=b):(f=S[9],b=S[10]),S[11]!==g?(p=e("div",{className:"h-640 w-480",children:t(en,{"data-testid":"chat",background:"strong",children:[u,_,e(eo,{children:t(k,{value:g,onValueChange:w,onSubmit:C,children:[b,f]})})]})}),S[11]=g,S[12]=p):p=S[12],p},meta:e_},{name:"Conversation",story:()=>{let a,l,n,h,u,b,p,S,z,E,N,M,O,A,P,j,F,Q,Z,G,Y,J,X,K,et,ec=(0,r.c)(26),[eh,eu]=(0,o.useState)("");ec[0]===Symbol.for("react.memo_cache_sentinel")?(a=()=>eu(""),ec[0]=a):a=ec[0];let e_=a;return ec[1]===Symbol.for("react.memo_cache_sentinel")?(l=e(em,{}),ec[1]=l):l=ec[1],ec[2]===Symbol.for("react.memo_cache_sentinel")?(n=e(v,{variant:"ghost",color:"neutral",size:"small","aria-label":"Chat history",children:e(m,{})}),ec[2]=n):n=ec[2],ec[3]===Symbol.for("react.memo_cache_sentinel")?(h={placement:"bottom-end"},ec[3]=h):h=ec[3],ec[4]===Symbol.for("react.memo_cache_sentinel")?(u=e(U,{asChild:!0,children:e(v,{variant:"ghost",color:"neutral",size:"small","aria-label":"More actions",children:e(s,{})})}),ec[4]=u):u=ec[4],ec[5]===Symbol.for("react.memo_cache_sentinel")?(b=t(x,{positioning:h,children:[u,t(L,{children:[e(H,{children:"Rename chat"}),e(H,{children:"Delete chat"})]})]}),p=e(ee,{orientation:"vertical"}),ec[5]=b,ec[6]=p):(b=ec[5],p=ec[6]),ec[7]===Symbol.for("react.memo_cache_sentinel")?(S=t(ei,{children:[l,t(es,{children:[n,b,p,e(v,{variant:"ghost",color:"neutral",size:"small","aria-label":"Close chat",children:e(y,{})})]})]}),ec[7]=S):S=ec[7],ec[8]===Symbol.for("react.memo_cache_sentinel")?(z=e(el,{children:ep}),ec[8]=z):z=ec[8],ec[9]===Symbol.for("react.memo_cache_sentinel")?(E=e(q,{dateTime:"2026-10-21T09:41:00Z",children:"2m ago"}),ec[9]=E):E=ec[9],ec[10]===Symbol.for("react.memo_cache_sentinel")?(N=t(ea,{"data-testid":"chat--user-message-0",children:[z,t(V,{children:[E,e(T,{text:ep,children:e(B,{"aria-label":"Copy",children:e(I,{})})})]})]}),ec[10]=N):N=ec[10],ec[11]===Symbol.for("react.memo_cache_sentinel")?(M=e(c,{}),ec[11]=M):M=ec[11],ec[12]===Symbol.for("react.memo_cache_sentinel")?(O=e(D,{icon:M,label:"Thought for 5s",children:e("p",{children:"Look up blocked requests to /api/login for last night, then group them by source."})}),ec[12]=O):O=ec[12],ec[13]===Symbol.for("react.memo_cache_sentinel")?(A=e(D,{icon:e(d,{}),label:"Searched for blocked requests"}),ec[13]=A):A=ec[13],ec[14]===Symbol.for("react.memo_cache_sentinel")?(P=t(C,{children:[O,A,e(D,{icon:e(i,{}),label:"Queried attack events",metric:"1,204"})]}),ec[14]=P):P=ec[14],ec[15]===Symbol.for("react.memo_cache_sentinel")?(j=e("h3",{children:"SQL injection on the login endpoint"}),ec[15]=j):j=ec[15],ec[16]===Symbol.for("react.memo_cache_sentinel")?(F=t("p",{children:["Wallarm blocked 1,204 SQL injection attempts, almost all against"," ",e($,{code:"/api/login",size:"sm"}),"."]}),ec[16]=F):F=ec[16],ec[17]===Symbol.for("react.memo_cache_sentinel")?(Q=t(w,{children:[j,F,t("ul",{children:[t("li",{children:["Most came from ",e($,{code:"203.0.113.0/24",size:"sm"}),"."]}),e("li",{children:"The peak was at 03:00 UTC."}),e("li",{children:"No request reached the application."})]})]}),ec[17]=Q):Q=ec[17],ec[18]===Symbol.for("react.memo_cache_sentinel")?(Z=e(T,{text:eS,children:e(B,{"aria-label":"Copy","data-testid":"chat--answer-copy",children:e(I,{})})}),ec[18]=Z):Z=ec[18],ec[19]===Symbol.for("react.memo_cache_sentinel")?(G=e(B,{"aria-label":"Good response",children:e(f,{})}),ec[19]=G):G=ec[19],ec[20]===Symbol.for("react.memo_cache_sentinel")?(Y=t(er,{children:[N,t(g,{"data-testid":"chat--assistant-message-0",children:[P,Q,t(V,{visible:!0,children:[Z,G,e(B,{"aria-label":"Bad response",children:e(_,{})}),e(q,{dateTime:"2026-10-21T09:42:00Z",children:"1m ago"})]})]})]}),ec[20]=Y):Y=ec[20],ec[21]===Symbol.for("react.memo_cache_sentinel")?(J=e(ed,{label:"Suggestions",children:eg.map(ez)}),ec[21]=J):J=ec[21],ec[22]===Symbol.for("react.memo_cache_sentinel")?(X=e(W,{}),K=e(R,{}),ec[22]=X,ec[23]=K):(X=ec[22],K=ec[23]),ec[24]!==eh?(et=e("div",{className:"h-640 w-480",children:t(en,{"data-testid":"chat",children:[S,Y,t(eo,{children:[J,t(k,{value:eh,onValueChange:eu,onSubmit:e_,children:[X,K]})]})]})}),ec[24]=eh,ec[25]=et):et=ec[25],et},meta:e_},{name:"Streaming",story:()=>{let a,l,n,c,h,u,_,f,b,p,S,z,E,N,M,$,O,A,P,j,F,Q,Z=(0,r.c)(32),[G,Y]=(0,o.useState)(""),[J,X]=(0,o.useState)(!0);Z[0]===Symbol.for("react.memo_cache_sentinel")?(a=()=>Y(""),Z[0]=a):a=Z[0];let K=a;Z[1]===Symbol.for("react.memo_cache_sentinel")?(l=()=>X(!1),Z[1]=l):l=Z[1];let et=l;Z[2]===Symbol.for("react.memo_cache_sentinel")?(n=e(em,{}),Z[2]=n):n=Z[2],Z[3]===Symbol.for("react.memo_cache_sentinel")?(c=e(v,{variant:"ghost",color:"neutral",size:"small","aria-label":"Chat history",children:e(m,{})}),Z[3]=c):c=Z[3],Z[4]===Symbol.for("react.memo_cache_sentinel")?(h={placement:"bottom-end"},Z[4]=h):h=Z[4],Z[5]===Symbol.for("react.memo_cache_sentinel")?(u=e(U,{asChild:!0,children:e(v,{variant:"ghost",color:"neutral",size:"small","aria-label":"More actions",children:e(s,{})})}),Z[5]=u):u=Z[5],Z[6]===Symbol.for("react.memo_cache_sentinel")?(_=t(x,{positioning:h,children:[u,t(L,{children:[e(H,{children:"Rename chat"}),e(H,{children:"Delete chat"})]})]}),f=e(ee,{orientation:"vertical"}),Z[6]=_,Z[7]=f):(_=Z[6],f=Z[7]),Z[8]===Symbol.for("react.memo_cache_sentinel")?(b=t(ei,{children:[n,t(es,{children:[c,_,f,e(v,{variant:"ghost",color:"neutral",size:"small","aria-label":"Close chat",children:e(y,{})})]})]}),Z[8]=b):b=Z[8],Z[9]===Symbol.for("react.memo_cache_sentinel")?(p=e(el,{children:ep}),Z[9]=p):p=Z[9],Z[10]===Symbol.for("react.memo_cache_sentinel")?(S=e(q,{dateTime:"2026-10-21T09:41:00Z",children:"2m ago"}),Z[10]=S):S=Z[10],Z[11]===Symbol.for("react.memo_cache_sentinel")?(z=t(ea,{"data-testid":"chat--user-message-0",children:[p,t(V,{children:[S,e(T,{text:ep,children:e(B,{"aria-label":"Copy",children:e(I,{})})})]})]}),Z[11]=z):z=Z[11],Z[12]===Symbol.for("react.memo_cache_sentinel")?(E=e(D,{icon:e(d,{}),label:"Searched for blocked requests"}),Z[12]=E):E=Z[12],Z[13]===Symbol.for("react.memo_cache_sentinel")?(N=e(i,{}),Z[13]=N):N=Z[13];let ec=J?"Querying attack events...":"Stopped",eh=J?"running":"done";return Z[14]!==ec||Z[15]!==eh?(M=t(C,{children:[E,e(D,{icon:N,label:ec,status:eh})]}),Z[14]=ec,Z[15]=eh,Z[16]=M):M=Z[16],Z[17]===Symbol.for("react.memo_cache_sentinel")?($=e(w,{children:e("p",{children:"Wallarm blocked 1,204 SQL injection attempts, almost all against"})}),Z[17]=$):$=Z[17],Z[18]!==J||Z[19]!==M?(O=t(g,{"data-testid":"chat--assistant-message-0","aria-busy":J,children:[M,$]}),Z[18]=J,Z[19]=M,Z[20]=O):O=Z[20],Z[21]!==J||Z[22]!==O?(A=t(er,{"aria-busy":J,children:[z,O]}),Z[21]=J,Z[22]=O,Z[23]=A):A=Z[23],Z[24]===Symbol.for("react.memo_cache_sentinel")?(P=e(W,{}),j=e(R,{}),Z[24]=P,Z[25]=j):(P=Z[24],j=Z[25]),Z[26]!==J||Z[27]!==G?(F=e(eo,{children:t(k,{value:G,onValueChange:Y,onSubmit:K,isRunning:J,onStop:et,children:[P,j]})}),Z[26]=J,Z[27]=G,Z[28]=F):F=Z[28],Z[29]!==A||Z[30]!==F?(Q=e("div",{className:"h-640 w-480",children:t(en,{"data-testid":"chat",children:[b,A,F]})}),Z[29]=A,Z[30]=F,Z[31]=Q):Q=Z[31],Q},meta:e_},{name:"ApprovalDocked",story:()=>{let a,l,n,c,i,h,_,f,z,E,N,M,O,A,P,j,F,Q,Z,G,Y,J,X,K,et,ec,eh,ed=(0,r.c)(41),[eu,e_]=(0,o.useState)(""),[ef,ey]=(0,o.useState)("pending"),eb="pending"===ef;ed[0]===Symbol.for("react.memo_cache_sentinel")?(a=()=>e_(""),ed[0]=a):a=ed[0];let eS=a;ed[1]===Symbol.for("react.memo_cache_sentinel")?(l=()=>ey("approved"),ed[1]=l):l=ed[1];let eg=l;ed[2]===Symbol.for("react.memo_cache_sentinel")?(n=()=>ey("rejected"),ed[2]=n):n=ed[2];let ew=n;ed[3]===Symbol.for("react.memo_cache_sentinel")?(c=e(em,{}),ed[3]=c):c=ed[3],ed[4]===Symbol.for("react.memo_cache_sentinel")?(i=e(v,{variant:"ghost",color:"neutral",size:"small","aria-label":"Chat history",children:e(m,{})}),ed[4]=i):i=ed[4],ed[5]===Symbol.for("react.memo_cache_sentinel")?(h={placement:"bottom-end"},ed[5]=h):h=ed[5],ed[6]===Symbol.for("react.memo_cache_sentinel")?(_=e(U,{asChild:!0,children:e(v,{variant:"ghost",color:"neutral",size:"small","aria-label":"More actions",children:e(s,{})})}),ed[6]=_):_=ed[6],ed[7]===Symbol.for("react.memo_cache_sentinel")?(f=t(x,{positioning:h,children:[_,t(L,{children:[e(H,{children:"Rename chat"}),e(H,{children:"Delete chat"})]})]}),z=e(ee,{orientation:"vertical"}),ed[7]=f,ed[8]=z):(f=ed[7],z=ed[8]),ed[9]===Symbol.for("react.memo_cache_sentinel")?(E=t(ei,{children:[c,t(es,{children:[i,f,z,e(v,{variant:"ghost",color:"neutral",size:"small","aria-label":"Close chat",children:e(y,{})})]})]}),ed[9]=E):E=ed[9],ed[10]===Symbol.for("react.memo_cache_sentinel")?(N=e(el,{children:ep}),ed[10]=N):N=ed[10],ed[11]===Symbol.for("react.memo_cache_sentinel")?(M=e(q,{dateTime:"2026-10-21T09:41:00Z",children:"2m ago"}),ed[11]=M):M=ed[11],ed[12]===Symbol.for("react.memo_cache_sentinel")?(O=t(ea,{"data-testid":"chat--user-message-0",children:[N,t(V,{children:[M,e(T,{text:ep,children:e(B,{"aria-label":"Copy",children:e(I,{})})})]})]}),ed[12]=O):O=ed[12],ed[13]===Symbol.for("react.memo_cache_sentinel")?(A=e(D,{icon:e(d,{}),label:"Searched for blocked requests"}),ed[13]=A):A=ed[13],ed[14]===Symbol.for("react.memo_cache_sentinel")?(P=e(u,{}),ed[14]=P):P=ed[14];let ev=eb?"running":"done";return ed[15]!==ev?(j=t(C,{children:[A,e(D,{icon:P,label:"Proposed a denylist entry",status:ev})]}),ed[15]=ev,ed[16]=j):j=ed[16],ed[17]!==eb||ed[18]!==ef?(F=!eb&&e(w,{children:e("p",{children:"approved"===ef?"Done. 203.0.113.0/24 is now denied on all applications.":"Okay, I left the denylist unchanged."})}),ed[17]=eb,ed[18]=ef,ed[19]=F):F=ed[19],ed[20]!==j||ed[21]!==F?(Q=t(g,{"data-testid":"chat--assistant-message-0",children:[j,F]}),ed[20]=j,ed[21]=F,ed[22]=Q):Q=ed[22],ed[23]!==eb||ed[24]!==Q?(Z=t(er,{"aria-busy":eb,children:[O,Q]}),ed[23]=eb,ed[24]=Q,ed[25]=Z):Z=ed[25],ed[26]===Symbol.for("react.memo_cache_sentinel")?(G=e(S,{children:t("p",{children:["Add ",e($,{code:"203.0.113.0/24",size:"sm"})," to the denylist on all applications"]})}),ed[26]=G):G=ed[26],ed[27]===Symbol.for("react.memo_cache_sentinel")?(Y=t(p,{children:[e(v,{"data-testid":"chat--approve",onClick:eg,children:"Allow"}),e(v,{variant:"secondary",color:"neutral","data-testid":"chat--reject",onClick:ew,children:"Reject"})]}),ed[27]=Y):Y=ed[27],ed[28]!==ef?(J=t(b,{status:ef,children:[G,Y]}),ed[28]=ef,ed[29]=J):J=ed[29],ed[30]===Symbol.for("react.memo_cache_sentinel")?(X=e(W,{}),K=e(R,{}),ed[30]=X,ed[31]=K):(X=ed[30],K=ed[31]),ed[32]!==eb||ed[33]!==eu?(et=t(k,{value:eu,onValueChange:e_,onSubmit:eS,isRunning:eb,children:[X,K]}),ed[32]=eb,ed[33]=eu,ed[34]=et):et=ed[34],ed[35]!==J||ed[36]!==et?(ec=t(eo,{children:[J,et]}),ed[35]=J,ed[36]=et,ed[37]=ec):ec=ed[37],ed[38]!==Z||ed[39]!==ec?(eh=e("div",{className:"h-640 w-480",children:t(en,{"data-testid":"chat",children:[E,Z,ec]})}),ed[38]=Z,ed[39]=ec,ed[40]=eh):eh=ed[40],eh},meta:e_},{name:"ApprovalResolved",story:()=>{let a,l,n,c,i,h,_,f,p,S,z,E,N,M,$,O,A,P,j=(0,r.c)(19),[F,Q]=(0,o.useState)("");j[0]===Symbol.for("react.memo_cache_sentinel")?(a=()=>Q(""),j[0]=a):a=j[0];let Z=a;return j[1]===Symbol.for("react.memo_cache_sentinel")?(l=e(em,{}),j[1]=l):l=j[1],j[2]===Symbol.for("react.memo_cache_sentinel")?(n=e(v,{variant:"ghost",color:"neutral",size:"small","aria-label":"Chat history",children:e(m,{})}),j[2]=n):n=j[2],j[3]===Symbol.for("react.memo_cache_sentinel")?(c={placement:"bottom-end"},j[3]=c):c=j[3],j[4]===Symbol.for("react.memo_cache_sentinel")?(i=e(U,{asChild:!0,children:e(v,{variant:"ghost",color:"neutral",size:"small","aria-label":"More actions",children:e(s,{})})}),j[4]=i):i=j[4],j[5]===Symbol.for("react.memo_cache_sentinel")?(h=t(x,{positioning:c,children:[i,t(L,{children:[e(H,{children:"Rename chat"}),e(H,{children:"Delete chat"})]})]}),_=e(ee,{orientation:"vertical"}),j[5]=h,j[6]=_):(h=j[5],_=j[6]),j[7]===Symbol.for("react.memo_cache_sentinel")?(f=t(ei,{children:[l,t(es,{children:[n,h,_,e(v,{variant:"ghost",color:"neutral",size:"small","aria-label":"Close chat",children:e(y,{})})]})]}),j[7]=f):f=j[7],j[8]===Symbol.for("react.memo_cache_sentinel")?(p=e(el,{children:ep}),j[8]=p):p=j[8],j[9]===Symbol.for("react.memo_cache_sentinel")?(S=e(q,{dateTime:"2026-10-21T09:41:00Z",children:"2m ago"}),j[9]=S):S=j[9],j[10]===Symbol.for("react.memo_cache_sentinel")?(z=t(ea,{"data-testid":"chat--user-message-0",children:[p,t(V,{children:[S,e(T,{text:ep,children:e(B,{"aria-label":"Copy",children:e(I,{})})})]})]}),j[10]=z):z=j[10],j[11]===Symbol.for("react.memo_cache_sentinel")?(E=e(D,{icon:e(d,{}),label:"Searched for blocked requests"}),j[11]=E):E=j[11],j[12]===Symbol.for("react.memo_cache_sentinel")?(N=t(C,{children:[E,e(D,{icon:e(u,{}),label:"Proposed a denylist entry"})]}),j[12]=N):N=j[12],j[13]===Symbol.for("react.memo_cache_sentinel")?(M=t(er,{children:[z,t(g,{"data-testid":"chat--assistant-message-0",children:[N,e(w,{children:e("p",{children:"Done. 203.0.113.0/24 is now denied on all applications."})})]})]}),j[13]=M):M=j[13],j[14]===Symbol.for("react.memo_cache_sentinel")?($=e(b,{status:"approved"}),j[14]=$):$=j[14],j[15]===Symbol.for("react.memo_cache_sentinel")?(O=e(W,{}),A=e(R,{}),j[15]=O,j[16]=A):(O=j[15],A=j[16]),j[17]!==F?(P=e("div",{className:"h-640 w-480",children:t(en,{"data-testid":"chat",children:[f,M,t(eo,{children:[$,t(k,{value:F,onValueChange:Q,onSubmit:Z,children:[O,A]})]})]})}),j[17]=F,j[18]=P):P=j[18],P},meta:e_},{name:"Permissions",story:()=>{let a,l,n,c,i,h,d,u,_,f,b,p,S,g,w,C,D,$=(0,r.c)(21),[T,I]=(0,o.useState)("");$[0]===Symbol.for("react.memo_cache_sentinel")?(a={search_attacks:!0,get_api_inventory:!0,propose_add_to_denylist:!1},$[0]=a):a=$[0];let[O,A]=(0,o.useState)(a);$[1]===Symbol.for("react.memo_cache_sentinel")?(l=()=>I(""),$[1]=l):l=$[1];let P=l;$[2]===Symbol.for("react.memo_cache_sentinel")?(n=e=>{let{checked:t,name:a}=e;return A(e=>({...e,[a]:t}))},$[2]=n):n=$[2];let j=n;return $[3]===Symbol.for("react.memo_cache_sentinel")?(c=e(em,{}),$[3]=c):c=$[3],$[4]===Symbol.for("react.memo_cache_sentinel")?(i=e(v,{variant:"ghost",color:"neutral",size:"small","aria-label":"Chat history",children:e(m,{})}),$[4]=i):i=$[4],$[5]===Symbol.for("react.memo_cache_sentinel")?(h={placement:"bottom-end"},$[5]=h):h=$[5],$[6]===Symbol.for("react.memo_cache_sentinel")?(d=e(U,{asChild:!0,children:e(v,{variant:"ghost",color:"neutral",size:"small","aria-label":"More actions",children:e(s,{})})}),$[6]=d):d=$[6],$[7]===Symbol.for("react.memo_cache_sentinel")?(u=t(x,{positioning:h,children:[d,t(L,{children:[e(H,{children:"Rename chat"}),e(H,{children:"Delete chat"})]})]}),_=e(ee,{orientation:"vertical"}),$[7]=u,$[8]=_):(u=$[7],_=$[8]),$[9]===Symbol.for("react.memo_cache_sentinel")?(f=t(ei,{children:[c,t(es,{children:[i,u,_,e(v,{variant:"ghost",color:"neutral",size:"small","aria-label":"Close chat",children:e(y,{})})]})]}),$[9]=f):f=$[9],$[10]===Symbol.for("react.memo_cache_sentinel")?(b=e(er,{children:e(ec,{title:"How can I help you today?"})}),$[10]=b):b=$[10],$[11]===Symbol.for("react.memo_cache_sentinel")?(p=e(W,{}),$[11]=p):p=$[11],$[12]===Symbol.for("react.memo_cache_sentinel")?(S=e(M,{}),$[12]=S):S=$[12],$[13]!==O?(g=ew.map(t=>e(N,{name:t.name,"data-testid":`chat--permission-${t.name}`,title:t.name,description:t.description,checked:O[t.name],onCheckedChange:j},t.name)),$[13]=O,$[14]=g):g=$[14],$[15]!==g?(w=t(z,{children:[S,e(E,{children:g})]}),$[15]=g,$[16]=w):w=$[16],$[17]===Symbol.for("react.memo_cache_sentinel")?(C=e(R,{}),$[17]=C):C=$[17],$[18]!==w||$[19]!==T?(D=e("div",{className:"h-640 w-480",children:t(en,{"data-testid":"chat",background:"strong",children:[f,b,e(eo,{children:t(k,{value:T,onValueChange:I,onSubmit:P,children:[p,w,C]})})]})}),$[18]=w,$[19]=T,$[20]=D):D=$[20],D},meta:e_},{name:"InDrawer",story:()=>{let a,l,n,h,u,b,p,S,z,E,N,M,F,Q,Z,G,Y,J,X,K,et,ec,eh,ed,e_,ef,ey,eb=(0,r.c)(36),[eg,ew]=(0,o.useState)(""),[ev,eC]=(0,o.useState)(!0);eb[0]===Symbol.for("react.memo_cache_sentinel")?(a=()=>ew(""),eb[0]=a):a=eb[0];let eD=a;eb[1]===Symbol.for("react.memo_cache_sentinel")?(l=()=>eC(!1),eb[1]=l):l=eb[1];let ek=l;return eb[2]===Symbol.for("react.memo_cache_sentinel")?(n=e(j,{asChild:!0,children:e(eu,{"data-testid":"chat-trigger"})}),eb[2]=n):n=eb[2],eb[3]===Symbol.for("react.memo_cache_sentinel")?(h=e(em,{}),eb[3]=h):h=eb[3],eb[4]===Symbol.for("react.memo_cache_sentinel")?(u=e(v,{variant:"ghost",color:"neutral",size:"small","aria-label":"Chat history",children:e(m,{})}),eb[4]=u):u=eb[4],eb[5]===Symbol.for("react.memo_cache_sentinel")?(b={placement:"bottom-end"},eb[5]=b):b=eb[5],eb[6]===Symbol.for("react.memo_cache_sentinel")?(p=e(U,{asChild:!0,children:e(v,{variant:"ghost",color:"neutral",size:"small","aria-label":"More actions",children:e(s,{})})}),eb[6]=p):p=eb[6],eb[7]===Symbol.for("react.memo_cache_sentinel")?(S=t(x,{positioning:b,children:[p,t(L,{children:[e(H,{children:"Rename chat"}),e(H,{children:"Delete chat"})]})]}),z=e(ee,{orientation:"vertical"}),eb[7]=S,eb[8]=z):(S=eb[7],z=eb[8]),eb[9]===Symbol.for("react.memo_cache_sentinel")?(E=t(ei,{children:[h,t(es,{children:[u,S,z,e(A,{asChild:!0,children:e(v,{variant:"ghost",color:"neutral",size:"small","aria-label":"Close chat",children:e(y,{})})})]})]}),eb[9]=E):E=eb[9],eb[10]===Symbol.for("react.memo_cache_sentinel")?(N=e(el,{children:ep}),eb[10]=N):N=eb[10],eb[11]===Symbol.for("react.memo_cache_sentinel")?(M=e(q,{dateTime:"2026-10-21T09:41:00Z",children:"2m ago"}),eb[11]=M):M=eb[11],eb[12]===Symbol.for("react.memo_cache_sentinel")?(F=t(ea,{"data-testid":"chat--user-message-0",children:[N,t(V,{children:[M,e(T,{text:ep,children:e(B,{"aria-label":"Copy",children:e(I,{})})})]})]}),eb[12]=F):F=eb[12],eb[13]===Symbol.for("react.memo_cache_sentinel")?(Q=e(c,{}),eb[13]=Q):Q=eb[13],eb[14]===Symbol.for("react.memo_cache_sentinel")?(Z=e(D,{icon:Q,label:"Thought for 5s",children:e("p",{children:"Look up blocked requests to /api/login for last night, then group them by source."})}),eb[14]=Z):Z=eb[14],eb[15]===Symbol.for("react.memo_cache_sentinel")?(G=e(D,{icon:e(d,{}),label:"Searched for blocked requests"}),eb[15]=G):G=eb[15],eb[16]===Symbol.for("react.memo_cache_sentinel")?(Y=t(C,{children:[Z,G,e(D,{icon:e(i,{}),label:"Queried attack events",metric:"1,204"})]}),eb[16]=Y):Y=eb[16],eb[17]===Symbol.for("react.memo_cache_sentinel")?(J=e("h3",{children:"SQL injection on the login endpoint"}),eb[17]=J):J=eb[17],eb[18]===Symbol.for("react.memo_cache_sentinel")?(X=t("p",{children:["Wallarm blocked 1,204 SQL injection attempts, almost all against"," ",e($,{code:"/api/login",size:"sm"}),"."]}),eb[18]=X):X=eb[18],eb[19]===Symbol.for("react.memo_cache_sentinel")?(K=t(w,{children:[J,X,t("ul",{children:[t("li",{children:["Most came from ",e($,{code:"203.0.113.0/24",size:"sm"}),"."]}),e("li",{children:"The peak was at 03:00 UTC."}),e("li",{children:"No request reached the application."})]})]}),eb[19]=K):K=eb[19],eb[20]!==ev?(et=!ev&&t(V,{visible:!0,children:[e(T,{text:eS,children:e(B,{"aria-label":"Copy","data-testid":"chat--answer-copy",children:e(I,{})})}),e(B,{"aria-label":"Good response",children:e(f,{})}),e(B,{"aria-label":"Bad response",children:e(_,{})}),e(q,{dateTime:"2026-10-21T09:42:00Z",children:"1m ago"})]}),eb[20]=ev,eb[21]=et):et=eb[21],eb[22]!==ev||eb[23]!==et?(ec=t(g,{"data-testid":"chat--assistant-message-0","aria-busy":ev,children:[Y,K,et]}),eb[22]=ev,eb[23]=et,eb[24]=ec):ec=eb[24],eb[25]!==ev||eb[26]!==ec?(eh=t(er,{"aria-busy":ev,children:[F,ec]}),eb[25]=ev,eb[26]=ec,eb[27]=eh):eh=eb[27],eb[28]===Symbol.for("react.memo_cache_sentinel")?(ed=e(W,{}),e_=e(R,{}),eb[28]=ed,eb[29]=e_):(ed=eb[28],e_=eb[29]),eb[30]!==ev||eb[31]!==eg?(ef=e(eo,{children:t(k,{value:eg,onValueChange:ew,onSubmit:eD,isRunning:ev,onStop:ek,children:[ed,e_]})}),eb[30]=ev,eb[31]=eg,eb[32]=ef):ef=eb[32],eb[33]!==eh||eb[34]!==ef?(ey=t(O,{width:480,children:[n,e(P,{children:t(en,{"data-testid":"chat",children:[E,eh,ef]})})]}),eb[33]=eh,eb[34]=ef,eb[35]=ey):ey=eb[35],ey},meta:e_}];function eN({entry:e}){let{story:t,meta:a}=e,l={...a.args,...t.args},n="function"==typeof t||t.$$typeof?t:t.render||a.render||a.component,r=()=>o.default.createElement(n,l),c={args:l,globals:{theme:"light"},parameters:{...a.parameters,...t.parameters},viewMode:"story"};for(let e of[...a.decorators||[],...t.decorators||[]].reverse()){let t=r;r=()=>e(t,c)}return o.default.createElement("section",{"data-preview-story":e.name,className:"p-16"},o.default.createElement("h2",{className:"text-sm mb-12"},e.name),o.default.createElement(r))}window.WallarmPreview={mount(e){let t=window.ReactDOM.createRoot(e);return t.render(o.default.createElement(window.WallarmDS.Root,null,eE.map((e,t)=>o.default.createElement(eN,{key:t,entry:e})))),t}}})();

package/dist/project/components/ChatInput/README.md

@@ -0,0 +1,378 @@
+The composer at the bottom of the Wally chat: a growing textarea where Enter sends and Shift+Enter adds a line, with the send button turning into Stop while a reply streams. It is controlled — the app owns the draft and the running state — and any actions such as `ChatPermissions` go between the textarea and `ChatInputSubmit`.
+
+## Props as canvas attributes
+
+Use kebab-case attribute names. Pass non-string values through renderVals holes, including booleans. The full emitted API is in `components/index.d.ts`.
+
+| Attribute | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `value` | `string` | yes | — | Controlled only — the app owns the draft. |
+| `on-value-change` | `(value: string) => void` | yes | — |  |
+| `on-submit` | `(value: string) => void` | yes | — | Receives `value.trim()`. Not called when the value is empty, while `isRunning`, or when `disabled`. The form's native submit is prevented and focus returns to the textarea. |
+| `on-stop` | `(() => void) \| undefined` | no | — | Stop-button click, and Esc in the textarea while `isRunning`. Inside a Drawer/Dialog that Esc stops the run and doesn't close the layer; no host `onEscapeKeyDown` is needed. While running, a consumer `onKeyDown` can't cancel the Esc stop with `preventDefault` (the textarea has already claimed the key from the layer). Without `onStop`, Esc is left to the layer. A consumer popup anchored to the textarea (mention/autocomplete) keeps Esc while the textarea has `aria-expanded='true'`. |
+| `is-running` | `boolean \| undefined` | no | `false` | Swaps Send for Stop and blocks submit. CopilotKit: `agent.isRunning`. |
+| `disabled` | `boolean` | no | `false` |  |
+| `context` | `ReactNode` | no | — | Attached-context chips, shown in a bar behind the box. Nothing to render (`null`, `false`, `[]`) hides the bar. |
+| `disclaimer` | `ReactNode` | no | `Wally can make mistakes; always verify.` | Line under the box. `null`/`false` hides it. |
+| `title` | `string \| undefined` | no | — |  |
+| `default-checked` | `boolean \| undefined` | no | — |  |
+| `default-value` | `string \| number \| readonly string[] \| undefined` | no | — |  |
+| `auto-focus` | `boolean \| undefined` | no | — |  |
+| `id` | `string \| undefined` | no | — |  |
+| `tab-index` | `number \| undefined` | no | — |  |
+| `rel` | `string \| undefined` | no | — |  |
+| `on-change` | `ChangeEventHandler<T, Element> \| undefined` | no | — |  |
+| `name` | `string \| undefined` | no | — |  |
+| `target` | `string \| undefined` | no | — |  |
+| `auto-complete` | `string \| undefined` | no | — |  |
+| `data-testid` | `string \| undefined` | no | — |  |
+
+## Sub-components
+
+- `WallarmDS.ChatInputSubmit` — `ChatInputSubmitProps` in the declaration bundle.
+- `WallarmDS.ChatInputTextarea` — `ChatInputTextareaProps` in the declaration bundle.
+
+## Stories
+
+### Default
+
+Empty and ready: Send stays disabled until there is something other than whitespace to send.
+The app owns the draft: sending starts a "response", Stop or Esc ends it.
+
+Source: ChatInput/ChatInput.stories.tsx#Default
+
+### Typing
+
+A multi-line draft — the textarea grows with its content up to eight lines, then scrolls.
+
+Source: ChatInput/ChatInput.stories.tsx#Typing
+
+### Streaming
+
+While a reply streams the button becomes Stop; its tooltip mentions that Esc in the textarea does the same.
+
+Source: ChatInput/ChatInput.stories.tsx#Streaming
+
+### Disabled
+
+Disabled as a whole, e.g. while the assistant is unavailable.
+
+Source: ChatInput/ChatInput.stories.tsx#Disabled
+
+### WithContext
+
+Attached context sits in a blue bar behind the box; pass `context` only when there are chips.
+
+Source: ChatInput/ChatInput.stories.tsx#WithContext
+
+### WithSettings
+
+`ChatPermissions` goes between the textarea and the submit, on the second row.
+
+Source: ChatInput/ChatInput.stories.tsx#WithSettings
+
+### NoDisclaimer
+
+`disclaimer={null}` drops the line under the box.
+
+Source: ChatInput/ChatInput.stories.tsx#NoDisclaimer
+
+### Analytics
+
+`data-analytics-*` goes straight on `ChatInputTextarea` and `ChatInputSubmit`, which render the real nodes.
+
+Source: ChatInput/ChatInput.stories.tsx#Analytics
+
+## Story sources
+
+### ChatInput/ChatInput.stories.tsx
+
+```tsx
+import { type MouseEvent, useState } from 'react';
+import type { Meta, StoryFn } from 'storybook-react-rsbuild';
+import { Quote } from '../../icons';
+import { Badge } from '../Badge';
+import {
+  ChatPermissions,
+  ChatPermissionsContent,
+  ChatPermissionsItem,
+  type ChatPermissionsItemCheckedChangeDetails,
+  ChatPermissionsTrigger,
+} from '../ChatPermissions';
+import { TagClose } from '../Tag';
+import { ChatInput, ChatInputSubmit, ChatInputTextarea } from './index';
+
+const DESCRIPTION = [
+  'The composer at the bottom of the Wally chat: a growing textarea where Enter sends and Shift+Enter adds a line, with the send button turning into Stop while a reply streams.',
+  'It is controlled — the app owns the draft and the running state — and any actions such as `ChatPermissions` go between the textarea and `ChatInputSubmit`.',
+].join(' ');
+
+const meta = {
+  title: 'AI/ChatInput',
+  component: ChatInput,
+  subcomponents: { ChatInputTextarea, ChatInputSubmit },
+  parameters: {
+    layout: 'centered',
+    docs: { description: { component: DESCRIPTION } },
+  },
+} satisfies Meta<typeof ChatInput>;
+
+export default meta;
+
+/**
+ * Empty and ready: Send stays disabled until there is something other than whitespace to send.
+ * The app owns the draft: sending starts a "response", Stop or Esc ends it.
+ */
+export const Default: StoryFn<typeof meta> = () => {
+  const [value, setValue] = useState('');
+  const [isRunning, setIsRunning] = useState(false);
+
+  const handleSubmit = () => {
+    setValue('');
+    setIsRunning(true);
+  };
+
+  const handleStop = () => {
+    setIsRunning(false);
+  };
+
+  return (
+    <div className='w-[400px]'>
+      <ChatInput
+        data-testid='chat-input'
+        value={value}
+        onValueChange={setValue}
+        isRunning={isRunning}
+        onSubmit={handleSubmit}
+        onStop={handleStop}
+      >
+        <ChatInputTextarea />
+        <ChatInputSubmit />
+      </ChatInput>
+    </div>
+  );
+};
+
+/** A multi-line draft — the textarea grows with its content up to eight lines, then scrolls. */
+export const Typing: StoryFn<typeof meta> = () => {
+  const [value, setValue] = useState(
+    'Why was 203.0.113.42 blocked yesterday?\nShow the attacks it sent\nand the rule that matched them.',
+  );
+  const [isRunning, setIsRunning] = useState(false);
+
+  const handleSubmit = () => {
+    setValue('');
+    setIsRunning(true);
+  };
+
+  const handleStop = () => {
+    setIsRunning(false);
+  };
+
+  return (
+    <div className='w-[400px]'>
+      <ChatInput
+        data-testid='chat-input'
+        value={value}
+        onValueChange={setValue}
+        isRunning={isRunning}
+        onSubmit={handleSubmit}
+        onStop={handleStop}
+      >
+        <ChatInputTextarea />
+        <ChatInputSubmit />
+      </ChatInput>
+    </div>
+  );
+};
+
+/** While a reply streams the button becomes Stop; its tooltip mentions that Esc in the textarea does the same. */
+export const Streaming: StoryFn<typeof meta> = () => {
+  const [value, setValue] = useState('');
+  const [isRunning, setIsRunning] = useState(true);
+
+  const handleSubmit = () => {
+    setValue('');
+    setIsRunning(true);
+  };
+
+  const handleStop = () => {
+    setIsRunning(false);
+  };
+
+  return (
+    <div className='w-[400px]'>
+      <ChatInput
+        data-testid='chat-input'
+        value={value}
+        onValueChange={setValue}
+        isRunning={isRunning}
+        onSubmit={handleSubmit}
+        onStop={handleStop}
+      >
+        <ChatInputTextarea />
+        <ChatInputSubmit />
+      </ChatInput>
+    </div>
+  );
+};
+
+/** Disabled as a whole, e.g. while the assistant is unavailable. */
+export const Disabled: StoryFn<typeof meta> = () => {
+  const [value, setValue] = useState('Draft kept');
+
+  const handleSubmit = () => {
+    setValue('');
+  };
+
+  return (
+    <div className='w-[400px]'>
+      <ChatInput
+        data-testid='chat-input'
+        disabled
+        value={value}
+        onValueChange={setValue}
+        onSubmit={handleSubmit}
+      >
+        <ChatInputTextarea />
+        <ChatInputSubmit />
+      </ChatInput>
+    </div>
+  );
+};
+
+/** Attached context sits in a blue bar behind the box; pass `context` only when there are chips. */
+export const WithContext: StoryFn<typeof meta> = () => {
+  const [value, setValue] = useState('');
+  const [chips, setChips] = useState(['Attacks', 'Incidents']);
+
+  const handleContextRemove = (event: MouseEvent<HTMLButtonElement>) => {
+    const chip = event.currentTarget.value;
+    setChips(prev => prev.filter(item => item !== chip));
+  };
+
+  const handleSubmit = () => {
+    setValue('');
+  };
+
+  return (
+    <div className='w-[400px]'>
+      <ChatInput
+        data-testid='chat-input'
+        value={value}
+        onValueChange={setValue}
+        onSubmit={handleSubmit}
+        context={chips.map(chip => (
+          <Badge key={chip} type='secondary' color='blue' data-testid={`context-${chip}`}>
+            <Quote />
+            {chip}
+            <TagClose
+              aria-label={`Remove ${chip}`}
+              value={chip}
+              className='rounded-4 focus-visible:ring-3 focus-visible:ring-focus-primary'
+              onClick={handleContextRemove}
+            />
+          </Badge>
+        ))}
+      >
+        <ChatInputTextarea />
+        <ChatInputSubmit />
+      </ChatInput>
+    </div>
+  );
+};
+
+/** `ChatPermissions` goes between the textarea and the submit, on the second row. */
+export const WithSettings: StoryFn<typeof meta> = () => {
+  const [value, setValue] = useState('');
+  const [allowed, setAllowed] = useState({ search_attacks: true, propose_add_to_denylist: true });
+
+  const handlePermissionChange = ({ checked, name }: ChatPermissionsItemCheckedChangeDetails) => {
+    setAllowed(prev => ({ ...prev, [name]: checked }));
+  };
+
+  const handleSubmit = () => {
+    setValue('');
+  };
+
+  return (
+    <div className='flex h-[320px] items-end'>
+      <div className='w-[400px]'>
+        <ChatInput
+          data-testid='chat-input'
+          value={value}
+          onValueChange={setValue}
+          onSubmit={handleSubmit}
+        >
+          <ChatInputTextarea />
+          <ChatPermissions data-testid='permissions'>
+            <ChatPermissionsTrigger />
+            <ChatPermissionsContent>
+              {Object.entries(allowed).map(([name, checked]) => (
+                <ChatPermissionsItem
+                  key={name}
+                  name={name}
+                  title={name}
+                  checked={checked}
+                  onCheckedChange={handlePermissionChange}
+                />
+              ))}
+            </ChatPermissionsContent>
+          </ChatPermissions>
+          <ChatInputSubmit />
+        </ChatInput>
+      </div>
+    </div>
+  );
+};
+
+/** `disclaimer={null}` drops the line under the box. */
+export const NoDisclaimer: StoryFn<typeof meta> = () => {
+  const [value, setValue] = useState('');
+
+  const handleSubmit = () => {
+    setValue('');
+  };
+
+  return (
+    <div className='w-[400px]'>
+      <ChatInput
+        data-testid='chat-input'
+        disclaimer={null}
+        value={value}
+        onValueChange={setValue}
+        onSubmit={handleSubmit}
+      >
+        <ChatInputTextarea />
+        <ChatInputSubmit />
+      </ChatInput>
+    </div>
+  );
+};
+
+/** `data-analytics-*` goes straight on `ChatInputTextarea` and `ChatInputSubmit`, which render the real nodes. */
+export const Analytics: StoryFn<typeof meta> = () => {
+  const [value, setValue] = useState('');
+
+  const handleSubmit = () => {
+    setValue('');
+  };
+
+  return (
+    <div className='w-[400px]'>
+      <ChatInput
+        data-testid='chat-input'
+        value={value}
+        onValueChange={setValue}
+        onSubmit={handleSubmit}
+      >
+        <ChatInputTextarea data-analytics-id='WALLY_PROMPT' />
+        <ChatInputSubmit
+          data-analytics-id='WALLY_SEND'
+          data-analytics-props='{"surface":"wally"}'
+        />
+      </ChatInput>
+    </div>
+  );
+};
+```

package/dist/project/components/ChatInput/preview.html

@@ -0,0 +1,2 @@
+<!-- @dsCard group="AI" height=480 -->
+<!doctype html><html><head><meta charset="utf-8"></head><body><div id="preview"></div><script src="./stories.js"></script><script>window.WallarmPreview.mount(document.getElementById('preview'));</script></body></html>

package/dist/project/components/ChatInput/stories.js

@@ -0,0 +1,12 @@
+var e={vD(e,t,n){let a,r;/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @lightSyntaxTransform
+ * @noflow
+ * @nolint
+ * @preventMunge
+ * @preserve-invariant-messages
+ */var l,o,i=Object.create,c=Object.defineProperty,s=Object.getOwnPropertyDescriptor,u=Object.getOwnPropertyNames,m=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty,p=(e,t,n,a)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let r of u(t))f.call(e,r)||r===n||c(e,r,{get:()=>t[r],enumerable:!(a=s(t,r))||a.enumerable});return e},d={},h={$dispatcherGuard:()=>k,$makeReadOnly:()=>O,$reset:()=>x,$structuralCheck:()=>j,c:()=>R,clearRenderCounterRegistry:()=>M,renderCounterRegistry:()=>D,useRenderCounter:()=>I};for(var y in h)c(d,y,{get:h[y],enumerable:!0});e.exports=p(c({},"__esModule",{value:!0}),d);var S=(r=null!=(a=n("C"))?i(m(a)):{},p(a&&a.__esModule?r:c(r,"default",{value:a,enumerable:!0}),a)),{useRef:_,useEffect:b,isValidElement:w}=S,g=null!=(l=S.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE)?l:S.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,v=Symbol.for("react.memo_cache_sentinel"),R="function"==typeof(null==(o=S.__COMPILER_RUNTIME)?void 0:o.c)?S.__COMPILER_RUNTIME.c:function(e){return S.useMemo(()=>{let t=Array(e);for(let n=0;n<e;n++)t[n]=v;return t[v]=!0,t},[])},C={};["readContext","useCallback","useContext","useEffect","useImperativeHandle","useInsertionEffect","useLayoutEffect","useMemo","useReducer","useRef","useState","useDebugValue","useDeferredValue","useTransition","useMutableSource","useSyncExternalStore","useId","unstable_isNewReconciler","getCacheSignal","getCacheForType","useCacheRefresh"].forEach(e=>{C[e]=()=>{throw Error(`[React] Unexpected React hook call (${e}) from a React compiled function. Check that all hooks are called directly and named according to convention ('use[A-Z]') `)}});var E=null;function $(e){return g.ReactCurrentDispatcher.current=e,g.ReactCurrentDispatcher.current}C.useMemoCache=e=>{if(null!=E)return E.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var N=[];function k(e){let t=g.ReactCurrentDispatcher.current;if(0===e){if(N.push(t),1===N.length&&(E=t),t===C)throw Error("[React] Unexpected call to custom hook or component from a React compiled function. Check that (1) all hooks are called directly and named according to convention ('use[A-Z]') and (2) components are returned as JSX instead of being directly invoked.");$(C)}else if(1===e){let e=N.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");0===N.length&&(E=null),$(e)}else if(2===e)N.push(t),$(E);else if(3===e){let e=N.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");$(e)}else throw Error("React Compiler internal error: unreachable block"+e)}function x(e){for(let t=0;t<e.length;t++)e[t]=v}function O(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var D=new Map;function M(){for(let e of D.values())e.forEach(e=>{e.count=0})}function I(e){let t=_(null);null!=t.current&&(t.current.count+=1),b(()=>{if(null==t.current){let n,a={count:0};null==(n=D.get(e))&&(n=new Set,D.set(e,n)),n.add(a),t.current=a}return()=>{var n;let a;null!==t.current&&(n=t.current,null!=(a=D.get(e))&&a.delete(n))}})}var T=new Set;function j(e,t,n,a,r,l){function o(e,t,o,i){let c=`${a}:${l} [${r}] ${n}${o} changed from ${e} to ${t} at depth ${i}`;T.has(c)||(T.add(c),console.error(c))}!function e(t,n,a,r){if(!(r>2)){if(t!==n)if(typeof t!=typeof n)o(`type ${typeof t}`,`type ${typeof n}`,a,r);else if("object"==typeof t){let l=Array.isArray(t),i=Array.isArray(n);if(null===t&&null!==n)o("null",`type ${typeof n}`,a,r);else if(null===n)o(`type ${typeof t}`,"null",a,r);else if(t instanceof Map)if(n instanceof Map)if(t.size!==n.size)o(`Map instance with size ${t.size}`,`Map instance with size ${n.size}`,a,r);else for(let[l,i]of t)n.has(l)?e(i,n.get(l),`${a}.get(${l})`,r+1):o(`Map instance with key ${l}`,`Map instance without key ${l}`,a,r);else o("Map instance","other value",a,r);else if(n instanceof Map)o("other value","Map instance",a,r);else if(t instanceof Set)if(n instanceof Set)if(t.size!==n.size)o(`Set instance with size ${t.size}`,`Set instance with size ${n.size}`,a,r);else for(let e of n)t.has(e)||o(`Set instance without element ${e}`,`Set instance with element ${e}`,a,r);else o("Set instance","other value",a,r);else if(n instanceof Set)o("other value","Set instance",a,r);else if(l||i)if(l!==i)o(`type ${l?"array":"object"}`,`type ${i?"array":"object"}`,a,r);else if(t.length!==n.length)o(`array with length ${t.length}`,`array with length ${n.length}`,a,r);else for(let l=0;l<t.length;l++)e(t[l],n[l],`${a}[${l}]`,r+1);else if(w(t)||w(n))w(t)!==w(n)?o(`type ${w(t)?"React element":"object"}`,`type ${w(n)?"React element":"object"}`,a,r):t.type!==n.type?o(`React element of type ${t.type}`,`React element of type ${n.type}`,a,r):e(t.props,n.props,`[props of ${a}]`,r+1);else{for(let e in n)e in t||o(`object without key ${e}`,`object with key ${e}`,a,r);for(let l in t)l in n?e(t[l],n[l],`${a}.${l}`,r+1):o(`object with key ${l}`,`object without key ${l}`,a,r)}}else{if("function"==typeof t)return;isNaN(t)||isNaN(n)?isNaN(t)!==isNaN(n)&&o(`${isNaN(t)?"NaN":"non-NaN value"}`,`${isNaN(n)?"NaN":"non-NaN value"}`,a,r):t!==n&&o(t,n,a,r)}}}(e,t,"",0)}},p(e,t,n){let a=new WeakMap,r=new WeakMap;function l(e,t,n){let l=t,o=n;if("object"==typeof l&&null!==l&&"$$typeof"in l&&l.$$typeof===Symbol.for("react.context")&&"Provider"in l&&(l=l.Provider),"function"==typeof l&&null!=o.ref&&!l.prototype?.isReactComponent){let t=l,n=a.get(e);n||(n=new WeakMap,a.set(e,n));let r=n.get(t);r||((r=e.forwardRef((e,n)=>t({...e,ref:n}))).displayName=t.displayName??t.name,n.set(t,r)),l=r}if("string"==typeof l&&"boolean"==typeof o.inert&&((o={...o}).inert?o.inert="":delete o.inert),"string"==typeof l)for(let[e,t]of[["fill-rule","fillRule"],["clip-rule","clipRule"]])e in o&&(o={...o,[t]:o[e]},delete o[e]);return"string"==typeof l&&null!=o.ref&&(l=function(e,t){let n=r.get(e);n||(n=new Map,r.set(e,n));let a=n.get(t);if(a)return a;let l=e.forwardRef((n,a)=>{let r=e.useRef(null);if(!r.current||r.current.original!==a){let e;r.current={original:a,callback:t=>{if(null==t&&e){let t=e;e=void 0,t();return}if("function"==typeof a){let n=a(t);e="function"==typeof n?n:void 0}else a&&(a.current=t)}}}return e.createElement(t,{...n,ref:r.current.callback})});return l.displayName=`CanvasHost(${t})`,n.set(t,l),l}(e,l)),{type:l,props:o}}function o(e){let t=(t,n,a)=>{let r=l(e,t,n??{});return e.createElement(r.type,void 0===a?r.props:{...r.props,key:a})};return{jsx:t,jsxs:(t,n,a)=>{let r=l(e,t,n??{}),{children:o,...i}=r.props;return e.createElement(r.type,void 0===a?i:{...i,key:a},...Array.isArray(o)?o:[o])},jsxDEV:t,Fragment:e.Fragment}}function i(e){return{...e,createElement:(t,n,...a)=>{let r=l(e,t,n??{});return e.createElement(r.type,r.props,...a)},cloneElement:(t,n,...a)=>{let r=e.cloneElement(t,n??void 0,...a),o=r.ref,i=l(e,r.type,{...r.props,ref:o});return i.type===r.type&&"string"!=typeof r.type?r:e.createElement(i.type,{...i.props,key:r.key})}}}n.d(t,{MA:()=>o,YJ:()=>i})},C(e,t,n){n.r(t);let a=(0,n("p").YJ)(window.React),{Children:r,Component:l,Fragment:o,Profiler:i,PureComponent:c,StrictMode:s,Suspense:u,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:m,act:f,cloneElement:p,createContext:d,createElement:h,createFactory:y,createRef:S,forwardRef:_,isValidElement:b,lazy:w,memo:g,startTransition:v,unstable_act:R,useCallback:C,useContext:E,useDebugValue:$,useDeferredValue:N,useEffect:k,useId:x,useImperativeHandle:O,useInsertionEffect:D,useLayoutEffect:M,useMemo:I,useReducer:T,useRef:j,useState:P,useSyncExternalStore:W,useTransition:A,version:L,use:V}=a;n.d(t,{},{Children:r,Component:l,Fragment:o,Profiler:i,PureComponent:c,StrictMode:s,Suspense:u,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:m,act:f,cloneElement:p,createContext:d,createElement:h,createFactory:y,createRef:S,default:a,forwardRef:_,isValidElement:b,lazy:w,memo:g,startTransition:v,unstable_act:R,use:V,useCallback:C,useContext:E,useDebugValue:$,useDeferredValue:N,useEffect:k,useId:x,useImperativeHandle:O,useInsertionEffect:D,useLayoutEffect:M,useMemo:I,useReducer:T,useRef:j,useState:P,useSyncExternalStore:W,useTransition:A,version:L})}},t={};function n(a){var r=t[a];if(void 0!==r)return r.exports;var l=t[a]={exports:{}};return e[a](l,l.exports,n),l.exports}n.d=(e,t,a)=>{var r=(t,a)=>{for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,[a]:t[r]})};r(t,"get"),r(a,"value")},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),n.r=e=>{"u">typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},(()=>{let{jsx:e,jsxs:t,jsxDEV:a,Fragment:r}=(0,n("p").MA)(window.React);var l=n("vD"),o=n("C");let i=window.WallarmDS.Icons.Quote,c=window.WallarmDS.Badge,s=window.WallarmDS.ChatPermissions,u=window.WallarmDS.ChatPermissionsContent,m=window.WallarmDS.ChatPermissionsItem,f=window.WallarmDS.ChatPermissionsTrigger,p=window.WallarmDS.TagClose,d=window.WallarmDS.ChatInput,h=window.WallarmDS.ChatInputSubmit,y=window.WallarmDS.ChatInputTextarea,S={title:"AI/ChatInput",component:d,subcomponents:{ChatInputTextarea:y,ChatInputSubmit:h},parameters:{layout:"centered",docs:{description:{component:"The composer at the bottom of the Wally chat: a growing textarea where Enter sends and Shift+Enter adds a line, with the send button turning into Stop while a reply streams. It is controlled — the app owns the draft and the running state — and any actions such as `ChatPermissions` go between the textarea and `ChatInputSubmit`."}}}},_=[{name:"Default",story:()=>{let n,a,r,i,c,s=(0,l.c)(7),[u,m]=(0,o.useState)(""),[f,p]=(0,o.useState)(!1);s[0]===Symbol.for("react.memo_cache_sentinel")?(n=()=>{m(""),p(!0)},s[0]=n):n=s[0];let S=n;s[1]===Symbol.for("react.memo_cache_sentinel")?(a=()=>{p(!1)},s[1]=a):a=s[1];let _=a;return s[2]===Symbol.for("react.memo_cache_sentinel")?(r=e(y,{}),i=e(h,{}),s[2]=r,s[3]=i):(r=s[2],i=s[3]),s[4]!==f||s[5]!==u?(c=e("div",{className:"w-[400px]",children:t(d,{"data-testid":"chat-input",value:u,onValueChange:m,isRunning:f,onSubmit:S,onStop:_,children:[r,i]})}),s[4]=f,s[5]=u,s[6]=c):c=s[6],c},meta:S},{name:"Typing",story:()=>{let n,a,r,i,c,s=(0,l.c)(7),[u,m]=(0,o.useState)("Why was 203.0.113.42 blocked yesterday?\nShow the attacks it sent\nand the rule that matched them."),[f,p]=(0,o.useState)(!1);s[0]===Symbol.for("react.memo_cache_sentinel")?(n=()=>{m(""),p(!0)},s[0]=n):n=s[0];let S=n;s[1]===Symbol.for("react.memo_cache_sentinel")?(a=()=>{p(!1)},s[1]=a):a=s[1];let _=a;return s[2]===Symbol.for("react.memo_cache_sentinel")?(r=e(y,{}),i=e(h,{}),s[2]=r,s[3]=i):(r=s[2],i=s[3]),s[4]!==f||s[5]!==u?(c=e("div",{className:"w-[400px]",children:t(d,{"data-testid":"chat-input",value:u,onValueChange:m,isRunning:f,onSubmit:S,onStop:_,children:[r,i]})}),s[4]=f,s[5]=u,s[6]=c):c=s[6],c},meta:S},{name:"Streaming",story:()=>{let n,a,r,i,c,s=(0,l.c)(7),[u,m]=(0,o.useState)(""),[f,p]=(0,o.useState)(!0);s[0]===Symbol.for("react.memo_cache_sentinel")?(n=()=>{m(""),p(!0)},s[0]=n):n=s[0];let S=n;s[1]===Symbol.for("react.memo_cache_sentinel")?(a=()=>{p(!1)},s[1]=a):a=s[1];let _=a;return s[2]===Symbol.for("react.memo_cache_sentinel")?(r=e(y,{}),i=e(h,{}),s[2]=r,s[3]=i):(r=s[2],i=s[3]),s[4]!==f||s[5]!==u?(c=e("div",{className:"w-[400px]",children:t(d,{"data-testid":"chat-input",value:u,onValueChange:m,isRunning:f,onSubmit:S,onStop:_,children:[r,i]})}),s[4]=f,s[5]=u,s[6]=c):c=s[6],c},meta:S},{name:"Disabled",story:()=>{let n,a,r,i,c=(0,l.c)(5),[s,u]=(0,o.useState)("Draft kept");c[0]===Symbol.for("react.memo_cache_sentinel")?(n=()=>{u("")},c[0]=n):n=c[0];let m=n;return c[1]===Symbol.for("react.memo_cache_sentinel")?(a=e(y,{}),r=e(h,{}),c[1]=a,c[2]=r):(a=c[1],r=c[2]),c[3]!==s?(i=e("div",{className:"w-[400px]",children:t(d,{"data-testid":"chat-input",disabled:!0,value:s,onValueChange:u,onSubmit:m,children:[a,r]})}),c[3]=s,c[4]=i):i=c[4],i},meta:S},{name:"WithContext",story:()=>{let n,a,r,s,u,m,f,S=(0,l.c)(11),[_,b]=(0,o.useState)("");S[0]===Symbol.for("react.memo_cache_sentinel")?(n=["Attacks","Incidents"],S[0]=n):n=S[0];let[w,g]=(0,o.useState)(n);S[1]===Symbol.for("react.memo_cache_sentinel")?(a=e=>{let t=e.currentTarget.value;g(e=>e.filter(e=>e!==t))},S[1]=a):a=S[1];let v=a;S[2]===Symbol.for("react.memo_cache_sentinel")?(r=()=>{b("")},S[2]=r):r=S[2];let R=r;if(S[3]!==w){let n;S[5]===Symbol.for("react.memo_cache_sentinel")?(n=n=>t(c,{type:"secondary",color:"blue","data-testid":`context-${n}`,children:[e(i,{}),n,e(p,{"aria-label":`Remove ${n}`,value:n,className:"rounded-4 focus-visible:ring-3 focus-visible:ring-focus-primary",onClick:v})]},n),S[5]=n):n=S[5],s=w.map(n),S[3]=w,S[4]=s}else s=S[4];return S[6]===Symbol.for("react.memo_cache_sentinel")?(u=e(y,{}),m=e(h,{}),S[6]=u,S[7]=m):(u=S[6],m=S[7]),S[8]!==s||S[9]!==_?(f=e("div",{className:"w-[400px]",children:t(d,{"data-testid":"chat-input",value:_,onValueChange:b,onSubmit:R,context:s,children:[u,m]})}),S[8]=s,S[9]=_,S[10]=f):f=S[10],f},meta:S},{name:"WithSettings",story:()=>{let n,a,r,i,c,p,S,_,b=(0,l.c)(11),[w,g]=(0,o.useState)("");b[0]===Symbol.for("react.memo_cache_sentinel")?(n={search_attacks:!0,propose_add_to_denylist:!0},b[0]=n):n=b[0];let[v,R]=(0,o.useState)(n);b[1]===Symbol.for("react.memo_cache_sentinel")?(a=e=>{let{checked:t,name:n}=e;R(e=>({...e,[n]:t}))},b[1]=a):a=b[1];let C=a;b[2]===Symbol.for("react.memo_cache_sentinel")?(r=()=>{g("")},b[2]=r):r=b[2];let E=r;return b[3]===Symbol.for("react.memo_cache_sentinel")?(i=e(y,{}),b[3]=i):i=b[3],b[4]===Symbol.for("react.memo_cache_sentinel")?(c=e(f,{}),b[4]=c):c=b[4],b[5]!==v?(p=t(s,{"data-testid":"permissions",children:[c,e(u,{children:Object.entries(v).map(t=>{let[n,a]=t;return e(m,{name:n,title:n,checked:a,onCheckedChange:C},n)})})]}),b[5]=v,b[6]=p):p=b[6],b[7]===Symbol.for("react.memo_cache_sentinel")?(S=e(h,{}),b[7]=S):S=b[7],b[8]!==p||b[9]!==w?(_=e("div",{className:"flex h-[320px] items-end",children:e("div",{className:"w-[400px]",children:t(d,{"data-testid":"chat-input",value:w,onValueChange:g,onSubmit:E,children:[i,p,S]})})}),b[8]=p,b[9]=w,b[10]=_):_=b[10],_},meta:S},{name:"NoDisclaimer",story:()=>{let n,a,r,i,c=(0,l.c)(5),[s,u]=(0,o.useState)("");c[0]===Symbol.for("react.memo_cache_sentinel")?(n=()=>{u("")},c[0]=n):n=c[0];let m=n;return c[1]===Symbol.for("react.memo_cache_sentinel")?(a=e(y,{}),r=e(h,{}),c[1]=a,c[2]=r):(a=c[1],r=c[2]),c[3]!==s?(i=e("div",{className:"w-[400px]",children:t(d,{"data-testid":"chat-input",disclaimer:null,value:s,onValueChange:u,onSubmit:m,children:[a,r]})}),c[3]=s,c[4]=i):i=c[4],i},meta:S},{name:"Analytics",story:()=>{let n,a,r,i,c=(0,l.c)(5),[s,u]=(0,o.useState)("");c[0]===Symbol.for("react.memo_cache_sentinel")?(n=()=>{u("")},c[0]=n):n=c[0];let m=n;return c[1]===Symbol.for("react.memo_cache_sentinel")?(a=e(y,{"data-analytics-id":"WALLY_PROMPT"}),r=e(h,{"data-analytics-id":"WALLY_SEND","data-analytics-props":'{"surface":"wally"}'}),c[1]=a,c[2]=r):(a=c[1],r=c[2]),c[3]!==s?(i=e("div",{className:"w-[400px]",children:t(d,{"data-testid":"chat-input",value:s,onValueChange:u,onSubmit:m,children:[a,r]})}),c[3]=s,c[4]=i):i=c[4],i},meta:S}];function b({entry:e}){let{story:t,meta:n}=e,a={...n.args,...t.args},r="function"==typeof t||t.$$typeof?t:t.render||n.render||n.component,l=()=>o.default.createElement(r,a),i={args:a,globals:{theme:"light"},parameters:{...n.parameters,...t.parameters},viewMode:"story"};for(let e of[...n.decorators||[],...t.decorators||[]].reverse()){let t=l;l=()=>e(t,i)}return o.default.createElement("section",{"data-preview-story":e.name,className:"p-16"},o.default.createElement("h2",{className:"text-sm mb-12"},e.name),o.default.createElement(l))}window.WallarmPreview={mount(e){let t=window.ReactDOM.createRoot(e);return t.render(o.default.createElement(window.WallarmDS.Root,null,_.map((e,t)=>o.default.createElement(b,{key:t,entry:e})))),t}}})();