feat(button): add stop or regenerate response button
This commit is contained in:
parent
43e7e50832
commit
eedb8eff02
|
@ -204,6 +204,7 @@ nav svg {
|
|||
.botMessageMainContainer {
|
||||
width: 100%;
|
||||
background-color: #444654;
|
||||
position: relative;
|
||||
}
|
||||
.botMessageWrapper {
|
||||
max-width: 800px;
|
||||
|
@ -215,7 +216,22 @@ nav svg {
|
|||
/* align-items: center; */
|
||||
column-gap: 25px;
|
||||
}
|
||||
|
||||
.stop-messgage {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
right: 100px;
|
||||
width: fit-content;
|
||||
padding: 10px 15px;
|
||||
border-radius: 10%;
|
||||
border: 1px solid rgb(86, 88, 105);
|
||||
background-color: rgb(52, 53, 65);
|
||||
color: rgb(217, 217, 217);
|
||||
cursor: pointer;
|
||||
}
|
||||
.stop-messgage:hover {
|
||||
background-color: rgb(64, 65, 79);
|
||||
/* border: none; */
|
||||
}
|
||||
.errorMessage {
|
||||
color: #ef4444;
|
||||
font-size: 16px;
|
||||
|
@ -308,7 +324,7 @@ nav svg {
|
|||
}
|
||||
#introsection h1,
|
||||
pre {
|
||||
font-size: 25px;
|
||||
font-size: 16px;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
#introsection h2 {
|
||||
|
|
|
@ -3,23 +3,41 @@ import { useState } from "react";
|
|||
|
||||
const BotResponse = ({ response }) => {
|
||||
const [botResoponse, setBotResponse] = useState("");
|
||||
const [isPrinting, setIsPrinting] = useState(true);
|
||||
const [isButtonVisible, setIsButtonVisible] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
let index = 1;
|
||||
let msg = setInterval(() => {
|
||||
if (!isPrinting) {
|
||||
// if isPrinting is false, clear interval and return
|
||||
clearInterval(msg);
|
||||
return;
|
||||
}
|
||||
setBotResponse(response.slice(0, index));
|
||||
if (index >= response.length) {
|
||||
clearInterval(msg);
|
||||
setIsButtonVisible(false);
|
||||
}
|
||||
index++;
|
||||
}, 100);
|
||||
}, [response]);
|
||||
return () => clearInterval(msg); // clear interval on component unmount
|
||||
}, [response, isPrinting]);
|
||||
|
||||
const stopPrinting = () => setIsPrinting(!isPrinting);
|
||||
|
||||
return (
|
||||
<pre>
|
||||
{botResoponse}
|
||||
{botResoponse === response ? "" : "|"}
|
||||
</pre>
|
||||
<>
|
||||
<pre>
|
||||
{botResoponse}
|
||||
{botResoponse === response ? "" : "|"}
|
||||
</pre>
|
||||
{isButtonVisible && (
|
||||
<button className="stop-messgage" onClick={stopPrinting}>
|
||||
{isPrinting ? "Stop Message" : "Regenerate Message"}
|
||||
</button>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
@ -14,16 +14,14 @@ const IntroSection = () => {
|
|||
answers again. Whether you need information for school or work, or just
|
||||
want to know the latest news, Talkbot has you covered.
|
||||
</h2>
|
||||
<p>
|
||||
Features:
|
||||
<ul>
|
||||
<li>Instant answers to any question</li>
|
||||
<li>Deep learning technology that improves with usage</li>
|
||||
<li>Continuously Learning</li>
|
||||
<li>User-friendly interface</li>
|
||||
<li>Available 24/7</li>
|
||||
</ul>
|
||||
</p>
|
||||
Features:
|
||||
<ul>
|
||||
<li>Instant answers to any question</li>
|
||||
<li>Deep learning technology that improves with usage</li>
|
||||
<li>Continuously Learning</li>
|
||||
<li>User-friendly interface</li>
|
||||
<li>Available 24/7</li>
|
||||
</ul>
|
||||
<p>
|
||||
Say goodbye to endless searching and typing, and say hello to TalkBot,
|
||||
your personal AI assistant. Try it now and see for yourself how TalkBot
|
||||
|
|
Loading…
Reference in New Issue