nocodb · mertmit · Dec 9, 2024 · Dec 7, 2024 · Dec 8, 2024 · coderabbitai
diff --git a/packages/nc-gui/components/ai/PromptWithFields.vue b/packages/nc-gui/components/ai/PromptWithFields.vue
@@ -3,6 +3,7 @@ import Placeholder from '@tiptap/extension-placeholder'
 import StarterKit from '@tiptap/starter-kit'
 import Mention from '@tiptap/extension-mention'
 import { EditorContent, useEditor } from '@tiptap/vue-3'
+import tippy from 'tippy.js'
 import { type ColumnType, UITypes } from 'nocodb-sdk'
 import FieldList from '~/helpers/tiptapExtensions/mention/FieldList'
 import suggestion from '~/helpers/tiptapExtensions/mention/suggestion.ts'
@@ -15,6 +16,7 @@ const props = withDefaults(
     promptFieldTagClassName?: string
     suggestionIconClassName?: string
     placeholder?: string
+    readOnly?: boolean
   }>(),
   {
     options: () => [],
@@ -26,6 +28,7 @@ const props = withDefaults(
      * @example: :placeholder="`Enter prompt here...\n\neg : Categorise this {Notes}`"
      */
     placeholder: 'Write your prompt here...',
+    readOnly: false,
   },
 )
 
@@ -38,7 +41,9 @@ const vModel = computed({
   },
 })
 
-const { autoFocus } = toRefs(props)
+const { autoFocus, readOnly } = toRefs(props)
+
+const debouncedLoadMentionFieldTagTooltip = useDebounceFn(loadMentionFieldTagTooltip, 1000)
 
 const editor = useEditor({
   content: vModel.value,
@@ -55,18 +60,25 @@ const editor = useEditor({
         ...suggestion(FieldList),
         items: ({ query }) => {
           if (query.length === 0) return props.options ?? []
-          return props.options?.filter((o) => o.title?.toLowerCase()?.includes(query.toLowerCase())) ?? []
+          return (
+            props.options?.filter(
+              (o) =>
+                o.title?.toLowerCase()?.includes(query.toLowerCase()) || `${o.title?.toLowerCase()}}` === query.toLowerCase(),
+            ) ?? []
+          )
         },
         char: '{',
         allowSpaces: true,
       },
       renderHTML: ({ node }) => {
+        const matchedOption = props.options?.find((option) => option.title === node.attrs.id)
+        const isAttachment = matchedOption?.uidt === UITypes.Attachment
         return [
           'span',
           {
-            class: `prompt-field-tag ${
-              props.options?.find((option) => option.title === node.attrs.id)?.uidt === UITypes.Attachment ? '!bg-green-200' : ''
-            } ${props.promptFieldTagClassName}`,
+            'class': `prompt-field-tag ${isAttachment ? '!bg-green-200' : ''} ${props.promptFieldTagClassName}`,
+            'style': 'max-width: 100px; white-space: nowrap; overflow: hidden; display: inline-block; text-overflow: ellipsis;', // Enforces truncation
+            'data-tooltip': node.attrs.id, // Tooltip content
           },
           `${node.attrs.id}`,
         ]
@@ -93,8 +105,10 @@ const editor = useEditor({
     text = text.trim()
 
     vModel.value = text
+
+    debouncedLoadMentionFieldTagTooltip()
   },
-  editable: true,
+  editable: !readOnly.value,
   autofocus: autoFocus.value,
   editorProps: { scrollThreshold: 100 },
 })
@@ -141,15 +155,60 @@ onMounted(async () => {
     }, 100)
   }
 })
+
+const tooltipInstances: any[] = []
+
+function loadMentionFieldTagTooltip() {
+  document.querySelectorAll('.nc-ai-prompt-with-fields .prompt-field-tag').forEach((el) => {
+    const tooltip = Object.values(el.attributes).find((attr) => attr.name === 'data-tooltip')
+    if (!tooltip || el.scrollWidth <= el.clientWidth) return
+    // Show tooltip only on truncate
+    const instance = tippy(el, {
+      content: `<div class="tooltip text-xs">${tooltip.value}</div>`,
+      placement: 'top',
+      allowHTML: true,
+      arrow: true,
+      animation: 'fade',
+      duration: 0,
+      maxWidth: '200px',
+    })
+
+    tooltipInstances.push(instance)
+  })
+}
+
+onMounted(() => {
+  debouncedLoadMentionFieldTagTooltip()
+})
+
+onBeforeUnmount(() => {
+  tooltipInstances.forEach((instance) => instance?.destroy())
+  tooltipInstances.length = 0
+})
-const tooltipInstances: any[] = []
-
-function loadMentionFieldTagTooltip() {
-  document.querySelectorAll('.nc-ai-prompt-with-fields .prompt-field-tag').forEach((el) => {
-    const tooltip = Object.values(el.attributes).find((attr) => attr.name === 'data-tooltip')
-    if (!tooltip || el.scrollWidth <= el.clientWidth) return
-    // Show tooltip only on truncate
-    const instance = tippy(el, {
-      content: `<div class="tooltip text-xs">${tooltip.value}</div>`,
-      placement: 'top',
-      allowHTML: true,
-      arrow: true,
-      animation: 'fade',
-      duration: 0,
-      maxWidth: '200px',
-    })
-
-    tooltipInstances.push(instance)
-  })
-}
-
-onMounted(() => {
-  debouncedLoadMentionFieldTagTooltip()
-})
-
-onBeforeUnmount(() => {
-  tooltipInstances.forEach((instance) => instance?.destroy())
-  tooltipInstances.length = 0
-})
+const tooltipInstances = new WeakMap()
+
+function loadMentionFieldTagTooltip() {
+  document.querySelectorAll('.nc-ai-prompt-with-fields .prompt-field-tag').forEach((el) => {
+    const tooltip = Object.values(el.attributes).find((attr) => attr.name === 'data-tooltip')
+    if (!tooltip || el.scrollWidth <= el.clientWidth) return
+    let instance = tooltipInstances.get(el)
+    if (instance) {
+      instance.destroy()
+    }
+    instance = tippy(el, {
+      content: `<div class="tooltip text-xs">${tooltip.value}</div>`,
+      placement: 'top',
+      allowHTML: true,
+      arrow: true,
+      animation: 'fade',
+      duration: 0,
+      maxWidth: '200px',
+    })
+    tooltipInstances.set(el, instance)
+  })
+}
+
+onMounted(() => {
+  debouncedLoadMentionFieldTagTooltip()
+})
+
+onBeforeUnmount(() => {
+  tooltipInstances.forEach((instance) => instance?.destroy())
+  tooltipInstances.length = 0
+})
-const tooltipInstances: any[] = []
-
-function loadMentionFieldTagTooltip() {
-  document.querySelectorAll('.nc-ai-prompt-with-fields .prompt-field-tag').forEach((el) => {
-    const tooltip = Object.values(el.attributes).find((attr) => attr.name === 'data-tooltip')
-    if (!tooltip || el.scrollWidth <= el.clientWidth) return
-    // Show tooltip only on truncate
-    const instance = tippy(el, {
-      content: `<div class="tooltip text-xs">${tooltip.value}</div>`,
-      placement: 'top',
-      allowHTML: true,
-      arrow: true,
-      animation: 'fade',
-      duration: 0,
-      maxWidth: '200px',
-    })
-
-    tooltipInstances.push(instance)
-  })
-}
-
-onMounted(() => {
-  debouncedLoadMentionFieldTagTooltip()
-})
-
-onBeforeUnmount(() => {
-  tooltipInstances.forEach((instance) => instance?.destroy())
-  tooltipInstances.length = 0
-})
+const tooltipInstances = new WeakMap()
+
+function loadMentionFieldTagTooltip() {
+  document.querySelectorAll('.nc-ai-prompt-with-fields .prompt-field-tag').forEach((el) => {
+    const tooltip = Object.values(el.attributes).find((attr) => attr.name === 'data-tooltip')
+    if (!tooltip || el.scrollWidth <= el.clientWidth) return
+    let instance = tooltipInstances.get(el)
+    if (instance) {
+      instance.destroy()
+    }
+    instance = tippy(el, {
+      content: `<div class="tooltip text-xs">${tooltip.value}</div>`,
+      placement: 'top',
+      allowHTML: true,
+      arrow: true,
+      animation: 'fade',
+      duration: 0,
+      maxWidth: '200px',
+    })
+    tooltipInstances.set(el, instance)
+  })
+}
+
+onMounted(() => {
+  debouncedLoadMentionFieldTagTooltip()
+})
+
+onBeforeUnmount(() => {
+  tooltipInstances.forEach((instance) => instance?.destroy())
+  tooltipInstances.length = 0
+})
 </script>
 
 <template>
   <div class="nc-ai-prompt-with-fields w-full">
     <EditorContent ref="editorDom" :editor="editor" @keydown.alt.enter.stop @keydown.shift.enter.stop />
 
-    <NcButton size="xs" type="text" class="nc-prompt-with-field-suggestion-btn !px-1" @click.stop="newFieldSuggestionNode">
+    <NcButton
+      size="xs"
+      type="text"
+      class="nc-prompt-with-field-suggestion-btn !px-1"
+      :disabled="readOnly"
+      @click.stop="newFieldSuggestionNode"
+    >
       <slot name="triggerIcon">
-        <GeneralIcon icon="ncPlusSquareSolid" class="text-nc-content-brand" :class="`${suggestionIconClassName}`" />
+        <GeneralIcon
+          icon="ncPlusSquareSolid"
+          class="text-nc-content-brand"
+          :class="[
+            `${suggestionIconClassName}`,
+            {
+              'opacity-75': readOnly,
+            },
+          ]"
+        />
       </slot>
     </NcButton>
   </div>
@@ -160,18 +219,22 @@ onMounted(async () => {
   @apply relative;
 
   .nc-prompt-with-field-suggestion-btn {
-    @apply absolute top-[1px] right-[1px];
+    @apply absolute top-[2px] right-[1px];
   }
 
   .prompt-field-tag {
-    @apply bg-gray-100 rounded-md px-1;
+    @apply bg-gray-100 rounded-md px-1 align-middle;
   }
 
   .ProseMirror {
     @apply px-3 pb-3 pt-2 h-[120px] min-h-[120px] overflow-y-auto nc-scrollbar-thin outline-none border-1 border-gray-200 bg-white text-nc-content-gray rounded-lg !rounded-b-none transition-shadow ease-linear -mx-[1px] -mt-[1px];
     resize: vertical;
     min-width: 100%;
     max-height: min(800px, calc(100vh - 200px)) !important;
+
+    & > p {
+      @apply mr-3;
+    }
   }
 
   .ProseMirror-focused {

diff --git a/packages/nc-gui/components/ai/Settings.vue b/packages/nc-gui/components/ai/Settings.vue
@@ -7,9 +7,11 @@ const props = withDefaults(
     workspaceId: string
     scope?: string
     showTooltip?: boolean
+    isEditColumn?: boolean
   }>(),
   {
     showTooltip: true,
+    isEditColumn: false,
   },
 )
 
@@ -19,6 +21,8 @@ const vFkIntegrationId = useVModel(props, 'fkIntegrationId', emits)
 
 const vModel = useVModel(props, 'model', emits)
 
+const { isEditColumn } = toRefs(props)
+
 // const vRandomness = useVModel(props, 'randomness', emits)
 
 const { $api } = useNuxtApp()
@@ -29,7 +33,7 @@ const lastIntegrationId = ref<string | null>(null)
 
 const isDropdownOpen = ref(false)
 
-const availableModels = ref<string[]>([])
+const availableModels = ref<{ value: string; label: string }[]>([])
 
 const isLoadingAvailableModels = ref<boolean>(false)
 
@@ -50,10 +54,10 @@ const  (newFkINtegrationId?: string) => {
 
   try {
     const response = await $api.integrations.endpoint(newFkINtegrationId, 'availableModels', {})
-    availableModels.value = response as string[]
+    availableModels.value = (response || []) as { value: string; label: string }[]
 
     if (!vModel.value && availableModels.value.length > 0) {
-      vModel.value = availableModels.value[0]
+      vModel.value = availableModels.value[0].value
     }
   } catch (error) {
     console.error(error)
@@ -63,6 +67,10 @@ const  (newFkINtegrationId?: string) => {
 }
 
 onMounted(async () => {
+  if (isEditColumn.value) {
+    return
+  }
+
   if (!vFkIntegrationId.value) {
     if (aiIntegrations.value.length > 0 && aiIntegrations.value[0].id) {
       vFkIntegrationId.value = aiIntegrations.value[0].id
@@ -72,6 +80,10 @@ onMounted(async () => {
     }
   } else {
     lastIntegrationId.value = vFkIntegrationId.value
+
+    if (!vModel.value || !availableModels.value.length) {
+      onIntegrationChange()
+    }
   }
 })
 </script>
@@ -111,6 +123,7 @@ onMounted(async () => {
                 v-model:value="vFkIntegrationId"
                 class="w-full nc-select-shadow nc-ai-input"
                 size="middle"
+                placeholder="- select integration -"
                 @change="onIntegrationChange"
               >
                 <a-select-option v-for="integration in aiIntegrations" :key="integration.id" :value="integration.id">
@@ -150,20 +163,21 @@ onMounted(async () => {
                 v-model:value="vModel"
                 class="w-full nc-select-shadow nc-ai-input"
                 size="middle"
+                placeholder="- select model -"
                 :disabled="!vFkIntegrationId || availableModels.length === 0"
                 :loading="isLoadingAvailableModels"
               >
-                <a-select-option v-for="md in availableModels" :key="md" :value="md">
+                <a-select-option v-for="md in availableModels" :key="md.label" :value="md.value">
                   <div class="w-full flex gap-2 items-center">
                     <NcTooltip class="flex-1 truncate" show-on-truncate-only>
                       <template #title>
-                        {{ md }}
+                        {{ md.label }}
                       </template>
-                      {{ md }}
+                      {{ md.label }}
                     </NcTooltip>
                     <component
                       :is="iconMap.check"
-                      v-if="vModel === md"
+                      v-if="vModel === md.value"
                       id="nc-selected-item-icon"
                       class="text-nc-content-purple-medium w-4 h-4"
                     />
@@ -198,4 +212,10 @@ onMounted(async () => {
   </NcDropdown>
 </template>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+:deep(.nc-select.ant-select) {
+  .ant-select-selector {
+    @apply !rounded-lg;
+  }
+}
+</style>