From 5fd5dd2454252a7cd617c9b9690ebb35344d560c Mon Sep 17 00:00:00 2001
From: nakomochi <nakomochi13@gmail.com>
Date: Tue, 29 Jul 2025 00:38:13 +0900
Subject: [PATCH 1/2] =?UTF-8?q?=E8=BF=94=E4=BF=A1=E3=81=AE=E8=A1=A8?=
 =?UTF-8?q?=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/chat/MessageList.svelte       | 16 ++++++++++++++++
 packages/convex/src/convex/schema.ts             |  1 +
 2 files changed, 17 insertions(+)

diff --git a/packages/client/src/components/chat/MessageList.svelte b/packages/client/src/components/chat/MessageList.svelte
index e9d86ed..78c3e52 100644
--- a/packages/client/src/components/chat/MessageList.svelte
+++ b/packages/client/src/components/chat/MessageList.svelte
@@ -12,6 +12,11 @@
   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,6 +46,17 @@
 <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)}
+      {#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="flex flex-col">
         <div class="flex items-baseline gap-2">
           <span class="text-primary font-semibold">{message.author}</span>
diff --git a/packages/convex/src/convex/schema.ts b/packages/convex/src/convex/schema.ts
index 3c8f617..f7b09c4 100644
--- a/packages/convex/src/convex/schema.ts
+++ b/packages/convex/src/convex/schema.ts
@@ -17,5 +17,6 @@ export default defineSchema({
     content: v.string(),
     author: v.string(),
     createdAt: v.number(),
+    parentId: v.optional(v.id("messages")),
   }).index("by_channel", ["channelId"]),
 });

From 21ff30154480a35f0983ca89ee36b0f7eec1f0b4 Mon Sep 17 00:00:00 2001
From: nakomochi <nakomochi13@gmail.com>
Date: Thu, 31 Jul 2025 17:53:57 +0900
Subject: [PATCH 2/2] =?UTF-8?q?=E8=BF=94=E4=BF=A1=E4=BB=98=E3=81=8D?=
 =?UTF-8?q?=E3=83=A1=E3=83=83=E3=82=BB=E3=83=BC=E3=82=B8=E3=81=AE=E9=80=81?=
 =?UTF-8?q?=E4=BF=A1=E3=83=BBUI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../client/src/components/chat/Channel.svelte |  7 ++++--
 .../src/components/chat/MessageInput.svelte   | 14 +++++++++++-
 .../src/components/chat/MessageList.svelte    | 22 +++++++++++++++++--
 packages/convex/src/convex/messages.ts        |  2 ++
 4 files changed, 40 insertions(+), 5 deletions(-)

diff --git a/packages/client/src/components/chat/Channel.svelte b/packages/client/src/components/chat/Channel.svelte
index 671c578..3ac3653 100644
--- a/packages/client/src/components/chat/Channel.svelte
+++ b/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 />
diff --git a/packages/client/src/components/chat/MessageInput.svelte b/packages/client/src/components/chat/MessageInput.svelte
index bb9b390..788a8c4 100644
--- a/packages/client/src/components/chat/MessageInput.svelte
+++ b/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 } 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();
   let messageContent = $state("");
@@ -19,9 +21,11 @@
       channelId,
       content: messageContent.trim(),
       author: authorName.trim() || "匿名",
+      parentId: replyingTo?._id ?? undefined,
     });
 
     messageContent = "";
+    replyingTo = null;
   }
 
   function handleKeyPress(event: KeyboardEvent) {
@@ -33,6 +37,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"
diff --git a/packages/client/src/components/chat/MessageList.svelte b/packages/client/src/components/chat/MessageList.svelte
index 78c3e52..71398bf 100644
--- a/packages/client/src/components/chat/MessageList.svelte
+++ b/packages/client/src/components/chat/MessageList.svelte
@@ -1,13 +1,15 @@
 <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,
@@ -57,7 +59,7 @@
           </span>
         </div>
       {/if}
-      <div class="flex flex-col">
+      <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">
@@ -67,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">
diff --git a/packages/convex/src/convex/messages.ts b/packages/convex/src/convex/messages.ts
index 640a59b..a6e4837 100644
--- a/packages/convex/src/convex/messages.ts
+++ b/packages/convex/src/convex/messages.ts
@@ -17,6 +17,7 @@ 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", {
@@ -24,6 +25,7 @@ export const send = mutation({
       content: args.content,
       author: args.author,
       createdAt: Date.now(),
+      parentId: args.parentId,
     });
   },
 });