@lastbrain/ai-ui-react 1.0.8 → 1.0.10
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 +28 -14
- package/dist/components/AiPromptPanel.d.ts +4 -2
- package/dist/components/AiPromptPanel.d.ts.map +1 -1
- package/dist/components/AiPromptPanel.js +159 -7
- 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 +41 -37
- package/dist/components/AiTextarea.d.ts.map +1 -1
- package/dist/components/AiTextarea.js +30 -16
- package/dist/styles/inline.d.ts +57 -115
- package/dist/styles/inline.d.ts.map +1 -1
- package/dist/styles/inline.js +410 -31
- package/package.json +1 -1
- package/src/components/AiChipLabel.tsx +38 -76
- package/src/components/AiInput.tsx +77 -34
- package/src/components/AiPromptPanel.tsx +307 -43
- package/src/components/AiSelect.tsx +19 -10
- package/src/components/AiStatusButton.tsx +64 -38
- package/src/components/AiTextarea.tsx +80 -37
- package/src/styles/inline.ts +481 -49
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,2CAmKd"}
|
|
@@ -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 });
|
|
@@ -17,20 +20,18 @@ export function AiInput({ baseUrl, apiKeyId, uiMode = "modal", context, model, p
|
|
|
17
20
|
const handleClosePanel = () => {
|
|
18
21
|
setIsOpen(false);
|
|
19
22
|
};
|
|
20
|
-
const handleSubmit = async (selectedModel, selectedPrompt) => {
|
|
23
|
+
const handleSubmit = async (selectedModel, selectedPrompt, promptId) => {
|
|
21
24
|
try {
|
|
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 || [], sourceText: inputValue || undefined }))] }));
|
|
77
91
|
}
|
|
@@ -4,9 +4,10 @@ import type { UiMode } from "../types";
|
|
|
4
4
|
export interface AiPromptPanelProps {
|
|
5
5
|
isOpen: boolean;
|
|
6
6
|
onClose: () => void;
|
|
7
|
-
onSubmit: (model: string, prompt: string) => void;
|
|
7
|
+
onSubmit: (model: string, prompt: string, promptId?: string) => void;
|
|
8
8
|
uiMode?: UiMode;
|
|
9
9
|
models?: ModelRef[];
|
|
10
|
+
sourceText?: string;
|
|
10
11
|
children?: (props: AiPromptPanelRenderProps) => ReactNode;
|
|
11
12
|
}
|
|
12
13
|
export interface AiPromptPanelRenderProps {
|
|
@@ -15,8 +16,9 @@ export interface AiPromptPanelRenderProps {
|
|
|
15
16
|
setSelectedModel: (model: string) => void;
|
|
16
17
|
prompt: string;
|
|
17
18
|
setPrompt: (prompt: string) => void;
|
|
19
|
+
sourceText?: string;
|
|
18
20
|
handleSubmit: () => void;
|
|
19
21
|
handleClose: () => void;
|
|
20
22
|
}
|
|
21
|
-
export declare function AiPromptPanel({ isOpen, onClose, onSubmit, uiMode, models, children, }: AiPromptPanelProps): import("react/jsx-runtime").JSX.Element | null;
|
|
23
|
+
export declare function AiPromptPanel({ isOpen, onClose, onSubmit, uiMode, models, sourceText, children, }: AiPromptPanelProps): import("react/jsx-runtime").JSX.Element | null;
|
|
22
24
|
//# sourceMappingURL=AiPromptPanel.d.ts.map
|
|
@@ -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;AAIvC,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,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACrE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,QAAQ,EAAE,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,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,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,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,UAAU,EACV,QAAQ,GACT,EAAE,kBAAkB,kDA0VpB"}
|
|
@@ -1,30 +1,182 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { useState } from "react";
|
|
4
|
-
|
|
5
|
-
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
3
|
+
import { useState, useEffect } from "react";
|
|
4
|
+
import { aiStyles } from "../styles/inline";
|
|
5
|
+
import { usePrompts } from "../hooks/usePrompts";
|
|
6
|
+
export function AiPromptPanel({ isOpen, onClose, onSubmit, uiMode = "modal", models = [], sourceText, children, }) {
|
|
7
|
+
const [selectedModel, setSelectedModel] = useState("");
|
|
6
8
|
const [prompt, setPrompt] = useState("");
|
|
9
|
+
const [promptId, setPromptId] = useState(undefined);
|
|
10
|
+
const [isCloseHovered, setIsCloseHovered] = useState(false);
|
|
11
|
+
const [isCancelHovered, setIsCancelHovered] = useState(false);
|
|
12
|
+
const [isSubmitHovered, setIsSubmitHovered] = useState(false);
|
|
13
|
+
const [promptFocused, setPromptFocused] = useState(false);
|
|
14
|
+
const [modelFocused, setModelFocused] = useState(false);
|
|
15
|
+
const [showPromptLibrary, setShowPromptLibrary] = useState(false);
|
|
16
|
+
const { prompts, loading: promptsLoading, fetchPrompts, incrementStat } = usePrompts();
|
|
17
|
+
// Set initial model when models change
|
|
18
|
+
useEffect(() => {
|
|
19
|
+
if (models.length > 0 && !selectedModel) {
|
|
20
|
+
setSelectedModel(models[0].id);
|
|
21
|
+
}
|
|
22
|
+
}, [models, selectedModel]);
|
|
23
|
+
// Fetch prompts when modal opens
|
|
24
|
+
useEffect(() => {
|
|
25
|
+
if (isOpen && models.length > 0) {
|
|
26
|
+
const modelType = models.find((m) => m.id === selectedModel)?.type;
|
|
27
|
+
fetchPrompts({
|
|
28
|
+
type: modelType === "image" ? "image" : "text",
|
|
29
|
+
});
|
|
30
|
+
}
|
|
31
|
+
}, [isOpen, selectedModel, models, fetchPrompts]);
|
|
7
32
|
if (!isOpen)
|
|
8
33
|
return null;
|
|
9
34
|
const handleSubmit = () => {
|
|
10
|
-
|
|
35
|
+
if (!selectedModel || !prompt.trim())
|
|
36
|
+
return;
|
|
37
|
+
onSubmit(selectedModel, prompt, promptId);
|
|
11
38
|
setPrompt("");
|
|
39
|
+
setPromptId(undefined);
|
|
12
40
|
};
|
|
13
41
|
const handleClose = () => {
|
|
14
42
|
onClose();
|
|
15
43
|
setPrompt("");
|
|
44
|
+
setPromptId(undefined);
|
|
45
|
+
setShowPromptLibrary(false);
|
|
16
46
|
};
|
|
47
|
+
const handleKeyDown = (e) => {
|
|
48
|
+
if (e.key === "Escape") {
|
|
49
|
+
handleClose();
|
|
50
|
+
}
|
|
51
|
+
if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
|
|
52
|
+
handleSubmit();
|
|
53
|
+
}
|
|
54
|
+
};
|
|
55
|
+
const handleSelectPrompt = (promptData) => {
|
|
56
|
+
setPrompt(promptData.content);
|
|
57
|
+
setPromptId(promptData.id);
|
|
58
|
+
incrementStat(promptData.id, "picked");
|
|
59
|
+
setShowPromptLibrary(false);
|
|
60
|
+
};
|
|
61
|
+
const currentModelType = models.find((m) => m.id === selectedModel)?.type;
|
|
62
|
+
const filteredPrompts = prompts.filter((p) => {
|
|
63
|
+
const matchesType = currentModelType === "image" ? p.type === "image" : p.type !== "image";
|
|
64
|
+
return matchesType;
|
|
65
|
+
});
|
|
17
66
|
const renderProps = {
|
|
18
67
|
models,
|
|
19
68
|
selectedModel,
|
|
20
69
|
setSelectedModel,
|
|
21
70
|
prompt,
|
|
22
71
|
setPrompt,
|
|
72
|
+
sourceText,
|
|
23
73
|
handleSubmit,
|
|
24
74
|
handleClose,
|
|
25
75
|
};
|
|
26
76
|
if (children) {
|
|
27
|
-
return (_jsx("div", {
|
|
77
|
+
return (_jsx("div", { style: aiStyles.modal, onKeyDown: handleKeyDown, children: children(renderProps) }));
|
|
28
78
|
}
|
|
29
|
-
return (_jsxs("div", {
|
|
79
|
+
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: showPromptLibrary ? "Select a Prompt" : "AI Prompt Configuration" }), _jsx("button", { style: {
|
|
80
|
+
...aiStyles.modalCloseButton,
|
|
81
|
+
...(isCloseHovered && aiStyles.modalCloseButtonHover),
|
|
82
|
+
}, onClick: handleClose, onMouseEnter: () => setIsCloseHovered(true), onMouseLeave: () => setIsCloseHovered(false), "aria-label": "Close", children: "\u00D7" })] }), _jsx("div", { style: aiStyles.modalBody, children: !showPromptLibrary ? (_jsxs(_Fragment, { children: [sourceText && (_jsxs("div", { style: {
|
|
83
|
+
...aiStyles.modalInputGroup,
|
|
84
|
+
marginBottom: "16px",
|
|
85
|
+
}, children: [_jsx("label", { style: aiStyles.modalLabel, children: "Source Text" }), _jsx("div", { style: {
|
|
86
|
+
padding: "12px",
|
|
87
|
+
background: aiStyles.textarea.background,
|
|
88
|
+
border: `1px solid ${aiStyles.input.border}`,
|
|
89
|
+
borderRadius: "8px",
|
|
90
|
+
fontSize: "13px",
|
|
91
|
+
color: aiStyles.textarea.color,
|
|
92
|
+
maxHeight: "120px",
|
|
93
|
+
overflow: "auto",
|
|
94
|
+
whiteSpace: "pre-wrap",
|
|
95
|
+
wordBreak: "break-word",
|
|
96
|
+
}, children: sourceText })] })), _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: {
|
|
97
|
+
...aiStyles.select,
|
|
98
|
+
...(modelFocused && aiStyles.selectFocus),
|
|
99
|
+
}, children: [models.length === 0 && (_jsx("option", { value: "", children: "Loading models..." })), models.map((model) => (_jsx("option", { value: model.id, children: model.name }, model.id)))] })] }), _jsxs("div", { style: aiStyles.modalInputGroup, children: [_jsxs("div", { style: {
|
|
100
|
+
display: "flex",
|
|
101
|
+
justifyContent: "space-between",
|
|
102
|
+
alignItems: "center",
|
|
103
|
+
marginBottom: "8px",
|
|
104
|
+
}, children: [_jsxs("label", { htmlFor: "prompt-input", style: aiStyles.modalLabel, children: ["Prompt", _jsx("span", { style: {
|
|
105
|
+
color: "#6b7280",
|
|
106
|
+
marginLeft: "4px",
|
|
107
|
+
fontSize: "12px",
|
|
108
|
+
fontWeight: 400,
|
|
109
|
+
}, children: "(Cmd/Ctrl + Enter to submit)" })] }), filteredPrompts.length > 0 && (_jsxs("button", { onClick: () => setShowPromptLibrary(true), style: {
|
|
110
|
+
padding: "4px 12px",
|
|
111
|
+
fontSize: "12px",
|
|
112
|
+
color: "#ffffff",
|
|
113
|
+
background: "#8b5cf620",
|
|
114
|
+
border: "none",
|
|
115
|
+
borderRadius: "6px",
|
|
116
|
+
cursor: "pointer",
|
|
117
|
+
transition: "all 0.2s",
|
|
118
|
+
}, onMouseEnter: (e) => {
|
|
119
|
+
e.currentTarget.style.background = "#8b5cf630";
|
|
120
|
+
}, onMouseLeave: (e) => {
|
|
121
|
+
e.currentTarget.style.background = "#8b5cf620";
|
|
122
|
+
}, children: ["\uD83D\uDCDA Browse Prompts (", filteredPrompts.length, ")"] }))] }), _jsx("textarea", { id: "prompt-input", value: prompt, onChange: (e) => setPrompt(e.target.value), onFocus: () => setPromptFocused(true), onBlur: () => setPromptFocused(false), placeholder: sourceText
|
|
123
|
+
? "Enter your AI prompt... e.g., 'Correct spelling and grammar', 'Make it more professional', 'Translate to English'"
|
|
124
|
+
: "Enter your AI prompt... e.g., 'Write a blog post about AI', 'Generate product description'", rows: 6, style: {
|
|
125
|
+
...aiStyles.textarea,
|
|
126
|
+
padding: "12px 16px",
|
|
127
|
+
...(promptFocused && aiStyles.textareaFocus),
|
|
128
|
+
} })] })] })) : (_jsxs("div", { children: [_jsx("button", { onClick: () => setShowPromptLibrary(false), style: {
|
|
129
|
+
padding: "8px 0",
|
|
130
|
+
fontSize: "14px",
|
|
131
|
+
color: "#8b5cf6",
|
|
132
|
+
background: "transparent",
|
|
133
|
+
border: "none",
|
|
134
|
+
cursor: "pointer",
|
|
135
|
+
marginBottom: "16px",
|
|
136
|
+
display: "flex",
|
|
137
|
+
alignItems: "center",
|
|
138
|
+
gap: "4px",
|
|
139
|
+
}, children: "\u2190 Back to form" }), promptsLoading ? (_jsx("div", { style: { textAlign: "center", padding: "40px 0" }, children: "Loading prompts..." })) : filteredPrompts.length === 0 ? (_jsx("div", { style: { textAlign: "center", padding: "40px 0", color: "#6b7280" }, children: "No prompts available for this model type" })) : (_jsx("div", { style: {
|
|
140
|
+
display: "flex",
|
|
141
|
+
flexDirection: "column",
|
|
142
|
+
gap: "12px",
|
|
143
|
+
maxHeight: "400px",
|
|
144
|
+
overflow: "auto",
|
|
145
|
+
}, children: filteredPrompts.map((promptData) => (_jsxs("div", { onClick: () => handleSelectPrompt(promptData), style: {
|
|
146
|
+
padding: "16px",
|
|
147
|
+
border: `1px solid #e5e7eb`,
|
|
148
|
+
borderRadius: "8px",
|
|
149
|
+
cursor: "pointer",
|
|
150
|
+
transition: "all 0.2s",
|
|
151
|
+
}, onMouseEnter: (e) => {
|
|
152
|
+
e.currentTarget.style.background = "#8b5cf610";
|
|
153
|
+
e.currentTarget.style.borderColor = "#8b5cf6";
|
|
154
|
+
}, onMouseLeave: (e) => {
|
|
155
|
+
e.currentTarget.style.background = "transparent";
|
|
156
|
+
e.currentTarget.style.borderColor = "#e5e7eb";
|
|
157
|
+
}, children: [_jsx("div", { style: {
|
|
158
|
+
fontWeight: 600,
|
|
159
|
+
marginBottom: "4px",
|
|
160
|
+
color: "#111827",
|
|
161
|
+
}, children: promptData.title }), _jsx("div", { style: {
|
|
162
|
+
fontSize: "13px",
|
|
163
|
+
color: "#6b7280",
|
|
164
|
+
overflow: "hidden",
|
|
165
|
+
textOverflow: "ellipsis",
|
|
166
|
+
display: "-webkit-box",
|
|
167
|
+
WebkitLineClamp: 2,
|
|
168
|
+
WebkitBoxOrient: "vertical",
|
|
169
|
+
}, children: promptData.content }), ("category" in promptData && promptData.category) ? (_jsx("div", { style: {
|
|
170
|
+
marginTop: "8px",
|
|
171
|
+
fontSize: "11px",
|
|
172
|
+
color: "#8b5cf6",
|
|
173
|
+
}, children: String(promptData.category) })) : null] }, promptData.id))) }))] })) }), _jsxs("div", { style: aiStyles.modalFooter, children: [_jsx("button", { onClick: handleClose, onMouseEnter: () => setIsCancelHovered(true), onMouseLeave: () => setIsCancelHovered(false), style: {
|
|
174
|
+
...aiStyles.button,
|
|
175
|
+
...aiStyles.buttonSecondary,
|
|
176
|
+
...(isCancelHovered && aiStyles.buttonSecondaryHover),
|
|
177
|
+
}, children: "Cancel" }), _jsx("button", { onClick: handleSubmit, disabled: !selectedModel || !prompt.trim(), onMouseEnter: () => setIsSubmitHovered(true), onMouseLeave: () => setIsSubmitHovered(false), style: {
|
|
178
|
+
...aiStyles.button,
|
|
179
|
+
...(isSubmitHovered && !(!selectedModel || !prompt.trim()) && aiStyles.buttonHover),
|
|
180
|
+
...(!selectedModel || !prompt.trim() ? aiStyles.buttonDisabled : {}),
|
|
181
|
+
}, children: sourceText ? "Transform with AI" : "Generate with AI" })] })] })] }));
|
|
30
182
|
}
|
|
@@ -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;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,
|
|
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,42 +1,52 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { useState } from "react";
|
|
4
|
-
import { aiStyles } from "../styles/inline";
|
|
3
|
+
import { useState, useRef, useEffect } from "react";
|
|
4
|
+
import { aiStyles, calculateTooltipPosition } from "../styles/inline";
|
|
5
5
|
export function AiStatusButton({ status, loading = false, className = "", }) {
|
|
6
6
|
const [showTooltip, setShowTooltip] = useState(false);
|
|
7
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
|
+
};
|
|
8
32
|
if (loading) {
|
|
9
|
-
return (_jsx("button", { style: {
|
|
33
|
+
return (_jsx("button", { ref: buttonRef, style: {
|
|
10
34
|
...aiStyles.statusButton,
|
|
11
35
|
...aiStyles.statusButtonDisabled,
|
|
12
|
-
}, className: className, disabled: true, children: _jsx("svg", { style: {
|
|
13
|
-
animation: "ai-spin 1s linear infinite",
|
|
14
|
-
}, 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" }) }) }));
|
|
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" }) }) }));
|
|
15
37
|
}
|
|
16
38
|
if (!status) {
|
|
17
|
-
return (_jsxs("div", { style: { position: "relative", display: "inline-block" }, children: [_jsx("button", { style: {
|
|
39
|
+
return (_jsxs("div", { style: { position: "relative", display: "inline-block" }, children: [_jsx("button", { ref: buttonRef, style: {
|
|
18
40
|
...aiStyles.statusButton,
|
|
19
41
|
color: "#ef4444",
|
|
20
42
|
...(isHovered && aiStyles.statusButtonHover),
|
|
21
|
-
}, className: className, onMouseEnter: () =>
|
|
22
|
-
setShowTooltip(true);
|
|
23
|
-
setIsHovered(true);
|
|
24
|
-
}, onMouseLeave: () => {
|
|
25
|
-
setShowTooltip(false);
|
|
26
|
-
setIsHovered(false);
|
|
27
|
-
}, 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", { style: aiStyles.tooltip, children: "No status available" })] }));
|
|
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" }))] }));
|
|
28
44
|
}
|
|
29
|
-
return (_jsxs("div", { style: { position: "relative", display: "inline-block" }, children: [_jsx("button", { style: {
|
|
45
|
+
return (_jsxs("div", { style: { position: "relative", display: "inline-block" }, children: [_jsx("button", { ref: buttonRef, style: {
|
|
30
46
|
...aiStyles.statusButton,
|
|
31
47
|
color: "#10b981",
|
|
32
48
|
...(isHovered && aiStyles.statusButtonHover),
|
|
33
|
-
}, className: className, onMouseEnter: () => {
|
|
34
|
-
setShowTooltip(true);
|
|
35
|
-
setIsHovered(true);
|
|
36
|
-
}, onMouseLeave: () => {
|
|
37
|
-
setShowTooltip(false);
|
|
38
|
-
setIsHovered(false);
|
|
39
|
-
}, 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", { style: aiStyles.tooltip, children: [_jsx("div", { style: aiStyles.tooltipHeader, children: "API Status" }), _jsxs("div", { style: {
|
|
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: {
|
|
40
50
|
...aiStyles.tooltipSection,
|
|
41
51
|
...aiStyles.tooltipSectionFirst,
|
|
42
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,23 +63,17 @@ export function AiStatusButton({ status, loading = false, className = "", }) {
|
|
|
53
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: {
|
|
54
64
|
...aiStyles.tooltipValue,
|
|
55
65
|
...aiStyles.tooltipValueBold,
|
|
56
|
-
}, children: [(status.storage.db_mb + status.storage.files_mb).toFixed(2), " MB"] })] })] }), _jsxs("div", { style: aiStyles.tooltipActions, children: [_jsx("a", { href: "https://
|
|
57
|
-
e.currentTarget.style.
|
|
58
|
-
e.currentTarget.style.borderColor = "#3b82f6";
|
|
66
|
+
}, children: [(status.storage.db_mb + status.storage.files_mb).toFixed(2), " MB"] })] })] }), _jsxs("div", { style: aiStyles.tooltipActions, children: [_jsx("a", { href: "https://prompt.lastbrain.io/fr/auth/dashboard", target: "_blank", rel: "noopener noreferrer", style: aiStyles.tooltipLink, onMouseEnter: (e) => {
|
|
67
|
+
Object.assign(e.currentTarget.style, aiStyles.tooltipLinkHover);
|
|
59
68
|
}, onMouseLeave: (e) => {
|
|
60
|
-
e.currentTarget.style.
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
e.currentTarget.style.background = "#dbeafe";
|
|
64
|
-
e.currentTarget.style.borderColor = "#3b82f6";
|
|
69
|
+
Object.assign(e.currentTarget.style, aiStyles.tooltipLink);
|
|
70
|
+
}, children: "Dashboard" }), _jsx("a", { href: "https://prompt.lastbrain.io/fr/auth/billing", target: "_blank", rel: "noopener noreferrer", style: aiStyles.tooltipLink, onMouseEnter: (e) => {
|
|
71
|
+
Object.assign(e.currentTarget.style, aiStyles.tooltipLinkHover);
|
|
65
72
|
}, onMouseLeave: (e) => {
|
|
66
|
-
e.currentTarget.style.
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
e.currentTarget.style.background = "#dbeafe";
|
|
70
|
-
e.currentTarget.style.borderColor = "#3b82f6";
|
|
73
|
+
Object.assign(e.currentTarget.style, aiStyles.tooltipLink);
|
|
74
|
+
}, children: "History" }), _jsx("a", { href: "https://prompt.lastbrain.io/fr/auth/billing", target: "_blank", rel: "noopener noreferrer", style: aiStyles.tooltipLink, onMouseEnter: (e) => {
|
|
75
|
+
Object.assign(e.currentTarget.style, aiStyles.tooltipLinkHover);
|
|
71
76
|
}, onMouseLeave: (e) => {
|
|
72
|
-
e.currentTarget.style.
|
|
73
|
-
e.currentTarget.style.borderColor = "#dbeafe";
|
|
77
|
+
Object.assign(e.currentTarget.style, aiStyles.tooltipLink);
|
|
74
78
|
}, children: "Settings" })] })] }))] }));
|
|
75
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,2CAqKjB"}
|