feat(wip): 上傳圖片等多媒體文件

* 不再區分 user_a/b, 直接使用 members_list 雙成員模式
* 爲以後群聊打下基礎

client/api/Client.ts

@@ -3,6 +3,7 @@ import { CallMethod, ClientEvent } from './ApiDeclare.ts'
 import ApiCallbackMessage from './ApiCallbackMessage.ts'
 import User from "./client_data/User.ts"
 import data from "../Data.ts"
+import { checkApiSuccessOrSncakbar } from "../ui/snackbar.ts"
 
 type UnknownObject = { [key: string]: unknown }
 
@@ -21,6 +22,13 @@ class Client {
                 device_id: data.device_id
             },
         })
+        this.socket!.on("connect", async () => {
+            const re = await this.invoke("User.auth", {
+                access_token: data.access_token
+            }, 1000)
+            if (re.code != 200)
+                checkApiSuccessOrSncakbar(re, "重連失敗")
+        })
         this.socket!.on("The_White_Silk", (name: string, data: UnknownObject, callback: (ret: UnknownObject) => void) => {
             try {
                 if (name == null || data == null) return
@@ -33,15 +41,16 @@ class Client {
     }
     static invoke(method: CallMethod, args: UnknownObject = {}, timeout: number = 5000): Promise<ApiCallbackMessage> {
         if (this.socket == null) {
+            console.warn("客戶端未初始化, 等待初始化后再請求......")
             return new Promise((reslove) => {
                 setTimeout(async () => reslove(await this.invoke(method, args, timeout)), 500)
             })
         }
         return new Promise((resolve) => {
-            this.socket!.timeout(timeout).emit("The_White_Silk", method, args, (err: string, res: ApiCallbackMessage) => {
+            this.socket!.timeout(timeout).emit("The_White_Silk", method, args, (err: Error, res: ApiCallbackMessage) => {
                 if (err) return resolve({
                     code: -1,
-                    msg: err,
+                    msg: err.message.indexOf("timed out") != -1 ? "請求超時" : err.message,
                 })
                 resolve(res)
             })

client/ui/chat/ChatFragment.tsx

@@ -50,14 +50,14 @@ export default function ChatFragment({ target, ...props }: Args) {
 
         if (checkApiSuccessOrSncakbar(re, "拉取歷史記錄失敗")) return
         const returnMsgs = (re.data!.messages as Message[]).reverse()
-        if (returnMsgs.length == 0)
+        if (returnMsgs.length == 0) {
-            return snackbar({
+            setShowNoMoreMessagesTip(true)
-                message: "已經沒有消息了哦~",
+            setTimeout(() => setShowNoMoreMessagesTip(false), 1000)
-                placement: 'top',
+            return
-            })
+        }
         setMessagesList(returnMsgs.concat(messagesList))
 
-        if (page.current == 0 + 1)
+        if (page.current == 0)
             setTimeout(() => chatPanelRef.current!.scrollTo({
                 top: 10000000000,
                 behavior: "smooth",
@@ -75,6 +75,11 @@ export default function ChatFragment({ target, ...props }: Args) {
             const { chat, msg } = (data as OnMessageData)
             if (target == chat) {
                 setMessagesList(messagesList.concat([msg]))
+                if ((chatPanelRef.current!.scrollHeight - chatPanelRef.current!.scrollTop - chatPanelRef.current!.clientHeight) < 80)
+                    setTimeout(() => chatPanelRef.current!.scrollTo({
+                        top: 10000000000,
+                        behavior: "smooth",
+                    }), 100)
             }
         })
         return () => {
@@ -83,6 +88,8 @@ export default function ChatFragment({ target, ...props }: Args) {
     })
 
     const inputRef = React.useRef<TextField>(null)
+    const [showLoadingMoreMessagesTip, setShowLoadingMoreMessagesTip] = React.useState(false)
+    const [showNoMoreMessagesTip, setShowNoMoreMessagesTip] = React.useState(false)
 
     async function sendMessage() {
         const text = inputRef.current!.value
@@ -94,11 +101,6 @@ export default function ChatFragment({ target, ...props }: Args) {
         }, 5000)
         if (checkApiSuccessOrSncakbar(re, "發送失敗")) return
         inputRef.current!.value = ''
-
-        chatPanelRef.current!.scrollTo({
-            top: 10000000000,
-            behavior: "smooth",
-        })
     }
 
     return (
@@ -124,14 +126,37 @@ export default function ChatFragment({ target, ...props }: Args) {
                     display: tabItemSelected == "Chat" ? "flex" : "none",
                     flexDirection: "column",
                     height: "100%",
+                }} onScroll={async (e) => {
+                    const scrollTop = (e.target as HTMLDivElement).scrollTop
+                    if (scrollTop == 0 && !showLoadingMoreMessagesTip) {
+                        setShowLoadingMoreMessagesTip(true)
+                        await loadMore()
+                        setShowLoadingMoreMessagesTip(false)
+                    }
                 }}>
                     <div style={{
-                        display: "flex",
+                        display: 'flex',
                         justifyContent: "center",
                         paddingTop: "15px",
-
                     }}>
-                        <mdui-button variant="text" onClick={() => loadMore()}>加載更多</mdui-button>
+                        <div style={{
+                            display: showLoadingMoreMessagesTip ? 'flex' : 'none',
+                        }}>
+                            <mdui-circular-progress style={{
+                                width: '30px',
+                                height: '30px',
+                            }}></mdui-circular-progress>
+                            <span style={{
+                                alignSelf: 'center',
+                                paddingLeft: '12px',
+                            }}>加載中...</span>
+                        </div>
+                        <div style={{
+                            display: showNoMoreMessagesTip ? undefined : 'none',
+                            alignSelf: 'center',
+                        }}>
+                            沒有更多消息啦~
+                        </div>
                     </div>
                     <MessageContainer style={{
                         paddingTop: "15px",
@@ -155,14 +180,24 @@ export default function ChatFragment({ target, ...props }: Args) {
                         alignItems: 'center',
                         paddingBottom: '2px',
                         paddingTop: '0.1rem',
-                        height: '4rem',
                         position: 'sticky',
                         bottom: '0',
                         marginLeft: '5px',
                         marginRight: '4px',
                         backgroundColor: 'rgb(var(--mdui-color-background))',
+                    }} onDrop={(e) => {
+                        if (e.dataTransfer.files) {
+                            const files = e.dataTransfer.files
+                            // 基于当前的实现, 浏览器不会读取文件的字节流来确定其媒体类型, 其根据文件扩展名进行假设
+                            // https://developer.mozilla.org/zh-CN/docs/Web/API/Blob/type
+                            for (const file of files) {
+                                if (file.type.startsWith("image/")) {
+                                    
+                                }
+                            }
+                        }
                     }}>
-                        <mdui-text-field variant="outlined" placeholder="喵呜~" autosize ref={inputRef as any} max-rows={1} onKeyDown={(event) => {
+                        <mdui-text-field variant="outlined" placeholder="喵呜~" autosize ref={inputRef as any} max-rows={6} onKeyDown={(event) => {
                             if (event.ctrlKey && event.key == 'Enter')
                                 sendMessage()
                         }} style={{

server/data/Chat.ts

@@ -7,6 +7,7 @@ import ChatBean from './ChatBean.ts'
 import { SQLInputValue } from "node:sqlite"
 import chalk from "chalk"
 import User from "./User.ts"
+import ChatType from "./ChatType.ts"
 
 /**
  * Chat.ts - Wrapper and manager
@@ -25,8 +26,7 @@ export default class Chat {
                 /* Chat ID */ id TEXT NOT NULL,
                 /* 標題 (群組) */ title TEXT,
                 /* 頭像 (群組) */ avatar BLOB,
-                /* UserIdA (私信) */ user_a_id TEXT,
+                /* 成員 */ members_list TEXT,
-                /* UserIdB (私信) */ user_b_id TEXT,
                 /* 设置 */ settings TEXT NOT NULL
             );
        `)
@@ -46,7 +46,7 @@ export default class Chat {
         return new Chat(beans[0])
     }
 
-    static create(chatId: string, type: 'private' | 'group') {
+    static create(chatId: string, type: ChatType) {
         const chat = new Chat(
             Chat.findAllBeansByCondition(
                 'count = ?',
@@ -55,16 +55,14 @@ export default class Chat {
                     id,
                     title,
                     avatar,
-                    user_a_id,
+                    members_list,
-                    user_b_id,
                     settings
-                ) VALUES (?, ?, ?, ?, ?, ?, ?);`).run(
+                ) VALUES (?, ?, ?, ?, ?, ?);`).run(
                     type,
                     chatId,
                     null,
                     null,
-                    null,
+                    "[]",
-                    null,
                     "{}"
                 ).lastInsertRowid
             )[0]
@@ -81,11 +79,28 @@ export default class Chat {
         this.bean[key] = value
     }
 
+    getMembersList() {
+        return JSON.parse(this.bean.members_list) as string[]
+    }
+    addMember(userId: string) {
+        const ls = this.getMembersList()
+        ls.push(userId)
+        this.setMembers(ls)
+    }
+    setMembers(members: string[]) {
+        this.setAttr("members_list", JSON.stringify(members))
+    }
+    removeMembers(members: string[]) {
+        const ls = this.getMembersList().filter((v) => !members.includes(v))
+        this.setAttr("members_list", JSON.stringify(ls))
+    }
     getAnotherUserForPrivate(userMySelf: User) {
+        const user_a_id = this.getMembersList()[0]
+        const user_b_id = this.getMembersList()[0]
         // 注意: 這裏已經確定了 Chat, 不需要再指定對方用戶
-        if (this.bean.user_a_id == userMySelf.bean.id)
+        if (user_a_id == userMySelf.bean.id)
-            return User.findById(this.bean?.user_b_id as string)
+            return User.findById(user_b_id as string)
-        if (this.bean.user_b_id == userMySelf.bean.id)
+        if (user_b_id == userMySelf.bean.id)
             return userMySelf
 
         return null

server/data/ChatBean.ts

@@ -1,10 +1,11 @@
+import ChatType from "./ChatType.ts"
+
 export default class ChatBean {
-    declare type: "private" | "group"
+    declare type: ChatType
     declare id: string
     declare title?: string
     declare avatar_file_hash?: string
-    declare user_a_id?: string
+    declare members_list: string
-    declare user_b_id?: string
     declare settings: string
 
     [key: string]: unknown

server/data/ChatPrivate.ts

@@ -13,8 +13,10 @@ export default class ChatPrivate extends Chat {
 
     static createForPrivate(userA: User, userB: User) {
         const chat = this.create(this.getChatIdByUsersId(userA.bean.id, userB.bean.id), 'private')
-        chat.setAttr('user_a_id', userA.bean.id)
+        chat.setMembers([
-        chat.setAttr('user_b_id', userB.bean.id)
+            userA.bean.id,
+            userB.bean.id
+        ])
     }
     static findByUsersForPrivate(userA: User, userB: User) {
         const chat = this.findById(this.getChatIdByUsersId(userA.bean.id, userB.bean.id))

server/data/ChatType.ts

@@ -0,0 +1,3 @@
+type ChatType = 'private' | 'group'
+
+export default ChatType