feat(wip): 對話
This commit is contained in:
@@ -8,6 +8,7 @@ export type CallMethod =
|
||||
"User.setAvatar" |
|
||||
"User.getMyInfo" |
|
||||
|
||||
"Chat.getInfo" |
|
||||
"Chat.sendMessage" |
|
||||
"Chat.getMessageHistory"
|
||||
|
||||
|
||||
@@ -1,12 +1,24 @@
|
||||
import { Tab } from "mdui"
|
||||
import useEventListener from "../useEventListener.ts"
|
||||
import Message from "./Message.jsx"
|
||||
import Element_Message from "./Message.jsx"
|
||||
import MessageContainer from "./MessageContainer.jsx"
|
||||
|
||||
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 } from "../snackbar.ts"
|
||||
|
||||
export default function ChatFragment({ ...props } = {}) {
|
||||
const messageList = React.useState([])
|
||||
interface Args extends React.HTMLAttributes<HTMLElement> {
|
||||
target: string,
|
||||
}
|
||||
|
||||
export default function ChatFragment({ target, ...props }: Args) {
|
||||
const [messagesList, setMessagesList] = React.useState([] as Message[])
|
||||
const [chatInfo, setChatInfo] = React.useState({
|
||||
title: '加載中...'
|
||||
} as Chat)
|
||||
|
||||
const [tabItemSelected, setTabItemSelected] = React.useState('Chat')
|
||||
const tabRef: React.MutableRefObject<Tab | null> = React.useRef(null)
|
||||
@@ -14,6 +26,18 @@ export default function ChatFragment({ ...props } = {}) {
|
||||
setTabItemSelected((event.target as HTMLElement as Tab).value as string)
|
||||
})
|
||||
|
||||
React.useEffect(() => {
|
||||
;(async () => {
|
||||
const re = await Client.invoke('Chat.getInfo', {
|
||||
token: data.access_token,
|
||||
target: target,
|
||||
})
|
||||
if (re.code != 200)
|
||||
return checkApiSuccessOrSncakbar(re, "對話錯誤")
|
||||
setChatInfo(re.data as Chat)
|
||||
})()
|
||||
}, [target])
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
width: '100%',
|
||||
@@ -28,7 +52,9 @@ export default function ChatFragment({ ...props } = {}) {
|
||||
flexDirection: "column",
|
||||
height: "100%",
|
||||
}}>
|
||||
<mdui-tab value="Chat">Title</mdui-tab>
|
||||
<mdui-tab value="Chat">{
|
||||
chatInfo.title
|
||||
}</mdui-tab>
|
||||
<mdui-tab value="Settings">設定</mdui-tab>
|
||||
|
||||
<mdui-tab-panel slot="panel" value="Chat" style={{
|
||||
|
||||
@@ -1,14 +1,16 @@
|
||||
import User from "../../api/client_data/User.ts"
|
||||
import ContactsListItem from "./ContactsListItem.jsx"
|
||||
import ContactsListItem from "./ContactsListItem.tsx"
|
||||
|
||||
interface Args extends React.HTMLAttributes<HTMLElement> {
|
||||
contactsMap: { [key: string]: User[] }
|
||||
display: boolean
|
||||
openChatFragment: (id: string) => void
|
||||
}
|
||||
|
||||
export default function ContactsList({
|
||||
contactsMap,
|
||||
display,
|
||||
openChatFragment,
|
||||
...props
|
||||
}: Args) {
|
||||
return <mdui-list style={{
|
||||
@@ -19,6 +21,9 @@ export default function ContactsList({
|
||||
}} {...props}>
|
||||
|
||||
<mdui-collapse accordion value={Object.keys(contactsMap)[0]}>
|
||||
<mdui-list-item rounded style={{
|
||||
width: '100%',
|
||||
}} icon="person_add">添加聯絡人</mdui-list-item>
|
||||
{
|
||||
Object.keys(contactsMap).map((v) =>
|
||||
<mdui-collapse-item key={v} value={v}>
|
||||
@@ -26,9 +31,9 @@ export default function ContactsList({
|
||||
{
|
||||
contactsMap[v].map((v2) =>
|
||||
<ContactsListItem
|
||||
openChatFragment={openChatFragment}
|
||||
key={v2.id}
|
||||
nickName={v2.nickname}
|
||||
avatar={v2.avatar} />
|
||||
contact={v2} />
|
||||
)
|
||||
}
|
||||
</mdui-collapse-item>
|
||||
|
||||
@@ -1,16 +0,0 @@
|
||||
import Avatar from "../Avatar.tsx"
|
||||
|
||||
export default function ContactsListItem({ nickName, avatar }) {
|
||||
return (
|
||||
<mdui-list-item rounded style={{
|
||||
marginTop: '3px',
|
||||
marginBottom: '3px',
|
||||
width: '100%',
|
||||
}}>
|
||||
<span style={{
|
||||
width: "100%",
|
||||
}}>{nickName}</span>
|
||||
<Avatar src={avatar} text="title" slot="icon" />
|
||||
</mdui-list-item>
|
||||
)
|
||||
}
|
||||
23
client/ui/main/ContactsListItem.tsx
Normal file
23
client/ui/main/ContactsListItem.tsx
Normal file
@@ -0,0 +1,23 @@
|
||||
import User from "../../api/client_data/User.ts"
|
||||
import Avatar from "../Avatar.tsx"
|
||||
|
||||
interface Args extends React.HTMLAttributes<HTMLElement> {
|
||||
contact: User
|
||||
openChatFragment: (id: string) => void
|
||||
}
|
||||
|
||||
export default function ContactsListItem({ contact, openChatFragment }: Args) {
|
||||
const { id, nickname, avatar } = contact
|
||||
return (
|
||||
<mdui-list-item rounded style={{
|
||||
marginTop: '3px',
|
||||
marginBottom: '3px',
|
||||
width: '100%',
|
||||
}} onClick={() => openChatFragment(id)}>
|
||||
<span style={{
|
||||
width: "100%",
|
||||
}}>{nickname}</span>
|
||||
<Avatar src={avatar} text="title" slot="icon" />
|
||||
</mdui-list-item>
|
||||
)
|
||||
}
|
||||
@@ -1,30 +1,29 @@
|
||||
import RecentChat from "../../api/client_data/RecentChat.ts"
|
||||
import User from "../../api/client_data/User.ts"
|
||||
import ContactsListItem from "./ContactsListItem.jsx"
|
||||
import RecentsListItem from "./RecentsListItem.jsx"
|
||||
import RecentsListItem from "./RecentsListItem.tsx"
|
||||
|
||||
interface Args extends React.HTMLAttributes<HTMLElement> {
|
||||
recentsList: RecentChat[]
|
||||
display: boolean
|
||||
openChatFragment: (id: string) => void
|
||||
}
|
||||
|
||||
export default function RecentsList({
|
||||
recentsList,
|
||||
display,
|
||||
openChatFragment,
|
||||
...props
|
||||
}: Args) {
|
||||
return <mdui-list style={{
|
||||
overflowY: 'auto',
|
||||
paddingRight: '10px',
|
||||
display: display ? undefined : 'none'
|
||||
}}>
|
||||
}} {...props}>
|
||||
{
|
||||
recentsList.map((v) =>
|
||||
<RecentsListItem
|
||||
openChatFragment={openChatFragment}
|
||||
key={v.id}
|
||||
nickName={v.title}
|
||||
avatar={v.avatar}
|
||||
content={v.content} />
|
||||
recentChat={v} />
|
||||
)
|
||||
}
|
||||
</mdui-list>
|
||||
|
||||
@@ -1,13 +1,20 @@
|
||||
import RecentChat from "../../api/client_data/RecentChat.ts"
|
||||
import Avatar from "../Avatar.tsx"
|
||||
|
||||
export default function RecentsListItem({ nickName, avatar, content }) {
|
||||
interface Args extends React.HTMLAttributes<HTMLElement> {
|
||||
recentChat: RecentChat
|
||||
openChatFragment: (id: string) => void
|
||||
}
|
||||
|
||||
export default function RecentsListItem({ recentChat, openChatFragment }: Args) {
|
||||
const { id, title, avatar, content } = recentChat
|
||||
return (
|
||||
<mdui-list-item rounded style={{
|
||||
marginTop: '3px',
|
||||
marginBottom: '3px',
|
||||
}}>
|
||||
{nickName}
|
||||
<Avatar src={avatar} text={nickName} slot="icon" />
|
||||
}} onClick={() => openChatFragment(id)}>
|
||||
{title}
|
||||
<Avatar src={avatar} text={title} slot="icon" />
|
||||
<span slot="description"
|
||||
style={{
|
||||
width: "100%",
|
||||
@@ -1,19 +1,68 @@
|
||||
import Chat from "../data/Chat.ts";
|
||||
import ChatPrivate from "../data/ChatPrivate.ts";
|
||||
import User from "../data/User.ts"
|
||||
import BaseApi from "./BaseApi.ts"
|
||||
import TokenManager from "./TokenManager.ts"
|
||||
|
||||
export default class UserApi extends BaseApi {
|
||||
export default class ChatApi extends BaseApi {
|
||||
override getName(): string {
|
||||
return "Chat"
|
||||
}
|
||||
override onInit(): void {
|
||||
this.registerEvent("Chat.getInfo", (args) => {
|
||||
if (this.checkArgsMissing(args, ['token', 'target'])) return {
|
||||
msg: "參數缺失",
|
||||
code: 400,
|
||||
}
|
||||
|
||||
const token = TokenManager.decode(args.token as string)
|
||||
if (!this.checkToken(token)) return {
|
||||
code: 401,
|
||||
msg: "令牌無效",
|
||||
}
|
||||
|
||||
const chat = Chat.findById(args.target as string)
|
||||
if (chat == null) return {
|
||||
code: 404,
|
||||
msg: "對話不存在",
|
||||
}
|
||||
|
||||
// 私聊
|
||||
if (chat!.bean.type == 'private') {
|
||||
const targetId = args.target as string
|
||||
const target = User.findById(targetId)
|
||||
const mine = User.findById(token.author) as User
|
||||
if (target == null) return {
|
||||
code: 404,
|
||||
msg: "找不到用户",
|
||||
}
|
||||
|
||||
return {
|
||||
code: 200,
|
||||
msg: "成功",
|
||||
data: {
|
||||
type: chat.bean.type,
|
||||
title: ChatPrivate.fromChat(chat).getTitleForPrivate(mine, target)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
code: 501,
|
||||
msg: "未實現",
|
||||
msg: "not implmented",
|
||||
}
|
||||
})
|
||||
this.registerEvent("Chat.sendMessage", (args) => {
|
||||
if (this.checkArgsMissing(args, ['token', 'target'])) return {
|
||||
msg: "參數缺失",
|
||||
code: 400,
|
||||
}
|
||||
|
||||
const token = TokenManager.decode(args.token as string)
|
||||
if (!this.checkToken(token)) return {
|
||||
code: 401,
|
||||
msg: "令牌無效",
|
||||
}
|
||||
|
||||
return {
|
||||
code: 501,
|
||||
@@ -21,6 +70,16 @@ export default class UserApi extends BaseApi {
|
||||
}
|
||||
})
|
||||
this.registerEvent("Chat.getMessageHistory", (args) => {
|
||||
if (this.checkArgsMissing(args, ['token', 'target'])) return {
|
||||
msg: "參數缺失",
|
||||
code: 400,
|
||||
}
|
||||
|
||||
const token = TokenManager.decode(args.token as string)
|
||||
if (!this.checkToken(token)) return {
|
||||
code: 401,
|
||||
msg: "令牌無效",
|
||||
}
|
||||
|
||||
return {
|
||||
code: 501,
|
||||
|
||||
@@ -1,7 +1,12 @@
|
||||
import chalk from "chalk"
|
||||
import Chat from "./Chat.ts"
|
||||
import User from "./User.ts";
|
||||
import User from "./User.ts"
|
||||
|
||||
export default class ChatPrivate extends Chat {
|
||||
static fromChat(chat: Chat) {
|
||||
return new ChatPrivate(chat.bean)
|
||||
}
|
||||
|
||||
static getChatIdByUsersId(userIdA: string, userIdB: string) {
|
||||
return [userIdA, userIdB].sort().join('-')
|
||||
}
|
||||
@@ -9,8 +14,16 @@ export default class ChatPrivate extends Chat {
|
||||
static createForPrivate(userA: User, userB: User) {
|
||||
return this.create(this.getChatIdByUsersId(userA.bean.id, userB.bean.id), 'private')
|
||||
}
|
||||
static findForPrivate() {
|
||||
|
||||
static findForPrivate(userA: User, userB: User) {
|
||||
return this.fromChat(this.findById(this.getChatIdByUsersId(userA.bean.id, userB.bean.id)) as Chat)
|
||||
}
|
||||
static findOrCreateForPrivate(userA: User, userB: User) {
|
||||
let a = this.findForPrivate(userA, userB)
|
||||
if (a == null) {
|
||||
this.createForPrivate(userA, userB)
|
||||
a = this.findForPrivate(userA, userB) as ChatPrivate
|
||||
}
|
||||
return a
|
||||
}
|
||||
|
||||
getTitleForPrivate(user: User, targetUser: User) {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
export default class Message {
|
||||
export default class MessageBean {
|
||||
declare id: number
|
||||
declare text: string
|
||||
declare user_id: string
|
||||
declare user_id?: string
|
||||
|
||||
[key: string]: unknown
|
||||
}
|
||||
@@ -5,22 +5,59 @@ import chalk from "chalk"
|
||||
|
||||
import config from "../config.ts"
|
||||
import Chat from "./Chat.ts"
|
||||
import MessageBean from "./MessageBean.ts"
|
||||
|
||||
export default class MessagesManager {
|
||||
static table_name: string = "Messages"
|
||||
static database: DatabaseSync = this.init()
|
||||
|
||||
private static init(): DatabaseSync {
|
||||
const db: DatabaseSync = new DatabaseSync(path.join(config.data_path, this.table_name + '.db'))
|
||||
const db: DatabaseSync = new DatabaseSync(path.join(config.data_path, 'Messages.db'))
|
||||
return db
|
||||
}
|
||||
|
||||
static getInstance(chat: Chat) {
|
||||
static getInstanceForChat(chat: Chat) {
|
||||
return new MessagesManager(chat)
|
||||
}
|
||||
|
||||
declare chat: Chat
|
||||
constructor(chat: Chat) {
|
||||
this.chat = chat
|
||||
|
||||
MessagesManager.database.exec(`
|
||||
CREATE TABLE IF NOT EXISTS ${this.getTableName()} (
|
||||
/* 序号, MessageId */ id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||
/* 消息文本 */ text TEXT NOT NULL,
|
||||
/* 发送者 */ user_id TEXT NOT NULL,
|
||||
);
|
||||
`)
|
||||
}
|
||||
protected getTableName() {
|
||||
return `messages_${this.chat.bean.id}`
|
||||
}
|
||||
addMessage({
|
||||
text,
|
||||
user_id
|
||||
}: {
|
||||
text: string,
|
||||
user_id?: string
|
||||
}) {
|
||||
MessagesManager.database.prepare(`INSERT INTO ${this.getTableName()} (
|
||||
text,
|
||||
user_id
|
||||
) VALUES (?, ?);`).run(
|
||||
text,
|
||||
user_id || null
|
||||
)
|
||||
}
|
||||
addSystemMessage(text: string) {
|
||||
this.addMessage({
|
||||
text
|
||||
})
|
||||
}
|
||||
getMessages(limit: number = 15, offset: number = 0) {
|
||||
return MessagesManager.database.prepare(`SELECT * FROM ${this.getTableName()} ORDER BY id DESC LIMIT ? OFFSET ?;`).all(limit, offset) as unknown as MessageBean[]
|
||||
}
|
||||
getMessagesWithPage(limit: number = 15, page: number = 0) {
|
||||
return this.getMessages(limit, limit * page)
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user