feat: redact file contents from chat and put latest files into system prompt (#904)

app/components/chat/Chat.client.tsx

@@ -118,7 +118,7 @@ export const ChatImpl = memo(
     const [searchParams, setSearchParams] = useSearchParams();
     const files = useStore(workbenchStore.files);
     const actionAlert = useStore(workbenchStore.alert);
-    const { activeProviders, promptId } = useSettings();
+    const { activeProviders, promptId, contextOptimizationEnabled } = useSettings();
 
     const [model, setModel] = useState(() => {
       const savedModel = Cookies.get('selectedModel');
@@ -141,6 +141,7 @@ export const ChatImpl = memo(
         apiKeys,
         files,
         promptId,
+        contextOptimization: contextOptimizationEnabled,
       },
       sendExtraMessageFields: true,
       onError: (error) => {

app/components/settings/features/FeaturesTab.tsx

@@ -14,6 +14,8 @@ export default function FeaturesTab() {
     enableLatestBranch,
     promptId,
     setPromptId,
+    enableContextOptimization,
+    contextOptimizationEnabled,
   } = useSettings();
 
   const handleToggle = (enabled: boolean) => {
@@ -39,6 +41,19 @@ export default function FeaturesTab() {
             </div>
             <Switch className="ml-auto" checked={isLatestBranch} onCheckedChange={enableLatestBranch} />
           </div>
+          <div className="flex items-center justify-between">
+            <div>
+              <span className="text-bolt-elements-textPrimary">Use Context Optimization</span>
+              <p className="text-sm text-bolt-elements-textSecondary">
+                redact file contents form chat and puts the latest file contents on the system prompt
+              </p>
+            </div>
+            <Switch
+              className="ml-auto"
+              checked={contextOptimizationEnabled}
+              onCheckedChange={enableContextOptimization}
+            />
+          </div>
         </div>
       </div>
 

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

@@ -150,8 +150,9 @@ export async function streamText(props: {
   files?: FileMap;
   providerSettings?: Record<string, IProviderSetting>;
   promptId?: string;
+  contextOptimization?: boolean;
 }) {
-  const { messages, env: serverEnv, options, apiKeys, files, providerSettings, promptId } = props;
+  const { messages, env: serverEnv, options, apiKeys, files, providerSettings, promptId, contextOptimization } = props;
 
   // console.log({serverEnv});
 
@@ -170,9 +171,11 @@ export async function streamText(props: {
 
       return { ...message, content };
     } else if (message.role == 'assistant') {
-      const content = message.content;
+      let content = message.content;
 
-      // content = simplifyBoltActions(content);
+      if (contextOptimization) {
+        content = simplifyBoltActions(content);
+      }
 
       return { ...message, content };
     }
@@ -192,11 +195,9 @@ export async function streamText(props: {
       allowedHtmlElements: allowedHTMLElements,
       modificationTagName: MODIFICATIONS_TAG_NAME,
     }) ?? getSystemPrompt();
-  let codeContext = '';
 
-  if (files) {
+  if (files && contextOptimization) {
-    codeContext = createFilesContext(files);
+    const codeContext = createFilesContext(files);
-    codeContext = '';
     systemPrompt = `${systemPrompt}\n\n ${codeContext}`;
   }
 

app/lib/hooks/useSettings.tsx

@@ -7,6 +7,7 @@ import {
   promptStore,
   providersStore,
   latestBranchStore,
+  enableContextOptimizationStore,
 } from '~/lib/stores/settings';
 import { useCallback, useEffect, useState } from 'react';
 import Cookies from 'js-cookie';
@@ -31,6 +32,7 @@ export function useSettings() {
   const isLocalModel = useStore(isLocalModelsEnabled);
   const isLatestBranch = useStore(latestBranchStore);
   const [activeProviders, setActiveProviders] = useState<ProviderInfo[]>([]);
+  const contextOptimizationEnabled = useStore(enableContextOptimizationStore);
 
   // Function to check if we're on stable version
   const checkIsStableVersion = async () => {
@@ -118,6 +120,12 @@ export function useSettings() {
     } else {
       latestBranchStore.set(savedLatestBranch === 'true');
     }
+
+    const savedContextOptimizationEnabled = Cookies.get('contextOptimizationEnabled');
+
+    if (savedContextOptimizationEnabled) {
+      enableContextOptimizationStore.set(savedContextOptimizationEnabled === 'true');
+    }
   }, []);
 
   // writing values to cookies on change
@@ -179,6 +187,12 @@ export function useSettings() {
     Cookies.set('isLatestBranch', String(enabled));
   }, []);
 
+  const enableContextOptimization = useCallback((enabled: boolean) => {
+    enableContextOptimizationStore.set(enabled);
+    logStore.logSystem(`Context optimization ${enabled ? 'enabled' : 'disabled'}`);
+    Cookies.set('contextOptimizationEnabled', String(enabled));
+  }, []);
+
   return {
     providers,
     activeProviders,
@@ -193,5 +207,7 @@ export function useSettings() {
     setPromptId,
     isLatestBranch,
     enableLatestBranch,
+    contextOptimizationEnabled,
+    enableContextOptimization,
   };
 }

app/lib/stores/settings.ts

@@ -39,6 +39,9 @@ PROVIDER_LIST.forEach((provider) => {
     },
   };
 });
+
+//TODO: need to create one single map for all these flags
+
 export const providersStore = map<ProviderSetting>(initialProviderSettings);
 
 export const isDebugMode = atom(false);
@@ -50,3 +53,5 @@ export const isLocalModelsEnabled = atom(true);
 export const promptStore = atom<string>('default');
 
 export const latestBranchStore = atom(false);
+
+export const enableContextOptimizationStore = atom(false);

app/routes/api.chat.ts

@@ -29,10 +29,11 @@ function parseCookies(cookieHeader: string): Record<string, string> {
 }
 
 async function chatAction({ context, request }: ActionFunctionArgs) {
-  const { messages, files, promptId } = await request.json<{
+  const { messages, files, promptId, contextOptimization } = await request.json<{
     messages: Messages;
     files: any;
     promptId?: string;
+    contextOptimization: boolean;
   }>();
 
   const cookieHeader = request.headers.get('Cookie');
@@ -100,6 +101,7 @@ async function chatAction({ context, request }: ActionFunctionArgs) {
           files,
           providerSettings,
           promptId,
+          contextOptimization,
         });
 
         return stream.switchSource(result.toDataStream());
@@ -114,6 +116,7 @@ async function chatAction({ context, request }: ActionFunctionArgs) {
       files,
       providerSettings,
       promptId,
+      contextOptimization,
     });
 
     stream.switchSource(result.toDataStream());