Aller au contenu principal
Version: 3.2.1

Spécifications Techniques

Aperçu​

L'Assistant Optave pour Zendesk intègre les capacités IA dans la plateforme de support Zendesk via une application basée sur React. Ce document fournit un aperçu technique de l'architecture, des technologies utilisées et des points d'intégration.

Technologies Utilisées​

  • Framework Frontend : React
  • Bibliothèque de Composants UI : Zendesk Garden
  • Style : Styled Components
  • Outils de Build :
    • Vite pour le développement
    • Rollup pour l'empaquetage de production
  • Langage : TypeScript
  • Gestion des Packages : PNPM
  • Tests : Vitest et React Testing Library
  • Linting/Formatage :
    • ESLint
    • Prettier
  • Internationalisation : Système de traductions personnalisé
  • Déploiement : Intégration Zendesk CLI
  • Intégration : SDK JavaScript Optave

Structure du Projet​

L'Assistant Optave pour Zendesk est organisé en une structure d'application React modulaire :

├── src/                        # Répertoire du code source
│   ├── app/                    # Cœur de l'application
│   │   ├── App.tsx             # Composant racine de l'application
│   │   ├── components/         # Bibliothèque de composants UI
│   │   ├── contexts/           # Gestion d'état global et fournisseurs de logique partagée
│   │   ├── helpers/            # Fonctions utilitaires et modules de service
│   │   └── hooks/              # Hooks React personnalisés (ex. useOptave)
│   ├── assets/                 # Ressources statiques
│   ├── constants/              # Constantes de l'application
│   ├── lib/                    # Fonctions utilitaires
│   ├── translations/           # Fichiers d'internationalisation
│   ├── types/                  # Définitions de types TypeScript
│   ├── index.html              # Point d'entrée HTML
│   └── manifest.json           # Manifeste de l'app Zendesk
├── spec/                       # Suite de tests
├── rollup/                     # Configuration de build
└── .github/workflows/          # Automatisation CI/CD

Structure des Répertoires​

L'Assistant Optave pour Zendesk suit une organisation structurée des fichiers et répertoires :

Répertoire Racine​

  • /LICENSE - Contient les informations de licence du projet.
  • /README.md - Aperçu du projet, instructions de configuration et autres informations essentielles.
  • /package.json - Configuration du package NPM définissant les dépendances, scripts et métadonnées du projet.
  • /tsconfig.json - Fichier de configuration TypeScript.
  • /vite.config.js - Configuration de l'outil de build Vite.

Code de l'Application​

  • /src/ - Répertoire du code source contenant :
    • /src/app/ - Code principal de l'application (composants, contextes, helpers, hooks).
      • /src/app/components :
        • Composants IA : Composants pour les fonctionnalités alimentées par IA comme les interfaces d'assistant, contrôles de paramètres et visualisation d'insights
        • Éléments UI : Mécanismes de feedback, tags de filtrage, sélecteurs de langue et autres contrôles d'interface
        • Composants de Navigation : Éléments de navigation comme les barres latérales et menus
        • Modales : Divers composants modaux pour l'édition, visualisation des détails et raffinement des entrées
        • Affichage de Contenu : Composants pour afficher les sources, insights et autres types de contenu
        • Composants UI Réutilisables partagés entre plusieurs fonctionnalités
      • /src/app/contexts/ :
        • Fournisseurs de Données : Contextes pour gérer les données de citation, informations client et données de réponse
        • Fournisseurs Spécifiques aux Fonctionnalités : Contextes spécialisés pour la fonctionnalité IA, état de conversation et données de page
        • Fournisseurs de Statut : Contextes pour suivre les états comme l'évaluation des risques et le statut d'envoi
        • Fournisseur de Localisation : Contexte pour gérer les traductions et paramètres de langue
      • /src/app/helpers/ :
        • Helpers de Citation : Fonctions pour traiter, formater et gérer les données de citation
        • Helpers d'Interaction IA : Utilitaires pour traiter les scores de confiance IA et la qualité des réponses
        • Gestion des Sources : Helpers pour récupérer, traiter et afficher les données de source
        • Utilitaires de Stockage : Fonctions pour interagir avec le stockage local et le cache de l'application
        • Transformation de Données : Utilitaires qui transforment les données entre différents formats ou structures
        • Traitement des Commentaires : Fonctions pour analyser et catégoriser les commentaires utilisateur
      • /src/app/hooks/ :
        • Hooks d'Accès aux Données : Hooks qui fournissent l'accès aux données de l'assistant IA, données client et autres données principales
        • Hooks d'Écoute d'Événements : Hooks spécialisés pour écouter les réponses de l'assistant et mises à jour de conversation
        • Hooks d'Intégration de Fonctionnalités : Hooks qui s'intègrent avec des fonctionnalités ou services spécifiques
        • Hook d'Internationalisation : Hook personnalisé pour accéder à la fonctionnalité de traduction
    • /src/assets/ - Ressources statiques (images, icônes, etc.).
    • /src/constants/ - Constantes de l'application.
    • /src/lib/ - Fonctions utilitaires et bibliothèques.
    • /src/translations/ - Fichiers d'internationalisation.
    • /src/types/ - Définitions de types TypeScript.

Tests​

  • /spec/ - Suite de tests reflétant la structure du code source.

Build et CI/CD​

  • /rollup/ - Configuration de build et plugins.
  • /.github/workflows/ - Automatisation CI/CD.

Connexion SDK​

L'application Zendesk intègre le SDK JavaScript Optave spécifiquement pour les flux de travail de tickets Zendesk :

  • Conscience du Contexte de Ticket : Traite le contenu des tickets pour générer des réponses IA contextuellement pertinentes
  • Interaction Opérateur : Fournit des suggestions en temps réel pendant que les opérateurs travaillent dans l'interface Zendesk
  • Événements Spécifiques à Zendesk : Traduit les événements de tickets Zendesk en formats de messages SDK pour le traitement IA

L'intégration est principalement gérée via des hooks personnalisés dans le répertoire src/app/hooks/useOptave, qui adaptent les capacités du SDK à l'environnement Zendesk, gérant le contexte spécifique aux tickets et les interactions utilisateur.

Flux de Données​

  1. Le contenu et contexte des tickets est capturé depuis Zendesk
  2. Les données sont traitées et envoyées aux services Optave via le SDK
  3. Le contenu généré par IA est retourné et présenté dans l'UI
  4. Les interactions de l'opérateur avec les suggestions sont capturées pour l'amélioration continue

Cette architecture fournit une base robuste pour étendre l'Assistant Optave dans l'environnement Zendesk.