|
|
|
|
@ -1,4 +1,4 @@ |
|
|
|
|
import { useRef, useState } from 'react'; |
|
|
|
|
import { useEffect, useRef, useState } from 'react'; |
|
|
|
|
import './App.css' |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@ -10,13 +10,15 @@ function App() { |
|
|
|
|
const [processing, setProcessing] = useState(false); |
|
|
|
|
const [prompt, setPrompt] = useState([]); |
|
|
|
|
|
|
|
|
|
const refHistoryContainer= useRef(null); |
|
|
|
|
const refPrompContainer= useRef(null); |
|
|
|
|
|
|
|
|
|
function onSubmit(event) { |
|
|
|
|
event.preventDefault(); |
|
|
|
|
const input = event.target.elements.input.value; |
|
|
|
|
console.log("Submitted:", input); |
|
|
|
|
|
|
|
|
|
setProcessing(true); |
|
|
|
|
// setProcessing(true); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
fetch(`${BASE_URL}/generate`, { |
|
|
|
|
@ -65,7 +67,7 @@ function App() { |
|
|
|
|
|
|
|
|
|
// clear input |
|
|
|
|
event.target.elements.input.value = ''; |
|
|
|
|
setProcessing(false); |
|
|
|
|
setProcessing(false); |
|
|
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
@ -73,33 +75,40 @@ function App() { |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
useEffect(()=>{ |
|
|
|
|
refHistoryContainer.current.scrollTop = refHistoryContainer.current.scrollHeight; |
|
|
|
|
},[history]); |
|
|
|
|
useEffect(()=>{ |
|
|
|
|
refPrompContainer.current.scrollTop = refPrompContainer.current.scrollHeight; |
|
|
|
|
},[prompt]); |
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
<main className='min-h-screen flex flex-col gap-8 justify-end p-8'> |
|
|
|
|
<div className='flex flex-col gap-2 border-4'> |
|
|
|
|
<main className='h-screen flex flex-col gap-8 justify-end p-8'> |
|
|
|
|
<div ref={refPrompContainer} className='flex-1 flex flex-col gap-2 border-4 overflow-y-auto'> |
|
|
|
|
{prompt?.length==0 ? ( |
|
|
|
|
<div className='p-2 border-b border-gray-200'>Promp will appear here...</div> |
|
|
|
|
):( |
|
|
|
|
prompt?.map((item, index) => ( |
|
|
|
|
<div key={index} className='p-2 border-b border-gray-500'> |
|
|
|
|
<div key={index} className='p-2 border-b border-gray-500 bg-pink-200'> |
|
|
|
|
<p className='text-lg'>{item}</p> |
|
|
|
|
</div> |
|
|
|
|
)) |
|
|
|
|
)} |
|
|
|
|
</div> |
|
|
|
|
<div className='flex flex-col gap-2'> |
|
|
|
|
{/* History will be rendered here */} |
|
|
|
|
{history?.length==0? ( |
|
|
|
|
<div className='bg-white p-2 rounded border'>History will appear here...</div> |
|
|
|
|
):( |
|
|
|
|
history.map((item, index) => ( |
|
|
|
|
<div key={index} className={`p-2 rounded border-4 ${item.role === 'user' ? 'bg-gray-100' : 'bg-yellow-100'}`}> |
|
|
|
|
{item.content.map((content, idx) => ( |
|
|
|
|
<p key={idx} className='text-lg'>{content.text}</p> |
|
|
|
|
))} |
|
|
|
|
</div> |
|
|
|
|
)) |
|
|
|
|
)} |
|
|
|
|
<div ref={refHistoryContainer} className='flex-1 overflow-y-auto'> |
|
|
|
|
<div className='flex flex-col justify-end gap-2'> |
|
|
|
|
{history?.length==0? ( |
|
|
|
|
<div className='p-2'>History will appear here...</div> |
|
|
|
|
):( |
|
|
|
|
history.map((item, index) => ( |
|
|
|
|
<div key={index} className={`p-2 rounded border-4 ${item.role === 'user' ? 'bg-gray-100' : 'bg-yellow-100'}`}> |
|
|
|
|
{item.content.map((content, idx) => ( |
|
|
|
|
<p key={idx} className='text-lg'>{content.text}</p> |
|
|
|
|
))} |
|
|
|
|
</div> |
|
|
|
|
)) |
|
|
|
|
)} |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div className=''> |
|
|
|
|
<form className='flex flex-col justify-center *:border-4 gap-4' onSubmit={onSubmit}> |
|
|
|
|
|
