[Content] Resolve VQA comments for the AI updates (#2990)

Resolves comments on #2981 (comment)
zesty-io · Oct 2, 2024 · fc4c24d · fc4c24d
1 parent 37e0ee5
commit fc4c24d
Show file tree

Hide file tree

Showing 10 changed files with 477 additions and 291 deletions.
diff --git a/src/apps/content-editor/src/app/components/Editor/Field/Field.tsx b/src/apps/content-editor/src/app/components/Editor/Field/Field.tsx
@@ -282,6 +282,7 @@ export const Field = ({
     case "text":
       return (
         <AIFieldShell
+          ZUID={fieldData?.ZUID}
           name={fieldData?.name}
           label={fieldData?.label}
           valueLength={(value as string)?.length ?? 0}
@@ -364,6 +365,7 @@ export const Field = ({
     case "textarea":
       return (
         <AIFieldShell
+          ZUID={fieldData?.ZUID}
           name={fieldData?.name}
           label={fieldData?.label}
           valueLength={(value as string)?.length ?? 0}
@@ -396,6 +398,7 @@ export const Field = ({
       return (
         <div className={styles.WYSIWYGFieldType}>
           <AIFieldShell
+            ZUID={fieldData?.ZUID}
             name={fieldData?.name}
             label={fieldData?.label}
             valueLength={characterCount}
@@ -433,6 +436,7 @@ export const Field = ({
       return (
         <div className={styles.WYSIWYGFieldType}>
           <AIFieldShell
+            ZUID={fieldData?.ZUID}
             name={fieldData?.name}
             label={fieldData?.label}
             valueLength={(value as string)?.length ?? 0}

diff --git a/src/apps/content-editor/src/app/views/ItemCreate/ItemCreate.tsx b/src/apps/content-editor/src/app/views/ItemCreate/ItemCreate.tsx
@@ -37,6 +37,7 @@ import { SchedulePublish } from "../../../../../../shell/components/SchedulePubl
 import { Meta } from "../ItemEdit/Meta";
 import { SocialMediaPreview } from "../ItemEdit/Meta/SocialMediaPreview";
 import { FieldError } from "../../components/Editor/FieldError";
+import { AIGeneratorProvider } from "../../../../../../shell/components/withAi/AIGeneratorProvider";
 
 export type ActionAfterSave =
   | ""
@@ -398,34 +399,36 @@ export const ItemCreate = () => {
                 />
               </Box>
             )}
-            <Editor
-              // @ts-ignore no types
-              itemZUID={itemZUID}
-              item={item}
-              items={content}
-              instance={instance}
-              modelZUID={modelZUID}
-              model={model}
-              fields={fields}
-              onSave={save}
-              dispatch={dispatch}
-              loading={loading}
-              saving={saving}
-              isDirty={item?.dirty}
-              fieldErrors={fieldErrors}
-              // @ts-ignore  untyped component
-              onUpdateFieldErrors={(errors: FieldErrors) => {
-                setFieldErrors(errors);
-              }}
-            />
-            <Meta
-              onUpdateSEOErrors={(errors: FieldErrors) => {
-                setSEOErrors(errors);
-              }}
-              isSaving={saving}
-              ref={metaRef}
-              errors={SEOErrors}
-            />
+            <AIGeneratorProvider>
+              <Editor
+                // @ts-ignore no types
+                itemZUID={itemZUID}
+                item={item}
+                items={content}
+                instance={instance}
+                modelZUID={modelZUID}
+                model={model}
+                fields={fields}
+                onSave={save}
+                dispatch={dispatch}
+                loading={loading}
+                saving={saving}
+                isDirty={item?.dirty}
+                fieldErrors={fieldErrors}
+                // @ts-ignore  untyped component
+                onUpdateFieldErrors={(errors: FieldErrors) => {
+                  setFieldErrors(errors);
+                }}
+              />
+              <Meta
+                onUpdateSEOErrors={(errors: FieldErrors) => {
+                  setSEOErrors(errors);
+                }}
+                isSaving={saving}
+                ref={metaRef}
+                errors={SEOErrors}
+              />
+            </AIGeneratorProvider>
           </Box>
           <ThemeProvider theme={theme}>
             <Box

diff --git a/src/apps/content-editor/src/app/views/ItemEdit/ItemEdit.js b/src/apps/content-editor/src/app/views/ItemEdit/ItemEdit.js
@@ -56,6 +56,7 @@ import { useLocalStorage } from "react-use";
 import { FreestyleWrapper } from "./FreestyleWrapper";
 import { Meta } from "./Meta";
 import { FieldError } from "../../components/Editor/FieldError";
+import { AIGeneratorProvider } from "../../../../../../shell/components/withAi/AIGeneratorProvider";
 
 const selectItemHeadTags = createSelector(
   (state) => state.headTags,
@@ -477,7 +478,12 @@ export default function ItemEdit() {
           >
             <Box
               component="section"
-              sx={{ display: "flex", flexDirection: "column", height: "100%" }}
+              sx={{
+                display: "flex",
+                flexDirection: "column",
+                height: "100%",
+                bgcolor: "grey.50",
+              }}
             >
               <ItemEditHeader
                 onSave={() => save().catch((err) => console.error(err))}
@@ -512,24 +518,26 @@ export default function ItemEdit() {
                   exact
                   path="/content/:modelZUID/:itemZUID/meta"
                   render={() => (
-                    <Meta
-                      ref={metaRef}
-                      onUpdateSEOErrors={(errors) => {
-                        setSEOErrors(errors);
-                      }}
-                      isSaving={saving}
-                      errors={SEOErrors}
-                      errorComponent={
-                        saveClicked &&
-                        hasSEOErrors && (
-                          <FieldError
-                            ref={fieldErrorRef}
-                            errors={{ ...fieldErrors, ...SEOErrors }}
-                            fields={activeFields}
-                          />
-                        )
-                      }
-                    />
+                    <AIGeneratorProvider>
+                      <Meta
+                        ref={metaRef}
+                        onUpdateSEOErrors={(errors) => {
+                          setSEOErrors(errors);
+                        }}
+                        isSaving={saving}
+                        errors={SEOErrors}
+                        errorComponent={
+                          saveClicked &&
+                          hasSEOErrors && (
+                            <FieldError
+                              ref={fieldErrorRef}
+                              errors={{ ...fieldErrors, ...SEOErrors }}
+                              fields={activeFields}
+                            />
+                          )
+                        }
+                      />
+                    </AIGeneratorProvider>
                   )}
                 />
                 <Route
@@ -584,28 +592,32 @@ export default function ItemEdit() {
                   ]}
                   render={() => (
                     <ItemLockContext.Provider value={isLocked}>
-                      <Content
-                        instance={instance}
-                        modelZUID={modelZUID}
-                        model={model}
-                        fields={fields}
-                        itemZUID={itemZUID}
-                        item={item}
-                        items={items}
-                        user={user}
-                        onSave={() => save().catch((err) => console.error(err))}
-                        dispatch={dispatch}
-                        loading={loading}
-                        saving={saving}
-                        saveClicked={saveClicked}
-                        onUpdateFieldErrors={(errors) => {
-                          setFieldErrors(errors);
-                        }}
-                        fieldErrors={fieldErrors}
-                        hasErrors={hasErrors}
-                        activeFields={activeFields}
-                        fieldErrorRef={fieldErrorRef}
-                      />
+                      <AIGeneratorProvider>
+                        <Content
+                          instance={instance}
+                          modelZUID={modelZUID}
+                          model={model}
+                          fields={fields}
+                          itemZUID={itemZUID}
+                          item={item}
+                          items={items}
+                          user={user}
+                          onSave={() =>
+                            save().catch((err) => console.error(err))
+                          }
+                          dispatch={dispatch}
+                          loading={loading}
+                          saving={saving}
+                          saveClicked={saveClicked}
+                          onUpdateFieldErrors={(errors) => {
+                            setFieldErrors(errors);
+                          }}
+                          fieldErrors={fieldErrors}
+                          hasErrors={hasErrors}
+                          activeFields={activeFields}
+                          fieldErrorRef={fieldErrorRef}
+                        />
+                      </AIGeneratorProvider>
                     </ItemLockContext.Provider>
                   )}
                 />

diff --git a/src/apps/content-editor/src/app/views/ItemEdit/Meta/AIGeneratorParameterProvider.tsx b/src/apps/content-editor/src/app/views/ItemEdit/Meta/AIGeneratorParameterProvider.tsx
diff --git a/src/apps/content-editor/src/app/views/ItemEdit/Meta/index.tsx b/src/apps/content-editor/src/app/views/ItemEdit/Meta/index.tsx
@@ -32,7 +32,6 @@ import {
 import { AppState } from "../../../../../../../shell/store/types";
 import { Error } from "../../../components/Editor/Field/FieldShell";
 import { fetchGlobalItem } from "../../../../../../../shell/store/content";
-import { AIGeneratorParameterProvider } from "./AIGeneratorParameterProvider";
 import {
   ContentModelField,
   Web,
@@ -404,9 +403,10 @@ export const Meta = forwardRef(
       <ThemeProvider theme={theme}>
         <Box
           display="grid"
-          gridTemplateColumns="1fr minmax(auto, 40%)"
+          gridTemplateColumns={
+            !isCreateItemPage ? "1fr minmax(auto, 40%)" : "1fr"
+          }
           gap={4}
-          bgcolor="grey.50"
           pt={2.5}
           mb={isCreateItemPage ? 4 : 0}
           px={isCreateItemPage ? 0 : 4}
@@ -429,39 +429,39 @@ export const Meta = forwardRef(
                   media content in the preview on the right.
                 </Typography>
               </Box>
-              <AIGeneratorParameterProvider>
-                <MetaTitle
-                  aiButtonRef={metaTitleButtonRef}
-                  value={web.metaTitle}
-                  onChange={handleOnChange}
-                  error={errors?.metaTitle}
-                  saveMetaTitleParameters={flowType === FlowType.AIGenerated}
-                  onResetFlowType={() => {
-                    if (flowType === FlowType.AIGenerated) {
-                      setFlowType(FlowType.Manual);
-                    }
-                  }}
-                  onAIMetaTitleInserted={() => {
-                    // Scroll to and open the meta description ai generator to continue
-                    // with the AI-assisted flow
-                    if (flowType === FlowType.AIGenerated) {
-                      metaDescriptionButtonRef.current?.triggerAIButton?.();
-                    }
-                  }}
-                />
-                <MetaDescription
-                  aiButtonRef={metaDescriptionButtonRef}
-                  value={web.metaDescription}
-                  onChange={handleOnChange}
-                  error={errors?.metaDescription}
-                  onResetFlowType={() => {
-                    if (flowType === FlowType.AIGenerated) {
-                      setFlowType(FlowType.Manual);
-                    }
-                  }}
-                  required={REQUIRED_FIELDS.includes("metaDescription")}
-                />
-              </AIGeneratorParameterProvider>
+              <MetaTitle
+                aiButtonRef={metaTitleButtonRef}
+                value={web.metaTitle}
+                onChange={handleOnChange}
+                error={errors?.metaTitle}
+                onResetFlowType={() => {
+                  if (flowType === FlowType.AIGenerated) {
+                    console.log("reset on meta title");
+                    setFlowType(FlowType.Manual);
+                  }
+                }}
+                onAIMetaTitleInserted={() => {
+                  // Scroll to and open the meta description ai generator to continue
+                  // with the AI-assisted flow
+                  if (flowType === FlowType.AIGenerated) {
+                    metaDescriptionButtonRef.current?.triggerAIButton?.();
+                  }
+                }}
+              />
+              <MetaDescription
+                aiButtonRef={metaDescriptionButtonRef}
+                value={web.metaDescription}
+                onChange={handleOnChange}
+                error={errors?.metaDescription}
+                onResetFlowType={() => {
+                  if (flowType === FlowType.AIGenerated) {
+                    console.log("reset on meta description");
+                    setFlowType(FlowType.Manual);
+                  }
+                }}
+                isAIAssistedFlow={flowType === FlowType.AIGenerated}
+                required={REQUIRED_FIELDS.includes("metaDescription")}
+              />
               <MetaImage onChange={handleOnChange} />
               {"og_title" in metaFields && (
                 <OGTitle
@@ -566,6 +566,7 @@ export const Meta = forwardRef(
               position="sticky"
               top={0}
               pb={2.5}
+              alignSelf="start"
               sx={{
                 scrollbarWidth: "none",
                 overflowY: "auto",

diff --git a/src/apps/content-editor/src/app/views/ItemEdit/Meta/settings/MetaDescription.tsx b/src/apps/content-editor/src/app/views/ItemEdit/Meta/settings/MetaDescription.tsx
@@ -18,6 +18,7 @@ type MetaDescriptionProps = {
   error: Error;
   onResetFlowType: () => void;
   aiButtonRef?: MutableRefObject<any>;
+  isAIAssistedFlow: boolean;
   required: boolean;
 };
 export default connect()(function MetaDescription({
@@ -26,11 +27,13 @@ export default connect()(function MetaDescription({
   error,
   onResetFlowType,
   aiButtonRef,
+  isAIAssistedFlow,
   required,
 }: MetaDescriptionProps) {
   return (
     <Box data-cy="metaDescription" id="metaDescription">
       <AIFieldShell
+        ZUID="metaDescription"
         ref={aiButtonRef}
         settings={{
           label: "Meta Description",
@@ -52,6 +55,7 @@ export default connect()(function MetaDescription({
         onResetFlowType={() => {
           onResetFlowType?.();
         }}
+        isAIAssistedFlow={isAIAssistedFlow}
       >
         <TextField
           name="metaDescription"