the element to show and search for a prompt is correctly showed and hidden. see #130

_locales/en/messages.json

@@ -542,5 +542,9 @@
   "StorageSpace": {
     "message": "Total storage space occupied",
     "description": ""
+  },
+  "SearchPrompt": {
+    "message": "Search a prompt",
+    "description": ""
   }
 }

css/mzta-compose-styles.css

@@ -13,15 +13,27 @@
   align-items: center; 
 }
 
-.mzta_autocomplete-items {
+#mzta_search_icon{
+  position: absolute;
+  left: 0.7em;
+}
+
+#mzta_search_input{
+  width: 12em;
+}
+
+#mzta_autocomplete-items {
     position: absolute;
+    top: 2em;
+    left: 2em;
     border: 1px solid #ccc;
     border-top: none;
     z-index: 1001;
     background-color: #fff;
     max-height: 150px;
     overflow-y: auto;
-    width: 300px;
+    width: 12em;
+    max-height: 30em;
 }
 
 .mzta_autocomplete-item {
@@ -46,7 +58,7 @@
         color:#ffffff;
     }
 
-    .mzta_autocomplete-items {
+    #mzta_autocomplete-items {
         border: 1px solid #555;
         background-color: #2c2c2c;
     }

js/mzta-compose-script.js

@@ -112,14 +112,22 @@ function searchPrompt(){
   const banner = document.createElement('div');
   banner.id = 'mzta_search_banner';
 
+  const img = document.createElement('img');
+  img.src = browser.runtime.getURL('images/icon-16px.png');
+  img.id="mzta_search_icon";
+  img.title = "ThunderAI";
+  img.width = 16;
+  img.height = 16;
+  banner.appendChild(img);
+
   const input = document.createElement('input');
   input.type = 'text';
   input.id = 'mzta_search_input';
-  input.placeholder = 'Search a prompt...';
+  input.placeholder = browser.i18n.getMessage('SearchPrompt');
   banner.appendChild(input);
 
   const autocompleteList = document.createElement('div');
-  autocompleteList.classList.add('mzta_autocomplete-items');
+  autocompleteList.id = 'mzta_autocomplete-items';
   autocompleteList.style.display = 'none';
   banner.appendChild(autocompleteList);
 
@@ -128,10 +136,11 @@ function searchPrompt(){
     const query = this.value.trim().toLowerCase();
     autocompleteList.innerHTML = ''; // Clear previous suggestions
 
-    if (query === '') {
-        autocompleteList.style.display = 'none';
-        return;
-    }
+    // commented out to show all the prompts when the input is empty
+    // if (query === '') {
+    //     autocompleteList.style.display = 'none';
+    //     return;
+    // }
 
     // Filter data based on the query
     const filteredData = autocompleteData.filter(item => item.toLowerCase().startsWith(query));
@@ -169,5 +178,8 @@ function searchPrompt(){
   });
 
   document.body.insertBefore(banner, document.body.firstChild);
-  input.focus();
+  setTimeout(() => {
+    input.focus();
+    input.dispatchEvent(new InputEvent('input', { bubbles: true }));
+  }, 100);
 }