suggestedOptions.js
1.64 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
const SuggestedOptions = ({ setChatInput }) => {
const examples = ["Write an email requesting a 3-day vacation leave to my manager.", "Compose a song about nationalism and love for the country.", "Give me 3 easy-to-cook food recipes that I can prepare for a date night at home."];
const handleExampleClick = (example) => {
setChatInput(example);
};
return (
<div className="suggested">
<div className="suggestedrow title">
<h1>Welcome to AI-PRO</h1>
<p>This chatbot is capable of answering questions and generating text based on the input you provide.</p>
</div>
<div className="suggestedcol rack1">
<h2>Examples</h2>
<ul className="suggested-options">
{examples.map((example, index) => (
<li key={index}
onClick={() => handleExampleClick(example)}>
{example}
</li>
))}
</ul>
</div>
<div className="suggestedcol rack2">
<h2>Capabilities</h2>
<ul>
<li>Remembers the user's earlier statement in the ongoing discussion.</li>
<li>Allows the user to add more information or correct errors.</li>
<li>Trained to deny requests that are not appropriate.</li>
</ul>
</div>
<div className="suggestedcol rack3">
<h2>Limitations</h2>
<ul>
<li>May sometimes give wrong or incorrect information.</li>
<li>May at times produce harmful instructions or biased content.</li>
<li>Limited knowledge of what's been happening in the world since 2021.</li>
</ul>
</div>
</div>
);
};
export default SuggestedOptions;