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 1/5] 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 2/5] 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 3/5] 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 4/5] 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 5/5] 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;