feat(ui, wip): 对话页面

client/ui/chat-fragment/ChatFragment.tsx

@@ -12,6 +12,7 @@ import TextFieldPreference from "../preference/TextFieldPreference"
 import * as React from 'react'
 import ChatMessageContainer from "./ChatMessageContainer"
 import AppStateContext from "../app-state/AppStateContext"
+import ChatPanel, { ChatPanelRef } from "./ChatPanel"
 
 interface MduiTabFitSizeArgs extends React.HTMLAttributes<HTMLElement & Tab> {
     value: string
@@ -41,6 +42,9 @@ export default function ChatFragment({
 
     const chatPanelRef = React.useRef<HTMLElement>()
     const inputRef = React.useRef<TextField>()
+    const chatPagePanelRef = React.useRef<ChatPanelRef>()
+
+    
 
     return (
         <div style={{
@@ -126,6 +130,7 @@ export default function ChatFragment({
                 const scrollTop = (e.target as HTMLDivElement).scrollTop
                 if (scrollTop == 0) {
                     // 加载更多
+                    chatPagePanelRef.current?.setOffset(chatPagePanelRef.current.getOffset() + 15)
                 }
             }}>
                 <div style={{
@@ -135,7 +140,7 @@ export default function ChatFragment({
                 }}>
                     {/* 这里显示一些提示 */}
                 </div>
-                <ChatMessageContainer chatInfo={chatInfo} />
+                <ChatPanel ref={chatPagePanelRef} chat={chatInfo} />
                 {
                     // 输入框
                 }
@@ -180,8 +185,10 @@ export default function ChatFragment({
                     }}></mdui-button-icon>
                     <mdui-button-icon icon="send" style={{
                         marginRight: '7px',
-                    }} onClick={() => {
+                    }} onClick={async () => {
                         // 发送消息
+                        await chatInfo.sendMessageOrThrow(inputRef.current!.value)
+                        inputRef.current!.value = ''
                     }}></mdui-button-icon>
                     <div style={{
                         display: 'none'

client/ui/chat-fragment/ChatMessage.tsx

@@ -0,0 +1,5 @@
+import { Message } from "lingchair-client-protocol"
+
+export default function ChatMessage({ message }: { message: Message }) {
+    return null
+}

client/ui/chat-fragment/ChatMessageContainer.tsx

@@ -1,13 +1,7 @@
 import { Chat, Message } from 'lingchair-client-protocol'
 import * as React from 'react'
 
-export default function ChatMessageContainer({
+export default function ChatMessageContainer({ messages }: { messages: Message[] }) {
-    chat,
-}: {
-    chat: Chat
-}) {
-    const [messages, setMessages] = React.useState<Message[]>()
-
     return (
         <div style={{
             display: 'flex',

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