@lastbrain/ai-ui-react 1.0.8 → 1.0.10

package/src/components/AiInput.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 AiInputProps
   extends
@@ -31,6 +32,8 @@ export function AiInput({
   const [inputValue, setInputValue] = useState(
     inputProps.value?.toString() || inputProps.defaultValue?.toString() || ""
   );
+  const [isFocused, setIsFocused] = useState(false);
+  const [isButtonHovered, setIsButtonHovered] = useState(false);
   const inputRef = useRef<HTMLInputElement>(null);
 
   const { models } = useAiModels({ baseUrl, apiKeyId });
@@ -48,22 +51,21 @@ export function AiInput({
 
   const handleSubmit = async (
     selectedModel: string,
-    selectedPrompt: string
+    selectedPrompt: string,
+    promptId?: string
   ) => {
     try {
       const result = await generateText({
         model: selectedModel,
         prompt: selectedPrompt,
-        context: context || inputValue || undefined,
+        context: inputValue || context || undefined,
         actionType: "autocomplete",
       });
 
       if (result.text) {
-        if (editMode) {
-          setInputValue(result.text);
-          if (inputRef.current) {
-            inputRef.current.value = result.text;
-          }
+        setInputValue(result.text);
+        if (inputRef.current) {
+          inputRef.current.value = result.text;
         }
         onValue?.(result.text);
         onToast?.({ type: "success", message: "AI generation successful" });
@@ -82,16 +84,14 @@ export function AiInput({
       const result = await generateText({
         model,
         prompt,
-        context: context || inputValue || undefined,
+        context: inputValue || context || undefined,
         actionType: "autocomplete",
       });
 
       if (result.text) {
-        if (editMode) {
-          setInputValue(result.text);
-          if (inputRef.current) {
-            inputRef.current.value = result.text;
-          }
+        setInputValue(result.text);
+        if (inputRef.current) {
+          inputRef.current.value = result.text;
         }
         onValue?.(result.text);
         onToast?.({ type: "success", message: "AI generation successful" });
@@ -108,34 +108,76 @@ export function AiInput({
   };
 
   return (
-    <div data-ai-input-wrapper className={className}>
+    <div style={aiStyles.inputWrapper} className={className}>
       <input
         ref={inputRef}
         {...inputProps}
+        style={{
+          ...aiStyles.input,
+          ...(isFocused && aiStyles.inputFocus),
+        }}
         value={inputValue}
         onChange={handleInputChange}
+        onFocus={(e) => {
+          setIsFocused(true);
+          inputProps.onFocus?.(e);
+        }}
+        onBlur={(e) => {
+          setIsFocused(false);
+          inputProps.onBlur?.(e);
+        }}
         disabled={disabled || loading}
-        data-ai-input
       />
-      {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.inputAiButton,
+          ...(isButtonHovered && aiStyles.inputAiButtonHover),
+          ...(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}
@@ -143,6 +185,7 @@ export function AiInput({
           onSubmit={handleSubmit}
           uiMode={uiMode}
           models={models || []}
+          sourceText={inputValue || undefined}
         />
       )}
     </div>

package/src/components/AiPromptPanel.tsx

@@ -1,15 +1,18 @@
 "use client";
 
-import { useState, type ReactNode } from "react";
+import { useState, useEffect, type ReactNode } from "react";
 import type { ModelRef } from "@lastbrain/ai-ui-core";
 import type { UiMode } from "../types";
+import { aiStyles } from "../styles/inline";
+import { usePrompts, type Prompt, type PublicPrompt } from "../hooks/usePrompts";
 
 export interface AiPromptPanelProps {
   isOpen: boolean;
   onClose: () => void;
-  onSubmit: (model: string, prompt: string) => void;
+  onSubmit: (model: string, prompt: string, promptId?: string) => void;
   uiMode?: UiMode;
   models?: ModelRef[];
+  sourceText?: string; // Current text from input/textarea
   children?: (props: AiPromptPanelRenderProps) => ReactNode;
 }
 
@@ -19,6 +22,7 @@ export interface AiPromptPanelRenderProps {
   setSelectedModel: (model: string) => void;
   prompt: string;
   setPrompt: (prompt: string) => void;
+  sourceText?: string;
   handleSubmit: () => void;
   handleClose: () => void;
 }
@@ -29,89 +33,349 @@ export function AiPromptPanel({
   onSubmit,
   uiMode = "modal",
   models = [],
+  sourceText,
   children,
 }: AiPromptPanelProps) {
-  const [selectedModel, setSelectedModel] = useState(models[0]?.id || "");
+  const [selectedModel, setSelectedModel] = useState("");
   const [prompt, setPrompt] = useState("");
+  const [promptId, setPromptId] = useState<string | undefined>(undefined);
+  const [isCloseHovered, setIsCloseHovered] = useState(false);
+  const [isCancelHovered, setIsCancelHovered] = useState(false);
+  const [isSubmitHovered, setIsSubmitHovered] = useState(false);
+  const [promptFocused, setPromptFocused] = useState(false);
+  const [modelFocused, setModelFocused] = useState(false);
+  const [showPromptLibrary, setShowPromptLibrary] = useState(false);
+
+  const { prompts, loading: promptsLoading, fetchPrompts, incrementStat } = usePrompts();
+
+  // Set initial model when models change
+  useEffect(() => {
+    if (models.length > 0 && !selectedModel) {
+      setSelectedModel(models[0].id);
+    }
+  }, [models, selectedModel]);
+
+  // Fetch prompts when modal opens
+  useEffect(() => {
+    if (isOpen && models.length > 0) {
+      const modelType = models.find((m) => m.id === selectedModel)?.type;
+      fetchPrompts({
+        type: modelType === "image" ? "image" : "text",
+      });
+    }
+  }, [isOpen, selectedModel, models, fetchPrompts]);
 
   if (!isOpen) return null;
 
   const handleSubmit = () => {
-    onSubmit(selectedModel, prompt);
+    if (!selectedModel || !prompt.trim()) return;
+    onSubmit(selectedModel, prompt, promptId);
     setPrompt("");
+    setPromptId(undefined);
   };
 
   const handleClose = () => {
     onClose();
     setPrompt("");
+    setPromptId(undefined);
+    setShowPromptLibrary(false);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Escape") {
+      handleClose();
+    }
+    if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+      handleSubmit();
+    }
+  };
+
+  const handleSelectPrompt = (promptData: Prompt | PublicPrompt) => {
+    setPrompt(promptData.content);
+    setPromptId(promptData.id);
+    incrementStat(promptData.id, "picked");
+    setShowPromptLibrary(false);
   };
 
+  const currentModelType = models.find((m) => m.id === selectedModel)?.type;
+  const filteredPrompts = prompts.filter((p: Prompt | PublicPrompt) => {
+    const matchesType =
+      currentModelType === "image" ? p.type === "image" : p.type !== "image";
+    return matchesType;
+  });
+
   const renderProps: AiPromptPanelRenderProps = {
     models,
     selectedModel,
     setSelectedModel,
     prompt,
     setPrompt,
+    sourceText,
     handleSubmit,
     handleClose,
   };
 
   if (children) {
     return (
-      <div data-ai-prompt-panel data-type={uiMode}>
+      <div style={aiStyles.modal} onKeyDown={handleKeyDown}>
         {children(renderProps)}
       </div>
     );
   }
 
   return (
-    <div data-ai-prompt-panel data-type={uiMode}>
-      <div data-ai-prompt-panel-overlay onClick={handleClose} />
-      <div data-ai-prompt-panel-content>
-        <div data-ai-prompt-panel-header>
-          <h2>AI Prompt</h2>
-          <button onClick={handleClose} data-ai-close-button>
+    <div style={aiStyles.modal} onKeyDown={handleKeyDown}>
+      <div style={aiStyles.modalOverlay} onClick={handleClose} />
+      <div style={aiStyles.modalContent}>
+        <div style={aiStyles.modalHeader}>
+          <h2 style={aiStyles.modalTitle}>
+            {showPromptLibrary ? "Select a Prompt" : "AI Prompt Configuration"}
+          </h2>
+          <button
+            style={{
+              ...aiStyles.modalCloseButton,
+              ...(isCloseHovered && aiStyles.modalCloseButtonHover),
+            }}
+            onClick={handleClose}
+            onMouseEnter={() => setIsCloseHovered(true)}
+            onMouseLeave={() => setIsCloseHovered(false)}
+            aria-label="Close"
+          >
             ×
           </button>
         </div>
-        <div data-ai-prompt-panel-body>
-          <div data-ai-model-select-wrapper>
-            <label htmlFor="model-select">Model</label>
-            <select
-              id="model-select"
-              value={selectedModel}
-              onChange={(e) => setSelectedModel(e.target.value)}
-              data-ai-model-select
-            >
-              {models.map((model) => (
-                <option key={model.id} value={model.id}>
-                  {model.name}
-                </option>
-              ))}
-            </select>
-          </div>
-          <div data-ai-prompt-wrapper>
-            <label htmlFor="prompt-input">Prompt</label>
-            <textarea
-              id="prompt-input"
-              value={prompt}
-              onChange={(e) => setPrompt(e.target.value)}
-              placeholder="Enter your prompt..."
-              rows={5}
-              data-ai-prompt-input
-            />
-          </div>
+
+        <div style={aiStyles.modalBody}>
+          {!showPromptLibrary ? (
+            <>
+              {sourceText && (
+                <div style={{
+                  ...aiStyles.modalInputGroup,
+                  marginBottom: "16px",
+                }}>
+                  <label style={aiStyles.modalLabel}>
+                    Source Text
+                  </label>
+                  <div style={{
+                    padding: "12px",
+                    background: aiStyles.textarea.background,
+                    border: `1px solid ${aiStyles.input.border}`,
+                    borderRadius: "8px",
+                    fontSize: "13px",
+                    color: aiStyles.textarea.color,
+                    maxHeight: "120px",
+                    overflow: "auto",
+                    whiteSpace: "pre-wrap",
+                    wordBreak: "break-word",
+                  }}>
+                    {sourceText}
+                  </div>
+                </div>
+              )}
+
+              <div style={aiStyles.modalInputGroup}>
+                <label htmlFor="model-select" style={aiStyles.modalLabel}>
+                  AI Model
+                </label>
+                <select
+                  id="model-select"
+                  value={selectedModel}
+                  onChange={(e) => setSelectedModel(e.target.value)}
+                  onFocus={() => setModelFocused(true)}
+                  onBlur={() => setModelFocused(false)}
+                  style={{
+                    ...aiStyles.select,
+                    ...(modelFocused && aiStyles.selectFocus),
+                  }}
+                >
+                  {models.length === 0 && (
+                    <option value="">Loading models...</option>
+                  )}
+                  {models.map((model) => (
+                    <option key={model.id} value={model.id}>
+                      {model.name}
+                    </option>
+                  ))}
+                </select>
+              </div>
+
+              <div style={aiStyles.modalInputGroup}>
+                <div style={{
+                  display: "flex",
+                  justifyContent: "space-between",
+                  alignItems: "center",
+                  marginBottom: "8px",
+                }}>
+                  <label htmlFor="prompt-input" style={aiStyles.modalLabel}>
+                    Prompt
+                    <span style={{ 
+                      color: "#6b7280", 
+                      marginLeft: "4px",
+                      fontSize: "12px",
+                      fontWeight: 400,
+                    }}>
+                      (Cmd/Ctrl + Enter to submit)
+                    </span>
+                  </label>
+                  {filteredPrompts.length > 0 && (
+                    <button
+                      onClick={() => setShowPromptLibrary(true)}
+                      style={{
+                        padding: "4px 12px",
+                        fontSize: "12px",
+                        color: "#ffffff",
+                        background: "#8b5cf620",
+                        border: "none",
+                        borderRadius: "6px",
+                        cursor: "pointer",
+                        transition: "all 0.2s",
+                      }}
+                      onMouseEnter={(e) => {
+                        e.currentTarget.style.background = "#8b5cf630";
+                      }}
+                      onMouseLeave={(e) => {
+                        e.currentTarget.style.background = "#8b5cf620";
+                      }}
+                    >
+                      📚 Browse Prompts ({filteredPrompts.length})
+                    </button>
+                  )}
+                </div>
+                <textarea
+                  id="prompt-input"
+                  value={prompt}
+                  onChange={(e) => setPrompt(e.target.value)}
+                  onFocus={() => setPromptFocused(true)}
+                  onBlur={() => setPromptFocused(false)}
+                  placeholder={sourceText 
+                    ? "Enter your AI prompt... e.g., 'Correct spelling and grammar', 'Make it more professional', 'Translate to English'"
+                    : "Enter your AI prompt... e.g., 'Write a blog post about AI', 'Generate product description'"
+                  }
+                  rows={6}
+                  style={{
+                    ...aiStyles.textarea,
+                    padding: "12px 16px",
+                    ...(promptFocused && aiStyles.textareaFocus),
+                  }}
+                />
+              </div>
+            </>
+          ) : (
+            <div>
+              <button
+                onClick={() => setShowPromptLibrary(false)}
+                style={{
+                  padding: "8px 0",
+                  fontSize: "14px",
+                  color: "#8b5cf6",
+                  background: "transparent",
+                  border: "none",
+                  cursor: "pointer",
+                  marginBottom: "16px",
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "4px",
+                }}
+              >
+                ← Back to form
+              </button>
+              
+              {promptsLoading ? (
+                <div style={{ textAlign: "center", padding: "40px 0" }}>
+                  Loading prompts...
+                </div>
+              ) : filteredPrompts.length === 0 ? (
+                <div style={{ textAlign: "center", padding: "40px 0", color: "#6b7280" }}>
+                  No prompts available for this model type
+                </div>
+              ) : (
+                <div style={{
+                  display: "flex",
+                  flexDirection: "column" as const,
+                  gap: "12px",
+                  maxHeight: "400px",
+                  overflow: "auto",
+                }}>
+                  {filteredPrompts.map((promptData: Prompt | PublicPrompt) => (
+                    <div
+                      key={promptData.id}
+                      onClick={() => handleSelectPrompt(promptData)}
+                      style={{
+                        padding: "16px",
+                        border: `1px solid #e5e7eb`,
+                        borderRadius: "8px",
+                        cursor: "pointer",
+                        transition: "all 0.2s",
+                      }}
+                      onMouseEnter={(e) => {
+                        e.currentTarget.style.background = "#8b5cf610";
+                        e.currentTarget.style.borderColor = "#8b5cf6";
+                      }}
+                      onMouseLeave={(e) => {
+                        e.currentTarget.style.background = "transparent";
+                        e.currentTarget.style.borderColor = "#e5e7eb";
+                      }}
+                    >
+                      <div style={{ 
+                        fontWeight: 600, 
+                        marginBottom: "4px",
+                        color: "#111827",
+                      }}>
+                        {promptData.title}
+                      </div>
+                      <div style={{ 
+                        fontSize: "13px", 
+                        color: "#6b7280",
+                        overflow: "hidden",
+                        textOverflow: "ellipsis",
+                        display: "-webkit-box",
+                        WebkitLineClamp: 2,
+                        WebkitBoxOrient: "vertical" as any,
+                      }}>
+                        {promptData.content}
+                      </div>
+                      {("category" in promptData && promptData.category) ? (
+                        <div style={{
+                          marginTop: "8px",
+                          fontSize: "11px",
+                          color: "#8b5cf6",
+                        }}>
+                          {String(promptData.category)}
+                        </div>
+                      ) : null}
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+          )}
         </div>
-        <div data-ai-prompt-panel-footer>
-          <button onClick={handleClose} data-ai-cancel-button>
+
+        <div style={aiStyles.modalFooter}>
+          <button
+            onClick={handleClose}
+            onMouseEnter={() => setIsCancelHovered(true)}
+            onMouseLeave={() => setIsCancelHovered(false)}
+            style={{
+              ...aiStyles.button,
+              ...aiStyles.buttonSecondary,
+              ...(isCancelHovered && aiStyles.buttonSecondaryHover),
+            }}
+          >
             Cancel
           </button>
           <button
             onClick={handleSubmit}
-            disabled={!selectedModel || !prompt}
-            data-ai-submit-button
+            disabled={!selectedModel || !prompt.trim()}
+            onMouseEnter={() => setIsSubmitHovered(true)}
+            onMouseLeave={() => setIsSubmitHovered(false)}
+            style={{
+              ...aiStyles.button,
+              ...(isSubmitHovered && !(!selectedModel || !prompt.trim()) && aiStyles.buttonHover),
+              ...(!selectedModel || !prompt.trim() ? aiStyles.buttonDisabled : {}),
+            }}
           >
-            Generate
+            {sourceText ? "Transform with AI" : "Generate with AI"}
           </button>
         </div>
       </div>

package/src/components/AiSelect.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 AiSelectProps
   extends
@@ -29,6 +30,7 @@ export function AiSelect({
   ...selectProps
 }: AiSelectProps) {
   const [isOpen, setIsOpen] = useState(false);
+  const [isFocused, setIsFocused] = useState(false);
 
   const { models } = useAiModels({ baseUrl, apiKeyId });
   const { generateText, loading } = useAiCallText({ baseUrl, apiKeyId });
@@ -65,18 +67,25 @@ export function AiSelect({
   };
 
   return (
-    <div data-ai-select-wrapper className={className}>
-      <select {...selectProps} disabled={disabled || loading} data-ai-select>
-        {children}
-      </select>
-      <button
-        onClick={handleOpenPanel}
+    <div style={{ width: "100%" }} className={className}>
+      <select
+        {...selectProps}
+        style={{
+          ...aiStyles.select,
+          ...(isFocused && aiStyles.selectFocus),
+        }}
+        onFocus={(e) => {
+          setIsFocused(true);
+          selectProps.onFocus?.(e);
+        }}
+        onBlur={(e) => {
+          setIsFocused(false);
+          selectProps.onBlur?.(e);
+        }}
         disabled={disabled || loading}
-        data-ai-assist-button
-        type="button"
       >
-        AI Assist
-      </button>
+        {children}
+      </select>
       {isOpen && (
         <AiPromptPanel
           isOpen={isOpen}