Merge remote-tracking branch 'origin/feat/support-pdf-upload-faq-gen-fe' into merge

app/javascript/dashboard/components-next/captain/pageComponents/document/CreateDocumentDialog.vue

@@ -2,20 +2,15 @@
 import { ref } from 'vue';
 import { useStore } from 'dashboard/composables/store';
 import { useAlert } from 'dashboard/composables';
-import { useI18n } from 'vue-i18n';
-
 import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
 import DocumentForm from './DocumentForm.vue';
 
 const emit = defineEmits(['close', 'success']);
-const { t } = useI18n();
 const store = useStore();
 
 const dialogRef = ref(null);
 const documentForm = ref(null);
 
-const i18nKey = 'CAPTAIN.DOCUMENTS.CREATE';
-
 const handleSubmit = async newDocument => {
   try {
     if (newDocument.type === 'pdf') {
@@ -36,7 +31,7 @@ const handleSubmit = async newDocument => {
       });
       useAlert('Document created successfully!');
     }
-    
+
     // Emit success event to refresh the list
     emit('success');
     dialogRef.value.close();
@@ -62,8 +57,8 @@ defineExpose({ dialogRef });
 <template>
   <Dialog
     ref="dialogRef"
-    title="Create New Document"
-    description="Add a new document from a website URL or by uploading a PDF file"
+    :title="$t('CAPTAIN.DOCUMENTS.CREATE.TITLE')"
+    :description="$t('CAPTAIN.DOCUMENTS.CREATE.DESCRIPTION')"
     :show-cancel-button="false"
     :show-confirm-button="false"
     @close="handleClose"

app/javascript/dashboard/components-next/captain/pageComponents/document/DocumentForm.vue

@@ -1,6 +1,5 @@
 <script setup>
 import { reactive, computed, ref } from 'vue';
-import { useI18n } from 'vue-i18n';
 import { useVuelidate } from '@vuelidate/core';
 import { required, minLength, url } from '@vuelidate/validators';
 import { useMapGetter } from 'dashboard/composables/store';
@@ -12,8 +11,6 @@ import FileUpload from 'dashboard/components-next/fileUpload/FileUpload.vue';
 
 const emit = defineEmits(['submit', 'cancel']);
 
-const { t } = useI18n();
-
 const formState = {
   uiFlags: useMapGetter('captainDocuments/getUIFlags'),
   assistants: useMapGetter('captainAssistants/getRecords'),
@@ -126,7 +123,7 @@ const handleSourceTypeChange = type => {
     <!-- Source Type Selection -->
     <div class="flex flex-col gap-2">
       <label class="mb-0.5 text-sm font-medium text-n-slate-12">
-        Choose Source Type
+        {{ $t('CAPTAIN.DOCUMENTS.CREATE.FORM.SOURCE_TYPE.LABEL') }}
       </label>
       <div class="flex gap-2">
         <button
@@ -153,7 +150,9 @@ const handleSourceTypeChange = type => {
                 fill="currentColor"
               />
             </svg>
-            <span class="text-sm font-medium">Website URL</span>
+            <span class="text-sm font-medium">{{
+              $t('CAPTAIN.DOCUMENTS.CREATE.FORM.SOURCE_TYPE.WEBSITE_URL')
+            }}</span>
           </div>
         </button>
         <button
@@ -180,7 +179,9 @@ const handleSourceTypeChange = type => {
                 fill="currentColor"
               />
             </svg>
-            <span class="text-sm font-medium">PDF Upload</span>
+            <span class="text-sm font-medium">{{
+              $t('CAPTAIN.DOCUMENTS.CREATE.FORM.SOURCE_TYPE.PDF_UPLOAD')
+            }}</span>
           </div>
         </button>
       </div>
@@ -200,7 +201,7 @@ const handleSourceTypeChange = type => {
     <!-- PDF Upload (when PDF is selected) -->
     <div v-if="state.sourceType === 'pdf'" class="flex flex-col gap-2">
       <label class="mb-0.5 text-sm font-medium text-n-slate-12">
-        Upload PDF Document
+        {{ $t('CAPTAIN.DOCUMENTS.CREATE.FORM.PDF_UPLOAD.LABEL') }}
       </label>
 
       <!-- File upload area -->
@@ -242,7 +243,7 @@ const handleSourceTypeChange = type => {
                   Math.round((state.selectedFile.size / 1024 / 1024) * 100) /
                   100
                 }}
-                MB
+                {{ $t('GENERAL.FILE_SIZE.MB') }}
               </p>
             </div>
           </div>
@@ -274,7 +275,7 @@ const handleSourceTypeChange = type => {
     <!-- Assistant Selection -->
     <div class="flex flex-col gap-1">
       <label for="assistant" class="mb-0.5 text-sm font-medium text-n-slate-12">
-        Select Assistant
+        {{ $t('CAPTAIN.DOCUMENTS.CREATE.FORM.ASSISTANT.LABEL') }}
       </label>
       <ComboBox
         id="assistant"

app/javascript/dashboard/components-next/fileUpload/FileUpload.vue

@@ -1,6 +1,5 @@
 <script setup>
 import { ref, computed } from 'vue';
-import { useI18n } from 'vue-i18n';
 
 const props = defineProps({
   accept: {
@@ -33,9 +32,7 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(['file-selected', 'file-error']);
-
-const { t } = useI18n();
+const emit = defineEmits(['fileSelected', 'fileError']);
 const fileInput = ref(null);
 const isDragOver = ref(false);
 
@@ -52,17 +49,17 @@ const validateFile = file => {
   // Check file size
   if (file.size > maxSize.value) {
     const errorMsg = `File "${file.name}" is too large. Maximum size is ${props.maxSizeMB}MB.`;
-    emit('file-error', errorMsg);
+    emit('fileError', errorMsg);
     return false;
   }
 
   // Check file type if specified
   if (
     props.accept !== '*' &&
-    !file.type.match(new RegExp(props.accept.replace('*', '.*')))
+    !file.type.match(new RegExp(props.accept.replace(/\*/g, '.*')))
   ) {
     const errorMsg = `File type not supported. Only ${props.accept} files are allowed.`;
-    emit('file-error', errorMsg);
+    emit('fileError', errorMsg);
     return false;
   }
 
@@ -74,7 +71,7 @@ const handleFileChange = event => {
   if (files && files.length > 0) {
     const file = files[0];
     if (validateFile(file)) {
-      emit('file-selected', file);
+      emit('fileSelected', file);
     }
   }
   // Reset input value to allow selecting the same file again
@@ -106,7 +103,7 @@ const handleDrop = event => {
   if (files && files.length > 0) {
     const file = files[0];
     if (validateFile(file)) {
-      emit('file-selected', file);
+      emit('fileSelected', file);
     }
   }
 };
@@ -162,7 +159,11 @@ const displayText = computed(() => {
           {{ displayText }}
         </p>
         <p class="text-xs text-n-slate-8 mt-1">
-          Maximum file size: {{ maxSizeMB }}MB
+          {{
+            $t('CAPTAIN.DOCUMENTS.CREATE.FORM.FILE_UPLOAD.MAX_SIZE', {
+              size: maxSizeMB,
+            })
+          }}
         </p>
       </div>
     </div>