Skip to content

Preprod Testing UI

Overview

The Preprod Testing UI is an internal testing interface that allows team members to test the Rose chat widget across different environments and client websites. It provides a controlled environment where developers and QA teams can verify widget behavior, test new features, and debug issues before they reach production.

Key benefits:

  • Test the widget against any configured client website
  • Switch between environments (Local, Development, Staging, Production)
  • Monitor API health status in real-time
  • Test with the exact same production configuration clients use
  • Debug CSP-blocked sites with placeholder fallbacks

Architecture

flowchart TB subgraph PreprodUI["Preprod Testing UI"] Auth[Authentication] ConfigPanel[Configuration Panel] Widget[Rose Widget] IframePreview[Website Preview] end subgraph Environments["Available Environments"] Local["Local (localhost:8080)"] Dev["Development (test)"] Staging["Staging"] Prod["Production"] end subgraph Backend["Backend Services"] API[Search API] Supabase[(Supabase)] end Auth -->|Google OAuth| Supabase ConfigPanel -->|Select| Environments ConfigPanel -->|Fetch Clients| API Widget -->|API Calls| API IframePreview -->|Load Site| ClientSite[Client Website]

Getting Started

Prerequisites

Before using the Preprod UI, you need:

  1. Authorized Google Account: Your email must be in the allowed list or domain
  2. API Key: Required to authenticate API requests

Accessing the Preprod UI

  1. Navigate to the Preprod UI URL (typically https://playground.userose.ai or run locally)
  2. Sign in with your Google account
  3. If your account is authorized, you'll see the main interface

Access Restricted

Only users with email addresses from approved domains (e.g., @userose.ai, @hexa.com) or specifically allowed emails can access the Preprod UI.

Setting Up Your API Key

The API key is required to make authenticated requests to the backend. Here's how to configure it:

  1. Click the Settings button (gear icon) in the top-right corner
  2. Go to the Configuration tab
  3. Enter your API key in the "API Key" field
  4. The key is stored locally in your browser's localStorage
API Key: your-api-key-here

API Key Storage

The API key is stored in your browser's localStorage and persists across sessions. You only need to set it once per browser.

Environment Selection

Available Environments

The Preprod UI supports four environments, each pointing to a different backend:

Environment Description Use Case
Local http://localhost:8080 Local development and debugging
Development Test environment on GCP Testing new features before staging
Staging Pre-production environment Final testing before production release
Production Live production environment Testing with real client data

Switching Environments

  1. Click the Settings button
  2. In the Server & Client tab, find the "API Endpoint" dropdown
  3. Select your desired environment
  4. The health status indicator shows if the endpoint is online (🟢) or offline (🔴)
sequenceDiagram participant User participant PreprodUI participant API User->>PreprodUI: Select Environment PreprodUI->>API: Health Check (/health) API-->>PreprodUI: Status + Version PreprodUI->>User: Show 🟢 Online / 🔴 Offline

Custom Endpoints

For advanced testing, you can configure a custom API endpoint:

  1. Toggle "Custom API Endpoint" switch
  2. Enter your custom URL (e.g., https://your-test-api.example.com)
  3. The system will validate and health-check your custom endpoint

Production Environment

Production is Production

When you select the Production environment, you are testing against the exact same backend that your clients use. This means:

  • Real client configurations are loaded
  • Real LLM responses are generated
  • Real analytics events are tracked
  • Any changes you make (like resetting memory) affect the live system

Why Test in Production?

Testing in production is valuable for:

  • Verifying client-specific configurations work correctly
  • Reproducing client-reported issues in the exact environment
  • Confirming deployments were successful
  • Testing with real data for accurate behavior

Safety Considerations

When testing in production:

  • Avoid using test data that could confuse analytics
  • Be cautious with memory reset operations
  • Use test sessions that won't interfere with real users
  • Remember that your actions are tracked in production logs

Client Selection

Fetching Client List

The Preprod UI fetches available clients from the selected API endpoint:

  1. Click the Settings button
  2. In the Server & Client tab, click Refresh next to "Client Website"
  3. The dropdown populates with all configured clients

Client Details

When you select a client, you'll see:

  • Name: The client's display name
  • Domain: The effective domain for the widget
  • Site Name: The internal site identifier
  • URL: The client's website URL

Iframe vs Placeholder Mode

Some client websites have CSP (Content Security Policy) restrictions that prevent them from being embedded in iframes. The Preprod UI handles this gracefully:

Mode Description When Used
Iframe Loads the actual client website CSP allows embedding
Placeholder Shows a fallback test page CSP blocks embedding

You can toggle the iframe behavior per client:

  1. In the Client Details section, find "Allow Iframe"
  2. Toggle the switch to enable/disable iframe loading
  3. When disabled, a placeholder page is shown with scroll test content

CSP-Blocked Sites

Sites like GitHub, Google, Facebook, and LinkedIn automatically show the placeholder because they have strict CSP policies. The widget still works normally on the placeholder page.

Configuration Panel

Server & Client Tab

This tab manages your connection settings:

  • Current Status: Shows selected endpoint and client
  • API Endpoint: Select or configure your backend
  • Client Website: Choose which client to test

Configuration Tab

Advanced settings including:

  • API Key: Your authentication key
  • Visitor IP: Fake IP for testing enrichment features
  • Custom URLs: Override site URLs for testing

Health Status Tab

Real-time monitoring of all endpoints:

  • Health status for each environment (Local, Dev, Staging, Prod)
  • API version information
  • Last check timestamp
  • Refresh button for manual updates

Testing Workflow

Basic Testing Flow

flowchart LR A[Configure API Key] --> B[Select Environment] B --> C[Select Client] C --> D[Test Widget] D --> E{Issue Found?} E -->|Yes| F[Debug/Fix] E -->|No| G[Done] F --> D

Testing a New Feature

  1. Start in Development: Select the Development environment
  2. Choose a test client: Pick a client that uses the feature
  3. Test the feature: Interact with the widget
  4. Move to Staging: Verify behavior matches
  5. Final Production Check: Confirm everything works with real data

Debugging Issues

  1. Open browser DevTools (F12)
  2. Check the Console for error messages
  3. Network tab shows API requests/responses
  4. Use the Health Status tab to verify connectivity

Language Testing

The Preprod UI includes a language picker for testing multilingual support:

  1. Click the language selector in the top-right corner
  2. Choose a language or "Auto" for automatic detection
  3. The widget updates to use the selected language

Supported languages:

  • Auto (browser detection)
  • English
  • French
  • German
  • Spanish
  • And more...

Development Setup

Running Locally

cd frontend

# Install dependencies
just install

# Start the preprod dev server
just dev-preprod

The Preprod UI runs at http://localhost:5173 by default.

Building for Deployment

cd frontend/preprod-ui
npm run build

Common Issues

"Configuration Required" Screen

Cause: No API endpoint is configured or accessible.

Solution:

  1. Click "Open Settings"
  2. Verify your API key is set
  3. Select an environment that's online (green status)
  4. Refresh the client list

"Access Restricted" Error

Cause: Your email is not in the allowed list.

Solution:

  • Contact your administrator to add your email
  • Sign out and try with an authorized account
  • Check if your email domain is in ALLOWED_DOMAINS

Widget Not Appearing

Cause: Various configuration issues.

Checklist:

  1. Is a client selected?
  2. Is the API endpoint online?
  3. Is your API key valid?
  4. Check browser console for errors

Iframe Shows Placeholder

Cause: The site has CSP restrictions.

This is expected behavior: The widget still works on the placeholder page. You can:

  • Click "Visit [Client]" to open the real site in a new tab
  • Use the placeholder to test scroll-based visibility
  • Test all widget interactions normally