@meistrari/chat-nuxt 1.0.0

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

@@ -0,0 +1,184 @@
+<script setup>
+import { useMagicKeys, useMutationObserver } from "@vueuse/core";
+import { capitalizeFirst } from "../../utils/string";
+const props = defineProps({
+  conversation: { type: null, required: true },
+  active: { type: Boolean, required: true },
+  userImage: { type: String, required: false }
+});
+const emit = defineEmits(["delete", "rename", "duplicate", "export"]);
+const isEditing = ref(false);
+const editTitle = ref("");
+const inputRef = ref(null);
+const justStartedEditing = ref(false);
+const showDeleteModal = ref(false);
+const { escape } = useMagicKeys();
+watch(() => escape?.value, (pressed) => {
+  if (pressed && showDeleteModal.value) {
+    showDeleteModal.value = false;
+  }
+});
+function confirmDelete() {
+  showDeleteModal.value = false;
+  emit("delete", props.conversation.id);
+}
+const menuButtonRef = ref(null);
+const isMenuOpen = ref(false);
+useMutationObserver(menuButtonRef, (mutations) => {
+  for (const mutation of mutations) {
+    if (mutation.attributeName === "data-state") {
+      isMenuOpen.value = menuButtonRef.value?.getAttribute("data-state") === "open";
+    }
+  }
+}, { attributes: true });
+function startEditing() {
+  editTitle.value = props.conversation.title;
+  isEditing.value = true;
+  justStartedEditing.value = true;
+  nextTick(() => {
+    inputRef.value?.focus();
+    inputRef.value?.select();
+    setTimeout(() => {
+      justStartedEditing.value = false;
+    }, 100);
+  });
+}
+function saveTitle() {
+  if (justStartedEditing.value) {
+    return;
+  }
+  const trimmed = editTitle.value.trim();
+  if (trimmed && trimmed !== props.conversation.title) {
+    emit("rename", props.conversation.id, trimmed);
+  }
+  isEditing.value = false;
+  justStartedEditing.value = false;
+}
+function cancelEditing() {
+  isEditing.value = false;
+  editTitle.value = "";
+  justStartedEditing.value = false;
+}
+function handleKeydown(event) {
+  if (event.key === "Enter") {
+    event.preventDefault();
+    saveTitle();
+  } else if (event.key === "Escape") {
+    event.preventDefault();
+    cancelEditing();
+  }
+}
+const menuItems = [
+  {
+    label: "Renomear",
+    icon: "i-ph-pencil-simple",
+    click: () => startEditing()
+  },
+  {
+    label: "Duplicar",
+    icon: "i-ph-copy",
+    click: () => emit("duplicate", props.conversation.id)
+  },
+  {
+    label: "Exportar",
+    icon: "i-ph-download-simple",
+    click: () => emit("export", props.conversation.id)
+  },
+  {
+    label: "Excluir",
+    icon: "i-ph-trash",
+    color: "negative",
+    click: () => showDeleteModal.value = true
+  }
+];
+</script>
+
+<template>
+    <NuxtLink
+        :to="`/${conversation.id}`"
+        block
+        px-12px
+        h-32px
+        rounded-8px
+        cursor-pointer
+        transition
+        class="group"
+        :class="[
+  active ? 'bg-neutral-200' : 'hover:bg-neutral-200/50'
+]"
+    >
+        <div flex items-center justify-between gap-12px h-full>
+            <!-- User Avatar -->
+            <div v-if="userImage" w-16px h-16px rounded-full overflow-hidden flex-shrink-0>
+                <TelaAvatar
+                    :image="userImage"
+                    alt="Usuário"
+                    size="xs"
+                />
+            </div>
+
+            <div flex-1 min-w-0 flex items-center>
+                <input
+                    v-if="isEditing"
+                    ref="inputRef"
+                    v-model="editTitle"
+                    type="text"
+                    text-14px
+                    font-medium
+                    text-neutral-700
+                    w-full
+                    bg-white
+                    border
+                    border-neutral-300
+                    rounded-4px
+                    px-6px
+                    py-2px
+                    outline-none
+                    focus:border-neutral-400
+                    @keydown="handleKeydown"
+                    @blur="saveTitle"
+                    @click.prevent.stop
+                >
+                <span
+                    v-else
+                    text-14px
+                    font-medium
+                    text-neutral-700
+                    truncate
+                    tracking="-.15px"
+                >
+                    {{ capitalizeFirst(conversation.title) }}
+                </span>
+            </div>
+
+            <div v-if="!isEditing" mt-2px flex items-center opacity-0 group-hover:opacity-100 transition-opacity :class="isMenuOpen && 'opacity-100'">
+                <TelaDropdownMenu :items="menuItems">
+                    <button
+                        ref="menuButtonRef"
+                        p-4px
+                        rounded-6px
+                        hover:bg-neutral-300
+                        transition-colors
+                        cursor-pointer
+                        :class="isMenuOpen && '!bg-neutral-300'"
+                        @click.prevent.stop
+                    >
+                        <div i-ph-dots-three-vertical text-16px text-neutral-400 />
+                    </button>
+                </TelaDropdownMenu>
+            </div>
+        </div>
+    </NuxtLink>
+
+    <TelaConfirmationModal
+        v-model:open="showDeleteModal"
+        title="Excluir conversa"
+        variant="danger"
+        confirm-button-text="Excluir"
+        cancel-button-text="Cancelar"
+        @confirm="confirmDelete"
+        @cancel="showDeleteModal = false"
+    >
+        Tem certeza que deseja excluir esta conversa? Esta ação não pode ser desfeita.
+    </TelaConfirmationModal>
+</template>

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

@@ -0,0 +1,20 @@
+import type { Conversation } from '../../types/chat.js';
+import type { DeepReadonly } from 'vue';
+type __VLS_Props = {
+    conversation: DeepReadonly<Conversation>;
+    active: boolean;
+    userImage?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    rename: (id: string, title: string) => any;
+    duplicate: (id: string) => any;
+    export: (id: string) => any;
+    delete: (id: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onRename?: ((id: string, title: string) => any) | undefined;
+    onDuplicate?: ((id: string) => any) | undefined;
+    onExport?: ((id: string) => any) | undefined;
+    onDelete?: ((id: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,10 @@
+import type { DeepReadonly } from 'vue';
+import type { Conversation } from '../../types/chat.js';
+type __VLS_Props = {
+    conversations: DeepReadonly<Conversation[]>;
+    currentId?: string;
+    getMemberImage?: (userId: string) => string | undefined;
+};
+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;
+export default _default;

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

@@ -0,0 +1,78 @@
+<script setup>
+import { groupConversationsByDate } from "../../utils/format-time";
+import { exportConversationToMarkdown } from "../../utils/export-conversation";
+const props = defineProps({
+  conversations: { type: null, required: true },
+  currentId: { type: String, required: false },
+  getMemberImage: { type: Function, required: false }
+});
+const chatApi = useChatApi();
+const { deleteConversation, renameConversation, duplicateConversation } = useConversations();
+const router = useRouter();
+const groupedConversations = computed(() => {
+  return groupConversationsByDate(props.conversations);
+});
+function handleDelete(id) {
+  const route = useRoute();
+  if (route.params.id === id) {
+    router.push("/");
+  }
+  deleteConversation(id);
+}
+async function handleRename(id, title) {
+  await renameConversation(id, title);
+}
+async function handleDuplicate(id) {
+  const duplicated = await duplicateConversation(id);
+  if (duplicated) {
+    router.push(`/${duplicated.id}`);
+  }
+}
+async function handleExport(id) {
+  try {
+    const conversation = await $fetch(
+      chatApi.path(`/conversations/${id}`),
+      chatApi.withChatHeaders()
+    );
+    exportConversationToMarkdown(conversation);
+  } catch (err) {
+    console.error("Failed to export conversation:", err);
+  }
+}
+</script>
+
+<template>
+    <div flex="~ col" gap-16px>
+        <div v-if="conversations.length === 0" p-16px text-center>
+            <p text-14px text-neutral-400>
+                Nenhuma conversa ainda
+            </p>
+        </div>
+
+        <template v-else>
+            <div v-for="group in groupedConversations" :key="group.title" flex="~ col" gap-4px>
+                <!-- Section Header -->
+                <div h-20px flex items-center pl-12px pr-4px mb-4px>
+                    <span text-12px font-medium text-neutral-400>
+                        {{ group.title }}
+                    </span>
+                </div>
+
+                <!-- Conversation Items -->
+                <div flex="~ col" gap-1px>
+                    <ChatConversationItem
+                        v-for="conversation in group.items"
+                        :key="conversation.id"
+                        :conversation="conversation"
+                        :active="conversation.id === currentId"
+                        :user-image="getMemberImage?.(conversation.userId)"
+                        @delete="handleDelete"
+                        @rename="handleRename"
+                        @duplicate="handleDuplicate"
+                        @export="handleExport"
+                    />
+                </div>
+            </div>
+        </template>
+    </div>
+</template>

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

@@ -0,0 +1,10 @@
+import type { DeepReadonly } from 'vue';
+import type { Conversation } from '../../types/chat.js';
+type __VLS_Props = {
+    conversations: DeepReadonly<Conversation[]>;
+    currentId?: string;
+    getMemberImage?: (userId: string) => string | undefined;
+};
+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;
+export default _default;

package/dist/runtime/components/chat/doc-sdk-widget.d.vue.ts

@@ -0,0 +1,9 @@
+import type { ToolUse, ToolResult } from '../../types/reasoning.js';
+type __VLS_Props = {
+    toolUse: ToolUse;
+    toolResult?: ToolResult;
+    isActive?: 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;
+export default _default;

package/dist/runtime/components/chat/doc-sdk-widget.vue

@@ -0,0 +1,74 @@
+<script setup>
+import { isCodeLike } from "../../utils/code-detection";
+const props = defineProps({
+  toolUse: { type: Object, required: true },
+  toolResult: { type: Object, required: false },
+  isActive: { type: Boolean, required: false }
+});
+const skillName = computed(() => {
+  const skill = props.toolUse.input?.skill;
+  return typeof skill === "string" ? skill : "doc-sdk";
+});
+const statusVariant = computed(() => {
+  if (props.toolResult) {
+    return props.toolResult.isError ? "error" : "completed";
+  }
+  return "processing";
+});
+const statusLabel = computed(() => {
+  if (props.toolResult) {
+    return props.toolResult.isError ? "Erro" : "Conclu\xEDdo";
+  }
+  return "Processando...";
+});
+const isOutputCode = computed(() => {
+  if (!props.toolResult?.output)
+    return false;
+  return isCodeLike(props.toolResult.output);
+});
+</script>
+
+<template>
+    <div class="bg-subtle rounded-16px border border-gray-200">
+        <!-- Header -->
+        <div class="px-24px py-24px flex items-center justify-between">
+            <h3 class="text-20px font-580 leading-24px tracking-[-0.5px] text-primary">
+                {{ skillName }}
+            </h3>
+            <TelaStatus :variant="statusVariant" :label="statusLabel" />
+        </div>
+
+        <!-- Content -->
+        <div v-if="toolResult" class="px-24px pb-24px space-y-16px">
+            <!-- Result -->
+            <div>
+                <div class="text-14px font-580 leading-16px tracking-[-0.15px] text-gray-700 mb-2">
+                    Resultado
+                </div>
+                <div
+                    v-if="isOutputCode"
+                    class="bg-[#1e1e1e] rounded-8px p-12px overflow-auto max-h-200px"
+                >
+                    <pre class="font-mono text-12px text-gray-300 whitespace-pre-wrap break-words m-0"><code>{{ toolResult.output }}</code></pre>
+                </div>
+                <div
+                    v-else-if="!toolResult.output || toolResult.output.trim().length === 0"
+                    class="bg-white rounded-xl border-0.5px border-gray-200 px-3 py-2"
+                >
+                    <p class="text-14px text-tertiary m-0">
+                        Nenhum resultado disponível
+                    </p>
+                </div>
+                <div
+                    v-else
+                    class="bg-white rounded-xl border-0.5px border-gray-200 px-3 py-2"
+                    :class="toolResult.isError ? 'text-red-600' : 'text-primary'"
+                >
+                    <p class="text-14px whitespace-pre-wrap break-words m-0">
+                        {{ toolResult.output }}
+                    </p>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>

package/dist/runtime/components/chat/doc-sdk-widget.vue.d.ts

@@ -0,0 +1,9 @@
+import type { ToolUse, ToolResult } from '../../types/reasoning.js';
+type __VLS_Props = {
+    toolUse: ToolUse;
+    toolResult?: ToolResult;
+    isActive?: 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;
+export default _default;

package/dist/runtime/components/chat/file-preview.d.vue.ts

@@ -0,0 +1,7 @@
+import type { DetectedFile } from '../../utils/file.js';
+type __VLS_Props = {
+    file: DetectedFile;
+};
+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;
+export default _default;