custom-chatbot-app
Version:
This is my custom chatbot package for BuyersEdge
113 lines • 6.51 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var styled_1 = require("./styled");
var UserMessage_1 = tslib_1.__importDefault(require("./UserMessage"));
var BotMessage_1 = tslib_1.__importDefault(require("./BotMessage"));
var getCurrentTime_1 = require("../../../utils/getCurrentTime");
var api_1 = require("../../../utils/api");
var checkOperatorPlatform_1 = require("../../../utils/checkOperatorPlatform");
var GreetMessage_1 = require("../../../consts/GreetMessage");
var svgs_1 = require("../../../utils/svgs");
var mockData = [{ text: 'Hello, how are you doing today?', isUser: false, timeStamp: (0, getCurrentTime_1.getCurrentTime)() }, { text: 'Who do I have the pleasure of speaking with today?', isUser: false, timeStamp: (0, getCurrentTime_1.getCurrentTime)() }];
var ChatConversationSection = function (_a) {
var chatApiUrl = _a.chatApiUrl, platformId = _a.platformId, sessionId = _a.sessionId, authToken = _a.authToken;
var _b = (0, react_1.useState)(''), inputText = _b[0], setInputText = _b[1];
var _c = (0, react_1.useState)(mockData), chatList = _c[0], setChatList = _c[1];
var _d = (0, react_1.useState)(false), isLoading = _d[0], setIsLoading = _d[1];
var messageListRef = (0, react_1.useRef)(null);
// eslint-disable-next-line @typescript-eslint/no-explicit-any
var handleSubmit = function () { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
var res_1, err_1;
var _a, _b, _c;
return tslib_1.__generator(this, function (_d) {
switch (_d.label) {
case 0:
if (inputText.trim() === '') {
return [2 /*return*/];
}
setChatList(tslib_1.__spreadArray(tslib_1.__spreadArray([], chatList, true), [
{ text: inputText, isUser: true, timeStamp: (0, getCurrentTime_1.getCurrentTime)() }
], false));
setInputText('');
setIsLoading(true);
if (messageListRef.current !== null) {
(_a = messageListRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({
top: messageListRef.current.scrollHeight,
behavior: 'smooth'
});
}
_d.label = 1;
case 1:
_d.trys.push([1, 3, 4, 5]);
return [4 /*yield*/, (0, api_1.chatbotAPI)(chatApiUrl, platformId, sessionId, inputText, authToken)];
case 2:
res_1 = _d.sent();
if ((res_1 === null || res_1 === void 0 ? void 0 : res_1.success) === true) {
setChatList(function (prevChatList) {
var _a;
return tslib_1.__spreadArray(tslib_1.__spreadArray([], prevChatList, true), [
{
text: (_a = res_1 === null || res_1 === void 0 ? void 0 : res_1.payload) === null || _a === void 0 ? void 0 : _a.chatbot_output,
isUser: false,
timeStamp: (0, getCurrentTime_1.getCurrentTime)()
}
], false);
});
}
return [3 /*break*/, 5];
case 3:
err_1 = _d.sent();
alert((_c = (_b = err_1 === null || err_1 === void 0 ? void 0 : err_1.response) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.message);
return [3 /*break*/, 5];
case 4:
setIsLoading(false);
return [7 /*endfinally*/];
case 5: return [2 /*return*/];
}
});
}); };
var handleEnterKey = function (e) { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
return tslib_1.__generator(this, function (_a) {
switch (_a.label) {
case 0:
if (!(e.key === 'Enter')) return [3 /*break*/, 2];
e.preventDefault();
return [4 /*yield*/, handleSubmit()];
case 1:
_a.sent();
_a.label = 2;
case 2: return [2 /*return*/];
}
});
}); };
(0, react_1.useEffect)(function () {
if (messageListRef.current !== null) {
messageListRef.current.scrollTop = messageListRef.current.scrollHeight;
}
}, [chatList]);
(0, react_1.useEffect)(function () {
if (platformId !== null) {
(0, checkOperatorPlatform_1.checkOperatorPlatform)(platformId) ? setChatList(GreetMessage_1.OperatorGreetMessage) : setChatList(GreetMessage_1.ManufactureGreetMessage);
}
}, [platformId]);
var handleIcon = function () {
if (inputText === '')
return svgs_1.svgs.sendIcon;
return svgs_1.svgs.activeSendIcon;
};
return (react_1.default.createElement(styled_1.StyledChatMessagesWrapper, null,
react_1.default.createElement(styled_1.StyledMessageList, { ref: messageListRef }, chatList === null || chatList === void 0 ? void 0 :
chatList.map(function (message, index) {
return (message.isUser
? react_1.default.createElement(UserMessage_1.default, { message: message, key: index })
: react_1.default.createElement(BotMessage_1.default, { message: message, key: index }));
}),
isLoading && react_1.default.createElement(styled_1.StyledLoadingIndicator, null)),
react_1.default.createElement(styled_1.StyledInputWrapper, null,
react_1.default.createElement(styled_1.StyledInput, { type: 'text', id: 'message-input', placeholder: 'Type your message here...', value: inputText, onChange: function (e) { setInputText(e.target.value); }, disabled: isLoading, onKeyDown: function (e) { handleEnterKey(e); } }),
react_1.default.createElement(styled_1.StyledSendIconSubmit, { onClick: function () { handleSubmit().catch(console.error); } }, handleIcon()))));
};
exports.default = ChatConversationSection;
//# sourceMappingURL=index.js.map