ui-ux: debug-tab

dustinwloring1988 · web-flow · commit 4016f5493310 · 2024-12-15T14:14:31.000-05:00
debug tab check for update is now branch specific.
fixed bug with getting URLs for experimental models
diff --git a/app/components/settings/debug/DebugTab.tsx b/app/components/settings/debug/DebugTab.tsx
@@ -28,14 +28,20 @@ interface IProviderConfig {
   name: string;
   settings: {
     enabled: boolean;
+    baseUrl?: string;
   };
 }
 
+interface CommitData {
+  commit: string;
+}
+
 const LOCAL_PROVIDERS = ['Ollama', 'LMStudio', 'OpenAILike'];
 const versionHash = commit.commit;
 const GITHUB_URLS = {
   original: 'https://api.github.com/repos/stackblitz-labs/bolt.diy/commits/main',
   fork: 'https://api.github.com/repos/Stijnus/bolt.new-any-llm/commits/main',
+  commitJson: (branch: string) => `https://raw.githubusercontent.com/stackblitz-labs/bolt.diy/${branch}/app/commit.json`,
 };
 
 function getSystemInfo(): SystemInfo {
@@ -200,7 +206,7 @@ const checkProviderStatus = async (url: string | null, providerName: string): Pr
 };
 
 export default function DebugTab() {
-  const { providers } = useSettings();
+  const { providers, useLatestBranch } = useSettings();
   const [activeProviders, setActiveProviders] = useState<ProviderStatus[]>([]);
   const [updateMessage, setUpdateMessage] = useState<string>('');
   const [systemInfo] = useState<SystemInfo>(getSystemInfo());
@@ -213,29 +219,30 @@ export default function DebugTab() {
 
     try {
       const entries = Object.entries(providers) as [string, IProviderConfig][];
-      const statuses = entries
-        .filter(([, provider]) => LOCAL_PROVIDERS.includes(provider.name))
-        .map(async ([, provider]) => {
-          const envVarName =
-            provider.name.toLowerCase() === 'ollama'
-              ? 'OLLAMA_API_BASE_URL'
-              : provider.name.toLowerCase() === 'lmstudio'
+      const statuses = await Promise.all(
+        entries
+          .filter(([, provider]) => LOCAL_PROVIDERS.includes(provider.name))
+          .map(async ([, provider]) => {
+            const envVarName =
+              provider.name.toLowerCase() === 'ollama'
+                ? 'OLLAMA_API_BASE_URL'
+                : provider.name.toLowerCase() === 'lmstudio'
                 ? 'LMSTUDIO_API_BASE_URL'
                 : `REACT_APP_${provider.name.toUpperCase()}_URL`;
 
-          // Access environment variables through import.meta.env
-          const url = import.meta.env[envVarName] || null;
-          console.log(`[Debug] Using URL for ${provider.name}:`, url, `(from ${envVarName})`);
+            // Access environment variables through import.meta.env
+            const url = import.meta.env[envVarName] || provider.settings.baseUrl || null; // Ensure baseUrl is used
+            console.log(`[Debug] Using URL for ${provider.name}:`, url, `(from ${envVarName})`);
 
-          const status = await checkProviderStatus(url, provider.name);
+            const status = await checkProviderStatus(url, provider.name);
+            return {
+              ...status,
+              enabled: provider.settings.enabled ?? false,
+            };
+          })
+      );
 
-          return {
-            ...status,
-            enabled: provider.settings.enabled ?? false,
-          };
-        });
-
-      Promise.all(statuses).then(setActiveProviders);
+      setActiveProviders(statuses);
     } catch (error) {
       console.error('[Debug] Failed to update provider statuses:', error);
     }
@@ -258,40 +265,34 @@ export default function DebugTab() {
       setIsCheckingUpdate(true);
       setUpdateMessage('Checking for updates...');
 
-      const [originalResponse, forkResponse] = await Promise.all([
-        fetch(GITHUB_URLS.original),
-        fetch(GITHUB_URLS.fork),
-      ]);
+      const branchToCheck = useLatestBranch ? 'main' : 'stable';
+      console.log(`[Debug] Checking for updates against ${branchToCheck} branch`);
 
-      if (!originalResponse.ok || !forkResponse.ok) {
-        throw new Error('Failed to fetch repository information');
+      const localCommitResponse = await fetch(GITHUB_URLS.commitJson(branchToCheck));
+      if (!localCommitResponse.ok) {
+        throw new Error('Failed to fetch local commit info');
       }
 
-      const [originalData, forkData] = await Promise.all([
-        originalResponse.json() as Promise<{ sha: string }>,
-        forkResponse.json() as Promise<{ sha: string }>,
-      ]);
-
-      const originalCommitHash = originalData.sha;
-      const forkCommitHash = forkData.sha;
-      const isForked = versionHash === forkCommitHash && forkCommitHash !== originalCommitHash;
+      const localCommitData = await localCommitResponse.json() as CommitData;
+      const remoteCommitHash = localCommitData.commit;
+      const currentCommitHash = versionHash;
 
-      if (originalCommitHash !== versionHash) {
+      if (remoteCommitHash !== currentCommitHash) {
         setUpdateMessage(
-          `Update available from original repository!\n` +
-            `Current: ${versionHash.slice(0, 7)}${isForked ? ' (forked)' : ''}\n` +
-            `Latest: ${originalCommitHash.slice(0, 7)}`,
+          `Update available from ${branchToCheck} branch!\n` +
+          `Current: ${currentCommitHash.slice(0, 7)}\n` +
+          `Latest: ${remoteCommitHash.slice(0, 7)}`
         );
       } else {
-        setUpdateMessage('You are on the latest version from the original repository');
+        setUpdateMessage(`You are on the latest version from the ${branchToCheck} branch`);
       }
     } catch (error) {
       setUpdateMessage('Failed to check for updates');
       console.error('[Debug] Failed to check for updates:', error);
     } finally {
       setIsCheckingUpdate(false);
     }
-  }, [isCheckingUpdate]);
+  }, [isCheckingUpdate, useLatestBranch]);
 
   const handleCopyToClipboard = useCallback(() => {
     const debugInfo = {
@@ -306,14 +307,17 @@ export default function DebugTab() {
         responseTime: provider.responseTime,
         url: provider.url,
       })),
-      Version: versionHash,
+      Version: {
+        hash: versionHash.slice(0, 7),
+        branch: useLatestBranch ? 'main' : 'stable'
+      },
       Timestamp: new Date().toISOString(),
     };
 
     navigator.clipboard.writeText(JSON.stringify(debugInfo, null, 2)).then(() => {
       toast.success('Debug information copied to clipboard!');
     });
-  }, [activeProviders, systemInfo]);
+  }, [activeProviders, systemInfo, useLatestBranch]);
 
   return (
     <div className="p-4 space-y-6">
diff --git a/app/components/settings/features/FeaturesTab.tsx b/app/components/settings/features/FeaturesTab.tsx
@@ -3,7 +3,7 @@ import { Switch } from '~/components/ui/Switch';
 import { useSettings } from '~/lib/hooks/useSettings';
 
 export default function FeaturesTab() {
-  const { debug, enableDebugMode, isLocalModel, enableLocalModels, eventLogs, enableEventLogs } = useSettings();
+  const { debug, enableDebugMode, isLocalModel, enableLocalModels, eventLogs, enableEventLogs, useLatestBranch, enableLatestBranch } = useSettings();
 
   const handleToggle = (enabled: boolean) => {
     enableDebugMode(enabled);
@@ -14,9 +14,18 @@ export default function FeaturesTab() {
     <div className="p-4 bg-bolt-elements-bg-depth-2 border border-bolt-elements-borderColor rounded-lg mb-4">
       <div className="mb-6">
         <h3 className="text-lg font-medium text-bolt-elements-textPrimary mb-4">Optional Features</h3>
-        <div className="flex items-center justify-between mb-2">
-          <span className="text-bolt-elements-textPrimary">Debug Features</span>
-          <Switch className="ml-auto" checked={debug} onCheckedChange={handleToggle} />
+        <div className="space-y-4">
+          <div className="flex items-center justify-between">
+            <span className="text-bolt-elements-textPrimary">Debug Features</span>
+            <Switch className="ml-auto" checked={debug} onCheckedChange={handleToggle} />
+          </div>
+          <div className="flex items-center justify-between">
+            <div>
+              <span className="text-bolt-elements-textPrimary">Use Main Branch</span>
+              <p className="text-sm text-bolt-elements-textSecondary">Check for updates against the main branch instead of stable</p>
+            </div>
+            <Switch className="ml-auto" checked={useLatestBranch} onCheckedChange={enableLatestBranch} />
+          </div>
         </div>
       </div>
 
diff --git a/app/lib/hooks/useSettings.tsx b/app/lib/hooks/useSettings.tsx
@@ -5,19 +5,42 @@ import {
   isLocalModelsEnabled,
   LOCAL_PROVIDERS,
   providersStore,
+  latestBranch,
 } from '~/lib/stores/settings';
 import { useCallback, useEffect, useState } from 'react';
 import Cookies from 'js-cookie';
 import type { IProviderSetting, ProviderInfo } from '~/types/model';
 import { logStore } from '~/lib/stores/logs'; // assuming logStore is imported from this location
+import commit from '~/commit.json';
+
+interface CommitData {
+  commit: string;
+}
 
 export function useSettings() {
   const providers = useStore(providersStore);
   const debug = useStore(isDebugMode);
   const eventLogs = useStore(isEventLogsEnabled);
   const isLocalModel = useStore(isLocalModelsEnabled);
+  const useLatest = useStore(latestBranch);
   const [activeProviders, setActiveProviders] = useState<ProviderInfo[]>([]);
 
+  // Function to check if we're on stable version
+  const checkIsStableVersion = async () => {
+    try {
+      const stableResponse = await fetch('https://raw.githubusercontent.com/stackblitz-labs/bolt.diy/stable/app/commit.json');
+      if (!stableResponse.ok) {
+        console.warn('Failed to fetch stable commit info');
+        return false;
+      }
+      const stableData = await stableResponse.json() as CommitData;
+      return commit.commit === stableData.commit;
+    } catch (error) {
+      console.warn('Error checking stable version:', error);
+      return false;
+    }
+  };
+
   // reading values from cookies on mount
   useEffect(() => {
     const savedProviders = Cookies.get('providers');
@@ -60,6 +83,19 @@ export function useSettings() {
     if (savedLocalModels) {
       isLocalModelsEnabled.set(savedLocalModels === 'true');
     }
+
+    // load latest branch setting from cookies or determine based on version
+    const savedLatestBranch = Cookies.get('useLatestBranch');
+    if (savedLatestBranch === undefined) {
+      // If setting hasn't been set by user, check version
+      checkIsStableVersion().then(isStable => {
+        const shouldUseLatest = !isStable;
+        latestBranch.set(shouldUseLatest);
+        Cookies.set('useLatestBranch', String(shouldUseLatest));
+      });
+    } else {
+      latestBranch.set(savedLatestBranch === 'true');
+    }
   }, []);
 
   // writing values to cookies on change
@@ -111,6 +147,12 @@ export function useSettings() {
     Cookies.set('isLocalModelsEnabled', String(enabled));
   }, []);
 
+  const enableLatestBranch = useCallback((enabled: boolean) => {
+    latestBranch.set(enabled);
+    logStore.logSystem(`Main branch updates ${enabled ? 'enabled' : 'disabled'}`);
+    Cookies.set('useLatestBranch', String(enabled));
+  }, []);
+
   return {
     providers,
     activeProviders,
@@ -121,5 +163,7 @@ export function useSettings() {
     enableEventLogs,
     isLocalModel,
     enableLocalModels,
+    useLatestBranch: useLatest,
+    enableLatestBranch,
   };
 }
diff --git a/app/lib/stores/settings.ts b/app/lib/stores/settings.ts
@@ -46,3 +46,5 @@ export const isDebugMode = atom(false);
 export const isEventLogsEnabled = atom(false);
 
 export const isLocalModelsEnabled = atom(true);
+
+export const latestBranch = atom(false);
