Skip to content

style(sav): glassmorphism design system, expanded integrations, and enhanced chat interface

yahya.elmokhtari a demandé de fusionner IAV-788 vers develop

Overview

Complete SAV dashboard visual overhaul with glassmorphism design system applied to 18+ components, expanded integration platforms for main agent and sub-agents, enhanced chat interface with mock conversation data and circular AI avatar display, and full ConditionalComponent pattern compliance verification.

Changes

  • Applied glassmorphism styling to all SAV dashboard components matching settings/integration pages design
  • Added 4 new integration platforms to available pool: Shopify, Freshdesk, WordPress, Iavia Solution
  • Updated main agent (SAV Général) with 6 integrations: WhatsApp, Instagram, Discord, Shopify, Telegram, Freshdesk
  • Updated all 3 sub-agents with consistent platform set: WordPress, WhatsApp, Messenger, Instagram, Telegram, Iavia
  • Built ChatMessageItem component with circular AI avatar (AyalV2.png) display
  • Added MOCK_MESSAGES array with 5 sample conversation messages for preview
  • Implemented glass-styled agent selector dropdown with animated shine effects
  • Added Agents/Chat toggle buttons with glassmorphism in main SAV view
  • Applied glass styling to sub-agent cards with status toggle containers
  • Updated performance metrics cards with gradient overlays
  • Styled FAQ cards, ticket items, and document manager with glass effects
  • Cleaned up 11 deprecated avatar images from public/avatars directory
  • Added globe.svg icon for integration displays

Technical Details

  • Glassmorphism background: rgba(255, 255, 255, 0.02) with backdrop-filter: blur(24px)
  • Gradient overlay for depth: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, transparent 100%)
  • Glass borders: 2px solid rgba(255, 255, 255, 0.08) with hover state rgba(255, 255, 255, 0.15)
  • Box shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1)
  • Hover glow effect: 0 12px 40px ${agentColor}20 with elevation transform translateY(-2px)
  • Agent theme color (#00588A) used for accent borders, active states, and glow effects
  • Circular avatar: 40px with border-radius: 50% and themed border 2px solid ${agentColor}50
  • Message bubbles: User gradient #6366F1 → #8B5CF6, Agent uses glass background
  • Animated shine effect on hover using transform: translateX() transition
  • All conditional rendering verified to use ConditionalComponent pattern across all modified files
  • WebkitBackdropFilter included for Safari compatibility

Components Updated

  • sav-subagents-config.ts - Added 4 platforms to commonData.platforms with correct icon paths
  • dashboard-agent-card/index.tsx - Glass background with blur and hover animations
  • sub-agents-section/index.tsx - Collapsible header, sub-agent cards, status toggle containers
  • itri-chat-interface.tsx - ChatMessageItem, MOCK_MESSAGES, agent selector, input area, send button
  • view.tsx - Agents/Chat toggle buttons with glass styling and active state borders
  • integration-section.tsx - Main container with frosted glass background
  • integration-card.tsx - Platform connection cards with hover effects
  • performance-metrics.tsx - Four stat cards with glass and gradient styling
  • configuration-content.tsx - Tab content wrapper with glass container
  • instructions-section.tsx - Description box and category cards
  • information-section.tsx - Info description area with glass background
  • instructions-selection.tsx - Instruction options with active state indicators
  • standard-instructions-view.tsx - Collapsible category cards with sub-instruction styling
  • faq-manager.tsx - Empty state container, FAQ cards with category badges
  • faq-tips-section.tsx - Tip cards with gradient overlays
  • ticket-cards.tsx - Ticket items with priority and status indicators
  • ticket-management-section.tsx - Main wrapper with filter controls
  • conversation-tab.tsx - ConversationDetailView, ClientDetailView, list items
  • document-manager.tsx - Upload drop zone, pending files, document cards

Platforms Added

  • shopify - Shopify (/icons/shopify-transparent.svg)
  • freshdesk - Freshdesk (/icons/freshdesk_logo.svg)
  • wordpress - WordPress (/icons/wordpress-transparent.svg)
  • iavia - Iavia Solution (/logo/iavia-logo-short.svg)

Assets Removed

  • Ayal-Avatar.png, AyalV2.png, ayal.png
  • adan.png, aksel.png, anir.png, aqal.png
  • itri.png, ziri.png, ziri-avatar.png
  • seo-avatar.png

Assets Added

  • globe.svg

Close-[IAV-788]

Rapports de requête de fusion