From 292bb01232d2406b53c3cefbcb0df93261d37720 Mon Sep 17 00:00:00 2001
From: acondal <annac@empathy.co>
Date: Mon, 16 Oct 2023 10:37:01 +0200
Subject: [PATCH 01/20] feat: selected Filters in myHistory

EMP-2293
---
 package-lock.json                             | 55 ++++++++++---------
 package.json                                  | 14 ++---
 .../my-history/custom-my-history.vue          | 10 ++++
 3 files changed, 45 insertions(+), 34 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index b2d8417d..f0a95b65 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,13 +9,13 @@
       "version": "1.0.0",
       "license": "Apache-2.0",
       "dependencies": {
-        "@empathyco/x-adapter": "^8.0.0-alpha.33",
-        "@empathyco/x-adapter-platform": "^1.0.0-alpha.83",
-        "@empathyco/x-archetype-utils": "^1.0.0-alpha.3",
-        "@empathyco/x-components": "^3.0.0-alpha.414",
-        "@empathyco/x-deep-merge": "^1.3.0-alpha.29",
-        "@empathyco/x-types": "^10.0.0-alpha.72",
-        "@empathyco/x-utils": "^1.0.0-alpha.20",
+        "@empathyco/x-adapter": "^8.0.0-alpha.34",
+        "@empathyco/x-adapter-platform": "^1.0.0-alpha.88",
+        "@empathyco/x-archetype-utils": "^1.0.0-alpha.4",
+        "@empathyco/x-components": "^3.0.0-alpha.422",
+        "@empathyco/x-deep-merge": "^1.3.0-alpha.34",
+        "@empathyco/x-types": "^10.0.0-alpha.75",
+        "@empathyco/x-utils": "^1.0.0-alpha.23",
         "tslib": "~2.4.1",
         "vue": "~2.7.14",
         "vue-class-component": "~7.2.6",
@@ -2089,12 +2089,12 @@
       }
     },
     "node_modules/@empathyco/x-adapter-platform": {
-      "version": "1.0.0-alpha.85",
-      "resolved": "https://registry.npmjs.org/@empathyco/x-adapter-platform/-/x-adapter-platform-1.0.0-alpha.85.tgz",
-      "integrity": "sha512-RrXFWUgqSDwAzlvYLCHHPmKgKkQKNKwmptvoiHXd3CAX0Jab6JCTG+c9t2MmDYV9hCAxDrjbFEtRMwX1M2sM5w==",
+      "version": "1.0.0-alpha.88",
+      "resolved": "https://registry.npmjs.org/@empathyco/x-adapter-platform/-/x-adapter-platform-1.0.0-alpha.88.tgz",
+      "integrity": "sha512-efA/kQvy+k+zdczN0bwUbxzxNb1rl+0EU1Wshf74ihbpWIPiQT5cOTNCvj1ZuvK3UmG6uzVsioiCrlO7Yn/Aig==",
       "dependencies": {
         "@empathyco/x-adapter": "^8.0.0-alpha.34",
-        "@empathyco/x-types": "^10.0.0-alpha.73",
+        "@empathyco/x-types": "^10.0.0-alpha.75",
         "@empathyco/x-utils": "^1.0.0-alpha.23",
         "tslib": "~2.5.0"
       },
@@ -2125,11 +2125,11 @@
       "integrity": "sha512-mSxlJJwl3BMEQCUNnxXBU9jP4JBktcEGhURcPR6VQVlnP0FdDEsIaz0C35dXNGLyRfrATNofF0F5p2KPxQgB+w=="
     },
     "node_modules/@empathyco/x-archetype-utils": {
-      "version": "1.0.0-alpha.3",
-      "resolved": "https://registry.npmjs.org/@empathyco/x-archetype-utils/-/x-archetype-utils-1.0.0-alpha.3.tgz",
-      "integrity": "sha512-M3INzSFM0SKtwEk0P6gCRKuTQtg+KgPcLkqJAq9NWS0axiuwz7dBwWDCimITTN1550Fcofcz3SCURwthlYI33w==",
+      "version": "1.0.0-alpha.4",
+      "resolved": "https://registry.npmjs.org/@empathyco/x-archetype-utils/-/x-archetype-utils-1.0.0-alpha.4.tgz",
+      "integrity": "sha512-Hn7KcE9zWj6JSOex8WQqze0Q9L4+6X293I3EMOU6Xmng5LKoQY/UpgnF7Fp0nEJSp6SfJvZ9YehHHWhLrrFd3Q==",
       "dependencies": {
-        "@empathyco/x-deep-merge": "^2.0.0-alpha.2",
+        "@empathyco/x-deep-merge": "^2.0.0-alpha.3",
         "tslib": "~2.5.0",
         "vue-i18n": "~8.28.2"
       },
@@ -2142,11 +2142,11 @@
       }
     },
     "node_modules/@empathyco/x-archetype-utils/node_modules/@empathyco/x-deep-merge": {
-      "version": "2.0.0-alpha.2",
-      "resolved": "https://registry.npmjs.org/@empathyco/x-deep-merge/-/x-deep-merge-2.0.0-alpha.2.tgz",
-      "integrity": "sha512-C1/jZ/70oceI9Uxc9tGv692AKuzgl/BAFE1lYN5T1ubgduexI+Z8JgHbV6FTZQBKyGrap3E/o32/5i04naieAQ==",
+      "version": "2.0.0-alpha.3",
+      "resolved": "https://registry.npmjs.org/@empathyco/x-deep-merge/-/x-deep-merge-2.0.0-alpha.3.tgz",
+      "integrity": "sha512-qvHvEVt3FoZXdlfxvEQExxF/q6F+wgTKdd9TIOxWUjZUlajrLdLXXWPnmBp5iEnz4Xzz4yxeHKdPRV1kv9aU2g==",
       "dependencies": {
-        "@empathyco/x-utils": "^1.0.0-alpha.22",
+        "@empathyco/x-utils": "^1.0.0-alpha.23",
         "tslib": "~2.5.0"
       },
       "engines": {
@@ -2183,17 +2183,17 @@
       "integrity": "sha512-mSxlJJwl3BMEQCUNnxXBU9jP4JBktcEGhURcPR6VQVlnP0FdDEsIaz0C35dXNGLyRfrATNofF0F5p2KPxQgB+w=="
     },
     "node_modules/@empathyco/x-components": {
-      "version": "3.0.0-alpha.414",
-      "resolved": "https://registry.npmjs.org/@empathyco/x-components/-/x-components-3.0.0-alpha.414.tgz",
-      "integrity": "sha512-STKDMja1Xe6LoIjHZ5thYIZNGa8+c+sV2f8Met/TFf6MjVPe16vjlSOlU1KDRv5ZMhc/IQl6F2t4EvZ4C9yS0w==",
+      "version": "3.0.0-alpha.422",
+      "resolved": "https://registry.npmjs.org/@empathyco/x-components/-/x-components-3.0.0-alpha.422.tgz",
+      "integrity": "sha512-prYfv/TVvJUTnbxrsembCqyhdfuVrlpGoEW0speP/9G2Xm2DzE+E5NMvugYkzNaVU+hkZHx3S2eRK5Z1TH8yoA==",
       "dependencies": {
         "@empathyco/x-adapter": "^8.0.0-alpha.34",
-        "@empathyco/x-adapter-platform": "^1.0.0-alpha.85",
+        "@empathyco/x-adapter-platform": "^1.0.0-alpha.88",
         "@empathyco/x-bus": "^1.0.0-alpha.4",
         "@empathyco/x-deep-merge": "^2.0.0-alpha.3",
         "@empathyco/x-logger": "^1.2.0-alpha.11",
         "@empathyco/x-storage-service": "^2.0.0-alpha.15",
-        "@empathyco/x-types": "^10.0.0-alpha.73",
+        "@empathyco/x-types": "^10.0.0-alpha.75",
         "@empathyco/x-utils": "^1.0.0-alpha.23",
         "@vue/devtools-api": "~6.5.0",
         "@vueuse/core": "~10.1.0",
@@ -2373,11 +2373,12 @@
       }
     },
     "node_modules/@empathyco/x-types": {
-      "version": "10.0.0-alpha.73",
-      "resolved": "https://registry.npmjs.org/@empathyco/x-types/-/x-types-10.0.0-alpha.73.tgz",
-      "integrity": "sha512-brIP6+ewUGG10gEGLVuokC7Q3A/pn8o+74gm7zbqrEA/+xAVEvCSAbBsJ3X6BobCYP7BMfMD1SVoQ9mkPeA2wg==",
+      "version": "10.0.0-alpha.75",
+      "resolved": "https://registry.npmjs.org/@empathyco/x-types/-/x-types-10.0.0-alpha.75.tgz",
+      "integrity": "sha512-JwTmYhIDu7wv82e7L5G2sbTloEd+KGXm2jNZlrwhg3NAS8XPRG7WAyGBXtWi106TAz7MW6p3hPclpwR4s9/cYg==",
       "dependencies": {
         "@empathyco/x-adapter": "^8.0.0-alpha.34",
+        "@empathyco/x-utils": "^1.0.0-alpha.23",
         "tslib": "~2.5.0"
       },
       "engines": {
diff --git a/package.json b/package.json
index fe91bb7d..6b2f76fe 100644
--- a/package.json
+++ b/package.json
@@ -29,13 +29,13 @@
     "prepare": "husky install"
   },
   "dependencies": {
-    "@empathyco/x-adapter": "^8.0.0-alpha.33",
-    "@empathyco/x-adapter-platform": "^1.0.0-alpha.83",
-    "@empathyco/x-archetype-utils": "^1.0.0-alpha.3",
-    "@empathyco/x-components": "^3.0.0-alpha.414",
-    "@empathyco/x-deep-merge": "^1.3.0-alpha.29",
-    "@empathyco/x-types": "^10.0.0-alpha.72",
-    "@empathyco/x-utils": "^1.0.0-alpha.20",
+    "@empathyco/x-adapter": "^8.0.0-alpha.34",
+    "@empathyco/x-adapter-platform": "^1.0.0-alpha.88",
+    "@empathyco/x-archetype-utils": "^1.0.0-alpha.4",
+    "@empathyco/x-components": "^3.0.0-alpha.422",
+    "@empathyco/x-deep-merge": "^1.3.0-alpha.34",
+    "@empathyco/x-types": "^10.0.0-alpha.75",
+    "@empathyco/x-utils": "^1.0.0-alpha.23",
     "tslib": "~2.4.1",
     "vue": "~2.7.14",
     "vue-class-component": "~7.2.6",
diff --git a/src/components/my-history/custom-my-history.vue b/src/components/my-history/custom-my-history.vue
index ddb2c920..e642ca39 100644
--- a/src/components/my-history/custom-my-history.vue
+++ b/src/components/my-history/custom-my-history.vue
@@ -22,6 +22,16 @@
 
             <div class="x-flex x-flex-col x-gap-2">
               <p>{{ suggestion.query }}</p>
+              <ul v-if="suggestion.selectedFilters" class="x-flex x-gap-8">
+                <li
+                  v-for="filter in suggestion.selectedFilters"
+                  :key="filter.id"
+                  class="x-text1-sm x-text-auxiliary-50"
+                >
+                  #{{ filter.label }}
+                </li>
+              </ul>
+
               <p class="x-text1 x-text1-sm x-text-neutral-75">
                 {{ formatTime(suggestion.timestamp) }}
                 <template v-if="suggestion.totalResults !== undefined">

From beb1b80b808ad0c6570d88d5a30372b28feac0bd Mon Sep 17 00:00:00 2001
From: acondal <annac@empathy.co>
Date: Mon, 16 Oct 2023 10:38:13 +0200
Subject: [PATCH 02/20] feat: selected Filters in myHistory

EMP-2293
---
 src/components/my-history/custom-my-history.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/my-history/custom-my-history.vue b/src/components/my-history/custom-my-history.vue
index e642ca39..e4d3309c 100644
--- a/src/components/my-history/custom-my-history.vue
+++ b/src/components/my-history/custom-my-history.vue
@@ -28,7 +28,7 @@
                   :key="filter.id"
                   class="x-text1-sm x-text-auxiliary-50"
                 >
-                  #{{ filter.label }}
+                  {{ filter.label }}
                 </li>
               </ul>
 

From b2691a96bef83ffa255fdca26044330391faade1 Mon Sep 17 00:00:00 2001
From: acondal <annac@empathy.co>
Date: Mon, 16 Oct 2023 17:07:26 +0200
Subject: [PATCH 03/20] feat: add line-clamp tailwind plugin

EMP-2293
---
 package-lock.json  | 9 +++++++++
 package.json       | 1 +
 tailwind.config.js | 2 +-
 3 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/package-lock.json b/package-lock.json
index f0a95b65..8456d964 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
         "@empathyco/x-deep-merge": "^1.3.0-alpha.34",
         "@empathyco/x-types": "^10.0.0-alpha.75",
         "@empathyco/x-utils": "^1.0.0-alpha.23",
+        "@tailwindcss/line-clamp": "^0.4.4",
         "tslib": "~2.4.1",
         "vue": "~2.7.14",
         "vue-class-component": "~7.2.6",
@@ -3614,6 +3615,14 @@
       "integrity": "sha512-T7VNNlYVM1SgQ+VsMYhnDkcGmWhQdL0bDyGm5TlQ3GBXnJscEClUUOKduWTmm2zCnvNLC1hc3JpuXjs/nFOc5w==",
       "dev": true
     },
+    "node_modules/@tailwindcss/line-clamp": {
+      "version": "0.4.4",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/line-clamp/-/line-clamp-0.4.4.tgz",
+      "integrity": "sha512-5U6SY5z8N42VtrCrKlsTAA35gy2VSyYtHWCsg1H87NU1SXnEfekTVlrga9fzUDrrHcGi2Lb5KenUWb4lRQT5/g==",
+      "peerDependencies": {
+        "tailwindcss": ">=2.0.0 || >=3.0.0 || >=3.0.0-alpha.1"
+      }
+    },
     "node_modules/@tootallnate/once": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz",
diff --git a/package.json b/package.json
index 6b2f76fe..2c9e62c2 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
     "@empathyco/x-deep-merge": "^1.3.0-alpha.34",
     "@empathyco/x-types": "^10.0.0-alpha.75",
     "@empathyco/x-utils": "^1.0.0-alpha.23",
+    "@tailwindcss/line-clamp": "^0.4.4",
     "tslib": "~2.4.1",
     "vue": "~2.7.14",
     "vue-class-component": "~7.2.6",
diff --git a/tailwind.config.js b/tailwind.config.js
index c1edfed1..5330c992 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -10,5 +10,5 @@ module.exports = {
   ],
   prefix: 'x-',
   important: true,
-  plugins: [xTailwindPlugin(options)]
+  plugins: [xTailwindPlugin(options), require('@tailwindcss/line-clamp')]
 };

From 31011fb6f9f3d0d33e40fad5cc2aee4fbf15c58d Mon Sep 17 00:00:00 2001
From: acondal <annac@empathy.co>
Date: Mon, 16 Oct 2023 17:10:27 +0200
Subject: [PATCH 04/20] feat: use line-clamp in my history filters

EMP-2293
---
 .../my-history/custom-my-history.vue          | 25 +++++++++++++------
 1 file changed, 17 insertions(+), 8 deletions(-)

diff --git a/src/components/my-history/custom-my-history.vue b/src/components/my-history/custom-my-history.vue
index e4d3309c..73ec67bf 100644
--- a/src/components/my-history/custom-my-history.vue
+++ b/src/components/my-history/custom-my-history.vue
@@ -22,15 +22,14 @@
 
             <div class="x-flex x-flex-col x-gap-2">
               <p>{{ suggestion.query }}</p>
-              <ul v-if="suggestion.selectedFilters" class="x-flex x-gap-8">
-                <li
-                  v-for="filter in suggestion.selectedFilters"
-                  :key="filter.id"
-                  class="x-text1-sm x-text-auxiliary-50"
-                >
+              <p
+                v-if="suggestion.selectedFilters"
+                class="x-text1-sm x-text-auxiliary-50 x-line-clamp-1"
+              >
+                <span v-for="filter in suggestion.selectedFilters" :key="filter.id" class="x-mr-8">
                   {{ filter.label }}
-                </li>
-              </ul>
+                </span>
+              </p>
 
               <p class="x-text1 x-text1-sm x-text-neutral-75">
                 {{ formatTime(suggestion.timestamp) }}
@@ -78,3 +77,13 @@
     }
   });
 </script>
+
+<!--<style lang='"scss'>-->
+<!--  .x-line-clamp-1 {-->
+<!--    overflow: hidden;-->
+<!--    display: -webkit-box;-->
+<!--    -webkit-box-orient: vertical;-->
+<!--    -webkit-line-clamp: 1;-->
+<!--  }-->
+
+<!--</style>-->

From 401512590a8d18f4b2d8c4d13107ba93fe6bf093 Mon Sep 17 00:00:00 2001
From: acondal <annac@empathy.co>
Date: Tue, 17 Oct 2023 11:50:51 +0200
Subject: [PATCH 05/20] feat: add translations

EMP-2293
---
 src/i18n/messages.types.ts         | 1 +
 src/i18n/messages/en.messages.json | 3 ++-
 src/i18n/messages/es.messages.json | 3 ++-
 src/i18n/messages/fr.messages.json | 3 ++-
 src/i18n/messages/it.messages.json | 3 ++-
 src/i18n/messages/pt.messages.json | 3 ++-
 6 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/i18n/messages.types.ts b/src/i18n/messages.types.ts
index 24a7a234..e4320107 100644
--- a/src/i18n/messages.types.ts
+++ b/src/i18n/messages.types.ts
@@ -35,6 +35,7 @@ export interface Messages {
       dismiss: string;
       confirm: string;
     };
+    filters: string;
   };
   nextQueries: {
     title: string;
diff --git a/src/i18n/messages/en.messages.json b/src/i18n/messages/en.messages.json
index 9750d918..414a86c1 100644
--- a/src/i18n/messages/en.messages.json
+++ b/src/i18n/messages/en.messages.json
@@ -33,7 +33,8 @@
         "message": "Disabling History Queries you also clear all the history list.",
         "dismiss": "Cancel",
         "confirm": "Disable"
-      }
+      },
+      "filters": "{firstFilter} {totalFilters} filters applied"
     },
     "nextQueries": {
       "title": "What's Next"
diff --git a/src/i18n/messages/es.messages.json b/src/i18n/messages/es.messages.json
index 0c76f61e..345ed433 100644
--- a/src/i18n/messages/es.messages.json
+++ b/src/i18n/messages/es.messages.json
@@ -33,7 +33,8 @@
         "message": "Si desactivas el historial de búsqueda, las búsquedas de tu historial serán eliminadas.",
         "dismiss": "Cancelar",
         "confirm": "Desactivar"
-      }
+      },
+      "filters": "{totalFilters} filtros aplicados"
     },
     "nextQueries": {
       "title": "Quizás te Interese"
diff --git a/src/i18n/messages/fr.messages.json b/src/i18n/messages/fr.messages.json
index 5b860d56..96257b49 100644
--- a/src/i18n/messages/fr.messages.json
+++ b/src/i18n/messages/fr.messages.json
@@ -33,7 +33,8 @@
         "message": "En désactivant les requêtes d'historique, vous effacez également toute la liste d'historique.",
         "dismiss": "Annuler",
         "confirm": "Désactiver"
-      }
+      },
+      "filters": "{totalFilters} filtres appliqués"
     },
     "nextQueries": {
       "title": "Et Après"
diff --git a/src/i18n/messages/it.messages.json b/src/i18n/messages/it.messages.json
index ebd75fbf..aff25023 100644
--- a/src/i18n/messages/it.messages.json
+++ b/src/i18n/messages/it.messages.json
@@ -33,7 +33,8 @@
         "message": "Se disattivi la cronologia ricerche, le ricerche nella cronologia verranno eliminate.",
         "dismiss": "Cancella",
         "confirm": "Disattiva"
-      }
+      },
+      "filters": "{totalFilters} filtri applicati"
     },
     "nextQueries": {
       "title": "Potrebbe interessarti"
diff --git a/src/i18n/messages/pt.messages.json b/src/i18n/messages/pt.messages.json
index 22fbfab3..31a695a6 100644
--- a/src/i18n/messages/pt.messages.json
+++ b/src/i18n/messages/pt.messages.json
@@ -33,7 +33,8 @@
         "message": "Desabilitando o histórico de buscas, você também limpará toda a lista de buscas",
         "dismiss": "Cancelar",
         "confirm": "Desativar"
-      }
+      },
+      "filters": "{totalFilters} filtros aplicados"
     },
     "nextQueries": {
       "title": "Você Pode se Interessar"

From c43179beb10b53a902e6a4fecff504e97b40d584 Mon Sep 17 00:00:00 2001
From: acondal <annac@empathy.co>
Date: Tue, 17 Oct 2023 11:51:42 +0200
Subject: [PATCH 06/20] feat: create my-history-filters component

EMP-2293
---
 .../my-history/my-history-filters.vue         | 37 +++++++++++++++++++
 1 file changed, 37 insertions(+)
 create mode 100644 src/components/my-history/my-history-filters.vue

diff --git a/src/components/my-history/my-history-filters.vue b/src/components/my-history/my-history-filters.vue
new file mode 100644
index 00000000..a3ea584a
--- /dev/null
+++ b/src/components/my-history/my-history-filters.vue
@@ -0,0 +1,37 @@
+<template v-if="suggestion.selectedFilters.length > 0">
+  <p
+    v-if="suggestion.selectedFilters.length < 4"
+    class="x-text1-sm x-text-neutral-75 x-line-clamp-1"
+  >
+    <span
+      v-for="filter in suggestion.selectedFilters"
+      :key="filter.id"
+      class="x-mr-8 x-rounded-full x-bg-neutral-10 x-px-8 x-py-2"
+    >
+      {{ filter.label }}
+    </span>
+  </p>
+  <i18n
+    v-else-if="suggestion.selectedFilters.length >= 4"
+    tag="p"
+    path="myHistory.filters"
+    class="x-text1-sm x-text-lead-50"
+  >
+    <template #firstFilter>{{ suggestion.selectedFilters[0].label }}</template>
+    <template #totalFilters>+{{ suggestion.selectedFilters.length - 1 }}</template>
+  </i18n>
+</template>
+
+<script lang="ts">
+  import { defineComponent, PropType } from 'vue';
+  import { HistoryQuery } from '@empathyco/x-types';
+
+  export default defineComponent({
+    props: {
+      suggestion: { type: Object as PropType<HistoryQuery>, required: true }
+    },
+    setup(props) {
+      return { props };
+    }
+  });
+</script>

From b583f93eba7abab5f7beb0aa30ca4426d7ae5615 Mon Sep 17 00:00:00 2001
From: acondal <annac@empathy.co>
Date: Tue, 17 Oct 2023 11:51:59 +0200
Subject: [PATCH 07/20] feat: wip showing 2 opt

EMP-2293
---
 .../my-history/custom-my-history.vue          | 58 +++++++++++++------
 1 file changed, 40 insertions(+), 18 deletions(-)

diff --git a/src/components/my-history/custom-my-history.vue b/src/components/my-history/custom-my-history.vue
index 73ec67bf..dcd3f702 100644
--- a/src/components/my-history/custom-my-history.vue
+++ b/src/components/my-history/custom-my-history.vue
@@ -22,14 +22,30 @@
 
             <div class="x-flex x-flex-col x-gap-2">
               <p>{{ suggestion.query }}</p>
-              <p
-                v-if="suggestion.selectedFilters"
-                class="x-text1-sm x-text-auxiliary-50 x-line-clamp-1"
-              >
-                <span v-for="filter in suggestion.selectedFilters" :key="filter.id" class="x-mr-8">
-                  {{ filter.label }}
-                </span>
-              </p>
+              <template v-if="suggestion.selectedFilters.length > 0">
+                <p
+                  v-if="suggestion.selectedFilters.length < 4"
+                  class="x-text1-sm x-text-lead-50 x-line-clamp-1"
+                >
+                  <span
+                    v-for="filter in suggestion.selectedFilters"
+                    :key="filter.id"
+                    class="x-history-filters x-pr-[4px]"
+                  >
+                    {{ filter.label }}
+                  </span>
+                </p>
+                <i18n
+                  v-else-if="suggestion.selectedFilters.length >= 4"
+                  tag="p"
+                  path="myHistory.filters"
+                  class="x-text1-sm x-text-lead-50"
+                >
+                  <template #totalFilters>{{ suggestion.selectedFilters.length - 1 }}</template>
+                </i18n>
+              </template>
+
+              <MyHistoryFilters :suggestion="suggestion" />
 
               <p class="x-text1 x-text1-sm x-text-neutral-75">
                 {{ formatTime(suggestion.timestamp) }}
@@ -61,6 +77,7 @@
   } from '@empathyco/x-components';
   import { MyHistory, HistoryQuery } from '@empathyco/x-components/history-queries';
   import { defineComponent } from 'vue';
+  import MyHistoryFilters from './my-history-filters.vue';
 
   export default defineComponent({
     components: {
@@ -68,7 +85,8 @@
       CrossTinyIcon,
       HistoryIcon,
       MyHistory,
-      HistoryQuery
+      HistoryQuery,
+      MyHistoryFilters
     },
     setup() {
       return {
@@ -78,12 +96,16 @@
   });
 </script>
 
-<!--<style lang='"scss'>-->
-<!--  .x-line-clamp-1 {-->
-<!--    overflow: hidden;-->
-<!--    display: -webkit-box;-->
-<!--    -webkit-box-orient: vertical;-->
-<!--    -webkit-line-clamp: 1;-->
-<!--  }-->
-
-<!--</style>-->
+<style lang="scss">
+  .x-history-filters {
+    &:after {
+      content: '·';
+      padding-left: 4px;
+    }
+    &:last-child {
+      &:after {
+        content: '';
+      }
+    }
+  }
+</style>

From a2e2555e71d90fb276d9c8fcce86c975f8e189d6 Mon Sep 17 00:00:00 2001
From: acondal <annac@empathy.co>
Date: Wed, 25 Oct 2023 17:58:07 +0200
Subject: [PATCH 08/20] feat: apply design with line-clamp

EMP-2293
---
 .../my-history/custom-my-history.vue          | 37 -------------------
 .../my-history/my-history-filters.vue         | 32 ++++++----------
 src/i18n/messages.types.ts                    |  1 -
 src/i18n/messages/en.messages.json            |  3 +-
 src/i18n/messages/es.messages.json            |  3 +-
 src/i18n/messages/fr.messages.json            |  3 +-
 src/i18n/messages/it.messages.json            |  3 +-
 src/i18n/messages/pt.messages.json            |  3 +-
 8 files changed, 16 insertions(+), 69 deletions(-)

diff --git a/src/components/my-history/custom-my-history.vue b/src/components/my-history/custom-my-history.vue
index dcd3f702..7b644499 100644
--- a/src/components/my-history/custom-my-history.vue
+++ b/src/components/my-history/custom-my-history.vue
@@ -22,29 +22,6 @@
 
             <div class="x-flex x-flex-col x-gap-2">
               <p>{{ suggestion.query }}</p>
-              <template v-if="suggestion.selectedFilters.length > 0">
-                <p
-                  v-if="suggestion.selectedFilters.length < 4"
-                  class="x-text1-sm x-text-lead-50 x-line-clamp-1"
-                >
-                  <span
-                    v-for="filter in suggestion.selectedFilters"
-                    :key="filter.id"
-                    class="x-history-filters x-pr-[4px]"
-                  >
-                    {{ filter.label }}
-                  </span>
-                </p>
-                <i18n
-                  v-else-if="suggestion.selectedFilters.length >= 4"
-                  tag="p"
-                  path="myHistory.filters"
-                  class="x-text1-sm x-text-lead-50"
-                >
-                  <template #totalFilters>{{ suggestion.selectedFilters.length - 1 }}</template>
-                </i18n>
-              </template>
-
               <MyHistoryFilters :suggestion="suggestion" />
 
               <p class="x-text1 x-text1-sm x-text-neutral-75">
@@ -95,17 +72,3 @@
     }
   });
 </script>
-
-<style lang="scss">
-  .x-history-filters {
-    &:after {
-      content: '·';
-      padding-left: 4px;
-    }
-    &:last-child {
-      &:after {
-        content: '';
-      }
-    }
-  }
-</style>
diff --git a/src/components/my-history/my-history-filters.vue b/src/components/my-history/my-history-filters.vue
index a3ea584a..f2d18dd6 100644
--- a/src/components/my-history/my-history-filters.vue
+++ b/src/components/my-history/my-history-filters.vue
@@ -1,25 +1,15 @@
 <template v-if="suggestion.selectedFilters.length > 0">
-  <p
-    v-if="suggestion.selectedFilters.length < 4"
-    class="x-text1-sm x-text-neutral-75 x-line-clamp-1"
-  >
-    <span
-      v-for="filter in suggestion.selectedFilters"
-      :key="filter.id"
-      class="x-mr-8 x-rounded-full x-bg-neutral-10 x-px-8 x-py-2"
-    >
-      {{ filter.label }}
-    </span>
-  </p>
-  <i18n
-    v-else-if="suggestion.selectedFilters.length >= 4"
-    tag="p"
-    path="myHistory.filters"
-    class="x-text1-sm x-text-lead-50"
-  >
-    <template #firstFilter>{{ suggestion.selectedFilters[0].label }}</template>
-    <template #totalFilters>+{{ suggestion.selectedFilters.length - 1 }}</template>
-  </i18n>
+  <div>
+    <p class="x-text1-sm x-text-lead-50 x-line-clamp-1">
+      <span
+        v-for="filter in suggestion.selectedFilters"
+        :key="filter.id"
+        class="x-history-filters x-pr-8"
+      >
+        {{ filter.label ?? filter.id }}
+      </span>
+    </p>
+  </div>
 </template>
 
 <script lang="ts">
diff --git a/src/i18n/messages.types.ts b/src/i18n/messages.types.ts
index e4320107..24a7a234 100644
--- a/src/i18n/messages.types.ts
+++ b/src/i18n/messages.types.ts
@@ -35,7 +35,6 @@ export interface Messages {
       dismiss: string;
       confirm: string;
     };
-    filters: string;
   };
   nextQueries: {
     title: string;
diff --git a/src/i18n/messages/en.messages.json b/src/i18n/messages/en.messages.json
index 414a86c1..9750d918 100644
--- a/src/i18n/messages/en.messages.json
+++ b/src/i18n/messages/en.messages.json
@@ -33,8 +33,7 @@
         "message": "Disabling History Queries you also clear all the history list.",
         "dismiss": "Cancel",
         "confirm": "Disable"
-      },
-      "filters": "{firstFilter} {totalFilters} filters applied"
+      }
     },
     "nextQueries": {
       "title": "What's Next"
diff --git a/src/i18n/messages/es.messages.json b/src/i18n/messages/es.messages.json
index 345ed433..0c76f61e 100644
--- a/src/i18n/messages/es.messages.json
+++ b/src/i18n/messages/es.messages.json
@@ -33,8 +33,7 @@
         "message": "Si desactivas el historial de búsqueda, las búsquedas de tu historial serán eliminadas.",
         "dismiss": "Cancelar",
         "confirm": "Desactivar"
-      },
-      "filters": "{totalFilters} filtros aplicados"
+      }
     },
     "nextQueries": {
       "title": "Quizás te Interese"
diff --git a/src/i18n/messages/fr.messages.json b/src/i18n/messages/fr.messages.json
index 96257b49..5b860d56 100644
--- a/src/i18n/messages/fr.messages.json
+++ b/src/i18n/messages/fr.messages.json
@@ -33,8 +33,7 @@
         "message": "En désactivant les requêtes d'historique, vous effacez également toute la liste d'historique.",
         "dismiss": "Annuler",
         "confirm": "Désactiver"
-      },
-      "filters": "{totalFilters} filtres appliqués"
+      }
     },
     "nextQueries": {
       "title": "Et Après"
diff --git a/src/i18n/messages/it.messages.json b/src/i18n/messages/it.messages.json
index aff25023..ebd75fbf 100644
--- a/src/i18n/messages/it.messages.json
+++ b/src/i18n/messages/it.messages.json
@@ -33,8 +33,7 @@
         "message": "Se disattivi la cronologia ricerche, le ricerche nella cronologia verranno eliminate.",
         "dismiss": "Cancella",
         "confirm": "Disattiva"
-      },
-      "filters": "{totalFilters} filtri applicati"
+      }
     },
     "nextQueries": {
       "title": "Potrebbe interessarti"
diff --git a/src/i18n/messages/pt.messages.json b/src/i18n/messages/pt.messages.json
index 31a695a6..22fbfab3 100644
--- a/src/i18n/messages/pt.messages.json
+++ b/src/i18n/messages/pt.messages.json
@@ -33,8 +33,7 @@
         "message": "Desabilitando o histórico de buscas, você também limpará toda a lista de buscas",
         "dismiss": "Cancelar",
         "confirm": "Desativar"
-      },
-      "filters": "{totalFilters} filtros aplicados"
+      }
     },
     "nextQueries": {
       "title": "Você Pode se Interessar"

From e401ad219c5317445cd0d6a2baf19a36142d1ccb Mon Sep 17 00:00:00 2001
From: acondal <annac@empathy.co>
Date: Thu, 26 Oct 2023 09:01:00 +0200
Subject: [PATCH 09/20] chore: rm unnecessary div

EMP-2293
---
 .../my-history/my-history-filters.vue         | 20 +++++++++----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/src/components/my-history/my-history-filters.vue b/src/components/my-history/my-history-filters.vue
index f2d18dd6..b0d9c500 100644
--- a/src/components/my-history/my-history-filters.vue
+++ b/src/components/my-history/my-history-filters.vue
@@ -1,15 +1,13 @@
 <template v-if="suggestion.selectedFilters.length > 0">
-  <div>
-    <p class="x-text1-sm x-text-lead-50 x-line-clamp-1">
-      <span
-        v-for="filter in suggestion.selectedFilters"
-        :key="filter.id"
-        class="x-history-filters x-pr-8"
-      >
-        {{ filter.label ?? filter.id }}
-      </span>
-    </p>
-  </div>
+  <p class="x-text1-sm x-text-lead-50 x-line-clamp-1">
+    <span
+      v-for="filter in suggestion.selectedFilters"
+      :key="filter.id"
+      class="x-history-filters x-pr-8"
+    >
+      {{ filter.label ?? filter.id }}
+    </span>
+  </p>
 </template>
 
 <script lang="ts">

From 81c1cd4f94dc7d82e8682dd9c232ef946337eae5 Mon Sep 17 00:00:00 2001
From: acondal <annac@empathy.co>
Date: Thu, 26 Oct 2023 10:43:12 +0200
Subject: [PATCH 10/20] feat: st if condition inside custom-my-history

EMP-2293
---
 src/components/my-history/custom-my-history.vue  | 5 ++++-
 src/components/my-history/my-history-filters.vue | 2 +-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/my-history/custom-my-history.vue b/src/components/my-history/custom-my-history.vue
index 7b644499..2ee7fd27 100644
--- a/src/components/my-history/custom-my-history.vue
+++ b/src/components/my-history/custom-my-history.vue
@@ -22,7 +22,10 @@
 
             <div class="x-flex x-flex-col x-gap-2">
               <p>{{ suggestion.query }}</p>
-              <MyHistoryFilters :suggestion="suggestion" />
+              <MyHistoryFilters
+                v-if="suggestion.selectedFilters.length > 0"
+                :suggestion="suggestion"
+              />
 
               <p class="x-text1 x-text1-sm x-text-neutral-75">
                 {{ formatTime(suggestion.timestamp) }}
diff --git a/src/components/my-history/my-history-filters.vue b/src/components/my-history/my-history-filters.vue
index b0d9c500..9ff6eb5c 100644
--- a/src/components/my-history/my-history-filters.vue
+++ b/src/components/my-history/my-history-filters.vue
@@ -1,4 +1,4 @@
-<template v-if="suggestion.selectedFilters.length > 0">
+<template>
   <p class="x-text1-sm x-text-lead-50 x-line-clamp-1">
     <span
       v-for="filter in suggestion.selectedFilters"

From cceca35304cd1610adeeffce9298d05bb4424c1f Mon Sep 17 00:00:00 2001
From: acondal <annac@empathy.co>
Date: Thu, 26 Oct 2023 10:51:08 +0200
Subject: [PATCH 11/20] feat: rm unneded component, rm unneded class

EMP-2293
---
 .../my-history/custom-my-history.vue          | 13 +++++-----
 .../my-history/my-history-filters.vue         | 25 -------------------
 2 files changed, 6 insertions(+), 32 deletions(-)
 delete mode 100644 src/components/my-history/my-history-filters.vue

diff --git a/src/components/my-history/custom-my-history.vue b/src/components/my-history/custom-my-history.vue
index 2ee7fd27..786e427e 100644
--- a/src/components/my-history/custom-my-history.vue
+++ b/src/components/my-history/custom-my-history.vue
@@ -22,10 +22,11 @@
 
             <div class="x-flex x-flex-col x-gap-2">
               <p>{{ suggestion.query }}</p>
-              <MyHistoryFilters
-                v-if="suggestion.selectedFilters.length > 0"
-                :suggestion="suggestion"
-              />
+              <p class="x-text1-sm x-text-lead-50 x-line-clamp-1">
+                <span v-for="filter in suggestion.selectedFilters" :key="filter.id" class="x-pr-8">
+                  {{ filter.label ?? filter.id }}
+                </span>
+              </p>
 
               <p class="x-text1 x-text1-sm x-text-neutral-75">
                 {{ formatTime(suggestion.timestamp) }}
@@ -57,7 +58,6 @@
   } from '@empathyco/x-components';
   import { MyHistory, HistoryQuery } from '@empathyco/x-components/history-queries';
   import { defineComponent } from 'vue';
-  import MyHistoryFilters from './my-history-filters.vue';
 
   export default defineComponent({
     components: {
@@ -65,8 +65,7 @@
       CrossTinyIcon,
       HistoryIcon,
       MyHistory,
-      HistoryQuery,
-      MyHistoryFilters
+      HistoryQuery
     },
     setup() {
       return {
diff --git a/src/components/my-history/my-history-filters.vue b/src/components/my-history/my-history-filters.vue
deleted file mode 100644
index 9ff6eb5c..00000000
--- a/src/components/my-history/my-history-filters.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<template>
-  <p class="x-text1-sm x-text-lead-50 x-line-clamp-1">
-    <span
-      v-for="filter in suggestion.selectedFilters"
-      :key="filter.id"
-      class="x-history-filters x-pr-8"
-    >
-      {{ filter.label ?? filter.id }}
-    </span>
-  </p>
-</template>
-
-<script lang="ts">
-  import { defineComponent, PropType } from 'vue';
-  import { HistoryQuery } from '@empathyco/x-types';
-
-  export default defineComponent({
-    props: {
-      suggestion: { type: Object as PropType<HistoryQuery>, required: true }
-    },
-    setup(props) {
-      return { props };
-    }
-  });
-</script>

From 0afd27af7359b4fcfabe60f20dc9c140d9baa486 Mon Sep 17 00:00:00 2001
From: acondal <annac@empathy.co>
Date: Thu, 26 Oct 2023 10:53:24 +0200
Subject: [PATCH 12/20] chore: add forgotten if

EMP-2293
---
 src/components/my-history/custom-my-history.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/my-history/custom-my-history.vue b/src/components/my-history/custom-my-history.vue
index 786e427e..285c9ba8 100644
--- a/src/components/my-history/custom-my-history.vue
+++ b/src/components/my-history/custom-my-history.vue
@@ -22,7 +22,10 @@
 
             <div class="x-flex x-flex-col x-gap-2">
               <p>{{ suggestion.query }}</p>
-              <p class="x-text1-sm x-text-lead-50 x-line-clamp-1">
+              <p
+                v-if="suggestion.selectedFilters.length > 0"
+                class="x-text1-sm x-text-lead-50 x-line-clamp-1"
+              >
                 <span v-for="filter in suggestion.selectedFilters" :key="filter.id" class="x-pr-8">
                   {{ filter.label ?? filter.id }}
                 </span>

From 59a7de025995c908a0984066ad49a56ae2682c68 Mon Sep 17 00:00:00 2001
From: acondal <annac@empathy.co>
Date: Thu, 26 Oct 2023 11:19:42 +0200
Subject: [PATCH 13/20] fix: rm ?? operator from template

EMP-2293
---
 src/components/my-history/custom-my-history.vue | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/my-history/custom-my-history.vue b/src/components/my-history/custom-my-history.vue
index 285c9ba8..41de2f64 100644
--- a/src/components/my-history/custom-my-history.vue
+++ b/src/components/my-history/custom-my-history.vue
@@ -27,7 +27,7 @@
                 class="x-text1-sm x-text-lead-50 x-line-clamp-1"
               >
                 <span v-for="filter in suggestion.selectedFilters" :key="filter.id" class="x-pr-8">
-                  {{ filter.label ?? filter.id }}
+                  {{ label(filter) }}
                 </span>
               </p>
 
@@ -71,8 +71,13 @@
       HistoryQuery
     },
     setup() {
+      const label = (filter: Record<string, string>): string => {
+        return filter.label ?? filter.id;
+      };
+
       return {
-        animation: StaggeredFadeAndSlide
+        animation: StaggeredFadeAndSlide,
+        label
       };
     }
   });

From ed695910b62d5a2c5d3344d8c145d8dca6e823d3 Mon Sep 17 00:00:00 2001
From: acondal <annac@empathy.co>
Date: Thu, 26 Oct 2023 16:43:31 +0200
Subject: [PATCH 14/20] style(my-history): fix show num of filters, fix
 underline on hover

EMP-2293
---
 .../my-history/custom-my-history.vue          | 25 ++++++++++++-------
 src/tailwind/plugin-options.js                |  3 +++
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/src/components/my-history/custom-my-history.vue b/src/components/my-history/custom-my-history.vue
index 41de2f64..c59598a4 100644
--- a/src/components/my-history/custom-my-history.vue
+++ b/src/components/my-history/custom-my-history.vue
@@ -16,20 +16,27 @@
             @click="closeModal"
             data-test="my-history-query"
             :suggestion="suggestion"
-            suggestionClass="x-suggestion"
+            suggestionClass="x-suggestion x-w-[320px]"
           >
             <HistoryIcon class="max-desktop:x-icon-lg" />
 
             <div class="x-flex x-flex-col x-gap-2">
-              <p>{{ suggestion.query }}</p>
-              <p
-                v-if="suggestion.selectedFilters.length > 0"
-                class="x-text1-sm x-text-lead-50 x-line-clamp-1"
+              <p class="hover:x-underline">{{ suggestion.query }}</p>
+              <div
+                v-if="suggestion.selectedFilters && suggestion.selectedFilters.length > 0"
+                class="x-text1-sm x-flex x-text-lead-50"
               >
-                <span v-for="filter in suggestion.selectedFilters" :key="filter.id" class="x-pr-8">
-                  {{ label(filter) }}
-                </span>
-              </p>
+                <p class="x-line-clamp-1">
+                  <span
+                    v-for="filter in suggestion.selectedFilters"
+                    :key="filter.id"
+                    class="x-pr-8"
+                  >
+                    {{ label(filter) }}
+                  </span>
+                </p>
+                <p class="x-pl-8">({{ suggestion.selectedFilters.length }})</p>
+              </div>
 
               <p class="x-text1 x-text1-sm x-text-neutral-75">
                 {{ formatTime(suggestion.timestamp) }}
diff --git a/src/tailwind/plugin-options.js b/src/tailwind/plugin-options.js
index 416e55fb..b181cb6c 100644
--- a/src/tailwind/plugin-options.js
+++ b/src/tailwind/plugin-options.js
@@ -17,6 +17,9 @@ module.exports = {
         paddingTop: theme('spacing.24'),
         paddingBottom: theme('spacing.24')
       }
+    },
+    '.history-query.suggestion-group:hover': {
+      textDecoration: 'none'
     }
   })
 };

From d02932828959c0de17d6408abb771b9dba1cdc39 Mon Sep 17 00:00:00 2001
From: Laura Martinez Garcia <lauram@empathy.co>
Date: Tue, 31 Oct 2023 12:10:05 +0100
Subject: [PATCH 15/20] style(my-history): add filters in empathize history
 queries and fix pr comments

---
 package-lock.json                             | 165 +++++++++++++++---
 package.json                                  |   2 +-
 .../my-history/custom-my-history.vue          |  25 ++-
 .../full-width-predictive.vue                 |  26 ++-
 4 files changed, 176 insertions(+), 42 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 8456d964..94df281c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,7 +12,7 @@
         "@empathyco/x-adapter": "^8.0.0-alpha.34",
         "@empathyco/x-adapter-platform": "^1.0.0-alpha.88",
         "@empathyco/x-archetype-utils": "^1.0.0-alpha.4",
-        "@empathyco/x-components": "^3.0.0-alpha.422",
+        "@empathyco/x-components": "^3.0.1-alpha.1",
         "@empathyco/x-deep-merge": "^1.3.0-alpha.34",
         "@empathyco/x-types": "^10.0.0-alpha.75",
         "@empathyco/x-utils": "^1.0.0-alpha.23",
@@ -2165,12 +2165,12 @@
       "integrity": "sha512-C5GZjs1tYlAqjwymaaCPDjCyGo10ajUphiwA922jKt9n7KPpqR7oM1PCwYzhB/E7+nT3wfdG3oRre5raIT1rKA=="
     },
     "node_modules/@empathyco/x-bus": {
-      "version": "1.0.0-alpha.4",
-      "resolved": "https://registry.npmjs.org/@empathyco/x-bus/-/x-bus-1.0.0-alpha.4.tgz",
-      "integrity": "sha512-zbQlnSdO5/YrCmMP9OKzbYpeMqa08gLOg07O4+zGgrtwFxdl+a7OH52fDaOb8p3lWVG6LN1kgWFOut07eZryTA==",
+      "version": "1.0.1-alpha.0",
+      "resolved": "https://registry.npmjs.org/@empathyco/x-bus/-/x-bus-1.0.1-alpha.0.tgz",
+      "integrity": "sha512-rzSkpEntThStgY4AFNm/h2MgDaggLyWV40mG88MyNioXXBQ98sUYgK7iV5sIJ4+Zak9emDUTKmmGxDdA5p8Gdw==",
       "dependencies": {
-        "@empathyco/x-priority-queue": "^1.0.0-alpha.4",
-        "@empathyco/x-utils": "^1.0.0-alpha.23",
+        "@empathyco/x-priority-queue": "^1.0.1-alpha.0",
+        "@empathyco/x-utils": "^1.0.1-alpha.0",
         "rxjs": "~7.8.0",
         "tslib": "~2.5.0"
       },
@@ -2178,24 +2178,49 @@
         "node": ">=18"
       }
     },
+    "node_modules/@empathyco/x-bus/node_modules/@empathyco/x-storage-service": {
+      "version": "2.0.1-alpha.0",
+      "resolved": "https://registry.npmjs.org/@empathyco/x-storage-service/-/x-storage-service-2.0.1-alpha.0.tgz",
+      "integrity": "sha512-9PVc19WHRzNN55epdznaCrdRwpn7O676/8YEAI9dVcDIBfe+aWhLQSv6Q270OF85wQX/oiLiWilVm9JiJOO8fA==",
+      "dependencies": {
+        "@empathyco/x-logger": "^1.2.0-alpha.11",
+        "tslib": "~2.5.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@empathyco/x-bus/node_modules/@empathyco/x-utils": {
+      "version": "1.0.1-alpha.0",
+      "resolved": "https://registry.npmjs.org/@empathyco/x-utils/-/x-utils-1.0.1-alpha.0.tgz",
+      "integrity": "sha512-diXGPshBlxbe03M+ldv/mCXb+Yzpxg4cv/5tLTd8PaakdbVaQSHjeeMQEWMuZ8RFrx8sVxEqYmWQd5HOFiuHSg==",
+      "dependencies": {
+        "@empathyco/x-storage-service": "^2.0.1-alpha.0",
+        "nanoid": "~3.3.0",
+        "tslib": "~2.5.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/@empathyco/x-bus/node_modules/tslib": {
       "version": "2.5.3",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.3.tgz",
       "integrity": "sha512-mSxlJJwl3BMEQCUNnxXBU9jP4JBktcEGhURcPR6VQVlnP0FdDEsIaz0C35dXNGLyRfrATNofF0F5p2KPxQgB+w=="
     },
     "node_modules/@empathyco/x-components": {
-      "version": "3.0.0-alpha.422",
-      "resolved": "https://registry.npmjs.org/@empathyco/x-components/-/x-components-3.0.0-alpha.422.tgz",
-      "integrity": "sha512-prYfv/TVvJUTnbxrsembCqyhdfuVrlpGoEW0speP/9G2Xm2DzE+E5NMvugYkzNaVU+hkZHx3S2eRK5Z1TH8yoA==",
-      "dependencies": {
-        "@empathyco/x-adapter": "^8.0.0-alpha.34",
-        "@empathyco/x-adapter-platform": "^1.0.0-alpha.88",
-        "@empathyco/x-bus": "^1.0.0-alpha.4",
-        "@empathyco/x-deep-merge": "^2.0.0-alpha.3",
+      "version": "3.0.1-alpha.4",
+      "resolved": "https://registry.npmjs.org/@empathyco/x-components/-/x-components-3.0.1-alpha.4.tgz",
+      "integrity": "sha512-N8O40mhdhlFgMC4TNXhLLm0fZD1NIJfAsSr8+OAbnccu3TCmpB1VqrAHwL+nZM4w4EaI5HvmCg1+9LoCBQ4btg==",
+      "dependencies": {
+        "@empathyco/x-adapter": "^8.0.1-alpha.0",
+        "@empathyco/x-adapter-platform": "^1.0.1-alpha.0",
+        "@empathyco/x-bus": "^1.0.1-alpha.0",
+        "@empathyco/x-deep-merge": "^2.0.1-alpha.0",
         "@empathyco/x-logger": "^1.2.0-alpha.11",
-        "@empathyco/x-storage-service": "^2.0.0-alpha.15",
-        "@empathyco/x-types": "^10.0.0-alpha.75",
-        "@empathyco/x-utils": "^1.0.0-alpha.23",
+        "@empathyco/x-storage-service": "^2.0.1-alpha.0",
+        "@empathyco/x-types": "^10.0.1-alpha.0",
+        "@empathyco/x-utils": "^1.0.1-alpha.0",
         "@vue/devtools-api": "~6.5.0",
         "@vueuse/core": "~10.1.0",
         "rxjs": "~7.8.0",
@@ -2213,12 +2238,77 @@
         "vuex": "^3.0.0"
       }
     },
+    "node_modules/@empathyco/x-components/node_modules/@empathyco/x-adapter": {
+      "version": "8.0.1-alpha.0",
+      "resolved": "https://registry.npmjs.org/@empathyco/x-adapter/-/x-adapter-8.0.1-alpha.0.tgz",
+      "integrity": "sha512-dGKzHvEXHY0QE1Y7x4Hba//E/KjNu/vqOhcDSrSxP2gEQhXuxBvlD0Z3c0bZiSKgoAhqOnMQRk5iqLNtdsjW+A==",
+      "dependencies": {
+        "@empathyco/x-deep-merge": "^2.0.1-alpha.0",
+        "@empathyco/x-utils": "^1.0.1-alpha.0",
+        "tslib": "~2.5.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@empathyco/x-components/node_modules/@empathyco/x-adapter-platform": {
+      "version": "1.0.1-alpha.0",
+      "resolved": "https://registry.npmjs.org/@empathyco/x-adapter-platform/-/x-adapter-platform-1.0.1-alpha.0.tgz",
+      "integrity": "sha512-hOOtLxCEqbB+cLmovxNagar1j5CbRUwa7ej2LMn8nms2ZFFX16ik6gas0FEc8oa5NKFXinLnms/Lxfj5esKTAg==",
+      "dependencies": {
+        "@empathyco/x-adapter": "^8.0.1-alpha.0",
+        "@empathyco/x-types": "^10.0.1-alpha.0",
+        "@empathyco/x-utils": "^1.0.1-alpha.0",
+        "tslib": "~2.5.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/@empathyco/x-components/node_modules/@empathyco/x-deep-merge": {
-      "version": "2.0.0-alpha.3",
-      "resolved": "https://registry.npmjs.org/@empathyco/x-deep-merge/-/x-deep-merge-2.0.0-alpha.3.tgz",
-      "integrity": "sha512-qvHvEVt3FoZXdlfxvEQExxF/q6F+wgTKdd9TIOxWUjZUlajrLdLXXWPnmBp5iEnz4Xzz4yxeHKdPRV1kv9aU2g==",
+      "version": "2.0.1-alpha.0",
+      "resolved": "https://registry.npmjs.org/@empathyco/x-deep-merge/-/x-deep-merge-2.0.1-alpha.0.tgz",
+      "integrity": "sha512-URqUYme4StnCZ/noCK1VB1zaWtgaiLwbvcEQryI1nAgNqqnlnE/+WLN0CA0Q9QAqP6SGkiiyND28XTFJaoL9Bw==",
       "dependencies": {
-        "@empathyco/x-utils": "^1.0.0-alpha.23",
+        "@empathyco/x-utils": "^1.0.1-alpha.0",
+        "tslib": "~2.5.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@empathyco/x-components/node_modules/@empathyco/x-storage-service": {
+      "version": "2.0.1-alpha.0",
+      "resolved": "https://registry.npmjs.org/@empathyco/x-storage-service/-/x-storage-service-2.0.1-alpha.0.tgz",
+      "integrity": "sha512-9PVc19WHRzNN55epdznaCrdRwpn7O676/8YEAI9dVcDIBfe+aWhLQSv6Q270OF85wQX/oiLiWilVm9JiJOO8fA==",
+      "dependencies": {
+        "@empathyco/x-logger": "^1.2.0-alpha.11",
+        "tslib": "~2.5.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@empathyco/x-components/node_modules/@empathyco/x-types": {
+      "version": "10.0.1-alpha.0",
+      "resolved": "https://registry.npmjs.org/@empathyco/x-types/-/x-types-10.0.1-alpha.0.tgz",
+      "integrity": "sha512-hvawqQdMUYgL4dWl5j287Prs+11EUVGLVl4a21jUJMOme6B4W5wIgizgZaJSPxz3xhETuyUOc5cVz3m6SBz7hw==",
+      "dependencies": {
+        "@empathyco/x-adapter": "^8.0.1-alpha.0",
+        "@empathyco/x-utils": "^1.0.1-alpha.0",
+        "tslib": "~2.5.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@empathyco/x-components/node_modules/@empathyco/x-utils": {
+      "version": "1.0.1-alpha.0",
+      "resolved": "https://registry.npmjs.org/@empathyco/x-utils/-/x-utils-1.0.1-alpha.0.tgz",
+      "integrity": "sha512-diXGPshBlxbe03M+ldv/mCXb+Yzpxg4cv/5tLTd8PaakdbVaQSHjeeMQEWMuZ8RFrx8sVxEqYmWQd5HOFiuHSg==",
+      "dependencies": {
+        "@empathyco/x-storage-service": "^2.0.1-alpha.0",
+        "nanoid": "~3.3.0",
         "tslib": "~2.5.0"
       },
       "engines": {
@@ -2275,11 +2365,36 @@
       "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg=="
     },
     "node_modules/@empathyco/x-priority-queue": {
-      "version": "1.0.0-alpha.4",
-      "resolved": "https://registry.npmjs.org/@empathyco/x-priority-queue/-/x-priority-queue-1.0.0-alpha.4.tgz",
-      "integrity": "sha512-K2HuGukVcW3+nK0MLTF52sghqm8kJQatMQls83Oe4Q8iPrbbPML/EcQc/SMoU3cqfeADUraPVuz4lxwPnOPzgw==",
+      "version": "1.0.1-alpha.0",
+      "resolved": "https://registry.npmjs.org/@empathyco/x-priority-queue/-/x-priority-queue-1.0.1-alpha.0.tgz",
+      "integrity": "sha512-imeFgpICMEGKctzZvqwib8Y4mzr551g3fMieKnYqATYju9AF3rFAvnd/AJ82hkSj98jAPYA+5Os5G0lgK4qzhw==",
       "dependencies": {
-        "@empathyco/x-utils": "^1.0.0-alpha.23",
+        "@empathyco/x-utils": "^1.0.1-alpha.0",
+        "tslib": "~2.5.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@empathyco/x-priority-queue/node_modules/@empathyco/x-storage-service": {
+      "version": "2.0.1-alpha.0",
+      "resolved": "https://registry.npmjs.org/@empathyco/x-storage-service/-/x-storage-service-2.0.1-alpha.0.tgz",
+      "integrity": "sha512-9PVc19WHRzNN55epdznaCrdRwpn7O676/8YEAI9dVcDIBfe+aWhLQSv6Q270OF85wQX/oiLiWilVm9JiJOO8fA==",
+      "dependencies": {
+        "@empathyco/x-logger": "^1.2.0-alpha.11",
+        "tslib": "~2.5.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@empathyco/x-priority-queue/node_modules/@empathyco/x-utils": {
+      "version": "1.0.1-alpha.0",
+      "resolved": "https://registry.npmjs.org/@empathyco/x-utils/-/x-utils-1.0.1-alpha.0.tgz",
+      "integrity": "sha512-diXGPshBlxbe03M+ldv/mCXb+Yzpxg4cv/5tLTd8PaakdbVaQSHjeeMQEWMuZ8RFrx8sVxEqYmWQd5HOFiuHSg==",
+      "dependencies": {
+        "@empathyco/x-storage-service": "^2.0.1-alpha.0",
+        "nanoid": "~3.3.0",
         "tslib": "~2.5.0"
       },
       "engines": {
diff --git a/package.json b/package.json
index b2e630eb..91076e50 100644
--- a/package.json
+++ b/package.json
@@ -32,7 +32,7 @@
     "@empathyco/x-adapter": "^8.0.0-alpha.34",
     "@empathyco/x-adapter-platform": "^1.0.0-alpha.88",
     "@empathyco/x-archetype-utils": "^1.0.0-alpha.4",
-    "@empathyco/x-components": "^3.0.0-alpha.422",
+    "@empathyco/x-components": "^3.0.1-alpha.1",
     "@empathyco/x-deep-merge": "^1.3.0-alpha.34",
     "@empathyco/x-types": "^10.0.0-alpha.75",
     "@empathyco/x-utils": "^1.0.0-alpha.23",
diff --git a/src/components/my-history/custom-my-history.vue b/src/components/my-history/custom-my-history.vue
index c59598a4..1f309ac0 100644
--- a/src/components/my-history/custom-my-history.vue
+++ b/src/components/my-history/custom-my-history.vue
@@ -16,26 +16,26 @@
             @click="closeModal"
             data-test="my-history-query"
             :suggestion="suggestion"
-            suggestionClass="x-suggestion x-w-[320px]"
+            suggestionClass="x-suggestion"
           >
             <HistoryIcon class="max-desktop:x-icon-lg" />
 
-            <div class="x-flex x-flex-col x-gap-2">
-              <p class="hover:x-underline">{{ suggestion.query }}</p>
+            <div class="x-group x-flex x-flex-col x-gap-2">
+              <p class="group-hover:x-underline">{{ suggestion.query }}</p>
               <div
-                v-if="suggestion.selectedFilters && suggestion.selectedFilters.length > 0"
-                class="x-text1-sm x-flex x-text-lead-50"
+                v-if="suggestion.selectedFilters && suggestion.selectedFilters.length"
+                class="x-text1-sm x-flex x-gap-8 x-text-lead-50"
               >
-                <p class="x-line-clamp-1">
+                <div class="x-line-clamp-1">
                   <span
                     v-for="filter in suggestion.selectedFilters"
                     :key="filter.id"
                     class="x-pr-8"
                   >
-                    {{ label(filter) }}
+                    {{ filter.label }}
                   </span>
-                </p>
-                <p class="x-pl-8">({{ suggestion.selectedFilters.length }})</p>
+                </div>
+                <span>({{ suggestion.selectedFilters.length }})</span>
               </div>
 
               <p class="x-text1 x-text1-sm x-text-neutral-75">
@@ -78,13 +78,8 @@
       HistoryQuery
     },
     setup() {
-      const label = (filter: Record<string, string>): string => {
-        return filter.label ?? filter.id;
-      };
-
       return {
-        animation: StaggeredFadeAndSlide,
-        label
+        animation: StaggeredFadeAndSlide
       };
     }
   });
diff --git a/src/components/predictive-layer/full-width-predictive.vue b/src/components/predictive-layer/full-width-predictive.vue
index a9f90dd5..6b7b2636 100644
--- a/src/components/predictive-layer/full-width-predictive.vue
+++ b/src/components/predictive-layer/full-width-predictive.vue
@@ -45,7 +45,31 @@
                             >
                               <template #default="{ query }">
                                 <HistoryIcon class="x-icon-md" />
-                                <Highlight :text="suggestion.query" :highlight="query" />
+                                <div class="x-group x-flex x-flex-col x-gap-2">
+                                  <Highlight
+                                    :text="suggestion.query"
+                                    :highlight="query"
+                                    class="group-hover:x-underline"
+                                  />
+                                  <div
+                                    v-if="
+                                      suggestion.selectedFilters &&
+                                      suggestion.selectedFilters.length
+                                    "
+                                    class="x-text1-sm x-flex x-text-lead-50"
+                                  >
+                                    <div class="x-line-clamp-1">
+                                      <span
+                                        v-for="filter in suggestion.selectedFilters"
+                                        :key="filter.id"
+                                        class="x-pr-8"
+                                      >
+                                        {{ filter.label }}
+                                      </span>
+                                    </div>
+                                    <span>({{ suggestion.selectedFilters.length }})</span>
+                                  </div>
+                                </div>
                               </template>
 
                               <template #remove-button-content>

From cc1700ffd47bc8bba820e54bb042838853812b07 Mon Sep 17 00:00:00 2001
From: Laura Martinez Garcia <lauram@empathy.co>
Date: Thu, 2 Nov 2023 08:54:39 +0100
Subject: [PATCH 16/20] feat(my-history): create new component for history
 query filters

---
 src/components/history-query-filters.vue      | 29 +++++++++++++++++++
 .../my-history/custom-my-history.vue          | 22 ++++----------
 .../full-width-predictive.vue                 | 26 +++++------------
 src/tailwind/plugin-options.js                |  3 --
 4 files changed, 42 insertions(+), 38 deletions(-)
 create mode 100644 src/components/history-query-filters.vue

diff --git a/src/components/history-query-filters.vue b/src/components/history-query-filters.vue
new file mode 100644
index 00000000..69fd2e48
--- /dev/null
+++ b/src/components/history-query-filters.vue
@@ -0,0 +1,29 @@
+<template>
+  <div
+    v-if="suggestion.selectedFilters && suggestion.selectedFilters.length"
+    class="x-text1-sm x-flex x-gap-8 x-text-lead-50"
+  >
+    <div class="x-truncate">
+      <span v-for="filter in suggestion.selectedFilters" :key="filter.id" class="x-pr-8">
+        {{ filter.label }}
+      </span>
+    </div>
+    <span>({{ suggestion.selectedFilters.length }})</span>
+  </div>
+</template>
+
+<script>
+  import { defineComponent } from 'vue';
+  import { HistoryQuery } from '@empathyco/x-components/history-queries';
+
+  export default defineComponent({
+    props: {
+      suggestion: {
+        type: HistoryQuery,
+        required: true
+      }
+    }
+  });
+</script>
+
+<style scoped></style>
diff --git a/src/components/my-history/custom-my-history.vue b/src/components/my-history/custom-my-history.vue
index 1f309ac0..85c0de33 100644
--- a/src/components/my-history/custom-my-history.vue
+++ b/src/components/my-history/custom-my-history.vue
@@ -17,26 +17,14 @@
             data-test="my-history-query"
             :suggestion="suggestion"
             suggestionClass="x-suggestion"
+            class="hover:x-no-underline"
           >
             <HistoryIcon class="max-desktop:x-icon-lg" />
 
             <div class="x-group x-flex x-flex-col x-gap-2">
               <p class="group-hover:x-underline">{{ suggestion.query }}</p>
-              <div
-                v-if="suggestion.selectedFilters && suggestion.selectedFilters.length"
-                class="x-text1-sm x-flex x-gap-8 x-text-lead-50"
-              >
-                <div class="x-line-clamp-1">
-                  <span
-                    v-for="filter in suggestion.selectedFilters"
-                    :key="filter.id"
-                    class="x-pr-8"
-                  >
-                    {{ filter.label }}
-                  </span>
-                </div>
-                <span>({{ suggestion.selectedFilters.length }})</span>
-              </div>
+
+              <HistoryQueryFilters class="x-w-192" :suggestion="suggestion"></HistoryQueryFilters>
 
               <p class="x-text1 x-text1-sm x-text-neutral-75">
                 {{ formatTime(suggestion.timestamp) }}
@@ -68,6 +56,7 @@
   } from '@empathyco/x-components';
   import { MyHistory, HistoryQuery } from '@empathyco/x-components/history-queries';
   import { defineComponent } from 'vue';
+  import HistoryQueryFilters from '../history-query-filters.vue';
 
   export default defineComponent({
     components: {
@@ -75,7 +64,8 @@
       CrossTinyIcon,
       HistoryIcon,
       MyHistory,
-      HistoryQuery
+      HistoryQuery,
+      HistoryQueryFilters
     },
     setup() {
       return {
diff --git a/src/components/predictive-layer/full-width-predictive.vue b/src/components/predictive-layer/full-width-predictive.vue
index 6b7b2636..1cac871a 100644
--- a/src/components/predictive-layer/full-width-predictive.vue
+++ b/src/components/predictive-layer/full-width-predictive.vue
@@ -39,7 +39,7 @@
                         >
                           <template #suggestion="{ suggestion }">
                             <HistoryQuery
-                              class="x-suggestion-group-md"
+                              class="x-suggestion-group-md hover:x-no-underline"
                               :suggestion="suggestion"
                               suggestionClass="x-suggestion x-suggestion-md"
                             >
@@ -51,24 +51,10 @@
                                     :highlight="query"
                                     class="group-hover:x-underline"
                                   />
-                                  <div
-                                    v-if="
-                                      suggestion.selectedFilters &&
-                                      suggestion.selectedFilters.length
-                                    "
-                                    class="x-text1-sm x-flex x-text-lead-50"
-                                  >
-                                    <div class="x-line-clamp-1">
-                                      <span
-                                        v-for="filter in suggestion.selectedFilters"
-                                        :key="filter.id"
-                                        class="x-pr-8"
-                                      >
-                                        {{ filter.label }}
-                                      </span>
-                                    </div>
-                                    <span>({{ suggestion.selectedFilters.length }})</span>
-                                  </div>
+                                  <HistoryQueryFilters
+                                    class="x-w-128"
+                                    :suggestion="suggestion"
+                                  ></HistoryQueryFilters>
                                 </div>
                               </template>
 
@@ -177,6 +163,7 @@
   import MaxDesktopWidthItem from '../max-desktop-width-item.vue';
   import { usePredictiveHelpers } from '../../composables/use-predictive-helpers.composable';
   import DesktopSearchboxAlign from '../desktop/desktop-searchbox-align.vue';
+  import HistoryQueryFilters from '../history-query-filters.vue';
   import SlidingRecommendations from './sliding-recommendations.vue';
   import PredictiveIdentifierResults from './predictive-identifier-results.vue';
   import PredictiveNextQueries from './predictive-next-queries.vue';
@@ -185,6 +172,7 @@
 
   export default defineComponent({
     components: {
+      HistoryQueryFilters,
       DesktopSearchboxAlign,
       MaxDesktopWidthItem,
       PredictiveQuerySuggestions,
diff --git a/src/tailwind/plugin-options.js b/src/tailwind/plugin-options.js
index b181cb6c..416e55fb 100644
--- a/src/tailwind/plugin-options.js
+++ b/src/tailwind/plugin-options.js
@@ -17,9 +17,6 @@ module.exports = {
         paddingTop: theme('spacing.24'),
         paddingBottom: theme('spacing.24')
       }
-    },
-    '.history-query.suggestion-group:hover': {
-      textDecoration: 'none'
     }
   })
 };

From 856c8194fe94f2605f7b443b739f04ebeda86b7e Mon Sep 17 00:00:00 2001
From: Laura Martinez Garcia <lauram@empathy.co>
Date: Thu, 2 Nov 2023 09:05:24 +0100
Subject: [PATCH 17/20] feat(my-history): remove line-clamp dependency

---
 package-lock.json  | 9 ---------
 package.json       | 1 -
 tailwind.config.js | 2 +-
 3 files changed, 1 insertion(+), 11 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 94df281c..0d7cefcf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,7 +16,6 @@
         "@empathyco/x-deep-merge": "^1.3.0-alpha.34",
         "@empathyco/x-types": "^10.0.0-alpha.75",
         "@empathyco/x-utils": "^1.0.0-alpha.23",
-        "@tailwindcss/line-clamp": "^0.4.4",
         "tslib": "~2.4.1",
         "vue": "~2.7.14",
         "vue-class-component": "~7.2.6",
@@ -3730,14 +3729,6 @@
       "integrity": "sha512-T7VNNlYVM1SgQ+VsMYhnDkcGmWhQdL0bDyGm5TlQ3GBXnJscEClUUOKduWTmm2zCnvNLC1hc3JpuXjs/nFOc5w==",
       "dev": true
     },
-    "node_modules/@tailwindcss/line-clamp": {
-      "version": "0.4.4",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/line-clamp/-/line-clamp-0.4.4.tgz",
-      "integrity": "sha512-5U6SY5z8N42VtrCrKlsTAA35gy2VSyYtHWCsg1H87NU1SXnEfekTVlrga9fzUDrrHcGi2Lb5KenUWb4lRQT5/g==",
-      "peerDependencies": {
-        "tailwindcss": ">=2.0.0 || >=3.0.0 || >=3.0.0-alpha.1"
-      }
-    },
     "node_modules/@tootallnate/once": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz",
diff --git a/package.json b/package.json
index 91076e50..24bbf1c1 100644
--- a/package.json
+++ b/package.json
@@ -36,7 +36,6 @@
     "@empathyco/x-deep-merge": "^1.3.0-alpha.34",
     "@empathyco/x-types": "^10.0.0-alpha.75",
     "@empathyco/x-utils": "^1.0.0-alpha.23",
-    "@tailwindcss/line-clamp": "^0.4.4",
     "tslib": "~2.4.1",
     "vue": "~2.7.14",
     "vue-class-component": "~7.2.6",
diff --git a/tailwind.config.js b/tailwind.config.js
index 5330c992..c1edfed1 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -10,5 +10,5 @@ module.exports = {
   ],
   prefix: 'x-',
   important: true,
-  plugins: [xTailwindPlugin(options), require('@tailwindcss/line-clamp')]
+  plugins: [xTailwindPlugin(options)]
 };

From b78ef5233cc93edb0ca72f82df5891039035d804 Mon Sep 17 00:00:00 2001
From: Laura Martinez Garcia <lauram@empathy.co>
Date: Thu, 2 Nov 2023 15:57:13 +0100
Subject: [PATCH 18/20] feat(my-history): fix pr comments

---
 src/components/history-query-filters.vue               | 10 ++++------
 src/components/my-history/custom-my-history.vue        |  2 +-
 .../predictive-layer/full-width-predictive.vue         |  5 +----
 src/components/predictive-layer/predictive-layer.vue   | 10 +++++++++-
 4 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/src/components/history-query-filters.vue b/src/components/history-query-filters.vue
index 69fd2e48..d6c4500d 100644
--- a/src/components/history-query-filters.vue
+++ b/src/components/history-query-filters.vue
@@ -12,18 +12,16 @@
   </div>
 </template>
 
-<script>
-  import { defineComponent } from 'vue';
-  import { HistoryQuery } from '@empathyco/x-components/history-queries';
+<script lang="ts">
+  import { HistoryQuery } from '@empathyco/x-types';
+  import { defineComponent, PropType } from 'vue';
 
   export default defineComponent({
     props: {
       suggestion: {
-        type: HistoryQuery,
+        type: Object as PropType<HistoryQuery>,
         required: true
       }
     }
   });
 </script>
-
-<style scoped></style>
diff --git a/src/components/my-history/custom-my-history.vue b/src/components/my-history/custom-my-history.vue
index 85c0de33..11ecfca9 100644
--- a/src/components/my-history/custom-my-history.vue
+++ b/src/components/my-history/custom-my-history.vue
@@ -24,7 +24,7 @@
             <div class="x-group x-flex x-flex-col x-gap-2">
               <p class="group-hover:x-underline">{{ suggestion.query }}</p>
 
-              <HistoryQueryFilters class="x-w-192" :suggestion="suggestion"></HistoryQueryFilters>
+              <HistoryQueryFilters class="x-w-224 desktop:x-w-320" :suggestion="suggestion" />
 
               <p class="x-text1 x-text1-sm x-text-neutral-75">
                 {{ formatTime(suggestion.timestamp) }}
diff --git a/src/components/predictive-layer/full-width-predictive.vue b/src/components/predictive-layer/full-width-predictive.vue
index 1cac871a..15681d00 100644
--- a/src/components/predictive-layer/full-width-predictive.vue
+++ b/src/components/predictive-layer/full-width-predictive.vue
@@ -51,10 +51,7 @@
                                     :highlight="query"
                                     class="group-hover:x-underline"
                                   />
-                                  <HistoryQueryFilters
-                                    class="x-w-128"
-                                    :suggestion="suggestion"
-                                  ></HistoryQueryFilters>
+                                  <HistoryQueryFilters class="x-w-128" :suggestion="suggestion" />
                                 </div>
                               </template>
 
diff --git a/src/components/predictive-layer/predictive-layer.vue b/src/components/predictive-layer/predictive-layer.vue
index 8031bf8e..c367b2ed 100644
--- a/src/components/predictive-layer/predictive-layer.vue
+++ b/src/components/predictive-layer/predictive-layer.vue
@@ -56,7 +56,13 @@
                   >
                     <template #default="{ query }">
                       <HistoryIcon class="x-icon-lg desktop:x-icon-md" />
-                      <Highlight :text="suggestion.query" :highlight="query" />
+                      <div class="x-group x-flex x-flex-col x-gap-2">
+                        <Highlight :text="suggestion.query" :highlight="query" />
+                        <HistoryQueryFilters
+                          class="x-w-192 desktop:x-w-128"
+                          :suggestion="suggestion"
+                        />
+                      </div>
                     </template>
 
                     <template #remove-button-content>
@@ -129,6 +135,7 @@
   import { defineComponent } from 'vue';
   import { useDevice } from '../../composables/use-device.composable';
   import { usePredictiveHelpers } from '../../composables/use-predictive-helpers.composable';
+  import HistoryQueryFilters from '../history-query-filters.vue';
   import SlidingRecommendations from './sliding-recommendations.vue';
   import PredictiveIdentifierResults from './predictive-identifier-results.vue';
   import PredictiveQuerySuggestions from './predictive-query-suggestions.vue';
@@ -137,6 +144,7 @@
 
   export default defineComponent({
     components: {
+      HistoryQueryFilters,
       BaseScroll,
       PredictivePopularSearches,
       PredictiveNextQueries,

From ffc44418957a7d07795064ef06a5abe6bd34dbf0 Mon Sep 17 00:00:00 2001
From: Laura Martinez Garcia <lauram@empathy.co>
Date: Thu, 2 Nov 2023 16:13:12 +0100
Subject: [PATCH 19/20] feat(my-history): change history query filters' prop

---
 src/components/history-query-filters.vue            | 13 +++++--------
 src/components/my-history/custom-my-history.vue     |  5 ++++-
 .../predictive-layer/full-width-predictive.vue      |  5 ++++-
 .../predictive-layer/predictive-layer.vue           |  2 +-
 4 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/src/components/history-query-filters.vue b/src/components/history-query-filters.vue
index d6c4500d..e5f83d58 100644
--- a/src/components/history-query-filters.vue
+++ b/src/components/history-query-filters.vue
@@ -1,14 +1,11 @@
 <template>
-  <div
-    v-if="suggestion.selectedFilters && suggestion.selectedFilters.length"
-    class="x-text1-sm x-flex x-gap-8 x-text-lead-50"
-  >
+  <div v-if="filtersList && filtersList.length" class="x-text1-sm x-flex x-gap-8 x-text-lead-50">
     <div class="x-truncate">
-      <span v-for="filter in suggestion.selectedFilters" :key="filter.id" class="x-pr-8">
+      <span v-for="filter in filtersList" :key="filter.id" class="x-pr-8">
         {{ filter.label }}
       </span>
     </div>
-    <span>({{ suggestion.selectedFilters.length }})</span>
+    <span>({{ filtersList.length }})</span>
   </div>
 </template>
 
@@ -18,8 +15,8 @@
 
   export default defineComponent({
     props: {
-      suggestion: {
-        type: Object as PropType<HistoryQuery>,
+      filtersList: {
+        type: Array as PropType<HistoryQuery['selectedFilters']>,
         required: true
       }
     }
diff --git a/src/components/my-history/custom-my-history.vue b/src/components/my-history/custom-my-history.vue
index 11ecfca9..ec305c41 100644
--- a/src/components/my-history/custom-my-history.vue
+++ b/src/components/my-history/custom-my-history.vue
@@ -24,7 +24,10 @@
             <div class="x-group x-flex x-flex-col x-gap-2">
               <p class="group-hover:x-underline">{{ suggestion.query }}</p>
 
-              <HistoryQueryFilters class="x-w-224 desktop:x-w-320" :suggestion="suggestion" />
+              <HistoryQueryFilters
+                class="x-w-224 desktop:x-w-320"
+                :filtersList="suggestion.selectedFilters"
+              />
 
               <p class="x-text1 x-text1-sm x-text-neutral-75">
                 {{ formatTime(suggestion.timestamp) }}
diff --git a/src/components/predictive-layer/full-width-predictive.vue b/src/components/predictive-layer/full-width-predictive.vue
index 15681d00..fe8344d2 100644
--- a/src/components/predictive-layer/full-width-predictive.vue
+++ b/src/components/predictive-layer/full-width-predictive.vue
@@ -51,7 +51,10 @@
                                     :highlight="query"
                                     class="group-hover:x-underline"
                                   />
-                                  <HistoryQueryFilters class="x-w-128" :suggestion="suggestion" />
+                                  <HistoryQueryFilters
+                                    class="x-w-128"
+                                    :filtersList="suggestion.selectedFilters"
+                                  />
                                 </div>
                               </template>
 
diff --git a/src/components/predictive-layer/predictive-layer.vue b/src/components/predictive-layer/predictive-layer.vue
index c367b2ed..b36745e4 100644
--- a/src/components/predictive-layer/predictive-layer.vue
+++ b/src/components/predictive-layer/predictive-layer.vue
@@ -60,7 +60,7 @@
                         <Highlight :text="suggestion.query" :highlight="query" />
                         <HistoryQueryFilters
                           class="x-w-192 desktop:x-w-128"
-                          :suggestion="suggestion"
+                          :filtersList="suggestion.selectedFilters"
                         />
                       </div>
                     </template>

From 94aec1e82747043d8468e26789e73bb07f0daa02 Mon Sep 17 00:00:00 2001
From: Laura Martinez Garcia <lauram@empathy.co>
Date: Thu, 2 Nov 2023 16:17:03 +0100
Subject: [PATCH 20/20] feat(my-history): underline only the query

---
 src/components/predictive-layer/predictive-layer.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/predictive-layer/predictive-layer.vue b/src/components/predictive-layer/predictive-layer.vue
index b36745e4..e1535ee8 100644
--- a/src/components/predictive-layer/predictive-layer.vue
+++ b/src/components/predictive-layer/predictive-layer.vue
@@ -50,14 +50,18 @@
               >
                 <template #suggestion="{ suggestion }">
                   <HistoryQuery
-                    class="x-suggestion-group-lg desktop:x-suggestion-group-md"
+                    class="x-suggestion-group-lg hover:x-no-underline desktop:x-suggestion-group-md"
                     :suggestion="suggestion"
                     suggestionClass="x-suggestion x-suggestion-lg desktop:x-suggestion-md"
                   >
                     <template #default="{ query }">
                       <HistoryIcon class="x-icon-lg desktop:x-icon-md" />
                       <div class="x-group x-flex x-flex-col x-gap-2">
-                        <Highlight :text="suggestion.query" :highlight="query" />
+                        <Highlight
+                          :text="suggestion.query"
+                          :highlight="query"
+                          class="group-hover:x-underline"
+                        />
                         <HistoryQueryFilters
                           class="x-w-192 desktop:x-w-128"
                           :filtersList="suggestion.selectedFilters"