From 57ee376895d33bc579050fad8c9c980a0551a4d0 Mon Sep 17 00:00:00 2001
From: Shigma <shigma10826@gmail.com>
Date: Sun, 15 May 2022 02:03:26 +0800
Subject: [PATCH] feat(client): migrate to @satorijs/components

---
 docs/manual/advanced/development.md           |   2 +-
 package.json                                  |   3 +-
 plugins/frontend/chat/client/chat.vue         | 211 ++------------
 plugins/frontend/chat/client/message.vue      | 161 +++++++++++
 plugins/frontend/chat/client/utils.ts         |  26 ++
 .../client/client/components/chat/content.vue |  60 ----
 .../client/client/components/chat/index.ts    |  10 -
 .../client/client/components/chat/list.vue    | 187 -------------
 .../client/client/components/chat/panel.vue   |  99 -------
 .../client/client/components/chat/virtual.ts  | 258 ------------------
 .../client/client/components/index.ts         |   5 +-
 plugins/frontend/client/package.json          |   2 +
 plugins/frontend/sandbox/client/index.vue     |  30 +-
 plugins/frontend/sandbox/client/message.vue   |  16 +-
 plugins/frontend/tsconfig.base.json           |   1 +
 15 files changed, 243 insertions(+), 828 deletions(-)
 create mode 100644 plugins/frontend/chat/client/message.vue
 create mode 100644 plugins/frontend/chat/client/utils.ts
 delete mode 100644 plugins/frontend/client/client/components/chat/content.vue
 delete mode 100644 plugins/frontend/client/client/components/chat/index.ts
 delete mode 100644 plugins/frontend/client/client/components/chat/list.vue
 delete mode 100644 plugins/frontend/client/client/components/chat/panel.vue
 delete mode 100644 plugins/frontend/client/client/components/chat/virtual.ts

diff --git a/docs/manual/advanced/development.md b/docs/manual/advanced/development.md
index 7ec99bac59..238367ec3d 100644
--- a/docs/manual/advanced/development.md
+++ b/docs/manual/advanced/development.md
@@ -27,7 +27,7 @@ yarn dev
 
 ```sh
 -r esbuild-register
--r tsconfig-paths/register
+-r yml-register
 --watch
 ```
 
diff --git a/package.json b/package.json
index f69ae08d22..c811c464d3 100644
--- a/package.json
+++ b/package.json
@@ -90,7 +90,6 @@
     "yakumo-mocha": "^0.2.4",
     "yakumo-publish": "^0.2.2",
     "yakumo-upgrade": "^0.2.2",
-    "yakumo-version": "^0.2.3",
-    "yaml-register": "^0.1.0"
+    "yakumo-version": "^0.2.3"
   }
 }
\ No newline at end of file
diff --git a/plugins/frontend/chat/client/chat.vue b/plugins/frontend/chat/client/chat.vue
index 1670e898b4..7f0e100952 100644
--- a/plugins/frontend/chat/client/chat.vue
+++ b/plugins/frontend/chat/client/chat.vue
@@ -1,71 +1,30 @@
 <template>
-  <k-chat-panel class="k-card page-chat" :messages="messages" pinned
-    v-model:active-key="index" :item-class="getItemClass"
-    @click="handleClick" @send="handleSend">
-    <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>
-        <span class="abstract">{{ formatAbstract(message.quote.abstract) }}</span>
-      </div>
-      <template v-if="isSuccessive(message, message.index)">
-        <span class="timestamp">{{ formatTime(new Date(message.timestamp)) }}</span>
+  <k-card-aside class="page-chat">
+    <virtual-list :data="messages" pinned v-model:active-key="index">
+      <template #header><div class="header-padding"></div></template>
+      <template #="data">
+        <chat-message @click="handleClick(data)" :successive="isSuccessive(data, data.index)" :data="data"></chat-message>
       </template>
-      <template v-else>
-        <img class="avatar" :src="message.avatar"/>
-        <div class="header" :ref="el => divs[message.messageId] = el?.['parentElement']">
-          <span class="channel">{{ message.channelName || '私聊' }}</span>
-          <span class="username">{{ message.username }}</span>
-          <span class="timestamp">{{ formatDateTime(new Date(message.timestamp)) }}</span>
-        </div>
-      </template>
-      <k-message-content :content="message.content"/>
-    </template>
-    <template #footer>
-      <p class="hint">
-        <template v-if="activeMessage">发送到频道：{{ activeMessage.channelName }}</template>
-        <template v-else>点击消息已选择要发送的频道。</template>
-      </p>
-    </template>
-  </k-chat-panel>
+      <template #footer><div class="footer-padding"></div></template>
+    </virtual-list>
+    <div class="card-footer">
+      <chat-input @send="handleSend"></chat-input>
+    </div>
+  </k-card-aside>
 </template>
 
 <script lang="ts" setup>
 
-import { config, receive, send } from '@koishijs/client'
-import { ref, watch } from 'vue'
+import { config, receive, send, ChatInput, VirtualList } from '@koishijs/client'
+import { ref } from 'vue'
 import type { Message } from '@koishijs/plugin-chat/src'
-
-namespace storage {
-  export function get(key: string) {
-    if (typeof localStorage === 'undefined') return
-    const rawData = localStorage.getItem('koishi:' + key)
-    if (!rawData) return
-    try {
-      return JSON.parse(rawData)
-    } catch {}
-  }
-
-  export function set(key: string, value: any) {
-    if (typeof localStorage === 'undefined') return
-    localStorage.setItem('koishi:' + key, JSON.stringify(value))
-  }
-
-  export function create<T>(key: string, fallback?: T, merge?: boolean) {
-    const value = get(key)
-    const wrapper = ref<T>(merge ? { ...fallback, ...value } : value || fallback)
-    watch(wrapper, () => set(key, wrapper.value), {
-      deep: typeof fallback === 'object',
-    })
-    return wrapper
-  }
-}
+import { storage } from './utils'
+import ChatMessage from './message.vue'
 
 const pinned = ref(true)
 const index = ref<string>()
 const activeMessage = ref<Message>()
 const messages = storage.create<Message[]>('chat', [])
-const divs = ref<Record<string, HTMLElement>>({})
 
 receive('chat', (body) => {
   messages.value.push(body)
@@ -74,11 +33,7 @@ receive('chat', (body) => {
 
 function isSuccessive({ quote, userId, channelId }: Message, index: number) {
   const prev = messages.value[index - 1]
-  return !quote && prev && prev.userId === userId && prev.channelId === channelId
-}
-
-function getItemClass(message: Message, index: number) {
-  return isSuccessive(message, index) ? 'successive' : ''
+  return !quote && !!prev && prev.userId === userId && prev.channelId === channelId
 }
 
 function handleClick(message: Message) {
@@ -92,144 +47,26 @@ function handleSend(content: string) {
   send('chat', { content, platform, selfId, channelId, guildId })
 }
 
-function onClickQuote(id: string) {
-  index.value = id
-}
-
-function formatAbstract(content: string) {
-  if (content.length < 50) return content
-  return content.slice(0, 48) + '……'
-}
-
-function formatTime(date: Date) {
-  return `${date.getHours()}:${date.getMinutes().toString().padStart(2, '0')}:${date.getSeconds().toString().padStart(2, '0')}`
-}
-
-function formatDateTime(date: Date) {
-  const now = new Date()
-  let output = formatTime(date)
-  if (date.toLocaleDateString() === now.toLocaleDateString()) return output
-  return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()} ${output}`
-}
-
 </script>
 
 <style lang="scss">
 
-$avatarSize: 2.5rem;
-$padding: $avatarSize + 1rem;
-
 .page-chat {
   position: relative;
   height: calc(100vh - 4rem);
 
-  .k-virtual-list-wrapper {
-    margin: 1rem 0;
+  main {
+    display: flex;
+    flex-direction: column;
   }
 
-  .successive {
-    .timestamp {
-      position: absolute;
-      visibility: hidden;
-      left: 0;
-      width: $padding + 1rem;
-      text-align: center;
-      user-select: none;
-    }
-
-    &:hover {
-      .timestamp {
-        visibility: initial;
-      }
-    }
-  }
-
-  .avatar {
-    position: absolute;
-    margin-top: 4px;
-    width: $avatarSize;
-    height: $avatarSize;
-    border-radius: $avatarSize;
-    user-select: none;
-  }
-
-  .quote {
-    position: relative;
-    font-size: 0.875rem;
-    margin-left: $padding;
-    cursor: pointer;
-    * + span {
-      margin-left: 0.5rem;
-    }
-
-    &::before {
-      content: '';
-      display: block;
-      position: absolute;
-      box-sizing: border-box;
-      top: 50%;
-      right: 100%;
-      bottom: 0;
-      left: -36px;
-      margin-right: 4px;
-      margin-top: -1px;
-      margin-left: -1px;
-      margin-bottom: calc(.125rem - 4px);
-      border-left: 1px solid #4f545c;
-      border-top: 1px solid #4f545c;
-      border-top-left-radius: 6px;
-    }
-
-    .quote-avatar {
-      width: 1rem;
-      height: 1rem;
-      border-radius: 1rem;
-      vertical-align: text-top;
-    }
-
-    .abstract {
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-  }
-
-  .header {
-    margin-left: $padding;
-    * + span {
-      margin-left: 0.5rem;
-    }
-  }
-
-  .username {
-    font-weight: bold;
-    line-height: 1.375rem;
-  }
-
-  .timestamp {
-    color: #72767d;
-    font-size: 0.75rem;
-  }
-
-  .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;
-    }
+  .header-padding, .footer-padding {
+    padding: 0.5rem 0;
   }
 
-  p.hint {
-    color: #72767d;
-    margin: 0.5rem 0 -0.5rem;
+  .card-footer {
+    padding: 1rem 1.25rem;
+    border-top: 1px solid var(--border);
   }
 }
 
diff --git a/plugins/frontend/chat/client/message.vue b/plugins/frontend/chat/client/message.vue
new file mode 100644
index 0000000000..92e39f93f4
--- /dev/null
+++ b/plugins/frontend/chat/client/message.vue
@@ -0,0 +1,161 @@
+<template>
+  <div class="chat-message" :class="{ successive }">
+    <div class="quote" v-if="data.quote" @click="$emit('locate', data.quote.messageId)">
+      <img class="quote-avatar" v-if="data.quote.author.avatar" :src="data.quote.author.avatar"/>
+      <span class="username">{{ data.quote.author.username }}</span>
+      <span class="abstract">{{ formatAbstract(data.quote.abstract) }}</span>
+    </div>
+    <template v-if="successive">
+      <span class="timestamp">{{ formatTime(new Date(data.timestamp)) }}</span>
+    </template>
+    <template v-else>
+      <img class="avatar" v-if="data.avatar" :src="data.avatar"/>
+      <div class="header">
+        <span class="channel">{{ data.channelName || '私聊' }}</span>
+        <span class="username">{{ data.username }}</span>
+        <span class="timestamp">{{ formatDateTime(new Date(data.timestamp)) }}</span>
+      </div>
+    </template>
+    <message-content :content="data.content"/>
+  </div>
+</template>
+
+<script lang="ts" setup>
+
+import { Message } from '@koishijs/plugin-chat/src'
+import { MessageContent } from '@koishijs/client'
+
+defineEmits(['locate'])
+
+defineProps<{
+  data: Message
+  successive: boolean
+}>()
+
+function formatAbstract(content: string) {
+  if (content.length < 50) return content
+  return content.slice(0, 48) + '……'
+}
+
+function formatTime(date: Date) {
+  if (Number.isNaN(+date)) return ''
+  return `${date.getHours()}:${date.getMinutes().toString().padStart(2, '0')}:${date.getSeconds().toString().padStart(2, '0')}`
+}
+
+function formatDateTime(date: Date) {
+  if (Number.isNaN(+date)) return ''
+  const now = new Date()
+  let output = formatTime(date)
+  if (date.toLocaleDateString() === now.toLocaleDateString()) return output
+  return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()} ${output}`
+}
+
+</script>
+
+<style lang="scss" scoped>
+
+$avatarSize: 2.5rem;
+$padding: $avatarSize + 1rem;
+
+.chat-message {
+  position: relative;
+  padding: 0 1.5rem;
+  word-break: break-word;
+
+  &:hover {
+    background-color: var(--hover-bg);;
+  }
+
+  &:not(.successive) {
+    margin-top: 0.5rem;
+  }
+
+  :deep(.message-content) {
+    margin-left: $padding;
+  }
+
+  &.successive {
+    .timestamp {
+      position: absolute;
+      visibility: hidden;
+      left: 0;
+      width: $padding + 1rem;
+      text-align: center;
+      user-select: none;
+    }
+
+    &:hover {
+      .timestamp {
+        visibility: initial;
+      }
+    }
+  }
+
+  .avatar {
+    position: absolute;
+    margin-top: 4px;
+    width: $avatarSize;
+    height: $avatarSize;
+    border-radius: $avatarSize;
+    user-select: none;
+  }
+
+  .quote {
+    position: relative;
+    font-size: 0.875rem;
+    margin-left: $padding;
+    cursor: pointer;
+    * + span {
+      margin-left: 0.5rem;
+    }
+
+    &::before {
+      content: '';
+      display: block;
+      position: absolute;
+      box-sizing: border-box;
+      top: 50%;
+      right: 100%;
+      bottom: 0;
+      left: -36px;
+      margin-right: 4px;
+      margin-top: -1px;
+      margin-left: -1px;
+      margin-bottom: calc(.125rem - 4px);
+      border-left: 1px solid #4f545c;
+      border-top: 1px solid #4f545c;
+      border-top-left-radius: 6px;
+    }
+
+    .quote-avatar {
+      width: 1rem;
+      height: 1rem;
+      border-radius: 1rem;
+      vertical-align: text-top;
+    }
+
+    .abstract {
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
+  .header {
+    margin-left: $padding;
+    * + span {
+      margin-left: 0.5rem;
+    }
+  }
+
+  .username {
+    font-weight: bold;
+    line-height: 1.375rem;
+  }
+
+  .timestamp {
+    color: #72767d;
+    font-size: 0.75rem;
+  }
+}
+
+</style>
diff --git a/plugins/frontend/chat/client/utils.ts b/plugins/frontend/chat/client/utils.ts
new file mode 100644
index 0000000000..f4b7926134
--- /dev/null
+++ b/plugins/frontend/chat/client/utils.ts
@@ -0,0 +1,26 @@
+import { ref, watch } from 'vue'
+
+export namespace storage {
+  export function get(key: string) {
+    if (typeof localStorage === 'undefined') return
+    const rawData = localStorage.getItem('koishi:' + key)
+    if (!rawData) return
+    try {
+      return JSON.parse(rawData)
+    } catch {}
+  }
+
+  export function set(key: string, value: any) {
+    if (typeof localStorage === 'undefined') return
+    localStorage.setItem('koishi:' + key, JSON.stringify(value))
+  }
+
+  export function create<T>(key: string, fallback?: T, merge?: boolean) {
+    const value = get(key)
+    const wrapper = ref<T>(merge ? { ...fallback, ...value } : value || fallback)
+    watch(wrapper, () => set(key, wrapper.value), {
+      deep: typeof fallback === 'object',
+    })
+    return wrapper
+  }
+}
diff --git a/plugins/frontend/client/client/components/chat/content.vue b/plugins/frontend/client/client/components/chat/content.vue
deleted file mode 100644
index e51b0d60c2..0000000000
--- a/plugins/frontend/client/client/components/chat/content.vue
+++ /dev/null
@@ -1,60 +0,0 @@
-<template>
-  <div class="k-message-content">
-    <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/segment'
-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-content {
-  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/client/client/components/chat/index.ts b/plugins/frontend/client/client/components/chat/index.ts
deleted file mode 100644
index 10ac535661..0000000000
--- a/plugins/frontend/client/client/components/chat/index.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { App } from 'vue'
-import ChatPanel from './panel.vue'
-import MessageContent from './content.vue'
-import VirtualList from './list.vue'
-
-export default function (app: App) {
-  app.component('k-chat-panel', ChatPanel)
-  app.component('k-message-content', MessageContent)
-  app.component('k-virtual-list', VirtualList)
-}
diff --git a/plugins/frontend/client/client/components/chat/list.vue b/plugins/frontend/client/client/components/chat/list.vue
deleted file mode 100644
index 28eb31fe1f..0000000000
--- a/plugins/frontend/client/client/components/chat/list.vue
+++ /dev/null
@@ -1,187 +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 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">
-        <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, onActivated, onMounted, onUpdated, onBeforeUnmount, defineComponent, h } from 'vue'
-import { ElScrollbar } from 'element-plus'
-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<typeof ElScrollbar>()
-
-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)
-  }
-}
-
-let scrollTop = 0
-
-onActivated(() => {
-  root.value.setScrollTop(scrollTop)
-})
-
-function onScroll(ev: MouseEvent) {
-  const offset = Math.ceil(scrollTop = 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/client/client/components/chat/panel.vue b/plugins/frontend/client/client/components/chat/panel.vue
deleted file mode 100644
index df8b5ea623..0000000000
--- a/plugins/frontend/client/client/components/chat/panel.vue
+++ /dev/null
@@ -1,99 +0,0 @@
-<template>
-  <component :is="tag || 'div'" class="k-chat-panel">
-    <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">
-      <input
-        autocomplete="off"
-        step="any"
-        :value="text"
-        @input="text = $event.target['value']"
-        @paste="onPaste"
-        @keydown.enter.stop="onEnter"
-      />
-    </div>
-  </component>
-</template>
-
-<script lang="ts" setup>
-
-import { ref } from 'vue'
-import segment from '@koishijs/segment'
-import VirtualList from './list.vue'
-
-const emit = defineEmits(['send', 'click', 'paste', 'update:activeKey'])
-
-const props = defineProps<{
-  tag?: string
-  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-chat-panel {
-  display: flex;
-  flex-direction: column;
-
-  .k-chat-footer {
-    padding: 1rem 1.5rem;
-    border-top: 1px solid var(--border);
-
-    input {
-      padding: 0;
-      width: 100%;
-      border: none;
-      outline: none;
-      font-size: 1em;
-      height: inherit;
-      color: inherit;
-      display: inline-block;
-      border-radius: 0.3em;
-      transition: 0.3s ease;
-      box-sizing: border-box;
-      background-color: transparent;
-    }
-  }
-
-  .k-chat-message {
-    position: relative;
-  }
-}
-
-</style>
diff --git a/plugins/frontend/client/client/components/chat/virtual.ts b/plugins/frontend/client/client/components/chat/virtual.ts
deleted file mode 100644
index ffefa82627..0000000000
--- a/plugins/frontend/client/client/components/chat/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/index.ts b/plugins/frontend/client/client/components/index.ts
index 1e83c07aa9..0553da2dae 100644
--- a/plugins/frontend/client/client/components/index.ts
+++ b/plugins/frontend/client/client/components/index.ts
@@ -24,7 +24,6 @@ import {
   ElTree,
 } from 'element-plus'
 
-import chat from './chat'
 import common from './common'
 import form from './form'
 import * as icons from './icons'
@@ -64,6 +63,9 @@ export * from './form'
 export * from './layout'
 export * from './notice'
 
+export * from '@satorijs/ui-chat'
+export * from '@satorijs/ui-virtual'
+
 export { icons }
 
 export default function (app: App) {
@@ -89,7 +91,6 @@ export default function (app: App) {
   app.use(ElTableColumn)
   app.use(ElTimePicker)
 
-  app.use(chat)
   app.use(common)
   app.use(form)
   app.use(icons)
diff --git a/plugins/frontend/client/package.json b/plugins/frontend/client/package.json
index d078f5aa22..6bb99f3c13 100644
--- a/plugins/frontend/client/package.json
+++ b/plugins/frontend/client/package.json
@@ -34,6 +34,8 @@
   ],
   "dependencies": {
     "@koishijs/segment": "^1.1.1",
+    "@satorijs/ui-chat": "^0.3.0",
+    "@satorijs/ui-virtual": "^0.3.0",
     "@types/marked": "^4.0.3",
     "@vitejs/plugin-vue": "^2.3.1",
     "@vueuse/core": "^7.7.1",
diff --git a/plugins/frontend/sandbox/client/index.vue b/plugins/frontend/sandbox/client/index.vue
index 9fe99a1e10..1271072993 100644
--- a/plugins/frontend/sandbox/client/index.vue
+++ b/plugins/frontend/sandbox/client/index.vue
@@ -32,16 +32,21 @@
           :show-header="false"
           @update:modelValue="modifyUser"></k-form>
       </k-content>
-      <k-chat-panel v-else class="sandbox" :key="channel" :messages="config.messages[channel] || []" @send="sendMessage" #="data">
-        <chat-message :data="data"></chat-message>
-      </k-chat-panel>
+      <template v-else :key="channel">
+        <virtual-list :data="config.messages[channel] || []" #="data" pinned>
+          <chat-message :data="data"></chat-message>
+        </virtual-list>
+        <div class="card-footer">
+          <chat-input @send="sendMessage"></chat-input>
+        </div>
+      </template>
     </keep-alive>
   </k-card-aside>
 </template>
 
 <script lang="ts" setup>
 
-import { message, send, Schema, store } from '@koishijs/client'
+import { message, send, Schema, store, ChatInput, VirtualList } from '@koishijs/client'
 import { computed } from 'vue'
 import { config, words, panelTypes } from './utils'
 import type { User } from 'koishi'
@@ -127,23 +132,16 @@ function sendMessage(content: string) {
     user-select: none;
   }
 
-  .k-chat-panel {
-    height: 100%;
-    overflow-y: auto;
-  }
-
-  .card-header, .footer {
-    font-size: 1.15rem;
+  .card-header {
     text-align: center;
-    padding: 1rem 0;
     font-weight: bold;
-  }
-
-  .card-header {
+    font-size: 1.15rem;
+    padding: 1rem 0;
     border-bottom: 1px solid var(--border);
   }
 
-  .footer {
+  .card-footer {
+    padding: 1rem 1.25rem;
     border-top: 1px solid var(--border);
   }
 
diff --git a/plugins/frontend/sandbox/client/message.vue b/plugins/frontend/sandbox/client/message.vue
index a83ef12d57..3261b187c1 100644
--- a/plugins/frontend/sandbox/client/message.vue
+++ b/plugins/frontend/sandbox/client/message.vue
@@ -1,14 +1,17 @@
 <template>
-  <div class="avatar">{{ data.user[0] }}</div>
-  <div class="nickname">{{ data.user }}</div>
-  <div class="message-box">
-    <k-message-content :content="data.content"/>
+  <div class="chat-message">
+    <div class="avatar">{{ data.user[0] }}</div>
+    <div class="nickname">{{ data.user }}</div>
+    <div class="message-box">
+      <message-content :content="data.content"/>
+    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
 
 import { Message } from '@koishijs/plugin-sandbox/src'
+import { MessageContent } from '@koishijs/client'
 
 defineProps<{
   data: Message
@@ -16,12 +19,13 @@ defineProps<{
 
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 
-.page-sandbox .k-chat-message {
+.chat-message {
   --avatar-size: 2.8rem;
 
   margin: 1rem 1.5rem;
+  position: relative;
 
   .nickname {
     position: relative;
diff --git a/plugins/frontend/tsconfig.base.json b/plugins/frontend/tsconfig.base.json
index a3e249fe13..3489b67438 100644
--- a/plugins/frontend/tsconfig.base.json
+++ b/plugins/frontend/tsconfig.base.json
@@ -3,6 +3,7 @@
     "target": "es2020",
     "module": "esnext",
     "declaration": true,
+    "jsx": "preserve",
     "noEmit": true,
     "composite": true,
     "incremental": true,