@lastbrain/ai-ui-react 1.0.3

package/src/components/AiInput.tsx

@@ -0,0 +1,150 @@
+"use client";
+
+import React, { useState, useRef, type InputHTMLAttributes } from "react";
+import type { BaseAiProps } from "../types";
+import { useAiCallText } from "../hooks/useAiCallText";
+import { useAiModels } from "../hooks/useAiModels";
+import { AiPromptPanel } from "./AiPromptPanel";
+
+export interface AiInputProps
+  extends
+    Omit<BaseAiProps, "type">,
+    Omit<InputHTMLAttributes<HTMLInputElement>, "onValue"> {
+  uiMode?: "modal" | "drawer";
+}
+
+export function AiInput({
+  baseUrl,
+  apiKeyId,
+  uiMode = "modal",
+  context,
+  model,
+  prompt,
+  editMode = false,
+  onValue,
+  onToast,
+  disabled,
+  className,
+  ...inputProps
+}: AiInputProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [inputValue, setInputValue] = useState(
+    inputProps.value?.toString() || inputProps.defaultValue?.toString() || ""
+  );
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const { models } = useAiModels({ baseUrl, apiKeyId });
+  const { generateText, loading } = useAiCallText({ baseUrl, apiKeyId });
+
+  const hasConfiguration = Boolean(model && prompt);
+
+  const handleOpenPanel = () => {
+    setIsOpen(true);
+  };
+
+  const handleClosePanel = () => {
+    setIsOpen(false);
+  };
+
+  const handleSubmit = async (
+    selectedModel: string,
+    selectedPrompt: string
+  ) => {
+    try {
+      const result = await generateText({
+        model: selectedModel,
+        prompt: selectedPrompt,
+        context: context || inputValue || undefined,
+        actionType: "autocomplete",
+      });
+
+      if (result.text) {
+        if (editMode) {
+          setInputValue(result.text);
+          if (inputRef.current) {
+            inputRef.current.value = result.text;
+          }
+        }
+        onValue?.(result.text);
+        onToast?.({ type: "success", message: "AI generation successful" });
+      }
+    } catch (error) {
+      onToast?.({ type: "error", message: "Failed to generate text" });
+    } finally {
+      setIsOpen(false);
+    }
+  };
+
+  const handleQuickGenerate = async () => {
+    if (!model || !prompt) return;
+
+    try {
+      const result = await generateText({
+        model,
+        prompt,
+        context: context || inputValue || undefined,
+        actionType: "autocomplete",
+      });
+
+      if (result.text) {
+        if (editMode) {
+          setInputValue(result.text);
+          if (inputRef.current) {
+            inputRef.current.value = result.text;
+          }
+        }
+        onValue?.(result.text);
+        onToast?.({ type: "success", message: "AI generation successful" });
+      }
+    } catch (error) {
+      onToast?.({ type: "error", message: "Failed to generate text" });
+    }
+  };
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = e.target.value;
+    setInputValue(newValue);
+    inputProps.onChange?.(e);
+  };
+
+  return (
+    <div data-ai-input-wrapper className={className}>
+      <input
+        ref={inputRef}
+        {...inputProps}
+        value={inputValue}
+        onChange={handleInputChange}
+        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>
+      )}
+      {isOpen && (
+        <AiPromptPanel
+          isOpen={isOpen}
+          onClose={handleClosePanel}
+          onSubmit={handleSubmit}
+          uiMode={uiMode}
+          models={models || []}
+        />
+      )}
+    </div>
+  );
+}

package/src/components/AiModelSelect.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import React from "react";
+import type { ModelRef } from "@lastbrain/ai-ui-core";
+
+export interface AiModelSelectProps {
+  models: ModelRef[];
+  value: string;
+  onChange: (value: string) => void;
+  className?: string;
+  disabled?: boolean;
+}
+
+export function AiModelSelect({
+  models,
+  value,
+  onChange,
+  className,
+  disabled,
+}: AiModelSelectProps) {
+  return (
+    <select
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+      className={className}
+      disabled={disabled}
+      data-ai-model-select
+    >
+      <option value="">Select a model</option>
+      {models.map((model) => (
+        <option key={model.id} value={model.id}>
+          {model.name}
+        </option>
+      ))}
+    </select>
+  );
+}

package/src/components/AiPromptPanel.tsx

@@ -0,0 +1,120 @@
+"use client";
+
+import { useState, type ReactNode } from "react";
+import type { ModelRef } from "@lastbrain/ai-ui-core";
+import type { UiMode } from "../types";
+
+export interface AiPromptPanelProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSubmit: (model: string, prompt: string) => void;
+  uiMode?: UiMode;
+  models?: ModelRef[];
+  children?: (props: AiPromptPanelRenderProps) => ReactNode;
+}
+
+export interface AiPromptPanelRenderProps {
+  models?: ModelRef[];
+  selectedModel: string;
+  setSelectedModel: (model: string) => void;
+  prompt: string;
+  setPrompt: (prompt: string) => void;
+  handleSubmit: () => void;
+  handleClose: () => void;
+}
+
+export function AiPromptPanel({
+  isOpen,
+  onClose,
+  onSubmit,
+  uiMode = "modal",
+  models = [],
+  children,
+}: AiPromptPanelProps) {
+  const [selectedModel, setSelectedModel] = useState(models[0]?.id || "");
+  const [prompt, setPrompt] = useState("");
+
+  if (!isOpen) return null;
+
+  const handleSubmit = () => {
+    onSubmit(selectedModel, prompt);
+    setPrompt("");
+  };
+
+  const handleClose = () => {
+    onClose();
+    setPrompt("");
+  };
+
+  const renderProps: AiPromptPanelRenderProps = {
+    models,
+    selectedModel,
+    setSelectedModel,
+    prompt,
+    setPrompt,
+    handleSubmit,
+    handleClose,
+  };
+
+  if (children) {
+    return (
+      <div data-ai-prompt-panel data-type={uiMode}>
+        {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>
+            ×
+          </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>
+        <div data-ai-prompt-panel-footer>
+          <button onClick={handleClose} data-ai-cancel-button>
+            Cancel
+          </button>
+          <button
+            onClick={handleSubmit}
+            disabled={!selectedModel || !prompt}
+            data-ai-submit-button
+          >
+            Generate
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/AiSelect.tsx

@@ -0,0 +1,91 @@
+"use client";
+
+import React, { useState, type SelectHTMLAttributes } from "react";
+import type { BaseAiProps } from "../types";
+import { useAiCallText } from "../hooks/useAiCallText";
+import { useAiModels } from "../hooks/useAiModels";
+import { AiPromptPanel } from "./AiPromptPanel";
+
+export interface AiSelectProps
+  extends
+    Omit<BaseAiProps, "type">,
+    Omit<SelectHTMLAttributes<HTMLSelectElement>, "onValue"> {
+  children: React.ReactNode;
+  uiMode?: "modal" | "drawer";
+}
+
+export function AiSelect({
+  baseUrl,
+  apiKeyId,
+  uiMode = "modal",
+  context,
+  model,
+  prompt,
+  onValue,
+  onToast,
+  disabled,
+  className,
+  children,
+  ...selectProps
+}: AiSelectProps) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const { models } = useAiModels({ baseUrl, apiKeyId });
+  const { generateText, loading } = useAiCallText({ baseUrl, apiKeyId });
+
+  const handleOpenPanel = () => {
+    setIsOpen(true);
+  };
+
+  const handleClosePanel = () => {
+    setIsOpen(false);
+  };
+
+  const handleSubmit = async (
+    selectedModel: string,
+    selectedPrompt: string
+  ) => {
+    try {
+      const result = await generateText({
+        model: selectedModel,
+        prompt: selectedPrompt,
+        context: context || undefined,
+        actionType: "autocomplete",
+      });
+
+      if (result.text) {
+        onValue?.(result.text);
+        onToast?.({ type: "success", message: "AI suggestion ready" });
+      }
+    } catch (error) {
+      onToast?.({ type: "error", message: "Failed to generate suggestion" });
+    } finally {
+      setIsOpen(false);
+    }
+  };
+
+  return (
+    <div data-ai-select-wrapper className={className}>
+      <select {...selectProps} disabled={disabled || loading} data-ai-select>
+        {children}
+      </select>
+      <button
+        onClick={handleOpenPanel}
+        disabled={disabled || loading}
+        data-ai-assist-button
+        type="button"
+      >
+        AI Assist
+      </button>
+      {isOpen && (
+        <AiPromptPanel
+          isOpen={isOpen}
+          onClose={handleClosePanel}
+          onSubmit={handleSubmit}
+          uiMode={uiMode}
+          models={models || []}
+        />
+      )}
+    </div>
+  );
+}

package/src/components/AiSettingsButton.tsx

@@ -0,0 +1,111 @@
+"use client";
+
+import { useState, type ButtonHTMLAttributes } from "react";
+import { useAiStatus } from "../hooks/useAiStatus";
+
+export interface AiSettingsButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  baseUrl?: string;
+  apiKeyId?: string;
+  onAddTokens?: () => void;
+  onAddStorage?: () => void;
+  onDashboard?: () => void;
+  onDocumentation?: () => void;
+}
+
+export function AiSettingsButton({
+  baseUrl,
+  apiKeyId,
+  onAddTokens,
+  onAddStorage,
+  onDashboard,
+  onDocumentation,
+  className,
+  children,
+  ...buttonProps
+}: AiSettingsButtonProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const { status, loading } = useAiStatus({ baseUrl, apiKeyId });
+
+  const handleToggle = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const handleClose = () => {
+    setIsOpen(false);
+  };
+
+  const hasApiKey = Boolean(apiKeyId);
+
+  return (
+    <div data-ai-settings-wrapper>
+      <button
+        {...buttonProps}
+        onClick={handleToggle}
+        className={className}
+        data-ai-settings-button
+        disabled={loading}
+      >
+        {children || "AI Settings"}
+      </button>
+      {isOpen && (
+        <div data-ai-settings-panel>
+          <div data-ai-settings-overlay onClick={handleClose} />
+          <div data-ai-settings-content>
+            <div data-ai-settings-header>
+              <h3>AI Settings</h3>
+              <button onClick={handleClose} data-ai-close-button>
+                ×
+              </button>
+            </div>
+            <div data-ai-settings-body>
+              {hasApiKey ? (
+                <>
+                  {status && (
+                    <div data-ai-status-section>
+                      <div data-ai-status-item>
+                        <span>Tokens:</span>
+                        <span>{status.balance?.total || 0}</span>
+                      </div>
+                      {status.storage?.total_mb !== undefined && (
+                        <div data-ai-status-item>
+                          <span>Storage:</span>
+                          <span>{status.storage.total_mb.toFixed(2)} MB</span>
+                        </div>
+                      )}
+                    </div>
+                  )}
+                  <div data-ai-actions-section>
+                    {onDashboard && (
+                      <button onClick={onDashboard} data-ai-action-button>
+                        Dashboard
+                      </button>
+                    )}
+                    {onAddTokens && (
+                      <button onClick={onAddTokens} data-ai-action-button>
+                        Add Tokens
+                      </button>
+                    )}
+                    {onAddStorage && (
+                      <button onClick={onAddStorage} data-ai-action-button>
+                        Add Storage
+                      </button>
+                    )}
+                  </div>
+                </>
+              ) : (
+                <div data-ai-no-key-section>
+                  <p>No API key configured</p>
+                  {onDocumentation && (
+                    <button onClick={onDocumentation} data-ai-action-button>
+                      View Documentation
+                    </button>
+                  )}
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/AiTextarea.tsx

@@ -0,0 +1,152 @@
+"use client";
+
+import React, { useState, useRef, type TextareaHTMLAttributes } from "react";
+import type { BaseAiProps } from "../types";
+import { useAiCallText } from "../hooks/useAiCallText";
+import { useAiModels } from "../hooks/useAiModels";
+import { AiPromptPanel } from "./AiPromptPanel";
+
+export interface AiTextareaProps
+  extends
+    Omit<BaseAiProps, "type">,
+    Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "onValue"> {
+  uiMode?: "modal" | "drawer";
+}
+
+export function AiTextarea({
+  baseUrl,
+  apiKeyId,
+  uiMode = "modal",
+  context,
+  model,
+  prompt,
+  editMode = false,
+  onValue,
+  onToast,
+  disabled,
+  className,
+  ...textareaProps
+}: AiTextareaProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [textValue, setTextValue] = useState(
+    textareaProps.value?.toString() ||
+      textareaProps.defaultValue?.toString() ||
+      ""
+  );
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  const { models } = useAiModels({ baseUrl, apiKeyId });
+  const { generateText, loading } = useAiCallText({ baseUrl, apiKeyId });
+
+  const hasConfiguration = Boolean(model && prompt);
+
+  const handleOpenPanel = () => {
+    setIsOpen(true);
+  };
+
+  const handleClosePanel = () => {
+    setIsOpen(false);
+  };
+
+  const handleSubmit = async (
+    selectedModel: string,
+    selectedPrompt: string
+  ) => {
+    try {
+      const result = await generateText({
+        model: selectedModel,
+        prompt: selectedPrompt,
+        context: context || textValue || undefined,
+        actionType: "autocomplete",
+      });
+
+      if (result.text) {
+        if (editMode) {
+          setTextValue(result.text);
+          if (textareaRef.current) {
+            textareaRef.current.value = result.text;
+          }
+        }
+        onValue?.(result.text);
+        onToast?.({ type: "success", message: "AI generation successful" });
+      }
+    } catch (error) {
+      onToast?.({ type: "error", message: "Failed to generate text" });
+    } finally {
+      setIsOpen(false);
+    }
+  };
+
+  const handleQuickGenerate = async () => {
+    if (!model || !prompt) return;
+
+    try {
+      const result = await generateText({
+        model,
+        prompt,
+        context: context || textValue || undefined,
+        actionType: "autocomplete",
+      });
+
+      if (result.text) {
+        if (editMode) {
+          setTextValue(result.text);
+          if (textareaRef.current) {
+            textareaRef.current.value = result.text;
+          }
+        }
+        onValue?.(result.text);
+        onToast?.({ type: "success", message: "AI generation successful" });
+      }
+    } catch (error) {
+      onToast?.({ type: "error", message: "Failed to generate text" });
+    }
+  };
+
+  const handleTextareaChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const newValue = e.target.value;
+    setTextValue(newValue);
+    textareaProps.onChange?.(e);
+  };
+
+  return (
+    <div data-ai-textarea-wrapper className={className}>
+      <textarea
+        ref={textareaRef}
+        {...textareaProps}
+        value={textValue}
+        onChange={handleTextareaChange}
+        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>
+      )}
+      {isOpen && (
+        <AiPromptPanel
+          isOpen={isOpen}
+          onClose={handleClosePanel}
+          onSubmit={handleSubmit}
+          uiMode={uiMode}
+          models={models || []}
+        />
+      )}
+    </div>
+  );
+}

package/src/context/AiProvider.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import { createContext, useContext, type ReactNode } from "react";
+import type { UiMode } from "../types";
+
+export interface AiContextValue {
+  baseUrl: string;
+  apiKeyId: string;
+  uiMode: UiMode;
+}
+
+const AiContext = createContext<AiContextValue | undefined>(undefined);
+
+export interface AiProviderProps {
+  baseUrl: string;
+  apiKeyId: string;
+  uiMode?: UiMode;
+  children: ReactNode;
+}
+
+export function AiProvider({
+  baseUrl,
+  apiKeyId,
+  uiMode = "modal",
+  children,
+}: AiProviderProps) {
+  const value: AiContextValue = {
+    baseUrl,
+    apiKeyId,
+    uiMode,
+  };
+
+  return <AiContext.Provider value={value}>{children}</AiContext.Provider>;
+}
+
+export function useAiContext(): AiContextValue {
+  const context = useContext(AiContext);
+  if (!context) {
+    throw new Error("useAiContext must be used within AiProvider");
+  }
+  return context;
+}
+
+export { AiContext };