fix: settings bugfix error building my application issue #1414 (#1436)

* Fix: error building my application #1414

* fix for vite

* Update vite.config.ts

* Update root.tsx

* fix the root.tsx and the debugtab

* lm studio fix and fix for the api key

* Update api.enhancer for prompt enhancement

* bugfixes

* Revert api.enhancer.ts back to original code

* Update api.enhancer.ts

* Update api.git-proxy.$.ts

* Update api.git-proxy.$.ts

* Update api.enhancer.ts

app/components/@settings/tabs/connections/ConnectionsTab.tsx

@@ -1,6 +1,19 @@
 import { motion } from 'framer-motion';
-import { GithubConnection } from './GithubConnection';
-import { NetlifyConnection } from './NetlifyConnection';
+import React, { Suspense } from 'react';
+
+// Use React.lazy for dynamic imports
+const GithubConnection = React.lazy(() => import('./GithubConnection'));
+const NetlifyConnection = React.lazy(() => import('./NetlifyConnection'));
+
+// Loading fallback component
+const LoadingFallback = () => (
+  <div className="p-4 bg-white dark:bg-[#0A0A0A] rounded-lg border border-[#E5E5E5] dark:border-[#1A1A1A]">
+    <div className="flex items-center gap-2 text-bolt-elements-textSecondary">
+      <div className="i-ph:spinner-gap w-5 h-5 animate-spin" />
+      <span>Loading connection...</span>
+    </div>
+  </div>
+);
 
 export default function ConnectionsTab() {
   return (
@@ -20,8 +33,12 @@ export default function ConnectionsTab() {
       </p>
 
       <div className="grid grid-cols-1 gap-4">
-        <GithubConnection />
-        <NetlifyConnection />
+        <Suspense fallback={<LoadingFallback />}>
+          <GithubConnection />
+        </Suspense>
+        <Suspense fallback={<LoadingFallback />}>
+          <NetlifyConnection />
+        </Suspense>
       </div>
     </div>
   );

app/components/@settings/tabs/connections/GithubConnection.tsx

@@ -66,7 +66,7 @@ interface GitHubConnection {
   stats?: GitHubStats;
 }
 
-export function GithubConnection() {
+export default function GithubConnection() {
   const [connection, setConnection] = useState<GitHubConnection>({
     user: null,
     token: '',

app/components/@settings/tabs/connections/NetlifyConnection.tsx

@@ -13,7 +13,7 @@ import {
 } from '~/lib/stores/netlify';
 import type { NetlifyUser } from '~/types/netlify';
 
-export function NetlifyConnection() {
+export default function NetlifyConnection() {
   const connection = useStore(netlifyConnection);
   const connecting = useStore(isConnecting);
   const fetchingStats = useStore(isFetchingStats);

app/lib/hooks/useShortcuts.ts

@@ -41,7 +41,7 @@ export function useShortcuts(): void {
       }
 
       // Debug logging in development only
-      if (process.env.NODE_ENV === 'development') {
+      if (import.meta.env.DEV) {
         console.log('Key pressed:', {
           key: event.key,
           code: event.code,

app/lib/modules/llm/providers/lmstudio.ts

@@ -75,7 +75,7 @@ export default class LMStudioProvider extends BaseProvider {
       throw new Error('No baseUrl found for LMStudio provider');
     }
 
-    const isDocker = process.env.RUNNING_IN_DOCKER === 'true' || serverEnv?.RUNNING_IN_DOCKER === 'true';
+    const isDocker = process?.env?.RUNNING_IN_DOCKER === 'true' || serverEnv?.RUNNING_IN_DOCKER === 'true';
 
     if (typeof window === 'undefined') {
       baseUrl = isDocker ? baseUrl.replace('localhost', 'host.docker.internal') : baseUrl;

app/lib/modules/llm/providers/ollama.ts

@@ -27,8 +27,6 @@ export interface OllamaApiResponse {
   models: OllamaModel[];
 }
 
-export const DEFAULT_NUM_CTX = process?.env?.DEFAULT_NUM_CTX ? parseInt(process.env.DEFAULT_NUM_CTX, 10) : 32768;
-
 export default class OllamaProvider extends BaseProvider {
   name = 'Ollama';
   getApiKeyLink = 'https://ollama.com/download';
@@ -41,6 +39,26 @@ export default class OllamaProvider extends BaseProvider {
 
   staticModels: ModelInfo[] = [];
 
+  private _convertEnvToRecord(env?: Env): Record<string, string> {
+    if (!env) {
+      return {};
+    }
+
+    // Convert Env to a plain object with string values
+    return Object.entries(env).reduce(
+      (acc, [key, value]) => {
+        acc[key] = String(value);
+        return acc;
+      },
+      {} as Record<string, string>,
+    );
+  }
+
+  getDefaultNumCtx(serverEnv?: Env): number {
+    const envRecord = this._convertEnvToRecord(serverEnv);
+    return envRecord.DEFAULT_NUM_CTX ? parseInt(envRecord.DEFAULT_NUM_CTX, 10) : 32768;
+  }
+
   async getDynamicModels(
     apiKeys?: Record<string, string>,
     settings?: IProviderSetting,
@@ -81,17 +99,20 @@ export default class OllamaProvider extends BaseProvider {
       maxTokenAllowed: 8000,
     }));
   }
+
   getModelInstance: (options: {
     model: string;
     serverEnv?: Env;
     apiKeys?: Record<string, string>;
     providerSettings?: Record<string, IProviderSetting>;
   }) => LanguageModelV1 = (options) => {
     const { apiKeys, providerSettings, serverEnv, model } = options;
+    const envRecord = this._convertEnvToRecord(serverEnv);
+
     let { baseUrl } = this.getProviderBaseUrlAndKey({
       apiKeys,
       providerSettings: providerSettings?.[this.name],
-      serverEnv: serverEnv as any,
+      serverEnv: envRecord,
       defaultBaseUrlKey: 'OLLAMA_API_BASE_URL',
       defaultApiTokenKey: '',
     });
@@ -101,14 +122,14 @@ export default class OllamaProvider extends BaseProvider {
       throw new Error('No baseUrl found for OLLAMA provider');
     }
 
-    const isDocker = process?.env?.RUNNING_IN_DOCKER === 'true' || serverEnv?.RUNNING_IN_DOCKER === 'true';
+    const isDocker = process?.env?.RUNNING_IN_DOCKER === 'true' || envRecord.RUNNING_IN_DOCKER === 'true';
     baseUrl = isDocker ? baseUrl.replace('localhost', 'host.docker.internal') : baseUrl;
     baseUrl = isDocker ? baseUrl.replace('127.0.0.1', 'host.docker.internal') : baseUrl;
 
     logger.debug('Ollama Base Url used: ', baseUrl);
 
     const ollamaInstance = ollama(model, {
-      numCtx: DEFAULT_NUM_CTX,
+      numCtx: this.getDefaultNumCtx(serverEnv),
     }) as LanguageModelV1 & { config: any };
 
     ollamaInstance.config.baseURL = `${baseUrl}/api`;

app/root.tsx

@@ -8,6 +8,7 @@ import { createHead } from 'remix-island';
 import { useEffect } from 'react';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
+import { ClientOnly } from 'remix-utils/client-only';
 
 import reactToastifyStyles from 'react-toastify/dist/ReactToastify.css?url';
 import globalStyles from './styles/index.scss?url';
@@ -72,11 +73,11 @@ export function Layout({ children }: { children: React.ReactNode }) {
   }, [theme]);
 
   return (
-    <DndProvider backend={HTML5Backend}>
-      {children}
+    <>
+      <ClientOnly>{() => <DndProvider backend={HTML5Backend}>{children}</DndProvider>}</ClientOnly>
       <ScrollRestoration />
       <Scripts />
-    </DndProvider>
+    </>
   );
 }
 

app/routes/api.check-env-key.ts

@@ -1,16 +1,41 @@
 import type { LoaderFunction } from '@remix-run/cloudflare';
-import { providerBaseUrlEnvKeys } from '~/utils/constants';
+import { LLMManager } from '~/lib/modules/llm/manager';
+import { getApiKeysFromCookie } from '~/lib/api/cookies';
 
 export const loader: LoaderFunction = async ({ context, request }) => {
   const url = new URL(request.url);
   const provider = url.searchParams.get('provider');
 
-  if (!provider || !providerBaseUrlEnvKeys[provider].apiTokenKey) {
+  if (!provider) {
     return Response.json({ isSet: false });
   }
 
-  const envVarName = providerBaseUrlEnvKeys[provider].apiTokenKey;
-  const isSet = !!(process.env[envVarName] || (context?.cloudflare?.env as Record<string, any>)?.[envVarName]);
+  const llmManager = LLMManager.getInstance(context?.cloudflare?.env as any);
+  const providerInstance = llmManager.getProvider(provider);
+
+  if (!providerInstance || !providerInstance.config.apiTokenKey) {
+    return Response.json({ isSet: false });
+  }
+
+  const envVarName = providerInstance.config.apiTokenKey;
+
+  // Get API keys from cookie
+  const cookieHeader = request.headers.get('Cookie');
+  const apiKeys = getApiKeysFromCookie(cookieHeader);
+
+  /*
+   * Check API key in order of precedence:
+   * 1. Client-side API keys (from cookies)
+   * 2. Server environment variables (from Cloudflare env)
+   * 3. Process environment variables (from .env.local)
+   * 4. LLMManager environment variables
+   */
+  const isSet = !!(
+    apiKeys?.[provider] ||
+    (context?.cloudflare?.env as Record<string, any>)?.[envVarName] ||
+    process.env[envVarName] ||
+    llmManager.env[envVarName]
+  );
 
   return Response.json({ isSet });
 };

app/routes/api.deploy.ts

@@ -1,5 +1,4 @@
 import { type ActionFunctionArgs, json } from '@remix-run/cloudflare';
-import crypto from 'crypto';
 import type { NetlifySiteInfo } from '~/types/netlify';
 
 interface DeployRequestBody {
@@ -8,6 +7,15 @@ interface DeployRequestBody {
   chatId: string;
 }
 
+async function sha1(message: string) {
+  const msgBuffer = new TextEncoder().encode(message);
+  const hashBuffer = await crypto.subtle.digest('SHA-1', msgBuffer);
+  const hashArray = Array.from(new Uint8Array(hashBuffer));
+  const hashHex = hashArray.map((b) => b.toString(16).padStart(2, '0')).join('');
+
+  return hashHex;
+}
+
 export async function action({ request }: ActionFunctionArgs) {
   try {
     const { siteId, files, token, chatId } = (await request.json()) as DeployRequestBody & { token: string };
@@ -104,7 +112,7 @@ export async function action({ request }: ActionFunctionArgs) {
     for (const [filePath, content] of Object.entries(files)) {
       // Ensure file path starts with a forward slash
       const normalizedPath = filePath.startsWith('/') ? filePath : '/' + filePath;
-      const hash = crypto.createHash('sha1').update(content).digest('hex');
+      const hash = await sha1(content);
       fileDigests[normalizedPath] = hash;
     }
 

app/routes/api.enhancer.ts

@@ -95,24 +95,28 @@ async function enhancerAction({ context, request }: ActionFunctionArgs) {
       },
     });
 
+    // Handle streaming errors in a non-blocking way
     (async () => {
-      for await (const part of result.fullStream) {
-        if (part.type === 'error') {
-          const error: any = part.error;
-          logger.error(error);
-
-          return;
+      try {
+        for await (const part of result.fullStream) {
+          if (part.type === 'error') {
+            const error: any = part.error;
+            logger.error('Streaming error:', error);
+            break;
+          }
         }
+      } catch (error) {
+        logger.error('Error processing stream:', error);
       }
     })();
 
+    // Return the text stream directly since it's already text data
     return new Response(result.textStream, {
       status: 200,
       headers: {
         'Content-Type': 'text/event-stream',
         Connection: 'keep-alive',
         'Cache-Control': 'no-cache',
-        'Text-Encoding': 'chunked',
       },
     });
   } catch (error: unknown) {

app/routes/api.git-proxy.$.ts

@@ -114,10 +114,14 @@ async function handleProxyRequest(request: Request, path: string | undefined) {
       redirect: 'follow',
     };
 
-    // Add body and duplex option for non-GET/HEAD requests
+    // Add body for non-GET/HEAD requests
     if (!['GET', 'HEAD'].includes(request.method)) {
       fetchOptions.body = request.body;
-      fetchOptions.duplex = 'half'; // This fixes the "duplex option is required when sending a body" error
+
+      /*
+       * Note: duplex property is removed to ensure TypeScript compatibility
+       * across different environments and versions
+       */
     }
 
     // Forward the request to the target URL

app/routes/api.health.ts

@@ -1,18 +1,8 @@
-import type { LoaderFunctionArgs } from '@remix-run/node';
+import { json, type LoaderFunctionArgs } from '@remix-run/cloudflare';
 
 export const loader = async ({ request: _request }: LoaderFunctionArgs) => {
-  // Return a simple 200 OK response with some basic health information
-  return new Response(
-    JSON.stringify({
-      status: 'healthy',
-      timestamp: new Date().toISOString(),
-      uptime: process.uptime(),
-    }),
-    {
-      status: 200,
-      headers: {
-        'Content-Type': 'application/json',
-      },
-    },
-  );
+  return json({
+    status: 'healthy',
+    timestamp: new Date().toISOString(),
+  });
 };

app/routes/api.system.app-info.ts

@@ -1,6 +1,5 @@
 import type { ActionFunctionArgs, LoaderFunction } from '@remix-run/cloudflare';
 import { json } from '@remix-run/cloudflare';
-import { execSync } from 'child_process';
 
 // These are injected by Vite at build time
 declare const __APP_VERSION: string;
@@ -11,34 +10,24 @@ declare const __PKG_DEPENDENCIES: Record<string, string>;
 declare const __PKG_DEV_DEPENDENCIES: Record<string, string>;
 declare const __PKG_PEER_DEPENDENCIES: Record<string, string>;
 declare const __PKG_OPTIONAL_DEPENDENCIES: Record<string, string>;
+declare const __COMMIT_HASH: string;
+declare const __GIT_BRANCH: string;
+declare const __GIT_COMMIT_TIME: string;
+declare const __GIT_AUTHOR: string;
+declare const __GIT_EMAIL: string;
+declare const __GIT_REMOTE_URL: string;
+declare const __GIT_REPO_NAME: string;
 
 const getGitInfo = () => {
-  try {
-    return {
-      commitHash: execSync('git rev-parse --short HEAD').toString().trim(),
-      branch: execSync('git rev-parse --abbrev-ref HEAD').toString().trim(),
-      commitTime: execSync('git log -1 --format=%cd').toString().trim(),
-      author: execSync('git log -1 --format=%an').toString().trim(),
-      email: execSync('git log -1 --format=%ae').toString().trim(),
-      remoteUrl: execSync('git config --get remote.origin.url').toString().trim(),
-      repoName: execSync('git config --get remote.origin.url')
-        .toString()
-        .trim()
-        .replace(/^.*github.com[:/]/, '')
-        .replace(/\.git$/, ''),
-    };
-  } catch (error) {
-    console.error('Failed to get git info:', error);
-    return {
-      commitHash: 'unknown',
-      branch: 'unknown',
-      commitTime: 'unknown',
-      author: 'unknown',
-      email: 'unknown',
-      remoteUrl: 'unknown',
-      repoName: 'unknown',
-    };
-  }
+  return {
+    commitHash: __COMMIT_HASH || 'unknown',
+    branch: __GIT_BRANCH || 'unknown',
+    commitTime: __GIT_COMMIT_TIME || 'unknown',
+    author: __GIT_AUTHOR || 'unknown',
+    email: __GIT_EMAIL || 'unknown',
+    remoteUrl: __GIT_REMOTE_URL || 'unknown',
+    repoName: __GIT_REPO_NAME || 'unknown',
+  };
 };
 
 const formatDependencies = (
@@ -60,11 +49,11 @@ const getAppResponse = () => {
     version: __APP_VERSION || '0.1.0',
     description: __PKG_DESCRIPTION || 'A DIY LLM interface',
     license: __PKG_LICENSE || 'MIT',
-    environment: process.env.NODE_ENV || 'development',
+    environment: 'cloudflare',
     gitInfo,
     timestamp: new Date().toISOString(),
     runtimeInfo: {
-      nodeVersion: process.version || 'unknown',
+      nodeVersion: 'cloudflare',
     },
     dependencies: {
       production: formatDependencies(__PKG_DEPENDENCIES, 'production'),