From 29d61fe46835e8a75782435d007f9ab1084117f1 Mon Sep 17 00:00:00 2001
From: Tarashish Mishra <sunu@sunu.in>
Date: Mon, 19 May 2025 13:30:54 +0530
Subject: [PATCH 01/10] Hack to demo natural language search

---
 src/components/ApiCapabilitiesMixin.js |  3 ++
 src/components/SearchFilter.vue        |  5 ++
 src/locales/en/texts.json              |  4 ++
 src/views/Search.vue                   | 74 ++++++++++++++++++++++++--
 4 files changed, 83 insertions(+), 3 deletions(-)

diff --git a/src/components/ApiCapabilitiesMixin.js b/src/components/ApiCapabilitiesMixin.js
index d3b797fcb..904ec2158 100644
--- a/src/components/ApiCapabilitiesMixin.js
+++ b/src/components/ApiCapabilitiesMixin.js
@@ -73,6 +73,9 @@ export default {
     canFilterFreeText() {
       return this.supportsConformance(this.conformances.FreeText);
     },
+    canSupportNaturalLanguage() {
+      return true;
+    },
     cql() {
       if (!this.supportsConformance(this.conformances.CqlFilters)) {
         return null;
diff --git a/src/components/SearchFilter.vue b/src/components/SearchFilter.vue
index 82dcd04de..fff687fcf 100644
--- a/src/components/SearchFilter.vue
+++ b/src/components/SearchFilter.vue
@@ -610,6 +610,11 @@ $primary-color: map-get($theme-colors, "primary");
     > label {
       font-weight: 600;
     }
+    
+    // Add styling for fieldset > legend
+    legend {
+      font-weight: 600;
+    }
   }
 }
 </style>
diff --git a/src/locales/en/texts.json b/src/locales/en/texts.json
index 5e0e20b0c..5421d4fec 100644
--- a/src/locales/en/texts.json
+++ b/src/locales/en/texts.json
@@ -224,6 +224,10 @@
     "enterCollections": "Enter one or more Collection IDs...",
     "enterItemIds": "Enter one or more Item IDs...",
     "enterSearchTerms": "Enter one or more search terms...",
+    "enterNaturalLanguageQuery": "Enter a descriptive query in natural language...",
+    "naturalLanguageQuery": "Natural Language Query",
+    "naturalLanguageDescription": "Natural Language Search",
+    "applyNaturalLanguageQuery": "Search",
     "equalTo": "equal to",
     "filterBySpatialExtent": "Filter by spatial extent",
     "filterCollection": "Filter Collection",
diff --git a/src/views/Search.vue b/src/views/Search.vue
index 9c186599d..db4df9af7 100644
--- a/src/views/Search.vue
+++ b/src/views/Search.vue
@@ -20,12 +20,26 @@
         </b-tabs>
       </b-col>
       <b-col class="right">
+        <!-- Natural Language Search -->
+        <b-form-group v-if="canSupportNaturalLanguage" class="natural-language-search mb-4" :label="$t('search.naturalLanguageQuery')" :label-for="'natural-language-query'" :description="$t('search.naturalLanguageDescription')">
+          <div class="d-flex">
+            <b-form-input
+              id="natural-language-query"
+              v-model="naturalLanguageQuery"
+              type="text"
+              :placeholder="$t('search.enterNaturalLanguageQuery')"
+              @keyup.enter="applyNaturalLanguageQuery"
+              class="flex-grow-1 mr-2"
+            />
+            <b-button variant="primary" @click="applyNaturalLanguageQuery">{{ $t('search.applyNaturalLanguageQuery') }}</b-button>
+          </div>
+        </b-form-group>
         <b-alert v-if="error" variant="error" show>{{ error }}</b-alert>
         <Loading v-else-if="!data && loading" fill top />
         <b-alert v-else-if="data === null" variant="info" show>{{ $t('search.modifyCriteria') }}</b-alert>
         <b-alert v-else-if="results.length === 0 && noFurtherItems" variant="info" show>{{ $t('search.noFurtherItemsFound') }}</b-alert>
         <b-alert v-else-if="results.length === 0" variant="warning" show>{{ $t('search.noItemsFound') }}</b-alert>
-        <template v-else>
+        <template v-if="data && results.length > 0">
           <div id="search-map" v-if="itemCollection">
             <Map :stac="stac" :stacLayerData="itemCollection" scrollWheelZoom popover />
           </div>
@@ -68,14 +82,18 @@ import Utils from '../utils';
 import SearchFilter from '../components/SearchFilter.vue';
 import Loading from '../components/Loading.vue';
 import STAC from '../models/stac';
-import { BIconCheckSquare, BIconSquare, BTabs, BTab } from 'bootstrap-vue';
+import { BIconCheckSquare, BIconSquare, BTabs, BTab, BFormGroup, BFormInput, BButton } from 'bootstrap-vue';
 import { processSTAC, stacRequest } from '../store/utils';
+import ApiCapabilitiesMixin from '../components/ApiCapabilitiesMixin';
 
 export default {
   name: "Search",
   components: {
     BIconCheckSquare,
     BIconSquare,
+    BButton,
+    BFormGroup,
+    BFormInput,
     BTab,
     BTabs,
     Catalogs: () => import('../components/Catalogs.vue'),
@@ -85,6 +103,9 @@ export default {
     SearchFilter,
     StacLink: () => import('../components/StacLink.vue')
   },
+  mixins: [
+    ApiCapabilitiesMixin
+  ],
   props: {
     loadParent: {
       type: String,
@@ -103,7 +124,8 @@ export default {
       itemFilters: {},
       collectionFilters: {},
       activeSearch: 0,
-      selectedCollections: {}
+      selectedCollections: {},
+      naturalLanguageQuery: ''
     };
   },
   computed: {
@@ -159,6 +181,8 @@ export default {
               return null;
             }
             let selfLink = Utils.getLinkWithRel(obj.links, 'self');
+            console.log(selfLink);
+            console.log(this.link);
             let url;
             if (selfLink?.href) {
               url = Utils.toAbsolute(selfLink.href, this.link.href);
@@ -234,6 +258,44 @@ export default {
     });
   },
   methods: {
+    async applyNaturalLanguageQuery() {
+      if (this.naturalLanguageQuery) {
+        this.error = null;
+        this.loading = true;
+        this.data = null;
+        
+        try {
+          const API_URL = "http://localhost:8000";
+          const response = await fetch(`${API_URL}/items/search`, {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+              query: this.naturalLanguageQuery,
+              limit: 10
+            })
+          });
+
+          if (!response.ok) {
+            throw new Error(`API request failed with status ${response.status}`);
+          }
+
+          const responseData = await response.json();
+          console.log(responseData);
+          this.link = this.catalogUrl;
+          this.data = {
+            features: responseData.results.items,
+            type: 'Feature'
+          };
+        } catch (error) {
+          this.error = error.message;
+          console.error('Error in semantic search:', error);
+        } finally {
+          this.loading = false;
+        }
+      }
+    },
     openItemSearch() {
       this.$set(this.itemFilters, 'collections', Object.keys(this.selectedCollections));
       this.activeSearch = 1;
@@ -316,6 +378,12 @@ export default {
 }
 
 #stac-browser .search {
+  .natural-language-search {
+    label {
+      font-weight: 600;
+    }
+  }
+
   .selected-collections-action {
     position: fixed;
     bottom: 0;

From c428150aec94bcea9fe8e0df33dc7e5bca4a29ae Mon Sep 17 00:00:00 2001
From: Vitor George <vitor.george@gmail.com>
Date: Fri, 13 Jun 2025 11:25:49 +0100
Subject: [PATCH 02/10] feat: add config option to enable/disable semantic
 searh

---
 README.md            | 45 +++++++++++++++++++++++++++++++++++++++++++-
 config.js            |  3 ++-
 src/views/Search.vue |  7 +++++--
 3 files changed, 51 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index 69fe7b1b4..1e0abafe0 100644
--- a/README.md
+++ b/README.md
@@ -16,7 +16,7 @@ It's not officially supported, but you may also be able to use it for
 certain _OGC API - Records_ and _OGC API - Features_ compliant servers.
 
 **Please note that STAC Browser is currently with limited funding for both maintenance, bug fixes and improvements. This means issues and PRs may be addressed very slowly.
-If you care about STAC Browser and have some funds to support the future of STAC Browser, please contact matthias@mohr.ws**
+If you care about STAC Browser and have some funds to support the future of STAC Browser, please contact <matthias@mohr.ws>**
 
 **Table of Contents:**
 
@@ -37,6 +37,7 @@ If you care about STAC Browser and have some funds to support the future of STAC
       - [Translation](#translation)
     - [Customize through root catalog](#customize-through-root-catalog)
     - [Custom extensions](#custom-extensions)
+    - [Natural Language Search](#natural-language-search)
   - [Docker](#docker)
   - [Contributing](#contributing)
     - [Adding a new language](#adding-a-new-language)
@@ -269,6 +270,48 @@ STAC Browser supports some non-standardized extensions to the STAC specification
    Add a `name` field and it will be used as title in the tab header, the same applies for the core Asset Object.
 3. A link with relation type `icon` and a Browser-supported media type in any STAC entity will show an icon in the header and the lists of Catalogs, Collections and Items.
 
+### Natural Language Search
+
+STAC Browser supports natural language search functionality that allows users to search for STAC items using descriptive queries in natural language (e.g., "satellite images of forests in California from 2023").
+
+To enable natural language search:
+
+1. **Configure the API URL**: Set the `semanticSearchApiUrl` option in your configuration file:
+
+```javascript
+// config.js
+module.exports = {
+  // ... other config options
+  semanticSearchApiUrl: "https://your-semantic-search-api.com",
+  // ... other config options
+};
+```
+
+2. **API Requirements**: Your semantic search API should accept POST requests to `/items/search` with the following format:
+
+```json
+{
+  "query": "your natural language query",
+  "limit": 10
+}
+```
+
+And return results in this format:
+
+```json
+{
+  "results": {
+    "items": [
+      // Array of STAC items
+    ]
+  }
+}
+```
+
+3. **User Interface**: Once configured, users will see the "Natural Language Query" search interface where they can enter descriptive queries.
+
+**Note**: Natural language search is disabled by default. The feature will only appear in the interface when `semanticSearchApiUrl` is configured with a valid API URL.
+
 ## Docker
 
 You can use the Docker to work with STAC Browser. Please read [Docker documentation](docs/docker.md) for more details.
diff --git a/config.js b/config.js
index 2b32abc30..58f89b92f 100644
--- a/config.js
+++ b/config.js
@@ -48,5 +48,6 @@ module.exports = {
     requestQueryParameters: {},
     socialSharing: ['email', 'bsky', 'mastodon', 'x'],
     preprocessSTAC: null,
-    authConfig: null
+    authConfig: null,
+    semanticSearchApiUrl: false,
 };
diff --git a/src/views/Search.vue b/src/views/Search.vue
index db4df9af7..01ecc70bc 100644
--- a/src/views/Search.vue
+++ b/src/views/Search.vue
@@ -155,6 +155,9 @@ export default {
     itemSearch() {
       return this.canSearchItems && this.stac && this.stac.getSearchLink();
     },
+    canSupportNaturalLanguage() {
+      return Boolean(this.$store.state.semanticSearchApiUrl);
+    },
     itemCollection() {
       if (this.isCollectionSearch) {
         return null; // wait for stac-js to convert bboxes to geojson
@@ -265,8 +268,8 @@ export default {
         this.data = null;
         
         try {
-          const API_URL = "http://localhost:8000";
-          const response = await fetch(`${API_URL}/items/search`, {
+          const SEMANTIC_SEARCH_API_URL = this.$store.state.semanticSearchApiUrl;
+          const response = await fetch(`${SEMANTIC_SEARCH_API_URL}/items/search`, {
             method: 'POST',
             headers: {
               'Content-Type': 'application/json'

From d6ae6b9b2f42d65850b9fec458b8d9ffad1eb3f0 Mon Sep 17 00:00:00 2001
From: Vitor George <vitor.george@gmail.com>
Date: Fri, 13 Jun 2025 11:44:51 +0100
Subject: [PATCH 03/10] fix: do not display default search form when natural
 query is enabled

---
 src/views/Search.vue | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/views/Search.vue b/src/views/Search.vue
index 01ecc70bc..54cf4640d 100644
--- a/src/views/Search.vue
+++ b/src/views/Search.vue
@@ -1,9 +1,10 @@
 <template>
   <main class="search d-flex flex-column">
     <Loading v-if="!parent" stretch />
-    <b-alert v-else-if="!searchLink" variant="danger" show>{{ $t('search.notSupported') }}</b-alert>
+    <b-alert v-else-if="!searchLink && !canSupportNaturalLanguage" variant="danger" show>{{ $t('search.notSupported') }}</b-alert>
     <b-row v-else>
-      <b-col class="left">
+      <!-- Show default search tabs only when natural language search is not available -->
+      <b-col v-if="!canSupportNaturalLanguage" class="left">
         <b-tabs v-model="activeSearch">
           <b-tab v-if="collectionSearch" :title="$t('search.tabs.collections')">
             <SearchFilter
@@ -19,7 +20,7 @@
           </b-tab>
         </b-tabs>
       </b-col>
-      <b-col class="right">
+      <b-col :class="canSupportNaturalLanguage ? 'full-width' : 'right'">
         <!-- Natural Language Search -->
         <b-form-group v-if="canSupportNaturalLanguage" class="natural-language-search mb-4" :label="$t('search.naturalLanguageQuery')" :label-for="'natural-language-query'" :description="$t('search.naturalLanguageDescription')">
           <div class="d-flex">
@@ -405,6 +406,10 @@ export default {
     flex-basis: 60%;
     position: relative !important;
   }
+  .full-width {
+    flex-basis: 100%;
+    position: relative !important;
+  }
   .items, .catalogs {
     .card-columns {
       @include media-breakpoint-only(sm) {

From fa3879c28dc0560e6726a4f6c1969b48e3995405 Mon Sep 17 00:00:00 2001
From: Vitor George <vitor.george@gmail.com>
Date: Wed, 18 Jun 2025 12:50:24 +0100
Subject: [PATCH 04/10] feat: move natural language input to SearchFilter
 component

---
 src/components/SearchFilter.vue | 70 +++++++++++++++++++++++--
 src/views/Search.vue            | 91 +++++++--------------------------
 2 files changed, 84 insertions(+), 77 deletions(-)

diff --git a/src/components/SearchFilter.vue b/src/components/SearchFilter.vue
index fff687fcf..371e61b2b 100644
--- a/src/components/SearchFilter.vue
+++ b/src/components/SearchFilter.vue
@@ -6,6 +6,21 @@
 
         <b-card-title v-if="title" :title="title" />
 
+        <!-- Natural Language Search -->
+        <b-form-group v-if="canSupportNaturalLanguage" class="natural-language-search" :label="$t('search.naturalLanguageQuery')" :label-for="ids.naturalLanguage" :description="$t('search.naturalLanguageDescription')">
+          <div class="d-flex">
+            <b-form-input
+              :id="ids.naturalLanguage"
+              v-model="naturalLanguageQuery"
+              type="text"
+              :placeholder="$t('search.enterNaturalLanguageQuery')"
+              @keyup.enter="applyNaturalLanguageQuery"
+              class="flex-grow-1 mr-2"
+            />
+            <b-button variant="primary" @click="applyNaturalLanguageQuery">{{ $t('search.applyNaturalLanguageQuery') }}</b-button>
+          </div>
+        </b-form-group>
+
         <b-form-group v-if="canFilterFreeText" class="filter-freetext" :label="$t('search.freeText')" :label-for="ids.q" :description="$t('search.freeTextDescription')">
           <multiselect
             :id="ids.q" :value="query.q" @input="setSearchTerms"
@@ -116,7 +131,7 @@
 </template>
 
 <script>
-import { BBadge, BDropdown, BDropdownItem, BForm, BFormGroup, BFormInput, BFormCheckbox, BFormRadioGroup } from 'bootstrap-vue';
+import { BBadge, BDropdown, BDropdownItem, BForm, BFormGroup, BFormInput, BFormCheckbox, BFormRadioGroup, BButton } from 'bootstrap-vue';
 import Multiselect from 'vue-multiselect';
 import { mapGetters, mapState } from "vuex";
 import refParser from '@apidevtools/json-schema-ref-parser';
@@ -144,7 +159,8 @@ function getQueryDefaults() {
     ids: [],
     collections: [],
     sortby: null,
-    filters: null
+    filters: null,
+    naturalLanguageQuery: ''
   };
 }
 
@@ -156,7 +172,8 @@ function getDefaults() {
     query: getQueryDefaults(),
     filtersAndOr: 'and',
     filters: [],
-    selectedCollections: []
+    selectedCollections: [],
+    naturalLanguageQuery: ''
   };
 }
 
@@ -173,6 +190,7 @@ export default {
     BFormInput,
     BFormCheckbox,
     BFormRadioGroup,
+    BButton,
     QueryableInput: () => import('./QueryableInput.vue'),
     Loading,
     Map: () => import('./Map.vue'),
@@ -215,6 +233,9 @@ export default {
   computed: {
     ...mapState(['itemsPerPage', 'maxItemsPerPage', 'uiLanguage']),
     ...mapGetters(['canSearchCollections', 'supportsConformance']),
+    canSupportNaturalLanguage() {
+      return Boolean(this.$store.state.semanticSearchApiUrl);
+    },
     collectionSelectOptions() {
       let taggable = !this.hasAllCollections;
       let isResult = this.collections.length > 0 && !this.hasAllCollections;
@@ -245,7 +266,7 @@ export default {
     },
     ids() {
       let obj = {};
-      ['q', 'datetime', 'bbox', 'collections', 'ids', 'sort', 'limit']
+      ['q', 'datetime', 'bbox', 'collections', 'ids', 'sort', 'limit', 'naturalLanguage']
         .forEach(field => obj[field] = field + formId);
       return obj;
     },
@@ -349,6 +370,39 @@ export default {
     Promise.all(promises).finally(() => this.loaded = true);
   },
   methods: {
+    async applyNaturalLanguageQuery() {
+      if (this.naturalLanguageQuery) {
+        try {
+          const SEMANTIC_SEARCH_API_URL = this.$store.state.semanticSearchApiUrl;
+          const response = await fetch(`${SEMANTIC_SEARCH_API_URL}/items/search`, {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+              query: this.naturalLanguageQuery,
+              limit: 10
+            })
+          });
+
+          if (!response.ok) {
+            throw new Error(`API request failed with status ${response.status}`);
+          }
+
+          const responseData = await response.json();
+          console.log(responseData);
+          
+          // Emit the natural language search results
+          this.$emit('natural-language-results', {
+            features: responseData.results.items,
+            type: 'Feature'
+          });
+        } catch (error) {
+          console.error('Error in semantic search:', error);
+          this.$emit('natural-language-error', error.message);
+        }
+      }
+    },
     resetSearchCollection() {
       clearTimeout(this.collectionsLoadingTimer);
       this.collectionsLoadingTimer = null;
@@ -502,10 +556,12 @@ export default {
       }
       let filters = this.buildFilter();
       this.$set(this.query, 'filters', filters);
+      this.$set(this.query, 'naturalLanguageQuery', this.naturalLanguageQuery);
       this.$emit('input', this.query, false);
     },
     async onReset() {
       Object.assign(this, getDefaults());
+      this.naturalLanguageQuery = '';
       this.$emit('input', {}, true);
     },
     setLimit(limit) {
@@ -616,5 +672,11 @@ $primary-color: map-get($theme-colors, "primary");
       font-weight: 600;
     }
   }
+
+  .natural-language-search {
+    label {
+      font-weight: 600;
+    }
+  }
 }
 </style>
diff --git a/src/views/Search.vue b/src/views/Search.vue
index 54cf4640d..f500b063c 100644
--- a/src/views/Search.vue
+++ b/src/views/Search.vue
@@ -1,40 +1,29 @@
 <template>
   <main class="search d-flex flex-column">
     <Loading v-if="!parent" stretch />
-    <b-alert v-else-if="!searchLink && !canSupportNaturalLanguage" variant="danger" show>{{ $t('search.notSupported') }}</b-alert>
+    <b-alert v-else-if="!searchLink" variant="danger" show>{{ $t('search.notSupported') }}</b-alert>
     <b-row v-else>
-      <!-- Show default search tabs only when natural language search is not available -->
-      <b-col v-if="!canSupportNaturalLanguage" class="left">
+      <b-col class="left">
         <b-tabs v-model="activeSearch">
           <b-tab v-if="collectionSearch" :title="$t('search.tabs.collections')">
             <SearchFilter
               :parent="parent" title="" :value="collectionFilters" type="Collections"
               @input="setFilters"
+              @natural-language-results="handleNaturalLanguageResults"
+              @natural-language-error="handleNaturalLanguageError"
             />
           </b-tab>
           <b-tab v-if="itemSearch" :title="$t('search.tabs.items')">
             <SearchFilter
               :parent="parent" title="" :value="itemFilters" type="Global"
               @input="setFilters"
+              @natural-language-results="handleNaturalLanguageResults"
+              @natural-language-error="handleNaturalLanguageError"
             />
           </b-tab>
         </b-tabs>
       </b-col>
-      <b-col :class="canSupportNaturalLanguage ? 'full-width' : 'right'">
-        <!-- Natural Language Search -->
-        <b-form-group v-if="canSupportNaturalLanguage" class="natural-language-search mb-4" :label="$t('search.naturalLanguageQuery')" :label-for="'natural-language-query'" :description="$t('search.naturalLanguageDescription')">
-          <div class="d-flex">
-            <b-form-input
-              id="natural-language-query"
-              v-model="naturalLanguageQuery"
-              type="text"
-              :placeholder="$t('search.enterNaturalLanguageQuery')"
-              @keyup.enter="applyNaturalLanguageQuery"
-              class="flex-grow-1 mr-2"
-            />
-            <b-button variant="primary" @click="applyNaturalLanguageQuery">{{ $t('search.applyNaturalLanguageQuery') }}</b-button>
-          </div>
-        </b-form-group>
+      <b-col class="right">
         <b-alert v-if="error" variant="error" show>{{ error }}</b-alert>
         <Loading v-else-if="!data && loading" fill top />
         <b-alert v-else-if="data === null" variant="info" show>{{ $t('search.modifyCriteria') }}</b-alert>
@@ -83,7 +72,7 @@ import Utils from '../utils';
 import SearchFilter from '../components/SearchFilter.vue';
 import Loading from '../components/Loading.vue';
 import STAC from '../models/stac';
-import { BIconCheckSquare, BIconSquare, BTabs, BTab, BFormGroup, BFormInput, BButton } from 'bootstrap-vue';
+import { BIconCheckSquare, BIconSquare, BTabs, BTab } from 'bootstrap-vue';
 import { processSTAC, stacRequest } from '../store/utils';
 import ApiCapabilitiesMixin from '../components/ApiCapabilitiesMixin';
 
@@ -92,9 +81,6 @@ export default {
   components: {
     BIconCheckSquare,
     BIconSquare,
-    BButton,
-    BFormGroup,
-    BFormInput,
     BTab,
     BTabs,
     Catalogs: () => import('../components/Catalogs.vue'),
@@ -126,7 +112,6 @@ export default {
       collectionFilters: {},
       activeSearch: 0,
       selectedCollections: {},
-      naturalLanguageQuery: ''
     };
   },
   computed: {
@@ -156,9 +141,6 @@ export default {
     itemSearch() {
       return this.canSearchItems && this.stac && this.stac.getSearchLink();
     },
-    canSupportNaturalLanguage() {
-      return Boolean(this.$store.state.semanticSearchApiUrl);
-    },
     itemCollection() {
       if (this.isCollectionSearch) {
         return null; // wait for stac-js to convert bboxes to geojson
@@ -262,43 +244,16 @@ export default {
     });
   },
   methods: {
-    async applyNaturalLanguageQuery() {
-      if (this.naturalLanguageQuery) {
-        this.error = null;
-        this.loading = true;
-        this.data = null;
-        
-        try {
-          const SEMANTIC_SEARCH_API_URL = this.$store.state.semanticSearchApiUrl;
-          const response = await fetch(`${SEMANTIC_SEARCH_API_URL}/items/search`, {
-            method: 'POST',
-            headers: {
-              'Content-Type': 'application/json'
-            },
-            body: JSON.stringify({
-              query: this.naturalLanguageQuery,
-              limit: 10
-            })
-          });
-
-          if (!response.ok) {
-            throw new Error(`API request failed with status ${response.status}`);
-          }
-
-          const responseData = await response.json();
-          console.log(responseData);
-          this.link = this.catalogUrl;
-          this.data = {
-            features: responseData.results.items,
-            type: 'Feature'
-          };
-        } catch (error) {
-          this.error = error.message;
-          console.error('Error in semantic search:', error);
-        } finally {
-          this.loading = false;
-        }
-      }
+    handleNaturalLanguageResults(data) {
+      this.error = null;
+      this.loading = false;
+      this.link = this.catalogUrl;
+      this.data = data;
+    },
+    handleNaturalLanguageError(errorMessage) {
+      this.error = errorMessage;
+      this.loading = false;
+      this.data = null;
     },
     openItemSearch() {
       this.$set(this.itemFilters, 'collections', Object.keys(this.selectedCollections));
@@ -382,12 +337,6 @@ export default {
 }
 
 #stac-browser .search {
-  .natural-language-search {
-    label {
-      font-weight: 600;
-    }
-  }
-
   .selected-collections-action {
     position: fixed;
     bottom: 0;
@@ -406,10 +355,6 @@ export default {
     flex-basis: 60%;
     position: relative !important;
   }
-  .full-width {
-    flex-basis: 100%;
-    position: relative !important;
-  }
   .items, .catalogs {
     .card-columns {
       @include media-breakpoint-only(sm) {

From ff0078f24f1b8965aa79fe32892e0a43faa5ed70 Mon Sep 17 00:00:00 2001
From: Vitor George <vitor.george@gmail.com>
Date: Wed, 18 Jun 2025 12:59:17 +0100
Subject: [PATCH 05/10] feat: improve natural language search UI with better
 user guidance

---
 src/components/SearchFilter.vue | 13 ++++++-------
 src/locales/en/texts.json       |  5 +++--
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/SearchFilter.vue b/src/components/SearchFilter.vue
index 371e61b2b..c39309b0e 100644
--- a/src/components/SearchFilter.vue
+++ b/src/components/SearchFilter.vue
@@ -8,6 +8,9 @@
 
         <!-- Natural Language Search -->
         <b-form-group v-if="canSupportNaturalLanguage" class="natural-language-search" :label="$t('search.naturalLanguageQuery')" :label-for="ids.naturalLanguage" :description="$t('search.naturalLanguageDescription')">
+          <div class="alert alert-info mb-3">
+            {{ $t('search.naturalLanguageInfo') }}
+          </div>
           <div class="d-flex">
             <b-form-input
               :id="ids.naturalLanguage"
@@ -17,7 +20,9 @@
               @keyup.enter="applyNaturalLanguageQuery"
               class="flex-grow-1 mr-2"
             />
-            <b-button variant="primary" @click="applyNaturalLanguageQuery">{{ $t('search.applyNaturalLanguageQuery') }}</b-button>
+            <b-button variant="primary" @click="applyNaturalLanguageQuery">
+              {{ $t('search.applyNaturalLanguageQuery') }}
+            </b-button>
           </div>
         </b-form-group>
 
@@ -672,11 +677,5 @@ $primary-color: map-get($theme-colors, "primary");
       font-weight: 600;
     }
   }
-
-  .natural-language-search {
-    label {
-      font-weight: 600;
-    }
-  }
 }
 </style>
diff --git a/src/locales/en/texts.json b/src/locales/en/texts.json
index 5421d4fec..48a1234eb 100644
--- a/src/locales/en/texts.json
+++ b/src/locales/en/texts.json
@@ -224,9 +224,10 @@
     "enterCollections": "Enter one or more Collection IDs...",
     "enterItemIds": "Enter one or more Item IDs...",
     "enterSearchTerms": "Enter one or more search terms...",
-    "enterNaturalLanguageQuery": "Enter a descriptive query in natural language...",
-    "naturalLanguageQuery": "Natural Language Query",
+    "enterNaturalLanguageQuery": "e.g., 'satellite images of California from 2023'",
+    "naturalLanguageQuery": "AI Search",
     "naturalLanguageDescription": "Natural Language Search",
+    "naturalLanguageInfo": "Enter a natural language query to search. This will replace any existing filter selections and return AI-powered search results.",
     "applyNaturalLanguageQuery": "Search",
     "equalTo": "equal to",
     "filterBySpatialExtent": "Filter by spatial extent",

From b2f91e0a06cc1c22712920cd8d793967b734f64e Mon Sep 17 00:00:00 2001
From: Vitor George <vitor.george@gmail.com>
Date: Wed, 18 Jun 2025 13:14:01 +0100
Subject: [PATCH 06/10] feat: add natural language search with explanation
 display and loading state

---
 src/components/SearchFilter.vue | 43 +++++++++++++++++++++++++++------
 src/locales/en/texts.json       |  2 +-
 2 files changed, 37 insertions(+), 8 deletions(-)

diff --git a/src/components/SearchFilter.vue b/src/components/SearchFilter.vue
index c39309b0e..d3f7eb54f 100644
--- a/src/components/SearchFilter.vue
+++ b/src/components/SearchFilter.vue
@@ -7,7 +7,7 @@
         <b-card-title v-if="title" :title="title" />
 
         <!-- Natural Language Search -->
-        <b-form-group v-if="canSupportNaturalLanguage" class="natural-language-search" :label="$t('search.naturalLanguageQuery')" :label-for="ids.naturalLanguage" :description="$t('search.naturalLanguageDescription')">
+        <b-form-group v-if="canSupportNaturalLanguage" class="natural-language-search" :label="$t('search.naturalLanguageQuery')" :label-for="ids.naturalLanguage" :description="naturalLanguageDescription">
           <div class="alert alert-info mb-3">
             {{ $t('search.naturalLanguageInfo') }}
           </div>
@@ -18,10 +18,16 @@
               type="text"
               :placeholder="$t('search.enterNaturalLanguageQuery')"
               @keyup.enter="applyNaturalLanguageQuery"
+              @keydown.enter.prevent
               class="flex-grow-1 mr-2"
             />
-            <b-button variant="primary" @click="applyNaturalLanguageQuery">
-              {{ $t('search.applyNaturalLanguageQuery') }}
+            <b-button variant="primary" @click="applyNaturalLanguageQuery" :disabled="naturalLanguageLoading">
+              <span v-if="naturalLanguageLoading">
+                {{ $t('search.processing') }}
+              </span>
+              <span v-else>
+                {{ $t('search.applyNaturalLanguageQuery') }}
+              </span>
             </b-button>
           </div>
         </b-form-group>
@@ -178,7 +184,9 @@ function getDefaults() {
     filtersAndOr: 'and',
     filters: [],
     selectedCollections: [],
-    naturalLanguageQuery: ''
+    naturalLanguageQuery: '',
+    naturalLanguageExplanation: '',
+    naturalLanguageLoading: false
   };
 }
 
@@ -232,7 +240,8 @@ export default {
       hasAllCollections: false,
       collections: [],
       collectionsLoadingTimer: null,
-      additionalCollectionCount: 0
+      additionalCollectionCount: 0,
+      naturalLanguageLoading: false
     }, getDefaults());
   },
   computed: {
@@ -315,6 +324,9 @@ export default {
       set(val) {
         this.query.datetime = Array.isArray(val) ? val.map(d => Utils.dateToUTC(d)) : null;
       }
+    },
+    naturalLanguageDescription() {
+      return this.naturalLanguageExplanation;
     }
   },
   watch: {
@@ -375,8 +387,15 @@ export default {
     Promise.all(promises).finally(() => this.loaded = true);
   },
   methods: {
-    async applyNaturalLanguageQuery() {
+    async applyNaturalLanguageQuery(event) {
+      // Prevent form submission
+      if (event) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+      
       if (this.naturalLanguageQuery) {
+        this.naturalLanguageLoading = true;
         try {
           const SEMANTIC_SEARCH_API_URL = this.$store.state.semanticSearchApiUrl;
           const response = await fetch(`${SEMANTIC_SEARCH_API_URL}/items/search`, {
@@ -395,7 +414,13 @@ export default {
           }
 
           const responseData = await response.json();
-          console.log(responseData);
+          
+          // Store the explanation if available in the response
+          if (responseData.explanation) {
+            this.naturalLanguageExplanation = responseData.explanation;
+          } else if (responseData.results && responseData.results.explanation) {
+            this.naturalLanguageExplanation = responseData.results.explanation;
+          }
           
           // Emit the natural language search results
           this.$emit('natural-language-results', {
@@ -405,6 +430,8 @@ export default {
         } catch (error) {
           console.error('Error in semantic search:', error);
           this.$emit('natural-language-error', error.message);
+        } finally {
+          this.naturalLanguageLoading = false;
         }
       }
     },
@@ -567,6 +594,8 @@ export default {
     async onReset() {
       Object.assign(this, getDefaults());
       this.naturalLanguageQuery = '';
+      this.naturalLanguageExplanation = '';
+      this.naturalLanguageLoading = false;
       this.$emit('input', {}, true);
     },
     setLimit(limit) {
diff --git a/src/locales/en/texts.json b/src/locales/en/texts.json
index 48a1234eb..a18a2d139 100644
--- a/src/locales/en/texts.json
+++ b/src/locales/en/texts.json
@@ -226,9 +226,9 @@
     "enterSearchTerms": "Enter one or more search terms...",
     "enterNaturalLanguageQuery": "e.g., 'satellite images of California from 2023'",
     "naturalLanguageQuery": "AI Search",
-    "naturalLanguageDescription": "Natural Language Search",
     "naturalLanguageInfo": "Enter a natural language query to search. This will replace any existing filter selections and return AI-powered search results.",
     "applyNaturalLanguageQuery": "Search",
+    "processing": "Processing...",
     "equalTo": "equal to",
     "filterBySpatialExtent": "Filter by spatial extent",
     "filterCollection": "Filter Collection",

From 1f66dfd7ef3155c588a88ed28db0d4004a511cda Mon Sep 17 00:00:00 2001
From: Vitor George <vitor.george@gmail.com>
Date: Wed, 18 Jun 2025 13:20:39 +0100
Subject: [PATCH 07/10] feat: populate temporal extent from natural language
 search response

---
 src/components/SearchFilter.vue | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/src/components/SearchFilter.vue b/src/components/SearchFilter.vue
index d3f7eb54f..12a9a593b 100644
--- a/src/components/SearchFilter.vue
+++ b/src/components/SearchFilter.vue
@@ -422,6 +422,20 @@ export default {
             this.naturalLanguageExplanation = responseData.results.explanation;
           }
           
+          // Extract datetime from search_params if available
+          if (responseData.results && responseData.results.search_params && responseData.results.search_params.datetime) {
+            const datetimeString = responseData.results.search_params.datetime;
+            // Parse datetime string in format '2021-01-01/2022-12-31'
+            const dates = datetimeString.split('/');
+            if (dates.length === 2) {
+              const startDate = dates[0] === '..' ? null : new Date(dates[0]);
+              const endDate = dates[1] === '..' ? null : new Date(dates[1]);
+              
+              // Set the datetime in the query
+              this.query.datetime = [startDate, endDate];
+            }
+          }
+          
           // Emit the natural language search results
           this.$emit('natural-language-results', {
             features: responseData.results.items,

From 35a52cb8c2acef6e36846abdbfcd2c47e417debf Mon Sep 17 00:00:00 2001
From: Vitor George <vitor.george@gmail.com>
Date: Wed, 18 Jun 2025 13:33:34 +0100
Subject: [PATCH 08/10] feat: display natural language search intersects
 polygon on map with styled overlay

---
 src/components/Map.vue          | 14 ++++++++++++++
 src/components/SearchFilter.vue |  3 ++-
 src/locales/en/texts.json       |  2 ++
 src/views/Search.vue            | 19 +++++++++++--------
 4 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/src/components/Map.vue b/src/components/Map.vue
index 69d45e71a..1bdd6864f 100644
--- a/src/components/Map.vue
+++ b/src/components/Map.vue
@@ -11,6 +11,7 @@
       <l-tile-layer v-for="xyz of xyzLinks" ref="xyzOverlays" :key="xyz.url" layerType="overlay" v-bind="xyz" />
       <LWMSTileLayer v-for="wms of wmsLinks" ref="wmsOverlays" :key="wms.url" layerType="overlay" v-bind="wms" />
       <l-geo-json v-if="geojson" ref="geojson" :geojson="geojson" :options="{onEachFeature: showPopup}" :optionsStyle="{color: secondaryColor, weight: secondaryWeight}" />
+      <l-geo-json v-if="intersectsPolygon" ref="intersectsLayer" :geojson="intersectsPolygon" :options="{onEachFeature: showIntersectsPopup}" :optionsStyle="{color: '#3B82F6', weight: 2, fillColor: '#3B82F6', fillOpacity: 0.15, opacity: 0.8, dashArray: '5, 5'}" />
     </l-map>
     <b-popover
       v-if="popover && selectedItem" placement="left" triggers="manual" :show="selectedItem !== null"
@@ -180,6 +181,15 @@ export default {
         }
       }
       return wmsLinks;
+    },
+    naturalLanguageDescription() {
+      return this.naturalLanguageExplanation;
+    },
+    intersectsPolygon() {
+      if (this.stacLayerData && this.stacLayerData.intersects) {
+        return this.stacLayerData.intersects;
+      }
+      return null;
     }
   },
   watch: {
@@ -452,6 +462,10 @@ export default {
       }
       layer.bindPopup(html);
     },
+    showIntersectsPopup(feature, layer) {
+      const html = `<h3>${this.$t('search.naturalLanguageSearchArea')}</h3><p>${this.$t('search.naturalLanguageSearchAreaDescription')}</p>`;
+      layer.bindPopup(html);
+    },
     addBoundsSelector() {
       this.areaSelect = L.areaSelect({ // eslint-disable-line 
         width: 300,
diff --git a/src/components/SearchFilter.vue b/src/components/SearchFilter.vue
index 12a9a593b..cb51d340c 100644
--- a/src/components/SearchFilter.vue
+++ b/src/components/SearchFilter.vue
@@ -439,7 +439,8 @@ export default {
           // Emit the natural language search results
           this.$emit('natural-language-results', {
             features: responseData.results.items,
-            type: 'Feature'
+            type: 'Feature',
+            intersects: responseData.results.search_params?.intersects || null
           });
         } catch (error) {
           console.error('Error in semantic search:', error);
diff --git a/src/locales/en/texts.json b/src/locales/en/texts.json
index a18a2d139..240e4baf4 100644
--- a/src/locales/en/texts.json
+++ b/src/locales/en/texts.json
@@ -228,6 +228,8 @@
     "naturalLanguageQuery": "AI Search",
     "naturalLanguageInfo": "Enter a natural language query to search. This will replace any existing filter selections and return AI-powered search results.",
     "applyNaturalLanguageQuery": "Search",
+    "naturalLanguageSearchArea": "Natural Language Search Area",
+    "naturalLanguageSearchAreaDescription": "This area represents the spatial extent used in your natural language search query.",
     "processing": "Processing...",
     "equalTo": "equal to",
     "filterBySpatialExtent": "Filter by spatial extent",
diff --git a/src/views/Search.vue b/src/views/Search.vue
index f500b063c..d73feae68 100644
--- a/src/views/Search.vue
+++ b/src/views/Search.vue
@@ -112,6 +112,7 @@ export default {
       collectionFilters: {},
       activeSearch: 0,
       selectedCollections: {},
+      naturalLanguageIntersects: null,
     };
   },
   computed: {
@@ -148,7 +149,8 @@ export default {
       return {
         type: 'FeatureCollection',
         features: this.results,
-        links: []
+        links: [],
+        intersects: this.naturalLanguageIntersects
       };
     },
     results() {
@@ -249,6 +251,7 @@ export default {
       this.loading = false;
       this.link = this.catalogUrl;
       this.data = data;
+      this.naturalLanguageIntersects = data.intersects;
     },
     handleNaturalLanguageError(errorMessage) {
       this.error = errorMessage;
@@ -299,19 +302,19 @@ export default {
         this.loading = false;
       }
     },
-    async setFilters(filters, reset = false) {
+    setFilters(filters, reset = false) {
+      if (reset) {
+        this.naturalLanguageIntersects = null; // Clear intersects polygon on reset
+        this.data = null;
+      } else {
+        this.loadResults(this.searchLink);
+      }
       if (this.isCollectionSearch) {
         this.collectionFilters = filters;
       }
       else {
         this.itemFilters = filters;
       }
-      if (reset) {
-        this.data = null;
-      }
-      else {
-        await this.loadResults(this.searchLink);
-      }
     },
     showPage(url) {
       this.$store.commit('showPage', {

From b03fd4d677c96976af4081b45d224536a90eaac7 Mon Sep 17 00:00:00 2001
From: Vitor George <vitor.george@gmail.com>
Date: Wed, 18 Jun 2025 14:30:23 +0100
Subject: [PATCH 09/10] feat: populate collections filter from natural language
 search response

---
 src/components/SearchFilter.vue | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/src/components/SearchFilter.vue b/src/components/SearchFilter.vue
index cb51d340c..62ffae00c 100644
--- a/src/components/SearchFilter.vue
+++ b/src/components/SearchFilter.vue
@@ -436,6 +436,27 @@ export default {
             }
           }
           
+          // Extract collections from search_params if available
+          if (responseData.results && responseData.results.search_params && responseData.results.search_params.collections) {
+            const collectionIds = responseData.results.search_params.collections;
+            if (Array.isArray(collectionIds) && collectionIds.length > 0) {
+              // Remove duplicates and set collections in the query
+              const uniqueCollectionIds = [...new Set(collectionIds)];
+              this.$set(this.query, 'collections', uniqueCollectionIds);
+              
+              // Update selectedCollections to match the query collections
+              this.selectedCollections = uniqueCollectionIds.map(id => {
+                // Try to find existing collection in the collections array
+                let existingCollection = this.collections.find(c => c.value === id);
+                if (existingCollection) {
+                  return existingCollection;
+                }
+                // If not found, create a new collection option
+                return this.collectionToMultiSelect({id});
+              });
+            }
+          }
+          
           // Emit the natural language search results
           this.$emit('natural-language-results', {
             features: responseData.results.items,

From ae83557fcc342b0c08b31efd718e9c04660d0b21 Mon Sep 17 00:00:00 2001
From: Vitor George <vitor.george@gmail.com>
Date: Wed, 18 Jun 2025 14:32:58 +0100
Subject: [PATCH 10/10] feat: populate items per page from natural language
 search response

---
 src/components/SearchFilter.vue | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/components/SearchFilter.vue b/src/components/SearchFilter.vue
index 62ffae00c..107e016c0 100644
--- a/src/components/SearchFilter.vue
+++ b/src/components/SearchFilter.vue
@@ -457,6 +457,16 @@ export default {
             }
           }
           
+          // Extract max_items from search_params if available
+          if (responseData.results && responseData.results.search_params && responseData.results.search_params.max_items) {
+            const maxItems = parseInt(responseData.results.search_params.max_items, 10);
+            if (!isNaN(maxItems) && maxItems > 0) {
+              // Ensure the value doesn't exceed the maximum allowed
+              const limitedMaxItems = Math.min(maxItems, this.maxItems);
+              this.$set(this.query, 'limit', limitedMaxItems);
+            }
+          }
+          
           // Emit the natural language search results
           this.$emit('natural-language-results', {
             features: responseData.results.items,