Skip to content
Snippets Groups Projects
Commit 9db22674 authored by Marcus Schiesser's avatar Marcus Schiesser
Browse files

moved components to ui folder (shadcn structure)

parent 69a7ef06
Branches
Tags
No related merge requests found
"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}
/>
</>
);
}
......@@ -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"
......
"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) {
......
"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 = () => {
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment