| @@ -59,14 +59,14 @@ | ||
| 59 | 59 | if ( ! is_array( $saved_forms ) ) { |
| 60 | 60 | $saved_forms = array(); |
| 61 | 61 | } |
| 62 | 62 | ?> |
| 63 | -<div class="wrap qcld-main-wrapper"> | |
| 63 | +<div class="wrap qcld-main-wrapper qcld-ai-actions-page"> | |
| 64 | 64 | <div class="qcld-wp-chatbot-wrap-header-aisection"> |
| 65 | 65 | <div class="qcld-wp-chatbot-wrap-header"> |
| 66 | 66 | <div class="qcld-wp-chatbot-wrap-header-logo"> |
| 67 | 67 | <a href="#" class="qcld-wp-chatbot-wrap-site__logo"> |
| 68 | - <img style="width:100%" src="<?php echo esc_url( QCLD_wpCHATBOT_IMG_URL . '/chatbot.png' ); ?>" alt="Dialogflow CX"> WPBot Control Panel | |
| 68 | + <img src="<?php echo esc_url( QCLD_wpCHATBOT_IMG_URL . '/chatbot.png' ); ?>" alt="WPBot"> WPBot Control Panel | |
| 69 | 69 | </a> |
| 70 | 70 | <p><strong>Core Version:</strong> v<?php echo esc_html( QCLD_wpCHATBOT_VERSION ); ?></p> |
| 71 | 71 | </div> |
| 72 | 72 | <ul class="qcld-wp-chatbot-wrap-version-wrapper"> |
| @@ -73,50 +73,50 @@ | ||
| 73 | 73 | <li><a class="wpchatbot-Upgrade" href="https://www.wpbot.pro/" target="_blank">Upgrade To Pro</a></li> |
| 74 | 74 | </ul> |
| 75 | 75 | </div> |
| 76 | 76 | </div> |
| 77 | - | |
| 78 | - <div class="qcl-openai" style="margin-top: 20px;"> | |
| 79 | - <div style="display: flex; gap: 20px; align-items: flex-start;"> | |
| 80 | - | |
| 81 | - <!-- LEFT SIDEBAR --> | |
| 82 | - <div style="width: 250px; flex-shrink: 0; background: #fff; border: 1px solid #ccd0d4; box-shadow: 0 1px 1px rgba(0,0,0,.04);"> | |
| 83 | - <ul class="qcld-ai-sidebar-menu" style="margin: 0; padding: 0; list-style: none;"> | |
| 84 | - <li style="border-bottom: 1px solid #eee;"> | |
| 85 | - <a href="#ai-new-action-tab" class="ai-sidebar-link active" style="display: block; padding: 15px; text-decoration: none; color: #444; font-weight: 600; cursor: pointer; transition: 0.2s;">+ <?php esc_html_e('Add New Action', 'chatbot'); ?></a> | |
| 77 | + | |
| 78 | + <div class="wp-chatbot-wrap"> | |
| 79 | + <section class="wp-chatbot-tab-container-inner"> | |
| 80 | + <div class="wp-chatbot-tabs wp-chatbot-tabs-style-flip qcld-ai-actions-layout"> | |
| 81 | + | |
| 82 | + <nav> | |
| 83 | + <ul class="qcld-ai-sidebar-menu"> | |
| 84 | + <li class="tab-current"> | |
| 85 | + <a href="#ai-new-action-tab" class="ai-sidebar-link active"> | |
| 86 | + <span class="wpwbot-admin-tab-icon"><span class="dashicons dashicons-plus-alt"></span></span> | |
| 87 | + <span class="wpwbot-admin-tab-name"><?php esc_html_e('Add New Action', 'chatbot'); ?></span> | |
| 88 | + </a> | |
| 86 | 89 | </li> |
| 87 | - | |
| 88 | - <li style="border-bottom: 1px solid #eee;"> | |
| 89 | - <a href="#" class="ai-sidebar-parent-link" style="display: flex; justify-content: space-between; padding: 15px; text-decoration: none; color: #444; font-weight: 600; cursor: pointer; background: #fcfcfc;"> | |
| 90 | - <?php esc_html_e('Saved Actions', 'chatbot'); ?> | |
| 91 | - <span class="dashicons dashicons-arrow-down-alt2" style="margin-top: 2px; transition: 0.2s;"></span> | |
| 90 | + <li class="qcld-ai-saved-parent"> | |
| 91 | + <a href="#" class="ai-sidebar-parent-link"> | |
| 92 | + <span class="wpwbot-admin-tab-icon"><span class="dashicons dashicons-portfolio"></span></span> | |
| 93 | + <span class="wpwbot-admin-tab-name"><?php esc_html_e('Saved Actions', 'chatbot'); ?></span> | |
| 94 | + <span class="dashicons dashicons-arrow-down-alt2 qcld-ai-saved-toggle"></span> | |
| 92 | 95 | </a> |
| 93 | - <ul class="ai-saved-actions-submenu" style="margin: 0; padding: 0; list-style: none; display: block; border-top: 1px solid #eee;"> | |
| 94 | - <?php | |
| 96 | + <ul class="ai-saved-actions-submenu"> | |
| 97 | + <?php | |
| 95 | 98 | $counter = 1; |
| 96 | 99 | if ( ! empty( $saved_forms ) ) { |
| 97 | 100 | foreach ( $saved_forms as $form ) { |
| 98 | 101 | $tab_id = 'ai-action-tab-' . $counter; |
| 99 | - echo '<li><a href="#' . esc_attr($tab_id) . '" class="ai-sidebar-link ai-sidebar-saved-link" data-id="'.esc_attr($tab_id).'" style="display: block; padding: 10px 15px 10px 30px; text-decoration: none; color: #555; font-size: 13px; border-bottom: 1px solid #f5f5f5;">' . esc_html( $form['title'] ) . '</a></li>'; | |
| 102 | + echo '<li><a href="#' . esc_attr( $tab_id ) . '" class="ai-sidebar-link ai-sidebar-saved-link" data-id="' . esc_attr( $tab_id ) . '">' . esc_html( $form['title'] ) . '</a></li>'; | |
| 100 | 103 | $counter++; |
| 101 | 104 | } |
| 102 | 105 | } else { |
| 103 | - echo '<li class="ai-no-saved-actions" style="padding: 10px 15px 10px 30px; color: #999; font-size: 12px; font-style: italic;">' . esc_html__('No saved actions', 'chatbot') . '</li>'; | |
| 106 | + echo '<li class="ai-no-saved-actions">' . esc_html__( 'No saved actions', 'chatbot' ) . '</li>'; | |
| 104 | 107 | } |
| 105 | 108 | ?> |
| 106 | 109 | </ul> |
| 107 | 110 | </li> |
| 108 | - | |
| 109 | 111 | </ul> |
| 110 | - </div> | |
| 111 | - | |
| 112 | - <!-- MAIN CONTENT AREA --> | |
| 113 | - <div style="flex-grow: 1; min-width: 0; background: #fff; border: 1px solid #ccd0d4; box-shadow: 0 1px 1px rgba(0,0,0,.04);"> | |
| 114 | - <form action="" method="POST" id="ai-actions-main-form" style="margin: 0; padding: 0;"> | |
| 112 | + </nav> | |
| 113 | + | |
| 114 | + <div class="content-wrap qcld-ai-actions-content"> | |
| 115 | + <form action="" method="POST" id="ai-actions-main-form"> | |
| 115 | 116 | <?php wp_nonce_field( 'wp_chatbot_ai_actions', '_wpnonce' ); ?> |
| 116 | - | |
| 117 | - <!-- NEW ACTION TAB --> | |
| 118 | - <div id="ai-new-action-tab" class="ai-content-pane active" style="padding: 20px;"> | |
| 117 | + | |
| 118 | + <div id="ai-new-action-tab" class="ai-content-pane active"> | |
| 119 | 119 | <?php |
| 120 | 120 | $no_ai_active = (get_option( 'ai_enabled' ) != 1 && |
| 121 | 121 | get_option( 'qcld_openrouter_enabled' ) != 1 && |
| 122 | 122 | get_option( 'qcld_gemini_enabled' ) != 1 && |
| @@ -123,21 +123,21 @@ | ||
| 123 | 123 | get_option( 'qcld_grok_enabled' ) != 1 && |
| 124 | 124 | get_option( 'qcld_claude_enabled' ) != 1); |
| 125 | 125 | if($no_ai_active): |
| 126 | 126 | ?> |
| 127 | - <div style="color: #fff; background: #e64340; padding: 12px 16px; border-radius: 6px; margin-bottom: 20px; display: flex; align-items: center; gap: 10px;"> | |
| 127 | + <div class="qcld-ai-actions-alert"> | |
| 128 | 128 | <?php esc_html_e('No AI connection is active. Please enable AI integration.', 'chatbot'); ?> |
| 129 | 129 | </div> |
| 130 | 130 | <?php endif; ?> |
| 131 | - <h3 style="margin-top: 0; font-size: 18px;"><?php esc_html_e('Choose a Template', 'chatbot'); ?></h3> | |
| 132 | - <p style="color: #666;"><?php esc_html_e('Select a template below to create a new AI Action. You can customize it on the next screen.', 'chatbot'); ?></p> | |
| 131 | + <h3 class="qcld-wpbot-main-tabs-title"><?php esc_html_e('Choose a Template', 'chatbot'); ?></h3> | |
| 132 | + <p><?php esc_html_e('Select a template below to create a new AI Action. You can customize it on the next screen.', 'chatbot'); ?></p> | |
| 133 | 133 | |
| 134 | - <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; margin-top: 20px;"> | |
| 134 | + <div class="qcld-ai-template-grid"> | |
| 135 | 135 | <!-- Blank --> |
| 136 | - <div class="ai-template-card" data-title="" data-prompt="" style="border: 1px solid #ddd; border-radius: 8px; padding: 20px; cursor: pointer; text-align: center; transition: all 0.2s ease;"> | |
| 137 | - <div style="color: #0073aa; margin-bottom: 15px;"><span class="dashicons dashicons-plus-alt2" style="font-size: 40px; width: 40px; height: 40px;"></span></div> | |
| 138 | - <h4 style="margin: 0 0 10px 0; font-size: 15px;">Blank Prompt</h4> | |
| 139 | - <p style="margin: 0; font-size: 12px; color: #666; line-height: 1.4;">Start from scratch and build your own custom AI action.</p> | |
| 136 | + <div class="ai-template-card" data-title="" data-prompt="" > | |
| 137 | + <div class="ai-template-card-icon"><span class="dashicons dashicons-plus-alt2" ></span></div> | |
| 138 | + <h4>Blank Prompt</h4> | |
| 139 | + <p>Start from scratch and build your own custom AI action.</p> | |
| 140 | 140 | </div> |
| 141 | 141 | |
| 142 | 142 | <!-- 1. Web Agency Quote --> |
| 143 | 143 | <div class="ai-template-card" data-title="Web Agency Quote" data-prompt="You are a project discovery assistant for a web development agency. |
| @@ -147,12 +147,12 @@ | ||
| 147 | 147 | 2. What are the core features or problems they need solved? |
| 148 | 148 | 3. What is their estimated budget range and target launch timeline? |
| 149 | 149 | 4. What is their full name, work email, and preferred contact method? |
| 150 | 150 | |
| 151 | -" style="border: 1px solid #ddd; border-radius: 8px; padding: 20px; cursor: pointer; text-align: center; transition: all 0.2s ease;"> | |
| 152 | - <div style="color: #0073aa; margin-bottom: 15px;"><span class="dashicons dashicons-desktop" style="font-size: 40px; width: 40px; height: 40px;"></span></div> | |
| 153 | - <h4 style="margin: 0 0 10px 0; font-size: 15px;">Web Agency Quote</h4> | |
| 154 | - <p style="margin: 0; font-size: 12px; color: #666; line-height: 1.4;">Software, agency, and freelance service inquiries.</p> | |
| 151 | +" > | |
| 152 | + <div class="ai-template-card-icon"><span class="dashicons dashicons-desktop" ></span></div> | |
| 153 | + <h4>Web Agency Quote</h4> | |
| 154 | + <p>Software, agency, and freelance service inquiries.</p> | |
| 155 | 155 | </div> |
| 156 | 156 | |
| 157 | 157 | <!-- 2. Real Estate Inquiry --> |
| 158 | 158 | <div class="ai-template-card" data-title="Real Estate Inquiry" data-prompt="You are a real estate assistant helping visitors find their ideal property. |
| @@ -163,12 +163,12 @@ | ||
| 163 | 163 | 3. How many bedrooms and bathrooms do they require? |
| 164 | 164 | 4. What is their target price or monthly budget range? |
| 165 | 165 | 5. What is their full name, phone number, and email address to schedule a viewing? |
| 166 | 166 | |
| 167 | -" style="border: 1px solid #ddd; border-radius: 8px; padding: 20px; cursor: pointer; text-align: center; transition: all 0.2s ease;"> | |
| 168 | - <div style="color: #0073aa; margin-bottom: 15px;"><span class="dashicons dashicons-building" style="font-size: 40px; width: 40px; height: 40px;"></span></div> | |
| 169 | - <h4 style="margin: 0 0 10px 0; font-size: 15px;">Real Estate Inquiry</h4> | |
| 170 | - <p style="margin: 0; font-size: 12px; color: #666; line-height: 1.4;">Qualifying buyers and renters for property showings.</p> | |
| 167 | +" > | |
| 168 | + <div class="ai-template-card-icon"><span class="dashicons dashicons-building" ></span></div> | |
| 169 | + <h4>Real Estate Inquiry</h4> | |
| 170 | + <p>Qualifying buyers and renters for property showings.</p> | |
| 171 | 171 | </div> |
| 172 | 172 | |
| 173 | 173 | <!-- 3. Priority Support --> |
| 174 | 174 | <div class="ai-template-card" data-title="Priority Support" data-prompt="You are a technical support intake agent. |
| @@ -180,12 +180,12 @@ | ||
| 180 | 180 | 4. What is the urgency level (Low, Medium, or Critical / Site Down)? |
| 181 | 181 | 5. What is their full name and account email address? |
| 182 | 182 | |
| 183 | 183 | Acknowledge issues empathetically. |
| 184 | -" style="border: 1px solid #ddd; border-radius: 8px; padding: 20px; cursor: pointer; text-align: center; transition: all 0.2s ease;"> | |
| 185 | - <div style="color: #0073aa; margin-bottom: 15px;"><span class="dashicons dashicons-sos" style="font-size: 40px; width: 40px; height: 40px;"></span></div> | |
| 186 | - <h4 style="margin: 0 0 10px 0; font-size: 15px;">Priority Support</h4> | |
| 187 | - <p style="margin: 0; font-size: 12px; color: #666; line-height: 1.4;">Bug triage and diagnostic data gathering for helpdesks.</p> | |
| 184 | +" > | |
| 185 | + <div class="ai-template-card-icon"><span class="dashicons dashicons-sos" ></span></div> | |
| 186 | + <h4>Priority Support</h4> | |
| 187 | + <p>Bug triage and diagnostic data gathering for helpdesks.</p> | |
| 188 | 188 | </div> |
| 189 | 189 | |
| 190 | 190 | <!-- 4. SaaS Demo Booking --> |
| 191 | 191 | <div class="ai-template-card" data-title="SaaS Demo Booking" data-prompt="You are an onboarding specialist for a SaaS platform. |
| @@ -195,12 +195,12 @@ | ||
| 195 | 195 | 2. What is the primary bottleneck or workflow they want our software to automate? |
| 196 | 196 | 3. What CRM or marketing tools are in their current tech stack? |
| 197 | 197 | 4. What is their full name, business email, and preferred day/time for a 15-minute demo? |
| 198 | 198 | |
| 199 | -" style="border: 1px solid #ddd; border-radius: 8px; padding: 20px; cursor: pointer; text-align: center; transition: all 0.2s ease;"> | |
| 200 | - <div style="color: #0073aa; margin-bottom: 15px;"><span class="dashicons dashicons-chart-pie" style="font-size: 40px; width: 40px; height: 40px;"></span></div> | |
| 201 | - <h4 style="margin: 0 0 10px 0; font-size: 15px;">SaaS Demo Booking</h4> | |
| 202 | - <p style="margin: 0; font-size: 12px; color: #666; line-height: 1.4;">Lead qualification and sales routing for software platforms.</p> | |
| 199 | +" > | |
| 200 | + <div class="ai-template-card-icon"><span class="dashicons dashicons-chart-pie" ></span></div> | |
| 201 | + <h4>SaaS Demo Booking</h4> | |
| 202 | + <p>Lead qualification and sales routing for software platforms.</p> | |
| 203 | 203 | </div> |
| 204 | 204 | |
| 205 | 205 | <!-- 5. E-Commerce Wholesale --> |
| 206 | 206 | <div class="ai-template-card" data-title="E-Commerce Wholesale" data-prompt="You are a sales assistant helping wholesale and bulk-order customers. |
| @@ -211,12 +211,12 @@ | ||
| 211 | 211 | 3. Do they require custom branding/labels or standard packaging? |
| 212 | 212 | 4. What is their target delivery deadline and destination country/postal code? |
| 213 | 213 | 5. What is their company name, contact person, and billing email? |
| 214 | 214 | |
| 215 | -" style="border: 1px solid #ddd; border-radius: 8px; padding: 20px; cursor: pointer; text-align: center; transition: all 0.2s ease;"> | |
| 216 | - <div style="color: #0073aa; margin-bottom: 15px;"><span class="dashicons dashicons-cart" style="font-size: 40px; width: 40px; height: 40px;"></span></div> | |
| 217 | - <h4 style="margin: 0 0 10px 0; font-size: 15px;">E-Commerce Wholesale</h4> | |
| 218 | - <p style="margin: 0; font-size: 12px; color: #666; line-height: 1.4;">B2B wholesale pricing and custom merchandise for WooCommerce.</p> | |
| 215 | +" > | |
| 216 | + <div class="ai-template-card-icon"><span class="dashicons dashicons-cart" ></span></div> | |
| 217 | + <h4>E-Commerce Wholesale</h4> | |
| 218 | + <p>B2B wholesale pricing and custom merchandise for WooCommerce.</p> | |
| 219 | 219 | </div> |
| 220 | 220 | |
| 221 | 221 | <!-- 6. Legal Case Intake --> |
| 222 | 222 | <div class="ai-template-card" data-title="Legal Case Intake" data-prompt="You are a legal intake assistant for a law firm. |
| @@ -226,12 +226,12 @@ | ||
| 226 | 226 | 2. A brief summary of the situation and approximately when it occurred. |
| 227 | 227 | 3. Are there any upcoming deadlines, court dates, or active lawsuits already filed? |
| 228 | 228 | 4. What is their full name, phone number, and email address? |
| 229 | 229 | |
| 230 | -" style="border: 1px solid #ddd; border-radius: 8px; padding: 20px; cursor: pointer; text-align: center; transition: all 0.2s ease;"> | |
| 231 | - <div style="color: #0073aa; margin-bottom: 15px;"><span class="dashicons dashicons-portfolio" style="font-size: 40px; width: 40px; height: 40px;"></span></div> | |
| 232 | - <h4 style="margin: 0 0 10px 0; font-size: 15px;">Legal Case Intake</h4> | |
| 233 | - <p style="margin: 0; font-size: 12px; color: #666; line-height: 1.4;">Pre-screening legal leads for practice area viability and deadlines.</p> | |
| 230 | +" > | |
| 231 | + <div class="ai-template-card-icon"><span class="dashicons dashicons-portfolio" ></span></div> | |
| 232 | + <h4>Legal Case Intake</h4> | |
| 233 | + <p>Pre-screening legal leads for practice area viability and deadlines.</p> | |
| 234 | 234 | </div> |
| 235 | 235 | |
| 236 | 236 | <!-- 7. Healthcare Booking --> |
| 237 | 237 | <div class="ai-template-card" data-title="Healthcare Booking" data-prompt="You are a patient coordinator assistant for a dental and medical clinic. |
| @@ -241,12 +241,12 @@ | ||
| 241 | 241 | 2. Do they have medical/dental insurance, and if so, who is the provider? |
| 242 | 242 | 3. What days of the week and times of day work best for their appointment? |
| 243 | 243 | 4. What is their full name, date of birth, phone number, and email address? |
| 244 | 244 | |
| 245 | -" style="border: 1px solid #ddd; border-radius: 8px; padding: 20px; cursor: pointer; text-align: center; transition: all 0.2s ease;"> | |
| 246 | - <div style="color: #0073aa; margin-bottom: 15px;"><span class="dashicons dashicons-heart" style="font-size: 40px; width: 40px; height: 40px;"></span></div> | |
| 247 | - <h4 style="margin: 0 0 10px 0; font-size: 15px;">Healthcare Booking</h4> | |
| 248 | - <p style="margin: 0; font-size: 12px; color: #666; line-height: 1.4;">Clinic patient scheduling, primary symptoms, and insurance check.</p> | |
| 245 | +" > | |
| 246 | + <div class="ai-template-card-icon"><span class="dashicons dashicons-heart" ></span></div> | |
| 247 | + <h4>Healthcare Booking</h4> | |
| 248 | + <p>Clinic patient scheduling, primary symptoms, and insurance check.</p> | |
| 249 | 249 | </div> |
| 250 | 250 | |
| 251 | 251 | <!-- 8. Event Planning --> |
| 252 | 252 | <div class="ai-template-card" data-title="Event Planning" data-prompt="You are an event specialist assisting clients with catering and planning inquiries. |
| @@ -257,12 +257,12 @@ | ||
| 257 | 257 | 3. What dining/service style do they prefer (e.g., Plated Multi-Course, Buffet, Cocktail/Hors d'oeuvres)? |
| 258 | 258 | 4. What is their approximate overall budget? |
| 259 | 259 | 5. What is their contact name, organization (if applicable), phone number, and email? |
| 260 | 260 | |
| 261 | -" style="border: 1px solid #ddd; border-radius: 8px; padding: 20px; cursor: pointer; text-align: center; transition: all 0.2s ease;"> | |
| 262 | - <div style="color: #0073aa; margin-bottom: 15px;"><span class="dashicons dashicons-calendar-alt" style="font-size: 40px; width: 40px; height: 40px;"></span></div> | |
| 263 | - <h4 style="margin: 0 0 10px 0; font-size: 15px;">Event Planning</h4> | |
| 264 | - <p style="margin: 0; font-size: 12px; color: #666; line-height: 1.4;">Event venue, banquet, and catering inquiries.</p> | |
| 261 | +" > | |
| 262 | + <div class="ai-template-card-icon"><span class="dashicons dashicons-calendar-alt" ></span></div> | |
| 263 | + <h4>Event Planning</h4> | |
| 264 | + <p>Event venue, banquet, and catering inquiries.</p> | |
| 265 | 265 | </div> |
| 266 | 266 | |
| 267 | 267 | <!-- 9. Auto Dealership --> |
| 268 | 268 | <div class="ai-template-card" data-title="Auto Dealership" data-prompt="You are a sales concierge for an automotive dealership. |
| @@ -273,12 +273,12 @@ | ||
| 273 | 273 | 3. What is their preferred payment path (Financing, Leasing, or Cash purchase)? |
| 274 | 274 | 4. What date and time would they like to schedule their test drive? |
| 275 | 275 | 5. What is their full name, mobile number, and email address? |
| 276 | 276 | |
| 277 | -" style="border: 1px solid #ddd; border-radius: 8px; padding: 20px; cursor: pointer; text-align: center; transition: all 0.2s ease;"> | |
| 278 | - <div style="color: #0073aa; margin-bottom: 15px;"><span class="dashicons dashicons-car" style="font-size: 40px; width: 40px; height: 40px;"></span></div> | |
| 279 | - <h4 style="margin: 0 0 10px 0; font-size: 15px;">Auto Dealership</h4> | |
| 280 | - <p style="margin: 0; font-size: 12px; color: #666; line-height: 1.4;">Test-drive bookings and vehicle trade-in estimates.</p> | |
| 277 | +" > | |
| 278 | + <div class="ai-template-card-icon"><span class="dashicons dashicons-car" ></span></div> | |
| 279 | + <h4>Auto Dealership</h4> | |
| 280 | + <p>Test-drive bookings and vehicle trade-in estimates.</p> | |
| 281 | 281 | </div> |
| 282 | 282 | |
| 283 | 283 | <!-- 10. Education Admissions --> |
| 284 | 284 | <div class="ai-template-card" data-title="Education Admissions" data-prompt="You are an admissions advisor for an educational training academy. |
| @@ -289,12 +289,12 @@ | ||
| 289 | 289 | 3. Are they looking for Full-Time (Immersive) or Part-Time study? |
| 290 | 290 | 4. What is their target cohort start date? |
| 291 | 291 | 5. What is their full name, WhatsApp/phone number, and email address? |
| 292 | 292 | |
| 293 | -" style="border: 1px solid #ddd; border-radius: 8px; padding: 20px; cursor: pointer; text-align: center; transition: all 0.2s ease;"> | |
| 294 | - <div style="color: #0073aa; margin-bottom: 15px;"><span class="dashicons dashicons-welcome-learn-more" style="font-size: 40px; width: 40px; height: 40px;"></span></div> | |
| 295 | - <h4 style="margin: 0 0 10px 0; font-size: 15px;">Education Admissions</h4> | |
| 296 | - <p style="margin: 0; font-size: 12px; color: #666; line-height: 1.4;">Online course and bootcamp enrollment qualification.</p> | |
| 293 | +" > | |
| 294 | + <div class="ai-template-card-icon"><span class="dashicons dashicons-welcome-learn-more" ></span></div> | |
| 295 | + <h4>Education Admissions</h4> | |
| 296 | + <p>Online course and bootcamp enrollment qualification.</p> | |
| 297 | 297 | </div> |
| 298 | 298 | |
| 299 | 299 | <!-- 11. Senior PHP Programmer Assessment --> |
| 300 | 300 | <div class="ai-template-card" data-title="Senior PHP Programmer Assessment" data-prompt="You are an expert technical interviewer screening candidates for an in-house Senior PHP Developer position specializing in Laravel and WordPress core architecture. |
| @@ -320,12 +320,12 @@ | ||
| 320 | 320 | Step 8: "Technical Q1 (Laravel Architecture): How do Service Providers, the Service Container, and Middleware interact during Laravel's request lifecycle? How do you implement and register a custom deferred service provider?" |
| 321 | 321 | Step 9: "Technical Q2 (WordPress Core Internals): Explain how the WordPress Action and Filter hook system works internally under the WP_Hook class. When architecting scalable plugins, how do you manage nonces, custom database tables vs Custom Post Types, and transients for cache invalidation?" |
| 322 | 322 | Step 10: "Technical Q3 (Security & Performance): How do you prevent race conditions, memory exhaustion (e.g., Eloquent chunking vs PHP Generators), and SQL injection when executing bulk database operations across Laravel and WordPress environments?" |
| 323 | 323 | |
| 324 | -" style="border: 1px solid #ddd; border-radius: 8px; padding: 20px; cursor: pointer; text-align: center; transition: all 0.2s ease;"> | |
| 325 | - <div style="color: #0073aa; margin-bottom: 15px;"><span class="dashicons dashicons-businessman" style="font-size: 40px; width: 40px; height: 40px;"></span></div> | |
| 326 | - <h4 style="margin: 0 0 10px 0; font-size: 15px;">Senior PHP Programmer Assessment</h4> | |
| 327 | - <p style="margin: 0; font-size: 12px; color: #666; line-height: 1.4;">Screening candidates for a Senior PHP Developer position.</p> | |
| 324 | +" > | |
| 325 | + <div class="ai-template-card-icon"><span class="dashicons dashicons-businessman" ></span></div> | |
| 326 | + <h4>Senior PHP Programmer Assessment</h4> | |
| 327 | + <p>Screening candidates for a Senior PHP Developer position.</p> | |
| 328 | 328 | </div> |
| 329 | 329 | </div> |
| 330 | 330 | </div> |
| 331 | 331 | |
| @@ -338,47 +338,50 @@ | ||
| 338 | 338 | $tab_id = 'ai-action-tab-' . $counter; |
| 339 | 339 | $chk_interactive_id = 'ai_interactive_' . $counter; |
| 340 | 340 | $chk_email_id = 'ai_email_' . $counter; |
| 341 | 341 | ?> |
| 342 | - <div id="<?php echo esc_attr($tab_id); ?>" class="ai-content-pane ai-form-item saved-ai-action" style="display: none; padding: 20px;"> | |
| 343 | - | |
| 344 | - <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; border-bottom: 1px solid #eee; padding-bottom: 15px;"> | |
| 345 | - <h3 style="margin: 0; font-size: 18px;"><?php esc_html_e('Edit Action', 'chatbot'); ?></h3> | |
| 346 | - <button type="button" class="button remove-ai-form" style="color: #a00; border-color: #a00;"><?php esc_html_e( 'Delete Action', 'chatbot' ); ?></button> | |
| 342 | + <div id="<?php echo esc_attr($tab_id); ?>" class="ai-content-pane ai-form-item saved-ai-action" style="display: none;"> | |
| 343 | + | |
| 344 | + <div class="qcld-ai-action-edit-head"> | |
| 345 | + <h3 class="qcld-wpbot-main-tabs-title"><?php esc_html_e('Edit Action', 'chatbot'); ?></h3> | |
| 346 | + <div class="qcld-ai-action-edit-actions"> | |
| 347 | + <button type="button" class="qcld-btn-primary qcld-ai-goto-new-action"><?php esc_html_e('Add New Action', 'chatbot'); ?></button> | |
| 348 | + <button type="button" class="button remove-ai-form"><?php esc_html_e( 'Delete Action', 'chatbot' ); ?></button> | |
| 349 | + </div> | |
| 347 | 350 | </div> |
| 348 | - | |
| 349 | - <h2 class="nav-tab-wrapper wpbot-ai-inner-tabs" style="margin-bottom: 20px;"> | |
| 350 | - <a href="#ai-inner-settings-<?php echo esc_attr($counter); ?>" class="nav-tab nav-tab-active" style="cursor: pointer;"><?php esc_html_e('Settings', 'chatbot'); ?></a> | |
| 351 | - <a href="#" class="nav-tab" style="cursor: not-allowed; opacity: 0.6;" onclick="event.preventDefault(); return false;"><?php esc_html_e('History', 'chatbot'); ?> <span style="background: #e64340; color: #fff; font-size: 10px; padding: 2px 6px; border-radius: 4px; margin-left: 5px; vertical-align: middle;">PRO</span></a> | |
| 351 | + | |
| 352 | + <h2 class="nav-tab-wrapper wpbot-ai-inner-tabs"> | |
| 353 | + <a href="#ai-inner-settings-<?php echo esc_attr($counter); ?>" class="nav-tab nav-tab-active"><?php esc_html_e('Settings', 'chatbot'); ?></a> | |
| 354 | + <a href="#" class="nav-tab qcld-ai-history-pro-tab"><?php esc_html_e('History', 'chatbot'); ?> <span class="qc_wpbot_pro">PRO</span></a> | |
| 352 | 355 | </h2> |
| 353 | - | |
| 356 | + | |
| 354 | 357 | <div id="ai-inner-settings-<?php echo esc_attr($counter); ?>" class="ai-inner-tab-content"> |
| 355 | - <div style="margin-bottom: 15px;"> | |
| 356 | - <label style="font-weight: 600; display: block; margin-bottom: 5px;"><?php esc_html_e('Action Title', 'chatbot'); ?></label> | |
| 357 | - <input type="text" name="ai_form_title[]" class="form-control ai-form-title-input" style="width: 100%; max-width: 500px;" placeholder="<?php esc_attr_e('e.g., Hotel Booking', 'chatbot'); ?>" value="<?php echo esc_attr( $form['title'] ); ?>" /> | |
| 358 | + <div class="form-group"> | |
| 359 | + <label><?php esc_html_e('Action Title', 'chatbot'); ?></label> | |
| 360 | + <input type="text" name="ai_form_title[]" class="form-control ai-form-title-input" placeholder="<?php esc_attr_e('e.g., Hotel Booking', 'chatbot'); ?>" value="<?php echo esc_attr( $form['title'] ); ?>" /> | |
| 358 | 361 | </div> |
| 359 | - <div style="margin-bottom: 15px;"> | |
| 360 | - <label style="font-weight: 600; display: block; margin-bottom: 5px;"><?php esc_html_e('AI Prompt', 'chatbot'); ?></label> | |
| 361 | - <textarea name="ai_form_prompt[]" class="form-control" style="width: 100%;" rows="15" placeholder="<?php esc_attr_e('Enter your prompt here...', 'chatbot'); ?>"><?php echo esc_textarea( $form['prompt'] ); ?></textarea> | |
| 362 | + <div class="form-group"> | |
| 363 | + <label><?php esc_html_e('AI Prompt', 'chatbot'); ?></label> | |
| 364 | + <textarea name="ai_form_prompt[]" class="form-control" rows="15" placeholder="<?php esc_attr_e('Enter your prompt here...', 'chatbot'); ?>"><?php echo esc_textarea( $form['prompt'] ); ?></textarea> | |
| 362 | 365 | </div> |
| 363 | - | |
| 364 | - <div class="cxsc-settings-blocks" style="margin-top: 20px; border-top: 1px solid #eee; padding-top: 20px;"> | |
| 365 | - <div> | |
| 366 | + | |
| 367 | + <div class="cxsc-settings-blocks"> | |
| 368 | + <div class="form-group qcld-ai-email-toggle"> | |
| 366 | 369 | <input type="hidden" name="ai_form_email[]" class="ai-email-val" value="<?php echo esc_attr( isset($form['email']) ? $form['email'] : 1 ); ?>"> |
| 367 | 370 | <input type="checkbox" id="<?php echo esc_attr( $chk_email_id ); ?>" <?php echo ( !isset($form['email']) || $form['email'] == 1 ) ? 'checked' : ''; ?> onchange="jQuery(this).prev('.ai-email-val').val(this.checked ? 1 : 0);"> |
| 368 | - <label for="<?php echo esc_attr( $chk_email_id ); ?>"><strong><?php esc_html_e('Email the data', 'chatbot'); ?></strong></label> | |
| 371 | + <label for="<?php echo esc_attr( $chk_email_id ); ?>"><?php esc_html_e('Email the data', 'chatbot'); ?></label> | |
| 369 | 372 | </div> |
| 370 | - <div style="margin-top: 10px;"> | |
| 371 | - <label style="font-weight: 600; display: block; margin-bottom: 4px; font-size: 13px;"><?php esc_html_e('Send to Email(s)', 'chatbot'); ?></label> | |
| 372 | - <input type="text" name="ai_form_email_addresses[]" class="form-control" style="width: 100%; max-width: 460px; font-size: 13px;" placeholder="<?php echo esc_attr( get_option('qlcd_wp_chatbot_admin_email', get_option('admin_email')) ); ?>" value="<?php echo esc_attr( isset($form['email_addresses']) ? $form['email_addresses'] : '' ); ?>"> | |
| 373 | - <p style="margin: 4px 0 0; font-size: 11px; color: #888;"><?php esc_html_e('Comma-separated. Leave blank to use the default admin email.', 'chatbot'); ?></p> | |
| 373 | + <div class="qcld-ai-email-field"> | |
| 374 | + <label><?php esc_html_e('Send to Email(s)', 'chatbot'); ?></label> | |
| 375 | + <input type="text" name="ai_form_email_addresses[]" class="form-control" placeholder="<?php echo esc_attr( get_option('qlcd_wp_chatbot_admin_email', get_option('admin_email')) ); ?>" value="<?php echo esc_attr( isset($form['email_addresses']) ? $form['email_addresses'] : '' ); ?>"> | |
| 376 | + <p class="qcld-ai-field-hint"><?php esc_html_e('Comma-separated. Leave blank to use the default admin email.', 'chatbot'); ?></p> | |
| 374 | 377 | </div> |
| 375 | 378 | </div> |
| 376 | 379 | </div> |
| 377 | - | |
| 380 | + | |
| 378 | 381 | <div id="ai-inner-history-<?php echo esc_attr($counter); ?>" class="ai-inner-tab-content" style="display: none;"> |
| 379 | 382 | <div id="ai-inner-history-content-<?php echo esc_attr($counter); ?>"> |
| 380 | - <p style="color: #666; font-style: italic;"><?php esc_html_e('Loading history...', 'chatbot'); ?></p> | |
| 383 | + <p class="qcld-ai-muted"><?php esc_html_e('Loading history...', 'chatbot'); ?></p> | |
| 381 | 384 | </div> |
| 382 | 385 | </div> |
| 383 | 386 | </div> |
| 384 | 387 | <?php |
| @@ -387,90 +390,72 @@ | ||
| 387 | 390 | endif; |
| 388 | 391 | ?> |
| 389 | 392 | </div> |
| 390 | 393 | |
| 391 | - <div id="ai-save-wrapper" style="padding: 15px 20px; background: #f9f9f9; border-top: 1px solid #eee; display: flex;flex-direction: column;"> | |
| 394 | + <div id="ai-save-wrapper" class="wp-chatbot-admin-footer qcld-ai-save-footer"> | |
| 395 | + <div class="cxsc-settings-blocks-notic"> | |
| 396 | + <p><?php esc_html_e("Don't forget to save your changes!", 'chatbot'); ?></p> | |
| 397 | + <p><strong><?php esc_html_e('Create powerful AI Actions with Prompt to collect information and send to your email.', 'chatbot'); ?></strong></p> | |
| 398 | + <p><strong><?php esc_html_e('After creating an AI Action, you can add it to the Active Start Menu from', 'chatbot'); ?> <a href="<?php echo esc_url( admin_url( 'admin.php?page=wpbot&tab=startmenu' ) ); ?>"><?php esc_html_e('Settings -> Start Menu', 'chatbot'); ?></a></strong></p> | |
| 399 | + </div> | |
| 400 | + <input type="submit" name="submit" class="qcld-btn-primary" value="<?php esc_attr_e( 'Save Settings', 'chatbot' ); ?>" /> | |
| 401 | + </div> | |
| 402 | + </form> | |
| 403 | + </div> | |
| 392 | 404 | |
| 393 | - <span style="color: #666; font-size: 13px;">Don't forget to save your changes!</span> | |
| 405 | + <?php | |
| 406 | + $default_provider = 'openai'; | |
| 407 | + if ( get_option( 'qcld_gemini_enabled' ) == 1 ) { | |
| 408 | + $default_provider = 'gemini'; | |
| 409 | + } elseif ( get_option( 'qcld_claude_enabled' ) == 1 ) { | |
| 410 | + $default_provider = 'claude'; | |
| 411 | + } elseif ( get_option( 'qcld_grok_enabled' ) == 1 ) { | |
| 412 | + $default_provider = 'grok'; | |
| 413 | + } elseif ( get_option( 'qcld_openrouter_enabled' ) == 1 ) { | |
| 414 | + $default_provider = 'openrouter'; | |
| 415 | + } | |
| 394 | 416 | |
| 395 | - <span style="color: #f10b0bff; font-size: 16px; font-weight: bold; margin-top: 5px; margin-bottom: 5px;">Create powerful AI Actions with Prompt to collect information and send to your email.</span> | |
| 396 | - <span style="color: #f10b0bff; font-size: 16px; font-weight: bold; margin-top: 5px; margin-bottom: 10px;">After creating an AI Action, you can add it to the Active Start Menu from <a href="<?php echo esc_url( admin_url( 'admin.php?page=wpbot&tab=startmenu' ) ); ?>">Settings->Start Menu</a></span> | |
| 397 | - <input style="max-width: 224px;" type="submit" name="submit" class="button button-primary button-hero" value="<?php esc_attr_e( 'Save Settings', 'chatbot' ); ?>" /> | |
| 417 | + if ( get_option( 'wp_chatbot_icon' ) == 'custom.png' ) { | |
| 418 | + $wp_chatbot_custom_icon_path = ( ! empty( get_option( 'wp_chatbot_custom_icon_path' ) ) ) ? get_option( 'wp_chatbot_custom_icon_path' ) : QCLD_wpCHATBOT_IMG_URL . 'icon-1.png'; | |
| 419 | + } elseif ( get_option( 'wp_chatbot_icon' ) ) { | |
| 420 | + $wp_chatbot_custom_icon_path = QCLD_wpCHATBOT_IMG_URL . get_option( 'wp_chatbot_icon' ); | |
| 421 | + } else { | |
| 422 | + $wp_chatbot_custom_icon_path = QCLD_wpCHATBOT_IMG_URL . 'icon-1.png'; | |
| 423 | + } | |
| 424 | + ?> | |
| 425 | + <aside class="wp-chatbot-admin-upgrade-pro-sidebar qcld-ai-actions-playground"> | |
| 426 | + <div class="qcld-ai-playground"> | |
| 427 | + <div class="qcld-ai-playground-header"> | |
| 428 | + <span><?php esc_html_e('Live AI Playground', 'chatbot'); ?></span> | |
| 429 | + <button type="button" id="ai-playground-refresh" title="<?php esc_attr_e('Refresh Chat', 'chatbot'); ?>"> | |
| 430 | + <span class="dashicons dashicons-update-alt"></span> | |
| 431 | + </button> | |
| 398 | 432 | </div> |
| 399 | - </form> | |
| 400 | - </div> | |
| 401 | - | |
| 402 | - <!-- RIGHT PLAYGROUND PREVIEW --> | |
| 403 | - <div class="card right-preview" style="width: 480px; flex-shrink: 0; background: #f5f5f5; border: 1px solid #e5e5e5; border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.05);"> | |
| 404 | - <?php | |
| 405 | - $default_provider = 'openai'; | |
| 406 | - if ( get_option( 'qcld_gemini_enabled' ) == 1 ) { | |
| 407 | - $default_provider = 'gemini'; | |
| 408 | - } elseif ( get_option( 'qcld_claude_enabled' ) == 1 ) { | |
| 409 | - $default_provider = 'claude'; | |
| 410 | - } elseif ( get_option( 'qcld_grok_enabled' ) == 1 ) { | |
| 411 | - $default_provider = 'grok'; | |
| 412 | - } elseif ( get_option( 'qcld_openrouter_enabled' ) == 1 ) { | |
| 413 | - $default_provider = 'openrouter'; | |
| 414 | - } | |
| 415 | - ?> | |
| 416 | - <div style="background: #4a154b; color: white; padding: 15px; font-weight: bold; text-align: center; border-top-left-radius: 9px; border-top-right-radius: 9px; position: relative;"> | |
| 417 | - <?php esc_html_e('Live AI Playground', 'chatbot'); ?> | |
| 418 | - <button type="button" id="ai-playground-refresh" title="<?php esc_attr_e('Refresh Chat', 'chatbot'); ?>" style="position: absolute; right: 15px; top: 12px; background: transparent; border: none; color: white; cursor: pointer; padding: 0;"> | |
| 419 | - <span class="dashicons dashicons-image-rotate"></span> | |
| 420 | - </button> | |
| 421 | - </div> | |
| 422 | - <div id="ai-actions-playground-container" style="padding: 15px; display: flex; flex-direction: column; height: 400px; overflow-y: auto;"> | |
| 423 | - <div id="ai-actions-playground-messages" style="display: flex; flex-direction: column; justify-content: flex-end; flex: 1;"> | |
| 424 | - <div style="display: flex; gap: 10px; align-items: flex-end; margin-bottom: 15px;"> | |
| 425 | - <div style="width: 30px; height: 30px; background: #4a154b; border-radius: 50%; flex-shrink: 0; background-image: url('<?php echo esc_url(QCLD_wpCHATBOT_IMG_URL); ?>/icon-1.png'); background-size: cover; background-position: center;"></div> | |
| 426 | - <div style="background: white; padding: 12px; border-radius: 15px; border-bottom-left-radius: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); width: 100%;"> | |
| 427 | - <p style="margin-top: 0; margin-bottom: 15px; font-size: 13px; color: #333; line-height: 1.4;"><?php esc_html_e('Hello! I am here to find what you need. What are you looking for?', 'chatbot'); ?></p> | |
| 428 | - <div id="ai-actions-live-preview" style="display: flex; flex-wrap: wrap; gap: 6px;"> | |
| 429 | - <!-- Javascript will populate this --> | |
| 433 | + <div id="ai-actions-playground-container"> | |
| 434 | + <div id="ai-actions-playground-messages"> | |
| 435 | + <div class="qcld-ai-pg-bot-row"> | |
| 436 | + <div class="qcld-ai-pg-avatar" style="background-image: url('<?php echo esc_url( $wp_chatbot_custom_icon_path ); ?>');"></div> | |
| 437 | + <div class="qcld-ai-pg-bubble"> | |
| 438 | + <p><?php esc_html_e('Hello! I am here to find what you need. What are you looking for?', 'chatbot'); ?></p> | |
| 439 | + <div id="ai-actions-live-preview"></div> | |
| 430 | 440 | </div> |
| 431 | 441 | </div> |
| 432 | 442 | </div> |
| 433 | 443 | </div> |
| 444 | + <div class="qcld-ai-playground-footer"> | |
| 445 | + <input type="text" id="playground-input" placeholder="<?php esc_attr_e('Send a message...', 'chatbot'); ?>"> | |
| 446 | + <button type="button" id="playground-send-btn"> | |
| 447 | + <span class="dashicons dashicons-arrow-up-alt"></span> | |
| 448 | + </button> | |
| 449 | + </div> | |
| 434 | 450 | </div> |
| 435 | - <div style="padding: 12px; background: white; border-top: 1px solid #eee; display: flex; gap: 8px; border-bottom-left-radius: 9px; border-bottom-right-radius: 9px;"> | |
| 436 | - <input type="text" id="playground-input" placeholder="<?php esc_attr_e('Send a message...', 'chatbot'); ?>" style="width: 100%; background: #f0f0f0; border: none; border-radius: 20px; padding: 8px 12px; color: #333; font-size: 13px; outline: none;"> | |
| 437 | - <button type="button" id="playground-send-btn" class="button button-primary" style="border-radius: 50%; padding: 0; width: 40px; height: 34px; align-items: center; justify-content: center; flex-shrink: 0;"> | |
| 438 | - <span class="dashicons dashicons-arrow-right-alt" style="line-height: 1.8;"></span> | |
| 439 | - </button> | |
| 440 | - </div> | |
| 441 | - </div> | |
| 442 | - | |
| 451 | + </aside> | |
| 452 | + | |
| 443 | 453 | </div> |
| 454 | + </section> | |
| 444 | 455 | </div> |
| 445 | 456 | </div> |
| 446 | 457 | |
| 447 | -<style> | |
| 448 | -/* CSS for the new layout */ | |
| 449 | -.ai-sidebar-link:hover, .ai-sidebar-link.active { | |
| 450 | - background: #f0f0f1; | |
| 451 | - color: #0073aa !important; | |
| 452 | - box-shadow: inset 4px 0 0 #0073aa; | |
| 453 | -} | |
| 454 | -.ai-sidebar-saved-link:hover, .ai-sidebar-saved-link.active { | |
| 455 | - background: #eef7fd; | |
| 456 | - color: #0073aa !important; | |
| 457 | - box-shadow: inset 4px 0 0 #0073aa; | |
| 458 | -} | |
| 459 | -.ai-template-card:hover { | |
| 460 | - border-color: #0073aa !important; | |
| 461 | - box-shadow: 0 5px 15px rgba(0,115,170,0.1); | |
| 462 | - transform: translateY(-2px); | |
| 463 | -} | |
| 464 | -.ai-content-pane { | |
| 465 | - animation: fadeIn 0.3s ease-in-out; | |
| 466 | -} | |
| 467 | -@keyframes fadeIn { | |
| 468 | - from { opacity: 0; transform: translateY(5px); } | |
| 469 | - to { opacity: 1; transform: translateY(0); } | |
| 470 | -} | |
| 471 | -</style> | |
| 472 | - | |
| 473 | 458 | <script> |
| 474 | 459 | jQuery(document).ready(function($) { |
| 475 | 460 | // --- SIDEBAR TAB SWITCHING LOGIC --- |
| 476 | 461 | function switchTab(targetId, linkObj) { |
| @@ -475,15 +460,24 @@ | ||
| 475 | 460 | // --- SIDEBAR TAB SWITCHING LOGIC --- |
| 476 | 461 | function switchTab(targetId, linkObj) { |
| 477 | 462 | $('.ai-content-pane').hide(); |
| 478 | 463 | $('.ai-sidebar-link').removeClass('active'); |
| 464 | + $('.qcld-ai-actions-layout nav > ul > li').removeClass('tab-current'); | |
| 465 | + $('.ai-saved-actions-submenu li').removeClass('tab-current'); | |
| 479 | 466 | |
| 480 | 467 | $('#' + targetId).show(); |
| 481 | 468 | if (linkObj) { |
| 482 | 469 | linkObj.addClass('active'); |
| 483 | 470 | } else { |
| 484 | - $('.ai-sidebar-link[href="#' + targetId + '"]').addClass('active'); | |
| 471 | + linkObj = $('.ai-sidebar-link[href="#' + targetId + '"]'); | |
| 472 | + linkObj.addClass('active'); | |
| 485 | 473 | } |
| 474 | + if (linkObj && linkObj.length) { | |
| 475 | + linkObj.closest('li').addClass('tab-current'); | |
| 476 | + if (linkObj.hasClass('ai-sidebar-saved-link')) { | |
| 477 | + $('.qcld-ai-saved-parent').addClass('is-open'); | |
| 478 | + } | |
| 479 | + } | |
| 486 | 480 | |
| 487 | 481 | // Hide Save button if history tab (if we still had it globally, but we don't) |
| 488 | 482 | $('#ai-save-wrapper').show(); |
| 489 | 483 | |
| @@ -514,16 +508,29 @@ | ||
| 514 | 508 | if (tabToOpen) { |
| 515 | 509 | switchTab(tabToOpen, null); |
| 516 | 510 | if (linkToOpen && linkToOpen.closest('.ai-saved-actions-submenu').length) { |
| 517 | 511 | $('.ai-saved-actions-submenu').show(); |
| 518 | - $('.ai-sidebar-parent-link .dashicons').removeClass('dashicons-arrow-down-alt2').addClass('dashicons-arrow-up-alt2'); | |
| 512 | + $('.qcld-ai-saved-parent').addClass('is-open'); | |
| 513 | + $('.qcld-ai-saved-toggle').removeClass('dashicons-arrow-down-alt2').addClass('dashicons-arrow-up-alt2'); | |
| 519 | 514 | } |
| 520 | 515 | } |
| 521 | 516 | } |
| 522 | 517 | |
| 518 | + $(document).on('click', '.qcld-ai-goto-new-action', function(e) { | |
| 519 | + e.preventDefault(); | |
| 520 | + switchTab('ai-new-action-tab', $('.ai-sidebar-link[href="#ai-new-action-tab"]')); | |
| 521 | + }); | |
| 522 | + | |
| 523 | 523 | $(document).on('click', '.ai-sidebar-link', function(e) { |
| 524 | 524 | e.preventDefault(); |
| 525 | - var target = $(this).attr('href').substring(1); | |
| 525 | + var href = $(this).attr('href') || ''; | |
| 526 | + if (href.indexOf('#') === -1) { | |
| 527 | + return; | |
| 528 | + } | |
| 529 | + var target = href.substring(href.indexOf('#') + 1); | |
| 530 | + if (!target) { | |
| 531 | + return; | |
| 532 | + } | |
| 526 | 533 | switchTab(target, $(this)); |
| 527 | 534 | }); |
| 528 | 535 | |
| 529 | 536 | // --- SAVED ACTIONS SUBMENU TOGGLE --- |
| @@ -529,9 +536,10 @@ | ||
| 529 | 536 | // --- SAVED ACTIONS SUBMENU TOGGLE --- |
| 530 | 537 | $('.ai-sidebar-parent-link').on('click', function(e) { |
| 531 | 538 | e.preventDefault(); |
| 532 | 539 | var submenu = $(this).next('.ai-saved-actions-submenu'); |
| 533 | - var icon = $(this).find('.dashicons'); | |
| 540 | + var icon = $(this).find('.qcld-ai-saved-toggle'); | |
| 541 | + $(this).closest('li').toggleClass('is-open'); | |
| 534 | 542 | |
| 535 | 543 | submenu.slideToggle(200); |
| 536 | 544 | if (icon.hasClass('dashicons-arrow-down-alt2')) { |
| 537 | 545 | icon.removeClass('dashicons-arrow-down-alt2').addClass('dashicons-arrow-up-alt2'); |
| @@ -633,49 +641,52 @@ | ||
| 633 | 641 | // Remove "No saved actions" if exists |
| 634 | 642 | $('.ai-no-saved-actions').remove(); |
| 635 | 643 | |
| 636 | 644 | // 1. Add Sidebar Link |
| 637 | - var linkHtml = '<li><a href="#' + tabId + '" class="ai-sidebar-link ai-sidebar-saved-link" data-id="' + tabId + '" style="display: block; padding: 10px 15px 10px 30px; text-decoration: none; color: #555; font-size: 13px; border-bottom: 1px solid #f5f5f5;">' + displayTitle + '</a></li>'; | |
| 645 | + var linkHtml = '<li><a href="#' + tabId + '" class="ai-sidebar-link ai-sidebar-saved-link" data-id="' + tabId + '">' + displayTitle + '</a></li>'; | |
| 638 | 646 | $('.ai-saved-actions-submenu').append(linkHtml); |
| 639 | 647 | |
| 640 | 648 | // Ensure submenu is open |
| 641 | 649 | $('.ai-saved-actions-submenu').slideDown(200); |
| 642 | - $('.ai-sidebar-parent-link .dashicons').removeClass('dashicons-arrow-down-alt2').addClass('dashicons-arrow-up-alt2'); | |
| 650 | + $('.qcld-ai-saved-parent').addClass('is-open'); | |
| 651 | + $('.qcld-ai-saved-toggle').removeClass('dashicons-arrow-down-alt2').addClass('dashicons-arrow-up-alt2'); | |
| 643 | 652 | |
| 644 | 653 | // 2. Add Form Pane |
| 645 | 654 | var template = ` |
| 646 | - <div id="` + tabId + `" class="ai-content-pane ai-form-item" style="display: none; padding: 20px;"> | |
| 647 | - <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; border-bottom: 1px solid #eee; padding-bottom: 15px;"> | |
| 648 | - <h3 style="margin: 0; font-size: 18px;"><?php esc_html_e('Edit Action', 'chatbot'); ?></h3> | |
| 649 | - <button type="button" class="button remove-ai-form" style="color: #a00; border-color: #a00;"><?php esc_html_e( 'Delete Action', 'chatbot' ); ?></button> | |
| 655 | + <div id="` + tabId + `" class="ai-content-pane ai-form-item" style="display: none;"> | |
| 656 | + <div class="qcld-ai-action-edit-head"> | |
| 657 | + <h3 class="qcld-wpbot-main-tabs-title"><?php esc_html_e('Edit Action', 'chatbot'); ?></h3> | |
| 658 | + <div class="qcld-ai-action-edit-actions"> | |
| 659 | + <button type="button" class="qcld-btn-primary qcld-ai-goto-new-action"><?php esc_html_e('Add New Action', 'chatbot'); ?></button> | |
| 660 | + <button type="button" class="button remove-ai-form"><?php esc_html_e( 'Delete Action', 'chatbot' ); ?></button> | |
| 661 | + </div> | |
| 650 | 662 | </div> |
| 651 | 663 | |
| 652 | - <h2 class="nav-tab-wrapper wpbot-ai-inner-tabs" style="margin-bottom: 20px;"> | |
| 653 | - <a href="#ai-inner-settings-` + uniqueId + `" class="nav-tab nav-tab-active" style="cursor: pointer;"><?php esc_html_e('Settings', 'chatbot'); ?></a> | |
| 654 | - <a href="#" class="nav-tab" style="cursor: not-allowed; opacity: 0.6;" onclick="event.preventDefault(); return false;"><?php esc_html_e('History', 'chatbot'); ?> <span style="background: #e64340; color: #fff; font-size: 10px; padding: 2px 6px; border-radius: 4px; margin-left: 5px; vertical-align: middle;">PRO</span></a> | |
| 664 | + <h2 class="nav-tab-wrapper wpbot-ai-inner-tabs"> | |
| 665 | + <a href="#ai-inner-settings-` + uniqueId + `" class="nav-tab nav-tab-active"><?php esc_html_e('Settings', 'chatbot'); ?></a> | |
| 666 | + <a href="#" class="nav-tab qcld-ai-history-pro-tab"><?php esc_html_e('History', 'chatbot'); ?> <span class="qc_wpbot_pro">PRO</span></a> | |
| 655 | 667 | </h2> |
| 656 | 668 | |
| 657 | 669 | <div id="ai-inner-settings-` + uniqueId + `" class="ai-inner-tab-content"> |
| 658 | - <div style="margin-bottom: 15px;"> | |
| 659 | - <label style="font-weight: 600; display: block; margin-bottom: 5px;"><?php esc_html_e('Action Title', 'chatbot'); ?></label> | |
| 660 | - <input type="text" name="ai_form_title[]" class="form-control ai-form-title-input" style="width: 100%; max-width: 500px;" placeholder="<?php esc_attr_e('e.g., Hotel Booking', 'chatbot'); ?>" value="` + title + `" /> | |
| 670 | + <div class="form-group"> | |
| 671 | + <label><?php esc_html_e('Action Title', 'chatbot'); ?></label> | |
| 672 | + <input type="text" name="ai_form_title[]" class="form-control ai-form-title-input" placeholder="<?php esc_attr_e('e.g., Hotel Booking', 'chatbot'); ?>" value="` + title + `" /> | |
| 661 | 673 | </div> |
| 662 | - <div style="margin-bottom: 15px;"> | |
| 663 | - <label style="font-weight: 600; display: block; margin-bottom: 5px;"><?php esc_html_e('AI Prompt', 'chatbot'); ?></label> | |
| 664 | - <textarea name="ai_form_prompt[]" class="form-control" style="width: 100%;" rows="8" placeholder="<?php esc_attr_e('Enter your prompt here...', 'chatbot'); ?>">` + prompt + `</textarea> | |
| 674 | + <div class="form-group"> | |
| 675 | + <label><?php esc_html_e('AI Prompt', 'chatbot'); ?></label> | |
| 676 | + <textarea name="ai_form_prompt[]" class="form-control" rows="8" placeholder="<?php esc_attr_e('Enter your prompt here...', 'chatbot'); ?>">` + prompt + `</textarea> | |
| 665 | 677 | </div> |
| 666 | 678 | |
| 667 | - <div class="cxsc-settings-blocks" style="margin-top: 20px; border-top: 1px solid #eee; padding-top: 20px;"> | |
| 668 | - | |
| 669 | - <div> | |
| 679 | + <div class="cxsc-settings-blocks"> | |
| 680 | + <div class="form-group qcld-ai-email-toggle"> | |
| 670 | 681 | <input type="hidden" name="ai_form_email[]" class="ai-email-val" value="1"> |
| 671 | 682 | <input type="checkbox" id="` + chk_email_id + `" checked onchange="jQuery(this).prev(\'.ai-email-val\').val(this.checked ? 1 : 0);"> |
| 672 | - <label for="` + chk_email_id + `"><strong><?php esc_html_e('Email the data', 'chatbot'); ?></strong></label> | |
| 683 | + <label for="` + chk_email_id + `"><?php esc_html_e('Email the data', 'chatbot'); ?></label> | |
| 673 | 684 | </div> |
| 674 | - <div style="margin-top: 10px;"> | |
| 675 | - <label style="font-weight: 600; display: block; margin-bottom: 4px; font-size: 13px;"><?php esc_html_e('Send to Email(s)', 'chatbot'); ?></label> | |
| 676 | - <input type="text" name="ai_form_email_addresses[]" class="form-control" style="width: 100%; max-width: 460px; font-size: 13px;" placeholder="<?php echo esc_attr( get_option('qlcd_wp_chatbot_admin_email', get_option('admin_email')) ); ?>" value=""> | |
| 677 | - <p style="margin: 4px 0 0; font-size: 11px; color: #888;"><?php esc_html_e('Comma-separated. Leave blank to use the default admin email.', 'chatbot'); ?></p> | |
| 685 | + <div class="qcld-ai-email-field"> | |
| 686 | + <label><?php esc_html_e('Send to Email(s)', 'chatbot'); ?></label> | |
| 687 | + <input type="text" name="ai_form_email_addresses[]" class="form-control" placeholder="<?php echo esc_attr( get_option('qlcd_wp_chatbot_admin_email', get_option('admin_email')) ); ?>" value=""> | |
| 688 | + <p class="qcld-ai-field-hint"><?php esc_html_e('Comma-separated. Leave blank to use the default admin email.', 'chatbot'); ?></p> | |
| 678 | 689 | </div> |
| 679 | 690 | </div> |
| 680 | 691 | </div> |
| 681 | 692 | |
| @@ -680,9 +691,9 @@ | ||
| 680 | 691 | </div> |
| 681 | 692 | |
| 682 | 693 | <div id="ai-inner-history-` + uniqueId + `" class="ai-inner-tab-content" style="display: none;"> |
| 683 | 694 | <div id="ai-inner-history-content-` + uniqueId + `"> |
| 684 | - <p style="color: #666; font-style: italic;"><?php esc_html_e('Loading history...', 'chatbot'); ?></p> | |
| 695 | + <p class="qcld-ai-muted"><?php esc_html_e('Loading history...', 'chatbot'); ?></p> | |
| 685 | 696 | </div> |
| 686 | 697 | </div> |
| 687 | 698 | </div> |
| 688 | 699 | `; |
| @@ -708,9 +719,9 @@ | ||
| 708 | 719 | $('.ai-sidebar-link[href="#' + tabId + '"]').parent().remove(); |
| 709 | 720 | |
| 710 | 721 | // Check if submenu is empty |
| 711 | 722 | if ($('.ai-saved-actions-submenu li').length === 0) { |
| 712 | - $('.ai-saved-actions-submenu').html('<li class="ai-no-saved-actions" style="padding: 10px 15px 10px 30px; color: #999; font-size: 12px; font-style: italic;"><?php esc_html_e('No saved actions', 'chatbot'); ?></li>'); | |
| 723 | + $('.ai-saved-actions-submenu').html('<li class="ai-no-saved-actions"><?php esc_html_e('No saved actions', 'chatbot'); ?></li>'); | |
| 713 | 724 | } |
| 714 | 725 | |
| 715 | 726 | // Switch back to Add New Action tab |
| 716 | 727 | switchTab('ai-new-action-tab', $('.ai-sidebar-link[href="#ai-new-action-tab"]')); |
| @@ -744,12 +755,12 @@ | ||
| 744 | 755 | } |
| 745 | 756 | }); |
| 746 | 757 | |
| 747 | 758 | if(titles.length === 0) { |
| 748 | - previewContainer.append('<span style="background: #f0f0f0; border: 1px solid #ddd; padding: 5px 12px; border-radius: 15px; font-size: 12px; color: #555; cursor: default;"><?php esc_html_e('No Actions Created Yet', 'chatbot'); ?></span>'); | |
| 759 | + previewContainer.append('<span class="playground-ai-action-btn is-empty"><?php esc_html_e('No Actions Created Yet', 'chatbot'); ?></span>'); | |
| 749 | 760 | } else { |
| 750 | 761 | $.each(titles, function(index, title) { |
| 751 | - previewContainer.append('<span class="playground-ai-action-btn" style="background: #e9f0ff; border: 1px solid #b3ccff; padding: 5px 12px; border-radius: 15px; font-size: 12px; color: #0044cc; cursor: pointer; display: inline-block; transition: all 0.2s;">' + title + '</span>'); | |
| 762 | + previewContainer.append('<span class="playground-ai-action-btn">' + title + '</span>'); | |
| 752 | 763 | }); |
| 753 | 764 | } |
| 754 | 765 | } |
| 755 | 766 | |
| @@ -755,13 +766,13 @@ | ||
| 755 | 766 | |
| 756 | 767 | // --- PLAYGROUND INTERACTIVE LOGIC --- |
| 757 | 768 | var aiContext = []; |
| 758 | 769 | |
| 770 | + var playgroundIcon = '<?php echo esc_url( $wp_chatbot_custom_icon_path ); ?>'; | |
| 771 | + | |
| 759 | 772 | function appendUserMessage(text) { |
| 760 | - var msgHtml = '<div style="display: flex; justify-content: flex-end; margin-bottom: 12px;">' + | |
| 761 | - '<div style="background: #0044cc; color: white; padding: 8px 12px; border-radius: 15px; border-bottom-right-radius: 5px; max-width: 80%; font-size: 13px;">' + | |
| 762 | - text + | |
| 763 | - '</div>' + | |
| 773 | + var msgHtml = '<div class="qcld-ai-pg-user-row">' + | |
| 774 | + '<div class="qcld-ai-pg-user-bubble">' + text + '</div>' + | |
| 764 | 775 | '</div>'; |
| 765 | 776 | $('#ai-actions-playground-messages').append(msgHtml); |
| 766 | 777 | scrollToBottom(); |
| 767 | 778 | } |
| @@ -766,13 +777,11 @@ | ||
| 766 | 777 | scrollToBottom(); |
| 767 | 778 | } |
| 768 | 779 | |
| 769 | 780 | function appendBotMessage(text) { |
| 770 | - var msgHtml = '<div style="display: flex; gap: 8px; align-items: flex-end; margin-bottom: 12px;">' + | |
| 771 | - '<div style="width: 30px; height: 30px; background: #4a154b; border-radius: 50%; flex-shrink: 0; background-image: url(\'<?php echo esc_url(QCLD_wpCHATBOT_IMG_URL); ?>/icon-1.png\'); background-size: cover; background-position: center;"></div>' + | |
| 772 | - '<div style="background: white; padding: 8px 12px; border-radius: 15px; border-bottom-left-radius: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); max-width: 80%; font-size: 13px; color: #333; line-height: 1.4; overflow-wrap: break-word;">' + | |
| 773 | - text + | |
| 774 | - '</div>' + | |
| 781 | + var msgHtml = '<div class="qcld-ai-pg-bot-row">' + | |
| 782 | + '<div class="qcld-ai-pg-avatar" style="background-image: url(\'' + playgroundIcon + '\');"></div>' + | |
| 783 | + '<div class="qcld-ai-pg-bubble">' + text + '</div>' + | |
| 775 | 784 | '</div>'; |
| 776 | 785 | $('#ai-actions-playground-messages').append(msgHtml); |
| 777 | 786 | scrollToBottom(); |
| 778 | 787 | } |
| @@ -777,13 +786,11 @@ | ||
| 777 | 786 | scrollToBottom(); |
| 778 | 787 | } |
| 779 | 788 | |
| 780 | 789 | function appendLoader() { |
| 781 | - var msgHtml = '<div id="playground-loader" style="display: flex; gap: 8px; align-items: flex-end; margin-bottom: 12px;">' + | |
| 782 | - '<div style="width: 30px; height: 30px; background: #4a154b; border-radius: 50%; flex-shrink: 0; background-image: url(\'<?php echo esc_url(QCLD_wpCHATBOT_IMG_URL); ?>/icon-1.png\'); background-size: cover; background-position: center;"></div>' + | |
| 783 | - '<div style="background: white; padding: 8px 12px; border-radius: 15px; border-bottom-left-radius: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); font-size: 13px; color: #999;">' + | |
| 784 | - '<i>Thinking...</i>' + | |
| 785 | - '</div>' + | |
| 790 | + var msgHtml = '<div id="playground-loader" class="qcld-ai-pg-bot-row">' + | |
| 791 | + '<div class="qcld-ai-pg-avatar" style="background-image: url(\'' + playgroundIcon + '\');"></div>' + | |
| 792 | + '<div class="qcld-ai-pg-bubble is-loading"><i>Thinking...</i></div>' + | |
| 786 | 793 | '</div>'; |
| 787 | 794 | $('#ai-actions-playground-messages').append(msgHtml); |
| 788 | 795 | scrollToBottom(); |
| 789 | 796 | } |
| @@ -808,14 +815,14 @@ | ||
| 808 | 815 | return match; |
| 809 | 816 | } |
| 810 | 817 | var jsonStr = jsonMatch[0]; |
| 811 | 818 | var data = JSON.parse(jsonStr.trim()); |
| 812 | - var html = '<div style="background: #f4f4f4; padding: 10px; border-left: 3px solid #0044cc; margin: 10px 0; border-radius: 3px;">'; | |
| 819 | + var html = '<div class="qcld-ai-pg-form-data">'; | |
| 813 | 820 | if (data.form_title) { |
| 814 | - html += '<strong style="display:block; margin-bottom: 5px; color: #0044cc; text-transform: capitalize;">' + data.form_title + '</strong>'; | |
| 821 | + html += '<strong>' + data.form_title + '</strong>'; | |
| 815 | 822 | } |
| 816 | 823 | if (data.data) { |
| 817 | - html += '<ul style="margin: 0; padding-left: 15px; font-size: 13px; color: #333;">'; | |
| 824 | + html += '<ul>'; | |
| 818 | 825 | for (var key in data.data) { |
| 819 | 826 | html += '<li style="margin-bottom: 3px;"><strong>' + key + ':</strong> ' + data.data[key] + '</li>'; |
| 820 | 827 | } |
| 821 | 828 | html += '</ul>'; |
| @@ -888,8 +895,11 @@ | ||
| 888 | 895 | }); |
| 889 | 896 | } |
| 890 | 897 | |
| 891 | 898 | $(document).on('click', '.playground-ai-action-btn', function() { |
| 899 | + if ($(this).hasClass('is-empty')) { | |
| 900 | + return; | |
| 901 | + } | |
| 892 | 902 | var text = $(this).text().trim(); |
| 893 | 903 | |
| 894 | 904 | var matchedPrompt = ''; |
| 895 | 905 | $('.ai-form-title-input').each(function() { |
| @@ -925,12 +935,11 @@ | ||
| 925 | 935 | $messages.children(':not(:first)').remove(); |
| 926 | 936 | updateAiActionsPreview(); |
| 927 | 937 | }); |
| 928 | 938 | |
| 929 | - $(document).on('mouseenter', '.playground-ai-action-btn', function() { | |
| 930 | - $(this).css({background: '#d0e0ff', borderColor: '#8ab4f8'}); | |
| 931 | - }).on('mouseleave', '.playground-ai-action-btn', function() { | |
| 932 | - $(this).css({background: '#e9f0ff', borderColor: '#b3ccff'}); | |
| 939 | + $(document).on('click', '.qcld-ai-history-pro-tab', function(e) { | |
| 940 | + e.preventDefault(); | |
| 941 | + return false; | |
| 933 | 942 | }); |
| 934 | 943 | |
| 935 | 944 | // --- INITIALIZATION --- |
| 936 | 945 | updateAiActionsPreview(); |
