(WIP) 重构客户端

this.refresh_token = args.refresh_token
/**
     * 进行身份验证以接受客户端事件
     *
     * 使用验证方式优先级: 访问 > 刷新 > 账号密码
     *
     * 若传递了账号密码, 则同时缓存新的访问令牌和刷新令牌
     *
     * 如只传递两个令牌的其一, 按照优先级并在成功验证后赋值
     *
     * 多个验证方式不会逐一尝试
     */

.gitignore

@@ -2,9 +2,6 @@
 thewhitesilk_config.json
 # **默认**数据目录
 thewhitesilk_data/
-
-deno.lock
+# Node.js
+package-lock.json
 node_modules/
-
-#npm
-package-lock.json

.vscode/launch.json

@@ -5,10 +5,10 @@
     "version": "0.2.0",
     "configurations": [
         {
-            "command": "deno task build-and-run-server",
-            "name": "Run debug",
+            "command": "npm run debug",
+            "name": "Debug",
             "request": "launch",
-            "type": "node-terminal",
-        },
+            "type": "node-terminal"
+        }
     ]
 }

.vscode/settings.json

@@ -1,7 +0,0 @@
-{
-    "deno.enable": true,
-    "deno.disablePaths": [
-        "./thewhitesilk_data",
-        "./client/mdui_patched"
-    ]
-}

Dockerfile

@@ -11,10 +11,12 @@ WORKDIR /app
 COPY --exclude=.git --exclude=.gitignore --exclude=Dockerfile --exclude=readme.md --exclude=thewhitesilk_config.json --exclude=thewhitesilk_data . .
 
 # 缓存依赖并构建项目
-RUN deno task build
+RUN npm run install-dependencies
+
+RUN npm run build-client
 
 # 暴露应用端口（根据你的应用调整端口号）
 EXPOSE 3601
 
 # 启动服务
-CMD ["deno", "task", "build-and-run-server"]
+CMD ["npm", "run", "server"]

client-protocol/ApiCallbackMessage.ts

@@ -1,15 +1,3 @@
-type ApiCallbackMessage = {
-    msg: string,
-    /**
-     * 200: 成功
-     * 400: 伺服器端無法理解客戶端請求
-     * 401: 需要身份驗證
-     * 403: 伺服器端拒絕執行客戶端請求
-     * 404: Not Found
-     * 500: 伺服器端錯誤
-     * 501: 伺服器端不支持請求的功能
-     */
-    code: 200 | 400 | 401 | 403 | 404 | 500 | 501 | -1,
-    data?: { [key: string]: unknown },
-}
-export default ApiCallbackMessage
+import { ApiCallbackMessage } from 'lingchair-internal-shared'
+
+export type { ApiCallbackMessage as default }

client-protocol/ApiDeclare.ts

@@ -1,47 +1,11 @@
-export type CallMethod = 
-    "User.auth" |
-    "User.register" |
-    "User.login" |
-    "User.refreshAccessToken" |
+export * from 'lingchair-internal-shared'
 
-    "User.setAvatar" |
-    "User.updateProfile" |
-    "User.getMyInfo" |
-    "User.resetPassword" |
+import { ClientEvent } from "lingchair-internal-shared"
 
-    "User.getInfo" |
+import Message from "./Message.ts"
 
-    "User.getMyContacts" |
-    "User.addContacts" |
-    "User.removeContacts" |
+export type ClientEventData<T extends ClientEvent> = 
+    T extends "Client.onMessage" ? { message: Message } :
+    never
 
-    "User.getMyRecentChats" | 
-
-    "Chat.getInfo" |
-    
-    "Chat.updateSettings" |
-    "Chat.setAvatar" |
-
-    "Chat.createGroup" |
-
-    "Chat.getIdForPrivate" |
-    "Chat.getAnotherUserIdFromPrivate" |
-
-    "Chat.processJoinRequest" |
-    "Chat.sendJoinRequest" |
-    "Chat.getJoinRequests" |
-
-    "Chat.sendMessage" |
-    "Chat.getMessageHistory" |
-
-    "Chat.uploadFile"
-
-export type ClientEvent = 
-    "Client.onMessage"
-
-export const CallableMethodBeforeAuth = [
-    "User.auth",
-    "User.register",
-    "User.login",
-    "User.refreshAccessToken",
-]
+export type ClientEventCallback<T extends ClientEvent> = (data: ClientEventData<T>) => void

client-protocol/CallbackError.ts

@@ -1,7 +1,11 @@
 import ApiCallbackMessage from "./ApiCallbackMessage.ts"
 
 export default class CallbackError extends Error {
+    declare code: number
+    declare data?: object
     constructor(re: ApiCallbackMessage) {
         super(`[${re.code}] ${re.msg}${re.data ? ` (data: ${JSON.stringify(re.data)})` : ''}`)
+        this.code = re.code
+        this.data = re.data
     }
 }

client-protocol/Chat.ts

@@ -19,6 +19,11 @@ export default class Chat extends BaseClientObject {
      *                    实例化方法
      * ================================================
      */
+    static getForInvokeOnlyById(client: LingChairClient, id: string) {
+        return new Chat(client, {
+            id
+        } as ChatBean)
+    }
     static async getById(client: LingChairClient, id: string) {
         try {
             return await this.getByIdOrThrow(client, id)

client-protocol/LingChairClient.ts

@@ -1,46 +1,72 @@
 // deno-lint-ignore-file no-explicit-any
 import { io, ManagerOptions, Socket, SocketOptions } from 'socket.io-client'
 import crypto from 'node:crypto'
-import { CallMethod, ClientEvent } from './ApiDeclare.ts'
+import { CallMethod, ClientEvent, ClientEventCallback } from './ApiDeclare.ts'
 import ApiCallbackMessage from './ApiCallbackMessage.ts'
-import User from "./User.ts"
-import UserMySelf from "./UserMySelf.ts"
+import { CallableMethodBeforeAuth, randomUUID } from "lingchair-internal-shared"
 import CallbackError from "./CallbackError.ts"
-import Chat from "./Chat.ts"
 
-export { 
-    User,
-    Chat,
-    UserMySelf,
-}
+import Message from "./Message.ts"
 
 export default class LingChairClient {
     declare client: Socket
     declare access_token: string
+    declare server_url: string
+    declare device_id: string
     declare refresh_token?: string
+    declare auto_fresh_token: boolean
+    declare auth_cache: {
+        refresh_token?: string,
+        access_token?: string,
+        account?: string,
+        password?: string,
+    }
     constructor(args: {
         server_url: string
         device_id: string,
         io?: Partial<ManagerOptions & SocketOptions>
+        auto_fresh_token?: boolean
     }) {
+        this.server_url = args.server_url
+        this.auto_fresh_token = args.auto_fresh_token || false
+        this.device_id = args.device_id
         this.client = io(args.server_url, {
             transports: ["polling", "websocket", "webtransport"],
             ...args.io,
             auth: {
                 ...args.io?.auth,
-                device_id: args.device_id,
-                session_id: crypto.randomUUID(),
+                device_id: this.device_id,
+                session_id: randomUUID(),
             },
         })
-        this.client.on("The_White_Silk", (name: string, data: unknown, _callback: (ret: unknown) => void) => {
+        this.client.on("The_White_Silk", (name: ClientEvent, data: any, _callback: (ret: unknown) => void) => {
             try {
                 if (name == null || data == null) return
-                this.events[name]?.forEach((v) => v(data))
+                for (const v of (this.events[name] || []))
+                    v(({
+                        "Client.onMessage": {
+                            message: new Message(this, data.msg)
+                        }
+                    })[name])
             } catch (e) {
                 console.error(e)
             }
         })
     }
+    events: { [K in ClientEvent]?: ClientEventCallback<K>[] } = {}
+    on<K extends ClientEvent>(eventName: K, func: ClientEventCallback<K>) {
+        if (this.events[eventName] == null)
+            this.events[eventName] = []
+        if (this.events[eventName].indexOf(func) == -1)
+            this.events[eventName].push(func)
+    }
+    off<K extends ClientEvent>(eventName: K, func: ClientEventCallback<K>) {
+        if (this.events[eventName] == null)
+            this.events[eventName] = []
+        const index = this.events[eventName].indexOf(func)
+        if (index != -1)
+            this.events[eventName].splice(index, 1)
+    }
     connect() {
         this.client.connect()
     }
@@ -59,24 +85,38 @@ export default class LingChairClient {
                     code: -1,
                     msg: err.message,
                 })
-                resolve(res)
+                if (CallableMethodBeforeAuth.indexOf(method) == -1 && res.code == 401 && this.auto_fresh_token) {
+                    if (this.auth_cache)
+                        this.auth(this.auth_cache).then((re) => {
+                            if (!re) resolve(res)
+                            this.invoke(method, args, timeout).then((re) => resolve(re))
+                        })
+                    else
+                        resolve(res)
+                } else
+                    resolve(res)
             })
         })
     }
-    events: { [key: string]: ((data: any) => void)[] } = {}
-    on(eventName: ClientEvent, func: (data: any) => void) {
-        if (this.events[eventName] == null)
-            this.events[eventName] = []
-        if (this.events[eventName].indexOf(func) == -1)
-            this.events[eventName].push(func)
+    /** 
+     * 建议在 auth 返回 true 时调用
+     */
+    getCachedAccessToken() {
+        return this.access_token
     }
-    off(eventName: ClientEvent, func: (data: any) => void) {
-        if (this.events[eventName] == null)
-            this.events[eventName] = []
-        const index = this.events[eventName].indexOf(func)
-        if (index != -1)
-            this.events[eventName].splice(index, 1)
+    /** 
+     * 建议在 auth 返回 true 时调用
+     */
+    getCachedRefreshToken() {
+        return this.refresh_token
     }
+    /** 
+     * 客户端上线
+     * 
+     * 使用验证方式优先级: 访问 > 刷新 > 账号密码
+     * 
+     * 不会逐一尝试
+     */
     async auth(args: {
         refresh_token?: string,
         access_token?: string,
@@ -90,25 +130,38 @@ export default class LingChairClient {
             return false
         }
     }
+    /** 
+     * 进行身份验证以接受客户端事件
+     * 
+     * 使用验证方式优先级: 访问 > 刷新 > 账号密码
+     * 
+     * 若传递了账号密码, 则同时缓存新的访问令牌和刷新令牌
+     * 
+     * 如只传递两个令牌的其一, 按照优先级并在成功验证后赋值
+     * 
+     * 多个验证方式不会逐一尝试
+     */
     async authOrThrow(args: {
-        refresh_token?: string,
-        access_token?: string,
-        account?: string,
-        password?: string,
+        refresh_token?: string
+        access_token?: string
+        account?: string
+        password?: string
+        ignore_all_empty?: boolean
     }) {
-        if ((!args.access_token && !args.refresh_token) && (!args.account && !args.password))
-            throw new Error('Access/Refresh token or account & password required')
+        if ((!args.access_token && !args.refresh_token) && (!args.account && !args.password) && !args.ignore_all_empty)
+            throw new Error('Access/Refresh token or account & password required, or ignore_all_empty=true')
 
-        this.refresh_token = args.refresh_token
+        this.auth_cache = args
 
         let access_token = args.access_token
         if (!access_token && args.refresh_token) {
             const re = await this.invoke('User.refreshAccessToken', {
                 refresh_token: args.refresh_token,
             })
-            if (re.code == 200) 
+            if (re.code == 200) {
                 access_token = re.data!.access_token as string | undefined
-            else 
+                this.refresh_token = args.refresh_token
+            } else
                 throw new CallbackError(re)
         }
 
@@ -117,30 +170,42 @@ export default class LingChairClient {
                 account: args.account,
                 password: crypto.createHash('sha256').update(args.password).digest('hex'),
             })
-            if (re.code == 200) 
+            if (re.code == 200) {
                 access_token = re.data!.access_token as string | undefined
-            else 
+                this.refresh_token = re.data!.refresh_token as string
+            } else
                 throw new CallbackError(re)
         }
 
         const re = await this.invoke('User.auth', {
             access_token: access_token
         })
-        if (re.code == 200) 
+        if (re.code == 200)
             this.access_token = access_token as string
-        else 
+        else
             throw new CallbackError(re)
     }
+    getBaseHttpUrl() {
+        const url = new URL(this.server_url)
+        return (({
+            'ws:': 'http:',
+            'wss:': 'https:',
+            'http:': 'http:',
+            'https:': 'https:',
+        })[url.protocol] || 'http:') + '//' + url.host
+    }
+    getUrlForFileByHash(file_hash?: string, defaultUrl?: string) {
+        return file_hash ? (this.getBaseHttpUrl() + '/uploaded_files/' + file_hash) : defaultUrl
+    }
     async register(args: {
         nickname: string,
         username?: string,
         password: string,
     }) {
         try {
-            this.registerOrThrow(args)
-            return true
+            return await this.registerOrThrow(args)
         } catch (_) {
-            return false
+            return null
         }
     }
     async registerOrThrow({
@@ -155,9 +220,50 @@ export default class LingChairClient {
         const re = await this.invoke('User.register', {
             nickname,
             username,
-            password,
+            password: crypto.createHash('sha256').update(password).digest('hex'),
         })
         if (re.code != 200)
             throw new CallbackError(re)
+        return re.data!.user_id as string
+    }
+    async uploadFile({
+        chatId,
+        fileData,
+        fileName,
+    }: { fileName: string, fileData: ArrayBuffer | Blob | Response, chatId?: string }) {
+        const form = new FormData()
+        form.append("file",
+            fileData instanceof ArrayBuffer
+                ? new File([fileData], fileName, { type: 'application/octet-stream' })
+                : (
+                    fileData instanceof Blob ? fileData :
+                        new File([await fileData.arrayBuffer()], fileName, { type: 'application/octet-stream' })
+                )
+        )
+        form.append('file_name', fileName)
+        chatId && form.append('chat_id', chatId)
+
+        const re = await fetch(this.getBaseHttpUrl() + '/upload_file', {
+            method: 'POST',
+            headers: {
+                "Token": this.access_token,
+                "Device-Id": this.device_id,
+            } as HeadersInit,
+            body: form,
+            credentials: 'omit',
+        })
+        const text = await (await re.blob()).text()
+        let json
+        try {
+            json = JSON.parse(text)
+            // deno-lint-ignore no-empty
+        } catch (_) { }
+        if (!re.ok) throw new CallbackError({
+            ...(json == null ? {
+                msg: text
+            } : json),
+            code: re.status,
+        } as ApiCallbackMessage)
+        return json.data.file_hash as string
     }
 }

client-protocol/Message.ts

@@ -3,6 +3,129 @@ import MessageBean from "./bean/MessageBean.ts"
 import LingChairClient from "./LingChairClient.ts"
 import Chat from "./Chat.ts"
 import User from "./User.ts"
+import CallbackError from "./CallbackError.ts"
+import ApiCallbackMessage from "./ApiCallbackMessage.ts"
+
+import * as marked from 'marked'
+import { text } from "node:stream/consumers";
+
+class ChatMention extends BaseClientObject {
+    declare chat_id?: string
+    declare user_id?: string
+    declare text?: string
+    constructor(client: LingChairClient, {
+        user_id,
+        chat_id,
+        text,
+    }: {
+        user_id?: string,
+        chat_id?: string,
+        text: string,
+    }) {
+        super(client)
+        this.user_id = user_id
+        this.chat_id = chat_id
+        this.text = text
+    }
+    async getChat() {
+        return await Chat.getById(this.client, this.chat_id as string)
+    }
+    async getUser() {
+        return await User.getById(this.client, this.user_id as string)
+    }
+    getText() {
+        return this.text
+    }
+}
+
+type FileType = 'Video' | 'Image' | 'File'
+type MentionType = 'ChatMention' | 'UserMention'
+
+class ChatAttachment extends BaseClientObject {
+    declare file_hash: string
+    declare file_name: string
+    constructor(client: LingChairClient, {
+        file_hash,
+        file_name
+    }: {
+        file_hash: string,
+        file_name: string
+    }) {
+        super(client)
+        this.file_name = file_name
+        this.file_hash = file_hash
+    }
+    async blob() {
+        try {
+            return await this.blobOrThrow()
+        } catch (_) {
+            return null
+        }
+    }
+    fetch(init?: RequestInit) {
+        const url = this.client.getUrlForFileByHash(this.file_hash)
+        return fetch(url!, init)
+    }
+    async blobOrThrow() {
+        const re = await this.fetch()
+        const blob = await re.blob()
+        if (!re.ok) throw new CallbackError({
+            msg: await blob.text(),
+            code: re.status,
+        } as ApiCallbackMessage)
+        return blob
+    }
+    async getMimeType() {
+        try {
+            return await this.getMimeTypeOrThrow()
+        } catch (_) {
+            return null
+        }
+    }
+    async getMimeTypeOrThrow() {
+        const re = await this.fetch({
+            method: 'HEAD'
+        })
+        if (re.ok) {
+            const t = re.headers.get('content-type')
+            if (t)
+                return t
+            throw new Error("Unable to get Content-Type")
+        }
+        throw new CallbackError({
+            msg: await re.text(),
+            code: re.status,
+        } as ApiCallbackMessage)
+    }
+    async getLength() {
+        try {
+            return await this.getLengthOrThrow()
+        } catch (_) {
+            return null
+        }
+    }
+    async getLengthOrThrow() {
+        const re = await this.fetch({
+            method: 'HEAD'
+        })
+        if (re.ok) {
+            const contentLength = re.headers.get('content-length')
+            if (contentLength)
+                return parseInt(contentLength)
+            throw new Error("Unable to get Content-Length")
+        }
+        throw new CallbackError({
+            msg: await re.text(),
+            code: re.status,
+        } as ApiCallbackMessage)
+    }
+    getFileHash() {
+        return this.file_hash
+    }
+    getFileName() {
+        return this.file_name
+    }
+}
 
 export default class Message extends BaseClientObject {
     declare bean: MessageBean
@@ -27,6 +150,84 @@ export default class Message extends BaseClientObject {
     getText() {
         return this.bean.text
     }
+    parseWithTransformers({
+        attachment,
+        mention,
+    }: {
+        attachment?: ({ text, fileType, attachment }: { text: string, fileType: FileType, attachment: ChatAttachment }) => string,
+        mention?: ({ text, mentionType, mention }: { text: string, mentionType: MentionType, mention: ChatMention }) => string,
+    }) {
+        return new marked.Marked({
+            async: false,
+            extensions: [
+                {
+                    name: 'text',
+                    renderer: ({ text }) => text,
+                },
+                {
+                    name: 'heading',
+                    renderer({ tokens }) {
+                        return this.parser.parseInline(tokens!)
+                    },
+                },
+                {
+                    name: 'paragraph',
+                    renderer({ tokens }) {
+                        return this.parser.parseInline(tokens!)
+                    },
+                },
+                {
+                    name: 'image',
+                    renderer: ({ text, href }) => {
+                        const mentionType = /^(UserMention|ChatMention)=.*/.exec(text)?.[1] as MentionType
+                        const fileType = (/^(Video|File|Image)=.*/.exec(text)?.[1] || 'Image') as FileType
+
+                        if (fileType != null && /tws:\/\/file\?hash=[A-Za-z0-9]+$/.test(href)) {
+                            const file_hash = /^tws:\/\/file\?hash=(.*)/.exec(href)?.[1]!
+                            let file_name: string = /^(Video|File|Image)=(.*)/.exec(text)?.[2] || text
+                            file_name.trim() == '' && (file_name = 'Unnamed_File')
+                            return attachment ? attachment({ text: text, attachment: new ChatAttachment(this.client, { file_hash, file_name }), fileType: fileType, }) : text
+                        }
+                        if (mentionType != null && /^tws:\/\/chat\?id=[A-Za-z0-9]+/.test(href)) {
+                            const id = /^tws:\/\/chat\?id=(.*)/.exec(href)?.[1]!
+                            const label = /^(User|Chat)Mention=(.*)/.exec(text)?.[2] || ''
+                            return mention ? mention({
+                                text: text,
+                                mention: new ChatMention(this.client, {
+                                    [({
+                                        ChatMention: 'chat_id',
+                                        UserMention: 'user_id',
+                                    })[mentionType]]: id,
+                                    text: label,
+                                }),
+                                mentionType: mentionType,
+                            }) : text
+                        }
+                    },
+                }
+            ]
+        }).parse(this.getText()) as string
+    }
+    getAttachments() {
+        const attachments: ChatAttachment[] = []
+        this.parseWithTransformers({
+            attachment({ attachment }) {
+                attachments.push(attachment)
+                return ''
+            }
+        })
+        return attachments
+    }
+    getMentions() {
+        const mentions: ChatMention[] = []
+        this.parseWithTransformers({
+            mention({ mention }) {
+                mentions.push(mention)
+                return ''
+            }
+        })
+        return mentions
+    }
     getUserId() {
         return this.bean.user_id
     }

client-protocol/RecentChat.ts

@@ -0,0 +1,13 @@
+import RecentChatBean from "./bean/RecentChatBean.ts"
+import Chat from "./Chat.ts"
+import LingChairClient from "./LingChairClient.ts"
+
+export default class RecentChat extends Chat {
+    declare bean: RecentChatBean
+    constructor(client: LingChairClient, bean: RecentChatBean) {
+        super(client, bean)
+    }
+    getContent() {
+        return this.bean.content
+    }
+}

client-protocol/User.ts

@@ -14,10 +14,15 @@ export default class User extends BaseClientObject {
      *                    实例化方法
      * ================================================
      */
+    static getForInvokeOnlyById(client: LingChairClient, id: string) {
+        return new User(client, {
+            id
+        } as UserBean)
+    }
     static async getById(client: LingChairClient, id: string) {
         try {
             return await this.getByIdOrThrow(client, id)
-        } catch(_) {
+        } catch (_) {
             return null
         }
     }

client-protocol/UserMySelf.ts

@@ -1,5 +1,7 @@
 import CallbackError from "./CallbackError.ts"
+import Chat from "./Chat.ts"
 import LingChairClient from "./LingChairClient.ts"
+import RecentChat from "./RecentChat.ts"
 import User from "./User.ts"
 import ChatBean from "./bean/ChatBean.ts"
 import RecentChatBean from "./bean/RecentChatBean.ts"
@@ -154,9 +156,19 @@ export default class UserMySelf extends User {
             token: this.client.access_token
         })
         if (re.code == 200)
-            return re.data!.recent_chats as ChatBean[]
+            return (re.data!.favourite_chats || re.data!.contacts_list) as ChatBean[]
         throw new CallbackError(re)
     }
+    async getMyFavouriteChats() {
+        try {
+            return await this.getMyFavouriteChatsOrThrow()
+        } catch (_) {
+            return []
+        }
+    }
+    async getMyFavouriteChatsOrThrow() {
+        return (await this.getMyFavouriteChatBeansOrThrow()).map((bean) => new Chat(this.client, bean))
+    }
     /*
      * ================================================
      *                    最近对话
@@ -177,4 +189,44 @@ export default class UserMySelf extends User {
             return re.data!.recent_chats as RecentChatBean[]
         throw new CallbackError(re)
     }
+    async getMyRecentChats() {
+        try {
+            return await this.getMyRecentChatsOrThrow()
+        } catch (_) {
+            return []
+        }
+    }
+    async getMyRecentChatsOrThrow() {
+        return (await this.getMyRecentChatBeansOrThrow()).map((bean) => new RecentChat(this.client, bean))
+    }
+    /*
+     * ================================================
+     *                    所有对话
+     * ================================================
+     */
+    async getMyAllChatBeans() {
+        try {
+            return await this.getMyAllChatBeansOrThrow()
+        } catch (_) {
+            return []
+        }
+    }
+    async getMyAllChatBeansOrThrow() {
+        const re = await this.client.invoke("User.getMyAllChats", {
+            token: this.client.access_token
+        })
+        if (re.code == 200)
+            return re.data!.all_chats as ChatBean[]
+        throw new CallbackError(re)
+    }
+    async getMyAllChats() {
+        try {
+            return await this.getMyAllChatsOrThrow()
+        } catch (_) {
+            return []
+        }
+    }
+    async getMyAllChatsOrThrow() {
+        return (await this.getMyAllChatBeansOrThrow()).map((bean) => new Chat(this.client, bean))
+    }
 }

client-protocol/bean/RecentChatBean.ts

@@ -1,5 +1,5 @@
 import ChatBean from "./ChatBean.ts"
 
-export default class RecentChat extends ChatBean {
+export default class RecentChatBean extends ChatBean {
     declare content: string
 }

client-protocol/deno.jsonc

@@ -1,5 +0,0 @@
-{
-    "imports": {
-        "socket.io-client": "npm:socket.io-client@4.8.1"
-    }
-}

client-protocol/main.ts

@@ -0,0 +1,28 @@
+import Chat from "./Chat.ts"
+import User from "./User.ts"
+import UserMySelf from "./UserMySelf.ts"
+import UserBean from "./bean/UserBean.ts"
+import ChatBean from "./bean/ChatBean.ts"
+import GroupSettingsBean from "./bean/GroupSettingsBean.ts"
+import JoinRequestBean from "./bean/JoinRequestBean.ts"
+import MessageBean from "./bean/MessageBean.ts"
+import RecentChatBean from "./bean/RecentChatBean.ts"
+
+import LingChairClient from "./LingChairClient.ts"
+import CallbackError from "./CallbackError.ts"
+
+export {
+    LingChairClient,
+    CallbackError,
+    
+    Chat,
+    User,
+    UserMySelf,
+
+    UserBean,
+    ChatBean,
+    MessageBean,
+    RecentChatBean,
+    JoinRequestBean,
+}
+export type { GroupSettingsBean }

client-protocol/package.json

@@ -0,0 +1,11 @@
+{
+    "name": "lingchair-client-protocol",
+    "type": "module",
+    "main": "./main.ts",
+    "dependencies": {
+        "lingchair-internal-shared": "*",
+        "marked": "16.3.0",
+        "socket.io-client": "4.8.1",
+        "crypto-browserify": "3.12.1"
+    }
+}

client-protocol/test.ts

@@ -1,18 +0,0 @@
-import LingChairClient, { Chat, UserMySelf } from "./LingChairClient.ts"
-import OnMessageData from "./type/OnMessageData.ts"
-
-const client = new LingChairClient({
-    server_url: 'ws://localhost:3601',
-    device_id: 'test01'
-})
-await client.auth({
-    account: '满月',
-    password: '满月',
-})
-client.on('Client.onMessage', async (data: OnMessageData) => {
-    const chat = await Chat.getById(client, data.chat)
-    const regexp = /^test (.*)/g.exec(data.msg.text)
-    if (regexp?.[0] != null) {
-        chat?.sendMessage(`Hello, ${regexp[1]}`)
-    }
-})

client/ClientCache.ts

@@ -0,0 +1,23 @@
+import { Chat, User } from "lingchair-client-protocol"
+import getClient from "./getClient"
+
+type CouldCached = User | Chat | null
+export default class ClientCache {
+    static caches: { [key: string]: CouldCached } = {}
+    
+    static async getUser(id: string) {
+        const k = 'user_' + id
+        if (this.caches[k] != null)
+            return this.caches[k] as User | null
+        this.caches[k] = await User.getById(getClient(), id)
+        return this.caches[k]
+    }
+
+    static async getChat(id: string) {
+        const k = 'chat_' + id
+        if (this.caches[k] != null)
+            return this.caches[k] as Chat | null
+        this.caches[k] = await Chat.getById(getClient(), id)
+        return this.caches[k]
+    }
+}

client/Data.ts

@@ -1,51 +0,0 @@
-// @ts-types="npm:@types/crypto-js"
-import * as CryptoJS from 'crypto-js'
-
-const dataIsEmpty = !localStorage.tws_data || localStorage.tws_data == ''
-
-const aes = {
-    enc: (data: string, key: string) => CryptoJS.AES.encrypt(data, key).toString(),
-    dec: (data: string, key: string) => CryptoJS.AES.decrypt(data, key).toString(CryptoJS.enc.Utf8),
-}
-
-const key = location.host + '_TWS_姐姐'
-
-if (dataIsEmpty) localStorage.tws_data = aes.enc('{}', key)
-
-let _dec = aes.dec(localStorage.tws_data, key)
-if (_dec == '') _dec = '{}'
-
-const _data_cached = JSON.parse(_dec)
-
-// 類型定義
-declare global {
-    interface Window {
-        data: {
-            refresh_token?: string
-            split_sizes: number[]
-            apply(): void
-            access_token?: string
-            device_id: string
-        }
-    }
-}
-
-// @ts-ignore: 忽略...
-// deno-lint-ignore no-window
-(window.data == null) && (window.data = new Proxy({
-    apply() {}
-}, {
-    get(_obj, k) {
-        if (k == '_cached') return _data_cached
-        if (k == 'apply') return () => localStorage.tws_data = aes.enc(JSON.stringify(_data_cached), key)
-        return _data_cached[k]
-    },
-    set(_obj, k, v) {
-        if (k == '_cached') return false
-        _data_cached[k] = v
-        return true
-    }
-}))
-
-// deno-lint-ignore no-window
-export default window.data

client/EventBus.ts

@@ -1,12 +0,0 @@
-export default class EventBus {
-    static events: { [key: string]: () => void } = {}
-    static on(eventName: string, func: () => void) {
-        this.events[eventName] = func
-    }
-    static off(eventName: string) {
-        delete this.events[eventName]
-    }
-    static emit(eventName: string) {
-        this.events[eventName]()
-    }
-}

client/MapJson.ts

@@ -1,20 +0,0 @@
-// https://stackoverflow.com/questions/29085197/how-do-you-json-stringify-an-es6-map
-
-export default class MapJson {
-    static replacer(key: unknown, value: unknown) {
-        if (value instanceof Map) {
-            return {
-                dataType: 'Map',
-                value: Array.from(value.entries()), // or with spread: value: [...value]
-            }
-        } else {
-            return value
-        }
-    }
-    static reviver(key: unknown, value: any) {
-        if (value?.dataType === 'Map') {
-            return new Map(value.value)
-        }
-        return value
-    }
-}

client/api/Client.ts

@@ -1,170 +0,0 @@
-import { io, Socket } from 'socket.io-client'
-import { CallMethod, ClientEvent, CallableMethodBeforeAuth } from './ApiDeclare.ts'
-import ApiCallbackMessage from './ApiCallbackMessage.ts'
-import User from "./client_data/User.ts"
-import data from "../Data.ts"
-import { checkApiSuccessOrSncakbar, snackbar } from "../ui/snackbar.ts"
-import randomUUID from "../randomUUID.ts"
-
-class Client {
-    static sessionId = randomUUID()
-    static myUserProfile?: User
-    static socket?: Socket
-    static events: { [key: string]: ((data: unknown) => void)[] } = {}
-    static connected = false
-    static connect() {
-        if (data.device_id == null)
-            data.device_id = randomUUID()
-        this.socket?.disconnect()
-        this.socket && delete this.socket
-        this.socket = io({
-            transports: ['websocket'],
-            auth: {
-                device_id: data.device_id,
-                session_id: this.sessionId,
-            },
-        })
-        this.socket!.on("connect", async () => {
-            this.connected = true
-            const re = await this.auth(data.access_token as string)
-            if (re.code != 200)
-                checkApiSuccessOrSncakbar(re, "重连失败")
-        })
-        this.socket!.on("disconnect", () => {
-            this.connected = false
-            const s = snackbar({
-                message: '重新连接服务器中...',
-                placement: 'top',
-                autoCloseDelay: 0,
-            })
-            let i = 1
-            const id = setInterval(() => {
-                s.textContent = `重新连接服务器中... (${i}s)`
-                i++
-                this.socket!.connect()
-            }, 1000)
-            this.socket!.once('connect', () => {
-                s.open = false
-                clearTimeout(id)
-            })
-        })
-        this.socket!.on("The_White_Silk", (name: string, data: unknown, callback: (ret: unknown) => void) => {
-            try {
-                if (name == null || data == null) return
-                this.events[name]?.forEach((v) => v(data))
-            } catch (e) {
-                console.error(e)
-            }
-        })
-    }
-    static invoke(method: CallMethod, args: object = {}, timeout: number = 10000, refreshAndRetryLimit: number = 3, forceRefreshAndRetry: boolean = false): Promise<ApiCallbackMessage> {
-        // 在 未初始化 / 未建立连接且调用非可调用接口 的时候进行延迟
-        if (this.socket == null || (!this.connected && !CallableMethodBeforeAuth.includes(method))) {
-            return new Promise((reslove) => {
-                setTimeout(async () => reslove(await this.invoke(method, args, timeout)), 500)
-            })
-        }
-        // 反之, 返回 Promise
-        return new Promise((resolve) => {
-            this.socket!.timeout(timeout).emit("The_White_Silk", method, args, async (err: Error, res: ApiCallbackMessage) => {
-                // 错误处理
-                if (err) return resolve({
-                    code: -1,
-                    msg: err.message.indexOf("timed out") != -1 ? "請求超時" : err.message,
-                })
-                // 在特殊的方法之中, 不予进行: 令牌刷新并重试
-                // 附带 retry 次数限制
-                if (
-                    (
-                        forceRefreshAndRetry ||
-                        (
-                            !CallableMethodBeforeAuth.includes(method)
-                            && res.code == 401
-                        )
-                    ) && refreshAndRetryLimit > 0
-                ) {
-                    const token = await this.refreshAccessToken()
-                    if (token) {
-                        data.access_token = token
-                        data.apply()
-                        resolve(await this.invoke(method, {
-                            ...args,
-                            [method == "User.auth" ? "access_token" : "token"]: token,
-                        }, timeout, refreshAndRetryLimit - 1))
-                    } else
-                        resolve(res)
-                } else
-                    resolve(res)
-            })
-        })
-    }
-    static async refreshAccessToken() {
-        const re = await this.invoke("User.refreshAccessToken", {
-            refresh_token: data.refresh_token 
-        })
-        return re.data?.access_token as string
-    }
-    static async auth(token: string, timeout?: number) {
-        const re = await this.invoke("User.auth", {
-            access_token: token
-        }, timeout, 1, true)
-        if (re.code == 200) {
-            // 灵车: 你应该先 connected = true 再调用
-            await this.updateCachedProfile()
-            document.cookie = 'token=' + token
-            document.cookie = 'device_id=' + data.device_id
-        }
-        return re
-    }
-    static async uploadFileLikeApi(fileName: string, fileData: ArrayBuffer | Blob | Response, chatId?: string) {
-        const form = new FormData()
-        form.append("file", 
-            fileData instanceof ArrayBuffer 
-            ? new File([fileData], fileName, { type: 'application/octet-stream' })
-            : (
-                fileData instanceof Blob ? fileData : 
-                new File([await fileData.arrayBuffer()], fileName, { type: 'application/octet-stream' })
-            )
-        )
-        form.append('file_name', fileName)
-        chatId && form.append('chat_id', chatId)
-        const re = await fetch('./upload_file', {
-            method: 'POST',
-            headers: {
-                "Token": data.access_token,
-                "Device-Id": data.device_id,
-            } as HeadersInit,
-            body: form,
-            credentials: 'omit',
-        })
-        return {
-            ...await re.json(),
-            code: re.status,
-        } as ApiCallbackMessage
-    }
-    static async uploadFile(fileName: string, fileData: ArrayBuffer | Blob | Response, chatId?: string) {
-        const re = await this.uploadFileLikeApi(fileName, fileData, chatId)
-        if (re.code != 200) throw new Error(re.msg)
-        return re.data!.hash as string
-    }
-    static async updateCachedProfile() {
-        this.myUserProfile = (await Client.invoke("User.getMyInfo", {
-            token: data.access_token
-        })).data as unknown as User
-    }
-    static on(eventName: ClientEvent, func: (data: unknown) => void) {
-        if (this.events[eventName] == null)
-            this.events[eventName] = []
-        if (this.events[eventName].indexOf(func) == -1)
-            this.events[eventName].push(func)
-    }
-    static off(eventName: ClientEvent, func: (data: unknown) => void) {
-        if (this.events[eventName] == null)
-            this.events[eventName] = []
-        const index = this.events[eventName].indexOf(func)
-        if (index != -1)
-            this.events[eventName].splice(index, 1)
-    }
-}
-
-export default Client

client/api/DataCaches.ts

@@ -1,36 +0,0 @@
-import data from "../Data.ts"
-import Client from "./Client.ts"
-import Chat from "./client_data/Chat.ts"
-import User from "./client_data/User.ts"
-
-export default class DataCaches {
-    static userProfiles: { [key: string]: User} = {}
-    static async getUserProfile(userId: string): Promise<User> {
-        if (this.userProfiles[userId]) return this.userProfiles[userId]
-        const re = await Client.invoke("User.getInfo", {
-            token: data.access_token,
-            target: userId
-        })
-        if (re.code != 200) return {
-            id: '',
-            nickname: "",
-        }
-        return this.userProfiles[userId] = (re.data as unknown as User)
-    }
-    static chatInfos: { [key: string]: Chat} = {}
-    static async getChatInfo(chatId: string): Promise<Chat> {
-        if (this.chatInfos[chatId]) return this.chatInfos[chatId]
-        const re = await Client.invoke('Chat.getInfo', {
-            token: data.access_token,
-            target: chatId,
-        })
-        if (re.code != 200) return {
-            id: '',
-            title: '',
-            type: '' as any,
-            is_admin: false,
-            is_member: false,
-        }
-        return this.chatInfos[chatId] = (re.data as unknown as Chat)
-    }
-}

client/api/client_data/Chat.ts

@@ -1,14 +0,0 @@
-import ChatType from "./ChatType.ts"
-
-export default class Chat {
-    declare type: ChatType
-    declare id: string
-    declare title: string
-    declare avatar_file_hash?: string
-    declare settings?: { [key: string]: unknown }
-
-    declare is_member: boolean
-    declare is_admin: boolean
-
-    [key: string]: unknown
-}

client/api/client_data/ChatType.ts

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

client/api/client_data/GroupSettings.ts

@@ -1,14 +0,0 @@
-interface GroupSettings {
-    allow_new_member_join?: boolean
-    allow_new_member_from_invitation?: boolean
-    new_member_join_method?: 'disabled' | 'allowed_by_admin' | 'answered_and_allowed_by_admin'
-    answered_and_allowed_by_admin_question?: string
-
-    // 下面两个比较特殊, 由服务端给予
-    group_title: string
-    group_name: string
-
-    [key: string]: unknown
-}
-
-export default GroupSettings

client/api/client_data/JoinRequest.ts

@@ -1,8 +0,0 @@
-export default class JoinRequest {
-    declare user_id: string
-    declare title: string
-    declare avatar?: string
-    declare reason?: string
-
-    [key: string]: unknown
-}

client/api/client_data/Message.ts

@@ -1,6 +0,0 @@
-export default class Message {
-    declare id: number
-    declare text: string
-    declare user_id: string
-    declare time: string
-}

client/api/client_data/RecentChat.ts

@@ -1,5 +0,0 @@
-import Chat from "./Chat.ts"
-
-export default class RecentChat extends Chat {
-    declare content: string
-}

client/api/client_data/User.ts

@@ -1,6 +0,0 @@
-export default class User {
-    declare id: string
-    declare username?: string
-    declare nickname: string
-    declare avatar_file_hash?: string
-}

client/checkIsAndroidAndBuild.ts

@@ -1,36 +0,0 @@
-import process from 'node:process'
-import child_process from 'node:child_process'
-import fs from 'node:fs/promises'
-
-function spawn(exec: string, args: string[]) {
-    child_process.spawnSync(exec, args, {
-        stdio: [process.stdin, process.stdout, process.stderr]
-    })
-}
-
-function runBuild() {
-    const args = [
-        "run",
-        "-A",
-        "--node-modules-dir",
-    ]
-    let i = 0
-    for (const arg of process.argv) {
-        if (i > 1)
-            args.push(arg)
-        i++
-    }
-    
-    spawn('deno', args)
-}
-
-if (process.platform == 'android') {
-    try {
-        await fs.stat('./node_modules/.deno/rollup@4.50.1/node_modules/rollup/')
-    } catch (e) {
-        spawn('deno', ['install', '--node-modules-dir=auto'])
-    }
-    spawn('sh', ["fix-build-on-android.sh"])
-}
-
-runBuild()

client/data.ts

@@ -0,0 +1,71 @@
+import crypto from 'node:crypto'
+
+const dataIsEmpty = !localStorage.tws_data || localStorage.tws_data == ''
+
+class Aes {
+    static randomIv() {
+        return crypto.randomBytes(12)
+    }
+    static normalizeKey(key: string, keyLength = 32) {
+        const hash = crypto.createHash('sha256')
+        hash.update(key)
+        const keyBuffer = hash.digest()
+        return keyLength ? keyBuffer.subarray(0, keyLength) : keyBuffer
+    }
+    static encrypt(data: string, key: string) {
+        const iv = this.randomIv()
+        return Buffer.concat([iv, crypto.createCipheriv("aes-256-gcm", this.normalizeKey(key), iv).update(data)]).toString('hex')
+    }
+    static decrypt(data: string, key: string) {
+        const buffer = Buffer.from(data, 'hex')
+        const iv = buffer.subarray(0, 12)
+        return crypto.createDecipheriv("aes-256-gcm", this.normalizeKey(key), iv).update(buffer.subarray(12)).toString()
+    }
+}
+
+// 尽可能防止被窃取, 虽然理论上还是会被窃取
+const key = crypto.createHash('sha256').update(location.host + '_TWS_姐姐_' + navigator.userAgent).digest().toString('base64')
+
+if (dataIsEmpty) localStorage.tws_data = Aes.encrypt('{}', key)
+
+let _data_cached
+try {
+    _data_cached = JSON.parse(Aes.decrypt(localStorage.tws_data, key))
+} catch (e) {
+    console.warn("数据解密失败, 使用空数据...", e)
+    _data_cached = {}
+}
+
+type IData = {
+    refresh_token?: string
+    split_sizes: number[]
+    apply(): void
+    access_token?: string
+    device_id: string
+}
+
+declare global {
+    interface Window {
+        data?: IData
+    }
+}
+
+const data = new Proxy({} as IData, {
+    get(_obj, k) {
+        if (k == '_cached') return _data_cached
+        if (k == 'apply') return () => localStorage.tws_data = Aes.encrypt(JSON.stringify(_data_cached), key)
+        return _data_cached[k]
+    },
+    set(_obj, k, v) {
+        if (k == '_cached') return false
+        _data_cached[k] = v
+        return true
+    }
+})
+
+if (new URL(location.href).searchParams.get('export_data') == 'true') {
+    window.data = data
+    console.warn("警告: 将 data 暴露到 window 有可能会导致令牌泄露!")
+}
+
+export default data

client/deno.jsonc

@@ -1,40 +0,0 @@
-{
-  "tasks": {
-    "build": "deno run --allow-run --allow-env --allow-read checkIsAndroidAndBuild.ts npm:vite build",
-    "build-watch": "deno run --allow-run --allow-env --allow-read checkIsAndroidAndBuild.ts npm:vite --watch build"
-  },
-  "compilerOptions": {
-    "lib": ["ES2022", "DOM", "DOM.Iterable"],
-    "jsx": "react-jsx",
-    "jsxImportSource": "react",
-    "jsxImportSourceTypes": "@types/react"
-  },
-  "links": [
-    "./mdui_patched",
-  ],
-  "nodeModulesDir": "auto",
-  "imports": {
-    "@deno/vite-plugin": "npm:@deno/vite-plugin@1.0.5",
-    "@types/react": "npm:@types/react@18.3.1",
-    "@types/react-dom": "npm:@types/react-dom@18.3.1",
-    "@vitejs/plugin-react": "npm:@vitejs/plugin-react@4.7.0",
-    "lightningcss": "npm:lightningcss@^1.30.2",
-    "react": "npm:react@18.3.1",
-    "react-dom": "npm:react-dom@18.3.1",
-    "terser": "npm:terser@^5.44.1",
-    "vite": "npm:vite@7.0.6",
-    
-    "rollup": "npm:@rollup/wasm-node@4.48.0",
-
-    "chalk": "npm:chalk@5.4.1",
-
-    "mdui": "npm:mdui@2.1.4",
-    "split.js": "npm:split.js@1.3.2",
-    "crypto-js": "npm:crypto-js@4.2.0",
-    "socket.io-client": "npm:socket.io-client@4.8.1",
-    "marked": "npm:marked@16.3.0",
-    "dompurify": "npm:dompurify@3.2.7",
-    "pinch-zoom-element": "npm:pinch-zoom-element@1.1.1",
-    "react-json-view": "npm:react-json-view@1.21.3"
-  }
-}

client/env.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="mdui/jsx.zh-cn.d.ts" />
+/// <reference types="vite/client" />
+
+declare const __APP_VERSION__: string
+declare const __GIT_HASH__: string
+declare const __GIT_HASH_FULL__: string
+declare const __GIT_BRANCH__: string
+declare const __BUILD_TIME__: string

client/fix-build-on-android.sh

@@ -1,3 +0,0 @@
-rm -r ./node_modules/.deno/rollup@4.50.1/node_modules/rollup/
-cp -r ./node_modules/.deno/@rollup+wasm-node@4.48.0/node_modules/@rollup/wasm-node/ node_modules/.deno/rollup@4.50.1/node_modules/rollup/
-echo Replaced rollup with @rollup/wasm-node successfully

client/getClient.ts

@@ -0,0 +1,19 @@
+import { LingChairClient } from 'lingchair-client-protocol'
+import data from "./data.ts"
+import { UAParser } from 'ua-parser-js'
+import { randomUUID } from 'lingchair-internal-shared'
+import performAuth from './performAuth.ts'
+
+if (!data.device_id) {
+    const ua = new UAParser(navigator.userAgent)
+    data.device_id = `LingChair_Web_${ua.getOS() || 'unknown-os'}-${ua.getDevice().type || 'unknown_device'}-${randomUUID()}`
+}
+const client = new LingChairClient({
+    server_url: '',
+    device_id: data.device_id,
+    auto_fresh_token: true,
+})
+
+export default function getClient() {
+    return client
+}

client/getUrlForFileByHash.ts

@@ -1,3 +0,0 @@
-export default function getUrlForFileByHash(file_hash?: string, defaultUrl?: string) {
-    return file_hash ? "uploaded_files/" + file_hash: defaultUrl
-}

client/index.html

@@ -18,10 +18,7 @@
 <body>
     <div id="app"></div>
 
-    <script nomodule>
-        alert('很抱歉, 此应用无法在较旧的浏览器运行, 请使用基于 Chromium 89+ 的浏览器(内核)使用 :(')
-    </script>
-    <script type="module" src="./index.ts"></script>
+    <script type="module" src="./init.ts"></script>
 </body>
 
 </html>

client/init.ts

@@ -1,19 +1,30 @@
 import 'mdui/mdui.css'
 import 'mdui'
-import { $ } from "mdui/jq"
-import { breakpoint, Dialog } from "mdui"
+import { breakpoint } from "mdui"
+
+import './env.d.ts'
 
 import * as React from 'react'
 import ReactDOM from 'react-dom/client'
 
-import './ui/custom-elements/chat-image.ts'
-import './ui/custom-elements/chat-video.ts'
-import './ui/custom-elements/chat-file.ts'
+import './ui/chat-elements/chat-image.ts'
+import './ui/chat-elements/chat-video.ts'
+import './ui/chat-elements/chat-file.ts'
+import './ui/chat-elements/chat-text.ts'
+import './ui/chat-elements/chat-mention.ts'
+import './ui/chat-elements/chat-text-container.ts'
+import './ui/chat-elements/chat-quote.ts'
+import Main from "./ui/Main.tsx"
 
-import App from './ui/App.tsx'
-import AppMobile from './ui/AppMobile.tsx'
-import isMobileUI from "./ui/isMobileUI.ts"
-ReactDOM.createRoot(document.getElementById('app') as HTMLElement).render(React.createElement(isMobileUI() ? AppMobile : App, null))
+import performAuth from './performAuth.ts'
+
+try {
+    await performAuth({})
+} catch (e) {
+    console.log("验证失败", e)
+}
+
+ReactDOM.createRoot(document.getElementById('app') as HTMLElement).render(React.createElement(Main))
 
 const onResize = () => {
     document.body.style.setProperty('--whitesilk-widget-message-maxwidth', breakpoint().down('md') ? "80%" : "70%")
@@ -26,13 +37,5 @@ const onResize = () => {
 window.addEventListener('resize', onResize)
 onResize()
 
-// @ts-ignore 工作正常, 这里是获取为 URL 以便于构建
-import sw from './sw.ts?worker&url'
-
-if ("serviceWorker" in navigator)
-    try {
-        navigator.serviceWorker
-            .register(sw as URL)
-    } catch (e) {
-        console.error(e)
-    }
+const config = await fetch('config.json').then((re) => re.json())
+config.title && (document.title = config.title)

client/package.json

@@ -0,0 +1,32 @@
+{
+    "name": "lingchair-client",
+    "type": "module",
+    "version": "0.1.0-alpha",
+    "scripts": {
+        "build": "npx vite build",
+        "build-watch": "npx vite --watch build"
+    },
+    "dependencies": {
+        "dompurify": "3.2.7",
+        "lingchair-internal-shared": "*",
+        "marked": "16.3.0",
+        "mdui": "2.1.4",
+        "pinch-zoom-element": "1.1.1",
+        "react": "18.3.1",
+        "react-dom": "18.3.1",
+        "react-router": "7.10.1",
+        "socket.io-client": "4.8.1",
+        "split.js": "1.3.2",
+        "ua-parser-js": "2.0.6",
+        "use-context-selector": "2.0.0"
+    },
+    "devDependencies": {
+        "@rollup/wasm-node": "4.48.0",
+        "@types/react": "18.3.1",
+        "@types/react-dom": "18.3.1",
+        "@vitejs/plugin-react": "4.7.0",
+        "chalk": "5.4.1",
+        "vite": "7.2.6",
+        "vite-plugin-node-polyfills": "^0.24.0"
+    }
+}

client/performAuth.ts

@@ -0,0 +1,31 @@
+import data from "./data.ts"
+import getClient from "./getClient.ts"
+
+/** 
+ * 进行身份验证以接受客户端事件
+ * 
+ * 使用验证方式优先级: 访问 > 刷新 > 账号密码
+ * 
+ * 若传递了账号密码, 则同时缓存新的访问令牌和刷新令牌
+ * 
+ * 如只传递两个令牌的其一, 按照优先级并在成功验证后赋值
+ * 
+ * 多个验证方式不会逐一尝试
+ */
+export default async function performAuth(args: {
+    refresh_token?: string
+    account?: string
+    password?: string
+}) {
+    if (args.account && args.password)
+        await getClient().authOrThrow({
+            account: args.account,
+            password: args.password,
+        })
+    else {
+        await getClient().authOrThrow({ refresh_token: args.refresh_token ? args.refresh_token : data.refresh_token, ignore_all_empty: true })
+    }
+    data.refresh_token = getClient().getCachedRefreshToken()
+    data.access_token = getClient().getCachedAccessToken()
+    data.apply()
+}

client/style.css

@@ -67,3 +67,7 @@ html {
 .gutter.gutter-horizontal {
   cursor: col-resize;
 }
+
+a {
+  color: rgb(var(--mdui-color-primary));
+}

client/sw.ts

@@ -1,30 +0,0 @@
-interface FetchEvent extends Event {
-    waitUntil: (p: Promise<unknown | void>) => void
-    request: Request
-    respondWith: (r: Response | Promise<Response>) => void
-}
-
-// 上传文件的代理与缓存
-self.addEventListener("fetch", (e) => {
-    const event = e as FetchEvent
-    if (event.request.method != "GET" || event.request.url.indexOf("/uploaded_files/") == -1) return
-
-    event.respondWith(
-        (async () => {
-            const cache = await caches.open("LingChair-UploadedFile-Cache")
-            const cachedResponse = await cache.match(event.request)
-            if (cachedResponse) {
-                event.waitUntil(cache.add(event.request))
-                return cachedResponse
-            }
-            return fetch({
-                ...event.request,
-                headers: {
-                    ...event.request.headers,
-                    // 目前还不能获取 token
-                    // localsotrage 在这里不可用
-                }
-            })
-        })()
-    )
-})

client/test.html

@@ -1,40 +0,0 @@
-<!doctype html>
-<html lang="zh-CN" class="mdui-theme-auto">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" />
-    <meta name="renderer" content="webkit" />
-
-    <link rel="stylesheet" href="https://unpkg.com/mdui@2/mdui.css">
-    <script src="https://unpkg.com/mdui@2/mdui.global.js"></script>
-
-    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
-    <script src="https://cdn.socket.io/4.8.1/socket.io.min.js"></script>
-
-    <title>TheWhiteSilk Debugger</title>
-</head>
-
-<body>
-    <mdui-button id="send">Send</mdui-button>
-    <mdui-text-field id="edittext" autosize></mdui-text-field>
-    <div id="out">
-
-    </div>
-    <script>
-        const socket = io()
-        $('#edittext').val(`{
-    "method": "",
-    "args": {
-
-    }
-}`)
-        $('#send').click(() => {
-            socket.emit("the_white_silk", JSON.parse($('#edittext').val()), (response) => {
-                $('#out').text(JSON.stringify(response))
-            });
-        })
-    </script>
-</body>
-
-</html>

client/tsconfig.json

@@ -0,0 +1,18 @@
+{
+    "compilerOptions": {
+        "target": "ES2022",
+        "lib": [
+            "ES2022",
+            "DOM",
+            "DOM.Iterable"
+        ],
+        "jsx": "react-jsx",
+        "module": "ESNext",
+        "moduleResolution": "Bundler",
+        "allowImportingTsExtensions": true,
+        "esModuleInterop": true,
+        "strict": true,
+        "skipLibCheck": true,
+        "noEmit": true
+    }
+}

client/ui/App.tsx

@@ -1,256 +0,0 @@
-import Client from "../api/Client.ts"
-import data from "../Data.ts"
-import ChatFragment from "./chat/ChatFragment.tsx"
-import useEventListener from './useEventListener.ts'
-import User from "../api/client_data/User.ts"
-import RecentChat from "../api/client_data/RecentChat.ts"
-import Avatar from "./Avatar.tsx"
-
-import * as React from 'react'
-import { Dialog, NavigationRail, TextField } from "mdui"
-import Split from 'split.js'
-import 'mdui/jsx.zh-cn.d.ts'
-import { checkApiSuccessOrSncakbar } from "./snackbar.ts"
-
-import RegisterDialog from "./dialog/RegisterDialog.tsx"
-import LoginDialog from "./dialog/LoginDialog.tsx"
-import MyProfileDialog from "./dialog/MyProfileDialog.tsx"
-import ContactsList from "./main/ContactsList.tsx"
-import RecentsList from "./main/RecentsList.tsx"
-import useAsyncEffect from "./useAsyncEffect.ts"
-import ChatInfoDialog from "./dialog/ChatInfoDialog.tsx"
-import Chat from "../api/client_data/Chat.ts"
-import AddContactDialog from './dialog/AddContactDialog.tsx'
-import CreateGroupDialog from './dialog/CreateGroupDialog.tsx'
-import UserProfileDialog from "./dialog/UserProfileDialog.tsx"
-import DataCaches from "../api/DataCaches.ts"
-import getUrlForFileByHash from "../getUrlForFileByHash.ts"
-import Message from "../api/client_data/Message.ts"
-import EventBus from "../EventBus.ts"
-
-declare global {
-    namespace React {
-        namespace JSX {
-            interface IntrinsicAttributes {
-                id?: string
-                slot?: string
-            }
-        }
-    }
-}
-
-export default function App() {
-    const [navigationItemSelected, setNavigationItemSelected] = React.useState('Recents')
-
-    const navigationRailRef = React.useRef<NavigationRail>(null)
-    useEventListener(navigationRailRef, 'change', (event) => {
-        setNavigationItemSelected((event.target as HTMLElement as NavigationRail).value as string)
-    })
-
-    const loginDialogRef = React.useRef<Dialog>(null)
-    const loginInputAccountRef = React.useRef<TextField>(null)
-    const loginInputPasswordRef = React.useRef<TextField>(null)
-
-    const registerDialogRef = React.useRef<Dialog>(null)
-    const registerInputUserNameRef = React.useRef<TextField>(null)
-    const registerInputNickNameRef = React.useRef<TextField>(null)
-    const registerInputPasswordRef = React.useRef<TextField>(null)
-
-    const myProfileDialogRef = React.useRef<Dialog>(null)
-    const openMyProfileDialogButtonRef = React.useRef<HTMLElement>(null)
-    useEventListener(openMyProfileDialogButtonRef, 'click', (_event) => {
-        myProfileDialogRef.current!.open = true
-    })
-
-    const userProfileDialogRef = React.useRef<Dialog>(null)
-    const [userInfo, setUserInfo] = React.useState(null as unknown as User)
-
-    const addContactDialogRef = React.useRef<Dialog>(null)
-    const createGroupDialogRef = React.useRef<Dialog>(null)
-
-    const chatInfoDialogRef = React.useRef<Dialog>(null)
-    const [chatInfo, setChatInfo] = React.useState(null as unknown as Chat)
-
-    const [myUserProfileCache, setMyUserProfileCache] = React.useState(null as unknown as User)
-
-    const [isShowChatFragment, setIsShowChatFragment] = React.useState(false)
-
-    const [currentChatId, setCurrentChatId] = React.useState('')
-
-    const [sharedFavouriteChats, setSharedFavouriteChats] = React.useState<Chat[]>([])
-
-    useAsyncEffect(async () => {
-        const split = Split(['#SideBar', '#ChatFragment'], {
-            sizes: data.split_sizes ? data.split_sizes : [25, 75],
-            minSize: [200, 400],
-            gutterSize: 2,
-            onDragEnd: function () {
-                data.split_sizes = split.getSizes()
-                data.apply()
-            }
-        })
-
-        Client.connect()
-        const re = await Client.auth(data.access_token || "")
-        if (re.code == 401)
-            loginDialogRef.current!.open = true
-        else if (re.code != 200) {
-            if (checkApiSuccessOrSncakbar(re, "验证失败")) return
-        } else if (re.code == 200) {
-            setMyUserProfileCache(Client.myUserProfile as User)
-        }
-    })
-
-    function openChatInfoDialog(chat: Chat) {
-        setChatInfo(chat)
-        chatInfoDialogRef.current!.open = true
-    }
-
-    function openChatFragment(chatId: string) {
-        setCurrentChatId(chatId)
-        setIsShowChatFragment(true)
-    }
-
-    async function openUserInfoDialog(user: User | string) {
-        if (user instanceof User) {
-            setUserInfo(user)
-        } else {
-            setUserInfo(await DataCaches.getUserProfile(user))
-
-        }
-        userProfileDialogRef.current!.open = true
-    }
-
-    if ('Notification' in window) {
-        Notification.requestPermission()
-        React.useEffect(() => {
-            interface OnMessageData {
-                chat: string
-                msg: Message
-            }
-            async function onMessage(_event: unknown) {
-                EventBus.emit('RecentsList.updateRecents')
-
-                const event = _event as OnMessageData
-                if (currentChatId != event.chat) {
-                    const chat = await DataCaches.getChatInfo(event.chat)
-                    const user = await DataCaches.getUserProfile(event.msg.user_id)
-                    const notification = new Notification(`${user.nickname} (对话: ${chat.title})`, {
-                        icon: getUrlForFileByHash(chat.avatar_file_hash),
-                        body: event.msg.text,
-                    })
-                    notification.addEventListener('click', () => {
-                        setCurrentChatId(chat.id)
-                        setIsShowChatFragment(true)
-                        notification.close()
-                    })
-                }
-            }
-            Client.on('Client.onMessage', onMessage)
-            return () => {
-                Client.off('Client.onMessage', onMessage)
-            }
-        }, [currentChatId])
-    }
-
-    return (
-        <div style={{
-            display: "flex",
-            position: 'relative',
-            width: 'calc(var(--whitesilk-window-width) - 80px)',
-            height: 'var(--whitesilk-window-height)',
-        }}>
-            <LoginDialog
-                loginDialogRef={loginDialogRef}
-                loginInputAccountRef={loginInputAccountRef}
-                loginInputPasswordRef={loginInputPasswordRef}
-                registerDialogRef={registerDialogRef} />
-
-            <RegisterDialog
-                registerDialogRef={registerDialogRef}
-                registerInputUserNameRef={registerInputUserNameRef}
-                registerInputNickNameRef={registerInputNickNameRef}
-                registerInputPasswordRef={registerInputPasswordRef}
-                loginInputAccountRef={loginInputAccountRef}
-                loginInputPasswordRef={loginInputPasswordRef} />
-
-            <ChatInfoDialog
-                chatInfoDialogRef={chatInfoDialogRef as any}
-                openChatFragment={openChatFragment}
-                openUserInfoDialog={openUserInfoDialog}
-                sharedFavouriteChats={sharedFavouriteChats}
-                chat={chatInfo} />
-
-            <MyProfileDialog
-                myProfileDialogRef={myProfileDialogRef as any}
-                user={myUserProfileCache} />
-            <UserProfileDialog
-                chatInfoDialogRef={chatInfoDialogRef as any}
-                userProfileDialogRef={userProfileDialogRef as any}
-                openChatFragment={openChatFragment}
-                user={userInfo} />
-
-            <AddContactDialog
-                addContactDialogRef={addContactDialogRef} />
-
-            <CreateGroupDialog
-                createGroupDialogRef={createGroupDialogRef} />
-
-            <mdui-navigation-rail contained value="Recents" ref={navigationRailRef}>
-                <mdui-button-icon slot="top">
-                    <Avatar src={getUrlForFileByHash(myUserProfileCache?.avatar_file_hash)} text={myUserProfileCache?.nickname} avatarRef={openMyProfileDialogButtonRef} />
-                </mdui-button-icon>
-
-                <mdui-navigation-rail-item icon="watch_later--outlined" active-icon="watch_later--filled" value="Recents"></mdui-navigation-rail-item>
-                <mdui-navigation-rail-item icon="chat--outlined" active-icon="chat--filled" value="Contacts"></mdui-navigation-rail-item>
-
-                <mdui-button-icon icon="settings" slot="bottom"></mdui-button-icon>
-            </mdui-navigation-rail>
-            {
-                // 侧边列表
-            }
-            <div id="SideBar">
-                {
-                    // 最近聊天
-                    <RecentsList
-                        openChatFragment={openChatFragment}
-                        display={navigationItemSelected == "Recents"}
-                        currentChatId={currentChatId} />
-                }
-                {
-                    // 對話列表
-                    <ContactsList
-                        openChatInfoDialog={openChatInfoDialog}
-                        setSharedFavouriteChats={setSharedFavouriteChats}
-                        addContactDialogRef={addContactDialogRef as any}
-                        createGroupDialogRef={createGroupDialogRef as any}
-                        display={navigationItemSelected == "Contacts"} />
-                }
-            </div>
-            {
-                // 聊天页面
-            }
-            <div id="ChatFragment" style={{
-                display: "flex",
-                width: '100%'
-            }}>
-                {
-                    !isShowChatFragment && <div style={{
-                        width: '100%',
-                        textAlign: 'center',
-                        alignSelf: 'center',
-                    }}>
-                        选择以开始对话......
-                    </div>
-                }
-                {
-                    isShowChatFragment && <ChatFragment
-                        target={currentChatId}
-                        openUserInfoDialog={openUserInfoDialog}
-                        openChatInfoDialog={openChatInfoDialog}
-                        key={currentChatId} />
-                }
-            </div>
-        </div>
-    )
-}

client/ui/AppMobile.tsx

@@ -1,247 +0,0 @@
-import Client from "../api/Client.ts"
-import data from "../Data.ts"
-import ChatFragment from "./chat/ChatFragment.tsx"
-import useEventListener from './useEventListener.ts'
-import User from "../api/client_data/User.ts"
-import RecentChat from "../api/client_data/RecentChat.ts"
-import Avatar from "./Avatar.tsx"
-
-import * as React from 'react'
-import { Dialog, NavigationBar, TextField } from "mdui"
-import 'mdui/jsx.zh-cn.d.ts'
-import { checkApiSuccessOrSncakbar } from "./snackbar.ts"
-
-import RegisterDialog from "./dialog/RegisterDialog.tsx"
-import LoginDialog from "./dialog/LoginDialog.tsx"
-import MyProfileDialog from "./dialog/MyProfileDialog.tsx"
-import ContactsList from "./main/ContactsList.tsx"
-import RecentsList from "./main/RecentsList.tsx"
-import useAsyncEffect from "./useAsyncEffect.ts"
-import ChatInfoDialog from "./dialog/ChatInfoDialog.tsx"
-import Chat from "../api/client_data/Chat.ts"
-import AddContactDialog from './dialog/AddContactDialog.tsx'
-import CreateGroupDialog from './dialog/CreateGroupDialog.tsx'
-import UserProfileDialog from "./dialog/UserProfileDialog.tsx"
-import DataCaches from "../api/DataCaches.ts"
-import getUrlForFileByHash from "../getUrlForFileByHash.ts"
-
-declare global {
-    namespace React {
-        namespace JSX {
-            interface IntrinsicAttributes {
-                id?: string
-                slot?: string
-            }
-        }
-    }
-}
-
-export default function AppMobile() {
-    const [navigationItemSelected, setNavigationItemSelected] = React.useState('Recents')
-
-    const navigationBarRef = React.useRef<NavigationBar>(null)
-    useEventListener(navigationBarRef, 'change', (event) => {
-        setNavigationItemSelected((event.target as HTMLElement as NavigationBar).value as string)
-    })
-
-    const loginDialogRef = React.useRef<Dialog>(null)
-    const loginInputAccountRef = React.useRef<TextField>(null)
-    const loginInputPasswordRef = React.useRef<TextField>(null)
-
-    const registerDialogRef = React.useRef<Dialog>(null)
-    const registerInputUserNameRef = React.useRef<TextField>(null)
-    const registerInputNickNameRef = React.useRef<TextField>(null)
-    const registerInputPasswordRef = React.useRef<TextField>(null)
-
-    const myProfileDialogRef = React.useRef<Dialog>(null)
-    const openMyProfileDialogButtonRef = React.useRef<HTMLElement>(null)
-    useEventListener(openMyProfileDialogButtonRef, 'click', (_event) => {
-        myProfileDialogRef.current!.open = true
-    })
-
-    const addContactDialogRef = React.useRef<Dialog>(null)
-    const createGroupDialogRef = React.useRef<Dialog>(null)
-
-    const chatInfoDialogRef = React.useRef<Dialog>(null)
-    const [chatInfo, setChatInfo] = React.useState(null as unknown as Chat)
-
-    const userProfileDialogRef = React.useRef<Dialog>(null)
-    const [userInfo, setUserInfo] = React.useState(null as unknown as User)
-
-    const [myUserProfileCache, setMyUserProfileCache] = React.useState(null as unknown as User)
-
-    const [isShowChatFragment, setIsShowChatFragment] = React.useState(false)
-
-    const [currentChatId, setCurrentChatId] = React.useState('')
-
-    const [sharedFavouriteChats, setSharedFavouriteChats] = React.useState<Chat[]>([])
-
-    const chatFragmentDialogRef = React.useRef<Dialog>(null)
-    React.useEffect(() => {
-        const shadow = chatFragmentDialogRef.current!.shadowRoot as ShadowRoot
-        const panel = shadow.querySelector(".panel") as HTMLElement
-        panel.style.padding = '0'
-        panel.style.color = 'inherit'
-        panel.style.backgroundColor = 'rgb(var(--mdui-color-background))'
-        panel.style.setProperty('--mdui-color-background', 'inherit')
-        const body = shadow.querySelector(".body") as HTMLElement
-        body.style.height = '100%'
-        body.style.display = 'flex'
-    })
-
-    useAsyncEffect(async () => {
-        Client.connect()
-        const re = await Client.auth(data.access_token || "")
-        if (re.code == 401)
-            loginDialogRef.current!.open = true
-        else if (re.code != 200) {
-            if (checkApiSuccessOrSncakbar(re, "验证失败")) return
-        } else if (re.code == 200) {
-            setMyUserProfileCache(Client.myUserProfile as User)
-        }
-    })
-
-    function openChatInfoDialog(chat: Chat) {
-        setChatInfo(chat)
-        chatInfoDialogRef.current!.open = true
-    }
-
-    function openChatFragment(chatId: string) {
-        setCurrentChatId(chatId)
-        setIsShowChatFragment(true)
-    }
-
-    async function openUserInfoDialog(user: User | string) {
-        if (user instanceof User) {
-            setUserInfo(user)
-        } else {
-            setUserInfo(await DataCaches.getUserProfile(user))
-
-        }
-        userProfileDialogRef.current!.open = true
-    }
-
-    return (
-        <div style={{
-            display: "flex",
-            position: 'relative',
-            flexDirection: 'column',
-            width: 'var(--whitesilk-window-width)',
-            height: 'var(--whitesilk-window-height)',
-        }}>
-            <mdui-dialog fullscreen open={isShowChatFragment} ref={chatFragmentDialogRef}>
-                {
-                    // 聊天页面
-                }
-                <div id="ChatFragment" style={{
-                    width: '100%',
-                    height: '100%',
-                }}>
-                    <ChatFragment
-                        showReturnButton={true}
-                        openUserInfoDialog={openUserInfoDialog}
-                        onReturnButtonClicked={() => setIsShowChatFragment(false)}
-                        key={currentChatId}
-                        openChatInfoDialog={openChatInfoDialog}
-                        target={currentChatId} />
-                </div>
-            </mdui-dialog>
-
-            <LoginDialog
-                loginDialogRef={loginDialogRef}
-                loginInputAccountRef={loginInputAccountRef}
-                loginInputPasswordRef={loginInputPasswordRef}
-                registerDialogRef={registerDialogRef} />
-
-            <RegisterDialog
-                registerDialogRef={registerDialogRef}
-                registerInputUserNameRef={registerInputUserNameRef}
-                registerInputNickNameRef={registerInputNickNameRef}
-                registerInputPasswordRef={registerInputPasswordRef}
-                loginInputAccountRef={loginInputAccountRef}
-                loginInputPasswordRef={loginInputPasswordRef} />
-
-            <ChatInfoDialog
-                chatInfoDialogRef={chatInfoDialogRef as any}
-                openUserInfoDialog={openUserInfoDialog}
-                sharedFavouriteChats={sharedFavouriteChats}
-                openChatFragment={(id) => {
-                    setCurrentChatId(id)
-                    setIsShowChatFragment(true)
-                }}
-                chat={chatInfo} />
-
-            <MyProfileDialog
-                myProfileDialogRef={myProfileDialogRef as any}
-                user={myUserProfileCache} />
-            <UserProfileDialog
-                chatInfoDialogRef={chatInfoDialogRef as any}
-                userProfileDialogRef={userProfileDialogRef as any}
-                openChatFragment={openChatFragment}
-                user={userInfo} />
-
-            <AddContactDialog
-                addContactDialogRef={addContactDialogRef} />
-                
-            <CreateGroupDialog
-                createGroupDialogRef={createGroupDialogRef} />
-
-            <mdui-top-app-bar style={{
-                position: 'sticky',
-                marginTop: '3px',
-                marginRight: '6px',
-                marginLeft: '15px',
-                top: '0px',
-            }}>
-                <mdui-top-app-bar-title>{
-                    ({
-                        Recents: "最近对话",
-                        Contacts: "所有对话"
-                    })[navigationItemSelected]
-                }</mdui-top-app-bar-title>
-                <div style={{
-                    flexGrow: 1,
-                }}></div>
-                <mdui-button-icon icon="settings"></mdui-button-icon>
-                <mdui-button-icon>
-                    <Avatar src={getUrlForFileByHash(myUserProfileCache?.avatar_file_hash)} text={myUserProfileCache?.nickname} avatarRef={openMyProfileDialogButtonRef} />
-                </mdui-button-icon>
-            </mdui-top-app-bar>
-            {
-                // 侧边列表
-            }
-            <div style={{
-                display: 'flex',
-                height: 'calc(100% - 80px - 67px)',
-                width: '100%',
-            }} id="SideBar">
-                {
-                    // 最近聊天
-                    <RecentsList
-                        openChatFragment={(id) => {
-                            setCurrentChatId(id)
-                            setIsShowChatFragment(true)
-                        }}
-                        display={navigationItemSelected == "Recents"}
-                        currentChatId={currentChatId} />
-                }
-                {
-                    // 對話列表
-                    <ContactsList
-                        openChatInfoDialog={openChatInfoDialog}
-                        setSharedFavouriteChats={setSharedFavouriteChats}
-                        addContactDialogRef={addContactDialogRef as any}
-                        createGroupDialogRef={createGroupDialogRef as any}
-                        display={navigationItemSelected == "Contacts"} />
-                }
-            </div>
-            <mdui-navigation-bar label-visibility="selected" value="Recents" ref={navigationBarRef} style={{
-                position: 'sticky',
-                bottom: '0',
-            }}>
-                <mdui-navigation-bar-item icon="watch_later--outlined" active-icon="watch_later--filled" value="Recents">最近对话</mdui-navigation-bar-item>
-                <mdui-navigation-bar-item icon="chat--outlined" active-icon="chat--filled" value="Contacts">所有对话</mdui-navigation-bar-item>
-            </mdui-navigation-bar>
-        </div>
-    )
-}

client/ui/Avatar.tsx

@@ -12,9 +12,9 @@ export default function Avatar({
     avatarRef,
     ...props
 }: Args) {
-    if (src != null)
+    if (src != null && src != '')
         return <mdui-avatar ref={avatarRef} {...props} src={src} />
-    else if (text != null)
+    else if (text != null && text != '')
         return <mdui-avatar ref={avatarRef} {...props}>
             {
                 text.substring(0, 1)

client/ui/AvatarMySelf.tsx

@@ -0,0 +1,34 @@
+import { UserMySelf } from "lingchair-client-protocol"
+import useAsyncEffect from "../utils/useAsyncEffect.ts"
+import Avatar from "./Avatar.tsx"
+import getClient from "../getClient.ts"
+import React from "react"
+import sleep from "../utils/sleep.ts"
+
+interface Args extends React.HTMLAttributes<HTMLElement> {
+    avatarRef?: React.LegacyRef<HTMLElement>
+}
+export default function AvatarMySelf({
+    avatarRef,
+    ...props
+}: Args) {
+    if (!avatarRef) avatarRef = React.useRef<HTMLElement>(null)
+    const [args, setArgs] = React.useState<{
+        text: string,
+        src: string,
+    }>({
+        text: '',
+        src: '',
+    })
+
+    useAsyncEffect(async () => {
+        await sleep(200)
+        const mySelf = await UserMySelf.getMySelfOrThrow(getClient())
+        setArgs({
+            text: mySelf.getNickName(),
+            src: getClient().getUrlForFileByHash(mySelf.getAvatarFileHash(), '')!
+        })
+    })
+
+    return <Avatar avatarRef={avatarRef} {...props} text={args.text} src={args.src}></Avatar>
+}

client/ui/ImageViewer.tsx

@@ -0,0 +1,19 @@
+import { Dialog } from 'mdui'
+import 'pinch-zoom-element'
+import React from "react"
+
+export default function ImageViewer() {
+    const dialogRef = React.useRef<Dialog>()
+    
+    return <mdui-dialog ref={dialogRef} fullscreen="fullscreen">
+        <mdui-button-icon icon="open_in_new"
+            onclick="window.open(document.querySelector('#image-viewer-dialog-inner > *').src, '_blank')">
+        </mdui-button-icon>
+        <mdui-button-icon icon="close" onClick={() => dialogRef.current!.open = false}>
+        </mdui-button-icon>
+        {
+            // @ts-ignore 注册了这个元素
+            <pinch-zoom id="image-viewer-dialog-inner" style="width: var(--whitesilk-window-width); height: var(--whitesilk-window-height);"></pinch-zoom>
+        }
+    </mdui-dialog>
+}

client/ui/Main.tsx

@@ -0,0 +1,231 @@
+import isMobileUI from "../utils/isMobileUI.ts"
+import useEventListener from "../utils/useEventListener.ts"
+import AvatarMySelf from "./AvatarMySelf.tsx"
+import MainSharedContext from './MainSharedContext.ts'
+import * as React from 'react'
+import { BrowserRouter, Link, Outlet, Route, Routes } from "react-router"
+import LoginDialog from "./main-page/LoginDialog.tsx"
+import useAsyncEffect from "../utils/useAsyncEffect.ts"
+import performAuth from "../performAuth.ts"
+import { CallbackError, Chat, UserMySelf } from "lingchair-client-protocol"
+import showCircleProgressDialog from "./showCircleProgressDialog.ts"
+import RegisterDialog from "./main-page/RegisterDialog.tsx"
+import sleep from "../utils/sleep.ts"
+import { $, NavigationDrawer } from "mdui"
+import getClient from "../getClient.ts"
+import showSnackbar from "../utils/showSnackbar.ts"
+import AllChatsList from "./main-page/AllChatsList.tsx"
+import FavouriteChatsList from "./main-page/FavouriteChatsList.tsx"
+import AddFavourtieChatDialog from "./main-page/AddFavourtieChatDialog.tsx"
+import RecentChatsList from "./main-page/RecentChatsList.tsx"
+import ChatInfoDialog from "./routers/ChatInfoDialog.tsx"
+
+export default function Main() {
+    const [myProfileCache, setMyProfileCache] = React.useState<UserMySelf>()
+
+    // 多页面切换
+    const navigationRef = React.useRef<HTMLElement>()
+    const [currentShowPage, setCurrentShowPage] = React.useState('Recents')
+    type HTMLElementWithValue = HTMLElement & { value: string }
+    useEventListener(navigationRef, 'change', (event) => {
+        setCurrentShowPage((event.target as HTMLElementWithValue).value)
+    })
+
+    const drawerRef = React.useRef<NavigationDrawer>()
+    React.useEffect(() => {
+        $(drawerRef.current!.shadowRoot).append(`
+            <style>
+                .panel {
+                    width: 17.5rem !important;
+                    display: flex !important;
+                    flex-direction: column;
+                }
+            </style>
+        `)
+    }, [])
+
+    const [showLoginDialog, setShowLoginDialog] = React.useState(false)
+    const [showRegisterDialog, setShowRegisterDialog] = React.useState(false)
+    const [showAddFavourtieChatDialog, setShowAddFavourtieChatDialog] = React.useState(false)
+
+    const [currentSelectedChatId, setCurrentSelectedChatId] = React.useState('')
+
+    const [favouriteChats, setFavouriteChats] = React.useState<Chat[]>([])
+
+    const sharedContext = {
+        functions_lazy: React.useRef({
+            updateFavouriteChats: () => { },
+            updateRecentChats: () => { },
+            updateAllChats: () => { },
+        }),
+        favouriteChats,
+        setFavouriteChats,
+
+        setShowLoginDialog,
+        setShowRegisterDialog,
+        setShowAddFavourtieChatDialog,
+
+        currentSelectedChatId,
+        setCurrentSelectedChatId,
+
+        myProfileCache,
+
+    }
+
+    useAsyncEffect(async () => {
+        const waitingForAuth = showCircleProgressDialog("加载中...")
+        try {
+            await performAuth({})
+
+            try {
+                setMyProfileCache(await UserMySelf.getMySelfOrThrow(getClient()))
+            } catch (e) {
+                if (e instanceof CallbackError)
+                    showSnackbar({
+                        message: '获取资料失败: ' + e.message
+                    })
+            }
+        } catch (e) {
+            if (e instanceof CallbackError)
+                if (e.code == 401 || e.code == 400)
+                    setShowLoginDialog(true)
+        }
+        // 动画都没来得及, 稍微等一下 (
+        await sleep(100)
+        waitingForAuth.open = false
+    })
+
+    const subRoutes = <>
+        <Route path="/info">
+            <Route path="chat" element={<ChatInfoDialog />} />
+            <Route path="user" element={<ChatInfoDialog />} />
+        </Route>
+    </>
+
+    return (
+        <MainSharedContext.Provider value={sharedContext}>
+            <BrowserRouter>
+                <Routes>
+                    <Route path="/" element={(
+                        <div style={{
+                            display: "flex",
+                            position: 'relative',
+                            flexDirection: isMobileUI() ? 'column' : 'row',
+                            width: `calc(var(--whitesilk-window-width))${isMobileUI() ? '' : ' - 80px'}`,
+                            height: 'var(--whitesilk-window-height)',
+                        }}>
+                            {
+                                // 将子路由渲染到此处
+                                <Outlet />
+                            }
+                            <LoginDialog open={showLoginDialog} />
+                            <RegisterDialog open={showRegisterDialog} />
+                            <AddFavourtieChatDialog open={showAddFavourtieChatDialog} />
+                            <mdui-navigation-drawer ref={drawerRef} modal close-on-esc close-on-overlay-click>
+                                <mdui-list style={{
+                                    padding: '10px',
+                                }}>
+                                    <mdui-list-item rounded>
+                                        <span>{myProfileCache?.getNickName()}</span>
+                                        <AvatarMySelf slot="icon" />
+                                    </mdui-list-item>
+                                    <mdui-list-item rounded icon="manage_accounts">账号设置</mdui-list-item>
+                                    <mdui-divider style={{
+                                        margin: '10px',
+                                    }}></mdui-divider>
+                                    <mdui-list-item rounded icon="person_add">添加收藏对话</mdui-list-item>
+                                    <mdui-list-item rounded icon="group_add">创建新的群组</mdui-list-item>
+                                    <Link to="/info/user?id=0960bd15-4527-4000-97a8-73110160296f"><mdui-list-item rounded icon="group_add">我是测试</mdui-list-item></Link>
+                                    <Link to="/info/chat?id=priv_0960bd15_4527_4000_97a8_73110160296f__0960bd15_4527_4000_97a8_73110160296f"><mdui-list-item rounded icon="group_add">我是测试2</mdui-list-item></Link>
+                                </mdui-list>
+                                <div style={{
+                                    flexGrow: 1,
+                                }}></div>
+                                <span style={{
+                                    padding: '10px',
+                                    fontSize: 'small',
+                                }}>
+                                    LingChair Web v{__APP_VERSION__}<br />
+                                    Build: <a href={`https://codeberg.org/CrescentLeaf/LingChair/src/commit/${__GIT_HASH_FULL__}`}>{__GIT_HASH__}</a> ({__BUILD_TIME__})<br />
+                                    在 Codeberg 上<a href="https://codeberg.org/CrescentLeaf/LingChair">查看源代码</a>
+                                </span>
+                            </mdui-navigation-drawer>
+                            {
+                                /**
+                                 * Default: 侧边列表提供列表切换
+                                 */
+                                !isMobileUI() ?
+                                    <mdui-navigation-rail ref={navigationRef} contained value="Recents">
+                                        <mdui-button-icon slot="top" icon="menu" onClick={() => drawerRef.current!.open = true}></mdui-button-icon>
+
+                                        <mdui-navigation-rail-item icon="watch_later--outlined" active-icon="watch_later--filled" value="Recents"></mdui-navigation-rail-item>
+                                        <mdui-navigation-rail-item icon="favorite_border" active-icon="favorite" value="Favourites"></mdui-navigation-rail-item>
+                                        <mdui-navigation-rail-item icon="chat--outlined" active-icon="chat--filled" value="AllChats"></mdui-navigation-rail-item>
+                                    </mdui-navigation-rail>
+                                    /**
+                                     * Mobile: 底部导航栏提供列表切换
+                                     */
+                                    : <mdui-top-app-bar style={{
+                                        position: 'sticky',
+                                        marginTop: '3px',
+                                        marginRight: '6px',
+                                        marginLeft: '15px',
+                                        top: '0px',
+                                    }}>
+                                        <mdui-button-icon icon="menu" onClick={() => drawerRef.current!.open = true}></mdui-button-icon>
+                                        <mdui-top-app-bar-title>{
+                                            ({
+                                                Recents: "最近对话",
+                                                Favourites: "收藏对话",
+                                                AllChats: "所有对话",
+                                            })[currentShowPage]
+                                        }</mdui-top-app-bar-title>
+                                        <div style={{
+                                            flexGrow: 1,
+                                        }}></div>
+                                    </mdui-top-app-bar>
+                            }
+                            {
+                                /**
+                                 * Mobile: 指定高度的容器
+                                 * Default: 侧边列表
+                                 */
+                                <div style={isMobileUI() ? {
+                                    display: 'flex',
+                                    height: 'calc(100% - 80px - 67px)',
+                                    width: '100%',
+                                } : {}} id="SideBar">
+                                    <RecentChatsList style={{
+                                        display: currentShowPage == 'Recents' ? undefined : 'none'
+                                    }} />
+                                    <FavouriteChatsList style={{
+                                        display: currentShowPage == 'Favourites' ? undefined : 'none'
+                                    }} />
+                                    <AllChatsList style={{
+                                        display: currentShowPage == 'AllChats' ? undefined : 'none'
+                                    }} />
+                                </div>
+                            }
+                            {
+                                /**
+                                 * Mobile: 底部导航栏提供列表切换
+                                 * Default: 侧边列表提供列表切换
+                                 */
+                                isMobileUI() && <mdui-navigation-bar ref={navigationRef} label-visibility="selected" value="Recents" style={{
+                                    position: 'sticky',
+                                    bottom: '0',
+                                }}>
+                                    <mdui-navigation-bar-item icon="watch_later--outlined" active-icon="watch_later--filled" value="Recents">最近对话</mdui-navigation-bar-item>
+                                    <mdui-navigation-bar-item icon="favorite_border" active-icon="favorite" value="Favourites">收藏对话</mdui-navigation-bar-item>
+                                    <mdui-navigation-bar-item icon="chat--outlined" active-icon="chat--filled" value="AllChats">全部对话</mdui-navigation-bar-item>
+                                </mdui-navigation-bar>
+                            }
+                        </div>
+                    )}>
+                        {subRoutes}
+                    </Route>
+                </Routes>
+            </BrowserRouter>
+        </MainSharedContext.Provider>
+    )
+}

client/ui/MainSharedContext.ts

@@ -0,0 +1,23 @@
+import { Chat, UserMySelf } from "lingchair-client-protocol"
+import { createContext } from "use-context-selector"
+
+type Shared = {
+    functions_lazy: React.MutableRefObject<{
+        updateFavouriteChats: () => void
+        updateRecentChats: () => void
+        updateAllChats: () => void
+    }>
+    favouriteChats: Chat[]
+    setFavouriteChats: React.Dispatch<React.SetStateAction<Chat[]>>
+    setShowLoginDialog: React.Dispatch<React.SetStateAction<boolean>>
+    setShowRegisterDialog: React.Dispatch<React.SetStateAction<boolean>>
+    setShowAddFavourtieChatDialog: React.Dispatch<React.SetStateAction<boolean>>
+    setCurrentSelectedChatId: React.Dispatch<React.SetStateAction<string>>
+    myProfileCache?: UserMySelf
+    currentSelectedChatId: string
+}
+const MainSharedContext = createContext({} as Shared)
+
+export default MainSharedContext
+
+export type { Shared }

client/ui/chat-elements/chat-file.ts

@@ -0,0 +1,39 @@
+import { $ } from 'mdui/jq'
+
+customElements.define('chat-file', class extends HTMLElement {
+    static observedAttributes = ['href', 'name']
+    declare anchor: HTMLAnchorElement
+    declare span: HTMLSpanElement
+    constructor() {
+        super()
+        this.attachShadow({ mode: 'open' })
+    }
+    update() {
+        if (this.anchor == null) return
+
+        this.anchor.href = $(this).attr('href') as string
+        this.anchor.download = $(this).attr('href') as string
+        this.span.textContent = $(this).attr("name") as string
+    }
+    attributeChangedCallback(_name: string, _oldValue: unknown, _newValue: unknown) {
+        this.update()
+    }
+    connectedCallback() {
+        this.anchor = new DOMParser().parseFromString(`
+        <a style="width: 100%;height: 100%;">
+            <mdui-card clickable style="display: flex;align-items: center;box-shadow: inherit;border-radius: inherit;">
+                <mdui-icon name="insert_drive_file" style="margin: 13px;font-size: 34px;"></mdui-icon>
+                <span style="margin-right: 13px; word-wrap: break-word; word-break:break-all;white-space:normal; max-width :100%;"></span>
+            </mdui-card>
+        </a>`, 'text/html').body.firstChild as HTMLAnchorElement
+        this.span = $(this.anchor).find('span').get(0)
+        this.anchor.style.textDecoration = 'none'
+        this.anchor.style.color = 'inherit'
+        this.anchor.onclick = (e) => {
+            e.stopPropagation()
+        }
+        this.shadowRoot!.appendChild(this.anchor)
+
+        this.update()
+    }
+})

client/ui/chat-elements/chat-image.ts

@@ -0,0 +1,58 @@
+import openImageViewer from "../../utils/openImageViewer.ts"
+
+import { $ } from 'mdui/jq'
+
+
+customElements.define('chat-image', class extends HTMLElement {
+    static observedAttributes = ['src', 'show-error']
+    declare img: HTMLImageElement
+    declare error: HTMLElement
+    constructor() {
+        super()
+
+        this.attachShadow({ mode: 'open' })
+    }
+    update() {
+        if (this.img == null) return
+
+        this.img.src = $(this).attr('src') as string
+
+        const error = $(this).attr('show-error') == 'true'
+        this.img.style.display = error ? 'none' : 'block'
+        this.error.style.display = error ? '' : 'none'
+    }
+    attributeChangedCallback(_name: string, _oldValue: unknown, _newValue: unknown) {
+        this.update()
+    }
+    connectedCallback() {
+        this.img = new Image()
+        this.img.style.width = '100%'
+        this.img.style.maxHeight = "300px"
+        this.img.style.objectFit = 'cover'
+        // this.img.style.borderRadius = "var(--mdui-shape-corner-medium)"
+        this.shadowRoot!.appendChild(this.img)
+
+        this.error = new DOMParser().parseFromString(`<mdui-icon name="broken_image" style="font-size: 2rem;"></mdui-icon>`, 'text/html').body.firstChild as HTMLElement
+        this.shadowRoot!.appendChild(this.error)
+
+        this.img.addEventListener('error', () => {
+            $(this).attr('show-error', 'true')
+        })
+        this.error.addEventListener('click', (event) => {
+            event.stopPropagation()
+            const img = this.img
+            this.img = new Image()
+            this.img.style.width = '100%'
+            this.img.style.maxHeight = "300px"
+            this.img.style.objectFit = 'cover'
+            this.shadowRoot!.replaceChild(img, this.img)
+            $(this).attr('show-error', undefined)
+        })
+        this.img.addEventListener('click', (event) => {
+            event.stopPropagation()
+            openImageViewer($(this).attr('src') as string)
+        })
+
+        this.update()
+    }
+})

client/ui/chat-elements/chat-mention.ts

@@ -0,0 +1,60 @@
+import { $ } from 'mdui'
+import showSnackbar from "../../utils/showSnackbar.ts";
+customElements.define('chat-mention', class extends HTMLElement {
+    declare link: HTMLAnchorElement
+    static observedAttributes = ['user-id']
+    constructor() {
+        super()
+
+        this.attachShadow({ mode: 'open' })
+    }
+    connectedCallback() {
+        const shadow = this.shadowRoot as ShadowRoot
+
+        this.link = document.createElement('a')
+        this.link.style.fontSynthesis = 'style weight'
+        this.link.style.color = 'rgb(var(--mdui-color-primary))'
+        this.link.href = 'javascript:void(0)'
+        shadow.appendChild(this.link)
+
+        this.update()
+    }
+    attributeChangedCallback(_name: string, _oldValue: unknown, _newValue: unknown) {
+        this.update()
+    }
+    async update() {
+        if (this.link == null) return
+
+        const userId = $(this).attr('user-id')
+        const chatId = $(this).attr('chat-id')
+        const text = $(this).attr('text')
+        this.link.style.fontStyle = ''
+        if (chatId) {
+            
+            this.link.onclick = (e) => {
+                e.stopPropagation()
+                // deno-lint-ignore no-window
+                
+            }
+        } else if (userId) {
+           
+            this.link.onclick = (e) => {
+                e.stopPropagation()
+                // deno-lint-ignore no-window
+                
+            }
+        }
+        
+        text && (this.link.textContent = text)
+        if (!(userId || chatId)) {
+            this.link.textContent = "无效的提及"
+            this.link.style.fontStyle = 'italic'
+            this.link.onclick = (e) => {
+                e.stopPropagation()
+                showSnackbar({
+                    message: "该提及没有指定用户或者对话！",
+                })
+            }
+        }
+    }
+})

client/ui/chat-elements/chat-quote.ts

@@ -0,0 +1,45 @@
+import { $ } from 'mdui/jq'
+
+customElements.define('chat-quote', class extends HTMLElement {
+    declare container: HTMLAnchorElement
+    declare span: HTMLSpanElement
+    declare ellipsis: boolean
+    constructor() {
+        super()
+        this.attachShadow({ mode: 'open' })
+    }
+    update() {
+        if (this.container == null) return
+
+        this.span.textContent = this.textContent
+
+        this.updateStyle()
+    }
+    updateStyle() {
+        this.span.style.whiteSpace = this.ellipsis ? 'nowrap' : 'pre-wrap'
+        this.span.style.overflow = this.ellipsis ? 'hidden' : ''
+        this.span.style.textOverflow = this.ellipsis ? 'ellipsis' : ''
+    }
+    attributeChangedCallback(_name: string, _oldValue: unknown, _newValue: unknown) {
+        this.update()
+    }
+    connectedCallback() {
+        this.container = new DOMParser().parseFromString(`
+        <a style="width: 100%;height: 100%; color: rgb(var(--mdui-color-primary));" href="javascript:void(0)">
+            <span style="display: block; word-wrap: break-word; word-break:break-all;white-space:normal; max-width :100%;"></span>
+        </a>`, 'text/html').body.firstChild as HTMLAnchorElement
+        this.span = $(this.container).find('span').get(0)
+        this.container.style.textDecoration = 'none'
+        this.span.style.fontSynthesis = 'style weight'
+        this.container.onclick = (e) => {
+            this.ellipsis = !this.ellipsis
+            this.updateStyle()
+            e.stopPropagation()
+        }
+        this.ellipsis = true
+
+        this.shadowRoot!.appendChild(this.container)
+
+        this.update()
+    }
+})

client/ui/chat-elements/chat-text-container.ts

@@ -0,0 +1,16 @@
+customElements.define('chat-text-container', class extends HTMLElement {
+    declare container: HTMLDivElement
+    constructor() {
+        super()
+
+        this.attachShadow({ mode: 'open' })
+    }
+    connectedCallback() {
+        const shadow = this.shadowRoot as ShadowRoot
+        
+        this.container = document.createElement('div')
+        this.container.style.padding = '13px'
+        shadow.appendChild(this.container)
+        this.container.innerHTML = this.innerHTML
+    }
+})

client/ui/chat-elements/chat-text.ts

@@ -0,0 +1,40 @@
+import { $ } from 'mdui'
+
+customElements.define('chat-text', class extends HTMLElement {
+    declare span: HTMLSpanElement
+    static observedAttributes = ['underline', 'em']
+    constructor() {
+        super()
+
+        this.attachShadow({ mode: 'open' })
+    }
+    connectedCallback() {
+        const shadow = this.shadowRoot as ShadowRoot
+
+        this.span = document.createElement('span')
+        this.span.style.whiteSpace = 'pre-wrap'
+        this.span.style.fontSynthesis = 'style weight'
+        shadow.appendChild(this.span)
+
+        this.update()
+    }
+    attributeChangedCallback(_name: string, _oldValue: unknown, _newValue: unknown) {
+        this.update()
+    }
+    update() {
+        if (this.span == null) return
+
+        const isFirstElementInParent = this.parentElement?.firstElementChild == this
+        const isLastElementInParent = this.parentElement?.lastElementChild == this
+
+        // 避免不同的消息类型之间的换行符导致显示异常
+        if (isFirstElementInParent)
+            this.span.textContent = this.textContent.trimStart()
+        else if (isLastElementInParent)
+            this.span.textContent = this.textContent.trimEnd()
+        else
+            this.span.textContent = this.textContent
+        this.span.style.textDecoration = $(this).attr('underline') ? 'underline' : ''
+        this.span.style.fontStyle = $(this).attr('em') ? 'italic' : ''
+    }
+})

client/ui/chat-elements/chat-video.ts

@@ -0,0 +1,32 @@
+import { $ } from 'mdui/jq'
+
+customElements.define('chat-video', class extends HTMLElement {
+    static observedAttributes = ['src']
+    declare video: HTMLVideoElement
+    constructor() {
+        super()
+
+        this.attachShadow({ mode: 'open' })
+    }
+    update() {
+        if (this.video == null) return
+
+        this.video.src = $(this).attr('src') as string
+    }
+    attributeChangedCallback(_name: string, _oldValue: unknown, _newValue: unknown) {
+        this.update()
+    }
+    connectedCallback() {
+        this.video = new DOMParser().parseFromString(`<video controls></video>`, 'text/html').body.firstChild as HTMLVideoElement
+        this.video.style.maxWidth = "400px"
+        this.video.style.maxHeight = "300px"
+        this.video.style.width = "100%"
+        this.video.style.height = "100%"
+        this.video.style.display = 'block'
+        // e.style.borderRadius = "var(--mdui-shape-corner-medium)"
+       
+        this.video.onclick = (e) => e.stopPropagation()
+        this.shadowRoot!.appendChild(this.video)
+        this.update()
+    }
+})

client/ui/chat/ChatFragment.tsx

@@ -1,621 +0,0 @@
-import { Tab, TextField } from "mdui"
-import { $ } from "mdui/jq"
-import useEventListener from "../useEventListener.ts"
-import Element_Message from "./Message.tsx"
-import MessageContainer from "./MessageContainer.tsx"
-
-import * as React from 'react'
-import Client from "../../api/Client.ts"
-import Message from "../../api/client_data/Message.ts"
-import Chat from "../../api/client_data/Chat.ts"
-import data from "../../Data.ts"
-import { checkApiSuccessOrSncakbar, snackbar } from "../snackbar.ts"
-import useAsyncEffect from "../useAsyncEffect.ts"
-import * as marked from 'marked'
-import DOMPurify from 'dompurify'
-import randomUUID from "../../randomUUID.ts"
-import EventBus from "../../EventBus.ts"
-import User from "../../api/client_data/User.ts"
-
-import PreferenceLayout from '../preference/PreferenceLayout.tsx'
-import PreferenceHeader from '../preference/PreferenceHeader.tsx'
-import PreferenceStore from '../preference/PreferenceStore.ts'
-import SwitchPreference from '../preference/SwitchPreference.tsx'
-import SelectPreference from '../preference/SelectPreference.tsx'
-import TextFieldPreference from '../preference/TextFieldPreference.tsx'
-import Preference from '../preference/Preference.tsx'
-import GroupSettings from "../../api/client_data/GroupSettings.ts"
-import PreferenceUpdater from "../preference/PreferenceUpdater.ts"
-import SystemMessage from "./SystemMessage.tsx"
-import JoinRequestsList from "./JoinRequestsList.tsx"
-import getUrlForFileByHash from "../../getUrlForFileByHash.ts"
-
-interface Args extends React.HTMLAttributes<HTMLElement> {
-    target: string
-    showReturnButton?: boolean
-    openChatInfoDialog: (chat: Chat) => void
-    onReturnButtonClicked?: () => void
-    openUserInfoDialog: (user: User | string) => void
-}
-
-const markedInstance = new marked.Marked({
-    renderer: {
-        heading({ tokens, depth: _depth }) {
-            const text = this.parser.parseInline(tokens)
-            return `<span>${text}</span>`
-        },
-        paragraph({ tokens }) {
-            const text = this.parser.parseInline(tokens)
-            return `<span>${text}</span>`
-        },
-        image({ text, href }) {
-            const type = /^(Video|File)=.*/.exec(text)?.[1] || 'Image'
-            if (/tws:\/\/file\?hash=[A-Za-z0-9]+$/.test(href)) {
-                const url = getUrlForFileByHash(/^tws:\/\/file\?hash=(.*)/.exec(href)?.[1])
-                return ({
-                    Image: `<chat-image src="${url}" alt="${text}"></chat-image>`,
-                    Video: `<chat-video src="${url}"></chat-video>`,
-                    File: `<chat-file href="${url}" name="${/^Video|File=(.*)/.exec(text)?.[1] || 'Unnamed file'}"></chat-file>`,
-                })?.[type] || ``
-            }
-            return ``
-        },
-    }
-})
-
-export default function ChatFragment({ target, showReturnButton, onReturnButtonClicked, openChatInfoDialog, openUserInfoDialog, ...props }: Args) {
-    const [messagesList, setMessagesList] = React.useState([] as Message[])
-    const [chatInfo, setChatInfo] = React.useState({
-        title: '加载中...',
-        is_member: true,
-        is_admin: true,
-    } as Chat)
-
-    const [tabItemSelected, setTabItemSelected] = React.useState('None')
-    const tabRef = React.useRef<Tab>(null)
-    const chatPanelRef = React.useRef<HTMLElement>(null)
-    useEventListener(tabRef, 'change', () => {
-        tabRef.current != null && setTabItemSelected(tabRef.current!.value as string)
-    })
-
-    async function getChatInfoAndInit() {
-        setMessagesList([])
-        page.current = 0
-        const re = await Client.invoke('Chat.getInfo', {
-            token: data.access_token,
-            target: target,
-        })
-        if (re.code != 200)
-            return target != '' && checkApiSuccessOrSncakbar(re, "获取对话信息失败")
-        const chatInfo = re.data as Chat
-        setChatInfo(chatInfo)
-
-        if (chatInfo.is_member)
-            await loadMore()
-
-        setTabItemSelected(chatInfo.is_member ? "Chat" : "RequestJoin")
-        if (re.data!.type == 'group') {
-            groupPreferenceStore.setState(chatInfo.settings as GroupSettings)
-        }
-        setTimeout(() => {
-            chatPanelRef.current!.scrollTo({
-                top: 10000000000,
-                behavior: "smooth",
-            })
-        }, 300)
-    }
-    useAsyncEffect(getChatInfoAndInit, [target])
-
-    const page = React.useRef(0)
-    async function loadMore() {
-        const re = await Client.invoke("Chat.getMessageHistory", {
-            token: data.access_token,
-            target,
-            page: page.current,
-        })
-
-        if (checkApiSuccessOrSncakbar(re, "拉取对话记录失败"))
-            return
-        const returnMsgs = (re.data!.messages as Message[]).reverse()
-        page.current++
-        if (returnMsgs.length == 0) {
-            setShowNoMoreMessagesTip(true)
-            setTimeout(() => setShowNoMoreMessagesTip(false), 1000)
-            return
-        }
-
-        const oldest = messagesList[0]
-        setMessagesList(returnMsgs.concat(messagesList))
-        setTimeout(() => chatPanelRef.current!.scrollTo({ top: $(`#chat_${target}_message_${oldest.id}`).get(0).offsetTop, behavior: 'smooth' }), 100)
-    }
-
-    React.useEffect(() => {
-        interface OnMessageData {
-            chat: string
-            msg: Message
-        }
-        function callback(data: unknown) {
-            const { chat, msg } = (data as OnMessageData)
-            if (target == chat) {
-                setMessagesList(messagesList.concat([msg]))
-                if ((chatPanelRef.current!.scrollHeight - chatPanelRef.current!.scrollTop - chatPanelRef.current!.clientHeight) < 130)
-                    setTimeout(() => chatPanelRef.current!.scrollTo({
-                        top: 10000000000,
-                        behavior: "smooth",
-                    }), 100)
-            }
-        }
-
-        Client.on('Client.onMessage', callback)
-        return () => {
-            Client.off('Client.onMessage', callback)
-        }
-    })
-
-    const inputRef = React.useRef<TextField>(null)
-    const [showLoadingMoreMessagesTip, setShowLoadingMoreMessagesTip] = React.useState(false)
-    const [showNoMoreMessagesTip, setShowNoMoreMessagesTip] = React.useState(false)
-
-    const [isMessageSending, setIsMessageSending] = React.useState(false)
-
-    const cachedFiles = React.useRef({} as { [fileName: string]: ArrayBuffer })
-    const cachedFileNamesCount = React.useRef({} as { [fileName: string]: number })
-    async function sendMessage() {
-        try {
-            let text = inputRef.current!.value
-            if (text.trim() == '') return
-            setIsMessageSending(true)
-            for (const fileName of Object.keys(cachedFiles.current)) {
-                if (text.indexOf(fileName) != -1) {
-                    /* const re = await Client.invoke("Chat.uploadFile", {
-                        token: data.access_token,
-                        file_name: fileName,
-                        target,
-                        data: cachedFiles.current[fileName],
-                    }, 5000) */
-                    const re = await Client.uploadFileLikeApi(
-                        fileName,
-                        cachedFiles.current[fileName]
-                    )
-                    if (checkApiSuccessOrSncakbar(re, `文件[${fileName}] 上传失败`)) return setIsMessageSending(false)
-                    text = text.replaceAll('(' + fileName + ')', '(tws://file?hash=' + re.data!.file_hash as string + ')')
-                }
-            }
-
-            const re = await Client.invoke("Chat.sendMessage", {
-                token: data.access_token,
-                target,
-                text,
-            }, 5000)
-            if (checkApiSuccessOrSncakbar(re, "发送失败")) return setIsMessageSending(false)
-            inputRef.current!.value = ''
-            cachedFiles.current = {}
-        } catch (e) {
-            snackbar({
-                message: '发送失败: ' + (e as Error).message,
-                placement: 'top',
-            })
-        }
-        setIsMessageSending(false)
-    }
-
-    const attachFileInputRef = React.useRef<HTMLInputElement>(null)
-    const uploadChatAvatarRef = React.useRef<HTMLInputElement>(null)
-
-    function insertText(text: string) {
-        const input = inputRef.current!.shadowRoot!.querySelector('[part=input]') as HTMLTextAreaElement
-        inputRef.current!.value = input.value!.substring(0, input.selectionStart as number) + text + input.value!.substring(input.selectionEnd as number, input.value.length)
-    }
-    async function addFile(type: string, name_: string, data: Blob | Response) {
-        let name = name_
-        while (cachedFiles.current[name] != null) {
-            name = name_ + '_' + cachedFileNamesCount.current[name]
-            cachedFileNamesCount.current[name]++
-        }
-
-        cachedFiles.current[name] = await data.arrayBuffer()
-        cachedFileNamesCount.current[name] = 1
-        if (type.startsWith('image/'))
-            insertText(`![图片](${name})`)
-        else if (type.startsWith('video/'))
-            insertText(`![Video=${name}](${name})`)
-        else
-            insertText(`![File=${name}](${name})`)
-    }
-    useEventListener(attachFileInputRef, 'change', (_e) => {
-        const files = attachFileInputRef.current!.files as unknown as File[]
-        if (files?.length == 0) return
-
-        for (const file of files) {
-            addFile(file.type, file.name, file)
-        }
-        attachFileInputRef.current!.value = ''
-    })
-    useEventListener(uploadChatAvatarRef, 'change', async (_e) => {
-        const file = uploadChatAvatarRef.current!.files?.[0] as File
-        if (file == null) return
-
-        let re = await Client.uploadFileLikeApi(
-            'avatar',
-            file
-        )
-        if (checkApiSuccessOrSncakbar(re, "上传失败")) return
-        const hash = re.data!.file_hash
-        re = await Client.invoke("Chat.setAvatar", {
-            token: data.access_token,
-            target: target,
-            file_hash: hash,
-        })
-        uploadChatAvatarRef.current!.value = ''
-
-        if (checkApiSuccessOrSncakbar(re, "修改失败")) return
-        snackbar({
-            message: "修改成功 (刷新页面以更新)",
-            placement: "top",
-        })
-    })
-
-    const groupPreferenceStore = new PreferenceStore<GroupSettings>()
-    groupPreferenceStore.setOnUpdate(async (value, oldvalue) => {
-        const re = await Client.invoke("Chat.updateSettings", {
-            token: data.access_token,
-            target,
-            settings: value,
-        })
-        if (checkApiSuccessOrSncakbar(re, "更新设定失败")) return groupPreferenceStore.setState(oldvalue)
-    })
-
-    return (
-        <div style={{
-            width: '100%',
-            height: '100%',
-            display: 'flex',
-            flexDirection: 'column',
-            overflowY: 'auto',
-        }} {...props}>
-            <mdui-tabs ref={tabRef} value={tabItemSelected} style={{
-                position: 'sticky',
-                display: "flex",
-                flexDirection: "column",
-                height: "100%",
-            }}>
-                {
-                    showReturnButton && <mdui-button-icon icon="arrow_back" onClick={onReturnButtonClicked} style={{
-                        alignSelf: 'center',
-                        marginLeft: '5px',
-                        marginRight: '5px',
-                    }}></mdui-button-icon>
-                }
-                {
-                    chatInfo.is_member ? <>
-                        <mdui-tab value="Chat">{chatInfo.title}</mdui-tab>
-                        {chatInfo.type == 'group' && chatInfo.is_admin && <mdui-tab value="NewMemberRequests">加入请求</mdui-tab>}
-                    </>
-                        : <mdui-tab value="RequestJoin">{chatInfo.title}</mdui-tab>
-                }
-                <mdui-tab value="Settings">设置</mdui-tab>
-                <mdui-tab value="None" style={{ display: 'none' }}></mdui-tab>
-                <div style={{
-                    flexGrow: '1',
-                }}></div>
-                <mdui-button-icon icon="refresh" onClick={() => getChatInfoAndInit()} style={{
-                    alignSelf: 'center',
-                    marginLeft: '5px',
-                    marginRight: '5px',
-                }}></mdui-button-icon>
-                <mdui-button-icon icon="info" onClick={() => openChatInfoDialog(chatInfo)} style={{
-                    alignSelf: 'center',
-                    marginLeft: '5px',
-                    marginRight: '5px',
-                }}></mdui-button-icon>
-
-                <mdui-tab-panel slot="panel" value="RequestJoin" style={{
-                    display: tabItemSelected == "RequestJoin" ? "flex" : "none",
-                    flexDirection: "column",
-                    height: "100%",
-                    justifyContent: 'center',
-                    alignItems: 'center',
-                }}>
-                    <div>
-                        <mdui-button disabled={!groupPreferenceStore.state.allow_new_member_join} onClick={async () => {
-                            const re = await Client.invoke("Chat.sendJoinRequest", {
-                                token: data.access_token,
-                                target: target,
-                            })
-                            if (re.code != 200)
-                                return checkApiSuccessOrSncakbar(re, "发送加入请求失败")
-
-                            snackbar({
-                                message: '发送成功!',
-                                placement: 'top',
-                            })
-                        }}>请求加入对话</mdui-button>
-                    </div>
-                </mdui-tab-panel>
-                <mdui-tab-panel slot="panel" value="Chat" ref={chatPanelRef} style={{
-                    display: tabItemSelected == "Chat" ? "flex" : "none",
-                    flexDirection: "column",
-                    height: "100%",
-                }} onScroll={async (e) => {
-                    if (!chatInfo.is_member) return
-                    const scrollTop = (e.target as HTMLDivElement).scrollTop
-                    if (scrollTop == 0 && !showLoadingMoreMessagesTip) {
-                        setShowLoadingMoreMessagesTip(true)
-                        await loadMore()
-                        setShowLoadingMoreMessagesTip(false)
-                    }
-                }}>
-                    <div style={{
-                        display: 'flex',
-                        justifyContent: "center",
-                        paddingTop: "15px",
-                    }}>
-                        <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",
-                        flexGrow: '1',
-                    }}>
-                        {
-                            (() => {
-                                let date = new Date(0)
-                                return messagesList.map((msg) => {
-                                    const rendeText = DOMPurify.sanitize(markedInstance.parse(msg.text) as string, {
-                                        ALLOWED_TAGS: [
-                                            "chat-image",
-                                            "chat-video",
-                                            "chat-file",
-                                            "span",
-                                            "chat-link",
-                                        ],
-                                        ALLOWED_ATTR: [
-                                            'src',
-                                            'alt',
-                                            'href',
-                                            'name',
-                                        ],
-                                    }).replaceAll('\n', '<br>')
-                                    const lastDate = date
-                                    date = new Date(msg.time)
-
-                                    const msgElement = msg.user_id == null ? <SystemMessage>{msg.text}</SystemMessage> : <Element_Message
-                                        rawData={msg.text}
-                                        renderHTML={rendeText}
-                                        message={msg}
-                                        key={msg.id}
-                                        slot="trigger"
-                                        id={`chat_${target}_message_${msg.id}`}
-                                        userId={msg.user_id}
-                                        openUserInfoDialog={openUserInfoDialog} />
-
-                                    return (
-                                        <>
-                                            {
-                                                msg.user_id != null &&
-                                                (date.getMinutes() != lastDate.getMinutes() || date.getDate() != lastDate.getDate() || date.getMonth() != lastDate.getMonth() || date.getFullYear() != lastDate.getFullYear())
-                                                && <mdui-tooltip content={`${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日  ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`}>
-                                                    <div style={{
-                                                        fontSize: '87%',
-                                                        marginTop: '10px',
-                                                    }}>
-                                                        {
-                                                            (date.getFullYear() != lastDate.getFullYear() ? `${date.getFullYear()}年` : '')
-                                                            + `${date.getMonth() + 1}月`
-                                                            + `${date.getDate()}日`
-                                                            + `  ${date.getHours()}:${date.getMinutes()}`
-                                                        }
-                                                    </div>
-                                                </mdui-tooltip>
-                                            }
-                                            {
-                                                msgElement
-                                            }
-                                        </>
-                                    )
-                                })
-                            })()
-                        }
-                    </MessageContainer>
-                    {
-                        // 输入框
-                    }
-                    <div style={{
-                        display: 'flex',
-                        alignItems: 'center',
-                        paddingBottom: '2px',
-                        paddingTop: '0.1rem',
-                        position: 'sticky',
-                        bottom: '0',
-                        paddingLeft: '5px',
-                        paddingRight: '4px',
-                        backgroundColor: 'rgb(var(--mdui-color-surface))',
-                    }} onDrop={(e) => {
-                        function getFileNameOrRandom(urlString: string) {
-                            const url = new URL(urlString)
-                            let filename = url.pathname.substring(url.pathname.lastIndexOf('/') + 1).trim()
-                            if (filename == '')
-                                filename = 'file_' + randomUUID()
-                            return filename
-                        }
-                        if (e.dataTransfer.items.length > 0) {
-                            // 基于当前的实现, 浏览器不会读取文件的字节流来确定其媒体类型, 其根据文件扩展名进行假设
-                            // https://developer.mozilla.org/zh-CN/docs/Web/API/Blob/type
-                            for (const item of e.dataTransfer.items) {
-                                if (item.type == 'text/uri-list') {
-                                    item.getAsString(async (url) => {
-                                        try {
-                                            // 即便是 no-cors 還是殘廢, 因此暫時沒有什麽想法
-                                            const re = await fetch(url)
-                                            const type = re.headers.get("Content-Type")
-                                            if (type && re.ok)
-                                                addFile(type as string, getFileNameOrRandom(url), re)
-                                        } catch (e) {
-                                            snackbar({
-                                                message: '无法解析链接: ' + (e as Error).message,
-                                                placement: 'top',
-                                            })
-                                        }
-                                    })
-                                } else if (item.kind == 'file') {
-                                    e.preventDefault()
-                                    const file = item.getAsFile() as File
-                                    addFile(item.type, file.name, file)
-                                }
-                            }
-                        }
-                    }}>
-                        <mdui-text-field variant="outlined" placeholder="(｡･ω･｡)" autosize ref={inputRef as any} max-rows={6} onChange={() => {
-                            if (inputRef.current?.value.trim() == '')
-                                cachedFiles.current = {}
-                        }} onKeyDown={(event) => {
-                            if (event.ctrlKey && event.key == 'Enter')
-                                sendMessage()
-                        }} onPaste={(event) => {
-                            for (const item of event.clipboardData.items) {
-                                if (item.kind == 'file') {
-                                    event.preventDefault()
-                                    const file = item.getAsFile() as File
-                                    addFile(item.type, file.name, file)
-                                }
-                            }
-                        }} style={{
-                            marginRight: '10px',
-                            marginTop: '3px',
-                            marginBottom: '3px',
-                        }}></mdui-text-field>
-                        <mdui-button-icon slot="end-icon" icon="attach_file" style={{
-                            marginRight: '6px',
-                        }} onClick={() => {
-                            attachFileInputRef.current!.click()
-                        }}></mdui-button-icon>
-                        <mdui-button-icon icon="send" style={{
-                            marginRight: '7px',
-                        }} onClick={() => sendMessage()} loading={isMessageSending}></mdui-button-icon>
-                        <div style={{
-                            display: 'none'
-                        }}>
-                            <input accept="*/*" type="file" name="添加文件" multiple ref={attachFileInputRef}></input>
-                        </div>
-                    </div>
-                </mdui-tab-panel>
-                {
-                    chatInfo.type == 'group' && <mdui-tab-panel slot="panel" value="NewMemberRequests" style={{
-                        display: tabItemSelected == "NewMemberRequests" ? "flex" : "none",
-                        flexDirection: "column",
-                        height: "100%",
-                    }}>
-                        {tabItemSelected == "NewMemberRequests" && <JoinRequestsList target={target} />}
-                    </mdui-tab-panel>
-                }
-                <mdui-tab-panel slot="panel" value="Settings" style={{
-                    display: tabItemSelected == "Settings" ? "flex" : "none",
-                    flexDirection: "column",
-                    height: "100%",
-                }}>
-                    <div style={{
-                        display: 'none'
-                    }}>
-                        <input accept="image/*" type="file" name="上传对话头像" ref={uploadChatAvatarRef}></input>
-                    </div>
-                    {
-                        chatInfo.type == 'group' && <PreferenceLayout>
-                            <PreferenceUpdater.Provider value={groupPreferenceStore.createUpdater()}>
-                                <PreferenceHeader
-                                    title="群组资料" />
-                                <Preference
-                                    title="上传新的头像"
-                                    icon="image"
-                                    disabled={!chatInfo.is_admin}
-                                    onClick={() => {
-                                        uploadChatAvatarRef.current!.click()
-                                    }} />
-                                <TextFieldPreference
-                                    title="设置群名称"
-                                    icon="edit"
-                                    id="group_title"
-                                    state={groupPreferenceStore.state.group_title || ''}
-                                    disabled={!chatInfo.is_admin} />
-                                <TextFieldPreference
-                                    title="设置群别名"
-                                    icon="edit"
-                                    id="group_name"
-                                    description="以便于添加, 可留空"
-                                    state={groupPreferenceStore.state.group_name || ''}
-                                    disabled={!chatInfo.is_admin} />
-                                {/* <PreferenceHeader
-                                    title="群组管理" />
-                                <Preference
-                                    title="群组成员列表"
-                                    icon="group"
-                                    disabled={true || !chatInfo.is_admin}
-                                    description="别看了, 还没做" /> */}
-                                <PreferenceHeader
-                                    title="入群设定" />
-                                <SwitchPreference
-                                    title="允许入群"
-                                    icon="person_add"
-                                    id="allow_new_member_join"
-                                    disabled={!chatInfo.is_admin}
-                                    state={groupPreferenceStore.state.allow_new_member_join || false} />
-                                {/* <SwitchPreference
-                                    title="允许成员邀请"
-                                    description="目前压根没有这项功能, 甚至还不能查看成员列表, 以后再说吧"
-                                    id="allow_new_member_from_invitation"
-                                    icon="_"
-                                    disabled={true || !chatInfo.is_admin}
-                                    state={groupPreferenceStore.state.allow_new_member_from_invitation || false} />
-                                <SelectPreference
-                                    title="入群验证方式"
-                                    icon="_"
-                                    id="new_member_join_method"
-                                    selections={{
-                                        disabled: "无需验证",
-                                        allowed_by_admin: "只需要管理员批准 (WIP)",
-                                        answered_and_allowed_by_admin: "需要回答问题并获得管理员批准 (WIP)",
-                                    }}
-                                    disabled={!chatInfo.is_admin || !groupPreferenceStore.state.allow_new_member_join}
-                                    state={groupPreferenceStore.state.new_member_join_method || 'disabled'} />
-                                {
-                                    groupPreferenceStore.state.new_member_join_method == 'answered_and_allowed_by_admin'
-                                    && <TextFieldPreference
-                                        title="设置问题"
-                                        icon="_"
-                                        id="answered_and_allowed_by_admin_question"
-                                        description="WIP"
-                                        state={groupPreferenceStore.state.answered_and_allowed_by_admin_question || ''}
-                                        disabled={true || !chatInfo.is_admin} />
-                                } */}
-                            </PreferenceUpdater.Provider>
-                        </PreferenceLayout>
-                    }
-                    {
-                        chatInfo.type == 'private' && (
-                            <div>
-                                未制作
-                            </div>
-                        )
-                    }
-                </mdui-tab-panel>
-                <mdui-tab-panel slot="panel" value="None">
-                </mdui-tab-panel>
-            </mdui-tabs>
-        </div>
-    )
-}

client/ui/chat/JoinRequestsList.tsx

@@ -1,104 +0,0 @@
-import { TextField } from "mdui"
-import RecentChat from "../../api/client_data/RecentChat.ts"
-import useEventListener from "../useEventListener.ts"
-import RecentsListItem from "./JoinRequestsListItem.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"
-import JoinRequest from "../../api/client_data/JoinRequest.ts"
-import JoinRequestsListItem from "./JoinRequestsListItem.tsx";
-
-interface Args extends React.HTMLAttributes<HTMLElement> {
-    target: string
-}
-
-export default function JoinRequestsList({
-    target,
-    ...props
-}: Args) {
-    const searchRef = React.useRef<HTMLElement>(null)
-    const [searchText, setSearchText] = React.useState('')
-    const [updateJoinRequests, setUpdateJoinRequests] = React.useState<JoinRequest[]>([])
-
-    useEventListener(searchRef, 'input', (e) => {
-        setSearchText((e.target as unknown as TextField).value)
-    })
-
-    useAsyncEffect(async () => {
-        async function updateJoinRequests() {
-            const re = await Client.invoke("Chat.getJoinRequests", {
-                token: data.access_token,
-                target: target,
-            })
-            if (re.code != 200)
-                return checkApiSuccessOrSncakbar(re, "获取加入请求列表失败")
-
-            setUpdateJoinRequests(re.data!.join_requests as JoinRequest[])
-        }
-        updateJoinRequests()
-        EventBus.on('JoinRequestsList.updateJoinRequests', () => updateJoinRequests())
-        setTimeout(() => updateJoinRequests(), 15 * 1000)
-    })
-
-    async function removeJoinRequest(userId: string) {
-        const re = await Client.invoke("Chat.processJoinRequest", {
-            token: data.access_token,
-            chat_id: target,
-            user_id: userId,
-            action: 'remove',
-        })
-        if (re.code != 200)
-            return checkApiSuccessOrSncakbar(re, "删除加入请求失败")
-
-        EventBus.emit('JoinRequestsList.updateJoinRequests')
-    }
-    async function acceptJoinRequest(userId: string) {
-        const re = await Client.invoke("Chat.processJoinRequest", {
-            token: data.access_token,
-            chat_id: target,
-            user_id: userId,
-            action: 'accept',
-        })
-        if (re.code != 200)
-            return checkApiSuccessOrSncakbar(re, "通过加入请求失败")
-
-        EventBus.emit('JoinRequestsList.updateJoinRequests')
-    }
-
-    return <mdui-list style={{
-        overflowY: 'auto',
-        paddingRight: '10px',
-        paddingLeft: '10px',
-        height: '100%',
-        width: '100%',
-    }} {...props}>
-        <mdui-text-field icon="search" type="search" clearable ref={searchRef} variant="outlined" placeholder="搜索..." style={{
-            marginTop: '5px',
-            marginBottom: '13px',
-        }}></mdui-text-field>
-
-        <mdui-list-item rounded style={{
-            width: '100%',
-            marginBottom: '15px',
-        }} icon="refresh" onClick={() => EventBus.emit('JoinRequestsList.updateJoinRequests')}>刷新</mdui-list-item>
-
-        {
-            updateJoinRequests.filter((joinRequest) =>
-                searchText == '' ||
-                joinRequest.title.includes(searchText) ||
-                joinRequest.reason?.includes(searchText) ||
-                joinRequest.user_id.includes(searchText)
-            ).map((v) =>
-                <JoinRequestsListItem
-                    key={v.user_id}
-                    acceptJoinRequest={acceptJoinRequest}
-                    removeJoinRequest={removeJoinRequest}
-                    joinRequest={v} />
-            )
-        }
-    </mdui-list>
-}

client/ui/chat/JoinRequestsListItem.tsx

@@ -1,41 +0,0 @@
-import { $ } from "mdui/jq"
-import RecentChat from "../../api/client_data/RecentChat.ts"
-import Avatar from "../Avatar.tsx"
-import React from 'react'
-import JoinRequest from "../../api/client_data/JoinRequest.ts"
-
-interface Args extends React.HTMLAttributes<HTMLElement> {
-    joinRequest: JoinRequest
-    acceptJoinRequest: (userId: string) => any
-    removeJoinRequest: (userId: string) => any
-}
-
-export default function JoinRequestsListItem({ joinRequest, acceptJoinRequest, removeJoinRequest }: Args) {
-    const { user_id, title, avatar, reason } = joinRequest
-
-    const itemRef = React.useRef<HTMLElement>(null)
-    React.useEffect(() => {
-        $(itemRef.current!.shadowRoot).find('.headline').css('margin-top', '3px')
-    })
-    return (
-        <mdui-list-item rounded style={{
-            marginTop: '3px',
-            marginBottom: '3px',
-        }} ref={itemRef}>
-            {title}
-            <Avatar src={avatar} text={title} slot="icon" />
-            <span slot="description"
-                style={{
-                    width: "100%",
-                    display: "inline-block",
-                    whiteSpace: "nowrap", /* 禁止换行 */
-                    overflow: "hidden", /* 隐藏溢出内容 */
-                    textOverflow: "ellipsis", /* 显示省略号 */
-                }}>请求原因: {reason || "无"}</span>
-            <div slot="end-icon">
-                <mdui-button-icon icon="check" onClick={() => acceptJoinRequest(user_id)}></mdui-button-icon>
-                <mdui-button-icon icon="delete" onClick={() => removeJoinRequest(user_id)}></mdui-button-icon>
-            </div>
-        </mdui-list-item>
-    )
-}

client/ui/chat/Message.tsx

@@ -1,159 +0,0 @@
-import { Dropdown, Dialog, dialog } from "mdui"
-import { $ } from "mdui/jq"
-import Client from "../../api/Client.ts"
-import Data_Message from "../../api/client_data/Message.ts"
-import DataCaches from "../../api/DataCaches.ts"
-import Avatar from "../Avatar.tsx"
-import copyToClipboard from "../copyToClipboard.ts"
-import useAsyncEffect from "../useAsyncEffect.ts"
-import useEventListener from "../useEventListener.ts"
-import React from "react"
-import isMobileUI from "../isMobileUI.ts"
-import ReactJson from 'react-json-view'
-import User from "../../api/client_data/User.ts"
-import getUrlForFileByHash from "../../getUrlForFileByHash.ts"
-
-interface Args extends React.HTMLAttributes<HTMLElement> {
-    userId: string
-    rawData: string
-    renderHTML: string
-    message: Data_Message
-    openUserInfoDialog: (user: User | string) => void
-}
-
-export default function Message({ userId, rawData, renderHTML, message, openUserInfoDialog, ...props }: Args) {
-    const isAtRight = Client.myUserProfile?.id == userId
-
-    const [nickName, setNickName] = React.useState("")
-    const [avatarUrl, setAvatarUrl] = React.useState<string | undefined>("")
-
-    useAsyncEffect(async () => {
-        const user = await DataCaches.getUserProfile(userId)
-        setNickName(user.nickname)
-        setAvatarUrl(getUrlForFileByHash(user?.avatar_file_hash))
-    }, [userId])
-
-    const dropDownRef = React.useRef<Dropdown>(null)
-    const messageJsonDialogRef = React.useRef<Dialog>(null)
-    useEventListener(messageJsonDialogRef, 'click', (e) => {
-        e.stopPropagation()
-    })
-    useEventListener(dropDownRef, 'closed', (e) => {
-        setDropDownOpen(false)
-    })
-
-    const [isDropDownOpen, setDropDownOpen] = React.useState(false)
-
-    const [isUsingFullDisplay, setIsUsingFullDisplay] = React.useState(false)
-
-    React.useEffect(() => {
-        const text = $(dropDownRef.current as HTMLElement).find('#msg').text().trim()
-        setIsUsingFullDisplay(text == '' || (
-            rawData.split("tws:\/\/file\?hash=").length == 2
-            && /\<\/chat\-(file|image|video)\>(\<\/span\>)?$/.test(renderHTML.trim())
-        ))
-    }, [renderHTML])
-
-    return (
-        <div
-            slot="trigger"
-            onContextMenu={(e) => {
-                if (isMobileUI()) return
-                e.preventDefault()
-                setDropDownOpen(!isDropDownOpen)
-            }}
-            onClick={(e) => {
-                if (!isMobileUI()) return
-                e.preventDefault()
-                setDropDownOpen(!isDropDownOpen)
-            }}
-            style={{
-                width: "100%",
-                display: "flex",
-                justifyContent: isAtRight ? "flex-end" : "flex-start",
-                flexDirection: "column"
-            }}
-            {...props}>
-            <div
-                style={{
-                    display: "flex",
-                    justifyContent: isAtRight ? "flex-end" : "flex-start",
-                }}>
-                {
-                    // 发送者昵称(左)
-                    isAtRight && <span
-                        style={{
-                            alignSelf: "center",
-                            fontSize: "90%"
-                        }}>
-                        {nickName}
-                    </span>
-                }
-                {
-                    // 发送者头像
-                }
-                <Avatar
-                    src={avatarUrl}
-                    text={nickName}
-                    style={{
-                        width: "43px",
-                        height: "43px",
-                        margin: "11px"
-                    }}
-                    onClick={(e) => {
-                        e.stopPropagation()
-                        openUserInfoDialog(userId)
-                    }} />
-                {
-                    // 发送者昵称(右)
-                    !isAtRight && <span
-                        style={{
-                            alignSelf: "center",
-                            fontSize: "90%"
-                        }}>
-                        {nickName}
-                    </span>
-                }
-            </div>
-            <mdui-card
-                variant="elevated"
-                style={{
-                    maxWidth: 'var(--whitesilk-widget-message-maxwidth)', // (window.matchMedia('(pointer: fine)') && "50%") || (window.matchMedia('(pointer: coarse)') && "77%"),
-                    minWidth: "0%",
-                    [isAtRight ? "marginRight" : "marginLeft"]: "55px",
-                    marginTop: "-5px",
-                    padding: isUsingFullDisplay ? undefined : "13px",
-                    paddingTop: isUsingFullDisplay ? undefined : "14px",
-                    alignSelf: isAtRight ? "flex-end" : "flex-start",
-                    backgroundColor: isUsingFullDisplay ? "inherit" : undefined
-                }}>
-                <mdui-dialog close-on-overlay-click close-on-esc ref={messageJsonDialogRef}>
-                    {
-                        // @ts-ignore 这是可以正常工作的
-                        <ReactJson src={message} />
-                    }
-                </mdui-dialog>
-                <mdui-dropdown trigger="manual" ref={dropDownRef} open={isDropDownOpen}>
-                    <span
-                        slot="trigger"
-                        id="msg"
-                        style={{
-                            fontSize: "94%"
-                        }}
-                        dangerouslySetInnerHTML={{
-                            __html: renderHTML
-                        }} />
-                    <mdui-menu onClick={(e) => {
-                        e.stopPropagation()
-                        setDropDownOpen(false)
-                    }}>
-                        <mdui-menu-item icon="content_copy" onClick={() => copyToClipboard($(dropDownRef.current as HTMLElement).find('#msg').text().trim())}>复制文字</mdui-menu-item>
-                        <mdui-menu-item icon="content_copy" onClick={() => copyToClipboard(rawData)}>复制原文</mdui-menu-item>
-                        <mdui-menu-item icon="info" onClick={() => messageJsonDialogRef.current!.open = true}>JSON</mdui-menu-item>
-                    </mdui-menu>
-                </mdui-dropdown>
-            </mdui-card>
-
-        </div>
-    )
-}

client/ui/chat/MessageContainer.tsx

@@ -1,17 +0,0 @@
-interface Args extends React.HTMLAttributes<HTMLElement> {}
-
-export default function MessageContainer({ children, style, ...props }: Args) {
-    return (
-        <div style={{
-            display: 'flex',
-            flexDirection: 'column',
-            justifyContent: 'flex-end',
-            alignItems: 'center',
-            marginBottom: '20px',
-            ...style,
-        }}
-        {...props}>
-            {children}
-        </div>
-    )
-}

client/ui/chat/SystemMessage.tsx

@@ -1,24 +0,0 @@
-
-export default function SystemMessage({ children }: React.HTMLAttributes<HTMLElement>) {
-    return (
-        <div style={{
-            width: '100%',
-            flexDirection: 'column',
-            display: 'flex',
-            marginTop: '25px',
-            marginBottom: '20px',
-        }}>
-            <mdui-card variant="filled"
-                style={{
-                    alignSelf: 'center',
-                    paddingTop: '8px',
-                    paddingBottom: '8px',
-                    paddingLeft: '17px',
-                    paddingRight: '17px',
-                    fontSize: '92%',
-                }}>
-                {children}
-            </mdui-card>
-        </div>
-    )
-}

client/ui/copyToClipboard.ts

@@ -1,20 +0,0 @@
-export default function copyToClipboard(text: string) {
-    if (!("via" in window) && navigator.clipboard)
-        return navigator.clipboard.writeText(text)
-    return new Promise((res, rej) => {
-        if (document.hasFocus()) {
-            const a = document.createElement("textarea")
-            document.body.appendChild(a)
-            a.style.position = "fixed"
-            a.style.clip = "rect(0 0 0 0)"
-            a.style.top = "10px"
-            a.value = text
-            a.select()
-            document.execCommand("cut", true)
-            document.body.removeChild(a)
-            res(null)
-        } else {
-            rej()
-        }
-    })
-}

client/ui/custom-elements/chat-file.ts

@@ -1,27 +0,0 @@
-import { $ } from 'mdui/jq'
-
-customElements.define('chat-file', class extends HTMLElement {
-    constructor() {
-        super()
-    }
-    connectedCallback() {
-        const e = new DOMParser().parseFromString(`
-        <a style="width: 100%;height: 100%;">
-            <mdui-card clickable style="display: flex;align-items: center;">
-                <mdui-icon name="insert_drive_file" style="margin: 13px;font-size: 34px;"></mdui-icon>
-                <span style="margin-right: 13px; word-wrap: break-word; word-break:break-all;white-space:normal; max-width :100%;"></span>
-            </mdui-card>
-        </a>`, 'text/html').body.firstChild as HTMLElement
-        $(e).find('span').text($(this).attr("name"))
-        const href = $(this).attr('href')
-        $(e).attr('href', href)
-        $(e).attr('target', '_blank')
-        $(e).attr('download', href)
-        e.style.textDecoration = 'none'
-        e.style.color = 'inherit'
-        e.onclick = (e) => {
-            e.stopPropagation()
-        }
-        this.appendChild(e)
-    }
-})

client/ui/custom-elements/chat-image.ts

@@ -1,72 +0,0 @@
-import openImageViewer from "../openImageViewer.ts"
-import { snackbar } from "../snackbar.ts"
-
-import { $ } from 'mdui/jq'
-
-
-customElements.define('chat-image', class extends HTMLElement {
-    constructor() {
-        super()
-    }
-    connectedCallback() {
-        this.style.display = 'block'
-        const e = new Image()
-        e.style.maxWidth = "400px"
-        e.style.maxHeight = "300px"
-        e.style.marginTop = '5px'
-        e.style.marginBottom = '5px'
-        e.style.borderRadius = "var(--mdui-shape-corner-medium)"
-        e.alt = $(this).attr('alt') || ""
-        e.onerror = () => {
-            const src = $(this).attr('src')
-            $(this).html(`<mdui-icon name="broken_image" style="font-size: 2rem;"></mdui-icon>`)
-            $(this).attr('alt', '无法加载: ' + $(this).attr('alt'))
-            $(this).on('click', () => {
-                snackbar({
-                    message: `图片 (${src}) 无法加载!`,
-                    placement: 'top'
-                })
-            })
-        }
-        e.src = $(this).attr('src') as string
-        e.onclick = (event) => {
-            event.stopPropagation()
-            openImageViewer($(this).attr('src') as string)
-        }
-        this.appendChild(e)
-    }
-})
-
-document.body.appendChild(new DOMParser().parseFromString(`
-    <mdui-dialog id="image-viewer-dialog" fullscreen="fullscreen">
-        <style>
-            #image-viewer-dialog::part(panel) {
-                background: rgba(0, 0, 0, 0) !important;
-                padding: 0 !important;
-            }
-    
-            #image-viewer-dialog>mdui-button-icon[icon=close] {
-                z-index: 114514;
-                position: fixed;
-                top: 15px;
-                right: 15px;
-                color: #ffffff
-            }
-    
-            #image-viewer-dialog>mdui-button-icon[icon=open_in_new] {
-                z-index: 114514;
-                position: fixed;
-                top: 15px;
-                right: 65px;
-                color: #ffffff
-            }
-        </style>
-        <mdui-button-icon icon="open_in_new"
-            onclick="window.open(document.querySelector('#image-viewer-dialog-inner > *').src, '_blank')">
-        </mdui-button-icon>
-        <mdui-button-icon icon="close" onclick="this.parentNode.open = false">
-        </mdui-button-icon>
-        <pinch-zoom id="image-viewer-dialog-inner" style="width: var(--whitesilk-window-width); height: var(--whitesilk-window-height);">
-        </pinch-zoom>
-    </mdui-dialog>
-`, 'text/html').body.firstChild as Node)

client/ui/custom-elements/chat-video.ts

@@ -1,19 +0,0 @@
-import { $ } from 'mdui/jq'
-
-customElements.define('chat-video', class extends HTMLElement {
-    constructor() {
-        super()
-    }
-    connectedCallback() {
-        this.style.display = 'block'
-        const e = new DOMParser().parseFromString(`<video controls></video>`, 'text/html').body.firstChild as HTMLVideoElement
-        e.style.maxWidth = "400px"
-        e.style.maxHeight = "300px"
-        e.style.width = "100%"
-        e.style.height = "100%"
-        e.style.borderRadius = "var(--mdui-shape-corner-medium)"
-        e.src = $(this).attr('src') as string
-        e.onclick = (e) => e.stopPropagation()
-        this.appendChild(e)
-    }
-})

client/ui/dialog/AddContactDialog.tsx

@@ -1,47 +0,0 @@
-import * as React from 'react'
-import { Button, Dialog, TextField } from "mdui"
-import useEventListener from "../useEventListener.ts"
-import { checkApiSuccessOrSncakbar, snackbar } from "../snackbar.ts"
-import Client from "../../api/Client.ts"
-
-import * as CryptoJS from 'crypto-js'
-import data from "../../Data.ts"
-import EventBus from "../../EventBus.ts"
-
-interface Refs {
-    addContactDialogRef: React.MutableRefObject<Dialog | null>
-}
-
-export default function AddContactDialog({
-    addContactDialogRef,
-}: Refs) {
-    const inputTargetRef = React.useRef<TextField>(null)
-
-    async function addContact() {
-        const re = await Client.invoke("User.addContacts", {
-            targets: [inputTargetRef.current!.value],
-            token: data.access_token,
-        })
-
-        if (checkApiSuccessOrSncakbar(re, "添加失敗")) return
-        snackbar({
-            message: re.msg,
-            placement: "top",
-        })
-        EventBus.emit('ContactsList.updateContacts')
-
-        inputTargetRef.current!.value = ''
-        addContactDialogRef.current!.open = false
-    }
-
-    return (
-        <mdui-dialog close-on-overlay-click close-on-esc headline="添加对话" ref={addContactDialogRef}>
-            <mdui-text-field clearable label="对话 ID / 用户 ID / 用户名" ref={inputTargetRef as any} onKeyDown={(event) => {
-                if (event.key == 'Enter')
-                    addContact()
-            }}></mdui-text-field>
-            <mdui-button slot="action" variant="text" onClick={() => addContactDialogRef.current!.open = false}>取消</mdui-button>
-            <mdui-button slot="action" variant="text" onClick={() => addContact()}>添加</mdui-button>
-        </mdui-dialog>
-    )
-}

client/ui/dialog/ChatInfoDialog.tsx

@@ -1,92 +0,0 @@
-import React from 'react'
-import Chat from "../../api/client_data/Chat.ts"
-import useAsyncEffect from "../useAsyncEffect.ts"
-import Client from "../../api/Client.ts"
-import data from "../../Data.ts"
-import { Dialog } from "mdui"
-import Avatar from "../Avatar.tsx"
-import { checkApiSuccessOrSncakbar } from "../snackbar.ts"
-import User from "../../api/client_data/User.ts"
-import getUrlForFileByHash from "../../getUrlForFileByHash.ts"
-import openImageViewer from "../openImageViewer.ts"
-import EventBus from "../../EventBus.ts"
-
-interface Args extends React.HTMLAttributes<HTMLElement> {
-    chat: Chat
-    openChatFragment: (id: string) => void
-    chatInfoDialogRef: React.MutableRefObject<Dialog>
-    openUserInfoDialog: (user: User | string) => void
-    sharedFavouriteChats: Chat[]
-}
-
-export default function ChatInfoDialog({ chat, chatInfoDialogRef, openChatFragment, openUserInfoDialog, sharedFavouriteChats }: Args) {
-    const [chatInfo, setChatInfo] = React.useState(null as unknown as Chat)
-    const [favourited, setIsFavourited] = React.useState(false)
-
-    useAsyncEffect(async () => {
-        if (chat == null) return
-        const re = await Client.invoke("Chat.getInfo", {
-            token: data.access_token,
-            target: chat.id,
-        })
-        if (re.code != 200)
-            return checkApiSuccessOrSncakbar(re, '获取对话信息失败')
-
-        const info = re.data as Chat
-        setChatInfo(info)
-        setIsFavourited(sharedFavouriteChats.indexOf(info) != -1)
-    }, [chat, sharedFavouriteChats])
-    const avatarUrl = getUrlForFileByHash(chat?.avatar_file_hash as string)
-
-    return (
-        <mdui-dialog close-on-overlay-click close-on-esc ref={chatInfoDialogRef}>
-            <div style={{
-                display: 'flex',
-                alignItems: 'center',
-            }}>
-                <Avatar src={avatarUrl} text={chat?.nickname as string} style={{
-                    width: '50px',
-                    height: '50px',
-                }} onClick={() => avatarUrl && openImageViewer(avatarUrl)} />
-                <span style={{
-                    marginLeft: "15px",
-                    fontSize: '16.5px',
-                }}>{chat?.title}</span>
-            </div>
-            <mdui-divider style={{
-                marginTop: "10px",
-            }}></mdui-divider>
-
-            <mdui-list>
-                {
-                    chat?.type == 'private' &&
-                    <mdui-list-item icon="person" rounded onClick={async () => {
-                        const re = await Client.invoke("Chat.getAnotherUserIdFromPrivate", {
-                            token: data.access_token,
-                            target: chat.id,
-                        })
-                        if (re.code != 200)
-                            return checkApiSuccessOrSncakbar(re, '获取用户失败')
-
-                        openUserInfoDialog(re.data!.user_id as string)
-                    }}>用户详情</mdui-list-item>
-                }
-                <mdui-list-item icon={favourited ? "favorite_border" : "favorite"} rounded onClick={async () => {
-                    const re = await Client.invoke(favourited ? "User.removeContacts" : "User.addContacts", {
-                        token: data.access_token,
-                        targets: [
-                            chat.id
-                        ],
-                    })
-                    if (re.code != 200)
-                        checkApiSuccessOrSncakbar(re, favourited ? "取消收藏失败" : "收藏失败")
-                    EventBus.emit('ContactsList.updateContacts')
-                }}>{favourited ? '取消收藏' : '收藏对话'}</mdui-list-item>
-                <mdui-list-item icon="chat" rounded onClick={() => {
-                    chatInfoDialogRef.current!.open = false
-                    openChatFragment(chat.id)
-                }}>打开此对话</mdui-list-item>
-            </mdui-list>
-        </mdui-dialog>
-    )
-}

client/ui/dialog/CreateGroupDialog.tsx

@@ -1,54 +0,0 @@
-import * as React from 'react'
-import { Button, Dialog, TextField } from "mdui"
-import useEventListener from "../useEventListener.ts"
-import { checkApiSuccessOrSncakbar, snackbar } from "../snackbar.ts"
-import Client from "../../api/Client.ts"
-
-import * as CryptoJS from 'crypto-js'
-import data from "../../Data.ts"
-import EventBus from "../../EventBus.ts"
-
-interface Refs {
-    createGroupDialogRef: React.MutableRefObject<Dialog | null>
-}
-
-export default function CreateGroupDialog({
-    createGroupDialogRef,
-}: Refs) {
-    const inputGroupTitleRef = React.useRef<TextField>(null)
-    const inputGroupNameRef = React.useRef<TextField>(null)
-
-    async function createGroup() {
-        const re = await Client.invoke("Chat.createGroup", {
-            title: inputGroupTitleRef.current!.value,
-            name: inputGroupNameRef.current!.value,
-            token: data.access_token,
-        })
-
-        if (checkApiSuccessOrSncakbar(re, "添加失敗")) return
-        snackbar({
-            message: "创建成功!",
-            placement: "top",
-        })
-        EventBus.emit('ContactsList.updateContacts')
-
-        inputGroupTitleRef.current!.value = ''
-        inputGroupNameRef.current!.value = ''
-        createGroupDialogRef.current!.open = false
-    }
-
-    return (
-        <mdui-dialog close-on-overlay-click close-on-esc headline="创建群组" ref={createGroupDialogRef}>
-            <mdui-text-field clearable label="群组名称" ref={inputGroupTitleRef as any} onKeyDown={(event) => {
-                if (event.key == 'Enter')
-                    inputGroupNameRef.current!.click()
-            }}></mdui-text-field>
-            <mdui-text-field style={{ marginTop: "10px", }} clearable label="群组别名 (可选, 供查询)" ref={inputGroupNameRef as any} onKeyDown={(event) => {
-                if (event.key == 'Enter')
-                    createGroup()
-            }}></mdui-text-field>
-            <mdui-button slot="action" variant="text" onClick={() => createGroupDialogRef.current!.open = false}>取消</mdui-button>
-            <mdui-button slot="action" variant="text" onClick={() => createGroup()}>创建</mdui-button>
-        </mdui-dialog>
-    )
-}

client/ui/dialog/LoginDialog.tsx

@@ -1,55 +0,0 @@
-import * as React from 'react'
-import { Button, Dialog, TextField } from "mdui"
-import useEventListener from "../useEventListener.ts"
-import { checkApiSuccessOrSncakbar } from "../snackbar.ts"
-import Client from "../../api/Client.ts"
-
-import * as CryptoJS from 'crypto-js'
-import data from "../../Data.ts";
-
-interface Refs {
-    loginInputAccountRef: React.MutableRefObject<TextField | null>
-    loginInputPasswordRef: React.MutableRefObject<TextField | null>
-    loginDialogRef: React.MutableRefObject<Dialog | null>
-    registerDialogRef: React.MutableRefObject<Dialog | null>
-}
-
-export default function LoginDialog({
-    loginInputAccountRef,
-    loginInputPasswordRef,
-    loginDialogRef,
-    registerDialogRef
-}: Refs) {
-    const loginButtonRef = React.useRef<Button>(null)
-    const registerButtonRef = React.useRef<Button>(null)
-    useEventListener(registerButtonRef, 'click', () => registerDialogRef.current!.open = true)
-    useEventListener(loginButtonRef, 'click', async () => {
-        const account = loginInputAccountRef.current!.value
-        const password = loginInputPasswordRef.current!.value
-
-        const re = await Client.invoke("User.login", {
-            account: account,
-            password: CryptoJS.SHA256(password).toString(CryptoJS.enc.Hex),
-        })
-
-        if (checkApiSuccessOrSncakbar(re, "登录失败")) return
-
-        data.access_token = re.data!.access_token as string
-        data.refresh_token = re.data!.refresh_token as string
-        data.apply()
-        location.reload()
-    })
-    return (
-        <mdui-dialog headline="登录" ref={loginDialogRef}>
-
-            <mdui-text-field label="用户 ID / 用户名" ref={loginInputAccountRef as any}></mdui-text-field>
-            <div style={{
-                height: "10px",
-            }}></div>
-            <mdui-text-field label="密码" type="password" toggle-password ref={loginInputPasswordRef as any}></mdui-text-field>
-
-            <mdui-button slot="action" variant="text" ref={registerButtonRef}>注册</mdui-button>
-            <mdui-button slot="action" variant="text" ref={loginButtonRef}>登录</mdui-button>
-        </mdui-dialog>
-    )
-}

client/ui/dialog/MyProfileDialog.tsx

@@ -1,196 +0,0 @@
-import * as React from 'react'
-import { Button, Dialog, TextField, dialog } from "mdui"
-import useEventListener from "../useEventListener.ts"
-import { checkApiSuccessOrSncakbar, snackbar } from "../snackbar.ts"
-import Client from "../../api/Client.ts"
-
-import * as CryptoJS from 'crypto-js'
-import data from "../../Data.ts"
-import Avatar from "../Avatar.tsx"
-import User from "../../api/client_data/User.ts"
-import getUrlForFileByHash from "../../getUrlForFileByHash.ts"
-
-interface Refs {
-    myProfileDialogRef: React.MutableRefObject<Dialog>
-    user: User
-}
-
-export default function MyProfileDialog({
-    myProfileDialogRef,
-    user
-}: Refs) {
-    const editAvatarButtonRef = React.useRef<HTMLElement>(null)
-    const chooseAvatarFileRef = React.useRef<HTMLInputElement>(null)
-    useEventListener(editAvatarButtonRef, 'click', () => {
-        chooseAvatarFileRef.current!.value = ''
-        chooseAvatarFileRef.current!.click()
-    })
-    useEventListener(chooseAvatarFileRef, 'change', async (_e) => {
-        const file = chooseAvatarFileRef.current!.files?.[0] as File
-        if (file == null) return
-
-        let re = await Client.uploadFileLikeApi(
-            'avatar',
-            file
-        )
-        if (checkApiSuccessOrSncakbar(re, "上传失败")) return
-        const hash = re.data!.file_hash
-        re = await Client.invoke("User.setAvatar", {
-            token: data.access_token,
-            file_hash: hash
-        })
-
-        if (checkApiSuccessOrSncakbar(re, "修改失败")) return
-        snackbar({
-            message: "修改成功 (刷新页面以更新)",
-            placement: "top",
-        })
-    })
-
-    const userProfileEditDialogRef = React.useRef<Dialog>(null)
-    const editNickNameRef = React.useRef<TextField>(null)
-    const editUserNameRef = React.useRef<TextField>(null)
-
-    const accountSettingsDialogRef = React.useRef<Dialog>(null)
-
-    const editPasswordDialogRef = React.useRef<Dialog>(null)
-    const editPasswordOldInputRef = React.useRef<TextField>(null)
-    const editPasswordNewInputRef = React.useRef<TextField>(null)
-
-    return (<>
-        {
-            // 公用 - 資料卡
-        }
-        <mdui-dialog close-on-overlay-click close-on-esc ref={myProfileDialogRef}>
-            <div style={{
-                display: 'flex',
-                alignItems: 'center',
-            }}>
-                <Avatar src={getUrlForFileByHash(user?.avatar_file_hash)} text={user?.nickname} style={{
-                    width: '50px',
-                    height: '50px',
-                }} />
-                <span style={{
-                    marginLeft: "15px",
-                    fontSize: '16.5px',
-                }}>{user?.nickname}</span>
-            </div>
-            <mdui-divider style={{
-                marginTop: "10px",
-            }}></mdui-divider>
-
-            <mdui-list>
-                <mdui-list-item icon="edit" rounded onClick={() => userProfileEditDialogRef.current!.open = true}>编辑资料</mdui-list-item>
-                <mdui-list-item icon="settings" rounded onClick={() => accountSettingsDialogRef.current!.open = true}>账号设定</mdui-list-item>
-                {/*
-                <mdui-list-item icon="lock" rounded>隱私設定</mdui-list-item>
-                */}
-                <mdui-list-item icon="logout" rounded onClick={() => dialog({
-                    headline: "退出登录",
-                    description: "请确保在退出登录前, 设定了用户名或者已经记录下了用户 ID, 以免无法登录账号",
-                    actions: [
-                        {
-                            text: "取消",
-                            onClick: () => {
-                                return true
-                            },
-                        },
-                        {
-                            text: "确定",
-                            onClick: () => {
-                                data.refresh_token = ''
-                                data.access_token = ''
-                                data.apply()
-                                location.reload()
-                                return true
-                            },
-                        }
-                    ],
-                })}>退出登录</mdui-list-item>
-            </mdui-list>
-        </mdui-dialog>
-        {
-            // 账号设定
-        }
-        <mdui-dialog close-on-overlay-click close-on-esc ref={accountSettingsDialogRef} headline="账号设定">
-            <mdui-list-item icon="edit" rounded onClick={() => editPasswordDialogRef.current!.open = true}>修改密码</mdui-list-item>
-            <mdui-button slot="action" variant="text" onClick={() => accountSettingsDialogRef.current!.open = false}>关闭</mdui-button>
-        </mdui-dialog>
-        <mdui-dialog close-on-overlay-click close-on-esc ref={editPasswordDialogRef} headline="修改密码">
-            <mdui-text-field label="旧密码" type="password" toggle-password ref={editPasswordOldInputRef as any}></mdui-text-field>
-            <div style={{
-                height: "10px",
-            }}></div>
-            <mdui-text-field label="新密码" type="password" toggle-password ref={editPasswordNewInputRef as any}></mdui-text-field>
-
-            <mdui-button slot="action" variant="text" onClick={() => editPasswordDialogRef.current!.open = false}>关闭</mdui-button>
-            <mdui-button slot="action" variant="text" onClick={async () => {
-                const re = await Client.invoke("User.resetPassword", {
-                    token: data.access_token,
-                    old_password: CryptoJS.SHA256(editPasswordOldInputRef.current?.value || '').toString(CryptoJS.enc.Hex),
-                    new_password: CryptoJS.SHA256(editPasswordNewInputRef.current?.value || '').toString(CryptoJS.enc.Hex),
-                })
-
-                if (checkApiSuccessOrSncakbar(re, "修改失败")) return
-                snackbar({
-                    message: "修改成功 (其他客户端需要重新登录)",
-                    placement: "top",
-                })
-                data.access_token = re.data!.access_token as string
-                data.refresh_token = re.data!.refresh_token as string
-                data.apply()
-                editPasswordDialogRef.current!.open = false
-            }}>确定</mdui-button>
-        </mdui-dialog>
-        {
-            // 個人資料編輯
-        }
-        <mdui-dialog close-on-overlay-click close-on-esc ref={userProfileEditDialogRef}>
-            <div style={{
-                display: "none"
-            }}>
-                <input type="file" name="选择头像" ref={chooseAvatarFileRef}
-                    accept="image/*" />
-            </div>
-
-            <div style={{
-                display: 'flex',
-                alignItems: 'center',
-            }}>
-                <Avatar src={getUrlForFileByHash(user?.avatar_file_hash)} text={user?.nickname} avatarRef={editAvatarButtonRef} style={{
-                    width: '50px',
-                    height: '50px',
-                }} />
-                <mdui-text-field variant="outlined" placeholder="昵称" ref={editNickNameRef as any} style={{
-                    marginLeft: "15px",
-                }} value={user?.nickname}></mdui-text-field>
-            </div>
-            <mdui-divider style={{
-                marginTop: "10px",
-            }}></mdui-divider>
-
-            <mdui-text-field style={{ marginTop: "10px", }} variant="outlined" label="用户 ID" value={user?.id || ''} readonly onClick={(e) => {
-                const input = e.target as HTMLInputElement
-                input.select()
-                input.setSelectionRange(0, 1145141919810)
-            }}></mdui-text-field>
-            <mdui-text-field style={{ marginTop: "20px", }} variant="outlined" label="用户名" value={user?.username || ''} ref={editUserNameRef as any}></mdui-text-field>
-
-            <mdui-button slot="action" variant="text" onClick={() => userProfileEditDialogRef.current!.open = false}>取消</mdui-button>
-            <mdui-button slot="action" variant="text" onClick={async () => {
-                const re = await Client.invoke("User.updateProfile", {
-                    token: data.access_token,
-                    nickname: editNickNameRef.current?.value,
-                    username: editUserNameRef.current?.value,
-                })
-
-                if (checkApiSuccessOrSncakbar(re, "修改失败")) return
-                snackbar({
-                    message: "修改成功 (刷新页面以更新)",
-                    placement: "top",
-                })
-                userProfileEditDialogRef.current!.open = false
-            }}>更新</mdui-button>
-        </mdui-dialog>
-    </>)
-}

client/ui/dialog/RegisterDialog.tsx

@@ -1,67 +0,0 @@
-import * as React from 'react'
-import { Button, Dialog, TextField } from "mdui";
-import useEventListener from "../useEventListener.ts";
-import Client from "../../api/Client.ts";
-import { checkApiSuccessOrSncakbar, snackbar } from "../snackbar.ts";
-
-import * as CryptoJS from 'crypto-js'
-
-interface Refs {
-    loginInputAccountRef: React.MutableRefObject<TextField | null>
-    loginInputPasswordRef: React.MutableRefObject<TextField | null>
-    registerInputUserNameRef: React.MutableRefObject<TextField | null>
-    registerInputNickNameRef: React.MutableRefObject<TextField | null>
-    registerInputPasswordRef: React.MutableRefObject<TextField | null>
-    registerDialogRef: React.MutableRefObject<Dialog | null>
-}
-
-export default function RegisterDialog({
-    loginInputAccountRef,
-    loginInputPasswordRef,
-    registerInputUserNameRef,
-    registerInputNickNameRef,
-    registerInputPasswordRef,
-    registerDialogRef
-}: Refs) {
-    const registerBackButtonRef = React.useRef<Button>(null)
-    const doRegisterButtonRef = React.useRef<Button>(null)
-    useEventListener(registerBackButtonRef, 'click', () => registerDialogRef.current!.open = false)
-    useEventListener(doRegisterButtonRef, 'click', async () => {
-        const username = registerInputUserNameRef.current!.value
-        const re = await Client.invoke("User.register", {
-            username: username,
-            nickname: registerInputNickNameRef.current!.value,
-            password: CryptoJS.SHA256(registerInputPasswordRef.current!.value).toString(CryptoJS.enc.Hex),
-        })
-
-        if (checkApiSuccessOrSncakbar(re, "注册失败")) return
-        loginInputAccountRef.current!.value = username == "" ? re.data!.userid as string : username
-        loginInputPasswordRef.current!.value = registerInputPasswordRef.current!.value
-
-        registerInputUserNameRef.current!.value = ""
-        registerInputNickNameRef.current!.value = ""
-        registerInputPasswordRef.current!.value = ""
-        registerDialogRef.current!.open = false
-        snackbar({
-            message: "注册成功!",
-            placement: "top",
-        })
-    })
-    return (
-        <mdui-dialog headline="注册" ref={registerDialogRef}>
-
-            <mdui-text-field label="用户名 (可选)" ref={registerInputUserNameRef as any}></mdui-text-field>
-            <div style={{
-                height: "10px",
-            }}></div>
-            <mdui-text-field label="昵称" ref={registerInputNickNameRef as any}></mdui-text-field>
-            <div style={{
-                height: "10px",
-            }}></div>
-            <mdui-text-field label="密码" type="password" toggle-password ref={registerInputPasswordRef as any}></mdui-text-field>
-
-            <mdui-button slot="action" variant="text" ref={registerBackButtonRef}>返回</mdui-button>
-            <mdui-button slot="action" variant="text" ref={doRegisterButtonRef}>注册</mdui-button>
-        </mdui-dialog>
-    )
-}

client/ui/dialog/UserProfileDialog.tsx

@@ -1,63 +0,0 @@
-import * as React from 'react'
-import { Dialog } from "mdui"
-import { checkApiSuccessOrSncakbar } from "../snackbar.ts"
-import Client from "../../api/Client.ts"
-
-import data from "../../Data.ts"
-import Avatar from "../Avatar.tsx"
-import User from "../../api/client_data/User.ts"
-import getUrlForFileByHash from "../../getUrlForFileByHash.ts"
-import openImageViewer from "../openImageViewer.ts"
-import Chat from "../../api/client_data/Chat.ts"
-
-interface Refs {
-    userProfileDialogRef: React.MutableRefObject<Dialog>
-    chatInfoDialogRef: React.MutableRefObject<Dialog>
-    openChatFragment: (id: string) => void
-    user: User
-}
-
-export default function UserProfileDialog({
-    userProfileDialogRef,
-    chatInfoDialogRef,
-    openChatFragment,
-    user
-}: Refs) {
-    const avatarUrl = getUrlForFileByHash(user?.avatar_file_hash)
-    return (
-        <mdui-dialog close-on-overlay-click close-on-esc ref={userProfileDialogRef}>
-            <div style={{
-                display: 'flex',
-                alignItems: 'center',
-            }}>
-                <Avatar src={avatarUrl} text={user?.nickname} style={{
-                    width: '50px',
-                    height: '50px',
-                }} onClick={() => avatarUrl && openImageViewer(avatarUrl)} />
-                <span style={{
-                    marginLeft: "15px",
-                    fontSize: '16.5px',
-                }}>{user?.nickname}</span>
-            </div>
-            <mdui-divider style={{
-                marginTop: "10px",
-            }}></mdui-divider>
-
-            <mdui-list>
-                {/* <mdui-list-item icon="edit" rounded>设置备注</mdui-list-item> */}
-                <mdui-list-item icon="chat" rounded onClick={async () => {
-                    const re = await Client.invoke("Chat.getIdForPrivate", {
-                        token: data.access_token,
-                        target: user.id,
-                    })
-                    if (re.code != 200)
-                        return checkApiSuccessOrSncakbar(re, '获取对话失败')
-                    
-                    openChatFragment(re.data!.chat_id as string)
-                    userProfileDialogRef.current!.open = false
-                    chatInfoDialogRef.current!.open = false
-                }}>对话</mdui-list-item>
-            </mdui-list>
-        </mdui-dialog>
-    )
-}

client/ui/isMobileUI.ts

@@ -1,3 +0,0 @@
-export default function isMobileUI() {
-    return new URL(location.href).searchParams.get('mobile') == 'true'
-}

client/ui/main-page/AddFavourtieChatDialog.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react'
+import { Button, Dialog, snackbar, TextField } from "mdui"
+import { data } from 'react-router'
+import { useContextSelector } from 'use-context-selector'
+import MainSharedContext, { Shared } from '../MainSharedContext'
+import showSnackbar from '../../utils/showSnackbar'
+import { CallbackError } from 'lingchair-client-protocol'
+import useEventListener from '../../utils/useEventListener'
+
+export default function AddFavourtieChatDialog({ ...props }: { open: boolean } & React.HTMLAttributes<Dialog>) {
+    const shared = useContextSelector(MainSharedContext, (context: Shared) => ({
+        myProfileCache: context.myProfileCache,
+        setShowAddFavourtieChatDialog: context.setShowAddFavourtieChatDialog,
+    }))
+
+    const dialogRef = React.useRef<Dialog>()
+    useEventListener(dialogRef, 'closed', () => shared.setShowAddFavourtieChatDialog(false))
+
+    const inputTargetRef = React.useRef<TextField>(null)
+
+    async function addFavouriteChat() {
+        try {
+            shared.myProfileCache!.addFavouriteChatsOrThrow([inputTargetRef.current!.value])
+            inputTargetRef.current!.value = ''
+            showSnackbar({
+                message: '添加成功!'
+            })
+        } catch (e) {
+            if (e instanceof CallbackError)
+                    showSnackbar({
+                        message: '添加收藏对话失败: ' + e.message
+                    })
+        }
+    }
+
+    return (
+        <mdui-dialog close-on-overlay-click close-on-esc headline="添加收藏对话" {...props} ref={dialogRef}>
+            <mdui-text-field clearable label="对话 / 用户 (ID 或 别名)" ref={inputTargetRef} onKeyDown={(event: KeyboardEvent) => {
+                if (event.key == 'Enter')
+                    addFavouriteChat()
+            }}></mdui-text-field>
+            <mdui-button slot="action" variant="text" onClick={() => shared.setShowAddFavourtieChatDialog(false)}>取消</mdui-button>
+            <mdui-button slot="action" variant="text" onClick={() => addFavouriteChat()}>添加</mdui-button>
+        </mdui-dialog>
+    )
+}

client/ui/main-page/AllChatsList.tsx

@@ -0,0 +1,80 @@
+import { TextField } from "mdui"
+import React from "react"
+import AllChatsListItem from "./AllChatsListItem.tsx"
+import useEventListener from "../../utils/useEventListener.ts"
+import useAsyncEffect from "../../utils/useAsyncEffect.ts"
+import { CallbackError, Chat, UserMySelf } from "lingchair-client-protocol"
+import getClient from "../../getClient.ts"
+import showSnackbar from "../../utils/showSnackbar.ts"
+import isMobileUI from "../../utils/isMobileUI.ts"
+import { useContextSelector } from "use-context-selector"
+import MainSharedContext, { Shared } from "../MainSharedContext.ts"
+
+export default function AllChatsList({ ...props }: React.HTMLAttributes<HTMLElement>) {
+    const shared = useContextSelector(MainSharedContext, (context: Shared) => ({
+        myProfileCache: context.myProfileCache,
+        functions_lazy: context.functions_lazy,
+    }))
+
+    const searchRef = React.useRef<HTMLElement>(null)
+    const [searchText, setSearchText] = React.useState('')
+    const [allChatsList, setAllChatsList] = React.useState<Chat[]>([])
+
+    useEventListener(searchRef, 'input', (e) => {
+        setSearchText((e.target as unknown as TextField).value)
+    })
+
+    useAsyncEffect(async () => {
+        async function updateAllChats() {
+            try {
+                setAllChatsList(await shared.myProfileCache!.getMyAllChatsOrThrow())
+            } catch (e) {
+                if (e instanceof CallbackError)
+                    if (e.code != 401 && e.code != 400)
+                        showSnackbar({
+                            message: '获取所有对话失败: ' + e.message
+                        })
+            }
+        }
+        updateAllChats()
+
+        shared.functions_lazy.current.updateAllChats = updateAllChats
+        
+        return () => {
+        }
+    })
+
+    return <mdui-list style={{
+        overflowY: 'auto',
+        paddingRight: '10px',
+        paddingLeft: '10px',
+        paddingTop: '0',
+        height: '100%',
+        width: '100%',
+        ...props?.style,
+    }} {...props}>
+        <mdui-text-field icon="search" type="search" clearable ref={searchRef} variant="outlined" placeholder="搜索..." style={{
+            paddingTop: '12px',
+            paddingBottom: '13px',
+            position: 'sticky',
+            top: '0',
+            backgroundColor: 'rgb(var(--mdui-color-background))',
+            zIndex: '10',
+        }}></mdui-text-field>
+        {
+            allChatsList.filter((chat) =>
+                searchText == '' ||
+                chat.getTitle().includes(searchText) ||
+                chat.getId().includes(searchText)
+            ).map((v) =>
+                <AllChatsListItem
+                    active={isMobileUI() ? false : currentChatId == v.getId()}
+                    key={v.getId()}
+                    onClick={() => {
+                        openChatInfoDialog(v)
+                    }}
+                    chat={v} />
+            )
+        }
+    </mdui-list>
+}

client/ui/main-page/AllChatsListItem.tsx

@@ -1,19 +1,21 @@
-import Chat from "../../api/client_data/Chat.ts"
-import getUrlForFileByHash from "../../getUrlForFileByHash.ts"
+import { $ } from "mdui/jq"
 import Avatar from "../Avatar.tsx"
 import React from 'react'
+import { Chat } from "lingchair-client-protocol"
+import getClient from "../../getClient.ts"
 
 interface Args extends React.HTMLAttributes<HTMLElement> {
-    contact: Chat
+    chat: Chat
     active?: boolean
 }
 
-export default function ContactsListItem({ contact, ...prop }: Args) {
-    const { id, title, avatar_file_hash } = contact
+export default function AllChatsListItem({ chat, active, ...prop }: Args) {
+    const title = chat.getTitle()
+
     const ref = React.useRef<HTMLElement>(null)
 
     return (
-        <mdui-list-item ref={ref} rounded style={{
+        <mdui-list-item active={active} ref={ref} rounded style={{
             marginTop: '3px',
             marginBottom: '3px',
             width: '100%',
@@ -21,7 +23,7 @@ export default function ContactsListItem({ contact, ...prop }: Args) {
             <span style={{
                 width: "100%",
             }}>{title}</span>
-            <Avatar src={getUrlForFileByHash(avatar_file_hash as string)} text={title} slot="icon" />
+            <Avatar src={getClient().getUrlForFileByHash(chat.getAvatarFileHash() as string)} text={title} slot="icon" />
         </mdui-list-item>
     )
 }

client/ui/main-page/FavouriteChatsList.tsx

@@ -0,0 +1,170 @@
+import React from "react"
+import FavouriteChatsListItem from "./FavouriteChatsListItem.tsx"
+import { dialog, TextField } from "mdui"
+import useAsyncEffect from "../../utils/useAsyncEffect.ts"
+import useEventListener from "../../utils/useEventListener.ts"
+import { CallbackError, Chat, UserMySelf } from "lingchair-client-protocol"
+import showSnackbar from "../../utils/showSnackbar.ts"
+import getClient from "../../getClient.ts"
+import { useContextSelector } from "use-context-selector"
+import MainSharedContext, { Shared } from "../MainSharedContext.ts"
+import isMobileUI from "../../utils/isMobileUI.ts"
+
+export default function FavouriteChatsList({ ...props }: React.HTMLAttributes<HTMLElement>) {
+    const shared = useContextSelector(MainSharedContext, (context: Shared) => ({
+        myProfileCache: context.myProfileCache,
+        setShowAddFavourtieChatDialog: context.setShowAddFavourtieChatDialog,
+        functions_lazy: context.functions_lazy,
+        currentSelectedChatId: context.currentSelectedChatId,
+        values_lazy: context.values_lazy,
+    }))
+
+    const searchRef = React.useRef<HTMLElement>(null)
+    const [isMultiSelecting, setIsMultiSelecting] = React.useState(false)
+    const [searchText, setSearchText] = React.useState('')
+    const [favouriteChatsList, setFavouriteChatsList] = React.useState<Chat[]>([])
+    const [checkedList, setCheckedList] = React.useState<{ [key: string]: boolean }>({})
+
+    useEventListener(searchRef, 'input', (e) => {
+        setSearchText((e.target as unknown as TextField).value)
+    })
+
+    useAsyncEffect(async () => {
+        async function updateFavouriteChats() {
+            try {
+                const ls = await shared.myProfileCache!.getMyFavouriteChatsOrThrow()
+                setFavouriteChatsList(ls)
+                shared.favourite_chats
+            } catch (e) {
+                if (e instanceof CallbackError)
+                    if (e.code != 401 && e.code != 400)
+                        showSnackbar({
+                            message: '获取收藏对话失败: ' + e.message
+                        })
+                console.log(e)
+            }
+        }
+        updateFavouriteChats()
+
+        shared.functions_lazy.current.updateFavouriteChats = updateFavouriteChats
+
+        return () => {
+        }
+    }, [shared.myProfileCache])
+
+    return <mdui-list style={{
+        overflowY: 'auto',
+        paddingLeft: '10px',
+        paddingRight: '10px',
+        paddingTop: '0',
+        height: '100%',
+        width: '100%',
+        ...props?.style,
+    }} {...props}>
+        <div style={{
+            position: 'sticky',
+            top: '0',
+            backgroundColor: 'rgb(var(--mdui-color-background))',
+            zIndex: '10',
+        }}>
+            <mdui-text-field icon="search" type="search" clearable ref={searchRef} variant="outlined" placeholder="搜索..." style={{
+                paddingTop: '12px',
+            }}></mdui-text-field>
+            <mdui-list-item rounded style={{
+                marginTop: '13px',
+                width: '100%',
+            }} icon="person_add" onClick={() => shared.setShowAddFavourtieChatDialog(true)}>添加收藏</mdui-list-item>
+            <mdui-list-item rounded style={{
+                width: '100%',
+            }} icon="refresh" onClick={() => shared.functions_lazy.current.updateFavouriteChats()}>刷新列表</mdui-list-item>
+            <mdui-list-item rounded style={{
+                width: '100%',
+            }} icon={isMultiSelecting ? "done" : "edit"} onClick={() => {
+                if (isMultiSelecting)
+                    setCheckedList({})
+                setIsMultiSelecting(!isMultiSelecting)
+            }}>{isMultiSelecting ? "关闭多选" : "多选模式"}</mdui-list-item>
+            {
+                isMultiSelecting && <>
+                    <mdui-list-item rounded style={{
+                        width: '100%',
+                    }} icon="delete" onClick={() => dialog({
+                        headline: "移除收藏对话",
+                        description: "确定将所选对话从收藏中移除吗? 这不会导致对话被删除.",
+                        closeOnEsc: true,
+                        closeOnOverlayClick: true,
+                        actions: [
+                            {
+                                text: "取消",
+                                onClick: () => {
+                                    return true
+                                },
+                            },
+                            {
+                                text: "确定",
+                                onClick: async () => {
+                                    const ls = Object.keys(checkedList).filter((chatId) => checkedList[chatId] == true)
+
+                                    try {
+                                        shared.myProfileCache!.removeFavouriteChatsOrThrow(ls)
+
+                                        setCheckedList({})
+                                        setIsMultiSelecting(false)
+
+                                        shared.functions_lazy.current.updateFavouriteChats()
+
+                                        showSnackbar({
+                                            message: "已删除所选",
+                                            action: "撤销操作",
+                                            onActionClick: async () => {
+                                                try {
+                                                    shared.myProfileCache!.addFavouriteChatsOrThrow(ls)
+                                                } catch (e) {
+                                                    if (e instanceof CallbackError)
+                                                        showSnackbar({
+                                                            message: '撤销删除收藏失败: ' + e.message
+                                                        })
+                                                }
+                                                shared.functions_lazy.current.updateFavouriteChats()
+                                            }
+                                        })
+                                    } catch (e) {
+                                        if (e instanceof CallbackError)
+                                            showSnackbar({
+                                                message: '删除收藏对话失败: ' + e.message
+                                            })
+                                    }
+                                },
+                            }
+                        ],
+                    })}>删除所选</mdui-list-item>
+                </>
+            }
+            <div style={{
+                height: "10px",
+            }}></div>
+        </div>
+
+        {
+            favouriteChatsList.filter((chat) =>
+                searchText == '' ||
+                chat.getTitle().includes(searchText) ||
+                chat.getId().includes(searchText)
+            ).map((v) =>
+                <FavouriteChatsListItem
+                    active={isMultiSelecting ? checkedList[v.getId()] == true : (isMobileUI() ? false : shared.currentSelectedChatId == v.getId())}
+                    onClick={() => {
+                        if (isMultiSelecting)
+                            setCheckedList({
+                                ...checkedList,
+                                [v.getId()]: !checkedList[v.getId()],
+                            })
+                        else
+                            openChatInfoDialog(v)
+                    }}
+                    key={v.getId()}
+                    chat={v} />
+            )
+        }
+    </mdui-list>
+}

client/ui/main-page/FavouriteChatsListItem.tsx

@@ -0,0 +1,28 @@
+import { Chat } from "lingchair-client-protocol"
+import Avatar from "../Avatar.tsx"
+import React from 'react'
+import getClient from "../../getClient.ts"
+
+interface Args extends React.HTMLAttributes<HTMLElement> {
+    chat: Chat
+    active?: boolean
+}
+
+export default function FavouriteChatsListItem({ chat, active, ...prop }: Args) {
+    const title = chat.getTitle()
+
+    const ref = React.useRef<HTMLElement>(null)
+
+    return (
+        <mdui-list-item active={active} ref={ref} rounded style={{
+            marginTop: '3px',
+            marginBottom: '3px',
+            width: '100%',
+        }} {...prop}>
+            <span style={{
+                width: "100%",
+            }}>{title}</span>
+            <Avatar src={getClient().getUrlForFileByHash(chat.getAvatarFileHash() as string)} text={title} slot="icon" />
+        </mdui-list-item>
+    )
+}

client/ui/main-page/LoginDialog.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react'
+import { Dialog, TextField } from "mdui"
+
+import performAuth from '../../performAuth.ts'
+import showSnackbar from '../../utils/showSnackbar.ts'
+import MainSharedContext, { Shared } from '../MainSharedContext.ts'
+import { useContextSelector } from 'use-context-selector'
+import useEventListener from '../../utils/useEventListener.ts'
+
+export default function LoginDialog({ ...props }: { open: boolean } & React.HTMLAttributes<Dialog>) {
+    const shared = useContextSelector(MainSharedContext, (context: Shared) => ({
+        setShowRegisterDialog: context.setShowRegisterDialog,
+        setShowLoginDialog: context.setShowLoginDialog
+    }))
+
+    const dialogRef = React.useRef<Dialog>()
+    useEventListener(dialogRef, 'closed', () => shared.setShowLoginDialog(false))
+
+    const loginInputAccountRef = React.useRef<TextField>(null)
+    const loginInputPasswordRef = React.useRef<TextField>(null)
+
+    return (
+        <mdui-dialog {...props} headline="登录" ref={dialogRef}>
+
+            <mdui-text-field label="用户 ID / 用户名" ref={loginInputAccountRef}></mdui-text-field>
+            <div style={{
+                height: "10px",
+            }}></div>
+            <mdui-text-field label="密码" type="password" toggle-password ref={loginInputPasswordRef}></mdui-text-field>
+
+            <mdui-button slot="action" variant="text" onClick={() => shared.setShowRegisterDialog(true)}>注册</mdui-button>
+            <mdui-button slot="action" variant="text" onClick={async () => {
+                const account = loginInputAccountRef.current!.value
+                const password = loginInputPasswordRef.current!.value
+
+                try {
+                    await performAuth({
+                        account: account,
+                        password: password,
+                    })
+                    location.reload()
+                } catch (e) {
+                    if (e instanceof Error)
+                        showSnackbar({ message: '登录失败: ' + e.message })
+                }
+            }}>登录</mdui-button>
+        </mdui-dialog>
+    )
+}

client/ui/main-page/RecentChatsList.tsx

@@ -0,0 +1,83 @@
+import { TextField } from "mdui"
+import RecentsListItem from "./RecentsListItem.tsx"
+import React from "react"
+import RecentChat from "lingchair-client-protocol/RecentChat.ts"
+import { data } from "react-router"
+import isMobileUI from "../../utils/isMobileUI.ts"
+import useAsyncEffect from "../../utils/useAsyncEffect.ts"
+import useEventListener from "../../utils/useEventListener.ts"
+import { CallbackError } from "lingchair-client-protocol"
+import { useContextSelector } from "use-context-selector"
+import showSnackbar from "../../utils/showSnackbar.ts"
+import MainSharedContext, { Shared } from "../MainSharedContext.ts"
+
+export default function RecentChatsList({ ...props }: React.HTMLAttributes<HTMLElement>) {
+    const shared = useContextSelector(MainSharedContext, (context: Shared) => ({
+        myProfileCache: context.myProfileCache,
+        functions_lazy: context.functions_lazy,
+        currentSelectedChatId: context.currentSelectedChatId,
+    }))
+
+    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() {
+            try {
+                setRecentsList(await shared.myProfileCache!.getMyRecentChats())
+            } catch (e) {
+                if (e instanceof CallbackError)
+                    if (e.code != 401 && e.code != 400)
+                        showSnackbar({
+                            message: '获取最近对话失败: ' + e.message
+                        })
+            }
+        }
+        updateRecents()
+
+        shared.functions_lazy.current.updateRecentChats = updateRecents
+
+        const id = setInterval(() => updateRecents(), 15 * 1000)
+        return () => {
+            clearInterval(id)
+        }
+    })
+
+    return <mdui-list style={{
+        overflowY: 'auto',
+        paddingRight: '10px',
+        paddingLeft: '10px',
+        paddingTop: '0',
+        height: '100%',
+        width: '100%',
+        ...props?.style,
+    }} {...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.getTitle().includes(searchText) ||
+                chat.getId().includes(searchText) ||
+                chat.getContent().includes(searchText)
+            ).map((v) =>
+                <RecentsListItem
+                    active={isMobileUI() ? false : shared.currentSelectedChatId == v.getId()}
+                    openChatFragment={() => openChatFragment(v.getId())}
+                    key={v.getId()}
+                    recentChat={v} />
+            )
+        }
+    </mdui-list>
+}

client/ui/main-page/RecentsListItem.tsx

@@ -1,17 +1,16 @@
 import { $ } from "mdui/jq"
-import RecentChat from "../../api/client_data/RecentChat.ts"
 import Avatar from "../Avatar.tsx"
 import React from 'react'
-import getUrlForFileByHash from "../../getUrlForFileByHash.ts"
+import getClient from "../../getClient.ts"
+import RecentChat from "lingchair-client-protocol/RecentChat.ts"
 
 interface Args extends React.HTMLAttributes<HTMLElement> {
     recentChat: RecentChat
-    openChatFragment: (id: string) => void
     active?: boolean
 }
 
-export default function RecentsListItem({ recentChat, openChatFragment, active }: Args) {
-    const { id, title, avatar_file_hash, content } = recentChat
+export default function RecentsListItem({ recentChat, active, ...props }: Args) {
+    const { id, title, avatar_file_hash, content } = recentChat.bean
 
     const itemRef = React.useRef<HTMLElement>(null)
     React.useEffect(() => {
@@ -21,9 +20,9 @@ export default function RecentsListItem({ recentChat, openChatFragment, active }
         <mdui-list-item rounded style={{
             marginTop: '3px',
             marginBottom: '3px',
-        }} onClick={() => openChatFragment(id)} active={active} ref={itemRef}>
+        }} active={active} ref={itemRef} {...props}>
             {title}
-            <Avatar src={getUrlForFileByHash(avatar_file_hash as string)} text={title} slot="icon" />
+            <Avatar src={getClient().getUrlForFileByHash(avatar_file_hash!)} text={title} slot="icon" />
             <span slot="description"
                 style={{
                     width: "100%",

client/ui/main-page/RegisterDialog.tsx

@@ -0,0 +1,76 @@
+import * as React from 'react'
+import { Button, Dialog, TextField } from "mdui"
+import MainSharedContext, { Shared } from '../MainSharedContext'
+import showSnackbar from '../../utils/showSnackbar'
+import showCircleProgressDialog from '../showCircleProgressDialog'
+import getClient from '../../getClient'
+import performAuth from '../../performAuth'
+import { useContextSelector } from 'use-context-selector'
+import useEventListener from '../../utils/useEventListener'
+
+export default function RegisterDialog({ ...props }: { open: boolean } & React.HTMLAttributes<Dialog>) {
+    const shared = useContextSelector(MainSharedContext, (context: Shared) => ({
+        setShowRegisterDialog: context.setShowRegisterDialog
+    }))
+
+    const dialogRef = React.useRef<Dialog>()
+    useEventListener(dialogRef, 'closed', () => shared.setShowRegisterDialog(false))
+
+    const registerInputUserNameRef = React.useRef<TextField>(null)
+    const registerInputNickNameRef = React.useRef<TextField>(null)
+    const registerInputPasswordRef = React.useRef<TextField>(null)
+
+    return (
+        <mdui-dialog headline="注册" {...props} ref={dialogRef}>
+
+            <mdui-text-field label="用户名 (可选)" ref={registerInputUserNameRef}></mdui-text-field>
+            <div style={{
+                height: "10px",
+            }}></div>
+            <mdui-text-field label="昵称" ref={registerInputNickNameRef}></mdui-text-field>
+            <div style={{
+                height: "10px",
+            }}></div>
+            <mdui-text-field label="密码" type="password" toggle-password ref={registerInputPasswordRef}></mdui-text-field>
+
+            <mdui-button slot="action" variant="text" onClick={() => shared.setShowRegisterDialog(false)}>返回</mdui-button>
+            <mdui-button slot="action" variant="text" onClick={async () => {
+                const waitingForRegister = showCircleProgressDialog("注册中...")
+
+                const username = registerInputUserNameRef.current!.value
+
+                let user_id: string
+                try {
+                    user_id = await getClient().registerOrThrow({
+                        username: username,
+                        nickname: registerInputNickNameRef.current!.value,
+                        password: registerInputPasswordRef.current!.value,
+                    })
+                } catch (e) {
+                    user_id = ''
+                    if (e instanceof Error) {
+                        waitingForRegister.open = false
+                        showSnackbar({ message: '注册失败: ' + e.message })
+                        return
+                    }
+                }
+                waitingForRegister.open = false
+
+                const waitingForLogin = showCircleProgressDialog("登录中...")
+
+                try {
+                    await performAuth({
+                        account: username == '' ? username : user_id,
+                        password: registerInputPasswordRef.current!.value,
+                    })
+                    location.reload()
+                } catch (e) {
+                    if (e instanceof Error) {
+                        showSnackbar({ message: '登录失败: ' + e.message })
+                    }
+                }
+                waitingForLogin.open = false
+            }}>注册</mdui-button>
+        </mdui-dialog>
+    )
+}

client/ui/main/ContactsList.tsx

@@ -1,162 +0,0 @@
-import React from "react"
-import ContactsListItem from "./ContactsListItem.tsx"
-import useEventListener from "../useEventListener.ts"
-import { dialog, Dialog, TextField } from "mdui"
-import Client from "../../api/Client.ts"
-import data from "../../Data.ts"
-import { checkApiSuccessOrSncakbar, snackbar } from "../snackbar.ts"
-import Chat from "../../api/client_data/Chat.ts"
-import EventBus from "../../EventBus.ts"
-
-interface Args extends React.HTMLAttributes<HTMLElement> {
-    display: boolean
-    openChatInfoDialog: (chat: Chat) => void
-    addContactDialogRef: React.MutableRefObject<Dialog>
-    createGroupDialogRef: React.MutableRefObject<Dialog>
-    setSharedFavouriteChats: React.Dispatch<React.SetStateAction<Chat[]>>
-}
-
-export default function ContactsList({
-    display,
-    openChatInfoDialog,
-    addContactDialogRef,
-    createGroupDialogRef,
-    setSharedFavouriteChats,
-    ...props
-}: Args) {
-    const searchRef = React.useRef<HTMLElement>(null)
-    const [isMultiSelecting, setIsMultiSelecting] = React.useState(false)
-    const [searchText, setSearchText] = React.useState('')
-    const [contactsList, setContactsList] = React.useState<Chat[]>([])
-    const [checkedList, setCheckedList] = React.useState<{ [key: string]: boolean }>({})
-
-    useEventListener(searchRef, 'input', (e) => {
-        setSearchText((e.target as unknown as TextField).value)
-    })
-
-    React.useEffect(() => {
-        async function updateContacts() {
-            const re = await Client.invoke("User.getMyContacts", {
-                token: data.access_token,
-            })
-            if (re.code != 200)
-                return checkApiSuccessOrSncakbar(re, "获取所有对话列表失败")
-
-            const ls = re.data!.contacts_list as Chat[]
-            setContactsList(ls)
-            setSharedFavouriteChats(ls)
-        }
-        updateContacts()
-        EventBus.on('ContactsList.updateContacts', () => updateContacts())
-        return () => {
-            EventBus.off('ContactsList.updateContacts')
-        }
-        // 警告: 不添加 deps 導致無限執行
-    }, []) 
-
-    return <mdui-list style={{
-        overflowY: 'auto',
-        paddingLeft: '10px',
-        paddingRight: '10px',
-        display: display ? undefined : 'none',
-        height: '100%',
-        width: '100%',
-    }} {...props}>
-        <mdui-text-field icon="search" type="search" clearable ref={searchRef} variant="outlined" placeholder="搜索..." style={{
-            marginTop: '5px',
-        }}></mdui-text-field>
-
-        <mdui-list-item rounded style={{
-            width: '100%',
-            marginTop: '13px',
-        }} icon="person_add" onClick={() => addContactDialogRef.current!.open = true}>添加对话</mdui-list-item>
-        <mdui-list-item rounded style={{
-            width: '100%',
-        }} icon="group_add" onClick={() => createGroupDialogRef.current!.open = true}>创建群组</mdui-list-item>
-        <mdui-list-item rounded style={{
-            width: '100%',
-            marginTop: '13px',
-        }} icon="refresh" onClick={() => EventBus.emit('ContactsList.updateContacts')}>刷新</mdui-list-item>
-        <mdui-list-item rounded style={{
-            width: '100%',
-        }} icon={isMultiSelecting ? "done" : "edit"} onClick={() => {
-            if (isMultiSelecting)
-                setCheckedList({})
-            setIsMultiSelecting(!isMultiSelecting)
-        }}>{isMultiSelecting ? "关闭多选" : "多选模式"}</mdui-list-item>
-        {
-            isMultiSelecting && <>
-                <mdui-list-item rounded style={{
-                    width: '100%',
-                }} icon="delete" onClick={() => dialog({
-                    headline: "删除所选",
-                    description: "确定要删除所选的收藏对话吗? 这并不会删除您的聊天记录, 也不会丢失对话成员身份",
-                    actions: [
-                        {
-                            text: "取消",
-                            onClick: () => {
-                                return true
-                            },
-                        },
-                        {
-                            text: "确定",
-                            onClick: async () => {
-                                const ls = Object.keys(checkedList).filter((chatId) => checkedList[chatId] == true)
-                                const re = await Client.invoke("User.removeContacts", {
-                                    token: data.access_token,
-                                    targets: ls,
-                                })
-                                if (re.code != 200)
-                                    checkApiSuccessOrSncakbar(re, "删除所选收藏失败")
-                                else {
-                                    setCheckedList({})
-                                    setIsMultiSelecting(false)
-                                    EventBus.emit('ContactsList.updateContacts')
-                                    snackbar({
-                                        message: "已删除所选",
-                                        placement: "top",
-                                        action: "撤销操作",
-                                        onActionClick: async () => {
-                                            const re = await Client.invoke("User.addContacts", {
-                                                token: data.access_token,
-                                                targets: ls,
-                                            })
-                                            if (re.code != 200)
-                                                checkApiSuccessOrSncakbar(re, "恢复所选收藏失败")
-                                            EventBus.emit('ContactsList.updateContacts')
-                                        }
-                                    })
-                                }
-                            },
-                        }
-                    ],
-                })}>删除所选</mdui-list-item>
-            </>
-        }
-        <div style={{
-            height: "15px",
-        }}></div>
-
-        {
-            contactsList.filter((chat) =>
-                searchText == '' ||
-                chat.title.includes(searchText) ||
-                chat.id.includes(searchText)
-            ).map((v) =>
-                <ContactsListItem
-                    active={checkedList[v.id] == true}
-                    onClick={() => {
-                        if (isMultiSelecting)
-                            setCheckedList({
-                                ...checkedList,
-                                [v.id]: !checkedList[v.id],
-                            })
-                        else
-                            openChatInfoDialog(v)
-                    }}
-                    key={v.id}
-                    contact={v} />
-            )
-        }
-    </mdui-list>
-}

client/ui/main/RecentsList.tsx

@@ -1,75 +0,0 @@
-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)
-                return checkApiSuccessOrSncakbar(re, "获取最近对话列表失败")
-    
-            setRecentsList(re.data!.recent_chats as RecentChat[])
-        }
-        updateRecents()
-        EventBus.on('RecentsList.updateRecents', () => updateRecents())
-        setTimeout(() => updateRecents(), 15 * 1000)
-    })
-
-    return <mdui-list style={{
-        overflowY: 'auto',
-        paddingRight: '10px',
-        paddingLeft: '10px',
-        display: display ? undefined : 'none',
-        height: '100%',
-        width: '100%',
-    }} {...props}>
-        <mdui-text-field icon="search" type="search" clearable ref={searchRef} variant="outlined" placeholder="搜索..." style={{
-            marginTop: '5px',
-            marginBottom: '13px',
-        }}></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>
-}

client/ui/preference/Preference.tsx

@@ -1,16 +0,0 @@
-import { ListItem } from "mdui"
-
-interface Args extends React.HTMLAttributes<ListItem> {
-    title: string
-    description?: string
-    icon: string
-    disabled?: boolean
-}
-
-export default function Preference({ title, icon, disabled, description, ...props }: Args) {
-    // @ts-ignore: 为什么 ...props 要说参数不兼容呢?
-    return <mdui-list-item disabled={disabled ? true : undefined} rounded icon={icon} {...props}>
-        {title}
-        {description && <span slot="description">{description}</span>}
-    </mdui-list-item>
-}

client/ui/preference/PreferenceHeader.tsx

@@ -1,5 +0,0 @@
-export default function PreferenceHeader({ title }: {
-    title: string
-}) {
-    return <mdui-list-subheader>{title}</mdui-list-subheader>
-}

client/ui/preference/PreferenceLayout.tsx

@@ -1,8 +0,0 @@
-export default function PreferenceLayout({ children, ...props }: React.HTMLAttributes<HTMLElement>) {
-    return <mdui-list style={{
-        marginLeft: '15px',
-        marginRight: '15px',
-    }} {...props}>
-        {children}
-    </mdui-list>
-}

client/ui/preference/PreferenceStore.ts

@@ -1,27 +0,0 @@
-import React from 'react'
-
-export default class PreferenceStore<T extends object> {
-    declare onUpdate: (value: T, oldvalue: T) => void
-    declare state: T
-    declare setState: React.Dispatch<React.SetStateAction<T>>
-    constructor() {
-        const _ = React.useState({} as T)
-        this.state = _[0]
-        this.setState = _[1]
-    }
-
-    createUpdater() {
-        return (key: string, value: unknown) => {
-            const oldvalue = this.state
-            const newValue = {
-                ...this.state,
-                [key]: value,
-            }
-            this.setState(newValue)
-            this.onUpdate?.(newValue, oldvalue)
-        }
-    }
-    setOnUpdate(onUpdate: (value: T, oldvalue: T) => void) {
-        this.onUpdate = onUpdate
-    }
-}

client/ui/preference/PreferenceUpdater.ts

@@ -1,6 +0,0 @@
-import React from 'react'
-
-// deno-lint-ignore no-explicit-any
-const PreferenceUpdater = React.createContext<(key: string, value: unknown) => void>(null as any)
-
-export default PreferenceUpdater

client/ui/preference/SelectPreference.tsx

@@ -1,43 +0,0 @@
-import React from 'react'
-import { Dropdown } from 'mdui'
-import useEventListener from '../useEventListener.ts'
-import PreferenceUpdater from "./PreferenceUpdater.ts"
-
-interface Args extends React.HTMLAttributes<HTMLElement> {
-    title: string
-    icon: string
-    id: string
-    disabled?: boolean
-    selections: { [id: string]: string }
-    state: string
-}
-
-export default function SelectPreference({ title, icon, id: preferenceId, selections, state, disabled }: Args) {
-    const updater = React.useContext(PreferenceUpdater)
-
-    const dropDownRef = React.useRef<Dropdown>(null)
-    const [isDropDownOpen, setDropDownOpen] = React.useState(false)
-
-    useEventListener(dropDownRef, 'closed', () => {
-        setDropDownOpen(false)
-    })
-    return <mdui-list-item icon={icon} rounded disabled={disabled ? true : undefined} onClick={() => setDropDownOpen(!isDropDownOpen)}>
-        <mdui-dropdown ref={dropDownRef} trigger="manual" open={isDropDownOpen}>
-            <span slot="trigger">{title}</span>
-            <mdui-menu onClick={(e) => {
-                e.stopPropagation()
-                setDropDownOpen(false)
-            }}>
-                {
-                    Object.keys(selections).map((id) =>
-                        // @ts-ignore: selected 确实存在, 但是并不对外公开使用
-                        <mdui-menu-item key={id} selected={state == id ? true : undefined} onClick={() => {
-                            updater(preferenceId, id)
-                        }}>{selections[id]}</mdui-menu-item>
-                    )
-                }
-            </mdui-menu>
-        </mdui-dropdown>
-        <span slot="description">{selections[state]}</span>
-    </mdui-list-item>
-}

client/ui/preference/SwitchPreference.tsx

@@ -1,30 +0,0 @@
-import { Switch } from 'mdui'
-import React from 'react'
-import PreferenceUpdater from "./PreferenceUpdater.ts"
-
-interface Args extends React.HTMLAttributes<HTMLElement> {
-    title: string
-    id: string
-    description?: string
-    icon: string
-    state: boolean
-    disabled?: boolean
-}
-
-export default function SwitchPreference({ title, icon, id, disabled, description, state }: Args) {
-    const updater = React.useContext(PreferenceUpdater)
-
-    const switchRef = React.useRef<Switch>(null)
-    
-    React.useEffect(() => {
-        switchRef.current!.checked = state
-    }, [state])
-
-    return <mdui-list-item disabled={disabled ? true : undefined} rounded icon={icon} onClick={() => {
-        updater(id, !state)
-    }}>
-        {title}
-        {description && <span slot="description">{description}</span>}
-        <mdui-switch slot="end-icon" checked-icon="" ref={switchRef} onClick={(e) => e.preventDefault()}></mdui-switch>
-    </mdui-list-item>
-}

client/ui/preference/TextFieldPreference.tsx

@@ -1,35 +0,0 @@
-import React from 'react'
-import { prompt } from 'mdui'
-import PreferenceUpdater from "./PreferenceUpdater.ts"
-
-interface Args extends React.HTMLAttributes<HTMLElement> {
-    title: string
-    description?: string
-    icon: string
-    id: string
-    state: string
-    disabled?: boolean
-}
-
-export default function TextFieldPreference({ title, icon, description, id, state, disabled }: Args) {
-    const updater = React.useContext(PreferenceUpdater)
-    
-    return <mdui-list-item icon={icon} rounded disabled={disabled ? true : undefined} onClick={() => {
-        prompt({
-            headline: title,
-            confirmText: "确定",
-            cancelText: "取消",
-            onConfirm: (value) => {
-                updater(id, value)
-            },
-            onCancel: () => {},
-            textFieldOptions: {
-                label: description,
-                value: state,
-            },
-        })
-    }}>
-        {title}
-        {description && <span slot="description">{description}</span>}
-    </mdui-list-item>
-}

client/ui/routers/ChatInfoDialog.tsx

@@ -0,0 +1,144 @@
+import React from 'react'
+import { dialog, Dialog } from "mdui"
+import Avatar from "../Avatar.tsx"
+import { CallbackError, Chat } from 'lingchair-client-protocol'
+import { data, useLocation, useNavigate, useSearchParams } from 'react-router'
+import useAsyncEffect from '../../utils/useAsyncEffect.ts'
+import { useContextSelector } from 'use-context-selector'
+import MainSharedContext, { Shared } from '../MainSharedContext.ts'
+import getClient from '../../getClient.ts'
+import useEventListener from '../../utils/useEventListener.ts'
+import showSnackbar from '../../utils/showSnackbar.ts'
+
+export default function ChatInfoDialog({ ...props }: React.HTMLAttributes<HTMLElement>) {
+    const shared = useContextSelector(MainSharedContext, (context: Shared) => ({
+        myProfileCache: context.myProfileCache,
+        favouriteChats: context.favouriteChats,
+    }))
+
+    const [chat, setChat] = React.useState<Chat>()
+    const [userId, setUserId] = React.useState<string>()
+
+    const [searchParams] = useSearchParams()
+    let currentLocation = useLocation()
+    const navigate = useNavigate()
+    function back() {
+        navigate(-1)
+    }
+    const dialogRef = React.useRef<Dialog>()
+    useEventListener(dialogRef, 'overlay-click', () => back())
+    const id = searchParams.get('id')
+
+    const [favourited, setIsFavourited] = React.useState(false)
+    React.useEffect(() => {
+        setIsFavourited(shared.favouriteChats.map((v) => v.getId()).indexOf(chat?.getId() || '') != -1)
+    }, [chat, shared])
+
+    React.useEffect(() => {
+        console.log(currentLocation)
+    }, [currentLocation])
+
+    useAsyncEffect(async () => {
+        console.log(id, currentLocation.pathname)
+        try {
+            if (!currentLocation.pathname.startsWith('/info/')) {
+                dialogRef.current!.open = false
+                return
+            }
+
+            if (id == null) {
+                dialogRef.current!.open = false
+                return back()
+            }
+
+            if (currentLocation.pathname.startsWith('/info/user')) {
+                setChat(await Chat.getOrCreatePrivateChatOrThrow(getClient(), id))
+                setUserId(id)
+            } else
+                setChat(await Chat.getByIdOrThrow(getClient(), id))
+            dialogRef.current!.open = true
+        } catch (e) {
+            if (e instanceof CallbackError)
+                showSnackbar({
+                    message: '打开资料卡失败: ' + e.message
+                })
+            console.log(e)
+            back()
+        }
+    }, [id, currentLocation])
+
+    if (!currentLocation.pathname.startsWith('/info/'))
+        return null
+
+    const avatarUrl = getClient().getUrlForFileByHash(chat?.getAvatarFileHash())!
+
+    return (
+        <mdui-dialog ref={dialogRef}>
+            <div style={{
+                display: 'flex',
+                alignItems: 'center',
+            }}>
+                <Avatar src={avatarUrl} text={chat?.getTitle()} style={{
+                    width: '50px',
+                    height: '50px',
+                }} onClick={() => avatarUrl && openImageViewer(avatarUrl)} />
+                <div style={{
+                    display: 'flex',
+                    marginLeft: '15px',
+                    marginRight: '15px',
+                    fontSize: '16.5px',
+                    flexDirection: 'column',
+                }}>
+                    <span style={{
+                        fontSize: '16.5px'
+                    }}>{chat?.getTitle()}</span>
+                    <span style={{
+                        fontSize: '10.5px',
+                        marginTop: '3px',
+                        color: 'rgb(var(--mdui-color-secondary))',
+                    }}>({chat?.getType()}) ID: {chat?.getType() == 'private' ? userId : chat?.getId()}</span>
+                </div>
+            </div>
+            <mdui-divider style={{
+                marginTop: "10px",
+            }}></mdui-divider>
+
+            <mdui-list>
+                <mdui-list-item icon={favourited ? "favorite_border" : "favorite"} rounded onClick={() => dialog({
+                    headline: favourited ? "取消收藏对话" : "收藏对话",
+                    description: favourited ? "确定从收藏对话列表中移除吗? (虽然这不会导致聊天记录丢失)" : "确定要添加到收藏对话列表吗?",
+                    actions: [
+                        {
+                            text: "取消",
+                            onClick: () => {
+                                return true
+                            },
+                        },
+                        {
+                            text: "确定",
+                            onClick: () => {
+                                ; (async () => {
+                                    const re = await Client.invoke(favourited ? "User.removeContacts" : "User.addContacts", {
+                                        token: data.access_token,
+                                        targets: [
+                                            chat!.id
+                                        ],
+                                    })
+                                    if (re.code != 200)
+                                        checkApiSuccessOrSncakbar(re, favourited ? "取消收藏失败" : "收藏失败")
+                                    EventBus.emit('ContactsList.updateContacts')
+                                })()
+                                return true
+                            },
+                        }
+                    ],
+                })}>{favourited ? '取消收藏' : '收藏对话'}</mdui-list-item>
+                <mdui-list-item icon="chat" rounded onClick={() => {
+                    chatInfoDialogRef.current!.open = false
+                    openChatFragment(chat!.id)
+                }}>打开对话</mdui-list-item>
+            </mdui-list>
+        </mdui-dialog>
+    )
+}
+