From 8f27ba081cca190e004e4f4459f163ea4c63702a Mon Sep 17 00:00:00 2001
From: Tanmay Deep Sharma <tanmaydeepsharma21@gmail.com>
Date: Wed, 2 Jul 2025 12:52:45 +0530
Subject: [PATCH 1/6] feat: add PDF upload functionality

---
 .../dashboard/api/captain/document.js         |   8 +
 .../document/CreateDocumentDialog.vue         |  32 ++-
 .../pageComponents/document/DocumentForm.vue  | 249 ++++++++++++++++--
 .../components-next/fileUpload/FileUpload.vue | 201 ++++++++++++++
 .../dashboard/captain/documents/Index.vue     |   6 +
 .../dashboard/store/captain/document.js       |  17 ++
 6 files changed, 479 insertions(+), 34 deletions(-)
 create mode 100644 app/javascript/dashboard/components-next/fileUpload/FileUpload.vue

diff --git a/app/javascript/dashboard/api/captain/document.js b/app/javascript/dashboard/api/captain/document.js
index dc22b0c32..a4ec6b23e 100644
--- a/app/javascript/dashboard/api/captain/document.js
+++ b/app/javascript/dashboard/api/captain/document.js
@@ -15,6 +15,14 @@ class CaptainDocument extends ApiClient {
       },
     });
   }
+
+  uploadPdf(formData) {
+    return axios.post(`${this.url}/upload_pdf`, formData, {
+      headers: {
+        'Content-Type': 'multipart/form-data',
+      },
+    });
+  }
 }
 
 export default new CaptainDocument();
diff --git a/app/javascript/dashboard/components-next/captain/pageComponents/document/CreateDocumentDialog.vue b/app/javascript/dashboard/components-next/captain/pageComponents/document/CreateDocumentDialog.vue
index 7db74f523..40ad2cc6a 100644
--- a/app/javascript/dashboard/components-next/captain/pageComponents/document/CreateDocumentDialog.vue
+++ b/app/javascript/dashboard/components-next/captain/pageComponents/document/CreateDocumentDialog.vue
@@ -7,7 +7,7 @@ import { useI18n } from 'vue-i18n';
 import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
 import DocumentForm from './DocumentForm.vue';
 
-const emit = defineEmits(['close']);
+const emit = defineEmits(['close', 'success']);
 const { t } = useI18n();
 const store = useStore();
 
@@ -18,12 +18,32 @@ const i18nKey = 'CAPTAIN.DOCUMENTS.CREATE';
 
 const handleSubmit = async newDocument => {
   try {
-    await store.dispatch('captainDocuments/create', newDocument);
-    useAlert(t(`${i18nKey}.SUCCESS_MESSAGE`));
+    if (newDocument.type === 'pdf') {
+      // Handle PDF upload
+      const formData = new FormData();
+      formData.append('pdf_document', newDocument.pdf_document);
+      formData.append('assistant_id', newDocument.assistant_id);
+
+      await store.dispatch('captainDocuments/uploadPdf', formData);
+      useAlert('PDF uploaded successfully! Processing will begin shortly.');
+    } else {
+      // Handle URL creation
+      await store.dispatch('captainDocuments/create', {
+        document: {
+          external_link: newDocument.external_link,
+          assistant_id: newDocument.assistant_id,
+        },
+      });
+      useAlert('Document created successfully!');
+    }
+    
+    // Emit success event to refresh the list
+    emit('success');
     dialogRef.value.close();
   } catch (error) {
     const errorMessage =
-      error?.response?.message || t(`${i18nKey}.ERROR_MESSAGE`);
+      error?.response?.data?.message ||
+      'Failed to create document. Please try again.';
     useAlert(errorMessage);
   }
 };
@@ -42,8 +62,8 @@ defineExpose({ dialogRef });
 <template>
   <Dialog
     ref="dialogRef"
-    :title="$t(`${i18nKey}.TITLE`)"
-    :description="$t('CAPTAIN.DOCUMENTS.FORM_DESCRIPTION')"
+    title="Create New Document"
+    description="Add a new document from a website URL or by uploading a PDF file"
     :show-cancel-button="false"
     :show-confirm-button="false"
     @close="handleClose"
diff --git a/app/javascript/dashboard/components-next/captain/pageComponents/document/DocumentForm.vue b/app/javascript/dashboard/components-next/captain/pageComponents/document/DocumentForm.vue
index d85ba8a06..092ce0e4a 100644
--- a/app/javascript/dashboard/components-next/captain/pageComponents/document/DocumentForm.vue
+++ b/app/javascript/dashboard/components-next/captain/pageComponents/document/DocumentForm.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { reactive, computed } from 'vue';
+import { reactive, computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useVuelidate } from '@vuelidate/core';
 import { required, minLength, url } from '@vuelidate/validators';
@@ -8,6 +8,7 @@ import { useMapGetter } from 'dashboard/composables/store';
 import Input from 'dashboard/components-next/input/Input.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
 import ComboBox from 'dashboard/components-next/combobox/ComboBox.vue';
+import FileUpload from 'dashboard/components-next/fileUpload/FileUpload.vue';
 
 const emit = defineEmits(['submit', 'cancel']);
 
@@ -19,16 +20,26 @@ const formState = {
 };
 
 const initialState = {
-  name: '',
+  url: '',
   assistantId: null,
+  selectedFile: null,
+  sourceType: 'url', // 'url' or 'pdf'
 };
 
 const state = reactive({ ...initialState });
+const uploadError = ref('');
 
-const validationRules = {
-  url: { required, url, minLength: minLength(1) },
-  assistantId: { required },
-};
+const validationRules = computed(() => {
+  const rules = {
+    assistantId: { required },
+  };
+
+  if (state.sourceType === 'url') {
+    rules.url = { required, url, minLength: minLength(1) };
+  }
+
+  return rules;
+});
 
 const assistantList = computed(() =>
   formState.assistants.value.map(assistant => ({
@@ -41,70 +52,252 @@ const v$ = useVuelidate(validationRules, state);
 
 const isLoading = computed(() => formState.uiFlags.value.creatingItem);
 
-const getErrorMessage = (field, errorKey) => {
-  return v$.value[field].$error
-    ? t(`CAPTAIN.DOCUMENTS.FORM.${errorKey}.ERROR`)
-    : '';
+const getErrorMessage = (field, errorMessage) => {
+  return v$.value[field]?.$error ? errorMessage : '';
 };
 
 const formErrors = computed(() => ({
-  url: getErrorMessage('url', 'URL'),
-  assistantId: getErrorMessage('assistantId', 'ASSISTANT'),
+  url: getErrorMessage('url', 'Please enter a valid URL'),
+  assistantId: getErrorMessage('assistantId', 'Please select an assistant'),
 }));
 
 const handleCancel = () => emit('cancel');
 
-const prepareDocumentDetails = () => ({
-  external_link: state.url,
-  assistant_id: state.assistantId,
-});
+const prepareDocumentDetails = () => {
+  if (state.sourceType === 'pdf') {
+    return {
+      type: 'pdf',
+      pdf_document: state.selectedFile,
+      assistant_id: state.assistantId,
+    };
+  }
+
+  return {
+    type: 'url',
+    external_link: state.url,
+    assistant_id: state.assistantId,
+  };
+};
 
 const handleSubmit = async () => {
+  uploadError.value = '';
+
+  // Validate form
   const isFormValid = await v$.value.$validate();
   if (!isFormValid) {
     return;
   }
 
+  // For PDF uploads, check if file is selected
+  if (state.sourceType === 'pdf' && !state.selectedFile) {
+    uploadError.value = 'Please select a PDF file to upload.';
+    return;
+  }
+
   emit('submit', prepareDocumentDetails());
 };
+
+// PDF Upload handlers
+const handleFileSelected = file => {
+  state.selectedFile = file;
+  uploadError.value = '';
+};
+
+const handleFileError = error => {
+  uploadError.value = error;
+  state.selectedFile = null;
+};
+
+const clearSelectedFile = () => {
+  state.selectedFile = null;
+  uploadError.value = '';
+};
+
+const handleSourceTypeChange = type => {
+  state.sourceType = type;
+  uploadError.value = '';
+  state.selectedFile = null;
+  state.url = '';
+};
 </script>
 
 <template>
   <form class="flex flex-col gap-4" @submit.prevent="handleSubmit">
-    <Input
-      v-model="state.url"
-      :label="t('CAPTAIN.DOCUMENTS.FORM.URL.LABEL')"
-      :placeholder="t('CAPTAIN.DOCUMENTS.FORM.URL.PLACEHOLDER')"
-      :message="formErrors.url"
-      :message-type="formErrors.url ? 'error' : 'info'"
-    />
+    <!-- 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
+      </label>
+      <div class="flex gap-2">
+        <button
+          type="button"
+          class="flex-1 p-3 rounded-lg border border-n-slate-6 hover:border-n-slate-7 transition-colors"
+          :class="{
+            'bg-primary-50 border-primary-500 text-primary-700':
+              state.sourceType === 'url',
+            'bg-n-alpha-2 text-n-slate-10': state.sourceType !== 'url',
+          }"
+          @click="handleSourceTypeChange('url')"
+        >
+          <div class="flex flex-col items-center gap-2">
+            <svg
+              width="20"
+              height="20"
+              viewBox="0 0 24 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M3.9 12C3.9 10.29 5.29 8.9 7 8.9H11V7H7C4.24 7 2 9.24 2 12S4.24 17 7 17H11V15.1H7C5.29 15.1 3.9 13.71 3.9 12ZM8 13H16V11H8V13ZM17 7H13V8.9H17C18.71 8.9 20.1 10.29 20.1 12S18.71 15.1 17 15.1H13V17H17C19.76 17 22 14.76 22 12S19.76 7 17 7Z"
+                fill="currentColor"
+              />
+            </svg>
+            <span class="text-sm font-medium">Website URL</span>
+          </div>
+        </button>
+        <button
+          type="button"
+          class="flex-1 p-3 rounded-lg border border-n-slate-6 hover:border-n-slate-7 transition-colors"
+          :class="{
+            'bg-primary-50 border-primary-500 text-primary-700':
+              state.sourceType === 'pdf',
+            'bg-n-alpha-2 text-n-slate-10': state.sourceType !== 'pdf',
+          }"
+          @click="handleSourceTypeChange('pdf')"
+        >
+          <div class="flex flex-col items-center gap-2">
+            <svg
+              width="20"
+              height="20"
+              viewBox="0 0 24 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z"
+                fill="currentColor"
+              />
+            </svg>
+            <span class="text-sm font-medium">PDF Upload</span>
+          </div>
+        </button>
+      </div>
+    </div>
+
+    <!-- URL Input (when URL is selected) -->
+    <div v-if="state.sourceType === 'url'">
+      <Input
+        v-model="state.url"
+        label="Website URL"
+        placeholder="Enter the website URL to crawl"
+        :message="formErrors.url"
+        :message-type="formErrors.url ? 'error' : 'info'"
+      />
+    </div>
+
+    <!-- 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
+      </label>
+
+      <!-- File upload area -->
+      <div v-if="!state.selectedFile">
+        <FileUpload
+          accept="application/pdf"
+          :max-size-m-b="10"
+          placeholder="Select a PDF file"
+          upload-text="Click to select PDF or drag and drop"
+          drag-text="Drop PDF file here"
+          @file-selected="handleFileSelected"
+          @file-error="handleFileError"
+        />
+      </div>
+
+      <!-- Selected file display -->
+      <div v-else class="p-3 bg-n-alpha-2 rounded-lg border border-n-slate-6">
+        <div class="flex items-center justify-between">
+          <div class="flex items-center gap-3">
+            <svg
+              width="20"
+              height="20"
+              viewBox="0 0 24 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+              class="text-red-600"
+            >
+              <path
+                d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z"
+                fill="currentColor"
+              />
+            </svg>
+            <div>
+              <p class="text-sm font-medium text-n-slate-12">
+                {{ state.selectedFile.name }}
+              </p>
+              <p class="text-xs text-n-slate-8">
+                {{
+                  Math.round((state.selectedFile.size / 1024 / 1024) * 100) /
+                  100
+                }}
+                MB
+              </p>
+            </div>
+          </div>
+          <button
+            type="button"
+            class="p-1 rounded hover:bg-n-alpha-3 text-n-slate-8 hover:text-n-slate-10"
+            @click="clearSelectedFile"
+          >
+            <svg
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
+                fill="currentColor"
+              />
+            </svg>
+          </button>
+        </div>
+      </div>
+
+      <!-- Upload error -->
+      <p v-if="uploadError" class="text-sm text-red-600">{{ uploadError }}</p>
+    </div>
+
+    <!-- Assistant Selection -->
     <div class="flex flex-col gap-1">
       <label for="assistant" class="mb-0.5 text-sm font-medium text-n-slate-12">
-        {{ t('CAPTAIN.DOCUMENTS.FORM.ASSISTANT.LABEL') }}
+        Select Assistant
       </label>
       <ComboBox
         id="assistant"
         v-model="state.assistantId"
         :options="assistantList"
         :has-error="!!formErrors.assistantId"
-        :placeholder="t('CAPTAIN.DOCUMENTS.FORM.ASSISTANT.PLACEHOLDER')"
+        placeholder="Choose an assistant"
         class="[&>div>button]:bg-n-alpha-black2 [&>div>button:not(.focused)]:dark:outline-n-weak [&>div>button:not(.focused)]:hover:!outline-n-slate-6"
         :message="formErrors.assistantId"
       />
     </div>
 
+    <!-- Action Buttons -->
     <div class="flex items-center justify-between w-full gap-3">
       <Button
         type="button"
         variant="faded"
         color="slate"
-        :label="t('CAPTAIN.FORM.CANCEL')"
-        class="w-full bg-n-alpha-2 text-n-blue-text hover:bg-n-alpha-3"
+        label="Cancel"
+        class="w-full bg-n-alpha-2 n-blue-text hover:bg-n-alpha-3"
         @click="handleCancel"
       />
       <Button
         type="submit"
-        :label="t('CAPTAIN.FORM.CREATE')"
+        label="Create Document"
         class="w-full"
         :is-loading="isLoading"
         :disabled="isLoading"
diff --git a/app/javascript/dashboard/components-next/fileUpload/FileUpload.vue b/app/javascript/dashboard/components-next/fileUpload/FileUpload.vue
new file mode 100644
index 000000000..008d4f076
--- /dev/null
+++ b/app/javascript/dashboard/components-next/fileUpload/FileUpload.vue
@@ -0,0 +1,201 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+const props = defineProps({
+  accept: {
+    type: String,
+    default: '*',
+  },
+  multiple: {
+    type: Boolean,
+    default: false,
+  },
+  maxSizeMB: {
+    type: Number,
+    default: 10,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  placeholder: {
+    type: String,
+    default: '',
+  },
+  uploadText: {
+    type: String,
+    default: '',
+  },
+  dragText: {
+    type: String,
+    default: '',
+  },
+});
+
+const emit = defineEmits(['file-selected', 'file-error']);
+
+const { t } = useI18n();
+const fileInput = ref(null);
+const isDragOver = ref(false);
+
+const acceptTypes = computed(() => props.accept);
+const maxSize = computed(() => props.maxSizeMB * 1024 * 1024);
+
+const handleFileClick = () => {
+  if (!props.disabled) {
+    fileInput.value?.click();
+  }
+};
+
+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);
+    return false;
+  }
+
+  // Check file type if specified
+  if (
+    props.accept !== '*' &&
+    !file.type.match(new RegExp(props.accept.replace('*', '.*')))
+  ) {
+    const errorMsg = `File type not supported. Only ${props.accept} files are allowed.`;
+    emit('file-error', errorMsg);
+    return false;
+  }
+
+  return true;
+};
+
+const handleFileChange = event => {
+  const files = event.target.files;
+  if (files && files.length > 0) {
+    const file = files[0];
+    if (validateFile(file)) {
+      emit('file-selected', file);
+    }
+  }
+  // Reset input value to allow selecting the same file again
+  event.target.value = '';
+};
+
+const handleDragOver = event => {
+  event.preventDefault();
+  if (!props.disabled) {
+    isDragOver.value = true;
+  }
+};
+
+const handleDragLeave = event => {
+  event.preventDefault();
+  // Only set to false if we're leaving the drop zone completely
+  if (!event.currentTarget.contains(event.relatedTarget)) {
+    isDragOver.value = false;
+  }
+};
+
+const handleDrop = event => {
+  event.preventDefault();
+  isDragOver.value = false;
+
+  if (props.disabled) return;
+
+  const files = event.dataTransfer.files;
+  if (files && files.length > 0) {
+    const file = files[0];
+    if (validateFile(file)) {
+      emit('file-selected', file);
+    }
+  }
+};
+
+const displayText = computed(() => {
+  if (isDragOver.value && props.dragText) {
+    return props.dragText;
+  }
+  return props.uploadText || props.placeholder;
+});
+</script>
+
+<template>
+  <div
+    class="file-upload-zone"
+    :class="{
+      'drag-over': isDragOver,
+      disabled: disabled,
+    }"
+    @dragover="handleDragOver"
+    @dragleave="handleDragLeave"
+    @drop="handleDrop"
+    @click="handleFileClick"
+  >
+    <input
+      ref="fileInput"
+      type="file"
+      :accept="acceptTypes"
+      :multiple="multiple"
+      :disabled="disabled"
+      class="hidden"
+      @change="handleFileChange"
+    />
+
+    <div class="upload-content">
+      <div class="upload-icon">
+        <svg
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          class="text-n-slate-8"
+        >
+          <path
+            d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z"
+            fill="currentColor"
+          />
+        </svg>
+      </div>
+      <div class="upload-text">
+        <p class="text-sm font-medium text-n-slate-11">
+          {{ displayText }}
+        </p>
+        <p class="text-xs text-n-slate-8 mt-1">
+          Maximum file size: {{ maxSizeMB }}MB
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.file-upload-zone {
+  @apply border-2 border-dashed border-n-slate-6 rounded-lg p-6;
+  @apply bg-n-alpha-2 hover:bg-n-alpha-3 cursor-pointer;
+  @apply transition-all duration-200 ease-in-out;
+  @apply flex flex-col items-center justify-center text-center;
+  min-height: 120px;
+}
+
+.file-upload-zone:hover {
+  @apply border-n-slate-7;
+}
+
+.file-upload-zone.drag-over {
+  @apply border-primary-500 bg-primary-50/50;
+}
+
+.file-upload-zone.disabled {
+  @apply opacity-50 cursor-not-allowed;
+  @apply hover:bg-n-alpha-2 hover:border-n-slate-6;
+}
+
+.upload-content {
+  @apply flex flex-col items-center gap-3;
+}
+
+.upload-icon {
+  @apply p-2 rounded-full bg-n-alpha-3;
+}
+</style>
diff --git a/app/javascript/dashboard/routes/dashboard/captain/documents/Index.vue b/app/javascript/dashboard/routes/dashboard/captain/documents/Index.vue
index 90db4694a..4b66ef2b6 100644
--- a/app/javascript/dashboard/routes/dashboard/captain/documents/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/captain/documents/Index.vue
@@ -58,6 +58,11 @@ const handleCreateDialogClose = () => {
   showCreateDialog.value = false;
 };
 
+const handleCreateDialogSuccess = () => {
+  // Refresh the documents list after successful creation
+  fetchDocuments();
+};
+
 const handleAction = ({ action, id }) => {
   selectedDocument.value = documents.value.find(
     captainDocument => id === captainDocument.id
@@ -171,6 +176,7 @@ onMounted(() => {
       v-if="showCreateDialog"
       ref="createDocumentDialog"
       @close="handleCreateDialogClose"
+      @success="handleCreateDialogSuccess"
     />
     <DeleteDialog
       v-if="selectedDocument"
diff --git a/app/javascript/dashboard/store/captain/document.js b/app/javascript/dashboard/store/captain/document.js
index 25d9c3b94..747586229 100644
--- a/app/javascript/dashboard/store/captain/document.js
+++ b/app/javascript/dashboard/store/captain/document.js
@@ -1,7 +1,24 @@
 import CaptainDocumentAPI from 'dashboard/api/captain/document';
 import { createStore } from './storeFactory';
 
+const actions = mutationTypes => ({
+  async uploadPdf({ commit }, formData) {
+    commit(mutationTypes.SET_UI_FLAG, { creatingItem: true });
+    try {
+      const response = await CaptainDocumentAPI.uploadPdf(formData);
+      const { data } = response;
+      commit(mutationTypes.ADD, data.document);
+      commit(mutationTypes.SET_UI_FLAG, { creatingItem: false });
+      return Promise.resolve(data);
+    } catch (error) {
+      commit(mutationTypes.SET_UI_FLAG, { creatingItem: false });
+      return Promise.reject(error);
+    }
+  },
+});
+
 export default createStore({
   name: 'CaptainDocument',
   API: CaptainDocumentAPI,
+  actions,
 });

From 235ce3479c6d93f94109fc7cde2f245af8ecdc50 Mon Sep 17 00:00:00 2001
From: Tanmay Deep Sharma <tanmaydeepsharma21@gmail.com>
Date: Wed, 2 Jul 2025 19:58:34 +0530
Subject: [PATCH 2/6] refactor: use UPSERT for consistency in document upload

---
 .../pageComponents/document/DocumentForm.vue  | 20 ++++++++++---------
 .../components-next/fileUpload/FileUpload.vue |  2 +-
 .../dashboard/captain/documents/Index.vue     |  4 ++--
 .../dashboard/store/captain/document.js       |  3 ++-
 4 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/app/javascript/dashboard/components-next/captain/pageComponents/document/DocumentForm.vue b/app/javascript/dashboard/components-next/captain/pageComponents/document/DocumentForm.vue
index 092ce0e4a..fbb828a28 100644
--- a/app/javascript/dashboard/components-next/captain/pageComponents/document/DocumentForm.vue
+++ b/app/javascript/dashboard/components-next/captain/pageComponents/document/DocumentForm.vue
@@ -131,15 +131,16 @@ const handleSourceTypeChange = type => {
       <div class="flex gap-2">
         <button
           type="button"
-          class="flex-1 p-3 rounded-lg border border-n-slate-6 hover:border-n-slate-7 transition-colors"
+          class="flex-1 p-3 rounded-lg bg-n-alpha-2 hover:border-n-slate-7 transition-colors focus:outline-none"
           :class="{
-            'bg-primary-50 border-primary-500 text-primary-700':
+            'ring-2 ring-woot-500 text-woot-500 border-0':
               state.sourceType === 'url',
-            'bg-n-alpha-2 text-n-slate-10': state.sourceType !== 'url',
+            'border-2 border-n-slate-7 text-n-slate-11':
+              state.sourceType !== 'url',
           }"
           @click="handleSourceTypeChange('url')"
         >
-          <div class="flex flex-col items-center gap-2">
+          <div class="flex items-center justify-center gap-2">
             <svg
               width="20"
               height="20"
@@ -157,15 +158,16 @@ const handleSourceTypeChange = type => {
         </button>
         <button
           type="button"
-          class="flex-1 p-3 rounded-lg border border-n-slate-6 hover:border-n-slate-7 transition-colors"
+          class="flex-1 p-3 rounded-lg bg-n-alpha-2 hover:border-n-slate-7 transition-colors focus:outline-none"
           :class="{
-            'bg-primary-50 border-primary-500 text-primary-700':
+            'ring-2 ring-woot-500 text-woot-500 border-0':
               state.sourceType === 'pdf',
-            'bg-n-alpha-2 text-n-slate-10': state.sourceType !== 'pdf',
+            'border-2 border-n-slate-7 text-n-slate-11':
+              state.sourceType !== 'pdf',
           }"
           @click="handleSourceTypeChange('pdf')"
         >
-          <div class="flex flex-col items-center gap-2">
+          <div class="flex items-center justify-center gap-2">
             <svg
               width="20"
               height="20"
@@ -205,7 +207,7 @@ const handleSourceTypeChange = type => {
       <div v-if="!state.selectedFile">
         <FileUpload
           accept="application/pdf"
-          :max-size-m-b="10"
+          :max-size-m-b="25"
           placeholder="Select a PDF file"
           upload-text="Click to select PDF or drag and drop"
           drag-text="Drop PDF file here"
diff --git a/app/javascript/dashboard/components-next/fileUpload/FileUpload.vue b/app/javascript/dashboard/components-next/fileUpload/FileUpload.vue
index 008d4f076..33765e395 100644
--- a/app/javascript/dashboard/components-next/fileUpload/FileUpload.vue
+++ b/app/javascript/dashboard/components-next/fileUpload/FileUpload.vue
@@ -183,7 +183,7 @@ const displayText = computed(() => {
 }
 
 .file-upload-zone.drag-over {
-  @apply border-primary-500 bg-primary-50/50;
+  @apply border-n-blue-9 bg-n-blue-2/50;
 }
 
 .file-upload-zone.disabled {
diff --git a/app/javascript/dashboard/routes/dashboard/captain/documents/Index.vue b/app/javascript/dashboard/routes/dashboard/captain/documents/Index.vue
index 4b66ef2b6..5f5156d8e 100644
--- a/app/javascript/dashboard/routes/dashboard/captain/documents/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/captain/documents/Index.vue
@@ -59,8 +59,8 @@ const handleCreateDialogClose = () => {
 };
 
 const handleCreateDialogSuccess = () => {
-  // Refresh the documents list after successful creation
-  fetchDocuments();
+  // Document is already added to the store optimistically, no need to refetch
+  // The store action 'uploadPdf' or 'create' already adds the document via commit(mutationTypes.ADD)
 };
 
 const handleAction = ({ action, id }) => {
diff --git a/app/javascript/dashboard/store/captain/document.js b/app/javascript/dashboard/store/captain/document.js
index 747586229..52794b21a 100644
--- a/app/javascript/dashboard/store/captain/document.js
+++ b/app/javascript/dashboard/store/captain/document.js
@@ -7,7 +7,8 @@ const actions = mutationTypes => ({
     try {
       const response = await CaptainDocumentAPI.uploadPdf(formData);
       const { data } = response;
-      commit(mutationTypes.ADD, data.document);
+      // Use UPSERT like the create action for consistency
+      commit(mutationTypes.UPSERT, data);
       commit(mutationTypes.SET_UI_FLAG, { creatingItem: false });
       return Promise.resolve(data);
     } catch (error) {

From 6656b042b86e6f8a102bb96d612a7218eeb96031 Mon Sep 17 00:00:00 2001
From: Tanmay Deep Sharma <32020192+tds-1@users.noreply.github.com>
Date: Thu, 3 Jul 2025 00:09:27 +0530
Subject: [PATCH 3/6] Potential fix for code scanning alert no. 105: Incomplete
 string escaping or encoding

Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>
---
 .../dashboard/components-next/fileUpload/FileUpload.vue         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/javascript/dashboard/components-next/fileUpload/FileUpload.vue b/app/javascript/dashboard/components-next/fileUpload/FileUpload.vue
index 33765e395..bd403c293 100644
--- a/app/javascript/dashboard/components-next/fileUpload/FileUpload.vue
+++ b/app/javascript/dashboard/components-next/fileUpload/FileUpload.vue
@@ -59,7 +59,7 @@ const validateFile = file => {
   // 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);

From ba65a5a53498dd9bfe449031145402c57a6c8fe1 Mon Sep 17 00:00:00 2001
From: Tanmay Deep Sharma <tanmaydeepsharma21@gmail.com>
Date: Thu, 3 Jul 2025 00:20:42 +0530
Subject: [PATCH 4/6] refactor: fix eslint errors

---
 .../document/CreateDocumentDialog.vue         | 11 +++--------
 .../pageComponents/document/DocumentForm.vue  | 19 ++++++++++---------
 .../components-next/fileUpload/FileUpload.vue | 19 ++++++++++---------
 3 files changed, 23 insertions(+), 26 deletions(-)

diff --git a/app/javascript/dashboard/components-next/captain/pageComponents/document/CreateDocumentDialog.vue b/app/javascript/dashboard/components-next/captain/pageComponents/document/CreateDocumentDialog.vue
index 40ad2cc6a..995453ae6 100644
--- a/app/javascript/dashboard/components-next/captain/pageComponents/document/CreateDocumentDialog.vue
+++ b/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"
diff --git a/app/javascript/dashboard/components-next/captain/pageComponents/document/DocumentForm.vue b/app/javascript/dashboard/components-next/captain/pageComponents/document/DocumentForm.vue
index fbb828a28..58d5621c5 100644
--- a/app/javascript/dashboard/components-next/captain/pageComponents/document/DocumentForm.vue
+++ b/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"
diff --git a/app/javascript/dashboard/components-next/fileUpload/FileUpload.vue b/app/javascript/dashboard/components-next/fileUpload/FileUpload.vue
index bd403c293..c10d8fe50 100644
--- a/app/javascript/dashboard/components-next/fileUpload/FileUpload.vue
+++ b/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,7 +49,7 @@ 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;
   }
 
@@ -62,7 +59,7 @@ const validateFile = file => {
     !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>

From 45f9aeec10fdfcbb668b225c6ac46051d7c81f58 Mon Sep 17 00:00:00 2001
From: Tanmay Deep Sharma <tanmaydeepsharma21@gmail.com>
Date: Thu, 3 Jul 2025 00:33:26 +0530
Subject: [PATCH 5/6] update the translation file

---
 .../dashboard/i18n/locale/en/general.json     |  5 ++++-
 .../i18n/locale/en/integrations.json          | 21 +++++++++++++++++--
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/app/javascript/dashboard/i18n/locale/en/general.json b/app/javascript/dashboard/i18n/locale/en/general.json
index 129fb239a..8a3fc3c21 100644
--- a/app/javascript/dashboard/i18n/locale/en/general.json
+++ b/app/javascript/dashboard/i18n/locale/en/general.json
@@ -5,6 +5,9 @@
       "PLACEHOLDER": "Search",
       "EMPTY_STATE": "No results found"
     },
-    "CLOSE": "Close"
+    "CLOSE": "Close",
+    "FILE_SIZE": {
+      "MB": "MB"
+    }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/en/integrations.json b/app/javascript/dashboard/i18n/locale/en/integrations.json
index b3e091722..ee39acad6 100644
--- a/app/javascript/dashboard/i18n/locale/en/integrations.json
+++ b/app/javascript/dashboard/i18n/locale/en/integrations.json
@@ -501,9 +501,26 @@
       },
       "FORM_DESCRIPTION": "Enter the URL of the document to add it as a knowledge source and choose the assistant to associate it with.",
       "CREATE": {
-        "TITLE": "Add a document",
+        "TITLE": "Create New Document",
+        "DESCRIPTION": "Add a new document from a website URL or by uploading a PDF file",
         "SUCCESS_MESSAGE": "The document has been successfully created",
-        "ERROR_MESSAGE": "There was an error creating the document, please try again."
+        "ERROR_MESSAGE": "There was an error creating the document, please try again.",
+        "FORM": {
+          "SOURCE_TYPE": {
+            "LABEL": "Choose Source Type",
+            "WEBSITE_URL": "Website URL",
+            "PDF_UPLOAD": "PDF Upload"
+          },
+          "PDF_UPLOAD": {
+            "LABEL": "Upload PDF Document"
+          },
+          "ASSISTANT": {
+            "LABEL": "Select Assistant"
+          },
+          "FILE_UPLOAD": {
+            "MAX_SIZE": "Maximum file size: {size}MB"
+          }
+        }
       },
       "FORM": {
         "URL": {

From e49a2eb6066de9f13ebc702c40badbb44009964f Mon Sep 17 00:00:00 2001
From: Tanmay Deep Sharma <tanmaydeepsharma21@gmail.com>
Date: Thu, 3 Jul 2025 17:59:07 +0530
Subject: [PATCH 6/6] display file object in case of pdf

---
 .../captain/assistant/DocumentCard.vue        | 31 ++++++++++++++++---
 .../dashboard/captain/documents/Index.vue     |  7 +----
 2 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/app/javascript/dashboard/components-next/captain/assistant/DocumentCard.vue b/app/javascript/dashboard/components-next/captain/assistant/DocumentCard.vue
index d6e546581..d0e85d246 100644
--- a/app/javascript/dashboard/components-next/captain/assistant/DocumentCard.vue
+++ b/app/javascript/dashboard/components-next/captain/assistant/DocumentCard.vue
@@ -26,6 +26,10 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  file: {
+    type: Object,
+    default: null,
+  },
   createdAt: {
     type: Number,
     required: true,
@@ -63,6 +67,22 @@ const menuItems = computed(() => {
 
 const createdAt = computed(() => dynamicTime(props.createdAt));
 
+const displayLink = computed(() => {
+  // For PDF uploads, show the filename instead of the generated external_link
+  if (props.file?.filename) {
+    return props.file.filename;
+  }
+  return props.externalLink;
+});
+
+const actualLink = computed(() => {
+  // For PDF uploads, return the actual file URL; for URLs, return the external_link
+  if (props.file?.url) {
+    return props.file.url;
+  }
+  return props.externalLink;
+});
+
 const handleAction = ({ action, value }) => {
   toggleDropdown(false);
   emit('action', { action, value, id: props.id });
@@ -103,12 +123,15 @@ const handleAction = ({ action, value }) => {
         <i class="i-woot-captain" />
         {{ assistant?.name || '' }}
       </span>
-      <span
-        class="text-n-slate-11 text-sm truncate flex justify-start flex-1 items-center gap-1"
+      <a
+        :href="actualLink"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="text-n-slate-11 text-sm truncate flex justify-start flex-1 items-center gap-1 hover:text-n-slate-12 transition-colors"
       >
         <i class="i-ph-link-simple shrink-0" />
-        <span class="truncate">{{ externalLink }}</span>
-      </span>
+        <span class="truncate">{{ displayLink }}</span>
+      </a>
       <div class="shrink-0 text-sm text-n-slate-11 line-clamp-1">
         {{ createdAt }}
       </div>
diff --git a/app/javascript/dashboard/routes/dashboard/captain/documents/Index.vue b/app/javascript/dashboard/routes/dashboard/captain/documents/Index.vue
index 5f5156d8e..6cc1d999a 100644
--- a/app/javascript/dashboard/routes/dashboard/captain/documents/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/captain/documents/Index.vue
@@ -58,11 +58,6 @@ const handleCreateDialogClose = () => {
   showCreateDialog.value = false;
 };
 
-const handleCreateDialogSuccess = () => {
-  // Document is already added to the store optimistically, no need to refetch
-  // The store action 'uploadPdf' or 'create' already adds the document via commit(mutationTypes.ADD)
-};
-
 const handleAction = ({ action, id }) => {
   selectedDocument.value = documents.value.find(
     captainDocument => id === captainDocument.id
@@ -159,6 +154,7 @@ onMounted(() => {
           :key="doc.id"
           :name="doc.name || doc.external_link"
           :external-link="doc.external_link"
+          :file="doc.file"
           :assistant="doc.assistant"
           :created-at="doc.created_at"
           @action="handleAction"
@@ -176,7 +172,6 @@ onMounted(() => {
       v-if="showCreateDialog"
       ref="createDocumentDialog"
       @close="handleCreateDialogClose"
-      @success="handleCreateDialogSuccess"
     />
     <DeleteDialog
       v-if="selectedDocument"