Checkbox to experiment with letting Cline edit through diffs (#48)

Co-authored-by: Jozi <jozigila@gmail.com>

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

@@ -213,10 +213,11 @@ export const ChatRowContent = ({
 
 		switch (tool.tool) {
 			case "editedExistingFile":
+			case "appliedDiff":
 				return (
 					<>
 						<div style={headerStyle}>
-							{toolIcon("edit")}
+							{toolIcon(tool.tool === "appliedDiff" ? "diff" : "edit")}
 							<span style={{ fontWeight: "bold" }}>Cline wants to edit this file:</span>
 						</div>
 						<CodeAccordian

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

@@ -121,6 +121,7 @@ const ChatView = ({ isHidden, showAnnouncement, hideAnnouncement, showHistoryVie
 							const tool = JSON.parse(lastMessage.text || "{}") as ClineSayTool
 							switch (tool.tool) {
 								case "editedExistingFile":
+								case "appliedDiff":
 								case "newFileCreated":
 									setPrimaryButtonText("Save")
 									setSecondaryButtonText("Reject")
@@ -747,7 +748,7 @@ const ChatView = ({ isHidden, showAnnouncement, hideAnnouncement, showHistoryVie
 			const lastMessage = messages.at(-1)
 			if (lastMessage?.type === "ask" && lastMessage.text) {
 				const tool = JSON.parse(lastMessage.text)
-				return ["editedExistingFile", "newFileCreated"].includes(tool.tool)
+				return ["editedExistingFile", "appliedDiff", "newFileCreated"].includes(tool.tool)
 			}
 			return false
 		}

webview-ui/src/components/settings/SettingsView.tsx

@@ -27,6 +27,8 @@ const SettingsView = ({ onDone }: SettingsViewProps) => {
 		setAlwaysAllowBrowser,
 		soundEnabled,
 		setSoundEnabled,
+		diffEnabled,
+		setDiffEnabled,
 		openRouterModels,
 		setAllowedCommands,
 		allowedCommands,
@@ -50,6 +52,7 @@ const SettingsView = ({ onDone }: SettingsViewProps) => {
 			vscode.postMessage({ type: "alwaysAllowBrowser", bool: alwaysAllowBrowser })
 			vscode.postMessage({ type: "allowedCommands", commands: allowedCommands ?? [] })
 			vscode.postMessage({ type: "soundEnabled", bool: soundEnabled })
+			vscode.postMessage({ type: "diffEnabled", bool: diffEnabled })
 			onDone()
 		}
 	}
@@ -288,6 +291,20 @@ const SettingsView = ({ onDone }: SettingsViewProps) => {
 					</div>
 				)}
 
+				<div style={{ marginBottom: 5 }}>
+					<VSCodeCheckbox checked={diffEnabled} onChange={(e: any) => setDiffEnabled(e.target.checked)}>
+						<span style={{ fontWeight: "500" }}>Enable editing through diffs</span>
+					</VSCodeCheckbox>
+					<p
+						style={{
+							fontSize: "12px",
+							marginTop: "5px",
+							color: "var(--vscode-descriptionForeground)",
+						}}>
+						When enabled, Cline will be able to apply diffs to make changes to files.
+					</p>
+				</div>
+
 				<div style={{ marginBottom: 5 }}>
 					<VSCodeCheckbox checked={soundEnabled} onChange={(e: any) => setSoundEnabled(e.target.checked)}>
 						<span style={{ fontWeight: "500" }}>Enable sound effects</span>

webview-ui/src/context/ExtensionStateContext.tsx

@@ -26,6 +26,7 @@ export interface ExtensionStateContextType extends ExtensionState {
 	setShowAnnouncement: (value: boolean) => void
 	setAllowedCommands: (value: string[]) => void
 	setSoundEnabled: (value: boolean) => void
+	setDiffEnabled: (value: boolean) => void
 }
 
 const ExtensionStateContext = createContext<ExtensionStateContextType | undefined>(undefined)
@@ -38,6 +39,7 @@ export const ExtensionStateContextProvider: React.FC<{ children: React.ReactNode
 		shouldShowAnnouncement: false,
 		allowedCommands: [],
 		soundEnabled: false,
+		diffEnabled: false,
 	})
 	const [didHydrateState, setDidHydrateState] = useState(false)
 	const [showWelcome, setShowWelcome] = useState(false)
@@ -127,6 +129,7 @@ export const ExtensionStateContextProvider: React.FC<{ children: React.ReactNode
 		setShowAnnouncement: (value) => setState((prevState) => ({ ...prevState, shouldShowAnnouncement: value })),
 		setAllowedCommands: (value) => setState((prevState) => ({ ...prevState, allowedCommands: value })),
 		setSoundEnabled: (value) => setState((prevState) => ({ ...prevState, soundEnabled: value })),
+		setDiffEnabled: (value) => setState((prevState) => ({ ...prevState, diffEnabled: value })),
 	}
 
 	return <ExtensionStateContext.Provider value={contextValue}>{children}</ExtensionStateContext.Provider>