-
Notifications
You must be signed in to change notification settings - Fork 14
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'main' of https://github.com/devhub-ai/devhub
- Loading branch information
Showing
1 changed file
with
100 additions
and
65 deletions.
There are no files selected for viewing
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,77 +1,112 @@ | ||
| "use client"; | ||
| 'use client'; | ||
|
|
||
| import { PlaceholdersAndVanishInput } from "../ui/placeholders-and-vanish-input"; | ||
| import { useState } from "react"; | ||
| import axios from "axios"; | ||
| import { PlaceholdersAndVanishInput } from '../ui/placeholders-and-vanish-input'; | ||
| import { useState, useEffect, useRef } from 'react'; | ||
| import axios from 'axios'; | ||
|
|
||
| interface Message { | ||
| query: string; | ||
| response: string; | ||
| isLoading?: boolean; | ||
| } | ||
|
|
||
| export function PlaceholdersAndVanishInputDemo() { | ||
| const [messages, setMessages] = useState<Array<{ query: string; response: string }>>([]); | ||
| const [isLoading, setIsLoading] = useState(false); | ||
| const [messages, setMessages] = useState<Array<Message>>([]); | ||
| const messagesEndRef = useRef<HTMLDivElement>(null); | ||
|
|
||
| const backendUrl = | ||
| import.meta.env.VITE_BACKEND_URL || 'http://localhost:5000'; | ||
|
|
||
| const backendUrl = import.meta.env.VITE_BACKEND_URL || 'http://localhost:5000'; | ||
| const placeholders = [ | ||
| 'How to set up a React project with Vite?', | ||
| 'What is the difference between JavaScript and TypeScript?', | ||
| 'How to implement authentication in a Next.js app?', | ||
| 'What is a closure in JavaScript?', | ||
| 'How to optimize React app performance?', | ||
| 'Explain event delegation in JavaScript', | ||
| ]; | ||
|
|
||
| const scrollToBottom = () => { | ||
| messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' }); | ||
| }; | ||
|
|
||
| const placeholders = [ | ||
| "What's the first rule of Fight Club?", | ||
| "Who is Tyler Durden?", | ||
| "Where is Andrew Laeddis Hiding?", | ||
| "Write a Javascript method to reverse a string", | ||
| "How to assemble your own PC?", | ||
| ]; | ||
| useEffect(() => { | ||
| scrollToBottom(); | ||
| }, [messages]); | ||
|
|
||
| const handleChange = () => { | ||
| // You can add any additional logic here if needed | ||
| }; | ||
| const handleChange = () => { | ||
| // Additional logic can be added here | ||
| }; | ||
|
|
||
| const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => { | ||
| e.preventDefault(); | ||
| const query = e.currentTarget.querySelector('input')?.value; | ||
| if (!query) return; | ||
| const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => { | ||
| e.preventDefault(); | ||
| const query = e.currentTarget.querySelector('input')?.value; | ||
| if (!query) return; | ||
|
|
||
| setIsLoading(true); | ||
| try { | ||
| const result = await axios.post(`${backendUrl}/chat`, { query }); | ||
| setMessages(prevMessages => [...prevMessages, { query, response: result.data.result }]); | ||
| } catch (error) { | ||
| console.error('Error querying the model:', error); | ||
| setMessages(prevMessages => [...prevMessages, { query, response: "An error occurred while processing your request." }]); | ||
| } finally { | ||
| setIsLoading(false); | ||
| } | ||
| }; | ||
| setMessages((prevMessages) => [ | ||
| ...prevMessages, | ||
| { query, response: '', isLoading: true }, | ||
| ]); | ||
|
|
||
| return ( | ||
| <div className="h-[50rem] flex flex-col"> | ||
| <h2 className="mb-4 text-xl text-center sm:text-5xl dark:text-white text-black"> | ||
| Start Collaborating | ||
| </h2> | ||
| <div className="flex-grow overflow-y-auto px-4 flex flex-col items-center"> | ||
| {messages.map((message, index) => ( | ||
| <div key={index} className="mb-4 w-full max-w-[80%]"> | ||
| <div className="bg-zinc-100 dark:bg-zinc-800 p-2 rounded-lg mb-2"> | ||
| <p className="font-bold">You:</p> | ||
| <p>{message.query}</p> | ||
| </div> | ||
| <div className="bg-zinc-200 dark:bg-zinc-700 p-2 rounded-lg"> | ||
| <p className="font-bold">AI:</p> | ||
| <p>{message.response}</p> | ||
| </div> | ||
| </div> | ||
| ))} | ||
| </div> | ||
| {isLoading && ( | ||
| <div className="flex justify-center items-center p-4"> | ||
| <p>Loading...</p> | ||
| </div> | ||
| )} | ||
| <div className="p-4 mt-4"> | ||
| <PlaceholdersAndVanishInput | ||
| placeholders={placeholders} | ||
| try { | ||
| const result = await axios.post(`${backendUrl}/chat`, { query }); | ||
| setMessages((prevMessages) => { | ||
| const newMessages = [...prevMessages]; | ||
| const lastMessage = newMessages[newMessages.length - 1]; | ||
| lastMessage.response = result.data.result; | ||
| lastMessage.isLoading = false; | ||
| return newMessages; | ||
| }); | ||
| } catch (error) { | ||
| console.error('Error querying the model:', error); | ||
| setMessages((prevMessages) => { | ||
| const newMessages = [...prevMessages]; | ||
| const lastMessage = newMessages[newMessages.length - 1]; | ||
| lastMessage.response = | ||
| 'An error occurred while processing your request.'; | ||
| lastMessage.isLoading = false; | ||
| return newMessages; | ||
| }); | ||
| } | ||
| }; | ||
|
|
||
| onChange={handleChange} | ||
| onSubmit={onSubmit} | ||
| /> | ||
| </div> | ||
| </div> | ||
| ); | ||
| return ( | ||
| <div className='h-screen md:w-[60%] w-full mx-auto justify-center flex flex-col'> | ||
| <h2 className='mb-4 text-xl text-center sm:text-5xl dark:text-white text-black mt-5'> | ||
| Start Collaborating | ||
| </h2> | ||
| <div className='flex-grow overflow-y-auto px-4'> | ||
| {messages.map((message, index) => ( | ||
| <div | ||
| key={index} | ||
| className='mb-4'> | ||
| <div className='flex justify-end mb-2'> | ||
| <div className='bg-zinc-100 dark:bg-zinc-800 p-3 rounded-lg max-w-[80%]'> | ||
| <p className='font-bold'>You:</p> | ||
| <p>{message.query}</p> | ||
| </div> | ||
| </div> | ||
| <div className='flex justify-start'> | ||
| <div className='bg-zinc-200 dark:bg-zinc-700 p-3 rounded-lg max-w-[80%]'> | ||
| <p className='font-bold'>AI:</p> | ||
| {message.isLoading ? ( | ||
| <p>Loading...</p> | ||
| ) : ( | ||
| <p>{message.response}</p> | ||
| )} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ))} | ||
| <div ref={messagesEndRef} /> | ||
| </div> | ||
| <div className='p-4 mb-auto'> | ||
| <PlaceholdersAndVanishInput | ||
| placeholders={placeholders} | ||
| onChange={handleChange} | ||
| onSubmit={onSubmit} | ||
| /> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |