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