Skip to content

Implémentation d'AGO (chatbot IA) #50

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
wab merged 2 commits into from
Nov 13, 2025
Merged

Implémentation d'AGO (chatbot IA) #50

wab merged 2 commits into from
Nov 13, 2025

Conversation

@LudwigVonO
Copy link
Collaborator

@LudwigVonO LudwigVonO commented Nov 12, 2025

No description provided.

@vercel
Copy link

vercel bot commented Nov 12, 2025 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Preview Updated (UTC)
ocobo Ready Ready Preview Nov 12, 2025 4:56pm

@wab
🔧 improve AGO script implementation
6296742 
- ✅ **Consistency** with existing third-party script patterns
- ✅ **SSR Safety** via `remix-utils/external-scripts`
- ✅ **Performance** - parallel script loading
- ✅ **Maintainability** - centralized script management
- ✅ **Security** - proper environment variable handling
- ✅ **Framework Compliance** - React Router v7 best practices
@wab wab force-pushed the feature/implementation_AGO branch from 8209499 to 6296742 Compare November 12, 2025 16:53
@wab
Copy link
Collaborator

wab commented Nov 13, 2025

What Was Done

Commit 1: Added AGO chatbot widget as React component
Commit 2: Refactored to follow React Router v7 best practices

The Problem & Solution

Initial Implementation (Component Approach)

  • Created AGO.tsx component with hardcoded configuration
  • Loaded external script inside React component
  • Used direct DOM manipulation with useEffect

Issues Identified

  1. SSR Hydration Mismatch - Server/client rendering inconsistency
  2. Race Conditions - Script configuration set before script loads
  3. Architecture Inconsistency - Different from other third-party scripts
  4. Security Concerns - Hardcoded API keys, no integrity checks

Corrected Implementation (External Scripts Pattern)

  • Follows existing patterns - GTM, Clearbit, HubSpot all use remix-utils/external-scripts
  • SSR-safe - Configuration in <head>, script via ExternalScripts component
  • Environment-driven - API keys from .env variables
  • Performance optimized - Parallel script loading, proper async/defer

Key Learning Points

React Router v7 Best Practices

  1. External scripts belong in handle.scripts(), not React components
  2. Configuration goes in <head> via inline scripts
  3. Environment variables should control third-party integrations

Why This Approach is Better

  • ✅ Consistency with existing codebase patterns
  • ✅ SSR Safety via framework-managed script loading
  • ✅ Performance - scripts load in parallel
  • ✅ Security - API keys in environment, not client bundle
  • ✅ Maintainability - centralized script management

Files Changed

  • Deleted: app/components/AGO.tsx (wrong pattern)
  • Modified: app/root.tsx (added to scripts array + configuration)
  • Added: Environment variable documentation in CLAUDE.md

Architecture Principle

Third-party widgets should integrate via the framework's script management system, not as React components, unless they provide official React libraries.

@wab wab merged commit f7a317d into main Nov 13, 2025
4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@LudwigVonO @wab