@meistrari/chat-nuxt 1.8.1 → 1.10.0

package/README.md

@@ -220,6 +220,7 @@ Key props for embedding:
 | `conversationId` | `string \| null` | `null` | Controlled conversation (supports v-model) |
 | `initialConversationId` | `string \| null` | `null` | Open this conversation on mount |
 | `conversationScope` | `string \| null` | `null` | Isolate conversation history by technical scope within the current workspace and runtime |
+| `defaultConversationCreatorFilter` | `'all' \| 'mine'` | `'all'` | Initial sidebar creator filter |
 | `telaAgentId` | `string` | — | Use Tela agent mode for this embed |
 | `telaAgentInputs` | `TelaAgentExecutionInput[] \| null` | `undefined` | Inputs sent with each Tela agent run; hides the variables panel when non-null |
 | `workspaceSettings` | `WorkspaceSettings \| null` | `null` | Override settings from host app |

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@meistrari/chat-nuxt",
   "configKey": "chatNuxt",
-  "version": "1.8.1",
+  "version": "1.10.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "unknown"

package/dist/runtime/components/MeistrariChatEmbed.vue

@@ -3,6 +3,7 @@ const props = defineProps({
   conversationId: { type: [String, null], required: false },
   initialConversationId: { type: [String, null], required: false },
   conversationScope: { type: [String, null], required: false },
+  defaultConversationCreatorFilter: { type: String, required: false },
   hideSidebar: { type: Boolean, required: false },
   hideSettings: { type: Boolean, required: false },
   loadingMessages: { type: [Array, null], required: false },
@@ -27,6 +28,7 @@ const hideSettings = computed(() => props.hideSettings ?? false);
         :conversation-id="conversationId"
         :initial-conversation-id="initialConversationId"
         :conversation-scope="conversationScope"
+        :default-conversation-creator-filter="defaultConversationCreatorFilter"
         :hide-sidebar="hideSidebar"
         :hide-settings="hideSettings"
         :features="features"
@@ -44,6 +46,7 @@ const hideSettings = computed(() => props.hideSettings ?? false);
         :conversation-id="conversationId"
         :initial-conversation-id="initialConversationId"
         :conversation-scope="conversationScope"
+        :default-conversation-creator-filter="defaultConversationCreatorFilter"
         :hide-sidebar="hideSidebar"
         :hide-settings="hideSettings"
         :features="features"

package/dist/runtime/components/chat/conversation-creator-filter.d.vue.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/chat/conversation-creator-filter.vue

@@ -0,0 +1,95 @@
+<script setup>
+import { nextTick } from "vue";
+import { CONVERSATION_CREATOR_FILTER_OPTIONS } from "../../types/chat";
+import {
+  hasConversationCreatorFilterResults,
+  resolveConversationCreatorFilterKeyboardTarget
+} from "../../utils/conversation-creator-filter";
+const { conversationCreatorFilter, conversationCreatorFilterCounts, fetchConversations } = useConversations();
+const isUpdating = ref(false);
+const filterButtonElements = ref([]);
+const filterOptions = computed(() => CONVERSATION_CREATOR_FILTER_OPTIONS.map((option) => ({
+  ...option,
+  count: conversationCreatorFilterCounts.value[option.value]
+})));
+const showConversationCreatorFilter = computed(
+  () => hasConversationCreatorFilterResults(conversationCreatorFilterCounts.value)
+);
+function isConversationCreatorFilter(value) {
+  return value === "all" || value === "mine";
+}
+function setFilterButtonElement(element, index) {
+  if (element && "focus" in element) {
+    filterButtonElements.value[index] = element;
+  }
+}
+function focusFilterButton(value) {
+  const index = filterOptions.value.findIndex((option) => option.value === value);
+  filterButtonElements.value[index]?.focus();
+}
+async function handleFilterUpdate(value, options = {}) {
+  if (isUpdating.value || !isConversationCreatorFilter(value) || value === conversationCreatorFilter.value)
+    return;
+  conversationCreatorFilter.value = value;
+  if (options.focus) {
+    await nextTick();
+    focusFilterButton(value);
+  }
+  isUpdating.value = true;
+  try {
+    await fetchConversations({ force: true });
+  } finally {
+    isUpdating.value = false;
+  }
+}
+function handleFilterKeydown(event, value) {
+  const nextFilter = resolveConversationCreatorFilterKeyboardTarget(value, event.key);
+  if (!nextFilter || isUpdating.value)
+    return;
+  event.preventDefault();
+  void handleFilterUpdate(nextFilter, { focus: true });
+}
+</script>
+
+<template>
+    <div
+        v-if="showConversationCreatorFilter"
+        role="tablist"
+        aria-label="Filtrar conversas por criador"
+        flex items-center w-full h-34px p-3px rounded-12px bg="#F1F1EF"
+        :class="{ 'opacity-70': isUpdating }"
+    >
+        <button
+            v-for="(option, index) in filterOptions"
+            :key="option.value"
+            :ref="(element) => setFilterButtonElement(element, index)"
+            type="button"
+            role="tab"
+            class="creator-filter-option"
+            flex-1 min-w-0 h-28px rounded-9px px-8px
+            flex items-center justify-center gap-4px
+            :class="conversationCreatorFilter === option.value ? 'creator-filter-option-active bg-white cursor-default' : 'bg-transparent hover:bg-white/45 cursor-pointer'"
+            :aria-disabled="isUpdating"
+            :aria-selected="conversationCreatorFilter === option.value"
+            :tabindex="conversationCreatorFilter === option.value ? 0 : -1"
+            @click="handleFilterUpdate(option.value)"
+            @keydown="handleFilterKeydown($event, option.value)"
+        >
+            <span
+                body-12-semibold leading-16px truncate
+                :class="conversationCreatorFilter === option.value ? 'text-neutral-950' : 'text-neutral-500'"
+            >
+                {{ option.label }}
+            </span>
+            <span
+                body-12-semibold leading-16px shrink-0 text-neutral-400
+            >
+                {{ option.count }}
+            </span>
+        </button>
+    </div>
+</template>
+
+<style scoped>
+.creator-filter-option{transition:background-color .16s ease,color .16s ease,box-shadow .16s ease,opacity .16s ease}.creator-filter-option-active{box-shadow:0 1px 2px rgba(16,24,40,.08),0 2px 8px rgba(16,24,40,.1)}.creator-filter-option[aria-disabled=true]{cursor:wait}
+</style>

package/dist/runtime/components/chat/conversation-creator-filter.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/chat/conversation-item.d.vue.ts

@@ -4,6 +4,7 @@ type __VLS_Props = {
     conversation: DeepReadonly<Conversation>;
     active: boolean;
     userImage?: string;
+    selectConversation?: (id: string) => void | Promise<void>;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     delete: (id: string) => any;

package/dist/runtime/components/chat/conversation-item.vue

@@ -1,19 +1,24 @@
 <script setup>
 import { useMagicKeys, useMutationObserver } from "@vueuse/core";
+import { resolveConversationRenameTitle } from "../../utils/conversation-title";
 import { capitalizeFirst } from "../../utils/string";
 const props = defineProps({
   conversation: { type: null, required: true },
   active: { type: Boolean, required: true },
-  userImage: { type: String, required: false }
+  userImage: { type: String, required: false },
+  selectConversation: { type: Function, required: false }
 });
 const emit = defineEmits(["delete", "rename", "duplicate", "export"]);
-const isEditing = ref(false);
-const editTitle = ref("");
-const inputRef = ref(null);
-const justStartedEditing = ref(false);
+const isRenamingInline = ref(false);
+const renameTitle = ref("");
+const renameInputRef = ref(null);
+const isIgnoringInitialRenameBlur = ref(false);
 const showDeleteModal = ref(false);
 const { escape } = useMagicKeys();
 watch(() => escape?.value, (pressed) => {
+  if (pressed && isRenamingInline.value) {
+    cancelRename();
+  }
   if (pressed && showDeleteModal.value) {
     showDeleteModal.value = false;
   }
@@ -31,48 +36,91 @@ useMutationObserver(menuButtonRef, (mutations) => {
     }
   }
 }, { attributes: true });
-function startEditing() {
-  editTitle.value = props.conversation.title;
-  isEditing.value = true;
-  justStartedEditing.value = true;
-  nextTick(() => {
-    inputRef.value?.focus();
-    inputRef.value?.select();
-    setTimeout(() => {
-      justStartedEditing.value = false;
-    }, 100);
-  });
+const conversationPath = computed(() => `/${props.conversation.id}`);
+const conversationNavigationDelayMs = 250;
+let conversationNavigationTimer = null;
+let renameBlurTimer = null;
+function clearPendingConversationNavigation() {
+  if (conversationNavigationTimer === null)
+    return;
+  clearTimeout(conversationNavigationTimer);
+  conversationNavigationTimer = null;
 }
-function saveTitle() {
-  if (justStartedEditing.value) {
+function clearRenameBlurTimer() {
+  if (renameBlurTimer === null)
     return;
-  }
-  const trimmed = editTitle.value.trim();
-  if (trimmed && trimmed !== props.conversation.title) {
-    emit("rename", props.conversation.id, trimmed);
-  }
-  isEditing.value = false;
-  justStartedEditing.value = false;
+  clearTimeout(renameBlurTimer);
+  renameBlurTimer = null;
+}
+function allowRenameBlurSoon() {
+  clearRenameBlurTimer();
+  renameBlurTimer = setTimeout(() => {
+    isIgnoringInitialRenameBlur.value = false;
+    renameBlurTimer = null;
+  }, 100);
+}
+function handleConversationClick(event) {
+  if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey)
+    return;
+  event.preventDefault();
+  clearPendingConversationNavigation();
+  if (event.detail > 1)
+    return;
+  conversationNavigationTimer = setTimeout(() => {
+    if (props.selectConversation) {
+      void props.selectConversation(props.conversation.id);
+    } else {
+      navigateTo(conversationPath.value);
+    }
+    conversationNavigationTimer = null;
+  }, conversationNavigationDelayMs);
+}
+async function focusRenameInput() {
+  await nextTick();
+  renameInputRef.value?.focus();
+  renameInputRef.value?.select();
+  allowRenameBlurSoon();
+}
+function startRename() {
+  isMenuOpen.value = false;
+  clearPendingConversationNavigation();
+  clearRenameBlurTimer();
+  renameTitle.value = props.conversation.title;
+  isIgnoringInitialRenameBlur.value = true;
+  isRenamingInline.value = true;
+  void focusRenameInput();
 }
-function cancelEditing() {
-  isEditing.value = false;
-  editTitle.value = "";
-  justStartedEditing.value = false;
+function handleConversationDoubleClick() {
+  clearPendingConversationNavigation();
+  startRename();
 }
-function handleKeydown(event) {
-  if (event.key === "Enter") {
-    event.preventDefault();
-    saveTitle();
-  } else if (event.key === "Escape") {
-    event.preventDefault();
-    cancelEditing();
+function cancelRename() {
+  isRenamingInline.value = false;
+  isIgnoringInitialRenameBlur.value = false;
+  renameTitle.value = "";
+  clearRenameBlurTimer();
+}
+function submitRename() {
+  if (!isRenamingInline.value)
+    return;
+  const title = resolveConversationRenameTitle(renameTitle.value, props.conversation.title);
+  if (!title) {
+    cancelRename();
+    return;
   }
+  emit("rename", props.conversation.id, title);
+  cancelRename();
+}
+function handleRenameBlur() {
+  if (isIgnoringInitialRenameBlur.value)
+    return;
+  submitRename();
 }
 const menuItems = [
   {
     label: "Renomear",
     icon: "i-ph-pencil-simple",
-    click: () => startEditing()
+    click: () => startRename()
   },
   {
     label: "Duplicar",
@@ -91,11 +139,56 @@ const menuItems = [
     click: () => showDeleteModal.value = true
   }
 ];
+onBeforeUnmount(() => {
+  clearPendingConversationNavigation();
+  clearRenameBlurTimer();
+});
 </script>
 
 <template>
-    <NuxtLink
-        :to="`/${conversation.id}`"
+    <div
+        v-if="isRenamingInline"
+        px-12px
+        h-32px
+        rounded-8px
+        :class="active ? 'bg-neutral-200' : ''"
+    >
+        <div flex items-center justify-between gap-12px h-full>
+            <div v-if="userImage" w-16px h-16px rounded-full overflow-hidden flex-shrink-0>
+                <TelaAvatar
+                    :image="userImage"
+                    alt="Usuário"
+                    size="xs"
+                />
+            </div>
+
+            <div
+                flex-1 min-w-0 flex items-center
+                text-neutral-700
+                pb-1px
+                b-b=".5px solid #A3A3A3"
+            >
+                <input
+                    ref="renameInputRef"
+                    v-model="renameTitle"
+                    type="text"
+                    autocomplete="off"
+                    aria-label="Nome da conversa"
+                    w-full min-w-0
+                    bg-transparent border-none outline-none
+                    text-14px font-medium text-neutral-700 leading-18px tracking="-.15px"
+                    p-0
+                    @blur="handleRenameBlur"
+                    @keydown.enter.prevent="submitRename"
+                    @keydown.escape.prevent.stop="cancelRename"
+                >
+            </div>
+        </div>
+    </div>
+
+    <a
+        v-else
+        :href="conversationPath"
         block
         px-12px
         h-32px
@@ -106,6 +199,8 @@ const menuItems = [
         :class="[
   active ? 'bg-neutral-200' : 'hover:bg-neutral-200/50'
 ]"
+        @click="handleConversationClick"
+        @dblclick.prevent.stop="handleConversationDoubleClick"
     >
         <div flex items-center justify-between gap-12px h-full>
             <!-- User Avatar -->
@@ -118,29 +213,7 @@ const menuItems = [
             </div>
 
             <div flex-1 min-w-0 flex items-center>
-                <input
-                    v-if="isEditing"
-                    ref="inputRef"
-                    v-model="editTitle"
-                    type="text"
-                    text-14px
-                    font-medium
-                    text-neutral-700
-                    w-full
-                    bg-white
-                    border
-                    border-neutral-300
-                    rounded-4px
-                    px-6px
-                    py-2px
-                    outline-none
-                    focus:border-neutral-400
-                    @keydown="handleKeydown"
-                    @blur="saveTitle"
-                    @click.prevent.stop
-                >
                 <span
-                    v-else
                     text-14px
                     font-medium
                     text-neutral-700
@@ -151,7 +224,13 @@ const menuItems = [
                 </span>
             </div>
 
-            <div v-if="!isEditing" mt-2px flex items-center opacity-0 group-hover:opacity-100 transition-opacity :class="isMenuOpen && 'opacity-100'">
+            <div
+                mt-2px
+                flex
+                items-center
+                class="opacity-0 group-hover:opacity-100 transition-opacity"
+                :class="isMenuOpen && 'opacity-100'"
+            >
                 <TelaDropdownMenu :items="menuItems">
                     <button
                         ref="menuButtonRef"
@@ -168,7 +247,7 @@ const menuItems = [
                 </TelaDropdownMenu>
             </div>
         </div>
-    </NuxtLink>
+    </a>
 
     <TelaConfirmationModal
         v-model:open="showDeleteModal"

package/dist/runtime/components/chat/conversation-item.vue.d.ts

@@ -4,6 +4,7 @@ type __VLS_Props = {
     conversation: DeepReadonly<Conversation>;
     active: boolean;
     userImage?: string;
+    selectConversation?: (id: string) => void | Promise<void>;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     delete: (id: string) => any;

package/dist/runtime/components/chat/conversation-list.d.vue.ts

@@ -4,6 +4,8 @@ type __VLS_Props = {
     conversations: DeepReadonly<Conversation[]>;
     currentId?: string;
     getMemberImage?: (userId: string) => string | undefined;
+    selectConversation?: (id: string) => void | Promise<void>;
+    resetConversation?: () => void | Promise<void>;
     loading?: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/chat/conversation-list.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { filterConversationsByTitle } from "../../utils/conversation-search";
 import { groupConversationsByDate } from "../../utils/format-time";
 import { exportConversationToMarkdown } from "../../utils/export-conversation";
 import { conversationListSkeletonRows } from "../../utils/conversation-list-skeleton";
@@ -6,21 +7,36 @@ const props = defineProps({
   conversations: { type: null, required: true },
   currentId: { type: String, required: false },
   getMemberImage: { type: Function, required: false },
+  selectConversation: { type: Function, required: false },
+  resetConversation: { type: Function, required: false },
   loading: { type: Boolean, required: false }
 });
 const chatApi = useChatApi();
 const { deleteConversation, renameConversation, duplicateConversation } = useConversations();
 const { setConversation } = useChat();
 const router = useRouter();
+const conversationSearch = ref("");
+const filteredConversations = computed(
+  () => filterConversationsByTitle(props.conversations, conversationSearch.value, {
+    fallbackTitle: "Nova conversa",
+    shouldInclude: (conversation) => !conversation.title && conversation.id === props.currentId
+  })
+);
 const groupedConversations = computed(() => {
-  return groupConversationsByDate(props.conversations);
+  return groupConversationsByDate(filteredConversations.value);
 });
-function handleDelete(id) {
+const hasConversationSearchQuery = computed(() => conversationSearch.value.trim().length > 0);
+async function handleDelete(id) {
   const route = useRoute();
-  if (route.params.id === id) {
-    router.push("/");
+  const shouldResetConversation = props.currentId === id || route.params.id === id;
+  const deleted = await deleteConversation(id);
+  if (deleted && shouldResetConversation) {
+    if (props.resetConversation) {
+      void props.resetConversation();
+    } else {
+      router.push("/");
+    }
   }
-  deleteConversation(id);
 }
 async function handleRename(id, title) {
   await renameConversation(id, title);
@@ -29,7 +45,11 @@ async function handleDuplicate(id) {
   const duplicated = await duplicateConversation(id);
   if (duplicated) {
     setConversation(duplicated);
-    router.push(`/${duplicated.id}`);
+    if (props.selectConversation) {
+      void props.selectConversation(duplicated.id);
+    } else {
+      router.push(`/${duplicated.id}`);
+    }
   }
 }
 async function handleExport(id) {
@@ -46,7 +66,12 @@ async function handleExport(id) {
 </script>
 
 <template>
-    <div flex="~ col" gap-16px>
+    <div flex="~ col" gap-12px>
+        <div px-8px flex="~ col" gap-8px>
+            <ChatConversationSearch v-model="conversationSearch" />
+            <ChatConversationCreatorFilter />
+        </div>
+
         <div v-if="loading && conversations.length === 0" flex="~ col" gap-4px>
             <div h-20px flex items-center pl-12px pr-4px mb-4px>
                 <TelaSkeleton rounded-4px bg-neutral-200 style="width: 68px; height: 12px;" />
@@ -63,9 +88,9 @@ async function handleExport(id) {
             </div>
         </div>
 
-        <div v-else-if="conversations.length === 0" p-16px text-center>
+        <div v-else-if="filteredConversations.length === 0" p-16px text-center>
             <p text-14px text-neutral-400>
-                Nenhuma conversa ainda
+                {{ hasConversationSearchQuery ? "Nenhuma conversa encontrada" : "Nenhuma conversa ainda" }}
             </p>
         </div>
 
@@ -86,6 +111,7 @@ async function handleExport(id) {
                         :conversation="conversation"
                         :active="conversation.id === currentId"
                         :user-image="getMemberImage?.(conversation.userId)"
+                        :select-conversation="selectConversation"
                         @delete="handleDelete"
                         @rename="handleRename"
                         @duplicate="handleDuplicate"

package/dist/runtime/components/chat/conversation-list.vue.d.ts

@@ -4,6 +4,8 @@ type __VLS_Props = {
     conversations: DeepReadonly<Conversation[]>;
     currentId?: string;
     getMemberImage?: (userId: string) => string | undefined;
+    selectConversation?: (id: string) => void | Promise<void>;
+    resetConversation?: () => void | Promise<void>;
     loading?: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/chat/conversation-search.d.vue.ts

@@ -0,0 +1,16 @@
+type __VLS_Props = {
+    placeholder?: string;
+};
+type __VLS_ModelProps = {
+    modelValue: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {
+    placeholder: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/chat/conversation-search.vue

@@ -0,0 +1,35 @@
+<script setup>
+defineProps({
+  placeholder: { type: String, required: false, default: "Buscar conversas" }
+});
+const searchQuery = defineModel({ type: String, ...{ required: true } });
+function clearSearch() {
+  searchQuery.value = "";
+}
+</script>
+
+<template>
+    <TelaInput
+        v-model="searchQuery"
+        icon="i-ph-magnifying-glass-bold"
+        :placeholder="placeholder"
+        autocomplete="off"
+    >
+        <template v-if="searchQuery" #trailing>
+            <TelaTooltip content="Limpar busca">
+                <button
+                    type="button"
+                    aria-label="Limpar busca"
+                    hover:bg="#EBEFF199"
+                    transition-colors
+                    p-4px rounded-full
+                    class="group"
+                    tabindex="-1"
+                    @click.stop="clearSearch"
+                >
+                    <TelaIcon name="i-ph-x-circle-light" text="#031E22" op-40 group-hover:op-100 transition-opacity />
+                </button>
+            </TelaTooltip>
+        </template>
+    </TelaInput>
+</template>

package/dist/runtime/components/chat/conversation-search.vue.d.ts

@@ -0,0 +1,16 @@
+type __VLS_Props = {
+    placeholder?: string;
+};
+type __VLS_ModelProps = {
+    modelValue: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {
+    placeholder: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;