feat: llm fill-in

Author: drew-harris

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

@@ -4,11 +4,12 @@ import {
   BlockStack,
   AdminBlock,
   useApi,
-  TextField,
+  Text,
   Button,
   InlineStack,
   Banner,
   TextArea,
+  Icon,
 } from "@shopify/ui-extensions-react/admin";
 import { TrieveProvider } from "./TrieveProvider";
 import { useChunkExtraContent } from "./useChunkExtraContent";
@@ -37,8 +38,13 @@ function App() {
   const [isSaving, setIsSaving] = useState(false);
   const [showSuccess, setShowSuccess] = useState(false);
 
-  const { extraContent, updateContent } =
-    useChunkExtraContent(simplifiedProductId);
+  const {
+    extraContent,
+    updateContent,
+    generateAIDescription,
+    loading,
+    aiLoading,
+  } = useChunkExtraContent(simplifiedProductId);
 
   useEffect(() => {
     if (extraContent) {
@@ -64,11 +70,28 @@ function App() {
             Content saved successfully
           </Banner>
         )}
-        <TextArea
-          label="Product Content"
-          value={content}
-          onChange={setContent}
-        />
+        <BlockStack>
+          <InlineStack inlineAlignment="space-between" blockAlignment="end">
+            <Text>Extra Content</Text>
+            <Button
+              disabled={aiLoading}
+              variant="tertiary"
+              onPress={generateAIDescription}
+            >
+              <InlineStack blockAlignment="center" gap="small small">
+                <Icon name="WandMinor" />
+                {aiLoading ? "Generating..." : "Generate AI Description"}
+              </InlineStack>
+            </Button>
+          </InlineStack>
+          <TextArea
+            rows={4}
+            disabled={loading}
+            label=""
+            value={content}
+            onChange={setContent}
+          />
+        </BlockStack>
         <InlineStack gap="base" inlineAlignment="end">
           <Button onPress={handleSave} disabled={isSaving}>
             {isSaving ? "Saving..." : "Save Content"}

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

@@ -4,6 +4,8 @@ import { useTrieve } from "./TrieveProvider";
 export const useChunkExtraContent = (productId: string | undefined) => {
   const trieve = useTrieve();
   const [extraContent, setExtraContent] = useState<string>("");
+  const [loading, setLoading] = useState(true);
+  const [aiLoading, setAILoading] = useState(false);
 
   // Fetch current product extra content chunk
   const getData = async () => {
@@ -28,21 +30,65 @@ export const useChunkExtraContent = (productId: string | undefined) => {
     } catch {
       setExtraContent("");
     }
+    setLoading(false);
+  };
+
+  const generateAIDescription = async () => {
+    if (!productId) {
+      console.info("Tried to generate AI description without id");
+      return;
+    }
+    setLoading(true);
+    setAILoading(true);
+    const topic = await trieve.createTopic({
+      owner_id: "shopify-enrich-content-block",
+      first_user_message: "Describe this product",
+      name: "Shopify Enrich Content Block",
+    });
+
+    const message = await trieve.createMessage({
+      topic_id: topic.id,
+      new_message_content:
+        "Describe this product. Generate a description for an online shop. Keep it to 3 sentences maximum. Do not include an introduction or welcome message",
+      use_group_search: true,
+      filters: {
+        must: [
+          {
+            field: "group_tracking_ids",
+            match_all: [productId],
+          },
+        ],
+      },
+      llm_options: {
+        stream_response: false,
+      },
+    });
+
+    const response = message.split("||").at(1);
+    if (!response) {
+      console.error("No response from AI");
+      return;
+    }
+    setExtraContent(response);
+    setLoading(false);
+    setAILoading(false);
   };
 
   const updateContent = async (content: string) => {
     if (!productId) {
       console.info("Tried to update product content without id");
       return;
     }
+    setLoading(true);
 
-    const result = await trieve.createChunk({
+    await trieve.createChunk({
       chunk_html: content,
       tracking_id: `${productId}-pdp-content`,
       upsert_by_tracking_id: true,
       weight: 100,
       group_tracking_ids: [productId],
     });
+    setLoading(false);
   };
 
   useEffect(() => {
@@ -55,5 +101,8 @@ export const useChunkExtraContent = (productId: string | undefined) => {
   return {
     extraContent,
     updateContent,
+    generateAIDescription,
+    loading,
+    aiLoading,
   };
 };