* render ai history messages.

module/ai/control.php

@@ -159,12 +159,17 @@ class ai extends control
             $isRetry = $this->post->retry == 'true';
 
             $messages = json_decode($history);
-            if(!$isRetry) $messages[] = (object)array('role' => 'user', 'content' => $message);
+            if(!$isRetry)
+            {
+                $messages[] = (object)array('role' => 'user', 'content' => $message);
+                $this->ai->saveMiniProgramMessage($id, 'req', $message);
+            }
             if($this->ai->isModelConfigured())
             {
                 $response = $this->ai->converse($messages);
                 if(empty($response)) return $this->send(array('result' => 'fail', 'message' => $this->lang->ai->chatNoResponse, 'reason' => 'no response'));
 
+                $this->ai->saveMiniProgramMessage($id, 'res', is_array($response) ? current($response) : $response);
                 return $this->send(array('result' => 'success', 'message' => array('time' => date("Y/m/d H:m:s"), 'role' => 'assistant', 'content' => is_array($response) ? current($response) : $response)));
             }
             else
@@ -174,6 +179,7 @@ class ai extends control
         }
 
         $this->view->miniProgram  = $miniProgram;
+        $this->view->messages     = $this->ai->getHistoryMessages($id);
         $this->view->fields       = $this->ai->getMiniProgramFields($id);
         $this->view->collectedIDs = $this->ai->getCollectedMiniProgramIDs($this->app->user->id);
         $this->view->title        = "{$this->lang->ai->miniPrograms->common}#{$miniProgram->id} $miniProgram->name";

module/ai/js/miniprogramchat.ui.js

@@ -236,12 +236,12 @@ window.aiMiniProgramChat.handleInput = (event) =>
 
 /**
  *
- * @param {'ai'|'user'} type
+ * @param {'ai'|'user'} role
  * @returns {jQuery}
  */
-function createAvatar(type)
+function createAvatar(role)
 {
-    const $avatar = type === 'user'
+    const $avatar = role === 'user'
         ? $('#userMenu-toggle > div.avatar').clone()
         : $('#program-avatar').clone().removeAttr('id');
     $avatar.addClass('message-avatar');
@@ -260,26 +260,26 @@ function createMessageTime(time)
 
 /**
  *
- * @param {'user'|'ai'} type
+ * @param {'user'|'ai'} role
  * @param {string} content
  * @returns {jQuery}
  */
-function createMessageContent(type, content)
+function createMessageContent(role, content)
 {
-    return $(`<div class="message-content ${type}-message-content">${content}</div>`);
+    return $(`<div class="message-content ${role}-message-content">${content}</div>`);
 }
 
 /**
  *
- * @param {'user'|'ai'} type
+ * @param {'user'|'ai'} role
  * @param {string} content
  * @param {string} time
  * @returns {jQuery}
  */
-function createMessageBody(type, content, time)
+function createMessageBody(role, content, time)
 {
     const $time = createMessageTime(time);
-    const $content = createMessageContent(type, content);
+    const $content = createMessageContent(role, content);
     return $(`<div class="message-body"></div>`)
         .append($time)
         .append($content);
@@ -287,16 +287,16 @@ function createMessageBody(type, content, time)
 
 /**
  *
- * @param {'user'|'ai'} type
+ * @param {'user'|'ai'} role
  * @param {string} content
  * @param {string} time
  * @returns {jQuery}
  */
-function createMessage(type, content, time = (new Date).toLocaleString())
+function createMessage(role, content, time = (new Date).toLocaleString())
 {
-    const $avatar = createAvatar(type);
-    const $body = createMessageBody(type, content, time);
-    return $(`<div class="message ${type}-message"></div>`)
+    const $avatar = createAvatar(role);
+    const $body = createMessageBody(role, content, time);
+    return $(`<div class="message ${role}-message"></div>`)
         .append($avatar)
         .append($body);
 }
@@ -307,4 +307,18 @@ $(function()
     $('#reload-current').on('click', () => {
         location.reload();
     });
+    console.log(messages);
+    const $messageList = $('.chat-history .message-list');
+    const messagesReverse = messages.reverse();
+    for(let i = 0; i< messagesReverse.length; i++)
+    {
+        const message = messagesReverse[i];
+        const {type, content, createdDate: time} = message;
+        let role;
+        if(type === 'req') role = 'user';
+        else if(type === 'res') role = 'ai';
+        const $message = createMessage(role, content, time);
+        $messageList.append($message);
+    }
+    $messageList[0].scrollTo(0, $messageList[0].scrollHeight);
 });

module/ai/model.php

@@ -328,6 +328,44 @@ class aiModel extends model
         return array_keys($paris);
     }
 
+    public function saveMiniProgramMessage($appID, $type, $content)
+    {
+        $message = new stdClass();
+        $message->appID = $appID;
+        $message->user = $this->app->user->id;
+        $message->type = $type;
+        $message->content = $content;
+        $message->createdDate = helper::now();
+
+        $this->dao->insert(TABLE_AIMESSAGE)
+            ->data($message)
+            ->exec();
+        return !dao::isError();
+    }
+
+    public function getHistoryMessages($appID, $limit = 20)
+    {
+        $messages = $this->dao->select('*')
+            ->from(TABLE_AIMESSAGE)
+            ->where('appID')->eq($appID)
+            ->andWhere('user')->eq($this->app->user->id)
+            ->orderBy('createdDate_desc')
+            ->limit($limit)
+            ->fetchAll();
+
+        $messageIDs = array();
+        foreach ($messages as $message) $messageIDs[] = $message->id;
+
+        $this->dao->delete()
+            ->from(TABLE_AIMESSAGE)
+            ->where('appID')->eq($appID)
+            ->andWhere('user')->eq($this->app->user->id)
+            ->andWhere('id')->notin($messageIDs)
+            ->exec();
+
+        return $messages;
+    }
+
     /**
      * Get mini programs by appid.
      *

module/ai/ui/miniprogramchat.html.php

@@ -7,6 +7,7 @@ jsVar('prompt', $miniProgram->prompt);
 jsVar('regenerateLang', $lang->ai->miniPrograms->regenerate);
 jsVar('emptyNameWarning', $lang->ai->miniPrograms->field->emptyNameWarning);
 jsVar('postLink', createLink('ai', 'miniProgramChat', "id={$miniProgram->id}"));
+jsVar('messages', $messages);
 
 $isDeleted = $miniProgram->deleted === '1';
 
@@ -167,7 +168,8 @@ div(
         )
     ),
     div(
-        setClass('chat chat-nomodel shadow-md flex-1 center hidden'),
+        setClass('chat chat-nomodel shadow-md flex-1 center'),
+        setClass(array('hidden' => !empty($messages))),
         div(
             p(
                 icon(set::name('exclamation'), setClass('mr-2'), setStyle(array('color' => 'rgb(255, 159, 70)'))),
@@ -178,6 +180,7 @@ div(
     ),
     div(
         setClass('chat chat-history shadow-md flex-1 col'),
+        setClass(array('hidden' => empty($messages))),
         div(
             setClass('flex-1 message-list'),
         ),