betterdocs / includes / Editors / Elementor / Widget / ArticleSummary.php

ArticleSummary.php in BetterDocs – AI Documentation, Knowledge Base, MCP Server, Docs, Wikis, FAQ & Chatbot 4.9.2, at includes/Editors/Elementor/Widget/ArticleSummary.php

553 lines 14.8 KB

Raw Download Zip

1	<?php
2
3	namespace WPDeveloper\BetterDocs\Editors\Elementor\Widget;
4
5	use Elementor\Controls_Manager;
6	use Elementor\Group_Control_Background;
7	use Elementor\Group_Control_Border;
8	use Elementor\Group_Control_Box_Shadow;
9	use Elementor\Group_Control_Typography;
10	use Elementor\Widget_Base;
11
12	if ( ! defined( 'ABSPATH' ) ) {
13	exit; // Exit if accessed directly
14	}
15
16	/**
17	* BetterDocs AI Doc Summarizer Elementor Widget
18	*/
19	class ArticleSummary extends Widget_Base {
20
21	/**
22	* Get widget name
23	*
24	* @return string Widget name
25	*/
26	public function get_name() {
27	return 'betterdocs-article-summary';
28	}
29
30	/**
31	* Get widget title
32	*
33	* @return string Widget title
34	*/
35	public function get_title() {
36	return __( 'AI Doc Summarizer', 'betterdocs' );
37	}
38
39	/**
40	* Get widget icon
41	*
42	* @return string Widget icon
43	*/
44	public function get_icon() {
45	return 'betterdocs-icon-ai-summary';
46	}
47
48	/**
49	* Get widget categories
50	*
51	* @return array Widget categories
52	*/
53	public function get_categories() {
54	return [ 'betterdocs-elements', 'docs-archive', 'betterdocs-elements-single' ];
55	}
56
57	/**
58	* Get widget keywords
59	*
60	* @return array Widget keywords
61	*/
62	public function get_keywords() {
63	return [ 'betterdocs', 'article', 'summary', 'ai', 'documentation', 'ai summary', 'doc summary', 'article summary', 'ai doc summarizer' ];
64	}
65
66	/**
67	* Get widget style dependencies
68	*
69	* @return array Widget style dependencies
70	*/
71	public function get_style_depends() {
72	return [ 'betterdocs-article-summary' ];
73	}
74
75	/**
76	* Get widget script dependencies
77	*
78	* @return array Widget script dependencies
79	*/
80	public function get_script_depends() {
81	return [ 'betterdocs' ];
82	}
83
84	public function get_custom_help_url() {
85	return 'https://betterdocs.co/docs/configure-ai-doc-summarizer-for-betterdocs/';
86	}
87
88	/**
89	* Register widget controls
90	*/
91	protected function register_controls() {
92	$this->start_controls_section(
93	'section_content',
94	[
95	'label' => __( 'Content', 'betterdocs' ),
96	'tab' => Controls_Manager::TAB_CONTENT,
97	]
98	);
99
100	$this->add_control(
101	'custom_title',
102	[
103	'label' => __( 'Custom Title', 'betterdocs' ),
104	'type' => Controls_Manager::TEXT,
105	'default' => '',
106	'placeholder' => __( 'Doc Summary', 'betterdocs' ),
107	'description' => __( 'Leave empty to use default title', 'betterdocs' ),
108	]
109	);
110
111	$this->add_control(
112	'show_title',
113	[
114	'label' => __( 'Show Title', 'betterdocs' ),
115	'type' => Controls_Manager::SWITCHER,
116	'label_on' => __( 'Show', 'betterdocs' ),
117	'label_off' => __( 'Hide', 'betterdocs' ),
118	'return_value' => 'yes',
119	'default' => 'yes',
120	]
121	);
122
123	$this->end_controls_section();
124
125	// Title Style Section
126	$this->start_controls_section(
127	'section_title_style',
128	[
129	'label' => __( 'Title Style', 'betterdocs' ),
130	'tab' => Controls_Manager::TAB_STYLE,
131	'condition' => [
132	'show_title' => 'yes',
133	],
134	]
135	);
136
137	$this->add_control(
138	'title_bg_color',
139	[
140	'label' => __( 'Background Color', 'betterdocs' ),
141	'type' => Controls_Manager::COLOR,
142	'default' => '#f9fafb',
143	'selectors' => [
144	'{{WRAPPER}} .betterdocs-article-summary .betterdocs-summary-header' => 'background-color: {{VALUE}};',
145	],
146	]
147	);
148
149	$this->add_group_control(
150	Group_Control_Typography::get_type(),
151	[
152	'name' => 'title_typography',
153	'label' => __( 'Typography', 'betterdocs' ),
154	'selector' => '{{WRAPPER}} .betterdocs-summary-title',
155	]
156	);
157
158	$this->add_control(
159	'title_color',
160	[
161	'label' => __( 'Color', 'betterdocs' ),
162	'type' => Controls_Manager::COLOR,
163	'default' => '#2c3e50',
164	'selectors' => [
165	'{{WRAPPER}} .betterdocs-summary-title' => 'color: {{VALUE}};',
166	],
167	]
168	);
169
170	$this->add_responsive_control(
171	'title_padding',
172	[
173	'label' => __( 'Padding', 'betterdocs' ),
174	'type' => Controls_Manager::DIMENSIONS,
175	'size_units' => [ 'px', 'em', '%' ],
176	'selectors' => [
177	'{{WRAPPER}} .betterdocs-article-summary .betterdocs-summary-header' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
178	],
179	]
180	);
181
182	// $this->add_responsive_control(
183	// 'title_margin',
184	// [
185	// 'label' => __( 'Margin', 'betterdocs' ),
186	// 'type' => Controls_Manager::DIMENSIONS,
187	// 'size_units' => [ 'px', 'em', '%' ],
188	// 'selectors' => [
189	// '{{WRAPPER}} .betterdocs-summary-title' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
190	// ],
191	// ]
192	// );
193
194	$this->end_controls_section();
195
196	// Icon Style Section
197	$this->start_controls_section(
198	'section_icon_style',
199	[
200	'label' => __( 'Icon Style', 'betterdocs' ),
201	'tab' => Controls_Manager::TAB_STYLE,
202	]
203	);
204
205	$this->add_control(
206	'icon_color',
207	[
208	'label' => __( 'Arrow Color', 'betterdocs' ),
209	'type' => Controls_Manager::COLOR,
210	'default' => '#98A2B3',
211	'selectors' => [
212	'{{WRAPPER}} .betterdocs-summary-arrow .angle-icon path' => 'stroke: {{VALUE}};',
213	],
214	]
215	);
216
217	$this->add_responsive_control(
218	'icon_size',
219	[
220	'label' => __( 'Arrow Size', 'betterdocs' ),
221	'type' => Controls_Manager::SLIDER,
222	'size_units' => [ 'px' ],
223	'range' => [
224	'px' => [
225	'min' => 8,
226	'max' => 24,
227	],
228	],
229	'default' => [
230	'unit' => 'px',
231	'size' => 12,
232	],
233	'selectors' => [
234	'{{WRAPPER}} .betterdocs-summary-arrow .angle-icon' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
235	],
236	]
237	);
238
239	$this->add_control(
240	'ai_icon_size',
241	[
242	'label' => __( 'AI Icon Size', 'betterdocs' ),
243	'type' => Controls_Manager::SLIDER,
244	'size_units' => [ 'px' ],
245	'range' => [
246	'px' => [
247	'min' => 16,
248	'max' => 32,
249	],
250	],
251	'default' => [
252	'unit' => 'px',
253	'size' => 20,
254	],
255	'selectors' => [
256	'{{WRAPPER}} .betterdocs-summary-title img' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
257	],
258	]
259	);
260
261	$this->end_controls_section();
262
263	// Content Style Section
264	$this->start_controls_section(
265	'section_content_style',
266	[
267	'label' => __( 'Content Style', 'betterdocs' ),
268	'tab' => Controls_Manager::TAB_STYLE,
269	]
270	);
271
272	$this->add_group_control(
273	Group_Control_Typography::get_type(),
274	[
275	'name' => 'content_typography',
276	'label' => __( 'Typography', 'betterdocs' ),
277	'selector' => '{{WRAPPER}} .betterdocs-summary-text p, {{WRAPPER}} .betterdocs-summary-loading',
278	]
279	);
280
281	$this->add_control(
282	'content_color',
283	[
284	'label' => __( 'Text Color', 'betterdocs' ),
285	'type' => Controls_Manager::COLOR,
286	'default' => '#555555',
287	'selectors' => [
288	'{{WRAPPER}} .betterdocs-summary-text p' => 'color: {{VALUE}};',
289	],
290	]
291	);
292
293	$this->add_control(
294	'loading_color',
295	[
296	'label' => __( 'Loading Text Color', 'betterdocs' ),
297	'type' => Controls_Manager::COLOR,
298	'default' => '#666666',
299	'selectors' => [
300	'{{WRAPPER}} .betterdocs-summary-loading' => 'color: {{VALUE}};',
301	],
302	]
303	);
304
305	$this->add_control(
306	'thinking_icon_size',
307	[
308	'label' => __( 'Thinking Icon Size', 'betterdocs' ),
309	'type' => Controls_Manager::SLIDER,
310	'size_units' => [ 'px' ],
311	'range' => [
312	'px' => [
313	'min' => 16,
314	'max' => 32,
315	],
316	],
317	'default' => [
318	'unit' => 'px',
319	'size' => 20,
320	],
321	'selectors' => [
322	'{{WRAPPER}} .betterdocs-summary-loading img' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
323	],
324	]
325	);
326
327	$this->add_responsive_control(
328	'content_padding',
329	[
330	'label' => __( 'Padding', 'betterdocs' ),
331	'type' => Controls_Manager::DIMENSIONS,
332	'size_units' => [ 'px', 'em', '%' ],
333	'default' => [
334	'top' => 20,
335	'right' => 20,
336	'bottom' => 20,
337	'left' => 20,
338	'unit' => 'px',
339	],
340	'selectors' => [
341	'{{WRAPPER}} .betterdocs-summary-content' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
342	],
343	]
344	);
345
346	$this->add_responsive_control(
347	'content_margin',
348	[
349	'label' => __( 'Margin', 'betterdocs' ),
350	'type' => Controls_Manager::DIMENSIONS,
351	'size_units' => [ 'px', 'em', '%' ],
352	'selectors' => [
353	'{{WRAPPER}} .betterdocs-summary-content' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
354	],
355	]
356	);
357
358	$this->end_controls_section();
359
360	// Box Style Section
361	$this->start_controls_section(
362	'section_box_style',
363	[
364	'label' => __( 'Box Style', 'betterdocs' ),
365	'tab' => Controls_Manager::TAB_STYLE,
366	]
367	);
368
369	$this->add_group_control(
370	Group_Control_Background::get_type(),
371	[
372	'name' => 'box_background',
373	'label' => __( 'Background', 'betterdocs' ),
374	'types' => [ 'classic', 'gradient' ],
375	'selector' => '{{WRAPPER}} .betterdocs-article-summary',
376	]
377	);
378
379	$this->add_group_control(
380	Group_Control_Border::get_type(),
381	[
382	'name' => 'box_border',
383	'label' => __( 'Border', 'betterdocs' ),
384	'selector' => '{{WRAPPER}} .betterdocs-article-summary',
385	]
386	);
387
388	$this->add_responsive_control(
389	'box_border_radius',
390	[
391	'label' => __( 'Border Radius', 'betterdocs' ),
392	'type' => Controls_Manager::DIMENSIONS,
393	'size_units' => [ 'px', '%' ],
394	'selectors' => [
395	'{{WRAPPER}} .betterdocs-article-summary' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
396	],
397	]
398	);
399
400	$this->add_group_control(
401	Group_Control_Box_Shadow::get_type(),
402	[
403	'name' => 'box_shadow',
404	'label' => __( 'Box Shadow', 'betterdocs' ),
405	'selector' => '{{WRAPPER}} .betterdocs-article-summary',
406	]
407	);
408
409	$this->add_responsive_control(
410	'box_padding',
411	[
412	'label' => __( 'Padding', 'betterdocs' ),
413	'type' => Controls_Manager::DIMENSIONS,
414	'size_units' => [ 'px', 'em', '%' ],
415	'default' => [
416	'top' => 0,
417	'right' => 0,
418	'bottom' => 0,
419	'left' => 0,
420	'unit' => 'px',
421	],
422	'selectors' => [
423	'{{WRAPPER}} .betterdocs-article-summary' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
424	],
425	]
426	);
427
428	$this->add_responsive_control(
429	'box_margin',
430	[
431	'label' => __( 'Margin', 'betterdocs' ),
432	'type' => Controls_Manager::DIMENSIONS,
433	'size_units' => [ 'px', 'em', '%' ],
434	'default' => [
435	'top' => 0,
436	'right' => 0,
437	'bottom' => 0,
438	'left' => 0,
439	'unit' => 'px',
440	],
441	'selectors' => [
442	'{{WRAPPER}} .betterdocs-article-summary' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
443	],
444	]
445	);
446
447	$this->end_controls_section();
448	}
449
450	/**
451	* Render widget output
452	*/
453	protected function render() {
454	$settings = $this->get_settings_for_display();
455
456	// Always show in Elementor editor mode
457	if ( \Elementor\Plugin::$instance->editor->is_edit_mode() ) {
458	// Prepare template variables for editor
459	$template_vars = [
460	'post_id' => get_the_ID() ?: 1, // Use dummy ID in editor
461	'custom_title' => $settings['custom_title'] ?? '',
462	'show_title' => ( $settings['show_title'] ?? 'yes' ) === 'yes',
463	'widget_type' => 'elementor',
464	'is_editor_mode' => true,
465	];
466
467	// Load template
468	betterdocs()->views->get( 'templates/parts/article-summary', $template_vars );
469	return;
470	}
471
472	// For frontend, check if it's a docs post type
473	if ( get_post_type() !== 'docs' ) {
474	return;
475	}
476
477	// Check if AI Doc Summarizer feature is enabled
478	$article_summary = betterdocs()->article_summary;
479	if ( ! $article_summary \|\| ! $article_summary->is_enabled() ) {
480	return;
481	}
482
483	// Prepare template variables for frontend
484	$template_vars = [
485	'post_id' => get_the_ID(),
486	'custom_title' => $settings['custom_title'] ?? '',
487	'show_title' => ( $settings['show_title'] ?? 'yes' ) === 'yes',
488	'widget_type' => 'elementor',
489	'is_editor_mode' => false,
490	];
491
492	// Load template (template will check global setting)
493	betterdocs()->views->get( 'templates/parts/article-summary', $template_vars );
494	}
495
496	/**
497	* Render widget output in the editor
498	*/
499	protected function content_template() {
500	?>
501	<#
502	var titleText = settings.custom_title \|\| '<?php echo esc_js( __( 'Doc Summary', 'betterdocs' ) ); ?>';
503	var showTitle = settings.show_title === 'yes';
504	#>
505
506	<div class="betterdocs-article-summary betterdocs-elementor betterdocs-editor-mode" id="betterdocs-article-summary" data-post-id="1" data-post-type="docs">
507	<# if ( showTitle ) { #>
508	<div class="betterdocs-summary-header" id="betterdocs-summary-toggle">
509	<h3 class="betterdocs-summary-title">
510	<img src="<?php echo esc_url( betterdocs()->assets->icon( 'ai-summary-icon.svg' ) ); ?>" alt="<?php echo esc_attr__( 'AI Doc Summarizer', 'betterdocs' ); ?>" />
511	{{{ titleText }}}
512	<span class="betterdocs-summary-arrow">
513	<svg class="angle-icon angle-right" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="display: none;">
514	<path d="M6 9L12 15L18 9" stroke="#98A2B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
515	</svg>
516	<svg class="angle-icon angle-down" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
517	<path d="M18 15L12 9L6 15" stroke="#98A2B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
518	</svg>
519	</span>
520	</h3>
521	</div>
522	<# } #>
523
524	<div class="betterdocs-summary-content" id="betterdocs-summary-content" style="display: block;">
525	<div class="betterdocs-summary-loading" id="betterdocs-summary-loading" style="display: none;">
526	<img src="<?php echo esc_url( betterdocs()->assets->icon( 'thinking-icon.svg' ) ); ?>" alt="<?php echo esc_attr__( 'AI Doc Summarizer Thinking', 'betterdocs' ); ?>" />
527	<?php echo esc_html__( 'Thinking...', 'betterdocs' ); ?>
528	</div>
529	<div class="betterdocs-summary-text" id="betterdocs-summary-text">
530	<div class="betterdocs-summary-preview">
531	<p><?php echo esc_html__( 'This is a preview of the AI Doc Summarizer widget. The actual AI-generated summary will appear here when viewed on the frontend.', 'betterdocs' ); ?></p>
532	<p><?php echo esc_html__( 'The summary will be automatically generated based on the article content using OpenAI technology.', 'betterdocs' ); ?></p>
533	</div>
534	</div>
535	</div>
536	</div>
537
538	<style>
539	/* Always show Article Summary as expanded in Elementor editor */
540	.betterdocs-article-summary.betterdocs-editor-mode .betterdocs-summary-content {
541	display: block !important;
542	}
543	.betterdocs-article-summary.betterdocs-editor-mode .angle-icon.angle-right {
544	display: none !important;
545	}
546	.betterdocs-article-summary.betterdocs-editor-mode .angle-icon.angle-down {
547	display: block !important;
548	}
549	</style>
550	<?php
551	}
552	}
553