@meistrari/chat-nuxt 1.4.0 → 1.5.1

package/README.md

@@ -141,6 +141,30 @@ To explicitly opt into pglite at a custom path: `databaseUrl: 'pglite:/var/data/
 
 The chat workspace is resolved from the authenticated `activeOrganization` provided by `@meistrari/auth-nuxt`.
 
+### Chat runtime modes
+
+`<MeistrariChatEmbed />` has two mutually exclusive runtimes:
+
+- **Default chat mode** uses the Agent API, workspace settings, model selection, optional feature flags, and the authenticated workspace.
+- **Tela agent mode** uses a configured Tela agent directly. Pass `telaAgentId`; the embed sends user messages to `POST /agent/:id/run`, polls `GET /agent/sessions/:sessionId`, and ends sessions with `DELETE /agent/sessions/:sessionId`.
+
+```vue
+<MeistrariChatEmbed tela-agent-id="agent_123" />
+```
+
+Host apps can also provide Tela agent inputs directly. When `telaAgentInputs` is non-null, the chat sends those inputs with each agent run and does not render the agent variables panel.
+
+```vue
+<MeistrariChatEmbed
+    tela-agent-id="agent_123"
+    :tela-agent-inputs="[
+        { type: 'text', name: 'customer_id', content: customerId },
+    ]"
+/>
+```
+
+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.
+
 ## Embedding in Your Layout
 
 The main use case: drop the chat inside your existing app UI.
@@ -178,6 +202,8 @@ Key props for embedding:
 | `hideSidebar` | `boolean` | `false` | Hide conversation list sidebar |
 | `conversationId` | `string \| null` | `null` | Controlled conversation (supports v-model) |
 | `initialConversationId` | `string \| null` | `null` | Open this conversation on mount |
+| `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 |
 | `user` | `ChatActor \| null` | `null` | Override current user display info |
 | `features` | `Partial<ChatFeatureConfig>` | `{}` | Toggle optional features |
@@ -192,11 +218,28 @@ Key props for embedding:
 |-------|---------|-------------|
 | `update:conversationId` | `string \| null` | Active conversation changed |
 
-## Optional: Feature Flags (PostHog)
+## Optional: Feature Flags
 
-Some features are behind PostHog flags (debug modal, usage tab, model selector). To enable them:
+`<MeistrariChatEmbed>` accepts a `:features` prop with four optional toggles. All default to `false`. The host owns the policy — hardcode them, gate by user role, or wire them through a feature-flag provider of your choice.
 
-1. Add to your `nuxt.config.ts`:
+| Flag | Effect |
+|------|--------|
+| `showUsageTab` | Usage tab in the chat topbar (per-conversation token/cost stats) |
+| `showDebugOption` | Debug entry in the topbar overflow menu |
+| `showModelSelector` | Model picker inside the message input |
+| `showCancelButton` | "Stop generation" button while a response streams |
+
+Static example:
+
+```vue
+<MeistrariChatEmbed :features="{ showUsageTab: true, showCancelButton: true }" />
+```
+
+### With PostHog
+
+`chat-nuxt` ships a small PostHog helper for hosts that want to gate flags dynamically. The flag names live in your app — `chat-nuxt` has no opinion about them.
+
+1. Add to `nuxt.config.ts`:
 
 ```typescript
 runtimeConfig: {
@@ -212,8 +255,6 @@ runtimeConfig: {
 
 ```vue
 <script setup lang="ts">
-// ... existing imports ...
-
 const { posthogPublicKey, posthogHost, posthogDefaults } = useRuntimeConfig().public
 const { user, activeOrganization } = useTelaApplicationAuth()
 
@@ -226,17 +267,17 @@ onMounted(async () => {
 </script>
 ```
 
-3. Pass flags to `<MeistrariChatEmbed>`:
+3. Thread the flags into the embed:
 
 ```vue
 <script setup lang="ts">
-import { FEATURE_FLAGS } from '@meistrari/chat-nuxt/types/feature-flags'
-
 const { isFeatureEnabled } = useFeatureFlags()
 
 const features = computed(() => ({
-    showUsageTab: isFeatureEnabled(FEATURE_FLAGS.ENABLE_USAGE_TAB),
-    showDebugOption: isFeatureEnabled(FEATURE_FLAGS.ENABLE_DEBUG_MODE),
+    showUsageTab: isFeatureEnabled('enable-usage-tab'),
+    showDebugOption: isFeatureEnabled('enable-debug-mode'),
+    showModelSelector: isFeatureEnabled('enable-model-selector'),
+    showCancelButton: isFeatureEnabled('enable-cancel-generation'),
 }))
 </script>
 
@@ -245,12 +286,6 @@ const features = computed(() => ({
 </template>
 ```
 
-Without PostHog, you can pass features statically:
-
-```vue
-<MeistrariChatEmbed :features="{ showUsageTab: true }" />
-```
-
 ## 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.

package/dist/module.json

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

package/dist/module.mjs

@@ -1,7 +1,7 @@
 import { existsSync, readFileSync, mkdirSync, symlinkSync } from 'node:fs';
 import { createRequire } from 'node:module';
 import { join, dirname } from 'node:path';
-import { defineNuxtModule, createResolver, addImportsDir, addComponent, addComponentsDir } from 'nuxt/kit';
+import { defineNuxtModule, createResolver, addPlugin, addImportsDir, addComponent, addComponentsDir } from 'nuxt/kit';
 
 const localRequire = createRequire(import.meta.url);
 const runtimeAliasPackages = [
@@ -249,12 +249,14 @@ const module$1 = defineNuxtModule({
       "#chat-runtime": runtimeDir,
       "@iconify-json/ph": resolvePackageRoot("@iconify-json/ph")
     };
-    if (nuxt.options.imports !== false) {
-      nuxt.options.imports = nuxt.options.imports || {};
-      nuxt.options.imports.transform = nuxt.options.imports.transform || {};
-      nuxt.options.imports.transform.include = nuxt.options.imports.transform.include || [];
+    const importsOptions = nuxt.options.imports;
+    if (importsOptions !== false) {
+      const normalizedImports = importsOptions || {};
+      nuxt.options.imports = normalizedImports;
+      normalizedImports.transform = normalizedImports.transform || {};
+      normalizedImports.transform.include = normalizedImports.transform.include || [];
       const runtimeDirRegExp = new RegExp(runtimeDir.replace(/\\/g, "/").replace(/[.*+?^${}()|[\]\\]/g, "\\$&"));
-      nuxt.options.imports.transform.include.push(runtimeDirRegExp);
+      normalizedImports.transform.include.push(runtimeDirRegExp);
     }
     const features = { ...DEFAULT_FEATURES, ...options.features ?? {} };
     const migrationsDir = resolver.resolve("../drizzle");
@@ -269,10 +271,23 @@ const module$1 = defineNuxtModule({
     rc.public = rc.public || {};
     rc.public.agentApiUrl = rc.agentApiUrl || rc.public.agentApiUrl || process.env.AGENT_API_URL || "";
     rc.public.chatNuxtFeatures = features;
-    rc.chatNuxt = rc.chatNuxt || {};
-    rc.chatNuxt.migrationsDir = rc.chatNuxt.migrationsDir || migrationsDir;
-    rc.chatNuxt.features = features;
+    const existingChatNuxtRuntimeConfig = rc.chatNuxt;
+    rc.chatNuxt = {
+      migrationsDir: existingChatNuxtRuntimeConfig?.migrationsDir || migrationsDir,
+      features
+    };
     validateRuntimeConfig(rc, options.validateConfig ?? false, features);
+    nuxt.options.css = nuxt.options.css || [];
+    for (const css of [
+      "markstream-vue/index.css",
+      join(runtimeDir, "assets/css/markstream.css"),
+      join(runtimeDir, "assets/css/code-theme.css")
+    ]) {
+      if (!nuxt.options.css.includes(css)) {
+        nuxt.options.css.push(css);
+      }
+    }
+    addPlugin(join(runtimeDir, "plugins/markstream"));
     addImportsDir(join(runtimeDir, "composables"));
     addImportsDir(join(runtimeDir, "utils"));
     addComponent({

package/dist/runtime/components/MeistrariChatEmbed.d.vue.ts

@@ -1,24 +1,8 @@
-import type { Component, DeepReadonly } from 'vue';
-import type { WorkspaceSettings } from '../composables/useWorkspaceSettings.js';
 import type { ChatActionPayload } from '../composables/useChatAction.js';
-import type { ChatLoadingMessageMode } from '../utils/chat-loading-messages.js';
-import type { ChatActor, ChatFeatureConfig } from '../utils/tela-chat.js';
-type __VLS_Props = {
-    workspaceSettings?: DeepReadonly<WorkspaceSettings> | WorkspaceSettings | null;
-    user?: ChatActor | null;
-    conversationId?: string | null;
-    initialConversationId?: string | null;
-    hideSidebar?: boolean;
-    features?: Partial<ChatFeatureConfig>;
-    loadingMessages?: readonly string[] | null;
-    loadingMessagesMode?: ChatLoadingMessageMode | null;
-    customComponents?: Record<string, Component>;
-    customHtmlTags?: readonly string[];
-};
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+declare const __VLS_export: import("vue").DefineComponent<import("../types/embed.js").DefaultChatEmbedProps | import("../types/embed.js").TelaAgentChatEmbedProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:conversationId": (value: string | null) => any;
     action: (payload: ChatActionPayload) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<import("../types/embed.js").DefaultChatEmbedProps | import("../types/embed.js").TelaAgentChatEmbedProps> & Readonly<{
     "onUpdate:conversationId"?: ((value: string | null) => any) | undefined;
     onAction?: ((payload: ChatActionPayload) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/MeistrariChatEmbed.vue

@@ -1,21 +1,39 @@
 <script setup>
 defineProps({
-  workspaceSettings: { type: null, required: false },
-  user: { type: [Object, null], required: false },
   conversationId: { type: [String, null], required: false },
   initialConversationId: { type: [String, null], required: false },
   hideSidebar: { type: Boolean, required: false },
-  features: { type: Object, required: false },
   loadingMessages: { type: [Array, null], required: false },
   loadingMessagesMode: { type: [String, null], required: false },
   customComponents: { type: Object, required: false },
-  customHtmlTags: { type: Array, required: false }
+  customHtmlTags: { type: Array, required: false },
+  telaAgentId: { type: null, required: false },
+  telaAgentInputs: { type: null, required: false },
+  workspaceSettings: { type: null, required: false },
+  user: { type: null, required: false },
+  features: { type: Object, required: false }
 });
 defineEmits(["update:conversationId", "action"]);
 </script>
 
 <template>
     <ChatEmbed
+        v-if="telaAgentId"
+        :tela-agent-id="telaAgentId"
+        :tela-agent-inputs="telaAgentInputs"
+        :conversation-id="conversationId"
+        :initial-conversation-id="initialConversationId"
+        :hide-sidebar="hideSidebar"
+        :features="features"
+        :loading-messages="loadingMessages"
+        :loading-messages-mode="loadingMessagesMode"
+        :custom-components="customComponents"
+        :custom-html-tags="customHtmlTags"
+        @update:conversation-id="$emit('update:conversationId', $event)"
+        @action="$emit('action', $event)"
+    />
+    <ChatEmbed
+        v-else
         :workspace-settings="workspaceSettings"
         :user="user"
         :conversation-id="conversationId"

package/dist/runtime/components/MeistrariChatEmbed.vue.d.ts

@@ -1,24 +1,8 @@
-import type { Component, DeepReadonly } from 'vue';
-import type { WorkspaceSettings } from '../composables/useWorkspaceSettings.js';
 import type { ChatActionPayload } from '../composables/useChatAction.js';
-import type { ChatLoadingMessageMode } from '../utils/chat-loading-messages.js';
-import type { ChatActor, ChatFeatureConfig } from '../utils/tela-chat.js';
-type __VLS_Props = {
-    workspaceSettings?: DeepReadonly<WorkspaceSettings> | WorkspaceSettings | null;
-    user?: ChatActor | null;
-    conversationId?: string | null;
-    initialConversationId?: string | null;
-    hideSidebar?: boolean;
-    features?: Partial<ChatFeatureConfig>;
-    loadingMessages?: readonly string[] | null;
-    loadingMessagesMode?: ChatLoadingMessageMode | null;
-    customComponents?: Record<string, Component>;
-    customHtmlTags?: readonly string[];
-};
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+declare const __VLS_export: import("vue").DefineComponent<import("../types/embed.js").DefaultChatEmbedProps | import("../types/embed.js").TelaAgentChatEmbedProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:conversationId": (value: string | null) => any;
     action: (payload: ChatActionPayload) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<import("../types/embed.js").DefaultChatEmbedProps | import("../types/embed.js").TelaAgentChatEmbedProps> & Readonly<{
     "onUpdate:conversationId"?: ((value: string | null) => any) | undefined;
     onAction?: ((payload: ChatActionPayload) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/chat/message-input.d.vue.ts

@@ -1,6 +1,7 @@
 import type { ConversationFile, FileUploadInput, Message, ModelOption } from '../../types/chat.js';
 import type { DeepReadonly } from 'vue';
-import type { WorkspaceSettings } from '../../composables/useWorkspaceSettings.js';
+import type { WorkspaceSettings } from '../../types/workspace-settings-data.js';
+import type { TelaAgentInputVariable } from '../../types/tela-agent.js';
 type __VLS_Props = {
     disabled?: boolean;
     loading?: boolean;
@@ -12,8 +13,13 @@ type __VLS_Props = {
     messages?: Message[];
     conversationFiles?: ConversationFile[];
     workspaceSettings?: DeepReadonly<WorkspaceSettings> | null;
+    allowModelSelection?: boolean;
+    agentInputSchema?: readonly TelaAgentInputVariable[] | null;
+    agentInputSchemaLoading?: boolean;
+    showModelSelector?: boolean;
+    showCancelButton?: boolean;
 };
-declare function addFiles(files: File[]): void;
+declare function addFiles(files: File[], inputName?: string): void;
 type __VLS_ModelProps = {
     'model'?: ModelOption;
 };
@@ -24,10 +30,30 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     "update:model": (value: "claude-sonnet-4-5" | "claude-sonnet-4-6" | "claude-haiku-4-5" | "claude-opus-4-5" | "claude-opus-4-6") => any;
 } & {
     cancel: () => any;
-    send: (content: string, files: FileUploadInput[], model: "claude-sonnet-4-5" | "claude-sonnet-4-6" | "claude-haiku-4-5" | "claude-opus-4-5" | "claude-opus-4-6") => any;
+    send: (content: string, files: FileUploadInput[], model?: "claude-sonnet-4-5" | "claude-sonnet-4-6" | "claude-haiku-4-5" | "claude-opus-4-5" | "claude-opus-4-6" | undefined, agentInputs?: ({
+        type: "file";
+        name: string;
+        vaultRef: string;
+        filename: string;
+        metadata?: string | undefined;
+    } | {
+        type: "text";
+        name: string;
+        content: string;
+    })[] | undefined) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onCancel?: (() => any) | undefined;
-    onSend?: ((content: string, files: FileUploadInput[], model: "claude-sonnet-4-5" | "claude-sonnet-4-6" | "claude-haiku-4-5" | "claude-opus-4-5" | "claude-opus-4-6") => any) | undefined;
+    onSend?: ((content: string, files: FileUploadInput[], model?: "claude-sonnet-4-5" | "claude-sonnet-4-6" | "claude-haiku-4-5" | "claude-opus-4-5" | "claude-opus-4-6" | undefined, agentInputs?: ({
+        type: "file";
+        name: string;
+        vaultRef: string;
+        filename: string;
+        metadata?: string | undefined;
+    } | {
+        type: "text";
+        name: string;
+        content: string;
+    })[] | undefined) => any) | undefined;
     "onUpdate:model"?: ((value: "claude-sonnet-4-5" | "claude-sonnet-4-6" | "claude-haiku-4-5" | "claude-opus-4-5" | "claude-opus-4-6") => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;