use-vibes 0.1.0 → 0.2.0

package/package.json

@@ -1,13 +1,15 @@
 {
   "name": "use-vibes",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "type": "module",
   "description": "Transform any DOM element into an AI-powered micro-app",
-  "main": "./src/index.ts",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
     }
   },
   "keywords": [
@@ -33,8 +35,11 @@
     "@rollup/plugin-commonjs": "^28.0.3",
     "@rollup/plugin-node-resolve": "^16.0.1",
     "@rollup/plugin-typescript": "^12.1.2",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
     "@types/jsdom": "^21.1.7",
     "@types/node": "^20.11.19",
+    "@types/react": "^18.2.0",
     "@typescript-eslint/eslint-plugin": "^7.0.1",
     "@typescript-eslint/parser": "^7.0.1",
     "esbuild": "^0.25.1",
@@ -44,6 +49,7 @@
     "jsdom": "^26.0.0",
     "playwright": "^1.41.2",
     "prettier": "^3.5.3",
+    "react": "^19.1.0",
     "rollup": "^4.38.0",
     "rollup-plugin-terser": "^7.0.2",
     "terser": "^5.39.0",
@@ -52,7 +58,10 @@
     "vitest": "^1.2.2"
   },
   "dependencies": {
-    "call-ai": "^0.5.0"
+    "call-ai": "^0.10.0"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "scripts": {
     "build": "tsc",

package/src/components/ImgGen.tsx

@@ -0,0 +1,242 @@
+import React, { useEffect, useState, useRef } from 'react';
+import { imageGen } from 'call-ai';
+import type { ImageGenOptions, ImageResponse } from 'call-ai';
+
+/**
+ * Hash function to create a key from the prompt string
+ * @param prompt The prompt string to hash
+ * @returns A string hash of the prompt
+ */
+function hashPrompt(prompt: string): string {
+  let hash = 0;
+  for (let i = 0; i < prompt.length; i++) {
+    const char = prompt.charCodeAt(i);
+    hash = (hash << 5) - hash + char;
+    hash = hash & hash; // Convert to 32bit integer
+  }
+  return hash.toString(16);
+}
+
+interface CacheImplementation {
+  get: (key: string) => ImageResponse | null;
+  set: (key: string, value: ImageResponse) => void;
+}
+
+// Default cache implementation using localStorage
+const defaultCacheImpl: CacheImplementation = {
+  get: (key: string): ImageResponse | null => {
+    try {
+      const data = localStorage.getItem(`imggen-${key}`);
+      return data ? JSON.parse(data) : null;
+    } catch (e) {
+      console.error('Error retrieving from ImgGen cache', e);
+      return null;
+    }
+  },
+  set: (key: string, value: ImageResponse): void => {
+    try {
+      localStorage.setItem(`imggen-${key}`, JSON.stringify(value));
+    } catch (e) {
+      console.error('Error storing in ImgGen cache', e);
+    }
+  },
+};
+
+export interface ImgGenProps {
+  /** Text prompt for image generation (required) */
+  prompt: string;
+
+  /** Options for image generation (optional) */
+  options?: ImageGenOptions;
+
+  /** Callback to retrieve cached data before load (optional) */
+  beforeLoad?: (key: string) => ImageResponse | null | Promise<ImageResponse | null>;
+
+  /** Callback when image data is loaded (optional) */
+  onLoad?: (response: ImageResponse) => void;
+
+  /** CSS class name for the image element (optional) */
+  className?: string;
+
+  /** Alt text for the image (defaults to prompt) */
+  alt?: string;
+}
+
+/**
+ * React component for generating images with call-ai's imageGen
+ * Provides automatic caching, reactive updates, and placeholder handling
+ */
+export const ImgGen: React.FC<ImgGenProps> = ({
+  prompt,
+  options = {},
+  beforeLoad,
+  onLoad,
+  className = '',
+  alt,
+}) => {
+  const [imageData, setImageData] = useState<string | null>(null);
+  const [loading, setLoading] = useState<boolean>(false);
+  const [progress, setProgress] = useState<number>(0);
+  const [error, setError] = useState<Error | null>(null);
+  const progressTimerRef = useRef<NodeJS.Timeout | null>(null);
+  const promptKey = hashPrompt(prompt);
+
+  const size = options?.size || '1024x1024';
+  const [width, height] = size.split('x').map(Number);
+
+  // Reset state when prompt or options change
+  useEffect(() => {
+    setImageData(null);
+    setError(null);
+    setProgress(0);
+
+    // Clear any existing progress timer
+    if (progressTimerRef.current) {
+      clearInterval(progressTimerRef.current);
+      progressTimerRef.current = null;
+    }
+
+    // Set up progress timer simulation (45 seconds to completion)
+    // This is just for visual feedback and doesn't reflect actual progress
+    const timer = setInterval(() => {
+      setProgress((prev: number) => {
+        const next = prev + (100 - prev) * 0.05;
+        return next > 99 ? 99 : next;
+      });
+    }, 1000);
+    progressTimerRef.current = timer;
+
+    // Cleanup on unmount or when dependencies change
+    return () => {
+      if (progressTimerRef.current) {
+        clearInterval(progressTimerRef.current);
+      }
+    };
+  }, [prompt, JSON.stringify(options)]);
+
+  // Generate the image when prompt or options change
+  useEffect(() => {
+    let isMounted = true;
+
+    // Don't generate image if prompt is falsy
+    if (!prompt) {
+      setLoading(false);
+      return;
+    }
+
+    const generateImage = async (): Promise<void> => {
+      try {
+        setLoading(true);
+
+        // Try to get from cache via the beforeLoad callback if provided
+        let data: ImageResponse | null = null;
+
+        if (beforeLoad) {
+          data = await beforeLoad(promptKey);
+        } else {
+          // Use default cache implementation
+          data = defaultCacheImpl.get(promptKey);
+        }
+
+        // If no data in cache, generate new image
+        if (!data) {
+          // Use the actual imageGen function from call-ai
+          data = await imageGen(prompt, options);
+
+          // Cache the result using default implementation
+          // if beforeLoad wasn't provided
+          if (!beforeLoad) {
+            defaultCacheImpl.set(promptKey, data);
+          }
+        }
+
+        // Update state with the image data
+        if (isMounted && data) {
+          setImageData(data.data[0].b64_json);
+          setProgress(100);
+
+          // Clear progress timer
+          if (progressTimerRef.current) {
+            clearInterval(progressTimerRef.current);
+            progressTimerRef.current = null;
+          }
+
+          // Call onLoad callback if provided
+          if (onLoad) {
+            onLoad(data);
+          }
+        }
+      } catch (err) {
+        if (isMounted) {
+          setError(err instanceof Error ? err : new Error(String(err)));
+        }
+      } finally {
+        if (isMounted) {
+          setLoading(false);
+        }
+      }
+    };
+
+    generateImage();
+
+    return () => {
+      isMounted = false;
+    };
+  }, [prompt, JSON.stringify(options), promptKey, beforeLoad, onLoad]);
+
+  // Render placeholder while loading
+  if (loading || !imageData) {
+    return (
+      <div
+        className={`img-gen-placeholder ${className}`}
+        style={{
+          width: `${width}px`,
+          height: `${height}px`,
+          backgroundColor: '#f0f0f0',
+          position: 'relative',
+          overflow: 'hidden',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <div
+          style={{
+            position: 'absolute',
+            bottom: 0,
+            left: 0,
+            height: '4px',
+            width: `${progress}%`,
+            backgroundColor: '#0066cc',
+            transition: 'width 0.3s ease-in-out',
+          }}
+        />
+        <div style={{ textAlign: 'center', padding: '10px' }}>
+          {error ? (
+            <div className="img-gen-error">
+              <p>Error: {error.message}</p>
+            </div>
+          ) : !prompt ? (
+            <div>Waiting for prompt</div>
+          ) : (
+            <div>Generating image...</div>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  // Render the generated image
+  return (
+    <img
+      src={`data:image/png;base64,${imageData}`}
+      className={`img-gen ${className}`}
+      alt={alt || prompt}
+      width={width}
+      height={height}
+      style={{ maxWidth: '100%' }}
+    />
+  );
+};
+
+export default ImgGen;

package/src/index.ts

@@ -1,116 +1,9 @@
-import { callAI } from 'call-ai';
+// Re-export everything from call-ai
+export * from 'call-ai';
 
-// DOM element and configuration interface
-export interface UseVibesConfig {
-  prompt: string;
-  // Add more configuration options as needed
-}
+// Export ImgGen component
+export { default as ImgGen } from './components/ImgGen.js';
+export type { ImgGenProps } from './components/ImgGen.js';
 
-// App instance interface returned by useVibes
-export interface VibesApp {
-  container: HTMLElement;
-  database?: Record<string, unknown>;
-}
-
-/**
- * The useVibes function - transforms a DOM element into an AI-augmented micro-app
- * @param target - CSS selector string or HTMLElement to inject into
- * @param config - Configuration object with prompt
- * @returns Promise resolving to the app instance
- */
-export function useVibes(target: string | HTMLElement, config: UseVibesConfig): Promise<VibesApp> {
-  // Get the target element if string selector was provided
-  const targetElement =
-    typeof target === 'string' ? (document.querySelector(target) as HTMLElement) : target;
-
-  // Validate the target element
-  if (!targetElement) {
-    return Promise.reject(new Error(`Target element not found: ${target}`));
-  }
-
-  try {
-    // Capture the current HTML state
-    const htmlContext = document.body.innerHTML;
-
-    // Build the prompt for the AI
-    const userPrompt = `
-      Transform the HTML content based on this request: ${config.prompt}
-      
-      The current HTML of the page is:
-      \`\`\`html
-      ${htmlContext}
-      \`\`\`
-      
-      Generate HTML content that should be placed inside the target element.
-      Keep your response focused and concise, generating only the HTML required.
-    `;
-
-    // Define a simple schema for the response
-    const schema = {
-      properties: {
-        html: {
-          type: 'string',
-          description: 'The HTML content to inject into the target element',
-        },
-        explanation: {
-          type: 'string',
-          description: 'A brief explanation of the changes made (optional)',
-        },
-      },
-    };
-
-    // Call the AI with the prompt and schema
-    // Explicitly set stream to false to ensure we get a string response
-    const aiResponse = callAI(userPrompt, { schema, stream: false });
-
-    // We need to handle the response which is a Promise<string> since we set stream: false
-    if (aiResponse instanceof Promise) {
-      return aiResponse
-        .then(response => {
-          try {
-            // Parse the JSON response
-            const result = JSON.parse(response as string) as { html: string; explanation?: string };
-
-            // Extract HTML from structured response and inject it into the target element
-            targetElement.innerHTML = result.html;
-
-            // Log explanation if provided
-            if (result.explanation) {
-              // eslint-disable-next-line no-console
-              console.log('AI explanation:', result.explanation);
-            }
-
-            // Return the app instance
-            return {
-              container: targetElement,
-              database: undefined,
-            };
-          } catch (parseError: unknown) {
-            console.error('Error parsing AI response:', parseError);
-            const errorMessage =
-              parseError instanceof Error ? parseError.message : String(parseError);
-            return Promise.reject(new Error(`Failed to parse AI response: ${errorMessage}`));
-          }
-        })
-        .catch((error: unknown) => {
-          console.error('Error calling AI:', error);
-          const errorMessage = error instanceof Error ? error.message : String(error);
-          return Promise.reject(new Error(`Failed to process prompt: ${errorMessage}`));
-        });
-    } else {
-      // This should never happen with stream: false, but we need to handle it for type safety
-      return Promise.reject(new Error('Unexpected streaming response from callAI'));
-    }
-  } catch (error) {
-    // Fallback for any unexpected errors
-    console.error('Error initializing AI call:', error);
-
-    // Provide a simple fallback that shows the prompt was received
-    targetElement.innerHTML = `<div>🎭 Vibes received prompt: "${config.prompt}" (AI processing failed)</div>`;
-
-    return Promise.resolve({
-      container: targetElement,
-      database: undefined,
-    });
-  }
-}
+// Export useVibes and its types
+export { useVibes, type UseVibesConfig, type VibesApp } from './useVibes.js';

package/src/useVibes.ts

@@ -0,0 +1,116 @@
+import { callAI } from 'call-ai';
+
+// DOM element and configuration interface
+export interface UseVibesConfig {
+  prompt: string;
+  // Add more configuration options as needed
+}
+
+// App instance interface returned by useVibes
+export interface VibesApp {
+  container: HTMLElement;
+  database?: Record<string, unknown>;
+}
+
+/**
+ * The useVibes function - transforms a DOM element into an AI-augmented micro-app
+ * @param target - CSS selector string or HTMLElement to inject into
+ * @param config - Configuration object with prompt
+ * @returns Promise resolving to the app instance
+ */
+export function useVibes(target: string | HTMLElement, config: UseVibesConfig): Promise<VibesApp> {
+  // Get the target element if string selector was provided
+  const targetElement =
+    typeof target === 'string' ? (document.querySelector(target) as HTMLElement) : target;
+
+  // Validate the target element
+  if (!targetElement) {
+    return Promise.reject(new Error(`Target element not found: ${target}`));
+  }
+
+  try {
+    // Capture the current HTML state
+    const htmlContext = document.body.innerHTML;
+
+    // Build the prompt for the AI
+    const userPrompt = `
+      Transform the HTML content based on this request: ${config.prompt}
+      
+      The current HTML of the page is:
+      \`\`\`html
+      ${htmlContext}
+      \`\`\`
+      
+      Generate HTML content that should be placed inside the target element.
+      Keep your response focused and concise, generating only the HTML required.
+    `;
+
+    // Define a simple schema for the response
+    const schema = {
+      properties: {
+        html: {
+          type: 'string',
+          description: 'The HTML content to inject into the target element',
+        },
+        explanation: {
+          type: 'string',
+          description: 'A brief explanation of the changes made (optional)',
+        },
+      },
+    };
+
+    // Call the AI with the prompt and schema
+    // Explicitly set stream to false to ensure we get a string response
+    const aiResponse = callAI(userPrompt, { schema, stream: false });
+
+    // We need to handle the response which is a Promise<string> since we set stream: false
+    if (aiResponse instanceof Promise) {
+      return aiResponse
+        .then(response => {
+          try {
+            // Parse the JSON response
+            const result = JSON.parse(response as string) as { html: string; explanation?: string };
+
+            // Extract HTML from structured response and inject it into the target element
+            targetElement.innerHTML = result.html;
+
+            // Log explanation if provided
+            if (result.explanation) {
+              // eslint-disable-next-line no-console
+              console.log('AI explanation:', result.explanation);
+            }
+
+            // Return the app instance
+            return {
+              container: targetElement,
+              database: undefined,
+            };
+          } catch (parseError: unknown) {
+            console.error('Error parsing AI response:', parseError);
+            const errorMessage =
+              parseError instanceof Error ? parseError.message : String(parseError);
+            return Promise.reject(new Error(`Failed to parse AI response: ${errorMessage}`));
+          }
+        })
+        .catch((error: unknown) => {
+          console.error('Error calling AI:', error);
+          const errorMessage = error instanceof Error ? error.message : String(error);
+          return Promise.reject(new Error(`Failed to process prompt: ${errorMessage}`));
+        });
+    } else {
+      // This should never happen with stream: false, but we need to handle it for type safety
+      return Promise.reject(new Error('Unexpected streaming response from callAI'));
+    }
+  } catch (error) {
+    // Fallback for any unexpected errors
+    console.error('Error initializing AI call:', error);
+
+    // Provide a simple fallback that shows the prompt was received
+    targetElement.innerHTML = `<div>🎭 Vibes received prompt: "${config.prompt}" (AI processing failed)</div>`;
+
+    return Promise.resolve({
+      container: targetElement,
+      database: undefined,
+    });
+  }
+}

package/dist/bookmarklet.html

@@ -1,89 +0,0 @@
-
-<!DOCTYPE html>
-<html>
-<head>
-  <title>useVibes Bookmarklet</title>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <style>
-    body { 
-      font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
-      max-width: 800px;
-      margin: 0 auto;
-      padding: 20px;
-      line-height: 1.6;
-    }
-    .bookmarklet { 
-      display: inline-block;
-      padding: 8px 12px;
-      background: #4a8feb;
-      color: white;
-      text-decoration: none;
-      border-radius: 4px;
-      margin: 20px 0;
-      font-weight: bold;
-    }
-    .bookmarklet:hover {
-      background: #3a7edb;
-    }
-    code {
-      background: #f5f5f5;
-      padding: 2px 4px;
-      border-radius: 4px;
-      font-family: monospace;
-    }
-    pre {
-      background: #f5f5f5;
-      padding: 15px;
-      border-radius: 4px;
-      overflow-x: auto;
-    }
-    .note {
-      background: #fffde7;
-      border-left: 4px solid #ffeb3b;
-      padding: 10px 15px;
-      margin: 20px 0;
-    }
-  </style>
-</head>
-<body>
-  <h1>useVibes Bookmarklet</h1>
-  <p>This bookmarklet allows you to test useVibes on any website. Before using, you'll need to:</p>
-  <ol>
-    <li>Host the useVibes IIFE bundle on a web server or CDN</li>
-    <li>Get your API key for call-ai</li>
-  </ol>
-  
-  <div class="note">
-    <strong>Important:</strong> You will need to edit this bookmarklet to replace <code>YOUR_API_KEY_HERE</code> with your actual API key, and update the script URL if needed.
-  </div>
-  
-  <h2>Installation</h2>
-  <p>Drag this link to your bookmarks bar:</p>
-  <a class="bookmarklet" href="javascript:!function(){window.CALLAI_API_KEY="YOUR_API_KEY_HERE",alert("useVibes Injector: Click on any element to apply vibes to it.");let e=!0;function t(n){if(!e)return;n.preventDefault(),n.stopPropagation();const o=n.target,s=o.style.outline;o.style.outline="3px solid red";const i=prompt("Enter a prompt for useVibes:","Create a beautiful element with blue styling");i?useVibes(o,{prompt:i}).then((e=>{console.log("useVibes applied successfully!",e)})).catch((e=>{console.error("Error applying useVibes:",e),alert("Error: "+e.message)})):o.style.outline=s,e=!1,document.removeEventListener("click",t,!0)}!function(e,t){const n=document.createElement("script");n.src=e,n.onload=t,document.head.appendChild(n)}("https://unpkg.com/use-vibes@latest/lib/use-vibes.iife.js",(function(){"function"==typeof useVibes?document.addEventListener("click",t,!0):alert("useVibes library not loaded correctly!")}))}();">useVibes</a>
-  
-  <h2>Usage Instructions</h2>
-  <ol>
-    <li>Drag the above link to your bookmarks bar</li>
-    <li>Navigate to any website</li>
-    <li>Click the bookmark</li>
-    <li>Click on any element you want to enhance</li>
-    <li>Enter your prompt when prompted</li>
-    <li>Watch as useVibes transforms the element</li>
-  </ol>
-  
-  <h2>How to Customize</h2>
-  <p>To edit the bookmarklet with your API key:</p>
-  <ol>
-    <li>Right-click on the bookmarklet in your bookmarks bar</li>
-    <li>Select "Edit" or "Properties"</li>
-    <li>Find <code>CALLAI_API_KEY='YOUR_API_KEY_HERE'</code> and replace with your actual key</li>
-    <li>Find <code>useVibesScriptUrl='https://unpkg.com/use-vibes@latest/lib/use-vibes.iife.js'</code> and update if needed</li>
-  </ol>
-  
-  <h2>Bookmarklet Code</h2>
-  <p>You can also manually create the bookmarklet with this code:</p>
-  <pre>javascript:!function(){window.CALLAI_API_KEY="YOUR_API_KEY_HERE",alert("useVibes Injector: Click on any element to apply vibes to it.");let e=!0;function t(n){if(!e)return;n.preventDefault(),n.stopPropagation();const o=n.target,s=o.style.outline;o.style.outline="3px solid red";const i=prompt("Enter a prompt for useVibes:","Create a beautiful element with blue styling");i?useVibes(o,{prompt:i}).then((e=>{console.log("useVibes applied successfully!",e)})).catch((e=>{console.error("Error applying useVibes:",e),alert("Error: "+e.message)})):o.style.outline=s,e=!1,document.removeEventListener("click",t,!0)}!function(e,t){const n=document.createElement("script");n.src=e,n.onload=t,document.head.appendChild(n)}("https://unpkg.com/use-vibes@latest/lib/use-vibes.iife.js",(function(){"function"==typeof useVibes?document.addEventListener("click",t,!0):alert("useVibes library not loaded correctly!")}))}();</pre>
-</body>
-</html>
-    

package/dist/bookmarklet.js

@@ -1 +0,0 @@
-javascript:!function(){window.CALLAI_API_KEY="YOUR_API_KEY_HERE",alert("useVibes Injector: Click on any element to apply vibes to it.");let e=!0;function t(n){if(!e)return;n.preventDefault(),n.stopPropagation();const o=n.target,s=o.style.outline;o.style.outline="3px solid red";const i=prompt("Enter a prompt for useVibes:","Create a beautiful element with blue styling");i?useVibes(o,{prompt:i}).then((e=>{console.log("useVibes applied successfully!",e)})).catch((e=>{console.error("Error applying useVibes:",e),alert("Error: "+e.message)})):o.style.outline=s,e=!1,document.removeEventListener("click",t,!0)}!function(e,t){const n=document.createElement("script");n.src=e,n.onload=t,document.head.appendChild(n)}("https://unpkg.com/use-vibes@latest/lib/use-vibes.iife.js",(function(){"function"==typeof useVibes?document.addEventListener("click",t,!0):alert("useVibes library not loaded correctly!")}))}();

package/dist/src/core/vibe.d.ts

@@ -1,19 +0,0 @@
-/**
- * Vibe interface represents the core functionality
- */
-export interface Vibe {
-    /** The name of the vibe */
-    name: string;
-    /** The intensity level of the vibe */
-    intensity: number;
-    /** Set the intensity of the vibe */
-    setIntensity(level: number): void;
-    /** Get a description of the current vibe */
-    describe(): string;
-}
-/**
- * Creates a new vibe with the given name
- * @param name - Name for the vibe
- * @returns A new Vibe instance
- */
-export declare function createVibe(name: string): Vibe;

package/dist/src/core/vibe.js

@@ -1,23 +0,0 @@
-/**
- * Creates a new vibe with the given name
- * @param name - Name for the vibe
- * @returns A new Vibe instance
- */
-export function createVibe(name) {
-    let intensityLevel = 5; // Default intensity
-    return {
-        name,
-        get intensity() {
-            return intensityLevel;
-        },
-        setIntensity(level) {
-            if (level < 0 || level > 10) {
-                throw new Error('Intensity must be between 0 and 10');
-            }
-            intensityLevel = level;
-        },
-        describe() {
-            return `${name} vibe at intensity ${intensityLevel}`;
-        }
-    };
-}

package/dist/src/index.d.ts

@@ -1,14 +0,0 @@
-export interface UseVibesConfig {
-    prompt: string;
-}
-export interface VibesApp {
-    container: HTMLElement;
-    database?: Record<string, unknown>;
-}
-/**
- * The useVibes function - transforms a DOM element into an AI-augmented micro-app
- * @param target - CSS selector string or HTMLElement to inject into
- * @param config - Configuration object with prompt
- * @returns Promise resolving to the app instance
- */
-export declare function useVibes(target: string | HTMLElement, config: UseVibesConfig): Promise<VibesApp>;