Merge branch 'main' into fix/described_by

2024-12-19 18:02:43 +05:30
parent 2064c83177 1d716c0925
commit 3e2fc32a46
62 changed files with 2284 additions and 1711 deletions
--- a/app/lib/.server/llm/api-key.ts
+++ b/app/lib/.server/llm/api-key.ts
@@ -1,4 +1,6 @@
 import { env } from 'node:process';
+import type { IProviderSetting } from '~/types/model';
+import { getProviderBaseUrlAndKey } from '~/utils/constants';

 export function getAPIKey(cloudflareEnv: Env, provider: string, userApiKeys?: Record<string, string>) {
  /**
@@ -11,7 +13,20 @@ export function getAPIKey(cloudflareEnv: Env, provider: string, userApiKeys?: Re
    return userApiKeys[provider];
  }

-  // Fall back to environment variables
+  const { apiKey } = getProviderBaseUrlAndKey({
+    provider,
+    apiKeys: userApiKeys,
+    providerSettings: undefined,
+    serverEnv: cloudflareEnv as any,
+    defaultBaseUrlKey: '',
+    defaultApiTokenKey: '',
+  });
+
+  if (apiKey) {
+    return apiKey;
+  }
+
+  // Fall back to hardcoded  environment variables names
  switch (provider) {
    case 'Anthropic':
      return env.ANTHROPIC_API_KEY || cloudflareEnv.ANTHROPIC_API_KEY;
@@ -35,6 +50,8 @@ export function getAPIKey(cloudflareEnv: Env, provider: string, userApiKeys?: Re
      return env.TOGETHER_API_KEY || cloudflareEnv.TOGETHER_API_KEY;
    case 'xAI':
      return env.XAI_API_KEY || cloudflareEnv.XAI_API_KEY;
+    case 'Perplexity':
+      return env.PERPLEXITY_API_KEY || cloudflareEnv.PERPLEXITY_API_KEY;
    case 'Cohere':
      return env.COHERE_API_KEY;
    case 'AzureOpenAI':
@@ -44,16 +61,43 @@ export function getAPIKey(cloudflareEnv: Env, provider: string, userApiKeys?: Re
  }
 }

-export function getBaseURL(cloudflareEnv: Env, provider: string) {
+export function getBaseURL(cloudflareEnv: Env, provider: string, providerSettings?: Record<string, IProviderSetting>) {
+  const { baseUrl } = getProviderBaseUrlAndKey({
+    provider,
+    apiKeys: {},
+    providerSettings,
+    serverEnv: cloudflareEnv as any,
+    defaultBaseUrlKey: '',
+    defaultApiTokenKey: '',
+  });
+
+  if (baseUrl) {
+    return baseUrl;
+  }
+
+  let settingBaseUrl = providerSettings?.[provider].baseUrl;
+
+  if (settingBaseUrl && settingBaseUrl.length == 0) {
+    settingBaseUrl = undefined;
+  }
+
  switch (provider) {
    case 'Together':
-      return env.TOGETHER_API_BASE_URL || cloudflareEnv.TOGETHER_API_BASE_URL || 'https://api.together.xyz/v1';
+      return (
+        settingBaseUrl ||
+        env.TOGETHER_API_BASE_URL ||
+        cloudflareEnv.TOGETHER_API_BASE_URL ||
+        'https://api.together.xyz/v1'
+      );
    case 'OpenAILike':
-      return env.OPENAI_LIKE_API_BASE_URL || cloudflareEnv.OPENAI_LIKE_API_BASE_URL;
+      return settingBaseUrl || env.OPENAI_LIKE_API_BASE_URL || cloudflareEnv.OPENAI_LIKE_API_BASE_URL;
    case 'LMStudio':
-      return env.LMSTUDIO_API_BASE_URL || cloudflareEnv.LMSTUDIO_API_BASE_URL || 'http://localhost:1234';
+      return (
+        settingBaseUrl || env.LMSTUDIO_API_BASE_URL || cloudflareEnv.LMSTUDIO_API_BASE_URL || 'http://localhost:1234'
+      );
    case 'Ollama': {
-      let baseUrl = env.OLLAMA_API_BASE_URL || cloudflareEnv.OLLAMA_API_BASE_URL || 'http://localhost:11434';
+      let baseUrl =
+        settingBaseUrl || env.OLLAMA_API_BASE_URL || cloudflareEnv.OLLAMA_API_BASE_URL || 'http://localhost:11434';

      if (env.RUNNING_IN_DOCKER === 'true') {
        baseUrl = baseUrl.replace('localhost', 'host.docker.internal');
--- a/app/lib/.server/llm/model.ts
+++ b/app/lib/.server/llm/model.ts
@@ -128,10 +128,19 @@ export function getXAIModel(apiKey: OptionalApiKey, model: string) {
  return openai(model);
 }

+export function getPerplexityModel(apiKey: OptionalApiKey, model: string) {
+  const perplexity = createOpenAI({
+    baseURL: 'https://api.perplexity.ai/',
+    apiKey,
+  });
+
+  return perplexity(model);
+}
+
 export function getModel(
  provider: string,
  model: string,
-  env: Env,
+  serverEnv: Env,
  apiKeys?: Record<string, string>,
  providerSettings?: Record<string, IProviderSetting>,
 ) {
@@ -139,9 +148,12 @@ export function getModel(
   * let apiKey; // Declare first
   * let baseURL;
   */
+  // console.log({provider,model});

-  const apiKey = getAPIKey(env, provider, apiKeys); // Then assign
-  const baseURL = providerSettings?.[provider].baseUrl || getBaseURL(env, provider);
+  const apiKey = getAPIKey(serverEnv, provider, apiKeys); // Then assign
+  const baseURL = getBaseURL(serverEnv, provider, providerSettings);
+
+  // console.log({apiKey,baseURL});

  switch (provider) {
    case 'Anthropic':
@@ -170,6 +182,8 @@ export function getModel(
      return getXAIModel(apiKey, model);
    case 'Cohere':
      return getCohereAIModel(apiKey, model);
+    case 'Perplexity':
+      return getPerplexityModel(apiKey, model);
    default:
      return getOllamaModel(baseURL, model);
  }
--- a/app/lib/.server/llm/stream-text.ts
+++ b/app/lib/.server/llm/stream-text.ts
@@ -1,10 +1,20 @@
 import { convertToCoreMessages, streamText as _streamText } from 'ai';
 import { getModel } from '~/lib/.server/llm/model';
 import { MAX_TOKENS } from './constants';
-import { getSystemPrompt } from './prompts';
-import { DEFAULT_MODEL, DEFAULT_PROVIDER, getModelList, MODEL_REGEX, PROVIDER_REGEX } from '~/utils/constants';
+import { getSystemPrompt } from '~/lib/common/prompts/prompts';
+import {
+  DEFAULT_MODEL,
+  DEFAULT_PROVIDER,
+  getModelList,
+  MODEL_REGEX,
+  MODIFICATIONS_TAG_NAME,
+  PROVIDER_REGEX,
+  WORK_DIR,
+} from '~/utils/constants';
 import ignore from 'ignore';
 import type { IProviderSetting } from '~/types/model';
+import { PromptLibrary } from '~/lib/common/prompt-library';
+import { allowedHTMLElements } from '~/utils/markdown';

 interface ToolResult<Name extends string, Args, Result> {
  toolCallId: string;
@@ -139,11 +149,15 @@ export async function streamText(props: {
  apiKeys?: Record<string, string>;
  files?: FileMap;
  providerSettings?: Record<string, IProviderSetting>;
+  promptId?: string;
 }) {
-  const { messages, env, options, apiKeys, files, providerSettings } = props;
+  const { messages, env: serverEnv, options, apiKeys, files, providerSettings, promptId } = props;
+
+  // console.log({serverEnv});
+
  let currentModel = DEFAULT_MODEL;
  let currentProvider = DEFAULT_PROVIDER.name;
-  const MODEL_LIST = await getModelList(apiKeys || {}, providerSettings);
+  const MODEL_LIST = await getModelList({ apiKeys, providerSettings, serverEnv: serverEnv as any });
  const processedMessages = messages.map((message) => {
    if (message.role === 'user') {
      const { model, provider, content } = extractPropertiesFromMessage(message);
@@ -170,16 +184,22 @@ export async function streamText(props: {

  const dynamicMaxTokens = modelDetails && modelDetails.maxTokenAllowed ? modelDetails.maxTokenAllowed : MAX_TOKENS;

-  let systemPrompt = getSystemPrompt();
+  let systemPrompt =
+    PromptLibrary.getPropmtFromLibrary(promptId || 'default', {
+      cwd: WORK_DIR,
+      allowedHtmlElements: allowedHTMLElements,
+      modificationTagName: MODIFICATIONS_TAG_NAME,
+    }) ?? getSystemPrompt();
  let codeContext = '';

  if (files) {
    codeContext = createFilesContext(files);
+    codeContext = '';
    systemPrompt = `${systemPrompt}\n\n ${codeContext}`;
  }

  return _streamText({
-    model: getModel(currentProvider, currentModel, env, apiKeys, providerSettings) as any,
+    model: getModel(currentProvider, currentModel, serverEnv, apiKeys, providerSettings) as any,
    system: systemPrompt,
    maxTokens: dynamicMaxTokens,
    messages: convertToCoreMessages(processedMessages as any),
--- a/app/lib/common/prompt-library.ts
+++ b/app/lib/common/prompt-library.ts
@@ -0,0 +1,49 @@
+import { getSystemPrompt } from './prompts/prompts';
+import optimized from './prompts/optimized';
+
+export interface PromptOptions {
+  cwd: string;
+  allowedHtmlElements: string[];
+  modificationTagName: string;
+}
+
+export class PromptLibrary {
+  static library: Record<
+    string,
+    {
+      label: string;
+      description: string;
+      get: (options: PromptOptions) => string;
+    }
+  > = {
+    default: {
+      label: 'Default Prompt',
+      description: 'This is the battle tested default system Prompt',
+      get: (options) => getSystemPrompt(options.cwd),
+    },
+    optimized: {
+      label: 'Optimized Prompt (experimental)',
+      description: 'an Experimental version of the prompt for lower token usage',
+      get: (options) => optimized(options),
+    },
+  };
+  static getList() {
+    return Object.entries(this.library).map(([key, value]) => {
+      const { label, description } = value;
+      return {
+        id: key,
+        label,
+        description,
+      };
+    });
+  }
+  static getPropmtFromLibrary(promptId: string, options: PromptOptions) {
+    const prompt = this.library[promptId];
+
+    if (!prompt) {
+      throw 'Prompt Now Found';
+    }
+
+    return this.library[promptId]?.get(options);
+  }
+}
--- a/app/lib/common/prompts/optimized.ts
+++ b/app/lib/common/prompts/optimized.ts
@@ -0,0 +1,199 @@
+import type { PromptOptions } from '~/lib/common/prompt-library';
+
+export default (options: PromptOptions) => {
+  const { cwd, allowedHtmlElements, modificationTagName } = options;
+  return `
+You are Bolt, an expert AI assistant and exceptional senior software developer with vast knowledge across multiple programming languages, frameworks, and best practices.
+
+<system_constraints>
+  - Operating in WebContainer, an in-browser Node.js runtime
+  - Limited Python support: standard library only, no pip
+  - No C/C++ compiler, native binaries, or Git
+  - Prefer Node.js scripts over shell scripts
+  - Use Vite for web servers
+  - Databases: prefer libsql, sqlite, or non-native solutions
+  - When for react dont forget to write vite config and index.html to the project
+
+  Available shell commands: cat, cp, ls, mkdir, mv, rm, rmdir, touch, hostname, ps, pwd, uptime, env, node, python3, code, jq, curl, head, sort, tail, clear, which, export, chmod, scho, kill, ln, xxd, alias, getconf, loadenv, wasm, xdg-open, command, exit, source
+</system_constraints>
+
+<code_formatting_info>
+  Use 2 spaces for indentation
+</code_formatting_info>
+
+<message_formatting_info>
+  Available HTML elements: ${allowedHtmlElements.join(', ')}
+</message_formatting_info>
+
+<diff_spec>
+  File modifications in \`<${modificationTagName}>\` section:
+  - \`<diff path="/path/to/file">\`: GNU unified diff format
+  - \`<file path="/path/to/file">\`: Full new content
+</diff_spec>
+
+<chain_of_thought_instructions>
+  do not mention the phrase "chain of thought"
+  Before solutions, briefly outline implementation steps (2-4 lines max):
+  - List concrete steps
+  - Identify key components
+  - Note potential challenges
+  - Do not write the actual code just the plan and structure if needed 
+  - Once completed planning start writing the artifacts
+</chain_of_thought_instructions>
+
+<artifact_info>
+  Create a single, comprehensive artifact for each project:
+  - Use \`<boltArtifact>\` tags with \`title\` and \`id\` attributes
+  - Use \`<boltAction>\` tags with \`type\` attribute:
+    - shell: Run commands
+    - file: Write/update files (use \`filePath\` attribute)
+    - start: Start dev server (only when necessary)
+  - Order actions logically
+  - Install dependencies first
+  - Provide full, updated content for all files
+  - Use coding best practices: modular, clean, readable code
+</artifact_info>
+
+
+# CRITICAL RULES - NEVER IGNORE
+
+## File and Command Handling
+1. ALWAYS use artifacts for file contents and commands - NO EXCEPTIONS
+2. When writing a file, INCLUDE THE ENTIRE FILE CONTENT - NO PARTIAL UPDATES
+3. For modifications, ONLY alter files that require changes - DO NOT touch unaffected files
+
+## Response Format
+4. Use markdown EXCLUSIVELY - HTML tags are ONLY allowed within artifacts
+5. Be concise - Explain ONLY when explicitly requested
+6. NEVER use the word "artifact" in responses
+
+## Development Process
+7. ALWAYS think and plan comprehensively before providing a solution
+8. Current working directory: \`${cwd} \` - Use this for all file paths
+9. Don't use cli scaffolding to steup the project, use cwd as Root of the project
+11. For nodejs projects ALWAYS install dependencies after writing package.json file
+
+## Coding Standards
+10. ALWAYS create smaller, atomic components and modules
+11. Modularity is PARAMOUNT - Break down functionality into logical, reusable parts
+12. IMMEDIATELY refactor any file exceeding 250 lines
+13. ALWAYS plan refactoring before implementation - Consider impacts on the entire system
+
+## Artifact Usage
+22. Use \`<boltArtifact>\` tags with \`title\` and \`id\` attributes for each project
+23. Use \`<boltAction>\` tags with appropriate \`type\` attribute:
+    - \`shell\`: For running commands
+    - \`file\`: For writing/updating files (include \`filePath\` attribute)
+    - \`start\`: For starting dev servers (use only when necessary/ or new dependencies are installed)
+24. Order actions logically - dependencies MUST be installed first
+25. For Vite project must include vite config and index.html for entry point
+26. Provide COMPLETE, up-to-date content for all files - NO placeholders or partial updates
+
+CRITICAL: These rules are ABSOLUTE and MUST be followed WITHOUT EXCEPTION in EVERY response.
+
+Examples:
+<examples>
+  <example>
+    <user_query>Can you help me create a JavaScript function to calculate the factorial of a number?</user_query>
+    <assistant_response>
+      Certainly, I can help you create a JavaScript function to calculate the factorial of a number.
+
+      <boltArtifact id="factorial-function" title="JavaScript Factorial Function">
+        <boltAction type="file" filePath="index.js">
+function factorial(n) {
+  ...
+}
+
+...
+        </boltAction>
+        <boltAction type="shell">
+node index.js
+        </boltAction>
+      </boltArtifact>
+    </assistant_response>
+  </example>
+
+  <example>
+    <user_query>Build a snake game</user_query>
+    <assistant_response>
+      Certainly! I'd be happy to help you build a snake game using JavaScript and HTML5 Canvas. This will be a basic implementation that you can later expand upon. Let's create the game step by step.
+
+      <boltArtifact id="snake-game" title="Snake Game in HTML and JavaScript">
+        <boltAction type="file" filePath="package.json">
+{
+  "name": "snake",
+  "scripts": {
+    "dev": "vite"
+  }
+  ...
+}
+        </boltAction>
+        <boltAction type="shell">
+npm install --save-dev vite
+        </boltAction>
+        <boltAction type="file" filePath="index.html">
+...
+        </boltAction>
+        <boltAction type="start">
+npm run dev
+        </boltAction>
+      </boltArtifact>
+
+      Now you can play the Snake game by opening the provided local server URL in your browser. Use the arrow keys to control the snake. Eat the red food to grow and increase your score. The game ends if you hit the wall or your own tail.
+    </assistant_response>
+  </example>
+
+  <example>
+    <user_query>Make a bouncing ball with real gravity using React</user_query>
+    <assistant_response>
+      Certainly! I'll create a bouncing ball with real gravity using React. We'll use the react-spring library for physics-based animations.
+
+      <boltArtifact id="bouncing-ball-react" title="Bouncing Ball with Gravity in React">
+        <boltAction type="file" filePath="package.json">
+{
+  "name": "bouncing-ball",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-spring": "^9.7.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "@vitejs/plugin-react": "^3.1.0",
+    "vite": "^4.2.0"
+  }
+}
+        </boltAction>
+        <boltAction type="file" filePath="index.html">
+...
+        </boltAction>
+        <boltAction type="file" filePath="src/main.jsx">
+...
+        </boltAction>
+        <boltAction type="file" filePath="src/index.css">
+...
+        </boltAction>
+        <boltAction type="file" filePath="src/App.jsx">
+...
+        </boltAction>
+        <boltAction type="start">
+npm run dev
+        </boltAction>
+      </boltArtifact>
+
+      You can now view the bouncing ball animation in the preview. The ball will start falling from the top of the screen and bounce realistically when it hits the bottom.
+    </assistant_response>
+  </example>
+</examples>
+Always use artifacts for file contents and commands, following the format shown in these examples.
+`;
+};
--- a/app/lib/common/prompts/prompts.ts
+++ b/app/lib/common/prompts/prompts.ts
--- a/app/lib/hooks/useEditChatDescription.ts
+++ b/app/lib/hooks/useEditChatDescription.ts
@@ -92,7 +92,9 @@ export function useEditChatDescription({
    }

    const lengthValid = trimmedDesc.length > 0 && trimmedDesc.length <= 100;
-    const characterValid = /^[a-zA-Z0-9\s]+$/.test(trimmedDesc);
+
+    // Allow letters, numbers, spaces, and common punctuation but exclude characters that could cause issues
+    const characterValid = /^[a-zA-Z0-9\s\-_.,!?()[\]{}'"]+$/.test(trimmedDesc);

    if (!lengthValid) {
      toast.error('Description must be between 1 and 100 characters.');
@@ -100,7 +102,7 @@ export function useEditChatDescription({
    }

    if (!characterValid) {
-      toast.error('Description can only contain alphanumeric characters and spaces.');
+      toast.error('Description can only contain letters, numbers, spaces, and basic punctuation.');
      return false;
    }

--- a/app/lib/hooks/useSettings.tsx
+++ b/app/lib/hooks/useSettings.tsx
@@ -4,20 +4,53 @@ import {
  isEventLogsEnabled,
  isLocalModelsEnabled,
  LOCAL_PROVIDERS,
+  promptStore,
  providersStore,
+  latestBranchStore,
 } from '~/lib/stores/settings';
 import { useCallback, useEffect, useState } from 'react';
 import Cookies from 'js-cookie';
 import type { IProviderSetting, ProviderInfo } from '~/types/model';
 import { logStore } from '~/lib/stores/logs'; // assuming logStore is imported from this location
+import commit from '~/commit.json';
+
+interface CommitData {
+  commit: string;
+  version?: string;
+}
+
+const commitJson: CommitData = commit;

 export function useSettings() {
  const providers = useStore(providersStore);
  const debug = useStore(isDebugMode);
  const eventLogs = useStore(isEventLogsEnabled);
+  const promptId = useStore(promptStore);
  const isLocalModel = useStore(isLocalModelsEnabled);
+  const isLatestBranch = useStore(latestBranchStore);
  const [activeProviders, setActiveProviders] = useState<ProviderInfo[]>([]);

+  // Function to check if we're on stable version
+  const checkIsStableVersion = async () => {
+    try {
+      const stableResponse = await fetch(
+        `https://raw.githubusercontent.com/stackblitz-labs/bolt.diy/refs/tags/v${commitJson.version}/app/commit.json`,
+      );
+
+      if (!stableResponse.ok) {
+        console.warn('Failed to fetch stable commit info');
+        return false;
+      }
+
+      const stableData = (await stableResponse.json()) as CommitData;
+
+      return commit.commit === stableData.commit;
+    } catch (error) {
+      console.warn('Error checking stable version:', error);
+      return false;
+    }
+  };
+
  // reading values from cookies on mount
  useEffect(() => {
    const savedProviders = Cookies.get('providers');
@@ -60,6 +93,32 @@ export function useSettings() {
    if (savedLocalModels) {
      isLocalModelsEnabled.set(savedLocalModels === 'true');
    }
+
+    const promptId = Cookies.get('promptId');
+
+    if (promptId) {
+      promptStore.set(promptId);
+    }
+
+    // load latest branch setting from cookies or determine based on version
+    const savedLatestBranch = Cookies.get('isLatestBranch');
+    let checkCommit = Cookies.get('commitHash');
+
+    if (checkCommit === undefined) {
+      checkCommit = commit.commit;
+    }
+
+    if (savedLatestBranch === undefined || checkCommit !== commit.commit) {
+      // If setting hasn't been set by user, check version
+      checkIsStableVersion().then((isStable) => {
+        const shouldUseLatest = !isStable;
+        latestBranchStore.set(shouldUseLatest);
+        Cookies.set('isLatestBranch', String(shouldUseLatest));
+        Cookies.set('commitHash', String(commit.commit));
+      });
+    } else {
+      latestBranchStore.set(savedLatestBranch === 'true');
+    }
  }, []);

  // writing values to cookies on change
@@ -111,6 +170,16 @@ export function useSettings() {
    Cookies.set('isLocalModelsEnabled', String(enabled));
  }, []);

+  const setPromptId = useCallback((promptId: string) => {
+    promptStore.set(promptId);
+    Cookies.set('promptId', promptId);
+  }, []);
+  const enableLatestBranch = useCallback((enabled: boolean) => {
+    latestBranchStore.set(enabled);
+    logStore.logSystem(`Main branch updates ${enabled ? 'enabled' : 'disabled'}`);
+    Cookies.set('isLatestBranch', String(enabled));
+  }, []);
+
  return {
    providers,
    activeProviders,
@@ -121,5 +190,9 @@ export function useSettings() {
    enableEventLogs,
    isLocalModel,
    enableLocalModels,
+    promptId,
+    setPromptId,
+    isLatestBranch,
+    enableLatestBranch,
  };
 }
--- a/app/lib/runtime/action-runner.ts
+++ b/app/lib/runtime/action-runner.ts
@@ -202,8 +202,9 @@ export class ActionRunner {
    }

    const webcontainer = await this.#webcontainer;
+    const relativePath = nodePath.relative(webcontainer.workdir, action.filePath);

-    let folder = nodePath.dirname(action.filePath);
+    let folder = nodePath.dirname(relativePath);

    // remove trailing slashes
    folder = folder.replace(/\/+$/g, '');
@@ -218,8 +219,8 @@ export class ActionRunner {
    }

    try {
-      await webcontainer.fs.writeFile(action.filePath, action.content);
-      logger.debug(`File written ${action.filePath}`);
+      await webcontainer.fs.writeFile(relativePath, action.content);
+      logger.debug(`File written ${relativePath}`);
    } catch (error) {
      logger.error('Failed to write file\n\n', error);
    }
--- a/app/lib/stores/settings.ts
+++ b/app/lib/stores/settings.ts
@@ -46,3 +46,7 @@ export const isDebugMode = atom(false);
 export const isEventLogsEnabled = atom(false);

 export const isLocalModelsEnabled = atom(true);
+
+export const promptStore = atom<string>('default');
+
+export const latestBranchStore = atom(false);
--- a/app/lib/stores/workbench.ts
+++ b/app/lib/stores/workbench.ts
@@ -16,6 +16,7 @@ import * as nodePath from 'node:path';
 import { extractRelativePath } from '~/utils/diff';
 import { description } from '~/lib/persistence';
 import Cookies from 'js-cookie';
+import { createSampler } from '~/utils/sampler';

 export interface ArtifactState {
  id: string;
@@ -280,7 +281,7 @@ export class WorkbenchStore {

  runAction(data: ActionCallbackData, isStreaming: boolean = false) {
    if (isStreaming) {
-      this._runAction(data, isStreaming);
+      this.actionStreamSampler(data, isStreaming);
    } else {
      this.addToExecutionQueue(() => this._runAction(data, isStreaming));
    }
@@ -296,7 +297,7 @@ export class WorkbenchStore {

    const action = artifact.runner.actions.get()[data.actionId];

-    if (action.executed) {
+    if (!action || action.executed) {
      return;
    }

@@ -329,6 +330,10 @@ export class WorkbenchStore {
    }
  }

+  actionStreamSampler = createSampler(async (data: ActionCallbackData, isStreaming: boolean = false) => {
+    return await this._runAction(data, isStreaming);
+  }, 100); // TODO: remove this magic number to have it configurable
+
  #getArtifact(id: string) {
    const artifacts = this.artifacts.get();
    return artifacts[id];