@slopmachine/react 0.6.0 → 0.8.0

package/src/components/SlopImage.tsx

@@ -1,353 +0,0 @@
-import React, { useMemo, useState } from "react";
-import { clsx, type ClassValue } from "clsx";
-import { twMerge } from "tailwind-merge";
-
-import {
-  buildImageUrl,
-  type SlopImageOptions,
-  type ImageAspectRatio,
-} from "@slopmachine/core";
-
-// Utility for Tailwind classes
-function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}
-
-export interface SlopImageProps
-  extends
-    Omit<React.ImgHTMLAttributes<HTMLImageElement>, "src" | "alt">,
-    Omit<SlopImageOptions, "aspectRatio"> {
-  /**
-   * The aspect ratio of the generated image. Defaults to "1:1".
-   */
-  aspectRatio?: ImageAspectRatio;
-  /**
-   * Custom React node to display while the image is loading.
-   * If not provided, a default spinner and shimmer effect will be shown.
-   */
-  loader?: React.ReactNode;
-  /**
-   * How the image should be resized to fit its container. Defaults to "cover".
-   */
-  objectFit?: React.CSSProperties["objectFit"];
-  /**
-   * Additional CSS classes to apply directly to the `<img />` element.
-   */
-  imageClassName?: string;
-}
-
-/**
- * Renders an image generated by Slop Machine.
- *
- * This component automatically constructs the correct URL for the Slop Machine API,
- * displays a loading skeleton or custom loader while fetching, and handles errors.
- *
- * @example
- * ```tsx
- * // Using a Bucket
- * <SlopImage
- *   bucketId="my-bucket"
- *   resultId="some-result"
- *   aspectRatio="16:9"
- *   className="rounded-lg"
- *   objectFit="cover"
- * />
- *
- * // Using a Pipeline with runtime prompt
- * <SlopImage
- *   pipelineId="pipe_live_abc123"
- *   prompt="1960s retro robot eating pizza on Mars"
- *   aspectRatio="16:9"
- *   metadata={{ userId: "123" }}
- * />
- * ```
- *
- * @version 0.6.0
- */
-export const SlopImage: React.FC<SlopImageProps> = ({
-  bucketId,
-  pipelineId,
-  siloId,
-  prompt,
-  metadata,
-  className,
-  aspectRatio = "1:1",
-  model,
-  version,
-  resultId,
-  variables = {},
-  baseUrl,
-  original,
-  attachments,
-  loader,
-  objectFit = "cover",
-  imageClassName,
-  style,
-  onLoad,
-  onError,
-  ...props
-}) => {
-  // Construct API URL
-  const rawSrc = useMemo(
-    () =>
-      buildImageUrl({
-        bucketId,
-        pipelineId,
-        siloId,
-        prompt,
-        metadata,
-        aspectRatio,
-        model,
-        version,
-        resultId,
-        variables,
-        baseUrl,
-        original,
-        attachments,
-      }),
-    [
-      bucketId,
-      pipelineId,
-      siloId,
-      prompt,
-      metadata,
-      aspectRatio,
-      model,
-      version,
-      resultId,
-      variables,
-      baseUrl,
-      original,
-      attachments,
-    ],
-  );
-
-  const [src, setSrc] = useState(rawSrc);
-
-  React.useEffect(() => {
-    const timer = setTimeout(() => {
-      setSrc(rawSrc);
-    }, 100);
-    return () => clearTimeout(timer);
-  }, [rawSrc]);
-
-  const alt = "Image produced by Slop Machine (slopmachine.dev)";
-
-  const [isLoading, setIsLoading] = useState(true);
-  const [currentSrc, setCurrentSrc] = useState(src);
-
-  if (src !== currentSrc) {
-    setCurrentSrc(src);
-    setIsLoading(true);
-  }
-
-  React.useEffect(() => {
-    if (!src) return;
-
-    fetch(src, { method: "HEAD" })
-      .then(async (res) => {
-        if (!res.ok) {
-          let errorMessage = res.statusText;
-          try {
-            const errRes = await fetch(src);
-            const errorText = await errRes.text();
-            const errorData = JSON.parse(errorText);
-            if (errorData.error) {
-              errorMessage = errorData.error;
-            }
-          } catch (e) {
-            // Failed to fetch or parse error details
-          }
-          console.error("SlopImage error:", res.status, errorMessage);
-          setIsLoading(false);
-        }
-      })
-      .catch((err) => {
-        console.error(`Error fetching image from ${src}:`, err);
-        setIsLoading(false);
-      });
-  }, [src]);
-
-  return (
-    <>
-      <style>{`
-        @keyframes slop-shimmer {
-          0% {
-            background-position: 200% 0;
-          }
-          100% {
-            background-position: -200% 0;
-          }
-        }
-        @keyframes slop-spin {
-          from {
-            transform: rotate(0deg);
-          }
-          to {
-            transform: rotate(360deg);
-          }
-        }
-      `}</style>
-      <div className={className} style={style}>
-        <div
-          className="slop-wrapper relative overflow-hidden w-full h-full"
-          style={{
-            aspectRatio: String(aspectRatio).replace(":", "/"),
-            position: "relative",
-            overflow: "hidden",
-            width: "100%",
-            height: "100%",
-          }}
-        >
-          {/* Loading UI */}
-          {loader ? (
-            <div
-              className={cn(
-                "absolute inset-0 z-10 flex items-center justify-center transition-opacity duration-300",
-                isLoading ? "opacity-100" : "opacity-0 pointer-events-none",
-              )}
-              style={{
-                position: "absolute",
-                top: 0,
-                left: 0,
-                right: 0,
-                bottom: 0,
-                zIndex: 10,
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                opacity: isLoading ? 1 : 0,
-                pointerEvents: isLoading ? "auto" : "none",
-                transition: "opacity 300ms ease-in-out",
-              }}
-            >
-              {loader}
-            </div>
-          ) : (
-            <>
-              {/* Loading overlay */}
-              <div
-                className={cn(
-                  "absolute inset-0 z-10 flex items-center justify-center bg-muted transition-opacity duration-300",
-                  isLoading ? "opacity-100" : "opacity-0 pointer-events-none",
-                )}
-                style={{
-                  position: "absolute",
-                  top: 0,
-                  left: 0,
-                  right: 0,
-                  bottom: 0,
-                  zIndex: 10,
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "center",
-                  backgroundColor: "var(--muted, #f3f4f6)",
-                  opacity: isLoading ? 1 : 0,
-                  pointerEvents: isLoading ? "auto" : "none",
-                  transition: "opacity 300ms ease-in-out",
-                }}
-              >
-                <div
-                  className="flex flex-col items-center gap-2"
-                  style={{
-                    display: "flex",
-                    flexDirection: "column",
-                    alignItems: "center",
-                    gap: "0.5rem",
-                  }}
-                >
-                  <svg
-                    className="spinner size-6 text-muted-foreground"
-                    xmlns="http://www.w3.org/2000/svg"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    style={{
-                      width: "24px",
-                      height: "24px",
-                      color: "var(--muted-foreground, #6b7280)",
-                      animation: "slop-spin 1s linear infinite",
-                    }}
-                  >
-                    <circle
-                      className="opacity-25"
-                      cx="12"
-                      cy="12"
-                      r="10"
-                      stroke="currentColor"
-                      strokeWidth="4"
-                      style={{ opacity: 0.25 }}
-                    />
-                    <path
-                      className="opacity-75"
-                      fill="currentColor"
-                      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-                      style={{ opacity: 0.75 }}
-                    />
-                  </svg>
-                  <span
-                    className="text-xs text-muted-foreground"
-                    style={{
-                      fontSize: "0.75rem",
-                      color: "var(--muted-foreground, #6b7280)",
-                    }}
-                  >
-                    Loading...
-                  </span>
-                </div>
-              </div>
-
-              {/* Shimmer effect underneath */}
-              <div
-                className={cn(
-                  "shimmer-effect absolute inset-0 bg-gradient-to-r from-muted via-muted/50 to-muted",
-                  isLoading ? "opacity-100" : "opacity-0",
-                )}
-                style={{
-                  position: "absolute",
-                  top: 0,
-                  left: 0,
-                  right: 0,
-                  bottom: 0,
-                  background:
-                    "linear-gradient(90deg, var(--muted, #f3f4f6) 0%, var(--muted-foreground, #e5e7eb) 50%, var(--muted, #f3f4f6) 100%)",
-                  backgroundSize: "200% 100%",
-                  animation: "slop-shimmer 2s ease-in-out infinite",
-                  opacity: isLoading ? 1 : 0,
-                  transition: "opacity 300ms",
-                }}
-              />
-            </>
-          )}
-
-          {/* Image */}
-          <img
-            key={src}
-            src={src}
-            alt={alt}
-            {...props}
-            onLoad={(e) => {
-              setIsLoading(false);
-              onLoad?.(e);
-            }}
-            onError={(e) => {
-              setIsLoading(false);
-              onError?.(e);
-            }}
-            className={cn(
-              "h-full w-full transition-opacity duration-500",
-              isLoading ? "opacity-0" : "opacity-100",
-              imageClassName,
-            )}
-            style={{
-              height: "100%",
-              width: "100%",
-              objectFit,
-              transition: "opacity 500ms",
-              opacity: isLoading ? 0 : 1,
-            }}
-          />
-        </div>
-      </div>
-    </>
-  );
-};

package/src/components/SlopText.tsx

@@ -1,276 +0,0 @@
-import React, { useEffect, useMemo, useState } from "react";
-import {
-  buildTextUrl,
-  renderMarkdown,
-  type SlopTextOptions,
-} from "@slopmachine/core";
-
-export interface SlopTextProps
-  extends
-    Omit<React.HTMLAttributes<HTMLDivElement>, "children">,
-    SlopTextOptions {
-  /**
-   * Optional loading component to show while the text is being generated
-   */
-  fallback?: React.ReactNode;
-  /**
-   * Optional error component to show if the text generation fails
-   */
-  errorFallback?: React.ReactNode;
-}
-
-/**
- * Renders text generated by Slop Machine.
- *
- * This component automatically constructs the correct URL for the Slop Machine API,
- * fetches the generated text, and displays it with optional loading and error states.
- *
- * @example
- * ```tsx
- * // Using a Bucket
- * <SlopText
- *   bucketId="my-text-bucket"
- *   fallback={<div>Loading story...</div>}
- *   errorFallback={<div>Failed to load story</div>}
- *   className="text-lg text-gray-800"
- * />
- *
- * // Using a Pipeline with runtime prompt
- * <SlopText
- *   pipelineId="pipe_live_abc123"
- *   prompt="Write a whimsical haiku about quantum physics"
- *   metadata={{ userId: "123" }}
- * />
- * ```
- *
- * @version 0.6.0
- */
-export const SlopText = React.forwardRef<HTMLDivElement, SlopTextProps>(
-  (
-    {
-      bucketId,
-      pipelineId,
-      siloId,
-      prompt,
-      metadata,
-      version,
-      resultId,
-      model,
-      variables,
-      baseUrl,
-      attachments,
-      fallback,
-      errorFallback,
-      ...props
-    },
-    ref,
-  ) => {
-    const [text, setText] = useState<string | null>(null);
-    const [loading, setLoading] = useState(true);
-    const [error, setError] = useState<Error | null>(null);
-
-    const rawUrl = useMemo(
-      () =>
-        buildTextUrl({
-          bucketId,
-          pipelineId,
-          siloId,
-          prompt,
-          metadata,
-          version,
-          resultId,
-          model,
-          variables,
-          baseUrl,
-          attachments,
-        }),
-      [
-        bucketId,
-        pipelineId,
-        siloId,
-        prompt,
-        JSON.stringify(metadata),
-        version,
-        resultId,
-        model,
-        JSON.stringify(variables),
-        baseUrl,
-        JSON.stringify(attachments),
-      ],
-    );
-
-    useEffect(() => {
-      let isMounted = true;
-
-      const fetchText = async () => {
-        try {
-          setLoading(true);
-          setError(null);
-
-          // Fetch the URL to get the content, following redirects automatically
-          const response = await fetch(rawUrl, { cache: "no-store" });
-          if (!response.ok) {
-            let errorMessage = response.statusText;
-            try {
-              const errorText = await response.text();
-              const errorData = JSON.parse(errorText);
-              if (errorData.error) {
-                errorMessage = errorData.error;
-              }
-            } catch (e) {
-              // Ignore JSON parse errors if the response isn't JSON
-            }
-            throw new Error(`Failed to fetch text: ${errorMessage}`);
-          }
-          const content = await response.text();
-          if (isMounted) {
-            setText(content);
-          }
-        } catch (err) {
-          if (isMounted) {
-            const finalError =
-              err instanceof Error ? err : new Error("Failed to generate text");
-            console.error(finalError);
-            setError(finalError);
-          }
-        } finally {
-          if (isMounted) {
-            setLoading(false);
-          }
-        }
-      };
-
-      fetchText();
-
-      return () => {
-        isMounted = false;
-      };
-    }, [rawUrl]);
-
-    if (error && errorFallback) {
-      return <>{errorFallback}</>;
-    }
-
-    if (loading) {
-      if (fallback) {
-        return <>{fallback}</>;
-      }
-      return (
-        <div className={props.className} style={props.style}>
-          <style>{`
-            @keyframes slop-shimmer {
-              0% { background-position: 200% 0; }
-              100% { background-position: -200% 0; }
-            }
-            @keyframes slop-spin {
-              from { transform: rotate(0deg); }
-              to { transform: rotate(360deg); }
-            }
-          `}</style>
-          <div
-            className="slop-wrapper relative overflow-hidden w-full"
-            style={{
-              position: "relative",
-              overflow: "hidden",
-              width: "100%",
-              minHeight: "100px",
-            }}
-          >
-            {/* Loading overlay */}
-            <div
-              className="absolute inset-0 z-10 flex items-center justify-center bg-muted transition-opacity duration-300"
-              style={{
-                position: "absolute",
-                top: 0,
-                left: 0,
-                right: 0,
-                bottom: 0,
-                zIndex: 10,
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                backgroundColor: "var(--muted, #f3f4f6)",
-              }}
-            >
-              <div
-                className="flex flex-col items-center gap-2"
-                style={{
-                  display: "flex",
-                  flexDirection: "column",
-                  alignItems: "center",
-                  gap: "0.5rem",
-                }}
-              >
-                <svg
-                  className="spinner size-6 text-muted-foreground"
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  style={{
-                    width: "24px",
-                    height: "24px",
-                    color: "var(--muted-foreground, #6b7280)",
-                    animation: "slop-spin 1s linear infinite",
-                  }}
-                >
-                  <circle
-                    className="opacity-25"
-                    cx="12"
-                    cy="12"
-                    r="10"
-                    stroke="currentColor"
-                    strokeWidth="4"
-                    style={{ opacity: 0.25 }}
-                  />
-                  <path
-                    className="opacity-75"
-                    fill="currentColor"
-                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-                    style={{ opacity: 0.75 }}
-                  />
-                </svg>
-                <span
-                  className="text-xs text-muted-foreground"
-                  style={{
-                    fontSize: "0.75rem",
-                    color: "var(--muted-foreground, #6b7280)",
-                  }}
-                >
-                  Loading...
-                </span>
-              </div>
-            </div>
-
-            {/* Shimmer effect underneath */}
-            <div
-              className="shimmer-effect absolute inset-0 bg-gradient-to-r from-muted via-muted/50 to-muted"
-              style={{
-                position: "absolute",
-                top: 0,
-                left: 0,
-                right: 0,
-                bottom: 0,
-                background:
-                  "linear-gradient(90deg, var(--muted, #f3f4f6) 0%, var(--muted-foreground, #e5e7eb) 50%, var(--muted, #f3f4f6) 100%)",
-                backgroundSize: "200% 100%",
-                animation: "slop-shimmer 2s ease-in-out infinite",
-              }}
-            />
-          </div>
-        </div>
-      );
-    }
-
-    return (
-      <div
-        ref={ref}
-        {...props}
-        dangerouslySetInnerHTML={{
-          __html: text ? renderMarkdown(text) : "",
-        }}
-      />
-    );
-  },
-);
-
-SlopText.displayName = "SlopText";