fix: save button implementation in settings (#141)

Author: magesh-presidio

.changeset/perfect-mugs-hope.md

@@ -0,0 +1,5 @@
+---
+"hai-build-code-generator": patch
+---
+
+Replace AutoSave with a 'Done' button in settings to explicitly save configuration changes, improving clarity and user control.

src/core/controller/index.ts

@@ -881,9 +881,6 @@ export class Controller {
 			case "validateLLMConfig":
 				let isValid = false
 				if (message.apiConfiguration) {
-					// Save the LLM configuration in the state
-					await updateApiConfiguration(this.context, message.apiConfiguration, this.workspaceId)
-
 					// If no validation error is encountered, validate the LLM configuration by sending a test message.
 					if (!message.text) {
 						try {
@@ -906,9 +903,6 @@ export class Controller {
 			case "validateEmbeddingConfig":
 				let isEmbeddingValid = false
 				if (message.embeddingConfiguration) {
-					// Save the Embedding configuration in the state
-					await updateEmbeddingConfiguration(this.context, message.embeddingConfiguration, this.workspaceId)
-
 					// If no validation error is encountered, validate the Embedding configuration by sending a test message.
 					if (!message.text) {
 						try {

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

@@ -37,7 +37,7 @@ interface ChatViewProps {
 	showAnnouncement: boolean
 	hideAnnouncement: () => void
 	showHistoryView: () => void
-	onTaskSelect: (task: IHaiClineTask) => void
+	onTaskSelect: (task: IHaiClineTask | null) => void
 	selectedHaiTask: IHaiClineTask | null
 	haiConfig: {
 		[x: string]: any
@@ -809,13 +809,7 @@ const ChatView = ({
 	)
 
 	const clearSelectedHaiTaskId = () => {
-		onTaskSelect({
-			acceptance: selectedHaiTask?.acceptance ?? "",
-			context: selectedHaiTask?.context ?? "",
-			id: "",
-			list: selectedHaiTask?.list ?? "",
-			status: selectedHaiTask?.status ?? "",
-		})
+		onTaskSelect(null)
 	}
 
 	return (

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

@@ -1,17 +1,14 @@
 import { VSCodeButton, VSCodeCheckbox, VSCodeLink, VSCodeTextArea } from "@vscode/webview-ui-toolkit/react"
-import { memo, useCallback, useEffect, useState } from "react"
-import { validateApiConfiguration, validateModelId } from "../../utils/validate"
+import { memo, useEffect, useState } from "react"
+import { validateApiConfiguration, validateEmbeddingConfiguration, validateModelId } from "../../utils/validate"
 import { useExtensionState } from "../../context/ExtensionStateContext"
 import { vscode } from "../../utils/vscode"
 import ApiOptions from "./ApiOptions"
 import SettingsViewExtra from "./SettingsViewExtra"
 import EmbeddingOptions from "./EmbeddingOptions"
 import SettingsButton from "../common/SettingsButton"
-import { useDebounce, useDeepCompareEffect } from "react-use"
 import { CREATE_HAI_RULES_PROMPT, HAI_RULES_PATH } from "../../utils/constants"
 import { TabButton } from "../mcp/McpView"
-import { useEvent } from "react-use"
-import { ExtensionMessage } from "../../../../src/shared/ExtensionMessage"
 
 const IS_DEV = true // FIXME: use flags when packaging
 
@@ -65,21 +62,27 @@ const SettingsView = ({ onDone }: SettingsViewProps) => {
 		}
 	}
 
-	useDebounce(
-		() => {
-			vscode.postMessage({ type: "customInstructions", text: customInstructions || "" })
-		},
-		500,
-		[customInstructions],
-	)
+	const handleSubmit = (withoutDone: boolean = false) => {
+		const apiValidationResult = validateApiConfiguration(apiConfiguration)
+		const modelIdValidationResult = validateModelId(apiConfiguration, openRouterModels)
 
-	useEffect(() => {
-		vscode.postMessage({ type: "telemetrySetting", telemetrySetting })
-	}, [telemetrySetting])
+		if (!apiValidationResult && !modelIdValidationResult) {
+			vscode.postMessage({ type: "apiConfiguration", apiConfiguration })
+			vscode.postMessage({ type: "buildContextOptions", buildContextOptions: buildContextOptions })
+			vscode.postMessage({ type: "embeddingConfiguration", embeddingConfiguration })
+		}
 
-	useEffect(() => {
-		vscode.postMessage({ type: "updateSettings", planActSeparateModelsSetting })
-	}, [planActSeparateModelsSetting])
+		vscode.postMessage({
+			type: "updateSettings",
+			planActSeparateModelsSetting,
+			customInstructionsSetting: customInstructions,
+			telemetrySetting,
+		})
+
+		if (!withoutDone) {
+			onDone()
+		}
+	}
 
 	useEffect(() => {
 		if (pendingTabChange) {
@@ -92,15 +95,12 @@ const SettingsView = ({ onDone }: SettingsViewProps) => {
 		}
 	}, [pendingTabChange])
 
-	useDeepCompareEffect(() => {
-		vscode.postMessage({ type: "buildContextOptions", buildContextOptions: buildContextOptions })
-	}, [buildContextOptions])
-
 	const handleTabChange = (tab: "plan" | "act") => {
 		if (tab === chatSettings.mode) {
 			return
 		}
 		setPendingTabChange(tab)
+		handleSubmit(true)
 	}
 
 	return (
@@ -125,6 +125,7 @@ const SettingsView = ({ onDone }: SettingsViewProps) => {
 					paddingRight: 17,
 				}}>
 				<h3 style={{ color: "var(--vscode-foreground)", margin: 0 }}>Settings</h3>
+				<VSCodeButton onClick={() => handleSubmit(false)}>Done</VSCodeButton>
 			</div>
 			<div
 				style={{