| 1 |
/** |
| 2 |
* WordPress dependencies |
| 3 |
*/ |
| 4 |
import { __ } from '@wordpress/i18n'; |
| 5 |
import { InspectorControls } from '@wordpress/block-editor'; |
| 6 |
import { |
| 7 |
PanelBody, |
| 8 |
TextControl, |
| 9 |
BaseControl, |
| 10 |
TabPanel, |
| 11 |
SelectControl, |
| 12 |
Notice, |
| 13 |
ToggleControl, |
| 14 |
RangeControl |
| 15 |
} from '@wordpress/components'; |
| 16 |
import { useEffect } from '@wordpress/element'; |
| 17 |
import { select } from '@wordpress/data'; |
| 18 |
|
| 19 |
/** |
| 20 |
* Internal depencencies |
| 21 |
*/ |
| 22 |
import objAttributes from "./attributes"; |
| 23 |
|
| 24 |
import { |
| 25 |
BOX_BACKGROUND, |
| 26 |
BOX_PADDING, |
| 27 |
FIELD_PADDING, |
| 28 |
FIELD_BORDER, |
| 29 |
RESULT_BOX_WIDTH, |
| 30 |
RESULT_BOX_MAXWIDTH, |
| 31 |
RESULT_BOX_BACKGROUND, |
| 32 |
RESULT_BOX_BORDER, |
| 33 |
HTML_TAGS, |
| 34 |
ITEM_PADDING, |
| 35 |
ITEM_BORDER, |
| 36 |
ICON_SIZE, |
| 37 |
WRAPPER_MARGIN, |
| 38 |
SEARCH_LAYOUT_VALUES, |
| 39 |
SEARCH_MODAL_LAYOUT_VALUES, |
| 40 |
BOX_BACKGROUND_LAYOUT_2, |
| 41 |
BOX_PADDING_LAYOUT_2, |
| 42 |
FIELD_PADDING_LAYOUT_2, |
| 43 |
FIELD_BORDER_LAYOUT_2, |
| 44 |
ICON_SIZE_LAYOUT_2, |
| 45 |
SEARCH_MODAL_FIELD_BACKGROUND, |
| 46 |
SEARCH_MODAL_CONTENT_TABS_ICON_SIZE, |
| 47 |
SEARCH_MODAL_CONTENT_TABS_BORDER, |
| 48 |
SEARCH_MODAL_CONTENT_TABS_LIST_ICON_SIZE, |
| 49 |
SEARCH_MODAL_CONTENT_TABS_LIST_BORDER, |
| 50 |
SEARCH_MODAL_CONTENT_TABS_LIST_CATEGORY_ICON_SIZE, |
| 51 |
SEARCH_BUTTON_BACKGROUND_LAYOUT_2, |
| 52 |
WRAPPER_MARGIN_LAYOUT_2, |
| 53 |
AI_SUGGESTION_MARGIN, |
| 54 |
AI_SUGGESTION_PADDING, |
| 55 |
AI_SUGGESTION_BUTTON_MARGIN, |
| 56 |
AI_SUGGESTION_BUTTON_PADDING |
| 57 |
} from "./constants"; |
| 58 |
import { |
| 59 |
typoPrefix_fieldtext, |
| 60 |
typoPrefix_fieldtext_layout_2, |
| 61 |
typoPrefix_resulttext, |
| 62 |
SEARCH_MODAL_CONTENT_TABS_LIST_CATEGORY_TYPO, |
| 63 |
SEARCH_MODAL_FIELD_TYPO, |
| 64 |
SEARCH_MODAL_CATEGORY_FIELD_TYPO, |
| 65 |
SEARCH_MODAL_CONTENT_TABS_TYPO, |
| 66 |
SEARCH_MODAL_CONTENT_TABS_LIST_TYPO, |
| 67 |
SEARCH_BUTTON_LAYOUT_2_TYPO, |
| 68 |
AI_SUGGESTION_TITLE_TYPO, |
| 69 |
AI_SUGGESTION_QUERY_TYPO, |
| 70 |
AI_SUGGESTION_RESPONSE_TYPO, |
| 71 |
AI_SUGGESTION_BUTTON_TYPO, |
| 72 |
} from "./typographyPrefixConstants"; |
| 73 |
// util |
| 74 |
import ResponsiveRangeController from "../../../util/responsive-range-control"; |
| 75 |
import ResponsiveDimensionsControl from "../../../util/dimensions-control-v2"; |
| 76 |
import TypographyDropdown from "../../../util/typography-control-v2"; |
| 77 |
import BackgroundControl from "../../../util/background-control"; |
| 78 |
import BorderShadowControl from "../../../util/border-shadow-control"; |
| 79 |
import ColorControl from "../../../util/color-control"; |
| 80 |
import { applyFilters, doAction } from '@wordpress/hooks'; |
| 81 |
|
| 82 |
const Inspector = ({ attributes = {}, setAttributes = () => {} }) => { |
| 83 |
const { |
| 84 |
resOption, |
| 85 |
placeholderText, |
| 86 |
fieldBackgroundColor, |
| 87 |
fieldBackgroundColorLayout2, |
| 88 |
fieldTextColor, |
| 89 |
fieldTextColorLayout2, |
| 90 |
searchIconColor, |
| 91 |
searchIconColorLayout2, |
| 92 |
closeIconColor, |
| 93 |
closeBorderColor, |
| 94 |
itemColor, |
| 95 |
itemHoverColor, |
| 96 |
searchLayout, |
| 97 |
searchModalLayout, |
| 98 |
searchModalWidth, |
| 99 |
searchModalWidthUnit, |
| 100 |
searchModalPosition, |
| 101 |
searchModalMagnifierColor, |
| 102 |
searchModalFieldColor, |
| 103 |
searchModalFieldPlaceholderColor, |
| 104 |
searchModalCategoryColor, |
| 105 |
searchModalContentTabsListColor, |
| 106 |
searchModalContentTabsListCategoryColor, |
| 107 |
searchHeading, |
| 108 |
searchSubHeading, |
| 109 |
initialFAQNumber, |
| 110 |
initialDocsNumber, |
| 111 |
searchButtonLayout2Color, |
| 112 |
docQueryType, |
| 113 |
faqQueryType, |
| 114 |
searchModalQueryTermIds, |
| 115 |
searchModalQueryDocIds, |
| 116 |
searchModalQueriesFaqGroupIds, |
| 117 |
// AI Search Suggestions attributes |
| 118 |
enable_ai_powered_search, |
| 119 |
ai_suggestion_background_color, |
| 120 |
ai_suggestion_hover_background_color, |
| 121 |
ai_suggestion_title_color, |
| 122 |
ai_suggestion_query_color, |
| 123 |
ai_suggestion_response_color, |
| 124 |
ai_suggestion_button_color, |
| 125 |
ai_suggestion_button_bg_color |
| 126 |
} = attributes; |
| 127 |
|
| 128 |
const editorStoreForGettingPreivew = |
| 129 |
betterdocs_style_handler.editor_type === "edit-site" |
| 130 |
? "core/edit-site" |
| 131 |
: "core/edit-post"; |
| 132 |
|
| 133 |
// this useEffect is for setting the resOption attribute to desktop/tab/mobile depending on the added 'eb-res-option-' class only the first time once |
| 134 |
useEffect(() => { |
| 135 |
setAttributes({ |
| 136 |
resOption: select( |
| 137 |
editorStoreForGettingPreivew |
| 138 |
).__experimentalGetPreviewDeviceType(), |
| 139 |
}); |
| 140 |
}, []); |
| 141 |
|
| 142 |
const resRequiredProps = { |
| 143 |
setAttributes, |
| 144 |
resOption, |
| 145 |
attributes, |
| 146 |
objAttributes, |
| 147 |
}; |
| 148 |
|
| 149 |
const isAISearchEnabled = () => { |
| 150 |
try { |
| 151 |
// Safety check for window object |
| 152 |
if (typeof window === 'undefined') { |
| 153 |
return false; |
| 154 |
} |
| 155 |
|
| 156 |
if (typeof window.betterDocsBlocksHelper !== 'undefined' && window.betterDocsBlocksHelper) { |
| 157 |
// Use the combined flag for simplicity (handle both boolean and numeric values) |
| 158 |
return window.betterDocsBlocksHelper.AI_SEARCH_SUGGESTIONS_ENABLED == true || |
| 159 |
window.betterDocsBlocksHelper.AI_SEARCH_SUGGESTIONS_ENABLED === 1; |
| 160 |
} |
| 161 |
|
| 162 |
return false; |
| 163 |
} catch (error) { |
| 164 |
return false; |
| 165 |
} |
| 166 |
}; |
| 167 |
|
| 168 |
return ( |
| 169 |
<InspectorControls key="controls"> |
| 170 |
<div className="eb-panel-control"> |
| 171 |
<TabPanel |
| 172 |
className="eb-parent-tab-panel" |
| 173 |
activeClass="active-tab" |
| 174 |
tabs={[ |
| 175 |
{ |
| 176 |
name:"general", |
| 177 |
title:__('General', 'betterdocs'), |
| 178 |
className:"eb-tab style" |
| 179 |
}, |
| 180 |
{ |
| 181 |
name: "style", |
| 182 |
title: __("Style", "betterdocs"), |
| 183 |
className: "eb-tab style", |
| 184 |
} |
| 185 |
]} |
| 186 |
> |
| 187 |
{(tab) => ( |
| 188 |
<div className={"eb-tab-controls " + tab.name}> |
| 189 |
{tab.name == 'general' && ( |
| 190 |
<> |
| 191 |
<PanelBody |
| 192 |
title={__("General", "betterdocs")} |
| 193 |
initialOpen={true} |
| 194 |
> |
| 195 |
<SelectControl |
| 196 |
label={__("Select layout", "betterdocs")} |
| 197 |
value={searchLayout} |
| 198 |
options={SEARCH_LAYOUT_VALUES} |
| 199 |
onChange={(newLayout) => |
| 200 |
setAttributes({ |
| 201 |
searchLayout: newLayout, |
| 202 |
}) |
| 203 |
} |
| 204 |
/> |
| 205 |
{searchLayout == 'layout-2' && ( |
| 206 |
<> |
| 207 |
<SelectControl |
| 208 |
label={__("Search Modal Layout", "betterdocs")} |
| 209 |
value={searchModalLayout} |
| 210 |
options={SEARCH_MODAL_LAYOUT_VALUES} |
| 211 |
onChange={(newLayout) => |
| 212 |
setAttributes({ |
| 213 |
searchModalLayout: newLayout, |
| 214 |
}) |
| 215 |
} |
| 216 |
/> |
| 217 |
{(searchModalLayout === 'docs-archive' || searchModalLayout === 'sidebar') && ( |
| 218 |
<> |
| 219 |
<RangeControl |
| 220 |
label={__("Width (%)", "betterdocs")} |
| 221 |
value={searchModalWidth} |
| 222 |
onChange={(value) => |
| 223 |
setAttributes({ |
| 224 |
searchModalWidth: value, |
| 225 |
}) |
| 226 |
} |
| 227 |
min={10} |
| 228 |
max={100} |
| 229 |
step={1} |
| 230 |
/> |
| 231 |
<SelectControl |
| 232 |
label={__("Position", "betterdocs")} |
| 233 |
value={searchModalPosition} |
| 234 |
options={[ |
| 235 |
{ label: __("Left", "betterdocs"), value: "left" }, |
| 236 |
{ label: __("Right", "betterdocs"), value: "right" }, |
| 237 |
]} |
| 238 |
onChange={(value) => |
| 239 |
setAttributes({ |
| 240 |
searchModalPosition: value, |
| 241 |
}) |
| 242 |
} |
| 243 |
/> |
| 244 |
</> |
| 245 |
)} |
| 246 |
</> |
| 247 |
)} |
| 248 |
</PanelBody> |
| 249 |
{searchLayout == 'layout-2' && |
| 250 |
<PanelBody |
| 251 |
title={__("Modal Query", "betterdocs")} |
| 252 |
initialOpen={false} |
| 253 |
> |
| 254 |
<SelectControl |
| 255 |
label={__("Select Docs Type", "betterdocs")} |
| 256 |
value={docQueryType} |
| 257 |
options={ [ |
| 258 |
{ label: __("Popular Docs", "betterdocs"), value: "popular-docs" }, |
| 259 |
{ label: __("Specific Doc Id's", "betterdocs"), value: "specific-doc-ids" }, |
| 260 |
{ label: __("Specific Doc Term Id's", "betterdocs"), value: "specific-doc-term-ids" }, |
| 261 |
]} |
| 262 |
onChange={(newLayout) => |
| 263 |
setAttributes({ |
| 264 |
docQueryType: newLayout, |
| 265 |
}) |
| 266 |
} |
| 267 |
/> |
| 268 |
{docQueryType == 'popular-docs' && <TextControl |
| 269 |
label={__("Number of Docs", "betterdocs")} |
| 270 |
type="number" |
| 271 |
value={initialDocsNumber} |
| 272 |
onChange={(value) => { |
| 273 |
setAttributes({ |
| 274 |
initialDocsNumber: parseInt(value), |
| 275 |
}); |
| 276 |
}} |
| 277 |
/>} |
| 278 |
{docQueryType == 'specific-doc-ids' && |
| 279 |
<TextControl |
| 280 |
label={__("Doc Id's", "betterdocs")} |
| 281 |
type="text" |
| 282 |
value={searchModalQueryDocIds} |
| 283 |
placeholder={__('E.g: 15, 16')} |
| 284 |
onChange={(value) => { |
| 285 |
setAttributes({ |
| 286 |
searchModalQueryDocIds: value, |
| 287 |
}); |
| 288 |
}} |
| 289 |
/> |
| 290 |
} |
| 291 |
{ |
| 292 |
docQueryType == 'specific-doc-term-ids' && <TextControl |
| 293 |
label={__("Doc Term Id's", "betterdocs")} |
| 294 |
type="text" |
| 295 |
value={searchModalQueryTermIds} |
| 296 |
placeholder={__('E.g: 15, 16')} |
| 297 |
onChange={(value) => { |
| 298 |
setAttributes({ |
| 299 |
searchModalQueryTermIds: value, |
| 300 |
}); |
| 301 |
}} |
| 302 |
/> |
| 303 |
} |
| 304 |
<SelectControl |
| 305 |
label={__("Select FAQ Type", "betterdocs")} |
| 306 |
value={faqQueryType} |
| 307 |
options={ [ |
| 308 |
{ label: __("Default", "betterdocs"), value: "default" }, |
| 309 |
{ label: __("Specific FAQ Id's", "betterdocs"), value: "specific-faq-group-ids" } |
| 310 |
]} |
| 311 |
onChange={(newLayout) => |
| 312 |
setAttributes({ |
| 313 |
faqQueryType: newLayout, |
| 314 |
}) |
| 315 |
} |
| 316 |
/> |
| 317 |
{faqQueryType == 'default' && <TextControl |
| 318 |
label={__("Number of FAQ's", "betterdocs")} |
| 319 |
type="number" |
| 320 |
value={initialFAQNumber} |
| 321 |
onChange={(value) => { |
| 322 |
setAttributes({ |
| 323 |
initialFAQNumber: parseInt(value), |
| 324 |
}); |
| 325 |
}} |
| 326 |
/>} |
| 327 |
{faqQueryType == 'specific-faq-group-ids' && |
| 328 |
<TextControl |
| 329 |
label={__("Faq Group Id's", "betterdocs")} |
| 330 |
type="text" |
| 331 |
value={searchModalQueriesFaqGroupIds} |
| 332 |
placeholder={__('E.g: 5, 6')} |
| 333 |
onChange={(value) => { |
| 334 |
setAttributes({ |
| 335 |
searchModalQueriesFaqGroupIds: value, |
| 336 |
}); |
| 337 |
}} |
| 338 |
/> |
| 339 |
} |
| 340 |
<Notice status="info" isDismissible={false}> |
| 341 |
{__( |
| 342 |
"Please note that these query changes will be applicable on the front end only", |
| 343 |
"betterdocs" |
| 344 |
)} |
| 345 |
</Notice> |
| 346 |
</PanelBody> |
| 347 |
} |
| 348 |
<PanelBody |
| 349 |
title={__("Search Content", "betterdocs")} |
| 350 |
initialOpen={false} |
| 351 |
> |
| 352 |
{(searchLayout == 'layout-1' || (searchLayout == 'layout-2' && searchModalLayout == 'layout-1')) && ( |
| 353 |
<><TextControl |
| 354 |
label={__("Search Heading", "betterdocs")} |
| 355 |
value={searchHeading} |
| 356 |
onChange={(value) => { |
| 357 |
setAttributes({ |
| 358 |
searchHeading: value, |
| 359 |
}); |
| 360 |
}} |
| 361 |
/> |
| 362 |
<TextControl |
| 363 |
label={__("Search Sub Heading", "betterdocs")} |
| 364 |
value={searchSubHeading} |
| 365 |
onChange={(value) => { |
| 366 |
setAttributes({ |
| 367 |
searchSubHeading: value, |
| 368 |
}); |
| 369 |
}} |
| 370 |
/> |
| 371 |
<SelectControl |
| 372 |
label={__("Heading Tag", "betterdocs")} |
| 373 |
value={attributes.searchHeadingTag} |
| 374 |
options={HTML_TAGS} |
| 375 |
onChange={(value) => { |
| 376 |
setAttributes({ |
| 377 |
searchHeadingTag: value, |
| 378 |
}); |
| 379 |
}} |
| 380 |
/> |
| 381 |
<SelectControl |
| 382 |
label={__("Subheading Tag", "betterdocs")} |
| 383 |
value={attributes.searchSubHeadingTag} |
| 384 |
options={HTML_TAGS} |
| 385 |
onChange={(value) => { |
| 386 |
setAttributes({ |
| 387 |
searchSubHeadingTag: value, |
| 388 |
}); |
| 389 |
}} |
| 390 |
/></> |
| 391 |
)} |
| 392 |
{searchLayout == 'layout-2' && applyFilters('advancedSearchModal', '', [setAttributes, attributes, resOption, objAttributes])} |
| 393 |
</PanelBody> |
| 394 |
</> |
| 395 |
)} |
| 396 |
{tab.name === "style" && ( |
| 397 |
<> |
| 398 |
{(searchLayout == 'layout-1' || (searchLayout == 'layout-2' && searchModalLayout == 'layout-1')) && ( |
| 399 |
<PanelBody title={__("Search Box", "betterdocs")} initialOpen={true}> |
| 400 |
<> |
| 401 |
<BaseControl> |
| 402 |
<h3 className="eb-control-title"> |
| 403 |
{__("Background", "betterdocs")} |
| 404 |
</h3> |
| 405 |
</BaseControl> |
| 406 |
<BackgroundControl |
| 407 |
controlName={searchLayout == 'layout-1' ? BOX_BACKGROUND : BOX_BACKGROUND_LAYOUT_2} |
| 408 |
resRequiredProps={resRequiredProps} |
| 409 |
noOverlay={true} |
| 410 |
/> |
| 411 |
<ResponsiveDimensionsControl |
| 412 |
baseLabel={__("Padding", "betterdocs")} |
| 413 |
resRequiredProps={resRequiredProps} |
| 414 |
controlName={searchLayout == 'layout-1' ? BOX_PADDING : BOX_PADDING_LAYOUT_2} |
| 415 |
/> |
| 416 |
<ResponsiveDimensionsControl |
| 417 |
baseLabel={__("Margin", "betterdocs")} |
| 418 |
resRequiredProps={resRequiredProps} |
| 419 |
controlName={searchLayout == 'layout-1' ? WRAPPER_MARGIN : WRAPPER_MARGIN_LAYOUT_2} |
| 420 |
/> |
| 421 |
</> |
| 422 |
</PanelBody> |
| 423 |
)} |
| 424 |
<PanelBody |
| 425 |
title={__("Search Field", "betterdocs")} |
| 426 |
initialOpen={false} |
| 427 |
> |
| 428 |
<> |
| 429 |
<TextControl |
| 430 |
label={__("Placeholder", "betterdocs")} |
| 431 |
value={placeholderText} |
| 432 |
onChange={(value) => { |
| 433 |
setAttributes({ |
| 434 |
placeholderText: value, |
| 435 |
}); |
| 436 |
}} |
| 437 |
/> |
| 438 |
<ColorControl |
| 439 |
label={__("Field Background Color", "betterdocs")} |
| 440 |
color={searchLayout == 'layout-1' ? fieldBackgroundColor : fieldBackgroundColorLayout2} |
| 441 |
onChange={(value) => { |
| 442 |
if( searchLayout == 'layout-1' ) { |
| 443 |
setAttributes({ |
| 444 |
fieldBackgroundColor:value |
| 445 |
}) |
| 446 |
} else { |
| 447 |
setAttributes({ |
| 448 |
fieldBackgroundColorLayout2:value |
| 449 |
}) |
| 450 |
} |
| 451 |
}} |
| 452 |
/> |
| 453 |
<ColorControl |
| 454 |
label={__("Text Color", "betterdocs")} |
| 455 |
color={searchLayout == 'layout-1' ? fieldTextColor : fieldTextColorLayout2} |
| 456 |
onChange={(value) =>{ |
| 457 |
if( searchLayout == 'layout-1' ){ |
| 458 |
setAttributes({ |
| 459 |
fieldTextColor:value |
| 460 |
}) |
| 461 |
} else { |
| 462 |
setAttributes({ |
| 463 |
fieldTextColorLayout2:value |
| 464 |
}) |
| 465 |
} |
| 466 |
}} |
| 467 |
/> |
| 468 |
<TypographyDropdown |
| 469 |
baseLabel={__("Typography", "betterdocs")} |
| 470 |
typographyPrefixConstant={searchLayout == 'layout-1' ? typoPrefix_fieldtext : typoPrefix_fieldtext_layout_2} |
| 471 |
resRequiredProps={resRequiredProps} |
| 472 |
defaultFontSize={14} |
| 473 |
/> |
| 474 |
<ResponsiveDimensionsControl |
| 475 |
baseLabel={__("Field Padding", "betterdocs")} |
| 476 |
resRequiredProps={resRequiredProps} |
| 477 |
controlName={searchLayout == 'layout-1' ? FIELD_PADDING : FIELD_PADDING_LAYOUT_2} |
| 478 |
/> |
| 479 |
<BaseControl> |
| 480 |
<h3 className="eb-control-title"> |
| 481 |
{__("Border", "betterdocs")} |
| 482 |
</h3> |
| 483 |
</BaseControl> |
| 484 |
<BorderShadowControl |
| 485 |
controlName={ searchLayout == 'layout-1' ? FIELD_BORDER : FIELD_BORDER_LAYOUT_2} |
| 486 |
resRequiredProps={resRequiredProps} |
| 487 |
noShadow={true} |
| 488 |
/> |
| 489 |
<hr /> |
| 490 |
<BaseControl> |
| 491 |
<h3 className="eb-control-title"> |
| 492 |
{__("Search Icon", "betterdocs")} |
| 493 |
</h3> |
| 494 |
</BaseControl> |
| 495 |
<ColorControl |
| 496 |
label={__("Color", "betterdocs")} |
| 497 |
color={searchLayout == 'layout-1' ? searchIconColor : searchIconColorLayout2} |
| 498 |
onChange={(value) => { |
| 499 |
if( searchLayout == 'layout-1' ) { |
| 500 |
setAttributes({ |
| 501 |
searchIconColor:value |
| 502 |
}) |
| 503 |
} else { |
| 504 |
setAttributes({ |
| 505 |
searchIconColorLayout2:value |
| 506 |
}) |
| 507 |
} |
| 508 |
}} |
| 509 |
/> |
| 510 |
<ResponsiveRangeController |
| 511 |
baseLabel={__("Icon Size", "betterdocs")} |
| 512 |
controlName={searchLayout == 'layout-1' ? ICON_SIZE : ICON_SIZE_LAYOUT_2} |
| 513 |
resRequiredProps={resRequiredProps} |
| 514 |
min={1} |
| 515 |
max={500} |
| 516 |
step={1} |
| 517 |
/> |
| 518 |
{searchLayout != 'layout-2' && <><BaseControl> |
| 519 |
<h3 className="eb-control-title"> |
| 520 |
{__("Close Icon", "betterdocs")} |
| 521 |
</h3> |
| 522 |
</BaseControl> |
| 523 |
<ColorControl |
| 524 |
label={__("Color", "betterdocs")} |
| 525 |
color={closeIconColor} |
| 526 |
onChange={(closeIconColor) => |
| 527 |
setAttributes({ |
| 528 |
closeIconColor, |
| 529 |
}) |
| 530 |
} |
| 531 |
/> |
| 532 |
<ColorControl |
| 533 |
label={__("Border Color", "betterdocs")} |
| 534 |
color={closeBorderColor} |
| 535 |
onChange={(closeBorderColor) => |
| 536 |
setAttributes({ |
| 537 |
closeBorderColor, |
| 538 |
}) |
| 539 |
} |
| 540 |
/></>} |
| 541 |
</> |
| 542 |
</PanelBody> |
| 543 |
{searchLayout == 'layout-2' && ( |
| 544 |
<> |
| 545 |
{/* AI Search Suggestions Panel - Only show if AI Chatbot is enabled */} |
| 546 |
{isAISearchEnabled() && ( |
| 547 |
<PanelBody |
| 548 |
title={__("AI-Powered Smart Modal Search", "betterdocs")} |
| 549 |
initialOpen={false} |
| 550 |
> |
| 551 |
<ToggleControl |
| 552 |
label={__("Enable AI Search Suggestions", "betterdocs")} |
| 553 |
checked={!!enable_ai_powered_search} |
| 554 |
onChange={(value) => setAttributes && setAttributes({ enable_ai_powered_search: !!value })} |
| 555 |
__nextHasNoMarginBottom={true} |
| 556 |
/> |
| 557 |
|
| 558 |
{enable_ai_powered_search && ( |
| 559 |
<> |
| 560 |
<ColorControl |
| 561 |
label={__("Background Color", "betterdocs")} |
| 562 |
color={ai_suggestion_background_color} |
| 563 |
onChange={(value) => { |
| 564 |
setAttributes && setAttributes({ ai_suggestion_background_color: value }); |
| 565 |
}} |
| 566 |
/> |
| 567 |
|
| 568 |
<ColorControl |
| 569 |
label={__("Hover Background Color", "betterdocs")} |
| 570 |
color={ai_suggestion_hover_background_color} |
| 571 |
onChange={(value) => { |
| 572 |
setAttributes && setAttributes({ ai_suggestion_hover_background_color: value }); |
| 573 |
}} |
| 574 |
/> |
| 575 |
|
| 576 |
<ResponsiveDimensionsControl |
| 577 |
baseLabel={__("Margin", "betterdocs")} |
| 578 |
controlName={AI_SUGGESTION_MARGIN} |
| 579 |
resRequiredProps={resRequiredProps} |
| 580 |
/> |
| 581 |
<ResponsiveDimensionsControl |
| 582 |
baseLabel={__("Padding", "betterdocs")} |
| 583 |
controlName={AI_SUGGESTION_PADDING} |
| 584 |
resRequiredProps={resRequiredProps} |
| 585 |
/> |
| 586 |
|
| 587 |
<BaseControl> |
| 588 |
<h3 className="eb-control-title"> |
| 589 |
{__("Title", "betterdocs")} |
| 590 |
</h3> |
| 591 |
</BaseControl> |
| 592 |
|
| 593 |
<TypographyDropdown |
| 594 |
baseLabel={__("Title Typography", "betterdocs")} |
| 595 |
typographyPrefixConstant={AI_SUGGESTION_TITLE_TYPO} |
| 596 |
resRequiredProps={resRequiredProps} |
| 597 |
/> |
| 598 |
|
| 599 |
<ColorControl |
| 600 |
label={__("Title Color", "betterdocs")} |
| 601 |
color={ai_suggestion_title_color} |
| 602 |
onChange={(value) => { |
| 603 |
setAttributes && setAttributes({ ai_suggestion_title_color: value }); |
| 604 |
}} |
| 605 |
/> |
| 606 |
|
| 607 |
<BaseControl> |
| 608 |
<h3 className="eb-control-title"> |
| 609 |
{__("Query", "betterdocs")} |
| 610 |
</h3> |
| 611 |
</BaseControl> |
| 612 |
|
| 613 |
<TypographyDropdown |
| 614 |
baseLabel={__("Query Typography", "betterdocs")} |
| 615 |
typographyPrefixConstant={AI_SUGGESTION_QUERY_TYPO} |
| 616 |
resRequiredProps={resRequiredProps} |
| 617 |
/> |
| 618 |
|
| 619 |
<ColorControl |
| 620 |
label={__("Query Text Color", "betterdocs")} |
| 621 |
color={ai_suggestion_query_color} |
| 622 |
onChange={(value) => { |
| 623 |
setAttributes && setAttributes({ ai_suggestion_query_color: value }); |
| 624 |
}} |
| 625 |
/> |
| 626 |
|
| 627 |
<BaseControl> |
| 628 |
<h3 className="eb-control-title"> |
| 629 |
{__("Response", "betterdocs")} |
| 630 |
</h3> |
| 631 |
</BaseControl> |
| 632 |
|
| 633 |
<TypographyDropdown |
| 634 |
baseLabel={__("Response Typography", "betterdocs")} |
| 635 |
typographyPrefixConstant={AI_SUGGESTION_RESPONSE_TYPO} |
| 636 |
resRequiredProps={resRequiredProps} |
| 637 |
/> |
| 638 |
|
| 639 |
<ColorControl |
| 640 |
label={__("Response Text Color", "betterdocs")} |
| 641 |
color={ai_suggestion_response_color} |
| 642 |
onChange={(value) => { |
| 643 |
setAttributes && setAttributes({ ai_suggestion_response_color: value }); |
| 644 |
}} |
| 645 |
/> |
| 646 |
|
| 647 |
<BaseControl> |
| 648 |
<h3 className="eb-control-title"> |
| 649 |
{__("Continue Chat Button", "betterdocs")} |
| 650 |
</h3> |
| 651 |
</BaseControl> |
| 652 |
|
| 653 |
<TypographyDropdown |
| 654 |
baseLabel={__("Button Typography", "betterdocs")} |
| 655 |
typographyPrefixConstant={AI_SUGGESTION_BUTTON_TYPO} |
| 656 |
resRequiredProps={resRequiredProps} |
| 657 |
/> |
| 658 |
|
| 659 |
<ColorControl |
| 660 |
label={__("Button Text Color", "betterdocs")} |
| 661 |
color={ai_suggestion_button_color} |
| 662 |
onChange={(value) => { |
| 663 |
setAttributes && setAttributes({ ai_suggestion_button_color: value }); |
| 664 |
}} |
| 665 |
/> |
| 666 |
|
| 667 |
<ColorControl |
| 668 |
label={__("Button Background Color", "betterdocs")} |
| 669 |
color={ai_suggestion_button_bg_color} |
| 670 |
onChange={(value) => { |
| 671 |
setAttributes && setAttributes({ ai_suggestion_button_bg_color: value }); |
| 672 |
}} |
| 673 |
/> |
| 674 |
|
| 675 |
<ResponsiveDimensionsControl |
| 676 |
baseLabel={__("Button Padding", "betterdocs")} |
| 677 |
controlName={AI_SUGGESTION_BUTTON_PADDING} |
| 678 |
resRequiredProps={resRequiredProps} |
| 679 |
/> |
| 680 |
|
| 681 |
<ResponsiveDimensionsControl |
| 682 |
baseLabel={__("Button Margin", "betterdocs")} |
| 683 |
controlName={AI_SUGGESTION_BUTTON_MARGIN} |
| 684 |
resRequiredProps={resRequiredProps} |
| 685 |
/> |
| 686 |
</> |
| 687 |
)} |
| 688 |
</PanelBody> |
| 689 |
)} |
| 690 |
<PanelBody |
| 691 |
title={__("Search Modal", "betterdocs")} |
| 692 |
initialOpen={false} |
| 693 |
> |
| 694 |
<BaseControl> |
| 695 |
<h3 className="eb-control-title"> |
| 696 |
{__("Search Field", "betterdocs")} |
| 697 |
</h3> |
| 698 |
</BaseControl> |
| 699 |
<ColorControl |
| 700 |
label={__("Magnifier Color", "betterdocs")} |
| 701 |
color={searchModalMagnifierColor} |
| 702 |
onChange={(value) => { |
| 703 |
setAttributes({searchModalMagnifierColor:value}) |
| 704 |
}} |
| 705 |
/> |
| 706 |
<BackgroundControl |
| 707 |
controlName={ |
| 708 |
SEARCH_MODAL_FIELD_BACKGROUND |
| 709 |
} |
| 710 |
resRequiredProps={resRequiredProps} |
| 711 |
noOverlay={true} |
| 712 |
/> |
| 713 |
<TypographyDropdown |
| 714 |
baseLabel={__( |
| 715 |
"Typography", |
| 716 |
"betterdocs", |
| 717 |
)} |
| 718 |
typographyPrefixConstant={ |
| 719 |
SEARCH_MODAL_FIELD_TYPO |
| 720 |
} |
| 721 |
resRequiredProps={resRequiredProps} |
| 722 |
defaultFontSize={16} |
| 723 |
/> |
| 724 |
<ColorControl |
| 725 |
label={__("Field Color", "betterdocs")} |
| 726 |
color={searchModalFieldColor} |
| 727 |
onChange={(value) => { |
| 728 |
setAttributes({searchModalFieldColor:value}) |
| 729 |
}} |
| 730 |
/> |
| 731 |
<ColorControl |
| 732 |
label={__("Field Placeholder Color", "betterdocs")} |
| 733 |
color={searchModalFieldPlaceholderColor} |
| 734 |
onChange={(value) => { |
| 735 |
setAttributes({searchModalFieldPlaceholderColor:value}) |
| 736 |
}} |
| 737 |
/> |
| 738 |
<BaseControl> |
| 739 |
<h3 className="eb-control-title"> |
| 740 |
{__("Search Category", "betterdocs")} |
| 741 |
</h3> |
| 742 |
</BaseControl> |
| 743 |
<ColorControl |
| 744 |
label={__("Color", "betterdocs")} |
| 745 |
color={searchModalCategoryColor} |
| 746 |
onChange={(value) => { |
| 747 |
setAttributes({searchModalCategoryColor:value}) |
| 748 |
}} |
| 749 |
/> |
| 750 |
<TypographyDropdown |
| 751 |
baseLabel={__( |
| 752 |
"Typography", |
| 753 |
"betterdocs", |
| 754 |
)} |
| 755 |
typographyPrefixConstant={ |
| 756 |
SEARCH_MODAL_CATEGORY_FIELD_TYPO |
| 757 |
} |
| 758 |
resRequiredProps={resRequiredProps} |
| 759 |
defaultFontSize={16} |
| 760 |
/> |
| 761 |
<BaseControl> |
| 762 |
<h3 className="eb-control-title"> |
| 763 |
{__("Content Tabs", "betterdocs")} |
| 764 |
</h3> |
| 765 |
</BaseControl> |
| 766 |
<TypographyDropdown |
| 767 |
baseLabel={__( |
| 768 |
"Typography", |
| 769 |
"betterdocs", |
| 770 |
)} |
| 771 |
typographyPrefixConstant={ |
| 772 |
SEARCH_MODAL_CONTENT_TABS_TYPO |
| 773 |
} |
| 774 |
resRequiredProps={resRequiredProps} |
| 775 |
defaultFontSize={16} |
| 776 |
/> |
| 777 |
<ResponsiveRangeController |
| 778 |
baseLabel={__("Icon Size", "betterdocs")} |
| 779 |
controlName={SEARCH_MODAL_CONTENT_TABS_ICON_SIZE} |
| 780 |
resRequiredProps={resRequiredProps} |
| 781 |
min={1} |
| 782 |
max={100} |
| 783 |
step={1} |
| 784 |
/> |
| 785 |
<BorderShadowControl |
| 786 |
controlName={SEARCH_MODAL_CONTENT_TABS_BORDER} |
| 787 |
resRequiredProps={resRequiredProps} |
| 788 |
noShadow={true} |
| 789 |
noShdowHover={true} |
| 790 |
/> |
| 791 |
<BaseControl> |
| 792 |
<h3 className="eb-control-title"> |
| 793 |
{__("Content List", "betterdocs")} |
| 794 |
</h3> |
| 795 |
</BaseControl> |
| 796 |
<TypographyDropdown |
| 797 |
baseLabel={__( |
| 798 |
"Typography", |
| 799 |
"betterdocs", |
| 800 |
)} |
| 801 |
typographyPrefixConstant={ |
| 802 |
SEARCH_MODAL_CONTENT_TABS_LIST_TYPO |
| 803 |
} |
| 804 |
resRequiredProps={resRequiredProps} |
| 805 |
defaultFontSize={16} |
| 806 |
/> |
| 807 |
<ColorControl |
| 808 |
label={__("Color", "betterdocs")} |
| 809 |
color={searchModalContentTabsListColor} |
| 810 |
onChange={(value) => { |
| 811 |
setAttributes({searchModalContentTabsListColor:value}) |
| 812 |
}} |
| 813 |
/> |
| 814 |
<ResponsiveRangeController |
| 815 |
baseLabel={__("Icon Size", "betterdocs")} |
| 816 |
controlName={SEARCH_MODAL_CONTENT_TABS_LIST_ICON_SIZE} |
| 817 |
resRequiredProps={resRequiredProps} |
| 818 |
min={1} |
| 819 |
max={100} |
| 820 |
step={1} |
| 821 |
/> |
| 822 |
<BorderShadowControl |
| 823 |
controlName={SEARCH_MODAL_CONTENT_TABS_LIST_BORDER} |
| 824 |
resRequiredProps={resRequiredProps} |
| 825 |
noShadow={true} |
| 826 |
noShdowHover={true} |
| 827 |
/> |
| 828 |
<BaseControl> |
| 829 |
<h3 className="eb-control-title"> |
| 830 |
{__("Content List Category", "betterdocs")} |
| 831 |
</h3> |
| 832 |
</BaseControl> |
| 833 |
<TypographyDropdown |
| 834 |
baseLabel={__( |
| 835 |
"Typography", |
| 836 |
"betterdocs", |
| 837 |
)} |
| 838 |
typographyPrefixConstant={ |
| 839 |
SEARCH_MODAL_CONTENT_TABS_LIST_CATEGORY_TYPO |
| 840 |
} |
| 841 |
resRequiredProps={resRequiredProps} |
| 842 |
defaultFontSize={16} |
| 843 |
/> |
| 844 |
<ColorControl |
| 845 |
label={__("Color", "betterdocs")} |
| 846 |
color={searchModalContentTabsListCategoryColor} |
| 847 |
onChange={(value) => { |
| 848 |
setAttributes({searchModalContentTabsListCategoryColor:value}) |
| 849 |
}} |
| 850 |
/> |
| 851 |
<ResponsiveRangeController |
| 852 |
baseLabel={__("Icon Size", "betterdocs")} |
| 853 |
controlName={SEARCH_MODAL_CONTENT_TABS_LIST_CATEGORY_ICON_SIZE} |
| 854 |
resRequiredProps={resRequiredProps} |
| 855 |
min={1} |
| 856 |
max={100} |
| 857 |
step={1} |
| 858 |
/> |
| 859 |
</PanelBody> |
| 860 |
<PanelBody |
| 861 |
title={__("Search Button", "betterdocs")} |
| 862 |
initialOpen={false} |
| 863 |
> |
| 864 |
<ColorControl |
| 865 |
label={__("Color", "betterdocs")} |
| 866 |
color={searchButtonLayout2Color} |
| 867 |
onChange={(value) => { |
| 868 |
setAttributes({searchButtonLayout2Color:value}) |
| 869 |
}} |
| 870 |
/> |
| 871 |
<BackgroundControl |
| 872 |
controlName={SEARCH_BUTTON_BACKGROUND_LAYOUT_2} |
| 873 |
resRequiredProps={resRequiredProps} |
| 874 |
noOverlay={true} |
| 875 |
/> |
| 876 |
<TypographyDropdown |
| 877 |
baseLabel={__("Typography", "betterdocs")} |
| 878 |
typographyPrefixConstant={SEARCH_BUTTON_LAYOUT_2_TYPO} |
| 879 |
resRequiredProps={resRequiredProps} |
| 880 |
/> |
| 881 |
</PanelBody> |
| 882 |
</> |
| 883 |
)} |
| 884 |
{searchLayout != 'layout-2' && <PanelBody |
| 885 |
title={__("Search Result Box", "betterdocs")} |
| 886 |
initialOpen={false} |
| 887 |
> |
| 888 |
<ResponsiveRangeController |
| 889 |
baseLabel={__("Width", "betterdocs")} |
| 890 |
controlName={RESULT_BOX_WIDTH} |
| 891 |
resRequiredProps={resRequiredProps} |
| 892 |
min={1} |
| 893 |
max={100} |
| 894 |
step={1} |
| 895 |
/> |
| 896 |
<ResponsiveRangeController |
| 897 |
baseLabel={__("Max Width", "betterdocs")} |
| 898 |
controlName={RESULT_BOX_MAXWIDTH} |
| 899 |
resRequiredProps={resRequiredProps} |
| 900 |
min={1} |
| 901 |
max={1600} |
| 902 |
step={1} |
| 903 |
/> |
| 904 |
<BaseControl> |
| 905 |
<h3 className="eb-control-title"> |
| 906 |
{__("Background", "betterdocs")} |
| 907 |
</h3> |
| 908 |
</BaseControl> |
| 909 |
<BackgroundControl |
| 910 |
controlName={RESULT_BOX_BACKGROUND} |
| 911 |
resRequiredProps={resRequiredProps} |
| 912 |
noOverlay={true} |
| 913 |
/> |
| 914 |
<BaseControl> |
| 915 |
<h3 className="eb-control-title"> |
| 916 |
{__("Border", "betterdocs")} |
| 917 |
</h3> |
| 918 |
</BaseControl> |
| 919 |
<BorderShadowControl |
| 920 |
controlName={RESULT_BOX_BORDER} |
| 921 |
noShadow={true} |
| 922 |
resRequiredProps={resRequiredProps} |
| 923 |
/> |
| 924 |
</PanelBody>} |
| 925 |
{searchLayout != 'layout-2' && <PanelBody |
| 926 |
title={__("Search Result List", "betterdocs")} |
| 927 |
initialOpen={false} |
| 928 |
> |
| 929 |
<TypographyDropdown |
| 930 |
baseLabel={__("Typography", "betterdocs")} |
| 931 |
typographyPrefixConstant={typoPrefix_resulttext} |
| 932 |
resRequiredProps={resRequiredProps} |
| 933 |
/> |
| 934 |
<ColorControl |
| 935 |
label={__("Item Color", "betterdocs")} |
| 936 |
color={itemColor} |
| 937 |
onChange={(itemColor) => |
| 938 |
setAttributes({ |
| 939 |
itemColor, |
| 940 |
}) |
| 941 |
} |
| 942 |
/> |
| 943 |
<ColorControl |
| 944 |
label={__("Item Hover Color", "betterdocs")} |
| 945 |
color={itemHoverColor} |
| 946 |
onChange={(itemHoverColor) => |
| 947 |
setAttributes({ |
| 948 |
itemHoverColor, |
| 949 |
}) |
| 950 |
} |
| 951 |
/> |
| 952 |
<ResponsiveDimensionsControl |
| 953 |
baseLabel={__("Padding", "betterdocs")} |
| 954 |
resRequiredProps={resRequiredProps} |
| 955 |
controlName={ITEM_PADDING} |
| 956 |
/> |
| 957 |
<BaseControl> |
| 958 |
<h3 className="eb-control-title"> |
| 959 |
{__("Border", "betterdocs")} |
| 960 |
</h3> |
| 961 |
</BaseControl> |
| 962 |
<BorderShadowControl |
| 963 |
controlName={ITEM_BORDER} |
| 964 |
noShadow={true} |
| 965 |
resRequiredProps={resRequiredProps} |
| 966 |
/> |
| 967 |
</PanelBody>} |
| 968 |
{searchLayout != 'layout-2' && applyFilters('advancedSearchPanel', '', [setAttributes, attributes, resOption, objAttributes])} |
| 969 |
</> |
| 970 |
)} |
| 971 |
{/* {tab.name === "advance" && ( |
| 972 |
<PanelBody> |
| 973 |
<ResponsiveDimensionsControl |
| 974 |
baseLabel={__("Margin", "betterdocs")} |
| 975 |
resRequiredProps={resRequiredProps} |
| 976 |
controlName={WRAPPER_MARGIN} |
| 977 |
/> |
| 978 |
</PanelBody> |
| 979 |
)} */} |
| 980 |
</div> |
| 981 |
)} |
| 982 |
</TabPanel> |
| 983 |
</div> |
| 984 |
</InspectorControls> |
| 985 |
); |
| 986 |
}; |
| 987 |
|
| 988 |
export default Inspector; |
| 989 |
|
