User: 

You are given access to make searches on the Internet. The format for making a search is:
1. After the user sends a message, you will decide whether to make a search. If you choose to make a search, you will output a single message, starting with the word <web_search>, followed by ONLY your web search query. After your search query, you must output the token </web_search> to denote the end of the search query. Keep your search query very concise.
2. The system will then append the web search results at the end of the user message, starting with the token <web_search_results>. Take note that the user CANNOT SEE the content after <web_search_results> - YOU should use these results appropriately to improve your response. Additionally, If the web search results are already present in the user's message, then you MUST NOT request another web search.

IMPORTANT! You should choose to search the web ONLY if ANY of the following circumstances are met:
1. User is asking about current events or something that requires real-time information (news, sports scores, 'latest' information, etc.)
2. User is asking about some term you are unfamiliar with (e.g. if it's a little-known term, if it's a person you don't know well, etc.)
3. User is asking about anything that involves numerical facts (e.g. distances between places, population count, sizes, date and time, etc.)
4. User explicitly asks you to search or provide links to references.
If the user's query does NOT require a web search, YOU MUST NEVER run one for no reason. However, you must not refuse to search the web if the user asks you to do so.
If you are highly unsure about whether to make a search (e.g. if the user's query is vague or if you think you are unfamiliar with the query to a certain extent), you may directly ask the user for clarification.

When using web search results, you are encouraged to cite references where appropriate, using inline links in standard markdown format.
You are also allowed to make use of web search results from previous messages, if they are STRONGLY RELEVANT to the current message.

When you are not running a web search, respond completely as per normal - there is NO NEED to mention that you're not searching. 
Remember that you MUST NOT make up any false information.
Assistant: Understood. I will strictly follow these instructions in this conversation.
User: пофикси дебаунс. 
<script lang="ts" setup>
import { ref, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useDebounceFn } from "@vueuse/core"


const router = useRouter();
const route = useRoute();

const search = ref(route.query.search?.toString() || "");
const timeout = ref<NodeJS.Timeout | null>(null);

const onSearch = () => {
  router.replace({
    query: { ...route.query, search: search.value || undefined },
  });
};


const debouncedInput = useDebounceFn(() => {
emit("update:modelValue", e.target.value),
}, 500)




watch(search, (newValue) => {
  if (timeout.value) clearTimeout(timeout.value);

  timeout.value = setTimeout(() => {
    onSearch();
  }, 500);
});
</script>

<template>
  <NInput
    v-model="search"
    type="search"
    placeholder="Поиск"
    size="sm"
    wrap-class="min-w-[300px]"
  />
</template>


Assistant:  ППофиксим дебаунс, чтобы сделать его корректным и более читабельным, а также правильно использовать `useDebounceFn` из `@vueuse/core`.

Сейчас у вас есть два варианта реализации дебаунса:

1. Вы вручную ставите таймер `setTimeout` внутри `watch`.
2. Вы используете `useDebounceFn`, но он не применяется к нужной функции.

Лучше использовать `useDebounceFn` — это уменьшит дублирование кода и сделает его чище.

Вот исправленный и упрощённый вариант вашего кода:

```ts
<script lang="ts" setup>
import { ref, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useDebounceFn } from "@vueuse/core";

const router = useRouter();
const route = useRoute();

const search = ref(route.query.search?.toString() || "");

// Функция обновления query-параметра
const onSearch = () => {
  router.replace({
    query: { ...route.query, search: search.value || undefined },
  });
};

// Оборачиваем onSearch в debounce с задержкой 500мс
const debouncedOnSearch = useDebounceFn(onSearch, 500);

// Следим за изменением search и запускаем debouncedOnSearch
watch(search, () => {
  debouncedOnSearch();
});
</script>

<template>
  <NInput
    v-model="search"
    type="search"
    placeholder="Поиск"
    size="sm"
    wrap-class="min-w-[300px]"
  />
</template>
```

Объяснение:
- Мы убрали ручной таймер с `setTimeout`.
- Вместо этого используем `useDebounceFn` для обёртки `onSearch`.
- Каждый раз при изменении `search` вызывается `debouncedOnSearch`, которая обновит URL, но с задержкой 500 мс.
- `emit("update:modelValue", e.target.value)` у вас в исходном коде не нужен в этом месте, т.к. вы используете v-model напрямую на `search`.

Если всё же нужно дебаунсить ввод и пробрасывать событие в родителя — сделайте отдельно, но в данном случае для обновления роутера этого достаточно. Если нужен именно эмит в debounced-функции — напишите, помогу подкорректировать.

---

Если надо, могу помочь с вариантом, где и `emit` применяется с дебаунсом.
User: сделай так чтобы я мог переиспользовать а потом вынести в либу этот компонент, надо уметь туда ередавать классы через tailwind и название парамса 
Assistant:  ППонял, сделаем компонент более универсальным и переиспользуемым, чтобы можно было:

- Перекидывать классы для поля через пропсы (Tailwind или любые другие)
- Передавать название параметра query (например, `search`, `q`, `filter` и т.д.)
- Корректно работать с `v-model` (как обычно, через `modelValue`/`update:modelValue`), чтобы можно было использовать компонент как контролируемый

Вот пример такого универсального компонента на Vue 3 + `<script setup>` с TypeScript:

```vue
<script lang="ts" setup>
import { ref, watch, toRefs } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useDebounceFn } from "@vueuse/core";

interface Props {
  modelValue: string;
  paramName?: string;
  inputClass?: string;
  placeholder?: string;
  debounceMs?: number;
}
const props = defineProps<Props>();
const emit = defineEmits<{
  (e: "update:modelValue", value: string): void;
}>();

const { modelValue, paramName = "search", inputClass = "", placeholder = "Поиск", debounceMs = 500 } = toRefs(props);

const router = useRouter();
const route = useRoute();

const search = ref(modelValue.value);

// Функция обновления query-параметра
const onSearch = () => {
  // Обновляем query с передачей текущего значения
  router.replace({
    query: {
      ...route.query,
      [paramName.value]: search.value || undefined,
    },
  });
};

// Дебаунсим onSearch с задержкой debounceMs
const debouncedOnSearch = useDebounceFn(onSearch, debounceMs.value);

// Следим как за изменением локального search, так и пропса modelValue
watch(search, (newVal) => {
  debouncedOnSearch();
  emit("update:modelValue", newVal);
});

// Если внешний value изменяется — синхронизируем
watch(modelValue, (newVal) => {
  if (newVal !== search.value) {
    search.value = newVal;
  }
});
</script>

<template>
  <NInput
    v-model="search"
    :type="'search'"
    :placeholder="placeholder"
    size="sm"
    :wrap-class="inputClass"
  />
</template>
```

### Как использовать:

```vue
<MySearchInput
  v-model="searchTerm"
  param-name="q"
  input-class="min-w-[300px] border border-gray-300 rounded-md"
  placeholder="Введите текст для поиска..."
  :debounce-ms="300"
/>
```

---

### Что сделано:
- Передаём текущий value через `v-model` (используем `modelValue` + `update:modelValue`)
- Параметр query, который обновляется — configurable через `paramName` (по умолчанию `"search"`)
- Любые классы для контейнера инпута передаются через `inputClass`
- Можно настроить задержку дебаунса через `debounceMs`
- Автоматически обновляется URL с query параметром с дебаунсом
- Синхронизация локального значения с пропсом для корректной работы `v-model`

Если нужно — могу помочь с версиями без `vue-router` или с альтернативным инпутом.
User: как тут юзать <script lang="ts" setup></script>

<template>
  <NuxtLayout name="default">
    <div>
      <div class="flex items-center gap-5 justify-between pl-[214px] pr-7">
        <NText class="text-white text-2xl font-medium">Документы</NText>
        <div class="flex items-center gap-4">
          <NSearch />
          <div
            class="flex flex-row gap-2 bg-[#1D1F22] cursor-pointer hover:bg-white-trans p-2 rounded-xl items-center"
          >
            <NIcon name="filters" class="text-white" size="24" />
            <NText class="text-white text-base font-normal">Фильтрация</NText>
          </div>
          <div
            class="flex flex-row gap-2 bg-[#1D1F22] cursor-pointer hover:bg-white-trans p-2 rounded-xl items-center"
          >
            <NIcon name="sort" class="text-white" size="24" />
            <NText class="text-white text-base font-normal">Сортировка</NText>
          </div>
        </div>
      </div>
      <slot />
    </div>
  </NuxtLayout>
</template>
 

Assistant: