@widgetic/creator 0.3.49

package/dist/utils/operationStream.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Operation status streaming via the backend SSE endpoint
+ * (GET /v1/operations/stream?operationId=...).
+ *
+ * Uses a fetch-based reader so we can send the Authorization header —
+ * native EventSource cannot set custom headers and the gateway's auth
+ * middleware only accepts Bearer tokens.
+ */
+export type OperationStatusPayload = {
+    id: string;
+    type: string;
+    status: string;
+    progress?: number | null;
+    metadata?: Record<string, unknown> | null;
+    error?: string | null;
+    createdAt: string;
+    updatedAt: string;
+};
+/**
+ * Subscribe to operation updates over SSE. Resolves with the terminal
+ * payload once status reaches completed/failed/cancelled, or rejects on
+ * stream failure or premature close so the caller can fall back to polling.
+ */
+export declare function streamOperationUpdates(operationId: string, options: {
+    basePath: string;
+    accessToken: string;
+    onMessage?: (op: OperationStatusPayload) => void;
+    signal?: AbortSignal;
+}): Promise<OperationStatusPayload>;

package/dist/utils/operationStream.js

@@ -0,0 +1,116 @@
+/**
+ * Operation status streaming via the backend SSE endpoint
+ * (GET /v1/operations/stream?operationId=...).
+ *
+ * Uses a fetch-based reader so we can send the Authorization header —
+ * native EventSource cannot set custom headers and the gateway's auth
+ * middleware only accepts Bearer tokens.
+ */
+const TERMINAL_STATUSES = new Set(['completed', 'failed', 'cancelled']);
+/**
+ * Subscribe to operation updates over SSE. Resolves with the terminal
+ * payload once status reaches completed/failed/cancelled, or rejects on
+ * stream failure or premature close so the caller can fall back to polling.
+ */
+export function streamOperationUpdates(operationId, options) {
+    const { basePath, accessToken, onMessage, signal } = options;
+    return new Promise((resolve, reject) => {
+        let settled = false;
+        let abortController = null;
+        let reader = null;
+        const cleanup = () => {
+            try {
+                reader?.cancel();
+            }
+            catch {
+                /* noop */
+            }
+            try {
+                abortController?.abort();
+            }
+            catch {
+                /* noop */
+            }
+        };
+        const settle = (fn, value) => {
+            if (settled)
+                return;
+            settled = true;
+            cleanup();
+            if (fn === 'resolve')
+                resolve(value);
+            else
+                reject(value);
+        };
+        const run = async () => {
+            abortController = new AbortController();
+            // Propagate caller aborts into the fetch request.
+            if (signal) {
+                if (signal.aborted) {
+                    abortController.abort();
+                }
+                else {
+                    signal.addEventListener('abort', () => abortController?.abort(), { once: true });
+                }
+            }
+            const response = await fetch(`${basePath}/operations/stream?operationId=${encodeURIComponent(operationId)}`, {
+                method: 'GET',
+                headers: {
+                    Authorization: `Bearer ${accessToken}`,
+                    Accept: 'text/event-stream',
+                    'Cache-Control': 'no-cache'
+                },
+                signal: abortController.signal
+            });
+            if (!response.ok || !response.body) {
+                throw new Error(`Operation stream unavailable (${response.status})`);
+            }
+            reader = response.body.getReader();
+            const decoder = new TextDecoder();
+            let buffer = '';
+            while (true) {
+                const { done, value } = await reader.read();
+                if (done)
+                    break;
+                buffer += decoder.decode(value, { stream: true });
+                // SSE frames are `data: {...}\n\n`
+                let frameEnd = buffer.indexOf('\n\n');
+                while (frameEnd !== -1) {
+                    const frame = buffer.slice(0, frameEnd);
+                    buffer = buffer.slice(frameEnd + 2);
+                    const dataLine = frame
+                        .split('\n')
+                        .filter((line) => line.startsWith('data:'))
+                        .map((line) => line.slice(5).trimStart())
+                        .join('\n');
+                    // Skip empty frames and keepalive comment frames.
+                    if (!dataLine || !dataLine.startsWith('{'))
+                        continue;
+                    try {
+                        const op = JSON.parse(dataLine);
+                        onMessage?.(op);
+                        const status = String(op?.status || '').toLowerCase();
+                        if (TERMINAL_STATUSES.has(status)) {
+                            settle('resolve', op);
+                            return;
+                        }
+                    }
+                    catch (parseError) {
+                        console.warn('[OperationStream] Failed to parse SSE frame', parseError);
+                    }
+                    frameEnd = buffer.indexOf('\n\n');
+                }
+            }
+            // Server closed without a terminal event — reject so the caller
+            // can fall back to polling.
+            settle('reject', new Error('Operation stream closed before completion'));
+        };
+        run().catch((error) => {
+            if (signal?.aborted) {
+                settle('reject', new DOMException('Operation aborted', 'AbortError'));
+                return;
+            }
+            settle('reject', error instanceof Error ? error : new Error(String(error)));
+        });
+    });
+}

package/dist/utils/prototypes.js

@@ -0,0 +1,20 @@
+String.prototype.capitalize = function () {
+    return this.charAt(0).toUpperCase() + this.slice(1);
+};
+String.prototype.rmFirstAtUser = function () {
+    let newString = this.charAt(0) === "@" ? (this.indexOf(" ") > 0 ? this.slice(this.indexOf(" ") + 1) : "") : this;
+    return newString;
+};
+// remove punctuation from the transcript
+String.prototype.rmPunctuation = function () {
+    let newString = this.toLowerCase().replace(/[!"#$%&'()*+,-./:;<=>?@[\]^_`{|}~]/g, '');
+    return newString;
+};
+String.prototype.splitByWordCount = function (count) {
+    var arr = this.split(' ');
+    var r = [];
+    while (arr.length) {
+        r.push(arr.splice(0, count).join(' '));
+    }
+    return r;
+};

package/dist/utils/widgeticChatUpload.d.ts

@@ -0,0 +1,26 @@
+/** Matches api-gateway MULTIPART_MAX_UPLOAD_BYTES. */
+export declare const CHAT_MULTIPART_MAX_BYTES: number;
+export type ChatUploadConfig = {
+    apiBasePath: string;
+    accessToken: string;
+    contextType?: 'widget-codegen' | 'browser-ic' | 'content-property';
+    source?: string;
+    widgetId?: string;
+    conversationId?: string;
+};
+export type ChatUploadResult = {
+    id: string;
+    url: string;
+    fileType: string;
+    fileName: string;
+    fileSize: number;
+};
+export type ChatUploadOptions = {
+    onProgress?: (percentage: number) => void;
+    abortSignal?: AbortSignal;
+};
+export declare function shouldUseTusForChatUpload(file: File): boolean;
+/**
+ * Upload a chat attachment via multipart (≤10MB) or TUS (>10MB).
+ */
+export declare function uploadChatFileToWidgeticApi(file: File, config: ChatUploadConfig, options?: ChatUploadOptions): Promise<ChatUploadResult>;

package/dist/utils/widgeticChatUpload.js

@@ -0,0 +1,148 @@
+import * as tus from 'tus-js-client';
+/** Matches api-gateway MULTIPART_MAX_UPLOAD_BYTES. */
+export const CHAT_MULTIPART_MAX_BYTES = 10 * 1024 * 1024;
+const DEFAULT_TUS_CHUNK_SIZE = 5 * 1024 * 1024;
+function parseErrorMessage(response, fallback) {
+    return response
+        .json()
+        .then((json) => json?.message || json?.error?.message || fallback)
+        .catch(() => fallback);
+}
+function mapUploadResponse(data, file) {
+    const url = data.url || '';
+    if (!url) {
+        throw new Error('Upload response missing url');
+    }
+    const id = data.id || '';
+    if (!id) {
+        throw new Error('Upload response missing id');
+    }
+    return {
+        id,
+        url,
+        fileType: (data.mime_type || data.mimeType || file.type),
+        fileName: (data.file_name || data.fileName || file.name),
+        fileSize: (data.file_size ?? data.fileSize ?? file.size),
+    };
+}
+function extractTusId(uploadUrl) {
+    if (!uploadUrl)
+        return null;
+    const trimmed = uploadUrl.replace(/\/+$/, '');
+    return trimmed.split('/').pop() || null;
+}
+async function uploadMultipart(file, config) {
+    const basePath = config.apiBasePath.replace(/\/+$/, '');
+    const token = config.accessToken.replace(/^Bearer\s+/i, '');
+    const formData = new FormData();
+    formData.append('file', file);
+    formData.append('context_type', config.contextType || 'widget-codegen');
+    formData.append('source', config.source || 'chat-upload');
+    if (config.widgetId)
+        formData.append('widget_id', config.widgetId);
+    if (config.conversationId)
+        formData.append('conversation_id', config.conversationId);
+    const response = await fetch(`${basePath}/uploads`, {
+        method: 'POST',
+        headers: { Authorization: `Bearer ${token}` },
+        body: formData,
+    });
+    if (!response.ok) {
+        throw new Error(await parseErrorMessage(response, `Upload failed (${response.status})`));
+    }
+    const json = await response.json();
+    const data = (json?.data ?? json);
+    return mapUploadResponse(data, file);
+}
+function uploadTus(file, config, options = {}) {
+    const basePath = config.apiBasePath.replace(/\/+$/, '');
+    const token = config.accessToken.replace(/^Bearer\s+/i, '');
+    const endpoint = `${basePath}/uploads/tus`;
+    return new Promise((resolve, reject) => {
+        let tusUpload = null;
+        const abortHandler = () => {
+            tusUpload?.abort(true);
+            reject(new Error('Upload cancelled.'));
+        };
+        if (options.abortSignal?.aborted) {
+            reject(new Error('Upload cancelled.'));
+            return;
+        }
+        options.abortSignal?.addEventListener('abort', abortHandler, { once: true });
+        const metadata = {
+            filename: file.name,
+            filetype: file.type || 'application/octet-stream',
+            context_type: config.contextType || 'widget-codegen',
+            source: config.source || 'chat-upload',
+        };
+        if (config.widgetId)
+            metadata.widget_id = config.widgetId;
+        if (config.conversationId)
+            metadata.conversation_id = config.conversationId;
+        tusUpload = new tus.Upload(file, {
+            endpoint,
+            chunkSize: DEFAULT_TUS_CHUNK_SIZE,
+            retryDelays: [0, 1000, 3000, 5000],
+            metadata,
+            headers: { Authorization: `Bearer ${token}` },
+            onError: (error) => {
+                options.abortSignal?.removeEventListener('abort', abortHandler);
+                reject(error);
+            },
+            onProgress: (bytesUploaded, bytesTotal) => {
+                const percentage = bytesTotal > 0 ? Math.round((bytesUploaded / bytesTotal) * 100) : 0;
+                options.onProgress?.(percentage);
+            },
+            onSuccess: async () => {
+                options.abortSignal?.removeEventListener('abort', abortHandler);
+                const tusId = extractTusId(tusUpload?.url);
+                if (!tusId) {
+                    reject(new Error('TUS upload finished without upload id.'));
+                    return;
+                }
+                try {
+                    const completeResponse = await fetch(`${endpoint}/${tusId}/complete`, {
+                        method: 'POST',
+                        headers: {
+                            Authorization: `Bearer ${token}`,
+                            'Content-Type': 'application/json',
+                        },
+                    });
+                    if (!completeResponse.ok) {
+                        reject(new Error(await parseErrorMessage(completeResponse, `Complete failed (${completeResponse.status})`)));
+                        return;
+                    }
+                    const json = await completeResponse.json();
+                    const data = (json?.data ?? json);
+                    resolve(mapUploadResponse(data, file));
+                }
+                catch (error) {
+                    reject(error instanceof Error ? error : new Error('Failed to finalize upload.'));
+                }
+            },
+        });
+        tusUpload.findPreviousUploads().then((previousUploads) => {
+            if (previousUploads.length > 0) {
+                tusUpload?.resumeFromPreviousUpload(previousUploads[0]);
+            }
+            tusUpload?.start();
+        });
+    });
+}
+export function shouldUseTusForChatUpload(file) {
+    return file.size > CHAT_MULTIPART_MAX_BYTES;
+}
+/**
+ * Upload a chat attachment via multipart (≤10MB) or TUS (>10MB).
+ */
+export async function uploadChatFileToWidgeticApi(file, config, options = {}) {
+    if (shouldUseTusForChatUpload(file)) {
+        console.log('[ChatUpload] TUS upload:', file.name, `${(file.size / 1024 / 1024).toFixed(1)}MB`);
+        return uploadTus(file, config, options);
+    }
+    console.log('[ChatUpload] Multipart upload:', file.name);
+    options.onProgress?.(50);
+    const result = await uploadMultipart(file, config);
+    options.onProgress?.(100);
+    return result;
+}

package/dist/utils.d.ts

@@ -0,0 +1,11 @@
+import { type ClassValue } from "clsx";
+import type { TransitionConfig } from "svelte/transition";
+export declare function cn(...inputs: ClassValue[]): string;
+type FlyAndScaleParams = {
+    y?: number;
+    x?: number;
+    start?: number;
+    duration?: number;
+};
+export declare const flyAndScale: (node: Element, params?: FlyAndScaleParams) => TransitionConfig;
+export {};

package/dist/utils.js

@@ -0,0 +1,38 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+import { cubicOut } from "svelte/easing";
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}
+export const flyAndScale = (node, params = { y: -8, x: 0, start: 0.95, duration: 150 }) => {
+    const style = getComputedStyle(node);
+    const transform = style.transform === "none" ? "" : style.transform;
+    const scaleConversion = (valueA, scaleA, scaleB) => {
+        const [minA, maxA] = scaleA;
+        const [minB, maxB] = scaleB;
+        const percentage = (valueA - minA) / (maxA - minA);
+        const valueB = percentage * (maxB - minB) + minB;
+        return valueB;
+    };
+    const styleToString = (style) => {
+        return Object.keys(style).reduce((str, key) => {
+            if (style[key] === undefined)
+                return str;
+            return str + `${key}:${style[key]};`;
+        }, "");
+    };
+    return {
+        duration: params.duration ?? 200,
+        delay: 0,
+        css: (t) => {
+            const y = scaleConversion(t, [0, 1], [params.y ?? 5, 0]);
+            const x = scaleConversion(t, [0, 1], [params.x ?? 0, 0]);
+            const scale = scaleConversion(t, [0, 1], [params.start ?? 0.95, 1]);
+            return styleToString({
+                transform: `${transform} translate3d(${x}px, ${y}px, 0) scale(${scale})`,
+                opacity: t
+            });
+        },
+        easing: cubicOut
+    };
+};

package/package.json

@@ -0,0 +1,124 @@
+{
+	"name": "@widgetic/creator",
+	"version": "0.3.49",
+	"type": "module",
+	"peerDependencies": {
+		"@sveltejs/kit": "^2.20.0",
+		"svelte": "^5.25.0",
+		"@widgetic/api-sdk": "*",
+		"@widgetic/canvas": "^0.5.3",
+		"@widgetic/cache-layer": "^0.1.1",
+		"@widgetic/chat": "^0.1.3",
+		"@widgetic/design-system": ">=0.3.0",
+		"@widgetic/editor": "^4.0.0",
+		"@widgetic/file-browser": "^0.5.16"
+	},
+	"svelte": "./dist/index.js",
+	"module": "./dist/index.js",
+	"main": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"sideEffects": [
+		"**/*.css",
+		"**/*.svelte"
+	],
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js",
+			"default": "./dist/index.js"
+		}
+	},
+	"files": [
+		"dist"
+	],
+	"scripts": {
+		"i": "rm -rf node_modules && npm i && npm run lps",
+		"start": "node build/index.js",
+		"render-build": "bash render-build.sh",
+		"build": "NODE_ENV=production vite build && npm run package",
+		"package": "NODE_ENV=production svelte-package",
+		"package:watch": "NODE_ENV=development svelte-package --watch",
+		"stop-dev": "lsof -i :5174 | awk 'NR>1 {print $2}' | xargs kill",
+		"predev": "node scripts/suppress-postcss-from-warning.js",
+		"dev": "npm run stop-dev && npm run dev-sv",
+		"predev-sv": "node scripts/suppress-postcss-from-warning.js",
+		"dev-sv": "VITE_APP_VERSION=$(node -p \"require('./package.json').version\") VITE_BUILD_SHA=$(git rev-parse --short HEAD 2>/dev/null || echo local) NODE_ENV=development vite dev --port 5174",
+		"lps": "volta run npm link --save @widgetic/design-system && volta run npm link --save @widgetic/api-sdk && volta run npm link --save @widgetic/canvas",
+		"llinks": "ls -la node_modules/@widgetic",
+		"clean-npm-cache": "npm cache clean --force",
+		"clean-svelte-cache": "rm -rf .svelte-kit && npx svelte-kit sync",
+		"clean-vite-cache": "rm -rf node_modules/.vite",
+		"find-sveltekit-running": "lsof -i :5173",
+		"find-vite-running": "ps aux | grep vite",
+		"preview": "vite preview",
+		"test": "npm run test:integration && npm run test:unit",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"lint": "prettier --check . && eslint .",
+		"format": "prettier --write .",
+		"test:integration": "playwright test",
+		"test:unit": "vitest"
+	},
+	"devDependencies": {
+		"@playwright/test": "^1.28.1",
+		"@sveltejs/adapter-auto": "^3.0.0",
+		"@sveltejs/kit": "^2.20.2",
+		"@sveltejs/vite-plugin-svelte": "^5.0.3",
+		"@tailwindcss/postcss": "^4.1.4",
+		"@tailwindcss/typography": "^0.5.15",
+		"@types/eslint": "^9.6.0",
+		"autoprefixer": "^10.4.20",
+		"eslint": "^9.0.0",
+		"eslint-config-prettier": "^9.1.0",
+		"eslint-plugin-svelte": "^2.36.0",
+		"globals": "^15.0.0",
+		"postcss": "^8.5.3",
+		"prettier": "^3.1.1",
+		"prettier-plugin-svelte": "^3.1.2",
+		"svelte": "^5.25.6",
+		"svelte-check": "^4.0.0",
+		"svelte-preprocess": "^6.0.3",
+		"tailwind-merge": "^2.5.2",
+		"tailwind-variants": "^0.2.1",
+		"tailwindcss": "^4.1.4",
+		"tailwindcss-animate": "^1.0.7",
+		"terser": "^5.46.0",
+		"ts-node": "^10.9.2",
+		"typescript": "^5.8.3",
+		"typescript-eslint": "^8.20.0",
+		"vite": "^6.2.6",
+		"vite-imagetools": "^7.0.4",
+		"vitest": "^2.0.0",
+		"@widgetic/api-sdk": "*",
+		"@widgetic/canvas": "^0.5.3",
+		"@widgetic/cache-layer": "^0.1.1",
+		"@widgetic/chat": "^0.1.3",
+		"@widgetic/design-system": ">=0.3.0",
+		"@widgetic/editor": "^4.0.0",
+		"@widgetic/file-browser": "^0.5.16"
+	},
+	"dependencies": {
+		"@codesandbox/sandpack-react": "^2.19.9",
+		"@emotion/styled": "^11.13.0",
+		"@mdi/js": "^7.4.47",
+		"@mui/material": "^6.1.1",
+		"@sveltejs/adapter-node": "^5.2.4",
+		"@sveltejs/package": "^2.5.8",
+		"@xterm/addon-fit": "^0.11.0",
+		"@xterm/xterm": "^6.0.0",
+		"clsx": "^2.1.1",
+		"dotenv": "^16.4.5",
+		"fabric": "^6.9.1",
+		"mode-watcher": "^1.1.0",
+		"sandpack-file-explorer": "^0.0.7",
+		"socket.io-client": "^4.8.3",
+		"tus-js-client": "^4.3.1"
+	},
+	"publishConfig": {
+		"access": "public"
+	},
+	"repository": {
+		"type": "git",
+		"url": "https://gitlab.com/widgeticai/Frontend/widget-creator.git"
+	}
+}