fix(Chat): Fix chatbar messages to persist through different conversations

src/lib/components/messaging/ChatPreview.svelte

@@ -8,6 +8,7 @@
     import ProfilePictureMany from "../profile/ProfilePictureMany.svelte"
     import { Store } from "$lib/state/Store"
     import { goto } from "$app/navigation"
+    import { get } from "svelte/store"
     import { tempCDN } from "$lib/utils/CommonVariables"
 
     export let chat: Chat
@@ -41,7 +42,7 @@
 
 <button
     data-cy="chat-preview"
-    class="chat-preview {cta ? 'cta' : ''}"
+    class="chat-preview {cta ? 'cta' : ''} {get(Store.state.activeChat)?.id === chat.id ? 'active-chat' : ''}"
     on:contextmenu
     on:click={_ => {
         dispatch("click")
@@ -107,6 +108,10 @@
         transition: all var(--animation-speed);
         min-width: var(--min-component-width);
 
+        &.active-chat {
+            background-color: var(--primary-color-alt);
+        }
+
         &.cta {
             background-color: var(--alt-color);
 

src/lib/elements/Input/Input.svelte

@@ -67,6 +67,7 @@
 
     let onsend: any[] = []
     let editor: MarkdownEditor
+
     if (rich) {
         onMount(() => {
             if (autoFocus) input.focus()
@@ -134,34 +135,38 @@
     }
 </script>
 
-<div
-    class="input-group {alt ? 'alt' : ''} {highlight !== null ? `highlight-${highlight}` : ''} {tooltip ? 'tooltip' : ''} {clazz || ''} {rich ? 'multiline' : ''}"
-    data-tooltip={tooltip}
-    role="none"
-    on:click={async _ => {
-        if (copyOnInteract) {
-            await navigator.clipboard.writeText(`${value}`)
-        }
-    }}>
-    <div class="input-container {rounded ? 'rounded' : ''} {clazz || ''} {rich ? 'multiline' : ''}">
-        <slot></slot>
-        <input
-            data-cy={hook}
-            class="input {centered ? 'centered' : ''} {disabled ? 'disabled' : ''}"
-            type="text"
-            disabled={disabled}
-            bind:this={input}
-            on:focus={handleFocus}
-            bind:value={$writableValue}
-            placeholder={placeholder}
-            on:keydown={onKeyDown}
-            on:input={onInput}
-            on:blur={onBlur} />
+{#key hook}
+    <div
+        class="input-group {alt ? 'alt' : ''} {highlight !== null ? `highlight-${highlight}` : ''} {tooltip ? 'tooltip' : ''} {clazz || ''} {rich ? 'multiline' : ''}"
+        data-tooltip={tooltip}
+        role="none"
+        on:click={async _ => {
+            if (copyOnInteract) {
+                await navigator.clipboard.writeText(`${value}`)
+            }
+        }}>
+        <div class="input-container {rounded ? 'rounded' : ''} {clazz || ''} {rich ? 'multiline' : ''}">
+            <slot></slot>
+            <!-- svelte-ignore a11y-autofocus -->
+            <input
+                id={hook}
+                data-cy={hook}
+                class="input {centered ? 'centered' : ''} {disabled ? 'disabled' : ''}"
+                type="text"
+                bind:this={input}
+                on:focus={handleFocus}
+                bind:value={$writableValue}
+                placeholder={placeholder}
+                on:keydown={onKeyDown}
+                on:input={onInput}
+                on:blur={onBlur}
+                autofocus={autoFocus} />
+        </div>
     </div>
-</div>
-{#if errorMessage}
-    <Text appearance={Appearance.Warning}>{errorMessage}</Text>
-{/if}
+    {#if errorMessage}
+        <Text appearance={Appearance.Warning}>{errorMessage}</Text>
+    {/if}
+{/key}
 
 <style lang="scss">
     .input-group {

src/lib/layouts/Chatbar.svelte

@@ -10,18 +10,18 @@
     import { RaygunStoreInstance, type FileAttachment } from "$lib/wasm/RaygunStore"
     import { createEventDispatcher } from "svelte"
     import { ConversationStore } from "$lib/state/conversation"
-    import type { GiphyGif, Message } from "$lib/types"
+    import type { Chat, GiphyGif, Message } from "$lib/types"
     import { PopupButton } from "$lib/components"
     import CombinedSelector from "$lib/components/messaging/CombinedSelector.svelte"
     import { checkMobile } from "$lib/utils/Mobile"
-    import { VoiceRTCMessageType } from "$lib/media/Voice"
     import { UIStore } from "$lib/state/ui"
     import { emojiList } from "$lib/components/messaging/emoji/EmojiList"
     import { tempCDN } from "$lib/utils/CommonVariables"
 
     export let replyTo: Message | undefined = undefined
     export let filesSelected: [File?, string?][] = []
     export let emojiClickHook: (emoji: string) => boolean
+    export let activeChat: Chat
 
     const dispatch = createEventDispatcher()
 
@@ -30,8 +30,22 @@
     $: emojiSelectorOpen = UIStore.state.emojiSelector
     let gifSelectorOpen = writable(false)
     let stickerSelectorOpen = writable(false)
+    let hackVariableToRefocusChatBar = writable("")
 
-    async function sendMessage(text: string) {
+    let chatMessages = writable<{ [key: string]: string }>({})
+
+    $: if (activeChat) {
+        message.set(get(chatMessages)[activeChat.id] || "")
+    }
+
+    $: if (message) {
+        chatMessages.update(messages => {
+            messages[activeChat.id] = $message
+            return messages
+        })
+    }
+
+    async function sendMessage(text: string, isStickerOrGif: boolean = false) {
         let attachments: FileAttachment[] = []
         filesSelected.forEach(([file, path]) => {
             if (file) {
@@ -52,7 +66,14 @@
         result.onSuccess(res => {
             ConversationStore.addPendingMessages(chat.id, res.message, txt)
         })
-        message.set("")
+        if (!isStickerOrGif) {
+            message.set("")
+            chatMessages.update(messages => {
+                messages[activeChat.id] = ""
+                return messages
+            })
+        }
+
         replyTo = undefined
         dispatch("onsend")
     }
@@ -62,22 +83,25 @@
         gifSelectorOpen.set(false)
         stickerSelectorOpen.set(false)
         if (emojiClickHook(emoji)) return
-        message.set($message + emoji)
+        message.update(m => m + emoji)
+        hackVariableToRefocusChatBar.set(Math.random().toString())
     }
 
     function handleGif(gif: GiphyGif) {
         emojiSelectorOpen.set(false)
         gifSelectorOpen.set(false)
         stickerSelectorOpen.set(false)
-        sendMessage(`![${gif.title}](${gif.images.fixed_height_small.url})`)
+        sendMessage(`![${gif.title}](${gif.images.fixed_height_small.url})`, true)
+        hackVariableToRefocusChatBar.set(Math.random().toString())
     }
 
     async function handleSticker(sticker: any) {
         emojiSelectorOpen.set(false)
         gifSelectorOpen.set(false)
         stickerSelectorOpen.set(false)
         let stickerUrl = `${tempCDN}${sticker.sticker.path}`
-        sendMessage(`![${sticker.sticker.name}](${stickerUrl})`)
+        sendMessage(`![${sticker.sticker.name}](${stickerUrl})`, true)
+        hackVariableToRefocusChatBar.set(Math.random().toString())
     }
 
     function replaceEmojis(inputText: string) {
@@ -107,12 +131,20 @@
     }
 </script>
 
-<div class="chatbar" data-cy="chatbar">
+<div class="chatbar" data-cy="chatbar" id={activeChat.id}>
     <Controls>
         <slot name="pre-controls"></slot>
     </Controls>
-
-    <Input hook="chatbar-input" alt placeholder={$_("generic.placeholder")} autoFocus bind:value={$message} rounded rich={markdown} on:input={_ => replaceEmojis($message)} on:enter={_ => sendMessage($message)} />
+    <Input
+        hook={`${activeChat.id}-${$hackVariableToRefocusChatBar}`}
+        alt
+        placeholder={$_("generic.placeholder")}
+        autoFocus={true}
+        bind:value={$message}
+        rounded
+        rich={markdown}
+        on:input={_ => replaceEmojis($message)}
+        on:enter={_ => sendMessage($message)} />
 
     <slot></slot>
 

src/lib/layouts/Sidebar.svelte

@@ -51,7 +51,7 @@
     {#if open}
         <div class="sidebar">
             <div class="sidebar-pre">
-                <Input hook="input-sidebar-search" alt placeholder={$_("generic.search_placeholder")} bind:value={search} on:enter={handleEnter} on:input={handleSearch}>
+                <Input hook="input-sidebar-search" alt autoFocus={false} placeholder={$_("generic.search_placeholder")} bind:value={search} on:enter={handleEnter} on:input={handleSearch}>
                     <Icon icon={Shape.Search} />
                 </Input>
 

src/routes/chat/+page.svelte

@@ -669,6 +669,8 @@
             <Chatbar
                 filesSelected={files}
                 replyTo={replyTo}
+                activeChat={$activeChat}
+                typing={$activeChat.typing_indicator.users && $activeChat.typing_indicator.users().map(u => $users[u])}
                 emojiClickHook={emoji => {
                     if (reactingTo) {
                         reactTo(reactingTo, emoji, false)