| @@ -45,22 +45,22 @@ | ||
| 45 | 45 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg> |
| 46 | 46 | </button> |
| 47 | 47 | </div> |
| 48 | 48 | <nav class="mxch-mobile-menu-nav"> |
| 49 | - <!-- Overview Section --> | |
| 49 | + <!-- Actions umbrella: Dashboard, then AI Tools (recommended), then Trigger Phrases --> | |
| 50 | 50 | <div class="mxch-mobile-nav-section"> |
| 51 | - <div class="mxch-mobile-nav-section-title"><?php esc_html_e('Overview', 'mxchat'); ?></div> | |
| 52 | - <button class="mxch-mobile-nav-link active" data-target="dashboard"> | |
| 51 | + <div class="mxch-mobile-nav-section-title"><?php esc_html_e('Actions', 'mxchat'); ?></div> | |
| 52 | + <button class="mxch-mobile-nav-link <?php echo (isset($active_tab) && $active_tab === 'dashboard') ? 'active' : ''; ?>" data-target="dashboard"> | |
| 53 | 53 | <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="9"/><rect x="14" y="3" width="7" height="5"/><rect x="14" y="12" width="7" height="9"/><rect x="3" y="16" width="7" height="5"/></svg> |
| 54 | 54 | <span><?php esc_html_e('Dashboard', 'mxchat'); ?></span> |
| 55 | 55 | </button> |
| 56 | - </div> | |
| 57 | - <!-- Actions Section --> | |
| 58 | - <div class="mxch-mobile-nav-section"> | |
| 59 | - <div class="mxch-mobile-nav-section-title"><?php esc_html_e('Manage', 'mxchat'); ?></div> | |
| 56 | + <button class="mxch-mobile-nav-link <?php echo (isset($active_tab) && $active_tab === 'ai-tools') ? 'active' : ''; ?>" data-target="ai-tools"> | |
| 57 | + <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg> | |
| 58 | + <span><?php esc_html_e('AI Tools', 'mxchat'); ?></span> | |
| 59 | + </button> | |
| 60 | 60 | <button class="mxch-mobile-nav-link" data-target="all-actions"> |
| 61 | 61 | <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg> |
| 62 | - <span><?php esc_html_e('All Actions', 'mxchat'); ?></span> | |
| 62 | + <span><?php esc_html_e('Trigger Phrases', 'mxchat'); ?></span> | |
| 63 | 63 | </button> |
| 64 | 64 | </div> |
| 65 | 65 | <?php if (!$is_activated): ?> |
| 66 | 66 | <div class="mxch-mobile-menu-footer"> |
| @@ -85,14 +85,14 @@ | ||
| 85 | 85 | </a> |
| 86 | 86 | </div> |
| 87 | 87 | |
| 88 | 88 | <nav class="mxch-sidebar-nav"> |
| 89 | - <!-- Overview Section --> | |
| 89 | + <!-- Actions umbrella: Dashboard, then AI Tools (recommended), then Trigger Phrases --> | |
| 90 | 90 | <div class="mxch-nav-section"> |
| 91 | - <div class="mxch-nav-section-title"><?php esc_html_e('Overview', 'mxchat'); ?></div> | |
| 91 | + <div class="mxch-nav-section-title"><?php esc_html_e('Actions', 'mxchat'); ?></div> | |
| 92 | 92 | |
| 93 | 93 | <div class="mxch-nav-item" data-section="dashboard"> |
| 94 | - <button class="mxch-nav-link active" data-target="dashboard"> | |
| 94 | + <button class="mxch-nav-link <?php echo (isset($active_tab) && $active_tab === 'dashboard') ? 'active' : ''; ?>" data-target="dashboard"> | |
| 95 | 95 | <span class="mxch-nav-link-icon"> |
| 96 | 96 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="9"/><rect x="14" y="3" width="7" height="5"/><rect x="14" y="12" width="7" height="9"/><rect x="3" y="16" width="7" height="5"/></svg> |
| 97 | 97 | </span> |
| 98 | 98 | <span class="mxch-nav-link-text"><?php esc_html_e('Dashboard', 'mxchat'); ?></span> |
| @@ -97,13 +97,18 @@ | ||
| 97 | 97 | </span> |
| 98 | 98 | <span class="mxch-nav-link-text"><?php esc_html_e('Dashboard', 'mxchat'); ?></span> |
| 99 | 99 | </button> |
| 100 | 100 | </div> |
| 101 | - </div> | |
| 102 | 101 | |
| 103 | - <!-- Manage Section --> | |
| 104 | - <div class="mxch-nav-section"> | |
| 105 | - <div class="mxch-nav-section-title"><?php esc_html_e('Manage', 'mxchat'); ?></div> | |
| 102 | + <div class="mxch-nav-item" data-section="ai-tools"> | |
| 103 | + <button class="mxch-nav-link <?php echo (isset($active_tab) && $active_tab === 'ai-tools') ? 'active' : ''; ?>" data-target="ai-tools"> | |
| 104 | + <span class="mxch-nav-link-icon"> | |
| 105 | + <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg> | |
| 106 | + </span> | |
| 107 | + <span class="mxch-nav-link-text"><?php esc_html_e('AI Tools', 'mxchat'); ?></span> | |
| 108 | + <span class="mxch-nav-link-badge"><?php echo esc_html($total_tools); ?></span> | |
| 109 | + </button> | |
| 110 | + </div> | |
| 106 | 111 | |
| 107 | 112 | <div class="mxch-nav-item" data-section="all-actions"> |
| 108 | 113 | <button class="mxch-nav-link" data-target="all-actions"> |
| 109 | 114 | <span class="mxch-nav-link-icon"> |
| @@ -108,9 +113,9 @@ | ||
| 108 | 113 | <button class="mxch-nav-link" data-target="all-actions"> |
| 109 | 114 | <span class="mxch-nav-link-icon"> |
| 110 | 115 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg> |
| 111 | 116 | </span> |
| 112 | - <span class="mxch-nav-link-text"><?php esc_html_e('All Actions', 'mxchat'); ?></span> | |
| 117 | + <span class="mxch-nav-link-text"><?php esc_html_e('Trigger Phrases', 'mxchat'); ?></span> | |
| 113 | 118 | <span class="mxch-nav-link-badge"><?php echo esc_html($total_actions); ?></span> |
| 114 | 119 | </button> |
| 115 | 120 | </div> |
| 116 | 121 | </div> |
| @@ -128,76 +133,66 @@ | ||
| 128 | 133 | |
| 129 | 134 | <!-- Main Content Area --> |
| 130 | 135 | <main class="mxch-content"> |
| 131 | 136 | <!-- Dashboard Section --> |
| 132 | - <div id="dashboard" class="mxch-section active"> | |
| 137 | + <div id="dashboard" class="mxch-section <?php echo (isset($active_tab) && $active_tab === 'dashboard') ? 'active' : ''; ?>"> | |
| 133 | 138 | <div class="mxch-content-header"> |
| 134 | - <h1 class="mxch-content-title"><?php esc_html_e('Actions Dashboard', 'mxchat'); ?></h1> | |
| 135 | - <p class="mxch-content-subtitle"><?php esc_html_e('Create and manage custom actions to enhance your chatbot\'s capabilities.', 'mxchat'); ?></p> | |
| 139 | + <h1 class="mxch-content-title"><?php esc_html_e('Actions', 'mxchat'); ?></h1> | |
| 140 | + <p class="mxch-content-subtitle"><?php esc_html_e('Give your chatbot the ability to do things — generate images, search the web, hand off to a human, capture an email, and more. There are two ways to set this up. The cards below explain when to use each.', 'mxchat'); ?></p> | |
| 136 | 141 | </div> |
| 137 | 142 | |
| 138 | - <!-- Quick Actions Card --> | |
| 139 | - <div class="mxch-card"> | |
| 140 | - <div class="mxch-card-header"> | |
| 141 | - <h3 class="mxch-card-title"> | |
| 142 | - <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg> | |
| 143 | - <?php esc_html_e('Quick Actions', 'mxchat'); ?> | |
| 144 | - </h3> | |
| 145 | - </div> | |
| 146 | - <div class="mxch-card-body"> | |
| 147 | - <div class="mxch-quick-actions"> | |
| 148 | - <button type="button" class="mxch-quick-action-btn" id="mxch-add-action-dashboard-btn"> | |
| 149 | - <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="16"/><line x1="8" y1="12" x2="16" y2="12"/></svg> | |
| 150 | - <span><?php esc_html_e('Add New Action', 'mxchat'); ?></span> | |
| 151 | - </button> | |
| 152 | - <button type="button" class="mxch-quick-action-btn" data-action="view-actions"> | |
| 153 | - <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg> | |
| 154 | - <span><?php esc_html_e('View All Actions', 'mxchat'); ?></span> | |
| 155 | - </button> | |
| 156 | - </div> | |
| 157 | - </div> | |
| 158 | - </div> | |
| 159 | - | |
| 160 | - <!-- What are Actions - Info Section --> | |
| 143 | + <!-- Two ways to set up actions — landing explainer --> | |
| 161 | 144 | <div class="mxch-info-section"> |
| 162 | 145 | <div class="mxch-info-section-header"> |
| 163 | 146 | <div class="mxch-info-section-icon"> |
| 164 | 147 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg> |
| 165 | 148 | </div> |
| 166 | - <h3 class="mxch-info-section-title"><?php esc_html_e('What are Actions?', 'mxchat'); ?></h3> | |
| 149 | + <h3 class="mxch-info-section-title"><?php esc_html_e('Two ways to set up actions', 'mxchat'); ?></h3> | |
| 167 | 150 | </div> |
| 168 | 151 | <p class="mxch-info-section-desc"> |
| 169 | - <?php esc_html_e('Actions let your chatbot do more than just chat. When a visitor\'s message is similar in meaning to your trigger phrase, the bot automatically performs the action - like sending emails, redirecting pages, or displaying content.', 'mxchat'); ?> | |
| 152 | + <?php esc_html_e('Both let your chatbot take action during a conversation. Pick whichever fits how you want it to behave — or use both together.', 'mxchat'); ?> | |
| 170 | 153 | </p> |
| 171 | - <div class="mxch-info-features"> | |
| 172 | - <div class="mxch-info-feature"> | |
| 173 | - <div class="mxch-info-feature-icon"> | |
| 174 | - <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg> | |
| 154 | + | |
| 155 | + <div class="mxch-approach-grid"> | |
| 156 | + <!-- AI Tools (recommended) --> | |
| 157 | + <div class="mxch-approach-card mxch-approach-card-primary"> | |
| 158 | + <div class="mxch-approach-card-head"> | |
| 159 | + <div class="mxch-approach-icon"> | |
| 160 | + <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg> | |
| 161 | + </div> | |
| 162 | + <div class="mxch-approach-titles"> | |
| 163 | + <h4 class="mxch-approach-title"><?php esc_html_e('AI Tools', 'mxchat'); ?></h4> | |
| 164 | + <span class="mxch-approach-pill"><?php esc_html_e('Recommended', 'mxchat'); ?></span> | |
| 165 | + </div> | |
| 175 | 166 | </div> |
| 176 | - <div class="mxch-info-feature-content"> | |
| 177 | - <span class="mxch-info-feature-title"><?php esc_html_e('Meaning-Based Matching', 'mxchat'); ?></span> | |
| 178 | - <span class="mxch-info-feature-desc"><?php esc_html_e('Uses AI to understand intent, not just exact words. "I want to buy" matches "purchase" or "order"', 'mxchat'); ?></span> | |
| 179 | - </div> | |
| 167 | + <p class="mxch-approach-desc"><?php esc_html_e('Add the tools your chatbot is allowed to use, and the AI decides when to use each one from the conversation. Easiest to set up — there are no phrases to write. Best for most sites.', 'mxchat'); ?></p> | |
| 168 | + <button type="button" class="mxch-btn mxch-btn-primary mxch-approach-btn" data-approach-target="ai-tools"> | |
| 169 | + <?php esc_html_e('Set up AI Tools', 'mxchat'); ?> | |
| 170 | + <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg> | |
| 171 | + </button> | |
| 180 | 172 | </div> |
| 181 | - <div class="mxch-info-feature"> | |
| 182 | - <div class="mxch-info-feature-icon"> | |
| 183 | - <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20V10"/><path d="M18 20V4"/><path d="M6 20v-4"/></svg> | |
| 173 | + <!-- Trigger Phrases --> | |
| 174 | + <div class="mxch-approach-card"> | |
| 175 | + <div class="mxch-approach-card-head"> | |
| 176 | + <div class="mxch-approach-icon mxch-approach-icon-muted"> | |
| 177 | + <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg> | |
| 178 | + </div> | |
| 179 | + <div class="mxch-approach-titles"> | |
| 180 | + <h4 class="mxch-approach-title"><?php esc_html_e('Trigger Phrases', 'mxchat'); ?></h4> | |
| 181 | + </div> | |
| 184 | 182 | </div> |
| 185 | - <div class="mxch-info-feature-content"> | |
| 186 | - <span class="mxch-info-feature-title"><?php esc_html_e('Similarity Threshold', 'mxchat'); ?></span> | |
| 187 | - <span class="mxch-info-feature-desc"><?php esc_html_e('Set how closely a message must match. Higher = more precise, Lower = more flexible', 'mxchat'); ?></span> | |
| 188 | - </div> | |
| 183 | + <p class="mxch-approach-desc"><?php esc_html_e('You write the exact phrases that should fire a capability, with a match-strength slider. Precise and predictable — best when you want tight control over exactly when something happens.', 'mxchat'); ?></p> | |
| 184 | + <button type="button" class="mxch-btn mxch-btn-secondary mxch-approach-btn" id="mxch-add-action-dashboard-btn"> | |
| 185 | + <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg> | |
| 186 | + <?php esc_html_e('Add Trigger Phrase', 'mxchat'); ?> | |
| 187 | + </button> | |
| 189 | 188 | </div> |
| 190 | - <div class="mxch-info-feature"> | |
| 191 | - <div class="mxch-info-feature-icon"> | |
| 192 | - <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/><polyline points="14 2 14 8 20 8"/><path d="m9 15 2 2 4-4"/></svg> | |
| 193 | - </div> | |
| 194 | - <div class="mxch-info-feature-content"> | |
| 195 | - <span class="mxch-info-feature-title"><?php esc_html_e('Best Practices', 'mxchat'); ?></span> | |
| 196 | - <span class="mxch-info-feature-desc"><?php esc_html_e('Use natural phrases visitors would say. Make triggers distinct from each other to avoid overlap', 'mxchat'); ?></span> | |
| 197 | - </div> | |
| 198 | - </div> | |
| 199 | 189 | </div> |
| 190 | + | |
| 191 | + <div class="mxch-approach-note"> | |
| 192 | + <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg> | |
| 193 | + <span><strong><?php esc_html_e('Can I use both?', 'mxchat'); ?></strong> <?php esc_html_e('Yes. When a visitor\'s message matches one of your trigger phrases, that fires first; AI Tools cover everything else. Many sites run both together.', 'mxchat'); ?></span> | |
| 194 | + </div> | |
| 200 | 195 | </div> |
| 201 | 196 | |
| 202 | 197 | </div> |
| 203 | 198 | |
| @@ -221,14 +216,14 @@ | ||
| 221 | 216 | </div> |
| 222 | 217 | <div class="mxch-panel-header"> |
| 223 | 218 | <div class="mxch-search-wrapper"> |
| 224 | 219 | <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg> |
| 225 | - <input type="text" id="mxch-search-actions" class="mxch-search-input" placeholder="<?php esc_attr_e('Search actions...', 'mxchat'); ?>"> | |
| 220 | + <input type="text" id="mxch-search-actions" class="mxch-search-input" placeholder="<?php esc_attr_e('Search trigger phrases...', 'mxchat'); ?>"> | |
| 226 | 221 | </div> |
| 227 | 222 | <div class="mxch-panel-title-row"> |
| 228 | - <span class="mxch-panel-count" id="mxch-action-count">0 / 0 actions</span> | |
| 223 | + <span class="mxch-panel-count" id="mxch-action-count">0 / 0 trigger phrases</span> | |
| 229 | 224 | <div class="mxch-panel-actions"> |
| 230 | - <button type="button" id="mxch-add-action-btn" class="mxch-btn mxch-btn-primary mxch-btn-sm" title="<?php esc_attr_e('Add New Action', 'mxchat'); ?>"> | |
| 225 | + <button type="button" id="mxch-add-action-btn" class="mxch-btn mxch-btn-primary mxch-btn-sm" title="<?php esc_attr_e('Add Trigger Phrase', 'mxchat'); ?>"> | |
| 231 | 226 | <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg> |
| 232 | 227 | <?php esc_html_e('Add', 'mxchat'); ?> |
| 233 | 228 | </button> |
| 234 | 229 | <button type="button" id="mxch-refresh-actions" class="mxch-icon-btn" title="<?php esc_attr_e('Refresh', 'mxchat'); ?>"> |
| @@ -253,13 +248,13 @@ | ||
| 253 | 248 | <div class="mxch-action-empty" id="mxch-action-empty"> |
| 254 | 249 | <div class="mxch-empty-icon"> |
| 255 | 250 | <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg> |
| 256 | 251 | </div> |
| 257 | - <h3><?php esc_html_e('Select an action', 'mxchat'); ?></h3> | |
| 258 | - <p><?php esc_html_e('Choose an action from the list to view details and edit, or create a new one.', 'mxchat'); ?></p> | |
| 252 | + <h3><?php esc_html_e('Select a trigger phrase', 'mxchat'); ?></h3> | |
| 253 | + <p><?php esc_html_e('Choose a trigger phrase from the list to view details and edit, or create a new one.', 'mxchat'); ?></p> | |
| 259 | 254 | <button type="button" id="mxch-create-first-action-btn" class="mxch-btn mxch-btn-primary"> |
| 260 | 255 | <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg> |
| 261 | - <?php esc_html_e('Create New Action', 'mxchat'); ?> | |
| 256 | + <?php esc_html_e('Create Trigger Phrase', 'mxchat'); ?> | |
| 262 | 257 | </button> |
| 263 | 258 | </div> |
| 264 | 259 | |
| 265 | 260 | <!-- Action Editor (hidden initially) --> |
| @@ -270,9 +265,9 @@ | ||
| 270 | 265 | <button type="button" class="mxch-mobile-back-btn"> |
| 271 | 266 | <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></svg> |
| 272 | 267 | <?php esc_html_e('Back', 'mxchat'); ?> |
| 273 | 268 | </button> |
| 274 | - <h3 class="mxch-editor-title"><?php esc_html_e('Select Action Type', 'mxchat'); ?></h3> | |
| 269 | + <h3 class="mxch-editor-title"><?php esc_html_e('Choose what it does', 'mxchat'); ?></h3> | |
| 275 | 270 | <button type="button" class="mxch-editor-close" id="mxch-close-editor"> |
| 276 | 271 | <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg> |
| 277 | 272 | </button> |
| 278 | 273 | </div> |
| @@ -278,9 +273,9 @@ | ||
| 278 | 273 | </div> |
| 279 | 274 | |
| 280 | 275 | <div class="mxch-type-search"> |
| 281 | 276 | <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg> |
| 282 | - <input type="text" id="mxch-type-search-input" placeholder="<?php esc_attr_e('Search action types...', 'mxchat'); ?>"> | |
| 277 | + <input type="text" id="mxch-type-search-input" placeholder="<?php esc_attr_e('Search types...', 'mxchat'); ?>"> | |
| 283 | 278 | </div> |
| 284 | 279 | |
| 285 | 280 | <div class="mxch-type-categories"> |
| 286 | 281 | <button type="button" class="mxch-category-btn active" data-category="all"><?php esc_html_e('All', 'mxchat'); ?></button> |
| @@ -332,9 +327,9 @@ | ||
| 332 | 327 | <button type="button" class="mxch-back-btn" id="mxch-back-to-step-1"> |
| 333 | 328 | <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></svg> |
| 334 | 329 | <?php esc_html_e('Back', 'mxchat'); ?> |
| 335 | 330 | </button> |
| 336 | - <h3 class="mxch-editor-title" id="mxch-config-title"><?php esc_html_e('Configure Action', 'mxchat'); ?></h3> | |
| 331 | + <h3 class="mxch-editor-title" id="mxch-config-title"><?php esc_html_e('Configure Trigger Phrase', 'mxchat'); ?></h3> | |
| 337 | 332 | <button type="button" class="mxch-editor-close" id="mxch-close-editor-2"> |
| 338 | 333 | <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg> |
| 339 | 334 | </button> |
| 340 | 335 | </div> |
| @@ -343,10 +338,10 @@ | ||
| 343 | 338 | <div class="mxch-selected-type-icon" id="mxch-selected-type-icon"> |
| 344 | 339 | <span class="dashicons dashicons-admin-generic"></span> |
| 345 | 340 | </div> |
| 346 | 341 | <div class="mxch-selected-type-info"> |
| 347 | - <h4 id="mxch-selected-type-label"><?php esc_html_e('Selected Action', 'mxchat'); ?></h4> | |
| 348 | - <p id="mxch-selected-type-desc"><?php esc_html_e('Configure this action for your chatbot', 'mxchat'); ?></p> | |
| 342 | + <h4 id="mxch-selected-type-label"><?php esc_html_e('Selected Type', 'mxchat'); ?></h4> | |
| 343 | + <p id="mxch-selected-type-desc"><?php esc_html_e('Configure this trigger phrase for your chatbot', 'mxchat'); ?></p> | |
| 349 | 344 | </div> |
| 350 | 345 | </div> |
| 351 | 346 | |
| 352 | 347 | <form id="mxch-action-form" method="post"> |
| @@ -355,11 +350,11 @@ | ||
| 355 | 350 | <input type="hidden" name="callback_function" id="mxch-callback-function" value=""> |
| 356 | 351 | <input type="hidden" name="form_mode" id="mxch-form-mode" value="add"> |
| 357 | 352 | |
| 358 | 353 | <div class="mxch-form-group"> |
| 359 | - <label for="mxch-action-label"><?php esc_html_e('Action Label', 'mxchat'); ?></label> | |
| 354 | + <label for="mxch-action-label"><?php esc_html_e('Label', 'mxchat'); ?></label> | |
| 360 | 355 | <input type="text" id="mxch-action-label" name="intent_label" required placeholder="<?php esc_attr_e('e.g., Newsletter Signup', 'mxchat'); ?>"> |
| 361 | - <p class="mxch-form-hint"><?php esc_html_e('A descriptive name for this action (for your reference only).', 'mxchat'); ?></p> | |
| 356 | + <p class="mxch-form-hint"><?php esc_html_e('A descriptive name for this trigger phrase (for your reference only).', 'mxchat'); ?></p> | |
| 362 | 357 | </div> |
| 363 | 358 | |
| 364 | 359 | <div class="mxch-form-group"> |
| 365 | 360 | <label><?php esc_html_e('Trigger Phrases', 'mxchat'); ?></label> |
| @@ -411,9 +406,9 @@ | ||
| 411 | 406 | <button type="button" class="mxch-btn mxch-btn-secondary" id="mxch-cancel-action"> |
| 412 | 407 | <?php esc_html_e('Cancel', 'mxchat'); ?> |
| 413 | 408 | </button> |
| 414 | 409 | <button type="submit" class="mxch-btn mxch-btn-primary" id="mxch-save-action"> |
| 415 | - <?php esc_html_e('Save Action', 'mxchat'); ?> | |
| 410 | + <?php esc_html_e('Save Trigger Phrase', 'mxchat'); ?> | |
| 416 | 411 | </button> |
| 417 | 412 | </div> |
| 418 | 413 | </form> |
| 419 | 414 | </div> |
| @@ -424,9 +419,9 @@ | ||
| 424 | 419 | <button type="button" class="mxch-mobile-back-btn"> |
| 425 | 420 | <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></svg> |
| 426 | 421 | <?php esc_html_e('Back', 'mxchat'); ?> |
| 427 | 422 | </button> |
| 428 | - <h3 class="mxch-editor-title" id="mxch-view-title"><?php esc_html_e('Action Details', 'mxchat'); ?></h3> | |
| 423 | + <h3 class="mxch-editor-title" id="mxch-view-title"><?php esc_html_e('Trigger Phrase Details', 'mxchat'); ?></h3> | |
| 429 | 424 | <div class="mxch-header-actions"> |
| 430 | 425 | <label class="mxch-toggle-switch" title="<?php esc_attr_e('Toggle Enabled', 'mxchat'); ?>"> |
| 431 | 426 | <input type="checkbox" id="mxch-action-enabled-toggle" checked> |
| 432 | 427 | <span class="mxch-toggle-slider"></span> |
| @@ -445,10 +440,10 @@ | ||
| 445 | 440 | <div class="mxch-detail-icon" id="mxch-view-icon"> |
| 446 | 441 | <span class="dashicons dashicons-admin-generic"></span> |
| 447 | 442 | </div> |
| 448 | 443 | <div class="mxch-detail-content"> |
| 449 | - <h4 id="mxch-view-label"><?php esc_html_e('Action Label', 'mxchat'); ?></h4> | |
| 450 | - <p class="mxch-detail-type" id="mxch-view-type"><?php esc_html_e('Action Type', 'mxchat'); ?></p> | |
| 444 | + <h4 id="mxch-view-label"><?php esc_html_e('Label', 'mxchat'); ?></h4> | |
| 445 | + <p class="mxch-detail-type" id="mxch-view-type"><?php esc_html_e('Type', 'mxchat'); ?></p> | |
| 451 | 446 | </div> |
| 452 | 447 | </div> |
| 453 | 448 | |
| 454 | 449 | <div class="mxch-detail-section"> |
| @@ -483,8 +478,209 @@ | ||
| 483 | 478 | </div> |
| 484 | 479 | </div> |
| 485 | 480 | </div> |
| 486 | 481 | </div> |
| 482 | + | |
| 483 | + <!-- AI Tools Section (native function calling) --> | |
| 484 | + <!-- No content-header band here — the section starts directly at the | |
| 485 | + list+detail split panel, exactly like the Trigger Phrases section | |
| 486 | + (#all-actions) above, for pixel parity (plan 5f7409). The per- | |
| 487 | + approach explainer already lives on the Dashboard landing. --> | |
| 488 | + <div id="ai-tools" class="mxch-section <?php echo (isset($active_tab) && $active_tab === 'ai-tools') ? 'active' : ''; ?>"> | |
| 489 | + <div id="mxch-fc-settings" data-fc-nonce="<?php echo esc_attr(wp_create_nonce('mxchat_fc_autosave')); ?>"> | |
| 490 | + | |
| 491 | + <!-- Model-not-capable notice (relocated from the removed master toggle). | |
| 492 | + Tools can still be added; they just won't fire until a tool-capable | |
| 493 | + model is selected — so a user on a non-tool model isn't met with silence. --> | |
| 494 | + <?php if (empty($fc_model_capable)): ?> | |
| 495 | + <div class="mxch-notice mxch-notice-warning" style="margin-bottom: 20px;"> | |
| 496 | + <svg class="mxch-notice-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg> | |
| 497 | + <div><?php printf(esc_html__('Your current chat model (%s) does not support tools. You can still add tools here, but they will not fire until you choose a tool-capable model in Settings.', 'mxchat'), '<strong>' . esc_html($fc_current_model) . '</strong>'); ?></div> | |
| 498 | + </div> | |
| 499 | + <?php endif; ?> | |
| 500 | + | |
| 501 | + <!-- Brave-key-not-set notice (plan 183856). Web Search + Image Search | |
| 502 | + run on the Brave Search API; if either is enabled as a tool with no | |
| 503 | + brave_api_key configured, they silently won't fire — so the admin | |
| 504 | + gets a clear setup cue instead. Mirrors the model-not-capable notice. --> | |
| 505 | + <?php if (!empty($fc_brave_missing)): ?> | |
| 506 | + <div class="mxch-notice mxch-notice-warning" style="margin-bottom: 20px;"> | |
| 507 | + <svg class="mxch-notice-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg> | |
| 508 | + <div><?php printf(esc_html__('Web Search and Image Search are powered by Brave Search and need a Brave Search API key to work. Add your key under %s to enable them.', 'mxchat'), '<strong>' . esc_html__('Settings → Brave Search', 'mxchat') . '</strong>'); ?></div> | |
| 509 | + </div> | |
| 510 | + <?php endif; ?> | |
| 511 | + | |
| 512 | + <?php if (empty($fc_tools)): ?> | |
| 513 | + <div class="mxch-card"> | |
| 514 | + <div class="mxch-card-body"> | |
| 515 | + <p class="mxch-fc-intro"><?php esc_html_e('No tools available yet. Core search and image tools appear here, and activating add-ons like WooCommerce adds more.', 'mxchat'); ?></p> | |
| 516 | + </div> | |
| 517 | + </div> | |
| 518 | + <?php else: ?> | |
| 519 | + <?php | |
| 520 | + // Hidden store — the SINGLE source of truth for autosave. Each | |
| 521 | + // .mxch-fc-tool keeps its hidden marker + checkbox + usage-hint | |
| 522 | + // textarea exactly as the per-tool checklist did, so fcCollectAndSave() | |
| 523 | + // and the mxchat_fc_autosave endpoint are UNCHANGED (HARD: no data-model | |
| 524 | + // change). The master-detail list + detail panel below only toggle these | |
| 525 | + // inputs. A tool whose checkbox is checked = active (plan d450a7) — there | |
| 526 | + // is no global toggle and no per-tool enable checkbox in the UI anymore. | |
| 527 | + $fc_hint_max = (int) (class_exists('MxChat_Tool_Registry') ? MxChat_Tool_Registry::HINT_MAX : 500); | |
| 528 | + ?> | |
| 529 | + <div id="mxch-fc-tool-store" class="mxch-fc-tool-store" hidden aria-hidden="true"> | |
| 530 | + <?php foreach ($fc_tools as $fc_tool): | |
| 531 | + $fc_cb = $fc_tool['callback']; | |
| 532 | + $fc_on = !empty($fc_tool['enabled']); | |
| 533 | + $fc_icon = isset($fc_tool['icon']) ? $fc_tool['icon'] : 'admin-generic'; | |
| 534 | + ?> | |
| 535 | + <div class="mxch-fc-tool" | |
| 536 | + data-fc-callback="<?php echo esc_attr($fc_cb); ?>" | |
| 537 | + data-fc-label="<?php echo esc_attr($fc_tool['label']); ?>" | |
| 538 | + data-fc-desc="<?php echo esc_attr($fc_tool['description']); ?>" | |
| 539 | + data-fc-setup="<?php echo esc_attr(isset($fc_tool['setup_note']) ? $fc_tool['setup_note'] : ''); ?>" | |
| 540 | + data-fc-icon="<?php echo esc_attr($fc_icon); ?>" | |
| 541 | + data-fc-addon="<?php echo !empty($fc_tool['is_addon']) ? '1' : '0'; ?>" | |
| 542 | + data-fc-cautious="<?php echo !empty($fc_tool['cautious']) ? '1' : '0'; ?>"> | |
| 543 | + <input type="hidden" name="mxchat_fc_all_tools[]" value="<?php echo esc_attr($fc_cb); ?>"> | |
| 544 | + <input type="checkbox" name="mxchat_fc_tools[]" value="<?php echo esc_attr($fc_cb); ?>" <?php checked($fc_on); ?>> | |
| 545 | + <textarea class="mxch-fc-hint-input" data-fc-callback="<?php echo esc_attr($fc_cb); ?>" maxlength="<?php echo $fc_hint_max; ?>"><?php echo esc_textarea(isset($fc_tool['usage_hint']) ? $fc_tool['usage_hint'] : ''); ?></textarea> | |
| 546 | + </div> | |
| 547 | + <?php endforeach; ?> | |
| 548 | + </div> | |
| 549 | + | |
| 550 | + <!-- Master-detail split panel — clones the Trigger Phrases list+detail | |
| 551 | + component (same mxch-* classes/CSS) so AI Tools reads as the same surface. | |
| 552 | + FC-specific IDs keep the Trigger Phrases JS off these elements. --> | |
| 553 | + <div class="mxch-split-panel" | |
| 554 | + id="mxch-fc-panel" | |
| 555 | + data-i18n-tools="<?php esc_attr_e('tools', 'mxchat'); ?>" | |
| 556 | + data-i18n-tool="<?php esc_attr_e('tool', 'mxchat'); ?>" | |
| 557 | + data-i18n-active="<?php esc_attr_e('Active', 'mxchat'); ?>" | |
| 558 | + data-i18n-addon="<?php esc_attr_e('Add-on', 'mxchat'); ?>" | |
| 559 | + data-i18n-sensitive="<?php esc_attr_e('Sensitive', 'mxchat'); ?>" | |
| 560 | + data-i18n-nohint="<?php esc_attr_e('No usage note — the AI decides on its own when to use this.', 'mxchat'); ?>"> | |
| 561 | + | |
| 562 | + <!-- Left: tool list --> | |
| 563 | + <div class="mxch-action-list-panel"> | |
| 564 | + <!-- Bulk Actions Toolbar — exact clone of the Trigger Phrases | |
| 565 | + #all-actions toolbar (All select-all + bulk-remove trash), | |
| 566 | + FC-specific IDs so the Trigger Phrases JS stays off it (plan 5f7409). --> | |
| 567 | + <div class="mxch-bulk-toolbar"> | |
| 568 | + <label class="mxch-bulk-select-all"> | |
| 569 | + <input type="checkbox" id="mxch-fc-select-all"> | |
| 570 | + <span><?php esc_html_e('All', 'mxchat'); ?></span> | |
| 571 | + </label> | |
| 572 | + <span class="mxch-selected-count" id="mxch-fc-selected-count">0</span> | |
| 573 | + <div class="mxch-bulk-actions"> | |
| 574 | + <button type="button" class="mxch-bulk-btn mxch-bulk-delete" id="mxch-fc-delete-selected" disabled title="<?php esc_attr_e('Remove Selected', 'mxchat'); ?>"> | |
| 575 | + <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg> | |
| 576 | + </button> | |
| 577 | + </div> | |
| 578 | + </div> | |
| 579 | + <div class="mxch-panel-header"> | |
| 580 | + <div class="mxch-search-wrapper"> | |
| 581 | + <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg> | |
| 582 | + <input type="text" id="mxch-fc-search" class="mxch-search-input" placeholder="<?php esc_attr_e('Search tools...', 'mxchat'); ?>"> | |
| 583 | + </div> | |
| 584 | + <div class="mxch-panel-title-row"> | |
| 585 | + <span class="mxch-panel-count" id="mxch-fc-count">0 <?php esc_html_e('tools', 'mxchat'); ?></span> | |
| 586 | + <div class="mxch-panel-actions"> | |
| 587 | + <button type="button" id="mxch-fc-add-btn" class="mxch-btn mxch-btn-primary mxch-btn-sm js-mxch-fc-add" title="<?php esc_attr_e('Add Tool', 'mxchat'); ?>"> | |
| 588 | + <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg> | |
| 589 | + <?php esc_html_e('Add', 'mxchat'); ?> | |
| 590 | + </button> | |
| 591 | + <button type="button" id="mxch-fc-refresh" class="mxch-icon-btn" title="<?php esc_attr_e('Refresh', 'mxchat'); ?>"> | |
| 592 | + <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/><path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16"/><path d="M16 16h5v5"/></svg> | |
| 593 | + </button> | |
| 594 | + </div> | |
| 595 | + </div> | |
| 596 | + </div> | |
| 597 | + <div class="mxch-action-list" id="mxch-fc-list"> | |
| 598 | + <!-- Tool rows built by JS from the hidden store (enabled tools only) --> | |
| 599 | + </div> | |
| 600 | + <div class="mxch-panel-footer"> | |
| 601 | + <span id="mxch-fc-save-status" class="mxch-fc-save-status" role="status" aria-live="polite"></span> | |
| 602 | + </div> | |
| 603 | + </div> | |
| 604 | + | |
| 605 | + <!-- Right: detail / view panel --> | |
| 606 | + <div class="mxch-action-detail-panel" id="mxch-fc-detail-panel"> | |
| 607 | + <!-- Empty state --> | |
| 608 | + <div class="mxch-action-empty" id="mxch-fc-empty"> | |
| 609 | + <div class="mxch-empty-icon"> | |
| 610 | + <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg> | |
| 611 | + </div> | |
| 612 | + <h3><?php esc_html_e('Select a tool', 'mxchat'); ?></h3> | |
| 613 | + <p><?php esc_html_e('Choose a tool from the list to view details and edit when the AI should use it, or add a new one.', 'mxchat'); ?></p> | |
| 614 | + <button type="button" class="mxch-btn mxch-btn-primary js-mxch-fc-add"> | |
| 615 | + <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg> | |
| 616 | + <?php esc_html_e('Add Tool', 'mxchat'); ?> | |
| 617 | + </button> | |
| 618 | + </div> | |
| 619 | + | |
| 620 | + <!-- Tool view (shown when a tool is selected) --> | |
| 621 | + <div class="mxch-action-editor" id="mxch-fc-view" style="display: none;"> | |
| 622 | + <div class="mxch-editor-header"> | |
| 623 | + <button type="button" class="mxch-mobile-back-btn"> | |
| 624 | + <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></svg> | |
| 625 | + <?php esc_html_e('Back', 'mxchat'); ?> | |
| 626 | + </button> | |
| 627 | + <h3 class="mxch-editor-title"><?php esc_html_e('Tool Details', 'mxchat'); ?></h3> | |
| 628 | + <div class="mxch-header-actions"> | |
| 629 | + <button type="button" class="mxch-icon-btn" id="mxch-fc-edit-btn" title="<?php esc_attr_e('Edit usage note', 'mxchat'); ?>"> | |
| 630 | + <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg> | |
| 631 | + </button> | |
| 632 | + <button type="button" class="mxch-icon-btn mxch-btn-danger-icon" id="mxch-fc-remove-btn" title="<?php esc_attr_e('Remove tool', 'mxchat'); ?>"> | |
| 633 | + <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg> | |
| 634 | + </button> | |
| 635 | + </div> | |
| 636 | + </div> | |
| 637 | + | |
| 638 | + <div class="mxch-action-details"> | |
| 639 | + <div class="mxch-detail-card"> | |
| 640 | + <div class="mxch-detail-icon" id="mxch-fc-view-icon"> | |
| 641 | + <span class="dashicons dashicons-admin-generic"></span> | |
| 642 | + </div> | |
| 643 | + <div class="mxch-detail-content"> | |
| 644 | + <h4 id="mxch-fc-view-label"><?php esc_html_e('Tool', 'mxchat'); ?></h4> | |
| 645 | + <p class="mxch-detail-type" id="mxch-fc-view-type"></p> | |
| 646 | + </div> | |
| 647 | + </div> | |
| 648 | + | |
| 649 | + <div class="mxch-detail-section"> | |
| 650 | + <h5><?php esc_html_e('What it does', 'mxchat'); ?></h5> | |
| 651 | + <p class="mxch-fc-view-desc" id="mxch-fc-view-desc"></p> | |
| 652 | + </div> | |
| 653 | + | |
| 654 | + <div class="mxch-detail-section"> | |
| 655 | + <h5><?php esc_html_e('When the assistant uses this', 'mxchat'); ?></h5> | |
| 656 | + <p class="mxch-fc-view-hint" id="mxch-fc-view-hint"></p> | |
| 657 | + </div> | |
| 658 | + | |
| 659 | + <!-- Setup requirement (plan 183856) — only shown for tools that | |
| 660 | + declare a setup_note (e.g. Web/Image Search → Brave key). JS | |
| 661 | + toggles this section based on the tool's data-fc-setup. --> | |
| 662 | + <div class="mxch-detail-section" id="mxch-fc-view-setup-wrap" style="display:none;"> | |
| 663 | + <h5><?php esc_html_e('Setup', 'mxchat'); ?></h5> | |
| 664 | + <p class="mxch-fc-view-setup" id="mxch-fc-view-setup"></p> | |
| 665 | + </div> | |
| 666 | + | |
| 667 | + <div class="mxch-detail-section"> | |
| 668 | + <h5><?php esc_html_e('Status', 'mxchat'); ?></h5> | |
| 669 | + <div class="mxch-settings-grid"> | |
| 670 | + <div class="mxch-setting-item"> | |
| 671 | + <span class="mxch-setting-label"><?php esc_html_e('State', 'mxchat'); ?></span> | |
| 672 | + <span class="mxch-setting-value mxch-status-badge"><?php esc_html_e('Active', 'mxchat'); ?></span> | |
| 673 | + </div> | |
| 674 | + </div> | |
| 675 | + </div> | |
| 676 | + </div> | |
| 677 | + </div> | |
| 678 | + </div> | |
| 679 | + </div> | |
| 680 | + <?php endif; ?> | |
| 681 | + </div> | |
| 682 | + </div> | |
| 487 | 683 | </main> |
| 488 | 684 | </div> |
| 489 | 685 | |
| 490 | 686 | <!-- Loading Overlay --> |
| @@ -489,9 +685,9 @@ | ||
| 489 | 685 | |
| 490 | 686 | <!-- Loading Overlay --> |
| 491 | 687 | <div id="mxch-action-loading" class="mxch-loading-overlay" style="display: none;"> |
| 492 | 688 | <div class="mxch-loading-spinner"></div> |
| 493 | - <div class="mxch-loading-text"><?php esc_html_e('Saving action, please wait...', 'mxchat'); ?></div> | |
| 689 | + <div class="mxch-loading-text"><?php esc_html_e('Saving, please wait...', 'mxchat'); ?></div> | |
| 494 | 690 | </div> |
| 495 | 691 | |
| 496 | 692 | <!-- Delete Confirmation Modal --> |
| 497 | 693 | <div id="mxch-delete-modal" class="mxch-modal-overlay" style="display: none;"> |
| @@ -496,17 +692,70 @@ | ||
| 496 | 692 | <!-- Delete Confirmation Modal --> |
| 497 | 693 | <div id="mxch-delete-modal" class="mxch-modal-overlay" style="display: none;"> |
| 498 | 694 | <div class="mxch-modal-content mxch-modal-sm"> |
| 499 | 695 | <div class="mxch-modal-header"> |
| 500 | - <h2><?php esc_html_e('Delete Action', 'mxchat'); ?></h2> | |
| 696 | + <h2><?php esc_html_e('Delete Trigger Phrase', 'mxchat'); ?></h2> | |
| 501 | 697 | <button type="button" class="mxch-modal-close">×</button> |
| 502 | 698 | </div> |
| 503 | 699 | <div class="mxch-modal-body"> |
| 504 | - <p><?php esc_html_e('Are you sure you want to delete this action? This cannot be undone.', 'mxchat'); ?></p> | |
| 700 | + <p><?php esc_html_e('Are you sure you want to delete this trigger phrase? This cannot be undone.', 'mxchat'); ?></p> | |
| 505 | 701 | </div> |
| 506 | 702 | <div class="mxch-modal-footer"> |
| 507 | 703 | <button type="button" class="mxch-btn mxch-btn-secondary" id="mxch-cancel-delete"><?php esc_html_e('Cancel', 'mxchat'); ?></button> |
| 508 | 704 | <button type="button" class="mxch-btn mxch-btn-danger" id="mxch-confirm-delete"><?php esc_html_e('Delete', 'mxchat'); ?></button> |
| 705 | + </div> | |
| 706 | + </div> | |
| 707 | + </div> | |
| 708 | + | |
| 709 | + <!-- Add-Tool modal (AI Tools card flow, plan 8bbf98 part 4) --> | |
| 710 | + <div id="mxch-fc-tool-modal" class="mxch-modal-overlay" style="display: none;"> | |
| 711 | + <div class="mxch-modal-content mxch-modal-lg"> | |
| 712 | + <!-- Step 1: pick a capability --> | |
| 713 | + <div class="mxch-fc-modal-step" data-step="1"> | |
| 714 | + <div class="mxch-modal-header"> | |
| 715 | + <h2><?php esc_html_e('Add a Tool', 'mxchat'); ?></h2> | |
| 716 | + <button type="button" class="mxch-modal-close" data-fc-modal-close>×</button> | |
| 717 | + </div> | |
| 718 | + <div class="mxch-modal-body"> | |
| 719 | + <p class="mxch-fc-intro"><?php esc_html_e('Pick a capability the AI can call from the conversation.', 'mxchat'); ?></p> | |
| 720 | + <div class="mxch-types-grid mxch-fc-modal-grid" id="mxch-fc-modal-grid"></div> | |
| 721 | + <p class="mxch-fc-modal-allset" id="mxch-fc-modal-allset" style="display:none;"><?php esc_html_e('Every available tool is already added. Activate add-ons like WooCommerce to unlock more.', 'mxchat'); ?></p> | |
| 722 | + </div> | |
| 723 | + </div> | |
| 724 | + <!-- Step 2: confirm + when-to-use --> | |
| 725 | + <div class="mxch-fc-modal-step" data-step="2" style="display:none;"> | |
| 726 | + <div class="mxch-modal-header"> | |
| 727 | + <button type="button" class="mxch-back-btn" id="mxch-fc-modal-back"> | |
| 728 | + <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></svg> | |
| 729 | + <?php esc_html_e('Back', 'mxchat'); ?> | |
| 730 | + </button> | |
| 731 | + <h2 id="mxch-fc-modal-step2-title" data-add-title="<?php esc_attr_e('Add Tool', 'mxchat'); ?>" data-edit-title="<?php esc_attr_e('Edit Tool', 'mxchat'); ?>"><?php esc_html_e('Add Tool', 'mxchat'); ?></h2> | |
| 732 | + <button type="button" class="mxch-modal-close" data-fc-modal-close>×</button> | |
| 733 | + </div> | |
| 734 | + <div class="mxch-modal-body"> | |
| 735 | + <div class="mxch-selected-type"> | |
| 736 | + <div class="mxch-selected-type-icon" id="mxch-fc-modal-selected-icon"> | |
| 737 | + <span class="dashicons dashicons-admin-generic"></span> | |
| 738 | + </div> | |
| 739 | + <div class="mxch-selected-type-info"> | |
| 740 | + <h4 id="mxch-fc-modal-selected-label"><?php esc_html_e('Selected tool', 'mxchat'); ?></h4> | |
| 741 | + <p id="mxch-fc-modal-selected-desc"></p> | |
| 742 | + </div> | |
| 743 | + </div> | |
| 744 | + <div class="mxch-form-group"> | |
| 745 | + <label for="mxch-fc-modal-hint"><?php esc_html_e('When should the assistant use this?', 'mxchat'); ?></label> | |
| 746 | + <textarea id="mxch-fc-modal-hint" class="mxch-fc-modal-hint-input" rows="3" maxlength="<?php echo (int) (class_exists('MxChat_Tool_Registry') ? MxChat_Tool_Registry::HINT_MAX : 500); ?>" placeholder="<?php esc_attr_e('Optional — e.g. “Use only when the visitor asks about pricing or discounts.”', 'mxchat'); ?>"></textarea> | |
| 747 | + <p class="mxch-form-hint"><?php esc_html_e('Leave blank to let the AI decide on its own. Your note is added to what the model knows about this tool.', 'mxchat'); ?></p> | |
| 748 | + </div> | |
| 749 | + <div class="mxch-fc-modal-sensitive-note" id="mxch-fc-modal-sensitive" style="display:none;"> | |
| 750 | + <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg> | |
| 751 | + <span><?php esc_html_e('Sensitive tool — it can spend money, expose customer data, or hand off to a human. Only add it if you want the AI to do that.', 'mxchat'); ?></span> | |
| 752 | + </div> | |
| 753 | + </div> | |
| 754 | + <div class="mxch-modal-footer"> | |
| 755 | + <button type="button" class="mxch-btn mxch-btn-secondary" data-fc-modal-close><?php esc_html_e('Cancel', 'mxchat'); ?></button> | |
| 756 | + <button type="button" class="mxch-btn mxch-btn-primary" id="mxch-fc-modal-save" data-add-label="<?php esc_attr_e('Add Tool', 'mxchat'); ?>" data-save-label="<?php esc_attr_e('Save Changes', 'mxchat'); ?>"><?php esc_html_e('Add Tool', 'mxchat'); ?></button> | |
| 757 | + </div> | |
| 509 | 758 | </div> |
| 510 | 759 | </div> |
| 511 | 760 | </div> |
| 512 | 761 | |
