@slopmachine/react 0.1.13 → 0.1.15

package/src/components/SlopText.tsx

@@ -0,0 +1,237 @@
+import React, { useEffect, useState } from "react";
+import { buildTextUrl, type SlopTextOptions } from "@slopmachine/core";
+import { marked } from "marked";
+
+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
+ * <SlopText
+ *   bucketId="my-text-bucket"
+ *   fallback={<div>Loading story...</div>}
+ *   errorFallback={<div>Failed to load story</div>}
+ *   className="text-lg text-gray-800"
+ * />
+ * ```
+ *
+ * @version 0.1.15
+ */
+export const SlopText = React.forwardRef<HTMLDivElement, SlopTextProps>(
+  (
+    {
+      bucketId,
+      version,
+      resultId,
+      model,
+      variables,
+      baseUrl,
+      fallback,
+      errorFallback,
+      ...props
+    },
+    ref,
+  ) => {
+    const [text, setText] = useState<string | null>(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<Error | null>(null);
+
+    useEffect(() => {
+      let isMounted = true;
+
+      const fetchText = async () => {
+        try {
+          setLoading(true);
+          setError(null);
+
+          const url = buildTextUrl({
+            bucketId,
+            version,
+            resultId,
+            model,
+            variables,
+            baseUrl,
+          });
+
+          // Fetch the URL to get the content, following redirects automatically
+          const response = await fetch(url);
+          if (!response.ok) {
+            throw new Error(`Failed to fetch text: ${response.statusText}`);
+          }
+          const content = await response.text();
+          if (isMounted) {
+            setText(content);
+          }
+        } catch (err) {
+          if (isMounted) {
+            setError(
+              err instanceof Error ? err : new Error("Failed to generate text"),
+            );
+          }
+        } finally {
+          if (isMounted) {
+            setLoading(false);
+          }
+        }
+      };
+
+      fetchText();
+
+      return () => {
+        isMounted = false;
+      };
+    }, [
+      bucketId,
+      version,
+      resultId,
+      model,
+      JSON.stringify(variables),
+      baseUrl,
+    ]);
+
+    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",
+              backgroundColor: "var(--muted, #f3f4f6)",
+              borderRadius: "0.375rem",
+            }}
+          >
+            {/* 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 ? (marked.parse(text) as string) : "",
+        }}
+      />
+    );
+  },
+);
+
+SlopText.displayName = "SlopText";

package/src/components/SlopVideo.tsx

@@ -46,6 +46,8 @@ export interface SlopVideoProps
  *   muted
  * />
  * ```
+ *
+ * @version 0.1.15
  */
 export const SlopVideo: React.FC<SlopVideoProps> = ({
   bucketId,
@@ -54,6 +56,7 @@ export const SlopVideo: React.FC<SlopVideoProps> = ({
   version,
   resultId,
   model,
+  quality = "fast",
   variables = {},
   duration,
   baseUrl,
@@ -76,6 +79,7 @@ export const SlopVideo: React.FC<SlopVideoProps> = ({
         duration,
         baseUrl,
         model,
+        quality,
       }),
     [
       bucketId,
@@ -86,6 +90,7 @@ export const SlopVideo: React.FC<SlopVideoProps> = ({
       duration,
       baseUrl,
       model,
+      quality,
     ],
   );
 

package/src/index.ts

@@ -1,5 +1,7 @@
 export { SlopImage, type SlopImageProps } from "./components/SlopImage";
 export { SlopVideo, type SlopVideoProps } from "./components/SlopVideo";
+export { SlopText, type SlopTextProps } from "./components/SlopText";
+
 export type {
   ImageAspectRatio,
   VideoAspectRatio,