File: /var/www/html/www.winghung.com/wp-content/plugins/upkyk-assistant-ai/admin/settings-page.php
<?php
/**
* Admin settings page template
*
* @package Upkyk_Assistant_AI
*/
if (!defined('ABSPATH')) {
exit; // Prevent direct access
}
?>
<div class="wrap upkyk-assistant-ai-admin">
<!-- <h1><?php esc_html_e('Upkyk AI Assistant AI Settings', 'upkyk-assistant-ai'); ?></h1> -->
<div class="upkyk-admin-header">
<a href="<?php echo esc_url('https://upkyk.com/assistant-ai'); ?>" title="<?php echo esc_attr__('Upkyk Assistant AI Product Page', 'upkyk-assistant-ai'); ?>" target="_blank" rel="noopener noreferrer">
<div class="upkyk-logo">
<img src="<?php echo esc_url(UPKYK_ASSISTANT_AI_URL . 'assets/images/upkyk-logo.svg'); ?>" alt="<?php esc_attr_e('Upkyk Logo', 'upkyk-assistant-ai'); ?>">
</div>
</a>
</div>
<?php
// Get the active tab from the query parameter with validation
$active_tab = 'assistant-ai-settings'; // Default tab
if (isset($_GET['tab'])) {
// Verify nonce if it exists
$nonce_verified = false;
if (isset($_GET['upkyk_tab_nonce'])) {
$nonce_verified = wp_verify_nonce(
sanitize_text_field(wp_unslash($_GET['upkyk_tab_nonce'])),
'upkyk_assistant_ai_tab_nonce'
);
}
// Only process the tab parameter if the nonce is verified or if we're on an admin page
// This allows internal tab navigation to still work without a nonce
if ($nonce_verified || is_admin()) {
// Sanitize the tab value
$requested_tab = sanitize_text_field(wp_unslash($_GET['tab']));
// Validate against a whitelist of allowed tabs
$allowed_tabs = array('assistant-ai-settings', 'appearance', 'api-key');
if (in_array($requested_tab, $allowed_tabs)) {
$active_tab = $requested_tab;
}
}
}
?>
<div class="upkyk-admin-tabs">
<div class="upkyk-tab-links">
<a href="#assistant-ai-settings" class="upkyk-tab-link <?php echo $active_tab === 'assistant-ai-settings' ? 'active' : ''; ?>"><?php esc_html_e('Assistant AI Settings', 'upkyk-assistant-ai'); ?></a>
<a href="#appearance" class="upkyk-tab-link <?php echo $active_tab === 'appearance' ? 'active' : ''; ?>"><?php esc_html_e('Appearance', 'upkyk-assistant-ai'); ?></a>
<a href="#api-key" class="upkyk-tab-link <?php echo $active_tab === 'api-key' ? 'active' : ''; ?>"><?php esc_html_e('API Key', 'upkyk-assistant-ai'); ?></a>
</div>
<div class="upkyk-tab-content">
<!-- Assistant AI Settings Tab -->
<div id="assistant-ai-settings" class="upkyk-tab-pane <?php echo $active_tab === 'assistant-ai-settings' ? 'active' : ''; ?>">
<div class="upkyk-section-intro">
<h2><?php esc_html_e('Assistant AI Settings', 'upkyk-assistant-ai'); ?></h2>
<p><?php esc_html_e('Configure how your AI assistant interacts with users, including its personality, response style, and available features.', 'upkyk-assistant-ai'); ?></p>
</div>
<form method="post" action="options.php" class="upkyk-form">
<?php
// Use the correct settings group for the settings tab
settings_fields('upkyk_assistant_ai_settings_tab');
?>
<div class="upkyk-form-section">
<div class="upkyk-form-field">
<label for="upkyk_assistant_ai_enabled">
<input type="checkbox" id="upkyk_assistant_ai_enabled" name="upkyk_assistant_ai_enabled" value="1" <?php checked('1', get_option('upkyk_assistant_ai_enabled', '1')); ?>>
<span><?php esc_html_e('Enable Assistant AI', 'upkyk-assistant-ai'); ?></span>
</label>
<p class="description"><?php esc_html_e('Turn the chatbot on or off on your website.', 'upkyk-assistant-ai'); ?></p>
</div>
<div class="upkyk-form-field">
<label for="upkyk_assistant_ai_disable_on_mobile">
<input type="checkbox" id="upkyk_assistant_ai_disable_on_mobile" name="upkyk_assistant_ai_disable_on_mobile" value="1" <?php checked('1', get_option('upkyk_assistant_ai_disable_on_mobile', '0')); ?>>
<span><?php esc_html_e('Disable on Mobile Devices', 'upkyk-assistant-ai'); ?></span>
</label>
<p class="description"><?php esc_html_e('Turn off the chatbot specifically on mobile devices, but keep it enabled on desktop.', 'upkyk-assistant-ai'); ?></p>
</div>
<!-- Manually Add Display Mode Field -->
<div class="upkyk-form-field">
<label for="upkyk_assistant_ai_display_mode"><?php esc_html_e('Display Mode', 'upkyk-assistant-ai'); ?></label>
<select id="upkyk_assistant_ai_display_mode" name="upkyk_assistant_ai_display_mode">
<option value="all" <?php selected(get_option('upkyk_assistant_ai_display_mode', 'all'), 'all'); ?>><?php esc_html_e('Show on all pages', 'upkyk-assistant-ai'); ?></option>
<option value="specific" <?php selected(get_option('upkyk_assistant_ai_display_mode', 'all'), 'specific'); ?>><?php esc_html_e('Show on specific pages', 'upkyk-assistant-ai'); ?></option>
<!-- Add more options here if needed -->
</select>
<p class="description"><?php esc_html_e('Choose where the chatbot should appear. If "specific pages" is selected, you will need to configure which pages below.', 'upkyk-assistant-ai'); ?></p>
<!-- TODO: Add UI for selecting specific pages when 'specific' is chosen. -->
</div>
<!-- End Display Mode Field -->
<!-- Allowed Pages Field Container (Initially Hidden) -->
<div class="upkyk-form-field" id="upkyk-allowed-pages-field" style="display: none;">
<?php
// Manually render the settings field registered in the class
// NOTE: This assumes the callback `allowed_pages_callback` just echoes the field HTML.
// We find the field args if needed, but often not necessary if callback handles everything.
global $wp_settings_fields;
if (isset($wp_settings_fields['upkyk-assistant-ai']['upkyk_assistant_ai_general_section']['upkyk_assistant_ai_allowed_pages'])) {
call_user_func($wp_settings_fields['upkyk-assistant-ai']['upkyk_assistant_ai_general_section']['upkyk_assistant_ai_allowed_pages']['callback'], $wp_settings_fields['upkyk-assistant-ai']['upkyk_assistant_ai_general_section']['upkyk_assistant_ai_allowed_pages']['args']);
} else {
// Fallback or error message if field isn't registered as expected
echo '<p>Error: Allowed pages field not found.</p>';
}
?>
</div>
<!-- End Allowed Pages Field -->
<div class="upkyk-form-field">
<label for="upkyk_assistant_ai_welcome_message"><?php esc_html_e('Welcome Message:', 'upkyk-assistant-ai'); ?></label>
<textarea id="upkyk_assistant_ai_welcome_message" name="upkyk_assistant_ai_welcome_message" rows="3"><?php echo esc_textarea(get_option('upkyk_assistant_ai_welcome_message', __('Hello! How can I help you today?', 'upkyk-assistant-ai'))); ?></textarea>
<p class="description"><?php esc_html_e('This is the first message visitors see when they open the chat.', 'upkyk-assistant-ai'); ?></p>
</div>
<div class="upkyk-form-field">
<label for="upkyk_assistant_ai_welcome_delay"><?php esc_html_e('Welcome Message Delay (seconds):', 'upkyk-assistant-ai'); ?></label>
<input type="number" id="upkyk_assistant_ai_welcome_delay" name="upkyk_assistant_ai_welcome_delay" min="0" max="60" value="<?php echo esc_attr(get_option('upkyk_assistant_ai_welcome_delay', '2')); ?>">
<p class="description"><?php esc_html_e('How long to wait before showing the welcome message.', 'upkyk-assistant-ai'); ?></p>
</div>
<div class="upkyk-form-field">
<div class="label-with-badge">
<label for="upkyk_assistant_ai_quick_replies"><?php esc_html_e('Quick Reply Options (one per line):', 'upkyk-assistant-ai'); ?></label>
<a href="https://upkyk.com/assistant-ai" class="pro-feature-badge" title="<?php esc_attr_e('Upgrade to Pro', 'upkyk-assistant-ai'); ?>" target="_blank" rel="noopener noreferrer">
<img src="<?php echo esc_url(UPKYK_ASSISTANT_AI_URL . 'assets/images/pro-upkyk-badge.svg'); ?>" alt="<?php esc_attr_e('PRO Feature', 'upkyk-assistant-ai'); ?>">
</a>
<div class="pro-feature-badge-info">
<?php esc_html_e('Access this feature by upgrading to PRO.', 'upkyk-assistant-ai'); ?>
</div>
</div>
<div class="pro-feature-wrapper">
<div class="pro-feature-disabled">
<textarea id="upkyk_assistant_ai_quick_replies" name="upkyk_assistant_ai_quick_replies" rows="5" disabled><?php echo esc_textarea(get_option('upkyk_assistant_ai_quick_replies', __("Tell me more\nHow does it work?\nGet started", 'upkyk-assistant-ai'))); ?></textarea>
</div>
</div>
<p class="description"><?php esc_html_e('Add clickable reply suggestions for users.', 'upkyk-assistant-ai'); ?></p>
</div>
<div class="upkyk-form-field">
<label for="upkyk_assistant_ai_typing_animation"><?php esc_html_e('Enable Typing Animation:', 'upkyk-assistant-ai'); ?></label>
<select id="upkyk_assistant_ai_typing_animation" name="upkyk_assistant_ai_typing_animation">
<option value="1" <?php selected(get_option('upkyk_assistant_ai_typing_animation', '1'), '1'); ?>><?php esc_html_e('Enabled', 'upkyk-assistant-ai'); ?></option>
<option value="0" <?php selected(get_option('upkyk_assistant_ai_typing_animation', '1'), '0'); ?>><?php esc_html_e('Disabled', 'upkyk-assistant-ai'); ?></option>
</select>
<p class="description"><?php esc_html_e('Show a typing animation while waiting for AI responses.', 'upkyk-assistant-ai'); ?></p>
</div>
<div class="upkyk-form-field">
<label for="upkyk_assistant_ai_max_tokens"><?php esc_html_e('Response Length Control:', 'upkyk-assistant-ai'); ?></label>
<div class="upkyk-length-control">
<select id="upkyk_assistant_ai_response_length_type" name="upkyk_assistant_ai_response_length_type">
<option value="word_count" <?php selected(get_option('upkyk_assistant_ai_response_length_type', 'word_count'), 'word_count'); ?>><?php esc_html_e('Word Count', 'upkyk-assistant-ai'); ?></option>
<option value="tokens" <?php selected(get_option('upkyk_assistant_ai_response_length_type', 'word_count'), 'tokens'); ?>><?php esc_html_e('Tokens', 'upkyk-assistant-ai'); ?></option>
</select>
<select id="upkyk_assistant_ai_max_tokens" name="upkyk_assistant_ai_max_tokens">
<option value="20" <?php selected(get_option('upkyk_assistant_ai_max_tokens', '40'), '20'); ?>><?php esc_html_e('Very Brief (10-20 words)', 'upkyk-assistant-ai'); ?></option>
<option value="40" <?php selected(get_option('upkyk_assistant_ai_max_tokens', '40'), '40'); ?>><?php esc_html_e('Brief (30-40 words)', 'upkyk-assistant-ai'); ?></option>
<option value="75" <?php selected(get_option('upkyk_assistant_ai_max_tokens', '40'), '75'); ?>><?php esc_html_e('Moderate (50-75 words)', 'upkyk-assistant-ai'); ?></option>
<option value="100" <?php selected(get_option('upkyk_assistant_ai_max_tokens', '40'), '100'); ?>><?php esc_html_e('Standard (100 tokens)', 'upkyk-assistant-ai'); ?></option>
<option value="250" <?php selected(get_option('upkyk_assistant_ai_max_tokens', '40'), '250'); ?>><?php esc_html_e('Detailed (250 tokens)', 'upkyk-assistant-ai'); ?></option>
</select>
</div>
<p class="description"><?php esc_html_e("Control how concise the chatbot's responses should be. For more natural conversation, using word count is recommended.", 'upkyk-assistant-ai'); ?></p>
</div>
<div class="upkyk-form-field">
<div class="label-with-badge">
<label for="upkyk_assistant_ai_personality"><?php esc_html_e('AI Personality:', 'upkyk-assistant-ai'); ?></label>
<a href="https://upkyk.com/assistant-ai" class="pro-feature-badge" title="<?php esc_attr_e('Upgrade to Pro', 'upkyk-assistant-ai'); ?>" target="_blank" rel="noopener noreferrer">
<img src="<?php echo esc_url(UPKYK_ASSISTANT_AI_URL . 'assets/images/pro-upkyk-badge.svg'); ?>" alt="<?php esc_attr_e('PRO Feature', 'upkyk-assistant-ai'); ?>">
</a>
<div class="pro-feature-badge-info">
<?php esc_html_e('Access this feature by upgrading to PRO.', 'upkyk-assistant-ai'); ?>
</div>
</div>
<div class="pro-feature-wrapper">
<div class="pro-feature-disabled">
<select id="upkyk_assistant_ai_personality" name="upkyk_assistant_ai_personality" disabled>
<option value="friendly_professional" selected><?php esc_html_e('Friendly & Professional', 'upkyk-assistant-ai'); ?></option>
<option value="casual_conversational"><?php esc_html_e('Casual & Conversational', 'upkyk-assistant-ai'); ?></option>
<option value="formal_business"><?php esc_html_e('Formal & Business-like', 'upkyk-assistant-ai'); ?></option>
</select>
</div>
</div>
<p class="description"><?php esc_html_e('Choose the personality and tone of your AI assistant.', 'upkyk-assistant-ai'); ?></p>
</div>
<div class="upkyk-form-field">
<label for="upkyk_assistant_ai_name"><?php esc_html_e('Assistant AI Name:', 'upkyk-assistant-ai'); ?></label>
<input type="text" id="upkyk_assistant_ai_name" name="upkyk_assistant_ai_name" value="<?php echo esc_attr(get_option('upkyk_assistant_ai_name', __('Chat Support', 'upkyk-assistant-ai'))); ?>">
<p class="description"><?php esc_html_e('Name displayed in the chat header.', 'upkyk-assistant-ai'); ?></p>
</div>
<div class="upkyk-form-field">
<label for="upkyk_assistant_ai_typing_delay"><?php esc_html_e('Typing Animation Delay (seconds):', 'upkyk-assistant-ai'); ?></label>
<select id="upkyk_assistant_ai_typing_delay" name="upkyk_assistant_ai_typing_delay">
<option value="1" <?php selected(get_option('upkyk_assistant_ai_typing_delay', 2), 1); ?>><?php esc_html_e('1 second', 'upkyk-assistant-ai'); ?></option>
<option value="2" <?php selected(get_option('upkyk_assistant_ai_typing_delay', 2), 2); ?>><?php esc_html_e('2 seconds', 'upkyk-assistant-ai'); ?></option>
<option value="3" <?php selected(get_option('upkyk_assistant_ai_typing_delay', 2), 3); ?>><?php esc_html_e('3 seconds', 'upkyk-assistant-ai'); ?></option>
</select>
<p class="description"><?php esc_html_e('Controls how long the typing animation displays before showing the response.', 'upkyk-assistant-ai'); ?></p>
</div>
<div class="upkyk-form-field">
<label for="upkyk_assistant_ai_auto_close">
<input type="checkbox" id="upkyk_assistant_ai_auto_close" name="upkyk_assistant_ai_auto_close" value="1" <?php checked('1', get_option('upkyk_assistant_ai_auto_close', '0')); ?>>
<span><?php esc_html_e('Auto-close Chat After Inactivity', 'upkyk-assistant-ai'); ?></span>
</label>
<p class="description"><?php esc_html_e('Automatically close the chat window after a period of inactivity.', 'upkyk-assistant-ai'); ?></p>
</div>
<div class="upkyk-form-field">
<label for="upkyk_assistant_ai_inactivity_timeout"><?php esc_html_e('Inactivity Timeout (minutes):', 'upkyk-assistant-ai'); ?></label>
<select id="upkyk_assistant_ai_inactivity_timeout" name="upkyk_assistant_ai_inactivity_timeout">
<option value="2" <?php selected(get_option('upkyk_assistant_ai_inactivity_timeout', '5'), '2'); ?>><?php esc_html_e('2 minutes', 'upkyk-assistant-ai'); ?></option>
<option value="5" <?php selected(get_option('upkyk_assistant_ai_inactivity_timeout', '5'), '5'); ?>><?php esc_html_e('5 minutes', 'upkyk-assistant-ai'); ?></option>
<option value="10" <?php selected(get_option('upkyk_assistant_ai_inactivity_timeout', '5'), '10'); ?>><?php esc_html_e('10 minutes', 'upkyk-assistant-ai'); ?></option>
<option value="15" <?php selected(get_option('upkyk_assistant_ai_inactivity_timeout', '5'), '15'); ?>><?php esc_html_e('15 minutes', 'upkyk-assistant-ai'); ?></option>
<option value="30" <?php selected(get_option('upkyk_assistant_ai_inactivity_timeout', '5'), '30'); ?>><?php esc_html_e('30 minutes', 'upkyk-assistant-ai'); ?></option>
</select>
<p class="description"><?php esc_html_e('How long before the chat auto-closes due to inactivity.', 'upkyk-assistant-ai'); ?></p>
</div>
<div class="upkyk-form-section">
<h3><?php esc_html_e('Company Information', 'upkyk-assistant-ai'); ?></h3>
<p class="description"><?php esc_html_e('These details will be used by the AI to provide accurate information about your company.', 'upkyk-assistant-ai'); ?></p>
<div class="upkyk-form-field">
<label for="upkyk_assistant_ai_phone_number"><?php esc_html_e('Company Phone Number:', 'upkyk-assistant-ai'); ?></label>
<input type="text" id="upkyk_assistant_ai_phone_number" name="upkyk_assistant_ai_phone_number" value="<?php echo esc_attr(get_option('upkyk_assistant_ai_phone_number', '')); ?>" placeholder="<?php esc_attr_e('Example: 076-7890123', 'upkyk-assistant-ai'); ?>">
<p class="description"><?php esc_html_e('Main contact phone number for your company.', 'upkyk-assistant-ai'); ?></p>
</div>
<div class="upkyk-form-field">
<label for="upkyk_assistant_ai_locations"><?php esc_html_e('Company Locations:', 'upkyk-assistant-ai'); ?></label>
<input type="text" id="upkyk_assistant_ai_locations" name="upkyk_assistant_ai_locations" value="<?php echo esc_attr(get_option('upkyk_assistant_ai_locations', '')); ?>" placeholder="<?php esc_attr_e('Example: Amsterdam, Rotterdam', 'upkyk-assistant-ai'); ?>">
<p class="description"><?php esc_html_e('Locations where your company operates (comma separated).', 'upkyk-assistant-ai'); ?></p>
</div>
<div class="upkyk-form-field">
<label for="upkyk_assistant_ai_target_audience"><?php esc_html_e('Target Audience/Services (Max 900 characters):', 'upkyk-assistant-ai'); ?></label>
<textarea id="upkyk_assistant_ai_target_audience" name="upkyk_assistant_ai_target_audience" rows="3" maxlength="900" placeholder="<?php esc_attr_e('Example: Business consulting, Training', 'upkyk-assistant-ai'); ?>"><?php echo esc_textarea(get_option('upkyk_assistant_ai_target_audience', '')); ?></textarea>
<p class="description"><?php esc_html_e('Main services or target audience of your company. Limited to 900 characters.', 'upkyk-assistant-ai'); ?></p>
</div>
<div class="upkyk-form-field">
<label for="upkyk_assistant_ai_website"><?php esc_html_e('Company Website:', 'upkyk-assistant-ai'); ?></label>
<input type="url" id="upkyk_assistant_ai_website" name="upkyk_assistant_ai_website" value="<?php echo esc_attr(get_option('upkyk_assistant_ai_website', '')); ?>" placeholder="<?php esc_attr_e('Example: https://yourcompany.com', 'upkyk-assistant-ai'); ?>">
<p class="description"><?php esc_html_e('Your company\'s website URL.', 'upkyk-assistant-ai'); ?></p>
</div>
</div>
<div class="upkyk-form-section">
<div class="label-with-badge">
<h3><?php esc_html_e('Escalation Options', 'upkyk-assistant-ai'); ?></h3>
<a href="https://upkyk.com/assistant-ai" class="pro-feature-badge" title="<?php esc_attr_e('Upgrade to Pro', 'upkyk-assistant-ai'); ?>" target="_blank" rel="noopener noreferrer">
<img src="<?php echo esc_url(UPKYK_ASSISTANT_AI_URL . 'assets/images/pro-upkyk-badge.svg'); ?>" alt="<?php esc_attr_e('PRO Feature', 'upkyk-assistant-ai'); ?>">
</a>
<div class="pro-feature-badge-info">
<?php esc_html_e('Access this feature by upgrading to PRO.', 'upkyk-assistant-ai'); ?>
</div>
</div>
<div class="pro-feature-wrapper">
<div class="pro-feature-disabled">
<div class="upkyk-form-field">
<label for="upkyk_assistant_ai_enable_escalation">
<input type="checkbox" id="upkyk_assistant_ai_enable_escalation" name="upkyk_assistant_ai_enable_escalation" value="1" <?php checked('1', get_option('upkyk_assistant_ai_enable_escalation', '0')); ?> disabled>
<span><?php esc_html_e('Enable Escalation to Human', 'upkyk-assistant-ai'); ?></span>
</label>
<p class="description"><?php esc_html_e('Allow users to escalate to a human agent if they need further assistance.', 'upkyk-assistant-ai'); ?></p>
</div>
<div class="upkyk-form-field">
<label for="upkyk_assistant_ai_escalation_type"><?php esc_html_e('Escalation Method:', 'upkyk-assistant-ai'); ?></label>
<select id="upkyk_assistant_ai_escalation_type" name="upkyk_assistant_ai_escalation_type" disabled>
<option value="whatsapp" <?php selected(get_option('upkyk_assistant_ai_escalation_type', 'email'), 'whatsapp'); ?>><?php esc_html_e('WhatsApp', 'upkyk-assistant-ai'); ?></option>
<option value="email" <?php selected(get_option('upkyk_assistant_ai_escalation_type', 'email'), 'email'); ?>><?php esc_html_e('Email', 'upkyk-assistant-ai'); ?></option>
</select>
</div>
<div class="upkyk-form-field whatsapp-field">
<label for="upkyk_assistant_ai_whatsapp_number"><?php esc_html_e('WhatsApp Number:', 'upkyk-assistant-ai'); ?></label>
<input type="text" id="upkyk_assistant_ai_whatsapp_number" name="upkyk_assistant_ai_whatsapp_number" value="<?php echo esc_attr(get_option('upkyk_assistant_ai_whatsapp_number', '')); ?>" placeholder="<?php esc_attr_e('Example: 15551234567', 'upkyk-assistant-ai'); ?>" disabled>
<p class="description"><?php esc_html_e('Enter your WhatsApp number with country code (no + or spaces).', 'upkyk-assistant-ai'); ?></p>
</div>
<div class="upkyk-form-field email-field">
<label for="upkyk_assistant_ai_email"><?php esc_html_e('Email Address:', 'upkyk-assistant-ai'); ?></label>
<input type="email" id="upkyk_assistant_ai_email" name="upkyk_assistant_ai_email" value="<?php echo esc_attr(get_option('upkyk_assistant_ai_email', get_option('admin_email'))); ?>" disabled>
</div>
<div class="upkyk-form-field">
<label for="upkyk_assistant_ai_escalation_triggers"><?php esc_html_e('Escalation Trigger Words/Phrases:', 'upkyk-assistant-ai'); ?></label>
<textarea id="upkyk_assistant_ai_escalation_triggers" name="upkyk_assistant_ai_escalation_triggers" rows="5" disabled><?php echo esc_textarea(get_option('upkyk_assistant_ai_escalation_triggers', __("contact,email,phone,call me,reach me,get back to me,talk to human,human agent,real person,talk to agent,speak with someone,phone number,number,call you,phone you,call the office,connect me,live agent,human support,speak to a representative,not helpful,need more help,can't help,speak to someone,talk to someone,need assistance,need further help,want to talk to a person,connect me with support", 'upkyk-assistant-ai'))); ?></textarea>
<p class="description"><?php esc_html_e('Enter words or phrases that should trigger escalation to human contact. You can separate items either by putting them on new lines or by using commas. When a user includes any of these in their message, the contact form will appear.', 'upkyk-assistant-ai'); ?></p>
</div>
<div class="upkyk-form-field">
<label for="upkyk_assistant_ai_contact_message"><?php esc_html_e('Contact Form Message:', 'upkyk-assistant-ai'); ?></label>
<textarea id="upkyk_assistant_ai_contact_message" name="upkyk_assistant_ai_contact_message" rows="3" disabled><?php echo esc_textarea(get_option('upkyk_assistant_ai_contact_message', __("Please provide your contact information, and we'll get back to you as soon as possible.", 'upkyk-assistant-ai'))); ?></textarea>
<p class="description"><?php esc_html_e('Message shown when displaying the contact form.', 'upkyk-assistant-ai'); ?></p>
</div>
<div class="upkyk-form-field">
<label for="upkyk_assistant_ai_notify_admin">
<input type="checkbox" id="upkyk_assistant_ai_notify_admin" name="upkyk_assistant_ai_notify_admin" value="1" <?php checked('1', get_option('upkyk_assistant_ai_notify_admin', '1')); ?> disabled>
<span><?php esc_html_e('Notify Admin on Contact Submission', 'upkyk-assistant-ai'); ?></span>
</label>
</div>
<div class="upkyk-form-field">
<label for="upkyk_assistant_ai_notification_email"><?php esc_html_e('Notification Email Recipient:', 'upkyk-assistant-ai'); ?></label>
<input type="email" id="upkyk_assistant_ai_notification_email" name="upkyk_assistant_ai_notification_email" value="<?php echo esc_attr(get_option('upkyk_assistant_ai_notification_email', get_option('admin_email'))); ?>" disabled>
<p class="description"><?php esc_html_e('Email address to receive contact form submissions (leave empty to use admin email).', 'upkyk-assistant-ai'); ?></p>
</div>
</div>
</div>
</div>
<div class="upkyk-form-section">
<h3><?php esc_html_e('Advanced Settings', 'upkyk-assistant-ai'); ?></h3>
<div class="upkyk-form-field">
<label for="upkyk_assistant_ai_debug_mode">
<input type="checkbox" id="upkyk_assistant_ai_debug_mode" name="upkyk_assistant_ai_debug_mode" value="1" <?php checked('1', get_option('upkyk_assistant_ai_debug_mode', '0')); ?>>
<span><?php esc_html_e('Enable Debug Mode', 'upkyk-assistant-ai'); ?></span>
</label>
<p class="description"><?php esc_html_e('When enabled, detailed debugging information will be logged to help troubleshoot issues. Also enables more verbose responses from the chatbot. Log files are stored in wp-content/uploads/upkyk-assistant-ai/logs/debug.log.', 'upkyk-assistant-ai'); ?></p>
</div>
<div class="upkyk-form-field">
<label for="upkyk_assistant_ai_strict_topic">
<input type="checkbox" id="upkyk_assistant_ai_strict_topic" name="upkyk_assistant_ai_strict_topic" value="1" <?php checked('1', get_option('upkyk_assistant_ai_strict_topic', '1')); ?>>
<span><?php esc_html_e('Strict Topic Enforcement', 'upkyk-assistant-ai'); ?></span>
</label>
<p class="description"><?php esc_html_e('When enabled, the chatbot will refuse to answer questions about jokes, trivia, general knowledge, or any topics unrelated to your company. Recommended for business use.', 'upkyk-assistant-ai'); ?></p>
</div>
<div class="upkyk-form-field">
<div class="label-with-badge">
<label for="upkyk_assistant_ai_store_chat_history">
<input type="checkbox" id="upkyk_assistant_ai_store_chat_history" name="upkyk_assistant_ai_store_chat_history" value="1" <?php checked('1', get_option('upkyk_assistant_ai_store_chat_history', '1')); ?> disabled>
<span><?php esc_html_e('Store Chat History', 'upkyk-assistant-ai'); ?></span>
</label>
<a href="https://upkyk.com/assistant-ai" class="pro-feature-badge" title="<?php esc_attr_e('Upgrade to Pro', 'upkyk-assistant-ai'); ?>" target="_blank" rel="noopener noreferrer">
<img src="<?php echo esc_url(UPKYK_ASSISTANT_AI_URL . 'assets/images/pro-upkyk-badge.svg'); ?>" alt="<?php esc_attr_e('PRO Feature', 'upkyk-assistant-ai'); ?>">
</a>
<div class="pro-feature-badge-info">
<?php esc_html_e('Access this feature by upgrading to PRO.', 'upkyk-assistant-ai'); ?>
</div>
</div>
<p class="description"><?php esc_html_e('When enabled, conversations will be stored in the database. Disable this for enhanced privacy or to comply with specific regulations.', 'upkyk-assistant-ai'); ?></p>
</div>
<div class="upkyk-form-field">
<label for="upkyk_assistant_ai_show_branding">
<input type="checkbox" id="upkyk_assistant_ai_show_branding" name="upkyk_assistant_ai_show_branding" value="1" <?php checked('1', get_option('upkyk_assistant_ai_show_branding', '0')); ?>>
<span><?php esc_html_e('Show "Powered by" Badge', 'upkyk-assistant-ai'); ?></span>
</label>
<p class="description"><?php esc_html_e('Support development by showing a small attribution in the chat widget. Thank you for your support!', 'upkyk-assistant-ai'); ?></p>
</div>
</div>
<div class="upkyk-form-section">
<h3><?php esc_html_e('Privacy Settings', 'upkyk-assistant-ai'); ?></h3>
<div class="upkyk-form-field">
<label for="upkyk_assistant_ai_privacy_consent">
<input type="checkbox" id="upkyk_assistant_ai_privacy_consent" name="upkyk_assistant_ai_privacy_consent" value="1" <?php checked('1', get_option('upkyk_assistant_ai_privacy_consent', '1')); ?>>
<span><?php esc_html_e('Enable Privacy Consent', 'upkyk-assistant-ai'); ?></span>
</label>
<p class="description"><?php esc_html_e('Show a privacy notice and require consent before users can use the chat.', 'upkyk-assistant-ai'); ?></p>
</div>
<div class="upkyk-form-field">
<label for="upkyk_assistant_ai_privacy_message"><?php esc_html_e('Privacy Message:', 'upkyk-assistant-ai'); ?></label>
<textarea id="upkyk_assistant_ai_privacy_message" name="upkyk_assistant_ai_privacy_message" rows="3"><?php echo esc_textarea(get_option('upkyk_assistant_ai_privacy_message', __('By using this chat, you agree that your messages will be processed by an AI service.', 'upkyk-assistant-ai'))); ?></textarea>
<p class="description"><?php esc_html_e('Message shown to users in the privacy consent banner.', 'upkyk-assistant-ai'); ?></p>
</div>
</div>
<div class="upkyk-form-section">
<div class="label-with-badge">
<h3><?php esc_html_e('Active Hours', 'upkyk-assistant-ai'); ?></h3>
<a href="https://upkyk.com/assistant-ai" class="pro-feature-badge" title="<?php esc_attr_e('Upgrade to Pro', 'upkyk-assistant-ai'); ?>" target="_blank" rel="noopener noreferrer">
<img src="<?php echo esc_url(UPKYK_ASSISTANT_AI_URL . 'assets/images/pro-upkyk-badge.svg'); ?>" alt="<?php esc_attr_e('PRO Feature', 'upkyk-assistant-ai'); ?>">
</a>
<div class="pro-feature-badge-info">
<?php esc_html_e('Access this feature by upgrading to PRO.', 'upkyk-assistant-ai'); ?>
</div>
</div>
<div class="pro-feature-wrapper">
<div class="pro-feature-disabled">
<div class="upkyk-form-field">
<label for="upkyk_assistant_ai_active_hours_enabled">
<input type="checkbox" id="upkyk_assistant_ai_active_hours_enabled" disabled>
<span><?php esc_html_e('Enable Active Hours', 'upkyk-assistant-ai'); ?></span>
</label>
<p class="description"><?php esc_html_e('Show the chatbot only during specific hours.', 'upkyk-assistant-ai'); ?></p>
</div>
<div class="upkyk-form-field">
<label for="upkyk_assistant_ai_timezone"><?php esc_html_e('Timezone:', 'upkyk-assistant-ai'); ?></label>
<select id="upkyk_assistant_ai_timezone" disabled>
<option value="UTC"><?php esc_html_e('UTC', 'upkyk-assistant-ai'); ?></option>
<option value="America/New_York"><?php esc_html_e('America/New_York', 'upkyk-assistant-ai'); ?></option>
<option value="Europe/London"><?php esc_html_e('Europe/London', 'upkyk-assistant-ai'); ?></option>
<option value="Europe/Amsterdam"><?php esc_html_e('Europe/Amsterdam', 'upkyk-assistant-ai'); ?></option>
<option value="Asia/Tokyo"><?php esc_html_e('Asia/Tokyo', 'upkyk-assistant-ai'); ?></option>
<option value="Australia/Sydney"><?php esc_html_e('Australia/Sydney', 'upkyk-assistant-ai'); ?></option>
</select>
<p class="description"><?php esc_html_e('Select the timezone for active hours.', 'upkyk-assistant-ai'); ?></p>
</div>
<div class="upkyk-form-field">
<label for="upkyk_assistant_ai_active_hours_start"><?php esc_html_e('Start Time:', 'upkyk-assistant-ai'); ?></label>
<input type="time" id="upkyk_assistant_ai_active_hours_start" value="09:00" disabled>
<p class="description"><?php esc_html_e('Time when the chatbot becomes active.', 'upkyk-assistant-ai'); ?></p>
</div>
<div class="upkyk-form-field">
<label for="upkyk_assistant_ai_active_hours_end"><?php esc_html_e('End Time:', 'upkyk-assistant-ai'); ?></label>
<input type="time" id="upkyk_assistant_ai_active_hours_end" value="18:00" disabled>
<p class="description"><?php esc_html_e('Time when the chatbot becomes inactive.', 'upkyk-assistant-ai'); ?></p>
</div>
<div class="upkyk-form-field">
<label for="upkyk_assistant_ai_inactive_message"><?php esc_html_e('Inactive Hours Message:', 'upkyk-assistant-ai'); ?></label>
<textarea id="upkyk_assistant_ai_inactive_message" rows="3" disabled><?php echo esc_textarea(__('Our chat support is currently offline. Please come back during our operating hours or leave a message.', 'upkyk-assistant-ai')); ?></textarea>
<p class="description"><?php esc_html_e('Message shown when someone tries to use the chatbot outside active hours.', 'upkyk-assistant-ai'); ?></p>
</div>
</div>
</div>
</div>
<div class="upkyk-form-section">
<h3><?php esc_html_e('Language Settings', 'upkyk-assistant-ai'); ?></h3>
<div class="upkyk-form-field">
<label for="upkyk_assistant_ai_auto_language">
<input type="checkbox" id="upkyk_assistant_ai_auto_language" name="upkyk_assistant_ai_auto_language" value="1" <?php checked('1', get_option('upkyk_assistant_ai_auto_language', '0')); ?>>
<span><?php esc_html_e('Auto-detect User Language', 'upkyk-assistant-ai'); ?></span>
</label>
<p class="description"><?php esc_html_e("Automatically detect the user's language from their browser settings.", 'upkyk-assistant-ai'); ?></p>
</div>
<div class="upkyk-form-field">
<label for="upkyk_assistant_ai_default_language"><?php esc_html_e('Default Language:', 'upkyk-assistant-ai'); ?></label>
<select id="upkyk_assistant_ai_default_language" name="upkyk_assistant_ai_default_language">
<?php
$current_language = get_option('upkyk_assistant_ai_default_language', 'en');
$languages = array(
'en' => __('English', 'upkyk-assistant-ai'),
'es' => __('Spanish', 'upkyk-assistant-ai'),
'fr' => __('French', 'upkyk-assistant-ai'),
'de' => __('German', 'upkyk-assistant-ai'),
'it' => __('Italian', 'upkyk-assistant-ai'),
'pt' => __('Portuguese', 'upkyk-assistant-ai'),
'nl' => __('Dutch', 'upkyk-assistant-ai'),
'ru' => __('Russian', 'upkyk-assistant-ai'),
'ja' => __('Japanese', 'upkyk-assistant-ai'),
'zh' => __('Chinese', 'upkyk-assistant-ai'),
'ar' => __('Arabic', 'upkyk-assistant-ai'),
'hi' => __('Hindi', 'upkyk-assistant-ai'),
'ko' => __('Korean', 'upkyk-assistant-ai'),
'tr' => __('Turkish', 'upkyk-assistant-ai'),
'pl' => __('Polish', 'upkyk-assistant-ai'),
'vi' => __('Vietnamese', 'upkyk-assistant-ai'),
'th' => __('Thai', 'upkyk-assistant-ai'),
'id' => __('Indonesian', 'upkyk-assistant-ai'),
'ms' => __('Malay', 'upkyk-assistant-ai'),
'sv' => __('Swedish', 'upkyk-assistant-ai'),
'no' => __('Norwegian', 'upkyk-assistant-ai'),
'da' => __('Danish', 'upkyk-assistant-ai'),
'fi' => __('Finnish', 'upkyk-assistant-ai'),
'he' => __('Hebrew', 'upkyk-assistant-ai'),
'bn' => __('Bengali', 'upkyk-assistant-ai'),
'fa' => __('Persian', 'upkyk-assistant-ai'),
'uk' => __('Ukrainian', 'upkyk-assistant-ai')
);
foreach ($languages as $code => $name) {
echo '<option value="' . esc_attr($code) . '" ' . selected($current_language, $code, false) . '>' . esc_html($name) . '</option>';
}
?>
</select>
<p class="description"><?php esc_html_e('Default language if auto-detection is disabled or fails.', 'upkyk-assistant-ai'); ?></p>
</div>
</div>
</div>
<?php submit_button(__('Save Settings', 'upkyk-assistant-ai')); ?>
</form>
</div>
<!-- Appearance Tab -->
<div id="appearance" class="upkyk-tab-pane <?php echo $active_tab === 'appearance' ? 'active' : ''; ?>">
<div class="upkyk-section-intro">
<h2><?php esc_html_e('Appearance Settings', 'upkyk-assistant-ai'); ?></h2>
<p><?php esc_html_e('Customize how your chat widget looks on your website, including colors, styles, sizes, and positioning.', 'upkyk-assistant-ai'); ?></p>
</div>
<form method="post" action="options.php" class="upkyk-form">
<?php
// Use the correct settings group for the appearance tab
settings_fields('upkyk_assistant_ai_appearance_tab');
?>
<div class="upkyk-form-section">
<div class="upkyk-form-field">
<label for="upkyk_assistant_ai_avatar"><?php esc_html_e('Assistant AI Avatar:', 'upkyk-assistant-ai'); ?></label>
<div class="upkyk-avatar-upload">
<div id="upkyk_avatar_preview">
<?php $avatar = get_option('upkyk_assistant_ai_avatar', ''); ?>
<?php if (!empty($avatar)): ?>
<img src="<?php echo esc_url($avatar); ?>" alt="<?php esc_attr_e('Avatar', 'upkyk-assistant-ai'); ?>">
<?php else: ?>
<div class="upkyk-no-avatar"></div>
<?php endif; ?>
</div>
<input type="hidden" id="upkyk_assistant_ai_avatar" name="upkyk_assistant_ai_avatar" value="<?php echo esc_attr($avatar); ?>">
<button type="button" id="upkyk_upload_avatar" class="button"><?php esc_html_e('Upload Avatar', 'upkyk-assistant-ai'); ?></button>
<button type="button" id="upkyk_remove_avatar" class="button"><?php esc_html_e('Remove', 'upkyk-assistant-ai'); ?></button>
</div>
<p class="description"><?php esc_html_e('Add a profile picture for your chatbot (recommended size: 100x100px).', 'upkyk-assistant-ai'); ?></p>
</div>
<div class="upkyk-form-field">
<label for="upkyk_assistant_ai_color"><?php esc_html_e('Assistant AI Bubble Color:', 'upkyk-assistant-ai'); ?></label>
<input type="text" id="upkyk_assistant_ai_color" name="upkyk_assistant_ai_color" value="<?php echo esc_attr(get_option('upkyk_assistant_ai_color', '#0084ff')); ?>" class="upkyk-color-picker">
<p class="description"><?php esc_html_e("Color for the bot's message bubbles.", 'upkyk-assistant-ai'); ?></p>
</div>
<div class="upkyk-form-field">
<label for="upkyk_assistant_ai_user_color"><?php esc_html_e('User Bubble Color:', 'upkyk-assistant-ai'); ?></label>
<input type="text" id="upkyk_assistant_ai_user_color" name="upkyk_assistant_ai_user_color" value="<?php echo esc_attr(get_option('upkyk_assistant_ai_user_color', '#e9ecef')); ?>" class="upkyk-color-picker">
<p class="description"><?php esc_html_e("Color for the user's message bubbles.", 'upkyk-assistant-ai'); ?></p>
</div>
<div class="upkyk-form-field">
<label for="upkyk_assistant_ai_link_bg_color"><?php esc_html_e('Button/Link Background Color:', 'upkyk-assistant-ai'); ?></label>
<input type="text" id="upkyk_assistant_ai_link_bg_color" name="upkyk_assistant_ai_link_bg_color" value="<?php echo esc_attr(get_option('upkyk_assistant_ai_link_bg_color', get_option('upkyk_assistant_ai_color', '#0084ff'))); ?>" class="upkyk-color-picker">
<p class="description"><?php esc_html_e('Background color for buttons and links within chat messages.', 'upkyk-assistant-ai'); ?></p>
</div>
<div class="upkyk-form-field">
<label for="upkyk_assistant_ai_link_text_color"><?php esc_html_e('Button/Link Text Color:', 'upkyk-assistant-ai'); ?></label>
<input type="text" id="upkyk_assistant_ai_link_text_color" name="upkyk_assistant_ai_link_text_color" value="<?php echo esc_attr(get_option('upkyk_assistant_ai_link_text_color', '#ffffff')); ?>" class="upkyk-color-picker">
<p class="description"><?php esc_html_e('Text color for buttons and links within chat messages.', 'upkyk-assistant-ai'); ?></p>
</div>
<div class="upkyk-form-field">
<label for="upkyk_assistant_ai_font"><?php esc_html_e('Font Family:', 'upkyk-assistant-ai'); ?></label>
<select id="upkyk_assistant_ai_font" name="upkyk_assistant_ai_font">
<?php
$current_font = get_option('upkyk_assistant_ai_font', 'Roboto, sans-serif');
$fonts = array(
'Roboto, sans-serif' => esc_html__('Roboto', 'upkyk-assistant-ai'),
'Arial, sans-serif' => esc_html__('Arial', 'upkyk-assistant-ai'),
'Verdana, sans-serif' => esc_html__('Verdana', 'upkyk-assistant-ai'),
'Helvetica, sans-serif' => esc_html__('Helvetica', 'upkyk-assistant-ai'),
'Tahoma, sans-serif' => esc_html__('Tahoma', 'upkyk-assistant-ai'),
'Trebuchet MS, sans-serif' => esc_html__('Trebuchet MS', 'upkyk-assistant-ai'),
'Times New Roman, serif' => esc_html__('Times New Roman', 'upkyk-assistant-ai'),
'Georgia, serif' => esc_html__('Georgia', 'upkyk-assistant-ai'),
'Courier New, monospace' => esc_html__('Courier New', 'upkyk-assistant-ai'),
'Segoe UI, sans-serif' => esc_html__('Segoe UI', 'upkyk-assistant-ai')
);
foreach ($fonts as $value => $label) {
echo '<option value="' . esc_attr($value) . '" ' . selected($current_font, $value, false) . '>' . esc_html($label) . '</option>';
}
?>
</select>
<p class="description"><?php esc_html_e('Select the font for the chatbot.', 'upkyk-assistant-ai'); ?></p>
</div>
<div class="upkyk-form-field">
<label for="upkyk_assistant_ai_position"><?php esc_html_e('Chat Window Position:', 'upkyk-assistant-ai'); ?></label>
<select id="upkyk_assistant_ai_position" name="upkyk_assistant_ai_position">
<option value="bottom-right" <?php selected(get_option('upkyk_assistant_ai_position', 'bottom-right'), 'bottom-right'); ?>><?php esc_html_e('Bottom Right', 'upkyk-assistant-ai'); ?></option>
<option value="bottom-left" <?php selected(get_option('upkyk_assistant_ai_position', 'bottom-right'), 'bottom-left'); ?>><?php esc_html_e('Bottom Left', 'upkyk-assistant-ai'); ?></option>
</select>
<p class="description"><?php esc_html_e('Where the chatbot appears on your website.', 'upkyk-assistant-ai'); ?></p>
</div>
<div class="upkyk-form-field">
<label for="upkyk_assistant_ai_button_shape"><?php esc_html_e('Chat Button Shape:', 'upkyk-assistant-ai'); ?></label>
<select id="upkyk_assistant_ai_button_shape" name="upkyk_assistant_ai_button_shape">
<option value="circle" <?php selected(get_option('upkyk_assistant_ai_button_shape', 'circle'), 'circle'); ?>><?php esc_html_e('Circle', 'upkyk-assistant-ai'); ?></option>
<option value="square" <?php selected(get_option('upkyk_assistant_ai_button_shape', 'circle'), 'square'); ?>><?php esc_html_e('Square', 'upkyk-assistant-ai'); ?></option>
<option value="rounded" <?php selected(get_option('upkyk_assistant_ai_button_shape', 'circle'), 'rounded'); ?>><?php esc_html_e('Rounded', 'upkyk-assistant-ai'); ?></option>
</select>
<p class="description"><?php esc_html_e('Shape of the chat toggle button.', 'upkyk-assistant-ai'); ?></p>
</div>
<div class="upkyk-form-field">
<label for="upkyk_assistant_ai_button_size"><?php esc_html_e('Chat Button Size:', 'upkyk-assistant-ai'); ?></label>
<select id="upkyk_assistant_ai_button_size" name="upkyk_assistant_ai_button_size">
<option value="small" <?php selected(get_option('upkyk_assistant_ai_button_size', 'medium'), 'small'); ?>><?php esc_html_e('Small', 'upkyk-assistant-ai'); ?></option>
<option value="medium" <?php selected(get_option('upkyk_assistant_ai_button_size', 'medium'), 'medium'); ?>><?php esc_html_e('Medium', 'upkyk-assistant-ai'); ?></option>
<option value="large" <?php selected(get_option('upkyk_assistant_ai_button_size', 'medium'), 'large'); ?>><?php esc_html_e('Large', 'upkyk-assistant-ai'); ?></option>
</select>
<p class="description"><?php esc_html_e('Size of the chat toggle button.', 'upkyk-assistant-ai'); ?></p>
</div>
<div class="upkyk-form-field">
<label for="upkyk_assistant_ai_font_size"><?php esc_html_e('Font Size:', 'upkyk-assistant-ai'); ?></label>
<select id="upkyk_assistant_ai_font_size" name="upkyk_assistant_ai_font_size">
<option value="small" <?php selected(get_option('upkyk_assistant_ai_font_size', 'medium'), 'small'); ?>><?php esc_html_e('Small', 'upkyk-assistant-ai'); ?></option>
<option value="medium" <?php selected(get_option('upkyk_assistant_ai_font_size', 'medium'), 'medium'); ?>><?php esc_html_e('Medium', 'upkyk-assistant-ai'); ?></option>
<option value="large" <?php selected(get_option('upkyk_assistant_ai_font_size', 'medium'), 'large'); ?>><?php esc_html_e('Large', 'upkyk-assistant-ai'); ?></option>
</select>
<p class="description"><?php esc_html_e('Size of text in chat messages.', 'upkyk-assistant-ai'); ?></p>
</div>
<div class="upkyk-form-field">
<label for="upkyk_assistant_ai_message_padding"><?php esc_html_e('Message Padding:', 'upkyk-assistant-ai'); ?></label>
<select id="upkyk_assistant_ai_message_padding" name="upkyk_assistant_ai_message_padding">
<option value="compact" <?php selected(get_option('upkyk_assistant_ai_message_padding', 'normal'), 'compact'); ?>><?php esc_html_e('Compact', 'upkyk-assistant-ai'); ?></option>
<option value="normal" <?php selected(get_option('upkyk_assistant_ai_message_padding', 'normal'), 'normal'); ?>><?php esc_html_e('Normal', 'upkyk-assistant-ai'); ?></option>
<option value="spacious" <?php selected(get_option('upkyk_assistant_ai_message_padding', 'normal'), 'spacious'); ?>><?php esc_html_e('Spacious', 'upkyk-assistant-ai'); ?></option>
</select>
<p class="description"><?php esc_html_e('Padding around chat messages.', 'upkyk-assistant-ai'); ?></p>
</div>
<div class="upkyk-form-field">
<label for="upkyk_assistant_ai_input_placeholder"><?php esc_html_e('Input Placeholder Text:', 'upkyk-assistant-ai'); ?></label>
<input type="text" id="upkyk_assistant_ai_input_placeholder" name="upkyk_assistant_ai_input_placeholder" value="<?php echo esc_attr(get_option('upkyk_assistant_ai_input_placeholder', 'Type your message...')); ?>">
<p class="description"><?php esc_html_e('Customize the placeholder text in the chat input field.', 'upkyk-assistant-ai'); ?></p>
</div>
<div class="upkyk-form-field">
<label for="upkyk_assistant_ai_button_icon"><?php esc_html_e('Chat Button Icon:', 'upkyk-assistant-ai'); ?></label>
<div class="upkyk-icon-selector-wrapper">
<input type="hidden" id="upkyk_assistant_ai_button_icon" name="upkyk_assistant_ai_button_icon" value="<?php echo esc_attr(get_option('upkyk_assistant_ai_button_icon', 'chat')); ?>" />
<div class="upkyk-selected-icon-preview">
<div class="upkyk-icon-preview <?php echo esc_attr(get_option('upkyk_assistant_ai_button_icon', 'chat')); ?>">
<?php
$icon_type = get_option('upkyk_assistant_ai_button_icon', 'chat');
$icon_file = $icon_type;
if ($icon_type == 'chat' || $icon_type == 'comment') {
$icon_file = 'comment';
} else if ($icon_type == 'question') {
$icon_file = 'question-circle';
} else if ($icon_type == 'chat-balloon') {
$icon_file = 'chat-balloon';
}
?>
<img src="<?php echo esc_url(UPKYK_ASSISTANT_AI_URL . 'assets/images/chat-icons/' . $icon_file . '.svg'); ?>" alt="<?php echo esc_attr($icon_type); ?>" style="width:24px; height:24px; filter:brightness(0) invert(1);">
</div>
<span><?php
$icon_value = get_option('upkyk_assistant_ai_button_icon', 'chat');
$icon_labels = array(
'chat-balloon' => __('Chat Balloon', 'upkyk-assistant-ai'),
'chat' => __('Chat', 'upkyk-assistant-ai'),
'message' => __('Message', 'upkyk-assistant-ai'),
'robot' => __('Robot', 'upkyk-assistant-ai'),
'help' => __('Help', 'upkyk-assistant-ai'),
'comment' => __('Comment', 'upkyk-assistant-ai'),
'comments' => __('Comments', 'upkyk-assistant-ai'),
'headset' => __('Headset', 'upkyk-assistant-ai'),
'envelope' => __('Envelope', 'upkyk-assistant-ai'),
'info' => __('Info', 'upkyk-assistant-ai'),
'question' => __('Question', 'upkyk-assistant-ai'),
'user' => __('User', 'upkyk-assistant-ai'),
'bell' => __('Bell', 'upkyk-assistant-ai'),
'support' => __('Support', 'upkyk-assistant-ai')
);
echo isset($icon_labels[$icon_value]) ? esc_html($icon_labels[$icon_value]) : esc_html($icon_value);
?></span>
</div>
<button type="button" id="open_icon_selector" class="button"><?php esc_html_e('Select Icon', 'upkyk-assistant-ai'); ?></button>
</div>
<p class="description"><?php esc_html_e('Click "Select Icon" to choose the icon displayed on the chat button.', 'upkyk-assistant-ai'); ?></p>
</div>
<!-- Icon Selector Modal -->
<div id="upkyk_icon_selector_modal" class="upkyk-modal">
<div class="upkyk-modal-content">
<div class="upkyk-modal-header">
<h3><?php esc_html_e('Select icon', 'upkyk-assistant-ai'); ?></h3>
<button id="close_icon_selector" class="close-modal"><?php esc_html_e('Close', 'upkyk-assistant-ai'); ?></button>
</div>
<div class="upkyk-modal-body">
<div class="upkyk-icon-grid">
<!-- Chat icons - limited to what's available in assets/images/chat-icons -->
<div class="upkyk-icon-item" data-value="chat-balloon">
<div class="upkyk-icon-preview chat-balloon">
<img src="<?php echo esc_url(UPKYK_ASSISTANT_AI_URL . 'assets/images/chat-icons/chat-balloon.svg'); ?>" alt="<?php esc_attr_e('Chat Balloon', 'upkyk-assistant-ai'); ?>" style="width:24px; height:24px; filter:brightness(0) invert(1);">
</div>
<span><?php esc_html_e('Chat Balloon', 'upkyk-assistant-ai'); ?></span>
</div>
<div class="upkyk-icon-item" data-value="comment">
<div class="upkyk-icon-preview comment">
<img src="<?php echo esc_url(UPKYK_ASSISTANT_AI_URL . 'assets/images/chat-icons/comment.svg'); ?>" alt="<?php esc_attr_e('Comment', 'upkyk-assistant-ai'); ?>" style="width:24px; height:24px; filter:brightness(0) invert(1);">
</div>
<span><?php esc_html_e('Comment', 'upkyk-assistant-ai'); ?></span>
</div>
<div class="upkyk-icon-item" data-value="comments">
<div class="upkyk-icon-preview comments">
<img src="<?php echo esc_url(UPKYK_ASSISTANT_AI_URL . 'assets/images/chat-icons/comments.svg'); ?>" alt="<?php esc_attr_e('Comments', 'upkyk-assistant-ai'); ?>" style="width:24px; height:24px; filter:brightness(0) invert(1);">
</div>
<span><?php esc_html_e('Comments', 'upkyk-assistant-ai'); ?></span>
</div>
<div class="upkyk-icon-item" data-value="robot">
<div class="upkyk-icon-preview robot">
<img src="<?php echo esc_url(UPKYK_ASSISTANT_AI_URL . 'assets/images/chat-icons/robot.svg'); ?>" alt="<?php esc_attr_e('Robot', 'upkyk-assistant-ai'); ?>" style="width:24px; height:24px; filter:brightness(0) invert(1);">
</div>
<span><?php esc_html_e('Robot', 'upkyk-assistant-ai'); ?></span>
</div>
<div class="upkyk-icon-item" data-value="question">
<div class="upkyk-icon-preview question">
<img src="<?php echo esc_url(UPKYK_ASSISTANT_AI_URL . 'assets/images/chat-icons/question-circle.svg'); ?>" alt="<?php esc_attr_e('Question', 'upkyk-assistant-ai'); ?>" style="width:24px; height:24px; filter:brightness(0) invert(1);">
</div>
<span><?php esc_html_e('Question', 'upkyk-assistant-ai'); ?></span>
</div>
<div class="upkyk-icon-item" data-value="envelope">
<div class="upkyk-icon-preview envelope">
<img src="<?php echo esc_url(UPKYK_ASSISTANT_AI_URL . 'assets/images/chat-icons/envelope.svg'); ?>" alt="<?php esc_attr_e('Envelope', 'upkyk-assistant-ai'); ?>" style="width:24px; height:24px; filter:brightness(0) invert(1);">
</div>
<span><?php esc_html_e('Envelope', 'upkyk-assistant-ai'); ?></span>
</div>
</div>
</div>
</div>
</div>
<div class="upkyk-form-field">
<div class="label-with-badge">
<label for="upkyk_assistant_ai_custom_icon"><?php esc_html_e('Custom Chat Button Icon (SVG):', 'upkyk-assistant-ai'); ?></label>
<a href="https://upkyk.com/assistant-ai" class="pro-feature-badge" title="<?php esc_attr_e('Upgrade to Pro', 'upkyk-assistant-ai'); ?>" target="_blank" rel="noopener noreferrer">
<img src="<?php echo esc_url(UPKYK_ASSISTANT_AI_URL . 'assets/images/pro-upkyk-badge.svg'); ?>" alt="<?php esc_attr_e('PRO Feature', 'upkyk-assistant-ai'); ?>">
</a>
<div class="pro-feature-badge-info">
<?php esc_html_e('Access this feature by upgrading to PRO.', 'upkyk-assistant-ai'); ?>
</div>
</div>
<div class="pro-feature-wrapper">
<div class="upkyk-svg-upload pro-feature-disabled">
<div id="upkyk_svg_preview">
<?php
$custom_icon_url = get_option('upkyk_assistant_ai_custom_icon', '');
$custom_icon_size = get_option('upkyk_assistant_ai_custom_icon_size', 'medium');
// Determine dimensions based on size
$dimensions = 24; // Default for medium
if ($custom_icon_size === 'small') {
$dimensions = 18;
} elseif ($custom_icon_size === 'large') {
$dimensions = 32;
}
if (!empty($custom_icon_url)): ?>
<div class="upkyk-svg-preview-container" style="width: 60px; height: 60px; background-color: <?php echo esc_attr(get_option('upkyk_assistant_ai_color', '#0084ff')); ?>; display: flex; align-items: center; justify-content: center; border-radius: 50%;">
<img src="<?php echo esc_url($custom_icon_url); ?>" alt="<?php esc_attr_e('Custom Icon', 'upkyk-assistant-ai'); ?>" style="width: <?php echo esc_attr($dimensions); ?>px; height: <?php echo esc_attr($dimensions); ?>px; filter: brightness(0) invert(1);">
</div>
<?php else: ?>
<div class="upkyk-no-svg"><?php esc_html_e('No Custom Icon', 'upkyk-assistant-ai'); ?></div>
<?php endif; ?>
</div>
<input type="hidden" id="upkyk_assistant_ai_custom_icon" name="upkyk_assistant_ai_custom_icon" value="<?php echo esc_attr($custom_icon_url); ?>">
<button type="button" id="upkyk_upload_svg" class="button" disabled><?php esc_html_e('Upload SVG Icon', 'upkyk-assistant-ai'); ?></button>
<button type="button" id="upkyk_remove_svg" class="button" disabled><?php esc_html_e('Remove', 'upkyk-assistant-ai'); ?></button>
</div>
</div>
<p class="description"><strong><?php esc_html_e('This custom icon will override the standard icon selection above.', 'upkyk-assistant-ai'); ?></strong></p>
<p class="description"><?php esc_html_e('For best results, use a simple, single-color SVG (24x24px recommended).', 'upkyk-assistant-ai'); ?></p>
</div>
<div class="upkyk-form-field">
<div class="label-with-badge">
<label for="upkyk_assistant_ai_custom_icon_size"><?php esc_html_e('Custom Icon Size:', 'upkyk-assistant-ai'); ?></label>
<a href="https://upkyk.com/assistant-ai" class="pro-feature-badge" title="<?php esc_attr_e('Upgrade to Pro', 'upkyk-assistant-ai'); ?>" target="_blank" rel="noopener noreferrer">
<img src="<?php echo esc_url(UPKYK_ASSISTANT_AI_URL . 'assets/images/pro-upkyk-badge.svg'); ?>" alt="<?php esc_attr_e('PRO Feature', 'upkyk-assistant-ai'); ?>">
</a>
<div class="pro-feature-badge-info">
<?php esc_html_e('Access this feature by upgrading to PRO.', 'upkyk-assistant-ai'); ?>
</div>
</div>
<div class="pro-feature-wrapper">
<div class="pro-feature-disabled">
<select id="upkyk_assistant_ai_custom_icon_size" name="upkyk_assistant_ai_custom_icon_size" disabled>
<option value="small" <?php selected(get_option('upkyk_assistant_ai_custom_icon_size', 'medium'), 'small'); ?>><?php esc_html_e('Small', 'upkyk-assistant-ai'); ?></option>
<option value="medium" <?php selected(get_option('upkyk_assistant_ai_custom_icon_size', 'medium'), 'medium'); ?>><?php esc_html_e('Medium', 'upkyk-assistant-ai'); ?></option>
<option value="large" <?php selected(get_option('upkyk_assistant_ai_custom_icon_size', 'medium'), 'large'); ?>><?php esc_html_e('Large', 'upkyk-assistant-ai'); ?></option>
</select>
</div>
</div>
<p class="description"><?php esc_html_e('Choose the size of your custom SVG icon.', 'upkyk-assistant-ai'); ?></p>
</div>
<div class="upkyk-form-section">
<h3><?php esc_html_e('Chat Window Size', 'upkyk-assistant-ai'); ?></h3>
<p class="description"><?php esc_html_e("Customize the dimensions of your chat window to best fit your website's design.", 'upkyk-assistant-ai'); ?></p>
<div class="upkyk-form-field">
<label for="upkyk_assistant_ai_window_size"><?php esc_html_e('Window Size Preset:', 'upkyk-assistant-ai'); ?></label>
<select id="upkyk_assistant_ai_window_size" name="upkyk_assistant_ai_window_size">
<option value="small" <?php selected(get_option('upkyk_assistant_ai_window_size', 'medium'), 'small'); ?>><?php esc_html_e('Small', 'upkyk-assistant-ai'); ?></option>
<option value="medium" <?php selected(get_option('upkyk_assistant_ai_window_size', 'medium'), 'medium'); ?>><?php esc_html_e('Medium (Default)', 'upkyk-assistant-ai'); ?></option>
<option value="large" <?php selected(get_option('upkyk_assistant_ai_window_size', 'medium'), 'large'); ?>><?php esc_html_e('Large', 'upkyk-assistant-ai'); ?></option>
<option value="extra-large" <?php selected(get_option('upkyk_assistant_ai_window_size', 'medium'), 'extra-large'); ?>><?php esc_html_e('Extra Large', 'upkyk-assistant-ai'); ?></option>
<option value="custom" <?php selected(get_option('upkyk_assistant_ai_window_size', 'medium'), 'custom'); ?>><?php esc_html_e('Custom', 'upkyk-assistant-ai'); ?></option>
</select>
<p class="description"><?php esc_html_e('Choose from predefined window sizes or select "Custom" to set your own dimensions.', 'upkyk-assistant-ai'); ?></p>
<div class="preset-size-description">
<p><strong><?php esc_html_e('Size Dimensions:', 'upkyk-assistant-ai'); ?></strong><br>
<?php esc_html_e('Small:', 'upkyk-assistant-ai'); ?> 320px × 450px<br>
<?php esc_html_e('Medium:', 'upkyk-assistant-ai'); ?> 380px × 600px<br>
<?php esc_html_e('Large:', 'upkyk-assistant-ai'); ?> 450px × 650px<br>
<?php esc_html_e('Extra Large:', 'upkyk-assistant-ai'); ?> 550px × 700px</p>
</div>
</div>
<div class="upkyk-form-field custom-size-field" style="<?php echo get_option('upkyk_assistant_ai_window_size', 'medium') === 'custom' ? '' : 'display: none;'; ?>">
<label for="upkyk_assistant_ai_window_width"><?php esc_html_e('Custom Width (px):', 'upkyk-assistant-ai'); ?></label>
<input type="number" id="upkyk_assistant_ai_window_width" name="upkyk_assistant_ai_window_width" min="280" max="800" value="<?php echo esc_attr(get_option('upkyk_assistant_ai_window_width', '380')); ?>">
<p class="description"><?php esc_html_e('Width of chat window in pixels (min: 280px, max: 800px).', 'upkyk-assistant-ai'); ?></p>
</div>
<div class="upkyk-form-field custom-size-field" style="<?php echo get_option('upkyk_assistant_ai_window_size', 'medium') === 'custom' ? '' : 'display: none;'; ?>">
<label for="upkyk_assistant_ai_window_height"><?php esc_html_e('Custom Height (px):', 'upkyk-assistant-ai'); ?></label>
<input type="number" id="upkyk_assistant_ai_window_height" name="upkyk_assistant_ai_window_height" min="300" max="800" value="<?php echo esc_attr(get_option('upkyk_assistant_ai_window_height', '600')); ?>">
<p class="description"><?php esc_html_e('Height of chat window in pixels (min: 300px, max: 800px).', 'upkyk-assistant-ai'); ?></p>
</div>
<div class="upkyk-form-field">
<label for="upkyk_assistant_ai_window_width_mobile"><?php esc_html_e('Mobile Width (%):', 'upkyk-assistant-ai'); ?></label>
<select id="upkyk_assistant_ai_window_width_mobile" name="upkyk_assistant_ai_window_width_mobile">
<option value="85" <?php selected(get_option('upkyk_assistant_ai_window_width_mobile', '95'), '85'); ?>><?php esc_html_e('85% of screen width', 'upkyk-assistant-ai'); ?></option>
<option value="90" <?php selected(get_option('upkyk_assistant_ai_window_width_mobile', '95'), '90'); ?>><?php esc_html_e('90% of screen width', 'upkyk-assistant-ai'); ?></option>
<option value="95" <?php selected(get_option('upkyk_assistant_ai_window_width_mobile', '95'), '95'); ?>><?php esc_html_e('95% of screen width (Default)', 'upkyk-assistant-ai'); ?></option>
<option value="100" <?php selected(get_option('upkyk_assistant_ai_window_width_mobile', '95'), '100'); ?>><?php esc_html_e('100% of screen width', 'upkyk-assistant-ai'); ?></option>
</select>
<p class="description"><?php esc_html_e('Width of chat window on mobile devices (as percentage of screen width).', 'upkyk-assistant-ai'); ?></p>
</div>
<div class="upkyk-form-field">
<label for="upkyk_assistant_ai_window_height_mobile"><?php esc_html_e('Mobile Height (%):', 'upkyk-assistant-ai'); ?></label>
<select id="upkyk_assistant_ai_window_height_mobile" name="upkyk_assistant_ai_window_height_mobile">
<option value="70" <?php selected(get_option('upkyk_assistant_ai_window_height_mobile', '80'), '70'); ?>><?php esc_html_e('70% of screen height', 'upkyk-assistant-ai'); ?></option>
<option value="80" <?php selected(get_option('upkyk_assistant_ai_window_height_mobile', '80'), '80'); ?>><?php esc_html_e('80% of screen height (Default)', 'upkyk-assistant-ai'); ?></option>
<option value="90" <?php selected(get_option('upkyk_assistant_ai_window_height_mobile', '80'), '90'); ?>><?php esc_html_e('90% of screen height', 'upkyk-assistant-ai'); ?></option>
<option value="95" <?php selected(get_option('upkyk_assistant_ai_window_height_mobile', '80'), '95'); ?>><?php esc_html_e('95% of screen height', 'upkyk-assistant-ai'); ?></option>
</select>
<p class="description"><?php esc_html_e('Height of chat window on mobile devices (as percentage of screen height).', 'upkyk-assistant-ai'); ?></p>
</div>
</div>
</div>
<div class="upkyk-preview-section">
<h3><?php esc_html_e('Live Preview', 'upkyk-assistant-ai'); ?></h3>
<div id="upkyk-assistant-ai-preview">
<div class="upkyk-preview-loading"><?php esc_html_e('Loading preview...', 'upkyk-assistant-ai'); ?></div>
</div>
</div>
<?php submit_button(__('Save Appearance', 'upkyk-assistant-ai')); ?>
</form>
</div>
<!-- API Key Tab -->
<div id="api-key" class="upkyk-tab-pane <?php echo $active_tab === 'api-key' ? 'active' : ''; ?>">
<div class="upkyk-section-intro">
<h2><?php esc_html_e('API Integration', 'upkyk-assistant-ai'); ?></h2>
<p><?php esc_html_e("Connect your AI provider's API to power your assistant. Configure API keys and select the AI models to use.", 'upkyk-assistant-ai'); ?></p>
</div>
<div class="upkyk-form">
<form method="post" action="options.php" class="upkyk-api-form">
<?php settings_fields('upkyk_assistant_ai_api'); ?>
<table class="form-table">
<tr valign="top">
<th scope="row"><?php esc_html_e('Provider', 'upkyk-assistant-ai'); ?></th>
<td>
<select name="upkyk_assistant_ai_provider" id="upkyk_assistant_ai_provider">
<option value="openai" <?php selected(get_option('upkyk_assistant_ai_provider', 'deepseek'), 'openai'); ?>><?php esc_html_e('OpenAI', 'upkyk-assistant-ai'); ?></option>
<option value="deepseek" <?php selected(get_option('upkyk_assistant_ai_provider', 'deepseek'), 'deepseek'); ?>><?php esc_html_e('DeepSeek', 'upkyk-assistant-ai'); ?></option>
</select>
<p class="description"><?php esc_html_e('Choose your API provider for AI responses.', 'upkyk-assistant-ai'); ?></p>
</td>
</tr>
<tr>
<th scope="row"><?php esc_html_e( 'API Key', 'upkyk-assistant-ai' ); ?></th>
<td>
<input type="password"
name="upkyk_assistant_ai_api_key"
id="upkyk_assistant_ai_api_key"
value="<?php echo esc_attr(get_option('upkyk_assistant_ai_api_key')); ?>"
class="regular-text">
<p class="description"><?php esc_html_e( 'Enter your AI provider\'s API key', 'upkyk-assistant-ai' ); ?></p>
<div class="upkyk-api-instructions" style="background: #f8f9fa; padding: 15px; border-radius: 4px; margin-top: 10px; border-left: 4px solid #0073aa;">
<h4 style="margin-top: 0;"><?php esc_html_e( 'How to get your API key:', 'upkyk-assistant-ai' ); ?></h4>
<div class="deepseek-instructions" style="margin-bottom: 15px; <?php echo get_option('upkyk_assistant_ai_provider', 'deepseek') !== 'deepseek' ? 'display: none;' : ''; ?>">
<h5 style="margin-bottom: 5px; font-weight: 600;"><?php esc_html_e('DeepSeek API Key', 'upkyk-assistant-ai'); ?></h5>
<ol style="margin-left: 20px;">
<li><?php
/* translators: %s: URL to DeepSeek Platform */
printf(wp_kses(__('Visit <a href="%s" target="_blank">DeepSeek Platform</a> and create an account', 'upkyk-assistant-ai'), ['a' => ['href' => [], 'target' => []]]), esc_url('https://platform.deepseek.com/'));
?></li>
<li><?php esc_html_e('Navigate to your dashboard and go to the API Keys section', 'upkyk-assistant-ai'); ?></li>
<li><?php esc_html_e('Click "Create new API key" and copy your key', 'upkyk-assistant-ai'); ?></li>
<li><?php
/* translators: %s: Example API key format */
printf(esc_html__('Your key will look like %s', 'upkyk-assistant-ai'), '<code>sk-xxxxxxxx...</code>');
?></li>
</ol>
<div style="background: #e7f5ff; padding: 8px; border-radius: 3px; margin-top: 5px;">
<strong><?php esc_html_e( 'Note:', 'upkyk-assistant-ai' ); ?></strong> <?php esc_html_e( 'DeepSeek offers free credits for new accounts', 'upkyk-assistant-ai' ); ?>
</div>
</div>
<div class="openai-instructions" style="<?php echo get_option('upkyk_assistant_ai_provider', 'deepseek') !== 'openai' ? 'display: none;' : ''; ?>">
<h5 style="margin-bottom: 5px; font-weight: 600;"><?php esc_html_e('OpenAI API Key', 'upkyk-assistant-ai'); ?></h5>
<ol style="margin-left: 20px;">
<li><?php
/* translators: %s: URL to OpenAI Platform */
printf(wp_kses(__('Visit <a href="%s" target="_blank">OpenAI Platform</a> and create an account', 'upkyk-assistant-ai'), ['a' => ['href' => [], 'target' => []]]), esc_url('https://platform.openai.com/'));
?></li>
<li><?php esc_html_e('Go to the API Keys section in your account', 'upkyk-assistant-ai'); ?></li>
<li><?php esc_html_e('Click "Create new secret key" and copy your key', 'upkyk-assistant-ai'); ?></li>
<li><?php
/* translators: %1$s: Example API key format 1, %2$s: Example API key format 2 */
printf(esc_html__('Your key will look like %1$s or %2$s', 'upkyk-assistant-ai'), '<code>sk-xxxxxxxx...</code>', '<code>sk-proj-xxxxxxxx...</code>');
?></li>
</ol>
<div style="background: #fff3cd; padding: 8px; border-radius: 3px; margin-top: 5px;">
<strong><?php esc_html_e('Important:', 'upkyk-assistant-ai'); ?></strong> <?php
esc_html_e('OpenAI API usage operates on a pay-as-you-go basis. Please ensure you have sufficient credits in your OpenAI account for the API to function.', 'upkyk-assistant-ai');
?>
</div>
</div>
</div>
<div style="margin-top: 15px;">
<button type="button" class="button" id="test_ai_connection"><?php esc_html_e( 'Test Connection', 'upkyk-assistant-ai' ); ?></button>
<button type="button" class="button" id="delete_api_key"><?php esc_html_e( 'Delete API Key', 'upkyk-assistant-ai' ); ?></button>
<span id="connection_status"></span>
</div>
</td>
</tr>
<tr valign="top" class="deepseek-model-row" style="<?php echo get_option('upkyk_assistant_ai_provider', 'deepseek') === 'deepseek' ? '' : 'display: none;'; ?>">
<th scope="row"><?php esc_html_e( 'DeepSeek Model', 'upkyk-assistant-ai' ); ?></th>
<td>
<select name="upkyk_assistant_ai_deepseek_model" id="upkyk_assistant_ai_deepseek_model">
<option value="deepseek-chat" <?php selected(get_option('upkyk_assistant_ai_deepseek_model', 'deepseek-chat'), 'deepseek-chat'); ?>><?php esc_html_e( 'deepseek-chat (Recommended)', 'upkyk-assistant-ai' ); ?></option>
<option value="deepseek-chat-v1" <?php selected(get_option('upkyk_assistant_ai_deepseek_model', 'deepseek-chat'), 'deepseek-chat-v1'); ?>><?php esc_html_e( 'deepseek-chat-v1', 'upkyk-assistant-ai' ); ?></option>
<option value="deepseek-lite" <?php selected(get_option('upkyk_assistant_ai_deepseek_model', 'deepseek-chat'), 'deepseek-lite'); ?>><?php esc_html_e( 'deepseek-lite', 'upkyk-assistant-ai' ); ?></option>
<option value="deepseek/deepseek-chat" <?php selected(get_option('upkyk_assistant_ai_deepseek_model', 'deepseek-chat'), 'deepseek/deepseek-chat'); ?>><?php esc_html_e( 'deepseek/deepseek-chat', 'upkyk-assistant-ai' ); ?></option>
</select>
<p class="description"><?php esc_html_e( 'Select which DeepSeek model to use. The default "deepseek-chat" is recommended.', 'upkyk-assistant-ai' ); ?></p>
<p class="description"><?php esc_html_e( 'If you\'re experiencing API errors, try other models like "deepseek-chat-v1".', 'upkyk-assistant-ai' ); ?></p>
</td>
</tr>
<tr valign="top" class="openai-model-row" style="<?php echo get_option('upkyk_assistant_ai_provider', 'deepseek') === 'openai' ? '' : 'display: none;'; ?>">
<th scope="row"><?php esc_html_e( 'OpenAI Model', 'upkyk-assistant-ai' ); ?></th>
<td>
<select name="upkyk_assistant_ai_openai_model" id="upkyk_assistant_ai_openai_model">
<option value="gpt-4o-mini" <?php selected(get_option('upkyk_assistant_ai_openai_model', 'gpt-4o-mini'), 'gpt-4o-mini'); ?>><?php esc_html_e( 'GPT-4o mini (Recommended)', 'upkyk-assistant-ai' ); ?></option>
<option value="gpt-4" <?php selected(get_option('upkyk_assistant_ai_openai_model', 'gpt-4o-mini'), 'gpt-4'); ?>><?php esc_html_e( 'GPT-4', 'upkyk-assistant-ai' ); ?></option>
<option value="gpt-4-turbo" <?php selected(get_option('upkyk_assistant_ai_openai_model', 'gpt-4o-mini'), 'gpt-4-turbo'); ?>><?php esc_html_e( 'GPT-4 Turbo', 'upkyk-assistant-ai' ); ?></option>
<option value="gpt-3.5-turbo" <?php selected(get_option('upkyk_assistant_ai_openai_model', 'gpt-4o-mini'), 'gpt-3.5-turbo'); ?>><?php esc_html_e( 'GPT-3.5 Turbo', 'upkyk-assistant-ai' ); ?></option>
</select>
<p class="description"><?php esc_html_e( 'Select which OpenAI model to use. GPT-4o mini is recommended for best performance and cost efficiency.', 'upkyk-assistant-ai' ); ?></p>
<p class="description"><?php esc_html_e( 'Note: More advanced models may incur higher costs.', 'upkyk-assistant-ai' ); ?></p>
</td>
</tr>
</table>
<?php submit_button(__('Save API Settings', 'upkyk-assistant-ai')); ?>
<div id="api_save_notification" class="notice notice-success" style="display:none;">
<p><strong><?php esc_html_e( 'API Key saved successfully!', 'upkyk-assistant-ai' ); ?></strong></p>
</div>
</form>
</div>
</div>
</div>
</div>
</div>