feat: add FE changes for captain pdf support for faq generation (#12115)
Linked PR https://github.com/chatwoot/chatwoot/pull/12113 ## Linear Link https://linear.app/chatwoot/issue/CW-4515/upload-pdfs-to-captain ## Description This PR adds support for PDF file uploads to the Captain document knowledge base system. The feature enables users to upload PDF files directly to the knowledge base for FAQ generation and document processing, expanding beyond the existing URL-based document ingestion. ## Type of change - [ ] New feature (non-breaking change which adds functionality) ## How Has This Been Tested? - Unit Tests - Manually via UI ## Checklist: - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my code - [x] I have commented on my code, particularly in hard-to-understand areas - [x] I have made corresponding changes to the documentation - [x] My changes generate no new warnings - [x] I have added tests that prove my fix is effective or that my feature works - [x] New and existing unit tests pass locally with my changes - [x] Any dependent changes have been merged and published in downstream modules --------- Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com> Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com> Co-authored-by: iamsivin <iamsivin@gmail.com>
This commit is contained in:
Tanmay Deep Sharma
committed by
GitHub
GitHub
parent
b0112a2869
commit
2f3b4ad215
@@ -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, requiredIf, url } 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';
|
||||
@@ -11,6 +12,8 @@ import ComboBox from 'dashboard/components-next/combobox/ComboBox.vue';
|
||||
|
||||
const emit = defineEmits(['submit', 'cancel']);
|
||||
|
||||
const MAX_FILE_SIZE = 10 * 1024 * 1024; // 10MB
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const formState = {
|
||||
@@ -20,14 +23,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' && url),
|
||||
minLength: requiredIf(() => state.documentType === 'url' && minLength(1)),
|
||||
},
|
||||
assistantId: { required },
|
||||
pdfFile: {
|
||||
required: requiredIf(() => state.documentType === 'pdf'),
|
||||
},
|
||||
};
|
||||
|
||||
const assistantList = computed(() =>
|
||||
@@ -37,10 +51,17 @@ const assistantList = computed(() =>
|
||||
}))
|
||||
);
|
||||
|
||||
const documentTypeOptions = [
|
||||
{ value: 'url', label: t('CAPTAIN.DOCUMENTS.FORM.TYPE.URL') },
|
||||
{ value: 'pdf', label: t('CAPTAIN.DOCUMENTS.FORM.TYPE.PDF') },
|
||||
];
|
||||
|
||||
const v$ = useVuelidate(validationRules, state);
|
||||
|
||||
const isLoading = computed(() => formState.uiFlags.value.creatingItem);
|
||||
|
||||
const hasPdfFileError = computed(() => v$.value.pdfFile.$error);
|
||||
|
||||
const getErrorMessage = (field, errorKey) => {
|
||||
return v$.value[field].$error
|
||||
? t(`CAPTAIN.DOCUMENTS.FORM.${errorKey}.ERROR`)
|
||||
@@ -50,14 +71,57 @@ 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 > MAX_FILE_SIZE) {
|
||||
// 10MB
|
||||
useAlert(t('CAPTAIN.DOCUMENTS.FORM.PDF_FILE.TOO_LARGE'));
|
||||
event.target.value = '';
|
||||
return;
|
||||
}
|
||||
state.pdfFile = file;
|
||||
state.name = file.name.replace(/\.pdf$/i, '');
|
||||
}
|
||||
};
|
||||
|
||||
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.replace('.pdf', '')
|
||||
);
|
||||
// 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 +135,89 @@ const handleSubmit = async () => {
|
||||
|
||||
<template>
|
||||
<form class="flex flex-col gap-4" @submit.prevent="handleSubmit">
|
||||
<div class="flex flex-col gap-1">
|
||||
<label
|
||||
for="documentType"
|
||||
class="mb-0.5 text-sm font-medium text-n-slate-12"
|
||||
>
|
||||
{{ t('CAPTAIN.DOCUMENTS.FORM.TYPE.LABEL') }}
|
||||
</label>
|
||||
<ComboBox
|
||||
id="documentType"
|
||||
v-model="state.documentType"
|
||||
:options="documentTypeOptions"
|
||||
class="[&>div>button]:bg-n-alpha-black2"
|
||||
/>
|
||||
</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"
|
||||
:color="hasPdfFileError ? 'ruby' : 'slate'"
|
||||
:variant="hasPdfFileError ? 'outline' : 'solid'"
|
||||
class="!w-full !h-auto !justify-between !py-4"
|
||||
@click="openFileDialog"
|
||||
>
|
||||
<template #default>
|
||||
<div class="flex gap-2 items-center">
|
||||
<div
|
||||
class="flex justify-center items-center w-10 h-10 rounded-lg bg-n-slate-3"
|
||||
>
|
||||
<i class="text-xl i-ph-file-pdf text-n-slate-11" />
|
||||
</div>
|
||||
<div class="flex flex-col flex-1 gap-1 items-start">
|
||||
<p class="m-0 text-sm font-medium text-n-slate-12">
|
||||
{{
|
||||
state.pdfFile
|
||||
? state.pdfFile.name
|
||||
: t('CAPTAIN.DOCUMENTS.FORM.PDF_FILE.CHOOSE_FILE')
|
||||
}}
|
||||
</p>
|
||||
<p class="m-0 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>
|
||||
</div>
|
||||
|
||||
<i class="i-lucide-upload text-n-slate-11" />
|
||||
</template>
|
||||
</Button>
|
||||
</div>
|
||||
<p v-if="formErrors.pdfFile" class="text-xs text-n-ruby-9">
|
||||
{{ 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') }}
|
||||
@@ -88,12 +228,12 @@ const handleSubmit = async () => {
|
||||
:options="assistantList"
|
||||
:has-error="!!formErrors.assistantId"
|
||||
:placeholder="t('CAPTAIN.DOCUMENTS.FORM.ASSISTANT.PLACEHOLDER')"
|
||||
class="[&>div>button]:bg-n-alpha-black2 [&>div>button:not(.focused)]:dark:outline-n-weak [&>div>button:not(.focused)]:hover:!outline-n-slate-6"
|
||||
class="[&>div>button]:bg-n-alpha-black2"
|
||||
:message="formErrors.assistantId"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between w-full gap-3">
|
||||
<div class="flex gap-3 justify-between items-center w-full">
|
||||
<Button
|
||||
type="button"
|
||||
variant="faded"
|
||||
|
||||
Reference in New Issue
Block a user