From e7678a54857ddb76d60baf71b87801c013b6e7bc Mon Sep 17 00:00:00 2001
From: Chenjianyu <chenjianyu@@easycorp.ltd>
Date: Tue, 1 Aug 2023 10:11:25 +0800
Subject: [PATCH] * add role template panel.

---
 module/ai/lang/en.php                    |  2 +
 module/ai/lang/zh-cn.php                 |  2 +
 module/ai/view/promptassignrole.html.php | 83 ++++++++++++++++--------
 3 files changed, 61 insertions(+), 26 deletions(-)

diff --git a/module/ai/lang/en.php b/module/ai/lang/en.php
index 1ae49ecf10..857f6b70cb 100644
--- a/module/ai/lang/en.php
+++ b/module/ai/lang/en.php
@@ -105,6 +105,8 @@ $lang->ai->prompts->role             = 'Role';
 $lang->ai->prompts->characterization = 'Characterization';
 $lang->ai->prompts->rolePlaceholder  = '"Act as a <role>"';
 $lang->ai->prompts->charPlaceholder  = 'Detailed characterization of this role';
+$lang->ai->prompts->roleTemplate     = 'Role Template';
+$lang->ai->prompts->roleTemplateTip  = 'After a template is referenced, modifying the role or role description does not affect the template.';
 
 /* Data source selecting. */
 $lang->ai->prompts->selectData       = 'Select data';
diff --git a/module/ai/lang/zh-cn.php b/module/ai/lang/zh-cn.php
index 0e0484e41a..64a9c1b8b1 100644
--- a/module/ai/lang/zh-cn.php
+++ b/module/ai/lang/zh-cn.php
@@ -105,6 +105,8 @@ $lang->ai->prompts->role             = '角色';
 $lang->ai->prompts->characterization = '角色描述';
 $lang->ai->prompts->rolePlaceholder  = '“你来扮演 <一个什么角色>”';
 $lang->ai->prompts->charPlaceholder  = '该角色的具体描述信息';
+$lang->ai->prompts->roleTemplate     = '角色模版';
+$lang->ai->prompts->roleTemplateTip  = '引用模板后，修改角色、角色描述不会对模板造成影响。';
 
 /* Data source selecting. */
 $lang->ai->prompts->selectData       = '选择数据';
diff --git a/module/ai/view/promptassignrole.html.php b/module/ai/view/promptassignrole.html.php
index 3e0743580d..4c99b73748 100644
--- a/module/ai/view/promptassignrole.html.php
+++ b/module/ai/view/promptassignrole.html.php
@@ -16,31 +16,42 @@
   .content-row {display: flex; flex-direction: row; padding: 8px 0px;}
   .input-label {width: 120px; padding: 6px 12px; text-align: right;}
   .input {flex-grow: 1;}
+  .v-top > * {vertical-align: top; display: inline-block;}
 </style>
 <?php include 'promptdesignprogressbar.html.php';?>
-<div id='mainContent' class='main-content' style='height: calc(100vh - 120px);'>
+<div id='mainContent' class='main-content' style='height: calc(100vh - 120px); padding: 0;'>
   <form id="mainForm" onsubmit="return validateForm();" class='load-indicator main-form form-ajax' method='post' style='height: 100%;'>
     <div class='center-wrapper'>
-      <div class='center-content'>
-        <div>
-          <h4><?php echo $lang->ai->prompts->assignRole;?></h4>
-          <div class='content-row'>
-            <div class='input-label'><span><?php echo $lang->ai->prompts->model;?></span></div>
-            <div class='input mw-400px'>
-              <?php echo html::select('model', $lang->ai->models->typeList, current(array_keys($lang->ai->models->typeList)), "class='form-control chosen' required");?>
+      <div class='center-content' style="width: 100%; display: flex; flex-direction: row;">
+        <div style="flex-grow: 1; padding: 20px;">
+          <div>
+            <div style="display: flex; justify-content: space-between; align-items: center;">
+              <h4><?php echo $lang->ai->prompts->assignRole;?></h4>
+              <?php echo html::commonButton("<span>{$lang->ai->prompts->roleTemplate}</span> " . "<icon class='icon icon-chevron-right'></icon> ", 'id="expandRoleTemplatePanel"', 'btn btn-info');?>
+            </div>
+            <div class='content-row'>
+              <div class='input-label'><span><?php echo $lang->ai->prompts->model;?></span></div>
+              <div class='input mw-400px'>
+                <?php echo html::select('model', $lang->ai->models->typeList, current(array_keys($lang->ai->models->typeList)), "class='form-control chosen' required");?>
+              </div>
+            </div>
+            <div class='content-row'>
+              <div class='input-label'><span><?php echo $lang->ai->prompts->role;?></span></div>
+              <div class='input mw-400px'><?php echo html::input('role', $prompt->role, "class='form-control' placeholder='{$lang->ai->prompts->rolePlaceholder}'");?></div>
+            </div>
+            <div class='content-row'>
+              <div class='input-label'><span><?php echo $lang->ai->prompts->characterization;?></span></div>
+              <div class='input'><?php echo html::textarea('characterization', $prompt->characterization, "class='form-control' rows='4' placeholder='{$lang->ai->prompts->charPlaceholder}'");?></div>
             </div>
           </div>
-          <div class='content-row'>
-            <div class='input-label'><span><?php echo $lang->ai->prompts->role;?></span></div>
-            <div class='input mw-400px'><?php echo html::input('role', $prompt->role, "class='form-control' placeholder='{$lang->ai->prompts->rolePlaceholder}'");?></div>
-          </div>
-          <div class='content-row'>
-            <div class='input-label'><span><?php echo $lang->ai->prompts->characterization;?></span></div>
-            <div class='input'><?php echo html::textarea('characterization', $prompt->characterization, "class='form-control' rows='4' placeholder='{$lang->ai->prompts->charPlaceholder}'");?></div>
+          <div style='display: flex; flex-grow: 1; flex-direction: column-reverse;'>
+            <div style='display: flex; justify-content: center;'><?php echo html::submitButton($lang->ai->nextStep, 'disabled name="jumpToNext" value="1"');?></div>
           </div>
         </div>
-        <div style='display: flex; flex-grow: 1; flex-direction: column-reverse;'>
-          <div style='display: flex; justify-content: center;'><?php echo html::submitButton($lang->ai->nextStep, 'disabled name="jumpToNext" value="1"');?></div>
+        <div id="roleTemplate" style="display: none; flex-basis: 370px; flex-grow: 0; padding: 20px 24px; border-left: 1px solid #E6EAF1; background-color: #FCFDFE; border-top-right-radius: 4px; border-bottom-right-radius: 4px;">
+          <h4 class="v-top"">
+            <?php echo "<span style='padding-right: 4px;'>{$lang->ai->prompts->roleTemplate}</span>" . " <i class='icon icon-help' data-toggle='tooltip' data-placement='top' title='{$lang->ai->prompts->roleTemplateTip}'></i>";?>
+          </h4>
         </div>
       </div>
     </div>
@@ -58,15 +69,35 @@ function validateForm()
   }
   return pass;
 }
-$(function()
-{
-    $('select[name="model"]').change(function()
-    {
-        var model = $(this).val();
-        if(model)  $('button[type="submit"]').removeAttr('disabled');
-        if(!model) $('button[type="submit"]').attr('disabled', 'disabled');
-    });
-    $('select[name="model"]').trigger('change');
+
+$(function () {
+  $('[data-toggle="tooltip"]').tooltip();
+
+  $('select[name="model"]').change(function () {
+    var model = $(this).val();
+    if (model) $('button[type="submit"]').removeAttr('disabled');
+    if (!model) $('button[type="submit"]').attr('disabled', 'disabled');
+  });
+  $('select[name="model"]').trigger('change');
 });
+
+(function()
+{
+  const expandRoleTemplatePanel = document.getElementById('expandRoleTemplatePanel');
+  if(expandRoleTemplatePanel)
+  {
+    expandRoleTemplatePanel.addEventListener('click', function(e)
+    {
+      const roleTemplate = document.getElementById('roleTemplate');
+      const isPanelExpanded = roleTemplate.style.display === 'block';
+      expandRoleTemplatePanel.querySelector('icon').className = isPanelExpanded ? 'icon icon-chevron-right' : 'icon icon-chevron-left';
+      if(roleTemplate)
+      {
+        roleTemplate.style.display = isPanelExpanded ? 'none' : 'block';
+      }
+    });
+  }
+})();
+
 </script>
 <?php include '../../common/view/footer.html.php';?>