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

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

@@ -0,0 +1,314 @@
+Stick-to-bottom for the Wally log: `Conversation` takes `ChatBody`’s place between `ChatHeader` and `ChatFooter`, and `ConversationContent` renders the built `ChatBody` (`role=log`) as the scroller. While an answer streams the view follows it; once the reader scrolls up it stops following and `ConversationScrollButton` appears. Scrolling back down, clicking the button or changing `autoScrollKey` (pass the last user message id) re-sticks. `ConversationEmptyState` is the greeting for an empty chat, rendered inside the scroller. The scroll button is the stock small icon-only Button, floated at the bottom centre.
+
+## 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 |
+| --- | --- | --- | --- | --- |
+| `threshold` | `number \| undefined` | no | `70` | Distance in px from the bottom that still counts as "at bottom". Default 70. |
+| `auto-scroll-key` | `string \| number \| undefined` | no | — | When it changes, re-stick and scroll to the bottom even if the reader scrolled up. Pass the last user message id, so sending always reveals the answer. For a thread switch, remount instead: `key={threadId}`. |
+| `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 | — |  |
+| `title` | `string \| undefined` | no | — |  |
+| `rel` | `string \| undefined` | no | — |  |
+| `on-change` | `ChangeEventHandler<T, Element> \| undefined` | no | — |  |
+| `data-testid` | `string \| undefined` | no | — |  |
+
+## Sub-components
+
+- `WallarmDS.ConversationContent` — `ConversationContentProps` in the declaration bundle.
+- `WallarmDS.ConversationEmptyState` — `ConversationEmptyStateProps` in the declaration bundle.
+- `WallarmDS.ConversationScrollButton` — `ConversationScrollButtonProps` in the declaration bundle.
+
+## Stories
+
+### Default
+
+A long history that opens at the latest message. Sending a message appends a turn and changes
+`autoScrollKey`, so the view re-sticks even after the reader scrolled up.
+
+Source: Conversation/Conversation.stories.tsx#Default
+
+### Empty
+
+`ConversationEmptyState` with greeting pills, over the `strong` background.
+
+Source: Conversation/Conversation.stories.tsx#Empty
+
+### Streaming
+
+A paragraph streams in every 600ms. The view follows the growing answer; scroll up and it stops
+following and the scroll button appears.
+
+Source: Conversation/Conversation.stories.tsx#Streaming
+
+### Analytics
+
+`data-analytics-id` on `ConversationScrollButton` lands on its `<button>`. Scroll the log up to
+reveal it. Keep analytics off the `Conversation` root — a click anywhere inside would resolve to it.
+
+Source: Conversation/Conversation.stories.tsx#Analytics
+
+## Story sources
+
+### Conversation/Conversation.stories.tsx
+
+```tsx
+import { Fragment, useEffect, useState } from 'react';
+import type { Meta, StoryFn } from 'storybook-react-rsbuild';
+import { AssistantMessage, AssistantMessageContent } from '../AssistantMessage';
+import {
+  Chat,
+  ChatFooter,
+  ChatHeader,
+  ChatHeaderTitle,
+  ChatSuggestion,
+  ChatSuggestions,
+} from '../Chat';
+import { ChatInput, ChatInputSubmit, ChatInputTextarea } from '../ChatInput';
+import { MessageActions, MessageTimestamp } from '../MessageActions';
+import { UserMessage, UserMessageBubble } from '../UserMessage';
+import {
+  Conversation,
+  ConversationContent,
+  ConversationEmptyState,
+  ConversationScrollButton,
+} from '.';
+
+const DESCRIPTION = [
+  'Stick-to-bottom for the Wally log: `Conversation` takes `ChatBody`’s place between `ChatHeader` and `ChatFooter`, and `ConversationContent` renders the built `ChatBody` (`role=log`) as the scroller.',
+  'While an answer streams the view follows it; once the reader scrolls up it stops following and `ConversationScrollButton` appears. Scrolling back down, clicking the button or changing `autoScrollKey` (pass the last user message id) re-sticks.',
+  '`ConversationEmptyState` is the greeting for an empty chat, rendered inside the scroller.',
+  'The scroll button is the stock small icon-only Button, floated at the bottom centre.',
+].join(' ');
+
+const meta = {
+  title: 'AI/Conversation',
+  component: Conversation,
+  subcomponents: { ConversationContent, ConversationEmptyState, ConversationScrollButton },
+  parameters: {
+    layout: 'centered',
+    docs: { description: { component: DESCRIPTION } },
+  },
+} satisfies Meta<typeof Conversation>;
+
+export default meta;
+
+const TOPICS = ['/api/login', '/api/orders', '/graphql', '/api/users', '/checkout', '/search'];
+
+const HISTORY = TOPICS.map((path, index) => ({
+  id: `u${index}`,
+  question: `Why were requests to ${path} blocked?`,
+  answer: [
+    `Wallarm blocked ${120 * (index + 1)} attack attempts against ${path} in the last 24 hours.`,
+    'Most of them were SQL injection probes from a single /24 network; none reached the application.',
+  ],
+}));
+
+const ANSWER = [
+  'Wallarm blocked 1,204 SQL injection attempts against /api/login last night.',
+  'Almost all of them came from 203.0.113.0/24, peaking at 03:00 UTC.',
+  'The matched rule is "SQLi in query parameters"; it has been in blocking mode since June.',
+  'No request reached the application, and no credentials were exposed.',
+  'You can deny the network in IP lists, or keep monitoring: the rate is already dropping.',
+];
+
+/**
+ * A long history that opens at the latest message. Sending a message appends a turn and changes
+ * `autoScrollKey`, so the view re-sticks even after the reader scrolled up.
+ */
+export const Default: StoryFn<typeof meta> = () => {
+  const [turns, setTurns] = useState(HISTORY);
+  const [value, setValue] = useState('');
+  const lastId = turns[turns.length - 1]?.id;
+
+  const handleSubmit = (question: string) => {
+    setTurns(previous => [
+      ...previous,
+      { id: `u${previous.length}`, question, answer: ANSWER.slice(0, 2) },
+    ]);
+    setValue('');
+  };
+
+  return (
+    <div className='h-640 w-480'>
+      <Chat data-testid='chat'>
+        <ChatHeader>
+          <ChatHeaderTitle />
+        </ChatHeader>
+        <Conversation autoScrollKey={lastId}>
+          <ConversationContent>
+            {turns.map((turn, index) => (
+              <Fragment key={turn.id}>
+                <UserMessage data-testid={`conversation--user-message-${index}`}>
+                  <UserMessageBubble>{turn.question}</UserMessageBubble>
+                  <MessageActions>
+                    <MessageTimestamp dateTime='2026-10-21T09:41:00Z'>2m ago</MessageTimestamp>
+                  </MessageActions>
+                </UserMessage>
+                <AssistantMessage data-testid={`conversation--assistant-message-${index}`}>
+                  <AssistantMessageContent>
+                    {turn.answer.map(paragraph => (
+                      <p key={paragraph}>{paragraph}</p>
+                    ))}
+                  </AssistantMessageContent>
+                  <MessageActions visible>
+                    <MessageTimestamp dateTime='2026-10-21T09:42:00Z'>1m ago</MessageTimestamp>
+                  </MessageActions>
+                </AssistantMessage>
+              </Fragment>
+            ))}
+          </ConversationContent>
+          <ConversationScrollButton />
+        </Conversation>
+        <ChatFooter>
+          <ChatInput value={value} onValueChange={setValue} onSubmit={handleSubmit}>
+            <ChatInputTextarea />
+            <ChatInputSubmit />
+          </ChatInput>
+        </ChatFooter>
+      </Chat>
+    </div>
+  );
+};
+
+/** `ConversationEmptyState` with greeting pills, over the `strong` background. */
+export const Empty: StoryFn<typeof meta> = () => {
+  const [value, setValue] = useState('');
+
+  const handleSubmit = () => {
+    setValue('');
+  };
+
+  return (
+    <div className='h-640 w-480'>
+      <Chat data-testid='chat' background='strong'>
+        <ChatHeader>
+          <ChatHeaderTitle />
+        </ChatHeader>
+        <Conversation>
+          <ConversationContent>
+            <ConversationEmptyState>
+              <ChatSuggestions placement='greeting' label='Suggestions'>
+                <ChatSuggestion data-testid='chat--suggestion-0'>
+                  Why was this request blocked?
+                </ChatSuggestion>
+                <ChatSuggestion data-testid='chat--suggestion-1'>
+                  Show top attacked endpoints
+                </ChatSuggestion>
+              </ChatSuggestions>
+            </ConversationEmptyState>
+          </ConversationContent>
+          <ConversationScrollButton />
+        </Conversation>
+        <ChatFooter>
+          <ChatInput value={value} onValueChange={setValue} onSubmit={handleSubmit}>
+            <ChatInputTextarea />
+            <ChatInputSubmit />
+          </ChatInput>
+        </ChatFooter>
+      </Chat>
+    </div>
+  );
+};
+
+/**
+ * A paragraph streams in every 600ms. The view follows the growing answer; scroll up and it stops
+ * following and the scroll button appears.
+ */
+export const Streaming: StoryFn<typeof meta> = () => {
+  const [count, setCount] = useState(1);
+  const streaming = count < ANSWER.length;
+
+  useEffect(() => {
+    if (!streaming) return;
+    const timer = setInterval(() => setCount(value => value + 1), 600);
+    return () => clearInterval(timer);
+  }, [streaming]);
+
+  return (
+    <div className='h-640 w-480'>
+      <Chat data-testid='chat'>
+        <ChatHeader>
+          <ChatHeaderTitle />
+        </ChatHeader>
+        <Conversation>
+          <ConversationContent aria-busy={streaming}>
+            {HISTORY.map((turn, index) => (
+              <Fragment key={turn.id}>
+                <UserMessage data-testid={`conversation--user-message-${index}`}>
+                  <UserMessageBubble>{turn.question}</UserMessageBubble>
+                  <MessageActions>
+                    <MessageTimestamp dateTime='2026-10-21T09:41:00Z'>2m ago</MessageTimestamp>
+                  </MessageActions>
+                </UserMessage>
+                <AssistantMessage data-testid={`conversation--assistant-message-${index}`}>
+                  <AssistantMessageContent>
+                    {turn.answer.map(paragraph => (
+                      <p key={paragraph}>{paragraph}</p>
+                    ))}
+                  </AssistantMessageContent>
+                  <MessageActions visible>
+                    <MessageTimestamp dateTime='2026-10-21T09:42:00Z'>1m ago</MessageTimestamp>
+                  </MessageActions>
+                </AssistantMessage>
+              </Fragment>
+            ))}
+            <AssistantMessage data-testid='conversation--streaming-message' aria-busy={streaming}>
+              <AssistantMessageContent>
+                {ANSWER.slice(0, count).map(paragraph => (
+                  <p key={paragraph}>{paragraph}</p>
+                ))}
+              </AssistantMessageContent>
+            </AssistantMessage>
+          </ConversationContent>
+          <ConversationScrollButton />
+        </Conversation>
+      </Chat>
+    </div>
+  );
+};
+
+/**
+ * `data-analytics-id` on `ConversationScrollButton` lands on its `<button>`. Scroll the log up to
+ * reveal it. Keep analytics off the `Conversation` root — a click anywhere inside would resolve to it.
+ */
+export const Analytics: StoryFn<typeof meta> = () => (
+  <div className='h-640 w-480'>
+    <Chat data-testid='chat'>
+      <ChatHeader>
+        <ChatHeaderTitle />
+      </ChatHeader>
+      <Conversation>
+        <ConversationContent>
+          {HISTORY.map((turn, index) => (
+            <Fragment key={turn.id}>
+              <UserMessage data-testid={`conversation--user-message-${index}`}>
+                <UserMessageBubble>{turn.question}</UserMessageBubble>
+                <MessageActions>
+                  <MessageTimestamp dateTime='2026-10-21T09:41:00Z'>2m ago</MessageTimestamp>
+                </MessageActions>
+              </UserMessage>
+              <AssistantMessage data-testid={`conversation--assistant-message-${index}`}>
+                <AssistantMessageContent>
+                  {turn.answer.map(paragraph => (
+                    <p key={paragraph}>{paragraph}</p>
+                  ))}
+                </AssistantMessageContent>
+                <MessageActions visible>
+                  <MessageTimestamp dateTime='2026-10-21T09:42:00Z'>1m ago</MessageTimestamp>
+                </MessageActions>
+              </AssistantMessage>
+            </Fragment>
+          ))}
+        </ConversationContent>
+        <ConversationScrollButton data-analytics-id='WALLY_SCROLL_TO_LATEST' />
+      </Conversation>
+    </Chat>
+  </div>
+);
+```

package/dist/project/components/Conversation/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/Conversation/stories.js

@@ -0,0 +1,12 @@
+var e={vD(e,t,n){let r,a;/**
+ * 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 o,l,i=Object.create,c=Object.defineProperty,s=Object.getOwnPropertyDescriptor,u=Object.getOwnPropertyNames,d=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty,h=(e,t,n,r)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let a of u(t))m.call(e,a)||a===n||c(e,a,{get:()=>t[a],enumerable:!(r=s(t,a))||r.enumerable});return e},p={},f={$dispatcherGuard:()=>N,$makeReadOnly:()=>D,$reset:()=>T,$structuralCheck:()=>A,c:()=>C,clearRenderCounterRegistry:()=>O,renderCounterRegistry:()=>M,useRenderCounter:()=>W};for(var y in f)c(p,y,{get:f[y],enumerable:!0});e.exports=h(c({},"__esModule",{value:!0}),p);var g=(a=null!=(r=n("C"))?i(d(r)):{},h(r&&r.__esModule?a:c(a,"default",{value:r,enumerable:!0}),r)),{useRef:w,useEffect:S,isValidElement:b}=g,_=null!=(o=g.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE)?o:g.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,v=Symbol.for("react.memo_cache_sentinel"),C="function"==typeof(null==(l=g.__COMPILER_RUNTIME)?void 0:l.c)?g.__COMPILER_RUNTIME.c:function(e){return g.useMemo(()=>{let t=Array(e);for(let n=0;n<e;n++)t[n]=v;return t[v]=!0,t},[])},$={};["readContext","useCallback","useContext","useEffect","useImperativeHandle","useInsertionEffect","useLayoutEffect","useMemo","useReducer","useRef","useState","useDebugValue","useDeferredValue","useTransition","useMutableSource","useSyncExternalStore","useId","unstable_isNewReconciler","getCacheSignal","getCacheForType","useCacheRefresh"].forEach(e=>{$[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 R(e){return _.ReactCurrentDispatcher.current=e,_.ReactCurrentDispatcher.current}$.useMemoCache=e=>{if(null!=E)return E.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var k=[];function N(e){let t=_.ReactCurrentDispatcher.current;if(0===e){if(k.push(t),1===k.length&&(E=t),t===$)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($)}else if(1===e){let e=k.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");0===k.length&&(E=null),R(e)}else if(2===e)k.push(t),R(E);else if(3===e){let e=k.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 T(e){for(let t=0;t<e.length;t++)e[t]=v}function D(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var M=new Map;function O(){for(let e of M.values())e.forEach(e=>{e.count=0})}function W(e){let t=w(null);null!=t.current&&(t.current.count+=1),S(()=>{if(null==t.current){let n,r={count:0};null==(n=M.get(e))&&(n=new Set,M.set(e,n)),n.add(r),t.current=r}return()=>{var n;let r;null!==t.current&&(n=t.current,null!=(r=M.get(e))&&r.delete(n))}})}var j=new Set;function A(e,t,n,r,a,o){function l(e,t,l,i){let c=`${r}:${o} [${a}] ${n}${l} changed from ${e} to ${t} at depth ${i}`;j.has(c)||(j.add(c),console.error(c))}!function e(t,n,r,a){if(!(a>2)){if(t!==n)if(typeof t!=typeof n)l(`type ${typeof t}`,`type ${typeof n}`,r,a);else if("object"==typeof t){let o=Array.isArray(t),i=Array.isArray(n);if(null===t&&null!==n)l("null",`type ${typeof n}`,r,a);else if(null===n)l(`type ${typeof t}`,"null",r,a);else if(t instanceof Map)if(n instanceof Map)if(t.size!==n.size)l(`Map instance with size ${t.size}`,`Map instance with size ${n.size}`,r,a);else for(let[o,i]of t)n.has(o)?e(i,n.get(o),`${r}.get(${o})`,a+1):l(`Map instance with key ${o}`,`Map instance without key ${o}`,r,a);else l("Map instance","other value",r,a);else if(n instanceof Map)l("other value","Map instance",r,a);else if(t instanceof Set)if(n instanceof Set)if(t.size!==n.size)l(`Set instance with size ${t.size}`,`Set instance with size ${n.size}`,r,a);else for(let e of n)t.has(e)||l(`Set instance without element ${e}`,`Set instance with element ${e}`,r,a);else l("Set instance","other value",r,a);else if(n instanceof Set)l("other value","Set instance",r,a);else if(o||i)if(o!==i)l(`type ${o?"array":"object"}`,`type ${i?"array":"object"}`,r,a);else if(t.length!==n.length)l(`array with length ${t.length}`,`array with length ${n.length}`,r,a);else for(let o=0;o<t.length;o++)e(t[o],n[o],`${r}[${o}]`,a+1);else if(b(t)||b(n))b(t)!==b(n)?l(`type ${b(t)?"React element":"object"}`,`type ${b(n)?"React element":"object"}`,r,a):t.type!==n.type?l(`React element of type ${t.type}`,`React element of type ${n.type}`,r,a):e(t.props,n.props,`[props of ${r}]`,a+1);else{for(let e in n)e in t||l(`object without key ${e}`,`object with key ${e}`,r,a);for(let o in t)o in n?e(t[o],n[o],`${r}.${o}`,a+1):l(`object with key ${o}`,`object without key ${o}`,r,a)}}else{if("function"==typeof t)return;isNaN(t)||isNaN(n)?isNaN(t)!==isNaN(n)&&l(`${isNaN(t)?"NaN":"non-NaN value"}`,`${isNaN(n)?"NaN":"non-NaN value"}`,r,a):t!==n&&l(t,n,r,a)}}}(e,t,"",0)}},p(e,t,n){let r=new WeakMap,a=new WeakMap;function o(e,t,n){let o=t,l=n;if("object"==typeof o&&null!==o&&"$$typeof"in o&&o.$$typeof===Symbol.for("react.context")&&"Provider"in o&&(o=o.Provider),"function"==typeof o&&null!=l.ref&&!o.prototype?.isReactComponent){let t=o,n=r.get(e);n||(n=new WeakMap,r.set(e,n));let a=n.get(t);a||((a=e.forwardRef((e,n)=>t({...e,ref:n}))).displayName=t.displayName??t.name,n.set(t,a)),o=a}if("string"==typeof o&&"boolean"==typeof l.inert&&((l={...l}).inert?l.inert="":delete l.inert),"string"==typeof o)for(let[e,t]of[["fill-rule","fillRule"],["clip-rule","clipRule"]])e in l&&(l={...l,[t]:l[e]},delete l[e]);return"string"==typeof o&&null!=l.ref&&(o=function(e,t){let n=a.get(e);n||(n=new Map,a.set(e,n));let r=n.get(t);if(r)return r;let o=e.forwardRef((n,r)=>{let a=e.useRef(null);if(!a.current||a.current.original!==r){let e;a.current={original:r,callback:t=>{if(null==t&&e){let t=e;e=void 0,t();return}if("function"==typeof r){let n=r(t);e="function"==typeof n?n:void 0}else r&&(r.current=t)}}}return e.createElement(t,{...n,ref:a.current.callback})});return o.displayName=`CanvasHost(${t})`,n.set(t,o),o}(e,o)),{type:o,props:l}}function l(e){let t=(t,n,r)=>{let a=o(e,t,n??{});return e.createElement(a.type,void 0===r?a.props:{...a.props,key:r})};return{jsx:t,jsxs:(t,n,r)=>{let a=o(e,t,n??{}),{children:l,...i}=a.props;return e.createElement(a.type,void 0===r?i:{...i,key:r},...Array.isArray(l)?l:[l])},jsxDEV:t,Fragment:e.Fragment}}function i(e){return{...e,createElement:(t,n,...r)=>{let a=o(e,t,n??{});return e.createElement(a.type,a.props,...r)},cloneElement:(t,n,...r)=>{let a=e.cloneElement(t,n??void 0,...r),l=a.ref,i=o(e,a.type,{...a.props,ref:l});return i.type===a.type&&"string"!=typeof a.type?a:e.createElement(i.type,{...i.props,key:a.key})}}}n.d(t,{MA:()=>l,YJ:()=>i})},C(e,t,n){n.r(t);let r=(0,n("p").YJ)(window.React),{Children:a,Component:o,Fragment:l,Profiler:i,PureComponent:c,StrictMode:s,Suspense:u,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:d,act:m,cloneElement:h,createContext:p,createElement:f,createFactory:y,createRef:g,forwardRef:w,isValidElement:S,lazy:b,memo:_,startTransition:v,unstable_act:C,useCallback:$,useContext:E,useDebugValue:R,useDeferredValue:k,useEffect:N,useId:T,useImperativeHandle:D,useInsertionEffect:M,useLayoutEffect:O,useMemo:W,useReducer:j,useRef:A,useState:I,useSyncExternalStore:x,useTransition:L,version:P,use:U}=r;n.d(t,{},{Children:a,Component:o,Fragment:l,Profiler:i,PureComponent:c,StrictMode:s,Suspense:u,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:d,act:m,cloneElement:h,createContext:p,createElement:f,createFactory:y,createRef:g,default:r,forwardRef:w,isValidElement:S,lazy:b,memo:_,startTransition:v,unstable_act:C,use:U,useCallback:$,useContext:E,useDebugValue:R,useDeferredValue:k,useEffect:N,useId:T,useImperativeHandle:D,useInsertionEffect:M,useLayoutEffect:O,useMemo:W,useReducer:j,useRef:A,useState:I,useSyncExternalStore:x,useTransition:L,version:P})}},t={};function n(r){var a=t[r];if(void 0!==a)return a.exports;var o=t[r]={exports:{}};return e[r](o,o.exports,n),o.exports}n.d=(e,t,r)=>{var a=(t,r)=>{for(var a in t)n.o(t,a)&&!n.o(e,a)&&Object.defineProperty(e,a,{enumerable:!0,[r]:t[a]})};a(t,"get"),a(r,"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:r,Fragment:a}=(0,n("p").MA)(window.React);var o=n("vD"),l=n("C");let i=window.WallarmDS.AssistantMessage,c=window.WallarmDS.AssistantMessageContent,s=window.WallarmDS.Chat,u=window.WallarmDS.ChatFooter,d=window.WallarmDS.ChatHeader,m=window.WallarmDS.ChatHeaderTitle,h=window.WallarmDS.ChatSuggestion,p=window.WallarmDS.ChatSuggestions,f=window.WallarmDS.ChatInput,y=window.WallarmDS.ChatInputSubmit,g=window.WallarmDS.ChatInputTextarea,w=window.WallarmDS.MessageActions,S=window.WallarmDS.MessageTimestamp,b=window.WallarmDS.UserMessage,_=window.WallarmDS.UserMessageBubble,v=window.WallarmDS.Conversation,C=window.WallarmDS.ConversationContent,$=window.WallarmDS.ConversationEmptyState,E=window.WallarmDS.ConversationScrollButton,R={title:"AI/Conversation",component:v,subcomponents:{ConversationContent:C,ConversationEmptyState:$,ConversationScrollButton:E},parameters:{layout:"centered",docs:{description:{component:"Stick-to-bottom for the Wally log: `Conversation` takes `ChatBody`’s place between `ChatHeader` and `ChatFooter`, and `ConversationContent` renders the built `ChatBody` (`role=log`) as the scroller. While an answer streams the view follows it; once the reader scrolls up it stops following and `ConversationScrollButton` appears. Scrolling back down, clicking the button or changing `autoScrollKey` (pass the last user message id) re-sticks. `ConversationEmptyState` is the greeting for an empty chat, rendered inside the scroller. The scroll button is the stock small icon-only Button, floated at the bottom centre."}}}},k=["/api/login","/api/orders","/graphql","/api/users","/checkout","/search"].map((e,t)=>({id:`u${t}`,question:`Why were requests to ${e} blocked?`,answer:[`Wallarm blocked ${120*(t+1)} attack attempts against ${e} in the last 24 hours.`,"Most of them were SQL injection probes from a single /24 network; none reached the application."]})),N=["Wallarm blocked 1,204 SQL injection attempts against /api/login last night.","Almost all of them came from 203.0.113.0/24, peaking at 03:00 UTC.",'The matched rule is "SQLi in query parameters"; it has been in blocking mode since June.',"No request reached the application, and no credentials were exposed.","You can deny the network in IP lists, or keep monitoring: the rate is already dropping."];function T(t){return e("p",{children:t},t)}function D(n,r){return t(l.Fragment,{children:[t(b,{"data-testid":`conversation--user-message-${r}`,children:[e(_,{children:n.question}),e(w,{children:e(S,{dateTime:"2026-10-21T09:41:00Z",children:"2m ago"})})]}),t(i,{"data-testid":`conversation--assistant-message-${r}`,children:[e(c,{children:n.answer.map(T)}),e(w,{visible:!0,children:e(S,{dateTime:"2026-10-21T09:42:00Z",children:"1m ago"})})]})]},n.id)}function M(e){return e+1}function O(t){return e("p",{children:t},t)}function W(n,r){return t(l.Fragment,{children:[t(b,{"data-testid":`conversation--user-message-${r}`,children:[e(_,{children:n.question}),e(w,{children:e(S,{dateTime:"2026-10-21T09:41:00Z",children:"2m ago"})})]}),t(i,{"data-testid":`conversation--assistant-message-${r}`,children:[e(c,{children:n.answer.map(O)}),e(w,{visible:!0,children:e(S,{dateTime:"2026-10-21T09:42:00Z",children:"1m ago"})})]})]},n.id)}function j(t){return e("p",{children:t},t)}function A(t){return e("p",{children:t},t)}function I(n,r){return t(l.Fragment,{children:[t(b,{"data-testid":`conversation--user-message-${r}`,children:[e(_,{children:n.question}),e(w,{children:e(S,{dateTime:"2026-10-21T09:41:00Z",children:"2m ago"})})]}),t(i,{"data-testid":`conversation--assistant-message-${r}`,children:[e(c,{children:n.answer.map(A)}),e(w,{visible:!0,children:e(S,{dateTime:"2026-10-21T09:42:00Z",children:"1m ago"})})]})]},n.id)}let x=[{name:"Default",story:()=>{let n,r,a,i,c,h,p,w,S,b,_=(0,o.c)(17),[$,R]=(0,l.useState)(k),[T,M]=(0,l.useState)(""),O=$[$.length-1]?.id;_[0]===Symbol.for("react.memo_cache_sentinel")?(n=e=>{R(t=>[...t,{id:`u${t.length}`,question:e,answer:N.slice(0,2)}]),M("")},_[0]=n):n=_[0];let W=n;return _[1]===Symbol.for("react.memo_cache_sentinel")?(r=e(d,{children:e(m,{})}),_[1]=r):r=_[1],_[2]!==$?(a=$.map(D),_[2]=$,_[3]=a):a=_[3],_[4]!==a?(i=e(C,{children:a}),_[4]=a,_[5]=i):i=_[5],_[6]===Symbol.for("react.memo_cache_sentinel")?(c=e(E,{}),_[6]=c):c=_[6],_[7]!==O||_[8]!==i?(h=t(v,{autoScrollKey:O,children:[i,c]}),_[7]=O,_[8]=i,_[9]=h):h=_[9],_[10]===Symbol.for("react.memo_cache_sentinel")?(p=e(g,{}),w=e(y,{}),_[10]=p,_[11]=w):(p=_[10],w=_[11]),_[12]!==T?(S=e(u,{children:t(f,{value:T,onValueChange:M,onSubmit:W,children:[p,w]})}),_[12]=T,_[13]=S):S=_[13],_[14]!==h||_[15]!==S?(b=e("div",{className:"h-640 w-480",children:t(s,{"data-testid":"chat",children:[r,h,S]})}),_[14]=h,_[15]=S,_[16]=b):b=_[16],b},meta:R},{name:"Empty",story:()=>{let n,r,a,i,c,w,S=(0,o.c)(7),[b,_]=(0,l.useState)("");S[0]===Symbol.for("react.memo_cache_sentinel")?(n=()=>{_("")},S[0]=n):n=S[0];let R=n;return S[1]===Symbol.for("react.memo_cache_sentinel")?(r=e(d,{children:e(m,{})}),S[1]=r):r=S[1],S[2]===Symbol.for("react.memo_cache_sentinel")?(a=t(v,{children:[e(C,{children:e($,{children:t(p,{placement:"greeting",label:"Suggestions",children:[e(h,{"data-testid":"chat--suggestion-0",children:"Why was this request blocked?"}),e(h,{"data-testid":"chat--suggestion-1",children:"Show top attacked endpoints"})]})})}),e(E,{})]}),S[2]=a):a=S[2],S[3]===Symbol.for("react.memo_cache_sentinel")?(i=e(g,{}),c=e(y,{}),S[3]=i,S[4]=c):(i=S[3],c=S[4]),S[5]!==b?(w=e("div",{className:"h-640 w-480",children:t(s,{"data-testid":"chat",background:"strong",children:[r,a,e(u,{children:t(f,{value:b,onValueChange:_,onSubmit:R,children:[i,c]})})]})}),S[5]=b,S[6]=w):w=S[6],w},meta:R},{name:"Streaming",story:()=>{let n,r,a,u,h,p,f,y,g,w,S=(0,o.c)(18),[b,_]=(0,l.useState)(1),$=b<N.length;return S[0]!==$?(n=()=>{if(!$)return;let e=setInterval(()=>_(M),600);return()=>clearInterval(e)},r=[$],S[0]=$,S[1]=n,S[2]=r):(n=S[1],r=S[2]),(0,l.useEffect)(n,r),S[3]===Symbol.for("react.memo_cache_sentinel")?(a=e(d,{children:e(m,{})}),S[3]=a):a=S[3],S[4]===Symbol.for("react.memo_cache_sentinel")?(u=k.map(W),S[4]=u):u=S[4],S[5]!==b?(h=N.slice(0,b).map(j),S[5]=b,S[6]=h):h=S[6],S[7]!==h?(p=e(c,{children:h}),S[7]=h,S[8]=p):p=S[8],S[9]!==$||S[10]!==p?(f=e(i,{"data-testid":"conversation--streaming-message","aria-busy":$,children:p}),S[9]=$,S[10]=p,S[11]=f):f=S[11],S[12]!==$||S[13]!==f?(y=t(C,{"aria-busy":$,children:[u,f]}),S[12]=$,S[13]=f,S[14]=y):y=S[14],S[15]===Symbol.for("react.memo_cache_sentinel")?(g=e(E,{}),S[15]=g):g=S[15],S[16]!==y?(w=e("div",{className:"h-640 w-480",children:t(s,{"data-testid":"chat",children:[a,t(v,{children:[y,g]})]})}),S[16]=y,S[17]=w):w=S[17],w},meta:R},{name:"Analytics",story:()=>{let n,r,a=(0,o.c)(2);return a[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(d,{children:e(m,{})}),a[0]=n):n=a[0],a[1]===Symbol.for("react.memo_cache_sentinel")?(r=e("div",{className:"h-640 w-480",children:t(s,{"data-testid":"chat",children:[n,t(v,{children:[e(C,{children:k.map(I)}),e(E,{"data-analytics-id":"WALLY_SCROLL_TO_LATEST"})]})]})}),a[1]=r):r=a[1],r},meta:R}];function L({entry:e}){let{story:t,meta:n}=e,r={...n.args,...t.args},a="function"==typeof t||t.$$typeof?t:t.render||n.render||n.component,o=()=>l.default.createElement(a,r),i={args:r,globals:{theme:"light"},parameters:{...n.parameters,...t.parameters},viewMode:"story"};for(let e of[...n.decorators||[],...t.decorators||[]].reverse()){let t=o;o=()=>e(t,i)}return l.default.createElement("section",{"data-preview-story":e.name,className:"p-16"},l.default.createElement("h2",{className:"text-sm mb-12"},e.name),l.default.createElement(o))}window.WallarmPreview={mount(e){let t=window.ReactDOM.createRoot(e);return t.render(l.default.createElement(window.WallarmDS.Root,null,x.map((e,t)=>l.default.createElement(L,{key:t,entry:e})))),t}}})();