@carto/ps-react-ui 4.4.0-chat-ui.1 → 4.4.0-chat-ui.3

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

@@ -1,3 +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/styles.d.ts

@@ -29,6 +29,12 @@ export declare const styles: {
     footer: {
         maxWidth: number;
         margin: string;
+        '& textarea': {
+            resize: "none";
+            maxHeight: string;
+            overflowY: "auto !important";
+            paddingRight: ({ spacing }: Theme) => string;
+        };
     };
     footerCaption: {
         textAlign: "center";

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

@@ -0,0 +1,4 @@
+import { ChatToolCodeAreaProps } from '../types';
+export declare function ChatToolCodeArea({ content, title, isError, labels, sx, }: ChatToolCodeAreaProps & {
+    isError?: boolean;
+}): import("react/jsx-runtime").JSX.Element;

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

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

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

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

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

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

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

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

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

@@ -2,4 +2,7 @@ export { ChatThinking } from './chat-thinking';
 export { ChatLoader } from './chat-loader';
 export { ChatActionsContainer } from './chat-actions-container';
 export { ChatRatingAction } from './chat-rating-action';
-export { ChatTools } from './chat-tools';
+export { ChatToolTrace } from './chat-tool-trace';
+export { ChatToolCodeArea } from './chat-tool-code-area';
+export { ChatToolFullViewDialog } from './chat-tool-full-view-dialog';
+export { ChatToolGroup } from './chat-tool-group';

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

@@ -50,16 +50,162 @@ export declare const styles: {
             toString: () => string;
         } & string} 1s ease-in-out infinite`;
     };
-    tools: {
+    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;
     };
-    toolHeader: {
+    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;
+        fontSize: string;
+        fontFamily: "monospace";
+        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: "monospace";
+        fontSize: string;
+        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;
     };
-    toolStatusIcon: {
+    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

@@ -1,5 +1,5 @@
-export type { ChatSxProps, ChatErrorAction, ChatUserMessageProps, ChatAgentMessageProps, ChatErrorMessageProps, ChatSuggestionButtonProps, ChatThinkingProps, ChatLoaderProps, ChatContentProps, ChatHeaderProps, ChatFooterProps, ChatStarterItem, ChatStarterProps, ChatActionsContainerProps, ChatRatingActionProps, ChatToolItem, ChatToolsProps, } from './types';
-export { CHAT_MAX_WIDTH, CHAT_SCROLL_DELAY, CHAT_DIVIDER_DELAY } from './const';
+export type { ChatSxProps, ChatErrorAction, ChatUserMessageProps, ChatAgentMessageProps, ChatErrorMessageProps, ChatSuggestionButtonProps, ChatThinkingProps, ChatLoaderProps, ChatContentProps, ChatHeaderProps, ChatFooterProps, ChatStarterItem, ChatStarterProps, ChatActionsContainerProps, ChatRatingActionProps, ChatToolItem, ChatToolTraceProps, ChatToolCodeAreaProps, ChatToolFullViewDialogProps, ChatToolGroupProps, } from './types';
+export { CHAT_MAX_WIDTH, CHAT_SCROLL_DELAY, CHAT_DIVIDER_DELAY, CHAT_TOOL_CODE_AREA_MAX_HEIGHT, } from './const';
 export { ChatUserMessage } from './bubbles/chat-user-message';
 export { ChatAgentMessage } from './bubbles/chat-agent-message';
 export { ChatErrorMessage } from './bubbles/chat-error-message';
@@ -13,4 +13,7 @@ export { ChatFooter } from './containers/chat-footer';
 export { ChatStarter } from './containers/chat-starter';
 export { ChatActionsContainer } from './feedback/chat-actions-container';
 export { ChatRatingAction } from './feedback/chat-rating-action';
-export { ChatTools } from './feedback/chat-tools';
+export { ChatToolTrace } from './feedback/chat-tool-trace';
+export { ChatToolCodeArea } from './feedback/chat-tool-code-area';
+export { ChatToolFullViewDialog } from './feedback/chat-tool-full-view-dialog';
+export { ChatToolGroup } from './feedback/chat-tool-group';

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

@@ -88,12 +88,65 @@ export interface ChatRatingActionProps {
 export interface ChatToolItem {
     id: string;
     name: string;
-    status: 'loading' | 'thinking' | 'complete' | 'error';
-    content?: ReactNode;
+    status: 'running' | 'complete' | 'error';
+    /** Display label shown while status is 'running'. Falls back to a capitalized `name`. */
+    runningLabel?: string;
+    /** Display label shown for non-running statuses. Falls back to a capitalized `name`. */
+    label?: string;
+    /** Friendly reference name for the tool (e.g. "add_marker"). Displayed with icon. */
+    reference?: string;
+    /** Execution duration in seconds (e.g. 1.8) */
+    duration?: number;
+    /** Input arguments as a JSON string or plain text */
+    inputArguments?: string;
+    /** Output as a JSON string or plain text */
+    output?: string;
+}
+export interface ChatToolTraceProps extends ChatSxProps {
+    tool: ChatToolItem;
+    /** Whether the trace accordion is expanded */
+    expanded?: boolean;
+    /** Callback when accordion expansion state changes */
+    onExpandedChange?: (expanded: boolean) => void;
+    labels?: {
+        toolExecuted?: string;
+        reference?: string;
+        duration?: string;
+        status?: string;
+        inputArguments?: string;
+        output?: string;
+        fullView?: string;
+        success?: string;
+        error?: string;
+        running?: string;
+    };
 }
-export interface ChatToolsProps extends ChatSxProps {
-    tools: ChatToolItem[];
+export interface ChatToolCodeAreaProps extends ChatSxProps {
+    /** Code content to display */
+    content: string;
+    /** Label for the full view dialog title */
+    title?: string;
     labels?: {
-        title?: string;
+        fullView?: string;
+    };
+}
+export interface ChatToolFullViewDialogProps {
+    open: boolean;
+    onClose: () => void;
+    title: string;
+    content: string;
+}
+export interface ChatToolGroupProps extends ChatSxProps {
+    tools: ChatToolItem[];
+    /** Whether the group accordion is expanded */
+    expanded?: boolean;
+    /** Callback when group expansion state changes */
+    onExpandedChange?: (expanded: boolean) => void;
+    /** Map of tool IDs to their individual expanded state. Used to preserve expansion state during grouping. */
+    expandedTools?: Record<string, boolean>;
+    /** Callback when an individual tool's expansion state changes */
+    onToolExpandedChange?: (value: Record<string, boolean>, toolId?: string) => void;
+    labels?: ChatToolTraceProps['labels'] & {
+        toolsUsed?: string;
     };
 }