feature: allow custom pre and post tags for highlights

Author: skeptrunedev

clients/ts-sdk/openapi.json

@@ -1297,7 +1297,7 @@
           "Chunk"
         ],
         "summary": "Search",
-        "description": "This route provides the primary search functionality for the API. It can be used to search for chunks by semantic similarity, full-text similarity, or a combination of both. Results' `chunk_html` values will be modified with `<b><mark>` tags for sub-sentence highlighting.",
+        "description": "This route provides the primary search functionality for the API. It can be used to search for chunks by semantic similarity, full-text similarity, or a combination of both. Results' `chunk_html` values will be modified with `<mark><b>` or custom specified tags for sub-sentence highlighting.",
         "operationId": "search_chunks",
         "parameters": [
           {
@@ -9634,7 +9634,7 @@
           },
           "highlight_results": {
             "type": "boolean",
-            "description": "Set highlight_results to false for a slight latency improvement (1-10ms). If not specified, this defaults to true. This will add `<b><mark>` tags to the chunk_html of the chunks to highlight matching splits.",
+            "description": "Set highlight_results to false for a slight latency improvement (1-10ms). If not specified, this defaults to true. This will add `<mark><b>` tags to the chunk_html of the chunks to highlight matching splits.",
             "nullable": true
           },
           "image_config": {
@@ -10221,7 +10221,7 @@
           },
           "highlight_results": {
             "type": "boolean",
-            "description": "Set highlight_results to false for a slight latency improvement (1-10ms). If not specified, this defaults to true. This will add `<b><mark>` tags to the chunk_html of the chunks to highlight matching splits and return the highlights on each scored chunk in the response.",
+            "description": "Set highlight_results to false for a slight latency improvement (1-10ms). If not specified, this defaults to true. This will add `<mark><b>` tags to the chunk_html of the chunks to highlight matching splits and return the highlights on each scored chunk in the response.",
             "nullable": true
           },
           "highlight_strategy": {
@@ -10244,6 +10244,16 @@
             "description": "Set highlight_window to a number to control the amount of words that are returned around the matched phrases. If not specified, this defaults to 0. This is useful for when you want to show more context around the matched words. When specified, window/2 whitespace separated words are added before and after each highlight in the response's highlights array. If an extended highlight overlaps with another highlight, the overlapping words are only included once. This parameter can be overriden to respect the highlight_max_length param.",
             "nullable": true,
             "minimum": 0
+          },
+          "post_tag": {
+            "type": "string",
+            "description": "Custom html tag which should appear after highlights. If not specified, this defaults to '</mark></b>'.",
+            "nullable": true
+          },
+          "pre_tag": {
+            "type": "string",
+            "description": "Custom html tag which should appear before highlights. If not specified, this defaults to '<mark><b>'.",
+            "nullable": true
           }
         }
       },

clients/ts-sdk/src/types.gen.ts

@@ -1152,7 +1152,7 @@ export type GenerateOffChunksReqPayload = {
      */
     frequency_penalty?: (number) | null;
     /**
-     * Set highlight_results to false for a slight latency improvement (1-10ms). If not specified, this defaults to true. This will add `<b><mark>` tags to the chunk_html of the chunks to highlight matching splits.
+     * Set highlight_results to false for a slight latency improvement (1-10ms). If not specified, this defaults to true. This will add `<mark><b>` tags to the chunk_html of the chunks to highlight matching splits.
      */
     highlight_results?: (boolean) | null;
     image_config?: ((ImageConfig) | null);
@@ -1351,7 +1351,7 @@ export type HighlightOptions = {
      */
     highlight_max_num?: (number) | null;
     /**
-     * Set highlight_results to false for a slight latency improvement (1-10ms). If not specified, this defaults to true. This will add `<b><mark>` tags to the chunk_html of the chunks to highlight matching splits and return the highlights on each scored chunk in the response.
+     * Set highlight_results to false for a slight latency improvement (1-10ms). If not specified, this defaults to true. This will add `<mark><b>` tags to the chunk_html of the chunks to highlight matching splits and return the highlights on each scored chunk in the response.
      */
     highlight_results?: (boolean) | null;
     highlight_strategy?: ((HighlightStrategy) | null);
@@ -1363,6 +1363,14 @@ export type HighlightOptions = {
      * Set highlight_window to a number to control the amount of words that are returned around the matched phrases. If not specified, this defaults to 0. This is useful for when you want to show more context around the matched words. When specified, window/2 whitespace separated words are added before and after each highlight in the response's highlights array. If an extended highlight overlaps with another highlight, the overlapping words are only included once. This parameter can be overriden to respect the highlight_max_length param.
      */
     highlight_window?: (number) | null;
+    /**
+     * Custom html tag which should appear after highlights. If not specified, this defaults to '</mark></b>'.
+     */
+    post_tag?: (string) | null;
+    /**
+     * Custom html tag which should appear before highlights. If not specified, this defaults to '<mark><b>'.
+     */
+    pre_tag?: (string) | null;
 };
 
 export type HighlightStrategy = 'exactmatch' | 'v1';

frontends/search/src/components/GroupPage.tsx

@@ -283,6 +283,8 @@ export const GroupPage = (props: GroupPageProps) => {
               highlight_delimiters: search.debounced.highlightDelimiters,
               highlight_max_length: search.debounced.highlightMaxLength,
               highlight_window: search.debounced.highlightWindow,
+              pre_tag: search.debounced.highlightPreTag,
+              post_tag: search.debounced.highlightPostTag,
             },
             sort_options: {
               sort_by: sort_by,

frontends/search/src/components/ResultsPage.tsx

@@ -311,6 +311,8 @@ const ResultsPage = (props: ResultsPageProps) => {
           highlight_max_length: props.search.debounced.highlightMaxLength ?? 8,
           highlight_max_num: props.search.debounced.highlightMaxNum ?? 3,
           highlight_window: props.search.debounced.highlightWindow ?? 0,
+          pre_tag: props.search.debounced.highlightPreTag ?? "<mark><b>",
+          post_tag: props.search.debounced.highlightPostTag ?? "</b></mark>",
         },
 
         group_size: props.search.debounced.group_size ?? 3,

frontends/search/src/components/SearchForm.tsx

@@ -1064,6 +1064,8 @@ const SearchForm = (props: {
                                   highlightMaxLength: 8,
                                   highlightMaxNum: 3,
                                   highlightWindow: 0,
+                                  highlightPreTag: "<mark><b>",
+                                  highlightPostTag: "</b></mark>",
                                   group_size: 3,
                                   removeStopWords: false,
                                 } as SearchOptions;
@@ -1468,6 +1470,38 @@ const SearchForm = (props: {
                             }}
                           />
                         </div>
+                        <div class="items flex justify-between space-x-2 p-1">
+                          <label>Highlight Pre Tag:</label>
+                          <input
+                            class="w-16 rounded border border-neutral-400 p-0.5 text-black"
+                            type="text"
+                            value={tempSearchValues().highlightPreTag}
+                            onInput={(e) => {
+                              setTempSearchValues((prev) => {
+                                return {
+                                  ...prev,
+                                  highlightPreTag: e.currentTarget.value,
+                                };
+                              });
+                            }}
+                          />
+                        </div>
+                        <div class="items flex justify-between space-x-2 p-1">
+                          <label>Highlight Post Tag:</label>
+                          <input
+                            class="w-16 rounded border border-neutral-400 p-0.5 text-black"
+                            type="text"
+                            value={tempSearchValues().highlightPostTag}
+                            onInput={(e) => {
+                              setTempSearchValues((prev) => {
+                                return {
+                                  ...prev,
+                                  highlightPostTag: e.currentTarget.value,
+                                };
+                              });
+                            }}
+                          />
+                        </div>
                         <div class="flex items-center justify-between space-x-2 p-1">
                           <label>Highlight exact match</label>
                           <select

frontends/search/src/hooks/useSearch.ts

@@ -77,6 +77,8 @@ export interface SearchOptions {
   highlightMaxLength: number;
   highlightMaxNum: number;
   highlightWindow: number;
+  highlightPreTag: string;
+  highlightPostTag: string;
   group_size: number;
   useQuoteNegatedTerms: boolean;
   removeStopWords: boolean;
@@ -112,6 +114,8 @@ const initalState: SearchOptions = {
   highlightMaxLength: 8,
   highlightMaxNum: 3,
   highlightWindow: 0,
+  highlightPreTag: "<mark><b>",
+  highlightPostTag: "</b></mark>",
   group_size: 3,
   useQuoteNegatedTerms: false,
   removeStopWords: false,
@@ -152,6 +156,8 @@ const fromStateToParams = (state: SearchOptions): Params => {
     highlightMaxLength: state.highlightMaxLength.toString(),
     highlightMaxNum: state.highlightMaxNum.toString(),
     highlightWindow: state.highlightWindow.toString(),
+    highlightPreTag: state.highlightPreTag,
+    highlightPostTag: state.highlightPostTag,
     group_size: state.group_size?.toString(),
     useQuoteNegatedTerms: state.useQuoteNegatedTerms.toString(),
     removeStopWords: state.removeStopWords.toString(),
@@ -201,6 +207,8 @@ const fromParamsToState = (
     highlightMaxLength: parseInt(params.highlightMaxLength ?? "8"),
     highlightMaxNum: parseInt(params.highlightMaxNum ?? "3"),
     highlightWindow: parseInt(params.highlightWindow ?? "0"),
+    highlightPreTag: params.highlightPreTag ?? initalState.highlightPreTag,
+    highlightPostTag: params.highlightPostTag ?? initalState.highlightPostTag,
     group_size: parseInt(params.group_size ?? "3"),
     useQuoteNegatedTerms: (params.useQuoteNegatedTerms ?? "false") === "true",
     removeStopWords: (params.removeStopWords ?? "false") === "true",

server/src/data/models.rs

@@ -5848,7 +5848,7 @@ pub struct SortOptions {
 #[derive(Serialize, Deserialize, Debug, Clone, ToSchema, Default)]
 /// Highlight Options lets you specify different methods to highlight the chunks in the result set. If not specified, this defaults to the score of the chunks.
 pub struct HighlightOptions {
-    /// Set highlight_results to false for a slight latency improvement (1-10ms). If not specified, this defaults to true. This will add `<b><mark>` tags to the chunk_html of the chunks to highlight matching splits and return the highlights on each scored chunk in the response.
+    /// Set highlight_results to false for a slight latency improvement (1-10ms). If not specified, this defaults to true. This will add `<mark><b>` tags to the chunk_html of the chunks to highlight matching splits and return the highlights on each scored chunk in the response.
     pub highlight_results: Option<bool>,
     /// Set highlight_exact_match to true to highlight exact matches from your query.
     pub highlight_strategy: Option<HighlightStrategy>,
@@ -5862,6 +5862,10 @@ pub struct HighlightOptions {
     pub highlight_max_num: Option<u32>,
     /// Set highlight_window to a number to control the amount of words that are returned around the matched phrases. If not specified, this defaults to 0. This is useful for when you want to show more context around the matched words. When specified, window/2 whitespace separated words are added before and after each highlight in the response's highlights array. If an extended highlight overlaps with another highlight, the overlapping words are only included once. This parameter can be overriden to respect the highlight_max_length param.
     pub highlight_window: Option<u32>,
+    /// Custom html tag which should appear before highlights. If not specified, this defaults to '<mark><b>'.
+    pub pre_tag: Option<String>,
+    /// Custom html tag which should appear after highlights. If not specified, this defaults to '</mark></b>'.
+    pub post_tag: Option<String>,
 }
 
 #[derive(Serialize, Deserialize, Debug, Clone, ToSchema, Default)]

server/src/handlers/chunk_handler.rs

@@ -1138,7 +1138,7 @@ pub fn parse_query(
 
 /// Search
 ///
-/// This route provides the primary search functionality for the API. It can be used to search for chunks by semantic similarity, full-text similarity, or a combination of both. Results' `chunk_html` values will be modified with `<b><mark>` tags for sub-sentence highlighting.
+/// This route provides the primary search functionality for the API. It can be used to search for chunks by semantic similarity, full-text similarity, or a combination of both. Results' `chunk_html` values will be modified with `<mark><b>` or custom specified tags for sub-sentence highlighting.
 #[utoipa::path(
     post,
     path = "/chunk/search",
@@ -2331,7 +2331,7 @@ pub struct GenerateOffChunksReqPayload {
     pub prompt: Option<String>,
     /// Whether or not to stream the response. If this is set to true or not included, the response will be a stream. If this is set to false, the response will be a normal JSON response. Default is true.
     pub stream_response: Option<bool>,
-    /// Set highlight_results to false for a slight latency improvement (1-10ms). If not specified, this defaults to true. This will add `<b><mark>` tags to the chunk_html of the chunks to highlight matching splits.
+    /// Set highlight_results to false for a slight latency improvement (1-10ms). If not specified, this defaults to true. This will add `<mark><b>` tags to the chunk_html of the chunks to highlight matching splits.
     pub highlight_results: Option<bool>,
     /// What sampling temperature to use, between 0 and 2. Higher values like 0.8 will make the output more random, while lower values like 0.2 will make it more focused and deterministic. Default is 0.5.
     pub temperature: Option<f32>,