feat(style): update ModelSelector container position

Author: tonyhu-012

components/ModelSelector.vue

@@ -10,7 +10,7 @@
       class="text-xs max-w-full"
       :disabled="modelList.length === 0"
       dropdownClass="text-xs text-black w-52"
-      containerClass="max-w-full"
+      :containerClass="classNames('max-w-full', containerClass)"
       :dropdownAlign="dropdownAlign"
     >
       <template #button="{ option }">
@@ -84,13 +84,15 @@ import { formatSize } from '@/utils/formatter'
 import { SUPPORTED_MODELS } from '@/utils/llm/web-llm'
 import { getTabStore } from '@/utils/tab-store'
 import { getUserConfig } from '@/utils/user-config'
+import { classNames } from '@/utils/vue/utils'
 
 import Selector from './Selector.vue'
 
 defineProps<{
   showDetails?: boolean
   allowDelete?: boolean
   dropdownAlign?: 'left' | 'center' | 'right' | 'stretch' | undefined
+  containerClass?: string
 }>()
 
 const { modelList: ollamaModelList } = toRefs(useOllamaStatusStore())

entrypoints/content/components/Chat/index.vue

@@ -47,15 +47,15 @@
     </ScrollContainer>
     <div
       ref="inputContainerRef"
-      class="p-3 absolute bottom-0 left-0 right-0 flex flex-col gap-3 z-50"
+      class="p-4 pt-2 absolute bottom-0 left-0 right-0 flex flex-col gap-3 z-50"
     >
       <div>
         <TabSelector v-model:selectedTabs="contextTabs" />
       </div>
       <div class="flex gap-1">
         <ScrollContainer
           class="max-h-72 grow shadow-02 bg-white rounded-md"
-          itemContainerClass="p-2"
+          itemContainerClass="p-1"
         >
           <div class="flex gap-1 items-stretch">
             <AutoExpandTextArea

entrypoints/content/components/Main.vue

@@ -4,19 +4,23 @@
       ref="topRef"
       class="bg-[#E9E9EC]"
     >
-      <div class="h-13 px-3 flex items-center justify-between border-b border-gray-200 ">
+      <div class="h-15 px-4 flex items-center justify-between border-b border-gray-200 ">
         <div class="left flex items-center gap-2">
           <Logo
-            showText
             class="font-bold text-base"
           />
+          <ModelSelector
+            containerClass="h-7"
+            class="max-w-44"
+            dropdownAlign="left"
+          />
+        </div>
+        <div class="right flex items-center gap-4">
           <IconAdd
             v-if="!chat.historyManager.onlyHasDefaultMessages()"
             class="w-4 cursor-pointer hover:text-gray-500"
             @click="onNewChat"
           />
-        </div>
-        <div class="right flex items-center gap-4">
           <IconSetting
             class="w-4 cursor-pointer hover:text-gray-500 ml-1"
             @click="onClickSetting"
@@ -38,15 +42,6 @@
           />
         </div>
       </div>
-      <div
-        class="w-full flex justify-end px-4 pb-px"
-        :style="{ top: `${topBounding.height.value}px` }"
-      >
-        <ModelSelector
-          class="max-w-44"
-          dropdownAlign="right"
-        />
-      </div>
     </div>
     <div class="px-5 py-2">
       <div