🤖 Procurement Chat Widget

This is a test page for the embeddable Procurement AI chat widget. The chat button should appear in the bottom-right corner of your screen.

🎯 Features

Clean, modern chat interface
Connects directly to your FastAPI backend
Customizable theme and positioning
Mobile responsive
Session-based conversations
Suggested follow-up questions

⚙️ Configuration

The widget is configured using the window.ProcurementChatConfig object:

apiUrl: Your FastAPI backend URL (currently: localhost:8080)
theme: 'light' or 'dark' (currently: light)
position: Widget position (currently: bottom-right)

🚀 Quick Actions

📝 How to Embed on Your Website

Add this code before the closing </body> tag:

<script>
  window.ProcurementChatConfig = {
    apiUrl: 'https://pax-chat-2279755632.us-central1.run.app',
    googleProjectId: 'your-gcp-project-id',
    theme: 'light',
    position: 'bottom-right'
  };
</script>
<script
  src="https://storage.googleapis.com/your-bucket/widget/procurement-chat-widget.js"
  async
  defer>
</script>

🔧 Development Notes

Local Testing:

Start your FastAPI backend: python -m app.main
Build the widget: cd widget && npm run build
Serve this page: npm run dev
Click the chat button in the bottom-right corner

Deployment:

Build: npm run build
Deploy to Cloud Storage: npm run deploy
Update customer websites with the new widget URL