@brainfish-ai/devdoc 0.1.42 → 0.1.43

package/renderer/components/docs-viewer/playground/request-tabs.js

@@ -0,0 +1,240 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Badge } from '@/components/ui/badge';
+// import { Button } from '@/components/ui/button'
+import { ShieldCheck, Link as LinkIcon, WarningCircle } from '@phosphor-icons/react';
+import { KeyValueEditor } from './key-value-editor';
+import { BodyEditor } from './body-editor';
+import { AuthEditor } from './auth-editor';
+import { getAuthTypeLabel } from '@/lib/api-docs/auth';
+import { usePlaygroundNavigation } from '@/lib/api-docs/playground/navigation-context';
+import { cn } from '@/lib/utils';
+export function RequestTabs({ params, headers, body, bodyContentType, auth, usingGlobalAuth = false, globalAuth, onParamsChange, onHeadersChange, onBodyChange, onBodyContentTypeChange, onAuthChange, onUseGlobalAuth }) {
+    const paramsCount = params.filter((p)=>p.active && p.key).length;
+    const headersCount = headers.filter((h)=>h.active && h.key).length;
+    const hasBody = body !== null && body.length > 0;
+    const hasAuth = auth.authType !== 'none';
+    // Always default to Parameters tab for consistency
+    const [activeTab, setActiveTab] = useState('params');
+    // Get navigation context
+    const { state: navState, setActiveTab: syncActiveTab, clearHighlight } = usePlaygroundNavigation();
+    // Sync with navigation context
+    useEffect(()=>{
+        if (navState.activeTab && navState.activeTab !== activeTab) {
+            setActiveTab(navState.activeTab);
+        }
+    }, [
+        navState.activeTab,
+        activeTab
+    ]);
+    // Update context when tab changes locally
+    const handleTabChange = (tab)=>{
+        setActiveTab(tab);
+        syncActiveTab(tab);
+        clearHighlight();
+    };
+    // Check if a tab should show error indicator
+    const shouldShowTabError = (tab)=>{
+        if (!navState.showError || !navState.highlightField) return false;
+        switch(tab){
+            case 'params':
+                return navState.highlightField.type === 'param';
+            case 'headers':
+                return navState.highlightField.type === 'header';
+            case 'body':
+                return navState.highlightField.type === 'body';
+            case 'auth':
+                return navState.highlightField.type === 'auth';
+            default:
+                return false;
+        }
+    };
+    return /*#__PURE__*/ _jsxs(Tabs, {
+        value: activeTab,
+        onValueChange: handleTabChange,
+        className: "flex flex-col h-full gap-0",
+        children: [
+            /*#__PURE__*/ _jsxs(TabsList, {
+                className: "w-full justify-start rounded-none border-b bg-muted/30 h-auto p-0 overflow-x-auto overflow-y-hidden flex-shrink-0",
+                children: [
+                    /*#__PURE__*/ _jsxs(TabsTrigger, {
+                        value: "params",
+                        className: cn("rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-background px-2 sm:px-4 py-2 sm:py-3 text-xs sm:text-sm whitespace-nowrap", shouldShowTabError('params') && "border-red-500 data-[state=active]:border-red-500"),
+                        children: [
+                            /*#__PURE__*/ _jsx("span", {
+                                className: "hidden sm:inline",
+                                children: "Parameters"
+                            }),
+                            /*#__PURE__*/ _jsx("span", {
+                                className: "sm:hidden",
+                                children: "Params"
+                            }),
+                            shouldShowTabError('params') ? /*#__PURE__*/ _jsx(WarningCircle, {
+                                className: "ml-1 sm:ml-2 h-4 w-4 text-red-500 animate-pulse",
+                                weight: "fill"
+                            }) : paramsCount > 0 ? /*#__PURE__*/ _jsx(Badge, {
+                                variant: "secondary",
+                                className: "ml-1 sm:ml-2 h-4 sm:h-5 px-1 sm:px-1.5 text-xs",
+                                children: paramsCount
+                            }) : null
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs(TabsTrigger, {
+                        value: "body",
+                        className: cn("rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-background px-2 sm:px-4 py-2 sm:py-3 text-xs sm:text-sm whitespace-nowrap", shouldShowTabError('body') && "border-red-500 data-[state=active]:border-red-500"),
+                        children: [
+                            "Body",
+                            shouldShowTabError('body') ? /*#__PURE__*/ _jsx(WarningCircle, {
+                                className: "ml-1 sm:ml-2 h-4 w-4 text-red-500 animate-pulse",
+                                weight: "fill"
+                            }) : hasBody ? /*#__PURE__*/ _jsx("span", {
+                                className: "ml-1 sm:ml-2 w-2 h-2 bg-primary rounded-full"
+                            }) : null
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs(TabsTrigger, {
+                        value: "headers",
+                        className: cn("rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-background px-2 sm:px-4 py-2 sm:py-3 text-xs sm:text-sm whitespace-nowrap", shouldShowTabError('headers') && "border-red-500 data-[state=active]:border-red-500"),
+                        children: [
+                            "Headers",
+                            shouldShowTabError('headers') ? /*#__PURE__*/ _jsx(WarningCircle, {
+                                className: "ml-1 sm:ml-2 h-4 w-4 text-red-500 animate-pulse",
+                                weight: "fill"
+                            }) : headersCount > 0 ? /*#__PURE__*/ _jsx(Badge, {
+                                variant: "secondary",
+                                className: "ml-1 sm:ml-2 h-4 sm:h-5 px-1 sm:px-1.5 text-xs",
+                                children: headersCount
+                            }) : null
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs(TabsTrigger, {
+                        value: "auth",
+                        className: cn("rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-background px-2 sm:px-4 py-2 sm:py-3 text-xs sm:text-sm whitespace-nowrap", shouldShowTabError('auth') && "border-red-500 data-[state=active]:border-red-500"),
+                        children: [
+                            /*#__PURE__*/ _jsx("span", {
+                                className: "hidden sm:inline",
+                                children: "Authorization"
+                            }),
+                            /*#__PURE__*/ _jsx("span", {
+                                className: "sm:hidden",
+                                children: "Auth"
+                            }),
+                            shouldShowTabError('auth') ? /*#__PURE__*/ _jsx(WarningCircle, {
+                                className: "ml-1 sm:ml-2 h-4 w-4 text-red-500 animate-pulse",
+                                weight: "fill"
+                            }) : usingGlobalAuth ? /*#__PURE__*/ _jsx(LinkIcon, {
+                                className: "ml-1 sm:ml-2 h-3.5 w-3.5 text-green-600 dark:text-green-400",
+                                weight: "bold"
+                            }) : hasAuth ? /*#__PURE__*/ _jsx("span", {
+                                className: "ml-1 sm:ml-2 w-2 h-2 bg-primary rounded-full"
+                            }) : null
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx(TabsContent, {
+                value: "params",
+                className: "flex-1 m-0 overflow-auto",
+                children: /*#__PURE__*/ _jsx(KeyValueEditor, {
+                    items: params,
+                    onChange: onParamsChange,
+                    title: "Query Parameters",
+                    keyLabel: "Name",
+                    valueLabel: "Value",
+                    showError: navState.highlightField?.type === 'param' && navState.showError
+                })
+            }),
+            /*#__PURE__*/ _jsx(TabsContent, {
+                value: "body",
+                className: "flex-1 m-0 overflow-auto",
+                children: /*#__PURE__*/ _jsx(BodyEditor, {
+                    body: body,
+                    contentType: bodyContentType,
+                    onBodyChange: onBodyChange,
+                    onContentTypeChange: onBodyContentTypeChange,
+                    showError: navState.highlightField?.type === 'body' && navState.showError
+                })
+            }),
+            /*#__PURE__*/ _jsx(TabsContent, {
+                value: "headers",
+                className: "flex-1 m-0 overflow-auto",
+                children: /*#__PURE__*/ _jsx(KeyValueEditor, {
+                    items: headers,
+                    onChange: onHeadersChange,
+                    title: "Request Headers",
+                    keyLabel: "Name",
+                    valueLabel: "Value",
+                    showError: navState.highlightField?.type === 'header' && navState.showError
+                })
+            }),
+            /*#__PURE__*/ _jsxs(TabsContent, {
+                value: "auth",
+                className: "flex-1 m-0 overflow-hidden flex flex-col",
+                children: [
+                    globalAuth && globalAuth.authType !== 'none' && /*#__PURE__*/ _jsx("div", {
+                        className: "flex items-center justify-between px-4 py-1.5 bg-muted/40 border-b border-border text-xs",
+                        children: usingGlobalAuth ? /*#__PURE__*/ _jsxs(_Fragment, {
+                            children: [
+                                /*#__PURE__*/ _jsxs("span", {
+                                    className: "flex items-center gap-1.5 text-muted-foreground",
+                                    children: [
+                                        /*#__PURE__*/ _jsx(LinkIcon, {
+                                            className: "h-3 w-3 text-green-600 dark:text-green-400",
+                                            weight: "bold"
+                                        }),
+                                        /*#__PURE__*/ _jsxs("span", {
+                                            children: [
+                                                "Global: ",
+                                                /*#__PURE__*/ _jsx("span", {
+                                                    className: "text-foreground font-medium",
+                                                    children: getAuthTypeLabel(globalAuth)
+                                                })
+                                            ]
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsx("button", {
+                                    onClick: ()=>onAuthChange({
+                                            ...globalAuth
+                                        }),
+                                    className: "text-muted-foreground hover:text-foreground transition-colors",
+                                    children: "Customize"
+                                })
+                            ]
+                        }) : /*#__PURE__*/ _jsxs(_Fragment, {
+                            children: [
+                                /*#__PURE__*/ _jsxs("span", {
+                                    className: "flex items-center gap-1.5 text-muted-foreground",
+                                    children: [
+                                        /*#__PURE__*/ _jsx(ShieldCheck, {
+                                            className: "h-3 w-3",
+                                            weight: "bold"
+                                        }),
+                                        /*#__PURE__*/ _jsx("span", {
+                                            children: "Custom auth"
+                                        })
+                                    ]
+                                }),
+                                onUseGlobalAuth && /*#__PURE__*/ _jsx("button", {
+                                    onClick: onUseGlobalAuth,
+                                    className: "text-muted-foreground hover:text-foreground transition-colors",
+                                    children: "Use global"
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        className: "flex-1 overflow-auto",
+                        children: /*#__PURE__*/ _jsx(AuthEditor, {
+                            auth: auth,
+                            onChange: onAuthChange,
+                            showError: navState.highlightField?.type === 'auth' && navState.showError
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+}

package/renderer/components/docs-viewer/playground/response-cards/idle-card.js

@@ -0,0 +1,42 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { WifiHigh } from '@phosphor-icons/react';
+import { Badge } from '@/components/ui/badge';
+export function IdleCard() {
+    return /*#__PURE__*/ _jsx("div", {
+        className: "flex flex-col h-full",
+        children: /*#__PURE__*/ _jsx("div", {
+            className: "flex items-center justify-center flex-1 p-8",
+            children: /*#__PURE__*/ _jsxs("div", {
+                className: "text-center",
+                children: [
+                    /*#__PURE__*/ _jsx(WifiHigh, {
+                        className: "h-16 w-16 text-muted-foreground/30 mx-auto mb-4",
+                        weight: "thin"
+                    }),
+                    /*#__PURE__*/ _jsx("p", {
+                        className: "text-muted-foreground mb-2",
+                        children: "Send a request to see the response"
+                    }),
+                    /*#__PURE__*/ _jsxs("p", {
+                        className: "text-sm text-muted-foreground/70",
+                        children: [
+                            "Press ",
+                            /*#__PURE__*/ _jsx("kbd", {
+                                className: "px-2 py-1 bg-muted rounded text-xs font-mono",
+                                children: "Enter"
+                            }),
+                            " or click",
+                            ' ',
+                            /*#__PURE__*/ _jsx(Badge, {
+                                variant: "default",
+                                className: "text-xs",
+                                children: "Send"
+                            })
+                        ]
+                    })
+                ]
+            })
+        })
+    });
+}

package/renderer/components/docs-viewer/playground/response-cards/index.js

@@ -0,0 +1,72 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+// Export types
+export * from './types';
+// Export individual cards
+export { IdleCard } from './idle-card';
+export { LoadingCard } from './loading-card';
+export { NetworkErrorCard } from './network-error-card';
+export { ResponseBodyCard } from './response-body-card';
+import { IdleCard } from './idle-card';
+import { LoadingCard } from './loading-card';
+import { NetworkErrorCard } from './network-error-card';
+import { ResponseBodyCard } from './response-body-card';
+/**
+ * Renders the appropriate response card based on the response state.
+ * This is the main entry point for response visualization.
+ */ export function ResponseCardRenderer({ responseState, onDebugRequest, onExplainRequest }) {
+    // Idle state
+    if (responseState.type === 'idle') {
+        return /*#__PURE__*/ _jsx(IdleCard, {});
+    }
+    // Loading state (but not streaming)
+    if (responseState.type === 'loading') {
+        return /*#__PURE__*/ _jsx(LoadingCard, {});
+    }
+    // Error state with no response (network error)
+    if (responseState.type === 'error' && !responseState.response) {
+        return /*#__PURE__*/ _jsx(NetworkErrorCard, {
+            errorMessage: responseState.error
+        });
+    }
+    // Get response for success, streaming, or error with response
+    const response = responseState.response;
+    if (!response) {
+        return null;
+    }
+    const isStreaming = responseState.type === 'streaming';
+    const isError = response.status >= 400;
+    // Get content type
+    const contentType = response.headers['content-type'] || response.headers['Content-Type'] || null;
+    // Build context for AI
+    const buildContext = ()=>({
+            status: response.status,
+            statusText: response.statusText,
+            responseBody: typeof response.body === 'string' ? response.body : '[Binary content]',
+            errorMessage: response.error
+        });
+    // Handle debug request (for errors)
+    const handleDebug = onDebugRequest ? ()=>{
+        onDebugRequest(buildContext());
+    } : undefined;
+    // Handle explain request (for success)
+    const handleExplain = onExplainRequest ? ()=>{
+        onExplainRequest(buildContext());
+    } : undefined;
+    return /*#__PURE__*/ _jsx(ResponseBodyCard, {
+        meta: {
+            status: response.status,
+            statusText: response.statusText,
+            responseTime: response.responseTime,
+            size: response.size,
+            isStreaming: isStreaming || response.isStreaming
+        },
+        body: typeof response.body === 'string' ? response.body : '[Binary content]',
+        headers: response.headers,
+        contentType: contentType,
+        isError: isError,
+        errorMessage: response.error,
+        onDebug: isError ? handleDebug : undefined,
+        onExplain: !isError ? handleExplain : undefined
+    });
+}

package/renderer/components/docs-viewer/playground/response-cards/loading-card.js

@@ -0,0 +1,24 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Spinner } from '@phosphor-icons/react';
+export function LoadingCard() {
+    return /*#__PURE__*/ _jsx("div", {
+        className: "flex flex-col h-full",
+        children: /*#__PURE__*/ _jsx("div", {
+            className: "flex items-center justify-center flex-1 p-8",
+            children: /*#__PURE__*/ _jsxs("div", {
+                className: "text-center",
+                children: [
+                    /*#__PURE__*/ _jsx(Spinner, {
+                        size: 32,
+                        className: "text-muted-foreground animate-spin mx-auto"
+                    }),
+                    /*#__PURE__*/ _jsx("p", {
+                        className: "text-sm text-muted-foreground mt-3",
+                        children: "Sending request..."
+                    })
+                ]
+            })
+        })
+    });
+}

package/renderer/components/docs-viewer/playground/response-cards/network-error-card.js

@@ -0,0 +1,28 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { WifiSlash } from '@phosphor-icons/react';
+export function NetworkErrorCard({ errorMessage }) {
+    return /*#__PURE__*/ _jsx("div", {
+        className: "flex flex-col h-full",
+        children: /*#__PURE__*/ _jsx("div", {
+            className: "flex items-center justify-center flex-1 p-8",
+            children: /*#__PURE__*/ _jsxs("div", {
+                className: "text-center",
+                children: [
+                    /*#__PURE__*/ _jsx(WifiSlash, {
+                        className: "h-16 w-16 text-red-500/50 mx-auto mb-4",
+                        weight: "thin"
+                    }),
+                    /*#__PURE__*/ _jsx("p", {
+                        className: "text-red-500 font-medium mb-2",
+                        children: "Request Failed"
+                    }),
+                    /*#__PURE__*/ _jsx("p", {
+                        className: "text-sm text-muted-foreground max-w-md",
+                        children: errorMessage || 'An error occurred while sending the request'
+                    })
+                ]
+            })
+        })
+    });
+}