synapse-react-client 4.0.29 → 4.0.31

package/dist/components/SynapseChat/SynapseChatInteraction.js

@@ -1,22 +1,29 @@
 import { SynapseSpinner as e } from "../LoadingScreen/LoadingScreen.js";
 import { Markdown as t } from "../Markdown/MarkdownSynapse.js";
-import n from "./extractMessageFromTraceEvent.js";
-import { useEffect as r, useMemo as i, useRef as a, useState as o } from "react";
-import { Alert as s, Box as c, Button as l, Chip as u, Collapse as d, ListItem as f, ListItemText as p, Stack as m, Tooltip as h, useTheme as g } from "@mui/material";
-import { Fragment as _, jsx as v, jsxs as y } from "react/jsx-runtime";
-import { KeyboardArrowDown as b, KeyboardArrowRight as x, SmartToyTwoTone as S } from "@mui/icons-material";
+import { ChatAttachmentStrip as n } from "./components/ChatAttachmentStrip/ChatAttachmentStrip.js";
+import r from "./extractMessageFromTraceEvent.js";
+import i from "./SynapseChatInteraction.module.js";
+import { useEffect as a, useMemo as o, useRef as s, useState as c } from "react";
+import { Alert as l, Box as u, Button as d, Chip as f, Collapse as p, ListItem as m, ListItemText as h, Stack as g, Tooltip as _, useTheme as v } from "@mui/material";
+import { Fragment as y, jsx as b, jsxs as x } from "react/jsx-runtime";
+import { KeyboardArrowDown as S, KeyboardArrowRight as C } from "@mui/icons-material";
 //#region src/components/SynapseChat/SynapseChatInteraction.tsx
-function C(e) {
+function w(e) {
 	return "reasoningText" in e ? e.reasoningText : "";
 }
-function w({ userMessage: w, chatResponseText: T, chatErrorReason: E, chatResponseTrace: D, scrollIntoView: O = !1, onSendChat: k }) {
-	let A = g(), j = a(null), [M, N] = o(!1);
-	r(() => {
-		O && j.current && j.current.scrollIntoView({ behavior: "smooth" });
-	}, [j, O]);
-	let P = !T && !E, F = i(() => (D ?? []).flatMap((e) => n(e))?.filter((e) => !!e), [D]), I = F.length > 0, L = i(() => F.filter((e) => "reasoningText" in e).at(-1), [F]), R = L == null ? "Thinking..." : L.reasoningText, z = P ? R : `${M ? "Hide" : "Show"} Trace`, { textContent: B, guidePrompts: V } = i(() => {
+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;
+	a(() => {
+		k && R.current?.scrollIntoView({ behavior: "smooth" });
+	}, [k]), a(() => {
+		k && !H && z.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(() => {
 		try {
-			let e = new DOMParser().parseFromString(T ?? "", "text/html");
+			let e = new DOMParser().parseFromString(E ?? "", "text/html");
 			e.querySelectorAll("tool_name, actions").forEach((e) => e.remove());
 			let t = Array.from(e.querySelectorAll("guideprompt")).map((e) => e.textContent?.trim()).filter((e) => !!e);
 			e.querySelectorAll("guideprompt").forEach((e) => e.remove());
@@ -27,128 +34,150 @@ function w({ userMessage: w, chatResponseText: T, chatErrorReason: E, chatRespon
 			};
 		} catch (e) {
 			return console.error(e), {
-				textContent: T ?? "",
+				textContent: E ?? "",
 				guidePrompts: []
 			};
 		}
-	}, [T]);
-	return /* @__PURE__ */ y(_, { children: [
-		/* @__PURE__ */ v(f, {
-			ref: j,
+	}, [E]), X = o(() => (F ?? []).map((e) => {
+		let t = I?.find((t) => t.fileHandleId === e.fileHandleId);
+		return {
+			fileHandleId: e.fileHandleId,
+			label: e.fileName ?? e.fileHandleId,
+			contentType: e.contentType,
+			status: t?.status === "FAILED" ? "failed" : "default",
+			errorMessage: t?.failureMessage
+		};
+	}), [F, I]);
+	return /* @__PURE__ */ x(y, { children: [
+		/* @__PURE__ */ x(m, {
+			ref: R,
 			sx: {
 				alignSelf: "flex-end",
-				backgroundColor: A.palette.secondary[100],
-				borderRadius: "24px",
-				maxWidth: "70%",
-				display: "block",
+				maxWidth: "82%",
 				mb: "5px",
-				p: "8px 12px",
 				wordWrap: "break-word",
-				width: "auto"
+				width: "auto",
+				display: "grid",
+				gridTemplateColumns: "auto auto",
+				columnGap: "16px",
+				alignItems: "start",
+				justifyItems: "end"
 			},
-			children: /* @__PURE__ */ v(p, { primary: w })
+			children: [/* @__PURE__ */ b(u, {
+				className: N ? i.entryAnimation : void 0,
+				sx: {
+					p: "4px 14px",
+					backgroundColor: "#F3F6F7",
+					borderRadius: "8px"
+				},
+				children: /* @__PURE__ */ b(h, { primary: T })
+			}), /* @__PURE__ */ b(u, {
+				sx: { marginTop: "4px" },
+				children: M
+			})]
 		}),
-		/* @__PURE__ */ y(f, {
+		X.length > 0 && /* @__PURE__ */ b(m, {
+			sx: {
+				display: "block",
+				p: "0px",
+				mb: "5px"
+			},
+			children: /* @__PURE__ */ b(n, {
+				items: X,
+				wrap: !0
+			})
+		}),
+		/* @__PURE__ */ x(m, {
+			ref: z,
 			sx: {
 				display: "grid",
 				gridTemplateColumns: "50px auto",
-				columnGap: "0px",
+				columnGap: "16px",
 				justifyItems: "center",
 				alignItems: "start",
-				p: "0px"
+				p: "0px",
+				padding: "10px"
 			},
-			children: [/* @__PURE__ */ v(c, {
-				sx: {
-					p: "3px",
-					mt: "10px",
-					height: "31px",
-					borderRadius: "50%",
-					borderStyle: "solid",
-					borderWidth: "1px",
-					borderColor: "grey.300"
-				},
-				children: /* @__PURE__ */ v(S, { sx: { color: "secondary.main" } })
-			}), /* @__PURE__ */ y(c, {
+			children: [j, /* @__PURE__ */ x(u, {
 				sx: {
 					borderRadius: "10px",
-					padding: "10px",
 					maxWidth: "100%",
 					overflow: "auto"
 				},
-				children: [
-					/* @__PURE__ */ y(c, {
-						component: "aside",
-						sx: { ".markdown": {
-							fontStyle: "italic",
-							borderLeft: `4px solid ${A.palette.grey[300]}`,
-							marginLeft: "4px",
-							paddingLeft: "8px",
-							mt: 1,
-							mb: 2
-						} },
-						children: [/* @__PURE__ */ v(l, {
-							variant: "outlined",
-							size: "small",
-							startIcon: P ? /* @__PURE__ */ v(e, { size: 14 }) : v(M ? b : x, { sx: { width: "14px" } }),
-							disabled: !I,
-							onClick: () => {
-								N((e) => !e);
-							},
+				children: [/* @__PURE__ */ x(u, {
+					component: "aside",
+					sx: { ".markdown": {
+						fontStyle: "italic",
+						borderLeft: `4px solid ${L.palette.grey[300]}`,
+						marginLeft: "4px",
+						paddingLeft: "8px",
+						mt: 1,
+						mb: 2
+					} },
+					children: [/* @__PURE__ */ b(d, {
+						variant: "outlined",
+						size: "small",
+						startIcon: H ? /* @__PURE__ */ b(e, { size: 14 }) : b(B ? S : C, { sx: { width: "14px" } }),
+						disabled: !W,
+						onClick: () => {
+							V((e) => !e);
+						},
+						sx: {
+							height: "20px",
+							fontSize: "12px",
+							fontWeight: 600,
+							mb: 1,
+							border: "none !important",
+							color: "grey.700",
+							justifyContent: "flex-start",
+							whiteSpace: "nowrap",
+							maxWidth: "325px",
+							textTransform: "none",
+							pl: 0,
+							".MuiButton-startIcon": { mr: .5 }
+						},
+						children: /* @__PURE__ */ b(u, {
 							sx: {
-								height: "20px",
-								fontSize: "12px",
-								fontWeight: 600,
-								mb: 1,
-								border: "none !important",
-								color: "grey.700",
-								justifyContent: "flex-start",
-								whiteSpace: "nowrap",
-								maxWidth: "325px",
-								textTransform: "none",
-								pl: 0,
-								".MuiButton-startIcon": { mr: .5 }
+								overflow: "hidden",
+								textOverflow: "ellipsis"
 							},
-							children: /* @__PURE__ */ v(c, {
-								sx: {
-									overflow: "hidden",
-									textOverflow: "ellipsis"
-								},
-								children: z
-							})
-						}), D && /* @__PURE__ */ v(d, {
-							in: M,
-							children: /* @__PURE__ */ v(t, { markdown: F.map(C).filter((e) => e.trim().length > 0).join("<br/><br/>") })
-						})]
-					}),
-					B && /* @__PURE__ */ v(t, { markdown: B }),
-					k && V.length > 0 && /* @__PURE__ */ v(m, {
+							children: q
+						})
+					}), O && /* @__PURE__ */ b(p, {
+						in: B,
+						children: /* @__PURE__ */ b(t, { markdown: U.map(w).filter((e) => e.trim().length > 0).join("<br/><br/>") })
+					})]
+				}), (J || A && Y.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, {
 						direction: "row",
 						flexWrap: "wrap",
 						gap: 1,
 						mt: 1,
-						children: V.map((e) => /* @__PURE__ */ v(h, {
+						children: Y.map((e) => /* @__PURE__ */ b(_, {
 							title: e,
-							children: /* @__PURE__ */ v(u, {
+							children: /* @__PURE__ */ b(f, {
 								label: e,
 								variant: "outlined",
 								color: "primary",
 								clickable: !0,
-								onClick: () => k(e),
+								disabled: P,
+								onClick: () => A(e),
 								sx: { maxWidth: 200 }
 							})
 						}, e))
-					})
-				]
+					})]
+				})]
 			})]
 		}),
-		E && /* @__PURE__ */ v(s, {
+		D && /* @__PURE__ */ b(l, {
 			severity: "error",
 			sx: { my: 2 },
-			children: E
+			children: D
 		})
 	] });
 }
 //#endregion
-export { w as SynapseChatInteraction, w as default };
+export { T as SynapseChatInteraction, T as default };
 
 //# sourceMappingURL=SynapseChatInteraction.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SynapseChatInteraction.js","names":[],"sources":["../../../src/components/SynapseChat/SynapseChatInteraction.tsx"],"sourcesContent":["import { SynapseSpinner } from '@/components/LoadingScreen/LoadingScreen'\nimport extractMessageFromTraceEvent, {\n  TraceMessage,\n} from '@/components/SynapseChat/extractMessageFromTraceEvent'\nimport {\n  KeyboardArrowDown,\n  KeyboardArrowRight,\n  SmartToyTwoTone,\n} from '@mui/icons-material'\nimport {\n  Alert,\n  Box,\n  Button,\n  Chip,\n  Collapse,\n  ListItem,\n  ListItemText,\n  Stack,\n  Tooltip,\n  useTheme,\n} from '@mui/material'\nimport { Color } from '@mui/material/styles'\nimport { TraceEvent } from '@sage-bionetworks/synapse-types'\nimport { useEffect, useMemo, useRef, useState } from 'react'\nimport MarkdownSynapse from '../Markdown/MarkdownSynapse'\n\nexport type SynapseChatInteractionProps = {\n  userMessage: string\n  chatResponseText?: string\n  chatResponseTrace?: TraceEvent[]\n  scrollIntoView?: boolean\n  chatErrorReason?: string\n  onSendChat?: (message: string) => void\n}\n\n// Show tool calls in the trace. Useful for development. We may want to show them to users in the future.\nconst SHOW_TOOL_USE = false\n\nfunction getMarkdownForTraceMessage(traceMessage: TraceMessage): string {\n  if ('reasoningText' in traceMessage) {\n    return traceMessage.reasoningText\n  }\n  if (SHOW_TOOL_USE && 'toolName' in traceMessage) {\n    return `**Tool Used:** \\`${\n      traceMessage.toolName\n    }\\`\\n\\n**Tool Input:**\\n\\`\\`\\`json\\n${JSON.stringify(\n      traceMessage.toolInput,\n      null,\n      2,\n    )}\\n\\`\\`\\`\\n`\n  }\n  return ''\n}\n\nexport function SynapseChatInteraction({\n  userMessage,\n  chatResponseText,\n  chatErrorReason,\n  chatResponseTrace,\n  scrollIntoView = false,\n  onSendChat,\n}: SynapseChatInteractionProps) {\n  const theme = useTheme()\n  const ref = useRef<HTMLLIElement | null>(null)\n  const [showTrace, setShowTrace] = useState(false)\n\n  useEffect(() => {\n    // on mount, scroll into view if instructed\n    if (scrollIntoView) {\n      if (ref.current) {\n        ref.current.scrollIntoView({ behavior: 'smooth' })\n      }\n    }\n  }, [ref, scrollIntoView])\n\n  const isLoading = !chatResponseText && !chatErrorReason\n\n  const traceMessages = useMemo(\n    () =>\n      (chatResponseTrace ?? [])\n        .flatMap(traceEvent => extractMessageFromTraceEvent(traceEvent))\n        ?.filter(trace => !!trace),\n    [chatResponseTrace],\n  )\n\n  const hasTraceInfo = traceMessages.length > 0\n\n  const lastReasoningMessage = useMemo(\n    () => traceMessages.filter(trace => 'reasoningText' in trace).at(-1),\n    [traceMessages],\n  )\n\n  const traceButtonLoadingText =\n    lastReasoningMessage == null\n      ? 'Thinking...'\n      : lastReasoningMessage.reasoningText\n\n  const traceButtonText = isLoading\n    ? traceButtonLoadingText\n    : `${showTrace ? 'Hide' : 'Show'} Trace`\n\n  const { textContent, guidePrompts } = useMemo(() => {\n    try {\n      const parser = new DOMParser()\n      const doc = parser.parseFromString(chatResponseText ?? '', 'text/html')\n\n      // Remove tool_name and actions elements (AI XML tags not for display)\n      doc\n        .querySelectorAll('tool_name, actions')\n        .forEach(element => element.remove())\n\n      // Extract guideprompts before removing them\n      const extractedGuidePrompts = Array.from(\n        doc.querySelectorAll('guideprompt'),\n      )\n        .map(el => el.textContent?.trim())\n        .filter((t): t is string => !!t)\n\n      // Remove guideprompt elements\n      doc.querySelectorAll('guideprompt').forEach(element => element.remove())\n\n      // Extract text from <chat> element if present, otherwise use full body text\n      const chatElement = doc.querySelector('chat')\n      return {\n        textContent: chatElement\n          ? (chatElement.textContent ?? '')\n          : (doc.body.textContent ?? ''),\n        guidePrompts: extractedGuidePrompts,\n      }\n    } catch (e) {\n      console.error(e)\n      return { textContent: chatResponseText ?? '', guidePrompts: [] }\n    }\n  }, [chatResponseText])\n\n  return (\n    <>\n      <ListItem\n        ref={ref}\n        sx={{\n          alignSelf: 'flex-end',\n          backgroundColor: (theme.palette.secondary as unknown as Color)[100],\n          borderRadius: '24px',\n          maxWidth: '70%',\n          display: 'block',\n          mb: '5px',\n          p: '8px 12px',\n          wordWrap: 'break-word',\n          width: 'auto',\n        }}\n      >\n        <ListItemText primary={userMessage} />\n      </ListItem>\n      <ListItem\n        sx={{\n          display: 'grid',\n          gridTemplateColumns: '50px auto',\n          columnGap: '0px',\n          justifyItems: 'center',\n          alignItems: 'start',\n          p: '0px',\n        }}\n      >\n        <Box\n          sx={{\n            p: '3px',\n            mt: '10px',\n            height: '31px',\n            borderRadius: '50%',\n            borderStyle: 'solid',\n            borderWidth: '1px',\n            borderColor: 'grey.300',\n          }}\n        >\n          <SmartToyTwoTone sx={{ color: 'secondary.main' }} />\n        </Box>\n        <Box\n          sx={{\n            borderRadius: '10px',\n            padding: '10px',\n            maxWidth: '100%',\n            overflow: 'auto',\n          }}\n        >\n          <Box\n            component={'aside'}\n            sx={{\n              '.markdown': {\n                fontStyle: 'italic',\n                borderLeft: `4px solid ${theme.palette.grey[300]}`,\n                marginLeft: '4px',\n                paddingLeft: '8px',\n                mt: 1,\n                mb: 2,\n              },\n            }}\n          >\n            <Button\n              variant={'outlined'}\n              size={'small'}\n              startIcon={\n                isLoading ? (\n                  <SynapseSpinner size={14} />\n                ) : showTrace ? (\n                  <KeyboardArrowDown sx={{ width: '14px' }} />\n                ) : (\n                  <KeyboardArrowRight sx={{ width: '14px' }} />\n                )\n              }\n              disabled={!hasTraceInfo}\n              onClick={() => {\n                setShowTrace(v => !v)\n              }}\n              sx={{\n                height: '20px',\n                fontSize: '12px',\n                fontWeight: 600,\n                mb: 1,\n                border: 'none !important',\n                color: 'grey.700',\n                justifyContent: 'flex-start',\n                whiteSpace: 'nowrap',\n                maxWidth: '325px',\n                textTransform: 'none',\n                pl: 0,\n                '.MuiButton-startIcon': { mr: 0.5 },\n              }}\n            >\n              <Box sx={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>\n                {traceButtonText}\n              </Box>\n            </Button>\n            {chatResponseTrace && (\n              <Collapse in={showTrace}>\n                <MarkdownSynapse\n                  markdown={traceMessages\n                    .map(getMarkdownForTraceMessage)\n                    .filter(md => md.trim().length > 0)\n                    .join('<br/><br/>')}\n                />\n              </Collapse>\n            )}\n          </Box>\n          {textContent && <MarkdownSynapse markdown={textContent} />}\n          {onSendChat && guidePrompts.length > 0 && (\n            <Stack direction=\"row\" flexWrap=\"wrap\" gap={1} mt={1}>\n              {guidePrompts.map(prompt => (\n                <Tooltip key={prompt} title={prompt}>\n                  <Chip\n                    label={prompt}\n                    variant=\"outlined\"\n                    color=\"primary\"\n                    clickable\n                    onClick={() => onSendChat(prompt)}\n                    sx={{ maxWidth: 200 }}\n                  />\n                </Tooltip>\n              ))}\n            </Stack>\n          )}\n        </Box>\n      </ListItem>\n      {chatErrorReason && (\n        <Alert severity={'error'} sx={{ my: 2 }}>\n          {chatErrorReason}\n        </Alert>\n      )}\n    </>\n  )\n}\n\nexport default SynapseChatInteraction\n"],"mappings":"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"}
+{"version":3,"file":"SynapseChatInteraction.js","names":[],"sources":["../../../src/components/SynapseChat/SynapseChatInteraction.tsx"],"sourcesContent":["import { SynapseSpinner } from '@/components/LoadingScreen/LoadingScreen'\nimport extractMessageFromTraceEvent, {\n  TraceMessage,\n} from '@/components/SynapseChat/extractMessageFromTraceEvent'\nimport { 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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"}

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

@@ -0,0 +1,8 @@
+import './SynapseChatInteraction.css';var e = {
+	entryAnimation: "_entryAnimation_14na6_11",
+	chatInteractionEntry: "_chatInteractionEntry_14na6_1"
+};
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=SynapseChatInteraction.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SynapseChatInteraction.module.js","names":[],"sources":["../../../src/components/SynapseChat/SynapseChatInteraction.module.scss"],"sourcesContent":["// Entry animation for a chat bubble/response block mounting.\n$entry-duration: 500ms;\n$entry-easing: cubic-bezier(0.2, 0, 0, 1);\n$entry-translate-y: 10px;\n\n@keyframes chatInteractionEntry {\n  from {\n    opacity: 0;\n    transform: translateY($entry-translate-y);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n.entryAnimation {\n  animation: chatInteractionEntry $entry-duration $entry-easing;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .entryAnimation {\n    animation: none;\n  }\n}\n"],"mappings":""}

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

@@ -0,0 +1,25 @@
+// Entry animation for a chat bubble/response block mounting.
+$entry-duration: 500ms;
+$entry-easing: cubic-bezier(0.2, 0, 0, 1);
+$entry-translate-y: 10px;
+
+@keyframes chatInteractionEntry {
+  from {
+    opacity: 0;
+    transform: translateY($entry-translate-y);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.entryAnimation {
+  animation: chatInteractionEntry $entry-duration $entry-easing;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .entryAnimation {
+    animation: none;
+  }
+}

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

@@ -1,6 +1,21 @@
+import { ChatAttachment } from './utils/types';
 type SynapseChatMessageProps = {
-    chatJobId: string;
+    agentAvatar: React.ReactNode;
+    userAvatar: React.ReactNode;
+    /** Known at send time; never re-derived from the polled job so the bubble never renders empty. */
+    userMessage: string;
+    /** Undefined until the async job has been registered for this interaction. */
+    chatJobId?: string;
     onSendChat?: (message: string) => void;
+    scrollIntoView?: boolean;
+    animateEntry?: boolean;
+    isAwaitingResponse?: 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
+     * chips in the message bubble until the response arrives.
+     */
+    pendingAttachments?: ChatAttachment[];
 };
 export default function SynapseChatMessage(props: SynapseChatMessageProps): import("react/jsx-runtime").JSX.Element;
 export {};

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":"AA8CA,KAAK,uBAAuB,GAAG;IAC7B,SAAS,EAAE,MAAM,CAAA;IACjB,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;CACvC,CAAA;AAED,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,2CAyBxE"}
+{"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"}

package/dist/components/SynapseChat/SynapseChatMessage.js

@@ -7,26 +7,40 @@ import { jsx as o } from "react/jsx-runtime";
 function s(t, n) {
 	let [o, s] = a([]), c = r((e) => {
 		s((t) => [...t, ...e]);
-	}, []), { data: l } = e({
-		jobId: t,
-		newerThanTimestamp: o.at(o.length - 1)?.timestamp
+	}, []), l = o.at(o.length - 1), { data: u } = e({
+		jobId: t ?? "",
+		newerThanTimestamp: l?.timestamp
 	}, {
 		enabled: n,
 		refetchInterval: 1e3,
 		refetchIntervalInBackground: !0
 	});
 	return i(() => {
-		l && l.page.length > 0 && (c(l.page), console.debug(l.page));
-	}, [c, l]), { traceEvents: o };
+		u && u.page.length > 0 && (c(u.page), console.debug(u.page));
+	}, [c, u]), { traceEvents: o };
 }
 function c(e) {
-	let { chatJobId: r, onSendChat: i } = e, { data: a } = n(r), c = a?.requestBody, l = a?.responseBody, u = a?.errorMessage, { traceEvents: d } = s(r, !!r && (!a?.jobState || a.jobState == "PROCESSING"));
+	let { userMessage: r, chatJobId: i, onSendChat: a, agentAvatar: c, userAvatar: l, scrollIntoView: u, animateEntry: d, isAwaitingResponse: f, pendingAttachments: p } = e, { data: m } = n(i), h = m?.requestBody, g = m?.responseBody, _ = m?.errorMessage, { traceEvents: v } = s(i, !!i && (!m?.jobState || m.jobState == "PROCESSING")), y = h?.attachments?.map((e) => {
+		let t = e.fileHandleId, n = g?.attachmentStatuses?.find((e) => e.fileHandleId === t), r = p?.find((e) => e.fileHandleId === t);
+		return {
+			fileHandleId: t,
+			fileName: n?.fileName ?? r?.fileName,
+			contentType: n?.contentType ?? r?.contentType
+		};
+	}) ?? p;
 	return /* @__PURE__ */ o(t, {
-		userMessage: c?.chatText,
-		chatResponseText: l?.responseText,
-		chatResponseTrace: d,
-		chatErrorReason: u,
-		onSendChat: i
+		agentAvatar: c,
+		userAvatar: l,
+		userMessage: r,
+		chatResponseText: g?.responseText,
+		chatResponseTrace: v,
+		chatErrorReason: _,
+		onSendChat: a,
+		scrollIntoView: u,
+		animateEntry: d,
+		isAwaitingResponse: f,
+		attachments: y,
+		attachmentStatuses: g?.attachmentStatuses
 	});
 }
 //#endregion

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

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

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

@@ -0,0 +1,27 @@
+import { UploaderState } from '@/utils/hooks/useUploadFileEntity/useUploadFiles';
+import { ChatAttachment } from '../../utils/types';
+export declare const ALLOWED_FILE_TYPES_LABEL: string;
+export type AddFilesDialogProps = {
+    open: boolean;
+    /**
+     * Invoked when the dialog should close (Cancel, Done, backdrop click, or the close button).
+     * Attachments that finished uploading while the dialog was open remain attached -- both
+     * buttons close the dialog the same way; removing an attachment is done via its chip's own
+     * remove control in the strip, not through this dialog.
+     */
+    onClose: () => void;
+    /** The number of attachments already attached, used to enforce the max attachment count cumulatively. */
+    currentAttachmentCount: number;
+    /** Invoked once per file, in upload-completion order, as each upload finishes. */
+    onAttachmentUploaded: (attachment: ChatAttachment) => void;
+    /** Invoked whenever the uploader's state changes, so the caller can disable Send while uploading. */
+    onUploadStateChange?: (state: UploaderState) => void;
+};
+/**
+ * Modal for attaching local files to a Curie chat message. Files are uploaded immediately on
+ * selection (see BasicFileHandleUpload); this dialog is a thin wrapper that applies the chat
+ * attachment limits and surfaces validation errors inline.
+ */
+export declare function AddFilesDialog({ open, onClose, currentAttachmentCount, onAttachmentUploaded, onUploadStateChange, }: AddFilesDialogProps): import("react/jsx-runtime").JSX.Element;
+export default AddFilesDialog;
+//# sourceMappingURL=AddFilesDialog.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AddFilesDialog.d.ts","sourceRoot":"","sources":["../../../../../src/components/SynapseChat/components/AddFilesDialog/AddFilesDialog.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,aAAa,EAAE,MAAM,kDAAkD,CAAA;AAUhF,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAMlD,eAAO,MAAM,wBAAwB,QAEzB,CAAA;AAEZ,MAAM,MAAM,mBAAmB,GAAG;IAChC,IAAI,EAAE,OAAO,CAAA;IACb;;;;;OAKG;IACH,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,yGAAyG;IACzG,sBAAsB,EAAE,MAAM,CAAA;IAC9B,kFAAkF;IAClF,oBAAoB,EAAE,CAAC,UAAU,EAAE,cAAc,KAAK,IAAI,CAAA;IAC1D,qGAAqG;IACrG,mBAAmB,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAA;CACrD,CAAA;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,EAC7B,IAAI,EACJ,OAAO,EACP,sBAAsB,EACtB,oBAAoB,EACpB,mBAAmB,GACpB,EAAE,mBAAmB,2CA2DrB;AAED,eAAe,cAAc,CAAA"}

package/dist/components/SynapseChat/components/AddFilesDialog/AddFilesDialog.js

@@ -0,0 +1,79 @@
+import { DialogBase as e } from "../../../DialogBase.js";
+import { BasicFileHandleUpload as t } from "../../../file/upload/BasicFileHandleUpload.js";
+import { getContentTypeLabel as n } from "../AttachmentChip/AttachmentChip.js";
+import { APPROVED_ATTACHMENT_CONTENT_TYPES as r, MAX_ATTACHMENT_FILE_SIZE_BYTES as i } from "../../utils/constants.js";
+import { useRef as a, useState as o } from "react";
+import { Alert as s, Button as c, Typography as l } from "@mui/material";
+import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
+//#region src/components/SynapseChat/components/AddFilesDialog/AddFilesDialog.tsx
+var p = Math.round(i / (1024 * 1024)), m = r.map((e) => n(e).toLowerCase()).join(", ");
+function h({ open: n, onClose: h, currentAttachmentCount: g, onAttachmentUploaded: _, onUploadStateChange: v }) {
+	let [y, b] = o(null);
+	return /* @__PURE__ */ d(e, {
+		open: n,
+		onCancel: h,
+		title: "Add files",
+		maxWidth: "sm",
+		content: /* @__PURE__ */ f(u, { children: [
+			/* @__PURE__ */ d(t, {
+				ref: a(null),
+				allowMultipleUpload: !0,
+				disableFolderUpload: !0,
+				disableDragAndDrop: !0,
+				acceptedContentTypes: r,
+				maxFileSizeBytes: i,
+				maxFiles: 20,
+				currentFileCount: g,
+				onValidationError: b,
+				onStateChange: v,
+				onFileUploadComplete: (e, t) => {
+					_({
+						fileHandleId: e,
+						fileName: t.name,
+						contentType: t.type,
+						sizeBytes: t.size
+					});
+				}
+			}),
+			/* @__PURE__ */ d(l, {
+				sx: {
+					fontWeight: 700,
+					mt: 2
+				},
+				children: "Limitations"
+			}),
+			/* @__PURE__ */ f(l, {
+				component: "ul",
+				sx: {
+					pl: 3,
+					m: 0
+				},
+				children: [/* @__PURE__ */ f("li", { children: [
+					20,
+					" files maximum, up to",
+					" ",
+					p,
+					" MB per file"
+				] }), /* @__PURE__ */ f("li", { children: ["Allowed file types: ", m] })]
+			}),
+			y && /* @__PURE__ */ d(s, {
+				severity: "error",
+				sx: { mt: 2 },
+				children: y
+			})
+		] }),
+		actions: /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d(c, {
+			variant: "outlined",
+			onClick: h,
+			children: "Cancel"
+		}), /* @__PURE__ */ d(c, {
+			variant: "contained",
+			onClick: h,
+			children: "Done"
+		})] })
+	});
+}
+//#endregion
+export { m as ALLOWED_FILE_TYPES_LABEL, h as AddFilesDialog, h as default };
+
+//# sourceMappingURL=AddFilesDialog.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AddFilesDialog.js","names":[],"sources":["../../../../../src/components/SynapseChat/components/AddFilesDialog/AddFilesDialog.tsx"],"sourcesContent":["import {\n  BasicFileHandleUpload,\n  FileUploadHandle,\n} from '@/components/file/upload/BasicFileHandleUpload'\nimport { UploaderState } from '@/utils/hooks/useUploadFileEntity/useUploadFiles'\nimport { Alert, Button, Typography } from '@mui/material'\nimport { useRef, useState } from 'react'\nimport { DialogBase } from '@/components/DialogBase'\nimport { getContentTypeLabel } from '../AttachmentChip/AttachmentChip'\nimport {\n  APPROVED_ATTACHMENT_CONTENT_TYPES,\n  MAX_AGENT_CHAT_ATTACHMENTS,\n  MAX_ATTACHMENT_FILE_SIZE_BYTES,\n} from '../../utils/constants'\nimport { ChatAttachment } from '../../utils/types'\n\nconst MAX_FILE_SIZE_MB = Math.round(\n  MAX_ATTACHMENT_FILE_SIZE_BYTES / (1024 * 1024),\n)\n\nexport const ALLOWED_FILE_TYPES_LABEL = APPROVED_ATTACHMENT_CONTENT_TYPES.map(\n  contentType => getContentTypeLabel(contentType).toLowerCase(),\n).join(', ')\n\nexport type AddFilesDialogProps = {\n  open: boolean\n  /**\n   * Invoked when the dialog should close (Cancel, Done, backdrop click, or the close button).\n   * Attachments that finished uploading while the dialog was open remain attached -- both\n   * buttons close the dialog the same way; removing an attachment is done via its chip's own\n   * remove control in the strip, not through this dialog.\n   */\n  onClose: () => void\n  /** The number of attachments already attached, used to enforce the max attachment count cumulatively. */\n  currentAttachmentCount: number\n  /** Invoked once per file, in upload-completion order, as each upload finishes. */\n  onAttachmentUploaded: (attachment: ChatAttachment) => void\n  /** Invoked whenever the uploader's state changes, so the caller can disable Send while uploading. */\n  onUploadStateChange?: (state: UploaderState) => void\n}\n\n/**\n * Modal for attaching local files to a Curie chat message. Files are uploaded immediately on\n * selection (see BasicFileHandleUpload); this dialog is a thin wrapper that applies the chat\n * attachment limits and surfaces validation errors inline.\n */\nexport function AddFilesDialog({\n  open,\n  onClose,\n  currentAttachmentCount,\n  onAttachmentUploaded,\n  onUploadStateChange,\n}: AddFilesDialogProps) {\n  const [validationError, setValidationError] = useState<string | null>(null)\n  const uploadRef = useRef<FileUploadHandle | null>(null)\n\n  return (\n    <DialogBase\n      open={open}\n      onCancel={onClose}\n      title=\"Add files\"\n      maxWidth=\"sm\"\n      content={\n        <>\n          <BasicFileHandleUpload\n            ref={uploadRef}\n            allowMultipleUpload={true}\n            disableFolderUpload={true}\n            disableDragAndDrop={true}\n            acceptedContentTypes={APPROVED_ATTACHMENT_CONTENT_TYPES}\n            maxFileSizeBytes={MAX_ATTACHMENT_FILE_SIZE_BYTES}\n            maxFiles={MAX_AGENT_CHAT_ATTACHMENTS}\n            currentFileCount={currentAttachmentCount}\n            onValidationError={setValidationError}\n            onStateChange={onUploadStateChange}\n            onFileUploadComplete={(fileHandleId, file) => {\n              onAttachmentUploaded({\n                fileHandleId,\n                fileName: file.name,\n                contentType: file.type,\n                sizeBytes: file.size,\n              })\n            }}\n          />\n          <Typography sx={{ fontWeight: 700, mt: 2 }}>Limitations</Typography>\n          <Typography component=\"ul\" sx={{ pl: 3, m: 0 }}>\n            <li>\n              {MAX_AGENT_CHAT_ATTACHMENTS} files maximum, up to{' '}\n              {MAX_FILE_SIZE_MB} MB per file\n            </li>\n            <li>Allowed file types: {ALLOWED_FILE_TYPES_LABEL}</li>\n          </Typography>\n          {validationError && (\n            <Alert severity=\"error\" sx={{ mt: 2 }}>\n              {validationError}\n            </Alert>\n          )}\n        </>\n      }\n      actions={\n        <>\n          <Button variant=\"outlined\" onClick={onClose}>\n            Cancel\n          </Button>\n          <Button variant=\"contained\" onClick={onClose}>\n            Done\n          </Button>\n        </>\n      }\n    />\n  )\n}\n\nexport default AddFilesDialog\n"],"mappings":";;;;;;;;AAgBA,IAAM,IAAmB,KAAK,MAC5B,KAAkC,OAAO,KAC3C,GAEa,IAA2B,EAAkC,KACxE,MAAe,EAAoB,CAAW,EAAE,YAAY,CAC9D,EAAE,KAAK,IAAI;AAwBX,SAAgB,EAAe,EAC7B,SACA,YACA,2BACA,yBACA,0BACsB;CACtB,IAAM,CAAC,GAAiB,KAAsB,EAAwB,IAAI;CAG1E,OACE,kBAAC,GAAD;EACQ;EACN,UAAU;EACV,OAAM;EACN,UAAS;EACT,SACE,kBAAA,GAAA,EAAA,UAAA;GACE,kBAAC,GAAD;IACE,KAXQ,EAAgC,IAWnC;IACL,qBAAqB;IACrB,qBAAqB;IACrB,oBAAoB;IACpB,sBAAsB;IACtB,kBAAkB;IAClB,UAAA;IACA,kBAAkB;IAClB,mBAAmB;IACnB,eAAe;IACf,uBAAuB,GAAc,MAAS;KAC5C,EAAqB;MACnB;MACA,UAAU,EAAK;MACf,aAAa,EAAK;MAClB,WAAW,EAAK;KAClB,CAAC;IACH;GACD,CAAA;GACD,kBAAC,GAAD;IAAY,IAAI;KAAE,YAAY;KAAK,IAAI;IAAE;cAAG;GAAuB,CAAA;GACnE,kBAAC,GAAD;IAAY,WAAU;IAAK,IAAI;KAAE,IAAI;KAAG,GAAG;IAAE;cAA7C,CACE,kBAAC,MAAD,EAAA,UAAA;;KAC8B;KAAsB;KACjD;KAAiB;IAChB,EAAA,CAAA,GACJ,kBAAC,MAAD,EAAA,UAAA,CAAI,wBAAqB,CAA6B,EAAA,CAAA,CAC5C;;GACX,KACC,kBAAC,GAAD;IAAO,UAAS;IAAQ,IAAI,EAAE,IAAI,EAAE;cACjC;GACI,CAAA;EAET,EAAA,CAAA;EAEJ,SACE,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD;GAAQ,SAAQ;GAAW,SAAS;aAAS;EAErC,CAAA,GACR,kBAAC,GAAD;GAAQ,SAAQ;GAAY,SAAS;aAAS;EAEtC,CAAA,CACR,EAAA,CAAA;CAEL,CAAA;AAEL"}

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

@@ -0,0 +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}