Added scenario to handle enable/disable of setup button. Also button text changed based on the scenario that either setup/update

src/panels/setupGranitePage.ts

@@ -360,6 +360,17 @@ export class SetupGranitePage {
         tabModel,
         embeddingsModel
       );
+
+      //set recent used models
+      webview.postMessage({
+        command: "recentModels",
+        data: {
+          recentChatModel: chatModel,
+          recentTabModel: tabModel,
+          recentEmbeddingModel: embeddingsModel
+        },
+      });
+
       console.log("Granite AI-Assistant setup complete");
       await Telemetry.send("paver.setup.success", {
         chatModelId: chatModel ?? 'none',
@@ -371,6 +382,17 @@ export class SetupGranitePage {
       if (error instanceof CancellationError || error?.name === "Canceled") {
         return;
       }
+
+      //set recent used models to null when error
+      webview.postMessage({
+        command: "recentModels",
+        data: {
+          recentChatModel: null,
+          recentTabModel: null,
+          recentEmbeddingModel: null
+        },
+      });
+
       // Generic error handling for all errors
       await Telemetry.send("paver.setup.error", {
         error: error?.message ?? 'unknown error',

webviews/src/App.css

@@ -77,7 +77,7 @@ button:disabled {
 }
 
 .final-setup-group .install-button {
-  min-width: 120px;
+  min-width: 150px;
   height: fit-content;
 }
 
@@ -88,6 +88,7 @@ button:disabled {
   justify-content: flex-start;
   width: 500px;
 }
+
 .main-wrapper {
   width: 100%;
   height: 100%;
@@ -215,6 +216,7 @@ button:disabled {
   line-height: 1.2rem;
   color: var(--vscode-terminal-background);
 }
+
 /* Toggle Switch (with label) */
 .switch-toggle-wrapper {
   display: flex;
@@ -328,6 +330,7 @@ button:disabled {
 
 /* Don't add CSS below @media query section */
 @media (max-width: 767px) {
+
   .info-message,
   .main-description,
   .main-wrapper .form-group-wrapper {
@@ -344,7 +347,7 @@ button:disabled {
     flex-wrap: wrap;
     gap: 8px 16px;
   }
-  
+
   .main-wrapper .form-group-wrapper .model-list {
     min-width: initial;
   }

webviews/src/App.tsx

@@ -63,6 +63,12 @@ function App() {
     useState(false);
   const [uiMode, setUiMode] = useState<"simple" | "advanced">("simple");
 
+  const [buttonTitle, setButtonTitle] = useState('');
+
+  const [recentTabModel, setRecentTabModel] = useState<string | null>(null);
+  const [recentChatModel, setRecentChatModel] = useState<string | null>(null);
+  const [recentEmbeddingsModel, setRecentEmbeddingsModel] = useState<string | null>(null);
+
   const getModelStatus = useCallback(
     (model: string | null): ModelStatus | null => {
       if (model === null) {
@@ -107,6 +113,12 @@ function App() {
     });
   }
 
+  function handleSetupGraniteEnableDisable(): boolean {
+    const handleSimpleMode = serverStatus === ServerStatus.started && chatModel === recentChatModel &&
+      embeddingsModel === recentEmbeddingsModel;
+    return uiMode === "advanced" ? handleSimpleMode && tabModel === recentTabModel : handleSimpleMode;
+  }
+
   const REFETCH_MODELS_INTERVAL_MS = 1500;
   let ollamaStatusChecker: NodeJS.Timeout | undefined;
 
@@ -144,6 +156,12 @@ function App() {
         setEnabled(!disabled);
         break;
       }
+      case 'recentModels': {
+        setRecentChatModel(payload.data.recentChatModel);
+        setRecentTabModel(payload.data.recentTabModel);
+        setRecentEmbeddingsModel(payload.data.recentEmbeddingModel);
+        break;
+      }
     }
   }, []);
 
@@ -185,6 +203,17 @@ function App() {
     };
   }, [serverStatus, modelStatuses]);
 
+  useEffect(() => {
+    if (serverStatus === ServerStatus.started &&
+      ModelStatus.installed === getModelStatus(chatModel) &&
+      ModelStatus.installed === getModelStatus(tabModel) &&
+      ModelStatus.installed === getModelStatus(embeddingsModel)) {
+      setButtonTitle('Update Granite');
+    } else {
+      setButtonTitle('Setup Granite');
+    }
+  }), [buttonTitle];
+
   const getServerIconType = useCallback(
     (status: ServerStatus): StatusValue => {
       switch (status) {
@@ -229,9 +258,9 @@ function App() {
 
     uiMode === "advanced"
       ? (checkKeepExistingConfig =
-          chatModel === null && tabModel === null && embeddingsModel === null)
+        chatModel === null && tabModel === null && embeddingsModel === null)
       : (checkKeepExistingConfig =
-          chatModel === null && embeddingsModel === null);
+        chatModel === null && embeddingsModel === null);
 
     setIsKeepExistingConfigSelected(checkKeepExistingConfig);
     setUiMode(uiMode);
@@ -291,12 +320,12 @@ function App() {
                   {installationModes.some(
                     (mode) => mode.supportsRefresh === true
                   ) && (
-                    <p>
-                      <span>
-                        This page will refresh once Ollama is installed.
-                      </span>
-                    </p>
-                  )}
+                      <p>
+                        <span>
+                          This page will refresh once Ollama is installed.
+                        </span>
+                      </p>
+                    )}
                   {installationModes.map((mode) => (
                     <button
                       key={mode.id}
@@ -387,25 +416,24 @@ function App() {
               </label>
             </div>
           </div>
-          {}
+          { }
           <button
             className="install-button"
             onClick={handleSetupGraniteClick}
-            disabled={
-              serverStatus !== ServerStatus.started ||
-              !enabled ||
-              isKeepExistingConfigSelected
+            disabled={handleSetupGraniteEnableDisable() ||
+              serverStatus !== ServerStatus.started
             }
+            title={handleSetupGraniteEnableDisable() ? 'No configuration changes detected' : ''}
           >
-            Setup Granite
+            {buttonTitle}
           </button>
         </div>
       </div>
 
       <div className="info-message">
         <p>
-            * To reopen this wizard, open the command palette and run:
-            <p style={{ margin: 2, paddingLeft: 10 }}><strong>Paver: Setup Granite as code assistant</strong></p>
+          * To reopen this wizard, open the command palette and run:
+          <p style={{ margin: 2, paddingLeft: 10 }}><strong>Paver: Setup Granite as code assistant</strong></p>
         </p>
         {uiMode === "simple" ? (
           <p>