Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 25fa20e

Browse files
fix: fixing chatbot dynamically
1 parent f23159d commit 25fa20e

File tree

4 files changed

+48
-55
lines changed

4 files changed

+48
-55
lines changed

‎public/index.html‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,12 @@
66
<meta name="viewport" content="width=device-width, initial-scale=1" />
77
<meta name="theme-color" content="#000000" />
88
<meta name="description" content="React Chatbot" />
9+
<link rel="preconnect" href="https://fonts.googleapis.com" />
10+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
11+
<link
12+
href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
13+
rel="stylesheet"
14+
/>
915
<title>React Chatbot</title>
1016
</head>
1117
<body>

‎src/Component/Modal/ChatsBot.js‎

Lines changed: 41 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,42 @@
1-
import { useState } from "react";
1+
import { ThemeProvider } from "styled-components";
22
import ChatBot from "react-simple-chatbot";
33

4-
const datas = [
5-
{
6-
id: "1",
7-
data: {
8-
label: "Ada Yang Bisa Kami Bantu?",
9-
},
10-
},
11-
{
12-
id: "2",
13-
data: {
14-
label: "tampilkan menu",
15-
},
16-
},
17-
{
18-
id: "3",
19-
data: {
20-
label: "Baiklah, berikut ini menunya:",
21-
},
22-
},
23-
{
24-
id: "4",
25-
data: {
26-
option: true,
27-
},
28-
},
29-
{
30-
id: "5",
31-
data: {
32-
label: "Baik, kami akan mengirimkan {previousValue}",
33-
},
34-
},
35-
];
4+
const ChatsBot = ({ nodes, edges }) => {
5+
const steps = nodes?.flatMap((node, index) => {
6+
const dataLabel = node.data.label
7+
.split("\n")
8+
.map((paragraph, index) => <p key={index}>{paragraph}</p>);
369

37-
const MenuBotChat = ({ edges }) => {
38-
const [nodes, setnodes] = useState(datas);
39-
40-
console.log(nodes);
41-
42-
if (!nodes || nodes.length === 0) {
43-
return null;
44-
}
45-
46-
const steps = nodes.flatMap((node, index) => {
47-
if (index === nodes.length - 1) {
10+
if (index === nodes.length - 1 && nodes.length === 2) {
11+
return [
12+
{
13+
id: node.id,
14+
user: true,
15+
end: true,
16+
validator: (value) => {
17+
if (value === node.data.label) {
18+
return true;
19+
} else {
20+
return "Keyword yang anda masukan salah";
21+
}
22+
},
23+
},
24+
];
25+
} else if (index === nodes.length - 1 && nodes.length > 2) {
4826
return [
4927
{
5028
id: node.id,
51-
message: node.data.label,
29+
component: <div>{dataLabel}</div>,
30+
asMessage: true,
5231
end: true,
5332
},
5433
];
5534
} else if (index % 2 === 0) {
5635
return [
5736
{
5837
id: node.id,
59-
message: node.data.label,
38+
component: <div>{dataLabel}</div>,
39+
asMessage: true,
6040
trigger: nodes[index + 1].id,
6141
},
6242
];
@@ -98,14 +78,23 @@ const MenuBotChat = ({ edges }) => {
9878
}
9979
});
10080

101-
console.log(steps);
81+
const theme = {
82+
background: "#f5f8fb",
83+
fontFamily: "Roboto, sans-serif",
84+
headerBgColor: "#25D366",
85+
headerFontColor: "#fff",
86+
headerFontSize: "15px",
87+
botBubbleColor: "#25D366",
88+
botFontColor: "#fff",
89+
userBubbleColor: "#fff",
90+
userFontColor: "#4a4a4a",
91+
};
10292

10393
return (
104-
<>
105-
<ChatBot steps={steps} />
106-
{/* <h1>Hello</h1> */}
107-
</>
94+
<ThemeProvider theme={theme}>
95+
<ChatBot headerTitle="React Chatbot" steps={steps} />
96+
</ThemeProvider>
10897
);
10998
};
11099

111-
export default MenuBotChat;
100+
export default ChatsBot;

‎src/Component/Modal/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ const AlertDialog: React.FunctionComponent<Props> = ({ nodes, edges }) => {
2727
onClick={handleClickOpen}
2828
/>
2929
<Dialog open={open} onClose={handleClose}>
30-
<ChatsBot edges={edges} />
30+
<ChatsBot edges={edges} nodes={nodes}/>
3131
</Dialog>
3232
</React.Fragment>
3333
);

‎src/index.css‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,13 @@ body,
55
#root,
66
.App {
77
height: 100%;
8-
font-family: "Montserrat", sans-serif;
98
font-family: "Roboto", sans-serif;
109
}
1110
@tailwind base;
1211
@tailwind components;
1312
@tailwind utilities;
1413

1514
.App {
16-
font-family: "Montserrat", sans-serif;
1715
font-family: "Roboto", sans-serif;
1816
text-align: center;
1917
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /