Skip to main content
Version: 3.2.x

Technical Specifications

Overview​

The Optave Assistant for Zendesk integrates AI capabilities into the Zendesk support platform through a React-based application. This document provides a technical overview of the architecture, technologies used, and integration points.

Technologies Used​

  • Frontend Framework: React
  • UI Component Library: Zendesk Garden
  • Styling: Styled Components
  • Build Tools:
    • Vite for development
    • Rollup for production bundling
  • Language: TypeScript
  • Package Management: PNPM
  • Testing: Vitest and React Testing Library
  • Linting/Formatting:
    • ESLint
    • Prettier
  • Internationalization: Custom translations system
  • Deployment: Zendesk CLI integration
  • Integration: Optave JavaScript SDK

Project Structure​

The Optave Assistant for Zendesk is organized into a modular React application structure:

├── src/                        # Source code directory
│   ├── app/                    # Application core
│   │   ├── App.tsx             # Root application component
│   │   ├── components/         # UI component library
│   │   ├── contexts/           # Global state management and shared logic providers
│   │   ├── helpers/            # Utility functions and service modules
│   │   └── hooks/              # Custom React hooks (e.g., useOptave)
│   ├── assets/                 # Static resources
│   ├── constants/              # Application constants
│   ├── lib/                    # Utility functions
│   ├── translations/           # Internationalization files
│   ├── types/                  # TypeScript type definitions
│   ├── index.html              # HTML entry point
│   └── manifest.json           # Zendesk app manifest
├── spec/                       # Test suite
├── rollup/                     # Build configuration
└── .github/workflows/          # CI/CD automation

Directory Structure​

The Optave Assistant for Zendesk follows a structured organization of files and directories:

Root Directory​

  • /LICENSE - Contains the project's license information.
  • /README.md - Project overview, setup instructions, and other essential information.
  • /package.json - NPM package configuration defining dependencies, scripts, and project metadata.
  • /tsconfig.json - TypeScript configuration file.
  • /vite.config.js - Configuration for Vite build tool.

Application Code​

  • /src/ - Source code directory containing:
    • /src/app/ - Core application code (components, contexts, helpers, hooks).
      • /src/app/components:
        • AI Components: Components for AI-powered features like assistant interfaces, settings controls, and insights visualization
        • UI Elements: Feedback mechanisms, filter tags, language selectors, and other interface controls
        • Navigation Components: Navigation elements like sidebars and menus
        • Modals: Various modal components for editing, viewing details, and refining inputs
        • Content Display: Components for displaying sources, insights, and other content types
        • Reusable UI components that are shared across multiple features
      • /src/app/contexts/:
        • Data Providers: Contexts for managing citation data, client information, and response data
        • Feature-specific Providers: Specialized contexts for AI functionality, conversation state, and page data
        • Status Providers: Contexts for tracking states like risk assessment and sending status
        • Localization Provider: Context for managing translations and language settings
      • /src/app/helpers/:
        • Citation Helpers: Functions for processing, formatting, and managing citation data
        • AI Interaction Helpers: Utilities for processing AI confidence scores and response quality
        • Source Management: Helpers for fetching, processing, and displaying source data
        • Storage Utilities: Functions for interacting with local storage and application cache
        • Data Transformation: Utilities that transform data between different formats or structures
        • Feedback Processing: Functions for analyzing and categorizing user feedback
      • /src/app/hooks/:
        • Data Access Hooks: Hooks that provide access to AI assistant data, client data, and other core data
        • Event Listener Hooks: Specialized hooks for listening to assistant responses and conversation updates
        • Feature Integration Hooks: Hooks that integrate with specific features or services
        • Internationalization Hook: Custom hook for accessing translation functionality
    • /src/assets/ - Static assets (images, icons, etc.).
    • /src/constants/ - Application constants.
    • /src/lib/ - Utility functions and libraries.
    • /src/translations/ - Internationalization files.
    • /src/types/ - TypeScript type definitions.

Testing​

  • /spec/ - Test suite mirroring the source code structure.

Build and CI/CD​

  • /rollup/ - Build configuration and plugins.
  • /.github/workflows/ - CI/CD automation.

SDK Connection​

The Zendesk application integrates the Optave JavaScript SDK specifically for Zendesk ticket workflows:

  • Ticket Context Awareness: Processes ticket content to generate contextually relevant AI responses
  • Operator Interaction: Provides real-time suggestions as operators work within Zendesk's interface
  • Zendesk-Specific Events: Translates Zendesk ticket events into SDK message formats for AI processing

The integration is primarily managed through custom hooks in the src/app/hooks/useOptave directory, which adapt the SDK's capabilities to the Zendesk environment, handling ticket-specific context and user interactions.

Data Flow​

  1. Ticket content and context is captured from Zendesk
  2. Data is processed and sent to Optave services via the SDK
  3. AI-generated content is returned and presented in the UI
  4. Operator interactions with the suggestions are captured for continuous improvement

This architecture provides a robust foundation for extending the Optave Assistant within the Zendesk environment.