servibot
Version:
This is the official API for ServiBot, an advanced AI chatbot which provides enhanced customer service to businesses.
780 lines (772 loc) • 28.5 kB
JavaScript
import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import _regeneratorRuntime from '@babel/runtime/regenerator';
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';
import 'firebase/compat/storage';
import 'firebase/firestore';
import { useToast, ChakraProvider, Flex, Button, Image, Text, InputGroup, Input, InputRightElement, Spinner } from '@chakra-ui/react';
import { useRef, useState, useEffect } from 'react';
import OpenAI from 'openai';
import { ChevronDownIcon } from '@chakra-ui/icons';
import { jsx, jsxs } from 'react/jsx-runtime';
var ServiBot = function ServiBot(props) {
var toast = useToast();
var bottomRef = useRef(null);
var _useState = useState(""),
_useState2 = _slicedToArray(_useState, 2),
color = _useState2[0],
setColor = _useState2[1];
var _useState3 = useState(false),
_useState4 = _slicedToArray(_useState3, 2),
display = _useState4[0],
setDisplay = _useState4[1];
var _useState5 = useState([true, "Label"]),
_useState6 = _slicedToArray(_useState5, 2),
label = _useState6[0],
setLabel = _useState6[1];
var _useState7 = useState(""),
_useState8 = _slicedToArray(_useState7, 2);
_useState8[0];
var setCompanyName = _useState8[1];
var _useState9 = useState(["Welcome to our chatbot, how can I help you today?"]),
_useState10 = _slicedToArray(_useState9, 2),
messages = _useState10[0],
setMessages = _useState10[1];
var _useState11 = useState(false),
_useState12 = _slicedToArray(_useState11, 2),
animationTrigger = _useState12[0],
setAnimationTrigger = _useState12[1];
var _useState13 = useState(""),
_useState14 = _slicedToArray(_useState13, 2),
img = _useState14[0];
_useState14[1];
var _useState15 = useState("one"),
_useState16 = _slicedToArray(_useState15, 2),
img2 = _useState16[0],
setImg2 = _useState16[1];
var _useState17 = useState(""),
_useState18 = _slicedToArray(_useState17, 2),
txt = _useState18[0];
_useState18[1];
var _useState19 = useState(""),
_useState20 = _slicedToArray(_useState19, 2),
position = _useState20[0],
setPosition = _useState20[1];
var _useState21 = useState([]),
_useState22 = _slicedToArray(_useState21, 2),
prompts = _useState22[0],
setPrompts = _useState22[1];
var _useState23 = useState(false),
_useState24 = _slicedToArray(_useState23, 2),
show = _useState24[0],
setShow = _useState24[1];
var _useState25 = useState(""),
_useState26 = _slicedToArray(_useState25, 2),
toxt = _useState26[0],
setToxt = _useState26[1];
var _useState27 = useState(false),
_useState28 = _slicedToArray(_useState27, 2),
resload = _useState28[0],
setResload = _useState28[1];
var _useState29 = useState(false),
_useState30 = _slicedToArray(_useState29, 2),
ready = _useState30[0],
setReady = _useState30[1];
var _useState31 = useState(""),
_useState32 = _slicedToArray(_useState31, 2),
chatImg = _useState32[0],
setChatImg = _useState32[1];
var _useState33 = useState(""),
_useState34 = _slicedToArray(_useState33, 2),
xImg = _useState34[0],
setXImg = _useState34[1];
var _useState35 = useState(""),
_useState36 = _slicedToArray(_useState35, 2),
avatarImg = _useState36[0],
setAvatarImg = _useState36[1];
var _useState37 = useState(""),
_useState38 = _slicedToArray(_useState37, 2),
logoImg = _useState38[0],
setLogoImg = _useState38[1];
var _useState39 = useState(""),
_useState40 = _slicedToArray(_useState39, 2),
sendImg = _useState40[0],
setSendImg = _useState40[1];
var firebaseConfig = {
apiKey: "AIzaSyANzBgpkTRm4wWVTXvOGN06_4moH30yYW0",
authDomain: "servibot-35220.firebaseapp.com",
projectId: "servibot-35220",
storageBucket: "servibot-35220.appspot.com",
messagingSenderId: "568351336305",
appId: "1:568351336305:web:a1026f44a414a51b3938d0",
measurementId: "G-CV36XS4YHD"
};
var firebaseApp = firebase.initializeApp(firebaseConfig);
// Use these for db & auth
var db = firebaseApp.firestore();
firebase.auth();
var storage = firebase.storage();
useEffect(function () {
if (props.id != "") {
db.collection("companies").doc(props.id).get().then(function (val) {
if (val.exists) {
if (val.get("respondersImage") != "") {
storage.ref(val.get("respondersImage")).getDownloadURL().then(function (url) {
setImg2(url);
});
} else {
setImg2("");
}
// split up storage stuff in case what and change chatimg stuff as well
storage.ref("/logo.png").getDownloadURL().then(function (url) {
setLogoImg(url);
storage.ref("/avatar.png").getDownloadURL().then(function (url) {
setAvatarImg(url);
storage.ref("/x.png").getDownloadURL().then(function (url) {
setXImg(url);
storage.ref("/send.png").getDownloadURL().then(function (url) {
setSendImg(url);
storage.ref("/chat.png").getDownloadURL().then(function (url) {
setChatImg(url);
setReady(true);
});
});
});
});
});
setPrompts(val.get("prompts"));
setColor(val.get("color"));
setDisplay(val.get("display"));
setLabel(val.get("label"));
setCompanyName(val.get("companyName"));
setPosition(val.get("position"));
} else {
console.error("This is an invalid API");
console.log("Please try again or contact us if it continually doesn't work");
}
});
} else {
console.error("This is an invalid id");
}
}, []);
useEffect(function () {}, [messages]);
useEffect(function () {}, [ready]);
useEffect(function () {}, [show]);
// useEffect(() => {}, [img]);
useEffect(function () {}, [img2]);
useEffect(function () {}, [chatImg]);
useEffect(function () {}, [xImg]);
useEffect(function () {}, [avatarImg]);
useEffect(function () {}, [logoImg]);
useEffect(function () {}, [sendImg]);
useEffect(function () {}, [resload]);
var openAIOutput = /*#__PURE__*/function () {
var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(e) {
var n, maxTokens;
return _regeneratorRuntime.wrap(function _callee2$(_context2) {
while (1) switch (_context2.prev = _context2.next) {
case 0:
e.preventDefault();
setMessages(function (prevMessages) {
return [].concat(_toConsumableArray(prevMessages), [n]);
});
n = toxt;
setToxt("");
setResload(true);
maxTokens = 15000;
db.collection("OpenAI").doc("API").get().then( /*#__PURE__*/function () {
var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(val) {
var apiK, openai, model, temp, response;
return _regeneratorRuntime.wrap(function _callee$(_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
apiK = val.get("Key");
openai = new OpenAI({
apiKey: apiK,
dangerouslyAllowBrowser: true
});
model = "gpt-3.5-turbo-16k";
temp = 0.85;
_context.prev = 4;
_context.next = 7;
return openai.chat.completions.create({
model: model,
// prompt: prompt,
messages: [{
role: "user",
content: "Answer the text message: ".concat(n, " with another text message (presumably shorter) as a welcoming employee of a company. \n\nAnswer the message based on the information about the company:\n").concat(_toConsumableArray(prompts)[0], ". Answer the questions like a normal person would. Try to connect with others and be the most attractive employee you can be for a company. If a question is personal, feel free to answer in a personal way. If possible try to keep text messages shorter.")
}],
max_tokens: maxTokens,
temperature: temp
});
case 7:
response = _context.sent;
// console.log([...prompts][0]);
// console.log(`request cost: ${response.usage.total_tokens} tokens`);
// console.log(response.choices[0].message.content);
setResload(false);
setMessages(function (prevMessages) {
return [].concat(_toConsumableArray(prevMessages), [response.choices[0].message.content]);
});
setToxt("");
return _context.abrupt("return");
case 14:
_context.prev = 14;
_context.t0 = _context["catch"](4);
console.log("This is an error");
toast({
title: "Cannot generate more code",
duration: 3000,
isClosable: true,
status: "error"
});
setResload(false);
throw _context.t0;
case 20:
case "end":
return _context.stop();
}
}, _callee, null, [[4, 14]]);
}));
return function (_x2) {
return _ref2.apply(this, arguments);
};
}())["catch"](function (err) {
toast({
title: "There has been an error",
duration: 3000,
isClosable: true,
status: "error"
});
console.log(err.message);
});
case 7:
case "end":
return _context2.stop();
}
}, _callee2);
}));
return function openAIOutput(_x) {
return _ref.apply(this, arguments);
};
}();
var scrollToBottom = function scrollToBottom() {
if (bottomRef.current) {
bottomRef.current.scrollTop = bottomRef.current.scrollHeight;
}
};
useEffect(scrollToBottom, [messages]);
if (ready) {
return /*#__PURE__*/jsx(ChakraProvider, {
children: position == "left" ? /*#__PURE__*/jsxs(Flex, {
position: "fixed",
left: 0,
top: "calc(100vh - 490px)",
direction: "column",
width: 330,
height: 450,
zIndex: 2000,
gap: 3,
margin: 5,
children: [show ? /*#__PURE__*/jsxs(Flex, {
direction: "column",
width: "100%",
height: "82.5%"
// boxShadow={"0 0 5px 2px #bcbcbc"}
,
boxShadow: "0 0 3px 1px #bcbcbc",
borderRadius: 5
// zIndex={2000}
,
position: "relative",
children: [/*#__PURE__*/jsx(Flex, {
w: "full",
height: 10,
justifyContent: "flex-end",
alignItems: "center",
backgroundColor: color == "blue" ? "#3D96EE" : color == "green" ? "#37D35D" : color == "red" ? "#F44B4B" : color == "orange" ? "#E37500" : color == "purple" ? "#913AD6" : color == "yellow" ? "#C1C545" : "#3D96EE",
borderTopRadius: 5,
children: /*#__PURE__*/jsx(Button, {
colorScheme: "transparent",
_hover: {
opacity: 0.8
},
onClick: function onClick() {
return setShow(false);
},
children: /*#__PURE__*/jsx(ChevronDownIcon, {
color: "white"
})
})
}), /*#__PURE__*/jsx(Flex, {
direction: "column",
width: "100%",
padding: 2,
overflowY: "scroll",
backgroundColor: "#ffffff",
gap: 2,
ref: bottomRef,
children: messages.map(function (message, index) {
return /*#__PURE__*/jsxs(Flex, {
width: "100%",
justifyContent: "left",
alignItems: "center",
gap: 2,
children: [/*#__PURE__*/jsx(Image
// src={img == "" ? "/avatar.png" : img}
, {
alt: "Avatar image",
src: index % 2 == 0 ? img2 != "" ? img2 : logoImg :
// : img != ""
// ? img
avatarImg,
boxShadow: "0 0 3px 1px #dfdfdf",
w: 30,
h: 30,
borderRadius: "50%"
}), /*#__PURE__*/jsx(Flex, {
alignItems: "center",
justifyContent: "center",
backgroundColor: index % 2 == 0 ? "#dfdfdf" : "#37C34E",
borderRadius: 15,
pl: 3,
pr: 3,
pt: 1,
pb: 1,
children: /*#__PURE__*/jsx(Text, {
textAlign: "left",
color: index % 2 == 0 ? "#000000" : "#ffffff",
fontSize: "11pt",
children: message
})
})]
})
/* Waiting for AI notification thing */
/* <Flex
direction={"column"}
alignItems={"center"}
justifyContent={"center"}
width={"100%"}
>
<Text
textAlign={"center"}
fontSize={"10pt"}
fontWeight={700}
>
It may take a few seconds, please wait...
</Text>
</Flex> */;
})
}), /*#__PURE__*/jsx(Flex, {
flex: "1",
backgroundColor: "#ffffff"
}), /*#__PURE__*/jsx(InputGroup, {
size: "md",
w: "100%",
h: "40px",
backgroundColor: "#ffffff",
borderBottomRadius: 5,
borderTop: "1px solid #efefef",
borderRadius: 0,
children: /*#__PURE__*/jsxs(Flex, {
alignItems: "center",
justifyContent: "center",
width: "100%",
as: "form",
onSubmit: function onSubmit(e) {
return openAIOutput(e);
},
children: [/*#__PURE__*/jsx(Input, {
type: "text",
placeholder: "Type here",
readOnly: resload,
value: toxt,
onChange: function onChange(e) {
return setToxt(e.target.value);
},
borderTopRadius: 0,
pr: 8,
required: true
// value={inputValue}
// onChange={handleInputChange}
}), /*#__PURE__*/jsx(InputRightElement, {
children: /*#__PURE__*/jsx(Button, {
h: "100%",
size: "sm",
type: "submit",
colorScheme: "transparent",
w: 20,
_hover: {
cursor: "pointer",
opacity: 0.8
},
children: resload == false ? /*#__PURE__*/jsx(Image, {
src: sendImg,
alt: "Send it here"
}) : /*#__PURE__*/jsx(Spinner, {
color: "black",
size: "sm"
})
})
})]
})
})]
}) : /*#__PURE__*/jsx(Flex, {
flex: "1"
}), display && /*#__PURE__*/jsxs(Flex, {
gap: 3,
alignItems: "center",
justifyContent: position == "right" ? "right" : "left",
children: [_toConsumableArray(label)[0] && txt != "" && position == "right" && /*#__PURE__*/jsx(Flex, {
backgroundColor: "white",
paddingLeft: 3,
paddingRight: 3,
boxShadow: "0 0 5px 2px #bcbcbc",
borderRadius: 5,
as: Button,
colorScheme: "transparent",
color: "black",
fontWeight: 400,
onClick: function onClick() {
return setShow(!show);
}
// zIndex={2000}
// _hover={{
// opacity: 0.8,
// boxShadow: "0 0 3px 1px #bcbcbc",
// }}
,
children: /*#__PURE__*/jsx(Text, {
children: txt
})
}), /*#__PURE__*/jsx(Button, {
colorScheme: "transparent"
// _hover={{
// opacity: 0.8,
// boxShadow: "none",
// }}
,
borderRadius: "50%",
padding: 4,
width: 65,
height: 65
// Uncomment later line below
// boxShadow={"0 0 5px 2px #bcbcbc"}
// zIndex={2000}
,
backgroundColor: color == "blue" ? "#3D96EE" : color == "green" ? "#37D35D" : color == "red" ? "#F44B4B" : color == "orange" ? "#E37500" : color == "purple" ? "#913AD6" : color == "yellow" ? "#C1C545" : "#3D96EE",
_hover: {
opacity: 0.95
},
onClick: function onClick() {
setAnimationTrigger(false);
// Trigger the animation
setTimeout(function () {
return setAnimationTrigger(true);
}, 10);
setShow(!show);
},
sx: {
animation: animationTrigger ? "bounce 0.3s ease" : "none",
"@keyframes bounce": {
"0%": {
transform: "scale(1)"
},
"50%": {
transform: "scale(1.1)"
},
"100%": {
transform: "scale(1)"
}
}
},
children: chatImg != "" && /*#__PURE__*/jsx(Image, {
src: !show ? chatImg : xImg,
alt: "Chat icon"
})
}), _toConsumableArray(label)[0] && txt != "" && position == "left" && /*#__PURE__*/jsx(Flex, {
backgroundColor: "white",
paddingLeft: 3,
paddingRight: 3,
boxShadow: "0 0 5px 2px #bcbcbc",
borderRadius: 5,
as: Button,
colorScheme: "transparent",
color: "black",
_hover: {
opacity: 0.95
},
fontWeight: 400
// zIndex={2000}
// _hover={{
// opacity: 0.8,
// boxShadow: "0 0 3px 1px #bcbcbc",
// }}
,
children: /*#__PURE__*/jsx(Text, {
children: txt
})
})]
})]
}) : /*#__PURE__*/jsxs(Flex, {
position: "fixed",
left: "calc(100vw - 370px)",
top: "calc(100vh - 490px)",
direction: "column",
width: 330,
height: 450,
gap: 3,
margin: 5,
zIndex: 2000,
children: [show ? /*#__PURE__*/jsxs(Flex, {
direction: "column",
width: "100%",
height: "82.5%",
position: "relative"
// boxShadow={"0 0 5px 2px #bcbcbc"}
,
boxShadow: "0 0 3px 1px #bcbcbc",
borderRadius: 5
// zIndex={2000}
,
children: [/*#__PURE__*/jsx(Flex, {
w: "full",
height: 10,
justifyContent: "flex-end",
alignItems: "center",
backgroundColor: color == "blue" ? "#3D96EE" : color == "green" ? "#37D35D" : color == "red" ? "#F44B4B" : color == "orange" ? "#E37500" : color == "purple" ? "#913AD6" : color == "yellow" ? "#C1C545" : "#3D96EE",
borderTopRadius: 5,
children: /*#__PURE__*/jsx(Button, {
colorScheme: "transparent",
_hover: {
opacity: 0.8
},
onClick: function onClick() {
return setShow(false);
},
children: /*#__PURE__*/jsx(ChevronDownIcon, {
color: "white"
})
})
}), /*#__PURE__*/jsx(Flex, {
direction: "column",
width: "100%",
padding: 2,
overflowY: "scroll",
gap: 2,
backgroundColor: "#ffffff",
ref: bottomRef,
children: messages.map(function (message, index) {
return /*#__PURE__*/jsxs(Flex, {
width: "100%",
justifyContent: "left",
alignItems: "center",
gap: 2,
children: [/*#__PURE__*/jsx(Image
// src={img == "" ? "/avatar.png" : img}
, {
src: index % 2 == 0 ? img2 != "" ? img2 : logoImg : img != "" ? img : avatarImg,
boxShadow: "0 0 3px 1px #dfdfdf",
w: 30,
h: 30,
borderRadius: "50%",
alt: "Profile Image"
}), /*#__PURE__*/jsx(Flex, {
alignItems: "center",
justifyContent: "center",
backgroundColor: index % 2 == 0 ? "#dfdfdf" : "#37C34E",
borderRadius: 15,
pl: 3,
pr: 3,
pt: 1,
pb: 1,
children: /*#__PURE__*/jsx(Text, {
textAlign: "left",
color: index % 2 == 0 ? "#000000" : "#ffffff",
fontSize: "11pt",
children: message
})
})]
})
/* Waiting for AI notification thing */
/* <Flex
direction={"column"}
alignItems={"center"}
justifyContent={"center"}
width={"100%"}
>
<Text
textAlign={"center"}
fontSize={"10pt"}
fontWeight={700}
>
It may take a few seconds, please wait...
</Text>
</Flex> */;
})
}), /*#__PURE__*/jsx(Flex, {
flex: "1",
backgroundColor: "#ffffff"
}), /*#__PURE__*/jsx(InputGroup, {
size: "md",
w: "100%",
h: "40px",
borderTop: "1px solid #efefef",
borderRadius: 0,
backgroundColor: "#ffffff",
borderBottomRadius: 5,
children: /*#__PURE__*/jsxs(Flex, {
alignItems: "center",
justifyContent: "center",
width: "100%",
as: "form",
onSubmit: function onSubmit(e) {
return openAIOutput(e);
},
children: [/*#__PURE__*/jsx(Input, {
type: "text",
placeholder: "Type here",
readOnly: resload,
value: toxt,
onChange: function onChange(e) {
return setToxt(e.target.value);
},
borderTopRadius: 0,
pr: 8,
required: true
// value={inputValue}
// onChange={handleInputChange}
}), /*#__PURE__*/jsx(InputRightElement, {
children: /*#__PURE__*/jsx(Button, {
h: "100%",
size: "sm",
type: "submit",
colorScheme: "transparent",
w: 20,
_hover: {
cursor: "pointer",
opacity: 0.8
},
children: resload == false ? /*#__PURE__*/jsx(Image, {
src: sendImg,
alt: "Send it here"
}) : /*#__PURE__*/jsx(Spinner, {
color: "black",
size: "sm"
})
})
})]
})
})]
}) : /*#__PURE__*/jsx(Flex, {
flex: "1"
}), display && /*#__PURE__*/jsxs(Flex, {
gap: 3,
alignItems: "center",
justifyContent: position == "right" ? "right" : "left",
children: [_toConsumableArray(label)[0] && txt != "" && position == "right" && /*#__PURE__*/jsx(Flex, {
backgroundColor: "white",
paddingLeft: 3,
paddingRight: 3,
boxShadow: "0 0 5px 2px #bcbcbc",
borderRadius: 5,
as: Button,
colorScheme: "transparent",
color: "black",
fontWeight: 400,
_hover: {
opacity: 0.95
},
onClick: function onClick() {
return setShow(!show);
}
// zIndex={2000}
// _hover={{
// opacity: 0.8,
// boxShadow: "0 0 3px 1px #bcbcbc",
// }}
,
children: /*#__PURE__*/jsx(Text, {
children: txt
})
}), /*#__PURE__*/jsx(Button, {
colorScheme: "transparent"
// _hover={{
// opacity: 0.8,
// boxShadow: "none",
// }}
,
borderRadius: "50%",
padding: 4,
width: 65,
height: 65
// Uncomment later line below
// boxShadow={"0 0 5px 2px #bcbcbc"}
// zIndex={2000}
,
backgroundColor: color == "blue" ? "#3D96EE" : color == "green" ? "#37D35D" : color == "red" ? "#F44B4B" : color == "orange" ? "#E37500" : color == "purple" ? "#913AD6" : color == "yellow" ? "#C1C545" : "#3D96EE",
_hover: {
opacity: 0.95
},
onClick: function onClick() {
setAnimationTrigger(false);
// Trigger the animation
setTimeout(function () {
return setAnimationTrigger(true);
}, 10);
setShow(!show);
},
sx: {
animation: animationTrigger ? "bounce 0.3s ease" : "none",
"@keyframes bounce": {
"0%": {
transform: "scale(1)"
},
"50%": {
transform: "scale(1.1)"
},
"100%": {
transform: "scale(1)"
}
}
},
children: chatImg != "" && /*#__PURE__*/jsx(Image, {
src: !show ? chatImg : xImg,
alt: "Chat icon"
})
}), _toConsumableArray(label)[0] && txt != "" && position == "left" && /*#__PURE__*/jsx(Flex, {
backgroundColor: "white",
paddingLeft: 3,
paddingRight: 3,
boxShadow: "0 0 5px 2px #bcbcbc",
borderRadius: 5,
as: Button
// zIndex={2000}
,
colorScheme: "transparent",
color: "black",
fontWeight: 400
// _hover={{
// opacity: 0.8,
// boxShadow: "0 0 3px 1px #bcbcbc",
// }}
,
children: /*#__PURE__*/jsx(Text, {
children: txt
})
})]
})]
})
});
}
};
var returnLibrary = function returnLibrary() {
return {
ServiBot: ServiBot
};
};
var index = returnLibrary();
export { index as default };