ChatBox.js
2.71 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
import React from "react";
import SuggestedOptions from './suggestedOptions'
import ExportButton from "./ExportButton";
const ChatBox = ({chatLog, setChatInput, handleSubmit, chatInput, startedInteraction, setStartedInteraction}) => {
return (
<section className="chatbox">
{!startedInteraction ? (
<SuggestedOptions setChatInput={setChatInput}/>
) : (
<>
<div className="chat-log response-to-export">
{chatLog.map((message, index) => (
<ChatMessage key={index} message={message} />
))}
<ExportButton className="export-button-mobile" label="Export Conversation" filename="Chat-Bot-Plus" />
</div>
</>
)}
<div className="chat-input-holder">
<form className="form" onSubmit={handleSubmit }>
<input
rows="1"
value={chatInput}
onChange={(e)=> {
setChatInput(e.target.value);
}}
className="chat-input-textarea" >
</input>
<button className="submit" type="submit" onClick={(e)=> {
setStartedInteraction(true);
if(document.querySelector('.chat-log')) {
setTimeout(()=>{
let posLeft = document.querySelector('.chat-log').scrollLeft;
let posBottom = 0;
for(let i = 0; i < document.querySelectorAll('.chat-message').length; i++) {
posBottom += (parseInt(document.querySelectorAll('.chat-message')[i].clientHeight) * 100);
}
document.querySelector('.chat-log').scroll(posLeft, posBottom);
})
}
}}>Submit</button>
</form>
<div id="openai_disclaimer">
<a href="https://ai-pro.org/disclaimer/" target="_blank" rel="noreferrer">
AI-PRO is powered by OpenAI. <br/>We are neither affiliated nor related
to OpenAI.
</a>
</div>
</div>
</section>
)
}
const ChatMessage = ({ message }) => {
return (
<div className={`chat-message ${message.user === "gpt" && "chatgpt"}`}>
<div className="chat-message-center" style={ message.user === "gpt" ? { background: "#ddf1f9"} : {}}>
<div className={`avatar ${message.user === "gpt" && "chatgpt"}`}>
{message.user === "gpt" ? <img className="ai-logo" alt="Ai-pro bot" src="../assets/images/bot.png" width="30px"/> : <img className="ai-logo" alt="Ai-pro user" src="../assets/images/user.png" />}
</div>
{/* <div className="message">
{message.message}
</div> */}
<div className="message" dangerouslySetInnerHTML={{ __html: message.message }} />
</div>
</div>
)
}
export default ChatBox