@wallarm-org/design-system 3.2.0 → 3.3.0

package/dist/components/ChatInput/ChatInputSubmit.js

@@ -0,0 +1,175 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { useId } from "react";
+import { ArrowUp, CircleStop } from "../../icons/index.js";
+import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
+import { Button } from "../Button/index.js";
+import { Kbd } from "../Kbd/index.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../Tooltip/index.js";
+import { useChatInputContext } from "./ChatInputContext.js";
+const ChatInputSubmit = (t0)=>{
+    const $ = c(47);
+    let className;
+    let disabledProp;
+    let id;
+    let onClick;
+    let ref;
+    let rest;
+    let t1;
+    let t2;
+    let testIdProp;
+    if ($[0] !== t0) {
+        ({ ref, id, sendLabel: t1, stopLabel: t2, className, disabled: disabledProp, onClick, "data-testid": testIdProp, ...rest } = t0);
+        $[0] = t0;
+        $[1] = className;
+        $[2] = disabledProp;
+        $[3] = id;
+        $[4] = onClick;
+        $[5] = ref;
+        $[6] = rest;
+        $[7] = t1;
+        $[8] = t2;
+        $[9] = testIdProp;
+    } else {
+        className = $[1];
+        disabledProp = $[2];
+        id = $[3];
+        onClick = $[4];
+        ref = $[5];
+        rest = $[6];
+        t1 = $[7];
+        t2 = $[8];
+        testIdProp = $[9];
+    }
+    const sendLabel = void 0 === t1 ? "Send" : t1;
+    const stopLabel = void 0 === t2 ? "Stop response" : t2;
+    const testId = useTestId("submit", testIdProp);
+    const { value, isRunning, disabled, onStop } = useChatInputContext();
+    const autoId = useId();
+    const triggerId = id ?? autoId;
+    let t3;
+    if ($[10] !== isRunning || $[11] !== onClick || $[12] !== onStop) {
+        t3 = (event)=>{
+            onClick?.(event);
+            if (event.defaultPrevented || !isRunning) return;
+            event.preventDefault();
+            onStop?.();
+            event.currentTarget.form?.querySelector("textarea")?.focus();
+        };
+        $[10] = isRunning;
+        $[11] = onClick;
+        $[12] = onStop;
+        $[13] = t3;
+    } else t3 = $[13];
+    const handleClick = t3;
+    const t4 = !isRunning;
+    let t5;
+    if ($[14] !== triggerId) {
+        t5 = {
+            trigger: triggerId
+        };
+        $[14] = triggerId;
+        $[15] = t5;
+    } else t5 = $[15];
+    const t6 = isRunning ? stopLabel : sendLabel;
+    const t7 = isRunning ? "button" : "submit";
+    const t8 = isRunning ? "secondary" : "primary";
+    const t9 = isRunning ? "neutral" : "brand";
+    let t10;
+    if ($[16] !== disabled || $[17] !== disabledProp || $[18] !== isRunning || $[19] !== value) {
+        t10 = disabled || disabledProp || !isRunning && !value.trim();
+        $[16] = disabled;
+        $[17] = disabledProp;
+        $[18] = isRunning;
+        $[19] = value;
+        $[20] = t10;
+    } else t10 = $[20];
+    let t11;
+    if ($[21] !== className) {
+        t11 = cn("ms-auto", className);
+        $[21] = className;
+        $[22] = t11;
+    } else t11 = $[22];
+    let t12;
+    if ($[23] !== isRunning) {
+        t12 = isRunning ? /*#__PURE__*/ jsx(CircleStop, {}) : /*#__PURE__*/ jsx(ArrowUp, {});
+        $[23] = isRunning;
+        $[24] = t12;
+    } else t12 = $[24];
+    let t13;
+    if ($[25] !== handleClick || $[26] !== ref || $[27] !== rest || $[28] !== t10 || $[29] !== t11 || $[30] !== t12 || $[31] !== t6 || $[32] !== t7 || $[33] !== t8 || $[34] !== t9 || $[35] !== testId || $[36] !== triggerId) {
+        t13 = /*#__PURE__*/ jsx(TooltipTrigger, {
+            asChild: true,
+            children: /*#__PURE__*/ jsx(Button, {
+                "aria-label": t6,
+                ...rest,
+                ref: ref,
+                id: triggerId,
+                type: t7,
+                variant: t8,
+                color: t9,
+                size: "small",
+                disabled: t10,
+                onClick: handleClick,
+                "data-slot": "chat-input-submit",
+                "data-testid": testId,
+                className: t11,
+                children: t12
+            })
+        });
+        $[25] = handleClick;
+        $[26] = ref;
+        $[27] = rest;
+        $[28] = t10;
+        $[29] = t11;
+        $[30] = t12;
+        $[31] = t6;
+        $[32] = t7;
+        $[33] = t8;
+        $[34] = t9;
+        $[35] = testId;
+        $[36] = triggerId;
+        $[37] = t13;
+    } else t13 = $[37];
+    let t14;
+    if ($[38] === Symbol.for("react.memo_cache_sentinel")) {
+        t14 = /*#__PURE__*/ jsx(Kbd, {
+            children: "Esc"
+        });
+        $[38] = t14;
+    } else t14 = $[38];
+    let t15;
+    if ($[39] !== stopLabel) {
+        t15 = /*#__PURE__*/ jsxs(TooltipContent, {
+            children: [
+                stopLabel,
+                " ",
+                t14
+            ]
+        });
+        $[39] = stopLabel;
+        $[40] = t15;
+    } else t15 = $[40];
+    let t16;
+    if ($[41] !== t13 || $[42] !== t15 || $[43] !== t4 || $[44] !== t5 || $[45] !== testId) {
+        t16 = /*#__PURE__*/ jsxs(Tooltip, {
+            disabled: t4,
+            ids: t5,
+            "data-testid": testId,
+            children: [
+                t13,
+                t15
+            ]
+        });
+        $[41] = t13;
+        $[42] = t15;
+        $[43] = t4;
+        $[44] = t5;
+        $[45] = testId;
+        $[46] = t16;
+    } else t16 = $[46];
+    return t16;
+};
+ChatInputSubmit.displayName = "ChatInputSubmit";
+export { ChatInputSubmit };

package/dist/components/ChatInput/ChatInputTextarea.d.ts

@@ -0,0 +1,6 @@
+import { type FC, type Ref, type TextareaHTMLAttributes } from 'react';
+import { type TestableProps } from '../../utils/testId.js';
+export interface ChatInputTextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'defaultValue'>, TestableProps {
+    ref?: Ref<HTMLTextAreaElement>;
+}
+export declare const ChatInputTextarea: FC<ChatInputTextareaProps>;

package/dist/components/ChatInput/ChatInputTextarea.js

@@ -0,0 +1,155 @@
+import { jsx } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { useEffect, useRef } from "react";
+import { composeRefs } from "@radix-ui/react-compose-refs";
+import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
+import { useAutoResize } from "../Textarea/useAutoResize.js";
+import { useChatInputContext } from "./ChatInputContext.js";
+import { chatInputTextareaVariants } from "./classes.js";
+const ChatInputTextarea = (t0)=>{
+    const $ = c(37);
+    let ariaDescribedBy;
+    let className;
+    let disabledProp;
+    let onChange;
+    let onKeyDown;
+    let ref;
+    let rest;
+    let testIdProp;
+    if ($[0] !== t0) {
+        ({ ref, className, disabled: disabledProp, onChange, onKeyDown, "aria-describedby": ariaDescribedBy, "data-testid": testIdProp, ...rest } = t0);
+        $[0] = t0;
+        $[1] = ariaDescribedBy;
+        $[2] = className;
+        $[3] = disabledProp;
+        $[4] = onChange;
+        $[5] = onKeyDown;
+        $[6] = ref;
+        $[7] = rest;
+        $[8] = testIdProp;
+    } else {
+        ariaDescribedBy = $[1];
+        className = $[2];
+        disabledProp = $[3];
+        onChange = $[4];
+        onKeyDown = $[5];
+        ref = $[6];
+        rest = $[7];
+        testIdProp = $[8];
+    }
+    const testId = useTestId("textarea", testIdProp);
+    const { value, onValueChange, isRunning, disabled, onStop, disclaimerId } = useChatInputContext();
+    const { ref: autoResizeRef } = useAutoResize(true, 1, 8, value);
+    let t1;
+    if ($[9] !== ariaDescribedBy || $[10] !== disclaimerId) {
+        t1 = [
+            ariaDescribedBy,
+            disclaimerId
+        ].filter(Boolean).join(" ") || void 0;
+        $[9] = ariaDescribedBy;
+        $[10] = disclaimerId;
+        $[11] = t1;
+    } else t1 = $[11];
+    const describedBy = t1;
+    const nodeRef = useRef(null);
+    const claimsEscape = isRunning && !!onStop;
+    let t2;
+    let t3;
+    if ($[12] !== claimsEscape) {
+        t2 = ()=>{
+            const node = nodeRef.current;
+            const view = node?.ownerDocument.defaultView;
+            if (!claimsEscape || !node || !view) return;
+            const claimEscape = (event)=>{
+                if ("Escape" === event.key && !event.isComposing && event.target === node && "true" !== node.getAttribute("aria-expanded")) event.preventDefault();
+            };
+            view.addEventListener("keydown", claimEscape, true);
+            return ()=>view.removeEventListener("keydown", claimEscape, true);
+        };
+        t3 = [
+            claimsEscape
+        ];
+        $[12] = claimsEscape;
+        $[13] = t2;
+        $[14] = t3;
+    } else {
+        t2 = $[13];
+        t3 = $[14];
+    }
+    useEffect(t2, t3);
+    let t4;
+    if ($[15] !== onChange || $[16] !== onValueChange) {
+        t4 = (event_0)=>{
+            onChange?.(event_0);
+            onValueChange(event_0.target.value);
+        };
+        $[15] = onChange;
+        $[16] = onValueChange;
+        $[17] = t4;
+    } else t4 = $[17];
+    const handleChange = t4;
+    let t5;
+    if ($[18] !== claimsEscape || $[19] !== onKeyDown || $[20] !== onStop) {
+        t5 = (event_1)=>{
+            onKeyDown?.(event_1);
+            if (event_1.nativeEvent.isComposing || 229 === event_1.keyCode) return;
+            if ("Escape" === event_1.key) {
+                if (claimsEscape && "true" !== event_1.currentTarget.getAttribute("aria-expanded")) onStop?.();
+            } else if ("Enter" === event_1.key && !event_1.shiftKey && !event_1.defaultPrevented) {
+                event_1.preventDefault();
+                event_1.currentTarget.form?.requestSubmit();
+            }
+        };
+        $[18] = claimsEscape;
+        $[19] = onKeyDown;
+        $[20] = onStop;
+        $[21] = t5;
+    } else t5 = $[21];
+    const handleKeyDown = t5;
+    let t6;
+    if ($[22] !== autoResizeRef || $[23] !== ref) {
+        t6 = composeRefs(autoResizeRef, nodeRef, ref);
+        $[22] = autoResizeRef;
+        $[23] = ref;
+        $[24] = t6;
+    } else t6 = $[24];
+    const t7 = disabled || disabledProp;
+    let t8;
+    if ($[25] !== className) {
+        t8 = cn(chatInputTextareaVariants(), className);
+        $[25] = className;
+        $[26] = t8;
+    } else t8 = $[26];
+    let t9;
+    if ($[27] !== describedBy || $[28] !== handleChange || $[29] !== handleKeyDown || $[30] !== rest || $[31] !== t6 || $[32] !== t7 || $[33] !== t8 || $[34] !== testId || $[35] !== value) {
+        t9 = /*#__PURE__*/ jsx("textarea", {
+            placeholder: "Ask Wally...",
+            "aria-label": "Message Wally",
+            ...rest,
+            ref: t6,
+            rows: 1,
+            value: value,
+            disabled: t7,
+            "aria-describedby": describedBy,
+            onChange: handleChange,
+            onKeyDown: handleKeyDown,
+            "data-slot": "chat-input-textarea",
+            "data-testid": testId,
+            className: t8
+        });
+        $[27] = describedBy;
+        $[28] = handleChange;
+        $[29] = handleKeyDown;
+        $[30] = rest;
+        $[31] = t6;
+        $[32] = t7;
+        $[33] = t8;
+        $[34] = testId;
+        $[35] = value;
+        $[36] = t9;
+    } else t9 = $[36];
+    return t9;
+};
+ChatInputTextarea.displayName = "ChatInputTextarea";
+export { ChatInputTextarea };

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

@@ -0,0 +1,9 @@
+export declare const chatInputVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const chatInputContextVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const chatInputContextChipsVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const chatInputBoxVariants: (props?: ({
+    withContext?: boolean | null | undefined;
+    disabled?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const chatInputTextareaVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const chatInputDisclaimerVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;

package/dist/components/ChatInput/classes.js

@@ -0,0 +1,22 @@
+import { cva } from "class-variance-authority";
+import { cn } from "../../utils/cn.js";
+const chatInputVariants = cva('flex flex-col gap-4');
+const chatInputContextVariants = cva('flex flex-col rounded-16 border border-border-info bg-bg-light-info');
+const chatInputContextChipsVariants = cva('flex flex-wrap items-center gap-6 px-12 pt-8 pb-6');
+const chatInputBoxVariants = cva(cn('flex flex-wrap items-center gap-x-6 gap-y-24 rounded-16 border border-border-primary px-11 pt-9 pb-11', 'transition-[border-color,box-shadow] motion-reduce:transition-none', 'hover:border-component-border-input-hover', 'has-[textarea:focus]:border-component-border-input-hover has-[textarea:focus]:shadow-none has-[textarea:focus]:ring-3 has-[textarea:focus]:ring-focus-primary'), {
+    variants: {
+        withContext: {
+            false: 'bg-component-input-bg shadow-xs',
+            true: '-mx-px -mb-px bg-bg-surface-1 shadow-sm'
+        },
+        disabled: {
+            true: 'pointer-events-none opacity-50'
+        }
+    },
+    defaultVariants: {
+        withContext: false
+    }
+});
+const chatInputTextareaVariants = cva(cn('w-full basis-full resize-none bg-transparent text-sm text-text-primary outline-none', 'placeholder:text-text-secondary disabled:cursor-not-allowed [scrollbar-width:thin]'));
+const chatInputDisclaimerVariants = cva('text-center text-xs text-text-secondary');
+export { chatInputBoxVariants, chatInputContextChipsVariants, chatInputContextVariants, chatInputDisclaimerVariants, chatInputTextareaVariants, chatInputVariants };

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

@@ -0,0 +1,3 @@
+export { ChatInput, type ChatInputProps } from './ChatInput.js';
+export { ChatInputSubmit, type ChatInputSubmitProps } from './ChatInputSubmit.js';
+export { ChatInputTextarea, type ChatInputTextareaProps } from './ChatInputTextarea.js';

package/dist/components/ChatInput/index.js

@@ -0,0 +1,3 @@
+export { ChatInput } from "./ChatInput.js";
+export { ChatInputSubmit } from "./ChatInputSubmit.js";
+export { ChatInputTextarea } from "./ChatInputTextarea.js";

package/dist/components/ChatPermissions/ChatPermissions.d.ts

@@ -0,0 +1,12 @@
+import { type FC, type ReactNode } from 'react';
+import { type TestableProps } from '../../utils/testId.js';
+export interface ChatPermissionsProps extends TestableProps {
+    children: ReactNode;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+/**
+ * Root of the per-conversation tool permissions popover. Renders no DOM of its own —
+ * it is a `Popover` root that shares one trigger id with the trigger's tooltip.
+ */
+export declare const ChatPermissions: FC<ChatPermissionsProps>;

package/dist/components/ChatPermissions/ChatPermissions.js

@@ -0,0 +1,66 @@
+import { jsx } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { useId } from "react";
+import { useTestId } from "../../utils/testId.js";
+import { Popover } from "../Popover/index.js";
+import { ChatPermissionsContext } from "./ChatPermissionsContext.js";
+const ChatPermissions = (t0)=>{
+    const $ = c(14);
+    const { children, open, onOpenChange, "data-testid": testIdProp } = t0;
+    const testId = useTestId("permissions", testIdProp);
+    const triggerId = useId();
+    let t1;
+    if ($[0] !== triggerId) {
+        t1 = {
+            triggerId
+        };
+        $[0] = triggerId;
+        $[1] = t1;
+    } else t1 = $[1];
+    let t2;
+    if ($[2] !== triggerId) {
+        t2 = {
+            trigger: triggerId
+        };
+        $[2] = triggerId;
+        $[3] = t2;
+    } else t2 = $[3];
+    let t3;
+    if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+        t3 = {
+            placement: "top-start",
+            gutter: 8
+        };
+        $[4] = t3;
+    } else t3 = $[4];
+    let t4;
+    if ($[5] !== children || $[6] !== onOpenChange || $[7] !== open || $[8] !== t2 || $[9] !== testId) {
+        t4 = /*#__PURE__*/ jsx(Popover, {
+            "data-testid": testId,
+            ids: t2,
+            positioning: t3,
+            open: open,
+            onOpenChange: onOpenChange,
+            children: children
+        });
+        $[5] = children;
+        $[6] = onOpenChange;
+        $[7] = open;
+        $[8] = t2;
+        $[9] = testId;
+        $[10] = t4;
+    } else t4 = $[10];
+    let t5;
+    if ($[11] !== t1 || $[12] !== t4) {
+        t5 = /*#__PURE__*/ jsx(ChatPermissionsContext.Provider, {
+            value: t1,
+            children: t4
+        });
+        $[11] = t1;
+        $[12] = t4;
+        $[13] = t5;
+    } else t5 = $[13];
+    return t5;
+};
+ChatPermissions.displayName = "ChatPermissions";
+export { ChatPermissions };

package/dist/components/ChatPermissions/ChatPermissionsContent.d.ts

@@ -0,0 +1,7 @@
+import { type FC, type ReactNode } from 'react';
+import { type PopoverContentProps } from '../Popover/index.js';
+export interface ChatPermissionsContentProps extends Omit<PopoverContentProps, 'minWidth' | 'maxWidth'> {
+    /** Heading above the tool rows; also names the dialog. Pass `null`, `false` or `''` to hide it. */
+    label?: ReactNode;
+}
+export declare const ChatPermissionsContent: FC<ChatPermissionsContentProps>;

package/dist/components/ChatPermissions/ChatPermissionsContent.js

@@ -0,0 +1,73 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { useId } from "react";
+import { cn } from "../../utils/cn.js";
+import { dropdownMenuLabelVariants } from "../DropdownMenu/classes.js";
+import { PopoverContent } from "../Popover/index.js";
+import { chatPermissionsContentVariants } from "./classes.js";
+const ChatPermissionsContent = (t0)=>{
+    const $ = c(17);
+    let children;
+    let className;
+    let rest;
+    let t1;
+    if ($[0] !== t0) {
+        ({ label: t1, className, children, ...rest } = t0);
+        $[0] = t0;
+        $[1] = children;
+        $[2] = className;
+        $[3] = rest;
+        $[4] = t1;
+    } else {
+        children = $[1];
+        className = $[2];
+        rest = $[3];
+        t1 = $[4];
+    }
+    const label = void 0 === t1 ? "Always allowed in this conversation" : t1;
+    const labelId = useId();
+    const hasLabel = null != label && false !== label && "" !== label;
+    const t2 = hasLabel ? labelId : void 0;
+    let t3;
+    if ($[5] !== className) {
+        t3 = cn(chatPermissionsContentVariants(), className);
+        $[5] = className;
+        $[6] = t3;
+    } else t3 = $[6];
+    let t4;
+    if ($[7] !== hasLabel || $[8] !== label || $[9] !== labelId) {
+        t4 = hasLabel && /*#__PURE__*/ jsx("p", {
+            id: labelId,
+            className: dropdownMenuLabelVariants(),
+            children: label
+        });
+        $[7] = hasLabel;
+        $[8] = label;
+        $[9] = labelId;
+        $[10] = t4;
+    } else t4 = $[10];
+    let t5;
+    if ($[11] !== children || $[12] !== rest || $[13] !== t2 || $[14] !== t3 || $[15] !== t4) {
+        t5 = /*#__PURE__*/ jsxs(PopoverContent, {
+            "aria-labelledby": t2,
+            ...rest,
+            "data-slot": "chat-permissions-content",
+            minWidth: "320px",
+            maxWidth: "320px",
+            className: t3,
+            children: [
+                t4,
+                children
+            ]
+        });
+        $[11] = children;
+        $[12] = rest;
+        $[13] = t2;
+        $[14] = t3;
+        $[15] = t4;
+        $[16] = t5;
+    } else t5 = $[16];
+    return t5;
+};
+ChatPermissionsContent.displayName = "ChatPermissionsContent";
+export { ChatPermissionsContent };

package/dist/components/ChatPermissions/ChatPermissionsContext.d.ts

@@ -0,0 +1,7 @@
+interface ChatPermissionsContextValue {
+    /** Shared by the Popover and the Tooltip so both anchor to the one trigger button. */
+    triggerId: string;
+}
+export declare const ChatPermissionsContext: import("react").Context<ChatPermissionsContextValue | null>;
+export declare const useChatPermissionsContext: () => ChatPermissionsContextValue;
+export {};

package/dist/components/ChatPermissions/ChatPermissionsContext.js

@@ -0,0 +1,8 @@
+import { createContext, useContext } from "react";
+const ChatPermissionsContext = createContext(null);
+const useChatPermissionsContext = ()=>{
+    const context = useContext(ChatPermissionsContext);
+    if (!context) throw new Error("ChatPermissions parts must be rendered inside <ChatPermissions>");
+    return context;
+};
+export { ChatPermissionsContext, useChatPermissionsContext };

package/dist/components/ChatPermissions/ChatPermissionsItem.d.ts

@@ -0,0 +1,17 @@
+import type { FC, ReactNode, Ref } from 'react';
+import { type SwitchProps } from '../Switch/index.js';
+export interface ChatPermissionsItemCheckedChangeDetails {
+    checked: boolean;
+    /** The row's `name`, so one handler can serve the whole list. */
+    name: string;
+}
+export interface ChatPermissionsItemProps extends Omit<SwitchProps, 'children' | 'title' | 'name' | 'onCheckedChange'> {
+    ref?: Ref<HTMLLabelElement>;
+    /** Machine name of the tool, e.g. `propose_add_to_denylist`; echoed back in `onCheckedChange`. */
+    name: string;
+    /** Visible tool name. */
+    title: ReactNode;
+    description?: ReactNode;
+    onCheckedChange?: (details: ChatPermissionsItemCheckedChangeDetails) => void;
+}
+export declare const ChatPermissionsItem: FC<ChatPermissionsItemProps>;