feat: add export option to slash command menu

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

@@ -264,6 +264,14 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 					return
 				}
 
+				if (type === ContextMenuOptionType.Export) {
+					// Handle export action for current mode
+					setInputValue("")
+					setShowContextMenu(false)
+					vscode.postMessage({ type: "exportMode", slug: mode })
+					return
+				}
+
 				if (type === ContextMenuOptionType.Mode && value) {
 					// Handle mode selection.
 					setMode(value)
@@ -325,7 +333,7 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 				}
 			},
 			// eslint-disable-next-line react-hooks/exhaustive-deps
-			[setInputValue, cursorPosition],
+			[setInputValue, cursorPosition, mode],
 		)
 
 		const handleKeyDown = useCallback(
@@ -348,6 +356,8 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 								queryItems,
 								fileSearchResults,
 								allModes,
+								t("chat:exportCurrentMode"),
+								t("chat:exportModeDescription"),
 							)
 							const optionsLength = options.length
 
@@ -385,6 +395,8 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 							queryItems,
 							fileSearchResults,
 							allModes,
+							t("chat:exportCurrentMode"),
+							t("chat:exportModeDescription"),
 						)[selectedMenuIndex]
 						if (
 							selectedOption &&
@@ -475,6 +487,7 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 				fileSearchResults,
 				handleHistoryNavigation,
 				resetHistoryNavigation,
+				t,
 			],
 		)
 
@@ -1245,6 +1258,8 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 									modes={allModes}
 									loading={searchLoading}
 									dynamicSearchResults={fileSearchResults}
+									exportLabel={t("chat:exportCurrentMode")}
+									exportDescription={t("chat:exportModeDescription")}
 								/>
 							</div>
 						)}

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

@@ -23,6 +23,8 @@ interface ContextMenuProps {
 	modes?: ModeConfig[]
 	loading?: boolean
 	dynamicSearchResults?: SearchResult[]
+	exportLabel?: string
+	exportDescription?: string
 }
 
 const ContextMenu: React.FC<ContextMenuProps> = ({
@@ -36,13 +38,24 @@ const ContextMenu: React.FC<ContextMenuProps> = ({
 	queryItems,
 	modes,
 	dynamicSearchResults = [],
+	exportLabel = "Export current mode",
+	exportDescription = "Export the current mode configuration",
 }) => {
 	const [materialIconsBaseUri, setMaterialIconsBaseUri] = useState("")
 	const menuRef = useRef<HTMLDivElement>(null)
 
 	const filteredOptions = useMemo(() => {
-		return getContextMenuOptions(searchQuery, inputValue, selectedType, queryItems, dynamicSearchResults, modes)
-	}, [searchQuery, inputValue, selectedType, queryItems, dynamicSearchResults, modes])
+		return getContextMenuOptions(
+			searchQuery,
+			inputValue,
+			selectedType,
+			queryItems,
+			dynamicSearchResults,
+			modes,
+			exportLabel,
+			exportDescription,
+		)
+	}, [searchQuery, inputValue, selectedType, queryItems, dynamicSearchResults, modes, exportLabel, exportDescription])
 
 	useEffect(() => {
 		if (menuRef.current) {
@@ -69,6 +82,7 @@ const ContextMenu: React.FC<ContextMenuProps> = ({
 	const renderOptionContent = (option: ContextMenuQueryItem) => {
 		switch (option.type) {
 			case ContextMenuOptionType.Mode:
+			case ContextMenuOptionType.Export:
 				return (
 					<div style={{ display: "flex", flexDirection: "column", gap: "2px" }}>
 						<span style={{ lineHeight: "1.2" }}>{option.label}</span>
@@ -163,6 +177,8 @@ const ContextMenu: React.FC<ContextMenuProps> = ({
 		switch (option.type) {
 			case ContextMenuOptionType.Mode:
 				return "symbol-misc"
+			case ContextMenuOptionType.Export:
+				return "export"
 			case ContextMenuOptionType.OpenedFile:
 				return "window"
 			case ContextMenuOptionType.File:
@@ -263,7 +279,20 @@ const ContextMenu: React.FC<ContextMenuProps> = ({
 										}}
 									/>
 								)}
+								{(option.type === ContextMenuOptionType.Mode ||
+									option.type === ContextMenuOptionType.Export) && (
+									<i
+										className={`codicon codicon-${getIconForOption(option)}`}
+										style={{
+											marginRight: "6px",
+											flexShrink: 0,
+											fontSize: "14px",
+											marginTop: 0,
+										}}
+									/>
+								)}
 								{option.type !== ContextMenuOptionType.Mode &&
+									option.type !== ContextMenuOptionType.Export &&
 									option.type !== ContextMenuOptionType.File &&
 									option.type !== ContextMenuOptionType.Folder &&
 									option.type !== ContextMenuOptionType.OpenedFile &&

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

@@ -329,5 +329,7 @@
 		"title": "Roo Code Cloud is coming soon!",
 		"description": "Run Roomote agents in the cloud, access your tasks from anywhere, collaborate with others, and more.",
 		"joinWaitlist": "Join the waitlist to get early access."
-	}
+	},
+	"exportCurrentMode": "Export current mode",
+	"exportModeDescription": "Export the current mode configuration"
 }