Merge branch 'dev' into ui-glow

README.md

@@ -4,11 +4,11 @@
 
 This fork of Bolt.new (oTToDev) allows you to choose the LLM that you use for each prompt! Currently, you can use OpenAI, Anthropic, Ollama, OpenRouter, Gemini, LMStudio, Mistral, xAI, HuggingFace, DeepSeek, or Groq models - and it is easily extended to use any other model supported by the Vercel AI SDK! See the instructions below for running this locally and extending it to include more models.
 
-Join the community for oTToDev!
+## Join the community for oTToDev!
 
 https://thinktank.ottomator.ai
 
-# Requested Additions to this Fork - Feel Free to Contribute!!
+## Requested Additions to this Fork - Feel Free to Contribute!!
 
 - ✅ OpenRouter Integration (@coleam00)
 - ✅ Gemini Integration (@jonathands)
@@ -31,6 +31,7 @@ https://thinktank.ottomator.ai
 - ✅ Ability to revert code to earlier version (@wonderwhy-er)
 - ✅ Cohere Integration (@hasanraiyan)
 - ✅ Dynamic model max token length (@hasanraiyan)
+- ✅ Prompt caching (@SujalXplores)
 - ⬜ **HIGH PRIORITY** - Prevent Bolt from rewriting files as often (file locking and diffs)
 - ⬜ **HIGH PRIORITY** - Better prompting for smaller LLMs (code window sometimes doesn't start)
 - ⬜ **HIGH PRIORITY** - Load local projects into the app
@@ -42,14 +43,13 @@ https://thinktank.ottomator.ai
 - ⬜ Perplexity Integration
 - ⬜ Vertex AI Integration
 - ⬜ Deploy directly to Vercel/Netlify/other similar platforms
-- ⬜ Prompt caching
 - ⬜ Better prompt enhancing
 - ⬜ Have LLM plan the project in a MD file for better results/transparency
 - ⬜ VSCode Integration with git-like confirmations
 - ⬜ Upload documents for knowledge - UI design templates, a code base to reference coding style, etc.
 - ⬜ Voice prompting
 
-# Bolt.new: AI-Powered Full-Stack Web Development in the Browser
+## Bolt.new: AI-Powered Full-Stack Web Development in the Browser
 
 Bolt.new is an AI-powered web development agent that allows you to prompt, run, edit, and deploy full-stack applications directly from your browser—no local setup required. If you're here to build your own AI-powered web dev agent using the Bolt open source codebase, [click here to get started!](./CONTRIBUTING.md)
 
@@ -124,6 +124,13 @@ Optionally, you can set the debug level:
 VITE_LOG_LEVEL=debug
 ```
 
+And if using Ollama set the DEFAULT_NUM_CTX, the example below uses 8K context and ollama running on localhost port 11434:
+
+```
+OLLAMA_API_BASE_URL=http://localhost:11434
+DEFAULT_NUM_CTX=8192
+```
+
 **Important**: Never commit your `.env.local` file to version control. It's already included in .gitignore.
 
 ## Run with Docker
@@ -192,31 +199,6 @@ sudo npm install -g pnpm
 pnpm run dev
 ```
 
-## Super Important Note on Running Ollama Models
-
-Ollama models by default only have 2048 tokens for their context window. Even for large models that can easily handle way more.
-This is not a large enough window to handle the Bolt.new/oTToDev prompt! You have to create a version of any model you want
-to use where you specify a larger context window. Luckily it's super easy to do that.
-
-All you have to do is:
-
-- Create a file called "Modelfile" (no file extension) anywhere on your computer
-- Put in the two lines:
-
-```
-FROM [Ollama model ID such as qwen2.5-coder:7b]
-PARAMETER num_ctx 32768
-```
-
-- Run the command: 
-
-```
-ollama create -f Modelfile [your new model ID, can be whatever you want (example: qwen2.5-coder-extra-ctx:7b)]
-```
-
-Now you have a new Ollama model that isn't heavily limited in the context length like Ollama models are by default for some reason.
-You'll see this new model in the list of Ollama models along with all the others you pulled!
-
 ## Adding New LLMs:
 
 To make new LLMs available to use in this version of Bolt.new, head on over to `app/utils/constants.ts` and find the constant MODEL_LIST. Each element in this array is an object that has the model ID for the name (get this from the provider's API documentation), a label for the frontend model dropdown, and the provider. 

app/components/chat/BaseChat.tsx

@@ -47,7 +47,7 @@ const ModelSelector = ({ model, setModel, provider, setProvider, modelList, prov
         key={provider?.name}
         value={model}
         onChange={(e) => setModel(e.target.value)}
-        className="flex-1 p-2 rounded-lg 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 transition-all lg:max-w-[70%] "
+        className="flex-1 p-2 rounded-lg 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 transition-all lg:max-w-[70%]"
       >
         {[...modelList]
           .filter((e) => e.provider == provider?.name && e.name)
@@ -116,6 +116,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
     const TEXTAREA_MAX_HEIGHT = chatStarted ? 400 : 200;
     const [apiKeys, setApiKeys] = useState<Record<string, string>>({});
     const [modelList, setModelList] = useState(MODEL_LIST);
+    const [isModelSettingsCollapsed, setIsModelSettingsCollapsed] = useState(false);
 
     useEffect(() => {
       // Load API keys from cookies on component mount
@@ -206,7 +207,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
               </ClientOnly>
               <div
                 className={classNames(
-                  ' bg-bolt-elements-background-depth-2 p-3 rounded-lg border border-bolt-elements-borderColor relative w-full max-w-chat mx-auto z-prompt mb-6',
+                  'bg-bolt-elements-background-depth-2 p-3 rounded-lg border border-bolt-elements-borderColor relative w-full max-w-chat mx-auto z-prompt mb-6',
                   {
                     'sticky bottom-2': chatStarted,
                   },
@@ -238,24 +239,43 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                   <rect className={classNames(styles.PromptEffectLine)} pathLength="100" stroke-linecap="round"></rect>
                   <rect className={classNames(styles.PromptShine)} x="48" y="24" width="70" height="1"></rect>
                 </svg>
-                <ModelSelector
-                  key={provider?.name + ':' + modelList.length}
-                  model={model}
-                  setModel={setModel}
-                  modelList={modelList}
-                  provider={provider}
-                  setProvider={setProvider}
-                  providerList={PROVIDER_LIST}
-                  apiKeys={apiKeys}
-                />
+                <div>
+                  <div className="flex justify-between items-center mb-2">
+                    <button
+                      onClick={() => setIsModelSettingsCollapsed(!isModelSettingsCollapsed)}
+                      className={classNames('flex items-center gap-2 p-2 rounded-lg transition-all', {
+                        'bg-bolt-elements-item-backgroundAccent text-bolt-elements-item-contentAccent':
+                          isModelSettingsCollapsed,
+                        'bg-bolt-elements-item-backgroundDefault text-bolt-elements-item-contentDefault':
+                          !isModelSettingsCollapsed,
+                      })}
+                    >
+                      <div className={`i-ph:caret-${isModelSettingsCollapsed ? 'right' : 'down'} text-lg`} />
+                      <span>Model Settings</span>
+                    </button>
+                  </div>
 
-                {provider && (
-                  <APIKeyManager
-                    provider={provider}
-                    apiKey={apiKeys[provider.name] || ''}
-                    setApiKey={(key) => updateApiKey(provider.name, key)}
-                  />
-                )}
+
+                  <div className={isModelSettingsCollapsed ? 'hidden' : ''}>
+                    <ModelSelector
+                      key={provider?.name + ':' + modelList.length}
+                      model={model}
+                      setModel={setModel}
+                      modelList={modelList}
+                      provider={provider}
+                      setProvider={setProvider}
+                      providerList={PROVIDER_LIST}
+                      apiKeys={apiKeys}
+                    />
+                    {provider && (
+                      <APIKeyManager
+                        provider={provider}
+                        apiKey={apiKeys[provider.name] || ''}
+                        setApiKey={(key) => updateApiKey(provider.name, key)}
+                      />
+                    )}
+                  </div>
+                </div>
 
                 <div
                   className={classNames(

app/components/chat/Chat.client.tsx

@@ -6,19 +6,20 @@ import { useStore } from '@nanostores/react';
 import type { Message } from 'ai';
 import { useChat } from 'ai/react';
 import { useAnimate } from 'framer-motion';
-import { memo, useEffect, useRef, useState } from 'react';
+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 { fileModificationsToHTML } from '~/utils/diff';
-import { DEFAULT_MODEL, DEFAULT_PROVIDER, PROVIDER_LIST } from '~/utils/constants';
+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 type { ProviderInfo } from '~/utils/types';
+import { debounce } from '~/utils/debounce';
 
 const toastAnimation = cssTransition({
   enter: 'animated fadeInRight',
@@ -120,6 +121,7 @@ export const ChatImpl = memo(
         logger.debug('Finished streaming');
       },
       initialMessages,
+      initialInput: Cookies.get(PROMPT_COOKIE_KEY) || '',
     });
 
     const { enhancingPrompt, promptEnhanced, enhancePrompt, resetEnhancer } = usePromptEnhancer();
@@ -225,12 +227,33 @@ export const ChatImpl = memo(
       }
 
       setInput('');
+      Cookies.remove(PROMPT_COOKIE_KEY);
 
       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(() => {
@@ -268,7 +291,10 @@ export const ChatImpl = memo(
         setProvider={handleProviderChange}
         messageRef={messageRef}
         scrollRef={scrollRef}
-        handleInputChange={handleInputChange}
+        handleInputChange={(e) => {
+          onTextareaChange(e);
+          debouncedCachePrompt(e);
+        }}
         handleStop={abort}
         description={description}
         importChat={importChat}

app/components/chat/ExamplePrompts.tsx

@@ -5,7 +5,7 @@ const EXAMPLE_PROMPTS = [
   { text: 'Build a simple blog using Astro' },
   { text: 'Create a cookie consent form using Material UI' },
   { text: 'Make a space invaders game' },
-  { text: 'How do I center a div?' },
+  { text: 'Make a Tic Tac Toe game in html, css and js only' },
 ];
 
 export function ExamplePrompts(sendMessage?: { (event: React.UIEvent, messageInput?: string): void | undefined }) {

app/components/chat/Markdown.spec.ts

@@ -0,0 +1,48 @@
+import { describe, expect, it } from 'vitest';
+import { stripCodeFenceFromArtifact } from './Markdown';
+
+describe('stripCodeFenceFromArtifact', () => {
+  it('should remove code fences around artifact element', () => {
+    const input = "```xml\n<div class='__boltArtifact__'></div>\n```";
+    const expected = "\n<div class='__boltArtifact__'></div>\n";
+    expect(stripCodeFenceFromArtifact(input)).toBe(expected);
+  });
+
+  it('should handle code fence with language specification', () => {
+    const input = "```typescript\n<div class='__boltArtifact__'></div>\n```";
+    const expected = "\n<div class='__boltArtifact__'></div>\n";
+    expect(stripCodeFenceFromArtifact(input)).toBe(expected);
+  });
+
+  it('should not modify content without artifacts', () => {
+    const input = '```\nregular code block\n```';
+    expect(stripCodeFenceFromArtifact(input)).toBe(input);
+  });
+
+  it('should handle empty input', () => {
+    expect(stripCodeFenceFromArtifact('')).toBe('');
+  });
+
+  it('should handle artifact without code fences', () => {
+    const input = "<div class='__boltArtifact__'></div>";
+    expect(stripCodeFenceFromArtifact(input)).toBe(input);
+  });
+
+  it('should handle multiple artifacts but only remove fences around them', () => {
+    const input = [
+      'Some text',
+      '```typescript',
+      "<div class='__boltArtifact__'></div>",
+      '```',
+      '```',
+      'regular code',
+      '```',
+    ].join('\n');
+
+    const expected = ['Some text', '', "<div class='__boltArtifact__'></div>", '', '```', 'regular code', '```'].join(
+      '\n',
+    );
+
+    expect(stripCodeFenceFromArtifact(input)).toBe(expected);
+  });
+});

app/components/chat/Markdown.tsx

@@ -68,7 +68,51 @@ export const Markdown = memo(({ children, html = false, limitedMarkdown = false
       remarkPlugins={remarkPlugins(limitedMarkdown)}
       rehypePlugins={rehypePlugins(html)}
     >
-      {children}
+      {stripCodeFenceFromArtifact(children)}
     </ReactMarkdown>
   );
 });
+
+/**
+ * Removes code fence markers (```) surrounding an artifact element while preserving the artifact content.
+ * This is necessary because artifacts should not be wrapped in code blocks when rendered for rendering action list.
+ *
+ * @param content - The markdown content to process
+ * @returns The processed content with code fence markers removed around artifacts
+ *
+ * @example
+ * // Removes code fences around artifact
+ * const input = "```xml\n<div class='__boltArtifact__'></div>\n```";
+ * stripCodeFenceFromArtifact(input);
+ * // Returns: "\n<div class='__boltArtifact__'></div>\n"
+ *
+ * @remarks
+ * - Only removes code fences that directly wrap an artifact (marked with __boltArtifact__ class)
+ * - Handles code fences with optional language specifications (e.g. ```xml, ```typescript)
+ * - Preserves original content if no artifact is found
+ * - Safely handles edge cases like empty input or artifacts at start/end of content
+ */
+export const stripCodeFenceFromArtifact = (content: string) => {
+  if (!content || !content.includes('__boltArtifact__')) {
+    return content;
+  }
+
+  const lines = content.split('\n');
+  const artifactLineIndex = lines.findIndex((line) => line.includes('__boltArtifact__'));
+
+  // Return original content if artifact line not found
+  if (artifactLineIndex === -1) {
+    return content;
+  }
+
+  // Check previous line for code fence
+  if (artifactLineIndex > 0 && lines[artifactLineIndex - 1]?.trim().match(/^```\w*$/)) {
+    lines[artifactLineIndex - 1] = '';
+  }
+
+  if (artifactLineIndex < lines.length - 1 && lines[artifactLineIndex + 1]?.trim().match(/^```$/)) {
+    lines[artifactLineIndex + 1] = '';
+  }
+
+  return lines.join('\n');
+};

app/lib/runtime/action-runner.ts

@@ -84,11 +84,11 @@ export class ActionRunner {
     }
 
     if (action.executed) {
-      return;
+      return; // No return value here
     }
 
     if (isStreaming && action.type !== 'file') {
-      return;
+      return; // No return value here
     }
 
     this.#updateAction(actionId, { ...action, ...data.action, executed: !isStreaming });
@@ -100,7 +100,6 @@ export class ActionRunner {
       .catch((error) => {
         console.error('Action failed:', error);
       });
-      return this.#currentExecutionPromise;
   }
 
   async #executeAction(actionId: string, isStreaming: boolean = false) {

app/lib/stores/workbench.ts

@@ -14,6 +14,7 @@ import { saveAs } from 'file-saver';
 import { Octokit, type RestEndpointMethodTypes } from '@octokit/rest';
 import * as nodePath from 'node:path';
 import { extractRelativePath } from '~/utils/diff';
+import { description } from '~/lib/persistence';
 
 export interface ArtifactState {
   id: string;
@@ -328,6 +329,13 @@ export class WorkbenchStore {
     const zip = new JSZip();
     const files = this.files.get();
 
+    // Get the project name from the description input, or use a default name
+    const projectName = (description.value ?? 'project').toLocaleLowerCase().split(' ').join('_');
+
+    // Generate a simple 6-character hash based on the current timestamp
+    const timestampHash = Date.now().toString(36).slice(-6);
+    const uniqueProjectName = `${projectName}_${timestampHash}`;
+
     for (const [filePath, dirent] of Object.entries(files)) {
       if (dirent?.type === 'file' && !dirent.isBinary) {
         const relativePath = extractRelativePath(filePath);
@@ -350,8 +358,9 @@ export class WorkbenchStore {
       }
     }
 
+    // Generate the zip file and save it
     const content = await zip.generateAsync({ type: 'blob' });
-    saveAs(content, 'project.zip');
+    saveAs(content, `${uniqueProjectName}.zip`);
   }
 
   async syncFiles(targetHandle: FileSystemDirectoryHandle) {

app/utils/constants.ts

@@ -7,6 +7,7 @@ export const MODIFICATIONS_TAG_NAME = 'bolt_file_modifications';
 export const MODEL_REGEX = /^\[Model: (.*?)\]\n\n/;
 export const PROVIDER_REGEX = /\[Provider: (.*?)\]\n\n/;
 export const DEFAULT_MODEL = 'claude-3-5-sonnet-latest';
+export const PROMPT_COOKIE_KEY = 'cachedPrompt';
 
 const PROVIDER_LIST: ProviderInfo[] = [
   {
@@ -283,9 +284,11 @@ const getOllamaBaseUrl = () => {
 };
 
 async function getOllamaModels(): Promise<ModelInfo[]> {
-  //if (typeof window === 'undefined') {
-    //return [];
-  //}
+  /*
+   * if (typeof window === 'undefined') {
+   * return [];
+   * }
+   */
 
   try {
     const baseUrl = getOllamaBaseUrl();

app/utils/logger.ts

@@ -11,7 +11,7 @@ interface Logger {
   setLevel: (level: DebugLevel) => void;
 }
 
-let currentLevel: DebugLevel = import.meta.env.VITE_LOG_LEVEL ?? import.meta.env.DEV ? 'debug' : 'info';
+let currentLevel: DebugLevel = (import.meta.env.VITE_LOG_LEVEL ?? import.meta.env.DEV) ? 'debug' : 'info';
 
 const isWorker = 'HTMLRewriter' in globalThis;
 const supportsColor = !isWorker;

docker-compose.yaml

@@ -1,5 +1,5 @@
 services:
-  bolt-ai:
+  app-prod:
     image: bolt-ai:production
     build:
       context: .
@@ -24,12 +24,12 @@ services:
       - DEFAULT_NUM_CTX=${DEFAULT_NUM_CTX:-32768}
       - RUNNING_IN_DOCKER=true
     extra_hosts:
-      - "host.docker.internal:host-gateway"      
+      - "host.docker.internal:host-gateway"
     command: pnpm run dockerstart
     profiles:
-      - production  # This service only runs in the production profile
+      - production
 
-  bolt-ai-dev:
+  app-dev:
     image: bolt-ai:development
     build:
       target: bolt-ai-development
@@ -39,7 +39,7 @@ services:
       - VITE_HMR_HOST=localhost
       - VITE_HMR_PORT=5173
       - CHOKIDAR_USEPOLLING=true
-      - WATCHPACK_POLLING=true  
+      - WATCHPACK_POLLING=true
       - PORT=5173
       - GROQ_API_KEY=${GROQ_API_KEY}
       - HuggingFace_API_KEY=${HuggingFace_API_KEY}
@@ -52,7 +52,7 @@ services:
       - DEFAULT_NUM_CTX=${DEFAULT_NUM_CTX:-32768}
       - RUNNING_IN_DOCKER=true
     extra_hosts:
-      - "host.docker.internal:host-gateway"      
+      - "host.docker.internal:host-gateway"
     volumes:
       - type: bind
         source: .
@@ -60,6 +60,6 @@ services:
         consistency: cached
       - /app/node_modules
     ports:
-      - "5173:5173"  # Same port, no conflict as only one runs at a time
+      - "5173:5173"
     command: pnpm run dev --host 0.0.0.0
-    profiles: ["development", "default"]  # Make development the default profile
+    profiles: ["development", "default"]

package.json

@@ -79,6 +79,7 @@
     "jszip": "^3.10.1",
     "nanostores": "^0.10.3",
     "ollama-ai-provider": "^0.15.2",
+    "pnpm": "^9.14.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hotkeys-hook": "^4.5.0",
@@ -96,7 +97,9 @@
   "devDependencies": {
     "@blitz/eslint-plugin": "0.1.0",
     "@cloudflare/workers-types": "^4.20240620.0",
+    "@jridgewell/sourcemap-codec": "^1.4.15",
     "@remix-run/dev": "^2.10.0",
+    "@rollup/plugin-inject": "^5.0.5",
     "@types/diff": "^5.2.1",
     "@types/file-saver": "^2.0.7",
     "@types/js-cookie": "^3.0.6",