Skip to main content

AI Agent UI Enhancements

Overview​

Enhanced the Knowledge Base page with reusable components, comprehensive usage statistics, conversation history, and agent analytics. The page now features a modern tabbed interface for better organization and user experience.

New Components Created​

1. UsageStatsCard Component​

Location: components/company/ai-agent/UsageStatsCard.tsx

Features:

  • Displays key metrics in responsive grid layout
  • Real-time token usage data from last 30 days
  • Dynamic stat cards with icons and colors
  • Automatic data fetching and updates
  • Loading states for async data

Metrics Displayed:

  • AI Assistants count
  • Total documents
  • Trained documents (with processing/failed counts)
  • Storage used
  • Conversations count (with message count)
  • Tokens used (with cost)

Props:

interface UsageStatsCardProps {
  companyId: string
  agentId?: string
  documentStats: {
    total: number
    trained: number
    processing: number
    failed: number
    totalSize: number
  }
  agentsCount?: number
}

2. ConversationHistory Component​

Location: components/company/ai-agent/ConversationHistory.tsx

Features:

  • Lists all conversations with filtering by agent/user
  • Real-time status indicators (ACTIVE, ARCHIVED, COMPLETED)
  • Message counts and token usage per conversation
  • User ratings display
  • Archive and delete functionality
  • Pagination support
  • Empty state handling
  • Responsive card-based layout

Actions:

  • Click to select/view conversation
  • Archive active conversations
  • Delete conversations (with confirmation)
  • Navigate between pages

Props:

interface ConversationHistoryProps {
  companyId: string
  agentId?: string
  userId?: string
  onConversationSelect?: (conversationId: string) => void
  limit?: number
}

3. AgentAnalytics Component​

Location: components/company/ai-agent/AgentAnalytics.tsx

Features:

  • 30-day performance overview
  • Comprehensive metrics grid
  • Recent activity timeline
  • Real-time data updates
  • Cost tracking
  • Response time analytics

Metrics Displayed:

  • Total conversations
  • Messages sent
  • Average response time
  • Total tokens (with cost)
  • User satisfaction rating
  • RAG queries count

Recent Activity:

  • Activity type indicators
  • Timestamps (relative time)
  • Activity descriptions
  • Latest 5 activities displayed

Props:

interface AgentAnalyticsProps {
  companyId: string
  agentId: string
  agentName?: string
}

Enhanced Knowledge Base Page​

Tab Navigation​

The page now features a clean tab interface with three sections:

1. Knowledge Base Tab (Default)

  • AI Assistants management
    • Create new assistants
    • Edit existing assistants
    • Delete assistants
    • Agent status badges (ACTIVE, INACTIVE, MAINTENANCE, DEPRECATED)
    • Select agent for knowledge base management
  • Document upload and management
    • Drag-and-drop file upload
    • Processing status tracking
    • RAG toggle for each document
    • Reprocess failed documents
    • Delete documents
  • Upload progress indicator
  • Document statistics

2. Analytics Tab (Agent-specific)

  • Only visible when an agent is selected
  • Comprehensive performance metrics
  • Token usage and cost tracking
  • Response time analytics
  • User satisfaction ratings
  • Recent activity timeline

3. Conversations Tab

  • Shows all conversations
  • Filter by selected agent
  • Conversation management (archive/delete)
  • Message counts and ratings
  • Pagination for large datasets

UI Improvements​

Before:

  • Single page with all sections visible
  • No usage analytics
  • No conversation management
  • Basic stats only
  • Cluttered interface

After:

  • Tabbed interface for better organization
  • Comprehensive usage statistics
  • Full conversation history
  • Agent performance analytics
  • Clean, focused sections
  • Responsive grid layouts
  • Professional card-based design

Integration Points​

GraphQL Queries Used​

Usage Stats:

GET_AGENT_TOKEN_USAGE(
  companyId: String!
  periodStart: DateTime!
  periodEnd: DateTime!
  agentId: String
)

Conversations:

GET_CONVERSATIONS(
  companyId: String!
  agentId: String
  userId: String
  status: AgentConversationStatus
  limit: Int
  offset: Int
)

Activities:

GET_AGENT_ACTIVITIES(
  companyId: String!
  agentId: String
  activityType: AgentActivityType
  limit: Int
  offset: Int
)

GraphQL Mutations Used​

Conversation Management:

DELETE_CONVERSATION(id: String!)
ARCHIVE_CONVERSATION(id: String!)

Data Flow​

Usage Statistics​

  1. Component mounts
  2. Fetch token usage for last 30 days
  3. Display metrics in grid
  4. Auto-refresh when agent changes

Conversation History​

  1. Component mounts
  2. Fetch conversations (optionally filtered by agent/user)
  3. Display in scrollable list
  4. Support pagination
  5. Handle archive/delete actions
  6. Refetch on mutations

Agent Analytics​

  1. Component mounts with selected agent
  2. Fetch token usage and activities in parallel
  3. Calculate derived metrics
  4. Display performance overview
  5. Show recent activity timeline

Benefits​

For Users​

  • Better Organization: Clear separation of knowledge base, analytics, and conversations
  • Comprehensive Insights: Full visibility into agent performance and usage
  • Improved Management: Easy conversation archiving and cleanup
  • Cost Tracking: Understand token usage and associated costs
  • Performance Monitoring: Track response times and satisfaction ratings

For Developers​

  • Reusable Components: Can be used in other parts of the application
  • Modular Design: Easy to maintain and extend
  • Type Safety: Full TypeScript support
  • GraphQL Integration: Proper queries and mutations
  • Error Handling: Graceful error states

Component Reusability​

These components can be reused in:

  • Admin dashboard
  • Agent detail pages
  • Company reports
  • User analytics
  • Billing pages (token usage/cost)

Future Enhancements​

Potential Additions​

  1. Charts and Visualizations

    • Token usage trends over time
    • Response time graphs
    • Conversation volume by time of day

  2. Export Functionality

    • Export conversation history
    • Download analytics reports
    • CSV/PDF export options

  3. Advanced Filtering

    • Date range selection
    • Status filters
    • Search functionality

  4. Real-time Updates

    • WebSocket subscriptions for live data
    • Auto-refresh intervals
    • Notification badges

  5. Conversation Detail View

    • Modal or page for full conversation
    • Message rating UI
    • Regenerate responses
    • Conversation replay

Testing Checklist​

  • UsageStatsCard displays correctly with/without data
  • Token usage API calls work
  • ConversationHistory loads conversations
  • Pagination works correctly
  • Archive/delete mutations work
  • AgentAnalytics shows all metrics
  • Tab navigation switches content
  • Components handle loading states
  • Error states display properly
  • Responsive design works on mobile
  • Empty states are user-friendly

Known Backend Dependencies​

Working​

  • ✅ GET_AGENTS query
  • ✅ CREATE_AGENT mutation
  • ✅ UPDATE_AGENT mutation
  • ✅ DELETE_AGENT mutation
  • ✅ GET_AGENT_DOCUMENTS query
  • ✅ UPLOAD_AGENT_DOCUMENT mutation (frontend only)
  • ✅ DELETE_AGENT_DOCUMENT mutation
  • ✅ ENABLE_DOCUMENT_RAG mutation
  • ✅ DISABLE_DOCUMENT_RAG mutation
  • ✅ START_CONVERSATION mutation
  • ✅ Agent chat subscription

Needs Backend Verification​

  • ❓ GET_AGENT_TOKEN_USAGE query
  • ❓ GET_CONVERSATIONS query
  • ❓ GET_AGENT_ACTIVITIES query
  • ❓ ARCHIVE_CONVERSATION mutation
  • ❓ DELETE_CONVERSATION mutation

Blocked (Backend Issues)​

  • ❌ Document registration (createDocument in AI API)
  • ❌ Tool calls in conversations (history formatting bug)

Last Updated: 2026-02-08 Components Version: 1.0 Status: ✅ Implementation Complete, ⏳ Testing Pending