feat: add message scheduling via right-click on Send button

- Added dropdown menu to Send button with scheduling option
- Right-click or dropdown opens menu with 'Send message' and 'Schedule for after task completion' options
- Updated QueuedMessages component to show scheduled messages with clock icon
- Added translations for new scheduling feature
- Messages can be scheduled to send automatically after current task completes

Fixes #7738

Author: roomote

webview-ui/src/components/chat/ChatTextArea.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react"
 import { useEvent } from "react-use"
 import DynamicTextArea from "react-textarea-autosize"
-import { VolumeX, Image, WandSparkles, SendHorizontal, MessageSquareX } from "lucide-react"
+import { VolumeX, Image, WandSparkles, SendHorizontal, MessageSquareX, Clock } from "lucide-react"
 
 import { mentionRegex, mentionRegexGlobal, commandRegexGlobal, unescapeSpaces } from "@roo/context-mentions"
 import { WebviewMessage } from "@roo/WebviewMessage"
@@ -21,7 +21,13 @@ import {
 } from "@src/utils/context-mentions"
 import { cn } from "@src/lib/utils"
 import { convertToMentionPath } from "@src/utils/path-mentions"
-import { StandardTooltip } from "@src/components/ui"
+import {
+	StandardTooltip,
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuTrigger,
+} from "@src/components/ui"
 
 import Thumbnails from "../common/Thumbnails"
 import { ModeSelector } from "./ModeSelector"
@@ -1102,7 +1108,7 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 								</StandardTooltip>
 							</div>
 
-							<div className="absolute bottom-1 right-1 z-30">
+							<div className="absolute bottom-1 right-1 z-30 flex items-center gap-1">
 								{isEditMode && (
 									<StandardTooltip content={t("chat:cancel.title")}>
 										<button
@@ -1124,25 +1130,66 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 										</button>
 									</StandardTooltip>
 								)}
-								<StandardTooltip content={t("chat:sendMessage")}>
-									<button
-										aria-label={t("chat:sendMessage")}
-										disabled={false}
-										onClick={onSend}
-										className={cn(
-											"relative inline-flex items-center justify-center",
-											"bg-transparent border-none p-1.5",
-											"rounded-md min-w-[28px] min-h-[28px]",
-											"opacity-60 hover:opacity-100 text-vscode-descriptionForeground hover:text-vscode-foreground",
-											"transition-all duration-150",
-											"hover:bg-[rgba(255,255,255,0.03)] hover:border-[rgba(255,255,255,0.15)]",
-											"focus:outline-none focus-visible:ring-1 focus-visible:ring-vscode-focusBorder",
-											"active:bg-[rgba(255,255,255,0.1)]",
-											"cursor-pointer",
-										)}>
-										<SendHorizontal className="w-4 h-4" />
-									</button>
-								</StandardTooltip>
+								<DropdownMenu>
+									<DropdownMenuTrigger asChild>
+										<button
+											aria-label={t("chat:sendMessage")}
+											disabled={false}
+											onContextMenu={(e) => {
+												e.preventDefault()
+												// Trigger dropdown on right-click
+												const event = new MouseEvent("click", {
+													bubbles: true,
+													cancelable: true,
+													view: window,
+												})
+												e.currentTarget.dispatchEvent(event)
+											}}
+											onClick={(e) => {
+												// If it's a regular left click, just send the message
+												if (e.button === 0 && !e.ctrlKey && !e.metaKey) {
+													e.preventDefault()
+													e.stopPropagation()
+													onSend()
+												}
+											}}
+											className={cn(
+												"relative inline-flex items-center justify-center",
+												"bg-transparent border-none p-1.5",
+												"rounded-md min-w-[28px] min-h-[28px]",
+												"opacity-60 hover:opacity-100 text-vscode-descriptionForeground hover:text-vscode-foreground",
+												"transition-all duration-150",
+												"hover:bg-[rgba(255,255,255,0.03)] hover:border-[rgba(255,255,255,0.15)]",
+												"focus:outline-none focus-visible:ring-1 focus-visible:ring-vscode-focusBorder",
+												"active:bg-[rgba(255,255,255,0.1)]",
+												"cursor-pointer",
+											)}>
+											<SendHorizontal className="w-4 h-4" />
+										</button>
+									</DropdownMenuTrigger>
+									<DropdownMenuContent align="end" className="w-56">
+										<DropdownMenuItem onClick={onSend}>
+											<SendHorizontal className="mr-2 h-4 w-4" />
+											<span>{t("chat:sendMessage")}</span>
+										</DropdownMenuItem>
+										<DropdownMenuItem
+											onClick={() => {
+												// Queue the message for after task completion
+												if (inputValue.trim() || selectedImages.length > 0) {
+													vscode.postMessage({
+														type: "queueMessage",
+														text: inputValue,
+														images: selectedImages,
+													})
+													setInputValue("")
+													setSelectedImages([])
+												}
+											}}>
+											<Clock className="mr-2 h-4 w-4" />
+											<span>{t("chat:scheduleForAfterTask")}</span>
+										</DropdownMenuItem>
+									</DropdownMenuContent>
+								</DropdownMenu>
 							</div>
 
 							{!inputValue && (

webview-ui/src/components/chat/QueuedMessages.tsx

@@ -41,7 +41,10 @@ export const QueuedMessages = ({ queue, onRemove, onUpdate }: QueuedMessagesProp
 
 	return (
 		<div className="px-[15px] py-[10px] pr-[6px]" data-testid="queued-messages">
-			<div className="text-vscode-descriptionForeground text-md mb-2">{t("queuedMessages.title")}</div>
+			<div className="text-vscode-descriptionForeground text-md mb-2">
+				<span className="codicon codicon-clock mr-2" />
+				{t("queuedMessages.scheduledTitle")}
+			</div>
 			<div className="flex flex-col gap-2 max-h-[300px] overflow-y-auto pr-2">
 				{queue.map((message, index) => {
 					const editState = getEditState(message.id, message.text)

webview-ui/src/i18n/locales/en/chat.json

@@ -128,6 +128,7 @@
 	"enhancePromptDescription": "The 'Enhance Prompt' button helps improve your prompt by providing additional context, clarification, or rephrasing. Try typing a prompt in here and clicking the button again to see how it works.",
 	"addImages": "Add images to message",
 	"sendMessage": "Send message",
+	"scheduleForAfterTask": "Schedule for after task completion",
 	"stopTts": "Stop text-to-speech",
 	"typeMessage": "Type a message...",
 	"typeTask": "Type your task here...",
@@ -387,6 +388,7 @@
 	},
 	"queuedMessages": {
 		"title": "Queued Messages:",
+		"scheduledTitle": "Scheduled for after task completion",
 		"clickToEdit": "Click to edit message"
 	}
 }