sagedesk 2.2.0 → 2.3.0

package/dist/next/index.cjs

@@ -316,8 +316,11 @@ function reducer(state, action) {
       return { ...state, isOpen: true };
     case "CLOSE":
       return { ...state, isOpen: false };
-    case "ADD_MESSAGE":
-      return { ...state, messages: [...state.messages, action.payload] };
+    case "ADD_MESSAGE": {
+      const newMessages = [...state.messages, action.payload];
+      const newUserMessages = action.payload.role === "user" ? [...state.userMessages, action.payload] : state.userMessages;
+      return { ...state, messages: newMessages, userMessages: newUserMessages };
+    }
     case "SET_TYPING":
       return { ...state, isTyping: action.payload };
     case "SET_ENGINE_STATUS":
@@ -340,6 +343,7 @@ function useSageDesk(config) {
   const embedderRef = (0, import_react.useRef)(null);
   const engineStartedRef = (0, import_react.useRef)(false);
   const msgCounterRef = (0, import_react.useRef)(0);
+  const engineReadyCallbacksRef = (0, import_react.useRef)([]);
   const [chips, setChips] = (0, import_react.useState)([]);
   const makeId = () => `msg-${++msgCounterRef.current}`;
   const addMessage = (0, import_react.useCallback)(
@@ -351,6 +355,11 @@ function useSageDesk(config) {
     },
     []
   );
+  const notifyEngineReady = (0, import_react.useCallback)(() => {
+    const callbacks = engineReadyCallbacksRef.current;
+    engineReadyCallbacksRef.current = [];
+    callbacks.forEach((cb) => cb());
+  }, []);
   const startEngine = (0, import_react.useCallback)(async () => {
     if (engineStartedRef.current) return;
     engineStartedRef.current = true;
@@ -361,9 +370,11 @@ function useSageDesk(config) {
         embedderRef.current = new EmbedderRuntime();
         await embedderRef.current.load(config.agent.model);
         dispatch({ type: "SET_ENGINE_STATUS", payload: { status: "ready" } });
+        notifyEngineReady();
       } catch (err) {
         console.warn("[sagedesk] WASM embedder failed to load - LLM mode will use fallback messages.", err);
         dispatch({ type: "SET_ENGINE_STATUS", payload: { status: "error-model", error: String(err) } });
+        notifyEngineReady();
       }
       return;
     }
@@ -376,6 +387,7 @@ function useSageDesk(config) {
         type: "SET_ENGINE_STATUS",
         payload: { status: "error-index", error: String(err) }
       });
+      notifyEngineReady();
       addMessage({
         role: "bot",
         text: "I'm having trouble loading right now. Please try again in a moment."
@@ -388,12 +400,14 @@ function useSageDesk(config) {
       embedderRef.current = new EmbedderRuntime();
       await embedderRef.current.load(config.agent.model);
       dispatch({ type: "SET_ENGINE_STATUS", payload: { status: "ready" } });
+      notifyEngineReady();
     } catch (err) {
       console.warn("[sagedesk] WASM model failed to load, falling back to keyword search -", err);
       embedderRef.current = new EmbedderRuntime();
       dispatch({ type: "SET_ENGINE_STATUS", payload: { status: "degraded" } });
+      notifyEngineReady();
     }
-  }, [config.mode, config.indexUrl, config.agent.model, config.agent.suggestedChips, addMessage]);
+  }, [config.mode, config.indexUrl, config.agent.model, config.agent.suggestedChips, addMessage, notifyEngineReady]);
   const greetingShownRef = (0, import_react.useRef)(false);
   const open = (0, import_react.useCallback)(() => {
     dispatch({ type: "OPEN" });
@@ -410,16 +424,12 @@ function useSageDesk(config) {
     dispatch({ type: "CLOSE" });
   }, []);
   const waitForEngine = (0, import_react.useCallback)(() => {
+    const s = engineStatusRef.current;
+    if (s === "ready" || s === "degraded" || s === "error-index" || s === "error-model") {
+      return Promise.resolve();
+    }
     return new Promise((resolve) => {
-      const check = () => {
-        const s = engineStatusRef.current;
-        if (s === "ready" || s === "degraded" || s === "error-index" || s === "error-model") {
-          resolve();
-        } else {
-          setTimeout(check, 100);
-        }
-      };
-      check();
+      engineReadyCallbacksRef.current.push(resolve);
     });
   }, []);
   const submit = (0, import_react.useCallback)(
@@ -500,8 +510,8 @@ function useSageDesk(config) {
       }
       if (config.mode !== "llm") {
         const elapsed = Date.now() - typingStart;
-        const delayBase = retrievalMode === "keyword" || isFallback ? 800 : 3e3;
-        const minTypingMs = delayBase + Math.random() * 2e3;
+        const delayBase = retrievalMode === "keyword" || isFallback ? 400 : 800;
+        const minTypingMs = delayBase + Math.random() * 400;
         const remaining = minTypingMs - elapsed;
         if (remaining > 0) await new Promise((r) => setTimeout(r, remaining));
       }
@@ -519,11 +529,9 @@ function useSageDesk(config) {
     return () => document.removeEventListener("keydown", handler);
   }, [state.isOpen, close]);
   const activeChips = (0, import_react.useMemo)(() => {
-    const askedTexts = new Set(
-      state.messages.filter((m) => m.role === "user").map((m) => m.text.toLowerCase().trim())
-    );
+    const askedTexts = new Set(state.userMessages.map((m) => m.text.toLowerCase().trim()));
     return chips.filter((chip) => !askedTexts.has(chip.toLowerCase().trim()));
-  }, [chips, state.messages]);
+  }, [chips, state.userMessages]);
   return { state, chips: activeChips, open, close, submit };
 }
 var import_react, initialState;
@@ -537,6 +545,7 @@ var init_useSageDesk = __esm({
     init_fallback();
     initialState = {
       messages: [],
+      userMessages: [],
       isOpen: false,
       isTyping: false,
       engineStatus: "idle",
@@ -611,34 +620,6 @@ function injectStyles(theme) {
   style.textContent = THEME_CSS[theme];
   document.head.prepend(style);
 }
-function ClassicMessageBubble({ msg, accent }) {
-  const isBot = msg.role === "bot";
-  const renderedHtml = isBot ? parseMarkdown(msg.text) : msg.text;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", flexDirection: "column", alignItems: isBot ? "flex-start" : "flex-end", gap: "4px" }, children: [
-    msg.isFallback && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { fontSize: "11px", fontWeight: 500, color: "#9b9aa3", margin: 0, padding: "0 4px", fontFamily: "inherit" }, children: "Not sure about that one" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: {
-      maxWidth: "82%",
-      padding: "10px 14px",
-      fontSize: "14px",
-      lineHeight: 1.5,
-      borderRadius: isBot ? "16px 16px 16px 6px" : "16px 16px 6px 16px",
-      background: isBot ? "#fff" : accent,
-      color: isBot ? "#1a1a2e" : "#fff",
-      border: isBot ? "1px solid rgba(20,20,40,0.06)" : "none",
-      boxShadow: isBot ? "0 1px 2px rgba(20,20,40,0.04)" : `0 6px 16px -6px color-mix(in oklab, ${accent} 60%, transparent)`,
-      wordBreak: "break-word",
-      fontFamily: "inherit"
-    }, className: "sd-r-markdown", children: isBot ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { dangerouslySetInnerHTML: { __html: renderedHtml } }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { whiteSpace: "pre-wrap" }, children: msg.text }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: {
-      fontSize: "11px",
-      color: "#a8a8b0",
-      marginTop: "2px",
-      padding: isBot ? "0 0 0 4px" : "0 4px 0 0",
-      fontVariantNumeric: "tabular-nums",
-      fontFamily: "inherit"
-    }, children: "just now" })
-  ] });
-}
 function ClassicTypingIndicator() {
   const dot = { width: 6, height: 6, borderRadius: "50%", background: "#c8c8ce", display: "inline-block" };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { display: "flex", flexDirection: "column", alignItems: "flex-start", gap: "4px" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: {
@@ -656,44 +637,6 @@ function ClassicTypingIndicator() {
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: dot, className: "sd-r-dot-3" })
   ] }) });
 }
-function LightMessageBubble({ msg, accent, agentName }) {
-  const isBot = msg.role === "bot";
-  const renderedHtml = isBot ? parseMarkdown(msg.text) : msg.text;
-  if (isBot) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", gap: "10px" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: {
-        width: 28,
-        height: 28,
-        borderRadius: "50%",
-        background: `linear-gradient(135deg, ${accent}, color-mix(in oklab, ${accent} 60%, #fff))`,
-        flexShrink: 0,
-        marginTop: "2px"
-      } }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "baseline", gap: "8px", marginBottom: "4px" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: "13px", fontWeight: 600, color: "#1a1a2e", fontFamily: "inherit" }, children: agentName }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: "11px", color: "#a8a89e", fontVariantNumeric: "tabular-nums", fontFamily: "inherit" }, children: "just now" })
-        ] }),
-        msg.isFallback && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { fontSize: "11px", color: "#9b9aa3", margin: "0 0 4px", fontFamily: "inherit" }, children: "Not sure about that one" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: "14px", lineHeight: 1.55, color: "#2a2a36", fontFamily: "inherit", wordBreak: "break-word" }, className: "sd-r-markdown", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { dangerouslySetInnerHTML: { __html: renderedHtml } }) })
-      ] })
-    ] });
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { display: "flex", justifyContent: "flex-end" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: {
-    maxWidth: "78%",
-    padding: "11px 15px",
-    fontSize: "14px",
-    lineHeight: 1.5,
-    borderRadius: "16px 16px 4px 16px",
-    background: `color-mix(in oklab, ${accent} 10%, white)`,
-    color: accent,
-    border: `1px solid color-mix(in oklab, ${accent} 22%, transparent)`,
-    fontWeight: 500,
-    whiteSpace: "pre-wrap",
-    wordBreak: "break-word",
-    fontFamily: "inherit"
-  }, children: msg.text }) });
-}
 function LightTypingIndicator({ accent }) {
   const dot = { width: 6, height: 6, borderRadius: "50%", background: "#c4c4be", display: "inline-block" };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", gap: "10px" }, children: [
@@ -721,27 +664,6 @@ function LightTypingIndicator({ accent }) {
     ] })
   ] });
 }
-function DarkMessageBubble({ msg, accent }) {
-  const isBot = msg.role === "bot";
-  const renderedHtml = isBot ? parseMarkdown(msg.text) : msg.text;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: {
-    maxWidth: "85%",
-    padding: "12px 14px",
-    fontSize: "14px",
-    lineHeight: isBot ? 1.6 : 1.5,
-    borderRadius: isBot ? "14px 14px 14px 6px" : "14px 14px 6px 14px",
-    background: isBot ? "rgba(255,255,255,0.05)" : `linear-gradient(135deg, ${accent}, color-mix(in oklab, ${accent} 75%, #1a1340))`,
-    border: isBot ? "1px solid rgba(255,255,255,0.06)" : "none",
-    color: isBot ? "rgba(255,255,255,0.92)" : "#fff",
-    alignSelf: isBot ? "flex-start" : "flex-end",
-    boxShadow: isBot ? "none" : `0 8px 20px -8px color-mix(in oklab, ${accent} 70%, transparent)`,
-    wordBreak: "break-word",
-    fontFamily: "inherit"
-  }, className: isBot ? "sd-r-markdown" : "", children: [
-    msg.isFallback && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: "11px", color: "rgba(255,255,255,0.5)", display: "block", marginBottom: "4px" }, children: "Not sure about that one" }),
-    isBot ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { dangerouslySetInnerHTML: { __html: renderedHtml } }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { whiteSpace: "pre-wrap" }, children: msg.text })
-  ] });
-}
 function DarkTypingIndicator() {
   const dot = { width: 6, height: 6, borderRadius: "50%", background: "rgba(255,255,255,0.4)", display: "inline-block" };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: {
@@ -760,7 +682,7 @@ function DarkTypingIndicator() {
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: dot, className: "sd-r-dot-3" })
   ] });
 }
-function renderClassic(p) {
+function ClassicTheme(p) {
   const {
     agent,
     state,
@@ -949,7 +871,7 @@ function renderClassic(p) {
     ] })
   ] });
 }
-function renderLight(p) {
+function LightTheme(p) {
   const {
     agent,
     state,
@@ -1137,7 +1059,7 @@ function renderLight(p) {
     ] })
   ] });
 }
-function renderDark(p) {
+function DarkTheme(p) {
   const {
     agent,
     state,
@@ -1374,7 +1296,10 @@ function SageDeskWidget({ mode, indexUrl, endpoint, agent, search: search2 }) {
       '[sagedesk] Required prop "endpoint" is missing for llm mode. Provide your backend route, e.g. endpoint="/api/sagedesk".'
     );
   }
-  const config = { mode: resolvedMode, indexUrl, endpoint, agent, search: search2 };
+  const config = (0, import_react2.useMemo)(
+    () => ({ mode: resolvedMode, indexUrl, endpoint, agent, search: search2 }),
+    [resolvedMode, indexUrl, endpoint, agent, search2]
+  );
   const { state, chips, open, close, submit } = useSageDesk(config);
   const theme = agent.theme ?? "classic";
   const accent = agent.accentColor ?? "#534AB7";
@@ -1453,14 +1378,14 @@ function SageDeskWidget({ mode, indexUrl, endpoint, agent, search: search2 }) {
     open,
     submit
   };
-  const content = theme === "dark" ? renderDark(props) : theme === "light" ? renderLight(props) : renderClassic(props);
+  const content = theme === "dark" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DarkTheme, { ...props }) : theme === "light" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LightTheme, { ...props }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ClassicTheme, { ...props });
   return (0, import_react_dom.createPortal)(content, document.body);
 }
-var import_react2, import_react_dom, import_jsx_runtime, STYLE_ID, SHARED, THEME_CSS, IconChat, IconSend, IconClose, IconBot, IconPerson, PoweredBy;
+var import_react2, import_react_dom, import_jsx_runtime, STYLE_ID, SHARED, THEME_CSS, IconChat, IconSend, IconClose, IconBot, IconPerson, PoweredBy, ClassicMessageBubble, LightMessageBubble, DarkMessageBubble;
 var init_SageDeskWidget = __esm({
   "src/react/SageDeskWidget.tsx"() {
     "use strict";
-    import_react2 = require("react");
+    import_react2 = __toESM(require("react"), 1);
     import_react_dom = require("react-dom");
     init_useSageDesk();
     init_markdownUtils();
@@ -1601,6 +1526,93 @@ var init_SageDeskWidget = __esm({
         }
       )
     ] });
+    ClassicMessageBubble = import_react2.default.memo(function ClassicMessageBubble2({ msg, accent }) {
+      const isBot = msg.role === "bot";
+      const renderedHtml = (0, import_react2.useMemo)(() => isBot ? parseMarkdown(msg.text) : msg.text, [isBot, msg.text]);
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", flexDirection: "column", alignItems: isBot ? "flex-start" : "flex-end", gap: "4px" }, children: [
+        msg.isFallback && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { fontSize: "11px", fontWeight: 500, color: "#9b9aa3", margin: 0, padding: "0 4px", fontFamily: "inherit" }, children: "Not sure about that one" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: {
+          maxWidth: "82%",
+          padding: "10px 14px",
+          fontSize: "14px",
+          lineHeight: 1.5,
+          borderRadius: isBot ? "16px 16px 16px 6px" : "16px 16px 6px 16px",
+          background: isBot ? "#fff" : accent,
+          color: isBot ? "#1a1a2e" : "#fff",
+          border: isBot ? "1px solid rgba(20,20,40,0.06)" : "none",
+          boxShadow: isBot ? "0 1px 2px rgba(20,20,40,0.04)" : `0 6px 16px -6px color-mix(in oklab, ${accent} 60%, transparent)`,
+          wordBreak: "break-word",
+          fontFamily: "inherit"
+        }, className: "sd-r-markdown", children: isBot ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { dangerouslySetInnerHTML: { __html: renderedHtml } }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { whiteSpace: "pre-wrap" }, children: msg.text }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: {
+          fontSize: "11px",
+          color: "#a8a8b0",
+          marginTop: "2px",
+          padding: isBot ? "0 0 0 4px" : "0 4px 0 0",
+          fontVariantNumeric: "tabular-nums",
+          fontFamily: "inherit"
+        }, children: "just now" })
+      ] });
+    });
+    LightMessageBubble = import_react2.default.memo(function LightMessageBubble2({ msg, accent, agentName }) {
+      const isBot = msg.role === "bot";
+      const renderedHtml = (0, import_react2.useMemo)(() => isBot ? parseMarkdown(msg.text) : msg.text, [isBot, msg.text]);
+      if (isBot) {
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", gap: "10px" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: {
+            width: 28,
+            height: 28,
+            borderRadius: "50%",
+            background: `linear-gradient(135deg, ${accent}, color-mix(in oklab, ${accent} 60%, #fff))`,
+            flexShrink: 0,
+            marginTop: "2px"
+          } }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "baseline", gap: "8px", marginBottom: "4px" }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: "13px", fontWeight: 600, color: "#1a1a2e", fontFamily: "inherit" }, children: agentName }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: "11px", color: "#a8a89e", fontVariantNumeric: "tabular-nums", fontFamily: "inherit" }, children: "just now" })
+            ] }),
+            msg.isFallback && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { fontSize: "11px", color: "#9b9aa3", margin: "0 0 4px", fontFamily: "inherit" }, children: "Not sure about that one" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: "14px", lineHeight: 1.55, color: "#2a2a36", fontFamily: "inherit", wordBreak: "break-word" }, className: "sd-r-markdown", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { dangerouslySetInnerHTML: { __html: renderedHtml } }) })
+          ] })
+        ] });
+      }
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { display: "flex", justifyContent: "flex-end" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: {
+        maxWidth: "78%",
+        padding: "11px 15px",
+        fontSize: "14px",
+        lineHeight: 1.5,
+        borderRadius: "16px 16px 4px 16px",
+        background: `color-mix(in oklab, ${accent} 10%, white)`,
+        color: accent,
+        border: `1px solid color-mix(in oklab, ${accent} 22%, transparent)`,
+        fontWeight: 500,
+        whiteSpace: "pre-wrap",
+        wordBreak: "break-word",
+        fontFamily: "inherit"
+      }, children: msg.text }) });
+    });
+    DarkMessageBubble = import_react2.default.memo(function DarkMessageBubble2({ msg, accent }) {
+      const isBot = msg.role === "bot";
+      const renderedHtml = (0, import_react2.useMemo)(() => isBot ? parseMarkdown(msg.text) : msg.text, [isBot, msg.text]);
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: {
+        maxWidth: "85%",
+        padding: "12px 14px",
+        fontSize: "14px",
+        lineHeight: isBot ? 1.6 : 1.5,
+        borderRadius: isBot ? "14px 14px 14px 6px" : "14px 14px 6px 14px",
+        background: isBot ? "rgba(255,255,255,0.05)" : `linear-gradient(135deg, ${accent}, color-mix(in oklab, ${accent} 75%, #1a1340))`,
+        border: isBot ? "1px solid rgba(255,255,255,0.06)" : "none",
+        color: isBot ? "rgba(255,255,255,0.92)" : "#fff",
+        alignSelf: isBot ? "flex-start" : "flex-end",
+        boxShadow: isBot ? "none" : `0 8px 20px -8px color-mix(in oklab, ${accent} 70%, transparent)`,
+        wordBreak: "break-word",
+        fontFamily: "inherit"
+      }, className: isBot ? "sd-r-markdown" : "", children: [
+        msg.isFallback && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: "11px", color: "rgba(255,255,255,0.5)", display: "block", marginBottom: "4px" }, children: "Not sure about that one" }),
+        isBot ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { dangerouslySetInnerHTML: { __html: renderedHtml } }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { whiteSpace: "pre-wrap" }, children: msg.text })
+      ] });
+    });
   }
 });