@carto/ps-react-ui 5.0.0-widgets.9 → 5.0.0

package/dist/types/chat/bubbles/chat-agent-message.d.ts

@@ -0,0 +1,9 @@
+import { ChatAgentMessageProps } from '../types.js';
+/**
+ * Agent reply bubble. A styles container that positions the reply and its
+ * composed pieces (text, loaders, tool traces, …); it renders `children`
+ * verbatim and forwards its `ref` to the underlying element. For Markdown
+ * replies, compose `ChatAgentMessageMarkdown` instead of teaching this
+ * container about the markdown engine.
+ */
+export declare const ChatAgentMessage: import('react').ForwardRefExoticComponent<ChatAgentMessageProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/types/chat/bubbles/chat-error-message.d.ts

@@ -0,0 +1,2 @@
+import { ChatErrorMessageProps } from '../types.js';
+export declare function ChatErrorMessage({ errors, icon, actions, sx, }: ChatErrorMessageProps): import('react').JSX.Element;

package/dist/types/chat/bubbles/chat-suggestion-button.d.ts

@@ -0,0 +1,2 @@
+import { ChatSuggestionButtonProps } from '../types.js';
+export declare function ChatSuggestionButton({ label, color, sx, ...props }: ChatSuggestionButtonProps): import('react').JSX.Element;

package/dist/types/chat/bubbles/chat-user-message.d.ts

@@ -0,0 +1,2 @@
+import { ChatUserMessageProps } from '../types.js';
+export declare function ChatUserMessage({ children, muted, topContext, sx, }: ChatUserMessageProps): import('react').JSX.Element;

package/dist/types/chat/bubbles/index.d.ts

@@ -0,0 +1,5 @@
+export { ChatUserMessage } from './chat-user-message.js';
+export { ChatAgentMessage } from './chat-agent-message.js';
+export { ChatAgentMessageMarkdown } from './chat-agent-message-markdown.js';
+export { ChatErrorMessage } from './chat-error-message.js';
+export { ChatSuggestionButton } from './chat-suggestion-button.js';

package/dist/types/chat/bubbles/styles.d.ts

@@ -0,0 +1,88 @@
+import { Theme, TypographyProps } from '@mui/material';
+import { CSSObject } from '@mui/material/styles';
+import { FC } from 'react';
+export declare const ChatMessageOverflow: FC<TypographyProps>;
+export declare const styles: {
+    agentMessageContainer: (theme: Theme) => CSSObject;
+    userMessageContainer: {
+        width: string;
+        display: "flex";
+        flexDirection: "column";
+        alignItems: "flex-end";
+        paddingLeft: ({ spacing }: Theme) => string;
+        '&:has(+ .PsChat--user-message) > .PsChat--user-message-inner': {
+            borderRadius: ({ spacing }: Theme) => string;
+        };
+        '& + .PsChat--user-message': {
+            marginTop: ({ spacing }: Theme) => string;
+        };
+        '& + .PsChat--agent-message': {
+            marginTop: ({ spacing }: Theme) => string;
+        };
+    };
+    userMessage: {
+        padding: ({ spacing }: Theme) => string;
+        borderRadius: ({ spacing }: Theme) => string;
+        border: ({ palette }: Theme) => string;
+        backgroundColor: ({ palette }: Theme) => string;
+        color: ({ palette }: Theme) => string;
+        width: string;
+    };
+    muted: {
+        color: ({ palette }: Theme) => string;
+    };
+    userMessageTop: {
+        textAlign: "right";
+        marginBottom: ({ spacing }: Theme) => string;
+    };
+    errorMessage: {
+        display: "flex";
+        alignItems: "center";
+        flexWrap: "wrap";
+        gap: ({ spacing }: Theme) => string;
+    };
+    errorActions: {
+        display: "flex";
+        alignItems: "center";
+        gap: ({ spacing }: Theme) => string;
+    };
+    errorAction: {
+        color: ({ palette }: Theme) => string;
+    };
+    errorActionSeparator: {
+        mr: number;
+        color: ({ palette }: Theme) => string;
+        fontWeight: number;
+    };
+    suggestionButton: {
+        transition: "border-color 0.2s";
+        width: string;
+        alignItems: "flex-start";
+        justifyContent: "space-between";
+        textAlign: "left";
+        gap: ({ spacing }: Theme) => string;
+        padding: ({ spacing }: Theme) => string;
+        borderRadius: ({ spacing }: Theme) => string;
+        border: ({ palette }: Theme) => string;
+        '& .MuiSvgIcon-root': {
+            transition: "color 0.2s";
+            color: "inherit";
+            fontSize: ({ spacing }: Theme) => string;
+            width: ({ spacing }: Theme) => string;
+            minWidth: ({ spacing }: Theme) => string;
+            height: ({ spacing }: Theme) => string;
+        };
+        '&:not(.Mui-disabled) .MuiSvgIcon-root': {
+            color: ({ palette }: Theme) => string;
+        };
+        '&:hover': {
+            borderColor: ({ palette }: Theme) => string;
+            '& .MuiSvgIcon-root': {
+                color: ({ palette }: Theme) => string;
+            };
+        };
+        '&.Mui-disabled': {
+            color: ({ palette }: Theme) => string;
+        };
+    };
+};

package/dist/types/chat/const.d.ts

@@ -0,0 +1,4 @@
+export declare const CHAT_MAX_WIDTH = 768;
+export declare const CHAT_SCROLL_DELAY = 300;
+export declare const CHAT_DIVIDER_DELAY = 100;
+export declare const CHAT_TOOL_CODE_AREA_MAX_HEIGHT = 126;

package/dist/types/chat/containers/chat-content.d.ts

@@ -0,0 +1,2 @@
+import { ChatContentProps, ChatContentRef } from '../types.js';
+export declare const ChatContent: import('react').ForwardRefExoticComponent<ChatContentProps & import('react').RefAttributes<ChatContentRef>>;

package/dist/types/chat/containers/chat-footer.d.ts

@@ -0,0 +1,2 @@
+import { ChatFooterProps } from '../types.js';
+export declare function ChatFooter({ value, onChange, onSend, onStop, isGenerating, disabled, placeholder, labels, caption, models, selectedModel, onModelChange, startToolbarSlot, endToolbarSlot, sx, }: ChatFooterProps): import('react').JSX.Element;

package/dist/types/chat/containers/chat-header.d.ts

@@ -0,0 +1,2 @@
+import { ChatHeaderProps } from '../types.js';
+export declare function ChatHeader({ leftSlot, title, rightSlot, onClose, sx, }: ChatHeaderProps): import('react').JSX.Element;

package/dist/types/chat/containers/chat-starter.d.ts

@@ -0,0 +1,2 @@
+import { ChatStarterProps } from '../types.js';
+export declare function ChatStarter({ icon, title, description, items, size, onSelect, sx, }: ChatStarterProps): import('react').JSX.Element;

package/dist/types/chat/containers/index.d.ts

@@ -0,0 +1,4 @@
+export { ChatContent } from './chat-content.js';
+export { ChatHeader } from './chat-header.js';
+export { ChatFooter } from './chat-footer.js';
+export { ChatStarter } from './chat-starter.js';

package/dist/types/chat/containers/styles.d.ts

@@ -0,0 +1,160 @@
+import { Theme } from '@mui/material';
+export declare const styles: {
+    header: {
+        display: "flex";
+        alignItems: "center";
+        justifyContent: "space-between";
+        padding: ({ spacing }: Theme) => string;
+    };
+    headerTitle: {
+        flexGrow: number;
+        px: ({ spacing }: Theme) => string;
+    };
+    headerActions: {
+        display: "flex";
+        alignItems: "center";
+        marginLeft: ({ spacing }: Theme) => string;
+        gap: ({ spacing }: Theme) => string;
+    };
+    footerWrapper: {
+        padding: ({ spacing }: Theme) => string;
+    };
+    /**
+     * Rounded input box, matching the reference ChatFooter. A two-column grid:
+     * main column (input + optional slots) | send button, bottom-aligned so it
+     * stays at the end as the input grows. NO vertical padding — the textarea's own
+     * padding sets the ~32px single-line height, so the box hugs the input.
+     */
+    footerBox: {
+        maxWidth: number;
+        width: string;
+        margin: string;
+        display: "grid";
+        gridTemplateColumns: string;
+        alignItems: "end";
+        columnGap: ({ spacing }: Theme) => string;
+        backgroundColor: ({ palette }: Theme) => string;
+        borderRadius: ({ spacing }: Theme) => string;
+        paddingInline: ({ spacing }: Theme) => string;
+    };
+    /** Main grid area: input stacked above the (optional) slots row. */
+    footerMain: {
+        minWidth: number;
+        display: "flex";
+        flexDirection: "column";
+        gap: ({ spacing }: Theme) => string;
+    };
+    /**
+     * Send-button grid area, bottom-aligned (matches the reference flex-end row) so
+     * the button stays at the bottom as the input grows. The small bottom padding
+     * keeps it off the box edge — in the single-line state it reads as vertically
+     * centered (4px top / 4px bottom around the 24px button in the 32px row).
+     */
+    footerSend: {
+        alignSelf: "end";
+        paddingBottom: ({ spacing }: Theme) => string;
+        '& .MuiIconButton-root': {
+            padding: ({ spacing }: Theme) => string;
+        };
+    };
+    /** The chrome-less multiline input (no underline / no filled affordance). */
+    footerInput: {
+        width: string;
+        typography: string;
+        minHeight: string;
+        '& textarea': {
+            fontSize: ({ typography }: Theme) => string;
+            lineHeight: ({ typography }: Theme) => string;
+            letterSpacing: ({ typography }: Theme) => string;
+        };
+        '& textarea:not([aria-hidden])': {
+            resize: "none";
+            padding: ({ spacing }: Theme) => string;
+        };
+    };
+    /**
+     * Slots row under the input: start slot + model selector + end slot. The left
+     * padding lines the row's content up with the input text above it: the input
+     * text is inset ~12px from the box edge (InputBase root padding + the textarea's
+     * 10px left padding) while the model-selector text button only insets ~8px, so a
+     * 4px indent here makes the slot label share the placeholder's left edge instead
+     * of sitting further out.
+     */
+    footerSlots: {
+        display: "flex";
+        alignItems: "center";
+        gap: ({ spacing }: Theme) => string;
+        minWidth: number;
+        flexWrap: "wrap";
+        paddingLeft: ({ spacing }: Theme) => string;
+        paddingBottom: ({ spacing }: Theme) => string;
+    };
+    modelSelector: {
+        textTransform: "none";
+        color: ({ palette }: Theme) => string;
+        maxWidth: string;
+        minWidth: number;
+        '& .MuiButton-endIcon': {
+            marginLeft: ({ spacing }: Theme) => string;
+        };
+    };
+    modelSelectorLabel: {
+        overflow: "hidden";
+        textOverflow: "ellipsis";
+        whiteSpace: "nowrap";
+    };
+    footerCaption: {
+        textAlign: "center";
+    };
+    content: {
+        overflowY: "auto";
+        flex: number;
+        position: "relative";
+        mx: string;
+        maxWidth: number;
+        width: string;
+        maxHeight: string;
+        pt: number;
+        pb: number;
+        px: number;
+        display: "flex";
+        flexDirection: "column";
+        borderTopWidth: string;
+        borderTopStyle: "solid";
+        borderBottomWidth: string;
+        borderBottomStyle: "solid";
+    };
+    sentinel: {
+        height: string;
+        flexShrink: number;
+    };
+    jumpToLatestWrapper: {
+        position: "sticky";
+        bottom: ({ spacing }: Theme) => string;
+        height: number;
+        display: "flex";
+        justifyContent: "center";
+        zIndex: number;
+    };
+    jumpToLatest: {
+        transition: "opacity 0.2s";
+    };
+    starter: {
+        display: "flex";
+        flexDirection: "column";
+        alignItems: "center";
+        justifyContent: "center";
+        padding: ({ spacing }: Theme) => string;
+        textAlign: "center";
+        maxWidth: number;
+        margin: string;
+    };
+    starterItems: {
+        display: "grid";
+        width: string;
+        marginTop: ({ spacing }: Theme) => string;
+    };
+    starterItemsTwoCol: {
+        gridTemplateColumns: string;
+    };
+};

package/dist/types/chat/feedback/chat-actions-container.d.ts

@@ -0,0 +1,3 @@
+import { BoxProps } from '@mui/material';
+import { FC } from 'react';
+export declare const ChatActionsContainer: FC<BoxProps>;

package/dist/types/chat/feedback/chat-loader.d.ts

@@ -0,0 +1,2 @@
+import { ChatLoaderProps } from '../types.js';
+export declare function ChatLoader({ size, labels, sx }: ChatLoaderProps): import('react').JSX.Element;

package/dist/types/chat/feedback/chat-rating-action.d.ts

@@ -0,0 +1,2 @@
+import { ChatRatingActionProps } from '../types.js';
+export declare function ChatRatingAction({ rating, onRatingChange, labels, }: ChatRatingActionProps): import('react').JSX.Element;

package/dist/types/chat/feedback/chat-thinking.d.ts

@@ -0,0 +1,2 @@
+import { ChatThinkingProps } from '../types.js';
+export declare function ChatThinking({ children, duration, sx, }: ChatThinkingProps): import('react').JSX.Element;

package/dist/types/chat/feedback/chat-tool-code-area.d.ts

@@ -0,0 +1,2 @@
+import { ChatToolCodeAreaProps } from '../types.js';
+export declare function ChatToolCodeArea({ content, title, isError, labels, sx, }: ChatToolCodeAreaProps): import('react').JSX.Element;

package/dist/types/chat/feedback/chat-tool-full-view-dialog.d.ts

@@ -0,0 +1,2 @@
+import { ChatToolFullViewDialogProps } from '../types.js';
+export declare function ChatToolFullViewDialog({ open, onClose, title, content, }: ChatToolFullViewDialogProps): import('react').JSX.Element;

package/dist/types/chat/feedback/chat-tool-group.d.ts

@@ -0,0 +1,2 @@
+import { ChatToolGroupProps } from '../types.js';
+export declare function ChatToolGroup({ tools, expanded: _expanded, onExpandedChange: _setExpanded, expandedTools: _expandedTools, onToolExpandedChange: _setExpandedTools, labels, sx, }: ChatToolGroupProps): import('react').JSX.Element;

package/dist/types/chat/feedback/chat-tool-trace.d.ts

@@ -0,0 +1,3 @@
+import { ChatToolTraceProps } from '../types.js';
+export declare function ChatToolTraceDetails({ tool, labels, }: Pick<ChatToolTraceProps, 'tool' | 'labels'>): import('react').JSX.Element;
+export declare function ChatToolTrace({ tool, expanded, onExpandedChange, labels, sx, }: ChatToolTraceProps): import('react').JSX.Element;

package/dist/types/chat/feedback/get-tool-label.d.ts

@@ -0,0 +1,2 @@
+import { ChatToolItem } from '../types.js';
+export declare function getToolLabel(tool: ChatToolItem): string;

package/dist/types/chat/feedback/index.d.ts

@@ -0,0 +1,8 @@
+export { ChatThinking } from './chat-thinking.js';
+export { ChatLoader } from './chat-loader.js';
+export { ChatActionsContainer } from './chat-actions-container.js';
+export { ChatRatingAction } from './chat-rating-action.js';
+export { ChatToolTrace } from './chat-tool-trace.js';
+export { ChatToolCodeArea } from './chat-tool-code-area.js';
+export { ChatToolFullViewDialog } from './chat-tool-full-view-dialog.js';
+export { ChatToolGroup } from './chat-tool-group.js';

package/dist/types/chat/feedback/styles.d.ts

@@ -0,0 +1,212 @@
+import { Theme } from '@mui/material';
+export declare const styles: {
+    thinking: {
+        display: "flex";
+        alignItems: "center";
+        minHeight: ({ spacing }: Theme) => string;
+        background: ({ palette }: Theme) => string;
+        backgroundSize: string;
+        backgroundClip: "text";
+        WebkitBackgroundClip: "text";
+        WebkitTextFillColor: "transparent";
+        animation: `${{
+            name: string;
+            styles: string;
+            anim: 1;
+            toString: () => string;
+        } & string} 2s ease-in-out infinite`;
+        animationDuration: "2s";
+    };
+    loader: {
+        display: "flex";
+        alignItems: "center";
+        justifyContent: "center";
+        position: "relative";
+        p: number;
+    };
+    loaderOuterCircle: {
+        position: "absolute";
+        inset: number;
+        margin: string;
+        borderRadius: string;
+        backgroundColor: ({ palette }: Theme) => string;
+        animation: `${{
+            name: string;
+            styles: string;
+            anim: 1;
+            toString: () => string;
+        } & string} 1s ease-in-out infinite`;
+    };
+    loaderInnerCircle: {
+        position: "absolute";
+        inset: number;
+        margin: string;
+        borderRadius: string;
+        backgroundColor: ({ palette }: Theme) => string;
+        animation: `${{
+            name: string;
+            styles: string;
+            anim: 1;
+            toString: () => string;
+        } & string} 1s ease-in-out infinite`;
+    };
+    traceHeader: {
+        display: "flex";
+        alignItems: "center";
+        padding: number;
+        paddingLeft: ({ spacing }: Theme) => string;
+        borderRadius: ({ spacing }: Theme) => string;
+        width: string;
+        color: ({ palette }: Theme) => string;
+        '&:hover': {
+            backgroundColor: ({ palette }: Theme) => string;
+        };
+    };
+    traceChevron: {
+        color: ({ palette }: Theme) => string;
+        transition: "transform 0.2s";
+    };
+    traceDetailsWrapper: {
+        marginTop: ({ spacing }: Theme) => string;
+        padding: ({ spacing }: Theme) => string;
+        border: "1px solid";
+        borderColor: "divider";
+        borderRadius: ({ spacing }: Theme) => string;
+    };
+    traceField: {
+        display: "flex";
+        alignItems: "flex-start";
+        gap: ({ spacing }: Theme) => string;
+    };
+    traceFieldLabel: {
+        flexShrink: number;
+    };
+    traceReference: {
+        display: "flex";
+        borderRadius: ({ spacing }: Theme) => string;
+        padding: ({ spacing }: Theme) => string;
+        gap: ({ spacing }: Theme) => string;
+        backgroundColor: ({ palette }: Theme) => string;
+        color: ({ palette }: Theme) => string;
+    };
+    traceStatusSuccess: {
+        color: ({ palette }: Theme) => string;
+    };
+    traceStatusError: {
+        color: ({ palette }: Theme) => string;
+    };
+    codeArea: {
+        position: "relative";
+        width: string;
+    };
+    codeAreaPre: {
+        margin: number;
+        padding: ({ spacing }: Theme) => string;
+        borderRadius: ({ spacing }: Theme) => string;
+        backgroundColor: ({ palette }: Theme) => string;
+        fontFamily: ({ typography }: Theme) => string;
+        fontSize: ({ typography }: Theme) => string | number;
+        lineHeight: ({ typography }: Theme) => string | number;
+        whiteSpace: "pre-wrap";
+        wordBreak: "break-word";
+        overflowY: "auto";
+    };
+    codeAreaPreError: {
+        borderLeft: ({ palette }: Theme) => string;
+        backgroundColor: ({ palette }: Theme) => string;
+    };
+    codeAreaFullViewButton: {
+        position: "absolute";
+        top: ({ spacing }: Theme) => string;
+        right: ({ spacing }: Theme) => string;
+    };
+    fullViewDialog: {
+        margin: ({ spacing }: Theme) => string;
+    };
+    fullViewPaper: {
+        borderRadius: number;
+    };
+    fullViewTitle: {
+        display: "flex";
+        alignItems: "center";
+        justifyContent: "space-between";
+        padding: ({ spacing }: Theme) => string;
+        borderBottom: string;
+        borderBottomColor: "divider";
+    };
+    fullViewDialogContent: {
+        padding: number;
+        '&:first-of-type': {
+            paddingTop: number;
+        };
+    };
+    fullViewPre: {
+        margin: number;
+        padding: ({ spacing }: Theme) => string;
+        background: ({ palette, spacing }: Theme) => string;
+        fontFamily: ({ typography }: Theme) => string;
+        fontSize: ({ typography }: Theme) => string | number;
+        whiteSpace: "pre-wrap";
+        wordBreak: "break-word";
+        lineHeight: number;
+        counterReset: "line";
+    };
+    fullViewLine: {
+        display: "block";
+        '&::before': {
+            counterIncrement: "line";
+            content: "counter(line)";
+            display: "inline-block";
+            width: string;
+            marginRight: string;
+            textAlign: "right";
+            color: ({ palette }: Theme) => string;
+            userSelect: "none";
+        };
+    };
+    groupHeader: {
+        textAlign: "left";
+        display: "flex";
+        alignItems: "center";
+        borderRadius: number;
+        gap: ({ spacing }: Theme) => string;
+    };
+    errorBadge: {
+        color: ({ palette }: Theme) => string;
+        fontWeight: number;
+        display: "flex";
+        alignItems: "center";
+        gap: ({ spacing }: Theme) => string;
+    };
+    syntaxToken_key: {
+        color: "#881280";
+    };
+    syntaxToken_string: {
+        color: "#c41a16";
+    };
+    syntaxToken_number: {
+        color: "#1c00cf";
+    };
+    syntaxToken_boolean: {
+        color: "#1c00cf";
+    };
+    syntaxToken_null: {
+        color: "#808080";
+    };
+    syntaxToken_punctuation: {
+        color: ({ palette }: Theme) => string;
+    };
+    groupListItem: {
+        borderBottom: string;
+        borderColor: "divider";
+        '&:first-of-type .MuiButton-root': {
+            borderRadius: ({ spacing }: Theme) => string;
+        };
+        '&:last-of-type:not([aria-expanded=true]) .MuiButton-root': {
+            borderRadius: ({ spacing }: Theme) => string;
+        };
+        '&:last-of-type': {
+            borderBottomWidth: number;
+        };
+    };
+};

package/dist/types/chat/index.d.ts

@@ -0,0 +1,21 @@
+export type { ChatSxProps, ChatErrorAction, ChatUserMessageProps, ChatAgentMessageProps, ChatAgentMessageMarkdownProps, ChatErrorMessageProps, ChatSuggestionButtonProps, ChatThinkingProps, ChatLoaderProps, ChatContentProps, ChatContentRef, ChatHeaderProps, ChatFooterProps, ChatModelOption, ChatStarterItem, ChatStarterProps, ChatRatingActionProps, ChatToolItem, ChatToolTraceProps, ChatToolCodeAreaProps, ChatToolFullViewDialogProps, ChatToolGroupProps, } from './types.js';
+export { CHAT_MAX_WIDTH, CHAT_SCROLL_DELAY, CHAT_DIVIDER_DELAY, CHAT_TOOL_CODE_AREA_MAX_HEIGHT, } from './const.js';
+export { useTypewriter } from './use-typewriter.js';
+export { ChatUserMessage } from './bubbles/chat-user-message.js';
+export { ChatAgentMessage } from './bubbles/chat-agent-message.js';
+export { ChatAgentMessageMarkdown } from './bubbles/chat-agent-message-markdown.js';
+export { ChatErrorMessage } from './bubbles/chat-error-message.js';
+export { ChatSuggestionButton } from './bubbles/chat-suggestion-button.js';
+export { ChatMessageOverflow } from './bubbles/styles.js';
+export { ChatThinking } from './feedback/chat-thinking.js';
+export { ChatLoader } from './feedback/chat-loader.js';
+export { ChatContent } from './containers/chat-content.js';
+export { ChatHeader } from './containers/chat-header.js';
+export { ChatFooter } from './containers/chat-footer.js';
+export { ChatStarter } from './containers/chat-starter.js';
+export { ChatActionsContainer } from './feedback/chat-actions-container.js';
+export { ChatRatingAction } from './feedback/chat-rating-action.js';
+export { ChatToolTrace } from './feedback/chat-tool-trace.js';
+export { ChatToolCodeArea } from './feedback/chat-tool-code-area.js';
+export { ChatToolFullViewDialog } from './feedback/chat-tool-full-view-dialog.js';
+export { ChatToolGroup } from './feedback/chat-tool-group.js';