fix(webui): fix sandbox style regression

packages/plugin-chat/client/sandbox.vue

@@ -50,21 +50,22 @@ receive('sandbox:clear', (data) => {
 <style lang="scss">
 
 .sandbox {
-  p {
-    padding-left: 1rem;
+  .k-message {
+    padding-left: 1.25rem;
     color: rgba(244, 244, 245, .8);
+
+    &::before {
+      position: absolute;
+      left: 0;
+    }
   }
 
-  p.user::before {
+  .k-message.user::before {
     content: '>';
-    position: absolute;
-    left: -.1rem;
   }
 
-  p.bot::before {
+  .k-message.bot::before {
     content: '<';
-    position: absolute;
-    left: -.1rem;
   }
 }
 

packages/plugin-chat/client/utils/message.vue

@@ -44,6 +44,7 @@ const segmentTypes = {
 .k-message {
   white-space: break-spaces;
   line-height: 1.5;
+  position: relative;
 
   img {
     max-height: 320px;

packages/plugin-chat/src/index.ts

@@ -1,6 +1,6 @@
-import { Context, template } from 'koishi-core'
+import { Bot, Context, Random, Session, template } from 'koishi-core'
 import { resolve } from 'path'
-import {} from 'koishi-plugin-webui'
+import { WebAdapter } from 'koishi-plugin-webui'
 import receiver, { Message, ReceiverConfig } from './receiver'
 
 export * from './receiver'
@@ -21,6 +21,20 @@ template.set('chat', {
   receive: '[{{ channelName || "私聊" }}] {{ username }}: {{ abstract }}',
 })
 
+export class SandboxBot extends Bot<'web'> {
+  username = 'sandbox'
+  status = Bot.Status.GOOD
+
+  constructor(public readonly adapter: WebAdapter) {
+    super(adapter, { type: 'web', selfId: 'sandbox' })
+  }
+
+  async sendMessage(id: string, content: string) {
+    this.adapter.handles[id]?.send('sandbox:bot', content)
+    return Random.uuid()
+  }
+}
+
 export const name = 'chat'
 
 export function apply(ctx: Context, options: Config = {}) {
@@ -39,7 +53,7 @@ export function apply(ctx: Context, options: Config = {}) {
     ctx.logger('message').debug(template('chat.' + (session.type === 'message' ? 'receive' : 'send'), message))
   })
 
-  ctx.with(['koishi-plugin-webui'] as const, (ctx) => {
+  ctx.with(['koishi-plugin-webui'] as const, (ctx, { Profile }) => {
     const { devMode } = ctx.webui.config
     const filename = devMode ? '../client/index.ts' : '../dist/index.js'
     ctx.webui.addEntry(resolve(__dirname, filename))
@@ -52,6 +66,37 @@ export function apply(ctx: Context, options: Config = {}) {
       ctx.bots[`${platform}:${selfId}`]?.sendMessage(channelId, content)
     })
 
+    const sandbox = ctx.webui.adapter.create({}, SandboxBot)
+    Profile.initBot(sandbox)
+
+    ctx.webui.addListener('sandbox', async function ({ id, token, content }) {
+      const user = await this.validate(id, token, ['name'])
+      if (!user) return
+      content = await this.app.transformAssets(content)
+      this.send('sandbox:user', content)
+      const session = new Session(this.app, {
+        platform: 'web',
+        userId: id,
+        content,
+        channelId: this.id,
+        selfId: 'sandbox',
+        type: 'message',
+        subtype: 'private',
+        author: {
+          userId: 'id',
+          username: user.name,
+        },
+      })
+      session.platform = 'id' as never
+      this.adapter.dispatch(session)
+    })
+
+    ctx.self('sandbox')
+      .command('clear', '清空消息列表')
+      .action(({ session }) => {
+        this.handles[session.channelId].send('sandbox:clear')
+      })
+
     ctx.on('chat/receive', async (message) => {
       Object.values(ctx.webui.adapter.handles).forEach((handle) => {
         if (handle.authority >= 4) handle.socket.send(JSON.stringify({ type: 'chat', body: message }))

packages/plugin-webui/src/adapter.ts

@@ -1,5 +1,4 @@
-import { Adapter, App, Bot, Context, Logger, omit, pick, Random, remove, Session, Time, User } from 'koishi-core'
-import { Profile } from './data'
+import { Adapter, App, Bot, Context, Logger, omit, pick, Random, remove, Time, User } from 'koishi-core'
 import WebSocket from 'ws'
 
 const logger = new Logger('status')
@@ -30,21 +29,6 @@ export class SocketHandle {
   }
 }
 
-export class SandboxBot extends Bot<'web'> {
-  username = 'sandbox'
-  status = Bot.Status.GOOD
-
-  constructor(public readonly adapter: WebAdapter) {
-    super(adapter, { type: 'web', selfId: 'sandbox' })
-    Profile.initBot(this)
-  }
-
-  async sendMessage(id: string, content: string) {
-    this.adapter.handles[id]?.send('sandbox:bot', content)
-    return Random.uuid()
-  }
-}
-
 export namespace WebAdapter {
   export interface Config {
     apiPath?: string
@@ -57,7 +41,6 @@ export namespace WebAdapter {
 export class WebAdapter extends Adapter<'web'> {
   readonly server: WebSocket.Server
   readonly handles: Record<string, SocketHandle> = {}
-  readonly sandbox = this.create({}, SandboxBot)
 
   static readonly listeners: Record<string, WebAdapter.Listener> = {}
 
@@ -69,12 +52,6 @@ export class WebAdapter extends Adapter<'web'> {
       server: ctx.app._httpServer,
     })
 
-    ctx.self('sandbox')
-      .command('clear', '清空消息列表')
-      .action(({ session }) => {
-        this.handles[session.channelId].send('sandbox:clear')
-      })
-
     ctx.all().middleware(async (session, next) => {
       if (session.subtype !== 'private') return next()
       const state = states[session.uid]
@@ -160,25 +137,3 @@ WebAdapter.listeners.login = async function ({ username, password }) {
   this.send('user', omit(user, ['password']))
   this.authority = user.authority
 }
-
-WebAdapter.listeners.sandbox = async function ({ id, token, content }) {
-  const user = await this.validate(id, token, ['name'])
-  if (!user) return
-  content = await this.app.transformAssets(content)
-  this.send('sandbox:user', content)
-  const session = new Session(this.app, {
-    platform: 'web',
-    userId: id,
-    content,
-    channelId: this.id,
-    selfId: 'sandbox',
-    type: 'message',
-    subtype: 'private',
-    author: {
-      userId: 'id',
-      username: user.name,
-    },
-  })
-  session.platform = 'id' as never
-  this.adapter.dispatch(session)
-}