npm - synapse-react-client - Versions diffs - 4.0.45 → 4.0.47 - Mend

synapse-react-client 4.0.45 → 4.0.47

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (842) hide show

package/dist/components/ShareThisPage/ShareThisPage.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ShareThisPage.js","names":[],"sources":["../../../src/components/ShareThisPage/ShareThisPage.tsx"],"sourcesContent":["import {\n Dialog,\n DialogTitle,\n DialogContent,\n IconButton,\n Typography,\n Input,\n Box,\n} from '@mui/material'\nimport GenericCardActionButton from '../GenericCard/GenericCardActionButton'\nimport React from 'react'\nimport { useEffect, useState } from 'react'\nimport CloseIcon from '@mui/icons-material/Close'\nimport CopyToClipboardIcon from '../CopyToClipboardIcon'\nimport {\n LinkedinShareButton,\n LinkedinIcon,\n TwitterShareButton,\n BlueskyShareButton,\n BlueskyIcon,\n XIcon,\n} from 'react-share'\nimport styles from './ShareThisPage.module.scss'\nimport { ShareTwoTone } from '@mui/icons-material'\nimport { useCreateShortUrl } from '../../utils/hooks/useCreateShortUrl'\n\nexport type ShareThisPageProps = {\n shortIoPublicApiKey?: string\n domain?: string\n renderAs?: 'button' \| 'icon'\n open?: boolean\n onClose?: () => void\n}\n\nconst ShareThisPage = ({\n shortIoPublicApiKey,\n domain = 'sageb.io',\n renderAs = 'button',\n open: externalOpen,\n onClose: externalOnClose,\n}: ShareThisPageProps): React.ReactNode => {\n const [url, setUrl] = useState('')\n const [internalOpen, setInternalOpen] = useState(false)\n\n // Use internal state if externalOpen is undefined\n // Otherwise, the open state is controlled externally by externalOpen\n const isControlled = externalOpen === undefined\n const open = isControlled ? internalOpen : externalOpen\n\n const handleOpen = () => {\n if (isControlled) {\n setInternalOpen(true)\n }\n }\n\n const handleClose = () => {\n if (isControlled) {\n setInternalOpen(false)\n }\n if (externalOnClose) {\n externalOnClose()\n }\n }\n\n const { mutate: createShortUrl, isPending } = useCreateShortUrl({\n shortIoPublicApiKey,\n domain,\n onSuccess: data => {\n setUrl(data)\n },\n onError: error => {\n console.error(error)\n setUrl(window.location.href)\n },\n })\n\n useEffect(() => {\n if (open) {\n createShortUrl()\n }\n }, [open, createShortUrl])\n\n return (\n <div>\n {renderAs === 'button' && (\n <GenericCardActionButton\n variant=\"outlined\"\n startIcon={<ShareTwoTone className={styles.shareIcon} />}\n onClick={handleOpen}\n >\n Share\n </GenericCardActionButton>\n )}\n\n <Dialog\n open={open}\n onClose={handleClose}\n maxWidth=\"xs\"\n className={styles.dialogPaper}\n >\n <DialogTitle className={styles.dialogTitle}>\n Share this page\n <IconButton onClick={handleClose} size=\"small\">\n <CloseIcon className={styles.closeIcon} />\n </IconButton>\n </DialogTitle>\n\n <DialogContent className={styles.dialogContent}>\n <Box className={styles.contentStack}>\n <div className={styles.shareButtonsContainer}>\n <LinkedinShareButton url={url} aria-label=\"Share on LinkedIn\">\n <div className={styles.shareItem}>\n <LinkedinIcon size={48} round />\n <Typography variant=\"body1\" className={styles.shareItemLabel}>\n LinkedIn\n </Typography>\n </div>\n </LinkedinShareButton>\n\n <TwitterShareButton url={url} aria-label=\"Share on X\">\n <div className={styles.shareItem}>\n <XIcon size={48} round />\n <Typography variant=\"body1\" className={styles.shareItemLabel}>\n X\n </Typography>\n </div>\n </TwitterShareButton>\n\n <BlueskyShareButton url={url} aria-label=\"Share on Bluesky\">\n <div className={styles.shareItem}>\n <BlueskyIcon size={48} round />\n <Typography variant=\"body1\" className={styles.shareItemLabel}>\n Bluesky\n </Typography>\n </div>\n </BlueskyShareButton>\n </div>\n\n <div className={styles.copySection}>\n <Typography className={styles.copyLabel}>Page Link</Typography>\n <div className={styles.copyRow}>\n <Input\n className={styles.urlInput}\n value={url}\n readOnly\n aria-label=\"Page URL\"\n placeholder={isPending ? 'Generating link...' : ''}\n />\n <CopyToClipboardIcon\n value={url}\n sizePx={24}\n className={styles.copyButton}\n />\n </div>\n </div>\n </Box>\n </DialogContent>\n </Dialog>\n </div>\n )\n}\n\nexport default ShareThisPage\n"],"mappings":";;;;;;;;;;;AAkCA,IAAM,KAAiB,EACrB,wBACA,YAAS,YACT,cAAW,UACX,MAAM,GACN,SAAS,QACgC;CACzC,IAAM,CAAC,GAAK,KAAU,EAAS,EAAE,GAC3B,CAAC,GAAc,KAAmB,EAAS,EAAK,GAIhD,IAAe,MAAiB,KAAA,GAChC,IAAO,IAAe,IAAe,GAErC,UAAmB;EACvB,AAAI,KACF,EAAgB,EAAI;CAExB,GAEM,UAAoB;EAIxB,AAHI,KACF,EAAgB,EAAK,GAEnB,KACF,EAAgB;CAEpB,GAEM,EAAE,QAAQ,GAAgB,iBAAc,EAAkB;EAC9D;EACA;EACA,YAAW,MAAQ;GACjB,EAAO,CAAI;EACb;EACA,UAAS,MAAS;GAEhB,AADA,QAAQ,MAAM,CAAK,GACnB,EAAO,OAAO,SAAS,IAAI;EAC7B;CACF,CAAC;CAQD,OANA,QAAgB;EACd,AAAI,KACF,EAAe;CAEnB,GAAG,CAAC,GAAM,CAAc,CAAC,GAGvB,kBAAC,OAAD,EAAA,UAAA,CACG,MAAa,YACZ,kBAAC,GAAD;EACE,SAAQ;EACR,WAAW,kBAAC,GAAD,EAAc,WAAW,EAAO,UAAY,CAAA;EACvD,SAAS;YACV;CAEwB,CAAA,GAG3B,kBAAC,GAAD;EACQ;EACN,SAAS;EACT,UAAS;EACT,WAAW,EAAO;YAJpB,CAME,kBAAC,GAAD;GAAa,WAAW,EAAO;aAA/B,CAA4C,mBAE1C,kBAAC,GAAD;IAAY,SAAS;IAAa,MAAK;cACrC,kBAAC,GAAD,EAAW,WAAW,EAAO,UAAY,CAAA;GAC/B,CAAA,CACD;MAEb,kBAAC,GAAD;GAAe,WAAW,EAAO;aAC/B,kBAAC,GAAD;IAAK,WAAW,EAAO;cAAvB,CACE,kBAAC,OAAD;KAAK,WAAW,EAAO;eAAvB;MACE,kBAAC,GAAD;OAA0B;OAAK,cAAW;iBACxC,kBAAC,OAAD;QAAK,WAAW,EAAO;kBAAvB,CACE,kBAAC,GAAD;SAAc,MAAM;SAAI,OAAA;QAAO,CAAA,GAC/B,kBAAC,GAAD;SAAY,SAAQ;SAAQ,WAAW,EAAO;mBAAgB;QAElD,CAAA,CACT;;MACc,CAAA;MAErB,kBAAC,GAAD;OAAyB;OAAK,cAAW;iBACvC,kBAAC,OAAD;QAAK,WAAW,EAAO;kBAAvB,CACE,kBAAC,GAAD;SAAO,MAAM;SAAI,OAAA;QAAO,CAAA,GACxB,kBAAC,GAAD;SAAY,SAAQ;SAAQ,WAAW,EAAO;mBAAgB;QAElD,CAAA,CACT;;MACa,CAAA;MAEpB,kBAAC,GAAD;OAAyB;OAAK,cAAW;iBACvC,kBAAC,OAAD;QAAK,WAAW,EAAO;kBAAvB,CACE,kBAAC,GAAD;SAAa,MAAM;SAAI,OAAA;QAAO,CAAA,GAC9B,kBAAC,GAAD;SAAY,SAAQ;SAAQ,WAAW,EAAO;mBAAgB;QAElD,CAAA,CACT;;MACa,CAAA;KACjB;QAEL,kBAAC,OAAD;KAAK,WAAW,EAAO;eAAvB,CACE,kBAAC,GAAD;MAAY,WAAW,EAAO;gBAAW;KAAqB,CAAA,GAC9D,kBAAC,OAAD;MAAK,WAAW,EAAO;gBAAvB,CACE,kBAAC,GAAD;OACE,WAAW,EAAO;OAClB,OAAO;OACP,UAAA;OACA,cAAW;OACX,aAAa,IAAY,uBAAuB;MACjD,CAAA,GACD,kBAAC,GAAD;OACE,OAAO;OACP,QAAQ;OACR,WAAW,EAAO;MACnB,CAAA,CACE;OACF;MACF;;EACQ,CAAA,CACT;GACL,EAAA,CAAA;AAET"}
1	+ {"version":3,"file":"ShareThisPage.js","names":[],"sources":["../../../src/components/ShareThisPage/ShareThisPage.tsx"],"sourcesContent":["import {\n Dialog,\n DialogTitle,\n DialogContent,\n IconButton,\n Typography,\n Input,\n Box,\n} from '@mui/material'\nimport GenericCardActionButton from '../GenericCard/GenericCardActionButton'\nimport React from 'react'\nimport { useEffect, useState } from 'react'\nimport CloseIcon from '@mui/icons-material/Close'\nimport CopyToClipboardIcon from '../CopyToClipboardIcon'\nimport {\n LinkedinShareButton,\n LinkedinIcon,\n TwitterShareButton,\n BlueskyShareButton,\n BlueskyIcon,\n XIcon,\n} from 'react-share'\nimport styles from './ShareThisPage.module.scss'\nimport ShareTwoTone from '@mui/icons-material/ShareTwoTone'\nimport { useCreateShortUrl } from '../../utils/hooks/useCreateShortUrl'\n\nexport type ShareThisPageProps = {\n shortIoPublicApiKey?: string\n domain?: string\n renderAs?: 'button' \| 'icon'\n open?: boolean\n onClose?: () => void\n}\n\nconst ShareThisPage = ({\n shortIoPublicApiKey,\n domain = 'sageb.io',\n renderAs = 'button',\n open: externalOpen,\n onClose: externalOnClose,\n}: ShareThisPageProps): React.ReactNode => {\n const [url, setUrl] = useState('')\n const [internalOpen, setInternalOpen] = useState(false)\n\n // Use internal state if externalOpen is undefined\n // Otherwise, the open state is controlled externally by externalOpen\n const isControlled = externalOpen === undefined\n const open = isControlled ? internalOpen : externalOpen\n\n const handleOpen = () => {\n if (isControlled) {\n setInternalOpen(true)\n }\n }\n\n const handleClose = () => {\n if (isControlled) {\n setInternalOpen(false)\n }\n if (externalOnClose) {\n externalOnClose()\n }\n }\n\n const { mutate: createShortUrl, isPending } = useCreateShortUrl({\n shortIoPublicApiKey,\n domain,\n onSuccess: data => {\n setUrl(data)\n },\n onError: error => {\n console.error(error)\n setUrl(window.location.href)\n },\n })\n\n useEffect(() => {\n if (open) {\n createShortUrl()\n }\n }, [open, createShortUrl])\n\n return (\n <div>\n {renderAs === 'button' && (\n <GenericCardActionButton\n variant=\"outlined\"\n startIcon={<ShareTwoTone className={styles.shareIcon} />}\n onClick={handleOpen}\n >\n Share\n </GenericCardActionButton>\n )}\n\n <Dialog\n open={open}\n onClose={handleClose}\n maxWidth=\"xs\"\n className={styles.dialogPaper}\n >\n <DialogTitle className={styles.dialogTitle}>\n Share this page\n <IconButton onClick={handleClose} size=\"small\">\n <CloseIcon className={styles.closeIcon} />\n </IconButton>\n </DialogTitle>\n\n <DialogContent className={styles.dialogContent}>\n <Box className={styles.contentStack}>\n <div className={styles.shareButtonsContainer}>\n <LinkedinShareButton url={url} aria-label=\"Share on LinkedIn\">\n <div className={styles.shareItem}>\n <LinkedinIcon size={48} round />\n <Typography variant=\"body1\" className={styles.shareItemLabel}>\n LinkedIn\n </Typography>\n </div>\n </LinkedinShareButton>\n\n <TwitterShareButton url={url} aria-label=\"Share on X\">\n <div className={styles.shareItem}>\n <XIcon size={48} round />\n <Typography variant=\"body1\" className={styles.shareItemLabel}>\n X\n </Typography>\n </div>\n </TwitterShareButton>\n\n <BlueskyShareButton url={url} aria-label=\"Share on Bluesky\">\n <div className={styles.shareItem}>\n <BlueskyIcon size={48} round />\n <Typography variant=\"body1\" className={styles.shareItemLabel}>\n Bluesky\n </Typography>\n </div>\n </BlueskyShareButton>\n </div>\n\n <div className={styles.copySection}>\n <Typography className={styles.copyLabel}>Page Link</Typography>\n <div className={styles.copyRow}>\n <Input\n className={styles.urlInput}\n value={url}\n readOnly\n aria-label=\"Page URL\"\n placeholder={isPending ? 'Generating link...' : ''}\n />\n <CopyToClipboardIcon\n value={url}\n sizePx={24}\n className={styles.copyButton}\n />\n </div>\n </div>\n </Box>\n </DialogContent>\n </Dialog>\n </div>\n )\n}\n\nexport default ShareThisPage\n"],"mappings":";;;;;;;;;;;AAkCA,IAAM,KAAiB,EACrB,wBACA,YAAS,YACT,cAAW,UACX,MAAM,GACN,SAAS,QACgC;CACzC,IAAM,CAAC,GAAK,KAAU,EAAS,EAAE,GAC3B,CAAC,GAAc,KAAmB,EAAS,EAAK,GAIhD,IAAe,MAAiB,KAAA,GAChC,IAAO,IAAe,IAAe,GAErC,UAAmB;EACvB,AAAI,KACF,EAAgB,EAAI;CAExB,GAEM,UAAoB;EAIxB,AAHI,KACF,EAAgB,EAAK,GAEnB,KACF,EAAgB;CAEpB,GAEM,EAAE,QAAQ,GAAgB,iBAAc,EAAkB;EAC9D;EACA;EACA,YAAW,MAAQ;GACjB,EAAO,CAAI;EACb;EACA,UAAS,MAAS;GAEhB,AADA,QAAQ,MAAM,CAAK,GACnB,EAAO,OAAO,SAAS,IAAI;EAC7B;CACF,CAAC;CAQD,OANA,QAAgB;EACd,AAAI,KACF,EAAe;CAEnB,GAAG,CAAC,GAAM,CAAc,CAAC,GAGvB,kBAAC,OAAD,EAAA,UAAA,CACG,MAAa,YACZ,kBAAC,GAAD;EACE,SAAQ;EACR,WAAW,kBAAC,GAAD,EAAc,WAAW,EAAO,UAAY,CAAA;EACvD,SAAS;YACV;CAEwB,CAAA,GAG3B,kBAAC,GAAD;EACQ;EACN,SAAS;EACT,UAAS;EACT,WAAW,EAAO;YAJpB,CAME,kBAAC,GAAD;GAAa,WAAW,EAAO;aAA/B,CAA4C,mBAE1C,kBAAC,GAAD;IAAY,SAAS;IAAa,MAAK;cACrC,kBAAC,GAAD,EAAW,WAAW,EAAO,UAAY,CAAA;GAC/B,CAAA,CACD;MAEb,kBAAC,GAAD;GAAe,WAAW,EAAO;aAC/B,kBAAC,GAAD;IAAK,WAAW,EAAO;cAAvB,CACE,kBAAC,OAAD;KAAK,WAAW,EAAO;eAAvB;MACE,kBAAC,GAAD;OAA0B;OAAK,cAAW;iBACxC,kBAAC,OAAD;QAAK,WAAW,EAAO;kBAAvB,CACE,kBAAC,GAAD;SAAc,MAAM;SAAI,OAAA;QAAO,CAAA,GAC/B,kBAAC,GAAD;SAAY,SAAQ;SAAQ,WAAW,EAAO;mBAAgB;QAElD,CAAA,CACT;;MACc,CAAA;MAErB,kBAAC,GAAD;OAAyB;OAAK,cAAW;iBACvC,kBAAC,OAAD;QAAK,WAAW,EAAO;kBAAvB,CACE,kBAAC,GAAD;SAAO,MAAM;SAAI,OAAA;QAAO,CAAA,GACxB,kBAAC,GAAD;SAAY,SAAQ;SAAQ,WAAW,EAAO;mBAAgB;QAElD,CAAA,CACT;;MACa,CAAA;MAEpB,kBAAC,GAAD;OAAyB;OAAK,cAAW;iBACvC,kBAAC,OAAD;QAAK,WAAW,EAAO;kBAAvB,CACE,kBAAC,GAAD;SAAa,MAAM;SAAI,OAAA;QAAO,CAAA,GAC9B,kBAAC,GAAD;SAAY,SAAQ;SAAQ,WAAW,EAAO;mBAAgB;QAElD,CAAA,CACT;;MACa,CAAA;KACjB;QAEL,kBAAC,OAAD;KAAK,WAAW,EAAO;eAAvB,CACE,kBAAC,GAAD;MAAY,WAAW,EAAO;gBAAW;KAAqB,CAAA,GAC9D,kBAAC,OAAD;MAAK,WAAW,EAAO;gBAAvB,CACE,kBAAC,GAAD;OACE,WAAW,EAAO;OAClB,OAAO;OACP,UAAA;OACA,cAAW;OACX,aAAa,IAAY,uBAAuB;MACjD,CAAA,GACD,kBAAC,GAAD;OACE,OAAO;OACP,QAAQ;OACR,WAAW,EAAO;MACnB,CAAA,CACE;OACF;MACF;;EACQ,CAAA,CACT;GACL,EAAA,CAAA;AAET"}

package/dist/components/StandaloneQueryWrapper/StandaloneQueryWrapper.js CHANGED Viewed

@@ -1,11 +1,11 @@
 import "../../utils/SynapseConstants.js";
 import { isTable as e } from "../../utils/functions/EntityTypeUtils.js";
 import { getAdditionalFilters as t, parseEntityIdFromSqlStatement as n } from "../../utils/functions/SqlFunctions.js";
+import { QueryVisualizationContextConsumer as r } from "../QueryVisualizationWrapper/QueryVisualizationContext.js";
 import "../../utils/index.js";
-import { useGetEntity as r } from "../../synapse-queries/entity/useEntity.js";
-import { QueryContextConsumer as i } from "../QueryContext/QueryContext.js";
-import { NoContentPlaceholderType as a } from "../SynapseTable/NoContentPlaceholderType.js";
-import { QueryVisualizationContextConsumer as o } from "../QueryVisualizationWrapper/QueryVisualizationContext.js";
+import { useGetEntity as i } from "../../synapse-queries/entity/useEntity.js";
+import { QueryContextConsumer as a } from "../QueryContext/QueryContext.js";
+import { NoContentPlaceholderType as o } from "../SynapseTable/NoContentPlaceholderType.js";
 import { QueryVisualizationWrapper as s } from "../QueryVisualizationWrapper/QueryVisualizationWrapper.js";
 import "../QueryVisualizationWrapper/index.js";
 import { QueryWrapper as c } from "../QueryWrapper/QueryWrapper.js";
@@ -41,9 +41,9 @@ function S(e) {
 	}
 }
 function C(t) {
-	let { hideDownload: C } = t, { showAccessColumn: w, sql: T, hideAddToDownloadListColumn: E = C, hideQueryCount: D, name: O, showTopLevelControls: k = !1, searchConfiguration: A, unitDescription: j = "Results", rgbIndex: M, showLastUpdatedOn: N, noContentPlaceholderType: P = k ? a.INTERACTIVE : a.STATIC, cardConfiguration: F, tableConfiguration: I, shouldDeepLink: L, customControls: R, ...z } = t, [B, V] = _(1), H = () => {
+	let { hideDownload: C } = t, { showAccessColumn: w, sql: T, hideAddToDownloadListColumn: E = C, hideQueryCount: D, name: O, showTopLevelControls: k = !1, searchConfiguration: A, unitDescription: j = "Results", rgbIndex: M, showLastUpdatedOn: N, noContentPlaceholderType: P = k ? o.INTERACTIVE : o.STATIC, cardConfiguration: F, tableConfiguration: I, shouldDeepLink: L, customControls: R, ...z } = t, [B, V] = _(1), H = () => {
 		V(B + 1);
-	}, U = t.query?.sql ?? T ?? "", W = x(S(t)), { data: G } = r(n(U)), K = JSON.stringify(W) + B;
+	}, U = t.query?.sql ?? T ?? "", W = x(S(t)), { data: G } = i(n(U)), K = JSON.stringify(W) + B;
 	return /* @__PURE__ */ g(c, {
 		...z,
 		initQueryRequest: W,
@@ -55,9 +55,9 @@ function C(t) {
 		showLastUpdatedOn: N,
 		noContentPlaceholderType: P,
 		...z,
-		children: /* @__PURE__ */ y(i, { children: (n) => {
+		children: /* @__PURE__ */ y(a, { children: (n) => {
 			if (n === void 0) throw Error("No queryContext found when calling QueryContextConsumer");
-			return /* @__PURE__ */ y(o, { children: (r) => {
+			return /* @__PURE__ */ y(r, { children: (r) => {
 				if (r === void 0) throw Error("No queryVisualizationContext found when calling QueryVisualizationContextConsumer");
 				return /* @__PURE__ */ b(v, { children: [
 					k && /* @__PURE__ */ y(m, {

package/dist/components/SustainabilityScorecard/DialLayout.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import "react";
 import { Box as e, Stack as t, Tooltip as n, Typography as r } from "@mui/material";
 import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import { InfoTwoTone as o } from "@mui/icons-material";
+import o from "@mui/icons-material/InfoTwoTone";
 //#region src/components/SustainabilityScorecard/DialLayout.tsx
 var s = ({ dial: s, label: c, toolTipText: l }) => /* @__PURE__ */ a(t, {
 	sx: {

package/dist/components/SustainabilityScorecard/DialLayout.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DialLayout.js","names":[],"sources":["../../../src/components/SustainabilityScorecard/DialLayout.tsx"],"sourcesContent":["import React from 'react'\nimport { Box, Stack, Tooltip, Typography } from '@mui/material'\nimport { InfoTwoTone } from '@mui/icons-material'\nimport { ReactElement } from 'react'\nimport { ScoreDescriptor } from './Dial'\n\nexport type DialLayoutProps = {\n dial: ReactElement\n label: ScoreDescriptor\n toolTipText?: string\n}\n\n// Displayed on entity header of details page\nconst DialLayout = ({\n dial,\n label,\n toolTipText,\n}: DialLayoutProps): React.ReactNode => {\n return (\n <Stack sx={{ alignItems: 'center', gap: '10px' }}>\n {dial}\n <Box sx={{ display: 'flex', alignItems: 'center', gap: '4px' }}>\n <Typography variant=\"smallText1\" sx={{ margin: '0 !important' }}>\n {label}\n </Typography>\n {toolTipText && (\n <Tooltip title={toolTipText}>\n <InfoTwoTone sx={{ width: '18px', height: '18px' }} />\n </Tooltip>\n )}\n </Box>\n </Stack>\n )\n}\n\nexport default DialLayout\n"],"mappings":";;;;;AAaA,IAAM,KAAc,EAClB,SACA,UACA,qBAGE,kBAAC,GAAD;CAAO,IAAI;EAAE,YAAY;EAAU,KAAK;CAAO;WAA/C,CACG,GACD,kBAAC,GAAD;EAAK,IAAI;GAAE,SAAS;GAAQ,YAAY;GAAU,KAAK;EAAM;YAA7D,CACE,kBAAC,GAAD;GAAY,SAAQ;GAAa,IAAI,EAAE,QAAQ,eAAe;aAC3D;EACS,CAAA,GACX,KACC,kBAAC,GAAD;GAAS,OAAO;aACd,kBAAC,GAAD,EAAa,IAAI;IAAE,OAAO;IAAQ,QAAQ;GAAO,EAAI,CAAA;EAC9C,CAAA,CAER;GACA"}
1	+ {"version":3,"file":"DialLayout.js","names":[],"sources":["../../../src/components/SustainabilityScorecard/DialLayout.tsx"],"sourcesContent":["import React from 'react'\nimport { Box, Stack, Tooltip, Typography } from '@mui/material'\nimport InfoTwoTone from '@mui/icons-material/InfoTwoTone'\nimport { ReactElement } from 'react'\nimport { ScoreDescriptor } from './Dial'\n\nexport type DialLayoutProps = {\n dial: ReactElement\n label: ScoreDescriptor\n toolTipText?: string\n}\n\n// Displayed on entity header of details page\nconst DialLayout = ({\n dial,\n label,\n toolTipText,\n}: DialLayoutProps): React.ReactNode => {\n return (\n <Stack sx={{ alignItems: 'center', gap: '10px' }}>\n {dial}\n <Box sx={{ display: 'flex', alignItems: 'center', gap: '4px' }}>\n <Typography variant=\"smallText1\" sx={{ margin: '0 !important' }}>\n {label}\n </Typography>\n {toolTipText && (\n <Tooltip title={toolTipText}>\n <InfoTwoTone sx={{ width: '18px', height: '18px' }} />\n </Tooltip>\n )}\n </Box>\n </Stack>\n )\n}\n\nexport default DialLayout\n"],"mappings":";;;;;AAaA,IAAM,KAAc,EAClB,SACA,UACA,qBAGE,kBAAC,GAAD;CAAO,IAAI;EAAE,YAAY;EAAU,KAAK;CAAO;WAA/C,CACG,GACD,kBAAC,GAAD;EAAK,IAAI;GAAE,SAAS;GAAQ,YAAY;GAAU,KAAK;EAAM;YAA7D,CACE,kBAAC,GAAD;GAAY,SAAQ;GAAa,IAAI,EAAE,QAAQ,eAAe;aAC3D;EACS,CAAA,GACX,KACC,kBAAC,GAAD;GAAS,OAAO;aACd,kBAAC,GAAD,EAAa,IAAI;IAAE,OAAO;IAAQ,QAAQ;GAAO,EAAI,CAAA;EAC9C,CAAA,CAER;GACA"}

package/dist/components/SustainabilityScorecard/SustainabilityScorecard.js CHANGED Viewed

@@ -7,7 +7,7 @@ import o from "./Dial.js";
 import "react";
 import { Box as s, Link as c, Skeleton as l, Stack as u, Tooltip as d, Typography as f } from "@mui/material";
 import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
-import { InfoTwoTone as g } from "@mui/icons-material";
+import g from "@mui/icons-material/InfoTwoTone";
 import { Link as _, useLocation as v } from "react-router";
 import y from "@mui/icons-material/Close";
 //#region src/components/SustainabilityScorecard/SustainabilityScorecard.tsx

package/dist/components/SustainabilityScorecard/SustainabilityScorecard.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SustainabilityScorecard.js","names":[],"sources":["../../../src/components/SustainabilityScorecard/SustainabilityScorecard.tsx"],"sourcesContent":["import {\n Box,\n Link as MuiLink,\n Skeleton,\n Stack,\n Tooltip,\n Typography,\n} from '@mui/material'\nimport React from 'react'\nimport CloseIcon from '@mui/icons-material/Close'\nimport useGetQueryResultBundle from '@/synapse-queries/entity/useGetQueryResultBundle'\nimport { getFieldIndex } from '@/utils/functions/queryUtils'\n\nimport { SxProps, Theme } from '@mui/material'\nimport {\n getMetricValues,\n SUSTAINABILITY_ICON_COLORS,\n SustainabilityScorecardBaseProps,\n} from './SustainabilityScorecardUtils'\nimport { InfoTwoTone } from '@mui/icons-material'\nimport { CheckIcon } from '@/assets/icons/terms/CheckIcon'\nimport NoContentAvailable from '../SynapseTable/NoContentAvailable'\nimport Dial from './Dial'\nimport { Link as RouterLink, useLocation } from 'react-router'\n\nexport type MetricsConfig = {\n /** Name of the metric column in the table /\n key: string\n /* Display label for the metric /\n label: string\n /* Shown as a tooltip in SustainabilityScorecard and as summary text in SustainabilityScorecardSummary /\n text?: string\n}\n\nexport type SustainabilityScorecardProps = SustainabilityScorecardBaseProps & {\n sx?: SxProps<Theme>\n sustainabilityReportLink?: string\n}\n\ntype MetricRowProps = {\n metricValues: string[]\n metricsConfig: MetricsConfig[]\n}\n\nconst MetricRow = ({\n metricValues,\n metricsConfig,\n}: MetricRowProps): React.ReactNode => {\n return (\n <>\n {metricsConfig.map((metric, index) => (\n <Box sx={{ display: 'flex', padding: '4px 20px' }} key={metric.key}>\n <Typography\n variant=\"smallText1\"\n sx={{ alignItems: 'center', display: 'flex', gap: '8px' }}\n >\n {metric.label}\n <Tooltip title={metric.text} placement=\"top\">\n <InfoTwoTone\n sx={{\n width: '18px',\n height: '18px',\n color: 'primary.contrastText',\n }}\n />\n </Tooltip>\n </Typography>\n {metricValues[index] === 'true' ? (\n <Box\n sx={{\n backgroundColor: SUSTAINABILITY_ICON_COLORS.check,\n borderRadius: '50%',\n width: 18,\n height: 18,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n marginLeft: 'auto',\n }}\n >\n <CheckIcon\n sx={{ color: 'primary.contrastText', fontSize: '11px' }}\n />\n </Box>\n ) : (\n <Box\n sx={{\n backgroundColor: SUSTAINABILITY_ICON_COLORS.close,\n borderRadius: '50%',\n width: 18,\n height: 18,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n marginLeft: 'auto',\n }}\n >\n <CloseIcon\n sx={{ color: 'primary.contrastText', fontSize: '14px' }}\n />\n </Box>\n )}\n </Box>\n ))}\n </>\n )\n}\n\n/ SustainabilityScorecard component displays sustainability metrics and a dial based on the sustainability score of the entity. */\nconst SustainabilityScorecard = ({\n metricsConfig,\n scoreDescriptorColumnName,\n queryRequest,\n sx,\n sustainabilityReportLink,\n}: SustainabilityScorecardProps): React.ReactNode => {\n const { data: queryResultBundle, isLoading } =\n useGetQueryResultBundle(queryRequest)\n const location = useLocation()\n const search = location.search\n\n if (isLoading) {\n return <Skeleton width={'100%'} height={'100%'} />\n }\n\n const data = queryResultBundle?.queryResult!.queryResults\n\n if (data?.rows?.length === 0) {\n return (\n <Stack sx={{ display: 'flex', padding: '20px', ...sx }}>\n <Typography sx={{ paddingBottom: '20px' }} variant=\"subsectionHeader\">\n Sustainability Index\n </Typography>\n <NoContentAvailable />\n </Stack>\n )\n }\n\n const scoreDescriptorColIndex = getFieldIndex(\n scoreDescriptorColumnName,\n queryResultBundle,\n )\n\n const scoreDescriptor = data?.rows[0].values[scoreDescriptorColIndex]\n\n const metricValues = getMetricValues(\n data?.rows[0],\n queryResultBundle,\n metricsConfig,\n )\n\n return (\n <Box\n sx={{\n display: 'flex',\n flexDirection: { xs: 'column', sm: 'row' },\n padding: '20px',\n gap: '20px',\n ...sx,\n }}\n >\n <Stack sx={{ display: 'flex', gap: '20px', alignItems: 'center' }}>\n <Typography variant=\"subsectionHeader\">Sustainability Index</Typography>\n <Dial scoreDescriptor={scoreDescriptor ?? ''} />\n </Stack>\n <Stack sx={{ flex: 1, gap: '2px' }}>\n <MetricRow metricValues={metricValues} metricsConfig={metricsConfig} />\n {sustainabilityReportLink && (\n <MuiLink\n component={RouterLink}\n to={{ pathname: sustainabilityReportLink, search }}\n sx={{ padding: '4px 20px', fontSize: '14px' }}\n >\n View this tool’s sustainability and reusability report\n </MuiLink>\n )}\n </Stack>\n </Box>\n )\n}\n\nexport default SustainabilityScorecard\n"],"mappings":";;;;;;;;;;;;;AA4CA,IAAM,KAAa,EACjB,iBACA,uBAGE,kBAAA,GAAA,EAAA,UACG,EAAc,KAAK,GAAQ,MAC1B,kBAAC,GAAD;CAAK,IAAI;EAAE,SAAS;EAAQ,SAAS;CAAW;WAAhD,CACE,kBAAC,GAAD;EACE,SAAQ;EACR,IAAI;GAAE,YAAY;GAAU,SAAS;GAAQ,KAAK;EAAM;YAF1D,CAIG,EAAO,OACR,kBAAC,GAAD;GAAS,OAAO,EAAO;GAAM,WAAU;aACrC,kBAAC,GAAD,EACE,IAAI;IACF,OAAO;IACP,QAAQ;IACR,OAAO;GACT,EACD,CAAA;EACM,CAAA,CACC;KACX,EAAa,OAAW,SACvB,kBAAC,GAAD;EACE,IAAI;GACF,iBAAiB,EAA2B;GAC5C,cAAc;GACd,OAAO;GACP,QAAQ;GACR,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,YAAY;EACd;YAEA,kBAAC,GAAD,EACE,IAAI;GAAE,OAAO;GAAwB,UAAU;EAAO,EACvD,CAAA;CACE,CAAA,IAEL,kBAAC,GAAD;EACE,IAAI;GACF,iBAAiB,EAA2B;GAC5C,cAAc;GACd,OAAO;GACP,QAAQ;GACR,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,YAAY;EACd;YAEA,kBAAC,GAAD,EACE,IAAI;GAAE,OAAO;GAAwB,UAAU;EAAO,EACvD,CAAA;CACE,CAAA,CAEJ;GAnDmD,EAAO,GAmD1D,CACN,EACD,CAAA,GAKA,KAA2B,EAC/B,kBACA,8BACA,iBACA,OACA,kCACmD;CACnD,IAAM,EAAE,MAAM,GAAmB,iBAC/B,EAAwB,CAAY,GAEhC,IADW,EACF,EAAS;CAExB,IAAI,GACF,OAAO,kBAAC,GAAD;EAAU,OAAO;EAAQ,QAAQ;CAAS,CAAA;CAGnD,IAAM,IAAO,GAAmB,YAAa;CAE7C,IAAI,GAAM,MAAM,WAAW,GACzB,OACE,kBAAC,GAAD;EAAO,IAAI;GAAE,SAAS;GAAQ,SAAS;GAAQ,GAAG;EAAG;YAArD,CACE,kBAAC,GAAD;GAAY,IAAI,EAAE,eAAe,OAAO;GAAG,SAAQ;aAAmB;EAE1D,CAAA,GACZ,kBAAC,GAAD,CAAqB,CAAA,CAChB;;CAIX,IAAM,IAA0B,EAC9B,GACA,CACF,GAEM,IAAkB,GAAM,KAAK,GAAG,OAAO,IAEvC,IAAe,EACnB,GAAM,KAAK,IACX,GACA,CACF;CAEA,OACE,kBAAC,GAAD;EACE,IAAI;GACF,SAAS;GACT,eAAe;IAAE,IAAI;IAAU,IAAI;GAAM;GACzC,SAAS;GACT,KAAK;GACL,GAAG;EACL;YAPF,CASE,kBAAC,GAAD;GAAO,IAAI;IAAE,SAAS;IAAQ,KAAK;IAAQ,YAAY;GAAS;aAAhE,CACE,kBAAC,GAAD;IAAY,SAAQ;cAAmB;GAAgC,CAAA,GACvE,kBAAC,GAAD,EAAM,iBAAiB,KAAmB,GAAK,CAAA,CAC1C;MACP,kBAAC,GAAD;GAAO,IAAI;IAAE,MAAM;IAAG,KAAK;GAAM;aAAjC,CACE,kBAAC,GAAD;IAAyB;IAA6B;GAAgB,CAAA,GACrE,KACC,kBAAC,GAAD;IACE,WAAW;IACX,IAAI;KAAE,UAAU;KAA0B;IAAO;IACjD,IAAI;KAAE,SAAS;KAAY,UAAU;IAAO;cAC7C;GAEQ,CAAA,CAEN;IACJ;;AAET"}
1	+ {"version":3,"file":"SustainabilityScorecard.js","names":[],"sources":["../../../src/components/SustainabilityScorecard/SustainabilityScorecard.tsx"],"sourcesContent":["import {\n Box,\n Link as MuiLink,\n Skeleton,\n Stack,\n Tooltip,\n Typography,\n} from '@mui/material'\nimport React from 'react'\nimport CloseIcon from '@mui/icons-material/Close'\nimport useGetQueryResultBundle from '@/synapse-queries/entity/useGetQueryResultBundle'\nimport { getFieldIndex } from '@/utils/functions/queryUtils'\n\nimport { SxProps, Theme } from '@mui/material'\nimport {\n getMetricValues,\n SUSTAINABILITY_ICON_COLORS,\n SustainabilityScorecardBaseProps,\n} from './SustainabilityScorecardUtils'\nimport InfoTwoTone from '@mui/icons-material/InfoTwoTone'\nimport { CheckIcon } from '@/assets/icons/terms/CheckIcon'\nimport NoContentAvailable from '../SynapseTable/NoContentAvailable'\nimport Dial from './Dial'\nimport { Link as RouterLink, useLocation } from 'react-router'\n\nexport type MetricsConfig = {\n /** Name of the metric column in the table /\n key: string\n /* Display label for the metric /\n label: string\n /* Shown as a tooltip in SustainabilityScorecard and as summary text in SustainabilityScorecardSummary /\n text?: string\n}\n\nexport type SustainabilityScorecardProps = SustainabilityScorecardBaseProps & {\n sx?: SxProps<Theme>\n sustainabilityReportLink?: string\n}\n\ntype MetricRowProps = {\n metricValues: string[]\n metricsConfig: MetricsConfig[]\n}\n\nconst MetricRow = ({\n metricValues,\n metricsConfig,\n}: MetricRowProps): React.ReactNode => {\n return (\n <>\n {metricsConfig.map((metric, index) => (\n <Box sx={{ display: 'flex', padding: '4px 20px' }} key={metric.key}>\n <Typography\n variant=\"smallText1\"\n sx={{ alignItems: 'center', display: 'flex', gap: '8px' }}\n >\n {metric.label}\n <Tooltip title={metric.text} placement=\"top\">\n <InfoTwoTone\n sx={{\n width: '18px',\n height: '18px',\n color: 'primary.contrastText',\n }}\n />\n </Tooltip>\n </Typography>\n {metricValues[index] === 'true' ? (\n <Box\n sx={{\n backgroundColor: SUSTAINABILITY_ICON_COLORS.check,\n borderRadius: '50%',\n width: 18,\n height: 18,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n marginLeft: 'auto',\n }}\n >\n <CheckIcon\n sx={{ color: 'primary.contrastText', fontSize: '11px' }}\n />\n </Box>\n ) : (\n <Box\n sx={{\n backgroundColor: SUSTAINABILITY_ICON_COLORS.close,\n borderRadius: '50%',\n width: 18,\n height: 18,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n marginLeft: 'auto',\n }}\n >\n <CloseIcon\n sx={{ color: 'primary.contrastText', fontSize: '14px' }}\n />\n </Box>\n )}\n </Box>\n ))}\n </>\n )\n}\n\n/ SustainabilityScorecard component displays sustainability metrics and a dial based on the sustainability score of the entity. */\nconst SustainabilityScorecard = ({\n metricsConfig,\n scoreDescriptorColumnName,\n queryRequest,\n sx,\n sustainabilityReportLink,\n}: SustainabilityScorecardProps): React.ReactNode => {\n const { data: queryResultBundle, isLoading } =\n useGetQueryResultBundle(queryRequest)\n const location = useLocation()\n const search = location.search\n\n if (isLoading) {\n return <Skeleton width={'100%'} height={'100%'} />\n }\n\n const data = queryResultBundle?.queryResult!.queryResults\n\n if (data?.rows?.length === 0) {\n return (\n <Stack sx={{ display: 'flex', padding: '20px', ...sx }}>\n <Typography sx={{ paddingBottom: '20px' }} variant=\"subsectionHeader\">\n Sustainability Index\n </Typography>\n <NoContentAvailable />\n </Stack>\n )\n }\n\n const scoreDescriptorColIndex = getFieldIndex(\n scoreDescriptorColumnName,\n queryResultBundle,\n )\n\n const scoreDescriptor = data?.rows[0].values[scoreDescriptorColIndex]\n\n const metricValues = getMetricValues(\n data?.rows[0],\n queryResultBundle,\n metricsConfig,\n )\n\n return (\n <Box\n sx={{\n display: 'flex',\n flexDirection: { xs: 'column', sm: 'row' },\n padding: '20px',\n gap: '20px',\n ...sx,\n }}\n >\n <Stack sx={{ display: 'flex', gap: '20px', alignItems: 'center' }}>\n <Typography variant=\"subsectionHeader\">Sustainability Index</Typography>\n <Dial scoreDescriptor={scoreDescriptor ?? ''} />\n </Stack>\n <Stack sx={{ flex: 1, gap: '2px' }}>\n <MetricRow metricValues={metricValues} metricsConfig={metricsConfig} />\n {sustainabilityReportLink && (\n <MuiLink\n component={RouterLink}\n to={{ pathname: sustainabilityReportLink, search }}\n sx={{ padding: '4px 20px', fontSize: '14px' }}\n >\n View this tool’s sustainability and reusability report\n </MuiLink>\n )}\n </Stack>\n </Box>\n )\n}\n\nexport default SustainabilityScorecard\n"],"mappings":";;;;;;;;;;;;;AA4CA,IAAM,KAAa,EACjB,iBACA,uBAGE,kBAAA,GAAA,EAAA,UACG,EAAc,KAAK,GAAQ,MAC1B,kBAAC,GAAD;CAAK,IAAI;EAAE,SAAS;EAAQ,SAAS;CAAW;WAAhD,CACE,kBAAC,GAAD;EACE,SAAQ;EACR,IAAI;GAAE,YAAY;GAAU,SAAS;GAAQ,KAAK;EAAM;YAF1D,CAIG,EAAO,OACR,kBAAC,GAAD;GAAS,OAAO,EAAO;GAAM,WAAU;aACrC,kBAAC,GAAD,EACE,IAAI;IACF,OAAO;IACP,QAAQ;IACR,OAAO;GACT,EACD,CAAA;EACM,CAAA,CACC;KACX,EAAa,OAAW,SACvB,kBAAC,GAAD;EACE,IAAI;GACF,iBAAiB,EAA2B;GAC5C,cAAc;GACd,OAAO;GACP,QAAQ;GACR,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,YAAY;EACd;YAEA,kBAAC,GAAD,EACE,IAAI;GAAE,OAAO;GAAwB,UAAU;EAAO,EACvD,CAAA;CACE,CAAA,IAEL,kBAAC,GAAD;EACE,IAAI;GACF,iBAAiB,EAA2B;GAC5C,cAAc;GACd,OAAO;GACP,QAAQ;GACR,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,YAAY;EACd;YAEA,kBAAC,GAAD,EACE,IAAI;GAAE,OAAO;GAAwB,UAAU;EAAO,EACvD,CAAA;CACE,CAAA,CAEJ;GAnDmD,EAAO,GAmD1D,CACN,EACD,CAAA,GAKA,KAA2B,EAC/B,kBACA,8BACA,iBACA,OACA,kCACmD;CACnD,IAAM,EAAE,MAAM,GAAmB,iBAC/B,EAAwB,CAAY,GAEhC,IADW,EACF,EAAS;CAExB,IAAI,GACF,OAAO,kBAAC,GAAD;EAAU,OAAO;EAAQ,QAAQ;CAAS,CAAA;CAGnD,IAAM,IAAO,GAAmB,YAAa;CAE7C,IAAI,GAAM,MAAM,WAAW,GACzB,OACE,kBAAC,GAAD;EAAO,IAAI;GAAE,SAAS;GAAQ,SAAS;GAAQ,GAAG;EAAG;YAArD,CACE,kBAAC,GAAD;GAAY,IAAI,EAAE,eAAe,OAAO;GAAG,SAAQ;aAAmB;EAE1D,CAAA,GACZ,kBAAC,GAAD,CAAqB,CAAA,CAChB;;CAIX,IAAM,IAA0B,EAC9B,GACA,CACF,GAEM,IAAkB,GAAM,KAAK,GAAG,OAAO,IAEvC,IAAe,EACnB,GAAM,KAAK,IACX,GACA,CACF;CAEA,OACE,kBAAC,GAAD;EACE,IAAI;GACF,SAAS;GACT,eAAe;IAAE,IAAI;IAAU,IAAI;GAAM;GACzC,SAAS;GACT,KAAK;GACL,GAAG;EACL;YAPF,CASE,kBAAC,GAAD;GAAO,IAAI;IAAE,SAAS;IAAQ,KAAK;IAAQ,YAAY;GAAS;aAAhE,CACE,kBAAC,GAAD;IAAY,SAAQ;cAAmB;GAAgC,CAAA,GACvE,kBAAC,GAAD,EAAM,iBAAiB,KAAmB,GAAK,CAAA,CAC1C;MACP,kBAAC,GAAD;GAAO,IAAI;IAAE,MAAM;IAAG,KAAK;GAAM;aAAjC,CACE,kBAAC,GAAD;IAAyB;IAA6B;GAAgB,CAAA,GACrE,KACC,kBAAC,GAAD;IACE,WAAW;IACX,IAAI;KAAE,UAAU;KAA0B;IAAO;IACjD,IAAI;KAAE,SAAS;KAAY,UAAU;IAAO;cAC7C;GAEQ,CAAA,CAEN;IACJ;;AAET"}

package/dist/components/SynapseChat/SynapseChat.js CHANGED Viewed

@@ -18,7 +18,7 @@ import { Alert as u, Box as d, Chip as f, List as p, ListItem as m, Stack as h,
 import { jsx as _, jsxs as v } from "react/jsx-runtime";
 import { AgentAccessLevel as y } from "@sage-bionetworks/synapse-types";
 import { FileHandleAssociateType as ae } from "@sage-bionetworks/synapse-client";
-import { SmartToyTwoTone as b } from "@mui/icons-material";
+import b from "@mui/icons-material/SmartToyTwoTone";
 //#region src/components/SynapseChat/SynapseChat.tsx
 var oe = "Hi! How can I help you today?", se = {
 	[y.PUBLICLY_ACCESSIBLE]: " and can only read public data.",

package/dist/components/SynapseChat/SynapseChat.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SynapseChat.js","names":[],"sources":["../../../src/components/SynapseChat/SynapseChat.tsx"],"sourcesContent":["import { ChatState, useChatState } from '@/components/SynapseChat/useChatState'\nimport {\n useCreateAgentSession,\n useUpdateAgentSession,\n} from '@/synapse-queries/chat/useChat'\nimport { useSynapseContext } from '@/utils'\nimport {\n Alert,\n Box,\n Chip,\n List,\n ListItem,\n Stack,\n Typography,\n} from '@mui/material'\nimport {\n AgentSession,\n FileHandleAssociateType,\n GridAgentSessionContext,\n} from '@sage-bionetworks/synapse-client'\nimport { AgentAccessLevel } from '@sage-bionetworks/synapse-types'\nimport { useEffect, useRef, useState } from 'react'\nimport { SkeletonParagraph } from '../Skeleton'\nimport { displayToast } from '../ToastMessage'\nimport AccessLevelMenu from './AccessLevelMenu'\nimport { ChatAttachment } from './utils/types'\nimport { ChatInputArea } from './components/ChatInputArea/ChatInputArea'\nimport SynapseChatMessage from './SynapseChatMessage'\nimport { SmartToyTwoTone } from '@mui/icons-material'\nimport { UserCard } from '../UserCard/UserCard'\nimport { useApplicationSessionContext } from '@/utils/AppUtils'\nimport { ReactComponent as CurieAvatarHead } from '@/assets/illustrations/curie_avatar_head.svg'\n\nconst CURIE_GREETING = 'Hi! How can I help you today?'\n\nconst CURIE_ACCESS_LEVEL_SUFFIX: Record<AgentAccessLevel, string> = {\n [AgentAccessLevel.PUBLICLY_ACCESSIBLE]: ' and can only read public data.',\n [AgentAccessLevel.READ_YOUR_PRIVATE_DATA]:\n ' and can read your public and private data in Synapse on your behalf.',\n [AgentAccessLevel.WRITE_YOUR_PRIVATE_DATA]:\n ' and can read and write your public and private data in Synapse on your behalf.',\n}\n\nconst DEFAULT_AVATAR = (\n <Box\n sx={{\n p: '3px',\n borderRadius: '50%',\n borderStyle: 'solid',\n borderWidth: '1px',\n borderColor: 'grey.300',\n mt: '10px',\n height: '31px',\n }}\n >\n <SmartToyTwoTone sx={{ color: 'secondary.main' }} />\n </Box>\n)\n\nconst CURIE_AVATAR = (\n <Box\n sx={{\n mt: '10px',\n height: '30px',\n width: '30px',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n }}\n >\n <CurieAvatarHead />\n </Box>\n)\n\nexport type SynapseChatProps = {\n initialMessage?: string //optional initial message\n agentRegistrationId?: string // if provided, use this agent\n chatbotName?: string // optional name of this chatbot agent\n variant?: 'default' \| 'curie'\n hideTitle?: boolean\n textboxPositionOffset?: string // when embedded in a form, the textbox (form) stuck to the bottom may need to be offset due to container padding (dialog content for example!)\n /* optional session context for the agent session /\n sessionContext?: GridAgentSessionContext\n / The current session, if state is lifted out of this component /\n externalSession?: AgentSession\n / A callback invoked to bootstrap the current session, if state is to be lifted out of this component /\n setExternalSession?: (s: AgentSession \| undefined) => void\n / The current chat history, if state is lifted out of this component /\n externalChatState?: ChatState\n // default access level for the agent session.\n defaultAgentAccessLevel?: AgentAccessLevel\n // Whether to show the access level menu for the agent session.\n showAccessLevelMenu?: boolean\n /\n Optional callback invoked once when a chat response is received from the server.\n * Use this for side effects such as navigation based on the response content.\n * Called in the mutation onSuccess handler so it runs exactly once per response.\n /\n onChatResponse?: (responseText: string) => void\n /* Optional list of prompt suggestions shown as clickable pills above the text input /\n suggestedPrompts?: string[]\n /* Optional custom avatar for the chatbot agent /\n agentAvatar?: React.ReactNode\n /\n Whether to allow the user to attach local files to their chat message.\n * @default false\n /\n allowAttachments?: boolean\n /\n Invoked when creating the agent session fails because the current (anonymous) user is not\n * authorized to start a session with this agent. Callers should use this to prompt the user to\n * log in. When omitted, the session creation error is shown inline instead.\n /\n onSessionCreationUnauthenticated?: () => void\n}\n\nexport function SynapseChat({\n initialMessage,\n agentRegistrationId,\n chatbotName = 'SynapseChat',\n variant = 'default',\n agentAvatar,\n hideTitle = false,\n textboxPositionOffset = '0px',\n sessionContext,\n externalSession,\n setExternalSession,\n externalChatState,\n showAccessLevelMenu = true,\n onChatResponse,\n suggestedPrompts,\n allowAttachments = false,\n onSessionCreationUnauthenticated,\n}: SynapseChatProps) {\n const { accessToken, isAuthenticated } = useSynapseContext()\n const { userId } = useApplicationSessionContext()\n\n const baseDisclaimerText = chatbotName + ' can make mistakes'\n\n const resolvedAgentAvatar =\n agentAvatar ?? (variant === 'curie' ? CURIE_AVATAR : DEFAULT_AVATAR)\n\n const userAvatar = (\n <UserCard ownerId={userId} size=\"AVATAR\" avatarSize=\"MEDIUM\" />\n )\n const [localAgentSession, setLocalAgentSession] = useState<AgentSession>()\n const agentSession = externalSession ?? localAgentSession\n const setAgentSession = setExternalSession ?? setLocalAgentSession\n\n const { mutate: createAgentSession, error: createAgentSessionError } =\n useCreateAgentSession({\n onSuccess: newAgentSession => setAgentSession(newAgentSession),\n onError: err => {\n // A registration that the ACT has not opened to anonymous chat rejects an anonymous\n // session with a 401/403. Defer to the caller to prompt the user to log in.\n if (!isAuthenticated && (err.status === 401 \|\| err.status === 403)) {\n onSessionCreationUnauthenticated?.()\n }\n },\n })\n\n const { mutate: updateAgentSession } = useUpdateAgentSession({\n onSuccess: updatedAgentSession => setAgentSession(updatedAgentSession),\n onError: err =>\n displayToast(\n `Unable to update the agent session: ${err.message}`,\n 'danger',\n ),\n })\n const [agentAccessLevel, setAgentAccessLevel] = useState<AgentAccessLevel>(\n sessionContext\n ? AgentAccessLevel.WRITE_YOUR_PRIVATE_DATA\n : AgentAccessLevel.PUBLICLY_ACCESSIBLE,\n )\n\n const internalChatState = useChatState(agentSession, onChatResponse)\n const chatState = externalChatState ?? internalChatState\n const { interactions, isAwaitingResponse, sendChat } = chatState\n\n const showGreeting = variant === 'curie' && interactions.length === 0\n\n const curieAccessLevelSuffix =\n variant === 'curie' ? CURIE_ACCESS_LEVEL_SUFFIX[agentAccessLevel] : ''\n const disclaimerText = baseDisclaimerText + curieAccessLevelSuffix\n\n // Only interactions added after this component instance mounted should play the entry\n // animation. Callers may lift state so history survives a `Dialog` closing, but the\n // `Dialog` unmounts its children, so every reopen would otherwise re-animate the whole\n // conversation.\n const presentAtMountRef = useRef<Set<string> \| undefined>(undefined)\n if (presentAtMountRef.current === undefined) {\n presentAtMountRef.current = new Set(interactions.map(i => i.id))\n }\n const presentAtMount = presentAtMountRef.current\n\n // Keep track of the text that the user is currently typing into the textfield\n const [userChatTextfieldValue, setUserChatTextfieldValue] = useState('')\n const [initialMessageProcessed, setInitialMessageProcessed] = useState(false)\n\n // A copy of the attachments sent with the last interaction, so it can still show rich\n // (name/type) chips after ChatInputArea has cleared its own attachment state. This is passed to\n // the last interaction for its entire lifetime -- sent, then processing, then completed -- as a\n // fallback filename source, since the request body (FileHandleAssociation) never carries a\n // filename and the server-resolved filename (attachmentStatuses) only arrives once the job\n // completes. It's simply overwritten on the next send.\n const [lastSentAttachments, setLastSentAttachments] = useState<\n ChatAttachment[]\n >([])\n\n // Restore chat session history, if exists.\n // TODO: currently only a single page is restored. Add support for multiple pages (and detect the user scrolling up to restore the next page of results older)\n // const {\n // data: sessionHistoryInfiniteData,\n // } = //, hasNextPage: hasMoreSessionHistory, fetchNextPage: fetchNextSessionHistoryPage, isLoading: isSessionHistoryLoading } =\n // useGetAgentChatSessionHistoryInfinite(\n // {\n // sessionId: agentSession?.sessionId,\n // },\n // {\n // enabled: !!agentSession,\n // },\n // )\n\n // const sessionHistory = useMemo(\n // () =>\n // sessionHistoryInfiniteData?.pages\n // .flatMap(page => page.page)\n // / Note: session history is ordered from most recent to least recent in each page, so reverse the order when restoring the chat interface /\n // .reverse() ?? [],\n // [sessionHistoryInfiniteData],\n // )\n\n useEffect(() => {\n // on mount, create a new agent session!\n if (createAgentSession && !agentSession) {\n createAgentSession({\n agentAccessLevel,\n agentRegistrationId,\n sessionContext,\n })\n }\n }, [\n createAgentSession,\n agentSession,\n accessToken,\n sessionContext,\n agentAccessLevel,\n agentRegistrationId,\n ])\n\n useEffect(() => {\n // on mount, resolve the initial message chat interaction (if set)\n if (agentSession && initialMessage && !initialMessageProcessed) {\n sendChat(initialMessage)\n setInitialMessageProcessed(true)\n }\n }, [agentSession, initialMessage, initialMessageProcessed, sendChat])\n\n const handleSend = (message: string, attachments: ChatAttachment[]) => {\n sendChat(\n message,\n attachments.length\n ? attachments.map(attachment => ({\n fileHandleId: attachment.fileHandleId,\n // The backend short-circuits the FileHandleAssociation auth check for a user's own\n // uploaded file handle, so associateObjectId/associateObjectType are not totally\n // accurate here. FileHandleAssociateType has no dedicated value for \"the uploader's\n // own bare file handle\", so this stubs associateObjectId to the fileHandleId itself\n // and the FileEntity associate type, which supports the short-circuit path.\n associateObjectId: attachment.fileHandleId,\n associateObjectType: FileHandleAssociateType.FileEntity,\n }))\n : undefined,\n )\n setUserChatTextfieldValue('')\n setLastSentAttachments(attachments)\n }\n\n if (createAgentSessionError) {\n // When an anonymous user can't start a session, the caller is redirecting them to log in, so\n // suppress the inline error in favor of that flow.\n const deferredToLogin =\n !isAuthenticated &&\n !!onSessionCreationUnauthenticated &&\n (createAgentSessionError.status === 401 \|\|\n createAgentSessionError.status === 403)\n if (!deferredToLogin) {\n return (\n <Alert severity={'error'} sx={{ my: 2 }}>\n {createAgentSessionError.reason}\n </Alert>\n )\n }\n }\n\n return (\n <Box\n sx={{\n display: 'flex',\n flexDirection: 'column',\n justifyContent: variant === 'curie' ? 'flex-start' : 'space-between',\n gap: variant === 'curie' ? '20px' : '0',\n maxWidth: '1100px',\n mx: 'auto',\n height: '100%',\n }}\n >\n {!hideTitle && (\n <Typography\n variant=\"headline1\"\n sx={{\n p: '20px',\n borderBottom: '1px solid',\n borderColor: 'grey.300',\n position: 'sticky',\n top: '0px',\n backgroundColor: 'white',\n zIndex: 1,\n }}\n >\n {chatbotName}\n </Typography>\n )}\n {showAccessLevelMenu && variant !== 'curie' && isAuthenticated && (\n <AccessLevelMenu\n initAccessLevel={agentAccessLevel}\n onChange={newAccessLevel => {\n setAgentAccessLevel(newAccessLevel)\n updateAgentSession({\n agentAccessLevel: newAccessLevel,\n sessionId: agentSession!.sessionId!,\n })\n }}\n />\n )}\n {!agentSession && <SkeletonParagraph numRows={10} />}\n {agentSession && (\n <Box\n sx={{\n flexGrow: 1,\n overflowY: 'auto',\n mb: variant === 'curie' ? 0 : 2,\n }}\n >\n <List\n sx={{\n flex: 1,\n overflowY: 'auto',\n pt: '20px',\n ...(variant === 'curie' && { pt: 0, pb: 0, gap: '20px' }),\n display: 'flex',\n flexDirection: 'column',\n ...(showGreeting && {\n minHeight: '100%',\n justifyContent: 'flex-end',\n }),\n }}\n >\n {/ {sessionHistory &&\n sessionHistory.map((interaction, index) => {\n return (\n <SynapseChatInteraction\n key={index}\n userMessage={interaction.usersRequestText}\n chatResponseText={interaction.agentResponseText}\n />\n )\n })} */}\n {showGreeting && (\n <ListItem\n sx={{\n display: 'grid',\n gridTemplateColumns: '50px auto',\n columnGap: '16px',\n justifyItems: 'start',\n alignItems: 'start',\n p: 0,\n }}\n >\n {resolvedAgentAvatar}\n <Typography sx={{ justifySelf: 'start', mt: '14px' }}>\n {CURIE_GREETING}\n </Typography>\n </ListItem>\n )}\n {interactions.map((interaction, index) => {\n const isLast = index === interactions.length - 1\n return (\n <SynapseChatMessage\n agentAvatar={resolvedAgentAvatar}\n userAvatar={userAvatar}\n key={interaction.id}\n userMessage={interaction.userMessage}\n chatJobId={interaction.jobId}\n showLoadingIcon={variant !== 'curie'}\n onSendChat={sendChat}\n scrollIntoView={isLast}\n animateEntry={!presentAtMount.has(interaction.id)}\n isAwaitingResponse={isAwaitingResponse}\n pendingAttachments={\n // Only one interaction can be in flight at a time (the composer is disabled\n // while isAwaitingResponse), so lastSentAttachments always corresponds to\n // whichever interaction is last.\n isLast ? lastSentAttachments : undefined\n }\n />\n )\n })}\n </List>\n </Box>\n )}\n <Box\n sx={{\n position: 'sticky',\n bottom: variant === 'curie' ? '0px' : textboxPositionOffset,\n backgroundColor: 'white',\n }}\n >\n {suggestedPrompts &&\n suggestedPrompts.length > 0 &&\n interactions.length === 0 && (\n <Stack\n direction=\"row\"\n spacing={1}\n sx={{ pt: '8px', flexWrap: 'wrap', gap: 1 }}\n >\n {suggestedPrompts.map(prompt => (\n <Chip\n key={prompt}\n label={prompt}\n variant=\"outlined\"\n onClick={() => setUserChatTextfieldValue(prompt)}\n disabled={!agentSession}\n sx={{ cursor: 'pointer' }}\n />\n ))}\n </Stack>\n )}\n <Box sx={{ mt: '5px' }}>\n <ChatInputArea\n value={userChatTextfieldValue}\n onValueChange={setUserChatTextfieldValue}\n onSend={handleSend}\n placeholder={\n variant === 'curie' ? 'Ask anything' : `Message ${chatbotName}`\n }\n disabled={!agentSession \|\| isAwaitingResponse}\n allowAttachments={allowAttachments}\n />\n </Box>\n </Box>\n <Typography variant=\"smallText1\" sx={{ pt: '8px', textAlign: 'center' }}>\n {disclaimerText}\n </Typography>\n </Box>\n )\n}\n\nexport default SynapseChat\n"],"mappings":"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"}
1	+ {"version":3,"file":"SynapseChat.js","names":[],"sources":["../../../src/components/SynapseChat/SynapseChat.tsx"],"sourcesContent":["import { ChatState, useChatState } from '@/components/SynapseChat/useChatState'\nimport {\n useCreateAgentSession,\n useUpdateAgentSession,\n} from '@/synapse-queries/chat/useChat'\nimport { useSynapseContext } from '@/utils'\nimport {\n Alert,\n Box,\n Chip,\n List,\n ListItem,\n Stack,\n Typography,\n} from '@mui/material'\nimport {\n AgentSession,\n FileHandleAssociateType,\n GridAgentSessionContext,\n} from '@sage-bionetworks/synapse-client'\nimport { AgentAccessLevel } from '@sage-bionetworks/synapse-types'\nimport { useEffect, useRef, useState } from 'react'\nimport { SkeletonParagraph } from '../Skeleton'\nimport { displayToast } from '../ToastMessage'\nimport AccessLevelMenu from './AccessLevelMenu'\nimport { ChatAttachment } from './utils/types'\nimport { ChatInputArea } from './components/ChatInputArea/ChatInputArea'\nimport SynapseChatMessage from './SynapseChatMessage'\nimport SmartToyTwoTone from '@mui/icons-material/SmartToyTwoTone'\nimport { UserCard } from '../UserCard/UserCard'\nimport { useApplicationSessionContext } from '@/utils/AppUtils'\nimport { ReactComponent as CurieAvatarHead } from '@/assets/illustrations/curie_avatar_head.svg'\n\nconst CURIE_GREETING = 'Hi! How can I help you today?'\n\nconst CURIE_ACCESS_LEVEL_SUFFIX: Record<AgentAccessLevel, string> = {\n [AgentAccessLevel.PUBLICLY_ACCESSIBLE]: ' and can only read public data.',\n [AgentAccessLevel.READ_YOUR_PRIVATE_DATA]:\n ' and can read your public and private data in Synapse on your behalf.',\n [AgentAccessLevel.WRITE_YOUR_PRIVATE_DATA]:\n ' and can read and write your public and private data in Synapse on your behalf.',\n}\n\nconst DEFAULT_AVATAR = (\n <Box\n sx={{\n p: '3px',\n borderRadius: '50%',\n borderStyle: 'solid',\n borderWidth: '1px',\n borderColor: 'grey.300',\n mt: '10px',\n height: '31px',\n }}\n >\n <SmartToyTwoTone sx={{ color: 'secondary.main' }} />\n </Box>\n)\n\nconst CURIE_AVATAR = (\n <Box\n sx={{\n mt: '10px',\n height: '30px',\n width: '30px',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n }}\n >\n <CurieAvatarHead />\n </Box>\n)\n\nexport type SynapseChatProps = {\n initialMessage?: string //optional initial message\n agentRegistrationId?: string // if provided, use this agent\n chatbotName?: string // optional name of this chatbot agent\n variant?: 'default' \| 'curie'\n hideTitle?: boolean\n textboxPositionOffset?: string // when embedded in a form, the textbox (form) stuck to the bottom may need to be offset due to container padding (dialog content for example!)\n /* optional session context for the agent session /\n sessionContext?: GridAgentSessionContext\n / The current session, if state is lifted out of this component /\n externalSession?: AgentSession\n / A callback invoked to bootstrap the current session, if state is to be lifted out of this component /\n setExternalSession?: (s: AgentSession \| undefined) => void\n / The current chat history, if state is lifted out of this component /\n externalChatState?: ChatState\n // default access level for the agent session.\n defaultAgentAccessLevel?: AgentAccessLevel\n // Whether to show the access level menu for the agent session.\n showAccessLevelMenu?: boolean\n /\n Optional callback invoked once when a chat response is received from the server.\n * Use this for side effects such as navigation based on the response content.\n * Called in the mutation onSuccess handler so it runs exactly once per response.\n /\n onChatResponse?: (responseText: string) => void\n /* Optional list of prompt suggestions shown as clickable pills above the text input /\n suggestedPrompts?: string[]\n /* Optional custom avatar for the chatbot agent /\n agentAvatar?: React.ReactNode\n /\n Whether to allow the user to attach local files to their chat message.\n * @default false\n /\n allowAttachments?: boolean\n /\n Invoked when creating the agent session fails because the current (anonymous) user is not\n * authorized to start a session with this agent. Callers should use this to prompt the user to\n * log in. When omitted, the session creation error is shown inline instead.\n /\n onSessionCreationUnauthenticated?: () => void\n}\n\nexport function SynapseChat({\n initialMessage,\n agentRegistrationId,\n chatbotName = 'SynapseChat',\n variant = 'default',\n agentAvatar,\n hideTitle = false,\n textboxPositionOffset = '0px',\n sessionContext,\n externalSession,\n setExternalSession,\n externalChatState,\n showAccessLevelMenu = true,\n onChatResponse,\n suggestedPrompts,\n allowAttachments = false,\n onSessionCreationUnauthenticated,\n}: SynapseChatProps) {\n const { accessToken, isAuthenticated } = useSynapseContext()\n const { userId } = useApplicationSessionContext()\n\n const baseDisclaimerText = chatbotName + ' can make mistakes'\n\n const resolvedAgentAvatar =\n agentAvatar ?? (variant === 'curie' ? CURIE_AVATAR : DEFAULT_AVATAR)\n\n const userAvatar = (\n <UserCard ownerId={userId} size=\"AVATAR\" avatarSize=\"MEDIUM\" />\n )\n const [localAgentSession, setLocalAgentSession] = useState<AgentSession>()\n const agentSession = externalSession ?? localAgentSession\n const setAgentSession = setExternalSession ?? setLocalAgentSession\n\n const { mutate: createAgentSession, error: createAgentSessionError } =\n useCreateAgentSession({\n onSuccess: newAgentSession => setAgentSession(newAgentSession),\n onError: err => {\n // A registration that the ACT has not opened to anonymous chat rejects an anonymous\n // session with a 401/403. Defer to the caller to prompt the user to log in.\n if (!isAuthenticated && (err.status === 401 \|\| err.status === 403)) {\n onSessionCreationUnauthenticated?.()\n }\n },\n })\n\n const { mutate: updateAgentSession } = useUpdateAgentSession({\n onSuccess: updatedAgentSession => setAgentSession(updatedAgentSession),\n onError: err =>\n displayToast(\n `Unable to update the agent session: ${err.message}`,\n 'danger',\n ),\n })\n const [agentAccessLevel, setAgentAccessLevel] = useState<AgentAccessLevel>(\n sessionContext\n ? AgentAccessLevel.WRITE_YOUR_PRIVATE_DATA\n : AgentAccessLevel.PUBLICLY_ACCESSIBLE,\n )\n\n const internalChatState = useChatState(agentSession, onChatResponse)\n const chatState = externalChatState ?? internalChatState\n const { interactions, isAwaitingResponse, sendChat } = chatState\n\n const showGreeting = variant === 'curie' && interactions.length === 0\n\n const curieAccessLevelSuffix =\n variant === 'curie' ? CURIE_ACCESS_LEVEL_SUFFIX[agentAccessLevel] : ''\n const disclaimerText = baseDisclaimerText + curieAccessLevelSuffix\n\n // Only interactions added after this component instance mounted should play the entry\n // animation. Callers may lift state so history survives a `Dialog` closing, but the\n // `Dialog` unmounts its children, so every reopen would otherwise re-animate the whole\n // conversation.\n const presentAtMountRef = useRef<Set<string> \| undefined>(undefined)\n if (presentAtMountRef.current === undefined) {\n presentAtMountRef.current = new Set(interactions.map(i => i.id))\n }\n const presentAtMount = presentAtMountRef.current\n\n // Keep track of the text that the user is currently typing into the textfield\n const [userChatTextfieldValue, setUserChatTextfieldValue] = useState('')\n const [initialMessageProcessed, setInitialMessageProcessed] = useState(false)\n\n // A copy of the attachments sent with the last interaction, so it can still show rich\n // (name/type) chips after ChatInputArea has cleared its own attachment state. This is passed to\n // the last interaction for its entire lifetime -- sent, then processing, then completed -- as a\n // fallback filename source, since the request body (FileHandleAssociation) never carries a\n // filename and the server-resolved filename (attachmentStatuses) only arrives once the job\n // completes. It's simply overwritten on the next send.\n const [lastSentAttachments, setLastSentAttachments] = useState<\n ChatAttachment[]\n >([])\n\n // Restore chat session history, if exists.\n // TODO: currently only a single page is restored. Add support for multiple pages (and detect the user scrolling up to restore the next page of results older)\n // const {\n // data: sessionHistoryInfiniteData,\n // } = //, hasNextPage: hasMoreSessionHistory, fetchNextPage: fetchNextSessionHistoryPage, isLoading: isSessionHistoryLoading } =\n // useGetAgentChatSessionHistoryInfinite(\n // {\n // sessionId: agentSession?.sessionId,\n // },\n // {\n // enabled: !!agentSession,\n // },\n // )\n\n // const sessionHistory = useMemo(\n // () =>\n // sessionHistoryInfiniteData?.pages\n // .flatMap(page => page.page)\n // / Note: session history is ordered from most recent to least recent in each page, so reverse the order when restoring the chat interface /\n // .reverse() ?? [],\n // [sessionHistoryInfiniteData],\n // )\n\n useEffect(() => {\n // on mount, create a new agent session!\n if (createAgentSession && !agentSession) {\n createAgentSession({\n agentAccessLevel,\n agentRegistrationId,\n sessionContext,\n })\n }\n }, [\n createAgentSession,\n agentSession,\n accessToken,\n sessionContext,\n agentAccessLevel,\n agentRegistrationId,\n ])\n\n useEffect(() => {\n // on mount, resolve the initial message chat interaction (if set)\n if (agentSession && initialMessage && !initialMessageProcessed) {\n sendChat(initialMessage)\n setInitialMessageProcessed(true)\n }\n }, [agentSession, initialMessage, initialMessageProcessed, sendChat])\n\n const handleSend = (message: string, attachments: ChatAttachment[]) => {\n sendChat(\n message,\n attachments.length\n ? attachments.map(attachment => ({\n fileHandleId: attachment.fileHandleId,\n // The backend short-circuits the FileHandleAssociation auth check for a user's own\n // uploaded file handle, so associateObjectId/associateObjectType are not totally\n // accurate here. FileHandleAssociateType has no dedicated value for \"the uploader's\n // own bare file handle\", so this stubs associateObjectId to the fileHandleId itself\n // and the FileEntity associate type, which supports the short-circuit path.\n associateObjectId: attachment.fileHandleId,\n associateObjectType: FileHandleAssociateType.FileEntity,\n }))\n : undefined,\n )\n setUserChatTextfieldValue('')\n setLastSentAttachments(attachments)\n }\n\n if (createAgentSessionError) {\n // When an anonymous user can't start a session, the caller is redirecting them to log in, so\n // suppress the inline error in favor of that flow.\n const deferredToLogin =\n !isAuthenticated &&\n !!onSessionCreationUnauthenticated &&\n (createAgentSessionError.status === 401 \|\|\n createAgentSessionError.status === 403)\n if (!deferredToLogin) {\n return (\n <Alert severity={'error'} sx={{ my: 2 }}>\n {createAgentSessionError.reason}\n </Alert>\n )\n }\n }\n\n return (\n <Box\n sx={{\n display: 'flex',\n flexDirection: 'column',\n justifyContent: variant === 'curie' ? 'flex-start' : 'space-between',\n gap: variant === 'curie' ? '20px' : '0',\n maxWidth: '1100px',\n mx: 'auto',\n height: '100%',\n }}\n >\n {!hideTitle && (\n <Typography\n variant=\"headline1\"\n sx={{\n p: '20px',\n borderBottom: '1px solid',\n borderColor: 'grey.300',\n position: 'sticky',\n top: '0px',\n backgroundColor: 'white',\n zIndex: 1,\n }}\n >\n {chatbotName}\n </Typography>\n )}\n {showAccessLevelMenu && variant !== 'curie' && isAuthenticated && (\n <AccessLevelMenu\n initAccessLevel={agentAccessLevel}\n onChange={newAccessLevel => {\n setAgentAccessLevel(newAccessLevel)\n updateAgentSession({\n agentAccessLevel: newAccessLevel,\n sessionId: agentSession!.sessionId!,\n })\n }}\n />\n )}\n {!agentSession && <SkeletonParagraph numRows={10} />}\n {agentSession && (\n <Box\n sx={{\n flexGrow: 1,\n overflowY: 'auto',\n mb: variant === 'curie' ? 0 : 2,\n }}\n >\n <List\n sx={{\n flex: 1,\n overflowY: 'auto',\n pt: '20px',\n ...(variant === 'curie' && { pt: 0, pb: 0, gap: '20px' }),\n display: 'flex',\n flexDirection: 'column',\n ...(showGreeting && {\n minHeight: '100%',\n justifyContent: 'flex-end',\n }),\n }}\n >\n {/ {sessionHistory &&\n sessionHistory.map((interaction, index) => {\n return (\n <SynapseChatInteraction\n key={index}\n userMessage={interaction.usersRequestText}\n chatResponseText={interaction.agentResponseText}\n />\n )\n })} */}\n {showGreeting && (\n <ListItem\n sx={{\n display: 'grid',\n gridTemplateColumns: '50px auto',\n columnGap: '16px',\n justifyItems: 'start',\n alignItems: 'start',\n p: 0,\n }}\n >\n {resolvedAgentAvatar}\n <Typography sx={{ justifySelf: 'start', mt: '14px' }}>\n {CURIE_GREETING}\n </Typography>\n </ListItem>\n )}\n {interactions.map((interaction, index) => {\n const isLast = index === interactions.length - 1\n return (\n <SynapseChatMessage\n agentAvatar={resolvedAgentAvatar}\n userAvatar={userAvatar}\n key={interaction.id}\n userMessage={interaction.userMessage}\n chatJobId={interaction.jobId}\n showLoadingIcon={variant !== 'curie'}\n onSendChat={sendChat}\n scrollIntoView={isLast}\n animateEntry={!presentAtMount.has(interaction.id)}\n isAwaitingResponse={isAwaitingResponse}\n pendingAttachments={\n // Only one interaction can be in flight at a time (the composer is disabled\n // while isAwaitingResponse), so lastSentAttachments always corresponds to\n // whichever interaction is last.\n isLast ? lastSentAttachments : undefined\n }\n />\n )\n })}\n </List>\n </Box>\n )}\n <Box\n sx={{\n position: 'sticky',\n bottom: variant === 'curie' ? '0px' : textboxPositionOffset,\n backgroundColor: 'white',\n }}\n >\n {suggestedPrompts &&\n suggestedPrompts.length > 0 &&\n interactions.length === 0 && (\n <Stack\n direction=\"row\"\n spacing={1}\n sx={{ pt: '8px', flexWrap: 'wrap', gap: 1 }}\n >\n {suggestedPrompts.map(prompt => (\n <Chip\n key={prompt}\n label={prompt}\n variant=\"outlined\"\n onClick={() => setUserChatTextfieldValue(prompt)}\n disabled={!agentSession}\n sx={{ cursor: 'pointer' }}\n />\n ))}\n </Stack>\n )}\n <Box sx={{ mt: '5px' }}>\n <ChatInputArea\n value={userChatTextfieldValue}\n onValueChange={setUserChatTextfieldValue}\n onSend={handleSend}\n placeholder={\n variant === 'curie' ? 'Ask anything' : `Message ${chatbotName}`\n }\n disabled={!agentSession \|\| isAwaitingResponse}\n allowAttachments={allowAttachments}\n />\n </Box>\n </Box>\n <Typography variant=\"smallText1\" sx={{ pt: '8px', textAlign: 'center' }}>\n {disclaimerText}\n </Typography>\n </Box>\n )\n}\n\nexport default SynapseChat\n"],"mappings":"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"}

package/dist/components/SynapseChat/SynapseChatInteraction.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SynapseChatInteraction.d.ts","sourceRoot":"","sources":["../../../src/components/SynapseChat/SynapseChatInteraction.tsx"],"names":[],"mappings":"~~AAiBA~~,OAAO,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAA;AAQ5D,OAAO,EAAE,yBAAyB,EAAE,MAAM,kCAAkC,CAAA;AAE5E;;;;;GAKG;AACH,MAAM,MAAM,gCAAgC,GAAG;IAC7C,YAAY,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB,CAAA;AAED,MAAM,MAAM,2BAA2B,GAAG;IACxC,WAAW,EAAE,MAAM,CAAA;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,iBAAiB,CAAC,EAAE,UAAU,EAAE,CAAA;IAChC,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;IACtC,WAAW,EAAE,KAAK,CAAC,SAAS,CAAA;IAC5B,UAAU,EAAE,KAAK,CAAC,SAAS,CAAA;IAC3B,sFAAsF;IACtF,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,6GAA6G;IAC7G,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,2DAA2D;IAC3D,WAAW,CAAC,EAAE,gCAAgC,EAAE,CAAA;IAChD,sHAAsH;IACtH,kBAAkB,CAAC,EAAE,yBAAyB,EAAE,CAAA;IAChD,gFAAgF;IAChF,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B,CAAA;AAqBD,wBAAgB,sBAAsB,CAAC,EACrC,WAAW,EACX,gBAAgB,EAChB,eAAe,EACf,iBAAiB,EACjB,cAAsB,EACtB,UAAU,EACV,WAAW,EACX,UAAU,EACV,YAAoB,EACpB,kBAA0B,EAC1B,WAAW,EACX,kBAAkB,EAClB,eAAsB,GACvB,EAAE,2BAA2B,2CAqP7B;AAED,eAAe,sBAAsB,CAAA"}
1	+ {"version":3,"file":"SynapseChatInteraction.d.ts","sourceRoot":"","sources":["../../../src/components/SynapseChat/SynapseChatInteraction.tsx"],"names":[],"mappings":"AAkBA,OAAO,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAA;AAQ5D,OAAO,EAAE,yBAAyB,EAAE,MAAM,kCAAkC,CAAA;AAE5E;;;;;GAKG;AACH,MAAM,MAAM,gCAAgC,GAAG;IAC7C,YAAY,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB,CAAA;AAED,MAAM,MAAM,2BAA2B,GAAG;IACxC,WAAW,EAAE,MAAM,CAAA;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,iBAAiB,CAAC,EAAE,UAAU,EAAE,CAAA;IAChC,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;IACtC,WAAW,EAAE,KAAK,CAAC,SAAS,CAAA;IAC5B,UAAU,EAAE,KAAK,CAAC,SAAS,CAAA;IAC3B,sFAAsF;IACtF,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,6GAA6G;IAC7G,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,2DAA2D;IAC3D,WAAW,CAAC,EAAE,gCAAgC,EAAE,CAAA;IAChD,sHAAsH;IACtH,kBAAkB,CAAC,EAAE,yBAAyB,EAAE,CAAA;IAChD,gFAAgF;IAChF,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B,CAAA;AAqBD,wBAAgB,sBAAsB,CAAC,EACrC,WAAW,EACX,gBAAgB,EAChB,eAAe,EACf,iBAAiB,EACjB,cAAsB,EACtB,UAAU,EACV,WAAW,EACX,UAAU,EACV,YAAoB,EACpB,kBAA0B,EAC1B,WAAW,EACX,kBAAkB,EAClB,eAAsB,GACvB,EAAE,2BAA2B,2CAqP7B;AAED,eAAe,sBAAsB,CAAA"}

package/dist/components/SynapseChat/SynapseChatInteraction.js CHANGED Viewed

@@ -6,7 +6,8 @@ import i from "./SynapseChatInteraction.module.js";
 import { useEffect as a, useMemo as o, useRef as s, useState as c } from "react";
 import { Alert as l, Box as u, Button as d, Chip as f, Collapse as p, ListItem as m, ListItemText as h, Stack as g, Tooltip as _, useTheme as v } from "@mui/material";
 import { Fragment as y, jsx as b, jsxs as x } from "react/jsx-runtime";
-import { KeyboardArrowDown as S, KeyboardArrowRight as C } from "@mui/icons-material";
+import S from "@mui/icons-material/KeyboardArrowDown";
+import C from "@mui/icons-material/KeyboardArrowRight";
 //#region src/components/SynapseChat/SynapseChatInteraction.tsx
 function w(e) {
 	return "reasoningText" in e ? e.reasoningText : "";

package/dist/components/SynapseChat/SynapseChatInteraction.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SynapseChatInteraction.js","names":[],"sources":["../../../src/components/SynapseChat/SynapseChatInteraction.tsx"],"sourcesContent":["import { SynapseSpinner } from '@/components/LoadingScreen/LoadingScreen'\nimport extractMessageFromTraceEvent, {\n TraceMessage,\n} from '@/components/SynapseChat/extractMessageFromTraceEvent'\nimport { KeyboardArrowDown, KeyboardArrowRight } from '@mui/icons-material'\nimport {\n Alert,\n Box,\n Button,\n Chip,\n Collapse,\n ListItem,\n ListItemText,\n Stack,\n Tooltip,\n useTheme,\n} from '@mui/material'\nimport { TraceEvent } from '@sage-bionetworks/synapse-types'\nimport { useEffect, useMemo, useRef, useState } from 'react'\nimport MarkdownSynapse from '../Markdown/MarkdownSynapse'\nimport styles from './SynapseChatInteraction.module.scss'\nimport {\n AttachmentStripItem,\n ChatAttachmentStrip,\n} from './components/ChatAttachmentStrip/ChatAttachmentStrip'\nimport { AgentChatAttachmentStatus } from '@sage-bionetworks/synapse-client'\n\n/*\n A chat attachment to display on a sent/pending turn. Only `fileHandleId` is guaranteed --\n * `fileName`/`contentType` are omitted for a turn restored from history, where only the\n * fileHandleId that was sent to the server is known, with no in-session upload record to fall\n * back on (see SynapseChatMessage).\n /\nexport type SynapseChatInteractionAttachment = {\n fileHandleId: string\n fileName?: string\n contentType?: string\n}\n\nexport type SynapseChatInteractionProps = {\n userMessage: string\n chatResponseText?: string\n chatResponseTrace?: TraceEvent[]\n scrollIntoView?: boolean\n chatErrorReason?: string\n onSendChat?: (message: string) => void\n agentAvatar: React.ReactNode\n userAvatar: React.ReactNode\n /* Whether to play the fade/rise-in entry animation for this interaction on mount. /\n animateEntry?: boolean\n /* Whether a turn is currently in flight; gates the guide-prompt chips so they can't bypass the composer. /\n isAwaitingResponse?: boolean\n /* Attachments the user sent with this message, if any. /\n attachments?: SynapseChatInteractionAttachment[]\n /* Server-reported outcome of staging each attachment, if available (see AgentChatResponseWithAttachmentStatuses). /\n attachmentStatuses?: AgentChatAttachmentStatus[]\n /* Whether to show the loading spinner icon while the response is in flight. /\n showLoadingIcon?: boolean\n}\n\n// Show tool calls in the trace. Useful for development. We may want to show them to users in the future.\nconst SHOW_TOOL_USE = false\n\nfunction getMarkdownForTraceMessage(traceMessage: TraceMessage): string {\n if ('reasoningText' in traceMessage) {\n return traceMessage.reasoningText\n }\n if (SHOW_TOOL_USE && 'toolName' in traceMessage) {\n return `Tool Used:* \\`${\n traceMessage.toolName\n }\\`\\n\\nTool Input:\\n\\`\\`\\`json\\n${JSON.stringify(\n traceMessage.toolInput,\n null,\n 2,\n )}\\n\\`\\`\\`\\n`\n }\n return ''\n}\n\nexport function SynapseChatInteraction({\n userMessage,\n chatResponseText,\n chatErrorReason,\n chatResponseTrace,\n scrollIntoView = false,\n onSendChat,\n agentAvatar,\n userAvatar,\n animateEntry = false,\n isAwaitingResponse = false,\n attachments,\n attachmentStatuses,\n showLoadingIcon = true,\n}: SynapseChatInteractionProps) {\n const theme = useTheme()\n const userMessageRef = useRef<HTMLLIElement \| null>(null)\n const responseRef = useRef<HTMLLIElement \| null>(null)\n const [showTrace, setShowTrace] = useState(false)\n\n const isLoading = !chatResponseText && !chatErrorReason\n\n useEffect(() => {\n // on mount, scroll into view if instructed. This brings the \"Thinking...\" row to the top so\n // the answer's opening lines are usually visible as soon as it starts streaming in.\n if (scrollIntoView) {\n userMessageRef.current?.scrollIntoView({ behavior: 'smooth' })\n }\n }, [scrollIntoView])\n\n useEffect(() => {\n // once the response (or an error) arrives, scroll all the way to the bottom so the full\n // answer - which may be taller than the viewport - is brought into view.\n if (scrollIntoView && !isLoading) {\n responseRef.current?.scrollIntoView({ behavior: 'smooth', block: 'end' })\n }\n }, [scrollIntoView, isLoading])\n\n const traceMessages = useMemo(\n () =>\n (chatResponseTrace ?? [])\n .flatMap(traceEvent => extractMessageFromTraceEvent(traceEvent))\n ?.filter(trace => !!trace),\n [chatResponseTrace],\n )\n\n const hasTraceInfo = traceMessages.length > 0\n\n const lastReasoningMessage = useMemo(\n () => traceMessages.filter(trace => 'reasoningText' in trace).at(-1),\n [traceMessages],\n )\n\n const traceButtonLoadingText =\n lastReasoningMessage == null\n ? 'Thinking...'\n : lastReasoningMessage.reasoningText\n\n const traceButtonText = isLoading\n ? traceButtonLoadingText\n : `${showTrace ? 'Hide' : 'Show'} Trace`\n\n const { textContent, guidePrompts } = useMemo(() => {\n try {\n const parser = new DOMParser()\n const doc = parser.parseFromString(chatResponseText ?? '', 'text/html')\n\n // Remove tool_name and actions elements (AI XML tags not for display)\n doc\n .querySelectorAll('tool_name, actions')\n .forEach(element => element.remove())\n\n // Extract guideprompts before removing them\n const extractedGuidePrompts = Array.from(\n doc.querySelectorAll('guideprompt'),\n )\n .map(el => el.textContent?.trim())\n .filter((t): t is string => !!t)\n\n // Remove guideprompt elements\n doc.querySelectorAll('guideprompt').forEach(element => element.remove())\n\n // Extract text from <chat> element if present, otherwise use full body text\n const chatElement = doc.querySelector('chat')\n return {\n textContent: chatElement\n ? (chatElement.textContent ?? '')\n : (doc.body.textContent ?? ''),\n guidePrompts: extractedGuidePrompts,\n }\n } catch (e) {\n console.error(e)\n return { textContent: chatResponseText ?? '', guidePrompts: [] }\n }\n }, [chatResponseText])\n\n const attachmentItems: AttachmentStripItem[] = useMemo(\n () =>\n (attachments ?? []).map(attachment => {\n const status = attachmentStatuses?.find(\n s => s.fileHandleId === attachment.fileHandleId,\n )\n return {\n fileHandleId: attachment.fileHandleId,\n label: attachment.fileName ?? attachment.fileHandleId,\n contentType: attachment.contentType,\n status: status?.status === 'FAILED' ? 'failed' : 'default',\n errorMessage: status?.failureMessage,\n }\n }),\n [attachments, attachmentStatuses],\n )\n\n return (\n <>\n <ListItem\n ref={userMessageRef}\n sx={{\n alignSelf: 'flex-end',\n maxWidth: '82%',\n mb: '5px',\n wordWrap: 'break-word',\n width: 'auto',\n display: 'grid',\n gridTemplateColumns: 'auto auto',\n columnGap: '16px',\n alignItems: 'start',\n justifyItems: 'end',\n }}\n >\n <Box\n className={animateEntry ? styles.entryAnimation : undefined}\n sx={{\n p: '4px 14px',\n backgroundColor: '#F3F6F7',\n borderRadius: '8px',\n }}\n >\n <ListItemText primary={userMessage} />\n </Box>\n <Box sx={{ marginTop: '4px' }}>{userAvatar}</Box>\n </ListItem>\n {attachmentItems.length > 0 && (\n <ListItem sx={{ display: 'block', p: '0px', mb: '5px' }}>\n <ChatAttachmentStrip items={attachmentItems} wrap />\n </ListItem>\n )}\n <ListItem\n ref={responseRef}\n sx={{\n display: 'grid',\n gridTemplateColumns: '50px auto',\n columnGap: '16px',\n justifyItems: 'center',\n alignItems: 'start',\n p: '0px',\n padding: '10px',\n }}\n >\n {agentAvatar}\n <Box\n sx={{\n borderRadius: '10px',\n maxWidth: '100%',\n overflow: 'auto',\n }}\n >\n <Box\n component={'aside'}\n sx={{\n '.markdown': {\n fontStyle: 'italic',\n borderLeft: `4px solid ${theme.palette.grey[300]}`,\n marginLeft: '4px',\n paddingLeft: '8px',\n mt: 1,\n mb: 2,\n },\n }}\n >\n <Button\n variant={'outlined'}\n size={'small'}\n startIcon={\n isLoading ? (\n showLoadingIcon ? (\n <SynapseSpinner size={14} />\n ) : undefined\n ) : showTrace ? (\n <KeyboardArrowDown sx={{ width: '14px' }} />\n ) : (\n <KeyboardArrowRight sx={{ width: '14px' }} />\n )\n }\n disabled={!hasTraceInfo}\n onClick={() => {\n setShowTrace(v => !v)\n }}\n sx={{\n height: '20px',\n fontSize: '12px',\n fontWeight: 600,\n mb: 1,\n border: 'none !important',\n color: 'grey.700',\n justifyContent: 'flex-start',\n whiteSpace: 'nowrap',\n maxWidth: '325px',\n textTransform: 'none',\n pl: 0,\n '.MuiButton-startIcon': { mr: 0.5 },\n }}\n >\n <Box sx={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>\n {traceButtonText}\n </Box>\n </Button>\n {chatResponseTrace && (\n <Collapse in={showTrace}>\n <MarkdownSynapse\n markdown={traceMessages\n .map(getMarkdownForTraceMessage)\n .filter(md => md.trim().length > 0)\n .join('<br/><br/>')}\n />\n </Collapse>\n )}\n </Box>\n {(textContent \|\| (onSendChat && guidePrompts.length > 0)) && (\n <Box className={animateEntry ? styles.entryAnimation : undefined}>\n {textContent && <MarkdownSynapse markdown={textContent} />}\n {onSendChat && guidePrompts.length > 0 && (\n <Stack direction=\"row\" flexWrap=\"wrap\" gap={1} mt={1}>\n {guidePrompts.map(prompt => (\n <Tooltip key={prompt} title={prompt}>\n <Chip\n label={prompt}\n variant=\"outlined\"\n color=\"primary\"\n clickable\n disabled={isAwaitingResponse}\n onClick={() => onSendChat(prompt)}\n sx={{ maxWidth: 200 }}\n />\n </Tooltip>\n ))}\n </Stack>\n )}\n </Box>\n )}\n </Box>\n </ListItem>\n {chatErrorReason && (\n <Alert severity={'error'} sx={{ my: 2 }}>\n {chatErrorReason}\n </Alert>\n )}\n </>\n )\n}\n\nexport default SynapseChatInteraction\n"],"mappings":"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"}
1	+ {"version":3,"file":"SynapseChatInteraction.js","names":[],"sources":["../../../src/components/SynapseChat/SynapseChatInteraction.tsx"],"sourcesContent":["import { SynapseSpinner } from '@/components/LoadingScreen/LoadingScreen'\nimport extractMessageFromTraceEvent, {\n TraceMessage,\n} from '@/components/SynapseChat/extractMessageFromTraceEvent'\nimport KeyboardArrowDown from '@mui/icons-material/KeyboardArrowDown'\nimport KeyboardArrowRight from '@mui/icons-material/KeyboardArrowRight'\nimport {\n Alert,\n Box,\n Button,\n Chip,\n Collapse,\n ListItem,\n ListItemText,\n Stack,\n Tooltip,\n useTheme,\n} from '@mui/material'\nimport { TraceEvent } from '@sage-bionetworks/synapse-types'\nimport { useEffect, useMemo, useRef, useState } from 'react'\nimport MarkdownSynapse from '../Markdown/MarkdownSynapse'\nimport styles from './SynapseChatInteraction.module.scss'\nimport {\n AttachmentStripItem,\n ChatAttachmentStrip,\n} from './components/ChatAttachmentStrip/ChatAttachmentStrip'\nimport { AgentChatAttachmentStatus } from '@sage-bionetworks/synapse-client'\n\n/*\n A chat attachment to display on a sent/pending turn. Only `fileHandleId` is guaranteed --\n * `fileName`/`contentType` are omitted for a turn restored from history, where only the\n * fileHandleId that was sent to the server is known, with no in-session upload record to fall\n * back on (see SynapseChatMessage).\n /\nexport type SynapseChatInteractionAttachment = {\n fileHandleId: string\n fileName?: string\n contentType?: string\n}\n\nexport type SynapseChatInteractionProps = {\n userMessage: string\n chatResponseText?: string\n chatResponseTrace?: TraceEvent[]\n scrollIntoView?: boolean\n chatErrorReason?: string\n onSendChat?: (message: string) => void\n agentAvatar: React.ReactNode\n userAvatar: React.ReactNode\n /* Whether to play the fade/rise-in entry animation for this interaction on mount. /\n animateEntry?: boolean\n /* Whether a turn is currently in flight; gates the guide-prompt chips so they can't bypass the composer. /\n isAwaitingResponse?: boolean\n /* Attachments the user sent with this message, if any. /\n attachments?: SynapseChatInteractionAttachment[]\n /* Server-reported outcome of staging each attachment, if available (see AgentChatResponseWithAttachmentStatuses). /\n attachmentStatuses?: AgentChatAttachmentStatus[]\n /* Whether to show the loading spinner icon while the response is in flight. /\n showLoadingIcon?: boolean\n}\n\n// Show tool calls in the trace. Useful for development. We may want to show them to users in the future.\nconst SHOW_TOOL_USE = false\n\nfunction getMarkdownForTraceMessage(traceMessage: TraceMessage): string {\n if ('reasoningText' in traceMessage) {\n return traceMessage.reasoningText\n }\n if (SHOW_TOOL_USE && 'toolName' in traceMessage) {\n return `Tool Used:* \\`${\n traceMessage.toolName\n }\\`\\n\\nTool Input:\\n\\`\\`\\`json\\n${JSON.stringify(\n traceMessage.toolInput,\n null,\n 2,\n )}\\n\\`\\`\\`\\n`\n }\n return ''\n}\n\nexport function SynapseChatInteraction({\n userMessage,\n chatResponseText,\n chatErrorReason,\n chatResponseTrace,\n scrollIntoView = false,\n onSendChat,\n agentAvatar,\n userAvatar,\n animateEntry = false,\n isAwaitingResponse = false,\n attachments,\n attachmentStatuses,\n showLoadingIcon = true,\n}: SynapseChatInteractionProps) {\n const theme = useTheme()\n const userMessageRef = useRef<HTMLLIElement \| null>(null)\n const responseRef = useRef<HTMLLIElement \| null>(null)\n const [showTrace, setShowTrace] = useState(false)\n\n const isLoading = !chatResponseText && !chatErrorReason\n\n useEffect(() => {\n // on mount, scroll into view if instructed. This brings the \"Thinking...\" row to the top so\n // the answer's opening lines are usually visible as soon as it starts streaming in.\n if (scrollIntoView) {\n userMessageRef.current?.scrollIntoView({ behavior: 'smooth' })\n }\n }, [scrollIntoView])\n\n useEffect(() => {\n // once the response (or an error) arrives, scroll all the way to the bottom so the full\n // answer - which may be taller than the viewport - is brought into view.\n if (scrollIntoView && !isLoading) {\n responseRef.current?.scrollIntoView({ behavior: 'smooth', block: 'end' })\n }\n }, [scrollIntoView, isLoading])\n\n const traceMessages = useMemo(\n () =>\n (chatResponseTrace ?? [])\n .flatMap(traceEvent => extractMessageFromTraceEvent(traceEvent))\n ?.filter(trace => !!trace),\n [chatResponseTrace],\n )\n\n const hasTraceInfo = traceMessages.length > 0\n\n const lastReasoningMessage = useMemo(\n () => traceMessages.filter(trace => 'reasoningText' in trace).at(-1),\n [traceMessages],\n )\n\n const traceButtonLoadingText =\n lastReasoningMessage == null\n ? 'Thinking...'\n : lastReasoningMessage.reasoningText\n\n const traceButtonText = isLoading\n ? traceButtonLoadingText\n : `${showTrace ? 'Hide' : 'Show'} Trace`\n\n const { textContent, guidePrompts } = useMemo(() => {\n try {\n const parser = new DOMParser()\n const doc = parser.parseFromString(chatResponseText ?? '', 'text/html')\n\n // Remove tool_name and actions elements (AI XML tags not for display)\n doc\n .querySelectorAll('tool_name, actions')\n .forEach(element => element.remove())\n\n // Extract guideprompts before removing them\n const extractedGuidePrompts = Array.from(\n doc.querySelectorAll('guideprompt'),\n )\n .map(el => el.textContent?.trim())\n .filter((t): t is string => !!t)\n\n // Remove guideprompt elements\n doc.querySelectorAll('guideprompt').forEach(element => element.remove())\n\n // Extract text from <chat> element if present, otherwise use full body text\n const chatElement = doc.querySelector('chat')\n return {\n textContent: chatElement\n ? (chatElement.textContent ?? '')\n : (doc.body.textContent ?? ''),\n guidePrompts: extractedGuidePrompts,\n }\n } catch (e) {\n console.error(e)\n return { textContent: chatResponseText ?? '', guidePrompts: [] }\n }\n }, [chatResponseText])\n\n const attachmentItems: AttachmentStripItem[] = useMemo(\n () =>\n (attachments ?? []).map(attachment => {\n const status = attachmentStatuses?.find(\n s => s.fileHandleId === attachment.fileHandleId,\n )\n return {\n fileHandleId: attachment.fileHandleId,\n label: attachment.fileName ?? attachment.fileHandleId,\n contentType: attachment.contentType,\n status: status?.status === 'FAILED' ? 'failed' : 'default',\n errorMessage: status?.failureMessage,\n }\n }),\n [attachments, attachmentStatuses],\n )\n\n return (\n <>\n <ListItem\n ref={userMessageRef}\n sx={{\n alignSelf: 'flex-end',\n maxWidth: '82%',\n mb: '5px',\n wordWrap: 'break-word',\n width: 'auto',\n display: 'grid',\n gridTemplateColumns: 'auto auto',\n columnGap: '16px',\n alignItems: 'start',\n justifyItems: 'end',\n }}\n >\n <Box\n className={animateEntry ? styles.entryAnimation : undefined}\n sx={{\n p: '4px 14px',\n backgroundColor: '#F3F6F7',\n borderRadius: '8px',\n }}\n >\n <ListItemText primary={userMessage} />\n </Box>\n <Box sx={{ marginTop: '4px' }}>{userAvatar}</Box>\n </ListItem>\n {attachmentItems.length > 0 && (\n <ListItem sx={{ display: 'block', p: '0px', mb: '5px' }}>\n <ChatAttachmentStrip items={attachmentItems} wrap />\n </ListItem>\n )}\n <ListItem\n ref={responseRef}\n sx={{\n display: 'grid',\n gridTemplateColumns: '50px auto',\n columnGap: '16px',\n justifyItems: 'center',\n alignItems: 'start',\n p: '0px',\n padding: '10px',\n }}\n >\n {agentAvatar}\n <Box\n sx={{\n borderRadius: '10px',\n maxWidth: '100%',\n overflow: 'auto',\n }}\n >\n <Box\n component={'aside'}\n sx={{\n '.markdown': {\n fontStyle: 'italic',\n borderLeft: `4px solid ${theme.palette.grey[300]}`,\n marginLeft: '4px',\n paddingLeft: '8px',\n mt: 1,\n mb: 2,\n },\n }}\n >\n <Button\n variant={'outlined'}\n size={'small'}\n startIcon={\n isLoading ? (\n showLoadingIcon ? (\n <SynapseSpinner size={14} />\n ) : undefined\n ) : showTrace ? (\n <KeyboardArrowDown sx={{ width: '14px' }} />\n ) : (\n <KeyboardArrowRight sx={{ width: '14px' }} />\n )\n }\n disabled={!hasTraceInfo}\n onClick={() => {\n setShowTrace(v => !v)\n }}\n sx={{\n height: '20px',\n fontSize: '12px',\n fontWeight: 600,\n mb: 1,\n border: 'none !important',\n color: 'grey.700',\n justifyContent: 'flex-start',\n whiteSpace: 'nowrap',\n maxWidth: '325px',\n textTransform: 'none',\n pl: 0,\n '.MuiButton-startIcon': { mr: 0.5 },\n }}\n >\n <Box sx={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>\n {traceButtonText}\n </Box>\n </Button>\n {chatResponseTrace && (\n <Collapse in={showTrace}>\n <MarkdownSynapse\n markdown={traceMessages\n .map(getMarkdownForTraceMessage)\n .filter(md => md.trim().length > 0)\n .join('<br/><br/>')}\n />\n </Collapse>\n )}\n </Box>\n {(textContent \|\| (onSendChat && guidePrompts.length > 0)) && (\n <Box className={animateEntry ? styles.entryAnimation : undefined}>\n {textContent && <MarkdownSynapse markdown={textContent} />}\n {onSendChat && guidePrompts.length > 0 && (\n <Stack direction=\"row\" flexWrap=\"wrap\" gap={1} mt={1}>\n {guidePrompts.map(prompt => (\n <Tooltip key={prompt} title={prompt}>\n <Chip\n label={prompt}\n variant=\"outlined\"\n color=\"primary\"\n clickable\n disabled={isAwaitingResponse}\n onClick={() => onSendChat(prompt)}\n sx={{ maxWidth: 200 }}\n />\n </Tooltip>\n ))}\n </Stack>\n )}\n </Box>\n )}\n </Box>\n </ListItem>\n {chatErrorReason && (\n <Alert severity={'error'} sx={{ my: 2 }}>\n {chatErrorReason}\n </Alert>\n )}\n </>\n )\n}\n\nexport default SynapseChatInteraction\n"],"mappings":"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"}

package/dist/components/SynapseChat/SynapseChatMessage.js CHANGED Viewed

@@ -7,7 +7,7 @@ import { jsx as o } from "react/jsx-runtime";
 function s(t, n) {
 	let [o, s] = a([]), c = r((e) => {
 		s((t) => [...t, ...e]);
-	}, []), l = o.at(o.length - 1), { data: u } = e({
+	}, []), l = o.at(-1), { data: u } = e({
 		jobId: t ?? "",
 		newerThanTimestamp: l?.timestamp
 	}, {

package/dist/components/SynapseChat/SynapseChatMessage.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SynapseChatMessage.js","names":[],"sources":["../../../src/components/SynapseChat/SynapseChatMessage.tsx"],"sourcesContent":["import SynapseChatInteraction from '@/components/SynapseChat/SynapseChatInteraction'\nimport usePollAsynchronousJob from '@/synapse-queries/asynchronous/usePollAsynchronousJob'\nimport { useGetChatAgentTraceEvents } from '@/synapse-queries/chat/useChat'\nimport {\n AgentChatRequest,\n AgentChatResponse,\n} from '@sage-bionetworks/synapse-client'\nimport { TraceEvent } from '@sage-bionetworks/synapse-types'\nimport { useCallback, useEffect, useState } from 'react'\nimport { ChatAttachment } from './utils/types'\n\nfunction useTraceEvent(chatJobId: string \| undefined, enabled: boolean) {\n const [traceEvents, setTraceEvents] = useState<TraceEvent[]>([])\n\n const appendTraceEvents = useCallback((newEvents: TraceEvent[]) => {\n setTraceEvents(prev => {\n return [...prev, ...newEvents]\n })\n }, [])\n\n const latestTraceEvent = traceEvents.at(~~traceEvents.length~~ - 1)\n const { data: newTraceEvents } = useGetChatAgentTraceEvents(\n {\n jobId: chatJobId ?? '',\n newerThanTimestamp: latestTraceEvent?.timestamp,\n },\n {\n enabled: enabled,\n refetchInterval: 1000, // Re-fetch every second if enabled\n refetchIntervalInBackground: true, // Continue polling even when the tab is not active\n },\n )\n useEffect(() => {\n if (newTraceEvents && newTraceEvents.page.length > 0) {\n appendTraceEvents(newTraceEvents.page)\n\n // send trace events to the console to ease agent debugging\n // if the trace events do not contain the latest event, add the events to the array\n console.debug(newTraceEvents.page)\n }\n }, [appendTraceEvents, newTraceEvents])\n\n return {\n traceEvents,\n }\n}\n\ntype SynapseChatMessageProps = {\n agentAvatar: React.ReactNode\n userAvatar: React.ReactNode\n /** Known at send time; never re-derived from the polled job so the bubble never renders empty. /\n userMessage: string\n /* Undefined until the async job has been registered for this interaction. /\n chatJobId?: string\n onSendChat?: (message: string) => void\n scrollIntoView?: boolean\n animateEntry?: boolean\n isAwaitingResponse?: boolean\n showLoadingIcon?: boolean\n /\n Attachments sent with this message. This information is not available in any API request/response\n * until the job has finished processing, so this prop is used to optimistically render the attachment\n * chips in the message bubble until the response arrives.\n */\n pendingAttachments?: ChatAttachment[]\n}\n\nexport default function SynapseChatMessage(props: SynapseChatMessageProps) {\n const {\n userMessage,\n chatJobId,\n onSendChat,\n agentAvatar,\n userAvatar,\n scrollIntoView,\n animateEntry,\n isAwaitingResponse,\n showLoadingIcon,\n pendingAttachments,\n } = props\n const { data: asyncJobStatus } = usePollAsynchronousJob(chatJobId)\n\n const chatRequest = asyncJobStatus?.requestBody as AgentChatRequest\n const chatResponse = asyncJobStatus?.responseBody as\n \| AgentChatResponse\n \| undefined\n const chatError = asyncJobStatus?.errorMessage\n\n // enabled if the job has been registered and has not finished processing\n const enableTrace =\n !!chatJobId &&\n (!asyncJobStatus?.jobState \|\| asyncJobStatus.jobState == 'PROCESSING')\n const { traceEvents } = useTraceEvent(chatJobId, enableTrace)\n\n const attachments =\n chatRequest?.attachments?.map(attachment => {\n const fileHandleId = attachment.fileHandleId!\n const status = chatResponse?.attachmentStatuses?.find(\n s => s.fileHandleId === fileHandleId,\n )\n const pending = pendingAttachments?.find(\n a => a.fileHandleId === fileHandleId,\n )\n // Prefer the server-resolved metadata once the job's response arrives. Fall back to what\n // was optimistically sent (`pending`) so the chip doesn't lose its filename between the\n // job being registered and its response arriving.\n return {\n fileHandleId,\n fileName: status?.fileName ?? pending?.fileName,\n contentType: status?.contentType ?? pending?.contentType,\n }\n }) ?? pendingAttachments\n\n return (\n <SynapseChatInteraction\n agentAvatar={agentAvatar}\n userAvatar={userAvatar}\n userMessage={userMessage}\n chatResponseText={chatResponse?.responseText}\n chatResponseTrace={traceEvents}\n chatErrorReason={chatError}\n onSendChat={onSendChat}\n scrollIntoView={scrollIntoView}\n animateEntry={animateEntry}\n isAwaitingResponse={isAwaitingResponse}\n showLoadingIcon={showLoadingIcon}\n attachments={attachments}\n attachmentStatuses={chatResponse?.attachmentStatuses}\n />\n )\n}\n"],"mappings":";;;;;;AAWA,SAAS,EAAc,GAA+B,GAAkB;CACtE,IAAM,CAAC,GAAa,KAAkB,EAAuB,CAAC,CAAC,GAEzD,IAAoB,GAAa,MAA4B;EACjE,GAAe,MACN,CAAC,GAAG,GAAM,GAAG,CAAS,CAC9B;CACH,GAAG,CAAC,CAAC,GAEC,IAAmB,EAAY,GAAG,~~EAAY~~,~~SAAS~~,~~CAAC,GACxD,~~EAAE,MAAM,MAAmB,EAC/B;EACE,OAAO,KAAa;EACpB,oBAAoB,GAAkB;CACxC,GACA;EACW;EACT,iBAAiB;EACjB,6BAA6B;CAC/B,CACF;CAWA,OAVA,QAAgB;EACd,AAAI,KAAkB,EAAe,KAAK,SAAS,MACjD,EAAkB,EAAe,IAAI,GAIrC,QAAQ,MAAM,EAAe,IAAI;CAErC,GAAG,CAAC,GAAmB,CAAc,CAAC,GAE/B,EACL,eACF;AACF;AAsBA,SAAwB,EAAmB,GAAgC;CACzE,IAAM,EACJ,gBACA,cACA,eACA,gBACA,eACA,mBACA,iBACA,uBACA,oBACA,0BACE,GACE,EAAE,MAAM,MAAmB,EAAuB,CAAS,GAE3D,IAAc,GAAgB,aAC9B,IAAe,GAAgB,cAG/B,IAAY,GAAgB,cAM5B,EAAE,mBAAgB,EAAc,GAFpC,CAAC,CAAC,MACD,CAAC,GAAgB,YAAY,EAAe,YAAY,aACC,GAEtD,IACJ,GAAa,aAAa,KAAI,MAAc;EAC1C,IAAM,IAAe,EAAW,cAC1B,IAAS,GAAc,oBAAoB,MAC/C,MAAK,EAAE,iBAAiB,CAC1B,GACM,IAAU,GAAoB,MAClC,MAAK,EAAE,iBAAiB,CAC1B;EAIA,OAAO;GACL;GACA,UAAU,GAAQ,YAAY,GAAS;GACvC,aAAa,GAAQ,eAAe,GAAS;EAC/C;CACF,CAAC,KAAK;CAER,OACE,kBAAC,GAAD;EACe;EACD;EACC;EACb,kBAAkB,GAAc;EAChC,mBAAmB;EACnB,iBAAiB;EACL;EACI;EACF;EACM;EACH;EACJ;EACb,oBAAoB,GAAc;CACnC,CAAA;AAEL"}
1	+ {"version":3,"file":"SynapseChatMessage.js","names":[],"sources":["../../../src/components/SynapseChat/SynapseChatMessage.tsx"],"sourcesContent":["import SynapseChatInteraction from '@/components/SynapseChat/SynapseChatInteraction'\nimport usePollAsynchronousJob from '@/synapse-queries/asynchronous/usePollAsynchronousJob'\nimport { useGetChatAgentTraceEvents } from '@/synapse-queries/chat/useChat'\nimport {\n AgentChatRequest,\n AgentChatResponse,\n} from '@sage-bionetworks/synapse-client'\nimport { TraceEvent } from '@sage-bionetworks/synapse-types'\nimport { useCallback, useEffect, useState } from 'react'\nimport { ChatAttachment } from './utils/types'\n\nfunction useTraceEvent(chatJobId: string \| undefined, enabled: boolean) {\n const [traceEvents, setTraceEvents] = useState<TraceEvent[]>([])\n\n const appendTraceEvents = useCallback((newEvents: TraceEvent[]) => {\n setTraceEvents(prev => {\n return [...prev, ...newEvents]\n })\n }, [])\n\n const latestTraceEvent = traceEvents.at(-1)\n const { data: newTraceEvents } = useGetChatAgentTraceEvents(\n {\n jobId: chatJobId ?? '',\n newerThanTimestamp: latestTraceEvent?.timestamp,\n },\n {\n enabled: enabled,\n refetchInterval: 1000, // Re-fetch every second if enabled\n refetchIntervalInBackground: true, // Continue polling even when the tab is not active\n },\n )\n useEffect(() => {\n if (newTraceEvents && newTraceEvents.page.length > 0) {\n appendTraceEvents(newTraceEvents.page)\n\n // send trace events to the console to ease agent debugging\n // if the trace events do not contain the latest event, add the events to the array\n console.debug(newTraceEvents.page)\n }\n }, [appendTraceEvents, newTraceEvents])\n\n return {\n traceEvents,\n }\n}\n\ntype SynapseChatMessageProps = {\n agentAvatar: React.ReactNode\n userAvatar: React.ReactNode\n /** Known at send time; never re-derived from the polled job so the bubble never renders empty. /\n userMessage: string\n /* Undefined until the async job has been registered for this interaction. /\n chatJobId?: string\n onSendChat?: (message: string) => void\n scrollIntoView?: boolean\n animateEntry?: boolean\n isAwaitingResponse?: boolean\n showLoadingIcon?: boolean\n /\n Attachments sent with this message. This information is not available in any API request/response\n * until the job has finished processing, so this prop is used to optimistically render the attachment\n * chips in the message bubble until the response arrives.\n */\n pendingAttachments?: ChatAttachment[]\n}\n\nexport default function SynapseChatMessage(props: SynapseChatMessageProps) {\n const {\n userMessage,\n chatJobId,\n onSendChat,\n agentAvatar,\n userAvatar,\n scrollIntoView,\n animateEntry,\n isAwaitingResponse,\n showLoadingIcon,\n pendingAttachments,\n } = props\n const { data: asyncJobStatus } = usePollAsynchronousJob(chatJobId)\n\n const chatRequest = asyncJobStatus?.requestBody as AgentChatRequest\n const chatResponse = asyncJobStatus?.responseBody as\n \| AgentChatResponse\n \| undefined\n const chatError = asyncJobStatus?.errorMessage\n\n // enabled if the job has been registered and has not finished processing\n const enableTrace =\n !!chatJobId &&\n (!asyncJobStatus?.jobState \|\| asyncJobStatus.jobState == 'PROCESSING')\n const { traceEvents } = useTraceEvent(chatJobId, enableTrace)\n\n const attachments =\n chatRequest?.attachments?.map(attachment => {\n const fileHandleId = attachment.fileHandleId!\n const status = chatResponse?.attachmentStatuses?.find(\n s => s.fileHandleId === fileHandleId,\n )\n const pending = pendingAttachments?.find(\n a => a.fileHandleId === fileHandleId,\n )\n // Prefer the server-resolved metadata once the job's response arrives. Fall back to what\n // was optimistically sent (`pending`) so the chip doesn't lose its filename between the\n // job being registered and its response arriving.\n return {\n fileHandleId,\n fileName: status?.fileName ?? pending?.fileName,\n contentType: status?.contentType ?? pending?.contentType,\n }\n }) ?? pendingAttachments\n\n return (\n <SynapseChatInteraction\n agentAvatar={agentAvatar}\n userAvatar={userAvatar}\n userMessage={userMessage}\n chatResponseText={chatResponse?.responseText}\n chatResponseTrace={traceEvents}\n chatErrorReason={chatError}\n onSendChat={onSendChat}\n scrollIntoView={scrollIntoView}\n animateEntry={animateEntry}\n isAwaitingResponse={isAwaitingResponse}\n showLoadingIcon={showLoadingIcon}\n attachments={attachments}\n attachmentStatuses={chatResponse?.attachmentStatuses}\n />\n )\n}\n"],"mappings":";;;;;;AAWA,SAAS,EAAc,GAA+B,GAAkB;CACtE,IAAM,CAAC,GAAa,KAAkB,EAAuB,CAAC,CAAC,GAEzD,IAAoB,GAAa,MAA4B;EACjE,GAAe,MACN,CAAC,GAAG,GAAM,GAAG,CAAS,CAC9B;CACH,GAAG,CAAC,CAAC,GAEC,IAAmB,EAAY,GAAG,EAAE,GACpC,EAAE,MAAM,MAAmB,EAC/B;EACE,OAAO,KAAa;EACpB,oBAAoB,GAAkB;CACxC,GACA;EACW;EACT,iBAAiB;EACjB,6BAA6B;CAC/B,CACF;CAWA,OAVA,QAAgB;EACd,AAAI,KAAkB,EAAe,KAAK,SAAS,MACjD,EAAkB,EAAe,IAAI,GAIrC,QAAQ,MAAM,EAAe,IAAI;CAErC,GAAG,CAAC,GAAmB,CAAc,CAAC,GAE/B,EACL,eACF;AACF;AAsBA,SAAwB,EAAmB,GAAgC;CACzE,IAAM,EACJ,gBACA,cACA,eACA,gBACA,eACA,mBACA,iBACA,uBACA,oBACA,0BACE,GACE,EAAE,MAAM,MAAmB,EAAuB,CAAS,GAE3D,IAAc,GAAgB,aAC9B,IAAe,GAAgB,cAG/B,IAAY,GAAgB,cAM5B,EAAE,mBAAgB,EAAc,GAFpC,CAAC,CAAC,MACD,CAAC,GAAgB,YAAY,EAAe,YAAY,aACC,GAEtD,IACJ,GAAa,aAAa,KAAI,MAAc;EAC1C,IAAM,IAAe,EAAW,cAC1B,IAAS,GAAc,oBAAoB,MAC/C,MAAK,EAAE,iBAAiB,CAC1B,GACM,IAAU,GAAoB,MAClC,MAAK,EAAE,iBAAiB,CAC1B;EAIA,OAAO;GACL;GACA,UAAU,GAAQ,YAAY,GAAS;GACvC,aAAa,GAAQ,eAAe,GAAS;EAC/C;CACF,CAAC,KAAK;CAER,OACE,kBAAC,GAAD;EACe;EACD;EACC;EACb,kBAAkB,GAAc;EAChC,mBAAmB;EACnB,iBAAiB;EACL;EACI;EACF;EACM;EACH;EACJ;EACb,oBAAoB,GAAc;CACnC,CAAA;AAEL"}

package/dist/components/SynapseChat/components/ChatInputArea/ChatInputArea.js CHANGED Viewed

@@ -4,7 +4,7 @@ import r from "./ChatInputArea.module.js";
 import { useMemo as i, useState as a } from "react";
 import { Box as o, IconButton as s, TextareaAutosize as c, Tooltip as l } from "@mui/material";
 import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
-import { Add as p } from "@mui/icons-material";
+import p from "@mui/icons-material/Add";
 import m from "@mui/icons-material/ArrowUpward";
 //#region src/components/SynapseChat/components/ChatInputArea/ChatInputArea.tsx
 var h = 6, g = {

package/dist/components/SynapseChat/components/ChatInputArea/ChatInputArea.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ChatInputArea.js","names":[],"sources":["../../../../../src/components/SynapseChat/components/ChatInputArea/ChatInputArea.tsx"],"sourcesContent":["import { Add } from '@mui/icons-material'\nimport ArrowUpward from '@mui/icons-material/ArrowUpward'\nimport { Box, IconButton, TextareaAutosize, Tooltip } from '@mui/material'\nimport {\n FormEventHandler,\n KeyboardEventHandler,\n useMemo,\n useState,\n} from 'react'\nimport {\n AddFilesDialog,\n ALLOWED_FILE_TYPES_LABEL,\n} from '../AddFilesDialog/AddFilesDialog'\nimport {\n AttachmentStripItem,\n ChatAttachmentStrip,\n} from '../ChatAttachmentStrip/ChatAttachmentStrip'\nimport styles from './ChatInputArea.module.scss'\nimport { ChatAttachment } from '../../utils/types'\n\n/** Max number of visible rows the textarea grows to before it scrolls internally. /\nexport const MAX_CHAT_INPUT_ROWS = 6\n\nexport type ChatInputAreaProps = {\n value: string\n onValueChange: (value: string) => void\n onSend: (message: string, attachments: ChatAttachment[]) => void\n placeholder?: string\n /* No session yet, or a response is in flight. /\n disabled?: boolean\n /* @default false /\n allowAttachments?: boolean\n}\n\nconst actionButtonSx = {\n height: '36px',\n px: '12px',\n border: '1px solid',\n borderColor: 'grey.300',\n borderRadius: '1px',\n}\n\n/\n The chat composer: a bordered card containing a conditional attachment strip, an\n * auto-growing borderless text input, and a right-aligned row of actions (attach + send).\n * Owns attachment upload state end-to-end; the message text itself is controlled by the\n * caller since it can also be set from outside the card (e.g. suggested-prompt pills).\n */\nexport function ChatInputArea({\n value,\n onValueChange,\n onSend,\n placeholder,\n disabled = false,\n allowAttachments = false,\n}: ChatInputAreaProps) {\n const [pendingAttachments, setPendingAttachments] = useState<\n ChatAttachment[]\n >([])\n const [isAddFilesDialogOpen, setIsAddFilesDialogOpen] = useState(false)\n const [isUploadingAttachments, setIsUploadingAttachments] = useState(false)\n\n const isSendDisabled = disabled \|\| !value.trim() \|\| isUploadingAttachments\n\n const submit = () => {\n if (isSendDisabled) {\n return\n }\n onSend(value.trim(), pendingAttachments)\n setPendingAttachments([])\n }\n\n const handleFormSubmit: FormEventHandler<HTMLFormElement> = event => {\n event.preventDefault()\n submit()\n }\n\n const handleTextareaKeyDown: KeyboardEventHandler<\n HTMLTextAreaElement\n > = event => {\n if (event.key === 'Enter' && !event.shiftKey) {\n event.preventDefault()\n submit()\n }\n }\n\n const attachmentItems: AttachmentStripItem[] = useMemo(\n () =>\n pendingAttachments.map(attachment => ({\n fileHandleId: attachment.fileHandleId,\n label: attachment.fileName,\n contentType: attachment.contentType,\n })),\n [pendingAttachments],\n )\n\n return (\n <>\n <Box component=\"form\" className={styles.card} onSubmit={handleFormSubmit}>\n {allowAttachments && (\n <ChatAttachmentStrip\n items={attachmentItems}\n onRemove={fileHandleId =>\n setPendingAttachments(prev =>\n prev.filter(a => a.fileHandleId !== fileHandleId),\n )\n }\n />\n )}\n <TextareaAutosize\n className={styles.textarea}\n minRows={1}\n maxRows={MAX_CHAT_INPUT_ROWS}\n value={value}\n onChange={e => onValueChange(e.target.value)}\n onKeyDown={handleTextareaKeyDown}\n placeholder={placeholder}\n />\n <div className={styles.actions}>\n {allowAttachments && (\n <Tooltip\n title={`Upload files (${ALLOWED_FILE_TYPES_LABEL})`}\n placement=\"left\"\n >\n <IconButton\n type=\"button\"\n aria-label=\"Add files\"\n disabled={disabled}\n onClick={() => setIsAddFilesDialogOpen(true)}\n sx={actionButtonSx}\n >\n <Add />\n </IconButton>\n </Tooltip>\n )}\n <IconButton\n type=\"submit\"\n aria-label=\"Send message\"\n disabled={isSendDisabled}\n sx={actionButtonSx}\n >\n <ArrowUpward />\n </IconButton>\n </div>\n </Box>\n {allowAttachments && (\n <AddFilesDialog\n open={isAddFilesDialogOpen}\n onClose={() => setIsAddFilesDialogOpen(false)}\n currentAttachmentCount={pendingAttachments.length}\n onAttachmentUploaded={attachment =>\n setPendingAttachments(prev => [...prev, attachment])\n }\n onUploadStateChange={state =>\n setIsUploadingAttachments(state === 'UPLOADING')\n }\n />\n )}\n </>\n )\n}\n\nexport default ChatInputArea\n"],"mappings":";;;;;;;;;AAqBA,IAAa,IAAsB,GAa7B,IAAiB;CACrB,QAAQ;CACR,IAAI;CACJ,QAAQ;CACR,aAAa;CACb,cAAc;AAChB;AAQA,SAAgB,EAAc,EAC5B,UACA,kBACA,WACA,gBACA,cAAW,IACX,sBAAmB,MACE;CACrB,IAAM,CAAC,GAAoB,KAAyB,EAElD,CAAC,CAAC,GACE,CAAC,GAAsB,KAA2B,EAAS,EAAK,GAChE,CAAC,GAAwB,KAA6B,EAAS,EAAK,GAEpE,IAAiB,KAAY,CAAC,EAAM,KAAK,KAAK,GAE9C,UAAe;EACf,MAGJ,EAAO,EAAM,KAAK,GAAG,CAAkB,GACvC,EAAsB,CAAC,CAAC;CAC1B,GAEM,KAAsD,MAAS;EAEnE,AADA,EAAM,eAAe,GACrB,EAAO;CACT,GAEM,KAEF,MAAS;EACX,AAAI,EAAM,QAAQ,WAAW,CAAC,EAAM,aAClC,EAAM,eAAe,GACrB,EAAO;CAEX,GAEM,IAAyC,QAE3C,EAAmB,KAAI,OAAe;EACpC,cAAc,EAAW;EACzB,OAAO,EAAW;EAClB,aAAa,EAAW;CAC1B,EAAE,GACJ,CAAC,CAAkB,CACrB;CAEA,OACE,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD;EAAK,WAAU;EAAO,WAAW,EAAO;EAAM,UAAU;YAAxD;GACG,KACC,kBAAC,GAAD;IACE,OAAO;IACP,WAAU,MACR,GAAsB,MACpB,EAAK,QAAO,MAAK,EAAE,iBAAiB,CAAY,CAClD;GAEH,CAAA;GAEH,kBAAC,GAAD;IACE,WAAW,EAAO;IAClB,SAAS;IACT,SAAA;IACO;IACP,WAAU,MAAK,EAAc,EAAE,OAAO,KAAK;IAC3C,WAAW;IACE;GACd,CAAA;GACD,kBAAC,OAAD;IAAK,WAAW,EAAO;cAAvB,CACG,KACC,kBAAC,GAAD;KACE,OAAO,iBAAiB,EAAyB;KACjD,WAAU;eAEV,kBAAC,GAAD;MACE,MAAK;MACL,cAAW;MACD;MACV,eAAe,EAAwB,EAAI;MAC3C,IAAI;gBAEJ,kBAAC,GAAD,CAAM,CAAA;KACI,CAAA;IACL,CAAA,GAEX,kBAAC,GAAD;KACE,MAAK;KACL,cAAW;KACX,UAAU;KACV,IAAI;eAEJ,kBAAC,GAAD,CAAc,CAAA;IACJ,CAAA,CACT;;EACF;KACJ,KACC,kBAAC,GAAD;EACE,MAAM;EACN,eAAe,EAAwB,EAAK;EAC5C,wBAAwB,EAAmB;EAC3C,uBAAsB,MACpB,GAAsB,MAAQ,CAAC,GAAG,GAAM,CAAU,CAAC;EAErD,sBAAqB,MACnB,EAA0B,MAAU,WAAW;CAElD,CAAA,CAEH,EAAA,CAAA;AAEN"}
1	+ {"version":3,"file":"ChatInputArea.js","names":[],"sources":["../../../../../src/components/SynapseChat/components/ChatInputArea/ChatInputArea.tsx"],"sourcesContent":["import Add from '@mui/icons-material/Add'\nimport ArrowUpward from '@mui/icons-material/ArrowUpward'\nimport { Box, IconButton, TextareaAutosize, Tooltip } from '@mui/material'\nimport {\n FormEventHandler,\n KeyboardEventHandler,\n useMemo,\n useState,\n} from 'react'\nimport {\n AddFilesDialog,\n ALLOWED_FILE_TYPES_LABEL,\n} from '../AddFilesDialog/AddFilesDialog'\nimport {\n AttachmentStripItem,\n ChatAttachmentStrip,\n} from '../ChatAttachmentStrip/ChatAttachmentStrip'\nimport styles from './ChatInputArea.module.scss'\nimport { ChatAttachment } from '../../utils/types'\n\n/** Max number of visible rows the textarea grows to before it scrolls internally. /\nexport const MAX_CHAT_INPUT_ROWS = 6\n\nexport type ChatInputAreaProps = {\n value: string\n onValueChange: (value: string) => void\n onSend: (message: string, attachments: ChatAttachment[]) => void\n placeholder?: string\n /* No session yet, or a response is in flight. /\n disabled?: boolean\n /* @default false /\n allowAttachments?: boolean\n}\n\nconst actionButtonSx = {\n height: '36px',\n px: '12px',\n border: '1px solid',\n borderColor: 'grey.300',\n borderRadius: '1px',\n}\n\n/\n The chat composer: a bordered card containing a conditional attachment strip, an\n * auto-growing borderless text input, and a right-aligned row of actions (attach + send).\n * Owns attachment upload state end-to-end; the message text itself is controlled by the\n * caller since it can also be set from outside the card (e.g. suggested-prompt pills).\n */\nexport function ChatInputArea({\n value,\n onValueChange,\n onSend,\n placeholder,\n disabled = false,\n allowAttachments = false,\n}: ChatInputAreaProps) {\n const [pendingAttachments, setPendingAttachments] = useState<\n ChatAttachment[]\n >([])\n const [isAddFilesDialogOpen, setIsAddFilesDialogOpen] = useState(false)\n const [isUploadingAttachments, setIsUploadingAttachments] = useState(false)\n\n const isSendDisabled = disabled \|\| !value.trim() \|\| isUploadingAttachments\n\n const submit = () => {\n if (isSendDisabled) {\n return\n }\n onSend(value.trim(), pendingAttachments)\n setPendingAttachments([])\n }\n\n const handleFormSubmit: FormEventHandler<HTMLFormElement> = event => {\n event.preventDefault()\n submit()\n }\n\n const handleTextareaKeyDown: KeyboardEventHandler<\n HTMLTextAreaElement\n > = event => {\n if (event.key === 'Enter' && !event.shiftKey) {\n event.preventDefault()\n submit()\n }\n }\n\n const attachmentItems: AttachmentStripItem[] = useMemo(\n () =>\n pendingAttachments.map(attachment => ({\n fileHandleId: attachment.fileHandleId,\n label: attachment.fileName,\n contentType: attachment.contentType,\n })),\n [pendingAttachments],\n )\n\n return (\n <>\n <Box component=\"form\" className={styles.card} onSubmit={handleFormSubmit}>\n {allowAttachments && (\n <ChatAttachmentStrip\n items={attachmentItems}\n onRemove={fileHandleId =>\n setPendingAttachments(prev =>\n prev.filter(a => a.fileHandleId !== fileHandleId),\n )\n }\n />\n )}\n <TextareaAutosize\n className={styles.textarea}\n minRows={1}\n maxRows={MAX_CHAT_INPUT_ROWS}\n value={value}\n onChange={e => onValueChange(e.target.value)}\n onKeyDown={handleTextareaKeyDown}\n placeholder={placeholder}\n />\n <div className={styles.actions}>\n {allowAttachments && (\n <Tooltip\n title={`Upload files (${ALLOWED_FILE_TYPES_LABEL})`}\n placement=\"left\"\n >\n <IconButton\n type=\"button\"\n aria-label=\"Add files\"\n disabled={disabled}\n onClick={() => setIsAddFilesDialogOpen(true)}\n sx={actionButtonSx}\n >\n <Add />\n </IconButton>\n </Tooltip>\n )}\n <IconButton\n type=\"submit\"\n aria-label=\"Send message\"\n disabled={isSendDisabled}\n sx={actionButtonSx}\n >\n <ArrowUpward />\n </IconButton>\n </div>\n </Box>\n {allowAttachments && (\n <AddFilesDialog\n open={isAddFilesDialogOpen}\n onClose={() => setIsAddFilesDialogOpen(false)}\n currentAttachmentCount={pendingAttachments.length}\n onAttachmentUploaded={attachment =>\n setPendingAttachments(prev => [...prev, attachment])\n }\n onUploadStateChange={state =>\n setIsUploadingAttachments(state === 'UPLOADING')\n }\n />\n )}\n </>\n )\n}\n\nexport default ChatInputArea\n"],"mappings":";;;;;;;;;AAqBA,IAAa,IAAsB,GAa7B,IAAiB;CACrB,QAAQ;CACR,IAAI;CACJ,QAAQ;CACR,aAAa;CACb,cAAc;AAChB;AAQA,SAAgB,EAAc,EAC5B,UACA,kBACA,WACA,gBACA,cAAW,IACX,sBAAmB,MACE;CACrB,IAAM,CAAC,GAAoB,KAAyB,EAElD,CAAC,CAAC,GACE,CAAC,GAAsB,KAA2B,EAAS,EAAK,GAChE,CAAC,GAAwB,KAA6B,EAAS,EAAK,GAEpE,IAAiB,KAAY,CAAC,EAAM,KAAK,KAAK,GAE9C,UAAe;EACf,MAGJ,EAAO,EAAM,KAAK,GAAG,CAAkB,GACvC,EAAsB,CAAC,CAAC;CAC1B,GAEM,KAAsD,MAAS;EAEnE,AADA,EAAM,eAAe,GACrB,EAAO;CACT,GAEM,KAEF,MAAS;EACX,AAAI,EAAM,QAAQ,WAAW,CAAC,EAAM,aAClC,EAAM,eAAe,GACrB,EAAO;CAEX,GAEM,IAAyC,QAE3C,EAAmB,KAAI,OAAe;EACpC,cAAc,EAAW;EACzB,OAAO,EAAW;EAClB,aAAa,EAAW;CAC1B,EAAE,GACJ,CAAC,CAAkB,CACrB;CAEA,OACE,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD;EAAK,WAAU;EAAO,WAAW,EAAO;EAAM,UAAU;YAAxD;GACG,KACC,kBAAC,GAAD;IACE,OAAO;IACP,WAAU,MACR,GAAsB,MACpB,EAAK,QAAO,MAAK,EAAE,iBAAiB,CAAY,CAClD;GAEH,CAAA;GAEH,kBAAC,GAAD;IACE,WAAW,EAAO;IAClB,SAAS;IACT,SAAA;IACO;IACP,WAAU,MAAK,EAAc,EAAE,OAAO,KAAK;IAC3C,WAAW;IACE;GACd,CAAA;GACD,kBAAC,OAAD;IAAK,WAAW,EAAO;cAAvB,CACG,KACC,kBAAC,GAAD;KACE,OAAO,iBAAiB,EAAyB;KACjD,WAAU;eAEV,kBAAC,GAAD;MACE,MAAK;MACL,cAAW;MACD;MACV,eAAe,EAAwB,EAAI;MAC3C,IAAI;gBAEJ,kBAAC,GAAD,CAAM,CAAA;KACI,CAAA;IACL,CAAA,GAEX,kBAAC,GAAD;KACE,MAAK;KACL,cAAW;KACX,UAAU;KACV,IAAI;eAEJ,kBAAC,GAAD,CAAc,CAAA;IACJ,CAAA,CACT;;EACF;KACJ,KACC,kBAAC,GAAD;EACE,MAAM;EACN,eAAe,EAAwB,EAAK;EAC5C,wBAAwB,EAAmB;EAC3C,uBAAsB,MACpB,GAAsB,MAAQ,CAAC,GAAG,GAAM,CAAU,CAAC;EAErD,sBAAqB,MACnB,EAA0B,MAAU,WAAW;CAElD,CAAA,CAEH,EAAA,CAAA;AAEN"}

package/dist/components/SynapseFooter/SynapseFooter.js CHANGED Viewed

@@ -16,7 +16,7 @@ import { ForwardRef as f } from "../../assets/homepage/youtube.js";
 import { SynapseLinksColumn as p } from "./SynapseLinksColumn.js";
 import { Box as m, Button as h, IconButton as g, Stack as _, Tooltip as v, Typography as y } from "@mui/material";
 import { jsx as b, jsxs as x } from "react/jsx-runtime";
-import { LogoutTwoTone as S } from "@mui/icons-material";
+import S from "@mui/icons-material/LogoutTwoTone";
 //#region src/components/SynapseFooter/SynapseFooter.tsx
 var C = (/* @__PURE__ */ new Date()).getFullYear();
 function w({ portalVersion: w, srcVersion: T, repoVersion: E, gotoPlace: D, onExperimentalModeToggle: O }) {

package/dist/components/SynapseFooter/SynapseFooter.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SynapseFooter.js","names":[],"sources":["../../../src/components/SynapseFooter/SynapseFooter.tsx"],"sourcesContent":["import { ReactComponent as Facebook } from '@/assets/homepage/facebook.svg'\nimport { ReactComponent as Github } from '@/assets/homepage/github.svg'\nimport { ReactComponent as Instagram } from '@/assets/homepage/instagram.svg'\nimport { ReactComponent as LinkedIn } from '@/assets/homepage/linkedin.svg'\nimport { ReactComponent as Twitter } from '@/assets/homepage/twitter.svg'\nimport { ReactComponent as Youtube } from '@/assets/homepage/youtube.svg'\nimport SageFullLogo from '@/assets/icons/SageFullLogo'\nimport SynapseFullLogo from '@/assets/icons/SynapseFullLogo'\nimport { useApplicationSessionContext } from '@/utils'\nimport { useOneSageURL } from '@/utils/hooks/useOneSageURL'\nimport {\n Box,\n Button,\n IconButton,\n Stack,\n Tooltip,\n Typography,\n} from '@mui/material'\nimport ExperimentalMode from '../ExperimentalMode'\nimport { PLANS_LINK } from '../SynapseHomepageV2/SynapseHomepageNavBar'\nimport { SynapseLinksColumn } from './SynapseLinksColumn'\nimport { LogoutTwoTone } from '@mui/icons-material'\nimport { SYNAPSE_REALM } from '@/utils/SynapseConstants'\nimport { useGetCurrentRealm } from '@/synapse-queries/realm/useRealmPrincipals'\n\nexport type SynapseFooterProps = {\n portalVersion: string\n srcVersion: string\n repoVersion: string\n gotoPlace: (href: string) => void\n onExperimentalModeToggle: (newValue: boolean) => void\n}\n\nconst currentYear = new Date().getFullYear()\nexport function SynapseFooter({\n portalVersion,\n srcVersion,\n repoVersion,\n gotoPlace,\n onExperimentalModeToggle,\n}: SynapseFooterProps) {\n const { isAuthenticated, clearSession } = useApplicationSessionContext()\n const { data: realm } = useGetCurrentRealm()\n\n const registrationUrl = useOneSageURL('/register1')\n const sageResourcesUrl = useOneSageURL('/sageresources')\n\n return (\n <Box sx={{ display: 'flex', flexDirection: 'column' }}>\n <Box\n sx={{\n backgroundColor: 'primary.800',\n p: '50px 50px 20px 50px',\n }}\n >\n <Box\n sx={{\n display: 'flex',\n flexWrap: 'wrap',\n justifyContent: 'space-between',\n rowGap: '50px',\n }}\n >\n <Box sx={{ display: 'flex', flexDirection: 'column' }}>\n <SynapseFullLogo color=\"white\" />\n <Typography\n variant=\"body1Italic\"\n sx={{ color: 'primary.200', fontSize: '13px', mb: '25px' }}\n >\n Powered by Sage Bionetworks\n </Typography>\n {!isAuthenticated && (\n <Typography\n variant=\"h5\"\n sx={{\n color: 'white',\n fontSize: '32px',\n lineHeight: '46px',\n fontWeight: 400,\n mb: '30px',\n }}\n >\n Sign up for Synapse today\n </Typography>\n )}\n {!isAuthenticated && (\n <Box sx={{ display: 'flex', columnGap: '20px' }}>\n <Button\n variant=\"outlined\"\n color=\"lightPrimary\"\n onClick={() => {\n gotoPlace('/LoginPlace:0')\n }}\n >\n Login to Synapse\n </Button>\n <Button\n variant=\"contained\"\n color=\"lightPrimary\"\n href={registrationUrl.toString()}\n >\n Register Now\n </Button>\n </Box>\n )}\n </Box>\n <Box>\n <Box\n sx={{\n display: 'flex',\n columnGap: '60px',\n rowGap: '40px',\n flexWrap: 'wrap',\n }}\n >\n <SynapseLinksColumn\n category=\"Synapse\"\n synapseLinks={[\n {\n text: 'Contact Us',\n props: {\n href: 'https://sagebionetworks.jira.com/servicedesk/customer/portals',\n },\n },\n {\n text: 'Plans',\n props: {\n href: PLANS_LINK,\n target: '_self',\n },\n },\n {\n text: 'Data Portals',\n props: { href: sageResourcesUrl.toString() },\n },\n {\n text: 'Donate',\n props: { href: 'https://sagebionetworks.org/donate' },\n },\n ]}\n />\n <SynapseLinksColumn\n category=\"Resources\"\n synapseLinks={[\n {\n text: 'Blog',\n props: { href: 'https://blog.synapse.org/' },\n },\n {\n text: 'FAQs',\n props: {\n href: 'https://help.synapse.org/docs/FAQ.2047967233.html',\n },\n },\n {\n text: 'Documentation',\n props: { href: 'https://help.synapse.org/docs/' },\n },\n {\n text: 'Python Client',\n props: {\n href: 'https://python-docs.synapse.org/en/stable/',\n },\n },\n ]}\n />\n <SynapseLinksColumn\n category=\"Sage Bionetworks\"\n synapseLinks={[\n {\n text: 'Sage Home Page',\n props: { href: 'https://sagebionetworks.org/' },\n },\n {\n text: 'Report Violations',\n props: {\n href: 'https://sagebionetworks.jira.com/servicedesk/customer/portal/20',\n },\n },\n {\n text: 'Trust Center',\n props: { href: 'https://sagebionetworks.org/trust-center' },\n },\n ]}\n />\n </Box>\n </Box>\n </Box>\n <Box\n sx={{\n display: 'flex',\n flexWrap: 'wrap',\n justifyContent: { xs: 'center', md: 'space-between' },\n alignItems: 'center',\n mt: '60px',\n rowGap: '40px',\n }}\n >\n <Box\n sx={{\n display: 'flex',\n columnGap: '20px',\n alignItems: 'center',\n flexWrap: 'wrap',\n justifyContent: { xs: 'center', md: undefined },\n }}\n >\n <SageFullLogo textColor=\"white\" width={285} />\n <Typography\n variant=\"body1\"\n sx={{\n color: 'primary.200',\n fontSize: '18px',\n }}\n >\n © Sage Bionetworks {currentYear}\n </Typography>\n </Box>\n <Box\n sx={{\n display: 'flex',\n columnGap: '15px',\n svg: {\n '&:hover': {\n stroke: 'rgba(255, 255, 255, .4)',\n // fill: 'rgba(245, 246, 241, .05)', //uncomment if extra emphasis is needed\n },\n },\n }}\n >\n <a\n href=\"https://github.com/Sage-Bionetworks\"\n target=\"_blank\"\n rel=\"noreferrer\"\n >\n <Github />\n </a>\n <a\n href=\"https://twitter.com/sagebio\"\n target=\"_blank\"\n rel=\"noreferrer\"\n >\n <Twitter />\n </a>\n <a\n href=\"https://www.linkedin.com/company/sage-bionetworks\"\n target=\"_blank\"\n rel=\"noreferrer\"\n >\n <LinkedIn />\n </a>\n <a\n href=\"https://www.facebook.com/sagebionetworks/\"\n target=\"_blank\"\n rel=\"noreferrer\"\n >\n <Facebook />\n </a>\n <a\n href=\"https://www.instagram.com/sagebionetworks/\"\n target=\"_blank\"\n rel=\"noreferrer\"\n >\n <Instagram />\n </a>\n <a\n href=\"https://www.youtube.com/channel/UCiWTMRdO82wNq6o8JOs3WzQ\"\n target=\"_blank\"\n rel=\"noreferrer\"\n >\n <Youtube />\n </a>\n </Box>\n </Box>\n </Box>\n {/* Versions and experimental mode */}\n <Box\n sx={{\n display: 'flex',\n flexWrap: 'wrap',\n justifyContent: 'space-between',\n backgroundColor: '#121B23',\n alignItems: 'center',\n p: '15px 50px',\n }}\n >\n <Box\n sx={{\n display: 'flex',\n flexWrap: 'wrap',\n columnGap: '40px',\n rowGap: '0px',\n color: 'primary.300',\n }}\n >\n <Typography\n variant=\"body1\"\n sx={{\n fontSize: '14px',\n }}\n >\n portal: {portalVersion}\n </Typography>\n <Typography\n variant=\"body1\"\n sx={{\n fontSize: '14px',\n }}\n >\n synapse-react-client: {srcVersion}\n </Typography>\n <Typography\n variant=\"body1\"\n sx={{\n fontSize: '14px',\n }}\n >\n repo: {repoVersion}\n </Typography>\n {realm && (\n <Stack direction=\"row\" alignItems=\"center\">\n <Typography\n variant=\"body1\"\n sx={{\n fontSize: '14px',\n }}\n >\n realm: {realm.name}\n </Typography>\n {realm.id !== SYNAPSE_REALM && (\n <Tooltip\n title={`Reset Realm${\n isAuthenticated ? ' (will log you out)' : ''\n }`}\n >\n <IconButton\n size=\"small\"\n sx={{ color: 'currentcolor' }}\n onClick={() => {\n void clearSession()\n }}\n >\n <LogoutTwoTone sx={{ fontSize: 'inherit' }} />\n </IconButton>\n </Tooltip>\n )}\n </Stack>\n )}\n </Box>\n <ExperimentalMode onExperimentalModeToggle={onExperimentalModeToggle} />\n </Box>\n </Box>\n )\n}\n\nexport default SynapseFooter\n"],"mappings":"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"}
1	+ {"version":3,"file":"SynapseFooter.js","names":[],"sources":["../../../src/components/SynapseFooter/SynapseFooter.tsx"],"sourcesContent":["import { ReactComponent as Facebook } from '@/assets/homepage/facebook.svg'\nimport { ReactComponent as Github } from '@/assets/homepage/github.svg'\nimport { ReactComponent as Instagram } from '@/assets/homepage/instagram.svg'\nimport { ReactComponent as LinkedIn } from '@/assets/homepage/linkedin.svg'\nimport { ReactComponent as Twitter } from '@/assets/homepage/twitter.svg'\nimport { ReactComponent as Youtube } from '@/assets/homepage/youtube.svg'\nimport SageFullLogo from '@/assets/icons/SageFullLogo'\nimport SynapseFullLogo from '@/assets/icons/SynapseFullLogo'\nimport { useApplicationSessionContext } from '@/utils'\nimport { useOneSageURL } from '@/utils/hooks/useOneSageURL'\nimport {\n Box,\n Button,\n IconButton,\n Stack,\n Tooltip,\n Typography,\n} from '@mui/material'\nimport ExperimentalMode from '../ExperimentalMode'\nimport { PLANS_LINK } from '../SynapseHomepageV2/SynapseHomepageNavBar'\nimport { SynapseLinksColumn } from './SynapseLinksColumn'\nimport LogoutTwoTone from '@mui/icons-material/LogoutTwoTone'\nimport { SYNAPSE_REALM } from '@/utils/SynapseConstants'\nimport { useGetCurrentRealm } from '@/synapse-queries/realm/useRealmPrincipals'\n\nexport type SynapseFooterProps = {\n portalVersion: string\n srcVersion: string\n repoVersion: string\n gotoPlace: (href: string) => void\n onExperimentalModeToggle: (newValue: boolean) => void\n}\n\nconst currentYear = new Date().getFullYear()\nexport function SynapseFooter({\n portalVersion,\n srcVersion,\n repoVersion,\n gotoPlace,\n onExperimentalModeToggle,\n}: SynapseFooterProps) {\n const { isAuthenticated, clearSession } = useApplicationSessionContext()\n const { data: realm } = useGetCurrentRealm()\n\n const registrationUrl = useOneSageURL('/register1')\n const sageResourcesUrl = useOneSageURL('/sageresources')\n\n return (\n <Box sx={{ display: 'flex', flexDirection: 'column' }}>\n <Box\n sx={{\n backgroundColor: 'primary.800',\n p: '50px 50px 20px 50px',\n }}\n >\n <Box\n sx={{\n display: 'flex',\n flexWrap: 'wrap',\n justifyContent: 'space-between',\n rowGap: '50px',\n }}\n >\n <Box sx={{ display: 'flex', flexDirection: 'column' }}>\n <SynapseFullLogo color=\"white\" />\n <Typography\n variant=\"body1Italic\"\n sx={{ color: 'primary.200', fontSize: '13px', mb: '25px' }}\n >\n Powered by Sage Bionetworks\n </Typography>\n {!isAuthenticated && (\n <Typography\n variant=\"h5\"\n sx={{\n color: 'white',\n fontSize: '32px',\n lineHeight: '46px',\n fontWeight: 400,\n mb: '30px',\n }}\n >\n Sign up for Synapse today\n </Typography>\n )}\n {!isAuthenticated && (\n <Box sx={{ display: 'flex', columnGap: '20px' }}>\n <Button\n variant=\"outlined\"\n color=\"lightPrimary\"\n onClick={() => {\n gotoPlace('/LoginPlace:0')\n }}\n >\n Login to Synapse\n </Button>\n <Button\n variant=\"contained\"\n color=\"lightPrimary\"\n href={registrationUrl.toString()}\n >\n Register Now\n </Button>\n </Box>\n )}\n </Box>\n <Box>\n <Box\n sx={{\n display: 'flex',\n columnGap: '60px',\n rowGap: '40px',\n flexWrap: 'wrap',\n }}\n >\n <SynapseLinksColumn\n category=\"Synapse\"\n synapseLinks={[\n {\n text: 'Contact Us',\n props: {\n href: 'https://sagebionetworks.jira.com/servicedesk/customer/portals',\n },\n },\n {\n text: 'Plans',\n props: {\n href: PLANS_LINK,\n target: '_self',\n },\n },\n {\n text: 'Data Portals',\n props: { href: sageResourcesUrl.toString() },\n },\n {\n text: 'Donate',\n props: { href: 'https://sagebionetworks.org/donate' },\n },\n ]}\n />\n <SynapseLinksColumn\n category=\"Resources\"\n synapseLinks={[\n {\n text: 'Blog',\n props: { href: 'https://blog.synapse.org/' },\n },\n {\n text: 'FAQs',\n props: {\n href: 'https://help.synapse.org/docs/FAQ.2047967233.html',\n },\n },\n {\n text: 'Documentation',\n props: { href: 'https://help.synapse.org/docs/' },\n },\n {\n text: 'Python Client',\n props: {\n href: 'https://python-docs.synapse.org/en/stable/',\n },\n },\n ]}\n />\n <SynapseLinksColumn\n category=\"Sage Bionetworks\"\n synapseLinks={[\n {\n text: 'Sage Home Page',\n props: { href: 'https://sagebionetworks.org/' },\n },\n {\n text: 'Report Violations',\n props: {\n href: 'https://sagebionetworks.jira.com/servicedesk/customer/portal/20',\n },\n },\n {\n text: 'Trust Center',\n props: { href: 'https://sagebionetworks.org/trust-center' },\n },\n ]}\n />\n </Box>\n </Box>\n </Box>\n <Box\n sx={{\n display: 'flex',\n flexWrap: 'wrap',\n justifyContent: { xs: 'center', md: 'space-between' },\n alignItems: 'center',\n mt: '60px',\n rowGap: '40px',\n }}\n >\n <Box\n sx={{\n display: 'flex',\n columnGap: '20px',\n alignItems: 'center',\n flexWrap: 'wrap',\n justifyContent: { xs: 'center', md: undefined },\n }}\n >\n <SageFullLogo textColor=\"white\" width={285} />\n <Typography\n variant=\"body1\"\n sx={{\n color: 'primary.200',\n fontSize: '18px',\n }}\n >\n © Sage Bionetworks {currentYear}\n </Typography>\n </Box>\n <Box\n sx={{\n display: 'flex',\n columnGap: '15px',\n svg: {\n '&:hover': {\n stroke: 'rgba(255, 255, 255, .4)',\n // fill: 'rgba(245, 246, 241, .05)', //uncomment if extra emphasis is needed\n },\n },\n }}\n >\n <a\n href=\"https://github.com/Sage-Bionetworks\"\n target=\"_blank\"\n rel=\"noreferrer\"\n >\n <Github />\n </a>\n <a\n href=\"https://twitter.com/sagebio\"\n target=\"_blank\"\n rel=\"noreferrer\"\n >\n <Twitter />\n </a>\n <a\n href=\"https://www.linkedin.com/company/sage-bionetworks\"\n target=\"_blank\"\n rel=\"noreferrer\"\n >\n <LinkedIn />\n </a>\n <a\n href=\"https://www.facebook.com/sagebionetworks/\"\n target=\"_blank\"\n rel=\"noreferrer\"\n >\n <Facebook />\n </a>\n <a\n href=\"https://www.instagram.com/sagebionetworks/\"\n target=\"_blank\"\n rel=\"noreferrer\"\n >\n <Instagram />\n </a>\n <a\n href=\"https://www.youtube.com/channel/UCiWTMRdO82wNq6o8JOs3WzQ\"\n target=\"_blank\"\n rel=\"noreferrer\"\n >\n <Youtube />\n </a>\n </Box>\n </Box>\n </Box>\n {/* Versions and experimental mode */}\n <Box\n sx={{\n display: 'flex',\n flexWrap: 'wrap',\n justifyContent: 'space-between',\n backgroundColor: '#121B23',\n alignItems: 'center',\n p: '15px 50px',\n }}\n >\n <Box\n sx={{\n display: 'flex',\n flexWrap: 'wrap',\n columnGap: '40px',\n rowGap: '0px',\n color: 'primary.300',\n }}\n >\n <Typography\n variant=\"body1\"\n sx={{\n fontSize: '14px',\n }}\n >\n portal: {portalVersion}\n </Typography>\n <Typography\n variant=\"body1\"\n sx={{\n fontSize: '14px',\n }}\n >\n synapse-react-client: {srcVersion}\n </Typography>\n <Typography\n variant=\"body1\"\n sx={{\n fontSize: '14px',\n }}\n >\n repo: {repoVersion}\n </Typography>\n {realm && (\n <Stack direction=\"row\" alignItems=\"center\">\n <Typography\n variant=\"body1\"\n sx={{\n fontSize: '14px',\n }}\n >\n realm: {realm.name}\n </Typography>\n {realm.id !== SYNAPSE_REALM && (\n <Tooltip\n title={`Reset Realm${\n isAuthenticated ? ' (will log you out)' : ''\n }`}\n >\n <IconButton\n size=\"small\"\n sx={{ color: 'currentcolor' }}\n onClick={() => {\n void clearSession()\n }}\n >\n <LogoutTwoTone sx={{ fontSize: 'inherit' }} />\n </IconButton>\n </Tooltip>\n )}\n </Stack>\n )}\n </Box>\n <ExperimentalMode onExperimentalModeToggle={onExperimentalModeToggle} />\n </Box>\n </Box>\n )\n}\n\nexport default SynapseFooter\n"],"mappings":"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"}

package/dist/components/SynapseForm/NavButtons.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NavButtons.js","names":[],"sources":["../../../src/components/SynapseForm/NavButtons.tsx"],"sourcesContent":["import IconSvg from '../IconSvg/IconSvg'\nimport { Step, NavActionEnum } from './types'\nexport interface NavButtonsProps {\n isWizardMode?: boolean\n previousStepIds: string[]\n onNavAction: (action: NavActionEnum) => void\n steps: Step[]\n currentStep: Step\n isFormSubmitted?: boolean\n}\n\nexport interface NextStepLinkProps {\n onNavAction: (step: Step) => void\n steps: Step[]\n nextStepId: string \| undefined\n}\n\nexport function NavButtons(props: NavButtonsProps) {\n // in wizard mode we build an array of the previous steps. In regular mode back goes to\n // a previous order step\n const canGoBack = (props: NavButtonsProps): boolean => {\n if (props.isWizardMode) {\n return props.previousStepIds && props.previousStepIds.length > 0\n } else {\n return props.steps.findIndex(step => step.id === props.currentStep.id) > 0\n }\n }\n\n const previousButton = canGoBack(props) ? (\n <button\n type=\"button\"\n onClick={e => props.onNavAction(NavActionEnum.PREVIOUS)}\n className=\"btn btn-link nav-link prev\"\n >\n <IconSvg icon=\"chevronLeft\" />\n </button>\n ) : (\n <></>\n )\n\n const nextButton = !props.currentStep.final ? (\n <button\n type=\"button\"\n onClick={e => props.onNavAction(NavActionEnum.NEXT)}\n className=\"btn btn-link nav-link next\"\n >\n <IconSvg icon=\"chevronRight\" />\n </button>\n ) : (\n <></>\n )\n\n const saveButton = (\n <button\n type=\"button\"\n className=\"btn btn-action save\"\n disabled={props.isFormSubmitted}\n onClick={e => props.onNavAction(NavActionEnum.SAVE)}\n >\n SAVE\n </button>\n )\n\n return (\n <div>\n <hr></hr>\n <div className=\"buttonWrapper pull-right\">\n {previousButton} {nextButton} {saveButton}\n </div>\n </div>\n )\n}\n\nexport function NextStepLink(props: NextStepLinkProps) {\n const nextStep = props.steps.find(step => step.id === props.nextStepId)\n if (~~typeof~~ nextStep === 'undefined') {\n return <></>\n }\n return (\n <span className=\"nav-link\">\n <a onClick={e => props.onNavAction(nextStep)}>{nextStep.title}</a>\n <IconSvg icon=\"chevronRight\" />\n </span>\n )\n}\n"],"mappings":";;;;AAiBA,SAAgB,EAAW,GAAwB;CAWjD,IAAM,MARa,MACb,EAAM,eACD,EAAM,mBAAmB,EAAM,gBAAgB,SAAS,IAExD,EAAM,MAAM,WAAU,MAAQ,EAAK,OAAO,EAAM,YAAY,EAAE,IAAI,GAI5C,CAAK,IACpC,kBAAC,UAAD;EACE,MAAK;EACL,UAAS,MAAK,EAAM,YAAY,EAAc,QAAQ;EACtD,WAAU;YAEV,kBAAC,GAAD,EAAS,MAAK,cAAe,CAAA;CACvB,CAAA,IAER,kBAAA,GAAA,CAAI,CAAA,GAGA,IAAc,EAAM,YAAY,QASpC,kBAAA,GAAA,CAAI,CAAA,IARJ,kBAAC,UAAD;EACE,MAAK;EACL,UAAS,MAAK,EAAM,YAAY,EAAc,IAAI;EAClD,WAAU;YAEV,kBAAC,GAAD,EAAS,MAAK,eAAgB,CAAA;CACxB,CAAA,GAKJ,IACJ,kBAAC,UAAD;EACE,MAAK;EACL,WAAU;EACV,UAAU,EAAM;EAChB,UAAS,MAAK,EAAM,YAAY,EAAc,IAAI;YACnD;CAEO,CAAA;CAGV,OACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,MAAD,CAAQ,CAAA,GACR,kBAAC,OAAD;EAAK,WAAU;YAAf;GACG;GAAe;GAAE;GAAW;GAAE;EAC5B;GACF,EAAA,CAAA;AAET;AAEA,SAAgB,EAAa,GAA0B;CACrD,IAAM,IAAW,EAAM,MAAM,MAAK,MAAQ,EAAK,OAAO,EAAM,UAAU;CAItE,~~OAHW~~,MAAa,~~SACf~~,kBAAA,GAAA,CAAI,CAAA,IAGX,kBAAC,QAAD;EAAM,WAAU;YAAhB,CACE,kBAAC,KAAD;GAAG,UAAS,MAAK,EAAM,YAAY,CAAQ;aAAI,EAAS;EAAS,CAAA,GACjE,kBAAC,GAAD,EAAS,MAAK,eAAgB,CAAA,CAC1B;;AAEV"}
1	+ {"version":3,"file":"NavButtons.js","names":[],"sources":["../../../src/components/SynapseForm/NavButtons.tsx"],"sourcesContent":["import IconSvg from '../IconSvg/IconSvg'\nimport { Step, NavActionEnum } from './types'\nexport interface NavButtonsProps {\n isWizardMode?: boolean\n previousStepIds: string[]\n onNavAction: (action: NavActionEnum) => void\n steps: Step[]\n currentStep: Step\n isFormSubmitted?: boolean\n}\n\nexport interface NextStepLinkProps {\n onNavAction: (step: Step) => void\n steps: Step[]\n nextStepId: string \| undefined\n}\n\nexport function NavButtons(props: NavButtonsProps) {\n // in wizard mode we build an array of the previous steps. In regular mode back goes to\n // a previous order step\n const canGoBack = (props: NavButtonsProps): boolean => {\n if (props.isWizardMode) {\n return props.previousStepIds && props.previousStepIds.length > 0\n } else {\n return props.steps.findIndex(step => step.id === props.currentStep.id) > 0\n }\n }\n\n const previousButton = canGoBack(props) ? (\n <button\n type=\"button\"\n onClick={e => props.onNavAction(NavActionEnum.PREVIOUS)}\n className=\"btn btn-link nav-link prev\"\n >\n <IconSvg icon=\"chevronLeft\" />\n </button>\n ) : (\n <></>\n )\n\n const nextButton = !props.currentStep.final ? (\n <button\n type=\"button\"\n onClick={e => props.onNavAction(NavActionEnum.NEXT)}\n className=\"btn btn-link nav-link next\"\n >\n <IconSvg icon=\"chevronRight\" />\n </button>\n ) : (\n <></>\n )\n\n const saveButton = (\n <button\n type=\"button\"\n className=\"btn btn-action save\"\n disabled={props.isFormSubmitted}\n onClick={e => props.onNavAction(NavActionEnum.SAVE)}\n >\n SAVE\n </button>\n )\n\n return (\n <div>\n <hr></hr>\n <div className=\"buttonWrapper pull-right\">\n {previousButton} {nextButton} {saveButton}\n </div>\n </div>\n )\n}\n\nexport function NextStepLink(props: NextStepLinkProps) {\n const nextStep = props.steps.find(step => step.id === props.nextStepId)\n if (nextStep === undefined) {\n return <></>\n }\n return (\n <span className=\"nav-link\">\n <a onClick={e => props.onNavAction(nextStep)}>{nextStep.title}</a>\n <IconSvg icon=\"chevronRight\" />\n </span>\n )\n}\n"],"mappings":";;;;AAiBA,SAAgB,EAAW,GAAwB;CAWjD,IAAM,MARa,MACb,EAAM,eACD,EAAM,mBAAmB,EAAM,gBAAgB,SAAS,IAExD,EAAM,MAAM,WAAU,MAAQ,EAAK,OAAO,EAAM,YAAY,EAAE,IAAI,GAI5C,CAAK,IACpC,kBAAC,UAAD;EACE,MAAK;EACL,UAAS,MAAK,EAAM,YAAY,EAAc,QAAQ;EACtD,WAAU;YAEV,kBAAC,GAAD,EAAS,MAAK,cAAe,CAAA;CACvB,CAAA,IAER,kBAAA,GAAA,CAAI,CAAA,GAGA,IAAc,EAAM,YAAY,QASpC,kBAAA,GAAA,CAAI,CAAA,IARJ,kBAAC,UAAD;EACE,MAAK;EACL,UAAS,MAAK,EAAM,YAAY,EAAc,IAAI;EAClD,WAAU;YAEV,kBAAC,GAAD,EAAS,MAAK,eAAgB,CAAA;CACxB,CAAA,GAKJ,IACJ,kBAAC,UAAD;EACE,MAAK;EACL,WAAU;EACV,UAAU,EAAM;EAChB,UAAS,MAAK,EAAM,YAAY,EAAc,IAAI;YACnD;CAEO,CAAA;CAGV,OACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,MAAD,CAAQ,CAAA,GACR,kBAAC,OAAD;EAAK,WAAU;YAAf;GACG;GAAe;GAAE;GAAW;GAAE;EAC5B;GACF,EAAA,CAAA;AAET;AAEA,SAAgB,EAAa,GAA0B;CACrD,IAAM,IAAW,EAAM,MAAM,MAAK,MAAQ,EAAK,OAAO,EAAM,UAAU;CAItE,OAHI,MAAa,KAAA,IACR,kBAAA,GAAA,CAAI,CAAA,IAGX,kBAAC,QAAD;EAAM,WAAU;YAAhB,CACE,kBAAC,KAAD;GAAG,UAAS,MAAK,EAAM,YAAY,CAAQ;aAAI,EAAS;EAAS,CAAA,GACjE,kBAAC,GAAD,EAAS,MAAK,eAAgB,CAAA,CAC1B;;AAEV"}