109 lines
5.6 KiB
TypeScript
109 lines
5.6 KiB
TypeScript
import { Message } from 'lingchair-client-protocol'
|
|
import * as React from 'react'
|
|
import ChatMessage from './ChatMessage.tsx'
|
|
import { dialog } from 'mdui'
|
|
|
|
export default function ChatMessageContainer({ messages }: { messages: Message[] }) {
|
|
return (
|
|
<div style={{
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
justifyContent: 'flex-end',
|
|
alignItems: 'center',
|
|
marginBottom: '20px',
|
|
paddingTop: "15px",
|
|
flexGrow: '1',
|
|
}}>
|
|
{
|
|
(() => {
|
|
// 添加时间
|
|
let date = new Date(0)
|
|
function timeAddZeroPrefix(t: number) {
|
|
if (t >= 0 && t < 10)
|
|
return '0' + t
|
|
return t + ''
|
|
}
|
|
|
|
// 合并同用户消息
|
|
let user: string | undefined
|
|
return messages?.map((msg) => {
|
|
// 添加时间
|
|
const lastDate = date
|
|
date = new Date(msg.getTime())
|
|
const shouldShowTime = msg.getUserId() != null &&
|
|
(date.getMinutes() != lastDate.getMinutes() || date.getDate() != lastDate.getDate() || date.getMonth() != lastDate.getMonth() || date.getFullYear() != lastDate.getFullYear())
|
|
|
|
// 合并同用户消息
|
|
const lastUser = user
|
|
user = msg.getUserId()
|
|
|
|
return <>
|
|
{
|
|
shouldShowTime && <mdui-tooltip content={`${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日 ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`}>
|
|
<div style={{
|
|
fontSize: '87%',
|
|
marginTop: '13px',
|
|
marginBottom: '10px',
|
|
}}>
|
|
{
|
|
(date.getFullYear() != lastDate.getFullYear() ? `${date.getFullYear()}年` : '')
|
|
+ `${date.getMonth() + 1}月`
|
|
+ `${date.getDate()}日`
|
|
+ ` ${timeAddZeroPrefix(date.getHours())}:${timeAddZeroPrefix(date.getMinutes())}`
|
|
}
|
|
</div>
|
|
</mdui-tooltip>
|
|
}
|
|
<ChatMessage
|
|
message={msg}
|
|
noUserDisplay={lastUser == user && !shouldShowTime}
|
|
avatarMenuItems={[
|
|
<mdui-menu-item icon="info" onClick={async () => {
|
|
const user = await msg.getUser().then((re) => re?.bean) || {}
|
|
dialog({
|
|
headline: "Info",
|
|
body: `<span style="word-break: break-word;">${Object.keys(user)
|
|
// @ts-ignore 懒
|
|
.map((k) => `${k} = ${user[k]}`)
|
|
.join('<br><br>')}<span>`,
|
|
closeOnEsc: true,
|
|
closeOnOverlayClick: true,
|
|
actions: [
|
|
{
|
|
text: "关闭",
|
|
onClick: () => {
|
|
return true
|
|
},
|
|
}
|
|
]
|
|
}).addEventListener('click', (e) => e.stopPropagation())
|
|
}}>JSON</mdui-menu-item>
|
|
]}
|
|
messageMenuItems={[
|
|
<mdui-menu-item icon="info" onClick={() => dialog({
|
|
headline: "Info",
|
|
body: `<span style="word-break: break-word;">${Object.keys(msg.bean)
|
|
// @ts-ignore 懒
|
|
.map((k) => `${k} = ${msg.bean[k]}`)
|
|
.join('<br><br>')}<span>`,
|
|
closeOnEsc: true,
|
|
closeOnOverlayClick: true,
|
|
actions: [
|
|
{
|
|
text: "关闭",
|
|
onClick: () => {
|
|
return true
|
|
},
|
|
}
|
|
]
|
|
}).addEventListener('click', (e) => e.stopPropagation())}>Info</mdui-menu-item>
|
|
]}
|
|
/>
|
|
</>
|
|
})
|
|
})()
|
|
}
|
|
</div>
|
|
)
|
|
}
|