← All changes | includes/Core/WriteWithAI.php +856 -871 4.4.1 → 3.5.3 View file →

		@@ -1,78 +1,76 @@
1	1	<?php
2	2
3		- namespace WPDeveloper\BetterDocs\Core;
	3	+namespace WPDeveloper\BetterDocs\Core;
4	4
5		- use WPDeveloper\BetterDocs\Utils\Base;
6		- use WPDeveloper\BetterDocs\Core\Settings;
7		- use WPDeveloper\BetterDocs\Core\PostType;
	5	+use WPDeveloper\BetterDocs\Utils\Base;
	6	+use WPDeveloper\BetterDocs\Core\Settings;
	7	+use WPDeveloper\BetterDocs\Core\PostType;
8	8
9		- use WPDeveloper\BetterDocs\Utils\Helper;
	9	+use WPDeveloper\BetterDocs\Utils\Helper;
10	10
11		- class WriteWithAI extends Base {
12		-
	11	+class WriteWithAI extends Base
	12	+{
13	13	public $settings;
14	14
15		- public function __construct( Settings $settings ) {
	15	+ public function __construct(Settings $settings)
	16	+ {
16	17	$this->settings = $settings;
	18	+ // Get the post ID from the URL
	19	+ $post_id = isset($_GET['post']) ? intval($_GET['post']) : 0;
17	20
18		- if ( ! empty( $this->isEnabledWriteWithAI() ) ) {
19		- add_action( 'current_screen', array( $this, 'maybe_register_ai_autowrite_button' ) );
	21	+ if (!empty($_GET['post_type'])) {
	22	+ $post_type = $_GET['post_type'];
	23	+ } else if ($post_id > 0) {
	24	+ $post_type = get_post_type($post_id);
	25	+ } else {
	26	+ $post_type = '';
20	27	}
21		- add_action( 'wp_ajax_generate_openai_content', array( $this, 'generate_openai_content_callback' ) );
22		- }
23	28
24		- public function maybe_register_ai_autowrite_button() {
25		- if ( ! current_user_can( 'edit_posts' ) ) {
26		- return;
	29	+ if (!empty($this->isEnabledWriteWithAI()) && $post_type == 'docs') {
	30	+ add_action('admin_footer', [$this, 'ai_autowrite_button']);
27	31	}
28		-
29		- $screen = get_current_screen();
30		- if ( $screen && 'docs' === $screen->post_type && 'post' === $screen->base ) {
31		- add_action( 'admin_footer', array( $this, 'ai_autowrite_button' ) );
32		- }
	32	+ add_action('wp_ajax_generate_openai_content', [$this, 'generate_openai_content_callback']);
33	33	}
34	34
35		- public function isEnabledWriteWithAI() {
36		- $isEnableAutoWrite = $this->settings->get( 'enable_write_with_ai', true );
	35	+ public function isEnabledWriteWithAI()
	36	+ {
	37	+ $isEnableAutoWrite = $this->settings->get('enable_write_with_ai', true);
37	38	return $isEnableAutoWrite;
38	39	}
39	40
40		- public function isValidAPIKey( $apiKey ) {
41		- if ( empty( $apiKey ) ) {
42		- $api_response[ 'valid' ] = false;
43		- $api_response[ 'message' ] = 'Please Insert your <a href="/admin.php?page=betterdocs-settings">OpenAI API Key</a> to use this Write with AI feature.';
	41	+ public function isValidAPIKey($apiKey)
	42	+ {
	43	+ if (empty($apiKey)) {
	44	+ $api_response['valid'] = false;
	45	+ $api_response['message'] = 'Please Insert your <a href="/admin.php?page=betterdocs-settings">OpenAI API Key</a> to use this Write with AI feature.';
44	46
45	47	return $api_response;
46	48	}
47	49
48		- $ch = curl_init( 'https://api.openai.com/v1/engines' ); //phpcs:ignore WordPress.WP.AlternativeFunctions.curl_curl_init
49		- curl_setopt( $ch, CURLOPT_RETURNTRANSFER, true ); //phpcs:ignore WordPress.WP.AlternativeFunctions.curl_curl_setopt
50		- curl_setopt(
51		- $ch,
52		- CURLOPT_HTTPHEADER,
53		- array( //phpcs:ignore WordPress.WP.AlternativeFunctions.curl_curl_setopt
54		- 'Content-Type: application/json',
55		- 'Authorization: Bearer ' . $apiKey
56		- )
57		- );
	50	+ $ch = curl_init('https://api.openai.com/v1/engines');
	51	+ curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
	52	+ curl_setopt($ch, CURLOPT_HTTPHEADER, [
	53	+ 'Content-Type: application/json',
	54	+ 'Authorization: Bearer ' . $apiKey,
	55	+ ]);
58	56
59		- $api_response = array();
	57	+ $api_response = [];
60	58
61		- $response = curl_exec( $ch ); //phpcs:ignore WordPress.WP.AlternativeFunctions.curl_curl_exec
62		- $httpCode = curl_getinfo( $ch, CURLINFO_HTTP_CODE ); //phpcs:ignore WordPress.WP.AlternativeFunctions.curl_curl_getinfo
	59	+ $response = curl_exec($ch);
	60	+ $httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
63	61
64		- curl_close( $ch ); //phpcs:ignore WordPress.WP.AlternativeFunctions.curl_curl_close
	62	+ curl_close($ch);
65	63
66		- if ( 200 == $httpCode ) {
67		- $api_response[ 'valid' ] = true;
68		- $api_response[ 'message' ] = 'Valid API Key';
	64	+ if ($httpCode == 200) {
	65	+ $api_response['valid'] = true;
	66	+ $api_response['message'] = 'Valid API Key';
69	67	} else {
70		- $responseData = json_decode( $response, true );
	68	+ $responseData = json_decode($response, true);
71	69	// Access the message data (replace 'data' with the actual key used in the response)
72		- $messageData = $responseData[ 'error' ] ? $responseData[ 'error' ] : '';
73		- $api_response[ 'valid' ] = false;
74		- $api_response[ 'message' ] = $messageData[ 'message' ] ? $messageData[ 'message' ] : 'Invalid API Key';
	70	+ $messageData = $responseData['error'] ? $responseData['error'] : '';
	71	+ $api_response['valid'] = false;
	72	+ $api_response['message'] = $messageData['message'] ? $messageData['message'] : 'Invalid API Key';
75	73	}
76	74
77	75	// print_r($response);
78	76
		@@ -78,18 +76,20 @@
78	76
79	77	return $api_response;
80	78	}
81	79
82		- public function get_api_key() {
83		- $api_key = $this->settings->get( 'ai_autowrite_api_key', '' );
	80	+ public function get_api_key()
	81	+ {
	82	+ $api_key = $this->settings->get('ai_autowrite_api_key', '');
84	83	return $api_key;
85	84	}
86	85
87		- public function generate_openai_response( $prompt, $keywords ) {
	86	+
	87	+ public function generate_openai_response($prompt, $keywords)
	88	+ {
88	89	try {
89		- $api_key = $this->settings->get( 'ai_autowrite_api_key', '' );
90		- $max_tokens = $this->settings->get( 'ai_autowrite_max_token', 1500 );
91		- $model = $this->settings->get( 'write_with_ai_model', 'gpt-4o-mini' );
	90	+ $api_key = $this->settings->get('ai_autowrite_api_key', '');
	91	+ $max_tokens = $this->settings->get('ai_autowrite_max_token', 1500);
92	92
93	93	$api_endpoint = 'https://api.openai.com/v1/chat/completions'; // Update the endpoint based on OpenAI API version
94	94
95	95	$request_options = array(
		@@ -94,1022 +94,1007 @@
94	94
95	95	$request_options = array(
96	96	'headers' => array(
97	97	'Content-Type' => 'application/json',
98		- 'Authorization' => 'Bearer ' . $api_key
	98	+ 'Authorization' => 'Bearer ' . $api_key,
99	99	),
100		- 'body' => json_encode(
101		- array(
102		- 'model' => $model,
103		- 'messages' => array(
104		- array(
105		- 'role' => 'system',
106		- 'content' => 'You are a Senior Technical Writer specializing in comprehensive, high-quality documentation. Your goal is to write documentation that scores 100/100 on clarity, completeness, and structure.'
107		- ),
108		- array(
109		- 'role' => 'user',
110		- 'content' => $prompt
111		- )
112		- ),
113		- 'max_tokens' => $max_tokens
114		- )
115		- ),
116		- 'timeout' => 50
	100	+ 'body' => json_encode(array(
	101	+ 'model' => 'gpt-3.5-turbo', // Add the model parameter here
	102	+ 'messages' => array(
	103	+ array('role' => 'system', 'content' => 'You are a helpful assistant who writes documentation for users.'),
	104	+ array('role' => 'user', 'content' => $prompt),
	105	+ ),
	106	+ 'max_tokens' => $max_tokens,
	107	+
	108	+ )),
	109	+ 'timeout' => 50,
117	110	);
118	111
119		- $response = wp_remote_post( $api_endpoint, $request_options );
	112	+ $response = wp_remote_post($api_endpoint, $request_options);
120	113
121		- if ( is_wp_error( $response ) ) {
	114	+ if (is_wp_error($response)) {
122	115	return 'Error: ' . $response->get_error_message();
123	116	} else {
124		- $body = wp_remote_retrieve_body( $response );
	117	+ $body = wp_remote_retrieve_body($response);
125	118
126		- $data = json_decode( $body, true );
	119	+ $data = json_decode($body, true);
127	120
128		- if ( ! empty( $data[ 'error' ] ) ) {
129		- return $data[ 'error' ][ 'message' ];
	121	+ if (!empty($data['error'])) {
	122	+ return $data['error']['message'];
130	123	}
131	124
132		- return $data[ 'choices' ][ 0 ][ 'message' ][ 'content' ]; // Update this line to get the assistant's message
	125	+ return $data['choices'][0]['message']['content']; // Update this line to get the assistant's message
133	126	}
134		- } catch ( Exception $error ) {
	127	+ } catch (Exception $error) {
135	128	return 'Error: ' . $error->getMessage();
136	129	}
137	130	}
138	131
139		- public function generate_openai_content_callback() {
140		- if ( ! current_user_can( 'edit_posts' ) ) {
141		- wp_send_json_error( 'Unauthorized' );
142		- wp_die();
143		- }
144	132
	133	+
	134	+ public function generate_openai_content_callback()
	135	+ {
145	136	// Verify the nonce
146		- if ( ! isset( $_POST[ 'ai_nonce' ] ) || ! wp_verify_nonce( $_POST[ 'ai_nonce' ], 'generate_openai_content_nonce' ) ) { //phpcs:ignore
147		- wp_send_json_error( 'Invalid nonce' );
	137	+ if (!isset($_POST['ai_nonce']) || !wp_verify_nonce($_POST['ai_nonce'], 'generate_openai_content_nonce')) {
	138	+ wp_send_json_error('Invalid nonce');
148	139	wp_die();
149	140	}
150	141
151		- $prompt = sanitize_text_field( $_POST[ 'prompt' ] ); //phpcs:ignore
	142	+ $prompt = sanitize_text_field($_POST['prompt']);
152	143	// $num_of_sections = sanitize_text_field($_POST['numOfSections']);
153	144	// $num_of_paragraphs = sanitize_text_field($_POST['numOfParagraphs']);
154		- $keywords = sanitize_text_field( $_POST[ 'keywords' ] ); //phpcs:ignore
	145	+ $keywords = sanitize_text_field($_POST['keywords']);
155	146
156		- $ai_instance = new WriteWithAI( $this->settings );
	147	+ $ai_instance = new WriteWithAI($this->settings);
157	148
158		- $generated_content = $ai_instance->generate_openai_response( $prompt, $keywords );
	149	+ $generated_content = $ai_instance->generate_openai_response($prompt, $keywords);
159	150
160	151	// Send the generated content as the AJAX response
161		- wp_send_json_success( $generated_content );
	152	+ wp_send_json_success($generated_content);
162	153	wp_die();
163	154	}
164	155
165		- public function ai_autowrite_button() {
	156	+ public function ai_autowrite_button()
	157	+ {
166	158
167	159	?>
168		- <script>
169		- var docsTitle;
	160	+ <script>
	161	+ var docsTitle;
170	162
171		- function responseMessage(message) {
172		- return `<div class="warning-message">
173		- <span class="dashicons dashicons-warning"></span>
174		- <div class="footer-message">
175		- ${message}
176		- </div>
177		- </div>`;
178		- }
	163	+ function responseMessage(message) {
	164	+ return `<div class="warning-message">
	165	+ <span class="dashicons dashicons-warning"></span>
	166	+ <div class="footer-message">
	167	+ ${message}
	168	+ </div>
	169	+ </div>`;
	170	+ }
179	171
180		- function generateArticle(e) {
	172	+ function generateArticle(e) {
181	173
182	174
183		- const title = document.getElementById('betterdocs-ai-title').value;
184		- const keywords = document.getElementById('betterdocs-ai-keyword').value;
185		- // const sectionOptions = document.getElementById('bd-autowrtite-content-section');
186		- // const numOfSections = sectionOptions.options[sectionOptions.selectedIndex].value;
	175	+ const title = document.getElementById('betterdocs-ai-title').value;
	176	+ const keywords = document.getElementById('betterdocs-ai-keyword').value;
	177	+ // const sectionOptions = document.getElementById('bd-autowrtite-content-section');
	178	+ // const numOfSections = sectionOptions.options[sectionOptions.selectedIndex].value;
187	179
188		- // const paragraphOptions = document.getElementById('bd-autowrtite-content-paragraph');
189		- // const numOfParagraphs = paragraphOptions.options[paragraphOptions.selectedIndex].value;
	180	+ // const paragraphOptions = document.getElementById('bd-autowrtite-content-paragraph');
	181	+ // const numOfParagraphs = paragraphOptions.options[paragraphOptions.selectedIndex].value;
190	182
191		- const contentTextArea = document.getElementById('betterdocs-ai-content');
192		- const docGenerateBtnTxt = document.querySelector('.generate-btn span');
	183	+ const contentTextArea = document.getElementById('betterdocs-ai-content');
	184	+ const docGenerateBtnTxt = document.querySelector('.generate-btn span');
193	185
194		- // Add nonce value to the data being sent
195		- const nonce = document.querySelector('input[name="ai_nonce"]').value;
196		- const isOverwrite = document.getElementById('betterdocs-ai-checkbox').checked;
197		- const generateDocLabel = "<?php echo esc_html__( 'Generate Doc', 'betterdocs' ); ?>";
198		- const reGenerateDocLabel = "<?php echo esc_html__( 'Regenerate Doc', 'betterdocs' ); ?>";
	186	+ // Add nonce value to the data being sent
	187	+ const nonce = document.querySelector('input[name="ai_nonce"]').value;
	188	+ const isOverwrite = document.getElementById('betterdocs-ai-checkbox').checked;
	189	+ const generateDocLabel = "<?php echo esc_html__('Generate Doc', 'betterdocs'); ?>";
	190	+ const reGenerateDocLabel = "<?php echo esc_html__('Regenerate Doc', 'betterdocs'); ?>";
199	191
200	192
201		- // contentTextArea.value = `Write an article about ${title} in English. The article is organized by the following exact ${numOfSections} headings. Write exact ${numOfParagraphs} number of paragraphs per heading.${keywords} Use Markdown for formatting. Add an introduction and a conclusion. Style: creative. Tone: cheerful.`;
	193	+ // contentTextArea.value = `Write an article about ${title} in English. The article is organized by the following exact ${numOfSections} headings. Write exact ${numOfParagraphs} number of paragraphs per heading.${keywords} Use Markdown for formatting. Add an introduction and a conclusion. Style: creative. Tone: cheerful.`;
202	194
203	195
204		- // Check if the title is not empty
205		- if (title.trim() !== '' && keywords.trim() !== '') {
206		- e.preventDefault();
	196	+ // Check if the title is not empty
	197	+ if (title.trim() !== '' && keywords.trim() !== '') {
	198	+ e.preventDefault();
207	199
208		- if (!jQuery('#betterdocs-ai-error-message').parent().hasClass('hidden')) {
209		- jQuery('#betterdocs-ai-error-message').parent().addClass('hidden');
210		- }
	200	+ if (!jQuery('#betterdocs-ai-error-message').parent().hasClass('hidden')) {
	201	+ jQuery('#betterdocs-ai-error-message').parent().addClass('hidden');
	202	+ }
211	203
212		- docGenerateBtnTxt.innerHTML = "<?php echo esc_html__( 'Generating...', 'betterdocs' ); ?>";
213		- jQuery('.generate-btn').prop('disabled', true);
	204	+ docGenerateBtnTxt.innerHTML = "<?php echo esc_html__('Generating...', 'betterdocs'); ?>";
	205	+ jQuery('.generate-btn').prop('disabled', true);
214	206
215		- jQuery.post({
216		- url: ajaxurl, // Make sure ajaxurl is defined in your script
217		- type: 'POST',
218		- data: {
219		- action: 'generate_openai_content',
220		- prompt: document.querySelector('#betterdocs-ai-content').value,
221		- // numOfSections: numOfSections,
222		- // numOfParagraphs: numOfParagraphs,
223		- keywords: keywords,
224		- ai_nonce: nonce, // Pass the nonce value
225		- },
226		- success: function(response) {
227		- // Update the content in the textarea
	207	+ jQuery.post({
	208	+ url: ajaxurl, // Make sure ajaxurl is defined in your script
	209	+ type: 'POST',
	210	+ data: {
	211	+ action: 'generate_openai_content',
	212	+ prompt: document.querySelector('#betterdocs-ai-content').value,
	213	+ // numOfSections: numOfSections,
	214	+ // numOfParagraphs: numOfParagraphs,
	215	+ keywords: keywords,
	216	+ ai_nonce: nonce, // Pass the nonce value
	217	+ },
	218	+ success: function(response) {
	219	+ // Update the content in the textarea
228	220
229		- if (response.success && (typeof response.data === 'string')) {
230		- docGenerateBtnTxt.innerHTML = "<?php echo esc_html__( 'Generated', 'betterdocs' ); ?>";
231		- setTimeout(() => {
232		- insertContentToEditor(title, response.data, isOverwrite, keywords);
233		- docGenerateBtnTxt.innerHTML = reGenerateDocLabel;
234		- jQuery('.generate-btn').removeAttr('disabled');
235		- }, 2000);
236		- } else {
237		- // alert(response.data.message);
238		- jQuery('#betterdocs-ai-error-message').parent().removeClass('hidden');
239		- jQuery('#betterdocs-ai-error-message').html(responseMessage(response.data.message));
240		- docGenerateBtnTxt.innerHTML = generateDocLabel;
241		- jQuery('.generate-btn').removeAttr('disabled');
	221	+ if (response.success && (typeof response.data === 'string')) {
	222	+ docGenerateBtnTxt.innerHTML = "<?php echo esc_html__('Generated', 'betterdocs'); ?>";
	223	+ setTimeout(() => {
	224	+ insertContentToEditor(title, response.data, isOverwrite, keywords);
	225	+ docGenerateBtnTxt.innerHTML = reGenerateDocLabel;
	226	+ jQuery('.generate-btn').removeAttr('disabled');
242	227
243		- }
244		- },
245		- error: function(error) {
246		- console.error(error);
247		- },
248		- });
	228	+ // console.log(jQuery('.betterdocs-ai-autowrite-form-container').data('new-doc-page'));
249	229
250		- }
251		- }
	230	+ // if(jQuery('.betterdocs-ai-autowrite-form-container')?.data('new-doc-page')) {
	231	+ // docGenerateBtnTxt.innerHTML = reGenerateDocLabel;
	232	+ // }
	233	+ }, 2000);
	234	+ } else {
	235	+ // alert(response.data.message);
	236	+ jQuery('#betterdocs-ai-error-message').parent().removeClass('hidden');
	237	+ jQuery('#betterdocs-ai-error-message').html(responseMessage(response.data.message));
	238	+ docGenerateBtnTxt.innerHTML = generateDocLabel;
	239	+ jQuery('.generate-btn').removeAttr('disabled');
252	240
253		- // Function to update the textarea
254		- function updateTextarea() {
255		- const title = document.getElementById('betterdocs-ai-title').value;
256		- const keywords = document.getElementById('betterdocs-ai-keyword').value;
257		- const sectionOptions = document.getElementById('bd-autowrtite-content-section');
258		- let language = 'English';
	241	+ }
	242	+ },
	243	+ error: function(error) {
	244	+ console.error(error);
	245	+ },
	246	+ });
259	247
260		- if (language === '') {
261		- language = 'English';
262		- }
	248	+ }
	249	+ }
263	250
264		- let keywordsText = keywords !== '' ? ` and incorporate the keywords: ${keywords}` : '';
	251	+ // Function to update the textarea
	252	+ function updateTextarea() {
	253	+ const title = document.getElementById('betterdocs-ai-title').value;
	254	+ const keywords = document.getElementById('betterdocs-ai-keyword').value;
	255	+ const sectionOptions = document.getElementById('bd-autowrtite-content-section');
	256	+ let language = 'English';
265	257
266		- const contentTextArea = document.getElementById('betterdocs-ai-content');
	258	+ if (language === '') {
	259	+ language = 'English';
	260	+ }
267	261
268		- if (!jQuery('#betterdocs-ai-error-message').parent().hasClass('hidden')) {
269		- jQuery('#betterdocs-ai-error-message').parent().addClass('hidden');
270		- }
	262	+ let keywordsText = keywords !== '' ? ` and incorporate the keywords: ${keywords}` : '';
271	263
272		- contentTextArea.value = `Generate a documentation using HTML heading tags for '${title}'. Include relevant details on ${keywords} in the documentation. Ensure all content is enclosed with <p> tags and apply a <span> tag with the class 'highlight' to headings and topic tags for emphasis.`;
273		- }
	264	+ const contentTextArea = document.getElementById('betterdocs-ai-content');
274	265
275		- function convertMarkdownToHTML(markdownContent) {
276		- // Simple Markdown to HTML conversion (you may need to enhance this based on your needs)
277		- const htmlContent = markdownContent
278		- .replace(/^# (.+)$/gm, '<h1>$1</h1>')
279		- .replace(/^## (.+)$/gm, '<h2>$1</h2>')
280		- .replace(/^### (.+)$/gm, '<h3>$1</h3>')
281		- .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
282		- .replace(/\*(.+?)\*/g, '<em>$1</em>');
	266	+ if (!jQuery('#betterdocs-ai-error-message').parent().hasClass('hidden')) {
	267	+ jQuery('#betterdocs-ai-error-message').parent().addClass('hidden');
	268	+ }
283	269
284		- return htmlContent;
285		- }
	270	+ contentTextArea.value = `Generate a documentation using HTML heading tags for '${title}'. Include relevant details on ${keywords} in the documentation. Ensure all content is enclosed with <p> tags and apply a <span> tag with the class 'highlight' to headings and topic tags for emphasis.`;
	271	+ }
286	272
287		- function replaceHeadingTitle(content, title, overviewTitle) {
288		- let regex = new RegExp(title, 'g');
289		- let updateContent = content.replace(regex, overviewTitle);
290		- return updateContent;
291		- }
	273	+ function convertMarkdownToHTML(markdownContent) {
	274	+ // Simple Markdown to HTML conversion (you may need to enhance this based on your needs)
	275	+ const htmlContent = markdownContent
	276	+ .replace(/^# (.+)$/gm, '<h1>$1</h1>')
	277	+ .replace(/^## (.+)$/gm, '<h2>$1</h2>')
	278	+ .replace(/^### (.+)$/gm, '<h3>$1</h3>')
	279	+ .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
	280	+ .replace(/\*(.+?)\*/g, '<em>$1</em>');
292	281
293		- function removeFirstHeading(htmlString) {
294		- var newDiv = document.createElement('div');
295		- newDiv.innerHTML = htmlString;
296		- var firstHeading = newDiv.querySelector('h1');
297		- if (firstHeading) {
298		- firstHeading.parentNode.removeChild(firstHeading);
299		- }
300		- return newDiv.innerHTML;
301		- }
	282	+ return htmlContent;
	283	+ }
302	284
	285	+ function replaceHeadingTitle(content, title, overviewTitle) {
	286	+ let regex = new RegExp(title, 'g');
	287	+ let updateContent = content.replace(regex, overviewTitle);
	288	+ return updateContent;
	289	+ }
303	290
304		- function wrapwithHeighlight(inputString, keywords) {
305		- let modifiedString = inputString.replace(/<(h\d)(.*?)>(.*?)<\/\1>/g, '<$1$2><span class="highlight">$3</span></$1>');
	291	+ function removeFirstHeading(htmlString) {
	292	+ var newDiv = document.createElement('div');
	293	+ newDiv.innerHTML = htmlString;
	294	+ var firstHeading = newDiv.querySelector('h1');
	295	+ if (firstHeading) {
	296	+ firstHeading.parentNode.removeChild(firstHeading);
	297	+ }
	298	+ return newDiv.innerHTML;
	299	+ }
306	300
307		- const keywordArray = keywords.split(',').map(keyword => keyword.trim());
308	301
309		- keywordArray.forEach(keyword => {
310		- modifiedString = modifiedString.replace(new RegExp(`\\b(${keyword})\\b`, 'gi'), '<span class="highlight">$1</span>');
311		- });
	302	+ function wrapwithHeighlight(inputString, keywords) {
	303	+ let modifiedString = inputString.replace(/<(h\d)(.*?)>(.*?)<\/\1>/g, '<$1$2><span class="highlight">$3</span></$1>');
312	304
313		- return modifiedString;
314		- }
	305	+ const keywordArray = keywords.split(',').map(keyword => keyword.trim());
315	306
316		- function getBodyContent(htmlString) {
317		- var match = htmlString.match(/<body[^>]*>([\s\S]*?)<\/body>/i);
	307	+ keywordArray.forEach(keyword => {
	308	+ modifiedString = modifiedString.replace(new RegExp(`\\b(${keyword})\\b`, 'gi'), '<span class="highlight">$1</span>');
	309	+ });
318	310
319		- // Check if match is null before accessing match[1]
320		- if (match) {
321		- return match[1].replace(/<p>\s+/g, '<p>');
322		- } else {
323		- return '';
324		- }
325		- }
	311	+ return modifiedString;
	312	+ }
326	313
	314	+ function getBodyContent(htmlString) {
	315	+ var match = htmlString.match(/<body[^>]*>([\s\S]*?)<\/body>/i);
327	316
	317	+ console.log(match[1].replace(/<p>\s+/g, '<p>'));
328	318
329		- function insertContentToEditor(title, htmlContent, isOverwrite, keywords) {
	319	+ return match ? match[1].replace(/<p>\s+/g, '<p>') : '';
	320	+ }
330	321
331		- const {
332		- dispatch,
333		- select
334		- } = wp.data;
335	322
336		- htmlContent = getBodyContent(htmlContent);
337		- htmlContent = removeFirstHeading(htmlContent);
338		- htmlContent = wrapwithHeighlight(htmlContent, keywords);
339		- const isPostContent = `<?php echo isset( $_GET[ 'post' ] ) ? esc_html( get_the_content( $_GET[ 'post' ] ) ) : ''; // phpcs:ignore ?>`;
	323	+ function insertContentToEditor(title, htmlContent, isOverwrite, keywords) {
340	324
341		- const blocks = wp.blocks.rawHandler({
342		- HTML: htmlContent
343		- });
	325	+ const {
	326	+ dispatch,
	327	+ select
	328	+ } = wp.data;
344	329
345		- dispatch('core/editor').editPost({
346		- title: title,
347		- });
	330	+ htmlContent = getBodyContent(htmlContent);
	331	+ htmlContent = removeFirstHeading(htmlContent);
	332	+ htmlContent = wrapwithHeighlight(htmlContent, keywords);
	333	+ const isPostContent = `<?php echo isset($_GET['post']) ? get_the_content($_GET['post']) : ''; ?>`;
348	334
349		- const selectedBlockClientId = select('core/block-editor').getSelectedBlockClientId();
	335	+ const blocks = wp.blocks.rawHandler({
	336	+ HTML: htmlContent
	337	+ });
350	338
351		- const allBlocks = select('core/block-editor').getBlocks();
	339	+ dispatch('core/editor').editPost({
	340	+ title: title,
	341	+ });
352	342
353		- if (isOverwrite || isPostContent === '') {
	343	+ const selectedBlockClientId = select('core/block-editor').getSelectedBlockClientId();
354	344
355		- allBlocks.forEach((block) => {
356		- dispatch('core/block-editor').removeBlock(block.clientId);
357		- });
358		- dispatch('core/block-editor').insertBlocks(blocks);
	345	+ const allBlocks = select('core/block-editor').getBlocks();
359	346
360		- } else if (selectedBlockClientId) {
361		- const selectedIndex = select('core/block-editor').getBlockIndex(selectedBlockClientId);
362		- dispatch('core/block-editor').insertBlocks(blocks, selectedIndex + 1);
363		- } else {
364		- dispatch('core/block-editor').insertBlocks(blocks);
365		- }
	347	+ if (isOverwrite || isPostContent === '') {
366	348
367		- closeWriteWithAIForm('afterInsertContent');
368		- }
	349	+ allBlocks.forEach((block) => {
	350	+ dispatch('core/block-editor').removeBlock(block.clientId);
	351	+ });
	352	+ dispatch('core/block-editor').insertBlocks(blocks);
369	353
370		- function closeWriteWithAIForm(after) {
371		- jQuery('.betterdocs-ai-autowrite-form-container').addClass('hidden');
372		- jQuery('#betterdocs-ai-autowrite-form-container-overlay').addClass('hidden');
373		- jQuery('.betterdocs-ai-button').addClass('regenerate-btn');
374		- }
	354	+ } else if (selectedBlockClientId) {
	355	+ const selectedIndex = select('core/block-editor').getBlockIndex(selectedBlockClientId);
	356	+ dispatch('core/block-editor').insertBlocks(blocks, selectedIndex + 1);
	357	+ } else {
	358	+ dispatch('core/block-editor').insertBlocks(blocks);
	359	+ }
375	360
	361	+ closeWriteWithAIForm('afterInsertContent');
	362	+ }
376	363
377		- document.addEventListener('DOMContentLoaded', function() {
	364	+ function closeWriteWithAIForm(after) {
	365	+ jQuery('.betterdocs-ai-autowrite-form-container').addClass('hidden');
	366	+ jQuery('#betterdocs-ai-autowrite-form-container-overlay').addClass('hidden');
	367	+ jQuery('.betterdocs-ai-button').addClass('regenerate-btn');
	368	+ }
378	369
379		- // Subscribe to changes in the editor state
380		- let previousDocsTitle = '';
381	370
382		- wp.data.subscribe(() => {
383		- // Get the updated post title
384		- // const docsTitle = wp.data.select('core/editor').getEditedPostAttribute('title');
	371	+ document.addEventListener('DOMContentLoaded', function() {
385	372
386		- const docsTitle = wp.data.select('core/editor').getEditedPostAttribute('title');
	373	+ // Subscribe to changes in the editor state
	374	+ let previousDocsTitle = '';
387	375
388		- // Check if the title has changed
389		- if (docsTitle !== previousDocsTitle) {
390		- let currentKeywords = jQuery('#betterdocs-ai-keyword').val();
391		- if (!currentKeywords) {
392		- currentKeywords = '{Documentation Keywords}';
393		- }
394		- const currentPrompt = `Generate documentation using HTML heading tags for '${docsTitle?docsTitle:'{Documentation title}'}'. Include relevant details on ${currentKeywords} in the documentation. Ensure all content is enclosed with <p> tags and apply a <span> tag with the class 'highlight' to headings and topic tags for emphasis.`;
395		- jQuery('#betterdocs-ai-content').val(currentPrompt);
	376	+ wp.data.subscribe(() => {
	377	+ // Get the updated post title
	378	+ // const docsTitle = wp.data.select('core/editor').getEditedPostAttribute('title');
396	379
397		- jQuery('#betterdocs-ai-title').val(docsTitle);
	380	+ const docsTitle = wp.data.select('core/editor').getEditedPostAttribute('title');
398	381
399		- previousDocsTitle = docsTitle;
400		- }
	382	+ // Check if the title has changed
	383	+ if (docsTitle !== previousDocsTitle) {
	384	+ let currentKeywords = jQuery('#betterdocs-ai-keyword').val();
	385	+ if (!currentKeywords) {
	386	+ currentKeywords = '{Documentation Keywords}';
	387	+ }
	388	+ const currentPrompt = `Generate documentation using HTML heading tags for '${docsTitle?docsTitle:'{Documentation title}'}'. Include relevant details on ${currentKeywords} in the documentation. Ensure all content is enclosed with <p> tags and apply a <span> tag with the class 'highlight' to headings and topic tags for emphasis.`;
	389	+ jQuery('#betterdocs-ai-content').val(currentPrompt);
401	390
	391	+ jQuery('#betterdocs-ai-title').val(docsTitle);
402	392
403		- });
404		- });
	393	+ previousDocsTitle = docsTitle;
	394	+ }
405	395
406	396
407		- // This example assumes that this code is executed when your script is loaded.
408		- // You may want to place it within the appropriate context in your application.
	397	+ });
	398	+ });
409	399
410	400
411		- function writeWithAIForm() {
	401	+ // This example assumes that this code is executed when your script is loaded.
	402	+ // You may want to place it within the appropriate context in your application.
412	403
413		- let title = `<?php echo isset( $_GET[ 'post' ] ) ? esc_html( get_the_title( $_GET[ 'post' ] ) ) : ''; // phpcs:ignore ?>`;
414		- if (docsTitle) {
415		- title = docsTitle;
416		- }
417	404
418		- const promtTitle = `<?php echo isset( $_GET[ 'post' ] ) ? esc_html( get_the_title( $_GET[ 'post' ] ) ) : '{Documentation Title}'; // phpcs:ignore ?>`;
419		- const titlePlaceholder = "<?php echo esc_attr__( 'Enter a descriptive title for your documentation.', 'betterdocs' ); ?>";
420		- const keywords = "<?php echo esc_attr( '{Documentation Keywords}' ); ?>";
421		- const keywordsPlaceholder = "<?php echo esc_attr__( 'Add keywords to generate precise & relevant documentation (comma-separated).', 'betterdocs' ); ?>";
422		- const language = "<?php echo esc_attr( 'English' ); ?>";
423		- const titleLabel = "<?php echo esc_html__( 'Documentation Title:', 'betterdocs' ); ?>";
424		- const keywordLabel = "<?php echo esc_html__( 'Keywords:', 'betterdocs' ); ?>";
425		- const secLabel = "<?php echo esc_html__( '# of Sections:', 'betterdocs' ); ?>";
426		- const paraLabel = "<?php echo esc_html__( '# of Paragraph Per Section: ', 'betterdocs' ); ?>";
427		- const langLabel = "<?php echo esc_html__( 'Language:', 'betterdocs' ); ?>";
428		- const promtLabel = "<?php echo esc_html__( 'Prompt:', 'betterdocs' ); ?>";
429		- const promtBtnLabel = "<?php echo esc_html__( 'Generate Prompt', 'betterdocs' ); ?>";
430		- let promtArticleLabel = "<?php echo esc_html__( 'Generate Doc', 'betterdocs' ); ?>";
431		- const checkboxLabel = "<?php echo esc_html__( 'Overwrite your existing Doc:', 'betterdocs' ); ?>";
432		- const nonce = "<?php echo esc_attr( wp_create_nonce( 'generate_openai_content_nonce' ) ); ?>";
	405	+ function writeWithAIForm() {
433	406
434		- <?php
435		- $is_valid = $this->get_api_key();
436		- $disable_field = 'disabled-input-field';
437		- if ( $this->get_api_key() ) {
438		- $disable_field = '';
439		- }
440		- ?>
	407	+ let title = `<?php echo isset($_GET['post']) ? get_the_title($_GET['post']) : ''; ?>`;
	408	+ if (docsTitle) {
	409	+ title = docsTitle;
	410	+ }
441	411
442		- let hiddenClass = 'hidden';
443		- let newDocPageAtt = 'data-new-doc-page="true"';
444		- const isPostContent = `<?php echo isset( $_GET[ 'post' ] ) ? esc_html( get_the_content( $_GET[ 'post' ] ) ) : ''; // phpcs:ignore ?>`;
	412	+ const promtTitle = `<?php echo isset($_GET['post']) ? get_the_title($_GET['post']) : '{Documentation Title}'; ?>`;
	413	+ const titlePlaceholder = "<?php echo esc_attr__('Enter a descriptive title for your documentation.', 'betterdocs'); ?>";
	414	+ const keywords = "<?php echo esc_attr('{Documentation Keywords}'); ?>";
	415	+ const keywordsPlaceholder = "<?php echo esc_attr__('Add keywords to generate precise & relevant documentation (comma-separated).', 'betterdocs'); ?>";
	416	+ const language = "<?php echo esc_attr('English'); ?>";
	417	+ const titleLabel = "<?php echo esc_html__('Documentation Title:', 'betterdocs'); ?>";
	418	+ const keywordLabel = "<?php echo esc_html__('Keywords:', 'betterdocs'); ?>";
	419	+ const secLabel = "<?php echo esc_html__('# of Sections:', 'betterdocs'); ?>";
	420	+ const paraLabel = "<?php echo esc_html__('# of Paragraph Per Section: ', 'betterdocs'); ?>";
	421	+ const langLabel = "<?php echo esc_html__('Language:', 'betterdocs'); ?>";
	422	+ const promtLabel = "<?php echo esc_html__('Prompt:', 'betterdocs'); ?>";
	423	+ const promtBtnLabel = "<?php echo esc_html__('Generate Prompt', 'betterdocs'); ?>";
	424	+ let promtArticleLabel = "<?php echo esc_html__('Generate Doc', 'betterdocs'); ?>";
	425	+ const checkboxLabel = "<?php echo esc_html__('Overwrite your existing Doc:', 'betterdocs'); ?>";
	426	+ const nonce = "<?php echo esc_attr(wp_create_nonce('generate_openai_content_nonce')); ?>";
445	427
446		- if (isPostContent !== '') {
447		- hiddenClass = '';
448		- newDocPageAtt = '';
449		- }
	428	+ <?php $is_valid = $this->get_api_key();
	429	+ $disable_field = 'disabled-input-field';
	430	+ if ($this->get_api_key()) {
	431	+ $disable_field = '';
	432	+ }
	433	+ ?>
450	434
	435	+ let hiddenClass = 'hidden';
	436	+ let newDocPageAtt = 'data-new-doc-page="true"';
	437	+ const isPostContent = `<?php echo isset($_GET['post']) ? get_the_content($_GET['post']) : ''; ?>`;
451	438
452		- // const prompt = `Make a knowledge base article with html heading tags about [${title}] in [${language}]. Here is some topic to describe the article: [${keywords}]. and wrap the content with p tag also add a span tag with a class named 'highlight' to all the heading and topic tags in the article.`;
	439	+ if (isPostContent !== '') {
	440	+ hiddenClass = '';
	441	+ newDocPageAtt = '';
	442	+ }
453	443
454		- // const prompt = `Create a details knowledge base article in [${language}] about [${title}] with html heading tags. Here is some topic to describe the article: [${keywords}]. And wrap the content with p tag also add a span tag with a class named 'highlight' to all the heading and topic tags in the article.`;
455	444
456		- const prompt = `Generate a documentation using HTML heading tags for '${promtTitle}'. Include relevant details on ${keywords} in the documentation. Ensure all content is enclosed with <p> tags and apply a <span> tag with the class 'highlight' to headings and topic tags for emphasis.`;
	445	+ // const prompt = `Make a knowledge base article with html heading tags about [${title}] in [${language}]. Here is some topic to describe the article: [${keywords}]. and wrap the content with p tag also add a span tag with a class named 'highlight' to all the heading and topic tags in the article.`;
457	446
458		- const aiIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="21" height="20" viewBox="0 0 21 20" fill="none">
459		- <g clip-path="url(#clip0_2460_1729)">
460		- <path d="M10.3956 18.8608L6.10991 19.2322L6.48134 14.9465L15.3956 6.08936C15.5287 5.95329 15.6876 5.84518 15.863 5.77137C16.0384 5.69756 16.2268 5.65954 16.4171 5.65954C16.6074 5.65954 16.7957 5.69756 16.9711 5.77137C17.1466 5.84518 17.3054 5.95329 17.4385 6.08936L19.2528 7.91793C19.3865 8.05083 19.4926 8.20886 19.565 8.38293C19.6375 8.55701 19.6747 8.74368 19.6747 8.93221C19.6747 9.12075 19.6375 9.30742 19.565 9.48149C19.4926 9.65557 19.3865 9.8136 19.2528 9.9465L10.3956 18.8608ZM1.7042 5.67507C1.20277 5.58793 1.20277 4.86793 1.7042 4.78079C2.59203 4.62626 3.41374 4.21085 4.06456 3.58751C4.71538 2.96417 5.16583 2.16113 5.35848 1.28079L5.38848 1.14221C5.49705 0.647929 6.20277 0.643643 6.31705 1.13936L6.35277 1.29936C6.55248 2.17579 7.0067 2.97367 7.65837 3.59281C8.31005 4.21195 9.13013 4.62475 10.0156 4.77936C10.5199 4.86507 10.5199 5.58936 10.0156 5.67793C9.13005 5.83218 8.3098 6.24465 7.65787 6.86354C7.00594 7.48243 6.5514 8.28014 6.35134 9.1565L6.3142 9.31793C6.20134 9.81221 5.49563 9.80936 5.38705 9.31364L5.35848 9.17507C5.16564 8.29433 4.71476 7.49102 4.06339 6.86764C3.41202 6.24426 2.58969 5.82908 1.70134 5.67507H1.7042Z" stroke="white" stroke-width="1.42857" stroke-linecap="round" stroke-linejoin="round"/>
461		- </g>
462		- <defs>
463		- <clipPath id="clip0_2460_1729">
464		- <rect width="20" height="20" fill="white" transform="translate(0.5)"/>
465		- </clipPath>
466		- </defs>
467		- </svg>`;
	447	+ // const prompt = `Create a details knowledge base article in [${language}] about [${title}] with html heading tags. Here is some topic to describe the article: [${keywords}]. And wrap the content with p tag also add a span tag with a class named 'highlight' to all the heading and topic tags in the article.`;
468	448
	449	+ const prompt = `Generate a documentation using HTML heading tags for '${promtTitle}'. Include relevant details on ${keywords} in the documentation. Ensure all content is enclosed with <p> tags and apply a <span> tag with the class 'highlight' to headings and topic tags for emphasis.`;
469	450
	451	+ const aiIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="21" height="20" viewBox="0 0 21 20" fill="none">
	452	+ <g clip-path="url(#clip0_2460_1729)">
	453	+ <path d="M10.3956 18.8608L6.10991 19.2322L6.48134 14.9465L15.3956 6.08936C15.5287 5.95329 15.6876 5.84518 15.863 5.77137C16.0384 5.69756 16.2268 5.65954 16.4171 5.65954C16.6074 5.65954 16.7957 5.69756 16.9711 5.77137C17.1466 5.84518 17.3054 5.95329 17.4385 6.08936L19.2528 7.91793C19.3865 8.05083 19.4926 8.20886 19.565 8.38293C19.6375 8.55701 19.6747 8.74368 19.6747 8.93221C19.6747 9.12075 19.6375 9.30742 19.565 9.48149C19.4926 9.65557 19.3865 9.8136 19.2528 9.9465L10.3956 18.8608ZM1.7042 5.67507C1.20277 5.58793 1.20277 4.86793 1.7042 4.78079C2.59203 4.62626 3.41374 4.21085 4.06456 3.58751C4.71538 2.96417 5.16583 2.16113 5.35848 1.28079L5.38848 1.14221C5.49705 0.647929 6.20277 0.643643 6.31705 1.13936L6.35277 1.29936C6.55248 2.17579 7.0067 2.97367 7.65837 3.59281C8.31005 4.21195 9.13013 4.62475 10.0156 4.77936C10.5199 4.86507 10.5199 5.58936 10.0156 5.67793C9.13005 5.83218 8.3098 6.24465 7.65787 6.86354C7.00594 7.48243 6.5514 8.28014 6.35134 9.1565L6.3142 9.31793C6.20134 9.81221 5.49563 9.80936 5.38705 9.31364L5.35848 9.17507C5.16564 8.29433 4.71476 7.49102 4.06339 6.86764C3.41202 6.24426 2.58969 5.82908 1.70134 5.67507H1.7042Z" stroke="white" stroke-width="1.42857" stroke-linecap="round" stroke-linejoin="round"/>
	454	+ </g>
	455	+ <defs>
	456	+ <clipPath id="clip0_2460_1729">
	457	+ <rect width="20" height="20" fill="white" transform="translate(0.5)"/>
	458	+ </clipPath>
	459	+ </defs>
	460	+ </svg>`;
470	461
471		- return `
472		- <div class="betterdocs-ai-autowrite-form-container hidden" ${newDocPageAtt}>
473		- <div class="betterdocs-ai-autowrite-form-content">
474		- <div class="betterdocs-ai-autowrite-top-part">
475		- <div class="autowrite-heading">
476		- <span class="autowrite-icon">
477		- <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
478		- <g clip-path="url(#clip0_2453_20882)">
479		- <path d="M15.8322 30.1765L8.97508 30.7708L9.56936 23.9136L23.8322 9.74219C24.0451 9.52448 24.2993 9.3515 24.58 9.23341C24.8606 9.11531 25.162 9.05447 25.4665 9.05447C25.771 9.05447 26.0724 9.11531 26.3531 9.23341C26.6337 9.3515 26.8879 9.52448 27.1008 9.74219L30.0037 12.6679C30.2176 12.8805 30.3874 13.1334 30.5033 13.4119C30.6192 13.6904 30.6788 13.9891 30.6788 14.2908C30.6788 14.5924 30.6192 14.8911 30.5033 15.1696C30.3874 15.4481 30.2176 15.701 30.0037 15.9136L15.8322 30.1765ZM1.92593 9.07933C1.12365 8.9399 1.12365 7.7879 1.92593 7.64848C3.34647 7.40124 4.6612 6.73658 5.70251 5.73923C6.74382 4.74188 7.46455 3.45703 7.77279 2.04848L7.82079 1.82676C7.99451 1.03591 9.12365 1.02905 9.30651 1.82219L9.36365 2.07819C9.68319 3.48048 10.4099 4.75709 11.4526 5.74772C12.4953 6.73834 13.8074 7.39881 15.2242 7.64619C16.0311 7.78333 16.0311 8.94219 15.2242 9.0839C13.8073 9.33071 12.4949 9.99066 11.4518 10.9809C10.4087 11.9711 9.68146 13.2474 9.36136 14.6496L9.30193 14.9079C9.12136 15.6988 7.99222 15.6942 7.81851 14.901L7.77279 14.6793C7.46424 13.2702 6.74284 11.9849 5.70064 10.9874C4.65845 9.99003 3.34273 9.32574 1.92136 9.07933H1.92593Z" stroke="#E31B54" stroke-width="2.28571" stroke-linecap="round" stroke-linejoin="round"/>
480		- </g>
481		- <defs>
482		- <clipPath id="clip0_2453_20882">
483		- <rect width="32" height="32" fill="white"/>
484		- </clipPath>
485		- </defs>
486		- </svg>
487		- </span>
488		- <h1><?php echo esc_html__( 'Write Documentation with BetterDocs AI', 'betterdocs' ); ?></h1>
489	462
490		- </div>
491		- <div class="autowrite-subheadding">
492		- <p><?php echo esc_html__( 'Generate documentation effortlessly with BetterDocs AI. Simply input your doc title, keywords, prompt and let the system automatically generate comprehensive documentation tailored to your needs.', 'betterdocs' ); ?></p>
493		- </div>
494	463
495		- <?php if ( empty( $this->get_api_key() ) ): ?>
496		- <div id="betterdocs-ai-message">
497		- <div class="warning-message">
498		- <span class="dashicons dashicons-warning"></span>
499		- <div>
500		- <?php echo wp_kses_post( 'Please Insert your <a target="_blank" href="' . esc_url( admin_url( 'admin.php?page=betterdocs-settings&tab=tab-betterdocs-ai' ) ) . '">OpenAI API Key</a> to use this Write with AI feature.', 'betterdocs' ); ?>
501		- </div>
502		- </div>
	464	+ return `
	465	+ <div class="betterdocs-ai-autowrite-form-container hidden" ${newDocPageAtt}>
	466	+ <div class="betterdocs-ai-autowrite-form-content">
	467	+ <div class="betterdocs-ai-autowrite-top-part">
	468	+ <div class="autowrite-heading">
	469	+ <span class="autowrite-icon">
	470	+ <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
	471	+ <g clip-path="url(#clip0_2453_20882)">
	472	+ <path d="M15.8322 30.1765L8.97508 30.7708L9.56936 23.9136L23.8322 9.74219C24.0451 9.52448 24.2993 9.3515 24.58 9.23341C24.8606 9.11531 25.162 9.05447 25.4665 9.05447C25.771 9.05447 26.0724 9.11531 26.3531 9.23341C26.6337 9.3515 26.8879 9.52448 27.1008 9.74219L30.0037 12.6679C30.2176 12.8805 30.3874 13.1334 30.5033 13.4119C30.6192 13.6904 30.6788 13.9891 30.6788 14.2908C30.6788 14.5924 30.6192 14.8911 30.5033 15.1696C30.3874 15.4481 30.2176 15.701 30.0037 15.9136L15.8322 30.1765ZM1.92593 9.07933C1.12365 8.9399 1.12365 7.7879 1.92593 7.64848C3.34647 7.40124 4.6612 6.73658 5.70251 5.73923C6.74382 4.74188 7.46455 3.45703 7.77279 2.04848L7.82079 1.82676C7.99451 1.03591 9.12365 1.02905 9.30651 1.82219L9.36365 2.07819C9.68319 3.48048 10.4099 4.75709 11.4526 5.74772C12.4953 6.73834 13.8074 7.39881 15.2242 7.64619C16.0311 7.78333 16.0311 8.94219 15.2242 9.0839C13.8073 9.33071 12.4949 9.99066 11.4518 10.9809C10.4087 11.9711 9.68146 13.2474 9.36136 14.6496L9.30193 14.9079C9.12136 15.6988 7.99222 15.6942 7.81851 14.901L7.77279 14.6793C7.46424 13.2702 6.74284 11.9849 5.70064 10.9874C4.65845 9.99003 3.34273 9.32574 1.92136 9.07933H1.92593Z" stroke="#E31B54" stroke-width="2.28571" stroke-linecap="round" stroke-linejoin="round"/>
	473	+ </g>
	474	+ <defs>
	475	+ <clipPath id="clip0_2453_20882">
	476	+ <rect width="32" height="32" fill="white"/>
	477	+ </clipPath>
	478	+ </defs>
	479	+ </svg>
	480	+ </span>
	481	+ <h1><?php echo esc_html__('Write Documentation with BetterDocs AI', 'betterdocs'); ?></h1>
503	482
504		- </div>
505		- <?php endif; ?>
	483	+ </div>
	484	+ <div class="autowrite-subheadding">
	485	+ <p><?php echo esc_html__('Generate documentation effortlessly with BetterDocs AI. Simply input your doc title, keywords, prompt and let the system automatically generate comprehensive documentation tailored to your needs.', 'betterdocs'); ?></p>
	486	+ </div>
506	487
507		- <div class="form-group hidden">
508		- <div id="betterdocs-ai-error-message"></div>
509		- </div>
	488	+ <?php if (empty($this->get_api_key())) : ?>
	489	+ <div id="betterdocs-ai-message">
	490	+ <div class="warning-message">
	491	+ <span class="dashicons dashicons-warning"></span>
	492	+ <div>
	493	+ <?php echo wp_kses_post('Please Insert your <a target="_blank" href="' . esc_url(admin_url('admin.php?page=betterdocs-settings&tab=tab-ai-autowrite')) . '">OpenAI API Key</a> to use this Write with AI feature.', 'betterdocs'); ?>
	494	+ </div>
	495	+ </div>
510	496
511		- </div>
512		- <form id="betterdocs-ai-form" class="<?php echo esc_attr( $disable_field ); ?>">
513		- <div class="form-inner-content">
514		- <div class="form-group">
515		- <label for="betterdocs-ai-title">${titleLabel}</label>
516		- <input type="text" placeholder="${titlePlaceholder}" id="betterdocs-ai-title" name="betterdocs-ai-title" required value="${title}">
517		- </div>
	497	+ </div>
	498	+ <?php endif; ?>
518	499
519		- <div class="form-group">
520		- <label for="betterdocs-ai-keyword">${keywordLabel}</label>
521		- <input type="text" placeholder="${keywordsPlaceholder}" id="betterdocs-ai-keyword" name="betterdocs-ai-keyword" required>
522		- </div>
	500	+ <div class="form-group hidden">
	501	+ <div id="betterdocs-ai-error-message"></div>
	502	+ </div>
	503	+
	504	+ </div>
	505	+ <form id="betterdocs-ai-form" class="<?php echo esc_attr($disable_field); ?>">
	506	+ <div class="form-inner-content">
	507	+ <div class="form-group">
	508	+ <label for="betterdocs-ai-title">${titleLabel}</label>
	509	+ <input type="text" placeholder="${titlePlaceholder}" id="betterdocs-ai-title" name="betterdocs-ai-title" required value="${title}">
	510	+ </div>
523	511
524		- <div class="form-group prompt-field">
525		- <label for="betterdocs-ai-content">${promtLabel}</label>
526		- <textarea id="betterdocs-ai-content" name="betterdocs-ai-content" rows="6" required>${prompt}</textarea>
527		- <p class="input-description"><?php echo esc_html__( 'Ensure you include a clear and detailed prompt to receive the desired output. Follow the guidelines provided for the best results.', 'betterdocs' ); ?></p>
528		- </div>
529		- <div class="betterdocs-ai-checkbox-field ${hiddenClass}">
530		- <div class="form-group">
531		- <div class="checkbox-field-label">
532		- <label for="betterdocs-ai-checkbox">${checkboxLabel}</label>
533		- <p class="input-description"><?php echo esc_html__( 'Overwrite the existing doc with the AI Generated Content. If Disabled, new AI Generated content will be added in the section you are currently editing.', 'betterdocs' ); ?></p>
534		- </div>
	512	+ <div class="form-group">
	513	+ <label for="betterdocs-ai-keyword">${keywordLabel}</label>
	514	+ <input type="text" placeholder="${keywordsPlaceholder}" id="betterdocs-ai-keyword" name="betterdocs-ai-keyword" required>
	515	+ </div>
535	516
536		- <div class="checkbox-input-field">
537		- <input type="checkbox" id="betterdocs-ai-checkbox" name="betterdocs-ai-checkbox" data-overwrite="false">
538		- <label for="betterdocs-ai-checkbox" class="toggle-label"></label>
539		- </div>
540		- </div>
541		- </div>
	517	+ <div class="form-group prompt-field">
	518	+ <label for="betterdocs-ai-content">${promtLabel}</label>
	519	+ <textarea id="betterdocs-ai-content" name="betterdocs-ai-content" rows="6" required>${prompt}</textarea>
	520	+ <p class="input-description"><?php echo esc_html__('Ensure you include a clear and detailed prompt to receive the desired output. Follow the guidelines provided for the best results.', 'betterdocs'); ?></p>
	521	+ </div>
	522	+ <div class="betterdocs-ai-checkbox-field ${hiddenClass}">
	523	+ <div class="form-group">
	524	+ <div class="checkbox-field-label">
	525	+ <label for="betterdocs-ai-checkbox">${checkboxLabel}</label>
	526	+ <p class="input-description"><?php echo esc_html__('Overwrite the existing doc with the AI Generated Content. If Disabled, new AI Generated content will be added in the section you are currently editing.', 'betterdocs'); ?></p>
	527	+ </div>
	528	+
	529	+ <div class="checkbox-input-field">
	530	+ <input type="checkbox" id="betterdocs-ai-checkbox" name="betterdocs-ai-checkbox" data-overwrite="false">
	531	+ <label for="betterdocs-ai-checkbox" class="toggle-label"></label>
	532	+ </div>
	533	+ </div>
	534	+ </div>
542	535
543		- <input type="hidden" name="ai_nonce" value="${nonce}" />
544		- </div>
545		- <div class="generate-button-container">
546		- <button type="submit" class="generate-btn" onclick="generateArticle(event)">
547		- ${aiIcon} <span>${promtArticleLabel}</span>
548		- </button>
549		- </div>
550		- </form>
551		- </div>
	536	+ <input type="hidden" name="ai_nonce" value="${nonce}" />
	537	+ </div>
	538	+ <div class="generate-button-container">
	539	+ <button type="submit" class="generate-btn" onclick="generateArticle(event)">
	540	+ ${aiIcon} <span>${promtArticleLabel}</span>
	541	+ </button>
	542	+ </div>
	543	+ </form>
	544	+ </div>
552	545
553		- <div class="bd-close-button" onclick="closeWriteWithAIForm('afterClosedClicked')">✕</div>
554		- </div>
	546	+ <div class="bd-close-button" onclick="closeWriteWithAIForm('afterClosedClicked')">✕</div>
	547	+ </div>
	548	+
	549	+ <div id="betterdocs-ai-autowrite-form-container-overlay" class="hidden"></div>
	550	+ `;
	551	+ }
555	552
556		- <div id="betterdocs-ai-autowrite-form-container-overlay" class="hidden"></div>
557		- `;
558		- }
	553	+ jQuery(document).on('click', '.regenerate-btn', function() {
	554	+ jQuery('.betterdocs-ai-autowrite-form-container').removeClass('hidden');
	555	+ jQuery('#betterdocs-ai-autowrite-form-container-overlay').removeClass('hidden');
	556	+ });
559	557
560		- jQuery(document).on('click', '.regenerate-btn', function() {
561		- jQuery('.betterdocs-ai-autowrite-form-container').removeClass('hidden');
562		- jQuery('#betterdocs-ai-autowrite-form-container-overlay').removeClass('hidden');
563		- });
	558	+ jQuery(document).ready(function($) {
	559	+ // Check if we are in the Edit Post screen
	560	+ if ($('.block-editor-page').length > 0) {
	561	+ const bdAIButton = $(`<div class="betterdocs-ai-button-container">
	562	+ <button class="betterdocs-ai-button">
	563	+ <img src="<?php echo esc_url(BETTERDOCS_ABSURL . 'assets/admin/images/betterdocs-icon-white.png'); ?>" alt="<?php echo esc_attr__('betterdocs icon', 'embedpress'); ?>" />
	564	+ <span><?php echo esc_html__('Write with AI', 'embedpress'); ?></span>
	565	+ </button>
	566	+ </div>`);
	567	+ const closeBtn = $('bd-close-button');
564	568
565		- jQuery(document).ready(function($) {
566		- // Check if we are in the Edit Post screen
	569	+ const formHtml = writeWithAIForm();
	570	+ $(formHtml).addClass('hidden');
567	571
568		- if ($('.block-editor-page').length > 0) {
	572	+ $(document).on('click', '.betterdocs-ai-button', function() {
	573	+ $('.betterdocs-ai-autowrite-form-container').removeClass('hidden');
	574	+ $('#betterdocs-ai-autowrite-form-container-overlay').removeClass('hidden');
	575	+ });
569	576
570		- const bdAIButton = $(`<div class="betterdocs-ai-button-container">
571		- <button class="betterdocs-ai-button">
572		- <img src="<?php echo esc_url( BETTERDOCS_ABSURL . 'assets/admin/images/betterdocs-icon-white.png' ); ?>" alt="<?php echo esc_attr__( 'betterdocs icon', 'betterdocs' ); ?>" />
573		- <span><?php echo esc_html__( 'Write with AI', 'betterdocs' ); ?></span>
574		- </button>
575		- </div>`);
	577	+ // $(document).on('click', '.betterdocs-ai-button', function() {
	578	+ if ($('.betterdocs-ai-autowrite-form-container').length < 1) {
	579	+ $('body').append(formHtml);
576	580
	581	+ // Add event listeners to input elements
	582	+ document.getElementById('betterdocs-ai-title').addEventListener('input', updateTextarea);
	583	+ document.getElementById('betterdocs-ai-keyword').addEventListener('input', updateTextarea);
	584	+ // document.getElementById('bd-autowrtite-content-section').addEventListener('change', updateTextarea);
	585	+ // document.getElementById('bd-autowrtite-content-paragraph').addEventListener('change', updateTextarea);
	586	+ // document.getElementById('betterdocs-ai-language').addEventListener('input', updateTextarea);
	587	+ }
	588	+ // });
	589	+ const btn = document.createElement('button');
	590	+ wp.data.subscribe(function() {
	591	+ setTimeout(() => {
	592	+ if ($('.edit-post-header__settings').length > 0) {
	593	+ $('.edit-post-header__settings').prepend(bdAIButton);
	594	+ }
	595	+ }, 1);
	596	+ });
	597	+ }
577	598
578		- const closeBtn = $('bd-close-button');
	599	+ $(document).on('click', '#betterdocs-ai-autowrite-form-container-overlay', function() {
	600	+ closeWriteWithAIForm();
	601	+ });
	602	+ });
	603	+ </script>
579	604
580		- const formHtml = writeWithAIForm();
581		- $(formHtml).addClass('hidden');
	605	+ <style>
	606	+ .hidden {
	607	+ display: none !important;
	608	+ }
582	609
583		- $(document).on('click', '.betterdocs-ai-button', function() {
584		- $('.betterdocs-ai-autowrite-form-container').removeClass('hidden');
585		- $('#betterdocs-ai-autowrite-form-container-overlay').removeClass('hidden');
586		- });
	610	+ .disabled-input-field input,
	611	+ .disabled-input-field textarea,
	612	+ .disabled-input-field button,
	613	+ .disabled-input-field label {
	614	+ pointer-events: none;
	615	+ opacity: 0.6;
	616	+ }
587	617
588		- // $(document).on('click', '.betterdocs-ai-button', function() {
589		- if ($('.betterdocs-ai-autowrite-form-container').length < 1) {
590		- $('body').append(formHtml);
	618	+ .disabled-input-field label {
	619	+ opacity: 1;
	620	+ }
591	621
592		- // Add event listeners to input elements
593		- document.getElementById('betterdocs-ai-title').addEventListener('input', updateTextarea);
594		- document.getElementById('betterdocs-ai-keyword').addEventListener('input', updateTextarea);
595		- // document.getElementById('bd-autowrtite-content-section').addEventListener('change', updateTextarea);
596		- // document.getElementById('bd-autowrtite-content-paragraph').addEventListener('change', updateTextarea);
597		- // document.getElementById('betterdocs-ai-language').addEventListener('input', updateTextarea);
598		- }
599		- // });
600		- const btn = document.createElement('button');
601		- wp.data.subscribe(function() {
602		- setTimeout(() => {
603		- if ($('.edit-post-header__settings').length > 0) {
604		- $('.edit-post-header__settings').prepend(bdAIButton);
605		- } else if ($('.editor-header__settings').length > 0) {
606		- $('.editor-header__settings').prepend(bdAIButton);
607		- }
	622	+ .betterdocs-ai-button-container {
	623	+ margin-left: 10px;
	624	+ }
608	625
609		- }, 1);
610		- });
611		- }
	626	+ .autowrite-icon {
	627	+ display: flex;
	628	+ align-items: center;
	629	+ width: 55px;
	630	+ height: 55px;
	631	+ background: #FFE4E8;
	632	+ justify-content: center;
	633	+ border-radius: 50px;
	634	+ }
612	635
613		- $(document).on('click', '#betterdocs-ai-autowrite-form-container-overlay', function() {
614		- closeWriteWithAIForm();
615		- });
616		- });
617		- </script>
	636	+ .autowrite-icon svg {
	637	+ width: 28px;
	638	+ height: 28px;
	639	+ }
618	640
619		- <style>
620		- .hidden {
621		- display: none !important;
622		- }
	641	+ .autowrite-heading {
	642	+ display: flex;
	643	+ gap: 10px;
	644	+ align-items: center;
	645	+ }
623	646
624		- .disabled-input-field input,
625		- .disabled-input-field textarea,
626		- .disabled-input-field button,
627		- .disabled-input-field label {
628		- pointer-events: none;
629		- opacity: 0.6;
630		- }
	647	+ .autowrite-heading h1 {
	648	+ color: #1D2939;
	649	+ font-family: 'IBM Plex Sans', sans-serif;
	650	+ font-size: 24px;
	651	+ font-style: normal;
	652	+ font-weight: 500;
	653	+ line-height: normal;
	654	+ margin: 0;
	655	+ }
631	656
632		- .disabled-input-field label {
633		- opacity: 1;
634		- }
	657	+ .autowrite-heading p,
	658	+ form#betterdocs-ai-form p {
	659	+ margin: 0;
	660	+ margin-bottom: 24px;
	661	+ }
635	662
636		- .betterdocs-ai-button-container {
637		- margin-left: 10px;
638		- white-space: nowrap;
639		- max-width: 145px;
640		- }
	663	+ .autowrite-subheadding p {
	664	+ font-family: 'IBM Plex Sans', sans-serif;
	665	+ font-size: 14px;
	666	+ }
641	667
642		- .autowrite-icon {
643		- display: flex;
644		- align-items: center;
645		- width: 55px;
646		- height: 55px;
647		- background: #FFE4E8;
648		- justify-content: center;
649		- border-radius: 50px;
650		- }
	668	+ .prompt-field .input-description {
	669	+ margin: 0 !important;
	670	+ }
651	671
652		- .autowrite-icon svg {
653		- width: 28px;
654		- height: 28px;
655		- }
	672	+ .autowrite-heading p {
	673	+ color: #475467;
	674	+ font-family: 'IBM Plex Sans', sans-serif;
	675	+ font-size: 16px;
	676	+ font-style: normal;
	677	+ font-weight: 400;
	678	+ }
656	679
657		- .autowrite-heading {
658		- display: flex;
659		- gap: 10px;
660		- align-items: center;
661		- }
	680	+ .betterdocs-ai-button {
	681	+ background: #00B884;
	682	+ border: 1px solid transparent;
	683	+ color: #fff;
	684	+ box-shadow: none;
	685	+ font-size: 12px;
	686	+ margin-right: 8px;
	687	+ padding: 0px 15px;
	688	+ cursor: pointer;
	689	+ border-radius: 3px;
	690	+ height: 38px;
	691	+ display: flex;
	692	+ align-items: center;
	693	+ justify-content: space-between;
	694	+ gap: 10px;
	695	+ }
662	696
663		- .autowrite-heading h1 {
664		- color: #1D2939;
665		- font-family: 'IBM Plex Sans', sans-serif;
666		- font-size: 24px;
667		- font-style: normal;
668		- font-weight: 500;
669		- line-height: normal;
670		- margin: 0;
671		- }
	697	+ .betterdocs-ai-button img {
	698	+ width: 20px;
	699	+ height: 20px;
	700	+ }
672	701
673		- .autowrite-heading p,
674		- form#betterdocs-ai-form p {
675		- margin: 0;
676		- margin-bottom: 24px;
677		- }
	702	+ .betterdocs-ai-autowrite-form-container {
	703	+ position: fixed;
	704	+ top: 50%;
	705	+ left: 50%;
	706	+ transform: translate(-50%, -50%);
	707	+ z-index: 100001;
	708	+ width: 650px;
	709	+ margin: 0 auto;
	710	+ background-color: #fff;
	711	+ border-radius: 5px;
	712	+ font-family: 'IBM Plex Sans', sans-serif;
	713	+ /* max-height: 600px; */
	714	+ max-height: 750px;
	715	+ max-width: 100%;
	716	+ }
678	717
679		- .autowrite-subheadding p {
680		- font-family: 'IBM Plex Sans', sans-serif;
681		- font-size: 14px;
682		- }
	718	+ .betterdocs-ai-autowrite-form-content {
	719	+ background-color: #fff;
	720	+ padding: 20px 0px;
	721	+ border-radius: 5px;
	722	+ padding-bottom: 0;
	723	+ overflow: auto;
	724	+ /* max-height: 700px; */
	725	+ height: 100%;
683	726
684		- .prompt-field .input-description {
685		- margin: 0 !important;
686		- }
	727	+ }
687	728
688		- .autowrite-heading p {
689		- color: #475467;
690		- font-family: 'IBM Plex Sans', sans-serif;
691		- font-size: 16px;
692		- font-style: normal;
693		- font-weight: 400;
694		- }
	729	+ .betterdocs-ai-autowrite-top-part {
	730	+ /* padding-bottom: 20px; */
	731	+ border-bottom: 1px solid #ddd;
	732	+ /* margin-bottom: 20px; */
	733	+ padding: 0 40px;
	734	+ }
695	735
696		- .betterdocs-ai-button {
697		- background: #00B884;
698		- border: 1px solid transparent;
699		- color: #fff;
700		- box-shadow: none;
701		- font-size: 12px;
702		- margin-right: 8px;
703		- padding: 0px 15px;
704		- cursor: pointer;
705		- border-radius: 3px;
706		- height: 38px;
707		- display: flex;
708		- align-items: center;
709		- justify-content: space-between;
710		- gap: 10px;
711		- width: 135px;
712		- }
	736	+ #betterdocs-ai-form {
	737	+ display: flex;
	738	+ flex-direction: column;
	739	+ /* height: 100%; */
	740	+ overflow: hidden;
	741	+ }
713	742
714		- .betterdocs-ai-button img {
715		- width: 20px;
716		- height: 20px;
717		- }
	743	+ .form-inner-content {
	744	+ overflow: auto;
	745	+ height: 100%;
	746	+ max-height: 435px;
	747	+ /* max-height: 330px; */
	748	+ padding: 0 40px;
	749	+ }
718	750
719		- .betterdocs-ai-autowrite-form-container {
720		- position: fixed;
721		- top: 50%;
722		- left: 50%;
723		- transform: translate(-50%, -50%);
724		- z-index: 100001;
725		- width: 650px;
726		- margin: 0 auto;
727		- background-color: #fff;
728		- border-radius: 5px;
729		- font-family: 'IBM Plex Sans', sans-serif;
730		- /* max-height: 600px; */
731		- max-height: 750px;
732		- max-width: 100%;
733		- }
	751	+ .form-inner-content>.form-group {
	752	+ margin-top: 20px;
	753	+ }
734	754
735		- .betterdocs-ai-autowrite-form-content {
736		- background-color: #fff;
737		- padding: 20px 0px;
738		- border-radius: 5px;
739		- padding-bottom: 0;
740		- overflow: auto;
741		- /* max-height: 700px; */
742		- height: 100%;
743	755
744		- }
	756	+ #betterdocs-ai-autowrite-form-container-overlay {
	757	+ position: fixed;
	758	+ top: 0;
	759	+ right: 0;
	760	+ bottom: 0;
	761	+ left: 0;
	762	+ background-color: rgba(0, 0, 0, .7);
	763	+ z-index: 100000;
	764	+ }
745	765
746		- .betterdocs-ai-autowrite-top-part {
747		- /* padding-bottom: 20px; */
748		- border-bottom: 1px solid #ddd;
749		- /* margin-bottom: 20px; */
750		- padding: 0 40px;
751		- }
752	766
753		- #betterdocs-ai-form {
754		- display: flex;
755		- flex-direction: column;
756		- /* height: 100%; */
757		- overflow: hidden;
758		- }
759	767
760		- .form-inner-content {
761		- overflow: auto;
762		- height: 100%;
763		- max-height: 435px;
764		- /* max-height: 330px; */
765		- padding: 0 40px;
766		- }
	768	+ #betterdocs-ai-form {
	769	+ display: flex;
	770	+ flex-direction: column;
	771	+ }
767	772
768		- .form-inner-content>.form-group {
769		- margin-top: 20px;
770		- }
	773	+ #betterdocs-ai-form .form-group {
	774	+ margin-bottom: 24px;
	775	+ }
771	776
	777	+ #betterdocs-ai-form .bd-aiform-flex {
	778	+ display: flex;
	779	+ justify-content: space-between;
	780	+ }
772	781
773		- #betterdocs-ai-autowrite-form-container-overlay {
774		- position: fixed;
775		- top: 0;
776		- right: 0;
777		- bottom: 0;
778		- left: 0;
779		- background-color: rgba(0, 0, 0, .7);
780		- z-index: 100000;
781		- }
	782	+ #betterdocs-ai-form label {
	783	+ font-weight: 600;
	784	+ margin-bottom: 5px;
	785	+ display: block;
	786	+ font-size: 14px;
	787	+ line-height: 20px;
	788	+ }
782	789
	790	+ select#bd-autowrtite-content-section,
	791	+ #bd-autowrtite-content-paragraph,
	792	+ #betterdocs-ai-language {
	793	+ width: 150px !important;
	794	+ height: 40px;
	795	+ }
783	796
	797	+ #betterdocs-ai-form input[type="text"],
	798	+ #betterdocs-ai-form textarea {
	799	+ width: 100%;
	800	+ padding: 8px;
	801	+ box-sizing: border-box;
	802	+ border: 1px solid #D0D5DD;
	803	+ border-radius: 4px;
	804	+ color: #667085;
	805	+ font-weight: 400;
	806	+ }
784	807
785		- #betterdocs-ai-form {
786		- display: flex;
787		- flex-direction: column;
788		- }
	808	+ /* Override autofill text color */
	809	+ #betterdocs-ai-form input:-webkit-autofill {
	810	+ -webkit-text-fill-color: #667085 !important;
	811	+ }
789	812
790		- #betterdocs-ai-form .form-group {
791		- margin-bottom: 24px;
792		- }
	813	+ #betterdocs-ai-form input::placeholder {
	814	+ color: #acb2bf;
	815	+ }
793	816
794		- #betterdocs-ai-form .bd-aiform-flex {
795		- display: flex;
796		- justify-content: space-between;
797		- }
	817	+ #betterdocs-ai-form textarea {
	818	+ color: #667085;
	819	+ }
798	820
799		- #betterdocs-ai-form label {
800		- font-weight: 600;
801		- margin-bottom: 5px;
802		- display: block;
803		- font-size: 14px;
804		- line-height: 20px;
805		- }
	821	+ #betterdocs-ai-form input:focus,
	822	+ #betterdocs-ai-form textarea:focus {
	823	+ box-shadow: none;
	824	+ }
806	825
807		- select#bd-autowrtite-content-section,
808		- #bd-autowrtite-content-paragraph,
809		- #betterdocs-ai-language {
810		- width: 150px !important;
811		- height: 40px;
812		- }
	826	+ #betterdocs-ai-form textarea:focus {
	827	+ color: inherit;
	828	+ box-shadow: none;
813	829
814		- #betterdocs-ai-form input[type="text"],
815		- #betterdocs-ai-form textarea {
816		- width: 100%;
817		- padding: 8px;
818		- box-sizing: border-box;
819		- border: 1px solid #D0D5DD;
820		- border-radius: 4px;
821		- color: #667085;
822		- font-weight: 400;
823		- }
	830	+ }
824	831
825		- /* Override autofill text color */
826		- #betterdocs-ai-form input:-webkit-autofill {
827		- -webkit-text-fill-color: #667085 !important;
828		- }
829	832
830		- #betterdocs-ai-form input::placeholder {
831		- color: #acb2bf;
832		- }
	833	+ .generate-button-container {
	834	+ position: sticky;
	835	+ bottom: 0px;
	836	+ width: 100%;
	837	+ margin-left: 0;
	838	+ z-index: 999999 !important;
	839	+ padding: 20px 0;
	840	+ display: flex;
	841	+ justify-content: end;
	842	+ border-top: 1px solid #ddd;
	843	+ background: white;
	844	+ border-bottom-right-radius: 5px;
	845	+ border-bottom-left-radius: 5px;
	846	+ }
833	847
834		- #betterdocs-ai-form textarea {
835		- color: #667085;
836		- }
	848	+ .generate-button-container button {
	849	+ display: flex;
	850	+ gap: 8px;
	851	+ align-items: center;
	852	+ justify-content: center;
	853	+ opacity: 1 !important;
	854	+ margin-right: 40px;
	855	+ }
837	856
838		- #betterdocs-ai-form input:focus,
839		- #betterdocs-ai-form textarea:focus {
840		- box-shadow: none;
841		- }
	857	+ .input-description {
	858	+ font-size: 14px;
	859	+ color: #667085;
	860	+ }
842	861
843		- #betterdocs-ai-form textarea:focus {
844		- color: inherit;
845		- box-shadow: none;
	862	+ .betterdocs-ai-checkbox-field .form-group {
	863	+ display: flex;
	864	+ align-items: start;
	865	+ /* gap: 200px; */
	866	+ justify-content: space-between;
	867	+ }
846	868
847		- }
	869	+ .betterdocs-ai-checkbox-field input {
	870	+ width: 20px;
	871	+ height: 20px;
	872	+ }
848	873
	874	+ /* Add this CSS to your existing stylesheet or create a new one */
849	875
850		- .generate-button-container {
851		- position: sticky;
852		- bottom: 0px;
853		- width: 100%;
854		- margin-left: 0;
855		- z-index: 999999 !important;
856		- padding: 20px 0;
857		- display: flex;
858		- justify-content: end;
859		- border-top: 1px solid #ddd;
860		- background: white;
861		- border-bottom-right-radius: 5px;
862		- border-bottom-left-radius: 5px;
863		- }
	876	+ .betterdocs-ai-checkbox-field {
	877	+ position: relative;
	878	+ font-size: 16px;
	879	+ /* Adjust font size as needed */
	880	+ }
864	881
865		- .generate-button-container button {
866		- display: flex;
867		- gap: 8px;
868		- align-items: center;
869		- justify-content: center;
870		- opacity: 1 !important;
871		- margin-right: 40px;
872		- }
	882	+ .betterdocs-ai-checkbox-field input[type=checkbox]:checked::before {
	883	+ padding: 2px;
	884	+ }
873	885
874		- .input-description {
875		- font-size: 14px;
876		- color: #667085;
877		- }
	886	+ .betterdocs-ai-checkbox-field input[type=checkbox] {
	887	+ border: 1px solid #00b884;
	888	+ }
878	889
879		- .betterdocs-ai-checkbox-field .form-group {
880		- display: flex;
881		- align-items: start;
882		- /* gap: 200px; */
883		- justify-content: space-between;
884		- }
	890	+ .betterdocs-ai-checkbox-field input[type=checkbox]:checked::before {
	891	+ content: '\2713';
	892	+ color: #00b884;
	893	+ }
885	894
886		- .betterdocs-ai-checkbox-field input {
887		- width: 20px;
888		- height: 20px;
889		- }
	895	+ /* Change the default checkbox color */
	896	+ .betterdocs-ai-checkbox-field input[type="checkbox"]:hover {
	897	+ -webkit-appearance: none;
	898	+ /* WebKit/Blink Browsers */
	899	+ -moz-appearance: none;
	900	+ /* Firefox */
	901	+ appearance: none;
	902	+ border: 1px solid #00b884;
	903	+ /* Set the height of the checkbox */
	904	+ /* Optional: Round the corners */
	905	+ outline: none;
	906	+ /* Remove the default outline */
	907	+ }
890	908
891		- /* Add this CSS to your existing stylesheet or create a new one */
	909	+ /* Style the checked state */
	910	+ .betterdocs-ai-checkbox-field input[type="checkbox"]:checked {
	911	+ /* Set the background color when checked */
	912	+ border: 1px solid #00b884;
	913	+ /* Set the border color when checked */
	914	+ }
892	915
893		- .betterdocs-ai-checkbox-field {
894		- position: relative;
895		- font-size: 16px;
896		- /* Adjust font size as needed */
897		- }
	916	+ .checkbox-field-label {
	917	+ width: calc(100% - 150px);
	918	+ }
898	919
899		- .betterdocs-ai-checkbox-field input[type=checkbox]:checked::before {
900		- padding: 2px;
901		- }
	920	+ .checkbox-field-label p {
	921	+ margin: 0 !important;
	922	+ }
902	923
903		- .betterdocs-ai-checkbox-field input[type=checkbox] {
904		- border: 1px solid #00b884;
905		- }
	924	+ .checkbox-input-field {
	925	+ width: 300px;
	926	+ text-align: right;
	927	+ }
906	928
907		- .betterdocs-ai-checkbox-field input[type=checkbox]:checked::before {
908		- content: '\2713';
909		- color: #00b884;
910		- }
	929	+ .checkbox-input-field {
	930	+ position: relative;
	931	+ display: inline-block;
	932	+ width: 60px;
	933	+ height: 34px;
	934	+ }
911	935
912		- /* Change the default checkbox color */
913		- .betterdocs-ai-checkbox-field input[type="checkbox"]:hover {
914		- -webkit-appearance: none;
915		- /* WebKit/Blink Browsers */
916		- -moz-appearance: none;
917		- /* Firefox */
918		- appearance: none;
919		- border: 1px solid #00b884;
920		- /* Set the height of the checkbox */
921		- /* Optional: Round the corners */
922		- outline: none;
923		- /* Remove the default outline */
924		- }
	936	+ .checkbox-input-field input {
	937	+ display: none;
	938	+ }
925	939
926		- /* Style the checked state */
927		- .betterdocs-ai-checkbox-field input[type="checkbox"]:checked {
928		- /* Set the background color when checked */
929		- border: 1px solid #00b884;
930		- /* Set the border color when checked */
931		- }
	940	+ .toggle-label {
	941	+ position: absolute;
	942	+ cursor: pointer;
	943	+ top: 0;
	944	+ left: 0;
	945	+ right: 0;
	946	+ bottom: 0;
	947	+ background-color: #ccc;
	948	+ border-radius: 34px;
	949	+ transition: background-color 0.3s;
	950	+ scale: .9;
	951	+ width: 52px;
	952	+ height: 26px;
	953	+ }
932	954
933		- .checkbox-field-label {
934		- width: calc(100% - 150px);
935		- }
936	955
937		- .checkbox-field-label p {
938		- margin: 0 !important;
939		- }
	956	+ .checkbox-input-field input:checked+.toggle-label {
	957	+ background-color: #00b884;
	958	+ }
940	959
941		- .checkbox-input-field {
942		- width: 300px;
943		- text-align: right;
944		- }
	960	+ .toggle-label:after {
	961	+ content: "";
	962	+ position: absolute;
	963	+ height: 22px;
	964	+ width: 22px;
	965	+ left: 2px;
	966	+ bottom: 2px;
	967	+ background-color: white;
	968	+ border-radius: 50%;
	969	+ transition: transform 0.3s;
	970	+ }
945	971
946		- .checkbox-input-field {
947		- position: relative;
948		- display: inline-block;
949		- width: 60px;
950		- height: 34px;
951		- }
	972	+ .checkbox-input-field input:checked+.toggle-label:after {
	973	+ transform: translateX(26px);
	974	+ }
952	975
953		- .checkbox-input-field input {
954		- display: none;
955		- }
	976	+ .generate-btn,
	977	+ .prompt-btn,
	978	+ .keep-btn {
	979	+ background-color: #00b884;
	980	+ color: #fff;
	981	+ border: none;
	982	+ padding: 10px 15px;
	983	+ text-align: center;
	984	+ text-decoration: none;
	985	+ display: inline-block;
	986	+ font-size: 16px;
	987	+ cursor: pointer;
	988	+ border-radius: 4px;
	989	+ }
956	990
957		- .toggle-label {
958		- position: absolute;
959		- cursor: pointer;
960		- top: 0;
961		- left: 0;
962		- right: 0;
963		- bottom: 0;
964		- background-color: #ccc;
965		- border-radius: 34px;
966		- transition: background-color 0.3s;
967		- scale: .9;
968		- width: 52px;
969		- height: 26px;
970		- }
	991	+ .generate-btn[disabled] {
	992	+ cursor: unset;
	993	+ }
971	994
	995	+ .bd-close-button {
	996	+ cursor: pointer;
	997	+ font-size: 18px;
	998	+ font-weight: bold;
	999	+ float: right;
	1000	+ position: absolute;
	1001	+ right: 1px;
	1002	+ top: 1px;
	1003	+ padding: 10px;
	1004	+ background: #ffffff;
	1005	+ border-radius: 25px;
	1006	+ width: 20px;
	1007	+ height: 20px;
	1008	+ display: flex;
	1009	+ align-items: center;
	1010	+ justify-content: center;
	1011	+ color: #281617;
	1012	+ right: -60px;
	1013	+ }
972	1014
973		- .checkbox-input-field input:checked+.toggle-label {
974		- background-color: #00b884;
975		- }
	1015	+ div#betterdocs-ai-error-message,
	1016	+ #betterdocs-ai-message {
	1017	+ font-size: 14px;
	1018	+ font-family: 'IBM Plex Sans', sans-serif;
	1019	+ color: #667085;
	1020	+ margin-bottom: 20px;
	1021	+ }
976	1022
977		- .toggle-label:after {
978		- content: "";
979		- position: absolute;
980		- height: 22px;
981		- width: 22px;
982		- left: 2px;
983		- bottom: 2px;
984		- background-color: white;
985		- border-radius: 50%;
986		- transition: transform 0.3s;
987		- }
	1023	+ div#betterdocs-ai-error-message a,
	1024	+ #betterdocs-ai-message a {
	1025	+ text-decoration: none;
	1026	+ font-weight: 600;
	1027	+ }
988	1028
989		- .checkbox-input-field input:checked+.toggle-label:after {
990		- transform: translateX(26px);
991		- }
	1029	+ div#betterdocs-ai-error-message a:focus,
	1030	+ #betterdocs-ai-message a:focus {
	1031	+ outline: none;
	1032	+ box-shadow: none;
	1033	+ color: #2271b1;
	1034	+ }
992	1035
993		- .generate-btn,
994		- .prompt-btn,
995		- .keep-btn {
996		- background-color: #00b884;
997		- color: #fff;
998		- border: none;
999		- padding: 10px 15px;
1000		- text-align: center;
1001		- text-decoration: none;
1002		- display: inline-block;
1003		- font-size: 16px;
1004		- cursor: pointer;
1005		- border-radius: 4px;
1006		- }
	1036	+ #betterdocs-ai-message span {
	1037	+ color: #d63638;
	1038	+ }
1007	1039
1008		- .generate-btn[disabled] {
1009		- cursor: unset;
1010		- }
	1040	+ .warning-message {
	1041	+ display: flex;
	1042	+ align-items: center;
	1043	+ gap: 10px;
	1044	+ background: #fbebed;
	1045	+ padding: 12px;
	1046	+ border-radius: 5px;
	1047	+ font-size: 14px;
	1048	+ line-height: 1.4em;
	1049	+ border-left: 4px solid #d63638;
	1050	+ }
1011	1051
1012		- .bd-close-button {
1013		- cursor: pointer;
1014		- font-size: 18px;
1015		- font-weight: bold;
1016		- float: right;
1017		- position: absolute;
1018		- top: -16px;
1019		- border-radius: 50%;
1020		- background: #ffffff;
1021		- width: 40px;
1022		- height: 40px;
1023		- display: flex;
1024		- align-items: center;
1025		- justify-content: center;
1026		- color: #281617;
1027		- right: -42px;
1028		- }
	1052	+ .warning-message svg {
	1053	+ width: 20px;
	1054	+ height: 20px;
	1055	+ }
1029	1056
1030		- div#betterdocs-ai-error-message,
1031		- #betterdocs-ai-message {
1032		- font-size: 14px;
1033		- font-family: 'IBM Plex Sans', sans-serif;
1034		- color: #667085;
1035		- margin-bottom: 20px;
1036		- }
	1057	+ .warning-message span {
	1058	+ color: #d63638;
	1059	+ }
1037	1060
1038		- div#betterdocs-ai-error-message a,
1039		- #betterdocs-ai-message a {
1040		- text-decoration: none;
1041		- font-weight: 600;
1042		- }
	1061	+ .warning-message .footer-message {
	1062	+ width: calc(100% - 20px);
	1063	+ }
1043	1064
1044		- div#betterdocs-ai-error-message a:focus,
1045		- #betterdocs-ai-message a:focus {
1046		- outline: none;
1047		- box-shadow: none;
1048		- color: #2271b1;
1049		- }
	1065	+ @media only screen and (max-width: 991px) {
	1066	+ .betterdocs-ai-autowrite-form-container {
	1067	+ left: 0;
	1068	+ right: 0;
	1069	+ transform: translate(0%, -50%);
	1070	+ }
1050	1071
1051		- #betterdocs-ai-message span {
1052		- color: #d63638;
1053		- }
	1072	+ .betterdocs-ai-autowrite-form-content {
	1073	+ overflow-x: auto;
	1074	+ }
	1075	+ }
1054	1076
1055		- .warning-message {
1056		- display: flex;
1057		- align-items: center;
1058		- gap: 10px;
1059		- background: #fbebed;
1060		- padding: 12px;
1061		- border-radius: 5px;
1062		- font-size: 14px;
1063		- line-height: 1.4em;
1064		- border-left: 4px solid #d63638;
1065		- }
	1077	+ @media only screen and (max-width: 740px) {
1066	1078
1067		- .warning-message svg {
1068		- width: 20px;
1069		- height: 20px;
1070		- }
	1079	+ /* .bd-close-button {
	1080	+ right: px;
	1081	+ top: 1px;
	1082	+ border-radius: 5px;
	1083	+ width: 12px;
	1084	+ height: 12px;
	1085	+ color: #ffffff;
	1086	+ background: #00b884;
	1087	+ } */
	1088	+ .bd-close-button {
	1089	+ right: 0px;
	1090	+ top: 0px;
	1091	+ width: 12px;
	1092	+ height: 12px;
	1093	+ font-size: 14px;
	1094	+ }
1071	1095
1072		- .warning-message span {
1073		- color: #d63638;
1074		- }
1075		-
1076		- .warning-message .footer-message {
1077		- width: calc(100% - 20px);
1078		- }
1079		-
1080		- @media only screen and (max-width: 991px) {
1081		- .betterdocs-ai-autowrite-form-container {
1082		- left: 0;
1083		- right: 0;
1084		- transform: translate(0%, -50%);
1085		- }
1086		-
1087		- .betterdocs-ai-autowrite-form-content {
1088		- overflow-x: auto;
1089		- }
1090		- }
1091		-
1092		- @media only screen and (max-width: 740px) {
1093		-
1094		- /* .bd-close-button {
1095		- right: px;
1096		- top: 1px;
1097		- border-radius: 5px;
1098		- width: 12px;
1099		- height: 12px;
1100		- color: #ffffff;
1101		- background: #00b884;
1102		- } */
1103		- .bd-close-button {
1104		- right: 0px;
1105		- top: 0px;
1106		- width: 12px;
1107		- height: 12px;
1108		- font-size: 14px;
1109		- }
1110		-
1111		- }
1112		- </style>
1113		- <?php
1114	1096	}
1115		- }
	1097	+ </style>
	1098	+<?php
	1099	+ }
	1100	+}