From 66259d3fd404d79c1e4c00ced3221f57b17dd2cf Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Mon, 9 Dec 2024 08:25:42 +0000
Subject: [PATCH] fix(nc-gui): some MFE related issues

---
 .../smartsheet/column/LongTextOptions.vue     | 171 +++++++++---------
 .../components/smartsheet/details/Fields.vue  |  39 ++--
 2 files changed, 106 insertions(+), 104 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/column/LongTextOptions.vue b/packages/nc-gui/components/smartsheet/column/LongTextOptions.vue
index 95fad7dda8..08db2880e8 100644
--- a/packages/nc-gui/components/smartsheet/column/LongTextOptions.vue
+++ b/packages/nc-gui/components/smartsheet/column/LongTextOptions.vue
@@ -107,7 +107,7 @@ const generate = async () => {
 
 const isPromptEnabled = computed(() => {
   if (isEdit.value) {
-    return isAIPromptCol(column.value)
+    return isAIPromptCol(column.value) || isFeatureEnabled(FEATURE_FLAG.AI_FEATURES)
   }
 
   return isFeatureEnabled(FEATURE_FLAG.AI_FEATURES)
@@ -118,10 +118,29 @@ onMounted(() => {
   vModel.value.prompt_raw = (column?.value?.colOptions as Record<string, any>)?.prompt_raw || ''
 })
 
+const validators = {
+  fk_integration_id: [
+    {
+      validator: (_: any, value: any) => {
+        return new Promise<void>((resolve, reject) => {
+          if (isEnabledGenerateText.value && !value) {
+            reject(new Error(t('title.aiIntegrationMissing')))
+          }
+          resolve()
+        })
+      },
+    },
+  ],
+}
+
 if (isEdit.value) {
   vModel.value.fk_integration_id = vModel.value?.colOptions?.fk_integration_id
 }
 
+setAdditionalValidations({
+  ...validators,
+})
+
 provide(EditColumnInj, ref(true))
 
 const richMode = computed({
@@ -156,24 +175,6 @@ watch(richMode, () => {
 watch(isPreviewEnabled, handleDisableSubmitBtn, {
   immediate: true,
 })
-
-watch(
-  isEnabledGenerateText,
-  (newValue) => {
-    if (newValue) {
-      setAdditionalValidations({
-        fk_integration_id: [{ required: true, message: t('title.aiIntegrationMissing') }],
-      })
-    } else {
-      setAdditionalValidations({
-        fk_integration_id: [{ required: false }],
-      })
-    }
-  },
-  {
-    immediate: true,
-  },
-)
 </script>
 
 <template>
@@ -196,31 +197,28 @@ watch(
         <NcTooltip :disabled="!richMode" class="flex items-center">
           <template #title> Generate text using AI is not supported when rich text formatting is enabled </template>
 
-            <NcSwitch
-              v-model:checked="isEnabledGenerateText"
-              :disabled="richMode"
-              class="nc-ai-field-generate-text nc-ai-input"
-              @change="handleDisableSubmitBtn"
+          <NcSwitch
+            v-model:checked="isEnabledGenerateText"
+            :disabled="richMode"
+            class="nc-ai-field-generate-text nc-ai-input"
+            @change="handleDisableSubmitBtn"
+          >
+            <span
+              class="text-sm font-semibold pl-1"
+              :class="{
+                'text-nc-content-purple-dark': isEnabledGenerateText,
+                'text-nc-content-gray': !isEnabledGenerateText,
+              }"
             >
-              <span
-                class="text-sm font-semibold pl-1"
-                :class="{
-                  'text-nc-content-purple-dark': isEnabledGenerateText,
-                  'text-nc-content-gray': !isEnabledGenerateText,
-                }"
-              >
-                Generate text using AI
-              </span>
-            </NcSwitch>
-          </NcTooltip>
-          <NcTooltip class="ml-2 mr-[40px] flex cursor-pointer">
-            <template #title> Use AI to generate content based on record data. </template>
-            <GeneralIcon
-              icon="info"
-              class="text-nc-content-gray-muted hover:text-nc-content-gray-subtle opacity-70 w-3.5 h-3.5"
-            />
-          </NcTooltip>
-          <div class="flex-1"></div>
+              Generate text using AI
+            </span>
+          </NcSwitch>
+        </NcTooltip>
+        <NcTooltip class="ml-2 mr-[40px] flex cursor-pointer">
+          <template #title> Use AI to generate content based on record data. </template>
+          <GeneralIcon icon="info" class="text-nc-content-gray-muted hover:text-nc-content-gray-subtle opacity-70 w-3.5 h-3.5" />
+        </NcTooltip>
+        <div class="flex-1"></div>
 
         <div class="absolute right-0">
           <AiSettings
@@ -283,56 +281,55 @@ watch(
               </span>
             </div>
 
-              <NcTooltip :disabled="isPreviewEnabled">
-                <template #title> Include at least 1 field in prompt to generate </template>
-                <NcButton
-                  class="nc-aioptions-preview-generate-btn"
+            <NcTooltip :disabled="isPreviewEnabled">
+              <template #title> Include at least 1 field in prompt to generate </template>
+              <NcButton
+                class="nc-aioptions-preview-generate-btn"
+                :class="{
+                  'nc-is-already-generated': isAlreadyGenerated,
+                  'nc-preview-enabled': isPreviewEnabled,
+                }"
+                size="xs"
+                :type="isAlreadyGenerated ? 'text' : 'secondary'"
+                :theme="isPreviewEnabled ? 'ai' : 'default'"
+                :disabled="!isPreviewEnabled"
+                :loading="generatingPreview"
+                @click.stop="generate"
+              >
+                <div
                   :class="{
-                    'nc-is-already-generated': isAlreadyGenerated,
-                    'nc-preview-enabled': isPreviewEnabled,
+                    'nc-animate-dots min-w-[91px] text-left': generatingPreview,
+                    'min-w-[102px]': isAlreadyGenerated && generatingPreview,
+                    'min-w-[80px]': !isAlreadyGenerated && generatingPreview,
                   }"
-                  size="xs"
-                  :type="isAlreadyGenerated ? 'text' : 'secondary'"
-                  :theme="isPreviewEnabled ? 'ai' : 'default'"
-                  :disabled="!isPreviewEnabled"
-                  :loading="generatingPreview"
-                  @click.stop="generate"
                 >
-                  <div
-                    :class="{
-                      'nc-animate-dots min-w-[91px] text-left': generatingPreview,
-                      'min-w-[102px]': isAlreadyGenerated && generatingPreview,
-                      'min-w-[80px]': !isAlreadyGenerated && generatingPreview,
-                    }"
-                  >
-                    {{
-                      isAlreadyGenerated
-                        ? generatingPreview
-                          ? 'Re-generating'
-                          : 'Re-generate'
-                        : generatingPreview
-                        ? 'Generating'
-                        : 'Generate preview'
-                    }}
-                  </div>
-                </NcButton>
-              </NcTooltip>
-            </div>
-            <div v-if="previewRow.row?.[previewFieldTitle]?.value">
-              <div class="relative">
-                <LazySmartsheetRow :row="previewRow">
-                  <LazySmartsheetCell
-                    :edit-enabled="true"
-                    :model-value="previewRow.row[previewFieldTitle]"
-                    :column="vModel"
-                    class="!border-none h-auto my-auto pl-1"
-                  />
-                </LazySmartsheetRow>
-              </div>
+                  {{
+                    isAlreadyGenerated
+                      ? generatingPreview
+                        ? 'Re-generating'
+                        : 'Re-generate'
+                      : generatingPreview
+                      ? 'Generating'
+                      : 'Generate preview'
+                  }}
+                </div>
+              </NcButton>
+            </NcTooltip>
+          </div>
+          <div v-if="previewRow.row?.[previewFieldTitle]?.value">
+            <div class="relative">
+              <LazySmartsheetRow :row="previewRow">
+                <LazySmartsheetCell
+                  :edit-enabled="true"
+                  :model-value="previewRow.row[previewFieldTitle]"
+                  :column="vModel"
+                  class="!border-none h-auto my-auto pl-1"
+                />
+              </LazySmartsheetRow>
             </div>
           </div>
         </div>
-      </template>
+      </div>
     </template>
 
     <AiIntegrationNotFound v-if="!aiIntegrationAvailable && isEnabledGenerateText && isPromptEnabled" />
diff --git a/packages/nc-gui/components/smartsheet/details/Fields.vue b/packages/nc-gui/components/smartsheet/details/Fields.vue
index 503f9ebf9c..6b41cd413b 100644
--- a/packages/nc-gui/components/smartsheet/details/Fields.vue
+++ b/packages/nc-gui/components/smartsheet/details/Fields.vue
@@ -4,6 +4,7 @@ import { message } from 'ant-design-vue'
 import {
   ButtonActionsType,
   UITypes,
+  isAIPromptCol,
   isLinksOrLTAR,
   isSystemColumn,
   isVirtualCol,
@@ -650,21 +651,12 @@ const isColumnValid = (column: TableExplorerColumn) => {
     }
 
     if (column.type === ButtonActionsType.Ai) {
-      if (isNew) {
-        return !(
-          !column.fk_integration_id ||
-          !column.formula_raw?.trim() ||
-          !column.cdfoutput_column_ids?.length ||
-          !column.output_column_ids?.split(',')?.length
-        )
-      } else {
-        !(
-          !column.colOptions?.fk_integration_id ||
-          !column.colOptions?.formula_raw?.trim() ||
-          !column.colOptions?.output_column_ids?.length ||
-          !column.colOptions?.output_column_ids?.split(',')?.length
-        )
-      }
+      return !(
+        !column.fk_integration_id ||
+        !column.formula_raw?.trim() ||
+        !column.output_column_ids?.length ||
+        !column.output_column_ids?.split(',')?.length
+      )
     }
   }
 
@@ -724,6 +716,11 @@ function updateDefaultColumnValues(column: TableExplorerColumn) {
       column.fk_webhook_id = colOptions?.fk_webhook_id
       column.icon = colOptions?.icon
       column.formula_raw = column.colOptions?.formula_raw
+
+      if (column.type === ButtonActionsType.Ai) {
+        column.output_column_ids = colOptions?.output_column_ids
+        column.fk_integration_id = colOptions?.fk_integration_id
+      }
     } else {
       column.type = column?.type || ButtonActionsType.Url
 
@@ -732,8 +729,6 @@ function updateDefaultColumnValues(column: TableExplorerColumn) {
         column.label = column.label || 'Generate data'
         column.color = column.color || 'purple'
         column.icon = column.icon || 'ncAutoAwesome'
-        column.output_column_ids = colOptions?.output_column_ids
-        column.fk_integration_id = colOptions?.fk_integration_id
       } else {
         column.theme = column.theme || 'solid'
         column.label = column.label || 'Button'
@@ -745,6 +740,16 @@ function updateDefaultColumnValues(column: TableExplorerColumn) {
     }
   }
 
+  if (column.uidt === UITypes.LongText && isAIPromptCol(column)) {
+    if (column?.id) {
+      const colOptions = column.colOptions as Record<string, any>
+
+      column.prompt_raw = colOptions?.prompt_raw
+    } else {
+      column.prompt_raw = column.prompt_raw || ''
+    }
+  }
+
   return column
 }