Upload 25 files

app/components/chat/APIKeyManager.tsx

@@ -1,138 +1,112 @@
-import React, { useState, useEffect } from 'react';
-import { IconButton } from '~/components/ui/IconButton';
-import { Switch } from '~/components/ui/Switch';
-import type { ProviderInfo } from '~/types/model';
-import Cookies from 'js-cookie';
-
-interface APIKeyManagerProps {
-  provider: ProviderInfo;
-  apiKey: string;
-  setApiKey: (key: string) => void;
-  getApiKeyLink?: string;
-  labelForGetApiKey?: string;
-}
-
-const apiKeyMemoizeCache: { [k: string]: Record<string, string> } = {};
-
-export function getApiKeysFromCookies() {
-  const storedApiKeys = Cookies.get('apiKeys');
-  let parsedKeys = {};
-
-  if (storedApiKeys) {
-    parsedKeys = apiKeyMemoizeCache[storedApiKeys];
-
-    if (!parsedKeys) {
-      parsedKeys = apiKeyMemoizeCache[storedApiKeys] = JSON.parse(storedApiKeys);
-    }
-  }
-
-  return parsedKeys;
-}
-
-export const APIKeyManager: React.FC<APIKeyManagerProps> = ({ 
-  provider, 
-  apiKey, 
-  setApiKey 
-}) => {
-  // Use localStorage to store and retrieve API key for the specific provider
-  const [isEditing, setIsEditing] = useState(false);
-  const [tempKey, setTempKey] = useState('');
-  const [isPromptCachingEnabled, setIsPromptCachingEnabled] = useState(() => {
-    const savedState = localStorage.getItem('PROMPT_CACHING_ENABLED');
-    return savedState !== null ? JSON.parse(savedState) : true;
-  });
-
-  // Load stored API key for this provider on component mount
-  useEffect(() => {
-    const storedKey = localStorage.getItem(`API_KEY_${provider.name}`);
-    if (storedKey) {
-      setApiKey(storedKey);
-    }
-  }, [provider.name]);
-
-  useEffect(() => {
-    // Update localStorage whenever the prompt caching state changes
-    localStorage.setItem('PROMPT_CACHING_ENABLED', JSON.stringify(isPromptCachingEnabled));
-  }, [isPromptCachingEnabled]);
-
-  const handleSave = () => {
-    if (!tempKey.trim()) {
-      // Prevent saving empty API key
-      alert(`Please enter a valid API key for ${provider.name}`);
-      return;
-    }
-
-    // Save to localStorage
-    localStorage.setItem(`API_KEY_${provider.name}`, tempKey);
-    
-    // Update the API key in parent component
-    setApiKey(tempKey);
-    
-    // Exit editing mode
-    setIsEditing(false);
-  };
-
-  return (
-    <div className="space-y-4">
-      <div className="flex items-start sm:items-center mt-2 mb-2 flex-col sm:flex-row">
-        <div>
-          <span className="text-sm text-bolt-elements-textSecondary">{provider?.name} API Key:</span>
-          {!isEditing && (
-            <div className="flex items-center">
-              <span className="flex-1 text-xs text-bolt-elements-textPrimary mr-2">
-                {apiKey ? '••••••••' : 'API Key Required'}
-              </span>
-              <IconButton onClick={() => {
-                setTempKey(apiKey || '');
-                setIsEditing(true);
-              }} title="Edit API Key">
-                <div className="i-ph:pencil-simple" />
-              </IconButton>
-            </div>
-          )}
-        </div>
-
-        {isEditing ? (
-          <div className="flex items-center gap-3 mt-2">
-            <input
-              type="password"
-              value={tempKey}
-              placeholder="Your API Key"
-              onChange={(e) => setTempKey(e.target.value)}
-              className="flex-1 px-2 py-1 text-xs lg:text-sm rounded border border-bolt-elements-borderColor bg-bolt-elements-prompt-background text-bolt-elements-textPrimary focus:outline-none focus:ring-2 focus:ring-bolt-elements-focus"
-            />
-            <IconButton onClick={handleSave} title="Save API Key">
-              <div className="i-ph:check" />
-            </IconButton>
-            <IconButton onClick={() => setIsEditing(false)} title="Cancel">
-              <div className="i-ph:x" />
-            </IconButton>
-          </div>
-        ) : (
-          <>
-            {provider?.getApiKeyLink && (
-              <IconButton className="ml-auto" onClick={() => window.open(provider?.getApiKeyLink)} title="Edit API Key">
-                <span className="mr-2 text-xs lg:text-sm">{provider?.labelForGetApiKey || 'Get API Key'}</span>
-                <div className={provider?.icon || 'i-ph:key'} />
-              </IconButton>
-            )}
-          </>
-        )}
-      </div>
-
-      {provider?.name === 'Anthropic' && (
-        <div className="border-t pt-4 pb-4 -mt-4">
-          <div className="flex items-center space-x-2">
-            <Switch checked={isPromptCachingEnabled} onCheckedChange={setIsPromptCachingEnabled} />
-            <label htmlFor="prompt-caching" className="text-sm text-bolt-elements-textSecondary">
-              Enable Prompt Caching
-            </label>
-          </div>
-          <p className="text-xs text-bolt-elements-textTertiary mt-2">
-            When enabled, allows caching of prompts for 10x cheaper responses. Recommended for Claude models.
-          </p>
-        </div>
-      )}
-    </div>
-  );
-};
+import React, { useState, useEffect } from 'react';
+import { IconButton } from '~/components/ui/IconButton';
+import { Switch } from '~/components/ui/Switch';
+import type { ProviderInfo } from '~/types/model';
+import Cookies from 'js-cookie';
+
+interface APIKeyManagerProps {
+  provider: ProviderInfo;
+  apiKey: string;
+  setApiKey: (key: string) => void;
+  getApiKeyLink?: string;
+  labelForGetApiKey?: string;
+}
+
+const apiKeyMemoizeCache: { [k: string]: Record<string, string> } = {};
+
+export function getApiKeysFromCookies() {
+  const storedApiKeys = Cookies.get('apiKeys');
+  let parsedKeys = {};
+
+  if (storedApiKeys) {
+    parsedKeys = apiKeyMemoizeCache[storedApiKeys];
+
+    if (!parsedKeys) {
+      parsedKeys = apiKeyMemoizeCache[storedApiKeys] = JSON.parse(storedApiKeys);
+    }
+  }
+
+  return parsedKeys;
+}
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export const APIKeyManager: React.FC<APIKeyManagerProps> = ({ provider, apiKey, setApiKey }) => {
+  const [isEditing, setIsEditing] = useState(false);
+  const [tempKey, setTempKey] = useState(apiKey);
+  const [isPromptCachingEnabled, setIsPromptCachingEnabled] = useState(() => {
+    // Read initial state from localStorage, defaulting to true
+    const savedState = localStorage.getItem('PROMPT_CACHING_ENABLED');
+    return savedState !== null ? JSON.parse(savedState) : true;
+  });
+
+  useEffect(() => {
+    // Update localStorage whenever the prompt caching state changes
+    localStorage.setItem('PROMPT_CACHING_ENABLED', JSON.stringify(isPromptCachingEnabled));
+  }, [isPromptCachingEnabled]);
+
+  const handleSave = () => {
+    setApiKey(tempKey);
+    setIsEditing(false);
+  };
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-start sm:items-center mt-2 mb-2 flex-col sm:flex-row">
+        <div>
+          <span className="text-sm text-bolt-elements-textSecondary">{provider?.name} API Key:</span>
+          {!isEditing && (
+            <div className="flex items-center">
+              <span className="flex-1 text-xs text-bolt-elements-textPrimary mr-2">
+                {apiKey ? '••••••••' : 'API Key Required'}
+              </span>
+              <IconButton onClick={() => setIsEditing(true)} title="Edit API Key">
+                <div className="i-ph:pencil-simple" />
+              </IconButton>
+            </div>
+          )}
+        </div>
+
+        {isEditing ? (
+          <div className="flex items-center gap-3 mt-2">
+            <input
+              type="password"
+              value={tempKey}
+              placeholder="Your API Key"
+              onChange={(e) => setTempKey(e.target.value)}
+              className="flex-1 px-2 py-1 text-xs lg:text-sm rounded border border-bolt-elements-borderColor bg-bolt-elements-prompt-background text-bolt-elements-textPrimary focus:outline-none focus:ring-2 focus:ring-bolt-elements-focus"
+            />
+            <IconButton onClick={handleSave} title="Save API Key">
+              <div className="i-ph:check" />
+            </IconButton>
+            <IconButton onClick={() => setIsEditing(false)} title="Cancel">
+              <div className="i-ph:x" />
+            </IconButton>
+          </div>
+        ) : (
+          <>
+            {provider?.getApiKeyLink && (
+              <IconButton className="ml-auto" onClick={() => window.open(provider?.getApiKeyLink)} title="Edit API Key">
+                <span className="mr-2 text-xs lg:text-sm">{provider?.labelForGetApiKey || 'Get API Key'}</span>
+                <div className={provider?.icon || 'i-ph:key'} />
+              </IconButton>
+            )}
+          </>
+        )}
+      </div>
+
+      {provider?.name === 'Anthropic' && (
+        <div className="border-t pt-4 pb-4 -mt-4">
+          <div className="flex items-center space-x-2">
+            <Switch checked={isPromptCachingEnabled} onCheckedChange={setIsPromptCachingEnabled} />
+            <label htmlFor="prompt-caching" className="text-sm text-bolt-elements-textSecondary">
+              Enable Prompt Caching
+            </label>
+          </div>
+          <p className="text-xs text-bolt-elements-textTertiary mt-2">
+            When enabled, allows caching of prompts for 10x cheaper responses. Recommended for Claude models.
+          </p>
+        </div>
+      )}
+    </div>
+  );
+};

app/components/chat/BaseChat.tsx

@@ -13,7 +13,6 @@ import { MODEL_LIST, PROVIDER_LIST, initializeModelList } from '~/utils/constant
 import { Messages } from './Messages.client';
 import { SendButton } from './SendButton.client';
 import { APIKeyManager, getApiKeysFromCookies } from './APIKeyManager';
-import { ApiKeyWarning } from './ApiKeyWarning'
 import Cookies from 'js-cookie';
 import * as Tooltip from '@radix-ui/react-tooltip';
 
@@ -78,8 +77,6 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
       isStreaming = false,
       model,
       setModel,
-      apiKeys,
-      setApiKeys,
       provider,
       setProvider,
       providerList,
@@ -104,6 +101,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
     ref,
   ) => {
     const TEXTAREA_MAX_HEIGHT = chatStarted ? 400 : 200;
+    const [apiKeys, setApiKeys] = useState<Record<string, string>>(getApiKeysFromCookies());
     const [modelList, setModelList] = useState(MODEL_LIST);
     const [isModelSettingsCollapsed, setIsModelSettingsCollapsed] = useState(false);
     const [isListening, setIsListening] = useState(false);
@@ -314,18 +312,12 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
       }
     };
 
-    const isApiKeyAvailable = apiKeys && apiKeys[provider?.name];
-
     const baseChat = (
       <div
         ref={ref}
         className={classNames(styles.BaseChat, 'relative flex h-full w-full overflow-hidden')}
         data-chat-visible={showChat}
       >
-        <ApiKeyWarning 
-          provider={provider} 
-          apiKeys={apiKeys} 
-        />
         <ClientOnly>{() => <Menu />}</ClientOnly>
         <div ref={scrollRef} className="flex flex-col lg:flex-row overflow-y-auto w-full h-full">
           <div className={classNames(styles.Chat, 'flex flex-col flex-grow lg:min-w-[var(--chat-min-width)] h-full')}>
@@ -536,7 +528,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                         <SendButton
                           show={input.length > 0 || isStreaming || uploadedFiles.length > 0}
                           isStreaming={isStreaming}
-                          disabled={!isApiKeyAvailable || !providerList || providerList.length === 0}
+                          disabled={!providerList || providerList.length === 0}
                           onClick={(event) => {
                             if (isStreaming) {
                               handleStop?.();

app/components/chat/Chat.client.tsx

@@ -1,558 +1,556 @@
-/*
- * @ts-nocheck
- * Preventing TS checks with files presented in the video for a better presentation.
- */
-import { useStore } from '@nanostores/react';
-import type { Message } from 'ai';
-import { useChat } from 'ai/react';
-import { useAnimate } from 'framer-motion';
-import { memo, useCallback, useEffect, useRef, useState } from 'react';
-import { cssTransition, toast, ToastContainer } from 'react-toastify';
-import { useMessageParser, usePromptEnhancer, useShortcuts, useSnapScroll } from '~/lib/hooks';
-import { description, useChatHistory } from '~/lib/persistence';
-import { chatStore } from '~/lib/stores/chat';
-import { workbenchStore } from '~/lib/stores/workbench';
-import { DEFAULT_MODEL, DEFAULT_PROVIDER, PROMPT_COOKIE_KEY, PROVIDER_LIST } from '~/utils/constants';
-import { cubicEasingFn } from '~/utils/easings';
-import { createScopedLogger, renderLogger } from '~/utils/logger';
-import { BaseChat } from './BaseChat';
-import Cookies from 'js-cookie';
-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';
-import { getTemplates, selectStarterTemplate } from '~/utils/selectStarterTemplate';
-
-const toastAnimation = cssTransition({
-  enter: 'animated fadeInRight',
-  exit: 'animated fadeOutRight',
-});
-
-const logger = createScopedLogger('Chat');
-
-export function Chat() {
-  renderLogger.trace('Chat');
-
-  const { ready, initialMessages, storeMessageHistory, importChat, exportChat } = useChatHistory();
-  const title = useStore(description);
-  useEffect(() => {
-    workbenchStore.setReloadedMessages(initialMessages.map((m) => m.id));
-  }, [initialMessages]);
-
-  return (
-    <>
-      {ready && (
-        <ChatImpl
-          description={title}
-          initialMessages={initialMessages}
-          exportChat={exportChat}
-          storeMessageHistory={storeMessageHistory}
-          importChat={importChat}
-        />
-      )}
-      <ToastContainer
-        closeButton={({ closeToast }) => {
-          return (
-            <button className="Toastify__close-button" onClick={closeToast}>
-              <div className="i-ph:x text-lg" />
-            </button>
-          );
-        }}
-        icon={({ type }) => {
-          /**
-           * @todo Handle more types if we need them. This may require extra color palettes.
-           */
-          switch (type) {
-            case 'success': {
-              return <div className="i-ph:check-bold text-bolt-elements-icon-success text-2xl" />;
-            }
-            case 'error': {
-              return <div className="i-ph:warning-circle-bold text-bolt-elements-icon-error text-2xl" />;
-            }
-          }
-
-          return undefined;
-        }}
-        position="bottom-right"
-        pauseOnFocusLoss
-        transition={toastAnimation}
-      />
-    </>
-  );
-}
-
-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>;
-  importChat: (description: string, messages: Message[]) => Promise<void>;
-  exportChat: () => void;
-  description?: string;
-}
-
-export const ChatImpl = memo(
-  ({ description, initialMessages, storeMessageHistory, importChat, exportChat }: ChatProps) => {
-
-    useShortcuts();
-    const textareaRef = useRef<HTMLTextAreaElement>(null);
-    const [chatStarted, setChatStarted] = useState(initialMessages.length > 0);
-    const [uploadedFiles, setUploadedFiles] = useState<File[]>([]); // Move here
-    const [imageDataList, setImageDataList] = useState<string[]>([]); // Move here
-    const [searchParams, setSearchParams] = useSearchParams();
-    const [fakeLoading, setFakeLoading] = useState(false);
-    const files = useStore(workbenchStore.files);
-    const actionAlert = useStore(workbenchStore.alert);
-    const { activeProviders, promptId, autoSelectTemplate, contextOptimizationEnabled } = useSettings();
-
-    function isPromptCachingEnabled(): boolean {
-      // Server-side default
-      if (typeof window === 'undefined') {
-        console.log('Server-side: isPromptCachingEnabled: window undefined');
-        return false;
-      }
-
-      try {
-        // Read from localStorage in browser
-        const savedState = localStorage.getItem('PROMPT_CACHING_ENABLED');
-        console.log('Saved prompt caching state:', savedState);
-
-        return savedState !== null ? JSON.parse(savedState) : false;
-      } catch (error) {
-        console.error('Error reading prompt caching setting:', error);
-        return false; // Default to true if reading fails
-      }
-    }
-
-    const [model, setModel] = useState(() => {
-      const savedModel = Cookies.get('selectedModel');
-      return savedModel || DEFAULT_MODEL;
-    });
-    const [provider, setProvider] = useState(() => {
-      const savedProvider = Cookies.get('selectedProvider');
-      return (PROVIDER_LIST.find((p) => p.name === savedProvider) || DEFAULT_PROVIDER) as ProviderInfo;
-    });
-
-    const { showChat } = useStore(chatStore);
-
-    const [animationScope, animate] = useAnimate();
-
-    const [apiKeys, setApiKeys] = useState<Record<string, string>>({});
-
-    const { messages, isLoading, input, handleInputChange, setInput, stop, append, setMessages, reload } = useChat({
-      api: '/api/chat',
-      body: {
-        apiKeys,
-        files,
-        promptId,
-        contextOptimization: contextOptimizationEnabled,
-        isPromptCachingEnabled: provider.name === 'Anthropic' && isPromptCachingEnabled(),
-      },
-      sendExtraMessageFields: true,
-      onError: (error) => {
-        logger.error('Request failed\n\n', error);
-        toast.error(
-          'There was an error processing your request: ' + (error.message ? error.message : 'No details were returned'),
-        );
-      },
-      onFinish: (message, response) => {
-        const usage = response.usage;
-
-        if (usage) {
-          console.log('Token usage:', usage);
-
-          // You can now use the usage data as needed
-        }
-
-        logger.debug('Finished streaming');
-      },
-      initialMessages,
-      initialInput: Cookies.get(PROMPT_COOKIE_KEY) || '',
-    });
-    useEffect(() => {
-      const prompt = searchParams.get('prompt');
-
-      // console.log(prompt, searchParams, model, provider);
-
-      if (prompt) {
-        setSearchParams({});
-        runAnimation();
-        append({
-          role: 'user',
-          content: [
-            {
-              type: 'text',
-              text: `[Model: ${model}]\n\n[Provider: ${provider.name}]\n\n${prompt}`,
-            },
-          ] as any, // Type assertion to bypass compiler check
-        });
-      }
-    }, [model, provider, searchParams]);
-
-    const { enhancingPrompt, promptEnhanced, enhancePrompt, resetEnhancer } = usePromptEnhancer();
-    const { parsedMessages, parseMessages } = useMessageParser();
-
-    const TEXTAREA_MAX_HEIGHT = chatStarted ? 400 : 200;
-
-    useEffect(() => {
-      chatStore.setKey('started', initialMessages.length > 0);
-    }, []);
-
-    useEffect(() => {
-      processSampledMessages({
-        messages,
-        initialMessages,
-        isLoading,
-        parseMessages,
-        storeMessageHistory,
-      });
-    }, [messages, isLoading, parseMessages]);
-
-    const scrollTextArea = () => {
-      const textarea = textareaRef.current;
-
-      if (textarea) {
-        textarea.scrollTop = textarea.scrollHeight;
-      }
-    };
-
-    const abort = () => {
-      stop();
-      chatStore.setKey('aborted', true);
-      workbenchStore.abortAllActions();
-    };
-
-    useEffect(() => {
-      const textarea = textareaRef.current;
-
-      if (textarea) {
-        textarea.style.height = 'auto';
-
-        const scrollHeight = textarea.scrollHeight;
-
-        textarea.style.height = `${Math.min(scrollHeight, TEXTAREA_MAX_HEIGHT)}px`;
-        textarea.style.overflowY = scrollHeight > TEXTAREA_MAX_HEIGHT ? 'auto' : 'hidden';
-      }
-    }, [input, textareaRef]);
-
-    const runAnimation = async () => {
-      if (chatStarted) {
-        return;
-      }
-
-      await Promise.all([
-        animate('#examples', { opacity: 0, display: 'none' }, { duration: 0.1 }),
-        animate('#intro', { opacity: 0, flex: 1 }, { duration: 0.2, ease: cubicEasingFn }),
-      ]);
-
-      chatStore.setKey('started', true);
-
-      setChatStarted(true);
-    };
-
-    const sendMessage = async (_event: React.UIEvent, messageInput?: string) => {
-      const _input = messageInput || input;
-
-      if (_input.length === 0 || isLoading) {
-        return;
-      }
-
-      /**
-       * @note (delm) Usually saving files shouldn't take long but it may take longer if there
-       * many unsaved files. In that case we need to block user input and show an indicator
-       * of some kind so the user is aware that something is happening. But I consider the
-       * happy case to be no unsaved files and I would expect users to save their changes
-       * before they send another message.
-       */
-      await workbenchStore.saveAllFiles();
-
-      const fileModifications = workbenchStore.getFileModifcations();
-
-      chatStore.setKey('aborted', false);
-
-      runAnimation();
-
-      if (!chatStarted && messageInput && autoSelectTemplate) {
-        setFakeLoading(true);
-        setMessages([
-          {
-            id: `${new Date().getTime()}`,
-            role: 'user',
-            content: [
-              {
-                type: 'text',
-                text: `[Model: ${model}]\n\n[Provider: ${provider.name}]\n\n${_input}`,
-              },
-              ...imageDataList.map((imageData) => ({
-                type: 'image',
-                image: imageData,
-              })),
-            ] as any, // Type assertion to bypass compiler check
-          },
-        ]);
-
-        // reload();
-
-        const { template, title } = await selectStarterTemplate({
-          message: messageInput,
-          model,
-          provider,
-        });
-
-        if (template !== 'blank') {
-          const temResp = await getTemplates(template, title).catch((e) => {
-            if (e.message.includes('rate limit')) {
-              toast.warning('Rate limit exceeded. Skipping starter template\n Continuing with blank template');
-            } else {
-              toast.warning('Failed to import starter template\n Continuing with blank template');
-            }
-
-            return null;
-          });
-
-          if (temResp) {
-            const { assistantMessage, userMessage } = temResp;
-
-            setMessages([
-              {
-                id: `${new Date().getTime()}`,
-                role: 'user',
-                content: messageInput,
-
-                // annotations: ['hidden'],
-              },
-              {
-                id: `${new Date().getTime()}`,
-                role: 'assistant',
-                content: assistantMessage,
-              },
-              {
-                id: `${new Date().getTime()}`,
-                role: 'user',
-                content: `[Model: ${model}]\n\n[Provider: ${provider.name}]\n\n${userMessage}`,
-                annotations: ['hidden'],
-              },
-            ]);
-
-            reload();
-            setFakeLoading(false);
-
-            return;
-          } else {
-            setMessages([
-              {
-                id: `${new Date().getTime()}`,
-                role: 'user',
-                content: [
-                  {
-                    type: 'text',
-                    text: `[Model: ${model}]\n\n[Provider: ${provider.name}]\n\n${_input}`,
-                  },
-                  ...imageDataList.map((imageData) => ({
-                    type: 'image',
-                    image: imageData,
-                  })),
-                ] as any, // Type assertion to bypass compiler check
-              },
-            ]);
-            reload();
-            setFakeLoading(false);
-
-            return;
-          }
-        } else {
-          setMessages([
-            {
-              id: `${new Date().getTime()}`,
-              role: 'user',
-              content: [
-                {
-                  type: 'text',
-                  text: `[Model: ${model}]\n\n[Provider: ${provider.name}]\n\n${_input}`,
-                },
-                ...imageDataList.map((imageData) => ({
-                  type: 'image',
-                  image: imageData,
-                })),
-              ] as any, // Type assertion to bypass compiler check
-            },
-          ]);
-          reload();
-          setFakeLoading(false);
-
-          return;
-        }
-      }
-
-      if (fileModifications !== undefined) {
-        /**
-         * If we have file modifications we append a new user message manually since we have to prefix
-         * the user input with the file modifications and we don't want the new user input to appear
-         * in the prompt. Using `append` is almost the same as `handleSubmit` except that we have to
-         * manually reset the input and we'd have to manually pass in file attachments. However, those
-         * aren't relevant here.
-         */
-        append({
-          role: 'user',
-          content: [
-            {
-              type: 'text',
-              text: `[Model: ${model}]\n\n[Provider: ${provider.name}]\n\n${_input}`,
-            },
-            ...imageDataList.map((imageData) => ({
-              type: 'image',
-              image: imageData,
-            })),
-          ] as any, // Type assertion to bypass compiler check
-        });
-
-        /**
-         * After sending a new message we reset all modifications since the model
-         * should now be aware of all the changes.
-         */
-        workbenchStore.resetAllFileModifications();
-      } else {
-        append({
-          role: 'user',
-          content: [
-            {
-              type: 'text',
-              text: `[Model: ${model}]\n\n[Provider: ${provider.name}]\n\n${_input}`,
-            },
-            ...imageDataList.map((imageData) => ({
-              type: 'image',
-              image: imageData,
-            })),
-          ] as any, // Type assertion to bypass compiler check
-        });
-      }
-
-      setInput('');
-      Cookies.remove(PROMPT_COOKIE_KEY);
-
-      // Add file cleanup here
-      setUploadedFiles([]);
-      setImageDataList([]);
-
-      resetEnhancer();
-
-      textareaRef.current?.blur();
-    };
-
-    /**
-     * Handles the change event for the textarea and updates the input state.
-     * @param event - The change event from the textarea.
-     */
-    const onTextareaChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
-      handleInputChange(event);
-    };
-
-    /**
-     * Debounced function to cache the prompt in cookies.
-     * Caches the trimmed value of the textarea input after a delay to optimize performance.
-     */
-    const debouncedCachePrompt = useCallback(
-      debounce((event: React.ChangeEvent<HTMLTextAreaElement>) => {
-        const trimmedValue = event.target.value.trim();
-        Cookies.set(PROMPT_COOKIE_KEY, trimmedValue, { expires: 30 });
-      }, 1000),
-      [],
-    );
-
-    const [messageRef, scrollRef] = useSnapScroll();
-
-    useEffect(() => {
-      const storedApiKeys = Cookies.get('apiKeys');
-
-      if (storedApiKeys) {
-        setApiKeys(JSON.parse(storedApiKeys));
-      }
-    }, []);
-
-    const handleModelChange = (newModel: string) => {
-      setModel(newModel);
-      Cookies.set('selectedModel', newModel, { expires: 30 });
-    };
-
-    const handleProviderChange = (newProvider: ProviderInfo) => {
-      setProvider(newProvider);
-      Cookies.set('selectedProvider', newProvider.name, { expires: 30 });
-    };
-
-    return (
-      <BaseChat
-        ref={animationScope}
-        textareaRef={textareaRef}
-        input={input}
-        showChat={showChat}
-        chatStarted={chatStarted}
-        isStreaming={isLoading || fakeLoading}
-        enhancingPrompt={enhancingPrompt}
-        promptEnhanced={promptEnhanced}
-        sendMessage={sendMessage}
-        model={model}
-        setModel={handleModelChange}
-        provider={provider}
-        setProvider={handleProviderChange}
-        apiKeys={apiKeys}
-        setApiKeys={setApiKeys}
-        providerList={activeProviders}
-        messageRef={messageRef}
-        scrollRef={scrollRef}
-        handleInputChange={(e) => {
-          onTextareaChange(e);
-          debouncedCachePrompt(e);
-        }}
-        handleStop={abort}
-        description={description}
-        importChat={importChat}
-        exportChat={exportChat}
-        messages={messages.map((message, i) => {
-          if (message.role === 'user') {
-            return message;
-          }
-
-          return {
-            ...message,
-            content: parsedMessages[i] || '',
-          };
-        })}
-        enhancePrompt={() => {
-          enhancePrompt(
-            input,
-            (input) => {
-              setInput(input);
-              scrollTextArea();
-            },
-            model,
-            provider,
-            apiKeys,
-          );
-        }}
-        uploadedFiles={uploadedFiles}
-        setUploadedFiles={setUploadedFiles}
-        imageDataList={imageDataList}
-        setImageDataList={setImageDataList}
-        actionAlert={actionAlert}
-        clearAlert={() => workbenchStore.clearAlert()}
-      />
-    );
-  },
-);
+/*
+ * @ts-nocheck
+ * Preventing TS checks with files presented in the video for a better presentation.
+ */
+import { useStore } from '@nanostores/react';
+import type { Message } from 'ai';
+import { useChat } from 'ai/react';
+import { useAnimate } from 'framer-motion';
+import { memo, useCallback, useEffect, useRef, useState } from 'react';
+import { cssTransition, toast, ToastContainer } from 'react-toastify';
+import { useMessageParser, usePromptEnhancer, useShortcuts, useSnapScroll } from '~/lib/hooks';
+import { description, useChatHistory } from '~/lib/persistence';
+import { chatStore } from '~/lib/stores/chat';
+import { workbenchStore } from '~/lib/stores/workbench';
+import { DEFAULT_MODEL, DEFAULT_PROVIDER, PROMPT_COOKIE_KEY, PROVIDER_LIST } from '~/utils/constants';
+import { cubicEasingFn } from '~/utils/easings';
+import { createScopedLogger, renderLogger } from '~/utils/logger';
+import { BaseChat } from './BaseChat';
+import Cookies from 'js-cookie';
+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';
+import { getTemplates, selectStarterTemplate } from '~/utils/selectStarterTemplate';
+
+const toastAnimation = cssTransition({
+  enter: 'animated fadeInRight',
+  exit: 'animated fadeOutRight',
+});
+
+const logger = createScopedLogger('Chat');
+
+export function Chat() {
+  renderLogger.trace('Chat');
+
+  const { ready, initialMessages, storeMessageHistory, importChat, exportChat } = useChatHistory();
+  const title = useStore(description);
+  useEffect(() => {
+    workbenchStore.setReloadedMessages(initialMessages.map((m) => m.id));
+  }, [initialMessages]);
+
+  return (
+    <>
+      {ready && (
+        <ChatImpl
+          description={title}
+          initialMessages={initialMessages}
+          exportChat={exportChat}
+          storeMessageHistory={storeMessageHistory}
+          importChat={importChat}
+        />
+      )}
+      <ToastContainer
+        closeButton={({ closeToast }) => {
+          return (
+            <button className="Toastify__close-button" onClick={closeToast}>
+              <div className="i-ph:x text-lg" />
+            </button>
+          );
+        }}
+        icon={({ type }) => {
+          /**
+           * @todo Handle more types if we need them. This may require extra color palettes.
+           */
+          switch (type) {
+            case 'success': {
+              return <div className="i-ph:check-bold text-bolt-elements-icon-success text-2xl" />;
+            }
+            case 'error': {
+              return <div className="i-ph:warning-circle-bold text-bolt-elements-icon-error text-2xl" />;
+            }
+          }
+
+          return undefined;
+        }}
+        position="bottom-right"
+        pauseOnFocusLoss
+        transition={toastAnimation}
+      />
+    </>
+  );
+}
+
+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>;
+  importChat: (description: string, messages: Message[]) => Promise<void>;
+  exportChat: () => void;
+  description?: string;
+}
+
+export const ChatImpl = memo(
+  ({ description, initialMessages, storeMessageHistory, importChat, exportChat }: ChatProps) => {
+    useShortcuts();
+
+    const textareaRef = useRef<HTMLTextAreaElement>(null);
+    const [chatStarted, setChatStarted] = useState(initialMessages.length > 0);
+    const [uploadedFiles, setUploadedFiles] = useState<File[]>([]); // Move here
+    const [imageDataList, setImageDataList] = useState<string[]>([]); // Move here
+    const [searchParams, setSearchParams] = useSearchParams();
+    const [fakeLoading, setFakeLoading] = useState(false);
+    const files = useStore(workbenchStore.files);
+    const actionAlert = useStore(workbenchStore.alert);
+    const { activeProviders, promptId, autoSelectTemplate, contextOptimizationEnabled } = useSettings();
+
+    function isPromptCachingEnabled(): boolean {
+      // Server-side default
+      if (typeof window === 'undefined') {
+        console.log('Server-side: isPromptCachingEnabled: window undefined');
+        return false;
+      }
+
+      try {
+        // Read from localStorage in browser
+        const savedState = localStorage.getItem('PROMPT_CACHING_ENABLED');
+        console.log('Saved prompt caching state:', savedState);
+
+        return savedState !== null ? JSON.parse(savedState) : false;
+      } catch (error) {
+        console.error('Error reading prompt caching setting:', error);
+        return false; // Default to true if reading fails
+      }
+    }
+
+    const [model, setModel] = useState(() => {
+      const savedModel = Cookies.get('selectedModel');
+      return savedModel || DEFAULT_MODEL;
+    });
+    const [provider, setProvider] = useState(() => {
+      const savedProvider = Cookies.get('selectedProvider');
+      return (PROVIDER_LIST.find((p) => p.name === savedProvider) || DEFAULT_PROVIDER) as ProviderInfo;
+    });
+
+    const { showChat } = useStore(chatStore);
+
+    const [animationScope, animate] = useAnimate();
+
+    const [apiKeys, setApiKeys] = useState<Record<string, string>>({});
+
+    const { messages, isLoading, input, handleInputChange, setInput, stop, append, setMessages, reload } = useChat({
+      api: '/api/chat',
+      body: {
+        apiKeys,
+        files,
+        promptId,
+        contextOptimization: contextOptimizationEnabled,
+        isPromptCachingEnabled: provider.name === 'Anthropic' && isPromptCachingEnabled(),
+      },
+      sendExtraMessageFields: true,
+      onError: (error) => {
+        logger.error('Request failed\n\n', error);
+        toast.error(
+          'There was an error processing your request: ' + (error.message ? error.message : 'No details were returned'),
+        );
+      },
+      onFinish: (message, response) => {
+        const usage = response.usage;
+
+        if (usage) {
+          console.log('Token usage:', usage);
+
+          // You can now use the usage data as needed
+        }
+
+        logger.debug('Finished streaming');
+      },
+      initialMessages,
+      initialInput: Cookies.get(PROMPT_COOKIE_KEY) || '',
+    });
+    useEffect(() => {
+      const prompt = searchParams.get('prompt');
+
+      // console.log(prompt, searchParams, model, provider);
+
+      if (prompt) {
+        setSearchParams({});
+        runAnimation();
+        append({
+          role: 'user',
+          content: [
+            {
+              type: 'text',
+              text: `[Model: ${model}]\n\n[Provider: ${provider.name}]\n\n${prompt}`,
+            },
+          ] as any, // Type assertion to bypass compiler check
+        });
+      }
+    }, [model, provider, searchParams]);
+
+    const { enhancingPrompt, promptEnhanced, enhancePrompt, resetEnhancer } = usePromptEnhancer();
+    const { parsedMessages, parseMessages } = useMessageParser();
+
+    const TEXTAREA_MAX_HEIGHT = chatStarted ? 400 : 200;
+
+    useEffect(() => {
+      chatStore.setKey('started', initialMessages.length > 0);
+    }, []);
+
+    useEffect(() => {
+      processSampledMessages({
+        messages,
+        initialMessages,
+        isLoading,
+        parseMessages,
+        storeMessageHistory,
+      });
+    }, [messages, isLoading, parseMessages]);
+
+    const scrollTextArea = () => {
+      const textarea = textareaRef.current;
+
+      if (textarea) {
+        textarea.scrollTop = textarea.scrollHeight;
+      }
+    };
+
+    const abort = () => {
+      stop();
+      chatStore.setKey('aborted', true);
+      workbenchStore.abortAllActions();
+    };
+
+    useEffect(() => {
+      const textarea = textareaRef.current;
+
+      if (textarea) {
+        textarea.style.height = 'auto';
+
+        const scrollHeight = textarea.scrollHeight;
+
+        textarea.style.height = `${Math.min(scrollHeight, TEXTAREA_MAX_HEIGHT)}px`;
+        textarea.style.overflowY = scrollHeight > TEXTAREA_MAX_HEIGHT ? 'auto' : 'hidden';
+      }
+    }, [input, textareaRef]);
+
+    const runAnimation = async () => {
+      if (chatStarted) {
+        return;
+      }
+
+      await Promise.all([
+        animate('#examples', { opacity: 0, display: 'none' }, { duration: 0.1 }),
+        animate('#intro', { opacity: 0, flex: 1 }, { duration: 0.2, ease: cubicEasingFn }),
+      ]);
+
+      chatStore.setKey('started', true);
+
+      setChatStarted(true);
+    };
+
+    const sendMessage = async (_event: React.UIEvent, messageInput?: string) => {
+      const _input = messageInput || input;
+
+      if (_input.length === 0 || isLoading) {
+        return;
+      }
+
+      /**
+       * @note (delm) Usually saving files shouldn't take long but it may take longer if there
+       * many unsaved files. In that case we need to block user input and show an indicator
+       * of some kind so the user is aware that something is happening. But I consider the
+       * happy case to be no unsaved files and I would expect users to save their changes
+       * before they send another message.
+       */
+      await workbenchStore.saveAllFiles();
+
+      const fileModifications = workbenchStore.getFileModifcations();
+
+      chatStore.setKey('aborted', false);
+
+      runAnimation();
+
+      if (!chatStarted && messageInput && autoSelectTemplate) {
+        setFakeLoading(true);
+        setMessages([
+          {
+            id: `${new Date().getTime()}`,
+            role: 'user',
+            content: [
+              {
+                type: 'text',
+                text: `[Model: ${model}]\n\n[Provider: ${provider.name}]\n\n${_input}`,
+              },
+              ...imageDataList.map((imageData) => ({
+                type: 'image',
+                image: imageData,
+              })),
+            ] as any, // Type assertion to bypass compiler check
+          },
+        ]);
+
+        // reload();
+
+        const { template, title } = await selectStarterTemplate({
+          message: messageInput,
+          model,
+          provider,
+        });
+
+        if (template !== 'blank') {
+          const temResp = await getTemplates(template, title).catch((e) => {
+            if (e.message.includes('rate limit')) {
+              toast.warning('Rate limit exceeded. Skipping starter template\n Continuing with blank template');
+            } else {
+              toast.warning('Failed to import starter template\n Continuing with blank template');
+            }
+
+            return null;
+          });
+
+          if (temResp) {
+            const { assistantMessage, userMessage } = temResp;
+
+            setMessages([
+              {
+                id: `${new Date().getTime()}`,
+                role: 'user',
+                content: messageInput,
+
+                // annotations: ['hidden'],
+              },
+              {
+                id: `${new Date().getTime()}`,
+                role: 'assistant',
+                content: assistantMessage,
+              },
+              {
+                id: `${new Date().getTime()}`,
+                role: 'user',
+                content: `[Model: ${model}]\n\n[Provider: ${provider.name}]\n\n${userMessage}`,
+                annotations: ['hidden'],
+              },
+            ]);
+
+            reload();
+            setFakeLoading(false);
+
+            return;
+          } else {
+            setMessages([
+              {
+                id: `${new Date().getTime()}`,
+                role: 'user',
+                content: [
+                  {
+                    type: 'text',
+                    text: `[Model: ${model}]\n\n[Provider: ${provider.name}]\n\n${_input}`,
+                  },
+                  ...imageDataList.map((imageData) => ({
+                    type: 'image',
+                    image: imageData,
+                  })),
+                ] as any, // Type assertion to bypass compiler check
+              },
+            ]);
+            reload();
+            setFakeLoading(false);
+
+            return;
+          }
+        } else {
+          setMessages([
+            {
+              id: `${new Date().getTime()}`,
+              role: 'user',
+              content: [
+                {
+                  type: 'text',
+                  text: `[Model: ${model}]\n\n[Provider: ${provider.name}]\n\n${_input}`,
+                },
+                ...imageDataList.map((imageData) => ({
+                  type: 'image',
+                  image: imageData,
+                })),
+              ] as any, // Type assertion to bypass compiler check
+            },
+          ]);
+          reload();
+          setFakeLoading(false);
+
+          return;
+        }
+      }
+
+      if (fileModifications !== undefined) {
+        /**
+         * If we have file modifications we append a new user message manually since we have to prefix
+         * the user input with the file modifications and we don't want the new user input to appear
+         * in the prompt. Using `append` is almost the same as `handleSubmit` except that we have to
+         * manually reset the input and we'd have to manually pass in file attachments. However, those
+         * aren't relevant here.
+         */
+        append({
+          role: 'user',
+          content: [
+            {
+              type: 'text',
+              text: `[Model: ${model}]\n\n[Provider: ${provider.name}]\n\n${_input}`,
+            },
+            ...imageDataList.map((imageData) => ({
+              type: 'image',
+              image: imageData,
+            })),
+          ] as any, // Type assertion to bypass compiler check
+        });
+
+        /**
+         * After sending a new message we reset all modifications since the model
+         * should now be aware of all the changes.
+         */
+        workbenchStore.resetAllFileModifications();
+      } else {
+        append({
+          role: 'user',
+          content: [
+            {
+              type: 'text',
+              text: `[Model: ${model}]\n\n[Provider: ${provider.name}]\n\n${_input}`,
+            },
+            ...imageDataList.map((imageData) => ({
+              type: 'image',
+              image: imageData,
+            })),
+          ] as any, // Type assertion to bypass compiler check
+        });
+      }
+
+      setInput('');
+      Cookies.remove(PROMPT_COOKIE_KEY);
+
+      // Add file cleanup here
+      setUploadedFiles([]);
+      setImageDataList([]);
+
+      resetEnhancer();
+
+      textareaRef.current?.blur();
+    };
+
+    /**
+     * Handles the change event for the textarea and updates the input state.
+     * @param event - The change event from the textarea.
+     */
+    const onTextareaChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+      handleInputChange(event);
+    };
+
+    /**
+     * Debounced function to cache the prompt in cookies.
+     * Caches the trimmed value of the textarea input after a delay to optimize performance.
+     */
+    const debouncedCachePrompt = useCallback(
+      debounce((event: React.ChangeEvent<HTMLTextAreaElement>) => {
+        const trimmedValue = event.target.value.trim();
+        Cookies.set(PROMPT_COOKIE_KEY, trimmedValue, { expires: 30 });
+      }, 1000),
+      [],
+    );
+
+    const [messageRef, scrollRef] = useSnapScroll();
+
+    useEffect(() => {
+      const storedApiKeys = Cookies.get('apiKeys');
+
+      if (storedApiKeys) {
+        setApiKeys(JSON.parse(storedApiKeys));
+      }
+    }, []);
+
+    const handleModelChange = (newModel: string) => {
+      setModel(newModel);
+      Cookies.set('selectedModel', newModel, { expires: 30 });
+    };
+
+    const handleProviderChange = (newProvider: ProviderInfo) => {
+      setProvider(newProvider);
+      Cookies.set('selectedProvider', newProvider.name, { expires: 30 });
+    };
+
+    return (
+      <BaseChat
+        ref={animationScope}
+        textareaRef={textareaRef}
+        input={input}
+        showChat={showChat}
+        chatStarted={chatStarted}
+        isStreaming={isLoading || fakeLoading}
+        enhancingPrompt={enhancingPrompt}
+        promptEnhanced={promptEnhanced}
+        sendMessage={sendMessage}
+        model={model}
+        setModel={handleModelChange}
+        provider={provider}
+        setProvider={handleProviderChange}
+        providerList={activeProviders}
+        messageRef={messageRef}
+        scrollRef={scrollRef}
+        handleInputChange={(e) => {
+          onTextareaChange(e);
+          debouncedCachePrompt(e);
+        }}
+        handleStop={abort}
+        description={description}
+        importChat={importChat}
+        exportChat={exportChat}
+        messages={messages.map((message, i) => {
+          if (message.role === 'user') {
+            return message;
+          }
+
+          return {
+            ...message,
+            content: parsedMessages[i] || '',
+          };
+        })}
+        enhancePrompt={() => {
+          enhancePrompt(
+            input,
+            (input) => {
+              setInput(input);
+              scrollTextArea();
+            },
+            model,
+            provider,
+            apiKeys,
+          );
+        }}
+        uploadedFiles={uploadedFiles}
+        setUploadedFiles={setUploadedFiles}
+        imageDataList={imageDataList}
+        setImageDataList={setImageDataList}
+        actionAlert={actionAlert}
+        clearAlert={() => workbenchStore.clearAlert()}
+      />
+    );
+  },
+);

app/components/chat/GitCloneButton.tsx

@@ -1,125 +1,125 @@
-import ignore from 'ignore';
-import { useGit } from '~/lib/hooks/useGit';
-import type { Message } from 'ai';
-import { detectProjectCommands, createCommandsMessage } from '~/utils/projectCommands';
-import { generateId } from '~/utils/fileUtils';
-import { useState } from 'react';
-import { toast } from 'react-toastify';
-import { LoadingOverlay } from '~/components/ui/LoadingOverlay';
-
-const IGNORE_PATTERNS = [
-  'node_modules/**',
-  '.git/**',
-  '.github/**',
-  '.vscode/**',
-  '**/*.jpg',
-  '**/*.jpeg',
-  '**/*.png',
-  'dist/**',
-  'build/**',
-  '.next/**',
-  'coverage/**',
-  '.cache/**',
-  '.vscode/**',
-  '.idea/**',
-  '**/*.log',
-  '**/.DS_Store',
-  '**/npm-debug.log*',
-  '**/yarn-debug.log*',
-  '**/yarn-error.log*',
-  '**/*lock.json',
-  '**/*lock.yaml',
-];
-
-const ig = ignore().add(IGNORE_PATTERNS);
-
-interface GitCloneButtonProps {
-  className?: string;
-  importChat?: (description: string, messages: Message[]) => Promise<void>;
-}
-
-export default function GitCloneButton({ importChat }: GitCloneButtonProps) {
-  const { ready, gitClone } = useGit();
-  const [loading, setLoading] = useState(false);
-
-  const onClick = async (_e: any) => {
-    if (!ready) {
-      return;
-    }
-
-    const repoUrl = prompt('Enter the Git url');
-
-    if (repoUrl) {
-      setLoading(true);
-
-      try {
-        const { workdir, data } = await gitClone(repoUrl);
-
-        if (importChat) {
-          const filePaths = Object.keys(data).filter((filePath) => !ig.ignores(filePath));
-          console.log(filePaths);
-
-          const textDecoder = new TextDecoder('utf-8');
-
-          const fileContents = filePaths
-            .map((filePath) => {
-              const { data: content, encoding } = data[filePath];
-              return {
-                path: filePath,
-                content:
-                  encoding === 'utf8' ? content : content instanceof Uint8Array ? textDecoder.decode(content) : '',
-              };
-            })
-            .filter((f) => f.content);
-
-          const commands = await detectProjectCommands(fileContents);
-          const commandsMessage = createCommandsMessage(commands);
-
-          const filesMessage: Message = {
-            role: 'assistant',
-            content: `Cloning the repo ${repoUrl} into ${workdir}
-<boltArtifact id="imported-files" title="Git Cloned Files" type="bundled">
-${fileContents
-  .map(
-    (file) =>
-      `<boltAction type="file" filePath="${file.path}">
-${file.content}
-</boltAction>`,
-  )
-  .join('\n')}
-</boltArtifact>`,
-            id: generateId(),
-            createdAt: new Date(),
-          };
-
-          const messages = [filesMessage];
-
-          if (commandsMessage) {
-            messages.push(commandsMessage);
-          }
-
-          await importChat(`Git Project:${repoUrl.split('/').slice(-1)[0]}`, messages);
-        }
-      } catch (error) {
-        console.error('Error during import:', error);
-        toast.error('Failed to import repository');
-      } finally {
-        setLoading(false);
-      }
-    }
-  };
-
-  return (
-    <>
-      <button
-        onClick={onClick}
-        title="Clone a Git Repo"
-        className="px-4 py-2 rounded-lg border border-bolt-elements-borderColor bg-bolt-elements-prompt-background text-bolt-elements-textPrimary hover:bg-bolt-elements-background-depth-3 transition-all flex items-center gap-2"
-      >
-        <span className="i-ph:git-branch" />
-        Clone a Git Repo
-      </button>
-      {loading && <LoadingOverlay message="Please wait while we clone the repository..." />}
-    </>
-  );
-}
+import ignore from 'ignore';
+import { useGit } from '~/lib/hooks/useGit';
+import type { Message } from 'ai';
+import { detectProjectCommands, createCommandsMessage } from '~/utils/projectCommands';
+import { generateId } from '~/utils/fileUtils';
+import { useState } from 'react';
+import { toast } from 'react-toastify';
+import { LoadingOverlay } from '~/components/ui/LoadingOverlay';
+
+const IGNORE_PATTERNS = [
+  'node_modules/**',
+  '.git/**',
+  '.github/**',
+  '.vscode/**',
+  '**/*.jpg',
+  '**/*.jpeg',
+  '**/*.png',
+  'dist/**',
+  'build/**',
+  '.next/**',
+  'coverage/**',
+  '.cache/**',
+  '.vscode/**',
+  '.idea/**',
+  '**/*.log',
+  '**/.DS_Store',
+  '**/npm-debug.log*',
+  '**/yarn-debug.log*',
+  '**/yarn-error.log*',
+  '**/*lock.json',
+  '**/*lock.yaml',
+];
+
+const ig = ignore().add(IGNORE_PATTERNS);
+
+interface GitCloneButtonProps {
+  className?: string;
+  importChat?: (description: string, messages: Message[]) => Promise<void>;
+}
+
+export default function GitCloneButton({ importChat }: GitCloneButtonProps) {
+  const { ready, gitClone } = useGit();
+  const [loading, setLoading] = useState(false);
+
+  const onClick = async (_e: any) => {
+    if (!ready) {
+      return;
+    }
+
+    const repoUrl = prompt('Enter the Git url');
+
+    if (repoUrl) {
+      setLoading(true);
+
+      try {
+        const { workdir, data } = await gitClone(repoUrl);
+
+        if (importChat) {
+          const filePaths = Object.keys(data).filter((filePath) => !ig.ignores(filePath));
+          console.log(filePaths);
+
+          const textDecoder = new TextDecoder('utf-8');
+
+          const fileContents = filePaths
+            .map((filePath) => {
+              const { data: content, encoding } = data[filePath];
+              return {
+                path: filePath,
+                content:
+                  encoding === 'utf8' ? content : content instanceof Uint8Array ? textDecoder.decode(content) : '',
+              };
+            })
+            .filter((f) => f.content);
+
+          const commands = await detectProjectCommands(fileContents);
+          const commandsMessage = createCommandsMessage(commands);
+
+          const filesMessage: Message = {
+            role: 'assistant',
+            content: `Cloning the repo ${repoUrl} into ${workdir}
+<boltArtifact id="imported-files" title="Git Cloned Files" type="bundled">
+${fileContents
+  .map(
+    (file) =>
+      `<boltAction type="file" filePath="${file.path}">
+${file.content}
+</boltAction>`,
+  )
+  .join('\n')}
+</boltArtifact>`,
+            id: generateId(),
+            createdAt: new Date(),
+          };
+
+          const messages = [filesMessage];
+
+          if (commandsMessage) {
+            messages.push(commandsMessage);
+          }
+
+          await importChat(`Git Project:${repoUrl.split('/').slice(-1)[0]}`, messages);
+        }
+      } catch (error) {
+        console.error('Error during import:', error);
+        toast.error('Failed to import repository');
+      } finally {
+        setLoading(false);
+      }
+    }
+  };
+
+  return (
+    <>
+      <button
+        onClick={onClick}
+        title="Clone a Git Repo"
+        className="px-4 py-2 rounded-lg border border-bolt-elements-borderColor bg-bolt-elements-prompt-background text-bolt-elements-textPrimary hover:bg-bolt-elements-background-depth-3 transition-all flex items-center gap-2"
+      >
+        <span className="i-ph:git-branch" />
+        Clone a Git Repo
+      </button>
+      {loading && <LoadingOverlay message="Please wait while we clone the repository..." />}
+    </>
+  );
+}