Merge remote-tracking branch 'origin/master'

Author: adrians5j

cms-live-preview/5.40.x/README.md

@@ -13,7 +13,7 @@ To enable these extensions in your existing Webiny project, follow these steps:
 In your project, run:
 
 ```shell
-yarn webiny scaffold extension cms-live-preview
+yarn webiny extension cms-live-preview
 ```
 
 ### 2. Configure the `website` app
@@ -30,14 +30,15 @@ Add component styles to the `website` app, in `apps/website/public/index.html`:
 
 Add live preview route in `apps/website/src/App.tsx`:
 
-```tsx
+```diff tsx
 import React from "react";
 import { Website } from "@webiny/app-website";
-import { createLivePreviewRoute } from "@demo/live-preview-website";
++ import { createLivePreviewRoute } from "@demo/website";
 import "./App.scss";
 
 export const App = () => {
-  return <Website routes={[createLivePreviewRoute()]} />;
+-  return <Website/>;
++  return <Website routes={[createLivePreviewRoute()]} />;
 };
 ```
 

headless-cms/smart-seo-open-ai/5.41.x/extensions/smartSeoOpenAi/admin/package.json

@@ -7,7 +7,13 @@
     "webiny-extension-type:admin"
   ],
   "dependencies": {
-    "openai": "^4.33.0",
-    "react": "18.2.0"
+    "react": "18.2.0",
+    "graphql-tag": "2.12.6",
+    "@material-design-icons/svg": "0.14.13",
+    "@webiny/app-admin": "5.41.4",
+    "@webiny/app-headless-cms": "5.41.4",
+    "@webiny/form": "5.41.4",
+    "@webiny/ui": "5.41.4",
+    "@webiny/lexical-converter": "5.41.4"
   }
 }

headless-cms/smart-seo-open-ai/5.41.x/extensions/smartSeoOpenAi/admin/src/DecorateContentEntryFormBind.tsx

@@ -33,17 +33,17 @@ export const DecorateContentEntryFormBind = useBind.createDecorator(baseHook =>
             useEffect(() => {
                 // Track rich-text fields and SEO fields
                 if (field.type === "rich-text") {
-                    trackField(field.label, field.type, params.name, bind.value, bind.onChange);
+                    trackField(field.label, field.type, params.name, bind.value);
                 }
 
                 if (seoFields.includes(field.fieldId) && !parent) {
-                    trackField(field.label, field.fieldId, params.name, bind.value, bind.onChange);
+                    trackField(field.label, field.fieldId, params.name, bind.value);
                 }
-            }, [bind.value]);
+            }, [JSON.stringify(bind.value)]);
 
             return bind;
         } catch {
             return baseHook(params);
         }
     };
-});
+});

headless-cms/smart-seo-open-ai/5.41.x/extensions/smartSeoOpenAi/admin/src/FieldTracker.tsx

@@ -9,7 +9,6 @@ export interface FieldWithValue {
     path: string;
     type: string;
     label: string;
-    onChange: (value: any) => void;
 }
 
 interface FieldTrackerContext {
@@ -20,7 +19,6 @@ interface FieldTrackerContext {
         type: string,
         path: string,
         value: any,
-        onChange: (value: any) => void
     ) => void;
 }
 
@@ -33,14 +31,13 @@ const FieldTrackerContext = React.createContext<FieldTrackerContext | undefined>
 export const FieldTracker = ({ children }: FieldTrackerProps) => {
     const [fields, setFields] = useState<FieldWithValue[]>([]);
 
-    const trackField = useCallback((label:string, type:string, path:string, value:any, onChange: any) => {
+    const trackField = useCallback((label:string, type:string, path:string, value:any) => {
         setFields(fields => {
             const newValue: FieldWithValue = {
                 label,
                 type,
                 path,
                 value,
-                onChange
             };
 
             const index = fields.findIndex(trackedField => trackedField.path === path);
@@ -66,4 +63,4 @@ export const useFieldTracker = () => {
     }
 
     return context;
-};
+};

headless-cms/smart-seo-open-ai/5.41.x/extensions/smartSeoOpenAi/admin/src/SmartSeo.tsx

@@ -1,119 +1,120 @@
 import React, { useState } from "react";
-import OpenAI from "openai";
-import { ReactComponent as MagicIcon } from "@material-design-icons/svg/round/school.svg";
-import { ContentEntryEditorConfig } from "@webiny/app-headless-cms";
+import gql from "graphql-tag";
+import { useForm } from "@webiny/form";
+import { ContentEntryEditorConfig, useApolloClient } from "@webiny/app-headless-cms";
 import { ButtonSecondary, ButtonIcon } from "@webiny/ui/Button";
+import { ReactComponent as MagicIcon } from "@material-design-icons/svg/round/school.svg";
+import { useSnackbar } from "@webiny/app-admin";
 import { FieldWithValue, useFieldTracker } from "./FieldTracker";
 import { extractRichTextHtml } from "./extractFromRichText";
-import { useSnackbar } from "@webiny/app-admin";
-
-const OPENAI_API_KEY = String(process.env["WEBINY_ADMIN_OPEN_AI_API_KEY"]);
-
-const openai = new OpenAI({ apiKey: OPENAI_API_KEY, dangerouslyAllowBrowser: true });
-
-const prompt = `You will be provided with one or more paragraphs of HTML, and you need to extract a SEO optimized page title, a page summary, and up to 5 keywords. Response should be returned as a plain JSON object, with "title" field for the page title, "description" field for page summary, and "keywords" field as an array of keywords.`;
 
 const { Actions } = ContentEntryEditorConfig;
 
-const populateSeoTitle = (fields: FieldWithValue[], value: string) => {
-    const field = fields.find(field => field.type === "seoTitle");
-    if (!field) {
-        return;
-    }
-
-    field.onChange(value);
-};
-
-const populateSeoDescription = (fields: FieldWithValue[], value: string) => {
-    const field = fields.find(field => field.type === "seoDescription");
-    if (!field) {
-        return;
-    }
-
-    field.onChange(value);
-};
-
-interface Tag {
-    tagName: string;
-    tagValue: string;
-}
-
-const populateSeoKeywords = (fields: FieldWithValue[], keywords: string[]) => {
-    const field = fields.find(field => field.type === "seoMetaTags");
-    if (!field) {
-        console.warn("no meta tags field!");
-        return;
+const GENERATE_SEO_QUERY = gql`
+    query GenerateSeo($input: GenerateSeoInput!) {
+        generateSeo(input: $input) {
+            title
+            description
+            keywords
+        }
     }
-    const tags: Tag[] = Array.isArray(field.value) ? field.value : [];
-    const tagsWithoutKeywords = tags.filter(tag => tag.tagName !== "keywords");
+`;
 
-    field.onChange([
-        ...tagsWithoutKeywords,
-        { tagName: "keywords", tagValue: keywords.join(", ") }
-    ]);
-};
-
-/**
- * A button component to trigger OpenAI's GPT model to generate SEO fields.
- * Extracts rich-text content, sends it to GPT, and updates the form fields with the AI's suggestions.
- */
 const GetSeoData = () => {
+    const client = useApolloClient();
+    const form = useForm();
     const { showSnackbar } = useSnackbar();
     const [loading, setLoading] = useState(false);
     const { fields } = useFieldTracker();
 
     const askChatGpt = async () => {
-        let response;
         setLoading(true);
         try {
-            response = await openai.chat.completions.create({
-                model: "gpt-3.5-turbo",
-                messages: [
-                    {
-                        role: "system",
-                        content: prompt
-                    },
-                    {
-                        role: "user",
+            const { data } = await client.query({
+                query: GENERATE_SEO_QUERY,
+                variables: {
+                    input: {
                         content: extractRichTextHtml(fields).join("\n")
                     }
-                ],
-                temperature: 0.5,
-                max_tokens: 128,
-                top_p: 1
+                }
             });
-        } catch (e) {
-            console.log(e);
-        }
-        setLoading(false);
 
-        console.log("ChatGPT response", response);
-        try {
-            // const seo = {
-            //     title: "Node.js, Yarn, and AWS Setup Guide for Webiny",
-            //     description:
-            //         "Learn how to set up Node.js, yarn, and AWS account and user credentials for deploying Webiny. Make sure you have the required versions installed.",
-            //     keywords: ["Node.js", "Yarn", "AWS", "Webiny", "setup"]
-            // };
-            const seo = JSON.parse(response?.choices[0].message.content as string);
-            console.log("parsed response", seo);
-            populateSeoTitle(fields, seo.title);
-            populateSeoDescription(fields, seo.description);
-            populateSeoKeywords(fields, seo.keywords);
+            const seo = data?.generateSeo;
+            if (!seo) {
+                console.error("Invalid response received from AI.");
+                showSnackbar("No valid data received from AI.");
+                return;
+            }
+
+            populateSeoTitle(form, fields, seo.title);
+            populateSeoDescription(form, fields, seo.description);
+            populateSeoKeywords(form, fields, seo.keywords);
+
             showSnackbar("Success! We've populated the SEO fields with the recommended values.");
-        } catch (e) {
-            console.log(e);
+        } catch (err) {
+            console.error("Error during SEO generation:", err);
             showSnackbar("We were unable to get a recommendation from AI at this point.");
+        } finally {
+            setLoading(false);
         }
     };
 
     return (
-        <ButtonSecondary onClick={() => askChatGpt()} disabled={loading}>
+        <ButtonSecondary onClick={askChatGpt} disabled={loading}>
             <ButtonIcon icon={<MagicIcon />} /> AI-optimized SEO
         </ButtonSecondary>
     );
 };
 
+const populateSeoTitle = (
+    form: ReturnType<typeof useForm>,
+    fields: FieldWithValue[],
+    value: string
+) => {
+    const field = fields.find(field => field.type === "seoTitle");
+    if (field) {
+        form.setValue(field.path, value);
+    }
+};
+
+const populateSeoDescription = (
+    form: ReturnType<typeof useForm>,
+    fields: FieldWithValue[],
+    value: string
+) => {
+    const field = fields.find(field => field.type === "seoDescription");
+    if (field) {
+        form.setValue(field.path, value);
+    }
+};
+
+interface Tag {
+    tagName: string;
+    tagValue: string;
+}
+
+const populateSeoKeywords = (
+    form: ReturnType<typeof useForm>,
+    fields: FieldWithValue[],
+    keywords: string[]
+) => {
+    const field = fields.find(field => field.type === "seoMetaTags");
+    if (!field) {
+        console.warn("No meta tags field!");
+        return;
+    }
+
+    const tags: Tag[] = Array.isArray(field.value) ? field.value : [];
+    const tagsWithoutKeywords = tags.filter(tag => tag.tagName !== "keywords");
+
+    if (field) {
+        form.setValue(field.path, [
+            ...tagsWithoutKeywords,
+            { tagName: "keywords", tagValue: keywords.join(", ") }
+        ]);
+    }
+};
+
 export const SmartSeo = () => {
     return (
         <Actions.ButtonAction
@@ -123,4 +124,4 @@ export const SmartSeo = () => {
             modelIds={["article-smart-seo"]}
         />
     );
-};
+};

headless-cms/smart-seo-open-ai/5.41.x/extensions/smartSeoOpenAi/admin/src/index.tsx

@@ -5,7 +5,7 @@ import { DecorateContentEntryFormBind} from "./DecorateContentEntryFormBind";
 import { SmartSeo } from "./SmartSeo";
 
 export const Extension = () => {
-    return <>{/* Your code here. */}
+    return <>
         <DecorateContentEntryForm />
         <ContentEntryEditorConfig>
             <SmartSeo />

headless-cms/smart-seo-open-ai/5.41.x/extensions/smartSeoOpenAi/api/package.json

@@ -7,6 +7,8 @@
   ],
   "version": "1.0.0",
   "dependencies": {
-    "@webiny/api-headless-cms": "5.41.1"
+    "@webiny/api-headless-cms": "5.41.4",
+    "@webiny/api-serverless-cms": "5.41.4",
+    "openai": "^4.33.0"
   }
 }

headless-cms/smart-seo-open-ai/5.41.x/extensions/smartSeoOpenAi/api/src/Article.ts

@@ -1,15 +1,26 @@
 import {
+    createCmsGroupPlugin,
     createCmsModelPlugin,
     createModelField
 } from "@webiny/api-headless-cms";
 
 export const Article = () => {
     return [
+        // Defines a new "Smart SEO" content model group.
+        createCmsGroupPlugin({
+            id: "smart-seo",
+            name: "Smart SEO",
+            description: "Smart SEO content model group",
+            slug: "smart-seo",
+            icon: "fas/magnifying-glass"
+        }),
+
+        // Defines a new "Article - Smart SEO" content model.
         createCmsModelPlugin({
             name: "Article - Smart SEO",
             modelId: "article-smart-seo",
             description: "Article content model for Smart SEO",
-            group: {id: "", name: ""},
+            group: {id: "smart-seo", name: "Smart SEO"},
             fields: [
                 createModelField({
                     fieldId: "content",
@@ -21,7 +32,7 @@ export const Article = () => {
                     fieldId: "seoTitle",
                     type: "text",
                     label: "SEO - Title",
-                    renderer: { name: "text-input" },
+                    renderer: { name: "text-input" }
                 }),
                 createModelField({
                     fieldId: "seoDescription",
@@ -34,6 +45,7 @@ export const Article = () => {
                     type: "object",
                     label: "SEO - Meta tags",
                     renderer: { name: "objects" },
+                    multipleValues: true,
                     settings: {
                         fields: [
                             createModelField({
@@ -56,7 +68,7 @@ export const Article = () => {
                 })
             ],
             layout: [["content"], ["seoTitle"], ["seoDescription"], ["seoMetaTags"]],
-            titleFieldId: "content"
+            titleFieldId: "seoTitle"
         })
     ];
 };