docsgpt-bot
Version:
DocsGPT 🦖 is an innovative open-source tool designed to simplify the retrieval of information from project documentation using advanced GPT models 🤖.
643 lines (618 loc) • 29 kB
JavaScript
var $TgtmL$reactjsxruntime = require("react/jsx-runtime");
var $TgtmL$react = require("react");
var $TgtmL$reactdomclient = require("react-dom/client");
var $TgtmL$dompurify = require("dompurify");
var $TgtmL$bpmniosnarkdown = require("@bpmn-io/snarkdown");
var $TgtmL$styledcomponents = require("styled-components");
var $TgtmL$radixuireacticons = require("@radix-ui/react-icons");
function $parcel$export(e, n, v, s) {
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
}
function $parcel$interopDefault(a) {
return a && a.__esModule ? a.default : a;
}
$parcel$export(module.exports, "DocsGPTWidget", () => $8ee635e4d71ce936$export$8d70f1ccc5dab46b);
const $9a81a1f3a41aaeed$var$SvgMessage = (props)=>/*#__PURE__*/ (0, $TgtmL$reactjsxruntime.jsx)("svg", {
width: 36,
height: 36,
viewBox: "0 0 18 18",
fill: "none",
xmlns: "http://www.w3.org/2000/svg",
...props,
children: /*#__PURE__*/ (0, $TgtmL$reactjsxruntime.jsx)("path", {
d: "M4.379 9.448h3.38M11.138 9.448h1.69M4.379 6.07h1.69M9.448 6.07h3.38M16.207 11.138a1.69 1.69 0 0 1-1.69 1.69H4.38L1 16.207V2.69A1.69 1.69 0 0 1 2.69 1h11.827a1.69 1.69 0 0 1 1.69 1.69v8.448Z",
stroke: "#fff",
strokeWidth: 1.69,
strokeLinecap: "round",
strokeLinejoin: "round"
})
});
var $9a81a1f3a41aaeed$export$2e2bcd8739ae039 = $9a81a1f3a41aaeed$var$SvgMessage;
function $0c453cc4b0e761b5$export$8d129e5b7331a32b({ question: question = "", apiKey: apiKey = "", selectedDocs: selectedDocs = "", history: history = [], conversationId: conversationId = null, apiHost: apiHost = "", onEvent: onEvent = ()=>{
console.log("Event triggered, but no handler provided.");
} }) {
let docPath = "default";
if (selectedDocs) docPath = selectedDocs;
return new Promise((resolve, reject)=>{
const body = {
question: question,
api_key: apiKey,
embeddings_key: apiKey,
active_docs: docPath,
history: JSON.stringify(history),
conversation_id: conversationId,
model: "default"
};
fetch(apiHost + "/stream", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(body)
}).then((response)=>{
if (!response.body) throw Error("No response body");
const reader = response.body.getReader();
const decoder = new TextDecoder("utf-8");
let counterrr = 0;
const processStream = ({ done: done, value: value })=>{
if (done) {
resolve();
return;
}
counterrr += 1;
const chunk = decoder.decode(value);
const lines = chunk.split("\n");
for (let line of lines){
if (line.trim() == "") continue;
if (line.startsWith("data:")) line = line.substring(5);
const messageEvent = new MessageEvent("message", {
data: line
});
onEvent(messageEvent); // handle each message
}
reader.read().then(processStream).catch(reject);
};
reader.read().then(processStream).catch(reject);
}).catch((error)=>{
console.error("Connection failed:", error);
reject(error);
});
});
}
"use client";
const $8ee635e4d71ce936$var$GlobalStyles = (0, $TgtmL$styledcomponents.createGlobalStyle)`
.response pre {
padding: 8px;
width: 90%;
font-size: 12px;
border-radius: 6px;
overflow-x: auto;
background-color: #1B1C1F;
}
.response h1{
font-size: 20px;
}
.response h2{
font-size: 18px;
}
.response h3{
font-size: 16px;
}
.response code:not(pre code){
border-radius: 6px;
padding: 1px 3px 1px 3px;
font-size: 12px;
display: inline-block;
background-color: #646464;
}
`;
const $8ee635e4d71ce936$var$WidgetContainer = (0, ($parcel$interopDefault($TgtmL$styledcomponents))).div`
display: block;
position: fixed;
right: 10px;
bottom: 10px;
z-index: 1000;
display: flex;
flex-direction: column;
align-items: center;
text-align: left;
`;
const $8ee635e4d71ce936$var$StyledContainer = (0, ($parcel$interopDefault($TgtmL$styledcomponents))).div`
display: flex;
position: relative;
flex-direction: column;
justify-content: center;
bottom: 0;
left: 0;
border-radius: 0.75rem;
background-color: #222327;
font-family: sans-serif;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.1);
transition: visibility 0.3s, opacity 0.3s;
`;
const $8ee635e4d71ce936$var$FloatingButton = (0, ($parcel$interopDefault($TgtmL$styledcomponents))).div`
position: fixed;
display: flex;
z-index: 500;
justify-content: center;
align-items: center;
bottom: 1rem;
right: 1rem;
width: 5rem;
height: 5rem;
border-radius: 9999px;
background-image: linear-gradient(to bottom right, #5AF0EC, #E80D9D);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
cursor: pointer;
&:hover {
transform: scale(1.1);
transition: transform 0.2s ease-in-out;
}
`;
const $8ee635e4d71ce936$var$CancelButton = (0, ($parcel$interopDefault($TgtmL$styledcomponents))).button`
cursor: pointer;
position: absolute;
top: 0;
right: 0;
margin: 0.5rem;
width: 30px;
padding: 0;
background-color: transparent;
border: none;
outline: none;
color: inherit;
transition: opacity 0.3s ease;
opacity: 0.6;
&:hover {
opacity: 1;
}
.white-filter {
filter: invert(100%);
}
`;
const $8ee635e4d71ce936$var$Header = (0, ($parcel$interopDefault($TgtmL$styledcomponents))).div`
display: flex;
align-items: center;
padding-inline: 0.75rem;
padding-top: 1rem;
padding-bottom: 0.5rem;
`;
const $8ee635e4d71ce936$var$IconWrapper = (0, ($parcel$interopDefault($TgtmL$styledcomponents))).div`
padding: 0.5rem;
`;
const $8ee635e4d71ce936$var$ContentWrapper = (0, ($parcel$interopDefault($TgtmL$styledcomponents))).div`
flex: 1;
margin-left: 0.5rem;
`;
const $8ee635e4d71ce936$var$Title = (0, ($parcel$interopDefault($TgtmL$styledcomponents))).h3`
font-size: 1rem;
font-weight: normal;
color: #FAFAFA;
margin-top: 0;
margin-bottom: 0.25rem;
`;
const $8ee635e4d71ce936$var$Description = (0, ($parcel$interopDefault($TgtmL$styledcomponents))).p`
font-size: 0.85rem;
color: #A1A1AA;
margin-top: 0;
`;
const $8ee635e4d71ce936$var$Conversation = (0, ($parcel$interopDefault($TgtmL$styledcomponents))).div`
min-height: 300px;
height: ${(props)=>props.size === "medium" ? "70vh" : "320px"};
width: ${(props)=>props.size === "medium" ? "28vw" : "400px"};
padding-inline: 0.5rem;
border-radius: 0.375rem;
text-align: left;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: #4a4a4a transparent; /* thumb color track color */
only screen and (max-width: 768px) {
width: 90vw !important;
}
only screen and (min-width:768px ) and (max-width: 1024px) {
width:${(props)=>props.size === "medium" ? "60vw" : "400px"} !important;
}
`;
const $8ee635e4d71ce936$var$MessageBubble = (0, ($parcel$interopDefault($TgtmL$styledcomponents))).div`
display: flex;
font-size: 16px;
justify-content: ${(props)=>props.type === "QUESTION" ? "flex-end" : "flex-start"};
margin: 0.5rem;
`;
const $8ee635e4d71ce936$var$Message = (0, ($parcel$interopDefault($TgtmL$styledcomponents))).p`
background: ${(props)=>props.type === "QUESTION" ? "linear-gradient(to bottom right, #8860DB, #6D42C5)" : "#38383b"};
color: #ffff;
border: none;
max-width: ${(props)=>props.type === "ANSWER" ? "100%" : "80"};
overflow: auto;
margin: 4px;
display: block;
line-height: 1.5;
padding: 0.75rem;
border-radius: 0.375rem;
`;
const $8ee635e4d71ce936$var$ErrorAlert = (0, ($parcel$interopDefault($TgtmL$styledcomponents))).div`
color: #b91c1c;
border:0.1px solid #b91c1c;
display: flex;
padding:4px;
margin:0.7rem;
opacity: 90%;
max-width: 70%;
font-weight: 400;
border-radius: 0.375rem;
justify-content: space-evenly;
`;
//dot loading animation
const $8ee635e4d71ce936$var$dotBounce = (0, $TgtmL$styledcomponents.keyframes)`
0%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-5px);
}
`;
const $8ee635e4d71ce936$var$DotAnimation = (0, ($parcel$interopDefault($TgtmL$styledcomponents))).div`
display: inline-block;
animation: ${$8ee635e4d71ce936$var$dotBounce} 1s infinite ease-in-out;
`;
// delay classes as styled components
const $8ee635e4d71ce936$var$Delay = (0, ($parcel$interopDefault($TgtmL$styledcomponents)))($8ee635e4d71ce936$var$DotAnimation)`
animation-delay: ${(props)=>props.delay + "ms"};
`;
const $8ee635e4d71ce936$var$PromptContainer = (0, ($parcel$interopDefault($TgtmL$styledcomponents))).form`
background-color: transparent;
height: 40px;
margin: 16px;
display: flex;
justify-content: space-evenly;
`;
const $8ee635e4d71ce936$var$StyledInput = (0, ($parcel$interopDefault($TgtmL$styledcomponents))).input`
width: 100%;
height: 36px;
border: 1px solid #686877;
padding-left: 12px;
background-color: transparent;
font-size: 16px;
border-radius: 6px;
color: #ffff;
outline: none;
`;
const $8ee635e4d71ce936$var$StyledButton = (0, ($parcel$interopDefault($TgtmL$styledcomponents))).button`
display: flex;
justify-content: center;
align-items: center;
background-image: linear-gradient(to bottom right, #5AF0EC, #E80D9D);
border-radius: 6px;
width: 36px;
height: 36px;
margin-left:8px;
padding: 0px;
border: none;
cursor: pointer;
outline: none;
&:hover{
opacity: 90%;
}
&:disabled {
opacity: 60%;
}`;
const $8ee635e4d71ce936$var$HeroContainer = (0, ($parcel$interopDefault($TgtmL$styledcomponents))).div`
position: absolute;
top: 50%;
left: 50%;
display: flex;
justify-content: center;
align-items: middle;
transform: translate(-50%, -50%);
width: 80%;
background-image: linear-gradient(to bottom right, #5AF0EC, #ff1bf4);
border-radius: 10px;
margin: 0 auto;
padding: 2px;
`;
const $8ee635e4d71ce936$var$HeroWrapper = (0, ($parcel$interopDefault($TgtmL$styledcomponents))).div`
background-color: #222327;
border-radius: 10px;
font-weight: normal;
padding: 6px;
display: flex;
justify-content: space-between;
`;
const $8ee635e4d71ce936$var$HeroTitle = (0, ($parcel$interopDefault($TgtmL$styledcomponents))).h3`
color: #fff;
font-size: 17px;
margin-bottom: 5px;
padding: 2px;
`;
const $8ee635e4d71ce936$var$HeroDescription = (0, ($parcel$interopDefault($TgtmL$styledcomponents))).p`
color: #fff;
font-size: 14px;
line-height: 1.5;
`;
const $8ee635e4d71ce936$var$Hero = ({ title: title, description: description })=>{
return /*#__PURE__*/ (0, $TgtmL$reactjsxruntime.jsx)((0, $TgtmL$reactjsxruntime.Fragment), {
children: /*#__PURE__*/ (0, $TgtmL$reactjsxruntime.jsx)($8ee635e4d71ce936$var$HeroContainer, {
children: /*#__PURE__*/ (0, $TgtmL$reactjsxruntime.jsxs)($8ee635e4d71ce936$var$HeroWrapper, {
children: [
/*#__PURE__*/ (0, $TgtmL$reactjsxruntime.jsx)($8ee635e4d71ce936$var$IconWrapper, {
style: {
marginTop: "8px"
},
children: /*#__PURE__*/ (0, $TgtmL$reactjsxruntime.jsx)((0, $TgtmL$radixuireacticons.RocketIcon), {
color: "white",
width: 20,
height: 20
})
}),
/*#__PURE__*/ (0, $TgtmL$reactjsxruntime.jsxs)("div", {
children: [
/*#__PURE__*/ (0, $TgtmL$reactjsxruntime.jsx)($8ee635e4d71ce936$var$HeroTitle, {
children: title
}),
/*#__PURE__*/ (0, $TgtmL$reactjsxruntime.jsx)($8ee635e4d71ce936$var$HeroDescription, {
children: description
})
]
})
]
})
})
});
};
const $8ee635e4d71ce936$export$8d70f1ccc5dab46b = ({ apiHost: apiHost = "https://gptcloud.arc53.com", selectDocs: selectDocs = "default", apiKey: apiKey = "82962c9a-aa77-4152-94e5-a4f84fd44c6a", avatar: avatar = "https://d3dg1063dc54p9.cloudfront.net/cute-docsgpt.png", title: title = "Get AI assistance", description: description = "DocsGPT's AI Chatbot is here to help", heroTitle: heroTitle = "Welcome to DocsGPT !", heroDescription: heroDescription = "This chatbot is built with DocsGPT and utilises GenAI, please review important information using sources.", size: size = "small" })=>{
const [prompt, setPrompt] = (0, ($parcel$interopDefault($TgtmL$react))).useState("");
const [status, setStatus] = (0, ($parcel$interopDefault($TgtmL$react))).useState("idle");
const [queries, setQueries] = (0, ($parcel$interopDefault($TgtmL$react))).useState([]);
const [conversationId, setConversationId] = (0, ($parcel$interopDefault($TgtmL$react))).useState(null);
const [open, setOpen] = (0, ($parcel$interopDefault($TgtmL$react))).useState(false);
const [eventInterrupt, setEventInterrupt] = (0, ($parcel$interopDefault($TgtmL$react))).useState(false); //click or scroll by user while autoScrolling
const endMessageRef = (0, ($parcel$interopDefault($TgtmL$react))).useRef(null);
const handleUserInterrupt = ()=>{
status === "loading" && setEventInterrupt(true);
};
const scrollToBottom = (element)=>{
//recursive function to scroll to the last child of the last child ...
// to get to the bottom most element
if (!element) return;
if (element?.children.length === 0) element?.scrollIntoView({
behavior: "smooth",
block: "start"
});
const lastChild = element?.children?.[element.children.length - 1];
lastChild && scrollToBottom(lastChild);
};
(0, ($parcel$interopDefault($TgtmL$react))).useEffect(()=>{
!eventInterrupt && scrollToBottom(endMessageRef.current);
}, [
queries.length,
queries[queries.length - 1]?.response
]);
async function stream(question) {
setStatus("loading");
try {
await (0, $0c453cc4b0e761b5$export$8d129e5b7331a32b)({
question: question,
apiKey: apiKey,
apiHost: apiHost,
selectedDocs: selectDocs,
history: queries,
conversationId: conversationId,
onEvent: (event)=>{
const data = JSON.parse(event.data);
// check if the 'end' event has been received
if (data.type === "end") // set status to 'idle'
setStatus("idle");
else if (data.type === "id") setConversationId(data.id);
else {
const result = data.answer;
const streamingResponse = queries[queries.length - 1].response ? queries[queries.length - 1].response : "";
const updatedQueries = [
...queries
];
updatedQueries[updatedQueries.length - 1].response = streamingResponse + result;
setQueries(updatedQueries);
}
}
});
} catch (error) {
const updatedQueries = [
...queries
];
updatedQueries[updatedQueries.length - 1].error = "error";
setQueries(updatedQueries);
setStatus("idle");
//setEventInterrupt(false)
}
}
// submit handler
const handleSubmit = async (e)=>{
e.preventDefault();
setEventInterrupt(false);
queries.push({
prompt: prompt
});
setPrompt("");
await stream(prompt);
};
const handleImageError = (event)=>{
event.currentTarget.src = "https://d3dg1063dc54p9.cloudfront.net/cute-docsgpt.png";
};
return /*#__PURE__*/ (0, $TgtmL$reactjsxruntime.jsx)((0, $TgtmL$reactjsxruntime.Fragment), {
children: /*#__PURE__*/ (0, $TgtmL$reactjsxruntime.jsxs)($8ee635e4d71ce936$var$WidgetContainer, {
children: [
/*#__PURE__*/ (0, $TgtmL$reactjsxruntime.jsx)($8ee635e4d71ce936$var$GlobalStyles, {}),
!open && /*#__PURE__*/ (0, $TgtmL$reactjsxruntime.jsx)($8ee635e4d71ce936$var$FloatingButton, {
onClick: ()=>setOpen(true),
hidden: open,
children: /*#__PURE__*/ (0, $TgtmL$reactjsxruntime.jsx)((0, $9a81a1f3a41aaeed$export$2e2bcd8739ae039), {
style: {
marginTop: "8px"
}
})
}),
open && /*#__PURE__*/ (0, $TgtmL$reactjsxruntime.jsxs)($8ee635e4d71ce936$var$StyledContainer, {
children: [
/*#__PURE__*/ (0, $TgtmL$reactjsxruntime.jsxs)("div", {
children: [
/*#__PURE__*/ (0, $TgtmL$reactjsxruntime.jsx)($8ee635e4d71ce936$var$CancelButton, {
onClick: ()=>setOpen(false),
children: /*#__PURE__*/ (0, $TgtmL$reactjsxruntime.jsx)((0, $TgtmL$radixuireacticons.Cross2Icon), {
width: 24,
height: 24,
color: "white"
})
}),
/*#__PURE__*/ (0, $TgtmL$reactjsxruntime.jsxs)($8ee635e4d71ce936$var$Header, {
children: [
/*#__PURE__*/ (0, $TgtmL$reactjsxruntime.jsx)($8ee635e4d71ce936$var$IconWrapper, {
children: /*#__PURE__*/ (0, $TgtmL$reactjsxruntime.jsx)("img", {
style: {
maxWidth: "42px",
maxHeight: "42px"
},
onError: handleImageError,
src: avatar,
alt: "docs-gpt"
})
}),
/*#__PURE__*/ (0, $TgtmL$reactjsxruntime.jsxs)($8ee635e4d71ce936$var$ContentWrapper, {
children: [
/*#__PURE__*/ (0, $TgtmL$reactjsxruntime.jsx)($8ee635e4d71ce936$var$Title, {
children: title
}),
/*#__PURE__*/ (0, $TgtmL$reactjsxruntime.jsx)($8ee635e4d71ce936$var$Description, {
children: description
})
]
})
]
})
]
}),
/*#__PURE__*/ (0, $TgtmL$reactjsxruntime.jsx)($8ee635e4d71ce936$var$Conversation, {
size: size,
onWheel: handleUserInterrupt,
onTouchMove: handleUserInterrupt,
children: queries.length > 0 ? queries?.map((query, index)=>{
return /*#__PURE__*/ (0, $TgtmL$reactjsxruntime.jsxs)((0, ($parcel$interopDefault($TgtmL$react))).Fragment, {
children: [
query.prompt && /*#__PURE__*/ (0, $TgtmL$reactjsxruntime.jsx)($8ee635e4d71ce936$var$MessageBubble, {
type: "QUESTION",
children: /*#__PURE__*/ (0, $TgtmL$reactjsxruntime.jsx)($8ee635e4d71ce936$var$Message, {
type: "QUESTION",
ref: !(query.response || query.error) && index === queries.length - 1 ? endMessageRef : null,
children: query.prompt
})
}),
query.response ? /*#__PURE__*/ (0, $TgtmL$reactjsxruntime.jsx)($8ee635e4d71ce936$var$MessageBubble, {
type: "ANSWER",
children: /*#__PURE__*/ (0, $TgtmL$reactjsxruntime.jsx)($8ee635e4d71ce936$var$Message, {
type: "ANSWER",
ref: index === queries.length - 1 ? endMessageRef : null,
children: /*#__PURE__*/ (0, $TgtmL$reactjsxruntime.jsx)("div", {
className: "response",
dangerouslySetInnerHTML: {
__html: (0, ($parcel$interopDefault($TgtmL$dompurify))).sanitize((0, ($parcel$interopDefault($TgtmL$bpmniosnarkdown)))(query.response))
}
})
})
}) : /*#__PURE__*/ (0, $TgtmL$reactjsxruntime.jsx)("div", {
children: query.error ? /*#__PURE__*/ (0, $TgtmL$reactjsxruntime.jsxs)($8ee635e4d71ce936$var$ErrorAlert, {
children: [
/*#__PURE__*/ (0, $TgtmL$reactjsxruntime.jsx)($8ee635e4d71ce936$var$IconWrapper, {
children: /*#__PURE__*/ (0, $TgtmL$reactjsxruntime.jsx)((0, $TgtmL$radixuireacticons.ExclamationTriangleIcon), {
style: {
marginTop: "4px"
},
width: 22,
height: 22,
color: "#b91c1c"
})
}),
/*#__PURE__*/ (0, $TgtmL$reactjsxruntime.jsxs)("div", {
children: [
/*#__PURE__*/ (0, $TgtmL$reactjsxruntime.jsx)("h5", {
style: {
margin: 2
},
children: "Network Error"
}),
/*#__PURE__*/ (0, $TgtmL$reactjsxruntime.jsx)("span", {
style: {
margin: 2,
fontSize: "13px"
},
children: "Something went wrong !"
})
]
})
]
}) : /*#__PURE__*/ (0, $TgtmL$reactjsxruntime.jsx)($8ee635e4d71ce936$var$MessageBubble, {
type: "ANSWER",
children: /*#__PURE__*/ (0, $TgtmL$reactjsxruntime.jsxs)($8ee635e4d71ce936$var$Message, {
type: "ANSWER",
style: {
fontWeight: 600
},
children: [
/*#__PURE__*/ (0, $TgtmL$reactjsxruntime.jsx)($8ee635e4d71ce936$var$DotAnimation, {
children: "."
}),
/*#__PURE__*/ (0, $TgtmL$reactjsxruntime.jsx)($8ee635e4d71ce936$var$Delay, {
delay: 200,
children: "."
}),
/*#__PURE__*/ (0, $TgtmL$reactjsxruntime.jsx)($8ee635e4d71ce936$var$Delay, {
delay: 400,
children: "."
})
]
})
})
})
]
}, index);
}) : /*#__PURE__*/ (0, $TgtmL$reactjsxruntime.jsx)($8ee635e4d71ce936$var$Hero, {
title: heroTitle,
description: heroDescription
})
}),
/*#__PURE__*/ (0, $TgtmL$reactjsxruntime.jsxs)($8ee635e4d71ce936$var$PromptContainer, {
onSubmit: handleSubmit,
children: [
/*#__PURE__*/ (0, $TgtmL$reactjsxruntime.jsx)($8ee635e4d71ce936$var$StyledInput, {
value: prompt,
onChange: (event)=>setPrompt(event.target.value),
type: "text",
placeholder: "What do you want to do?"
}),
/*#__PURE__*/ (0, $TgtmL$reactjsxruntime.jsx)($8ee635e4d71ce936$var$StyledButton, {
disabled: prompt.length == 0 || status !== "idle",
children: /*#__PURE__*/ (0, $TgtmL$reactjsxruntime.jsx)((0, $TgtmL$radixuireacticons.PaperPlaneIcon), {
width: 15,
height: 15,
color: "white"
})
})
]
})
]
})
]
})
});
};
"use client";
if (typeof window !== "undefined") {
const renderWidget = (elementId, props = {})=>{
if (document.getElementById(elementId)) {
const root = (0, $TgtmL$reactdomclient.createRoot)(document.getElementById(elementId));
root.render(/*#__PURE__*/ (0, $TgtmL$reactjsxruntime.jsx)((0, $8ee635e4d71ce936$export$8d70f1ccc5dab46b), {
...props
}));
}
};
window.renderDocsGPTWidget = renderWidget;
}
//# sourceMappingURL=main.js.map