@lastbrain/ai-ui-react 1.0.9 → 1.0.11

package/src/components/AiTextarea.tsx

@@ -1,10 +1,17 @@
 "use client";
 
-import React, { useState, useRef, type TextareaHTMLAttributes } from "react";
+import React, {
+  useState,
+  useRef,
+  useLayoutEffect,
+  type TextareaHTMLAttributes,
+} from "react";
+import { Sparkles } from "lucide-react";
 import type { BaseAiProps } from "../types";
 import { useAiCallText } from "../hooks/useAiCallText";
 import { useAiModels } from "../hooks/useAiModels";
 import { AiPromptPanel } from "./AiPromptPanel";
+import { UsageToast, useUsageToast } from "./UsageToast";
 import { aiStyles } from "../styles/inline";
 
 export interface AiTextareaProps
@@ -37,6 +44,7 @@ export function AiTextarea({
   const [isFocused, setIsFocused] = useState(false);
   const [isButtonHovered, setIsButtonHovered] = useState(false);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const { showUsageToast, toastData, toastKey, clearToast } = useUsageToast();
 
   const { models } = useAiModels({ baseUrl, apiKeyId });
   const { generateText, loading } = useAiCallText({ baseUrl, apiKeyId });
@@ -53,14 +61,22 @@ export function AiTextarea({
 
   const handleSubmit = async (
     selectedModel: string,
-    selectedPrompt: string
+    selectedPrompt: string,
+    promptId?: string
   ) => {
     try {
+      const resolvedContext = textareaValue || context || undefined;
+      const hasContext = Boolean(
+        resolvedContext && String(resolvedContext).trim()
+      );
+      const promptWithContext = hasContext
+        ? `${selectedPrompt}\n\nTexte:\n${String(resolvedContext)}`
+        : selectedPrompt;
       const result = await generateText({
         model: selectedModel,
-        prompt: selectedPrompt,
-        context: textareaValue || context || undefined,
-        actionType: "autocomplete",
+        prompt: promptWithContext,
+        context: resolvedContext,
+        actionType: hasContext ? "generate-text" : "autocomplete",
       });
 
       if (result.text) {
@@ -70,6 +86,7 @@ export function AiTextarea({
         }
         onValue?.(result.text);
         onToast?.({ type: "success", message: "AI generation successful" });
+        showUsageToast(result);
       }
     } catch (error) {
       onToast?.({ type: "error", message: "Failed to generate text" });
@@ -82,11 +99,18 @@ export function AiTextarea({
     if (!model || !prompt) return;
 
     try {
+      const resolvedContext = textareaValue || context || undefined;
+      const hasContext = Boolean(
+        resolvedContext && String(resolvedContext).trim()
+      );
+      const promptWithContext = hasContext
+        ? `${prompt}\n\nTexte:\n${String(resolvedContext)}`
+        : prompt;
       const result = await generateText({
         model,
-        prompt,
-        context: textareaValue || context || undefined,
-        actionType: "autocomplete",
+        prompt: promptWithContext,
+        context: resolvedContext,
+        actionType: hasContext ? "generate-text" : "autocomplete",
       });
 
       if (result.text) {
@@ -96,6 +120,7 @@ export function AiTextarea({
         }
         onValue?.(result.text);
         onToast?.({ type: "success", message: "AI generation successful" });
+        showUsageToast(result);
       }
     } catch (error) {
       onToast?.({ type: "error", message: "Failed to generate text" });
@@ -108,6 +133,20 @@ export function AiTextarea({
     textareaProps.onChange?.(e);
   };
 
+  const adjustHeight = () => {
+    const element = textareaRef.current;
+    if (!element) {
+      return;
+    }
+
+    element.style.height = "auto";
+    element.style.height = `${element.scrollHeight}px`;
+  };
+
+  useLayoutEffect(() => {
+    adjustHeight();
+  }, [textareaValue]);
+
   return (
     <div style={aiStyles.textareaWrapper} className={className}>
       <textarea
@@ -122,6 +161,7 @@ export function AiTextarea({
         onFocus={(e) => {
           setIsFocused(true);
           textareaProps.onFocus?.(e);
+          adjustHeight();
         }}
         onBlur={(e) => {
           setIsFocused(false);
@@ -155,28 +195,8 @@ export function AiTextarea({
           >
             <path d="M12 2v4m0 12v4M4.93 4.93l2.83 2.83m8.48 8.48l2.83 2.83M2 12h4m12 0h4M4.93 19.07l2.83-2.83m8.48-8.48l2.83-2.83" />
           </svg>
-        ) : hasConfiguration ? (
-          <svg
-            width="16"
-            height="16"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            strokeWidth="2"
-          >
-            <path d="M12 5v14M5 12h14" />
-          </svg>
         ) : (
-          <svg
-            width="16"
-            height="16"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            strokeWidth="2"
-          >
-            <path d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
-          </svg>
+          <Sparkles size={16} />
         )}
       </button>
       {isOpen && (
@@ -186,6 +206,15 @@ export function AiTextarea({
           onSubmit={handleSubmit}
           uiMode={uiMode}
           models={models || []}
+          sourceText={textareaValue || undefined}
+        />
+      )}
+      {Boolean(toastData) && (
+        <UsageToast
+          key={toastKey}
+          result={toastData}
+          position="bottom-right"
+          onComplete={clearToast}
         />
       )}
     </div>

package/src/components/UsageToast.tsx

@@ -0,0 +1,182 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { X } from "lucide-react";
+
+interface UsageToastProps {
+  result: unknown;
+  position?: "bottom-right" | "bottom-left" | "top-right" | "top-left";
+  onComplete?: () => void;
+}
+
+export function UsageToast({
+  result,
+  position = "bottom-right",
+  onComplete,
+}: UsageToastProps) {
+  const [isVisible, setIsVisible] = useState(false);
+  const [isClosing, setIsClosing] = useState(false);
+  const fadeTimeoutRef = useRef<number | null>(null);
+
+  useEffect(() => {
+    if (result) {
+      // Show toast immediately
+      setIsVisible(true);
+      setIsClosing(false);
+    }
+
+    return () => {
+      if (fadeTimeoutRef.current) {
+        window.clearTimeout(fadeTimeoutRef.current);
+      }
+    };
+  }, [result]);
+
+  const handleClose = () => {
+    if (isClosing) return;
+    setIsClosing(true);
+    fadeTimeoutRef.current = window.setTimeout(() => {
+      setIsVisible(false);
+      onComplete?.();
+    }, 200);
+  };
+
+  const extractUsageMessage = (data: unknown) => {
+    const result = data as any;
+
+    // Extract cost from various possible locations
+    const rawCost =
+      result?.cost ??
+      result?.price ??
+      result?.usage?.cost ??
+      result?.usage?.total ??
+      result?.usage?.usd ??
+      result?.usage?.credits ??
+      result?.tokens?.cost ??
+      result?.tokens?.price ??
+      result?.balance?.cost ??
+      result?.balance?.used ??
+      result?.balance?.spent ??
+      result?.credits_used ??
+      result?.usd ??
+      0;
+
+    const cost = Number.isFinite(Number(rawCost)) ? Number(rawCost) : 0;
+
+    // Smart formatting: show meaningful decimals
+    let formatted;
+    if (cost >= 1) {
+      formatted = cost.toFixed(2);
+    } else if (cost >= 0.01) {
+      formatted = cost.toFixed(4);
+    } else if (cost >= 0.0001) {
+      formatted = cost.toFixed(6);
+    } else if (cost > 0) {
+      formatted = cost.toFixed(8);
+    } else {
+      formatted = "0.0000";
+    }
+
+    // Remove trailing zeros
+    formatted = parseFloat(formatted).toString();
+
+    return `${formatted}$ used`;
+  };
+
+  const message = extractUsageMessage(result);
+  if (!result) return null;
+
+  const getPositionStyles = () => {
+    const baseStyles = {
+      position: "absolute" as const,
+      zIndex: 1000,
+    };
+
+    switch (position) {
+      case "bottom-right":
+        return { ...baseStyles, bottom: "8px", right: "8px" };
+      case "bottom-left":
+        return { ...baseStyles, bottom: "8px", left: "8px" };
+      case "top-right":
+        return { ...baseStyles, top: "8px", right: "8px" };
+      case "top-left":
+        return { ...baseStyles, top: "8px", left: "8px" };
+      default:
+        return { ...baseStyles, bottom: "8px", right: "8px" };
+    }
+  };
+
+  return (
+    <div
+      style={{
+        ...getPositionStyles(),
+        opacity: isVisible && !isClosing ? 1 : 0,
+        transform: `translateY(${isVisible && !isClosing ? "0" : "8px"})`,
+        transition: "opacity 200ms ease, transform 200ms ease",
+        padding: "4px 6px",
+        borderRadius: "6px",
+        marginBottom: "4px",
+        right: "6px",
+        background: "rgba(22, 163, 74, 0.12)",
+        border: "1px solid rgba(22, 163, 74, 0.3)",
+        color: "#16a34a",
+        fontSize: "9px",
+        fontWeight: 600,
+        display: "flex",
+        alignItems: "center",
+        gap: "8px",
+        boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1)",
+        backdropFilter: "blur(4px)",
+        WebkitBackdropFilter: "blur(4px)",
+      }}
+    >
+      <span>{message}</span>
+      <button
+        onClick={handleClose}
+        style={{
+          background: "transparent",
+          border: "none",
+          color: "#16a34a",
+          cursor: "pointer",
+          padding: "2px",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          borderRadius: "4px",
+          transition: "background-color 150ms ease",
+        }}
+        onMouseEnter={(e) => {
+          e.currentTarget.style.backgroundColor = "rgba(22, 163, 74, 0.2)";
+        }}
+        onMouseLeave={(e) => {
+          e.currentTarget.style.backgroundColor = "transparent";
+        }}
+        title="Close"
+      >
+        <X size={12} />
+      </button>
+    </div>
+  );
+}
+
+export function useUsageToast() {
+  const [toastData, setToastData] = useState<unknown>(null);
+  const [toastKey, setToastKey] = useState(0);
+
+  const showUsageToast = (result: unknown) => {
+    // Replace any existing toast with new one
+    setToastKey((prev) => prev + 1);
+    setToastData(result);
+  };
+
+  const clearToast = () => {
+    setToastData(null);
+  };
+
+  return {
+    showUsageToast,
+    toastData,
+    toastKey,
+    clearToast,
+  };
+}

package/src/hooks/usePrompts.ts

@@ -12,6 +12,7 @@ export interface Prompt {
   is_public: boolean;
   favorite: boolean;
   tags: string[];
+  model?: string | null;
   created_at: string;
   updated_at?: string;
 }
@@ -168,7 +169,6 @@ export function usePrompts(): UsePromptsReturn {
         });
       } catch (err) {
         // Silent fail for stats
-        console.error("Failed to increment stat:", err);
       }
     },
     []