@brainfish-ai/devdoc 0.1.42 → 0.1.44

package/renderer/components/docs-viewer/agent/agent-popup-button.js

@@ -0,0 +1,99 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { Sparkle, X } from '@phosphor-icons/react';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+import { useSuggestions } from '@/lib/api-docs/agent/use-suggestions';
+export function AgentPopupButton({ onClick, onQuestionClick, className, currentEndpoint, endpointIndex = [] }) {
+    const [showSuggestions, setShowSuggestions] = useState(false);
+    const [isDismissed, setIsDismissed] = useState(false);
+    // Use shared suggestions hook - limit to 3 for popup
+    const { suggestions, isLoading } = useSuggestions({
+        currentEndpoint,
+        endpointIndex,
+        limit: 3
+    });
+    // Show suggestions after a delay (only if not dismissed and we have suggestions)
+    useEffect(()=>{
+        if (isDismissed || isLoading || suggestions.length === 0) return;
+        const timer = setTimeout(()=>{
+            setShowSuggestions(true);
+        }, 1500) // 1.5 second delay
+        ;
+        return ()=>clearTimeout(timer);
+    }, [
+        isDismissed,
+        isLoading,
+        suggestions.length
+    ]);
+    // Reset dismissed state when endpoint changes
+    useEffect(()=>{
+        setIsDismissed(false);
+        setShowSuggestions(false);
+    }, [
+        currentEndpoint?.id
+    ]);
+    const handleDismiss = (e)=>{
+        e.stopPropagation();
+        setShowSuggestions(false);
+        setIsDismissed(true);
+    };
+    const handleQuestionClick = (prompt)=>{
+        if (onQuestionClick) {
+            onQuestionClick(prompt);
+        } else {
+            onClick();
+        }
+    };
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "fixed bottom-6 right-6 z-50 flex flex-col items-end gap-2",
+        children: [
+            showSuggestions && suggestions.length > 0 && /*#__PURE__*/ _jsxs(_Fragment, {
+                children: [
+                    /*#__PURE__*/ _jsx("button", {
+                        onClick: handleDismiss,
+                        className: "size-6 rounded-full bg-background border border-border shadow-sm flex items-center justify-center hover:bg-muted transition-colors agent-suggestions-enter",
+                        "aria-label": "Dismiss suggestions",
+                        children: /*#__PURE__*/ _jsx(X, {
+                            className: "size-3 text-muted-foreground",
+                            weight: "bold"
+                        })
+                    }),
+                    suggestions.map((suggestion, index)=>/*#__PURE__*/ _jsxs("button", {
+                            onClick: ()=>handleQuestionClick(suggestion.prompt),
+                            className: cn("text-sm px-4 py-2 rounded-full", "bg-background border border-border shadow-md", "hover:bg-muted hover:shadow-lg transition-all", "text-foreground", "agent-suggestion-item"),
+                            style: {
+                                animationDelay: `${(suggestions.length - index) * 80}ms`
+                            },
+                            children: [
+                                /*#__PURE__*/ _jsx("span", {
+                                    className: "font-medium",
+                                    children: suggestion.title
+                                }),
+                                ' ',
+                                /*#__PURE__*/ _jsx("span", {
+                                    className: "text-muted-foreground",
+                                    children: suggestion.label
+                                })
+                            ]
+                        }, index))
+                ]
+            }),
+            /*#__PURE__*/ _jsxs(Button, {
+                onClick: onClick,
+                className: cn("h-10 px-4 rounded-full", "bg-primary hover:bg-primary/90 text-primary-foreground", "shadow-md shadow-primary/20 hover:shadow-lg hover:shadow-primary/30", "transition-all duration-200", "agent-popup-enter", "gap-2 font-medium", className),
+                "aria-label": "Open AI Assistant",
+                children: [
+                    /*#__PURE__*/ _jsx(Sparkle, {
+                        className: "size-4",
+                        weight: "fill"
+                    }),
+                    /*#__PURE__*/ _jsx("span", {
+                        children: "Ask AI"
+                    })
+                ]
+            })
+        ]
+    });
+}

package/renderer/components/docs-viewer/agent/cards/debug-context-card.js

@@ -0,0 +1,107 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Bug, ArrowsClockwise } from '@phosphor-icons/react';
+import { Badge } from '@/components/ui/badge';
+import { MethodBadge } from '../../shared/method-badge';
+import { cn } from '@/lib/utils';
+export function DebugContextCard({ context }) {
+    const isError = context.status >= 400;
+    // Try to format the response body
+    let formattedBody = context.responseBody;
+    try {
+        const parsed = JSON.parse(context.responseBody);
+        formattedBody = JSON.stringify(parsed, null, 2);
+    } catch  {
+    // Keep original
+    }
+    // Truncate if too long
+    const truncatedBody = formattedBody.length > 300 ? formattedBody.slice(0, 300) + '...' : formattedBody;
+    return /*#__PURE__*/ _jsx("div", {
+        className: cn("fade-in slide-in-from-bottom-1 animate-in duration-150", "mx-auto w-full max-w-[var(--thread-max-width)] px-2 py-3"),
+        children: /*#__PURE__*/ _jsxs("div", {
+            className: "rounded-lg border border-border bg-muted/30 overflow-hidden",
+            children: [
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex items-center gap-2 px-3 py-2 bg-muted/50 border-b border-border",
+                    children: [
+                        /*#__PURE__*/ _jsx(Bug, {
+                            className: "h-4 w-4 text-amber-500",
+                            weight: "bold"
+                        }),
+                        /*#__PURE__*/ _jsx("span", {
+                            className: "text-xs font-medium text-muted-foreground",
+                            children: "Debug Context"
+                        })
+                    ]
+                }),
+                context.endpointName && /*#__PURE__*/ _jsxs("div", {
+                    className: "px-3 py-2 border-b border-border",
+                    children: [
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: "flex items-center gap-2",
+                            children: [
+                                context.endpointMethod && /*#__PURE__*/ _jsx(MethodBadge, {
+                                    method: context.endpointMethod,
+                                    size: "sm"
+                                }),
+                                /*#__PURE__*/ _jsx("span", {
+                                    className: "text-sm font-medium text-foreground",
+                                    children: context.endpointName
+                                })
+                            ]
+                        }),
+                        context.endpointPath && /*#__PURE__*/ _jsx("p", {
+                            className: "text-xs text-muted-foreground mt-1 font-mono",
+                            children: context.endpointPath
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsx("div", {
+                    className: "px-3 py-2 border-b border-border",
+                    children: /*#__PURE__*/ _jsxs("div", {
+                        className: "flex items-center gap-2",
+                        children: [
+                            /*#__PURE__*/ _jsx(ArrowsClockwise, {
+                                className: "h-3.5 w-3.5 text-muted-foreground",
+                                weight: "bold"
+                            }),
+                            /*#__PURE__*/ _jsx("span", {
+                                className: "text-xs text-muted-foreground",
+                                children: "Response"
+                            }),
+                            /*#__PURE__*/ _jsxs(Badge, {
+                                variant: isError ? 'destructive' : 'default',
+                                className: "text-xs h-5",
+                                children: [
+                                    context.status,
+                                    " ",
+                                    context.statusText
+                                ]
+                            })
+                        ]
+                    })
+                }),
+                /*#__PURE__*/ _jsx("div", {
+                    className: "px-3 py-2",
+                    children: /*#__PURE__*/ _jsx("pre", {
+                        className: "text-xs font-mono text-muted-foreground bg-background/50 rounded p-2 overflow-x-auto max-h-32 overflow-y-auto",
+                        children: truncatedBody
+                    })
+                }),
+                context.requestBody && /*#__PURE__*/ _jsxs("div", {
+                    className: "px-3 py-2 border-t border-border",
+                    children: [
+                        /*#__PURE__*/ _jsx("p", {
+                            className: "text-xs text-muted-foreground mb-1",
+                            children: "Request Body"
+                        }),
+                        /*#__PURE__*/ _jsx("pre", {
+                            className: "text-xs font-mono text-muted-foreground bg-background/50 rounded p-2 overflow-x-auto max-h-20 overflow-y-auto",
+                            children: context.requestBody.length > 200 ? context.requestBody.slice(0, 200) + '...' : context.requestBody
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+}

package/renderer/components/docs-viewer/agent/cards/endpoint-context-card.js

@@ -0,0 +1,57 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Crosshair } from '@phosphor-icons/react';
+import { MethodBadge } from '../../shared/method-badge';
+import { cn } from '@/lib/utils';
+export function EndpointContextCard({ endpoint }) {
+    return /*#__PURE__*/ _jsx("div", {
+        className: cn("fade-in slide-in-from-bottom-1 animate-in duration-150", "mx-auto w-full max-w-[var(--thread-max-width)] px-2 py-2"),
+        children: /*#__PURE__*/ _jsxs("div", {
+            className: "rounded-lg border border-border/60 bg-muted/20 overflow-hidden",
+            children: [
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex items-center gap-2 px-3 py-2 bg-muted/30 border-b border-border/40",
+                    children: [
+                        /*#__PURE__*/ _jsx(Crosshair, {
+                            className: "h-3.5 w-3.5 text-muted-foreground",
+                            weight: "bold"
+                        }),
+                        /*#__PURE__*/ _jsx("span", {
+                            className: "text-xs font-medium text-muted-foreground",
+                            children: "Asking about"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsx("div", {
+                    className: "p-3",
+                    children: /*#__PURE__*/ _jsxs("div", {
+                        className: "flex items-start gap-3",
+                        children: [
+                            /*#__PURE__*/ _jsx(MethodBadge, {
+                                method: endpoint.method,
+                                size: "sm"
+                            }),
+                            /*#__PURE__*/ _jsxs("div", {
+                                className: "flex-1 min-w-0",
+                                children: [
+                                    /*#__PURE__*/ _jsx("p", {
+                                        className: "text-sm font-medium text-foreground truncate",
+                                        children: endpoint.name
+                                    }),
+                                    /*#__PURE__*/ _jsx("code", {
+                                        className: "text-xs text-muted-foreground font-mono block truncate mt-0.5",
+                                        children: endpoint.path
+                                    }),
+                                    endpoint.description && /*#__PURE__*/ _jsx("p", {
+                                        className: "text-xs text-muted-foreground mt-1.5 line-clamp-2",
+                                        children: endpoint.description
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                })
+            ]
+        })
+    });
+}

package/renderer/components/docs-viewer/agent/cards/index.js

@@ -0,0 +1,45 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DebugContextCard } from './debug-context-card';
+import { ResponseOptionsCard } from './response-options-card';
+import { EndpointContextCard } from './endpoint-context-card';
+import { decodeCardMessage } from './types';
+// Export types and utilities
+export * from './types';
+export { DebugContextCard } from './debug-context-card';
+export { ResponseOptionsCard, detectErrorType } from './response-options-card';
+export { EndpointContextCard } from './endpoint-context-card';
+/**
+ * Renders a card based on the encoded message content.
+ * Returns null if the content is not a valid card message.
+ */ export function CardRenderer({ content, actions }) {
+    const cardData = decodeCardMessage(content);
+    if (!cardData) {
+        return null;
+    }
+    return /*#__PURE__*/ _jsx(CardByType, {
+        data: cardData,
+        actions: actions
+    });
+}
+/**
+ * Renders the appropriate card component based on the card type.
+ */ function CardByType({ data, actions }) {
+    switch(data.type){
+        case 'debug_context':
+            return /*#__PURE__*/ _jsx(DebugContextCard, {
+                context: data.context
+            });
+        case 'response_options':
+            return /*#__PURE__*/ _jsx(ResponseOptionsCard, {
+                errorType: data.errorType,
+                actions: actions
+            });
+        case 'endpoint_context':
+            return /*#__PURE__*/ _jsx(EndpointContextCard, {
+                endpoint: data.endpoint
+            });
+        default:
+            return null;
+    }
+}

package/renderer/components/docs-viewer/agent/cards/response-options-card.js

@@ -0,0 +1,154 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ShieldCheck, CaretRight, Sliders, Code, ListBullets } from '@phosphor-icons/react';
+import { cn } from '@/lib/utils';
+export function ResponseOptionsCard({ errorType, actions }) {
+    // Build list of actions based on error type
+    const actionButtons = [];
+    // Auth errors
+    if (errorType === 'auth') {
+        if (actions?.onOpenGlobalAuth) {
+            actionButtons.push({
+                id: 'global-auth',
+                icon: ShieldCheck,
+                iconColor: 'text-green-600',
+                bgColor: 'bg-green-500/10',
+                hoverBorder: 'hover:border-green-500/30',
+                title: 'Set Global Auth',
+                description: 'Configure API credentials for all requests',
+                onClick: actions.onOpenGlobalAuth
+            });
+        }
+        if (actions?.onNavigateToAuthTab) {
+            actionButtons.push({
+                id: 'auth-tab',
+                icon: ShieldCheck,
+                iconColor: 'text-blue-600',
+                bgColor: 'bg-blue-500/10',
+                hoverBorder: 'hover:border-blue-500/30',
+                title: 'Go to Authorization Tab',
+                description: 'Set auth for this specific request',
+                onClick: actions.onNavigateToAuthTab
+            });
+        }
+    }
+    // Missing params errors
+    if (errorType === 'missing_params' || errorType === 'validation') {
+        if (actions?.onNavigateToParamsTab) {
+            actionButtons.push({
+                id: 'params-tab',
+                icon: Sliders,
+                iconColor: 'text-purple-600',
+                bgColor: 'bg-purple-500/10',
+                hoverBorder: 'hover:border-purple-500/30',
+                title: 'Go to Parameters Tab',
+                description: 'Check and fill in required parameters',
+                onClick: actions.onNavigateToParamsTab
+            });
+        }
+    }
+    // Invalid body errors
+    if (errorType === 'invalid_body' || errorType === 'validation') {
+        if (actions?.onNavigateToBodyTab) {
+            actionButtons.push({
+                id: 'body-tab',
+                icon: Code,
+                iconColor: 'text-amber-600',
+                bgColor: 'bg-amber-500/10',
+                hoverBorder: 'hover:border-amber-500/30',
+                title: 'Go to Body Tab',
+                description: 'Review and fix the request body',
+                onClick: actions.onNavigateToBodyTab
+            });
+        }
+    }
+    // Missing headers errors
+    if (errorType === 'missing_headers') {
+        if (actions?.onNavigateToHeadersTab) {
+            actionButtons.push({
+                id: 'headers-tab',
+                icon: ListBullets,
+                iconColor: 'text-cyan-600',
+                bgColor: 'bg-cyan-500/10',
+                hoverBorder: 'hover:border-cyan-500/30',
+                title: 'Go to Headers Tab',
+                description: 'Add required request headers',
+                onClick: actions.onNavigateToHeadersTab
+            });
+        }
+    }
+    // Don't render if no actions
+    if (actionButtons.length === 0) {
+        return null;
+    }
+    return /*#__PURE__*/ _jsx("div", {
+        className: cn("fade-in slide-in-from-bottom-1 animate-in duration-150", "mx-auto w-full max-w-[var(--thread-max-width)] px-2 py-2"),
+        children: /*#__PURE__*/ _jsxs("div", {
+            className: "space-y-2",
+            children: [
+                /*#__PURE__*/ _jsx("p", {
+                    className: "text-xs font-medium text-muted-foreground px-1 mb-3",
+                    children: "Suggested Actions"
+                }),
+                actionButtons.map((action)=>/*#__PURE__*/ _jsxs("button", {
+                        onClick: action.onClick,
+                        className: cn("w-full flex items-center gap-3 p-3 rounded-lg border border-border", "bg-muted/30 hover:bg-muted/60 transition-all group text-left", action.hoverBorder),
+                        children: [
+                            /*#__PURE__*/ _jsx("div", {
+                                className: cn("shrink-0 w-8 h-8 rounded-md flex items-center justify-center", action.bgColor),
+                                children: /*#__PURE__*/ _jsx(action.icon, {
+                                    className: cn("h-4 w-4", action.iconColor),
+                                    weight: "bold"
+                                })
+                            }),
+                            /*#__PURE__*/ _jsxs("div", {
+                                className: "flex-1 min-w-0",
+                                children: [
+                                    /*#__PURE__*/ _jsx("p", {
+                                        className: "text-sm font-medium text-foreground",
+                                        children: action.title
+                                    }),
+                                    /*#__PURE__*/ _jsx("p", {
+                                        className: "text-xs text-muted-foreground truncate",
+                                        children: action.description
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsx(CaretRight, {
+                                className: "shrink-0 h-4 w-4 text-muted-foreground group-hover:text-foreground transition-colors",
+                                weight: "bold"
+                            })
+                        ]
+                    }, action.id))
+            ]
+        })
+    });
+}
+// Helper to determine error type from status and response body
+export function detectErrorType(status, responseBody) {
+    const lowerBody = responseBody.toLowerCase();
+    // Auth errors (401, 403)
+    if (status === 401 || status === 403) return 'auth';
+    if (lowerBody.includes('unauthorized') || lowerBody.includes('authentication') || lowerBody.includes('api key') || lowerBody.includes('api_key') || lowerBody.includes('token') || lowerBody.includes('credentials') || lowerBody.includes('forbidden')) {
+        return 'auth';
+    }
+    // Missing parameters
+    if (lowerBody.includes('missing') && (lowerBody.includes('param') || lowerBody.includes('query')) || lowerBody.includes('required parameter') || lowerBody.includes('required field') || lowerBody.includes('parameter is required')) {
+        return 'missing_params';
+    }
+    // Invalid body
+    if (lowerBody.includes('invalid json') || lowerBody.includes('parse error') || lowerBody.includes('body') && (lowerBody.includes('invalid') || lowerBody.includes('malformed')) || lowerBody.includes('request body') || lowerBody.includes('payload')) {
+        return 'invalid_body';
+    }
+    // Missing headers
+    if (lowerBody.includes('missing header') || lowerBody.includes('required header') || lowerBody.includes('header') && lowerBody.includes('required') || lowerBody.includes('content-type')) {
+        return 'missing_headers';
+    }
+    // Generic validation errors (400, 422)
+    if (status === 400 || status === 422) return 'validation';
+    // Not found
+    if (status === 404) return 'not_found';
+    // Server errors
+    if (status >= 500) return 'server';
+    return 'generic';
+}

package/renderer/components/docs-viewer/agent/cards/types.js

@@ -0,0 +1,22 @@
+// Prefix used to identify card messages
+export const CARD_MESSAGE_PREFIX = '__CARD__';
+// Helper to encode card data into a message
+export function encodeCardMessage(data) {
+    return `${CARD_MESSAGE_PREFIX}${JSON.stringify(data)}`;
+}
+// Helper to decode card data from a message
+export function decodeCardMessage(content) {
+    if (!content?.startsWith(CARD_MESSAGE_PREFIX)) {
+        return null;
+    }
+    try {
+        const json = content.slice(CARD_MESSAGE_PREFIX.length);
+        return JSON.parse(json);
+    } catch  {
+        return null;
+    }
+}
+// Check if a message is a card message
+export function isCardMessage(content) {
+    return content?.startsWith(CARD_MESSAGE_PREFIX) ?? false;
+}

package/renderer/components/docs-viewer/agent/chat-message.js

@@ -0,0 +1,2 @@
+// Re-export from messages folder for backwards compatibility
+export { ChatMessage, TypingIndicator, UserMessage, AssistantMessage, ToolCallDisplay } from './messages';

package/renderer/components/docs-viewer/agent/index.js

@@ -0,0 +1,7 @@
+/**
+ * Agent Components Exports
+ */ export { AgentChat } from './agent-chat';
+export { ChatMessage, TypingIndicator } from './chat-message';
+export { AgentPopupButton } from './agent-popup-button';
+// Re-export shared hook and types
+export { useSuggestions } from '@/lib/api-docs/agent/use-suggestions';

package/renderer/components/docs-viewer/agent/messages/assistant-message.js

@@ -0,0 +1,108 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback } from 'react';
+import { Copy, Check, Trash } from '@phosphor-icons/react';
+import { cn } from '@/lib/utils';
+import { MarkdownRenderer } from '../../shared/markdown-renderer';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+import { ToolCallDisplay } from './tool-call-display';
+export function AssistantMessage({ content, messageId, toolInvocations, isStreaming, onDeleteMessage, onNavigate, onNavigateToDocPage, onOpenFile }) {
+    return /*#__PURE__*/ _jsxs("div", {
+        className: cn("aui-assistant-message-root", "fade-in slide-in-from-bottom-1 animate-in duration-150", "relative mx-auto w-full max-w-[var(--thread-max-width)] py-3"),
+        "data-role": "assistant",
+        children: [
+            content && /*#__PURE__*/ _jsx("div", {
+                className: "aui-assistant-message-content wrap-break-word px-2 text-foreground leading-relaxed",
+                children: /*#__PURE__*/ _jsx("div", {
+                    className: "prose prose-sm dark:prose-invert max-w-none",
+                    children: /*#__PURE__*/ _jsx(MarkdownRenderer, {
+                        content: content
+                    })
+                })
+            }),
+            toolInvocations && toolInvocations.length > 0 && /*#__PURE__*/ _jsx("div", {
+                className: "mt-2 px-2 space-y-1",
+                children: toolInvocations.map((tool)=>/*#__PURE__*/ _jsx(ToolCallDisplay, {
+                        tool: tool,
+                        onNavigate: onNavigate,
+                        onNavigateToDocPage: onNavigateToDocPage,
+                        onOpenFile: onOpenFile
+                    }, tool.toolCallId))
+            }),
+            !isStreaming && /*#__PURE__*/ _jsx("div", {
+                className: "aui-assistant-message-footer mt-1 px-2 flex justify-end",
+                children: /*#__PURE__*/ _jsx(AssistantActionBar, {
+                    content: content,
+                    messageId: messageId,
+                    onDeleteMessage: onDeleteMessage
+                })
+            })
+        ]
+    });
+}
+function AssistantActionBar({ content, messageId, onDeleteMessage }) {
+    const [copied, setCopied] = useState(false);
+    const handleCopy = useCallback(async ()=>{
+        try {
+            await navigator.clipboard.writeText(content);
+            setCopied(true);
+            setTimeout(()=>setCopied(false), 2000);
+        } catch (err) {
+            console.error('Failed to copy:', err);
+        }
+    }, [
+        content
+    ]);
+    const handleDelete = useCallback(()=>{
+        if (messageId && onDeleteMessage) {
+            onDeleteMessage(messageId);
+        }
+    }, [
+        messageId,
+        onDeleteMessage
+    ]);
+    return /*#__PURE__*/ _jsxs("div", {
+        className: cn("aui-assistant-action-bar-root", "flex gap-1 text-muted-foreground"),
+        children: [
+            /*#__PURE__*/ _jsxs(Tooltip, {
+                children: [
+                    /*#__PURE__*/ _jsx(TooltipTrigger, {
+                        asChild: true,
+                        children: /*#__PURE__*/ _jsx("button", {
+                            onClick: handleCopy,
+                            className: "aui-button-icon size-6 p-1 rounded hover:bg-accent hover:text-foreground transition-colors",
+                            "aria-label": copied ? "Copied" : "Copy",
+                            children: copied ? /*#__PURE__*/ _jsx(Check, {
+                                className: "size-4",
+                                weight: "bold"
+                            }) : /*#__PURE__*/ _jsx(Copy, {
+                                className: "size-4"
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(TooltipContent, {
+                        children: copied ? "Copied!" : "Copy"
+                    })
+                ]
+            }),
+            messageId && onDeleteMessage && /*#__PURE__*/ _jsxs(Tooltip, {
+                children: [
+                    /*#__PURE__*/ _jsx(TooltipTrigger, {
+                        asChild: true,
+                        children: /*#__PURE__*/ _jsx("button", {
+                            onClick: handleDelete,
+                            className: "aui-button-icon size-6 p-1 rounded hover:bg-accent hover:text-foreground transition-colors",
+                            "aria-label": "Delete message",
+                            children: /*#__PURE__*/ _jsx(Trash, {
+                                className: "size-4"
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(TooltipContent, {
+                        children: "Delete message"
+                    })
+                ]
+            })
+        ]
+    });
+}

package/renderer/components/docs-viewer/agent/messages/chat-message.js

@@ -0,0 +1,34 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CardRenderer, isCardMessage } from '../cards';
+import { UserMessage } from './user-message';
+import { AssistantMessage } from './assistant-message';
+export function ChatMessage({ role, content, messageId, images, toolInvocations, isStreaming, onDeleteMessage, onNavigate, onNavigateToDocPage, onOpenFile, cardActions }) {
+    if (role === 'user') {
+        return /*#__PURE__*/ _jsx(UserMessage, {
+            content: content,
+            images: images,
+            cardActions: cardActions
+        });
+    }
+    if (role === 'assistant') {
+        // Check if this is a card message (like response options)
+        if (isCardMessage(content)) {
+            return /*#__PURE__*/ _jsx(CardRenderer, {
+                content: content,
+                actions: cardActions
+            });
+        }
+        return /*#__PURE__*/ _jsx(AssistantMessage, {
+            content: content,
+            messageId: messageId,
+            toolInvocations: toolInvocations,
+            isStreaming: isStreaming,
+            onDeleteMessage: onDeleteMessage,
+            onNavigate: onNavigate,
+            onNavigateToDocPage: onNavigateToDocPage,
+            onOpenFile: onOpenFile
+        });
+    }
+    return null;
+}

package/renderer/components/docs-viewer/agent/messages/index.js

@@ -0,0 +1,6 @@
+// Main exports
+export { ChatMessage } from './chat-message';
+export { UserMessage } from './user-message';
+export { AssistantMessage } from './assistant-message';
+export { ToolCallDisplay } from './tool-call-display';
+export { TypingIndicator } from './typing-indicator';