sagedesk 2.1.1 → 2.3.0

package/dist/react/index.cjs

@@ -36,7 +36,7 @@ __export(react_exports, {
 module.exports = __toCommonJS(react_exports);
 
 // src/react/SageDeskWidget.tsx
-var import_react2 = require("react");
+var import_react2 = __toESM(require("react"), 1);
 var import_react_dom = require("react-dom");
 
 // src/react/useSageDesk.ts
@@ -295,6 +295,7 @@ function logFallbackWarning(reason) {
 }
 var initialState = {
   messages: [],
+  userMessages: [],
   isOpen: false,
   isTyping: false,
   engineStatus: "idle",
@@ -307,8 +308,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":
@@ -331,6 +335,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)(
@@ -342,12 +347,27 @@ 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;
     if (config.mode === "llm") {
       setChips(config.agent.suggestedChips ?? []);
-      dispatch({ type: "SET_ENGINE_STATUS", payload: { status: "ready" } });
+      dispatch({ type: "SET_ENGINE_STATUS", payload: { status: "loading-model" } });
+      try {
+        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;
     }
     dispatch({ type: "SET_ENGINE_STATUS", payload: { status: "loading-index" } });
@@ -359,6 +379,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."
@@ -371,12 +392,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.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" });
@@ -393,16 +416,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)(
@@ -426,12 +445,20 @@ function useSageDesk(config) {
           console.warn('[sagedesk] LLM mode requires an "endpoint" prop.');
           botText = getFallback(config.agent);
           isFallback = true;
+        } else if (!embedderRef.current?.isReady) {
+          console.warn("[sagedesk] Embedder not ready - showing fallback.");
+          botText = getFallback(config.agent);
+          isFallback = true;
         } else {
           try {
+            const vector = await embedderRef.current.embed(trimmed);
             const res = await fetch(config.endpoint, {
               method: "POST",
               headers: { "Content-Type": "application/json" },
-              body: JSON.stringify({ query: trimmed })
+              body: JSON.stringify({
+                query: trimmed,
+                queryVector: Array.from(vector)
+              })
             });
             if (!res.ok) throw new Error(`HTTP ${res.status}`);
             const data = await res.json();
@@ -475,8 +502,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));
       }
@@ -494,11 +521,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 };
 }
 
@@ -694,9 +719,9 @@ var PoweredBy = ({ dark = false }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx
     }
   )
 ] });
-function ClassicMessageBubble({ msg, accent }) {
+var ClassicMessageBubble = import_react2.default.memo(function ClassicMessageBubble2({ msg, accent }) {
   const isBot = msg.role === "bot";
-  const renderedHtml = isBot ? parseMarkdown(msg.text) : msg.text;
+  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: {
@@ -721,7 +746,7 @@ function ClassicMessageBubble({ msg, accent }) {
       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: {
@@ -739,9 +764,9 @@ function ClassicTypingIndicator() {
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: dot, className: "sd-r-dot-3" })
   ] }) });
 }
-function LightMessageBubble({ msg, accent, agentName }) {
+var LightMessageBubble = import_react2.default.memo(function LightMessageBubble2({ msg, accent, agentName }) {
   const isBot = msg.role === "bot";
-  const renderedHtml = isBot ? parseMarkdown(msg.text) : msg.text;
+  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: {
@@ -776,7 +801,7 @@ function LightMessageBubble({ msg, accent, agentName }) {
     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: [
@@ -804,9 +829,9 @@ function LightTypingIndicator({ accent }) {
     ] })
   ] });
 }
-function DarkMessageBubble({ msg, accent }) {
+var DarkMessageBubble = import_react2.default.memo(function DarkMessageBubble2({ msg, accent }) {
   const isBot = msg.role === "bot";
-  const renderedHtml = isBot ? parseMarkdown(msg.text) : msg.text;
+  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",
@@ -824,7 +849,7 @@ function DarkMessageBubble({ msg, accent }) {
     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: {
@@ -843,7 +868,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,
@@ -1032,7 +1057,7 @@ function renderClassic(p) {
     ] })
   ] });
 }
-function renderLight(p) {
+function LightTheme(p) {
   const {
     agent,
     state,
@@ -1220,7 +1245,7 @@ function renderLight(p) {
     ] })
   ] });
 }
-function renderDark(p) {
+function DarkTheme(p) {
   const {
     agent,
     state,
@@ -1457,7 +1482,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";
@@ -1536,7 +1564,7 @@ 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);
 }
 // Annotate the CommonJS export names for ESM import in node: