From b55be098ddc4911d4264e20d1b7587928f604c2f Mon Sep 17 00:00:00 2001
From: Marcus Schiesser <mail@marcusschiesser.de>
Date: Mon, 30 Oct 2023 09:07:12 +0700
Subject: [PATCH] moved components to ui folder (shadcn structure)

---
 .../nextjs/app/components/chat-section.tsx         | 14 +++++++++-----
 .../nextjs/app/components/{ => ui}/chat-avatar.tsx |  0
 .../{message-form.tsx => ui/chat-input.tsx}        |  8 ++++----
 .../nextjs/app/components/{ => ui}/chat-item.tsx   |  2 +-
 .../{chat-history.tsx => ui/chat-messages.tsx}     |  4 ++--
 5 files changed, 16 insertions(+), 12 deletions(-)
 rename templates/streaming/nextjs/app/components/{ => ui}/chat-avatar.tsx (100%)
 rename templates/streaming/nextjs/app/components/{message-form.tsx => ui/chat-input.tsx} (77%)
 rename templates/streaming/nextjs/app/components/{ => ui}/chat-item.tsx (83%)
 rename templates/streaming/nextjs/app/components/{chat-history.tsx => ui/chat-messages.tsx} (85%)

diff --git a/templates/streaming/nextjs/app/components/chat-section.tsx b/templates/streaming/nextjs/app/components/chat-section.tsx
index 3e0b993a..a48e0214 100644
--- a/templates/streaming/nextjs/app/components/chat-section.tsx
+++ b/templates/streaming/nextjs/app/components/chat-section.tsx
@@ -1,16 +1,20 @@
 "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}
+      />
     </>
   );
 }
diff --git a/templates/streaming/nextjs/app/components/chat-avatar.tsx b/templates/streaming/nextjs/app/components/ui/chat-avatar.tsx
similarity index 100%
rename from templates/streaming/nextjs/app/components/chat-avatar.tsx
rename to templates/streaming/nextjs/app/components/ui/chat-avatar.tsx
diff --git a/templates/streaming/nextjs/app/components/message-form.tsx b/templates/streaming/nextjs/app/components/ui/chat-input.tsx
similarity index 77%
rename from templates/streaming/nextjs/app/components/message-form.tsx
rename to templates/streaming/nextjs/app/components/ui/chat-input.tsx
index ffd89762..73ccb169 100644
--- a/templates/streaming/nextjs/app/components/message-form.tsx
+++ b/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"
diff --git a/templates/streaming/nextjs/app/components/chat-item.tsx b/templates/streaming/nextjs/app/components/ui/chat-item.tsx
similarity index 83%
rename from templates/streaming/nextjs/app/components/chat-item.tsx
rename to templates/streaming/nextjs/app/components/ui/chat-item.tsx
index dc24fa0a..cb962611 100644
--- a/templates/streaming/nextjs/app/components/chat-item.tsx
+++ b/templates/streaming/nextjs/app/components/ui/chat-item.tsx
@@ -1,6 +1,6 @@
 "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) {
diff --git a/templates/streaming/nextjs/app/components/chat-history.tsx b/templates/streaming/nextjs/app/components/ui/chat-messages.tsx
similarity index 85%
rename from templates/streaming/nextjs/app/components/chat-history.tsx
rename to templates/streaming/nextjs/app/components/ui/chat-messages.tsx
index 80f5e97d..e039ebf6 100644
--- a/templates/streaming/nextjs/app/components/chat-history.tsx
+++ b/templates/streaming/nextjs/app/components/ui/chat-messages.tsx
@@ -1,10 +1,10 @@
 "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 = () => {
-- 
GitLab