feat(chat): basic support for message list

Author: shigma

packages/chat/client/index.ts

@@ -35,7 +35,6 @@ export default class ChatService extends Service {
         result[key].assignees.push(data.bot.sid!)
       }
     }
-    console.log(1, result, this.logins)
     return result
   })
 

packages/chat/client/index.vue

@@ -5,7 +5,7 @@
         <template v-if="guildKey">
           <div class="w-3rem h-full items-center justify-center flex
             bg-gray-700 bg-op-0 hover:bg-op-100 transition cursor-pointer"
-            @click="guildKey = undefined, channels = []">
+            @click="setGuild()">
             <k-icon name="arrow-left" class="h-4"></k-icon>
           </div>
           <div class="font-bold flex items-center flex-1">{{ ctx.chat.guilds.value[guildKey].name }}</div>
@@ -14,18 +14,21 @@
           <div class="font-bold flex items-center flex-1 justify-center">消息列表</div>
         </template>
       </div>
+
       <el-scrollbar v-if="guildKey">
         <div v-for="(channel, index) in channels" :key="channel.id"
           class="flex px-4 py-1 items-center
-            bg-gray-700 bg-op-0 hover:bg-op-100 transition cursor-pointer">
+            bg-gray-700 bg-op-0 hover:bg-op-100 transition cursor-pointer"
+          @click="setChannel(channel)"
+        >
           {{ channel.name }}
         </div>
       </el-scrollbar>
       <el-scrollbar v-else>
         <div v-for="(guild, key) in ctx.chat.guilds.value" :key="key"
           class="flex px-4 py-3 gap-x-4 justify-between
             bg-gray-700 bg-op-0 hover:bg-op-100 transition cursor-pointer"
-          @click="onClickGuild(guild)"
+          @click="setGuild(guild)"
         >
           <img v-if="guild.avatar" :src="withProxy(guild.avatar)" width="48" height="48" class="b-rd-full"/>
           <div v-else
@@ -41,21 +44,41 @@
         </div>
       </el-scrollbar>
     </template>
+
+    <template v-if="channelId">
+      <el-scrollbar>
+        <div v-for="message in messages" :key="message.id" class="message">
+          <message-content :content="message.content!"></message-content>
+        </div>
+      </el-scrollbar>
+      <div class="footer shrink-0">
+        <chat-input class="h-6 px-4 py-2" v-model="input" @send="handleSend" placeholder="发送消息"></chat-input>
+      </div>
+    </template>
+    <template v-else>
+      <k-empty>选择一个频道开始聊天</k-empty>
+    </template>
   </k-layout>
 </template>
 
 <script lang="ts" setup>
 
-import { onMounted, ref, computed, watch, reactive } from 'vue'
+import { ref } from 'vue'
 import { useContext, useRpc } from '@cordisjs/client'
 import type { Data } from '../src'
-import type { Universal } from '@satorijs/core'
+import { Universal } from '@satorijs/core'
+import { ChatInput, MessageContent } from '@satorijs/components-vue'
 
 const data = useRpc<Data>()
 const ctx = useContext()
 
+const platform = ref<string>()
 const guildKey = ref<string>()
+const channelId = ref<string>()
 const channels = ref<Universal.Channel[]>([])
+const messages = ref<Universal.Message[]>([])
+
+const input = ref('')
 
 function short(name: string) {
   return name.slice(0, 2)
@@ -65,14 +88,30 @@ function withProxy(url: string) {
   return (data.value.proxy ? data.value.proxy + '/' : '') + url
 }
 
-async function onClickGuild(guild: Universal.Guild & { platform: string; assignees: string[] }) {
-  guildKey.value = `${guild.platform}/${guild.id}`
+async function setGuild(guild?: Universal.Guild & { platform: string; assignees: string[] }) {
   channels.value = []
-  for await (const channel of ctx.chat.logins[guild.assignees[0]].bot.getChannelIter(guild.id)) {
+  channelId.value = undefined
+  if (!guild) return guildKey.value = undefined
+  platform.value = guild.platform
+  guildKey.value = `${guild.platform}/${guild.id}`
+  for await (const channel of ctx.bots[guild.assignees[0]].getChannelIter(guild.id)) {
     channels.value.push(channel)
   }
 }
 
+async function setChannel(channel: Universal.Channel) {
+  channelId.value = channel.id
+  messages.value = []
+  for await (const message of ctx.bots[ctx.chat.guilds.value[guildKey.value!].assignees[0]].getMessageIter(channel.id)) {
+    if (channelId.value !== channel.id || messages.value.length >= 100) return
+    messages.value.unshift(message)
+  }
+}
+
+function handleSend(content: string) {
+  return ctx.bots[ctx.chat.guilds.value[guildKey.value!].assignees[0]].sendMessage(channelId.value!, content)
+}
+
 </script>
 
 <style lang="scss" scoped>
@@ -82,4 +121,13 @@ async function onClickGuild(guild: Universal.Guild & { platform: string; assigne
   border-bottom: var(--k-color-divider-dark) 1px solid;
 }
 
+.k-layout :deep(main) {
+  display: flex;
+  flex-direction: column;
+}
+
+.footer {
+  border-top: var(--k-color-divider-dark) 1px solid;
+}
+
 </style>