synapse-react-client 4.0.34 → 4.0.36

package/dist/components/SynapseChat/SynapseChat.js

@@ -6,20 +6,25 @@ import "../../utils/AppUtils/index.js";
 import "../../utils/index.js";
 import { SkeletonParagraph as ee } from "../Skeleton/SkeletonParagraph.js";
 import "../Skeleton/index.js";
-import { UserCard as te } from "../UserCard/UserCard.js";
-import { useCreateAgentSession as r, useUpdateAgentSession as ne } from "../../synapse-queries/chat/useChat.js";
-import { useChatState as i } from "./useChatState.js";
-import { AccessLevelMenu as a } from "./AccessLevelMenu.js";
-import { ChatInputArea as o } from "./components/ChatInputArea/ChatInputArea.js";
-import s from "./SynapseChatMessage.js";
+import { UserCard as r } from "../UserCard/UserCard.js";
+import { useCreateAgentSession as i, useUpdateAgentSession as a } from "../../synapse-queries/chat/useChat.js";
+import { useChatState as o } from "./useChatState.js";
+import { AccessLevelMenu as te } from "./AccessLevelMenu.js";
+import { ChatInputArea as ne } from "./components/ChatInputArea/ChatInputArea.js";
+import re from "./SynapseChatMessage.js";
+import { ForwardRef as s } from "../../assets/illustrations/curie_avatar_head.js";
 import { useEffect as c, useRef as l, useState as u } from "react";
-import { Alert as d, Box as f, Chip as p, List as m, Stack as h, Typography 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 { FileHandleAssociateType as b } from "@sage-bionetworks/synapse-client";
+import { Alert as d, Box as f, Chip as p, List as m, ListItem as h, Stack as g, Typography as _ } from "@mui/material";
+import { jsx as v, jsxs as y } from "react/jsx-runtime";
+import { AgentAccessLevel as b } from "@sage-bionetworks/synapse-types";
+import { FileHandleAssociateType as ie } from "@sage-bionetworks/synapse-client";
 import { SmartToyTwoTone as x } from "@mui/icons-material";
 //#region src/components/SynapseChat/SynapseChat.tsx
-var S = /* @__PURE__ */ _(f, {
+var ae = "Hi! How can I help you today?", oe = {
+	[b.PUBLICLY_ACCESSIBLE]: " and can only read public data.",
+	[b.READ_YOUR_PRIVATE_DATA]: " and can read your public and private data in Synapse on your behalf.",
+	[b.WRITE_YOUR_PRIVATE_DATA]: " and can read and write your public and private data in Synapse on your behalf."
+}, se = /* @__PURE__ */ v(f, {
 	sx: {
 		p: "3px",
 		borderRadius: "50%",
@@ -29,54 +34,73 @@ var S = /* @__PURE__ */ _(f, {
 		mt: "10px",
 		height: "31px"
 	},
-	children: /* @__PURE__ */ _(x, { sx: { color: "secondary.main" } })
+	children: /* @__PURE__ */ v(x, { sx: { color: "secondary.main" } })
+}), S = /* @__PURE__ */ v(f, {
+	sx: {
+		mt: "10px",
+		height: "30px",
+		width: "30px",
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center"
+	},
+	children: /* @__PURE__ */ v(s, {})
 });
-function C({ initialMessage: x, agentRegistrationId: C, chatbotName: w = "SynapseChat", agentAvatar: T = S, hideTitle: E = !1, textboxPositionOffset: D = "0px", sessionContext: O, externalSession: k, setExternalSession: A, externalChatState: j, showAccessLevelMenu: M = !0, onChatResponse: N, suggestedPrompts: P, allowAttachments: F = !1 }) {
-	let { accessToken: I } = t(), { userId: L } = n(), R = /* @__PURE__ */ _(te, {
+function C({ initialMessage: s, agentRegistrationId: x, chatbotName: C = "SynapseChat", variant: w = "default", agentAvatar: T, hideTitle: E = !1, textboxPositionOffset: D = "0px", sessionContext: O, externalSession: k, setExternalSession: A, externalChatState: j, showAccessLevelMenu: M = !0, onChatResponse: N, suggestedPrompts: P, allowAttachments: F = !1 }) {
+	let { accessToken: I } = t(), { userId: L } = n(), R = C + " can make mistakes", z = T ?? (w === "curie" ? S : se), B = /* @__PURE__ */ v(r, {
 		ownerId: L,
 		size: "AVATAR",
 		avatarSize: "MEDIUM"
-	}), [z, re] = u(), B = k ?? z, V = A ?? re, { mutate: H, error: U } = r({ onSuccess: (e) => V(e) }), { mutate: W } = ne({
-		onSuccess: (e) => V(e),
+	}), [V, ce] = u(), H = k ?? V, U = A ?? ce, { mutate: W, error: G } = i({ onSuccess: (e) => U(e) }), { mutate: le } = a({
+		onSuccess: (e) => U(e),
 		onError: (t) => e(`Unable to update the agent session: ${t.message}`, "danger")
-	}), [G, K] = u(O ? y.WRITE_YOUR_PRIVATE_DATA : y.PUBLICLY_ACCESSIBLE), q = i(B, N), { interactions: J, isAwaitingResponse: Y, sendChat: X } = j ?? q, Z = l(void 0);
-	Z.current === void 0 && (Z.current = new Set(J.map((e) => e.id)));
-	let ie = Z.current, [ae, Q] = u(""), [$, oe] = u(!1), [se, ce] = u([]);
-	return c(() => {
-		H && !B && H({
-			agentAccessLevel: G,
-			agentRegistrationId: C,
+	}), [K, ue] = u(O ? b.WRITE_YOUR_PRIVATE_DATA : b.PUBLICLY_ACCESSIBLE), de = o(H, N), { interactions: q, isAwaitingResponse: J, sendChat: Y } = j ?? de, X = w === "curie" && q.length === 0, fe = R + (w === "curie" ? oe[K] : ""), Z = l(void 0);
+	Z.current === void 0 && (Z.current = new Set(q.map((e) => e.id)));
+	let pe = Z.current, [me, Q] = u(""), [$, he] = u(!1), [ge, _e] = u([]);
+	c(() => {
+		W && !H && W({
+			agentAccessLevel: K,
+			agentRegistrationId: x,
 			sessionContext: O
 		});
 	}, [
+		W,
 		H,
-		B,
 		I,
 		O,
-		G,
-		C
+		K,
+		x
 	]), c(() => {
-		B && x && !$ && (X(x), oe(!0));
+		H && s && !$ && (Y(s), he(!0));
 	}, [
-		B,
-		x,
+		H,
+		s,
 		$,
-		X
-	]), U ? /* @__PURE__ */ _(d, {
+		Y
+	]);
+	let ve = (e, t) => {
+		Y(e, t.length ? t.map((e) => ({
+			fileHandleId: e.fileHandleId,
+			associateObjectId: e.fileHandleId,
+			associateObjectType: ie.FileEntity
+		})) : void 0), Q(""), _e(t);
+	};
+	return G ? /* @__PURE__ */ v(d, {
 		severity: "error",
 		sx: { my: 2 },
-		children: U.reason
-	}) : /* @__PURE__ */ v(f, {
+		children: G.reason
+	}) : /* @__PURE__ */ y(f, {
 		sx: {
 			display: "flex",
 			flexDirection: "column",
-			justifyContent: "space-between",
+			justifyContent: w === "curie" ? "flex-start" : "space-between",
+			gap: w === "curie" ? "20px" : "0",
 			maxWidth: "1100px",
 			mx: "auto",
 			height: "100%"
 		},
 		children: [
-			!E && /* @__PURE__ */ _(g, {
+			!E && /* @__PURE__ */ v(_, {
 				variant: "headline1",
 				sx: {
 					p: "20px",
@@ -87,55 +111,81 @@ function C({ initialMessage: x, agentRegistrationId: C, chatbotName: w = "Synaps
 					backgroundColor: "white",
 					zIndex: 1
 				},
-				children: w
+				children: C
 			}),
-			M && /* @__PURE__ */ _(a, {
-				initAccessLevel: G,
+			M && w !== "curie" && /* @__PURE__ */ v(te, {
+				initAccessLevel: K,
 				onChange: (e) => {
-					K(e), W({
+					ue(e), le({
 						agentAccessLevel: e,
-						sessionId: B.sessionId
+						sessionId: H.sessionId
 					});
 				}
 			}),
-			!B && /* @__PURE__ */ _(ee, { numRows: 10 }),
-			B && /* @__PURE__ */ _(f, {
+			!H && /* @__PURE__ */ v(ee, { numRows: 10 }),
+			H && /* @__PURE__ */ v(f, {
 				sx: {
 					flexGrow: 1,
 					overflowY: "auto",
-					mb: 2
+					mb: w === "curie" ? 0 : 2
 				},
-				children: /* @__PURE__ */ _(m, {
+				children: /* @__PURE__ */ y(m, {
 					sx: {
 						flex: 1,
 						overflowY: "auto",
 						pt: "20px",
+						...w === "curie" && {
+							pt: 0,
+							pb: 0,
+							gap: "20px"
+						},
 						display: "flex",
-						flexDirection: "column"
+						flexDirection: "column",
+						...X && {
+							minHeight: "100%",
+							justifyContent: "flex-end"
+						}
 					},
-					children: J.map((e, t) => {
-						let n = t === J.length - 1;
-						return /* @__PURE__ */ _(s, {
-							agentAvatar: T,
-							userAvatar: R,
+					children: [X && /* @__PURE__ */ y(h, {
+						sx: {
+							display: "grid",
+							gridTemplateColumns: "50px auto",
+							columnGap: "16px",
+							justifyItems: "start",
+							alignItems: "start",
+							p: 0
+						},
+						children: [z, /* @__PURE__ */ v(_, {
+							sx: {
+								justifySelf: "start",
+								mt: "14px"
+							},
+							children: ae
+						})]
+					}), q.map((e, t) => {
+						let n = t === q.length - 1;
+						return /* @__PURE__ */ v(re, {
+							agentAvatar: z,
+							userAvatar: B,
 							userMessage: e.userMessage,
 							chatJobId: e.jobId,
-							onSendChat: X,
+							showLoadingIcon: w !== "curie",
+							onSendChat: Y,
 							scrollIntoView: n,
-							animateEntry: !ie.has(e.id),
-							isAwaitingResponse: Y,
-							pendingAttachments: n ? se : void 0
+							animateEntry: !pe.has(e.id),
+							isAwaitingResponse: J,
+							pendingAttachments: n ? ge : void 0
 						}, e.id);
-					})
+					})]
 				})
 			}),
-			/* @__PURE__ */ v(f, {
+			/* @__PURE__ */ y(f, {
 				sx: {
 					position: "sticky",
-					bottom: D,
+					bottom: w === "curie" ? "0px" : D,
 					backgroundColor: "white"
 				},
-				children: [P && P.length > 0 && J.length === 0 && /* @__PURE__ */ _(h, {
+				children: [P && P.length > 0 && q.length === 0 && /* @__PURE__ */ v(g, {
 					direction: "row",
 					spacing: 1,
 					sx: {
@@ -143,38 +193,32 @@ function C({ initialMessage: x, agentRegistrationId: C, chatbotName: w = "Synaps
 						flexWrap: "wrap",
 						gap: 1
 					},
-					children: P.map((e) => /* @__PURE__ */ _(p, {
+					children: P.map((e) => /* @__PURE__ */ v(p, {
 						label: e,
 						variant: "outlined",
 						onClick: () => Q(e),
-						disabled: !B,
+						disabled: !H,
 						sx: { cursor: "pointer" }
 					}, e))
-				}), /* @__PURE__ */ _(f, {
+				}), /* @__PURE__ */ v(f, {
 					sx: { mt: "5px" },
-					children: /* @__PURE__ */ _(o, {
-						value: ae,
+					children: /* @__PURE__ */ v(ne, {
+						value: me,
 						onValueChange: Q,
-						onSend: (e, t) => {
-							X(e, t.length ? t.map((e) => ({
-								fileHandleId: e.fileHandleId,
-								associateObjectId: e.fileHandleId,
-								associateObjectType: b.FileEntity
-							})) : void 0), Q(""), ce(t);
-						},
-						placeholder: `Message ${w}`,
-						disabled: !B || Y,
+						onSend: ve,
+						placeholder: w === "curie" ? "Ask anything" : `Message ${C}`,
+						disabled: !H || J,
 						allowAttachments: F
 					})
 				})]
 			}),
-			/* @__PURE__ */ v(g, {
+			/* @__PURE__ */ v(_, {
 				variant: "smallText1",
 				sx: {
 					pt: "8px",
 					textAlign: "center"
 				},
-				children: [w, " can make mistakes."]
+				children: fe
 			})
 		]
 	});

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 { Alert, Box, Chip, List, Stack, Typography } from '@mui/material'\nimport {\n  AgentSession,\n  FileHandleAssociateType,\n  GridAgentSessionContext,\n} from '@sage-bionetworks/synapse-client'\nimport { AgentAccessLevel } from '@sage-bionetworks/synapse-types'\nimport { useEffect, useRef, useState } from 'react'\nimport { SkeletonParagraph } from '../Skeleton'\nimport { displayToast } from '../ToastMessage'\nimport AccessLevelMenu from './AccessLevelMenu'\nimport { ChatAttachment } from './utils/types'\nimport { ChatInputArea } from './components/ChatInputArea/ChatInputArea'\nimport SynapseChatMessage from './SynapseChatMessage'\nimport { SmartToyTwoTone } from '@mui/icons-material'\nimport { UserCard } from '../UserCard/UserCard'\nimport { useApplicationSessionContext } from '@/utils/AppUtils'\n\nconst DEFAULT_AVATAR = (\n  <Box\n    sx={{\n      p: '3px',\n      borderRadius: '50%',\n      borderStyle: 'solid',\n      borderWidth: '1px',\n      borderColor: 'grey.300',\n      mt: '10px',\n      height: '31px',\n    }}\n  >\n    <SmartToyTwoTone sx={{ color: 'secondary.main' }} />\n  </Box>\n)\n\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  /** Optional custom avatar for the chatbot agent */\n  agentAvatar?: React.ReactNode\n  /**\n   * Whether to allow the user to attach local files to their chat message.\n   * @default false\n   */\n  allowAttachments?: boolean\n}\n\nexport function SynapseChat({\n  initialMessage,\n  agentRegistrationId,\n  chatbotName = 'SynapseChat',\n  agentAvatar = DEFAULT_AVATAR,\n  hideTitle = false,\n  textboxPositionOffset = '0px',\n  sessionContext,\n  externalSession,\n  setExternalSession,\n  externalChatState,\n  showAccessLevelMenu = true,\n  onChatResponse,\n  suggestedPrompts,\n  allowAttachments = false,\n}: SynapseChatProps) {\n  const { accessToken } = useSynapseContext()\n  const { userId } = useApplicationSessionContext()\n\n  const userAvatar = (\n    <UserCard ownerId={userId} size=\"AVATAR\" avatarSize=\"MEDIUM\" />\n  )\n  const [localAgentSession, setLocalAgentSession] = useState<AgentSession>()\n  const agentSession = externalSession ?? localAgentSession\n  const setAgentSession = setExternalSession ?? setLocalAgentSession\n\n  const { mutate: createAgentSession, error: createAgentSessionError } =\n    useCreateAgentSession({\n      onSuccess: newAgentSession => setAgentSession(newAgentSession),\n    })\n\n  const { mutate: updateAgentSession } = useUpdateAgentSession({\n    onSuccess: updatedAgentSession => setAgentSession(updatedAgentSession),\n    onError: err =>\n      displayToast(\n        `Unable to update the agent session: ${err.message}`,\n        'danger',\n      ),\n  })\n  const [agentAccessLevel, setAgentAccessLevel] = useState<AgentAccessLevel>(\n    sessionContext\n      ? AgentAccessLevel.WRITE_YOUR_PRIVATE_DATA\n      : AgentAccessLevel.PUBLICLY_ACCESSIBLE,\n  )\n\n  const internalChatState = useChatState(agentSession, onChatResponse)\n  const chatState = externalChatState ?? internalChatState\n  const { interactions, isAwaitingResponse, sendChat } = chatState\n\n  // Only interactions added after this component instance mounted should play the entry\n  // animation. Callers may lift state so history survives a `Dialog` closing, but the\n  // `Dialog` unmounts its children, so every reopen would otherwise re-animate the whole\n  // conversation.\n  const presentAtMountRef = useRef<Set<string> | undefined>(undefined)\n  if (presentAtMountRef.current === undefined) {\n    presentAtMountRef.current = new Set(interactions.map(i => i.id))\n  }\n  const presentAtMount = presentAtMountRef.current\n\n  // Keep track of the text that the user is currently typing into the textfield\n  const [userChatTextfieldValue, setUserChatTextfieldValue] = useState('')\n  const [initialMessageProcessed, setInitialMessageProcessed] = useState(false)\n\n  // A copy of the attachments sent with the last interaction, so it can still show rich\n  // (name/type) chips after ChatInputArea has cleared its own attachment state. This is passed to\n  // the last interaction for its entire lifetime -- sent, then processing, then completed -- as a\n  // fallback filename source, since the request body (FileHandleAssociation) never carries a\n  // filename and the server-resolved filename (attachmentStatuses) only arrives once the job\n  // completes. It's simply overwritten on the next send.\n  const [lastSentAttachments, setLastSentAttachments] = useState<\n    ChatAttachment[]\n  >([])\n\n  // Restore chat session history, if exists.\n  // TODO: currently only a single page is restored.  Add support for multiple pages (and detect the user scrolling up to restore the next page of results older)\n  // const {\n  //   data: sessionHistoryInfiniteData,\n  // } = //, hasNextPage: hasMoreSessionHistory, fetchNextPage: fetchNextSessionHistoryPage, isLoading: isSessionHistoryLoading } =\n  //   useGetAgentChatSessionHistoryInfinite(\n  //     {\n  //       sessionId: agentSession?.sessionId,\n  //     },\n  //     {\n  //       enabled: !!agentSession,\n  //     },\n  //   )\n\n  // const sessionHistory = useMemo(\n  //   () =>\n  //     sessionHistoryInfiniteData?.pages\n  //       .flatMap(page => page.page)\n  //       /* Note: session history is ordered from most recent to least recent in each page, so reverse the order when restoring the chat interface */\n  //       .reverse() ?? [],\n  //   [sessionHistoryInfiniteData],\n  // )\n\n  useEffect(() => {\n    // on mount, create a new agent session!\n    if (createAgentSession && !agentSession) {\n      createAgentSession({\n        agentAccessLevel,\n        agentRegistrationId,\n        sessionContext,\n      })\n    }\n  }, [\n    createAgentSession,\n    agentSession,\n    accessToken,\n    sessionContext,\n    agentAccessLevel,\n    agentRegistrationId,\n  ])\n\n  useEffect(() => {\n    // on mount, resolve the initial message chat interaction (if set)\n    if (agentSession && initialMessage && !initialMessageProcessed) {\n      sendChat(initialMessage)\n      setInitialMessageProcessed(true)\n    }\n  }, [agentSession, initialMessage, initialMessageProcessed, sendChat])\n\n  const handleSend = (message: string, attachments: ChatAttachment[]) => {\n    sendChat(\n      message,\n      attachments.length\n        ? attachments.map(attachment => ({\n            fileHandleId: attachment.fileHandleId,\n            // The backend short-circuits the FileHandleAssociation auth check for a user's own\n            // uploaded file handle, so associateObjectId/associateObjectType are not totally\n            // accurate here. FileHandleAssociateType has no dedicated value for \"the uploader's\n            // own bare file handle\", so this stubs associateObjectId to the fileHandleId itself\n            // and the FileEntity associate type, which supports the short-circuit path.\n            associateObjectId: attachment.fileHandleId,\n            associateObjectType: FileHandleAssociateType.FileEntity,\n          }))\n        : undefined,\n    )\n    setUserChatTextfieldValue('')\n    setLastSentAttachments(attachments)\n  }\n\n  if (createAgentSessionError) {\n    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            {interactions.map((interaction, index) => {\n              const isLast = index === interactions.length - 1\n              return (\n                <SynapseChatMessage\n                  agentAvatar={agentAvatar}\n                  userAvatar={userAvatar}\n                  key={interaction.id}\n                  userMessage={interaction.userMessage}\n                  chatJobId={interaction.jobId}\n                  onSendChat={sendChat}\n                  scrollIntoView={isLast}\n                  animateEntry={!presentAtMount.has(interaction.id)}\n                  isAwaitingResponse={isAwaitingResponse}\n                  pendingAttachments={\n                    // Only one interaction can be in flight at a time (the composer is disabled\n                    // while isAwaitingResponse), so lastSentAttachments always corresponds to\n                    // whichever interaction is last.\n                    isLast ? lastSentAttachments : undefined\n                  }\n                />\n              )\n            })}\n          </List>\n        </Box>\n      )}\n      <Box\n        sx={{\n          position: 'sticky',\n          bottom: textboxPositionOffset,\n          backgroundColor: 'white',\n        }}\n      >\n        {suggestedPrompts &&\n          suggestedPrompts.length > 0 &&\n          interactions.length === 0 && (\n            <Stack\n              direction=\"row\"\n              spacing={1}\n              sx={{ pt: '8px', flexWrap: 'wrap', gap: 1 }}\n            >\n              {suggestedPrompts.map(prompt => (\n                <Chip\n                  key={prompt}\n                  label={prompt}\n                  variant=\"outlined\"\n                  onClick={() => setUserChatTextfieldValue(prompt)}\n                  disabled={!agentSession}\n                  sx={{ cursor: 'pointer' }}\n                />\n              ))}\n            </Stack>\n          )}\n        <Box sx={{ mt: '5px' }}>\n          <ChatInputArea\n            value={userChatTextfieldValue}\n            onValueChange={setUserChatTextfieldValue}\n            onSend={handleSend}\n            placeholder={`Message ${chatbotName}`}\n            disabled={!agentSession || isAwaitingResponse}\n            allowAttachments={allowAttachments}\n          />\n        </Box>\n      </Box>\n      <Typography variant=\"smallText1\" sx={{ pt: '8px', textAlign: 'center' }}>\n        {chatbotName} can make mistakes.\n      </Typography>\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 {\n  Alert,\n  Box,\n  Chip,\n  List,\n  ListItem,\n  Stack,\n  Typography,\n} from '@mui/material'\nimport {\n  AgentSession,\n  FileHandleAssociateType,\n  GridAgentSessionContext,\n} from '@sage-bionetworks/synapse-client'\nimport { AgentAccessLevel } from '@sage-bionetworks/synapse-types'\nimport { useEffect, useRef, useState } from 'react'\nimport { SkeletonParagraph } from '../Skeleton'\nimport { displayToast } from '../ToastMessage'\nimport AccessLevelMenu from './AccessLevelMenu'\nimport { ChatAttachment } from './utils/types'\nimport { ChatInputArea } from './components/ChatInputArea/ChatInputArea'\nimport SynapseChatMessage from './SynapseChatMessage'\nimport { SmartToyTwoTone } from '@mui/icons-material'\nimport { UserCard } from '../UserCard/UserCard'\nimport { useApplicationSessionContext } from '@/utils/AppUtils'\nimport { ReactComponent as CurieAvatarHead } from '@/assets/illustrations/curie_avatar_head.svg'\n\nconst CURIE_GREETING = 'Hi! How can I help you today?'\n\nconst CURIE_ACCESS_LEVEL_SUFFIX: Record<AgentAccessLevel, string> = {\n  [AgentAccessLevel.PUBLICLY_ACCESSIBLE]: ' and can only read public data.',\n  [AgentAccessLevel.READ_YOUR_PRIVATE_DATA]:\n    ' and can read your public and private data in Synapse on your behalf.',\n  [AgentAccessLevel.WRITE_YOUR_PRIVATE_DATA]:\n    ' and can read and write your public and private data in Synapse on your behalf.',\n}\n\nconst DEFAULT_AVATAR = (\n  <Box\n    sx={{\n      p: '3px',\n      borderRadius: '50%',\n      borderStyle: 'solid',\n      borderWidth: '1px',\n      borderColor: 'grey.300',\n      mt: '10px',\n      height: '31px',\n    }}\n  >\n    <SmartToyTwoTone sx={{ color: 'secondary.main' }} />\n  </Box>\n)\n\nconst CURIE_AVATAR = (\n  <Box\n    sx={{\n      mt: '10px',\n      height: '30px',\n      width: '30px',\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n    }}\n  >\n    <CurieAvatarHead />\n  </Box>\n)\n\nexport type SynapseChatProps = {\n  initialMessage?: string //optional initial message\n  agentRegistrationId?: string // if provided, use this agent\n  chatbotName?: string // optional name of this chatbot agent\n  variant?: 'default' | 'curie'\n  hideTitle?: boolean\n  textboxPositionOffset?: string // when embedded in a form, the textbox (form) stuck to the bottom may need to be offset due to container padding (dialog content for example!)\n  /* optional session context for the agent session */\n  sessionContext?: GridAgentSessionContext\n  /* The current session, if state is lifted out of this component */\n  externalSession?: AgentSession\n  /* A callback invoked to bootstrap the current session, if state is to be lifted out of this component */\n  setExternalSession?: (s: AgentSession | undefined) => void\n  /* The current chat history, if state is lifted out of this component */\n  externalChatState?: ChatState\n  // default access level for the agent session.\n  defaultAgentAccessLevel?: AgentAccessLevel\n  // Whether to show the access level menu for the agent session.\n  showAccessLevelMenu?: boolean\n  /**\n   * Optional callback invoked once when a chat response is received from the server.\n   * Use this for side effects such as navigation based on the response content.\n   * Called in the mutation onSuccess handler so it runs exactly once per response.\n   */\n  onChatResponse?: (responseText: string) => void\n  /** Optional list of prompt suggestions shown as clickable pills above the text input */\n  suggestedPrompts?: string[]\n  /** Optional custom avatar for the chatbot agent */\n  agentAvatar?: React.ReactNode\n  /**\n   * Whether to allow the user to attach local files to their chat message.\n   * @default false\n   */\n  allowAttachments?: boolean\n}\n\nexport function SynapseChat({\n  initialMessage,\n  agentRegistrationId,\n  chatbotName = 'SynapseChat',\n  variant = 'default',\n  agentAvatar,\n  hideTitle = false,\n  textboxPositionOffset = '0px',\n  sessionContext,\n  externalSession,\n  setExternalSession,\n  externalChatState,\n  showAccessLevelMenu = true,\n  onChatResponse,\n  suggestedPrompts,\n  allowAttachments = false,\n}: SynapseChatProps) {\n  const { accessToken } = useSynapseContext()\n  const { userId } = useApplicationSessionContext()\n\n  const baseDisclaimerText = chatbotName + ' can make mistakes'\n\n  const resolvedAgentAvatar =\n    agentAvatar ?? (variant === 'curie' ? CURIE_AVATAR : DEFAULT_AVATAR)\n\n  const userAvatar = (\n    <UserCard ownerId={userId} size=\"AVATAR\" avatarSize=\"MEDIUM\" />\n  )\n  const [localAgentSession, setLocalAgentSession] = useState<AgentSession>()\n  const agentSession = externalSession ?? localAgentSession\n  const setAgentSession = setExternalSession ?? setLocalAgentSession\n\n  const { mutate: createAgentSession, error: createAgentSessionError } =\n    useCreateAgentSession({\n      onSuccess: newAgentSession => setAgentSession(newAgentSession),\n    })\n\n  const { mutate: updateAgentSession } = useUpdateAgentSession({\n    onSuccess: updatedAgentSession => setAgentSession(updatedAgentSession),\n    onError: err =>\n      displayToast(\n        `Unable to update the agent session: ${err.message}`,\n        'danger',\n      ),\n  })\n  const [agentAccessLevel, setAgentAccessLevel] = useState<AgentAccessLevel>(\n    sessionContext\n      ? AgentAccessLevel.WRITE_YOUR_PRIVATE_DATA\n      : AgentAccessLevel.PUBLICLY_ACCESSIBLE,\n  )\n\n  const internalChatState = useChatState(agentSession, onChatResponse)\n  const chatState = externalChatState ?? internalChatState\n  const { interactions, isAwaitingResponse, sendChat } = chatState\n\n  const showGreeting = variant === 'curie' && interactions.length === 0\n\n  const curieAccessLevelSuffix =\n    variant === 'curie' ? CURIE_ACCESS_LEVEL_SUFFIX[agentAccessLevel] : ''\n  const disclaimerText = baseDisclaimerText + curieAccessLevelSuffix\n\n  // Only interactions added after this component instance mounted should play the entry\n  // animation. Callers may lift state so history survives a `Dialog` closing, but the\n  // `Dialog` unmounts its children, so every reopen would otherwise re-animate the whole\n  // conversation.\n  const presentAtMountRef = useRef<Set<string> | undefined>(undefined)\n  if (presentAtMountRef.current === undefined) {\n    presentAtMountRef.current = new Set(interactions.map(i => i.id))\n  }\n  const presentAtMount = presentAtMountRef.current\n\n  // Keep track of the text that the user is currently typing into the textfield\n  const [userChatTextfieldValue, setUserChatTextfieldValue] = useState('')\n  const [initialMessageProcessed, setInitialMessageProcessed] = useState(false)\n\n  // A copy of the attachments sent with the last interaction, so it can still show rich\n  // (name/type) chips after ChatInputArea has cleared its own attachment state. This is passed to\n  // the last interaction for its entire lifetime -- sent, then processing, then completed -- as a\n  // fallback filename source, since the request body (FileHandleAssociation) never carries a\n  // filename and the server-resolved filename (attachmentStatuses) only arrives once the job\n  // completes. It's simply overwritten on the next send.\n  const [lastSentAttachments, setLastSentAttachments] = useState<\n    ChatAttachment[]\n  >([])\n\n  // Restore chat session history, if exists.\n  // TODO: currently only a single page is restored.  Add support for multiple pages (and detect the user scrolling up to restore the next page of results older)\n  // const {\n  //   data: sessionHistoryInfiniteData,\n  // } = //, hasNextPage: hasMoreSessionHistory, fetchNextPage: fetchNextSessionHistoryPage, isLoading: isSessionHistoryLoading } =\n  //   useGetAgentChatSessionHistoryInfinite(\n  //     {\n  //       sessionId: agentSession?.sessionId,\n  //     },\n  //     {\n  //       enabled: !!agentSession,\n  //     },\n  //   )\n\n  // const sessionHistory = useMemo(\n  //   () =>\n  //     sessionHistoryInfiniteData?.pages\n  //       .flatMap(page => page.page)\n  //       /* Note: session history is ordered from most recent to least recent in each page, so reverse the order when restoring the chat interface */\n  //       .reverse() ?? [],\n  //   [sessionHistoryInfiniteData],\n  // )\n\n  useEffect(() => {\n    // on mount, create a new agent session!\n    if (createAgentSession && !agentSession) {\n      createAgentSession({\n        agentAccessLevel,\n        agentRegistrationId,\n        sessionContext,\n      })\n    }\n  }, [\n    createAgentSession,\n    agentSession,\n    accessToken,\n    sessionContext,\n    agentAccessLevel,\n    agentRegistrationId,\n  ])\n\n  useEffect(() => {\n    // on mount, resolve the initial message chat interaction (if set)\n    if (agentSession && initialMessage && !initialMessageProcessed) {\n      sendChat(initialMessage)\n      setInitialMessageProcessed(true)\n    }\n  }, [agentSession, initialMessage, initialMessageProcessed, sendChat])\n\n  const handleSend = (message: string, attachments: ChatAttachment[]) => {\n    sendChat(\n      message,\n      attachments.length\n        ? attachments.map(attachment => ({\n            fileHandleId: attachment.fileHandleId,\n            // The backend short-circuits the FileHandleAssociation auth check for a user's own\n            // uploaded file handle, so associateObjectId/associateObjectType are not totally\n            // accurate here. FileHandleAssociateType has no dedicated value for \"the uploader's\n            // own bare file handle\", so this stubs associateObjectId to the fileHandleId itself\n            // and the FileEntity associate type, which supports the short-circuit path.\n            associateObjectId: attachment.fileHandleId,\n            associateObjectType: FileHandleAssociateType.FileEntity,\n          }))\n        : undefined,\n    )\n    setUserChatTextfieldValue('')\n    setLastSentAttachments(attachments)\n  }\n\n  if (createAgentSessionError) {\n    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: variant === 'curie' ? 'flex-start' : 'space-between',\n        gap: variant === 'curie' ? '20px' : '0',\n        maxWidth: '1100px',\n        mx: 'auto',\n        height: '100%',\n      }}\n    >\n      {!hideTitle && (\n        <Typography\n          variant=\"headline1\"\n          sx={{\n            p: '20px',\n            borderBottom: '1px solid',\n            borderColor: 'grey.300',\n            position: 'sticky',\n            top: '0px',\n            backgroundColor: 'white',\n            zIndex: 1,\n          }}\n        >\n          {chatbotName}\n        </Typography>\n      )}\n      {showAccessLevelMenu && variant !== 'curie' && (\n        <AccessLevelMenu\n          initAccessLevel={agentAccessLevel}\n          onChange={newAccessLevel => {\n            setAgentAccessLevel(newAccessLevel)\n            updateAgentSession({\n              agentAccessLevel: newAccessLevel,\n              sessionId: agentSession!.sessionId!,\n            })\n          }}\n        />\n      )}\n      {!agentSession && <SkeletonParagraph numRows={10} />}\n      {agentSession && (\n        <Box\n          sx={{\n            flexGrow: 1,\n            overflowY: 'auto',\n            mb: variant === 'curie' ? 0 : 2,\n          }}\n        >\n          <List\n            sx={{\n              flex: 1,\n              overflowY: 'auto',\n              pt: '20px',\n              ...(variant === 'curie' && { pt: 0, pb: 0, gap: '20px' }),\n              display: 'flex',\n              flexDirection: 'column',\n              ...(showGreeting && {\n                minHeight: '100%',\n                justifyContent: 'flex-end',\n              }),\n            }}\n          >\n            {/* {sessionHistory &&\n            sessionHistory.map((interaction, index) => {\n              return (\n                <SynapseChatInteraction\n                  key={index}\n                  userMessage={interaction.usersRequestText}\n                  chatResponseText={interaction.agentResponseText}\n                />\n              )\n            })} */}\n            {showGreeting && (\n              <ListItem\n                sx={{\n                  display: 'grid',\n                  gridTemplateColumns: '50px auto',\n                  columnGap: '16px',\n                  justifyItems: 'start',\n                  alignItems: 'start',\n                  p: 0,\n                }}\n              >\n                {resolvedAgentAvatar}\n                <Typography sx={{ justifySelf: 'start', mt: '14px' }}>\n                  {CURIE_GREETING}\n                </Typography>\n              </ListItem>\n            )}\n            {interactions.map((interaction, index) => {\n              const isLast = index === interactions.length - 1\n              return (\n                <SynapseChatMessage\n                  agentAvatar={resolvedAgentAvatar}\n                  userAvatar={userAvatar}\n                  key={interaction.id}\n                  userMessage={interaction.userMessage}\n                  chatJobId={interaction.jobId}\n                  showLoadingIcon={variant !== 'curie'}\n                  onSendChat={sendChat}\n                  scrollIntoView={isLast}\n                  animateEntry={!presentAtMount.has(interaction.id)}\n                  isAwaitingResponse={isAwaitingResponse}\n                  pendingAttachments={\n                    // Only one interaction can be in flight at a time (the composer is disabled\n                    // while isAwaitingResponse), so lastSentAttachments always corresponds to\n                    // whichever interaction is last.\n                    isLast ? lastSentAttachments : undefined\n                  }\n                />\n              )\n            })}\n          </List>\n        </Box>\n      )}\n      <Box\n        sx={{\n          position: 'sticky',\n          bottom: variant === 'curie' ? '0px' : textboxPositionOffset,\n          backgroundColor: 'white',\n        }}\n      >\n        {suggestedPrompts &&\n          suggestedPrompts.length > 0 &&\n          interactions.length === 0 && (\n            <Stack\n              direction=\"row\"\n              spacing={1}\n              sx={{ pt: '8px', flexWrap: 'wrap', gap: 1 }}\n            >\n              {suggestedPrompts.map(prompt => (\n                <Chip\n                  key={prompt}\n                  label={prompt}\n                  variant=\"outlined\"\n                  onClick={() => setUserChatTextfieldValue(prompt)}\n                  disabled={!agentSession}\n                  sx={{ cursor: 'pointer' }}\n                />\n              ))}\n            </Stack>\n          )}\n        <Box sx={{ mt: '5px' }}>\n          <ChatInputArea\n            value={userChatTextfieldValue}\n            onValueChange={setUserChatTextfieldValue}\n            onSend={handleSend}\n            placeholder={\n              variant === 'curie' ? 'Ask anything' : `Message ${chatbotName}`\n            }\n            disabled={!agentSession || isAwaitingResponse}\n            allowAttachments={allowAttachments}\n          />\n        </Box>\n      </Box>\n      <Typography variant=\"smallText1\" sx={{ pt: '8px', textAlign: 'center' }}>\n        {disclaimerText}\n      </Typography>\n    </Box>\n  )\n}\n\nexport default SynapseChat\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAiCA,IAAM,KAAiB,iCAEjB,KAA8D;EACjE,EAAiB,sBAAsB;EACvC,EAAiB,yBAChB;EACD,EAAiB,0BAChB;AACJ,GAEM,KACJ,kBAAC,GAAD;CACE,IAAI;EACF,GAAG;EACH,cAAc;EACd,aAAa;EACb,aAAa;EACb,aAAa;EACb,IAAI;EACJ,QAAQ;CACV;WAEA,kBAAC,GAAD,EAAiB,IAAI,EAAE,OAAO,iBAAiB,EAAI,CAAA;AAChD,CAAA,GAGD,IACJ,kBAAC,GAAD;CACE,IAAI;EACF,IAAI;EACJ,QAAQ;EACR,OAAO;EACP,SAAS;EACT,YAAY;EACZ,gBAAgB;CAClB;WAEA,kBAAC,GAAD,CAAkB,CAAA;AACf,CAAA;AAuCP,SAAgB,EAAY,EAC1B,mBACA,wBACA,iBAAc,eACd,aAAU,WACV,gBACA,eAAY,IACZ,2BAAwB,OACxB,mBACA,oBACA,uBACA,sBACA,yBAAsB,IACtB,mBACA,qBACA,sBAAmB,MACA;CACnB,IAAM,EAAE,mBAAgB,EAAkB,GACpC,EAAE,cAAW,EAA6B,GAE1C,IAAqB,IAAc,sBAEnC,IACJ,MAAgB,MAAY,UAAU,IAAe,KAEjD,IACJ,kBAAC,GAAD;EAAU,SAAS;EAAQ,MAAK;EAAS,YAAW;CAAU,CAAA,GAE1D,CAAC,GAAmB,MAAwB,EAAuB,GACnE,IAAe,KAAmB,GAClC,IAAkB,KAAsB,IAExC,EAAE,QAAQ,GAAoB,OAAO,MACzC,EAAsB,EACpB,YAAW,MAAmB,EAAgB,CAAe,EAC/D,CAAC,GAEG,EAAE,QAAQ,OAAuB,EAAsB;EAC3D,YAAW,MAAuB,EAAgB,CAAmB;EACrE,UAAS,MACP,EACE,uCAAuC,EAAI,WAC3C,QACF;CACJ,CAAC,GACK,CAAC,GAAkB,MAAuB,EAC9C,IACI,EAAiB,0BACjB,EAAiB,mBACvB,GAEM,KAAoB,EAAa,GAAc,CAAc,GAE7D,EAAE,iBAAc,uBAAoB,gBADxB,KAAqB,IAGjC,IAAe,MAAY,WAAW,EAAa,WAAW,GAI9D,KAAiB,KADrB,MAAY,UAAU,GAA0B,KAAoB,KAOhE,IAAoB,EAAgC,KAAA,CAAS;CACnE,AAAI,EAAkB,YAAY,KAAA,MAChC,EAAkB,UAAU,IAAI,IAAI,EAAa,KAAI,MAAK,EAAE,EAAE,CAAC;CAEjE,IAAM,KAAiB,EAAkB,SAGnC,CAAC,IAAwB,KAA6B,EAAS,EAAE,GACjE,CAAC,GAAyB,MAA8B,EAAS,EAAK,GAQtE,CAAC,IAAqB,MAA0B,EAEpD,CAAC,CAAC;CA2CJ,AAlBA,QAAgB;EAEd,AAAI,KAAsB,CAAC,KACzB,EAAmB;GACjB;GACA;GACA;EACF,CAAC;CAEL,GAAG;EACD;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,GAED,QAAgB;EAEd,AAAI,KAAgB,KAAkB,CAAC,MACrC,EAAS,CAAc,GACvB,GAA2B,EAAI;CAEnC,GAAG;EAAC;EAAc;EAAgB;EAAyB;CAAQ,CAAC;CAEpE,IAAM,MAAc,GAAiB,MAAkC;EAiBrE,AAhBA,EACE,GACA,EAAY,SACR,EAAY,KAAI,OAAe;GAC7B,cAAc,EAAW;GAMzB,mBAAmB,EAAW;GAC9B,qBAAqB,GAAwB;EAC/C,EAAE,IACF,KAAA,CACN,GACA,EAA0B,EAAE,GAC5B,GAAuB,CAAW;CACpC;CAUA,OARI,IAEA,kBAAC,GAAD;EAAO,UAAU;EAAS,IAAI,EAAE,IAAI,EAAE;YACnC,EAAwB;CACpB,CAAA,IAKT,kBAAC,GAAD;EACE,IAAI;GACF,SAAS;GACT,eAAe;GACf,gBAAgB,MAAY,UAAU,eAAe;GACrD,KAAK,MAAY,UAAU,SAAS;GACpC,UAAU;GACV,IAAI;GACJ,QAAQ;EACV;YATF;GAWG,CAAC,KACA,kBAAC,GAAD;IACE,SAAQ;IACR,IAAI;KACF,GAAG;KACH,cAAc;KACd,aAAa;KACb,UAAU;KACV,KAAK;KACL,iBAAiB;KACjB,QAAQ;IACV;cAEC;GACS,CAAA;GAEb,KAAuB,MAAY,WAClC,kBAAC,IAAD;IACE,iBAAiB;IACjB,WAAU,MAAkB;KAE1B,AADA,GAAoB,CAAc,GAClC,GAAmB;MACjB,kBAAkB;MAClB,WAAW,EAAc;KAC3B,CAAC;IACH;GACD,CAAA;GAEF,CAAC,KAAgB,kBAAC,IAAD,EAAmB,SAAS,GAAK,CAAA;GAClD,KACC,kBAAC,GAAD;IACE,IAAI;KACF,UAAU;KACV,WAAW;KACX,IAAI,MAAY,UAAU,IAAI;IAChC;cAEA,kBAAC,GAAD;KACE,IAAI;MACF,MAAM;MACN,WAAW;MACX,IAAI;MACJ,GAAI,MAAY,WAAW;OAAE,IAAI;OAAG,IAAI;OAAG,KAAK;MAAO;MACvD,SAAS;MACT,eAAe;MACf,GAAI,KAAgB;OAClB,WAAW;OACX,gBAAgB;MAClB;KACF;eAZF,CAwBG,KACC,kBAAC,GAAD;MACE,IAAI;OACF,SAAS;OACT,qBAAqB;OACrB,WAAW;OACX,cAAc;OACd,YAAY;OACZ,GAAG;MACL;gBARF,CAUG,GACD,kBAAC,GAAD;OAAY,IAAI;QAAE,aAAa;QAAS,IAAI;OAAO;iBAChD;MACS,CAAA,CACJ;SAEX,EAAa,KAAK,GAAa,MAAU;MACxC,IAAM,IAAS,MAAU,EAAa,SAAS;MAC/C,OACE,kBAAC,IAAD;OACE,aAAa;OACD;OAEZ,aAAa,EAAY;OACzB,WAAW,EAAY;OACvB,iBAAiB,MAAY;OAC7B,YAAY;OACZ,gBAAgB;OAChB,cAAc,CAAC,GAAe,IAAI,EAAY,EAAE;OAC5B;OACpB,oBAIE,IAAS,KAAsB,KAAA;MAElC,GAdM,EAAY,EAclB;KAEL,CAAC,CACG;;GACH,CAAA;GAEP,kBAAC,GAAD;IACE,IAAI;KACF,UAAU;KACV,QAAQ,MAAY,UAAU,QAAQ;KACtC,iBAAiB;IACnB;cALF,CAOG,KACC,EAAiB,SAAS,KAC1B,EAAa,WAAW,KACtB,kBAAC,GAAD;KACE,WAAU;KACV,SAAS;KACT,IAAI;MAAE,IAAI;MAAO,UAAU;MAAQ,KAAK;KAAE;eAEzC,EAAiB,KAAI,MACpB,kBAAC,GAAD;MAEE,OAAO;MACP,SAAQ;MACR,eAAe,EAA0B,CAAM;MAC/C,UAAU,CAAC;MACX,IAAI,EAAE,QAAQ,UAAU;KACzB,GANM,CAMN,CACF;IACI,CAAA,GAEX,kBAAC,GAAD;KAAK,IAAI,EAAE,IAAI,MAAM;eACnB,kBAAC,IAAD;MACE,OAAO;MACP,eAAe;MACf,QAAQ;MACR,aACE,MAAY,UAAU,iBAAiB,WAAW;MAEpD,UAAU,CAAC,KAAgB;MACT;KACnB,CAAA;IACE,CAAA,CACF;;GACL,kBAAC,GAAD;IAAY,SAAQ;IAAa,IAAI;KAAE,IAAI;KAAO,WAAW;IAAS;cACnE;GACS,CAAA;EACT;;AAET"}

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

@@ -28,7 +28,9 @@ export type SynapseChatInteractionProps = {
     attachments?: SynapseChatInteractionAttachment[];
     /** Server-reported outcome of staging each attachment, if available (see AgentChatResponseWithAttachmentStatuses). */
     attachmentStatuses?: AgentChatAttachmentStatus[];
+    /** Whether to show the loading spinner icon while the response is in flight. */
+    showLoadingIcon?: boolean;
 };
-export declare function SynapseChatInteraction({ userMessage, chatResponseText, chatErrorReason, chatResponseTrace, scrollIntoView, onSendChat, agentAvatar, userAvatar, animateEntry, isAwaitingResponse, attachments, attachmentStatuses, }: SynapseChatInteractionProps): import("react/jsx-runtime").JSX.Element;
+export declare function SynapseChatInteraction({ userMessage, chatResponseText, chatErrorReason, chatResponseTrace, scrollIntoView, onSendChat, agentAvatar, userAvatar, animateEntry, isAwaitingResponse, attachments, attachmentStatuses, showLoadingIcon, }: SynapseChatInteractionProps): import("react/jsx-runtime").JSX.Element;
 export default SynapseChatInteraction;
 //# sourceMappingURL=SynapseChatInteraction.d.ts.map

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

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

package/dist/components/SynapseChat/SynapseChatInteraction.js

@@ -11,17 +11,17 @@ import { KeyboardArrowDown as S, KeyboardArrowRight as C } from "@mui/icons-mate
 function w(e) {
 	return "reasoningText" in e ? e.reasoningText : "";
 }
-function T({ userMessage: T, chatResponseText: E, chatErrorReason: D, chatResponseTrace: O, scrollIntoView: k = !1, onSendChat: A, agentAvatar: j, userAvatar: M, animateEntry: N = !1, isAwaitingResponse: P = !1, attachments: F, attachmentStatuses: I }) {
-	let L = v(), R = s(null), z = s(null), [B, V] = c(!1), H = !E && !D;
+function T({ userMessage: T, chatResponseText: E, chatErrorReason: D, chatResponseTrace: O, scrollIntoView: k = !1, onSendChat: A, agentAvatar: j, userAvatar: M, animateEntry: N = !1, isAwaitingResponse: P = !1, attachments: F, attachmentStatuses: I, showLoadingIcon: L = !0 }) {
+	let R = v(), z = s(null), B = s(null), [V, H] = c(!1), U = !E && !D;
 	a(() => {
-		k && R.current?.scrollIntoView({ behavior: "smooth" });
+		k && z.current?.scrollIntoView({ behavior: "smooth" });
 	}, [k]), a(() => {
-		k && !H && z.current?.scrollIntoView({
+		k && !U && B.current?.scrollIntoView({
 			behavior: "smooth",
 			block: "end"
 		});
-	}, [k, H]);
-	let U = o(() => (O ?? []).flatMap((e) => r(e))?.filter((e) => !!e), [O]), W = U.length > 0, G = o(() => U.filter((e) => "reasoningText" in e).at(-1), [U]), K = G == null ? "Thinking..." : G.reasoningText, q = H ? K : `${B ? "Hide" : "Show"} Trace`, { textContent: J, guidePrompts: Y } = o(() => {
+	}, [k, U]);
+	let W = o(() => (O ?? []).flatMap((e) => r(e))?.filter((e) => !!e), [O]), G = W.length > 0, K = o(() => W.filter((e) => "reasoningText" in e).at(-1), [W]), q = K == null ? "Thinking..." : K.reasoningText, J = U ? q : `${V ? "Hide" : "Show"} Trace`, { textContent: Y, guidePrompts: X } = o(() => {
 		try {
 			let e = new DOMParser().parseFromString(E ?? "", "text/html");
 			e.querySelectorAll("tool_name, actions").forEach((e) => e.remove());
@@ -38,7 +38,7 @@ function T({ userMessage: T, chatResponseText: E, chatErrorReason: D, chatRespon
 				guidePrompts: []
 			};
 		}
-	}, [E]), X = o(() => (F ?? []).map((e) => {
+	}, [E]), Z = o(() => (F ?? []).map((e) => {
 		let t = I?.find((t) => t.fileHandleId === e.fileHandleId);
 		return {
 			fileHandleId: e.fileHandleId,
@@ -50,7 +50,7 @@ function T({ userMessage: T, chatResponseText: E, chatErrorReason: D, chatRespon
 	}), [F, I]);
 	return /* @__PURE__ */ x(y, { children: [
 		/* @__PURE__ */ x(m, {
-			ref: R,
+			ref: z,
 			sx: {
 				alignSelf: "flex-end",
 				maxWidth: "82%",
@@ -76,19 +76,19 @@ function T({ userMessage: T, chatResponseText: E, chatErrorReason: D, chatRespon
 				children: M
 			})]
 		}),
-		X.length > 0 && /* @__PURE__ */ b(m, {
+		Z.length > 0 && /* @__PURE__ */ b(m, {
 			sx: {
 				display: "block",
 				p: "0px",
 				mb: "5px"
 			},
 			children: /* @__PURE__ */ b(n, {
-				items: X,
+				items: Z,
 				wrap: !0
 			})
 		}),
 		/* @__PURE__ */ x(m, {
-			ref: z,
+			ref: B,
 			sx: {
 				display: "grid",
 				gridTemplateColumns: "50px auto",
@@ -108,7 +108,7 @@ function T({ userMessage: T, chatResponseText: E, chatErrorReason: D, chatRespon
 					component: "aside",
 					sx: { ".markdown": {
 						fontStyle: "italic",
-						borderLeft: `4px solid ${L.palette.grey[300]}`,
+						borderLeft: `4px solid ${R.palette.grey[300]}`,
 						marginLeft: "4px",
 						paddingLeft: "8px",
 						mt: 1,
@@ -117,10 +117,10 @@ function T({ userMessage: T, chatResponseText: E, chatErrorReason: D, chatRespon
 					children: [/* @__PURE__ */ b(d, {
 						variant: "outlined",
 						size: "small",
-						startIcon: H ? /* @__PURE__ */ b(e, { size: 14 }) : b(B ? S : C, { sx: { width: "14px" } }),
-						disabled: !W,
+						startIcon: U ? L ? /* @__PURE__ */ b(e, { size: 14 }) : void 0 : b(V ? S : C, { sx: { width: "14px" } }),
+						disabled: !G,
 						onClick: () => {
-							V((e) => !e);
+							H((e) => !e);
 						},
 						sx: {
 							height: "20px",
@@ -141,20 +141,20 @@ function T({ userMessage: T, chatResponseText: E, chatErrorReason: D, chatRespon
 								overflow: "hidden",
 								textOverflow: "ellipsis"
 							},
-							children: q
+							children: J
 						})
 					}), O && /* @__PURE__ */ b(p, {
-						in: B,
-						children: /* @__PURE__ */ b(t, { markdown: U.map(w).filter((e) => e.trim().length > 0).join("<br/><br/>") })
+						in: V,
+						children: /* @__PURE__ */ b(t, { markdown: W.map(w).filter((e) => e.trim().length > 0).join("<br/><br/>") })
 					})]
-				}), (J || A && Y.length > 0) && /* @__PURE__ */ x(u, {
+				}), (Y || A && X.length > 0) && /* @__PURE__ */ x(u, {
 					className: N ? i.entryAnimation : void 0,
-					children: [J && /* @__PURE__ */ b(t, { markdown: J }), A && Y.length > 0 && /* @__PURE__ */ b(g, {
+					children: [Y && /* @__PURE__ */ b(t, { markdown: Y }), A && X.length > 0 && /* @__PURE__ */ b(g, {
 						direction: "row",
 						flexWrap: "wrap",
 						gap: 1,
 						mt: 1,
-						children: Y.map((e) => /* @__PURE__ */ b(_, {
+						children: X.map((e) => /* @__PURE__ */ b(_, {
 							title: e,
 							children: /* @__PURE__ */ b(f, {
 								label: e,

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

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

@@ -10,6 +10,7 @@ type SynapseChatMessageProps = {
     scrollIntoView?: boolean;
     animateEntry?: boolean;
     isAwaitingResponse?: boolean;
+    showLoadingIcon?: boolean;
     /**
      * Attachments sent with this message. This information is not available in any API request/response
      * until the job has finished processing, so this prop is used to optimistically render the attachment

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

@@ -1 +1 @@
-{"version":3,"file":"SynapseChatMessage.d.ts","sourceRoot":"","sources":["../../../src/components/SynapseChat/SynapseChatMessage.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAsC9C,KAAK,uBAAuB,GAAG;IAC7B,WAAW,EAAE,KAAK,CAAC,SAAS,CAAA;IAC5B,UAAU,EAAE,KAAK,CAAC,SAAS,CAAA;IAC3B,kGAAkG;IAClG,WAAW,EAAE,MAAM,CAAA;IACnB,8EAA8E;IAC9E,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;IACtC,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,cAAc,EAAE,CAAA;CACtC,CAAA;AAED,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,2CA6DxE"}
+{"version":3,"file":"SynapseChatMessage.d.ts","sourceRoot":"","sources":["../../../src/components/SynapseChat/SynapseChatMessage.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAsC9C,KAAK,uBAAuB,GAAG;IAC7B,WAAW,EAAE,KAAK,CAAC,SAAS,CAAA;IAC5B,UAAU,EAAE,KAAK,CAAC,SAAS,CAAA;IAC3B,kGAAkG;IAClG,WAAW,EAAE,MAAM,CAAA;IACnB,8EAA8E;IAC9E,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;IACtC,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,cAAc,EAAE,CAAA;CACtC,CAAA;AAED,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,2CA+DxE"}