🤖 AI Chatbot Widget

<?php
// Add to functions.php
function add_ai_chatbot_widget() {
    $api_key = get_option('chatbot_api_key', '');
    $session_id = get_option('chatbot_session_id', '');

    if (empty($api_key) || empty($session_id)) {
        return;
    }

    ?>
    <script>
    window.AIChatbotConfig = {
        apiKey: '<?php echo esc_js($api_key); ?>',
        sessionId: '<?php echo esc_js($session_id); ?>',
        apiEndpoint: 'https://api.example.com',
        botName: '<?php echo esc_js(get_bloginfo('name')); ?> Assistant',
        welcomeMessage: 'Hi! How can I help you with <?php echo esc_js(get_bloginfo('name')); ?>?',
        primaryColor: '<?php echo get_theme_mod('primary_color', '#0073aa'); ?>'
    };
    </script>
    <script src="https://cdn.example.com/chatbot-widget.js"></script>
    <?php
}
add_action('wp_footer', 'add_ai_chatbot_widget');

// Add admin options
function chatbot_admin_menu() {
    add_options_page('AI Chatbot Settings', 'AI Chatbot', 'manage_options', 'ai-chatbot', 'chatbot_admin_page');
}
add_action('admin_menu', 'chatbot_admin_menu');

function chatbot_admin_page() {
    if (isset($_POST['submit'])) {
        update_option('chatbot_api_key', sanitize_text_field($_POST['api_key']));
        update_option('chatbot_session_id', sanitize_text_field($_POST['session_id']));
        echo '<div class="notice notice-success"><p>Settings saved!</p></div>';
    }

    $api_key = get_option('chatbot_api_key', '');
    $session_id = get_option('chatbot_session_id', '');
    ?>
    <div class="wrap">
        <h1>AI Chatbot Settings</h1>
        <form method="post">
            <table class="form-table">
                <tr>
                    <th scope="row">API Key</th>
                    <td><input type="text" name="api_key" value="<?php echo esc_attr($api_key); ?>" class="regular-text" /></td>
                </tr>
                <tr>
                    <th scope="row">Session ID</th>
                    <td><input type="text" name="session_id" value="<?php echo esc_attr($session_id); ?>" class="regular-text" /></td>
                </tr>
            </table>
            <?php submit_button(); ?>
        </form>
    </div>
    <?php
}
?>

import React, { useEffect } from 'react';

const ChatbotWidget = ({ apiKey, sessionId, config = {} }) => {
  useEffect(() => {
    // Set global configuration
    window.AIChatbotConfig = {
      apiKey,
      sessionId,
      apiEndpoint: 'https://api.example.com',
      botName: 'React Assistant',
      welcomeMessage: 'Hi! I\'m here to help with your React app!',
      primaryColor: '#61dafb',
      ...config
    };

    // Load the chatbot script
    const script = document.createElement('script');
    script.src = 'https://cdn.example.com/chatbot-widget.js';
    script.async = true;

    document.head.appendChild(script);

    // Cleanup function
    return () => {
      if (window.AIChatbotWidget) {
        window.AIChatbotWidget.destroy();
      }
      document.head.removeChild(script);
    };
  }, [apiKey, sessionId]);

  return null; // This component doesn't render anything
};

// Usage in your App component
const App = () => {
  return (
    <div className="App">
      <header>
        <h1>My React App</h1>
      </header>

      <main>
        {/* Your app content */}
      </main>

      <ChatbotWidget
        apiKey="your-api-key"
        sessionId="your-session-id"
        config={{
          botName: 'React Support',
          primaryColor: '#0066cc',
          autoOpen: false
        }}
      />
    </div>
  );
};

export default App;

<?php
class AIChatbotIntegration {
    private $api_key;
    private $session_id;
    private $config;

    public function __construct($api_key, $session_id, $config = []) {
        $this->api_key = $api_key;
        $this->session_id = $session_id;
        $this->config = array_merge([
            'botName' => 'Support Assistant',
            'welcomeMessage' => 'Hello! How can I help you today?',
            'primaryColor' => '#0066cc',
            'position' => 'bottom-right',
            'autoOpen' => false
        ], $config);
    }

    public function render() {
        $config_json = json_encode(array_merge([
            'apiKey' => $this->api_key,
            'sessionId' => $this->session_id,
            'apiEndpoint' => 'https://api.example.com'
        ], $this->config));

        echo "<script>window.AIChatbotConfig = {$config_json};</script>";
        echo '<script src="https://cdn.example.com/chatbot-widget.js"></script>';
    }

    public function createSession($domain, $website_url = null) {
        $data = [
            'domain' => $domain,
            'website_url' => $website_url,
            'groq_api_key' => $this->api_key,
            'model_name' => 'llama3-8b-8192',
            'max_links' => 10,
            'use_sitemap' => false,
            'embedding_model' => 'sentence-transformers/all-MiniLM-L6-v2'
        ];

        $ch = curl_init('https://api.example.com/sessions');
        curl_setopt($ch, CURLOPT_POST, true);
        curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($data));
        curl_setopt($ch, CURLOPT_HTTPHEADER, [
            'Content-Type: application/json',
            'Authorization: Bearer ' . $this->api_key
        ]);
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

        $response = curl_exec($ch);
        curl_close($ch);

        return json_decode($response, true);
    }
}

// Usage example
$chatbot = new AIChatbotIntegration(
    'your-api-key',
    'your-session-id',
    [
        'botName' => 'PHP Assistant',
        'primaryColor' => '#8892bf',
        'welcomeMessage' => 'Hi! Welcome to our PHP-powered website!'
    ]
);

// In your HTML template
?>
<!DOCTYPE html>
<html>
<head>
    <title>My PHP Website</title>
</head>
<body>
    <!-- Your content -->

    <!-- Before closing body tag -->
    <?php $chatbot->render(); ?>
</body>
</html>

<!-- Add to theme.liquid before </body> -->
<script>
window.AIChatbotConfig = {
    apiKey: '{{ settings.chatbot_api_key }}',
    sessionId: '{{ settings.chatbot_session_id }}',
    apiEndpoint: 'https://api.example.com',
    botName: '{{ shop.name }} Assistant',
    welcomeMessage: 'Hi! Welcome to {{ shop.name }}! How can I help you?',
    primaryColor: '{{ settings.colors_accent_1 }}',
    quickActions: [
        'Help me find a product',
        'What\'s your return policy?',
        'Track my order',
        'Contact support'
    ],
    {% if customer %}
    customerInfo: {
        name: '{{ customer.first_name }} {{ customer.last_name }}',
        email: '{{ customer.email }}',
        id: '{{ customer.id }}'
    }
    {% endif %}
};
</script>
<script src="https://cdn.example.com/chatbot-widget.js"></script>

<!-- Add custom styles to theme.scss.liquid -->
<style>
.ai-chatbot-widget {
    --chatbot-primary-color: {{ settings.colors_accent_1 }};
    --chatbot-secondary-color: {{ settings.colors_accent_2 }};
}

/* Hide on checkout pages if needed */
.template-cart .ai-chatbot-widget,
.template-checkout .ai-chatbot-widget {
    display: none;
}
</style>