Fix scrolling in editor

Author: cte

src/activate/registerCommands.ts

@@ -89,14 +89,11 @@ const getCommandsMap = ({ context, outputChannel, provider }: RegisterCommandOpt
 }
 
 const openClineInNewTab = async ({ context, outputChannel }: Omit<RegisterCommandOptions, "provider">) => {
-	outputChannel.appendLine("Opening Roo Code in new tab")
-
 	// (This example uses webviewProvider activation event which is necessary to
 	// deserialize cached webview, but since we use retainContextWhenHidden, we
 	// don't need to use that event).
 	// https://github.com/microsoft/vscode-extension-samples/blob/main/webview-sample/src/extension.ts
-	const tabProvider = new ClineProvider(context, outputChannel)
-	// const column = vscode.window.activeTextEditor ? vscode.window.activeTextEditor.viewColumn : undefined
+	const tabProvider = new ClineProvider(context, outputChannel, "editor")
 	const lastCol = Math.max(...vscode.window.visibleTextEditors.map((editor) => editor.viewColumn || 0))
 
 	// Check if there are any visible text editors, otherwise open a new group
@@ -115,10 +112,10 @@ const openClineInNewTab = async ({ context, outputChannel }: Omit<RegisterComman
 		localResourceRoots: [context.extensionUri],
 	})
 
-	// Save as tab type panel
+	// Save as tab type panel.
 	setPanel(newPanel, "tab")
 
-	// TODO: use better svg icon with light and dark variants (see
+	// TODO: Use better svg icon with light and dark variants (see
 	// https://stackoverflow.com/questions/58365687/vscode-extension-iconpath).
 	newPanel.iconPath = {
 		light: vscode.Uri.joinPath(context.extensionUri, "assets", "icons", "rocket.png"),
@@ -127,12 +124,12 @@ const openClineInNewTab = async ({ context, outputChannel }: Omit<RegisterComman
 
 	await tabProvider.resolveWebviewView(newPanel)
 
-	// Handle panel closing events
+	// Handle panel closing events.
 	newPanel.onDidDispose(() => {
 		setPanel(undefined, "tab")
 	})
 
-	// Lock the editor group so clicking on files doesn't open them over the panel
+	// Lock the editor group so clicking on files doesn't open them over the panel.
 	await delay(100)
 	await vscode.commands.executeCommand("workbench.action.lockEditorGroup")
 }

src/core/webview/ClineProvider.ts

@@ -91,6 +91,7 @@ export class ClineProvider extends EventEmitter<ClineProviderEvents> implements
 	constructor(
 		readonly context: vscode.ExtensionContext,
 		private readonly outputChannel: vscode.OutputChannel,
+		private readonly renderContext: "sidebar" | "editor" = "sidebar",
 	) {
 		super()
 
@@ -2375,11 +2376,10 @@ export class ClineProvider extends EventEmitter<ClineProviderEvents> implements
 			showRooIgnoredFiles,
 			language,
 		} = await this.getState()
+
 		const telemetryKey = process.env.POSTHOG_API_KEY
 		const machineId = vscode.env.machineId
-
 		const allowedCommands = vscode.workspace.getConfiguration("roo-cline").get<string[]>("allowedCommands") || []
-
 		const cwd = vscode.workspace.workspaceFolders?.map((folder) => folder.uri.fsPath).at(0) || ""
 
 		return {
@@ -2441,6 +2441,7 @@ export class ClineProvider extends EventEmitter<ClineProviderEvents> implements
 			machineId,
 			showRooIgnoredFiles: showRooIgnoredFiles ?? true,
 			language,
+			renderContext: this.renderContext,
 		}
 	}
 

src/extension.ts

@@ -56,7 +56,7 @@ export function activate(context: vscode.ExtensionContext) {
 		context.globalState.update("allowedCommands", defaultCommands)
 	}
 
-	const provider = new ClineProvider(context, outputChannel)
+	const provider = new ClineProvider(context, outputChannel, "sidebar")
 	telemetryService.setProvider(provider)
 
 	// Validate task history on extension activation

src/shared/ExtensionMessage.ts

@@ -154,6 +154,7 @@ export interface ExtensionState {
 	telemetryKey?: string
 	machineId?: string
 	showRooIgnoredFiles: boolean // Whether to show .rooignore'd files in listings
+	renderContext: "sidebar" | "editor"
 }
 
 export type { ClineMessage, ClineAsk, ClineSay }

webview-ui/src/components/common/Tab.tsx

@@ -1,5 +1,6 @@
-import { HTMLAttributes } from "react"
+import { HTMLAttributes, useCallback } from "react"
 
+import { useExtensionState } from "@/context/ExtensionStateContext"
 import { cn } from "@/lib/utils"
 
 type TabProps = HTMLAttributes<HTMLDivElement>
@@ -16,8 +17,31 @@ export const TabHeader = ({ className, children, ...props }: TabProps) => (
 	</div>
 )
 
-export const TabContent = ({ className, children, ...props }: TabProps) => (
-	<div className={cn("flex-1 overflow-auto p-5", className)} {...props}>
-		{children}
-	</div>
-)
+export const TabContent = ({ className, children, ...props }: TabProps) => {
+	const { renderContext } = useExtensionState()
+
+	const onWheel = useCallback(
+		(e: React.WheelEvent<HTMLDivElement>) => {
+			if (renderContext !== "editor") {
+				return
+			}
+
+			const target = e.target as HTMLElement
+
+			// Prevent scrolling if the target is a listbox or option
+			// (e.g. selects, dropdowns, etc).
+			if (target.role === "listbox" || target.role === "option") {
+				return
+			}
+
+			e.currentTarget.scrollTop += e.deltaY
+		},
+		[renderContext],
+	)
+
+	return (
+		<div className={cn("flex-1 overflow-auto p-5", className)} onWheel={onWheel} {...props}>
+			{children}
+		</div>
+	)
+}

webview-ui/src/components/prompts/PromptsView.tsx

@@ -45,6 +45,7 @@ function getGroupName(group: GroupEntry): ToolGroup {
 
 const PromptsView = ({ onDone }: PromptsViewProps) => {
 	const { t } = useAppTranslation()
+
 	const {
 		customModePrompts,
 		customSupportPrompts,