moved components to ui folder (shadcn structure)

templates/streaming/nextjs/app/components/chat-section.tsx

 "use client";
 
-import MessageForm from "@/app/components/message-form";
+import ChatInput from "@/app/components/ui/chat-input";
 import { useChat } from "ai/react";
-import ChatHistory from "./chat-history";
+import ChatMessages from "./ui/chat-messages";
 
 export default function ChatSection() {
-  const chat = useChat();
+  const { messages, input, handleSubmit, handleInputChange } = useChat();
 
   return (
     <>
-      <ChatHistory messages={chat.messages} />
-      <MessageForm chat={chat} />
+      <ChatMessages messages={messages} />
+      <ChatInput
+        input={input}
+        handleSubmit={handleSubmit}
+        handleInputChange={handleInputChange}
+      />
     </>
   );
 }

templates/streaming/nextjs/app/components/message-form.tsx → templates/streaming/nextjs/app/components/ui/chat-input.tsx

@@ -2,11 +2,11 @@
 
 import { UseChatHelpers } from "ai/react";
 
-export default function MessageForm({ chat }: { chat: UseChatHelpers }) {
+export default function ChatInput(props: Partial<UseChatHelpers>) {
   return (
     <>
       <form
-        onSubmit={chat.handleSubmit}
+        onSubmit={props.handleSubmit}
         className="flex items-start justify-between w-full max-w-5xl p-4 bg-white rounded-xl shadow-xl gap-4"
       >
         <input
@@ -14,8 +14,8 @@ export default function MessageForm({ chat }: { chat: UseChatHelpers }) {
           name="message"
           placeholder="Type a message"
           className="w-full p-4 rounded-xl shadow-inner flex-1"
-          value={chat.input}
-          onChange={chat.handleInputChange}
+          value={props.input}
+          onChange={props.handleInputChange}
         />
         <button
           type="submit"

templates/streaming/nextjs/app/components/chat-item.tsx → templates/streaming/nextjs/app/components/ui/chat-item.tsx

 "use client";
 
-import ChatAvatar from "@/app/components/chat-avatar";
+import ChatAvatar from "@/app/components/ui/chat-avatar";
 import { Message } from "ai/react";
 
 export default function ChatItem(chatMessage: Message) {

templates/streaming/nextjs/app/components/chat-history.tsx → templates/streaming/nextjs/app/components/ui/chat-messages.tsx

 "use client";
 
-import ChatItem from "@/app/components/chat-item";
+import ChatItem from "@/app/components/ui/chat-item";
 import { Message } from "ai/react";
 import { useEffect, useRef } from "react";
 
-export default function ChatHistory({ messages }: { messages: Message[] }) {
+export default function ChatMessages({ messages }: { messages: Message[] }) {
   const scrollableChatContainerRef = useRef<HTMLDivElement>(null);
 
   const scrollToBottom = () => {