fix: remove zustand and use input and setInput

components/chat.tsx

@@ -2,24 +2,32 @@
 
 import { useChat, type Message } from 'ai-connector'
 
+import { cn } from '@/lib/utils'
 import { ChatList } from '@/components/chat-list'
 import { ChatPanel } from '@/components/chat-panel'
+import { EmptyScreen } from '@/components/empty-screen'
 
-export interface ChatProps {
-  // create?: (input: string) => Chat | undefined;
+export interface ChatProps extends React.ComponentProps<'div'> {
   initialMessages?: Message[]
   id?: string
 }
 
-export function Chat({ id, initialMessages }: ChatProps) {
-  const { messages, append, reload, stop, isLoading } = useChat({
-    initialMessages,
-    id
-  })
+export function Chat({ id, initialMessages, className }: ChatProps) {
+  const { messages, append, reload, stop, isLoading, input, setInput } =
+    useChat({
+      initialMessages,
+      id
+    })
 
   return (
-    <div className="pb-[200px] pt-4 md:pt-10">
-      <ChatList messages={messages} />
+    <>
+      <div className={cn('pb-[200px] pt-4 md:pt-10', className)}>
+        {messages.length ? (
+          <ChatList messages={messages} />
+        ) : (
+          <EmptyScreen setInput={setInput} />
+        )}
+      </div>
       <ChatPanel
         id={id}
         isLoading={isLoading}
@@ -27,7 +35,9 @@ export function Chat({ id, initialMessages }: ChatProps) {
         append={append}
         reload={reload}
         messages={messages}
+        input={input}
+        setInput={setInput}
       />
-    </div>
+    </>
   )
 }