Move canSubmit to input component

apps/database-new/app/NewThreadInput.tsx

@@ -1,35 +0,0 @@
-'use client'
-
-import { AssistantChatForm } from '@/components/AssistantChatForm'
-import { useAppStateSnapshot } from '@/lib/state'
-import { createClient } from '@/lib/supabase/client'
-
-const NewThreadInput = () => {
-  const supabase = createClient()
-  const snap = useAppStateSnapshot()
-
-  return (
-    <>
-      <div className="relative w-10/12 xl:w-11/12 max-w-xl">
-        aaaaa
-        <AssistantChatForm
-          key={'new-thread-form'}
-          chatContext={'new'}
-          canSubmit={async () => {
-            const {
-              data: { user },
-            } = await supabase.auth.getUser()
-            if (!user) {
-              snap.setLoginDialogOpen(true)
-              return false
-            }
-            return true
-          }}
-          placeholder="e.g Create a Telegram-like chat application"
-        />
-      </div>
-    </>
-  )
-}
-
-export default NewThreadInput

apps/database-new/app/[thread_id]/[message_id]/page.tsx

@@ -9,7 +9,9 @@ import { CodeEditor } from './CodeEditor'
 import { Messages } from './Messages'
 import { SchemaFlow } from './SchemaFlow'
 import { getAssistantResponse } from './getAssistantMessage'
-
+import { createClient } from '@/lib/supabase/client'
+import { LoginDialog } from '@/app/LoginDialog'
+import LoginForm from '@/components/Auth/LoginForm'
 export interface ThreadPageProps {
   params: {
     thread_id: string
@@ -19,7 +21,11 @@ export interface ThreadPageProps {
 
 export default async function ThreadPage({ params }: ThreadPageProps) {
   const promise = getAssistantResponse(params.thread_id, params.message_id)
+  const supabase = createClient()
 
+  const {
+    data: { user },
+  } = await supabase.auth.getUser()
   return (
     <div className="flex flex-col-reverse items-between xl:flex-row xl:items-center xl:justify-between bg-alternative h-full">
       <div
@@ -34,7 +40,7 @@ export default async function ThreadPage({ params }: ThreadPageProps) {
         <div className="flex flex-col grow items-between">
           <Messages threadId={params.thread_id} />
           <div className="px-4 pb-4">
-            <AssistantChatForm chatContext={'edit'} placeholder={'Any changes to make?'} />
+            <AssistantChatForm placeholder={'Any changes to make?'} />
           </div>
         </div>
       </div>
@@ -50,6 +56,10 @@ export default async function ThreadPage({ params }: ThreadPageProps) {
         <Suspense fallback={<GraphLoader />}>
           <CodeEditor promisedMessage={promise} />
         </Suspense>
+
+        <LoginDialog>
+          <LoginForm />
+        </LoginDialog>
       </div>
     </div>
   )

apps/database-new/app/page.tsx

@@ -1,9 +1,9 @@
 // import LoginForm from '@/components/Auth/LoginForm'
 import type { Metadata } from 'next'
 import { LoginDialog } from './LoginDialog'
-import NewThreadInput from './NewThreadInput'
 import LoginForm from '@/components/Auth/LoginForm'
 import RecentlyGenerated from '@/components/RecentlyGenerated'
+import { AssistantChatForm } from '@/components/AssistantChatForm'
 
 export const metadata: Metadata = {
   title: 'database.design | Create',
@@ -17,7 +17,13 @@ const NewThread = async ({
   return (
     <>
       <div className="h-full flex items-center justify-center w-full flex-col gap-y-4">
-        <NewThreadInput />
+        <div className="relative w-10/12 xl:w-11/12 max-w-xl">
+          <AssistantChatForm
+            key="new-thread-form"
+            placeholder="e.g Create a Telegram-like chat application"
+          />
+        </div>
+
         {/* @Terry - just throwing this in here for now.
         we may want to reconfigre the h-full/justify-center of the input  */}
         <RecentlyGenerated />

apps/database-new/components/AssistantChatForm/index.tsx

@@ -2,13 +2,22 @@
 
 import { Loader2 } from 'lucide-react'
 import { useParams } from 'next/navigation'
-import { ChangeEvent, FormHTMLAttributes, ReactNode, forwardRef, useRef } from 'react'
+import {
+  ChangeEvent,
+  FormHTMLAttributes,
+  ReactNode,
+  forwardRef,
+  useEffect,
+  useRef,
+  useState,
+} from 'react'
+
 import { useFormStatus } from 'react-dom'
 import { TextArea_Shadcn_, cn } from 'ui'
-
+import { useAppStateSnapshot } from '@/lib/state'
 import { ChatSuggestions } from './ChatSuggestions'
 import { upsertMessageFormAction } from './action'
-
+import { createClient } from '@/lib/supabase/client'
 export interface FormProps extends FormHTMLAttributes<HTMLFormElement> {
   loading?: boolean
   disabled?: boolean
@@ -62,18 +71,28 @@ const SubmitButton = forwardRef<HTMLButtonElement, { isLoading: boolean; canSubm
 SubmitButton.displayName = 'SubmitButton'
 
 interface AssistantChatFormProps {
-  chatContext: string
   placeholder: string
   canSubmit?: () => Promise<boolean>
 }
 
-const AssistantChatForm = ({
-  chatContext,
-  placeholder,
-  canSubmit = () => Promise.resolve(true),
-}: AssistantChatFormProps) => {
+const AssistantChatForm = ({ placeholder }: AssistantChatFormProps) => {
+  const supabase = createClient()
+  const snap = useAppStateSnapshot()
+
   const { thread_id } = useParams()
+
   const textAreaRef = useRef<HTMLTextAreaElement>(null)
+  const [isLoggedIn, setIsLoggedIn] = useState(false)
+
+  useEffect(() => {
+    async function checkUser() {
+      const {
+        data: { user },
+      } = await supabase.auth.getUser()
+      if (user) setIsLoggedIn(true)
+    }
+    checkUser()
+  })
 
   const disabled = false
 
@@ -101,10 +120,7 @@ const AssistantChatForm = ({
       <form
         className="relative"
         action={async (formData) => {
-          const flag = await canSubmit()
-          if (flag) {
-            upsertMessageFormAction(formData)
-          }
+          isLoggedIn ? upsertMessageFormAction(formData) : snap.setLoginDialogOpen(true)
         }}
       >
         <div className={cn('absolute', 'top-2 left-2', 'ml-1 w-6 h-6 rounded-full bg-dbnew')}></div>
@@ -132,7 +148,8 @@ const AssistantChatForm = ({
           isLoading={disabled}
         />
       </form>
-      {chatContext === 'new' && (
+
+      {!thread_id && (
         <ChatSuggestions
           setInput={(v) => {
             if (textAreaRef?.current) textAreaRef.current.value = v