@brainfish-ai/devdoc 0.1.21

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

@@ -0,0 +1,90 @@
+'use client'
+
+import { Bug, ArrowsClockwise } from '@phosphor-icons/react'
+import { Badge } from '@/components/ui/badge'
+import { MethodBadge } from '../../shared/method-badge'
+import type { DebugContext } from '../../playground/response-viewer'
+import type { HTTPMethod } from '@/lib/api-docs/types'
+import { cn } from '@/lib/utils'
+
+interface DebugContextCardProps {
+  context: DebugContext
+}
+
+export function DebugContextCard({ context }: DebugContextCardProps) {
+  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 (
+    <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"
+      )}
+    >
+      <div className="rounded-lg border border-border bg-muted/30 overflow-hidden">
+        {/* Header */}
+        <div className="flex items-center gap-2 px-3 py-2 bg-muted/50 border-b border-border">
+          <Bug className="h-4 w-4 text-amber-500" weight="bold" />
+          <span className="text-xs font-medium text-muted-foreground">Debug Context</span>
+        </div>
+        
+        {/* Endpoint info */}
+        {context.endpointName && (
+          <div className="px-3 py-2 border-b border-border">
+            <div className="flex items-center gap-2">
+              {context.endpointMethod && (
+                <MethodBadge method={context.endpointMethod as HTTPMethod} size="sm" />
+              )}
+              <span className="text-sm font-medium text-foreground">{context.endpointName}</span>
+            </div>
+            {context.endpointPath && (
+              <p className="text-xs text-muted-foreground mt-1 font-mono">{context.endpointPath}</p>
+            )}
+          </div>
+        )}
+        
+        {/* Response status */}
+        <div className="px-3 py-2 border-b border-border">
+          <div className="flex items-center gap-2">
+            <ArrowsClockwise className="h-3.5 w-3.5 text-muted-foreground" weight="bold" />
+            <span className="text-xs text-muted-foreground">Response</span>
+            <Badge variant={isError ? 'destructive' : 'default'} className="text-xs h-5">
+              {context.status} {context.statusText}
+            </Badge>
+          </div>
+        </div>
+        
+        {/* Response body preview */}
+        <div className="px-3 py-2">
+          <pre className="text-xs font-mono text-muted-foreground bg-background/50 rounded p-2 overflow-x-auto max-h-32 overflow-y-auto">
+            {truncatedBody}
+          </pre>
+        </div>
+        
+        {/* Request body if present */}
+        {context.requestBody && (
+          <div className="px-3 py-2 border-t border-border">
+            <p className="text-xs text-muted-foreground mb-1">Request Body</p>
+            <pre className="text-xs font-mono text-muted-foreground bg-background/50 rounded p-2 overflow-x-auto max-h-20 overflow-y-auto">
+              {context.requestBody.length > 200 ? context.requestBody.slice(0, 200) + '...' : context.requestBody}
+            </pre>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,49 @@
+'use client'
+
+import { Crosshair } from '@phosphor-icons/react'
+import { MethodBadge } from '../../shared/method-badge'
+import type { EndpointContextCardData } from './types'
+import { cn } from '@/lib/utils'
+
+interface EndpointContextCardProps {
+  endpoint: EndpointContextCardData['endpoint']
+}
+
+export function EndpointContextCard({ endpoint }: EndpointContextCardProps) {
+  return (
+    <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"
+      )}
+    >
+      <div className="rounded-lg border border-border/60 bg-muted/20 overflow-hidden">
+        {/* Header */}
+        <div className="flex items-center gap-2 px-3 py-2 bg-muted/30 border-b border-border/40">
+          <Crosshair className="h-3.5 w-3.5 text-muted-foreground" weight="bold" />
+          <span className="text-xs font-medium text-muted-foreground">Asking about</span>
+        </div>
+        
+        {/* Content */}
+        <div className="p-3">
+          <div className="flex items-start gap-3">
+            <MethodBadge method={endpoint.method} size="sm" />
+            <div className="flex-1 min-w-0">
+              <p className="text-sm font-medium text-foreground truncate">
+                {endpoint.name}
+              </p>
+              <code className="text-xs text-muted-foreground font-mono block truncate mt-0.5">
+                {endpoint.path}
+              </code>
+              {endpoint.description && (
+                <p className="text-xs text-muted-foreground mt-1.5 line-clamp-2">
+                  {endpoint.description}
+                </p>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,50 @@
+'use client'
+
+import { DebugContextCard } from './debug-context-card'
+import { ResponseOptionsCard } from './response-options-card'
+import { EndpointContextCard } from './endpoint-context-card'
+import { decodeCardMessage, type CardData, type CardActions } from './types'
+
+// Export types and utilities
+export * from './types'
+export { DebugContextCard } from './debug-context-card'
+export { ResponseOptionsCard, detectErrorType, type ErrorType } from './response-options-card'
+export { EndpointContextCard } from './endpoint-context-card'
+
+interface CardRendererProps {
+  content: string
+  actions?: CardActions
+}
+
+/**
+ * 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 }: CardRendererProps) {
+  const cardData = decodeCardMessage(content)
+  
+  if (!cardData) {
+    return null
+  }
+  
+  return <CardByType data={cardData} actions={actions} />
+}
+
+/**
+ * Renders the appropriate card component based on the card type.
+ */
+function CardByType({ data, actions }: { data: CardData; actions?: CardActions }) {
+  switch (data.type) {
+    case 'debug_context':
+      return <DebugContextCard context={data.context} />
+    
+    case 'response_options':
+      return <ResponseOptionsCard errorType={data.errorType} actions={actions} />
+    
+    case 'endpoint_context':
+      return <EndpointContextCard endpoint={data.endpoint} />
+    
+    default:
+      return null
+  }
+}

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

@@ -0,0 +1,212 @@
+'use client'
+
+import { ShieldCheck, CaretRight, Sliders, Code, ListBullets, type Icon } from '@phosphor-icons/react'
+import type { CardActions } from './types'
+import { cn } from '@/lib/utils'
+
+// Extended error type with more specific categories
+export type ErrorType = 
+  | 'auth' 
+  | 'missing_params' 
+  | 'invalid_body' 
+  | 'missing_headers' 
+  | 'validation' 
+  | 'not_found' 
+  | 'server' 
+  | 'generic'
+
+interface ResponseOptionsCardProps {
+  errorType: ErrorType
+  actions?: CardActions
+}
+
+interface ActionButton {
+  id: string
+  icon: Icon
+  iconColor: string
+  bgColor: string
+  hoverBorder: string
+  title: string
+  description: string
+  onClick?: () => void
+}
+
+export function ResponseOptionsCard({ errorType, actions }: ResponseOptionsCardProps) {
+  // Build list of actions based on error type
+  const actionButtons: ActionButton[] = []
+  
+  // 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 (
+    <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"
+      )}
+    >
+      <div className="space-y-2">
+        <p className="text-xs font-medium text-muted-foreground px-1 mb-3">Suggested Actions</p>
+        {actionButtons.map((action) => (
+          <button
+            key={action.id}
+            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
+            )}
+          >
+            <div className={cn("shrink-0 w-8 h-8 rounded-md flex items-center justify-center", action.bgColor)}>
+              <action.icon className={cn("h-4 w-4", action.iconColor)} weight="bold" />
+            </div>
+            <div className="flex-1 min-w-0">
+              <p className="text-sm font-medium text-foreground">{action.title}</p>
+              <p className="text-xs text-muted-foreground truncate">{action.description}</p>
+            </div>
+            <CaretRight className="shrink-0 h-4 w-4 text-muted-foreground group-hover:text-foreground transition-colors" weight="bold" />
+          </button>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+// Helper to determine error type from status and response body
+export function detectErrorType(status: number, responseBody: string): ErrorType {
+  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.ts

@@ -0,0 +1,84 @@
+import type { DebugContext } from '../../playground/response-viewer'
+import type { HTTPMethod } from '@/lib/api-docs/types'
+
+// Card type identifiers
+export type CardType = 'debug_context' | 'response_options' | 'endpoint_context'
+
+// Error types for response options
+export type ErrorType = 
+  | 'auth' 
+  | 'missing_params' 
+  | 'invalid_body' 
+  | 'missing_headers' 
+  | 'validation' 
+  | 'not_found' 
+  | 'server' 
+  | 'generic'
+
+// Base interface for all cards
+export interface BaseCardData {
+  type: CardType
+}
+
+// Debug context card data
+export interface DebugContextCardData extends BaseCardData {
+  type: 'debug_context'
+  context: DebugContext
+}
+
+// Response options card data
+export interface ResponseOptionsCardData extends BaseCardData {
+  type: 'response_options'
+  errorType: ErrorType
+}
+
+// Endpoint context card data
+export interface EndpointContextCardData extends BaseCardData {
+  type: 'endpoint_context'
+  endpoint: {
+    id: string
+    name: string
+    method: HTTPMethod
+    path: string
+    description?: string | null
+  }
+}
+
+// Union type for all card data
+export type CardData = DebugContextCardData | ResponseOptionsCardData | EndpointContextCardData
+
+// Card action callbacks
+export interface CardActions {
+  onOpenGlobalAuth?: () => void
+  onNavigateToAuthTab?: () => void
+  onNavigateToParamsTab?: () => void
+  onNavigateToBodyTab?: () => void
+  onNavigateToHeadersTab?: () => void
+}
+
+// Prefix used to identify card messages
+export const CARD_MESSAGE_PREFIX = '__CARD__'
+
+// Helper to encode card data into a message
+export function encodeCardMessage(data: CardData): string {
+  return `${CARD_MESSAGE_PREFIX}${JSON.stringify(data)}`
+}
+
+// Helper to decode card data from a message
+export function decodeCardMessage(content: string): CardData | null {
+  if (!content?.startsWith(CARD_MESSAGE_PREFIX)) {
+    return null
+  }
+  
+  try {
+    const json = content.slice(CARD_MESSAGE_PREFIX.length)
+    return JSON.parse(json) as CardData
+  } catch {
+    return null
+  }
+}
+
+// Check if a message is a card message
+export function isCardMessage(content: string): boolean {
+  return content?.startsWith(CARD_MESSAGE_PREFIX) ?? false
+}

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

@@ -0,0 +1,17 @@
+// Re-export from messages folder for backwards compatibility
+export { 
+  ChatMessage, 
+  TypingIndicator,
+  UserMessage,
+  AssistantMessage,
+  ToolCallDisplay,
+} from './messages'
+
+export type {
+  ToolInvocation,
+  MessageImage,
+  ChatMessageProps,
+  UserMessageProps,
+  AssistantMessageProps,
+  ToolCallDisplayProps,
+} from './messages'

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

@@ -0,0 +1,6 @@
+/**
+ * Agent Components Exports
+ */
+
+export { AgentChat } from './agent-chat'
+export { ChatMessage, TypingIndicator } from './chat-message'

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

@@ -0,0 +1,119 @@
+'use client'
+
+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'
+import type { AssistantMessageProps, AssistantActionBarProps } from './types'
+
+export function AssistantMessage({ 
+  content,
+  messageId,
+  toolInvocations,
+  isStreaming,
+  onDeleteMessage,
+  onNavigate,
+  onNavigateToDocPage,
+  onOpenFile
+}: AssistantMessageProps) {
+  return (
+    <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"
+    >
+      {/* Text content */}
+      {content && (
+        <div className="aui-assistant-message-content wrap-break-word px-2 text-foreground leading-relaxed">
+          <div className="prose prose-sm dark:prose-invert max-w-none">
+            <MarkdownRenderer content={content} />
+          </div>
+        </div>
+      )}
+      
+      {/* Tool invocations */}
+      {toolInvocations && toolInvocations.length > 0 && (
+        <div className="mt-2 px-2 space-y-1">
+          {toolInvocations.map((tool) => (
+            <ToolCallDisplay key={tool.toolCallId} tool={tool} onNavigate={onNavigate} onNavigateToDocPage={onNavigateToDocPage} onOpenFile={onOpenFile} />
+          ))}
+        </div>
+      )}
+
+      {/* Action bar - only show when streaming is finished */}
+      {!isStreaming && (
+        <div className="aui-assistant-message-footer mt-1 px-2 flex justify-end">
+          <AssistantActionBar content={content} messageId={messageId} onDeleteMessage={onDeleteMessage} />
+        </div>
+      )}
+    </div>
+  )
+}
+
+function AssistantActionBar({ 
+  content,
+  messageId,
+  onDeleteMessage 
+}: AssistantActionBarProps) {
+  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 (
+    <div className={cn(
+      "aui-assistant-action-bar-root",
+      "flex gap-1 text-muted-foreground"
+    )}>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <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"}
+          >
+            {copied ? <Check className="size-4" weight="bold" /> : <Copy className="size-4" />}
+          </button>
+        </TooltipTrigger>
+        <TooltipContent>{copied ? "Copied!" : "Copy"}</TooltipContent>
+      </Tooltip>
+      
+      {messageId && onDeleteMessage && (
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <button
+              onClick={handleDelete}
+              className="aui-button-icon size-6 p-1 rounded hover:bg-accent hover:text-foreground transition-colors"
+              aria-label="Delete message"
+            >
+              <Trash className="size-4" />
+            </button>
+          </TooltipTrigger>
+          <TooltipContent>Delete message</TooltipContent>
+        </Tooltip>
+      )}
+    </div>
+  )
+}

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

@@ -0,0 +1,46 @@
+'use client'
+
+import { CardRenderer, isCardMessage } from '../cards'
+import { UserMessage } from './user-message'
+import { AssistantMessage } from './assistant-message'
+import type { ChatMessageProps } from './types'
+
+export function ChatMessage({ 
+  role, 
+  content,
+  messageId,
+  images,
+  toolInvocations, 
+  isStreaming,
+  onDeleteMessage, 
+  onNavigate,
+  onNavigateToDocPage,
+  onOpenFile,
+  cardActions 
+}: ChatMessageProps) {
+  if (role === 'user') {
+    return <UserMessage content={content} images={images} cardActions={cardActions} />
+  }
+
+  if (role === 'assistant') {
+    // Check if this is a card message (like response options)
+    if (isCardMessage(content)) {
+      return <CardRenderer content={content} actions={cardActions} />
+    }
+    
+    return (
+      <AssistantMessage 
+        content={content}
+        messageId={messageId}
+        toolInvocations={toolInvocations}
+        isStreaming={isStreaming}
+        onDeleteMessage={onDeleteMessage}
+        onNavigate={onNavigate}
+        onNavigateToDocPage={onNavigateToDocPage}
+        onOpenFile={onOpenFile}
+      />
+    )
+  }
+
+  return null
+}