@streamoid/catalogix-chat 0.2.22 → 0.2.24

package/dist/index.d.ts

@@ -89,6 +89,7 @@ declare const catalogixManifest: readonly [{
  */
 interface ApiConfig {
     catalogixBaseUrl: string;
+    catalogingBaseUrl: string;
     keplerProxyPrefix: string;
 }
 declare function configureApi(config: Partial<ApiConfig>): void;

package/dist/index.js

@@ -1,9 +1,10 @@
 // src/CatalogixChat.tsx
-import { useEffect as useEffect8 } from "react";
+import { useEffect as useEffect9 } from "react";
 
 // src/api.ts
 var _config = {
   catalogixBaseUrl: "",
+  catalogingBaseUrl: "https://cataloging.streamoid.com",
   keplerProxyPrefix: "/kepler-api"
 };
 function configureApi(config) {
@@ -3078,12 +3079,13 @@ function MapAttributesChat({
 }
 
 // src/EditFeed/index.tsx
-import React8, { useState as useState8, useMemo as useMemo6, useCallback as useCallback6 } from "react";
+import React8, { useState as useState8, useMemo as useMemo6, useCallback as useCallback6, useRef as useRef5, useEffect as useEffect6 } from "react";
 import {
   AlertTriangle as AlertTriangle2,
   Check as Check3,
   ChevronDown as ChevronDown3,
   ChevronRight as ChevronRight3,
+  HelpCircle,
   Pencil as Pencil3,
   Send as Send2,
   Loader2 as Loader26,
@@ -3152,19 +3154,101 @@ async function mergeFeed(fileUrl, feedFormat, changes) {
     }
   );
 }
+async function fetchValidValues(sourceMp, marketplaceOv, category, attribute) {
+  const { catalogingBaseUrl } = getApiConfig();
+  const params = new URLSearchParams({
+    response_style: "light",
+    category,
+    attribute
+  });
+  const url = `${catalogingBaseUrl}/marketplaces/${sourceMp}/versions/${marketplaceOv}/structure?${params}`;
+  const resp = await fetchJson(url);
+  return resp[attribute] ?? Object.values(resp)[0] ?? [];
+}
 function EditableCell2({
   value,
   hasError,
   errorMessage,
   onChange,
-  readOnly
+  readOnly,
+  onFetchSuggestions
 }) {
   const [editing, setEditing] = useState8(false);
   const [draft, setDraft] = useState8(value);
+  const [showSuggestions, setShowSuggestions] = useState8(false);
+  const [suggestions, setSuggestions] = useState8(null);
+  const [loadingSuggestions, setLoadingSuggestions] = useState8(false);
+  const suggestionsRef = useRef5(null);
+  useEffect6(() => {
+    if (!showSuggestions) return;
+    const handler = (e) => {
+      if (suggestionsRef.current && !suggestionsRef.current.contains(e.target)) {
+        setShowSuggestions(false);
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [showSuggestions]);
+  const handleToggleSuggestions = useCallback6(
+    async (e) => {
+      e.stopPropagation();
+      if (showSuggestions) {
+        setShowSuggestions(false);
+        return;
+      }
+      setShowSuggestions(true);
+      if (suggestions !== null || !onFetchSuggestions) return;
+      setLoadingSuggestions(true);
+      try {
+        const vals = await onFetchSuggestions();
+        setSuggestions(vals);
+      } catch {
+        setSuggestions([]);
+      } finally {
+        setLoadingSuggestions(false);
+      }
+    },
+    [showSuggestions, suggestions, onFetchSuggestions]
+  );
+  const selectSuggestion = useCallback6(
+    (val) => {
+      onChange(val);
+      setDraft(val);
+      setShowSuggestions(false);
+    },
+    [onChange]
+  );
   const commit = useCallback6(() => {
     setEditing(false);
     if (draft !== value) onChange(draft);
   }, [draft, value, onChange]);
+  const suggestionsPanel = showSuggestions && hasError && onFetchSuggestions ? /* @__PURE__ */ jsx22(
+    "div",
+    {
+      ref: suggestionsRef,
+      className: "absolute left-0 top-full z-20 mt-1 rounded border bg-popover p-1.5 shadow-md max-w-[280px]",
+      children: loadingSuggestions ? /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-1.5 text-[10px] text-muted-foreground px-1 py-0.5", children: [
+        /* @__PURE__ */ jsx22(Loader26, { className: "h-3 w-3 animate-spin" }),
+        "Loading valid values\u2026"
+      ] }) : suggestions && suggestions.length > 0 ? /* @__PURE__ */ jsx22("div", { className: "flex flex-wrap gap-1 max-h-[120px] overflow-auto", children: suggestions.map((s) => /* @__PURE__ */ jsx22(
+        "button",
+        {
+          type: "button",
+          onClick: (e) => {
+            e.stopPropagation();
+            selectSuggestion(s);
+          },
+          className: cn(
+            "inline-flex items-center rounded-md border px-1.5 py-0.5 text-[10px] font-medium transition-colors",
+            "hover:bg-primary hover:text-primary-foreground cursor-pointer",
+            "border-border bg-muted/40 text-foreground"
+          ),
+          children: s
+        },
+        s
+      )) }) : /* @__PURE__ */ jsx22("p", { className: "text-[10px] text-muted-foreground px-1 py-0.5", children: "No valid values found." })
+    }
+  ) : null;
   if (readOnly) {
     return /* @__PURE__ */ jsxs11(
       "div",
@@ -3182,26 +3266,29 @@ function EditableCell2({
     );
   }
   if (editing) {
-    return /* @__PURE__ */ jsx22(
-      Input,
-      {
-        autoFocus: true,
-        value: draft,
-        onChange: (e) => setDraft(e.target.value),
-        onBlur: commit,
-        onKeyDown: (e) => {
-          if (e.key === "Enter") commit();
-          if (e.key === "Escape") {
-            setDraft(value);
-            setEditing(false);
-          }
-        },
-        className: cn(
-          "h-7 text-sm rounded px-1.5",
-          hasError && "border-destructive focus-visible:ring-destructive/30"
-        )
-      }
-    );
+    return /* @__PURE__ */ jsxs11("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx22(
+        Input,
+        {
+          autoFocus: true,
+          value: draft,
+          onChange: (e) => setDraft(e.target.value),
+          onBlur: commit,
+          onKeyDown: (e) => {
+            if (e.key === "Enter") commit();
+            if (e.key === "Escape") {
+              setDraft(value);
+              setEditing(false);
+            }
+          },
+          className: cn(
+            "h-7 text-sm rounded px-1.5",
+            hasError && "border-destructive focus-visible:ring-destructive/30"
+          )
+        }
+      ),
+      suggestionsPanel
+    ] });
   }
   return /* @__PURE__ */ jsxs11(
     "div",
@@ -3218,7 +3305,18 @@ function EditableCell2({
       children: [
         /* @__PURE__ */ jsx22("span", { className: "truncate max-w-[160px]", children: value }),
         /* @__PURE__ */ jsx22(Pencil3, { className: "h-3 w-3 shrink-0 opacity-0 group-hover:opacity-70 transition-opacity" }),
-        hasError && errorMessage && /* @__PURE__ */ jsx22("div", { className: "absolute left-0 top-full z-10 mt-1 hidden group-hover:block", children: /* @__PURE__ */ jsx22("div", { className: "rounded bg-destructive px-2 py-1 text-[10px] text-destructive-foreground shadow-md max-w-[260px] whitespace-normal", children: errorMessage }) })
+        hasError && onFetchSuggestions && /* @__PURE__ */ jsx22(
+          "button",
+          {
+            type: "button",
+            onClick: handleToggleSuggestions,
+            className: "shrink-0 rounded p-0.5 hover:bg-destructive/20 transition-colors",
+            title: "Show valid values",
+            children: /* @__PURE__ */ jsx22(HelpCircle, { className: "h-3 w-3" })
+          }
+        ),
+        hasError && errorMessage && !showSuggestions && /* @__PURE__ */ jsx22("div", { className: "absolute left-0 top-full z-10 mt-1 hidden group-hover:block", children: /* @__PURE__ */ jsx22("div", { className: "rounded bg-destructive px-2 py-1 text-[10px] text-destructive-foreground shadow-md max-w-[260px] whitespace-normal", children: errorMessage }) }),
+        suggestionsPanel
       ]
     }
   );
@@ -3474,7 +3572,13 @@ function EditFeed({
                     hasError: !!cellErr,
                     errorMessage: cellErr,
                     onChange: (val) => handleCellChange(rowIdx, col, val),
-                    readOnly: isLoading
+                    readOnly: isLoading,
+                    onFetchSuggestions: cellErr ? () => fetchValidValues(
+                      sourceMp,
+                      marketplaceOv,
+                      row["Category"] ?? "",
+                      col
+                    ) : void 0
                   }
                 ) }, col);
               })
@@ -3525,7 +3629,7 @@ function EditFeed({
 }
 
 // src/Automations/ProductAutomation.tsx
-import { useState as useState10, useEffect as useEffect6, useCallback as useCallback8, useRef as useRef5 } from "react";
+import { useState as useState10, useEffect as useEffect7, useCallback as useCallback8, useRef as useRef6 } from "react";
 import { ArrowLeft as ArrowLeft3, Search as Search4, Loader2 as Loader28, ChevronDown as ChevronDown4, Play } from "lucide-react";
 
 // src/Automations/api.ts
@@ -4014,14 +4118,14 @@ function ProductAutomation({
   const [loadingOptions, setLoadingOptions] = useState10({});
   const [schemaLoading, setSchemaLoading] = useState10(false);
   const [applying, setApplying] = useState10(false);
-  const configsRef = useRef5(configs);
+  const configsRef = useRef6(configs);
   configsRef.current = configs;
-  const optionsRef = useRef5(options);
+  const optionsRef = useRef6(options);
   optionsRef.current = options;
-  const loadingOptionsRef = useRef5(loadingOptions);
+  const loadingOptionsRef = useRef6(loadingOptions);
   loadingOptionsRef.current = loadingOptions;
   const productsCount = selectedProducts.includes("all") ? excludedProducts.length === 0 ? totalProducts : totalProducts - excludedProducts.length : productsCountProp;
-  useEffect6(() => {
+  useEffect7(() => {
     setLoading(true);
     fetchAutomationList(storeId, "product", true).then((data) => {
       const groups = {};
@@ -4037,7 +4141,7 @@ function ProductAutomation({
       if (sorted.length > 0) setExpandedGroups([sorted[0]]);
     }).catch(console.error).finally(() => setLoading(false));
   }, [storeId]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (!selected) {
       setSchema([]);
       setConfigs({});
@@ -4056,7 +4160,7 @@ function ProductAutomation({
       configsRef.current = defaults;
     }).catch(console.error).finally(() => setSchemaLoading(false));
   }, [selected, storeId]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (schema.length === 0) return;
     const flatItems = schema.flatMap((s) => s.mapping_parameters ?? [s]);
     for (const item of flatItems) {
@@ -4312,7 +4416,7 @@ function formatTimeSaved(totalSeconds) {
 }
 
 // src/Automations/StoreAutomation.tsx
-import { useState as useState11, useEffect as useEffect7, useCallback as useCallback9, useRef as useRef6 } from "react";
+import { useState as useState11, useEffect as useEffect8, useCallback as useCallback9, useRef as useRef7 } from "react";
 import { ArrowLeft as ArrowLeft4, Settings } from "lucide-react";
 import { Fragment as Fragment6, jsx as jsx25, jsxs as jsxs14 } from "react/jsx-runtime";
 function StoreAutomation({
@@ -4326,7 +4430,7 @@ function StoreAutomation({
   const [automations, setAutomations] = useState11([]);
   const [selectedConfigs, setSelectedConfigs] = useState11({ ...enabledAutomations });
   const [selectedAutomation, setSelectedAutomation] = useState11(null);
-  useEffect7(() => {
+  useEffect8(() => {
     setLoading(true);
     fetchAutomationList(storeId, "default").then((data) => {
       setAutomations(
@@ -4461,11 +4565,11 @@ function AutomationConfigEditor({
   );
   const [options, setOptions] = useState11({});
   const [loadingOptions, setLoadingOptions] = useState11({});
-  const configsRef = useRef6(configs);
+  const configsRef = useRef7(configs);
   configsRef.current = configs;
-  const optionsRef = useRef6(options);
+  const optionsRef = useRef7(options);
   optionsRef.current = options;
-  useEffect7(() => {
+  useEffect8(() => {
     if (!automation.isEnabled) return;
     setSchemaLoading(true);
     fetchAutomationSchema(storeId, automation.automation, "default").then((items) => {
@@ -4480,7 +4584,7 @@ function AutomationConfigEditor({
       }
     }).catch(console.error).finally(() => setSchemaLoading(false));
   }, [storeId, automation, initialConfigs]);
-  useEffect7(() => {
+  useEffect8(() => {
     if (schema.length === 0) return;
     for (const item of schema) {
       if (!item.curl) continue;
@@ -4611,7 +4715,7 @@ function CatalogixChat(props) {
   const filters = uiProps.filters ?? {};
   const selectedPageRange = uiProps.selectedPageRange ?? [];
   const enabledAutomations = uiProps.enabledAutomations ?? {};
-  useEffect8(() => {
+  useEffect9(() => {
     configureApi({ catalogixBaseUrl });
   }, [catalogixBaseUrl]);
   if (section === "select_products") {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamoid/catalogix-chat",
-  "version": "0.2.22",
+  "version": "0.2.24",
   "description": "Catalogix chat components for the Streamoid chat host — store creation, product selection, automations",
   "type": "module",
   "main": "./dist/index.js",