@patchedcodes/hackathon-widget 0.1.1 → 0.1.3

package/dist/index.d.ts

@@ -0,0 +1,270 @@
+/**
+ * Options for the screenshot capture.
+ */
+export declare interface CaptureOptions {
+    /** Maximum width for the captured image (downscaled if larger) */
+    maxWidth?: number;
+    /** Maximum height for the captured image */
+    maxHeight?: number;
+    /** JPEG quality (0-1) if using JPEG format. Default: PNG */
+    quality?: number;
+    /** Elements to exclude from the capture (e.g. the widget itself) */
+    ignoreElements?: (element: Element) => boolean;
+}
+
+/**
+ * Capture-related types.
+ */
+/**
+ * The result of a page capture operation.
+ */
+export declare interface CaptureResult {
+    /** Base64-encoded PNG screenshot */
+    screenshot: string;
+    /** Viewport dimensions at time of capture */
+    viewport: {
+        width: number;
+        height: number;
+    };
+    /** Timestamp of capture */
+    timestamp: number;
+}
+
+/**
+ * A message in the chat conversation.
+ */
+export declare interface ChatMessage {
+    id: string;
+    role: "user" | "assistant";
+    content: string;
+    timestamp: number;
+}
+
+/**
+ * The payload sent to the backend when the user issues a command.
+ */
+export declare interface CommandRequest {
+    /** API key for authenticating with the backend */
+    apiKey: string;
+    /** The user's natural language prompt */
+    prompt: string;
+}
+
+/**
+ * The response from the backend after processing a command.
+ * The backend only responds once the deploy is complete.
+ */
+export declare interface CommandResponse {
+    /** The commit SHA that was pushed to main */
+    commitId: string;
+    /** AI's explanation of what was changed */
+    transcript: string;
+}
+
+/**
+ * Widget-specific types for the chat UI.
+ */
+/**
+ * Deployment info received from the backend.
+ */
+export declare interface DeploymentInfo {
+    /** The feature branch name */
+    branch: string;
+    /** The preview URL (may be same domain after redeploy) */
+    previewUrl: string;
+}
+
+/**
+ * The <devloyed-widget> custom element.
+ *
+ * Renders a chat-based AI editing interface in a Shadow DOM.
+ * When the user issues a command:
+ *   1. Captures a screenshot of the page
+ *   2. Shows a multi-step loader with randomized labels
+ *   3. Sends command + screenshot to the backend (single POST)
+ *   4. On response, completes all loader steps and shows the result
+ *   5. If branch exists, shows a deploy toast with "Apply" button
+ *   6. On "Apply", reloads the page to pick up the redeployed changes
+ */
+export declare class DevloyedWidget extends HTMLElement {
+    private shadow;
+    private config;
+    private transport;
+    private state;
+    private panelEl;
+    private messagesEl;
+    private inputEl;
+    private sendBtn;
+    private toggleBtn;
+    private loaderTimer;
+    constructor();
+    /**
+     * Initializes the widget with resolved configuration.
+     */
+    initialize(config: ResolvedConfig): void;
+    private render;
+    private bindEvents;
+    /**
+     * Opens the chat panel.
+     */
+    open(): void;
+    /**
+     * Closes the chat panel.
+     */
+    close(): void;
+    /**
+     * Toggles the chat panel open/closed.
+     */
+    toggle(): void;
+    /**
+     * Handles sending a user message.
+     *
+     * Flow:
+     *   1. Add user message to chat
+     *   2. Generate randomized loader steps
+     *   3. Replace messages area with the loader
+     *   4. Capture screenshot — mark step 0 as completed
+     *   5. Auto-advance remaining steps on a timer (~1.2s each)
+     *   6. Fire transport.send() — returns Promise<CommandResponse>
+     *   7. When response arrives, cascade-complete all remaining steps
+     *   8. After a ~600ms beat, remove loader and show response
+     */
+    private handleSend;
+    /**
+     * Sets the data-state attribute of a loader step element.
+     */
+    private setStepState;
+    /**
+     * Cascade-completes all steps from `fromStep` to `total - 1`,
+     * with a short delay between each to create a satisfying visual cascade.
+     */
+    private cascadeCompleteSteps;
+    /**
+     * Restores the messages area to show all prior chat messages
+     * (called after loader is removed).
+     */
+    private restoreMessages;
+    /**
+     * Applies the deployed changes by reloading the page.
+     * The backend has already redeployed to the same domain.
+     */
+    private handleApply;
+    /**
+     * Adds a message to the chat and renders it.
+     */
+    private addMessage;
+    /**
+     * Scrolls the messages container to the bottom.
+     */
+    private scrollToBottom;
+    /**
+     * Auto-resizes the textarea based on content.
+     */
+    private autoResizeInput;
+    /**
+     * Promise-based delay utility.
+     */
+    private delay;
+    /**
+     * Cleans up when the widget is removed from the DOM.
+     */
+    disconnectedCallback(): void;
+}
+
+/**
+ * Initializes the Devloyed widget and mounts it to the page.
+ *
+ * @example
+ * ```ts
+ * import { init } from '@devloyed/widget';
+ *
+ * init({
+ *   endpoint: 'https://api.devloyed.com/command',
+ *   projectId: 'my-project',
+ *   apiKey: 'your-api-key',
+ *   position: 'bottom-right',
+ *   theme: 'light',
+ * });
+ * ```
+ */
+export declare function init(config: WidgetConfig): DevloyedWidget;
+
+/**
+ * Internal resolved configuration with defaults applied.
+ */
+export declare interface ResolvedConfig extends Required<Pick<WidgetConfig, "endpoint" | "projectId" | "apiKey" | "position" | "theme">> {
+    headers: Record<string, string>;
+    onDeployReady?: (branch: string, previewUrl: string) => void;
+    onError?: (error: Error) => void;
+    onOpen?: () => void;
+    onClose?: () => void;
+}
+
+/**
+ * HTTP client for communicating with the Devloyed backend.
+ * Sends commands + screenshots and returns the response once the
+ * backend has finished processing and deploying.
+ */
+export declare class TransportClient {
+    private endpoint;
+    private headers;
+    private abortController;
+    constructor(endpoint: string, headers?: Record<string, string>);
+    /**
+     * Sends a command request to the backend.
+     * Returns the response once the backend has deployed the changes.
+     */
+    send(request: CommandRequest): Promise<CommandResponse>;
+    /**
+     * Aborts the current in-flight request, if any.
+     */
+    abort(): void;
+    /**
+     * Updates the headers (e.g. for token refresh).
+     */
+    setHeaders(headers: Record<string, string>): void;
+}
+
+/**
+ * Configuration for the Devloyed widget.
+ */
+export declare interface WidgetConfig {
+    /** Backend endpoint URL for sending commands (POST) */
+    endpoint: string;
+    /** Project identifier — sent with each request so the backend knows which repo to modify */
+    projectId: string;
+    /** API key sent in the request body to authenticate with the backend */
+    apiKey: string;
+    /** Position of the floating widget button */
+    position?: "bottom-right" | "bottom-left" | "top-right" | "top-left";
+    /** Widget color theme */
+    theme?: "light" | "dark";
+    /** Custom headers sent with backend requests (e.g. auth tokens) */
+    headers?: Record<string, string>;
+    /** Called when a deployment is ready (before the user clicks "Apply") */
+    onDeployReady?: (branch: string, previewUrl: string) => void;
+    /** Called when an error occurs */
+    onError?: (error: Error) => void;
+    /** Called when the widget is opened */
+    onOpen?: () => void;
+    /** Called when the widget is closed */
+    onClose?: () => void;
+}
+
+/**
+ * The state of the widget.
+ */
+export declare interface WidgetState {
+    /** Whether the chat panel is open */
+    isOpen: boolean;
+    /** Chat messages */
+    messages: ChatMessage[];
+    /** Whether a request is currently in flight */
+    isLoading: boolean;
+    /** Current conversation ID for multi-turn context */
+    conversationId?: string;
+    /** Info about the latest deployment (set when "deployed" event arrives) */
+    deploymentInfo?: DeploymentInfo;
+}
+
+export { }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patchedcodes/hackathon-widget",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "AI-powered frontend editor widget — modify live web interfaces using natural language",
   "type": "module",
   "main": "./dist/devloyed-widget.js",