feat(ui, wip): 对话页面

client/ui/chat-fragment/ChatPanel.tsx

@@ -0,0 +1,32 @@
+import { Chat, Message } from "lingchair-client-protocol"
+import ChatMessageContainer from "./ChatMessageContainer"
+import useAsyncEffect from "../../utils/useAsyncEffect"
+import * as React from 'react'
+
+function ChatPanelInner({ chat }: { chat: Chat }, ref: React.ForwardedRef<any>) {
+    const [messages, setMessages] = React.useState<Message[]>([])
+    const [offset, setOffset] = React.useState(0)
+
+    React.useImperativeHandle(ref, () => {
+        return {
+            setOffset: (offset: number) => setOffset(offset),
+            getOffset: () => offset,
+        }
+    }, [chat])
+
+    useAsyncEffect(async () => {
+        const messages = await chat.getMessagesOrThrow({ offset })
+        setMessages(messages)
+    }, [chat, offset])
+
+    return <ChatMessageContainer messages={messages} />
+}
+
+const ChatPanel = React.forwardRef(ChatPanelInner)
+
+export type ChatPanelRef = {
+    setOffset: (offset: number) => void
+    getOffset: () => number
+}
+
+export default ChatPanel