NEW Add a link "Fill with layout"

htdocs/admin/mails.php

@@ -1091,11 +1091,11 @@ if ($action == 'edit') {
 		include_once DOL_DOCUMENT_ROOT.'/core/class/html.formmail.class.php';
 		$formmail = new FormMail($db);
 		$formmail->trackid = (($action == 'testhtml') ? "testhtml" : "test");
-		$formmail->fromname = (GETPOSTISSET('fromname') ? GETPOST('fromname') : $conf->global->MAIN_MAIL_EMAIL_FROM);
+		$formmail->fromname = (GETPOSTISSET('fromname') ? GETPOST('fromname') : getDolGlobalString('MAIN_MAIL_EMAIL_FROM'));
-		$formmail->frommail = (GETPOSTISSET('frommail') ? GETPOST('frommail') : $conf->global->MAIN_MAIL_EMAIL_FROM);
+		$formmail->frommail = (GETPOSTISSET('frommail') ? GETPOST('frommail') : getDolGlobalString('MAIN_MAIL_EMAIL_FROM'));
 		$formmail->fromid = $user->id;
 		$formmail->fromalsorobot = 1;
-		$formmail->fromtype = (GETPOSTISSET('fromtype') ? GETPOST('fromtype', 'aZ09') : (getDolGlobalString('MAIN_MAIL_DEFAULT_FROMTYPE') ? $conf->global->MAIN_MAIL_DEFAULT_FROMTYPE : 'user'));
+		$formmail->fromtype = (GETPOSTISSET('fromtype') ? GETPOST('fromtype', 'aZ09') : getDolGlobalString('MAIN_MAIL_DEFAULT_FROMTYPE', 'user'));
 		$formmail->withfromreadonly = 1;
 		$formmail->withsubstit = 1;
 		$formmail->withfrom = 1;
@@ -1106,6 +1106,8 @@ if ($action == 'edit') {
 		$formmail->withtopic = (GETPOSTISSET('subject') ? GETPOST('subject') : $langs->trans("Test"));
 		$formmail->withtopicreadonly = 0;
 		$formmail->withfile = 2;
+		$formmail->withlayout = 1;
+		$formmail->withaiprompt = 1;
 		$formmail->withbody = (GETPOSTISSET('message') ? GETPOST('message', 'restricthtml') : ($action == 'testhtml' ? $langs->transnoentities("PredefinedMailTestHtml") : $langs->transnoentities("PredefinedMailTest")));
 		$formmail->withbodyreadonly = 0;
 		$formmail->withcancel = 1;
@@ -1130,10 +1132,12 @@ if ($action == 'edit') {
 		print dol_get_fiche_end();
 
 		// References
-		print '<br><br>';
+		if (!empty($user->admin)) {
-		print '<span class="opacitymedium">'.$langs->trans("EMailsWillHaveMessageID").': ';
+			print '<br><br>';
-		print dol_escape_htmltag('<timestamp.*@'.dol_getprefix('email').'>');
+			print '<span class="opacitymedium">'.$langs->trans("EMailsWillHaveMessageID").': ';
-		print '</span>';
+			print dol_escape_htmltag('<timestamp.*@'.dol_getprefix('email').'>');
+			print '</span>';
+		}
 	}
 }
 

htdocs/ai/css/style.css

@@ -1,101 +0,0 @@
-.template-container {
-    display: flex;
-    justify-content: space-between;
-    padding: 10px;
-    background: #f5f5f5;
-    border: 1px solid #d3d3d3;
-    border-radius: 5px;
-    margin-bottom: 15px;
-  }
-  
-  .template-option {
-    flex: 1;
-    text-align: center;
-    padding: 10px;
-    margin: 0 5px;
-    background: #e9e9e9;
-    border: 1px solid #ccc;
-    border-radius: 5px;
-    cursor: pointer;
-    height: 90px;
-    display: flex;
-    flex-direction: column; 
-    align-items: center;
-    justify-content: center;
-  }
-  
-  .template-option:hover {
-    font-weight: bold;
-    background: var(--butactionbg);
-    color: var(--textbutaction);
-    border-radius: 8px;
-    border-collapse: collapse;
-    border: none;
-  }
-  
-  .template-option[data-template="ai"] {
-    background: #c5f7c5;
-  }
-  
-  .template-option[data-template="ai"]:hover {
-    font-weight: bold;
-    background: var(--butactionbg);
-    color: var(--textbutaction);
-    border-radius: 8px;
-    border-collapse: collapse;
-    border: none;
-  }
-
-  .template-option.selected {
-    font-weight: bold;
-    background: var(--butactionbg);
-    color: var(--textbutaction);
-    border-radius: 8px;
-    border-collapse: collapse;
-    border: none;
-}
-
-  #template-selector {
-    width: 100%;
-    max-width: 80%;
-    height: auto;
-    padding: 10px;
-    border: 1px solid #d3d3d3;
-    border-radius: 5px;
-    margin-bottom: 10px;
-    margin-top: 10px;
-  }
-
-  .template-option[data-template="ai"] i {
-    font-size: 42px; 
-    display: block; 
-    width: 80%; 
-    max-height: 80px; 
-    margin: 0 5px;
-    padding-top: 5px;
-    border-radius: 5px;
-   
-}
-.template-option[data-template="ai"] span {
-  padding-top: 30px;
-  font-size: 14px; 
-
-}
-
-.template-option-text {
-  padding-top: 3px;
-  font-size: 14px; 
-}
-
-#ai_input {
-  display: none;
-}
-
-.template-option img {
-  display: block; 
-  width: 80%; 
-  max-height: 80px; 
-  margin: 0 5px;
-  padding-top: 5px;
-  border-radius: 7px;
-}

htdocs/core/class/html.formmail.class.php

@@ -143,6 +143,16 @@ class FormMail extends Form
 	 */
 	public $withfile;
 
+	/**
+	 * @var int	1=Add a button "Fill with layout"
+	 */
+	public $withlayout;
+
+	/**
+	 * @var int	1=Add a button "Fill with AI generation"
+	 */
+	public $withaiprompt;
+
 	/**
 	 * @var int 1=Add a checkbox "Attach also main document" for mass actions (checked by default), -1=Add checkbox (not checked by default)
 	 */
@@ -542,7 +552,7 @@ class FormMail extends Form
 					$out .= info_admin($langs->trans("YouCanChangeValuesForThisListFrom", $langs->transnoentitiesnoconv('Setup').' - '.$langs->transnoentitiesnoconv('EMails')), 1);
 				}
 				$out .= '   ';
-				$out .= '<input type="submit" class="button" value="'.$langs->trans('Apply').'" name="modelselected" disabled="disabled" id="modelselected">';
+				$out .= '<input type="submit" class="button reposition smallpaddingimp" value="'.$langs->trans('Apply').'" name="modelselected" disabled="disabled" id="modelselected">';
 				$out .= ' &nbsp; ';
 				$out .= '</div>';
 			} else {
@@ -889,12 +899,7 @@ class FormMail extends Form
 				$out .= "</td></tr>\n";
 			}
 
-			//input prompt AI
+			// Message (+ Links to choose layout or ai prompt)
-			require_once DOL_DOCUMENT_ROOT.'/core/lib/admin.lib.php';
-			if (isModEnabled('ai')) {
-				$out .= $this->getModelEmailTemplate();
-			}
-			// Message
 			if (!empty($this->withbody)) {
 				$defaultmessage = GETPOST('message', 'restricthtml');
 				if (!GETPOST('modelselected', 'alpha') || GETPOST('modelmailselected') != '-1') {
@@ -995,9 +1000,57 @@ class FormMail extends Form
 				}
 
 				$out .= '<tr>';
-				$out .= '<td colspan="2">';
+				$out .= '<td class="tdtop">';
 				$out .= $form->textwithpicto($langs->trans('MailText'), $helpforsubstitution, 1, 'help', '', 0, 2, 'substittooltipfrombody');
 				$out .= '</td>';
+				$out .= '<td>';
+
+				// Add link to add layout
+				if ($this->withlayout && $this->withfckeditor) {
+					$out .= '<a href="#" id="linkforlayouttemplates" class="reposition notasortlink inline-block alink marginrightonly">';
+					$out .= img_picto($langs->trans("FillMessageWithALayout"), 'layout', 'class="paddingrightonly"');
+					$out .= $langs->trans("FillMessageWithALayout").'...';
+					$out .= '</a> &nbsp; &nbsp; ';
+
+					$out .= '<script>
+						$(document).ready(function() {
+  							$("#linkforlayouttemplates").click(function() {
+								console.log("We click on linkforlayouttemplates");
+								event.preventDefault();
+								jQuery("#template-selector").toggle();
+								//jQuery("#template-selector").attr("style", "aaa");
+								jQuery("#ai_input").hide();
+							});
+						});
+					</script>
+					';
+				}
+				// Add link to add AI content
+				if ($this->withaiprompt && isModEnabled('ai')) {
+					$out .= '<a href="#" id="linkforaiprompt" class="reposition notasortlink inline-block alink marginrightonly">';
+					$out .= img_picto($langs->trans("FillMessageWithAIContent"), 'ai', 'class="paddingrightonly"');
+					$out .= $langs->trans("FillMessageWithAIContent").'...';
+					$out .= '</a>';
+
+					$out .= '<script>
+						$(document).ready(function() {
+  							$("#linkforaiprompt").click(function() {
+								console.log("We click on linkforaiprompt");
+								event.preventDefault();
+								jQuery("#ai_input").toggle();
+								jQuery("#template-selector").hide();
+							});
+						});
+					</script>
+					';
+				}
+				if ($this->withfckeditor) {
+					$out .= $this->getModelEmailTemplate();
+				}
+				if (isModEnabled('ai')) {
+					$out .= $this->getSectionForAIPrompt();
+				}
+				$out .= '</td>';
 				$out .= '</tr>';
 
 				$out .= '<tr>';
@@ -1381,38 +1434,38 @@ class FormMail extends Form
 	}
 
 	/**
-	 * get Html For instruction of message
+	 * Return Html code for AI instruction of message
+	 *
 	 * @return 	string      Text for instructions
 	 */
-	public function getHtmlForInstruction()
+	public function getSectionforAIPrompt()
 	{
-		global $langs, $form;
+		global $langs;
 
-		$out = '<tr id="ai_input">';
+		$out = '<tr id="ai_input" class="hidden">';
 		$out .= '<td>';
-		$out .= $form->textwithpicto($langs->trans('helpWithAi'), $langs->trans("YouCanMakeSomeInstructionForEmail"));
+		//$out .= $form->textwithpicto($langs->trans('helpWithAi'), $langs->trans("YouCanMakeSomeInstructionForEmail"));
 		$out .= '</td>';
 
 		$out .= '<td>';
-		$out .= '<input type="text" class="quatrevingtpercent" id="ai_instructions" name="instruction" placeholder="message with AI" />';
+		$out .= '<input type="text" class="quatrevingtpercent" id="ai_instructions" name="instruction" placeholder="'.$langs->trans("EnterYourAIPromptHere").'..." />';
 		$out .= '<input id="generate_button" type="button" class="button smallpaddingimp"  value="'.$langs->trans('Generate').'"/>';
 		$out .= "</td></tr>\n";
 
 
 		$out .= "<script type='text/javascript'>
 			$(document).ready(function() {
-
+				// for keydown
-				//for keydown
 				$('#ai_instructions').keydown(function(event) {
-					if (event.keyCode === 13) { 
+					if (event.keyCode === 13) {
-						event.preventDefault(); 
+						event.preventDefault();
-						$('#generate_button').click(); 
+						$('#generate_button').click();
 					}
 				});
 
 				$('#generate_button').click(function() {
 					var instructions = $('#ai_instructions').val();
-					//editor on readonly 
+					//editor on readonly
         			if (CKEDITOR.instances.message) {
 						CKEDITOR.instances.message.setReadOnly(1);
 					}
@@ -1425,20 +1478,23 @@ class FormMail extends Form
 							'instructions': instructions,
 						}),
 						success: function(response) {
-							if (".getDolGlobalString('FCKEDITOR_ENABLE_MAIL').") {
+							console.log('Add response into field message: '+response);
-								CKEDITOR.instances.message.setData(response);
+
-							} 
+							if (CKEDITOR.instances && CKEDITOR.instances.message && ".getDolGlobalInt('FCKEDITOR_ENABLE_MAIL', 0).") {
-							else {
+								CKEDITOR.instances.message.setReadOnly(0);
-								tinymce.get('message').setContent(response);
+								//CKEDITOR.instances.message.setData(response);
 							}
-							// remove readonly 
+
-							CKEDITOR.instances.message.setReadOnly(0);
+							jQuery('#message').val(response);
+
+							// remove readonly
 							$('#ai_instructions').val('');
 						},
 						error: function(xhr, status, error) {
+							alert(error);
 							console.error('error ajax', status, error);
 						}
-						
+
 					});
 				});
 			});
@@ -1448,46 +1504,31 @@ class FormMail extends Form
 	}
 
 	/**
-	 * get models template email in boxes
+	 * Return HTML code for selection of email layout
+	 *
 	 * @return 	string      HTML for model email boxes
-
 	 */
 	public function getModelEmailTemplate()
 	{
-
+		$out .= '<div id="template-selector" class="template-container hidden">';
-		global $langs, $form;
-		$out = '<tr>';
-		$out .= '<td>';
-		$out .= $form->textwithpicto($langs->trans('ModelTemplate'), $langs->trans("YouCanChooseAModelForYouMailContent"));
-		$out .= '</td>';
-		$out .= '<td>';
-		$out .= '<div id="template-selector" class="template-container">';
 		$templates = array(
-			'empty' => 'empty_template',
+			'empty' => 'empty',
-			'basic' => 'basic_template',
+			'basic' => 'basic',
-			'news'  => 'news_template',
+			'news'  => 'news',
-			'commerce' => 'commerce_template',
+			'commerce' => 'commerce',
-			'text' => 'text_template'
+			'text' => 'text'
 		);
 
 		foreach ($templates as $template => $templateFunction) {
-			if (function_exists($templateFunction)) {
+			$contentHtml = getHtmlOfLayout($template);
-				$contentHtml = $templateFunction();
+
-			}
 			$out .= '<div class="template-option" data-template="'.$template.'" data-content="'.htmlentities($contentHtml).'">';
-			$out .= '<img alt="'.$template.'" src="'.DOL_URL_ROOT.'/theme/common/mailtemplate/'.$template.'.png" />';
+			$out .= '<img class="maillayout" alt="'.$template.'" src="'.DOL_URL_ROOT.'/theme/common/maillayout/'.$template.'.png" />';
 			$out .= '<span class="template-option-text">'.ucfirst($template).'</span>';
 			$out .= '</div>';
 		}
-		$out .= '<div class="template-option" data-template="ai"><i class="fas fa-edit"></i><span >Generate with AI</span></div>';
 		$out .= '</div>';
-		$out .= '</td></tr>';
+
-		$out .= "<script type='text/javascript'>
-				var cssLink = document.createElement('link');
-				cssLink.href = '".DOL_URL_ROOT."/ai/css/style.css';
-				cssLink.rel = 'stylesheet';
-				cssLink.type = 'text/css';
-				document.head.appendChild(cssLink);</script>";
 		$out .= "<script type='text/javascript'>
 				$(document).ready(function() {
 					$('.template-option').click(function() {
@@ -1496,26 +1537,18 @@ class FormMail extends Form
 
 						var template = $(this).data('template');
 						var contentHtml = $(this).data('content');
-						
+
 						var editorInstance = CKEDITOR.instances.message;
 						if (editorInstance) {
 							editorInstance.setData(contentHtml);
 						}
-						// display input for generate with IA
-						if(template === 'ai') {
-							$('#ai_input').show();
-						} else {
-							$('#ai_input').hide();
-						}
 					});
 				});
 		</script>";
-		$out .= $this->getHtmlForInstruction();
+
 		return $out;
 	}
 
-
-
 	/**
 	 *  Return templates of email with type = $type_template or type = 'all'.
 	 *  This search into table c_email_templates. Used by the get_form function.

htdocs/core/lib/functions.lib.php

@@ -4506,7 +4506,7 @@ function img_picto($titlealt, $picto, $moreatt = '', $pictoisfullpath = false, $
 
 		if (empty($srconly) && in_array($pictowithouttext, array(
 				'1downarrow', '1uparrow', '1leftarrow', '1rightarrow', '1uparrow_selected', '1downarrow_selected', '1leftarrow_selected', '1rightarrow_selected',
-				'accountancy', 'accounting_account', 'account', 'accountline', 'action', 'add', 'address', 'angle-double-down', 'angle-double-up', 'asset',
+				'accountancy', 'accounting_account', 'account', 'accountline', 'action', 'add', 'address', 'ai', 'angle-double-down', 'angle-double-up', 'asset',
 				'bank_account', 'barcode', 'bank', 'bell', 'bill', 'billa', 'billr', 'billd', 'birthday-cake', 'bookmark', 'bom', 'briefcase-medical', 'bug', 'building',
 				'card', 'calendarlist', 'calendar', 'calendarmonth', 'calendarweek', 'calendarday', 'calendarperuser', 'calendarpertype',
 				'cash-register', 'category', 'chart', 'check', 'clock', 'clone', 'close_title', 'code', 'cog', 'collab', 'company', 'contact', 'country', 'contract', 'conversation', 'cron', 'cross', 'cubes',
@@ -4519,7 +4519,7 @@ function img_picto($titlealt, $picto, $moreatt = '', $pictoisfullpath = false, $
 				'hands-helping', 'help', 'holiday',
 				'id-card', 'images', 'incoterm', 'info', 'intervention', 'inventory', 'intracommreport', 'jobprofile',
 				'key', 'knowledgemanagement',
-				'label', 'language', 'line', 'link', 'list', 'list-alt', 'listlight', 'loan', 'lock', 'lot', 'long-arrow-alt-right',
+				'label', 'language', 'layout', 'line', 'link', 'list', 'list-alt', 'listlight', 'loan', 'lock', 'lot', 'long-arrow-alt-right',
 				'margin', 'map-marker-alt', 'member', 'meeting', 'minus', 'money-bill-alt', 'movement', 'mrp', 'note', 'next',
 				'off', 'on', 'order',
 				'paiment', 'paragraph', 'play', 'pdf', 'phone', 'phoning', 'phoning_mobile', 'phoning_fax', 'playdisabled', 'previous', 'poll', 'pos', 'printer', 'product', 'propal', 'proposal', 'puce',
@@ -4551,7 +4551,8 @@ function img_picto($titlealt, $picto, $moreatt = '', $pictoisfullpath = false, $
 			}
 
 			$arrayconvpictotofa = array(
-				'account' => 'university', 'accounting_account' => 'clipboard-list', 'accountline' => 'receipt', 'accountancy' => 'search-dollar', 'action' => 'calendar-alt', 'add' => 'plus-circle', 'address' => 'address-book', 'asset' => 'money-check-alt', 'autofill' => 'fill',
+				'account' => 'university', 'accounting_account' => 'clipboard-list', 'accountline' => 'receipt', 'accountancy' => 'search-dollar', 'action' => 'calendar-alt', 'add' => 'plus-circle', 'address' => 'address-book', 'ai' => 'magic',
+				'asset' => 'money-check-alt', 'autofill' => 'fill',
 				'bank_account' => 'university',
 				'bill' => 'file-invoice-dollar', 'billa' => 'file-excel', 'billr' => 'file-invoice-dollar', 'billd' => 'file-medical',
 				'supplier_invoice' => 'file-invoice-dollar', 'supplier_invoicea' => 'file-excel', 'supplier_invoicer' => 'file-invoice-dollar', 'supplier_invoiced' => 'file-medical',
@@ -4566,7 +4567,7 @@ function img_picto($titlealt, $picto, $moreatt = '', $pictoisfullpath = false, $
 				'graph' => 'chart-line', 'grip_title' => 'arrows-alt', 'grip' => 'arrows-alt', 'help' => 'question-circle',
 				'generic' => 'file', 'holiday' => 'umbrella-beach',
 				'info' => 'info-circle', 'inventory' => 'boxes', 'intracommreport' => 'globe-europe', 'jobprofile' => 'cogs',
-				'knowledgemanagement' => 'ticket-alt', 'label' => 'layer-group', 'line' => 'bars', 'loan' => 'money-bill-alt',
+				'knowledgemanagement' => 'ticket-alt', 'label' => 'layer-group', 'layout'=>'columns', 'line' => 'bars', 'loan' => 'money-bill-alt',
 				'member' => 'user-alt', 'meeting' => 'chalkboard-teacher', 'mrp' => 'cubes', 'next' => 'arrow-alt-circle-right',
 				'trip' => 'wallet', 'expensereport' => 'wallet', 'group' => 'users', 'movement' => 'people-carry',
 				'sign-out' => 'sign-out-alt',

htdocs/core/lib/modelemail.lib.php

@@ -19,27 +19,19 @@
 
 /**
  *		\file       htdocs/core/lib/emailmodel.lib.php
- *
  *		\brief      File for getting email html models
  */
 
 /**
- * get empty html
+ * Get empty html
- * @return string  $out  html content
+ *
+ * @param	string	$name	Name of template
+ * @return 	string  $out  	Html content
  */
-function empty_template()
+function getHtmlOfLayout($name)
 {
-	$out = '';
+	if ($name == 'basic') {
-	return $out;
+		$out = '
-}
-
-/**
- * get basic html
- * @return string  $out  html content
- */
-function basic_template()
-{
-	$out = '
             <div >
             <div >
             <img alt="Gray rectangle" style="margin-left:150px;" width="800px" height="100px" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAABkCAIAAABM5OhcAAABGklEQVR4nO3SwQ3AIBDAsNLJb3SWIEJC9gR5ZM3MB6f9twN4k7FIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIvEBtxYAkgpLmAeAAAAAElFTkSuQmCC" />
@@ -60,16 +52,8 @@ function basic_template()
             <img alt="Gray rectangle" style="margin-left:150px;" width="15%" height="50px" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAABkCAIAAABM5OhcAAABGklEQVR4nO3SwQ3AIBDAsNLJb3SWIEJC9gR5ZM3MB6f9twN4k7FIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIvEBtxYAkgpLmAeAAAAAElFTkSuQmCC" />
 
         </div>';
-	return $out;
+	} elseif ($name == 'news') {
-}
+		$out = '
-
-/**
- * get news html
- * @return string  $out  html content
- */
-function news_template()
-{
-	$out = '
         <h1 style="margin-left:120px;">Lorem, ipsum dolor sit amet consectetur adipisicing elit sit amet consectetur</h1>
         <h2 style="margin-left:120px;">Lorem, ipsum dolor sit amet consectetur adipisicing elitsit amet consectetur adipisicing </h2>
 
@@ -102,73 +86,56 @@ function news_template()
                 <img alt="Gray rectangle" style="" width="130px" height="130px" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAABkCAIAAABM5OhcAAABGklEQVR4nO3SwQ3AIBDAsNLJb3SWIEJC9gR5ZM3MB6f9twN4k7FIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIvEBtxYAkgpLmAeAAAAAElFTkSuQmCC" />
             </div>
         </div>';
-	return $out;
+	} elseif ($name == 'commerce') {
-}
+		$out = '
+		    <h1 style="margin-left:120px;">Lorem, ipsum dolor sit amet consectetur adipisicing elit sit amet consectetur</h1>
+		    <h2 style="margin-left:120px;">Lorem, ipsum dolor sit amet consectetur adipisicing elitsit amet consectetur adipisicing </h2>
 
-/**
+		    <div style="font-family: Arial, sans-serif; background-color: #f7f7f7; padding: 16px; max-width: 600px; margin: 0 auto; box-sizing: border-box;">
- * get commerce html
+		    <div style="display: flex;">
- * @return string  $out  html content
+		        <div style="margin-bottom: 50px; flex: 1; padding-right: 8px;">
- */
+		            <div>
-function commerce_template()
+		                <img alt="Gray rectangle" style="margin-left:120px;margin-top:30px;" width="350px" height="100px" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAABkCAIAAABM5OhcAAABGklEQVR4nO3SwQ3AIBDAsNLJb3SWIEJC9gR5ZM3MB6f9twN4k7FIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIvEBtxYAkgpLmAeAAAAAElFTkSuQmCC" />
-{
+		            </div>
-	$out = '
+		            <div style="margin-left:120px;background-color: #e0e0e0; padding: 8px; margin-bottom: 8px; text-indent: 50px;">
-    <h1 style="margin-left:120px;">Lorem, ipsum dolor sit amet consectetur adipisicing elit sit amet consectetur</h1>
+		                Lorem ipsum dolor sit amet, consectetur adipiscing elit<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit...
-    <h2 style="margin-left:120px;">Lorem, ipsum dolor sit amet consectetur adipisicing elitsit amet consectetur adipisicing </h2>
+		            </div>
+		        </div>
 
-    <div style="font-family: Arial, sans-serif; background-color: #f7f7f7; padding: 16px; max-width: 600px; margin: 0 auto; box-sizing: border-box;">
+		            <br><br>
-    <div style="display: flex;">
+		        <div style="margin-bottom: 10px; flex: 1; padding-left: 8px;">
-        <div style="margin-bottom: 50px; flex: 1; padding-right: 8px;">
+		            <div>
-            <div>
+		                <img alt="Gray rectangle" style="margin-left:120px;margin-top:30px;" width="350px" height="100px" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAABkCAIAAABM5OhcAAABGklEQVR4nO3SwQ3AIBDAsNLJb3SWIEJC9gR5ZM3MB6f9twN4k7FIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIvEBtxYAkgpLmAeAAAAAElFTkSuQmCC" />
-                <img alt="Gray rectangle" style="margin-left:120px;margin-top:30px;" width="350px" height="100px" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAABkCAIAAABM5OhcAAABGklEQVR4nO3SwQ3AIBDAsNLJb3SWIEJC9gR5ZM3MB6f9twN4k7FIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIvEBtxYAkgpLmAeAAAAAElFTkSuQmCC" />
+		            </div>
-            </div>
+		                <div style="margin-left:120px;background-color: #e0e0e0; padding: 8px; margin-bottom: 8px; text-indent: 50px;">
-            <div style="margin-left:120px;background-color: #e0e0e0; padding: 8px; margin-bottom: 8px; text-indent: 50px;">
+		                Lorem ipsum dolor sit amet, consectetur adipiscing elit<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit...
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit...
+		            </div>
-            </div>
+		        </div>
-        </div>
+		    </div>
+		    <div style="display: flex;">
+		        <div style="margin-bottom: 50px; flex: 1; padding-right: 8px;">
+		            <div>
+		                <img alt="Gray rectangle" style="margin-left:120px;margin-top:30px;" width="350px" height="100px" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAABkCAIAAABM5OhcAAABGklEQVR4nO3SwQ3AIBDAsNLJb3SWIEJC9gR5ZM3MB6f9twN4k7FIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIvEBtxYAkgpLmAeAAAAAElFTkSuQmCC" />
+		            </div>
+		            <div style="margin-left:120px;background-color: #e0e0e0; padding: 8px; margin-bottom: 8px; text-indent: 50px;">
+		                Lorem ipsum dolor sit amet, consectetur adipiscing elit<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit...
+		            </div>
+		        </div>
 
-            <br><br>
+		            <br><br>
-        <div style="margin-bottom: 10px; flex: 1; padding-left: 8px;">
+		        <div style="margin-bottom: 10px; flex: 1; padding-left: 8px;">
-            <div>
+		            <div>
-                <img alt="Gray rectangle" style="margin-left:120px;margin-top:30px;" width="350px" height="100px" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAABkCAIAAABM5OhcAAABGklEQVR4nO3SwQ3AIBDAsNLJb3SWIEJC9gR5ZM3MB6f9twN4k7FIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIvEBtxYAkgpLmAeAAAAAElFTkSuQmCC" />
+		                <img alt="Gray rectangle" style="margin-left:120px;margin-top:30px;" width="350px" height="100px" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAABkCAIAAABM5OhcAAABGklEQVR4nO3SwQ3AIBDAsNLJb3SWIEJC9gR5ZM3MB6f9twN4k7FIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIvEBtxYAkgpLmAeAAAAAElFTkSuQmCC" />
-            </div>
+		            </div>
-                <div style="margin-left:120px;background-color: #e0e0e0; padding: 8px; margin-bottom: 8px; text-indent: 50px;">
+		                <div style="margin-left:120px;background-color: #e0e0e0; padding: 8px; margin-bottom: 8px; text-indent: 50px;">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit...
+		                Lorem ipsum dolor sit amet, consectetur adipiscing elit<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit...
-            </div>
+		            </div>
-        </div>	  
+		        </div>
-    </div>	 
+		    </div>
-    <div style="display: flex;">
+		  </div>
-        <div style="margin-bottom: 50px; flex: 1; padding-right: 8px;">
+		  ';
-            <div>
+	} elseif ($name == 'text') {
-                <img alt="Gray rectangle" style="margin-left:120px;margin-top:30px;" width="350px" height="100px" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAABkCAIAAABM5OhcAAABGklEQVR4nO3SwQ3AIBDAsNLJb3SWIEJC9gR5ZM3MB6f9twN4k7FIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIvEBtxYAkgpLmAeAAAAAElFTkSuQmCC" />
+		$out = '
-            </div>
-            <div style="margin-left:120px;background-color: #e0e0e0; padding: 8px; margin-bottom: 8px; text-indent: 50px;">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit...
-            </div>
-        </div>
-
-            <br><br>
-        <div style="margin-bottom: 10px; flex: 1; padding-left: 8px;">
-            <div>
-                <img alt="Gray rectangle" style="margin-left:120px;margin-top:30px;" width="350px" height="100px" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAABkCAIAAABM5OhcAAABGklEQVR4nO3SwQ3AIBDAsNLJb3SWIEJC9gR5ZM3MB6f9twN4k7FIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIvEBtxYAkgpLmAeAAAAAElFTkSuQmCC" />
-            </div>
-                <div style="margin-left:120px;background-color: #e0e0e0; padding: 8px; margin-bottom: 8px; text-indent: 50px;">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit...
-            </div>
-        </div>	  
-    </div>	 
-  </div>
-      
-  ';
-	return $out;
-}
-
-/**
- * get basic html
- * @return string  $out  html content
- */
-function text_template()
-{
-	$out = '
         <h1 style="margin-left:150px">Lorem ipsum dolor sit amet consectetur adipisicing elit sit amet consectetur adipisicing elit.</h1>
         <h3 style="margin-left:150px">Lorem ipsum dolor sit amet consectetur adipisicing elit sit amet consectetur adipisicing elit.</h3>
         <p style="margin-left:150px">
@@ -180,6 +147,9 @@ function text_template()
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi impedit molestias voluptatibus. Natus nulla sint totam illo? Hic name consequuntur id harum pariatur, quo illo quaerat minima tempore.
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi impedit molestias voluptatibus. Natus nulla sint totam illo? Hic name consequuntur id harum pariatur, quo illo quaerat minima tempore.
         </p>';
+	} else {
+		$out = '';
+	}
 
 	return $out;
 }

htdocs/langs/en_US/main.lang

@@ -1268,3 +1268,6 @@ ElementType=Element type
 ElementId=Element Id
 Encrypted=Encrypted
 Settings=Settings
+FillMessageWithALayout=Fill message with a layout
+FillMessageWithAIContent=Fill message with AI content
+EnterYourAIPromptHere=Enter your AI prompt here

htdocs/theme/eldy/emaillayout.inc.php

@@ -0,0 +1,106 @@
+<?php
+if (!defined('ISLOADEDBYSTEELSHEET')) {
+	die('Must be call by steelsheet');
+}
+?>
+.template-container {
+	display: flex;
+	justify-content: space-between;
+	padding: 10px;
+	background: #f5f5f5;
+	border: 1px solid #d3d3d3;
+	border-radius: 5px;
+	margin-bottom: 15px;
+  }
+
+  .template-option {
+	text-align: center;
+	padding: 10px;
+	margin: 0 5px;
+	background: #e9e9e9;
+	border: 1px solid #ccc;
+	border-radius: 5px;
+	cursor: pointer;
+	height: 60px;
+	width: 60px;
+	display: inline-block;
+	align-items: center;
+	justify-content: center;
+  }
+
+  .template-option:hover {
+	font-weight: bold;
+	background: var(--butactionbg);
+	color: var(--textbutaction);
+	border-radius: 8px;
+	border-collapse: collapse;
+  }
+
+  .template-option[data-template="ai"] {
+	background: #c5f7c5;
+  }
+
+  .template-option[data-template="ai"]:hover {
+	font-weight: bold;
+	background: var(--butactionbg);
+	color: var(--textbutaction);
+	border-radius: 8px;
+	border-collapse: collapse;
+	border: none;
+  }
+
+  .template-option.selected {
+	font-weight: bold;
+	background: var(--butactionbg);
+	color: var(--textbutaction);
+	border-radius: 8px;
+	border-collapse: collapse;
+	border: none;
+}
+
+  #template-selector {
+	/* width: 100%;
+	max-width: 80%; */
+	height: auto;
+	padding: 10px;
+	border: 1px solid #d3d3d3;
+	border-radius: 5px;
+	margin-bottom: 10px;
+	margin-top: 10px;
+	width: fit-content;
+  }
+
+  .template-option[data-template="ai"] i {
+	font-size: 42px;
+	display: block;
+	width: 80%;
+	max-height: 80px;
+	margin: 0 5px;
+	padding-top: 5px;
+	border-radius: 5px;
+
+}
+
+.template-option[data-template="ai"] span {
+  padding-top: 30px;
+  font-size: 14px;
+
+}
+
+.template-option-text {
+  padding-top: 3px;
+  font-size: 14px;
+}
+
+#ai_input {
+  display: none;
+}
+
+.template-option img {
+  display: block;
+  width: 80%;
+  max-height: 80px;
+  margin: 0 5px;
+  padding-top: 5px;
+  border-radius: 7px;
+}

htdocs/theme/eldy/global.inc.php

@@ -8152,20 +8152,20 @@ table.jPicker {
 
 <?php
 include dol_buildpath($path.'/theme/'.$theme.'/dropdown.inc.php', 0);
+include dol_buildpath($path.'/theme/'.$theme.'/emaillayout.inc.php', 0);
 include dol_buildpath($path.'/theme/'.$theme.'/info-box.inc.php', 0);
 include dol_buildpath($path.'/theme/'.$theme.'/progress.inc.php', 0);
 include dol_buildpath($path.'/theme/'.$theme.'/timeline.inc.php', 0);
 
-if (getDolGlobalString('THEME_CUSTOM_CSS')) {
+
-	print $conf->global->THEME_CUSTOM_CSS;
+// Add custom CSS if defined
-}
+print getDolGlobalString('THEME_CUSTOM_CSS');
 
 ?>
 
-	div.extra_inline_chkbxlst,
+div.extra_inline_chkbxlst, div.extra_inline_checkbox {
-	div.extra_inline_checkbox {
+	min-width:150px;
-		min-width:150px;
+}
-	}
 
 /* Must be at end */
 div.flot-text .flot-tick-label .tickLabel, .fa-color-unset {

htdocs/theme/eldy/style.css.php

@@ -331,7 +331,6 @@ print '*/'."\n";
 // Include the global.inc.php that include the badges, btn, info-box, dropdown, progress...
 require __DIR__.'/global.inc.php';
 
-
 if (is_object($db)) {
 	$db->close();
 }

htdocs/theme/md/style.css.php

@@ -8000,6 +8000,7 @@ table.jPicker {
 
 <?php
 include dol_buildpath($path.'/theme/'.$theme.'/dropdown.inc.php', 0);
+include dol_buildpath($path.'/theme/eldy/emaillayout.inc.php', 0); // actually md use same style as eldy theme
 include dol_buildpath($path.'/theme/'.$theme.'/info-box.inc.php', 0);
 include dol_buildpath($path.'/theme/'.$theme.'/progress.inc.php', 0);
 include dol_buildpath($path.'/theme/eldy/timeline.inc.php', 0); // actually md use same style as eldy theme