@meistrari/chat-nuxt 1.1.2 → 1.2.0

package/README.md

@@ -5,9 +5,27 @@ Nuxt module that adds a complete AI chat interface to your app. Powered by Tela'
 ## Installation
 
 ```bash
-pnpm add @meistrari/chat-nuxt @meistrari/auth-nuxt @meistrari/tela-build markstream-vue
+pnpm add @meistrari/chat-nuxt
 ```
 
+### Required: Vue dedupe via pnpm overrides
+
+`@meistrari/tela-build` pins `vue@3.5.13` as a direct dependency, which collides with the Vue that Nuxt installs. Without an override, pnpm installs two Vue copies and you'll hit runtime errors such as `root.ce._hasShadowRoot is not a function` when custom elements register against one Vue and mount against the other.
+
+Until tela-build is published with Vue as a peer dependency, pin a single Vue version in your consumer `package.json`:
+
+```json
+{
+  "pnpm": {
+    "overrides": {
+      "vue": "3.5.33"
+    }
+  }
+}
+```
+
+Keep this entry until `@meistrari/tela-build` moves Vue to `peerDependencies` — at that point the override becomes unnecessary and should be removed.
+
 ## Setup
 
 ### 1. Register the modules
@@ -15,8 +33,6 @@ pnpm add @meistrari/chat-nuxt @meistrari/auth-nuxt @meistrari/tela-build markstr
 ```typescript
 // nuxt.config.ts
 export default defineNuxtConfig({
-    extends: ['@meistrari/tela-build'],
-
     modules: [
         '@meistrari/auth-nuxt', // must come before chat-nuxt
         '@meistrari/chat-nuxt',
@@ -24,6 +40,10 @@ export default defineNuxtConfig({
 
     ssr: false,
 
+    chatNuxt: {
+        validateConfig: 'warn',
+    },
+
     telaAuth: {
         apiUrl: process.env.AUTH_API_URL ?? '',
         application: {
@@ -58,6 +78,9 @@ The module injects these into Nuxt's `runtimeConfig` automatically — just set
 | `AGENT_API_URL` | Agent API endpoint |
 | `VAULT_URL` | Vault service URL |
 | `VAULT_S3_BUCKET` | Vault S3 bucket name |
+| `CHAT_APP_SERVICE_KEY` | Service key used when resolving workspace credentials |
+
+Set `chatNuxt.validateConfig` to `'warn'` to report missing server config during Nuxt setup, or `'error'` to fail fast in CI or production builds. The check is disabled by default because many deployments inject runtime config after build.
 
 ### 3. Setup `app.vue`
 
@@ -91,7 +114,7 @@ const workspaceId = computed(() => activeOrganization.value?.id ?? null)
 
 <template>
     <div v-if="workspaceId" h-screen>
-        <TelaChat :workspace-id="workspaceId" />
+        <MeistrariChatEmbed :workspace-id="workspaceId" />
     </div>
 </template>
 ```
@@ -110,7 +133,7 @@ The main use case: drop the chat inside your existing app UI.
         <main>
             <!-- Chat embedded in a card -->
             <div style="height: 600px" class="rounded-2xl overflow-hidden border">
-                <TelaChat
+                <MeistrariChatEmbed
                     v-model:conversation-id="activeConversation"
                     :workspace-id="workspaceId"
                     :hide-sidebar="true"
@@ -127,7 +150,7 @@ Key props for embedding:
 - **`v-model:conversation-id`** — sync the active conversation with your app's state
 - **`:initial-conversation-id`** — open a specific conversation on mount
 
-## `<TelaChat>` Props
+## `<MeistrariChatEmbed>` Props
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
@@ -179,7 +202,7 @@ onMounted(async () => {
 </script>
 ```
 
-3. Pass flags to `<TelaChat>`:
+3. Pass flags to `<MeistrariChatEmbed>`:
 
 ```vue
 <script setup lang="ts">
@@ -194,14 +217,14 @@ const features = computed(() => ({
 </script>
 
 <template>
-    <TelaChat :workspace-id="workspaceId" :features="features" />
+    <MeistrariChatEmbed :workspace-id="workspaceId" :features="features" />
 </template>
 ```
 
 Without PostHog, you can pass features statically:
 
 ```vue
-<TelaChat :workspace-id="workspaceId" :features="{ showUsageTab: true }" />
+<MeistrariChatEmbed :workspace-id="workspaceId" :features="{ showUsageTab: true }" />
 ```
 
 ## Optional: Custom Workspace Settings
@@ -215,7 +238,7 @@ You can override this in two ways:
 Pass settings directly from your host app:
 
 ```vue
-<TelaChat
+<MeistrariChatEmbed
     :workspace-id="workspaceId"
     :workspace-settings="{
         workspaceId: 'ws_123',
@@ -254,6 +277,49 @@ export default async function resolveWorkspaceSettings(
 }
 ```
 
+## `<ChatConfigurationModal>`
+
+A reusable settings modal (system prompt, context files, Tela workstations, Tela skills, external skills, credentials) that any host app can open from any button. By default, the modal uses `useWorkspaceSettings()` to fetch and persist settings. If the host passes the `settings` prop, the host owns workspace settings state and persistence.
+
+```vue
+<script setup lang="ts">
+import type { ChatConfigurationTab } from '@meistrari/chat-nuxt/types/workspace-settings'
+
+const open = ref(false)
+const initialTab = ref<ChatConfigurationTab>('personalization')
+
+function openSettings(tab: ChatConfigurationTab = 'personalization') {
+    initialTab.value = tab
+    open.value = true
+}
+</script>
+
+<template>
+    <button @click="openSettings()">
+        Configurações
+    </button>
+
+    <ChatConfigurationModal
+        v-model:open="open"
+        :initial-tab="initialTab"
+    />
+</template>
+```
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `open` | `boolean` | — | Modal visibility (supports `v-model:open`) |
+| `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 |
+
+| Event | Payload | Description |
+|-------|---------|-------------|
+| `update:open` | `boolean` | Modal open state changed |
+| `save` | `ChatConfigurationSavePayload` | Emitted only when the host passes `settings`; diff of the changed fields plus `onSaved`; host persists (e.g. via `useWorkspaceSettings().updateSettings()`), calls `onSaved` after persistence succeeds, and closes the modal |
+
+The `credentials` tab manages its own data via the module's `/api/workspace/credentials` endpoints and is never part of the `save` payload.
+
 ## What's Included
 
 The module auto-registers everything — no manual imports needed:
@@ -263,10 +329,28 @@ The module auto-registers everything — no manual imports needed:
 - **Server routes**: conversation CRUD, message streaming, workspace settings, vault file storage, GitHub integration
 - **Database**: conversations, messages, usage tracking (Drizzle ORM + PostgreSQL)
 
-## Peer Dependencies
+## Package Dependencies
+
+Installing `@meistrari/chat-nuxt` installs the runtime packages used by the layer. The host Nuxt app still owns the Nuxt and Vue versions.
 
 | Package | Version | Purpose |
 |---------|---------|---------|
 | `@meistrari/auth-nuxt` | `^3.4.1` | Authentication (required) |
 | `@meistrari/tela-build` | `^1.30.0` | UI component library (Nuxt layer) |
+| `@sentry/nuxt` | `^10.0.0` | Client-side error capture used by chat composables |
+| `@iconify/vue` | `^5.0.0` | Icon rendering support |
+| `@vueuse/core` | `^12.8.0` | Runtime composables used by chat UI |
+| `@vueuse/components` | `^12.8.0` | VueUse component peer expected by the shared runtime |
+| `h3` | `^1.15.0` | Server route utilities provided by Nuxt/Nitro |
 | `markstream-vue` | `0.0.3-beta.6` | Markdown streaming renderer |
+| `motion` | `^11.13.0` | Animation component runtime |
+| `nitropack` | `^2.10.0` | Runtime config and task utilities provided by Nuxt/Nitro |
+| `virtua` | `^0.42.0` | Virtualized list runtime expected by shared UI |
+| `vue-i18n` | `^11.0.0` | Internationalization runtime expected by shared UI |
+
+Peer dependencies:
+
+| Package | Version | Purpose |
+|---------|---------|---------|
+| `nuxt` | `^3.17.0` | Host framework |
+| `vue` | `^3.5.0` | Host Vue runtime |

package/dist/module.d.mts

@@ -1,3 +1,8 @@
+type ChatNuxtConfigValidationMode = false | 'warn' | 'error';
+interface ChatNuxtModuleOptions {
+    validateConfig?: ChatNuxtConfigValidationMode;
+}
 declare const _default: any;
 
 export { _default as default };
+export type { ChatNuxtModuleOptions };

package/dist/module.json

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

package/dist/module.mjs

@@ -1,7 +1,7 @@
-import { existsSync, mkdirSync, symlinkSync } from 'node:fs';
+import { existsSync, readFileSync, mkdirSync, symlinkSync } from 'node:fs';
 import { createRequire } from 'node:module';
 import { join, dirname } from 'node:path';
-import { defineNuxtModule, createResolver, addImportsDir, addComponentsDir } from 'nuxt/kit';
+import { defineNuxtModule, createResolver, addImportsDir, addComponent, addComponentsDir } from 'nuxt/kit';
 
 const localRequire = createRequire(import.meta.url);
 const runtimeAliasPackages = [
@@ -37,7 +37,7 @@ function isExpectedResolutionError(error) {
   }
   return error.code === "MODULE_NOT_FOUND" || error.code === "ERR_PACKAGE_PATH_NOT_EXPORTED";
 }
-function resolvePackageRoot(resolver, packageName) {
+function resolvePackageRoot$1(resolver, packageName) {
   try {
     return dirname(resolver.resolve(`${packageName}/package.json`));
   } catch (error) {
@@ -81,7 +81,7 @@ function resolveTelaBuildLayer() {
       return localPath;
     }
   }
-  const telaBuildRoot = resolvePackageRoot(localRequire, "@meistrari/tela-build");
+  const telaBuildRoot = resolvePackageRoot$1(localRequire, "@meistrari/tela-build");
   if (!telaBuildRoot) {
     throw new Error(
       "[@meistrari/chat-nuxt] Cannot resolve @meistrari/tela-build. Ensure it is installed."
@@ -95,19 +95,19 @@ function resolveRuntimeAliases(telaBuildPath) {
   const telaBuildRequire = createRequire(join(telaBuildPath, "package.json"));
   const vueRuntimeEntry = resolvePackageEntry(nuxtRequire, "vue/dist/vue.runtime.esm-bundler.js");
   const aliases = [
-    ["vue", vueRuntimeEntry ?? resolvePackageRoot(nuxtRequire, "vue")],
+    ["vue", vueRuntimeEntry ?? resolvePackageRoot$1(nuxtRequire, "vue")],
     ["vue/dist/vue.runtime.esm-bundler.js", vueRuntimeEntry],
-    ["@vue/runtime-core", resolvePackageEntry(nuxtRequire, "@vue/runtime-core/dist/runtime-core.esm-bundler.js") ?? resolvePackageRoot(nuxtRequire, "@vue/runtime-core")],
-    ["@vue/runtime-dom", resolvePackageEntry(nuxtRequire, "@vue/runtime-dom/dist/runtime-dom.esm-bundler.js") ?? resolvePackageRoot(nuxtRequire, "@vue/runtime-dom")],
-    ["@vue/reactivity", resolvePackageEntry(nuxtRequire, "@vue/reactivity/dist/reactivity.esm-bundler.js") ?? resolvePackageRoot(nuxtRequire, "@vue/reactivity")],
-    ["@vue/shared", resolvePackageEntry(nuxtRequire, "@vue/shared/dist/shared.esm-bundler.js") ?? resolvePackageRoot(nuxtRequire, "@vue/shared")],
-    ["vue-router", resolvePackageEntry(nuxtRequire, "vue-router/dist/vue-router.mjs") ?? resolvePackageRoot(nuxtRequire, "vue-router")],
-    ["@vueuse/core", resolvePackageRoot(localRequire, "@vueuse/core")],
-    ["@vueuse/components", resolvePackageRoot(localRequire, "@vueuse/components")],
-    ["@vueuse/shared", resolvePackageRoot(vueUseCoreRequire, "@vueuse/shared")],
-    ["reka-ui", resolvePackageRoot(telaBuildRequire, "reka-ui")],
-    ["radix-vue", resolvePackageRoot(telaBuildRequire, "radix-vue")],
-    ["@floating-ui/vue", resolvePackageRoot(telaBuildRequire, "@floating-ui/vue")]
+    ["@vue/runtime-core", resolvePackageEntry(nuxtRequire, "@vue/runtime-core/dist/runtime-core.esm-bundler.js") ?? resolvePackageRoot$1(nuxtRequire, "@vue/runtime-core")],
+    ["@vue/runtime-dom", resolvePackageEntry(nuxtRequire, "@vue/runtime-dom/dist/runtime-dom.esm-bundler.js") ?? resolvePackageRoot$1(nuxtRequire, "@vue/runtime-dom")],
+    ["@vue/reactivity", resolvePackageEntry(nuxtRequire, "@vue/reactivity/dist/reactivity.esm-bundler.js") ?? resolvePackageRoot$1(nuxtRequire, "@vue/reactivity")],
+    ["@vue/shared", resolvePackageEntry(nuxtRequire, "@vue/shared/dist/shared.esm-bundler.js") ?? resolvePackageRoot$1(nuxtRequire, "@vue/shared")],
+    ["vue-router", resolvePackageEntry(nuxtRequire, "vue-router/dist/vue-router.mjs") ?? resolvePackageRoot$1(nuxtRequire, "vue-router")],
+    ["@vueuse/core", resolvePackageRoot$1(localRequire, "@vueuse/core")],
+    ["@vueuse/components", resolvePackageRoot$1(localRequire, "@vueuse/components")],
+    ["@vueuse/shared", resolvePackageRoot$1(vueUseCoreRequire, "@vueuse/shared")],
+    ["reka-ui", resolvePackageRoot$1(telaBuildRequire, "reka-ui")],
+    ["radix-vue", resolvePackageRoot$1(telaBuildRequire, "radix-vue")],
+    ["@floating-ui/vue", resolvePackageRoot$1(telaBuildRequire, "@floating-ui/vue")]
   ];
   const resolvedAliases = aliases.reduce((acc, [name, resolvedPath]) => {
     if (resolvedPath) {
@@ -148,6 +148,20 @@ function resolveWorkspaceSettingsResolverEntry(srcDir, fallbackResolverBase) {
 }
 
 const _chatNuxtRequire = createRequire(import.meta.url);
+const requiredRuntimeConfigKeys = [
+  "databaseUrl",
+  "telaApiUrl",
+  "telaApiKey",
+  "authApiUrl",
+  "authApiSecret",
+  "agentApiUrl",
+  "authJwksUrl",
+  "vaultUrl",
+  "chatAppServiceKey"
+];
+function resolvePackageRoot(packageName) {
+  return dirname(_chatNuxtRequire.resolve(`${packageName}/package.json`));
+}
 function ensureIconifyPackages(consumerRoot) {
   const packages = ["@iconify-json/ph"];
   for (const pkg of packages) {
@@ -156,18 +170,34 @@ function ensureIconifyPackages(consumerRoot) {
       continue;
     }
     try {
-      const realPath = dirname(_chatNuxtRequire.resolve(`${pkg}/package.json`));
       mkdirSync(dirname(consumerPath), { recursive: true });
-      symlinkSync(realPath, consumerPath);
+      symlinkSync(resolvePackageRoot(pkg), consumerPath);
     } catch (err) {
-      console.warn(`[@meistrari/chat-nuxt] Failed to symlink ${pkg} \u2014 icons may not render.`, err);
+      console.warn(`[@meistrari/chat-nuxt] Failed to link ${pkg} into the consumer app. Icons may not render.`, err);
     }
   }
 }
+function validateRuntimeConfig(runtimeConfig, mode) {
+  if (!mode) {
+    return;
+  }
+  const missingKeys = requiredRuntimeConfigKeys.filter((key) => !runtimeConfig[key]);
+  if (missingKeys.length === 0) {
+    return;
+  }
+  const message = `[@meistrari/chat-nuxt] Missing runtime config: ${missingKeys.join(", ")}. Set these values in runtimeConfig or the matching environment variables before using chat server routes.`;
+  if (mode === "error") {
+    throw new Error(message);
+  }
+  console.warn(message);
+}
 function isAuthModuleEntry(entry) {
   if (typeof entry === "string") {
     return entry === "@meistrari/auth-nuxt";
   }
+  if (entry && typeof entry === "object" && "src" in entry) {
+    return entry.src === "@meistrari/auth-nuxt";
+  }
   if (Array.isArray(entry)) {
     return entry[0] === "@meistrari/auth-nuxt";
   }
@@ -176,16 +206,19 @@ function isAuthModuleEntry(entry) {
 const module$1 = defineNuxtModule({
   meta: {
     name: "@meistrari/chat-nuxt",
-    configKey: "telaChat"
+    configKey: "chatNuxt"
   },
-  setup(_, nuxt) {
-    ensureIconifyPackages(nuxt.options.rootDir);
+  defaults: {
+    validateConfig: false
+  },
+  setup(options, nuxt) {
     const hasAuthModule = (nuxt.options.modules ?? []).some(isAuthModuleEntry);
     if (!hasAuthModule) {
       throw new Error(
         '[@meistrari/chat-nuxt] Missing required module "@meistrari/auth-nuxt". Install and enable it so useTelaApplicationAuth() and event.context.auth are available.'
       );
     }
+    ensureIconifyPackages(nuxt.options.rootDir);
     const resolver = createResolver(import.meta.url);
     const runtimeDir = resolver.resolve("./runtime");
     const workspaceSettingsResolverEntry = resolveWorkspaceSettingsResolverEntry(
@@ -201,8 +234,16 @@ const module$1 = defineNuxtModule({
     nuxt.options.alias = {
       ...nuxt.options.alias,
       "#chat-workspace-settings-resolver": workspaceSettingsResolverEntry,
-      "#chat-runtime": runtimeDir
+      "#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 runtimeDirRegExp = new RegExp(runtimeDir.replace(/\\/g, "/").replace(/[.*+?^${}()|[\]\\]/g, "\\$&"));
+      nuxt.options.imports.transform.include.push(runtimeDirRegExp);
+    }
     const rc = nuxt.options.runtimeConfig;
     rc.databaseUrl = rc.databaseUrl || process.env.DATABASE_URL || "";
     rc.telaApiUrl = rc.telaApiUrl || process.env.TELA_API_URL || "";
@@ -216,8 +257,14 @@ const module$1 = defineNuxtModule({
     rc.chatAppServiceKey = rc.chatAppServiceKey || process.env.CHAT_APP_SERVICE_KEY || "";
     rc.public = rc.public || {};
     rc.public.agentApiUrl = rc.public.agentApiUrl || process.env.AGENT_API_URL || "";
+    validateRuntimeConfig(rc, options.validateConfig ?? false);
     addImportsDir(resolver.resolve("./runtime/composables"));
     addImportsDir(resolver.resolve("./runtime/utils"));
+    addComponent({
+      name: "MeistrariChatEmbed",
+      filePath: resolver.resolve("./runtime/components/MeistrariChatEmbed.vue"),
+      priority: 1e3
+    });
     addComponentsDir({
       path: resolver.resolve("./runtime/components")
     });
@@ -243,8 +290,28 @@ const module$1 = defineNuxtModule({
         ...config.resolve.dedupe || [],
         ...runtimeAliasDedupe
       ]));
+      config.plugins.push({
+        name: "@meistrari/chat-nuxt:elkjs-umd-interop",
+        enforce: "pre",
+        apply: "serve",
+        load(id) {
+          const cleanId = id.split("?")[0] ?? id;
+          if (!cleanId.endsWith("/elkjs/lib/elk.bundled.js")) {
+            return null;
+          }
+          try {
+            const source = readFileSync(cleanId, "utf8");
+            return `${source}
+export default globalThis.ELK;
+`;
+          } catch {
+            return null;
+          }
+        }
+      });
     });
     const serverDir = resolver.resolve("./runtime/server");
+    const publicFilesDir = resolver.resolve("./runtime/public/files");
     nuxt.hook("nitro:config", (nitroConfig) => {
       nitroConfig.scanDirs = nitroConfig.scanDirs || [];
       nitroConfig.scanDirs.push(serverDir);
@@ -253,6 +320,12 @@ const module$1 = defineNuxtModule({
         "#chat-runtime": runtimeDir,
         "#chat-workspace-settings-resolver": workspaceSettingsResolverEntry
       };
+      nitroConfig.publicAssets = nitroConfig.publicAssets || [];
+      nitroConfig.publicAssets.push({
+        dir: publicFilesDir,
+        baseURL: "/chat-files",
+        maxAge: 60 * 60 * 24 * 7
+      });
     });
   }
 });

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

@@ -4,6 +4,7 @@ type __VLS_Props = {
     conversations: DeepReadonly<Conversation[]>;
     currentId?: string;
     getMemberImage?: (userId: string) => string | undefined;
+    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>;
 declare const _default: typeof __VLS_export;

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

@@ -1,13 +1,16 @@
 <script setup>
 import { groupConversationsByDate } from "../../utils/format-time";
 import { exportConversationToMarkdown } from "../../utils/export-conversation";
+import { conversationListSkeletonRows } from "../../utils/conversation-list-skeleton";
 const props = defineProps({
   conversations: { type: null, required: true },
   currentId: { type: String, required: false },
-  getMemberImage: { type: Function, required: false }
+  getMemberImage: { type: Function, required: false },
+  loading: { type: Boolean, required: false }
 });
 const chatApi = useChatApi();
 const { deleteConversation, renameConversation, duplicateConversation } = useConversations();
+const { setConversation } = useChat();
 const router = useRouter();
 const groupedConversations = computed(() => {
   return groupConversationsByDate(props.conversations);
@@ -25,6 +28,7 @@ async function handleRename(id, title) {
 async function handleDuplicate(id) {
   const duplicated = await duplicateConversation(id);
   if (duplicated) {
+    setConversation(duplicated);
     router.push(`/${duplicated.id}`);
   }
 }
@@ -43,7 +47,23 @@ async function handleExport(id) {
 
 <template>
     <div flex="~ col" gap-16px>
-        <div v-if="conversations.length === 0" p-16px text-center>
+        <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;" />
+            </div>
+
+            <div flex="~ col" gap-1px>
+                <div
+                    v-for="row in conversationListSkeletonRows"
+                    :key="row.id"
+                    flex items-center h-32px px-8px rounded-8px
+                >
+                    <TelaSkeleton rounded-6px bg-neutral-200 :style="{ width: row.width, height: '13px' }" />
+                </div>
+            </div>
+        </div>
+
+        <div v-else-if="conversations.length === 0" p-16px text-center>
             <p text-14px text-neutral-400>
                 Nenhuma conversa ainda
             </p>

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

@@ -4,6 +4,7 @@ type __VLS_Props = {
     conversations: DeepReadonly<Conversation[]>;
     currentId?: string;
     getMemberImage?: (userId: string) => string | undefined;
+    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>;
 declare const _default: typeof __VLS_export;

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

@@ -1,6 +1,7 @@
 import type { Message } from '../../types/chat.js';
 type __VLS_Props = {
     messages: readonly Message[];
+    loading?: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     retry: (messageId: string) => any;

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

@@ -1,9 +1,16 @@
 <script setup>
 const props = defineProps({
-  messages: { type: Array, required: true }
+  messages: { type: Array, required: true },
+  loading: { type: Boolean, required: false }
 });
 const emit = defineEmits(["retry"]);
 const containerRef = ref(null);
+const skeletonMessages = [
+  { id: "user-1", align: "end", width: "58%", height: "44px" },
+  { id: "assistant-1", align: "start", width: "92%", height: "116px" },
+  { id: "user-2", align: "end", width: "46%", height: "44px" },
+  { id: "assistant-2", align: "start", width: "84%", height: "92px" }
+];
 function scrollToBottom() {
   nextTick(() => {
     if (containerRef.value) {
@@ -23,7 +30,21 @@ onMounted(scrollToBottom);
         pt-88px pb-24px px-24px
     >
         <div max-w-800px mx-auto>
-            <div flex="~ col" gap-16px>
+            <div v-if="loading" flex="~ col" gap-16px>
+                <div
+                    v-for="message in skeletonMessages"
+                    :key="message.id"
+                    flex
+                    :class="message.align === 'end' ? 'justify-end' : 'justify-start'"
+                >
+                    <TelaSkeleton
+                        rounded-16px
+                        :style="{ width: message.width, height: message.height }"
+                    />
+                </div>
+            </div>
+
+            <div v-else flex="~ col" gap-16px>
                 <ChatMessageBubble
                     v-for="message in messages"
                     :key="message.id"

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

@@ -1,6 +1,7 @@
 import type { Message } from '../../types/chat.js';
 type __VLS_Props = {
     messages: readonly Message[];
+    loading?: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     retry: (messageId: string) => any;

package/dist/runtime/composables/useChat.d.ts

@@ -1,4 +1,4 @@
-import type { Message } from '../types/chat.js';
+import type { Conversation, ConversationWithMessages, Message } from '../types/chat.js';
 export declare function useChat(): {
     currentConversation: any;
     messages: any;
@@ -11,6 +11,7 @@ export declare function useChat(): {
     generatingTitle: any;
     animatedTitle: any;
     loadConversation: (id: string) => Promise<void>;
+    setConversation: (conv: Conversation | ConversationWithMessages) => void;
     sendMessage: (content: string, files?: {
         url: string;
         name: string;

package/dist/runtime/composables/useChat.js

@@ -144,8 +144,29 @@ function parseReasoningFromPolling(reasoning) {
 }
 export function useChat() {
   const chatApi = useChatApi();
-  const currentConversation = ref(null);
-  const messages = ref([]);
+  const embedConfig = useEmbedConfig();
+  const { user: authUser, activeOrganization } = useTelaApplicationAuth();
+  const chatScope = computed(() => embedConfig?.workspaceId.value.trim() || activeOrganization.value?.id?.trim() || "default");
+  const currentConversationBuckets = useState("chat-current-conversation", () => ({}));
+  const messageBuckets = useState("chat-messages", () => ({}));
+  const currentConversation = computed({
+    get: () => currentConversationBuckets.value[chatScope.value] ?? null,
+    set: (value) => {
+      currentConversationBuckets.value = {
+        ...currentConversationBuckets.value,
+        [chatScope.value]: value
+      };
+    }
+  });
+  const messages = computed({
+    get: () => messageBuckets.value[chatScope.value] ?? [],
+    set: (value) => {
+      messageBuckets.value = {
+        ...messageBuckets.value,
+        [chatScope.value]: value
+      };
+    }
+  });
   const loading = ref(false);
   const sending = ref(false);
   const error = ref(null);
@@ -213,6 +234,13 @@ export function useChat() {
     interval: 500,
     stopCondition
   });
+  const setConversation = (conv) => {
+    const conversationMessages = "messages" in conv ? conv.messages : [];
+    currentConversation.value = { ...conv, messages: conversationMessages };
+    messages.value = conversationMessages;
+    titleGenerated.value = false;
+    error.value = null;
+  };
   const loadConversation = async (id) => {
     loading.value = true;
     error.value = null;
@@ -258,7 +286,7 @@ export function useChat() {
       files: filesWithSource,
       externalUuid: null,
       ttft: null,
-      createdBy: null,
+      createdBy: authUser.value?.email ?? null,
       createdAt: /* @__PURE__ */ new Date(),
       updatedAt: null
     };
@@ -500,6 +528,7 @@ export function useChat() {
     generatingTitle: readonly(generatingTitle),
     animatedTitle: readonly(animatedTitle),
     loadConversation,
+    setConversation,
     sendMessage,
     retryMessage,
     cancelConversation,

package/dist/runtime/composables/useChatApi.js

@@ -1,10 +1,11 @@
 export function useChatApi() {
   const embedConfig = useEmbedConfig();
+  const { activeOrganization } = useTelaApplicationAuth();
   function buildHeaders(headers) {
     const mergedHeaders = {
       ...headers ?? {}
     };
-    const workspaceId = embedConfig?.workspaceId.value.trim();
+    const workspaceId = embedConfig?.workspaceId.value.trim() || activeOrganization.value?.id?.trim();
     if (workspaceId) {
       mergedHeaders["x-chat-workspace-id"] = workspaceId;
     }

package/dist/runtime/composables/useConversations.d.ts

@@ -1,5 +1,6 @@
 import type { DeepReadonly } from 'vue';
-import type { Conversation, ModelOption } from '../types/chat.js';
+import type { Conversation, ConversationWithMessages, ModelOption } from '../types/chat.js';
+export declare function mergeFetchedConversations(fetchedConversations: Conversation[], localConversations: readonly Conversation[], deletedConversationIds?: readonly string[], locallyMutatedConversationIds?: readonly string[]): Conversation[];
 export declare function useConversations(): {
     conversations: any;
     loading: any;
@@ -10,6 +11,6 @@ export declare function useConversations(): {
     }) => Promise<Conversation | null>;
     deleteConversation: (id: string) => Promise<boolean>;
     renameConversation: (id: string, title: string) => Promise<boolean>;
-    duplicateConversation: (id: string) => Promise<Conversation | null>;
+    duplicateConversation: (id: string) => Promise<ConversationWithMessages | null>;
     updateConversationInList: (updated: Conversation | DeepReadonly<Conversation>) => void;
 };