chatenium/Nexum
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 10 Wiki Activity

3.0 Beta 7

Browse Source
This commit is contained in:
chatenium
2026-04-15 17:35:55 +02:00
parent 0dc1e15e59
commit a0a6fdaf55
20 changed files with 261 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/app/chat/chat.html
View File

@@ -4,6 +4,7 @@
<ul>
<li>{{ "chat.changeLogDialog.changeLog.1"|translate }}</li>
<li>{{ "chat.changeLogDialog.changeLog.2"|translate }}</li>
<li>{{ "chat.changeLogDialog.changeLog.3"|translate }}</li>
</ul>
<button tuiButton iconStart="@tui.check"

2
src/app/chat/dm/dm.html
View File

@@ -20,7 +20,7 @@
</div>
</navbar>
<messages [messageBoxViewModel]="store.messageBox" [messages]="store.messages()" id="scrollContainer" (onDelete)="deleteMessage($event)"/>
<messages (scrollend)="handleMessagesScroll($event)" [messageBoxViewModel]="store.messageBox" [messages]="store.messages()" id="scrollContainer" (onDelete)="deleteMessage($event)"/>
<message-box [viewModel]="store.messageBox"/>
}

70
src/app/chat/dm/dm.ts
View File

@@ -14,6 +14,8 @@ import {MessageBoxViewModel} from '../elements/message-box/message-box-viewmodel
import {WebSocketHandler} from '@chatenium/chatenium-sdk/core/webSocketHandler';
import {FileData, FileUploadProgressListener} from '@chatenium/chatenium-sdk/domain/fileUploadService.schema';
import {Attachment} from '@chatenium/chatenium-sdk/domain/common.schema';
import {MessagesViewModel} from '../elements/messages/messages-viewmodel';
import {v4 as uuidv4} from 'uuid';
@Component({
selector: 'app-dm',
@@ -42,6 +44,7 @@ export class Dm implements OnInit {
async sendMessage(message: string, files: FileDataWithPreview[] | null) {
if (!files && message.trim() == "") return
this.scrollToBottom("smooth")
const session = this.serviceManager.currentSession();
if (session != null) {
@@ -66,8 +69,11 @@ export class Dm implements OnInit {
let attachments: Attachment[] = []
files?.forEach(file => {
const extraMetaData: Record<string, string> = {}
const extraMetaData: Record<string, any> = {}
extraMetaData["thumbnailMetaData"] = file.videoThumbnail ?? ""
extraMetaData["progressShown"] = true
extraMetaData["totalChunks"] = 0
extraMetaData["uploadedChunks"] = 0
attachments.push({
fileName: file.name,
@@ -81,6 +87,7 @@ export class Dm implements OnInit {
})
})
const tempMsgId = uuidv4()
this.store.messages.update(value => [...value, {
message: message,
chatid: this.chatid,
@@ -88,7 +95,7 @@ export class Dm implements OnInit {
replyTo: "",
author: session.userData.userid,
seen: false,
msgid: "",
msgid: tempMsgId,
forwardedFrom: "",
isEdited: false,
sent_at: {T: 0, I: 0},
@@ -98,14 +105,13 @@ export class Dm implements OnInit {
this.scrollToBottom("smooth")
await this.store.service.sendMessage("", message, null, null, files, <FileUploadProgressListener>{
const respMessage = await this.store.service.sendMessage(tempMsgId, message, null, null, files, <FileUploadProgressListener>{
fileProgressUpdate: (tempMsgId, fileId, allChunks, chunksDone) => {
this.uploadProgressUpdate(tempMsgId, fileId, allChunks, chunksDone)
}
})
this.updateTempMessage(tempMsgId, respMessage)
}
this.store.messageBox.message.set("")
}
async deleteMessage(messageId: string) {
@@ -125,15 +131,61 @@ export class Dm implements OnInit {
setTimeout(() => {
const scrollContainer = <HTMLDivElement>document.querySelector("#scrollContainer")
scrollContainer.scroll({
top: scrollContainer.scrollHeight,
top: this.store.messagesVm.scrollBarStatus() == -1 ? scrollContainer.scrollHeight : this.store.messagesVm.scrollBarStatus(),
left: 0,
behavior: anim
});
if (this.store.messagesVm.scrollBarStatus() == -1) {
this.store.messagesVm.scrollBarStatus.set(scrollContainer.scrollHeight)
}
}, 0)
}
handleMessagesScroll(e: any) {
this.store.messagesVm.scrollBarStatus.set(e.target.scrollTop)
}
uploadProgressUpdate(tempMsgId: string, fileId: string, allChunks: number, chunksDone: number) {
console.log(fileId, allChunks, chunksDone)
console.log(tempMsgId, fileId, allChunks, chunksDone)
this.store.messages.update(messages =>
messages.map(m => {
if (m.msgid !== tempMsgId) return m;
return {
...m,
files: m.files.map(f => {
if (f.fileId !== fileId) return f;
return {
...f,
extraMetaData: {
...f.extraMetaData,
totalChunks: allChunks,
uploadedChunks: chunksDone
}
};
})
};
})
);
}
updateTempMessage(tempMsgId: string, message: Message) {
this.store.messages.update(messages =>
messages.map(m => {
if (m.msgid !== tempMsgId) return m;
return {
...m,
msgid: message.msgid,
sent_at: message.sent_at,
files: m.files.map(f => {
f.extraMetaData["progressShown"] = false
return f
})
};
})
);
}
// The chatid parameter ensures isolation
@@ -170,6 +222,7 @@ export class Dm implements OnInit {
chatData: signal<Chat>(chatData),
messages: signal<Message[]>([]),
messageBox: new MessageBoxViewModel((msg, files) => this.sendMessage(msg, files)),
messagesVm: new MessagesViewModel(),
wsListener: (action, data) => this.onWsListen(action, data, chatid),
} as DmStorage;
@@ -187,6 +240,7 @@ export class Dm implements OnInit {
try {
const messagesCache = await currentStore.service.getQuick();
currentStore.messages.set(messagesCache);
this.scrollToBottom("instant")
} catch (e) {
console.warn(`Cache load failed: ${e}. Skipping cache load...`)
}
@@ -195,6 +249,8 @@ export class Dm implements OnInit {
this.scrollToBottom("instant")
await currentStore.service.joinWebSocketRoom();
} else {
this.scrollToBottom("instant")
}
});
}

4
src/app/chat/elements/message-box/message-box.html
View File

@@ -80,12 +80,12 @@
</button>
</div>
<div class="items-middle">
<textarea (keydown.enter)="viewModel().message.set(''); handleEnterKeydown($event); viewModel().onMessageSend(message.value, null)" [style]="'height:'+textareaHeight+'px;'" #message (input)="onTextAreaInput(message)" [(ngModel)]="viewModel().message"></textarea>
<textarea (keydown.enter)="viewModel().onMessageSend(message.value, null); viewModel().message.set(''); viewModel().editingMessage.set(null); handleEnterKeydown($event)" [style]="'height:'+textareaHeight+'px;'" #message (input)="onTextAreaInput(message)" [(ngModel)]="viewModel().message"></textarea>
<span class="placeholder"
[class.hidden]="message.value != ''">{{ "chat.elements.messageBox.placeholder"|translate }}</span>
</div>
<div class="items-right">
<button [disabled]="message.value.trim() == ''" tuiButton appearance="flat" (click)="viewModel().message.set(''); viewModel().onMessageSend(message.value, null)">
<button [disabled]="message.value.trim() == ''" tuiButton appearance="flat" (click)="viewModel().onMessageSend(message.value, null); viewModel().message.set(''); viewModel().editingMessage.set(null);">
<tui-icon icon="@tui.send"/>
</button>
</div>

6
src/app/chat/elements/messages/messages-viewmodel.ts Normal file
View File

@@ -0,0 +1,6 @@
import {signal} from '@angular/core';
export class MessagesViewModel {
// Saves scrolling state. First value initialized when scrolling to bottom on the message load
scrollBarStatus = signal<number>(-1)
}

45
src/app/chat/elements/messages/messages.html
View File

@@ -17,24 +17,47 @@
<span class="message-text">{{ message.message }}</span>
<masonry style="max-height: 300px">
@for (file of filterExpressedMedia(message.files); track file) {
@if (file.type == "image") {
<img [src]="file.path"
style="width: 100%; height: 100%; max-height: 300px; object-fit: cover; border-radius: 25px"/>
} @else if (file.type == "video") {
<div style="position:relative;">
@if (file.extraMetaData && Object.keys(file.extraMetaData).length > 0) {
<video-player maxHeight="300px" maxWidth="300px" [src]="file.path"
[thumbnailOverwrite]="file.extraMetaData['thumbnailMetaData']"></video-player>
} @else {
<video-player maxHeight="300px" maxWidth="300px" [src]="file.path"></video-player>
@if (file.extraMetaData['progressShown']) {
<tui-progress-circle
style="position: absolute; top: 0; right: 0; z-index: 10; transform: translate(-50%, -50%)"
[max]="file.extraMetaData['totalChunks']"
[value]="file.extraMetaData['uploadedChunks']"
/>
}
}
}
@if (file.type == "image") {
<img [src]="file.path"
style="width: 100%; height: 100%; max-height: 300px; object-fit: cover; border-radius: 25px"/>
} @else if (file.type == "video") {
@if (file.extraMetaData && Object.keys(file.extraMetaData).length > 0) {
<video-player maxHeight="300px" maxWidth="300px" [src]="file.path"
[thumbnailOverwrite]="file.extraMetaData['thumbnailMetaData']"></video-player>
} @else {
<video-player maxHeight="300px" maxWidth="300px" [src]="file.path"></video-player>
}
}
</div>
}
</masonry>
<div tuiGroup orientation="vertical" style="width: 100%">
@for (file of filterNonExpressedMedia(message.files); track file) {
<div style="width: 100%; height: 50px; display: flex; align-items: center; padding: 0 10px; background: var(--tui-background-accent-1); gap: 5px">
<tui-icon icon="@tui.file"/>
<div style="width: 100%; height: 50px; display: flex; align-items: center; padding: 0 10px; background: var(--tui-background-base-alt); gap: 5px">
@if (file.extraMetaData && Object.keys(file.extraMetaData).length > 0) {
@if (file.extraMetaData['progressShown']) {
<tui-progress-circle
size="xs"
[max]="file.extraMetaData['totalChunks']"
[value]="file.extraMetaData['uploadedChunks']"
/>
} @else {
<tui-icon icon="@tui.file"/>
}
} @else {
<tui-icon icon="@tui.file"/>
}
<span>{{ file.fileName }}</span>
</div>
}

4
src/app/chat/elements/messages/messages.scss
View File

@@ -31,7 +31,7 @@
}
.bubble {
border-radius: 25px 10px 10px 10px !important;
border-radius: 10px 25px 10px 10px !important;
}
}
@@ -43,7 +43,7 @@
&.chained_end {
.bubble {
border-radius: 10px 10px 10px 25px !important;
border-radius: 10px 10px 25px 10px !important;
}
}

4
src/app/chat/elements/messages/messages.ts
View File

@@ -18,6 +18,7 @@ import {TranslatePipe} from '@ngx-translate/core';
import {MessageBoxViewModel} from '../message-box/message-box-viewmodel';
import {FileDataWithPreview} from '../message-box/message-box';
import {Attachment} from '@chatenium/chatenium-sdk/domain/common.schema';
import {TuiProgressCircle} from '@taiga-ui/kit';
@Component({
selector: 'messages',
@@ -32,7 +33,8 @@ import {Attachment} from '@chatenium/chatenium-sdk/domain/common.schema';
TranslatePipe,
TuiDataListComponent,
TuiGroup,
TuiIcon
TuiIcon,
TuiProgressCircle
],
templateUrl: './messages.html',
styleUrl: './messages.scss',

2
src/app/chat/network/channel/text/text.html
View File

@@ -25,7 +25,7 @@
</div>
</navbar>
<messages [messageBoxViewModel]="store!.messageBox" [messages]="store!.messages()" id="scrollContainer"
<messages (scrollend)="handleMessagesScroll($event)" [messageBoxViewModel]="store!.messageBox" [messages]="store!.messages()" id="scrollContainer"
(onDelete)="deleteMessage($event)"/>
<message-box [viewModel]="store!.messageBox"/>

78
src/app/chat/network/channel/text/text.ts
View File

@@ -12,6 +12,8 @@ import {Message} from '@chatenium/chatenium-sdk/domain/textChannelService.schema
import {Messages} from '../../../elements/messages/messages';
import {Navbar} from '../../../elements/navbar/navbar';
import {Oimg} from '../../../elements/oimg/oimg';
import {MessagesViewModel} from '../../../elements/messages/messages-viewmodel';
import {v4 as uuidv4} from 'uuid';
@Component({
selector: 'app-text',
@@ -65,15 +67,16 @@ export class Text {
}
}
this.store.messageBox.editingMessage.set(null)
this.store.messageBox.message.set("")
return
}
let attachments: Attachment[] = []
files?.forEach(file => {
const extraMetaData: Record<string, string> = {}
const extraMetaData: Record<string, any> = {}
extraMetaData["thumbnailMetaData"] = file.videoThumbnail ?? ""
extraMetaData["progressShown"] = true
extraMetaData["totalChunks"] = 0
extraMetaData["uploadedChunks"] = 0
attachments.push({
fileName: file.name,
@@ -87,6 +90,7 @@ export class Text {
})
})
const tempMsgId = uuidv4()
this.store.messages.update(value => [...value, {
author: {
userid: session.userData.userid,
@@ -94,7 +98,7 @@ export class Text {
username: session.userData.username,
displayName: session.userData.displayName
},
msgid: "",
msgid: tempMsgId,
message: message,
sent_at: {
T: 0,
@@ -104,7 +108,7 @@ export class Text {
channelId: "",
networkId: "",
categoryId: "",
files: [],
files: attachments,
seen: false,
replyTo: "",
replyToId: "",
@@ -114,11 +118,12 @@ export class Text {
this.scrollToBottom("smooth")
await this.store.service.sendMessage("", message, null, null, files, <FileUploadProgressListener>{
const respMessage = await this.store.service.sendMessage(tempMsgId, message, null, null, files, <FileUploadProgressListener>{
fileProgressUpdate: (tempMsgId, fileId, allChunks, chunksDone) => {
this.uploadProgressUpdate(tempMsgId, fileId, allChunks, chunksDone)
}
})
this.updateTempMessage(tempMsgId, respMessage)
}
}
@@ -138,19 +143,69 @@ export class Text {
scrollToBottom(anim: 'instant' | 'smooth'): void {
setTimeout(() => {
if (!this.store) {
return
}
const scrollContainer = <HTMLDivElement>document.querySelector("#scrollContainer")
scrollContainer.scroll({
top: scrollContainer.scrollHeight,
top: this.store.messagesVm.scrollBarStatus() == -1 ? scrollContainer.scrollHeight : this.store.messagesVm.scrollBarStatus(),
left: 0,
behavior: anim
});
if (this.store.messagesVm.scrollBarStatus() == -1) {
this.store.messagesVm.scrollBarStatus.set(scrollContainer.scrollHeight)
}
}, 0)
}
uploadProgressUpdate(tempMsgId: string, fileId: string, allChunks: number, chunksDone: number) {
console.log(fileId, allChunks, chunksDone)
handleMessagesScroll(e: any) {
if (!this.store) return
this.store.messagesVm.scrollBarStatus.set(e.target.scrollTop)
}
uploadProgressUpdate(tempMsgId: string, fileId: string, allChunks: number, chunksDone: number) {
if (!this.store) return
this.store.messages.update(messages =>
messages.map(m => {
if (m.msgid !== tempMsgId) return m;
return {
...m,
files: m.files.map(f => {
if (f.fileId !== fileId) return f;
return {
...f,
extraMetaData: {
...f.extraMetaData,
totalChunks: allChunks,
uploadedChunks: chunksDone
}
};
})
};
})
);
}
updateTempMessage(tempMsgId: string, message: Message) {
if (!this.store) return
this.store.messages.update(messages =>
messages.map(m => {
if (m.msgid !== tempMsgId) return m;
return {
...m,
msgid: message.msgid,
sent_at: message.sent_at,
files: m.files.map(f => {
f.extraMetaData["progressShown"] = false
return f
})
};
})
);
}
// The chatid parameter ensures isolation
onWsListen(action: string, message: string, networkId: string, channelId: string) {
const data = JSON.parse(message);
@@ -205,6 +260,7 @@ export class Text {
categoryData: signal(categoryData),
channelData: signal(channelData),
messages: signal<Message[]>([]),
messagesVm: new MessagesViewModel(),
messageBox: new MessageBoxViewModel((msg, files) => this.sendMessage(msg, files)),
wsListener: (action, data) => this.onWsListen(action, data, networkId, categoryId),
} as TextChannelStorage;
@@ -225,13 +281,17 @@ export class Text {
try {
const messagesCache = await currentStore.service.getQuick();
currentStore.messages.set(messagesCache);
this.scrollToBottom("instant")
} catch (e) {
console.warn(`Cache load failed: ${e}. Skipping cache load...`)
}
const messages = await currentStore.service.get();
currentStore.messages.set(messages);
this.scrollToBottom("instant")
await currentStore.service.joinWebSocketRoom();
} else {
this.scrollToBottom("instant")
}
});
}