From 142179d63fa87ae8183cd8470fbe3659c136eb8f Mon Sep 17 00:00:00 2001
From: Johnpaul <polymenjohn1@gmail.com>
Date: Fri, 5 Sep 2025 22:08:13 +0100
Subject: [PATCH] feat: enable search box in MultiSelect and replace tag spans
 with SquareChip in TemplateWorkflowCard

---
 .../custom/widget/WorkflowTemplateSelector.vue           | 2 +-
 src/components/templates/TemplateWorkflowCard.vue        | 9 ++++-----
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/components/custom/widget/WorkflowTemplateSelector.vue b/src/components/custom/widget/WorkflowTemplateSelector.vue
index 40860a9c64..64cb0365bf 100644
--- a/src/components/custom/widget/WorkflowTemplateSelector.vue
+++ b/src/components/custom/widget/WorkflowTemplateSelector.vue
@@ -41,9 +41,9 @@
           <!-- Model Filter -->
           <MultiSelect
             v-model="selectedModelObjects"
+            :show-search-box="true"
             :label="modelFilterLabel"
             :options="modelOptions"
-            :has-search-box="true"
             :search-placeholder="
               $t('templateWorkflows.searchModels', 'Search models...')
             "
diff --git a/src/components/templates/TemplateWorkflowCard.vue b/src/components/templates/TemplateWorkflowCard.vue
index 68d7650acb..b674f7b959 100644
--- a/src/components/templates/TemplateWorkflowCard.vue
+++ b/src/components/templates/TemplateWorkflowCard.vue
@@ -62,13 +62,11 @@
               <div
                 class="flex flex-wrap absolute bottom-4 left-4 px-1 pointer-events-auto gap-2"
               >
-                <span
+                <SquareChip
                   v-for="tag in template.tags"
                   :key="tag"
-                  class="px-2 py-1 text-xs bg-surface-100 dark-theme:bg-surface-800 text-surface-300 dark-theme:text-surface-300 rounded backdrop-blur-sm bg-[#D9D9D9]/40"
-                >
-                  {{ tag }}
-                </span>
+                  :label="tag"
+                />
               </div>
             </div>
           </template>
@@ -120,6 +118,7 @@ import Card from 'primevue/card'
 import ProgressSpinner from 'primevue/progressspinner'
 import { computed, ref } from 'vue'
 
+import SquareChip from '@/components/chip/SquareChip.vue'
 import AudioThumbnail from '@/components/templates/thumbnails/AudioThumbnail.vue'
 import CompareSliderThumbnail from '@/components/templates/thumbnails/CompareSliderThumbnail.vue'
 import DefaultThumbnail from '@/components/templates/thumbnails/DefaultThumbnail.vue'