feat(Chat): Possible to get files from storage to send on chats

src/lib/components/files/FileFolder.svelte

@@ -14,6 +14,7 @@
     export let name = info.displayName
     export let isRenaming: OperationState = OperationState.Initial
     export let hook: string = ""
+    export let avoidOpenImageModal: boolean = false
     export let onRename: (name: string, cancel: boolean) => Promise<boolean> = _ => Promise.resolve(true)
     let hasFocus = false
     let oldName = name
@@ -133,7 +134,7 @@
     </div>
 </section>
 
-{#if openImageModal}
+{#if openImageModal && !avoidOpenImageModal}
     <Modal on:close={onCloseModal}>
         <img class="img-preview-on-storage-on-modal" src={info.imageThumbnail} alt={name} />
     </Modal>

src/lib/components/ui/Modal.svelte

@@ -13,6 +13,7 @@
     export let withControls: boolean = false
     export let hook: string = ""
     export let escape: boolean = false
+    export let large: boolean = false
 
     let clazz = ""
     export { clazz as class }
@@ -40,7 +41,7 @@
             <slot></slot>
         </div>
     {:else}
-        <div class="body {padded ? 'padded' : ''} {clazz}" on:click|stopPropagation>
+        <div class="body {padded ? 'padded' : ''} {large ? 'large' : ''} {clazz}" on:click|stopPropagation>
             {#if withControls}
                 <Controls>
                     <slot name="controls"></slot>
@@ -105,6 +106,17 @@
                 align-items: center;
                 padding: var(--padding-minimal);
             }
+
+            &.large {
+                min-width: 0;
+                width: calc(var(--max-component-width) * 2);
+                height: var(--max-component-width);
+
+                .content {
+                    width: 100%;
+                    height: 100%;
+                }
+            }
         }
     }
 

src/lib/elements/FileUploadPreview.svelte

@@ -1,46 +1,90 @@
 <script lang="ts">
     import { Button, Icon, Text } from "$lib/elements"
     import { Shape, Size } from "$lib/enums"
+    import { Store } from "$lib/state/Store"
+    import type { Chat, FileInfo } from "$lib/types"
     import { createEventDispatcher } from "svelte"
 
     import { _ } from "svelte-i18n"
+    import { derived } from "svelte/store"
 
-    export let filesSelected: [File?, string?][] = []
+    export let activeChat: Chat
+
+    let chatAttachmentsToSend = Store.state.chatAttachmentsToSend
+
+    let filesSelectedFromStorage = derived(chatAttachmentsToSend, $chatAttachmentsToSend => {
+        return $chatAttachmentsToSend[activeChat.id]?.storageFiles || []
+    })
+
+    let filesSelected = derived(chatAttachmentsToSend, $chatAttachmentsToSend => {
+        return $chatAttachmentsToSend[activeChat.id]?.localFiles || []
+    })
     const dispatcher = createEventDispatcher()
     function removeFile(file: File | string) {
         dispatcher("remove", file)
     }
+    function removeFileFromStorage(file: FileInfo) {
+        dispatcher("removeFileFromStorage", file)
+    }
 </script>
 
-<div class="files-selected">
-    {#each filesSelected as [file, path]}
-        <div class="selected-file">
-            <div class="file-preview">
-                {#if file && file.type.startsWith("image")}
-                    <img class="file-preview-image" src={URL.createObjectURL(file)} alt="" />
-                {:else}
-                    <Icon icon={Shape.Document} />
-                {/if}
-            </div>
-            <div class="details">
-                <Text size={Size.Smallest}>{file ? file.name : path}</Text>
-            </div>
-            <div class="control">
-                <Button
-                    icon
-                    on:click={_ => {
-                        if (file) {
-                            removeFile(file)
-                        } else if (path) {
-                            removeFile(path)
-                        }
-                    }}>
-                    <Icon icon={Shape.Trash} />
-                </Button>
+{#if $filesSelected.length > 0 || $filesSelectedFromStorage.length > 0}
+    <div class="files-selected">
+        {#if $filesSelected.length > 0}
+            {#each $filesSelected as [file, path]}
+                <div class="selected-file">
+                    <div class="file-preview">
+                        {#if file && typeof file === "object" && file.type.startsWith("image")}
+                            <img class="file-preview-image" src={URL.createObjectURL(file)} alt="" />
+                        {:else}
+                            <Icon icon={Shape.Document} />
+                        {/if}
+                    </div>
+                    <div class="details">
+                        <Text size={Size.Smallest}>{file && typeof file === "object" ? file.name : path}</Text>
+                    </div>
+                    <div class="control">
+                        <Button
+                            icon
+                            on:click={_ => {
+                                if (file) {
+                                    removeFile(file)
+                                } else if (path) {
+                                    removeFile(path)
+                                }
+                            }}>
+                            <Icon icon={Shape.Trash} />
+                        </Button>
+                    </div>
+                </div>
+            {/each}
+        {/if}
+
+        {#each $filesSelectedFromStorage as remoteFile (remoteFile.remotePath)}
+            <div class="selected-file">
+                <div class="file-preview">
+                    {#if remoteFile && remoteFile.imageThumbnail?.startsWith("data:image")}
+                        <img class="file-preview-image" src={remoteFile.imageThumbnail} alt="" />
+                    {:else}
+                        <Icon icon={Shape.Document} />
+                    {/if}
+                </div>
+                <div class="details">
+                    <Text size={Size.Smallest}>{remoteFile.displayName ?? remoteFile.name}</Text>
+                </div>
+                <div class="control">
+                    <Button
+                        icon
+                        on:click={_ => {
+                            removeFileFromStorage(remoteFile)
+                        }}>
+                        <Icon icon={Shape.Trash} />
+                    </Button>
+                </div>
             </div>
-        </div>
-    {/each}
-</div>
+        {/each}
+    </div>
+{/if}
 
 <style lang="scss">
     .files-selected {

src/lib/layouts/Chatbar.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { Button, Icon, Input, Label } from "$lib/elements"
-    import { Appearance, MessageAttachmentKind, MessagePosition, Shape, Size } from "$lib/enums"
+    import { Appearance, MessagePosition, Shape, Size } from "$lib/enums"
     import { _ } from "svelte-i18n"
     import Controls from "./Controls.svelte"
     import { Store } from "$lib/state/Store"
@@ -9,26 +9,21 @@
     import { RaygunStoreInstance, type FileAttachment } from "$lib/wasm/RaygunStore"
     import { createEventDispatcher, onMount } from "svelte"
     import { ConversationStore } from "$lib/state/conversation"
-    import type { Chat, GiphyGif, User } from "$lib/types"
+    import type { Chat, FileInfo, GiphyGif, User } from "$lib/types"
     import { Message, PopupButton } from "$lib/components"
-    import { OperationState, type Message as MessageType } from "$lib/types"
-    import { FileEmbed, ImageEmbed, ProfilePicture, STLViewer } from "$lib/components"
+    import { type Message as MessageType } from "$lib/types"
+    import { ProfilePicture } from "$lib/components"
     import CombinedSelector from "$lib/components/messaging/CombinedSelector.svelte"
     import { checkMobile } from "$lib/utils/Mobile"
     import { UIStore } from "$lib/state/ui"
     import { emojiList, emojiRegexMap } from "$lib/components/messaging/emoji/EmojiList"
     import { tempCDN } from "$lib/utils/CommonVariables"
-    import AudioEmbed from "$lib/components/messaging/embeds/AudioEmbed.svelte"
-    import VideoEmbed from "$lib/components/messaging/embeds/VideoEmbed.svelte"
-    import TextDocument from "$lib/components/messaging/embeds/TextDocument.svelte"
     import { getValidPaymentRequest } from "$lib/utils/Wallet"
     import { VoiceRTCMessageType } from "$lib/media/Voice"
     import Text from "$lib/elements/Text.svelte"
     import StoreResolver from "$lib/components/utils/StoreResolver.svelte"
-    import { emojiRegex } from "$lib/components/utils/Emoji"
 
     export let replyTo: MessageType | undefined = undefined
-    export let filesSelected: [File?, string?][] = []
     export let emojiClickHook: (emoji: string) => boolean
     export let activeChat: Chat
     export const typing: User[] = []
@@ -49,7 +44,6 @@
     }
 
     $: if (message) {
-        let messages = get(Store.state.chatMessagesToSend)
         chatMessages.update(messages => {
             messages[activeChat.id] = $message
             return messages
@@ -58,19 +52,39 @@
     }
 
     async function sendMessage(text: string, isStickerOrGif: boolean = false) {
+        message.set("")
+        let filesSelected = get(Store.state.chatAttachmentsToSend)[activeChat.id]?.localFiles
+        let filesSelectedFromStorage: FileInfo[] = get(Store.state.chatAttachmentsToSend)[activeChat.id]?.storageFiles
+
+        if (text.trim() === "" && filesSelected && filesSelected.length > 0 && filesSelectedFromStorage && filesSelectedFromStorage.length > 0) {
+            return
+        }
+
         let attachments: FileAttachment[] = []
-        filesSelected.forEach(([file, path]) => {
-            if (file) {
-                attachments.push({
-                    file: file.name,
-                    attachment: [file.stream(), file.size],
-                })
-            } else if (path) {
+
+        if (filesSelected && filesSelected.length > 0) {
+            filesSelected.forEach(([file, path]) => {
+                if (file) {
+                    attachments.push({
+                        file: file.name,
+                        attachment: [file.stream(), file.size],
+                    })
+                } else if (path) {
+                    attachments.push({
+                        file: path,
+                    })
+                }
+            })
+        }
+
+        if (filesSelectedFromStorage && filesSelectedFromStorage.length > 0) {
+            filesSelectedFromStorage.forEach(file => {
                 attachments.push({
-                    file: path,
+                    file: file.remotePath,
                 })
-            }
-        })
+            })
+        }
+
         let chat = get(Store.state.activeChat)
         let txt = text.split("\n")
         let result = replyTo ? await RaygunStoreInstance.reply(chat.id, replyTo.id, txt) : await RaygunStoreInstance.send(get(Store.state.activeChat).id, text.split("\n"), attachments)
@@ -79,7 +93,6 @@
             ConversationStore.addPendingMessages(chat.id, res.message, txt)
         })
         if (!isStickerOrGif) {
-            message.set("")
             chatMessages.update(messages => {
                 messages[activeChat.id] = ""
                 return messages

src/lib/state/Store.ts

@@ -29,6 +29,7 @@ class GlobalStore {
                 },
             }),
             chatMessagesToSend: createPersistentState("uplink.chatMessagesToSend", {}),
+            chatAttachmentsToSend: createPersistentState("uplink.chatAttachmentsToSend", {}),
             devices: {
                 input: createPersistentState("uplink.devices.input", "default"),
                 video: createPersistentState("uplink.devices.videoInput", "default"),

src/lib/state/initial.ts

@@ -20,6 +20,12 @@ export interface IState {
     }
     activeChat: Writable<Chat>
     chatMessagesToSend: Writable<{ [key: string]: string }>
+    chatAttachmentsToSend: Writable<{
+        [key: string]: {
+            localFiles: [File?, string?][]
+            storageFiles: FileInfo[]
+        }
+    }>
     activeCall: Writable<Call | null>
     pendingCall: Writable<Call | null>
     toasts: Writable<{ [key: string]: [ToastMessage, NodeJS.Timeout] }>