From 1d8e65b4c240a232941e75368e2e917640ce8cc7 Mon Sep 17 00:00:00 2001
From: Shigma <1700011071@pku.edu.cn>
Date: Thu, 17 Feb 2022 18:43:16 +0800
Subject: [PATCH] feat(client): support <k-chat-panel>

---
 plugins/frontend/chat/client/chat.vue         |  33 ++-
 plugins/frontend/chat/client/index.ts         |   6 -
 plugins/frontend/chat/client/utils/image.vue  |  23 --
 plugins/frontend/chat/client/utils/list.vue   | 180 ------------
 .../frontend/chat/client/utils/message.vue    |  60 ----
 plugins/frontend/chat/client/utils/panel.vue  |  96 -------
 plugins/frontend/chat/client/utils/virtual.ts | 258 ------------------
 .../client/client/components/chat/image.vue   |   8 +-
 .../client/client/components/chat/list.vue    |   2 +-
 .../client/components/chat}/overlay.vue       |   0
 .../client/client/components/chat/panel.vue   |  10 +-
 .../client/components/chat/utils.ts}          |   1 -
 .../client/components/notice/markdown.vue     |   4 +-
 plugins/frontend/client/client/index.ts       |   8 +
 plugins/frontend/sandbox/client/message.vue   |   1 -
 15 files changed, 45 insertions(+), 645 deletions(-)
 delete mode 100644 plugins/frontend/chat/client/utils/image.vue
 delete mode 100644 plugins/frontend/chat/client/utils/list.vue
 delete mode 100644 plugins/frontend/chat/client/utils/message.vue
 delete mode 100644 plugins/frontend/chat/client/utils/panel.vue
 delete mode 100644 plugins/frontend/chat/client/utils/virtual.ts
 rename plugins/frontend/{chat/client => client/client/components/chat}/overlay.vue (100%)
 rename plugins/frontend/{chat/client/utils/index.ts => client/client/components/chat/utils.ts} (83%)

diff --git a/plugins/frontend/chat/client/chat.vue b/plugins/frontend/chat/client/chat.vue
index 342ded6186..1670e898b4 100644
--- a/plugins/frontend/chat/client/chat.vue
+++ b/plugins/frontend/chat/client/chat.vue
@@ -1,8 +1,8 @@
 <template>
-  <chat-panel class="page-chat" :messages="messages" pinned
+  <k-chat-panel class="k-card page-chat" :messages="messages" pinned
     v-model:active-key="index" :item-class="getItemClass"
     @click="handleClick" @send="handleSend">
-    <template #default="message">
+    <template #="message">
       <div class="quote" v-if="message.quote" @click="onClickQuote(message.quote.messageId)">
         <img class="quote-avatar" :src="message.quote.author.avatar"/>
         <span class="username">{{ message.quote.author.username }}</span>
@@ -19,7 +19,7 @@
           <span class="timestamp">{{ formatDateTime(new Date(message.timestamp)) }}</span>
         </div>
       </template>
-      <chat-message :content="message.content"/>
+      <k-message-content :content="message.content"/>
     </template>
     <template #footer>
       <p class="hint">
@@ -27,15 +27,13 @@
         <template v-else>点击消息已选择要发送的频道。</template>
       </p>
     </template>
-  </chat-panel>
+  </k-chat-panel>
 </template>
 
 <script lang="ts" setup>
 
 import { config, receive, send } from '@koishijs/client'
 import { ref, watch } from 'vue'
-import ChatPanel from './utils/panel.vue'
-import ChatMessage from './utils/message.vue'
 import type { Message } from '@koishijs/plugin-chat/src'
 
 namespace storage {
@@ -125,6 +123,10 @@ $padding: $avatarSize + 1rem;
   position: relative;
   height: calc(100vh - 4rem);
 
+  .k-virtual-list-wrapper {
+    margin: 1rem 0;
+  }
+
   .successive {
     .timestamp {
       position: absolute;
@@ -142,10 +144,6 @@ $padding: $avatarSize + 1rem;
     }
   }
 
-  .k-chat-message:not(.successive):not(:first-child) {
-    margin-top: 0.5rem;
-  }
-
   .avatar {
     position: absolute;
     margin-top: 4px;
@@ -212,10 +210,23 @@ $padding: $avatarSize + 1rem;
     font-size: 0.75rem;
   }
 
-  .k-message {
+  .k-message-content {
     margin-left: $padding;
   }
 
+  .k-chat-message {
+    padding: 0 1.5rem;
+    word-break: break-word;
+
+    &:hover {
+      background-color: var(--hover-bg);;
+    }
+
+    &:not(.successive) {
+      margin-top: 0.5rem;
+    }
+  }
+
   p.hint {
     color: #72767d;
     margin: 0.5rem 0 -0.5rem;
diff --git a/plugins/frontend/chat/client/index.ts b/plugins/frontend/chat/client/index.ts
index dd9b0a1bd1..7814ce8e21 100644
--- a/plugins/frontend/chat/client/index.ts
+++ b/plugins/frontend/chat/client/index.ts
@@ -1,13 +1,7 @@
 import { Context } from '@koishijs/client'
 import Chat from './chat.vue'
-import Overlay from './overlay.vue'
 
 export default (ctx: Context) => {
-  ctx.addView({
-    type: 'global',
-    component: Overlay,
-  })
-
   ctx.addPage({
     path: '/chat',
     name: '聊天',
diff --git a/plugins/frontend/chat/client/utils/image.vue b/plugins/frontend/chat/client/utils/image.vue
deleted file mode 100644
index 7291a4c0d8..0000000000
--- a/plugins/frontend/chat/client/utils/image.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<template>
-  <img class="k-image" :src="normalizeUrl(src)" @click="handleClick"/>
-</template>
-
-<script lang="ts" setup>
-
-import { shared } from '.'
-import { config } from '@koishijs/client'
-
-const props = defineProps<{ src: string }>()
-
-function normalizeUrl(url: string) {
-  if (!config.whitelist.some(prefix => url.startsWith(prefix))) return url
-  return config.endpoint + '/assets/' + encodeURIComponent(url)
-}
-
-function handleClick(ev: MouseEvent) {
-  ev.preventDefault()
-  if (ev.metaKey) return window.open(props.src, '_blank')
-  shared.overlayImage = ev.target as HTMLImageElement
-}
-
-</script>
diff --git a/plugins/frontend/chat/client/utils/list.vue b/plugins/frontend/chat/client/utils/list.vue
deleted file mode 100644
index 69783566d3..0000000000
--- a/plugins/frontend/chat/client/utils/list.vue
+++ /dev/null
@@ -1,180 +0,0 @@
-<template>
-  <el-scrollbar ref="root" @scroll="onScroll">
-    <virtual-item v-if="$slots.header" @resize="virtual.saveSize" uid="header">
-      <slot name="header"/>
-    </virtual-item>
-    <div :style="wrapperStyle">
-      <virtual-item v-for="(item, index) in dataShown"
-        :tag="itemTag" :class="resolveItemClass(item, index)" :uid="item[keyName]"
-        @click.stop="emit('click', item, $event)" @resize="virtual.saveSize">
-        <slot v-bind="item" :index="index + range.start"/>
-      </virtual-item>
-    </div>
-    <virtual-item v-if="$slots.footer" @resize="virtual.saveSize" uid="footer">
-      <slot name="footer"/>
-    </virtual-item>
-    <div ref="shepherd"/>
-  </el-scrollbar>
-</template>
-
-<script lang="ts" setup>
-
-import { ref, computed, watch, nextTick, onMounted, onUpdated, onBeforeUnmount, defineComponent, h } from 'vue'
-import Virtual from './virtual'
-
-const emit = defineEmits(['click', 'scroll', 'top', 'bottom', 'update:activeKey'])
-
-const props = defineProps({
-  keyName: { type: String, required: true },
-  data: { type: Array, required: true },
-  count: { default: 50 },
-  estimated: { default: 50 },
-  itemTag: { default: 'div' },
-  itemClass: {},
-  pinned: Boolean,
-  activeKey: { default: '' },
-  threshold: { default: 0 },
-})
-
-const dataShown = computed<any[]>(() => props.data.slice(range.start, range.end))
-
-function resolveItemClass(item: any, index: number) {
-  return typeof props.itemClass === 'function'
-    ? props.itemClass(item, index + range.start)
-    : props.itemClass
-}
-
-const root = ref<{ wrap$: HTMLElement }>()
-
-watch(() => props.data.length, () => {
-  const { scrollTop, clientHeight, scrollHeight } = root.value.wrap$
-  if (!props.pinned || Math.abs(scrollTop + clientHeight - scrollHeight) < 1) {
-    nextTick(scrollToBottom)
-  }
-  virtual.updateUids(getUids())
-  virtual.handleDataChange()
-})
-
-watch(() => props.activeKey, (value) => {
-  if (!value) return
-  emit('update:activeKey', null)
-  scrollToUid(value, true)
-})
-
-const shepherd = ref<HTMLElement>()
-
-const wrapperStyle = computed(() => {
-  const { padFront, padBehind } = range
-  return { padding: `${padFront}px 0px ${padBehind}px` }
-})
-
-const virtual = new Virtual({
-  count: props.count,
-  estimated: props.estimated,
-  buffer: Math.floor(props.count / 3),
-  uids: getUids(),
-})
-
-const range = virtual.range
-
-function getUids() {
-  const { keyName, data } = props
-  return data.map(item => item[keyName])
-}
-
-onMounted(() => {
-  if (props.activeKey) {
-    scrollToUid(props.activeKey)
-  } else {
-    scrollToBottom()
-  }
-})
-
-function scrollToOffset(offset: number, smooth = false) {
-  if (smooth) {
-    root.value.wrap$.scrollTo({ top: offset, behavior: 'smooth' })
-  } else {
-    root.value.wrap$.scrollTop = offset
-  }
-}
-
-// set current scroll position to a expectant index
-function scrollToUid(uid: string, smooth = false) {
-  scrollToOffset(virtual.getUidOffset(uid), smooth)
-}
-
-function scrollToBottom() {
-  if (shepherd.value) {
-    const offset = shepherd.value.offsetTop
-    scrollToOffset(offset)
-
-    // check if it's really scrolled to the bottom
-    // maybe list doesn't render and calculate to last range
-    // so we need retry in next event loop until it really at bottom
-    setTimeout(() => {
-      const offset = Math.ceil(root.value.wrap$.scrollTop)
-      const clientLength = Math.ceil(root.value.wrap$.clientHeight)
-      const scrollLength = Math.ceil(root.value.wrap$.scrollHeight)
-      if (offset + clientLength < scrollLength) {
-        scrollToBottom()
-      }
-    }, 3)
-  }
-}
-
-function onScroll(ev: MouseEvent) {
-  const offset = Math.ceil(root.value.wrap$.scrollTop)
-  const clientLength = Math.ceil(root.value.wrap$.clientHeight)
-  const scrollLength = Math.ceil(root.value.wrap$.scrollHeight)
-
-  // iOS scroll-spring-back behavior will make direction mistake
-  if (offset < 0 || (offset + clientLength > scrollLength + 1) || !scrollLength) {
-    return
-  }
-
-  virtual.handleScroll(offset)
-  emitEvent(offset, clientLength, scrollLength, ev)
-}
-
-function emitEvent(offset: number, clientLength: number, scrollLength: number, ev: MouseEvent) {
-  emit('scroll', ev, virtual.range)
-  if (virtual.direction < 0 && !!props.data.length && (offset - props.threshold <= 0)) {
-    emit('top')
-  } else if (virtual.direction > 0 && (offset + clientLength + props.threshold >= scrollLength)) {
-    emit('bottom')
-  }
-}
-
-const VirtualItem = defineComponent({
-  props: {
-    tag: String,
-    uid: String,
-  },
-
-  emits: ['resize'],
-
-  setup(props, { slots, emit }) {
-    let resizeObserver: ResizeObserver
-    const root = ref<HTMLElement>()
-
-    onMounted(() => {
-      resizeObserver = new ResizeObserver(dispatchSizeChange)
-      resizeObserver.observe(root.value)
-    })
-
-    onUpdated(dispatchSizeChange)
-
-    onBeforeUnmount(() => {
-      resizeObserver.disconnect()
-    })
-
-    function dispatchSizeChange() {
-      const marginTop = +(getComputedStyle(root.value).marginTop.slice(0, -2))
-      emit('resize', props.uid, root.value.offsetHeight + marginTop)
-    }
-
-    return () => h(props.tag, { ref: root }, slots.default())
-  },
-})
-
-</script>
diff --git a/plugins/frontend/chat/client/utils/message.vue b/plugins/frontend/chat/client/utils/message.vue
deleted file mode 100644
index 9330983f14..0000000000
--- a/plugins/frontend/chat/client/utils/message.vue
+++ /dev/null
@@ -1,60 +0,0 @@
-<template>
-  <div class="k-message">
-    <template v-for="({ type, data }) in segment.parse(content)">
-      <span v-if="type === 'text'">{{ data.content }}</span>
-      <span v-else-if="type === 'at'">@{{ data.name }}</span>
-      <k-image v-else-if="type === 'image'" :src="data.url"/>
-      <img class="face" v-else-if="type === 'face'" :src="data.url"/>
-      <span v-else-if="segmentTypes[type]">[{{ segmentTypes[type] }}]</span>
-      <span v-else>[未知]</span>
-    </template>
-  </div>
-</template>
-
-<script lang="ts" setup>
-
-import { segment } from '@koishijs/utils'
-import KImage from './image.vue'
-
-defineProps<{
-  content: string
-}>()
-
-const segmentTypes = {
-  record: '语音',
-  video: '短视频',
-  image: '图片',
-  music: '音乐',
-  quote: '引用',
-  forward: '合并转发',
-  dice: '掷骰子',
-  rps: '猜拳',
-  poke: '戳一戳',
-  json: 'JSON',
-  xml: 'XML',
-  share: '分享',
-  location: '地点',
-  card: '卡片消息',
-}
-
-</script>
-
-<style lang="scss" scoped>
-
-.k-message {
-  white-space: break-spaces;
-  line-height: 1.5;
-  position: relative;
-
-  img {
-    max-height: 320px;
-    max-width: 100%;
-  }
-
-  img.face {
-    height: 1.25rem;
-    vertical-align: middle;
-  }
-}
-
-</style>
diff --git a/plugins/frontend/chat/client/utils/panel.vue b/plugins/frontend/chat/client/utils/panel.vue
deleted file mode 100644
index a39a98f8f3..0000000000
--- a/plugins/frontend/chat/client/utils/panel.vue
+++ /dev/null
@@ -1,96 +0,0 @@
-<template>
-  <k-card class="k-chat-panel frameless">
-    <virtual-list
-      class="k-chat-body" :item-class="resolveItemClass"
-      key-name="messageId" :data="messages" :pinned="pinned"
-      @click="(message) => $emit('click', message)"
-      :active-key="activeKey" @update:active-key="$emit('update:activeKey', $event)">
-      <template #default="props"><slot v-bind="props"/></template>
-    </virtual-list>
-    <div class="k-chat-footer">
-      <slot name="footer"/>
-      <k-input v-model="text" @enter="onEnter" @paste="onPaste"/>
-    </div>
-  </k-card>
-</template>
-
-<script lang="ts" setup>
-
-import { ref } from 'vue'
-import { segment } from '@koishijs/utils'
-import VirtualList from './list.vue'
-
-const emit = defineEmits(['send', 'click', 'update:activeKey'])
-
-const props = defineProps<{
-  messages: any[],
-  pinned?: boolean,
-  itemClass?: Function,
-  activeKey?: string
-}>()
-
-const text = ref('')
-
-function resolveItemClass(item: any, index: number) {
-  return 'k-chat-message ' + (props.itemClass?.(item, index) ?? '')
-}
-
-function onEnter() {
-  if (!text.value) return
-  emit('send', text.value)
-  text.value = ''
-}
-
-async function onPaste(event: ClipboardEvent) {
-  const item = event.clipboardData.items[0]
-  if (item.kind === 'file') {
-    event.preventDefault()
-    const file = item.getAsFile()
-    const reader  = new FileReader()
-    reader.addEventListener('load', function () {
-      emit('send', segment.image('base64://' + reader.result.slice(22)))
-    }, false)
-    reader.readAsDataURL(file)
-  }
-}
-
-</script>
-
-<style lang="scss">
-
-$padding: 1.5rem;
-
-.k-card.k-chat-panel {
-  .k-card-body {
-    padding: 1rem 0;
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    box-sizing: border-box;
-  }
-
-  .k-chat-body {
-    height: 100%;
-  }
-
-  .k-chat-footer {
-    padding: 0 1rem;
-  }
-
-  .k-chat-message {
-    position: relative;
-    line-height: 1.5rem;
-    padding: 2px 1rem;
-
-    &:hover {
-      background-color: var(--bg1);
-    }
-  }
-
-  .k-input {
-    margin-top: 1rem;
-    width: -webkit-fill-available;
-  }
-}
-
-</style>
diff --git a/plugins/frontend/chat/client/utils/virtual.ts b/plugins/frontend/chat/client/utils/virtual.ts
deleted file mode 100644
index ffefa82627..0000000000
--- a/plugins/frontend/chat/client/utils/virtual.ts
+++ /dev/null
@@ -1,258 +0,0 @@
-import { reactive } from 'vue'
-
-enum CALC_TYPE { INIT, FIXED, DYNAMIC }
-
-const LEADING_BUFFER = 2
-
-export interface Range {
-  start?: number
-  end?: number
-  padFront?: number
-  padBehind?: number
-}
-
-interface VirtualConfig {
-  count: number
-  estimated: number
-  buffer: number
-  uids: string[]
-}
-
-export default class Virtual {
-  sizes = new Map<string, number>([
-    ['header', 0],
-    ['footer', 0],
-  ])
-
-  firstRangeTotalSize = 0
-  firstRangeAverageSize = 0
-  lastCalcIndex = 0
-  fixedSizeValue = 0
-  calcType = CALC_TYPE.INIT
-  offset = 0
-  direction: 0 | 1 | -1 = 0
-  range = reactive<Range>({})
-
-  constructor(public param: VirtualConfig) {
-    this.checkRange(0, param.count)
-  }
-
-  updateUids(uids: string[]) {
-    this.param.uids = uids
-    this.sizes.forEach((v, key) => {
-      if (!uids.includes(key) && key !== 'header' && key !== 'footer') this.sizes.delete(key)
-    })
-  }
-
-  // save each size map by id
-  saveSize = (id: string, size: number) => {
-    this.sizes.set(id, size)
-
-    // we assume size type is fixed at the beginning and remember first size value
-    // if there is no size value different from this at next comming saving
-    // we think it's a fixed size list, otherwise is dynamic size list
-    if (this.calcType === CALC_TYPE.INIT) {
-      this.fixedSizeValue = size
-      this.calcType = CALC_TYPE.FIXED
-    } else if (this.calcType === CALC_TYPE.FIXED && this.fixedSizeValue !== size) {
-      this.calcType = CALC_TYPE.DYNAMIC
-      // it's no use at all
-      delete this.fixedSizeValue
-    }
-
-    // calculate the average size only in the first range
-    if (this.calcType !== CALC_TYPE.FIXED && typeof this.firstRangeTotalSize !== 'undefined') {
-      if (this.sizes.size < Math.min(this.param.count, this.param.uids.length)) {
-        this.firstRangeTotalSize = [...this.sizes.values()].reduce((acc, val) => acc + val, 0)
-        this.firstRangeAverageSize = Math.round(this.firstRangeTotalSize / this.sizes.size)
-      } else {
-        // it's done using
-        delete this.firstRangeTotalSize
-      }
-    }
-  }
-
-  // in some special situation (e.g. length change) we need to update in a row
-  // try goiong to render next range by a leading buffer according to current direction
-  handleDataChange() {
-    let start = this.range.start
-
-    if (this.direction < 0) {
-      start = start - LEADING_BUFFER
-    } else if (this.direction > 0) {
-      start = start + LEADING_BUFFER
-    }
-
-    start = Math.max(start, 0)
-
-    this.updateRange(this.range.start, this.getEndByStart(start))
-  }
-
-  // when slot size change, we also need force update
-  handleSlotSizeChange() {
-    this.handleDataChange()
-  }
-
-  // calculating range on scroll
-  handleScroll(offset: number) {
-    this.direction = Math.sign(offset - this.offset) as any
-    this.offset = offset
-
-    if (this.direction < 0) {
-      this.handleFront()
-    } else if (this.direction > 0) {
-      this.handleBehind()
-    }
-  }
-
-  handleFront() {
-    const overs = this.getScrollOvers()
-    // should not change range if start doesn't exceed overs
-    if (overs > this.range.start) {
-      return
-    }
-
-    // move up start by a buffer length, and make sure its safety
-    const start = Math.max(overs - this.param.buffer, 0)
-    this.checkRange(start, this.getEndByStart(start))
-  }
-
-  handleBehind() {
-    const overs = this.getScrollOvers()
-    // range should not change if scroll overs within buffer
-    if (overs < this.range.start + this.param.buffer) {
-      return
-    }
-
-    this.checkRange(overs, this.getEndByStart(overs))
-  }
-
-  // return the pass overs according to current scroll offset
-  private getScrollOvers() {
-    const offset = this.offset - this.sizes.get('header')
-    if (offset <= 0) return 0
-
-    // if is fixed type, that can be easily
-    if (this.isFixedType()) {
-      return Math.floor(offset / this.fixedSizeValue)
-    }
-
-    let low = 0
-    let middle = 0
-    let middleOffset = 0
-    let high = this.param.uids.length
-
-    while (low <= high) {
-      middle = Math.floor((high + low) / 2)
-      middleOffset = this.getOffset(middle)
-
-      if (middleOffset === offset) {
-        return middle
-      } else if (middleOffset < offset) {
-        low = middle + 1
-      } else if (middleOffset > offset) {
-        high = middle - 1
-      }
-    }
-
-    return low > 0 ? --low : 0
-  }
-
-  getUidOffset(uid: string) {
-    return this.getOffset(this.param.uids.indexOf(uid))
-  }
-
-  // return a scroll offset from given index, can efficiency be improved more here?
-  // although the call frequency is very high, its only a superposition of numbers
-  getOffset(givenIndex: number) {
-    if (!givenIndex) {
-      return 0
-    }
-
-    let offset = 0
-    for (let index = 0; index < givenIndex; index++) {
-      offset = offset + (this.sizes.get(this.param.uids[index]) ?? this.getEstimateSize())
-    }
-
-    // remember last calculate index
-    this.lastCalcIndex = Math.max(this.lastCalcIndex, givenIndex)
-    this.lastCalcIndex = Math.min(this.lastCalcIndex, this.getLastIndex())
-
-    return offset
-  }
-
-  // is fixed size type
-  isFixedType() {
-    return this.calcType === CALC_TYPE.FIXED
-  }
-
-  // return the real last index
-  getLastIndex() {
-    return this.param.uids.length
-  }
-
-  // in some conditions range is broke, we need correct it
-  // and then decide whether need update to next range
-  checkRange(start: number, end: number) {
-    const keeps = this.param.count
-    const total = this.param.uids.length
-
-    // datas less than keeps, render all
-    if (total <= keeps) {
-      start = 0
-      end = total
-    } else if (end - start < keeps - 1) {
-      // if range length is less than keeps, corrent it base on end
-      start = end - keeps
-    }
-
-    if (this.range.start !== start) {
-      this.updateRange(start, end)
-    }
-  }
-
-  // setting to a new range and rerender
-  updateRange(start: number, end: number) {
-    this.range.start = start
-    this.range.end = end
-    this.range.padFront = this.getPadFront()
-    this.range.padBehind = this.getPadBehind()
-  }
-
-  // return end base on start
-  getEndByStart(start: number) {
-    return Math.min(start + this.param.count, this.param.uids.length)
-  }
-
-  // return total front offset
-  getPadFront() {
-    if (this.isFixedType()) {
-      return this.fixedSizeValue * this.range.start
-    } else {
-      return this.getOffset(this.range.start)
-    }
-  }
-
-  // return total behind offset
-  getPadBehind() {
-    const end = this.range.end
-    const lastIndex = this.getLastIndex()
-
-    if (this.isFixedType()) {
-      return (lastIndex - end) * this.fixedSizeValue
-    }
-
-    // if it's all calculated, return the exactly offset
-    if (this.lastCalcIndex === lastIndex) {
-      return this.getOffset(lastIndex) - this.getOffset(end)
-    } else {
-      // if not, use a estimated value
-      return (lastIndex - end) * this.getEstimateSize()
-    }
-  }
-
-  // get the item estimate size
-  getEstimateSize() {
-    return this.isFixedType() ? this.fixedSizeValue : (this.firstRangeAverageSize || this.param.estimated)
-  }
-}
diff --git a/plugins/frontend/client/client/components/chat/image.vue b/plugins/frontend/client/client/components/chat/image.vue
index c20f11dcdc..90a1648701 100644
--- a/plugins/frontend/client/client/components/chat/image.vue
+++ b/plugins/frontend/client/client/components/chat/image.vue
@@ -4,20 +4,20 @@
 
 <script lang="ts" setup>
 
-// import { shared } from '.'
+import { shared } from './utils'
 import { config } from '@koishijs/client'
 
 const props = defineProps<{ src: string }>()
 
 function normalizeUrl(url: string) {
-  // if (!config.whitelist.some(prefix => url.startsWith(prefix))) return url
-  return config.endpoint + '/assets/' + encodeURIComponent(url)
+  return url
+  // return config.endpoint + '/assets/' + encodeURIComponent(url)
 }
 
 function handleClick(ev: MouseEvent) {
   ev.preventDefault()
   if (ev.metaKey) return window.open(props.src, '_blank')
-  // shared.overlayImage = ev.target as HTMLImageElement
+  shared.overlayImage = ev.target as HTMLImageElement
 }
 
 </script>
diff --git a/plugins/frontend/client/client/components/chat/list.vue b/plugins/frontend/client/client/components/chat/list.vue
index 69783566d3..cc01e85b04 100644
--- a/plugins/frontend/client/client/components/chat/list.vue
+++ b/plugins/frontend/client/client/components/chat/list.vue
@@ -3,7 +3,7 @@
     <virtual-item v-if="$slots.header" @resize="virtual.saveSize" uid="header">
       <slot name="header"/>
     </virtual-item>
-    <div :style="wrapperStyle">
+    <div class="k-virtual-list-wrapper" :style="wrapperStyle">
       <virtual-item v-for="(item, index) in dataShown"
         :tag="itemTag" :class="resolveItemClass(item, index)" :uid="item[keyName]"
         @click.stop="emit('click', item, $event)" @resize="virtual.saveSize">
diff --git a/plugins/frontend/chat/client/overlay.vue b/plugins/frontend/client/client/components/chat/overlay.vue
similarity index 100%
rename from plugins/frontend/chat/client/overlay.vue
rename to plugins/frontend/client/client/components/chat/overlay.vue
diff --git a/plugins/frontend/client/client/components/chat/panel.vue b/plugins/frontend/client/client/components/chat/panel.vue
index 0565d83153..129bb41a06 100644
--- a/plugins/frontend/client/client/components/chat/panel.vue
+++ b/plugins/frontend/client/client/components/chat/panel.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="k-chat-panel">
+  <component :is="tag || 'div'" class="k-chat-panel">
     <virtual-list
       class="k-chat-body" :item-class="resolveItemClass"
       key-name="messageId" :data="messages" :pinned="pinned"
@@ -17,7 +17,7 @@
         @keydown.enter.stop="onEnter"
       />
     </div>
-  </div>
+  </component>
 </template>
 
 <script lang="ts" setup>
@@ -29,6 +29,7 @@ import VirtualList from './list.vue'
 const emit = defineEmits(['send', 'click', 'paste', 'update:activeKey'])
 
 const props = defineProps<{
+  tag?: string
   messages: any[],
   pinned?: boolean,
   itemClass?: Function,
@@ -81,6 +82,7 @@ $padding: 1.5rem;
       outline: none;
       font-size: 1em;
       height: inherit;
+      color: inherit;
       display: inline-block;
       border-radius: 0.3em;
       transition: 0.3s ease;
@@ -88,6 +90,10 @@ $padding: 1.5rem;
       background-color: transparent;
     }
   }
+
+  .k-chat-message {
+    position: relative;
+  }
 }
 
 </style>
diff --git a/plugins/frontend/chat/client/utils/index.ts b/plugins/frontend/client/client/components/chat/utils.ts
similarity index 83%
rename from plugins/frontend/chat/client/utils/index.ts
rename to plugins/frontend/client/client/components/chat/utils.ts
index 55b9e719b0..57ef49eddd 100644
--- a/plugins/frontend/chat/client/utils/index.ts
+++ b/plugins/frontend/client/client/components/chat/utils.ts
@@ -1,6 +1,5 @@
 import { reactive } from 'vue'
 
 export const shared = reactive({
-  showOverlay: false,
   overlayImage: null as HTMLImageElement,
 })
diff --git a/plugins/frontend/client/client/components/notice/markdown.vue b/plugins/frontend/client/client/components/notice/markdown.vue
index 88e111fd51..440003f5a2 100644
--- a/plugins/frontend/client/client/components/notice/markdown.vue
+++ b/plugins/frontend/client/client/components/notice/markdown.vue
@@ -17,9 +17,9 @@ const props = defineProps({
 
 function render() {
   if (props.inline) {
-    return marked.parseInline(props.source)
+    return marked.parseInline(props.source || '')
   } else {
-    return marked(props.source)
+    return marked(props.source || '')
   }
 }
 
diff --git a/plugins/frontend/client/client/index.ts b/plugins/frontend/client/client/index.ts
index 7f26b937df..37187a785f 100644
--- a/plugins/frontend/client/client/index.ts
+++ b/plugins/frontend/client/client/index.ts
@@ -4,6 +4,7 @@ import { Dict, Promisify } from 'koishi'
 import { App, Component, defineComponent, h, markRaw, reactive, ref, Ref, resolveComponent, watch } from 'vue'
 import { createRouter, createWebHistory, RouteRecordNormalized, START_LOCATION } from 'vue-router'
 import install from './components'
+import Overlay from './components/chat/overlay.vue'
 
 export * from './components'
 
@@ -222,6 +223,13 @@ export class Context {
   }
 }
 
+const root = new Context()
+
+root.addView({
+  type: 'global',
+  component: Overlay,
+})
+
 interface StorageData<T> {
   version: number
   data: T
diff --git a/plugins/frontend/sandbox/client/message.vue b/plugins/frontend/sandbox/client/message.vue
index 3fdb1ec44f..a83ef12d57 100644
--- a/plugins/frontend/sandbox/client/message.vue
+++ b/plugins/frontend/sandbox/client/message.vue
@@ -21,7 +21,6 @@ defineProps<{
 .page-sandbox .k-chat-message {
   --avatar-size: 2.8rem;
 
-  position: relative;
   margin: 1rem 1.5rem;
 
   .nickname {