feat: improve prompt, add ability to abort streaming, improve message parser

packages/bolt/app/components/chat/Artifact.tsx

@@ -1,8 +1,9 @@
 import { useStore } from '@nanostores/react';
 import { AnimatePresence, motion } from 'framer-motion';
 import { computed } from 'nanostores';
-import { useState } from 'react';
+import { memo, useEffect, useRef, useState } from 'react';
 import { createHighlighter, type BundledLanguage, type BundledTheme, type HighlighterGeneric } from 'shiki';
+import { chatStore } from '../../lib/stores/chat';
 import { getArtifactKey, workbenchStore, type ActionState } from '../../lib/stores/workbench';
 import { classNames } from '../../utils/classNames';
 import { cubicEasingFn } from '../../utils/easings';
@@ -25,9 +26,11 @@ interface ArtifactProps {
   messageId: string;
 }
 
-export function Artifact({ artifactId, messageId }: ArtifactProps) {
+export const Artifact = memo(({ artifactId, messageId }: ArtifactProps) => {
+  const userToggledActions = useRef(false);
   const [showActions, setShowActions] = useState(false);
 
+  const chat = useStore(chatStore);
   const artifacts = useStore(workbenchStore.artifacts);
   const artifact = artifacts[getArtifactKey(artifactId, messageId)];
 
@@ -37,6 +40,17 @@ export function Artifact({ artifactId, messageId }: ArtifactProps) {
     }),
   );
 
+  const toggleActions = () => {
+    userToggledActions.current = true;
+    setShowActions(!showActions);
+  };
+
+  useEffect(() => {
+    if (actions.length && !showActions && !userToggledActions.current) {
+      setShowActions(true);
+    }
+  }, [actions]);
+
   return (
     <div className="flex flex-col overflow-hidden border rounded-lg w-full">
       <div className="flex">
@@ -48,7 +62,7 @@ export function Artifact({ artifactId, messageId }: ArtifactProps) {
           }}
         >
           <div className="flex items-center px-6 bg-gray-100/50">
-            {!artifact?.closed ? (
+            {!artifact?.closed && !chat.aborted ? (
               <div className="i-svg-spinners:90-ring-with-bg scale-130"></div>
             ) : (
               <div className="i-ph:code-bold scale-130 text-gray-600"></div>
@@ -67,7 +81,7 @@ export function Artifact({ artifactId, messageId }: ArtifactProps) {
               exit={{ width: 0 }}
               transition={{ duration: 0.15, ease: cubicEasingFn }}
               className="hover:bg-gray-200"
-              onClick={() => setShowActions(!showActions)}
+              onClick={toggleActions}
             >
               <div className="p-4">
                 <div className={showActions ? 'i-ph:caret-up-bold' : 'i-ph:caret-down-bold'}></div>
@@ -98,9 +112,9 @@ export function Artifact({ artifactId, messageId }: ArtifactProps) {
                     const { status, type, content, abort } = action;
 
                     return (
-                      <li key={index} className={classNames(getTextColor(action.status))}>
+                      <li key={index}>
                         <div className="flex items-center gap-1.5">
-                          <div className="text-lg">
+                          <div className={classNames('text-lg', getTextColor(action.status))}>
                             {status === 'running' ? (
                               <div className="i-svg-spinners:90-ring-with-bg"></div>
                             ) : status === 'pending' ? (
@@ -136,7 +150,7 @@ export function Artifact({ artifactId, messageId }: ArtifactProps) {
       </AnimatePresence>
     </div>
   );
-}
+});
 
 function getTextColor(status: ActionState['status']) {
   switch (status) {

packages/bolt/app/components/chat/BaseChat.tsx

@@ -16,6 +16,7 @@ interface BaseChatProps {
   enhancingPrompt?: boolean;
   promptEnhanced?: boolean;
   input?: string;
+  handleStop?: () => void;
   sendMessage?: () => void;
   handleInputChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
   enhancePrompt?: () => void;
@@ -38,6 +39,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
       sendMessage,
       handleInputChange,
       enhancePrompt,
+      handleStop,
     },
     ref,
   ) => {
@@ -111,7 +113,22 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                     placeholder="How can Bolt help you today?"
                     translate="no"
                   />
-                  <ClientOnly>{() => <SendButton show={input.length > 0} onClick={sendMessage} />}</ClientOnly>
+                  <ClientOnly>
+                    {() => (
+                      <SendButton
+                        show={input.length > 0 || isStreaming}
+                        isStreaming={isStreaming}
+                        onClick={() => {
+                          if (isStreaming) {
+                            handleStop?.();
+                            return;
+                          }
+
+                          sendMessage?.();
+                        }}
+                      />
+                    )}
+                  </ClientOnly>
                   <div className="flex justify-between text-sm p-4 pt-2">
                     <div className="flex gap-1 items-center">
                       <IconButton icon="i-ph:microphone-duotone" className="-ml-1" />

packages/bolt/app/components/chat/Chat.client.tsx

@@ -2,6 +2,8 @@ import { useChat } from 'ai/react';
 import { useAnimate } from 'framer-motion';
 import { useEffect, useRef, useState } from 'react';
 import { useMessageParser, usePromptEnhancer } from '../../lib/hooks';
+import { chatStore } from '../../lib/stores/chat';
+import { workbenchStore } from '../../lib/stores/workbench';
 import { cubicEasingFn } from '../../utils/easings';
 import { createScopedLogger } from '../../utils/logger';
 import { BaseChat } from './BaseChat';
@@ -15,7 +17,7 @@ export function Chat() {
 
   const [animationScope, animate] = useAnimate();
 
-  const { messages, isLoading, input, handleInputChange, setInput, handleSubmit } = useChat({
+  const { messages, isLoading, input, handleInputChange, setInput, handleSubmit, stop } = useChat({
     api: '/api/chat',
     onError: (error) => {
       logger.error(error);
@@ -42,6 +44,12 @@ export function Chat() {
     }
   };
 
+  const abort = () => {
+    stop();
+    chatStore.setKey('aborted', true);
+    workbenchStore.abortAllActions();
+  };
+
   useEffect(() => {
     const textarea = textareaRef.current;
 
@@ -70,6 +78,8 @@ export function Chat() {
       return;
     }
 
+    chatStore.setKey('aborted', false);
+
     runAnimation();
     handleSubmit();
     resetEnhancer();
@@ -88,6 +98,7 @@ export function Chat() {
       promptEnhanced={promptEnhanced}
       sendMessage={sendMessage}
       handleInputChange={handleInputChange}
+      handleStop={abort}
       messages={messages.map((message, i) => {
         if (message.role === 'user') {
           return message;

packages/bolt/app/components/chat/SendButton.client.tsx

@@ -2,12 +2,13 @@ import { AnimatePresence, cubicBezier, motion } from 'framer-motion';
 
 interface SendButtonProps {
   show: boolean;
+  isStreaming?: boolean;
   onClick?: VoidFunction;
 }
 
 const customEasingFn = cubicBezier(0.4, 0, 0.2, 1);
 
-export function SendButton({ show, onClick }: SendButtonProps) {
+export function SendButton({ show, isStreaming, onClick }: SendButtonProps) {
   return (
     <AnimatePresence>
       {show ? (
@@ -22,7 +23,9 @@ export function SendButton({ show, onClick }: SendButtonProps) {
             onClick?.();
           }}
         >
-          <div className="i-ph:arrow-right text-xl"></div>
+          <div className="text-lg">
+            {!isStreaming ? <div className="i-ph:arrow-right"></div> : <div className="i-ph:stop-circle-bold"></div>}
+          </div>
         </motion.button>
       ) : null}
     </AnimatePresence>

packages/bolt/app/components/workbench/Preview.tsx

@@ -30,12 +30,13 @@ export const Preview = memo(() => {
   return (
     <div className="w-full h-full flex flex-col">
       <div className="bg-gray-100 rounded-t-lg p-2 flex items-center space-x-1.5">
-        <div className="i-ph:circle-fill text-[#FF5F57]"></div>
+        <div className="flex items-center gap-2 text-gray-800">
-        <div className="i-ph:circle-fill text-[#FEBC2E]"></div>
+          <div className="i-ph:app-window-duotone scale-130 ml-1.5"></div>
-        <div className="i-ph:circle-fill text-[#29CC41]"></div>
+          <span className="text-sm">Preview</span>
+        </div>
         <div className="flex-grow"></div>
       </div>
-      <div className="bg-white p-2 flex items-center gap-1">
+      <div className="bg-white p-2 flex items-center gap-1.5">
         <IconButton icon="i-ph:arrow-clockwise" onClick={reloadPreview} />
         <div className="flex items-center gap-1 flex-grow bg-gray-100 rounded-full px-3 py-1 text-sm text-gray-600 hover:bg-gray-200 hover:focus-within:bg-white focus-within:bg-white focus-within:ring-2 focus-within:ring-accent">
           <div className="bg-white rounded-full p-[2px] -ml-1">

packages/bolt/app/lib/.server/llm/prompts.ts

@@ -10,24 +10,13 @@ You are Bolt, an expert AI assistant and exceptional senior software developer w
 
   IMPORTANT: Git is NOT available.
 
-  Available shell commands: ['cat','chmod','cp','echo','hostname','kill','ln','ls','mkdir','mv','ps','pwd','rm','rmdir','xxd','alias','cd','clear','curl','env','false','getconf','head','sort','tail','touch','true','uptime','which','code','jq','loadenv','node','python3','wasm','xdg-open','command','exit','export','source']
+  Available shell commands: cat, chmod, cp, echo, hostname, kill, ln, ls, mkdir, mv, ps, pwd, rm, rmdir, xxd, alias, cd, clear, curl, env, false, getconf, head, sort, tail, touch, true, uptime, which, code, jq, loadenv, node, python3, wasm, xdg-open, command, exit, export, source
 </system_constraints>
 
 <code_formatting_info>
   Use 2 spaces for code indentation
 </code_formatting_info>
 
-<best_practices>
-  Follow coding best practices:
-    - Ensure code is clean, readable, and maintainable.
-    - Adhere to proper naming conventions and consistent formatting.
-
-  Modularize functionality:
-    - Split functionality into smaller, reusable modules instead of placing everything in a single large file.
-    - Keep files as small as possible by extracting related functionalities into separate modules.
-    - Use imports to connect these modules together effectively.
-</best_practices>
-
 <artifact_info>
   Bolt creates a SINGLE, comprehensive artifact for each project. The artifact contains all necessary steps and components, including:
 
@@ -67,6 +56,16 @@ You are Bolt, an expert AI assistant and exceptional senior software developer w
     10. Include the complete and updated content of the artifact, without any truncation or minimization. Don't use "// rest of the code remains the same...".
 
     11. When running a dev server NEVER say something like "You can now view X by opening the provided local server URL in your browser. The preview will be opened automatically or by the user manually!
+
+    12. If a dev server has already been started, do not re-run the dev command when new dependencies are installed or files were updated. Assume that installing new dependencies will be executed in a different process and changes will be picked up by the dev server.
+
+    13. ULTRA IMPORTANT: Use coding best practices and split functionality into smaller modules instead of putting everything in a single gigantic file. Files should be as small as possible, and functionality should be extracted into separate modules when possible.
+
+      - Ensure code is clean, readable, and maintainable.
+      - Adhere to proper naming conventions and consistent formatting.
+      - Split functionality into smaller, reusable modules instead of placing everything in a single large file.
+      - Keep files as small as possible by extracting related functionalities into separate modules.
+      - Use imports to connect these modules together effectively.
   </artifact_instructions>
 </artifact_info>
 

packages/bolt/app/lib/hooks/useMessageParser.ts

@@ -19,8 +19,20 @@ const messageParser = new StreamingMessageParser({
 
       workbenchStore.updateArtifact(data, { closed: true });
     },
-    onAction: (data) => {
+    onActionOpen: (data) => {
-      logger.debug('onAction', data);
+      logger.debug('onActionOpen', data.action);
+
+      // we only add shell actions when when the close tag got parsed because only then we have the content
+      if (data.action.type !== 'shell') {
+        workbenchStore.addAction(data);
+      }
+    },
+    onActionClose: (data) => {
+      logger.debug('onActionClose', data.action);
+
+      if (data.action.type === 'shell') {
+        workbenchStore.addAction(data);
+      }
 
       workbenchStore.runAction(data);
     },

packages/bolt/app/lib/runtime/__snapshots__/message-parser.spec.ts.snap

@@ -0,0 +1,220 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`StreamingMessageParser > valid artifacts with actions > should correctly parse chunks and strip out bolt artifacts (0) > onActionClose 1`] = `
+{
+  "action": {
+    "content": "npm install",
+    "type": "shell",
+  },
+  "actionId": "0",
+  "artifactId": "artifact_1",
+  "messageId": "message_1",
+}
+`;
+
+exports[`StreamingMessageParser > valid artifacts with actions > should correctly parse chunks and strip out bolt artifacts (0) > onActionOpen 1`] = `
+{
+  "action": {
+    "content": "",
+    "type": "shell",
+  },
+  "actionId": "0",
+  "artifactId": "artifact_1",
+  "messageId": "message_1",
+}
+`;
+
+exports[`StreamingMessageParser > valid artifacts with actions > should correctly parse chunks and strip out bolt artifacts (0) > onArtifactClose 1`] = `
+{
+  "id": "artifact_1",
+  "messageId": "message_1",
+  "title": "Some title",
+}
+`;
+
+exports[`StreamingMessageParser > valid artifacts with actions > should correctly parse chunks and strip out bolt artifacts (0) > onArtifactOpen 1`] = `
+{
+  "id": "artifact_1",
+  "messageId": "message_1",
+  "title": "Some title",
+}
+`;
+
+exports[`StreamingMessageParser > valid artifacts with actions > should correctly parse chunks and strip out bolt artifacts (1) > onActionClose 1`] = `
+{
+  "action": {
+    "content": "npm install",
+    "type": "shell",
+  },
+  "actionId": "0",
+  "artifactId": "artifact_1",
+  "messageId": "message_1",
+}
+`;
+
+exports[`StreamingMessageParser > valid artifacts with actions > should correctly parse chunks and strip out bolt artifacts (1) > onActionClose 2`] = `
+{
+  "action": {
+    "content": "some content
+",
+    "filePath": "index.js",
+    "type": "file",
+  },
+  "actionId": "1",
+  "artifactId": "artifact_1",
+  "messageId": "message_1",
+}
+`;
+
+exports[`StreamingMessageParser > valid artifacts with actions > should correctly parse chunks and strip out bolt artifacts (1) > onActionOpen 1`] = `
+{
+  "action": {
+    "content": "",
+    "type": "shell",
+  },
+  "actionId": "0",
+  "artifactId": "artifact_1",
+  "messageId": "message_1",
+}
+`;
+
+exports[`StreamingMessageParser > valid artifacts with actions > should correctly parse chunks and strip out bolt artifacts (1) > onActionOpen 2`] = `
+{
+  "action": {
+    "content": "",
+    "filePath": "index.js",
+    "type": "file",
+  },
+  "actionId": "1",
+  "artifactId": "artifact_1",
+  "messageId": "message_1",
+}
+`;
+
+exports[`StreamingMessageParser > valid artifacts with actions > should correctly parse chunks and strip out bolt artifacts (1) > onArtifactClose 1`] = `
+{
+  "id": "artifact_1",
+  "messageId": "message_1",
+  "title": "Some title",
+}
+`;
+
+exports[`StreamingMessageParser > valid artifacts with actions > should correctly parse chunks and strip out bolt artifacts (1) > onArtifactOpen 1`] = `
+{
+  "id": "artifact_1",
+  "messageId": "message_1",
+  "title": "Some title",
+}
+`;
+
+exports[`StreamingMessageParser > valid artifacts without actions > should correctly parse chunks and strip out bolt artifacts (0) > onArtifactClose 1`] = `
+{
+  "id": "artifact_1",
+  "messageId": "message_1",
+  "title": "Some title",
+}
+`;
+
+exports[`StreamingMessageParser > valid artifacts without actions > should correctly parse chunks and strip out bolt artifacts (0) > onArtifactOpen 1`] = `
+{
+  "id": "artifact_1",
+  "messageId": "message_1",
+  "title": "Some title",
+}
+`;
+
+exports[`StreamingMessageParser > valid artifacts without actions > should correctly parse chunks and strip out bolt artifacts (1) > onArtifactClose 1`] = `
+{
+  "id": "artifact_1",
+  "messageId": "message_1",
+  "title": "Some title",
+}
+`;
+
+exports[`StreamingMessageParser > valid artifacts without actions > should correctly parse chunks and strip out bolt artifacts (1) > onArtifactOpen 1`] = `
+{
+  "id": "artifact_1",
+  "messageId": "message_1",
+  "title": "Some title",
+}
+`;
+
+exports[`StreamingMessageParser > valid artifacts without actions > should correctly parse chunks and strip out bolt artifacts (2) > onArtifactClose 1`] = `
+{
+  "id": "artifact_1",
+  "messageId": "message_1",
+  "title": "Some title",
+}
+`;
+
+exports[`StreamingMessageParser > valid artifacts without actions > should correctly parse chunks and strip out bolt artifacts (2) > onArtifactOpen 1`] = `
+{
+  "id": "artifact_1",
+  "messageId": "message_1",
+  "title": "Some title",
+}
+`;
+
+exports[`StreamingMessageParser > valid artifacts without actions > should correctly parse chunks and strip out bolt artifacts (3) > onArtifactClose 1`] = `
+{
+  "id": "artifact_1",
+  "messageId": "message_1",
+  "title": "Some title",
+}
+`;
+
+exports[`StreamingMessageParser > valid artifacts without actions > should correctly parse chunks and strip out bolt artifacts (3) > onArtifactOpen 1`] = `
+{
+  "id": "artifact_1",
+  "messageId": "message_1",
+  "title": "Some title",
+}
+`;
+
+exports[`StreamingMessageParser > valid artifacts without actions > should correctly parse chunks and strip out bolt artifacts (4) > onArtifactClose 1`] = `
+{
+  "id": "artifact_1",
+  "messageId": "message_1",
+  "title": "Some title",
+}
+`;
+
+exports[`StreamingMessageParser > valid artifacts without actions > should correctly parse chunks and strip out bolt artifacts (4) > onArtifactOpen 1`] = `
+{
+  "id": "artifact_1",
+  "messageId": "message_1",
+  "title": "Some title",
+}
+`;
+
+exports[`StreamingMessageParser > valid artifacts without actions > should correctly parse chunks and strip out bolt artifacts (5) > onArtifactClose 1`] = `
+{
+  "id": "artifact_1",
+  "messageId": "message_1",
+  "title": "Some title",
+}
+`;
+
+exports[`StreamingMessageParser > valid artifacts without actions > should correctly parse chunks and strip out bolt artifacts (5) > onArtifactOpen 1`] = `
+{
+  "id": "artifact_1",
+  "messageId": "message_1",
+  "title": "Some title",
+}
+`;
+
+exports[`StreamingMessageParser > valid artifacts without actions > should correctly parse chunks and strip out bolt artifacts (6) > onArtifactClose 1`] = `
+{
+  "id": "artifact_1",
+  "messageId": "message_1",
+  "title": "Some title",
+}
+`;
+
+exports[`StreamingMessageParser > valid artifacts without actions > should correctly parse chunks and strip out bolt artifacts (6) > onArtifactOpen 1`] = `
+{
+  "id": "artifact_1",
+  "messageId": "message_1",
+  "title": "Some title",
+}
+`;

packages/bolt/app/lib/runtime/message-parser.spec.ts

@@ -1,5 +1,15 @@
-import { describe, expect, it } from 'vitest';
+import { describe, expect, it, vi } from 'vitest';
-import { StreamingMessageParser } from './message-parser';
+import { StreamingMessageParser, type ActionCallback, type ArtifactCallback } from './message-parser';
+
+interface ExpectedResult {
+  output: string;
+  callbacks?: {
+    onArtifactOpen?: number;
+    onArtifactClose?: number;
+    onActionOpen?: number;
+    onActionClose?: number;
+  };
+}
 
 describe('StreamingMessageParser', () => {
   it('should pass through normal text', () => {
@@ -12,60 +22,165 @@ describe('StreamingMessageParser', () => {
     expect(parser.parse('test_id', 'Hello <strong>world</strong>!')).toBe('Hello <strong>world</strong>!');
   });
 
-  it.each([
+  describe('no artifacts', () => {
+    it.each<[string | string[], ExpectedResult | string]>([
       ['Foo bar', 'Foo bar'],
       ['Foo bar <', 'Foo bar '],
       ['Foo bar <p', 'Foo bar <p'],
+      [['Foo bar <', 's', 'p', 'an>some text</span>'], 'Foo bar <span>some text</span>'],
+    ])('should correctly parse chunks and strip out bolt artifacts (%#)', (input, expected) => {
+      runTest(input, expected);
+    });
+  });
+
+  describe('invalid or incomplete artifacts', () => {
+    it.each<[string | string[], ExpectedResult | string]>([
       ['Foo bar <b', 'Foo bar '],
       ['Foo bar <ba', 'Foo bar <ba'],
       ['Foo bar <bol', 'Foo bar '],
       ['Foo bar <bolt', 'Foo bar '],
       ['Foo bar <bolta', 'Foo bar <bolta'],
       ['Foo bar <boltA', 'Foo bar '],
-    ['Some text before <boltArtifact>foo</boltArtifact> Some more text', 'Some text before  Some more text'],
+      ['Foo bar <boltArtifacs></boltArtifact>', 'Foo bar <boltArtifacs></boltArtifact>'],
-    [['Some text before <boltArti', 'fact>foo</boltArtifact> Some more text'], 'Some text before  Some more text'],
-    [['Some text before <boltArti', 'fac', 't>foo</boltArtifact> Some more text'], 'Some text before  Some more text'],
-    [['Some text before <boltArti', 'fact>fo', 'o</boltArtifact> Some more text'], 'Some text before  Some more text'],
-    [
-      ['Some text before <boltArti', 'fact>fo', 'o', '<', '/boltArtifact> Some more text'],
-      'Some text before  Some more text',
-    ],
-    [
-      ['Some text before <boltArti', 'fact>fo', 'o<', '/boltArtifact> Some more text'],
-      'Some text before  Some more text',
-    ],
       ['Before <oltArtfiact>foo</boltArtifact> After', 'Before <oltArtfiact>foo</boltArtifact> After'],
       ['Before <boltArtifactt>foo</boltArtifact> After', 'Before <boltArtifactt>foo</boltArtifact> After'],
-    ['Before <boltArtifact title="Some title">foo</boltArtifact> After', 'Before  After'],
+    ])('should correctly parse chunks and strip out bolt artifacts (%#)', (input, expected) => {
+      runTest(input, expected);
+    });
+  });
+
+  describe('valid artifacts without actions', () => {
+    it.each<[string | string[], ExpectedResult | string]>([
+      [
+        'Some text before <boltArtifact title="Some title" id="artifact_1">foo bar</boltArtifact> Some more text',
+        {
+          output: 'Some text before  Some more text',
+          callbacks: { onArtifactOpen: 1, onArtifactClose: 1, onActionOpen: 0, onActionClose: 0 },
+        },
+      ],
+      [
+        ['Some text before <boltArti', 'fact', ' title="Some title" id="artifact_1">foo</boltArtifact> Some more text'],
+        {
+          output: 'Some text before  Some more text',
+          callbacks: { onArtifactOpen: 1, onArtifactClose: 1, onActionOpen: 0, onActionClose: 0 },
+        },
+      ],
+      [
+        [
+          'Some text before <boltArti',
+          'fac',
+          't title="Some title" id="artifact_1"',
+          ' ',
+          '>',
+          'foo</boltArtifact> Some more text',
+        ],
+        {
+          output: 'Some text before  Some more text',
+          callbacks: { onArtifactOpen: 1, onArtifactClose: 1, onActionOpen: 0, onActionClose: 0 },
+        },
+      ],
+      [
+        [
+          'Some text before <boltArti',
+          'fact',
+          ' title="Some title" id="artifact_1"',
+          ' >fo',
+          'o</boltArtifact> Some more text',
+        ],
+        {
+          output: 'Some text before  Some more text',
+          callbacks: { onArtifactOpen: 1, onArtifactClose: 1, onActionOpen: 0, onActionClose: 0 },
+        },
+      ],
+      [
+        [
+          'Some text before <boltArti',
+          'fact tit',
+          'le="Some ',
+          'title" id="artifact_1">fo',
+          'o',
+          '<',
+          '/boltArtifact> Some more text',
+        ],
+        {
+          output: 'Some text before  Some more text',
+          callbacks: { onArtifactOpen: 1, onArtifactClose: 1, onActionOpen: 0, onActionClose: 0 },
+        },
+      ],
+      [
+        [
+          'Some text before <boltArti',
+          'fact title="Some title" id="artif',
+          'act_1">fo',
+          'o<',
+          '/boltArtifact> Some more text',
+        ],
+        {
+          output: 'Some text before  Some more text',
+          callbacks: { onArtifactOpen: 1, onArtifactClose: 1, onActionOpen: 0, onActionClose: 0 },
+        },
+      ],
+      [
+        'Before <boltArtifact title="Some title" id="artifact_1">foo</boltArtifact> After',
+        {
+          output: 'Before  After',
+          callbacks: { onArtifactOpen: 1, onArtifactClose: 1, onActionOpen: 0, onActionClose: 0 },
+        },
+      ],
+    ])('should correctly parse chunks and strip out bolt artifacts (%#)', (input, expected) => {
+      runTest(input, expected);
+    });
+  });
+
+  describe('valid artifacts with actions', () => {
+    it.each<[string | string[], ExpectedResult | string]>([
       [
         'Before <boltArtifact title="Some title" id="artifact_1"><boltAction type="shell">npm install</boltAction></boltArtifact> After',
-      'Before  After',
+        {
-      [{ type: 'shell', content: 'npm install' }],
+          output: 'Before  After',
+          callbacks: { onArtifactOpen: 1, onArtifactClose: 1, onActionOpen: 1, onActionClose: 1 },
+        },
       ],
       [
         'Before <boltArtifact title="Some title" id="artifact_1"><boltAction type="shell">npm install</boltAction><boltAction type="file" filePath="index.js">some content</boltAction></boltArtifact> After',
-      'Before  After',
+        {
-      [
+          output: 'Before  After',
-        { type: 'shell', content: 'npm install' },
+          callbacks: { onArtifactOpen: 1, onArtifactClose: 1, onActionOpen: 2, onActionClose: 2 },
-        { type: 'file', filePath: 'index.js', content: 'some content\n' },
+        },
       ],
-    ],
+    ])('should correctly parse chunks and strip out bolt artifacts (%#)', (input, expected) => {
-  ])('should correctly parse chunks and strip out bolt artifacts', (input, expected, expectedActions = []) => {
+      runTest(input, expected);
-    let actionCounter = 0;
+    });
+  });
+});
 
-    const expectedArtifactId = 'artifact_1';
+function runTest(input: string | string[], outputOrExpectedResult: string | ExpectedResult) {
-    const expectedMessageId = 'message_1';
+  let expected: ExpectedResult;
+
+  if (typeof outputOrExpectedResult === 'string') {
+    expected = { output: outputOrExpectedResult };
+  } else {
+    expected = outputOrExpectedResult;
+  }
+
+  const callbacks = {
+    onArtifactOpen: vi.fn<ArtifactCallback>((data) => {
+      expect(data).toMatchSnapshot('onArtifactOpen');
+    }),
+    onArtifactClose: vi.fn<ArtifactCallback>((data) => {
+      expect(data).toMatchSnapshot('onArtifactClose');
+    }),
+    onActionOpen: vi.fn<ActionCallback>((data) => {
+      expect(data).toMatchSnapshot('onActionOpen');
+    }),
+    onActionClose: vi.fn<ActionCallback>((data) => {
+      expect(data).toMatchSnapshot('onActionClose');
+    }),
+  };
 
   const parser = new StreamingMessageParser({
     artifactElement: '',
-      callbacks: {
+    callbacks,
-        onAction: ({ artifactId, messageId, action }) => {
-          expect(artifactId).toBe(expectedArtifactId);
-          expect(messageId).toBe(expectedMessageId);
-          expect(action).toEqual(expectedActions[actionCounter]);
-          actionCounter++;
-        },
-      },
   });
 
   let message = '';
@@ -77,10 +192,16 @@ describe('StreamingMessageParser', () => {
   for (const chunk of chunks) {
     message += chunk;
 
-      result += parser.parse(expectedMessageId, message);
+    result += parser.parse('message_1', message);
   }
 
-    expect(actionCounter).toBe(expectedActions.length);
+  for (const name in expected.callbacks) {
-    expect(result).toEqual(expected);
+    const callbackName = name;
-  });
+
-});
+    expect(callbacks[callbackName as keyof typeof callbacks]).toHaveBeenCalledTimes(
+      expected.callbacks[callbackName as keyof typeof expected.callbacks] ?? 0,
+    );
+  }
+
+  expect(result).toEqual(expected.output);
+}

packages/bolt/app/lib/runtime/message-parser.ts

@@ -21,20 +21,20 @@ export interface ActionCallbackData {
   action: BoltAction;
 }
 
-type ArtifactOpenCallback = (data: ArtifactCallbackData) => void;
+export type ArtifactCallback = (data: ArtifactCallbackData) => void;
-type ArtifactCloseCallback = (data: ArtifactCallbackData) => void;
+export type ActionCallback = (data: ActionCallbackData) => void;
-type ActionCallback = (data: ActionCallbackData) => void;
 
-interface Callbacks {
+export interface ParserCallbacks {
-  onArtifactOpen?: ArtifactOpenCallback;
+  onArtifactOpen?: ArtifactCallback;
-  onArtifactClose?: ArtifactCloseCallback;
+  onArtifactClose?: ArtifactCallback;
-  onAction?: ActionCallback;
+  onActionOpen?: ActionCallback;
+  onActionClose?: ActionCallback;
 }
 
 type ElementFactory = () => string;
 
-interface StreamingMessageParserOptions {
+export interface StreamingMessageParserOptions {
-  callbacks?: Callbacks;
+  callbacks?: ParserCallbacks;
   artifactElement?: string | ElementFactory;
 }
 
@@ -95,10 +95,17 @@ export class StreamingMessageParser {
 
             currentAction.content = content;
 
-            this._options.callbacks?.onAction?.({
+            this._options.callbacks?.onActionClose?.({
               artifactId: currentArtifact.id,
               messageId,
-              actionId: String(state.actionId++),
+
+              /**
+               * We decrement the id because it's been incremented already
+               * when `onActionOpen` was emitted to make sure the ids are
+               * the same.
+               */
+              actionId: String(state.actionId - 1),
+
               action: currentAction as BoltAction,
             });
 
@@ -117,31 +124,17 @@ export class StreamingMessageParser {
             const actionEndIndex = input.indexOf('>', actionOpenIndex);
 
             if (actionEndIndex !== -1) {
-              const actionTag = input.slice(actionOpenIndex, actionEndIndex + 1);
-
-              const actionType = this.#extractAttribute(actionTag, 'type') as ActionType;
-
-              const actionAttributes = {
-                type: actionType,
-                content: '',
-              };
-
-              if (actionType === 'file') {
-                const filePath = this.#extractAttribute(actionTag, 'filePath') as string;
-
-                if (!filePath) {
-                  logger.debug('File path not specified');
-                }
-
-                (actionAttributes as FileAction).filePath = filePath;
-              } else if (actionType !== 'shell') {
-                logger.warn(`Unknown action type '${actionType}'`);
-              }
-
-              state.currentAction = actionAttributes as FileAction | ShellAction;
-
               state.insideAction = true;
 
+              state.currentAction = this.#parseActionTag(input, actionOpenIndex, actionEndIndex);
+
+              this._options.callbacks?.onActionOpen?.({
+                artifactId: currentArtifact.id,
+                messageId,
+                actionId: String(state.actionId++),
+                action: state.currentAction as BoltAction,
+              });
+
               i = actionEndIndex + 1;
             } else {
               break;
@@ -241,6 +234,31 @@ export class StreamingMessageParser {
     this.#messages.clear();
   }
 
+  #parseActionTag(input: string, actionOpenIndex: number, actionEndIndex: number) {
+    const actionTag = input.slice(actionOpenIndex, actionEndIndex + 1);
+
+    const actionType = this.#extractAttribute(actionTag, 'type') as ActionType;
+
+    const actionAttributes = {
+      type: actionType,
+      content: '',
+    };
+
+    if (actionType === 'file') {
+      const filePath = this.#extractAttribute(actionTag, 'filePath') as string;
+
+      if (!filePath) {
+        logger.debug('File path not specified');
+      }
+
+      (actionAttributes as FileAction).filePath = filePath;
+    } else if (actionType !== 'shell') {
+      logger.warn(`Unknown action type '${actionType}'`);
+    }
+
+    return actionAttributes as FileAction | ShellAction;
+  }
+
   #extractAttribute(tag: string, attributeName: string): string | undefined {
     const match = tag.match(new RegExp(`${attributeName}="([^"]*)"`, 'i'));
     return match ? match[1] : undefined;

packages/bolt/app/lib/stores/chat.ts

@@ -0,0 +1,5 @@
+import { map } from 'nanostores';
+
+export const chatStore = map({
+  aborted: false,
+});

packages/bolt/app/lib/stores/workbench.ts

@@ -4,25 +4,30 @@ import { unreachable } from '../../utils/unreachable';
 import { ActionRunner } from '../runtime/action-runner';
 import type { ActionCallbackData, ArtifactCallbackData } from '../runtime/message-parser';
 import { webcontainer } from '../webcontainer';
+import { chatStore } from './chat';
 import { PreviewsStore } from './previews';
 
-export type RunningState = BoltAction & {
+const MIN_SPINNER_TIME = 200;
+
+export type BaseActionState = BoltAction & {
   status: 'running' | 'complete' | 'pending' | 'aborted';
+  executing: boolean;
   abort?: () => void;
 };
 
-export type FailedState = BoltAction & {
+export type FailedActionState = BoltAction &
+  Omit<BaseActionState, 'status'> & {
     status: 'failed';
     error: string;
-  abort?: () => void;
+  };
-};
 
-export type ActionState = RunningState | FailedState;
+export type ActionState = BaseActionState | FailedActionState;
+
+type BaseActionUpdate = Partial<Pick<BaseActionState, 'status' | 'executing' | 'abort'>>;
 
 export type ActionStateUpdate =
-  | { status: 'running' | 'complete' | 'pending' | 'aborted'; abort?: () => void }
+  | BaseActionUpdate
-  | { status: 'failed'; error: string; abort?: () => void }
+  | (Omit<BaseActionUpdate, 'status'> & { status: 'failed'; error: string });
-  | { abort?: () => void };
 
 export interface ArtifactState {
   title: string;
@@ -49,6 +54,16 @@ export class WorkbenchStore {
     this.showWorkbench.set(show);
   }
 
+  abortAllActions() {
+    for (const [, artifact] of Object.entries(this.artifacts.get())) {
+      for (const [, action] of Object.entries(artifact.actions.get())) {
+        if (action.status === 'running') {
+          action.abort?.();
+        }
+      }
+    }
+  }
+
   addArtifact({ id, messageId, title }: ArtifactCallbackData) {
     const artifacts = this.artifacts.get();
     const artifactKey = getArtifactKey(id, messageId);
@@ -78,7 +93,7 @@ export class WorkbenchStore {
     this.artifacts.setKey(key, { ...artifact, ...state });
   }
 
-  async runAction(data: ActionCallbackData) {
+  async addAction(data: ActionCallbackData) {
     const { artifactId, messageId, actionId } = data;
 
     const artifacts = this.artifacts.get();
@@ -96,33 +111,70 @@ export class WorkbenchStore {
       return;
     }
 
-    artifact.actions.setKey(actionId, { ...data.action, status: 'pending' });
+    artifact.actions.setKey(actionId, { ...data.action, status: 'pending', executing: false });
 
-    artifact.currentActionPromise = artifact.currentActionPromise.then(async () => {
+    artifact.currentActionPromise.then(() => {
-      try {
+      if (chatStore.get().aborted) {
-        let abortController: AbortController | undefined;
+        return;
-
-        if (data.action.type === 'shell') {
-          abortController = new AbortController();
       }
 
-        let aborted = false;
+      this.#updateAction(key, actionId, { status: 'running' });
+    });
+  }
+
+  async runAction(data: ActionCallbackData) {
+    const { artifactId, messageId, actionId } = data;
+
+    const artifacts = this.artifacts.get();
+    const key = getArtifactKey(artifactId, messageId);
+    const artifact = artifacts[key];
+
+    if (!artifact) {
+      unreachable('Artifact not found');
+    }
+
+    const actions = artifact.actions.get();
+    const action = actions[actionId];
+
+    if (!action) {
+      unreachable('Expected action to exist');
+    }
+
+    if (action.executing || action.status === 'complete' || action.status === 'failed' || action.status === 'aborted') {
+      return;
+    }
+
+    artifact.currentActionPromise = artifact.currentActionPromise.then(async () => {
+      if (chatStore.get().aborted) {
+        return;
+      }
+
+      const abortController = new AbortController();
 
       this.#updateAction(key, actionId, {
         status: 'running',
+        executing: true,
         abort: () => {
-            aborted = true;
+          abortController.abort();
-            abortController?.abort();
+          this.#updateAction(key, actionId, { status: 'aborted' });
         },
       });
 
-        await this.#actionRunner.runAction(data, abortController?.signal);
+      try {
+        await Promise.all([
+          this.#actionRunner.runAction(data, abortController.signal),
+          new Promise((resolve) => setTimeout(resolve, MIN_SPINNER_TIME)),
+        ]);
 
-        this.#updateAction(key, actionId, { status: aborted ? 'aborted' : 'complete' });
+        if (!abortController.signal.aborted) {
+          this.#updateAction(key, actionId, { status: 'complete' });
+        }
       } catch (error) {
         this.#updateAction(key, actionId, { status: 'failed', error: 'Action failed' });
 
         throw error;
+      } finally {
+        this.#updateAction(key, actionId, { executing: false });
       }
     });
   }