feat: add assistant variation to table quickstart experiment (2.5 of 3) (supabase#39825)

feat: add assistant variation to table quickstart experiment

Adds ASSISTANT variant to table quickstart that opens AI assistant with
pre-populated conversation to guide users through creating their first
database table.

Changes:
- Add QuickstartVariant.ASSISTANT enum value
- Add 'Create with Assistant' card for new projects (<7 days old)
- Implement handleOpenAssistant with proper loading states and error handling
- Add pre-populated messages to guide table creation workflow

The assistant card appears only for users bucketed into the assistant
variation of the tableQuickstart experiment on new projects.

Author: seanoliver

apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/TableQuickstart/types.ts

@@ -37,6 +37,7 @@ export enum QuickstartVariant {
   CONTROL = 'control',
   AI = 'ai',
   TEMPLATES = 'templates',
+  ASSISTANT = 'assistant',
 }
 
 export type TableSuggestion = {

apps/studio/components/layouts/Tabs/NewTab.tsx

@@ -4,7 +4,7 @@ import { partition } from 'lodash'
 import { Table2 } from 'lucide-react'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
-import { useMemo } from 'react'
+import { useMemo, useState } from 'react'
 import { toast } from 'sonner'
 
 import { useParams } from 'common'
@@ -20,10 +20,12 @@ import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
 import { usePHFlag } from 'hooks/ui/useFlag'
 import { uuidv4 } from 'lib/helpers'
 import { useProfile } from 'lib/profile'
+import { useAiAssistantStateSnapshot, AssistantMessageType } from 'state/ai-assistant-state'
 import { useSqlEditorV2StateSnapshot } from 'state/sql-editor-v2'
 import { useTableEditorStateSnapshot } from 'state/table-editor'
 import { createTabId, useTabsStateSnapshot } from 'state/tabs'
 import {
+  AiIconAnimation,
   Button,
   cn,
   SQL_ICON,
@@ -39,6 +41,12 @@ import { RecentItems } from './RecentItems'
 const NEW_PROJECT_THRESHOLD_DAYS = 7
 const TABLE_QUICKSTART_FLAG = 'tableQuickstart'
 
+const ASSISTANT_QUICKSTART_MESSAGES = {
+  user: 'Help me create a new database table for my project',
+  assistant:
+    "I'll help you create a database table. Please tell me:\n\n1. What does your application do?\n2. What kind of data do you want to store?\n\nI'll suggest a table structure that fits your requirements and help you create it directly in your database.",
+}
+
 export function NewTab() {
   const router = useRouter()
   const { ref } = useParams()
@@ -50,7 +58,9 @@ export function NewTab() {
   const snap = useTableEditorStateSnapshot()
   const snapV2 = useSqlEditorV2StateSnapshot()
   const tabs = useTabsStateSnapshot()
+  const aiSnap = useAiAssistantStateSnapshot()
 
+  const [isCreatingChat, setIsCreatingChat] = useState(false)
   const [templates] = partition(SQL_TEMPLATES, { type: 'template' })
   const [quickstarts] = partition(SQL_TEMPLATES, { type: 'quickstart' })
 
@@ -87,6 +97,43 @@ export function NewTab() {
       ? tableQuickstartVariant
       : null
 
+  const handleOpenAssistant = () => {
+    if (isCreatingChat) return
+
+    setIsCreatingChat(true)
+
+    try {
+      const chatId = aiSnap.newChat({
+        name: 'Create a database table',
+        open: true,
+      })
+
+      if (!chatId) {
+        throw new Error('Failed to create chat')
+      }
+
+      const userMessage: AssistantMessageType = {
+        id: uuidv4(),
+        role: 'user',
+        parts: [{ type: 'text', text: ASSISTANT_QUICKSTART_MESSAGES.user }],
+      }
+
+      const assistantMessage: AssistantMessageType = {
+        id: uuidv4(),
+        role: 'assistant',
+        parts: [{ type: 'text', text: ASSISTANT_QUICKSTART_MESSAGES.assistant }],
+      }
+
+      aiSnap.saveMessage([userMessage, assistantMessage])
+    } catch (error) {
+      console.error('Failed to open AI assistant:', error)
+      const message = error instanceof Error ? error.message : 'Unknown error'
+      toast.error(`Unable to open AI assistant: ${message}`)
+    } finally {
+      setIsCreatingChat(false)
+    }
+  }
+
   const tableEditorActions = [
     {
       icon: <Table2 className="h-4 w-4 text-foreground" strokeWidth={1.5} />,
@@ -153,6 +200,15 @@ export function NewTab() {
           {actions.map((item, i) => (
             <ActionCard key={`action-card-${i}`} {...item} />
           ))}
+          {activeQuickstartVariant === QuickstartVariant.ASSISTANT && (
+            <ActionCard
+              icon={<AiIconAnimation size={16} loading={isCreatingChat} />}
+              title="Create with Assistant"
+              description="Use AI to design your database table"
+              bgColor="bg-brand-200"
+              onClick={handleOpenAssistant}
+            />
+          )}
         </div>
         {activeQuickstartVariant === QuickstartVariant.AI && (
           <QuickstartAIWidget onSelectTable={(tableData) => snap.onAddTable(tableData)} />