@meistrari/chat-nuxt 1.0.0

package/dist/runtime/composables/useWorkspaceTelaTools.js

@@ -0,0 +1,91 @@
+export function useWorkspaceTelaTools(canvas, projects, searchQuery, currentCanvasTools) {
+  const selectedToolIds = ref(/* @__PURE__ */ new Set());
+  const filteredCanvasTools = computed(() => {
+    if (!searchQuery.value.trim())
+      return canvas.value;
+    const query = searchQuery.value.toLowerCase();
+    const matchingProjectIds = new Set(
+      projects.value.filter((p) => p.title.toLowerCase().includes(query)).map((p) => p.id)
+    );
+    return canvas.value.filter(
+      (c) => c.title.toLowerCase().includes(query) || matchingProjectIds.has(c.projectId)
+    );
+  });
+  const allToolsSelected = computed(() => {
+    const availableTools = filteredCanvasTools.value.filter((c) => c.promotedVersion);
+    if (availableTools.length === 0)
+      return false;
+    return availableTools.every((c) => selectedToolIds.value.has(c.id));
+  });
+  const hasChanges = computed(() => {
+    const currentIds = new Set(currentCanvasTools.value?.map((t) => t.canvasId) ?? []);
+    if (currentIds.size !== selectedToolIds.value.size)
+      return true;
+    for (const id of currentIds) {
+      if (!selectedToolIds.value.has(id))
+        return true;
+    }
+    return false;
+  });
+  function toggleCanvasTool(canvasId) {
+    const newSet = new Set(selectedToolIds.value);
+    if (newSet.has(canvasId))
+      newSet.delete(canvasId);
+    else
+      newSet.add(canvasId);
+    selectedToolIds.value = newSet;
+  }
+  function toggleAllTools(selected) {
+    if (selected === "indeterminate")
+      return;
+    const newSet = new Set(selectedToolIds.value);
+    const availableTools = filteredCanvasTools.value.filter((c) => c.promotedVersion);
+    if (selected)
+      availableTools.forEach((c) => newSet.add(c.id));
+    else
+      availableTools.forEach((c) => newSet.delete(c.id));
+    selectedToolIds.value = newSet;
+  }
+  function getProjectName(projectId) {
+    const project = projects.value.find((p) => p.id === projectId);
+    return project?.title ?? "Sem projeto";
+  }
+  function buildCanvasTools() {
+    const tools = [];
+    for (const canvasId of selectedToolIds.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, "");
+      const variables = item.promotedVersion?.variables?.reduce((acc, v) => {
+        acc[v.name] = {
+          name: v.name,
+          description: v.description ?? v.name,
+          type: v.type
+        };
+        return acc;
+      }, {});
+      tools.push({
+        canvasId,
+        name,
+        description: item.title,
+        variables: variables && Object.keys(variables).length > 0 ? variables : void 0
+      });
+    }
+    return tools;
+  }
+  function initialize() {
+    selectedToolIds.value = new Set(currentCanvasTools.value?.map((t) => t.canvasId) ?? []);
+  }
+  return {
+    selectedToolIds,
+    filteredCanvasTools,
+    allToolsSelected,
+    hasChanges,
+    toggleCanvasTool,
+    toggleAllTools,
+    getProjectName,
+    buildCanvasTools,
+    initialize
+  };
+}

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

@@ -0,0 +1,5 @@
+export declare function useWorkspaces(): {
+    workspaces: any;
+    loading: any;
+    refreshWorkspaces: any;
+};

package/dist/runtime/composables/useWorkspaces.js

@@ -0,0 +1,14 @@
+export function useWorkspaces() {
+  const { getAvailableOrganizations } = useTelaApplicationAuth();
+  const { data: workspaces, status, refresh: refreshWorkspaces } = useAsyncData(
+    "workspaces",
+    () => getAvailableOrganizations(),
+    { default: () => [] }
+  );
+  const loading = computed(() => status.value === "pending");
+  return {
+    workspaces,
+    loading,
+    refreshWorkspaces
+  };
+}

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

@@ -0,0 +1,18 @@
+export declare function useZoomPan(viewportShellRef: Ref<HTMLElement | null>, viewportRef: Ref<HTMLElement | null>, svgSize: Ref<{
+    width: number;
+    height: number;
+}>, renderedSvg: Ref<string>): {
+    zoom: any;
+    isDragging: any;
+    viewportStyle: any;
+    scaledCanvasStyle: any;
+    svgStyle: any;
+    fitToViewport: () => void;
+    zoomIn: () => void;
+    zoomOut: () => void;
+    handleMouseDown: (event: MouseEvent) => void;
+    handleMouseMove: (event: MouseEvent) => void;
+    stopDragging: () => void;
+    MIN_ZOOM: number;
+    MAX_ZOOM: number;
+};

package/dist/runtime/composables/useZoomPan.js

@@ -0,0 +1,130 @@
+const MIN_ZOOM = 0.4;
+const MAX_ZOOM = 6;
+const ZOOM_STEP = 0.2;
+const VIEWPORT_PADDING = 32;
+const MIN_VIEWPORT_HEIGHT = 180;
+export function useZoomPan(viewportShellRef, viewportRef, svgSize, renderedSvg) {
+  const zoom = ref(1);
+  const isDragging = ref(false);
+  const dragStart = ref({ x: 0, y: 0, scrollLeft: 0, scrollTop: 0 });
+  const windowHeight = ref(import.meta.client ? window.innerHeight : 900);
+  const observedShellWidth = ref(0);
+  let resizeObserver = null;
+  const maxViewportHeight = computed(() => Math.min(540, windowHeight.value * 0.7));
+  const fitZoom = computed(() => {
+    if (!viewportShellRef.value || !renderedSvg.value) {
+      return 1;
+    }
+    const availableWidth = Math.max(viewportShellRef.value.clientWidth - VIEWPORT_PADDING, 1);
+    const availableHeight = Math.max(maxViewportHeight.value - VIEWPORT_PADDING, 1);
+    return Math.min(
+      MAX_ZOOM,
+      Math.max(
+        MIN_ZOOM,
+        Math.min(availableWidth / svgSize.value.width, availableHeight / svgSize.value.height)
+      )
+    );
+  });
+  const viewportStyle = computed(() => {
+    const scaledHeight = svgSize.value.height * zoom.value;
+    const targetHeight = Math.min(
+      maxViewportHeight.value,
+      Math.max(MIN_VIEWPORT_HEIGHT, Math.ceil(scaledHeight + 2))
+    );
+    return {
+      height: `${targetHeight}px`,
+      maxHeight: `${maxViewportHeight.value}px`
+    };
+  });
+  const scaledCanvasStyle = computed(() => ({
+    width: `${svgSize.value.width * zoom.value}px`,
+    height: `${svgSize.value.height * zoom.value}px`
+  }));
+  const svgStyle = computed(() => ({
+    width: `${svgSize.value.width}px`,
+    height: `${svgSize.value.height}px`,
+    transform: `scale(${zoom.value})`,
+    transformOrigin: "top left"
+  }));
+  function fitToViewport() {
+    if (!viewportRef.value || !renderedSvg.value) {
+      return;
+    }
+    zoom.value = fitZoom.value;
+    viewportRef.value.scrollLeft = 0;
+    viewportRef.value.scrollTop = 0;
+  }
+  function zoomIn() {
+    zoom.value = Math.min(MAX_ZOOM, zoom.value + ZOOM_STEP);
+  }
+  function zoomOut() {
+    zoom.value = Math.max(MIN_ZOOM, zoom.value - ZOOM_STEP);
+  }
+  function handleMouseDown(event) {
+    if (!viewportRef.value || event.button !== 0) {
+      return;
+    }
+    isDragging.value = true;
+    dragStart.value = {
+      x: event.clientX,
+      y: event.clientY,
+      scrollLeft: viewportRef.value.scrollLeft,
+      scrollTop: viewportRef.value.scrollTop
+    };
+  }
+  function handleMouseMove(event) {
+    if (!viewportRef.value || !isDragging.value) {
+      return;
+    }
+    event.preventDefault();
+    viewportRef.value.scrollLeft = dragStart.value.scrollLeft - (event.clientX - dragStart.value.x);
+    viewportRef.value.scrollTop = dragStart.value.scrollTop - (event.clientY - dragStart.value.y);
+  }
+  function stopDragging() {
+    isDragging.value = false;
+  }
+  function handleWindowResize() {
+    windowHeight.value = window.innerHeight;
+    fitToViewport();
+  }
+  onMounted(async () => {
+    await nextTick();
+    if (renderedSvg.value) {
+      fitToViewport();
+    }
+    if (import.meta.client && viewportShellRef.value) {
+      observedShellWidth.value = Math.round(viewportShellRef.value.clientWidth);
+      resizeObserver = new ResizeObserver(() => {
+        const nextWidth = Math.round(viewportShellRef.value?.clientWidth ?? 0);
+        if (!nextWidth || nextWidth === observedShellWidth.value) {
+          return;
+        }
+        observedShellWidth.value = nextWidth;
+        fitToViewport();
+      });
+      resizeObserver.observe(viewportShellRef.value);
+      window.addEventListener("resize", handleWindowResize);
+    }
+  });
+  onBeforeUnmount(() => {
+    resizeObserver?.disconnect();
+    if (import.meta.client) {
+      window.removeEventListener("resize", handleWindowResize);
+    }
+  });
+  return {
+    zoom,
+    isDragging,
+    viewportStyle,
+    scaledCanvasStyle,
+    svgStyle,
+    fitToViewport,
+    zoomIn,
+    zoomOut,
+    handleMouseDown,
+    handleMouseMove,
+    stopDragging,
+    MIN_ZOOM,
+    MAX_ZOOM
+  };
+}

package/dist/runtime/embed/components/ChatEmbed.d.vue.ts

@@ -0,0 +1,23 @@
+import type { DeepReadonly } from 'vue';
+import type { WorkspaceSettings } from '../../composables/useWorkspaceSettings.js';
+import type { ChatActor, ChatFeatureConfig } from '../../utils/tela-chat.js';
+type EmbedUser = ChatActor;
+type __VLS_Props = {
+    workspaceId: string;
+    workspaceSettings?: DeepReadonly<WorkspaceSettings> | WorkspaceSettings | null;
+    conversationId?: string | null;
+    initialConversationId?: string | null;
+    hideSidebar?: boolean;
+    user?: EmbedUser | null;
+    features?: Partial<ChatFeatureConfig>;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:conversationId": (value: string | null) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:conversationId"?: ((value: string | null) => any) | undefined;
+}>, {
+    initialConversationId: string | null;
+    hideSidebar: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/embed/components/ChatEmbed.vue

@@ -0,0 +1,27 @@
+<script setup>
+import ChatEmbedInner from "./ChatEmbedInner.vue";
+const props = defineProps({
+  workspaceId: { type: String, required: true },
+  workspaceSettings: { type: null, required: false },
+  conversationId: { type: [String, null], required: false },
+  initialConversationId: { type: [String, null], required: false, default: null },
+  hideSidebar: { type: Boolean, required: false, default: true },
+  user: { type: [Object, null], required: false },
+  features: { type: Object, required: false }
+});
+defineEmits(["update:conversationId"]);
+provideEmbedConfig(props);
+</script>
+
+<template>
+    <!-- Force a clean state namespace when the workspace changes. -->
+    <ChatEmbedInner
+        :key="workspaceId"
+        :conversation-id="conversationId"
+        :initial-conversation-id="initialConversationId"
+        :hide-sidebar="hideSidebar"
+        :user="user"
+        :features="features"
+        @update:conversation-id="$emit('update:conversationId', $event)"
+    />
+</template>

package/dist/runtime/embed/components/ChatEmbed.vue.d.ts

@@ -0,0 +1,23 @@
+import type { DeepReadonly } from 'vue';
+import type { WorkspaceSettings } from '../../composables/useWorkspaceSettings.js';
+import type { ChatActor, ChatFeatureConfig } from '../../utils/tela-chat.js';
+type EmbedUser = ChatActor;
+type __VLS_Props = {
+    workspaceId: string;
+    workspaceSettings?: DeepReadonly<WorkspaceSettings> | WorkspaceSettings | null;
+    conversationId?: string | null;
+    initialConversationId?: string | null;
+    hideSidebar?: boolean;
+    user?: EmbedUser | null;
+    features?: Partial<ChatFeatureConfig>;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:conversationId": (value: string | null) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:conversationId"?: ((value: string | null) => any) | undefined;
+}>, {
+    initialConversationId: string | null;
+    hideSidebar: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/embed/components/ChatEmbedInner.d.vue.ts

@@ -0,0 +1,19 @@
+import { type ChatActor, type ChatFeatureConfig } from '../../utils/tela-chat.js';
+type EmbedUser = ChatActor;
+type __VLS_Props = {
+    conversationId?: string | null;
+    initialConversationId?: string | null;
+    hideSidebar?: boolean;
+    user?: EmbedUser | null;
+    features?: Partial<ChatFeatureConfig>;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:conversationId": (value: string | null) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:conversationId"?: ((value: string | null) => any) | undefined;
+}>, {
+    initialConversationId: string | null;
+    hideSidebar: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;