From 39928ededbf7db0fad0ff52e7a23f876a522c9e1 Mon Sep 17 00:00:00 2001
From: Leire Aguirre <leire@argilla.io>
Date: Thu, 7 Nov 2024 12:35:51 +0100
Subject: [PATCH 1/4] fix: add id for highlight text in text and chat fields

---
 .../annotation/container/fields/chat-field/ChatField.vue    | 6 +++++-
 .../annotation/container/fields/text-field/TextField.vue    | 2 +-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/argilla-frontend/components/features/annotation/container/fields/chat-field/ChatField.vue b/argilla-frontend/components/features/annotation/container/fields/chat-field/ChatField.vue
index 971ede238a..50b14f4e74 100644
--- a/argilla-frontend/components/features/annotation/container/fields/chat-field/ChatField.vue
+++ b/argilla-frontend/components/features/annotation/container/fields/chat-field/ChatField.vue
@@ -5,7 +5,11 @@
       class="chat__wrapper"
       :class="checkIfAreLessThanTwoRoles ? '--simple' : '--multiple'"
     >
-      <div v-for="({ role, content: text }, index) in content" :key="index">
+      <div
+        :id="`fields-content-${name}`"
+        v-for="({ role, content: text }, index) in content"
+        :key="index"
+      >
         <span
           :class="[
             'chat__item',
diff --git a/argilla-frontend/components/features/annotation/container/fields/text-field/TextField.vue b/argilla-frontend/components/features/annotation/container/fields/text-field/TextField.vue
index 3fe4a7ced1..81437082bd 100644
--- a/argilla-frontend/components/features/annotation/container/fields/text-field/TextField.vue
+++ b/argilla-frontend/components/features/annotation/container/fields/text-field/TextField.vue
@@ -16,7 +16,7 @@
         </BaseButton>
       </BaseActionTooltip>
     </div>
-    <div class="content-area --body1">
+    <div :id="`fields-content-${name}`" class="content-area --body1">
       <MarkdownRenderer v-if="useMarkdown" :markdown="fieldText" />
       <Sandbox v-else-if="isHTML" :content="fieldText" />
       <div v-else :class="classes" v-html="fieldText" />

From 759766793567c93af861151d9c9ffc637ceda8c7 Mon Sep 17 00:00:00 2001
From: Leire Aguirre <leire@argilla.io>
Date: Thu, 7 Nov 2024 12:52:09 +0100
Subject: [PATCH 2/4] include id in parent

---
 .../annotation/container/fields/chat-field/ChatField.vue   | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/argilla-frontend/components/features/annotation/container/fields/chat-field/ChatField.vue b/argilla-frontend/components/features/annotation/container/fields/chat-field/ChatField.vue
index 50b14f4e74..1389c8f155 100644
--- a/argilla-frontend/components/features/annotation/container/fields/chat-field/ChatField.vue
+++ b/argilla-frontend/components/features/annotation/container/fields/chat-field/ChatField.vue
@@ -2,14 +2,11 @@
   <div class="chat" :key="title">
     <span class="chat__title" v-text="title" />
     <div
+      :id="`fields-content-${name}`"
       class="chat__wrapper"
       :class="checkIfAreLessThanTwoRoles ? '--simple' : '--multiple'"
     >
-      <div
-        :id="`fields-content-${name}`"
-        v-for="({ role, content: text }, index) in content"
-        :key="index"
-      >
+      <div v-for="({ role, content: text }, index) in content" :key="index">
         <span
           :class="[
             'chat__item',

From 3bafb3d4d35c9f239e0cc5b8ebe79e086d8e05b9 Mon Sep 17 00:00:00 2001
From: Leire Aguirre <leire@argilla.io>
Date: Thu, 7 Nov 2024 13:51:33 +0100
Subject: [PATCH 3/4] delete highlights

---
 .../annotation/container/fields/useSearchTextHighlight.ts   | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/argilla-frontend/components/features/annotation/container/fields/useSearchTextHighlight.ts b/argilla-frontend/components/features/annotation/container/fields/useSearchTextHighlight.ts
index 06ecce8dcb..2b23ab4d57 100644
--- a/argilla-frontend/components/features/annotation/container/fields/useSearchTextHighlight.ts
+++ b/argilla-frontend/components/features/annotation/container/fields/useSearchTextHighlight.ts
@@ -121,8 +121,10 @@ export const useSearchTextHighlight = (fieldId: string) => {
 
   const highlightText = (searchText: string) => {
     const fieldComponent = document.getElementById(FIELD_ID_TO_HIGHLIGHT);
-    if (!searchText || !fieldComponent) return;
-
+    if (!searchText || !fieldComponent) {
+      CSS.highlights.delete(HIGHLIGHT_CLASS);
+      return;
+    }
     const ranges = createRangesToHighlight(fieldComponent, searchText);
 
     CSS.highlights.set(HIGHLIGHT_CLASS, new Highlight(...ranges));

From ffd38664376c1669e100a0e9d1b8d3a7090f5ea3 Mon Sep 17 00:00:00 2001
From: Leire Aguirre <leire@argilla.io>
Date: Thu, 7 Nov 2024 15:03:47 +0100
Subject: [PATCH 4/4] update changelog

---
 argilla-frontend/CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/argilla-frontend/CHANGELOG.md b/argilla-frontend/CHANGELOG.md
index c0da610be7..c0a8284b7f 100644
--- a/argilla-frontend/CHANGELOG.md
+++ b/argilla-frontend/CHANGELOG.md
@@ -23,6 +23,7 @@ These are the section headers that we use:
 ### Fixed
 
 - Fixed redirection problems after users sign-in using HF OAuth. ([#5635](https://github.com/argilla-io/argilla/pull/5635))
+- Fixed highlighting of the searched text in text and chat fields ([#5678](https://github.com/argilla-io/argilla/pull/5678))
 
 ## [2.4.0](https://github.com/argilla-io/argilla/compare/v2.3.0...v2.4.0)