Supabase support: client, auth & SQL

src/components/chat/ChatInput.tsx

@@ -12,6 +12,9 @@ import {
   Package,
   FileX,
   SendToBack,
+  Database,
+  ChevronsUpDown,
+  ChevronsDownUp,
 } from "lucide-react";
 import type React from "react";
 import { useCallback, useEffect, useRef, useState } from "react";
@@ -41,6 +44,8 @@ import { isPreviewOpenAtom } from "@/atoms/viewAtoms";
 import { useRunApp } from "@/hooks/useRunApp";
 import { AutoApproveSwitch } from "../AutoApproveSwitch";
 import { usePostHog } from "posthog-js/react";
+import { CodeHighlight } from "./CodeHighlight";
+
 export function ChatInput({ chatId }: { chatId?: number }) {
   const posthog = usePostHog();
   const [inputValue, setInputValue] = useAtom(chatInputValueAtom);
@@ -418,6 +423,18 @@ function ChatInputActions({
               </ul>
             </div>
           )}
+
+          {proposal.sqlQueries?.length > 0 && (
+            <div className="mb-3">
+              <h4 className="font-semibold mb-1">SQL Queries</h4>
+              <ul className="space-y-2">
+                {proposal.sqlQueries.map((query, index) => (
+                  <SqlQueryItem key={index} query={query} />
+                ))}
+              </ul>
+            </div>
+          )}
+
           {proposal.packagesAdded?.length > 0 && (
             <div className="mb-3">
               <h4 className="font-semibold mb-1">Packages Added</h4>
@@ -485,3 +502,34 @@ function getIconForFileChange(file: FileChange) {
       );
   }
 }
+
+// SQL Query item with expandable functionality
+function SqlQueryItem({ query }: { query: string }) {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  return (
+    <li
+      className="bg-(--background-lightest) hover:bg-(--background-lighter) rounded-lg px-3 py-2 border border-border cursor-pointer"
+      onClick={() => setIsExpanded(!isExpanded)}
+    >
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <Database size={16} className="text-muted-foreground flex-shrink-0" />
+          <span className="text-sm font-medium">SQL Query</span>
+        </div>
+        <div>
+          {isExpanded ? (
+            <ChevronsDownUp size={18} className="text-muted-foreground" />
+          ) : (
+            <ChevronsUpDown size={18} className="text-muted-foreground" />
+          )}
+        </div>
+      </div>
+      {isExpanded && (
+        <div className="mt-2 text-xs max-h-[200px] overflow-auto">
+          <CodeHighlight className="language-sql ">{query}</CodeHighlight>
+        </div>
+      )}
+    </li>
+  );
+}

src/components/chat/DyadExecuteSql.tsx

@@ -0,0 +1,79 @@
+import type React from "react";
+import type { ReactNode } from "react";
+import { useState } from "react";
+import {
+  ChevronsDownUp,
+  ChevronsUpDown,
+  Database,
+  Loader,
+  CircleX,
+} from "lucide-react";
+import { CodeHighlight } from "./CodeHighlight";
+import { CustomTagState } from "./stateTypes";
+
+interface DyadExecuteSqlProps {
+  children?: ReactNode;
+  node?: any;
+}
+
+export const DyadExecuteSql: React.FC<DyadExecuteSqlProps> = ({
+  children,
+  node,
+}) => {
+  const [isContentVisible, setIsContentVisible] = useState(false);
+  const state = node?.properties?.state as CustomTagState;
+  const inProgress = state === "pending";
+  const aborted = state === "aborted";
+
+  return (
+    <div
+      className={`bg-(--background-lightest) hover:bg-(--background-lighter) rounded-lg px-4 py-2 border my-2 cursor-pointer ${
+        inProgress
+          ? "border-amber-500"
+          : aborted
+          ? "border-red-500"
+          : "border-border"
+      }`}
+      onClick={() => setIsContentVisible(!isContentVisible)}
+    >
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <Database size={16} />
+          <span className="text-gray-700 dark:text-gray-300 font-medium text-sm">
+            SQL Query
+          </span>
+          {inProgress && (
+            <div className="flex items-center text-amber-600 text-xs">
+              <Loader size={14} className="mr-1 animate-spin" />
+              <span>Executing...</span>
+            </div>
+          )}
+          {aborted && (
+            <div className="flex items-center text-red-600 text-xs">
+              <CircleX size={14} className="mr-1" />
+              <span>Did not finish</span>
+            </div>
+          )}
+        </div>
+        <div className="flex items-center">
+          {isContentVisible ? (
+            <ChevronsDownUp
+              size={20}
+              className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+            />
+          ) : (
+            <ChevronsUpDown
+              size={20}
+              className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+            />
+          )}
+        </div>
+      </div>
+      {isContentVisible && (
+        <div className="text-xs">
+          <CodeHighlight className="language-sql">{children}</CodeHighlight>
+        </div>
+      )}
+    </div>
+  );
+};

src/components/chat/DyadMarkdownParser.tsx

@@ -5,6 +5,7 @@ import { DyadWrite } from "./DyadWrite";
 import { DyadRename } from "./DyadRename";
 import { DyadDelete } from "./DyadDelete";
 import { DyadAddDependency } from "./DyadAddDependency";
+import { DyadExecuteSql } from "./DyadExecuteSql";
 import { CodeHighlight } from "./CodeHighlight";
 import { useAtomValue } from "jotai";
 import { isStreamingAtom } from "@/atoms/chatAtoms";
@@ -73,6 +74,7 @@ function preprocessUnclosedTags(content: string): {
     "dyad-rename",
     "dyad-delete",
     "dyad-add-dependency",
+    "dyad-execute-sql",
   ];
 
   let processedContent = content;
@@ -131,6 +133,7 @@ function parseCustomTags(content: string): ContentPiece[] {
     "dyad-rename",
     "dyad-delete",
     "dyad-add-dependency",
+    "dyad-execute-sql",
   ];
 
   const tagPattern = new RegExp(
@@ -271,6 +274,19 @@ function renderCustomTag(
         </DyadAddDependency>
       );
 
+    case "dyad-execute-sql":
+      return (
+        <DyadExecuteSql
+          node={{
+            properties: {
+              state: getState({ isStreaming, inProgress }),
+            },
+          }}
+        >
+          {content}
+        </DyadExecuteSql>
+      );
+
     default:
       return null;
   }