sagedesk 2.1.1 → 2.3.0

package/dist/react/index.js

@@ -1,9 +1,10 @@
 // src/react/SageDeskWidget.tsx
-import {
+import React, {
   useState as useState2,
   useRef as useRef2,
   useEffect as useEffect2,
-  useCallback as useCallback2
+  useCallback as useCallback2,
+  useMemo as useMemo2
 } from "react";
 import { createPortal } from "react-dom";
 
@@ -263,6 +264,7 @@ function logFallbackWarning(reason) {
 }
 var initialState = {
   messages: [],
+  userMessages: [],
   isOpen: false,
   isTyping: false,
   engineStatus: "idle",
@@ -275,8 +277,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":
@@ -299,6 +304,7 @@ function useSageDesk(config) {
   const embedderRef = useRef(null);
   const engineStartedRef = useRef(false);
   const msgCounterRef = useRef(0);
+  const engineReadyCallbacksRef = useRef([]);
   const [chips, setChips] = useState([]);
   const makeId = () => `msg-${++msgCounterRef.current}`;
   const addMessage = useCallback(
@@ -310,12 +316,27 @@ function useSageDesk(config) {
     },
     []
   );
+  const notifyEngineReady = useCallback(() => {
+    const callbacks = engineReadyCallbacksRef.current;
+    engineReadyCallbacksRef.current = [];
+    callbacks.forEach((cb) => cb());
+  }, []);
   const startEngine = 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" } });
@@ -327,6 +348,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."
@@ -339,12 +361,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 = useRef(false);
   const open = useCallback(() => {
     dispatch({ type: "OPEN" });
@@ -361,16 +385,12 @@ function useSageDesk(config) {
     dispatch({ type: "CLOSE" });
   }, []);
   const waitForEngine = 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 = useCallback(
@@ -394,12 +414,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();
@@ -443,8 +471,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));
       }
@@ -462,11 +490,9 @@ function useSageDesk(config) {
     return () => document.removeEventListener("keydown", handler);
   }, [state.isOpen, close]);
   const activeChips = 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 };
 }
 
@@ -662,9 +688,9 @@ var PoweredBy = ({ dark = false }) => /* @__PURE__ */ jsxs("div", { style: {
     }
   )
 ] });
-function ClassicMessageBubble({ msg, accent }) {
+var ClassicMessageBubble = React.memo(function ClassicMessageBubble2({ msg, accent }) {
   const isBot = msg.role === "bot";
-  const renderedHtml = isBot ? parseMarkdown(msg.text) : msg.text;
+  const renderedHtml = useMemo2(() => isBot ? parseMarkdown(msg.text) : msg.text, [isBot, msg.text]);
   return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: isBot ? "flex-start" : "flex-end", gap: "4px" }, children: [
     msg.isFallback && /* @__PURE__ */ jsx("p", { style: { fontSize: "11px", fontWeight: 500, color: "#9b9aa3", margin: 0, padding: "0 4px", fontFamily: "inherit" }, children: "Not sure about that one" }),
     /* @__PURE__ */ jsx("div", { style: {
@@ -689,7 +715,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__ */ jsx("div", { style: { display: "flex", flexDirection: "column", alignItems: "flex-start", gap: "4px" }, children: /* @__PURE__ */ jsxs("div", { style: {
@@ -707,9 +733,9 @@ function ClassicTypingIndicator() {
     /* @__PURE__ */ jsx("span", { style: dot, className: "sd-r-dot-3" })
   ] }) });
 }
-function LightMessageBubble({ msg, accent, agentName }) {
+var LightMessageBubble = React.memo(function LightMessageBubble2({ msg, accent, agentName }) {
   const isBot = msg.role === "bot";
-  const renderedHtml = isBot ? parseMarkdown(msg.text) : msg.text;
+  const renderedHtml = useMemo2(() => isBot ? parseMarkdown(msg.text) : msg.text, [isBot, msg.text]);
   if (isBot) {
     return /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "10px" }, children: [
       /* @__PURE__ */ jsx("div", { style: {
@@ -744,7 +770,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__ */ jsxs("div", { style: { display: "flex", gap: "10px" }, children: [
@@ -772,9 +798,9 @@ function LightTypingIndicator({ accent }) {
     ] })
   ] });
 }
-function DarkMessageBubble({ msg, accent }) {
+var DarkMessageBubble = React.memo(function DarkMessageBubble2({ msg, accent }) {
   const isBot = msg.role === "bot";
-  const renderedHtml = isBot ? parseMarkdown(msg.text) : msg.text;
+  const renderedHtml = useMemo2(() => isBot ? parseMarkdown(msg.text) : msg.text, [isBot, msg.text]);
   return /* @__PURE__ */ jsxs("div", { style: {
     maxWidth: "85%",
     padding: "12px 14px",
@@ -792,7 +818,7 @@ function DarkMessageBubble({ msg, accent }) {
     msg.isFallback && /* @__PURE__ */ jsx("span", { style: { fontSize: "11px", color: "rgba(255,255,255,0.5)", display: "block", marginBottom: "4px" }, children: "Not sure about that one" }),
     isBot ? /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: renderedHtml } }) : /* @__PURE__ */ 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__ */ jsxs("div", { style: {
@@ -811,7 +837,7 @@ function DarkTypingIndicator() {
     /* @__PURE__ */ jsx("span", { style: dot, className: "sd-r-dot-3" })
   ] });
 }
-function renderClassic(p) {
+function ClassicTheme(p) {
   const {
     agent,
     state,
@@ -1000,7 +1026,7 @@ function renderClassic(p) {
     ] })
   ] });
 }
-function renderLight(p) {
+function LightTheme(p) {
   const {
     agent,
     state,
@@ -1188,7 +1214,7 @@ function renderLight(p) {
     ] })
   ] });
 }
-function renderDark(p) {
+function DarkTheme(p) {
   const {
     agent,
     state,
@@ -1425,7 +1451,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 = useMemo2(
+    () => ({ 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";
@@ -1504,7 +1533,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__ */ jsx(DarkTheme, { ...props }) : theme === "light" ? /* @__PURE__ */ jsx(LightTheme, { ...props }) : /* @__PURE__ */ jsx(ClassicTheme, { ...props });
   return createPortal(content, document.body);
 }
 export {