From 64506c1dba53b6ca353c532e8ff2802416b59e45 Mon Sep 17 00:00:00 2001
From: Aldemylla <aldemylla@gmail.com>
Date: Tue, 26 Mar 2024 15:50:37 -0300
Subject: [PATCH 01/12] fix: Dockerfile, docker-entrypoint and log of env
 variables

---
 docker-entrypoint.sh              |  2 +-
 docker/Dockerfile                 | 30 ++++++++++++------------------
 src/services/api/resources/GPT.js |  2 ++
 3 files changed, 15 insertions(+), 19 deletions(-)

diff --git a/docker-entrypoint.sh b/docker-entrypoint.sh
index cbe8e51f..8fb881a5 100755
--- a/docker-entrypoint.sh
+++ b/docker-entrypoint.sh
@@ -3,6 +3,6 @@ export JSON_STRING='window.configs = { \
   "VITE_GPT_URL":"'${VITE_GPT_URL}'", \
   "VITE_GPT_AUTH":"'${VITE_GPT_AUTH}'", \
 }'
-sed "s|//CONFIGURATIONS_PLACEHOLDER|${JSON_STRING}|" /usr/share/nginx/html/insights/index.html.tmpl > /tmp/index.html
+sed -i "s|//CONFIGURATIONS_PLACEHOLDER|${JSON_STRING}|" /usr/share/nginx/html/index.html
 
 exec "$@"
\ No newline at end of file
diff --git a/docker/Dockerfile b/docker/Dockerfile
index 982eaca2..f3b78aba 100644
--- a/docker/Dockerfile
+++ b/docker/Dockerfile
@@ -5,7 +5,7 @@ ARG BASE_VERSION="alpine3.17"
 
 FROM node:${NODE_VERSION}-${BASE_VERSION} as builder
 
-WORKDIR /app
+WORKDIR /home/app
 
 ARG VITE_GPT_URL
 ARG VITE_GPT_AUTH
@@ -13,26 +13,20 @@ ARG VITE_GPT_AUTH
 ENV VITE_GPT_URL $VITE_GPT_URL
 ENV VITE_GPT_AUTH $VITE_GPT_AUTH
 
-RUN apk --no-cache add git
-
-COPY package.json yarn.lock ./
-
-RUN --mount=type=cache,target=/root/.yarn \
-    YARN_CACHE_FOLDER=/root/.yarn yarn install
-
-COPY . ./
-
+COPY package.json .
+COPY yarn.lock .
+RUN yarn install
+COPY . .
 RUN yarn build
 
-FROM nginxinc/nginx-unprivileged:1.25-alpine
+FROM nginx
+
+COPY --from=builder /home/app/dist /usr/share/nginx/html
 
-COPY --chown=nginx:nginx docker/nginx/nginx.conf /etc/nginx/nginx.conf
-COPY --from=builder --chown=nginx:nginx /app/dist /usr/share/nginx/html/insights/
-COPY docker-entrypoint.sh /
-RUN mv /usr/share/nginx/html/insights/index.html /usr/share/nginx/html/insights/index.html.tmpl \
-    && cd /usr/share/nginx/html/insights/ \
-    && ln -s /tmp/index.html
+COPY ./docker/nginx/nginx.conf /etc/nginx
+COPY docker-entrypoint.sh /usr/share/nginx/
+RUN chmod +x /usr/share/nginx/docker-entrypoint.sh
 
 EXPOSE 8080
-ENTRYPOINT ["/docker-entrypoint.sh"]
+ENTRYPOINT [ "/usr/share/nginx/docker-entrypoint.sh" ]
 CMD ["nginx", "-g", "daemon off;"]
\ No newline at end of file
diff --git a/src/services/api/resources/GPT.js b/src/services/api/resources/GPT.js
index b5bf3aca..244c44ba 100644
--- a/src/services/api/resources/GPT.js
+++ b/src/services/api/resources/GPT.js
@@ -9,6 +9,8 @@ const http = axios.create({
 
 export default {
   async getInsights(prompt) {
+    console.log('VITE_GPT_AUTH:', env('VITE_GPT_AUTH'));
+    console.log('VITE_GPT_URL:', env('VITE_GPT_URL'));
     const response = await http.post(env('VITE_GPT_URL'), {
       input: {
         prompt: `<s>[INST] ${prompt} [/INST]`,

From ca6f0ac1a720fd31650de3c3262c048029da1a3c Mon Sep 17 00:00:00 2001
From: aldemylla <aldemylla@gmail.com>
Date: Wed, 27 Mar 2024 09:11:52 -0300
Subject: [PATCH 02/12] Revert "fix: Dockerfile, docker-entrypoint and log of
 env variables"

This reverts commit 64506c1dba53b6ca353c532e8ff2802416b59e45.
---
 docker-entrypoint.sh              |  2 +-
 docker/Dockerfile                 | 30 ++++++++++++++++++------------
 src/services/api/resources/GPT.js |  2 --
 3 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/docker-entrypoint.sh b/docker-entrypoint.sh
index 8fb881a5..cbe8e51f 100755
--- a/docker-entrypoint.sh
+++ b/docker-entrypoint.sh
@@ -3,6 +3,6 @@ export JSON_STRING='window.configs = { \
   "VITE_GPT_URL":"'${VITE_GPT_URL}'", \
   "VITE_GPT_AUTH":"'${VITE_GPT_AUTH}'", \
 }'
-sed -i "s|//CONFIGURATIONS_PLACEHOLDER|${JSON_STRING}|" /usr/share/nginx/html/index.html
+sed "s|//CONFIGURATIONS_PLACEHOLDER|${JSON_STRING}|" /usr/share/nginx/html/insights/index.html.tmpl > /tmp/index.html
 
 exec "$@"
\ No newline at end of file
diff --git a/docker/Dockerfile b/docker/Dockerfile
index f3b78aba..982eaca2 100644
--- a/docker/Dockerfile
+++ b/docker/Dockerfile
@@ -5,7 +5,7 @@ ARG BASE_VERSION="alpine3.17"
 
 FROM node:${NODE_VERSION}-${BASE_VERSION} as builder
 
-WORKDIR /home/app
+WORKDIR /app
 
 ARG VITE_GPT_URL
 ARG VITE_GPT_AUTH
@@ -13,20 +13,26 @@ ARG VITE_GPT_AUTH
 ENV VITE_GPT_URL $VITE_GPT_URL
 ENV VITE_GPT_AUTH $VITE_GPT_AUTH
 
-COPY package.json .
-COPY yarn.lock .
-RUN yarn install
-COPY . .
-RUN yarn build
+RUN apk --no-cache add git
+
+COPY package.json yarn.lock ./
+
+RUN --mount=type=cache,target=/root/.yarn \
+    YARN_CACHE_FOLDER=/root/.yarn yarn install
 
-FROM nginx
+COPY . ./
+
+RUN yarn build
 
-COPY --from=builder /home/app/dist /usr/share/nginx/html
+FROM nginxinc/nginx-unprivileged:1.25-alpine
 
-COPY ./docker/nginx/nginx.conf /etc/nginx
-COPY docker-entrypoint.sh /usr/share/nginx/
-RUN chmod +x /usr/share/nginx/docker-entrypoint.sh
+COPY --chown=nginx:nginx docker/nginx/nginx.conf /etc/nginx/nginx.conf
+COPY --from=builder --chown=nginx:nginx /app/dist /usr/share/nginx/html/insights/
+COPY docker-entrypoint.sh /
+RUN mv /usr/share/nginx/html/insights/index.html /usr/share/nginx/html/insights/index.html.tmpl \
+    && cd /usr/share/nginx/html/insights/ \
+    && ln -s /tmp/index.html
 
 EXPOSE 8080
-ENTRYPOINT [ "/usr/share/nginx/docker-entrypoint.sh" ]
+ENTRYPOINT ["/docker-entrypoint.sh"]
 CMD ["nginx", "-g", "daemon off;"]
\ No newline at end of file
diff --git a/src/services/api/resources/GPT.js b/src/services/api/resources/GPT.js
index 244c44ba..b5bf3aca 100644
--- a/src/services/api/resources/GPT.js
+++ b/src/services/api/resources/GPT.js
@@ -9,8 +9,6 @@ const http = axios.create({
 
 export default {
   async getInsights(prompt) {
-    console.log('VITE_GPT_AUTH:', env('VITE_GPT_AUTH'));
-    console.log('VITE_GPT_URL:', env('VITE_GPT_URL'));
     const response = await http.post(env('VITE_GPT_URL'), {
       input: {
         prompt: `<s>[INST] ${prompt} [/INST]`,

From 08e256f8c4d94be51c4c37a9a6e390150a1d0f3e Mon Sep 17 00:00:00 2001
From: aldemylla <aldemylla@gmail.com>
Date: Tue, 2 Apr 2024 13:12:49 -0300
Subject: [PATCH 03/12] feat: Remade ResizableBar resize behavior

---
 src/components/ResizableBarNext.vue  | 149 +++++++++++++++++++++++++++
 src/layouts/InsightsLayout/index.vue |   2 +-
 2 files changed, 150 insertions(+), 1 deletion(-)
 create mode 100644 src/components/ResizableBarNext.vue

diff --git a/src/components/ResizableBarNext.vue b/src/components/ResizableBarNext.vue
new file mode 100644
index 00000000..96677dc2
--- /dev/null
+++ b/src/components/ResizableBarNext.vue
@@ -0,0 +1,149 @@
+<template>
+  <aside class="resizable-bar">
+    <section class="resizable-bar__gradient" />
+    <section
+      class="resizable-bar__handler"
+      @mousedown="startResizing"
+      @mousemove="handleResizing"
+      @mouseup="stopResizing"
+    >
+      <hr class="handler__separator" />
+      <button
+        class="handler__button"
+        @click.stop="handleResizeClick"
+      >
+        <UnnnicIcon
+          :icon="handlerIcon"
+          size="lg"
+          scheme="neutral-clean"
+        />
+      </button>
+      <hr class="handler__separator" />
+    </section>
+    <section
+      class="resizable-bar__content"
+      :style="{
+        height: `${contentHeight}vh`,
+        transition: resizeTransition,
+      }"
+    ></section>
+  </aside>
+</template>
+
+<script>
+export default {
+  name: 'ResizableBar',
+
+  data() {
+    return {
+      startY: 0,
+      maxContentHeight: 60,
+      contentHeight: 24,
+      isResizing: false,
+      resizeTransition: 'none',
+    };
+  },
+
+  computed: {
+    handlerIcon() {
+      return this.contentHeight === this.maxContentHeight
+        ? 'expand_circle_down'
+        : 'expand_circle_up';
+    },
+  },
+
+  methods: {
+    handleResizeClick() {
+      this.resizeTransition = 'height ease-in-out 0.3s';
+      if (
+        (this.contentHeight > 0 &&
+          this.contentHeight !== this.maxContentHeight) ||
+        this.contentHeight === 0
+      ) {
+        this.contentHeight = this.maxContentHeight;
+      } else {
+        this.contentHeight = 0;
+      }
+    },
+
+    startResizing(event) {
+      this.isResizing = true;
+      this.startY = event.clientY;
+      this.resizeTransition = 'none';
+    },
+
+    handleResizing(event) {
+      if (this.isResizing) {
+        const relativeVHFromClick = (event.clientY * 100) / window.innerHeight;
+        const remainingRelativeVHFromClick = 100 - relativeVHFromClick;
+        const adjustedcontentHeight = Math.min(
+          remainingRelativeVHFromClick,
+          this.maxContentHeight,
+        );
+
+        this.contentHeight = adjustedcontentHeight;
+      }
+    },
+
+    stopResizing() {
+      this.isResizing = false;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+$insightsLayoutPadding: ($unnnic-spacing-sm * 2);
+
+.resizable-bar {
+  position: absolute;
+  bottom: 0;
+
+  width: calc(100% - $insightsLayoutPadding);
+
+  &__gradient {
+    width: 100%;
+    height: 8vh;
+
+    background: linear-gradient(
+      180deg,
+      #ffffff00 2%,
+      $unnnic-color-background-white 98%
+    );
+  }
+
+  &__handler {
+    display: flex;
+    align-items: center;
+
+    width: 100%;
+
+    background: $unnnic-color-background-white;
+
+    .handler__separator {
+      width: 100%;
+
+      border: $unnnic-border-width-thinner solid $unnnic-color-neutral-clean;
+      border-radius: $unnnic-border-radius-pill;
+
+      cursor: ns-resize;
+    }
+
+    .handler__button {
+      margin: 0 $unnnic-spacing-xs;
+
+      display: flex;
+
+      background-color: transparent;
+      border: none;
+
+      user-select: none;
+      cursor: pointer;
+    }
+  }
+
+  &__content {
+    background-color: $unnnic-color-background-white;
+  }
+}
+</style>
diff --git a/src/layouts/InsightsLayout/index.vue b/src/layouts/InsightsLayout/index.vue
index ec35d1ae..ad5d2ad5 100644
--- a/src/layouts/InsightsLayout/index.vue
+++ b/src/layouts/InsightsLayout/index.vue
@@ -13,7 +13,7 @@
 </template>
 
 <script>
-import ResizableBar from '@/components/ResizableBar.vue';
+import ResizableBar from '@/components/ResizableBarNext.vue';
 import ConnectSidebar from '@/components/connect/ConnectSidebar.vue';
 import ConnectTopbar from '@/components/connect/ConnectTopbar.vue';
 

From b15fa2e121e26df97e160d1bd6c6a0b5c491713c Mon Sep 17 00:00:00 2001
From: aldemylla <aldemylla@gmail.com>
Date: Tue, 2 Apr 2024 15:15:33 -0300
Subject: [PATCH 04/12] feat: Added content at ResizableBar remaded

---
 src/components/InsightsInput.vue              |   5 +-
 src/components/ResizableBar.vue               | 443 ------------------
 .../ResizableBar/ResizableBarCards.vue        | 224 +++++++++
 .../ResizableBar/index.vue}                   |  25 +-
 src/layouts/InsightsLayout/index.vue          |   2 +-
 5 files changed, 250 insertions(+), 449 deletions(-)
 delete mode 100644 src/components/ResizableBar.vue
 create mode 100644 src/components/insights/ResizableBar/ResizableBarCards.vue
 rename src/components/{ResizableBarNext.vue => insights/ResizableBar/index.vue} (85%)

diff --git a/src/components/InsightsInput.vue b/src/components/InsightsInput.vue
index ddd2d5b6..07d97453 100644
--- a/src/components/InsightsInput.vue
+++ b/src/components/InsightsInput.vue
@@ -47,10 +47,6 @@ export default {
 
 <style lang="scss" scoped>
 .insights-input {
-  width: 100%;
-
-  margin-top: auto;
-
   border-radius: $unnnic-spacing-nano;
 
   padding: $unnnic-spacing-xs;
@@ -68,6 +64,7 @@ export default {
     background: transparent;
 
     width: 100%;
+    height: 100%;
 
     color: $unnnic-color-neutral-cloudy;
   }
diff --git a/src/components/ResizableBar.vue b/src/components/ResizableBar.vue
deleted file mode 100644
index af456139..00000000
--- a/src/components/ResizableBar.vue
+++ /dev/null
@@ -1,443 +0,0 @@
-<template>
-  <aside
-    class="resizable-bar"
-    :class="{ 'resizable-bar--position': isRelative }"
-    :style="{
-      bottom: sidebarBottom + 'px',
-      height: `${Math.min(sidebarHeight, maxHeight)}px`,
-    }"
-  >
-    <header
-      class="resizable-bar__header"
-      @mousedown="startResizing"
-    >
-      <hr
-        :class="{ 'green-color': isResizing }"
-        class="resizable-bar__separator"
-      />
-      <button
-        @click="resizeBar"
-        class="resizable-bar__circle-up"
-        v-if="sidebarBottom"
-      >
-        <UnnnicIcon
-          icon="expand_circle_up"
-          size="md"
-          scheme="neutral-clean"
-          clickable
-        />
-      </button>
-      <button
-        @click="resizeBar"
-        class="resizable-bar__circle-up"
-        v-if="sidebarBottom > 100"
-      >
-        <UnnnicIcon
-          icon="expand_circle_down"
-          size="md"
-          scheme="neutral-clean"
-          clickable
-        />
-      </button>
-      <hr
-        :class="{ 'green-color': isResizing }"
-        class="resizable-bar__separator"
-      />
-    </header>
-    <section class="resizable-bar__content">
-      <div
-        v-if="visibleInsights"
-        class="resizable-bar__insights"
-      >
-        <header class="resizable-bar__insights-header">
-          <p
-            class="resizable-bar__insights-description unnnic-font body-md bold"
-          >
-            InsightsGPT:
-          </p>
-          <h2 class="resizable-bar__insights-title unnnic-font title-sm bold">
-            Aqui estão algumas sugestões para você:
-          </h2>
-        </header>
-        <div class="resizable-bar__insights-content">
-          <nav class="resizable-bar__insights-nav">
-            <ul class="resizable-bar__insights-list">
-              <li class="list-item">Recentes</li>
-              <li class="list-item">Segmentos</li>
-              <li class="list-item">Varejo</li>
-              <li class="list-item">Weni plataforma</li>
-              <li class="list-item selected">Atendimento humano</li>
-            </ul>
-          </nav>
-          <div class="resizable-bar__insights-cards">
-            <SugestionCard>
-              <template v-slot:title
-                >Análise de Desempenho do Atendente</template
-              >
-              <template v-slot:description>Nos últimos 30 dias</template>
-            </SugestionCard>
-            <SugestionCard>
-              <template v-slot:title>Satisfação do Cliente</template>
-              <template v-slot:description
-                >Combine os dados de atendimento com feedbacks de satisfação do
-                cliente para avaliar a eficácia dos diferentes setores e
-                atendentes.</template
-              >
-            </SugestionCard>
-            <SugestionCard>
-              <template v-slot:title
-                >Relatório de Distribuição de Atendimentos</template
-              >
-              <template v-slot:description
-                >Gere um relatório mostrando a distribuição de atendimentos por
-                setor e fila ao longo do tempo, identificando picos de
-                demanda.</template
-              >
-            </SugestionCard>
-            <SugestionCard>
-              <template v-slot:title>Tendências de Contato</template>
-              <template v-slot:description
-                >Analise a frequência de contatos de cada cliente e identifique
-                padrões ou tendências em suas solicitações de
-                atendimento.</template
-              >
-            </SugestionCard>
-            <SugestionCard>
-              <template v-slot:title
-                >Avaliação de Tags de Encerramento</template
-              >
-              <template v-slot:description
-                >Examine as tags de encerramento do atendimento e determine as
-                categorias mais comuns de problemas ou solicitações dos
-                clientes.</template
-              >
-            </SugestionCard>
-          </div>
-        </div>
-      </div>
-      <div
-        v-else
-        class="resizable-bar__general-content"
-      >
-        <div
-          class="resizable-bar__content-doris"
-          v-if="showContent"
-        >
-          <img
-            class="resizable-bar__doris-image"
-            src="../assets/images/doris.png"
-            alt="Dóris"
-          />
-          <h1 class="unnnic-font title-lg resizable-bar__doris-title">
-            Como posso te ajudar hoje?
-          </h1>
-        </div>
-        <div class="resizable-bar__content-text">
-          <div class="resizable-bar__cards">
-            <InsightsCard v-if="showContent">
-              <template v-slot:title
-                >Quais foram os principais erros no meu chatbot?</template
-              >
-              <template v-slot:description>Nos últimos 30 dias</template>
-            </InsightsCard>
-            <InsightsCard v-if="showContent">
-              <template v-slot:title
-                >Quais foram os principais erros no meu chatbot?</template
-              >
-              <template v-slot:description>Nos últimos 30 dias</template>
-            </InsightsCard>
-            <InsightsCard>
-              <template v-slot:title
-                >Quais foram os principais erros no meu chatbot?</template
-              >
-              <template v-slot:description>Nos últimos 30 dias</template>
-            </InsightsCard>
-            <InsightsMainCard @click="showInsights">
-              <template v-slot:description>
-                Visualizar mais prompts prontos</template
-              >
-            </InsightsMainCard>
-          </div>
-        </div>
-      </div>
-      <PromptsHistory />
-    </section>
-    <InsightsInput />
-  </aside>
-</template>
-
-<script>
-import InsightsMainCard from '@/components/InsightsMainCard.vue';
-import InsightsCard from '@/components/InsightsCard.vue';
-import SugestionCard from '@/components/SugestionCard.vue';
-import InsightsInput from '@/components/InsightsInput.vue';
-import PromptsHistory from '@/components/insights/PromptsHistory/index.vue';
-
-export default {
-  name: 'ResizableBar',
-
-  components: {
-    InsightsMainCard,
-    InsightsCard,
-    SugestionCard,
-    InsightsInput,
-    PromptsHistory,
-  },
-
-  data() {
-    return {
-      startY: 0,
-      startBottom: -214,
-      minHeight: -270,
-      maxHeight: 288,
-      sidebarHeight: 288,
-      sidebarBottom: this.getInitialBarHeight(),
-      isResizing: false,
-      visibleGeneral: false,
-      visibleInsights: false,
-      showContent: false,
-      isRelative: this.changePosition(),
-    };
-  },
-
-  methods: {
-    getInitialBarHeight() {
-      if (this.$route.name === 'home') {
-        this.showContent = true;
-        return 1;
-      } else {
-        this.isRelative = false;
-        return -270;
-      }
-    },
-
-    changePosition() {
-      if (this.$route.name !== 'home') {
-        return (this.isRelative = false);
-      } else {
-        return (this.isRelative = true);
-      }
-    },
-
-    updateContentVisibility() {
-      if (this.sidebarBottom == this.initialContentHeight) {
-        this.showContent = true;
-      } else {
-        this.showContent = true;
-      }
-    },
-
-    startResizing(event) {
-      this.isResizing = true;
-      this.startY = event.clientY;
-      this.startBottom = this.sidebarBottom;
-      window.addEventListener('mousemove', this.handleResizing);
-      window.addEventListener('mouseup', this.stopResizing);
-    },
-
-    handleResizing(event) {
-      if (this.isResizing) {
-        this.isRelative = false;
-        this.$store.commit('sidebar/setChartVisibility', false);
-        this.updateContentVisibility();
-        const offsetY = event.clientY - this.startY;
-        this.sidebarBottom = Math.max(
-          Math.min(this.startBottom - offsetY, this.maxHeight),
-          this.minHeight,
-        );
-      }
-
-      if (this.isResizing && this.sidebarBottom < -200) {
-        this.$store.commit('sidebar/setChartVisibility', true);
-      }
-    },
-
-    stopResizing() {
-      this.isResizing = false;
-      window.removeEventListener('mousemove', this.handleResizing);
-      window.removeEventListener('mouseup', this.stopResizing);
-    },
-
-    resizeBar() {
-      if (this.sidebarBottom != 288) {
-        this.sidebarBottom = 288;
-        this.isRelative = false;
-        this.$store.commit('sidebar/setChartVisibility', false);
-      } else {
-        this.sidebarBottom = -270;
-        this.$store.commit('sidebar/setChartVisibility', true);
-      }
-
-      this.updateContentVisibility();
-    },
-
-    showInsights() {
-      this.visibleInsights = !this.visibleInsights && !this.visibleGeneral;
-      if (this.sidebarBottom != 288) {
-        this.sidebarBottom = 288;
-        this.isRelative = false;
-      }
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-$insightsContainerPadding: $unnnic-spacing-ant * 2;
-
-.resizable-bar {
-  z-index: 1;
-  position: absolute;
-  background-color: $unnnic-color-neutral-white;
-  width: calc(100% - $insightsContainerPadding);
-  height: 210px;
-
-  &__header {
-    display: flex;
-    flex-direction: row;
-    place-content: space-between;
-    align-items: center;
-    margin-bottom: $unnnic-spacing-lg;
-    cursor: ns-resize;
-    position: relative;
-  }
-
-  &__separator {
-    border: 1px solid $unnnic-color-neutral-clean;
-    border-radius: $unnnic-spacing-nano;
-    height: 1px;
-    width: 50%;
-  }
-
-  .green-color {
-    border: 2px solid $unnnic-color-neutral-dark;
-  }
-
-  &__circle-up {
-    border-radius: 50%;
-    background-color: $unnnic-color-neutral-white;
-    border: none;
-    cursor: pointer;
-    position: absolute;
-    left: 50%;
-    transform: translateX(-50%);
-    display: flex;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-  }
-
-  &__content {
-    background-color: $unnnic-color-neutral-white;
-    display: flex;
-    flex-direction: column;
-    place-content: center;
-    gap: 2rem;
-
-    @media screen and (max-width: 900px) {
-      overflow-y: scroll;
-      overflow-x: hidden;
-    }
-  }
-
-  &__general-content {
-    margin-bottom: 2rem;
-  }
-
-  &__content-doris {
-    margin: 3rem;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
-
-  &__doris-image {
-    height: 8rem;
-    width: 8rem;
-  }
-
-  &__doris-title {
-    font-weight: $unnnic-font-weight-bold;
-  }
-
-  &__content-text {
-    padding: 0 8rem;
-
-    @media screen and (max-width: 900px) {
-      padding: unset;
-    }
-  }
-
-  &__cards {
-    display: grid;
-    grid-template-columns: repeat(2, 2fr);
-    grid-template-rows: repeat(2, auto);
-    grid-column-gap: $unnnic-spacing-xs;
-    grid-row-gap: $unnnic-spacing-xs;
-  }
-
-  &__insights {
-    display: flex;
-    flex-direction: column;
-    padding: 6rem 8rem 1rem 8rem;
-
-    @media screen and (max-width: 900px) {
-      padding: unset;
-    }
-  }
-
-  &__insights-description {
-    margin-bottom: $unnnic-spacing-xs;
-  }
-
-  &__insights-title {
-    margin-bottom: $unnnic-spacing-lg;
-  }
-
-  &__insights-content {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    gap: $unnnic-spacing-xs;
-    @media screen and (max-width: 900px) {
-      max-height: 300px;
-      flex-direction: column;
-    }
-  }
-
-  &__insights-list {
-    display: flex;
-    flex-direction: column;
-    gap: $unnnic-spacing-nano;
-    @media screen and (max-width: 900px) {
-      margin-bottom: $unnnic-spacing-lg;
-    }
-    .list-item {
-      font-size: $unnnic-font-size-body-lg;
-      cursor: pointer;
-      width: 200px;
-      padding: $unnnic-spacing-xs;
-
-      &.selected {
-        font-weight: $unnnic-font-weight-bold;
-        background-color: $unnnic-color-neutral-light;
-        padding: $unnnic-spacing-xs;
-      }
-    }
-  }
-
-  &__insights-cards {
-    display: grid;
-    grid-template-columns: repeat(2, 2fr);
-    grid-template-rows: repeat(2, auto);
-    grid-column-gap: $unnnic-spacing-sm;
-    grid-row-gap: $unnnic-spacing-sm;
-  }
-}
-
-.resizable-bar--position {
-  position: inherit;
-  width: 100%;
-}
-</style>
diff --git a/src/components/insights/ResizableBar/ResizableBarCards.vue b/src/components/insights/ResizableBar/ResizableBarCards.vue
new file mode 100644
index 00000000..ccc49834
--- /dev/null
+++ b/src/components/insights/ResizableBar/ResizableBarCards.vue
@@ -0,0 +1,224 @@
+<template>
+  <div class="resizable-bar__general-content__container">
+    <div
+      v-if="visibleInsights"
+      class="resizable-bar__insights"
+    >
+      <header class="resizable-bar__insights-header">
+        <p class="resizable-bar__insights-description unnnic-font body-md bold">
+          InsightsGPT:
+        </p>
+        <h2 class="resizable-bar__insights-title unnnic-font title-sm bold">
+          Aqui estão algumas sugestões para você:
+        </h2>
+      </header>
+      <div class="resizable-bar__insights-content">
+        <nav class="resizable-bar__insights-nav">
+          <ul class="resizable-bar__insights-list">
+            <li class="list-item">Recentes</li>
+            <li class="list-item">Segmentos</li>
+            <li class="list-item">Varejo</li>
+            <li class="list-item">Weni plataforma</li>
+            <li class="list-item selected">Atendimento humano</li>
+          </ul>
+        </nav>
+        <div class="resizable-bar__insights-cards">
+          <SugestionCard>
+            <template v-slot:title>Análise de Desempenho do Atendente</template>
+            <template v-slot:description>Nos últimos 30 dias</template>
+          </SugestionCard>
+          <SugestionCard>
+            <template v-slot:title>Satisfação do Cliente</template>
+            <template v-slot:description
+              >Combine os dados de atendimento com feedbacks de satisfação do
+              cliente para avaliar a eficácia dos diferentes setores e
+              atendentes.</template
+            >
+          </SugestionCard>
+          <SugestionCard>
+            <template v-slot:title
+              >Relatório de Distribuição de Atendimentos</template
+            >
+            <template v-slot:description
+              >Gere um relatório mostrando a distribuição de atendimentos por
+              setor e fila ao longo do tempo, identificando picos de
+              demanda.</template
+            >
+          </SugestionCard>
+          <SugestionCard>
+            <template v-slot:title>Tendências de Contato</template>
+            <template v-slot:description
+              >Analise a frequência de contatos de cada cliente e identifique
+              padrões ou tendências em suas solicitações de
+              atendimento.</template
+            >
+          </SugestionCard>
+          <SugestionCard>
+            <template v-slot:title>Avaliação de Tags de Encerramento</template>
+            <template v-slot:description
+              >Examine as tags de encerramento do atendimento e determine as
+              categorias mais comuns de problemas ou solicitações dos
+              clientes.</template
+            >
+          </SugestionCard>
+        </div>
+      </div>
+    </div>
+    <div
+      v-else
+      class="resizable-bar__general-content"
+    >
+      <div class="resizable-bar__content-doris">
+        <img
+          class="resizable-bar__doris-image"
+          src="@/assets/images/doris.png"
+          alt="Dóris"
+        />
+        <h1 class="unnnic-font title-lg resizable-bar__doris-title">
+          Como posso te ajudar hoje?
+        </h1>
+      </div>
+      <div class="resizable-bar__content-text">
+        <div class="resizable-bar__cards">
+          <InsightsCard>
+            <template v-slot:title
+              >Quais foram os principais erros no meu chatbot?</template
+            >
+            <template v-slot:description>Nos últimos 30 dias</template>
+          </InsightsCard>
+          <InsightsCard>
+            <template v-slot:title
+              >Quais foram os principais erros no meu chatbot?</template
+            >
+            <template v-slot:description>Nos últimos 30 dias</template>
+          </InsightsCard>
+          <InsightsCard>
+            <template v-slot:title
+              >Quais foram os principais erros no meu chatbot?</template
+            >
+            <template v-slot:description>Nos últimos 30 dias</template>
+          </InsightsCard>
+          <InsightsMainCard @click="showInsights">
+            <template v-slot:description>
+              Visualizar mais prompts prontos</template
+            >
+          </InsightsMainCard>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import InsightsMainCard from '@/components/InsightsMainCard.vue';
+import InsightsCard from '@/components/InsightsCard.vue';
+import SugestionCard from '@/components/SugestionCard.vue';
+
+export default {
+  name: 'ResisableBarCards',
+
+  components: { InsightsMainCard, InsightsCard, SugestionCard },
+
+  data() {
+    return {
+      visibleInsights: false,
+    };
+  },
+
+  methods: {
+    showInsights() {
+      this.visibleInsights = !this.visibleInsights;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.resizable-bar {
+  &__general-content__container {
+    overflow: hidden;
+  }
+
+  &__general-content {
+    width: 100%;
+    height: 100%;
+
+    display: flex;
+    flex-direction: column;
+    gap: $unnnic-spacing-sm;
+    justify-content: end;
+  }
+
+  &__content-doris {
+    margin-bottom: auto;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  &__doris-image {
+    height: 8rem;
+    width: 8rem;
+  }
+
+  &__doris-title {
+    font-weight: $unnnic-font-weight-bold;
+  }
+
+  &__cards {
+    display: grid;
+    grid-template-columns: repeat(2, 2fr);
+    grid-template-rows: repeat(2, auto);
+    grid-column-gap: $unnnic-spacing-xs;
+    grid-row-gap: $unnnic-spacing-xs;
+  }
+
+  &__insights {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__insights-description {
+    margin-bottom: $unnnic-spacing-xs;
+  }
+
+  &__insights-title {
+    margin-bottom: $unnnic-spacing-lg;
+  }
+
+  &__insights-content {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    gap: $unnnic-spacing-xs;
+  }
+
+  &__insights-list {
+    display: flex;
+    flex-direction: column;
+    gap: $unnnic-spacing-nano;
+
+    .list-item {
+      font-size: $unnnic-font-size-body-lg;
+      cursor: pointer;
+      width: 200px;
+      padding: $unnnic-spacing-xs;
+
+      &.selected {
+        font-weight: $unnnic-font-weight-bold;
+        background-color: $unnnic-color-neutral-light;
+        padding: $unnnic-spacing-xs;
+      }
+    }
+  }
+
+  &__insights-cards {
+    display: grid;
+    grid-template-columns: repeat(2, 2fr);
+    grid-template-rows: repeat(2, auto);
+    grid-column-gap: $unnnic-spacing-sm;
+    grid-row-gap: $unnnic-spacing-sm;
+  }
+}
+</style>
diff --git a/src/components/ResizableBarNext.vue b/src/components/insights/ResizableBar/index.vue
similarity index 85%
rename from src/components/ResizableBarNext.vue
rename to src/components/insights/ResizableBar/index.vue
index 96677dc2..bcddcf01 100644
--- a/src/components/ResizableBarNext.vue
+++ b/src/components/insights/ResizableBar/index.vue
@@ -26,12 +26,19 @@
         height: `${contentHeight}vh`,
         transition: resizeTransition,
       }"
-    ></section>
+    >
+      <ResizableBarCards />
+      <InsightsInput />
+    </section>
   </aside>
 </template>
 
 <script>
+import InsightsInput from '@/components/InsightsInput.vue';
+import ResizableBarCards from './ResizableBarCards.vue';
+
 export default {
+  components: { InsightsInput, ResizableBarCards },
   name: 'ResizableBar',
 
   data() {
@@ -143,7 +150,23 @@ $insightsLayoutPadding: ($unnnic-spacing-sm * 2);
   }
 
   &__content {
+    overflow: hidden;
+
+    display: grid;
+    grid-template-rows: 1fr auto;
+    gap: $unnnic-spacing-sm;
+
     background-color: $unnnic-color-background-white;
+
+    padding-bottom: $unnnic-spacing-sm;
+
+    > * {
+      margin: 0 $unnnic-spacing-awesome;
+
+      &:first-child {
+        margin-top: $unnnic-spacing-sm;
+      }
+    }
   }
 }
 </style>
diff --git a/src/layouts/InsightsLayout/index.vue b/src/layouts/InsightsLayout/index.vue
index ad5d2ad5..e8ae175a 100644
--- a/src/layouts/InsightsLayout/index.vue
+++ b/src/layouts/InsightsLayout/index.vue
@@ -13,7 +13,7 @@
 </template>
 
 <script>
-import ResizableBar from '@/components/ResizableBarNext.vue';
+import ResizableBar from '@/components/insights/ResizableBar/index.vue';
 import ConnectSidebar from '@/components/connect/ConnectSidebar.vue';
 import ConnectTopbar from '@/components/connect/ConnectTopbar.vue';
 

From 5ba655db7ee92f8293a2273d19fe435a7caad8c3 Mon Sep 17 00:00:00 2001
From: aldemylla <aldemylla@gmail.com>
Date: Tue, 2 Apr 2024 15:53:57 -0300
Subject: [PATCH 05/12] feat: PromptsHistory at ResizableBar remaded

---
 .../insights/PromptsHistory/index.vue         |   5 +-
 .../ResizableBar/ResizableBarCards.vue        | 207 +++++++++---------
 .../insights/ResizableBar/index.vue           |  21 +-
 3 files changed, 119 insertions(+), 114 deletions(-)

diff --git a/src/components/insights/PromptsHistory/index.vue b/src/components/insights/PromptsHistory/index.vue
index f57fe653..76bf46ce 100644
--- a/src/components/insights/PromptsHistory/index.vue
+++ b/src/components/insights/PromptsHistory/index.vue
@@ -1,5 +1,8 @@
 <template>
-  <section class="prompts-history">
+  <section
+    class="prompts-history"
+    v-if="insights.length"
+  >
     <section
       v-for="(insight, index) in insights"
       class="prompts-history__conversation"
diff --git a/src/components/insights/ResizableBar/ResizableBarCards.vue b/src/components/insights/ResizableBar/ResizableBarCards.vue
index ccc49834..f1e71ab0 100644
--- a/src/components/insights/ResizableBar/ResizableBarCards.vue
+++ b/src/components/insights/ResizableBar/ResizableBarCards.vue
@@ -1,109 +1,106 @@
 <template>
-  <div class="resizable-bar__general-content__container">
-    <div
-      v-if="visibleInsights"
-      class="resizable-bar__insights"
-    >
-      <header class="resizable-bar__insights-header">
-        <p class="resizable-bar__insights-description unnnic-font body-md bold">
-          InsightsGPT:
-        </p>
-        <h2 class="resizable-bar__insights-title unnnic-font title-sm bold">
-          Aqui estão algumas sugestões para você:
-        </h2>
-      </header>
-      <div class="resizable-bar__insights-content">
-        <nav class="resizable-bar__insights-nav">
-          <ul class="resizable-bar__insights-list">
-            <li class="list-item">Recentes</li>
-            <li class="list-item">Segmentos</li>
-            <li class="list-item">Varejo</li>
-            <li class="list-item">Weni plataforma</li>
-            <li class="list-item selected">Atendimento humano</li>
-          </ul>
-        </nav>
-        <div class="resizable-bar__insights-cards">
-          <SugestionCard>
-            <template v-slot:title>Análise de Desempenho do Atendente</template>
-            <template v-slot:description>Nos últimos 30 dias</template>
-          </SugestionCard>
-          <SugestionCard>
-            <template v-slot:title>Satisfação do Cliente</template>
-            <template v-slot:description
-              >Combine os dados de atendimento com feedbacks de satisfação do
-              cliente para avaliar a eficácia dos diferentes setores e
-              atendentes.</template
-            >
-          </SugestionCard>
-          <SugestionCard>
-            <template v-slot:title
-              >Relatório de Distribuição de Atendimentos</template
-            >
-            <template v-slot:description
-              >Gere um relatório mostrando a distribuição de atendimentos por
-              setor e fila ao longo do tempo, identificando picos de
-              demanda.</template
-            >
-          </SugestionCard>
-          <SugestionCard>
-            <template v-slot:title>Tendências de Contato</template>
-            <template v-slot:description
-              >Analise a frequência de contatos de cada cliente e identifique
-              padrões ou tendências em suas solicitações de
-              atendimento.</template
-            >
-          </SugestionCard>
-          <SugestionCard>
-            <template v-slot:title>Avaliação de Tags de Encerramento</template>
-            <template v-slot:description
-              >Examine as tags de encerramento do atendimento e determine as
-              categorias mais comuns de problemas ou solicitações dos
-              clientes.</template
-            >
-          </SugestionCard>
-        </div>
+  <div
+    v-if="visibleInsights"
+    class="resizable-bar__insights"
+  >
+    <header class="resizable-bar__insights-header">
+      <p class="resizable-bar__insights-description unnnic-font body-md bold">
+        InsightsGPT:
+      </p>
+      <h2 class="resizable-bar__insights-title unnnic-font title-sm bold">
+        Aqui estão algumas sugestões para você:
+      </h2>
+    </header>
+    <div class="resizable-bar__insights-content">
+      <nav class="resizable-bar__insights-nav">
+        <ul class="resizable-bar__insights-list">
+          <li class="list-item">Recentes</li>
+          <li class="list-item">Segmentos</li>
+          <li class="list-item">Varejo</li>
+          <li class="list-item">Weni plataforma</li>
+          <li class="list-item selected">Atendimento humano</li>
+        </ul>
+      </nav>
+      <div class="resizable-bar__insights-cards">
+        <SugestionCard>
+          <template v-slot:title>Análise de Desempenho do Atendente</template>
+          <template v-slot:description>Nos últimos 30 dias</template>
+        </SugestionCard>
+        <SugestionCard>
+          <template v-slot:title>Satisfação do Cliente</template>
+          <template v-slot:description
+            >Combine os dados de atendimento com feedbacks de satisfação do
+            cliente para avaliar a eficácia dos diferentes setores e
+            atendentes.</template
+          >
+        </SugestionCard>
+        <SugestionCard>
+          <template v-slot:title
+            >Relatório de Distribuição de Atendimentos</template
+          >
+          <template v-slot:description
+            >Gere um relatório mostrando a distribuição de atendimentos por
+            setor e fila ao longo do tempo, identificando picos de
+            demanda.</template
+          >
+        </SugestionCard>
+        <SugestionCard>
+          <template v-slot:title>Tendências de Contato</template>
+          <template v-slot:description
+            >Analise a frequência de contatos de cada cliente e identifique
+            padrões ou tendências em suas solicitações de atendimento.</template
+          >
+        </SugestionCard>
+        <SugestionCard>
+          <template v-slot:title>Avaliação de Tags de Encerramento</template>
+          <template v-slot:description
+            >Examine as tags de encerramento do atendimento e determine as
+            categorias mais comuns de problemas ou solicitações dos
+            clientes.</template
+          >
+        </SugestionCard>
       </div>
     </div>
-    <div
-      v-else
-      class="resizable-bar__general-content"
-    >
-      <div class="resizable-bar__content-doris">
-        <img
-          class="resizable-bar__doris-image"
-          src="@/assets/images/doris.png"
-          alt="Dóris"
-        />
-        <h1 class="unnnic-font title-lg resizable-bar__doris-title">
-          Como posso te ajudar hoje?
-        </h1>
-      </div>
-      <div class="resizable-bar__content-text">
-        <div class="resizable-bar__cards">
-          <InsightsCard>
-            <template v-slot:title
-              >Quais foram os principais erros no meu chatbot?</template
-            >
-            <template v-slot:description>Nos últimos 30 dias</template>
-          </InsightsCard>
-          <InsightsCard>
-            <template v-slot:title
-              >Quais foram os principais erros no meu chatbot?</template
-            >
-            <template v-slot:description>Nos últimos 30 dias</template>
-          </InsightsCard>
-          <InsightsCard>
-            <template v-slot:title
-              >Quais foram os principais erros no meu chatbot?</template
-            >
-            <template v-slot:description>Nos últimos 30 dias</template>
-          </InsightsCard>
-          <InsightsMainCard @click="showInsights">
-            <template v-slot:description>
-              Visualizar mais prompts prontos</template
-            >
-          </InsightsMainCard>
-        </div>
+  </div>
+  <div
+    v-else
+    class="resizable-bar__general-content"
+  >
+    <div class="resizable-bar__content-doris">
+      <img
+        class="resizable-bar__doris-image"
+        src="@/assets/images/doris.png"
+        alt="Dóris"
+      />
+      <h1 class="unnnic-font title-lg resizable-bar__doris-title">
+        Como posso te ajudar hoje?
+      </h1>
+    </div>
+    <div class="resizable-bar__content-text">
+      <div class="resizable-bar__cards">
+        <InsightsCard>
+          <template v-slot:title
+            >Quais foram os principais erros no meu chatbot?</template
+          >
+          <template v-slot:description>Nos últimos 30 dias</template>
+        </InsightsCard>
+        <InsightsCard>
+          <template v-slot:title
+            >Quais foram os principais erros no meu chatbot?</template
+          >
+          <template v-slot:description>Nos últimos 30 dias</template>
+        </InsightsCard>
+        <InsightsCard>
+          <template v-slot:title
+            >Quais foram os principais erros no meu chatbot?</template
+          >
+          <template v-slot:description>Nos últimos 30 dias</template>
+        </InsightsCard>
+        <InsightsMainCard @click="showInsights">
+          <template v-slot:description>
+            Visualizar mais prompts prontos</template
+          >
+        </InsightsMainCard>
       </div>
     </div>
   </div>
@@ -135,10 +132,6 @@ export default {
 
 <style lang="scss" scoped>
 .resizable-bar {
-  &__general-content__container {
-    overflow: hidden;
-  }
-
   &__general-content {
     width: 100%;
     height: 100%;
diff --git a/src/components/insights/ResizableBar/index.vue b/src/components/insights/ResizableBar/index.vue
index bcddcf01..0937ff97 100644
--- a/src/components/insights/ResizableBar/index.vue
+++ b/src/components/insights/ResizableBar/index.vue
@@ -20,25 +20,29 @@
       </button>
       <hr class="handler__separator" />
     </section>
-    <section
+    <main
       class="resizable-bar__content"
       :style="{
         height: `${contentHeight}vh`,
         transition: resizeTransition,
       }"
     >
-      <ResizableBarCards />
+      <section class="content__section">
+        <ResizableBarCards />
+        <PromptsHistory />
+      </section>
       <InsightsInput />
-    </section>
+    </main>
   </aside>
 </template>
 
 <script>
 import InsightsInput from '@/components/InsightsInput.vue';
 import ResizableBarCards from './ResizableBarCards.vue';
+import PromptsHistory from '@/components/insights/PromptsHistory/index.vue';
 
 export default {
-  components: { InsightsInput, ResizableBarCards },
+  components: { ResizableBarCards, PromptsHistory, InsightsInput },
   name: 'ResizableBar',
 
   data() {
@@ -150,8 +154,6 @@ $insightsLayoutPadding: ($unnnic-spacing-sm * 2);
   }
 
   &__content {
-    overflow: hidden;
-
     display: grid;
     grid-template-rows: 1fr auto;
     gap: $unnnic-spacing-sm;
@@ -160,6 +162,13 @@ $insightsLayoutPadding: ($unnnic-spacing-sm * 2);
 
     padding-bottom: $unnnic-spacing-sm;
 
+    .content__section {
+      overflow: auto;
+
+      display: grid;
+      gap: $unnnic-spacing-xl;
+    }
+
     > * {
       margin: 0 $unnnic-spacing-awesome;
 

From 5e61b878267e3aaf7d57fe953a2a25da9c8de8a5 Mon Sep 17 00:00:00 2001
From: aldemylla <aldemylla@gmail.com>
Date: Tue, 9 Apr 2024 17:04:28 -0300
Subject: [PATCH 06/12] fix: Prevent select elements when drag the ResizableBar

---
 src/components/insights/ResizableBar/index.vue | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/components/insights/ResizableBar/index.vue b/src/components/insights/ResizableBar/index.vue
index 0937ff97..4cba0a7e 100644
--- a/src/components/insights/ResizableBar/index.vue
+++ b/src/components/insights/ResizableBar/index.vue
@@ -3,9 +3,7 @@
     <section class="resizable-bar__gradient" />
     <section
       class="resizable-bar__handler"
-      @mousedown="startResizing"
-      @mousemove="handleResizing"
-      @mouseup="stopResizing"
+      @mousedown.prevent.stop="startResizing"
     >
       <hr class="handler__separator" />
       <button
@@ -100,6 +98,18 @@ export default {
       this.isResizing = false;
     },
   },
+
+  watch: {
+    isResizing(newIsResizing) {
+      if (newIsResizing) {
+        window.addEventListener('mousemove', this.handleResizing);
+        window.addEventListener('mouseup', this.stopResizing);
+      } else {
+        window.removeEventListener('mousemove', this.handleResizing);
+        window.removeEventListener('mouseup', this.stopResizing);
+      }
+    },
+  },
 };
 </script>
 

From c9890354dbc658a0b1ed46a1b5005a57c8163442 Mon Sep 17 00:00:00 2001
From: aldemylla <aldemylla@gmail.com>
Date: Tue, 9 Apr 2024 17:45:01 -0300
Subject: [PATCH 07/12] feat: ResibleBar start with content scroll at 0

---
 .../insights/ResizableBar/ResizableBarCards.vue      | 12 ------------
 src/components/insights/ResizableBar/index.vue       |  6 ++++++
 2 files changed, 6 insertions(+), 12 deletions(-)

diff --git a/src/components/insights/ResizableBar/ResizableBarCards.vue b/src/components/insights/ResizableBar/ResizableBarCards.vue
index f1e71ab0..f5f3f693 100644
--- a/src/components/insights/ResizableBar/ResizableBarCards.vue
+++ b/src/components/insights/ResizableBar/ResizableBarCards.vue
@@ -78,18 +78,6 @@
     </div>
     <div class="resizable-bar__content-text">
       <div class="resizable-bar__cards">
-        <InsightsCard>
-          <template v-slot:title
-            >Quais foram os principais erros no meu chatbot?</template
-          >
-          <template v-slot:description>Nos últimos 30 dias</template>
-        </InsightsCard>
-        <InsightsCard>
-          <template v-slot:title
-            >Quais foram os principais erros no meu chatbot?</template
-          >
-          <template v-slot:description>Nos últimos 30 dias</template>
-        </InsightsCard>
         <InsightsCard>
           <template v-slot:title
             >Quais foram os principais erros no meu chatbot?</template
diff --git a/src/components/insights/ResizableBar/index.vue b/src/components/insights/ResizableBar/index.vue
index 4cba0a7e..341a0456 100644
--- a/src/components/insights/ResizableBar/index.vue
+++ b/src/components/insights/ResizableBar/index.vue
@@ -53,6 +53,12 @@ export default {
     };
   },
 
+  mounted() {
+    const { resizableBarContentScroll } = this.$refs;
+    resizableBarContentScroll.scrollTop =
+      resizableBarContentScroll.scrollHeight;
+  },
+
   computed: {
     handlerIcon() {
       return this.contentHeight === this.maxContentHeight

From d2b18aae1f9da9a49bdfb46f9ae89e3c809e2762 Mon Sep 17 00:00:00 2001
From: aldemylla <aldemylla@gmail.com>
Date: Tue, 9 Apr 2024 17:46:04 -0300
Subject: [PATCH 08/12] feat: Increasing ResizableBar drag activation space

---
 src/components/insights/ResizableBar/index.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/insights/ResizableBar/index.vue b/src/components/insights/ResizableBar/index.vue
index 341a0456..9093815f 100644
--- a/src/components/insights/ResizableBar/index.vue
+++ b/src/components/insights/ResizableBar/index.vue
@@ -108,9 +108,11 @@ export default {
   watch: {
     isResizing(newIsResizing) {
       if (newIsResizing) {
+        document.body.style.cursor = 'ns-resize';
         window.addEventListener('mousemove', this.handleResizing);
         window.addEventListener('mouseup', this.stopResizing);
       } else {
+        document.body.style.cursor = 'default';
         window.removeEventListener('mousemove', this.handleResizing);
         window.removeEventListener('mouseup', this.stopResizing);
       }
@@ -147,13 +149,15 @@ $insightsLayoutPadding: ($unnnic-spacing-sm * 2);
 
     background: $unnnic-color-background-white;
 
+    cursor: ns-resize;
+
     .handler__separator {
       width: 100%;
 
+      margin: $unnnic-spacing-xs 0;
+
       border: $unnnic-border-width-thinner solid $unnnic-color-neutral-clean;
       border-radius: $unnnic-border-radius-pill;
-
-      cursor: ns-resize;
     }
 
     .handler__button {

From cbe75dbee5e46d55e627bf736cd750e8b58a502f Mon Sep 17 00:00:00 2001
From: aldemylla <aldemylla@gmail.com>
Date: Wed, 10 Apr 2024 12:11:22 -0300
Subject: [PATCH 09/12] fix: Adjusted the click reference to the ResizableBar
 handler

---
 .../insights/ResizableBar/index.vue           | 50 ++++++++++++-------
 1 file changed, 33 insertions(+), 17 deletions(-)

diff --git a/src/components/insights/ResizableBar/index.vue b/src/components/insights/ResizableBar/index.vue
index 9093815f..c98ce120 100644
--- a/src/components/insights/ResizableBar/index.vue
+++ b/src/components/insights/ResizableBar/index.vue
@@ -45,11 +45,14 @@ export default {
 
   data() {
     return {
-      startY: 0,
-      maxContentHeight: 60,
-      contentHeight: 24,
       isResizing: false,
       resizeTransition: 'none',
+
+      startHandlerY: null,
+      startContentHeight: null,
+
+      contentHeightMax: 60,
+      contentHeight: 24,
     };
   },
 
@@ -61,48 +64,61 @@ export default {
 
   computed: {
     handlerIcon() {
-      return this.contentHeight === this.maxContentHeight
+      return this.contentHeight === this.contentHeightMax
         ? 'expand_circle_down'
         : 'expand_circle_up';
     },
   },
 
   methods: {
+    pxToVh(px) {
+      const vh = window.innerHeight;
+      const pxAsVh = (px / vh) * 100;
+      return pxAsVh;
+    },
+
     handleResizeClick() {
-      this.resizeTransition = 'height ease-in-out 0.3s';
+      const { contentHeight, contentHeightMax } = this;
+
       if (
-        (this.contentHeight > 0 &&
-          this.contentHeight !== this.maxContentHeight) ||
-        this.contentHeight === 0
+        (contentHeight > 0 && contentHeight !== contentHeightMax) ||
+        contentHeight === 0
       ) {
-        this.contentHeight = this.maxContentHeight;
+        this.resizeHeightWithTransition(contentHeightMax);
       } else {
-        this.contentHeight = 0;
+        this.resizeHeightWithTransition(0);
       }
     },
 
     startResizing(event) {
       this.isResizing = true;
-      this.startY = event.clientY;
+      this.startHandlerY = event.clientY;
+      this.startContentHeight = this.contentHeight;
       this.resizeTransition = 'none';
     },
 
     handleResizing(event) {
       if (this.isResizing) {
-        const relativeVHFromClick = (event.clientY * 100) / window.innerHeight;
-        const remainingRelativeVHFromClick = 100 - relativeVHFromClick;
-        const adjustedcontentHeight = Math.min(
-          remainingRelativeVHFromClick,
-          this.maxContentHeight,
+        const deltaY = -(event.clientY - this.startHandlerY);
+        const remainingContentHeight =
+          this.startContentHeight + this.pxToVh(deltaY);
+        const adjustedContentHeight = Math.min(
+          remainingContentHeight,
+          this.contentHeightMax,
         );
 
-        this.contentHeight = adjustedcontentHeight;
+        this.contentHeight = adjustedContentHeight;
       }
     },
 
     stopResizing() {
       this.isResizing = false;
     },
+
+    resizeHeightWithTransition(height) {
+      this.resizeTransition = 'height ease-in-out 0.3s';
+      this.contentHeight = height;
+    },
   },
 
   watch: {

From 8fc1763f09596f2a4acdf5d8b923baa68f552139 Mon Sep 17 00:00:00 2001
From: aldemylla <aldemylla@gmail.com>
Date: Wed, 10 Apr 2024 12:16:46 -0300
Subject: [PATCH 10/12] fix: Adjusted the align end of content, adding the flex
 direction column reverse

---
 src/components/insights/ResizableBar/index.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/insights/ResizableBar/index.vue b/src/components/insights/ResizableBar/index.vue
index c98ce120..4f2ef55a 100644
--- a/src/components/insights/ResizableBar/index.vue
+++ b/src/components/insights/ResizableBar/index.vue
@@ -26,8 +26,9 @@
       }"
     >
       <section class="content__section">
-        <ResizableBarCards />
+        <!-- This element has flex-direction as column-reverse, to resize with correct behavior -->
         <PromptsHistory />
+        <ResizableBarCards />
       </section>
       <InsightsInput />
     </main>
@@ -201,7 +202,8 @@ $insightsLayoutPadding: ($unnnic-spacing-sm * 2);
     .content__section {
       overflow: auto;
 
-      display: grid;
+      display: flex;
+      flex-direction: column-reverse;
       gap: $unnnic-spacing-xl;
     }
 

From 01ac13942c1f40924ddb033ea82908efaf989628 Mon Sep 17 00:00:00 2001
From: aldemylla <aldemylla@gmail.com>
Date: Wed, 10 Apr 2024 15:36:15 -0300
Subject: [PATCH 11/12] feat: Standard height of the ResizableBar to refer to
 the first prompt suggestion and close automatically if the height is close to
 the end

---
 .../ResizableBar/ResizableBarCards.vue        | 192 ++----------------
 .../ResizableBar/ResizableBarDoris.vue        |  39 ++++
 .../ResizableBarPromptsSuggestions.vue        | 124 +++++++++++
 .../insights/ResizableBar/index.vue           | 109 +++++++++-
 4 files changed, 278 insertions(+), 186 deletions(-)
 create mode 100644 src/components/insights/ResizableBar/ResizableBarDoris.vue
 create mode 100644 src/components/insights/ResizableBar/ResizableBarPromptsSuggestions.vue

diff --git a/src/components/insights/ResizableBar/ResizableBarCards.vue b/src/components/insights/ResizableBar/ResizableBarCards.vue
index f5f3f693..105458dc 100644
--- a/src/components/insights/ResizableBar/ResizableBarCards.vue
+++ b/src/components/insights/ResizableBar/ResizableBarCards.vue
@@ -1,118 +1,29 @@
 <template>
-  <div
-    v-if="visibleInsights"
-    class="resizable-bar__insights"
-  >
-    <header class="resizable-bar__insights-header">
-      <p class="resizable-bar__insights-description unnnic-font body-md bold">
-        InsightsGPT:
-      </p>
-      <h2 class="resizable-bar__insights-title unnnic-font title-sm bold">
-        Aqui estão algumas sugestões para você:
-      </h2>
-    </header>
-    <div class="resizable-bar__insights-content">
-      <nav class="resizable-bar__insights-nav">
-        <ul class="resizable-bar__insights-list">
-          <li class="list-item">Recentes</li>
-          <li class="list-item">Segmentos</li>
-          <li class="list-item">Varejo</li>
-          <li class="list-item">Weni plataforma</li>
-          <li class="list-item selected">Atendimento humano</li>
-        </ul>
-      </nav>
-      <div class="resizable-bar__insights-cards">
-        <SugestionCard>
-          <template v-slot:title>Análise de Desempenho do Atendente</template>
-          <template v-slot:description>Nos últimos 30 dias</template>
-        </SugestionCard>
-        <SugestionCard>
-          <template v-slot:title>Satisfação do Cliente</template>
-          <template v-slot:description
-            >Combine os dados de atendimento com feedbacks de satisfação do
-            cliente para avaliar a eficácia dos diferentes setores e
-            atendentes.</template
-          >
-        </SugestionCard>
-        <SugestionCard>
-          <template v-slot:title
-            >Relatório de Distribuição de Atendimentos</template
-          >
-          <template v-slot:description
-            >Gere um relatório mostrando a distribuição de atendimentos por
-            setor e fila ao longo do tempo, identificando picos de
-            demanda.</template
-          >
-        </SugestionCard>
-        <SugestionCard>
-          <template v-slot:title>Tendências de Contato</template>
-          <template v-slot:description
-            >Analise a frequência de contatos de cada cliente e identifique
-            padrões ou tendências em suas solicitações de atendimento.</template
-          >
-        </SugestionCard>
-        <SugestionCard>
-          <template v-slot:title>Avaliação de Tags de Encerramento</template>
-          <template v-slot:description
-            >Examine as tags de encerramento do atendimento e determine as
-            categorias mais comuns de problemas ou solicitações dos
-            clientes.</template
-          >
-        </SugestionCard>
-      </div>
-    </div>
-  </div>
-  <div
-    v-else
-    class="resizable-bar__general-content"
-  >
-    <div class="resizable-bar__content-doris">
-      <img
-        class="resizable-bar__doris-image"
-        src="@/assets/images/doris.png"
-        alt="Dóris"
-      />
-      <h1 class="unnnic-font title-lg resizable-bar__doris-title">
-        Como posso te ajudar hoje?
-      </h1>
-    </div>
-    <div class="resizable-bar__content-text">
-      <div class="resizable-bar__cards">
-        <InsightsCard>
-          <template v-slot:title
-            >Quais foram os principais erros no meu chatbot?</template
-          >
-          <template v-slot:description>Nos últimos 30 dias</template>
-        </InsightsCard>
-        <InsightsMainCard @click="showInsights">
-          <template v-slot:description>
-            Visualizar mais prompts prontos</template
-          >
-        </InsightsMainCard>
-      </div>
-    </div>
-  </div>
+  <section class="resizable-bar__cards">
+    <InsightsCard>
+      <template v-slot:title
+        >Quais foram os principais erros no meu chatbot?</template
+      >
+      <template v-slot:description>Nos últimos 30 dias</template>
+    </InsightsCard>
+    <InsightsMainCard @click="emitShowMorePromptsSuggestions">
+      <template v-slot:description> Visualizar mais prompts prontos</template>
+    </InsightsMainCard>
+  </section>
 </template>
 
 <script>
 import InsightsMainCard from '@/components/InsightsMainCard.vue';
 import InsightsCard from '@/components/InsightsCard.vue';
-import SugestionCard from '@/components/SugestionCard.vue';
 
 export default {
   name: 'ResisableBarCards',
 
-  components: { InsightsMainCard, InsightsCard, SugestionCard },
-
-  data() {
-    return {
-      visibleInsights: false,
-    };
-  },
+  components: { InsightsMainCard, InsightsCard },
 
   methods: {
-    showInsights() {
-      this.visibleInsights = !this.visibleInsights;
+    emitShowMorePromptsSuggestions() {
+      this.$emit('show-more-prompts-suggestions');
     },
   },
 };
@@ -120,86 +31,11 @@ export default {
 
 <style lang="scss" scoped>
 .resizable-bar {
-  &__general-content {
-    width: 100%;
-    height: 100%;
-
-    display: flex;
-    flex-direction: column;
-    gap: $unnnic-spacing-sm;
-    justify-content: end;
-  }
-
-  &__content-doris {
-    margin-bottom: auto;
-
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
-
-  &__doris-image {
-    height: 8rem;
-    width: 8rem;
-  }
-
-  &__doris-title {
-    font-weight: $unnnic-font-weight-bold;
-  }
-
   &__cards {
     display: grid;
     grid-template-columns: repeat(2, 2fr);
-    grid-template-rows: repeat(2, auto);
     grid-column-gap: $unnnic-spacing-xs;
     grid-row-gap: $unnnic-spacing-xs;
   }
-
-  &__insights {
-    display: flex;
-    flex-direction: column;
-  }
-
-  &__insights-description {
-    margin-bottom: $unnnic-spacing-xs;
-  }
-
-  &__insights-title {
-    margin-bottom: $unnnic-spacing-lg;
-  }
-
-  &__insights-content {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    gap: $unnnic-spacing-xs;
-  }
-
-  &__insights-list {
-    display: flex;
-    flex-direction: column;
-    gap: $unnnic-spacing-nano;
-
-    .list-item {
-      font-size: $unnnic-font-size-body-lg;
-      cursor: pointer;
-      width: 200px;
-      padding: $unnnic-spacing-xs;
-
-      &.selected {
-        font-weight: $unnnic-font-weight-bold;
-        background-color: $unnnic-color-neutral-light;
-        padding: $unnnic-spacing-xs;
-      }
-    }
-  }
-
-  &__insights-cards {
-    display: grid;
-    grid-template-columns: repeat(2, 2fr);
-    grid-template-rows: repeat(2, auto);
-    grid-column-gap: $unnnic-spacing-sm;
-    grid-row-gap: $unnnic-spacing-sm;
-  }
 }
 </style>
diff --git a/src/components/insights/ResizableBar/ResizableBarDoris.vue b/src/components/insights/ResizableBar/ResizableBarDoris.vue
new file mode 100644
index 00000000..bc74647f
--- /dev/null
+++ b/src/components/insights/ResizableBar/ResizableBarDoris.vue
@@ -0,0 +1,39 @@
+<template>
+  <section class="resizable-bar__content-doris">
+    <img
+      class="resizable-bar__doris-image"
+      src="@/assets/images/doris.png"
+      alt="Dóris"
+    />
+    <h1 class="unnnic-font title-lg resizable-bar__doris-title">
+      Como posso te ajudar hoje?
+    </h1>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'ResizableBarDoris',
+};
+</script>
+
+<style lang="scss" scoped>
+.resizable-bar {
+  &__content-doris {
+    margin-bottom: auto;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  &__doris-image {
+    height: 8rem;
+    width: 8rem;
+  }
+
+  &__doris-title {
+    font-weight: $unnnic-font-weight-bold;
+  }
+}
+</style>
diff --git a/src/components/insights/ResizableBar/ResizableBarPromptsSuggestions.vue b/src/components/insights/ResizableBar/ResizableBarPromptsSuggestions.vue
new file mode 100644
index 00000000..6feb154d
--- /dev/null
+++ b/src/components/insights/ResizableBar/ResizableBarPromptsSuggestions.vue
@@ -0,0 +1,124 @@
+<template>
+  <section class="resizable-bar__insights">
+    <header class="resizable-bar__insights-header">
+      <p class="resizable-bar__insights-description unnnic-font body-md bold">
+        InsightsGPT:
+      </p>
+      <h2 class="resizable-bar__insights-title unnnic-font title-sm bold">
+        Aqui estão algumas sugestões para você:
+      </h2>
+    </header>
+    <section class="resizable-bar__insights-content">
+      <nav class="resizable-bar__insights-nav">
+        <ul class="resizable-bar__insights-list">
+          <li class="list-item">Recentes</li>
+          <li class="list-item">Segmentos</li>
+          <li class="list-item">Varejo</li>
+          <li class="list-item">Weni plataforma</li>
+          <li class="list-item selected">Atendimento humano</li>
+        </ul>
+      </nav>
+      <section class="resizable-bar__insights-cards">
+        <SugestionCard>
+          <template v-slot:title>Análise de Desempenho do Atendente</template>
+          <template v-slot:description>Nos últimos 30 dias</template>
+        </SugestionCard>
+        <SugestionCard>
+          <template v-slot:title>Satisfação do Cliente</template>
+          <template v-slot:description
+            >Combine os dados de atendimento com feedbacks de satisfação do
+            cliente para avaliar a eficácia dos diferentes setores e
+            atendentes.</template
+          >
+        </SugestionCard>
+        <SugestionCard>
+          <template v-slot:title
+            >Relatório de Distribuição de Atendimentos</template
+          >
+          <template v-slot:description
+            >Gere um relatório mostrando a distribuição de atendimentos por
+            setor e fila ao longo do tempo, identificando picos de
+            demanda.</template
+          >
+        </SugestionCard>
+        <SugestionCard>
+          <template v-slot:title>Tendências de Contato</template>
+          <template v-slot:description
+            >Analise a frequência de contatos de cada cliente e identifique
+            padrões ou tendências em suas solicitações de atendimento.</template
+          >
+        </SugestionCard>
+        <SugestionCard>
+          <template v-slot:title>Avaliação de Tags de Encerramento</template>
+          <template v-slot:description
+            >Examine as tags de encerramento do atendimento e determine as
+            categorias mais comuns de problemas ou solicitações dos
+            clientes.</template
+          >
+        </SugestionCard>
+      </section>
+    </section>
+  </section>
+</template>
+
+<script>
+import SugestionCard from '@/components/SugestionCard.vue';
+
+export default {
+  name: 'ResizableBarPromptsSuggestions',
+  components: {
+    SugestionCard,
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.resizable-bar {
+  &__insights {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__insights-description {
+    margin-bottom: $unnnic-spacing-xs;
+  }
+
+  &__insights-title {
+    margin-bottom: $unnnic-spacing-lg;
+  }
+
+  &__insights-content {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    gap: $unnnic-spacing-xs;
+  }
+
+  &__insights-list {
+    display: flex;
+    flex-direction: column;
+    gap: $unnnic-spacing-nano;
+
+    .list-item {
+      font-size: $unnnic-font-size-body-lg;
+      cursor: pointer;
+      width: 200px;
+      padding: $unnnic-spacing-xs;
+
+      &.selected {
+        font-weight: $unnnic-font-weight-bold;
+        background-color: $unnnic-color-neutral-light;
+        padding: $unnnic-spacing-xs;
+      }
+    }
+  }
+
+  &__insights-cards {
+    display: grid;
+    grid-template-columns: repeat(2, 2fr);
+    grid-template-rows: repeat(2, auto);
+    grid-column-gap: $unnnic-spacing-sm;
+    grid-row-gap: $unnnic-spacing-sm;
+  }
+}
+</style>
diff --git a/src/components/insights/ResizableBar/index.vue b/src/components/insights/ResizableBar/index.vue
index 4f2ef55a..e815fb74 100644
--- a/src/components/insights/ResizableBar/index.vue
+++ b/src/components/insights/ResizableBar/index.vue
@@ -1,8 +1,12 @@
 <template>
   <aside class="resizable-bar">
-    <section class="resizable-bar__gradient" />
+    <section
+      class="resizable-bar__gradient"
+      :class="{ show: contentHeight > contentHeightToClose }"
+    />
     <section
       class="resizable-bar__handler"
+      ref="resizableBarHandler"
       @mousedown.prevent.stop="startResizing"
     >
       <hr class="handler__separator" />
@@ -20,17 +24,27 @@
     </section>
     <main
       class="resizable-bar__content"
+      ref="resizableBarContent"
       :style="{
         height: `${contentHeight}vh`,
         transition: resizeTransition,
       }"
     >
-      <section class="content__section">
+      <section
+        class="content__section"
+        ref="resizableBarContentScroll"
+      >
         <!-- This element has flex-direction as column-reverse, to resize with correct behavior -->
         <PromptsHistory />
-        <ResizableBarCards />
+        <ResizableBarCards
+          ref="resizableBarCards"
+          v-show="!showMorePromptsSuggestions"
+          @show-more-prompts-suggestions="showMorePromptsSuggestions = true"
+        />
+        <ResizableBarDoris v-show="!showMorePromptsSuggestions" />
+        <ResizableBarPromptsSuggestions v-show="showMorePromptsSuggestions" />
       </section>
-      <InsightsInput />
+      <InsightsInput ref="insightsInput" />
     </main>
   </aside>
 </template>
@@ -38,10 +52,18 @@
 <script>
 import InsightsInput from '@/components/InsightsInput.vue';
 import ResizableBarCards from './ResizableBarCards.vue';
+import ResizableBarDoris from './ResizableBarDoris.vue';
+import ResizableBarPromptsSuggestions from './ResizableBarPromptsSuggestions.vue';
 import PromptsHistory from '@/components/insights/PromptsHistory/index.vue';
 
 export default {
-  components: { ResizableBarCards, PromptsHistory, InsightsInput },
+  components: {
+    ResizableBarCards,
+    ResizableBarDoris,
+    ResizableBarPromptsSuggestions,
+    PromptsHistory,
+    InsightsInput,
+  },
   name: 'ResizableBar',
 
   data() {
@@ -54,13 +76,15 @@ export default {
 
       contentHeightMax: 60,
       contentHeight: 24,
+      contentHeightToClose: null,
+
+      showMorePromptsSuggestions: false,
     };
   },
 
   mounted() {
-    const { resizableBarContentScroll } = this.$refs;
-    resizableBarContentScroll.scrollTop =
-      resizableBarContentScroll.scrollHeight;
+    this.scrollContentToBottom();
+    this.calculateDefaultContentHeight();
   },
 
   computed: {
@@ -72,12 +96,43 @@ export default {
   },
 
   methods: {
+    getPropertyValueAsNumber(styles, property) {
+      return parseFloat(styles.getPropertyValue(property)) || 0;
+    },
+
     pxToVh(px) {
       const vh = window.innerHeight;
       const pxAsVh = (px / vh) * 100;
       return pxAsVh;
     },
 
+    calculateDefaultContentHeight() {
+      const resizableBarHandler = this.$refs.resizableBarCards.$el;
+      const resizableBarContent = this.$refs.resizableBarContent;
+
+      const resizableBarContentStyles =
+        window.getComputedStyle(resizableBarContent);
+
+      const resizableBarContentGap = this.getPropertyValueAsNumber(
+        resizableBarContentStyles,
+        'gap',
+      );
+      const resizableBarContentPadding = this.getPropertyValueAsNumber(
+        resizableBarContentStyles,
+        'padding-bottom',
+      );
+
+      const insightsInputHeight = this.$refs.insightsInput.$el.clientHeight;
+      const resizableBarHandlerHeight = resizableBarHandler.clientHeight;
+      this.contentHeight = this.pxToVh(
+        resizableBarContentPadding * 2 +
+          resizableBarHandlerHeight +
+          resizableBarContentGap +
+          insightsInputHeight,
+      );
+      this.contentHeightToClose = this.contentHeight;
+    },
+
     handleResizeClick() {
       const { contentHeight, contentHeightMax } = this;
 
@@ -114,12 +169,22 @@ export default {
 
     stopResizing() {
       this.isResizing = false;
+
+      if (this.contentHeight < this.contentHeightToClose) {
+        this.resizeHeightWithTransition(0);
+      }
     },
 
     resizeHeightWithTransition(height) {
       this.resizeTransition = 'height ease-in-out 0.3s';
       this.contentHeight = height;
     },
+
+    scrollContentToBottom() {
+      const { resizableBarContentScroll } = this.$refs;
+      resizableBarContentScroll.scrollTop =
+        resizableBarContentScroll.scrollHeight;
+    },
   },
 
   watch: {
@@ -156,9 +221,37 @@ $insightsLayoutPadding: ($unnnic-spacing-sm * 2);
       #ffffff00 2%,
       $unnnic-color-background-white 98%
     );
+
+    animation-duration: 0.3s;
+    animation-fill-mode: forwards;
+    animation-name: disappear;
+
+    &.show {
+      animation-name: appear;
+    }
+
+    @keyframes appear {
+      from {
+        opacity: 0;
+      }
+      to {
+        opacity: 1;
+      }
+    }
+
+    @keyframes disappear {
+      from {
+        opacity: 1;
+      }
+      to {
+        opacity: 0;
+      }
+    }
   }
 
   &__handler {
+    padding: $unnnic-spacing-nano 0;
+
     display: flex;
     align-items: center;
 

From c8c2234d709761a935ed093c75caa96de5f63323 Mon Sep 17 00:00:00 2001
From: aldemylla <aldemylla@gmail.com>
Date: Fri, 12 Apr 2024 10:24:30 -0300
Subject: [PATCH 12/12] fix: ResizableBar state persistence when changing views

---
 package.json                                  |   2 +-
 src/App.vue                                   |  12 +-
 .../dashboards/Dashboard/FlowTrigger.vue      | 230 ++++----
 src/views/dashboards/Dashboard/index.vue      | 554 +++++++++---------
 src/views/dashboards/Home/index.vue           |  86 ++-
 src/views/insights/Home/index.vue             | 102 ++--
 yarn.lock                                     |   8 +-
 7 files changed, 499 insertions(+), 495 deletions(-)

diff --git a/package.json b/package.json
index b57f3e06..0375f99c 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,7 @@
     "format": "yarn lint --fix"
   },
   "dependencies": {
-    "@weni/unnnic-system": "2.0.0-beta.4",
+    "@weni/unnnic-system": "2.0.0-beta.8",
     "apexcharts": "^3.45.2",
     "axios": "^1.6.8",
     "vue": "^3.3.11",
diff --git a/src/App.vue b/src/App.vue
index 80b76358..bda3a827 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,9 +1,19 @@
 <template>
   <div id="app">
-    <RouterView />
+    <InsightsLayout ref="insights-layout">
+      <RouterView />
+    </InsightsLayout>
   </div>
 </template>
 
+<script>
+import InsightsLayout from '@/layouts/InsightsLayout/index.vue';
+
+export default {
+  components: { InsightsLayout },
+};
+</script>
+
 <style lang="scss" scoped>
 #app {
   height: 100%;
diff --git a/src/views/dashboards/Dashboard/FlowTrigger.vue b/src/views/dashboards/Dashboard/FlowTrigger.vue
index 99844e08..146e15a6 100644
--- a/src/views/dashboards/Dashboard/FlowTrigger.vue
+++ b/src/views/dashboards/Dashboard/FlowTrigger.vue
@@ -1,138 +1,144 @@
 <template>
-  <InsightsLayout ref="insights-layout">
-    <header class="dashboard__header">
-      <UnnnicBreadcrumb
-        :crumbs="breadcrumb"
-        @crumbClick="handleCrumbClick"
+  <header class="dashboard__header">
+    <UnnnicBreadcrumb
+      :crumbs="breadcrumb"
+      @crumbClick="handleCrumbClick"
+    />
+    <section class="dashboard__subheader">
+      <UnnnicIcon
+        icon="arrow_back"
+        size="lg"
+        scheme="neutral-black"
+        clickable
+        @click="goToDashboards"
       />
-      <section class="dashboard__subheader">
-        <UnnnicIcon
-          icon="arrow_back"
-          size="lg"
-          scheme="neutral-black"
-          clickable
-          @click="goToDashboards"
-        />
-        <section class="dashboard__subheader-description">
-          <h1 class="dashboard__title">{{ dashboardTitle }}</h1>
-          <p class="dashboard__description">Nome do projeto</p>
-        </section>
-        <UnnnicIcon
-          icon="close"
-          size="md"
-          scheme="neutral-black"
-          clickable
-          @click="goToInsights"
-        />
+      <section class="dashboard__subheader-description">
+        <h1 class="dashboard__title">{{ dashboardTitle }}</h1>
+        <p class="dashboard__description">Nome do projeto</p>
       </section>
-      <section class="dashboard__buttons">
-        <section class="dashboard__buttons-one">
+      <UnnnicIcon
+        icon="close"
+        size="md"
+        scheme="neutral-black"
+        clickable
+        @click="goToInsights"
+      />
+    </section>
+    <section class="dashboard__buttons">
+      <section class="dashboard__buttons-one">
+        <button class="dashboard__button">
+          <UnnnicIcon
+            icon="calendar_month"
+            size="md"
+            clickable
+          />
+          <p class="dashboard__button-title">Hoje</p>
+          <UnnnicIcon
+            icon="expand_more"
+            size="md"
+            clickable
+          />
+        </button>
+        <button class="dashboard__button">
+          <UnnnicIcon
+            icon="filter_alt"
+            size="md"
+            clickable
+          />
+          <p class="dashboard__button-title">Filtros</p>
+        </button>
+      </section>
+      <UnnnicDropdown>
+        <template #trigger>
           <button class="dashboard__button">
-            <UnnnicIcon
-              icon="calendar_month"
-              size="md"
-              clickable
-            />
-            <p class="dashboard__button-title">Hoje</p>
+            <p class="dashboard__button-title">Exportar</p>
             <UnnnicIcon
               icon="expand_more"
               size="md"
               clickable
             />
           </button>
-          <button class="dashboard__button">
-            <UnnnicIcon
-              icon="filter_alt"
-              size="md"
-              clickable
-            />
-            <p class="dashboard__button-title">Filtros</p>
-          </button>
-        </section>
-        <UnnnicDropdown>
-          <template #trigger>
-            <button class="dashboard__button">
-              <p class="dashboard__button-title">Exportar</p>
-              <UnnnicIcon
-                icon="expand_more"
-                size="md"
-                clickable
-              />
-            </button>
-          </template>
+        </template>
 
-          <UnnnicDropdownItem>
-            <p @click="downloadCSV" class="dashboard__dropdown-item">Exportar em CSV</p>
-          </UnnnicDropdownItem>
-          <UnnnicDropdownItem>
-            <p @click="downloadPDF" class="dashboard__dropdown-item">Exportar em PDF</p>
-          </UnnnicDropdownItem>
-        </UnnnicDropdown>
-      </section>
-    </header>
-    <section class="dashboard__widgets">
-      <section class="dashboard__widgets-chart">
-        <h1 class="dashboard__widgets-chart-title">Fluxos</h1>
-        <BarChart
-          :chartData="chartData"
-          :height="chartHeight"
-          :width="chartWidth"
-        />
-      </section>
-      <section>
-        <article class="dashboard__widgets-insight">
-          <h2 class="dashboard__widgets-insight-title">
-            <UnnnicAvatarIcon
-              icon="emoji_objects"
-              scheme="neutral-dark"
-            />
-            Insight
-          </h2>
-          <p class="dashboard__widgets-insight-description">
-            Você sabia que seus fluxos com o tom de voz mais amigável possuem
-            uma taxa de 50% a mais de respostas? Confira aqui quais são eles
+        <UnnnicDropdownItem>
+          <p
+            @click="downloadCSV"
+            class="dashboard__dropdown-item"
+          >
+            Exportar em CSV
           </p>
-        </article>
-      </section>
-      <section>
-        <article class="dashboard__widgets-card">
-          <h4 class="dashboard__widgets-card-title">500</h4>
-          <p class="dashboard__widgets-card-description">Arquivados</p>
-        </article>
-      </section>
-      <section>
-        <article class="dashboard__widgets-card">
-          <h4 class="dashboard__widgets-card-title">5000</h4>
-          <p class="dashboard__widgets-card-description">Fluxos disparados</p>
-        </article>
-      </section>
-      <section>
-        <article class="dashboard__widgets-card">
-          <h4 class="dashboard__widgets-card-title">2100</h4>
-          <p class="dashboard__widgets-card-description">
-            Disparos pelo Weni Chats
+        </UnnnicDropdownItem>
+        <UnnnicDropdownItem>
+          <p
+            @click="downloadPDF"
+            class="dashboard__dropdown-item"
+          >
+            Exportar em PDF
           </p>
-        </article>
-      </section>
-      <section>
-        <article class="dashboard__widgets-card">
-          <h4 class="dashboard__widgets-card-title">20</h4>
-          <p class="dashboard__widgets-card-description">Falhas</p>
-        </article>
-      </section>
+        </UnnnicDropdownItem>
+      </UnnnicDropdown>
+    </section>
+  </header>
+  <section class="dashboard__widgets">
+    <section class="dashboard__widgets-chart">
+      <h1 class="dashboard__widgets-chart-title">Fluxos</h1>
+      <BarChart
+        :chartData="chartData"
+        :height="chartHeight"
+        :width="chartWidth"
+      />
+    </section>
+    <section>
+      <article class="dashboard__widgets-insight">
+        <h2 class="dashboard__widgets-insight-title">
+          <UnnnicAvatarIcon
+            icon="emoji_objects"
+            scheme="neutral-dark"
+          />
+          Insight
+        </h2>
+        <p class="dashboard__widgets-insight-description">
+          Você sabia que seus fluxos com o tom de voz mais amigável possuem uma
+          taxa de 50% a mais de respostas? Confira aqui quais são eles
+        </p>
+      </article>
+    </section>
+    <section>
+      <article class="dashboard__widgets-card">
+        <h4 class="dashboard__widgets-card-title">500</h4>
+        <p class="dashboard__widgets-card-description">Arquivados</p>
+      </article>
+    </section>
+    <section>
+      <article class="dashboard__widgets-card">
+        <h4 class="dashboard__widgets-card-title">5000</h4>
+        <p class="dashboard__widgets-card-description">Fluxos disparados</p>
+      </article>
+    </section>
+    <section>
+      <article class="dashboard__widgets-card">
+        <h4 class="dashboard__widgets-card-title">2100</h4>
+        <p class="dashboard__widgets-card-description">
+          Disparos pelo Weni Chats
+        </p>
+      </article>
+    </section>
+    <section>
+      <article class="dashboard__widgets-card">
+        <h4 class="dashboard__widgets-card-title">20</h4>
+        <p class="dashboard__widgets-card-description">Falhas</p>
+      </article>
     </section>
-  </InsightsLayout>
+  </section>
 </template>
 
 <script>
-import InsightsLayout from '@/layouts/InsightsLayout/index.vue';
 import BarChart from '@/components/BarChart.vue';
 import chartData from '@/mocks/barChartData.json';
 import ChatsData from '@/mocks/chats.json';
 export default {
   name: 'FlowTriggerView',
   components: {
-    InsightsLayout,
     BarChart,
   },
   data: () => ({
diff --git a/src/views/dashboards/Dashboard/index.vue b/src/views/dashboards/Dashboard/index.vue
index 8d8ce172..95c64b80 100644
--- a/src/views/dashboards/Dashboard/index.vue
+++ b/src/views/dashboards/Dashboard/index.vue
@@ -1,279 +1,275 @@
-<template>
-  <InsightsLayout ref="insights-layout">
-    <header class="dashboard__header">
-      <UnnnicBreadcrumb
-        :crumbs="breadcrumb"
-        @crumbClick="handleCrumbClick"
-      />
-      <section class="dashboard__subheader">
-        <UnnnicIcon
-          icon="arrow_back"
-          size="lg"
-          scheme="neutral-black"
-          clickable
-          @click="goToDashboards"
-        />
-        <section class="dashboard__subheader-description">
-          <h1 class="dashboard__title">{{ dashboardTitle }}</h1>
-          <p class="dashboard__description">Nome do projeto</p>
-        </section>
-        <UnnnicIcon
-          icon="close"
-          size="md"
-          scheme="neutral-black"
-          clickable
-          @click="goToDashboards"
-        />
-      </section>
-      <section class="dashboard__buttons">
-        <section class="dashboard__buttons-one">
-          <button class="dashboard__button">
-            <UnnnicIcon
-              icon="calendar_month"
-              size="md"
-              clickable
-            />
-            <span class="dashboard__button-title">Hoje</span>
-            <UnnnicIcon
-              icon="expand_more"
-              size="md"
-              clickable
-            />
-          </button>
-          <button class="dashboard__button">
-            <UnnnicIcon
-              icon="filter_alt"
-              size="md"
-              clickable
-            />
-            <span class="dashboard__button-title">Filtros</span>
-          </button>
-        </section>
-        <button class="dashboard__button">
-          <span class="dashboard__button-title">Exportar</span>
-          <UnnnicIcon
-            icon="expand_more"
-            size="md"
-            clickable
-          />
-        </button>
-      </section>
-    </header>
-    <section
-      class="dashboard__widgets"
-      v-if="firstSection"
-    >
-      <section class="dashboard__widgets-cards">
-        <article
-          class="dashboard__widgets-card"
-          @click="showTable"
-          v-for="(card, index) in cards"
-          :key="index"
-        >
-          <h4 class="dashboard__widgets-card-title">{{ card.title }}</h4>
-          <p class="dashboard__widgets-card-description">
-            {{ card.description }}
-          </p>
-        </article>
-      </section>
-      <section class="dashboard__widgets-chart">
-        <ColumnCharts
-          :chartData="chartData"
-          :height="chartHeight"
-          :width="chartWidth"
-        />
-      </section>
-      <section class="dashboard__widgets-agent">
-        <AgentChats />
-      </section>
-    </section>
-    <section
-      v-else
-      class="dashboard__table"
-    >
-      <TableChats :data="chatsData" />
-    </section>
-  </InsightsLayout>
-</template>
-
-<script>
-import InsightsLayout from '@/layouts/InsightsLayout/index.vue';
-import ColumnCharts from '@/components/ColumnCharts.vue';
-import AgentChats from '@/components/AgentChats.vue';
-import TableChats from '@/components/TableChats.vue';
-import dashboardData from '@/mocks/dashboardData.json';
-import chartData from '@/mocks/chartData.json';
-import ChatsData from '@/mocks/chats.json';
-
-export default {
-  name: 'DashboardView',
-
-  components: {
-    InsightsLayout,
-    ColumnCharts,
-    AgentChats,
-    TableChats,
-  },
-
-  data: () => ({
-    dashboardTitle: '',
-    cards: dashboardData,
-    chartData: chartData,
-    chatsData: ChatsData,
-    firstSection: true,
-    chartHeight: '100%',
-    chartWidth: '100%',
-    breadcrumb: [
-      {
-        name: 'Insights',
-        path: '/insights',
-      },
-      {
-        name: 'Dashboards',
-        path: '/dashboards',
-      },
-      {
-        name: '',
-        path: '',
-      },
-    ],
-  }),
-  methods: {
-    goToDashboards() {
-      this.$router.push({ name: 'dashboards' });
-    },
-    handleCrumbClick(crumb) {
-      this.$router.push(crumb.path);
-    },
-    showTable() {
-      this.firstSection = !this.firstSection;
-    },
-  },
-  mounted() {
-    const cardTitle = this.$route.query.title;
-    const cardId = this.$route.params.id;
-    const cardPath = `/dashboards/${cardId}`;
-    this.dashboardTitle = cardTitle;
-
-    this.breadcrumb[2].name = cardTitle;
-    this.breadcrumb[2].path = cardPath;
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.dashboard {
-  &__header {
-    display: flex;
-    flex-direction: column;
-    gap: $unnnic-spacing-sm;
-  }
-  &__subheader {
-    display: flex;
-    align-items: flex-start;
-    align-self: stretch;
-    gap: $unnnic-spacing-ant;
-  }
-  &__subheader-description {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: flex-start;
-    gap: $unnnic-spacing-nano;
-  }
-  &__title {
-    font-size: $unnnic-font-size-title-md;
-    font-weight: $unnnic-font-weight-bold;
-    color: $unnnic-color-neutral-darkest;
-  }
-  &__separator {
-    border: 1px solid $unnnic-color-neutral-soft;
-    border-radius: $unnnic-spacing-nano;
-    height: 1px;
-  }
-  &__templates-title {
-    margin-top: $unnnic-spacing-sm;
-  }
-  &__buttons {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: $unnnic-spacing-xs;
-    place-content: space-between;
-  }
-  &__buttons-one {
-    display: flex;
-    flex-direction: row;
-    gap: $unnnic-spacing-xs;
-  }
-  &__button {
-    background-color: $unnnic-color-neutral-lightest;
-    border: none;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: $unnnic-spacing-xs;
-    padding: $unnnic-spacing-xs;
-    cursor: pointer;
-  }
-  &__button-title {
-    font-size: $unnnic-font-size-body-lg;
-  }
-  &__widgets {
-    height: 100%;
-
-    margin-top: $unnnic-spacing-sm;
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
-    grid-template-rows: repeat(3, 1fr);
-    gap: $unnnic-spacing-md;
-    grid-template-areas:
-      'cards cards graph'
-      'cards cards agents'
-      'cards cards agents';
-  }
-  &__widgets-cards {
-    grid-area: cards;
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    grid-template-rows: repeat(3, 1fr);
-    gap: $unnnic-spacing-sm;
-    grid-column: span 2;
-  }
-  &__widgets-chart {
-    height: 18vh;
-    grid-area: graph;
-  }
-
-  &__widgets-agent {
-    grid-area: agents;
-  }
-  &__widgets-card {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    text-align: right;
-    justify-content: center;
-    background-color: $unnnic-color-neutral-lightest;
-    gap: $unnnic-spacing-sm;
-    padding: $unnnic-spacing-md;
-    border-radius: $unnnic-border-radius-sm;
-    cursor: pointer;
-  }
-
-  &__widgets-card-title {
-    color: $unnnic-color-neutral-darkest;
-    font-size: $unnnic-font-size-h4;
-    font-weight: 700;
-    font-family: $unnnic-font-family-primary;
-  }
-  &__widgets-card-description {
-    color: $unnnic-color-neutral-darkest;
-    font-size: $unnnic-font-size-body-lg;
-  }
-  &__table {
-    margin-top: $unnnic-spacing-sm;
-  }
-}
-</style>
+<template>
+  <header class="dashboard__header">
+    <UnnnicBreadcrumb
+      :crumbs="breadcrumb"
+      @crumbClick="handleCrumbClick"
+    />
+    <section class="dashboard__subheader">
+      <UnnnicIcon
+        icon="arrow_back"
+        size="lg"
+        scheme="neutral-black"
+        clickable
+        @click="goToDashboards"
+      />
+      <section class="dashboard__subheader-description">
+        <h1 class="dashboard__title">{{ dashboardTitle }}</h1>
+        <p class="dashboard__description">Nome do projeto</p>
+      </section>
+      <UnnnicIcon
+        icon="close"
+        size="md"
+        scheme="neutral-black"
+        clickable
+        @click="goToDashboards"
+      />
+    </section>
+    <section class="dashboard__buttons">
+      <section class="dashboard__buttons-one">
+        <button class="dashboard__button">
+          <UnnnicIcon
+            icon="calendar_month"
+            size="md"
+            clickable
+          />
+          <span class="dashboard__button-title">Hoje</span>
+          <UnnnicIcon
+            icon="expand_more"
+            size="md"
+            clickable
+          />
+        </button>
+        <button class="dashboard__button">
+          <UnnnicIcon
+            icon="filter_alt"
+            size="md"
+            clickable
+          />
+          <span class="dashboard__button-title">Filtros</span>
+        </button>
+      </section>
+      <button class="dashboard__button">
+        <span class="dashboard__button-title">Exportar</span>
+        <UnnnicIcon
+          icon="expand_more"
+          size="md"
+          clickable
+        />
+      </button>
+    </section>
+  </header>
+  <section
+    class="dashboard__widgets"
+    v-if="firstSection"
+  >
+    <section class="dashboard__widgets-cards">
+      <article
+        class="dashboard__widgets-card"
+        @click="showTable"
+        v-for="(card, index) in cards"
+        :key="index"
+      >
+        <h4 class="dashboard__widgets-card-title">{{ card.title }}</h4>
+        <p class="dashboard__widgets-card-description">
+          {{ card.description }}
+        </p>
+      </article>
+    </section>
+    <section class="dashboard__widgets-chart">
+      <ColumnCharts
+        :chartData="chartData"
+        :height="chartHeight"
+        :width="chartWidth"
+      />
+    </section>
+    <section class="dashboard__widgets-agent">
+      <AgentChats />
+    </section>
+  </section>
+  <section
+    v-else
+    class="dashboard__table"
+  >
+    <TableChats :data="chatsData" />
+  </section>
+</template>
+
+<script>
+import ColumnCharts from '@/components/ColumnCharts.vue';
+import AgentChats from '@/components/AgentChats.vue';
+import TableChats from '@/components/TableChats.vue';
+import dashboardData from '@/mocks/dashboardData.json';
+import chartData from '@/mocks/chartData.json';
+import ChatsData from '@/mocks/chats.json';
+
+export default {
+  name: 'DashboardView',
+
+  components: {
+    ColumnCharts,
+    AgentChats,
+    TableChats,
+  },
+
+  data: () => ({
+    dashboardTitle: '',
+    cards: dashboardData,
+    chartData: chartData,
+    chatsData: ChatsData,
+    firstSection: true,
+    chartHeight: '100%',
+    chartWidth: '100%',
+    breadcrumb: [
+      {
+        name: 'Insights',
+        path: '/insights',
+      },
+      {
+        name: 'Dashboards',
+        path: '/dashboards',
+      },
+      {
+        name: '',
+        path: '',
+      },
+    ],
+  }),
+  methods: {
+    goToDashboards() {
+      this.$router.push({ name: 'dashboards' });
+    },
+    handleCrumbClick(crumb) {
+      this.$router.push(crumb.path);
+    },
+    showTable() {
+      this.firstSection = !this.firstSection;
+    },
+  },
+  mounted() {
+    const cardTitle = this.$route.query.title;
+    const cardId = this.$route.params.id;
+    const cardPath = `/dashboards/${cardId}`;
+    this.dashboardTitle = cardTitle;
+
+    this.breadcrumb[2].name = cardTitle;
+    this.breadcrumb[2].path = cardPath;
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.dashboard {
+  &__header {
+    display: flex;
+    flex-direction: column;
+    gap: $unnnic-spacing-sm;
+  }
+  &__subheader {
+    display: flex;
+    align-items: flex-start;
+    align-self: stretch;
+    gap: $unnnic-spacing-ant;
+  }
+  &__subheader-description {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    gap: $unnnic-spacing-nano;
+  }
+  &__title {
+    font-size: $unnnic-font-size-title-md;
+    font-weight: $unnnic-font-weight-bold;
+    color: $unnnic-color-neutral-darkest;
+  }
+  &__separator {
+    border: 1px solid $unnnic-color-neutral-soft;
+    border-radius: $unnnic-spacing-nano;
+    height: 1px;
+  }
+  &__templates-title {
+    margin-top: $unnnic-spacing-sm;
+  }
+  &__buttons {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: $unnnic-spacing-xs;
+    place-content: space-between;
+  }
+  &__buttons-one {
+    display: flex;
+    flex-direction: row;
+    gap: $unnnic-spacing-xs;
+  }
+  &__button {
+    background-color: $unnnic-color-neutral-lightest;
+    border: none;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: $unnnic-spacing-xs;
+    padding: $unnnic-spacing-xs;
+    cursor: pointer;
+  }
+  &__button-title {
+    font-size: $unnnic-font-size-body-lg;
+  }
+  &__widgets {
+    height: 100%;
+
+    margin-top: $unnnic-spacing-sm;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+    grid-template-rows: repeat(3, 1fr);
+    gap: $unnnic-spacing-md;
+    grid-template-areas:
+      'cards cards graph'
+      'cards cards agents'
+      'cards cards agents';
+  }
+  &__widgets-cards {
+    grid-area: cards;
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: repeat(3, 1fr);
+    gap: $unnnic-spacing-sm;
+    grid-column: span 2;
+  }
+  &__widgets-chart {
+    height: 18vh;
+    grid-area: graph;
+  }
+
+  &__widgets-agent {
+    grid-area: agents;
+  }
+  &__widgets-card {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    text-align: right;
+    justify-content: center;
+    background-color: $unnnic-color-neutral-lightest;
+    gap: $unnnic-spacing-sm;
+    padding: $unnnic-spacing-md;
+    border-radius: $unnnic-border-radius-sm;
+    cursor: pointer;
+  }
+
+  &__widgets-card-title {
+    color: $unnnic-color-neutral-darkest;
+    font-size: $unnnic-font-size-h4;
+    font-weight: 700;
+    font-family: $unnnic-font-family-primary;
+  }
+  &__widgets-card-description {
+    color: $unnnic-color-neutral-darkest;
+    font-size: $unnnic-font-size-body-lg;
+  }
+  &__table {
+    margin-top: $unnnic-spacing-sm;
+  }
+}
+</style>
diff --git a/src/views/dashboards/Home/index.vue b/src/views/dashboards/Home/index.vue
index 8c8f81fc..1268aa97 100644
--- a/src/views/dashboards/Home/index.vue
+++ b/src/views/dashboards/Home/index.vue
@@ -1,54 +1,51 @@
 <template>
-  <InsightsLayout ref="insights-layout">
-    <header class="dashboards__header">
-      <UnnnicBreadcrumb
-        :crumbs="breadcrumb"
-        @crumbClick="handleCrumbClick"
+  <header class="dashboards__header">
+    <UnnnicBreadcrumb
+      :crumbs="breadcrumb"
+      @crumbClick="handleCrumbClick"
+    />
+    <section class="dashboards__subheader">
+      <UnnnicIcon
+        icon="arrow_back"
+        size="lg"
+        scheme="neutral-black"
+        clickable
+        @click="goToInsights"
       />
-      <section class="dashboards__subheader">
-        <UnnnicIcon
-          icon="arrow_back"
-          size="lg"
-          scheme="neutral-black"
-          clickable
-          @click="goToInsights"
-        />
-        <section class="dashboards__subheader-description">
-          <h1 class="dashboards__title">Nome do projeto</h1>
-          <p class="dashboards__description">Dashboards do projeto</p>
-        </section>
-        <UnnnicIcon
-          icon="close"
-          size="md"
-          scheme="neutral-black"
-          clickable
-          @click="goToInsights"
-        />
+      <section class="dashboards__subheader-description">
+        <h1 class="dashboards__title">Nome do projeto</h1>
+        <p class="dashboards__description">Dashboards do projeto</p>
       </section>
-    </header>
-    <hr class="dashboards__separator" />
-    <section>
-      <h1 class="dashboards__templates-title">Templates de Dashboards</h1>
-    </section>
-    <section class="dashboards__cards">
-      <DashboardCard
-        v-for="(card, index) in cards"
-        :key="index"
-        @click="goToCardDetails(card.id, card.title)"
-      >
-        <template #title>
-          {{ card.title }}
-        </template>
-      </DashboardCard>
-      <DashboardCard @click="goToFlowTrigger">
-        <template #title> Disparo de fluxos </template>
-      </DashboardCard>
+      <UnnnicIcon
+        icon="close"
+        size="md"
+        scheme="neutral-black"
+        clickable
+        @click="goToInsights"
+      />
     </section>
-  </InsightsLayout>
+  </header>
+  <hr class="dashboards__separator" />
+  <section>
+    <h1 class="dashboards__templates-title">Templates de Dashboards</h1>
+  </section>
+  <section class="dashboards__cards">
+    <DashboardCard
+      v-for="(card, index) in cards"
+      :key="index"
+      @click="goToCardDetails(card.id, card.title)"
+    >
+      <template #title>
+        {{ card.title }}
+      </template>
+    </DashboardCard>
+    <DashboardCard @click="goToFlowTrigger">
+      <template #title> Disparo de fluxos </template>
+    </DashboardCard>
+  </section>
 </template>
 
 <script>
-import InsightsLayout from '@/layouts/InsightsLayout/index.vue';
 import DashboardCard from '@/components/DashboardsCard.vue';
 import cardsData from '@/mocks/dashboards.json';
 
@@ -56,7 +53,6 @@ export default {
   name: 'DashboardsView',
 
   components: {
-    InsightsLayout,
     DashboardCard,
   },
 
diff --git a/src/views/insights/Home/index.vue b/src/views/insights/Home/index.vue
index 1bec5567..339f8c0f 100644
--- a/src/views/insights/Home/index.vue
+++ b/src/views/insights/Home/index.vue
@@ -1,63 +1,60 @@
 <template>
-  <InsightsLayout ref="insights-layout">
-    <h1 class="insights__title">Insights</h1>
-    <div class="buttons">
-      <UnnnicButton
-        text="Dashboards"
-        iconLeft="bar_chart_4_bars"
-        type="tertiary"
-        size="small"
-        @click="goToDashboards"
-      />
-      <UnnnicInputDatePicker
-        v-model="filterDate"
-        size="sm"
-      />
+  <h1 class="insights__title">Insights</h1>
+  <div class="buttons">
+    <UnnnicButton
+      text="Dashboards"
+      iconLeft="bar_chart_4_bars"
+      type="tertiary"
+      size="small"
+      @click="goToDashboards"
+    />
+    <UnnnicInputDatePicker
+      v-model="filterDate"
+      size="sm"
+    />
+  </div>
+  <section>
+    <ColumnCharts
+      :chartData="chartData"
+      :height="chartHeight"
+      :width="chartWidth"
+      v-if="isChartVisible"
+    />
+  </section>
+  <div class="cards">
+    <div class="card">
+      <p class="card__title">2150</p>
+      <p class="card__description">Mensagens trocadas via bot</p>
     </div>
-    <section>
-      <ColumnCharts
-        :chartData="chartData"
-        :height="chartHeight"
-        :width="chartWidth"
-        v-if="isChartVisible"
-      />
-    </section>
-    <div class="cards">
-      <div class="card">
-        <p class="card__title">2150</p>
-        <p class="card__description">Mensagens trocadas via bot</p>
-      </div>
-      <div
-        class="card card--cursor"
-        @click="goToHumanService"
-      >
-        <p class="card__title">503</p>
-        <p class="card__description">Atendimentos no Weni Chats</p>
-      </div>
-      <div class="card">
-        <p class="card__title">4.3</p>
-        <p class="card__description">NPS</p>
-      </div>
-      <div class="card">
-        <p class="card__title">7000</p>
-        <p class="card__description">Runs de fluxos</p>
-      </div>
-      <div class="card">
-        <p class="card__title">1500</p>
-        <p class="card__description">Contatos ativos</p>
-      </div>
-      <div class="card">
-        <p class="card__title">129</p>
-        <p class="card__description">Erros</p>
-      </div>
+    <div
+      class="card card--cursor"
+      @click="goToHumanService"
+    >
+      <p class="card__title">503</p>
+      <p class="card__description">Atendimentos no Weni Chats</p>
     </div>
-  </InsightsLayout>
+    <div class="card">
+      <p class="card__title">4.3</p>
+      <p class="card__description">NPS</p>
+    </div>
+    <div class="card">
+      <p class="card__title">7000</p>
+      <p class="card__description">Runs de fluxos</p>
+    </div>
+    <div class="card">
+      <p class="card__title">1500</p>
+      <p class="card__description">Contatos ativos</p>
+    </div>
+    <div class="card">
+      <p class="card__title">129</p>
+      <p class="card__description">Erros</p>
+    </div>
+  </div>
 </template>
 
 <script>
 import { mapState, mapActions } from 'vuex';
 import moment from 'moment';
-import InsightsLayout from '@/layouts/InsightsLayout/index.vue';
 import ColumnCharts from '@/components/ColumnCharts.vue';
 import chartData from '@/mocks/chartData.json';
 
@@ -65,7 +62,6 @@ export default {
   name: 'HomeView',
 
   components: {
-    InsightsLayout,
     ColumnCharts,
   },
 
diff --git a/yarn.lock b/yarn.lock
index dbe18ec3..2808684f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -821,10 +821,10 @@
   resolved "https://registry.yarnpkg.com/@weni/eslint-config/-/eslint-config-1.0.2.tgz#fc8d16449130888eabfca0a2e6a506043d8018fb"
   integrity sha512-q4iLOGP29a8rk9Sprs4mpFAn0fRnsK+lGOY1NeUMYzbJ1REFit0p8baz4aJCiJTO55ZlGym3HzcwL/jYm7u/7g==
 
-"@weni/unnnic-system@2.0.0-beta.4":
-  version "2.0.0-beta.4"
-  resolved "https://registry.yarnpkg.com/@weni/unnnic-system/-/unnnic-system-2.0.0-beta.4.tgz#81403a2397d1b0a0d48b3435fe8f76bd4ade127c"
-  integrity sha512-SvQKPmouY++IKdrD1KPP5z+ybWuKXIyuiOIweuwFT5stYzaBN4tzo4vp2QDbNFoYpekel2IAjNlbf1ZG/P16tg==
+"@weni/unnnic-system@2.0.0-beta.8":
+  version "2.0.0-beta.8"
+  resolved "https://registry.yarnpkg.com/@weni/unnnic-system/-/unnnic-system-2.0.0-beta.8.tgz#a5e8920825dc6324caa76b6cce8a3a2f2b7a72bd"
+  integrity sha512-DJu+cSJBE3Oq5ESl7BbShnWAMWhtBVL+owZdsu7IGbpe7qFiEOO0mwBqf0IpJpN6i8totIjbb5rLA58A0tVuPw==
   dependencies:
     "@vueuse/components" "^10.4.1"
     lodash "^4.17.21"