@usepanacea/react 0.1.0 → 0.1.3

package/dist/index.js

@@ -1,4 +1,4 @@
-import { createContext, useMemo, useState, useRef, useCallback, useEffect, useContext } from 'react';
+import { createContext, useMemo, useState, useRef, useEffect, useCallback, useContext } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { cva } from 'class-variance-authority';
 import { clsx } from 'clsx';
@@ -80,6 +80,42 @@ function PanaceaProvider({
   const [liveEscalationId, setLiveEscalationId] = useState(null);
   const [liveMessages, setLiveMessages] = useState([]);
   const [isOpen, setIsOpen] = useState(false);
+  useEffect(() => {
+    if (!customerToken) return;
+    let cancelled = false;
+    async function tryResume() {
+      try {
+        const token = await tokenMgr.getToken();
+        const url = new URL(`${apiBase}/api/v1/sessions/resume`);
+        url.searchParams.set("customerToken", customerToken);
+        const res = await fetch(url.toString(), {
+          headers: { Authorization: `Bearer ${token}` }
+        });
+        if (!res.ok || cancelled) return;
+        const data = await res.json();
+        const resumedId = data?.session?.sessionId ?? null;
+        if (!resumedId || cancelled) return;
+        sessionId.current = resumedId;
+        const turnsRes = await fetch(`${apiBase}/api/v1/sessions/${resumedId}/turns`, {
+          headers: { Authorization: `Bearer ${token}` }
+        });
+        if (!turnsRes.ok || cancelled) return;
+        const turnsData = await turnsRes.json();
+        const rawTurns = turnsData?.data?.turns ?? turnsData?.turns ?? [];
+        if (cancelled) return;
+        const hydrated = rawTurns.flatMap((t) => [
+          { role: "user", content: t.query },
+          { role: "assistant", content: t.response }
+        ]);
+        if (hydrated.length > 0) setTurns(hydrated);
+      } catch {
+      }
+    }
+    void tryResume();
+    return () => {
+      cancelled = true;
+    };
+  }, [customerToken, apiBase]);
   const value = useMemo(
     () => ({
       config,
@@ -99,23 +135,12 @@ function PanaceaProvider({
       isOpen,
       setIsOpen
     }),
-    [
-      config,
-      apiBase,
-      tokenMgr,
-      turns,
-      loading,
-      streaming,
-      liveEscalationId,
-      liveMessages,
-      isOpen
-    ]
+    [config, apiBase, tokenMgr, turns, loading, streaming, liveEscalationId, liveMessages, isOpen]
   );
   return /* @__PURE__ */ jsx(PanaceaContext.Provider, { value, children });
 }
 function useChat() {
   const {
-    config,
     apiBase,
     getToken,
     turns,
@@ -134,17 +159,14 @@ function useChat() {
         setTurns((prev) => [...prev, { role: "user", content: message }]);
         try {
           const token = await getToken();
-          await fetch(
-            `${apiBase}/api/v1/inbox/${liveEscalationId}/customer-message`,
-            {
-              method: "POST",
-              headers: {
-                "Content-Type": "application/json",
-                Authorization: `Bearer ${token}`
-              },
-              body: JSON.stringify({ content: message })
-            }
-          );
+          await fetch(`${apiBase}/api/v1/inbox/${liveEscalationId}/customer-message`, {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json",
+              Authorization: `Bearer ${token}`
+            },
+            body: JSON.stringify({ content: message })
+          });
         } catch {
         }
         return;
@@ -230,32 +252,21 @@ function useChat() {
         setStreaming("");
       }
     },
-    [
-      apiBase,
-      getToken,
-      liveEscalationId,
-      sessionId,
-      setLoading,
-      setStreaming,
-      setTurns
-    ]
+    [apiBase, getToken, liveEscalationId, sessionId, setLoading, setStreaming, setTurns]
   );
   const escalate = useCallback(
     async (reason = "Customer requested human support") => {
       if (!sessionId.current) return;
       try {
         const token = await getToken();
-        const res = await fetch(
-          `${apiBase}/api/v1/sessions/${sessionId.current}/escalate`,
-          {
-            method: "POST",
-            headers: {
-              "Content-Type": "application/json",
-              Authorization: `Bearer ${token}`
-            },
-            body: JSON.stringify({ reason })
-          }
-        );
+        const res = await fetch(`${apiBase}/api/v1/sessions/${sessionId.current}/escalate`, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${token}`
+          },
+          body: JSON.stringify({ reason })
+        });
         if (res.ok) {
           const data = await res.json();
           const id = data?.data?.escalationId ?? data?.escalationId;
@@ -269,22 +280,17 @@ function useChat() {
   const react = useCallback(
     async (turnIndex, reaction) => {
       if (!sessionId.current) return;
-      setTurns(
-        (prev) => prev.map((t, i) => i === turnIndex ? { ...t, reaction } : t)
-      );
+      setTurns((prev) => prev.map((t, i) => i === turnIndex ? { ...t, reaction } : t));
       try {
         const token = await getToken();
-        await fetch(
-          `${apiBase}/api/v1/sessions/${sessionId.current}/reaction`,
-          {
-            method: "POST",
-            headers: {
-              "Content-Type": "application/json",
-              Authorization: `Bearer ${token}`
-            },
-            body: JSON.stringify({ reaction, turnIndex })
-          }
-        );
+        await fetch(`${apiBase}/api/v1/sessions/${sessionId.current}/reaction`, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${token}`
+          },
+          body: JSON.stringify({ reaction, turnIndex })
+        });
       } catch {
       }
     },
@@ -295,6 +301,24 @@ function useChat() {
     setStreaming("");
     sessionId.current = null;
   }, [sessionId, setStreaming, setTurns]);
+  const setPageContext = useCallback(
+    async (ctx) => {
+      if (!sessionId.current) return;
+      try {
+        const token = await getToken();
+        await fetch(`${apiBase}/api/v1/sessions/${sessionId.current}`, {
+          method: "PATCH",
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${token}`
+          },
+          body: JSON.stringify({ pageContext: ctx })
+        });
+      } catch {
+      }
+    },
+    [apiBase, getToken, sessionId]
+  );
   return {
     turns,
     loading,
@@ -304,27 +328,21 @@ function useChat() {
     send,
     escalate,
     react,
+    setPageContext,
     reset
   };
 }
 function useLiveSession() {
-  const {
-    apiBase,
-    getToken,
-    liveEscalationId,
-    liveMessages,
-    setLiveMessages
-  } = usePanaceaContext();
+  const { apiBase, getToken, liveEscalationId, liveMessages, setLiveMessages } = usePanaceaContext();
   const seenIds = useRef(/* @__PURE__ */ new Set());
   useEffect(() => {
     if (!liveEscalationId) return;
     const poll = async () => {
       try {
         const token = await getToken();
-        const res = await fetch(
-          `${apiBase}/api/v1/inbox/${liveEscalationId}/messages`,
-          { headers: { Authorization: `Bearer ${token}` } }
-        );
+        const res = await fetch(`${apiBase}/api/v1/inbox/${liveEscalationId}/messages`, {
+          headers: { Authorization: `Bearer ${token}` }
+        });
         if (!res.ok) return;
         const data = await res.json();
         const all = data?.data?.messages ?? data?.messages ?? [];
@@ -345,17 +363,14 @@ function useLiveSession() {
       if (!liveEscalationId) return;
       try {
         const token = await getToken();
-        await fetch(
-          `${apiBase}/api/v1/inbox/${liveEscalationId}/customer-message`,
-          {
-            method: "POST",
-            headers: {
-              "Content-Type": "application/json",
-              Authorization: `Bearer ${token}`
-            },
-            body: JSON.stringify({ content })
-          }
-        );
+        await fetch(`${apiBase}/api/v1/inbox/${liveEscalationId}/customer-message`, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${token}`
+          },
+          body: JSON.stringify({ content })
+        });
       } catch {
       }
     },
@@ -376,6 +391,55 @@ function useWidget() {
   const toggle = useCallback(() => setIsOpen((v) => !v), [setIsOpen]);
   return { isOpen, open, close, toggle };
 }
+function useSessionHistory() {
+  const { apiBase, getToken, config, setTurns, sessionId: activeSessionIdRef } = usePanaceaContext();
+  const [sessions, setSessions] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const fetchSessions = useCallback(async () => {
+    if (!config.customerToken) return;
+    setLoading(true);
+    try {
+      const token = await getToken();
+      const url = new URL(`${apiBase}/api/v1/sessions`);
+      url.searchParams.set("customerToken", config.customerToken);
+      const res = await fetch(url.toString(), {
+        headers: { Authorization: `Bearer ${token}` }
+      });
+      if (!res.ok) return;
+      const data = await res.json();
+      const list = Array.isArray(data) ? data : data?.data ?? data?.sessions ?? [];
+      setSessions(list);
+    } catch {
+    } finally {
+      setLoading(false);
+    }
+  }, [apiBase, getToken, config.customerToken]);
+  useEffect(() => {
+    void fetchSessions();
+  }, [fetchSessions]);
+  const loadSession = useCallback(
+    async (sessionId) => {
+      try {
+        const token = await getToken();
+        const res = await fetch(`${apiBase}/api/v1/sessions/${sessionId}/turns`, {
+          headers: { Authorization: `Bearer ${token}` }
+        });
+        if (!res.ok) return;
+        const data = await res.json();
+        const raw = data?.data?.turns ?? data?.turns ?? [];
+        const turns = raw.flatMap((t) => [
+          { role: "user", content: t.query },
+          { role: "assistant", content: t.response }
+        ]);
+        activeSessionIdRef.current = sessionId;
+        setTurns(turns);
+      } catch {
+      }
+    },
+    [apiBase, getToken, setTurns, activeSessionIdRef]
+  );
+  return { sessions, loading, loadSession, refresh: fetchSessions };
+}
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
@@ -415,6 +479,28 @@ function PanaceaFAB({ className }) {
     }
   );
 }
+function renderContent(text) {
+  const parts = text.split(/(\[\[[^\]]+\]\])/g);
+  return parts.map((part, i) => {
+    const m = part.match(/^\[\[(?:([^|\]]+)\|)?([^\]]+)\]\]$/);
+    if (m) {
+      const label = (m[1] ?? m[2] ?? part).trim();
+      return /* @__PURE__ */ jsxs(
+        "span",
+        {
+          className: "inline-flex items-center gap-0.5 rounded bg-blue-50 px-1 py-0.5 text-xs font-medium text-blue-700",
+          children: [
+            /* @__PURE__ */ jsx("svg", { className: "inline size-3 shrink-0", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M2 2h5v2H4v8h8v-3h2v5H2V2zm7 0h5v5h-2V4.414L6.707 9.707 5.293 8.293 10.586 3H9V2z" }) }),
+            label
+          ]
+        },
+        i
+      );
+    }
+    if (!part) return null;
+    return /* @__PURE__ */ jsx("span", { children: part }, i);
+  }).filter(Boolean);
+}
 function Bubble({ turn }) {
   const isUser = turn.role === "user";
   const isAgent = turn.isLiveAgent;
@@ -427,7 +513,7 @@ function Bubble({ turn }) {
           "max-w-[82%] rounded-2xl px-3.5 py-2.5 text-sm leading-relaxed",
           isUser ? "rounded-tr-sm bg-primary text-primary-foreground" : isAgent ? "rounded-tl-sm bg-blue-100 text-blue-900" : "rounded-tl-sm bg-muted text-foreground"
         ),
-        children: turn.content
+        children: isUser ? turn.content : renderContent(turn.content)
       }
     )
   ] });
@@ -535,7 +621,81 @@ function PanaceaChat({
     )
   ] });
 }
+function formatDate(iso) {
+  try {
+    return new Intl.DateTimeFormat(void 0, {
+      month: "short",
+      day: "numeric",
+      hour: "2-digit",
+      minute: "2-digit"
+    }).format(new Date(iso));
+  } catch {
+    return iso;
+  }
+}
+function PanaceaHistory({ onSessionLoaded, className }) {
+  const { config } = usePanaceaContext();
+  const { sessions, loading, loadSession } = useSessionHistory();
+  const [active, setActive] = useState(null);
+  const [loadingId, setLoadingId] = useState(null);
+  if (!config.customerToken) {
+    return /* @__PURE__ */ jsx("div", { className: cn("flex flex-col items-center justify-center gap-2 py-8 text-center text-sm text-muted-foreground", className), children: /* @__PURE__ */ jsx("span", { children: "Sign in to see your conversation history." }) });
+  }
+  if (loading) {
+    return /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-2 p-3", className), children: [1, 2, 3].map((i) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "h-14 animate-pulse rounded-lg bg-muted"
+      },
+      i
+    )) });
+  }
+  if (sessions.length === 0) {
+    return /* @__PURE__ */ jsx("div", { className: cn("flex flex-col items-center justify-center gap-2 py-8 text-center text-sm text-muted-foreground", className), children: /* @__PURE__ */ jsx("span", { children: "No previous conversations found." }) });
+  }
+  async function handleLoad(session) {
+    setLoadingId(session.sessionId);
+    await loadSession(session.sessionId);
+    setActive(session.sessionId);
+    setLoadingId(null);
+    onSessionLoaded?.(session.sessionId);
+  }
+  return /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-1 overflow-y-auto p-2", className), children: sessions.map((session) => {
+    const isActive = active === session.sessionId;
+    const isLoading = loadingId === session.sessionId;
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: () => void handleLoad(session),
+        disabled: isLoading,
+        className: cn(
+          "flex w-full flex-col gap-0.5 rounded-lg px-3 py-2.5 text-left text-sm transition-colors hover:bg-accent disabled:cursor-wait",
+          isActive && "bg-accent"
+        ),
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "truncate font-medium leading-snug text-foreground", children: session.preview ?? "Conversation" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs text-muted-foreground", children: [
+            /* @__PURE__ */ jsx("span", { children: formatDate(session.createdAt) }),
+            session.turnCount !== void 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: "\xB7" }),
+              /* @__PURE__ */ jsxs("span", { children: [
+                session.turnCount,
+                " ",
+                session.turnCount === 1 ? "message" : "messages"
+              ] })
+            ] }),
+            isLoading && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: "\xB7" }),
+              /* @__PURE__ */ jsx("span", { children: "Loading\u2026" })
+            ] })
+          ] })
+        ]
+      },
+      session.sessionId
+    );
+  }) });
+}
 
-export { PanaceaChat, PanaceaFAB, PanaceaInput, PanaceaMessages, PanaceaProvider, useChat, useLiveSession, useWidget };
+export { PanaceaChat, PanaceaFAB, PanaceaHistory, PanaceaInput, PanaceaMessages, PanaceaProvider, useChat, useLiveSession, useSessionHistory, useWidget };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map