Merge pull request #248 from OpenKnots/okcode/remove-queued-code

Allow removing queued chat messages

Author: BunsDev

apps/web/src/components/ChatView.tsx

@@ -3597,6 +3597,15 @@ export default function ChatView({ threadId }: ChatViewProps) {
     setQueuedMessages([]);
   }, []);
 
+  const onRemoveQueuedMessage = useCallback((messageId: MessageId) => {
+    setOptimisticUserMessages((existing) => {
+      const target = existing.find((msg) => msg.id === messageId && msg.queued);
+      if (target) revokeUserMessagePreviewUrls(target);
+      return existing.filter((msg) => msg.id !== messageId);
+    });
+    setQueuedMessages((existing) => existing.filter((msg) => msg.id !== messageId));
+  }, []);
+
   const onRespondToApproval = useCallback(
     async (requestId: ApprovalRequestId, decision: ProviderApprovalDecision) => {
       const api = readNativeApi();
@@ -4737,6 +4746,7 @@ export default function ChatView({ threadId }: ChatViewProps) {
                   timestampFormat={timestampFormat}
                   workspaceRoot={activeProject?.cwd ?? undefined}
                   shortcutGuides={chatShortcutGuides}
+                  onRemoveQueuedMessage={onRemoveQueuedMessage}
                   onOpenSettings={() => void navigate({ to: "/settings" })}
                 />
               </div>

apps/web/src/components/chat/MessagesTimeline.test.tsx

@@ -102,6 +102,7 @@ describe("MessagesTimeline", () => {
         resolvedTheme="light"
         timestampFormat="locale"
         workspaceRoot={undefined}
+        onRemoveQueuedMessage={() => {}}
         shortcutGuides={EMPTY_SHORTCUT_GUIDES}
         onOpenSettings={() => {}}
       />,
@@ -149,6 +150,7 @@ describe("MessagesTimeline", () => {
         resolvedTheme="light"
         timestampFormat="locale"
         workspaceRoot={undefined}
+        onRemoveQueuedMessage={() => {}}
         shortcutGuides={EMPTY_SHORTCUT_GUIDES}
         onOpenSettings={() => {}}
       />,
@@ -183,6 +185,7 @@ describe("MessagesTimeline", () => {
         resolvedTheme="light"
         timestampFormat="locale"
         workspaceRoot={undefined}
+        onRemoveQueuedMessage={() => {}}
         shortcutGuides={EMPTY_SHORTCUT_GUIDES}
         onOpenSettings={() => {}}
       />,

apps/web/src/components/chat/MessagesTimeline.tsx

@@ -33,6 +33,7 @@ import {
   TerminalIcon,
   Undo2Icon,
   WrenchIcon,
+  XIcon,
   ZapIcon,
 } from "lucide-react";
 import { Button } from "../ui/button";
@@ -87,6 +88,7 @@ interface MessagesTimelineProps {
   resolvedTheme: "light" | "dark";
   timestampFormat: TimestampFormat;
   workspaceRoot: string | undefined;
+  onRemoveQueuedMessage: (messageId: MessageId) => void;
   shortcutGuides: ChatShortcutGuide[];
   onOpenSettings: () => void;
 }
@@ -113,6 +115,7 @@ export const MessagesTimeline = memo(function MessagesTimeline({
   resolvedTheme,
   timestampFormat,
   workspaceRoot,
+  onRemoveQueuedMessage,
   shortcutGuides,
   onOpenSettings,
 }: MessagesTimelineProps) {
@@ -508,9 +511,16 @@ export const MessagesTimeline = memo(function MessagesTimeline({
                   </div>
                   <div className="flex items-center gap-1.5">
                     {isQueued && (
-                      <span className="inline-flex items-center rounded-full bg-amber-500/10 px-1.5 py-0.5 text-[9px] font-medium text-amber-600 dark:text-amber-400">
+                      <button
+                        type="button"
+                        className="inline-flex items-center gap-1 rounded-full bg-amber-500/10 px-1.5 py-0.5 text-[9px] font-medium text-amber-600 transition-colors hover:bg-destructive/15 hover:text-destructive dark:text-amber-400 dark:hover:text-destructive"
+                        title="Remove queued message"
+                        aria-label="Remove queued message"
+                        onClick={() => onRemoveQueuedMessage(row.message.id)}
+                      >
                         Queued
-                      </span>
+                        <XIcon className="size-2.5" />
+                      </button>
                     )}
                     <p className="text-right text-[10px] text-muted-foreground/30">
                       {formatTimestamp(row.message.createdAt, timestampFormat, resolvedLocale)}