synapse-react-client 4.0.10 → 4.0.12

package/dist/components/SearchQueryWrapperPlotNav/SearchQueryWrapperPlotNav.d.ts

@@ -0,0 +1,56 @@
+import { CardConfiguration } from '../CardContainer/CardConfiguration';
+import { QueryVisualizationWrapperProps } from '../QueryVisualizationWrapper';
+import { SynapseTableConfiguration } from '../SynapseTable';
+import { TopLevelControlsProps } from '../SynapseTable/TopLevelControls/TopLevelControls';
+import { PlotsContainerProps } from '../widgets/facet-nav/PlotsContainer';
+import { FacetFilterControlsProps } from '../widgets/query-filter/FacetFilterControls';
+import { SearchQueryWrapperProps } from '../SearchQueryWrapper/SearchQueryWrapper';
+type SearchQueryWrapperPlotNavOwnProps = {
+    /** The ID of the SearchIndex entity to query. */
+    searchIndexId: string;
+    /**
+     * The name of the field to use for autocomplete suggestions.
+     * When provided, the search bar will show a dropdown of suggestions as the user types,
+     * populated by querying the search index with this field restricted via POST /search/autocomplete.
+     */
+    autocompleteFieldName?: string;
+    /** Whether the displayed results should be paginated or infinite. Default for cards is true, default for table is false */
+    isInfinite?: boolean;
+    tableConfiguration?: SynapseTableConfiguration;
+    cardConfiguration?: CardConfiguration;
+    facetsToPlot?: string[];
+    availableFacets?: FacetFilterControlsProps['availableFacets'];
+    initialExpandedFacetControls?: FacetFilterControlsProps['initialExpandedFacetControls'];
+    initialLimit?: number;
+    hideTopLevelControls?: boolean;
+};
+export type SearchQueryWrapperPlotNavProps = SearchQueryWrapperPlotNavOwnProps & PlotsContainerProps & Pick<QueryVisualizationWrapperProps, 'defaultShowPlots' | 'visibleColumnCount' | 'columnAliases' | 'rgbIndex' | 'showLastUpdatedOn' | 'noContentPlaceholderType' | 'unitDescription' | 'helpConfiguration' | 'hideCopyToClipboard' | 'hideVisualizationsControl'> & Pick<TopLevelControlsProps, 'name' | 'hideQueryCount'> & {
+    /** Optional initial query parameters. Only selectedFacets, additionalFilters, limit, and offset are used. */
+    initQueryRequest?: SearchQueryWrapperProps['initQueryRequest'];
+    /** Called when the query result bundle changes (e.g. to report result counts to a parent). */
+    onQueryResultBundleChange?: SearchQueryWrapperProps['onQueryResultBundleChange'];
+    /** Whether the URL should update when the query is modified (deep linking). */
+    shouldDeepLink?: SearchQueryWrapperProps['shouldDeepLink'];
+};
+/**
+ * Type guard that identifies a SearchQueryWrapperPlotNavProps from the union
+ * `QueryWrapperPlotNavProps | SearchQueryWrapperPlotNavProps`.
+ *
+ * Two conditions are checked to be robust against future API changes:
+ *  1. The config has `searchIndexId` (present only on SearchQueryWrapperPlotNavProps).
+ *  2. The config does NOT have `sql` (always present on QueryWrapperPlotNavProps via
+ *     QueryOrDeprecatedSearchParams), so that if QueryWrapperPlotNavProps ever gains a
+ *     `searchIndexId` field the guard remains correct.
+ */
+export declare function isSearchQueryWrapperPlotNavProps(config: {
+    searchIndexId?: unknown;
+    sql?: unknown;
+}): config is SearchQueryWrapperPlotNavProps;
+/**
+ * A component similar to QueryWrapperPlotNav that sources its data from the SearchQueryServicesApi
+ * rather than the standard Synapse Table Services. Facets, table/card rendering, and plots are
+ * all reused from the existing component library.
+ */
+export default function SearchQueryWrapperPlotNav(props: SearchQueryWrapperPlotNavProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=SearchQueryWrapperPlotNav.d.ts.map

package/dist/components/SearchQueryWrapperPlotNav/SearchQueryWrapperPlotNav.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchQueryWrapperPlotNav.d.ts","sourceRoot":"","sources":["../../../src/components/SearchQueryWrapperPlotNav/SearchQueryWrapperPlotNav.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAA;AACtE,OAAO,EAEL,8BAA8B,EAC/B,MAAM,8BAA8B,CAAA;AAErC,OAAO,EAAE,yBAAyB,EAAE,MAAM,iBAAiB,CAAA;AAC3D,OAAO,EAAE,qBAAqB,EAAE,MAAM,mDAAmD,CAAA;AACzF,OAAO,EAAE,mBAAmB,EAAE,MAAM,qCAAqC,CAAA;AACzE,OAAO,EAAE,wBAAwB,EAAE,MAAM,6CAA6C,CAAA;AACtF,OAAO,EAEL,uBAAuB,EACxB,MAAM,0CAA0C,CAAA;AAIjD,KAAK,iCAAiC,GAAG;IACvC,iDAAiD;IACjD,aAAa,EAAE,MAAM,CAAA;IACrB;;;;OAIG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAC9B,2HAA2H;IAC3H,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,kBAAkB,CAAC,EAAE,yBAAyB,CAAA;IAC9C,iBAAiB,CAAC,EAAE,iBAAiB,CAAA;IACrC,YAAY,CAAC,EAAE,MAAM,EAAE,CAAA;IACvB,eAAe,CAAC,EAAE,wBAAwB,CAAC,iBAAiB,CAAC,CAAA;IAC7D,4BAA4B,CAAC,EAAE,wBAAwB,CAAC,8BAA8B,CAAC,CAAA;IACvF,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,oBAAoB,CAAC,EAAE,OAAO,CAAA;CAI/B,CAAA;AAED,MAAM,MAAM,8BAA8B,GAAG,iCAAiC,GAC5E,mBAAmB,GACnB,IAAI,CACF,8BAA8B,EAC5B,kBAAkB,GAClB,oBAAoB,GACpB,eAAe,GACf,UAAU,GACV,mBAAmB,GACnB,0BAA0B,GAC1B,iBAAiB,GACjB,mBAAmB,GACnB,qBAAqB,GACrB,2BAA2B,CAC9B,GACD,IAAI,CAAC,qBAAqB,EAAE,MAAM,GAAG,gBAAgB,CAAC,GAAG;IACvD,6GAA6G;IAC7G,gBAAgB,CAAC,EAAE,uBAAuB,CAAC,kBAAkB,CAAC,CAAA;IAC9D,8FAA8F;IAC9F,yBAAyB,CAAC,EAAE,uBAAuB,CAAC,2BAA2B,CAAC,CAAA;IAChF,+EAA+E;IAC/E,cAAc,CAAC,EAAE,uBAAuB,CAAC,gBAAgB,CAAC,CAAA;CAC3D,CAAA;AAEH;;;;;;;;;GASG;AACH,wBAAgB,gCAAgC,CAAC,MAAM,EAAE;IACvD,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,GAAG,CAAC,EAAE,OAAO,CAAA;CACd,GAAG,MAAM,IAAI,8BAA8B,CAE3C;AAED;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,yBAAyB,CAC/C,KAAK,EAAE,8BAA8B,2CAiGtC"}

package/dist/components/SearchQueryWrapperPlotNav/SearchQueryWrapperPlotNav.js

@@ -0,0 +1,73 @@
+import "../../utils/SynapseConstants.js";
+import { NoContentPlaceholderType as e } from "../SynapseTable/NoContentPlaceholderType.js";
+import { QueryVisualizationWrapper as t } from "../QueryVisualizationWrapper/QueryVisualizationWrapper.js";
+import "../QueryVisualizationWrapper/index.js";
+import n from "../QueryWrapper/QueryWrapperLoadingScreen.js";
+import { QueryWrapperPlotNavContents as r } from "../QueryWrapperPlotNav/QueryWrapperPlotNav.js";
+import { useGetSuggestionsForSearchIndex as i } from "../SearchQueryWrapper/SearchQueryUseQueryOptions.js";
+import { SearchQueryWrapper as a } from "../SearchQueryWrapper/SearchQueryWrapper.js";
+import { Suspense as o, useRef as s } from "react";
+import { jsx as c } from "react/jsx-runtime";
+import { useDeepCompareMemoize as l } from "use-deep-compare-effect";
+//#region src/components/SearchQueryWrapperPlotNav/SearchQueryWrapperPlotNav.tsx
+function u(e) {
+	return "searchIndexId" in e && !("sql" in e);
+}
+function d(u) {
+	let { tableConfiguration: d, isInfinite: f = !d, unitDescription: p, helpConfiguration: m, initQueryRequest: h, onQueryResultBundleChange: g, searchIndexId: _, autocompleteFieldName: v, shouldDeepLink: y } = u, b = i(_, v), x = l({
+		partMask: h?.partMask ?? 0,
+		query: {
+			selectedFacets: h?.query?.selectedFacets,
+			additionalFilters: h?.query?.additionalFilters,
+			limit: h?.query?.limit ?? 25,
+			offset: h?.query?.offset ?? 0
+		}
+	}), S = s(0), C = s(x);
+	return C.current !== x && (S.current += 1, C.current = x), /* @__PURE__ */ c(a, {
+		searchIndexId: _,
+		initQueryRequest: x,
+		isInfinite: f,
+		onQueryResultBundleChange: g,
+		shouldDeepLink: y,
+		children: /* @__PURE__ */ c(o, {
+			fallback: /* @__PURE__ */ c(n, {}),
+			children: /* @__PURE__ */ c(t, {
+				unitDescription: p,
+				rgbIndex: u.rgbIndex,
+				columnAliases: u.columnAliases,
+				helpConfiguration: m,
+				visibleColumnCount: u.visibleColumnCount,
+				defaultShowPlots: u.defaultShowPlots,
+				hideCopyToClipboard: u.hideCopyToClipboard,
+				hideSearchBarControl: !1,
+				defaultShowSearchBar: !0,
+				showLastUpdatedOn: u.showLastUpdatedOn,
+				noContentPlaceholderType: u.noContentPlaceholderType ?? e.INTERACTIVE,
+				children: /* @__PURE__ */ c(r, {
+					tableConfiguration: d,
+					name: u.name,
+					cardConfiguration: u.cardConfiguration,
+					facetsToPlot: u.facetsToPlot,
+					availableFacets: u.availableFacets,
+					initialExpandedFacetControls: u.initialExpandedFacetControls,
+					hideDownload: !0,
+					hideQueryCount: u.hideQueryCount ?? !1,
+					hideSqlEditorControl: !0,
+					hideVisualizationsControl: u.hideVisualizationsControl,
+					initialLimit: u.initialLimit,
+					initialPlotTypeByFacetColumnName: u.initialPlotTypeByFacetColumnName,
+					hideTopLevelControls: u.hideTopLevelControls,
+					isFullTextSearchEnabled: !0,
+					searchConfiguration: { ftsConfig: {
+						textMatchesMode: "NATURAL_LANGUAGE",
+						getSuggestions: v ? b : void 0
+					} }
+				})
+			})
+		})
+	}, S.current);
+}
+//#endregion
+export { d as default, u as isSearchQueryWrapperPlotNavProps };
+
+//# sourceMappingURL=SearchQueryWrapperPlotNav.js.map

package/dist/components/SearchQueryWrapperPlotNav/SearchQueryWrapperPlotNav.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchQueryWrapperPlotNav.js","names":[],"sources":["../../../src/components/SearchQueryWrapperPlotNav/SearchQueryWrapperPlotNav.tsx"],"sourcesContent":["import { NoContentPlaceholderType } from '@/components/SynapseTable/NoContentPlaceholderType'\nimport { DEFAULT_PAGE_SIZE } from '@/utils/SynapseConstants'\nimport { Suspense, useRef } from 'react'\nimport { useDeepCompareMemoize } from 'use-deep-compare-effect'\nimport { CardConfiguration } from '../CardContainer/CardConfiguration'\nimport {\n  QueryVisualizationWrapper,\n  QueryVisualizationWrapperProps,\n} from '../QueryVisualizationWrapper'\nimport QueryWrapperLoadingScreen from '../QueryWrapper/QueryWrapperLoadingScreen'\nimport { SynapseTableConfiguration } from '../SynapseTable'\nimport { TopLevelControlsProps } from '../SynapseTable/TopLevelControls/TopLevelControls'\nimport { PlotsContainerProps } from '../widgets/facet-nav/PlotsContainer'\nimport { FacetFilterControlsProps } from '../widgets/query-filter/FacetFilterControls'\nimport {\n  SearchQueryWrapper,\n  SearchQueryWrapperProps,\n} from '../SearchQueryWrapper/SearchQueryWrapper'\nimport { QueryWrapperPlotNavContents } from '../QueryWrapperPlotNav/QueryWrapperPlotNav'\nimport { useGetSuggestionsForSearchIndex } from '../SearchQueryWrapper/SearchQueryUseQueryOptions'\n\ntype SearchQueryWrapperPlotNavOwnProps = {\n  /** The ID of the SearchIndex entity to query. */\n  searchIndexId: string\n  /**\n   * The name of the field to use for autocomplete suggestions.\n   * When provided, the search bar will show a dropdown of suggestions as the user types,\n   * populated by querying the search index with this field restricted via POST /search/autocomplete.\n   */\n  autocompleteFieldName?: string\n  /** Whether the displayed results should be paginated or infinite. Default for cards is true, default for table is false */\n  isInfinite?: boolean\n  tableConfiguration?: SynapseTableConfiguration\n  cardConfiguration?: CardConfiguration\n  facetsToPlot?: string[]\n  availableFacets?: FacetFilterControlsProps['availableFacets']\n  initialExpandedFacetControls?: FacetFilterControlsProps['initialExpandedFacetControls']\n  initialLimit?: number\n  hideTopLevelControls?: boolean\n  // Note: hideDownload, hideSqlEditorControl are intentionally\n  // excluded — they are hardcoded to true because these controls are not applicable to the\n  // SearchQueryServicesApi (no file download, no SQL editing).\n}\n\nexport type SearchQueryWrapperPlotNavProps = SearchQueryWrapperPlotNavOwnProps &\n  PlotsContainerProps &\n  Pick<\n    QueryVisualizationWrapperProps,\n    | 'defaultShowPlots'\n    | 'visibleColumnCount'\n    | 'columnAliases'\n    | 'rgbIndex'\n    | 'showLastUpdatedOn'\n    | 'noContentPlaceholderType'\n    | 'unitDescription'\n    | 'helpConfiguration'\n    | 'hideCopyToClipboard'\n    | 'hideVisualizationsControl'\n  > &\n  Pick<TopLevelControlsProps, 'name' | 'hideQueryCount'> & {\n    /** Optional initial query parameters. Only selectedFacets, additionalFilters, limit, and offset are used. */\n    initQueryRequest?: SearchQueryWrapperProps['initQueryRequest']\n    /** Called when the query result bundle changes (e.g. to report result counts to a parent). */\n    onQueryResultBundleChange?: SearchQueryWrapperProps['onQueryResultBundleChange']\n    /** Whether the URL should update when the query is modified (deep linking). */\n    shouldDeepLink?: SearchQueryWrapperProps['shouldDeepLink']\n  }\n\n/**\n * Type guard that identifies a SearchQueryWrapperPlotNavProps from the union\n * `QueryWrapperPlotNavProps | SearchQueryWrapperPlotNavProps`.\n *\n * Two conditions are checked to be robust against future API changes:\n *  1. The config has `searchIndexId` (present only on SearchQueryWrapperPlotNavProps).\n *  2. The config does NOT have `sql` (always present on QueryWrapperPlotNavProps via\n *     QueryOrDeprecatedSearchParams), so that if QueryWrapperPlotNavProps ever gains a\n *     `searchIndexId` field the guard remains correct.\n */\nexport function isSearchQueryWrapperPlotNavProps(config: {\n  searchIndexId?: unknown\n  sql?: unknown\n}): config is SearchQueryWrapperPlotNavProps {\n  return 'searchIndexId' in config && !('sql' in config)\n}\n\n/**\n * A component similar to QueryWrapperPlotNav that sources its data from the SearchQueryServicesApi\n * rather than the standard Synapse Table Services. Facets, table/card rendering, and plots are\n * all reused from the existing component library.\n */\nexport default function SearchQueryWrapperPlotNav(\n  props: SearchQueryWrapperPlotNavProps,\n) {\n  const {\n    tableConfiguration,\n    isInfinite = !tableConfiguration,\n    unitDescription,\n    helpConfiguration,\n    initQueryRequest: initQueryRequestFromProps,\n    onQueryResultBundleChange,\n    searchIndexId,\n    autocompleteFieldName,\n    shouldDeepLink,\n  } = props\n\n  const getSuggestions = useGetSuggestionsForSearchIndex(\n    searchIndexId,\n    autocompleteFieldName,\n  )\n\n  const initQueryRequest: SearchQueryWrapperProps['initQueryRequest'] =\n    useDeepCompareMemoize({\n      partMask: initQueryRequestFromProps?.partMask ?? 0,\n      query: {\n        selectedFacets: initQueryRequestFromProps?.query?.selectedFacets,\n        additionalFilters: initQueryRequestFromProps?.query?.additionalFilters,\n        limit: initQueryRequestFromProps?.query?.limit ?? DEFAULT_PAGE_SIZE,\n        offset: initQueryRequestFromProps?.query?.offset ?? 0,\n      },\n    })\n\n  // Remount SearchQueryWrapper when initQueryRequest content changes.\n  // useDeepCompareMemoize returns the same reference when content is equal, so reference\n  // comparison is sufficient here. A counter is used rather than JSON.stringify to avoid\n  // serializing the object on every render.\n  const mountKeyRef = useRef(0)\n  const prevInitQueryRef = useRef(initQueryRequest)\n  if (prevInitQueryRef.current !== initQueryRequest) {\n    mountKeyRef.current += 1\n    prevInitQueryRef.current = initQueryRequest\n  }\n\n  return (\n    <SearchQueryWrapper\n      key={mountKeyRef.current}\n      searchIndexId={searchIndexId}\n      initQueryRequest={initQueryRequest}\n      isInfinite={isInfinite}\n      onQueryResultBundleChange={onQueryResultBundleChange}\n      shouldDeepLink={shouldDeepLink}\n    >\n      <Suspense fallback={<QueryWrapperLoadingScreen />}>\n        <QueryVisualizationWrapper\n          unitDescription={unitDescription}\n          rgbIndex={props.rgbIndex}\n          columnAliases={props.columnAliases}\n          helpConfiguration={helpConfiguration}\n          visibleColumnCount={props.visibleColumnCount}\n          defaultShowPlots={props.defaultShowPlots}\n          hideCopyToClipboard={props.hideCopyToClipboard}\n          hideSearchBarControl={false}\n          defaultShowSearchBar={true}\n          showLastUpdatedOn={props.showLastUpdatedOn}\n          noContentPlaceholderType={\n            props.noContentPlaceholderType ??\n            NoContentPlaceholderType.INTERACTIVE\n          }\n        >\n          <QueryWrapperPlotNavContents\n            tableConfiguration={tableConfiguration}\n            name={props.name}\n            cardConfiguration={props.cardConfiguration}\n            facetsToPlot={props.facetsToPlot}\n            availableFacets={props.availableFacets}\n            initialExpandedFacetControls={props.initialExpandedFacetControls}\n            hideDownload={true}\n            hideQueryCount={props.hideQueryCount ?? false}\n            hideSqlEditorControl={true}\n            hideVisualizationsControl={props.hideVisualizationsControl}\n            initialLimit={props.initialLimit}\n            initialPlotTypeByFacetColumnName={\n              props.initialPlotTypeByFacetColumnName\n            }\n            hideTopLevelControls={props.hideTopLevelControls}\n            isFullTextSearchEnabled={true}\n            searchConfiguration={{\n              ftsConfig: {\n                textMatchesMode: 'NATURAL_LANGUAGE',\n                getSuggestions: autocompleteFieldName\n                  ? getSuggestions\n                  : undefined,\n              },\n            }}\n          />\n        </QueryVisualizationWrapper>\n      </Suspense>\n    </SearchQueryWrapper>\n  )\n}\n"],"mappings":";;;;;;;;;;;;AA8EA,SAAgB,EAAiC,GAGJ;AAC3C,QAAO,mBAAmB,KAAU,EAAE,SAAS;;AAQjD,SAAwB,EACtB,GACA;CACA,IAAM,EACJ,uBACA,gBAAa,CAAC,GACd,oBACA,sBACA,kBAAkB,GAClB,8BACA,kBACA,0BACA,sBACE,GAEE,IAAiB,EACrB,GACA,EACD,EAEK,IACJ,EAAsB;EACpB,UAAU,GAA2B,YAAY;EACjD,OAAO;GACL,gBAAgB,GAA2B,OAAO;GAClD,mBAAmB,GAA2B,OAAO;GACrD,OAAO,GAA2B,OAAO,SAAA;GACzC,QAAQ,GAA2B,OAAO,UAAU;GACrD;EACF,CAAC,EAME,IAAc,EAAO,EAAE,EACvB,IAAmB,EAAO,EAAiB;AAMjD,QALI,EAAiB,YAAY,MAC/B,EAAY,WAAW,GACvB,EAAiB,UAAU,IAI3B,kBAAC,GAAD;EAEiB;EACG;EACN;EACe;EACX;YAEhB,kBAAC,GAAD;GAAU,UAAU,kBAAC,GAAD,EAA6B,CAAA;aAC/C,kBAAC,GAAD;IACmB;IACjB,UAAU,EAAM;IAChB,eAAe,EAAM;IACF;IACnB,oBAAoB,EAAM;IAC1B,kBAAkB,EAAM;IACxB,qBAAqB,EAAM;IAC3B,sBAAsB;IACtB,sBAAsB;IACtB,mBAAmB,EAAM;IACzB,0BACE,EAAM,4BACN,EAAyB;cAG3B,kBAAC,GAAD;KACsB;KACpB,MAAM,EAAM;KACZ,mBAAmB,EAAM;KACzB,cAAc,EAAM;KACpB,iBAAiB,EAAM;KACvB,8BAA8B,EAAM;KACpC,cAAc;KACd,gBAAgB,EAAM,kBAAkB;KACxC,sBAAsB;KACtB,2BAA2B,EAAM;KACjC,cAAc,EAAM;KACpB,kCACE,EAAM;KAER,sBAAsB,EAAM;KAC5B,yBAAyB;KACzB,qBAAqB,EACnB,WAAW;MACT,iBAAiB;MACjB,gBAAgB,IACZ,IACA,KAAA;MACL,EACF;KACD,CAAA;IACwB,CAAA;GACnB,CAAA;EACQ,EApDd,EAAY,QAoDE"}

package/dist/components/ShareThisPage/ShareThisPage.js

@@ -27,7 +27,7 @@ var C = ({ shortIoPublicApiKey: C, domain: w = "sageb.io", renderAs: T = "button
 		N && I();
 	}, [N, I]), /* @__PURE__ */ m("div", { children: [T === "button" && /* @__PURE__ */ p(o, {
 		variant: "outlined",
-		endIcon: /* @__PURE__ */ p(h, { className: t.shareIcon }),
+		startIcon: /* @__PURE__ */ p(h, { className: t.shareIcon }),
 		onClick: P,
 		children: "Share"
 	}), /* @__PURE__ */ m(s, {

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

@@ -1 +1 @@
-{"version":3,"file":"ShareThisPage.js","names":[],"sources":["../../../src/components/ShareThisPage/ShareThisPage.tsx"],"sourcesContent":["import {\n  Button,\n  Dialog,\n  DialogTitle,\n  DialogContent,\n  IconButton,\n  Typography,\n  Input,\n  Box,\n} from '@mui/material'\nimport React from 'react'\nimport { useEffect, useState } from 'react'\nimport CloseIcon from '@mui/icons-material/Close'\nimport CopyToClipboardIcon from '../CopyToClipboardIcon'\nimport {\n  LinkedinShareButton,\n  LinkedinIcon,\n  TwitterShareButton,\n  BlueskyShareButton,\n  BlueskyIcon,\n  XIcon,\n} from 'react-share'\nimport styles from './ShareThisPage.module.scss'\nimport { ShareTwoTone } from '@mui/icons-material'\nimport { useCreateShortUrl } from '../../utils/hooks/useCreateShortUrl'\n\nexport type ShareThisPageProps = {\n  shortIoPublicApiKey?: string\n  domain?: string\n  renderAs?: 'button' | 'icon'\n  open?: boolean\n  onClose?: () => void\n}\n\nconst ShareThisPage = ({\n  shortIoPublicApiKey,\n  domain = 'sageb.io',\n  renderAs = 'button',\n  open: externalOpen,\n  onClose: externalOnClose,\n}: ShareThisPageProps): React.ReactNode => {\n  const [url, setUrl] = useState('')\n  const [internalOpen, setInternalOpen] = useState(false)\n\n  // Use internal state if externalOpen is undefined\n  // Otherwise, the open state is controlled externally by externalOpen\n  const isControlled = externalOpen === undefined\n  const open = isControlled ? internalOpen : externalOpen\n\n  const handleOpen = () => {\n    if (isControlled) {\n      setInternalOpen(true)\n    }\n  }\n\n  const handleClose = () => {\n    if (isControlled) {\n      setInternalOpen(false)\n    }\n    if (externalOnClose) {\n      externalOnClose()\n    }\n  }\n\n  const { mutate: createShortUrl, isPending } = useCreateShortUrl({\n    shortIoPublicApiKey,\n    domain,\n    onSuccess: data => {\n      setUrl(data)\n    },\n    onError: error => {\n      console.error(error)\n      setUrl(window.location.href)\n    },\n  })\n\n  useEffect(() => {\n    if (open) {\n      createShortUrl()\n    }\n  }, [open, createShortUrl])\n\n  return (\n    <div>\n      {renderAs === 'button' && (\n        <Button\n          variant=\"outlined\"\n          endIcon={<ShareTwoTone className={styles.shareIcon} />}\n          onClick={handleOpen}\n        >\n          Share\n        </Button>\n      )}\n\n      <Dialog\n        open={open}\n        onClose={handleClose}\n        maxWidth=\"xs\"\n        className={styles.dialogPaper}\n      >\n        <DialogTitle className={styles.dialogTitle}>\n          Share this page\n          <IconButton onClick={handleClose} size=\"small\">\n            <CloseIcon className={styles.closeIcon} />\n          </IconButton>\n        </DialogTitle>\n\n        <DialogContent className={styles.dialogContent}>\n          <Box className={styles.contentStack}>\n            <div className={styles.shareButtonsContainer}>\n              <LinkedinShareButton url={url} aria-label=\"Share on LinkedIn\">\n                <div className={styles.shareItem}>\n                  <LinkedinIcon size={48} round />\n                  <Typography variant=\"body1\" className={styles.shareItemLabel}>\n                    LinkedIn\n                  </Typography>\n                </div>\n              </LinkedinShareButton>\n\n              <TwitterShareButton url={url} aria-label=\"Share on X\">\n                <div className={styles.shareItem}>\n                  <XIcon size={48} round />\n                  <Typography variant=\"body1\" className={styles.shareItemLabel}>\n                    X\n                  </Typography>\n                </div>\n              </TwitterShareButton>\n\n              <BlueskyShareButton url={url} aria-label=\"Share on Bluesky\">\n                <div className={styles.shareItem}>\n                  <BlueskyIcon size={48} round />\n                  <Typography variant=\"body1\" className={styles.shareItemLabel}>\n                    Bluesky\n                  </Typography>\n                </div>\n              </BlueskyShareButton>\n            </div>\n\n            <div className={styles.copySection}>\n              <Typography className={styles.copyLabel}>Page Link</Typography>\n              <div className={styles.copyRow}>\n                <Input\n                  className={styles.urlInput}\n                  value={url}\n                  readOnly\n                  aria-label=\"Page URL\"\n                  placeholder={isPending ? 'Generating link...' : ''}\n                />\n                <CopyToClipboardIcon\n                  value={url}\n                  sizePx={24}\n                  className={styles.copyButton}\n                />\n              </div>\n            </div>\n          </Box>\n        </DialogContent>\n      </Dialog>\n    </div>\n  )\n}\n\nexport default ShareThisPage\n"],"mappings":";;;;;;;;;;AAkCA,IAAM,KAAiB,EACrB,wBACA,YAAS,YACT,cAAW,UACX,MAAM,GACN,SAAS,QACgC;CACzC,IAAM,CAAC,GAAK,KAAU,EAAS,GAAG,EAC5B,CAAC,GAAc,KAAmB,EAAS,GAAM,EAIjD,IAAe,MAAiB,KAAA,GAChC,IAAO,IAAe,IAAe,GAErC,UAAmB;AACvB,EAAI,KACF,EAAgB,GAAK;IAInB,UAAoB;AAIxB,EAHI,KACF,EAAgB,GAAM,EAEpB,KACF,GAAiB;IAIf,EAAE,QAAQ,GAAgB,iBAAc,EAAkB;EAC9D;EACA;EACA,YAAW,MAAQ;AACjB,KAAO,EAAK;;EAEd,UAAS,MAAS;AAEhB,GADA,QAAQ,MAAM,EAAM,EACpB,EAAO,OAAO,SAAS,KAAK;;EAE/B,CAAC;AAQF,QANA,QAAgB;AACd,EAAI,KACF,GAAgB;IAEjB,CAAC,GAAM,EAAe,CAAC,EAGxB,kBAAC,OAAD,EAAA,UAAA,CACG,MAAa,YACZ,kBAAC,GAAD;EACE,SAAQ;EACR,SAAS,kBAAC,GAAD,EAAc,WAAW,EAAO,WAAa,CAAA;EACtD,SAAS;YACV;EAEQ,CAAA,EAGX,kBAAC,GAAD;EACQ;EACN,SAAS;EACT,UAAS;EACT,WAAW,EAAO;YAJpB,CAME,kBAAC,GAAD;GAAa,WAAW,EAAO;aAA/B,CAA4C,mBAE1C,kBAAC,GAAD;IAAY,SAAS;IAAa,MAAK;cACrC,kBAAC,GAAD,EAAW,WAAW,EAAO,WAAa,CAAA;IAC/B,CAAA,CACD;MAEd,kBAAC,GAAD;GAAe,WAAW,EAAO;aAC/B,kBAAC,GAAD;IAAK,WAAW,EAAO;cAAvB,CACE,kBAAC,OAAD;KAAK,WAAW,EAAO;eAAvB;MACE,kBAAC,GAAD;OAA0B;OAAK,cAAW;iBACxC,kBAAC,OAAD;QAAK,WAAW,EAAO;kBAAvB,CACE,kBAAC,GAAD;SAAc,MAAM;SAAI,OAAA;SAAQ,CAAA,EAChC,kBAAC,GAAD;SAAY,SAAQ;SAAQ,WAAW,EAAO;mBAAgB;SAEjD,CAAA,CACT;;OACc,CAAA;MAEtB,kBAAC,GAAD;OAAyB;OAAK,cAAW;iBACvC,kBAAC,OAAD;QAAK,WAAW,EAAO;kBAAvB,CACE,kBAAC,GAAD;SAAO,MAAM;SAAI,OAAA;SAAQ,CAAA,EACzB,kBAAC,GAAD;SAAY,SAAQ;SAAQ,WAAW,EAAO;mBAAgB;SAEjD,CAAA,CACT;;OACa,CAAA;MAErB,kBAAC,GAAD;OAAyB;OAAK,cAAW;iBACvC,kBAAC,OAAD;QAAK,WAAW,EAAO;kBAAvB,CACE,kBAAC,GAAD;SAAa,MAAM;SAAI,OAAA;SAAQ,CAAA,EAC/B,kBAAC,GAAD;SAAY,SAAQ;SAAQ,WAAW,EAAO;mBAAgB;SAEjD,CAAA,CACT;;OACa,CAAA;MACjB;QAEN,kBAAC,OAAD;KAAK,WAAW,EAAO;eAAvB,CACE,kBAAC,GAAD;MAAY,WAAW,EAAO;gBAAW;MAAsB,CAAA,EAC/D,kBAAC,OAAD;MAAK,WAAW,EAAO;gBAAvB,CACE,kBAAC,GAAD;OACE,WAAW,EAAO;OAClB,OAAO;OACP,UAAA;OACA,cAAW;OACX,aAAa,IAAY,uBAAuB;OAChD,CAAA,EACF,kBAAC,GAAD;OACE,OAAO;OACP,QAAQ;OACR,WAAW,EAAO;OAClB,CAAA,CACE;QACF;OACF;;GACQ,CAAA,CACT;IACL,EAAA,CAAA"}
+{"version":3,"file":"ShareThisPage.js","names":[],"sources":["../../../src/components/ShareThisPage/ShareThisPage.tsx"],"sourcesContent":["import {\n  Button,\n  Dialog,\n  DialogTitle,\n  DialogContent,\n  IconButton,\n  Typography,\n  Input,\n  Box,\n} from '@mui/material'\nimport React from 'react'\nimport { useEffect, useState } from 'react'\nimport CloseIcon from '@mui/icons-material/Close'\nimport CopyToClipboardIcon from '../CopyToClipboardIcon'\nimport {\n  LinkedinShareButton,\n  LinkedinIcon,\n  TwitterShareButton,\n  BlueskyShareButton,\n  BlueskyIcon,\n  XIcon,\n} from 'react-share'\nimport styles from './ShareThisPage.module.scss'\nimport { ShareTwoTone } from '@mui/icons-material'\nimport { useCreateShortUrl } from '../../utils/hooks/useCreateShortUrl'\n\nexport type ShareThisPageProps = {\n  shortIoPublicApiKey?: string\n  domain?: string\n  renderAs?: 'button' | 'icon'\n  open?: boolean\n  onClose?: () => void\n}\n\nconst ShareThisPage = ({\n  shortIoPublicApiKey,\n  domain = 'sageb.io',\n  renderAs = 'button',\n  open: externalOpen,\n  onClose: externalOnClose,\n}: ShareThisPageProps): React.ReactNode => {\n  const [url, setUrl] = useState('')\n  const [internalOpen, setInternalOpen] = useState(false)\n\n  // Use internal state if externalOpen is undefined\n  // Otherwise, the open state is controlled externally by externalOpen\n  const isControlled = externalOpen === undefined\n  const open = isControlled ? internalOpen : externalOpen\n\n  const handleOpen = () => {\n    if (isControlled) {\n      setInternalOpen(true)\n    }\n  }\n\n  const handleClose = () => {\n    if (isControlled) {\n      setInternalOpen(false)\n    }\n    if (externalOnClose) {\n      externalOnClose()\n    }\n  }\n\n  const { mutate: createShortUrl, isPending } = useCreateShortUrl({\n    shortIoPublicApiKey,\n    domain,\n    onSuccess: data => {\n      setUrl(data)\n    },\n    onError: error => {\n      console.error(error)\n      setUrl(window.location.href)\n    },\n  })\n\n  useEffect(() => {\n    if (open) {\n      createShortUrl()\n    }\n  }, [open, createShortUrl])\n\n  return (\n    <div>\n      {renderAs === 'button' && (\n        <Button\n          variant=\"outlined\"\n          startIcon={<ShareTwoTone className={styles.shareIcon} />}\n          onClick={handleOpen}\n        >\n          Share\n        </Button>\n      )}\n\n      <Dialog\n        open={open}\n        onClose={handleClose}\n        maxWidth=\"xs\"\n        className={styles.dialogPaper}\n      >\n        <DialogTitle className={styles.dialogTitle}>\n          Share this page\n          <IconButton onClick={handleClose} size=\"small\">\n            <CloseIcon className={styles.closeIcon} />\n          </IconButton>\n        </DialogTitle>\n\n        <DialogContent className={styles.dialogContent}>\n          <Box className={styles.contentStack}>\n            <div className={styles.shareButtonsContainer}>\n              <LinkedinShareButton url={url} aria-label=\"Share on LinkedIn\">\n                <div className={styles.shareItem}>\n                  <LinkedinIcon size={48} round />\n                  <Typography variant=\"body1\" className={styles.shareItemLabel}>\n                    LinkedIn\n                  </Typography>\n                </div>\n              </LinkedinShareButton>\n\n              <TwitterShareButton url={url} aria-label=\"Share on X\">\n                <div className={styles.shareItem}>\n                  <XIcon size={48} round />\n                  <Typography variant=\"body1\" className={styles.shareItemLabel}>\n                    X\n                  </Typography>\n                </div>\n              </TwitterShareButton>\n\n              <BlueskyShareButton url={url} aria-label=\"Share on Bluesky\">\n                <div className={styles.shareItem}>\n                  <BlueskyIcon size={48} round />\n                  <Typography variant=\"body1\" className={styles.shareItemLabel}>\n                    Bluesky\n                  </Typography>\n                </div>\n              </BlueskyShareButton>\n            </div>\n\n            <div className={styles.copySection}>\n              <Typography className={styles.copyLabel}>Page Link</Typography>\n              <div className={styles.copyRow}>\n                <Input\n                  className={styles.urlInput}\n                  value={url}\n                  readOnly\n                  aria-label=\"Page URL\"\n                  placeholder={isPending ? 'Generating link...' : ''}\n                />\n                <CopyToClipboardIcon\n                  value={url}\n                  sizePx={24}\n                  className={styles.copyButton}\n                />\n              </div>\n            </div>\n          </Box>\n        </DialogContent>\n      </Dialog>\n    </div>\n  )\n}\n\nexport default ShareThisPage\n"],"mappings":";;;;;;;;;;AAkCA,IAAM,KAAiB,EACrB,wBACA,YAAS,YACT,cAAW,UACX,MAAM,GACN,SAAS,QACgC;CACzC,IAAM,CAAC,GAAK,KAAU,EAAS,GAAG,EAC5B,CAAC,GAAc,KAAmB,EAAS,GAAM,EAIjD,IAAe,MAAiB,KAAA,GAChC,IAAO,IAAe,IAAe,GAErC,UAAmB;AACvB,EAAI,KACF,EAAgB,GAAK;IAInB,UAAoB;AAIxB,EAHI,KACF,EAAgB,GAAM,EAEpB,KACF,GAAiB;IAIf,EAAE,QAAQ,GAAgB,iBAAc,EAAkB;EAC9D;EACA;EACA,YAAW,MAAQ;AACjB,KAAO,EAAK;;EAEd,UAAS,MAAS;AAEhB,GADA,QAAQ,MAAM,EAAM,EACpB,EAAO,OAAO,SAAS,KAAK;;EAE/B,CAAC;AAQF,QANA,QAAgB;AACd,EAAI,KACF,GAAgB;IAEjB,CAAC,GAAM,EAAe,CAAC,EAGxB,kBAAC,OAAD,EAAA,UAAA,CACG,MAAa,YACZ,kBAAC,GAAD;EACE,SAAQ;EACR,WAAW,kBAAC,GAAD,EAAc,WAAW,EAAO,WAAa,CAAA;EACxD,SAAS;YACV;EAEQ,CAAA,EAGX,kBAAC,GAAD;EACQ;EACN,SAAS;EACT,UAAS;EACT,WAAW,EAAO;YAJpB,CAME,kBAAC,GAAD;GAAa,WAAW,EAAO;aAA/B,CAA4C,mBAE1C,kBAAC,GAAD;IAAY,SAAS;IAAa,MAAK;cACrC,kBAAC,GAAD,EAAW,WAAW,EAAO,WAAa,CAAA;IAC/B,CAAA,CACD;MAEd,kBAAC,GAAD;GAAe,WAAW,EAAO;aAC/B,kBAAC,GAAD;IAAK,WAAW,EAAO;cAAvB,CACE,kBAAC,OAAD;KAAK,WAAW,EAAO;eAAvB;MACE,kBAAC,GAAD;OAA0B;OAAK,cAAW;iBACxC,kBAAC,OAAD;QAAK,WAAW,EAAO;kBAAvB,CACE,kBAAC,GAAD;SAAc,MAAM;SAAI,OAAA;SAAQ,CAAA,EAChC,kBAAC,GAAD;SAAY,SAAQ;SAAQ,WAAW,EAAO;mBAAgB;SAEjD,CAAA,CACT;;OACc,CAAA;MAEtB,kBAAC,GAAD;OAAyB;OAAK,cAAW;iBACvC,kBAAC,OAAD;QAAK,WAAW,EAAO;kBAAvB,CACE,kBAAC,GAAD;SAAO,MAAM;SAAI,OAAA;SAAQ,CAAA,EACzB,kBAAC,GAAD;SAAY,SAAQ;SAAQ,WAAW,EAAO;mBAAgB;SAEjD,CAAA,CACT;;OACa,CAAA;MAErB,kBAAC,GAAD;OAAyB;OAAK,cAAW;iBACvC,kBAAC,OAAD;QAAK,WAAW,EAAO;kBAAvB,CACE,kBAAC,GAAD;SAAa,MAAM;SAAI,OAAA;SAAQ,CAAA,EAC/B,kBAAC,GAAD;SAAY,SAAQ;SAAQ,WAAW,EAAO;mBAAgB;SAEjD,CAAA,CACT;;OACa,CAAA;MACjB;QAEN,kBAAC,OAAD;KAAK,WAAW,EAAO;eAAvB,CACE,kBAAC,GAAD;MAAY,WAAW,EAAO;gBAAW;MAAsB,CAAA,EAC/D,kBAAC,OAAD;MAAK,WAAW,EAAO;gBAAvB,CACE,kBAAC,GAAD;OACE,WAAW,EAAO;OAClB,OAAO;OACP,UAAA;OACA,cAAW;OACX,aAAa,IAAY,uBAAuB;OAChD,CAAA,EACF,kBAAC,GAAD;OACE,OAAO;OACP,QAAQ;OACR,WAAW,EAAO;OAClB,CAAA,CACE;QACF;OACF;;GACQ,CAAA,CACT;IACL,EAAA,CAAA"}

package/dist/components/SynapseChat/GridAgentChat.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GridAgentChat.d.ts","sourceRoot":"","sources":["../../../src/components/SynapseChat/GridAgentChat.tsx"],"names":[],"mappings":"AAOA,MAAM,MAAM,kBAAkB,GAAG;IAC/B,aAAa,EAAE,MAAM,CAAA;IACrB,cAAc,EAAE,MAAM,CAAA;IACtB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,IAAI,EAAE,OAAO,CAAA;IACb,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,iEAAiE;IACjE,mBAAmB,CAAC,EAAE,MAAM,CAAA;CAC7B,CAAA;AAED,wBAAgB,aAAa,CAAC,EAC5B,aAAa,EACb,cAAc,EACd,WAA8B,EAC9B,cAAc,EACd,IAAI,EACJ,OAAO,EACP,mBAAmB,GACpB,EAAE,kBAAkB,2CA+BpB;AAED,eAAe,aAAa,CAAA"}
+{"version":3,"file":"GridAgentChat.d.ts","sourceRoot":"","sources":["../../../src/components/SynapseChat/GridAgentChat.tsx"],"names":[],"mappings":"AAaA,MAAM,MAAM,kBAAkB,GAAG;IAC/B,aAAa,EAAE,MAAM,CAAA;IACrB,cAAc,EAAE,MAAM,CAAA;IACtB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,IAAI,EAAE,OAAO,CAAA;IACb,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,iEAAiE;IACjE,mBAAmB,CAAC,EAAE,MAAM,CAAA;CAC7B,CAAA;AAED,wBAAgB,aAAa,CAAC,EAC5B,aAAa,EACb,cAAc,EACd,WAA8B,EAC9B,cAAc,EACd,IAAI,EACJ,OAAO,EACP,mBAAmB,GACpB,EAAE,kBAAkB,2CAgCpB;AAED,eAAe,aAAa,CAAA"}

package/dist/components/SynapseChat/GridAgentChat.js

@@ -6,32 +6,38 @@ import { useState as r } from "react";
 import { jsx as i } from "react/jsx-runtime";
 import { AgentAccessLevel as a } from "@sage-bionetworks/synapse-types";
 //#region src/components/SynapseChat/GridAgentChat.tsx
-function o({ gridSessionId: o, usersReplicaId: s, chatbotName: c = "Grid Assistant", initialMessage: l, open: u, onClose: d, agentRegistrationId: f }) {
-	let [p, m] = r(), h = e(p);
+var o = [
+	"Help me fill this out",
+	"Help me understand this",
+	"Find missing fields"
+];
+function s({ gridSessionId: s, usersReplicaId: c, chatbotName: l = "Grid Assistant", initialMessage: u, open: d, onClose: f, agentRegistrationId: p }) {
+	let [m, h] = r(), g = e(m);
 	return /* @__PURE__ */ i(n, {
-		open: u,
-		onClose: d,
-		title: c,
+		open: d,
+		onClose: f,
+		title: l,
 		children: /* @__PURE__ */ i(t, {
-			agentRegistrationId: f,
-			chatbotName: c,
-			initialMessage: l,
+			agentRegistrationId: p,
+			chatbotName: l,
+			initialMessage: u,
 			sessionContext: {
 				concreteType: "org.sagebionetworks.repo.model.agent.GridAgentSessionContext",
-				gridSessionId: o,
-				usersReplicaId: s
+				gridSessionId: s,
+				usersReplicaId: c
 			},
 			textboxPositionOffset: "16px",
 			hideTitle: !0,
 			showAccessLevelMenu: !1,
 			defaultAgentAccessLevel: a.WRITE_YOUR_PRIVATE_DATA,
-			externalSession: p,
-			setExternalSession: m,
-			externalChatState: h
+			externalSession: m,
+			setExternalSession: h,
+			externalChatState: g,
+			suggestedPrompts: o
 		})
 	});
 }
 //#endregion
-export { o as GridAgentChat, o as default };
+export { s as GridAgentChat, s as default };
 
 //# sourceMappingURL=GridAgentChat.js.map

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\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      />\n    </DraggableDialog>\n  )\n}\n\nexport default GridAgentChat\n"],"mappings":";;;;;;;;AAkBA,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;GACnB,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;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"}

package/dist/components/SynapseChat/SynapseChat.d.ts

@@ -19,6 +19,8 @@ export type SynapseChatProps = {
      * Called in the mutation onSuccess handler so it runs exactly once per response.
      */
     onChatResponse?: (responseText: string) => void;
+    /** Optional list of prompt suggestions shown as clickable pills above the text input */
+    suggestedPrompts?: string[];
 };
 export type ChatInteraction = {
     userMessage: string;
@@ -29,6 +31,6 @@ export type ChatInteraction = {
 export type TraceEventWithFriendlyMessage = {
     friendlyMessage?: string;
 } & TraceEvent;
-export declare function SynapseChat({ initialMessage, agentRegistrationId, chatbotName, hideTitle, textboxPositionOffset, sessionContext, externalSession, setExternalSession, externalChatState, showAccessLevelMenu, onChatResponse, }: SynapseChatProps): import("react/jsx-runtime").JSX.Element;
+export declare function SynapseChat({ initialMessage, agentRegistrationId, chatbotName, hideTitle, textboxPositionOffset, sessionContext, externalSession, setExternalSession, externalChatState, showAccessLevelMenu, onChatResponse, suggestedPrompts, }: SynapseChatProps): import("react/jsx-runtime").JSX.Element;
 export default SynapseChat;
 //# sourceMappingURL=SynapseChat.d.ts.map

package/dist/components/SynapseChat/SynapseChat.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SynapseChat.d.ts","sourceRoot":"","sources":["../../../src/components/SynapseChat/SynapseChat.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAgB,MAAM,uCAAuC,CAAA;AAiB/E,OAAO,EAAE,uBAAuB,EAAE,MAAM,kCAAkC,CAAA;AAC1E,OAAO,EACL,gBAAgB,EAChB,YAAY,EACZ,UAAU,EACX,MAAM,iCAAiC,CAAA;AAQxC,MAAM,MAAM,gBAAgB,GAAG;IAC7B,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAE9B,cAAc,CAAC,EAAE,uBAAuB,CAAA;IAExC,eAAe,CAAC,EAAE,YAAY,CAAA;IAE9B,kBAAkB,CAAC,EAAE,CAAC,CAAC,EAAE,YAAY,GAAG,SAAS,KAAK,IAAI,CAAA;IAE1D,iBAAiB,CAAC,EAAE,SAAS,CAAA;IAE7B,uBAAuB,CAAC,EAAE,gBAAgB,CAAA;IAE1C,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B;;;;OAIG;IACH,cAAc,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAA;CAChD,CAAA;AAED,MAAM,MAAM,eAAe,GAAG;IAC5B,WAAW,EAAE,MAAM,CAAA;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,iBAAiB,CAAC,EAAE,6BAA6B,EAAE,CAAA;CACpD,CAAA;AAED,MAAM,MAAM,6BAA6B,GAAG;IAC1C,eAAe,CAAC,EAAE,MAAM,CAAA;CACzB,GAAG,UAAU,CAAA;AAEd,wBAAgB,WAAW,CAAC,EAC1B,cAAc,EACd,mBAAmB,EACnB,WAA2B,EAC3B,SAAiB,EACjB,qBAA6B,EAC7B,cAAc,EACd,eAAe,EACf,kBAAkB,EAClB,iBAAiB,EACjB,mBAA0B,EAC1B,cAAc,GACf,EAAE,gBAAgB,2CA0PlB;AAED,eAAe,WAAW,CAAA"}
+{"version":3,"file":"SynapseChat.d.ts","sourceRoot":"","sources":["../../../src/components/SynapseChat/SynapseChat.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAgB,MAAM,uCAAuC,CAAA;AAmB/E,OAAO,EAAE,uBAAuB,EAAE,MAAM,kCAAkC,CAAA;AAC1E,OAAO,EACL,gBAAgB,EAChB,YAAY,EACZ,UAAU,EACX,MAAM,iCAAiC,CAAA;AAQxC,MAAM,MAAM,gBAAgB,GAAG;IAC7B,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAE9B,cAAc,CAAC,EAAE,uBAAuB,CAAA;IAExC,eAAe,CAAC,EAAE,YAAY,CAAA;IAE9B,kBAAkB,CAAC,EAAE,CAAC,CAAC,EAAE,YAAY,GAAG,SAAS,KAAK,IAAI,CAAA;IAE1D,iBAAiB,CAAC,EAAE,SAAS,CAAA;IAE7B,uBAAuB,CAAC,EAAE,gBAAgB,CAAA;IAE1C,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B;;;;OAIG;IACH,cAAc,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAA;IAC/C,wFAAwF;IACxF,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAA;CAC5B,CAAA;AAED,MAAM,MAAM,eAAe,GAAG;IAC5B,WAAW,EAAE,MAAM,CAAA;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,iBAAiB,CAAC,EAAE,6BAA6B,EAAE,CAAA;CACpD,CAAA;AAED,MAAM,MAAM,6BAA6B,GAAG;IAC1C,eAAe,CAAC,EAAE,MAAM,CAAA;CACzB,GAAG,UAAU,CAAA;AAEd,wBAAgB,WAAW,CAAC,EAC1B,cAAc,EACd,mBAAmB,EACnB,WAA2B,EAC3B,SAAiB,EACjB,qBAA6B,EAC7B,cAAc,EACd,eAAe,EACf,kBAAkB,EAClB,iBAAiB,EACjB,mBAA0B,EAC1B,cAAc,EACd,gBAAgB,GACjB,EAAE,gBAAgB,2CA+QlB;AAED,eAAe,WAAW,CAAA"}

package/dist/components/SynapseChat/SynapseChat.js

@@ -10,47 +10,47 @@ import { AccessLevelMenu as o } from "./AccessLevelMenu.js";
 import { SynapseChatInteraction as s } from "./SynapseChatInteraction.js";
 import ee from "./SynapseChatMessage.js";
 import { useEffect as c, useState as l } from "react";
-import { Alert as u, Box as d, IconButton as f, List as p, TextField as m, Typography as h, useTheme as g } from "@mui/material";
-import { jsx as _, jsxs as v } from "react/jsx-runtime";
-import { AgentAccessLevel as y } from "@sage-bionetworks/synapse-types";
-import { ArrowUpward as b } from "@mui/icons-material";
+import { Alert as u, Box as d, Chip as f, IconButton as p, List as m, Stack as h, TextField as g, Typography as _, useTheme as te } from "@mui/material";
+import { jsx as v, jsxs as y } from "react/jsx-runtime";
+import { AgentAccessLevel as b } from "@sage-bionetworks/synapse-types";
+import { ArrowUpward as x } from "@mui/icons-material";
 //#region src/components/SynapseChat/SynapseChat.tsx
-function x({ initialMessage: x, agentRegistrationId: S, chatbotName: C = "SynapseChat", hideTitle: w = !1, textboxPositionOffset: T = "0px", sessionContext: E, externalSession: D, setExternalSession: O, externalChatState: k, showAccessLevelMenu: A = !0, onChatResponse: j }) {
-	let { accessToken: M } = t(), [N, P] = l(), F = D ?? N, I = O ?? P, { mutate: L, error: R } = r({ onSuccess: (e) => I(e) }), { mutate: z } = i({
+function S({ initialMessage: S, agentRegistrationId: C, chatbotName: w = "SynapseChat", hideTitle: ne = !1, textboxPositionOffset: re = "0px", sessionContext: T, externalSession: E, setExternalSession: D, externalChatState: O, showAccessLevelMenu: k = !0, onChatResponse: A, suggestedPrompts: j }) {
+	let { accessToken: M } = t(), [N, P] = l(), F = E ?? N, I = D ?? P, { mutate: L, error: R } = r({ onSuccess: (e) => I(e) }), { mutate: z } = i({
 		onSuccess: (e) => I(e),
 		onError: (t) => e(`Unable to update the agent session: ${t.message}`, "danger")
-	}), B = g(), [V, H] = l(E ? y.WRITE_YOUR_PRIVATE_DATA : y.PUBLICLY_ACCESSIBLE), U = a(F, j), { pendingMessage: W, chatJobIds: G, sendChat: K } = k ?? U, [q, J] = l(""), [Y, X] = l(!1);
+	}), B = te(), [V, H] = l(T ? b.WRITE_YOUR_PRIVATE_DATA : b.PUBLICLY_ACCESSIBLE), U = a(F, A), { pendingMessage: W, chatJobIds: G, sendChat: K } = O ?? U, [q, J] = l(""), [Y, X] = l(!1);
 	c(() => {
 		L && !F && L({
 			agentAccessLevel: V,
-			agentRegistrationId: S,
-			sessionContext: E
+			agentRegistrationId: C,
+			sessionContext: T
 		});
 	}, [
 		L,
 		F,
 		M,
-		E,
+		T,
 		V,
-		S
+		C
 	]), c(() => {
-		F && x && !Y && (K(x), X(!0));
+		F && S && !Y && (K(S), X(!0));
 	}, [
 		F,
-		x,
+		S,
 		Y,
 		K
 	]);
 	let Z = () => {
 		q.trim() && (K(q.trim()), J(""));
-	}, Q = !F || !q || !!W, te = (e) => {
+	}, Q = !F || !q || !!W, ie = (e) => {
 		!Q && e.key === "Enter" && !e.shiftKey && (e.preventDefault(), Z());
 	}, $ = B.palette.secondary[300];
-	return R ? /* @__PURE__ */ _(u, {
+	return R ? /* @__PURE__ */ v(u, {
 		severity: "error",
 		sx: { my: 2 },
 		children: R.reason
-	}) : /* @__PURE__ */ v(d, {
+	}) : /* @__PURE__ */ y(d, {
 		sx: {
 			display: "flex",
 			flexDirection: "column",
@@ -60,7 +60,7 @@ function x({ initialMessage: x, agentRegistrationId: S, chatbotName: C = "Synaps
 			height: "100%"
 		},
 		children: [
-			!w && /* @__PURE__ */ _(h, {
+			!ne && /* @__PURE__ */ v(_, {
 				variant: "headline1",
 				sx: {
 					p: "20px",
@@ -71,9 +71,9 @@ function x({ initialMessage: x, agentRegistrationId: S, chatbotName: C = "Synaps
 					backgroundColor: "white",
 					zIndex: 1
 				},
-				children: C
+				children: w
 			}),
-			A && /* @__PURE__ */ _(o, {
+			k && /* @__PURE__ */ v(o, {
 				initAccessLevel: V,
 				onChange: (e) => {
 					H(e), z({
@@ -82,14 +82,14 @@ function x({ initialMessage: x, agentRegistrationId: S, chatbotName: C = "Synaps
 					});
 				}
 			}),
-			!F && /* @__PURE__ */ _(n, { numRows: 10 }),
-			F && /* @__PURE__ */ _(d, {
+			!F && /* @__PURE__ */ v(n, { numRows: 10 }),
+			F && /* @__PURE__ */ v(d, {
 				sx: {
 					flexGrow: 1,
 					overflowY: "auto",
 					mb: 2
 				},
-				children: /* @__PURE__ */ v(p, {
+				children: /* @__PURE__ */ y(m, {
 					sx: {
 						flex: 1,
 						overflowY: "auto",
@@ -97,10 +97,10 @@ function x({ initialMessage: x, agentRegistrationId: S, chatbotName: C = "Synaps
 						display: "flex",
 						flexDirection: "column"
 					},
-					children: [G.map((e) => /* @__PURE__ */ _(ee, {
+					children: [G.map((e) => /* @__PURE__ */ v(ee, {
 						chatJobId: e,
 						onSendChat: K
-					}, e)), W && /* @__PURE__ */ _(s, {
+					}, e)), W && /* @__PURE__ */ v(s, {
 						userMessage: W,
 						chatResponseText: "",
 						chatErrorReason: "",
@@ -109,13 +109,28 @@ function x({ initialMessage: x, agentRegistrationId: S, chatbotName: C = "Synaps
 					})]
 				})
 			}),
-			/* @__PURE__ */ _(d, {
+			/* @__PURE__ */ y(d, {
 				sx: {
 					position: "sticky",
-					bottom: T,
+					bottom: re,
 					backgroundColor: "white"
 				},
-				children: /* @__PURE__ */ v(d, {
+				children: [j && j.length > 0 && G.length === 0 && !W && /* @__PURE__ */ v(h, {
+					direction: "row",
+					spacing: 1,
+					sx: {
+						pt: "8px",
+						flexWrap: "wrap",
+						gap: 1
+					},
+					children: j.map((e) => /* @__PURE__ */ v(f, {
+						label: e,
+						variant: "outlined",
+						onClick: () => J(e),
+						disabled: !F,
+						sx: { cursor: "pointer" }
+					}, e))
+				}), /* @__PURE__ */ y(d, {
 					component: "form",
 					sx: {
 						pt: "8px",
@@ -126,15 +141,15 @@ function x({ initialMessage: x, agentRegistrationId: S, chatbotName: C = "Synaps
 						borderColor: "grey.400"
 					},
 					onSubmit: Z,
-					children: [/* @__PURE__ */ _(m, {
+					children: [/* @__PURE__ */ v(g, {
 						fullWidth: !0,
 						value: q,
 						onChange: (e) => J(e.target.value),
-						onKeyDown: te,
-						placeholder: `Message ${C}`,
+						onKeyDown: ie,
+						placeholder: `Message ${w}`,
 						slotProps: { input: {
 							sx: { borderRadius: 96.6 },
-							endAdornment: /* @__PURE__ */ _(f, {
+							endAdornment: /* @__PURE__ */ v(p, {
 								disabled: Q,
 								onClick: Z,
 								sx: {
@@ -145,23 +160,23 @@ function x({ initialMessage: x, agentRegistrationId: S, chatbotName: C = "Synaps
 									borderWidth: Q ? "1px" : "2px",
 									borderColor: Q ? "gray" : $
 								},
-								children: /* @__PURE__ */ _(b, {})
+								children: /* @__PURE__ */ v(x, {})
 							})
 						} }
-					}), /* @__PURE__ */ v(h, {
+					}), /* @__PURE__ */ y(_, {
 						variant: "smallText1",
 						sx: {
 							pt: "8px",
 							textAlign: "center"
 						},
-						children: [C, " can make mistakes."]
+						children: [w, " can make mistakes."]
 					})]
-				})
+				})]
 			})
 		]
 	});
 }
 //#endregion
-export { x as SynapseChat, x as default };
+export { S as SynapseChat, S as default };
 
 //# sourceMappingURL=SynapseChat.js.map

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  IconButton,\n  List,\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}\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}: 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        <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/SynapseHomepageV2/HotdropsAndNews.css

@@ -1 +1 @@
-._container_4ch9y_1{background-color:#fff3;border-radius:9px;grid-template-columns:100%;justify-items:start;max-width:1300px;margin:auto;padding-top:0;padding-bottom:40px;display:grid}@media (width>=600px){._container_4ch9y_1{grid-template-columns:50% 50%;padding-top:80px;padding-bottom:60px}}._item_4ch9y_20{border-right:1px solid var(--synapse-gray-400);border-bottom:1px solid var(--synapse-gray-400);border-left:1px solid var(--synapse-gray-400);grid-template-columns:80% 20%;display:grid}._item_4ch9y_20:first-child{border-top:1px solid var(--synapse-gray-400)}@media (width>=600px){._item_4ch9y_20{border-top:none;border-left:none}._item_4ch9y_20:nth-child(odd){border-left:1px solid var(--synapse-gray-400)}._item_4ch9y_20:nth-child(-n+2){border-top:1px solid var(--synapse-gray-400)}}._item_4ch9y_20{background-color:#ffffffe6;width:100%;padding:15px 0;text-decoration:none}._item_4ch9y_20:hover{cursor:pointer;background-color:#e9f3fef2;text-decoration:none!important}._item_4ch9y_20 ._itemTitle_4ch9y_53{color:var(--synapse-gray-900);font-size:16px;font-weight:700}._item_4ch9y_20 ._itemMeta_4ch9y_58{color:var(--synapse-gray-700)}._itemContent_4ch9y_62{color:var(--synapse-gray-900);padding-left:15px;padding-right:10px}._itemAction_4ch9y_68{place-self:start end;padding-right:15px}._chip_4ch9y_74.MuiChip-root{border-radius:5px;height:24px}
+._container_1tem6_1{background-color:#fff3;border-radius:9px;grid-template-columns:100%;justify-items:start;max-width:1300px;margin:auto;padding-top:0;padding-bottom:40px;display:grid}@media (width>=600px){._container_1tem6_1{grid-template-columns:50% 50%;padding-top:80px;padding-bottom:60px}}._item_1tem6_20{border-right:1px solid var(--synapse-gray-400);border-bottom:1px solid var(--synapse-gray-400);border-left:1px solid var(--synapse-gray-400);grid-template-columns:80% 20%;display:grid}._item_1tem6_20:first-child{border-top:1px solid var(--synapse-gray-400)}@media (width>=600px){._item_1tem6_20{border-top:none;border-left:none}._item_1tem6_20:nth-child(odd){border-left:1px solid var(--synapse-gray-400)}._item_1tem6_20:nth-child(-n+2){border-top:1px solid var(--synapse-gray-400)}}._item_1tem6_20{background-color:#ffffffe6;width:100%;padding:15px 0;text-decoration:none}._item_1tem6_20:hover{cursor:pointer;background-color:#e9f3fef2;text-decoration:none!important}._item_1tem6_20 ._itemTitle_1tem6_53{color:var(--synapse-gray-900);font-size:16px;font-weight:700}._item_1tem6_20 ._itemMeta_1tem6_58{color:var(--synapse-gray-700)}._adkpVariant_1tem6_62 ._item_1tem6_20:hover{background:linear-gradient(91deg,#7761b7 5.34%,#9067b6 24.31%,#816dc8 91.15%)}._adkpVariant_1tem6_62 ._item_1tem6_20:hover ._itemTitle_1tem6_53,._adkpVariant_1tem6_62 ._item_1tem6_20:hover ._itemMeta_1tem6_58{color:#fff}._itemContent_1tem6_70{color:var(--synapse-gray-900);padding-left:15px;padding-right:10px}._itemAction_1tem6_76{place-self:start end;padding-right:15px}._chip_1tem6_82.MuiChip-root{border-radius:5px;height:24px}

package/dist/components/SynapseHomepageV2/HotdropsAndNews.module.js

@@ -1,11 +1,12 @@
 import './HotdropsAndNews.css';var e = {
-	container: "_container_4ch9y_1",
-	item: "_item_4ch9y_20",
-	itemTitle: "_itemTitle_4ch9y_53",
-	itemMeta: "_itemMeta_4ch9y_58",
-	itemContent: "_itemContent_4ch9y_62",
-	itemAction: "_itemAction_4ch9y_68",
-	chip: "_chip_4ch9y_74"
+	container: "_container_1tem6_1",
+	item: "_item_1tem6_20",
+	itemTitle: "_itemTitle_1tem6_53",
+	itemMeta: "_itemMeta_1tem6_58",
+	adkpVariant: "_adkpVariant_1tem6_62",
+	itemContent: "_itemContent_1tem6_70",
+	itemAction: "_itemAction_1tem6_76",
+	chip: "_chip_1tem6_82"
 };
 //#endregion
 export { e as default };