@meistrari/chat-nuxt 1.13.0 → 2.0.0

package/dist/runtime/conversations/components/chat-new-conversation-modal.vue

@@ -0,0 +1,272 @@
+<script setup>
+import { useMagicKeys } from "@vueuse/core";
+import { useTela } from "../../shared/composables/tela";
+const emit = defineEmits(["create"]);
+const isOpen = defineModel({ type: Boolean });
+const { escape } = useMagicKeys();
+watch(() => escape?.value, (pressed) => {
+  if (pressed && isOpen.value) {
+    isOpen.value = false;
+  }
+});
+const { canvas, projects, loading } = useTela();
+const selectedCanvas = ref(/* @__PURE__ */ new Map());
+const searchQuery = ref("");
+const hasSelection = computed(() => selectedCanvas.value.size > 0);
+const filteredCanvas = computed(() => {
+  const query = searchQuery.value.toLowerCase().trim();
+  const matchingProjects = query ? projects.value.filter((p) => p.title.toLowerCase().includes(query)) : [];
+  const matchingProjectIds = new Set(matchingProjects.map((p) => p.id));
+  return query ? canvas.value.filter(
+    (c) => c.title.toLowerCase().includes(query) || matchingProjectIds.has(c.projectId)
+  ) : canvas.value;
+});
+const groupedByProject = computed(() => {
+  const canvasList = filteredCanvas.value;
+  const groups = /* @__PURE__ */ new Map();
+  for (const c of canvasList) {
+    const key = c.projectId;
+    if (!groups.has(key)) {
+      groups.set(key, []);
+    }
+    groups.get(key).push(c);
+  }
+  const result = [];
+  for (const project of projects.value) {
+    const projectCanvas = groups.get(project.id);
+    if (projectCanvas?.length) {
+      result.push({ project, canvas: projectCanvas });
+    }
+  }
+  const orphanCanvas = canvasList.filter(
+    (c) => !projects.value.some((p) => p.id === c.projectId)
+  );
+  if (orphanCanvas.length)
+    result.push({ project: null, canvas: orphanCanvas });
+  return result;
+});
+function toggleCanvas(canvasId) {
+  if (selectedCanvas.value.has(canvasId))
+    selectedCanvas.value.delete(canvasId);
+  else
+    selectedCanvas.value.set(canvasId, { description: "" });
+  selectedCanvas.value = new Map(selectedCanvas.value);
+}
+function updateDescription(canvasId, description) {
+  const current = selectedCanvas.value.get(canvasId);
+  if (current) {
+    selectedCanvas.value.set(canvasId, { description });
+    selectedCanvas.value = new Map(selectedCanvas.value);
+  }
+}
+function transformVariables(variables) {
+  if (!variables?.length)
+    return void 0;
+  return variables.reduce((acc, v) => {
+    acc[v.name] = {
+      name: v.name,
+      description: v.description ?? v.name,
+      type: v.type
+    };
+    return acc;
+  }, {});
+}
+function handleCreate() {
+  const tools = [];
+  for (const [canvasId, data] of selectedCanvas.value) {
+    const item = canvas.value.find((c) => c.id === canvasId);
+    if (!item)
+      continue;
+    const name = item.title.toLowerCase().replace(/[^a-z0-9]+/g, "_").replace(/^_|_$/g, "");
+    tools.push({
+      canvasId,
+      name,
+      description: data.description.trim() || item.title,
+      variables: transformVariables(item.promotedVersion?.variables)
+    });
+  }
+  emit("create", tools);
+  isOpen.value = false;
+}
+function handleClose() {
+  selectedCanvas.value = /* @__PURE__ */ new Map();
+  searchQuery.value = "";
+}
+</script>
+
+<template>
+    <TelaModal v-model="isOpen" title="Nova conversa" modal-width="lg" compact class="!min-w-900px" @close="handleClose">
+        <template #content>
+            <div w-full flex="~ col" max-h-500px>
+                <div flex-1 overflow-y-auto px-32px mt-16px>
+                    <TelaCollapsibleSection
+                        :default-open="false"
+                    >
+                        <template #trigger="{ isOpen: isSectionOpen }">
+                            <TelaCollapsibleTrigger w-full>
+                                <div
+                                    w-full flex items-center justify-between
+                                    py-10px px-12px rounded-8px cursor-pointer
+                                    mb-8px
+                                    border="0.5px solid gray-200"
+                                    hover:bg-gray-50
+                                    transition
+                                >
+                                    <div flex items-center gap-8px>
+                                        <span text-14px font-medium text-gray-700 h-full>
+                                            Tela Tools
+                                        </span>
+                                        <TelaIcon name="i-ph-wrench-bold" size="16px" text-gray-500 h-full />
+                                    </div>
+                                    <div
+                                        i-ph-caret-down text-14px text-gray-400
+                                        transition-transform
+                                        :class="isSectionOpen && 'rotate-180'"
+                                    />
+                                </div>
+                            </TelaCollapsibleTrigger>
+                        </template>
+
+                        <div flex="~ col" gap-16px border="0.5px solid gray-200" rounded-8px p-16px>
+                            <p text-14px text-gray-400>
+                                Você pode selecionar um canvas ou workflow do seu workspace para utilizar na conversa
+                            </p>
+
+                            <div mb-16px>
+                                <div relative>
+                                    <div absolute left-12px top="50%" translate-y="-50%" i-ph-magnifying-glass text-16px text-gray-400 />
+                                    <input
+                                        v-model="searchQuery"
+                                        type="text"
+                                        placeholder="Buscar projetos ou canvas..."
+                                        w-full pl-40px pr-12px py-10px rounded-8px
+                                        b="0.5px solid gray-200" text-14px
+                                        focus:outline-none focus:b-blue-400
+                                    >
+                                </div>
+                            </div>
+                            <div v-if="loading" flex items-center justify-center py-32px>
+                                <div i-ph-spinner animate-spin text-24px text-gray-400 />
+                            </div>
+
+                            <div v-else-if="filteredCanvas.length === 0" text-center py-32px text-gray-400>
+                                {{ canvas.length === 0 ? "Nenhum canvas dispon\xEDvel" : "Nenhum resultado encontrado" }}
+                            </div>
+                            <template v-else-if="groupedByProject.length > 0">
+                                <div v-for="group in groupedByProject" :key="group.project?.id ?? 'orphan'">
+                                    <div flex items-center gap-8px mb-12px>
+                                        <div i-ph-folder text-16px text-gray-400 />
+                                        <span text-14px font-medium text-gray-600>
+                                            {{ group.project?.title ?? "Sem projeto" }}
+                                        </span>
+                                        <span text-12px text-gray-400>
+                                            ({{ group.canvas.length }})
+                                        </span>
+                                    </div>
+
+                                    <div flex="~ col" gap-8px pl-24px>
+                                        <div
+                                            v-for="item in group.canvas"
+                                            :key="item.id"
+                                            rounded-10px p-12px
+                                            b="0.5px solid"
+                                            transition
+                                            :class="[
+  !item.promotedVersion ? 'bg-gray-20 b-gray-120 opacity-50 cursor-not-allowed' : selectedCanvas.has(item.id) ? 'bg-blue-50 b-blue-200 cursor-pointer' : 'bg-gray-20 b-gray-120 hover:bg-gray-100 cursor-pointer'
+]"
+                                            @click="item.promotedVersion && toggleCanvas(item.id)"
+                                        >
+                                            <div flex items-start gap-10px>
+                                                <div
+                                                    w-18px h-18px rounded-4px
+                                                    b="0.5px solid"
+                                                    flex items-center justify-center flex-shrink-0 mt-1px
+                                                    :class="[
+  selectedCanvas.has(item.id) ? 'bg-blue-500 b-blue-500' : 'bg-white b-gray-300'
+]"
+                                                >
+                                                    <div
+                                                        v-if="selectedCanvas.has(item.id)"
+                                                        i-ph-check text-11px text-white
+                                                    />
+                                                </div>
+
+                                                <div flex-1 min-w-0>
+                                                    <div flex items-center gap-6px>
+                                                        <span
+                                                            body-14-regular text-gray-700 truncate
+                                                            class="leading-[1.25] w-[300px] max-w-[400px]"
+                                                        >
+                                                            {{ item.title }}
+                                                        </span>
+                                                        <div
+                                                            inline-block px-5px rounded-5px select-none
+                                                            b="0.5px solid gray-300"
+                                                        >
+                                                            <span
+                                                                flex items-center gap-4px text-9px whitespace-nowrap
+                                                                font-400 leading-16px tracking-wider uppercase text-gray-400
+                                                            >
+                                                                {{ !item.promotedVersion ? "N\xE3o publicado" : item.promotedVersion.workflowSpec ? "Workflow" : "Canvas" }}
+                                                            </span>
+                                                        </div>
+                                                    </div>
+
+                                                    <div
+                                                        v-if="item.promotedVersion?.variables?.length"
+                                                        mt-6px flex flex-wrap gap-4px
+                                                    >
+                                                        <span
+                                                            v-for="v in item.promotedVersion.variables"
+                                                            :key="v.name"
+                                                            text-10px bg-gray-200 text-gray-500 px-5px py-1px rounded-3px
+                                                        >
+                                                            {{ v.name }}
+                                                        </span>
+                                                    </div>
+
+                                                    <div
+                                                        v-if="selectedCanvas.has(item.id)"
+                                                        mt-10px
+                                                        @click.stop
+                                                    >
+                                                        <label text-11px text-gray-500 mb-3px block>
+                                                            Descrição (opcional)
+                                                        </label>
+                                                        <input
+                                                            type="text"
+                                                            :value="selectedCanvas.get(item.id)?.description"
+                                                            :placeholder="item.title"
+                                                            w-full px-10px py-6px rounded-6px
+                                                            b="0.5px solid gray-200" text-13px
+                                                            focus:outline-none focus:b-blue-400
+                                                            @input="(e) => updateDescription(item.id, e.target.value)"
+                                                        >
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </template>
+                            <div v-else text-center py-32px text-gray-400>
+                                Nenhum resultado encontrado
+                            </div>
+                        </div>
+                    </TelaCollapsibleSection>
+                </div>
+            </div>
+        </template>
+
+        <template #footer>
+            <div w-full flex justify-end gap-12px>
+                <TelaButton variant="secondary" @click="isOpen = false">
+                    Cancelar
+                </TelaButton>
+                <TelaButton @click="handleCreate">
+                    {{ hasSelection ? `Criar com ${selectedCanvas.size} tool(s)` : "Criar conversa" }}
+                </TelaButton>
+            </div>
+        </template>
+    </TelaModal>
+</template>

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

@@ -0,0 +1,13 @@
+type __VLS_ModelProps = {
+    modelValue?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean | undefined) => any;
+} & {
+    create: (canvasTools: CanvasTool[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean | undefined) => any) | undefined;
+    onCreate?: ((canvasTools: CanvasTool[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/conversations/composables/conversation-groups.d.ts

@@ -0,0 +1,12 @@
+import type { ConversationGroup } from '../../types/schemas/chat/conversations.js';
+export declare function useConversationGroups(): {
+    groups: any;
+    loading: any;
+    error: any;
+    fetchGroups: (options?: {
+        force?: boolean;
+    }) => Promise<void>;
+    createGroup: (name: string) => Promise<ConversationGroup | null>;
+    renameGroup: (groupId: string, name: string) => Promise<boolean>;
+    deleteGroup: (groupId: string) => Promise<boolean>;
+};

package/dist/runtime/conversations/composables/conversation-groups.js

@@ -0,0 +1,163 @@
+import { useChatAuth } from "#chat-auth";
+import * as Sentry from "@sentry/nuxt";
+import { resolveChatStateScope } from "../scope.js";
+import { useChatApi } from "../../shared/composables/chat-api.js";
+import { useConversations } from "./conversations.js";
+import { useEmbedConfig } from "../../embed/composables/embed-config.js";
+function sortConversationGroups(groups) {
+  return [...groups].sort((a, b) => {
+    const createdDelta = new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime();
+    if (createdDelta !== 0)
+      return createdDelta;
+    return a.name.localeCompare(b.name);
+  });
+}
+export function useConversationGroups() {
+  const chatApi = useChatApi();
+  const embedConfig = useEmbedConfig();
+  const { activeOrganization } = useChatAuth();
+  const groupBuckets = useState("conversation-groups", () => ({}));
+  const loadingBuckets = useState("conversation-groups-loading", () => ({}));
+  const fetchedBuckets = useState("conversation-groups-fetched", () => ({}));
+  const errorBuckets = useState("conversation-groups-error", () => ({}));
+  const runtimeScope = computed(() => resolveChatStateScope(
+    embedConfig?.workspaceId.value || activeOrganization.value?.id,
+    embedConfig?.telaAgentId.value,
+    embedConfig?.conversationScope?.value
+  ));
+  const groups = computed({
+    get: () => groupBuckets.value[runtimeScope.value] ?? [],
+    set: (value) => {
+      groupBuckets.value = {
+        ...groupBuckets.value,
+        [runtimeScope.value]: sortConversationGroups(value)
+      };
+    }
+  });
+  const loading = computed({
+    get: () => loadingBuckets.value[runtimeScope.value] ?? false,
+    set: (value) => {
+      loadingBuckets.value = {
+        ...loadingBuckets.value,
+        [runtimeScope.value]: value
+      };
+    }
+  });
+  const error = computed({
+    get: () => errorBuckets.value[runtimeScope.value] ?? null,
+    set: (value) => {
+      errorBuckets.value = {
+        ...errorBuckets.value,
+        [runtimeScope.value]: value
+      };
+    }
+  });
+  function setFetched(value) {
+    fetchedBuckets.value = {
+      ...fetchedBuckets.value,
+      [runtimeScope.value]: value
+    };
+  }
+  function upsertGroup(group) {
+    groups.value = [
+      group,
+      ...groups.value.filter((item) => item.id !== group.id)
+    ];
+  }
+  function removeGroup(groupId) {
+    groups.value = groups.value.filter((group) => group.id !== groupId);
+  }
+  const fetchGroups = async (options = {}) => {
+    if (loading.value || fetchedBuckets.value[runtimeScope.value] && !options.force) {
+      return;
+    }
+    loading.value = true;
+    error.value = null;
+    try {
+      groups.value = await $fetch(
+        chatApi.path("/conversations/groups"),
+        chatApi.withChatHeaders()
+      );
+      setFetched(true);
+    } catch (err) {
+      error.value = err instanceof Error ? err.message : "Erro ao carregar pastas";
+      Sentry.captureException(err);
+    } finally {
+      loading.value = false;
+    }
+  };
+  const createGroup = async (name) => {
+    error.value = null;
+    try {
+      const group = await $fetch(
+        chatApi.path("/conversations/groups"),
+        chatApi.withChatHeaders({
+          method: "POST",
+          body: { name }
+        })
+      );
+      upsertGroup(group);
+      setFetched(true);
+      return group;
+    } catch (err) {
+      error.value = err instanceof Error ? err.message : "Erro ao criar pasta";
+      Sentry.captureException(err);
+      return null;
+    }
+  };
+  const renameGroup = async (groupId, name) => {
+    error.value = null;
+    const previousGroups = groups.value;
+    const group = groups.value.find((item) => item.id === groupId);
+    if (!group)
+      return false;
+    upsertGroup({ ...group, name, updatedAt: /* @__PURE__ */ new Date() });
+    try {
+      const updated = await $fetch(
+        chatApi.path(`/conversations/groups/${groupId}`),
+        chatApi.withChatHeaders({
+          method: "PATCH",
+          body: { name }
+        })
+      );
+      upsertGroup(updated);
+      return true;
+    } catch (err) {
+      groups.value = previousGroups;
+      error.value = err instanceof Error ? err.message : "Erro ao renomear pasta";
+      Sentry.captureException(err);
+      return false;
+    }
+  };
+  const deleteGroup = async (groupId) => {
+    error.value = null;
+    const previousGroups = groups.value;
+    const { clearGroupFromConversations } = useConversations();
+    removeGroup(groupId);
+    const restoreConversations = clearGroupFromConversations(groupId);
+    try {
+      await $fetch(
+        chatApi.path(`/conversations/groups/${groupId}`),
+        chatApi.withChatHeaders({
+          method: "DELETE"
+        })
+      );
+      return true;
+    } catch (err) {
+      groups.value = previousGroups;
+      restoreConversations();
+      error.value = err instanceof Error ? err.message : "Erro ao excluir pasta";
+      Sentry.captureException(err);
+      return false;
+    }
+  };
+  return {
+    groups: readonly(groups),
+    loading: readonly(loading),
+    error: readonly(error),
+    fetchGroups,
+    createGroup,
+    renameGroup,
+    deleteGroup
+  };
+}

package/dist/runtime/conversations/composables/conversation-item.d.ts

@@ -0,0 +1,48 @@
+import type { DeepReadonly } from 'vue';
+import type { Conversation } from '../../types/schemas/chat/conversations.js';
+export type ConversationItemOptions = {
+    conversation: DeepReadonly<Conversation>;
+    active: boolean;
+    draggable?: boolean;
+    userImage?: string;
+    selectConversation?: (id: string) => void | Promise<void>;
+};
+export type ConversationItemEmit = {
+    (e: 'delete', id: string): void;
+    (e: 'rename', id: string, title: string): void;
+    (e: 'duplicate', id: string): void;
+    (e: 'export', id: string): void;
+    (e: 'dragStart', id: string): void;
+    (e: 'dragEnd'): void;
+};
+export declare function useConversationItem(options: ConversationItemOptions, emit: ConversationItemEmit): {
+    isRenamingInline: any;
+    renameTitle: any;
+    renameInputRef: any;
+    showDeleteModal: any;
+    menuButtonRef: any;
+    isMenuOpen: any;
+    conversationPath: any;
+    displayTitle: any;
+    menuItems: ({
+        label: string;
+        icon: string;
+        click: () => void;
+        color?: undefined;
+    } | {
+        label: string;
+        icon: string;
+        color: "negative";
+        click: () => boolean;
+    })[];
+    confirmDelete: () => void;
+    cancelDelete: () => void;
+    handleConversationClick: (event: MouseEvent) => void;
+    startRename: () => void;
+    handleConversationDoubleClick: () => void;
+    handleConversationDragStart: (event: DragEvent) => void;
+    handleConversationDragEnd: () => void;
+    cancelRename: () => void;
+    submitRename: () => void;
+    handleRenameBlur: () => void;
+};

package/dist/runtime/conversations/composables/conversation-item.js

@@ -0,0 +1,176 @@
+import { useMagicKeys, useMutationObserver } from "@vueuse/core";
+import { resolveConversationRenameTitle } from "../title.js";
+import { capitalizeFirst } from "../../shared/string.js";
+const conversationNavigationDelayMs = 250;
+export function useConversationItem(options, emit) {
+  const isRenamingInline = ref(false);
+  const renameTitle = ref("");
+  const renameInputRef = ref(null);
+  const isIgnoringInitialRenameBlur = ref(false);
+  const showDeleteModal = ref(false);
+  const menuButtonRef = ref(null);
+  const isMenuOpen = ref(false);
+  const conversationPath = computed(() => `/${options.conversation.id}`);
+  const displayTitle = computed(() => capitalizeFirst(options.conversation.title));
+  const { escape } = useMagicKeys();
+  let conversationNavigationTimer = null;
+  let renameBlurTimer = null;
+  watch(() => escape?.value, (pressed) => {
+    if (pressed && isRenamingInline.value) {
+      cancelRename();
+    }
+    if (pressed && showDeleteModal.value) {
+      cancelDelete();
+    }
+  });
+  useMutationObserver(menuButtonRef, (mutations) => {
+    for (const mutation of mutations) {
+      if (mutation.attributeName === "data-state") {
+        isMenuOpen.value = menuButtonRef.value?.getAttribute("data-state") === "open";
+      }
+    }
+  }, { attributes: true });
+  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 confirmDelete() {
+    showDeleteModal.value = false;
+    emit("delete", options.conversation.id);
+  }
+  function cancelDelete() {
+    showDeleteModal.value = false;
+  }
+  function handleConversationClick(event) {
+    if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey)
+      return;
+    event.preventDefault();
+    clearPendingConversationNavigation();
+    if (event.detail > 1)
+      return;
+    conversationNavigationTimer = setTimeout(() => {
+      if (options.selectConversation) {
+        void options.selectConversation(options.conversation.id);
+      } else {
+        navigateTo(conversationPath.value);
+      }
+      conversationNavigationTimer = null;
+    }, conversationNavigationDelayMs);
+  }
+  async function focusRenameInput() {
+    await nextTick();
+    renameInputRef.value?.focus();
+    renameInputRef.value?.select();
+    allowRenameBlurSoon();
+  }
+  function startRename() {
+    isMenuOpen.value = false;
+    clearPendingConversationNavigation();
+    clearRenameBlurTimer();
+    renameTitle.value = options.conversation.title;
+    isIgnoringInitialRenameBlur.value = true;
+    isRenamingInline.value = true;
+    void focusRenameInput();
+  }
+  function handleConversationDoubleClick() {
+    clearPendingConversationNavigation();
+    startRename();
+  }
+  function handleConversationDragStart(event) {
+    if (!options.draggable)
+      return;
+    event.dataTransfer?.setData("text/plain", options.conversation.id);
+    if (event.dataTransfer) {
+      event.dataTransfer.effectAllowed = "move";
+    }
+    emit("dragStart", options.conversation.id);
+  }
+  function handleConversationDragEnd() {
+    emit("dragEnd");
+  }
+  function cancelRename() {
+    isRenamingInline.value = false;
+    isIgnoringInitialRenameBlur.value = false;
+    renameTitle.value = "";
+    clearRenameBlurTimer();
+  }
+  function submitRename() {
+    if (!isRenamingInline.value)
+      return;
+    const title = resolveConversationRenameTitle(renameTitle.value, options.conversation.title);
+    if (!title) {
+      cancelRename();
+      return;
+    }
+    emit("rename", options.conversation.id, title);
+    cancelRename();
+  }
+  function handleRenameBlur() {
+    if (isIgnoringInitialRenameBlur.value)
+      return;
+    submitRename();
+  }
+  const menuItems = [
+    {
+      label: "Renomear",
+      icon: "i-ph-pencil-simple",
+      click: () => startRename()
+    },
+    {
+      label: "Duplicar",
+      icon: "i-ph-copy",
+      click: () => emit("duplicate", options.conversation.id)
+    },
+    {
+      label: "Exportar",
+      icon: "i-ph-download-simple",
+      click: () => emit("export", options.conversation.id)
+    },
+    {
+      label: "Excluir",
+      icon: "i-ph-trash",
+      color: "negative",
+      click: () => showDeleteModal.value = true
+    }
+  ];
+  onBeforeUnmount(() => {
+    clearPendingConversationNavigation();
+    clearRenameBlurTimer();
+  });
+  return {
+    isRenamingInline,
+    renameTitle,
+    renameInputRef,
+    showDeleteModal,
+    menuButtonRef,
+    isMenuOpen,
+    conversationPath,
+    displayTitle,
+    menuItems,
+    confirmDelete,
+    cancelDelete,
+    handleConversationClick,
+    startRename,
+    handleConversationDoubleClick,
+    handleConversationDragStart,
+    handleConversationDragEnd,
+    cancelRename,
+    submitRename,
+    handleRenameBlur
+  };
+}