synapse-react-client
Version:
[](https://badge.fury.io/js/synapse-react-client) [](https://github.com/prettier/prettie
236 lines (235 loc) • 7.71 kB
JavaScript
import { jsx as t, jsxs as i } from "react/jsx-runtime";
import { useChatState as $ } from "./useChatState.js";
import { useCreateAgentSession as z, useUpdateAgentSession as F } from "../../synapse-queries/chat/useChat.js";
import "../../utils/PermissionLevelToAccessType.js";
import "../../utils/SynapseConstants.js";
import { useState as a, useEffect as b } from "react";
import "../../synapse-client/SynapseClient.js";
import "@sage-bionetworks/synapse-client/generated/models/ErrorResponseCode";
import "@sage-bionetworks/synapse-client/generated/models/TwoFactorAuthErrorResponse";
import "@sage-bionetworks/synapse-client/util/SynapseClientError";
import { AgentAccessLevel as T } from "@sage-bionetworks/synapse-types";
import "../../utils/functions/EntityTypeUtils.js";
import "lodash-es";
import "@sage-bionetworks/synapse-client/util/synapseClientFetch";
import { useSynapseContext as G } from "../../utils/context/SynapseContext.js";
import "use-deep-compare-effect";
import "@tanstack/react-query";
import "@tanstack/query-core";
import "lodash-es/isEmpty";
import "lodash-es/isEqual";
import "lodash-es/xorWith";
import { useTheme as O, Alert as q, Box as p, Typography as k, List as H, TextField as Q, IconButton as X } from "@mui/material";
import "@sage-bionetworks/synapse-client";
import "../../utils/types/IsType.js";
import "../../utils/hooks/useCookiePreferences.js";
import "../../utils/hooks/useSourceAppConfigs.js";
import "universal-cookie";
import "../../utils/AppUtils/session/ApplicationSessionContext.js";
import "../../utils/context/FullContextProvider.js";
import "../../utils/context/DocumentMetadataContext.js";
import '../../style/components/_spinner.css';/* empty css */
import "react-router";
import { ArrowUpward as Z } from "@mui/icons-material";
import "@mui/material/Skeleton";
import { SkeletonParagraph as N } from "../Skeleton/SkeletonParagraph.js";
import { displayToast as ee } from "../ToastMessage/ToastMessage.js";
import { AccessLevelMenu as te } from "./AccessLevelMenu.js";
import { SynapseChatInteraction as oe } from "./SynapseChatInteraction.js";
import re from "./SynapseChatMessage.js";
function $e({
initialMessage: m,
agentRegistrationId: f,
chatbotName: l = "SynapseChat",
hideTitle: v = !1,
textboxPositionOffset: w = "0px",
sessionContext: c,
externalSession: I,
setExternalSession: L,
externalChatState: E,
showAccessLevelMenu: D = !0,
onChatResponse: M
}) {
const { accessToken: B } = G(), [P, R] = a(), o = I ?? P, g = L ?? R, { mutate: d, error: S } = z({
onSuccess: (e) => g(e)
}), { mutate: U } = F({
onSuccess: (e) => g(e),
onError: (e) => ee(
`Unable to update the agent session: ${e.message}`,
"danger"
)
}), V = O(), [u, W] = a(
c ? T.WRITE_YOUR_PRIVATE_DATA : T.PUBLICLY_ACCESSIBLE
), Y = $(o, M), _ = E ?? Y, { pendingMessage: x, chatJobIds: K, sendChat: r } = _, [s, y] = a(""), [C, j] = a(!1);
b(() => {
d && !o && d({
agentAccessLevel: u,
agentRegistrationId: f,
sessionContext: c
});
}, [
d,
o,
B,
c,
u,
f
]), b(() => {
o && m && !C && (r(m), j(!0));
}, [o, m, C, r]);
const h = () => {
s.trim() && (r(s.trim()), y(""));
}, n = !o || !s || !!x, J = (e) => {
!n && e.key === "Enter" && !e.shiftKey && (e.preventDefault(), h());
}, A = V.palette.secondary[300];
return S ? /* @__PURE__ */ t(q, { severity: "error", sx: { my: 2 }, children: S.reason }) : /* @__PURE__ */ i(
p,
{
sx: {
display: "flex",
flexDirection: "column",
justifyContent: "space-between",
maxWidth: "1100px",
mx: "auto",
height: "100%"
},
children: [
!v && /* @__PURE__ */ t(
k,
{
variant: "headline1",
sx: {
p: "20px",
borderBottom: "1px solid",
borderColor: "grey.300",
position: "sticky",
top: "0px",
backgroundColor: "white",
zIndex: 1
},
children: l
}
),
D && /* @__PURE__ */ t(
te,
{
initAccessLevel: u,
onChange: (e) => {
W(e), U({
agentAccessLevel: e,
sessionId: o.sessionId
});
}
}
),
!o && /* @__PURE__ */ t(N, { numRows: 10 }),
o && /* @__PURE__ */ t(p, { sx: { flexGrow: 1, overflowY: "auto", mb: 2 }, children: /* @__PURE__ */ i(
H,
{
sx: {
flex: 1,
overflowY: "auto",
pt: "20px",
display: "flex",
flexDirection: "column"
},
children: [
K.map((e) => /* @__PURE__ */ t(
re,
{
chatJobId: e,
onSendChat: r
},
e
)),
x && /* @__PURE__ */ t(
oe,
{
userMessage: x,
chatResponseText: "",
chatErrorReason: "",
scrollIntoView: !0,
onSendChat: r
}
)
]
}
) }),
/* @__PURE__ */ t(
p,
{
sx: {
position: "sticky",
bottom: w,
backgroundColor: "white"
},
children: /* @__PURE__ */ i(
p,
{
component: "form",
sx: {
pt: "8px",
mt: "5px",
pb: "10px",
position: "sticky",
borderTop: "1px solid",
borderColor: "grey.400"
},
onSubmit: h,
children: [
/* @__PURE__ */ t(
Q,
{
fullWidth: !0,
value: s,
onChange: (e) => y(e.target.value),
onKeyDown: J,
placeholder: `Message ${l}`,
slotProps: {
input: {
sx: { borderRadius: 96.6 },
endAdornment: /* @__PURE__ */ t(
X,
{
disabled: n,
onClick: h,
sx: {
ml: "7px",
mr: "-8px",
color: A,
borderStyle: "solid",
borderWidth: n ? "1px" : "2px",
borderColor: n ? "gray" : A
},
children: /* @__PURE__ */ t(Z, {})
}
)
}
}
}
),
/* @__PURE__ */ i(
k,
{
variant: "smallText1",
sx: { pt: "8px", textAlign: "center" },
children: [
l,
" can make mistakes."
]
}
)
]
}
)
}
)
]
}
);
}
export {
$e as SynapseChat,
$e as default
};
//# sourceMappingURL=SynapseChat.js.map