86 lines
2.9 KiB
TypeScript
86 lines
2.9 KiB
TypeScript
import { TextField } from "mdui"
|
|
import RecentChat from "../../api/client_data/RecentChat.ts"
|
|
import useEventListener from "../useEventListener.ts"
|
|
import RecentsListItem from "./RecentsListItem.tsx"
|
|
import React from "react"
|
|
import useAsyncEffect from "../useAsyncEffect.ts"
|
|
import Client from "../../api/Client.ts"
|
|
import { checkApiSuccessOrSncakbar } from "../snackbar.ts";
|
|
import data from "../../Data.ts";
|
|
import EventBus from "../../EventBus.ts";
|
|
import isMobileUI from "../isMobileUI.ts";
|
|
|
|
interface Args extends React.HTMLAttributes<HTMLElement> {
|
|
display: boolean
|
|
currentChatId: string
|
|
openChatFragment: (id: string) => void
|
|
}
|
|
|
|
export default function RecentsList({
|
|
currentChatId,
|
|
display,
|
|
openChatFragment,
|
|
...props
|
|
}: Args) {
|
|
const searchRef = React.useRef<HTMLElement>(null)
|
|
const [searchText, setSearchText] = React.useState('')
|
|
const [recentsList, setRecentsList] = React.useState<RecentChat[]>([])
|
|
|
|
useEventListener(searchRef, 'input', (e) => {
|
|
setSearchText((e.target as unknown as TextField).value)
|
|
})
|
|
|
|
useAsyncEffect(async () => {
|
|
async function updateRecents() {
|
|
const re = await Client.invoke("User.getMyRecentChats", {
|
|
token: data.access_token,
|
|
})
|
|
if (re.code != 200) {
|
|
if (re.code != 401 && re.code != 400) checkApiSuccessOrSncakbar(re, "获取最近对话列表失败")
|
|
return
|
|
}
|
|
|
|
setRecentsList(re.data!.recent_chats as RecentChat[])
|
|
}
|
|
updateRecents()
|
|
EventBus.on('RecentsList.updateRecents', () => updateRecents())
|
|
const id = setInterval(() => updateRecents(), 15 * 1000)
|
|
return () => {
|
|
EventBus.off('RecentsList.updateRecents')
|
|
clearInterval(id)
|
|
}
|
|
})
|
|
|
|
return <mdui-list style={{
|
|
overflowY: 'auto',
|
|
paddingRight: '10px',
|
|
paddingLeft: '10px',
|
|
paddingTop: '0',
|
|
display: display ? undefined : 'none',
|
|
height: '100%',
|
|
width: '100%',
|
|
}} {...props}>
|
|
<mdui-text-field icon="search" type="search" clearable ref={searchRef} variant="outlined" placeholder="搜索..." style={{
|
|
paddingTop: '12px',
|
|
marginBottom: '13px',
|
|
position: 'sticky',
|
|
top: '0',
|
|
backgroundColor: 'rgb(var(--mdui-color-background))',
|
|
zIndex: '10',
|
|
}}></mdui-text-field>
|
|
{
|
|
recentsList.filter((chat) =>
|
|
searchText == '' ||
|
|
chat.title.includes(searchText) ||
|
|
chat.id.includes(searchText) ||
|
|
chat.content.includes(searchText)
|
|
).map((v) =>
|
|
<RecentsListItem
|
|
active={isMobileUI() ? false : currentChatId == v.id}
|
|
openChatFragment={() => openChatFragment(v.id)}
|
|
key={v.id}
|
|
recentChat={v} />
|
|
)
|
|
}
|
|
</mdui-list>
|
|
} |