sagedesk 1.0.0 → 2.0.0

package/dist/next/index.cjs

@@ -275,6 +275,17 @@ var init_fallback = __esm({
 });
 
 // src/react/useSageDesk.ts
+function logFallbackWarning(reason) {
+  if (!reason) return;
+  const messages = {
+    "auth-error": "[sagedesk] Support service authentication failed. Showing relevant knowledge instead.",
+    "quota-exceeded": "[sagedesk] Support service quota exhausted. Showing relevant knowledge instead.",
+    "timeout": "[sagedesk] Support service took too long to respond. Showing relevant knowledge instead.",
+    "api-error": "[sagedesk] Support service error. Showing relevant knowledge instead.",
+    "malformed-response": "[sagedesk] Support service returned invalid response. Showing relevant knowledge instead."
+  };
+  console.warn(messages[reason] || "[sagedesk] Support service unavailable. Showing relevant knowledge instead.");
+}
 function reducer(state, action) {
   switch (action.type) {
     case "OPEN":
@@ -319,6 +330,11 @@ function useSageDesk(config) {
   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" } });
+      return;
+    }
     dispatch({ type: "SET_ENGINE_STATUS", payload: { status: "loading-index" } });
     try {
       indexRef.current = await fetchIndex(config.indexUrl);
@@ -345,7 +361,7 @@ function useSageDesk(config) {
       embedderRef.current = new EmbedderRuntime();
       dispatch({ type: "SET_ENGINE_STATUS", payload: { status: "degraded" } });
     }
-  }, [config.indexUrl, config.agent.suggestedChips, addMessage]);
+  }, [config.mode, config.indexUrl, config.agent.suggestedChips, addMessage]);
   const greetingShownRef = (0, import_react.useRef)(false);
   const open = (0, import_react.useCallback)(() => {
     dispatch({ type: "OPEN" });
@@ -388,8 +404,37 @@ function useSageDesk(config) {
       }
       let botText;
       let isFallback = false;
-      let mode = "keyword";
-      if (!indexRef.current) {
+      let fallbackReason;
+      let retrievalMode = "keyword";
+      if (config.mode === "llm") {
+        if (!config.endpoint) {
+          console.warn('[sagedesk] LLM mode requires an "endpoint" prop.');
+          botText = getFallback(config.agent);
+          isFallback = true;
+        } else {
+          try {
+            const res = await fetch(config.endpoint, {
+              method: "POST",
+              headers: { "Content-Type": "application/json" },
+              body: JSON.stringify({ query: trimmed })
+            });
+            if (!res.ok) throw new Error(`HTTP ${res.status}`);
+            const data = await res.json();
+            if (data.isFallback || !data.answer) {
+              fallbackReason = data.fallbackReason;
+              logFallbackWarning(fallbackReason);
+              botText = getFallback(config.agent);
+              isFallback = true;
+            } else {
+              botText = data.answer;
+            }
+          } catch (err) {
+            console.warn("[sagedesk] Support service unavailable. Using cached knowledge instead.");
+            botText = getFallback(config.agent);
+            isFallback = true;
+          }
+        }
+      } else if (!indexRef.current) {
         botText = getFallback(config.agent);
         isFallback = true;
       } else {
@@ -400,7 +445,7 @@ function useSageDesk(config) {
             embedderRef.current,
             config.search
           );
-          mode = res.mode;
+          retrievalMode = res.mode;
           if (res.results.length > 0) {
             botText = buildAnswer(res.results);
           } else {
@@ -413,11 +458,13 @@ function useSageDesk(config) {
           isFallback = true;
         }
       }
-      const elapsed = Date.now() - typingStart;
-      const delayBase = mode === "keyword" || isFallback ? 800 : 3e3;
-      const minTypingMs = delayBase + Math.random() * 2e3;
-      const remaining = minTypingMs - elapsed;
-      if (remaining > 0) await new Promise((r) => setTimeout(r, remaining));
+      if (config.mode !== "llm") {
+        const elapsed = Date.now() - typingStart;
+        const delayBase = retrievalMode === "keyword" || isFallback ? 800 : 3e3;
+        const minTypingMs = delayBase + Math.random() * 2e3;
+        const remaining = minTypingMs - elapsed;
+        if (remaining > 0) await new Promise((r) => setTimeout(r, remaining));
+      }
       dispatch({ type: "SET_TYPING", payload: false });
       addMessage({ role: "bot", text: botText, isFallback });
     },
@@ -460,6 +507,60 @@ var init_useSageDesk = __esm({
   }
 });
 
+// src/react/markdownUtils.ts
+function parseMarkdown(markdown) {
+  const html = import_marked.marked.parse(markdown);
+  const sanitized = import_dompurify.default.sanitize(html, PURIFY_CONFIG);
+  return sanitized;
+}
+var import_marked, import_dompurify, PURIFY_CONFIG, HOOK_ALLOWLIST;
+var init_markdownUtils = __esm({
+  "src/react/markdownUtils.ts"() {
+    "use strict";
+    import_marked = require("marked");
+    import_dompurify = __toESM(require("dompurify"), 1);
+    import_marked.marked.setOptions({
+      breaks: true,
+      gfm: true,
+      pedantic: false
+    });
+    PURIFY_CONFIG = {
+      ALLOWED_TAGS: [
+        "p",
+        "br",
+        "strong",
+        "em",
+        "u",
+        "h1",
+        "h2",
+        "h3",
+        "h4",
+        "h5",
+        "h6",
+        "ul",
+        "ol",
+        "li",
+        "blockquote",
+        "code",
+        "pre",
+        "a",
+        "hr"
+      ],
+      ALLOWED_ATTR: ["href", "title", "target", "rel"],
+      ALLOW_DATA_ATTR: false
+    };
+    HOOK_ALLOWLIST = ["a"];
+    import_dompurify.default.addHook("afterSanitizeAttributes", (node) => {
+      if (HOOK_ALLOWLIST.includes(node.tagName.toLowerCase())) {
+        if (node.tagName.toLowerCase() === "a") {
+          node.setAttribute("target", "_blank");
+          node.setAttribute("rel", "noopener noreferrer");
+        }
+      }
+    });
+  }
+});
+
 // src/react/SageDeskWidget.tsx
 var SageDeskWidget_exports = {};
 __export(SageDeskWidget_exports, {
@@ -476,6 +577,7 @@ function injectStyles(theme) {
 }
 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: {
@@ -488,10 +590,9 @@ function ClassicMessageBubble({ msg, 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)`,
-      whiteSpace: "pre-wrap",
       wordBreak: "break-word",
       fontFamily: "inherit"
-    }, children: msg.text }),
+    }, 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",
@@ -521,6 +622,7 @@ function ClassicTypingIndicator() {
 }
 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: {
@@ -537,7 +639,7 @@ function LightMessageBubble({ msg, accent, 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", whiteSpace: "pre-wrap", wordBreak: "break-word" }, children: msg.text })
+        /* @__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 } }) })
       ] })
     ] });
   }
@@ -585,6 +687,7 @@ 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",
@@ -596,12 +699,11 @@ function DarkMessageBubble({ msg, accent }) {
     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)`,
-    whiteSpace: "pre-wrap",
     wordBreak: "break-word",
     fontFamily: "inherit"
-  }, children: [
+  }, 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" }),
-    msg.text
+    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() {
@@ -1221,16 +1323,22 @@ function renderDark(p) {
     ] })
   ] });
 }
-function SageDeskWidget({ indexUrl, agent, search: search2 }) {
-  if (!indexUrl) {
+function SageDeskWidget({ mode, indexUrl, endpoint, agent, search: search2 }) {
+  const resolvedMode = mode ?? "local";
+  if (!agent?.name) {
+    throw new Error('[sagedesk] Required prop "agent.name" is missing.');
+  }
+  if (resolvedMode === "local" && !indexUrl) {
     throw new Error(
-      '[sagedesk] Required prop "indexUrl" is missing. Run `npx sagedesk build` and pass the output path, e.g. indexUrl="/support-index.json".'
+      '[sagedesk] Required prop "indexUrl" is missing for local mode. Run `npx sagedesk build` and pass the output path, e.g. indexUrl="/support-index.json".'
     );
   }
-  if (!agent?.name) {
-    throw new Error('[sagedesk] Required prop "agent.name" is missing.');
+  if (resolvedMode === "llm" && !endpoint) {
+    throw new Error(
+      '[sagedesk] Required prop "endpoint" is missing for llm mode. Provide your backend route, e.g. endpoint="/api/sagedesk".'
+    );
   }
-  const config = { indexUrl, agent, search: search2 };
+  const config = { mode: resolvedMode, indexUrl, endpoint, agent, search: search2 };
   const { state, chips, open, close, submit } = useSageDesk(config);
   const theme = agent.theme ?? "classic";
   const accent = agent.accentColor ?? "#534AB7";
@@ -1243,7 +1351,7 @@ function SageDeskWidget({ indexUrl, agent, search: search2 }) {
   const triggerRef = (0, import_react2.useRef)(null);
   const [mounted, setMounted] = (0, import_react2.useState)(false);
   (0, import_react2.useEffect)(() => {
-    if (!indexUrl.startsWith("/") && !indexUrl.startsWith("http")) {
+    if (resolvedMode === "local" && indexUrl && !indexUrl.startsWith("/") && !indexUrl.startsWith("http")) {
       console.warn(
         `[sagedesk] indexUrl "${indexUrl}" looks like a relative path. It should start with "/" so it resolves correctly from any page.`
       );
@@ -1285,7 +1393,7 @@ function SageDeskWidget({ indexUrl, agent, search: search2 }) {
     [handleSubmit]
   );
   if (!mounted || typeof document === "undefined") return null;
-  const showPoweredBy = agent.poweredBy !== false;
+  const showPoweredBy = true;
   const showChips = chips.length > 0;
   const panelClass = isClosing ? "sd-r-closing" : state.isOpen ? "sd-r-opening" : "";
   const props = {
@@ -1319,6 +1427,7 @@ var init_SageDeskWidget = __esm({
     import_react2 = require("react");
     import_react_dom = require("react-dom");
     init_useSageDesk();
+    init_markdownUtils();
     import_jsx_runtime = require("react/jsx-runtime");
     STYLE_ID = "sagedesk-widget-styles";
     SHARED = `
@@ -1347,6 +1456,28 @@ var init_SageDeskWidget = __esm({
   }
   .sd-r-scrollable::-webkit-scrollbar { display: none !important; }
   .sd-r-scrollable > * { flex-shrink: 0 !important; }
+  .sd-r-markdown h1, .sd-r-markdown h2, .sd-r-markdown h3, .sd-r-markdown h4, .sd-r-markdown h5, .sd-r-markdown h6 {
+    margin: 12px 0 8px 0 !important; font-weight: 600 !important; line-height: 1.3 !important;
+  }
+  .sd-r-markdown h1 { font-size: 1.3em !important; }
+  .sd-r-markdown h2 { font-size: 1.2em !important; }
+  .sd-r-markdown h3 { font-size: 1.1em !important; }
+  .sd-r-markdown h4, .sd-r-markdown h5, .sd-r-markdown h6 { font-size: 1em !important; }
+  .sd-r-markdown strong { font-weight: 600 !important; }
+  .sd-r-markdown em { font-style: italic !important; }
+  .sd-r-markdown u { text-decoration: underline !important; }
+  .sd-r-markdown ul, .sd-r-markdown ol { margin: 8px 0 !important; padding-left: 20px !important; }
+  .sd-r-markdown li { margin: 4px 0 !important; }
+  .sd-r-markdown blockquote { margin: 8px 0 !important; padding-left: 12px !important; border-left: 3px solid currentColor !important; opacity: 0.8 !important; }
+  .sd-r-markdown code { font-family: 'Monaco', 'Courier New', monospace !important; font-size: 0.9em !important; padding: 2px 4px !important; background: rgba(0,0,0,0.05) !important; border-radius: 3px !important; }
+  .sd-r-markdown pre { background: rgba(0,0,0,0.05) !important; padding: 8px 10px !important; border-radius: 6px !important; overflow-x: auto !important; margin: 8px 0 !important; }
+  .sd-r-markdown pre code { background: none !important; padding: 0 !important; }
+  .sd-r-markdown hr { border: none !important; border-top: 1px solid currentColor !important; opacity: 0.3 !important; margin: 10px 0 !important; }
+  .sd-r-markdown a { text-decoration: underline !important; opacity: 0.9 !important; }
+  .sd-r-markdown a:hover { opacity: 1 !important; }
+  .sd-r-markdown p { margin: 6px 0 !important; }
+  .sd-r-markdown > *:first-child { margin-top: 0 !important; }
+  .sd-r-markdown > *:last-child { margin-bottom: 0 !important; }
   @media (max-width: 420px) {
     .sd-r-panel {
       bottom: 0 !important; right: 0 !important; left: 0 !important;
@@ -1424,7 +1555,7 @@ var init_SageDeskWidget = __esm({
         {
           href: "https://github.com/mzeeshanwahid/sagedesk",
           target: "_blank",
-          rel: "noopener noreferrer",
+          rel: "noopener",
           style: {
             color: dark ? "rgba(255,255,255,0.7)" : "#5a5a64",
             fontWeight: 500,
@@ -1457,17 +1588,23 @@ var LazyWidget = (0, import_react3.lazy)(
 function SageDeskNext(props) {
   const [mounted, setMounted] = (0, import_react3.useState)(false);
   (0, import_react3.useEffect)(() => {
-    if (!props.indexUrl) {
+    const mode = props.mode ?? "local";
+    if (mode === "local" && !props.indexUrl) {
       console.warn(
         '[sagedesk] Missing required prop: indexUrl. The widget will not load.\nMake sure you ran `npx sagedesk build` and are passing indexUrl="/support-index.json" (or wherever you placed the output file in public/).'
       );
-    } else if (!props.indexUrl.startsWith("/") && !props.indexUrl.startsWith("http")) {
+    } else if (mode === "llm" && !props.endpoint) {
+      console.warn(
+        '[sagedesk] Missing required prop: endpoint for LLM mode. The widget will not load.\nProvide your backend route, e.g. endpoint="/api/sagedesk".'
+      );
+    }
+    if (props.indexUrl && !props.indexUrl.startsWith("/") && !props.indexUrl.startsWith("http")) {
       console.warn(
         `[sagedesk] indexUrl "${props.indexUrl}" looks like a relative path. It should start with "/" (e.g. "/support-index.json") so it resolves correctly from any page.`
       );
     }
     setMounted(true);
-  }, []);
+  }, [props.mode, props.indexUrl, props.endpoint]);
   if (!mounted) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react3.Suspense, { fallback: null, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(LazyWidget, { ...props }) });
 }