@devicai/ui 0.4.0 → 0.6.0

package/dist/esm/components/AIGenerationButton/AIGenerationButton.d.ts

@@ -0,0 +1,42 @@
+import React from 'react';
+import type { AIGenerationButtonProps, AIGenerationButtonHandle } from './AIGenerationButton.types';
+import './AIGenerationButton.css';
+/**
+ * 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}
+ * />
+ * ```
+ */
+export declare const AIGenerationButton: React.ForwardRefExoticComponent<AIGenerationButtonProps & React.RefAttributes<AIGenerationButtonHandle>>;

package/dist/esm/components/AIGenerationButton/AIGenerationButton.js

@@ -0,0 +1,252 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { forwardRef, useMemo, useImperativeHandle, useRef, useEffect, useCallback } from 'react';
+import { useAIGenerationButton } from './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 = 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 = useMemo(() => ({ ...DEFAULT_OPTIONS, ...options }), [options]);
+    const hook = useAIGenerationButton({
+        assistantId,
+        apiKey,
+        baseUrl,
+        tenantId,
+        tenantMetadata,
+        options: mergedOptions,
+        modelInterfaceTools,
+        onResponse,
+        onBeforeSend,
+        onError,
+        onStart,
+        onOpen,
+        onClose,
+        disabled,
+    });
+    // Expose handle
+    useImperativeHandle(ref, () => ({
+        generate: hook.generate,
+        open: hook.open,
+        close: hook.close,
+        reset: hook.reset,
+        isProcessing: hook.isProcessing,
+    }));
+    // Container ref for theming
+    const containerRef = useRef(null);
+    const tooltipRef = useRef(null);
+    // Apply CSS variables for theming
+    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
+    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 = 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 = useCallback(() => {
+        hook.generate();
+    }, [hook.generate]);
+    // Tooltip position styles
+    const tooltipPositionStyle = 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 (jsxs(Fragment, { children: [!mergedOptions.hideIcon && (jsx("span", { className: "devic-gen-button-icon", children: showButtonLoading ? (jsx("span", { className: "devic-gen-spinner" })) : (mergedOptions.icon || jsx(SparklesIcon, {})) })), !mergedOptions.hideLabel && (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 (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 (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 (jsxs("div", { className: "devic-gen-tool-item", "data-status": tc.status, children: [jsx("span", { className: "devic-gen-tool-icon", children: isExecuting ? (jsx("span", { className: "devic-gen-spinner devic-gen-spinner-small" })) : customIcon ? (customIcon) : (jsx(CheckIcon, {})) }), 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 (jsxs("div", { className: "devic-gen-processing-status", children: [jsx("span", { className: "devic-gen-spinner devic-gen-spinner-small" }), jsx("span", { className: "devic-gen-processing-text", children: hook.currentToolSummary || mergedOptions.processingMessage })] }));
+    };
+    return (jsxs("div", { ref: containerRef, className: `devic-gen-container ${containerClassName || ''}`, style: { position: 'relative', display: 'inline-block' }, children: [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 && (jsxs("div", { ref: tooltipRef, className: "devic-gen-tooltip", style: tooltipPositionStyle, "data-placement": mergedOptions.tooltipPlacement, children: [renderToolCalls(), hook.isProcessing && hook.toolCalls.length === 0 && renderProcessingStatus(), 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 && (jsx("div", { className: "devic-gen-error", children: hook.error.message })), jsxs("div", { className: "devic-gen-tooltip-actions", children: [jsx("button", { type: "button", className: "devic-gen-tooltip-cancel", onClick: hook.close, disabled: hook.isProcessing, children: mergedOptions.cancelText }), jsx("button", { type: "button", className: "devic-gen-tooltip-confirm", onClick: handleConfirm, disabled: hook.isProcessing || !hook.inputValue.trim(), children: hook.isProcessing ? (jsxs(Fragment, { children: [jsx("span", { className: "devic-gen-spinner devic-gen-spinner-small" }), mergedOptions.loadingLabel] })) : (mergedOptions.confirmText) })] })] })), mergedOptions.mode === 'modal' && hook.isOpen && (jsx("div", { className: "devic-gen-modal-overlay", onClick: (e) => {
+                    if (e.target === e.currentTarget && !hook.isProcessing)
+                        hook.close();
+                }, children: jsxs("div", { className: "devic-gen-modal", children: [jsxs("div", { className: "devic-gen-modal-header", children: [jsx("h3", { className: "devic-gen-modal-title", children: mergedOptions.modalTitle }), jsx("button", { type: "button", className: "devic-gen-modal-close", onClick: hook.close, "aria-label": "Close", disabled: hook.isProcessing, children: jsx(CloseIcon, {}) })] }), mergedOptions.modalDescription && (jsx("p", { className: "devic-gen-modal-description", children: mergedOptions.modalDescription })), jsxs("div", { className: "devic-gen-modal-body", children: [renderToolCalls(), hook.isProcessing && hook.toolCalls.length === 0 && renderProcessingStatus(), 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 && (jsx("div", { className: "devic-gen-error", children: hook.error.message }))] }), jsxs("div", { className: "devic-gen-modal-footer", children: [jsx("button", { type: "button", className: "devic-gen-modal-cancel", onClick: hook.close, disabled: hook.isProcessing, children: mergedOptions.cancelText }), jsx("button", { type: "button", className: "devic-gen-modal-confirm", onClick: handleConfirm, disabled: hook.isProcessing || !hook.inputValue.trim(), children: hook.isProcessing ? (jsxs(Fragment, { children: [jsx("span", { className: "devic-gen-spinner devic-gen-spinner-small" }), mergedOptions.loadingLabel] })) : (mergedOptions.confirmText) })] })] }) }))] }));
+});
+/**
+ * Default sparkles icon
+ */
+function SparklesIcon() {
+    return (jsxs("svg", { width: "16", height: "16", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [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" }), 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" }), jsx("circle", { cx: "4", cy: "15", r: "1", fill: "currentColor", opacity: "0.4" })] }));
+}
+/**
+ * Close icon
+ */
+function CloseIcon() {
+    return (jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }));
+}
+/**
+ * Check icon for completed tool calls
+ */
+function CheckIcon() {
+    return (jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: jsx("polyline", { points: "20 6 9 17 4 12" }) }));
+}
+
+export { AIGenerationButton };
+//# sourceMappingURL=AIGenerationButton.js.map

package/dist/esm/components/AIGenerationButton/AIGenerationButton.js.map

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

package/dist/esm/components/AIGenerationButton/AIGenerationButton.types.d.ts

@@ -0,0 +1,260 @@
+import type { ChatMessage, ModelInterfaceTool } from '../../api/types';
+import type { FeedbackTheme } from '../Feedback';
+import type { ToolCallSummary } from '../AICommandBar/AICommandBar.types';
+/**
+ * Interaction mode for the AIGenerationButton
+ * - 'direct': Sends a message immediately on button click (uses predefined prompt)
+ * - 'modal': Opens a modal to input a prompt before sending
+ * - 'tooltip': Shows a tooltip input for quick prompt entry
+ */
+export type AIGenerationButtonMode = 'direct' | 'modal' | 'tooltip';
+/**
+ * Result returned after generation completes
+ */
+export interface GenerationResult {
+    chatUid: string;
+    message: ChatMessage;
+    toolCalls: ToolCallSummary[];
+    rawResponse?: any;
+}
+/**
+ * Options for the AIGenerationButton
+ */
+export interface AIGenerationButtonOptions {
+    /**
+     * Interaction mode
+     * @default 'modal'
+     */
+    mode?: AIGenerationButtonMode;
+    /**
+     * Predefined prompt for 'direct' mode
+     * Required when mode is 'direct'
+     */
+    prompt?: string;
+    /**
+     * Placeholder text for the input (modal and tooltip modes)
+     * @default 'Describe what you want to generate...'
+     */
+    placeholder?: string;
+    /**
+     * Modal title (modal mode only)
+     * @default 'Generate with AI'
+     */
+    modalTitle?: string;
+    /**
+     * Modal description (modal mode only)
+     */
+    modalDescription?: string;
+    /**
+     * Confirm button text
+     * @default 'Generate'
+     */
+    confirmText?: string;
+    /**
+     * Cancel button text
+     * @default 'Cancel'
+     */
+    cancelText?: string;
+    /**
+     * Tooltip placement (tooltip mode only)
+     * @default 'top'
+     */
+    tooltipPlacement?: 'top' | 'bottom' | 'left' | 'right';
+    /**
+     * Tooltip width
+     * @default 300
+     */
+    tooltipWidth?: number | string;
+    /**
+     * Button variant
+     * @default 'primary'
+     */
+    variant?: 'primary' | 'secondary' | 'ghost' | 'outline';
+    /**
+     * Button size
+     * @default 'medium'
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * Custom icon for the button (replaces default sparkles icon)
+     */
+    icon?: React.ReactNode;
+    /**
+     * Hide the icon
+     * @default false
+     */
+    hideIcon?: boolean;
+    /**
+     * Button label
+     * @default 'Generate with AI'
+     */
+    label?: string;
+    /**
+     * Hide the label (icon only button)
+     * @default false
+     */
+    hideLabel?: boolean;
+    /**
+     * Loading label shown during processing
+     * @default 'Generating...'
+     */
+    loadingLabel?: string;
+    /**
+     * Primary color
+     */
+    color?: string;
+    /**
+     * Background color
+     */
+    backgroundColor?: string;
+    /**
+     * Text color
+     */
+    textColor?: string;
+    /**
+     * Border color
+     */
+    borderColor?: string;
+    /**
+     * Border radius
+     * @default 8
+     */
+    borderRadius?: number | string;
+    /**
+     * Font family
+     */
+    fontFamily?: string;
+    /**
+     * Font size
+     */
+    fontSize?: number | string;
+    /**
+     * Z-index for modal/tooltip overlays
+     * @default 10000
+     */
+    zIndex?: number;
+    /**
+     * Animation duration in ms
+     * @default 200
+     */
+    animationDuration?: number;
+    /**
+     * Custom renderers for tool calls by tool name.
+     * When a completed tool has a matching renderer, it replaces the default summary line.
+     */
+    toolRenderers?: Record<string, (input: any, output: any) => React.ReactNode>;
+    /**
+     * Custom icons for completed tool calls by tool name.
+     * Replaces the default check icon.
+     */
+    toolIcons?: Record<string, React.ReactNode>;
+    /**
+     * Message shown while processing (before any tools are called)
+     * @default 'Processing...'
+     */
+    processingMessage?: string;
+}
+/**
+ * Handle for programmatically controlling the AIGenerationButton
+ */
+export interface AIGenerationButtonHandle {
+    /**
+     * Trigger generation programmatically
+     * @param prompt Optional prompt (overrides predefined prompt in direct mode)
+     */
+    generate: (prompt?: string) => Promise<GenerationResult | null>;
+    /**
+     * Open the modal/tooltip (for modal and tooltip modes)
+     */
+    open: () => void;
+    /**
+     * Close the modal/tooltip
+     */
+    close: () => void;
+    /**
+     * Reset the component state
+     */
+    reset: () => void;
+    /**
+     * Check if currently processing
+     */
+    isProcessing: boolean;
+}
+/**
+ * Props for the AIGenerationButton component
+ */
+export interface AIGenerationButtonProps {
+    /**
+     * Assistant identifier
+     */
+    assistantId: string;
+    /**
+     * API key (overrides DevicContext)
+     */
+    apiKey?: string;
+    /**
+     * Base URL (overrides DevicContext)
+     */
+    baseUrl?: string;
+    /**
+     * Tenant ID
+     */
+    tenantId?: string;
+    /**
+     * Tenant metadata
+     */
+    tenantMetadata?: Record<string, any>;
+    /**
+     * Display and behavior options
+     */
+    options?: AIGenerationButtonOptions;
+    /**
+     * Client-side tools for model interface protocol
+     */
+    modelInterfaceTools?: ModelInterfaceTool[];
+    /**
+     * Callback when generation completes successfully
+     */
+    onResponse?: (result: GenerationResult) => void;
+    /**
+     * Callback before sending the message (can modify the prompt)
+     * Return the modified prompt or undefined to use the original
+     */
+    onBeforeSend?: (prompt: string) => string | undefined | Promise<string | undefined>;
+    /**
+     * Callback when an error occurs
+     */
+    onError?: (error: Error) => void;
+    /**
+     * Callback when processing starts
+     */
+    onStart?: () => void;
+    /**
+     * Callback when modal/tooltip opens
+     */
+    onOpen?: () => void;
+    /**
+     * Callback when modal/tooltip closes
+     */
+    onClose?: () => void;
+    /**
+     * Whether the button is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Additional CSS class for the button
+     */
+    className?: string;
+    /**
+     * Additional CSS class for the modal/tooltip container
+     */
+    containerClassName?: string;
+    /**
+     * Custom button content (replaces default button rendering)
+     */
+    children?: React.ReactNode;
+    /**
+     * Theme for the modal/tooltip (inherited from parent component styling)
+     */
+    theme?: FeedbackTheme;
+}

package/dist/esm/components/AIGenerationButton/index.d.ts

@@ -0,0 +1,3 @@
+export { AIGenerationButton } from './AIGenerationButton';
+export { useAIGenerationButton } from './useAIGenerationButton';
+export type { AIGenerationButtonProps, AIGenerationButtonOptions, AIGenerationButtonHandle, AIGenerationButtonMode, GenerationResult, } from './AIGenerationButton.types';