@meistrari/chat-nuxt 4.0.1 → 4.1.0-rc.1

package/README.md

@@ -28,7 +28,8 @@ Runtime internals under `src/runtime/**`, generated Nuxt aliases, and workspace-
 | [Citations](docs/guides/citations.md) | `cite://` chips, metadata popover, document panel |
 | [Feature flags](docs/guides/feature-flags.md) | Usage tab, debug entry, cancel button, PostHog wiring |
 | [Message feedback](docs/guides/message-feedback.md) | 👍/👎 controls and host-owned persistence |
-| [Composer extension](docs/guides/composer-extension.md) | Host actions, shared attachment strip, outbound content and retry lifecycle |
+| [Composer extension](docs/guides/composer-extension.md) | Host actions, shared attachment strip, outbound content and retry lifecycle, "/" commands |
+| [Interactive message widgets](docs/guides/message-widgets.md) | Message context and programmatic send for `customComponents` widgets |
 | [Workspace settings](docs/guides/workspace-settings.md) | Settings overrides, agent runtime ownership, `<ChatConfigurationModal>` |
 | [Upgrading to 4.0](docs/guides/upgrading-to-4.md) | Required Chat API version for v2 sends, upgrade order, vue-i18n removal |
 
@@ -71,7 +72,7 @@ Declared in `src/runtime/embed/types.ts`; prop, feature-flag, and event payload
 | `labels` | `Partial<ChatLabels>` | Portuguese defaults | Override conversation-search text; see [UI labels](docs/guides/embedding.md#ui-labels) for supported keys and surfaces |
 | `customComponents` | `Record<string, Component>` | `undefined` | Custom markdown renderers keyed by markdown node or tag name. Components receive `node` plus the parser lifecycle props `loading` and `autoClosed` |
 | `customHtmlTags` | `readonly string[]` | `undefined` | Extra HTML tags allowed by the markdown renderer |
-| `citations` | `ChatCitationsConfig \| null` | `undefined` | Enables `cite://` citations in assistant messages (see [Citations](docs/guides/citations.md)) |
+| `citations` | `ChatCitationsConfig \| null` | `undefined` | Enables `cite://` citations in assistant and user messages (see [Citations](docs/guides/citations.md)) |
 | `feedbackConfig` | `MessageFeedbackConfig \| null` | `undefined` | Enables 👍/👎 feedback on assistant messages; providing the prop (even `{}`) shows the controls |
 | `messageFeedback` | `Record<string, MessageFeedbackRating> \| null` | `undefined` | Host-persisted votes keyed by message id; when provided, it is the single source of truth for the selected thumbs |
 

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@meistrari/chat-nuxt",
   "configKey": "chatNuxt",
-  "version": "4.0.0-rc.1",
+  "version": "4.1.0-rc.1",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "unknown"

package/dist/module.mjs

@@ -190,7 +190,9 @@ const FULL_NAME_COMPONENT_DIRS = ["citations", "conversations", "embed", "files"
 const PATH_PREFIX_COMPONENT_DIRS = ["rendering", "shared"];
 const DYNAMIC_ICON_SAFELIST = [
   "i-ph-folder-minus",
-  "i-ph-folder-open"
+  "i-ph-folder-open",
+  // Neutral pill icon for host-defined user mentions (user-mentions.ts).
+  "i-ph-paperclip"
 ];
 function resolveChatAuthMode(runtimeConfig) {
   const publicConfig = runtimeConfig.public;

package/dist/runtime/assets/css/markstream.css

@@ -1 +1 @@
-.markstream-vue{font-family:inherit;--at-apply:"body-16-regular leading-24px text-primary";--list-item-marker:#a3a3a3;--list-item-counter-marker:#262626}.markstream-vue code,.markstream-vue kbd,.markstream-vue pre,.markstream-vue samp{font-family:Geist Mono Variable,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-size:13px;font-variation-settings:normal;letter-spacing:0;line-height:1.5}.markstream-vue ol,.markstream-vue ul{margin:8px 0;padding-left:1.5em}.markstream-vue .hr-node{border-color:#e5e5e5;border-top-width:.5px;margin-bottom:24px;margin-top:24px}.markstream-vue .strong-node{--at-apply:"font-580"}.markstream-vue .list-node.list-node{margin-bottom:8px;margin-left:4px;margin-top:8px;padding-left:1em}.markstream-vue ol.list-node.list-node{padding-left:3em}.markstream-vue ul{list-style:disc;list-style-position:outside}.markstream-vue ol{list-style:decimal;list-style-position:outside}.markstream-vue li{margin:4px 0}.markstream-vue .paragraph-node{--at-apply:"body-16-regular leading-24px";margin:0}.markstream-vue>.node-slot[data-node-type=paragraph]:not(:first-child){margin-top:12px}@keyframes chat-stream-chunk-in{0%{opacity:0}to{opacity:1}}.markstream-vue .chat-stream-chunk{animation:chat-stream-chunk-in var(--chat-stream-fade-duration,.32s) cubic-bezier(.2,0,0,1) both}@media (prefers-reduced-motion:reduce){.markstream-vue .chat-stream-chunk{animation:none}}.markstream-vue .typewriter-cursor,.markstream-vue .typewriter-simple-cursor .typewriter-simple-cursor-target:after{display:none}.markstream-vue .my-8{margin-bottom:8px;margin-top:8px}.markstream-vue .heading-node.heading-1,.markstream-vue h1{--at-apply:"heading-h2-semibold text-primary";margin:24px 0 8px}.markstream-vue .heading-node.heading-2,.markstream-vue h2{--at-apply:"heading-h3-semibold text-primary";margin:24px 0 8px}.markstream-vue .heading-node.heading-3,.markstream-vue h3{--at-apply:"heading-h4-semibold text-primary";margin:20px 0 8px}.markstream-vue .heading-node.heading-4,.markstream-vue .heading-node.heading-5,.markstream-vue .heading-node.heading-6,.markstream-vue h4,.markstream-vue h5,.markstream-vue h6{--at-apply:"heading-h5-semibold text-primary";margin:16px 0 8px}.markstream-vue>.node-slot:first-child .heading-node{margin-top:0}.markstream-vue [class*=tooltip],[class*=tooltip-element]{background-color:var(--neutral-900,#1a1a1a)!important;border-radius:4px;color:#fff!important;font-size:12px;padding:4px 8px}.mention-tag{align-items:center;border-radius:9999px;display:inline-flex;font-size:.875em;font-weight:500;gap:4px;padding:2px 8px;vertical-align:middle;white-space:nowrap}.mention-tag-file{background-color:rgba(127,189,247,.12);color:#7fbdf7}.mention-tag-skill{background-color:rgba(155,111,222,.12);color:#9b6fde}.mention-tag-canvas{background-color:rgba(234,161,65,.12);color:#d4882e}.mention-tag>span[class*=i-ph]{flex-shrink:0}
+.markstream-vue{font-family:inherit;--at-apply:"body-16-regular leading-24px text-primary";--list-item-marker:#a3a3a3;--list-item-counter-marker:#262626}.markstream-vue code,.markstream-vue kbd,.markstream-vue pre,.markstream-vue samp{font-family:Geist Mono Variable,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-size:13px;font-variation-settings:normal;letter-spacing:0;line-height:1.5}.markstream-vue ol,.markstream-vue ul{margin:8px 0;padding-left:1.5em}.markstream-vue .hr-node{border-color:#e5e5e5;border-top-width:.5px;margin-bottom:24px;margin-top:24px}.markstream-vue .strong-node{--at-apply:"font-580"}.markstream-vue .list-node.list-node{margin-bottom:8px;margin-left:4px;margin-top:8px;padding-left:1em}.markstream-vue ol.list-node.list-node{padding-left:3em}.markstream-vue ul{list-style:disc;list-style-position:outside}.markstream-vue ol{list-style:decimal;list-style-position:outside}.markstream-vue li{margin:4px 0}.markstream-vue .paragraph-node{--at-apply:"body-16-regular leading-24px";margin:0}.markstream-vue>.node-slot[data-node-type=paragraph]:not(:first-child){margin-top:12px}@keyframes chat-stream-chunk-in{0%{opacity:0}to{opacity:1}}.markstream-vue .chat-stream-chunk{animation:chat-stream-chunk-in var(--chat-stream-fade-duration,.32s) cubic-bezier(.2,0,0,1) both}@media (prefers-reduced-motion:reduce){.markstream-vue .chat-stream-chunk{animation:none}}.markstream-vue .typewriter-cursor,.markstream-vue .typewriter-simple-cursor .typewriter-simple-cursor-target:after{display:none}.markstream-vue .my-8{margin-bottom:8px;margin-top:8px}.markstream-vue .heading-node.heading-1,.markstream-vue h1{--at-apply:"heading-h2-semibold text-primary";margin:24px 0 8px}.markstream-vue .heading-node.heading-2,.markstream-vue h2{--at-apply:"heading-h3-semibold text-primary";margin:24px 0 8px}.markstream-vue .heading-node.heading-3,.markstream-vue h3{--at-apply:"heading-h4-semibold text-primary";margin:20px 0 8px}.markstream-vue .heading-node.heading-4,.markstream-vue .heading-node.heading-5,.markstream-vue .heading-node.heading-6,.markstream-vue h4,.markstream-vue h5,.markstream-vue h6{--at-apply:"heading-h5-semibold text-primary";margin:16px 0 8px}.markstream-vue>.node-slot:first-child .heading-node{margin-top:0}.markstream-vue [class*=tooltip],[class*=tooltip-element]{background-color:var(--neutral-900,#1a1a1a)!important;border-radius:4px;color:#fff!important;font-size:12px;padding:4px 8px}.mention-tag{align-items:center;border-radius:9999px;display:inline-flex;font-size:.875em;font-weight:500;gap:4px;padding:2px 8px;vertical-align:middle;white-space:nowrap}.mention-tag-file{background-color:rgba(127,189,247,.12);color:#7fbdf7}.mention-tag-skill{background-color:rgba(155,111,222,.12);color:#9b6fde}.mention-tag-canvas{background-color:rgba(234,161,65,.12);color:#d4882e}.mention-tag-generic{background-color:rgba(148,163,184,.14);color:#64748b}.mention-tag>span[class*=i-ph]{flex-shrink:0}

package/dist/runtime/embed/components/chat-embed-inner.vue

@@ -1,6 +1,7 @@
 <script setup>
-import { inject } from "vue";
+import { inject, provide } from "vue";
 import { CHAT_COMPOSER_EXTENSION_KEY } from "../../types/composer";
+import { CHAT_MESSAGE_SEND_KEY } from "../../types/messages";
 import { useChatAuth } from "#chat-auth";
 import { useBreakpoints } from "@vueuse/core";
 import { useCitationPanel } from "../../citations/composables/citation-panel";
@@ -537,6 +538,13 @@ async function handleSend(content, files, agentInputs) {
   const prepared = composerExtension?.prepareSend?.(content);
   const outbound = prepared?.content ?? content;
   const resolvedAgentInputs = resolveTelaAgentInputs(agentInputs, embedConfig?.telaAgentInputs?.value);
+  const sent = await dispatchMessage(outbound, files, resolvedAgentInputs);
+  if (sent)
+    prepared?.commit?.();
+  if (!sent)
+    restoreQueuedSend({ content: prepared?.retryContent?.() ?? content, files, agentInputs: resolvedAgentInputs });
+}
+async function dispatchMessage(outbound, files, resolvedAgentInputs) {
   let claimedWakeSessionId;
   const sent = await sendMessage(outbound, files.length > 0 ? files : void 0, resolvedAgentInputs, async (signal) => {
     if (!activeConversationId.value || !currentConversation.value) {
@@ -586,10 +594,7 @@ async function handleSend(content, files, agentInputs) {
   });
   if (sent && claimedWakeSessionId)
     agentWake.consume();
-  if (sent)
-    prepared?.commit?.();
-  if (!sent)
-    restoreQueuedSend({ content: prepared?.retryContent?.() ?? content, files, agentInputs: resolvedAgentInputs });
+  return sent;
 }
 watch(
   [outboundOccupied, agentWake.state],
@@ -614,6 +619,14 @@ watch(
       void agentWake.wake(sessionId, selectedModel.value);
   }
 );
+const sendChatMessageFromContent = async (content) => {
+  const trimmed = content.trim();
+  if (!trimmed || props.composerDisabled || composerLocked.value)
+    return false;
+  const resolvedAgentInputs = resolveTelaAgentInputs(void 0, embedConfig?.telaAgentInputs?.value);
+  return Boolean(await dispatchMessage(trimmed, [], resolvedAgentInputs));
+};
+provide(CHAT_MESSAGE_SEND_KEY, sendChatMessageFromContent);
 async function handleCancel() {
   await cancelConversation();
 }

package/dist/runtime/messages/components/chat-mention-dropdown.d.vue.ts

@@ -1,9 +1,13 @@
 import type { MentionItem } from '../../types/schemas/chat/ui.js';
+import type { ChatComposerCommand } from '../../types/composer.js';
 type MentionDropdownItem = MentionItem & {
     iconUrl?: string;
 };
 type __VLS_Props = {
     items: MentionDropdownItem[];
+    /** Host commands listed before the mention sections on the "/" trigger. */
+    commands?: readonly ChatComposerCommand[];
+    /** Indexes the combined [commands, items] list. */
     highlightedIndex: number;
     trigger: '@' | '/';
     query: string;
@@ -12,8 +16,10 @@ type __VLS_Props = {
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     select: (item: MentionItem) => any;
+    selectCommand: (command: ChatComposerCommand) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onSelect?: ((item: MentionItem) => any) | undefined;
+    onSelectCommand?: ((command: ChatComposerCommand) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/messages/components/chat-mention-dropdown.vue

@@ -1,12 +1,13 @@
 <script setup>
 const props = defineProps({
   items: { type: Array, required: true },
+  commands: { type: Array, required: false },
   highlightedIndex: { type: Number, required: true },
   trigger: { type: String, required: true },
   query: { type: String, required: true },
   caretRect: { type: null, required: false }
 });
-const emit = defineEmits(["select"]);
+const emit = defineEmits(["select", "selectCommand"]);
 const listRef = ref(null);
 const panelStyle = computed(() => {
   const rect = props.caretRect;
@@ -18,20 +19,24 @@ const panelStyle = computed(() => {
     bottom: `${window.innerHeight - rect.top + 4}px`
   };
 });
+const commandEntries = computed(
+  () => (props.commands ?? []).map((command, i) => ({ command, globalIndex: i }))
+);
 const sections = computed(() => {
+  const offset = commandEntries.value.length;
   if (props.trigger === "@") {
     return [{
       title: "Arquivos",
-      items: props.items.map((item, i) => ({ item, globalIndex: i }))
+      items: props.items.map((item, i) => ({ item, globalIndex: i + offset }))
     }];
   }
   const canvasItems = [];
   const skillItems = [];
   props.items.forEach((item, i) => {
     if (item.category === "canvas")
-      canvasItems.push({ item, globalIndex: i });
+      canvasItems.push({ item, globalIndex: i + offset });
     else
-      skillItems.push({ item, globalIndex: i });
+      skillItems.push({ item, globalIndex: i + offset });
   });
   const result = [];
   if (canvasItems.length > 0)
@@ -40,6 +45,7 @@ const sections = computed(() => {
     result.push({ title: "Skills", items: skillItems });
   return result;
 });
+const isEmpty = computed(() => props.items.length === 0 && commandEntries.value.length === 0);
 const emptyMessage = computed(() => {
   if (props.query)
     return "Nenhum resultado encontrado";
@@ -67,11 +73,37 @@ watch(() => props.highlightedIndex, () => {
         bg
         p-4px
     >
-        <div v-if="items.length === 0" px-12px py-6px>
+        <div v-if="isEmpty" px-12px py-6px>
             <span body-14-regular text-tertiary>{{ emptyMessage }}</span>
         </div>
 
         <div v-else ref="listRef" flex="~ col">
+            <template v-if="commandEntries.length > 0">
+                <div px-12px pb-2px>
+                    <span body-12-medium text-tertiary>Comandos</span>
+                </div>
+                <button
+                    v-for="entry in commandEntries"
+                    :key="entry.command.id"
+                    type="button"
+                    :data-highlighted="entry.globalIndex === highlightedIndex"
+                    flex items-center gap-8px
+                    w-full min-w-0
+                    rounded-10px
+                    px-12px py-4px
+                    text-left
+                    cursor-pointer select-none
+                    outline-none
+                    :class="entry.globalIndex === highlightedIndex ? 'bg-muted' : 'hover:bg-muted'"
+                    @mousedown.prevent="emit('selectCommand', entry.command)"
+                >
+                    <TelaIcon :name="entry.command.icon ?? 'i-ph-terminal-window'" size="18px" color="icon-secondary" shrink-0 />
+                    <div flex="~ col" min-w-0>
+                        <span body-12-medium text-primary truncate>/{{ entry.command.id }}</span>
+                        <span body-10-regular leading-12px text-tertiary truncate>{{ entry.command.description ?? entry.command.label }}</span>
+                    </div>
+                </button>
+            </template>
             <template v-for="section in sections" :key="section.title">
                 <div px-12px pb-2px>
                     <span body-12-medium text-tertiary>{{ section.title }}</span>

package/dist/runtime/messages/components/chat-mention-dropdown.vue.d.ts

@@ -1,9 +1,13 @@
 import type { MentionItem } from '../../types/schemas/chat/ui.js';
+import type { ChatComposerCommand } from '../../types/composer.js';
 type MentionDropdownItem = MentionItem & {
     iconUrl?: string;
 };
 type __VLS_Props = {
     items: MentionDropdownItem[];
+    /** Host commands listed before the mention sections on the "/" trigger. */
+    commands?: readonly ChatComposerCommand[];
+    /** Indexes the combined [commands, items] list. */
     highlightedIndex: number;
     trigger: '@' | '/';
     query: string;
@@ -12,8 +16,10 @@ type __VLS_Props = {
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     select: (item: MentionItem) => any;
+    selectCommand: (command: ChatComposerCommand) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onSelect?: ((item: MentionItem) => any) | undefined;
+    onSelectCommand?: ((command: ChatComposerCommand) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -2,6 +2,8 @@ import type { Message } from '../../types/schemas/chat/conversations.js';
 type __VLS_Props = {
     message: Message;
     streamActive?: boolean;
+    /** True while this is the newest message in the conversation. */
+    isLatestMessage?: boolean;
     /**
      * Stand-in steps shown while this turn is still working towards its first
      * output. They yield as soon as the run emits real reasoning or content.

package/dist/runtime/messages/components/chat-message-bubble.vue

@@ -1,14 +1,18 @@
 <script setup>
 import { useChatAuth } from "#chat-auth";
 import { useEmbedConfig } from "../../embed/composables/embed-config";
+import { CHAT_MESSAGE_CONTEXT_KEY } from "../../types/messages";
 import { useWorkspaceMembers } from "../../workspace/composables/workspace-members";
 import { isPromptTooLongFailure } from "../../types/schemas/chat/messages.js";
 import { linkifyBareCitations } from "../../citations/citation-links";
 import { parseContentWithFiles } from "../../files/content-detection";
+import { renderEscapedUserMentions } from "../user-mentions";
+import { parseUserCitations } from "../user-citations";
 import ChatVaultLink from "../../files/components/chat-vault-link.vue";
 const props = defineProps({
   message: { type: null, required: true },
   streamActive: { type: Boolean, required: false },
+  isLatestMessage: { type: Boolean, required: false },
   preparingSteps: { type: [Array, null], required: false },
   showTtft: { type: Boolean, required: false, default: true }
 });
@@ -17,6 +21,12 @@ defineSlots();
 const { user } = useChatAuth();
 const { getMemberByEmail } = useWorkspaceMembers();
 const embedConfig = useEmbedConfig();
+provide(CHAT_MESSAGE_CONTEXT_KEY, {
+  messageId: props.message.id,
+  role: props.message.role,
+  isLatestMessage: computed(() => props.isLatestMessage === true),
+  streaming: computed(() => props.streamActive === true)
+});
 const mergedCustomComponents = computed(() => ({
   link: ChatVaultLink,
   ...embedConfig?.customComponents.value ?? {}
@@ -64,28 +74,14 @@ const displayContent = computed(() => {
     return content;
   return linkifyBareCitations(content);
 });
-const userContentHtml = computed(() => {
-  if (props.message.role !== "user")
-    return "";
-  const raw = displayContent.value;
-  const escaped = raw.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
-  return escaped.replace(/&lt;file_mention name=&quot;((?:[^&]|&(?!quot;))+)&quot;[\s\S]*?&lt;\/file_mention&gt;/g, (_match, encodedName) => {
-    const name = encodedName.replace(/&amp;/g, "&").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&quot;/g, '"');
-    const safeName = name.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
-    return `<span class="mention-tag mention-tag-file"><span class="i-ph-note-blank" aria-hidden="true"></span>${safeName}</span>`;
-  }).replace(/&lt;canvas_mention name=&quot;((?:[^&]|&(?!quot;))+)&quot;[\s\S]*?&lt;\/canvas_mention&gt;/g, (_match, encodedName) => {
-    const name = encodedName.replace(/&amp;/g, "&").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&quot;/g, '"');
-    const safeName = name.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
-    return `<span class="mention-tag mention-tag-canvas"><span class="i-ph-wrench" aria-hidden="true"></span>${safeName}</span>`;
-  }).replace(/&lt;skill_mention name=&quot;((?:[^&]|&(?!quot;))+)&quot;[\s\S]*?&lt;\/skill_mention&gt;/g, (_match, encodedName) => {
-    const name = encodedName.replace(/&amp;/g, "&").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&quot;/g, '"');
-    const safeName = name.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
-    return `<span class="mention-tag mention-tag-skill"><span class="i-ph-hexagon" aria-hidden="true"></span>${safeName}</span>`;
-  });
-});
-const hasUserMentions = computed(
-  () => props.message.role === "user" && (displayContent.value.includes("<file_mention") || displayContent.value.includes("<canvas_mention") || displayContent.value.includes("<skill_mention"))
-);
+const userContentSegments = computed(() => parseUserCitations(
+  props.message.role === "user" ? props.message.content ?? "" : "",
+  Boolean(embedConfig?.citations.value)
+));
+function renderUserText(content) {
+  const escaped = content.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+  return renderEscapedUserMentions(escaped);
+}
 const formattedTtft = computed(() => {
   if (props.message.role !== "assistant" || !props.message.ttft)
     return null;
@@ -158,9 +154,11 @@ const hasDetectedFiles = computed(() => contentSegments.value.some((s) => s.type
                             <span truncate max-w-200px>{{ file.name }}</span>
                         </a>
                     </div>
-                    <div v-if="hasUserMentions" body-16-regular whitespace-pre-wrap v-html="userContentHtml" />
-                    <div v-else body-16-regular whitespace-pre-wrap>
-                        {{ message.content }}
+                    <div body-16-regular whitespace-pre-wrap>
+                        <template v-for="(segment, index) in userContentSegments" :key="`${index}-${segment.type === 'citation' ? segment.citation.raw : 'text'}`">
+                            <ChatCitation v-if="segment.type === 'citation'" :citation="segment.citation" :label="segment.label" />
+                            <span v-else v-html="renderUserText(segment.content)" />
+                        </template>
                     </div>
                 </TelaChatMessageContent>
 

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

@@ -2,6 +2,8 @@ import type { Message } from '../../types/schemas/chat/conversations.js';
 type __VLS_Props = {
     message: Message;
     streamActive?: boolean;
+    /** True while this is the newest message in the conversation. */
+    isLatestMessage?: boolean;
     /**
      * Stand-in steps shown while this turn is still working towards its first
      * output. They yield as soon as the run emits real reasoning or content.

package/dist/runtime/messages/components/chat-message-input.vue

@@ -115,10 +115,12 @@ const skillItems = computed(() => {
   }
   return items;
 });
+const commandItems = computed(() => composerExtension?.commands ?? []);
 const mentionAutocomplete = useMentionAutocomplete({
   editorRef,
   fileItems,
   skillItems,
+  commandItems,
   disabled: isLocked,
   onInsert: handleInput
 });
@@ -657,11 +659,13 @@ defineExpose({
                 <ChatMentionDropdown
                     v-if="mentionAutocomplete.isOpen"
                     :items="mentionAutocomplete.filteredItems"
+                    :commands="mentionAutocomplete.filteredCommands"
                     :highlighted-index="mentionAutocomplete.highlightedIndex"
                     :trigger="mentionAutocomplete.activeTrigger"
                     :query="mentionAutocomplete.query"
                     :caret-rect="mentionAutocomplete.triggerCaretRect"
                     @select="mentionAutocomplete.selectItem"
+                    @select-command="mentionAutocomplete.runCommand"
                 />
 
                 <TelaChatPromptInput :locked="promptShellLocked" :class="centered && 'bg-white'">

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

@@ -40,6 +40,7 @@ const skeletonMessages = [
   { id: "assistant-2", align: "start", width: "84%", height: "92px" }
 ];
 const timelineItems = computed(() => mergeConversationTimeline(props.messages, props.events));
+const latestMessageId = computed(() => props.messages.at(-1)?.id ?? null);
 const latestOutputSignal = computed(() => {
   const latestMessage = props.messages.at(-1);
   const latestEvent = props.events?.at(-1);
@@ -104,6 +105,7 @@ defineExpose({
                             v-else
                             :message="item.value"
                             :stream-active="item.id === streamingActiveMessageId"
+                            :is-latest-message="item.id === latestMessageId"
                             :preparing-steps="item.value.role === 'assistant' && item.value.status === 'pending' ? preparingSteps : null"
                             :show-ttft="showTtft"
                             @retry="emit('retry', $event)"

package/dist/runtime/messages/composables/mention-autocomplete.d.ts

@@ -1,8 +1,10 @@
 import type { MentionItem } from '../../types/schemas/chat/ui.js';
+import type { ChatComposerCommand } from '../../types/composer.js';
 type UseMentionAutocompleteOptions = {
     editorRef: Ref<HTMLElement | null>;
     fileItems: ComputedRef<MentionItem[]>;
     skillItems: ComputedRef<MentionItem[]>;
+    commandItems?: ComputedRef<readonly ChatComposerCommand[]>;
     disabled?: Ref<boolean | undefined>;
     onInsert?: () => void;
 };

package/dist/runtime/messages/composables/mention-autocomplete.js

@@ -29,7 +29,7 @@ export function appendAttachmentMentions(content, files) {
   return [content, ...tags].filter(Boolean).join("\n");
 }
 export function useMentionAutocomplete(options) {
-  const { editorRef, fileItems, skillItems, disabled, onInsert } = options;
+  const { editorRef, fileItems, skillItems, commandItems, disabled, onInsert } = options;
   const activeTrigger = ref(null);
   const query = ref("");
   const highlightedIndex = ref(-1);
@@ -48,6 +48,17 @@ export function useMentionAutocomplete(options) {
       (item) => item.label.toLowerCase().includes(q) || item.description?.toLowerCase().includes(q)
     );
   });
+  const filteredCommands = computed(() => {
+    if (activeTrigger.value !== "/")
+      return [];
+    const commands = commandItems?.value ?? [];
+    if (!query.value)
+      return commands;
+    const q = query.value.toLowerCase();
+    return commands.filter(
+      (command) => command.id.toLowerCase().includes(q) || command.label.toLowerCase().includes(q) || command.description?.toLowerCase().includes(q)
+    );
+  });
   function getTextBeforeCursor() {
     const sel = window.getSelection();
     if (!sel || sel.rangeCount === 0 || !editorRef.value)
@@ -100,14 +111,15 @@ export function useMentionAutocomplete(options) {
       triggerCaretRect.value = null;
       return;
     }
+    const wasOpen = activeTrigger.value !== null;
+    const queryChanged = mentionTrigger.query !== lastQuery.value;
     activeTrigger.value = mentionTrigger.trigger;
     triggerTextOffset = mentionTrigger.offset;
     triggerCaretRect.value = getCaretRangeAtOffset(triggerTextOffset)?.getBoundingClientRect() ?? null;
-    if (mentionTrigger.query !== lastQuery.value) {
-      highlightedIndex.value = -1;
-      lastQuery.value = mentionTrigger.query;
-    }
+    lastQuery.value = mentionTrigger.query;
     query.value = mentionTrigger.query;
+    if (!wasOpen || queryChanged)
+      highlightedIndex.value = filteredCommands.value.length > 0 ? 0 : -1;
   }
   function getCaretRangeAtOffset(offset) {
     const editor = editorRef.value;
@@ -151,23 +163,35 @@ export function useMentionAutocomplete(options) {
     }
     return walkNode(editor);
   }
-  function selectItem(item) {
+  function consumeTriggerText() {
     if (!editorRef.value || triggerTextOffset < 0)
-      return;
+      return null;
     const sel = window.getSelection();
     if (!sel || sel.rangeCount === 0)
-      return;
-    const textBeforeCursor = getTextBeforeCursor();
-    const charBeforeTrigger = triggerTextOffset > 0 ? textBeforeCursor[triggerTextOffset - 1] : null;
-    const needsSpaceBefore = charBeforeTrigger !== null && charBeforeTrigger !== " " && charBeforeTrigger !== "\n" && charBeforeTrigger !== "\xA0";
+      return null;
+    const trigger = findMentionTrigger(getTextBeforeCursor());
+    if (!trigger || trigger.offset !== triggerTextOffset)
+      return null;
     const triggerRange = getCaretRangeAtOffset(triggerTextOffset);
     if (!triggerRange)
-      return;
+      return null;
     const currentRange = sel.getRangeAt(0);
     const deleteRange = document.createRange();
     deleteRange.setStart(triggerRange.startContainer, triggerRange.startOffset);
     deleteRange.setEnd(currentRange.startContainer, currentRange.startOffset);
     deleteRange.deleteContents();
+    return deleteRange;
+  }
+  function selectItem(item) {
+    const textBeforeCursor = getTextBeforeCursor();
+    const charBeforeTrigger = triggerTextOffset > 0 ? textBeforeCursor[triggerTextOffset - 1] : null;
+    const needsSpaceBefore = charBeforeTrigger !== null && charBeforeTrigger !== " " && charBeforeTrigger !== "\n" && charBeforeTrigger !== "\xA0";
+    const deleteRange = consumeTriggerText();
+    const sel = window.getSelection();
+    if (!deleteRange || !sel) {
+      dismiss();
+      return;
+    }
     const span = document.createElement("span");
     span.className = `mention-tag mention-tag-${item.category}`;
     span.contentEditable = "false";
@@ -202,6 +226,27 @@ export function useMentionAutocomplete(options) {
     triggerTextOffset = -1;
     onInsert?.();
   }
+  function runCommand(command) {
+    const deleteRange = consumeTriggerText();
+    if (!deleteRange) {
+      dismiss();
+      return;
+    }
+    const sel = window.getSelection();
+    if (sel) {
+      const caret = document.createRange();
+      caret.setStart(deleteRange.startContainer, deleteRange.startOffset);
+      caret.collapse(true);
+      sel.removeAllRanges();
+      sel.addRange(caret);
+    }
+    activeTrigger.value = null;
+    lastQuery.value = "";
+    highlightedIndex.value = -1;
+    triggerTextOffset = -1;
+    onInsert?.();
+    command.run();
+  }
   function buildTaggedContent() {
     if (!editorRef.value)
       return "";
@@ -343,7 +388,8 @@ ${varLines}
       dismiss();
       return;
     }
-    const count = filteredItems.value.length;
+    const commandCount = filteredCommands.value.length;
+    const count = commandCount + filteredItems.value.length;
     if (count === 0)
       return;
     if (e.key === "ArrowDown") {
@@ -357,14 +403,16 @@ ${varLines}
       return;
     }
     if (e.key === "Enter") {
-      const item = filteredItems.value[highlightedIndex.value];
-      if (item) {
-        e.preventDefault();
+      const index = highlightedIndex.value;
+      const command = index >= 0 ? filteredCommands.value[index] : void 0;
+      const item = index >= commandCount ? filteredItems.value[index - commandCount] : void 0;
+      e.preventDefault();
+      if (command)
+        runCommand(command);
+      else if (item)
         selectItem(item);
-      } else {
-        e.preventDefault();
+      else
         dismiss();
-      }
     }
   }
   return reactive({
@@ -373,9 +421,11 @@ ${varLines}
     query: readonly(query),
     triggerCaretRect: readonly(triggerCaretRect),
     filteredItems,
+    filteredCommands,
     highlightedIndex,
     handleKeydown,
     selectItem,
+    runCommand,
     dismiss,
     detectTrigger,
     buildTaggedContent,

package/dist/runtime/messages/debug/chat-debug-scenarios.js

@@ -1476,7 +1476,15 @@ export function createChatDebugScenarios(baseTime = Date.now()) {
           message: message(baseTime, 0, {
             id: "citations-user-message",
             role: "user",
-            content: "A empresa pode monitorar os acessos dos empregados \xE0 internet?"
+            content: [
+              "A empresa pode monitorar os acessos dos empregados \xE0 internet?",
+              "",
+              "Documentos da base selecionados:",
+              "- [S\xFAmula 331 do TST](cite://tst_sumulas/331)",
+              "- [Parecer do BNDES](cite://bndes_pareceres/7154)",
+              "",
+              "Veja tamb\xE9m cite://stf_jurisprudencia/sjur336558."
+            ].join("\n")
           })
         }),
         event({

package/dist/runtime/messages/user-citations.d.ts

@@ -0,0 +1,11 @@
+import { type CitationRef } from '../citations/citation-links.js';
+export type UserCitationSegment = {
+    type: 'text';
+    content: string;
+} | {
+    type: 'citation';
+    citation: CitationRef;
+    label?: string;
+};
+/** Only citations become components; all other user content keeps its plain-text semantics. */
+export declare function parseUserCitations(content: string, enabled: boolean): UserCitationSegment[];

package/dist/runtime/messages/user-citations.js

@@ -0,0 +1,31 @@
+import { isCitationUrl, parseCitationUrl } from "../citations/citation-links.js";
+const TOKENS = /<[a-z][a-z0-9-]*_mention\s[^>]*>[\s\S]*?<\/[a-z][a-z0-9-]*_mention>|(`{3,}|~{3,})[^\n]*\n[\s\S]*?(?:\1|$)|(`+)[^`]*?\2|!?\[((?:[^\[\]\n]|\[[^\]\n]*\])*)\]\(([^\s)]+)(?:\s+["'][^\n]*?["'])?\)|\[[ \t]*(cite:\/\/[^\s"'<>`\[\]()*~]+)[ \t]*\]|cite:\/\/[^\s"'<>`\[\]()*~]+/gi;
+export function parseUserCitations(content, enabled) {
+  if (!enabled)
+    return [{ type: "text", content }];
+  const segments = [];
+  let end = 0;
+  for (const match of content.matchAll(TOKENS)) {
+    const [raw, , , label, href, bracketed] = match;
+    if (raw.startsWith("!"))
+      continue;
+    const bare = !href && !bracketed && isCitationUrl(raw);
+    const url = href ?? bracketed ?? (bare ? raw.replace(/[.,:;!?]+$/, "") : "");
+    const citation = parseCitationUrl(url);
+    if (!citation)
+      continue;
+    const start = match.index;
+    if (start > end)
+      segments.push({ type: "text", content: content.slice(end, start) });
+    const visibleLabel = label?.trim();
+    segments.push({
+      type: "citation",
+      citation,
+      ...visibleLabel && visibleLabel !== citation.id && !isCitationUrl(visibleLabel) ? { label: visibleLabel } : {}
+    });
+    end = start + (bare ? url.length : raw.length);
+  }
+  if (end < content.length || segments.length === 0)
+    segments.push({ type: "text", content: content.slice(end) });
+  return segments;
+}

package/dist/runtime/messages/user-mentions.d.ts

@@ -0,0 +1,8 @@
+export declare function hasUserMentionTags(content: string): boolean;
+/**
+ * Replaces `<*_mention name="...">...</...>` tags in already HTML-escaped user
+ * content with display pills, hiding the agent-facing instruction body. Known
+ * categories keep their icon and color; any other mention renders as a neutral
+ * pill, so host-defined mentions (e.g. template_mention) degrade gracefully.
+ */
+export declare function renderEscapedUserMentions(escaped: string): string;

package/dist/runtime/messages/user-mentions.js

@@ -0,0 +1,20 @@
+const MENTION_ICONS = {
+  file: "i-ph-note-blank",
+  canvas: "i-ph-wrench",
+  skill: "i-ph-hexagon"
+};
+const DEFAULT_MENTION_ICON = "i-ph-paperclip";
+const ESCAPED_MENTION_TAG = /<([a-z][a-z0-9-]*)_mention name="((?:[^&]|&(?!quot;))+)"[\s\S]*?<\/\1_mention>/g;
+export function hasUserMentionTags(content) {
+  return /<[a-z][a-z0-9-]*_mention\s/.test(content);
+}
+export function renderEscapedUserMentions(escaped) {
+  return escaped.replace(ESCAPED_MENTION_TAG, (_match, category, encodedName) => {
+    const name = encodedName.replace(/&amp;/g, "&").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&quot;/g, '"');
+    const safeName = name.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+    const known = category in MENTION_ICONS;
+    const icon = known ? MENTION_ICONS[category] : DEFAULT_MENTION_ICON;
+    const categoryClass = known ? `mention-tag-${category}` : "mention-tag-generic";
+    return `<span class="mention-tag ${categoryClass}"><span class="${icon}" aria-hidden="true"></span>${safeName}</span>`;
+  });
+}

package/dist/runtime/types/composer.d.ts

@@ -9,6 +9,17 @@ export interface ChatPreparedSend {
     /** Read after rejection. Defaults to the original composer text when omitted. */
     retryContent?: () => string;
 }
+/** Local action listed under "Comandos" in the composer's "/" dropdown. */
+export interface ChatComposerCommand {
+    /** Name matched against the text typed after "/", e.g. `templates`. */
+    id: string;
+    label: string;
+    description?: string;
+    /** Icon class rendered in the dropdown. Defaults to `i-ph-terminal-window`. */
+    icon?: string;
+    /** Runs after the typed "/query" is removed from the draft. */
+    run: () => void;
+}
 /** Provide above MeistrariChatEmbed to extend its composer without replacing it. */
 export interface ChatComposerExtension {
     /** Action next to the file menu. Receives the composer's `disabled` state. */
@@ -19,4 +30,6 @@ export interface ChatComposerExtension {
     hasAttachments?: MaybeRef<boolean>;
     /** Prepare without consuming host state; commit after the send is accepted. */
     prepareSend?: (content: string) => ChatPreparedSend | null | undefined;
+    /** Host commands offered alongside skills when the user types "/". */
+    commands?: readonly ChatComposerCommand[];
 }

package/dist/runtime/types/messages.d.ts

@@ -0,0 +1,21 @@
+import type { Ref } from 'vue';
+/** Stable string keys, also compatible with hosts injecting the literal key. */
+export declare const CHAT_MESSAGE_SEND_KEY = "chat-message-send";
+export declare const CHAT_MESSAGE_CONTEXT_KEY = "chat-message-context";
+/**
+ * Provided by the embed to components rendered inside message content
+ * (`customComponents`). Sends `content` as the user through the same path as
+ * the composer, resolving the conversation's configured agent inputs — a
+ * direct `useChat().sendMessage` call would skip that resolution. Resolves
+ * `true` once the message is accepted (including into the outbound queue).
+ */
+export type ChatMessageSend = (content: string) => Promise<boolean>;
+/** Provided per message bubble to components rendered inside its content. */
+export interface ChatMessageContext {
+    messageId: string;
+    role: 'user' | 'assistant';
+    /** True while this is the newest message in the conversation. */
+    isLatestMessage: Readonly<Ref<boolean>>;
+    /** True while this message's turn is still streaming. */
+    streaming: Readonly<Ref<boolean>>;
+}

package/dist/runtime/types/messages.js

@@ -0,0 +1,2 @@
+export const CHAT_MESSAGE_SEND_KEY = "chat-message-send";
+export const CHAT_MESSAGE_CONTEXT_KEY = "chat-message-context";

package/package.json

@@ -1,7 +1,6 @@
 {
   "name": "@meistrari/chat-nuxt",
-  "version": "4.0.1",
-  "gitHead": "37731629442568e674b877312c60beb9502d583f",
+  "version": "4.1.0-rc.1",
   "type": "module",
   "exports": {
     ".": {