feat: enrich product ui

Author: drew-harris

clients/trieve-shopify-extension/extensions/enrich-content-block/src/ActionExtension.tsx

@@ -5,6 +5,10 @@ import {
   Text,
   AdminBlock,
   useApi,
+  TextField,
+  Button,
+  InlineStack,
+  Banner,
 } from "@shopify/ui-extensions-react/admin";
 import { TrieveProvider, useTrieve } from "./TrieveProvider";
 import { useChunkExtraContent } from "./useChunkExtraContent";
@@ -29,15 +33,49 @@ function App() {
   const { data } = useApi(TARGET);
   const productId = data.selected[0].id;
   const simplifiedProductId = extractShopifyProductId(productId);
+  const [content, setContent] = useState("");
+  const [isSaving, setIsSaving] = useState(false);
+  const [showSuccess, setShowSuccess] = useState(false);
 
   const { extraContent, loading, updateContent } =
     useChunkExtraContent(simplifiedProductId);
 
+  useEffect(() => {
+    if (extraContent) {
+      setContent(extraContent);
+    }
+  }, [extraContent]);
+
+  const handleSave = async () => {
+    setIsSaving(true);
+    try {
+      await updateContent(content);
+      setShowSuccess(true);
+      // Hide success message after 3 seconds
+      setTimeout(() => setShowSuccess(false), 3000);
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
   return (
     <AdminBlock title="Enrich Content">
-      <BlockStack>
-        <Text fontWeight="bold">Hi</Text>
-        <Text>Current product:{simplifiedProductId}</Text>
+      <BlockStack gap="base">
+        {showSuccess && (
+          <Banner tone="success" onDismiss={() => setShowSuccess(false)}>
+            Content saved successfully
+          </Banner>
+        )}
+        <TextField
+          label="Product Content"
+          value={content}
+          onChange={setContent}
+        />
+        <InlineStack gap="base" inlineAlignment="end">
+          <Button onPress={handleSave} disabled={isSaving}>
+            {isSaving ? "Saving..." : "Save Content"}
+          </Button>
+        </InlineStack>
       </BlockStack>
     </AdminBlock>
   );

clients/trieve-shopify-extension/extensions/enrich-content-block/src/useChunkExtraContent.ts

@@ -3,7 +3,7 @@ import { useTrieve } from "./TrieveProvider";
 
 export const useChunkExtraContent = (productId: string | undefined) => {
   const trieve = useTrieve();
-  const [extraContent, setExtraContent] = useState<string | null>(null);
+  const [extraContent, setExtraContent] = useState<string>("");
 
   const [loading, setLoading] = useState(true);
 
@@ -16,7 +16,12 @@ export const useChunkExtraContent = (productId: string | undefined) => {
     const result = await trieve.getChunkByTrackingId({
       trackingId: `${productId}-pdp-content`,
     });
+    if (!result) {
+      setExtraContent("");
+      return;
+    }
     if (!result.chunk_html) {
+      setExtraContent("");
       return;
     }
     setExtraContent(result.chunk_html);
@@ -28,15 +33,11 @@ export const useChunkExtraContent = (productId: string | undefined) => {
       return;
     }
 
-    // const result = await trieve.updateChunkByTrackingId({
-    //   trackingId: `${productId}-pdp-content`,
-    //   chunk_html: content,
-    // });
-    //
-    // if (!result.chunk_html) {
-    //   return;
-    // }
-    // setExtraContent(result.chunk_html);
+    const result = await trieve.createChunk({
+      chunk_html: content,
+      tracking_id: productId,
+      upsert_by_tracking_id: true,
+    });
   };
 
   useEffect(() => {