Skip to content

Commit

Permalink
ui-ux: debug-tab
Browse files Browse the repository at this point in the history 
debug tab check for update is now branch specific.
fixed bug with getting URLs for experimental models
  • Loading branch information
@dustinwloring1988
dustinwloring1988 authored Dec 15, 2024
2 parents 4caae9c + b5c8d43 commit 4016f54
Show file tree
Hide file tree
Showing 4 changed files with 104 additions and 45 deletions.
86 changes: 45 additions & 41 deletions app/components/settings/debug/DebugTab.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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());
Expand All @@ -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);
}
Expand All @@ -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 = {
Expand All @@ -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">
Expand Down
17 changes: 13 additions & 4 deletions app/components/settings/features/FeaturesTab.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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>

Expand Down
44 changes: 44 additions & 0 deletions app/lib/hooks/useSettings.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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,
Expand All @@ -121,5 +163,7 @@ export function useSettings() {
enableEventLogs,
isLocalModel,
enableLocalModels,
useLatestBranch: useLatest,
enableLatestBranch,
};
}
2 changes: 2 additions & 0 deletions app/lib/stores/settings.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,3 +46,5 @@ export const isDebugMode = atom(false);
export const isEventLogsEnabled = atom(false);

export const isLocalModelsEnabled = atom(true);

export const latestBranch = atom(false);

0 comments on commit 4016f54

Please sign in to comment.