@wallarm-org/design-system 3.2.0 → 3.3.0

package/dist/components/ApprovalCard/ApprovalCardContent.js

@@ -0,0 +1,50 @@
+import { jsx } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
+import { approvalCardContentVariants } from "./classes.js";
+const ApprovalCardContent = (t0)=>{
+    const $ = c(12);
+    let className;
+    let props;
+    let ref;
+    let testIdProp;
+    if ($[0] !== t0) {
+        ({ ref, className, "data-testid": testIdProp, ...props } = t0);
+        $[0] = t0;
+        $[1] = className;
+        $[2] = props;
+        $[3] = ref;
+        $[4] = testIdProp;
+    } else {
+        className = $[1];
+        props = $[2];
+        ref = $[3];
+        testIdProp = $[4];
+    }
+    const testId = useTestId("content", testIdProp);
+    let t1;
+    if ($[5] !== className) {
+        t1 = cn(approvalCardContentVariants(), className);
+        $[5] = className;
+        $[6] = t1;
+    } else t1 = $[6];
+    let t2;
+    if ($[7] !== props || $[8] !== ref || $[9] !== t1 || $[10] !== testId) {
+        t2 = /*#__PURE__*/ jsx("div", {
+            ...props,
+            ref: ref,
+            "data-slot": "approval-card-content",
+            "data-testid": testId,
+            className: t1
+        });
+        $[7] = props;
+        $[8] = ref;
+        $[9] = t1;
+        $[10] = testId;
+        $[11] = t2;
+    } else t2 = $[11];
+    return t2;
+};
+ApprovalCardContent.displayName = "ApprovalCardContent";
+export { ApprovalCardContent };

package/dist/components/ApprovalCard/classes.d.ts

@@ -0,0 +1,10 @@
+export declare const approvalCardVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const approvalCardCaptionVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const approvalCardSurfaceVariants: (props?: ({
+    status?: "approved" | "pending" | "rejected" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const approvalCardStatusIconVariants: (props?: ({
+    status?: "approved" | "rejected" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const approvalCardContentVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const approvalCardActionsVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;

package/dist/components/ApprovalCard/classes.js

@@ -0,0 +1,26 @@
+import { cva } from "class-variance-authority";
+const approvalCardVariants = cva('flex flex-col');
+const approvalCardCaptionVariants = cva("px-16 py-2 font-mono text-xs text-text-secondary [font-feature-settings:'liga'_0]");
+const approvalCardSurfaceVariants = cva('rounded-16 border border-border-primary-light', {
+    variants: {
+        status: {
+            pending: 'bg-bg-surface-2',
+            approved: 'flex h-44 items-center gap-8 bg-bg-light-primary px-12 text-sm text-text-secondary',
+            rejected: 'flex h-44 items-center gap-8 bg-bg-light-primary px-12 text-sm text-text-secondary'
+        }
+    },
+    defaultVariants: {
+        status: 'pending'
+    }
+});
+const approvalCardStatusIconVariants = cva('', {
+    variants: {
+        status: {
+            approved: 'text-icon-success',
+            rejected: 'text-icon-danger'
+        }
+    }
+});
+const approvalCardContentVariants = cva('flex flex-col gap-8 px-16 pt-12 text-sm text-text-primary break-words');
+const approvalCardActionsVariants = cva('flex flex-wrap items-center gap-8 px-16 py-12');
+export { approvalCardActionsVariants, approvalCardCaptionVariants, approvalCardContentVariants, approvalCardStatusIconVariants, approvalCardSurfaceVariants, approvalCardVariants };

package/dist/components/ApprovalCard/index.d.ts

@@ -0,0 +1,3 @@
+export { ApprovalCard, type ApprovalCardProps, type ApprovalCardStatus } from './ApprovalCard.js';
+export { ApprovalCardActions, type ApprovalCardActionsProps } from './ApprovalCardActions.js';
+export { ApprovalCardContent, type ApprovalCardContentProps } from './ApprovalCardContent.js';

package/dist/components/ApprovalCard/index.js

@@ -0,0 +1,3 @@
+export { ApprovalCard } from "./ApprovalCard.js";
+export { ApprovalCardActions } from "./ApprovalCardActions.js";
+export { ApprovalCardContent } from "./ApprovalCardContent.js";

package/dist/components/AssistantMessage/AssistantMessage.d.ts

@@ -0,0 +1,12 @@
+import type { FC, HTMLAttributes, Ref } from 'react';
+import { type TestableProps } from '../../utils/testId.js';
+export interface AssistantMessageProps extends HTMLAttributes<HTMLElement>, TestableProps {
+    ref?: Ref<HTMLElement>;
+}
+/**
+ * A message from Wally: an `<article>` named "Wally" that stacks an optional
+ * `ChainOfThought`, an optional `ApprovalCard`, the `AssistantMessageContent` and a
+ * `MessageActions` row. Set `aria-busy` while the answer streams. Inside a cascade its
+ * test id is `<base>--assistant-message`.
+ */
+export declare const AssistantMessage: FC<AssistantMessageProps>;

package/dist/components/AssistantMessage/AssistantMessage.js

@@ -0,0 +1,66 @@
+import { jsx } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { cn } from "../../utils/cn.js";
+import { TestIdProvider, useTestId } from "../../utils/testId.js";
+import { assistantMessageVariants } from "./classes.js";
+const AssistantMessage = (t0)=>{
+    const $ = c(17);
+    let children;
+    let className;
+    let props;
+    let ref;
+    let testIdProp;
+    if ($[0] !== t0) {
+        ({ ref, className, children, "data-testid": testIdProp, ...props } = t0);
+        $[0] = t0;
+        $[1] = children;
+        $[2] = className;
+        $[3] = props;
+        $[4] = ref;
+        $[5] = testIdProp;
+    } else {
+        children = $[1];
+        className = $[2];
+        props = $[3];
+        ref = $[4];
+        testIdProp = $[5];
+    }
+    const testId = useTestId("assistant-message", testIdProp);
+    let t1;
+    if ($[6] !== className) {
+        t1 = cn(assistantMessageVariants(), className);
+        $[6] = className;
+        $[7] = t1;
+    } else t1 = $[7];
+    let t2;
+    if ($[8] !== children || $[9] !== testId) {
+        t2 = /*#__PURE__*/ jsx(TestIdProvider, {
+            value: testId,
+            children: children
+        });
+        $[8] = children;
+        $[9] = testId;
+        $[10] = t2;
+    } else t2 = $[10];
+    let t3;
+    if ($[11] !== props || $[12] !== ref || $[13] !== t1 || $[14] !== t2 || $[15] !== testId) {
+        t3 = /*#__PURE__*/ jsx("article", {
+            "aria-label": "Wally",
+            ...props,
+            ref: ref,
+            "data-slot": "assistant-message",
+            "data-testid": testId,
+            className: t1,
+            children: t2
+        });
+        $[11] = props;
+        $[12] = ref;
+        $[13] = t1;
+        $[14] = t2;
+        $[15] = testId;
+        $[16] = t3;
+    } else t3 = $[16];
+    return t3;
+};
+AssistantMessage.displayName = "AssistantMessage";
+export { AssistantMessage };

package/dist/components/AssistantMessage/AssistantMessageContent.d.ts

@@ -0,0 +1,10 @@
+import type { FC, HTMLAttributes, Ref } from 'react';
+import { type TestableProps } from '../../utils/testId.js';
+export interface AssistantMessageContentProps extends HTMLAttributes<HTMLDivElement>, TestableProps {
+    ref?: Ref<HTMLDivElement>;
+}
+/**
+ * The answer body: spaces and styles markdown blocks (14/24 paragraphs, 16/24 headings, lists).
+ * Put `AssistantMessageMarkdown` inside it (WallyAssistant's default), or your own renderer's blocks.
+ */
+export declare const AssistantMessageContent: FC<AssistantMessageContentProps>;

package/dist/components/AssistantMessage/AssistantMessageContent.js

@@ -0,0 +1,50 @@
+import { jsx } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
+import { assistantMessageContentVariants } from "./classes.js";
+const AssistantMessageContent = (t0)=>{
+    const $ = c(12);
+    let className;
+    let props;
+    let ref;
+    let testIdProp;
+    if ($[0] !== t0) {
+        ({ ref, className, "data-testid": testIdProp, ...props } = t0);
+        $[0] = t0;
+        $[1] = className;
+        $[2] = props;
+        $[3] = ref;
+        $[4] = testIdProp;
+    } else {
+        className = $[1];
+        props = $[2];
+        ref = $[3];
+        testIdProp = $[4];
+    }
+    const testId = useTestId("content", testIdProp);
+    let t1;
+    if ($[5] !== className) {
+        t1 = cn(assistantMessageContentVariants(), className);
+        $[5] = className;
+        $[6] = t1;
+    } else t1 = $[6];
+    let t2;
+    if ($[7] !== props || $[8] !== ref || $[9] !== t1 || $[10] !== testId) {
+        t2 = /*#__PURE__*/ jsx("div", {
+            ...props,
+            ref: ref,
+            "data-slot": "assistant-message-content",
+            "data-testid": testId,
+            className: t1
+        });
+        $[7] = props;
+        $[8] = ref;
+        $[9] = t1;
+        $[10] = testId;
+        $[11] = t2;
+    } else t2 = $[11];
+    return t2;
+};
+AssistantMessageContent.displayName = "AssistantMessageContent";
+export { AssistantMessageContent };

package/dist/components/AssistantMessage/AssistantMessageError.d.ts

@@ -0,0 +1,13 @@
+import type { FC, HTMLAttributes, ReactNode, Ref } from 'react';
+import { type TestableProps } from '../../utils/testId.js';
+export interface AssistantMessageErrorProps extends HTMLAttributes<HTMLDivElement>, TestableProps {
+    ref?: Ref<HTMLDivElement>;
+    /** Trailing control, e.g. a Retry Button (yours, so analytics land on it). Rendered inside the error's
+     *  test-id cascade: read `useTestId('<slot>')` in the action to get `<error>--<slot>` — `Button` doesn't. */
+    action?: ReactNode;
+}
+/**
+ * A failed answer, announced as `role='alert'`: a danger icon, the message and an optional
+ * trailing `action` such as Retry. Inside a cascade its test id is `<base>--error`.
+ */
+export declare const AssistantMessageError: FC<AssistantMessageErrorProps>;

package/dist/components/AssistantMessage/AssistantMessageError.js

@@ -0,0 +1,93 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { OctagonAlert } from "../../icons/index.js";
+import { cn } from "../../utils/cn.js";
+import { TestIdProvider, useTestId } from "../../utils/testId.js";
+import { assistantMessageErrorVariants } from "./classes.js";
+const AssistantMessageError = (t0)=>{
+    const $ = c(22);
+    let action;
+    let children;
+    let className;
+    let props;
+    let ref;
+    let testIdProp;
+    if ($[0] !== t0) {
+        ({ ref, className, children, action, "data-testid": testIdProp, ...props } = t0);
+        $[0] = t0;
+        $[1] = action;
+        $[2] = children;
+        $[3] = className;
+        $[4] = props;
+        $[5] = ref;
+        $[6] = testIdProp;
+    } else {
+        action = $[1];
+        children = $[2];
+        className = $[3];
+        props = $[4];
+        ref = $[5];
+        testIdProp = $[6];
+    }
+    const testId = useTestId("error", testIdProp);
+    let t1;
+    if ($[7] !== className) {
+        t1 = cn(assistantMessageErrorVariants(), className);
+        $[7] = className;
+        $[8] = t1;
+    } else t1 = $[8];
+    let t2;
+    if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+        t2 = /*#__PURE__*/ jsx(OctagonAlert, {
+            size: "md",
+            "aria-hidden": true,
+            className: "mt-2 shrink-0 text-icon-danger"
+        });
+        $[9] = t2;
+    } else t2 = $[9];
+    let t3;
+    if ($[10] !== children) {
+        t3 = /*#__PURE__*/ jsx("div", {
+            className: "min-w-0 flex-1 break-words",
+            children: children
+        });
+        $[10] = children;
+        $[11] = t3;
+    } else t3 = $[11];
+    let t4;
+    if ($[12] !== action || $[13] !== testId) {
+        t4 = /*#__PURE__*/ jsx(TestIdProvider, {
+            value: testId,
+            children: action
+        });
+        $[12] = action;
+        $[13] = testId;
+        $[14] = t4;
+    } else t4 = $[14];
+    let t5;
+    if ($[15] !== props || $[16] !== ref || $[17] !== t1 || $[18] !== t3 || $[19] !== t4 || $[20] !== testId) {
+        t5 = /*#__PURE__*/ jsxs("div", {
+            role: "alert",
+            ...props,
+            ref: ref,
+            "data-slot": "assistant-message-error",
+            "data-testid": testId,
+            className: t1,
+            children: [
+                t2,
+                t3,
+                t4
+            ]
+        });
+        $[15] = props;
+        $[16] = ref;
+        $[17] = t1;
+        $[18] = t3;
+        $[19] = t4;
+        $[20] = testId;
+        $[21] = t5;
+    } else t5 = $[21];
+    return t5;
+};
+AssistantMessageError.displayName = "AssistantMessageError";
+export { AssistantMessageError };

package/dist/components/AssistantMessage/AssistantMessageLoader.d.ts

@@ -0,0 +1,13 @@
+import type { FC, HTMLAttributes, ReactNode, Ref } from 'react';
+import { type TestableProps } from '../../utils/testId.js';
+export interface AssistantMessageLoaderProps extends HTMLAttributes<HTMLDivElement>, TestableProps {
+    ref?: Ref<HTMLDivElement>;
+    /** Default 'Working...'. */
+    children?: ReactNode;
+}
+/**
+ * The "Working..." row shown before the first output: a dashed circle and a shimmering label
+ * (static under reduced motion), announced as `role='status'`. Inside a cascade its test id is
+ * `<base>--loader`.
+ */
+export declare const AssistantMessageLoader: FC<AssistantMessageLoaderProps>;

package/dist/components/AssistantMessage/AssistantMessageLoader.js

@@ -0,0 +1,88 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { CircleDashed } from "../../icons/index.js";
+import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
+import { chainOfThoughtIconVariants, chainOfThoughtLabelVariants } from "../ChainOfThought/classes.js";
+import { assistantMessageLoaderVariants } from "./classes.js";
+const AssistantMessageLoader = (t0)=>{
+    const $ = c(18);
+    let children;
+    let className;
+    let props;
+    let ref;
+    let testIdProp;
+    if ($[0] !== t0) {
+        ({ ref, className, children, "data-testid": testIdProp, ...props } = t0);
+        $[0] = t0;
+        $[1] = children;
+        $[2] = className;
+        $[3] = props;
+        $[4] = ref;
+        $[5] = testIdProp;
+    } else {
+        children = $[1];
+        className = $[2];
+        props = $[3];
+        ref = $[4];
+        testIdProp = $[5];
+    }
+    const testId = useTestId("loader", testIdProp);
+    let t1;
+    if ($[6] !== className) {
+        t1 = cn(assistantMessageLoaderVariants(), className);
+        $[6] = className;
+        $[7] = t1;
+    } else t1 = $[7];
+    let t2;
+    let t3;
+    if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+        t2 = /*#__PURE__*/ jsx("span", {
+            "aria-hidden": true,
+            className: chainOfThoughtIconVariants(),
+            children: /*#__PURE__*/ jsx(CircleDashed, {})
+        });
+        t3 = chainOfThoughtLabelVariants({
+            status: "running"
+        });
+        $[8] = t2;
+        $[9] = t3;
+    } else {
+        t2 = $[8];
+        t3 = $[9];
+    }
+    const t4 = children ?? "Working...";
+    let t5;
+    if ($[10] !== t4) {
+        t5 = /*#__PURE__*/ jsx("span", {
+            className: t3,
+            children: t4
+        });
+        $[10] = t4;
+        $[11] = t5;
+    } else t5 = $[11];
+    let t6;
+    if ($[12] !== props || $[13] !== ref || $[14] !== t1 || $[15] !== t5 || $[16] !== testId) {
+        t6 = /*#__PURE__*/ jsxs("div", {
+            role: "status",
+            ...props,
+            ref: ref,
+            "data-slot": "assistant-message-loader",
+            "data-testid": testId,
+            className: t1,
+            children: [
+                t2,
+                t5
+            ]
+        });
+        $[12] = props;
+        $[13] = ref;
+        $[14] = t1;
+        $[15] = t5;
+        $[16] = testId;
+        $[17] = t6;
+    } else t6 = $[17];
+    return t6;
+};
+AssistantMessageLoader.displayName = "AssistantMessageLoader";
+export { AssistantMessageLoader };

package/dist/components/AssistantMessage/AssistantMessageMarkdown.d.ts

@@ -0,0 +1,71 @@
+import { type ComponentType, type FC, type ReactNode } from 'react';
+import { type AssistantMessageMarkdownCodeBlockProps } from './AssistantMessageMarkdownCodeBlock.js';
+import { type AssistantMessageMarkdownInlineCodeProps } from './AssistantMessageMarkdownInlineCode.js';
+import { type AssistantMessageMarkdownLinkProps } from './AssistantMessageMarkdownLink.js';
+/** Same literals as `ChatMarkdownProps.variant`. 'approval' renders like 'answer'. */
+export type AssistantMessageMarkdownVariant = 'answer' | 'chain-of-thought' | 'approval';
+type Align = 'left' | 'center' | 'right';
+interface WithChildren {
+    children?: ReactNode;
+}
+/** One entry per element. The renderer passes only these props; `href` and `src` are already allow-listed. */
+export interface AssistantMessageMarkdownComponents {
+    p: ComponentType<WithChildren>;
+    h1: ComponentType<WithChildren>;
+    h2: ComponentType<WithChildren>;
+    h3: ComponentType<WithChildren>;
+    h4: ComponentType<WithChildren>;
+    h5: ComponentType<WithChildren>;
+    h6: ComponentType<WithChildren>;
+    strong: ComponentType<WithChildren>;
+    em: ComponentType<WithChildren>;
+    del: ComponentType<WithChildren>;
+    blockquote: ComponentType<WithChildren>;
+    ul: ComponentType<WithChildren>;
+    ol: ComponentType<WithChildren & {
+        start?: number;
+    }>;
+    /** `checked` is set for GFM task items only. */
+    li: ComponentType<WithChildren & {
+        checked?: boolean;
+    }>;
+    hr: ComponentType;
+    table: ComponentType<WithChildren>;
+    thead: ComponentType<WithChildren>;
+    tbody: ComponentType<WithChildren>;
+    tr: ComponentType<WithChildren>;
+    th: ComponentType<WithChildren & {
+        align?: Align;
+    }>;
+    td: ComponentType<WithChildren & {
+        align?: Align;
+    }>;
+    a: ComponentType<AssistantMessageMarkdownLinkProps>;
+    inlineCode: ComponentType<AssistantMessageMarkdownInlineCodeProps>;
+    codeBlock: ComponentType<AssistantMessageMarkdownCodeBlockProps>;
+    /** Default: the alt text. An untrusted image URL loads on render (tracking pixel, data exfiltration). */
+    img: ComponentType<{
+        src: string;
+        alt: string;
+        title?: string;
+    }>;
+}
+export interface AssistantMessageMarkdownProps {
+    /** Untrusted GFM: the whole text so far (a snapshot, never a delta). */
+    text: string;
+    /** The text is still growing: repair the unfinished last block, hold back a half-typed table or an empty fence,
+     *  keep an open fence unhighlighted. Default false. */
+    streaming?: boolean;
+    /** Where it renders. 'chain-of-thought': muted, non-copyable inline code and 12px links. Default 'answer'. */
+    variant?: AssistantMessageMarkdownVariant;
+    /** Element overrides merged over the defaults. Module scope: a new object re-renders every block. */
+    components?: Partial<AssistantMessageMarkdownComponents>;
+}
+/**
+ * Untrusted GFM (an AG-UI `AssistantMessage.content` snapshot) as DS elements. It renders no wrapper: its blocks
+ * are direct children of `AssistantMessageContent`, a `ChainOfThoughtStep` body or `ApprovalCardContent`, which
+ * space and style them. No raw HTML, http/https/mailto/relative links only, no images. The default
+ * `ChatViewConfig.markdown`; its props are a subset of `ChatMarkdownProps`.
+ */
+export declare const AssistantMessageMarkdown: FC<AssistantMessageMarkdownProps>;
+export {};