node-red-contrib-chatbot
Version:
REDBot a Chat bot for a full featured chat bot for Telegram, Facebook Messenger and Slack. Almost no coding skills required
71 lines (64 loc) • 1.96 kB
JavaScript
import React, { useMemo, useCallback } from 'react';
import { SelectPicker, Icon } from 'rsuite';
import _ from 'lodash';
import useCurrentUser from '../hooks/current-user';
import SmallTag from '../components/small-tag';
const ChatbotsSelector = ({ chatbots, value, onChange }) => {
const { user } = useCurrentUser();
const listedChatbots = useMemo(
() => {
const allowedChatbotIds = (user.chatbotIds ?? '').split(',');
return chatbots
.filter(({ chatbotId }) => !_.isEmpty(chatbotId))
.filter(({ chatbotId }) => allowedChatbotIds.includes('*') || allowedChatbotIds.includes(chatbotId))
.map(({ chatbotId, name }) => ({ value: chatbotId, label: name ?? chatbotId }));
},
[user, chatbots]
);
const renderValue = useCallback(
(value, item) => {
if (_.isEmpty(value) || listedChatbots.find(bot => bot.value === value) == null) {
return (
<span>
Select a chatbot
</span>
)
} else {
return (
<span>
<Icon icon="commenting" style={{ color: '#999999', marginRight: '6px' }}/>
{item?.label}
</span>
);
}
},
[listedChatbots]
);
if (listedChatbots.length > 0) {
return (
<SelectPicker
style={{ marginTop: '11px', marginRight: '15px' }}
value={value}
data={listedChatbots}
appearance="subtle"
placeholder="Select chatbot"
placement="bottomEnd"
cleanable={false}
searchable={false}
menuStyle={{ zIndex: 100000000 }}
onChange={onChange}
renderMenuItem={(label, item) => {
return (
<div>
{label} <SmallTag color="#666666" capitalize={false}>{item.value}</SmallTag>
</div>
);
}}
renderValue={renderValue}
/>
);
} else {
return <span></span>;
}
};
export default ChatbotsSelector;