added support for files in messages, and updated dependencies

package.json

@@ -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"
   },

src/api/messages.ts

@@ -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> {
+export function uploadMessage(roomUuid: string, content: string, files: File[]) {
-    const res = await apiFetch<{ token: string }>(`/ws/issue-token`);
+    const formData = new FormData();
-    return res.token;
+    formData.append('content', content);
+    files.forEach(file => {
+        formData.append('file', file);
+    });
+
+    return apiFetch<Message>(`/messages/${roomUuid}/upload`, {
+        method: 'POST',
+        body: formData,
+    });
 }

src/base.css

@@ -166,10 +166,14 @@ i {
   transition: color 0.2s ease;
 }
 
-i:hover {
+button:hover i {
-  color: var(--text);
+    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);
   }

src/components/ChatWindow.vue

@@ -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,9 +324,25 @@ const handleGlobalKeyDown = (event: KeyboardEvent) => {
     }
 };
 
-async function onSend(content: string) {
+async function onSend(content: string, files?: File[]) {
-    if (props.uuid === 'none') return;
+    if (props.uuid === 'none' || isSending.value) return;
-    await sendMessage(props.uuid, content);
+
+    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() {

src/components/MessageInput.vue

@@ -1,120 +1,311 @@
 <template>
-  <div class="container-div">
+    <div class="input-wrapper">
-    <textarea ref="textareaRef" v-model="content" @input="handleInput" @keydown="handleKeydown" rows="1"
+        <!-- Attachment Preview Bar -->
-      :placeholder="$t('chat-input-placeholder')"></textarea>
+        <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>
 
-    <button class="send-btn" @click="submit" :disabled="!content.trim()">
+        <div class="container-div" ref="menuContainer">
-      <i class="fas fa-paper-plane"></i>
+            <div class="attachment-menu-container">
-    </button>
+                <!-- Popup Menu -->
-  </div>
+                <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>
+
+            <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 }>()
-
-defineExpose({
-  focus: () => {
-    textareaRef.value?.focus()
-  }
-})
 
 onMounted(async () => {
-  const saved = await getMessageDraft()
+    const saved = await getMessageDraft()
-  if (saved) {
+    if (saved) { content.value = saved; resize() }
-    content.value = saved
+
-    resize()
+    document.addEventListener('mousedown', closeMenu)
-  }
+    window.addEventListener('keydown', closeMenu)
 })
 
-function handleInput() {
+onUnmounted(() => {
-  resize()
+    document.removeEventListener('mousedown', closeMenu)
-  saveMessageDraft(content.value)
+    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()) return
+    if (!content.value.trim() && selectedFiles.value.length === 0) return
-  emit('send', content.value)
+    emit('send', content.value, selectedFiles.value)
-  content.value = ''
+    content.value = ''
-  saveMessageDraft('')
+    selectedFiles.value = []
-  resize()
+    saveMessageDraft('')
+    resize()
+}
+
+defineExpose({
+    focus: () => {
+        textareaRef.value?.focus()
+    }
+})
+
+onMounted(async () => {
+    const saved = await getMessageDraft()
+    if (saved) {
+        content.value = saved
+        resize()
+    }
+})
+
+function handleInput() {
+    resize()
+    saveMessageDraft(content.value)
 }
 
 function resize() {
-  nextTick(() => {
+    nextTick(() => {
-    if (textareaRef.value) {
+        if (textareaRef.value) {
-      textareaRef.value.style.height = 'auto'
+            textareaRef.value.style.height = 'auto'
-      textareaRef.value.style.height = textareaRef.value.scrollHeight + 'px'
+            textareaRef.value.style.height = textareaRef.value.scrollHeight + 'px'
-    }
+        }
-  })
+    })
 }
 
 function handleKeydown(e: KeyboardEvent) {
-  if ((e.shiftKey || e.altKey) && e.key === 'Enter') {
+    if ((e.shiftKey || e.altKey) && e.key === 'Enter') {
-    const textarea = e.target as HTMLTextAreaElement
+        const textarea = e.target as HTMLTextAreaElement
-    const start = textarea.selectionStart
+        const start = textarea.selectionStart
-    const end = textarea.selectionEnd
+        const end = textarea.selectionEnd
-    content.value = content.value.substring(0, start) + '\n' + content.value.substring(end)
+        content.value = content.value.substring(0, start) + '\n' + content.value.substring(end)
-    nextTick(() => {
+        nextTick(() => {
-      textarea.selectionStart = textarea.selectionEnd = start + 1
+            textarea.selectionStart = textarea.selectionEnd = start + 1
-    })
+        })
-    resize()
+        resize()
 
-    saveMessageDraft(content.value)
+        saveMessageDraft(content.value)
 
-    e.preventDefault()
+        e.preventDefault()
-  } else if (!e.shiftKey && !e.altKey && e.key === 'Enter') {
+    } else if (!e.shiftKey && !e.altKey && e.key === 'Enter') {
-    submit()
+        submit()
-    e.preventDefault()
+        e.preventDefault()
-  }
+    }
 }
 </script>
 
 <style scoped>
 .container-div {
-  position: relative;
+    position: relative;
-  width: 100%;
+    width: 100%;
-  display: flex;
+    display: flex;
-  align-items: flex-end;
+    align-items: flex-end;
 }
 
 textarea {
-  width: 100%;
+    width: 100%;
-  resize: none;
+    resize: none;
-  overflow: hidden;
+    overflow: hidden;
-  padding: 0.5rem;
+    padding: 0.5rem;
-  font-size: 1rem;
+    font-size: 1rem;
-  line-height: 1.4;
+    line-height: 1.4;
-  box-sizing: border-box;
+    box-sizing: border-box;
-  background: transparent;
+    background: transparent;
-  border: none;
+    border: none;
-  color: inherit;
+    color: inherit;
-  outline: none;
+    outline: none;
-  flex: 1;
+    flex: 1;
 }
 
-.send-btn {
+.send-btn,
-  margin-right: 0.8rem;
+.plus-btn {
-  background: transparent;
+    margin-right: 0.8rem;
-  border: none;
+    background: transparent;
-  cursor: pointer;
+    border: none;
-  color: var(--text);
+    cursor: pointer;
-  padding: 0;
+    color: var(--text);
-  transition: color 0.2s;
+    padding: 0;
-  font-size: 1.2rem;
+    transition: color 0.2s;
+    font-size: 1.2rem;
 }
 
 .send-btn:hover:not(:disabled) {
-  color: var(--accent);
+    color: var(--accent);
 }
 
 .send-btn:disabled {
-  cursor: not-allowed;
+    cursor: not-allowed;
-  opacity: 0.5;
+    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>

src/components/MessageList.vue

@@ -1,165 +1,518 @@
 <template>
-  <ul :class="{ 'is-compact': isCompact }">
+    <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"
-      <div class="sender-info">
+            :class="{ 'is-me': m.sender_uuid === currentUserUuid }">
-        <img :src="getAvatarUrl(m.sender_uuid)" @error="handleAvatarError" class="avatar clickable"
+            <div class="sender-info">
-          @click.stop="openUserProfile(m)" />
+                <img :src="getAvatarUrl(m.sender_uuid)" @error="handleAvatarError" class="avatar clickable"
-        <div class="sender clickable" @click.stop="openUserProfile(m)">
+                    @click.stop="openUserProfile(m)" />
-          {{ m.sender }}
+                <div class="sender clickable" @click.stop="openUserProfile(m)">
-        </div>
+                    {{ m.sender }}
-        <span class="timestamp">{{ m.sent_at }}</span>
+                </div>
-      </div>
+                <span class="timestamp">{{ m.sent_at }}</span>
-      <div class="message-content">{{ m.content }}</div>
+            </div>
-    </li>
-  </ul>
 
-  <UserProfileModal v-if="selectedUser" :username="selectedUser.name" :user-uuid="selectedUser.uuid"
+            <div class="message-content">
-    @close="selectedUser = null" />
+                <!-- 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>
+
+    <UserProfileModal v-if="selectedUser" :username="selectedUser.name" :user-uuid="selectedUser.uuid"
+        @close="selectedUser = null" />
 </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()
+    const auth = await getAuthData()
-  if (auth.user) {
+    if (auth.user) {
-    currentUserUuid.value = auth.user.uuid
+        currentUserUuid.value = auth.user.uuid
-  }
+    }
-  isCompact.value = await getCompactLayoutPreference()
+    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;
+    const img = event.target as HTMLImageElement;
-  img.src = defaultAvatar;
+    img.src = defaultAvatar;
 };
 
 const openUserProfile = (message: Message) => {
-  selectedUser.value = {
+    selectedUser.value = {
-    name: message.sender,
+        name: message.sender,
-    uuid: message.sender_uuid
+        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>
 ul {
-  display: flex;
+    display: flex;
-  flex-direction: column;
+    flex-direction: column;
-  gap: 0.75rem;
+    gap: 0.75rem;
-  padding: 0;
+    padding: 0;
-  margin: 0;
+    margin: 0;
-  list-style: none;
+    list-style: none;
 }
 
 .message {
-  display: flex;
+    display: flex;
-  flex-direction: column;
+    flex-direction: column;
-  align-items: flex-start;
+    align-items: flex-start;
-  justify-content: center;
+    justify-content: center;
-  padding: 0;
+    padding: 0;
-  max-width: 80%;
+    max-width: 85%;
-  width: fit-content;
+    width: fit-content;
-  align-self: flex-start;
+    align-self: flex-start;
-  border-radius: var(--radius);
+    border-radius: var(--radius);
-  background: var(--panel-accent);
+    background: var(--panel-accent);
+    overflow: hidden;
 }
 
 .sender-info {
-  display: flex;
+    display: flex;
-  flex-direction: row;
+    flex-direction: row;
-  justify-content: flex-start;
+    justify-content: flex-start;
-  align-items: center;
+    align-items: center;
-  gap: 0.7rem;
+    gap: 0.7rem;
-  border-bottom: 1px solid var(--border);
+    border-bottom: 1px solid var(--border);
-  width: 100%;
+    width: 100%;
-  padding: 5px 18px;
+    padding: 5px 18px;
 }
 
 .avatar {
-  width: 32px;
+    width: 32px;
-  height: 32px;
+    height: 32px;
-  border-radius: 50%;
+    border-radius: 50%;
-  object-fit: cover;
+    object-fit: cover;
 }
 
 .clickable {
-  cursor: pointer;
+    cursor: pointer;
-  transition: opacity 0.2s;
+    transition: opacity 0.2s;
 }
 
 .clickable:hover {
-  opacity: 0.8;
+    opacity: 0.8;
 }
 
 .sender.clickable:hover {
-  text-decoration: underline;
+    text-decoration: underline;
 }
 
 .message-content {
-  padding: 10px;
+    padding: 10px 18px;
-  padding-left: 1rem;
+    white-space: pre-wrap;
-  padding-right: 1rem;
+    word-wrap: break-word;
-  white-space: pre-wrap;
+    max-width: 100%;
-  word-wrap: break-word;
+    display: flex;
-  max-width: 100%;
+    flex-direction: column;
-  display: block;
+    gap: 8px;
 }
 
 .message.is-me {
-  align-self: flex-end;
+    align-self: flex-end;
-  align-items: flex-end;
+    align-items: flex-end;
 }
 
 .message.is-me .sender-info {
-  flex-direction: row-reverse;
+    flex-direction: row-reverse;
-  text-align: right;
+    text-align: right;
 }
 
 .message.is-me .message-content {
-  text-align: right;
+    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;
+    background: transparent;
-  max-width: 90%;
+    max-width: 95%;
 }
 
 ul.is-compact .sender-info {
-  border-bottom: none;
+    border-bottom: none;
-  padding: 5px 18px 0 18px;
+    padding: 5px 18px 0 18px;
 }
 
 ul.is-compact .message-content {
-  padding: 5px 10px 10px 50px;
+    padding: 5px 10px 10px 50px;
 }
 
 ul.is-compact .message.is-me .message-content {
-  padding-right: 50px;
+    padding-right: 50px;
-  padding-left: 0;
+    padding-left: 0;
-  text-align: right;
+    text-align: right;
 }
 
 .sender {
-  font-weight: bold;
+    font-weight: bold;
-  font-size: 1.1rem;
+    font-size: 1.1rem;
 }
 
 .timestamp {
-  font-weight: normal;
+    font-weight: normal;
-  opacity: 0.7;
+    opacity: 0.7;
-  font-size: 0.7rem;
+    font-size: 0.7rem;
 }
 </style>

src/locales/en.ftl

@@ -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

src/locales/fr.ftl

@@ -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

src/main.ts

@@ -54,9 +54,9 @@ async function init() {
 
 init()
 
-// export const API = 'http://127.0.0.1:8080'
+export const API = 'http://127.0.0.1:8080'
-export const API = 'http://192.168.1.183: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://127.0.0.1:8080/ws'
-export const API_WS = 'ws://192.168.1.183:8080/ws'
+// export const API_WS = 'ws://192.168.1.183:8080/ws'
 // export const API_WS = 'wss://alatreon.org/frangipane/ws'

src/types.ts

@@ -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
+    uuid: string;
-    room_uuid: string
+    room_uuid: string;
-    sender: string
+    sender: string;
-    sender_uuid: string
+    sender_uuid: string;
-    message_type: 'text'
+    message_type: 'text' | 'attachment';
-    content: string
+    content: string;
-    sent_at: string
+    sent_at: string;
+    attachments?: Attachment[];
 }
 
 export interface Friend {