@lastbrain/ai-ui-react 1.0.7 → 1.0.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +16 -2
- package/dist/components/AiChipLabel.d.ts +7 -6
- package/dist/components/AiChipLabel.d.ts.map +1 -1
- package/dist/components/AiChipLabel.js +25 -36
- package/dist/components/AiInput.d.ts.map +1 -1
- package/dist/components/AiInput.js +27 -13
- package/dist/components/AiPromptPanel.d.ts.map +1 -1
- package/dist/components/AiPromptPanel.js +42 -3
- package/dist/components/AiSelect.d.ts.map +1 -1
- package/dist/components/AiSelect.js +12 -1
- package/dist/components/AiStatusButton.d.ts.map +1 -1
- package/dist/components/AiStatusButton.js +70 -4
- package/dist/components/AiTextarea.d.ts.map +1 -1
- package/dist/components/AiTextarea.js +29 -15
- package/dist/styles/inline.d.ts +67 -0
- package/dist/styles/inline.d.ts.map +1 -0
- package/dist/styles/inline.js +514 -0
- package/package.json +1 -1
- package/src/components/AiChipLabel.tsx +38 -76
- package/src/components/AiInput.tsx +74 -33
- package/src/components/AiPromptPanel.tsx +92 -22
- package/src/components/AiSelect.tsx +19 -10
- package/src/components/AiStatusButton.tsx +178 -71
- package/src/components/AiTextarea.tsx +77 -36
- package/src/styles/inline.ts +587 -0
package/README.md
CHANGED
|
@@ -21,13 +21,27 @@ pnpm add @lastbrain/ai-ui-react @lastbrain/ai-ui-core
|
|
|
21
21
|
|
|
22
22
|
## Styles
|
|
23
23
|
|
|
24
|
-
|
|
24
|
+
**Version 1.0.8+**: Components now use inline styles by default. No CSS import required!
|
|
25
|
+
|
|
26
|
+
The package includes built-in styling that works out of the box. Components will render correctly without any additional CSS imports.
|
|
27
|
+
|
|
28
|
+
If you want to customize the styling, you can:
|
|
29
|
+
|
|
30
|
+
1. **Override inline styles**: Pass custom `className` or `style` props
|
|
31
|
+
2. **Use the optional CSS file**: Import `@lastbrain/ai-ui-react/styles.css` for additional customization
|
|
32
|
+
3. **Provide your own styles**: Style components using the provided CSS classes
|
|
25
33
|
|
|
26
34
|
```tsx
|
|
35
|
+
// ✅ Works out of the box (no CSS import needed)
|
|
36
|
+
import { AiStatusButton } from "@lastbrain/ai-ui-react";
|
|
37
|
+
|
|
38
|
+
// ✅ Optional: Import CSS for customization
|
|
27
39
|
import "@lastbrain/ai-ui-react/styles.css";
|
|
28
40
|
```
|
|
29
41
|
|
|
30
|
-
|
|
42
|
+
### CSS Classes (for custom styling)
|
|
43
|
+
|
|
44
|
+
If you want to override styles using CSS, target these classes:
|
|
31
45
|
|
|
32
46
|
- `.ai-input` - Input field
|
|
33
47
|
- `.ai-textarea` - Textarea
|
|
@@ -1,8 +1,9 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
1
|
+
import React from "react";
|
|
2
|
+
export interface AiChipLabelProps {
|
|
3
|
+
children: React.ReactNode;
|
|
4
|
+
variant?: "default" | "success" | "warning" | "danger";
|
|
5
|
+
className?: string;
|
|
6
|
+
style?: React.CSSProperties;
|
|
6
7
|
}
|
|
7
|
-
export declare function AiChipLabel({
|
|
8
|
+
export declare function AiChipLabel({ children, variant, className, style: customStyle, }: AiChipLabelProps): import("react/jsx-runtime").JSX.Element;
|
|
8
9
|
//# sourceMappingURL=AiChipLabel.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AiChipLabel.d.ts","sourceRoot":"","sources":["../../src/components/AiChipLabel.tsx"],"names":[],"mappings":"AAEA,OAAO,
|
|
1
|
+
{"version":3,"file":"AiChipLabel.d.ts","sourceRoot":"","sources":["../../src/components/AiChipLabel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;IACvD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,OAAmB,EACnB,SAAS,EACT,KAAK,EAAE,WAAW,GACnB,EAAE,gBAAgB,2CAgClB"}
|
|
@@ -1,39 +1,28 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsx as _jsx
|
|
3
|
-
import {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
import { aiStyles } from "../styles/inline";
|
|
4
|
+
export function AiChipLabel({ children, variant = "default", className, style: customStyle, }) {
|
|
5
|
+
const variantStyles = {
|
|
6
|
+
default: {},
|
|
7
|
+
success: {
|
|
8
|
+
background: "#10b98110",
|
|
9
|
+
color: "#10b981",
|
|
10
|
+
borderColor: "#10b98130",
|
|
11
|
+
},
|
|
12
|
+
warning: {
|
|
13
|
+
background: "#f59e0b10",
|
|
14
|
+
color: "#f59e0b",
|
|
15
|
+
borderColor: "#f59e0b30",
|
|
16
|
+
},
|
|
17
|
+
danger: {
|
|
18
|
+
background: "#ef444410",
|
|
19
|
+
color: "#ef4444",
|
|
20
|
+
borderColor: "#ef444430",
|
|
21
|
+
},
|
|
14
22
|
};
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
const result = await generateText({
|
|
21
|
-
model: selectedModel,
|
|
22
|
-
prompt: selectedPrompt,
|
|
23
|
-
context: context || chipLabel || undefined,
|
|
24
|
-
});
|
|
25
|
-
if (result.text) {
|
|
26
|
-
setChipLabel(result.text);
|
|
27
|
-
onValue?.(result.text);
|
|
28
|
-
onToast?.({ type: "success", message: "Label generated successfully" });
|
|
29
|
-
}
|
|
30
|
-
}
|
|
31
|
-
catch (error) {
|
|
32
|
-
onToast?.({ type: "error", message: "Failed to generate label" });
|
|
33
|
-
}
|
|
34
|
-
finally {
|
|
35
|
-
setIsOpen(false);
|
|
36
|
-
}
|
|
37
|
-
};
|
|
38
|
-
return (_jsxs("div", { "data-ai-chip-wrapper": true, className: className, ...divProps, children: [_jsx("div", { "data-ai-chip-label": true, children: chipLabel || "Generate label" }), _jsx("button", { onClick: handleOpenPanel, disabled: disabled || loading, "data-ai-chip-button": true, type: "button", children: loading ? "..." : "✨" }), isOpen && (_jsx(AiPromptPanel, { isOpen: isOpen, onClose: handleClosePanel, onSubmit: handleSubmit, uiMode: uiMode, models: models || [] }))] }));
|
|
23
|
+
return (_jsx("span", { style: {
|
|
24
|
+
...aiStyles.chip,
|
|
25
|
+
...variantStyles[variant],
|
|
26
|
+
...customStyle,
|
|
27
|
+
}, className: className, children: children }));
|
|
39
28
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AiInput.d.ts","sourceRoot":"","sources":["../../src/components/AiInput.tsx"],"names":[],"mappings":"AAEA,OAAc,EAAoB,KAAK,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAC1E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"AiInput.d.ts","sourceRoot":"","sources":["../../src/components/AiInput.tsx"],"names":[],"mappings":"AAEA,OAAc,EAAoB,KAAK,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAC1E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAM5C,MAAM,WAAW,YACf,SACE,IAAI,CAAC,WAAW,EAAE,MAAM,CAAC,EACzB,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,SAAS,CAAC;IACxD,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;CAC7B;AAED,wBAAgB,OAAO,CAAC,EACtB,OAAO,EACP,QAAQ,EACR,MAAgB,EAChB,OAAO,EACP,KAAK,EACL,MAAM,EACN,QAAgB,EAChB,OAAO,EACP,OAAO,EACP,QAAQ,EACR,SAAS,EACT,GAAG,UAAU,EACd,EAAE,YAAY,2CAiKd"}
|
|
@@ -4,9 +4,12 @@ import { useState, useRef } from "react";
|
|
|
4
4
|
import { useAiCallText } from "../hooks/useAiCallText";
|
|
5
5
|
import { useAiModels } from "../hooks/useAiModels";
|
|
6
6
|
import { AiPromptPanel } from "./AiPromptPanel";
|
|
7
|
+
import { aiStyles } from "../styles/inline";
|
|
7
8
|
export function AiInput({ baseUrl, apiKeyId, uiMode = "modal", context, model, prompt, editMode = false, onValue, onToast, disabled, className, ...inputProps }) {
|
|
8
9
|
const [isOpen, setIsOpen] = useState(false);
|
|
9
10
|
const [inputValue, setInputValue] = useState(inputProps.value?.toString() || inputProps.defaultValue?.toString() || "");
|
|
11
|
+
const [isFocused, setIsFocused] = useState(false);
|
|
12
|
+
const [isButtonHovered, setIsButtonHovered] = useState(false);
|
|
10
13
|
const inputRef = useRef(null);
|
|
11
14
|
const { models } = useAiModels({ baseUrl, apiKeyId });
|
|
12
15
|
const { generateText, loading } = useAiCallText({ baseUrl, apiKeyId });
|
|
@@ -22,15 +25,13 @@ export function AiInput({ baseUrl, apiKeyId, uiMode = "modal", context, model, p
|
|
|
22
25
|
const result = await generateText({
|
|
23
26
|
model: selectedModel,
|
|
24
27
|
prompt: selectedPrompt,
|
|
25
|
-
context:
|
|
28
|
+
context: inputValue || context || undefined,
|
|
26
29
|
actionType: "autocomplete",
|
|
27
30
|
});
|
|
28
31
|
if (result.text) {
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
inputRef.current.value = result.text;
|
|
33
|
-
}
|
|
32
|
+
setInputValue(result.text);
|
|
33
|
+
if (inputRef.current) {
|
|
34
|
+
inputRef.current.value = result.text;
|
|
34
35
|
}
|
|
35
36
|
onValue?.(result.text);
|
|
36
37
|
onToast?.({ type: "success", message: "AI generation successful" });
|
|
@@ -50,15 +51,13 @@ export function AiInput({ baseUrl, apiKeyId, uiMode = "modal", context, model, p
|
|
|
50
51
|
const result = await generateText({
|
|
51
52
|
model,
|
|
52
53
|
prompt,
|
|
53
|
-
context:
|
|
54
|
+
context: inputValue || context || undefined,
|
|
54
55
|
actionType: "autocomplete",
|
|
55
56
|
});
|
|
56
57
|
if (result.text) {
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
inputRef.current.value = result.text;
|
|
61
|
-
}
|
|
58
|
+
setInputValue(result.text);
|
|
59
|
+
if (inputRef.current) {
|
|
60
|
+
inputRef.current.value = result.text;
|
|
62
61
|
}
|
|
63
62
|
onValue?.(result.text);
|
|
64
63
|
onToast?.({ type: "success", message: "AI generation successful" });
|
|
@@ -73,5 +72,20 @@ export function AiInput({ baseUrl, apiKeyId, uiMode = "modal", context, model, p
|
|
|
73
72
|
setInputValue(newValue);
|
|
74
73
|
inputProps.onChange?.(e);
|
|
75
74
|
};
|
|
76
|
-
return (_jsxs("div", {
|
|
75
|
+
return (_jsxs("div", { style: aiStyles.inputWrapper, className: className, children: [_jsx("input", { ref: inputRef, ...inputProps, style: {
|
|
76
|
+
...aiStyles.input,
|
|
77
|
+
...(isFocused && aiStyles.inputFocus),
|
|
78
|
+
}, value: inputValue, onChange: handleInputChange, onFocus: (e) => {
|
|
79
|
+
setIsFocused(true);
|
|
80
|
+
inputProps.onFocus?.(e);
|
|
81
|
+
}, onBlur: (e) => {
|
|
82
|
+
setIsFocused(false);
|
|
83
|
+
inputProps.onBlur?.(e);
|
|
84
|
+
}, disabled: disabled || loading }), _jsx("button", { style: {
|
|
85
|
+
...aiStyles.inputAiButton,
|
|
86
|
+
...(isButtonHovered && aiStyles.inputAiButtonHover),
|
|
87
|
+
...(disabled || loading
|
|
88
|
+
? { opacity: 0.5, cursor: "not-allowed" }
|
|
89
|
+
: {}),
|
|
90
|
+
}, onClick: hasConfiguration ? handleQuickGenerate : handleOpenPanel, onMouseEnter: () => setIsButtonHovered(true), onMouseLeave: () => setIsButtonHovered(false), disabled: disabled || loading, type: "button", title: hasConfiguration ? "Generate with AI" : "Setup AI", children: loading ? (_jsx("svg", { style: aiStyles.spinner, width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: _jsx("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" }) })) : hasConfiguration ? (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M12 5v14M5 12h14" }) })) : (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("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" }) })) }), isOpen && (_jsx(AiPromptPanel, { isOpen: isOpen, onClose: handleClosePanel, onSubmit: handleSubmit, uiMode: uiMode, models: models || [] }))] }));
|
|
77
91
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AiPromptPanel.d.ts","sourceRoot":"","sources":["../../src/components/AiPromptPanel.tsx"],"names":[],"mappings":"AAEA,OAAO,
|
|
1
|
+
{"version":3,"file":"AiPromptPanel.d.ts","sourceRoot":"","sources":["../../src/components/AiPromptPanel.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAuB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC5D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAGvC,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,QAAQ,EAAE,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,wBAAwB,KAAK,SAAS,CAAC;CAC3D;AAED,MAAM,WAAW,wBAAwB;IACvC,MAAM,CAAC,EAAE,QAAQ,EAAE,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;IACtB,gBAAgB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,WAAW,EAAE,MAAM,IAAI,CAAC;CACzB;AAED,wBAAgB,aAAa,CAAC,EAC5B,MAAM,EACN,OAAO,EACP,QAAQ,EACR,MAAgB,EAChB,MAAW,EACX,QAAQ,GACT,EAAE,kBAAkB,kDA4JpB"}
|
|
@@ -1,12 +1,25 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { useState } from "react";
|
|
3
|
+
import { useState, useEffect } from "react";
|
|
4
|
+
import { aiStyles } from "../styles/inline";
|
|
4
5
|
export function AiPromptPanel({ isOpen, onClose, onSubmit, uiMode = "modal", models = [], children, }) {
|
|
5
6
|
const [selectedModel, setSelectedModel] = useState(models[0]?.id || "");
|
|
6
7
|
const [prompt, setPrompt] = useState("");
|
|
8
|
+
const [isCloseHovered, setIsCloseHovered] = useState(false);
|
|
9
|
+
const [isCancelHovered, setIsCancelHovered] = useState(false);
|
|
10
|
+
const [isSubmitHovered, setIsSubmitHovered] = useState(false);
|
|
11
|
+
const [promptFocused, setPromptFocused] = useState(false);
|
|
12
|
+
const [modelFocused, setModelFocused] = useState(false);
|
|
13
|
+
useEffect(() => {
|
|
14
|
+
if (models.length > 0 && !selectedModel) {
|
|
15
|
+
setSelectedModel(models[0].id);
|
|
16
|
+
}
|
|
17
|
+
}, [models, selectedModel]);
|
|
7
18
|
if (!isOpen)
|
|
8
19
|
return null;
|
|
9
20
|
const handleSubmit = () => {
|
|
21
|
+
if (!selectedModel || !prompt.trim())
|
|
22
|
+
return;
|
|
10
23
|
onSubmit(selectedModel, prompt);
|
|
11
24
|
setPrompt("");
|
|
12
25
|
};
|
|
@@ -14,6 +27,14 @@ export function AiPromptPanel({ isOpen, onClose, onSubmit, uiMode = "modal", mod
|
|
|
14
27
|
onClose();
|
|
15
28
|
setPrompt("");
|
|
16
29
|
};
|
|
30
|
+
const handleKeyDown = (e) => {
|
|
31
|
+
if (e.key === "Escape") {
|
|
32
|
+
handleClose();
|
|
33
|
+
}
|
|
34
|
+
if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
|
|
35
|
+
handleSubmit();
|
|
36
|
+
}
|
|
37
|
+
};
|
|
17
38
|
const renderProps = {
|
|
18
39
|
models,
|
|
19
40
|
selectedModel,
|
|
@@ -24,7 +45,25 @@ export function AiPromptPanel({ isOpen, onClose, onSubmit, uiMode = "modal", mod
|
|
|
24
45
|
handleClose,
|
|
25
46
|
};
|
|
26
47
|
if (children) {
|
|
27
|
-
return (_jsx("div", {
|
|
48
|
+
return (_jsx("div", { style: aiStyles.modal, onKeyDown: handleKeyDown, children: children(renderProps) }));
|
|
28
49
|
}
|
|
29
|
-
return (_jsxs("div", {
|
|
50
|
+
return (_jsxs("div", { style: aiStyles.modal, onKeyDown: handleKeyDown, children: [_jsx("div", { style: aiStyles.modalOverlay, onClick: handleClose }), _jsxs("div", { style: aiStyles.modalContent, children: [_jsxs("div", { style: aiStyles.modalHeader, children: [_jsx("h2", { style: aiStyles.modalTitle, children: "AI Prompt Configuration" }), _jsx("button", { style: {
|
|
51
|
+
...aiStyles.modalCloseButton,
|
|
52
|
+
...(isCloseHovered && aiStyles.modalCloseButtonHover),
|
|
53
|
+
}, onClick: handleClose, onMouseEnter: () => setIsCloseHovered(true), onMouseLeave: () => setIsCloseHovered(false), "aria-label": "Close", children: "\u00D7" })] }), _jsxs("div", { style: aiStyles.modalBody, children: [_jsxs("div", { style: aiStyles.modalInputGroup, children: [_jsx("label", { htmlFor: "model-select", style: aiStyles.modalLabel, children: "AI Model" }), _jsxs("select", { id: "model-select", value: selectedModel, onChange: (e) => setSelectedModel(e.target.value), onFocus: () => setModelFocused(true), onBlur: () => setModelFocused(false), style: {
|
|
54
|
+
...aiStyles.select,
|
|
55
|
+
...(modelFocused && aiStyles.selectFocus),
|
|
56
|
+
}, children: [models.length === 0 && (_jsx("option", { value: "", children: "No models available" })), models.map((model) => (_jsx("option", { value: model.id, children: model.name }, model.id)))] })] }), _jsxs("div", { style: aiStyles.modalInputGroup, children: [_jsxs("label", { htmlFor: "prompt-input", style: aiStyles.modalLabel, children: ["Prompt", _jsx("span", { style: { color: aiStyles.textareaFocus.borderColor, marginLeft: "4px" }, children: "(Cmd/Ctrl + Enter to submit)" })] }), _jsx("textarea", { id: "prompt-input", value: prompt, onChange: (e) => setPrompt(e.target.value), onFocus: () => setPromptFocused(true), onBlur: () => setPromptFocused(false), placeholder: "Enter your AI prompt... e.g., 'Correct spelling and grammar'", rows: 6, style: {
|
|
57
|
+
...aiStyles.textarea,
|
|
58
|
+
padding: "12px 16px",
|
|
59
|
+
...(promptFocused && aiStyles.textareaFocus),
|
|
60
|
+
} })] })] }), _jsxs("div", { style: aiStyles.modalFooter, children: [_jsx("button", { onClick: handleClose, onMouseEnter: () => setIsCancelHovered(true), onMouseLeave: () => setIsCancelHovered(false), style: {
|
|
61
|
+
...aiStyles.button,
|
|
62
|
+
...aiStyles.buttonSecondary,
|
|
63
|
+
...(isCancelHovered && aiStyles.buttonSecondaryHover),
|
|
64
|
+
}, children: "Cancel" }), _jsx("button", { onClick: handleSubmit, disabled: !selectedModel || !prompt.trim(), onMouseEnter: () => setIsSubmitHovered(true), onMouseLeave: () => setIsSubmitHovered(false), style: {
|
|
65
|
+
...aiStyles.button,
|
|
66
|
+
...(isSubmitHovered && !(!selectedModel || !prompt.trim()) && aiStyles.buttonHover),
|
|
67
|
+
...(!selectedModel || !prompt.trim() ? aiStyles.buttonDisabled : {}),
|
|
68
|
+
}, children: "Generate with AI" })] })] })] }));
|
|
30
69
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AiSelect.d.ts","sourceRoot":"","sources":["../../src/components/AiSelect.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAY,KAAK,oBAAoB,EAAE,MAAM,OAAO,CAAC;AACnE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"AiSelect.d.ts","sourceRoot":"","sources":["../../src/components/AiSelect.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAY,KAAK,oBAAoB,EAAE,MAAM,OAAO,CAAC;AACnE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAM5C,MAAM,WAAW,aACf,SACE,IAAI,CAAC,WAAW,EAAE,MAAM,CAAC,EACzB,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,SAAS,CAAC;IAC1D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;CAC7B;AAED,wBAAgB,QAAQ,CAAC,EACvB,OAAO,EACP,QAAQ,EACR,MAAgB,EAChB,OAAO,EACP,KAAK,EACL,MAAM,EACN,OAAO,EACP,OAAO,EACP,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,GAAG,WAAW,EACf,EAAE,aAAa,2CAqEf"}
|
|
@@ -4,8 +4,10 @@ import { useState } from "react";
|
|
|
4
4
|
import { useAiCallText } from "../hooks/useAiCallText";
|
|
5
5
|
import { useAiModels } from "../hooks/useAiModels";
|
|
6
6
|
import { AiPromptPanel } from "./AiPromptPanel";
|
|
7
|
+
import { aiStyles } from "../styles/inline";
|
|
7
8
|
export function AiSelect({ baseUrl, apiKeyId, uiMode = "modal", context, model, prompt, onValue, onToast, disabled, className, children, ...selectProps }) {
|
|
8
9
|
const [isOpen, setIsOpen] = useState(false);
|
|
10
|
+
const [isFocused, setIsFocused] = useState(false);
|
|
9
11
|
const { models } = useAiModels({ baseUrl, apiKeyId });
|
|
10
12
|
const { generateText, loading } = useAiCallText({ baseUrl, apiKeyId });
|
|
11
13
|
const handleOpenPanel = () => {
|
|
@@ -34,5 +36,14 @@ export function AiSelect({ baseUrl, apiKeyId, uiMode = "modal", context, model,
|
|
|
34
36
|
setIsOpen(false);
|
|
35
37
|
}
|
|
36
38
|
};
|
|
37
|
-
return (_jsxs("div", { "
|
|
39
|
+
return (_jsxs("div", { style: { width: "100%" }, className: className, children: [_jsx("select", { ...selectProps, style: {
|
|
40
|
+
...aiStyles.select,
|
|
41
|
+
...(isFocused && aiStyles.selectFocus),
|
|
42
|
+
}, onFocus: (e) => {
|
|
43
|
+
setIsFocused(true);
|
|
44
|
+
selectProps.onFocus?.(e);
|
|
45
|
+
}, onBlur: (e) => {
|
|
46
|
+
setIsFocused(false);
|
|
47
|
+
selectProps.onBlur?.(e);
|
|
48
|
+
}, disabled: disabled || loading, children: children }), isOpen && (_jsx(AiPromptPanel, { isOpen: isOpen, onClose: handleClosePanel, onSubmit: handleSubmit, uiMode: uiMode, models: models || [] }))] }));
|
|
38
49
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AiStatusButton.d.ts","sourceRoot":"","sources":["../../src/components/AiStatusButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;
|
|
1
|
+
{"version":3,"file":"AiStatusButton.d.ts","sourceRoot":"","sources":["../../src/components/AiStatusButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAItD,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,QAAQ,GAAG,IAAI,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,OAAe,EACf,SAAc,GACf,EAAE,mBAAmB,2CAgSrB"}
|
|
@@ -1,13 +1,79 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { useState } from "react";
|
|
3
|
+
import { useState, useRef, useEffect } from "react";
|
|
4
|
+
import { aiStyles, calculateTooltipPosition } from "../styles/inline";
|
|
4
5
|
export function AiStatusButton({ status, loading = false, className = "", }) {
|
|
5
6
|
const [showTooltip, setShowTooltip] = useState(false);
|
|
7
|
+
const [isHovered, setIsHovered] = useState(false);
|
|
8
|
+
const [tooltipPosition, setTooltipPosition] = useState({});
|
|
9
|
+
const buttonRef = useRef(null);
|
|
10
|
+
const tooltipRef = useRef(null);
|
|
11
|
+
useEffect(() => {
|
|
12
|
+
if (showTooltip && buttonRef.current) {
|
|
13
|
+
const buttonRect = buttonRef.current.getBoundingClientRect();
|
|
14
|
+
const position = calculateTooltipPosition(buttonRect);
|
|
15
|
+
setTooltipPosition(position);
|
|
16
|
+
}
|
|
17
|
+
}, [showTooltip]);
|
|
18
|
+
const handleMouseEnter = () => {
|
|
19
|
+
setShowTooltip(true);
|
|
20
|
+
setIsHovered(true);
|
|
21
|
+
};
|
|
22
|
+
const handleMouseLeave = () => {
|
|
23
|
+
// Keep tooltip visible if hovering over it
|
|
24
|
+
setTimeout(() => {
|
|
25
|
+
if (!tooltipRef.current?.matches(":hover") &&
|
|
26
|
+
!buttonRef.current?.matches(":hover")) {
|
|
27
|
+
setShowTooltip(false);
|
|
28
|
+
setIsHovered(false);
|
|
29
|
+
}
|
|
30
|
+
}, 100);
|
|
31
|
+
};
|
|
6
32
|
if (loading) {
|
|
7
|
-
return (_jsx("button", {
|
|
33
|
+
return (_jsx("button", { ref: buttonRef, style: {
|
|
34
|
+
...aiStyles.statusButton,
|
|
35
|
+
...aiStyles.statusButtonDisabled,
|
|
36
|
+
}, className: className, disabled: true, children: _jsx("svg", { style: aiStyles.spinner, width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: _jsx("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" }) }) }));
|
|
8
37
|
}
|
|
9
38
|
if (!status) {
|
|
10
|
-
return (_jsxs("
|
|
39
|
+
return (_jsxs("div", { style: { position: "relative", display: "inline-block" }, children: [_jsx("button", { ref: buttonRef, style: {
|
|
40
|
+
...aiStyles.statusButton,
|
|
41
|
+
color: "#ef4444",
|
|
42
|
+
...(isHovered && aiStyles.statusButtonHover),
|
|
43
|
+
}, className: className, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: _jsx("polyline", { points: "22 12 18 12 15 21 9 3 6 12 2 12" }) }) }), showTooltip && (_jsx("div", { ref: tooltipRef, style: { ...aiStyles.tooltip, ...tooltipPosition }, onMouseEnter: () => setShowTooltip(true), onMouseLeave: handleMouseLeave, children: "No status available" }))] }));
|
|
11
44
|
}
|
|
12
|
-
return (_jsxs("div", {
|
|
45
|
+
return (_jsxs("div", { style: { position: "relative", display: "inline-block" }, children: [_jsx("button", { ref: buttonRef, style: {
|
|
46
|
+
...aiStyles.statusButton,
|
|
47
|
+
color: "#10b981",
|
|
48
|
+
...(isHovered && aiStyles.statusButtonHover),
|
|
49
|
+
}, className: className, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: _jsx("polyline", { points: "22 12 18 12 15 21 9 3 6 12 2 12" }) }) }), showTooltip && (_jsxs("div", { ref: tooltipRef, style: { ...aiStyles.tooltip, ...tooltipPosition }, onMouseEnter: () => setShowTooltip(true), onMouseLeave: handleMouseLeave, children: [_jsx("div", { style: aiStyles.tooltipHeader, children: "API Status" }), _jsxs("div", { style: {
|
|
50
|
+
...aiStyles.tooltipSection,
|
|
51
|
+
...aiStyles.tooltipSectionFirst,
|
|
52
|
+
}, children: [_jsxs("div", { style: aiStyles.tooltipRow, children: [_jsx("span", { style: aiStyles.tooltipLabel, children: "API Key:" }), _jsx("span", { style: aiStyles.tooltipValue, children: status.api_key.name })] }), _jsxs("div", { style: aiStyles.tooltipRow, children: [_jsx("span", { style: aiStyles.tooltipLabel, children: "Env:" }), _jsx("span", { style: aiStyles.tooltipValue, children: status.api_key.env })] }), _jsxs("div", { style: aiStyles.tooltipRow, children: [_jsx("span", { style: aiStyles.tooltipLabel, children: "Rate Limit:" }), _jsxs("span", { style: aiStyles.tooltipValue, children: [status.api_key.rate_limit_rpm, " req/min"] })] })] }), _jsxs("div", { style: aiStyles.tooltipSection, children: [_jsx("div", { style: aiStyles.tooltipSubtitle, children: "Balance" }), _jsxs("div", { style: aiStyles.tooltipRow, children: [_jsx("span", { style: aiStyles.tooltipLabel, children: "Total:" }), _jsx("span", { style: {
|
|
53
|
+
...aiStyles.tooltipValue,
|
|
54
|
+
...aiStyles.tooltipValueBold,
|
|
55
|
+
}, children: status.balance.total.toLocaleString() })] }), _jsxs("div", { style: aiStyles.tooltipRow, children: [_jsx("span", { style: aiStyles.tooltipLabel, children: "Purchased:" }), _jsx("span", { style: aiStyles.tooltipValue, children: status.balance.purchased.toLocaleString() })] }), _jsxs("div", { style: aiStyles.tooltipRow, children: [_jsx("span", { style: aiStyles.tooltipLabel, children: "Quota:" }), _jsx("span", { style: aiStyles.tooltipValue, children: status.balance.quota.toLocaleString() })] })] }), _jsxs("div", { style: aiStyles.tooltipSection, children: [_jsx("div", { style: aiStyles.tooltipSubtitle, children: "Plan" }), _jsxs("div", { style: aiStyles.tooltipRow, children: [_jsx("span", { style: aiStyles.tooltipLabel, children: "Type:" }), _jsx("span", { style: {
|
|
56
|
+
...aiStyles.tooltipValue,
|
|
57
|
+
textTransform: "capitalize",
|
|
58
|
+
}, children: status.quota.plan })] }), _jsxs("div", { style: aiStyles.tooltipRow, children: [_jsx("span", { style: aiStyles.tooltipLabel, children: "Remaining:" }), _jsxs("span", { style: aiStyles.tooltipValue, children: [status.quota.remaining_quota.toLocaleString(), " /", " ", status.quota.effective_quota.toLocaleString()] })] }), _jsxs("div", { style: aiStyles.tooltipRow, children: [_jsx("span", { style: aiStyles.tooltipLabel, children: "Status:" }), _jsx("span", { style: {
|
|
59
|
+
...aiStyles.tooltipValue,
|
|
60
|
+
...(status.quota.is_active
|
|
61
|
+
? aiStyles.tooltipValueSuccess
|
|
62
|
+
: aiStyles.tooltipValueWarning),
|
|
63
|
+
}, children: status.quota.is_active ? "Active" : "Inactive" })] })] }), _jsxs("div", { style: aiStyles.tooltipSection, children: [_jsx("div", { style: aiStyles.tooltipSubtitle, children: "Storage" }), _jsxs("div", { style: aiStyles.tooltipRow, children: [_jsx("span", { style: aiStyles.tooltipLabel, children: "Database:" }), _jsxs("span", { style: aiStyles.tooltipValue, children: [status.storage.db_mb.toFixed(2), " MB"] })] }), _jsxs("div", { style: aiStyles.tooltipRow, children: [_jsx("span", { style: aiStyles.tooltipLabel, children: "Files:" }), _jsxs("span", { style: aiStyles.tooltipValue, children: [status.storage.files_mb.toFixed(2), " MB"] })] }), _jsxs("div", { style: aiStyles.tooltipRow, children: [_jsx("span", { style: aiStyles.tooltipLabel, children: "Total:" }), _jsxs("span", { style: {
|
|
64
|
+
...aiStyles.tooltipValue,
|
|
65
|
+
...aiStyles.tooltipValueBold,
|
|
66
|
+
}, children: [(status.storage.db_mb + status.storage.files_mb).toFixed(2), " MB"] })] })] }), _jsxs("div", { style: aiStyles.tooltipActions, children: [_jsx("a", { href: "https://ai.lastbrain.io/fr/auth/dashboard", target: "_blank", rel: "noopener noreferrer", style: aiStyles.tooltipLink, onMouseEnter: (e) => {
|
|
67
|
+
Object.assign(e.currentTarget.style, aiStyles.tooltipLinkHover);
|
|
68
|
+
}, onMouseLeave: (e) => {
|
|
69
|
+
Object.assign(e.currentTarget.style, aiStyles.tooltipLink);
|
|
70
|
+
}, children: "Dashboard" }), _jsx("a", { href: "https://ai.lastbrain.io/fr/auth/billing", target: "_blank", rel: "noopener noreferrer", style: aiStyles.tooltipLink, onMouseEnter: (e) => {
|
|
71
|
+
Object.assign(e.currentTarget.style, aiStyles.tooltipLinkHover);
|
|
72
|
+
}, onMouseLeave: (e) => {
|
|
73
|
+
Object.assign(e.currentTarget.style, aiStyles.tooltipLink);
|
|
74
|
+
}, children: "History" }), _jsx("a", { href: "https://ai.lastbrain.io/fr/auth/billing", target: "_blank", rel: "noopener noreferrer", style: aiStyles.tooltipLink, onMouseEnter: (e) => {
|
|
75
|
+
Object.assign(e.currentTarget.style, aiStyles.tooltipLinkHover);
|
|
76
|
+
}, onMouseLeave: (e) => {
|
|
77
|
+
Object.assign(e.currentTarget.style, aiStyles.tooltipLink);
|
|
78
|
+
}, children: "Settings" })] })] }))] }));
|
|
13
79
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AiTextarea.d.ts","sourceRoot":"","sources":["../../src/components/AiTextarea.tsx"],"names":[],"mappings":"AAEA,OAAc,EAAoB,KAAK,sBAAsB,EAAE,MAAM,OAAO,CAAC;AAC7E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"AiTextarea.d.ts","sourceRoot":"","sources":["../../src/components/AiTextarea.tsx"],"names":[],"mappings":"AAEA,OAAc,EAAoB,KAAK,sBAAsB,EAAE,MAAM,OAAO,CAAC;AAC7E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAM5C,MAAM,WAAW,eACf,SACE,IAAI,CAAC,WAAW,EAAE,MAAM,CAAC,EACzB,IAAI,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,EAAE,SAAS,CAAC;IAC9D,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;CAC7B;AAED,wBAAgB,UAAU,CAAC,EACzB,OAAO,EACP,QAAQ,EACR,MAAgB,EAChB,OAAO,EACP,KAAK,EACL,MAAM,EACN,QAAgB,EAChB,OAAO,EACP,OAAO,EACP,QAAQ,EACR,SAAS,EACT,GAAG,aAAa,EACjB,EAAE,eAAe,2CAmKjB"}
|
|
@@ -4,11 +4,14 @@ import { useState, useRef } from "react";
|
|
|
4
4
|
import { useAiCallText } from "../hooks/useAiCallText";
|
|
5
5
|
import { useAiModels } from "../hooks/useAiModels";
|
|
6
6
|
import { AiPromptPanel } from "./AiPromptPanel";
|
|
7
|
+
import { aiStyles } from "../styles/inline";
|
|
7
8
|
export function AiTextarea({ baseUrl, apiKeyId, uiMode = "modal", context, model, prompt, editMode = false, onValue, onToast, disabled, className, ...textareaProps }) {
|
|
8
9
|
const [isOpen, setIsOpen] = useState(false);
|
|
9
|
-
const [
|
|
10
|
+
const [textareaValue, setTextareaValue] = useState(textareaProps.value?.toString() ||
|
|
10
11
|
textareaProps.defaultValue?.toString() ||
|
|
11
12
|
"");
|
|
13
|
+
const [isFocused, setIsFocused] = useState(false);
|
|
14
|
+
const [isButtonHovered, setIsButtonHovered] = useState(false);
|
|
12
15
|
const textareaRef = useRef(null);
|
|
13
16
|
const { models } = useAiModels({ baseUrl, apiKeyId });
|
|
14
17
|
const { generateText, loading } = useAiCallText({ baseUrl, apiKeyId });
|
|
@@ -24,15 +27,13 @@ export function AiTextarea({ baseUrl, apiKeyId, uiMode = "modal", context, model
|
|
|
24
27
|
const result = await generateText({
|
|
25
28
|
model: selectedModel,
|
|
26
29
|
prompt: selectedPrompt,
|
|
27
|
-
context:
|
|
30
|
+
context: textareaValue || context || undefined,
|
|
28
31
|
actionType: "autocomplete",
|
|
29
32
|
});
|
|
30
33
|
if (result.text) {
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
textareaRef.current.value = result.text;
|
|
35
|
-
}
|
|
34
|
+
setTextareaValue(result.text);
|
|
35
|
+
if (textareaRef.current) {
|
|
36
|
+
textareaRef.current.value = result.text;
|
|
36
37
|
}
|
|
37
38
|
onValue?.(result.text);
|
|
38
39
|
onToast?.({ type: "success", message: "AI generation successful" });
|
|
@@ -52,15 +53,13 @@ export function AiTextarea({ baseUrl, apiKeyId, uiMode = "modal", context, model
|
|
|
52
53
|
const result = await generateText({
|
|
53
54
|
model,
|
|
54
55
|
prompt,
|
|
55
|
-
context:
|
|
56
|
+
context: textareaValue || context || undefined,
|
|
56
57
|
actionType: "autocomplete",
|
|
57
58
|
});
|
|
58
59
|
if (result.text) {
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
textareaRef.current.value = result.text;
|
|
63
|
-
}
|
|
60
|
+
setTextareaValue(result.text);
|
|
61
|
+
if (textareaRef.current) {
|
|
62
|
+
textareaRef.current.value = result.text;
|
|
64
63
|
}
|
|
65
64
|
onValue?.(result.text);
|
|
66
65
|
onToast?.({ type: "success", message: "AI generation successful" });
|
|
@@ -72,8 +71,23 @@ export function AiTextarea({ baseUrl, apiKeyId, uiMode = "modal", context, model
|
|
|
72
71
|
};
|
|
73
72
|
const handleTextareaChange = (e) => {
|
|
74
73
|
const newValue = e.target.value;
|
|
75
|
-
|
|
74
|
+
setTextareaValue(newValue);
|
|
76
75
|
textareaProps.onChange?.(e);
|
|
77
76
|
};
|
|
78
|
-
return (_jsxs("div", {
|
|
77
|
+
return (_jsxs("div", { style: aiStyles.textareaWrapper, className: className, children: [_jsx("textarea", { ref: textareaRef, ...textareaProps, style: {
|
|
78
|
+
...aiStyles.textarea,
|
|
79
|
+
...(isFocused && aiStyles.textareaFocus),
|
|
80
|
+
}, value: textareaValue, onChange: handleTextareaChange, onFocus: (e) => {
|
|
81
|
+
setIsFocused(true);
|
|
82
|
+
textareaProps.onFocus?.(e);
|
|
83
|
+
}, onBlur: (e) => {
|
|
84
|
+
setIsFocused(false);
|
|
85
|
+
textareaProps.onBlur?.(e);
|
|
86
|
+
}, disabled: disabled || loading }), _jsx("button", { style: {
|
|
87
|
+
...aiStyles.textareaAiButton,
|
|
88
|
+
...(isButtonHovered && aiStyles.textareaAiButtonHover),
|
|
89
|
+
...(disabled || loading
|
|
90
|
+
? { opacity: 0.5, cursor: "not-allowed" }
|
|
91
|
+
: {}),
|
|
92
|
+
}, onClick: hasConfiguration ? handleQuickGenerate : handleOpenPanel, onMouseEnter: () => setIsButtonHovered(true), onMouseLeave: () => setIsButtonHovered(false), disabled: disabled || loading, type: "button", title: hasConfiguration ? "Generate with AI" : "Setup AI", children: loading ? (_jsx("svg", { style: aiStyles.spinner, width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: _jsx("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" }) })) : hasConfiguration ? (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M12 5v14M5 12h14" }) })) : (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("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" }) })) }), isOpen && (_jsx(AiPromptPanel, { isOpen: isOpen, onClose: handleClosePanel, onSubmit: handleSubmit, uiMode: uiMode, models: models || [] }))] }));
|
|
79
93
|
}
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Inline styles for AI UI components
|
|
3
|
+
* Theme: Purple/Violet primary color with light/dark mode support
|
|
4
|
+
*/
|
|
5
|
+
export declare const aiStyles: {
|
|
6
|
+
input: React.CSSProperties;
|
|
7
|
+
inputFocus: React.CSSProperties;
|
|
8
|
+
inputError: React.CSSProperties;
|
|
9
|
+
inputWrapper: {
|
|
10
|
+
position: "relative";
|
|
11
|
+
width: string;
|
|
12
|
+
};
|
|
13
|
+
inputAiButton: React.CSSProperties;
|
|
14
|
+
inputAiButtonHover: React.CSSProperties;
|
|
15
|
+
textarea: React.CSSProperties;
|
|
16
|
+
textareaFocus: React.CSSProperties;
|
|
17
|
+
textareaWrapper: {
|
|
18
|
+
position: "relative";
|
|
19
|
+
width: string;
|
|
20
|
+
};
|
|
21
|
+
textareaAiButton: React.CSSProperties;
|
|
22
|
+
textareaAiButtonHover: React.CSSProperties;
|
|
23
|
+
button: React.CSSProperties;
|
|
24
|
+
buttonHover: React.CSSProperties;
|
|
25
|
+
buttonDisabled: React.CSSProperties;
|
|
26
|
+
select: React.CSSProperties;
|
|
27
|
+
selectFocus: React.CSSProperties;
|
|
28
|
+
statusButton: React.CSSProperties;
|
|
29
|
+
statusButtonHover: React.CSSProperties;
|
|
30
|
+
statusButtonDisabled: React.CSSProperties;
|
|
31
|
+
tooltip: React.CSSProperties;
|
|
32
|
+
tooltipHeader: React.CSSProperties;
|
|
33
|
+
tooltipSection: React.CSSProperties;
|
|
34
|
+
tooltipSectionFirst: React.CSSProperties;
|
|
35
|
+
tooltipSubtitle: React.CSSProperties;
|
|
36
|
+
tooltipRow: React.CSSProperties;
|
|
37
|
+
tooltipLabel: React.CSSProperties;
|
|
38
|
+
tooltipValue: React.CSSProperties;
|
|
39
|
+
tooltipValueBold: React.CSSProperties;
|
|
40
|
+
tooltipValueSuccess: React.CSSProperties;
|
|
41
|
+
tooltipValueWarning: React.CSSProperties;
|
|
42
|
+
tooltipActions: React.CSSProperties;
|
|
43
|
+
tooltipLink: React.CSSProperties;
|
|
44
|
+
tooltipLinkHover: React.CSSProperties;
|
|
45
|
+
chip: React.CSSProperties;
|
|
46
|
+
modal: React.CSSProperties;
|
|
47
|
+
modalOverlay: React.CSSProperties;
|
|
48
|
+
modalContent: React.CSSProperties;
|
|
49
|
+
modalHeader: React.CSSProperties;
|
|
50
|
+
modalTitle: React.CSSProperties;
|
|
51
|
+
modalCloseButton: React.CSSProperties;
|
|
52
|
+
modalCloseButtonHover: React.CSSProperties;
|
|
53
|
+
modalBody: React.CSSProperties;
|
|
54
|
+
modalFooter: React.CSSProperties;
|
|
55
|
+
modalLabel: React.CSSProperties;
|
|
56
|
+
modalInputGroup: React.CSSProperties;
|
|
57
|
+
buttonSecondary: React.CSSProperties;
|
|
58
|
+
buttonSecondaryHover: React.CSSProperties;
|
|
59
|
+
spinner: React.CSSProperties;
|
|
60
|
+
};
|
|
61
|
+
export declare function calculateTooltipPosition(buttonRect: DOMRect, tooltipWidth?: number, tooltipHeight?: number): {
|
|
62
|
+
top?: string;
|
|
63
|
+
bottom?: string;
|
|
64
|
+
left?: string;
|
|
65
|
+
right?: string;
|
|
66
|
+
};
|
|
67
|
+
//# sourceMappingURL=inline.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"inline.d.ts","sourceRoot":"","sources":["../../src/styles/inline.ts"],"names":[],"mappings":"AAAA;;;GAGG;AA+DH,eAAO,MAAM,QAAQ;WAcd,KAAK,CAAC,aAAa;gBAKnB,KAAK,CAAC,aAAa;gBAInB,KAAK,CAAC,aAAa;;;;;mBAyBnB,KAAK,CAAC,aAAa;wBAMnB,KAAK,CAAC,aAAa;cAiBnB,KAAK,CAAC,aAAa;mBAKnB,KAAK,CAAC,aAAa;;;;;sBAwBnB,KAAK,CAAC,aAAa;2BAMnB,KAAK,CAAC,aAAa;YAoBnB,KAAK,CAAC,aAAa;iBAMnB,KAAK,CAAC,aAAa;oBAMnB,KAAK,CAAC,aAAa;YAgBnB,KAAK,CAAC,aAAa;iBAKnB,KAAK,CAAC,aAAa;kBAgBnB,KAAK,CAAC,aAAa;uBAMnB,KAAK,CAAC,aAAa;0BAKnB,KAAK,CAAC,aAAa;aAgBnB,KAAK,CAAC,aAAa;mBASnB,KAAK,CAAC,aAAa;oBAKnB,KAAK,CAAC,aAAa;yBAKnB,KAAK,CAAC,aAAa;qBASnB,KAAK,CAAC,aAAa;gBAQnB,KAAK,CAAC,aAAa;kBAKnB,KAAK,CAAC,aAAa;kBAQnB,KAAK,CAAC,aAAa;sBAKnB,KAAK,CAAC,aAAa;yBAKnB,KAAK,CAAC,aAAa;yBAKnB,KAAK,CAAC,aAAa;oBASnB,KAAK,CAAC,aAAa;iBAcnB,KAAK,CAAC,aAAa;sBAKnB,KAAK,CAAC,aAAa;UAcnB,KAAK,CAAC,aAAa;WAenB,KAAK,CAAC,aAAa;kBAWnB,KAAK,CAAC,aAAa;kBAanB,KAAK,CAAC,aAAa;iBAQnB,KAAK,CAAC,aAAa;gBAOnB,KAAK,CAAC,aAAa;sBAiBnB,KAAK,CAAC,aAAa;2BAKnB,KAAK,CAAC,aAAa;eAMnB,KAAK,CAAC,aAAa;iBAQnB,KAAK,CAAC,aAAa;gBAQnB,KAAK,CAAC,aAAa;qBAInB,KAAK,CAAC,aAAa;qBAOnB,KAAK,CAAC,aAAa;0BAKnB,KAAK,CAAC,aAAa;aAUnB,KAAK,CAAC,aAAa;CACzB,CAAC;AA+BF,wBAAgB,wBAAwB,CACtC,UAAU,EAAE,OAAO,EACnB,YAAY,GAAE,MAAY,EAC1B,aAAa,GAAE,MAAY,GAC1B;IAAE,GAAG,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAoDlE"}
|