Simplify sending messages a little bit

frontend/app/src/components/home/CryptoTransferBuilder.svelte

@@ -2,7 +2,7 @@
     import Button from "../Button.svelte";
     import ButtonGroup from "../ButtonGroup.svelte";
     import type { ChatSummary, OpenChat, UserSummary } from "openchat-client";
-    import type { CryptocurrencyContent } from "openchat-shared";
+    import type { CryptocurrencyContent, MessageContext } from "openchat-shared";
     import TokenInput from "./TokenInput.svelte";
     import Overlay from "../Overlay.svelte";
     import AccountInfo from "./AccountInfo.svelte";
@@ -27,6 +27,7 @@
     export let ledger: string;
     export let chat: ChatSummary;
     export let defaultReceiver: string | undefined;
+    export let context: MessageContext;
 
     $: lastCryptoSent = client.lastCryptoSent;
     $: cryptoBalanceStore = client.cryptoBalance;
@@ -91,7 +92,7 @@
                 createdAtNanos: BigInt(Date.now()) * BigInt(1_000_000),
             },
         };
-        dispatch("sendTransfer", [content, undefined]);
+        client.sendMessageWithContent(context, content);
         lastCryptoSent.set(ledger);
         dispatch("close");
     }

frontend/app/src/components/home/CurrentChat.svelte

@@ -11,7 +11,6 @@
         type EventWrapper,
         type Mention,
         type Message,
-        type MessageContent,
         type OpenChat,
         type FilteredProposals,
         type User,
@@ -21,6 +20,7 @@
         CommunityMap,
         type CommunitySummary,
         ICP_SYMBOL,
+        type AttachmentContent,
     } from "openchat-client";
     import PollBuilder from "./PollBuilder.svelte";
     import CryptoTransferBuilder from "./CryptoTransferBuilder.svelte";
@@ -44,7 +44,7 @@
         kind: "send_message";
         textContent: string | undefined;
         mentioned: User[];
-        fileToAttach: MessageContent | undefined;
+        attachment: AttachmentContent | undefined;
     };
 
     type ConfirmedForwardMessage = {
@@ -82,10 +82,11 @@
     let showAcceptRulesModal = false;
     let sendMessageContext: ConfirmedActionEvent | undefined = undefined;
 
+    $: messageContext = { chatId: chat.id };
     $: currentChatTextContent = client.currentChatTextContent;
     $: currentChatReplyingTo = client.currentChatReplyingTo;
     $: currentChatPinnedMessages = client.currentChatPinnedMessages;
-    $: currentChatFileToAttach = client.currentChatFileToAttach;
+    $: currentChatAttachment = client.currentChatAttachment;
     $: currentChatEditingEvent = client.currentChatEditingEvent;
     $: currentChatDraftMessage = client.currentChatDraftMessage;
     $: lastCryptoSent = client.lastCryptoSent;
@@ -168,7 +169,7 @@
         };
     }
 
-    function fileSelected(ev: CustomEvent<MessageContent>) {
+    function fileSelected(ev: CustomEvent<AttachmentContent>) {
         currentChatDraftMessage.setAttachment(chat.id, ev.detail);
     }
 
@@ -202,7 +203,7 @@
         function send(n: number) {
             if (n === ev.detail) return;
 
-            sendMessageWithAttachment(randomSentence(), [], undefined);
+            sendMessageWithAttachment(randomSentence(), undefined);
 
             window.setTimeout(() => send(n + 1), 500);
         }
@@ -216,9 +217,9 @@
         if ($currentChatEditingEvent !== undefined) {
             client
                 .editMessageWithAttachment(
-                    chat.id,
+                    messageContext,
                     text,
-                    $currentChatFileToAttach,
+                    $currentChatAttachment,
                     $currentChatEditingEvent
                 )
                 .then((success) => {
@@ -227,42 +228,28 @@
                     }
                 });
         } else {
-            sendMessageWithAttachment(text, mentioned, $currentChatFileToAttach);
+            sendMessageWithAttachment(text, $currentChatAttachment, mentioned);
         }
     }
 
     function sendMessageWithAttachment(
         textContent: string | undefined,
-        mentioned: User[],
-        fileToAttach: MessageContent | undefined
+        attachment: AttachmentContent | undefined,
+        mentioned: User[] = []
     ) {
         if (client.rulesNeedAccepting()) {
             showAcceptRulesModal = true;
             sendMessageContext = {
                 kind: "send_message",
                 textContent,
                 mentioned,
-                fileToAttach,
+                attachment,
             };
         } else {
-            client.sendMessageWithAttachment(
-                chat.id,
-                events,
-                textContent,
-                mentioned,
-                fileToAttach,
-                $currentChatReplyingTo,
-                undefined,
-                undefined,
-                undefined
-            );
+            client.sendMessageWithAttachment(messageContext, textContent, attachment, mentioned);
         }
     }
 
-    export function sendMessageWithContent(ev: CustomEvent<[MessageContent, string | undefined]>) {
-        sendMessageWithAttachment(ev.detail[1], [], ev.detail[0]);
-    }
-
     function forwardMessage(msg: Message) {
         if (!canSend || !client.canForward(msg.content)) return;
 
@@ -273,7 +260,7 @@
                 msg,
             };
         } else {
-            client.forwardMessage(chat.id, msg, undefined, undefined, undefined);
+            client.forwardMessage(messageContext, msg);
         }
     }
 
@@ -285,7 +272,7 @@
                 event: ev.detail,
             };
         } else {
-            client.retrySendMessage(chat.id, ev.detail, events, undefined, undefined, undefined);
+            client.retrySendMessage(messageContext, ev.detail);
         }
     }
 
@@ -319,34 +306,28 @@
             switch (sendMessageContext.kind) {
                 case "send_message": {
                     client.sendMessageWithAttachment(
-                        chat.id,
-                        events,
+                        messageContext,
                         sendMessageContext.textContent,
+                        sendMessageContext.attachment,
                         sendMessageContext.mentioned,
-                        sendMessageContext.fileToAttach,
-                        $currentChatReplyingTo,
-                        undefined,
                         chatRulesVersion,
                         communityRulesVersion
                     );
                     break;
                 }
                 case "forward_message": {
                     client.forwardMessage(
-                        chat.id,
+                        messageContext,
                         sendMessageContext.msg,
-                        undefined,
                         chatRulesVersion,
                         communityRulesVersion
                     );
                     break;
                 }
                 case "retry_send_message": {
                     client.retrySendMessage(
-                        chat.id,
+                        messageContext,
                         sendMessageContext.event,
-                        events,
-                        undefined,
                         chatRulesVersion,
                         communityRulesVersion
                     );
@@ -357,7 +338,7 @@
             switch (sendMessageContext.kind) {
                 case "send_message": {
                     currentChatDraftMessage.setTextContent(chat.id, sendMessageContext.textContent);
-                    currentChatDraftMessage.setAttachment(chat.id, sendMessageContext.fileToAttach);
+                    currentChatDraftMessage.setAttachment(chat.id, sendMessageContext.attachment);
                     break;
                 }
             }
@@ -382,31 +363,22 @@
         ownedCommunities={importToCommunities} />
 {/if}
 
-<PollBuilder
-    bind:this={pollBuilder}
-    on:sendPoll={sendMessageWithContent}
-    bind:open={creatingPoll} />
+<PollBuilder context={messageContext} bind:this={pollBuilder} bind:open={creatingPoll} />
 
 {#if creatingCryptoTransfer !== undefined}
     <CryptoTransferBuilder
+        context={messageContext}
         {chat}
         ledger={creatingCryptoTransfer.ledger}
         draftAmount={creatingCryptoTransfer.amount}
         defaultReceiver={defaultCryptoTransferReceiver()}
-        on:sendTransfer={sendMessageWithContent}
         on:upgrade
         on:close={() => (creatingCryptoTransfer = undefined)} />
 {/if}
 
-<GiphySelector
-    bind:this={giphySelector}
-    bind:open={selectingGif}
-    on:sendGiphy={sendMessageWithContent} />
+<GiphySelector context={messageContext} bind:this={giphySelector} bind:open={selectingGif} />
 
-<MemeBuilder
-    bind:this={memeBuilder}
-    bind:open={buildingMeme}
-    on:sendMeme={sendMessageWithContent} />
+<MemeBuilder context={messageContext} bind:this={memeBuilder} bind:open={buildingMeme} />
 
 <div class="wrapper">
     {#if showSearchHeader}
@@ -460,7 +432,7 @@
     {#if showFooter}
         <Footer
             {chat}
-            fileToAttach={$currentChatFileToAttach}
+            attachment={$currentChatAttachment}
             editingEvent={$currentChatEditingEvent}
             replyingTo={$currentChatReplyingTo}
             textContent={$currentChatTextContent}

frontend/app/src/components/home/DraftMediaMessage.svelte

@@ -1,24 +1,13 @@
 <svelte:options immutable />
 
 <script lang="ts">
-    import type {
-        CryptocurrencyContent as CryptoContentType,
-        VideoContent as VideoContentType,
-        ImageContent as ImageContentType,
-        AudioContent as AudioContentType,
-        FileContent as FileContentType,
-    } from "openchat-client";
+    import type { AttachmentContent } from "openchat-client";
     import VideoContent from "./VideoContent.svelte";
     import ImageContent from "./ImageContent.svelte";
     import AudioContent from "./AudioContent.svelte";
     import FileContent from "./FileContent.svelte";
 
-    export let content:
-        | VideoContentType
-        | ImageContentType
-        | AudioContentType
-        | FileContentType
-        | CryptoContentType;
+    export let content: AttachmentContent;
 </script>
 
 <div class="msg-preview">

frontend/app/src/components/home/Footer.svelte

@@ -10,10 +10,10 @@
         EventWrapper,
         Message,
         MessageAction,
-        MessageContent,
         CreatedUser,
         OpenChat,
         MultiUserChat,
+        AttachmentContent,
     } from "openchat-client";
     import { createEventDispatcher, getContext } from "svelte";
 
@@ -23,7 +23,7 @@
     export let preview: boolean;
     export let joining: MultiUserChat | undefined;
     export let chat: ChatSummary;
-    export let fileToAttach: MessageContent | undefined;
+    export let attachment: AttachmentContent | undefined;
     export let editingEvent: EventWrapper<Message> | undefined;
     export let replyingTo: EnhancedReplyContext | undefined;
     export let textContent: string | undefined;
@@ -87,15 +87,13 @@
 
 <div class="footer">
     <div class="footer-overlay">
-        {#if editingEvent === undefined && (replyingTo || fileToAttach !== undefined)}
+        {#if editingEvent === undefined && (replyingTo || attachment !== undefined)}
             <div class="draft-container">
                 {#if replyingTo}
                     <ReplyingTo chatId={chat.id} readonly on:cancelReply {user} {replyingTo} />
                 {/if}
-                {#if fileToAttach !== undefined}
-                    {#if fileToAttach.kind === "image_content" || fileToAttach.kind === "audio_content" || fileToAttach.kind === "video_content" || fileToAttach.kind === "file_content" || fileToAttach.kind === "crypto_content"}
-                        <DraftMediaMessage content={fileToAttach} />
-                    {/if}
+                {#if attachment !== undefined}
+                    <DraftMediaMessage content={attachment} />
                 {/if}
             </div>
         {/if}
@@ -113,7 +111,7 @@
         {preview}
         {blocked}
         {joining}
-        {fileToAttach}
+        {attachment}
         {editingEvent}
         {replyingTo}
         {textContent}

frontend/app/src/components/home/GiphySelector.svelte

@@ -6,18 +6,21 @@
     import Overlay from "../Overlay.svelte";
     import ModalContent from "../ModalContent.svelte";
     import { _ } from "svelte-i18n";
-    import { createEventDispatcher } from "svelte";
+    import { getContext } from "svelte";
     import { mobileWidth } from "../../stores/screenDimensions";
     import type {
         GIFObject,
         PagedGIFObject,
         GiphySearchResponse,
         GiphyContent,
+        MessageContext,
+        OpenChat,
     } from "openchat-client";
 
-    const dispatch = createEventDispatcher();
+    const client = getContext<OpenChat>("client");
 
     export let open: boolean;
+    export let context: MessageContext;
 
     let refreshing = false;
     let message = "";
@@ -162,8 +165,9 @@
                     url: selectedGif.images.downsized.url,
                     mimeType: "image/gif",
                 },
+                caption: message === "" ? undefined : message,
             };
-            dispatch("sendGiphy", [content, message === "" ? undefined : message]);
+            client.sendMessageWithContent(context, content);
             open = false;
         }
     }
@@ -264,8 +268,7 @@
                 <ButtonGroup align={$mobileWidth ? "center" : "end"}>
                     <Button tiny disabled={selectedGif === undefined} on:click={send}
                         >{$_("send")}</Button>
-                    <Button tiny secondary on:click={() => (open = false)}
-                        >{$_("cancel")}</Button>
+                    <Button tiny secondary on:click={() => (open = false)}>{$_("cancel")}</Button>
                 </ButtonGroup>
             </span>
         </ModalContent>