feat: merge google-docs-quality feature branch [INTEG-3527] (#10689)

* feat: extend timeout to 50 minutes and add in timing markers (#10608)

* fix: update AGENT_ANALYZER_ID constant to reflect new workflow agent name (#10613)

* fix: update local agents API URL to use constant for base URL

* fix(google-docs): add pagination for content type fetching [INTEG-3491] (#10674)

* feat: implement pagination for content type fetching in SelectContentTypeModal

* fix: add checks to avoid infinite loop

* chore: add env example

* chore: update readme

* fix: cleanup test modal [INTEG-3496] (#10682)

* feat(google-docs): make the test modal more dev friendly

* fix(google-docs): cleanup content type ids and spacing

* fix(google-docs): implement temporary workaround for content type ID handling in workflows (#10688)

* chore: rename useAnalyzePrompt hook to useWorkflowAgent

* chore: remove logs

* chore: remove logs in useGeneratePreview hook

---------

Co-authored-by: ryunsong-contentful <124832189+ryunsong-contentful@users.noreply.github.com>

Author: harikakondur

apps/google-docs/.env.example

@@ -0,0 +1,3 @@
+STATIC_S3_BASE=
+GOOGLE_DOCS_CLOUDFRONT_DIST_ID=
+CONTENTFUL_ACCESS_TOKEN=

apps/google-docs/README.md

@@ -1,99 +1,55 @@
-This project was bootstrapped with [Create Contentful App](https://github.com/contentful/create-contentful-app).
+# Google Docs App for Contentful
 
-## How to use
+A Contentful App that enables importing content from Google Docs into Contentful entries. 
 
-Execute create-contentful-app with npm, npx or yarn to bootstrap the example:
 
-```bash
-# npx
-npx create-contentful-app --typescript
-
-# npm
-npm init contentful-app -- --typescript
+## Frontend Setup
 
-# Yarn
-yarn create contentful-app --typescript
+1. Clone the repository
+2. Navigate to the app directory:
+```bash
+cd apps/google-docs
 ```
 
-## Available Scripts
-
-In the project directory, you can run:
-
-#### `npm start`
-
-Creates or updates your app definition in Contentful, and runs the app in development mode.
-Open your app to view it in the browser.
-
-The page will reload if you make edits.
-You will also see any lint errors in the console.
-
-#### `npm run build`
-
-Builds the app for production to the `build` folder.
-It correctly bundles React in production mode and optimizes the build for the best performance.
-
-The build is minified and the filenames include the hashes.
-Your app is ready to be deployed!
-
-#### `npm run upload`
-
-Uploads the build folder to contentful and creates a bundle that is automatically activated.
-The command guides you through the deployment process and asks for all required arguments.
-Read [here](https://www.contentful.com/developers/docs/extensibility/app-framework/create-contentful-app/#deploy-with-contentful) for more information about the deployment process.
-
-#### `npm run upload-ci`
+3. Install dependencies:
+```bash
+npm install
+```
 
-Similar to `npm run upload` it will upload your app to contentful and activate it. The only difference is  
-that with this command all required arguments are read from the environment variables, for example when you add
-the upload command to your CI pipeline.
+4. Copy the example environment file and configure it:
+```bash
+cp .env.example .env
+```
 
-For this command to work, the following environment variables must be set:
+5. Edit `.env` and add your API keys and tokens 
 
-- `CONTENTFUL_ORG_ID` - The ID of your organization
-- `CONTENTFUL_APP_DEF_ID` - The ID of the app to which to add the bundle
-- `CONTENTFUL_ACCESS_TOKEN` - A personal [access token](https://www.contentful.com/developers/docs/references/content-management-api/#/reference/personal-access-tokens)
+6. To run locally
 
-## Libraries to use
+ ```bash
+ npm run dev
+ ```
 
-To make your app look and feel like Contentful use the following libraries:
+Note: To run the backend locally follow the read me in the agents-api repo
 
-- [Forma 36](https://f36.contentful.com/) – Contentful's design system
-- [Contentful Field Editors](https://www.contentful.com/developers/docs/extensibility/field-editors/) – Contentful's field editor React components
 
-## Using the `contentful-management` SDK
+### Deployment
 
-In the default create contentful app output, a contentful management client is
-passed into each location. This can be used to interact with Contentful's
-management API. For example
+#### Development Environments
 
-```js
-// Use the client
-cma.locale.getMany({}).then((locales) => console.log(locales));
+```bash
+npm run deploy:dev      # Deploy to dev environment
+npm run deploy:dev2     # Deploy to dev2 environment
+npm run deploy:staging  # Deploy to staging environment
 ```
 
-Visit the [`contentful-management` documentation](https://www.contentful.com/developers/docs/extensibility/app-framework/sdk/#using-the-contentful-management-library)
-to find out more.
-
-## Schema Convention
+#### Production
 
-This app supports an optional schema convention that allows you to explicitly mark entry boundaries, content types, and references in your Google Docs. Using schema markers significantly improves AI accuracy.
-
-**Quick Start:**
-- Use `**!CT:contentTypeId!**` to mark the start of an entry
-- Use `**!REF:tempId!**` to mark references between entries
-- Use `**!END!**` to mark the end of an entry (optional)
-
-Example:
-```
-**!CT:blogPost!**
-My Blog Post Title
-Content goes here...
-**!CT:author!**
-John Doe
-Bio: Author information...
+```bash
+npm run deploy:prod     # Deploy to production
 ```
 
-
-## Learn More
-
-[Read more](https://www.contentful.com/developers/docs/extensibility/app-framework/create-contentful-app/) and check out the video on how to use the CLI.
+**Note**: Deployment scripts require additional environment variables:
+- `STATIC_S3_BASE` - S3 bucket base path for dev/staging
+- `PROD_STATIC_S3_BASE` - S3 bucket base path for production
+- `GOOGLE_DOCS_TEST_CLOUDFRONT_DIST_ID` - CloudFront distribution for dev/staging
+- `GOOGLE_DOCS_PROD_CLOUDFRONT_DIST_ID` - CloudFront distribution for production

apps/google-docs/src/hooks/useGeneratePreview.ts

@@ -6,6 +6,7 @@ import {
   POLL_INTERVAL_MS,
   MAX_POLL_ATTEMPTS,
   USE_LOCAL_AGENTS_API,
+  LOCAL_AGENTS_API_BASE_URL,
 } from '../utils/constants/agent';
 import { PreviewEntry } from '../locations/Page/components/modals/step_3/types';
 import { getEntryTitle } from '../utils/getEntryTitle';
@@ -155,7 +156,7 @@ const startAgentRun = (sdk: PageAppSDK, params: AgentCallParams): string => {
 
   if (USE_LOCAL_AGENTS_API) {
     fetch(
-      `http://localhost:4111/spaces/${spaceId}/environments/${environmentId}/ai_agents/agents/${AGENT_ID}/generate`,
+      `${LOCAL_AGENTS_API_BASE_URL}/spaces/${spaceId}/environments/${environmentId}/ai_agents/agents/${AGENT_ID}/generate`,
       {
         method: 'POST',
         headers: {
@@ -200,7 +201,7 @@ const pollAgentRun = async (
 
     if (USE_LOCAL_AGENTS_API) {
       const response = await fetch(
-        `http://localhost:4111/spaces/${spaceId}/environments/${environmentId}/ai_agents/runs/${runId}`,
+        `${LOCAL_AGENTS_API_BASE_URL}/spaces/${spaceId}/environments/${environmentId}/ai_agents/runs/${runId}`,
         {
           headers: {
             'x-contentful-enable-alpha-feature': 'agents-api',
@@ -216,7 +217,6 @@ const pollAgentRun = async (
       if (!response.ok) {
         throw new Error(`Failed to poll agent run: ${response.status} ${response.statusText}`);
       }
-
       runData = (await response.json()) as AgentRunData;
     } else {
       try {
@@ -233,8 +233,8 @@ const pollAgentRun = async (
         throw error;
       }
     }
-
-    if (getAgentPayload(runData)) {
+    const assistantTextContent = getAgentPayload(runData);
+    if (assistantTextContent) {
       return parseAgentResponse(runData);
     }
 

apps/google-docs/src/hooks/useModalManagement.ts

@@ -3,6 +3,7 @@ import { useState } from 'react';
 interface ModalStates {
   isUploadModalOpen: boolean;
   isContentTypePickerOpen: boolean;
+  isConfirmPromptModalOpen: boolean;
   isConfirmCancelModalOpen: boolean;
   isPreviewModalOpen: boolean;
   isErrorPreviewModalOpen: boolean;
@@ -13,6 +14,7 @@ interface ModalStates {
 interface ModalSetters {
   setIsUploadModalOpen: (value: boolean) => void;
   setIsContentTypePickerOpen: (value: boolean) => void;
+  setIsConfirmPromptModalOpen: (value: boolean) => void;
   setIsConfirmCancelModalOpen: (value: boolean) => void;
   setIsPreviewModalOpen: (value: boolean) => void;
   setIsErrorPreviewModalOpen: (value: boolean) => void;
@@ -23,6 +25,7 @@ interface ModalSetters {
 export enum ModalType {
   UPLOAD = 'upload',
   CONTENT_TYPE_PICKER = 'contentTypePicker',
+  CONFIRM_PROMPT = 'confirmPrompt',
   CONFIRM_CANCEL = 'confirmCancel',
   PREVIEW = 'preview',
   ERROR_PREVIEW = 'errorPreview',
@@ -33,6 +36,7 @@ export enum ModalType {
 export const useModalManagement = () => {
   const [isUploadModalOpen, setIsUploadModalOpen] = useState<boolean>(false);
   const [isContentTypePickerOpen, setIsContentTypePickerOpen] = useState<boolean>(false);
+  const [isConfirmPromptModalOpen, setIsConfirmPromptModalOpen] = useState<boolean>(false);
   const [isConfirmCancelModalOpen, setIsConfirmCancelModalOpen] = useState<boolean>(false);
   const [isPreviewModalOpen, setIsPreviewModalOpen] = useState<boolean>(false);
   const [isErrorPreviewModalOpen, setIsErrorPreviewModalOpen] = useState<boolean>(false);
@@ -47,6 +51,9 @@ export const useModalManagement = () => {
       case ModalType.CONTENT_TYPE_PICKER:
         setIsContentTypePickerOpen(true);
         break;
+      case ModalType.CONFIRM_PROMPT:
+        setIsConfirmPromptModalOpen(true);
+        break;
       case ModalType.CONFIRM_CANCEL:
         setIsConfirmCancelModalOpen(true);
         break;
@@ -73,6 +80,9 @@ export const useModalManagement = () => {
       case ModalType.CONTENT_TYPE_PICKER:
         setIsContentTypePickerOpen(false);
         break;
+      case ModalType.CONFIRM_PROMPT:
+        setIsConfirmPromptModalOpen(false);
+        break;
       case ModalType.CONFIRM_CANCEL:
         setIsConfirmCancelModalOpen(false);
         break;
@@ -95,6 +105,7 @@ export const useModalManagement = () => {
     modalStates: {
       isUploadModalOpen,
       isContentTypePickerOpen,
+      isConfirmPromptModalOpen,
       isConfirmCancelModalOpen,
       isPreviewModalOpen,
       isErrorPreviewModalOpen,
@@ -104,6 +115,7 @@ export const useModalManagement = () => {
     setModalStates: {
       setIsUploadModalOpen,
       setIsContentTypePickerOpen,
+      setIsConfirmPromptModalOpen,
       setIsConfirmCancelModalOpen,
       setIsPreviewModalOpen,
       setIsErrorPreviewModalOpen,