@akropolys/kiku 1.5.5 → 1.5.8

package/dist/index.js

@@ -1488,19 +1488,95 @@ var getFriendlyError = (err) => {
     return str;
   }
 };
-var LOADING_MESSAGES = [
-  "Walking down the aisle...",
-  "Consulting the blueprints...",
-  "Polishing the keys...",
-  "Checking the backyard...",
-  "Checking the inventory...",
-  "Inspecting the plumbing...",
-  "Asking the concierge...",
-  "Searching the shelves...",
-  "Measuring the square footage...",
-  "Dusting off the fireplace...",
-  "Asking the store clerk..."
-];
+function parseThinking(text) {
+  const openMatch = text.match(/<\s*thinking\s*>/i);
+  if (!openMatch) {
+    return { thinking: "", content: text, isComplete: true };
+  }
+  const openIdx = openMatch.index ?? 0;
+  const openTagLength = openMatch[0].length;
+  const start = openIdx + openTagLength;
+  const contentBefore = text.slice(0, openIdx);
+  const textAfterOpen = text.slice(start);
+  const closeMatch = textAfterOpen.match(/<\/\s*thinking\s*>/i);
+  if (!closeMatch) {
+    return {
+      thinking: textAfterOpen,
+      content: contentBefore,
+      isComplete: false
+    };
+  }
+  const closeIdx = closeMatch.index ?? 0;
+  const closeTagLength = closeMatch[0].length;
+  return {
+    thinking: textAfterOpen.slice(0, closeIdx),
+    content: contentBefore + textAfterOpen.slice(closeIdx + closeTagLength),
+    isComplete: true
+  };
+}
+function ThinkingBlock({ text, isComplete }) {
+  const [isOpen, setIsOpen] = (0, import_react5.useState)(true);
+  (0, import_react5.useEffect)(() => {
+    if (!isComplete) {
+      setIsOpen(true);
+    }
+  }, [isComplete]);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: {
+    marginBottom: "12px",
+    borderLeft: "2px solid #e4e4e7",
+    paddingLeft: "10px",
+    fontSize: "0.825rem",
+    backgroundColor: "rgba(244, 244, 245, 0.4)",
+    padding: "8px 10px",
+    borderRadius: "0 6px 6px 0"
+  }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+      "div",
+      {
+        onClick: () => setIsOpen(!isOpen),
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: "6px",
+          color: "#71717a",
+          cursor: "pointer",
+          fontWeight: 500,
+          userSelect: "none"
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", style: { animation: !isComplete ? "spin 3s linear infinite" : "none" }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M12 6v6l4 2" })
+            ] }),
+            "Thinking Process"
+          ] }),
+          !isComplete && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: {
+            width: "6px",
+            height: "6px",
+            borderRadius: "50%",
+            backgroundColor: "#3b82f6",
+            display: "inline-block",
+            animation: "hsk-pulse 1.2s infinite ease-in-out"
+          } }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: {
+            fontSize: "0.7rem",
+            marginLeft: "auto",
+            transform: isOpen ? "rotate(90deg)" : "none",
+            transition: "transform 0.1s"
+          }, children: "\u25B6" })
+        ]
+      }
+    ),
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: {
+      marginTop: "6px",
+      color: "#52525b",
+      whiteSpace: "pre-wrap",
+      lineHeight: "1.4",
+      fontStyle: "italic"
+    }, children: text })
+  ] });
+}
 var PROPERTY_CHIPS = [
   "3 bedroom apartments",
   "Houses under KSh 5,000,000",
@@ -1525,7 +1601,6 @@ function ChatModal({
   const client = (0, import_sdk6.useAkropolysContext)();
   const { messages, sources, loading, streaming, error, lastAction, lastIntent, send, reset, referencedIds } = (0, import_sdk4.useKiku)();
   const [input, setInput] = (0, import_react5.useState)("");
-  const [loadingMessageIndex, setLoadingMessageIndex] = (0, import_react5.useState)(0);
   const [attachments, setAttachments] = (0, import_react5.useState)([]);
   const imageInputRef = (0, import_react5.useRef)(null);
   const handleImageFiles = (files) => {
@@ -1581,16 +1656,6 @@ function ChatModal({
   const activeChips = chips === DEFAULT_CHIPS && isProperty ? PROPERTY_CHIPS : chips;
   const activeTitle = title === "Shopping Assistant" && isProperty ? "Property Assistant" : title;
   const activePlaceholder = placeholder === "Ask me anything \u2014 gifts, budget, use case\u2026" && isProperty ? "Ask me anything \u2014 location, budget, bedrooms\u2026" : placeholder;
-  (0, import_react5.useEffect)(() => {
-    if (loading && !streaming) {
-      const interval = setInterval(() => {
-        setLoadingMessageIndex((prev) => (prev + 1) % LOADING_MESSAGES.length);
-      }, 1500);
-      return () => clearInterval(interval);
-    } else {
-      setLoadingMessageIndex(0);
-    }
-  }, [loading, streaming]);
   const [selectedProduct, setSelectedProduct] = (0, import_react5.useState)(null);
   const bottomRef = (0, import_react5.useRef)(null);
   const textareaRef = (0, import_react5.useRef)(null);
@@ -1861,7 +1926,13 @@ function ChatModal({
               ] }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "hsk-cb-ai-msg", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hsk-cb-ai-icon", style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SparkleIcon2, {}) }),
                 /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "hsk-cb-ai-body", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hsk-cb-ai-text", children: renderMarkdown(displayContent) }),
+                  (() => {
+                    const { thinking, content, isComplete } = parseThinking(displayContent);
+                    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+                      thinking && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ThinkingBlock, { text: thinking, isComplete }),
+                      content && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hsk-cb-ai-text", children: renderMarkdown(content) })
+                    ] });
+                  })(),
                   isLast && lastIntent === "compare" && sources.length >= 2 && !replayMessages && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ComparisonMatrix, { sources, defaultCurrency }),
                   isLast && sources.length > 0 && lastIntent !== "compare" && lastAction?.type !== "request_phone" && lastAction?.type !== "awaiting_payment" && lastAction?.type !== "checkout" && !msg.cartSnapshot && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                     SourcesCarousel,
@@ -1927,7 +1998,7 @@ function ChatModal({
                       50% { opacity: 1; }
                     }
                   ` }),
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { fontSize: "0.85rem", color: "#6b7280", fontStyle: "italic", animation: "hsk-pulse 1.5s infinite ease-in-out" }, children: LOADING_MESSAGES[loadingMessageIndex] }),
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { fontSize: "0.85rem", color: "#6b7280", fontStyle: "italic", animation: "hsk-pulse 1.5s infinite ease-in-out" }, children: isProperty ? "Analyzing listings..." : "Searching catalog..." }),
                 /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "hsk-cb-typing", style: { margin: 0, alignSelf: "flex-start" }, children: [
                   /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hsk-cb-dot" }),
                   /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hsk-cb-dot" }),