@devicai/ui 0.4.0 → 0.6.0

package/README.md

@@ -5,8 +5,11 @@ React component library for integrating Devic AI assistants into your applicatio
 ## Features
 
 - **ChatDrawer** - A ready-to-use chat drawer component
+- **AICommandBar** - A spotlight-style command bar for quick AI interactions
+- **AIGenerationButton** - A button for triggering AI generation with modal, tooltip, or direct modes
 - **useDevicChat** - Hook for building custom chat UIs
 - **Model Interface Protocol** - Support for client-side tool execution
+- **Message Feedback** - Built-in thumbs up/down feedback with comments
 - **CSS Variables** - Easy theming with CSS custom properties
 - **TypeScript** - Full type definitions included
 - **React 17+** - Compatible with React 17 and above
@@ -152,6 +155,232 @@ A complete chat drawer component.
 />
 ```
 
+### AICommandBar
+
+A floating command bar (similar to Spotlight/Command Palette) for quick AI interactions.
+
+```tsx
+import { AICommandBar } from '@devicai/ui';
+
+<AICommandBar
+  assistantId="my-assistant"
+  options={{
+    shortcut: 'cmd+k',           // Keyboard shortcut to open
+    placeholder: 'Ask AI...',
+    position: 'fixed',           // 'inline' | 'fixed'
+    fixedPlacement: { bottom: 20, right: 20 },
+    showResultCard: true,        // Show response in a card
+    showShortcutHint: true,      // Show shortcut badge
+
+    // Commands (slash commands)
+    commands: [
+      {
+        keyword: 'summarize',
+        description: 'Summarize content',
+        message: 'Please summarize this page.',
+        icon: <SummarizeIcon />,
+      },
+    ],
+
+    // History
+    enableHistory: true,
+    maxHistoryItems: 50,
+
+    // Theming
+    backgroundColor: '#ffffff',
+    textColor: '#1f2937',
+    borderColor: '#e5e7eb',
+    borderRadius: 12,
+  }}
+
+  // Callbacks
+  onResponse={({ message, toolCalls, chatUid }) => {}}
+  onSubmit={(message) => {}}
+  onToolCall={(toolName, params) => {}}
+  onError={(error) => {}}
+  onOpen={() => {}}
+  onClose={() => {}}
+
+  // Integration with ChatDrawer
+  onExecute="openDrawer"         // 'callback' | 'openDrawer'
+  chatDrawerRef={drawerRef}      // Required when onExecute="openDrawer"
+
+  // Controlled mode
+  isVisible={true}
+  onVisibilityChange={(visible) => {}}
+/>
+```
+
+#### AICommandBar with ChatDrawer Integration
+
+```tsx
+import { useRef } from 'react';
+import { AICommandBar, ChatDrawer, ChatDrawerHandle } from '@devicai/ui';
+
+function App() {
+  const drawerRef = useRef<ChatDrawerHandle>(null);
+
+  return (
+    <>
+      <AICommandBar
+        assistantId="my-assistant"
+        onExecute="openDrawer"
+        chatDrawerRef={drawerRef}
+        options={{
+          shortcut: 'cmd+k',
+          showResultCard: false,
+        }}
+      />
+      <ChatDrawer ref={drawerRef} assistantId="my-assistant" />
+    </>
+  );
+}
+```
+
+#### AICommandBar Handle (ref methods)
+
+```tsx
+const commandBarRef = useRef<AICommandBarHandle>(null);
+
+// Methods available via ref
+commandBarRef.current?.open();
+commandBarRef.current?.close();
+commandBarRef.current?.toggle();
+commandBarRef.current?.focus();
+commandBarRef.current?.submit('Hello!');
+commandBarRef.current?.reset();
+```
+
+### AIGenerationButton
+
+A button component for triggering AI generation with three interaction modes: direct, modal, or tooltip.
+
+```tsx
+import { AIGenerationButton } from '@devicai/ui';
+
+// Modal mode (default) - opens a modal for user input
+<AIGenerationButton
+  assistantId="my-assistant"
+  options={{
+    mode: 'modal',
+    modalTitle: 'Generate with AI',
+    modalDescription: 'Describe what you want to generate.',
+    placeholder: 'E.g., Create a product description...',
+    confirmText: 'Generate',
+    cancelText: 'Cancel',
+  }}
+  onResponse={({ message, toolCalls }) => {
+    console.log('Generated:', message.content.message);
+  }}
+/>
+
+// Direct mode - sends predefined prompt immediately
+<AIGenerationButton
+  assistantId="my-assistant"
+  options={{
+    mode: 'direct',
+    prompt: 'Generate a summary of this content',
+    label: 'Summarize',
+    loadingLabel: 'Summarizing...',
+  }}
+  onResponse={({ message }) => setSummary(message.content.message)}
+/>
+
+// Tooltip mode - shows inline input
+<AIGenerationButton
+  assistantId="my-assistant"
+  options={{
+    mode: 'tooltip',
+    tooltipPlacement: 'bottom',  // 'top' | 'bottom' | 'left' | 'right'
+    tooltipWidth: 350,
+  }}
+  onResponse={handleGeneration}
+/>
+```
+
+#### AIGenerationButton Options
+
+```tsx
+<AIGenerationButton
+  assistantId="my-assistant"
+  options={{
+    // Mode
+    mode: 'modal',               // 'direct' | 'modal' | 'tooltip'
+    prompt: 'Predefined prompt', // Required for direct mode
+
+    // Labels
+    label: 'Generate with AI',
+    loadingLabel: 'Generating...',
+    placeholder: 'Describe what you want...',
+    modalTitle: 'Generate with AI',
+    modalDescription: 'Optional description',
+    confirmText: 'Generate',
+    cancelText: 'Cancel',
+
+    // Button styling
+    variant: 'primary',          // 'primary' | 'secondary' | 'outline' | 'ghost'
+    size: 'medium',              // 'small' | 'medium' | 'large'
+    icon: <CustomIcon />,        // Custom icon
+    hideIcon: false,
+    hideLabel: false,            // Icon-only button
+
+    // Tooltip options
+    tooltipPlacement: 'top',
+    tooltipWidth: 300,
+
+    // Tool call display
+    toolRenderers: {
+      search_docs: (input, output) => (
+        <div>Found {output.count} results</div>
+      ),
+    },
+    toolIcons: {
+      search_docs: <SearchIcon />,
+    },
+    processingMessage: 'Processing...',
+
+    // Theming
+    color: '#3b82f6',
+    backgroundColor: '#ffffff',
+    textColor: '#1f2937',
+    borderColor: '#e5e7eb',
+    borderRadius: 8,
+    zIndex: 10000,
+  }}
+
+  // Callbacks
+  onResponse={({ message, toolCalls, chatUid }) => {}}
+  onBeforeSend={(prompt) => modifiedPrompt}  // Modify prompt before sending
+  onError={(error) => {}}
+  onStart={() => {}}
+  onOpen={() => {}}
+  onClose={() => {}}
+
+  // Other props
+  modelInterfaceTools={[...]}
+  tenantId="tenant-123"
+  tenantMetadata={{ userId: '456' }}
+  disabled={false}
+/>
+```
+
+#### AIGenerationButton Handle (ref methods)
+
+```tsx
+const buttonRef = useRef<AIGenerationButtonHandle>(null);
+
+// Trigger generation programmatically
+const result = await buttonRef.current?.generate('Custom prompt');
+
+// Open/close modal or tooltip
+buttonRef.current?.open();
+buttonRef.current?.close();
+buttonRef.current?.reset();
+
+// Check processing state
+if (buttonRef.current?.isProcessing) { ... }
+```
+
 ## Hooks
 
 ### useDevicChat
@@ -186,6 +415,74 @@ const {
 });
 ```
 
+### useAICommandBar
+
+Hook for building custom command bar UIs.
+
+```tsx
+import { useAICommandBar } from '@devicai/ui';
+
+const {
+  isVisible,           // boolean
+  open,                // () => void
+  close,               // () => void
+  toggle,              // () => void
+  inputValue,          // string
+  setInputValue,       // (value: string) => void
+  inputRef,            // RefObject<HTMLInputElement>
+  focus,               // () => void
+  isProcessing,        // boolean
+  currentToolSummary,  // string | null
+  toolCalls,           // ToolCallSummary[]
+  result,              // CommandBarResult | null
+  error,               // Error | null
+  history,             // string[]
+  showingHistory,      // boolean
+  showingCommands,     // boolean
+  filteredCommands,    // AICommandBarCommand[]
+  submit,              // (message?: string) => Promise<void>
+  reset,               // () => void
+  handleKeyDown,       // (e: KeyboardEvent) => void
+} = useAICommandBar({
+  assistantId: 'my-assistant',
+  options: { shortcut: 'cmd+k' },
+  onResponse: (result) => {},
+  onError: (error) => {},
+});
+```
+
+### useAIGenerationButton
+
+Hook for building custom generation button UIs.
+
+```tsx
+import { useAIGenerationButton } from '@devicai/ui';
+
+const {
+  isOpen,              // boolean - modal/tooltip open state
+  isProcessing,        // boolean
+  inputValue,          // string
+  setInputValue,       // (value: string) => void
+  error,               // Error | null
+  result,              // GenerationResult | null
+  toolCalls,           // ToolCallSummary[]
+  currentToolSummary,  // string | null
+  inputRef,            // RefObject<HTMLTextAreaElement>
+  open,                // () => void
+  close,               // () => void
+  generate,            // (prompt?: string) => Promise<GenerationResult | null>
+  reset,               // () => void
+  handleKeyDown,       // (e: KeyboardEvent) => void
+} = useAIGenerationButton({
+  assistantId: 'my-assistant',
+  options: { mode: 'modal' },
+  onResponse: (result) => {},
+  onBeforeSend: (prompt) => prompt,
+  onError: (error) => {},
+  onStart: () => {},
+});
+```
+
 ### useModelInterface
 
 Hook for implementing the Model Interface Protocol.
@@ -346,14 +643,35 @@ All types are exported:
 
 ```tsx
 import type {
+  // Chat types
   ChatMessage,
   ChatFile,
+  ChatDrawerOptions,
+  ChatDrawerHandle,
+
+  // AICommandBar types
+  AICommandBarOptions,
+  AICommandBarHandle,
+  AICommandBarCommand,
+  CommandBarResult,
+  ToolCallSummary,
+
+  // AIGenerationButton types
+  AIGenerationButtonOptions,
+  AIGenerationButtonHandle,
+  AIGenerationButtonMode,
+  GenerationResult,
+
+  // Tool types
   ModelInterfaceTool,
   ModelInterfaceToolSchema,
   ToolCall,
   ToolCallResponse,
+
+  // API types
   RealtimeChatHistory,
-  ChatDrawerOptions,
+
+  // Hook types
   UseDevicChatOptions,
 } from '@devicai/ui';
 ```

package/dist/cjs/components/AIGenerationButton/AIGenerationButton.js

@@ -0,0 +1,254 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var useAIGenerationButton = require('./useAIGenerationButton.js');
+
+const DEFAULT_OPTIONS = {
+    mode: 'modal',
+    prompt: '',
+    placeholder: 'Describe what you want to generate...',
+    modalTitle: 'Generate with AI',
+    modalDescription: '',
+    confirmText: 'Generate',
+    cancelText: 'Cancel',
+    tooltipPlacement: 'top',
+    tooltipWidth: 300,
+    variant: 'primary',
+    size: 'medium',
+    icon: undefined,
+    hideIcon: false,
+    label: 'Generate with AI',
+    hideLabel: false,
+    loadingLabel: 'Generating...',
+    color: '#3b82f6',
+    backgroundColor: '',
+    textColor: '',
+    borderColor: '',
+    borderRadius: 8,
+    fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
+    fontSize: 14,
+    zIndex: 10000,
+    animationDuration: 200,
+    toolRenderers: undefined,
+    toolIcons: undefined,
+    processingMessage: 'Processing...',
+};
+/**
+ * AIGenerationButton component - a button that triggers AI generation with configurable interaction modes
+ *
+ * @example
+ * ```tsx
+ * // Direct mode - sends predefined prompt on click
+ * <AIGenerationButton
+ *   assistantId="my-assistant"
+ *   options={{
+ *     mode: 'direct',
+ *     prompt: 'Generate a summary of the current page',
+ *     label: 'Summarize',
+ *   }}
+ *   onResponse={({ message }) => console.log(message.content)}
+ * />
+ *
+ * // Modal mode - opens modal for user input
+ * <AIGenerationButton
+ *   assistantId="my-assistant"
+ *   options={{
+ *     mode: 'modal',
+ *     modalTitle: 'Generate Content',
+ *     placeholder: 'Describe what you want...',
+ *   }}
+ *   onResponse={({ message }) => setContent(message.content.message)}
+ * />
+ *
+ * // Tooltip mode - quick inline input
+ * <AIGenerationButton
+ *   assistantId="my-assistant"
+ *   options={{
+ *     mode: 'tooltip',
+ *     tooltipPlacement: 'bottom',
+ *   }}
+ *   onResponse={handleGeneration}
+ * />
+ * ```
+ */
+const AIGenerationButton = React.forwardRef(function AIGenerationButton(props, ref) {
+    const { assistantId, apiKey, baseUrl, tenantId, tenantMetadata, options = {}, modelInterfaceTools, onResponse, onBeforeSend, onError, onStart, onOpen, onClose, disabled, className, containerClassName, children, theme, } = props;
+    const mergedOptions = React.useMemo(() => ({ ...DEFAULT_OPTIONS, ...options }), [options]);
+    const hook = useAIGenerationButton.useAIGenerationButton({
+        assistantId,
+        apiKey,
+        baseUrl,
+        tenantId,
+        tenantMetadata,
+        options: mergedOptions,
+        modelInterfaceTools,
+        onResponse,
+        onBeforeSend,
+        onError,
+        onStart,
+        onOpen,
+        onClose,
+        disabled,
+    });
+    // Expose handle
+    React.useImperativeHandle(ref, () => ({
+        generate: hook.generate,
+        open: hook.open,
+        close: hook.close,
+        reset: hook.reset,
+        isProcessing: hook.isProcessing,
+    }));
+    // Container ref for theming
+    const containerRef = React.useRef(null);
+    const tooltipRef = React.useRef(null);
+    // Apply CSS variables for theming
+    React.useEffect(() => {
+        const el = containerRef.current;
+        if (!el)
+            return;
+        const vars = [
+            ['--devic-gen-primary', mergedOptions.color],
+            ['----devic-gen-bg', mergedOptions.backgroundColor || undefined],
+            ['--devic-gen-text', mergedOptions.textColor || undefined],
+            ['--devic-gen-border', mergedOptions.borderColor || undefined],
+            ['--devic-gen-font-family', mergedOptions.fontFamily],
+            ['--devic-gen-font-size', typeof mergedOptions.fontSize === 'number' ? `${mergedOptions.fontSize}px` : mergedOptions.fontSize],
+            ['--devic-gen-radius', typeof mergedOptions.borderRadius === 'number' ? `${mergedOptions.borderRadius}px` : mergedOptions.borderRadius],
+            ['--devic-gen-z-index', String(mergedOptions.zIndex)],
+            ['--devic-gen-animation-duration', `${mergedOptions.animationDuration}ms`],
+        ];
+        // Apply theme from parent if provided
+        if (theme) {
+            if (theme.backgroundColor)
+                vars.push(['--devic-gen-modal-bg', theme.backgroundColor]);
+            if (theme.textColor)
+                vars.push(['--devic-gen-modal-text', theme.textColor]);
+            if (theme.borderColor)
+                vars.push(['--devic-gen-modal-border', theme.borderColor]);
+            if (theme.primaryColor)
+                vars.push(['--devic-gen-primary', theme.primaryColor]);
+        }
+        for (const [name, value] of vars) {
+            if (value) {
+                el.style.setProperty(name, value);
+            }
+            else {
+                el.style.removeProperty(name);
+            }
+        }
+    }, [mergedOptions, theme]);
+    // Click outside to close tooltip
+    React.useEffect(() => {
+        if (!hook.isOpen || mergedOptions.mode !== 'tooltip')
+            return;
+        const handleClickOutside = (e) => {
+            const tooltip = tooltipRef.current;
+            const container = containerRef.current;
+            if (tooltip &&
+                container &&
+                !tooltip.contains(e.target) &&
+                !container.contains(e.target)) {
+                hook.close();
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, [hook.isOpen, mergedOptions.mode, hook.close]);
+    // Handle button click
+    const handleButtonClick = React.useCallback(() => {
+        if (disabled || hook.isProcessing)
+            return;
+        if (mergedOptions.mode === 'direct') {
+            hook.generate();
+        }
+        else {
+            hook.open();
+        }
+    }, [disabled, hook.isProcessing, mergedOptions.mode, hook.generate, hook.open]);
+    // Handle confirm in modal/tooltip
+    const handleConfirm = React.useCallback(() => {
+        hook.generate();
+    }, [hook.generate]);
+    // Tooltip position styles
+    const tooltipPositionStyle = React.useMemo(() => {
+        const placement = mergedOptions.tooltipPlacement;
+        const width = typeof mergedOptions.tooltipWidth === 'number'
+            ? `${mergedOptions.tooltipWidth}px`
+            : mergedOptions.tooltipWidth;
+        const baseStyle = {
+            width,
+            position: 'absolute',
+            zIndex: mergedOptions.zIndex,
+        };
+        switch (placement) {
+            case 'top':
+                return { ...baseStyle, bottom: '100%', left: '50%', transform: 'translateX(-50%)', marginBottom: '8px' };
+            case 'bottom':
+                return { ...baseStyle, top: '100%', left: '50%', transform: 'translateX(-50%)', marginTop: '8px' };
+            case 'left':
+                return { ...baseStyle, right: '100%', top: '50%', transform: 'translateY(-50%)', marginRight: '8px' };
+            case 'right':
+                return { ...baseStyle, left: '100%', top: '50%', transform: 'translateY(-50%)', marginLeft: '8px' };
+            default:
+                return baseStyle;
+        }
+    }, [mergedOptions.tooltipPlacement, mergedOptions.tooltipWidth, mergedOptions.zIndex]);
+    // Render button content
+    // Only show loading state on button for direct mode (modal/tooltip have their own loading)
+    const showButtonLoading = hook.isProcessing && mergedOptions.mode === 'direct';
+    const renderButtonContent = () => {
+        if (children) {
+            return children;
+        }
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!mergedOptions.hideIcon && (jsxRuntime.jsx("span", { className: "devic-gen-button-icon", children: showButtonLoading ? (jsxRuntime.jsx("span", { className: "devic-gen-spinner" })) : (mergedOptions.icon || jsxRuntime.jsx(SparklesIcon, {})) })), !mergedOptions.hideLabel && (jsxRuntime.jsx("span", { className: "devic-gen-button-label", children: showButtonLoading ? mergedOptions.loadingLabel : mergedOptions.label }))] }));
+    };
+    // Render tool calls display
+    const renderToolCalls = () => {
+        if (!hook.isProcessing || hook.toolCalls.length === 0) {
+            return null;
+        }
+        return (jsxRuntime.jsx("div", { className: "devic-gen-tool-calls", children: hook.toolCalls.map((tc) => {
+                // Check for custom renderer
+                const customRenderer = mergedOptions.toolRenderers?.[tc.name];
+                if (customRenderer && tc.status === 'completed') {
+                    return (jsxRuntime.jsx("div", { className: "devic-gen-tool-item devic-gen-tool-custom", children: customRenderer(tc.input, tc.output) }, tc.id));
+                }
+                // Use custom icon or default
+                const customIcon = mergedOptions.toolIcons?.[tc.name];
+                const isExecuting = tc.status === 'executing';
+                return (jsxRuntime.jsxs("div", { className: "devic-gen-tool-item", "data-status": tc.status, children: [jsxRuntime.jsx("span", { className: "devic-gen-tool-icon", children: isExecuting ? (jsxRuntime.jsx("span", { className: "devic-gen-spinner devic-gen-spinner-small" })) : customIcon ? (customIcon) : (jsxRuntime.jsx(CheckIcon, {})) }), jsxRuntime.jsx("span", { className: "devic-gen-tool-name", children: tc.summary || tc.name })] }, tc.id));
+            }) }));
+    };
+    // Render processing status
+    const renderProcessingStatus = () => {
+        if (!hook.isProcessing)
+            return null;
+        return (jsxRuntime.jsxs("div", { className: "devic-gen-processing-status", children: [jsxRuntime.jsx("span", { className: "devic-gen-spinner devic-gen-spinner-small" }), jsxRuntime.jsx("span", { className: "devic-gen-processing-text", children: hook.currentToolSummary || mergedOptions.processingMessage })] }));
+    };
+    return (jsxRuntime.jsxs("div", { ref: containerRef, className: `devic-gen-container ${containerClassName || ''}`, style: { position: 'relative', display: 'inline-block' }, children: [jsxRuntime.jsx("button", { type: "button", className: `devic-gen-button ${className || ''}`, "data-variant": mergedOptions.variant, "data-size": mergedOptions.size, "data-processing": showButtonLoading, onClick: handleButtonClick, disabled: disabled || showButtonLoading, children: renderButtonContent() }), mergedOptions.mode === 'tooltip' && hook.isOpen && (jsxRuntime.jsxs("div", { ref: tooltipRef, className: "devic-gen-tooltip", style: tooltipPositionStyle, "data-placement": mergedOptions.tooltipPlacement, children: [renderToolCalls(), hook.isProcessing && hook.toolCalls.length === 0 && renderProcessingStatus(), jsxRuntime.jsx("textarea", { ref: hook.inputRef, className: "devic-gen-input", placeholder: mergedOptions.placeholder, value: hook.inputValue, onChange: (e) => hook.setInputValue(e.target.value), onKeyDown: hook.handleKeyDown, rows: 3, disabled: hook.isProcessing }), hook.error && (jsxRuntime.jsx("div", { className: "devic-gen-error", children: hook.error.message })), jsxRuntime.jsxs("div", { className: "devic-gen-tooltip-actions", children: [jsxRuntime.jsx("button", { type: "button", className: "devic-gen-tooltip-cancel", onClick: hook.close, disabled: hook.isProcessing, children: mergedOptions.cancelText }), jsxRuntime.jsx("button", { type: "button", className: "devic-gen-tooltip-confirm", onClick: handleConfirm, disabled: hook.isProcessing || !hook.inputValue.trim(), children: hook.isProcessing ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: "devic-gen-spinner devic-gen-spinner-small" }), mergedOptions.loadingLabel] })) : (mergedOptions.confirmText) })] })] })), mergedOptions.mode === 'modal' && hook.isOpen && (jsxRuntime.jsx("div", { className: "devic-gen-modal-overlay", onClick: (e) => {
+                    if (e.target === e.currentTarget && !hook.isProcessing)
+                        hook.close();
+                }, children: jsxRuntime.jsxs("div", { className: "devic-gen-modal", children: [jsxRuntime.jsxs("div", { className: "devic-gen-modal-header", children: [jsxRuntime.jsx("h3", { className: "devic-gen-modal-title", children: mergedOptions.modalTitle }), jsxRuntime.jsx("button", { type: "button", className: "devic-gen-modal-close", onClick: hook.close, "aria-label": "Close", disabled: hook.isProcessing, children: jsxRuntime.jsx(CloseIcon, {}) })] }), mergedOptions.modalDescription && (jsxRuntime.jsx("p", { className: "devic-gen-modal-description", children: mergedOptions.modalDescription })), jsxRuntime.jsxs("div", { className: "devic-gen-modal-body", children: [renderToolCalls(), hook.isProcessing && hook.toolCalls.length === 0 && renderProcessingStatus(), jsxRuntime.jsx("textarea", { ref: hook.inputRef, className: "devic-gen-input", placeholder: mergedOptions.placeholder, value: hook.inputValue, onChange: (e) => hook.setInputValue(e.target.value), onKeyDown: hook.handleKeyDown, rows: 4, disabled: hook.isProcessing }), hook.error && (jsxRuntime.jsx("div", { className: "devic-gen-error", children: hook.error.message }))] }), jsxRuntime.jsxs("div", { className: "devic-gen-modal-footer", children: [jsxRuntime.jsx("button", { type: "button", className: "devic-gen-modal-cancel", onClick: hook.close, disabled: hook.isProcessing, children: mergedOptions.cancelText }), jsxRuntime.jsx("button", { type: "button", className: "devic-gen-modal-confirm", onClick: handleConfirm, disabled: hook.isProcessing || !hook.inputValue.trim(), children: hook.isProcessing ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: "devic-gen-spinner devic-gen-spinner-small" }), mergedOptions.loadingLabel] })) : (mergedOptions.confirmText) })] })] }) }))] }));
+});
+/**
+ * Default sparkles icon
+ */
+function SparklesIcon() {
+    return (jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsxRuntime.jsx("path", { d: "M10 2L11.5 8.5L18 10L11.5 11.5L10 18L8.5 11.5L2 10L8.5 8.5L10 2Z", fill: "currentColor", opacity: "0.9" }), jsxRuntime.jsx("path", { d: "M16 3L16.5 5L18.5 5.5L16.5 6L16 8L15.5 6L13.5 5.5L15.5 5L16 3Z", fill: "currentColor", opacity: "0.6" }), jsxRuntime.jsx("circle", { cx: "4", cy: "15", r: "1", fill: "currentColor", opacity: "0.4" })] }));
+}
+/**
+ * Close icon
+ */
+function CloseIcon() {
+    return (jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsxRuntime.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }));
+}
+/**
+ * Check icon for completed tool calls
+ */
+function CheckIcon() {
+    return (jsxRuntime.jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: jsxRuntime.jsx("polyline", { points: "20 6 9 17 4 12" }) }));
+}
+
+exports.AIGenerationButton = AIGenerationButton;
+//# sourceMappingURL=AIGenerationButton.js.map