@meistrari/chat-nuxt 3.9.1 → 3.10.0

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

@@ -1 +1 @@
-.markstream-vue{color:var(--black-900);font-family:Inter,"Inter Fallback: Arial",sans-serif;font-size:16px;font-weight:400;letter-spacing:-.15px;line-height:24px}.markstream-vue code,.markstream-vue kbd,.markstream-vue pre,.markstream-vue samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-size:13px;font-variation-settings:normal;line-height:1.5}.markstream-vue ol,.markstream-vue ul{margin:8px 0;padding-left:1.5em}.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{margin:0}.markstream-vue .heading-1,.markstream-vue h1{font-family:Inter,"Inter Fallback: Arial",sans-serif;font-size:32px;font-weight:580;letter-spacing:-1px;line-height:36px;margin:24px 0 16px}.markstream-vue .heading-2,.markstream-vue h2{font-family:Inter,"Inter Fallback: Arial",sans-serif;font-size:24px;font-weight:580;letter-spacing:-.8px;line-height:28px;margin:20px 0 12px}.markstream-vue .heading-3,.markstream-vue h3{font-family:Inter,"Inter Fallback: Arial",sans-serif;font-size:20px;font-weight:580;letter-spacing:-.5px;line-height:24px;margin:16px 0 8px}.markstream-vue .heading-4,.markstream-vue h4{font-family:Inter,"Inter Fallback: Arial",sans-serif;font-size:16px;font-weight:580;letter-spacing:-.2px;line-height:20px;margin:12px 0 6px}.markstream-vue .heading-5,.markstream-vue h5{font-family:Inter,"Inter Fallback: Arial",sans-serif;font-size:14px;font-weight:580;letter-spacing:-.15px;line-height:16px;margin:8px 0 4px}.markstream-vue .heading-6,.markstream-vue h6{font-family:Inter,"Inter Fallback: Arial",sans-serif;font-size:12px;font-weight:580;letter-spacing:-.1px;line-height:14px;margin:8px 0 4px}.markstream-vue [class*=tooltip],[class*=tooltip-element]{background-color:var(--black-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{color:#171717;font-family:Inter,"Inter Fallback: Arial",sans-serif;font-size:16px;font-weight:400;letter-spacing:-.15px;line-height:24px;--list-item-marker:#a3a3a3}.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;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{font-weight:580}.markstream-vue .list-node.list-node{margin-bottom:8px;margin-left:4px;margin-top:8px;padding-left:1em}.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{margin:0}.markstream-vue .my-8{margin-bottom:8px;margin-top:8px}.markstream-vue .heading-node.heading-1,.markstream-vue h1{font-size:24px;font-weight:540;letter-spacing:-.8px;line-height:28px;margin:24px 0 16px}.markstream-vue .heading-node.heading-2,.markstream-vue h2{font-size:20px;font-weight:540;letter-spacing:-.5px;line-height:24px;margin:20px 0 12px}.markstream-vue .heading-node.heading-3,.markstream-vue h3{font-size:20px;font-weight:540;letter-spacing:-.5px;line-height:24px;margin:16px 0 8px}.markstream-vue .heading-node.heading-4,.markstream-vue h4{font-size:16px;font-weight:540;letter-spacing:-.2px;line-height:20px;margin:12px 0 6px}.markstream-vue .heading-node.heading-5,.markstream-vue h5{font-size:14px;font-weight:540;letter-spacing:-.15px;line-height:16px;margin:8px 0 4px}.markstream-vue .heading-node.heading-6,.markstream-vue h6{font-size:12px;font-weight:540;letter-spacing:-.1px;line-height:14px;margin:8px 0 4px}.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}

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

@@ -1,17 +1,12 @@
 <script setup>
-import { nextTick } from "vue";
 import { useConversations } from "../composables/conversations";
 import { conversationCreatorFilterOptions } from "../../types/schemas/chat/ui.js";
-import {
-  hasConversationCreatorFilterResults,
-  resolveConversationCreatorFilterKeyboardTarget
-} from "../creator-filter";
+import { hasConversationCreatorFilterResults } from "../creator-filter";
 const { conversationCreatorFilter, conversationCreatorFilterCounts, fetchConversations } = useConversations();
 const isUpdating = ref(false);
-const filterButtonElements = ref([]);
 const filterOptions = computed(() => conversationCreatorFilterOptions.map((option) => ({
-  ...option,
-  count: conversationCreatorFilterCounts.value[option.value]
+  value: option.value,
+  label: `${option.label} ${conversationCreatorFilterCounts.value[option.value]}`
 })));
 const showConversationCreatorFilter = computed(
   () => hasConversationCreatorFilterResults(conversationCreatorFilterCounts.value)
@@ -19,23 +14,10 @@ const showConversationCreatorFilter = computed(
 function isConversationCreatorFilter(value) {
   return value === "all" || value === "mine";
 }
-function setFilterButtonElement(element, index) {
-  if (element && typeof element === "object" && "focus" in element) {
-    filterButtonElements.value[index] = element;
-  }
-}
-function focusFilterButton(value) {
-  const index = filterOptions.value.findIndex((option) => option.value === value);
-  filterButtonElements.value[index]?.focus();
-}
-async function handleFilterUpdate(value, options = {}) {
+async function handleFilterUpdate(value) {
   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 });
@@ -43,54 +25,16 @@ async function handleFilterUpdate(value, options = {}) {
     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
+    <TelaSegmentToggle
         v-if="showConversationCreatorFilter"
-        role="tablist"
+        :model-value="conversationCreatorFilter"
+        :options="filterOptions"
+        class="w-full"
+        buttons-class="flex-1 min-w-0 px-8px"
         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>
+        @update:model-value="handleFilterUpdate"
+    />
 </template>
-
-<style scoped>
-.creator-filter-option{transition:background-color .16s ease,color .16s ease,box-shadow .16s ease,opacity .16s ease}.creator-filter-option-active{box-shadow:0 1px 2px rgba(16,24,40,.08),0 2px 8px rgba(16,24,40,.1)}.creator-filter-option[aria-disabled=true]{cursor:wait}
-</style>

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

@@ -1,9 +1,10 @@
-import type { DeepReadonly } from 'vue';
+import type { DeepReadonly, HTMLAttributes } from 'vue';
 import type { Conversation } from '../../types/schemas/chat/conversations.js';
 type __VLS_Props = {
     conversation: DeepReadonly<Conversation>;
     active: boolean;
     draggable?: boolean;
+    itemClass?: HTMLAttributes['class'];
     userImage?: string;
     selectConversation?: (id: string) => void | Promise<void>;
 };

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

@@ -4,6 +4,7 @@ const props = defineProps({
   conversation: { type: null, required: true },
   active: { type: Boolean, required: true },
   draggable: { type: Boolean, required: false },
+  itemClass: { type: null, required: false },
   userImage: { type: String, required: false },
   selectConversation: { type: Function, required: false }
 });
@@ -39,26 +40,21 @@ function setMenuButtonRef(element) {
 <template>
     <div
         v-if="isRenamingInline"
-        px-12px
+        pl-10px pr-4px
         h-32px
-        rounded-8px
-        :class="active ? 'bg-neutral-200' : ''"
+        rounded-10px
+        :class="active ? 'bg-muted' : ''"
     >
-        <div flex items-center justify-between gap-12px h-full>
-            <div v-if="userImage" w-16px h-16px rounded-full overflow-hidden flex-shrink-0>
+        <div flex items-center justify-between gap-8px h-full :class="props.itemClass">
+            <div v-if="userImage" w-16px h-16px flex items-center justify-center rounded-full overflow-hidden flex-shrink-0>
                 <TelaAvatar
                     :image="userImage"
                     alt="Usuário"
-                    size="xs"
+                    size="2xs"
                 />
             </div>
 
-            <div
-                flex-1 min-w-0 flex items-center
-                text-neutral-700
-                pb-1px
-                b-b=".5px solid #A3A3A3"
-            >
+            <div relative flex-1 min-w-0 flex items-center>
                 <input
                     :ref="setRenameInputRef"
                     v-model="renameTitle"
@@ -67,12 +63,13 @@ function setMenuButtonRef(element) {
                     aria-label="Nome da conversa"
                     w-full min-w-0
                     bg-transparent border-none outline-none
-                    text-14px font-medium text-neutral-700 leading-18px tracking="-.15px"
+                    body-14-medium text-neutral-700
                     p-0
                     @blur="handleRenameBlur"
                     @keydown.enter.prevent="submitRename"
                     @keydown.escape.prevent.stop="cancelRename"
                 >
+                <div aria-hidden="true" absolute inset-x-0 bottom--0.5px h-0.5px bg-border pointer-events-none />
             </div>
         </div>
     </div>
@@ -82,37 +79,33 @@ function setMenuButtonRef(element) {
         :href="conversationPath"
         :draggable="draggable"
         block
-        px-12px
+        pl-10px pr-4px
         h-32px
-        rounded-8px
+        rounded-10px
         cursor-pointer
-        transition
-        class="group"
-        :class="[
-  active ? 'bg-neutral-200' : 'hover:bg-neutral-200/50'
-]"
+        class="group data-[active=true]:bg-muted data-[active=false]:hover:bg-subtle"
+        :data-active="active"
         @click="handleConversationClick"
         @dblclick.prevent.stop="handleConversationDoubleClick"
         @dragstart="handleConversationDragStart"
         @dragend="handleConversationDragEnd"
     >
-        <div flex items-center justify-between gap-12px h-full>
+        <div flex items-center justify-between gap-8px h-full :class="props.itemClass">
             <!-- User Avatar -->
-            <div v-if="userImage" w-16px h-16px rounded-full overflow-hidden flex-shrink-0>
+            <div v-if="userImage" w-16px h-16px flex items-center justify-center rounded-full overflow-hidden flex-shrink-0>
                 <TelaAvatar
                     :image="userImage"
                     alt="Usuário"
-                    size="xs"
+                    size="2xs"
                 />
             </div>
 
             <div flex-1 min-w-0 flex items-center>
                 <span
-                    text-14px
-                    font-medium
-                    text-neutral-700
+                    body-14-medium
+                    text-secondary
+                    class="group-hover:text-primary group-data-[active=true]:text-primary"
                     truncate
-                    tracking="-.15px"
                 >
                     {{ displayTitle }}
                 </span>
@@ -122,21 +115,24 @@ function setMenuButtonRef(element) {
                 mt-2px
                 flex
                 items-center
-                class="opacity-0 group-hover:opacity-100 transition-opacity"
+                class="opacity-0 group-hover:opacity-100"
                 :class="isMenuOpen && 'opacity-100'"
             >
                 <TelaDropdownMenu :items="menuItems" content-class="chat-sidebar-floating">
                     <button
                         :ref="setMenuButtonRef"
                         p-4px
-                        rounded-6px
-                        hover:bg-neutral-300
-                        transition-colors
+                        rounded-8px
+                        hover:bg-lowered
                         cursor-pointer
-                        :class="isMenuOpen && '!bg-neutral-300'"
+                        :class="isMenuOpen && '!bg-lowered'"
                         @click.prevent.stop
                     >
-                        <div i-ph-dots-three-vertical text-16px text-neutral-400 />
+                        <TelaIcon
+                            name="i-ph-dots-three"
+                            size="18px"
+                            :color="isMenuOpen ? 'icon-tertiary' : 'icon-subtle group-hover:icon-tertiary'"
+                        />
                     </button>
                 </TelaDropdownMenu>
             </div>

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

@@ -1,9 +1,10 @@
-import type { DeepReadonly } from 'vue';
+import type { DeepReadonly, HTMLAttributes } from 'vue';
 import type { Conversation } from '../../types/schemas/chat/conversations.js';
 type __VLS_Props = {
     conversation: DeepReadonly<Conversation>;
     active: boolean;
     draggable?: boolean;
+    itemClass?: HTMLAttributes['class'];
     userImage?: string;
     selectConversation?: (id: string) => void | Promise<void>;
 };

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

@@ -8,7 +8,6 @@ type __VLS_Props = {
     resetConversation?: () => void | Promise<void>;
     startConversation?: (groupId?: string | null) => void | Promise<void>;
     loading?: boolean;
-    hideFolderHint?: 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;