Merge pull request #154 from weni-ai/feature/ai-and-reviews

[ENGAGE-1649] Feature/ai and reviews

.env.local.sample

@@ -1,2 +1 @@
-VITE_GPT_URL=""
-VITE_GPT_AUTH=""
+VITE_FIREBASE_CONFIG=""

__tests__/setup.js

@@ -1,6 +1,20 @@
 import { config } from '@vue/test-utils';
 import i18n from '@/utils/plugins/i18n.js';
 import UnnnicSystemPlugin from '@/utils/plugins/UnnnicSystem.js';
+import { vi } from 'vitest';
+
+vi.mock('firebase/app', () => ({
+  initializeApp: vi.fn(() => ({
+    name: 'mockApp',
+  })),
+}));
+
+vi.mock('firebase/firestore', () => ({
+  getFirestore: vi.fn(() => ({
+    collection: vi.fn(),
+    doc: vi.fn(),
+  })),
+}));
 
 config.global.plugins = [i18n, UnnnicSystemPlugin];
 config.global.mocks = {

docker-entrypoint.sh

@@ -1,10 +1,13 @@
 #!/bin/sh
+
+ESCAPED_FIREBASE_CONFIG=$(echo "${VITE_FIREBASE_CONFIG}" | sed 's/\//\\\//g')
+
 export JSON_STRING='window.configs = { \
-  "VITE_GPT_URL":"'${VITE_GPT_URL}'", \
-  "VITE_GPT_AUTH":"'${VITE_GPT_AUTH}'", \
-  "VITE_INSIGHTS_API_URL":"'${VITE_INSIGHTS_API_URL}'", \
-  "VITE_HOTJAR_ID":"'${VITE_HOTJAR_ID}'", \
+  "VITE_INSIGHTS_API_URL": "'${VITE_INSIGHTS_API_URL}'", \
+  "VITE_FIREBASE_CONFIG": '${ESCAPED_FIREBASE_CONFIG}', \
+  "VITE_HOTJAR_ID": "'${VITE_HOTJAR_ID}'" \
 }'
+
 sed "s|//CONFIGURATIONS_PLACEHOLDER|${JSON_STRING}|" /usr/share/nginx/html/insights/index.html.tmpl > /tmp/index.html
 
 exec "$@"

docker/Dockerfile

@@ -7,12 +7,9 @@ FROM node:${NODE_VERSION}-${BASE_VERSION} as builder
 
 WORKDIR /app
 
-ARG VITE_GPT_URL
-ARG VITE_GPT_AUTH
-ARG VITE_HOTJAR_ID
+ARG VITE_FIREBASE_CONFIG
 
-ENV VITE_GPT_URL $VITE_GPT_URL
-ENV VITE_GPT_AUTH $VITE_GPT_AUTH
+ENV VITE_FIREBASE_CONFIG $VITE_FIREBASE_CONFIG
 ENV VITE_HOTJAR_ID $VITE_HOTJAR_ID
 
 RUN apk --no-cache add git

package.json

@@ -20,7 +20,11 @@
     "axios": "^1.7.2",
     "chart.js": "^4.4.2",
     "chartjs-plugin-datalabels": "^2.2.0",
+    "dompurify": "^3.1.7",
     "emoji-mart": "^5.6.0",
+    "firebase": "^10.13.1",
+    "marked": "^14.1.2",
+    "mitt": "^3.0.1",
     "moment": "^2.30.1",
     "vue": "^3.3.11",
     "vue-i18n": "9",
@@ -56,4 +60,4 @@
   "resolutions": {
     "strip-ansi": "6.0.1"
   }
-}
+}

src/App.vue

@@ -104,6 +104,7 @@ export default {
       setProject: 'config/setProject',
       checkEnableCreateCustomDashboards:
         'config/checkEnableCreateCustomDashboards',
+      setEmail: 'user/setEmail',
     }),
 
     ...mapMutations({
@@ -141,6 +142,10 @@ export default {
 
       const sessionUserEmail = parseJwt(newToken)?.email || null;
 
+      if (sessionUserEmail) {
+        this.setEmail(sessionUserEmail);
+      }
+
       initHotjar(sessionUserEmail);
 
       await this.checkEnableCreateCustomDashboards();

src/components/Markdown.vue

@@ -0,0 +1,33 @@
+<template>
+  <section
+    class="content-section"
+    v-html="html"
+  />
+</template>
+
+<script>
+import DOMPurify from 'dompurify';
+import { marked } from 'marked';
+
+export default {
+  props: {
+    content: {
+      type: String,
+      default: '',
+    },
+  },
+
+  computed: {
+    html() {
+      return DOMPurify.sanitize(marked.parse(this.content));
+    },
+  },
+};
+</script>
+
+<style scoped>
+.content-section {
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+</style>

src/components/insights/Layout/Header.vue

@@ -17,10 +17,11 @@
         <InsightsLayoutHeaderFilters />
         <HeaderDashboardSettings />
         <!-- <UnnnicButton
-          class="clickable"
-          iconCenter="ios_share"
-          type="secondary"
+        class="clickable"
+        iconCenter="ios_share"
+        type="secondary"
         /> -->
+        <HeaderGenerateInsightButton />
       </section>
     </section>
   </header>
@@ -33,6 +34,7 @@ import HeaderSelectDashboard from './HeaderSelectDashboard/index.vue';
 import HeaderTagLive from './HeaderTagLive.vue';
 import InsightsLayoutHeaderFilters from './HeaderFilters/index.vue';
 import HeaderDashboardSettings from './HeaderDashboardSettings.vue';
+import HeaderGenerateInsightButton from './HeaderGenerateInsights/HeaderGenerateInsightButton.vue';
 
 import moment from 'moment';
 
@@ -43,8 +45,8 @@ export default {
     HeaderSelectDashboard,
     HeaderTagLive,
     InsightsLayoutHeaderFilters,
-
     HeaderDashboardSettings,
+    HeaderGenerateInsightButton,
   },
   computed: {
     ...mapState({

src/components/insights/Layout/HeaderGenerateInsights/HeaderGenerateInsightButton.vue

@@ -0,0 +1,78 @@
+<template>
+  <button
+    class="header-generate-insight-button"
+    :disabled="isDisableBtn"
+    @click="openModal"
+  >
+    <img src="@/assets/images/shine.svg" />
+    {{ $t('insights_header.generate_insight.title') }}
+
+    <HeaderGenerateInsightModal
+      :show="isGenerateInsightModalOpen"
+      @close="closeModal"
+    />
+  </button>
+</template>
+
+<script>
+import { mapState } from 'vuex';
+
+import HeaderGenerateInsightModal from './HeaderGenerateInsightModal.vue';
+
+export default {
+  name: 'HeaderGenerateInsightButton',
+
+  components: {
+    HeaderGenerateInsightModal,
+  },
+
+  data() {
+    return {
+      isGenerateInsightModalOpen: false,
+    };
+  },
+
+  computed: {
+    ...mapState({
+      token: (state) => state.config.token,
+    }),
+    isDisableBtn() {
+      return this.$store.state.widgets.isLoadingCurrentDashboardWidgets;
+    },
+  },
+
+  methods: {
+    openModal() {
+      this.isGenerateInsightModalOpen = true;
+    },
+    closeModal() {
+      this.isGenerateInsightModalOpen = false;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.header-generate-insight-button {
+  position: relative;
+
+  border: none;
+
+  display: flex;
+  gap: $unnnic-spacing-nano;
+  justify-content: center;
+  align-items: center;
+
+  padding: $unnnic-spacing-ant $unnnic-spacing-sm;
+
+  border-radius: $unnnic-border-radius-sm;
+  background: $unnnic-color-neutral-darkest;
+
+  color: $unnnic-color-weni-300;
+
+  font-family: $unnnic-font-family-secondary;
+  font-size: $unnnic-font-size-body-gt;
+
+  cursor: pointer;
+}
+</style>