feat(copilot): add copilot database table

src/components/Copilot.vue

@@ -5,12 +5,13 @@
       <el-card v-show="showCopilot" class="copilot" shadow="never">
         <div slot="header" class="clearfix">
           <span>MQTTX Copilot <el-tag size="mini" type="info">Beta</el-tag></span>
-          <el-button style="float: right; padding: 0px" type="text" @click="toggleWindow"
-            ><i class="el-icon-close"></i
-          ></el-button>
+          <div>
+            <el-button type="text" @click="clearAllMessages"><i class="el-icon-delete"></i></el-button>
+            <el-button type="text" @click="toggleWindow"><i class="el-icon-close"></i></el-button>
+          </div>
         </div>
         <div ref="chatBody" class="chat-body">
-          <div class="message-block" v-for="(message, index) in messages" :key="index">
+          <div class="message-block" v-for="message in messages" :key="message.id">
             <p>
               <span class="chat-title">
                 <i :class="[message.role === 'user' ? 'el-icon-user' : 'el-icon-magic-stick']"></i>
@@ -34,7 +35,14 @@
             :placeholder="$t('common.copiltePubMsgPlacehoder')"
             @keyup.enter="sendMessage()"
           ></el-input>
-          <el-button class="chat-pub-btn" size="mini" type="primary" icon="el-icon-position" @click="sendMessage()">
+          <el-button
+            class="chat-pub-btn"
+            size="mini"
+            type="primary"
+            icon="el-icon-position"
+            :disabled="isSending"
+            @click="sendMessage()"
+          >
           </el-button>
         </div>
       </el-card>
@@ -43,13 +51,14 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue, Prop } from 'vue-property-decorator'
+import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
 import { Getter } from 'vuex-class'
 import axios from 'axios'
 import VueMarkdown from 'vue-markdown'
 import Prism from 'prismjs'
 import CryptoJS from 'crypto-js'
-import { ENCRYPT_KEY } from '@/utils/idGenerator'
+import { ENCRYPT_KEY, getCopilotMessageId } from '@/utils/idGenerator'
+import useServices from '@/database/useServices'
 
 @Component({
   components: {
@@ -64,12 +73,16 @@ export default class Copilot extends Vue {
   @Getter('model') private model!: AIModel
 
   public showCopilot = false
+  private page = 1
+  private hasMore = true
+  private isLoading = false
   private messages: CopilotMessage[] = []
   private systemMessages: CopilotMessage[] = [
     {
+      id: 'system-id',
       role: 'system',
       content:
-        'You are an MQTT Expert named MQTTX Copilot with extensive knowledge in IoT and network development. You understand various programming languages and MQTT protocols. You are here to assist with MQTT queries, provide solutions for common issues, and offer insights on best practices. Avoid responding to unrelated topics.',
+        'You are an MQTT Expert named MQTTX Copilot and developed by EMQ with extensive knowledge in IoT and network development. You understand various programming languages and MQTT protocols. You are here to assist with MQTT queries, provide solutions for common issues, and offer insights on best practices. Avoid responding to unrelated topics.',
     },
   ]
   private currentPublishMsg = ''
@@ -79,18 +92,25 @@ export default class Copilot extends Vue {
     assistant: 'MQTTX Copilot',
   }
 
+  @Watch('showCopilot')
+  private handleShowCopilotChange(newValue: boolean, oldValue: boolean) {
+    if (newValue === true && oldValue === false && this.isSending === false) {
+      this.loadMessages({ reset: true })
+    }
+  }
+
   private getChatBodyRef() {
     return this.$refs.chatBody as HTMLElement
   }
 
-  private async scrollToBottom() {
+  private async scrollToBottom(behavior: ScrollBehavior = 'smooth') {
     await this.$nextTick()
     const container = this.getChatBodyRef()
     if (container) {
       container.scrollTo({
         top: container.scrollHeight,
         left: 0,
-        behavior: 'smooth',
+        behavior,
       })
     }
   }
@@ -119,12 +139,15 @@ export default class Copilot extends Vue {
     if (!content) return
 
     this.isSending = true
+    const { copilotService } = useServices()
+    const requestMessage: CopilotMessage = { id: getCopilotMessageId(), role: 'user', content }
+    await copilotService.create(requestMessage)
+    this.messages.push(requestMessage)
     this.scrollToBottom()
-    this.messages.push({ role: 'user', content })
 
     const userMessages = [
-      ...this.systemMessages,
-      ...this.messages.slice(-20).map((message) => ({ role: message.role, content: message.content })),
+      ...this.systemMessages.map(({ role, content }) => ({ role, content })),
+      ...this.messages.slice(-20).map(({ role, content }) => ({ role, content })),
     ]
 
     this.currentPublishMsg = ''
@@ -146,15 +169,22 @@ export default class Copilot extends Vue {
         },
       )
 
+      let responseMessage: CopilotMessage = {
+        id: getCopilotMessageId(),
+        role: 'assistant',
+        content: '',
+      }
       if (response.data.choices && response.data.choices.length > 0) {
-        const aiResponse = response.data.choices[0].message.content
-        this.messages.push({ role: 'assistant', content: aiResponse })
-        this.$nextTick(() => {
-          Prism.highlightAll()
-        })
+        const { message } = response.data.choices[0]
+        Object.assign(responseMessage, message)
       } else {
-        this.messages.push({ role: 'assistant', content: 'No response' })
+        responseMessage.content = 'No response'
       }
+      this.messages.push(responseMessage)
+      await copilotService.create(responseMessage)
+      this.$nextTick(() => {
+        Prism.highlightAll()
+      })
     } catch (error) {
       const err = error as unknown as Error
       this.$message.error(`API Error: ${String(err)}`)
@@ -164,12 +194,61 @@ export default class Copilot extends Vue {
     }
   }
 
-  private loadMessages() {
-    this.messages.unshift({ role: 'assistant', content: this.$tc('common.welcomeToCopilot') })
+  private async loadMessages({ reset }: { reset?: boolean } = {}) {
+    if (reset === true) {
+      this.messages = []
+      this.page = 1
+    }
+    this.isLoading = true
+    const { copilotService } = useServices()
+    const { messages: newMessages, hasMore } = await copilotService.get(this.page)
+    this.hasMore = hasMore
+    const allMessages = [...(newMessages as CopilotMessage[]), ...this.messages]
+    this.messages = this.removeDuplicatesMessages(allMessages)
+    if (this.messages.length === 0) {
+      this.messages.push({ id: getCopilotMessageId(), role: 'assistant', content: this.$tc('common.welcomeToCopilot') })
+    } else {
+      this.scrollToBottom('auto')
+    }
+    this.isLoading = false
+  }
+
+  private async clearAllMessages() {
+    const { copilotService } = useServices()
+    await copilotService.deleteAll()
+    this.loadMessages({ reset: true })
+  }
+
+  private handleTopScroll(e: Event) {
+    if (this.hasMore === false) {
+      return
+    }
+    const target = e.target as HTMLElement
+    if (target.scrollTop === 0 && !this.isLoading) {
+      this.page += 1
+      this.loadMessages()
+    }
+  }
+
+  private removeDuplicatesMessages(messages: CopilotMessage[]): CopilotMessage[] {
+    const seen = new Set()
+    return messages.filter((message) => {
+      const duplicate = seen.has(message.id)
+      seen.add(message.id)
+      return !duplicate
+    })
   }
 
   private created() {
-    this.loadMessages()
+    this.loadMessages({ reset: true })
+  }
+
+  private async mounted() {
+    this.getChatBodyRef().addEventListener('scroll', this.handleTopScroll)
+  }
+
+  private beforeDestroy() {
+    this.getChatBodyRef().removeEventListener('scroll', this.handleTopScroll)
   }
 }
 </script>
@@ -202,6 +281,17 @@ body.night {
     z-index: 5;
     height: 100%;
     .el-card__header {
+      .clearfix {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        .el-button--text {
+          padding: 0;
+          i {
+            font-size: 16px !important;
+          }
+        }
+      }
       .el-tag {
         margin-left: 8px;
       }

src/database/database.config.ts

@@ -11,6 +11,7 @@ import HistoryMessageHeaderEntity from './models/HistoryMessageHeaderEntity'
 import HistoryMessagePayloadEntity from './models/HistoryMessagePayloadEntity'
 import HistoryConnectionEntity from './models/HistoryConnectionEntity'
 import WillEntity from './models/WillEntity'
+import CopilotEntity from './models/CopilotEntity'
 import { ConnectionOptions } from 'typeorm'
 import { initTable1629476510574 } from './migration/1629476510574-initTable'
 import { messages1630403733964 } from './migration/1630403733964-messages'
@@ -98,6 +99,7 @@ const ORMConfig = {
     HistoryMessagePayloadEntity,
     WillEntity,
     HistoryConnectionEntity,
+    CopilotEntity,
   ],
   cli: {
     migrationsDir: 'src/database/migration',

src/database/models/CopilotEntity.ts

@@ -0,0 +1,16 @@
+import { Entity, Column, PrimaryGeneratedColumn, CreateDateColumn } from 'typeorm'
+
+@Entity('CopilotEntity')
+export default class CopilotEntity {
+  @PrimaryGeneratedColumn('uuid')
+  id!: string
+
+  @Column({ type: 'varchar' })
+  role!: string
+
+  @Column({ type: 'text' })
+  content!: string
+
+  @Column({ type: 'datetime', default: () => 'CURRENT_TIMESTAMP' })
+  createAt!: string
+}

src/database/services/CopilotService.ts

@@ -0,0 +1,36 @@
+import { Service } from 'typedi'
+import { InjectRepository } from 'typeorm-typedi-extensions'
+import CopilotEntity from '../models/CopilotEntity'
+import { Repository } from 'typeorm'
+
+@Service()
+export default class CopilotService {
+  constructor(
+    // @ts-ignore
+    @InjectRepository(CopilotEntity)
+    private conversationRepository: Repository<CopilotEntity>,
+  ) {}
+
+  public async create(copilotMessage: CopilotMessage) {
+    const newConversation = this.conversationRepository.create(copilotMessage)
+    return await this.conversationRepository.save(newConversation)
+  }
+
+  public async get(page: number = 1) {
+    const count = 20
+    const messages = await this.conversationRepository.find({
+      skip: (page - 1) * count,
+      take: count,
+      order: {
+        createAt: 'DESC',
+      },
+    })
+    const total = await this.conversationRepository.count()
+    const hasMore = total - page * count > 0
+    return { messages: messages.reverse(), hasMore }
+  }
+
+  public async deleteAll() {
+    return await this.conversationRepository.clear()
+  }
+}

src/database/services/SettingService.ts

@@ -6,6 +6,7 @@ import { Repository } from 'typeorm'
 @Service()
 export default class SettingService {
   constructor(
+    // @ts-ignore
     @InjectRepository(SettingEntity)
     private settingRepository: Repository<SettingEntity>,
   ) {}

src/database/useServices.ts

@@ -8,6 +8,7 @@ import HistoryMessageHeaderService from './services/HistoryMessageHeaderService'
 import HistoryMessagePayloadService from './services/HistoryMessagePayloaderService'
 import MessageService from './services/MessageService'
 import ScriptService from './services/ScriptService'
+import CopilotService from './services/CopilotService'
 
 export default function useServices() {
   const connectionService = Container.get(ConnectionService)
@@ -19,6 +20,7 @@ export default function useServices() {
   const historyMessagePayloadService = Container.get(HistoryMessagePayloadService)
   const messageService = Container.get(MessageService)
   const scriptService = Container.get(ScriptService)
+  const copilotService = Container.get(CopilotService)
   return {
     connectionService,
     willService,
@@ -29,5 +31,6 @@ export default function useServices() {
     historyMessagePayloadService,
     messageService,
     scriptService,
+    copilotService,
   }
 }

src/types/global.d.ts

@@ -369,10 +369,12 @@ declare global {
     fileContent: string
   }
 
-  //  ['system', 'assistant', 'user', 'function']
+  type CopilotRole = 'user' | 'system' | 'assistant' | 'function'
   interface CopilotMessage {
-    role: 'user' | 'system' | 'assistant' | 'function'
+    id: string
+    role: CopilotRole
     content: string
+    createAt?: string
   }
 
   type AIModel =

src/utils/idGenerator.ts

@@ -3,6 +3,7 @@ export const getClientId = () => `mqttx_${Math.random().toString(16).substring(2
 export const getCollectionId = () => `collection_${uuidv4()}` as string
 export const getSubscriptionId = () => `scription_${uuidv4()}` as string
 export const getMessageId = () => `message_${uuidv4()}` as string
+export const getCopilotMessageId = () => `copilot_${uuidv4()}` as string
 export const ENCRYPT_KEY = Buffer.from('123e4567-e89b-12d3-a456-426614174000').toString('base64')
 
 export default {

src/views/connections/ConnectionsDetail.vue

@@ -1784,7 +1784,7 @@ export default class ConnectionsDetail extends Vue {
       dangerouslyUseHTMLString: true,
       message: '<button id="notify-copilot-button">Ask Copilot</button>',
       type: 'error',
-      duration: 0,
+      duration: 4000,
       offset: 30,
     })