feat(control-ui): add right-click Reply in Dashboard webchat (#92654)

programmingWTF · openclaw-clownfish[bot] · vincentkoc · web-flow · commit 05cf49776766 · 2026-06-28T23:37:32.000-07:00
* fix(control-ui): right-click Reply icon, dismiss button, quote format, and queue ordering

* fix(control-ui): harden Dashboard webchat reply menu

* fix(control-ui): satisfy reply menu lint

---------

Co-authored-by: openclaw-clownfish[bot] &lt;280122609+openclaw-clownfish[bot]@users.noreply.github.com&gt;
Co-authored-by: Vincent Koc &lt;25068+vincentkoc@users.noreply.github.com&gt;
diff --git a/ui/src/styles/chat/layout.css b/ui/src/styles/chat/layout.css
@@ -504,6 +504,112 @@
   height: 14px;
 }
 
+/* Reply preview bar above composer */
+.chat-reply-preview {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 12px;
+  margin-bottom: 4px;
+  background: color-mix(in srgb, var(--accent) 8%, transparent);
+  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
+  border-radius: 8px;
+  font-size: 12px;
+  color: var(--muted);
+}
+
+.chat-reply-preview__icon {
+  display: inline-flex;
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+}
+
+.chat-reply-preview__icon svg {
+  width: 16px;
+  height: 16px;
+}
+
+.chat-reply-preview__label {
+  font-weight: 600;
+  flex-shrink: 0;
+  color: var(--accent);
+}
+
+.chat-reply-preview__text {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--fg);
+}
+
+.chat-reply-preview__dismiss {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  border: none;
+  background: none;
+  color: var(--muted);
+  cursor: pointer;
+  border-radius: 4px;
+  flex-shrink: 0;
+}
+
+.chat-reply-preview__dismiss:hover {
+  color: var(--fg);
+  background: color-mix(in srgb, var(--fg) 10%, transparent);
+}
+
+.chat-reply-preview__dismiss svg {
+  width: 16px;
+  height: 16px;
+  stroke: currentColor;
+  fill: none;
+  stroke-width: 2px;
+}
+
+/* Right-click reply context menu */
+.chat-reply-context-menu {
+  position: fixed;
+  z-index: 9999;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 4px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  min-width: 160px;
+}
+
+.chat-reply-context-menu button {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 8px 12px;
+  border: none;
+  background: none;
+  color: var(--fg);
+  cursor: pointer;
+  border-radius: 6px;
+  text-align: left;
+}
+
+.chat-reply-context-menu button:hover,
+.chat-reply-context-menu button:focus-visible {
+  background: color-mix(in srgb, var(--accent) 12%, transparent);
+  outline: none;
+}
+
+.chat-reply-context-menu button svg {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+}
+
 /* Compose input row - horizontal layout */
 .chat-compose__row {
   display: flex;
diff --git a/ui/src/ui/app-chat.test.ts b/ui/src/ui/app-chat.test.ts
@@ -2445,6 +2445,59 @@ describe("handleSendChat", () => {
     expect(userMessage.role).toBe("user");
   });
 
+  it("escapes reply sender labels and clears reply state after chat.send is acknowledged", async () => {
+    const sent = createDeferred<unknown>();
+    const request = vi.fn((method: string) => {
+      if (method === "chat.send") {
+        return sent.promise;
+      }
+      throw new Error(`Unexpected request: ${method}`);
+    });
+    const host = makeHost({
+      client: { request } as unknown as ChatHost["client"],
+      chatMessage: "continue",
+      chatReplyTarget: {
+        messageId: "reply-source-1",
+        text: "quoted body",
+        senderLabel: "A *B* [C]",
+      },
+    });
+
+    const send = handleSendChat(host);
+    await Promise.resolve();
+
+    expect(host.chatReplyTarget?.messageId).toBe("reply-source-1");
+    expect(host.chatQueue[0]?.text).toBe("> **A \\*B\\* \\[C\\]:** quoted body\n\ncontinue");
+
+    sent.resolve({ runId: host.chatQueue[0]?.sendRunId, status: "started" });
+    await send;
+
+    expect(host.chatReplyTarget).toBeNull();
+  });
+
+  it("keeps reply state when chat.send fails before acceptance", async () => {
+    const request = vi.fn((method: string) => {
+      if (method === "chat.send") {
+        return Promise.resolve({ runId: "run-failed", status: "error" });
+      }
+      throw new Error(`Unexpected request: ${method}`);
+    });
+    const host = makeHost({
+      client: { request } as unknown as ChatHost["client"],
+      chatMessage: "retry this",
+      chatReplyTarget: {
+        messageId: "reply-source-2",
+        text: "quoted body",
+        senderLabel: "User",
+      },
+    });
+
+    await handleSendChat(host);
+
+    expect(host.chatReplyTarget?.messageId).toBe("reply-source-2");
+    expect(host.chatMessage).toBe("retry this");
+  });
+
   it("routes queued Skill Workshop revisions through the proposal request RPC", async () => {
     const sent = createDeferred<unknown>();
     const request = vi.fn((method: string) => {
diff --git a/ui/src/ui/app-chat.ts b/ui/src/ui/app-chat.ts
@@ -137,6 +137,8 @@ export type ChatHost = ChatInputHistoryState & {
   tab?: string;
   /** Callback for slash-command side effects that need app-level access. */
   onSlashAction?: (action: string) => void | Promise<void>;
+  /** Selected message to reply to (right-click / keyboard shortcut). */
+  chatReplyTarget?: { messageId: string; text: string; senderLabel?: string | null } | null;
 };
 
 type ChatAgentsListSnapshot = Partial<Omit<AgentsListResult, "agents">> & {
@@ -1872,11 +1874,14 @@ export async function handleSendChat(
     }
   }
 
+  const replyTarget = host.chatReplyTarget;
+  const effectiveMessage = replyTarget ? prependReplyQuote(message, replyTarget) : message;
+
   const refreshSessions = shouldInterpretChatCommands && isChatResetCommand(message);
   const submitKey = chatSubmitKey(
     host,
     "message",
-    message,
+    effectiveMessage,
     attachmentsToSend,
     skillWorkshopRevision,
   );
@@ -1896,7 +1901,7 @@ export async function handleSendChat(
     const waitingForModel = modelSwitchReady !== true;
     const queued = enqueuePendingSendMessage(
       host,
-      message,
+      effectiveMessage,
       hasAttachments ? attachmentsToSend : undefined,
       refreshSessions,
       submittedAtMs,
@@ -1906,7 +1911,6 @@ export async function handleSendChat(
     if (!queued) {
       return;
     }
-
     if (modelSwitchReady !== true && !(await modelSwitchReady)) {
       if (host.sessionKey === submittedSessionKey) {
         cancelPendingSendBeforeRequest(host, queued, {
@@ -1943,7 +1947,7 @@ export async function handleSendChat(
       return;
     }
 
-    await sendChatMessageNow(host, message, {
+    const accepted = await sendChatMessageNow(host, effectiveMessage, {
       queueItemId: queued.id,
       previousDraft: cleared.previousDraft,
       restoreDraft: Boolean(messageOverride && opts?.restoreDraft),
@@ -1953,13 +1957,41 @@ export async function handleSendChat(
       refreshSessions,
       submittedAtMs,
     });
+    if (
+      accepted &&
+      replyTarget &&
+      host.chatReplyTarget?.messageId === replyTarget.messageId &&
+      host.sessionKey === submittedSessionKey
+    ) {
+      host.chatReplyTarget = null;
+    }
   });
 }
 
 function shouldQueueLocalSlashCommand(name: string): boolean {
   return !["stop", "export-session", "steer", "redirect", "new"].includes(name);
 }
 
+function prependReplyQuote(
+  message: string,
+  replyTarget: NonNullable<ChatHost["chatReplyTarget"]>,
+): string {
+  const label = escapeMarkdownInline(replyTarget.senderLabel ?? "User");
+  const text = replyTarget.text.trim();
+  if (!text.includes("\n")) {
+    return `> **${label}:** ${text}\n\n${message}`;
+  }
+  const quoted = text
+    .split("\n")
+    .map((line) => `> ${line}`)
+    .join("\n");
+  return `> **${label}:**\n${quoted}\n\n${message}`;
+}
+
+function escapeMarkdownInline(value: string): string {
+  return value.replace(/([\\`*_{}[\]()#+\-.!|>])/g, "\\$1");
+}
+
 // ── Slash Command Dispatch ──
 
 async function dispatchSlashCommand(
@@ -2068,6 +2100,7 @@ async function clearChatHistory(host: ChatHost) {
     host.chatMessages = [];
     clearCachedChatMessagesForSession(host, host.sessionKey);
     host.chatSideResult = null;
+    host.chatReplyTarget = null;
     reconcileChatRunLifecycle(host as unknown as Parameters<typeof reconcileChatRunLifecycle>[0], {
       outcome: hadActiveRun ? "interrupted" : undefined,
       sessionStatus: "killed",
diff --git a/ui/src/ui/app-render.helpers.ts b/ui/src/ui/app-render.helpers.ts
@@ -169,6 +169,7 @@ function resetChatStateForSessionSwitch(state: AppViewState, sessionKey: string)
   chatSessionState.reconnectResumeSessionId = null;
   state.chatMessage = "";
   state.chatAttachments = [];
+  state.chatReplyTarget = null;
   state.chatMessages = restoreChatMessagesForSession(state, sessionKey);
   state.chatToolMessages = [];
   state.activityEntries = [];
diff --git a/ui/src/ui/app-render.ts b/ui/src/ui/app-render.ts
@@ -3851,6 +3851,15 @@ export function renderApp(state: AppViewState) {
                   onDismissSideResult: () => {
                     state.chatSideResult = null;
                   },
+                  replyTarget: state.chatReplyTarget ?? null,
+                  onClearReply: () => {
+                    state.chatReplyTarget = null;
+                    requestHostUpdate?.();
+                  },
+                  onSetReply: (target) => {
+                    state.chatReplyTarget = target;
+                    requestHostUpdate?.();
+                  },
                   onNewSession: () => void createChatSession(state, { source: "user" }),
                   onClearHistory: runUiTask(async () => {
                     if (!state.client || !state.connected) {
@@ -3867,6 +3876,7 @@ export function renderApp(state: AppViewState) {
                         sessionKey: state.sessionKey,
                       });
                       state.chatSideResult = null;
+                      state.chatReplyTarget = null;
                       reconcileChatRunLifecycle(
                         state as unknown as Parameters<typeof reconcileChatRunLifecycle>[0],
                         {
diff --git a/ui/src/ui/app-view-state.ts b/ui/src/ui/app-view-state.ts
@@ -101,6 +101,7 @@ export type AppViewState = {
   chatSending: boolean;
   chatMessage: string;
   chatAttachments: ChatAttachment[];
+  chatReplyTarget?: { messageId: string; text: string; senderLabel?: string | null } | null;
   chatMessages: unknown[];
   chatToolMessages: unknown[];
   activityEntries: ActivityEntry[];
diff --git a/ui/src/ui/app.ts b/ui/src/ui/app.ts
@@ -320,6 +320,11 @@ export class OpenClawApp extends LitElement {
   @state() chatQueueBySession: Record<string, ChatQueueItem[]> = {};
   @state() chatMessagesBySession: ChatMessageCache = new Map();
   @state() chatAttachments: ChatAttachment[] = [];
+  @state() chatReplyTarget: {
+    messageId: string;
+    text: string;
+    senderLabel?: string | null;
+  } | null = null;
   @state() realtimeTalkActive = false;
   @state() realtimeTalkStatus: RealtimeTalkStatus = "idle";
   @state() realtimeTalkDetail: string | null = null;
diff --git a/ui/src/ui/chat/grouped-render.ts b/ui/src/ui/chat/grouped-render.ts
@@ -1772,7 +1772,11 @@ function renderGroupedMessage(
   const duplicateCount = Math.max(1, Math.floor(opts.duplicateCount ?? 1));
 
   return html`
-    <div class="${bubbleClasses}">
+    <div
+      class="${bubbleClasses}"
+      data-message-id=${messageKey}
+      data-message-text=${extractedText || nothing}
+    >
       ${renderReplyPill(normalizedMessage.replyTarget)}
       ${hasActions
         ? html`<div class="chat-bubble-actions">
diff --git a/ui/src/ui/views/chat.test.ts b/ui/src/ui/views/chat.test.ts
diff --git a/ui/src/ui/views/chat.ts b/ui/src/ui/views/chat.ts
