+
+
+
+
+
+
+
+
-
-
diff --git a/src/app/chat/elements/message-box/message-box.ts b/src/app/chat/elements/message-box/message-box.ts
index 36c35d3..41339dd 100644
--- a/src/app/chat/elements/message-box/message-box.ts
+++ b/src/app/chat/elements/message-box/message-box.ts
@@ -1,9 +1,22 @@
import {Component, HostListener, inject, input} from '@angular/core';
-import {TuiAppearance, TuiButton, TuiGroup, TuiIcon, TuiScrollbarDirective} from '@taiga-ui/core';
+import {
+ TuiAppearance,
+ TuiButton,
+ TuiDialog,
+ TuiGroup,
+ TuiIcon,
+ TuiScrollbarDirective,
+ TuiTextfield
+} from '@taiga-ui/core';
import {TranslatePipe} from '@ngx-translate/core';
import {ServiceManager} from '../../../service-manager';
import {MessageBoxViewModel} from './message-box-viewmodel';
import {FormsModule} from '@angular/forms';
+import {v4 as uuidv4} from 'uuid';
+import {Masonry} from '../masonry/masonry';
+import {Oimg} from '../oimg/oimg';
+import {FileData} from '@chatenium/chatenium-sdk/domain/fileUploadService.schema';
+import {TuiTextarea, TuiTextareaComponent} from '@taiga-ui/kit';
@Component({
selector: 'message-box',
@@ -14,7 +27,12 @@ import {FormsModule} from '@angular/forms';
TuiGroup,
TuiIcon,
TuiButton,
- FormsModule
+ FormsModule,
+ TuiDialog,
+ Oimg,
+ Masonry,
+ TuiTextfield,
+ TuiTextarea
],
templateUrl: './message-box.html',
styleUrl: './message-box.scss',
@@ -56,4 +74,82 @@ export class MessageBox {
this.textareaHeight = calculatedHeight > 180 ? 180 : calculatedHeight
this.messageBoxRadius = calculatedRadius < 30 ? 30 : calculatedRadius
}
+
+ handleFileInput(event: any) {
+ this.processFiles(event.target.files)
+ }
+
+ sendMessageWithCaption(e: TuiTextareaComponent) {
+ this.viewModel().onMessageSend((e.content() as string), this.viewModel().files())
+ }
+
+ async processFiles(fileList: FileList) {
+ for (let i = 0; i < fileList.length; i++) {
+ const file = fileList[i];
+ const type = file.type.split("/").shift() ?? ""
+ let preview = ""
+ let height = 0
+ let width = 0
+
+ console.log(type)
+
+ if (type == "image") {
+ try {
+ const imgData = await makePicturePreview(file)
+ console.log(imgData)
+ preview = imgData.preview
+ height = imgData.height
+ width = imgData.width
+ } catch (error) {
+ console.error(error)
+ }
+ }
+
+ console.log("push")
+ this.viewModel().files().push({
+ fileId: uuidv4(),
+ data: file,
+ name: file.name,
+ type: type,
+ extension: file.name.split(".").pop() ?? "",
+ preview: preview,
+ height: height,
+ width: width,
+ })
+ console.log(this.viewModel().files())
+ }
+
+ function makePicturePreview(file: File): Promise<{ preview: string, height: number, width: number }> {
+ return new Promise((resolve, reject) => {
+ const img = new Image();
+ const objectUrl = URL.createObjectURL(file);
+
+ img.onload = () => {
+ console.log("Loaded image")
+ resolve({
+ preview: objectUrl,
+ width: img.naturalWidth,
+ height: img.naturalHeight,
+ });
+ };
+
+ img.onerror = (err) => {
+ URL.revokeObjectURL(objectUrl);
+ console.error("Error loading image:", err);
+ reject(err);
+ };
+
+ img.src = objectUrl;
+ });
+ }
+ }
+}
+
+/**
+ * All the extra data for client-side rendering. (With finished messages these are generated on the server)
+ */
+export interface FileDataWithPreview extends FileData {
+ preview: string;
+ height: number;
+ width: number;
}
diff --git a/src/app/chat/elements/messages/messages.html b/src/app/chat/elements/messages/messages.html
index c951ff0..15dd1e5 100644
--- a/src/app/chat/elements/messages/messages.html
+++ b/src/app/chat/elements/messages/messages.html
@@ -12,6 +12,11 @@
+ @for (file of message.files; track file) {
+ @if (file.type == "image") {
+ ![]()
+ }
+ }