Oliver Compliance Hub

A modern, responsive chat interface for AI-powered compliance policy assistance. This web application provides an intuitive way for users to interact with an AI assistant to get answers about Oliver's compliance policies and procedures.

Features

• Real-time Chat Interface: Clean, modern chat UI with smooth animations
• AI-Powered Responses: Connected to an AI backend for intelligent compliance assistance
• Conversation Persistence: Maintains conversation context across multiple messages
• Responsive Design: Optimized for desktop, tablet, and mobile devices
• Rich Text Formatting: Supports formatted responses including bullet points, numbered lists, and section headers
• Typing Indicators: Visual feedback when AI is processing responses
• Auto-resizing Input: Text area automatically adjusts to content

Technology Stack

• Frontend: Pure HTML5, CSS3, and Vanilla JavaScript
• Font: Montserrat from Google Fonts
• Backend Integration: REST API via Make.com webhook

Getting Started

Prerequisites

• Any modern web browser (Chrome, Firefox, Safari, Edge)
• A local web server (optional, for development)

Running Locally

1. Clone the repository:

   git clone <repository-url>
   cd compliance-hub
   

2. Serve the application:

   Using Python 3:

   python3 -m http.server 8000
   

   Using Node.js (http-server):

   npx http-server -p 8000
   

   Using PHP:

   php -S localhost:8000
   

3. Open in browser: Navigate to http://localhost:8000

Alternatively, you can simply open index.html directly in your browser, though some features may require a proper HTTP server.

Project Structure

compliance-hub/
├── index.html        # Main application file (HTML + CSS + JavaScript)
├── README.md         # Project documentation
├── CLAUDE.md         # Development guidance for Claude Code
└── .gitignore        # Git ignore rules

Configuration

The application connects to a webhook endpoint for AI responses. To configure the endpoint:

1. Open index.html
2. Locate the sendMessage() function (around line 569)
3. Update the webhook URL and API key as needed:

   const response = await fetch("YOUR_WEBHOOK_URL", {
     headers: {
       "x-make-apikey": "YOUR_API_KEY"
     }
   });
   

Security Note: The current implementation includes API credentials in client-side code. For production deployment, consider implementing a backend proxy to secure sensitive credentials.

Customization

Styling

All styles are embedded in the <style> tag within index.html. Key variables for theming:

• Primary color: #FFC407 (golden yellow)
• Secondary color: #e6b007 (darker yellow)
• Dark background: #2c2c2c to #1a1a1a

Response Formatting

The formatAIResponse() function supports:

• Bullet points: Lines starting with -
• Numbered lists: Lines starting with 1., 2., etc.
• Bold text: **text**
• Section headers: Lines ending with :
• Emphasis: _text_
• Policy references: Text in parentheses with .pdf, SharePoint, or handbook

Browser Support

• Chrome/Edge: ✓ (Latest 2 versions)
• Firefox: ✓ (Latest 2 versions)
• Safari: ✓ (Latest 2 versions)
• Mobile browsers: ✓ (iOS Safari, Chrome Mobile)

License

[Add your license information here]

Contributing

[Add contribution guidelines here]

Contact

[Add contact information here]