synapse-react-client 4.0.19 → 4.0.20

package/dist/components/SustainabilityScorecard/Dial.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dial.js","names":[],"sources":["../../../src/components/SustainabilityScorecard/Dial.tsx"],"sourcesContent":["import React from 'react'\nimport { ReactComponent as LightDialPosition1 } from '../../assets/sustainability/dialPosition1.svg'\nimport { ReactComponent as LightDialPosition2 } from '../../assets/sustainability/dialPosition2.svg'\nimport { ReactComponent as LightDialPosition3 } from '../../assets/sustainability/dialPosition3.svg'\nimport { ReactComponent as LightDialPosition4 } from '../../assets/sustainability/dialPosition4.svg'\nimport { ReactComponent as DarkDialPosition1 } from '../../assets/sustainability/darkDialPosition1.svg'\nimport { ReactComponent as DarkDialPosition2 } from '../../assets/sustainability/darkDialPosition2.svg'\nimport { ReactComponent as DarkDialPosition3 } from '../../assets/sustainability/darkDialPosition3.svg'\nimport { ReactComponent as DarkDialPosition4 } from '../../assets/sustainability/darkDialPosition4.svg'\nimport DialLayout, { DialLayoutProps } from './DialLayout'\n\n// Returns a SVG dial image corresponding to the score descriptor (e.g. \"foundational\", \"intermediate\", etc.)\ntype DialProps = {\n  scoreDescriptor: string\n  isScorecardSummary?: boolean\n}\n\nexport type ScoreDescriptor =\n  | 'Foundational'\n  | 'Developing'\n  | 'Maturing'\n  | 'Stable'\n\nconst Dial = ({\n  scoreDescriptor,\n  isScorecardSummary,\n}: DialProps): React.ReactNode => {\n  const toolTipText: Record<ScoreDescriptor, string> = {\n    Foundational:\n      'Early-stage sustainability with opportunities for contributions',\n    Developing: 'Strong in key sustainability areas',\n    Maturing: 'Demonstrates strong sustainable practices',\n    Stable: 'Maintained with long-term resilience in mind',\n  }\n\n  const lightDialComponents: Record<string, DialLayoutProps> = {\n    foundational: { dial: <LightDialPosition1 />, label: 'Foundational' },\n    developing: { dial: <LightDialPosition2 />, label: 'Developing' },\n    maturing: { dial: <LightDialPosition3 />, label: 'Maturing' },\n    stable: { dial: <LightDialPosition4 />, label: 'Stable' },\n  }\n\n  const darkDialComponents: Record<string, DialLayoutProps> = {\n    foundational: { dial: <DarkDialPosition1 />, label: 'Foundational' },\n    developing: { dial: <DarkDialPosition2 />, label: 'Developing' },\n    maturing: { dial: <DarkDialPosition3 />, label: 'Maturing' },\n    stable: { dial: <DarkDialPosition4 />, label: 'Stable' },\n  }\n\n  const key = scoreDescriptor.toLowerCase()\n\n  const selectedMap = isScorecardSummary\n    ? darkDialComponents\n    : lightDialComponents\n\n  const selected = selectedMap[key]\n\n  if (!selected) return <LightDialPosition1 />\n\n  return (\n    <DialLayout\n      dial={selected.dial}\n      label={selected.label}\n      toolTipText={isScorecardSummary ? undefined : toolTipText[selected.label]}\n    />\n  )\n}\n\nexport default Dial\n"],"mappings":";;;;;;;;;;;;AAuBA,IAAM,KAAQ,EACZ,oBACA,4BACgC;CAChC,IAAM,IAA+C;EACnD,cACE;EACF,YAAY;EACZ,UAAU;EACV,QAAQ;EACT,EAEK,IAAuD;EAC3D,cAAc;GAAE,MAAM,kBAAC,GAAD,EAAsB,CAAA;GAAE,OAAO;GAAgB;EACrE,YAAY;GAAE,MAAM,kBAAC,GAAD,EAAsB,CAAA;GAAE,OAAO;GAAc;EACjE,UAAU;GAAE,MAAM,kBAAC,GAAD,EAAsB,CAAA;GAAE,OAAO;GAAY;EAC7D,QAAQ;GAAE,MAAM,kBAAC,GAAD,EAAsB,CAAA;GAAE,OAAO;GAAU;EAC1D,EAEK,IAAsD;EAC1D,cAAc;GAAE,MAAM,kBAAC,GAAD,EAAqB,CAAA;GAAE,OAAO;GAAgB;EACpE,YAAY;GAAE,MAAM,kBAAC,GAAD,EAAqB,CAAA;GAAE,OAAO;GAAc;EAChE,UAAU;GAAE,MAAM,kBAAC,GAAD,EAAqB,CAAA;GAAE,OAAO;GAAY;EAC5D,QAAQ;GAAE,MAAM,kBAAC,GAAD,EAAqB,CAAA;GAAE,OAAO;GAAU;EACzD,EAEK,IAAM,EAAgB,aAAa,EAMnC,KAJc,IAChB,IACA,GAEyB;AAI7B,QAFK,IAGH,kBAAC,GAAD;EACE,MAAM,EAAS;EACf,OAAO,EAAS;EAChB,aAAa,IAAqB,KAAA,IAAY,EAAY,EAAS;EACnE,CAAA,GAPkB,kBAAC,GAAD,EAAsB,CAAA"}
+{"version":3,"file":"Dial.js","names":[],"sources":["../../../src/components/SustainabilityScorecard/Dial.tsx"],"sourcesContent":["import React from 'react'\nimport { ReactComponent as LightDialPosition1 } from '../../assets/sustainability/dialPosition1.svg'\nimport { ReactComponent as LightDialPosition2 } from '../../assets/sustainability/dialPosition2.svg'\nimport { ReactComponent as LightDialPosition3 } from '../../assets/sustainability/dialPosition3.svg'\nimport { ReactComponent as LightDialPosition4 } from '../../assets/sustainability/dialPosition4.svg'\nimport { ReactComponent as DarkDialPosition1 } from '../../assets/sustainability/darkDialPosition1.svg'\nimport { ReactComponent as DarkDialPosition2 } from '../../assets/sustainability/darkDialPosition2.svg'\nimport { ReactComponent as DarkDialPosition3 } from '../../assets/sustainability/darkDialPosition3.svg'\nimport { ReactComponent as DarkDialPosition4 } from '../../assets/sustainability/darkDialPosition4.svg'\nimport DialLayout, { DialLayoutProps } from './DialLayout'\n\n// Returns a SVG dial image corresponding to the score descriptor (e.g. \"foundational\", \"intermediate\", etc.)\ntype DialProps = {\n  scoreDescriptor: string\n  isScorecardSummary?: boolean\n}\n\nexport type ScoreDescriptor =\n  | 'Foundational'\n  | 'Developing'\n  | 'Maturing'\n  | 'Stable'\n\nconst Dial = ({\n  scoreDescriptor,\n  isScorecardSummary,\n}: DialProps): React.ReactNode => {\n  const toolTipText: Record<ScoreDescriptor, string> = {\n    Foundational:\n      'Early-stage sustainability with opportunities for contributions',\n    Developing: 'Strong in key sustainability areas',\n    Maturing: 'Demonstrates strong sustainable practices',\n    Stable: 'Maintained with long-term resilience in mind',\n  }\n\n  const lightDialComponents: Record<string, DialLayoutProps> = {\n    foundational: { dial: <LightDialPosition1 />, label: 'Foundational' },\n    developing: { dial: <LightDialPosition2 />, label: 'Developing' },\n    maturing: { dial: <LightDialPosition3 />, label: 'Maturing' },\n    stable: { dial: <LightDialPosition4 />, label: 'Stable' },\n  }\n\n  const darkDialComponents: Record<string, DialLayoutProps> = {\n    foundational: { dial: <DarkDialPosition1 />, label: 'Foundational' },\n    developing: { dial: <DarkDialPosition2 />, label: 'Developing' },\n    maturing: { dial: <DarkDialPosition3 />, label: 'Maturing' },\n    stable: { dial: <DarkDialPosition4 />, label: 'Stable' },\n  }\n\n  const key = scoreDescriptor.toLowerCase()\n\n  const selectedMap = isScorecardSummary\n    ? darkDialComponents\n    : lightDialComponents\n\n  const selected = selectedMap[key]\n\n  if (!selected) return <LightDialPosition1 />\n\n  return (\n    <DialLayout\n      dial={selected.dial}\n      label={selected.label}\n      toolTipText={isScorecardSummary ? undefined : toolTipText[selected.label]}\n    />\n  )\n}\n\nexport default Dial\n"],"mappings":";;;;;;;;;;;;AAuBA,IAAM,KAAQ,EACZ,oBACA,4BACgC;CAChC,IAAM,IAA+C;EACnD,cACE;EACF,YAAY;EACZ,UAAU;EACV,QAAQ;CACV,GAEM,IAAuD;EAC3D,cAAc;GAAE,MAAM,kBAAC,GAAD,CAAqB,CAAA;GAAG,OAAO;EAAe;EACpE,YAAY;GAAE,MAAM,kBAAC,GAAD,CAAqB,CAAA;GAAG,OAAO;EAAa;EAChE,UAAU;GAAE,MAAM,kBAAC,GAAD,CAAqB,CAAA;GAAG,OAAO;EAAW;EAC5D,QAAQ;GAAE,MAAM,kBAAC,GAAD,CAAqB,CAAA;GAAG,OAAO;EAAS;CAC1D,GAEM,IAAsD;EAC1D,cAAc;GAAE,MAAM,kBAAC,GAAD,CAAoB,CAAA;GAAG,OAAO;EAAe;EACnE,YAAY;GAAE,MAAM,kBAAC,GAAD,CAAoB,CAAA;GAAG,OAAO;EAAa;EAC/D,UAAU;GAAE,MAAM,kBAAC,GAAD,CAAoB,CAAA;GAAG,OAAO;EAAW;EAC3D,QAAQ;GAAE,MAAM,kBAAC,GAAD,CAAoB,CAAA;GAAG,OAAO;EAAS;CACzD,GAEM,IAAM,EAAgB,YAAY,GAMlC,KAJc,IAChB,IACA,GAEyB;CAI7B,OAFK,IAGH,kBAAC,GAAD;EACE,MAAM,EAAS;EACf,OAAO,EAAS;EAChB,aAAa,IAAqB,KAAA,IAAY,EAAY,EAAS;CACpE,CAAA,IAPmB,kBAAC,GAAD,CAAqB,CAAA;AAS7C"}

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

@@ -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;EAAQ;WAAhD,CACG,GACD,kBAAC,GAAD;EAAK,IAAI;GAAE,SAAS;GAAQ,YAAY;GAAU,KAAK;GAAO;YAA9D,CACE,kBAAC,GAAD;GAAY,SAAQ;GAAa,IAAI,EAAE,QAAQ,gBAAgB;aAC5D;GACU,CAAA,EACZ,KACC,kBAAC,GAAD;GAAS,OAAO;aACd,kBAAC,GAAD,EAAa,IAAI;IAAE,OAAO;IAAQ,QAAQ;IAAQ,EAAI,CAAA;GAC9C,CAAA,CAER;IACA"}
+{"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"}

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

@@ -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;EAAY;WAAjD,CACE,kBAAC,GAAD;EACE,SAAQ;EACR,IAAI;GAAE,YAAY;GAAU,SAAS;GAAQ,KAAK;GAAO;YAF3D,CAIG,EAAO,OACR,kBAAC,GAAD;GAAS,OAAO,EAAO;GAAM,WAAU;aACrC,kBAAC,GAAD,EACE,IAAI;IACF,OAAO;IACP,QAAQ;IACR,OAAO;IACR,EACD,CAAA;GACM,CAAA,CACC;KACZ,EAAa,OAAW,SACvB,kBAAC,GAAD;EACE,IAAI;GACF,iBAAiB,EAA2B;GAC5C,cAAc;GACd,OAAO;GACP,QAAQ;GACR,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,YAAY;GACb;YAED,kBAAC,GAAD,EACE,IAAI;GAAE,OAAO;GAAwB,UAAU;GAAQ,EACvD,CAAA;EACE,CAAA,GAEN,kBAAC,GAAD;EACE,IAAI;GACF,iBAAiB,EAA2B;GAC5C,cAAc;GACd,OAAO;GACP,QAAQ;GACR,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,YAAY;GACb;YAED,kBAAC,GAAD,EACE,IAAI;GAAE,OAAO;GAAwB,UAAU;GAAQ,EACvD,CAAA;EACE,CAAA,CAEJ;GAnDkD,EAAO,IAmDzD,CACN,EACD,CAAA,EAKD,KAA2B,EAC/B,kBACA,8BACA,iBACA,OACA,kCACmD;CACnD,IAAM,EAAE,MAAM,GAAmB,iBAC/B,EAAwB,EAAa,EAEjC,IADW,GACF,CAAS;AAExB,KAAI,EACF,QAAO,kBAAC,GAAD;EAAU,OAAO;EAAQ,QAAQ;EAAU,CAAA;CAGpD,IAAM,IAAO,GAAmB,YAAa;AAE7C,KAAI,GAAM,MAAM,WAAW,EACzB,QACE,kBAAC,GAAD;EAAO,IAAI;GAAE,SAAS;GAAQ,SAAS;GAAQ,GAAG;GAAI;YAAtD,CACE,kBAAC,GAAD;GAAY,IAAI,EAAE,eAAe,QAAQ;GAAE,SAAQ;aAAmB;GAEzD,CAAA,EACb,kBAAC,GAAD,EAAsB,CAAA,CAChB;;CAIZ,IAAM,IAA0B,EAC9B,GACA,EACD,EAEK,IAAkB,GAAM,KAAK,GAAG,OAAO,IAEvC,IAAe,EACnB,GAAM,KAAK,IACX,GACA,EACD;AAED,QACE,kBAAC,GAAD;EACE,IAAI;GACF,SAAS;GACT,eAAe;IAAE,IAAI;IAAU,IAAI;IAAO;GAC1C,SAAS;GACT,KAAK;GACL,GAAG;GACJ;YAPH,CASE,kBAAC,GAAD;GAAO,IAAI;IAAE,SAAS;IAAQ,KAAK;IAAQ,YAAY;IAAU;aAAjE,CACE,kBAAC,GAAD;IAAY,SAAQ;cAAmB;IAAiC,CAAA,EACxE,kBAAC,GAAD,EAAM,iBAAiB,KAAmB,IAAM,CAAA,CAC1C;MACR,kBAAC,GAAD;GAAO,IAAI;IAAE,MAAM;IAAG,KAAK;IAAO;aAAlC,CACE,kBAAC,GAAD;IAAyB;IAA6B;IAAiB,CAAA,EACtE,KACC,kBAAC,GAAD;IACE,WAAW;IACX,IAAI;KAAE,UAAU;KAA0B;KAAQ;IAClD,IAAI;KAAE,SAAS;KAAY,UAAU;KAAQ;cAC9C;IAES,CAAA,CAEN;KACJ"}
+{"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"}

package/dist/components/SustainabilityScorecard/SustainabilityScorecardSummary.js.map

@@ -1 +1 @@
-{"version":3,"file":"SustainabilityScorecardSummary.js","names":[],"sources":["../../../src/components/SustainabilityScorecard/SustainabilityScorecardSummary.tsx"],"sourcesContent":["import React from 'react'\nimport useGetQueryResultBundle from '@/synapse-queries/entity/useGetQueryResultBundle'\nimport { getFieldIndex } from '@/utils/functions/queryUtils'\nimport {\n  getMetricValues,\n  SUSTAINABILITY_ICON_COLORS,\n  SustainabilityScorecardBaseProps,\n} from './SustainabilityScorecardUtils'\nimport { Box, Card, Skeleton, Stack, Typography, useTheme } from '@mui/material'\nimport CheckCircleIcon from '@mui/icons-material/CheckCircle'\nimport CancelIcon from '@mui/icons-material/Cancel'\nimport NoContentAvailable from '../SynapseTable/NoContentAvailable'\nimport Dial from './Dial'\nimport MarkdownSynapse from '../Markdown/MarkdownSynapse'\n\nexport type SustainabilityScorecardSummaryProps =\n  SustainabilityScorecardBaseProps & {\n    description: React.ReactNode\n  }\n\ntype MetricSummaryRowProps = {\n  label: string\n  markdownText: string\n  index: number\n  metricValues: string[]\n}\n\nconst MetricSummaryRow = ({\n  label,\n  markdownText,\n  metricValues,\n  index,\n}: MetricSummaryRowProps): React.ReactNode => {\n  return (\n    <Box\n      sx={{\n        display: 'flex',\n        padding: '24px 32px',\n        alignItems: 'center',\n      }}\n    >\n      <Box sx={{ maxWidth: '800px' }}>\n        <Typography variant=\"headline3\" sx={{ marginBottom: '12px' }}>\n          {label}\n        </Typography>\n        <Box\n          sx={{\n            '.markdown p': {\n              color: 'grey.700',\n            },\n          }}\n        >\n          <MarkdownSynapse markdown={markdownText} />\n        </Box>\n      </Box>\n      {metricValues[index] === 'true' ? (\n        <CheckCircleIcon\n          sx={{\n            marginLeft: 'auto',\n            fill: SUSTAINABILITY_ICON_COLORS.check,\n            width: '32px',\n            height: '32px',\n          }}\n        />\n      ) : (\n        <CancelIcon\n          sx={{\n            marginLeft: 'auto',\n            fill: SUSTAINABILITY_ICON_COLORS.close,\n            width: '32px',\n            height: '32px',\n          }}\n        />\n      )}\n    </Box>\n  )\n}\n\nconst SustainabilityScorecardSummary = ({\n  queryRequest,\n  description,\n  metricsConfig,\n  scoreDescriptorColumnName,\n}: SustainabilityScorecardSummaryProps): React.ReactNode => {\n  const theme = useTheme()\n\n  const { data: queryResultBundle, isLoading } =\n    useGetQueryResultBundle(queryRequest)\n\n  if (isLoading) {\n    return <Skeleton width={'100%'} height={'90px'} />\n  }\n\n  const data = queryResultBundle?.queryResult!.queryResults\n\n  if (!data?.rows?.length) {\n    return (\n      <Box sx={{ paddingTop: '60px' }}>\n        <NoContentAvailable />\n      </Box>\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    <Stack>\n      <Box\n        sx={{\n          display: 'flex',\n          gap: '40px',\n          marginBottom: '30px',\n          padding: '60px 12px 4px 0px',\n        }}\n      >\n        <Box sx={{ flex: 1 }}>\n          <Typography variant=\"headline1\" sx={{ marginBottom: '10px' }}>\n            Sustainability Index\n          </Typography>\n          {description}\n        </Box>\n        <Dial\n          scoreDescriptor={scoreDescriptor ?? ''}\n          isScorecardSummary={true}\n        />\n      </Box>\n      <Card>\n        {metricsConfig.map((metric, index) => (\n          <Box\n            key={metric.key}\n            sx={{\n              borderBottom:\n                index !== metricsConfig.length - 1\n                  ? `1px solid ${theme.palette.grey[300]}`\n                  : undefined,\n            }}\n          >\n            <MetricSummaryRow\n              label={metric.label}\n              markdownText={metric.text ?? ''}\n              index={index}\n              metricValues={metricValues}\n            />\n          </Box>\n        ))}\n      </Card>\n    </Stack>\n  )\n}\n\nexport default SustainabilityScorecardSummary\n"],"mappings":";;;;;;;;;;;;AA2BA,IAAM,KAAoB,EACxB,UACA,iBACA,iBACA,eAGE,kBAAC,GAAD;CACE,IAAI;EACF,SAAS;EACT,SAAS;EACT,YAAY;EACb;WALH,CAOE,kBAAC,GAAD;EAAK,IAAI,EAAE,UAAU,SAAS;YAA9B,CACE,kBAAC,GAAD;GAAY,SAAQ;GAAY,IAAI,EAAE,cAAc,QAAQ;aACzD;GACU,CAAA,EACb,kBAAC,GAAD;GACE,IAAI,EACF,eAAe,EACb,OAAO,YACR,EACF;aAED,kBAAC,GAAD,EAAiB,UAAU,GAAgB,CAAA;GACvC,CAAA,CACF;KACL,EAAa,OAAW,SACvB,kBAAC,GAAD,EACE,IAAI;EACF,YAAY;EACZ,MAAM,EAA2B;EACjC,OAAO;EACP,QAAQ;EACT,EACD,CAAA,GAEF,kBAAC,GAAD,EACE,IAAI;EACF,YAAY;EACZ,MAAM,EAA2B;EACjC,OAAO;EACP,QAAQ;EACT,EACD,CAAA,CAEA;IAIJ,KAAkC,EACtC,iBACA,gBACA,kBACA,mCAC0D;CAC1D,IAAM,IAAQ,GAAU,EAElB,EAAE,MAAM,GAAmB,iBAC/B,EAAwB,EAAa;AAEvC,KAAI,EACF,QAAO,kBAAC,GAAD;EAAU,OAAO;EAAQ,QAAQ;EAAU,CAAA;CAGpD,IAAM,IAAO,GAAmB,YAAa;AAE7C,KAAI,CAAC,GAAM,MAAM,OACf,QACE,kBAAC,GAAD;EAAK,IAAI,EAAE,YAAY,QAAQ;YAC7B,kBAAC,GAAD,EAAsB,CAAA;EAClB,CAAA;CAIV,IAAM,IAA0B,EAC9B,GACA,EACD,EAEK,IAAkB,GAAM,KAAK,GAAG,OAAO,IAEvC,IAAe,EACnB,GAAM,KAAK,IACX,GACA,EACD;AAED,QACE,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD;EACE,IAAI;GACF,SAAS;GACT,KAAK;GACL,cAAc;GACd,SAAS;GACV;YANH,CAQE,kBAAC,GAAD;GAAK,IAAI,EAAE,MAAM,GAAG;aAApB,CACE,kBAAC,GAAD;IAAY,SAAQ;IAAY,IAAI,EAAE,cAAc,QAAQ;cAAE;IAEjD,CAAA,EACZ,EACG;MACN,kBAAC,GAAD;GACE,iBAAiB,KAAmB;GACpC,oBAAoB;GACpB,CAAA,CACE;KACN,kBAAC,GAAD,EAAA,UACG,EAAc,KAAK,GAAQ,MAC1B,kBAAC,GAAD;EAEE,IAAI,EACF,cACE,MAAU,EAAc,SAAS,IAE7B,KAAA,IADA,aAAa,EAAM,QAAQ,KAAK,QAEvC;YAED,kBAAC,GAAD;GACE,OAAO,EAAO;GACd,cAAc,EAAO,QAAQ;GACtB;GACO;GACd,CAAA;EACE,EAdC,EAAO,IAcR,CACN,EACG,CAAA,CACD,EAAA,CAAA"}
+{"version":3,"file":"SustainabilityScorecardSummary.js","names":[],"sources":["../../../src/components/SustainabilityScorecard/SustainabilityScorecardSummary.tsx"],"sourcesContent":["import React from 'react'\nimport useGetQueryResultBundle from '@/synapse-queries/entity/useGetQueryResultBundle'\nimport { getFieldIndex } from '@/utils/functions/queryUtils'\nimport {\n  getMetricValues,\n  SUSTAINABILITY_ICON_COLORS,\n  SustainabilityScorecardBaseProps,\n} from './SustainabilityScorecardUtils'\nimport { Box, Card, Skeleton, Stack, Typography, useTheme } from '@mui/material'\nimport CheckCircleIcon from '@mui/icons-material/CheckCircle'\nimport CancelIcon from '@mui/icons-material/Cancel'\nimport NoContentAvailable from '../SynapseTable/NoContentAvailable'\nimport Dial from './Dial'\nimport MarkdownSynapse from '../Markdown/MarkdownSynapse'\n\nexport type SustainabilityScorecardSummaryProps =\n  SustainabilityScorecardBaseProps & {\n    description: React.ReactNode\n  }\n\ntype MetricSummaryRowProps = {\n  label: string\n  markdownText: string\n  index: number\n  metricValues: string[]\n}\n\nconst MetricSummaryRow = ({\n  label,\n  markdownText,\n  metricValues,\n  index,\n}: MetricSummaryRowProps): React.ReactNode => {\n  return (\n    <Box\n      sx={{\n        display: 'flex',\n        padding: '24px 32px',\n        alignItems: 'center',\n      }}\n    >\n      <Box sx={{ maxWidth: '800px' }}>\n        <Typography variant=\"headline3\" sx={{ marginBottom: '12px' }}>\n          {label}\n        </Typography>\n        <Box\n          sx={{\n            '.markdown p': {\n              color: 'grey.700',\n            },\n          }}\n        >\n          <MarkdownSynapse markdown={markdownText} />\n        </Box>\n      </Box>\n      {metricValues[index] === 'true' ? (\n        <CheckCircleIcon\n          sx={{\n            marginLeft: 'auto',\n            fill: SUSTAINABILITY_ICON_COLORS.check,\n            width: '32px',\n            height: '32px',\n          }}\n        />\n      ) : (\n        <CancelIcon\n          sx={{\n            marginLeft: 'auto',\n            fill: SUSTAINABILITY_ICON_COLORS.close,\n            width: '32px',\n            height: '32px',\n          }}\n        />\n      )}\n    </Box>\n  )\n}\n\nconst SustainabilityScorecardSummary = ({\n  queryRequest,\n  description,\n  metricsConfig,\n  scoreDescriptorColumnName,\n}: SustainabilityScorecardSummaryProps): React.ReactNode => {\n  const theme = useTheme()\n\n  const { data: queryResultBundle, isLoading } =\n    useGetQueryResultBundle(queryRequest)\n\n  if (isLoading) {\n    return <Skeleton width={'100%'} height={'90px'} />\n  }\n\n  const data = queryResultBundle?.queryResult!.queryResults\n\n  if (!data?.rows?.length) {\n    return (\n      <Box sx={{ paddingTop: '60px' }}>\n        <NoContentAvailable />\n      </Box>\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    <Stack>\n      <Box\n        sx={{\n          display: 'flex',\n          gap: '40px',\n          marginBottom: '30px',\n          padding: '60px 12px 4px 0px',\n        }}\n      >\n        <Box sx={{ flex: 1 }}>\n          <Typography variant=\"headline1\" sx={{ marginBottom: '10px' }}>\n            Sustainability Index\n          </Typography>\n          {description}\n        </Box>\n        <Dial\n          scoreDescriptor={scoreDescriptor ?? ''}\n          isScorecardSummary={true}\n        />\n      </Box>\n      <Card>\n        {metricsConfig.map((metric, index) => (\n          <Box\n            key={metric.key}\n            sx={{\n              borderBottom:\n                index !== metricsConfig.length - 1\n                  ? `1px solid ${theme.palette.grey[300]}`\n                  : undefined,\n            }}\n          >\n            <MetricSummaryRow\n              label={metric.label}\n              markdownText={metric.text ?? ''}\n              index={index}\n              metricValues={metricValues}\n            />\n          </Box>\n        ))}\n      </Card>\n    </Stack>\n  )\n}\n\nexport default SustainabilityScorecardSummary\n"],"mappings":";;;;;;;;;;;;AA2BA,IAAM,KAAoB,EACxB,UACA,iBACA,iBACA,eAGE,kBAAC,GAAD;CACE,IAAI;EACF,SAAS;EACT,SAAS;EACT,YAAY;CACd;WALF,CAOE,kBAAC,GAAD;EAAK,IAAI,EAAE,UAAU,QAAQ;YAA7B,CACE,kBAAC,GAAD;GAAY,SAAQ;GAAY,IAAI,EAAE,cAAc,OAAO;aACxD;EACS,CAAA,GACZ,kBAAC,GAAD;GACE,IAAI,EACF,eAAe,EACb,OAAO,WACT,EACF;aAEA,kBAAC,GAAD,EAAiB,UAAU,EAAe,CAAA;EACvC,CAAA,CACF;KACJ,EAAa,OAAW,SACvB,kBAAC,GAAD,EACE,IAAI;EACF,YAAY;EACZ,MAAM,EAA2B;EACjC,OAAO;EACP,QAAQ;CACV,EACD,CAAA,IAED,kBAAC,GAAD,EACE,IAAI;EACF,YAAY;EACZ,MAAM,EAA2B;EACjC,OAAO;EACP,QAAQ;CACV,EACD,CAAA,CAEA;IAIH,KAAkC,EACtC,iBACA,gBACA,kBACA,mCAC0D;CAC1D,IAAM,IAAQ,EAAS,GAEjB,EAAE,MAAM,GAAmB,iBAC/B,EAAwB,CAAY;CAEtC,IAAI,GACF,OAAO,kBAAC,GAAD;EAAU,OAAO;EAAQ,QAAQ;CAAS,CAAA;CAGnD,IAAM,IAAO,GAAmB,YAAa;CAE7C,IAAI,CAAC,GAAM,MAAM,QACf,OACE,kBAAC,GAAD;EAAK,IAAI,EAAE,YAAY,OAAO;YAC5B,kBAAC,GAAD,CAAqB,CAAA;CAClB,CAAA;CAIT,IAAM,IAA0B,EAC9B,GACA,CACF,GAEM,IAAkB,GAAM,KAAK,GAAG,OAAO,IAEvC,IAAe,EACnB,GAAM,KAAK,IACX,GACA,CACF;CAEA,OACE,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD;EACE,IAAI;GACF,SAAS;GACT,KAAK;GACL,cAAc;GACd,SAAS;EACX;YANF,CAQE,kBAAC,GAAD;GAAK,IAAI,EAAE,MAAM,EAAE;aAAnB,CACE,kBAAC,GAAD;IAAY,SAAQ;IAAY,IAAI,EAAE,cAAc,OAAO;cAAG;GAElD,CAAA,GACX,CACE;MACL,kBAAC,GAAD;GACE,iBAAiB,KAAmB;GACpC,oBAAoB;EACrB,CAAA,CACE;KACL,kBAAC,GAAD,EAAA,UACG,EAAc,KAAK,GAAQ,MAC1B,kBAAC,GAAD;EAEE,IAAI,EACF,cACE,MAAU,EAAc,SAAS,IAE7B,KAAA,IADA,aAAa,EAAM,QAAQ,KAAK,OAExC;YAEA,kBAAC,GAAD;GACE,OAAO,EAAO;GACd,cAAc,EAAO,QAAQ;GACtB;GACO;EACf,CAAA;CACE,GAdE,EAAO,GAcT,CACN,EACG,CAAA,CACD,EAAA,CAAA;AAEX"}

package/dist/components/SustainabilityScorecard/SustainabilityScorecardUtils.js.map

@@ -1 +1 @@
-{"version":3,"file":"SustainabilityScorecardUtils.js","names":[],"sources":["../../../src/components/SustainabilityScorecard/SustainabilityScorecardUtils.tsx"],"sourcesContent":["import {\n  QueryBundleRequest,\n  QueryResultBundle,\n  Row,\n} from '@sage-bionetworks/synapse-types'\nimport { getFieldIndex } from '@/utils/functions/queryUtils'\nimport useGetQueryResultBundle from '@/synapse-queries/entity/useGetQueryResultBundle'\nimport { SustainabilityScorecardProps } from './SustainabilityScorecard'\n\nexport const SUSTAINABILITY_ICON_COLORS = {\n  check: '#52A31C',\n  close: '#C13415',\n}\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 SustainabilityScorecardBaseProps = {\n  queryRequest: QueryBundleRequest\n  metricsConfig: MetricsConfig[]\n  /** Name of the URL search parameter used to filter the data. */\n  searchParamKey: string\n  /** The name of the column in the table to apply the filter to. */\n  filterColumn: string\n  scoreDescriptorColumnName: string\n}\n\n/**\n * Maps each metric key to its value in the row\n * Returns an array of metric values in the same order as `metricsConfig`\n */\nexport const getMetricValues = (\n  row: Row | undefined,\n  queryResultBundle: QueryResultBundle | undefined,\n  metricsConfig: MetricsConfig[],\n) => {\n  if (!row) return []\n  return metricsConfig.map(metric => {\n    const index = getFieldIndex(metric.key, queryResultBundle)\n    return row.values[index] ?? ''\n  })\n}\n\nexport const getSelectedColumns = (\n  metricsConfig: MetricsConfig[],\n  scoreDescriptorColumnName: string,\n): string[] =>\n  metricsConfig.map(metric => metric.key).concat(scoreDescriptorColumnName)\n\n/**\n * Creates an array of metric config objects from a QueryResultBundle.\n * @param bundle - The Synapse QueryResultBundle containing metric config data (key, label, summaryText, tooltipText)\n * @param textColumn - The name of the column to use for the `text` field ('summaryText' for the SustainabilityScorecardSummary component and 'tooltipText' for the SustainabilityScorecard component)\n */\nexport function getMetricConfig(\n  bundle: QueryResultBundle | undefined,\n  textColumn: 'summaryText' | 'tooltipText',\n): MetricsConfig[] {\n  const rows = bundle?.queryResult?.queryResults?.rows\n  const headers = bundle?.queryResult?.queryResults?.headers\n  if (!rows || !headers) return []\n\n  const keyColIndex = getFieldIndex('key', bundle)\n  const labelColIndex = getFieldIndex('label', bundle)\n  const textColIndex = getFieldIndex(textColumn, bundle)\n\n  return rows.map(row => ({\n    key: row.values[keyColIndex] ?? '',\n    label: row.values[labelColIndex] ?? '',\n    text: row.values[textColIndex] ?? '',\n  }))\n}\n\n/**\n * Custom hook that returns the provided SustainabilityScorecardProps only if the query returns data.\n * Helps conditionally render `SustainabilityScorecard` component\n * @param props - The props containing the queryRequest, metricsConfig, searchParamKey, filterColumn, and scoreDescriptorColumnName.\n */\nexport function useSustainabilityScorecardIfHasData(\n  props: SustainabilityScorecardProps,\n): SustainabilityScorecardProps | undefined {\n  const { data: queryResultBundle, isLoading } = useGetQueryResultBundle(\n    props.queryRequest,\n  )\n\n  const rows = queryResultBundle?.queryResult?.queryResults?.rows\n  const hasSustainabilityData = Array.isArray(rows) && rows.length > 0\n\n  if (isLoading || !hasSustainabilityData) {\n    return undefined\n  }\n\n  return props\n}\n"],"mappings":";;;AASA,IAAa,IAA6B;CACxC,OAAO;CACP,OAAO;CACR,EAyBY,KACX,GACA,GACA,MAEK,IACE,EAAc,KAAI,MAAU;CACjC,IAAM,IAAQ,EAAc,EAAO,KAAK,EAAkB;AAC1D,QAAO,EAAI,OAAO,MAAU;EAC5B,GAJe,EAAE,EAOR,KACX,GACA,MAEA,EAAc,KAAI,MAAU,EAAO,IAAI,CAAC,OAAO,EAA0B;AAO3E,SAAgB,EACd,GACA,GACiB;CACjB,IAAM,IAAO,GAAQ,aAAa,cAAc,MAC1C,IAAU,GAAQ,aAAa,cAAc;AACnD,KAAI,CAAC,KAAQ,CAAC,EAAS,QAAO,EAAE;CAEhC,IAAM,IAAc,EAAc,OAAO,EAAO,EAC1C,IAAgB,EAAc,SAAS,EAAO,EAC9C,IAAe,EAAc,GAAY,EAAO;AAEtD,QAAO,EAAK,KAAI,OAAQ;EACtB,KAAK,EAAI,OAAO,MAAgB;EAChC,OAAO,EAAI,OAAO,MAAkB;EACpC,MAAM,EAAI,OAAO,MAAiB;EACnC,EAAE;;AAQL,SAAgB,EACd,GAC0C;CAC1C,IAAM,EAAE,MAAM,GAAmB,iBAAc,EAC7C,EAAM,aACP,EAEK,IAAO,GAAmB,aAAa,cAAc,MACrD,IAAwB,MAAM,QAAQ,EAAK,IAAI,EAAK,SAAS;AAE/D,YAAa,CAAC,GAIlB,QAAO"}
+{"version":3,"file":"SustainabilityScorecardUtils.js","names":[],"sources":["../../../src/components/SustainabilityScorecard/SustainabilityScorecardUtils.tsx"],"sourcesContent":["import {\n  QueryBundleRequest,\n  QueryResultBundle,\n  Row,\n} from '@sage-bionetworks/synapse-types'\nimport { getFieldIndex } from '@/utils/functions/queryUtils'\nimport useGetQueryResultBundle from '@/synapse-queries/entity/useGetQueryResultBundle'\nimport { SustainabilityScorecardProps } from './SustainabilityScorecard'\n\nexport const SUSTAINABILITY_ICON_COLORS = {\n  check: '#52A31C',\n  close: '#C13415',\n}\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 SustainabilityScorecardBaseProps = {\n  queryRequest: QueryBundleRequest\n  metricsConfig: MetricsConfig[]\n  /** Name of the URL search parameter used to filter the data. */\n  searchParamKey: string\n  /** The name of the column in the table to apply the filter to. */\n  filterColumn: string\n  scoreDescriptorColumnName: string\n}\n\n/**\n * Maps each metric key to its value in the row\n * Returns an array of metric values in the same order as `metricsConfig`\n */\nexport const getMetricValues = (\n  row: Row | undefined,\n  queryResultBundle: QueryResultBundle | undefined,\n  metricsConfig: MetricsConfig[],\n) => {\n  if (!row) return []\n  return metricsConfig.map(metric => {\n    const index = getFieldIndex(metric.key, queryResultBundle)\n    return row.values[index] ?? ''\n  })\n}\n\nexport const getSelectedColumns = (\n  metricsConfig: MetricsConfig[],\n  scoreDescriptorColumnName: string,\n): string[] =>\n  metricsConfig.map(metric => metric.key).concat(scoreDescriptorColumnName)\n\n/**\n * Creates an array of metric config objects from a QueryResultBundle.\n * @param bundle - The Synapse QueryResultBundle containing metric config data (key, label, summaryText, tooltipText)\n * @param textColumn - The name of the column to use for the `text` field ('summaryText' for the SustainabilityScorecardSummary component and 'tooltipText' for the SustainabilityScorecard component)\n */\nexport function getMetricConfig(\n  bundle: QueryResultBundle | undefined,\n  textColumn: 'summaryText' | 'tooltipText',\n): MetricsConfig[] {\n  const rows = bundle?.queryResult?.queryResults?.rows\n  const headers = bundle?.queryResult?.queryResults?.headers\n  if (!rows || !headers) return []\n\n  const keyColIndex = getFieldIndex('key', bundle)\n  const labelColIndex = getFieldIndex('label', bundle)\n  const textColIndex = getFieldIndex(textColumn, bundle)\n\n  return rows.map(row => ({\n    key: row.values[keyColIndex] ?? '',\n    label: row.values[labelColIndex] ?? '',\n    text: row.values[textColIndex] ?? '',\n  }))\n}\n\n/**\n * Custom hook that returns the provided SustainabilityScorecardProps only if the query returns data.\n * Helps conditionally render `SustainabilityScorecard` component\n * @param props - The props containing the queryRequest, metricsConfig, searchParamKey, filterColumn, and scoreDescriptorColumnName.\n */\nexport function useSustainabilityScorecardIfHasData(\n  props: SustainabilityScorecardProps,\n): SustainabilityScorecardProps | undefined {\n  const { data: queryResultBundle, isLoading } = useGetQueryResultBundle(\n    props.queryRequest,\n  )\n\n  const rows = queryResultBundle?.queryResult?.queryResults?.rows\n  const hasSustainabilityData = Array.isArray(rows) && rows.length > 0\n\n  if (isLoading || !hasSustainabilityData) {\n    return undefined\n  }\n\n  return props\n}\n"],"mappings":";;;AASA,IAAa,IAA6B;CACxC,OAAO;CACP,OAAO;AACT,GAyBa,KACX,GACA,GACA,MAEK,IACE,EAAc,KAAI,MAAU;CACjC,IAAM,IAAQ,EAAc,EAAO,KAAK,CAAiB;CACzD,OAAO,EAAI,OAAO,MAAU;AAC9B,CAAC,IAJgB,CAAC,GAOP,KACX,GACA,MAEA,EAAc,KAAI,MAAU,EAAO,GAAG,EAAE,OAAO,CAAyB;AAO1E,SAAgB,EACd,GACA,GACiB;CACjB,IAAM,IAAO,GAAQ,aAAa,cAAc,MAC1C,IAAU,GAAQ,aAAa,cAAc;CACnD,IAAI,CAAC,KAAQ,CAAC,GAAS,OAAO,CAAC;CAE/B,IAAM,IAAc,EAAc,OAAO,CAAM,GACzC,IAAgB,EAAc,SAAS,CAAM,GAC7C,IAAe,EAAc,GAAY,CAAM;CAErD,OAAO,EAAK,KAAI,OAAQ;EACtB,KAAK,EAAI,OAAO,MAAgB;EAChC,OAAO,EAAI,OAAO,MAAkB;EACpC,MAAM,EAAI,OAAO,MAAiB;CACpC,EAAE;AACJ;AAOA,SAAgB,EACd,GAC0C;CAC1C,IAAM,EAAE,MAAM,GAAmB,iBAAc,EAC7C,EAAM,YACR,GAEM,IAAO,GAAmB,aAAa,cAAc,MACrD,IAAwB,MAAM,QAAQ,CAAI,KAAK,EAAK,SAAS;CAE/D,WAAa,CAAC,IAIlB,OAAO;AACT"}

package/dist/components/SynapseChat/AccessLevelMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccessLevelMenu.js","names":[],"sources":["../../../src/components/SynapseChat/AccessLevelMenu.tsx"],"sourcesContent":["import { useState } from 'react'\nimport { Box, Typography } from '@mui/material'\nimport { AgentAccessLevel } from '@sage-bionetworks/synapse-types'\nimport DropdownSelect from '../DropdownSelect'\n\nexport type AccessLevelMenuProps = {\n  initAccessLevel: AgentAccessLevel\n  onChange: (newAccessLevel: AgentAccessLevel) => void\n}\n\nconst accessLevelOptions = [\n  { value: AgentAccessLevel.PUBLICLY_ACCESSIBLE, label: 'Public Data Only' },\n  {\n    value: AgentAccessLevel.READ_YOUR_PRIVATE_DATA,\n    label: 'Read Your Private Data',\n  },\n  {\n    value: AgentAccessLevel.WRITE_YOUR_PRIVATE_DATA,\n    label: 'Read & Write Your Data',\n  },\n]\n\nexport function AccessLevelMenu({\n  onChange,\n  initAccessLevel,\n}: AccessLevelMenuProps) {\n  const initOption = accessLevelOptions.findIndex(\n    v => v.value == initAccessLevel,\n  )\n  const options = accessLevelOptions.map(v => v.label)\n  const [selectedIndex, setSelectedIndex] = useState(initOption)\n  return (\n    <Box\n      sx={{\n        display: 'flex',\n        justifyContent: 'flex-end',\n        mt: '20px',\n      }}\n    >\n      <Typography\n        variant=\"label\"\n        sx={{ gridColumn: '2', mt: '10px', mr: '15px' }}\n      >\n        Access:\n      </Typography>\n      <DropdownSelect\n        variant={'outlined'}\n        options={options}\n        selectedIndex={selectedIndex}\n        setSelectedIndex={index => {\n          if (selectedIndex !== index) {\n            setSelectedIndex(index)\n            onChange(accessLevelOptions[index].value)\n          }\n        }}\n      />\n    </Box>\n  )\n}\n\nexport default AccessLevelMenu\n"],"mappings":";;;;;;AAUA,IAAM,IAAqB;CACzB;EAAE,OAAO,EAAiB;EAAqB,OAAO;EAAoB;CAC1E;EACE,OAAO,EAAiB;EACxB,OAAO;EACR;CACD;EACE,OAAO,EAAiB;EACxB,OAAO;EACR;CACF;AAED,SAAgB,EAAgB,EAC9B,aACA,sBACuB;CACvB,IAAM,IAAa,EAAmB,WACpC,MAAK,EAAE,SAAS,EACjB,EACK,IAAU,EAAmB,KAAI,MAAK,EAAE,MAAM,EAC9C,CAAC,GAAe,KAAoB,EAAS,EAAW;AAC9D,QACE,kBAAC,GAAD;EACE,IAAI;GACF,SAAS;GACT,gBAAgB;GAChB,IAAI;GACL;YALH,CAOE,kBAAC,GAAD;GACE,SAAQ;GACR,IAAI;IAAE,YAAY;IAAK,IAAI;IAAQ,IAAI;IAAQ;aAChD;GAEY,CAAA,EACb,kBAAC,GAAD;GACE,SAAS;GACA;GACM;GACf,mBAAkB,MAAS;AACzB,IAAI,MAAkB,MACpB,EAAiB,EAAM,EACvB,EAAS,EAAmB,GAAO,MAAM;;GAG7C,CAAA,CACE"}
+{"version":3,"file":"AccessLevelMenu.js","names":[],"sources":["../../../src/components/SynapseChat/AccessLevelMenu.tsx"],"sourcesContent":["import { useState } from 'react'\nimport { Box, Typography } from '@mui/material'\nimport { AgentAccessLevel } from '@sage-bionetworks/synapse-types'\nimport DropdownSelect from '../DropdownSelect'\n\nexport type AccessLevelMenuProps = {\n  initAccessLevel: AgentAccessLevel\n  onChange: (newAccessLevel: AgentAccessLevel) => void\n}\n\nconst accessLevelOptions = [\n  { value: AgentAccessLevel.PUBLICLY_ACCESSIBLE, label: 'Public Data Only' },\n  {\n    value: AgentAccessLevel.READ_YOUR_PRIVATE_DATA,\n    label: 'Read Your Private Data',\n  },\n  {\n    value: AgentAccessLevel.WRITE_YOUR_PRIVATE_DATA,\n    label: 'Read & Write Your Data',\n  },\n]\n\nexport function AccessLevelMenu({\n  onChange,\n  initAccessLevel,\n}: AccessLevelMenuProps) {\n  const initOption = accessLevelOptions.findIndex(\n    v => v.value == initAccessLevel,\n  )\n  const options = accessLevelOptions.map(v => v.label)\n  const [selectedIndex, setSelectedIndex] = useState(initOption)\n  return (\n    <Box\n      sx={{\n        display: 'flex',\n        justifyContent: 'flex-end',\n        mt: '20px',\n      }}\n    >\n      <Typography\n        variant=\"label\"\n        sx={{ gridColumn: '2', mt: '10px', mr: '15px' }}\n      >\n        Access:\n      </Typography>\n      <DropdownSelect\n        variant={'outlined'}\n        options={options}\n        selectedIndex={selectedIndex}\n        setSelectedIndex={index => {\n          if (selectedIndex !== index) {\n            setSelectedIndex(index)\n            onChange(accessLevelOptions[index].value)\n          }\n        }}\n      />\n    </Box>\n  )\n}\n\nexport default AccessLevelMenu\n"],"mappings":";;;;;;AAUA,IAAM,IAAqB;CACzB;EAAE,OAAO,EAAiB;EAAqB,OAAO;CAAmB;CACzE;EACE,OAAO,EAAiB;EACxB,OAAO;CACT;CACA;EACE,OAAO,EAAiB;EACxB,OAAO;CACT;AACF;AAEA,SAAgB,EAAgB,EAC9B,aACA,sBACuB;CACvB,IAAM,IAAa,EAAmB,WACpC,MAAK,EAAE,SAAS,CAClB,GACM,IAAU,EAAmB,KAAI,MAAK,EAAE,KAAK,GAC7C,CAAC,GAAe,KAAoB,EAAS,CAAU;CAC7D,OACE,kBAAC,GAAD;EACE,IAAI;GACF,SAAS;GACT,gBAAgB;GAChB,IAAI;EACN;YALF,CAOE,kBAAC,GAAD;GACE,SAAQ;GACR,IAAI;IAAE,YAAY;IAAK,IAAI;IAAQ,IAAI;GAAO;aAC/C;EAEW,CAAA,GACZ,kBAAC,GAAD;GACE,SAAS;GACA;GACM;GACf,mBAAkB,MAAS;IACzB,AAAI,MAAkB,MACpB,EAAiB,CAAK,GACtB,EAAS,EAAmB,GAAO,KAAK;GAE5C;EACD,CAAA,CACE;;AAET"}

package/dist/components/SynapseChat/GridAgentChat.js.map

@@ -1 +1 @@
-{"version":3,"file":"GridAgentChat.js","names":[],"sources":["../../../src/components/SynapseChat/GridAgentChat.tsx"],"sourcesContent":["import { useChatState } from '@/components/SynapseChat/useChatState'\nimport { GridAgentSessionContext } from '@sage-bionetworks/synapse-client'\nimport { AgentAccessLevel, AgentSession } from '@sage-bionetworks/synapse-types'\nimport { useState } from 'react'\nimport DraggableDialog from '../DraggableDialog/DraggableDialog'\nimport { SynapseChat } from './index'\n\nconst suggestedPrompts = [\n  'Help me fill this out',\n  'Help me understand this',\n  'Find missing fields',\n]\n\nexport type GridAgentChatProps = {\n  gridSessionId: string\n  usersReplicaId: number\n  chatbotName?: string\n  initialMessage?: string\n  open: boolean\n  onClose: () => void\n  /** Optional ID to use a different agent registered in Synapse */\n  agentRegistrationId?: string\n}\n\nexport function GridAgentChat({\n  gridSessionId,\n  usersReplicaId,\n  chatbotName = 'Grid Assistant',\n  initialMessage,\n  open,\n  onClose,\n  agentRegistrationId,\n}: GridAgentChatProps) {\n  // Storing state for the chat session here preserves chat history while the dialog is opened and closed.\n  const [agentSession, setAgentSession] = useState<AgentSession | undefined>()\n  const chatState = useChatState(agentSession)\n\n  // Create session context for grid sessions\n  const sessionContext: GridAgentSessionContext = {\n    concreteType:\n      'org.sagebionetworks.repo.model.agent.GridAgentSessionContext',\n    gridSessionId,\n    usersReplicaId,\n  }\n\n  return (\n    <DraggableDialog open={open} onClose={onClose} title={chatbotName}>\n      <SynapseChat\n        agentRegistrationId={agentRegistrationId}\n        chatbotName={chatbotName}\n        initialMessage={initialMessage}\n        sessionContext={sessionContext}\n        textboxPositionOffset=\"16px\"\n        hideTitle={true}\n        showAccessLevelMenu={false}\n        defaultAgentAccessLevel={AgentAccessLevel.WRITE_YOUR_PRIVATE_DATA}\n        // lift state: allow GridAgentChat to control the agent session and interactions\n        externalSession={agentSession}\n        setExternalSession={setAgentSession}\n        externalChatState={chatState}\n        suggestedPrompts={suggestedPrompts}\n      />\n    </DraggableDialog>\n  )\n}\n\nexport default GridAgentChat\n"],"mappings":";;;;;;;;AAOA,IAAM,IAAmB;CACvB;CACA;CACA;CACD;AAaD,SAAgB,EAAc,EAC5B,kBACA,mBACA,iBAAc,kBACd,mBACA,SACA,YACA,0BACqB;CAErB,IAAM,CAAC,GAAc,KAAmB,GAAoC,EACtE,IAAY,EAAa,EAAa;AAU5C,QACE,kBAAC,GAAD;EAAuB;EAAe;EAAS,OAAO;YACpD,kBAAC,GAAD;GACuB;GACR;GACG;GACA,gBAAA;IAZpB,cACE;IACF;IACA;IASoB;GAChB,uBAAsB;GACtB,WAAW;GACX,qBAAqB;GACrB,yBAAyB,EAAiB;GAE1C,iBAAiB;GACjB,oBAAoB;GACpB,mBAAmB;GACD;GAClB,CAAA;EACc,CAAA"}
+{"version":3,"file":"GridAgentChat.js","names":[],"sources":["../../../src/components/SynapseChat/GridAgentChat.tsx"],"sourcesContent":["import { useChatState } from '@/components/SynapseChat/useChatState'\nimport { GridAgentSessionContext } from '@sage-bionetworks/synapse-client'\nimport { AgentAccessLevel, AgentSession } from '@sage-bionetworks/synapse-types'\nimport { useState } from 'react'\nimport DraggableDialog from '../DraggableDialog/DraggableDialog'\nimport { SynapseChat } from './index'\n\nconst suggestedPrompts = [\n  'Help me fill this out',\n  'Help me understand this',\n  'Find missing fields',\n]\n\nexport type GridAgentChatProps = {\n  gridSessionId: string\n  usersReplicaId: number\n  chatbotName?: string\n  initialMessage?: string\n  open: boolean\n  onClose: () => void\n  /** Optional ID to use a different agent registered in Synapse */\n  agentRegistrationId?: string\n}\n\nexport function GridAgentChat({\n  gridSessionId,\n  usersReplicaId,\n  chatbotName = 'Grid Assistant',\n  initialMessage,\n  open,\n  onClose,\n  agentRegistrationId,\n}: GridAgentChatProps) {\n  // Storing state for the chat session here preserves chat history while the dialog is opened and closed.\n  const [agentSession, setAgentSession] = useState<AgentSession | undefined>()\n  const chatState = useChatState(agentSession)\n\n  // Create session context for grid sessions\n  const sessionContext: GridAgentSessionContext = {\n    concreteType:\n      'org.sagebionetworks.repo.model.agent.GridAgentSessionContext',\n    gridSessionId,\n    usersReplicaId,\n  }\n\n  return (\n    <DraggableDialog open={open} onClose={onClose} title={chatbotName}>\n      <SynapseChat\n        agentRegistrationId={agentRegistrationId}\n        chatbotName={chatbotName}\n        initialMessage={initialMessage}\n        sessionContext={sessionContext}\n        textboxPositionOffset=\"16px\"\n        hideTitle={true}\n        showAccessLevelMenu={false}\n        defaultAgentAccessLevel={AgentAccessLevel.WRITE_YOUR_PRIVATE_DATA}\n        // lift state: allow GridAgentChat to control the agent session and interactions\n        externalSession={agentSession}\n        setExternalSession={setAgentSession}\n        externalChatState={chatState}\n        suggestedPrompts={suggestedPrompts}\n      />\n    </DraggableDialog>\n  )\n}\n\nexport default GridAgentChat\n"],"mappings":";;;;;;;;AAOA,IAAM,IAAmB;CACvB;CACA;CACA;AACF;AAaA,SAAgB,EAAc,EAC5B,kBACA,mBACA,iBAAc,kBACd,mBACA,SACA,YACA,0BACqB;CAErB,IAAM,CAAC,GAAc,KAAmB,EAAmC,GACrE,IAAY,EAAa,CAAY;CAU3C,OACE,kBAAC,GAAD;EAAuB;EAAe;EAAS,OAAO;YACpD,kBAAC,GAAD;GACuB;GACR;GACG;GACA,gBAAA;IAZpB,cACE;IACF;IACA;GASoB;GAChB,uBAAsB;GACtB,WAAW;GACX,qBAAqB;GACrB,yBAAyB,EAAiB;GAE1C,iBAAiB;GACjB,oBAAoB;GACpB,mBAAmB;GACD;EACnB,CAAA;CACc,CAAA;AAErB"}

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

@@ -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 { ArrowUpward } from '@mui/icons-material'\nimport {\n  Alert,\n  Box,\n  Chip,\n  IconButton,\n  List,\n  Stack,\n  TextField,\n  Typography,\n  useTheme,\n} from '@mui/material'\nimport { Color } from '@mui/material/styles'\nimport { GridAgentSessionContext } from '@sage-bionetworks/synapse-client'\nimport {\n  AgentAccessLevel,\n  AgentSession,\n  TraceEvent,\n} from '@sage-bionetworks/synapse-types'\nimport { KeyboardEventHandler, useEffect, useState } from 'react'\nimport { SkeletonParagraph } from '../Skeleton'\nimport { displayToast } from '../ToastMessage'\nimport AccessLevelMenu from './AccessLevelMenu'\nimport SynapseChatInteraction from './SynapseChatInteraction'\nimport SynapseChatMessage from './SynapseChatMessage'\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  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}\n\nexport type ChatInteraction = {\n  userMessage: string\n  chatResponseText?: string\n  chatErrorReason?: string\n  chatResponseTrace?: TraceEventWithFriendlyMessage[]\n}\n\nexport type TraceEventWithFriendlyMessage = {\n  friendlyMessage?: string\n} & TraceEvent\n\nexport function SynapseChat({\n  initialMessage,\n  agentRegistrationId,\n  chatbotName = 'SynapseChat',\n  hideTitle = false,\n  textboxPositionOffset = '0px',\n  sessionContext,\n  externalSession,\n  setExternalSession,\n  externalChatState,\n  showAccessLevelMenu = true,\n  onChatResponse,\n  suggestedPrompts,\n}: SynapseChatProps) {\n  const { accessToken } = useSynapseContext()\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    })\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 theme = useTheme()\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 { pendingMessage, chatJobIds, sendChat } = chatState\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  // 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 handleSendMessage = () => {\n    if (userChatTextfieldValue.trim()) {\n      sendChat(userChatTextfieldValue.trim())\n      setUserChatTextfieldValue('')\n    }\n  }\n\n  const isDisabled =\n    !agentSession || !userChatTextfieldValue || !!pendingMessage\n\n  const handleKeyDown: KeyboardEventHandler<HTMLDivElement> = event => {\n    if (!isDisabled && event.key === 'Enter' && !event.shiftKey) {\n      event.preventDefault()\n      handleSendMessage()\n    }\n  }\n\n  const sendMessageButtonColor = (\n    theme.palette.secondary as unknown as Color\n  )[300]\n  if (createAgentSessionError) {\n    return (\n      <Alert severity={'error'} sx={{ my: 2 }}>\n        {createAgentSessionError.reason}\n      </Alert>\n    )\n  }\n\n  return (\n    <Box\n      sx={{\n        display: 'flex',\n        flexDirection: 'column',\n        justifyContent: 'space-between',\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 && (\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 sx={{ flexGrow: 1, overflowY: 'auto', mb: 2 }}>\n          <List\n            sx={{\n              flex: 1,\n              overflowY: 'auto',\n              pt: '20px',\n              display: 'flex',\n              flexDirection: 'column',\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            {chatJobIds.map(jobId => {\n              return (\n                <SynapseChatMessage\n                  key={jobId}\n                  chatJobId={jobId}\n                  onSendChat={sendChat}\n                />\n              )\n            })}\n            {pendingMessage && (\n              <SynapseChatInteraction\n                userMessage={pendingMessage}\n                chatResponseText={''}\n                chatErrorReason={''}\n                scrollIntoView\n                onSendChat={sendChat}\n              />\n            )}\n          </List>\n        </Box>\n      )}\n      <Box\n        sx={{\n          position: 'sticky',\n          bottom: textboxPositionOffset,\n          backgroundColor: 'white',\n        }}\n      >\n        {suggestedPrompts &&\n          suggestedPrompts.length > 0 &&\n          chatJobIds.length === 0 &&\n          !pendingMessage && (\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\n          component=\"form\"\n          sx={{\n            pt: '8px',\n            mt: '5px',\n            pb: '10px',\n            position: 'sticky',\n            borderTop: '1px solid',\n            borderColor: 'grey.400',\n          }}\n          onSubmit={handleSendMessage}\n        >\n          <TextField\n            fullWidth\n            value={userChatTextfieldValue}\n            onChange={e => setUserChatTextfieldValue(e.target.value)}\n            onKeyDown={handleKeyDown}\n            placeholder={`Message ${chatbotName}`}\n            slotProps={{\n              input: {\n                sx: { borderRadius: 96.6 },\n                endAdornment: (\n                  <IconButton\n                    disabled={isDisabled}\n                    onClick={handleSendMessage}\n                    sx={{\n                      ml: '7px',\n                      mr: '-8px',\n                      color: sendMessageButtonColor,\n                      borderStyle: 'solid',\n                      borderWidth: isDisabled ? '1px' : '2px',\n                      borderColor: isDisabled ? 'gray' : sendMessageButtonColor,\n                    }}\n                  >\n                    <ArrowUpward />\n                  </IconButton>\n                ),\n              },\n            }}\n          />\n          <Typography\n            variant=\"smallText1\"\n            sx={{ pt: '8px', textAlign: 'center' }}\n          >\n            {chatbotName} can make mistakes.\n          </Typography>\n        </Box>\n      </Box>\n    </Box>\n  )\n}\n\nexport default SynapseChat\n"],"mappings":"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"}
+{"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 { ArrowUpward } from '@mui/icons-material'\nimport {\n  Alert,\n  Box,\n  Chip,\n  IconButton,\n  List,\n  Stack,\n  TextField,\n  Typography,\n  useTheme,\n} from '@mui/material'\nimport { Color } from '@mui/material/styles'\nimport { GridAgentSessionContext } from '@sage-bionetworks/synapse-client'\nimport {\n  AgentAccessLevel,\n  AgentSession,\n  TraceEvent,\n} from '@sage-bionetworks/synapse-types'\nimport { KeyboardEventHandler, useEffect, useState } from 'react'\nimport { SkeletonParagraph } from '../Skeleton'\nimport { displayToast } from '../ToastMessage'\nimport AccessLevelMenu from './AccessLevelMenu'\nimport SynapseChatInteraction from './SynapseChatInteraction'\nimport SynapseChatMessage from './SynapseChatMessage'\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  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}\n\nexport type ChatInteraction = {\n  userMessage: string\n  chatResponseText?: string\n  chatErrorReason?: string\n  chatResponseTrace?: TraceEventWithFriendlyMessage[]\n}\n\nexport type TraceEventWithFriendlyMessage = {\n  friendlyMessage?: string\n} & TraceEvent\n\nexport function SynapseChat({\n  initialMessage,\n  agentRegistrationId,\n  chatbotName = 'SynapseChat',\n  hideTitle = false,\n  textboxPositionOffset = '0px',\n  sessionContext,\n  externalSession,\n  setExternalSession,\n  externalChatState,\n  showAccessLevelMenu = true,\n  onChatResponse,\n  suggestedPrompts,\n}: SynapseChatProps) {\n  const { accessToken } = useSynapseContext()\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    })\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 theme = useTheme()\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 { pendingMessage, chatJobIds, sendChat } = chatState\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  // 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 handleSendMessage = () => {\n    if (userChatTextfieldValue.trim()) {\n      sendChat(userChatTextfieldValue.trim())\n      setUserChatTextfieldValue('')\n    }\n  }\n\n  const isDisabled =\n    !agentSession || !userChatTextfieldValue || !!pendingMessage\n\n  const handleKeyDown: KeyboardEventHandler<HTMLDivElement> = event => {\n    if (!isDisabled && event.key === 'Enter' && !event.shiftKey) {\n      event.preventDefault()\n      handleSendMessage()\n    }\n  }\n\n  const sendMessageButtonColor = (\n    theme.palette.secondary as unknown as Color\n  )[300]\n  if (createAgentSessionError) {\n    return (\n      <Alert severity={'error'} sx={{ my: 2 }}>\n        {createAgentSessionError.reason}\n      </Alert>\n    )\n  }\n\n  return (\n    <Box\n      sx={{\n        display: 'flex',\n        flexDirection: 'column',\n        justifyContent: 'space-between',\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 && (\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 sx={{ flexGrow: 1, overflowY: 'auto', mb: 2 }}>\n          <List\n            sx={{\n              flex: 1,\n              overflowY: 'auto',\n              pt: '20px',\n              display: 'flex',\n              flexDirection: 'column',\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            {chatJobIds.map(jobId => {\n              return (\n                <SynapseChatMessage\n                  key={jobId}\n                  chatJobId={jobId}\n                  onSendChat={sendChat}\n                />\n              )\n            })}\n            {pendingMessage && (\n              <SynapseChatInteraction\n                userMessage={pendingMessage}\n                chatResponseText={''}\n                chatErrorReason={''}\n                scrollIntoView\n                onSendChat={sendChat}\n              />\n            )}\n          </List>\n        </Box>\n      )}\n      <Box\n        sx={{\n          position: 'sticky',\n          bottom: textboxPositionOffset,\n          backgroundColor: 'white',\n        }}\n      >\n        {suggestedPrompts &&\n          suggestedPrompts.length > 0 &&\n          chatJobIds.length === 0 &&\n          !pendingMessage && (\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\n          component=\"form\"\n          sx={{\n            pt: '8px',\n            mt: '5px',\n            pb: '10px',\n            position: 'sticky',\n            borderTop: '1px solid',\n            borderColor: 'grey.400',\n          }}\n          onSubmit={handleSendMessage}\n        >\n          <TextField\n            fullWidth\n            value={userChatTextfieldValue}\n            onChange={e => setUserChatTextfieldValue(e.target.value)}\n            onKeyDown={handleKeyDown}\n            placeholder={`Message ${chatbotName}`}\n            slotProps={{\n              input: {\n                sx: { borderRadius: 96.6 },\n                endAdornment: (\n                  <IconButton\n                    disabled={isDisabled}\n                    onClick={handleSendMessage}\n                    sx={{\n                      ml: '7px',\n                      mr: '-8px',\n                      color: sendMessageButtonColor,\n                      borderStyle: 'solid',\n                      borderWidth: isDisabled ? '1px' : '2px',\n                      borderColor: isDisabled ? 'gray' : sendMessageButtonColor,\n                    }}\n                  >\n                    <ArrowUpward />\n                  </IconButton>\n                ),\n              },\n            }}\n          />\n          <Typography\n            variant=\"smallText1\"\n            sx={{ pt: '8px', textAlign: 'center' }}\n          >\n            {chatbotName} can make mistakes.\n          </Typography>\n        </Box>\n      </Box>\n    </Box>\n  )\n}\n\nexport default SynapseChat\n"],"mappings":"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"}

package/dist/components/SynapseChat/SynapseChatDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"SynapseChatDialog.js","names":[],"sources":["../../../src/components/SynapseChat/SynapseChatDialog.tsx"],"sourcesContent":["import { Button } from '@mui/material'\nimport SynapseChat, { SynapseChatProps } from './SynapseChat'\nimport { DialogBase } from '../DialogBase'\n\nexport type SynapseChatDialogProps = {\n  open: boolean\n  onClose: () => void\n} & Omit<SynapseChatProps, 'hideTitle' | 'textboxPositionOffset'>\n\nexport function SynapseChatDialog(props: SynapseChatDialogProps) {\n  const { chatbotName = 'SynapseChat', open, onClose } = props\n  return (\n    <DialogBase\n      title={chatbotName}\n      open={open}\n      onCancel={onClose}\n      maxWidth=\"lg\"\n      content={\n        <SynapseChat\n          hideTitle={true}\n          textboxPositionOffset=\"-24px\"\n          {...props}\n        />\n      }\n      actions={\n        <Button variant=\"contained\" color=\"primary\" onClick={() => onClose()}>\n          Close\n        </Button>\n      }\n    ></DialogBase>\n  )\n}\n\nexport default SynapseChatDialog\n"],"mappings":";;;;;AASA,SAAgB,EAAkB,GAA+B;CAC/D,IAAM,EAAE,iBAAc,eAAe,SAAM,eAAY;AACvD,QACE,kBAAC,GAAD;EACE,OAAO;EACD;EACN,UAAU;EACV,UAAS;EACT,SACE,kBAAC,GAAD;GACE,WAAW;GACX,uBAAsB;GACtB,GAAI;GACJ,CAAA;EAEJ,SACE,kBAAC,GAAD;GAAQ,SAAQ;GAAY,OAAM;GAAU,eAAe,GAAS;aAAE;GAE7D,CAAA;EAEC,CAAA"}
+{"version":3,"file":"SynapseChatDialog.js","names":[],"sources":["../../../src/components/SynapseChat/SynapseChatDialog.tsx"],"sourcesContent":["import { Button } from '@mui/material'\nimport SynapseChat, { SynapseChatProps } from './SynapseChat'\nimport { DialogBase } from '../DialogBase'\n\nexport type SynapseChatDialogProps = {\n  open: boolean\n  onClose: () => void\n} & Omit<SynapseChatProps, 'hideTitle' | 'textboxPositionOffset'>\n\nexport function SynapseChatDialog(props: SynapseChatDialogProps) {\n  const { chatbotName = 'SynapseChat', open, onClose } = props\n  return (\n    <DialogBase\n      title={chatbotName}\n      open={open}\n      onCancel={onClose}\n      maxWidth=\"lg\"\n      content={\n        <SynapseChat\n          hideTitle={true}\n          textboxPositionOffset=\"-24px\"\n          {...props}\n        />\n      }\n      actions={\n        <Button variant=\"contained\" color=\"primary\" onClick={() => onClose()}>\n          Close\n        </Button>\n      }\n    ></DialogBase>\n  )\n}\n\nexport default SynapseChatDialog\n"],"mappings":";;;;;AASA,SAAgB,EAAkB,GAA+B;CAC/D,IAAM,EAAE,iBAAc,eAAe,SAAM,eAAY;CACvD,OACE,kBAAC,GAAD;EACE,OAAO;EACD;EACN,UAAU;EACV,UAAS;EACT,SACE,kBAAC,GAAD;GACE,WAAW;GACX,uBAAsB;GACtB,GAAI;EACL,CAAA;EAEH,SACE,kBAAC,GAAD;GAAQ,SAAQ;GAAY,OAAM;GAAU,eAAe,EAAQ;aAAG;EAE9D,CAAA;CAEC,CAAA;AAEjB"}

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

@@ -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 {\n  KeyboardArrowDown,\n  KeyboardArrowRight,\n  SmartToyTwoTone,\n} 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 { Color } from '@mui/material/styles'\nimport { TraceEvent } from '@sage-bionetworks/synapse-types'\nimport { useEffect, useMemo, useRef, useState } from 'react'\nimport MarkdownSynapse from '../Markdown/MarkdownSynapse'\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}\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\\n**Tool 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}: SynapseChatInteractionProps) {\n  const theme = useTheme()\n  const ref = useRef<HTMLLIElement | null>(null)\n  const [showTrace, setShowTrace] = useState(false)\n\n  useEffect(() => {\n    // on mount, scroll into view if instructed\n    if (scrollIntoView) {\n      if (ref.current) {\n        ref.current.scrollIntoView({ behavior: 'smooth' })\n      }\n    }\n  }, [ref, scrollIntoView])\n\n  const isLoading = !chatResponseText && !chatErrorReason\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  return (\n    <>\n      <ListItem\n        ref={ref}\n        sx={{\n          alignSelf: 'flex-end',\n          backgroundColor: (theme.palette.secondary as unknown as Color)[100],\n          borderRadius: '24px',\n          maxWidth: '70%',\n          display: 'block',\n          mb: '5px',\n          p: '8px 12px',\n          wordWrap: 'break-word',\n          width: 'auto',\n        }}\n      >\n        <ListItemText primary={userMessage} />\n      </ListItem>\n      <ListItem\n        sx={{\n          display: 'grid',\n          gridTemplateColumns: '50px auto',\n          columnGap: '0px',\n          justifyItems: 'center',\n          alignItems: 'start',\n          p: '0px',\n        }}\n      >\n        <Box\n          sx={{\n            p: '3px',\n            mt: '10px',\n            height: '31px',\n            borderRadius: '50%',\n            borderStyle: 'solid',\n            borderWidth: '1px',\n            borderColor: 'grey.300',\n          }}\n        >\n          <SmartToyTwoTone sx={{ color: 'secondary.main' }} />\n        </Box>\n        <Box\n          sx={{\n            borderRadius: '10px',\n            padding: '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                  <SynapseSpinner size={14} />\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 && <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                    onClick={() => onSendChat(prompt)}\n                    sx={{ maxWidth: 200 }}\n                  />\n                </Tooltip>\n              ))}\n            </Stack>\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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"}
+{"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 {\n  KeyboardArrowDown,\n  KeyboardArrowRight,\n  SmartToyTwoTone,\n} 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 { Color } from '@mui/material/styles'\nimport { TraceEvent } from '@sage-bionetworks/synapse-types'\nimport { useEffect, useMemo, useRef, useState } from 'react'\nimport MarkdownSynapse from '../Markdown/MarkdownSynapse'\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}\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\\n**Tool 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}: SynapseChatInteractionProps) {\n  const theme = useTheme()\n  const ref = useRef<HTMLLIElement | null>(null)\n  const [showTrace, setShowTrace] = useState(false)\n\n  useEffect(() => {\n    // on mount, scroll into view if instructed\n    if (scrollIntoView) {\n      if (ref.current) {\n        ref.current.scrollIntoView({ behavior: 'smooth' })\n      }\n    }\n  }, [ref, scrollIntoView])\n\n  const isLoading = !chatResponseText && !chatErrorReason\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  return (\n    <>\n      <ListItem\n        ref={ref}\n        sx={{\n          alignSelf: 'flex-end',\n          backgroundColor: (theme.palette.secondary as unknown as Color)[100],\n          borderRadius: '24px',\n          maxWidth: '70%',\n          display: 'block',\n          mb: '5px',\n          p: '8px 12px',\n          wordWrap: 'break-word',\n          width: 'auto',\n        }}\n      >\n        <ListItemText primary={userMessage} />\n      </ListItem>\n      <ListItem\n        sx={{\n          display: 'grid',\n          gridTemplateColumns: '50px auto',\n          columnGap: '0px',\n          justifyItems: 'center',\n          alignItems: 'start',\n          p: '0px',\n        }}\n      >\n        <Box\n          sx={{\n            p: '3px',\n            mt: '10px',\n            height: '31px',\n            borderRadius: '50%',\n            borderStyle: 'solid',\n            borderWidth: '1px',\n            borderColor: 'grey.300',\n          }}\n        >\n          <SmartToyTwoTone sx={{ color: 'secondary.main' }} />\n        </Box>\n        <Box\n          sx={{\n            borderRadius: '10px',\n            padding: '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                  <SynapseSpinner size={14} />\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 && <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                    onClick={() => onSendChat(prompt)}\n                    sx={{ maxWidth: 200 }}\n                  />\n                </Tooltip>\n              ))}\n            </Stack>\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":";;;;;;;;AAsCA,SAAS,EAA2B,GAAoC;CAatE,OAZI,mBAAmB,IACd,EAAa,gBAWf;AACT;AAEA,SAAgB,EAAuB,EACrC,gBACA,qBACA,oBACA,sBACA,oBAAiB,IACjB,iBAC8B;CAC9B,IAAM,IAAQ,EAAS,GACjB,IAAM,EAA6B,IAAI,GACvC,CAAC,GAAW,KAAgB,EAAS,EAAK;CAEhD,QAAgB;EAEd,AAAI,KACE,EAAI,WACN,EAAI,QAAQ,eAAe,EAAE,UAAU,SAAS,CAAC;CAGvD,GAAG,CAAC,GAAK,CAAc,CAAC;CAExB,IAAM,IAAY,CAAC,KAAoB,CAAC,GAElC,IAAgB,SAEjB,KAAqB,CAAC,GACpB,SAAQ,MAAc,EAA6B,CAAU,CAAC,GAC7D,QAAO,MAAS,CAAC,CAAC,CAAK,GAC7B,CAAC,CAAiB,CACpB,GAEM,IAAe,EAAc,SAAS,GAEtC,IAAuB,QACrB,EAAc,QAAO,MAAS,mBAAmB,CAAK,EAAE,GAAG,EAAE,GACnE,CAAC,CAAa,CAChB,GAEM,IACJ,KAAwB,OACpB,gBACA,EAAqB,eAErB,IAAkB,IACpB,IACA,GAAG,IAAY,SAAS,OAAO,SAE7B,EAAE,gBAAa,oBAAiB,QAAc;EAClD,IAAI;GAEF,IAAM,IAAM,IADO,UACP,EAAO,gBAAgB,KAAoB,IAAI,WAAW;GAGtE,EACG,iBAAiB,oBAAoB,EACrC,SAAQ,MAAW,EAAQ,OAAO,CAAC;GAGtC,IAAM,IAAwB,MAAM,KAClC,EAAI,iBAAiB,aAAa,CACpC,EACG,KAAI,MAAM,EAAG,aAAa,KAAK,CAAC,EAChC,QAAQ,MAAmB,CAAC,CAAC,CAAC;GAGjC,EAAI,iBAAiB,aAAa,EAAE,SAAQ,MAAW,EAAQ,OAAO,CAAC;GAGvE,IAAM,IAAc,EAAI,cAAc,MAAM;GAC5C,OAAO;IACL,aAAa,IACR,EAAY,eAAe,KAC3B,EAAI,KAAK,eAAe;IAC7B,cAAc;GAChB;EACF,SAAS,GAAG;GAEV,OADA,QAAQ,MAAM,CAAC,GACR;IAAE,aAAa,KAAoB;IAAI,cAAc,CAAC;GAAE;EACjE;CACF,GAAG,CAAC,CAAgB,CAAC;CAErB,OACE,kBAAA,GAAA,EAAA,UAAA;EACE,kBAAC,GAAD;GACO;GACL,IAAI;IACF,WAAW;IACX,iBAAkB,EAAM,QAAQ,UAA+B;IAC/D,cAAc;IACd,UAAU;IACV,SAAS;IACT,IAAI;IACJ,GAAG;IACH,UAAU;IACV,OAAO;GACT;aAEA,kBAAC,GAAD,EAAc,SAAS,EAAc,CAAA;EAC7B,CAAA;EACV,kBAAC,GAAD;GACE,IAAI;IACF,SAAS;IACT,qBAAqB;IACrB,WAAW;IACX,cAAc;IACd,YAAY;IACZ,GAAG;GACL;aARF,CAUE,kBAAC,GAAD;IACE,IAAI;KACF,GAAG;KACH,IAAI;KACJ,QAAQ;KACR,cAAc;KACd,aAAa;KACb,aAAa;KACb,aAAa;IACf;cAEA,kBAAC,GAAD,EAAiB,IAAI,EAAE,OAAO,iBAAiB,EAAI,CAAA;GAChD,CAAA,GACL,kBAAC,GAAD;IACE,IAAI;KACF,cAAc;KACd,SAAS;KACT,UAAU;KACV,UAAU;IACZ;cANF;KAQE,kBAAC,GAAD;MACE,WAAW;MACX,IAAI,EACF,aAAa;OACX,WAAW;OACX,YAAY,aAAa,EAAM,QAAQ,KAAK;OAC5C,YAAY;OACZ,aAAa;OACb,IAAI;OACJ,IAAI;MACN,EACF;gBAXF,CAaE,kBAAC,GAAD;OACE,SAAS;OACT,MAAM;OACN,WACE,IACE,kBAAC,GAAD,EAAgB,MAAM,GAAK,CAAA,IAE3B,EADE,IACD,IAEA,GAFD,EAAmB,IAAI,EAAE,OAAO,OAAO,EAAI,CAEC;OAGhD,UAAU,CAAC;OACX,eAAe;QACb,GAAa,MAAK,CAAC,CAAC;OACtB;OACA,IAAI;QACF,QAAQ;QACR,UAAU;QACV,YAAY;QACZ,IAAI;QACJ,QAAQ;QACR,OAAO;QACP,gBAAgB;QAChB,YAAY;QACZ,UAAU;QACV,eAAe;QACf,IAAI;QACJ,wBAAwB,EAAE,IAAI,GAAI;OACpC;iBAEA,kBAAC,GAAD;QAAK,IAAI;SAAE,UAAU;SAAU,cAAc;QAAW;kBACrD;OACE,CAAA;MACC,CAAA,GACP,KACC,kBAAC,GAAD;OAAU,IAAI;iBACZ,kBAAC,GAAD,EACE,UAAU,EACP,IAAI,CAA0B,EAC9B,QAAO,MAAM,EAAG,KAAK,EAAE,SAAS,CAAC,EACjC,KAAK,YAAY,EACrB,CAAA;MACO,CAAA,CAET;;KACJ,KAAe,kBAAC,GAAD,EAAiB,UAAU,EAAc,CAAA;KACxD,KAAc,EAAa,SAAS,KACnC,kBAAC,GAAD;MAAO,WAAU;MAAM,UAAS;MAAO,KAAK;MAAG,IAAI;gBAChD,EAAa,KAAI,MAChB,kBAAC,GAAD;OAAsB,OAAO;iBAC3B,kBAAC,GAAD;QACE,OAAO;QACP,SAAQ;QACR,OAAM;QACN,WAAA;QACA,eAAe,EAAW,CAAM;QAChC,IAAI,EAAE,UAAU,IAAI;OACrB,CAAA;MACM,GATK,CASL,CACV;KACI,CAAA;IAEN;KACG;;EACT,KACC,kBAAC,GAAD;GAAO,UAAU;GAAS,IAAI,EAAE,IAAI,EAAE;aACnC;EACI,CAAA;CAET,EAAA,CAAA;AAEN"}

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

@@ -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  TraceEvent,\n} from '@sage-bionetworks/synapse-types'\nimport { useCallback, useEffect, useState } from 'react'\n\nfunction useTraceEvent(chatJobId: string, 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  chatJobId: string\n  onSendChat?: (message: string) => void\n}\n\nexport default function SynapseChatMessage(props: SynapseChatMessageProps) {\n  const { chatJobId, onSendChat } = 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 not finished processing\n  const enableTrace =\n    !!chatJobId &&\n    (!asyncJobStatus?.jobState || asyncJobStatus.jobState == 'PROCESSING')\n  const { traceEvents } = useTraceEvent(chatJobId, enableTrace)\n\n  return (\n    <SynapseChatInteraction\n      userMessage={chatRequest?.chatText}\n      chatResponseText={chatResponse?.responseText}\n      chatResponseTrace={traceEvents}\n      chatErrorReason={chatError}\n      onSendChat={onSendChat}\n    />\n  )\n}\n"],"mappings":";;;;;;AAUA,SAAS,EAAc,GAAmB,GAAkB;CAC1D,IAAM,CAAC,GAAa,KAAkB,EAAuB,EAAE,CAAC,EAE1D,IAAoB,GAAa,MAA4B;AACjE,KAAe,MACN,CAAC,GAAG,GAAM,GAAG,EAAU,CAC9B;IACD,EAAE,CAAC,EAGA,EAAE,MAAM,MAAmB,EAC/B;EACE,OAAO;EACP,oBAJqB,EAAY,GAAG,EAAY,SAAS,EAIrC,EAAkB;EACvC,EACD;EACW;EACT,iBAAiB;EACjB,6BAA6B;EAC9B,CACF;AAWD,QAVA,QAAgB;AACd,EAAI,KAAkB,EAAe,KAAK,SAAS,MACjD,EAAkB,EAAe,KAAK,EAItC,QAAQ,MAAM,EAAe,KAAK;IAEnC,CAAC,GAAmB,EAAe,CAAC,EAEhC,EACL,gBACD;;AAQH,SAAwB,EAAmB,GAAgC;CACzE,IAAM,EAAE,cAAW,kBAAe,GAC5B,EAAE,MAAM,MAAmB,EAAuB,EAAU,EAE5D,IAAc,GAAgB,aAC9B,IAAe,GAAgB,cAG/B,IAAY,GAAgB,cAM5B,EAAE,mBAAgB,EAAc,GAFpC,CAAC,CAAC,MACD,CAAC,GAAgB,YAAY,EAAe,YAAY,cACE;AAE7D,QACE,kBAAC,GAAD;EACE,aAAa,GAAa;EAC1B,kBAAkB,GAAc;EAChC,mBAAmB;EACnB,iBAAiB;EACL;EACZ,CAAA"}
+{"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  TraceEvent,\n} from '@sage-bionetworks/synapse-types'\nimport { useCallback, useEffect, useState } from 'react'\n\nfunction useTraceEvent(chatJobId: string, 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  chatJobId: string\n  onSendChat?: (message: string) => void\n}\n\nexport default function SynapseChatMessage(props: SynapseChatMessageProps) {\n  const { chatJobId, onSendChat } = 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 not finished processing\n  const enableTrace =\n    !!chatJobId &&\n    (!asyncJobStatus?.jobState || asyncJobStatus.jobState == 'PROCESSING')\n  const { traceEvents } = useTraceEvent(chatJobId, enableTrace)\n\n  return (\n    <SynapseChatInteraction\n      userMessage={chatRequest?.chatText}\n      chatResponseText={chatResponse?.responseText}\n      chatResponseTrace={traceEvents}\n      chatErrorReason={chatError}\n      onSendChat={onSendChat}\n    />\n  )\n}\n"],"mappings":";;;;;;AAUA,SAAS,EAAc,GAAmB,GAAkB;CAC1D,IAAM,CAAC,GAAa,KAAkB,EAAuB,CAAC,CAAC,GAEzD,IAAoB,GAAa,MAA4B;EACjE,GAAe,MACN,CAAC,GAAG,GAAM,GAAG,CAAS,CAC9B;CACH,GAAG,CAAC,CAAC,GAGC,EAAE,MAAM,MAAmB,EAC/B;EACE,OAAO;EACP,oBAJqB,EAAY,GAAG,EAAY,SAAS,CAIrC,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;AAOA,SAAwB,EAAmB,GAAgC;CACzE,IAAM,EAAE,cAAW,kBAAe,GAC5B,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;CAE5D,OACE,kBAAC,GAAD;EACE,aAAa,GAAa;EAC1B,kBAAkB,GAAc;EAChC,mBAAmB;EACnB,iBAAiB;EACL;CACb,CAAA;AAEL"}

package/dist/components/SynapseChat/SynapsePortalChatDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"SynapsePortalChatDialog.js","names":[],"sources":["../../../src/components/SynapseChat/SynapsePortalChatDialog.tsx"],"sourcesContent":["import DraggableDialog from '../DraggableDialog/DraggableDialog'\nimport SynapseChat, { SynapseChatProps } from './SynapseChat'\n\nexport type SynapsePortalChatDialogProps = SynapseChatProps & {\n  open: boolean\n  onClose: () => void\n}\n\n/**\n * A dialog that wraps SynapseChat with externally-controlled open/close state.\n * Only shown when the user is logged in and the PORTAL_CHAT feature flag is enabled.\n */\nexport function SynapsePortalChatDialog({\n  open,\n  onClose,\n  ...chatDialogProps\n}: SynapsePortalChatDialogProps) {\n  return (\n    <DraggableDialog\n      open={open}\n      onClose={onClose}\n      title={chatDialogProps.chatbotName || 'SynapseChat'}\n    >\n      <SynapseChat\n        hideTitle={true}\n        textboxPositionOffset=\"16px\"\n        {...chatDialogProps}\n      />\n    </DraggableDialog>\n  )\n}\n\nexport default SynapsePortalChatDialog\n"],"mappings":";;;;AAYA,SAAgB,EAAwB,EACtC,SACA,YACA,GAAG,KAC4B;AAC/B,QACE,kBAAC,GAAD;EACQ;EACG;EACT,OAAO,EAAgB,eAAe;YAEtC,kBAAC,GAAD;GACE,WAAW;GACX,uBAAsB;GACtB,GAAI;GACJ,CAAA;EACc,CAAA"}
+{"version":3,"file":"SynapsePortalChatDialog.js","names":[],"sources":["../../../src/components/SynapseChat/SynapsePortalChatDialog.tsx"],"sourcesContent":["import DraggableDialog from '../DraggableDialog/DraggableDialog'\nimport SynapseChat, { SynapseChatProps } from './SynapseChat'\n\nexport type SynapsePortalChatDialogProps = SynapseChatProps & {\n  open: boolean\n  onClose: () => void\n}\n\n/**\n * A dialog that wraps SynapseChat with externally-controlled open/close state.\n * Only shown when the user is logged in and the PORTAL_CHAT feature flag is enabled.\n */\nexport function SynapsePortalChatDialog({\n  open,\n  onClose,\n  ...chatDialogProps\n}: SynapsePortalChatDialogProps) {\n  return (\n    <DraggableDialog\n      open={open}\n      onClose={onClose}\n      title={chatDialogProps.chatbotName || 'SynapseChat'}\n    >\n      <SynapseChat\n        hideTitle={true}\n        textboxPositionOffset=\"16px\"\n        {...chatDialogProps}\n      />\n    </DraggableDialog>\n  )\n}\n\nexport default SynapsePortalChatDialog\n"],"mappings":";;;;AAYA,SAAgB,EAAwB,EACtC,SACA,YACA,GAAG,KAC4B;CAC/B,OACE,kBAAC,GAAD;EACQ;EACG;EACT,OAAO,EAAgB,eAAe;YAEtC,kBAAC,GAAD;GACE,WAAW;GACX,uBAAsB;GACtB,GAAI;EACL,CAAA;CACc,CAAA;AAErB"}

package/dist/components/SynapseChat/extractMessageFromTraceEvent.js.map

@@ -1 +1 @@
-{"version":3,"file":"extractMessageFromTraceEvent.js","names":[],"sources":["../../../src/components/SynapseChat/extractMessageFromTraceEvent.ts"],"sourcesContent":["import { TraceEvent } from '@sage-bionetworks/synapse-types'\nimport { JSONPath } from 'jsonpath-plus'\n\nexport type TraceMessage =\n  | {\n      reasoningText: string\n    }\n  | {\n      toolName: string\n      toolInput: string\n    }\n\nexport default function extractMessageFromTraceEvent(\n  event: TraceEvent,\n): TraceMessage[] | null {\n  // WARNING: The message format may change when we change models.\n  const messagesToAdd: TraceMessage[] = []\n  let parsedMessage: object\n  try {\n    parsedMessage = JSON.parse(event.message) as object\n  } catch (e) {\n    console.error(e)\n    return [{ reasoningText: event.message }]\n  }\n\n  const messages = JSONPath({\n    path: '$.output.message.content[*]',\n    json: parsedMessage,\n  })\n\n  messages.forEach((message: any) => {\n    const reasoningMessage = JSONPath({\n      path: '$.reasoningContent.reasoningText.text',\n      json: message,\n    })\n    if (reasoningMessage[0]) {\n      messagesToAdd.push({ reasoningText: reasoningMessage[0] })\n    }\n    const toolUseMessage = JSONPath({\n      path: '$.toolUse[name,input]',\n      json: message,\n    })\n\n    if (toolUseMessage.length > 0) {\n      messagesToAdd.push({\n        toolName: toolUseMessage[0],\n        toolInput: toolUseMessage[1],\n      })\n    }\n  })\n  return messagesToAdd\n}\n"],"mappings":";;AAYA,SAAwB,EACtB,GACuB;CAEvB,IAAM,IAAgC,EAAE,EACpC;AACJ,KAAI;AACF,MAAgB,KAAK,MAAM,EAAM,QAAQ;UAClC,GAAG;AAEV,SADA,QAAQ,MAAM,EAAE,EACT,CAAC,EAAE,eAAe,EAAM,SAAS,CAAC;;AA4B3C,QAzBiB,EAAS;EACxB,MAAM;EACN,MAAM;EACP,CAED,CAAS,SAAS,MAAiB;EACjC,IAAM,IAAmB,EAAS;GAChC,MAAM;GACN,MAAM;GACP,CAAC;AACF,EAAI,EAAiB,MACnB,EAAc,KAAK,EAAE,eAAe,EAAiB,IAAI,CAAC;EAE5D,IAAM,IAAiB,EAAS;GAC9B,MAAM;GACN,MAAM;GACP,CAAC;AAEF,EAAI,EAAe,SAAS,KAC1B,EAAc,KAAK;GACjB,UAAU,EAAe;GACzB,WAAW,EAAe;GAC3B,CAAC;GAEJ,EACK"}
+{"version":3,"file":"extractMessageFromTraceEvent.js","names":[],"sources":["../../../src/components/SynapseChat/extractMessageFromTraceEvent.ts"],"sourcesContent":["import { TraceEvent } from '@sage-bionetworks/synapse-types'\nimport { JSONPath } from 'jsonpath-plus'\n\nexport type TraceMessage =\n  | {\n      reasoningText: string\n    }\n  | {\n      toolName: string\n      toolInput: string\n    }\n\nexport default function extractMessageFromTraceEvent(\n  event: TraceEvent,\n): TraceMessage[] | null {\n  // WARNING: The message format may change when we change models.\n  const messagesToAdd: TraceMessage[] = []\n  let parsedMessage: object\n  try {\n    parsedMessage = JSON.parse(event.message) as object\n  } catch (e) {\n    console.error(e)\n    return [{ reasoningText: event.message }]\n  }\n\n  const messages = JSONPath({\n    path: '$.output.message.content[*]',\n    json: parsedMessage,\n  })\n\n  messages.forEach((message: any) => {\n    const reasoningMessage = JSONPath({\n      path: '$.reasoningContent.reasoningText.text',\n      json: message,\n    })\n    if (reasoningMessage[0]) {\n      messagesToAdd.push({ reasoningText: reasoningMessage[0] })\n    }\n    const toolUseMessage = JSONPath({\n      path: '$.toolUse[name,input]',\n      json: message,\n    })\n\n    if (toolUseMessage.length > 0) {\n      messagesToAdd.push({\n        toolName: toolUseMessage[0],\n        toolInput: toolUseMessage[1],\n      })\n    }\n  })\n  return messagesToAdd\n}\n"],"mappings":";;AAYA,SAAwB,EACtB,GACuB;CAEvB,IAAM,IAAgC,CAAC,GACnC;CACJ,IAAI;EACF,IAAgB,KAAK,MAAM,EAAM,OAAO;CAC1C,SAAS,GAAG;EAEV,OADA,QAAQ,MAAM,CAAC,GACR,CAAC,EAAE,eAAe,EAAM,QAAQ,CAAC;CAC1C;CA2BA,OApBA,EAL0B;EACxB,MAAM;EACN,MAAM;CACR,CAEA,EAAS,SAAS,MAAiB;EACjC,IAAM,IAAmB,EAAS;GAChC,MAAM;GACN,MAAM;EACR,CAAC;EACD,AAAI,EAAiB,MACnB,EAAc,KAAK,EAAE,eAAe,EAAiB,GAAG,CAAC;EAE3D,IAAM,IAAiB,EAAS;GAC9B,MAAM;GACN,MAAM;EACR,CAAC;EAED,AAAI,EAAe,SAAS,KAC1B,EAAc,KAAK;GACjB,UAAU,EAAe;GACzB,WAAW,EAAe;EAC5B,CAAC;CAEL,CAAC,GACM;AACT"}

package/dist/components/SynapseChat/useChatState.js.map

@@ -1 +1 @@
-{"version":3,"file":"useChatState.js","names":[],"sources":["../../../src/components/SynapseChat/useChatState.ts"],"sourcesContent":["import { useSendChatMessageToAgent } from '@/synapse-queries/chat/useChat'\nimport {\n  AgentChatRequest,\n  AgentChatResponse,\n  AgentSession,\n  AsynchronousJobStatus,\n} from '@sage-bionetworks/synapse-types'\nimport { useCallback, useMemo, useState } from 'react'\n\nexport type ChatState = {\n  sendChat: (message: string) => void\n  pendingMessage: string | null\n  chatJobIds: string[]\n}\n\nexport function useChatState(\n  agentSession?: AgentSession,\n  onChatResponse?: (responseText: string) => void,\n): ChatState {\n  const [chatJobIds, setChatJobIds] = useState<string[]>([])\n  // Optimistic update state for latest unprocessed message\n  const [pendingMessage, setPendingMessage] = useState<string | null>(null)\n\n  const { mutate: sendChatMessageToAgent } = useSendChatMessageToAgent(\n    {\n      onMutate: (newChatMessage: AgentChatRequest) => {\n        // set the pending message to the new chat message\n        setPendingMessage(newChatMessage.chatText)\n      },\n      onSuccess: (response: AgentChatResponse) => {\n        onChatResponse?.(response.responseText)\n      },\n    },\n    (status: AsynchronousJobStatus<AgentChatRequest, AgentChatResponse>) => {\n      if (!chatJobIds.includes(status.jobId)) {\n        setPendingMessage(null)\n        setChatJobIds(() => [...chatJobIds, status.jobId])\n      }\n    },\n  )\n\n  const sendChat = useCallback(\n    (message: string) => {\n      if (!agentSession?.sessionId) {\n        throw new Error('No agent session available to send chat message.')\n      }\n      sendChatMessageToAgent({\n        chatText: message,\n        sessionId: agentSession.sessionId,\n        enableTrace: true,\n      })\n    },\n    [agentSession?.sessionId, sendChatMessageToAgent],\n  )\n\n  return useMemo(\n    () => ({ sendChat, pendingMessage, chatJobIds }),\n    [sendChat, pendingMessage, chatJobIds],\n  )\n}\n"],"mappings":";;;AAeA,SAAgB,EACd,GACA,GACW;CACX,IAAM,CAAC,GAAY,KAAiB,EAAmB,EAAE,CAAC,EAEpD,CAAC,GAAgB,KAAqB,EAAwB,KAAK,EAEnE,EAAE,QAAQ,MAA2B,EACzC;EACE,WAAW,MAAqC;AAE9C,KAAkB,EAAe,SAAS;;EAE5C,YAAY,MAAgC;AAC1C,OAAiB,EAAS,aAAa;;EAE1C,GACA,MAAuE;AACtE,EAAK,EAAW,SAAS,EAAO,MAAM,KACpC,EAAkB,KAAK,EACvB,QAAoB,CAAC,GAAG,GAAY,EAAO,MAAM,CAAC;GAGvD,EAEK,IAAW,GACd,MAAoB;AACnB,MAAI,CAAC,GAAc,UACjB,OAAU,MAAM,mDAAmD;AAErE,IAAuB;GACrB,UAAU;GACV,WAAW,EAAa;GACxB,aAAa;GACd,CAAC;IAEJ,CAAC,GAAc,WAAW,EAAuB,CAClD;AAED,QAAO,SACE;EAAE;EAAU;EAAgB;EAAY,GAC/C;EAAC;EAAU;EAAgB;EAAW,CACvC"}
+{"version":3,"file":"useChatState.js","names":[],"sources":["../../../src/components/SynapseChat/useChatState.ts"],"sourcesContent":["import { useSendChatMessageToAgent } from '@/synapse-queries/chat/useChat'\nimport {\n  AgentChatRequest,\n  AgentChatResponse,\n  AgentSession,\n  AsynchronousJobStatus,\n} from '@sage-bionetworks/synapse-types'\nimport { useCallback, useMemo, useState } from 'react'\n\nexport type ChatState = {\n  sendChat: (message: string) => void\n  pendingMessage: string | null\n  chatJobIds: string[]\n}\n\nexport function useChatState(\n  agentSession?: AgentSession,\n  onChatResponse?: (responseText: string) => void,\n): ChatState {\n  const [chatJobIds, setChatJobIds] = useState<string[]>([])\n  // Optimistic update state for latest unprocessed message\n  const [pendingMessage, setPendingMessage] = useState<string | null>(null)\n\n  const { mutate: sendChatMessageToAgent } = useSendChatMessageToAgent(\n    {\n      onMutate: (newChatMessage: AgentChatRequest) => {\n        // set the pending message to the new chat message\n        setPendingMessage(newChatMessage.chatText)\n      },\n      onSuccess: (response: AgentChatResponse) => {\n        onChatResponse?.(response.responseText)\n      },\n    },\n    (status: AsynchronousJobStatus<AgentChatRequest, AgentChatResponse>) => {\n      if (!chatJobIds.includes(status.jobId)) {\n        setPendingMessage(null)\n        setChatJobIds(() => [...chatJobIds, status.jobId])\n      }\n    },\n  )\n\n  const sendChat = useCallback(\n    (message: string) => {\n      if (!agentSession?.sessionId) {\n        throw new Error('No agent session available to send chat message.')\n      }\n      sendChatMessageToAgent({\n        chatText: message,\n        sessionId: agentSession.sessionId,\n        enableTrace: true,\n      })\n    },\n    [agentSession?.sessionId, sendChatMessageToAgent],\n  )\n\n  return useMemo(\n    () => ({ sendChat, pendingMessage, chatJobIds }),\n    [sendChat, pendingMessage, chatJobIds],\n  )\n}\n"],"mappings":";;;AAeA,SAAgB,EACd,GACA,GACW;CACX,IAAM,CAAC,GAAY,KAAiB,EAAmB,CAAC,CAAC,GAEnD,CAAC,GAAgB,KAAqB,EAAwB,IAAI,GAElE,EAAE,QAAQ,MAA2B,EACzC;EACE,WAAW,MAAqC;GAE9C,EAAkB,EAAe,QAAQ;EAC3C;EACA,YAAY,MAAgC;GAC1C,IAAiB,EAAS,YAAY;EACxC;CACF,IACC,MAAuE;EACtE,AAAK,EAAW,SAAS,EAAO,KAAK,MACnC,EAAkB,IAAI,GACtB,QAAoB,CAAC,GAAG,GAAY,EAAO,KAAK,CAAC;CAErD,CACF,GAEM,IAAW,GACd,MAAoB;EACnB,IAAI,CAAC,GAAc,WACjB,MAAU,MAAM,kDAAkD;EAEpE,EAAuB;GACrB,UAAU;GACV,WAAW,EAAa;GACxB,aAAa;EACf,CAAC;CACH,GACA,CAAC,GAAc,WAAW,CAAsB,CAClD;CAEA,OAAO,SACE;EAAE;EAAU;EAAgB;CAAW,IAC9C;EAAC;EAAU;EAAgB;CAAU,CACvC;AACF"}

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

@@ -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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"}
+{"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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"}

package/dist/components/SynapseFooter/SynapseLinksColumn.js.map

@@ -1 +1 @@
-{"version":3,"file":"SynapseLinksColumn.js","names":[],"sources":["../../../src/components/SynapseFooter/SynapseLinksColumn.tsx"],"sourcesContent":["import { Box, Link, Typography } from '@mui/material'\nimport { LinkProps } from '@mui/material'\n\nexport type SynapseLinksColumnProps = {\n  category: string\n  synapseLinks: SynapseLink[]\n}\nexport type SynapseLink = {\n  text: string\n  props: LinkProps\n}\n\nexport function SynapseLinksColumn({\n  category,\n  synapseLinks,\n}: SynapseLinksColumnProps) {\n  return (\n    <Box sx={{ display: 'flex', flexDirection: 'column', rowGap: '10px' }}>\n      <Typography\n        variant=\"body1\"\n        sx={{\n          color: 'white',\n        }}\n      >\n        {category}\n      </Typography>\n      {synapseLinks.map(synapseLink => (\n        <Link\n          key={synapseLink.text}\n          target=\"_blank\"\n          rel=\"noreferrer\"\n          sx={{\n            color: 'primary.200',\n            fontSize: '18px',\n            fontWeight: 400,\n            lineHeight: '24px',\n            textDecoration: 'none',\n            '&:focus': {\n              color: 'primary.200',\n              textDecoration: 'none',\n            },\n            '&:visited': {\n              color: 'primary.200',\n              textDecoration: 'none',\n            },\n            '&:hover': {\n              color: 'white',\n              textDecoration: 'none',\n            },\n          }}\n          {...synapseLink.props}\n        >\n          {synapseLink.text}\n        </Link>\n      ))}\n    </Box>\n  )\n}\n"],"mappings":";;;AAYA,SAAgB,EAAmB,EACjC,aACA,mBAC0B;AAC1B,QACE,kBAAC,GAAD;EAAK,IAAI;GAAE,SAAS;GAAQ,eAAe;GAAU,QAAQ;GAAQ;YAArE,CACE,kBAAC,GAAD;GACE,SAAQ;GACR,IAAI,EACF,OAAO,SACR;aAEA;GACU,CAAA,EACZ,EAAa,KAAI,MAChB,kBAAC,GAAD;GAEE,QAAO;GACP,KAAI;GACJ,IAAI;IACF,OAAO;IACP,UAAU;IACV,YAAY;IACZ,YAAY;IACZ,gBAAgB;IAChB,WAAW;KACT,OAAO;KACP,gBAAgB;KACjB;IACD,aAAa;KACX,OAAO;KACP,gBAAgB;KACjB;IACD,WAAW;KACT,OAAO;KACP,gBAAgB;KACjB;IACF;GACD,GAAI,EAAY;aAEf,EAAY;GACR,EAzBA,EAAY,KAyBZ,CACP,CACE"}
+{"version":3,"file":"SynapseLinksColumn.js","names":[],"sources":["../../../src/components/SynapseFooter/SynapseLinksColumn.tsx"],"sourcesContent":["import { Box, Link, Typography } from '@mui/material'\nimport { LinkProps } from '@mui/material'\n\nexport type SynapseLinksColumnProps = {\n  category: string\n  synapseLinks: SynapseLink[]\n}\nexport type SynapseLink = {\n  text: string\n  props: LinkProps\n}\n\nexport function SynapseLinksColumn({\n  category,\n  synapseLinks,\n}: SynapseLinksColumnProps) {\n  return (\n    <Box sx={{ display: 'flex', flexDirection: 'column', rowGap: '10px' }}>\n      <Typography\n        variant=\"body1\"\n        sx={{\n          color: 'white',\n        }}\n      >\n        {category}\n      </Typography>\n      {synapseLinks.map(synapseLink => (\n        <Link\n          key={synapseLink.text}\n          target=\"_blank\"\n          rel=\"noreferrer\"\n          sx={{\n            color: 'primary.200',\n            fontSize: '18px',\n            fontWeight: 400,\n            lineHeight: '24px',\n            textDecoration: 'none',\n            '&:focus': {\n              color: 'primary.200',\n              textDecoration: 'none',\n            },\n            '&:visited': {\n              color: 'primary.200',\n              textDecoration: 'none',\n            },\n            '&:hover': {\n              color: 'white',\n              textDecoration: 'none',\n            },\n          }}\n          {...synapseLink.props}\n        >\n          {synapseLink.text}\n        </Link>\n      ))}\n    </Box>\n  )\n}\n"],"mappings":";;;AAYA,SAAgB,EAAmB,EACjC,aACA,mBAC0B;CAC1B,OACE,kBAAC,GAAD;EAAK,IAAI;GAAE,SAAS;GAAQ,eAAe;GAAU,QAAQ;EAAO;YAApE,CACE,kBAAC,GAAD;GACE,SAAQ;GACR,IAAI,EACF,OAAO,QACT;aAEC;EACS,CAAA,GACX,EAAa,KAAI,MAChB,kBAAC,GAAD;GAEE,QAAO;GACP,KAAI;GACJ,IAAI;IACF,OAAO;IACP,UAAU;IACV,YAAY;IACZ,YAAY;IACZ,gBAAgB;IAChB,WAAW;KACT,OAAO;KACP,gBAAgB;IAClB;IACA,aAAa;KACX,OAAO;KACP,gBAAgB;IAClB;IACA,WAAW;KACT,OAAO;KACP,gBAAgB;IAClB;GACF;GACA,GAAI,EAAY;aAEf,EAAY;EACT,GAzBC,EAAY,IAyBb,CACP,CACE;;AAET"}

package/dist/components/SynapseForm/DataDebug.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataDebug.js","names":[],"sources":["../../../src/components/SynapseForm/DataDebug.tsx"],"sourcesContent":["interface DataDebugProps {\n  formData: any\n  hidden: boolean\n}\n\nexport default function DataDebug(props: DataDebugProps) {\n  const myData = (\n    <div>\n      <h6>Data</h6>\n      <pre>{JSON.stringify(props.formData, null, 2)}</pre>\n    </div>\n  )\n  return <>{!props.hidden && myData}</>\n}\n"],"mappings":";;AAKA,SAAwB,EAAU,GAAuB;CACvD,IAAM,IACJ,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,MAAD,EAAA,UAAI,QAAS,CAAA,EACb,kBAAC,OAAD,EAAA,UAAM,KAAK,UAAU,EAAM,UAAU,MAAM,EAAE,EAAO,CAAA,CAChD,EAAA,CAAA;AAER,QAAO,kBAAA,GAAA,EAAA,UAAG,CAAC,EAAM,UAAU,GAAU,CAAA"}
+{"version":3,"file":"DataDebug.js","names":[],"sources":["../../../src/components/SynapseForm/DataDebug.tsx"],"sourcesContent":["interface DataDebugProps {\n  formData: any\n  hidden: boolean\n}\n\nexport default function DataDebug(props: DataDebugProps) {\n  const myData = (\n    <div>\n      <h6>Data</h6>\n      <pre>{JSON.stringify(props.formData, null, 2)}</pre>\n    </div>\n  )\n  return <>{!props.hidden && myData}</>\n}\n"],"mappings":";;AAKA,SAAwB,EAAU,GAAuB;CACvD,IAAM,IACJ,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,MAAD,EAAA,UAAI,OAAQ,CAAA,GACZ,kBAAC,OAAD,EAAA,UAAM,KAAK,UAAU,EAAM,UAAU,MAAM,CAAC,EAAO,CAAA,CAChD,EAAA,CAAA;CAEP,OAAO,kBAAA,GAAA,EAAA,UAAG,CAAC,EAAM,UAAU,EAAS,CAAA;AACtC"}

package/dist/components/SynapseForm/Header.js.map

@@ -1 +1 @@
-{"version":3,"file":"Header.js","names":[],"sources":["../../../src/components/SynapseForm/Header.tsx"],"sourcesContent":["export type HeaderProps = {\n  isSubmitted?: boolean\n  bodyText?: string //should never take user input only use cardcoded text from a parent component. Uses dangerouslySetInnerHTML\n  title: string\n}\n\nexport default function Header(props: HeaderProps) {\n  let bodyText = <></>\n\n  if (props.isSubmitted) {\n    bodyText = <div>Your information has been submitted</div>\n  } else {\n    if (props.bodyText) {\n      bodyText = (\n        <div dangerouslySetInnerHTML={{ __html: props.bodyText }}></div>\n      )\n    }\n  }\n\n  return (\n    <div\n      className={`submission-header${props.isSubmitted ? ' submitted' : ''}`}\n    >\n      <h2>{props.title}</h2>\n      {bodyText}\n      <hr></hr>\n    </div>\n  )\n}\n"],"mappings":";;AAMA,SAAwB,EAAO,GAAoB;CACjD,IAAI,IAAW,kBAAA,GAAA,EAAK,CAAA;AAYpB,QAVI,EAAM,cACR,IAAW,kBAAC,OAAD,EAAA,UAAK,uCAAyC,CAAA,GAErD,EAAM,aACR,IACE,kBAAC,OAAD,EAAK,yBAAyB,EAAE,QAAQ,EAAM,UAAU,EAAQ,CAAA,GAMpE,kBAAC,OAAD;EACE,WAAW,oBAAoB,EAAM,cAAc,eAAe;YADpE;GAGE,kBAAC,MAAD,EAAA,UAAK,EAAM,OAAW,CAAA;GACrB;GACD,kBAAC,MAAD,EAAS,CAAA;GACL"}
+{"version":3,"file":"Header.js","names":[],"sources":["../../../src/components/SynapseForm/Header.tsx"],"sourcesContent":["export type HeaderProps = {\n  isSubmitted?: boolean\n  bodyText?: string //should never take user input only use cardcoded text from a parent component. Uses dangerouslySetInnerHTML\n  title: string\n}\n\nexport default function Header(props: HeaderProps) {\n  let bodyText = <></>\n\n  if (props.isSubmitted) {\n    bodyText = <div>Your information has been submitted</div>\n  } else {\n    if (props.bodyText) {\n      bodyText = (\n        <div dangerouslySetInnerHTML={{ __html: props.bodyText }}></div>\n      )\n    }\n  }\n\n  return (\n    <div\n      className={`submission-header${props.isSubmitted ? ' submitted' : ''}`}\n    >\n      <h2>{props.title}</h2>\n      {bodyText}\n      <hr></hr>\n    </div>\n  )\n}\n"],"mappings":";;AAMA,SAAwB,EAAO,GAAoB;CACjD,IAAI,IAAW,kBAAA,GAAA,CAAI,CAAA;CAYnB,OAVI,EAAM,cACR,IAAW,kBAAC,OAAD,EAAA,UAAK,sCAAwC,CAAA,IAEpD,EAAM,aACR,IACE,kBAAC,OAAD,EAAK,yBAAyB,EAAE,QAAQ,EAAM,SAAS,EAAQ,CAAA,IAMnE,kBAAC,OAAD;EACE,WAAW,oBAAoB,EAAM,cAAc,eAAe;YADpE;GAGE,kBAAC,MAAD,EAAA,UAAK,EAAM,MAAU,CAAA;GACpB;GACD,kBAAC,MAAD,CAAQ,CAAA;EACL;;AAET"}

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

@@ -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,GAAG,GAAG,GAI5C,EAAM,GACrC,kBAAC,UAAD;EACE,MAAK;EACL,UAAS,MAAK,EAAM,YAAY,EAAc,SAAS;EACvD,WAAU;YAEV,kBAAC,GAAD,EAAS,MAAK,eAAgB,CAAA;EACvB,CAAA,GAET,kBAAA,GAAA,EAAK,CAAA,EAGD,IAAc,EAAM,YAAY,QASpC,kBAAA,GAAA,EAAK,CAAA,GARL,kBAAC,UAAD;EACE,MAAK;EACL,UAAS,MAAK,EAAM,YAAY,EAAc,KAAK;EACnD,WAAU;YAEV,kBAAC,GAAD,EAAS,MAAK,gBAAiB,CAAA;EACxB,CAAA,EAKL,IACJ,kBAAC,UAAD;EACE,MAAK;EACL,WAAU;EACV,UAAU,EAAM;EAChB,UAAS,MAAK,EAAM,YAAY,EAAc,KAAK;YACpD;EAEQ,CAAA;AAGX,QACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,MAAD,EAAS,CAAA,EACT,kBAAC,OAAD;EAAK,WAAU;YAAf;GACG;GAAe;GAAE;GAAW;GAAE;GAC3B;IACF,EAAA,CAAA;;AAIV,SAAgB,EAAa,GAA0B;CACrD,IAAM,IAAW,EAAM,MAAM,MAAK,MAAQ,EAAK,OAAO,EAAM,WAAW;AAIvE,QAHW,MAAa,SACf,kBAAA,GAAA,EAAK,CAAA,GAGZ,kBAAC,QAAD;EAAM,WAAU;YAAhB,CACE,kBAAC,KAAD;GAAG,UAAS,MAAK,EAAM,YAAY,EAAS;aAAG,EAAS;GAAU,CAAA,EAClE,kBAAC,GAAD,EAAS,MAAK,gBAAiB,CAAA,CAC1B"}
+{"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"}

package/dist/components/SynapseForm/StepsSideNav.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepsSideNav.js","names":[],"sources":["../../../src/components/SynapseForm/StepsSideNav.tsx"],"sourcesContent":["import IconSvg, { IconName } from '../IconSvg/IconSvg'\nimport { Step, StepStateEnum } from './types'\n\nexport type StepsSideNavProps = {\n  stepList: Step[]\n  onStepChange: (step: Step) => void\n  isWizardMode?: boolean\n}\n\nexport default function StepsSideNav(props: StepsSideNavProps) {\n  const nonChildSteps = props.stepList.filter(step => step.child !== true)\n\n  const getIcon = (\n    state: StepStateEnum,\n    isExcluded: boolean | undefined,\n    isStatic: boolean | undefined,\n    isSubmit: boolean | undefined,\n  ): { iconDef: IconName } => {\n    let iconDef: IconName = 'circle'\n    if (isStatic || isSubmit) {\n      return {\n        iconDef,\n      }\n    }\n\n    if (isExcluded) {\n      iconDef = 'block'\n    } else if (state === StepStateEnum.COMPLETED) {\n      iconDef = 'checkCircle'\n    } else if (state === StepStateEnum.ERROR) {\n      iconDef = 'errorOutlined'\n    }\n    return { iconDef }\n  }\n\n  const getItemClass = (\n    isInProgress: boolean,\n    isStatic: boolean = false,\n  ): string => {\n    let liClassName = 'item'\n    if (isInProgress) {\n      liClassName = `${liClassName} pointed `\n    }\n    if (isStatic) {\n      liClassName = `${liClassName} static`\n    }\n    return liClassName\n  }\n\n  const getListItem = (\n    step: Step,\n    isWizard: boolean,\n    isRenderChild = false,\n  ) => {\n    if (!step || (step.child && !isRenderChild)) {\n      return <></>\n    }\n    const renderStepName = (\n      step: Step,\n      isWizard: boolean,\n      callback: (step: Step) => void,\n    ) => {\n      if (!step.inProgress && (!isWizard || !!step.final)) {\n        return (\n          <button className=\"btn btn-link\" onClick={() => callback(step)}>\n            {step.title}\n          </button>\n        )\n      } else {\n        return <span>{step.title}</span>\n      }\n    }\n    const icon = getIcon(step.state, step.excluded, step.static, step.final)\n    const itemClass = getItemClass(step.inProgress, step.static)\n\n    return (\n      <div className={itemClass}>\n        <IconSvg icon={icon.iconDef} />\n        {renderStepName(step, isWizard, props.onStepChange)}\n      </div>\n    )\n  }\n\n  return (\n    <div className=\"SRC-menuLayout json-forms-menu\" style={{ flex: '1' }}>\n      <ul>\n        {nonChildSteps.map((step: Step, i: number) => {\n          return (\n            <li className=\"item-wrap\" key={`${i}-${step.id}`}>\n              {getListItem(step, !!props.isWizardMode)}\n              {step.children && step.children.length > 0 && (\n                <div className=\"subMenu\">\n                  <ul>\n                    {step.children &&\n                      step.children.map((stepChildId: string, j: number) => {\n                        const childStep = props.stepList.find(\n                          step => step.id === stepChildId,\n                        )\n                        return typeof childStep === 'undefined' ? (\n                          <></>\n                        ) : (\n                          <li className=\"item-wrap\" key={`${j}-${stepChildId}`}>\n                            {getListItem(childStep, !!props.isWizardMode, true)}\n                          </li>\n                        )\n                      })}\n                  </ul>\n                </div>\n              )}\n            </li>\n          )\n        })}\n      </ul>\n    </div>\n  )\n}\n"],"mappings":";;;;AASA,SAAwB,EAAa,GAA0B;CAC7D,IAAM,IAAgB,EAAM,SAAS,QAAO,MAAQ,EAAK,UAAU,GAAK,EAElE,KACJ,GACA,GACA,GACA,MAC0B;EAC1B,IAAI,IAAoB;AAcxB,SAbI,KAAY,MAMZ,IACF,IAAU,UACD,MAAU,EAAc,YACjC,IAAU,gBACD,MAAU,EAAc,UACjC,IAAU,mBAVH,EACL,YACD;IAaC,KACJ,GACA,IAAoB,OACT;EACX,IAAI,IAAc;AAOlB,SANI,MACF,IAAc,GAAG,EAAY,aAE3B,MACF,IAAc,GAAG,EAAY,WAExB;IAGH,KACJ,GACA,GACA,IAAgB,OACb;AACH,MAAI,CAAC,KAAS,EAAK,SAAS,CAAC,EAC3B,QAAO,kBAAA,GAAA,EAAK,CAAA;EAEd,IAAM,KACJ,GACA,GACA,MAEI,CAAC,EAAK,eAAe,CAAC,KAAc,EAAK,SAEzC,kBAAC,UAAD;GAAQ,WAAU;GAAe,eAAe,EAAS,EAAK;aAC3D,EAAK;GACC,CAAA,GAGJ,kBAAC,QAAD,EAAA,UAAO,EAAK,OAAa,CAAA,EAG9B,IAAO,EAAQ,EAAK,OAAO,EAAK,UAAU,EAAK,QAAQ,EAAK,MAAM;AAGxE,SACE,kBAAC,OAAD;GAAK,WAHW,EAAa,EAAK,YAAY,EAAK,OAGnC;aAAhB,CACE,kBAAC,GAAD,EAAS,MAAM,EAAK,SAAW,CAAA,EAC9B,EAAe,GAAM,GAAU,EAAM,aAAa,CAC/C;;;AAIV,QACE,kBAAC,OAAD;EAAK,WAAU;EAAiC,OAAO,EAAE,MAAM,KAAK;YAClE,kBAAC,MAAD,EAAA,UACG,EAAc,KAAK,GAAY,MAE5B,kBAAC,MAAD;GAAI,WAAU;aAAd,CACG,EAAY,GAAM,CAAC,CAAC,EAAM,aAAa,EACvC,EAAK,YAAY,EAAK,SAAS,SAAS,KACvC,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,MAAD,EAAA,UACG,EAAK,YACJ,EAAK,SAAS,KAAK,GAAqB,MAAc;KACpD,IAAM,IAAY,EAAM,SAAS,MAC/B,MAAQ,EAAK,OAAO,EACrB;AACD,YAAc,MAAc,SAC1B,kBAAA,GAAA,EAAK,CAAA,GAEL,kBAAC,MAAD;MAAI,WAAU;gBACX,EAAY,GAAW,CAAC,CAAC,EAAM,cAAc,GAAK;MAChD,EAF0B,GAAG,EAAE,GAAG,IAElC;MAEP,EACD,CAAA;IACD,CAAA,CAEL;KArB0B,GAAG,EAAE,GAAG,EAAK,KAqBvC,CAEP,EACC,CAAA;EACD,CAAA"}
+{"version":3,"file":"StepsSideNav.js","names":[],"sources":["../../../src/components/SynapseForm/StepsSideNav.tsx"],"sourcesContent":["import IconSvg, { IconName } from '../IconSvg/IconSvg'\nimport { Step, StepStateEnum } from './types'\n\nexport type StepsSideNavProps = {\n  stepList: Step[]\n  onStepChange: (step: Step) => void\n  isWizardMode?: boolean\n}\n\nexport default function StepsSideNav(props: StepsSideNavProps) {\n  const nonChildSteps = props.stepList.filter(step => step.child !== true)\n\n  const getIcon = (\n    state: StepStateEnum,\n    isExcluded: boolean | undefined,\n    isStatic: boolean | undefined,\n    isSubmit: boolean | undefined,\n  ): { iconDef: IconName } => {\n    let iconDef: IconName = 'circle'\n    if (isStatic || isSubmit) {\n      return {\n        iconDef,\n      }\n    }\n\n    if (isExcluded) {\n      iconDef = 'block'\n    } else if (state === StepStateEnum.COMPLETED) {\n      iconDef = 'checkCircle'\n    } else if (state === StepStateEnum.ERROR) {\n      iconDef = 'errorOutlined'\n    }\n    return { iconDef }\n  }\n\n  const getItemClass = (\n    isInProgress: boolean,\n    isStatic: boolean = false,\n  ): string => {\n    let liClassName = 'item'\n    if (isInProgress) {\n      liClassName = `${liClassName} pointed `\n    }\n    if (isStatic) {\n      liClassName = `${liClassName} static`\n    }\n    return liClassName\n  }\n\n  const getListItem = (\n    step: Step,\n    isWizard: boolean,\n    isRenderChild = false,\n  ) => {\n    if (!step || (step.child && !isRenderChild)) {\n      return <></>\n    }\n    const renderStepName = (\n      step: Step,\n      isWizard: boolean,\n      callback: (step: Step) => void,\n    ) => {\n      if (!step.inProgress && (!isWizard || !!step.final)) {\n        return (\n          <button className=\"btn btn-link\" onClick={() => callback(step)}>\n            {step.title}\n          </button>\n        )\n      } else {\n        return <span>{step.title}</span>\n      }\n    }\n    const icon = getIcon(step.state, step.excluded, step.static, step.final)\n    const itemClass = getItemClass(step.inProgress, step.static)\n\n    return (\n      <div className={itemClass}>\n        <IconSvg icon={icon.iconDef} />\n        {renderStepName(step, isWizard, props.onStepChange)}\n      </div>\n    )\n  }\n\n  return (\n    <div className=\"SRC-menuLayout json-forms-menu\" style={{ flex: '1' }}>\n      <ul>\n        {nonChildSteps.map((step: Step, i: number) => {\n          return (\n            <li className=\"item-wrap\" key={`${i}-${step.id}`}>\n              {getListItem(step, !!props.isWizardMode)}\n              {step.children && step.children.length > 0 && (\n                <div className=\"subMenu\">\n                  <ul>\n                    {step.children &&\n                      step.children.map((stepChildId: string, j: number) => {\n                        const childStep = props.stepList.find(\n                          step => step.id === stepChildId,\n                        )\n                        return typeof childStep === 'undefined' ? (\n                          <></>\n                        ) : (\n                          <li className=\"item-wrap\" key={`${j}-${stepChildId}`}>\n                            {getListItem(childStep, !!props.isWizardMode, true)}\n                          </li>\n                        )\n                      })}\n                  </ul>\n                </div>\n              )}\n            </li>\n          )\n        })}\n      </ul>\n    </div>\n  )\n}\n"],"mappings":";;;;AASA,SAAwB,EAAa,GAA0B;CAC7D,IAAM,IAAgB,EAAM,SAAS,QAAO,MAAQ,EAAK,UAAU,EAAI,GAEjE,KACJ,GACA,GACA,GACA,MAC0B;EAC1B,IAAI,IAAoB;EAcxB,OAbI,KAAY,MAMZ,IACF,IAAU,UACD,MAAU,EAAc,YACjC,IAAU,gBACD,MAAU,EAAc,UACjC,IAAU,mBAVH,EACL,WACF;CAWJ,GAEM,KACJ,GACA,IAAoB,OACT;EACX,IAAI,IAAc;EAOlB,OANI,MACF,IAAc,GAAG,EAAY,aAE3B,MACF,IAAc,GAAG,EAAY,WAExB;CACT,GAEM,KACJ,GACA,GACA,IAAgB,OACb;EACH,IAAI,CAAC,KAAS,EAAK,SAAS,CAAC,GAC3B,OAAO,kBAAA,GAAA,CAAI,CAAA;EAEb,IAAM,KACJ,GACA,GACA,MAEI,CAAC,EAAK,eAAe,CAAC,KAAc,EAAK,SAEzC,kBAAC,UAAD;GAAQ,WAAU;GAAe,eAAe,EAAS,CAAI;aAC1D,EAAK;EACA,CAAA,IAGH,kBAAC,QAAD,EAAA,UAAO,EAAK,MAAY,CAAA,GAG7B,IAAO,EAAQ,EAAK,OAAO,EAAK,UAAU,EAAK,QAAQ,EAAK,KAAK;EAGvE,OACE,kBAAC,OAAD;GAAK,WAHW,EAAa,EAAK,YAAY,EAAK,MAGnC;aAAhB,CACE,kBAAC,GAAD,EAAS,MAAM,EAAK,QAAU,CAAA,GAC7B,EAAe,GAAM,GAAU,EAAM,YAAY,CAC/C;;CAET;CAEA,OACE,kBAAC,OAAD;EAAK,WAAU;EAAiC,OAAO,EAAE,MAAM,IAAI;YACjE,kBAAC,MAAD,EAAA,UACG,EAAc,KAAK,GAAY,MAE5B,kBAAC,MAAD;GAAI,WAAU;aAAd,CACG,EAAY,GAAM,CAAC,CAAC,EAAM,YAAY,GACtC,EAAK,YAAY,EAAK,SAAS,SAAS,KACvC,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,MAAD,EAAA,UACG,EAAK,YACJ,EAAK,SAAS,KAAK,GAAqB,MAAc;KACpD,IAAM,IAAY,EAAM,SAAS,MAC/B,MAAQ,EAAK,OAAO,CACtB;KACA,OAAc,MAAc,SAC1B,kBAAA,GAAA,CAAI,CAAA,IAEJ,kBAAC,MAAD;MAAI,WAAU;gBACX,EAAY,GAAW,CAAC,CAAC,EAAM,cAAc,EAAI;KAChD,GAF2B,GAAG,EAAE,GAAG,GAEnC;IAER,CAAC,EACD,CAAA;GACD,CAAA,CAEL;KArB2B,GAAG,EAAE,GAAG,EAAK,IAqBxC,CAEP,EACC,CAAA;CACD,CAAA;AAET"}