Merge branch 'dev' into readme-split

Dockerfile

@@ -1,4 +1,4 @@
-ARG BASE=node:20.18.0
+ARG BASE=node:20.18.1-bookworm-slim
 FROM ${BASE} AS base
 
 WORKDIR /app

README.md

@@ -4,14 +4,12 @@
 
 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!
 
 [Please join our community here to stay update with the latest!](https://thinktank.ottomator.ai)
 
 ## 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)
 
 ## What Makes Bolt.new Different

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/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/components/sidebar/Menu.client.tsx

@@ -8,6 +8,7 @@ import { cubicEasingFn } from '~/utils/easings';
 import { logger } from '~/utils/logger';
 import { HistoryItem } from './HistoryItem';
 import { binDates } from './date-binning';
+import { useSearchFilter } from '~/lib/hooks/useSearchFilter';
 
 const menuVariants = {
   closed: {
@@ -39,6 +40,11 @@ export function Menu() {
   const [open, setOpen] = useState(false);
   const [dialogContent, setDialogContent] = useState<DialogContent>(null);
 
+  const { filteredItems: filteredList, handleSearchChange } = useSearchFilter({
+    items: list,
+    searchFields: ['description'],
+  });
+
   const loadEntries = useCallback(() => {
     if (db) {
       getAll(db)
@@ -115,11 +121,11 @@ export function Menu() {
       initial="closed"
       animate={open ? 'open' : 'closed'}
       variants={menuVariants}
-      className="flex flex-col side-menu fixed top-0 w-[350px] h-full bg-bolt-elements-background-depth-2 border-r rounded-r-3xl border-bolt-elements-borderColor z-sidebar shadow-xl shadow-bolt-elements-sidebar-dropdownShadow text-sm"
+      className="flex selection-accent flex-col side-menu fixed top-0 w-[350px] h-full bg-bolt-elements-background-depth-2 border-r rounded-r-3xl border-bolt-elements-borderColor z-sidebar shadow-xl shadow-bolt-elements-sidebar-dropdownShadow text-sm"
     >
       <div className="flex items-center h-[var(--header-height)]">{/* Placeholder */}</div>
       <div className="flex-1 flex flex-col h-full w-full overflow-hidden">
-        <div className="p-4">
+        <div className="p-4 select-none">
           <a
             href="/"
             className="flex gap-2 items-center bg-bolt-elements-sidebar-buttonBackgroundDefault text-bolt-elements-sidebar-buttonText hover:bg-bolt-elements-sidebar-buttonBackgroundHover rounded-md p-2 transition-theme"
@@ -128,11 +134,26 @@ export function Menu() {
             Start new chat
           </a>
         </div>
+        <div className="pl-4 pr-4 my-2">
+          <div className="relative w-full">
+            <input
+              className="w-full bg-white dark:bg-bolt-elements-background-depth-4 relative px-2 py-1.5 rounded-md focus:outline-none placeholder-bolt-elements-textTertiary text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary border border-bolt-elements-borderColor"
+              type="search"
+              placeholder="Search"
+              onChange={handleSearchChange}
+              aria-label="Search chats"
+            />
+          </div>
+        </div>
         <div className="text-bolt-elements-textPrimary font-medium pl-6 pr-5 my-2">Your Chats</div>
         <div className="flex-1 overflow-auto pl-4 pr-5 pb-5">
-          {list.length === 0 && <div className="pl-2 text-bolt-elements-textTertiary">No previous conversations</div>}
+          {filteredList.length === 0 && (
+            <div className="pl-2 text-bolt-elements-textTertiary">
+              {list.length === 0 ? 'No previous conversations' : 'No matches found'}
+            </div>
+          )}
           <DialogRoot open={dialogContent !== null}>
-            {binDates(list).map(({ category, items }) => (
+            {binDates(filteredList).map(({ category, items }) => (
               <div key={category} className="mt-4 first:mt-0 space-y-1">
                 <div className="text-bolt-elements-textTertiary sticky top-0 z-1 bg-bolt-elements-background-depth-2 pl-2 pt-2 pb-1">
                   {category}