feat(settings): Add discover more models button

- Introduced a new SVG icon for redirect functionality.
- Updated ModelSelector component to display a button for adding models when none are available, linking to the Ollama search page.
- Enhanced the Selector component to allow for additional content at the bottom of the dropdown.
- Updated translations for various languages to include new strings related to model selection and discovery.
- Added a constant for the Ollama search URL to facilitate navigation.

Author: tonyhu-012

assets/icons/ollama-redirect.svg

@@ -3,10 +3,25 @@
     class="flex justify-between items-center gap-3 relative"
     @click="onClick"
   >
+    <a
+      v-if="modelList.length === 0 && showDiscoverMore"
+      :href="OLLAMA_SEARCH_URL"
+      rel="noopener noreferrer"
+      target="_blank"
+    >
+      <Button
+        variant="secondary"
+        class="flex justify-between gap-[6px] items-center cursor-pointer text-[13px] font-medium py-0 px-[10px] h-8"
+      >
+        <IconOllamaRedirect class="w-4 h-4" />
+        {{ t('settings.models.add_model_to_start') }}
+      </Button>
+    </a>
     <Selector
+      v-else
       v-model="selectedModel"
       :options="modelOptions"
-      placeholder="⚠️ No model"
+      :placeholder="t('settings.models.no_model')"
       class="text-xs max-w-full"
       :disabled="modelList.length === 0"
       dropdownClass="text-xs text-black w-52"
@@ -75,6 +90,27 @@
           />
         </div>
       </template>
+      <template
+        v-if="showDiscoverMore"
+        #bottom
+      >
+        <div class="text-gray-500 text-xs">
+          <Divider />
+          <a
+            :href="OLLAMA_SEARCH_URL"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="h-8 px-3 flex items-center gap-2 cursor-pointer text-black hover:bg-[#EAECEF]"
+          >
+            <IconRedirect />
+            <Text
+              size="small"
+            >
+              {{ t('settings.models.discover_more') }}
+            </Text>
+          </a>
+        </div>
+      </template>
     </Selector>
   </div>
 </template>
@@ -83,24 +119,33 @@
 import { computed, onMounted, toRefs, watch } from 'vue'
 
 import IconDelete from '@/assets/icons/delete.svg?component'
+import IconOllamaRedirect from '@/assets/icons/ollama-redirect.svg?component'
+import IconRedirect from '@/assets/icons/redirect.svg?component'
 import ModelLogo from '@/components/ModelLogo.vue'
 import { useOllamaStatusStore } from '@/entrypoints/content/store'
 import { deleteOllamaModel } from '@/entrypoints/content/utils/llm'
 import { showSettings } from '@/entrypoints/content/utils/settings'
+import { OLLAMA_SEARCH_URL } from '@/utils/constants'
 import { formatSize } from '@/utils/formatter'
+import { useI18n } from '@/utils/i18n'
 import { SUPPORTED_MODELS } from '@/utils/llm/web-llm'
 import { getUserConfig } from '@/utils/user-config'
 import { classNames } from '@/utils/vue/utils'
 
 import Selector from './Selector.vue'
+import Button from './ui/Button.vue'
+import Divider from './ui/Divider.vue'
+import Text from './ui/Text.vue'
 
 defineProps<{
   showDetails?: boolean
+  showDiscoverMore?: boolean
   allowDelete?: boolean
   dropdownAlign?: 'left' | 'center' | 'right' | 'stretch' | undefined
   containerClass?: string
 }>()
 
+const { t } = useI18n()
 const { modelList: ollamaModelList } = toRefs(useOllamaStatusStore())
 const { updateModelList: updateOllamaModelList } = useOllamaStatusStore()
 

assets/icons/redirect.svg

@@ -57,14 +57,14 @@
         v-if="isOpen"
         ref="dropdownRef"
         data-nativemind-selector-dropdown
-        class="absolute overflow-hidden z-10 bg-bg-component rounded-lg shadow-01 p-1"
+        class="absolute overflow-hidden z-10 bg-bg-component rounded-lg shadow-01"
         :style="{ top: `${dropdownPos.y}px`, left: `${dropdownPos.x}px`, width: dropdownPos.width ? `${dropdownPos.width}px` : undefined, zIndex: String(zIndex) }"
         :class="dropdownClass"
       >
         <ScrollContainer
           containerClass="h-full max-h-60"
           itemContainerClass="h-max"
-          class="grow overflow-hidden"
+          class="grow overflow-hidden p-1"
           showScrollbar
           :arrivalShadow="false"
         >
@@ -89,6 +89,9 @@
             {{ props.emptyPlaceholder }}
           </div>
         </ScrollContainer>
+        <div>
+          <slot name="bottom" />
+        </div>
       </div>
     </Teleport>
   </div>

components/ModelSelector.vue

@@ -167,16 +167,9 @@
                 type="buttons"
                 dropdownAlign="left"
                 showDetails
+                showDiscoverMore
                 allowDelete
               />
-              <a
-                href="https://ollama.com/search"
-                class="text-xs text-icon-link hover:underline flex gap-1 items-center"
-                target="_blank"
-              >
-                <!-- <IconOllamaComponent class="h-[13px]" /> -->
-                {{ t('settings.models.discover_more') }}
-              </a>
               <a
                 :href="OLLAMA_TUTORIAL_URL"
                 target="_blank"

components/Selector.vue

@@ -79,7 +79,9 @@
     "get_ollama": "Holen Sie sich Ollama",
     "models": {
       "title": "Aktives Modell",
-      "discover_more": "Entdecken Sie weitere Modelle"
+      "discover_more": "Entdecken Sie weitere Modelle",
+      "no_model": "⚠️ Kein Modell",
+      "add_model_to_start": "Fügen Sie ein Modell hinzu, um zu beginnen"
     },
     "ollama": {
       "already_installed": "Haben Sie Ollama bereits installiert und gestartet?",

entrypoints/content/components/Settings/index.vue

@@ -28,7 +28,9 @@
     },
     "models": {
       "title": "Models",
-      "discover_more": " Discover more models"
+      "discover_more": " Discover more models",
+      "no_model": "⚠️ No model",
+      "add_model_to_start": "Add a model to start"
     },
     "quick_actions": {
       "title": "Customize Quick Actions",