synapse-react-client 4.0.32 → 4.0.34

package/dist/components/SynapseChat/SynapseChat.js

@@ -4,22 +4,22 @@ import { useApplicationSessionContext as n } from "../../utils/AppUtils/session/
 import "../ToastMessage/index.js";
 import "../../utils/AppUtils/index.js";
 import "../../utils/index.js";
-import { SkeletonParagraph as r } from "../Skeleton/SkeletonParagraph.js";
+import { SkeletonParagraph as ee } from "../Skeleton/SkeletonParagraph.js";
 import "../Skeleton/index.js";
-import { UserCard as i } from "../UserCard/UserCard.js";
-import { useCreateAgentSession as a, useUpdateAgentSession as o } from "../../synapse-queries/chat/useChat.js";
-import { useChatState as ee } from "./useChatState.js";
-import { AccessLevelMenu as s } from "./AccessLevelMenu.js";
-import { ChatInputArea as c } from "./components/ChatInputArea/ChatInputArea.js";
-import l from "./SynapseChatMessage.js";
-import { useEffect as u, useRef as d, useState as f } from "react";
-import { Alert as te, Box as p, Chip as m, List as h, Stack as ne, Typography as g } from "@mui/material";
+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 { 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 { SmartToyTwoTone as x } from "@mui/icons-material";
 //#region src/components/SynapseChat/SynapseChat.tsx
-var S = /* @__PURE__ */ _(p, {
+var S = /* @__PURE__ */ _(f, {
 	sx: {
 		p: "3px",
 		borderRadius: "50%",
@@ -31,42 +31,42 @@ var S = /* @__PURE__ */ _(p, {
 	},
 	children: /* @__PURE__ */ _(x, { sx: { color: "secondary.main" } })
 });
-function C({ initialMessage: x, agentRegistrationId: C, chatbotName: w = "SynapseChat", agentAvatar: re = S, hideTitle: T = !1, textboxPositionOffset: E = "0px", sessionContext: D, externalSession: O, setExternalSession: k, externalChatState: A, showAccessLevelMenu: j = !0, onChatResponse: M, suggestedPrompts: N, allowAttachments: P = !1 }) {
-	let { accessToken: F } = t(), { userId: I } = n(), L = /* @__PURE__ */ _(i, {
-		ownerId: I,
+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, {
+		ownerId: L,
 		size: "AVATAR",
 		avatarSize: "MEDIUM"
-	}), [R, z] = f(), B = O ?? R, V = k ?? z, { mutate: H, error: U } = a({ onSuccess: (e) => V(e) }), { mutate: W } = o({
+	}), [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),
 		onError: (t) => e(`Unable to update the agent session: ${t.message}`, "danger")
-	}), [G, K] = f(D ? y.WRITE_YOUR_PRIVATE_DATA : y.PUBLICLY_ACCESSIBLE), q = ee(B, M), { interactions: J, isAwaitingResponse: Y, sendChat: X } = A ?? q, Z = d(void 0);
+	}), [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] = f(""), [$, oe] = f(!1), [se, ce] = f([]);
-	return u(() => {
+	let ie = Z.current, [ae, Q] = u(""), [$, oe] = u(!1), [se, ce] = u([]);
+	return c(() => {
 		H && !B && H({
 			agentAccessLevel: G,
 			agentRegistrationId: C,
-			sessionContext: D
+			sessionContext: O
 		});
 	}, [
 		H,
 		B,
-		F,
-		D,
+		I,
+		O,
 		G,
 		C
-	]), u(() => {
+	]), c(() => {
 		B && x && !$ && (X(x), oe(!0));
 	}, [
 		B,
 		x,
 		$,
 		X
-	]), U ? /* @__PURE__ */ _(te, {
+	]), U ? /* @__PURE__ */ _(d, {
 		severity: "error",
 		sx: { my: 2 },
 		children: U.reason
-	}) : /* @__PURE__ */ v(p, {
+	}) : /* @__PURE__ */ v(f, {
 		sx: {
 			display: "flex",
 			flexDirection: "column",
@@ -76,7 +76,7 @@ function C({ initialMessage: x, agentRegistrationId: C, chatbotName: w = "Synaps
 			height: "100%"
 		},
 		children: [
-			!T && /* @__PURE__ */ _(g, {
+			!E && /* @__PURE__ */ _(g, {
 				variant: "headline1",
 				sx: {
 					p: "20px",
@@ -89,7 +89,7 @@ function C({ initialMessage: x, agentRegistrationId: C, chatbotName: w = "Synaps
 				},
 				children: w
 			}),
-			j && /* @__PURE__ */ _(s, {
+			M && /* @__PURE__ */ _(a, {
 				initAccessLevel: G,
 				onChange: (e) => {
 					K(e), W({
@@ -98,14 +98,14 @@ function C({ initialMessage: x, agentRegistrationId: C, chatbotName: w = "Synaps
 					});
 				}
 			}),
-			!B && /* @__PURE__ */ _(r, { numRows: 10 }),
-			B && /* @__PURE__ */ _(p, {
+			!B && /* @__PURE__ */ _(ee, { numRows: 10 }),
+			B && /* @__PURE__ */ _(f, {
 				sx: {
 					flexGrow: 1,
 					overflowY: "auto",
 					mb: 2
 				},
-				children: /* @__PURE__ */ _(h, {
+				children: /* @__PURE__ */ _(m, {
 					sx: {
 						flex: 1,
 						overflowY: "auto",
@@ -114,28 +114,28 @@ function C({ initialMessage: x, agentRegistrationId: C, chatbotName: w = "Synaps
 						flexDirection: "column"
 					},
 					children: J.map((e, t) => {
-						let n = t === J.length - 1, r = e.jobId == null;
-						return /* @__PURE__ */ _(l, {
-							agentAvatar: re,
-							userAvatar: L,
+						let n = t === J.length - 1;
+						return /* @__PURE__ */ _(s, {
+							agentAvatar: T,
+							userAvatar: R,
 							userMessage: e.userMessage,
 							chatJobId: e.jobId,
 							onSendChat: X,
 							scrollIntoView: n,
 							animateEntry: !ie.has(e.id),
 							isAwaitingResponse: Y,
-							pendingAttachments: r ? se : void 0
+							pendingAttachments: n ? se : void 0
 						}, e.id);
 					})
 				})
 			}),
-			/* @__PURE__ */ v(p, {
+			/* @__PURE__ */ v(f, {
 				sx: {
 					position: "sticky",
-					bottom: E,
+					bottom: D,
 					backgroundColor: "white"
 				},
-				children: [N && N.length > 0 && J.length === 0 && /* @__PURE__ */ _(ne, {
+				children: [P && P.length > 0 && J.length === 0 && /* @__PURE__ */ _(h, {
 					direction: "row",
 					spacing: 1,
 					sx: {
@@ -143,16 +143,16 @@ function C({ initialMessage: x, agentRegistrationId: C, chatbotName: w = "Synaps
 						flexWrap: "wrap",
 						gap: 1
 					},
-					children: N.map((e) => /* @__PURE__ */ _(m, {
+					children: P.map((e) => /* @__PURE__ */ _(p, {
 						label: e,
 						variant: "outlined",
 						onClick: () => Q(e),
 						disabled: !B,
 						sx: { cursor: "pointer" }
 					}, e))
-				}), /* @__PURE__ */ _(p, {
+				}), /* @__PURE__ */ _(f, {
 					sx: { mt: "5px" },
-					children: /* @__PURE__ */ _(c, {
+					children: /* @__PURE__ */ _(o, {
 						value: ae,
 						onValueChange: Q,
 						onSend: (e, t) => {
@@ -164,7 +164,7 @@ function C({ initialMessage: x, agentRegistrationId: C, chatbotName: w = "Synaps
 						},
 						placeholder: `Message ${w}`,
 						disabled: !B || Y,
-						allowAttachments: P
+						allowAttachments: F
 					})
 				})]
 			}),

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 optimistic/pending interaction, so it can still show\n  // rich (name/type) chips after ChatInputArea has cleared its own attachment state. Once the\n  // interaction gains a jobId, SynapseChatMessage renders its attachments from the polled async\n  // job's requestBody instead (see below), so this value is 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              // The interaction has no jobId until the async job is registered; until then,\n              // show the attachments the user just sent rather than waiting on the polled job.\n              const isPending = interaction.jobId == null\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                    isPending ? 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 { 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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"}

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

@@ -2,8 +2,9 @@ import { TraceEvent } from '@sage-bionetworks/synapse-types';
 import { AgentChatAttachmentStatus } from '@sage-bionetworks/synapse-client';
 /**
  * A chat attachment to display on a sent/pending turn. Only `fileHandleId` is guaranteed --
- * `fileName`/`contentType` are omitted for a restored/polled turn, where only the fileHandleId
- * that was sent to the server is known (see SynapseChatMessage).
+ * `fileName`/`contentType` are omitted for a turn restored from history, where only the
+ * fileHandleId that was sent to the server is known, with no in-session upload record to fall
+ * back on (see SynapseChatMessage).
  */
 export type SynapseChatInteractionAttachment = {
     fileHandleId: string;

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;;;;GAIG;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;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"}

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 restored/polled turn, where only the fileHandleId\n * that was sent to the server is known (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}\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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"}

package/dist/components/SynapseChat/components/AttachmentChip/AttachmentChip.css

@@ -1 +1 @@
-._chip_1uzei_1{position:relative}._removeBadge_1uzei_5.MuiButtonBase-root{opacity:0;transition:opacity .1s;position:absolute;top:-6px;left:-6px}._chip_1uzei_1:hover ._removeBadge_1uzei_5,._chip_1uzei_1:focus-within ._removeBadge_1uzei_5{opacity:1}
+._chip_pr1yw_1{margin-top:var(--remove-button-offset-y,5px);margin-left:var(--remove-button-offset-x,8px);position:relative}._removeBadge_pr1yw_7.MuiButtonBase-root{border:1px solid var(--synapse-gray-300);background-color:#fff;width:16px;height:16px}._removeBadge_pr1yw_7.MuiButtonBase-root:hover{background-color:var(--synapse-gray-100)}._removeBadge_pr1yw_7.MuiButtonBase-root{top:calc(-1 * var(--remove-button-offset-y,5px));left:calc(-1 * var(--remove-button-offset-x,8px));opacity:0;transition:opacity .1s;position:absolute}._chip_pr1yw_1:hover ._removeBadge_pr1yw_7,._chip_pr1yw_1:focus-within ._removeBadge_pr1yw_7{opacity:1}

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

@@ -1 +1 @@
-{"version":3,"file":"AttachmentChip.d.ts","sourceRoot":"","sources":["../../../../../src/components/SynapseChat/components/AttachmentChip/AttachmentChip.tsx"],"names":[],"mappings":"AAIA,MAAM,MAAM,oBAAoB,GAAG,SAAS,GAAG,QAAQ,CAAA;AAEvD,MAAM,MAAM,mBAAmB,GAAG;IAChC;;;;OAIG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,oBAAoB,CAAA;IAC7B,gEAAgE;IAChE,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,wEAAwE;IACxE,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,yEAAyE;IACzE,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAC3B,CAAA;AAUD,wBAAgB,mBAAmB,CAAC,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAKhE;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,WAAW,EACX,MAAkB,EAClB,YAAY,EACZ,QAAQ,EACR,iBAAqC,GACtC,EAAE,mBAAmB,2CA+DrB;AAED,eAAe,cAAc,CAAA"}
+{"version":3,"file":"AttachmentChip.d.ts","sourceRoot":"","sources":["../../../../../src/components/SynapseChat/components/AttachmentChip/AttachmentChip.tsx"],"names":[],"mappings":"AAIA,MAAM,MAAM,oBAAoB,GAAG,SAAS,GAAG,QAAQ,CAAA;AAEvD,MAAM,MAAM,mBAAmB,GAAG;IAChC;;;;OAIG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,oBAAoB,CAAA;IAC7B,gEAAgE;IAChE,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,wEAAwE;IACxE,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,yEAAyE;IACzE,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAC3B,CAAA;AAUD,wBAAgB,mBAAmB,CAAC,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAKhE;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,WAAW,EACX,MAAkB,EAClB,YAAY,EACZ,QAAQ,EACR,iBAAqC,GACtC,EAAE,mBAAmB,2CAwDrB;AAED,eAAe,cAAc,CAAA"}

package/dist/components/SynapseChat/components/AttachmentChip/AttachmentChip.js

@@ -56,13 +56,6 @@ function u({ label: c, contentType: u, status: d = "default", errorMessage: f, o
 			onClick: p,
 			size: "small",
 			className: e.removeBadge,
-			sx: {
-				border: "1px solid",
-				borderColor: "grey.300",
-				backgroundColor: "white",
-				width: "16px",
-				height: "16px"
-			},
 			children: /* @__PURE__ */ a(s, { sx: { fontSize: "10px" } })
 		})]
 	});

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

@@ -1 +1 @@
-{"version":3,"file":"AttachmentChip.js","names":[],"sources":["../../../../../src/components/SynapseChat/components/AttachmentChip/AttachmentChip.tsx"],"sourcesContent":["import CloseIcon from '@mui/icons-material/Close'\nimport { Box, IconButton, Tooltip, Typography } from '@mui/material'\nimport styles from './AttachmentChip.module.scss'\n\nexport type AttachmentChipStatus = 'default' | 'failed'\n\nexport type AttachmentChipProps = {\n  /**\n   * Display name for the attachment. For a pending/just-uploaded attachment this is the real\n   * filename; for a restored/polled turn where file metadata isn't available, pass the\n   * fileHandleId instead.\n   */\n  label: string\n  /**\n   * MIME content type, used to derive a short type label (e.g. \"PDF\"). Omit when the type is\n   * unknown (e.g. a restored turn).\n   */\n  contentType?: string\n  /**\n   * @default 'default'\n   */\n  status?: AttachmentChipStatus\n  /** Shown in a tooltip on the chip when `status` is 'failed'. */\n  errorMessage?: string\n  /** If provided, renders a remove (\"x\") button; invoked when clicked. */\n  onRemove?: () => void\n  /** Accessible label for the remove button. @default `Remove ${label}` */\n  removeButtonLabel?: string\n}\n\nconst CONTENT_TYPE_LABELS: Record<string, string> = {\n  'application/pdf': 'PDF',\n  'text/plain': 'TXT',\n  'text/csv': 'CSV',\n  'application/json': 'JSON',\n  'text/tab-separated-values': 'TSV',\n}\n\nexport function getContentTypeLabel(contentType?: string): string {\n  if (!contentType) {\n    return 'FILE'\n  }\n  return CONTENT_TYPE_LABELS[contentType] ?? 'FILE'\n}\n\n/**\n * Displays a single chat attachment as a chip with a filename and type label. Used both for\n * attachments still pending send (with a remove button) and for attachments on a sent/restored\n * chat turn (read-only, optionally showing a server-reported failure).\n */\nexport function AttachmentChip({\n  label,\n  contentType,\n  status = 'default',\n  errorMessage,\n  onRemove,\n  removeButtonLabel = `Remove ${label}`,\n}: AttachmentChipProps) {\n  const isFailed = status === 'failed'\n\n  const chip = (\n    <Box\n      className={styles.chip}\n      sx={{\n        display: 'flex',\n        alignItems: 'center',\n        gap: '10px',\n        border: '1px solid',\n        borderColor: isFailed ? 'error.main' : 'grey.300',\n        borderRadius: '8px',\n        boxShadow: '0px 1px 1px rgba(0,0,0,0.05)',\n        p: '10px',\n      }}\n    >\n      <Box sx={{ minWidth: 0, flex: 1 }}>\n        <Typography\n          variant=\"body1\"\n          sx={{\n            fontWeight: 700,\n            fontSize: '14px',\n            color: isFailed ? 'error.main' : 'grey.900',\n            overflow: 'hidden',\n            textOverflow: 'ellipsis',\n            whiteSpace: 'nowrap',\n          }}\n        >\n          {label}\n        </Typography>\n        <Typography\n          variant=\"body1\"\n          sx={{ fontSize: '12px', color: 'grey.600' }}\n        >\n          {isFailed ? 'Failed' : getContentTypeLabel(contentType)}\n        </Typography>\n      </Box>\n      {onRemove && (\n        <IconButton\n          type=\"button\"\n          aria-label={removeButtonLabel}\n          onClick={onRemove}\n          size=\"small\"\n          className={styles.removeBadge}\n          sx={{\n            border: '1px solid',\n            borderColor: 'grey.300',\n            backgroundColor: 'white',\n            width: '16px',\n            height: '16px',\n          }}\n        >\n          <CloseIcon sx={{ fontSize: '10px' }} />\n        </IconButton>\n      )}\n    </Box>\n  )\n\n  if (isFailed && errorMessage) {\n    return <Tooltip title={errorMessage}>{chip}</Tooltip>\n  }\n  return chip\n}\n\nexport default AttachmentChip\n"],"mappings":";;;;;AA8BA,IAAM,IAA8C;CAClD,mBAAmB;CACnB,cAAc;CACd,YAAY;CACZ,oBAAoB;CACpB,6BAA6B;AAC/B;AAEA,SAAgB,EAAoB,GAA8B;CAIhE,OAHK,IAGE,EAAoB,MAAgB,SAFlC;AAGX;AAOA,SAAgB,EAAe,EAC7B,UACA,gBACA,YAAS,WACT,iBACA,aACA,uBAAoB,UAAU,OACR;CACtB,IAAM,IAAW,MAAW,UAEtB,IACJ,kBAAC,GAAD;EACE,WAAW,EAAO;EAClB,IAAI;GACF,SAAS;GACT,YAAY;GACZ,KAAK;GACL,QAAQ;GACR,aAAa,IAAW,eAAe;GACvC,cAAc;GACd,WAAW;GACX,GAAG;EACL;YAXF,CAaE,kBAAC,GAAD;GAAK,IAAI;IAAE,UAAU;IAAG,MAAM;GAAE;aAAhC,CACE,kBAAC,GAAD;IACE,SAAQ;IACR,IAAI;KACF,YAAY;KACZ,UAAU;KACV,OAAO,IAAW,eAAe;KACjC,UAAU;KACV,cAAc;KACd,YAAY;IACd;cAEC;GACS,CAAA,GACZ,kBAAC,GAAD;IACE,SAAQ;IACR,IAAI;KAAE,UAAU;KAAQ,OAAO;IAAW;cAEzC,IAAW,WAAW,EAAoB,CAAW;GAC5C,CAAA,CACT;MACJ,KACC,kBAAC,GAAD;GACE,MAAK;GACL,cAAY;GACZ,SAAS;GACT,MAAK;GACL,WAAW,EAAO;GAClB,IAAI;IACF,QAAQ;IACR,aAAa;IACb,iBAAiB;IACjB,OAAO;IACP,QAAQ;GACV;aAEA,kBAAC,GAAD,EAAW,IAAI,EAAE,UAAU,OAAO,EAAI,CAAA;EAC5B,CAAA,CAEX;;CAMP,OAHI,KAAY,IACP,kBAAC,GAAD;EAAS,OAAO;YAAe;CAAc,CAAA,IAE/C;AACT"}
+{"version":3,"file":"AttachmentChip.js","names":[],"sources":["../../../../../src/components/SynapseChat/components/AttachmentChip/AttachmentChip.tsx"],"sourcesContent":["import CloseIcon from '@mui/icons-material/Close'\nimport { Box, IconButton, Tooltip, Typography } from '@mui/material'\nimport styles from './AttachmentChip.module.scss'\n\nexport type AttachmentChipStatus = 'default' | 'failed'\n\nexport type AttachmentChipProps = {\n  /**\n   * Display name for the attachment. For a pending/just-uploaded attachment this is the real\n   * filename; for a restored/polled turn where file metadata isn't available, pass the\n   * fileHandleId instead.\n   */\n  label: string\n  /**\n   * MIME content type, used to derive a short type label (e.g. \"PDF\"). Omit when the type is\n   * unknown (e.g. a restored turn).\n   */\n  contentType?: string\n  /**\n   * @default 'default'\n   */\n  status?: AttachmentChipStatus\n  /** Shown in a tooltip on the chip when `status` is 'failed'. */\n  errorMessage?: string\n  /** If provided, renders a remove (\"x\") button; invoked when clicked. */\n  onRemove?: () => void\n  /** Accessible label for the remove button. @default `Remove ${label}` */\n  removeButtonLabel?: string\n}\n\nconst CONTENT_TYPE_LABELS: Record<string, string> = {\n  'application/pdf': 'PDF',\n  'text/plain': 'TXT',\n  'text/csv': 'CSV',\n  'application/json': 'JSON',\n  'text/tab-separated-values': 'TSV',\n}\n\nexport function getContentTypeLabel(contentType?: string): string {\n  if (!contentType) {\n    return 'FILE'\n  }\n  return CONTENT_TYPE_LABELS[contentType] ?? 'FILE'\n}\n\n/**\n * Displays a single chat attachment as a chip with a filename and type label. Used both for\n * attachments still pending send (with a remove button) and for attachments on a sent/restored\n * chat turn (read-only, optionally showing a server-reported failure).\n */\nexport function AttachmentChip({\n  label,\n  contentType,\n  status = 'default',\n  errorMessage,\n  onRemove,\n  removeButtonLabel = `Remove ${label}`,\n}: AttachmentChipProps) {\n  const isFailed = status === 'failed'\n\n  const chip = (\n    <Box\n      className={styles.chip}\n      sx={{\n        display: 'flex',\n        alignItems: 'center',\n        gap: '10px',\n        border: '1px solid',\n        borderColor: isFailed ? 'error.main' : 'grey.300',\n        borderRadius: '8px',\n        boxShadow: '0px 1px 1px rgba(0,0,0,0.05)',\n        p: '10px',\n      }}\n    >\n      <Box sx={{ minWidth: 0, flex: 1 }}>\n        <Typography\n          variant=\"body1\"\n          sx={{\n            fontWeight: 700,\n            fontSize: '14px',\n            color: isFailed ? 'error.main' : 'grey.900',\n            overflow: 'hidden',\n            textOverflow: 'ellipsis',\n            whiteSpace: 'nowrap',\n          }}\n        >\n          {label}\n        </Typography>\n        <Typography\n          variant=\"body1\"\n          sx={{ fontSize: '12px', color: 'grey.600' }}\n        >\n          {isFailed ? 'Failed' : getContentTypeLabel(contentType)}\n        </Typography>\n      </Box>\n      {onRemove && (\n        <IconButton\n          type=\"button\"\n          aria-label={removeButtonLabel}\n          onClick={onRemove}\n          size=\"small\"\n          className={styles.removeBadge}\n        >\n          <CloseIcon sx={{ fontSize: '10px' }} />\n        </IconButton>\n      )}\n    </Box>\n  )\n\n  if (isFailed && errorMessage) {\n    return <Tooltip title={errorMessage}>{chip}</Tooltip>\n  }\n  return chip\n}\n\nexport default AttachmentChip\n"],"mappings":";;;;;AA8BA,IAAM,IAA8C;CAClD,mBAAmB;CACnB,cAAc;CACd,YAAY;CACZ,oBAAoB;CACpB,6BAA6B;AAC/B;AAEA,SAAgB,EAAoB,GAA8B;CAIhE,OAHK,IAGE,EAAoB,MAAgB,SAFlC;AAGX;AAOA,SAAgB,EAAe,EAC7B,UACA,gBACA,YAAS,WACT,iBACA,aACA,uBAAoB,UAAU,OACR;CACtB,IAAM,IAAW,MAAW,UAEtB,IACJ,kBAAC,GAAD;EACE,WAAW,EAAO;EAClB,IAAI;GACF,SAAS;GACT,YAAY;GACZ,KAAK;GACL,QAAQ;GACR,aAAa,IAAW,eAAe;GACvC,cAAc;GACd,WAAW;GACX,GAAG;EACL;YAXF,CAaE,kBAAC,GAAD;GAAK,IAAI;IAAE,UAAU;IAAG,MAAM;GAAE;aAAhC,CACE,kBAAC,GAAD;IACE,SAAQ;IACR,IAAI;KACF,YAAY;KACZ,UAAU;KACV,OAAO,IAAW,eAAe;KACjC,UAAU;KACV,cAAc;KACd,YAAY;IACd;cAEC;GACS,CAAA,GACZ,kBAAC,GAAD;IACE,SAAQ;IACR,IAAI;KAAE,UAAU;KAAQ,OAAO;IAAW;cAEzC,IAAW,WAAW,EAAoB,CAAW;GAC5C,CAAA,CACT;MACJ,KACC,kBAAC,GAAD;GACE,MAAK;GACL,cAAY;GACZ,SAAS;GACT,MAAK;GACL,WAAW,EAAO;aAElB,kBAAC,GAAD,EAAW,IAAI,EAAE,UAAU,OAAO,EAAI,CAAA;EAC5B,CAAA,CAEX;;CAMP,OAHI,KAAY,IACP,kBAAC,GAAD;EAAS,OAAO;YAAe;CAAc,CAAA,IAE/C;AACT"}

package/dist/components/SynapseChat/components/AttachmentChip/AttachmentChip.module.js

@@ -1,6 +1,6 @@
 import './AttachmentChip.css';var e = {
-	chip: "_chip_1uzei_1",
-	removeBadge: "_removeBadge_1uzei_5"
+	chip: "_chip_pr1yw_1",
+	removeBadge: "_removeBadge_pr1yw_7"
 };
 //#endregion
 export { e as default };

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

@@ -1 +1 @@
-{"version":3,"file":"AttachmentChip.module.js","names":[],"sources":["../../../../../src/components/SynapseChat/components/AttachmentChip/AttachmentChip.module.scss"],"sourcesContent":[".chip {\n  position: relative;\n}\n\n.removeBadge:global(.MuiButtonBase-root) {\n  position: absolute;\n  top: -6px;\n  left: -6px;\n  opacity: 0;\n  transition: opacity 100ms;\n}\n\n.chip:hover .removeBadge,\n.chip:focus-within .removeBadge {\n  opacity: 1;\n}\n"],"mappings":""}
+{"version":3,"file":"AttachmentChip.module.js","names":[],"sources":["../../../../../src/components/SynapseChat/components/AttachmentChip/AttachmentChip.module.scss"],"sourcesContent":[".chip {\n  position: relative;\n  margin-top: var(--remove-button-offset-y, 5px);\n  margin-left: var(--remove-button-offset-x, 8px);\n}\n\n.removeBadge:global(.MuiButtonBase-root) {\n  border: 1px solid var(--synapse-gray-300);\n  background-color: white;\n  width: 16px;\n  height: 16px;\n  &:hover {\n    background-color: var(--synapse-gray-100);\n  }\n\n  position: absolute;\n  top: calc(-1 * var(--remove-button-offset-y, 5px));\n  left: calc(-1 * var(--remove-button-offset-x, 8px));\n  opacity: 0;\n  transition: opacity 100ms;\n}\n\n.chip:hover .removeBadge,\n.chip:focus-within .removeBadge {\n  opacity: 1;\n}\n"],"mappings":""}

package/dist/components/SynapseChat/components/AttachmentChip/AttachmentChip.module.scss

@@ -1,11 +1,21 @@
 .chip {
   position: relative;
+  margin-top: var(--remove-button-offset-y, 5px);
+  margin-left: var(--remove-button-offset-x, 8px);
 }
 
 .removeBadge:global(.MuiButtonBase-root) {
+  border: 1px solid var(--synapse-gray-300);
+  background-color: white;
+  width: 16px;
+  height: 16px;
+  &:hover {
+    background-color: var(--synapse-gray-100);
+  }
+
   position: absolute;
-  top: -6px;
-  left: -6px;
+  top: calc(-1 * var(--remove-button-offset-y, 5px));
+  left: calc(-1 * var(--remove-button-offset-x, 8px));
   opacity: 0;
   transition: opacity 100ms;
 }

package/dist/components/SynapseChat/components/ChatAttachmentStrip/ChatAttachmentStrip.css

@@ -1 +1 @@
-._strip_10c32_1{gap:10px;display:flex;overflow-x:auto}._wrap_10c32_7{flex-wrap:wrap;overflow-x:visible}._item_10c32_12{flex:1 1 0;min-width:140px}
+._strip_1svc8_1{--remove-button-offset-x:8px;--remove-button-offset-y:5px;column-gap:calc(10px - var(--remove-button-offset-x));row-gap:calc(10px - var(--remove-button-offset-y));display:flex;overflow-x:auto}._wrap_1svc8_10{flex-wrap:wrap;overflow-x:visible}._item_1svc8_15{flex:1 1 0;min-width:140px}

package/dist/components/SynapseChat/components/ChatAttachmentStrip/ChatAttachmentStrip.module.js

@@ -1,7 +1,7 @@
 import './ChatAttachmentStrip.css';var e = {
-	strip: "_strip_10c32_1",
-	wrap: "_wrap_10c32_7",
-	item: "_item_10c32_12"
+	strip: "_strip_1svc8_1",
+	wrap: "_wrap_1svc8_10",
+	item: "_item_1svc8_15"
 };
 //#endregion
 export { e as default };

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

@@ -1 +1 @@
-{"version":3,"file":"ChatAttachmentStrip.module.js","names":[],"sources":["../../../../../src/components/SynapseChat/components/ChatAttachmentStrip/ChatAttachmentStrip.module.scss"],"sourcesContent":["// Minimum width for each chip so 3 attachments are visible and a 4th is partially offscreen\n// in the 480px-wide composer. Kept as a SCSS variable since CSS is its only consumer.\n$chip-min-width: 140px;\n\n.strip {\n  display: flex;\n  gap: 10px;\n  overflow-x: auto;\n}\n\n.wrap {\n  flex-wrap: wrap;\n  overflow-x: visible;\n}\n\n.item {\n  flex: 1 1 0;\n  min-width: $chip-min-width;\n}\n"],"mappings":""}
+{"version":3,"file":"ChatAttachmentStrip.module.js","names":[],"sources":["../../../../../src/components/SynapseChat/components/ChatAttachmentStrip/ChatAttachmentStrip.module.scss"],"sourcesContent":["// Minimum width for each chip so 3 attachments are visible and a 4th is partially offscreen\n// in the 480px-wide composer. Kept as a SCSS variable since CSS is its only consumer.\n$chip-min-width: 140px;\n\n.strip {\n  --remove-button-offset-x: 8px;\n  --remove-button-offset-y: 5px;\n\n  display: flex;\n  column-gap: calc(10px - var(--remove-button-offset-x));\n  row-gap: calc(10px - var(--remove-button-offset-y));\n  overflow-x: auto;\n}\n\n.wrap {\n  flex-wrap: wrap;\n  overflow-x: visible;\n}\n\n.item {\n  flex: 1 1 0;\n  min-width: $chip-min-width;\n}\n"],"mappings":""}

package/dist/components/SynapseChat/components/ChatAttachmentStrip/ChatAttachmentStrip.module.scss

@@ -3,8 +3,12 @@
 $chip-min-width: 140px;
 
 .strip {
+  --remove-button-offset-x: 8px;
+  --remove-button-offset-y: 5px;
+
   display: flex;
-  gap: 10px;
+  column-gap: calc(10px - var(--remove-button-offset-x));
+  row-gap: calc(10px - var(--remove-button-offset-y));
   overflow-x: auto;
 }
 

package/dist/components/TanStackTable/ColumnHeader.d.ts

@@ -1,10 +1,17 @@
 import { HeaderContext } from '@tanstack/react-table';
 import { ReactNode } from 'react';
+type SortIconRendererParams = {
+    isSorted: 'asc' | 'desc' | false;
+};
 type ColumnHeaderProps = {
     title?: string;
     helpText?: ReactNode;
     additionalButtons?: ReactNode;
     wrap?: boolean;
+    sortIconRenderer?: (params: SortIconRendererParams) => ReactNode;
+    iconPlacement?: 'left' | 'right';
+    iconColor?: string;
+    iconSize?: string | number;
     filterControl?: ReactNode;
 };
 /**

package/dist/components/TanStackTable/ColumnHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColumnHeader.d.ts","sourceRoot":"","sources":["../../../src/components/TanStackTable/ColumnHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAA;AAIrD,OAAO,EAAE,SAAS,EAAe,MAAM,OAAO,CAAA;AAG9C,KAAK,iBAAiB,GAAG;IACvB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,iBAAiB,CAAC,EAAE,SAAS,CAAA;IAC7B,IAAI,CAAC,EAAE,OAAO,CAAA;IAGd,aAAa,CAAC,EAAE,SAAS,CAAA;CAC1B,CAAA;AAED;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,KAAK,GAAG,OAAO,EAAE,MAAM,GAAG,OAAO,EACpE,KAAK,EAAE,iBAAiB,GAAG,aAAa,CAAC,KAAK,EAAE,MAAM,CAAC,2CA8FxD"}
+{"version":3,"file":"ColumnHeader.d.ts","sourceRoot":"","sources":["../../../src/components/TanStackTable/ColumnHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAA;AAIrD,OAAO,EAAE,SAAS,EAAe,MAAM,OAAO,CAAA;AAG9C,KAAK,sBAAsB,GAAG;IAC5B,QAAQ,EAAE,KAAK,GAAG,MAAM,GAAG,KAAK,CAAA;CACjC,CAAA;AAED,KAAK,iBAAiB,GAAG;IACvB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,iBAAiB,CAAC,EAAE,SAAS,CAAA;IAC7B,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,sBAAsB,KAAK,SAAS,CAAA;IAChE,aAAa,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAChC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAG1B,aAAa,CAAC,EAAE,SAAS,CAAA;CAC1B,CAAA;AAED;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,KAAK,GAAG,OAAO,EAAE,MAAM,GAAG,OAAO,EACpE,KAAK,EAAE,iBAAiB,GAAG,aAAa,CAAC,KAAK,EAAE,MAAM,CAAC,2CA2GxD"}

package/dist/components/TanStackTable/ColumnHeader.js

@@ -6,7 +6,7 @@ import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
 import { HelpTwoTone as l } from "@mui/icons-material";
 //#region src/components/TanStackTable/ColumnHeader.tsx
 function u(u) {
-	let { column: d, title: f = u.column.id, wrap: p = !1, helpText: m, filterControl: h, additionalButtons: g } = u, _ = n(() => {
+	let { column: d, title: f = u.column.id, wrap: p = !1, helpText: m, filterControl: h, additionalButtons: g, sortIconRenderer: _, iconPlacement: v = "right", iconColor: y, iconSize: b } = u, x = n(() => {
 		if (h) return h;
 		if (d.getCanFilter()) {
 			if (d.columnDef.meta?.filterVariant === "enumeration") return /* @__PURE__ */ s(t, {
@@ -20,13 +20,13 @@ function u(u) {
 		d,
 		h,
 		f
-	])();
+	])(), S = d.getIsSorted();
 	return /* @__PURE__ */ c(r, {
 		sx: {
 			display: "flex",
 			alignContent: "center",
 			alignItems: "center",
-			justifyContent: "space-between",
+			...v === "right" && { justifyContent: "space-between" },
 			overflow: "hidden",
 			minWidth: 0
 		},
@@ -45,7 +45,7 @@ function u(u) {
 				display: "flex",
 				alignItems: "center",
 				height: "22px",
-				ml: 2,
+				ml: v === "left" ? 1 : 2,
 				gap: .25
 			},
 			children: [
@@ -57,7 +57,7 @@ function u(u) {
 						children: /* @__PURE__ */ s(l, { fontSize: "inherit" })
 					})
 				}),
-				d.getCanFilter() && _,
+				d.getCanFilter() && x,
 				d.getCanSort() && /* @__PURE__ */ s(a, {
 					title: `Sort by ${f}`,
 					placement: "top",
@@ -68,12 +68,13 @@ function u(u) {
 						tabIndex: 0,
 						onKeyPress: () => d.toggleSorting(),
 						onClick: () => d.toggleSorting(),
-						children: /* @__PURE__ */ s(e, {
-							icon: d.getIsSorted() === "asc" ? "sortUp" : "sortDown",
+						children: _ ? _({ isSorted: S }) : /* @__PURE__ */ s(e, {
+							icon: S === "asc" ? "sortUp" : "sortDown",
 							wrap: !1,
 							sx: {
-								color: d.getIsSorted() ? "primary.main" : "grey.700",
-								backgroundColor: "none"
+								color: y ?? (S ? "primary.main" : "grey.700"),
+								backgroundColor: "none",
+								...b && { fontSize: b }
 							}
 						})
 					})