feat(chat): use adapter-satori in the client

Author: shigma

packages/chat/client/index.ts

@@ -1,22 +1,34 @@
 import { Context } from '@cordisjs/client'
+import HTTP from '@cordisjs/plugin-http'
+import Satori from '@satorijs/core'
+import SatoriAdapter from '@satorijs/adapter-satori'
 import {} from '../src'
 import Chat from './index.vue'
 import './icons'
 
 export default (ctx: Context) => {
-  ctx.page({
-    path: '/chat',
-    name: '聊天',
-    icon: 'activity:chat',
-    order: 100,
-    component: Chat,
-  })
+  ctx.plugin(HTTP)
+  ctx.plugin(Satori)
+
+  ctx.inject(['satori'], (ctx) => {
+    ctx.plugin(SatoriAdapter, {
+      endpoint: new URL('/satori', location.href).href,
+    })
 
-  ctx.menu('chat.message', [{
-    id: '.delete',
-    label: '删除消息',
-  }, {
-    id: '.quote',
-    label: '引用回复',
-  }])
+    ctx.page({
+      path: '/chat',
+      name: '聊天',
+      icon: 'activity:chat',
+      order: 100,
+      component: Chat,
+    })
+
+    ctx.menu('chat.message', [{
+      id: '.delete',
+      label: '删除消息',
+    }, {
+      id: '.quote',
+      label: '引用回复',
+    }])
+  })
 }

packages/chat/client/index.vue

@@ -19,21 +19,39 @@
             <div>{{ guild.id }}</div>
           </div>
         </div>
-      </div>
+      </el-scrollbar>
     </template>
   </k-layout>
 </template>
 
 <script lang="ts" setup>
 
 import { onMounted, ref, computed, watch, reactive } from 'vue'
-import { useRpc } from '@cordisjs/client'
+import { useContext, useRpc } from '@cordisjs/client'
 import type { Data } from '../src'
+import { Universal } from '@satorijs/core'
 
 const data = useRpc<Data>()
+const ctx = useContext()
+
+function short(name: string) {
+  return name.slice(0, 2)
+}
+
+function withProxy(url: string) {
+  return (data.value.proxy ? data.value.proxy + '/' : '') + url
+}
+
+async function onClickGuild(guild: Universal.Guild) {
+  console.log(await ctx.get('satori')!.bots[0].getChannelList(guild.id))
+}
 
 </script>
 
 <style lang="scss" scoped>
 
+.el-scrollbar :deep(.el-scrollbar__view) {
+  padding: 1rem 0;
+}
+
 </style>

packages/chat/package.json

@@ -33,16 +33,25 @@
       "required": [
         "satori.database",
         "webui"
+      ],
+      "optional": [
+        "server.proxy"
       ]
     }
   },
   "peerDependencies": {
-    "@cordisjs/plugin-webui": "^0.1.1",
+    "@cordisjs/plugin-webui": "^0.1.3",
     "@satorijs/core": "^4.0.0",
     "@satorijs/plugin-database": "^0.1.1"
   },
   "devDependencies": {
-    "@cordisjs/client": "^0.1.1"
+    "@cordisjs/client": "^0.1.3",
+    "@cordisjs/plugin-http": "^0.4.2",
+    "@cordisjs/plugin-server-proxy": "^0.2.0",
+    "@cordisjs/plugin-webui": "^0.1.3",
+    "@satorijs/adapter-satori": "^1.2.0",
+    "@satorijs/core": "^4.0.0",
+    "@satorijs/plugin-database": "^0.1.1"
   },
   "dependencies": {
     "cosmokit": "^1.6.2"

packages/chat/src/index.ts

@@ -1,8 +1,11 @@
 import { Context, Dict, mapValues, Schema, Universal } from '@satorijs/core'
 import {} from '@cordisjs/plugin-webui'
+import {} from '@cordisjs/plugin-server-proxy'
 import {} from '@satorijs/plugin-database'
 
 export interface Data {
+  proxy?: string
+  logins: Universal.Login[]
   guilds: Dict<Universal.Guild>
 }
 
@@ -22,6 +25,8 @@ export function apply(ctx: Context) {
       import.meta.resolve('../dist/style.css'),
     ],
   }, () => ({
+    proxy: ctx.get('server.proxy')?.path,
+    logins: ctx.bots.map(bot => bot.toJSON()),
     guilds: mapValues(ctx.satori.database._guilds, g => g.data),
   }))