ATI — Customer Support Assistant

Chrome extension to streamline customer support via ChatMix, integrated with SGP.

🇧🇷 Português · 🇺🇸 English

🔧 Admin Panel · 📦 Chrome Web Store · 📋 Changelog

---

📸 Screenshots

Sidebar with Quick Replies & Buttons	Create Service Order Modal

---

✨ Features

🔘 ChatMix Sidebar Buttons

Button	Description
👤 Contact	Copies formatted name and phone number
🤖 Chat	Generates a clean AI prompt from the chat history
📄 CPF	Copies the CPF/CNPJ detected in the messages
📝 O.S	Opens the service order creation modal
🔄 Refresh	Clears cache and reloads client data
↗️ SGP	Opens the client's profile directly in SGP
💬 Chat	Internal Chat for agent communication

💬 Internal Chat & Notifications (New!)

• Live Embed: Loads the official ATI chat system via a high-performance Iframe.
• Background Monitor: Polls Firebase for new messages even when the extension is closed.
• Smart UI: Floating blue button with "active" state detection.
• Badge Alerts: Visual "!" indicator on the extension icon for unread messages.
• Sector Monitoring: Monitors geral, ti, financeiro, suporte and comercial rooms.

📝 Service Order Modal

• Contract selection with real-time Online/Offline status
• Occurrence type selector with search
• Per-agent O.S templates
• Automatic form fill in SGP
• Auto-draft — saves text as you type and restores on reopen
• Automatically cleared when the attendance is closed

⚡ Quick Replies

• Categorized quick replies injected above the message input
• Two-level navigation: categories → replies
• One-click insert into the text field
• In-memory cache — single Firebase read per session

🤖 AI Prompt Generator

• Clean history: strips automation messages, transfers and bot menus
• Identifies client vs agent messages from the DOM
• Ready to paste into ChatGPT, Claude or any AI

🔐 Authentication

• Firebase-backed per-agent login
• Session persisted in chrome.storage.local
• Access control by status (active / blocked)

---

🏗️ Architecture

src/
├── background/                  # Service Worker (network & CORS logic)
│   ├── index.ts                 # Entry point — message listener
│   ├── firebase.ts              # Auth, templates and quick replies
│   └── sgp/
│       ├── constants.ts         # URLs, TTLs and interfaces
│       ├── cache.ts             # Form cache (max 50 entries)
│       ├── auth.ts              # SGP login with session cache
│       ├── search.ts            # Client search (CPF, name, phone)
│       ├── contracts.ts         # Contracts + online/offline status
│       └── occurrence.ts        # Forms, occurrences and tab management
│
├── contentScript/
│   ├── chatmix/
│   │   ├── index.ts             # Entry point — buttons, observer, init
│   │   ├── state.ts             # Global state, selectors, debug
│   │   ├── helpers.ts           # CPF/CNPJ, formatting, setNativeValue
│   │   ├── getClientData.ts     # DOM data extraction
│   │   ├── buildAIPrompt.ts     # AI prompt generator
│   │   ├── Quickreply.ts        # Quick replies with in-memory cache
│   │   ├── style.css
│   │   ├── auth/
│   │   │   ├── firebase.ts
│   │   │   ├── session.ts
│   │   │   ├── login.ts
│   │   │   ├── loginModal.ts
│   │   │   └── login.css
│   │   └── os/
│   │       ├── osModal.ts       # Full service order modal
│   │       ├── osDraft.ts       # Per-chat draft in sessionStorage
│   │       └── osModal.css
│   └── sgp/
│       ├── actions.ts
│       ├── fillForm.ts
│       ├── sgpFill.js
│       └── types.ts
│
├── popup/
│   ├── Popup.html
│   ├── Popup.tsx
│   ├── Popup.css
│   └── main.tsx
│
├── assets/
│   └── logo.png
│
├── global.d.ts
└── manifest.ts

---

🛠️ Tech Stack

• React 18 + TypeScript — Popup UI
• Vite — Manifest V3 build pipeline
• Firebase Realtime Database — Templates, quick replies and auth
• Chrome Extensions API — Storage, Tabs, SidePanel
• MutationObserver with debounce — Attendance change detection

---

🚀 Development

Prerequisites

• Node.js 18+
• npm or yarn

Setup

git clone https://github.com/Vituali/Chrome-Extension-ATI-V2.git
cd Chrome-Extension-ATI-V2
npm install

Build

# Development build with watch
npm run build -- --watch

# Production build
npm run build

# Build and package for Chrome Web Store submission
npm run zip

Load in Chrome

1. Go to chrome://extensions/
2. Enable Developer mode
3. Click Load unpacked
4. Select the dist/ folder

---

⚙️ Configuration

The admin panel is available at vituali.github.io/ATI, where administrators can:

• 👥 Manage agents (create, block, assign roles)
• 📋 Create and edit O.S templates per agent
• ⚡ Create and edit quick replies with categories and subcategories

Firebase Structure

admins/{uid}                     → true
atendentes/{username}            → { email, nomeCompleto, role, uid, status }
modelos_os/{username}/{id}       → { id, title, text, category, occurrenceTypeId }
respostas/{username}/[]          → { category, subCategory, text, title }

---

📋 Changelog

v2.2.0 [2026.04.11]

• ✅ Internal Chat Embed — Migrated chat logic to an Iframe-based system for instant updates.
• ✅ Background Notifications — Real-time polling of message metadata with browser alerts.
• ✅ Extension Badge — Icon badge "!" for unread messages.
• ✅ Performance Fixes — Resolved Vite build errors and optimized Service Worker memory.

v2.1.0 [2026.04.08]

• ✅ Memory Cache on Service Worker — Migrated from global variables to chrome.storage.session to prevent data loss during SW suspension.
• ✅ Pending SGP Data Fix — Storage keys now include a unique client identifier to prevent race conditions during simultaneous chats.
• ✅ Parallel SGP Searches — Name and Phone searches now run in parallel via Promise.all when CPF returns no results, reducing load time.
• ✅ Smart Tab Navigation — SGP button now detects existing client tabs by page title and focuses them instead of opening duplicates.
• ✅ Security Hardening — Removed innerHTML (replaced with textContent), and implemented crypto.randomUUID() validation for postMessage origins.
• ✅ Server Selector Respected — All generated URLs (contracts, services, autocomplete) now strictly follow the user-selected server.
• ✅ Blocking Dialogs Removed — replaced alert() and confirm() with non-blocking Toasts and React modals.
• ✅ Optimized MutationObserver — restricted target to the specific sidebar/message container with a 150ms debounce.

v2.0.5-beta

• ✅ Status Colors for contracts (Active, Reduced Speed, Suspended, etc.)
• ✅ Design System standardized with rgba transparencies and :hover states
• ✅ Status Summary and counter in the client selection modal
• ✅ osModal refactored into sub-modules (UI, SGP, Handlers, Types)
• ✅ Zero any in firebase.ts and cache.ts with strict TypeScript interfaces
• ✅ Online status refresh without reloading the entire SGP form
• ✅ ExtensionRequest standardized for all Background/Content messaging
• ✅ botPatterns isolated for clean chat history stripping
• ✅ CLAUDE.md context-shielded with strict naming rules for AIs

v2.0.4

• ✅ Online/Offline status for contracts in the O.S modal
• ✅ Background refactored into modules (firebase, sgp/auth, sgp/contracts, etc.)
• ✅ Auto-draft per attendance in sessionStorage
• ✅ Quick reply in-memory cache — single Firebase read per session
• ✅ MutationObserver debounce — Vue virtual scroller compatibility
• ✅ Guards against simultaneous inits and duplicate loads
• ✅ SGP form cache capped at 50 entries
• ✅ AbortSignal.timeout on all SGP fetches
• ✅ AI prompt with clean history (strips automation/transfers)
• ✅ Toggle switches in the O.S modal

v2.0.0

• 🎉 Full rewrite — React + TypeScript + Manifest V3
• 🔐 Firebase-backed per-agent login system
• 📝 O.S modal with automatic SGP form fill
• ⚡ Categorized quick replies
• 🤖 Automatic attendance change detection

---

👤 Author

Built by Vituali for internal use at ATI Internet.

---

_{Available on the Chrome Web Store}