Merge: merge dev into main (1.2.0)

CHANGELOG.md

@@ -1,6 +1,40 @@
 # Changelog
 
 
+## v1.2.0-beta.4
+
+[compare changes](https://github.com/NativeMindBrowser/NativeMindExtension/compare/v1.2.0-beta.3...v1.2.0-beta.4)
+
+### 🚀 Enhancements
+
+- **style:** Update ModelSelector container position ([1ddfcba](https://github.com/NativeMindBrowser/NativeMindExtension/commit/1ddfcba))
+
+### ❤️ Contributors
+
+- Tony Hu ([@tonyhu-012](http://github.com/tonyhu-012))
+
+## v1.2.0-beta.3
+
+[compare changes](https://github.com/NativeMindBrowser/NativeMindExtension/compare/v1.2.0-beta.2...v1.2.0-beta.3)
+
+### 🩹 Fixes
+
+- Implement URL validation and timeout handling for url like chrome webstore ([8e4726a](https://github.com/NativeMindBrowser/NativeMindExtension/commit/8e4726a))
+- Adjust textarea height handling and update tab selection order ([441d2d0](https://github.com/NativeMindBrowser/NativeMindExtension/commit/441d2d0))
+
+### 💅 Refactors
+
+- **auto-imports:** Disable auto imports ([8bb6192](https://github.com/NativeMindBrowser/NativeMindExtension/commit/8bb6192))
+- **lint:** Update eslint rules ([eda482f](https://github.com/NativeMindBrowser/NativeMindExtension/commit/eda482f))
+
+### ❤️ Contributors
+
+- Tony Hu ([@tonyhu-012](http://github.com/tonyhu-012))
+
+## v1.2.0-beta.2
+
+[compare changes](https://github.com/NativeMindBrowser/NativeMindExtension/compare/v1.2.0-beta.1...v1.2.0-beta.2)
+
 ## v1.2.0-beta.1
 
 

app.config.ts

@@ -1,4 +1,4 @@
-import { defineAppConfig } from '#imports'
+import { defineAppConfig } from 'wxt/utils/define-app-config'
 
 // Define types for your config
 declare module 'wxt/utils/define-app-config' {

components/AutoExpandTextArea.vue

@@ -7,8 +7,10 @@
     @input="onInput"
   />
 </template>
+
 <script setup lang="ts">
 import { useVModel } from '@vueuse/core'
+import { nextTick, ref, watch } from 'vue'
 
 const emit = defineEmits<{
   (e: 'input', ev: Event): void
@@ -19,18 +21,23 @@ const props = defineProps<{
   modelValue?: string
 }>()
 
+const textareaRef = ref<HTMLTextAreaElement | null>(null)
 const inputValue = useVModel(props, 'modelValue', emit, {
-  passive: true,
   eventName: 'update:modelValue',
 })
 
-const onInput = (event: Event) => {
-  emit('input', event)
-  const textarea = event.target as HTMLTextAreaElement
+watch(inputValue, async () => {
+  await nextTick()
+  const textarea = textareaRef.value as HTMLTextAreaElement
+  if (!textarea) return
   textarea.style.height = 'auto' // Reset height to auto to shrink if needed
   // force a reflow to ensure the height is recalculated
   const _ = textarea.offsetHeight
   const scrollHeight = textarea.scrollHeight
   textarea.style.height = `${scrollHeight}px` // Set height to scrollHeight to expand
+})
+
+const onInput = (event: Event) => {
+  emit('input', event)
 }
 </script>

components/Checkbox.vue

@@ -9,6 +9,7 @@
     >
   </div>
 </template>
+
 <script setup lang="ts">
 import { useVModel } from '@vueuse/core'
 

components/Input.vue

@@ -4,6 +4,7 @@
     :class="classNames('relative focus:shadow-[0px_0px_0px_1px_#24B960] rounded-[6px] shadow-[0px_0px_0px_1px_rgba(0,0,0,0.08),0px_1px_2px_0px_rgba(0,0,0,0.12)] p-2 outline-none', props.class)"
   >
 </template>
+
 <script setup lang="tsx">
 import { useVModel } from '@vueuse/core'
 

components/Loading.vue

@@ -11,6 +11,7 @@
     />
   </div>
 </template>
+
 <script setup lang="ts">
 withDefaults(
   defineProps<{

components/Modal.vue

@@ -57,10 +57,12 @@
     </div>
   </Teleport>
 </template>
+
 <script lang="ts">
 import { useElementBounding } from '@vueuse/core'
-import { reactive } from 'vue'
+import { computed, reactive, ref, watch } from 'vue'
 
+import { useInjectContext } from '@/composables/useInjectContext'
 import { classNames, ComponentClassAttr } from '@/utils/vue/utils'
 
 const modalStack: { close(): void, canCloseByEsc(): boolean }[] = reactive([])
@@ -74,6 +76,7 @@ const onEscPressed = (e: KeyboardEvent) => {
 
 window.addEventListener('keydown', onEscPressed, false)
 </script>
+
 <script setup lang="ts">
 import IconClose from '@/assets/icons/close.svg?component'
 import { useZIndex } from '@/composables/useZIndex'
@@ -201,6 +204,7 @@ const onClose = () => {
   props.onClose?.()
 }
 </script>
+
 <style lang="scss" scoped>
 @keyframes fade-in {
   from {

components/ModelLogo.vue

@@ -6,7 +6,10 @@
     />
   </div>
 </template>
+
 <script setup lang="ts">
+import { computed } from 'vue'
+
 import LogoCohere from '@/assets/icons/model-logo-cohere.svg?component'
 import LogoDeepseek from '@/assets/icons/model-logo-deepseek.svg?component'
 import LogoFallback from '@/assets/icons/model-logo-fallback.svg?component'

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 }">
@@ -72,8 +72,9 @@
     </Selector>
   </div>
 </template>
+
 <script setup lang="ts">
-import { toRefs } from 'vue'
+import { computed, onMounted, toRefs, watch } from 'vue'
 
 import IconDelete from '@/assets/icons/delete.svg?component'
 import ModelLogo from '@/components/ModelLogo.vue'
@@ -83,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())

components/ProgressBar.vue

@@ -6,7 +6,10 @@
     />
   </div>
 </template>
+
 <script setup lang="ts">
+import { computed } from 'vue'
+
 const props = defineProps<{
   progress: number
 }>()

components/ScrollContainer.vue

@@ -38,8 +38,10 @@
     </div>
   </div>
 </template>
+
 <script setup lang="ts">
 import { useElementBounding, useScroll } from '@vueuse/core'
+import { computed, ref, watch } from 'vue'
 
 import { classNames, ComponentClassAttr } from '@/utils/vue/utils'
 

components/Selector.vue

@@ -96,7 +96,10 @@
 
 <script setup lang="tsx" generic="Id extends string, OptionValue, Option extends { id: Id; value?: OptionValue; label: string | Component, textLabel?: string, disabled?: boolean }">
 import { useElementBounding, useEventListener, useVModel } from '@vueuse/core'
-import { Component, computed, FunctionalComponent, ref, watch } from 'vue'
+import { Component, computed, FunctionalComponent, Ref, ref, watch, watchEffect } from 'vue'
+
+import { useInjectContext } from '@/composables/useInjectContext'
+import { useZIndex } from '@/composables/useZIndex'
 
 import ScrollContainer from './ScrollContainer.vue'
 import Button from './ui/Button.vue'

components/StatusBadge.vue

@@ -22,6 +22,7 @@
     </div>
   </div>
 </template>
+
 <script setup lang="ts">
 import Text from '@/components/ui/Text.vue'
 

components/Switch.vue

@@ -66,9 +66,12 @@
     </div>
   </div>
 </template>
+
 <script setup lang="ts" generic="T extends unknown, Key extends string | boolean, Item extends SwitchItem<T, Key>">
 import { useElementBounding } from '@vueuse/core'
-import type { CSSProperties, UnwrapRef, VNode } from 'vue'
+import { computed, type CSSProperties, nextTick, onMounted, reactive, ref, type UnwrapRef, type VNode, watch } from 'vue'
+
+import { debounce } from '@/utils/debounce'
 
 export interface SwitchItem<T = unknown, Key extends string | boolean = string> {
   name?: string

components/Tag.vue

@@ -5,6 +5,7 @@
     <slot name="button" />
   </div>
 </template>
+
 <script setup lang="ts">
 import { classNames, ComponentClassAttr } from '@/utils/vue/utils'
 

components/Textarea.vue

@@ -34,6 +34,7 @@
     </div>
   </div>
 </template>
+
 <script setup lang="tsx">
 import { useVModel } from '@vueuse/core'
 import { computed, onUnmounted, ref } from 'vue'

components/ToastGroup.vue

@@ -27,7 +27,10 @@
     </div>
   </div>
 </template>
+
 <script setup lang="ts">
+import { ref } from 'vue'
+
 import IconClose from '@/assets/icons/close.svg?component'
 import IconWarning from '@/assets/icons/warning.svg?component'
 

components/ui/Button.vue

@@ -6,7 +6,10 @@
     <slot />
   </button>
 </template>
+
 <script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+
 import { classNames, ComponentClassAttr } from '@/utils/vue/utils'
 
 const props = withDefaults(defineProps<{

components/ui/Text.vue

@@ -6,7 +6,10 @@
     <slot />
   </div>
 </template>
+
 <script setup lang="ts">
+import { computed } from 'vue'
+
 import { classNames, ComponentClassAttr } from '@/utils/vue/utils'
 
 type Color = 'primary' | 'secondary' | 'tertiary' | 'disabled' | 'placeholder'
@@ -42,6 +45,7 @@ const sizeClass = computed(() => {
 })
 
 </script>
+
 <style scoped>
 .text-container {
   display: contents;

composables/useElementsBounding.ts

@@ -1,3 +1,5 @@
+import { onScopeDispose, ref } from 'vue'
+
 interface WatchItem {
   el: HTMLElement
   observer: ResizeObserver

composables/useInjectStyle.ts

@@ -1,3 +1,5 @@
+import { onScopeDispose } from 'vue'
+
 export function useInjectStyle(inlineCss: string) {
   const styleElement = document.createElement('style')
   styleElement.textContent = inlineCss

composables/useObserverElements.ts

@@ -1,11 +1,11 @@
 import { useEventListener, useMutationObserver } from '@vueuse/core'
+import { ref } from 'vue'
 
 export function useObserveElements(matched: (el: HTMLElement) => boolean, initElements: HTMLElement[], attributeFilter: string[] = ['contenteditable', 'type']) {
   const elements = ref<HTMLElement[]>([...initElements])
   useEventListener(window, 'focusin', (event) => {
     const target = event.target as HTMLElement
     if (!elements.value.includes(target) && matched(target)) {
-      logger.debug('Focusin on new element:', target)
       elements.value.push(target)
     }
   }, { capture: true })
@@ -19,21 +19,14 @@ export function useObserveElements(matched: (el: HTMLElement) => boolean, initEl
           }
         })
         mutation.addedNodes.forEach((node) => {
-          if (node.nodeType === Node.ELEMENT_NODE && node.nodeName === 'INPUT') {
-            logger.debug('Input node added:', node)
-          }
           const exist = elements.value.find((el) => el === node)
           if (!exist && node instanceof HTMLElement && matched(node)) {
-            logger.debug('Added node:', node, elements.value)
             elements.value.push(node as HTMLElement)
           }
         })
       }
       else if (mutation.type === 'attributes') {
         const target = mutation.target as HTMLElement
-        if (target.nodeName === 'INPUT') {
-          logger.debug('Attribute changed:', target, mutation.attributeName)
-        }
         if (!elements.value.includes(target) && matched(target)) {
           elements.value.push(target)
         }

composables/useRefSnapshot.ts

@@ -1,4 +1,4 @@
-import { ref } from 'vue'
+import { Ref, ref } from 'vue'
 
 export function useRefSnapshot<T>(refValue: Ref<T>) {
   const snapshot = ref(refValue.value)

composables/useShadow.ts

@@ -1,3 +1,4 @@
+import { onScopeDispose } from 'vue'
 import { makeShadow } from 'vue-shadow-dom'
 
 export function useShadow(attachedEl: HTMLElement) {