message interaction

src/assets/icons/send.svelte

@@ -0,0 +1,15 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  class="lucide lucide-send-icon lucide-send"
+  ><path
+    d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z"
+  /><path d="m21.854 2.147-10.94 10.939" /></svg
+>

src/events/pet-message.ts

@@ -0,0 +1,27 @@
+import { writable } from "svelte/store";
+import { commands } from "$lib/bindings";
+
+export const openPetMessageSendUserId = writable<string | null>(null);
+
+function menuStateId(userId: string) {
+  return `${userId}:pet-message-send`;
+}
+
+export function openPetMessageSend(userId: string) {
+  openPetMessageSendUserId.update((currentUserId) => {
+    if (currentUserId && currentUserId !== userId) {
+      void commands.setPetMenuState(menuStateId(currentUserId), false);
+    }
+    return userId;
+  });
+  void commands.setPetMenuState(menuStateId(userId), true);
+}
+
+export function closePetMessageSend() {
+  openPetMessageSendUserId.update((currentUserId) => {
+    if (currentUserId) {
+      void commands.setPetMenuState(menuStateId(currentUserId), false);
+    }
+    return null;
+  });
+}

src/routes/scene/+page.svelte

@@ -13,7 +13,8 @@
   import DebugBar from "./components/debug-bar.svelte";
   import Neko from "./components/neko/neko.svelte";
   import PetMenu from "./components/pet-menu/pet-menu.svelte";
-  import { createPetActions } from "./components/pet-menu/events";
+  import PetMessagePop from "./components/pet-message-pop.svelte";
+  import PetMessageSend from "./components/pet-message-send.svelte";
   import type { UserBasicDto } from "$lib/bindings";
 
   function getFriend(friendId: string): UserBasicDto | undefined {
@@ -50,6 +51,8 @@
         initialY={position.raw.y}
       >
         <PetMenu user={friend!} ariaLabel={`Open ${friend?.name} actions`} />
+        <PetMessagePop userId={friendId} />
+        <PetMessageSend userId={friendId} userName={friend?.name ?? "Friend"} />
       </Neko>
     {/if}
   {/each}

src/routes/scene/components/pet-menu/events.ts

@@ -1,4 +1,5 @@
 import type { UserBasicDto } from "$lib/bindings";
+import { openPetMessageSend } from "../../../../events/pet-message";
 
 export type CloseHandler = () => void;
 
@@ -15,7 +16,7 @@ export function createPetActions(user: UserBasicDto) {
       icon: "💬",
       label: `Message ${user.name}`,
       onClick: () => {
-        console.log(`Message ${user.name}`);
+        openPetMessageSend(user.id);
       },
     },
     {

src/routes/scene/components/pet-message-pop.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+  import { onDestroy } from "svelte";
+  import {
+    receivedInteractions,
+    clearInteraction,
+  } from "../../../events/interaction";
+
+  interface Props {
+    userId: string;
+  }
+
+  let { userId }: Props = $props();
+
+  let visible = $state(false);
+  let hideTimer: ReturnType<typeof setTimeout> | null = null;
+  let lastTimestamp: string | null = null;
+
+  const interaction = $derived($receivedInteractions.get(userId));
+
+  function clearHideTimer() {
+    if (hideTimer) {
+      clearTimeout(hideTimer);
+      hideTimer = null;
+    }
+  }
+
+  function dismiss() {
+    visible = false;
+    clearHideTimer();
+    clearInteraction(userId);
+  }
+
+  $effect(() => {
+    if (!interaction) {
+      visible = false;
+      lastTimestamp = null;
+      clearHideTimer();
+      return;
+    }
+
+    if (interaction.timestamp !== lastTimestamp) {
+      lastTimestamp = interaction.timestamp;
+      visible = true;
+      clearHideTimer();
+      hideTimer = setTimeout(() => {
+        dismiss();
+      }, 4000);
+    }
+  });
+
+  onDestroy(() => {
+    clearHideTimer();
+  });
+</script>
+
+<div
+  class={`absolute card bottom-9 flex flex-col left-4 z-40 w-52 border border-base-300 bg-base-100 p-2 text-base-content transition-all duration-200 ease-out ${
+    visible
+      ? "pointer-events-auto opacity-100"
+      : "pointer-events-none opacity-0"
+  }`}
+>
+  {#if interaction}
+    <div class="flex items-start justify-between gap-2">
+      <p
+        class="truncate text-[8px] font-semibold uppercase tracking-wide opacity-70"
+      >
+        {interaction.senderName}
+      </p>
+    </div>
+    <p class="line-clamp-3 text-sm leading-snug mt-1 wrap-break-words">
+      {interaction.content}
+    </p>
+  {/if}
+</div>

src/routes/scene/components/pet-message-send.svelte

@@ -0,0 +1,132 @@
+<script lang="ts">
+  import { onDestroy } from "svelte";
+  import { commands } from "$lib/bindings";
+  import { sceneInteractive } from "../../../events/scene-interactive";
+  import {
+    closePetMessageSend,
+    openPetMessageSendUserId,
+  } from "../../../events/pet-message";
+  import {
+    createDocumentPointerHandler,
+    createKeyDownHandler,
+  } from "./pet-menu/events";
+  import Send from "../../../assets/icons/send.svelte";
+
+  interface Props {
+    userId: string;
+    userName: string;
+  }
+
+  const MAX_MESSAGE_LENGTH = 50;
+
+  let { userId, userName }: Props = $props();
+
+  let rootEl = $state<HTMLDivElement | null>(null);
+  let messageText = $state("");
+  let isSending = $state(false);
+
+  const isOpen = $derived($openPetMessageSendUserId === userId);
+
+  function closeMenu() {
+    closePetMessageSend();
+    messageText = "";
+  }
+
+  async function sendMessage() {
+    const content = messageText.trim();
+    if (!content || isSending || content.length > MAX_MESSAGE_LENGTH) {
+      return;
+    }
+
+    isSending = true;
+    try {
+      await commands.sendInteractionCmd({
+        recipientUserId: userId,
+        content,
+        type: "text",
+      });
+      closeMenu();
+    } catch (error) {
+      console.error("Failed to send interaction:", error);
+    } finally {
+      isSending = false;
+    }
+  }
+
+  const handleDocumentPointerDown = createDocumentPointerHandler(
+    () => isOpen,
+    () => rootEl,
+    closeMenu,
+  );
+
+  const handleKeyDown = createKeyDownHandler(() => isOpen, closeMenu);
+
+  $effect(() => {
+    if (!$sceneInteractive && isOpen) {
+      closeMenu();
+    }
+  });
+
+  $effect(() => {
+    if (isOpen) {
+      document.addEventListener("pointerdown", handleDocumentPointerDown, true);
+      document.addEventListener("keydown", handleKeyDown, true);
+    }
+
+    return () => {
+      document.removeEventListener(
+        "pointerdown",
+        handleDocumentPointerDown,
+        true,
+      );
+      document.removeEventListener("keydown", handleKeyDown, true);
+    };
+  });
+
+  onDestroy(() => {
+    if ($openPetMessageSendUserId === userId) {
+      closePetMessageSend();
+    }
+    document.removeEventListener(
+      "pointerdown",
+      handleDocumentPointerDown,
+      true,
+    );
+    document.removeEventListener("keydown", handleKeyDown, true);
+  });
+</script>
+
+<div
+  bind:this={rootEl}
+  class={`absolute card bottom-9 flex flex-col left-4 z-40 w-56 border border-base-300 bg-base-100 p-2 text-base-content transition-all duration-200 ease-out ${
+    isOpen && $sceneInteractive
+      ? "pointer-events-auto opacity-100"
+      : "pointer-events-none opacity-0"
+  }`}
+>
+  <textarea
+    class="h-20 p-1.5 outline-0 textarea textarea-xs bg-base-200 w-full resize-none"
+    placeholder="Write a message..."
+    maxlength={MAX_MESSAGE_LENGTH}
+    bind:value={messageText}
+  ></textarea>
+
+  <div class="flex flex-row justify-between w-full items-center px-2">
+    <div>
+      <p class="text-[10px] text-base-content/70">
+        {messageText.length}/{MAX_MESSAGE_LENGTH}
+      </p>
+    </div>
+    <button
+      type="button"
+      class="btn btn-xs btn-primary rounded-t-none"
+      disabled={isSending || !messageText.trim()}
+      onclick={sendMessage}
+    >
+      <div class="*:size-2">
+        <Send />
+      </div>
+      {isSending ? "Sending..." : "Send"}
+    </button>
+  </div>
+</div>