@refraction-ui/react 0.10.0 → 0.11.0

package/dist/index.js

@@ -2731,6 +2731,7 @@ function createConversation(config = {}) {
   const messagesByConv = /* @__PURE__ */ new Map();
   let activeConversationId = config.activeConversationId ?? null;
   let openThreadRootId = null;
+  let replyTarget = null;
   let status = "idle";
   let error = null;
   let abortController = null;
@@ -2752,6 +2753,7 @@ function createConversation(config = {}) {
       activeConversationId,
       messages: activeConversationId ? messagesByConv.get(activeConversationId) ?? [] : [],
       openThreadRootId,
+      replyTarget,
       threadingMode,
       status,
       error
@@ -2848,6 +2850,7 @@ function createConversation(config = {}) {
     newConversation(opts) {
       const conversation = createConversationInternal(opts ?? {});
       openThreadRootId = null;
+      replyTarget = null;
       emit();
       return conversation;
     },
@@ -2855,6 +2858,7 @@ function createConversation(config = {}) {
       if (!conversations.has(conversationId) || activeConversationId === conversationId) return;
       activeConversationId = conversationId;
       openThreadRootId = null;
+      replyTarget = null;
       emit();
     },
     deleteConversation(conversationId) {
@@ -2864,6 +2868,7 @@ function createConversation(config = {}) {
       if (activeConversationId === conversationId) {
         activeConversationId = orderedConversations()[0]?.id ?? null;
         openThreadRootId = null;
+        replyTarget = null;
       }
       emit();
     },
@@ -2901,6 +2906,7 @@ function createConversation(config = {}) {
       const next = list.filter((m) => !removeIds.has(m.id));
       messagesByConv.set(activeConversationId, next);
       if (openThreadRootId && removeIds.has(openThreadRootId)) openThreadRootId = null;
+      if (replyTarget && removeIds.has(replyTarget)) replyTarget = openThreadRootId;
       emit();
     },
     react(messageId, emoji) {
@@ -2931,6 +2937,7 @@ function createConversation(config = {}) {
       const conversationId = ensureActiveConversation(opts);
       const list = messagesByConv.get(conversationId);
       const parentId = opts?.replyTo ? rootIdOf(list, opts.replyTo) : void 0;
+      const replyToId = opts?.replyTo;
       const isFirstRoot = !parentId && selectRoots(list).length === 0;
       const userMsg = {
         id: generateId("rfr-msg"),
@@ -2941,6 +2948,7 @@ function createConversation(config = {}) {
         timestamp: /* @__PURE__ */ new Date(),
         status: "sent",
         parentId,
+        replyToId,
         attachments: opts?.attachments,
         metadata: opts?.metadata
       };
@@ -2997,11 +3005,20 @@ function createConversation(config = {}) {
     },
     openThread(rootId) {
       openThreadRootId = rootId;
+      replyTarget = rootId;
+      emit();
+    },
+    replyTo(messageId) {
+      if (!activeConversationId) return;
+      const list = messagesByConv.get(activeConversationId);
+      openThreadRootId = rootIdOf(list, messageId);
+      replyTarget = messageId;
       emit();
     },
     closeThread() {
-      if (openThreadRootId === null) return;
+      if (openThreadRootId === null && replyTarget === null) return;
       openThreadRootId = null;
+      replyTarget = null;
       emit();
     },
     setThreadingMode(mode) {
@@ -3345,6 +3362,7 @@ function useConversation(config) {
     retryLast: api.retryLast,
     stop: api.stop,
     openThread: api.openThread,
+    replyTo: api.replyTo,
     closeThread: api.closeThread,
     setThreadingMode: api.setThreadingMode
   };
@@ -3807,7 +3825,7 @@ function HoverActions({
   onToggleEmojis,
   align
 }) {
-  const { state, openThread, deleteMessage } = conversation;
+  const { replyTo, deleteMessage } = conversation;
   return h2(
     "div",
     {
@@ -3816,7 +3834,8 @@ function HoverActions({
         align === "end" && "justify-end"
       )
     },
-    h2("button", { type: "button", className: "hover:text-foreground", onClick: () => openThread(rootIdOf(state.messages, message.id)) }, "Reply"),
+    // Reply targets this specific message but groups under the originating root.
+    h2("button", { type: "button", className: "hover:text-foreground", onClick: () => replyTo(message.id) }, "Reply"),
     h2("button", { type: "button", className: "hover:text-foreground", onClick: onToggleEmojis }, "React"),
     isOwn ? h2("button", { type: "button", className: "hover:text-foreground", onClick: onEdit }, "Edit") : null,
     isOwn ? h2("button", { type: "button", className: "hover:text-destructive", onClick: () => deleteMessage(message.id) }, "Delete") : null
@@ -3878,7 +3897,7 @@ function MessageRow({
   const inner = h2(
     React11.Fragment,
     null,
-    quotedParent ? h2(QuotedParent, { parent: quotedParent, onClick: () => openThread(quotedParent.id) }) : null,
+    quotedParent ? h2(QuotedParent, { parent: quotedParent, onClick: () => openThread(rootIdOf(state.messages, quotedParent.id)) }) : null,
     editing ? h2(EditField, { message, conversation, onDone: () => setEditing(false) }) : isUser ? h2("div", { className: "inline-block rounded-2xl rounded-br-sm bg-primary/10 px-3 py-2 text-left" }, h2(MessageBody, { message })) : h2(MessageBody, { message }),
     h2(Reactions, { message, onReact: (e) => react(message.id, e), align }),
     showThreadAffordance && replyCount > 0 ? h2(
@@ -3978,13 +3997,14 @@ function ThreadPanel({ conversation, currentUserId, composer }) {
   const rootId = state.openThreadRootId;
   if (!rootId) return null;
   const messages = selectThreadMessages(state.messages, rootId);
+  const target = state.replyTarget && state.replyTarget !== rootId ? findMessage(state.messages, state.replyTarget) : void 0;
   return h2(
     "aside",
     { className: "flex w-80 flex-col border-l border-border", "aria-label": "Thread" },
     h2(
       "div",
       { className: "flex items-center justify-between border-b border-border px-3 py-2" },
-      h2("span", { className: "text-sm font-semibold" }, "Thread"),
+      h2("span", { className: "text-sm font-semibold" }, `Thread \xB7 ${messages.length - 1} ${messages.length - 1 === 1 ? "reply" : "replies"}`),
       h2("button", { type: "button", className: "text-muted-foreground hover:text-foreground", "aria-label": "Close thread", onClick: () => conversation.closeThread() }, "\u2715")
     ),
     h2(
@@ -3992,6 +4012,12 @@ function ThreadPanel({ conversation, currentUserId, composer }) {
       { className: "flex-1 overflow-y-auto p-1" },
       ...messages.map((m) => h2(MessageRow, { key: m.id, message: m, conversation, currentUserId, showThreadAffordance: false }))
     ),
+    target ? h2(
+      "div",
+      { className: "flex items-center justify-between gap-2 border-t border-border bg-muted/40 px-3 py-1 text-xs text-muted-foreground" },
+      h2("span", { className: "truncate" }, `\u21B3 Replying to ${target.author.name}`),
+      h2("button", { type: "button", className: "hover:text-foreground", onClick: () => conversation.openThread(rootId) }, "Reply to thread instead")
+    ) : null,
     composer
   );
 }
@@ -4047,7 +4073,7 @@ function Chat({
     mentions,
     onSlashCommand,
     toolbar: composerToolbar,
-    onSubmit: (content, atts) => void sendMessage(content, { replyTo: state.openThreadRootId, attachments: atts }),
+    onSubmit: (content, atts) => void sendMessage(content, { replyTo: state.replyTarget ?? state.openThreadRootId, attachments: atts }),
     onStop: () => conversation.stop()
   }) : null;
   const body = timeline.length === 0 ? h2("div", { className: "flex flex-1 items-center justify-center p-6 text-sm text-muted-foreground" }, emptyState ?? "No messages yet. Say hello \u{1F44B}") : h2(
@@ -4059,8 +4085,10 @@ function Chat({
         message: m,
         conversation,
         currentUserId,
-        showThreadAffordance: state.threadingMode === "panel",
-        quotedParent: state.threadingMode === "inline" && m.parentId ? findMessage(state.messages, m.parentId) : void 0
+        // Show the "N replies" count on originating messages in BOTH modes.
+        showThreadAffordance: true,
+        // Inline: quote the specific message replied to (falls back to the root).
+        quotedParent: state.threadingMode === "inline" && m.parentId ? findMessage(state.messages, m.replyToId ?? m.parentId) : void 0
       })
     )
   );