Refactor Supabase prompt to use dynamic code injection (#2222)

e2e-tests/fixtures/generate-supabase-client.md

 BEGIN
 <dyad-write path="src/integrations/supabase/client.ts" description="Creating a supabase client.">
-$$SUPABASE_CLIENT_CODE$$
+// This file is automatically generated. Do not edit it directly.
+import { createClient } from '@supabase/supabase-js';
+
+const SUPABASE_URL = "https://fake-project-id.supabase.co";
+const SUPABASE_PUBLISHABLE_KEY = "test-publishable-key";
+
+// Import the supabase client like this:
+// import { supabase } from "@/integrations/supabase/client";
+
+export const supabase = createClient(SUPABASE_URL, SUPABASE_PUBLISHABLE_KEY);
 </dyad-write>
 END

src/ipc/handlers/chat_stream_handlers.ts

@@ -22,7 +22,7 @@ import {
 } from "../../prompts/system_prompt";
 import { getThemePrompt } from "../../shared/themes";
 import {
-  SUPABASE_AVAILABLE_SYSTEM_PROMPT,
+  getSupabaseAvailableSystemPrompt,
   SUPABASE_NOT_AVAILABLE_SYSTEM_PROMPT,
 } from "../../prompts/supabase_prompt";
 import { getDyadAppPath } from "../../paths/paths";
@@ -663,9 +663,14 @@ ${componentSnippet}
           updatedChat.app?.supabaseProjectId &&
           isSupabaseConnected(settings)
         ) {
+          const supabaseClientCode = await getSupabaseClientCode({
+            projectId: updatedChat.app.supabaseProjectId,
+            organizationSlug:
+              updatedChat.app.supabaseOrganizationSlug ?? null,
+          });
           systemPrompt +=
             "\n\n" +
-            SUPABASE_AVAILABLE_SYSTEM_PROMPT +
+            getSupabaseAvailableSystemPrompt(supabaseClientCode) +
             "\n\n" +
             // For local agent, we will explicitly fetch the database context when needed.
             (settings.selectedChatMode === "local-agent"
@@ -962,20 +967,6 @@ This conversation includes one or more image attachments. When the user uploads
         }: {
           fullResponse: string;
         }) => {
-          if (
-            fullResponse.includes("$$SUPABASE_CLIENT_CODE$$") &&
-            updatedChat.app?.supabaseProjectId
-          ) {
-            const supabaseClientCode = await getSupabaseClientCode({
-              projectId: updatedChat.app?.supabaseProjectId,
-              organizationSlug:
-                updatedChat.app?.supabaseOrganizationSlug ?? null,
-            });
-            fullResponse = fullResponse.replace(
-              "$$SUPABASE_CLIENT_CODE$$",
-              supabaseClientCode,
-            );
-          }
           // Store the current partial response
           partialResponses.set(req.chatId, fullResponse);
           // Save to DB (in case user is switching chats during the stream)

src/ipc/handlers/token_count_handlers.ts

@@ -7,13 +7,16 @@ import {
 } from "../../prompts/system_prompt";
 import { getThemePrompt } from "../../shared/themes";
 import {
-  SUPABASE_AVAILABLE_SYSTEM_PROMPT,
+  getSupabaseAvailableSystemPrompt,
   SUPABASE_NOT_AVAILABLE_SYSTEM_PROMPT,
 } from "../../prompts/supabase_prompt";
 import { getDyadAppPath } from "../../paths/paths";
 import log from "electron-log";
 import { extractCodebase } from "../../utils/codebase";
-import { getSupabaseContext } from "../../supabase_admin/supabase_context";
+import {
+  getSupabaseContext,
+  getSupabaseClientCode,
+} from "../../supabase_admin/supabase_context";
 
 import { TokenCountParams } from "../ipc_types";
 import { TokenCountResult } from "../ipc_types";
@@ -76,7 +79,12 @@ export function registerTokenCountHandlers() {
       let supabaseContext = "";
 
       if (chat.app?.supabaseProjectId) {
-        systemPrompt += "\n\n" + SUPABASE_AVAILABLE_SYSTEM_PROMPT;
+        const supabaseClientCode = await getSupabaseClientCode({
+          projectId: chat.app.supabaseProjectId,
+          organizationSlug: chat.app.supabaseOrganizationSlug ?? null,
+        });
+        systemPrompt +=
+          "\n\n" + getSupabaseAvailableSystemPrompt(supabaseClientCode);
         supabaseContext = await getSupabaseContext({
           supabaseProjectId: chat.app.supabaseProjectId,
           organizationSlug: chat.app.supabaseOrganizationSlug ?? null,

src/prompts/supabase_prompt.ts

@@ -2,23 +2,24 @@
 // which is Apache 2.0 licensed and copyrighted to Jijun Leng
 // https://github.com/jjleng/code-panda/blob/61f1fa514c647de1a8d2ad7f85102d49c6db2086/LICENSE
 
-export const SUPABASE_AVAILABLE_SYSTEM_PROMPT = `
+export function getSupabaseAvailableSystemPrompt(supabaseClientCode: string) {
+  return `
 # Supabase Instructions
 
 The user has Supabase available for their app so use it for any auth, database or server-side functions.
 
-Make sure supabase client exists at src/integrations/supabase/client.ts. If it doesn't exist, create it.
+## Supabase Client Setup
 
-NOTE: I will replace $$SUPABASE_CLIENT_CODE$$ with the actual code. IF you need to write "src/integrations/supabase/client.ts",
-make sure you ALSO add this dependency: @supabase/supabase-js.
+Check if a Supabase client exists at \`src/integrations/supabase/client.ts\`.
 
-Example output:
+**If it doesn't exist**, do both of the following:
 
-<dyad-write path="src/integrations/supabase/client.ts" description="Creating a supabase client.">
-$$SUPABASE_CLIENT_CODE$$
-</dyad-write>
+1. **Create the client file** at \`src/integrations/supabase/client.ts\` (or the most appropriate path for the project structure) with this code:
+\`\`\`typescript
+${supabaseClientCode}
+\`\`\`
 
-<dyad-add-dependency packages="@supabase/supabase-js"></dyad-add-dependency>
+2. **Add the dependency** \`@supabase/supabase-js\` to the project.
 
 ## Auth
 
@@ -404,6 +405,7 @@ serve(async (req) => {
 })
 </dyad-write>
 `;
+}
 
 export const SUPABASE_NOT_AVAILABLE_SYSTEM_PROMPT = `
 If the user wants to use supabase or do something that requires auth, database or server-side functions (e.g. loading API keys, secrets),