client code

page.tsx

'use client';

import { Textarea } from "@/components/ui/textarea"
import { Button } from "@/components/ui/button"
import { useChat } from 'ai/react';
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import Footer from "../footer";
import { renderContent } from "../message-response/messageUtils";

//for mocking to test the UI
import { MockMessages } from "./mock";

export default function Chat() {

    //enable own API
    const { messages, input, handleInputChange, handleSubmit } = useChat({
        api: 'http://localhost:3000/api/chat-functions',
    });

    // bun api
    // const { messages, input, handleInputChange, handleSubmit } = useChat({
    //     api: 'http://localhost:3001/',
    // });

    const handleEnterPress = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
        if (e.key === 'Enter' && !e.shiftKey) {
            e.preventDefault();
            handleFormSubmit(); 
        }
    };
    
    const handleFormSubmit = () => {
        // Create a fake event object to pass to handleSubmit
        const fakeEvent = {
            preventDefault: () => {},
            currentTarget: document.createElement('form'),
        } as React.FormEvent<HTMLFormElement>;
    
        handleSubmit(fakeEvent);
    };
    

    return (
        <div className="flex justify-center h-screen">
            <div className="flex flex-col w-full gap-2 p-4">
                <p className="text-4xl p-2 font-semibold">
                Modern Chat UI
                </p>
                <p className="text-xl p-2">
                    This is a modern Chat UI which supports streaming and renders various response message types like data tables, images and videos.
                </p>
                <section className="flex-grow flex flex-col-reverse overflow-y-auto p-2">
                    {MockMessages.slice().reverse().map((m, index) => (
                      <div
                      className={`grid grid-cols-12 ${
                        index % 2 === 0 ? 'bg-gray-200' : 'bg-gray-300'
                      }`}
                      key={m.id}
                      style={
                        index % 2 === 0
                          ? { backgroundColor: '#E5E7EB' }
                          : { backgroundColor: '#D1D5DB' }
                      }
                    >
                      {m.role === 'user' ? (
                        <Avatar className="col-start-2 col-span-2 mt-6 mb-6">
                          <AvatarImage src="../../donvito.png" alt="User" />
                          <AvatarFallback>Me</AvatarFallback>
                        </Avatar>
                      ) : (
                        <Avatar className="col-start-2 col-span-2 mt-6 mb-6">
                          <AvatarImage src="../../openai.png" alt="AI" />
                          <AvatarFallback>AI</AvatarFallback>
                        </Avatar>
                      )}
                      <div className="col-start-4 col-span-8 mt-6 mb-6">{renderContent(m)}</div>
                    </div>
                    
                     
                    ))}
                </section>
                <div className="border-t">
                     <form onSubmit={(e) => { e.preventDefault(); handleFormSubmit(); }} className="flex flex-col">
                        <Textarea
                            className="resize-none p-2 border-b"
                            placeholder="Type your message here."
                            value={input}
                            onChange={handleInputChange}  
                            onKeyDown={handleEnterPress}                          
                        />
                        <Button type="submit" className="mt-2">Send</Button>
                    </form>
                </div>
                <Footer></Footer>
            </div>
        </div>
    );
}