← All changes | includes/Core/WriteWithAI.php +911 -888 3.4.0 → 4.2.6 View file →

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