Merge pull request #744 from thecodacus/system-prompt-variations

feat(experimental): Add Configurable System Prompts Feature

Author: thecodacus

README.md

@@ -43,6 +43,9 @@ https://thinktank.ottomator.ai
 - ✅ 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)
 - ⬜ **HIGH PRIORITY** - Prevent bolt from rewriting files as often (file locking and diffs)

app/commit.json

@@ -1 +1 @@
-{ "commit": "eb1d5417e77e699e0489f09814e87fb5afed9dd5" , "version": "" }
+{ "commit": "bb941802094c6186e805f99a6c165431ae86d216" }

app/components/chat/BaseChat.tsx

@@ -77,6 +77,8 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
       input = '',
       enhancingPrompt,
       handleInputChange,
+
+      // promptEnhanced,
       enhancePrompt,
       sendMessage,
       handleStop,

app/components/chat/Chat.client.tsx

@@ -93,7 +93,7 @@ export const ChatImpl = memo(
     const [uploadedFiles, setUploadedFiles] = useState<File[]>([]); // Move here
     const [imageDataList, setImageDataList] = useState<string[]>([]); // Move here
     const files = useStore(workbenchStore.files);
-    const { activeProviders } = useSettings();
+    const { activeProviders, promptId } = useSettings();
 
     const [model, setModel] = useState(() => {
       const savedModel = Cookies.get('selectedModel');
@@ -115,6 +115,7 @@ export const ChatImpl = memo(
       body: {
         apiKeys,
         files,
+        promptId,
       },
       sendExtraMessageFields: true,
       onError: (error) => {

app/components/settings/debug/DebugTab.tsx

@@ -303,7 +303,7 @@ const checkProviderStatus = async (url: string | null, providerName: string): Pr
 };
 
 export default function DebugTab() {
-  const { providers, latestBranch } = useSettings();
+  const { providers, isLatestBranch } = useSettings();
   const [activeProviders, setActiveProviders] = useState<ProviderStatus[]>([]);
   const [updateMessage, setUpdateMessage] = useState<string>('');
   const [systemInfo] = useState<SystemInfo>(getSystemInfo());
@@ -363,7 +363,7 @@ export default function DebugTab() {
       setIsCheckingUpdate(true);
       setUpdateMessage('Checking for updates...');
 
-      const branchToCheck = latestBranch ? 'main' : 'stable';
+      const branchToCheck = isLatestBranch ? 'main' : 'stable';
       console.log(`[Debug] Checking for updates against ${branchToCheck} branch`);
 
       const localCommitResponse = await fetch(GITHUB_URLS.commitJson(branchToCheck));
@@ -391,7 +391,7 @@ export default function DebugTab() {
     } finally {
       setIsCheckingUpdate(false);
     }
-  }, [isCheckingUpdate, latestBranch]);
+  }, [isCheckingUpdate, isLatestBranch]);
 
   const handleCopyToClipboard = useCallback(() => {
     const debugInfo = {
@@ -408,15 +408,15 @@ export default function DebugTab() {
       })),
       Version: {
         hash: versionHash.slice(0, 7),
-        branch: latestBranch ? 'main' : 'stable',
+        branch: isLatestBranch ? 'main' : 'stable',
       },
       Timestamp: new Date().toISOString(),
     };
 
     navigator.clipboard.writeText(JSON.stringify(debugInfo, null, 2)).then(() => {
       toast.success('Debug information copied to clipboard!');
     });
-  }, [activeProviders, systemInfo, latestBranch]);
+  }, [activeProviders, systemInfo, isLatestBranch]);
 
   return (
     <div className="p-4 space-y-6">
@@ -523,7 +523,7 @@ export default function DebugTab() {
               <p className="text-sm font-medium text-bolt-elements-textPrimary font-mono">
                 {versionHash.slice(0, 7)}
                 <span className="ml-2 text-xs text-bolt-elements-textSecondary">
-                  (v{versionTag || '0.0.1'}) - {latestBranch ? 'nightly' : 'stable'}
+                  (v{versionTag || '0.0.1'}) - {isLatestBranch ? 'nightly' : 'stable'}
                 </span>
               </p>
             </div>

app/components/settings/features/FeaturesTab.tsx

@@ -1,10 +1,20 @@
 import React from 'react';
 import { Switch } from '~/components/ui/Switch';
+import { PromptLibrary } from '~/lib/common/prompt-library';
 import { useSettings } from '~/lib/hooks/useSettings';
 
 export default function FeaturesTab() {
-  const { debug, enableDebugMode, isLocalModel, enableLocalModels, enableEventLogs, latestBranch, enableLatestBranch } =
-    useSettings();
+  const {
+    debug,
+    enableDebugMode,
+    isLocalModel,
+    enableLocalModels,
+    enableEventLogs,
+    isLatestBranch,
+    enableLatestBranch,
+    promptId,
+    setPromptId,
+  } = useSettings();
 
   const handleToggle = (enabled: boolean) => {
     enableDebugMode(enabled);
@@ -27,7 +37,7 @@ export default function FeaturesTab() {
                 Check for updates against the main branch instead of stable
               </p>
             </div>
-            <Switch className="ml-auto" checked={latestBranch} onCheckedChange={enableLatestBranch} />
+            <Switch className="ml-auto" checked={isLatestBranch} onCheckedChange={enableLatestBranch} />
           </div>
         </div>
       </div>
@@ -37,10 +47,28 @@ export default function FeaturesTab() {
         <p className="text-sm text-bolt-elements-textSecondary mb-4">
           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>
+        <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">
+              Choose a prompt from the library to use as the system prompt.
+            </p>
+          </div>
+          <select
+            value={promptId}
+            onChange={(e) => setPromptId(e.target.value)}
+            className="flex-1 p-2 ml-auto rounded-lg 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 transition-all text-sm min-w-[100px]"
+          >
+            {PromptLibrary.getList().map((x) => (
+              <option value={x.id}>{x.label}</option>
+            ))}
+          </select>
+        </div>
       </div>
     </div>
   );

app/lib/.server/llm/stream-text.ts

@@ -1,10 +1,20 @@
 import { convertToCoreMessages, streamText as _streamText } from 'ai';
 import { getModel } from '~/lib/.server/llm/model';
 import { MAX_TOKENS } from './constants';
-import { getSystemPrompt } from './prompts';
-import { DEFAULT_MODEL, DEFAULT_PROVIDER, getModelList, MODEL_REGEX, PROVIDER_REGEX } from '~/utils/constants';
+import { getSystemPrompt } from '~/lib/common/prompts/prompts';
+import {
+  DEFAULT_MODEL,
+  DEFAULT_PROVIDER,
+  getModelList,
+  MODEL_REGEX,
+  MODIFICATIONS_TAG_NAME,
+  PROVIDER_REGEX,
+  WORK_DIR,
+} from '~/utils/constants';
 import ignore from 'ignore';
 import type { IProviderSetting } from '~/types/model';
+import { PromptLibrary } from '~/lib/common/prompt-library';
+import { allowedHTMLElements } from '~/utils/markdown';
 
 interface ToolResult<Name extends string, Args, Result> {
   toolCallId: string;
@@ -139,8 +149,9 @@ export async function streamText(props: {
   apiKeys?: Record<string, string>;
   files?: FileMap;
   providerSettings?: Record<string, IProviderSetting>;
+  promptId?: string;
 }) {
-  const { messages, env, options, apiKeys, files, providerSettings } = props;
+  const { messages, env, options, apiKeys, files, providerSettings, promptId } = props;
   let currentModel = DEFAULT_MODEL;
   let currentProvider = DEFAULT_PROVIDER.name;
   const MODEL_LIST = await getModelList(apiKeys || {}, providerSettings);
@@ -170,11 +181,17 @@ export async function streamText(props: {
 
   const dynamicMaxTokens = modelDetails && modelDetails.maxTokenAllowed ? modelDetails.maxTokenAllowed : MAX_TOKENS;
 
-  let systemPrompt = getSystemPrompt();
+  let systemPrompt =
+    PromptLibrary.getPropmtFromLibrary(promptId || 'default', {
+      cwd: WORK_DIR,
+      allowedHtmlElements: allowedHTMLElements,
+      modificationTagName: MODIFICATIONS_TAG_NAME,
+    }) ?? getSystemPrompt();
   let codeContext = '';
 
   if (files) {
     codeContext = createFilesContext(files);
+    codeContext = '';
     systemPrompt = `${systemPrompt}\n\n ${codeContext}`;
   }
 

app/lib/common/prompt-library.ts

@@ -0,0 +1,49 @@
+import { getSystemPrompt } from './prompts/prompts';
+import optimized from './prompts/optimized';
+
+export interface PromptOptions {
+  cwd: string;
+  allowedHtmlElements: string[];
+  modificationTagName: string;
+}
+
+export class PromptLibrary {
+  static library: Record<
+    string,
+    {
+      label: string;
+      description: string;
+      get: (options: PromptOptions) => string;
+    }
+  > = {
+    default: {
+      label: 'Default Prompt',
+      description: 'This is the battle tested default system Prompt',
+      get: (options) => getSystemPrompt(options.cwd),
+    },
+    optimized: {
+      label: 'Optimized Prompt (experimental)',
+      description: 'an Experimental version of the prompt for lower token usage',
+      get: (options) => optimized(options),
+    },
+  };
+  static getList() {
+    return Object.entries(this.library).map(([key, value]) => {
+      const { label, description } = value;
+      return {
+        id: key,
+        label,
+        description,
+      };
+    });
+  }
+  static getPropmtFromLibrary(promptId: string, options: PromptOptions) {
+    const prompt = this.library[promptId];
+
+    if (!prompt) {
+      throw 'Prompt Now Found';
+    }
+
+    return this.library[promptId]?.get(options);
+  }
+}