@lastbrain/ai-ui-react 1.0.8 → 1.0.10

package/src/components/AiStatusButton.tsx

@@ -1,8 +1,8 @@
 "use client";
 
 import type { AiStatus } from "@lastbrain/ai-ui-core";
-import { useState } from "react";
-import { aiStyles } from "../styles/inline";
+import { useState, useRef, useEffect } from "react";
+import { aiStyles, calculateTooltipPosition } from "../styles/inline";
 
 export interface AiStatusButtonProps {
   status: AiStatus | null;
@@ -17,10 +17,40 @@ export function AiStatusButton({
 }: AiStatusButtonProps) {
   const [showTooltip, setShowTooltip] = useState(false);
   const [isHovered, setIsHovered] = useState(false);
+  const [tooltipPosition, setTooltipPosition] = useState<any>({});
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const tooltipRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (showTooltip && buttonRef.current) {
+      const buttonRect = buttonRef.current.getBoundingClientRect();
+      const position = calculateTooltipPosition(buttonRect);
+      setTooltipPosition(position);
+    }
+  }, [showTooltip]);
+
+  const handleMouseEnter = () => {
+    setShowTooltip(true);
+    setIsHovered(true);
+  };
+
+  const handleMouseLeave = () => {
+    // Keep tooltip visible if hovering over it
+    setTimeout(() => {
+      if (
+        !tooltipRef.current?.matches(":hover") &&
+        !buttonRef.current?.matches(":hover")
+      ) {
+        setShowTooltip(false);
+        setIsHovered(false);
+      }
+    }, 100);
+  };
 
   if (loading) {
     return (
       <button
+        ref={buttonRef}
         style={{
           ...aiStyles.statusButton,
           ...aiStyles.statusButtonDisabled,
@@ -29,9 +59,7 @@ export function AiStatusButton({
         disabled
       >
         <svg
-          style={{
-            animation: "ai-spin 1s linear infinite",
-          }}
+          style={aiStyles.spinner}
           width="16"
           height="16"
           viewBox="0 0 24 24"
@@ -48,20 +76,15 @@ export function AiStatusButton({
     return (
       <div style={{ position: "relative", display: "inline-block" }}>
         <button
+          ref={buttonRef}
           style={{
             ...aiStyles.statusButton,
             color: "#ef4444",
             ...(isHovered && aiStyles.statusButtonHover),
           }}
           className={className}
-          onMouseEnter={() => {
-            setShowTooltip(true);
-            setIsHovered(true);
-          }}
-          onMouseLeave={() => {
-            setShowTooltip(false);
-            setIsHovered(false);
-          }}
+          onMouseEnter={handleMouseEnter}
+          onMouseLeave={handleMouseLeave}
         >
           <svg
             width="16"
@@ -73,7 +96,16 @@ export function AiStatusButton({
             <polyline points="22 12 18 12 15 21 9 3 6 12 2 12" />
           </svg>
         </button>
-        {showTooltip && <div style={aiStyles.tooltip}>No status available</div>}
+        {showTooltip && (
+          <div
+            ref={tooltipRef}
+            style={{ ...aiStyles.tooltip, ...tooltipPosition }}
+            onMouseEnter={() => setShowTooltip(true)}
+            onMouseLeave={handleMouseLeave}
+          >
+            No status available
+          </div>
+        )}
       </div>
     );
   }
@@ -81,20 +113,15 @@ export function AiStatusButton({
   return (
     <div style={{ position: "relative", display: "inline-block" }}>
       <button
+        ref={buttonRef}
         style={{
           ...aiStyles.statusButton,
           color: "#10b981",
           ...(isHovered && aiStyles.statusButtonHover),
         }}
         className={className}
-        onMouseEnter={() => {
-          setShowTooltip(true);
-          setIsHovered(true);
-        }}
-        onMouseLeave={() => {
-          setShowTooltip(false);
-          setIsHovered(false);
-        }}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
       >
         <svg
           width="16"
@@ -108,7 +135,12 @@ export function AiStatusButton({
       </button>
 
       {showTooltip && (
-        <div style={aiStyles.tooltip}>
+        <div
+          ref={tooltipRef}
+          style={{ ...aiStyles.tooltip, ...tooltipPosition }}
+          onMouseEnter={() => setShowTooltip(true)}
+          onMouseLeave={handleMouseLeave}
+        >
           <div style={aiStyles.tooltipHeader}>API Status</div>
 
           <div
@@ -224,49 +256,43 @@ export function AiStatusButton({
 
           <div style={aiStyles.tooltipActions}>
             <a
-              href="https://ai.lastbrain.io/fr/auth/dashboard"
+              href="https://prompt.lastbrain.io/fr/auth/dashboard"
               target="_blank"
               rel="noopener noreferrer"
               style={aiStyles.tooltipLink}
               onMouseEnter={(e) => {
-                e.currentTarget.style.background = "#dbeafe";
-                e.currentTarget.style.borderColor = "#3b82f6";
+                Object.assign(e.currentTarget.style, aiStyles.tooltipLinkHover);
               }}
               onMouseLeave={(e) => {
-                e.currentTarget.style.background = "#eff6ff";
-                e.currentTarget.style.borderColor = "#dbeafe";
+                Object.assign(e.currentTarget.style, aiStyles.tooltipLink);
               }}
             >
               Dashboard
             </a>
             <a
-              href="https://ai.lastbrain.io/fr/auth/billing"
+              href="https://prompt.lastbrain.io/fr/auth/billing"
               target="_blank"
               rel="noopener noreferrer"
               style={aiStyles.tooltipLink}
               onMouseEnter={(e) => {
-                e.currentTarget.style.background = "#dbeafe";
-                e.currentTarget.style.borderColor = "#3b82f6";
+                Object.assign(e.currentTarget.style, aiStyles.tooltipLinkHover);
               }}
               onMouseLeave={(e) => {
-                e.currentTarget.style.background = "#eff6ff";
-                e.currentTarget.style.borderColor = "#dbeafe";
+                Object.assign(e.currentTarget.style, aiStyles.tooltipLink);
               }}
             >
               History
             </a>
             <a
-              href="https://ai.lastbrain.io/fr/auth/billing"
+              href="https://prompt.lastbrain.io/fr/auth/billing"
               target="_blank"
               rel="noopener noreferrer"
               style={aiStyles.tooltipLink}
               onMouseEnter={(e) => {
-                e.currentTarget.style.background = "#dbeafe";
-                e.currentTarget.style.borderColor = "#3b82f6";
+                Object.assign(e.currentTarget.style, aiStyles.tooltipLinkHover);
               }}
               onMouseLeave={(e) => {
-                e.currentTarget.style.background = "#eff6ff";
-                e.currentTarget.style.borderColor = "#dbeafe";
+                Object.assign(e.currentTarget.style, aiStyles.tooltipLink);
               }}
             >
               Settings

package/src/components/AiTextarea.tsx

@@ -5,6 +5,7 @@ import type { BaseAiProps } from "../types";
 import { useAiCallText } from "../hooks/useAiCallText";
 import { useAiModels } from "../hooks/useAiModels";
 import { AiPromptPanel } from "./AiPromptPanel";
+import { aiStyles } from "../styles/inline";
 
 export interface AiTextareaProps
   extends
@@ -28,11 +29,13 @@ export function AiTextarea({
   ...textareaProps
 }: AiTextareaProps) {
   const [isOpen, setIsOpen] = useState(false);
-  const [textValue, setTextValue] = useState(
+  const [textareaValue, setTextareaValue] = useState(
     textareaProps.value?.toString() ||
       textareaProps.defaultValue?.toString() ||
       ""
   );
+  const [isFocused, setIsFocused] = useState(false);
+  const [isButtonHovered, setIsButtonHovered] = useState(false);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
 
   const { models } = useAiModels({ baseUrl, apiKeyId });
@@ -50,22 +53,21 @@ export function AiTextarea({
 
   const handleSubmit = async (
     selectedModel: string,
-    selectedPrompt: string
+    selectedPrompt: string,
+    promptId?: string
   ) => {
     try {
       const result = await generateText({
         model: selectedModel,
         prompt: selectedPrompt,
-        context: context || textValue || undefined,
+        context: textareaValue || context || undefined,
         actionType: "autocomplete",
       });
 
       if (result.text) {
-        if (editMode) {
-          setTextValue(result.text);
-          if (textareaRef.current) {
-            textareaRef.current.value = result.text;
-          }
+        setTextareaValue(result.text);
+        if (textareaRef.current) {
+          textareaRef.current.value = result.text;
         }
         onValue?.(result.text);
         onToast?.({ type: "success", message: "AI generation successful" });
@@ -84,16 +86,14 @@ export function AiTextarea({
       const result = await generateText({
         model,
         prompt,
-        context: context || textValue || undefined,
+        context: textareaValue || context || undefined,
         actionType: "autocomplete",
       });
 
       if (result.text) {
-        if (editMode) {
-          setTextValue(result.text);
-          if (textareaRef.current) {
-            textareaRef.current.value = result.text;
-          }
+        setTextareaValue(result.text);
+        if (textareaRef.current) {
+          textareaRef.current.value = result.text;
         }
         onValue?.(result.text);
         onToast?.({ type: "success", message: "AI generation successful" });
@@ -105,39 +105,81 @@ export function AiTextarea({
 
   const handleTextareaChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     const newValue = e.target.value;
-    setTextValue(newValue);
+    setTextareaValue(newValue);
     textareaProps.onChange?.(e);
   };
 
   return (
-    <div data-ai-textarea-wrapper className={className}>
+    <div style={aiStyles.textareaWrapper} className={className}>
       <textarea
         ref={textareaRef}
         {...textareaProps}
-        value={textValue}
+        style={{
+          ...aiStyles.textarea,
+          ...(isFocused && aiStyles.textareaFocus),
+        }}
+        value={textareaValue}
         onChange={handleTextareaChange}
+        onFocus={(e) => {
+          setIsFocused(true);
+          textareaProps.onFocus?.(e);
+        }}
+        onBlur={(e) => {
+          setIsFocused(false);
+          textareaProps.onBlur?.(e);
+        }}
         disabled={disabled || loading}
-        data-ai-textarea
       />
-      {hasConfiguration ? (
-        <button
-          onClick={handleQuickGenerate}
-          disabled={disabled || loading}
-          data-ai-generate-button
-          type="button"
-        >
-          {loading ? "Generating..." : "AI"}
-        </button>
-      ) : (
-        <button
-          onClick={handleOpenPanel}
-          disabled={disabled || loading}
-          data-ai-setup-button
-          type="button"
-        >
-          Setup AI
-        </button>
-      )}
+      <button
+        style={{
+          ...aiStyles.textareaAiButton,
+          ...(isButtonHovered && aiStyles.textareaAiButtonHover),
+          ...(disabled || loading
+            ? { opacity: 0.5, cursor: "not-allowed" }
+            : {}),
+        }}
+        onClick={hasConfiguration ? handleQuickGenerate : handleOpenPanel}
+        onMouseEnter={() => setIsButtonHovered(true)}
+        onMouseLeave={() => setIsButtonHovered(false)}
+        disabled={disabled || loading}
+        type="button"
+        title={hasConfiguration ? "Generate with AI" : "Setup AI"}
+      >
+        {loading ? (
+          <svg
+            style={aiStyles.spinner}
+            width="16"
+            height="16"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+          >
+            <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>
+        )}
+      </button>
       {isOpen && (
         <AiPromptPanel
           isOpen={isOpen}
@@ -145,6 +187,7 @@ export function AiTextarea({
           onSubmit={handleSubmit}
           uiMode={uiMode}
           models={models || []}
+          sourceText={textareaValue || undefined}
         />
       )}
     </div>