Created
September 21, 2023 07:01
-
-
Save donvito/9f5d0e9d5a07efdf1232f343f661f514 to your computer and use it in GitHub Desktop.
client code
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| '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> | |
| ); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment