feat: add fe changes for captain pdf support for faq generation
This commit is contained in:
Tanmay Deep Sharma
+3
-1
@@ -23,7 +23,9 @@ const handleSubmit = async newDocument => {
|
||||
dialogRef.value.close();
|
||||
} catch (error) {
|
||||
const errorMessage =
|
||||
error?.response?.message || t(`${i18nKey}.ERROR_MESSAGE`);
|
||||
error?.response?.data?.message ||
|
||||
error?.response?.message ||
|
||||
t(`${i18nKey}.ERROR_MESSAGE`);
|
||||
useAlert(errorMessage);
|
||||
}
|
||||
};
|
||||
|
||||
+133
-7
@@ -1,9 +1,10 @@
|
||||
<script setup>
|
||||
import { reactive, computed } from 'vue';
|
||||
import { reactive, computed, ref, nextTick } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useVuelidate } from '@vuelidate/core';
|
||||
import { required, minLength, url } from '@vuelidate/validators';
|
||||
import { required, minLength, url, requiredIf } from '@vuelidate/validators';
|
||||
import { useMapGetter } from 'dashboard/composables/store';
|
||||
import { useAlert } from 'dashboard/composables';
|
||||
|
||||
import Input from 'dashboard/components-next/input/Input.vue';
|
||||
import Button from 'dashboard/components-next/button/Button.vue';
|
||||
@@ -20,14 +21,25 @@ const formState = {
|
||||
|
||||
const initialState = {
|
||||
name: '',
|
||||
url: '',
|
||||
assistantId: null,
|
||||
documentType: 'url',
|
||||
pdfFile: null,
|
||||
};
|
||||
|
||||
const state = reactive({ ...initialState });
|
||||
const fileInputRef = ref(null);
|
||||
|
||||
const validationRules = {
|
||||
url: { required, url, minLength: minLength(1) },
|
||||
url: {
|
||||
required: requiredIf(() => state.documentType === 'url'),
|
||||
url: requiredIf(() => state.documentType === 'url'),
|
||||
minLength: minLength(1)
|
||||
},
|
||||
assistantId: { required },
|
||||
pdfFile: {
|
||||
required: requiredIf(() => state.documentType === 'pdf')
|
||||
},
|
||||
};
|
||||
|
||||
const assistantList = computed(() =>
|
||||
@@ -50,14 +62,53 @@ const getErrorMessage = (field, errorKey) => {
|
||||
const formErrors = computed(() => ({
|
||||
url: getErrorMessage('url', 'URL'),
|
||||
assistantId: getErrorMessage('assistantId', 'ASSISTANT'),
|
||||
pdfFile: getErrorMessage('pdfFile', 'PDF_FILE'),
|
||||
}));
|
||||
|
||||
const handleCancel = () => emit('cancel');
|
||||
|
||||
const prepareDocumentDetails = () => ({
|
||||
external_link: state.url,
|
||||
assistant_id: state.assistantId,
|
||||
});
|
||||
const handleFileChange = (event) => {
|
||||
const file = event.target.files[0];
|
||||
if (file) {
|
||||
if (file.type !== 'application/pdf') {
|
||||
useAlert(t('CAPTAIN.DOCUMENTS.FORM.PDF_FILE.INVALID_TYPE'));
|
||||
event.target.value = '';
|
||||
return;
|
||||
}
|
||||
if (file.size > 512 * 1024 * 1024) { // 512MB
|
||||
useAlert(t('CAPTAIN.DOCUMENTS.FORM.PDF_FILE.TOO_LARGE'));
|
||||
event.target.value = '';
|
||||
return;
|
||||
}
|
||||
state.pdfFile = file;
|
||||
state.name = file.name.replace('.pdf', '');
|
||||
}
|
||||
};
|
||||
|
||||
const openFileDialog = () => {
|
||||
// Use nextTick to ensure the ref is available
|
||||
nextTick(() => {
|
||||
if (fileInputRef.value) {
|
||||
fileInputRef.value.click();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const prepareDocumentDetails = () => {
|
||||
const formData = new FormData();
|
||||
formData.append('document[assistant_id]', state.assistantId);
|
||||
|
||||
if (state.documentType === 'url') {
|
||||
formData.append('document[external_link]', state.url);
|
||||
formData.append('document[name]', state.name || state.url);
|
||||
} else {
|
||||
formData.append('document[pdf_file]', state.pdfFile);
|
||||
formData.append('document[name]', state.name || state.pdfFile.name);
|
||||
// No need to send external_link for PDF - it's auto-generated in the backend
|
||||
}
|
||||
|
||||
return formData;
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
const isFormValid = await v$.value.$validate();
|
||||
@@ -71,13 +122,88 @@ const handleSubmit = async () => {
|
||||
|
||||
<template>
|
||||
<form class="flex flex-col gap-4" @submit.prevent="handleSubmit">
|
||||
<div class="flex flex-col gap-2">
|
||||
<label class="text-sm font-medium text-n-slate-12">
|
||||
{{ t('CAPTAIN.DOCUMENTS.FORM.TYPE.LABEL') }}
|
||||
</label>
|
||||
<div class="grid grid-cols-2 gap-3 p-1 bg-n-slate-3 rounded-lg">
|
||||
<button
|
||||
type="button"
|
||||
@click="state.documentType = 'url'"
|
||||
class="relative flex items-center justify-center gap-2 px-4 py-2.5 rounded-md font-medium text-sm transition-all duration-200"
|
||||
:class="state.documentType === 'url'
|
||||
? 'bg-n-white text-n-slate-12 shadow-sm'
|
||||
: 'text-n-slate-11 hover:text-n-slate-12'"
|
||||
>
|
||||
<i class="i-ph-link-simple text-base" />
|
||||
<span>{{ t('CAPTAIN.DOCUMENTS.FORM.TYPE.URL') }}</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
@click="state.documentType = 'pdf'"
|
||||
class="relative flex items-center justify-center gap-2 px-4 py-2.5 rounded-md font-medium text-sm transition-all duration-200"
|
||||
:class="state.documentType === 'pdf'
|
||||
? 'bg-n-white text-n-slate-12 shadow-sm'
|
||||
: 'text-n-slate-11 hover:text-n-slate-12'"
|
||||
>
|
||||
<i class="i-ph-file-pdf text-base" />
|
||||
<span>{{ t('CAPTAIN.DOCUMENTS.FORM.TYPE.PDF') }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Input
|
||||
v-if="state.documentType === 'url'"
|
||||
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'"
|
||||
/>
|
||||
|
||||
<div v-if="state.documentType === 'pdf'" class="flex flex-col gap-2">
|
||||
<label class="text-sm font-medium text-n-slate-12">
|
||||
{{ t('CAPTAIN.DOCUMENTS.FORM.PDF_FILE.LABEL') }}
|
||||
</label>
|
||||
<div class="relative">
|
||||
<input
|
||||
ref="fileInputRef"
|
||||
type="file"
|
||||
accept=".pdf"
|
||||
class="hidden"
|
||||
@change="handleFileChange"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
@click="openFileDialog"
|
||||
class="flex items-center gap-3 px-4 py-3 border border-n-slate-6 rounded-lg cursor-pointer hover:border-n-slate-8 transition-colors w-full text-left"
|
||||
:class="state.pdfFile ? 'bg-n-slate-2' : 'bg-n-white'"
|
||||
>
|
||||
<div class="flex items-center justify-center w-10 h-10 bg-n-slate-3 rounded-lg">
|
||||
<i class="i-ph-file-pdf text-xl text-n-slate-11" />
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="text-sm font-medium text-n-slate-12">
|
||||
{{ state.pdfFile ? state.pdfFile.name : t('CAPTAIN.DOCUMENTS.FORM.PDF_FILE.CHOOSE_FILE') }}
|
||||
</p>
|
||||
<p class="text-xs text-n-slate-11">
|
||||
{{ state.pdfFile ? `${(state.pdfFile.size / 1024 / 1024).toFixed(2)} MB` : t('CAPTAIN.DOCUMENTS.FORM.PDF_FILE.HELP_TEXT') }}
|
||||
</p>
|
||||
</div>
|
||||
<i class="i-lucide-upload text-n-slate-11" />
|
||||
</button>
|
||||
</div>
|
||||
<p v-if="formErrors.pdfFile" class="text-sm text-n-red-11">
|
||||
{{ formErrors.pdfFile }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Input
|
||||
v-model="state.name"
|
||||
:label="t('CAPTAIN.DOCUMENTS.FORM.NAME.LABEL')"
|
||||
:placeholder="t('CAPTAIN.DOCUMENTS.FORM.NAME.PLACEHOLDER')"
|
||||
/>
|
||||
|
||||
<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') }}
|
||||
|
||||
Reference in New Issue
Block a user