fix: address PR review feedback for message queueing feature

- Restore original ChatView tests from main branch
- Fix broken test by updating ChatTextArea mock
- Add comprehensive tests for message queueing (simplified due to mocking constraints)
- Fix race condition using useRef and setTimeout in queue processing
- Extract QueuedMessage interface to shared types.ts file
- Replace inline styles with Tailwind classes in QueuedMessages
- Add i18n support for 'Queued Messages:' text
- Add keyboard navigation for removing queued messages
- Add JSDoc for fromQueue parameter in handleSendMessage

Author: daniel-lxs

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

@@ -56,11 +56,7 @@ import ProfileViolationWarning from "./ProfileViolationWarning"
 import { CheckpointWarning } from "./CheckpointWarning"
 import QueuedMessages from "./QueuedMessages"
 import { getLatestTodo } from "@roo/todo"
-
-interface QueuedMessage {
-	text: string
-	images: string[]
-}
+import { QueuedMessage } from "./types"
 
 export interface ChatViewProps {
 	isHidden: boolean
@@ -161,6 +157,7 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 	const [sendingDisabled, setSendingDisabled] = useState(false)
 	const [selectedImages, setSelectedImages] = useState<string[]>([])
 	const [messageQueue, setMessageQueue] = useState<QueuedMessage[]>([])
+	const isProcessingQueueRef = useRef(false)
 
 	// we need to hold on to the ask because useEffect > lastMessage will always let us know when an ask comes in and handle it, but by the time handleMessage is called, the last message might not be the ask anymore (it could be a say that followed)
 	const [clineAsk, setClineAsk] = useState<ClineAsk | undefined>(undefined)
@@ -545,6 +542,12 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 		disableAutoScrollRef.current = false
 	}, [])
 
+	/**
+	 * Handles sending messages to the extension
+	 * @param text - The message text to send
+	 * @param images - Array of image data URLs to send with the message
+	 * @param fromQueue - Internal flag indicating if this message is being sent from the queue (prevents re-queueing)
+	 */
 	const handleSendMessage = useCallback(
 		(text: string, images: string[], fromQueue = false) => {
 			text = text.trim()
@@ -596,10 +599,16 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 	)
 
 	useEffect(() => {
-		if (!sendingDisabled && messageQueue.length > 0) {
+		if (!sendingDisabled && messageQueue.length > 0 && !isProcessingQueueRef.current) {
+			isProcessingQueueRef.current = true
 			const nextMessage = messageQueue[0]
-			handleSendMessage(nextMessage.text, nextMessage.images, true)
-			setMessageQueue((prev) => prev.slice(1))
+
+			// Use setTimeout to ensure state updates are processed
+			setTimeout(() => {
+				handleSendMessage(nextMessage.text, nextMessage.images, true)
+				setMessageQueue((prev) => prev.slice(1))
+				isProcessingQueueRef.current = false
+			}, 0)
 		}
 	}, [sendingDisabled, messageQueue, handleSendMessage])
 

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

@@ -1,35 +1,46 @@
 import React from "react"
 import { VSCodeButton } from "@vscode/webview-ui-toolkit/react"
+import { useTranslation } from "react-i18next"
 import Thumbnails from "../common/Thumbnails"
-
-interface QueuedMessage {
-	text: string
-	images: string[]
-}
+import { QueuedMessage } from "./types"
 
 interface QueuedMessagesProps {
 	queue: QueuedMessage[]
 	onRemove: (index: number) => void
 }
 
 const QueuedMessages: React.FC<QueuedMessagesProps> = ({ queue, onRemove }) => {
+	const { t } = useTranslation("chat")
+
 	if (queue.length === 0) {
 		return null
 	}
 
 	return (
-		<div className="p-2 border-t border-vscode-panel-border">
-			<div className="text-vscode-descriptionForeground mb-2">Queued Messages:</div>
+		<div className="p-2 border-t border-vscode-panel-border" data-testid="queued-messages">
+			<div className="text-vscode-descriptionForeground mb-2">{t("queuedMessages.title")}</div>
 			<div className="flex flex-col gap-2">
 				{queue.map((message, index) => (
 					<div key={index} className="flex items-center gap-2 p-2 rounded-md bg-vscode-input-background">
 						<div className="flex-grow">
 							<p className="text-vscode-input-foreground">{message.text}</p>
 							{message.images.length > 0 && (
-								<Thumbnails images={message.images} style={{ marginTop: "8px" }} />
+								<div className="mt-2">
+									<Thumbnails images={message.images} />
+								</div>
 							)}
 						</div>
-						<VSCodeButton appearance="icon" aria-label="Remove message" onClick={() => onRemove(index)}>
+						<VSCodeButton
+							appearance="icon"
+							aria-label={t("queuedMessages.removeMessage")}
+							onClick={() => onRemove(index)}
+							onKeyDown={(e: React.KeyboardEvent) => {
+								if (e.key === "Enter" || e.key === " ") {
+									e.preventDefault()
+									onRemove(index)
+								}
+							}}
+							tabIndex={0}>
 							<span className="codicon codicon-close"></span>
 						</VSCodeButton>
 					</div>