@streamoid/catalogix-chat 0.2.21 → 0.2.23

package/dist/index.js

@@ -1,5 +1,5 @@
 // src/CatalogixChat.tsx
-import { useEffect as useEffect8 } from "react";
+import { useEffect as useEffect9 } from "react";
 
 // src/api.ts
 var _config = {
@@ -3078,14 +3078,15 @@ 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,
-  Info as Info2,
+  Send as Send2,
   Loader2 as Loader26,
   X as X2,
   RefreshCw
@@ -3152,20 +3153,102 @@ async function mergeFeed(fileUrl, feedFormat, changes) {
     }
   );
 }
+async function fetchValidValues(sourceMp, marketplaceOv, category, attribute) {
+  const { catalogixBaseUrl } = getApiConfig();
+  const params = new URLSearchParams({
+    response_style: "light",
+    category,
+    attribute
+  });
+  const url = `${catalogixBaseUrl}/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]);
-  if (readOnly || !hasError) {
+  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 +3265,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,24 +3304,35 @@ 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
       ]
     }
   );
 }
-function MissingAttributesBanner({ text }) {
-  const [open, setOpen] = useState8(false);
+function MissingAttributesBanner({ text, defaultOpen = false }) {
+  const [open, setOpen] = useState8(defaultOpen);
   const attrs = text.split(",").map((s) => s.trim().replace(/^'|'$/g, ""));
   const preview = attrs.slice(0, 3);
-  return /* @__PURE__ */ jsxs11("div", { className: "text-xs text-muted-foreground px-2 py-1.5 border-t border-dashed bg-muted/30", children: [
+  return /* @__PURE__ */ jsxs11("div", { className: "text-xs px-2 py-1.5 border-t border-dashed border-amber-300/60 bg-amber-50/40 dark:bg-amber-950/20 text-amber-700 dark:text-amber-400", children: [
     /* @__PURE__ */ jsxs11(
       "button",
       {
         type: "button",
-        className: "flex items-center gap-1 hover:text-foreground transition-colors",
+        className: "flex items-center gap-1 hover:text-amber-900 dark:hover:text-amber-300 transition-colors",
         onClick: () => setOpen((v) => !v),
         children: [
-          /* @__PURE__ */ jsx22(Info2, { className: "h-3 w-3" }),
+          /* @__PURE__ */ jsx22(AlertTriangle2, { className: "h-3 w-3" }),
           /* @__PURE__ */ jsx22("span", { className: "font-medium", children: "Missing attributes:" }),
           !open && /* @__PURE__ */ jsxs11("span", { children: [
             preview.join(", "),
@@ -3344,6 +3441,13 @@ function EditFeed({
         editedRowIndices.add(idx);
       }
       if (editedRowIndices.size === 0) {
+        if (errorCount === 0) {
+          onSubmit(
+            { transformedUrl },
+            "No critical errors. Proceeding with current feed."
+          );
+          return;
+        }
         setErrorMsg("No cells have been edited. Please fix the highlighted values first.");
         setIsLoading(false);
         return;
@@ -3409,6 +3513,7 @@ function EditFeed({
     rowNumbers,
     columns,
     editedCells,
+    errorCount,
     storeId,
     feedFileType,
     mappingKey,
@@ -3420,17 +3525,22 @@ function EditFeed({
     /* @__PURE__ */ jsx22("div", { className: "flex items-center justify-between px-1", children: /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-2", children: [
       /* @__PURE__ */ jsx22(AlertTriangle2, { className: "h-4 w-4 text-destructive" }),
       /* @__PURE__ */ jsx22("span", { className: "font-medium text-sm", children: "Feed Validation Issues" }),
-      /* @__PURE__ */ jsxs11(Badge, { variant: "destructive", className: "text-[10px]", children: [
+      errorCount > 0 && /* @__PURE__ */ jsxs11(Badge, { variant: "destructive", className: "text-[10px]", children: [
         errorCount,
         " error",
         errorCount !== 1 ? "s" : ""
       ] }),
+      dataIssuesRaw.length > 0 && /* @__PURE__ */ jsxs11(Badge, { variant: "outline", className: "text-[10px] border-amber-400 text-amber-600 dark:text-amber-400", children: [
+        dataIssuesRaw.length,
+        " warning",
+        dataIssuesRaw.length !== 1 ? "s" : ""
+      ] }),
       editedCells.size > 0 && /* @__PURE__ */ jsxs11(Badge, { variant: "secondary", className: "text-[10px]", children: [
         editedCells.size,
         " edited"
       ] })
     ] }) }),
-    /* @__PURE__ */ jsx22("p", { className: "text-xs text-muted-foreground px-1", children: "Click on the highlighted cells to edit their values, then submit to re-validate." }),
+    /* @__PURE__ */ jsx22("p", { className: "text-xs text-muted-foreground px-1", children: errorCount > 0 ? "Click on the highlighted cells to edit their values, then submit to re-validate." : "No critical errors found. Review the warnings below and edit values if needed, or proceed." }),
     statusMsg && /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-2 px-2 py-1.5 rounded bg-muted text-xs text-muted-foreground", children: [
       /* @__PURE__ */ jsx22(Loader26, { className: "h-3 w-3 animate-spin" }),
       statusMsg
@@ -3461,12 +3571,18 @@ 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);
               })
             ] }),
-            missingAttrs && /* @__PURE__ */ jsx22("tr", { children: /* @__PURE__ */ jsx22("td", { colSpan: columns.length + 1, children: /* @__PURE__ */ jsx22(MissingAttributesBanner, { text: missingAttrs }) }) })
+            missingAttrs && /* @__PURE__ */ jsx22("tr", { children: /* @__PURE__ */ jsx22("td", { colSpan: columns.length + 1, children: /* @__PURE__ */ jsx22(MissingAttributesBanner, { text: missingAttrs, defaultOpen: errorCount === 0 }) }) })
           ] }, rowIdx);
         }),
         rows.length === 0 && /* @__PURE__ */ jsx22(TableRow, { children: /* @__PURE__ */ jsx22(
@@ -3502,8 +3618,8 @@ function EditFeed({
           className: "gap-1.5",
           disabled: isLoading,
           children: [
-            isLoading ? /* @__PURE__ */ jsx22(Loader26, { className: "h-3.5 w-3.5 animate-spin" }) : /* @__PURE__ */ jsx22(RefreshCw, { className: "h-3.5 w-3.5" }),
-            "Fix & Re-validate"
+            isLoading ? /* @__PURE__ */ jsx22(Loader26, { className: "h-3.5 w-3.5 animate-spin" }) : errorCount > 0 ? /* @__PURE__ */ jsx22(RefreshCw, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx22(Send2, { className: "h-3.5 w-3.5" }),
+            errorCount > 0 ? "Fix & Re-validate" : editedCells.size > 0 ? "Fix & Re-validate" : "Proceed"
           ]
         }
       )
@@ -3512,7 +3628,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
@@ -4001,14 +4117,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 = {};
@@ -4024,7 +4140,7 @@ function ProductAutomation({
       if (sorted.length > 0) setExpandedGroups([sorted[0]]);
     }).catch(console.error).finally(() => setLoading(false));
   }, [storeId]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (!selected) {
       setSchema([]);
       setConfigs({});
@@ -4043,7 +4159,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) {
@@ -4299,7 +4415,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({
@@ -4313,7 +4429,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(
@@ -4448,11 +4564,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) => {
@@ -4467,7 +4583,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;
@@ -4598,7 +4714,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.21",
+  "version": "0.2.23",
   "description": "Catalogix chat components for the Streamoid chat host — store creation, product selection, automations",
   "type": "module",
   "main": "./dist/index.js",