Merge pull request stackblitz-labs#755 from thecodacus/fix-variable-name

fix: Added auto detect branch name and version tag for Debug Tab

Author: thecodacus

.github/workflows/commit.yaml

@@ -20,9 +20,17 @@ jobs:
     - name: Get the latest commit hash
       run: echo "COMMIT_HASH=$(git rev-parse HEAD)" >> $GITHUB_ENV
 
+    
+    - name: Setup Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: '20'
+
+
     - name: Update commit file
       run: |
-        echo "{ \"commit\": \"$COMMIT_HASH\" }" > app/commit.json
+        echo CURRENT_VERSION=$(node -p "require('./package.json').version") >> $GITHUB_ENV
+        echo "{ \"commit\": \"$COMMIT_HASH\" , \"version\": \"$CURRENT_VERSION\" }" > app/commit.json
 
     - name: Commit and push the update
       run: |

.github/workflows/update-stable.yml

@@ -9,30 +9,7 @@ permissions:
   contents: write
 
 jobs:
-  update-commit:
-    if: contains(github.event.head_commit.message, '#release')
-    runs-on: ubuntu-latest
-
-    steps:
-    - name: Checkout the code
-      uses: actions/checkout@v3
-      
-    - name: Get the latest commit hash
-      run: echo "COMMIT_HASH=$(git rev-parse HEAD)" >> $GITHUB_ENV
-
-    - name: Update commit file
-      run: |
-        echo "{ \"commit\": \"$COMMIT_HASH\" }" > app/commit.json
-
-    - name: Commit and push the update
-      run: |
-        git config --global user.name "github-actions[bot]"
-        git config --global user.email "github-actions[bot]@users.noreply.github.com"
-        git add app/commit.json
-        git commit -m "chore: update commit hash to $COMMIT_HASH"
-        git push
   prepare-release:
-    needs: update-commit
     if: contains(github.event.head_commit.message, '#release')
     runs-on: ubuntu-latest
 
@@ -183,8 +160,11 @@ jobs:
 
       - name: Commit and Tag Release
         run: |
+          echo "COMMIT_HASH=$(git rev-parse HEAD)" >> $GITHUB_ENV
+          echo "CURRENT_VERSION=$(node -p "require('./package.json').version")" >> $GITHUB_ENV
           git pull
-          git add package.json pnpm-lock.yaml changelog.md
+          echo "{ \"commit\": \"$COMMIT_HASH\" , \"version\": \"$CURRENT_VERSION\" }" > app/commit.json
+          git add package.json pnpm-lock.yaml changelog.md app/commit.json
           git commit -m "chore: release version ${{ steps.bump_version.outputs.new_version }}"
           git tag "v${{ steps.bump_version.outputs.new_version }}"
           git push

app/commit.json

@@ -1 +1 @@
-{ "commit": "6ba93974a02a98c83badf2f0002ff4812b8f75a9" }
+{ "commit": "6ba93974a02a98c83badf2f0002ff4812b8f75a9" }

app/components/chat/BaseChat.tsx

@@ -77,7 +77,6 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
       input = '',
       enhancingPrompt,
       handleInputChange,
-      promptEnhanced,
       enhancePrompt,
       sendMessage,
       handleStop,
@@ -490,10 +489,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                       <IconButton
                         title="Enhance prompt"
                         disabled={input.length === 0 || enhancingPrompt}
-                        className={classNames(
-                          'transition-all',
-                          enhancingPrompt ? 'opacity-100' : '',
-                        )}
+                        className={classNames('transition-all', enhancingPrompt ? 'opacity-100' : '')}
                         onClick={() => {
                           enhancePrompt?.();
                           toast.success('Prompt enhanced!');

app/components/settings/chat-history/ChatHistoryTab.tsx

@@ -22,7 +22,8 @@ export default function ChatHistoryTab() {
   };
 
   const handleDeleteAllChats = async () => {
-    const confirmDelete = window.confirm("Are you sure you want to delete all chats? This action cannot be undone.");
+    const confirmDelete = window.confirm('Are you sure you want to delete all chats? This action cannot be undone.');
+
     if (!confirmDelete) {
       return; // Exit if the user cancels
     }
@@ -31,11 +32,13 @@ export default function ChatHistoryTab() {
       const error = new Error('Database is not available');
       logStore.logError('Failed to delete chats - DB unavailable', error);
       toast.error('Database is not available');
+
       return;
     }
 
     try {
       setIsDeleting(true);
+
       const allChats = await getAll(db);
       await Promise.all(allChats.map((chat) => deleteById(db!, chat.id)));
       logStore.logSystem('All chats deleted successfully', { count: allChats.length });
@@ -55,6 +58,7 @@ export default function ChatHistoryTab() {
       const error = new Error('Database is not available');
       logStore.logError('Failed to export chats - DB unavailable', error);
       toast.error('Database is not available');
+
       return;
     }
 

app/components/settings/debug/DebugTab.tsx

@@ -34,14 +34,19 @@ interface IProviderConfig {
 
 interface CommitData {
   commit: string;
+  version?: string;
 }
 
+const connitJson: CommitData = commit;
+
 const LOCAL_PROVIDERS = ['Ollama', 'LMStudio', 'OpenAILike'];
-const versionHash = commit.commit;
+const versionHash = connitJson.commit;
+const versionTag = connitJson.version;
 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`,
+  commitJson: (branch: string) =>
+    `https://raw.githubusercontent.com/stackblitz-labs/bolt.diy/${branch}/app/commit.json`,
 };
 
 function getSystemInfo(): SystemInfo {
@@ -206,7 +211,7 @@ const checkProviderStatus = async (url: string | null, providerName: string): Pr
 };
 
 export default function DebugTab() {
-  const { providers, useLatestBranch } = useSettings();
+  const { providers, latestBranch } = useSettings();
   const [activeProviders, setActiveProviders] = useState<ProviderStatus[]>([]);
   const [updateMessage, setUpdateMessage] = useState<string>('');
   const [systemInfo] = useState<SystemInfo>(getSystemInfo());
@@ -227,19 +232,20 @@ export default function DebugTab() {
               provider.name.toLowerCase() === 'ollama'
                 ? 'OLLAMA_API_BASE_URL'
                 : provider.name.toLowerCase() === 'lmstudio'
-                ? 'LMSTUDIO_API_BASE_URL'
-                : `REACT_APP_${provider.name.toUpperCase()}_URL`;
+                  ? 'LMSTUDIO_API_BASE_URL'
+                  : `REACT_APP_${provider.name.toUpperCase()}_URL`;
 
             // 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);
+
             return {
               ...status,
               enabled: provider.settings.enabled ?? false,
             };
-          })
+          }),
       );
 
       setActiveProviders(statuses);
@@ -265,23 +271,24 @@ export default function DebugTab() {
       setIsCheckingUpdate(true);
       setUpdateMessage('Checking for updates...');
 
-      const branchToCheck = useLatestBranch ? 'main' : 'stable';
+      const branchToCheck = latestBranch ? 'main' : 'stable';
       console.log(`[Debug] Checking for updates against ${branchToCheck} branch`);
 
       const localCommitResponse = await fetch(GITHUB_URLS.commitJson(branchToCheck));
+
       if (!localCommitResponse.ok) {
         throw new Error('Failed to fetch local commit info');
       }
 
-      const localCommitData = await localCommitResponse.json() as CommitData;
+      const localCommitData = (await localCommitResponse.json()) as CommitData;
       const remoteCommitHash = localCommitData.commit;
       const currentCommitHash = versionHash;
 
       if (remoteCommitHash !== currentCommitHash) {
         setUpdateMessage(
           `Update available from ${branchToCheck} branch!\n` +
-          `Current: ${currentCommitHash.slice(0, 7)}\n` +
-          `Latest: ${remoteCommitHash.slice(0, 7)}`
+            `Current: ${currentCommitHash.slice(0, 7)}\n` +
+            `Latest: ${remoteCommitHash.slice(0, 7)}`,
         );
       } else {
         setUpdateMessage(`You are on the latest version from the ${branchToCheck} branch`);
@@ -292,7 +299,7 @@ export default function DebugTab() {
     } finally {
       setIsCheckingUpdate(false);
     }
-  }, [isCheckingUpdate, useLatestBranch]);
+  }, [isCheckingUpdate, latestBranch]);
 
   const handleCopyToClipboard = useCallback(() => {
     const debugInfo = {
@@ -309,15 +316,15 @@ export default function DebugTab() {
       })),
       Version: {
         hash: versionHash.slice(0, 7),
-        branch: useLatestBranch ? 'main' : 'stable'
+        branch: latestBranch ? 'main' : 'stable',
       },
       Timestamp: new Date().toISOString(),
     };
 
     navigator.clipboard.writeText(JSON.stringify(debugInfo, null, 2)).then(() => {
       toast.success('Debug information copied to clipboard!');
     });
-  }, [activeProviders, systemInfo, useLatestBranch]);
+  }, [activeProviders, systemInfo, latestBranch]);
 
   return (
     <div className="p-4 space-y-6">
@@ -403,7 +410,7 @@ export default function DebugTab() {
               <p className="text-sm font-medium text-bolt-elements-textPrimary font-mono">
                 {versionHash.slice(0, 7)}
                 <span className="ml-2 text-xs text-bolt-elements-textSecondary">
-                  ({new Date().toLocaleDateString()})
+                  (v{versionTag || '0.0.1'}) - {latestBranch ? 'nightly' : 'stable'}
                 </span>
               </p>
             </div>

app/components/settings/features/FeaturesTab.tsx

@@ -3,7 +3,8 @@ import { Switch } from '~/components/ui/Switch';
 import { useSettings } from '~/lib/hooks/useSettings';
 
 export default function FeaturesTab() {
-  const { debug, enableDebugMode, isLocalModel, enableLocalModels, eventLogs, enableEventLogs, useLatestBranch, enableLatestBranch } = useSettings();
+  const { debug, enableDebugMode, isLocalModel, enableLocalModels, enableEventLogs, latestBranch, enableLatestBranch } =
+    useSettings();
 
   const handleToggle = (enabled: boolean) => {
     enableDebugMode(enabled);
@@ -22,9 +23,11 @@ export default function FeaturesTab() {
           <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>
+              <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} />
+            <Switch className="ml-auto" checked={latestBranch} onCheckedChange={enableLatestBranch} />
           </div>
         </div>
       </div>

app/components/settings/providers/ProvidersTab.tsx

@@ -56,7 +56,8 @@ export default function ProvidersTab() {
             <div className="flex items-center gap-2">
               <img
                 src={`/icons/${provider.name}.svg`} // Attempt to load the specific icon
-                onError={(e) => { // Fallback to default icon on error
+                onError={(e) => {
+                  // Fallback to default icon on error
                   e.currentTarget.src = DefaultIcon;
                 }}
                 alt={`${provider.name} icon`}

app/lib/hooks/useSettings.tsx

@@ -5,7 +5,7 @@ import {
   isLocalModelsEnabled,
   LOCAL_PROVIDERS,
   providersStore,
-  latestBranch,
+  latestBranchStore,
 } from '~/lib/stores/settings';
 import { useCallback, useEffect, useState } from 'react';
 import Cookies from 'js-cookie';
@@ -15,25 +15,33 @@ import commit from '~/commit.json';
 
 interface CommitData {
   commit: string;
+  version?: string;
 }
 
+const commitJson: CommitData = commit;
+
 export function useSettings() {
   const providers = useStore(providersStore);
   const debug = useStore(isDebugMode);
   const eventLogs = useStore(isEventLogsEnabled);
   const isLocalModel = useStore(isLocalModelsEnabled);
-  const useLatest = useStore(latestBranch);
+  const latestBranch = useStore(latestBranchStore);
   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');
+      const stableResponse = await fetch(
+        `https://raw.githubusercontent.com/stackblitz-labs/bolt.diy/refs/tags/v${commitJson.version}/app/commit.json`,
+      );
+
       if (!stableResponse.ok) {
         console.warn('Failed to fetch stable commit info');
         return false;
       }
-      const stableData = await stableResponse.json() as CommitData;
+
+      const stableData = (await stableResponse.json()) as CommitData;
+
       return commit.commit === stableData.commit;
     } catch (error) {
       console.warn('Error checking stable version:', error);
@@ -85,16 +93,23 @@ export function useSettings() {
     }
 
     // load latest branch setting from cookies or determine based on version
-    const savedLatestBranch = Cookies.get('useLatestBranch');
-    if (savedLatestBranch === undefined) {
+    const savedLatestBranch = Cookies.get('latestBranch');
+    let checkCommit = Cookies.get('commitHash');
+
+    if (checkCommit === undefined) {
+      checkCommit = commit.commit;
+    }
+
+    if (savedLatestBranch === undefined || checkCommit !== commit.commit) {
       // If setting hasn't been set by user, check version
-      checkIsStableVersion().then(isStable => {
+      checkIsStableVersion().then((isStable) => {
         const shouldUseLatest = !isStable;
-        latestBranch.set(shouldUseLatest);
-        Cookies.set('useLatestBranch', String(shouldUseLatest));
+        latestBranchStore.set(shouldUseLatest);
+        Cookies.set('latestBranch', String(shouldUseLatest));
+        Cookies.set('commitHash', String(commit.commit));
       });
     } else {
-      latestBranch.set(savedLatestBranch === 'true');
+      latestBranchStore.set(savedLatestBranch === 'true');
     }
   }, []);
 
@@ -148,9 +163,9 @@ export function useSettings() {
   }, []);
 
   const enableLatestBranch = useCallback((enabled: boolean) => {
-    latestBranch.set(enabled);
+    latestBranchStore.set(enabled);
     logStore.logSystem(`Main branch updates ${enabled ? 'enabled' : 'disabled'}`);
-    Cookies.set('useLatestBranch', String(enabled));
+    Cookies.set('latestBranch', String(enabled));
   }, []);
 
   return {
@@ -163,7 +178,7 @@ export function useSettings() {
     enableEventLogs,
     isLocalModel,
     enableLocalModels,
-    useLatestBranch: useLatest,
+    latestBranch,
     enableLatestBranch,
   };
 }

app/lib/stores/settings.ts

@@ -47,4 +47,4 @@ export const isEventLogsEnabled = atom(false);
 
 export const isLocalModelsEnabled = atom(true);
 
-export const latestBranch = atom(false);
+export const latestBranchStore = atom(false);