| 1 |
import React from "react"; |
| 2 |
import { __ } from "@wordpress/i18n"; |
| 3 |
import { useBuilderContext } from "quickbuilder"; |
| 4 |
import { platformChanged, embedModelChangedOnly } from "./reembedChange"; |
| 5 |
|
| 6 |
/** |
| 7 |
* Compact inline warning rendered directly under the field it relates to (like |
| 8 |
* the AI Content Suite max-token notice), shown the moment the admin changes the |
| 9 |
* AI platform or embedding model — before they save — so the cost/time of the |
| 10 |
* full re-embed is visible up front (the confirm dialog at Save is the second |
| 11 |
* gate). Renders nothing otherwise. |
| 12 |
* |
| 13 |
* Two instances are wired in PHP, one per field, distinguished by `trigger`: |
| 14 |
* - 'platform' → shows under the AI Platform field when the platform changed. |
| 15 |
* - 'embed' → shows under the Embed Model field when ONLY the embedding |
| 16 |
* model changed (a platform change is covered by the platform |
| 17 |
* notice, so the embed notice is suppressed then). |
| 18 |
* |
| 19 |
* PHP field config: |
| 20 |
* 'type' => 'reembed_notice', |
| 21 |
* 'reembed_notice' => array( |
| 22 |
* 'trigger' => 'platform' | 'embed', |
| 23 |
* 'platform_field' => 'ai_chatbot_chat_provider', |
| 24 |
* 'model_field_map' => array( 'openai' => 'ai_chatbot_embed_model', 'gemini' => 'ai_chatbot_embed_model_gemini' ), |
| 25 |
* 'title' => '...', // optional |
| 26 |
* 'message' => '...', |
| 27 |
* ), |
| 28 |
*/ |
| 29 |
const ReembedNotice = ( props ) => { |
| 30 |
const context = useBuilderContext(); |
| 31 |
const cfg = props.reembed_notice; |
| 32 |
|
| 33 |
const shouldShow = |
| 34 |
cfg && |
| 35 |
( cfg.trigger === "platform" |
| 36 |
? platformChanged( cfg, context.values ) |
| 37 |
: embedModelChangedOnly( cfg, context.values ) ); |
| 38 |
|
| 39 |
if ( ! shouldShow ) { |
| 40 |
return null; |
| 41 |
} |
| 42 |
|
| 43 |
// A short bold headline over the detail line reads far better than one dense |
| 44 |
// sentence. Callers may set their own `title`; otherwise pick a sensible |
| 45 |
// default from the trigger so the notice is self-sufficient. |
| 46 |
const title = |
| 47 |
cfg.title || |
| 48 |
( cfg.trigger === "platform" |
| 49 |
? __( "Switching the AI platform re-embeds everything", "betterdocs" ) |
| 50 |
: __( "Changing the embedding model re-embeds everything", "betterdocs" ) ); |
| 51 |
|
| 52 |
// Outer row carries the full-width divider BELOW the notice; the preceding |
| 53 |
// field drops its own border (see settings.scss) so the field + this notice |
| 54 |
// read as one cell instead of the notice looking like the next setting. |
| 55 |
return ( |
| 56 |
<div className="betterdocs-reembed-notice-row"> |
| 57 |
<div className="betterdocs-reembed-notice" role="alert"> |
| 58 |
<span className="betterdocs-reembed-notice__icon" aria-hidden="true"> |
| 59 |
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> |
| 60 |
<path |
| 61 |
d="M12 9.25v3.5M12 16.25h.01M10.3 4.4 2.4 18.05A1.85 1.85 0 0 0 4 20.85h16a1.85 1.85 0 0 0 1.6-2.8L13.7 4.4a1.85 1.85 0 0 0-3.4 0Z" |
| 62 |
stroke="currentColor" |
| 63 |
strokeWidth="1.9" |
| 64 |
strokeLinecap="round" |
| 65 |
strokeLinejoin="round" |
| 66 |
/> |
| 67 |
</svg> |
| 68 |
</span> |
| 69 |
<div className="betterdocs-reembed-notice__body"> |
| 70 |
<strong className="betterdocs-reembed-notice__title"> |
| 71 |
{ title } |
| 72 |
</strong> |
| 73 |
<span className="betterdocs-reembed-notice__text"> |
| 74 |
{ cfg.message || |
| 75 |
__( |
| 76 |
"Changing the AI platform or embedding model re-embeds all of your content when you save. This takes time and uses API credits.", |
| 77 |
"betterdocs" |
| 78 |
) } |
| 79 |
</span> |
| 80 |
</div> |
| 81 |
</div> |
| 82 |
</div> |
| 83 |
); |
| 84 |
}; |
| 85 |
|
| 86 |
export default ReembedNotice; |
| 87 |
|
