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>