synapse-react-client 4.0.2 → 4.0.4

package/dist/components/SynapseChat/SynapseChat.js

@@ -1,9 +1,9 @@
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import { useChatState as J } from "./useChatState.js";
-import { useCreateAgentSession as $, useUpdateAgentSession as z } from "../../synapse-queries/chat/useChat.js";
+import { jsx as t, jsxs as i } from "react/jsx-runtime";
+import { useChatState as $ } from "./useChatState.js";
+import { useCreateAgentSession as z, useUpdateAgentSession as F } from "../../synapse-queries/chat/useChat.js";
 import "../../utils/PermissionLevelToAccessType.js";
 import "../../utils/SynapseConstants.js";
-import { useState as i, useEffect as b } from "react";
+import { useState as a, useEffect as b } from "react";
 import "../../synapse-client/SynapseClient.js";
 import "@sage-bionetworks/synapse-client/generated/models/ErrorResponseCode";
 import "@sage-bionetworks/synapse-client/generated/models/TwoFactorAuthErrorResponse";
@@ -12,14 +12,14 @@ import { AgentAccessLevel as T } from "@sage-bionetworks/synapse-types";
 import "../../utils/functions/EntityTypeUtils.js";
 import "lodash-es";
 import "@sage-bionetworks/synapse-client/util/synapseClientFetch";
-import { useSynapseContext as F } from "../../utils/context/SynapseContext.js";
+import { useSynapseContext as G } from "../../utils/context/SynapseContext.js";
 import "use-deep-compare-effect";
 import "@tanstack/react-query";
 import "@tanstack/query-core";
 import "lodash-es/isEmpty";
 import "lodash-es/isEqual";
 import "lodash-es/xorWith";
-import { useTheme as G, Alert as O, Box as a, Typography as k, List as q, TextField as H, IconButton as Q } from "@mui/material";
+import { useTheme as O, Alert as q, Box as p, Typography as k, List as H, TextField as Q, IconButton as X } from "@mui/material";
 import "@sage-bionetworks/synapse-client";
 import "../../utils/types/IsType.js";
 import "../../utils/hooks/useCookiePreferences.js";
@@ -30,59 +30,60 @@ import "../../utils/context/FullContextProvider.js";
 import "../../utils/context/DocumentMetadataContext.js";
 import '../../style/components/_spinner.css';/* empty css                                   */
 import "react-router";
-import { ArrowUpward as X } from "@mui/icons-material";
+import { ArrowUpward as Z } from "@mui/icons-material";
 import "@mui/material/Skeleton";
-import { SkeletonParagraph as Z } from "../Skeleton/SkeletonParagraph.js";
-import { displayToast as N } from "../ToastMessage/ToastMessage.js";
-import { AccessLevelMenu as ee } from "./AccessLevelMenu.js";
-import { SynapseChatInteraction as te } from "./SynapseChatInteraction.js";
-import oe from "./SynapseChatMessage.js";
-function Je({
-  initialMessage: p,
+import { SkeletonParagraph as N } from "../Skeleton/SkeletonParagraph.js";
+import { displayToast as ee } from "../ToastMessage/ToastMessage.js";
+import { AccessLevelMenu as te } from "./AccessLevelMenu.js";
+import { SynapseChatInteraction as oe } from "./SynapseChatInteraction.js";
+import re from "./SynapseChatMessage.js";
+function $e({
+  initialMessage: m,
   agentRegistrationId: f,
-  chatbotName: m = "SynapseChat",
+  chatbotName: l = "SynapseChat",
   hideTitle: v = !1,
   textboxPositionOffset: w = "0px",
-  sessionContext: l,
+  sessionContext: c,
   externalSession: I,
   setExternalSession: L,
   externalChatState: E,
-  showAccessLevelMenu: D = !0
+  showAccessLevelMenu: D = !0,
+  onChatResponse: M
 }) {
-  const { accessToken: M } = F(), [B, P] = i(), o = I ?? B, g = L ?? P, { mutate: c, error: S } = $({
+  const { accessToken: B } = G(), [P, R] = a(), o = I ?? P, g = L ?? R, { mutate: d, error: S } = z({
     onSuccess: (e) => g(e)
-  }), { mutate: R } = z({
+  }), { mutate: U } = F({
     onSuccess: (e) => g(e),
-    onError: (e) => N(
+    onError: (e) => ee(
       `Unable to update the agent session: ${e.message}`,
       "danger"
     )
-  }), U = G(), [d, V] = i(
-    l ? T.WRITE_YOUR_PRIVATE_DATA : T.PUBLICLY_ACCESSIBLE
-  ), W = J(o), Y = E ?? W, { pendingMessage: u, chatJobIds: _, sendChat: x } = Y, [r, y] = i(""), [A, K] = i(!1);
+  }), V = O(), [u, W] = a(
+    c ? T.WRITE_YOUR_PRIVATE_DATA : T.PUBLICLY_ACCESSIBLE
+  ), Y = $(o, M), _ = E ?? Y, { pendingMessage: x, chatJobIds: K, sendChat: r } = _, [s, y] = a(""), [C, j] = a(!1);
   b(() => {
-    c && !o && c({
-      agentAccessLevel: d,
+    d && !o && d({
+      agentAccessLevel: u,
       agentRegistrationId: f,
-      sessionContext: l
+      sessionContext: c
     });
   }, [
-    c,
-    o,
-    M,
-    l,
     d,
+    o,
+    B,
+    c,
+    u,
     f
   ]), b(() => {
-    o && p && !A && (x(p), K(!0));
-  }, [o, p, A, x]);
+    o && m && !C && (r(m), j(!0));
+  }, [o, m, C, r]);
   const h = () => {
-    r.trim() && (x(r.trim()), y(""));
-  }, s = !o || !r || !!u, j = (e) => {
-    !s && e.key === "Enter" && !e.shiftKey && (e.preventDefault(), h());
-  }, C = U.palette.secondary[300];
-  return S ? /* @__PURE__ */ t(O, { severity: "error", sx: { my: 2 }, children: S.reason }) : /* @__PURE__ */ n(
-    a,
+    s.trim() && (r(s.trim()), y(""));
+  }, n = !o || !s || !!x, J = (e) => {
+    !n && e.key === "Enter" && !e.shiftKey && (e.preventDefault(), h());
+  }, A = V.palette.secondary[300];
+  return S ? /* @__PURE__ */ t(q, { severity: "error", sx: { my: 2 }, children: S.reason }) : /* @__PURE__ */ i(
+    p,
     {
       sx: {
         display: "flex",
@@ -106,24 +107,24 @@ function Je({
               backgroundColor: "white",
               zIndex: 1
             },
-            children: m
+            children: l
           }
         ),
         D && /* @__PURE__ */ t(
-          ee,
+          te,
           {
-            initAccessLevel: d,
+            initAccessLevel: u,
             onChange: (e) => {
-              V(e), R({
+              W(e), U({
                 agentAccessLevel: e,
                 sessionId: o.sessionId
               });
             }
           }
         ),
-        !o && /* @__PURE__ */ t(Z, { numRows: 10 }),
-        o && /* @__PURE__ */ t(a, { sx: { flexGrow: 1, overflowY: "auto", mb: 2 }, children: /* @__PURE__ */ n(
-          q,
+        !o && /* @__PURE__ */ t(N, { numRows: 10 }),
+        o && /* @__PURE__ */ t(p, { sx: { flexGrow: 1, overflowY: "auto", mb: 2 }, children: /* @__PURE__ */ i(
+          H,
           {
             sx: {
               flex: 1,
@@ -133,29 +134,37 @@ function Je({
               flexDirection: "column"
             },
             children: [
-              _.map((e) => /* @__PURE__ */ t(oe, { chatJobId: e }, e)),
-              u && /* @__PURE__ */ t(
-                te,
+              K.map((e) => /* @__PURE__ */ t(
+                re,
+                {
+                  chatJobId: e,
+                  onSendChat: r
+                },
+                e
+              )),
+              x && /* @__PURE__ */ t(
+                oe,
                 {
-                  userMessage: u,
+                  userMessage: x,
                   chatResponseText: "",
                   chatErrorReason: "",
-                  scrollIntoView: !0
+                  scrollIntoView: !0,
+                  onSendChat: r
                 }
               )
             ]
           }
         ) }),
         /* @__PURE__ */ t(
-          a,
+          p,
           {
             sx: {
               position: "sticky",
               bottom: w,
               backgroundColor: "white"
             },
-            children: /* @__PURE__ */ n(
-              a,
+            children: /* @__PURE__ */ i(
+              p,
               {
                 component: "form",
                 sx: {
@@ -169,43 +178,43 @@ function Je({
                 onSubmit: h,
                 children: [
                   /* @__PURE__ */ t(
-                    H,
+                    Q,
                     {
                       fullWidth: !0,
-                      value: r,
+                      value: s,
                       onChange: (e) => y(e.target.value),
-                      onKeyDown: j,
-                      placeholder: `Message ${m}`,
+                      onKeyDown: J,
+                      placeholder: `Message ${l}`,
                       slotProps: {
                         input: {
                           sx: { borderRadius: 96.6 },
                           endAdornment: /* @__PURE__ */ t(
-                            Q,
+                            X,
                             {
-                              disabled: s,
+                              disabled: n,
                               onClick: h,
                               sx: {
                                 ml: "7px",
                                 mr: "-8px",
-                                color: C,
+                                color: A,
                                 borderStyle: "solid",
-                                borderWidth: s ? "1px" : "2px",
-                                borderColor: s ? "gray" : C
+                                borderWidth: n ? "1px" : "2px",
+                                borderColor: n ? "gray" : A
                               },
-                              children: /* @__PURE__ */ t(X, {})
+                              children: /* @__PURE__ */ t(Z, {})
                             }
                           )
                         }
                       }
                     }
                   ),
-                  /* @__PURE__ */ n(
+                  /* @__PURE__ */ i(
                     k,
                     {
                       variant: "smallText1",
                       sx: { pt: "8px", textAlign: "center" },
                       children: [
-                        m,
+                        l,
                         " can make mistakes."
                       ]
                     }
@@ -220,7 +229,7 @@ function Je({
   );
 }
 export {
-  Je as SynapseChat,
-  Je as default
+  $e as SynapseChat,
+  $e as default
 };
 //# sourceMappingURL=SynapseChat.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SynapseChat.js","sources":["../../../src/components/SynapseChat/SynapseChat.tsx"],"sourcesContent":["import { ChatState, useChatState } from '@/components/SynapseChat/useChatState'\nimport {\n  useCreateAgentSession,\n  useUpdateAgentSession,\n} from '@/synapse-queries/chat/useChat'\nimport { useSynapseContext } from '@/utils'\nimport { ArrowUpward } from '@mui/icons-material'\nimport {\n  Alert,\n  Box,\n  IconButton,\n  List,\n  TextField,\n  Typography,\n  useTheme,\n} from '@mui/material'\nimport { Color } from '@mui/material/styles'\nimport { GridAgentSessionContext } from '@sage-bionetworks/synapse-client'\nimport {\n  AgentAccessLevel,\n  AgentSession,\n  TraceEvent,\n} from '@sage-bionetworks/synapse-types'\nimport { KeyboardEventHandler, useEffect, useState } from 'react'\nimport { SkeletonParagraph } from '../Skeleton'\nimport { displayToast } from '../ToastMessage'\nimport AccessLevelMenu from './AccessLevelMenu'\nimport SynapseChatInteraction from './SynapseChatInteraction'\nimport SynapseChatMessage from './SynapseChatMessage'\n\nexport type SynapseChatProps = {\n  initialMessage?: string //optional initial message\n  agentRegistrationId?: string // if provided, use this agent\n  chatbotName?: string // optional name of this chatbot agent\n  hideTitle?: boolean\n  textboxPositionOffset?: string // when embedded in a form, the textbox (form) stuck to the bottom may need to be offset due to container padding (dialog content for example!)\n  /* optional session context for the agent session */\n  sessionContext?: GridAgentSessionContext\n  /* The current session, if state is lifted out of this component */\n  externalSession?: AgentSession\n  /* A callback invoked to bootstrap the current session, if state is to be lifted out of this component */\n  setExternalSession?: (s: AgentSession | undefined) => void\n  /* The current chat history, if state is lifted out of this component */\n  externalChatState?: ChatState\n  // default access level for the agent session.\n  defaultAgentAccessLevel?: AgentAccessLevel\n  // Whether to show the access level menu for the agent session.\n  showAccessLevelMenu?: boolean\n}\n\nexport type ChatInteraction = {\n  userMessage: string\n  chatResponseText?: string\n  chatErrorReason?: string\n  chatResponseTrace?: TraceEventWithFriendlyMessage[]\n}\n\nexport type TraceEventWithFriendlyMessage = {\n  friendlyMessage?: string\n} & TraceEvent\n\nexport function SynapseChat({\n  initialMessage,\n  agentRegistrationId,\n  chatbotName = 'SynapseChat',\n  hideTitle = false,\n  textboxPositionOffset = '0px',\n  sessionContext,\n  externalSession,\n  setExternalSession,\n  externalChatState,\n  showAccessLevelMenu = true,\n}: SynapseChatProps) {\n  const { accessToken } = useSynapseContext()\n  const [localAgentSession, setLocalAgentSession] = useState<AgentSession>()\n  const agentSession = externalSession ?? localAgentSession\n  const setAgentSession = setExternalSession ?? setLocalAgentSession\n\n  const { mutate: createAgentSession, error: createAgentSessionError } =\n    useCreateAgentSession({\n      onSuccess: newAgentSession => setAgentSession(newAgentSession),\n    })\n\n  const { mutate: updateAgentSession } = useUpdateAgentSession({\n    onSuccess: updatedAgentSession => setAgentSession(updatedAgentSession),\n    onError: err =>\n      displayToast(\n        `Unable to update the agent session: ${err.message}`,\n        'danger',\n      ),\n  })\n  const theme = useTheme()\n  const [agentAccessLevel, setAgentAccessLevel] = useState<AgentAccessLevel>(\n    sessionContext\n      ? AgentAccessLevel.WRITE_YOUR_PRIVATE_DATA\n      : AgentAccessLevel.PUBLICLY_ACCESSIBLE,\n  )\n\n  const internalChatState = useChatState(agentSession)\n  const chatState = externalChatState ?? internalChatState\n  const { pendingMessage, chatJobIds, sendChat } = chatState\n\n  // Keep track of the text that the user is currently typing into the textfield\n  const [userChatTextfieldValue, setUserChatTextfieldValue] = useState('')\n  const [initialMessageProcessed, setInitialMessageProcessed] = useState(false)\n\n  // Restore chat session history, if exists.\n  // TODO: currently only a single page is restored.  Add support for multiple pages (and detect the user scrolling up to restore the next page of results older)\n  // const {\n  //   data: sessionHistoryInfiniteData,\n  // } = //, hasNextPage: hasMoreSessionHistory, fetchNextPage: fetchNextSessionHistoryPage, isLoading: isSessionHistoryLoading } =\n  //   useGetAgentChatSessionHistoryInfinite(\n  //     {\n  //       sessionId: agentSession?.sessionId,\n  //     },\n  //     {\n  //       enabled: !!agentSession,\n  //     },\n  //   )\n\n  // const sessionHistory = useMemo(\n  //   () =>\n  //     sessionHistoryInfiniteData?.pages\n  //       .flatMap(page => page.page)\n  //       /* Note: session history is ordered from most recent to least recent in each page, so reverse the order when restoring the chat interface */\n  //       .reverse() ?? [],\n  //   [sessionHistoryInfiniteData],\n  // )\n\n  useEffect(() => {\n    // on mount, create a new agent session!\n    if (createAgentSession && !agentSession) {\n      createAgentSession({\n        agentAccessLevel,\n        agentRegistrationId,\n        sessionContext,\n      })\n    }\n  }, [\n    createAgentSession,\n    agentSession,\n    accessToken,\n    sessionContext,\n    agentAccessLevel,\n    agentRegistrationId,\n  ])\n\n  useEffect(() => {\n    // on mount, resolve the initial message chat interaction (if set)\n    if (agentSession && initialMessage && !initialMessageProcessed) {\n      sendChat(initialMessage)\n      setInitialMessageProcessed(true)\n    }\n  }, [agentSession, initialMessage, initialMessageProcessed, sendChat])\n\n  const handleSendMessage = () => {\n    if (userChatTextfieldValue.trim()) {\n      sendChat(userChatTextfieldValue.trim())\n      setUserChatTextfieldValue('')\n    }\n  }\n\n  const isDisabled =\n    !agentSession || !userChatTextfieldValue || !!pendingMessage\n\n  const handleKeyDown: KeyboardEventHandler<HTMLDivElement> = event => {\n    if (!isDisabled && event.key === 'Enter' && !event.shiftKey) {\n      event.preventDefault()\n      handleSendMessage()\n    }\n  }\n\n  const sendMessageButtonColor = (\n    theme.palette.secondary as unknown as Color\n  )[300]\n  if (createAgentSessionError) {\n    return (\n      <Alert severity={'error'} sx={{ my: 2 }}>\n        {createAgentSessionError.reason}\n      </Alert>\n    )\n  }\n\n  return (\n    <Box\n      sx={{\n        display: 'flex',\n        flexDirection: 'column',\n        justifyContent: 'space-between',\n        maxWidth: '1100px',\n        mx: 'auto',\n        height: '100%',\n      }}\n    >\n      {!hideTitle && (\n        <Typography\n          variant=\"headline1\"\n          sx={{\n            p: '20px',\n            borderBottom: '1px solid',\n            borderColor: 'grey.300',\n            position: 'sticky',\n            top: '0px',\n            backgroundColor: 'white',\n            zIndex: 1,\n          }}\n        >\n          {chatbotName}\n        </Typography>\n      )}\n      {showAccessLevelMenu && (\n        <AccessLevelMenu\n          initAccessLevel={agentAccessLevel}\n          onChange={newAccessLevel => {\n            setAgentAccessLevel(newAccessLevel)\n            updateAgentSession({\n              agentAccessLevel: newAccessLevel,\n              sessionId: agentSession!.sessionId,\n            })\n          }}\n        />\n      )}\n      {!agentSession && <SkeletonParagraph numRows={10} />}\n      {agentSession && (\n        <Box sx={{ flexGrow: 1, overflowY: 'auto', mb: 2 }}>\n          <List\n            sx={{\n              flex: 1,\n              overflowY: 'auto',\n              pt: '20px',\n              display: 'flex',\n              flexDirection: 'column',\n            }}\n          >\n            {/* {sessionHistory &&\n            sessionHistory.map((interaction, index) => {\n              return (\n                <SynapseChatInteraction\n                  key={index}\n                  userMessage={interaction.usersRequestText}\n                  chatResponseText={interaction.agentResponseText}\n                />\n              )\n            })} */}\n            {chatJobIds.map(jobId => {\n              return <SynapseChatMessage key={jobId} chatJobId={jobId} />\n            })}\n            {pendingMessage && (\n              <SynapseChatInteraction\n                userMessage={pendingMessage}\n                chatResponseText={''}\n                chatErrorReason={''}\n                scrollIntoView\n              />\n            )}\n          </List>\n        </Box>\n      )}\n      <Box\n        sx={{\n          position: 'sticky',\n          bottom: textboxPositionOffset,\n          backgroundColor: 'white',\n        }}\n      >\n        <Box\n          component=\"form\"\n          sx={{\n            pt: '8px',\n            mt: '5px',\n            pb: '10px',\n            position: 'sticky',\n            borderTop: '1px solid',\n            borderColor: 'grey.400',\n          }}\n          onSubmit={handleSendMessage}\n        >\n          <TextField\n            fullWidth\n            value={userChatTextfieldValue}\n            onChange={e => setUserChatTextfieldValue(e.target.value)}\n            onKeyDown={handleKeyDown}\n            placeholder={`Message ${chatbotName}`}\n            slotProps={{\n              input: {\n                sx: { borderRadius: 96.6 },\n                endAdornment: (\n                  <IconButton\n                    disabled={isDisabled}\n                    onClick={handleSendMessage}\n                    sx={{\n                      ml: '7px',\n                      mr: '-8px',\n                      color: sendMessageButtonColor,\n                      borderStyle: 'solid',\n                      borderWidth: isDisabled ? '1px' : '2px',\n                      borderColor: isDisabled ? 'gray' : sendMessageButtonColor,\n                    }}\n                  >\n                    <ArrowUpward />\n                  </IconButton>\n                ),\n              },\n            }}\n          />\n          <Typography\n            variant=\"smallText1\"\n            sx={{ pt: '8px', textAlign: 'center' }}\n          >\n            {chatbotName} can make mistakes.\n          </Typography>\n        </Box>\n      </Box>\n    </Box>\n  )\n}\n\nexport default SynapseChat\n"],"names":["SynapseChat","initialMessage","agentRegistrationId","chatbotName","hideTitle","textboxPositionOffset","sessionContext","externalSession","setExternalSession","externalChatState","showAccessLevelMenu","accessToken","useSynapseContext","localAgentSession","setLocalAgentSession","useState","agentSession","setAgentSession","createAgentSession","createAgentSessionError","useCreateAgentSession","newAgentSession","updateAgentSession","useUpdateAgentSession","updatedAgentSession","err","displayToast","theme","useTheme","agentAccessLevel","setAgentAccessLevel","AgentAccessLevel","internalChatState","useChatState","chatState","pendingMessage","chatJobIds","sendChat","userChatTextfieldValue","setUserChatTextfieldValue","initialMessageProcessed","setInitialMessageProcessed","useEffect","handleSendMessage","isDisabled","handleKeyDown","event","sendMessageButtonColor","jsx","Alert","jsxs","Box","Typography","AccessLevelMenu","newAccessLevel","SkeletonParagraph","List","jobId","SynapseChatMessage","SynapseChatInteraction","TextField","IconButton","ArrowUpward"],"mappings":"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"}
+{"version":3,"file":"SynapseChat.js","sources":["../../../src/components/SynapseChat/SynapseChat.tsx"],"sourcesContent":["import { ChatState, useChatState } from '@/components/SynapseChat/useChatState'\nimport {\n  useCreateAgentSession,\n  useUpdateAgentSession,\n} from '@/synapse-queries/chat/useChat'\nimport { useSynapseContext } from '@/utils'\nimport { ArrowUpward } from '@mui/icons-material'\nimport {\n  Alert,\n  Box,\n  IconButton,\n  List,\n  TextField,\n  Typography,\n  useTheme,\n} from '@mui/material'\nimport { Color } from '@mui/material/styles'\nimport { GridAgentSessionContext } from '@sage-bionetworks/synapse-client'\nimport {\n  AgentAccessLevel,\n  AgentSession,\n  TraceEvent,\n} from '@sage-bionetworks/synapse-types'\nimport { KeyboardEventHandler, useEffect, useState } from 'react'\nimport { SkeletonParagraph } from '../Skeleton'\nimport { displayToast } from '../ToastMessage'\nimport AccessLevelMenu from './AccessLevelMenu'\nimport SynapseChatInteraction from './SynapseChatInteraction'\nimport SynapseChatMessage from './SynapseChatMessage'\n\nexport type SynapseChatProps = {\n  initialMessage?: string //optional initial message\n  agentRegistrationId?: string // if provided, use this agent\n  chatbotName?: string // optional name of this chatbot agent\n  hideTitle?: boolean\n  textboxPositionOffset?: string // when embedded in a form, the textbox (form) stuck to the bottom may need to be offset due to container padding (dialog content for example!)\n  /* optional session context for the agent session */\n  sessionContext?: GridAgentSessionContext\n  /* The current session, if state is lifted out of this component */\n  externalSession?: AgentSession\n  /* A callback invoked to bootstrap the current session, if state is to be lifted out of this component */\n  setExternalSession?: (s: AgentSession | undefined) => void\n  /* The current chat history, if state is lifted out of this component */\n  externalChatState?: ChatState\n  // default access level for the agent session.\n  defaultAgentAccessLevel?: AgentAccessLevel\n  // Whether to show the access level menu for the agent session.\n  showAccessLevelMenu?: boolean\n  /**\n   * Optional callback invoked once when a chat response is received from the server.\n   * Use this for side effects such as navigation based on the response content.\n   * Called in the mutation onSuccess handler so it runs exactly once per response.\n   */\n  onChatResponse?: (responseText: string) => void\n}\n\nexport type ChatInteraction = {\n  userMessage: string\n  chatResponseText?: string\n  chatErrorReason?: string\n  chatResponseTrace?: TraceEventWithFriendlyMessage[]\n}\n\nexport type TraceEventWithFriendlyMessage = {\n  friendlyMessage?: string\n} & TraceEvent\n\nexport function SynapseChat({\n  initialMessage,\n  agentRegistrationId,\n  chatbotName = 'SynapseChat',\n  hideTitle = false,\n  textboxPositionOffset = '0px',\n  sessionContext,\n  externalSession,\n  setExternalSession,\n  externalChatState,\n  showAccessLevelMenu = true,\n  onChatResponse,\n}: SynapseChatProps) {\n  const { accessToken } = useSynapseContext()\n  const [localAgentSession, setLocalAgentSession] = useState<AgentSession>()\n  const agentSession = externalSession ?? localAgentSession\n  const setAgentSession = setExternalSession ?? setLocalAgentSession\n\n  const { mutate: createAgentSession, error: createAgentSessionError } =\n    useCreateAgentSession({\n      onSuccess: newAgentSession => setAgentSession(newAgentSession),\n    })\n\n  const { mutate: updateAgentSession } = useUpdateAgentSession({\n    onSuccess: updatedAgentSession => setAgentSession(updatedAgentSession),\n    onError: err =>\n      displayToast(\n        `Unable to update the agent session: ${err.message}`,\n        'danger',\n      ),\n  })\n  const theme = useTheme()\n  const [agentAccessLevel, setAgentAccessLevel] = useState<AgentAccessLevel>(\n    sessionContext\n      ? AgentAccessLevel.WRITE_YOUR_PRIVATE_DATA\n      : AgentAccessLevel.PUBLICLY_ACCESSIBLE,\n  )\n\n  const internalChatState = useChatState(agentSession, onChatResponse)\n  const chatState = externalChatState ?? internalChatState\n  const { pendingMessage, chatJobIds, sendChat } = chatState\n\n  // Keep track of the text that the user is currently typing into the textfield\n  const [userChatTextfieldValue, setUserChatTextfieldValue] = useState('')\n  const [initialMessageProcessed, setInitialMessageProcessed] = useState(false)\n\n  // Restore chat session history, if exists.\n  // TODO: currently only a single page is restored.  Add support for multiple pages (and detect the user scrolling up to restore the next page of results older)\n  // const {\n  //   data: sessionHistoryInfiniteData,\n  // } = //, hasNextPage: hasMoreSessionHistory, fetchNextPage: fetchNextSessionHistoryPage, isLoading: isSessionHistoryLoading } =\n  //   useGetAgentChatSessionHistoryInfinite(\n  //     {\n  //       sessionId: agentSession?.sessionId,\n  //     },\n  //     {\n  //       enabled: !!agentSession,\n  //     },\n  //   )\n\n  // const sessionHistory = useMemo(\n  //   () =>\n  //     sessionHistoryInfiniteData?.pages\n  //       .flatMap(page => page.page)\n  //       /* Note: session history is ordered from most recent to least recent in each page, so reverse the order when restoring the chat interface */\n  //       .reverse() ?? [],\n  //   [sessionHistoryInfiniteData],\n  // )\n\n  useEffect(() => {\n    // on mount, create a new agent session!\n    if (createAgentSession && !agentSession) {\n      createAgentSession({\n        agentAccessLevel,\n        agentRegistrationId,\n        sessionContext,\n      })\n    }\n  }, [\n    createAgentSession,\n    agentSession,\n    accessToken,\n    sessionContext,\n    agentAccessLevel,\n    agentRegistrationId,\n  ])\n\n  useEffect(() => {\n    // on mount, resolve the initial message chat interaction (if set)\n    if (agentSession && initialMessage && !initialMessageProcessed) {\n      sendChat(initialMessage)\n      setInitialMessageProcessed(true)\n    }\n  }, [agentSession, initialMessage, initialMessageProcessed, sendChat])\n\n  const handleSendMessage = () => {\n    if (userChatTextfieldValue.trim()) {\n      sendChat(userChatTextfieldValue.trim())\n      setUserChatTextfieldValue('')\n    }\n  }\n\n  const isDisabled =\n    !agentSession || !userChatTextfieldValue || !!pendingMessage\n\n  const handleKeyDown: KeyboardEventHandler<HTMLDivElement> = event => {\n    if (!isDisabled && event.key === 'Enter' && !event.shiftKey) {\n      event.preventDefault()\n      handleSendMessage()\n    }\n  }\n\n  const sendMessageButtonColor = (\n    theme.palette.secondary as unknown as Color\n  )[300]\n  if (createAgentSessionError) {\n    return (\n      <Alert severity={'error'} sx={{ my: 2 }}>\n        {createAgentSessionError.reason}\n      </Alert>\n    )\n  }\n\n  return (\n    <Box\n      sx={{\n        display: 'flex',\n        flexDirection: 'column',\n        justifyContent: 'space-between',\n        maxWidth: '1100px',\n        mx: 'auto',\n        height: '100%',\n      }}\n    >\n      {!hideTitle && (\n        <Typography\n          variant=\"headline1\"\n          sx={{\n            p: '20px',\n            borderBottom: '1px solid',\n            borderColor: 'grey.300',\n            position: 'sticky',\n            top: '0px',\n            backgroundColor: 'white',\n            zIndex: 1,\n          }}\n        >\n          {chatbotName}\n        </Typography>\n      )}\n      {showAccessLevelMenu && (\n        <AccessLevelMenu\n          initAccessLevel={agentAccessLevel}\n          onChange={newAccessLevel => {\n            setAgentAccessLevel(newAccessLevel)\n            updateAgentSession({\n              agentAccessLevel: newAccessLevel,\n              sessionId: agentSession!.sessionId,\n            })\n          }}\n        />\n      )}\n      {!agentSession && <SkeletonParagraph numRows={10} />}\n      {agentSession && (\n        <Box sx={{ flexGrow: 1, overflowY: 'auto', mb: 2 }}>\n          <List\n            sx={{\n              flex: 1,\n              overflowY: 'auto',\n              pt: '20px',\n              display: 'flex',\n              flexDirection: 'column',\n            }}\n          >\n            {/* {sessionHistory &&\n            sessionHistory.map((interaction, index) => {\n              return (\n                <SynapseChatInteraction\n                  key={index}\n                  userMessage={interaction.usersRequestText}\n                  chatResponseText={interaction.agentResponseText}\n                />\n              )\n            })} */}\n            {chatJobIds.map(jobId => {\n              return (\n                <SynapseChatMessage\n                  key={jobId}\n                  chatJobId={jobId}\n                  onSendChat={sendChat}\n                />\n              )\n            })}\n            {pendingMessage && (\n              <SynapseChatInteraction\n                userMessage={pendingMessage}\n                chatResponseText={''}\n                chatErrorReason={''}\n                scrollIntoView\n                onSendChat={sendChat}\n              />\n            )}\n          </List>\n        </Box>\n      )}\n      <Box\n        sx={{\n          position: 'sticky',\n          bottom: textboxPositionOffset,\n          backgroundColor: 'white',\n        }}\n      >\n        <Box\n          component=\"form\"\n          sx={{\n            pt: '8px',\n            mt: '5px',\n            pb: '10px',\n            position: 'sticky',\n            borderTop: '1px solid',\n            borderColor: 'grey.400',\n          }}\n          onSubmit={handleSendMessage}\n        >\n          <TextField\n            fullWidth\n            value={userChatTextfieldValue}\n            onChange={e => setUserChatTextfieldValue(e.target.value)}\n            onKeyDown={handleKeyDown}\n            placeholder={`Message ${chatbotName}`}\n            slotProps={{\n              input: {\n                sx: { borderRadius: 96.6 },\n                endAdornment: (\n                  <IconButton\n                    disabled={isDisabled}\n                    onClick={handleSendMessage}\n                    sx={{\n                      ml: '7px',\n                      mr: '-8px',\n                      color: sendMessageButtonColor,\n                      borderStyle: 'solid',\n                      borderWidth: isDisabled ? '1px' : '2px',\n                      borderColor: isDisabled ? 'gray' : sendMessageButtonColor,\n                    }}\n                  >\n                    <ArrowUpward />\n                  </IconButton>\n                ),\n              },\n            }}\n          />\n          <Typography\n            variant=\"smallText1\"\n            sx={{ pt: '8px', textAlign: 'center' }}\n          >\n            {chatbotName} can make mistakes.\n          </Typography>\n        </Box>\n      </Box>\n    </Box>\n  )\n}\n\nexport default SynapseChat\n"],"names":["SynapseChat","initialMessage","agentRegistrationId","chatbotName","hideTitle","textboxPositionOffset","sessionContext","externalSession","setExternalSession","externalChatState","showAccessLevelMenu","onChatResponse","accessToken","useSynapseContext","localAgentSession","setLocalAgentSession","useState","agentSession","setAgentSession","createAgentSession","createAgentSessionError","useCreateAgentSession","newAgentSession","updateAgentSession","useUpdateAgentSession","updatedAgentSession","err","displayToast","theme","useTheme","agentAccessLevel","setAgentAccessLevel","AgentAccessLevel","internalChatState","useChatState","chatState","pendingMessage","chatJobIds","sendChat","userChatTextfieldValue","setUserChatTextfieldValue","initialMessageProcessed","setInitialMessageProcessed","useEffect","handleSendMessage","isDisabled","handleKeyDown","event","sendMessageButtonColor","jsx","Alert","jsxs","Box","Typography","AccessLevelMenu","newAccessLevel","SkeletonParagraph","List","jobId","SynapseChatMessage","SynapseChatInteraction","TextField","IconButton","ArrowUpward"],"mappings":"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"}

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

@@ -5,7 +5,8 @@ export type SynapseChatInteractionProps = {
     chatResponseTrace?: TraceEvent[];
     scrollIntoView?: boolean;
     chatErrorReason?: string;
+    onSendChat?: (message: string) => void;
 };
-export declare function SynapseChatInteraction({ userMessage, chatResponseText, chatErrorReason, chatResponseTrace, scrollIntoView, }: SynapseChatInteractionProps): import("react/jsx-runtime").JSX.Element;
+export declare function SynapseChatInteraction({ userMessage, chatResponseText, chatErrorReason, chatResponseTrace, scrollIntoView, onSendChat, }: SynapseChatInteractionProps): import("react/jsx-runtime").JSX.Element;
 export default SynapseChatInteraction;
 //# sourceMappingURL=SynapseChatInteraction.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"SynapseChatInteraction.d.ts","sourceRoot":"","sources":["../../../src/components/SynapseChat/SynapseChatInteraction.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAA;AAI5D,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;CACzB,CAAA;AAqBD,wBAAgB,sBAAsB,CAAC,EACrC,WAAW,EACX,gBAAgB,EAChB,eAAe,EACf,iBAAiB,EACjB,cAAsB,GACvB,EAAE,2BAA2B,2CAqK7B;AAED,eAAe,sBAAsB,CAAA"}
+{"version":3,"file":"SynapseChatInteraction.d.ts","sourceRoot":"","sources":["../../../src/components/SynapseChat/SynapseChatInteraction.tsx"],"names":[],"mappings":"AAsBA,OAAO,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAA;AAI5D,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;CACvC,CAAA;AAqBD,wBAAgB,sBAAsB,CAAC,EACrC,WAAW,EACX,gBAAgB,EAChB,eAAe,EACf,iBAAiB,EACjB,cAAsB,EACtB,UAAU,GACX,EAAE,2BAA2B,2CAgN7B;AAED,eAAe,sBAAsB,CAAA"}

package/dist/components/SynapseChat/SynapseChatInteraction.js

@@ -1,42 +1,56 @@
-import { jsxs as i, Fragment as C, jsx as e } from "react/jsx-runtime";
-import { SynapseSpinner as I } from "../LoadingScreen/LoadingScreen.js";
-import M from "./extractMessageFromTraceEvent.js";
-import { SmartToyTwoTone as L, KeyboardArrowDown as W, KeyboardArrowRight as j } from "@mui/icons-material";
-import { useTheme as B, ListItem as g, ListItemText as A, Box as a, Button as F, Collapse as z, Alert as D } from "@mui/material";
-import { useRef as K, useState as O, useEffect as R, useMemo as p } from "react";
-import { MarkdownSynapse as w } from "../Markdown/MarkdownSynapse.js";
-function $(r) {
-  return "reasoningText" in r ? r.reasoningText : "";
+import { jsxs as s, Fragment as A, jsx as t } from "react/jsx-runtime";
+import { SynapseSpinner as L } from "../LoadingScreen/LoadingScreen.js";
+import j from "./extractMessageFromTraceEvent.js";
+import { SmartToyTwoTone as B, KeyboardArrowDown as P, KeyboardArrowRight as q } from "@mui/icons-material";
+import { useTheme as F, ListItem as T, ListItemText as z, Box as d, Button as E, Collapse as D, Stack as G, Tooltip as K, Chip as O, Alert as $ } from "@mui/material";
+import { useRef as H, useState as _, useEffect as J, useMemo as x } from "react";
+import { Markdown as k } from "../Markdown/MarkdownSynapse.js";
+function N(n) {
+  return "reasoningText" in n ? n.reasoningText : "";
 }
-function N({
-  userMessage: r,
-  chatResponseText: s,
-  chatErrorReason: l,
-  chatResponseTrace: d,
-  scrollIntoView: y = !1
+function ee({
+  userMessage: n,
+  chatResponseText: i,
+  chatErrorReason: c,
+  chatResponseTrace: m,
+  scrollIntoView: u = !1,
+  onSendChat: f
 }) {
-  const x = B(), o = K(null), [m, b] = O(!1);
-  R(() => {
-    y && o.current && o.current.scrollIntoView({ behavior: "smooth" });
-  }, [o]);
-  const c = !s && !l, n = p(
-    () => (d ?? []).flatMap((t) => M(t))?.filter((t) => !!t),
-    [d]
-  ), T = n.length > 0, f = p(
-    () => n.filter((t) => "reasoningText" in t).at(-1),
-    [n]
-  ), S = f == null ? "Thinking..." : f.reasoningText, k = c ? S : `${m ? "Hide" : "Show"} Trace`, u = p(() => {
-    const h = new DOMParser().parseFromString(s ?? "", "text/html");
-    return h.querySelectorAll("tool_name").forEach((v) => v.remove()), h.body.textContent ?? "";
-  }, [s]);
-  return /* @__PURE__ */ i(C, { children: [
-    /* @__PURE__ */ e(
-      g,
+  const h = F(), a = H(null), [p, C] = _(!1);
+  J(() => {
+    u && a.current && a.current.scrollIntoView({ behavior: "smooth" });
+  }, [a, u]);
+  const g = !i && !c, l = x(
+    () => (m ?? []).flatMap((e) => j(e))?.filter((e) => !!e),
+    [m]
+  ), v = l.length > 0, y = x(
+    () => l.filter((e) => "reasoningText" in e).at(-1),
+    [l]
+  ), M = y == null ? "Thinking..." : y.reasoningText, I = g ? M : `${p ? "Hide" : "Show"} Trace`, { textContent: w, guidePrompts: b } = x(() => {
+    try {
+      const o = new DOMParser().parseFromString(i ?? "", "text/html");
+      o.querySelectorAll("tool_name, actions").forEach((r) => r.remove());
+      const W = Array.from(
+        o.querySelectorAll("guideprompt")
+      ).map((r) => r.textContent?.trim()).filter((r) => !!r);
+      o.querySelectorAll("guideprompt").forEach((r) => r.remove());
+      const S = o.querySelector("chat");
+      return {
+        textContent: S ? S.textContent ?? "" : o.body.textContent ?? "",
+        guidePrompts: W
+      };
+    } catch (e) {
+      return console.error(e), { textContent: i ?? "", guidePrompts: [] };
+    }
+  }, [i]);
+  return /* @__PURE__ */ s(A, { children: [
+    /* @__PURE__ */ t(
+      T,
       {
-        ref: o,
+        ref: a,
         sx: {
           alignSelf: "flex-end",
-          backgroundColor: x.palette.secondary[100],
+          backgroundColor: h.palette.secondary[100],
           borderRadius: "24px",
           maxWidth: "70%",
           display: "block",
@@ -45,11 +59,11 @@ function N({
           wordWrap: "break-word",
           width: "auto"
         },
-        children: /* @__PURE__ */ e(A, { primary: r })
+        children: /* @__PURE__ */ t(z, { primary: n })
       }
     ),
-    /* @__PURE__ */ i(
-      g,
+    /* @__PURE__ */ s(
+      T,
       {
         sx: {
           display: "grid",
@@ -60,8 +74,8 @@ function N({
           p: "0px"
         },
         children: [
-          /* @__PURE__ */ e(
-            a,
+          /* @__PURE__ */ t(
+            d,
             {
               sx: {
                 p: "3px",
@@ -72,11 +86,11 @@ function N({
                 borderWidth: "1px",
                 borderColor: "grey.300"
               },
-              children: /* @__PURE__ */ e(L, { sx: { color: "secondary.main" } })
+              children: /* @__PURE__ */ t(B, { sx: { color: "secondary.main" } })
             }
           ),
-          /* @__PURE__ */ i(
-            a,
+          /* @__PURE__ */ s(
+            d,
             {
               sx: {
                 borderRadius: "10px",
@@ -85,14 +99,14 @@ function N({
                 overflow: "auto"
               },
               children: [
-                /* @__PURE__ */ i(
-                  a,
+                /* @__PURE__ */ s(
+                  d,
                   {
                     component: "aside",
                     sx: {
                       ".markdown": {
                         fontStyle: "italic",
-                        borderLeft: `4px solid ${x.palette.grey[300]}`,
+                        borderLeft: `4px solid ${h.palette.grey[300]}`,
                         marginLeft: "4px",
                         paddingLeft: "8px",
                         mt: 1,
@@ -100,15 +114,15 @@ function N({
                       }
                     },
                     children: [
-                      /* @__PURE__ */ e(
-                        F,
+                      /* @__PURE__ */ t(
+                        E,
                         {
                           variant: "outlined",
                           size: "small",
-                          startIcon: c ? /* @__PURE__ */ e(I, { size: 14 }) : m ? /* @__PURE__ */ e(W, { sx: { width: "14px" } }) : /* @__PURE__ */ e(j, { sx: { width: "14px" } }),
-                          disabled: !T,
+                          startIcon: g ? /* @__PURE__ */ t(L, { size: 14 }) : p ? /* @__PURE__ */ t(P, { sx: { width: "14px" } }) : /* @__PURE__ */ t(q, { sx: { width: "14px" } }),
+                          disabled: !v,
                           onClick: () => {
-                            b((t) => !t);
+                            C((e) => !e);
                           },
                           sx: {
                             height: "20px",
@@ -124,30 +138,41 @@ function N({
                             pl: 0,
                             ".MuiButton-startIcon": { mr: 0.5 }
                           },
-                          children: /* @__PURE__ */ e(a, { sx: { overflow: "hidden", textOverflow: "ellipsis" }, children: k })
+                          children: /* @__PURE__ */ t(d, { sx: { overflow: "hidden", textOverflow: "ellipsis" }, children: I })
                         }
                       ),
-                      d && /* @__PURE__ */ e(z, { in: m, children: /* @__PURE__ */ e(
-                        w,
+                      m && /* @__PURE__ */ t(D, { in: p, children: /* @__PURE__ */ t(
+                        k,
                         {
-                          markdown: n.map($).filter((t) => t.trim().length > 0).join("<br/><br/>")
+                          markdown: l.map(N).filter((e) => e.trim().length > 0).join("<br/><br/>")
                         }
                       ) })
                     ]
                   }
                 ),
-                u && /* @__PURE__ */ e(w, { markdown: u })
+                w && /* @__PURE__ */ t(k, { markdown: w }),
+                f && b.length > 0 && /* @__PURE__ */ t(G, { direction: "row", flexWrap: "wrap", gap: 1, mt: 1, children: b.map((e) => /* @__PURE__ */ t(K, { title: e, children: /* @__PURE__ */ t(
+                  O,
+                  {
+                    label: e,
+                    variant: "outlined",
+                    color: "primary",
+                    clickable: !0,
+                    onClick: () => f(e),
+                    sx: { maxWidth: 200 }
+                  }
+                ) }, e)) })
               ]
             }
           )
         ]
       }
     ),
-    l && /* @__PURE__ */ e(D, { severity: "error", sx: { my: 2 }, children: l })
+    c && /* @__PURE__ */ t($, { severity: "error", sx: { my: 2 }, children: c })
   ] });
 }
 export {
-  N as SynapseChatInteraction,
-  N as default
+  ee as SynapseChatInteraction,
+  ee as default
 };
 //# sourceMappingURL=SynapseChatInteraction.js.map