added support for files in messages, and updated dependencies

2026-06-28 18:51:33 +02:00
parent c57e8d8254
commit ede782485c
12 changed files with 2098 additions and 1593 deletions
@@ -17,12 +17,14 @@
    "@tauri-apps/plugin-fs": "~2",
    "@tauri-apps/plugin-http": "~2",
    "@tauri-apps/plugin-notification": "~2",
-    "@tauri-apps/plugin-opener": "^2",
+    "@tauri-apps/plugin-opener": "~2",
    "@tauri-apps/plugin-os": "~2",
    "@tauri-apps/plugin-store": "~2",
    "@tauri-apps/plugin-upload": "~2",
    "@tauri-apps/plugin-websocket": "~2",
    "fluent-vue": "^3.8.1",
+    "v-viewer": "^3.0.23",
+    "viewerjs": "^1.11.7",
    "vue": "^3.5.13",
    "vue-router": "^4.6.4"
  },
@@ -1,6 +1,11 @@
 import { apiFetch } from './client'
 import type { Message } from '../types'

+export async function getWsToken(): Promise<string> {
+    const res = await apiFetch<{ token: string }>(`/ws/issue-token`);
+    return res.token;
+}
+
 export function fetchMessages(roomUuid: string, before?: string, limit: number = 30) {
    let url = `/messages/${roomUuid}?limit=${limit}`;
    if (before) {
@@ -19,7 +24,15 @@ export function sendMessage(roomUuid: string, content: string) {
    })
 }

-export async function getWsToken(): Promise<string> {
-    const res = await apiFetch<{ token: string }>(`/ws/issue-token`);
-    return res.token;
+export function uploadMessage(roomUuid: string, content: string, files: File[]) {
+    const formData = new FormData();
+    formData.append('content', content);
+    files.forEach(file => {
+        formData.append('file', file);
+    });
+
+    return apiFetch<Message>(`/messages/${roomUuid}/upload`, {
+        method: 'POST',
+        body: formData,
+    });
 }
@@ -166,10 +166,14 @@ i {
  transition: color 0.2s ease;
 }

-i:hover {
+button:hover i {
    color: var(--text);
 }

+/* i:hover { */
+/*   color: var(--text); */
+/* } */
+
 .btn {
  outline: none;
 }
@@ -205,10 +209,6 @@ i:hover {
 }

@media (hover: hover) {
-  i:hover {
-    color: var(--text);
-  }
-
  button:hover, .button:hover {
    background: var(--accent-hover);
  }
@@ -40,7 +40,11 @@
            </div>
        </div>

-        <div v-if="isSocketConnected" class="input-container">
+        <div v-if="isSocketConnected" class="input-container" :class="{ 'is-loading': isSending }">
+            <!-- <div v-if="isSending" class="sending-overlay"> -->
+            <!--     <i class="fas fa-spinner fa-spin"></i> -->
+            <!-- </div> -->
+
            <button v-if="isOwner && !currentRoom?.global" class="invite-btn" @click="showInviteModal = true"
                :title="$t('chat-invite-title')">
                <i class="fa-solid fa-users"></i>
@@ -54,14 +58,14 @@
                <p>{{ connectionError }}</p>
            </div>

-            <MessageInput v-if="isSocketConnected" ref="messageInputRef" @send="onSend" />
+            <MessageInput v-if="isSocketConnected" ref="messageInputRef" :disabled="isSending" @send="onSend" />
        </div>
    </div>
 </template>

 <script setup lang="ts">
 import { ref, onMounted, onUnmounted, watch, nextTick, computed } from "vue";
-import { fetchMessages, sendMessage } from "../api/messages";
+import { fetchMessages, sendMessage, uploadMessage } from "../api/messages";
 import type { Message, Room, User } from "../types";
 import { API_WS } from '../main.ts';
 import { apiFetch } from '../api/client';
@@ -94,6 +98,7 @@ const messageInputRef = ref<InstanceType<typeof MessageInput> | null>(null);
 const currentUser = ref<User | null>(null);
 const currentRoom = ref<Room | null>(null);
 const connectionError = ref<string | null>(null);
+const isSending = ref(false);

 // Pagination State
 const isLoadingMore = ref(false);
@@ -319,10 +324,26 @@ const handleGlobalKeyDown = (event: KeyboardEvent) => {
    }
 };

-async function onSend(content: string) {
-    if (props.uuid === 'none') return;
+async function onSend(content: string, files?: File[]) {
+    if (props.uuid === 'none' || isSending.value) return;
+
+    isSending.value = true;
+    try {
+        if (files && files.length > 0) {
+            await uploadMessage(props.uuid, content, files);
+        } else {
            await sendMessage(props.uuid, content);
        }
+    } catch (err) {
+        console.error("Failed to send message:", err);
+        // You might want to show a toast here
+    } finally {
+        isSending.value = false;
+        nextTick(() => {
+            messageInputRef.value?.focus();
+        });
+    }
+}

 async function toggleVoice() {
    if (isCurrentRoomVoice.value) {
@@ -1,22 +1,152 @@
 <template>
-  <div class="container-div">
+    <div class="input-wrapper">
+        <!-- Attachment Preview Bar -->
+        <div v-if="selectedFiles.length > 0" class="attachment-previews">
+            <div v-for="(file, index) in selectedFiles" :key="index" class="preview-item">
+                <span class="file-name">{{ file.name }}</span>
+                <button @click="removeFile(index)" class="remove-btn">×</button>
+            </div>
+            <div v-if="selectedFiles.length >= 8" class="limit-reached">
+                {{ $t('chat-max-attachments') }} (8)
+            </div>
+        </div>
+
+        <div class="container-div" ref="menuContainer">
+            <div class="attachment-menu-container">
+                <!-- Popup Menu -->
+                <div v-if="showMenu" class="attachment-popup">
+                    <button @click="triggerPicker('image/*')">
+                        <i class="fas fa-image"></i> {{ $t('chat-attach-image') }}
+                    </button>
+                    <button @click="triggerPicker('*/*')">
+                        <i class="fas fa-file"></i> {{ $t('chat-attach-file') }}
+                    </button>
+                    <button @click="triggerPicker('image/*', true)" class="mobile-only">
+                        <i class="fas fa-camera"></i> {{ $t('chat-attach-camera') }}
+                    </button>
+                </div>
+            </div>
+
+            <input type="file" ref="fileInput" style="display: none" multiple @change="handleFileChange" />
+
            <textarea ref="textareaRef" v-model="content" @input="handleInput" @keydown="handleKeydown" rows="1"
                :placeholder="$t('chat-input-placeholder')"></textarea>

-    <button class="send-btn" @click="submit" :disabled="!content.trim()">
+            <div class="message-actions">
+                <button class="plus-btn" @click="showMenu = !showMenu" :disabled="selectedFiles.length >= 8">
+                    <i class="fas fa-plus"></i>
+                </button>
+
+                <button class="send-btn" @click="submit" :disabled="!content.trim() && selectedFiles.length === 0">
                    <i class="fas fa-paper-plane"></i>
                </button>
            </div>
+        </div>
+    </div>
 </template>

 <script setup lang="ts">
-import { ref, nextTick, onMounted } from 'vue'
+import { ref, nextTick, onMounted, onUnmounted } from 'vue'
 import { saveMessageDraft, getMessageDraft } from '../store'
+import { useFluent } from 'fluent-vue';
+
+const { $t } = useFluent();
+
+const MAX_FILES = 8;
+const MAX_SIZE_MB = 10;
+const MAX_SIZE_BYTES = MAX_SIZE_MB * 1024 * 1024;

 const content = ref('')
 const textareaRef = ref<HTMLTextAreaElement | null>(null)
+const showMenu = ref(false)
+const selectedFiles = ref<File[]>([])
+const fileInput = ref<HTMLInputElement | null>(null)
+const menuContainer = ref<HTMLElement | null>(null)

-const emit = defineEmits<{ (e: 'send', content: string): void }>()
+const emit = defineEmits<{ (e: 'send', content: string, files?: File[]): void }>()
+
+onMounted(async () => {
+    const saved = await getMessageDraft()
+    if (saved) { content.value = saved; resize() }
+
+    document.addEventListener('mousedown', closeMenu)
+    window.addEventListener('keydown', closeMenu)
+})
+
+onUnmounted(() => {
+    document.removeEventListener('mousedown', closeMenu)
+    window.removeEventListener('keydown', closeMenu)
+})
+
+const closeMenu = (e: KeyboardEvent | MouseEvent) => {
+    // Close on Escape key
+    if (e instanceof KeyboardEvent && e.key === 'Escape') {
+        showMenu.value = false
+    }
+    // Close on click outside
+    if (e instanceof MouseEvent &&
+        showMenu.value &&
+        menuContainer.value &&
+        !menuContainer.value.contains(e.target as Node)) {
+        showMenu.value = false
+    }
+}
+
+function triggerPicker(accept: string, capture = false) {
+    if (!fileInput.value) return
+
+    if (accept === '*/*') {
+        fileInput.value.removeAttribute('accept')
+    } else {
+        fileInput.value.accept = accept
+    }
+
+    if (capture) {
+        fileInput.value.setAttribute('capture', 'environment')
+    } else {
+        fileInput.value.removeAttribute('capture')
+    }
+
+    fileInput.value.click()
+    showMenu.value = false
+}
+
+function handleFileChange(e: Event) {
+    const files = (e.target as HTMLInputElement).files;
+    if (!files) return;
+
+    const newFiles = Array.from(files);
+
+    if (selectedFiles.value.length + newFiles.length > MAX_FILES) {
+        alert($t('chat-error-too-many-files', { max: MAX_FILES }));
+    }
+
+    for (const file of newFiles) {
+        if (selectedFiles.value.length >= MAX_FILES) break;
+
+        if (file.size > MAX_SIZE_BYTES) {
+            alert($t('chat-error-file-too-large', { name: file.name, max: MAX_SIZE_MB }));
+            continue;
+        }
+
+        selectedFiles.value.push(file);
+    }
+
+    if (fileInput.value) fileInput.value.value = '';
+}
+
+function removeFile(index: number) {
+    selectedFiles.value.splice(index, 1)
+}
+
+function submit() {
+    if (!content.value.trim() && selectedFiles.value.length === 0) return
+    emit('send', content.value, selectedFiles.value)
+    content.value = ''
+    selectedFiles.value = []
+    saveMessageDraft('')
+    resize()
+}

 defineExpose({
    focus: () => {
@@ -37,14 +167,6 @@ function handleInput() {
    saveMessageDraft(content.value)
 }

-function submit() {
-  if (!content.value.trim()) return
-  emit('send', content.value)
-  content.value = ''
-  saveMessageDraft('')
-  resize()
-}
-
 function resize() {
    nextTick(() => {
        if (textareaRef.value) {
@@ -98,7 +220,8 @@ textarea {
    flex: 1;
 }

-.send-btn {
+.send-btn,
+.plus-btn {
    margin-right: 0.8rem;
    background: transparent;
    border: none;
@@ -117,4 +240,72 @@ textarea {
    cursor: not-allowed;
    opacity: 0.5;
 }
+
+.input-wrapper {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    background: var(--panel-bg);
+}
+
+.attachment-previews {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    padding: 8px;
+    border-bottom: 1px solid var(--border);
+}
+
+.preview-item {
+    background: var(--panel-accent);
+    padding: 4px 8px;
+    border-radius: 4px;
+    font-size: 0.8rem;
+    display: flex;
+    align-items: center;
+    gap: 5px;
+}
+
+.attachment-menu-container {
+    position: relative;
+}
+
+.attachment-popup {
+    position: absolute;
+    bottom: 100%;
+    left: 0;
+    background: var(--panel);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    padding: 5px;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    z-index: 100;
+    min-width: 250px;
+    margin-bottom: 10px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
+}
+
+.attachment-popup button {
+    background: transparent;
+    border: none;
+    color: var(--text);
+    padding: 10px;
+    text-align: left;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.attachment-popup button:hover {
+    background: var(--panel-hover);
+}
+
+.limit-reached {
+    color: var(--danger);
+    font-size: 0.7rem;
+    align-self: center;
+}
 </style>
@@ -1,6 +1,7 @@
 <template>
    <ul :class="{ 'is-compact': isCompact }">
-    <li v-for="(m, i) in messages" :key="i" class="message" :class="{ 'is-me': m.sender_uuid === currentUserUuid }">
+        <li v-for="(m, i) in messages" :key="m.uuid || i" class="message"
+            :class="{ 'is-me': m.sender_uuid === currentUserUuid }">
            <div class="sender-info">
                <img :src="getAvatarUrl(m.sender_uuid)" @error="handleAvatarError" class="avatar clickable"
                    @click.stop="openUserProfile(m)" />
@@ -9,7 +10,89 @@
                </div>
                <span class="timestamp">{{ m.sent_at }}</span>
            </div>
-      <div class="message-content">{{ m.content }}</div>
+
+            <div class="message-content">
+                <!-- Text content of the message -->
+                <div v-if="m.content" class="text-body">{{ m.content }}</div>
+
+                <!-- Attachments Section -->
+                <div v-if="m.attachments && m.attachments.length > 0" class="attachments-container">
+                    <div v-for="att in m.attachments" :key="att.uuid" class="attachment-wrapper">
+
+                        <!-- Image Rendering -->
+                        <div v-if="att.file_type === 'image'" class="image-attachment">
+                            <div class="media-container">
+                                <!-- Loading / Error states -->
+                                <div v-if="loadStatus[att.uuid] !== 'loaded'" class="media-placeholder"
+                                    :class="{ 'is-error': loadStatus[att.uuid] === 'error' }">
+                                    <div v-if="loadStatus[att.uuid] === 'error'" class="error-text">
+                                        <i class="fa-solid fa-circle-exclamation"></i>
+                                        <span>Failed to load image</span>
+                                        <button class="retry-btn" @click.stop="retryAttachment(att.uuid)">
+                                            <p><i class="fa-solid fa-rotate-right"></i>Try again.</p>
+                                        </button>
+                                    </div>
+                                    <div v-else class="spinner"></div>
+                                </div>
+
+                                <!-- UPDATED: triggerViewer now takes the message and specific attachment -->
+                                <img :src="getFileUrl(att.uuid)" loading="lazy" @load="loadStatus[att.uuid] = 'loaded'"
+                                    @error="loadStatus[att.uuid] = 'error'" @click="triggerViewer(m, att)"
+                                    :class="{ 'is-visible': loadStatus[att.uuid] === 'loaded' }" />
+                            </div>
+                        </div>
+
+                        <!-- Video Rendering -->
+                        <div v-else-if="att.file_type === 'video'" class="video-attachment">
+                            <div class="media-container">
+                                <!-- Loading / Error states -->
+                                <div v-if="loadStatus[att.uuid] !== 'loaded'" class="media-placeholder"
+                                    :class="{ 'is-error': loadStatus[att.uuid] === 'error' }">
+                                    <div v-if="loadStatus[att.uuid] === 'error'" class="error-text">
+                                        <i class="fa-solid fa-circle-exclamation"></i>
+                                        <span>Failed to load video</span>
+                                        <button class="retry-btn" @click.stop="retryAttachment(att.uuid)">
+                                            <i class="fa-solid fa-rotate-right"></i>
+                                            <p>Try again.</p>
+                                        </button>
+                                    </div>
+                                    <div v-else class="spinner"></div>
+                                </div>
+
+                                <video controls :src="getFileUrl(att.uuid)"
+                                    @loadeddata="loadStatus[att.uuid] = 'loaded'"
+                                    @error="loadStatus[att.uuid] = 'error'"
+                                    :class="{ 'is-visible': loadStatus[att.uuid] === 'loaded' }">
+                                </video>
+                            </div>
+                        </div>
+
+                        <!-- Text File Preview -->
+                        <div v-else-if="att.file_type === 'textfile'" class="textfile-attachment">
+                            <div class="file-header">
+                                <i class="fa-solid fa-file-lines"></i>
+                                <span class="file-name">{{ formatFileName(att.file_name) }}</span>
+                                <!-- <a :href="getFileUrl(att.uuid)" download class="download-link"> -->
+                                <button class="download-btn" @click="openInBrowser(att.uuid)" title="Open in browser">
+                                    <i class="fa-solid fa-download"></i>
+                                </button>
+                            </div>
+                            <pre class="preview-box">{{ textPreviews[att.uuid] || '...' }}</pre>
+                        </div>
+
+                        <!-- Generic Binary File -->
+                        <div v-else class="generic-attachment">
+                            <i class="fa-solid fa-file-export"></i>
+                            <span class="file-name">{{ formatFileName(att.file_name) }}</span>
+                            <!-- <a :href="getFileUrl(att.uuid)" download class="download-link"> -->
+                            <button class="download-btn" @click="openInBrowser(att.uuid)">
+                                <i class="fa-solid fa-download"></i>
+                            </button>
+                        </div>
+
+                    </div>
+                </div>
+            </div>
        </li>
    </ul>

@@ -18,19 +101,69 @@
 </template>

 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, watch } from 'vue'
 import type { Message } from '../types'
 import { getAvatarUrl, getCompactLayoutPreference } from '../store.ts'
 import defaultAvatar from '../assets/default-avatar.png'
 import { getAuthData } from '../store.ts';
 import UserProfileModal from './UserProfileModal.vue';
+import { API } from '../main.ts';
+import { openUrl } from '@tauri-apps/plugin-opener';

-defineProps<{ messages: Message[] }>()
+// Viewer imports
+import 'viewerjs/dist/viewer.css'
+import { api as viewerApi } from 'v-viewer'

+const props = defineProps<{ messages: Message[] }>()
+
+const loadStatus = ref<Record<string, 'loading' | 'loaded' | 'error'>>({})
+const retrySeeds = ref<Record<string, number>>({})
 const currentUserUuid = ref<string | null>(null)
 const isCompact = ref(false)
-
 const selectedUser = ref<{ name: string, uuid: string } | null>(null)
+const textPreviews = ref<Record<string, string>>({})
+
+const viewerOptions: any = {
+    toolbar: {
+        zoomIn: 4,
+        zoomOut: 4,
+        oneToOne: 4,
+        reset: 4,
+        prev: 4, // Enabled
+        play: { show: 4, size: 'large' },
+        next: 4, // Enabled
+        rotateLeft: 4,
+        rotateRight: 4,
+        flipHorizontal: 4,
+        flipVertical: 4,
+    },
+    title: false,
+    navbar: true, // Enabled navbar so user sees there are multiple images
+    transition: true,
+    fullscreen: true
+}
+
+// UPDATED: Logic to gather sibling images
+const triggerViewer = (message: Message, clickedAttachment: any) => {
+    if (!message.attachments) return;
+
+    // 1. Get all attachments in this message that are images
+    const imageAttachments = message.attachments.filter(a => a.file_type === 'image');
+
+    // 2. Convert them to URLs
+    const imageUrls = imageAttachments.map(a => getFileUrl(a.uuid));
+
+    // 3. Find the index of the image that was actually clicked
+    const initialIndex = imageAttachments.findIndex(a => a.uuid === clickedAttachment.uuid);
+
+    viewerApi({
+        options: {
+            ...viewerOptions,
+            initialViewIndex: initialIndex >= 0 ? initialIndex : 0
+        },
+        images: imageUrls,
+    })
+}

 onMounted(async () => {
    const auth = await getAuthData()
@@ -40,6 +173,33 @@ onMounted(async () => {
    isCompact.value = await getCompactLayoutPreference()
 })

+const openInBrowser = async (fileUuid: string) => {
+    const url = getFileUrl(fileUuid);
+    try {
+        await openUrl(url);
+    } catch (err) {
+        console.error("Failed to open external browser:", err);
+    }
+};
+
+const getFileUrl = (fileUuid: string) => {
+    let url = `${API}/uploads/${fileUuid}`;
+    if (retrySeeds.value[fileUuid]) {
+        url += `?t=${retrySeeds.value[fileUuid]}`;
+    }
+    return url;
+}
+
+const retryAttachment = (fileUuid: string) => {
+    loadStatus.value[fileUuid] = 'loading';
+    retrySeeds.value[fileUuid] = Date.now();
+}
+
+const formatFileName = (name: string) => {
+    const parts = name.split('_');
+    return parts.length > 1 ? parts.slice(1).join('_') : name;
+}
+
 const handleAvatarError = (event: Event) => {
    const img = event.target as HTMLImageElement;
    img.src = defaultAvatar;
@@ -51,6 +211,26 @@ const openUserProfile = (message: Message) => {
        uuid: message.sender_uuid
    }
 }
+
+watch(() => props.messages, (newMessages) => {
+    newMessages.forEach(m => {
+        m.attachments?.forEach(async (att) => {
+            if (att.file_type === 'textfile' && !textPreviews.value[att.uuid]) {
+                try {
+                    const response = await fetch(getFileUrl(att.uuid));
+                    if (response.ok) {
+                        const text = await response.text();
+                        textPreviews.value[att.uuid] = text.length > 1000
+                            ? text.substring(0, 1000) + '...'
+                            : text;
+                    }
+                } catch (e) {
+                    textPreviews.value[att.uuid] = "Could not load preview.";
+                }
+            }
+        })
+    })
+}, { immediate: true, deep: true });
 </script>

 <style scoped>
@@ -69,11 +249,12 @@ ul {
    align-items: flex-start;
    justify-content: center;
    padding: 0;
-  max-width: 80%;
+    max-width: 85%;
    width: fit-content;
    align-self: flex-start;
    border-radius: var(--radius);
    background: var(--panel-accent);
+    overflow: hidden;
 }

 .sender-info {
@@ -108,13 +289,13 @@ ul {
 }

 .message-content {
-  padding: 10px;
-  padding-left: 1rem;
-  padding-right: 1rem;
+    padding: 10px 18px;
    white-space: pre-wrap;
    word-wrap: break-word;
    max-width: 100%;
-  display: block;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
 }

 .message.is-me {
@@ -129,12 +310,184 @@ ul {

 .message.is-me .message-content {
    text-align: right;
-  padding-right: 1rem;
+    align-items: flex-end;
 }

+/* Attachments */
+.attachments-container {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    width: 100%;
+}
+
+.attachment-wrapper {
+    max-width: 100%;
+}
+
+/* Unified Media Container (Images & Videos) */
+.media-container {
+    position: relative;
+    min-width: 200px;
+    min-height: 120px;
+    background: var(--panel-bg);
+    border-radius: 4px;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid var(--border);
+}
+
+.media-placeholder {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background-color: rgba(0, 0, 0, 0.1);
+    z-index: 1;
+}
+
+.image-attachment img,
+.video-attachment video {
+    max-width: 100%;
+    max-height: 400px;
+    border-radius: 4px;
+    display: block;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+
+.image-attachment img {
+    cursor: pointer;
+}
+
+.image-attachment img.is-visible,
+.video-attachment video.is-visible {
+    opacity: 1;
+}
+
+/* Loading & Error UI */
+.spinner {
+    width: 30px;
+    height: 30px;
+    border: 3px solid rgba(255, 255, 255, 0.1);
+    border-top-color: var(--accent, #7289da);
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+.error-text {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+    color: #ff4444;
+    font-size: 0.8rem;
+    padding: 10px;
+}
+
+.retry-btn,
+.download-btn {
+    font-size: 1rem;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    color: var(--text);
+    padding: 0;
+    transition: color 0.25s;
+}
+
+.retry-btn i {
+    margin-right: 8px;
+}
+
+.retry-btn i:hover {
+    color: var(--muted);
+}
+
+.retry-btn:hover i {
+    color: var(--accent);
+}
+
+.retry-btn:hover {
+    color: var(--accent);
+}
+
+/* Text file preview styling */
+.textfile-attachment {
+    background: var(--panel-bg);
+    border: 1px solid var(--border);
+    border-radius: 4px;
+    max-width: 500px;
+    text-align: left;
+}
+
+.file-header {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 8px 12px;
+    background: rgba(0, 0, 0, 0.1);
+    border-bottom: 1px solid var(--border);
+}
+
+.file-name {
+    flex: 1;
+    font-size: 0.85rem;
+    font-weight: bold;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.preview-box {
+    margin: 0;
+    padding: 10px;
+    font-size: 0.8rem;
+    max-height: 150px;
+    overflow-y: auto;
+    font-family: 'Courier New', Courier, monospace;
+    background: transparent;
+    color: var(--text);
+    white-space: pre-wrap;
+}
+
+.generic-attachment {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 10px 15px;
+    background: var(--panel-bg);
+    border: 1px solid var(--border);
+    border-radius: 4px;
+    min-width: 200px;
+}
+
+.download-link {
+    color: var(--accent);
+    transition: transform 0.1s;
+}
+
+.download-link:hover {
+    transform: scale(1.1);
+}
+
+/* Compact Mode */
 ul.is-compact .message {
    background: transparent;
-  max-width: 90%;
+    max-width: 95%;
 }

 ul.is-compact .sender-info {
@@ -51,6 +51,9 @@ chat-create-submit = Create
 chat-connecting = Connecting to room...
 chat-connecting-failed = Could not connect. Check internet connection.
 chat-voice-select-input = Select input device.
+chat-attach-image = Attach images
+chat-attach-file = Attach files
+chat-attach-camera = Use camera

 ## User profile
 profile-title = User profile
@@ -51,6 +51,9 @@ chat-create-submit = Créer
 chat-connecting = Connexion au salon...
 chat-connecting-failed = Impossible d'établir la connexion. Vérifiez votre internet.
 chat-voice-select-input = Sélectionnez un périphérique d'entrée.
+chat-attach-image = Ajouter des images
+chat-attach-file = Ajouter des fichiers
+chat-attach-camera = Utiliser la caméra

 ## User profile
 profile-title = Profil d'utilisateur
@@ -54,9 +54,9 @@ async function init() {

 init()

-// export const API = 'http://127.0.0.1:8080'
-export const API = 'http://192.168.1.183:8080'
+export const API = 'http://127.0.0.1:8080'
+// export const API = 'http://192.168.1.183:8080'
 // export const API = 'https://alatreon.org/frangipane'
-// export const API_WS = 'ws://127.0.0.1:8080/ws'
-export const API_WS = 'ws://192.168.1.183:8080/ws'
+export const API_WS = 'ws://127.0.0.1:8080/ws'
+// export const API_WS = 'ws://192.168.1.183:8080/ws'
 // export const API_WS = 'wss://alatreon.org/frangipane/ws'
@@ -31,14 +31,21 @@ export interface Room {
    unread_count: number
 }

+export interface Attachment {
+    uuid: string;
+    file_type: 'image' | 'video' | 'textfile' | 'binaryfile';
+    file_name: string;
+}
+
 export interface Message {
-    uuid: string
-    room_uuid: string
-    sender: string
-    sender_uuid: string
-    message_type: 'text'
-    content: string
-    sent_at: string
+    uuid: string;
+    room_uuid: string;
+    sender: string;
+    sender_uuid: string;
+    message_type: 'text' | 'attachment';
+    content: string;
+    sent_at: string;
+    attachments?: Attachment[];
 }

 export interface Friend {