From 64464f21e5cdb4e9ca592f65cc2e68f2d9cf808b Mon Sep 17 00:00:00 2001
From: Carlos <57149778+C4rlos99@users.noreply.github.com>
Date: Thu, 13 Feb 2025 14:30:44 +0100
Subject: [PATCH] refactor(related-prompt-tag-list): code improvement

---
 packages/x-components/src/views/home/Home.vue |  25 ++-
 .../related-prompts-tag-list.spec.ts          | 178 +++++++++++-------
 .../components/related-prompt.vue             |   3 +-
 .../components/related-prompts-tag-list.vue   | 114 ++++++-----
 4 files changed, 191 insertions(+), 129 deletions(-)

diff --git a/packages/x-components/src/views/home/Home.vue b/packages/x-components/src/views/home/Home.vue
index 064ab6a456..f21bae5bb6 100644
--- a/packages/x-components/src/views/home/Home.vue
+++ b/packages/x-components/src/views/home/Home.vue
@@ -391,10 +391,21 @@
                           <template #related-prompts-group>
                             <RelatedPromptsTagList
                               :button-class="'x-button-lead x-button-circle x-button-ghost x-p-0'"
-                              :related-prompt-class="'x-p-20 x-rounded-xl x-w-[300px] x-max-w-[400px] x-gap-8'"
-                              :tag-colors="['x-bg-amber-300', 'x-bg-amber-400', 'x-bg-amber-500']"
                               class="-x-mb-1 x-mt-24 desktop:x-mt-0 x-p-0 x-h-[70px]"
-                            />
+                              tag-class="x-rounded-xl x-gap-8 x-w-[300px]
+                          x-max-w-[400px]"
+                              :tag-colors="['x-bg-amber-300', 'x-bg-amber-400', 'x-bg-amber-500']"
+                            >
+                              <template #default="{ relatedPrompt, isSelected, onSelect }">
+                                <RelatedPrompt
+                                  @click="onSelect"
+                                  :related-prompt="relatedPrompt"
+                                  :selected="isSelected"
+                                  data-wysiwyg="related-prompt"
+                                  :data-wysiwyg-id="relatedPrompt.suggestionText"
+                                />
+                              </template>
+                            </RelatedPromptsTagList>
                             <QueryPreviewList
                               v-if="selectedPrompt !== ''"
                               :queries-preview-info="relatedPromptsQueriesPreviewInfo"
@@ -521,7 +532,7 @@
 <script lang="ts">
   /* eslint-disable max-len */
   import { computed, ComputedRef, defineComponent, provide, ref } from 'vue';
-  import { RelatedPrompt } from '@empathyco/x-types';
+  import { RelatedPrompt as RelatedPromptModel } from '@empathyco/x-types';
   import { animateClipPath } from '../../components/animations/animate-clip-path/animate-clip-path.factory';
   import StaggeredFadeAndSlide from '../../components/animations/staggered-fade-and-slide.vue';
   import AutoProgressBar from '../../components/auto-progress-bar.vue';
@@ -584,6 +595,7 @@
   import { QueryPreviewInfo } from '../../x-modules/queries-preview/store/types';
   import QueryPreviewButton from '../../x-modules/queries-preview/components/query-preview-button.vue';
   import DisplayEmitter from '../../components/display-emitter.vue';
+  import RelatedPrompt from '../../x-modules/related-prompts/components/related-prompt.vue';
   import RelatedPromptsList from '../../x-modules/related-prompts/components/related-prompts-list.vue';
   import RelatedPromptsTagList from '../../x-modules/related-prompts/components/related-prompts-tag-list.vue';
   import ArrowRightIcon from '../../components/icons/arrow-right.vue';
@@ -627,6 +639,7 @@
       NextQueriesList,
       NextQuery,
       NextQueryPreview,
+      RelatedPrompt,
       RelatedPromptsList,
       RelatedPromptsTagList,
       OpenMainModal,
@@ -717,7 +730,7 @@
       const { relatedPrompts } = useState('relatedPrompts', ['relatedPrompts']);
 
       const relatedPromptsProducts = computed(
-        (): RelatedPrompt[] => relatedPrompts.value[x.query.search]?.relatedPromptsProducts
+        (): RelatedPromptModel[] => relatedPrompts.value[x.query.search]?.relatedPromptsProducts
       );
 
       const selectedPrompt = computed(() => relatedPrompts.value[x.query.search]?.selectedPrompt);
@@ -725,7 +738,7 @@
       const relatedPromptsQueriesPreviewInfo = computed(() => {
         if (relatedPromptsProducts.value) {
           const relatedPromptQueries = relatedPromptsProducts.value.find(
-            (relatedPrompt: RelatedPrompt) => relatedPrompt.id === selectedPrompt.value
+            (relatedPrompt: RelatedPromptModel) => relatedPrompt.id === selectedPrompt.value
           );
           const queries = relatedPromptQueries?.nextQueries as string[];
           return queries.map(query => ({ query }));
diff --git a/packages/x-components/src/x-modules/related-prompts/components/__tests__/related-prompts-tag-list.spec.ts b/packages/x-components/src/x-modules/related-prompts/components/__tests__/related-prompts-tag-list.spec.ts
index e7262bc9c9..0259b3c860 100644
--- a/packages/x-components/src/x-modules/related-prompts/components/__tests__/related-prompts-tag-list.spec.ts
+++ b/packages/x-components/src/x-modules/related-prompts/components/__tests__/related-prompts-tag-list.spec.ts
@@ -1,5 +1,5 @@
 /* eslint-disable jest/no-conditional-expect */
-import { nextTick, ref, TransitionGroup } from 'vue';
+import { nextTick, reactive, ref, TransitionGroup } from 'vue';
 import { mount } from '@vue/test-utils';
 import SlidingPanel from '../../../../components/sliding-panel.vue';
 import RelatedPrompt from '../related-prompt.vue';
@@ -8,10 +8,10 @@ import relatedPromptsTagList from '../related-prompts-tag-list.vue';
 
 const relatedPromptsStub = getRelatedPromptsStub(5);
 const selectedPromptIndexStub = ref(-1);
-const queryStub = ref('query');
+const queryStub = reactive({ search: 'query' });
 const propsStub = {
   buttonClass: 'button-class',
-  relatedPromptClass: 'related-prompt-class',
+  tagClass: 'related-prompt-class',
   tagColors: ['color1', 'color2', 'color3'],
   animationDurationInMs: 4000
 };
@@ -28,9 +28,7 @@ const xEmitMock = jest.fn((event: string, payload: number) => {
 jest.mock('../../../../composables', () => ({
   use$x: jest.fn(() => ({
     emit: (event: string, payload: number) => xEmitMock(event, payload),
-    query: {
-      search: queryStub
-    }
+    query: queryStub
   })),
   useState: (module: string, paths: string[]) => xUseStateMock(module, paths)
 }));
@@ -65,7 +63,6 @@ const coloredRelatedPromptsStub = relatedPromptsStub.map((relatedPrompt, index)
 }));
 
 global.requestAnimationFrame = cb => setTimeout(cb, propsStub.animationDurationInMs - 1);
-jest.useFakeTimers();
 
 function render() {
   const wrapper = mount(relatedPromptsTagList, {
@@ -76,6 +73,9 @@ function render() {
     wrapper,
     slidingPanel: wrapper.findComponent(SlidingPanel),
     transitionGroup: wrapper.findComponent(TransitionGroup),
+    get listItems() {
+      return wrapper.findAll('[data-test="related-prompts-tag-list-item"]');
+    },
     get relatedPrompts() {
       return wrapper.findAllComponents(RelatedPrompt);
     }
@@ -85,12 +85,21 @@ function render() {
 describe('relatedPromptsTagList component', () => {
   beforeEach(() => {
     jest.restoreAllMocks();
+    jest.useFakeTimers();
     selectedPromptIndexStub.value = -1;
+    queryStub.search = 'query';
+  });
+
+  afterEach(() => {
+    jest.clearAllTimers();
   });
 
-  it('should render correctly', () => {
+  it('should render correctly', async () => {
     const sut = render();
 
+    jest.runAllTimers(); // setTimeout from inmediate watch callback implementation
+    await nextTick();
+
     expect(xUseStateMock).toHaveBeenCalledWith('relatedPrompts', [
       'relatedPrompts',
       'selectedPrompt'
@@ -103,13 +112,16 @@ describe('relatedPromptsTagList component', () => {
     expect(sut.transitionGroup.props().appear).toBeDefined();
     expect(sut.transitionGroup.props().appear).not.toStrictEqual(false);
 
+    expect(sut.listItems).toHaveLength(relatedPromptsStub.length);
     expect(sut.relatedPrompts).toHaveLength(relatedPromptsStub.length);
     coloredRelatedPromptsStub.forEach(({ colorClass, index, ...relatedPrompt }) => {
+      expect(sut.listItems[index].classes()).toContain(propsStub.tagClass);
+      expect(sut.listItems[index].classes()).toContain(colorClass);
+      expect(sut.listItems[index].attributes('data-index')).toBe(index.toString());
+      expect((sut.listItems[index].element as HTMLElement).style.pointerEvents).toBe('');
+
       expect(sut.relatedPrompts[index].props().relatedPrompt).toStrictEqual(relatedPrompt);
-      expect(sut.relatedPrompts[index].classes()).toContain(colorClass);
-      expect(sut.relatedPrompts[index].classes()).toContain(propsStub.relatedPromptClass);
-      expect(sut.relatedPrompts[index].attributes('data-index')).toBe(index.toString());
-      expect(sut.relatedPrompts[index].attributes('disabled')).toBeFalsy();
+      expect(sut.relatedPrompts[index].props().selected).toBeFalsy();
     });
   });
 
@@ -119,87 +131,98 @@ describe('relatedPromptsTagList component', () => {
 
     const sut = render();
 
-    queryStub.value = 'new query';
+    jest.runAllTimers(); // setTimeout from inmediate watch callback implementation
+    await nextTick();
+
+    queryStub.search = 'new query';
     await nextTick(); // watch callback
 
-    sut.relatedPrompts[selectedPromptIndex].element.style.width = widthStub; // Mocking selected RP style
+    (sut.listItems[selectedPromptIndex].element as HTMLElement).style.width = widthStub; // Mocking selected RP style
 
-    sut.relatedPrompts.forEach(relatedPrompt => {
-      expect(relatedPrompt.attributes('disabled')).toBeDefined();
-      expect(relatedPrompt.attributes('disabled')).not.toStrictEqual(false);
+    sut.listItems.forEach(listItem => {
+      const listItemElement = listItem.element as HTMLElement;
+
+      expect(listItemElement.style.pointerEvents).toBe('none');
     });
 
-    jest.runAllTimers(); // setTimeout from resetRelatedPromptsStyle function
+    jest.runAllTimers(); // setTimeout from resetTransitionStyle function
+
+    sut.listItems.forEach((listItem, index) => {
+      const listItemElement = listItem.element as HTMLElement;
 
-    sut.relatedPrompts.forEach((relatedPrompt, index) => {
-      expect(relatedPrompt.attributes('disabled')).toBeFalsy();
+      expect(listItemElement.style.pointerEvents).toBe('');
 
       if (index === selectedPromptIndex) {
-        expect(relatedPrompt.element.style).toHaveLength(1);
-        expect(relatedPrompt.element.style.width).toBe(widthStub);
+        expect(listItemElement.style).toHaveLength(1);
+        expect(listItemElement.style.width).toBe(widthStub);
       } else {
-        expect(relatedPrompt.element.style).toHaveLength(0);
+        expect(listItemElement.style).toHaveLength(0);
       }
     });
   });
 
-  it('should reset the state propperly when clicking a relatedPrompt', async () => {
-    const clickedRelatedPrompt = 1;
+  it('should reset the state propperly when clicking a list item', async () => {
+    const clickedRelatedPromptIndex = 1;
     const widthStub = '100px';
 
     const sut = render();
 
-    await sut.relatedPrompts[clickedRelatedPrompt].trigger('click');
+    await sut.listItems[clickedRelatedPromptIndex].trigger('click');
 
-    sut.relatedPrompts[clickedRelatedPrompt].element.style.width = widthStub; // Mocking selected RP style
+    (sut.listItems[clickedRelatedPromptIndex].element as HTMLElement).style.width = widthStub; // Mocking selected RP style
 
-    sut.relatedPrompts.forEach(relatedPrompt => {
-      expect(relatedPrompt.attributes('disabled')).toBeDefined();
-      expect(relatedPrompt.attributes('disabled')).not.toStrictEqual(false);
+    sut.listItems.forEach(listItem => {
+      const listItemElement = listItem.element as HTMLElement;
+
+      expect(listItemElement.style.pointerEvents).toBe('none');
     });
 
-    jest.runAllTimers(); // setTimeout from resetRelatedPromptsStyle function
+    jest.runAllTimers(); // setTimeout from resetTransitionStyle function
+
+    sut.listItems.forEach((listItem, index) => {
+      const listItemElement = listItem.element as HTMLElement;
 
-    sut.relatedPrompts.forEach((relatedPrompt, index) => {
-      expect(relatedPrompt.attributes('disabled')).toBeFalsy();
+      expect(listItemElement.style.pointerEvents).toBe('');
 
-      if (index === clickedRelatedPrompt) {
-        expect(relatedPrompt.element.style).toHaveLength(1);
-        expect(relatedPrompt.element.style.width).toBe(widthStub);
+      if (index === clickedRelatedPromptIndex) {
+        expect(listItemElement.style).toHaveLength(1);
+        expect(listItemElement.style.width).toBe(widthStub);
       } else {
-        expect(relatedPrompt.element.style).toHaveLength(0);
+        expect(listItemElement.style).toHaveLength(0);
       }
     });
   });
 
-  it('should execute RelatedPrompt click callback correctly when selecting a selected RP', async () => {
+  it('should execute click callback correctly when selecting a RP', async () => {
     selectedPromptIndexStub.value = -1;
+    const clickedRelatedPromptIndex = 1;
     const singleAnimationDurationStub =
       propsStub.animationDurationInMs / (relatedPromptsStub.length - 1);
-    const clickedRelatedPrompt = 1;
 
     const sut = render();
 
     jest.runAllTimers(); // setTimeout from inmediate watch callback implementation
     await nextTick();
 
-    await sut.relatedPrompts[clickedRelatedPrompt].trigger('click');
+    await sut.relatedPrompts[clickedRelatedPromptIndex].trigger('click');
 
     // Prepare the animation
-    sut.relatedPrompts.forEach((relatedPrompt, index) => {
-      expect(relatedPrompt.element.style.left).toBe(`${offsetLeftsStub[index]}px`);
-      expect(relatedPrompt.element.style.position).toBe('absolute');
-      expect(relatedPrompt.element.style.transitionDuration).toBe(
-        `${singleAnimationDurationStub}ms`
-      );
-
-      if (index !== clickedRelatedPrompt) {
-        expect(relatedPrompt.element.style.opacity).toBe('1');
-        expect(relatedPrompt.element.style.transitionDelay).toBe(
-          `${(index < clickedRelatedPrompt ? index : index - 1) * singleAnimationDurationStub}ms`
+    sut.listItems.forEach((listItem, index) => {
+      const listItemElement = listItem.element as HTMLElement;
+
+      expect(listItemElement.style.left).toBe(`${offsetLeftsStub[index]}px`);
+      expect(listItemElement.style.position).toBe('absolute');
+      expect(listItemElement.style.transitionDuration).toBe(`${singleAnimationDurationStub}ms`);
+
+      if (index !== clickedRelatedPromptIndex) {
+        expect(listItemElement.style.opacity).toBe('1');
+        expect(listItemElement.style.transitionDelay).toBe(
+          `${
+            (index < clickedRelatedPromptIndex ? index : index - 1) * singleAnimationDurationStub
+          }ms`
         );
       } else {
-        expect(relatedPrompt.element.style.transitionDelay).toBe(
+        expect(listItemElement.style.transitionDelay).toBe(
           `${
             (relatedPromptsStub.length > 1 ? relatedPromptsStub.length - 2 : 0) *
             singleAnimationDurationStub
@@ -212,19 +235,19 @@ describe('relatedPromptsTagList component', () => {
     jest.advanceTimersByTime(propsStub.animationDurationInMs - 1); // only requestAnimationFrame execution
     await nextTick();
 
-    expect(getComputedStyleMock).toHaveBeenCalledWith(
-      sut.relatedPrompts[clickedRelatedPrompt].element
-    );
+    const selectedElement = sut.listItems[clickedRelatedPromptIndex].element as HTMLElement;
+
+    expect(getComputedStyleMock).toHaveBeenCalledWith(selectedElement);
 
-    expect(sut.relatedPrompts[clickedRelatedPrompt].element.style.width).toBe(`${maxWidthStub}`);
-    expect(sut.relatedPrompts[clickedRelatedPrompt].element.style.left).toBe('0px');
+    expect(selectedElement.style.width).toBe(`${maxWidthStub}`);
+    expect(selectedElement.style.left).toBe('0px');
 
-    expect(xEmitMock).toHaveBeenCalledWith('UserSelectedARelatedPrompt', clickedRelatedPrompt);
+    expect(xEmitMock).toHaveBeenCalledWith('UserSelectedARelatedPrompt', clickedRelatedPromptIndex);
   });
 
   it('should execute RelatedPrompt click callback correctly when deselecting a selected RP', async () => {
     selectedPromptIndexStub.value = -1;
-    const clickedRelatedPrompt = 1;
+    const clickedRelatedPromptIndex = 1;
     const singleAnimationDurationStub =
       propsStub.animationDurationInMs / (relatedPromptsStub.length - 1);
 
@@ -233,8 +256,8 @@ describe('relatedPromptsTagList component', () => {
     jest.runAllTimers(); // setTimeout from inmediate watch callback implementation
     await nextTick();
 
-    await sut.relatedPrompts[clickedRelatedPrompt].trigger('click'); // Selecting a RP
-    selectedPromptIndexStub.value = clickedRelatedPrompt;
+    await sut.relatedPrompts[clickedRelatedPromptIndex].trigger('click'); // Selecting a RP
+    selectedPromptIndexStub.value = clickedRelatedPromptIndex;
 
     jest.runAllTimers(); // Force the selecting to be done
     await nextTick();
@@ -242,21 +265,19 @@ describe('relatedPromptsTagList component', () => {
     await sut.relatedPrompts[0].trigger('click'); // 0 is now the selected RP (the others are not rendered)
 
     // Prepare the animation
-    expect(sut.relatedPrompts[0].element.style.position).toBe('absolute');
-    expect(sut.relatedPrompts[0].element.style.left).toBe('0px');
-    expect(sut.relatedPrompts[0].element.style.transitionDuration).toBe(
-      `${singleAnimationDurationStub}ms`
-    );
+    const selectedElement = sut.listItems[0].element as HTMLElement;
+
+    expect(selectedElement.style.position).toBe('absolute');
+    expect(selectedElement.style.left).toBe('0px');
+    expect(selectedElement.style.transitionDuration).toBe(`${singleAnimationDurationStub}ms`);
 
     // Trigger the animation
-    expect(sut.relatedPrompts[0].element.style.width).toBe('');
+    expect(selectedElement.style.width).toBe('');
 
     jest.advanceTimersByTime(propsStub.animationDurationInMs - 1); // only requestAnimationFrame execution
     await nextTick();
 
-    expect(sut.relatedPrompts[0].element.style.left).toBe(
-      `${offsetLeftsStub[selectedPromptIndexStub.value]}px`
-    );
+    expect(selectedElement.style.left).toBe(`${offsetLeftsStub[selectedPromptIndexStub.value]}px`);
 
     expect(xEmitMock).toHaveBeenCalledWith(
       'UserSelectedARelatedPrompt',
@@ -264,6 +285,23 @@ describe('relatedPromptsTagList component', () => {
     );
   });
 
+  it('should render only the selected RP', async () => {
+    selectedPromptIndexStub.value = 1;
+
+    const sut = render();
+
+    jest.runAllTimers(); // setTimeout from inmediate watch callback implementation
+    await nextTick();
+
+    expect(sut.listItems).toHaveLength(1);
+    expect(sut.relatedPrompts).toHaveLength(1);
+    expect(sut.listItems[0].attributes('data-index')).toBe(`${selectedPromptIndexStub.value}`);
+    expect(sut.relatedPrompts[0].props().relatedPrompt).toStrictEqual(
+      relatedPromptsStub[selectedPromptIndexStub.value]
+    );
+    expect(sut.relatedPrompts[0].props().selected).toBeTruthy();
+  });
+
   //TODO: Test the transition group callbacks
 });
 /* eslint-enable jest/no-conditional-expect */
diff --git a/packages/x-components/src/x-modules/related-prompts/components/related-prompt.vue b/packages/x-components/src/x-modules/related-prompts/components/related-prompt.vue
index 7e039e3555..c0de7abc05 100644
--- a/packages/x-components/src/x-modules/related-prompts/components/related-prompt.vue
+++ b/packages/x-components/src/x-modules/related-prompts/components/related-prompt.vue
@@ -1,5 +1,5 @@
 <template>
-  <button class="x-related-prompt" aria-pressed="true" tabindex="0">
+  <button class="x-related-prompt">
     <slot name="extra-content" />
     <span v-typing="{ text: relatedPrompt.suggestionText, speed: 50 }" />
     <component
@@ -51,6 +51,7 @@
     text-align: start;
     padding: 8px;
     height: 100%;
+    width: 100%;
   }
   .x-related-prompt-icon {
     align-self: start;
diff --git a/packages/x-components/src/x-modules/related-prompts/components/related-prompts-tag-list.vue b/packages/x-components/src/x-modules/related-prompts/components/related-prompts-tag-list.vue
index c4cd2032d8..34f404a0a9 100644
--- a/packages/x-components/src/x-modules/related-prompts/components/related-prompts-tag-list.vue
+++ b/packages/x-components/src/x-modules/related-prompts/components/related-prompts-tag-list.vue
@@ -14,24 +14,32 @@
       @leave="onLeave"
       class="x-related-prompts-tag-list"
       :css="false"
-      tag="div"
+      tag="ul"
       appear
     >
-      <RelatedPrompt
-        v-for="{ colorClass, index, ...relatedPrompt } in visibleRelatedPrompts"
-        ref="relatedPromptComponents"
+      <li
+        v-for="{ index, ...relatedPrompt } in visibleRelatedPrompts"
+        ref="listItems"
         :key="relatedPrompt.suggestionText"
-        @click="onSelect(index)"
-        :related-prompt="relatedPrompt"
-        :selected="isSelected(index)"
-        :class="[relatedPromptClass, colorClass]"
+        class="x-related-prompts-tag-list-item"
+        :class="[tagClass, tagColors && tagColors[index % tagColors.length]]"
         :data-index="index"
-        :disabled="isAnimating"
+        :style="isAnimating && { pointerEvents: 'none' }"
+        data-test="related-prompts-tag-list-item"
       >
-        <template #extra-content>
-          <slot name="related-prompt-extra-content" v-bind="{ relatedPrompt }" />
-        </template>
-      </RelatedPrompt>
+        <slot
+          :index="index"
+          :relatedPrompt="relatedPrompt"
+          :onSelect="() => onSelect(index)"
+          :isSelected="isSelected(index)"
+        >
+          <RelatedPrompt
+            @click="onSelect(index)"
+            :related-prompt="relatedPrompt"
+            :selected="isSelected(index)"
+          />
+        </slot>
+      </li>
     </transition-group>
     <template #sliding-panel-right-button>
       <slot name="sliding-panel-right-button" />
@@ -53,14 +61,11 @@
     components: { RelatedPrompt, SlidingPanel },
     props: {
       buttonClass: String,
-      relatedPromptClass: String,
-      tagColors: {
-        type: Array as PropType<string[]>,
-        default: () => ['x-bg-amber-100', 'x-bg-amber-200', 'x-bg-amber-300']
-      },
+      tagClass: String,
+      tagColors: Array as PropType<string[]>,
       animationDurationInMs: {
         type: Number,
-        default: 700
+        default: 2000
       }
     },
     setup(props) {
@@ -70,37 +75,34 @@
         'selectedPrompt'
       ]);
 
-      const clickedRelatedPromptIndex = ref<number | null>(null);
+      const clickedListItemIndex = ref<number | null>(null);
       const initialOffsetLefts: Record<number, number> = {};
       const isAnimating = ref(false);
-      const relatedPromptComponents = ref<InstanceType<typeof RelatedPrompt>[]>([]);
-
-      const relatedPromptElements = computed<HTMLElement[]>(() =>
-        relatedPromptComponents.value
-          .map(component => component.$el)
-          .sort(
-            (a: HTMLElement, b: HTMLElement) =>
-              Number.parseInt(b.getAttribute('data-index')!) -
-              Number.parseInt(a.getAttribute('data-index')!)
-          )
+      const listItems = ref<HTMLElement[]>([]);
+
+      const sortedListItems = computed<HTMLElement[]>(() =>
+        [...listItems.value].sort(
+          (a: HTMLElement, b: HTMLElement) =>
+            Number.parseInt(b.getAttribute('data-index')!) -
+            Number.parseInt(a.getAttribute('data-index')!)
+        )
       );
 
       // The duration of a single animation (enter or leave) in milliseconds
-      // if a related prompt is clicked (clickedRelatedPromptIndex.value !== null), the duration is divided by the number of related
+      // if a related prompt is clicked (clickedListItemIndex.value !== null), the duration is divided by the number of related
       // prompts -1 (the clicked one is synchronized with the last one to leave or the first one to enter)
       const singleAnimationDurationInMs = computed(
         () =>
           props.animationDurationInMs /
-          (clickedRelatedPromptIndex.value !== null
+          (clickedListItemIndex.value !== null
             ? relatedPrompts.value.length - 1
             : relatedPrompts.value.length)
       );
 
-      const coloredRelatedPrompts = computed(() =>
+      const indexRelatedPrompts = computed(() =>
         (relatedPrompts.value as RelatedPromptModel[]).map(
           (relatedPrompt: RelatedPromptModel, index: number) => ({
             ...relatedPrompt,
-            colorClass: props.tagColors[index % props.tagColors.length],
             index
           })
         )
@@ -108,35 +110,39 @@
 
       const visibleRelatedPrompts = computed(() => {
         return selectedPromptIndex.value !== -1
-          ? [coloredRelatedPrompts.value[selectedPromptIndex.value]]
-          : coloredRelatedPrompts.value;
+          ? [indexRelatedPrompts.value[selectedPromptIndex.value]]
+          : indexRelatedPrompts.value;
       });
 
       let timeOutId: number;
-      const resetRelatedPromptsStyle = () => {
+      const resetTransitionStyle = () => {
         if (timeOutId) {
           clearTimeout(timeOutId);
         }
+
         isAnimating.value = true;
         timeOutId = +setTimeout(() => {
           isAnimating.value = false;
-          clickedRelatedPromptIndex.value = null;
-
-          relatedPromptElements.value.forEach(element => {
-            Object.keys(element.style).forEach(property => {
-              if (property !== 'width') {
-                element.style.removeProperty(property);
-              }
-            });
+          clickedListItemIndex.value = null;
+
+          sortedListItems.value.forEach(element => {
+            element.style.cssText
+              .split(';')
+              .map(rule => rule.split(':')[0]?.trim())
+              .forEach(property => {
+                if (property !== 'width') {
+                  element.style.removeProperty(property);
+                }
+              });
           });
         }, props.animationDurationInMs);
       };
 
       const onSelect = (selectedIndex: number): void => {
-        resetRelatedPromptsStyle();
+        resetTransitionStyle();
 
-        clickedRelatedPromptIndex.value = selectedIndex;
-        const selected: HTMLElement = relatedPromptElements.value.find(
+        clickedListItemIndex.value = selectedIndex;
+        const selected: HTMLElement = sortedListItems.value.find(
           element => Number.parseInt(element.getAttribute('data-index')!) === selectedIndex
         )!;
 
@@ -144,7 +150,7 @@
         if (selectedPromptIndex.value === -1) {
           // Prepare all the elements for the leave animation (~ 'beforeLeave' hook). Remember the elements are
           // sorted in descending order by index.
-          relatedPromptElements.value.forEach(element => {
+          sortedListItems.value.forEach(element => {
             const index = Number.parseInt(element.getAttribute('data-index')!);
 
             initialOffsetLefts[index] = element.offsetLeft;
@@ -179,6 +185,7 @@
             );
           });
         } else {
+          // Prepare the selected element for the deselecting animation
           selected.style.transitionDuration = `${singleAnimationDurationInMs.value}ms`;
           selected.style.left = '0px';
           selected.style.position = 'absolute';
@@ -201,7 +208,7 @@
         element.style.opacity = '0';
         element.style.transform = 'translateY(5px)';
         element.style.transitionDelay = `${
-          (clickedRelatedPromptIndex.value !== null && index > clickedRelatedPromptIndex.value
+          (clickedListItemIndex.value !== null && index > clickedListItemIndex.value
             ? index - 1
             : index) * singleAnimationDurationInMs.value
         }ms`;
@@ -243,7 +250,7 @@
 
       // Changing the query will trigger the appear animation, so we need to reset the
       // style after it finishes
-      watch(() => x.query.search, resetRelatedPromptsStyle, { immediate: true });
+      watch(() => x.query.search, resetTransitionStyle, { immediate: true });
 
       return {
         isSelected,
@@ -253,7 +260,7 @@
         onLeave,
         selectedPromptIndex,
         visibleRelatedPrompts,
-        relatedPromptComponents,
+        listItems,
         isAnimating,
         x
       };
@@ -270,4 +277,7 @@
     gap: 16px;
     min-width: 100%;
   }
+  .x-related-prompts-tag-list-item {
+    height: 100%;
+  }
 </style>