use-vibes 0.2.4 → 0.2.5

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "use-vibes",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "type": "module",
   "description": "Transform any DOM element into an AI-powered micro-app",
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "exports": "./dist/index.js",
+  "main": "dist/index.js",
+  "browser": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
   "keywords": [
     "ai",
     "dom",
@@ -19,11 +19,7 @@
   "author": "",
   "license": "MIT",
   "files": [
-    "dist/",
-    "lib/",
-    "src/",
-    "LICENSE",
-    "README.md"
+    "dist"
   ],
   "devDependencies": {
     "@playwright/test": "^1.41.2",

package/src/components/ImgGen.tsx

@@ -1,242 +0,0 @@
-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,9 +0,0 @@
-// Re-export everything from call-ai
-export * from 'call-ai';
-
-// Export ImgGen component
-export { default as ImgGen } from './components/ImgGen';
-export type { ImgGenProps } from './components/ImgGen';
-
-// Export useVibes and its types
-export { useVibes, type UseVibesConfig, type VibesApp } from './useVibes';

package/src/useVibes.ts

@@ -1,116 +0,0 @@
-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,
-    });
-  }
-}