feat: Add a review step for FAQs generated from conversations before using it (#10693)

This PR introduces a review step for generated FAQs, allowing a human to
validate and approve them before use in customer interactions. While
hallucinations are minimal, this step ensures accurate and reliable FAQs
for Captain to use during LLM calls when responding to customers.

- Added a status field for the FAQ
- Allow the filter on the UI.
<img width="1072" alt="Screenshot 2025-01-15 at 6 39 26 PM"
src="https://github.com/user-attachments/assets/81dfc038-31e9-40e6-8a09-586ebc4e8384"
/>

app/javascript/dashboard/components-next/captain/assistant/ResponseCard.story.vue

@@ -9,6 +9,7 @@ const responses = [
     created_at: 1736283330,
     id: 87,
     question: 'Why is my Messenger in Chatwoot deactivated?',
+    status: 'pending',
     assistant: {
       account_id: 1,
       config: {
@@ -148,6 +149,7 @@ const responses = [
           :id="response.id"
           :question="response.question"
           :answer="response.answer"
+          :status="response.status"
           :assistant="response.assistant"
           :created-at="response.created_at"
         />

app/javascript/dashboard/components-next/captain/assistant/ResponseCard.vue

@@ -25,6 +25,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  status: {
+    type: String,
+    default: 'approved',
+  },
   assistant: {
     type: Object,
     default: () => ({}),
@@ -45,7 +49,22 @@ const { t } = useI18n();
 
 const [showActionsDropdown, toggleDropdown] = useToggle();
 
+const statusAction = computed(() => {
+  if (props.status === 'pending') {
+    return [
+      {
+        label: t('CAPTAIN.RESPONSES.OPTIONS.APPROVE'),
+        value: 'approve',
+        action: 'approve',
+        icon: 'i-lucide-circle-check-big',
+      },
+    ];
+  }
+  return [];
+});
+
 const menuItems = computed(() => [
+  ...statusAction.value,
   {
     label: t('CAPTAIN.RESPONSES.OPTIONS.EDIT_RESPONSE'),
     value: 'edit',
@@ -107,6 +126,16 @@ const handleAssistantAction = ({ action, value }) => {
         <i class="i-woot-captain" />
         {{ assistant?.name || '' }}
       </span>
+      <div
+        v-if="status !== 'approved'"
+        class="shrink-0 text-sm text-n-slate-11 line-clamp-1 inline-flex items-center gap-1 ml-3"
+      >
+        <i
+          class="i-ph-stack text-base"
+          :title="t('CAPTAIN.RESPONSES.STATUS.TITLE')"
+        />
+        {{ t(`CAPTAIN.RESPONSES.STATUS.${status.toUpperCase()}`) }}
+      </div>
       <div
         class="shrink-0 text-sm text-n-slate-11 line-clamp-1 inline-flex items-center gap-1 ml-3"
       >

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

@@ -57,6 +57,7 @@ defineExpose({ dialogRef });
         :id="response.id"
         :key="response.id"
         :question="response.question"
+        :status="response.status"
         :answer="response.answer"
         :assistant="response.assistant"
         :created-at="response.created_at"