camox 0.67.0 → 0.68.0
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/dist/core/editing/createEditableBlock.js +2 -1
- package/dist/features/preview/components/PreviewToolbar.js +77 -68
- package/dist/features/preview/repeatableItemTargets.js +13 -7
- package/dist/features/runtime/RuntimeChrome.js +47 -61
- package/dist/features/studio/components/ChatWidget.js +3 -4
- package/dist/features/studio/components/ConnectAgent.js +33 -59
- package/dist/features/studio/components/DraftBar.js +139 -0
- package/dist/features/studio/components/DraftsControl.js +13 -57
- package/dist/features/studio/components/Navbar.js +3 -2
- package/dist/features/studio/components/UserButton.js +7 -11
- package/dist/features/studio/studioStore.js +0 -13
- package/dist/package.js +1 -1
- package/dist/studio.css +1 -1
- package/package.json +4 -4
- package/dist/features/studio/components/UnnamedDraftBar.js +0 -349
|
@@ -714,7 +714,8 @@ function createEditableBlock(options) {
|
|
|
714
714
|
$[5] = t2;
|
|
715
715
|
} else t2 = $[5];
|
|
716
716
|
const isHoveredFromSidebar = useOverlayMessage(iframeWindow, isContentEditable, "CAMOX_HOVER_FIELD", "CAMOX_HOVER_FIELD_END", t2);
|
|
717
|
-
const
|
|
717
|
+
const isFocused = useFieldSelection(blockId, fieldName, "Artifact", itemId);
|
|
718
|
+
const overlayState = useOverlayState(isHovered || isHoveredFromSidebar, isFocused);
|
|
718
719
|
let t3;
|
|
719
720
|
if ($[6] !== blockId || $[7] !== fieldName || $[8] !== itemId || $[9] !== selectTarget) {
|
|
720
721
|
t3 = () => {
|
|
@@ -3,6 +3,7 @@ import { formatShortcut } from "../../../lib/shortcuts.js";
|
|
|
3
3
|
import { TOGGLE_CANVAS_SHORTCUT } from "../previewConstants.js";
|
|
4
4
|
import { prefetchCanvas } from "./CanvasPreview.js";
|
|
5
5
|
import { DeviceSelector } from "../../../components/DeviceSelector.js";
|
|
6
|
+
import { DraftBar } from "../../studio/components/DraftBar.js";
|
|
6
7
|
import { c } from "react/compiler-runtime";
|
|
7
8
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
8
9
|
import { useSelector } from "@xstate/store-react";
|
|
@@ -15,55 +16,60 @@ import { FloatingToolbar } from "@camox/ui/floating-toolbar";
|
|
|
15
16
|
|
|
16
17
|
//#region src/features/preview/components/PreviewToolbar.tsx
|
|
17
18
|
const PreviewToolbar = () => {
|
|
18
|
-
const $ = c(
|
|
19
|
+
const $ = c(22);
|
|
19
20
|
const isCanvasShown = useSelector(previewStore, selectIsCanvasShown);
|
|
20
21
|
const isToolbarHidden = useSelector(previewStore, _temp);
|
|
21
22
|
const viewportMode = useSelector(previewStore, _temp2);
|
|
22
23
|
if (isToolbarHidden) return null;
|
|
23
24
|
let t0;
|
|
24
|
-
if ($[0]
|
|
25
|
-
t0 = /* @__PURE__ */ jsx(
|
|
25
|
+
if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
|
|
26
|
+
t0 = /* @__PURE__ */ jsx(DraftBar, { stacked: true });
|
|
27
|
+
$[0] = t0;
|
|
28
|
+
} else t0 = $[0];
|
|
29
|
+
let t1;
|
|
30
|
+
if ($[1] !== isCanvasShown) {
|
|
31
|
+
t1 = /* @__PURE__ */ jsx(Switch, {
|
|
26
32
|
id: "show-canvas",
|
|
27
33
|
checked: isCanvasShown,
|
|
28
34
|
onCheckedChange: _temp3
|
|
29
35
|
});
|
|
30
|
-
$[
|
|
31
|
-
$[
|
|
32
|
-
} else
|
|
33
|
-
let
|
|
34
|
-
if ($[
|
|
35
|
-
|
|
36
|
+
$[1] = isCanvasShown;
|
|
37
|
+
$[2] = t1;
|
|
38
|
+
} else t1 = $[2];
|
|
39
|
+
let t2;
|
|
40
|
+
if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
|
|
41
|
+
t2 = /* @__PURE__ */ jsxs(Label, {
|
|
36
42
|
htmlFor: "show-canvas",
|
|
37
43
|
className: "flex items-center gap-2",
|
|
38
44
|
children: ["Show canvas ", formatShortcut(TOGGLE_CANVAS_SHORTCUT)]
|
|
39
45
|
});
|
|
40
|
-
$[
|
|
41
|
-
} else
|
|
42
|
-
let
|
|
43
|
-
if ($[
|
|
44
|
-
|
|
46
|
+
$[3] = t2;
|
|
47
|
+
} else t2 = $[3];
|
|
48
|
+
let t3;
|
|
49
|
+
if ($[4] !== t1) {
|
|
50
|
+
t3 = /* @__PURE__ */ jsxs("div", {
|
|
45
51
|
className: "flex shrink-0 items-center gap-2 px-2",
|
|
46
52
|
onPointerEnter: prefetchCanvas,
|
|
47
53
|
onFocus: prefetchCanvas,
|
|
48
|
-
children: [
|
|
54
|
+
children: [t1, t2]
|
|
49
55
|
});
|
|
50
|
-
$[
|
|
51
|
-
$[
|
|
52
|
-
} else
|
|
53
|
-
const
|
|
54
|
-
let
|
|
55
|
-
if ($[
|
|
56
|
-
|
|
57
|
-
value:
|
|
56
|
+
$[4] = t1;
|
|
57
|
+
$[5] = t3;
|
|
58
|
+
} else t3 = $[5];
|
|
59
|
+
const t4 = viewportMode === "full" ? "desktop" : viewportMode;
|
|
60
|
+
let t5;
|
|
61
|
+
if ($[6] !== t4) {
|
|
62
|
+
t5 = /* @__PURE__ */ jsx(DeviceSelector, {
|
|
63
|
+
value: t4,
|
|
58
64
|
desktopLabel: "Full view",
|
|
59
65
|
onValueChange: _temp4
|
|
60
66
|
});
|
|
61
|
-
$[5] = t3;
|
|
62
67
|
$[6] = t4;
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
68
|
+
$[7] = t5;
|
|
69
|
+
} else t5 = $[7];
|
|
70
|
+
let t6;
|
|
71
|
+
if ($[8] !== isCanvasShown) {
|
|
72
|
+
t6 = /* @__PURE__ */ jsx(Button, {
|
|
67
73
|
type: "button",
|
|
68
74
|
variant: "ghost",
|
|
69
75
|
size: "icon",
|
|
@@ -72,58 +78,61 @@ const PreviewToolbar = () => {
|
|
|
72
78
|
"aria-label": "Hide toolbar",
|
|
73
79
|
className: "text-muted-foreground"
|
|
74
80
|
});
|
|
75
|
-
$[
|
|
76
|
-
$[8] = t5;
|
|
77
|
-
} else t5 = $[8];
|
|
78
|
-
let t6;
|
|
79
|
-
if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
|
|
80
|
-
t6 = /* @__PURE__ */ jsx(X, {});
|
|
81
|
+
$[8] = isCanvasShown;
|
|
81
82
|
$[9] = t6;
|
|
82
83
|
} else t6 = $[9];
|
|
83
84
|
let t7;
|
|
84
|
-
if ($[10]
|
|
85
|
-
t7 = /* @__PURE__ */ jsx(
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
});
|
|
89
|
-
$[10] = t5;
|
|
90
|
-
$[11] = t7;
|
|
91
|
-
} else t7 = $[11];
|
|
85
|
+
if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
|
|
86
|
+
t7 = /* @__PURE__ */ jsx(X, {});
|
|
87
|
+
$[10] = t7;
|
|
88
|
+
} else t7 = $[10];
|
|
92
89
|
let t8;
|
|
93
|
-
if ($[
|
|
94
|
-
t8 = /* @__PURE__ */ jsx(Tooltip$1.
|
|
90
|
+
if ($[11] !== t6) {
|
|
91
|
+
t8 = /* @__PURE__ */ jsx(Tooltip$1.TooltipTrigger, {
|
|
92
|
+
render: t6,
|
|
93
|
+
children: t7
|
|
94
|
+
});
|
|
95
|
+
$[11] = t6;
|
|
95
96
|
$[12] = t8;
|
|
96
97
|
} else t8 = $[12];
|
|
97
98
|
let t9;
|
|
98
|
-
if ($[13]
|
|
99
|
-
t9 = /* @__PURE__ */ jsx("
|
|
99
|
+
if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
|
|
100
|
+
t9 = /* @__PURE__ */ jsx(Tooltip$1.TooltipContent, { children: "Hide toolbar" });
|
|
101
|
+
$[13] = t9;
|
|
102
|
+
} else t9 = $[13];
|
|
103
|
+
let t10;
|
|
104
|
+
if ($[14] !== t8) {
|
|
105
|
+
t10 = /* @__PURE__ */ jsx("div", {
|
|
100
106
|
className: "-ml-2 flex items-center gap-2",
|
|
101
|
-
children: /* @__PURE__ */ jsxs(Tooltip$1.Tooltip, { children: [
|
|
107
|
+
children: /* @__PURE__ */ jsxs(Tooltip$1.Tooltip, { children: [t8, t9] })
|
|
102
108
|
});
|
|
103
|
-
$[
|
|
104
|
-
$[
|
|
105
|
-
} else
|
|
106
|
-
let
|
|
107
|
-
if ($[
|
|
108
|
-
|
|
109
|
+
$[14] = t8;
|
|
110
|
+
$[15] = t10;
|
|
111
|
+
} else t10 = $[15];
|
|
112
|
+
let t11;
|
|
113
|
+
if ($[16] !== t10 || $[17] !== t5) {
|
|
114
|
+
t11 = /* @__PURE__ */ jsxs("div", {
|
|
109
115
|
className: "flex shrink-0 items-center gap-6 self-stretch",
|
|
110
|
-
children: [
|
|
116
|
+
children: [t5, t10]
|
|
111
117
|
});
|
|
112
|
-
$[
|
|
113
|
-
$[
|
|
114
|
-
$[
|
|
115
|
-
} else
|
|
116
|
-
let
|
|
117
|
-
if ($[
|
|
118
|
-
|
|
119
|
-
className: "fixed bottom-2
|
|
120
|
-
children: [
|
|
118
|
+
$[16] = t10;
|
|
119
|
+
$[17] = t5;
|
|
120
|
+
$[18] = t11;
|
|
121
|
+
} else t11 = $[18];
|
|
122
|
+
let t12;
|
|
123
|
+
if ($[19] !== t11 || $[20] !== t3) {
|
|
124
|
+
t12 = /* @__PURE__ */ jsxs("div", {
|
|
125
|
+
className: "pointer-events-none fixed bottom-2 left-1/2 z-30 flex -translate-x-1/2 flex-col items-center gap-2",
|
|
126
|
+
children: [t0, /* @__PURE__ */ jsxs(FloatingToolbar, {
|
|
127
|
+
className: "pointer-events-auto relative left-auto w-max translate-x-0 justify-between gap-6 transition-none",
|
|
128
|
+
children: [t3, t11]
|
|
129
|
+
})]
|
|
121
130
|
});
|
|
122
|
-
$[
|
|
123
|
-
$[
|
|
124
|
-
$[
|
|
125
|
-
} else
|
|
126
|
-
return
|
|
131
|
+
$[19] = t11;
|
|
132
|
+
$[20] = t3;
|
|
133
|
+
$[21] = t12;
|
|
134
|
+
} else t12 = $[21];
|
|
135
|
+
return t12;
|
|
127
136
|
};
|
|
128
137
|
function _temp(state) {
|
|
129
138
|
return state.context.isToolbarHidden;
|
|
@@ -1,14 +1,20 @@
|
|
|
1
1
|
//#region src/features/preview/repeatableItemTargets.ts
|
|
2
|
-
|
|
2
|
+
/**
|
|
3
|
+
* The registry lives on the document, not in this module: the renderer document
|
|
4
|
+
* registers items with its own copy of the SDK, and the studio's copy observes them.
|
|
5
|
+
* `Symbol.for` resolves to the same symbol in every realm.
|
|
6
|
+
*/
|
|
7
|
+
const REGISTRY = Symbol.for("camox.repeatableItems");
|
|
8
|
+
function existingRegistry(document) {
|
|
9
|
+
return document[REGISTRY];
|
|
10
|
+
}
|
|
3
11
|
function registryOf(document) {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
registry = {
|
|
12
|
+
const owner = document;
|
|
13
|
+
owner[REGISTRY] ??= {
|
|
7
14
|
items: /* @__PURE__ */ new Set(),
|
|
8
15
|
listeners: /* @__PURE__ */ new Set()
|
|
9
16
|
};
|
|
10
|
-
|
|
11
|
-
return registry;
|
|
17
|
+
return owner[REGISTRY];
|
|
12
18
|
}
|
|
13
19
|
function notify(registry, kind) {
|
|
14
20
|
for (const listener of registry.listeners) listener(kind);
|
|
@@ -41,7 +47,7 @@ function fragmentsOf(element) {
|
|
|
41
47
|
/** Each registered item with its first-level elements, in document order. */
|
|
42
48
|
function repeatableItemElements(document) {
|
|
43
49
|
const result = /* @__PURE__ */ new Map();
|
|
44
|
-
const items =
|
|
50
|
+
const items = existingRegistry(document)?.items;
|
|
45
51
|
if (!items?.size) return result;
|
|
46
52
|
for (const item of items) result.set(item, []);
|
|
47
53
|
for (const element of document.querySelectorAll("*")) {
|
|
@@ -3,9 +3,9 @@ import { shownRecordPage } from "../preview/pageRecord.js";
|
|
|
3
3
|
import { StudioEditingFallback } from "../preview/components/StudioEditingFallback.js";
|
|
4
4
|
import { Navbar } from "../studio/components/Navbar.js";
|
|
5
5
|
import { EditingFallbackContext } from "./editingFallback.js";
|
|
6
|
+
import { DraftBar } from "../studio/components/DraftBar.js";
|
|
6
7
|
import { PreviewToolbar } from "../preview/components/PreviewToolbar.js";
|
|
7
8
|
import { AgentSidebar } from "../studio/components/AgentSidebar.js";
|
|
8
|
-
import { UnnamedDraftBar } from "../studio/components/UnnamedDraftBar.js";
|
|
9
9
|
import { FollowAgentProvider } from "../studio/FollowAgentProvider.js";
|
|
10
10
|
import { c } from "react/compiler-runtime";
|
|
11
11
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
@@ -15,7 +15,7 @@ import studioCssUrl from "virtual:camox-studio-css";
|
|
|
15
15
|
//#region src/features/runtime/RuntimeChrome.tsx
|
|
16
16
|
const renderEditingFallback = ({ layoutPage }) => /* @__PURE__ */ jsx(StudioEditingFallback, { layoutPage });
|
|
17
17
|
function RuntimeChrome(t0) {
|
|
18
|
-
const $ = c(
|
|
18
|
+
const $ = c(35);
|
|
19
19
|
const { input, children } = t0;
|
|
20
20
|
const website = !input.routeKind;
|
|
21
21
|
const hidden = useSelector(previewStore, _temp);
|
|
@@ -93,81 +93,67 @@ function RuntimeChrome(t0) {
|
|
|
93
93
|
$[15] = t11;
|
|
94
94
|
$[16] = t13;
|
|
95
95
|
} else t13 = $[16];
|
|
96
|
-
|
|
97
|
-
const t15 = website ? "max-md:hidden" : void 0;
|
|
98
|
-
let t16;
|
|
96
|
+
let t14;
|
|
99
97
|
if ($[17] !== website) {
|
|
100
|
-
|
|
98
|
+
t14 = !website && /* @__PURE__ */ jsx(DraftBar, {});
|
|
101
99
|
$[17] = website;
|
|
102
|
-
$[18] =
|
|
103
|
-
} else
|
|
104
|
-
let
|
|
105
|
-
if ($[19] !==
|
|
106
|
-
|
|
107
|
-
hidden: t14,
|
|
108
|
-
className: t15,
|
|
109
|
-
children: t16
|
|
110
|
-
});
|
|
111
|
-
$[19] = t14;
|
|
112
|
-
$[20] = t15;
|
|
113
|
-
$[21] = t16;
|
|
114
|
-
$[22] = t17;
|
|
115
|
-
} else t17 = $[22];
|
|
116
|
-
let t18;
|
|
117
|
-
if ($[23] !== t13 || $[24] !== t17 || $[25] !== t9) {
|
|
118
|
-
t18 = /* @__PURE__ */ jsxs("div", {
|
|
100
|
+
$[18] = t14;
|
|
101
|
+
} else t14 = $[18];
|
|
102
|
+
let t15;
|
|
103
|
+
if ($[19] !== t13 || $[20] !== t14 || $[21] !== t9) {
|
|
104
|
+
t15 = /* @__PURE__ */ jsxs("div", {
|
|
119
105
|
className: "relative flex min-h-0 min-w-0 flex-1 flex-col",
|
|
120
106
|
children: [
|
|
121
107
|
t9,
|
|
122
108
|
t13,
|
|
123
|
-
|
|
109
|
+
t14
|
|
124
110
|
]
|
|
125
111
|
});
|
|
126
|
-
$[
|
|
112
|
+
$[19] = t13;
|
|
113
|
+
$[20] = t14;
|
|
114
|
+
$[21] = t9;
|
|
115
|
+
$[22] = t15;
|
|
116
|
+
} else t15 = $[22];
|
|
117
|
+
const t16 = !showAgentSidebar;
|
|
118
|
+
let t17;
|
|
119
|
+
if ($[23] !== t16) {
|
|
120
|
+
t17 = /* @__PURE__ */ jsx(AgentSidebar, { hidden: t16 });
|
|
121
|
+
$[23] = t16;
|
|
127
122
|
$[24] = t17;
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
let t20;
|
|
133
|
-
if ($[27] !== t19) {
|
|
134
|
-
t20 = /* @__PURE__ */ jsx(AgentSidebar, { hidden: t19 });
|
|
135
|
-
$[27] = t19;
|
|
136
|
-
$[28] = t20;
|
|
137
|
-
} else t20 = $[28];
|
|
138
|
-
let t21;
|
|
139
|
-
if ($[29] !== t18 || $[30] !== t20) {
|
|
140
|
-
t21 = /* @__PURE__ */ jsxs("div", {
|
|
123
|
+
} else t17 = $[24];
|
|
124
|
+
let t18;
|
|
125
|
+
if ($[25] !== t15 || $[26] !== t17) {
|
|
126
|
+
t18 = /* @__PURE__ */ jsxs("div", {
|
|
141
127
|
className: "relative flex min-h-0 flex-1",
|
|
142
|
-
children: [
|
|
128
|
+
children: [t15, t17]
|
|
143
129
|
});
|
|
144
|
-
$[
|
|
145
|
-
$[
|
|
146
|
-
$[
|
|
147
|
-
} else
|
|
148
|
-
let
|
|
149
|
-
if ($[
|
|
150
|
-
|
|
130
|
+
$[25] = t15;
|
|
131
|
+
$[26] = t17;
|
|
132
|
+
$[27] = t18;
|
|
133
|
+
} else t18 = $[27];
|
|
134
|
+
let t19;
|
|
135
|
+
if ($[28] !== t18 || $[29] !== t7) {
|
|
136
|
+
t19 = /* @__PURE__ */ jsxs("div", {
|
|
151
137
|
className: "bg-background flex h-screen flex-col overflow-hidden",
|
|
152
|
-
children: [t7,
|
|
138
|
+
children: [t7, t18]
|
|
153
139
|
});
|
|
154
|
-
$[
|
|
155
|
-
$[
|
|
156
|
-
$[
|
|
157
|
-
} else
|
|
158
|
-
let
|
|
159
|
-
if ($[
|
|
160
|
-
|
|
140
|
+
$[28] = t18;
|
|
141
|
+
$[29] = t7;
|
|
142
|
+
$[30] = t19;
|
|
143
|
+
} else t19 = $[30];
|
|
144
|
+
let t20;
|
|
145
|
+
if ($[31] !== input.runtimeBasePath || $[32] !== t19 || $[33] !== website) {
|
|
146
|
+
t20 = /* @__PURE__ */ jsxs(FollowAgentProvider, {
|
|
161
147
|
runtimeBasePath: t1,
|
|
162
148
|
website,
|
|
163
|
-
children: [t2,
|
|
149
|
+
children: [t2, t19]
|
|
164
150
|
});
|
|
165
|
-
$[
|
|
166
|
-
$[
|
|
167
|
-
$[
|
|
168
|
-
$[
|
|
169
|
-
} else
|
|
170
|
-
return
|
|
151
|
+
$[31] = input.runtimeBasePath;
|
|
152
|
+
$[32] = t19;
|
|
153
|
+
$[33] = website;
|
|
154
|
+
$[34] = t20;
|
|
155
|
+
} else t20 = $[34];
|
|
156
|
+
return t20;
|
|
171
157
|
}
|
|
172
158
|
function _temp(state) {
|
|
173
159
|
return state.context.isToolbarHidden;
|
|
@@ -9,7 +9,6 @@ import { FollowAgentContext } from "../followAgentContext.js";
|
|
|
9
9
|
import { useThread } from "../../../lib/use-thread.js";
|
|
10
10
|
import { EditorWhereContext } from "../editorWhereContext.js";
|
|
11
11
|
import { useEditorSelection } from "../useEditorSelection.js";
|
|
12
|
-
import { ConnectAgent } from "./ConnectAgent.js";
|
|
13
12
|
import { ThreadComposer, useComposerCarrier } from "./ThreadComposer.js";
|
|
14
13
|
import { ThreadMessages } from "./ThreadMessages.js";
|
|
15
14
|
import { c } from "react/compiler-runtime";
|
|
@@ -27,7 +26,7 @@ import { EMPTY_THREAD_VIEW } from "@camox/api-contract/threads";
|
|
|
27
26
|
* it, if it still shows Live; the card the Live turn ends on opens it too. Each message tells the
|
|
28
27
|
* agent where the editor is: the page they look at, with what they selected on it unless they
|
|
29
28
|
* cleared it from the composer, or the Canvas with no page selected. "Ask the agent" elsewhere in
|
|
30
|
-
* the studio fills its composer.
|
|
29
|
+
* the studio fills its composer.
|
|
31
30
|
*/
|
|
32
31
|
function ChatWidget(t0) {
|
|
33
32
|
const $ = c(6);
|
|
@@ -48,9 +47,9 @@ function ChatWidget(t0) {
|
|
|
48
47
|
children: "Agent"
|
|
49
48
|
})
|
|
50
49
|
});
|
|
51
|
-
t3 = /* @__PURE__ */
|
|
50
|
+
t3 = /* @__PURE__ */ jsx("div", {
|
|
52
51
|
className: cn("bg-background flex min-h-0 flex-1 flex-col", CARD_BODY_EDGES),
|
|
53
|
-
children:
|
|
52
|
+
children: /* @__PURE__ */ jsx(CurrentThread, {})
|
|
54
53
|
});
|
|
55
54
|
$[2] = t2;
|
|
56
55
|
$[3] = t3;
|
|
@@ -6,12 +6,10 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
|
6
6
|
import { Button } from "@camox/ui/button";
|
|
7
7
|
import { Check, Copy, ExternalLink } from "lucide-react";
|
|
8
8
|
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@camox/ui/dialog";
|
|
9
|
-
import { Avatar, AvatarFallback, AvatarGroup } from "@camox/ui/avatar";
|
|
10
9
|
|
|
11
10
|
//#region src/features/studio/components/ConnectAgent.tsx
|
|
12
11
|
/**
|
|
13
|
-
* Common AI apps that take a remote MCP server, with their guide to adding one.
|
|
14
|
-
* each one overlaps the one before it, so the last is on top.
|
|
12
|
+
* Common AI apps that take a remote MCP server, with their guide to adding one.
|
|
15
13
|
*/
|
|
16
14
|
const CLIENTS = [
|
|
17
15
|
{
|
|
@@ -125,56 +123,42 @@ function GrokBotLogo(t0) {
|
|
|
125
123
|
return t7;
|
|
126
124
|
}
|
|
127
125
|
/**
|
|
128
|
-
*
|
|
129
|
-
*
|
|
130
|
-
*
|
|
126
|
+
* In the navbar, what invites a member to connect their own agent to Camox as a Connected Agent
|
|
127
|
+
* (ADR 0030): a button opening a dialog with the link to Camox's MCP server and each common AI
|
|
128
|
+
* app's guide to adding an MCP server.
|
|
131
129
|
*/
|
|
132
130
|
function ConnectAgent() {
|
|
133
|
-
const $ = c(
|
|
131
|
+
const $ = c(4);
|
|
134
132
|
const [open, setOpen] = React.useState(false);
|
|
135
133
|
let t0;
|
|
136
134
|
if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
|
|
137
|
-
t0 =
|
|
135
|
+
t0 = /* @__PURE__ */ jsx(Button, {
|
|
136
|
+
type: "button",
|
|
137
|
+
variant: "outline",
|
|
138
|
+
onClick: () => setOpen(true),
|
|
139
|
+
children: "Connect your agent"
|
|
140
|
+
});
|
|
138
141
|
$[0] = t0;
|
|
139
142
|
} else t0 = $[0];
|
|
140
143
|
let t1;
|
|
141
144
|
if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
|
|
142
|
-
t1 = /* @__PURE__ */
|
|
143
|
-
type: "button",
|
|
144
|
-
onClick: t0,
|
|
145
|
-
className: "hover:bg-muted text-muted-foreground hover:text-foreground mx-2 mb-2 flex items-center gap-2.5 rounded-md px-2 py-1.5 text-sm transition-colors",
|
|
146
|
-
children: [/* @__PURE__ */ jsx(AvatarGroup, { children: CLIENTS.map(_temp) }), "Connect your AI"]
|
|
147
|
-
});
|
|
145
|
+
t1 = /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsx(ConnectAgentContent, {}) });
|
|
148
146
|
$[1] = t1;
|
|
149
147
|
} else t1 = $[1];
|
|
150
148
|
let t2;
|
|
151
|
-
if ($[2]
|
|
152
|
-
t2 = /* @__PURE__ */
|
|
153
|
-
$[2] = t2;
|
|
154
|
-
} else t2 = $[2];
|
|
155
|
-
let t3;
|
|
156
|
-
if ($[3] !== open) {
|
|
157
|
-
t3 = /* @__PURE__ */ jsxs(Fragment, { children: [t1, /* @__PURE__ */ jsx(Dialog, {
|
|
149
|
+
if ($[2] !== open) {
|
|
150
|
+
t2 = /* @__PURE__ */ jsxs(Fragment, { children: [t0, /* @__PURE__ */ jsx(Dialog, {
|
|
158
151
|
open,
|
|
159
152
|
onOpenChange: setOpen,
|
|
160
|
-
children:
|
|
153
|
+
children: t1
|
|
161
154
|
})] });
|
|
162
|
-
$[
|
|
163
|
-
$[
|
|
164
|
-
} else
|
|
165
|
-
return
|
|
166
|
-
}
|
|
167
|
-
function _temp(client) {
|
|
168
|
-
return /* @__PURE__ */ jsx(Avatar, {
|
|
169
|
-
size: "sm",
|
|
170
|
-
children: /* @__PURE__ */ jsx(AvatarFallback, {
|
|
171
|
-
className: "bg-background text-foreground",
|
|
172
|
-
children: /* @__PURE__ */ jsx(client.Logo, { className: "size-3.5" })
|
|
173
|
-
})
|
|
174
|
-
}, client.name);
|
|
155
|
+
$[2] = open;
|
|
156
|
+
$[3] = t2;
|
|
157
|
+
} else t2 = $[3];
|
|
158
|
+
return t2;
|
|
175
159
|
}
|
|
176
160
|
function ConnectAgentContent() {
|
|
177
|
-
const $ = c(
|
|
161
|
+
const $ = c(22);
|
|
178
162
|
const { apiUrl } = React.useContext(AuthContext);
|
|
179
163
|
const url = `${apiUrl}/mcp`;
|
|
180
164
|
const [copied, setCopied] = React.useState(false);
|
|
@@ -207,7 +191,7 @@ function ConnectAgentContent() {
|
|
|
207
191
|
const copy = t2;
|
|
208
192
|
let t3;
|
|
209
193
|
if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
|
|
210
|
-
t3 = /* @__PURE__ */ jsxs(DialogHeader, { children: [/* @__PURE__ */ jsx(DialogTitle, { children: "Connect your
|
|
194
|
+
t3 = /* @__PURE__ */ jsxs(DialogHeader, { children: [/* @__PURE__ */ jsx(DialogTitle, { children: "Connect your agent" }), /* @__PURE__ */ jsx(DialogDescription, { children: "Add this URL to your agent as an MCP server. It acts as you, but can't publish." })] });
|
|
211
195
|
$[5] = t3;
|
|
212
196
|
} else t3 = $[5];
|
|
213
197
|
let t4;
|
|
@@ -255,44 +239,34 @@ function ConnectAgentContent() {
|
|
|
255
239
|
if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
|
|
256
240
|
t9 = /* @__PURE__ */ jsx("p", {
|
|
257
241
|
className: "text-muted-foreground text-xs font-medium",
|
|
258
|
-
children: "How to add
|
|
242
|
+
children: "How to add it in"
|
|
259
243
|
});
|
|
260
244
|
$[18] = t9;
|
|
261
245
|
} else t9 = $[18];
|
|
262
246
|
let t10;
|
|
263
|
-
let t11;
|
|
264
247
|
if ($[19] === Symbol.for("react.memo_cache_sentinel")) {
|
|
265
248
|
t10 = /* @__PURE__ */ jsxs("div", {
|
|
266
249
|
className: "flex flex-col gap-2",
|
|
267
250
|
children: [t9, /* @__PURE__ */ jsx("ul", {
|
|
268
251
|
className: "grid grid-cols-2 gap-1",
|
|
269
|
-
children: CLIENTS.map(
|
|
252
|
+
children: CLIENTS.map(_temp)
|
|
270
253
|
})]
|
|
271
254
|
});
|
|
272
|
-
t11 = /* @__PURE__ */ jsx("p", {
|
|
273
|
-
className: "text-muted-foreground text-xs",
|
|
274
|
-
children: "It acts as you, with your permissions. It can't publish: you review and publish here."
|
|
275
|
-
});
|
|
276
255
|
$[19] = t10;
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
t11 =
|
|
281
|
-
}
|
|
282
|
-
let t12;
|
|
283
|
-
if ($[21] !== t8) {
|
|
284
|
-
t12 = /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
256
|
+
} else t10 = $[19];
|
|
257
|
+
let t11;
|
|
258
|
+
if ($[20] !== t8) {
|
|
259
|
+
t11 = /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
285
260
|
t3,
|
|
286
261
|
t8,
|
|
287
|
-
t10
|
|
288
|
-
t11
|
|
262
|
+
t10
|
|
289
263
|
] });
|
|
290
|
-
$[
|
|
291
|
-
$[
|
|
292
|
-
} else
|
|
293
|
-
return
|
|
264
|
+
$[20] = t8;
|
|
265
|
+
$[21] = t11;
|
|
266
|
+
} else t11 = $[21];
|
|
267
|
+
return t11;
|
|
294
268
|
}
|
|
295
|
-
function
|
|
269
|
+
function _temp(client) {
|
|
296
270
|
return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("a", {
|
|
297
271
|
href: client.docs,
|
|
298
272
|
target: "_blank",
|