feat(data_collection): adds data collection info to calls (#77)

* feat(data_collection): adds data collection info to calls

* make init calls in parallel

Author: sandragjacinto

src/App.vue

@@ -16,11 +16,18 @@ const { getSourcesList, getInfoPerCorpus } = useSourcesStore();
 const userStore = useUserStore();
 const screenWidth = computed(() => window.innerWidth);
 const fetchError = ref(false);
+
+async function initCalls() {
+  await Promise.all([
+    getInfoPerCorpus(),
+    getSourcesList(),
+    userStore.setUserIdAndSessionId(getQueryParamValue('referer') || '')
+  ]);
+}
+
 onMounted(async () => {
   try {
-    await getInfoPerCorpus();
-    await userStore.setUserIdAndSessionId(getQueryParamValue('referer'));
-    await getSourcesList();
+    await initCalls();
   } catch (error) {
     fetchError.value = true;
   }

src/components/CardComponent.vue

@@ -24,6 +24,8 @@ const props = defineProps<{
   isBookmarked: boolean;
   hasFullDescription?: boolean;
   slice?: string;
+  id?: string;
+  docMetrics?: (docId?: string | undefined) => Promise<void>;
 }>();
 
 const toggleShowMoreAuthors = () => {
@@ -49,7 +51,7 @@ const corpusDetails = computed(() => props.details.journal || props.details.publ
         <p class="doc-number">{{ number }}</p>
       </div>
       <p class="card-header-title">
-        <a target="_blank" :href="url">
+        <a target="_blank" :href="url" @click.stop @click="docMetrics && docMetrics(id)">
           {{ title }}
         </a>
       </p>

src/components/CardSimpleComponent.vue

@@ -12,13 +12,15 @@ defineProps<{
   title: string;
   corpus: string;
   url: string;
+  id?: string;
   sdg: number[];
   details: DocumentDetails;
   hideRefIndicator?: boolean;
   shouldDisplayScore?: boolean;
   score?: number;
   toggleBookmark?: () => void;
   isBookmarked?: boolean;
+  docMetrics?: (docId?: string | undefined) => Promise<void>;
 }>();
 
 const isModalActive = ref(false);
@@ -78,7 +80,13 @@ const handleModalOpen = () => {
             :isBookmarked="!!isBookmarked"
             :toggleBookmark="toggleBookmark"
           />
-          <a class="icon-wrapper" target="_blank" :href="url" @click.stop>
+          <a
+            class="icon-wrapper"
+            target="_blank"
+            :href="url"
+            @click.stop
+            @click="docMetrics && docMetrics(id)"
+          >
             <OpenUrlIcon class="icon is-small" />
             <TooltipComponent class="tltip" :tooltipText="$t('cardArticle.openArticle')" isLeft />
           </a>

src/components/NavComponent.vue

@@ -10,10 +10,13 @@ import i18n from '@/localisation/i18n';
 import BookIcon from '@/components/icons/BookIcon.vue';
 import NavBookmarkIcon from '@/components/icons/NavBookmarkIcon.vue';
 import { useFeatureFlipStore } from '@/stores/featureFlip';
+import { useMetricsStore } from '@/stores/metrics';
 
 const featureFlip = useFeatureFlipStore();
+const metricStore = useMetricsStore();
 const isFeatureEnabled = featureFlip.isFeatureEnabled('tutor');
 const isFeatureEnabledMicrolearning = featureFlip.isFeatureEnabled('microlearning');
+const isWorkshopFeatureEnabled = featureFlip.isWorkshopFeatureEnabled();
 
 const isNavOpened = ref<boolean>(false);
 
@@ -120,6 +123,17 @@ const handle_nav_bookmarks = () => {
           }}</span>
         </router-link>
       </div>
+      <a
+        class="mx-0 px-0"
+        v-if="isWorkshopFeatureEnabled"
+        target="_blank"
+        :href="metricStore.getWorkshopFormUrl"
+      >
+        <span class="item-name router-link-form has-text-success mx-1 px-1 pr-4 is-size-6">{{
+          $t('nav.workshopForm')
+        }}</span>
+      </a>
+
       <div class="nav-langs" :class="isNavOpened && 'open'">
         <a
           class="nav-lang"
@@ -228,10 +242,27 @@ const handle_nav_bookmarks = () => {
   display: flex;
   align-items: center;
   justify-content: flex-start;
-  gap: 0.5rem;
+  gap: 0.2rem;
   cursor: pointer;
   padding: 0.75rem 1rem;
   width: calc(100% - 2rem);
+  flex-wrap: nowrap;
+  white-space: nowrap;
+}
+
+.router-link-form {
+  all: unset;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 0.2rem;
+  cursor: pointer;
+  width: calc(100% - 2rem);
+  flex-wrap: nowrap;
+  white-space: nowrap;
+  &:hover {
+    background-color: var(--neutral-15);
+  }
 }
 
 .router-link-active {
@@ -244,6 +275,7 @@ const handle_nav_bookmarks = () => {
   white-space: nowrap;
   opacity: 0;
   transition: opacity 0.5s ease-in-out;
+  flex-wrap: nowrap;
 }
 
 .item-name.visible-name {
@@ -256,7 +288,7 @@ const handle_nav_bookmarks = () => {
 @media screen and (min-width: 992px) {
   .nav {
     flex-grow: 1;
-    gap: 0.75rem;
+    gap: 0.2rem;
     padding: 0rem;
     display: flex;
     flex-direction: row;
@@ -291,6 +323,8 @@ const handle_nav_bookmarks = () => {
     visibility: visible;
     opacity: 1;
     width: auto;
+    white-space: nowrap;
+    flex-wrap: nowrap;
   }
 
   .link-wrapper {

src/components/SourcesListComponent.vue

@@ -4,11 +4,13 @@ import Card from '@/components/CardComponent.vue';
 import SimpleCard from '@/components/CardSimpleComponent.vue';
 import ToasterComponentVue from '@/components/ToasterComponent.vue';
 import { useSourcesStore } from '@/stores/sources';
+import { useMetricsStore } from '@/stores/metrics';
 import { useBookmarksStore } from '@/stores/bookmarks';
 import ModalWrapper from '@/components/ModalWrapper.vue';
 import i18n from '@/localisation/i18n';
 
 const sourcesStore = useSourcesStore();
+const metricsStore = useMetricsStore();
 const store = useBookmarksStore();
 
 const props = defineProps<{
@@ -70,6 +72,8 @@ const ChosenCard = Cards[props.cardType || 'default'];
         :toggleBookmark="() => store.toggleBookmark(doc)"
         :isBookmarked="store.isBookmarked(doc.payload.document_id)"
         :slice="doc.payload.slice_content"
+        :id="doc.payload.document_id"
+        :docMetrics="metricsStore.recordClickedDocumentFromchat"
       >
         <template #modal="scope">
           <ModalWrapper :key="`modal-${doc.id}`" :isOpen="scope.isOpen" :onClose="scope.onClose">

src/localisation/en.ts

@@ -231,7 +231,8 @@ export const en = {
     syllabus: 'Create a syllabus',
     about: 'About',
     help: 'Help',
-    microlearning: 'Micro-learning'
+    microlearning: 'Micro-learning',
+    workshopForm: 'Workshop Form'
   },
 
   next: 'Next',

src/localisation/fr.ts

@@ -234,7 +234,8 @@ export const fr = {
     syllabus: 'Créer un syllabus',
     about: 'À propos',
     help: 'Aide',
-    microlearning: 'Micro-learning'
+    microlearning: 'Micro-learning',
+    workshopForm: "Formulaire d'atelier"
   },
 
   next: 'Suivant',

src/stores/chat.ts

@@ -31,6 +31,8 @@ export const useChatStore = defineStore('chat', () => {
   const sourcesList: Ref<Document[] | null> = ref(getFromStorage('chatSources') || []);
   const reformulatedQuery: Ref<string | null> = ref(getFromStorage('reformulatedQuery'));
   const queryToSearch: Ref<string | null> = ref(null);
+  const storedConversationId: Ref<string | null> = ref(localStorage.getItem('chatConversationId'));
+  const storedMessageId: Ref<string | null> = ref(localStorage.getItem('chatMessageId'));
 
   const isChatEmpty: ComputedRef<Boolean> = computed(() => chatMessagesList.value.length === 0);
   const chatStatus: Ref<CHAT_STATUSES_TYPE> = ref(
@@ -208,9 +210,25 @@ export const useChatStore = defineStore('chat', () => {
     }
   }
 
+  function storeConversationId(conversationId: string) {
+    if (conversationId !== storedConversationId.value) {
+      localStorage.setItem('chatConversationId', conversationId);
+      storedConversationId.value = conversationId;
+    }
+  }
+
+  function storeMessageId(messageId: string) {
+    if (messageId !== storedMessageId.value) {
+      console.log('Storing message ID:', messageId);
+      localStorage.setItem('chatMessageId', messageId);
+      storedMessageId.value = messageId;
+    }
+  }
+
   async function getNoStreamAnswer(userMsg: string) {
     chatStatus.value = CHAT_STATUS.FORMULATING_ANSWER;
     const bodyContent = {
+      conversation_id: storedConversationId.value,
       sources: sourcesList.value || [],
       history: getMessageHistory.value,
       query: userMsg,
@@ -221,8 +239,10 @@ export const useChatStore = defineStore('chat', () => {
 
     chatStatus.value = CHAT_STATUS.FORMULATED_ANSWER;
 
-    chatMessagesList.value.push({ role: 'assistant', content: respBody.data });
+    chatMessagesList.value.push({ role: 'assistant', content: respBody.data.answer });
     saveToStorage('chat', chatMessagesList.value);
+    storeConversationId(respBody.data.conversation_id);
+    storeMessageId(respBody.data.message_id);
 
     const newQuestions: AxiosResponse<{ NEW_QUESTIONS: string[] }> = await postAxios(
       '/qna/reformulate/questions',
@@ -322,11 +342,15 @@ export const useChatStore = defineStore('chat', () => {
     reformulatedQuery.value = null;
     shouldFetchNewDocuments.value = true;
     storedSubject.value = undefined;
+    storedConversationId.value = null;
+    storedMessageId.value = null;
     clearFromStorage('chat');
     clearFromStorage('chatSources');
     clearFromStorage('questionQueues');
     clearFromStorage('reformulatedQuery');
     clearFromStorage('chatSubject');
+    clearFromStorage('chatConversationId');
+    clearFromStorage('chatMessageId');
   }
 
   return {

src/stores/featureFlip.ts

@@ -13,8 +13,14 @@ export const useFeatureFlipStore = defineStore('featureFlip', () => {
     return featureFlip[feature] || false;
   };
 
+  const isWorkshopFeatureEnabled = () => {
+    // it should be active if url includes 'workshop'
+    return isDevEnvironment || window.location.href.includes('workshop');
+  };
+
   return {
     featureFlip,
-    isFeatureEnabled
+    isFeatureEnabled,
+    isWorkshopFeatureEnabled
   };
 });

src/stores/metrics.ts

@@ -0,0 +1,44 @@
+import { updateClickedDocument } from '@/utils/metrics';
+import { isInPage } from '@/utils/urlsUtils';
+import { defineStore } from 'pinia';
+import { ref, computed } from 'vue';
+
+export const useMetricsStore = defineStore('metrics', () => {
+  const userId = ref<string | null>(localStorage.getItem('userId'));
+
+  const getUserId = computed(() => userId.value);
+  const getWorkshopFormUrl = computed(() => {
+    return `https://docs.google.com/forms/d/e/1FAIpQLSeUf3GQXt3LsZD24Z3fGkwUE-qhAXF2jkem9zbPnAbnOrReDQ/viewform?usp=pp_url&entry.736499817=${userId.value}`;
+  });
+
+  const getCampaignStatus = async () => {
+    // Logic to get campaign status
+    return await true;
+  };
+
+  const recordClickedDocumentFromchat = async (docId: string) => {
+    // check if in campaign
+    if (await !getCampaignStatus()) {
+      return;
+    }
+
+    if (!isInPage('q-and-a')) {
+      return;
+    }
+    // get message id from storage
+    const messageId = localStorage.getItem('chatMessageId');
+
+    if (!messageId || !docId) {
+      return;
+    }
+
+    // Logic to add clicked document
+    await updateClickedDocument(docId, messageId);
+  };
+
+  return {
+    getUserId,
+    recordClickedDocumentFromchat,
+    getWorkshopFormUrl
+  };
+});