@movable/ui 4.1.1 → 4.2.1

package/lib/components/Header/InkWorkflowHeader.d.ts

@@ -1,4 +1,5 @@
 import { ButtonProps } from '@mui/material';
+import type { ReactNode } from 'react';
 type PrimaryButtonType = ButtonProps & {
     label: string;
     loading?: boolean;
@@ -11,7 +12,7 @@ type ActionButtonPropType = {
     close?: closeButtonType;
 };
 type InkWorkflowHeaderProps = {
-    label: string;
+    label: ReactNode;
     Stepper?: JSX.Element;
     ButtonGroup?: JSX.Element | ActionButtonPropType;
     subtitle?: string;

package/lib/components/InkAiChatInput/InkAiChatInput.d.ts

@@ -0,0 +1,40 @@
+import { ReactNode } from 'react';
+import { SxProps, Theme } from '@mui/material';
+export type ChatChip = {
+    id: string;
+    label: string;
+    icon?: ReactNode;
+};
+export type ScopeOption = {
+    value: string;
+    label: string;
+    icon?: ReactNode;
+};
+export type InkAiChatInputProps = {
+    value: string;
+    onChange: (value: string) => void;
+    onSubmit: (value: string) => void;
+    isGenerating?: boolean;
+    onStop?: () => void;
+    disabled?: boolean;
+    placeholder?: string;
+    chips?: ChatChip[];
+    onRemoveChip?: (id: string) => void;
+    scopeOptions?: ScopeOption[];
+    scopeValue?: string;
+    onScopeChange?: (value: string) => void;
+    onAttachClick?: () => void;
+    onMentionClick?: () => void;
+    autoFocus?: boolean;
+    /**
+     * Stable name for the textarea. Also used as a fallback id for the scope
+     * select. Generated via `useId()` if omitted — supply explicitly when
+     * rendering multiple instances on the same page or when the consumer needs
+     * a predictable selector.
+     */
+    name?: string;
+    className?: string;
+    sx?: SxProps<Theme>;
+};
+declare const InkAiChatInput: import("react").ForwardRefExoticComponent<InkAiChatInputProps & import("react").RefAttributes<HTMLDivElement>>;
+export { InkAiChatInput };

package/lib/components/InkAiChatInput/index.d.ts

@@ -0,0 +1 @@
+export { InkAiChatInput, type InkAiChatInputProps, type ChatChip, type ScopeOption, } from './InkAiChatInput';

package/lib/components/InkAiMessages/InkAiAssistantMessage.d.ts

@@ -0,0 +1,40 @@
+import { SxProps, Theme } from '@mui/material';
+export type InkAiAssistantMessageProps = {
+    /** Markdown string to render. */
+    content: string;
+    /**
+     * True when the LLM has accepted the prompt but has not yet produced any
+     * output. Renders the `InkAiThinkingIndicator` instead of the body.
+     * Mirrors CopilotKit's `isLoading` slot prop.
+     */
+    isLoading?: boolean;
+    /** True while the assistant is still streaming this message. Hides actions. */
+    isGenerating?: boolean;
+    /** Show the action row. Default: true when not generating. */
+    showActions?: boolean;
+    /**
+     * Optional label for the thinking indicator shown when `isLoading` is true
+     * or `content` is empty. Defaults to "Thinking…" (set by
+     * `InkAiThinkingIndicator`).
+     */
+    thinkingLabel?: string;
+    /**
+     * Called when the user clicks copy. Defaults to
+     * `navigator.clipboard.writeText(content)`.
+     */
+    onCopy?: (content: string) => void;
+    /** Called when the user clicks a feedback button. */
+    onFeedback?: (kind: 'up' | 'down') => void;
+    className?: string;
+    sx?: SxProps<Theme>;
+};
+/**
+ * Renders an assistant message: markdown body styled with MUI typography
+ * + an inline action row (thumbs up/down/copy). No CopilotKit dependency —
+ * the consuming app wires this into CopilotKit's `AssistantMessage` slot.
+ *
+ * When `isLoading` is true, or when `content` is empty/whitespace, the
+ * `InkAiThinkingIndicator` is rendered in place of the body and the action
+ * row is hidden.
+ */
+export declare const InkAiAssistantMessage: ({ content, isLoading, isGenerating, showActions, thinkingLabel, onCopy, onFeedback, className, sx, }: InkAiAssistantMessageProps) => import("react/jsx-runtime").JSX.Element;

package/lib/components/InkAiMessages/InkAiMessageActions.d.ts

@@ -0,0 +1,14 @@
+import { SxProps, Theme } from '@mui/material';
+export type InkAiMessageActionsProps = {
+    /** Called when the copy button is clicked. */
+    onCopy: () => void;
+    /** Called when a feedback button is clicked. */
+    onFeedback?: (kind: 'up' | 'down') => void;
+    className?: string;
+    sx?: SxProps<Theme>;
+};
+/**
+ * Action row rendered below an assistant message. Three buttons in an 8px
+ * horizontal stack: good response, bad response, copy message.
+ */
+export declare const InkAiMessageActions: ({ onCopy, onFeedback, className, sx, }: InkAiMessageActionsProps) => import("react/jsx-runtime").JSX.Element;

package/lib/components/InkAiMessages/InkAiUserMessage.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+import { SxProps, Theme } from '@mui/material';
+export type InkAiUserMessageProps = {
+    /** Text content of the message. */
+    content: ReactNode;
+    className?: string;
+    sx?: SxProps<Theme>;
+};
+/**
+ * Light-blue user message bubble matching the Movable Ink AI assistant Figma
+ * design. Purely presentational — right-alignment within a conversation
+ * column is the parent's responsibility.
+ */
+export declare const InkAiUserMessage: ({ content, className, sx, }: InkAiUserMessageProps) => import("react/jsx-runtime").JSX.Element;

package/lib/components/InkAiMessages/index.d.ts

@@ -0,0 +1,2 @@
+export { InkAiUserMessage, type InkAiUserMessageProps, } from './InkAiUserMessage';
+export { InkAiAssistantMessage, type InkAiAssistantMessageProps, } from './InkAiAssistantMessage';

package/lib/components/InkAiMessages/markdownComponents.d.ts

@@ -0,0 +1,8 @@
+import type { MarkdownToJSX } from 'markdown-to-jsx';
+/**
+ * Mapping passed to <Markdown options={{ overrides }} /> so markdown nodes
+ * inherit MUI typography/colors instead of browser defaults. Keeps the
+ * Movable Ink AI assistant brand styling (blue.800 inline link, semi-bold
+ * strong, body2 paragraphs, disc lists with 4px item gap).
+ */
+export declare const markdownComponents: MarkdownToJSX.Overrides;

package/lib/components/InkAiReasoning/InkAiReasoningContent.d.ts

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+import { SxProps, Theme } from '@mui/material';
+export type InkAiReasoningContentProps = {
+    /** Whether reasoning is still streaming. */
+    isStreaming?: boolean;
+    /** Whether the reasoning content has any text yet. */
+    hasContent?: boolean;
+    /**
+     * The reasoning content. CopilotKit passes the message body string here.
+     * Rendered as plain text inside caption typography.
+     */
+    children?: ReactNode;
+    className?: string;
+    sx?: SxProps<Theme>;
+};
+/**
+ * Body slot for CopilotKit's CopilotChatReasoningMessage `contentView`
+ * slot. Renders the streaming/static reasoning text in a left-bordered
+ * caption-typography block.
+ */
+export declare const InkAiReasoningContent: ({ isStreaming, hasContent, children, className, sx, }: InkAiReasoningContentProps) => import("react/jsx-runtime").JSX.Element | null;

package/lib/components/InkAiReasoning/InkAiReasoningHeader.d.ts

@@ -0,0 +1,42 @@
+import { SxProps, Theme } from '@mui/material';
+export type InkAiReasoningHeaderProps = {
+    /** Currently expanded? Comes from CopilotKit. */
+    isOpen?: boolean;
+    /**
+     * Whether the reasoning is still streaming. Comes from CopilotKit.
+     * Drives the gradient/gray styling switch.
+     */
+    isStreaming?: boolean;
+    /**
+     * Whether reasoning has produced any content yet. Comes from CopilotKit.
+     * When false AND not streaming, the header is non-interactive and the
+     * chevron is hidden.
+     */
+    hasContent?: boolean;
+    /**
+     * Label string supplied by CopilotKit's CopilotChatReasoningMessage
+     * (e.g. "Thinking…", "Thought for 14 seconds"). Rendered as-is unless
+     * `formatLabel` is provided.
+     */
+    label?: string;
+    /**
+     * Optional escape hatch for consumers who want to rewrite CopilotKit's
+     * default wording without forking. Receives the original label and the
+     * current state; returns the string actually rendered.
+     */
+    formatLabel?: (label: string, ctx: {
+        isStreaming: boolean;
+        isOpen: boolean;
+        hasContent: boolean;
+    }) => string;
+    /** Click handler from CopilotKit; toggles open/closed. */
+    onClick?: () => void;
+    className?: string;
+    sx?: SxProps<Theme>;
+};
+/**
+ * Header row for CopilotKit's CopilotChatReasoningMessage `header` slot.
+ * Switches between a purple-gradient streaming label and a gray
+ * collapsible label with a rotating chevron.
+ */
+export declare const InkAiReasoningHeader: ({ isOpen, isStreaming, hasContent, label, formatLabel, onClick, className, sx, }: InkAiReasoningHeaderProps) => import("react/jsx-runtime").JSX.Element;

package/lib/components/InkAiReasoning/InkAiThinkingIndicator.d.ts

@@ -0,0 +1,16 @@
+import { SxProps, Theme } from '@mui/material';
+export type InkAiThinkingIndicatorProps = {
+    /**
+     * The text label rendered with the purple gradient. Default: "Thinking…".
+     * Pass a label appropriate to the flow (e.g. "Doing some calculations…").
+     */
+    label?: string;
+    className?: string;
+    sx?: SxProps<Theme>;
+};
+/**
+ * Single-line purple-gradient label rendered while the assistant is in a
+ * pre-output "loading" state — before any reasoning or content arrives.
+ * Intended for use inside a custom CopilotKit `AssistantMessage` slot.
+ */
+export declare const InkAiThinkingIndicator: ({ label, className, sx, }: InkAiThinkingIndicatorProps) => import("react/jsx-runtime").JSX.Element;

package/lib/components/InkAiReasoning/gradientText.d.ts

@@ -0,0 +1,17 @@
+import type { SxProps, Theme } from '@mui/material';
+/**
+ * Movable Ink AI assistant shimmering brand gradient applied via
+ * background-clip: text. Two stacked gradients — a moving white highlight
+ * over a horizontal brand-color band — animated to sweep continuously.
+ *
+ * Used by `InkAiThinkingIndicator` and by the streaming-state label in
+ * `InkAiReasoningHeader`.
+ *
+ * Visuals match `sampleMessage.html` (`.ai-status-text` / `--active`),
+ * which is itself derived from the Figma reference:
+ * https://www.figma.com/design/ZbPxTAveBsb7RRJyMj4Fbw/AI-Assistants?node-id=2437-5612
+ *
+ * Honors `prefers-reduced-motion: reduce` by stopping the animation while
+ * keeping the static gradient visible.
+ */
+export declare const gradientTextSx: SxProps<Theme>;

package/lib/components/InkAiReasoning/index.d.ts

@@ -0,0 +1,3 @@
+export { InkAiThinkingIndicator, type InkAiThinkingIndicatorProps, } from './InkAiThinkingIndicator';
+export { InkAiReasoningHeader, type InkAiReasoningHeaderProps, } from './InkAiReasoningHeader';
+export { InkAiReasoningContent, type InkAiReasoningContentProps, } from './InkAiReasoningContent';

package/lib/components/index.d.ts

@@ -13,6 +13,9 @@ export { InkToggleIcon } from './InkToggleIcon';
 export { InkToggleIconGroup, type InkToggleIconGroupProps, } from './InkToggleIconGroup';
 export { InkEmptyState } from './InkEmptyState';
 export { InkAttributeList } from './InkAttributeList';
+export { InkAiChatInput, type InkAiChatInputProps, type ChatChip, type ScopeOption, } from './InkAiChatInput';
+export { InkAiUserMessage, type InkAiUserMessageProps, InkAiAssistantMessage, type InkAiAssistantMessageProps, } from './InkAiMessages';
+export { InkAiThinkingIndicator, type InkAiThinkingIndicatorProps, InkAiReasoningHeader, type InkAiReasoningHeaderProps, InkAiReasoningContent, type InkAiReasoningContentProps, } from './InkAiReasoning';
 export { InkImage } from './InkImage';
 export { InkDrawer } from './InkDrawer';
 export { InkComponentTile, type InkComponentTileProps, type InkTileIconProps, } from './InkComponentTile';

package/lib/index.d.ts

@@ -127,6 +127,12 @@ declare type ChartProps<T extends ChartTypes> = {
 
 declare type ChartTypes = 'line' | 'bar' | 'pie';
 
+export declare type ChatChip = {
+    id: string;
+    label: string;
+    icon?: ReactNode;
+};
+
 declare type closeButtonType = {
     onClick: (e?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
 };
@@ -341,6 +347,171 @@ export declare type InkAccordionProps = Omit<AccordionProps, 'children'> & {
     onDelete?: () => void;
 };
 
+/**
+ * Renders an assistant message: markdown body styled with MUI typography
+ * + an inline action row (thumbs up/down/copy). No CopilotKit dependency —
+ * the consuming app wires this into CopilotKit's `AssistantMessage` slot.
+ *
+ * When `isLoading` is true, or when `content` is empty/whitespace, the
+ * `InkAiThinkingIndicator` is rendered in place of the body and the action
+ * row is hidden.
+ */
+export declare const InkAiAssistantMessage: ({ content, isLoading, isGenerating, showActions, thinkingLabel, onCopy, onFeedback, className, sx, }: InkAiAssistantMessageProps) => JSX_2.Element;
+
+export declare type InkAiAssistantMessageProps = {
+    /** Markdown string to render. */
+    content: string;
+    /**
+     * True when the LLM has accepted the prompt but has not yet produced any
+     * output. Renders the `InkAiThinkingIndicator` instead of the body.
+     * Mirrors CopilotKit's `isLoading` slot prop.
+     */
+    isLoading?: boolean;
+    /** True while the assistant is still streaming this message. Hides actions. */
+    isGenerating?: boolean;
+    /** Show the action row. Default: true when not generating. */
+    showActions?: boolean;
+    /**
+     * Optional label for the thinking indicator shown when `isLoading` is true
+     * or `content` is empty. Defaults to "Thinking…" (set by
+     * `InkAiThinkingIndicator`).
+     */
+    thinkingLabel?: string;
+    /**
+     * Called when the user clicks copy. Defaults to
+     * `navigator.clipboard.writeText(content)`.
+     */
+    onCopy?: (content: string) => void;
+    /** Called when the user clicks a feedback button. */
+    onFeedback?: (kind: 'up' | 'down') => void;
+    className?: string;
+    sx?: SxProps<Theme_2>;
+};
+
+export declare const InkAiChatInput: ForwardRefExoticComponent<InkAiChatInputProps & RefAttributes<HTMLDivElement>>;
+
+export declare type InkAiChatInputProps = {
+    value: string;
+    onChange: (value: string) => void;
+    onSubmit: (value: string) => void;
+    isGenerating?: boolean;
+    onStop?: () => void;
+    disabled?: boolean;
+    placeholder?: string;
+    chips?: ChatChip[];
+    onRemoveChip?: (id: string) => void;
+    scopeOptions?: ScopeOption[];
+    scopeValue?: string;
+    onScopeChange?: (value: string) => void;
+    onAttachClick?: () => void;
+    onMentionClick?: () => void;
+    autoFocus?: boolean;
+    /**
+     * Stable name for the textarea. Also used as a fallback id for the scope
+     * select. Generated via `useId()` if omitted — supply explicitly when
+     * rendering multiple instances on the same page or when the consumer needs
+     * a predictable selector.
+     */
+    name?: string;
+    className?: string;
+    sx?: SxProps<Theme_2>;
+};
+
+/**
+ * Body slot for CopilotKit's CopilotChatReasoningMessage `contentView`
+ * slot. Renders the streaming/static reasoning text in a left-bordered
+ * caption-typography block.
+ */
+export declare const InkAiReasoningContent: ({ isStreaming, hasContent, children, className, sx, }: InkAiReasoningContentProps) => JSX_2.Element | null;
+
+export declare type InkAiReasoningContentProps = {
+    /** Whether reasoning is still streaming. */
+    isStreaming?: boolean;
+    /** Whether the reasoning content has any text yet. */
+    hasContent?: boolean;
+    /**
+     * The reasoning content. CopilotKit passes the message body string here.
+     * Rendered as plain text inside caption typography.
+     */
+    children?: ReactNode;
+    className?: string;
+    sx?: SxProps<Theme_2>;
+};
+
+/**
+ * Header row for CopilotKit's CopilotChatReasoningMessage `header` slot.
+ * Switches between a purple-gradient streaming label and a gray
+ * collapsible label with a rotating chevron.
+ */
+export declare const InkAiReasoningHeader: ({ isOpen, isStreaming, hasContent, label, formatLabel, onClick, className, sx, }: InkAiReasoningHeaderProps) => JSX_2.Element;
+
+export declare type InkAiReasoningHeaderProps = {
+    /** Currently expanded? Comes from CopilotKit. */
+    isOpen?: boolean;
+    /**
+     * Whether the reasoning is still streaming. Comes from CopilotKit.
+     * Drives the gradient/gray styling switch.
+     */
+    isStreaming?: boolean;
+    /**
+     * Whether reasoning has produced any content yet. Comes from CopilotKit.
+     * When false AND not streaming, the header is non-interactive and the
+     * chevron is hidden.
+     */
+    hasContent?: boolean;
+    /**
+     * Label string supplied by CopilotKit's CopilotChatReasoningMessage
+     * (e.g. "Thinking…", "Thought for 14 seconds"). Rendered as-is unless
+     * `formatLabel` is provided.
+     */
+    label?: string;
+    /**
+     * Optional escape hatch for consumers who want to rewrite CopilotKit's
+     * default wording without forking. Receives the original label and the
+     * current state; returns the string actually rendered.
+     */
+    formatLabel?: (label: string, ctx: {
+        isStreaming: boolean;
+        isOpen: boolean;
+        hasContent: boolean;
+    }) => string;
+    /** Click handler from CopilotKit; toggles open/closed. */
+    onClick?: () => void;
+    className?: string;
+    sx?: SxProps<Theme_2>;
+};
+
+/**
+ * Single-line purple-gradient label rendered while the assistant is in a
+ * pre-output "loading" state — before any reasoning or content arrives.
+ * Intended for use inside a custom CopilotKit `AssistantMessage` slot.
+ */
+export declare const InkAiThinkingIndicator: ({ label, className, sx, }: InkAiThinkingIndicatorProps) => JSX_2.Element;
+
+export declare type InkAiThinkingIndicatorProps = {
+    /**
+     * The text label rendered with the purple gradient. Default: "Thinking…".
+     * Pass a label appropriate to the flow (e.g. "Doing some calculations…").
+     */
+    label?: string;
+    className?: string;
+    sx?: SxProps<Theme_2>;
+};
+
+/**
+ * Light-blue user message bubble matching the Movable Ink AI assistant Figma
+ * design. Purely presentational — right-alignment within a conversation
+ * column is the parent's responsibility.
+ */
+export declare const InkAiUserMessage: ({ content, className, sx, }: InkAiUserMessageProps) => JSX_2.Element;
+
+export declare type InkAiUserMessageProps = {
+    /** Text content of the message. */
+    content: ReactNode;
+    className?: string;
+    sx?: SxProps<Theme_2>;
+};
+
 /**
  * InkAlert component provides a consistent way to display alerts with proper
  * alignment and styling. It handles the vertical alignment issues when
@@ -1021,7 +1192,7 @@ export declare class InkWorkflowHeaderPageObject {
 }
 
 declare type InkWorkflowHeaderProps = {
-    label: string;
+    label: ReactNode;
     Stepper?: JSX.Element;
     ButtonGroup?: JSX.Element | ActionButtonPropType;
     subtitle?: string;
@@ -1191,6 +1362,12 @@ declare type RobustCardProps = BaseProps & {
     directIndirect?: DirectIndirectData;
 };
 
+export declare type ScopeOption = {
+    value: string;
+    label: string;
+    icon?: ReactNode;
+};
+
 export declare type SecondaryMetricData = {
     value: string;
     label: string;