Skip to content

Commit

Permalink
Revert "Forwatting updated by VSCode in App.tsx file"
Browse files Browse the repository at this point in the history 
This reverts commit 62a27d3.
  • Loading branch information
@SDaniV
SDaniV committed Dec 3, 2024
1 parent 6c68a73 commit 51ae572
Showing 1 changed file with 144 additions and 161 deletions.
305 changes: 144 additions & 161 deletions src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,119 +4,111 @@ import { Flow } from "./types/Flow";
import { Params } from "./types/Params";

function App() {
const [name, setName] = useState("");
const [name, setName] = useState("")

// Serves as an example flow used during the development phase - covers all possible attributes in a block.
// restore to default state before running selenium tests (or update the test cases if necessary)!
const flow: Flow = {
start: {
message: "Hello! What is your name?",
path: "show_name",
},
show_name: {
message: (params: Params) => `Hey ${params.userInput}! Nice to meet you.`,
function: (params: Params) => setName(params.userInput),
transition: { duration: 1000 },
path: "ask_token",
},
ask_token: {
message: () =>
"Before we proceed, we need to verify your profile id, " +
"Enter your 6 digit profile id",
isSensitive: true,
path: (params: Params) => {
if (params.userInput.length !== 6) {
return "incorrect_answer";
} else {
return "ask_age_group";
}
},
},
ask_age_group: {
message: () =>
`Hey ${name}!, Your account got verified, May i know your age group?`,
options: ["child", "teen", "adult"],
chatDisabled: true,
path: () => "ask_math_question",
},
ask_math_question: {
message: (params: Params) => {
if (params.prevPath == "incorrect_answer") {
return;
}
return `I see you're a ${params.userInput}. Let's do a quick test! What is 1 + 1?`;
},
path: (params: Params) => {
if (params.userInput != "2") {
return "incorrect_answer";
} else {
return "ask_favourite_color";
}
},
},
ask_favourite_color: {
message: "Great Job! What is your favourite color?",
path: "ask_favourite_pet",
},
ask_favourite_pet: {
message: "Interesting! Pick any 2 pets below.",
checkboxes: {
items: ["Dog", "Cat", "Rabbit", "Hamster"],
min: 2,
max: 2,
},
function: (params: Params) =>
alert(`You picked: ${JSON.stringify(params.userInput)}!`),
chatDisabled: true,
path: "ask_height",
},
ask_height: {
message: "What is your height (cm)?",
path: async (params: Params) => {
if (isNaN(Number(params.userInput))) {
await params.injectMessage("Height needs to be a number!");
return;
}
return "ask_weather";
},
},
ask_weather: {
message: (params: Params) => {
if (params.prevPath == "incorrect_answer") {
return;
}
return "What's my favourite color? Click the button below to find out my answer!";
},
component: (
<div
style={{
width: "100%",
display: "flex",
alignItems: "center",
justifyContent: "center",
marginTop: 10,
}}
>
<button className="secret-fav-color" onClick={() => alert("black")}>
Click me!
</button>
</div>
),
path: async (params: Params) => {
if (params.userInput.toLowerCase() != "black") {
return "incorrect_answer";
} else {
await params.openChat(false);
return "close_chat";
}
},
},
close_chat: {
message:
"I went into hiding but you found me! Ok tell me, " +
"<b class='bold'>what's your favourite food?</b>",
path: "ask_image",
},
// Serves as an example flow used during the development phase - covers all possible attributes in a block.
// restore to default state before running selenium tests (or update the test cases if necessary)!
const flow: Flow = {
start: {
message: "Hello! What is your name?",
path: "show_name",
},
show_name : {
message: (params: Params) => `Hey ${params.userInput}! Nice to meet you.`,
function: (params: Params) => setName(params.userInput),
transition: {duration: 1000},
path: "ask_token",
},
ask_token: {
message: () => "Before we proceed, we need to verify your profile id, "
+ "Enter your 6 digit profile id",
isSensitive: true,
path: (params: Params) => {
if (params.userInput.length !== 6) {
return "incorrect_answer"
} else {
return "ask_age_group";
}
},
},
ask_age_group: {
message: () => `Hey ${name}!, Your account got verified, May i know your age group?`,
options: ["child", "teen", "adult"],
chatDisabled: true,
path: () => "ask_math_question",
},
ask_math_question: {
message: (params: Params) => {
if (params.prevPath == "incorrect_answer") {
return;
}
return `I see you're a ${params.userInput}. Let's do a quick test! What is 1 + 1?`
},
path: (params: Params) => {
if (params.userInput != "2") {
return "incorrect_answer"
} else {
return "ask_favourite_color";
}
},
},
ask_favourite_color: {
message: "Great Job! What is your favourite color?",
path: "ask_favourite_pet"
},
ask_favourite_pet: {
message: "Interesting! Pick any 2 pets below.",
checkboxes: {items: ["Dog", "Cat", "Rabbit", "Hamster"], min:2, max: 2},
function: (params: Params) => alert(`You picked: ${JSON.stringify(params.userInput)}!`),
chatDisabled: true,
path: "ask_height",
},
ask_height: {
message: "What is your height (cm)?",
path: async (params: Params) => {
if (isNaN(Number(params.userInput))) {
await params.injectMessage("Height needs to be a number!");
return;
}
return "ask_weather";
}
},
ask_weather: {
message: (params: Params) => {
if (params.prevPath == "incorrect_answer") {
return;
}
return "What's my favourite color? Click the button below to find out my answer!"
},
component: (
<div style={{
width: "100%",
display: "flex",
alignItems: "center",
justifyContent: "center",
marginTop: 10
}}>
<button
className="secret-fav-color"
onClick={() => alert("black")}>
Click me!
</button>
</div>
),
path: async (params: Params) => {
if (params.userInput.toLowerCase() != "black") {
return "incorrect_answer"
} else {
await params.openChat(false);
return "close_chat";
}
},
},
close_chat: {
message: "I went into hiding but you found me! Ok tell me, "+
"<b class='bold'>what's your favourite food?</b>",
path: "ask_image"
},
ask_image: {
message: (params: Params) =>
`${params.userInput}? Interesting. Could you share an image of that?`,
Expand All @@ -125,55 +117,46 @@ function App() {
params.showToast("Image is uploaded successfully!"),
path: "end",
},
end: {
message: "Thank you for sharing! See you again!",
path: "loop",
},
loop: {
message: (params: Params) => {
// sends the message half a second later to facilitate testing of new message prompt
setTimeout(async () => {
await params.injectMessage(
"You have reached the end of the conversation!"
);
}, 500);
},
path: "loop",
},
incorrect_answer: {
message: "Your answer is incorrect, try again!",
transition: { duration: 0 },
path: (params: Params) => params.prevPath,
},
};
end: {
message: "Thank you for sharing! See you again!",
path: "loop"
},
loop: {
message: (params: Params) => {
// sends the message half a second later to facilitate testing of new message prompt
setTimeout(async () => {
await params.injectMessage("You have reached the end of the conversation!");
}, 500)
},
path: "loop"
},
incorrect_answer: {
message: "Your answer is incorrect, try again!",
transition: {duration: 0},
path: (params: Params) => params.prevPath
},
}

return (
<div className="App">
<header className="App-header">
<div
style={{
display: "flex",
justifyContent: "center",
alignItems: "center",
marginTop: `calc(20vh)`,
}}
>
<ChatBot
id="chatbot-id"
flow={flow}
settings={{
audio: { disabled: false },
chatInput: { botDelay: 1000 },
userBubble: { showAvatar: true, dangerouslySetInnerHtml: true },
botBubble: { showAvatar: true, dangerouslySetInnerHtml: true },
voice: { disabled: false },
sensitiveInput: { asterisksCount: 6 },
}}
></ChatBot>
</div>
</header>
</div>
);
return (
<div className="App">
<header className="App-header">
<div style={{display: "flex", justifyContent: "center", alignItems: "center", marginTop: `calc(20vh)`}}>
<ChatBot
id="chatbot-id"
flow={flow}
settings={{
audio: {disabled: false},
chatInput: {botDelay: 1000},
userBubble: {showAvatar: true, dangerouslySetInnerHtml: true},
botBubble: {showAvatar: true, dangerouslySetInnerHtml: true},
voice: {disabled: false},
sensitiveInput: {asterisksCount: 6},
}}
></ChatBot>
</div>
</header>
</div>
);
}

export default App;
export default App;

0 comments on commit 51ae572

Please sign in to comment.