@meistrari/chat-nuxt 1.12.0 → 1.14.0

package/README.md

@@ -1,6 +1,18 @@
 # @meistrari/chat-nuxt
 
-Nuxt module that adds a complete AI chat interface to your app. Powered by Tela's agent API — conversations, message streaming, file uploads, workspace settings, all out of the box.
+Nuxt module that adds a complete AI chat interface to your app. Server-side chat behavior is delegated to the dedicated Chat API; the Nuxt module owns the UI, auth bridge, and local proxy routes.
+
+## Public Surface
+
+`@meistrari/chat-nuxt` is an external package. Its supported consumer surface is intentionally small:
+
+- Nuxt module registration through `@meistrari/chat-nuxt`.
+- Module options under `chatNuxt`.
+- Auto-registered `<MeistrariChatEmbed>`.
+- Public component import from `@meistrari/chat-nuxt/components/MeistrariChatEmbed`.
+- Public types from the package root and `@meistrari/chat-nuxt/types/*`.
+
+Runtime internals under `src/runtime/**`, generated Nuxt aliases, and workspace-only schema package imports are implementation details unless they are explicitly exported above.
 
 ## Installation
 
@@ -41,16 +53,7 @@ export default defineNuxtConfig({
     ssr: false,
 
     chatNuxt: {
-        telaApiUrl: process.env.TELA_API_URL,
-        agentApiUrl: process.env.AGENT_API_URL,
-        authApiUrl: process.env.AUTH_API_URL,
-        vaultUrl: process.env.VAULT_URL,
-        databaseUrl: '', // leave empty to use the bundled pglite database
-        features: {
-            usage: true,
-            generateTitle: false,
-            credentials: false,
-        },
+        chatApiUrl: process.env.CHAT_API_URL,
         validateConfig: 'warn',
     },
 
@@ -68,40 +71,16 @@ export default defineNuxtConfig({
 
 ### 2. Module options
 
-Every `chatNuxt.*` URL accepts the value inline, or you can leave the option empty and set the matching env var. Resolution order: **module option → existing `runtimeConfig` → env var → empty (or pglite default for `databaseUrl`)**.
+`chatApiUrl` accepts the value inline, or you can leave the option empty and set `CHAT_API_URL`. Resolution order: **module option → existing `runtimeConfig` → env var → empty**.
 
 | Option | Required | Env fallback | Description |
 |--------|----------|--------------|-------------|
-| `telaApiUrl` | ✅ Always | `TELA_API_URL` | Tela platform API base URL. |
-| `agentApiUrl` | ✅ Always | `AGENT_API_URL` | Agent runtime base URL the chat streams from. |
-| `authApiUrl` | ✅ Always | `AUTH_API_URL` | Auth API base URL used to verify session tokens. |
-| `vaultUrl` | ✅ Always | `VAULT_URL` | Vault API base URL used for file uploads and resolution. |
-| `databaseUrl` | 🔧 Optional | `DATABASE_URL` | Postgres connection string. Falls back to a file-backed pglite database for local dev. |
-| `features` | 🔧 Optional | — | Feature toggles (see below). `usage` defaults to `true`; the rest default to `false`. |
-| `validateConfig` | 🔧 Optional | — | `false` (default), `'warn'`, or `'error'`. Warns or fails fast when required runtime config is missing for the enabled features. |
-
-### 3. Set environment-only secrets
+| `chatApiUrl` | ✅ Always | `CHAT_API_URL` | Dedicated Chat API base URL used by Nuxt server proxy routes. |
+| `validateConfig` | 🔧 Optional | — | `false` (default), `'warn'`, or `'error'`. Warns or fails fast when `chatApiUrl` is missing. |
 
-These never appear in module options — set them via `.env`, Infisical, etc. Whether each one is required depends on which features are enabled.
+Set `chatNuxt.validateConfig` to `'warn'` to log a warning when `chatApiUrl` is missing, or `'error'` to fail fast at module setup. The check is off by default since some deployments inject runtime config after build.
 
-| Variable | Required when | Description |
-|----------|---------------|-------------|
-| `AUTH_API_SECRET` | `features.usage: true` | Bearer token chat-nuxt uses to call the Auth API to resolve workspace billing info for the usage feature. |
-| `TELA_API_KEY` | `features.generateTitle: true` | Authenticates the auto-title-generation endpoint, which executes a Meistrari-owned Tela canvas server-side. |
-| `CHAT_APP_SERVICE_KEY` | `features.credentials: true` | Server-to-server `X-Service-Key` used when chat-nuxt resolves workspace credentials (`POST /workspaces/:id/credentials/resolve`). |
-| `VAULT_S3_BUCKET` | 🔧 Optional | SSRF hardening: when set, `/api/vault/permalink-metadata` only follows S3 redirects to `<bucket>.s3*.amazonaws.com`. Recommended in production. |
-
-### 4. Features
-
-`usage` defaults to `true` — the chat experience always tracks per-conversation usage out of the box. `generateTitle` and `credentials` default to `false` and layer on optional behavior with their own runtime requirements.
-
-| Feature | What it does | Adds to required config |
-|---------|--------------|-------------------------|
-| `usage` | Per-conversation token & cost tracking, daily aggregated reports, and the usage tab UI surface. | `AUTH_API_SECRET` |
-| `generateTitle` | Auto-generates conversation titles from the first user message via a Tela canvas. Without this, titles fall back to a truncated prefix of the message. | `TELA_API_KEY` |
-| `credentials` | Resolves workspace-level credentials and injects them into agent calls so tools can authenticate as the workspace. | `CHAT_APP_SERVICE_KEY` |
-
-Set `chatNuxt.validateConfig` to `'warn'` to log a warning when keys for an enabled feature are missing, or `'error'` to fail fast at module setup. The check is off by default since some deployments inject runtime config after build.
+UI features are configured per component instance, not at the module level: the embed takes a `:features` prop (`ChatFeatureConfig`) and `<ChatConfigurationModal>` takes `show-credentials-tab`.
 
 ### Auth modes
 
@@ -112,20 +91,7 @@ Set `chatNuxt.validateConfig` to `'warn'` to log a warning when keys for an enab
 
 The module chooses the bridge during Nuxt setup. Host apps should keep registering `@meistrari/auth-nuxt` before `@meistrari/chat-nuxt`.
 
-### Local mode (no database)
-
-When `databaseUrl` is empty, chat-nuxt runs an embedded [pglite](https://pglite.dev) instance — Postgres compiled to WASM, in-process, file-backed at `<rootDir>/.data/chat-nuxt.db`. Migrations are applied automatically on first boot. Tables live under a dedicated `chat` Postgres schema so the database can be safely shared with the host app's own Drizzle setup.
-
-This mode is intended for local development, demos, and single-instance prototypes. Caveats:
-
-- **Single-process only.** Multi-instance deployments (e.g. Railway with `replicas > 1`) will see divergent local databases — use real Postgres.
-- **Node runtime only.** Pglite needs a filesystem. It won't run on Cloudflare Workers / Vercel Edge.
-- **Roughly 4 MB of WASM** is loaded at server startup. Postgres consumers don't pay this cost (the import is dynamic).
-
-To explicitly opt into pglite at a custom path: `databaseUrl: 'pglite:/var/data/chat.db'` or `databaseUrl: 'file:./mydata/chat.db'`.
-
-
-### 5. Setup `app.vue`
+### 4. Setup `app.vue`
 
 ```vue
 <!-- app.vue -->
@@ -137,7 +103,7 @@ To explicitly opt into pglite at a custom path: `databaseUrl: 'pglite:/var/data/
 
 `AppStatusToast`, Markstream styles, code block styles, and math delimiter defaults are auto-registered by the module.
 
-### 6. Use it
+### 5. Use it
 
 ```vue
 <!-- pages/index.vue -->
@@ -179,7 +145,7 @@ Host apps can also provide Tela agent inputs directly. When `telaAgentInputs` is
 />
 ```
 
-In Tela agent mode, `workspaceSettings`, `features`, and `user` are not accepted by the public prop contract. The Tela agent owns runtime configuration and identity for execution. Model selection and the usage/debug UI surfaces are also hidden.
+In Tela agent mode, `workspaceSettings` and `user` are not accepted by the public prop contract — the Tela agent owns runtime configuration and identity for execution. `features` is still accepted, but model selection and the usage/debug UI surfaces stay hidden because the Tela agent owns execution.
 
 ## Embedding in Your Layout
 
@@ -214,6 +180,12 @@ Key props for embedding:
 
 ## `<MeistrariChatEmbed>` Props
 
+All prop, feature-flag, and event payload types are importable from the package root (or the `types/embed` subpath):
+
+```ts
+import type { ChatActionPayload, ChatFeatureConfig, MeistrariChatEmbedProps } from '@meistrari/chat-nuxt'
+```
+
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `hideSidebar` | `boolean` | `false` | Hide conversation list sidebar |
@@ -332,13 +304,9 @@ const features = computed(() => ({
 
 ## Optional: Custom Workspace Settings
 
-By default, workspace settings (system prompt, context files, tools) are managed via the module's built-in UI and stored in PostgreSQL.
-
-You can override this in two ways:
-
-### Via props (simple)
+By default, workspace settings (system prompt, context files, tools) are managed via the module's built-in UI and persisted by the Chat API service.
 
-Pass settings directly from your host app:
+To override them, pass settings directly from your host app:
 
 ```vue
 <MeistrariChatEmbed
@@ -355,66 +323,11 @@ Pass settings directly from your host app:
 />
 ```
 
-### Via server resolver (advanced)
-
-Create a file at `server/chat/resolve-workspace-settings.ts` in your app. The module auto-discovers it and calls it for every chat request:
-
-```typescript
-// server/chat/resolve-workspace-settings.ts
-import type { H3Event } from 'h3'
-
-export default async function resolveWorkspaceSettings(
-    event: H3Event,
-    context: { workspaceId: string; user: { id: string; email: string } },
-) {
-    const settings = await fetchFromYourAPI(context.workspaceId)
-    return {
-        systemMessage: settings.prompt,
-        contextFiles: settings.files,
-        canvasTools: null,
-        knowledgeSources: null,
-        externalSkills: null,
-        updatedAt: new Date(),
-    }
-}
-```
-
-## Optional: Agent API Environment Resolver
-
-When default chat mode starts a new Agent API session, `chat-nuxt` can attach `environmentVariables` to the Agent API create payload. Built-in workspace credentials still come from the `credentials` feature. Host apps can add server-only variables by creating `server/chat/resolve-agent-environment.ts`:
-
-```typescript
-import type { H3Event } from 'h3'
-
-export default async function resolveAgentEnvironment(
-    event: H3Event,
-    context: {
-        user: { id: string; email: string }
-        workspaceId: string
-        telaAgentId: string | null
-        conversationId: string
-        skills: readonly string[]
-    },
-) {
-    if (!context.skills.includes('github:meistrari/backoffice/skills/backoffice-admin')) {
-        return null
-    }
-
-    return {
-        BACKOFFICE_ADMIN_TOOL_URL: 'https://backoffice.example.com/api/admin-chat/tool',
-        BACKOFFICE_ADMIN_INVOCATION_GRANT: await mintInvocationGrant({
-            userId: context.user.id,
-            workspaceId: context.workspaceId,
-            conversationId: context.conversationId,
-            skills: context.skills,
-        }),
-    }
-}
-```
+The `server/chat/resolve-workspace-settings.ts` host resolver from earlier versions is no longer invoked: the module proxies chat requests to the Chat API, which owns workspace settings resolution.
 
-The resolver runs on the server only. It is called for new default Agent API sessions, before `POST /v2/chat`. Continued sessions do not receive new environment variables.
+## Agent API Environment Variables
 
-If the resolver returns the same environment variable name as a workspace credential, the resolver value wins.
+`chat-nuxt` proxies chat requests to `@meistrari/chat-api`; it no longer starts Agent API sessions directly. Agent API `environmentVariables` are resolved inside `chat-api` when it creates a new default Agent API session. Host apps should configure server-only Agent API environment behavior in `chat-api`, not through `server/chat/resolve-agent-environment.*` files in the Nuxt app.
 
 `chat-nuxt` only transports these variables to Agent API. A skill that calls a host backend must implement its own callback contract with the host backend. In short, callback authorization belongs to the skill and host backend, not `chat-nuxt`. The host backend remains responsible for validating invocation grants, allowed tools, schemas, replay protection, confirmation for writes, and audit logging.
 
@@ -453,6 +366,7 @@ function openSettings(tab: ChatConfigurationTab = 'personalization') {
 | `settings` | `WorkspaceSettings \| null` | `undefined` | Optional host-controlled settings. Omit this prop to let the modal fetch and persist via `useWorkspaceSettings()`; pass `null` or a settings object to make the host own state and persistence |
 | `initialTab` | `ChatConfigurationTab` | `'personalization'` | Tab to open on |
 | `saving` | `boolean` | `false` | Host-controlled spinner/disable while persistence is in flight |
+| `showCredentialsTab` | `boolean` | `false` | Show the workspace credentials tab |
 
 | Event | Payload | Description |
 |-------|---------|-------------|
@@ -467,8 +381,7 @@ The module auto-registers everything — no manual imports needed:
 
 - **Components**: full chat UI, message bubbles, tool widgets (code, search, files), markdown rendering, file previews
 - **Composables**: `useChat`, `useConversations`, `useWorkspaceSettings`, `useFileUpload`, `useFeatureFlags`, and more
-- **Server routes**: conversation CRUD, message streaming, workspace settings, vault file storage, GitHub integration
-- **Database**: conversations, messages, usage tracking (Drizzle ORM + PostgreSQL)
+- **Server routes**: thin proxy routes that forward chat requests to the Chat API service
 
 ## Package Dependencies
 

package/dist/module.d.mts

@@ -1,31 +1,17 @@
+export { ChatActionPayload, ChatActor, ChatEmbedSharedProps, ChatFeatureConfig, DefaultChatEmbedProps, MeistrariChatEmbedProps, TelaAgentChatEmbedProps, TelaAgentExecutionInput } from '../dist/runtime/types/embed.js';
+
 type ChatNuxtConfigValidationMode = false | 'warn' | 'error';
-interface ChatNuxtFeatures {
-    /** Track and report per-conversation token/cost usage. */
-    usage?: boolean;
-    /** Auto-generate conversation titles from the first user message. Requires `telaApiKey`. */
-    generateTitle?: boolean;
-    /** Resolve workspace-level credentials and inject them into agent calls. Requires `chatAppServiceKey`. */
-    credentials?: boolean;
-}
+
 interface ChatNuxtModuleOptions {
-    /** Tela platform API base URL (e.g. https://api.tela.com). */
-    telaApiUrl?: string;
-    /** Agent API base URL — the LLM/agent runtime the chat talks to. */
-    agentApiUrl?: string;
-    /** Vault API base URL used to upload and resolve user-attached files. */
-    vaultUrl?: string;
-    /** Postgres connection string. Falls back to a file-backed pglite database for local dev. */
-    databaseUrl?: string;
-    /** Optional feature toggles. `usage` defaults to `true`; `generateTitle` and `credentials` default to `false`. */
-    features?: ChatNuxtFeatures;
+    /** Dedicated Chat API base URL used by Nuxt server routes. */
+    chatApiUrl?: string;
     /**
      * Whether to fail fast (`'error'`), warn (`'warn'`), or skip (`false`) when
-     * required runtime config keys are unset. Required keys depend on which
-     * features are enabled.
+     * required runtime config keys are unset.
      */
     validateConfig?: ChatNuxtConfigValidationMode;
 }
 declare const _default: any;
 
 export { _default as default };
-export type { ChatNuxtFeatures, ChatNuxtModuleOptions };
+export type { ChatNuxtModuleOptions };

package/dist/module.json

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

package/dist/module.mjs

@@ -174,12 +174,10 @@ function resolveWorkspaceSettingsResolverEntry(srcDir, fallbackResolverBase) {
 }
 
 const _chatNuxtRequire = createRequire(import.meta.url);
-const DEFAULT_FEATURES = {
-  usage: true,
-  generateTitle: false,
-  credentials: false
-};
 const VUE_COMPONENT_EXTENSIONS = [".vue"];
+const FEATURE_DIRS = ["conversations", "embed", "files", "messages", "rendering", "shared", "usage", "workspace"];
+const FULL_NAME_COMPONENT_DIRS = ["conversations", "embed", "files", "messages", "usage"];
+const PATH_PREFIX_COMPONENT_DIRS = ["rendering", "shared"];
 const DYNAMIC_ICON_SAFELIST = [
   "i-ph-folder-minus",
   "i-ph-folder-open"
@@ -255,18 +253,10 @@ export function useChatAuth() {
 `.trimStart();
 }
 const ALWAYS_REQUIRED_KEYS = [
-  "telaApiUrl",
-  "agentApiUrl",
-  "vaultUrl"
+  "chatApiUrl"
 ];
-function buildRequiredKeys(features) {
+function buildRequiredKeys() {
   const required = [...ALWAYS_REQUIRED_KEYS];
-  if (features.generateTitle) {
-    required.push("telaApiKey");
-  }
-  if (features.credentials) {
-    required.push("chatAppServiceKey");
-  }
   return required;
 }
 function resolvePackageRoot(packageName) {
@@ -288,7 +278,8 @@ function ensureIconifyPackages(consumerRoot) {
   }
 }
 function ensureDynamicIconSafelist(nuxtOptions) {
-  const unocssOptions = nuxtOptions.unocss ||= {};
+  const options = nuxtOptions;
+  const unocssOptions = options.unocss ||= {};
   const currentSafelist = Array.isArray(unocssOptions.safelist) ? unocssOptions.safelist : unocssOptions.safelist ? [unocssOptions.safelist] : [];
   for (const icon of DYNAMIC_ICON_SAFELIST) {
     if (!currentSafelist.includes(icon)) {
@@ -297,11 +288,11 @@ function ensureDynamicIconSafelist(nuxtOptions) {
   }
   unocssOptions.safelist = currentSafelist;
 }
-function validateRuntimeConfig(runtimeConfig, mode, features) {
+function validateRuntimeConfig(runtimeConfig, mode) {
   if (!mode) {
     return;
   }
-  const required = buildRequiredKeys(features);
+  const required = buildRequiredKeys();
   const missingKeys = required.filter((key) => !runtimeConfig[key]);
   if (missingKeys.length === 0) {
     return;
@@ -375,6 +366,8 @@ const module$1 = defineNuxtModule({
       tsConfig.compilerOptions ||= {};
       tsConfig.compilerOptions.paths ||= {};
       tsConfig.compilerOptions.paths["#chat-auth"] = [chatAuthTypeTemplate.dst];
+      tsConfig.compilerOptions.paths["#chat-runtime"] = [runtimeDir];
+      tsConfig.compilerOptions.paths["#chat-runtime/*"] = [join(runtimeDir, "*")];
     });
     if (!Array.isArray(nuxt.options.extends)) {
       nuxt.options.extends = nuxt.options.extends ? [nuxt.options.extends] : [];
@@ -397,25 +390,14 @@ const module$1 = defineNuxtModule({
       const runtimeDirRegExp = new RegExp(runtimeDir.replace(/\\/g, "/").replace(/[.*+?^${}()|[\]\\]/g, "\\$&"));
       normalizedImports.transform.include.push(runtimeDirRegExp);
     }
-    const features = { ...DEFAULT_FEATURES, ...options.features ?? {} };
-    const migrationsDir = resolver.resolve("../drizzle");
     const rc = nuxt.options.runtimeConfig;
-    rc.databaseUrl = options.databaseUrl || rc.databaseUrl || process.env.DATABASE_URL || `pglite:${join(nuxt.options.rootDir, ".data/chat-nuxt.db")}`;
-    rc.telaApiUrl = options.telaApiUrl || rc.telaApiUrl || process.env.TELA_API_URL || "";
-    rc.telaApiKey = rc.telaApiKey || process.env.TELA_API_KEY || "";
-    rc.agentApiUrl = options.agentApiUrl || rc.agentApiUrl || process.env.AGENT_API_URL || "";
-    rc.vaultUrl = options.vaultUrl || rc.vaultUrl || process.env.VAULT_URL || "";
-    rc.vaultS3Bucket = rc.vaultS3Bucket || process.env.VAULT_S3_BUCKET || "";
-    rc.chatAppServiceKey = rc.chatAppServiceKey || process.env.CHAT_APP_SERVICE_KEY || "";
+    rc.chatApiUrl = options.chatApiUrl || rc.chatApiUrl || process.env.CHAT_API_URL || "";
     rc.public = rc.public || {};
-    rc.public.agentApiUrl = rc.agentApiUrl || rc.public.agentApiUrl || process.env.AGENT_API_URL || "";
-    rc.public.chatNuxtFeatures = features;
     const existingChatNuxtRuntimeConfig = rc.chatNuxt;
     rc.chatNuxt = {
-      migrationsDir: existingChatNuxtRuntimeConfig?.migrationsDir || migrationsDir,
-      features
+      chatApiUrl: existingChatNuxtRuntimeConfig?.chatApiUrl || rc.chatApiUrl
     };
-    validateRuntimeConfig(rc, options.validateConfig ?? false, features);
+    validateRuntimeConfig(rc, options.validateConfig ?? false);
     nuxt.options.css = nuxt.options.css || [];
     for (const css of [
       "markstream-vue/index.css",
@@ -427,22 +409,25 @@ const module$1 = defineNuxtModule({
       }
     }
     addPlugin(join(runtimeDir, "plugins/markstream"));
-    addImportsDir(join(runtimeDir, "composables"));
-    addImportsDir(join(runtimeDir, "utils"));
+    addImportsDir(FEATURE_DIRS.map((feature) => join(runtimeDir, feature, "composables")));
     addComponent({
       name: "MeistrariChatEmbed",
-      filePath: join(runtimeDir, "components/MeistrariChatEmbed.vue"),
+      filePath: join(runtimeDir, "embed/components/meistrari-chat-embed.vue"),
       priority: 1e3
     });
-    addComponentsDir({
-      path: join(runtimeDir, "components"),
-      extensions: VUE_COMPONENT_EXTENSIONS
-    });
-    addComponentsDir({
-      path: join(runtimeDir, "embed/components"),
-      extensions: VUE_COMPONENT_EXTENSIONS,
-      pathPrefix: false
-    });
+    for (const feature of FULL_NAME_COMPONENT_DIRS) {
+      addComponentsDir({
+        path: join(runtimeDir, feature, "components"),
+        extensions: VUE_COMPONENT_EXTENSIONS,
+        pathPrefix: false
+      });
+    }
+    for (const feature of PATH_PREFIX_COMPONENT_DIRS) {
+      addComponentsDir({
+        path: join(runtimeDir, feature, "components"),
+        extensions: VUE_COMPONENT_EXTENSIONS
+      });
+    }
     nuxt.hook("vite:extendConfig", (config, { isServer }) => {
       if (isServer) {
         return;
@@ -484,7 +469,6 @@ export default globalThis.ELK;
     const serverDir = join(runtimeDir, "server");
     const publicAssetsDir = join(runtimeDir, "public/assets");
     const publicFilesDir = join(runtimeDir, "public/files");
-    const dbInitPluginPath = join(runtimeDir, "server/plugins/init-db");
     nuxt.hook("nitro:config", (nitroConfig) => {
       nitroConfig.scanDirs = nitroConfig.scanDirs || [];
       nitroConfig.scanDirs.push(serverDir);
@@ -495,10 +479,6 @@ export default globalThis.ELK;
         "#chat-runtime": runtimeDir,
         "#chat-workspace-settings-resolver": workspaceSettingsResolverEntry
       };
-      nitroConfig.plugins = nitroConfig.plugins || [];
-      if (!nitroConfig.plugins.includes(dbInitPluginPath)) {
-        nitroConfig.plugins.push(dbInitPluginPath);
-      }
       nitroConfig.publicAssets = nitroConfig.publicAssets || [];
       nitroConfig.publicAssets.push({
         dir: publicAssetsDir,

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

@@ -0,0 +1,96 @@
+<script setup>
+import { nextTick } from "vue";
+import { useConversations } from "../composables/conversations";
+import { conversationCreatorFilterOptions } from "../../types/schemas/chat/ui.js";
+import {
+  hasConversationCreatorFilterResults,
+  resolveConversationCreatorFilterKeyboardTarget
+} from "../creator-filter";
+const { conversationCreatorFilter, conversationCreatorFilterCounts, fetchConversations } = useConversations();
+const isUpdating = ref(false);
+const filterButtonElements = ref([]);
+const filterOptions = computed(() => conversationCreatorFilterOptions.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 && typeof element === "object" && "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/conversations/components/chat-conversation-item.d.vue.ts

@@ -0,0 +1,26 @@
+import type { DeepReadonly } from 'vue';
+import type { Conversation } from '../../types/schemas/chat/conversations.js';
+type __VLS_Props = {
+    conversation: DeepReadonly<Conversation>;
+    active: boolean;
+    draggable?: 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;
+    rename: (id: string, title: string) => any;
+    duplicate: (id: string) => any;
+    export: (id: string) => any;
+    dragStart: (id: string) => any;
+    dragEnd: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onDelete?: ((id: string) => any) | undefined;
+    onRename?: ((id: string, title: string) => any) | undefined;
+    onDuplicate?: ((id: string) => any) | undefined;
+    onExport?: ((id: string) => any) | undefined;
+    onDragStart?: ((id: string) => any) | undefined;
+    onDragEnd?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;