@lastbrain/ai-ui-react 1.0.7 → 1.0.9

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 });
@@ -54,16 +57,14 @@ export function AiInput({
       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 +83,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 +107,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}

package/src/components/AiPromptPanel.tsx

@@ -1,8 +1,9 @@
 "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";
 
 export interface AiPromptPanelProps {
   isOpen: boolean;
@@ -33,10 +34,22 @@ export function AiPromptPanel({
 }: AiPromptPanelProps) {
   const [selectedModel, setSelectedModel] = useState(models[0]?.id || "");
   const [prompt, setPrompt] = useState("");
+  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);
+
+  useEffect(() => {
+    if (models.length > 0 && !selectedModel) {
+      setSelectedModel(models[0].id);
+    }
+  }, [models, selectedModel]);
 
   if (!isOpen) return null;
 
   const handleSubmit = () => {
+    if (!selectedModel || !prompt.trim()) return;
     onSubmit(selectedModel, prompt);
     setPrompt("");
   };
@@ -46,6 +59,15 @@ export function AiPromptPanel({
     setPrompt("");
   };
 
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Escape") {
+      handleClose();
+    }
+    if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+      handleSubmit();
+    }
+  };
+
   const renderProps: AiPromptPanelRenderProps = {
     models,
     selectedModel,
@@ -58,31 +80,51 @@ export function AiPromptPanel({
 
   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}>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>
+
+        <div style={aiStyles.modalBody}>
+          <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)}
-              data-ai-model-select
+              onFocus={() => setModelFocused(true)}
+              onBlur={() => setModelFocused(false)}
+              style={{
+                ...aiStyles.select,
+                ...(modelFocused && aiStyles.selectFocus),
+              }}
             >
+              {models.length === 0 && (
+                <option value="">No models available</option>
+              )}
               {models.map((model) => (
                 <option key={model.id} value={model.id}>
                   {model.name}
@@ -90,28 +132,56 @@ export function AiPromptPanel({
               ))}
             </select>
           </div>
-          <div data-ai-prompt-wrapper>
-            <label htmlFor="prompt-input">Prompt</label>
+
+          <div style={aiStyles.modalInputGroup}>
+            <label htmlFor="prompt-input" style={aiStyles.modalLabel}>
+              Prompt
+              <span style={{ color: aiStyles.textareaFocus.borderColor, marginLeft: "4px" }}>
+                (Cmd/Ctrl + Enter to submit)
+              </span>
+            </label>
             <textarea
               id="prompt-input"
               value={prompt}
               onChange={(e) => setPrompt(e.target.value)}
-              placeholder="Enter your prompt..."
-              rows={5}
-              data-ai-prompt-input
+              onFocus={() => setPromptFocused(true)}
+              onBlur={() => setPromptFocused(false)}
+              placeholder="Enter your AI prompt... e.g., 'Correct spelling and grammar'"
+              rows={6}
+              style={{
+                ...aiStyles.textarea,
+                padding: "12px 16px",
+                ...(promptFocused && aiStyles.textareaFocus),
+              }}
             />
           </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
+            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}