Чат-бот botUI (настройки даты, остановка чата при закрытии вкладки, вывод введённых пользователем данных)?
Дано: чат-бот botui на js (демо чата - https://botui.org/, документация - https://docs.botui.org/). Буду очень благодарна, если поможете ответить хотя бы на пару вопросов.
Код следующий:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://unpkg.com/botui/build/botui.min.css">
<link rel="stylesheet" href="https://unpkg.com/botui/build/botui-theme-default.css">
</head>
<body>
<div id="my-botui-app">
<bot-ui></bot-ui>
</div>
<script>
var botui = new BotUI('my-botui-app');
botui.message.bot({
content: 'Вы мужчина или женщина?',
loading: true,
delay: 1000,
}).then(function () {
return botui.action.button({
delay: 1000,
loading: true,
addMessage: true,
action: [{
text: 'Мужчина',
value: 'Мужчина'
}, {
text: 'Женщина',
value: 'Женщина'
}]
})
}).then(function (sex) {
// console.log(sex.value);
}).then(function () {
return botui.message.bot({
loading: true,
delay: 1000,
content: "Ваша дата рождения:",
});
}).then(function () {
return botui.action.text({
delay: 1000,
action: {
sub_type: 'date',
button: {
icon: 'check',
label: 'OK'
}
}
}).then(function (date) {
// console.log(date.value);
});
})
</script>
<script src="https://cdn.jsdelivr.net/vue/latest/vue.min.js"></script>
<script src="https://unpkg.com/botui/build/botui.min.js"></script>
</body>
</html>
1. Вопросы, касающиеся поля выбора даты рождения:
a) Сейчас календарь и поле ввода на русском языке. Если открыть в браузере в другой стране, то язык сменится автоматически или его необходимо сменить вручную? Как это можно сделать?
b) Календарь открывается только при клике на иконку. Как сделать так, чтобы он открывался при клике на любой участок этого поля?
c) Год позволяет писать более 4-х символов. Можно ли сделать ограничение на количество символов?
d) При вводе возраста меньше 18 нужно чтобы появлялось модальное окно, запрещающее дальнейшие действия.
2. При закрытии вкладки с чатом он должен остановиться. Как это можно сделать?
3. Как вывести данные, введённые пользователем, например в консоль, за пределами чата?
Ответы (1 шт):
этот календарь, это обычный input type="date", его настройки и стили генерируются браузером, в каждом браузере будет свой календарь, например в firefox, он открывается по клику на поле.
Язык должен подставиваться автоматически.
Для стороннего календаря, придется использовать готовые библиотеки, либо верстать свой календарь, что будет довольно затратно по времени
Для проверки возраста, вам необходимо писать свою функцию, которая будет высчитывать возраст и при возрасте меньше или больше 18 выполнять разный сценарий, например, грубый пример функции:
function getAge(date) {
... расчет возраста
if(age < 18) {
showModal()
} else {
... тут что-то делать если возраст подходящий
}
}
Чтобы вывести переменные за пределами чата, попробуйте создать дополнительные переменные, за пределами чата, например
let tempName = '';
потом внутри чата, когда пользователь ввел name вы присвойте значение tempName = name, должно сработать, но этот вариант просто для вывода в консоль, это 'колхозный' метод)

