@optiaxiom/proteus 0.1.23 → 0.1.25
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/esm/_virtual/_openai-shim-script.js +81 -0
- package/dist/esm/assets/src/proteus-chart/{ProteusChart.css.ts.vanilla-BCN2MOqI.css → ProteusChart.css.ts.vanilla-B-FJ2e1F.css} +2 -2
- package/dist/esm/assets/src/proteus-chart/{ProteusChartTooltipContent.css.ts.vanilla-DmqHa3bY.css → ProteusChartTooltipContent.css.ts.vanilla-B7GlVdiy.css} +2 -2
- package/dist/esm/assets/src/proteus-document/ProteusDocumentShell.css.ts.vanilla-GbLC1fdW.css +17 -0
- package/dist/esm/assets/src/proteus-image-carousel/{ProteusImageCarousel.css.ts.vanilla-Bbo2TbLv.css → ProteusImageCarousel.css.ts.vanilla-B21Y_xyv.css} +2 -2
- package/dist/esm/assets/src/proteus-question/{ProteusQuestion.css.ts.vanilla-DRvLrb5J.css → ProteusQuestion.css.ts.vanilla--FkursVc.css} +2 -2
- package/dist/esm/index.js +1 -0
- package/dist/esm/proteus-bridge/ProteusBridge.js +90 -0
- package/dist/esm/proteus-chart/ProteusChart-css.js +1 -1
- package/dist/esm/proteus-chart/ProteusChartTooltipContent-css.js +1 -1
- package/dist/esm/proteus-document/ProteusDocumentShell-css.js +7 -0
- package/dist/esm/proteus-document/ProteusDocumentShell.js +38 -3
- package/dist/esm/proteus-element/ProteusElement.js +8 -0
- package/dist/esm/proteus-image-carousel/ProteusImageCarousel-css.js +1 -1
- package/dist/esm/proteus-question/ProteusQuestion-css.js +1 -1
- package/dist/esm/proteus-question/ProteusQuestion.js +5 -5
- package/dist/esm/schema/public-schema.json.js +45 -0
- package/dist/esm/schema/runtime-schema.json.js +44 -0
- package/dist/index.d.ts +37 -3
- package/dist/spec.d.ts +2941 -2887
- package/package.json +5 -3
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
@layer optiaxiom._1fktkd1;
|
|
2
|
+
@layer optiaxiom._1fktkd1 {
|
|
3
|
+
.ProteusDocumentShell__vpuvfj1 {
|
|
4
|
+
margin: -4px;
|
|
5
|
+
}
|
|
6
|
+
.ProteusDocumentShell__vpuvfj2 {
|
|
7
|
+
align-self: center;
|
|
8
|
+
bottom: 8px;
|
|
9
|
+
margin-top: -56px;
|
|
10
|
+
opacity: 0;
|
|
11
|
+
position: sticky;
|
|
12
|
+
z-index: 10;
|
|
13
|
+
}
|
|
14
|
+
.ProteusDocumentShell__vpuvfj0[data-can-scroll] .ProteusDocumentShell__vpuvfj2 {
|
|
15
|
+
opacity: 1;
|
|
16
|
+
}
|
|
17
|
+
}
|
package/dist/esm/index.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
export { ProteusAction } from './proteus-action/ProteusAction.js';
|
|
2
|
+
export { ProteusBridge } from './proteus-bridge/ProteusBridge.js';
|
|
2
3
|
export { ProteusChart } from './proteus-chart/ProteusChart.js';
|
|
3
4
|
export { ProteusDataTable } from './proteus-data-table/ProteusDataTable.js';
|
|
4
5
|
export { ProteusDocumentRenderer } from './proteus-document/ProteusDocumentRenderer.js';
|
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx } from 'react/jsx-runtime';
|
|
3
|
+
import { AppBridge, PostMessageTransport } from '@modelcontextprotocol/ext-apps/app-bridge';
|
|
4
|
+
import { useState, useRef, useEffect } from 'react';
|
|
5
|
+
import { OPENAI_SHIM_SCRIPT } from '../_virtual/_openai-shim-script.js';
|
|
6
|
+
import { useProteusDocumentContext } from '../proteus-document/ProteusDocumentContext.js';
|
|
7
|
+
|
|
8
|
+
function ProteusBridge({ height = 400, resource }) {
|
|
9
|
+
const { data, onEvent, useResource } = useProteusDocumentContext(
|
|
10
|
+
"@optiaxiom/proteus/ProteusBridge"
|
|
11
|
+
);
|
|
12
|
+
const result = useResource?.(resource);
|
|
13
|
+
const html = result?.data?.text ?? "";
|
|
14
|
+
const mimeType = result?.data?.mimeType;
|
|
15
|
+
const [iframe, setIframe] = useState(null);
|
|
16
|
+
const dataRef = useRef(data);
|
|
17
|
+
dataRef.current = data;
|
|
18
|
+
useEffect(() => {
|
|
19
|
+
if (!iframe?.contentWindow) {
|
|
20
|
+
return;
|
|
21
|
+
}
|
|
22
|
+
const bridge = new AppBridge(
|
|
23
|
+
null,
|
|
24
|
+
{ name: "Opal", version: "1.0.0" },
|
|
25
|
+
{ logging: {}, openLinks: {}, serverTools: {} },
|
|
26
|
+
{
|
|
27
|
+
hostContext: {
|
|
28
|
+
containerDimensions: { maxHeight: iframe.clientHeight },
|
|
29
|
+
displayMode: "inline"
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
);
|
|
33
|
+
bridge.oncalltool = async (params) => {
|
|
34
|
+
const result2 = await onEvent({
|
|
35
|
+
interaction: params.name,
|
|
36
|
+
params: params.arguments ?? {}
|
|
37
|
+
});
|
|
38
|
+
return {
|
|
39
|
+
content: [
|
|
40
|
+
{ text: JSON.stringify(result2 ?? ""), type: "text" }
|
|
41
|
+
]
|
|
42
|
+
};
|
|
43
|
+
};
|
|
44
|
+
bridge.onmessage = async (params) => {
|
|
45
|
+
const message = params.content?.filter((content) => content.type === "text").map((content) => content.text).join("\n\n") ?? "";
|
|
46
|
+
await onEvent({ message });
|
|
47
|
+
return {};
|
|
48
|
+
};
|
|
49
|
+
bridge.onopenlink = async ({ url }) => {
|
|
50
|
+
window.open(url, "_blank", "noopener");
|
|
51
|
+
return {};
|
|
52
|
+
};
|
|
53
|
+
bridge.addEventListener("sizechange", ({ height: height2 }) => {
|
|
54
|
+
if (height2 != null) {
|
|
55
|
+
iframe.style.height = `${height2}px`;
|
|
56
|
+
}
|
|
57
|
+
});
|
|
58
|
+
bridge.addEventListener("initialized", () => {
|
|
59
|
+
void bridge.sendToolResult({
|
|
60
|
+
content: [
|
|
61
|
+
{
|
|
62
|
+
text: JSON.stringify(dataRef.current),
|
|
63
|
+
type: "text"
|
|
64
|
+
}
|
|
65
|
+
]
|
|
66
|
+
});
|
|
67
|
+
});
|
|
68
|
+
const transport = new PostMessageTransport(
|
|
69
|
+
iframe.contentWindow,
|
|
70
|
+
iframe.contentWindow
|
|
71
|
+
);
|
|
72
|
+
void bridge.connect(transport);
|
|
73
|
+
return () => {
|
|
74
|
+
void bridge.close();
|
|
75
|
+
};
|
|
76
|
+
}, [iframe, onEvent]);
|
|
77
|
+
return result?.isError || !html ? null : /* @__PURE__ */ jsx(
|
|
78
|
+
"iframe",
|
|
79
|
+
{
|
|
80
|
+
ref: setIframe,
|
|
81
|
+
sandbox: "allow-scripts allow-popups allow-popups-to-escape-sandbox allow-forms",
|
|
82
|
+
srcDoc: mimeType === "text/html;profile=openai-app" ? OPENAI_SHIM_SCRIPT + html : html,
|
|
83
|
+
style: { border: "none", height, width: "100%" },
|
|
84
|
+
title: "Opal Widget"
|
|
85
|
+
}
|
|
86
|
+
);
|
|
87
|
+
}
|
|
88
|
+
ProteusBridge.displayName = "@optiaxiom/proteus/ProteusBridge";
|
|
89
|
+
|
|
90
|
+
export { ProteusBridge };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import './../assets/src/proteus-chart/ProteusChart.css.ts.vanilla-
|
|
1
|
+
import './../assets/src/proteus-chart/ProteusChart.css.ts.vanilla-B-FJ2e1F.css';
|
|
2
2
|
import { recipe } from '@optiaxiom/react/css-runtime';
|
|
3
3
|
|
|
4
4
|
var chart = recipe({base:[{border:'1',borderColor:'border.tertiary',fontSize:'sm',p:'16'},'ProteusChart__jmlqij1','ProteusChart__jmlqij0']});
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import './../assets/src/proteus-chart/ProteusChartTooltipContent.css.ts.vanilla-
|
|
1
|
+
import './../assets/src/proteus-chart/ProteusChartTooltipContent.css.ts.vanilla-B7GlVdiy.css';
|
|
2
2
|
import { recipe } from '@optiaxiom/react/css-runtime';
|
|
3
3
|
|
|
4
4
|
var tooltip = recipe({base:[{bg:'bg.default',border:'1',borderColor:'border.secondary',display:'grid',fontSize:'sm',gap:'6',px:'8',py:'10',rounded:'lg',shadow:'lg'},'ProteusChartTooltipContent__1gsvq810']});
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import './../assets/src/proteus-document/ProteusDocumentShell.css.ts.vanilla-GbLC1fdW.css';
|
|
2
|
+
import { recipe } from '@optiaxiom/react/css-runtime';
|
|
3
|
+
|
|
4
|
+
var body = recipe({base:[{flexDirection:'column',gap:'16'},'ProteusDocumentShell__vpuvfj0'],variants:{truncate:{false:{},true:[{maxH:'sm',overflow:'auto',p:'4'},'ProteusDocumentShell__vpuvfj1']}}});
|
|
5
|
+
var scrollIndicator = recipe({base:[{bg:'bg.secondary',border:'1',borderColor:'border.secondary',color:'fg.secondary',display:'grid',flex:'none',placeItems:'center',pointerEvents:'none',rounded:'full',shadow:'sm',size:'lg',transition:'opacity'},'ProteusDocumentShell__vpuvfj2']});
|
|
6
|
+
|
|
7
|
+
export { body, scrollIndicator };
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
3
|
+
import { IconArrowDown } from '@optiaxiom/icons';
|
|
3
4
|
import { Disclosure, DisclosureTrigger, Box, Group, Text, DisclosureContent, Heading, Tooltip } from '@optiaxiom/react';
|
|
4
5
|
import { useControllableState } from '@radix-ui/react-use-controllable-state';
|
|
5
6
|
import { set } from 'jsonpointer';
|
|
@@ -7,6 +8,7 @@ import { useState, useRef, useEffect } from 'react';
|
|
|
7
8
|
import { useEffectEvent } from '../hooks/useEffectEvent.js';
|
|
8
9
|
import { downloadFile } from '../proteus-image/downloadFile.js';
|
|
9
10
|
import { ProteusDocumentProvider } from './ProteusDocumentContext.js';
|
|
11
|
+
import { scrollIndicator, body } from './ProteusDocumentShell-css.js';
|
|
10
12
|
|
|
11
13
|
function ProteusDocumentShell({
|
|
12
14
|
collapsible: collapsibleProp,
|
|
@@ -20,7 +22,8 @@ function ProteusDocumentShell({
|
|
|
20
22
|
onOpenChange,
|
|
21
23
|
open: openProp,
|
|
22
24
|
readOnly = false,
|
|
23
|
-
strict
|
|
25
|
+
strict,
|
|
26
|
+
useResource
|
|
24
27
|
}) {
|
|
25
28
|
const [valid, setValid] = useState(false);
|
|
26
29
|
const formRef = useRef(null);
|
|
@@ -34,6 +37,26 @@ function ProteusDocumentShell({
|
|
|
34
37
|
onChange: onOpenChange,
|
|
35
38
|
prop: openProp
|
|
36
39
|
});
|
|
40
|
+
const bodyRef = useRef(null);
|
|
41
|
+
useEffect(() => {
|
|
42
|
+
const node = bodyRef.current;
|
|
43
|
+
if (!node)
|
|
44
|
+
return;
|
|
45
|
+
const update = () => {
|
|
46
|
+
if (node.scrollHeight - node.scrollTop - node.clientHeight > 1) {
|
|
47
|
+
node.dataset.canScroll = "";
|
|
48
|
+
} else {
|
|
49
|
+
delete node.dataset.canScroll;
|
|
50
|
+
}
|
|
51
|
+
};
|
|
52
|
+
const observer = new ResizeObserver(update);
|
|
53
|
+
observer.observe(node);
|
|
54
|
+
node.addEventListener("scroll", update, { passive: true });
|
|
55
|
+
return () => {
|
|
56
|
+
observer.disconnect();
|
|
57
|
+
node.removeEventListener("scroll", update);
|
|
58
|
+
};
|
|
59
|
+
}, []);
|
|
37
60
|
const collapsible = collapsibleProp && element.appName;
|
|
38
61
|
const Trigger = collapsible ? DisclosureTrigger : Box;
|
|
39
62
|
return /* @__PURE__ */ jsx(
|
|
@@ -47,7 +70,7 @@ function ProteusDocumentShell({
|
|
|
47
70
|
}),
|
|
48
71
|
onEvent: useEffectEvent(async (event) => {
|
|
49
72
|
if ("interaction" in event) {
|
|
50
|
-
await onInteraction?.(event.interaction);
|
|
73
|
+
return await onInteraction?.(event.interaction, event.params);
|
|
51
74
|
} else if ("message" in event) {
|
|
52
75
|
await onMessage?.(event.message);
|
|
53
76
|
} else if (event.action === "download") {
|
|
@@ -70,9 +93,11 @@ function ProteusDocumentShell({
|
|
|
70
93
|
await Promise.all(urls.map((u) => downloadFile(u)));
|
|
71
94
|
}
|
|
72
95
|
}
|
|
96
|
+
return;
|
|
73
97
|
}),
|
|
74
98
|
readOnly,
|
|
75
99
|
strict,
|
|
100
|
+
useResource,
|
|
76
101
|
valid,
|
|
77
102
|
children: /* @__PURE__ */ jsxs(
|
|
78
103
|
Disclosure,
|
|
@@ -151,7 +176,17 @@ function ProteusDocumentShell({
|
|
|
151
176
|
},
|
|
152
177
|
ref: formRef,
|
|
153
178
|
children: [
|
|
154
|
-
|
|
179
|
+
/* @__PURE__ */ jsxs(
|
|
180
|
+
Group,
|
|
181
|
+
{
|
|
182
|
+
ref: element.compact ? bodyRef : void 0,
|
|
183
|
+
...body({ truncate: element.compact }),
|
|
184
|
+
children: [
|
|
185
|
+
element.body,
|
|
186
|
+
element.compact && /* @__PURE__ */ jsx(Box, { ...scrollIndicator(), children: /* @__PURE__ */ jsx(IconArrowDown, {}) })
|
|
187
|
+
]
|
|
188
|
+
}
|
|
189
|
+
),
|
|
155
190
|
element.actions && !readOnly && /* @__PURE__ */ jsx(Group, { gap: "16", justifyContent: "end", w: "full", children: element.actions })
|
|
156
191
|
]
|
|
157
192
|
}
|
|
@@ -5,6 +5,7 @@ import { Time, Range } from '@optiaxiom/react/unstable';
|
|
|
5
5
|
import { lazy, Suspense } from 'react';
|
|
6
6
|
import { IconCalendar } from '../icons/IconCalendar.js';
|
|
7
7
|
import { ProteusAction } from '../proteus-action/ProteusAction.js';
|
|
8
|
+
import { ProteusBridge } from '../proteus-bridge/ProteusBridge.js';
|
|
8
9
|
import { ProteusDataTable } from '../proteus-data-table/ProteusDataTable.js';
|
|
9
10
|
import { useProteusDocumentContext } from '../proteus-document/ProteusDocumentContext.js';
|
|
10
11
|
import { useProteusDocumentPathContext } from '../proteus-document/ProteusDocumentPathContext.js';
|
|
@@ -65,6 +66,13 @@ const ProteusElement = ({
|
|
|
65
66
|
return /* @__PURE__ */ jsx(Avatar, { ...resolve(element) });
|
|
66
67
|
case "Badge":
|
|
67
68
|
return /* @__PURE__ */ jsx(Badge, { ...resolve(element) });
|
|
69
|
+
case "Bridge":
|
|
70
|
+
return /* @__PURE__ */ jsx(
|
|
71
|
+
ProteusBridge,
|
|
72
|
+
{
|
|
73
|
+
...resolve(element)
|
|
74
|
+
}
|
|
75
|
+
);
|
|
68
76
|
case "Button":
|
|
69
77
|
return /* @__PURE__ */ jsx(ProteusAction, { ...resolve(element) });
|
|
70
78
|
case "Card":
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import './../assets/src/proteus-image-carousel/ProteusImageCarousel.css.ts.vanilla-
|
|
1
|
+
import './../assets/src/proteus-image-carousel/ProteusImageCarousel.css.ts.vanilla-B21Y_xyv.css';
|
|
2
2
|
import { recipe } from '@optiaxiom/react/css-runtime';
|
|
3
3
|
|
|
4
4
|
var carousel = recipe({base:[{flexDirection:'column',gap:'12'},'ProteusImageCarousel__1t6qej70']});
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import './../assets/src/proteus-question/ProteusQuestion.css.ts.vanilla
|
|
1
|
+
import './../assets/src/proteus-question/ProteusQuestion.css.ts.vanilla--FkursVc.css';
|
|
2
2
|
import { recipe } from '@optiaxiom/react/css-runtime';
|
|
3
3
|
|
|
4
4
|
var addon = recipe({base:[{display:'grid',fontWeight:'500',placeItems:'center',rounded:'lg',size:'md',transition:'colors'},'ProteusQuestion__8f590p3'],variants:{cursor:{pointer:{cursor:'pointer'}}}});
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
|
|
3
|
-
import {
|
|
3
|
+
import { IconArrowRight, IconPen } from '@optiaxiom/icons';
|
|
4
4
|
import { Group, Text, Button, Box, Checkbox } from '@optiaxiom/react';
|
|
5
5
|
import { InlineInput } from '@optiaxiom/react/unstable';
|
|
6
6
|
import * as RovingFocus from '@radix-ui/react-roving-focus';
|
|
@@ -226,7 +226,7 @@ A: ${value2 || "[Not specified]"}`
|
|
|
226
226
|
h: "24",
|
|
227
227
|
ml: "auto",
|
|
228
228
|
w: "24",
|
|
229
|
-
children: /* @__PURE__ */ jsx(
|
|
229
|
+
children: /* @__PURE__ */ jsx(IconArrowRight, {})
|
|
230
230
|
}
|
|
231
231
|
)
|
|
232
232
|
] })
|
|
@@ -241,7 +241,7 @@ A: ${value2 || "[Not specified]"}`
|
|
|
241
241
|
role: "group",
|
|
242
242
|
...choice({ cursor: "text" }),
|
|
243
243
|
children: /* @__PURE__ */ jsxs(Group, { gap: "12", children: [
|
|
244
|
-
type === "single_select" ? /* @__PURE__ */ jsx(Box, { ...addon({ cursor: "pointer" }), children: /* @__PURE__ */ jsx(
|
|
244
|
+
type === "single_select" ? /* @__PURE__ */ jsx(Box, { ...addon({ cursor: "pointer" }), children: /* @__PURE__ */ jsx(IconPen, {}) }) : /* @__PURE__ */ jsx(
|
|
245
245
|
Checkbox,
|
|
246
246
|
{
|
|
247
247
|
checked: otherChecked,
|
|
@@ -303,7 +303,7 @@ A: ${value2 || "[Not specified]"}`
|
|
|
303
303
|
{
|
|
304
304
|
appearance: otherValue ? "primary-opal" : "default",
|
|
305
305
|
"aria-label": otherValue && (isLast ? "Submit" : "Next"),
|
|
306
|
-
icon: otherValue && /* @__PURE__ */ jsx(
|
|
306
|
+
icon: otherValue && /* @__PURE__ */ jsx(IconArrowRight, {}),
|
|
307
307
|
ml: "auto",
|
|
308
308
|
onClick: (event) => {
|
|
309
309
|
event.preventDefault();
|
|
@@ -354,7 +354,7 @@ A: ${value2 || "[Not specified]"}`
|
|
|
354
354
|
appearance: valid ? "primary-opal" : "default",
|
|
355
355
|
"aria-label": isLast ? "Submit" : "Next",
|
|
356
356
|
disabled: !valid,
|
|
357
|
-
icon: /* @__PURE__ */ jsx(
|
|
357
|
+
icon: /* @__PURE__ */ jsx(IconArrowRight, {}),
|
|
358
358
|
onClick: (event) => {
|
|
359
359
|
event.preventDefault();
|
|
360
360
|
onSubmit();
|
|
@@ -2673,6 +2673,10 @@ var definitions = {
|
|
|
2673
2673
|
$ref: "#/definitions/ProteusNode",
|
|
2674
2674
|
description: "The main content of the document."
|
|
2675
2675
|
},
|
|
2676
|
+
compact: {
|
|
2677
|
+
description: "If true, constrains the body to a max height and makes it scrollable when content overflows.",
|
|
2678
|
+
type: "boolean"
|
|
2679
|
+
},
|
|
2676
2680
|
subtitle: {
|
|
2677
2681
|
$ref: "#/definitions/ProteusNode",
|
|
2678
2682
|
description: "A brief description or tagline that provides additional context about the Proteus document's purpose."
|
|
@@ -2703,6 +2707,9 @@ var definitions = {
|
|
|
2703
2707
|
{
|
|
2704
2708
|
$ref: "#/definitions/ProteusBadge"
|
|
2705
2709
|
},
|
|
2710
|
+
{
|
|
2711
|
+
$ref: "#/definitions/ProteusBridge"
|
|
2712
|
+
},
|
|
2706
2713
|
{
|
|
2707
2714
|
$ref: "#/definitions/ProteusButton"
|
|
2708
2715
|
},
|
|
@@ -2802,6 +2809,12 @@ var definitions = {
|
|
|
2802
2809
|
interaction: {
|
|
2803
2810
|
description: "Name of registered interaction to call",
|
|
2804
2811
|
type: "string"
|
|
2812
|
+
},
|
|
2813
|
+
params: {
|
|
2814
|
+
additionalProperties: {
|
|
2815
|
+
},
|
|
2816
|
+
description: "Parameters to pass to the interaction handler",
|
|
2817
|
+
type: "object"
|
|
2805
2818
|
}
|
|
2806
2819
|
},
|
|
2807
2820
|
required: [
|
|
@@ -3703,6 +3716,38 @@ var definitions = {
|
|
|
3703
3716
|
],
|
|
3704
3717
|
type: "object"
|
|
3705
3718
|
},
|
|
3719
|
+
ProteusBridge: {
|
|
3720
|
+
additionalProperties: false,
|
|
3721
|
+
examples: [
|
|
3722
|
+
{
|
|
3723
|
+
$type: "Bridge",
|
|
3724
|
+
height: 400,
|
|
3725
|
+
resource: "ui://sample-widget"
|
|
3726
|
+
}
|
|
3727
|
+
],
|
|
3728
|
+
properties: {
|
|
3729
|
+
$type: {
|
|
3730
|
+
"const": "Bridge"
|
|
3731
|
+
},
|
|
3732
|
+
fallback: {
|
|
3733
|
+
$ref: "#/definitions/ProteusNode",
|
|
3734
|
+
description: "Content rendered on platforms without iframe support (Teams, Slack, mobile). If omitted, a default 'View in Opal web' message is shown."
|
|
3735
|
+
},
|
|
3736
|
+
height: {
|
|
3737
|
+
description: "Height of the iframe in pixels",
|
|
3738
|
+
type: "number"
|
|
3739
|
+
},
|
|
3740
|
+
resource: {
|
|
3741
|
+
description: "Resource URI identifying the MCP app to render (e.g., 'ui://sample-widget')",
|
|
3742
|
+
type: "string"
|
|
3743
|
+
}
|
|
3744
|
+
},
|
|
3745
|
+
required: [
|
|
3746
|
+
"$type",
|
|
3747
|
+
"resource"
|
|
3748
|
+
],
|
|
3749
|
+
type: "object"
|
|
3750
|
+
},
|
|
3706
3751
|
ProteusButton: {
|
|
3707
3752
|
additionalProperties: false,
|
|
3708
3753
|
examples: [
|
|
@@ -2661,6 +2661,10 @@ var definitions = {
|
|
|
2661
2661
|
$ref: "#/definitions/ProteusNode",
|
|
2662
2662
|
description: "The main content of the document."
|
|
2663
2663
|
},
|
|
2664
|
+
compact: {
|
|
2665
|
+
description: "If true, constrains the body to a max height and makes it scrollable when content overflows.",
|
|
2666
|
+
type: "boolean"
|
|
2667
|
+
},
|
|
2664
2668
|
subtitle: {
|
|
2665
2669
|
$ref: "#/definitions/ProteusNode",
|
|
2666
2670
|
description: "A brief description or tagline that provides additional context about the Proteus document's purpose."
|
|
@@ -2691,6 +2695,9 @@ var definitions = {
|
|
|
2691
2695
|
{
|
|
2692
2696
|
$ref: "#/definitions/ProteusBadge"
|
|
2693
2697
|
},
|
|
2698
|
+
{
|
|
2699
|
+
$ref: "#/definitions/ProteusBridge"
|
|
2700
|
+
},
|
|
2694
2701
|
{
|
|
2695
2702
|
$ref: "#/definitions/ProteusButton"
|
|
2696
2703
|
},
|
|
@@ -2789,6 +2796,12 @@ var definitions = {
|
|
|
2789
2796
|
interaction: {
|
|
2790
2797
|
description: "Name of registered interaction to call",
|
|
2791
2798
|
type: "string"
|
|
2799
|
+
},
|
|
2800
|
+
params: {
|
|
2801
|
+
additionalProperties: {
|
|
2802
|
+
},
|
|
2803
|
+
description: "Parameters to pass to the interaction handler",
|
|
2804
|
+
type: "object"
|
|
2792
2805
|
}
|
|
2793
2806
|
},
|
|
2794
2807
|
required: [
|
|
@@ -3683,6 +3696,37 @@ var definitions = {
|
|
|
3683
3696
|
],
|
|
3684
3697
|
type: "object"
|
|
3685
3698
|
},
|
|
3699
|
+
ProteusBridge: {
|
|
3700
|
+
examples: [
|
|
3701
|
+
{
|
|
3702
|
+
$type: "Bridge",
|
|
3703
|
+
height: 400,
|
|
3704
|
+
resource: "ui://sample-widget"
|
|
3705
|
+
}
|
|
3706
|
+
],
|
|
3707
|
+
properties: {
|
|
3708
|
+
$type: {
|
|
3709
|
+
"const": "Bridge"
|
|
3710
|
+
},
|
|
3711
|
+
fallback: {
|
|
3712
|
+
$ref: "#/definitions/ProteusNode",
|
|
3713
|
+
description: "Content rendered on platforms without iframe support (Teams, Slack, mobile). If omitted, a default 'View in Opal web' message is shown."
|
|
3714
|
+
},
|
|
3715
|
+
height: {
|
|
3716
|
+
description: "Height of the iframe in pixels",
|
|
3717
|
+
type: "number"
|
|
3718
|
+
},
|
|
3719
|
+
resource: {
|
|
3720
|
+
description: "Resource URI identifying the MCP app to render (e.g., 'ui://sample-widget')",
|
|
3721
|
+
type: "string"
|
|
3722
|
+
}
|
|
3723
|
+
},
|
|
3724
|
+
required: [
|
|
3725
|
+
"$type",
|
|
3726
|
+
"resource"
|
|
3727
|
+
],
|
|
3728
|
+
type: "object"
|
|
3729
|
+
},
|
|
3686
3730
|
ProteusButton: {
|
|
3687
3731
|
examples: [
|
|
3688
3732
|
{
|
package/dist/index.d.ts
CHANGED
|
@@ -2,6 +2,25 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
|
2
2
|
import { BoxProps, SelectProps, Disclosure, ButtonProps, InputProps, TextareaProps } from '@optiaxiom/react';
|
|
3
3
|
import { ReactNode, ComponentPropsWithoutRef } from 'react';
|
|
4
4
|
|
|
5
|
+
type ProteusBridgeProps = {
|
|
6
|
+
/**
|
|
7
|
+
* Content rendered on platforms without iframe support
|
|
8
|
+
*/
|
|
9
|
+
fallback?: ReactNode;
|
|
10
|
+
/**
|
|
11
|
+
* Height of the iframe in pixels
|
|
12
|
+
*/
|
|
13
|
+
height?: number;
|
|
14
|
+
/**
|
|
15
|
+
* Resource URI identifying the MCP app to render
|
|
16
|
+
*/
|
|
17
|
+
resource: string;
|
|
18
|
+
};
|
|
19
|
+
declare function ProteusBridge({ height, resource }: ProteusBridgeProps): react_jsx_runtime.JSX.Element | null;
|
|
20
|
+
declare namespace ProteusBridge {
|
|
21
|
+
var displayName: string;
|
|
22
|
+
}
|
|
23
|
+
|
|
5
24
|
type Series = {
|
|
6
25
|
dataKey: string;
|
|
7
26
|
name?: string;
|
|
@@ -194,6 +213,14 @@ type ProteusValueProps = {
|
|
|
194
213
|
path: string;
|
|
195
214
|
};
|
|
196
215
|
|
|
216
|
+
type UseResource = (resource: string) => {
|
|
217
|
+
data: undefined | {
|
|
218
|
+
mimeType: string;
|
|
219
|
+
text: string;
|
|
220
|
+
};
|
|
221
|
+
isError: boolean;
|
|
222
|
+
};
|
|
223
|
+
|
|
197
224
|
type ProteusDocumentShellProps = Pick<ComponentPropsWithoutRef<typeof Disclosure>, "defaultOpen" | "onOpenChange" | "open"> & {
|
|
198
225
|
/**
|
|
199
226
|
* Whether block is collapsible
|
|
@@ -220,7 +247,7 @@ type ProteusDocumentShellProps = Pick<ComponentPropsWithoutRef<typeof Disclosure
|
|
|
220
247
|
/**
|
|
221
248
|
* Callback when user clicks a Action button with interaction handler
|
|
222
249
|
*/
|
|
223
|
-
onInteraction?: (name: string) => Promise<
|
|
250
|
+
onInteraction?: (name: string, params?: Record<string, unknown>) => Promise<unknown> | unknown;
|
|
224
251
|
/**
|
|
225
252
|
* Callback when user sends a message action
|
|
226
253
|
*/
|
|
@@ -233,6 +260,10 @@ type ProteusDocumentShellProps = Pick<ComponentPropsWithoutRef<typeof Disclosure
|
|
|
233
260
|
* If true, the renderer will throw an error if the provided document is invalid. Otherwise, it will fail silently and render nothing.
|
|
234
261
|
*/
|
|
235
262
|
strict?: boolean;
|
|
263
|
+
/**
|
|
264
|
+
* Hook to resolve a resource URI to HTML content for Bridge elements
|
|
265
|
+
*/
|
|
266
|
+
useResource?: UseResource;
|
|
236
267
|
};
|
|
237
268
|
type ProteusDocument$2 = {
|
|
238
269
|
actions?: ReactNode;
|
|
@@ -240,11 +271,12 @@ type ProteusDocument$2 = {
|
|
|
240
271
|
appName?: string;
|
|
241
272
|
blocking?: boolean;
|
|
242
273
|
body: ReactNode;
|
|
274
|
+
compact?: boolean;
|
|
243
275
|
subtitle?: ReactNode;
|
|
244
276
|
title?: ReactNode;
|
|
245
277
|
titleIcon?: string;
|
|
246
278
|
};
|
|
247
|
-
declare function ProteusDocumentShell({ collapsible: collapsibleProp, data, defaultOpen, element, onDataChange, onDownload, onInteraction, onMessage, onOpenChange, open: openProp, readOnly, strict, }: ProteusDocumentShellProps): react_jsx_runtime.JSX.Element;
|
|
279
|
+
declare function ProteusDocumentShell({ collapsible: collapsibleProp, data, defaultOpen, element, onDataChange, onDownload, onInteraction, onMessage, onOpenChange, open: openProp, readOnly, strict, useResource, }: ProteusDocumentShellProps): react_jsx_runtime.JSX.Element;
|
|
248
280
|
declare namespace ProteusDocumentShell {
|
|
249
281
|
var displayName: string;
|
|
250
282
|
}
|
|
@@ -256,6 +288,7 @@ type ProteusEventHandler = {
|
|
|
256
288
|
}) | string | string[];
|
|
257
289
|
} | {
|
|
258
290
|
interaction: string;
|
|
291
|
+
params?: Record<string, unknown>;
|
|
259
292
|
} | {
|
|
260
293
|
message: string;
|
|
261
294
|
};
|
|
@@ -299,6 +332,7 @@ type ProteusDocument = {
|
|
|
299
332
|
appName?: string;
|
|
300
333
|
blocking?: boolean;
|
|
301
334
|
body: unknown;
|
|
335
|
+
compact?: boolean;
|
|
302
336
|
subtitle?: unknown;
|
|
303
337
|
title?: unknown;
|
|
304
338
|
titleIcon?: string;
|
|
@@ -320,5 +354,5 @@ declare namespace ProteusTextarea {
|
|
|
320
354
|
|
|
321
355
|
declare function useProteusValue(element: ProteusValueProps): any;
|
|
322
356
|
|
|
323
|
-
export { ProteusAction, ProteusChart, ProteusDataTable, ProteusDocumentRenderer, ProteusDocumentShell, ProteusImage, ProteusImageCarousel, ProteusInput, ProteusMap, ProteusSelect, ProteusShow, ProteusTextarea, safeParseDocument, useProteusValue };
|
|
357
|
+
export { ProteusAction, ProteusBridge, ProteusChart, ProteusDataTable, ProteusDocumentRenderer, ProteusDocumentShell, ProteusImage, ProteusImageCarousel, ProteusInput, ProteusMap, ProteusSelect, ProteusShow, ProteusTextarea, safeParseDocument, useProteusValue };
|
|
324
358
|
export type { ProteusDocumentRendererProps, ProteusDocumentShellProps };
|