diff --git a/apps/database-new/app/NewThreadInput.tsx b/apps/database-new/app/NewThreadInput.tsx index a1a96dd2b81..2419589ca24 100644 --- a/apps/database-new/app/NewThreadInput.tsx +++ b/apps/database-new/app/NewThreadInput.tsx @@ -1,22 +1,17 @@ 'use client' -import { ChatInputAtom } from '@/components/Chat/ChatInput' import { CHAT_EXAMPLES } from '@/data/chat-examples' import { useAppStateSnapshot } from '@/lib/state' import { createClient } from '@/lib/supabase/client' import { useMutation } from '@tanstack/react-query' import { ExternalLink } from 'lucide-react' -import { useRouter, useSearchParams } from 'next/navigation' -import { useState } from 'react' -import { cn } from 'ui' - -interface ChatInputParams { - userID: string | undefined -} +import { useRouter } from 'next/navigation' +import { createRef, useState } from 'react' +import { AssistantChatForm, cn } from 'ui' const suggestions = CHAT_EXAMPLES -const NewThreadInput = ({ userID }: ChatInputParams) => { +const NewThreadInput = () => { const router = useRouter() const [value, setValue] = useState(() => { @@ -36,7 +31,11 @@ const NewThreadInput = ({ userID }: ChatInputParams) => { const { mutate, isPending, isSuccess } = useMutation({ mutationFn: async (prompt: string) => { - const body = { prompt, userID } // Include userID in the body object + const { + data: { user }, + } = await supabase.auth.getUser() + + const body = { prompt, userID: user?.id } // Include userID in the body object const response = await fetch('/api/ai/sql/threads/create', { method: 'POST', @@ -55,8 +54,12 @@ const NewThreadInput = ({ userID }: ChatInputParams) => { return ( <>
- { + { + event.preventDefault() + const { data: { user }, } = await supabase.auth.getUser() @@ -70,21 +73,18 @@ const NewThreadInput = ({ userID }: ChatInputParams) => { mutate(value) } }} - autoFocus value={value} - rows={1} - contentEditable - aria-expanded={false} placeholder="e.g Create a Telegram-like chat application" disabled={isPending || isSuccess} loading={isPending || isSuccess} - onChange={(e) => setValue(e.target.value)} + onValueChange={(e) => setValue(e.target.value)} />
{suggestions.map((suggestion, idx) => (
diff --git a/apps/database-new/app/page.tsx b/apps/database-new/app/page.tsx index 5df1087258b..ef35eccdf6a 100644 --- a/apps/database-new/app/page.tsx +++ b/apps/database-new/app/page.tsx @@ -1,9 +1,7 @@ -import { createClient } from '@/lib/supabase/server' -import type { Metadata } from 'next' -import { cookies } from 'next/headers' -import NewThreadInput from './NewThreadInput' -import { LoginDialog } from './LoginDialog' import LoginForm from '@/components/Auth/LoginForm' +import type { Metadata } from 'next' +import { LoginDialog } from './LoginDialog' +import NewThreadInput from './NewThreadInput' export const metadata: Metadata = { title: 'database.design | Create', @@ -14,19 +12,10 @@ const NewThread = async ({ }: { searchParams: { prompt: string; message: string } }) => { - const cookieStore = cookies() - const supabase = createClient(cookieStore) - - const { - data: { user }, - } = await supabase.auth.getUser() - - console.log('searchParams on page level', searchParams) - return ( <>
- +
diff --git a/apps/database-new/components/Chat/ChatInput.tsx b/apps/database-new/components/Chat/ChatInput.tsx deleted file mode 100644 index 6ba663f5eac..00000000000 --- a/apps/database-new/components/Chat/ChatInput.tsx +++ /dev/null @@ -1,85 +0,0 @@ -import { Loader2 } from 'lucide-react' -import { createRef, forwardRef, useEffect } from 'react' -import { TextArea_Shadcn_, cn } from 'ui' - -export interface TextAreaProps extends React.TextareaHTMLAttributes { - loading: boolean - handleSubmit: () => void -} - -const ChatInputAtom = ({ className, loading, handleSubmit, ...props }: TextAreaProps) => { - const ref = createRef() - - useEffect(() => { - if (!props.value && ref && ref.current) { - ref.current.style.height = '40px' - } else if (ref && ref.current) { - console.log('ref.current.scrollHeight', ref.current.scrollHeight) - const newHeight = ref.current.scrollHeight + 'px' - console.log('new height', newHeight) - ref.current.style.height = newHeight - } - }, [props.value, ref]) - - useEffect(() => { - ref?.current?.focus() - }, [props.value, ref]) - - const handleKeyDown = (event: React.KeyboardEvent) => { - // Check if the pressed key is "Enter" (key code 13) - if (event.key === 'Enter' && !event.shiftKey) { - event.preventDefault() - // Manually submit the form - // value is handled by parent component - handleSubmit() - } - } - - return ( -
-
- -
- {loading ? ( - - ) : ( -
- - - -
- )} -
- - ) -} - -ChatInputAtom.displayName = 'ChatInputAtom' - -export { ChatInputAtom } diff --git a/packages/ui/index.tsx b/packages/ui/index.tsx index 52f08cddb89..5f0b4553e56 100644 --- a/packages/ui/index.tsx +++ b/packages/ui/index.tsx @@ -179,6 +179,10 @@ export { ScrollArea, ScrollBar } from './src/components/shadcn/ui/scroll-area' export { Separator } from './src/components/shadcn/ui/separator' +// patterns + +export { AssistantChatForm } from './src/patterns/AssistantChatForm' + // links export * from './src/components/TextLink' diff --git a/packages/ui/src/patterns/AssistantChatForm.tsx b/packages/ui/src/patterns/AssistantChatForm.tsx new file mode 100644 index 00000000000..728e8b08271 --- /dev/null +++ b/packages/ui/src/patterns/AssistantChatForm.tsx @@ -0,0 +1,100 @@ +import { Loader2 } from 'lucide-react' +import React, { ChangeEvent, createRef, useEffect } from 'react' +import { TextArea } from '../components/shadcn/ui/text-area' +import { cn } from '../lib/utils' + +export interface FormProps extends React.FormHTMLAttributes { + loading: boolean + disabled?: boolean + value?: string + onValueChange: (value: ChangeEvent) => void +} + +const AssistantChatForm = React.forwardRef( + ({ loading, disabled, value, onValueChange, ...props }, ref) => { + const textAreaRef = createRef() + const submitRef = createRef() + + useEffect(() => { + if (textAreaRef) { + if (!value && textAreaRef && textAreaRef.current) { + textAreaRef.current.style.height = '40px' + } else if (textAreaRef && textAreaRef.current) { + const newHeight = textAreaRef.current.scrollHeight + 'px' + textAreaRef.current.style.height = newHeight + } + } + }, [value, textAreaRef]) + + useEffect(() => { + textAreaRef?.current?.focus() + }, [value, textAreaRef]) + + const handleKeyDown = (event: React.KeyboardEvent) => { + // Check if the pressed key is "Enter" (key code 13) without the "Shift" key + if (event.key === 'Enter' && !event.shiftKey) { + event.preventDefault() + if (submitRef.current) { + submitRef.current.click() + } + } + } + + return ( +
+
+