how to console.log in react-simple-chatbot - javascript

i try to do a bot who works as i want but i would like to implement some features (send mails, popups etc..) but i don't understand how can i console.log any elements .
there is my code:
import React from "react";
import ChatBot from "react-simple-chatbot";
import props from 'prop-types';
function Sendemail() {
console.log("test")
}
function CustomChatbot(props) {
const config = {
width: "300px",
height: "400px",
floating: true
};
return <ChatBot steps={steps} {...config} />;
}
export default CustomChatbot;
const steps = [
{
id: "Greet",
message: "Hello, Welcome to our website",
trigger: "Ask Name",
},
{
id: "Ask Name",
message: "Please type your name?",
trigger: "Waiting user input for name"
},
{
id: "Waiting user input for name",
user: true,
trigger: "ask questions"
},
{
id: "ask questions",
message: "Hi {previousValue}, I am Tony the bot, How can i help you!",
trigger: "informations"
},
{
id: "informations",
options: [
{
value: "Who founded Babycare",
label: "Who founded Babycare",
trigger: "Who founded"
},
{
value: "Contact",
label: "Contact",
trigger: "Contact"
}
]
},
{
id: "Who founded",
message: "ERWAN",
trigger: "informations"
},
{
id: "Contact",
message: "Ok, first, enter your adress-mail",
trigger: "Ask email"
},
{
id: "Ask email",
user: true,
trigger: "get-email"
},
{
id: "get-email",
message: "ok, {previousValue} !! Type your value now, please be fair",
trigger: "your question"
},
// {
// id: "your question",
// message: "Ok. Now, enter your message to the staff. Please be fair !!",
// trigger: "your message"
// },
{
id: "your question",
user: true,
trigger: "send mail"
},
{
id: "send mail",
message: "ok, there is your message : {previousValue} !! The support team will answer you as possible",
trigger: "thelast"
},
{
id: "thelast",
component: (
<div> {Sendemail()} </div>
),
end: true
},
];
THis code is my last try, on the last proposition, i just tried to put my function Sendmail() in the id:"the last". But i can't call function in array. I am quite lost, how can i do that?
Thanks for yours answers!

I am not sure what you are trying to achieve with Sendemail. But maybe this code will work
function SendEmail()
{
console.log('test')
return null
}
// in steps
{
id: "thelast",
component: (
<SendEmail/>
),
end: true
}

Related

discord.js - TypeError [COMMAND_INTERACTION_OPTION_TYPE]: Option "user" is of type: STRING; expected USER

When I run the script for my discord bot and use /warn remove it keeps throwing an error that user is of type string expected USER. It says the error is happening between lines 69:42 and I can't find the issue.
module.exports = {
category: 'Moderation',
description: 'Warn a user',
permissions: ['ADMINISTRATOR'],
slash: true,
guildOnly: true,
options: [
{
type: 'SUB_COMMAND',
name: 'remove',
description: 'Removes a warning from the user',
options: [
{
name: 'user',
type: 'USER',
description: 'The user to remove the warning from',
required: true,
},
{
name: 'id',
type: 'STRING',
description: 'The ID of the warning to remove',
required: true,
},
],
}
],
callback: async ({ guild, member: staff, interaction }) => {
const user = interaction.options.getUser('user')
if (subCommand === 'remove') {
const warning = await warnSchema.findByIdAndDelete(id)
return {
custom: true,
content: `Removed warning ${warning.id} from <#${user?.id}>`,
allowedMentions: {
users: []
}
}
}
}
}
I didn't post all the code because it seemed like it would be too much searching but this is the code that is causing the error.

SurveyJs with Laravel 8 without Larvel-surveyjs package

I want to create a survey app for my client for this I select surveyjs library to build the app.
I have created all tables like Survey, Questions, Answers, and Options now I want to pass dynamics questions and answers from database like
public function my_survey($slug)
{
$surveys = Survey::where('slug',$slug)->first();
$questions = Question::where('survey_id',$surveys->id)->with('answers')->get();
return view('user.my-survey', compact('surveys','questions'));
}
this will return the array of questions and options saved in database. and
this is Surveyjs script
Survey
.StylesManager
.applyTheme("modern");
var json = {
pages: [
{
questions: [
{
type: "matrix",
name: "Quality",
title: "Please indicate if you agree or disagree with the following statements",
columns: [
{
value: 1,
text: "Strongly Disagree"
}, {
value: 2,
text: "Disagree"
}, {
value: 3,
text: "Neutral"
}, {
value: 4,
text: "Agree"
}, {
value: 5,
text: "Strongly Agree"
}
],
rows: [
{
value: "affordable",
text: "Product is affordable"
}, {
value: "does what it claims",
text: "Product does what it claims"
}, {
value: "better then others",
text: "Product is better than other products on the market"
}, {
value: "easy to use",
text: "Product is easy to use"
}
]
}, {
type: "rating",
name: "satisfaction",
title: "How satisfied are you with the Product?",
isRequired: true,
mininumRateDescription: "Not Satisfied",
maximumRateDescription: "Completely satisfied"
}, {
type: "rating",
name: "recommend friends",
visibleIf: "{satisfaction} > 3",
title: "How likely are you to recommend the Product to a friend or co-worker?",
mininumRateDescription: "Will not recommend",
maximumRateDescription: "I will recommend"
}, {
type: "comment",
name: "suggestions",
title: "What would make you more satisfied with the Product?"
}
]
}, {
questions: [
{
type: "radiogroup",
name: "price to competitors",
title: "Compared to our competitors, do you feel the Product is",
choices: ["Less expensive", "Priced about the same", "More expensive", "Not sure"]
}, {
type: "radiogroup",
name: "price",
title: "Do you feel our current price is merited by our product?",
choices: ["correct|Yes, the price is about right", "low|No, the price is too low for your product", "high|No, the price is too high for your product"]
}, {
type: "multipletext",
name: "pricelimit",
title: "What is the... ",
items: [
{
name: "mostamount",
title: "Most amount you would every pay for a product like ours"
}, {
name: "leastamount",
title: "The least amount you would feel comfortable paying"
}
]
}
]
}, {
questions: [
{
type: "text",
name: "email",
title: "Thank you for taking our survey. Your survey is almost complete, please enter your email address in the box below if you wish to participate in our drawing, then press the 'Submit' button."
}
]
}
]
};
window.survey = new Survey.Model(json);
survey
.onComplete
.add(function (sender) {
document
.querySelector('#surveyResult')
.textContent = "Result JSON:\n" + JSON.stringify(sender.data, null, 3);
});
$("#surveyElement").Survey({model: survey});
I want to pass dynamic questions and options from laravel controller to the above script. please help me how to acheive this
In your my-survey view put questions in JSON format:
#isset($questions)
<script type="text/javascript">
window.questions= {!! $questions !!};
</script>
#endisset
In Surveyjs script put:
const json = window.questions;
window.survey = new Survey.Model(json);

item level permission in casl

In my case, the permission is not based on role and also there won't be one central permission object which I can put after login. The permission happens on item level. By permission happens on item level, I mean to say if I have an object of todos which has around 4 items then each item might have different permission levied as below
const todos = {
data: [
{
id: 1,
title: "Todo 1",
sub: "Let's start!",
permissions: [
{
action: "read",
subject: "todo"
},
{
action: "delete",
subject: "todo"
}
],
__typename: "Todo"
},
{ id: 2, title: "Todo 2", sub: "Let's start 2!", __typename: "Todo" },
{
id: 3,
title: "Todo 3",
sub: "Let's start 3!",
permissions: [
{
action: "read",
subject: "todo"
}
],
__typename: "Todo"
},
{ id: 4, title: "Todo 4", sub: "Let's start 4!", __typename: "Todo" }
]
};
For such case, how do i handle permission using casl?
This is what I was doing
ability.js
import { Ability } from "#casl/ability";
export default new Ability([
{
action: "read",
subject: "todo"
},
{
action: "delete",
subject: "todo"
}
]);
can.js
import { createContext } from "react";
import { createContextualCan } from "#casl/react";
export const AbilityContext = createContext();
export const Can = createContextualCan(AbilityContext.Consumer);
index.js
import React from "react";
import { Ability } from "#casl/ability";
import { AbilityContext, Can } from "./can";
const todos = {
data: [
{
id: 1,
title: "Todo 1",
sub: "Let's start!",
permissions: [
{
action: "read",
subject: "todo"
},
{
action: "delete",
subject: "todo"
}
],
__typename: "Todo"
},
{ id: 2, title: "Todo 2", sub: "Let's start 2!", __typename: "Todo" },
{
id: 3,
title: "Todo 3",
sub: "Let's start 3!",
permissions: [
{
action: "read",
subject: "todo"
}
],
__typename: "Todo"
},
{ id: 4, title: "Todo 4", sub: "Let's start 4!", __typename: "Todo" }
]
};
const Permission = () => {
const ability = React.useContext(AbilityContext);
return (
<>
<h1>Permission Based System</h1>
{todos.data.map((todo) => (
<div key={todo.id}>
<Can I="read" a="todo">
<div style={{ display: "flex", alignItems: "center" }}>
<div style={{ display: "flex", flexDirection: "column" }}>
<h1 style={{ margin: 0 }}>{todo.title}</h1>
<h3>{todo.sub}</h3>
</div>
<Can I="delete" a="todo">
<span>Delete</span>
</Can>
</div>
</Can>
</div>
))}
</>
);
};
export default Permission;
I have created a sandbox as well
https://codesandbox.io/s/mystifying-leaf-i968u?file=/src/permission/index.js:0-1472
For case, when you have permissions embedded into entities, you don't need CASL. You can use it but it won't bring any benefits. Why?
You duplicate subject Todo in response for every todo item in an array for no purpose. You know that you requested Todo and even GraphQLs __typename property tells you this.
It requires to create an Ability instance per subject type (in this case Todo), iterate over all todos, generate an object of conditions by id (so we can later check ability.can('read', todo)).
All this are useless, brings additional complexity and not benefits at all.
A better structure for your case would be this:
permissions: {
canRead: true,
canDelete: true
}
So, you can easily check permissions on UI - todo.permissions.canRead

v2 Wix React-native-navigation: how to actually implement side Menu with bottomTabs?

I am having a bit of trouble implementing the sideMenu to the following code: (see the startTabs).
I call this after "login" is clicked on my root screen. The root screen looks like the following:
Navigation.setRoot({
root: {
stack: {
children: [{
component: {
name: "navigation.playground.WelcomeScreen",
passProps: {
text: "stack with one child"
},
alignment: "center",
options: {
topBar: {
visible: true,
title: {
text: "main screen"
}
}
}
}
}]
}
}
});
const startTabs = () => {
Promise.all([
Icon.getImageSource("md-map", 30),
Icon.getImageSource("ios-share-alt", 30)
]).then(sources => {
Navigation.setRoot({
root: {
bottomTabs: {
children: [{
stack: {
children: [{
component: {
name: "navigation.playground.FindPlaceScreen",
options: {
bottomTab: {
text: "Find Place",
icon: sources[0]
},
topBar: {
visible: true,
title: {
text: "Find Place"
}
}
}
}
}
]
}
},
{
stack: {
children: [{
component: {
name: "navigation.playground.SharePlaceScreen",
options: {
bottomTab: {
text: "Share Place",
icon: sources[1]
},
topBar: {
// visible: true,
title: {
text: "Share Place"
}
}
}
}
}]
}
}
]
}
}
});
});
};
Now in order for me to implement sideMenu after login, Would I implement it in the "startTabs"? or elsewhere?
Solved this. Sorry I am a new programmer, so I had a spelling mistake in my sideDrawer component where "render" was spelled "redner". Took me the longest time to figure this out!!!
Otherwise the code I pasted in initial question is correct (for anyone who looks at this for reference). Thanks!

how to connect facebook messenger chatbot to a mongodb database to post requests and fetch responses by interacting with messenger bot

I am trying to connect my facebook messenger chatbot with mongodb
database. It is a simple questionery chatbot which will take a text and display some buttons with options and if user clicks one outton it should display more buttons with options and so on... Here i have configured chatbot in nodejs and instead on hardcoding, I want to fetch the data from mongodb database and post requests to the same database. Can anyone help me how to connect messenger chatbot with mongodb database and also how should i write the schemas for posting and getting responses. Thanks in advance.
Here is my code of messenger chatbot.
if (received_message.text) {
// Get the URL of the message attachments
response = {
attachment: {
type: "template",
payload: {
template_type: "generic",
elements: [
{
title: "Welcome to Flying Sphaghetti Monster Restaurant!",
subtitle: "Choose any of the options below.",
image_url:
"https://content3.jdmagicbox.com/comp/hyderabad/h5/040pxx40.xx40.140516124003.h3h5/catalogue/flying-spaghetti-monster-restaurant-jubilee-hills-hyderabad-home-delivery-restaurants-p6kmmr.jpg",
default_action: {
type: "web_url",
url:
"https://content3.jdmagicbox.com/comp/hyderabad/h5/040pxx40.xx40.140516124003.h3h5/catalogue/flying-spaghetti-monster-restaurant-jubilee-hills-hyderabad-home-delivery-restaurants-p6kmmr.jpg",
webview_height_ratio: "tall"
},
buttons: [
{
type: "postback",
title: "Walkin!",
payload: "A"
},
{
type: "postback",
title: "Reserve table!",
payload: "B"
},
{
type: "postback",
title: "Feed back!",
payload: "C"
}
]
}
]
}
}
};
else if (received_message.attachments){ let attachment_url = received_message.attachments[0].payload.url;
response = {
attachment: {
type: "template",
payload: {
template_type: "generic",
elements: [
{
title: "What this picture is for?",
subtitle: "Tap a button to answer.",
image_url: attachment_url,
buttons: [
{
type: "postback",
title: "Review!",
payload: "yes"
},
{
type: "postback",
title: "Suggestion!",
payload: "yeah"
}
]
}
]
}
} callSendAPI(sender_psid, response);
};}
This is how i am handling postbacks...
function handlePostback(sender_psid, received_postback) {
let response;
let payload = received_postback.payload;
if (payload === "A")
{
response = {
attachment: {
type: "template",
payload: {
template_type: "generic",
elements: [
{
title: "you have choosen for walkin!",
subtitle: "please choose these available walkins!.",
image_url:
"https://content3.jdmagicbox.com/comp/hyderabad/h5/040pxx40.xx40.140516124003.h3h5/catalogue/flying-spaghetti-monster-restaurant-jubilee-hills-hyderabad-home-delivery-restaurants-p6kmmr.jpg",
default_action: {
type: "web_url",
url:
"https://content3.jdmagicbox.com/comp/hyderabad/h5/040pxx40.xx40.140516124003.h3h5/catalogue/flying-spaghetti-monster-restaurant-jubilee-hills-hyderabad-home-delivery-restaurants-p6kmmr.jpg",
webview_height_ratio: "tall"
},
buttons: [
{
type: "postback",
title: "4 PM",
payload: "a"
},
{
type: "postback",
title: "5 PM",
payload: "b"
},
{
type: "postback",
title: "6 PM",
payload: "c"
}
]
}
]`

Categories