added modes

Author: liwilliam2021

packages/types/src/followup.ts

@@ -9,7 +9,7 @@ export interface FollowUpData {
 	/** The question being asked by the LLM */
 	question?: string
 	/** Array of suggested answers that the user can select */
-	suggest?: Array<string | SuggestionItem>
+	suggest?: Array<SuggestionItem>
 }
 
 /**
@@ -35,7 +35,7 @@ export const suggestionItemSchema = z.object({
  */
 export const followUpDataSchema = z.object({
 	question: z.string().optional(),
-	suggest: z.array(z.union([z.string(), suggestionItemSchema])).optional(),
+	suggest: z.array(suggestionItemSchema).optional(),
 })
 
 export type FollowUpDataType = z.infer<typeof followUpDataSchema>

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

@@ -10,7 +10,7 @@ import type { ClineMessage } from "@roo-code/types"
 import { ClineApiReqInfo, ClineAskUseMcpServer, ClineSayTool } from "@roo/ExtensionMessage"
 import { COMMAND_OUTPUT_STRING } from "@roo/combineCommandSequences"
 import { safeJsonParse } from "@roo/safeJsonParse"
-import { FollowUpData } from "@roo-code/types"
+import { FollowUpData, SuggestionItem } from "@roo-code/types"
 
 import { useCopyToClipboard } from "@src/utils/clipboard"
 import { useExtensionState } from "@src/context/ExtensionStateContext"
@@ -49,7 +49,7 @@ interface ChatRowProps {
 	isStreaming: boolean
 	onToggleExpand: (ts: number) => void
 	onHeightChange: (isTaller: boolean) => void
-	onSuggestionClick?: (answer: string, event?: React.MouseEvent) => void
+	onSuggestionClick?: (suggestion: SuggestionItem, event?: React.MouseEvent) => void
 	onBatchFileResponse?: (response: { [key: string]: boolean }) => void
 	onFollowUpUnmount?: () => void
 }

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

@@ -15,7 +15,7 @@ import type { ClineAsk, ClineMessage } from "@roo-code/types"
 import { ClineSayBrowserAction, ClineSayTool, ExtensionMessage } from "@roo/ExtensionMessage"
 import { McpServer, McpTool } from "@roo/mcp"
 import { findLast } from "@roo/array"
-import { FollowUpData } from "@roo-code/types"
+import { FollowUpData, SuggestionItem } from "@roo-code/types"
 import { combineApiRequests } from "@roo/combineApiRequests"
 import { combineCommandSequences } from "@roo/combineCommandSequences"
 import { getApiMetrics } from "@roo/getApiMetrics"
@@ -1197,18 +1197,43 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 
 	const placeholderText = task ? t("chat:typeMessage") : t("chat:typeTask")
 
+	// Function to switch to a specific mode
+	const switchToMode = useCallback(
+		(modeSlug: string): void => {
+			// Update local state and notify extension to sync mode change
+			setMode(modeSlug)
+
+			// Send the mode switch message
+			vscode.postMessage({
+				type: "mode",
+				text: modeSlug,
+			})
+		},
+		[setMode],
+	)
+
 	const handleSuggestionClickInRow = useCallback(
-		(answer: string, event?: React.MouseEvent) => {
+		(suggestion: SuggestionItem, event?: React.MouseEvent) => {
+			// Check if we need to switch modes
+			if (suggestion.mode) {
+				// Only switch modes if it's a manual click (event exists) or auto-approval is allowed
+				const isManualClick = !!event
+				if (isManualClick || alwaysAllowModeSwitch) {
+					// Switch mode without waiting
+					switchToMode(suggestion.mode)
+				}
+			}
+
 			if (event?.shiftKey) {
 				// Always append to existing text, don't overwrite
 				setInputValue((currentValue) => {
-					return currentValue !== "" ? `${currentValue} \n${answer}` : answer
+					return currentValue !== "" ? `${currentValue} \n${suggestion.answer}` : suggestion.answer
 				})
 			} else {
-				handleSendMessage(answer, [])
+				handleSendMessage(suggestion.answer, [])
 			}
 		},
-		[handleSendMessage, setInputValue], // setInputValue is stable, handleSendMessage depends on clineAsk
+		[handleSendMessage, setInputValue, switchToMode, alwaysAllowModeSwitch],
 	)
 
 	const handleBatchFileResponse = useCallback((response: { [key: string]: boolean }) => {
@@ -1308,11 +1333,9 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 
 						// Get the first suggestion
 						const firstSuggestion = followUpData.suggest[0]
-						const suggestionText =
-							typeof firstSuggestion === "string" ? firstSuggestion : firstSuggestion.answer
 
 						// Handle the suggestion click
-						handleSuggestionClickInRow(suggestionText)
+						handleSuggestionClickInRow(firstSuggestion)
 						return
 					}
 				} else if (lastMessage.ask === "tool" && isWriteToolAction(lastMessage)) {
@@ -1365,12 +1388,8 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 		const currentModeIndex = allModes.findIndex((m) => m.slug === mode)
 		const nextModeIndex = (currentModeIndex + 1) % allModes.length
 		// Update local state and notify extension to sync mode change
-		setMode(allModes[nextModeIndex].slug)
-		vscode.postMessage({
-			type: "mode",
-			text: allModes[nextModeIndex].slug,
-		})
-	}, [mode, setMode, customModes])
+		switchToMode(allModes[nextModeIndex].slug)
+	}, [mode, customModes, switchToMode])
 
 	// Add keyboard event handler
 	const handleKeyDown = useCallback(

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

@@ -2,7 +2,6 @@ import { useCallback, useEffect, useState } from "react"
 import { Edit } from "lucide-react"
 
 import { Button, StandardTooltip } from "@/components/ui"
-import { vscode } from "@/utils/vscode"
 
 import { useAppTranslation } from "@src/i18n/TranslationContext"
 import { useExtensionState } from "@src/context/ExtensionStateContext"
@@ -12,8 +11,8 @@ const DEFAULT_FOLLOWUP_TIMEOUT_MS = 60000
 const COUNTDOWN_INTERVAL_MS = 1000
 
 interface FollowUpSuggestProps {
-	suggestions?: (string | SuggestionItem)[]
-	onSuggestionClick?: (answer: string, event?: React.MouseEvent) => void
+	suggestions?: SuggestionItem[]
+	onSuggestionClick?: (suggestion: SuggestionItem, event?: React.MouseEvent) => void
 	ts: number
 	onUnmount?: () => void
 }
@@ -67,18 +66,7 @@ export const FollowUpSuggest = ({ suggestions = [], onSuggestionClick, ts = 1, o
 		onUnmount,
 	])
 	const handleSuggestionClick = useCallback(
-		(suggestion: string | SuggestionItem, event: React.MouseEvent) => {
-			const suggestionText = typeof suggestion === "string" ? suggestion : suggestion.answer
-			const mode = typeof suggestion === "object" ? suggestion.mode : undefined
-
-			// If there's a mode switch and it's not a shift-click (which just copies to input), switch modes first
-			if (mode && !event.shiftKey) {
-				vscode.postMessage({
-					type: "mode",
-					text: mode,
-				})
-			}
-
+		(suggestion: SuggestionItem, event: React.MouseEvent) => {
 			// Mark a suggestion as selected if it's not a shift-click (which just copies to input)
 			if (!event.shiftKey) {
 				setSuggestionSelected(true)
@@ -87,7 +75,9 @@ export const FollowUpSuggest = ({ suggestions = [], onSuggestionClick, ts = 1, o
 				onUnmount?.()
 			}
 
-			onSuggestionClick?.(suggestionText, event)
+			// Pass the suggestion object to the parent component
+			// The parent component will handle mode switching if needed
+			onSuggestionClick?.(suggestion, event)
 		},
 		[onSuggestionClick, onUnmount],
 	)
@@ -100,18 +90,16 @@ export const FollowUpSuggest = ({ suggestions = [], onSuggestionClick, ts = 1, o
 	return (
 		<div className="flex mb-2 flex-col h-full gap-2">
 			{suggestions.map((suggestion, index) => {
-				const suggestionText = typeof suggestion === "string" ? suggestion : suggestion.answer
-				const mode = typeof suggestion === "object" ? suggestion.mode : undefined
 				const isFirstSuggestion = index === 0
 
 				return (
-					<div key={`${suggestionText}-${ts}`} className="w-full relative group">
+					<div key={`${suggestion.answer}-${ts}`} className="w-full relative group">
 						<Button
 							variant="outline"
 							className="text-left whitespace-normal break-words w-full h-auto py-3 justify-start pr-8"
 							onClick={(event) => handleSuggestionClick(suggestion, event)}
-							aria-label={suggestionText}>
-							{suggestionText}
+							aria-label={suggestion.answer}>
+							{suggestion.answer}
 							{isFirstSuggestion && countdown !== null && !suggestionSelected && (
 								<span
 									className="ml-2 px-1.5 py-0.5 text-xs rounded-full bg-vscode-badge-background text-vscode-badge-foreground"
@@ -120,10 +108,10 @@ export const FollowUpSuggest = ({ suggestions = [], onSuggestionClick, ts = 1, o
 								</span>
 							)}
 						</Button>
-						{mode && (
+						{suggestion.mode && (
 							<div className="absolute bottom-0 right-0 text-[10px] bg-vscode-badge-background text-vscode-badge-foreground px-1 py-0.5 border border-vscode-badge-background flex items-center gap-0.5">
 								<span className="codicon codicon-arrow-right" style={{ fontSize: "8px" }} />
-								{mode}
+								{suggestion.mode}
 							</div>
 						)}
 						<StandardTooltip content={t("chat:followUpSuggest.copyToInput")}>
@@ -132,7 +120,7 @@ export const FollowUpSuggest = ({ suggestions = [], onSuggestionClick, ts = 1, o
 								onClick={(e) => {
 									e.stopPropagation()
 									// Simulate shift-click by directly calling the handler with shiftKey=true.
-									onSuggestionClick?.(suggestionText, { ...e, shiftKey: true })
+									onSuggestionClick?.(suggestion, { ...e, shiftKey: true })
 								}}>
 								<Button variant="ghost" size="icon">
 									<Edit />