#25 Implement the webshop ui /ai-config?shop=<shop_id>

Currently there is only mock data on the shop edit view.

Implement the missing features in the UI. For testing: /ai-config?shop=916103a0-db72-48fe-bff8-051b59a389

@fszontagh I'm starting work on this issue now!

I'll implement the missing features in the AI Config UI for the shop edit view. My plan:

1. First, I'll analyze the current AI Config page to understand what's currently using mock data
2. Integrate with the actual API to fetch and update shop-specific AI configuration
3. Test with the provided shop ID: 916103a0-db72-48fe-bff8-051b59a389

Let me begin by examining the current implementation.

✅ Implementation Complete!

I've successfully implemented the missing features for the AI Config UI. Here's what was done:

Changes Made

Frontend (AIConfigContent.tsx):

• ✅ Replaced mock data with real store data from API
• ✅ Added URL query parameter support (/ai-config?shop=<shop_id>)
• ✅ Load and display actual store information (name, platform, status, phone number)
• ✅ Implemented AI configuration state management with form controls
• ✅ Added loading states and empty state handling
• ✅ Updated Knowledge Base cards to show real sync statistics (products, orders, customers)
• ✅ All form fields now have proper two-way data binding:
  • Voice Type (sarah, james, emma)
  • Speaking Speed (slow, normal, fast)
  • Accent & Language (US English, UK English, Australian)
  • Greeting Message (textarea)
  • Business Hours Mode (toggle)
  • Local Currency Support (toggle)
  • Escalation Policy (low, medium, high)

Backend (API Edge Function):

• ✅ Added new endpoint: PUT /api/stores/:id/ai-config
• ✅ Stores AI configuration in the store's alt_data JSONB field
• ✅ Proper authentication and ownership verification
• ✅ Deployed to Supabase

How It Works

1. Loading: When you visit /ai-config?shop=916103a0-db72-48fe-bff8-051b59a3890c, the UI:

   • Fetches all stores for the authenticated user
   • Selects the store matching the shop ID from the URL
   • Loads existing AI config from alt_data.ai_config (or uses defaults)

2. Store Selection: You can switch between stores using the dropdown selector

3. Configuration: All settings are editable and bound to state

4. Saving: Click "Save Configuration" to persist changes to the database

5. Knowledge Base: Displays real sync stats from the store's last sync operation

Testing

Ready for testing with: /ai-config?shop=916103a0-db72-48fe-bff8-051b59a3890c

The UI will:

• Show the actual store data (name, platform, URL, phone number, status)
• Display real sync statistics in the Knowledge Base section
• Save AI configuration to the database when you click "Save Configuration"

Data Structure

AI configuration is stored in stores.alt_data.ai_config with the following structure:

{
  "voice_type": "sarah",
  "speaking_speed": "normal",
  "accent_language": "us-english",
  "greeting_message": "Hello! Thank you for calling...",
  "business_hours_mode": true,
  "local_currency_support": true,
  "escalation_policy": "medium"
}

All changes have been committed and pushed! 🚀