synapse-react-client
Version:
[](https://badge.fury.io/js/synapse-react-client) [](https://github.com/prettier/prettie
179 lines (178 loc) • 6.44 kB
JavaScript
import { jsxs as s, Fragment as A, jsx as t } from "react/jsx-runtime";
import { SynapseSpinner as L } from "../LoadingScreen/LoadingScreen.js";
import j from "./extractMessageFromTraceEvent.js";
import { SmartToyTwoTone as B, KeyboardArrowDown as P, KeyboardArrowRight as q } from "@mui/icons-material";
import { useTheme as F, ListItem as T, ListItemText as z, Box as d, Button as E, Collapse as D, Stack as G, Tooltip as K, Chip as O, Alert as $ } from "@mui/material";
import { useRef as H, useState as _, useEffect as J, useMemo as x } from "react";
import { Markdown as k } from "../Markdown/MarkdownSynapse.js";
function N(n) {
return "reasoningText" in n ? n.reasoningText : "";
}
function ee({
userMessage: n,
chatResponseText: i,
chatErrorReason: c,
chatResponseTrace: m,
scrollIntoView: u = !1,
onSendChat: f
}) {
const h = F(), a = H(null), [p, C] = _(!1);
J(() => {
u && a.current && a.current.scrollIntoView({ behavior: "smooth" });
}, [a, u]);
const g = !i && !c, l = x(
() => (m ?? []).flatMap((e) => j(e))?.filter((e) => !!e),
[m]
), v = l.length > 0, y = x(
() => l.filter((e) => "reasoningText" in e).at(-1),
[l]
), M = y == null ? "Thinking..." : y.reasoningText, I = g ? M : `${p ? "Hide" : "Show"} Trace`, { textContent: w, guidePrompts: b } = x(() => {
try {
const o = new DOMParser().parseFromString(i ?? "", "text/html");
o.querySelectorAll("tool_name, actions").forEach((r) => r.remove());
const W = Array.from(
o.querySelectorAll("guideprompt")
).map((r) => r.textContent?.trim()).filter((r) => !!r);
o.querySelectorAll("guideprompt").forEach((r) => r.remove());
const S = o.querySelector("chat");
return {
textContent: S ? S.textContent ?? "" : o.body.textContent ?? "",
guidePrompts: W
};
} catch (e) {
return console.error(e), { textContent: i ?? "", guidePrompts: [] };
}
}, [i]);
return /* @__PURE__ */ s(A, { children: [
/* @__PURE__ */ t(
T,
{
ref: a,
sx: {
alignSelf: "flex-end",
backgroundColor: h.palette.secondary[100],
borderRadius: "24px",
maxWidth: "70%",
display: "block",
mb: "5px",
p: "8px 12px",
wordWrap: "break-word",
width: "auto"
},
children: /* @__PURE__ */ t(z, { primary: n })
}
),
/* @__PURE__ */ s(
T,
{
sx: {
display: "grid",
gridTemplateColumns: "50px auto",
columnGap: "0px",
justifyItems: "center",
alignItems: "start",
p: "0px"
},
children: [
/* @__PURE__ */ t(
d,
{
sx: {
p: "3px",
mt: "10px",
height: "31px",
borderRadius: "50%",
borderStyle: "solid",
borderWidth: "1px",
borderColor: "grey.300"
},
children: /* @__PURE__ */ t(B, { sx: { color: "secondary.main" } })
}
),
/* @__PURE__ */ s(
d,
{
sx: {
borderRadius: "10px",
padding: "10px",
maxWidth: "100%",
overflow: "auto"
},
children: [
/* @__PURE__ */ s(
d,
{
component: "aside",
sx: {
".markdown": {
fontStyle: "italic",
borderLeft: `4px solid ${h.palette.grey[300]}`,
marginLeft: "4px",
paddingLeft: "8px",
mt: 1,
mb: 2
}
},
children: [
/* @__PURE__ */ t(
E,
{
variant: "outlined",
size: "small",
startIcon: g ? /* @__PURE__ */ t(L, { size: 14 }) : p ? /* @__PURE__ */ t(P, { sx: { width: "14px" } }) : /* @__PURE__ */ t(q, { sx: { width: "14px" } }),
disabled: !v,
onClick: () => {
C((e) => !e);
},
sx: {
height: "20px",
fontSize: "12px",
fontWeight: 600,
mb: 1,
border: "none !important",
color: "grey.700",
justifyContent: "flex-start",
whiteSpace: "nowrap",
maxWidth: "325px",
textTransform: "none",
pl: 0,
".MuiButton-startIcon": { mr: 0.5 }
},
children: /* @__PURE__ */ t(d, { sx: { overflow: "hidden", textOverflow: "ellipsis" }, children: I })
}
),
m && /* @__PURE__ */ t(D, { in: p, children: /* @__PURE__ */ t(
k,
{
markdown: l.map(N).filter((e) => e.trim().length > 0).join("<br/><br/>")
}
) })
]
}
),
w && /* @__PURE__ */ t(k, { markdown: w }),
f && b.length > 0 && /* @__PURE__ */ t(G, { direction: "row", flexWrap: "wrap", gap: 1, mt: 1, children: b.map((e) => /* @__PURE__ */ t(K, { title: e, children: /* @__PURE__ */ t(
O,
{
label: e,
variant: "outlined",
color: "primary",
clickable: !0,
onClick: () => f(e),
sx: { maxWidth: 200 }
}
) }, e)) })
]
}
)
]
}
),
c && /* @__PURE__ */ t($, { severity: "error", sx: { my: 2 }, children: c })
] });
}
export {
ee as SynapseChatInteraction,
ee as default
};
//# sourceMappingURL=SynapseChatInteraction.js.map