custom-chatbot-app
Version:
This is my custom chatbot package for BuyersEdge
111 lines • 6.09 kB
JavaScript
import { __awaiter, __generator, __spreadArray } from "tslib";
import React, { useEffect, useState, useRef } from 'react';
import { StyledChatMessagesWrapper, StyledInput, StyledInputWrapper, StyledMessageList, StyledLoadingIndicator, StyledSendIconSubmit } from './styled';
import UserMessage from './UserMessage';
import BotMessage from './BotMessage';
import { getCurrentTime } from '../../../utils/getCurrentTime';
import { chatbotAPI } from '../../../utils/api';
import { checkOperatorPlatform } from '../../../utils/checkOperatorPlatform';
import { ManufactureGreetMessage, OperatorGreetMessage } from '../../../consts/GreetMessage';
import { svgs } from '../../../utils/svgs';
var mockData = [{ text: 'Hello, how are you doing today?', isUser: false, timeStamp: getCurrentTime() }, { text: 'Who do I have the pleasure of speaking with today?', isUser: false, timeStamp: getCurrentTime() }];
var ChatConversationSection = function (_a) {
var chatApiUrl = _a.chatApiUrl, platformId = _a.platformId, sessionId = _a.sessionId, authToken = _a.authToken;
var _b = useState(''), inputText = _b[0], setInputText = _b[1];
var _c = useState(mockData), chatList = _c[0], setChatList = _c[1];
var _d = useState(false), isLoading = _d[0], setIsLoading = _d[1];
var messageListRef = useRef(null);
// eslint-disable-next-line @typescript-eslint/no-explicit-any
var handleSubmit = function () { return __awaiter(void 0, void 0, void 0, function () {
var res_1, err_1;
var _a, _b, _c;
return __generator(this, function (_d) {
switch (_d.label) {
case 0:
if (inputText.trim() === '') {
return [2 /*return*/];
}
setChatList(__spreadArray(__spreadArray([], chatList, true), [
{ text: inputText, isUser: true, timeStamp: 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*/, 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 __spreadArray(__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: 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 __awaiter(void 0, void 0, void 0, function () {
return __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*/];
}
});
}); };
useEffect(function () {
if (messageListRef.current !== null) {
messageListRef.current.scrollTop = messageListRef.current.scrollHeight;
}
}, [chatList]);
useEffect(function () {
if (platformId !== null) {
checkOperatorPlatform(platformId) ? setChatList(OperatorGreetMessage) : setChatList(ManufactureGreetMessage);
}
}, [platformId]);
var handleIcon = function () {
if (inputText === '')
return svgs.sendIcon;
return svgs.activeSendIcon;
};
return (React.createElement(StyledChatMessagesWrapper, null,
React.createElement(StyledMessageList, { ref: messageListRef }, chatList === null || chatList === void 0 ? void 0 :
chatList.map(function (message, index) {
return (message.isUser
? React.createElement(UserMessage, { message: message, key: index })
: React.createElement(BotMessage, { message: message, key: index }));
}),
isLoading && React.createElement(StyledLoadingIndicator, null)),
React.createElement(StyledInputWrapper, null,
React.createElement(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.createElement(StyledSendIconSubmit, { onClick: function () { handleSubmit().catch(console.error); } }, handleIcon()))));
};
export default ChatConversationSection;
//# sourceMappingURL=index.js.map