feat: Add support for the references in FAQs (#10699)

Currently, it’s unclear whether an FAQ item is generated from a
document, derived from a conversation, or added manually.

This PR resolves the issue by providing visibility into the source of
each FAQ. Users can now see whether an FAQ was generated or manually
added and, if applicable, by whom.

- Move the document_id to a polymorphic relation (documentable).
- Updated the APIs to accommodate the change.
- Update the service to add corresponding references. 
- Updated the specs.

<img width="1007" alt="Screenshot 2025-01-15 at 11 27 56 PM"
src="https://github.com/user-attachments/assets/7d58f798-19c0-4407-b3e2-748a919d14af"
/>

---------

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>

app/javascript/dashboard/components-next/captain/PageLayout.vue

@@ -42,7 +42,7 @@ const handlePageChange = event => {
 
 <template>
   <section class="flex flex-col w-full h-full overflow-hidden bg-n-background">
-    <header class="sticky top-0 z-10 px-6 lg:px-0">
+    <header class="sticky top-0 z-10 px-6 xl:px-0">
       <div class="w-full max-w-[960px] mx-auto">
         <div
           class="flex items-start lg:items-center justify-between w-full py-6 lg:py-0 lg:h-20 gap-4 lg:gap-2 flex-col lg:flex-row"
@@ -67,7 +67,7 @@ const handlePageChange = event => {
         </div>
       </div>
     </header>
-    <main class="flex-1 px-6 overflow-y-auto lg:px-0">
+    <main class="flex-1 px-6 overflow-y-auto xl:px-0">
       <div class="w-full max-w-[960px] mx-auto py-4">
         <slot name="default" />
       </div>

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

@@ -29,6 +29,10 @@ const props = defineProps({
     type: String,
     default: 'approved',
   },
+  documentable: {
+    type: Object,
+    default: null,
+  },
   assistant: {
     type: Object,
     default: () => ({}),
@@ -43,7 +47,7 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(['action']);
+const emit = defineEmits(['action', 'navigate']);
 
 const { t } = useI18n();
 
@@ -87,6 +91,13 @@ const handleAssistantAction = ({ action, value }) => {
   toggleDropdown(false);
   emit('action', { action, value, id: props.id });
 };
+
+const handleDocumentableClick = () => {
+  emit('navigate', {
+    id: props.documentable.id,
+    type: props.documentable.type,
+  });
+};
 </script>
 
 <template>
@@ -119,22 +130,66 @@ const handleAssistantAction = ({ action, value }) => {
     <span class="text-n-slate-11 text-sm line-clamp-5">
       {{ answer }}
     </span>
-    <span v-if="!compact">
-      <span
-        class="text-sm shrink-0 truncate text-n-slate-11 inline-flex items-center gap-1"
-      >
-        <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 v-if="!compact" class="items-center justify-between hidden lg:flex">
+      <div class="inline-flex items-center">
+        <span
+          class="text-sm shrink-0 truncate text-n-slate-11 inline-flex items-center gap-1"
+        >
+          <i class="i-woot-captain" />
+          {{ assistant?.name || '' }}
+        </span>
+        <div
+          v-if="documentable"
+          class="shrink-0 text-sm text-n-slate-11 inline-flex line-clamp-1 gap-1 ml-3"
+        >
+          <span
+            v-if="documentable.type === 'Captain::Document'"
+            class="inline-flex items-center gap-1 truncate over"
+          >
+            <i class="i-ph-chat-circle-dots text-base" />
+            <span class="max-w-96 truncate" :title="documentable.name">
+              {{ documentable.name }}
+            </span>
+          </span>
+          <span
+            v-if="documentable.type === 'User'"
+            class="inline-flex items-center gap-1"
+          >
+            <i class="i-ph-user-circle-plus text-base" />
+            <span
+              class="max-w-96 truncate"
+              :title="documentable.available_name"
+            >
+              {{ documentable.available_name }}
+            </span>
+          </span>
+          <span
+            v-else-if="documentable.type === 'Conversation'"
+            class="inline-flex items-center gap-1 group cursor-pointer"
+            role="button"
+            @click="handleDocumentableClick"
+          >
+            <i class="i-ph-chat-circle-dots text-base" />
+            <span class="group-hover:underline">
+              {{
+                t(`CAPTAIN.RESPONSES.DOCUMENTABLE.CONVERSATION`, {
+                  id: documentable.display_id,
+                })
+              }}
+            </span>
+          </span>
+          <span v-else />
+        </div>
+        <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>
       <div
         class="shrink-0 text-sm text-n-slate-11 line-clamp-1 inline-flex items-center gap-1 ml-3"
@@ -142,6 +197,6 @@ const handleAssistantAction = ({ action, value }) => {
         <i class="i-ph-calendar-dot" />
         {{ timestamp }}
       </div>
-    </span>
+    </div>
   </CardLayout>
 </template>

app/javascript/dashboard/i18n/locale/en/integrations.json

@@ -409,8 +409,11 @@
       }
     },
     "RESPONSES": {
-      "HEADER": "Generated FAQs",
+      "HEADER": "FAQs",
       "ADD_NEW": "Create new FAQ",
+      "DOCUMENTABLE" : {
+        "CONVERSATION": "Conversation #{id}"
+      },
       "DELETE": {
         "TITLE": "Are you sure to delete the FAQ?",
         "DESCRIPTION": "",

app/javascript/dashboard/routes/dashboard/captain/responses/Index.vue

@@ -4,9 +4,10 @@ import { useMapGetter, useStore } from 'dashboard/composables/store';
 import { useAlert } from 'dashboard/composables';
 import { useI18n } from 'vue-i18n';
 import { OnClickOutside } from '@vueuse/components';
+import { useRouter } from 'vue-router';
+
 import Button from 'dashboard/components-next/button/Button.vue';
 import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
-
 import DeleteDialog from 'dashboard/components-next/captain/pageComponents/DeleteDialog.vue';
 import PageLayout from 'dashboard/components-next/captain/PageLayout.vue';
 import AssistantSelector from 'dashboard/components-next/captain/pageComponents/AssistantSelector.vue';
@@ -15,6 +16,7 @@ import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
 import CreateResponseDialog from 'dashboard/components-next/captain/pageComponents/response/CreateResponseDialog.vue';
 import ResponsePageEmptyState from 'dashboard/components-next/captain/pageComponents/emptyStates/ResponsePageEmptyState.vue';
 
+const router = useRouter();
 const store = useStore();
 const uiFlags = useMapGetter('captainResponses/getUIFlags');
 const assistants = useMapGetter('captainAssistants/getRecords');
@@ -100,6 +102,15 @@ const handleAction = ({ action, id }) => {
   });
 };
 
+const handleNavigationAction = ({ id, type }) => {
+  if (type === 'Conversation') {
+    router.push({
+      name: 'inbox_conversation',
+      params: { conversation_id: id },
+    });
+  }
+};
+
 const handleCreateClose = () => {
   dialogType.value = '';
   selectedResponse.value = null;
@@ -184,10 +195,12 @@ onMounted(() => {
         :question="response.question"
         :answer="response.answer"
         :assistant="response.assistant"
+        :documentable="response.documentable"
         :status="response.status"
         :created-at="response.created_at"
         :updated-at="response.updated_at"
         @action="handleAction"
+        @navigate="handleNavigationAction"
       />
     </div>