@box/box-ai-agent-selector 0.26.3 → 0.26.5
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.
@@ -1,20 +1,20 @@
|
|
1
1
|
import { useFullTextTooltip as H, FilterChip as c, Popover as d, Tooltip as J, Status as X, LoadingIndicator as Z, SmallList as $, Button as q } from "@box/blueprint-web";
|
2
2
|
import { AlertBadge as tt } from "@box/blueprint-web-assets/icons/Fill";
|
3
3
|
import m from "clsx";
|
4
|
-
import { useState as
|
5
|
-
import { useIntl as
|
6
|
-
import { BoxAiAgent as
|
4
|
+
import { useState as x, useRef as et, useEffect as at, useCallback as f } from "react";
|
5
|
+
import { useIntl as rt } from "react-intl";
|
6
|
+
import { BoxAiAgent as ot } from "./box-ai-agent.js";
|
7
7
|
import { LOGGER_BASE_CONFIG as E, LOGGER_ACTION_CLICK as S, LOGGER_TARGET as T } from "./constants.js";
|
8
8
|
import { ACTIONS as nt } from "./contexts/actions.js";
|
9
|
-
import { useAgentsDispatch as
|
9
|
+
import { useAgentsDispatch as st } from "./contexts/context.js";
|
10
10
|
import s from "./messages.js";
|
11
11
|
import { R } from "../../chunks/types.js";
|
12
12
|
import { jsx as e, jsxs as I } from "react/jsx-runtime";
|
13
|
-
import '../../styles/box-ai-agent-selector.css';const
|
14
|
-
agentSelector:
|
13
|
+
import '../../styles/box-ai-agent-selector.css';const it = "_agentSelector_prbzs_1", lt = "_agentStatus_prbzs_4", pt = "_agentLoader_prbzs_18", gt = "_agentError_prbzs_21", ct = "_triggerChip_prbzs_24", dt = "_agentLabel_prbzs_30", mt = "_dropdownIndicator_prbzs_36", ft = "_sidebar_prbzs_51", _t = "_agentListItemIcon_prbzs_64", Lt = "_agentListContainer_prbzs_69", ut = "_agentListRetryButton_prbzs_99", a = {
|
14
|
+
agentSelector: it,
|
15
15
|
agentStatus: lt,
|
16
|
-
agentLoader:
|
17
|
-
agentError:
|
16
|
+
agentLoader: pt,
|
17
|
+
agentError: gt,
|
18
18
|
triggerChip: ct,
|
19
19
|
agentLabel: dt,
|
20
20
|
dropdownIndicator: mt,
|
@@ -23,79 +23,79 @@ import '../../styles/box-ai-agent-selector.css';const st = "_agentSelector_1y96v
|
|
23
23
|
agentListContainer: Lt,
|
24
24
|
agentListRetryButton: ut
|
25
25
|
};
|
26
|
-
function
|
26
|
+
function Gt({
|
27
27
|
agents: _,
|
28
|
-
contentClassName:
|
29
|
-
onErrorAction:
|
30
|
-
recordAction:
|
28
|
+
contentClassName: B,
|
29
|
+
onErrorAction: y,
|
30
|
+
recordAction: r,
|
31
31
|
requestState: L,
|
32
|
-
disabled:
|
33
|
-
selectedAgent:
|
34
|
-
triggerChipClassName:
|
35
|
-
variant:
|
32
|
+
disabled: k,
|
33
|
+
selectedAgent: i,
|
34
|
+
triggerChipClassName: D,
|
35
|
+
variant: P = "modal"
|
36
36
|
}) {
|
37
37
|
const {
|
38
|
-
formatMessage:
|
39
|
-
} =
|
40
|
-
let
|
41
|
-
O ?
|
42
|
-
const
|
43
|
-
Wrapper:
|
44
|
-
wrapperProps:
|
38
|
+
formatMessage: o
|
39
|
+
} = rt(), [l, p] = x(!1), n = L === R.ERROR, [K, u] = x(n), N = st(), O = L === R.SUCCESS, h = L === R.IN_PROGRESS, w = o(s.selectAgent), M = o(s.defaultAgent);
|
40
|
+
let g = "";
|
41
|
+
O ? g = (i == null ? void 0 : i.name) || w : n && (g = M);
|
42
|
+
const G = et(null), {
|
43
|
+
Wrapper: v,
|
44
|
+
wrapperProps: F
|
45
45
|
} = H({
|
46
|
-
ref:
|
47
|
-
textValue:
|
46
|
+
ref: G,
|
47
|
+
textValue: g
|
48
48
|
});
|
49
49
|
at(() => {
|
50
|
-
l &&
|
50
|
+
l && r && r({
|
51
51
|
...E,
|
52
52
|
action: S,
|
53
53
|
target: T.OPEN_SELECTOR
|
54
54
|
});
|
55
|
-
}, [l,
|
56
|
-
const
|
57
|
-
|
55
|
+
}, [l, r]);
|
56
|
+
const C = f((t) => {
|
57
|
+
p(!1), N({
|
58
58
|
type: nt.SET_SELECTED_AGENT,
|
59
59
|
id: t.id
|
60
|
-
}),
|
60
|
+
}), r && r({
|
61
61
|
...E,
|
62
62
|
action: S,
|
63
63
|
target: T.SELECT_AGENT
|
64
64
|
});
|
65
|
-
}, [N,
|
66
|
-
|
65
|
+
}, [N, r]), U = f(() => {
|
66
|
+
p(!1), y(), r && r({
|
67
67
|
...E,
|
68
68
|
action: S,
|
69
69
|
target: T.RETRY_LOADING_AGENTS
|
70
70
|
});
|
71
|
-
}, [
|
72
|
-
if (t.key === "Escape" && (
|
73
|
-
const
|
74
|
-
if (
|
75
|
-
const
|
76
|
-
|
71
|
+
}, [y, r]), j = f((t) => {
|
72
|
+
if (t.key === "Escape" && (p(!1), t.stopPropagation()), t.key === " ") {
|
73
|
+
const A = t.target;
|
74
|
+
if (A) {
|
75
|
+
const W = A.getAttribute("data-key"), z = _.find((Y) => Y.id === W);
|
76
|
+
z && C(z);
|
77
77
|
}
|
78
78
|
}
|
79
|
-
}, [_,
|
79
|
+
}, [_, C]), Q = f((t) => u(n && n && !l && t ? t : !1), [n, l]), b = P === "sidebar" && a.sidebar, V = (t) => {
|
80
80
|
(t.key === "ArrowUp" || t.key === "ArrowDown" || t.key === "ArrowLeft" || t.key === "ArrowRight") && t.stopPropagation();
|
81
81
|
};
|
82
82
|
return /* @__PURE__ */ e(c.Group, {
|
83
|
-
className: m(a.agentSelector,
|
83
|
+
className: m(a.agentSelector, D, b),
|
84
84
|
name: w,
|
85
|
-
onKeyDown:
|
85
|
+
onKeyDown: V,
|
86
86
|
type: "multiple",
|
87
87
|
children: /* @__PURE__ */ I(d.Root, {
|
88
88
|
modal: !1,
|
89
|
-
onOpenChange:
|
89
|
+
onOpenChange: p,
|
90
90
|
open: l,
|
91
91
|
children: [/* @__PURE__ */ e(J, {
|
92
|
-
content:
|
93
|
-
onOpenChange:
|
92
|
+
content: o(s.errorTooltip),
|
93
|
+
onOpenChange: Q,
|
94
94
|
open: K,
|
95
95
|
side: "bottom",
|
96
96
|
variant: "error",
|
97
97
|
children: /* @__PURE__ */ e(d.Trigger, {
|
98
|
-
disabled:
|
98
|
+
disabled: k || h,
|
99
99
|
children: /* @__PURE__ */ I(c.TriggerChip, {
|
100
100
|
className: a.triggerChip,
|
101
101
|
"data-target-id": "FilterChip.TriggerChip-agentSelectorTrigger",
|
@@ -103,22 +103,22 @@ function vt({
|
|
103
103
|
children: [/* @__PURE__ */ e(X, {
|
104
104
|
className: a.agentStatus,
|
105
105
|
colorIndex: 0,
|
106
|
-
text:
|
106
|
+
text: o(s.agent)
|
107
107
|
}), h && /* @__PURE__ */ e(Z, {
|
108
|
-
"aria-label":
|
108
|
+
"aria-label": o(s.loadingMessage),
|
109
109
|
className: a.agentLoader,
|
110
110
|
variant: "default"
|
111
|
-
}),
|
111
|
+
}), n && /* @__PURE__ */ e(tt, {
|
112
112
|
className: a.agentError,
|
113
113
|
height: "1rem",
|
114
114
|
role: "presentation",
|
115
115
|
width: "1rem"
|
116
|
-
}), /* @__PURE__ */ e(
|
117
|
-
...
|
116
|
+
}), /* @__PURE__ */ e(v, {
|
117
|
+
...F,
|
118
118
|
children: /* @__PURE__ */ e(c.Label, {
|
119
|
-
ref:
|
119
|
+
ref: G,
|
120
120
|
className: a.agentLabel,
|
121
|
-
children:
|
121
|
+
children: g
|
122
122
|
})
|
123
123
|
}), !h && /* @__PURE__ */ e("div", {
|
124
124
|
className: a.dropdownIndicator,
|
@@ -128,24 +128,23 @@ function vt({
|
|
128
128
|
})
|
129
129
|
}), /* @__PURE__ */ e(d.ContentContainer, {
|
130
130
|
align: "start",
|
131
|
-
className: m(a.agentListContainer,
|
132
|
-
onKeyDownCapture:
|
131
|
+
className: m(a.agentListContainer, b),
|
132
|
+
onKeyDownCapture: j,
|
133
133
|
children: /* @__PURE__ */ I(d.MainContent, {
|
134
134
|
children: [O && /* @__PURE__ */ e($, {
|
135
|
-
"aria-label":
|
136
|
-
className: m([a.agentList,
|
137
|
-
selectedKeys: [(
|
138
|
-
children: _.map((t) => /* @__PURE__ */ e(
|
135
|
+
"aria-label": o(s.agentList),
|
136
|
+
className: m([a.agentList, B]),
|
137
|
+
selectedKeys: [(i == null ? void 0 : i.id) || ""],
|
138
|
+
children: _.map((t) => /* @__PURE__ */ e(ot, {
|
139
139
|
agent: t,
|
140
|
-
|
141
|
-
onAction: () => y(t)
|
140
|
+
onAction: () => C(t)
|
142
141
|
}, t.id))
|
143
|
-
}),
|
144
|
-
className: m(a.agentListRetryButton,
|
145
|
-
onClick:
|
142
|
+
}), n && /* @__PURE__ */ e(q, {
|
143
|
+
className: m(a.agentListRetryButton, b),
|
144
|
+
onClick: U,
|
146
145
|
variant: "tertiary",
|
147
146
|
"data-target-id": "Button-errorMessage",
|
148
|
-
children:
|
147
|
+
children: o(s.errorMessage)
|
149
148
|
})]
|
150
149
|
})
|
151
150
|
})]
|
@@ -153,6 +152,6 @@ function vt({
|
|
153
152
|
});
|
154
153
|
}
|
155
154
|
export {
|
156
|
-
|
157
|
-
|
155
|
+
Gt as BoxAiAgentSelector,
|
156
|
+
Gt as default
|
158
157
|
};
|
package/esm/lib/box-ai-agent.js
CHANGED
@@ -1,63 +1,54 @@
|
|
1
|
-
import { useFullTextTooltip as u, SmallList as
|
2
|
-
import { BoxAiLogo as
|
3
|
-
import {
|
4
|
-
import {
|
5
|
-
import {
|
6
|
-
import { useIntl as g } from "react-intl";
|
1
|
+
import { useFullTextTooltip as u, SmallList as s, Text as c, Status as d } from "@box/blueprint-web";
|
2
|
+
import { BoxAiLogo as p } from "@box/blueprint-web-assets/icons/Logo";
|
3
|
+
import { SurfaceStatusSurfaceGray as f } from "@box/blueprint-web-assets/tokens/tokens";
|
4
|
+
import { useRef as g } from "react";
|
5
|
+
import { useIntl as _ } from "react-intl";
|
7
6
|
import A from "./messages.js";
|
8
|
-
import { jsxs as
|
9
|
-
import '../../styles/box-ai-agent.css';const
|
10
|
-
agentListItem:
|
11
|
-
thumbnailWrapper:
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
defaultAgentName: z,
|
17
|
-
defaultAgentStatusWrapper: v
|
7
|
+
import { jsxs as b, jsx as t, Fragment as h } from "react/jsx-runtime";
|
8
|
+
import '../../styles/box-ai-agent.css';const I = "_agentListItem_1byz1_1", S = "_thumbnailWrapper_1byz1_6", L = "_agentListItemIcon_1byz1_9", N = "_defaultAgentHeader_1byz1_18", x = "_defaultAgentName_1byz1_22", y = "_defaultAgentStatusWrapper_1byz1_28", a = {
|
9
|
+
agentListItem: I,
|
10
|
+
thumbnailWrapper: S,
|
11
|
+
agentListItemIcon: L,
|
12
|
+
defaultAgentHeader: N,
|
13
|
+
defaultAgentName: x,
|
14
|
+
defaultAgentStatusWrapper: y
|
18
15
|
};
|
19
|
-
function
|
16
|
+
function j({
|
20
17
|
agent: e,
|
21
|
-
|
22
|
-
onAction: o
|
18
|
+
onAction: l
|
23
19
|
}) {
|
24
20
|
const {
|
25
21
|
formatMessage: i
|
26
|
-
} =
|
22
|
+
} = _(), r = e.isEnterpriseDefault, n = g(null), {
|
27
23
|
Wrapper: m,
|
28
|
-
wrapperProps:
|
24
|
+
wrapperProps: o
|
29
25
|
} = u({
|
30
26
|
ref: n,
|
31
27
|
textValue: e.name,
|
32
|
-
skipOverflowCheck: !
|
28
|
+
skipOverflowCheck: !r
|
33
29
|
});
|
34
|
-
return /* @__PURE__ */
|
30
|
+
return /* @__PURE__ */ b(s.Item, {
|
35
31
|
className: a.agentListItem,
|
36
32
|
id: e.id,
|
37
|
-
onAction:
|
38
|
-
children: [/* @__PURE__ */
|
33
|
+
onAction: l,
|
34
|
+
children: [/* @__PURE__ */ t(s.Thumbnail, {
|
39
35
|
className: a.thumbnailWrapper,
|
40
|
-
children:
|
41
|
-
className: a.checkMarkIconWrapper,
|
42
|
-
children: l && /* @__PURE__ */ t(_, {
|
43
|
-
className: a.checkMarkIcon
|
44
|
-
})
|
45
|
-
}), /* @__PURE__ */ t("div", {
|
36
|
+
children: /* @__PURE__ */ t("div", {
|
46
37
|
className: a.agentListItemIcon,
|
47
38
|
children: e.imageURL ? /* @__PURE__ */ t("img", {
|
48
39
|
"aria-label": e.name,
|
49
40
|
src: e.imageURL
|
50
|
-
}) : /* @__PURE__ */ t(
|
41
|
+
}) : /* @__PURE__ */ t(p, {
|
51
42
|
"aria-label": e.name
|
52
43
|
})
|
53
|
-
})
|
54
|
-
}), /* @__PURE__ */ t(
|
55
|
-
className:
|
44
|
+
})
|
45
|
+
}), /* @__PURE__ */ t(s.Header, {
|
46
|
+
className: r ? a.defaultAgentHeader : void 0,
|
56
47
|
textValue: e.name,
|
57
|
-
children:
|
48
|
+
children: r ? /* @__PURE__ */ t(h, {
|
58
49
|
children: /* @__PURE__ */ t(m, {
|
59
|
-
...
|
60
|
-
children: /* @__PURE__ */ t(
|
50
|
+
...o,
|
51
|
+
children: /* @__PURE__ */ t(c, {
|
61
52
|
ref: n,
|
62
53
|
as: "span",
|
63
54
|
className: a.defaultAgentName,
|
@@ -66,20 +57,20 @@ function C({
|
|
66
57
|
})
|
67
58
|
})
|
68
59
|
}) : e.name
|
69
|
-
}), /* @__PURE__ */ t(
|
60
|
+
}), /* @__PURE__ */ t(s.Actions, {
|
70
61
|
className: a.defaultAgentStatusWrapper,
|
71
|
-
children:
|
62
|
+
children: r && /* @__PURE__ */ t(d, {
|
72
63
|
className: a.defaultAgentStatus,
|
73
|
-
color:
|
64
|
+
color: f,
|
74
65
|
text: i(A.defaultStatus)
|
75
66
|
})
|
76
|
-
}), e.description && /* @__PURE__ */ t(
|
67
|
+
}), e.description && /* @__PURE__ */ t(s.Subtitle, {
|
77
68
|
className: a.agentDescription,
|
78
69
|
children: e.description
|
79
70
|
})]
|
80
71
|
});
|
81
72
|
}
|
82
73
|
export {
|
83
|
-
|
84
|
-
|
74
|
+
j as BoxAiAgent,
|
75
|
+
j as default
|
85
76
|
};
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@box/box-ai-agent-selector",
|
3
|
-
"version": "0.26.
|
3
|
+
"version": "0.26.5",
|
4
4
|
"license": "SEE LICENSE IN LICENSE",
|
5
5
|
"peerDependencies": {
|
6
6
|
"@box/blueprint-web": "^7.31.1",
|
@@ -11,7 +11,7 @@
|
|
11
11
|
},
|
12
12
|
"devDependencies": {
|
13
13
|
"@box/babel-plugin-target-attributes": "1.3.0",
|
14
|
-
"@box/blueprint-web": "^9.18.
|
14
|
+
"@box/blueprint-web": "^9.18.2",
|
15
15
|
"@box/blueprint-web-assets": "^4.33.1",
|
16
16
|
"@box/eslint-plugin-blueprint": "^1.0.3",
|
17
17
|
"@box/storybook-utils": "^0.8.3",
|
@@ -47,5 +47,5 @@
|
|
47
47
|
"sideEffects": [
|
48
48
|
"**/*.css"
|
49
49
|
],
|
50
|
-
"gitHead": "
|
50
|
+
"gitHead": "f6c507e488017314babe6a6c26be34c2c030af8b"
|
51
51
|
}
|
@@ -1 +1 @@
|
|
1
|
-
.
|
1
|
+
._agentSelector_prbzs_1{margin-inline-start:.75rem}._agentSelector_prbzs_1 ._agentStatus_prbzs_4{margin-inline-start:.5rem}._agentSelector_prbzs_1 ._agentStatus_prbzs_4>span{background:linear-gradient(#f4f4f4 0,#f4f4f4 0) padding-box,linear-gradient(135deg,#fe01da,#2486fc) border-box;border:.0625rem solid rgba(0,0,0,0)}._agentSelector_prbzs_1 ._agentStatus_prbzs_4>span span{color:transparent;text-transform:uppercase;background:linear-gradient(135deg,#fe01da,#2486fc);-webkit-background-clip:text;background-clip:text}._agentSelector_prbzs_1 ._agentLoader_prbzs_18{position:inherit}._agentSelector_prbzs_1 ._agentError_prbzs_21 path{fill:#d5324e}._agentSelector_prbzs_1 ._triggerChip_prbzs_24{display:flex;max-width:376px;text-align:start;background-color:#faf5fe}._agentSelector_prbzs_1 ._triggerChip_prbzs_24 ._agentLabel_prbzs_30{flex-grow:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}._agentSelector_prbzs_1 ._triggerChip_prbzs_24 ._dropdownIndicator_prbzs_36{flex-shrink:0;margin-inline-start:0}._agentSelector_prbzs_1 ._triggerChip_prbzs_24 ._dropdownIndicator_prbzs_36 svg{margin-inline-start:0}._agentSelector_prbzs_1 ._triggerChip_prbzs_24:disabled ._dropdownIndicator_prbzs_36{opacity:.3}@media (max-width: 374px){._agentSelector_prbzs_1 ._triggerChip_prbzs_24{width:100%}}._agentSelector_prbzs_1._sidebar_prbzs_51{margin:0 .25rem 0 0;margin-inline-start:0}@media (max-width: 767px){._agentSelector_prbzs_1._sidebar_prbzs_51{width:100%}}._agentSelector_prbzs_1._sidebar_prbzs_51 ._triggerChip_prbzs_24{max-width:246px}._agentListItemIcon_prbzs_64{width:2rem;height:2rem}._agentListContainer_prbzs_69{min-width:320px;max-width:376px;width:360px}@media (max-width: 376px){._agentListContainer_prbzs_69{max-width:320px}}._agentListContainer_prbzs_69>div{padding:var(--space-3)}._agentListContainer_prbzs_69._sidebar_prbzs_51{min-width:320px;max-width:360px;transform:translate(-6px)}@media (max-width: 360px){._agentListContainer_prbzs_69._sidebar_prbzs_51{max-width:320px}}@media (max-width: 767px){._agentListContainer_prbzs_69._sidebar_prbzs_51{max-width:unset;width:auto}}._agentListRetryButton_prbzs_99{max-width:320px;margin:.25rem;text-wrap:wrap}._agentListRetryButton_prbzs_99._sidebar_prbzs_51{max-width:184px}
|
package/styles/box-ai-agent.css
CHANGED
@@ -1 +1 @@
|
|
1
|
-
.
|
1
|
+
._agentListItem_1byz1_1{align-items:center;grid-template-columns:1rem auto auto!important;column-gap:var(--space-4)!important}._agentListItem_1byz1_1 ._thumbnailWrapper_1byz1_6{aspect-ratio:auto!important}._agentListItem_1byz1_1 ._thumbnailWrapper_1byz1_6 ._agentListItemIcon_1byz1_9{height:1rem;width:1rem}._agentListItem_1byz1_1 ._thumbnailWrapper_1byz1_6 ._agentListItemIcon_1byz1_9 svg,._agentListItem_1byz1_1 ._thumbnailWrapper_1byz1_6 ._agentListItemIcon_1byz1_9 img{vertical-align:top;height:100%;width:100%}._agentListItem_1byz1_1 ._defaultAgentHeader_1byz1_18{display:flex!important;align-items:center}._agentListItem_1byz1_1 ._defaultAgentName_1byz1_22{flex-grow:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}._agentListItem_1byz1_1 ._defaultAgentStatusWrapper_1byz1_28{--default-opacity: 1;opacity:var(--default-opacity)!important}._agentListItem_1byz1_1 ._defaultAgentStatusWrapper_1byz1_28>div{background:transparent!important}
|
@@ -4,14 +4,10 @@ export interface BoxAiAgentProps {
|
|
4
4
|
* Object representation of agent.
|
5
5
|
*/
|
6
6
|
agent: AgentType;
|
7
|
-
/**
|
8
|
-
* Flag that the agent is selected
|
9
|
-
*/
|
10
|
-
isSelected: boolean;
|
11
7
|
/**
|
12
8
|
* Callback function triggered when an agent is selected
|
13
9
|
*/
|
14
10
|
onAction: () => void;
|
15
11
|
}
|
16
|
-
export declare function BoxAiAgent({ agent,
|
12
|
+
export declare function BoxAiAgent({ agent, onAction }: BoxAiAgentProps): import("react/jsx-runtime").JSX.Element;
|
17
13
|
export default BoxAiAgent;
|