feat: added Automatic Code Template Detection And Import (#867)

* initial setup

* updated template list

* added optional switch to control this feature

* removed some logs

app/components/chat/Chat.client.tsx

@@ -22,6 +22,7 @@ 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',
@@ -116,9 +117,10 @@ export const ChatImpl = memo(
     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, contextOptimizationEnabled } = useSettings();
+    const { activeProviders, promptId, autoSelectTemplate, contextOptimizationEnabled } = useSettings();
 
     const [model, setModel] = useState(() => {
       const savedModel = Cookies.get('selectedModel');
@@ -135,7 +137,7 @@ export const ChatImpl = memo(
 
     const [apiKeys, setApiKeys] = useState<Record<string, string>>({});
 
-    const { messages, isLoading, input, handleInputChange, setInput, stop, append } = useChat({
+    const { messages, isLoading, input, handleInputChange, setInput, stop, append, setMessages, reload } = useChat({
       api: '/api/chat',
       body: {
         apiKeys,
@@ -266,6 +268,110 @@ export const ChatImpl = memo(
 
       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 = await selectStarterTemplate({
+          message: messageInput,
+          model,
+          provider,
+        });
+
+        if (template !== 'blank') {
+          const temResp = await getTemplates(template);
+
+          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
@@ -368,7 +474,7 @@ export const ChatImpl = memo(
         input={input}
         showChat={showChat}
         chatStarted={chatStarted}
-        isStreaming={isLoading}
+        isStreaming={isLoading || fakeLoading}
         enhancingPrompt={enhancingPrompt}
         promptEnhanced={promptEnhanced}
         sendMessage={sendMessage}

app/components/chat/Messages.client.tsx

@@ -1,5 +1,5 @@
 import type { Message } from 'ai';
-import React from 'react';
+import React, { Fragment } from 'react';
 import { classNames } from '~/utils/classNames';
 import { AssistantMessage } from './AssistantMessage';
 import { UserMessage } from './UserMessage';
@@ -44,10 +44,15 @@ export const Messages = React.forwardRef<HTMLDivElement, MessagesProps>((props:
     <div id={id} ref={ref} className={props.className}>
       {messages.length > 0
         ? messages.map((message, index) => {
-            const { role, content, id: messageId } = message;
+            const { role, content, id: messageId, annotations } = message;
             const isUserMessage = role === 'user';
             const isFirst = index === 0;
             const isLast = index === messages.length - 1;
+            const isHidden = annotations?.includes('hidden');
+
+            if (isHidden) {
+              return <Fragment key={index} />;
+            }
 
             return (
               <div

app/components/settings/features/FeaturesTab.tsx

@@ -14,6 +14,8 @@ export default function FeaturesTab() {
     enableLatestBranch,
     promptId,
     setPromptId,
+    autoSelectTemplate,
+    setAutoSelectTemplate,
     enableContextOptimization,
     contextOptimizationEnabled,
   } = useSettings();
@@ -35,12 +37,21 @@ export default function FeaturesTab() {
           <div className="flex items-center justify-between">
             <div>
               <span className="text-bolt-elements-textPrimary">Use Main Branch</span>
-              <p className="text-sm text-bolt-elements-textSecondary">
+              <p className="text-xs text-bolt-elements-textTertiary">
                 Check for updates against the main branch instead of stable
               </p>
             </div>
             <Switch className="ml-auto" checked={isLatestBranch} onCheckedChange={enableLatestBranch} />
           </div>
+          <div className="flex items-center justify-between">
+            <div>
+              <span className="text-bolt-elements-textPrimary">Auto Select Code Template</span>
+              <p className="text-xs text-bolt-elements-textTertiary">
+                Let Bolt select the best starter template for your project.
+              </p>
+            </div>
+            <Switch className="ml-auto" checked={autoSelectTemplate} onCheckedChange={setAutoSelectTemplate} />
+          </div>
           <div className="flex items-center justify-between">
             <div>
               <span className="text-bolt-elements-textPrimary">Use Context Optimization</span>
@@ -59,18 +70,22 @@ export default function FeaturesTab() {
 
       <div className="mb-6 border-t border-bolt-elements-borderColor pt-4">
         <h3 className="text-lg font-medium text-bolt-elements-textPrimary mb-4">Experimental Features</h3>
-        <p className="text-sm text-bolt-elements-textSecondary mb-4">
+        <p className="text-sm text-bolt-elements-textSecondary mb-10">
           Disclaimer: Experimental features may be unstable and are subject to change.
         </p>
-
-        <div className="flex items-center justify-between mb-2">
-          <span className="text-bolt-elements-textPrimary">Experimental Providers</span>
-          <Switch className="ml-auto" checked={isLocalModel} onCheckedChange={enableLocalModels} />
+        <div className="flex flex-col">
+          <div className="flex items-center justify-between mb-2">
+            <span className="text-bolt-elements-textPrimary">Experimental Providers</span>
+            <Switch className="ml-auto" checked={isLocalModel} onCheckedChange={enableLocalModels} />
+          </div>
+          <p className="text-xs text-bolt-elements-textTertiary mb-4">
+            Enable experimental providers such as Ollama, LMStudio, and OpenAILike.
+          </p>
         </div>
         <div className="flex items-start justify-between pt-4 mb-2 gap-2">
           <div className="flex-1 max-w-[200px]">
             <span className="text-bolt-elements-textPrimary">Prompt Library</span>
-            <p className="text-sm text-bolt-elements-textSecondary mb-4">
+            <p className="text-xs text-bolt-elements-textTertiary mb-4">
               Choose a prompt from the library to use as the system prompt.
             </p>
           </div>

app/lib/hooks/useSettings.tsx

@@ -7,6 +7,7 @@ import {
   promptStore,
   providersStore,
   latestBranchStore,
+  autoSelectStarterTemplate,
   enableContextOptimizationStore,
 } from '~/lib/stores/settings';
 import { useCallback, useEffect, useState } from 'react';
@@ -31,6 +32,7 @@ export function useSettings() {
   const promptId = useStore(promptStore);
   const isLocalModel = useStore(isLocalModelsEnabled);
   const isLatestBranch = useStore(latestBranchStore);
+  const autoSelectTemplate = useStore(autoSelectStarterTemplate);
   const [activeProviders, setActiveProviders] = useState<ProviderInfo[]>([]);
   const contextOptimizationEnabled = useStore(enableContextOptimizationStore);
 
@@ -121,6 +123,12 @@ export function useSettings() {
       latestBranchStore.set(savedLatestBranch === 'true');
     }
 
+    const autoSelectTemplate = Cookies.get('autoSelectTemplate');
+
+    if (autoSelectTemplate) {
+      autoSelectStarterTemplate.set(autoSelectTemplate === 'true');
+    }
+
     const savedContextOptimizationEnabled = Cookies.get('contextOptimizationEnabled');
 
     if (savedContextOptimizationEnabled) {
@@ -187,6 +195,12 @@ export function useSettings() {
     Cookies.set('isLatestBranch', String(enabled));
   }, []);
 
+  const setAutoSelectTemplate = useCallback((enabled: boolean) => {
+    autoSelectStarterTemplate.set(enabled);
+    logStore.logSystem(`Auto select template ${enabled ? 'enabled' : 'disabled'}`);
+    Cookies.set('autoSelectTemplate', String(enabled));
+  }, []);
+
   const enableContextOptimization = useCallback((enabled: boolean) => {
     enableContextOptimizationStore.set(enabled);
     logStore.logSystem(`Context optimization ${enabled ? 'enabled' : 'disabled'}`);
@@ -207,6 +221,8 @@ export function useSettings() {
     setPromptId,
     isLatestBranch,
     enableLatestBranch,
+    autoSelectTemplate,
+    setAutoSelectTemplate,
     contextOptimizationEnabled,
     enableContextOptimization,
   };

app/lib/runtime/message-parser.ts

@@ -109,7 +109,6 @@ export class StreamingMessageParser {
               // Remove markdown code block syntax if present and file is not markdown
               if (!currentAction.filePath.endsWith('.md')) {
                 content = cleanoutMarkdownSyntax(content);
-                console.log('content after cleanup', content);
               }
 
               content += '\n';

app/lib/stores/settings.ts

@@ -54,4 +54,5 @@ export const promptStore = atom<string>('default');
 
 export const latestBranchStore = atom(false);
 
+export const autoSelectStarterTemplate = atom(true);
 export const enableContextOptimizationStore = atom(false);

app/routes/api.llmcall.ts

@@ -0,0 +1,163 @@
+import { type ActionFunctionArgs } from '@remix-run/cloudflare';
+
+//import { StreamingTextResponse, parseStreamPart } from 'ai';
+import { streamText } from '~/lib/.server/llm/stream-text';
+import type { IProviderSetting, ProviderInfo } from '~/types/model';
+import { generateText } from 'ai';
+import { getModelList, PROVIDER_LIST } from '~/utils/constants';
+import { MAX_TOKENS } from '~/lib/.server/llm/constants';
+
+export async function action(args: ActionFunctionArgs) {
+  return llmCallAction(args);
+}
+
+function parseCookies(cookieHeader: string) {
+  const cookies: any = {};
+
+  // Split the cookie string by semicolons and spaces
+  const items = cookieHeader.split(';').map((cookie) => cookie.trim());
+
+  items.forEach((item) => {
+    const [name, ...rest] = item.split('=');
+
+    if (name && rest) {
+      // Decode the name and value, and join value parts in case it contains '='
+      const decodedName = decodeURIComponent(name.trim());
+      const decodedValue = decodeURIComponent(rest.join('=').trim());
+      cookies[decodedName] = decodedValue;
+    }
+  });
+
+  return cookies;
+}
+
+async function llmCallAction({ context, request }: ActionFunctionArgs) {
+  const { system, message, model, provider, streamOutput } = await request.json<{
+    system: string;
+    message: string;
+    model: string;
+    provider: ProviderInfo;
+    streamOutput?: boolean;
+  }>();
+
+  const { name: providerName } = provider;
+
+  // validate 'model' and 'provider' fields
+  if (!model || typeof model !== 'string') {
+    throw new Response('Invalid or missing model', {
+      status: 400,
+      statusText: 'Bad Request',
+    });
+  }
+
+  if (!providerName || typeof providerName !== 'string') {
+    throw new Response('Invalid or missing provider', {
+      status: 400,
+      statusText: 'Bad Request',
+    });
+  }
+
+  const cookieHeader = request.headers.get('Cookie');
+
+  // Parse the cookie's value (returns an object or null if no cookie exists)
+  const apiKeys = JSON.parse(parseCookies(cookieHeader || '').apiKeys || '{}');
+  const providerSettings: Record<string, IProviderSetting> = JSON.parse(
+    parseCookies(cookieHeader || '').providers || '{}',
+  );
+
+  if (streamOutput) {
+    try {
+      const result = await streamText({
+        options: {
+          system,
+        },
+        messages: [
+          {
+            role: 'user',
+            content: `${message}`,
+          },
+        ],
+        env: context.cloudflare.env,
+        apiKeys,
+        providerSettings,
+      });
+
+      return new Response(result.textStream, {
+        status: 200,
+        headers: {
+          'Content-Type': 'text/plain; charset=utf-8',
+        },
+      });
+    } catch (error: unknown) {
+      console.log(error);
+
+      if (error instanceof Error && error.message?.includes('API key')) {
+        throw new Response('Invalid or missing API key', {
+          status: 401,
+          statusText: 'Unauthorized',
+        });
+      }
+
+      throw new Response(null, {
+        status: 500,
+        statusText: 'Internal Server Error',
+      });
+    }
+  } else {
+    try {
+      const MODEL_LIST = await getModelList({ apiKeys, providerSettings, serverEnv: context.cloudflare.env as any });
+      const modelDetails = MODEL_LIST.find((m) => m.name === model);
+
+      if (!modelDetails) {
+        throw new Error('Model not found');
+      }
+
+      const dynamicMaxTokens = modelDetails && modelDetails.maxTokenAllowed ? modelDetails.maxTokenAllowed : MAX_TOKENS;
+
+      const providerInfo = PROVIDER_LIST.find((p) => p.name === provider.name);
+
+      if (!providerInfo) {
+        throw new Error('Provider not found');
+      }
+
+      const result = await generateText({
+        system,
+        messages: [
+          {
+            role: 'user',
+            content: `${message}`,
+          },
+        ],
+        model: providerInfo.getModelInstance({
+          model: modelDetails.name,
+          serverEnv: context.cloudflare.env as any,
+          apiKeys,
+          providerSettings,
+        }),
+        maxTokens: dynamicMaxTokens,
+        toolChoice: 'none',
+      });
+
+      return new Response(JSON.stringify(result), {
+        status: 200,
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      });
+    } catch (error: unknown) {
+      console.log(error);
+
+      if (error instanceof Error && error.message?.includes('API key')) {
+        throw new Response('Invalid or missing API key', {
+          status: 401,
+          statusText: 'Unauthorized',
+        });
+      }
+
+      throw new Response(null, {
+        status: 500,
+        statusText: 'Internal Server Error',
+      });
+    }
+  }
+}

app/utils/selectStarterTemplate.ts

@@ -0,0 +1,290 @@
+import ignore from 'ignore';
+import type { ProviderInfo } from '~/types/model';
+import type { Template } from '~/types/template';
+import { STARTER_TEMPLATES } from './constants';
+
+const starterTemplateSelectionPrompt = (templates: Template[]) => `
+You are an experienced developer who helps people choose the best starter template for their projects.
+
+Available templates:
+<template>
+  <name>blank</name>
+  <description>Empty starter for simple scripts and trivial tasks that don't require a full template setup</description>
+  <tags>basic, script</tags>
+</template>
+${templates
+  .map(
+    (template) => `
+<template>
+  <name>${template.name}</name>
+  <description>${template.description}</description>
+  ${template.tags ? `<tags>${template.tags.join(', ')}</tags>` : ''}
+</template>
+`,
+  )
+  .join('\n')}
+
+Response Format:
+<selection>
+  <templateName>{selected template name}</templateName>
+  <reasoning>{brief explanation for the choice}</reasoning>
+</selection>
+
+Examples:
+
+<example>
+User: I need to build a todo app
+Response:
+<selection>
+  <templateName>react-basic-starter</templateName>
+  <reasoning>Simple React setup perfect for building a todo application</reasoning>
+</selection>
+</example>
+
+<example>
+User: Write a script to generate numbers from 1 to 100
+Response:
+<selection>
+  <templateName>blank</templateName>
+  <reasoning>This is a simple script that doesn't require any template setup</reasoning>
+</selection>
+</example>
+
+Instructions:
+1. For trivial tasks and simple scripts, always recommend the blank template
+2. For more complex projects, recommend templates from the provided list
+3. Follow the exact XML format
+4. Consider both technical requirements and tags
+5. If no perfect match exists, recommend the closest option
+
+Important: Provide only the selection tags in your response, no additional text.
+`;
+
+const templates: Template[] = STARTER_TEMPLATES.filter((t) => !t.name.includes('shadcn'));
+
+const parseSelectedTemplate = (llmOutput: string): string | null => {
+  try {
+    // Extract content between <templateName> tags
+    const templateNameMatch = llmOutput.match(/<templateName>(.*?)<\/templateName>/);
+
+    if (!templateNameMatch) {
+      return null;
+    }
+
+    return templateNameMatch[1].trim();
+  } catch (error) {
+    console.error('Error parsing template selection:', error);
+    return null;
+  }
+};
+
+export const selectStarterTemplate = async (options: { message: string; model: string; provider: ProviderInfo }) => {
+  const { message, model, provider } = options;
+  const requestBody = {
+    message,
+    model,
+    provider,
+    system: starterTemplateSelectionPrompt(templates),
+  };
+  const response = await fetch('/api/llmcall', {
+    method: 'POST',
+    body: JSON.stringify(requestBody),
+  });
+  const respJson: { text: string } = await response.json();
+  console.log(respJson);
+
+  const { text } = respJson;
+  const selectedTemplate = parseSelectedTemplate(text);
+
+  if (selectedTemplate) {
+    return selectedTemplate;
+  } else {
+    console.log('No template selected, using blank template');
+
+    return 'blank';
+  }
+};
+
+const getGitHubRepoContent = async (
+  repoName: string,
+  path: string = '',
+): Promise<{ name: string; path: string; content: string }[]> => {
+  const baseUrl = 'https://api.github.com';
+
+  try {
+    // Fetch contents of the path
+    const response = await fetch(`${baseUrl}/repos/${repoName}/contents/${path}`, {
+      headers: {
+        Accept: 'application/vnd.github.v3+json',
+
+        // Add your GitHub token if needed
+        Authorization: 'token ' + import.meta.env.VITE_GITHUB_ACCESS_TOKEN,
+      },
+    });
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+
+    const data: any = await response.json();
+
+    // If it's a single file, return its content
+    if (!Array.isArray(data)) {
+      if (data.type === 'file') {
+        // If it's a file, get its content
+        const content = atob(data.content); // Decode base64 content
+        return [
+          {
+            name: data.name,
+            path: data.path,
+            content,
+          },
+        ];
+      }
+    }
+
+    // Process directory contents recursively
+    const contents = await Promise.all(
+      data.map(async (item: any) => {
+        if (item.type === 'dir') {
+          // Recursively get contents of subdirectories
+          return await getGitHubRepoContent(repoName, item.path);
+        } else if (item.type === 'file') {
+          // Fetch file content
+          const fileResponse = await fetch(item.url, {
+            headers: {
+              Accept: 'application/vnd.github.v3+json',
+              Authorization: 'token ' + import.meta.env.VITE_GITHUB_ACCESS_TOKEN,
+            },
+          });
+          const fileData: any = await fileResponse.json();
+          const content = atob(fileData.content); // Decode base64 content
+
+          return [
+            {
+              name: item.name,
+              path: item.path,
+              content,
+            },
+          ];
+        }
+
+        return [];
+      }),
+    );
+
+    // Flatten the array of contents
+    return contents.flat();
+  } catch (error) {
+    console.error('Error fetching repo contents:', error);
+    throw error;
+  }
+};
+
+export async function getTemplates(templateName: string) {
+  const template = STARTER_TEMPLATES.find((t) => t.name == templateName);
+
+  if (!template) {
+    return null;
+  }
+
+  const githubRepo = template.githubRepo;
+  const files = await getGitHubRepoContent(githubRepo);
+
+  let filteredFiles = files;
+
+  /*
+   * ignoring common unwanted files
+   * exclude    .git
+   */
+  filteredFiles = filteredFiles.filter((x) => x.path.startsWith('.git') == false);
+
+  // exclude    lock files
+  const comminLockFiles = ['package-lock.json', 'yarn.lock', 'pnpm-lock.yaml'];
+  filteredFiles = filteredFiles.filter((x) => comminLockFiles.includes(x.name) == false);
+
+  // exclude    .bolt
+  filteredFiles = filteredFiles.filter((x) => x.path.startsWith('.bolt') == false);
+
+  // check for ignore file in .bolt folder
+  const templateIgnoreFile = files.find((x) => x.path.startsWith('.bolt') && x.name == 'ignore');
+
+  const filesToImport = {
+    files: filteredFiles,
+    ignoreFile: filteredFiles,
+  };
+
+  if (templateIgnoreFile) {
+    // redacting files specified in ignore file
+    const ignorepatterns = templateIgnoreFile.content.split('\n').map((x) => x.trim());
+    const ig = ignore().add(ignorepatterns);
+
+    // filteredFiles = filteredFiles.filter(x => !ig.ignores(x.path))
+    const ignoredFiles = filteredFiles.filter((x) => ig.ignores(x.path));
+
+    filesToImport.files = filteredFiles;
+    filesToImport.ignoreFile = ignoredFiles;
+  }
+
+  const assistantMessage = `
+<boltArtifact id="imported-files" title="Importing Starter Files" type="bundled">
+${filesToImport.files
+  .map(
+    (file) =>
+      `<boltAction type="file" filePath="${file.path}">
+${file.content}
+</boltAction>`,
+  )
+  .join('\n')}
+</boltArtifact>
+`;
+  let userMessage = ``;
+  const templatePromptFile = files.filter((x) => x.path.startsWith('.bolt')).find((x) => x.name == 'prompt');
+
+  if (templatePromptFile) {
+    userMessage = `
+TEMPLATE INSTRUCTIONS:
+${templatePromptFile.content}
+
+IMPORTANT: Dont Forget to install the dependencies before running the app
+---
+`;
+  }
+
+  if (filesToImport.ignoreFile.length > 0) {
+    userMessage =
+      userMessage +
+      `
+STRICT FILE ACCESS RULES - READ CAREFULLY:
+
+The following files are READ-ONLY and must never be modified:
+${filesToImport.ignoreFile.map((file) => `- ${file.path}`).join('\n')}
+
+Permitted actions:
+✓ Import these files as dependencies
+✓ Read from these files
+✓ Reference these files
+
+Strictly forbidden actions:
+❌ Modify any content within these files
+❌ Delete these files
+❌ Rename these files
+❌ Move these files
+❌ Create new versions of these files
+❌ Suggest changes to these files
+
+Any attempt to modify these protected files will result in immediate termination of the operation.
+
+If you need to make changes to functionality, create new files instead of modifying the protected ones listed above.
+---
+`;
+    userMessage += `
+Now that the Template is imported please continue with my original request
+`;
+  }
+
+  return {
+    assistantMessage,
+    userMessage,
+  };
+}