Upload 289 files

.dockerignore

@@ -0,0 +1,26 @@
+# Ignore Git and GitHub files
+.git
+.github/
+
+# Ignore Husky configuration files
+.husky/
+
+# Ignore documentation and metadata files
+CONTRIBUTING.md
+LICENSE
+README.md
+
+# Ignore environment examples and sensitive info
+.env
+*.local
+*.example
+
+# Ignore node modules, logs and cache files
+**/*.log
+**/node_modules
+**/dist
+**/build
+**/.cache
+logs
+dist-ssr
+.DS_Store

.editorconfig

@@ -0,0 +1,13 @@
+root = true
+
+[*]
+indent_style = space
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+max_line_length = 120
+indent_size = 2
+
+[*.md]
+trim_trailing_whitespace = false

.env.example

@@ -0,0 +1,95 @@
+# Rename this file to .env once you have filled in the below environment variables!
+
+# Get your GROQ API Key here -
+# https://console.groq.com/keys
+# You only need this environment variable set if you want to use Groq models
+GROQ_API_KEY=
+
+# Get your HuggingFace API Key here -
+# https://huggingface.co/settings/tokens
+# You only need this environment variable set if you want to use HuggingFace models
+HuggingFace_API_KEY=
+
+
+# Get your Open AI API Key by following these instructions -
+# https://help.openai.com/en/articles/4936850-where-do-i-find-my-openai-api-key
+# You only need this environment variable set if you want to use GPT models
+OPENAI_API_KEY=
+
+# Get your Anthropic API Key in your account settings -
+# https://console.anthropic.com/settings/keys
+# You only need this environment variable set if you want to use Claude models
+ANTHROPIC_API_KEY=
+
+# Get your OpenRouter API Key in your account settings -
+# https://openrouter.ai/settings/keys
+# You only need this environment variable set if you want to use OpenRouter models
+OPEN_ROUTER_API_KEY=
+
+# Get your Google Generative AI API Key by following these instructions -
+# https://console.cloud.google.com/apis/credentials
+# You only need this environment variable set if you want to use Google Generative AI models
+GOOGLE_GENERATIVE_AI_API_KEY=
+
+# You only need this environment variable set if you want to use oLLAMA models
+# DONT USE http://localhost:11434 due to IPV6 issues
+# USE EXAMPLE http://127.0.0.1:11434
+OLLAMA_API_BASE_URL=
+
+# You only need this environment variable set if you want to use OpenAI Like models
+OPENAI_LIKE_API_BASE_URL=
+
+# You only need this environment variable set if you want to use Together AI models
+TOGETHER_API_BASE_URL=
+
+# You only need this environment variable set if you want to use DeepSeek models through their API
+DEEPSEEK_API_KEY=
+
+# Get your OpenAI Like API Key
+OPENAI_LIKE_API_KEY=
+
+# Get your Together API Key
+TOGETHER_API_KEY=
+
+# You only need this environment variable set if you want to use Hyperbolic models
+#Get your Hyperbolics API Key at https://app.hyperbolic.xyz/settings
+#baseURL="https://api.hyperbolic.xyz/v1/chat/completions"
+HYPERBOLIC_API_KEY=
+HYPERBOLIC_API_BASE_URL= 
+
+# Get your Mistral API Key by following these instructions -
+# https://console.mistral.ai/api-keys/
+# You only need this environment variable set if you want to use Mistral models
+MISTRAL_API_KEY=
+
+# Get the Cohere Api key by following these instructions -
+# https://dashboard.cohere.com/api-keys
+# You only need this environment variable set if you want to use Cohere models
+COHERE_API_KEY=
+
+# Get LMStudio Base URL from LM Studio Developer Console
+# Make sure to enable CORS
+# DONT USE http://localhost:1234 due to IPV6 issues
+# Example: http://127.0.0.1:1234
+LMSTUDIO_API_BASE_URL=
+
+# Get your xAI API key
+# https://x.ai/api
+# You only need this environment variable set if you want to use xAI models
+XAI_API_KEY=
+
+# Get your Perplexity API Key here - 
+# https://www.perplexity.ai/settings/api
+# You only need this environment variable set if you want to use Perplexity models
+PERPLEXITY_API_KEY=
+
+# Include this environment variable if you want more logging for debugging locally
+VITE_LOG_LEVEL=debug
+
+# Example Context Values for qwen2.5-coder:32b
+# 
+# DEFAULT_NUM_CTX=32768 # Consumes 36GB of VRAM
+# DEFAULT_NUM_CTX=24576 # Consumes 32GB of VRAM
+# DEFAULT_NUM_CTX=12288 # Consumes 26GB of VRAM
+# DEFAULT_NUM_CTX=6144 # Consumes 24GB of VRAM
+DEFAULT_NUM_CTX=

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -0,0 +1,73 @@
+name: "Bug report"
+description: Create a report to help us improve
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Thank you for reporting an issue :pray:.
+
+        This issue tracker is for bugs and issues found with [Bolt.new](https://bolt.new).
+        If you experience issues related to WebContainer, please file an issue in our [WebContainer repo](https://github.com/stackblitz/webcontainer-core), or file an issue in our [StackBlitz core repo](https://github.com/stackblitz/core) for issues with StackBlitz.
+
+        The more information you fill in, the better we can help you.
+  - type: textarea
+    id: description
+    attributes:
+      label: Describe the bug
+      description: Provide a clear and concise description of what you're running into.
+    validations:
+      required: true
+  - type: input
+    id: link
+    attributes:
+      label: Link to the Bolt URL that caused the error
+      description: Please do not delete it after reporting!
+    validations:
+      required: true
+  - type: textarea
+    id: steps
+    attributes:
+      label: Steps to reproduce
+      description: Describe the steps we have to take to reproduce the behavior.
+      placeholder: |
+        1. Go to '...'
+        2. Click on '....'
+        3. Scroll down to '....'
+        4. See error
+    validations:
+      required: true
+  - type: textarea
+    id: expected
+    attributes:
+      label: Expected behavior
+      description: Provide a clear and concise description of what you expected to happen.
+    validations:
+      required: true
+  - type: textarea
+    id: screenshots
+    attributes:
+      label: Screen Recording / Screenshot
+      description: If applicable, **please include a screen recording** (preferably) or screenshot showcasing the issue. This will assist us in resolving your issue <u>quickly</u>.
+  - type: textarea
+    id: platform
+    attributes:
+      label: Platform
+      value: |
+        - OS: [e.g. macOS, Windows, Linux]
+        - Browser: [e.g. Chrome, Safari, Firefox]
+        - Version: [e.g. 91.1]
+  - type: input
+    id: provider
+    attributes:
+      label: Provider Used
+      description: Tell us the provider you are using.
+  - type: input
+    id: model
+    attributes:
+      label: Model Used
+      description: Tell us the model you are using.
+  - type: textarea
+    id: additional
+    attributes:
+      label: Additional context
+      description: Add any other context about the problem here.

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,8 @@
+blank_issues_enabled: false
+contact_links:
+  - name: Bolt.new related issues
+    url: https://github.com/stackblitz/bolt.new/issues/new/choose
+    about: Report issues related to Bolt.new (not Bolt.diy)
+  - name: Chat
+    url: https://thinktank.ottomator.ai
+    about: Ask questions and discuss with other Bolt.diy users.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,23 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: ''
+assignees: ''
+---
+
+**Is your feature request related to a problem? Please describe:**
+
+<!-- A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] -->
+
+**Describe the solution you'd like:**
+
+<!-- A clear and concise description of what you want to happen. -->
+
+**Describe alternatives you've considered:**
+
+<!-- A clear and concise description of any alternative solutions or features you've considered. -->
+
+**Additional context:**
+
+<!-- Add any other context or screenshots about the feature request here. -->

.github/actions/setup-and-build/action.yaml

@@ -0,0 +1,32 @@
+name: Setup and Build
+description: Generic setup action
+inputs:
+  pnpm-version:
+    required: false
+    type: string
+    default: '9.4.0'
+  node-version:
+    required: false
+    type: string
+    default: '20.15.1'
+
+runs:
+  using: composite
+
+  steps:
+    - uses: pnpm/action-setup@v4
+      with:
+        version: ${{ inputs.pnpm-version }}
+        run_install: false
+
+    - name: Set Node.js version to ${{ inputs.node-version }}
+      uses: actions/setup-node@v4
+      with:
+        node-version: ${{ inputs.node-version }}
+        cache: pnpm
+
+    - name: Install dependencies and build project
+      shell: bash
+      run: |
+        pnpm install
+        pnpm run build

.github/scripts/generate-changelog.sh

@@ -0,0 +1,261 @@
+#!/usr/bin/env bash
+
+# Ensure we're running in bash
+if [ -z "$BASH_VERSION" ]; then
+    echo "This script requires bash. Please run with: bash $0" >&2
+    exit 1
+fi
+
+# Ensure we're using bash 4.0 or later for associative arrays
+if ((BASH_VERSINFO[0] < 4)); then
+    echo "This script requires bash version 4 or later" >&2
+    echo "Current bash version: $BASH_VERSION" >&2
+    exit 1
+fi
+
+# Set default values for required environment variables if not in GitHub Actions
+if [ -z "$GITHUB_ACTIONS" ]; then
+    : "${GITHUB_SERVER_URL:=https://github.com}"
+    : "${GITHUB_REPOSITORY:=stackblitz-labs/bolt.diy}"
+    : "${GITHUB_OUTPUT:=/tmp/github_output}"
+    touch "$GITHUB_OUTPUT"
+
+    # Running locally
+    echo "Running locally - checking for upstream remote..."
+    MAIN_REMOTE="origin"
+    if git remote -v | grep -q "upstream"; then
+        MAIN_REMOTE="upstream"
+    fi
+    MAIN_BRANCH="main"  # or "master" depending on your repository
+    
+    # Ensure we have latest tags
+    git fetch ${MAIN_REMOTE} --tags
+    
+    # Use the remote reference for git log
+    GITLOG_REF="${MAIN_REMOTE}/${MAIN_BRANCH}"
+else
+    # Running in GitHub Actions
+    GITLOG_REF="HEAD"
+fi
+
+# Get the latest tag
+LATEST_TAG=$(git describe --tags --abbrev=0 2>/dev/null || echo "")
+
+# Start changelog file
+echo "# 🚀 Release v${NEW_VERSION}" > changelog.md
+echo "" >> changelog.md
+echo "## What's Changed 🌟" >> changelog.md
+echo "" >> changelog.md
+
+if [ -z "$LATEST_TAG" ]; then
+    echo "### 🎉 First Release" >> changelog.md
+    echo "" >> changelog.md
+    echo "Exciting times! This marks our first release. Thanks to everyone who contributed! 🙌" >> changelog.md
+    echo "" >> changelog.md
+    COMPARE_BASE="$(git rev-list --max-parents=0 HEAD)"
+else
+    echo "### 🔄 Changes since $LATEST_TAG" >> changelog.md
+    echo "" >> changelog.md
+    COMPARE_BASE="$LATEST_TAG"
+fi
+
+# Function to extract conventional commit type and associated emoji
+get_commit_type() {
+    local msg="$1"
+    if [[ $msg =~ ^feat(\(.+\))?:|^feature(\(.+\))?: ]]; then echo "✨ Features"
+    elif [[ $msg =~ ^fix(\(.+\))?: ]]; then echo "🐛 Bug Fixes"
+    elif [[ $msg =~ ^docs(\(.+\))?: ]]; then echo "📚 Documentation"
+    elif [[ $msg =~ ^style(\(.+\))?: ]]; then echo "💎 Styles"
+    elif [[ $msg =~ ^refactor(\(.+\))?: ]]; then echo "♻️ Code Refactoring"
+    elif [[ $msg =~ ^perf(\(.+\))?: ]]; then echo "⚡ Performance Improvements"
+    elif [[ $msg =~ ^test(\(.+\))?: ]]; then echo "🧪 Tests"
+    elif [[ $msg =~ ^build(\(.+\))?: ]]; then echo "🛠️ Build System"
+    elif [[ $msg =~ ^ci(\(.+\))?: ]]; then echo "⚙️ CI"
+    elif [[ $msg =~ ^chore(\(.+\))?: ]]; then echo ""  # Skip chore commits
+    else echo "🔍 Other Changes"  # Default category with emoji
+    fi
+}
+
+# Initialize associative arrays
+declare -A CATEGORIES
+declare -A COMMITS_BY_CATEGORY
+declare -A ALL_AUTHORS
+declare -A NEW_CONTRIBUTORS
+
+# Get all historical authors before the compare base
+while IFS= read -r author; do
+    ALL_AUTHORS["$author"]=1
+done < <(git log "${COMPARE_BASE}" --pretty=format:"%ae" | sort -u)
+
+# Process all commits since last tag
+while IFS= read -r commit_line; do
+    if [[ ! $commit_line =~ ^[a-f0-9]+\| ]]; then
+        echo "WARNING: Skipping invalid commit line format: $commit_line" >&2
+        continue
+    fi
+    
+    HASH=$(echo "$commit_line" | cut -d'|' -f1)
+    COMMIT_MSG=$(echo "$commit_line" | cut -d'|' -f2)
+    BODY=$(echo "$commit_line" | cut -d'|' -f3)
+    # Skip if hash doesn't match the expected format
+    if [[ ! $HASH =~ ^[a-f0-9]{40}$ ]]; then
+        continue
+    fi
+
+    HASH=$(echo "$commit_line" | cut -d'|' -f1)
+    COMMIT_MSG=$(echo "$commit_line" | cut -d'|' -f2)
+    BODY=$(echo "$commit_line" | cut -d'|' -f3)
+
+    
+    # Validate hash format
+    if [[ ! $HASH =~ ^[a-f0-9]{40}$ ]]; then
+        echo "WARNING: Invalid commit hash format: $HASH" >&2
+        continue
+    fi
+    
+    # Check if it's a merge commit
+    if [[ $COMMIT_MSG =~ Merge\ pull\ request\ #([0-9]+) ]]; then
+        # echo "Processing as merge commit" >&2
+        PR_NUM="${BASH_REMATCH[1]}"
+        
+        # Extract the PR title from the merge commit body
+        PR_TITLE=$(echo "$BODY" | grep -v "^Merge pull request" | head -n 1)
+        
+        # Only process if it follows conventional commit format
+        CATEGORY=$(get_commit_type "$PR_TITLE")
+        
+        if [ -n "$CATEGORY" ]; then  # Only process if it's a conventional commit
+            # Get PR author's GitHub username
+            GITHUB_USERNAME=$(gh pr view "$PR_NUM" --json author --jq '.author.login')
+            
+            if [ -n "$GITHUB_USERNAME" ]; then
+                # Check if this is a first-time contributor
+                AUTHOR_EMAIL=$(git show -s --format='%ae' "$HASH")
+                if [ -z "${ALL_AUTHORS[$AUTHOR_EMAIL]}" ]; then
+                    NEW_CONTRIBUTORS["$GITHUB_USERNAME"]=1
+                    ALL_AUTHORS["$AUTHOR_EMAIL"]=1
+                fi
+
+                CATEGORIES["$CATEGORY"]=1
+                COMMITS_BY_CATEGORY["$CATEGORY"]+="* ${PR_TITLE#*: } ([#$PR_NUM](${GITHUB_SERVER_URL}/${GITHUB_REPOSITORY}/pull/$PR_NUM)) by @$GITHUB_USERNAME"$'\n'
+            else
+                COMMITS_BY_CATEGORY["$CATEGORY"]+="* ${PR_TITLE#*: } ([#$PR_NUM](${GITHUB_SERVER_URL}/${GITHUB_REPOSITORY}/pull/$PR_NUM))"$'\n'
+            fi
+        fi
+    # Check if it's a squash merge by looking for (#NUMBER) pattern
+    elif [[ $COMMIT_MSG =~ \(#([0-9]+)\) ]]; then
+        # echo "Processing as squash commit" >&2
+        PR_NUM="${BASH_REMATCH[1]}"
+        
+        # Only process if it follows conventional commit format
+        CATEGORY=$(get_commit_type "$COMMIT_MSG")
+        
+        if [ -n "$CATEGORY" ]; then  # Only process if it's a conventional commit
+            # Get PR author's GitHub username
+            GITHUB_USERNAME=$(gh pr view "$PR_NUM" --json author --jq '.author.login')
+            
+            if [ -n "$GITHUB_USERNAME" ]; then
+                # Check if this is a first-time contributor
+                AUTHOR_EMAIL=$(git show -s --format='%ae' "$HASH")
+                if [ -z "${ALL_AUTHORS[$AUTHOR_EMAIL]}" ]; then
+                    NEW_CONTRIBUTORS["$GITHUB_USERNAME"]=1
+                    ALL_AUTHORS["$AUTHOR_EMAIL"]=1
+                fi
+
+                CATEGORIES["$CATEGORY"]=1
+                COMMIT_TITLE=${COMMIT_MSG%% (#*}  # Remove the PR number suffix
+                COMMIT_TITLE=${COMMIT_TITLE#*: }  # Remove the type prefix
+                COMMITS_BY_CATEGORY["$CATEGORY"]+="* $COMMIT_TITLE ([#$PR_NUM](${GITHUB_SERVER_URL}/${GITHUB_REPOSITORY}/pull/$PR_NUM)) by @$GITHUB_USERNAME"$'\n'
+            else
+                COMMIT_TITLE=${COMMIT_MSG%% (#*}  # Remove the PR number suffix
+                COMMIT_TITLE=${COMMIT_TITLE#*: }  # Remove the type prefix
+                COMMITS_BY_CATEGORY["$CATEGORY"]+="* $COMMIT_TITLE ([#$PR_NUM](${GITHUB_SERVER_URL}/${GITHUB_REPOSITORY}/pull/$PR_NUM))"$'\n'
+            fi
+        fi
+    
+    else 
+        # echo "Processing as regular commit" >&2
+        # Process conventional commits without PR numbers
+        CATEGORY=$(get_commit_type "$COMMIT_MSG")
+        
+        if [ -n "$CATEGORY" ]; then  # Only process if it's a conventional commit
+            # Get commit author info
+            AUTHOR_EMAIL=$(git show -s --format='%ae' "$HASH")
+            
+            # Try to get GitHub username using gh api
+            if [ -n "$GITHUB_ACTIONS" ] || command -v gh >/dev/null 2>&1; then
+                GITHUB_USERNAME=$(gh api "/repos/${GITHUB_REPOSITORY}/commits/${HASH}" --jq '.author.login' 2>/dev/null)
+            fi
+            
+            if [ -n "$GITHUB_USERNAME" ]; then
+                # If we got GitHub username, use it
+                if [ -z "${ALL_AUTHORS[$AUTHOR_EMAIL]}" ]; then
+                    NEW_CONTRIBUTORS["$GITHUB_USERNAME"]=1
+                    ALL_AUTHORS["$AUTHOR_EMAIL"]=1
+                fi
+
+                CATEGORIES["$CATEGORY"]=1
+                COMMIT_TITLE=${COMMIT_MSG#*: }  # Remove the type prefix
+                COMMITS_BY_CATEGORY["$CATEGORY"]+="* $COMMIT_TITLE (${HASH:0:7}) by @$GITHUB_USERNAME"$'\n'
+            else
+                # Fallback to git author name if no GitHub username found
+                AUTHOR_NAME=$(git show -s --format='%an' "$HASH")
+                
+                if [ -z "${ALL_AUTHORS[$AUTHOR_EMAIL]}" ]; then
+                    NEW_CONTRIBUTORS["$AUTHOR_NAME"]=1
+                    ALL_AUTHORS["$AUTHOR_EMAIL"]=1
+                fi
+
+                CATEGORIES["$CATEGORY"]=1
+                COMMIT_TITLE=${COMMIT_MSG#*: }  # Remove the type prefix
+                COMMITS_BY_CATEGORY["$CATEGORY"]+="* $COMMIT_TITLE (${HASH:0:7}) by $AUTHOR_NAME"$'\n'
+            fi
+        fi
+    fi
+    
+done < <(git log "${COMPARE_BASE}..${GITLOG_REF}" --pretty=format:"%H|%s|%b" --reverse --first-parent)
+
+# Write categorized commits to changelog with their emojis
+for category in "✨ Features" "🐛 Bug Fixes" "📚 Documentation" "💎 Styles" "♻️ Code Refactoring" "⚡ Performance Improvements" "🧪 Tests" "🛠️ Build System" "⚙️ CI" "🔍 Other Changes"; do
+    if [ -n "${COMMITS_BY_CATEGORY[$category]}" ]; then
+        echo "### $category" >> changelog.md
+        echo "" >> changelog.md
+        echo "${COMMITS_BY_CATEGORY[$category]}" >> changelog.md
+        echo "" >> changelog.md
+    fi
+done
+
+# Add first-time contributors section if there are any
+if [ ${#NEW_CONTRIBUTORS[@]} -gt 0 ]; then
+    echo "## ✨ First-time Contributors" >> changelog.md
+    echo "" >> changelog.md
+    echo "A huge thank you to our amazing new contributors! Your first contribution marks the start of an exciting journey! 🌟" >> changelog.md
+    echo "" >> changelog.md
+    # Use readarray to sort the keys
+    readarray -t sorted_contributors < <(printf '%s\n' "${!NEW_CONTRIBUTORS[@]}" | sort)
+    for github_username in "${sorted_contributors[@]}"; do
+        echo "* 🌟 [@$github_username](https://github.com/$github_username)" >> changelog.md
+    done
+    echo "" >> changelog.md
+fi
+
+# Add compare link if not first release
+if [ -n "$LATEST_TAG" ]; then
+    echo "## 📈 Stats" >> changelog.md
+    echo "" >> changelog.md
+    echo "**Full Changelog**: [\`$LATEST_TAG..v${NEW_VERSION}\`](${GITHUB_SERVER_URL}/${GITHUB_REPOSITORY}/compare/$LATEST_TAG...v${NEW_VERSION})" >> changelog.md
+fi
+
+# Output the changelog content
+CHANGELOG_CONTENT=$(cat changelog.md)
+{
+    echo "content<<EOF"
+    echo "$CHANGELOG_CONTENT"
+    echo "EOF"
+} >> "$GITHUB_OUTPUT"
+
+# Also print to stdout for local testing
+echo "Generated changelog:"
+echo "==================="
+cat changelog.md
+echo "==================="

.github/workflows/ci.yaml

@@ -0,0 +1,27 @@
+name: CI/CD
+
+on:
+  push:
+    branches:
+      - master
+  pull_request:
+
+jobs:
+  test:
+    name: Test
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup and Build
+        uses: ./.github/actions/setup-and-build
+
+      - name: Run type check
+        run: pnpm run typecheck
+
+      # - name: Run ESLint
+      #   run: pnpm run lint
+
+      - name: Run tests
+        run: pnpm run test

.github/workflows/docker.yaml

@@ -0,0 +1,76 @@
+---
+name: Docker Publish
+
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - main
+    tags:
+      - v*
+      - "*"
+
+env:
+  REGISTRY: ghcr.io
+  DOCKER_IMAGE: ghcr.io/${{ github.repository }}
+  BUILD_TARGET: bolt-ai-production # bolt-ai-development
+
+jobs:
+  docker-build-publish:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - id: string
+        uses: ASzc/change-string-case-action@v6
+        with:
+          string: ${{ env.DOCKER_IMAGE }}
+
+      - name: Docker meta
+        id: meta
+        uses: crazy-max/ghaction-docker-meta@v5
+        with:
+          images: ${{ steps.string.outputs.lowercase }}
+          flavor: |
+            latest=true
+            prefix=
+            suffix=
+          tags: |
+            type=semver,pattern={{version}}
+            type=pep440,pattern={{version}}
+            type=ref,event=tag
+            type=raw,value={{sha}}
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Login to Container Registry
+        uses: docker/login-action@v3
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ github.actor }} # ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.GITHUB_TOKEN }} # ${{ secrets.DOCKER_PASSWORD }} 
+
+      - name: Build and push
+        uses: docker/build-push-action@v6
+        with:
+          context: .
+          file: ./Dockerfile
+          target: ${{ env.BUILD_TARGET }}
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+          cache-from: type=registry,ref=${{ steps.string.outputs.lowercase }}:latest
+          cache-to: type=inline
+
+      - name: Check manifest
+        run: |
+          docker buildx imagetools inspect ${{ steps.string.outputs.lowercase }}:${{ steps.meta.outputs.version }}
+
+      - name: Dump context
+        if: always()
+        uses: crazy-max/ghaction-dump-context@v2

.github/workflows/docs.yaml

@@ -0,0 +1,35 @@
+name: Docs CI/CD
+
+on:
+  push:
+    branches:
+      - main
+    paths:
+      - 'docs/**'  # This will only trigger the workflow when files in docs directory change
+permissions:
+  contents: write
+jobs:
+  build_docs:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: ./docs
+    steps:
+      - uses: actions/checkout@v4
+      - name: Configure Git Credentials
+        run: |
+          git config user.name github-actions[bot]
+          git config user.email 41898282+github-actions[bot]@users.noreply.github.com
+      - uses: actions/setup-python@v5
+        with:
+          python-version: 3.x
+      - run: echo "cache_id=$(date --utc '+%V')" >> $GITHUB_ENV 
+      - uses: actions/cache@v4
+        with:
+          key: mkdocs-material-${{ env.cache_id }}
+          path: .cache
+          restore-keys: |
+            mkdocs-material-
+
+      - run: pip install mkdocs-material
+      - run: mkdocs gh-deploy --force 

.github/workflows/pr-release-validation.yaml

@@ -0,0 +1,31 @@
+name: PR Validation
+
+on:
+  pull_request:
+    types: [opened, synchronize, reopened, labeled, unlabeled]
+    branches:
+      - main
+
+jobs:
+  validate:
+    runs-on: ubuntu-latest
+    
+    steps:
+      - uses: actions/checkout@v4
+      
+      - name: Validate PR Labels
+        run: |
+          if [[ "${{ contains(github.event.pull_request.labels.*.name, 'stable-release') }}" == "true" ]]; then
+            echo "✓ PR has stable-release label"
+            
+            # Check version bump labels
+            if [[ "${{ contains(github.event.pull_request.labels.*.name, 'major') }}" == "true" ]]; then
+              echo "✓ Major version bump requested"
+            elif [[ "${{ contains(github.event.pull_request.labels.*.name, 'minor') }}" == "true" ]]; then
+              echo "✓ Minor version bump requested"
+            else
+              echo "✓ Patch version bump will be applied"
+            fi
+          else
+            echo "This PR doesn't have the stable-release label. No release will be created." 
+          fi

.github/workflows/semantic-pr.yaml

@@ -0,0 +1,32 @@
+name: Semantic Pull Request
+on:
+  pull_request_target:
+    types: [opened, reopened, edited, synchronize]
+permissions:
+  pull-requests: read
+jobs:
+  main:
+    name: Validate PR Title
+    runs-on: ubuntu-latest
+    steps:
+      # https://github.com/amannn/action-semantic-pull-request/releases/tag/v5.5.3
+      - uses: amannn/action-semantic-pull-request@0723387faaf9b38adef4775cd42cfd5155ed6017
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          subjectPattern: ^(?![A-Z]).+$
+          subjectPatternError: |
+            The subject "{subject}" found in the pull request title "{title}"
+            didn't match the configured pattern. Please ensure that the subject
+            doesn't start with an uppercase character.
+          types: |
+            fix
+            feat
+            chore
+            build
+            ci
+            perf
+            docs
+            refactor
+            revert
+            test

.github/workflows/stale.yml

@@ -0,0 +1,25 @@
+name: Mark Stale Issues and Pull Requests
+
+on:
+  schedule:
+    - cron: '0 2 * * *'  # Runs daily at 2:00 AM UTC
+  workflow_dispatch:  # Allows manual triggering of the workflow
+
+jobs:
+  stale:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Mark stale issues and pull requests
+        uses: actions/stale@v8
+        with:
+          repo-token: ${{ secrets.GITHUB_TOKEN }}
+          stale-issue-message: "This issue has been marked as stale due to inactivity. If no further activity occurs, it will be closed in 7 days."
+          stale-pr-message: "This pull request has been marked as stale due to inactivity. If no further activity occurs, it will be closed in 7 days."
+          days-before-stale: 10            # Number of days before marking an issue or PR as stale
+          days-before-close: 4             # Number of days after being marked stale before closing
+          stale-issue-label: "stale"       # Label to apply to stale issues
+          stale-pr-label: "stale"          # Label to apply to stale pull requests
+          exempt-issue-labels: "pinned,important" # Issues with these labels won't be marked stale
+          exempt-pr-labels: "pinned,important"    # PRs with these labels won't be marked stale
+          operations-per-run: 75           # Limits the number of actions per run to avoid API rate limits

.github/workflows/update-stable.yml

@@ -0,0 +1,126 @@
+name: Update Stable Branch
+
+on:
+  push:
+    branches:
+      - main
+
+permissions:
+  contents: write
+  
+jobs:
+  prepare-release:
+    if: contains(github.event.head_commit.message, '#release')
+    runs-on: ubuntu-latest
+    
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Configure Git
+        run: |
+          git config --global user.name 'github-actions[bot]'
+          git config --global user.email 'github-actions[bot]@users.noreply.github.com'
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: latest
+          run_install: false
+
+      - name: Get pnpm store directory
+        id: pnpm-cache
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
+
+      - name: Setup pnpm cache
+        uses: actions/cache@v4
+        with:
+          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - name: Get Current Version
+        id: current_version
+        run: |
+          CURRENT_VERSION=$(node -p "require('./package.json').version")
+          echo "version=$CURRENT_VERSION" >> $GITHUB_OUTPUT
+
+      - name: Install semver
+        run: pnpm add -g semver
+
+      - name: Determine Version Bump
+        id: version_bump
+        run: |
+          COMMIT_MSG="${{ github.event.head_commit.message }}"
+          if [[ $COMMIT_MSG =~ "#release:major" ]]; then
+            echo "bump=major" >> $GITHUB_OUTPUT
+          elif [[ $COMMIT_MSG =~ "#release:minor" ]]; then
+            echo "bump=minor" >> $GITHUB_OUTPUT
+          else
+            echo "bump=patch" >> $GITHUB_OUTPUT
+          fi
+
+      - name: Bump Version
+        id: bump_version
+        run: |
+          NEW_VERSION=$(semver -i ${{ steps.version_bump.outputs.bump }} ${{ steps.current_version.outputs.version }})
+          echo "new_version=$NEW_VERSION" >> $GITHUB_OUTPUT
+
+      - name: Update Package.json
+        run: |
+          NEW_VERSION=${{ steps.bump_version.outputs.new_version }}
+          pnpm version $NEW_VERSION --no-git-tag-version --allow-same-version
+
+      
+      - name: Prepare changelog script
+        run: chmod +x .github/scripts/generate-changelog.sh
+
+      - name: Generate Changelog
+        id: changelog
+        env:
+          NEW_VERSION: ${{ steps.bump_version.outputs.new_version }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          
+        run: .github/scripts/generate-changelog.sh
+
+      - name: Get the latest commit hash and version tag
+        run: |
+          echo "COMMIT_HASH=$(git rev-parse HEAD)" >> $GITHUB_ENV
+          echo "NEW_VERSION=${{ steps.bump_version.outputs.new_version }}" >> $GITHUB_ENV
+          
+      - name: Commit and Tag Release
+        run: |
+          git pull
+          git add package.json pnpm-lock.yaml changelog.md
+          git commit -m "chore: release version ${{ steps.bump_version.outputs.new_version }}"
+          git tag "v${{ steps.bump_version.outputs.new_version }}"
+          git push
+          git push --tags
+
+      - name: Update Stable Branch
+        run: |
+          if ! git checkout stable 2>/dev/null; then
+            echo "Creating new stable branch..."
+            git checkout -b stable
+          fi
+          git merge main --no-ff -m "chore: release version ${{ steps.bump_version.outputs.new_version }}"
+          git push --set-upstream origin stable --force
+
+      - name: Create GitHub Release
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          VERSION="v${{ steps.bump_version.outputs.new_version }}"
+          gh release create "$VERSION" \
+            --title "Release $VERSION" \
+            --notes "${{ steps.changelog.outputs.content }}" \
+            --target stable

.gitignore

@@ -0,0 +1,43 @@
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+.vscode/*
+.vscode/launch.json
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+/.history
+/.cache
+/build
+.env.local
+.env
+.dev.vars
+*.vars
+.wrangler
+_worker.bundle
+
+Modelfile
+modelfiles
+
+# docs ignore
+site
+
+# commit file ignore
+app/commit.json
+messages.json

.husky/_/.gitignore

@@ -0,0 +1 @@
+*

.husky/_/applypatch-msg

@@ -0,0 +1,2 @@
+#!/usr/bin/env sh
+. "$(dirname "$0")/h"

.husky/_/commit-msg

@@ -0,0 +1,2 @@
+#!/usr/bin/env sh
+. "$(dirname "$0")/h"

.husky/_/h

@@ -0,0 +1,22 @@
+#!/usr/bin/env sh
+[ "$HUSKY" = "2" ] && set -x
+n=$(basename "$0")
+s=$(dirname "$(dirname "$0")")/$n
+
+[ ! -f "$s" ] && exit 0
+
+if [ -f "$HOME/.huskyrc" ]; then
+	echo "husky - '~/.huskyrc' is DEPRECATED, please move your code to ~/.config/husky/init.sh"
+fi
+i="${XDG_CONFIG_HOME:-$HOME/.config}/husky/init.sh"
+[ -f "$i" ] && . "$i"
+
+[ "${HUSKY-}" = "0" ] && exit 0
+
+export PATH="node_modules/.bin:$PATH"
+sh -e "$s" "$@"
+c=$?
+
+[ $c != 0 ] && echo "husky - $n script failed (code $c)"
+[ $c = 127 ] && echo "husky - command not found in PATH=$PATH"
+exit $c

.husky/_/husky.sh

@@ -0,0 +1,9 @@
+echo "husky - DEPRECATED
+
+Please remove the following two lines from $0:
+
+#!/usr/bin/env sh
+. \"\$(dirname -- \"\$0\")/_/husky.sh\"
+
+They WILL FAIL in v10.0.0
+"

.husky/_/post-applypatch

@@ -0,0 +1,2 @@
+#!/usr/bin/env sh
+. "$(dirname "$0")/h"

.husky/_/post-checkout

@@ -0,0 +1,2 @@
+#!/usr/bin/env sh
+. "$(dirname "$0")/h"

.husky/_/post-commit

@@ -0,0 +1,2 @@
+#!/usr/bin/env sh
+. "$(dirname "$0")/h"

.husky/_/post-merge

@@ -0,0 +1,2 @@
+#!/usr/bin/env sh
+. "$(dirname "$0")/h"

.husky/_/post-rewrite

@@ -0,0 +1,2 @@
+#!/usr/bin/env sh
+. "$(dirname "$0")/h"

.husky/_/pre-applypatch

@@ -0,0 +1,2 @@
+#!/usr/bin/env sh
+. "$(dirname "$0")/h"

.husky/_/pre-auto-gc

@@ -0,0 +1,2 @@
+#!/usr/bin/env sh
+. "$(dirname "$0")/h"

.husky/_/pre-commit

@@ -0,0 +1,2 @@
+#!/usr/bin/env sh
+. "$(dirname "$0")/h"

.husky/_/pre-merge-commit

@@ -0,0 +1,2 @@
+#!/usr/bin/env sh
+. "$(dirname "$0")/h"

.husky/_/pre-push

@@ -0,0 +1,2 @@
+#!/usr/bin/env sh
+. "$(dirname "$0")/h"

.husky/_/pre-rebase

@@ -0,0 +1,2 @@
+#!/usr/bin/env sh
+. "$(dirname "$0")/h"

.husky/_/prepare-commit-msg

@@ -0,0 +1,2 @@
+#!/usr/bin/env sh
+. "$(dirname "$0")/h"

.husky/pre-commit

@@ -0,0 +1,32 @@
+#!/bin/sh
+
+echo "🔍 Running pre-commit hook to check the code looks good... 🔍"
+
+# Load NVM if available (useful for managing Node.js versions)
+export NVM_DIR="$HOME/.nvm"
+[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
+
+# Ensure `pnpm` is available
+echo "Checking if pnpm is available..."
+if ! command -v pnpm >/dev/null 2>&1; then
+    echo "❌ pnpm not found! Please ensure pnpm is installed and available in PATH."
+    exit 1
+fi
+
+# Run typecheck
+echo "Running typecheck..."
+if ! pnpm typecheck; then
+    echo "❌ Type checking failed! Please review TypeScript types."
+    echo "Once you're done, don't forget to add your changes to the commit! 🚀"
+    exit 1
+fi
+
+# Run lint
+echo "Running lint..."
+if ! pnpm lint; then
+    echo "❌ Linting failed! Run 'pnpm lint:fix' to fix the easy issues."
+    echo "Once you're done, don't forget to add your beautification to the commit! 🤩"
+    exit 1
+fi
+
+echo "👍 All checks passed! Committing changes..."

.prettierignore

@@ -0,0 +1,2 @@
+pnpm-lock.yaml
+.astro

.prettierrc

@@ -0,0 +1,8 @@
+{
+  "printWidth": 120,
+  "singleQuote": true,
+  "useTabs": false,
+  "tabWidth": 2,
+  "semi": true,
+  "bracketSpacing": true
+}

.tool-versions

@@ -0,0 +1,2 @@
+nodejs 20.15.1
+pnpm 9.4.0

CONTRIBUTING.md

@@ -0,0 +1,219 @@
+# Contribution Guidelines
+
+Welcome! This guide provides all the details you need to contribute effectively to the project. Thank you for helping us make **bolt.diy** a better tool for developers worldwide. 💡
+
+---
+
+## 📋 Table of Contents
+
+1. [Code of Conduct](#code-of-conduct)  
+2. [How Can I Contribute?](#how-can-i-contribute)  
+3. [Pull Request Guidelines](#pull-request-guidelines)  
+4. [Coding Standards](#coding-standards)  
+5. [Development Setup](#development-setup)  
+6. [Testing](#testing)  
+7. [Deployment](#deployment)  
+8. [Docker Deployment](#docker-deployment)  
+9. [VS Code Dev Containers Integration](#vs-code-dev-containers-integration)  
+
+---
+
+## 🛡️ Code of Conduct
+
+This project is governed by our **Code of Conduct**. By participating, you agree to uphold this code. Report unacceptable behavior to the project maintainers.
+
+---
+
+## 🛠️ How Can I Contribute?
+
+### 1️⃣ Reporting Bugs or Feature Requests
+- Check the [issue tracker](#) to avoid duplicates.
+- Use issue templates (if available).  
+- Provide detailed, relevant information and steps to reproduce bugs.
+
+### 2️⃣ Code Contributions
+1. Fork the repository.  
+2. Create a feature or fix branch.  
+3. Write and test your code.  
+4. Submit a pull request (PR).
+
+### 3️⃣ Join as a Core Contributor  
+Interested in maintaining and growing the project? Fill out our [Contributor Application Form](https://forms.gle/TBSteXSDCtBDwr5m7).
+
+---
+
+## ✅ Pull Request Guidelines
+
+### PR Checklist  
+- Branch from the **main** branch.  
+- Update documentation, if needed.  
+- Test all functionality manually.  
+- Focus on one feature/bug per PR.  
+
+### Review Process  
+1. Manual testing by reviewers.  
+2. At least one maintainer review required.  
+3. Address review comments.  
+4. Maintain a clean commit history.
+
+---
+
+## 📏 Coding Standards
+
+### General Guidelines  
+- Follow existing code style.  
+- Comment complex logic.  
+- Keep functions small and focused.  
+- Use meaningful variable names.
+
+---
+
+## 🖥️ Development Setup
+
+### 1️⃣ Initial Setup  
+- Clone the repository:  
+  ```bash
+  git clone https://github.com/stackblitz-labs/bolt.diy.git
+  ```
+- Install dependencies:  
+  ```bash
+  pnpm install
+  ```
+- Set up environment variables:  
+  1. Rename `.env.example` to `.env.local`.  
+  2. Add your API keys:
+     ```bash
+     GROQ_API_KEY=XXX
+     HuggingFace_API_KEY=XXX
+     OPENAI_API_KEY=XXX
+     ...
+     ```
+  3. Optionally set:  
+     - Debug level: `VITE_LOG_LEVEL=debug`  
+     - Context size: `DEFAULT_NUM_CTX=32768`  
+
+**Note**: Never commit your `.env.local` file to version control. It’s already in `.gitignore`.
+
+### 2️⃣ Run Development Server  
+```bash
+pnpm run dev
+```
+**Tip**: Use **Google Chrome Canary** for local testing.
+
+---
+
+## 🧪 Testing
+
+Run the test suite with:  
+```bash
+pnpm test
+```
+
+---
+
+## 🚀 Deployment
+
+### Deploy to Cloudflare Pages  
+```bash
+pnpm run deploy
+```
+Ensure you have required permissions and that Wrangler is configured.
+
+---
+
+## 🐳 Docker Deployment
+
+This section outlines the methods for deploying the application using Docker. The processes for **Development** and **Production** are provided separately for clarity.
+
+---
+
+### 🧑‍💻 Development Environment  
+
+#### Build Options  
+
+**Option 1: Helper Scripts**  
+```bash
+# Development build
+npm run dockerbuild
+```
+
+**Option 2: Direct Docker Build Command**  
+```bash
+docker build . --target bolt-ai-development
+```
+
+**Option 3: Docker Compose Profile**  
+```bash
+docker-compose --profile development up
+```
+
+#### Running the Development Container  
+```bash
+docker run -p 5173:5173 --env-file .env.local bolt-ai:development
+```
+
+---
+
+### 🏭 Production Environment  
+
+#### Build Options  
+
+**Option 1: Helper Scripts**  
+```bash
+# Production build
+npm run dockerbuild:prod
+```
+
+**Option 2: Direct Docker Build Command**  
+```bash
+docker build . --target bolt-ai-production
+```
+
+**Option 3: Docker Compose Profile**  
+```bash
+docker-compose --profile production up
+```
+
+#### Running the Production Container  
+```bash
+docker run -p 5173:5173 --env-file .env.local bolt-ai:production
+```
+
+---
+
+### Coolify Deployment  
+
+For an easy deployment process, use [Coolify](https://github.com/coollabsio/coolify):  
+1. Import your Git repository into Coolify.  
+2. Choose **Docker Compose** as the build pack.  
+3. Configure environment variables (e.g., API keys).  
+4. Set the start command:  
+   ```bash
+   docker compose --profile production up
+   ```
+
+---
+
+## 🛠️ VS Code Dev Containers Integration
+
+The `docker-compose.yaml` configuration is compatible with **VS Code Dev Containers**, making it easy to set up a development environment directly in Visual Studio Code.
+
+### Steps to Use Dev Containers
+
+1. Open the command palette in VS Code (`Ctrl+Shift+P` or `Cmd+Shift+P` on macOS).  
+2. Select **Dev Containers: Reopen in Container**.  
+3. Choose the **development** profile when prompted.  
+4. VS Code will rebuild the container and open it with the pre-configured environment.
+
+---
+
+## 🔑 Environment Variables
+
+Ensure `.env.local` is configured correctly with:  
+- API keys.  
+- Context-specific configurations.  
+
+Example for the `DEFAULT_NUM_CTX` variable:  
+```bash
+DEFAULT_NUM_CTX=24576 # Uses 32GB VRAM
+```

Dockerfile

@@ -0,0 +1,87 @@
+ARG BASE=node:20.18.0
+FROM ${BASE} AS base
+
+WORKDIR /app
+
+# Install dependencies (this step is cached as long as the dependencies don't change)
+COPY package.json pnpm-lock.yaml ./
+
+RUN corepack enable pnpm && pnpm install
+
+# Copy the rest of your app's source code
+COPY . .
+
+# Expose the port the app runs on
+EXPOSE 5173
+
+# Production image
+FROM base AS bolt-ai-production
+
+# Define environment variables with default values or let them be overridden
+ARG GROQ_API_KEY
+ARG HuggingFace_API_KEY
+ARG OPENAI_API_KEY
+ARG ANTHROPIC_API_KEY
+ARG OPEN_ROUTER_API_KEY
+ARG GOOGLE_GENERATIVE_AI_API_KEY
+ARG OLLAMA_API_BASE_URL
+ARG XAI_API_KEY
+ARG TOGETHER_API_KEY
+ARG TOGETHER_API_BASE_URL
+ARG VITE_LOG_LEVEL=debug
+ARG DEFAULT_NUM_CTX
+
+ENV WRANGLER_SEND_METRICS=false \
+    GROQ_API_KEY=${GROQ_API_KEY} \
+    HuggingFace_KEY=${HuggingFace_API_KEY} \
+    OPENAI_API_KEY=${OPENAI_API_KEY} \
+    ANTHROPIC_API_KEY=${ANTHROPIC_API_KEY} \
+    OPEN_ROUTER_API_KEY=${OPEN_ROUTER_API_KEY} \
+    GOOGLE_GENERATIVE_AI_API_KEY=${GOOGLE_GENERATIVE_AI_API_KEY} \
+    OLLAMA_API_BASE_URL=${OLLAMA_API_BASE_URL} \
+    XAI_API_KEY=${XAI_API_KEY} \
+    TOGETHER_API_KEY=${TOGETHER_API_KEY} \
+    TOGETHER_API_BASE_URL=${TOGETHER_API_BASE_URL} \
+    VITE_LOG_LEVEL=${VITE_LOG_LEVEL} \
+    DEFAULT_NUM_CTX=${DEFAULT_NUM_CTX}
+
+# Pre-configure wrangler to disable metrics
+RUN mkdir -p /root/.config/.wrangler && \
+    echo '{"enabled":false}' > /root/.config/.wrangler/metrics.json
+
+RUN npm run build
+
+CMD [ "pnpm", "run", "dockerstart"]
+
+# Development image
+FROM base AS bolt-ai-development
+
+# Define the same environment variables for development
+ARG GROQ_API_KEY
+ARG HuggingFace 
+ARG OPENAI_API_KEY
+ARG ANTHROPIC_API_KEY
+ARG OPEN_ROUTER_API_KEY
+ARG GOOGLE_GENERATIVE_AI_API_KEY
+ARG OLLAMA_API_BASE_URL
+ARG XAI_API_KEY
+ARG TOGETHER_API_KEY
+ARG TOGETHER_API_BASE_URL
+ARG VITE_LOG_LEVEL=debug
+ARG DEFAULT_NUM_CTX
+
+ENV GROQ_API_KEY=${GROQ_API_KEY} \
+    HuggingFace_API_KEY=${HuggingFace_API_KEY} \
+    OPENAI_API_KEY=${OPENAI_API_KEY} \
+    ANTHROPIC_API_KEY=${ANTHROPIC_API_KEY} \
+    OPEN_ROUTER_API_KEY=${OPEN_ROUTER_API_KEY} \
+    GOOGLE_GENERATIVE_AI_API_KEY=${GOOGLE_GENERATIVE_AI_API_KEY} \
+    OLLAMA_API_BASE_URL=${OLLAMA_API_BASE_URL} \
+    XAI_API_KEY=${XAI_API_KEY} \
+    TOGETHER_API_KEY=${TOGETHER_API_KEY} \
+    TOGETHER_API_BASE_URL=${TOGETHER_API_BASE_URL} \
+    VITE_LOG_LEVEL=${VITE_LOG_LEVEL} \
+    DEFAULT_NUM_CTX=${DEFAULT_NUM_CTX}
+
+RUN mkdir -p ${WORKDIR}/run
+CMD pnpm run dev --host

FAQ.md

@@ -0,0 +1,91 @@
+# Frequently Asked Questions (FAQ)
+
+<details>
+<summary><strong>What are the best models for bolt.diy?</strong></summary>
+
+For the best experience with bolt.diy, we recommend using the following models:
+
+- **Claude 3.5 Sonnet (old)**: Best overall coder, providing excellent results across all use cases
+- **Gemini 2.0 Flash**: Exceptional speed while maintaining good performance
+- **GPT-4o**: Strong alternative to Claude 3.5 Sonnet with comparable capabilities
+- **DeepSeekCoder V2 236b**: Best open source model (available through OpenRouter, DeepSeek API, or self-hosted)
+- **Qwen 2.5 Coder 32b**: Best model for self-hosting with reasonable hardware requirements
+
+**Note**: Models with less than 7b parameters typically lack the capability to properly interact with bolt!
+</details>
+
+<details>
+<summary><strong>How do I get the best results with bolt.diy?</strong></summary>
+
+- **Be specific about your stack**:  
+  Mention the frameworks or libraries you want to use (e.g., Astro, Tailwind, ShadCN) in your initial prompt. This ensures that bolt.diy scaffolds the project according to your preferences.
+
+- **Use the enhance prompt icon**:  
+  Before sending your prompt, click the *enhance* icon to let the AI refine your prompt. You can edit the suggested improvements before submitting.
+
+- **Scaffold the basics first, then add features**:  
+  Ensure the foundational structure of your application is in place before introducing advanced functionality. This helps bolt.diy establish a solid base to build on.
+
+- **Batch simple instructions**:  
+  Combine simple tasks into a single prompt to save time and reduce API credit consumption. For example:  
+  *"Change the color scheme, add mobile responsiveness, and restart the dev server."*
+</details>
+
+<details>
+<summary><strong>How do I contribute to bolt.diy?</strong></summary>
+
+Check out our [Contribution Guide](CONTRIBUTING.md) for more details on how to get involved!
+</details>
+
+<details>
+<summary><strong>What are the future plans for bolt.diy?</strong></summary>
+
+Visit our [Roadmap](https://roadmap.sh/r/ottodev-roadmap-2ovzo) for the latest updates.  
+New features and improvements are on the way!
+</details>
+
+<details>
+<summary><strong>Why are there so many open issues/pull requests?</strong></summary>
+
+bolt.diy began as a small showcase project on @ColeMedin's YouTube channel to explore editing open-source projects with local LLMs. However, it quickly grew into a massive community effort!  
+
+We're forming a team of maintainers to manage demand and streamline issue resolution. The maintainers are rockstars, and we're also exploring partnerships to help the project thrive.
+</details>
+
+<details>
+<summary><strong>How do local LLMs compare to larger models like Claude 3.5 Sonnet for bolt.diy?</strong></summary>
+
+While local LLMs are improving rapidly, larger models like GPT-4o, Claude 3.5 Sonnet, and DeepSeek Coder V2 236b still offer the best results for complex applications. Our ongoing focus is to improve prompts, agents, and the platform to better support smaller local LLMs.
+</details>
+
+<details>
+<summary><strong>Common Errors and Troubleshooting</strong></summary>
+
+### **"There was an error processing this request"**
+This generic error message means something went wrong. Check both:
+- The terminal (if you started the app with Docker or `pnpm`).
+- The developer console in your browser (press `F12` or right-click > *Inspect*, then go to the *Console* tab).
+
+### **"x-api-key header missing"**
+This error is sometimes resolved by restarting the Docker container.  
+If that doesn't work, try switching from Docker to `pnpm` or vice versa. We're actively investigating this issue.
+
+### **Blank preview when running the app**
+A blank preview often occurs due to hallucinated bad code or incorrect commands.  
+To troubleshoot:
+- Check the developer console for errors.
+- Remember, previews are core functionality, so the app isn't broken! We're working on making these errors more transparent.
+
+### **"Everything works, but the results are bad"**
+Local LLMs like Qwen-2.5-Coder are powerful for small applications but still experimental for larger projects. For better results, consider using larger models like GPT-4o, Claude 3.5 Sonnet, or DeepSeek Coder V2 236b.
+
+### **"Received structured exception #0xc0000005: access violation"**
+If you are getting this, you are probably on Windows. The fix is generally to update the [Visual C++ Redistributable](https://learn.microsoft.com/en-us/cpp/windows/latest-supported-vc-redist?view=msvc-170)
+
+### **"Miniflare or Wrangler errors in Windows"**
+You will need to make sure you have the latest version of Visual Studio C++ installed (14.40.33816), more information here https://github.com/stackblitz-labs/bolt.diy/issues/19.
+</details>
+
+---
+
+Got more questions? Feel free to reach out or open an issue in our GitHub repo!

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 StackBlitz, Inc. and bolt.diy contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,10 +1,327 @@
----
-title: Bolt.diy
-emoji: 📉
-colorFrom: indigo
-colorTo: gray
-sdk: docker
-pinned: false
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# bolt.diy (Previously oTToDev)
+[![bolt.diy: AI-Powered Full-Stack Web Development in the Browser](./public/social_preview_index.jpg)](https://bolt.diy)
+
+Welcome to bolt.diy, the official open source version of Bolt.new (previously known as oTToDev and bolt.new ANY LLM), which 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.
+
+Check the [bolt.diy Docs](https://stackblitz-labs.github.io/bolt.diy/) for more information. 
+
+We have also launched an experimental agent called the "bolt.diy Expert" that can answer common questions about bolt.diy. Find it here on the [oTTomator Live Agent Studio](https://studio.ottomator.ai/).
+
+bolt.diy was originally started by [Cole Medin](https://www.youtube.com/@ColeMedin) but has quickly grown into a massive community effort to build the BEST open source AI coding assistant!
+
+## Table of Contents
+
+- [Join the Community](#join-the-community)
+- [Requested Additions](#requested-additions)
+- [Features](#features)
+- [Setup](#setup)
+- [Run the Application](#run-the-application)
+- [Available Scripts](#available-scripts)
+- [Contributing](#contributing)
+- [Roadmap](#roadmap)
+- [FAQ](#faq)
+
+## Join the community
+
+[Join the bolt.diy community here, in the thinktank on ottomator.ai!](https://thinktank.ottomator.ai)
+
+
+## Requested Additions
+
+- ✅ OpenRouter Integration (@coleam00)
+- ✅ Gemini Integration (@jonathands)
+- ✅ Autogenerate Ollama models from what is downloaded (@yunatamos)
+- ✅ Filter models by provider (@jasonm23)
+- ✅ Download project as ZIP (@fabwaseem)
+- ✅ Improvements to the main bolt.new prompt in `app\lib\.server\llm\prompts.ts` (@kofi-bhr)
+- ✅ DeepSeek API Integration (@zenith110)
+- ✅ Mistral API Integration (@ArulGandhi)
+- ✅ "Open AI Like" API Integration (@ZerxZ)
+- ✅ Ability to sync files (one way sync) to local folder (@muzafferkadir)
+- ✅ Containerize the application with Docker for easy installation (@aaronbolton)
+- ✅ Publish projects directly to GitHub (@goncaloalves)
+- ✅ Ability to enter API keys in the UI (@ali00209)
+- ✅ xAI Grok Beta Integration (@milutinke)
+- ✅ LM Studio Integration (@karrot0)
+- ✅ HuggingFace Integration (@ahsan3219)
+- ✅ Bolt terminal to see the output of LLM run commands (@thecodacus)
+- ✅ Streaming of code output (@thecodacus)
+- ✅ Ability to revert code to earlier version (@wonderwhy-er)
+- ✅ Cohere Integration (@hasanraiyan)
+- ✅ Dynamic model max token length (@hasanraiyan)
+- ✅ Better prompt enhancing (@SujalXplores)
+- ✅ Prompt caching (@SujalXplores)
+- ✅ Load local projects into the app (@wonderwhy-er)
+- ✅ Together Integration (@mouimet-infinisoft)
+- ✅ Mobile friendly (@qwikode)
+- ✅ Better prompt enhancing (@SujalXplores)
+- ✅ Attach images to prompts (@atrokhym)
+- ✅ Added Git Clone button (@thecodacus)
+- ✅ Git Import from url (@thecodacus)
+- ✅ PromptLibrary to have different variations of prompts for different use cases (@thecodacus)
+- ✅ Detect package.json and commands to auto install & run preview for folder and git import (@wonderwhy-er)
+- ✅ Selection tool to target changes visually (@emcconnell)
+- ✅ Detect terminal Errors and ask bolt to fix it (@thecodacus)
+- ✅ Detect preview Errors and ask bolt to fix it (@wonderwhy-er)
+- ✅ Add Starter Template Options (@thecodacus)
+- ⬜ **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** - Run agents in the backend as opposed to a single model call
+- ✅ Add Prompt Caching Support for Claude models - upto 90% cost reduction (@aproli90)
+- ⬜ Deploy directly to Vercel/Netlify/other similar platforms
+- ⬜ 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
+- ⬜ Azure Open AI API Integration
+- ✅ Perplexity Integration (@meetpateltech)
+- ⬜ Vertex AI Integration
+
+## Features
+
+- **AI-powered full-stack web development** directly in your browser.
+- **Support for multiple LLMs** with an extensible architecture to integrate additional models.
+- **Attach images to prompts** for better contextual understanding.
+- **Integrated terminal** to view output of LLM-run commands.
+- **Revert code to earlier versions** for easier debugging and quicker changes.
+- **Download projects as ZIP** for easy portability.
+- **Integration-ready Docker support** for a hassle-free setup.
+
+## Setup 
+
+If you're new to installing software from GitHub, don't worry! If you encounter any issues, feel free to submit an "issue" using the provided links or improve this documentation by forking the repository, editing the instructions, and submitting a pull request. The following instruction will help you get the stable branch up and running on your local machine in no time.  
+
+Let's get you up and running with the stable version of Bolt.DIY!
+
+## Quick Download
+
+[![Download Latest Release](https://img.shields.io/github/v/release/stackblitz-labs/bolt.diy?label=Download%20Bolt&sort=semver)](https://github.com/stackblitz-labs/bolt.diy/releases/latest) ← Click here to go the the latest release version! 
+
+- Next **click source.zip**
+
+
+
+
+## Prerequisites
+
+Before you begin, you'll need to install two important pieces of software:
+
+### Install Node.js
+
+Node.js is required to run the application.
+
+1. Visit the [Node.js Download Page](https://nodejs.org/en/download/)
+2. Download the "LTS" (Long Term Support) version for your operating system
+3. Run the installer, accepting the default settings
+4. Verify Node.js is properly installed:
+   - **For Windows Users**:
+     1. Press `Windows + R`
+     2. Type "sysdm.cpl" and press Enter
+     3. Go to "Advanced" tab → "Environment Variables"
+     4. Check if `Node.js` appears in the "Path" variable
+   - **For Mac/Linux Users**:
+     1. Open Terminal
+     2. Type this command:
+        ```bash
+        echo $PATH
+        ```
+     3. Look for `/usr/local/bin` in the output
+
+## Running the Application
+
+You have two options for running Bolt.DIY: directly on your machine or using Docker.
+
+### Option 1: Direct Installation (Recommended for Beginners)
+
+1. **Install Package Manager (pnpm)**:
+   ```bash
+   npm install -g pnpm
+   ```
+
+2. **Install Project Dependencies**:
+   ```bash
+   pnpm install
+   ```
+
+3. **Start the Application**:
+   ```bash
+   pnpm run dev
+   ```
+
+   **Important Note**: If you're using Google Chrome, you'll need Chrome Canary for local development. [Download it here](https://www.google.com/chrome/canary/)
+
+### Option 2: Using Docker
+
+This option requires some familiarity with Docker but provides a more isolated environment.
+
+#### Additional Prerequisite
+- Install Docker: [Download Docker](https://www.docker.com/)
+
+#### Steps:
+
+1. **Build the Docker Image**:
+   ```bash
+   # Using npm script:
+   npm run dockerbuild
+
+   # OR using direct Docker command:
+   docker build . --target bolt-ai-development
+   ```
+
+2. **Run the Container**:
+   ```bash
+   docker-compose --profile development up
+   ```
+
+
+
+
+## Configuring API Keys and Providers
+
+### Adding Your API Keys
+
+Setting up your API keys in Bolt.DIY is straightforward:
+
+1. Open the home page (main interface)
+2. Select your desired provider from the dropdown menu
+3. Click the pencil (edit) icon
+4. Enter your API key in the secure input field
+
+![API Key Configuration Interface](./docs/images/api-key-ui-section.png)
+
+### Configuring Custom Base URLs
+
+For providers that support custom base URLs (such as Ollama or LM Studio), follow these steps:
+
+1. Click the settings icon in the sidebar to open the settings menu
+   ![Settings Button Location](./docs/images/bolt-settings-button.png)
+
+2. Navigate to the "Providers" tab
+3. Search for your provider using the search bar
+4. Enter your custom base URL in the designated field
+   ![Provider Base URL Configuration](./docs/images/provider-base-url.png)
+
+> **Note**: Custom base URLs are particularly useful when running local instances of AI models or using custom API endpoints.
+
+### Supported Providers
+- Ollama
+- LM Studio
+- OpenAILike
+
+## Setup Using Git (For Developers only)
+
+This method is recommended for developers who want to:
+- Contribute to the project
+- Stay updated with the latest changes
+- Switch between different versions
+- Create custom modifications
+
+#### Prerequisites
+1. Install Git: [Download Git](https://git-scm.com/downloads)
+
+#### Initial Setup
+
+1. **Clone the Repository**:
+   ```bash
+   # Using HTTPS
+   git clone https://github.com/stackblitz-labs/bolt.diy.git
+   ```
+
+2. **Navigate to Project Directory**:
+   ```bash
+   cd bolt.diy
+   ```
+
+3. **Switch to the Main Branch**:
+   ```bash
+   git checkout main
+   ```
+4. **Install Dependencies**:
+   ```bash
+   pnpm install
+   ```
+
+5. **Start the Development Server**:
+   ```bash
+   pnpm run dev
+   ```
+
+#### Staying Updated
+
+To get the latest changes from the repository:
+
+1. **Save Your Local Changes** (if any):
+   ```bash
+   git stash
+   ```
+
+2. **Pull Latest Updates**:
+   ```bash
+   git pull origin main
+   ```
+
+3. **Update Dependencies**:
+   ```bash
+   pnpm install
+   ```
+
+4. **Restore Your Local Changes** (if any):
+   ```bash
+   git stash pop
+   ```
+
+#### Troubleshooting Git Setup
+
+If you encounter issues:
+
+1. **Clean Installation**:
+   ```bash
+   # Remove node modules and lock files
+   rm -rf node_modules pnpm-lock.yaml
+
+   # Clear pnpm cache
+   pnpm store prune
+
+   # Reinstall dependencies
+   pnpm install
+   ```
+
+2. **Reset Local Changes**:
+   ```bash
+   # Discard all local changes
+   git reset --hard origin/main
+   ```
+
+Remember to always commit your local changes or stash them before pulling updates to avoid conflicts.
+
+---
+
+## Available Scripts
+
+- **`pnpm run dev`**: Starts the development server.
+- **`pnpm run build`**: Builds the project.
+- **`pnpm run start`**: Runs the built application locally using Wrangler Pages.
+- **`pnpm run preview`**: Builds and runs the production build locally.
+- **`pnpm test`**: Runs the test suite using Vitest.
+- **`pnpm run typecheck`**: Runs TypeScript type checking.
+- **`pnpm run typegen`**: Generates TypeScript types using Wrangler.
+- **`pnpm run deploy`**: Deploys the project to Cloudflare Pages.
+- **`pnpm run lint:fix`**: Automatically fixes linting issues.
+
+---
+
+## Contributing
+
+We welcome contributions! Check out our [Contributing Guide](CONTRIBUTING.md) to get started.
+
+---
+
+## Roadmap
+
+Explore upcoming features and priorities on our [Roadmap](https://roadmap.sh/r/ottodev-roadmap-2ovzo).
+
+---
+
+## FAQ
+
+For answers to common questions, issues, and to see a list of recommended models, visit our [FAQ Page](FAQ.md).

app/components/chat/APIKeyManager.tsx

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

app/components/chat/Artifact.tsx

@@ -0,0 +1,263 @@
+import { useStore } from '@nanostores/react';
+import { AnimatePresence, motion } from 'framer-motion';
+import { computed } from 'nanostores';
+import { memo, useEffect, useRef, useState } from 'react';
+import { createHighlighter, type BundledLanguage, type BundledTheme, type HighlighterGeneric } from 'shiki';
+import type { ActionState } from '~/lib/runtime/action-runner';
+import { workbenchStore } from '~/lib/stores/workbench';
+import { classNames } from '~/utils/classNames';
+import { cubicEasingFn } from '~/utils/easings';
+import { WORK_DIR } from '~/utils/constants';
+
+const highlighterOptions = {
+  langs: ['shell'],
+  themes: ['light-plus', 'dark-plus'],
+};
+
+const shellHighlighter: HighlighterGeneric<BundledLanguage, BundledTheme> =
+  import.meta.hot?.data.shellHighlighter ?? (await createHighlighter(highlighterOptions));
+
+if (import.meta.hot) {
+  import.meta.hot.data.shellHighlighter = shellHighlighter;
+}
+
+interface ArtifactProps {
+  messageId: string;
+}
+
+export const Artifact = memo(({ messageId }: ArtifactProps) => {
+  const userToggledActions = useRef(false);
+  const [showActions, setShowActions] = useState(false);
+  const [allActionFinished, setAllActionFinished] = useState(false);
+
+  const artifacts = useStore(workbenchStore.artifacts);
+  const artifact = artifacts[messageId];
+
+  const actions = useStore(
+    computed(artifact.runner.actions, (actions) => {
+      return Object.values(actions);
+    }),
+  );
+
+  const toggleActions = () => {
+    userToggledActions.current = true;
+    setShowActions(!showActions);
+  };
+
+  useEffect(() => {
+    if (actions.length && !showActions && !userToggledActions.current) {
+      setShowActions(true);
+    }
+
+    if (actions.length !== 0 && artifact.type === 'bundled') {
+      const finished = !actions.find((action) => action.status !== 'complete');
+
+      if (allActionFinished !== finished) {
+        setAllActionFinished(finished);
+      }
+    }
+  }, [actions]);
+
+  return (
+    <div className="artifact border border-bolt-elements-borderColor flex flex-col overflow-hidden rounded-lg w-full transition-border duration-150">
+      <div className="flex">
+        <button
+          className="flex items-stretch bg-bolt-elements-artifacts-background hover:bg-bolt-elements-artifacts-backgroundHover w-full overflow-hidden"
+          onClick={() => {
+            const showWorkbench = workbenchStore.showWorkbench.get();
+            workbenchStore.showWorkbench.set(!showWorkbench);
+          }}
+        >
+          {artifact.type == 'bundled' && (
+            <>
+              <div className="p-4">
+                {allActionFinished ? (
+                  <div className={'i-ph:files-light'} style={{ fontSize: '2rem' }}></div>
+                ) : (
+                  <div className={'i-svg-spinners:90-ring-with-bg'} style={{ fontSize: '2rem' }}></div>
+                )}
+              </div>
+              <div className="bg-bolt-elements-artifacts-borderColor w-[1px]" />
+            </>
+          )}
+          <div className="px-5 p-3.5 w-full text-left">
+            <div className="w-full text-bolt-elements-textPrimary font-medium leading-5 text-sm">{artifact?.title}</div>
+            <div className="w-full w-full text-bolt-elements-textSecondary text-xs mt-0.5">Click to open Workbench</div>
+          </div>
+        </button>
+        <div className="bg-bolt-elements-artifacts-borderColor w-[1px]" />
+        <AnimatePresence>
+          {actions.length && artifact.type !== 'bundled' && (
+            <motion.button
+              initial={{ width: 0 }}
+              animate={{ width: 'auto' }}
+              exit={{ width: 0 }}
+              transition={{ duration: 0.15, ease: cubicEasingFn }}
+              className="bg-bolt-elements-artifacts-background hover:bg-bolt-elements-artifacts-backgroundHover"
+              onClick={toggleActions}
+            >
+              <div className="p-4">
+                <div className={showActions ? 'i-ph:caret-up-bold' : 'i-ph:caret-down-bold'}></div>
+              </div>
+            </motion.button>
+          )}
+        </AnimatePresence>
+      </div>
+      <AnimatePresence>
+        {artifact.type !== 'bundled' && showActions && actions.length > 0 && (
+          <motion.div
+            className="actions"
+            initial={{ height: 0 }}
+            animate={{ height: 'auto' }}
+            exit={{ height: '0px' }}
+            transition={{ duration: 0.15 }}
+          >
+            <div className="bg-bolt-elements-artifacts-borderColor h-[1px]" />
+
+            <div className="p-5 text-left bg-bolt-elements-actions-background">
+              <ActionList actions={actions} />
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+});
+
+interface ShellCodeBlockProps {
+  classsName?: string;
+  code: string;
+}
+
+function ShellCodeBlock({ classsName, code }: ShellCodeBlockProps) {
+  return (
+    <div
+      className={classNames('text-xs', classsName)}
+      dangerouslySetInnerHTML={{
+        __html: shellHighlighter.codeToHtml(code, {
+          lang: 'shell',
+          theme: 'dark-plus',
+        }),
+      }}
+    ></div>
+  );
+}
+
+interface ActionListProps {
+  actions: ActionState[];
+}
+
+const actionVariants = {
+  hidden: { opacity: 0, y: 20 },
+  visible: { opacity: 1, y: 0 },
+};
+
+function openArtifactInWorkbench(filePath: any) {
+  if (workbenchStore.currentView.get() !== 'code') {
+    workbenchStore.currentView.set('code');
+  }
+
+  workbenchStore.setSelectedFile(`${WORK_DIR}/${filePath}`);
+}
+
+const ActionList = memo(({ actions }: ActionListProps) => {
+  return (
+    <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} transition={{ duration: 0.15 }}>
+      <ul className="list-none space-y-2.5">
+        {actions.map((action, index) => {
+          const { status, type, content } = action;
+          const isLast = index === actions.length - 1;
+
+          return (
+            <motion.li
+              key={index}
+              variants={actionVariants}
+              initial="hidden"
+              animate="visible"
+              transition={{
+                duration: 0.2,
+                ease: cubicEasingFn,
+              }}
+            >
+              <div className="flex items-center gap-1.5 text-sm">
+                <div className={classNames('text-lg', getIconColor(action.status))}>
+                  {status === 'running' ? (
+                    <>
+                      {type !== 'start' ? (
+                        <div className="i-svg-spinners:90-ring-with-bg"></div>
+                      ) : (
+                        <div className="i-ph:terminal-window-duotone"></div>
+                      )}
+                    </>
+                  ) : status === 'pending' ? (
+                    <div className="i-ph:circle-duotone"></div>
+                  ) : status === 'complete' ? (
+                    <div className="i-ph:check"></div>
+                  ) : status === 'failed' || status === 'aborted' ? (
+                    <div className="i-ph:x"></div>
+                  ) : null}
+                </div>
+                {type === 'file' ? (
+                  <div>
+                    Create{' '}
+                    <code
+                      className="bg-bolt-elements-artifacts-inlineCode-background text-bolt-elements-artifacts-inlineCode-text px-1.5 py-1 rounded-md text-bolt-elements-item-contentAccent hover:underline cursor-pointer"
+                      onClick={() => openArtifactInWorkbench(action.filePath)}
+                    >
+                      {action.filePath}
+                    </code>
+                  </div>
+                ) : type === 'shell' ? (
+                  <div className="flex items-center w-full min-h-[28px]">
+                    <span className="flex-1">Run command</span>
+                  </div>
+                ) : type === 'start' ? (
+                  <a
+                    onClick={(e) => {
+                      e.preventDefault();
+                      workbenchStore.currentView.set('preview');
+                    }}
+                    className="flex items-center w-full min-h-[28px]"
+                  >
+                    <span className="flex-1">Start Application</span>
+                  </a>
+                ) : null}
+              </div>
+              {(type === 'shell' || type === 'start') && (
+                <ShellCodeBlock
+                  classsName={classNames('mt-1', {
+                    'mb-3.5': !isLast,
+                  })}
+                  code={content}
+                />
+              )}
+            </motion.li>
+          );
+        })}
+      </ul>
+    </motion.div>
+  );
+});
+
+function getIconColor(status: ActionState['status']) {
+  switch (status) {
+    case 'pending': {
+      return 'text-bolt-elements-textTertiary';
+    }
+    case 'running': {
+      return 'text-bolt-elements-loader-progress';
+    }
+    case 'complete': {
+      return 'text-bolt-elements-icon-success';
+    }
+    case 'aborted': {
+      return 'text-bolt-elements-textSecondary';
+    }
+    case 'failed': {
+      return 'text-bolt-elements-icon-error';
+    }
+    default: {
+      return undefined;
+    }
+  }
+}

app/components/chat/AssistantMessage.tsx

@@ -0,0 +1,31 @@
+import { memo } from 'react';
+import { Markdown } from './Markdown';
+import type { JSONValue } from 'ai';
+
+interface AssistantMessageProps {
+  content: string;
+  annotations?: JSONValue[];
+}
+
+export const AssistantMessage = memo(({ content, annotations }: AssistantMessageProps) => {
+  const filteredAnnotations = (annotations?.filter(
+    (annotation: JSONValue) => annotation && typeof annotation === 'object' && Object.keys(annotation).includes('type'),
+  ) || []) as { type: string; value: any }[];
+
+  const usage: {
+    completionTokens: number;
+    promptTokens: number;
+    totalTokens: number;
+  } = filteredAnnotations.find((annotation) => annotation.type === 'usage')?.value;
+
+  return (
+    <div className="overflow-hidden w-full">
+      {usage && (
+        <div className="text-sm text-bolt-elements-textSecondary mb-2">
+          Tokens: {usage.totalTokens} (prompt: {usage.promptTokens}, completion: {usage.completionTokens})
+        </div>
+      )}
+      <Markdown html>{content}</Markdown>
+    </div>
+  );
+});

app/components/chat/BaseChat.module.scss

@@ -0,0 +1,47 @@
+.BaseChat {
+  &[data-chat-visible='false'] {
+    --workbench-inner-width: 100%;
+    --workbench-left: 0;
+
+    .Chat {
+      --at-apply: bolt-ease-cubic-bezier;
+      transition-property: transform, opacity;
+      transition-duration: 0.3s;
+      will-change: transform, opacity;
+      transform: translateX(-50%);
+      opacity: 0;
+    }
+  }
+}
+
+.Chat {
+  opacity: 1;
+}
+
+.PromptEffectContainer {
+  --prompt-container-offset: 50px;
+  --prompt-line-stroke-width: 1px;
+  position: absolute;
+  pointer-events: none;
+  inset: calc(var(--prompt-container-offset) / -2);
+  width: calc(100% + var(--prompt-container-offset));
+  height: calc(100% + var(--prompt-container-offset));
+}
+
+.PromptEffectLine {
+  width: calc(100% - var(--prompt-container-offset) + var(--prompt-line-stroke-width));
+  height: calc(100% - var(--prompt-container-offset) + var(--prompt-line-stroke-width));
+  x: calc(var(--prompt-container-offset) / 2 - var(--prompt-line-stroke-width) / 2);
+  y: calc(var(--prompt-container-offset) / 2 - var(--prompt-line-stroke-width) / 2);
+  rx: calc(8px - var(--prompt-line-stroke-width));
+  fill: transparent;
+  stroke-width: var(--prompt-line-stroke-width);
+  stroke: url(#line-gradient);
+  stroke-dasharray: 35px 65px;
+  stroke-dashoffset: 10;
+}
+
+.PromptShine {
+  fill: url(#shine-gradient);
+  mix-blend-mode: overlay;
+}

app/components/chat/BaseChat.tsx

@@ -0,0 +1,626 @@
+/*
+ * @ts-nocheck
+ * Preventing TS checks with files presented in the video for a better presentation.
+ */
+import type { Message } from 'ai';
+import React, { type RefCallback, useCallback, useEffect, useState } from 'react';
+import { ClientOnly } from 'remix-utils/client-only';
+import { Menu } from '~/components/sidebar/Menu.client';
+import { IconButton } from '~/components/ui/IconButton';
+import { Workbench } from '~/components/workbench/Workbench.client';
+import { classNames } from '~/utils/classNames';
+import { MODEL_LIST, PROVIDER_LIST, initializeModelList } from '~/utils/constants';
+import { Messages } from './Messages.client';
+import { SendButton } from './SendButton.client';
+import { APIKeyManager, getApiKeysFromCookies } from './APIKeyManager';
+import Cookies from 'js-cookie';
+import * as Tooltip from '@radix-ui/react-tooltip';
+
+import styles from './BaseChat.module.scss';
+import { ExportChatButton } from '~/components/chat/chatExportAndImport/ExportChatButton';
+import { ImportButtons } from '~/components/chat/chatExportAndImport/ImportButtons';
+import { ExamplePrompts } from '~/components/chat/ExamplePrompts';
+import GitCloneButton from './GitCloneButton';
+
+import FilePreview from './FilePreview';
+import { ModelSelector } from '~/components/chat/ModelSelector';
+import { SpeechRecognitionButton } from '~/components/chat/SpeechRecognition';
+import type { IProviderSetting, ProviderInfo } from '~/types/model';
+import { ScreenshotStateManager } from './ScreenshotStateManager';
+import { toast } from 'react-toastify';
+import StarterTemplates from './StarterTemplates';
+import type { ActionAlert } from '~/types/actions';
+import ChatAlert from './ChatAlert';
+import { LLMManager } from '~/lib/modules/llm/manager';
+
+const TEXTAREA_MIN_HEIGHT = 76;
+
+interface BaseChatProps {
+  textareaRef?: React.RefObject<HTMLTextAreaElement> | undefined;
+  messageRef?: RefCallback<HTMLDivElement> | undefined;
+  scrollRef?: RefCallback<HTMLDivElement> | undefined;
+  showChat?: boolean;
+  chatStarted?: boolean;
+  isStreaming?: boolean;
+  messages?: Message[];
+  description?: string;
+  enhancingPrompt?: boolean;
+  promptEnhanced?: boolean;
+  input?: string;
+  model?: string;
+  setModel?: (model: string) => void;
+  provider?: ProviderInfo;
+  setProvider?: (provider: ProviderInfo) => void;
+  providerList?: ProviderInfo[];
+  handleStop?: () => void;
+  sendMessage?: (event: React.UIEvent, messageInput?: string) => void;
+  handleInputChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
+  enhancePrompt?: () => void;
+  importChat?: (description: string, messages: Message[]) => Promise<void>;
+  exportChat?: () => void;
+  uploadedFiles?: File[];
+  setUploadedFiles?: (files: File[]) => void;
+  imageDataList?: string[];
+  setImageDataList?: (dataList: string[]) => void;
+  actionAlert?: ActionAlert;
+  clearAlert?: () => void;
+}
+
+export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
+  (
+    {
+      textareaRef,
+      messageRef,
+      scrollRef,
+      showChat = true,
+      chatStarted = false,
+      isStreaming = false,
+      model,
+      setModel,
+      provider,
+      setProvider,
+      providerList,
+      input = '',
+      enhancingPrompt,
+      handleInputChange,
+
+      // promptEnhanced,
+      enhancePrompt,
+      sendMessage,
+      handleStop,
+      importChat,
+      exportChat,
+      uploadedFiles = [],
+      setUploadedFiles,
+      imageDataList = [],
+      setImageDataList,
+      messages,
+      actionAlert,
+      clearAlert,
+    },
+    ref,
+  ) => {
+    const TEXTAREA_MAX_HEIGHT = chatStarted ? 400 : 200;
+    const [apiKeys, setApiKeys] = useState<Record<string, string>>(getApiKeysFromCookies());
+    const [modelList, setModelList] = useState(MODEL_LIST);
+    const [isModelSettingsCollapsed, setIsModelSettingsCollapsed] = useState(false);
+    const [isListening, setIsListening] = useState(false);
+    const [recognition, setRecognition] = useState<SpeechRecognition | null>(null);
+    const [transcript, setTranscript] = useState('');
+    const [isModelLoading, setIsModelLoading] = useState<string | undefined>('all');
+
+    const getProviderSettings = useCallback(() => {
+      let providerSettings: Record<string, IProviderSetting> | undefined = undefined;
+
+      try {
+        const savedProviderSettings = Cookies.get('providers');
+
+        if (savedProviderSettings) {
+          const parsedProviderSettings = JSON.parse(savedProviderSettings);
+
+          if (typeof parsedProviderSettings === 'object' && parsedProviderSettings !== null) {
+            providerSettings = parsedProviderSettings;
+          }
+        }
+      } catch (error) {
+        console.error('Error loading Provider Settings from cookies:', error);
+
+        // Clear invalid cookie data
+        Cookies.remove('providers');
+      }
+
+      return providerSettings;
+    }, []);
+    useEffect(() => {
+      console.log(transcript);
+    }, [transcript]);
+
+    useEffect(() => {
+      if (typeof window !== 'undefined' && ('SpeechRecognition' in window || 'webkitSpeechRecognition' in window)) {
+        const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+        const recognition = new SpeechRecognition();
+        recognition.continuous = true;
+        recognition.interimResults = true;
+
+        recognition.onresult = (event) => {
+          const transcript = Array.from(event.results)
+            .map((result) => result[0])
+            .map((result) => result.transcript)
+            .join('');
+
+          setTranscript(transcript);
+
+          if (handleInputChange) {
+            const syntheticEvent = {
+              target: { value: transcript },
+            } as React.ChangeEvent<HTMLTextAreaElement>;
+            handleInputChange(syntheticEvent);
+          }
+        };
+
+        recognition.onerror = (event) => {
+          console.error('Speech recognition error:', event.error);
+          setIsListening(false);
+        };
+
+        setRecognition(recognition);
+      }
+    }, []);
+
+    useEffect(() => {
+      if (typeof window !== 'undefined') {
+        const providerSettings = getProviderSettings();
+        let parsedApiKeys: Record<string, string> | undefined = {};
+
+        try {
+          parsedApiKeys = getApiKeysFromCookies();
+          setApiKeys(parsedApiKeys);
+        } catch (error) {
+          console.error('Error loading API keys from cookies:', error);
+
+          // Clear invalid cookie data
+          Cookies.remove('apiKeys');
+        }
+        setIsModelLoading('all');
+        initializeModelList({ apiKeys: parsedApiKeys, providerSettings })
+          .then((modelList) => {
+            // console.log('Model List: ', modelList);
+            setModelList(modelList);
+          })
+          .catch((error) => {
+            console.error('Error initializing model list:', error);
+          })
+          .finally(() => {
+            setIsModelLoading(undefined);
+          });
+      }
+    }, [providerList]);
+
+    const onApiKeysChange = async (providerName: string, apiKey: string) => {
+      const newApiKeys = { ...apiKeys, [providerName]: apiKey };
+      setApiKeys(newApiKeys);
+      Cookies.set('apiKeys', JSON.stringify(newApiKeys));
+
+      const provider = LLMManager.getInstance(import.meta.env || process.env || {}).getProvider(providerName);
+
+      if (provider && provider.getDynamicModels) {
+        setIsModelLoading(providerName);
+
+        try {
+          const providerSettings = getProviderSettings();
+          const staticModels = provider.staticModels;
+          const dynamicModels = await provider.getDynamicModels(
+            newApiKeys,
+            providerSettings,
+            import.meta.env || process.env || {},
+          );
+
+          setModelList((preModels) => {
+            const filteredOutPreModels = preModels.filter((x) => x.provider !== providerName);
+            return [...filteredOutPreModels, ...staticModels, ...dynamicModels];
+          });
+        } catch (error) {
+          console.error('Error loading dynamic models:', error);
+        }
+        setIsModelLoading(undefined);
+      }
+    };
+
+    const startListening = () => {
+      if (recognition) {
+        recognition.start();
+        setIsListening(true);
+      }
+    };
+
+    const stopListening = () => {
+      if (recognition) {
+        recognition.stop();
+        setIsListening(false);
+      }
+    };
+
+    const handleSendMessage = (event: React.UIEvent, messageInput?: string) => {
+      if (sendMessage) {
+        sendMessage(event, messageInput);
+
+        if (recognition) {
+          recognition.abort(); // Stop current recognition
+          setTranscript(''); // Clear transcript
+          setIsListening(false);
+
+          // Clear the input by triggering handleInputChange with empty value
+          if (handleInputChange) {
+            const syntheticEvent = {
+              target: { value: '' },
+            } as React.ChangeEvent<HTMLTextAreaElement>;
+            handleInputChange(syntheticEvent);
+          }
+        }
+      }
+    };
+
+    const handleFileUpload = () => {
+      const input = document.createElement('input');
+      input.type = 'file';
+      input.accept = 'image/*';
+
+      input.onchange = async (e) => {
+        const file = (e.target as HTMLInputElement).files?.[0];
+
+        if (file) {
+          const reader = new FileReader();
+
+          reader.onload = (e) => {
+            const base64Image = e.target?.result as string;
+            setUploadedFiles?.([...uploadedFiles, file]);
+            setImageDataList?.([...imageDataList, base64Image]);
+          };
+          reader.readAsDataURL(file);
+        }
+      };
+
+      input.click();
+    };
+
+    const handlePaste = async (e: React.ClipboardEvent) => {
+      const items = e.clipboardData?.items;
+
+      if (!items) {
+        return;
+      }
+
+      for (const item of items) {
+        if (item.type.startsWith('image/')) {
+          e.preventDefault();
+
+          const file = item.getAsFile();
+
+          if (file) {
+            const reader = new FileReader();
+
+            reader.onload = (e) => {
+              const base64Image = e.target?.result as string;
+              setUploadedFiles?.([...uploadedFiles, file]);
+              setImageDataList?.([...imageDataList, base64Image]);
+            };
+            reader.readAsDataURL(file);
+          }
+
+          break;
+        }
+      }
+    };
+
+    const baseChat = (
+      <div
+        ref={ref}
+        className={classNames(styles.BaseChat, 'relative flex h-full w-full overflow-hidden')}
+        data-chat-visible={showChat}
+      >
+        <ClientOnly>{() => <Menu />}</ClientOnly>
+        <div ref={scrollRef} className="flex flex-col lg:flex-row overflow-y-auto w-full h-full">
+          <div className={classNames(styles.Chat, 'flex flex-col flex-grow lg:min-w-[var(--chat-min-width)] h-full')}>
+            {!chatStarted && (
+              <div id="intro" className="mt-[16vh] max-w-chat mx-auto text-center px-4 lg:px-0">
+                <h1 className="text-3xl lg:text-6xl font-bold text-bolt-elements-textPrimary mb-4 animate-fade-in">
+                  Where ideas begin
+                </h1>
+                <p className="text-md lg:text-xl mb-8 text-bolt-elements-textSecondary animate-fade-in animation-delay-200">
+                  Bring ideas to life in seconds or get help on existing projects.
+                </p>
+              </div>
+            )}
+            <div
+              className={classNames('pt-6 px-2 sm:px-6', {
+                'h-full flex flex-col': chatStarted,
+              })}
+            >
+              <ClientOnly>
+                {() => {
+                  return chatStarted ? (
+                    <Messages
+                      ref={messageRef}
+                      className="flex flex-col w-full flex-1 max-w-chat pb-6 mx-auto z-1"
+                      messages={messages}
+                      isStreaming={isStreaming}
+                    />
+                  ) : null;
+                }}
+              </ClientOnly>
+              <div
+                className={classNames('flex flex-col gap-4 w-full max-w-chat mx-auto z-prompt mb-6', {
+                  'sticky bottom-2': chatStarted,
+                })}
+              >
+                <div className="bg-bolt-elements-background-depth-2">
+                  {actionAlert && (
+                    <ChatAlert
+                      alert={actionAlert}
+                      clearAlert={() => clearAlert?.()}
+                      postMessage={(message) => {
+                        sendMessage?.({} as any, message);
+                        clearAlert?.();
+                      }}
+                    />
+                  )}
+                </div>
+                <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',
+
+                    /*
+                     * {
+                     *   'sticky bottom-2': chatStarted,
+                     * },
+                     */
+                  )}
+                >
+                  <svg className={classNames(styles.PromptEffectContainer)}>
+                    <defs>
+                      <linearGradient
+                        id="line-gradient"
+                        x1="20%"
+                        y1="0%"
+                        x2="-14%"
+                        y2="10%"
+                        gradientUnits="userSpaceOnUse"
+                        gradientTransform="rotate(-45)"
+                      >
+                        <stop offset="0%" stopColor="#b44aff" stopOpacity="0%"></stop>
+                        <stop offset="40%" stopColor="#b44aff" stopOpacity="80%"></stop>
+                        <stop offset="50%" stopColor="#b44aff" stopOpacity="80%"></stop>
+                        <stop offset="100%" stopColor="#b44aff" stopOpacity="0%"></stop>
+                      </linearGradient>
+                      <linearGradient id="shine-gradient">
+                        <stop offset="0%" stopColor="white" stopOpacity="0%"></stop>
+                        <stop offset="40%" stopColor="#ffffff" stopOpacity="80%"></stop>
+                        <stop offset="50%" stopColor="#ffffff" stopOpacity="80%"></stop>
+                        <stop offset="100%" stopColor="white" stopOpacity="0%"></stop>
+                      </linearGradient>
+                    </defs>
+                    <rect className={classNames(styles.PromptEffectLine)} pathLength="100" strokeLinecap="round"></rect>
+                    <rect className={classNames(styles.PromptShine)} x="48" y="24" width="70" height="1"></rect>
+                  </svg>
+                  <div>
+                    <ClientOnly>
+                      {() => (
+                        <div className={isModelSettingsCollapsed ? 'hidden' : ''}>
+                          <ModelSelector
+                            key={provider?.name + ':' + modelList.length}
+                            model={model}
+                            setModel={setModel}
+                            modelList={modelList}
+                            provider={provider}
+                            setProvider={setProvider}
+                            providerList={providerList || (PROVIDER_LIST as ProviderInfo[])}
+                            apiKeys={apiKeys}
+                            modelLoading={isModelLoading}
+                          />
+                          {(providerList || []).length > 0 && provider && (
+                            <APIKeyManager
+                              provider={provider}
+                              apiKey={apiKeys[provider.name] || ''}
+                              setApiKey={(key) => {
+                                onApiKeysChange(provider.name, key);
+                              }}
+                            />
+                          )}
+                        </div>
+                      )}
+                    </ClientOnly>
+                  </div>
+                  <FilePreview
+                    files={uploadedFiles}
+                    imageDataList={imageDataList}
+                    onRemove={(index) => {
+                      setUploadedFiles?.(uploadedFiles.filter((_, i) => i !== index));
+                      setImageDataList?.(imageDataList.filter((_, i) => i !== index));
+                    }}
+                  />
+                  <ClientOnly>
+                    {() => (
+                      <ScreenshotStateManager
+                        setUploadedFiles={setUploadedFiles}
+                        setImageDataList={setImageDataList}
+                        uploadedFiles={uploadedFiles}
+                        imageDataList={imageDataList}
+                      />
+                    )}
+                  </ClientOnly>
+                  <div
+                    className={classNames(
+                      'relative shadow-xs border border-bolt-elements-borderColor backdrop-blur rounded-lg',
+                    )}
+                  >
+                    <textarea
+                      ref={textareaRef}
+                      className={classNames(
+                        'w-full pl-4 pt-4 pr-16 outline-none resize-none text-bolt-elements-textPrimary placeholder-bolt-elements-textTertiary bg-transparent text-sm',
+                        'transition-all duration-200',
+                        'hover:border-bolt-elements-focus',
+                      )}
+                      onDragEnter={(e) => {
+                        e.preventDefault();
+                        e.currentTarget.style.border = '2px solid #1488fc';
+                      }}
+                      onDragOver={(e) => {
+                        e.preventDefault();
+                        e.currentTarget.style.border = '2px solid #1488fc';
+                      }}
+                      onDragLeave={(e) => {
+                        e.preventDefault();
+                        e.currentTarget.style.border = '1px solid var(--bolt-elements-borderColor)';
+                      }}
+                      onDrop={(e) => {
+                        e.preventDefault();
+                        e.currentTarget.style.border = '1px solid var(--bolt-elements-borderColor)';
+
+                        const files = Array.from(e.dataTransfer.files);
+                        files.forEach((file) => {
+                          if (file.type.startsWith('image/')) {
+                            const reader = new FileReader();
+
+                            reader.onload = (e) => {
+                              const base64Image = e.target?.result as string;
+                              setUploadedFiles?.([...uploadedFiles, file]);
+                              setImageDataList?.([...imageDataList, base64Image]);
+                            };
+                            reader.readAsDataURL(file);
+                          }
+                        });
+                      }}
+                      onKeyDown={(event) => {
+                        if (event.key === 'Enter') {
+                          if (event.shiftKey) {
+                            return;
+                          }
+
+                          event.preventDefault();
+
+                          if (isStreaming) {
+                            handleStop?.();
+                            return;
+                          }
+
+                          // ignore if using input method engine
+                          if (event.nativeEvent.isComposing) {
+                            return;
+                          }
+
+                          handleSendMessage?.(event);
+                        }
+                      }}
+                      value={input}
+                      onChange={(event) => {
+                        handleInputChange?.(event);
+                      }}
+                      onPaste={handlePaste}
+                      style={{
+                        minHeight: TEXTAREA_MIN_HEIGHT,
+                        maxHeight: TEXTAREA_MAX_HEIGHT,
+                      }}
+                      placeholder="How can Bolt help you today?"
+                      translate="no"
+                    />
+                    <ClientOnly>
+                      {() => (
+                        <SendButton
+                          show={input.length > 0 || isStreaming || uploadedFiles.length > 0}
+                          isStreaming={isStreaming}
+                          disabled={!providerList || providerList.length === 0}
+                          onClick={(event) => {
+                            if (isStreaming) {
+                              handleStop?.();
+                              return;
+                            }
+
+                            if (input.length > 0 || uploadedFiles.length > 0) {
+                              handleSendMessage?.(event);
+                            }
+                          }}
+                        />
+                      )}
+                    </ClientOnly>
+                    <div className="flex justify-between items-center text-sm p-4 pt-2">
+                      <div className="flex gap-1 items-center">
+                        <IconButton title="Upload file" className="transition-all" onClick={() => handleFileUpload()}>
+                          <div className="i-ph:paperclip text-xl"></div>
+                        </IconButton>
+                        <IconButton
+                          title="Enhance prompt"
+                          disabled={input.length === 0 || enhancingPrompt}
+                          className={classNames('transition-all', enhancingPrompt ? 'opacity-100' : '')}
+                          onClick={() => {
+                            enhancePrompt?.();
+                            toast.success('Prompt enhanced!');
+                          }}
+                        >
+                          {enhancingPrompt ? (
+                            <div className="i-svg-spinners:90-ring-with-bg text-bolt-elements-loader-progress text-xl animate-spin"></div>
+                          ) : (
+                            <div className="i-bolt:stars text-xl"></div>
+                          )}
+                        </IconButton>
+
+                        <SpeechRecognitionButton
+                          isListening={isListening}
+                          onStart={startListening}
+                          onStop={stopListening}
+                          disabled={isStreaming}
+                        />
+                        {chatStarted && <ClientOnly>{() => <ExportChatButton exportChat={exportChat} />}</ClientOnly>}
+                        <IconButton
+                          title="Model Settings"
+                          className={classNames('transition-all flex items-center gap-1', {
+                            'bg-bolt-elements-item-backgroundAccent text-bolt-elements-item-contentAccent':
+                              isModelSettingsCollapsed,
+                            'bg-bolt-elements-item-backgroundDefault text-bolt-elements-item-contentDefault':
+                              !isModelSettingsCollapsed,
+                          })}
+                          onClick={() => setIsModelSettingsCollapsed(!isModelSettingsCollapsed)}
+                          disabled={!providerList || providerList.length === 0}
+                        >
+                          <div className={`i-ph:caret-${isModelSettingsCollapsed ? 'right' : 'down'} text-lg`} />
+                          {isModelSettingsCollapsed ? <span className="text-xs">{model}</span> : <span />}
+                        </IconButton>
+                      </div>
+                      {input.length > 3 ? (
+                        <div className="text-xs text-bolt-elements-textTertiary">
+                          Use <kbd className="kdb px-1.5 py-0.5 rounded bg-bolt-elements-background-depth-2">Shift</kbd>{' '}
+                          + <kbd className="kdb px-1.5 py-0.5 rounded bg-bolt-elements-background-depth-2">Return</kbd>{' '}
+                          a new line
+                        </div>
+                      ) : null}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div className="flex flex-col justify-center gap-5">
+              {!chatStarted && (
+                <div className="flex justify-center gap-2">
+                  {ImportButtons(importChat)}
+                  <GitCloneButton importChat={importChat} />
+                </div>
+              )}
+              {!chatStarted &&
+                ExamplePrompts((event, messageInput) => {
+                  if (isStreaming) {
+                    handleStop?.();
+                    return;
+                  }
+
+                  handleSendMessage?.(event, messageInput);
+                })}
+              {!chatStarted && <StarterTemplates />}
+            </div>
+          </div>
+          <ClientOnly>{() => <Workbench chatStarted={chatStarted} isStreaming={isStreaming} />}</ClientOnly>
+        </div>
+      </div>
+    );
+
+    return <Tooltip.Provider delayDuration={200}>{baseChat}</Tooltip.Provider>;
+  },
+);

app/components/chat/Chat.client.tsx

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

app/components/chat/ChatAlert.tsx

@@ -0,0 +1,108 @@
+import { AnimatePresence, motion } from 'framer-motion';
+import type { ActionAlert } from '~/types/actions';
+import { classNames } from '~/utils/classNames';
+
+interface Props {
+  alert: ActionAlert;
+  clearAlert: () => void;
+  postMessage: (message: string) => void;
+}
+
+export default function ChatAlert({ alert, clearAlert, postMessage }: Props) {
+  const { description, content, source } = alert;
+
+  const isPreview = source === 'preview';
+  const title = isPreview ? 'Preview Error' : 'Terminal Error';
+  const message = isPreview
+    ? 'We encountered an error while running the preview. Would you like Bolt to analyze and help resolve this issue?'
+    : 'We encountered an error while running terminal commands. Would you like Bolt to analyze and help resolve this issue?';
+
+  return (
+    <AnimatePresence>
+      <motion.div
+        initial={{ opacity: 0, y: -20 }}
+        animate={{ opacity: 1, y: 0 }}
+        exit={{ opacity: 0, y: -20 }}
+        transition={{ duration: 0.3 }}
+        className={`rounded-lg border border-bolt-elements-borderColor bg-bolt-elements-background-depth-2 p-4`}
+      >
+        <div className="flex items-start">
+          {/* Icon */}
+          <motion.div
+            className="flex-shrink-0"
+            initial={{ scale: 0 }}
+            animate={{ scale: 1 }}
+            transition={{ delay: 0.2 }}
+          >
+            <div className={`i-ph:warning-duotone text-xl text-bolt-elements-button-danger-text`}></div>
+          </motion.div>
+          {/* Content */}
+          <div className="ml-3 flex-1">
+            <motion.h3
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              transition={{ delay: 0.1 }}
+              className={`text-sm font-medium text-bolt-elements-textPrimary`}
+            >
+              {title}
+            </motion.h3>
+            <motion.div
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              transition={{ delay: 0.2 }}
+              className={`mt-2 text-sm text-bolt-elements-textSecondary`}
+            >
+              <p>{message}</p>
+              {description && (
+                <div className="text-xs text-bolt-elements-textSecondary p-2 bg-bolt-elements-background-depth-3 rounded mt-4 mb-4">
+                  Error: {description}
+                </div>
+              )}
+            </motion.div>
+
+            {/* Actions */}
+            <motion.div
+              className="mt-4"
+              initial={{ opacity: 0, y: 10 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: 0.3 }}
+            >
+              <div className={classNames(' flex gap-2')}>
+                <button
+                  onClick={() =>
+                    postMessage(
+                      `*Fix this ${isPreview ? 'preview' : 'terminal'} error* \n\`\`\`${isPreview ? 'js' : 'sh'}\n${content}\n\`\`\`\n`,
+                    )
+                  }
+                  className={classNames(
+                    `px-2 py-1.5 rounded-md text-sm font-medium`,
+                    'bg-bolt-elements-button-primary-background',
+                    'hover:bg-bolt-elements-button-primary-backgroundHover',
+                    'focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-bolt-elements-button-danger-background',
+                    'text-bolt-elements-button-primary-text',
+                    'flex items-center gap-1.5',
+                  )}
+                >
+                  <div className="i-ph:chat-circle-duotone"></div>
+                  Ask Bolt
+                </button>
+                <button
+                  onClick={clearAlert}
+                  className={classNames(
+                    `px-2 py-1.5 rounded-md text-sm font-medium`,
+                    'bg-bolt-elements-button-secondary-background',
+                    'hover:bg-bolt-elements-button-secondary-backgroundHover',
+                    'focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-bolt-elements-button-secondary-background',
+                    'text-bolt-elements-button-secondary-text',
+                  )}
+                >
+                  Dismiss
+                </button>
+              </div>
+            </motion.div>
+          </div>
+        </div>
+      </motion.div>
+    </AnimatePresence>
+  );
+}

app/components/chat/CodeBlock.module.scss

@@ -0,0 +1,10 @@
+.CopyButtonContainer {
+  button:before {
+    content: 'Copied';
+    font-size: 12px;
+    position: absolute;
+    left: -53px;
+    padding: 2px 6px;
+    height: 30px;
+  }
+}