返信機能

packages/client/src/components/chat/Channel.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { api, type Id } from "@packages/convex";
+  import type { Doc } from "@packages/convex/src/convex/_generated/dataModel";
   import { useQuery } from "convex-svelte";
   import MessageInput from "./MessageInput.svelte";
   import MessageList from "./MessageList.svelte";
@@ -13,6 +14,8 @@
   const selectedChannel = useQuery(api.channels.get, () => ({
     id: selectedChannelId,
   }));
+
+  let replyingTo = $state<Doc<"messages"> | null>(null);
 </script>
 
 <div class="border-base-300 bg-base-200 border-b p-4">
@@ -26,5 +29,5 @@
   {/if}
 </div>
 
-<MessageList channelId={selectedChannelId} />
-<MessageInput channelId={selectedChannelId} />
+<MessageList channelId={selectedChannelId} bind:replyingTo />
+<MessageInput channelId={selectedChannelId} bind:replyingTo />

packages/client/src/components/chat/MessageInput.svelte

@@ -1,12 +1,14 @@
 <script lang="ts">
   import { api, type Id } from "@packages/convex";
+  import type { Doc } from "@packages/convex/src/convex/_generated/dataModel";
   import { useConvexClient, useQuery } from "convex-svelte";
 
   interface Props {
     channelId: Id<"channels">;
+    replyingTo: Doc<"messages"> | null;
   }
 
-  const { channelId }: Props = $props();
+  let { channelId, replyingTo = $bindable() }: Props = $props();
 
   const convex = useConvexClient();
   const identity = useQuery(api.users.me, {});
@@ -27,9 +29,11 @@
       channelId,
       content: messageContent.trim(),
       author: authorName.trim() || "匿名",
+      parentId: replyingTo?._id ?? undefined,
     });
 
     messageContent = "";
+    replyingTo = null;
   }
 
   function handleKeyPress(event: KeyboardEvent) {
@@ -41,6 +45,14 @@
 </script>
 
 <div class="border-base-300 bg-base-100 border-t p-4">
+  {#if replyingTo}
+    <div class="text-base-content/70 mb-2 text-sm">
+      <span class="font-semibold">返信先:</span>
+      <span class="text-primary font-semibold">{replyingTo.author}</span>
+      <span>{replyingTo.content}</span>
+    </div>
+  {/if}
+
   <div class="mb-2 flex gap-2">
     <input
       type="text"

packages/client/src/components/chat/MessageList.svelte

@@ -1,17 +1,24 @@
 <script lang="ts">
   import { api, type Id } from "@packages/convex";
+  import type { Doc } from "@packages/convex/src/convex/_generated/dataModel";
   import { useQuery } from "convex-svelte";
   import { onMount } from "svelte";
 
   interface Props {
     channelId: Id<"channels">;
+    replyingTo: Doc<"messages"> | null;
   }
 
-  const { channelId }: Props = $props();
+  let { channelId, replyingTo = $bindable() }: Props = $props();
 
   const messages = useQuery(api.messages.list, () => ({
     channelId,
   }));
+
+  const messagesById = $derived(
+    new Map(messages.data?.map((message) => [message._id, message])),
+  );
+
   let messagesContainer: HTMLDivElement;
 
   function formatTime(timestamp: number) {
@@ -41,7 +48,18 @@
 <div bind:this={messagesContainer} class="flex-1 space-y-2 overflow-y-auto p-4">
   {#if messages.data}
     {#each messages.data as message (message._id)}
-      <div class="flex flex-col">
+      {#if message.parentId && messages.data.find((m) => m._id === message.parentId)}
+        <div class="flex items-center gap-2">
+          <span class="text-base-content/60 text-xs">返信</span>
+          <span class="text-primary font-semibold"
+            >{messagesById.get(message.parentId)?.author}</span
+          >
+          <span class="text-base-content/60 text-xs">
+            {messagesById.get(message.parentId)?.content}
+          </span>
+        </div>
+      {/if}
+      <div class="group relative flex flex-col">
         <div class="flex items-baseline gap-2">
           <span class="text-primary font-semibold">{message.author}</span>
           <span class="text-base-content/60 text-xs">
@@ -51,6 +69,22 @@
         <div class="text-base-content ml-0 whitespace-pre-wrap">
           {message.content}
         </div>
+        <div
+          class="bg-base-100 absolute top-0 right-4 -translate-y-1/2 rounded-md border opacity-0 group-hover:opacity-100"
+        >
+          <div class="dropdown dropdown-end">
+            <button class="btn btn-ghost btn-sm p-2" tabindex="0"> ⋮ </button>
+            <ul
+              tabindex="0"
+              role="menu"
+              class="menu dropdown-content bg-base-100 z-[1] w-40 rounded-md border p-2 shadow"
+            >
+              <li>
+                <button onclick={() => (replyingTo = message)}>返信</button>
+              </li>
+            </ul>
+          </div>
+        </div>
       </div>
     {:else}
       <div class="text-center text-base-content/60 py-8">

packages/convex/src/convex/messages.ts

@@ -17,13 +17,15 @@ export const send = mutation({
     channelId: v.id("channels"),
     content: v.string(),
     author: v.string(),
+    parentId: v.optional(v.id("messages")),
   },
   handler: async (ctx, args) => {
     await ctx.db.insert("messages", {
       channelId: args.channelId,
       content: args.content,
       author: args.author,
       createdAt: Date.now(),
+      parentId: args.parentId,
     });
   },
 });

packages/convex/src/convex/schema.ts

@@ -18,6 +18,7 @@ export default defineSchema({
     content: v.string(),
     author: v.string(),
     createdAt: v.number(),
+    parentId: v.optional(v.id("messages")),
   }).index("by_channel", ["channelId"]),
   ...authTables,
 });