@meistrari/chat-nuxt 1.9.0 → 1.11.0

package/README.md

@@ -220,6 +220,7 @@ Key props for embedding:
 | `conversationId` | `string \| null` | `null` | Controlled conversation (supports v-model) |
 | `initialConversationId` | `string \| null` | `null` | Open this conversation on mount |
 | `conversationScope` | `string \| null` | `null` | Isolate conversation history by technical scope within the current workspace and runtime |
+| `defaultConversationCreatorFilter` | `'all' \| 'mine'` | `'all'` | Initial sidebar creator filter |
 | `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 |

package/dist/module.json

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

package/dist/runtime/components/MeistrariChatEmbed.vue

@@ -3,6 +3,7 @@ const props = defineProps({
   conversationId: { type: [String, null], required: false },
   initialConversationId: { type: [String, null], required: false },
   conversationScope: { type: [String, null], required: false },
+  defaultConversationCreatorFilter: { type: String, required: false },
   hideSidebar: { type: Boolean, required: false },
   hideSettings: { type: Boolean, required: false },
   loadingMessages: { type: [Array, null], required: false },
@@ -27,6 +28,7 @@ const hideSettings = computed(() => props.hideSettings ?? false);
         :conversation-id="conversationId"
         :initial-conversation-id="initialConversationId"
         :conversation-scope="conversationScope"
+        :default-conversation-creator-filter="defaultConversationCreatorFilter"
         :hide-sidebar="hideSidebar"
         :hide-settings="hideSettings"
         :features="features"
@@ -44,6 +46,7 @@ const hideSettings = computed(() => props.hideSettings ?? false);
         :conversation-id="conversationId"
         :initial-conversation-id="initialConversationId"
         :conversation-scope="conversationScope"
+        :default-conversation-creator-filter="defaultConversationCreatorFilter"
         :hide-sidebar="hideSidebar"
         :hide-settings="hideSettings"
         :features="features"

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

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,95 @@
+<script setup>
+import { nextTick } from "vue";
+import { CONVERSATION_CREATOR_FILTER_OPTIONS } from "../../types/chat";
+import {
+  hasConversationCreatorFilterResults,
+  resolveConversationCreatorFilterKeyboardTarget
+} from "../../utils/conversation-creator-filter";
+const { conversationCreatorFilter, conversationCreatorFilterCounts, fetchConversations } = useConversations();
+const isUpdating = ref(false);
+const filterButtonElements = ref([]);
+const filterOptions = computed(() => CONVERSATION_CREATOR_FILTER_OPTIONS.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 && "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/components/chat/conversation-creator-filter.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -4,6 +4,7 @@ type __VLS_Props = {
     conversation: DeepReadonly<Conversation>;
     active: 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;

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

@@ -5,12 +5,14 @@ import { capitalizeFirst } from "../../utils/string";
 const props = defineProps({
   conversation: { type: null, required: true },
   active: { type: Boolean, required: true },
-  userImage: { type: String, required: false }
+  userImage: { type: String, required: false },
+  selectConversation: { type: Function, required: false }
 });
 const emit = defineEmits(["delete", "rename", "duplicate", "export"]);
 const isRenamingInline = ref(false);
 const renameTitle = ref("");
 const renameInputRef = ref(null);
+const isIgnoringInitialRenameBlur = ref(false);
 const showDeleteModal = ref(false);
 const { escape } = useMagicKeys();
 watch(() => escape?.value, (pressed) => {
@@ -37,12 +39,26 @@ useMutationObserver(menuButtonRef, (mutations) => {
 const conversationPath = computed(() => `/${props.conversation.id}`);
 const conversationNavigationDelayMs = 250;
 let conversationNavigationTimer = null;
+let renameBlurTimer = null;
 function clearPendingConversationNavigation() {
   if (conversationNavigationTimer === null)
     return;
   clearTimeout(conversationNavigationTimer);
   conversationNavigationTimer = null;
 }
+function clearRenameBlurTimer() {
+  if (renameBlurTimer === null)
+    return;
+  clearTimeout(renameBlurTimer);
+  renameBlurTimer = null;
+}
+function allowRenameBlurSoon() {
+  clearRenameBlurTimer();
+  renameBlurTimer = setTimeout(() => {
+    isIgnoringInitialRenameBlur.value = false;
+    renameBlurTimer = null;
+  }, 100);
+}
 function handleConversationClick(event) {
   if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey)
     return;
@@ -51,7 +67,11 @@ function handleConversationClick(event) {
   if (event.detail > 1)
     return;
   conversationNavigationTimer = setTimeout(() => {
-    navigateTo(conversationPath.value);
+    if (props.selectConversation) {
+      void props.selectConversation(props.conversation.id);
+    } else {
+      navigateTo(conversationPath.value);
+    }
     conversationNavigationTimer = null;
   }, conversationNavigationDelayMs);
 }
@@ -59,11 +79,14 @@ async function focusRenameInput() {
   await nextTick();
   renameInputRef.value?.focus();
   renameInputRef.value?.select();
+  allowRenameBlurSoon();
 }
 function startRename() {
   isMenuOpen.value = false;
   clearPendingConversationNavigation();
+  clearRenameBlurTimer();
   renameTitle.value = props.conversation.title;
+  isIgnoringInitialRenameBlur.value = true;
   isRenamingInline.value = true;
   void focusRenameInput();
 }
@@ -73,7 +96,9 @@ function handleConversationDoubleClick() {
 }
 function cancelRename() {
   isRenamingInline.value = false;
+  isIgnoringInitialRenameBlur.value = false;
   renameTitle.value = "";
+  clearRenameBlurTimer();
 }
 function submitRename() {
   if (!isRenamingInline.value)
@@ -86,6 +111,11 @@ function submitRename() {
   emit("rename", props.conversation.id, title);
   cancelRename();
 }
+function handleRenameBlur() {
+  if (isIgnoringInitialRenameBlur.value)
+    return;
+  submitRename();
+}
 const menuItems = [
   {
     label: "Renomear",
@@ -109,7 +139,10 @@ const menuItems = [
     click: () => showDeleteModal.value = true
   }
 ];
-onBeforeUnmount(clearPendingConversationNavigation);
+onBeforeUnmount(() => {
+  clearPendingConversationNavigation();
+  clearRenameBlurTimer();
+});
 </script>
 
 <template>
@@ -145,7 +178,7 @@ onBeforeUnmount(clearPendingConversationNavigation);
                     bg-transparent border-none outline-none
                     text-14px font-medium text-neutral-700 leading-18px tracking="-.15px"
                     p-0
-                    @blur="submitRename"
+                    @blur="handleRenameBlur"
                     @keydown.enter.prevent="submitRename"
                     @keydown.escape.prevent.stop="cancelRename"
                 >
@@ -191,7 +224,13 @@ onBeforeUnmount(clearPendingConversationNavigation);
                 </span>
             </div>
 
-            <div mt-2px flex items-center opacity-0 group-hover:opacity-100 transition-opacity :class="isMenuOpen && 'opacity-100'">
+            <div
+                mt-2px
+                flex
+                items-center
+                class="opacity-0 group-hover:opacity-100 transition-opacity"
+                :class="isMenuOpen && 'opacity-100'"
+            >
                 <TelaDropdownMenu :items="menuItems">
                     <button
                         ref="menuButtonRef"

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

@@ -4,6 +4,7 @@ type __VLS_Props = {
     conversation: DeepReadonly<Conversation>;
     active: 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;

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

@@ -4,6 +4,8 @@ type __VLS_Props = {
     conversations: DeepReadonly<Conversation[]>;
     currentId?: string;
     getMemberImage?: (userId: string) => string | undefined;
+    selectConversation?: (id: string) => void | Promise<void>;
+    resetConversation?: () => void | Promise<void>;
     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>;

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

@@ -7,6 +7,8 @@ const props = defineProps({
   conversations: { type: null, required: true },
   currentId: { type: String, required: false },
   getMemberImage: { type: Function, required: false },
+  selectConversation: { type: Function, required: false },
+  resetConversation: { type: Function, required: false },
   loading: { type: Boolean, required: false }
 });
 const chatApi = useChatApi();
@@ -24,12 +26,17 @@ const groupedConversations = computed(() => {
   return groupConversationsByDate(filteredConversations.value);
 });
 const hasConversationSearchQuery = computed(() => conversationSearch.value.trim().length > 0);
-function handleDelete(id) {
+async function handleDelete(id) {
   const route = useRoute();
-  if (route.params.id === id) {
-    router.push("/");
+  const shouldResetConversation = props.currentId === id || route.params.id === id;
+  const deleted = await deleteConversation(id);
+  if (deleted && shouldResetConversation) {
+    if (props.resetConversation) {
+      void props.resetConversation();
+    } else {
+      router.push("/");
+    }
   }
-  deleteConversation(id);
 }
 async function handleRename(id, title) {
   await renameConversation(id, title);
@@ -38,7 +45,11 @@ async function handleDuplicate(id) {
   const duplicated = await duplicateConversation(id);
   if (duplicated) {
     setConversation(duplicated);
-    router.push(`/${duplicated.id}`);
+    if (props.selectConversation) {
+      void props.selectConversation(duplicated.id);
+    } else {
+      router.push(`/${duplicated.id}`);
+    }
   }
 }
 async function handleExport(id) {
@@ -56,8 +67,9 @@ async function handleExport(id) {
 
 <template>
     <div flex="~ col" gap-12px>
-        <div px-8px>
+        <div px-8px flex="~ col" gap-8px>
             <ChatConversationSearch v-model="conversationSearch" />
+            <ChatConversationCreatorFilter />
         </div>
 
         <div v-if="loading && conversations.length === 0" flex="~ col" gap-4px>
@@ -99,6 +111,7 @@ async function handleExport(id) {
                         :conversation="conversation"
                         :active="conversation.id === currentId"
                         :user-image="getMemberImage?.(conversation.userId)"
+                        :select-conversation="selectConversation"
                         @delete="handleDelete"
                         @rename="handleRename"
                         @duplicate="handleDuplicate"

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

@@ -4,6 +4,8 @@ type __VLS_Props = {
     conversations: DeepReadonly<Conversation[]>;
     currentId?: string;
     getMemberImage?: (userId: string) => string | undefined;
+    selectConversation?: (id: string) => void | Promise<void>;
+    resetConversation?: () => void | Promise<void>;
     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>;

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

@@ -3,6 +3,9 @@ defineProps({
   placeholder: { type: String, required: false, default: "Buscar conversas" }
 });
 const searchQuery = defineModel({ type: String, ...{ required: true } });
+function clearSearch() {
+  searchQuery.value = "";
+}
 </script>
 
 <template>
@@ -10,7 +13,23 @@ const searchQuery = defineModel({ type: String, ...{ required: true } });
         v-model="searchQuery"
         icon="i-ph-magnifying-glass-bold"
         :placeholder="placeholder"
-        show-clear-button
         autocomplete="off"
-    />
+    >
+        <template v-if="searchQuery" #trailing>
+            <TelaTooltip content="Limpar busca">
+                <button
+                    type="button"
+                    aria-label="Limpar busca"
+                    hover:bg="#EBEFF199"
+                    transition-colors
+                    p-4px rounded-full
+                    class="group"
+                    tabindex="-1"
+                    @click.stop="clearSearch"
+                >
+                    <TelaIcon name="i-ph-x-circle-light" text="#031E22" op-40 group-hover:op-100 transition-opacity />
+                </button>
+            </TelaTooltip>
+        </template>
+    </TelaInput>
 </template>

package/dist/runtime/components/chat/mobile/shell/drawer.vue

@@ -98,6 +98,7 @@ function handleNew() {
                 </span>
             </button>
             <ChatConversationSearch v-model="conversationSearch" />
+            <ChatConversationCreatorFilter />
         </div>
 
         <div px-14px pt-4px pb-4px>

package/dist/runtime/components/chat/mobile/shell/shell.d.vue.ts

@@ -50,6 +50,7 @@ type __VLS_Slots = {} & {
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     delete: () => any;
     cancel: () => any;
+    selectConversation: (id: string) => any;
     rename: () => any;
     duplicate: () => any;
     export: () => any;
@@ -76,12 +77,12 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     switchWorkspace: () => any;
     signout: () => any;
     dismissOutdatedBanner: () => any;
-    selectConversation: (id: string) => any;
     "update:drawerOpen": (value: boolean) => any;
     "update:workspaceSheetOpen": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onDelete?: (() => any) | undefined;
     onCancel?: (() => any) | undefined;
+    onSelectConversation?: ((id: string) => any) | undefined;
     onRename?: (() => any) | undefined;
     onDuplicate?: (() => any) | undefined;
     onExport?: (() => any) | undefined;
@@ -108,7 +109,6 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     onSwitchWorkspace?: (() => any) | undefined;
     onSignout?: (() => any) | undefined;
     onDismissOutdatedBanner?: (() => any) | undefined;
-    onSelectConversation?: ((id: string) => any) | undefined;
     "onUpdate:drawerOpen"?: ((value: boolean) => any) | undefined;
     "onUpdate:workspaceSheetOpen"?: ((value: boolean) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/chat/mobile/shell/shell.vue.d.ts

@@ -50,6 +50,7 @@ type __VLS_Slots = {} & {
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     delete: () => any;
     cancel: () => any;
+    selectConversation: (id: string) => any;
     rename: () => any;
     duplicate: () => any;
     export: () => any;
@@ -76,12 +77,12 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     switchWorkspace: () => any;
     signout: () => any;
     dismissOutdatedBanner: () => any;
-    selectConversation: (id: string) => any;
     "update:drawerOpen": (value: boolean) => any;
     "update:workspaceSheetOpen": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onDelete?: (() => any) | undefined;
     onCancel?: (() => any) | undefined;
+    onSelectConversation?: ((id: string) => any) | undefined;
     onRename?: (() => any) | undefined;
     onDuplicate?: (() => any) | undefined;
     onExport?: (() => any) | undefined;
@@ -108,7 +109,6 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     onSwitchWorkspace?: (() => any) | undefined;
     onSignout?: (() => any) | undefined;
     onDismissOutdatedBanner?: (() => any) | undefined;
-    onSelectConversation?: ((id: string) => any) | undefined;
     "onUpdate:drawerOpen"?: ((value: boolean) => any) | undefined;
     "onUpdate:workspaceSheetOpen"?: ((value: boolean) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -14,5 +14,7 @@ export declare function useConversations(): {
     deleteConversation: (id: string) => Promise<boolean>;
     renameConversation: (id: string, title: string) => Promise<boolean>;
     duplicateConversation: (id: string) => Promise<ConversationWithMessages | null>;
+    conversationCreatorFilter: any;
+    conversationCreatorFilterCounts: any;
     updateConversationInList: (updated: Conversation | DeepReadonly<Conversation>) => void;
 };