feat: Add assistant query param for control the AI assistant panel (supabase#30809)

* Fix a key error in the assistant.

* Sync the query params for the assistant with the app state.

* Fix the button URL from the /assistant page to link correctly to the studio.

* Replace nuqs with a custom function.

* undo projectlayout changes

---------

Co-authored-by: Alaister Young <[email protected]>

Author: ivasilov

apps/studio/components/ui/AIAssistantPanel/AIAssistant.tsx

@@ -40,10 +40,10 @@ import {
 } from 'ui'
 import { Admonition, AssistantChatForm, GenericSkeletonLoader } from 'ui-patterns'
 import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
+import DotGrid from '../DotGrid'
 import AIOnboarding from './AIOnboarding'
 import CollapsibleCodeBlock from './CollapsibleCodeBlock'
 import { Message } from './Message'
-import DotGrid from '../DotGrid'
 
 const MemoizedMessage = memo(
   ({ message, isLoading }: { message: MessageType; isLoading: boolean }) => {
@@ -444,7 +444,7 @@ export const AIAssistant = ({
                   Generate a ...
                 </Button>
                 {SQL_TEMPLATES.filter((t) => t.type === 'quickstart').map((qs) => (
-                  <TooltipProvider_Shadcn_>
+                  <TooltipProvider_Shadcn_ key={qs.title}>
                     <Tooltip_Shadcn_>
                       <TooltipTrigger_Shadcn_ asChild>
                         <Button

apps/www/pages/assistant.tsx

@@ -1,14 +1,14 @@
-import { Button } from 'ui'
-import dynamic from 'next/dynamic'
-import { AIDemoPanel } from '~/components/AIDemo/Panel'
-import { useEffect, useState } from 'react'
-import { SqlSnippet } from '~/components/AIDemo/SqlSnippet'
-import { NextSeo } from 'next-seo'
-import { motion } from 'framer-motion'
-import { useRouter } from 'next/router'
 import { useIsLoggedIn, useIsUserLoading } from 'common'
+import { motion } from 'framer-motion'
+import { NextSeo } from 'next-seo'
+import dynamic from 'next/dynamic'
 import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { useEffect, useState } from 'react'
+import { Button } from 'ui'
 import DotGrid from '~/components/AIDemo/DotGrid'
+import { AIDemoPanel } from '~/components/AIDemo/Panel'
+import { SqlSnippet } from '~/components/AIDemo/SqlSnippet'
 import { EASE_OUT } from '../lib/animations'
 
 const DefaultLayout = dynamic(() => import('~/components/Layouts/Default'))
@@ -680,18 +680,13 @@ function Assistant() {
                   more. The Assistant is here to help.
                 </p>
                 <div className="min-h-12 flex items-center gap-x-2">
-                  {!isUserLoading &&
-                    (isLoggedIn ? (
-                      <Button type="primary" size="medium" asChild>
-                        <Link href="/dashboard/project/_">Dashboard</Link>
-                      </Button>
-                    ) : (
-                      <Button type="primary" size="medium" asChild>
-                        <Link href="https://supabase.com/dashboard/project/_">
-                          Start your project
-                        </Link>
-                      </Button>
-                    ))}
+                  {!isUserLoading && (
+                    <Button type="primary" size="medium" asChild>
+                      <Link href="/dashboard/project/_?aiAssistantPanelOpen=true">
+                        {isLoggedIn ? 'Dashboard' : 'Start your project'}
+                      </Link>
+                    </Button>
+                  )}
                   <Button type="default" size="medium" asChild>
                     <Link
                       target="_blank"