merge

2024-12-16 11:07:22 +02:00
parent 225b553876 960f532f82
commit 1b76d3c28f
28 changed files with 467 additions and 194 deletions
--- a/app/commit.json
+++ b/app/commit.json
@@ -1 +1 @@
-{ "commit": "2e05270bab264d7ee83d7a1dd5408c969f648a68" }
+{ "commit": "6ba93974a02a98c83badf2f0002ff4812b8f75a9" }
--- a/app/components/chat/BaseChat.tsx
+++ b/app/components/chat/BaseChat.tsx
@@ -27,6 +27,7 @@ import { ModelSelector } from '~/components/chat/ModelSelector';
 import { SpeechRecognitionButton } from '~/components/chat/SpeechRecognition';
 import type { IProviderSetting, ProviderInfo } from '~/types/model';
 import { ScreenshotStateManager } from './ScreenshotStateManager';
+import { toast } from 'react-toastify';

 const TEXTAREA_MIN_HEIGHT = 76;

@@ -492,22 +493,16 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                        className={classNames(
                          'transition-all',
                          enhancingPrompt ? 'opacity-100' : '',
-                          promptEnhanced ? 'text-bolt-elements-item-contentAccent' : '',
-                          promptEnhanced ? 'pr-1.5' : '',
-                          promptEnhanced ? 'enabled:hover:bg-bolt-elements-item-backgroundAccent' : '',
                        )}
-                        onClick={() => enhancePrompt?.()}
+                        onClick={() => {
+                          enhancePrompt?.();
+                          toast.success('Prompt enhanced!');
+                        }}
                      >
                        {enhancingPrompt ? (
-                          <>
-                            <div className="i-svg-spinners:90-ring-with-bg text-bolt-elements-loader-progress text-xl animate-spin"></div>
-                            <div className="ml-1.5">Enhancing prompt...</div>
-                          </>
+                          <div className="i-svg-spinners:90-ring-with-bg text-bolt-elements-loader-progress text-xl animate-spin"></div>
                        ) : (
-                          <>
-                            <div className="i-bolt:stars text-xl"></div>
-                            {promptEnhanced && <div className="ml-1.5">Prompt enhanced</div>}
-                          </>
+                          <div className="i-bolt:stars text-xl"></div>
                        )}
                      </IconButton>

--- a/app/components/settings/SettingsWindow.tsx
+++ b/app/components/settings/SettingsWindow.tsx
@@ -27,8 +27,8 @@ export const SettingsWindow = ({ open, onClose }: SettingsProps) => {
  const tabs: { id: TabType; label: string; icon: string; component?: ReactElement }[] = [
    { id: 'chat-history', label: 'Chat History', icon: 'i-ph:book', component: <ChatHistoryTab /> },
    { id: 'providers', label: 'Providers', icon: 'i-ph:key', component: <ProvidersTab /> },
-    { id: 'features', label: 'Features', icon: 'i-ph:star', component: <FeaturesTab /> },
    { id: 'connection', label: 'Connection', icon: 'i-ph:link', component: <ConnectionsTab /> },
+    { id: 'features', label: 'Features', icon: 'i-ph:star', component: <FeaturesTab /> },
    ...(debug
      ? [
          {
--- a/app/components/settings/chat-history/ChatHistoryTab.tsx
+++ b/app/components/settings/chat-history/ChatHistoryTab.tsx
@@ -22,17 +22,20 @@ 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.");
+    if (!confirmDelete) {
+      return; // Exit if the user cancels
+    }
+
    if (!db) {
      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 });
@@ -52,7 +55,6 @@ 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;
    }

--- a/app/components/settings/debug/DebugTab.tsx
+++ b/app/components/settings/debug/DebugTab.tsx
@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { useSettings } from '~/lib/hooks/useSettings';
 import commit from '~/commit.json';
+import { toast } from 'react-toastify';

 interface ProviderStatus {
  name: string;
@@ -27,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 {
@@ -199,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());
@@ -212,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);
    }
@@ -257,32 +265,26 @@ 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 localCommitData = await localCommitResponse.json() as CommitData;
+      const remoteCommitHash = localCommitData.commit;
+      const currentCommitHash = versionHash;

-      const originalCommitHash = originalData.sha;
-      const forkCommitHash = forkData.sha;
-      const isForked = versionHash === forkCommitHash && forkCommitHash !== originalCommitHash;
-
-      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');
@@ -290,7 +292,7 @@ export default function DebugTab() {
    } finally {
      setIsCheckingUpdate(false);
    }
-  }, [isCheckingUpdate]);
+  }, [isCheckingUpdate, useLatestBranch]);

  const handleCopyToClipboard = useCallback(() => {
    const debugInfo = {
@@ -305,13 +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(() => {
-      alert('Debug information copied to clipboard!');
+      toast.success('Debug information copied to clipboard!');
    });
-  }, [activeProviders, systemInfo]);
+  }, [activeProviders, systemInfo, useLatestBranch]);

  return (
    <div className="p-4 space-y-6">
--- a/app/components/settings/features/FeaturesTab.tsx
+++ b/app/components/settings/features/FeaturesTab.tsx
@@ -3,18 +3,29 @@ 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);
+    enableEventLogs(enabled);
+  };
+
  return (
    <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 Info</span>
-          <Switch className="ml-auto" checked={debug} onCheckedChange={enableDebugMode} />
-        </div>
-        <div className="flex items-center justify-between mb-2">
-          <span className="text-bolt-elements-textPrimary">Event Logs</span>
-          <Switch className="ml-auto" checked={eventLogs} onCheckedChange={enableEventLogs} />
+        <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>

@@ -24,7 +35,7 @@ export default function FeaturesTab() {
          Disclaimer: Experimental features may be unstable and are subject to change.
        </p>
        <div className="flex items-center justify-between mb-2">
-          <span className="text-bolt-elements-textPrimary">Enable Local Models</span>
+          <span className="text-bolt-elements-textPrimary">Experimental Providers</span>
          <Switch className="ml-auto" checked={isLocalModel} onCheckedChange={enableLocalModels} />
        </div>
      </div>
--- a/app/components/settings/providers/ProvidersTab.tsx
+++ b/app/components/settings/providers/ProvidersTab.tsx
@@ -5,6 +5,9 @@ import { LOCAL_PROVIDERS, URL_CONFIGURABLE_PROVIDERS } from '~/lib/stores/settin
 import type { IProviderConfig } from '~/types/model';
 import { logStore } from '~/lib/stores/logs';

+// Import a default fallback icon
+import DefaultIcon from '/icons/Default.svg'; // Adjust the path as necessary
+
 export default function ProvidersTab() {
  const { providers, updateProviderSettings, isLocalModel } = useSettings();
  const [filteredProviders, setFilteredProviders] = useState<IProviderConfig[]>([]);
@@ -51,7 +54,14 @@ export default function ProvidersTab() {
        >
          <div className="flex items-center justify-between mb-2">
            <div className="flex items-center gap-2">
-              <img src={`/icons/${provider.name}.svg`} alt={`${provider.name} icon`} className="w-6 h-6 dark:invert" />
+              <img
+                src={`/icons/${provider.name}.svg`} // Attempt to load the specific icon
+                onError={(e) => { // Fallback to default icon on error
+                  e.currentTarget.src = DefaultIcon;
+                }}
+                alt={`${provider.name} icon`}
+                className="w-6 h-6 dark:invert"
+              />
              <span className="text-bolt-elements-textPrimary">{provider.name}</span>
            </div>
            <Switch
--- a/app/components/workbench/FileTree.tsx
+++ b/app/components/workbench/FileTree.tsx
@@ -2,6 +2,7 @@ import { memo, useEffect, useMemo, useState, type ReactNode } from 'react';
 import type { FileMap } from '~/lib/stores/files';
 import { classNames } from '~/utils/classNames';
 import { createScopedLogger, renderLogger } from '~/utils/logger';
+import * as ContextMenu from '@radix-ui/react-context-menu';

 const logger = createScopedLogger('FileTree');

@@ -110,6 +111,22 @@ export const FileTree = memo(
      });
    };

+    const onCopyPath = (fileOrFolder: FileNode | FolderNode) => {
+      try {
+        navigator.clipboard.writeText(fileOrFolder.fullPath);
+      } catch (error) {
+        logger.error(error);
+      }
+    };
+
+    const onCopyRelativePath = (fileOrFolder: FileNode | FolderNode) => {
+      try {
+        navigator.clipboard.writeText(fileOrFolder.fullPath.substring((rootFolder || '').length));
+      } catch (error) {
+        logger.error(error);
+      }
+    };
+
    return (
      <div className={classNames('text-sm', className, 'overflow-y-auto')}>
        {filteredFileList.map((fileOrFolder) => {
@@ -121,6 +138,12 @@ export const FileTree = memo(
                  selected={selectedFile === fileOrFolder.fullPath}
                  file={fileOrFolder}
                  unsavedChanges={unsavedFiles?.has(fileOrFolder.fullPath)}
+                  onCopyPath={() => {
+                    onCopyPath(fileOrFolder);
+                  }}
+                  onCopyRelativePath={() => {
+                    onCopyRelativePath(fileOrFolder);
+                  }}
                  onClick={() => {
                    onFileSelect?.(fileOrFolder.fullPath);
                  }}
@@ -134,6 +157,12 @@ export const FileTree = memo(
                  folder={fileOrFolder}
                  selected={allowFolderSelection && selectedFile === fileOrFolder.fullPath}
                  collapsed={collapsedFolders.has(fileOrFolder.fullPath)}
+                  onCopyPath={() => {
+                    onCopyPath(fileOrFolder);
+                  }}
+                  onCopyRelativePath={() => {
+                    onCopyRelativePath(fileOrFolder);
+                  }}
                  onClick={() => {
                    toggleCollapseState(fileOrFolder.fullPath);
                  }}
@@ -156,26 +185,67 @@ interface FolderProps {
  folder: FolderNode;
  collapsed: boolean;
  selected?: boolean;
+  onCopyPath: () => void;
+  onCopyRelativePath: () => void;
  onClick: () => void;
 }

-function Folder({ folder: { depth, name }, collapsed, selected = false, onClick }: FolderProps) {
+interface FolderContextMenuProps {
+  onCopyPath?: () => void;
+  onCopyRelativePath?: () => void;
+  children: ReactNode;
+}
+
+function ContextMenuItem({ onSelect, children }: { onSelect?: () => void; children: ReactNode }) {
  return (
-    <NodeButton
-      className={classNames('group', {
-        'bg-transparent text-bolt-elements-item-contentDefault hover:text-bolt-elements-item-contentActive hover:bg-bolt-elements-item-backgroundActive':
-          !selected,
-        'bg-bolt-elements-item-backgroundAccent text-bolt-elements-item-contentAccent': selected,
-      })}
-      depth={depth}
-      iconClasses={classNames({
-        'i-ph:caret-right scale-98': collapsed,
-        'i-ph:caret-down scale-98': !collapsed,
-      })}
-      onClick={onClick}
+    <ContextMenu.Item
+      onSelect={onSelect}
+      className="flex items-center gap-2 px-2 py-1.5 outline-0 text-sm text-bolt-elements-textPrimary cursor-pointer ws-nowrap text-bolt-elements-item-contentDefault hover:text-bolt-elements-item-contentActive hover:bg-bolt-elements-item-backgroundActive rounded-md"
    >
-      {name}
-    </NodeButton>
+      <span className="size-4 shrink-0"></span>
+      <span>{children}</span>
+    </ContextMenu.Item>
+  );
+}
+
+function FileContextMenu({ onCopyPath, onCopyRelativePath, children }: FolderContextMenuProps) {
+  return (
+    <ContextMenu.Root>
+      <ContextMenu.Trigger>{children}</ContextMenu.Trigger>
+      <ContextMenu.Portal>
+        <ContextMenu.Content
+          style={{ zIndex: 998 }}
+          className="border border-bolt-elements-borderColor rounded-md z-context-menu bg-bolt-elements-background-depth-1 dark:bg-bolt-elements-background-depth-2 data-[state=open]:animate-in animate-duration-100 data-[state=open]:fade-in-0 data-[state=open]:zoom-in-98 w-56"
+        >
+          <ContextMenu.Group className="p-1 border-b-px border-solid border-bolt-elements-borderColor">
+            <ContextMenuItem onSelect={onCopyPath}>Copy path</ContextMenuItem>
+            <ContextMenuItem onSelect={onCopyRelativePath}>Copy relative path</ContextMenuItem>
+          </ContextMenu.Group>
+        </ContextMenu.Content>
+      </ContextMenu.Portal>
+    </ContextMenu.Root>
+  );
+}
+
+function Folder({ folder, collapsed, selected = false, onCopyPath, onCopyRelativePath, onClick }: FolderProps) {
+  return (
+    <FileContextMenu onCopyPath={onCopyPath} onCopyRelativePath={onCopyRelativePath}>
+      <NodeButton
+        className={classNames('group', {
+          'bg-transparent text-bolt-elements-item-contentDefault hover:text-bolt-elements-item-contentActive hover:bg-bolt-elements-item-backgroundActive':
+            !selected,
+          'bg-bolt-elements-item-backgroundAccent text-bolt-elements-item-contentAccent': selected,
+        })}
+        depth={folder.depth}
+        iconClasses={classNames({
+          'i-ph:caret-right scale-98': collapsed,
+          'i-ph:caret-down scale-98': !collapsed,
+        })}
+        onClick={onClick}
+      >
+        {folder.name}
+      </NodeButton>
+    </FileContextMenu>
  );
 }

@@ -183,31 +253,43 @@ interface FileProps {
  file: FileNode;
  selected: boolean;
  unsavedChanges?: boolean;
+  onCopyPath: () => void;
+  onCopyRelativePath: () => void;
  onClick: () => void;
 }

-function File({ file: { depth, name }, onClick, selected, unsavedChanges = false }: FileProps) {
+function File({
+  file: { depth, name },
+  onClick,
+  onCopyPath,
+  onCopyRelativePath,
+  selected,
+  unsavedChanges = false,
+}: FileProps) {
  return (
-    <NodeButton
-      className={classNames('group', {
-        'bg-transparent hover:bg-bolt-elements-item-backgroundActive text-bolt-elements-item-contentDefault': !selected,
-        'bg-bolt-elements-item-backgroundAccent text-bolt-elements-item-contentAccent': selected,
-      })}
-      depth={depth}
-      iconClasses={classNames('i-ph:file-duotone scale-98', {
-        'group-hover:text-bolt-elements-item-contentActive': !selected,
-      })}
-      onClick={onClick}
-    >
-      <div
-        className={classNames('flex items-center', {
+    <FileContextMenu onCopyPath={onCopyPath} onCopyRelativePath={onCopyRelativePath}>
+      <NodeButton
+        className={classNames('group', {
+          'bg-transparent hover:bg-bolt-elements-item-backgroundActive text-bolt-elements-item-contentDefault':
+            !selected,
+          'bg-bolt-elements-item-backgroundAccent text-bolt-elements-item-contentAccent': selected,
+        })}
+        depth={depth}
+        iconClasses={classNames('i-ph:file-duotone scale-98', {
          'group-hover:text-bolt-elements-item-contentActive': !selected,
        })}
+        onClick={onClick}
      >
-        <div className="flex-1 truncate pr-2">{name}</div>
-        {unsavedChanges && <span className="i-ph:circle-fill scale-68 shrink-0 text-orange-500" />}
-      </div>
-    </NodeButton>
+        <div
+          className={classNames('flex items-center', {
+            'group-hover:text-bolt-elements-item-contentActive': !selected,
+          })}
+        >
+          <div className="flex-1 truncate pr-2">{name}</div>
+          {unsavedChanges && <span className="i-ph:circle-fill scale-68 shrink-0 text-orange-500" />}
+        </div>
+      </NodeButton>
+    </FileContextMenu>
  );
 }

--- a/app/lib/.server/llm/api-key.ts
+++ b/app/lib/.server/llm/api-key.ts
@@ -39,6 +39,8 @@ export function getAPIKey(cloudflareEnv: Env, provider: string, userApiKeys?: Re
      return env.TOGETHER_API_KEY || cloudflareEnv.TOGETHER_API_KEY;
    case 'xAI':
      return env.XAI_API_KEY || cloudflareEnv.XAI_API_KEY;
+    case 'Perplexity':
+      return env.PERPLEXITY_API_KEY || cloudflareEnv.PERPLEXITY_API_KEY;
    case 'Cohere':
      return env.COHERE_API_KEY;
    case 'AzureOpenAI':
--- a/app/lib/.server/llm/model.ts
+++ b/app/lib/.server/llm/model.ts
@@ -128,6 +128,15 @@ export function getXAIModel(apiKey: OptionalApiKey, model: string) {
  return openai(model);
 }

+export function getPerplexityModel(apiKey: OptionalApiKey, model: string) {
+  const perplexity = createOpenAI({
+    baseURL: 'https://api.perplexity.ai/',
+    apiKey,
+  });
+
+  return perplexity(model);
+}
+
 export function getModel(
  provider: string,
  model: string,
@@ -170,6 +179,8 @@ export function getModel(
      return getXAIModel(apiKey, model);
    case 'Cohere':
      return getCohereAIModel(apiKey, model);
+    case 'Perplexity':
+      return getPerplexityModel(apiKey, model);
    default:
      return getOllamaModel(baseURL, model);
  }
--- 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,
  };
 }
--- 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);
--- a/app/utils/constants.ts
+++ b/app/utils/constants.ts
@@ -294,6 +294,30 @@ const PROVIDER_LIST: ProviderInfo[] = [
    ],
    getApiKeyLink: 'https://api.together.xyz/settings/api-keys',
  },
+  {
+    name: 'Perplexity',
+    staticModels: [
+      {
+        name: 'llama-3.1-sonar-small-128k-online',
+        label: 'Sonar Small Online',
+        provider: 'Perplexity',
+        maxTokenAllowed: 8192,
+      },
+      {
+        name: 'llama-3.1-sonar-large-128k-online',
+        label: 'Sonar Large Online',
+        provider: 'Perplexity',
+        maxTokenAllowed: 8192,
+      },
+      {
+        name: 'llama-3.1-sonar-huge-128k-online',
+        label: 'Sonar Huge Online',
+        provider: 'Perplexity',
+        maxTokenAllowed: 8192,
+      },
+    ],
+    getApiKeyLink: 'https://www.perplexity.ai/settings/api',
+  },
 ];

 export const DEFAULT_PROVIDER = PROVIDER_LIST[0];
@@ -476,8 +500,6 @@ async function getLMStudioModels(_apiKeys?: Record<string, string>, settings?: I
    }));
  } catch (e: any) {
    logStore.logError('Failed to get LMStudio models', e, { baseUrl: settings?.baseUrl });
-    logger.warn('Failed to get LMStudio models: ', e.message || '');
-
    return [];
  }
 }