A floating chat widget that integrates the Aida AI Assistant API with ERPNext and Frappe web applications.

This widget provides a user-friendly interface for interacting with the Aida AI Assistant directly from any Frappe/ERPNext web page. It connects to the Aida API server, handles authentication, and provides a seamless chat experience.

Key features:

• Floating chat widget that can be minimized/maximized
• Settings panel for configuration
• Authentication with ERPNext credentials
• Session management
• Markdown-like message formatting
• Responsive design for mobile devices
• Easy integration with any Frappe/ERPNext site

• aida_widget.css - Styling for the widget
• aida_widget.js - Main widget functionality
• aida_widget_loader.js - Loader script for easy integration
• aida_widget_example.html - Example and documentation

• A running instance of the Aida API server (aida_api_server.py)
• ERPNext or Frappe web application
• Google API key for the Gemini AI model
• Modern web browser with JavaScript enabled

1. Copy the widget files to your Frappe/ERPNext site's public directory:

   aida_widget.css
   aida_widget.js
   aida_widget_loader.js
   

2. Include the loader script in your site using one of the following methods:

   Option 1: Using Custom Script in Frappe

   1. Go to Desk > Settings > Custom Script
   2. Create a new Custom Script with:
      • Document Type: Page or * (for all pages)
      • Script Type: Client
      • Script:

        frappe.dom.set_script('https://your-server-path/aida_widget_loader.js');

   Option 2: Adding to HTML Templates

   If you have a custom app with HTML templates, add the following code to your base template:

   <script src="https://your-server-path/aida_widget_loader.js"></script>

You can configure the Aida widget using data attributes on the script tag or by setting a global configuration object.

<script 
  src="https://your-server-path/aida_widget_loader.js" 
  data-aida-api-url="http://your-api-server:5000"
  data-aida-primary-color="#4c84ff"
  data-aida-position="right"
  data-aida-welcome-message="Hello! How can I help you with ERPNext today?"
  data-aida-auto-connect="true"
  data-aida-debug="false"
></script>

<script>
  window.AIDA_CONFIG = {
    apiUrl: 'http://your-api-server:5000',
    primaryColor: '#4c84ff',
    position: 'right',
    welcomeMessage: 'Hello! How can I help you with ERPNext today?',
    autoConnect: true,
    debug: false
  };
</script>
<script src="https://your-server-path/aida_widget_loader.js"></script>

The Aida widget supports two authentication methods:

1. Manual Authentication

   Users can manually enter their ERPNext credentials in the login panel. These credentials are securely stored in the browser's localStorage for future sessions.

2. Automatic Authentication (Same Domain)

   If the widget is loaded on the same domain as your ERPNext instance, it can automatically use the current Frappe session for authentication. This provides a seamless experience for logged-in users.

   Note: For automatic authentication to work, the Aida API server must be configured to accept Frappe session tokens.

The Aida widget requires a running instance of the Aida API server. Make sure your API server is properly configured and accessible from your Frappe/ERPNext site.

# Example Docker command to run the Aida API server
docker run -p 5000:5000 \
  -e FLASK_SECRET_KEY=your_secret_key \
  -e GOOGLE_API_KEY=your_google_api_key \
  -v /path/to/aida:/app \
  aida-api-server

Important: Ensure your API server is properly secured, especially if it's accessible from the internet. Use HTTPS and proper authentication mechanisms.

You can programmatically control the widget using the global instance:

// Open the chat window
window.aidaWidgetInstance.toggleChatWindow(true);

// Send a message programmatically
window.aidaWidgetInstance.sendMessageToApi('Hello, Aida!');

// Check if connected
if (window.aidaWidgetInstance.state.connected) {
  console.log('Connected to Aida API');
}

If you encounter issues with the Aida widget, try the following:

• Enable debug mode by setting data-aida-debug="true" to see detailed logs in the console
• Check that your API server is running and accessible from your browser
• Verify that your ERPNext URL and Google API key are correctly configured
• Clear your browser's localStorage and try again
• Check for CORS issues if your API server is on a different domain

MIT License

This widget was created to integrate with the Aida AI Assistant for ERPNext, which uses Google's Gemini AI model.