@lastbrain/ai-ui-react 1.0.3

package/src/hooks/useAiCallImage.ts

@@ -0,0 +1,49 @@
+"use client";
+
+import { useState, useCallback } from "react";
+import type { AiImageRequest, AiImageResponse } from "@lastbrain/ai-ui-core";
+import { useAiClient } from "./useAiClient";
+
+export interface UseAiCallImageOptions {
+  baseUrl?: string;
+  apiKeyId?: string;
+}
+
+export interface UseAiCallImageResult {
+  generateImage: (request: AiImageRequest) => Promise<AiImageResponse>;
+  loading: boolean;
+  error: Error | null;
+}
+
+export function useAiCallImage(
+  options?: UseAiCallImageOptions
+): UseAiCallImageResult {
+  const client = useAiClient(options);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  const generateImage = useCallback(
+    async (request: AiImageRequest): Promise<AiImageResponse> => {
+      setLoading(true);
+      setError(null);
+      try {
+        const result = await client.generateImage(request);
+        return result;
+      } catch (err) {
+        const error =
+          err instanceof Error ? err : new Error("Failed to generate image");
+        setError(error);
+        throw error;
+      } finally {
+        setLoading(false);
+      }
+    },
+    [client]
+  );
+
+  return {
+    generateImage,
+    loading,
+    error,
+  };
+}

package/src/hooks/useAiCallText.ts

@@ -0,0 +1,49 @@
+"use client";
+
+import { useState, useCallback } from "react";
+import type { AiTextRequest, AiTextResponse } from "@lastbrain/ai-ui-core";
+import { useAiClient } from "./useAiClient";
+
+export interface UseAiCallTextOptions {
+  baseUrl?: string;
+  apiKeyId?: string;
+}
+
+export interface UseAiCallTextResult {
+  generateText: (request: AiTextRequest) => Promise<AiTextResponse>;
+  loading: boolean;
+  error: Error | null;
+}
+
+export function useAiCallText(
+  options?: UseAiCallTextOptions
+): UseAiCallTextResult {
+  const client = useAiClient(options);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  const generateText = useCallback(
+    async (request: AiTextRequest): Promise<AiTextResponse> => {
+      setLoading(true);
+      setError(null);
+      try {
+        const result = await client.generateText(request);
+        return result;
+      } catch (err) {
+        const error =
+          err instanceof Error ? err : new Error("Failed to generate text");
+        setError(error);
+        throw error;
+      } finally {
+        setLoading(false);
+      }
+    },
+    [client]
+  );
+
+  return {
+    generateText,
+    loading,
+    error,
+  };
+}

package/src/hooks/useAiClient.ts

@@ -0,0 +1,23 @@
+"use client";
+
+import { useMemo } from "react";
+import { createClient } from "@lastbrain/ai-ui-core";
+import { useAiContext } from "../context/AiProvider";
+
+export interface UseAiClientOptions {
+  baseUrl?: string;
+  apiKeyId?: string;
+}
+
+export function useAiClient(options?: UseAiClientOptions) {
+  const context = useAiContext();
+
+  const client = useMemo(() => {
+    const baseUrl = options?.baseUrl || context.baseUrl;
+    const apiKeyId = options?.apiKeyId || context.apiKeyId;
+
+    return createClient({ baseUrl, apiKeyId });
+  }, [options?.baseUrl, options?.apiKeyId, context.baseUrl, context.apiKeyId]);
+
+  return client;
+}

package/src/hooks/useAiModels.ts

@@ -0,0 +1,50 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import type { ModelRef } from "@lastbrain/ai-ui-core";
+import { useAiClient } from "./useAiClient";
+
+export interface UseAiModelsOptions {
+  baseUrl?: string;
+  apiKeyId?: string;
+}
+
+export interface UseAiModelsResult {
+  models: ModelRef[] | null;
+  loading: boolean;
+  error: Error | null;
+  refetch: () => void;
+}
+
+export function useAiModels(options?: UseAiModelsOptions): UseAiModelsResult {
+  const client = useAiClient(options);
+  const [models, setModels] = useState<ModelRef[] | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  const fetchModels = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const result = await client.getModels();
+      setModels(result);
+    } catch (err) {
+      setError(
+        err instanceof Error ? err : new Error("Failed to fetch models")
+      );
+    } finally {
+      setLoading(false);
+    }
+  }, [client]);
+
+  useEffect(() => {
+    fetchModels();
+  }, [fetchModels]);
+
+  return {
+    models,
+    loading,
+    error,
+    refetch: fetchModels,
+  };
+}

package/src/hooks/useAiStatus.ts

@@ -0,0 +1,50 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import type { AiStatus } from "@lastbrain/ai-ui-core";
+import { useAiClient } from "./useAiClient";
+
+export interface UseAiStatusOptions {
+  baseUrl?: string;
+  apiKeyId?: string;
+}
+
+export interface UseAiStatusResult {
+  status: AiStatus | null;
+  loading: boolean;
+  error: Error | null;
+  refetch: () => void;
+}
+
+export function useAiStatus(options?: UseAiStatusOptions): UseAiStatusResult {
+  const client = useAiClient(options);
+  const [status, setStatus] = useState<AiStatus | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  const fetchStatus = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const result = await client.getStatus();
+      setStatus(result);
+    } catch (err) {
+      setError(
+        err instanceof Error ? err : new Error("Failed to fetch status")
+      );
+    } finally {
+      setLoading(false);
+    }
+  }, [client]);
+
+  useEffect(() => {
+    fetchStatus();
+  }, [fetchStatus]);
+
+  return {
+    status,
+    loading,
+    error,
+    refetch: fetchStatus,
+  };
+}

package/src/hooks/usePrompts.ts

@@ -0,0 +1,187 @@
+"use client";
+
+import { useState, useCallback } from "react";
+import { useAiContext } from "../context/AiProvider";
+
+export interface Prompt {
+  id: string;
+  slug?: string;
+  title: string;
+  content: string;
+  type: "text" | "image";
+  is_public: boolean;
+  favorite: boolean;
+  tags: string[];
+  created_at: string;
+  updated_at?: string;
+}
+
+export interface PublicPrompt extends Prompt {
+  slug: string;
+  views: number;
+  used_count: number;
+  picked_count: number;
+}
+
+export interface UsePromptsOptions {
+  type?: "text" | "image";
+  favorite?: boolean;
+  public?: boolean;
+}
+
+export interface UsePromptsReturn {
+  prompts: Prompt[] | PublicPrompt[];
+  loading: boolean;
+  error: string | null;
+  fetchPrompts: (options?: UsePromptsOptions) => Promise<void>;
+  createPrompt: (
+    data: Omit<Prompt, "id" | "created_at" | "updated_at">
+  ) => Promise<Prompt | null>;
+  updatePrompt: (id: string, data: Partial<Prompt>) => Promise<Prompt | null>;
+  deletePrompt: (id: string) => Promise<boolean>;
+  incrementStat: (
+    promptId: string,
+    statType: "views" | "used" | "picked"
+  ) => Promise<void>;
+}
+
+export function usePrompts(): UsePromptsReturn {
+  const { apiKeyId } = useAiContext();
+  const [prompts, setPrompts] = useState<Prompt[] | PublicPrompt[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchPrompts = useCallback(async (options?: UsePromptsOptions) => {
+    try {
+      setLoading(true);
+      setError(null);
+
+      const params = new URLSearchParams();
+      if (options?.type) params.append("type", options.type);
+      if (options?.favorite !== undefined)
+        params.append("favorite", String(options.favorite));
+
+      // Use public route without auth if public=true, otherwise use auth route
+      const endpoint = options?.public
+        ? `/api/ai/public/prompts?${params}`
+        : `/api/ai/auth/prompts?${params}`;
+
+      const response = await fetch(endpoint);
+
+      const data = await response.json();
+
+      if (response.ok) {
+        setPrompts(data.prompts || []);
+      } else {
+        setError(data.error || "Failed to fetch prompts");
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Unknown error");
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  const createPrompt = useCallback(
+    async (data: Omit<Prompt, "id" | "created_at" | "updated_at">) => {
+      try {
+        setError(null);
+
+        const response = await fetch("/api/ai/auth/prompts", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(data),
+        });
+
+        const result = await response.json();
+
+        if (response.ok) {
+          return result.prompt;
+        } else {
+          setError(result.error || "Failed to create prompt");
+          return null;
+        }
+      } catch (err) {
+        setError(err instanceof Error ? err.message : "Unknown error");
+        return null;
+      }
+    },
+    []
+  );
+
+  const updatePrompt = useCallback(
+    async (id: string, data: Partial<Prompt>) => {
+      try {
+        setError(null);
+
+        const response = await fetch("/api/ai/auth/prompts", {
+          method: "PUT",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ id, ...data }),
+        });
+
+        const result = await response.json();
+
+        if (response.ok) {
+          return result.prompt;
+        } else {
+          setError(result.error || "Failed to update prompt");
+          return null;
+        }
+      } catch (err) {
+        setError(err instanceof Error ? err.message : "Unknown error");
+        return null;
+      }
+    },
+    []
+  );
+
+  const deletePrompt = useCallback(async (id: string) => {
+    try {
+      setError(null);
+
+      const response = await fetch(`/api/ai/auth/prompts?id=${id}`, {
+        method: "DELETE",
+      });
+
+      const result = await response.json();
+
+      if (response.ok) {
+        return true;
+      } else {
+        setError(result.error || "Failed to delete prompt");
+        return false;
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Unknown error");
+      return false;
+    }
+  }, []);
+
+  const incrementStat = useCallback(
+    async (promptId: string, statType: "views" | "used" | "picked") => {
+      try {
+        await fetch("/api/ai/auth/prompts/stats", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ prompt_id: promptId, stat_type: statType }),
+        });
+      } catch (err) {
+        // Silent fail for stats
+        console.error("Failed to increment stat:", err);
+      }
+    },
+    []
+  );
+
+  return {
+    prompts,
+    loading,
+    error,
+    fetchPrompts,
+    createPrompt,
+    updatePrompt,
+    deletePrompt,
+    incrementStat,
+  };
+}

package/src/index.ts

@@ -0,0 +1,23 @@
+// Types
+export * from "./types";
+
+// Context
+export * from "./context/AiProvider";
+
+// Hooks
+export * from "./hooks/useAiClient";
+export * from "./hooks/useAiModels";
+export * from "./hooks/useAiStatus";
+export * from "./hooks/useAiCallText";
+export * from "./hooks/useAiCallImage";
+export * from "./hooks/usePrompts";
+
+// Components
+export * from "./components/AiPromptPanel";
+export * from "./components/AiModelSelect";
+export * from "./components/AiInput";
+export * from "./components/AiTextarea";
+export * from "./components/AiSelect";
+export * from "./components/AiChipLabel";
+export * from "./components/AiImageButton";
+export * from "./components/AiSettingsButton";

package/src/types.ts

@@ -0,0 +1,20 @@
+export type ToastType = {
+  type: "success" | "error";
+  message: string;
+  code?: string;
+};
+export type UiMode = "modal" | "drawer";
+
+export interface BaseAiProps {
+  baseUrl?: string;
+  apiKeyId?: string;
+  type?: UiMode;
+  context?: string | null;
+  model?: string | null;
+  prompt?: string | null;
+  editMode?: boolean;
+  onValue?: (value: string) => void;
+  onToast?: (toast: ToastType) => void;
+  disabled?: boolean;
+  className?: string;
+}