Merge branch 'main' into terminal-error-detection

2024-12-21 16:14:46 +05:30
parent 620d13ad8a 7295352a98
commit 975e7d83fd
53 changed files with 2556 additions and 1478 deletions
--- a/app/components/chat/BaseChat.tsx
+++ b/app/components/chat/BaseChat.tsx
@@ -125,6 +125,9 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(

    useEffect(() => {
      // Load API keys from cookies on component mount
+
+      let parsedApiKeys: Record<string, string> | undefined = {};
+
      try {
        const storedApiKeys = Cookies.get('apiKeys');

@@ -133,6 +136,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(

          if (typeof parsedKeys === 'object' && parsedKeys !== null) {
            setApiKeys(parsedKeys);
+            parsedApiKeys = parsedKeys;
          }
        }
      } catch (error) {
@@ -161,7 +165,8 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
        Cookies.remove('providers');
      }

-      initializeModelList(providerSettings).then((modelList) => {
+      initializeModelList({ apiKeys: parsedApiKeys, providerSettings }).then((modelList) => {
+        console.log('Model List: ', modelList);
        setModelList(modelList);
      });

@@ -381,7 +386,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                        modelList={modelList}
                        provider={provider}
                        setProvider={setProvider}
-                        providerList={providerList || PROVIDER_LIST}
+                        providerList={providerList || (PROVIDER_LIST as ProviderInfo[])}
                        apiKeys={apiKeys}
                      />
                      {(providerList || []).length > 0 && provider && (
--- a/app/components/chat/Chat.client.tsx
+++ b/app/components/chat/Chat.client.tsx
@@ -21,6 +21,7 @@ import { debounce } from '~/utils/debounce';
 import { useSettings } from '~/lib/hooks/useSettings';
 import type { ProviderInfo } from '~/types/model';
 import { useSearchParams } from '@remix-run/react';
+import { createSampler } from '~/utils/sampler';

 const toastAnimation = cssTransition({
  enter: 'animated fadeInRight',
@@ -77,6 +78,24 @@ export function Chat() {
  );
 }

+const processSampledMessages = createSampler(
+  (options: {
+    messages: Message[];
+    initialMessages: Message[];
+    isLoading: boolean;
+    parseMessages: (messages: Message[], isLoading: boolean) => void;
+    storeMessageHistory: (messages: Message[]) => Promise<void>;
+  }) => {
+    const { messages, initialMessages, isLoading, parseMessages, storeMessageHistory } = options;
+    parseMessages(messages, isLoading);
+
+    if (messages.length > initialMessages.length) {
+      storeMessageHistory(messages).catch((error) => toast.error(error.message));
+    }
+  },
+  50,
+);
+
 interface ChatProps {
  initialMessages: Message[];
  storeMessageHistory: (messages: Message[]) => Promise<void>;
@@ -104,7 +123,7 @@ export const ChatImpl = memo(
    });
    const [provider, setProvider] = useState(() => {
      const savedProvider = Cookies.get('selectedProvider');
-      return PROVIDER_LIST.find((p) => p.name === savedProvider) || DEFAULT_PROVIDER;
+      return (PROVIDER_LIST.find((p) => p.name === savedProvider) || DEFAULT_PROVIDER) as ProviderInfo;
    });

    const { showChat } = useStore(chatStore);
@@ -170,11 +189,13 @@ export const ChatImpl = memo(
    }, []);

    useEffect(() => {
-      parseMessages(messages, isLoading);
-
-      if (messages.length > initialMessages.length) {
-        storeMessageHistory(messages).catch((error) => toast.error(error.message));
-      }
+      processSampledMessages({
+        messages,
+        initialMessages,
+        isLoading,
+        parseMessages,
+        storeMessageHistory,
+      });
    }, [messages, isLoading, parseMessages]);

    const scrollTextArea = () => {
--- a/app/components/chat/ModelSelector.tsx
+++ b/app/components/chat/ModelSelector.tsx
@@ -1,6 +1,6 @@
 import type { ProviderInfo } from '~/types/model';
-import type { ModelInfo } from '~/utils/types';
 import { useEffect } from 'react';
+import type { ModelInfo } from '~/lib/modules/llm/types';

 interface ModelSelectorProps {
  model?: string;
--- a/app/components/settings/SettingsWindow.tsx
+++ b/app/components/settings/SettingsWindow.tsx
@@ -63,7 +63,7 @@ export const SettingsWindow = ({ open, onClose }: SettingsProps) => {
            variants={dialogBackdropVariants}
          />
        </RadixDialog.Overlay>
-        <RadixDialog.Content asChild>
+        <RadixDialog.Content aria-describedby={undefined} asChild>
          <motion.div
            className="fixed top-[50%] left-[50%] z-max h-[85vh] w-[90vw] max-w-[900px] translate-x-[-50%] translate-y-[-50%] border border-bolt-elements-borderColor rounded-lg shadow-lg focus:outline-none overflow-hidden"
            initial="closed"
--- a/app/components/settings/debug/DebugTab.tsx
+++ b/app/components/settings/debug/DebugTab.tsx
@@ -1,7 +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';
+import { providerBaseUrlEnvKeys } from '~/utils/constants';

 interface ProviderStatus {
  name: string;
@@ -43,11 +43,16 @@ interface CommitData {
  version?: string;
 }

-const connitJson: CommitData = commit;
+const connitJson: CommitData = {
+  commit: __COMMIT_HASH,
+  version: __APP_VERSION,
+};

 const LOCAL_PROVIDERS = ['Ollama', 'LMStudio', 'OpenAILike'];
+
 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',
@@ -236,7 +241,7 @@ const checkProviderStatus = async (url: string | null, providerName: string): Pr
    }

    // Try different endpoints based on provider
-    const checkUrls = [`${url}/api/health`, `${url}/v1/models`];
+    const checkUrls = [`${url}/api/health`, url.endsWith('v1') ? `${url}/models` : `${url}/v1/models`];
    console.log(`[Debug] Checking additional endpoints:`, checkUrls);

    const results = await Promise.all(
@@ -321,14 +326,16 @@ export default function DebugTab() {
          .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`;
+              providerBaseUrlEnvKeys[provider.name].baseUrlKey || `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
+            let settingsUrl = provider.settings.baseUrl;
+
+            if (settingsUrl && settingsUrl.trim().length === 0) {
+              settingsUrl = undefined;
+            }
+
+            const url = settingsUrl || import.meta.env[envVarName] || null; // Ensure baseUrl is used
            console.log(`[Debug] Using URL for ${provider.name}:`, url, `(from ${envVarName})`);

            const status = await checkProviderStatus(url, provider.name);
@@ -521,7 +528,7 @@ export default function DebugTab() {
            <div className="mt-3 pt-3 border-t border-bolt-elements-surface-hover">
              <p className="text-xs text-bolt-elements-textSecondary">Version</p>
              <p className="text-sm font-medium text-bolt-elements-textPrimary font-mono">
-                {versionHash.slice(0, 7)}
+                {connitJson.commit.slice(0, 7)}
                <span className="ml-2 text-xs text-bolt-elements-textSecondary">
                  (v{versionTag || '0.0.1'}) - {isLatestBranch ? 'nightly' : 'stable'}
                </span>
--- a/app/components/settings/providers/ProvidersTab.tsx
+++ b/app/components/settings/providers/ProvidersTab.tsx
@@ -7,6 +7,7 @@ import { logStore } from '~/lib/stores/logs';

 // Import a default fallback icon
 import DefaultIcon from '/icons/Default.svg'; // Adjust the path as necessary
+import { providerBaseUrlEnvKeys } from '~/utils/constants';

 export default function ProvidersTab() {
  const { providers, updateProviderSettings, isLocalModel } = useSettings();
@@ -33,9 +34,87 @@ export default function ProvidersTab() {

    newFilteredProviders.sort((a, b) => a.name.localeCompare(b.name));

-    setFilteredProviders(newFilteredProviders);
+    // Split providers into regular and URL-configurable
+    const regular = newFilteredProviders.filter((p) => !URL_CONFIGURABLE_PROVIDERS.includes(p.name));
+    const urlConfigurable = newFilteredProviders.filter((p) => URL_CONFIGURABLE_PROVIDERS.includes(p.name));
+
+    setFilteredProviders([...regular, ...urlConfigurable]);
  }, [providers, searchTerm, isLocalModel]);

+  const renderProviderCard = (provider: IProviderConfig) => {
+    const envBaseUrlKey = providerBaseUrlEnvKeys[provider.name].baseUrlKey;
+    const envBaseUrl = envBaseUrlKey ? import.meta.env[envBaseUrlKey] : undefined;
+    const isUrlConfigurable = URL_CONFIGURABLE_PROVIDERS.includes(provider.name);
+
+    return (
+      <div
+        key={provider.name}
+        className="flex flex-col provider-item hover:bg-bolt-elements-bg-depth-3 p-4 rounded-lg border border-bolt-elements-borderColor"
+      >
+        <div className="flex items-center justify-between mb-2">
+          <div className="flex items-center gap-2">
+            <img
+              src={`/icons/${provider.name}.svg`}
+              onError={(e) => {
+                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
+            className="ml-auto"
+            checked={provider.settings.enabled}
+            onCheckedChange={(enabled) => {
+              updateProviderSettings(provider.name, { ...provider.settings, enabled });
+
+              if (enabled) {
+                logStore.logProvider(`Provider ${provider.name} enabled`, { provider: provider.name });
+              } else {
+                logStore.logProvider(`Provider ${provider.name} disabled`, { provider: provider.name });
+              }
+            }}
+          />
+        </div>
+        {isUrlConfigurable && provider.settings.enabled && (
+          <div className="mt-2">
+            {envBaseUrl && (
+              <label className="block text-xs text-bolt-elements-textSecondary text-green-300 mb-2">
+                Set On (.env) : {envBaseUrl}
+              </label>
+            )}
+            <label className="block text-sm text-bolt-elements-textSecondary mb-2">
+              {envBaseUrl ? 'Override Base Url' : 'Base URL '}:{' '}
+            </label>
+            <input
+              type="text"
+              value={provider.settings.baseUrl || ''}
+              onChange={(e) => {
+                let newBaseUrl: string | undefined = e.target.value;
+
+                if (newBaseUrl && newBaseUrl.trim().length === 0) {
+                  newBaseUrl = undefined;
+                }
+
+                updateProviderSettings(provider.name, { ...provider.settings, baseUrl: newBaseUrl });
+                logStore.logProvider(`Base URL updated for ${provider.name}`, {
+                  provider: provider.name,
+                  baseUrl: newBaseUrl,
+                });
+              }}
+              placeholder={`Enter ${provider.name} base URL`}
+              className="w-full bg-white dark:bg-bolt-elements-background-depth-4 relative px-2 py-1.5 rounded-md focus:outline-none placeholder-bolt-elements-textTertiary text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary border border-bolt-elements-borderColor"
+            />
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  const regularProviders = filteredProviders.filter((p) => !URL_CONFIGURABLE_PROVIDERS.includes(p.name));
+  const urlConfigurableProviders = filteredProviders.filter((p) => URL_CONFIGURABLE_PROVIDERS.includes(p.name));
+
  return (
    <div className="p-4">
      <div className="flex mb-4">
@@ -47,60 +126,21 @@ export default function ProvidersTab() {
          className="w-full bg-white dark:bg-bolt-elements-background-depth-4 relative px-2 py-1.5 rounded-md focus:outline-none placeholder-bolt-elements-textTertiary text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary border border-bolt-elements-borderColor"
        />
      </div>
-      {filteredProviders.map((provider) => (
-        <div
-          key={provider.name}
-          className="flex flex-col mb-2 provider-item hover:bg-bolt-elements-bg-depth-3 p-4 rounded-lg border border-bolt-elements-borderColor "
-        >
-          <div className="flex items-center justify-between mb-2">
-            <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
-                  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
-              className="ml-auto"
-              checked={provider.settings.enabled}
-              onCheckedChange={(enabled) => {
-                updateProviderSettings(provider.name, { ...provider.settings, enabled });

-                if (enabled) {
-                  logStore.logProvider(`Provider ${provider.name} enabled`, { provider: provider.name });
-                } else {
-                  logStore.logProvider(`Provider ${provider.name} disabled`, { provider: provider.name });
-                }
-              }}
-            />
-          </div>
-          {/* Base URL input for configurable providers */}
-          {URL_CONFIGURABLE_PROVIDERS.includes(provider.name) && provider.settings.enabled && (
-            <div className="mt-2">
-              <label className="block text-sm text-bolt-elements-textSecondary mb-1">Base URL:</label>
-              <input
-                type="text"
-                value={provider.settings.baseUrl || ''}
-                onChange={(e) => {
-                  const newBaseUrl = e.target.value;
-                  updateProviderSettings(provider.name, { ...provider.settings, baseUrl: newBaseUrl });
-                  logStore.logProvider(`Base URL updated for ${provider.name}`, {
-                    provider: provider.name,
-                    baseUrl: newBaseUrl,
-                  });
-                }}
-                placeholder={`Enter ${provider.name} base URL`}
-                className="w-full bg-white dark:bg-bolt-elements-background-depth-4 relative px-2 py-1.5 rounded-md focus:outline-none placeholder-bolt-elements-textTertiary text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary border border-bolt-elements-borderColor"
-              />
-            </div>
-          )}
+      {/* Regular Providers Grid */}
+      <div className="grid grid-cols-2 gap-4 mb-8">{regularProviders.map(renderProviderCard)}</div>
+
+      {/* URL Configurable Providers Section */}
+      {urlConfigurableProviders.length > 0 && (
+        <div className="mt-8">
+          <h3 className="text-lg font-semibold mb-2 text-bolt-elements-textPrimary">Experimental Providers</h3>
+          <p className="text-sm text-bolt-elements-textSecondary mb-4">
+            These providers are experimental and allow you to run AI models locally or connect to your own
+            infrastructure. They require additional setup but offer more flexibility.
+          </p>
+          <div className="space-y-4">{urlConfigurableProviders.map(renderProviderCard)}</div>
        </div>
-      ))}
+      )}
    </div>
  );
 }