@box/box-ai-content-answers 0.156.2 → 0.157.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/esm/lib/components/answer/answer.js +107 -104
- package/dist/esm/lib/components/thinkingBubble/boxAILoadingIndicator.js +28 -21
- package/dist/esm/lib/components/thinkingBubble/thinkingBubble.js +52 -52
- package/dist/styles/answer.css +1 -1
- package/dist/styles/thinkingBubble.css +1 -1
- package/dist/types/lib/components/thinkingBubble/boxAILoadingIndicator.d.ts +5 -1
- package/package.json +4 -4
|
@@ -1,71 +1,72 @@
|
|
|
1
1
|
import { Text as K } from "@box/blueprint-web";
|
|
2
2
|
import { AlertTriangle as Q } from "@box/blueprint-web-assets/icons/Line";
|
|
3
|
-
import { Gray65 as X, Size4 as
|
|
4
|
-
import
|
|
5
|
-
import { memo as Y, useState as Z, useEffect as
|
|
6
|
-
import { useIntl as
|
|
3
|
+
import { Gray65 as X, Size4 as N } from "@box/blueprint-web-assets/tokens/tokens";
|
|
4
|
+
import g from "clsx";
|
|
5
|
+
import { memo as Y, useState as Z, useEffect as I, useMemo as $ } from "react";
|
|
6
|
+
import { useIntl as oo } from "react-intl";
|
|
7
7
|
import { A as r } from "../../../../chunks/types.js";
|
|
8
|
-
import { injectInlineCitation as
|
|
9
|
-
import { MediaContainer as
|
|
10
|
-
import {
|
|
11
|
-
import {
|
|
12
|
-
import {
|
|
13
|
-
import {
|
|
14
|
-
import
|
|
15
|
-
import { References as
|
|
16
|
-
import { ThumbButtons as
|
|
17
|
-
import { jsxs as
|
|
18
|
-
import '../../../../styles/answer.css';const
|
|
19
|
-
answer:
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
8
|
+
import { injectInlineCitation as to } from "../../utils/inlineCitationsUtils.js";
|
|
9
|
+
import { MediaContainer as S } from "../common/media-container.js";
|
|
10
|
+
import { BoxAILoadingIndicator as no } from "../thinkingBubble/boxAILoadingIndicator.js";
|
|
11
|
+
import { AnswerContent as eo } from "./answer-content.js";
|
|
12
|
+
import { CopyButton as ro } from "./copy-button.js";
|
|
13
|
+
import { InlineError as so } from "./inline-error.js";
|
|
14
|
+
import _ from "./messages.js";
|
|
15
|
+
import { References as ao } from "./references.js";
|
|
16
|
+
import { ThumbButtons as io } from "./thumb-buttons.js";
|
|
17
|
+
import { jsxs as c, jsx as e } from "react/jsx-runtime";
|
|
18
|
+
import '../../../../styles/answer.css';const lo = "_answer_dkxyx_1", co = "_loadingContainer_dkxyx_5", uo = "_alertIcon_dkxyx_11", _o = "_error_dkxyx_14", fo = "_footer_dkxyx_18", mo = "_copyButtonContainer_dkxyx_24", ho = "_feedbackButtonsContainer_dkxyx_25", xo = "_shouldHaveMarginTop_dkxyx_29", Eo = "_shouldUseAnimation_dkxyx_32", po = "_shouldAnimateHeight_dkxyx_36", No = "_footerButtons_dkxyx_40", go = "_iconAvatar_dkxyx_46", Io = "_buttonsVisible_dkxyx_62", o = {
|
|
19
|
+
answer: lo,
|
|
20
|
+
loadingContainer: co,
|
|
21
|
+
alertIcon: uo,
|
|
22
|
+
error: _o,
|
|
23
|
+
footer: fo,
|
|
24
|
+
copyButtonContainer: mo,
|
|
25
|
+
feedbackButtonsContainer: ho,
|
|
26
|
+
shouldHaveMarginTop: xo,
|
|
27
|
+
shouldUseAnimation: Eo,
|
|
28
|
+
shouldAnimateHeight: po,
|
|
29
|
+
footerButtons: No,
|
|
30
|
+
iconAvatar: go,
|
|
31
|
+
buttonsVisible: Io
|
|
32
|
+
}, So = /* @__PURE__ */ new Set([r.RATE_LIMITING, r.NO_CONTENT, r.PRECONDITION_FAILED, r.GENERAL, r.AGENT_NOT_FOUND]), Go = /* @__PURE__ */ Y(({
|
|
32
33
|
answer: t,
|
|
33
|
-
citations:
|
|
34
|
-
error:
|
|
35
|
-
contentType:
|
|
34
|
+
citations: y,
|
|
35
|
+
error: n,
|
|
36
|
+
contentType: R,
|
|
36
37
|
hostAppName: d,
|
|
37
|
-
feedbackValue:
|
|
38
|
-
isCitationsEnabled:
|
|
38
|
+
feedbackValue: T,
|
|
39
|
+
isCitationsEnabled: k = !1,
|
|
39
40
|
isCompleted: s = !1,
|
|
40
|
-
isFeedbackEnabled:
|
|
41
|
-
isFeedbackFormEnabled:
|
|
42
|
-
isFeedbackTooltipOpen:
|
|
43
|
-
isInlineCitationsEnabled:
|
|
44
|
-
isLoading:
|
|
45
|
-
isMarkdownEnabled:
|
|
41
|
+
isFeedbackEnabled: A = !1,
|
|
42
|
+
isFeedbackFormEnabled: O,
|
|
43
|
+
isFeedbackTooltipOpen: f,
|
|
44
|
+
isInlineCitationsEnabled: m = !1,
|
|
45
|
+
isLoading: B = !1,
|
|
46
|
+
isMarkdownEnabled: b = !1,
|
|
46
47
|
items: a = [],
|
|
47
|
-
onAnswerCopy:
|
|
48
|
-
onCitationClick:
|
|
49
|
-
onFeedbackFormSubmit:
|
|
50
|
-
onFeedbackTooltipOpenChange:
|
|
51
|
-
prompt:
|
|
52
|
-
promptType:
|
|
48
|
+
onAnswerCopy: C,
|
|
49
|
+
onCitationClick: P,
|
|
50
|
+
onFeedbackFormSubmit: w,
|
|
51
|
+
onFeedbackTooltipOpenChange: M,
|
|
52
|
+
prompt: v,
|
|
53
|
+
promptType: D,
|
|
53
54
|
recordAction: i,
|
|
54
|
-
shouldFeedbackFormIncludeFeedbackText:
|
|
55
|
-
shouldFeedbackIncludePromptData:
|
|
56
|
-
useAnimation:
|
|
57
|
-
variant:
|
|
58
|
-
isReactMarkdownEnabled:
|
|
55
|
+
shouldFeedbackFormIncludeFeedbackText: F,
|
|
56
|
+
shouldFeedbackIncludePromptData: H,
|
|
57
|
+
useAnimation: L = !0,
|
|
58
|
+
variant: l = "modal",
|
|
59
|
+
isReactMarkdownEnabled: U,
|
|
59
60
|
setAnswerFeedback: G,
|
|
60
61
|
questionId: V
|
|
61
62
|
}) => {
|
|
62
|
-
const h =
|
|
63
|
+
const h = So.has(n), x = B && !t && !n, [j, z] = Z(s), {
|
|
63
64
|
formatMessage: u
|
|
64
|
-
} =
|
|
65
|
-
|
|
65
|
+
} = oo();
|
|
66
|
+
I(() => {
|
|
66
67
|
t && i && s && a.some((J) => t.includes(J.name)) && i({
|
|
67
68
|
action: "programmatic",
|
|
68
|
-
component:
|
|
69
|
+
component: l,
|
|
69
70
|
feature: "answers",
|
|
70
71
|
target: "links_detected",
|
|
71
72
|
data: {
|
|
@@ -74,98 +75,100 @@ import '../../../../styles/answer.css';const ct = "_answer_140hd_1", lt = "_aler
|
|
|
74
75
|
fileNameCount: a.length
|
|
75
76
|
}
|
|
76
77
|
});
|
|
77
|
-
}, [t,
|
|
78
|
+
}, [t, l, d, s, i, a]), I(() => {
|
|
78
79
|
setTimeout(() => z(s), 0);
|
|
79
80
|
}, [s]);
|
|
80
|
-
const
|
|
81
|
+
const E = () => /* @__PURE__ */ e(Q, {
|
|
81
82
|
className: o.alertIcon,
|
|
82
83
|
color: X,
|
|
83
84
|
"data-testid": "content-answers-error-alert-icon",
|
|
84
|
-
height:
|
|
85
|
+
height: N,
|
|
85
86
|
role: "presentation",
|
|
86
|
-
width:
|
|
87
|
-
}), W = () => /* @__PURE__ */
|
|
87
|
+
width: N
|
|
88
|
+
}), W = () => /* @__PURE__ */ c(K, {
|
|
88
89
|
as: "p",
|
|
89
90
|
className: o.error,
|
|
90
91
|
color: "textOnLightSecondary",
|
|
91
92
|
"data-testid": "content-answers-error",
|
|
92
93
|
variant: "caption",
|
|
93
|
-
children: [
|
|
94
|
-
}), q = () =>
|
|
95
|
-
className:
|
|
96
|
-
[o.buttonsVisible]:
|
|
94
|
+
children: [n === r.RESPONSE_INTERRUPTED && u(_.responseInterruptedError), n === r.RESPONSE_FAILED && u(_.responseFailedError), n === r.RESPONSE_STOPPED && u(_.responseStoppedError), n !== r.RESPONSE_STOPPED && E()]
|
|
95
|
+
}), q = () => n !== r.RESPONSE_STOPPED ? /* @__PURE__ */ c("div", {
|
|
96
|
+
className: g(o.footerButtons, "footer-buttons-container", {
|
|
97
|
+
[o.buttonsVisible]: f
|
|
97
98
|
}),
|
|
98
|
-
children: [
|
|
99
|
+
children: [A ? /* @__PURE__ */ e("div", {
|
|
99
100
|
className: o.feedbackButtonsContainer,
|
|
100
|
-
children: /* @__PURE__ */
|
|
101
|
-
feedbackValue:
|
|
101
|
+
children: /* @__PURE__ */ e(io, {
|
|
102
|
+
feedbackValue: T,
|
|
102
103
|
hostAppName: d,
|
|
103
|
-
isFeedbackFormEnabled:
|
|
104
|
-
isFeedbackTooltipOpen:
|
|
104
|
+
isFeedbackFormEnabled: O,
|
|
105
|
+
isFeedbackTooltipOpen: f,
|
|
105
106
|
items: a,
|
|
106
|
-
onFeedbackFormSubmit:
|
|
107
|
-
onFeedbackTooltipOpenChange:
|
|
108
|
-
prompt:
|
|
109
|
-
promptType:
|
|
107
|
+
onFeedbackFormSubmit: w,
|
|
108
|
+
onFeedbackTooltipOpenChange: M,
|
|
109
|
+
prompt: v,
|
|
110
|
+
promptType: D,
|
|
110
111
|
questionId: V,
|
|
111
112
|
recordAction: i,
|
|
112
|
-
response:
|
|
113
|
+
response: p,
|
|
113
114
|
setAnswerFeedback: G,
|
|
114
|
-
shouldFeedbackFormIncludeFeedbackText:
|
|
115
|
-
shouldFeedbackIncludePromptData:
|
|
116
|
-
variant:
|
|
115
|
+
shouldFeedbackFormIncludeFeedbackText: F,
|
|
116
|
+
shouldFeedbackIncludePromptData: H,
|
|
117
|
+
variant: l
|
|
117
118
|
})
|
|
118
|
-
}) : null, /* @__PURE__ */
|
|
119
|
+
}) : null, /* @__PURE__ */ e("div", {
|
|
119
120
|
className: o.copyButtonContainer,
|
|
120
|
-
children: /* @__PURE__ */
|
|
121
|
+
children: /* @__PURE__ */ e(ro, {
|
|
121
122
|
answer: t,
|
|
122
|
-
onAnswerCopy:
|
|
123
|
+
onAnswerCopy: C,
|
|
123
124
|
recordAction: i
|
|
124
125
|
})
|
|
125
126
|
})]
|
|
126
|
-
}) : t ? null :
|
|
127
|
+
}) : t ? null : E(), p = $(() => t && to(t, {
|
|
127
128
|
items: a,
|
|
128
129
|
isCompleted: s,
|
|
129
|
-
isInlineCitationsEnabled:
|
|
130
|
-
}), [t, a, s,
|
|
131
|
-
return /* @__PURE__ */
|
|
130
|
+
isInlineCitationsEnabled: m
|
|
131
|
+
}), [t, a, s, m]);
|
|
132
|
+
return /* @__PURE__ */ c("div", {
|
|
132
133
|
"aria-live": "polite",
|
|
133
134
|
className: o.answer,
|
|
134
135
|
"data-testid": "content-answers-answer",
|
|
135
|
-
children: [
|
|
136
|
+
children: [x && /* @__PURE__ */ e(no, {
|
|
137
|
+
className: o.loadingContainer
|
|
138
|
+
}), !h && !x && /* @__PURE__ */ e(S, {
|
|
136
139
|
className: "answer",
|
|
137
|
-
variant:
|
|
138
|
-
children: /* @__PURE__ */
|
|
139
|
-
isUsedInsideSidebar:
|
|
140
|
+
variant: l,
|
|
141
|
+
children: /* @__PURE__ */ c(S.Content, {
|
|
142
|
+
isUsedInsideSidebar: l === "sidebar",
|
|
140
143
|
variant: "answer",
|
|
141
|
-
children: [/* @__PURE__ */
|
|
142
|
-
answer:
|
|
143
|
-
isMarkdownEnabled:
|
|
144
|
-
isReactMarkdownEnabled:
|
|
145
|
-
variant:
|
|
146
|
-
}), s && /* @__PURE__ */
|
|
147
|
-
className:
|
|
144
|
+
children: [/* @__PURE__ */ e(eo, {
|
|
145
|
+
answer: p,
|
|
146
|
+
isMarkdownEnabled: b,
|
|
147
|
+
isReactMarkdownEnabled: U,
|
|
148
|
+
variant: l
|
|
149
|
+
}), s && /* @__PURE__ */ c("div", {
|
|
150
|
+
className: g(o.footer, {
|
|
148
151
|
[o.shouldHaveMarginTop]: t,
|
|
149
152
|
[o.shouldAnimateHeight]: j,
|
|
150
|
-
[o.shouldUseAnimation]:
|
|
153
|
+
[o.shouldUseAnimation]: L
|
|
151
154
|
}),
|
|
152
155
|
"data-testid": "content-answers-answer-footer",
|
|
153
|
-
children: [
|
|
154
|
-
citations:
|
|
155
|
-
onCitationClick:
|
|
156
|
+
children: [n && W(), k && !n && /* @__PURE__ */ e(ao, {
|
|
157
|
+
citations: y,
|
|
158
|
+
onCitationClick: P,
|
|
156
159
|
recordAction: i
|
|
157
160
|
}), q()]
|
|
158
161
|
})]
|
|
159
162
|
})
|
|
160
|
-
}), h && /* @__PURE__ */
|
|
161
|
-
contentType:
|
|
162
|
-
error:
|
|
163
|
+
}), h && /* @__PURE__ */ e(so, {
|
|
164
|
+
contentType: R,
|
|
165
|
+
error: n,
|
|
163
166
|
recordAction: i,
|
|
164
|
-
variant:
|
|
167
|
+
variant: l
|
|
165
168
|
})]
|
|
166
169
|
});
|
|
167
170
|
});
|
|
168
171
|
export {
|
|
169
|
-
|
|
170
|
-
|
|
172
|
+
Go as Answer,
|
|
173
|
+
Go as default
|
|
171
174
|
};
|
|
@@ -1,24 +1,31 @@
|
|
|
1
|
+
import a from "clsx";
|
|
1
2
|
import { jsxs as r, jsx as e } from "react/jsx-runtime";
|
|
2
|
-
import '../../../../styles/boxAILoadingIndicator.css';const
|
|
3
|
-
boxAILoadingIndicator:
|
|
4
|
-
ring:
|
|
5
|
-
ringTwo:
|
|
6
|
-
blueRing:
|
|
7
|
-
blueDraw:
|
|
8
|
-
blueFade:
|
|
9
|
-
blueRingTwo:
|
|
10
|
-
purpleRing:
|
|
11
|
-
purpleDraw:
|
|
12
|
-
purpleFade:
|
|
13
|
-
purpleRingTwo:
|
|
14
|
-
magentaRing:
|
|
15
|
-
magentaDraw:
|
|
16
|
-
magentaFade:
|
|
17
|
-
magentaRingTwo:
|
|
18
|
-
bgRings:
|
|
19
|
-
},
|
|
20
|
-
className:
|
|
3
|
+
import '../../../../styles/boxAILoadingIndicator.css';const n = "_boxAILoadingIndicator_ddl80_1", s = "_ring_ddl80_1", p = "_ringTwo_ddl80_11", c = "_blueRing_ddl80_18", d = "_blueDraw_ddl80_1", g = "_blueFade_ddl80_1", y = "_blueRingTwo_ddl80_22", _ = "_purpleRing_ddl80_25", m = "_purpleDraw_ddl80_1", u = "_purpleFade_ddl80_1", w = "_purpleRingTwo_ddl80_29", x = "_magentaRing_ddl80_32", f = "_magentaDraw_ddl80_1", h = "_magentaFade_ddl80_1", R = "_magentaRingTwo_ddl80_36", b = "_bgRings_ddl80_39", o = {
|
|
4
|
+
boxAILoadingIndicator: n,
|
|
5
|
+
ring: s,
|
|
6
|
+
ringTwo: p,
|
|
7
|
+
blueRing: c,
|
|
8
|
+
blueDraw: d,
|
|
9
|
+
blueFade: g,
|
|
10
|
+
blueRingTwo: y,
|
|
11
|
+
purpleRing: _,
|
|
12
|
+
purpleDraw: m,
|
|
13
|
+
purpleFade: u,
|
|
14
|
+
purpleRingTwo: w,
|
|
15
|
+
magentaRing: x,
|
|
16
|
+
magentaDraw: f,
|
|
17
|
+
magentaFade: h,
|
|
18
|
+
magentaRingTwo: R,
|
|
19
|
+
bgRings: b
|
|
20
|
+
}, F = ({
|
|
21
|
+
className: t,
|
|
22
|
+
height: l = 24,
|
|
23
|
+
width: i = 24
|
|
24
|
+
}) => /* @__PURE__ */ r("svg", {
|
|
25
|
+
className: a(o.boxAILoadingIndicator, t),
|
|
26
|
+
height: l,
|
|
21
27
|
viewBox: "0 0 400 400",
|
|
28
|
+
width: i,
|
|
22
29
|
xmlns: "http://www.w3.org/2000/svg",
|
|
23
30
|
children: [/* @__PURE__ */ r("defs", {
|
|
24
31
|
children: [/* @__PURE__ */ r("linearGradient", {
|
|
@@ -230,6 +237,6 @@ import '../../../../styles/boxAILoadingIndicator.css';const t = "_boxAILoadingIn
|
|
|
230
237
|
})]
|
|
231
238
|
});
|
|
232
239
|
export {
|
|
233
|
-
|
|
234
|
-
|
|
240
|
+
F as BoxAILoadingIndicator,
|
|
241
|
+
F as default
|
|
235
242
|
};
|
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { useState as b, useId as
|
|
3
|
-
import { useIntl as
|
|
4
|
-
import { Text as
|
|
1
|
+
import C from "clsx";
|
|
2
|
+
import { useState as b, useId as k, useRef as B, useEffect as u, useCallback as _ } from "react";
|
|
3
|
+
import { useIntl as M } from "react-intl";
|
|
4
|
+
import { Text as w, Tooltip as j } from "@box/blueprint-web";
|
|
5
5
|
import { ChevronRight as X, BoxAi as Y } from "@box/blueprint-web-assets/icons/Medium";
|
|
6
6
|
import { BlackOpacity50 as G } from "@box/blueprint-web-assets/tokens/tokens";
|
|
7
7
|
import U from "../common/markdown-react.js";
|
|
8
8
|
import { BoxAILoadingIndicator as V } from "./boxAILoadingIndicator.js";
|
|
9
9
|
import l from "./messages.js";
|
|
10
|
-
import { jsxs as g, jsx as
|
|
11
|
-
import '../../../../styles/thinkingBubble.css';const q = "
|
|
10
|
+
import { jsxs as g, jsx as t } from "react/jsx-runtime";
|
|
11
|
+
import '../../../../styles/thinkingBubble.css';const q = "_thinkingBubbleContainer_168nh_2", z = "_thinkingBubbleHeader_168nh_8", F = "_headerLeft_168nh_20", J = "_thinkingBubbleLogo_168nh_25", K = "_chevronIcon_168nh_29", Q = "_chevronRotated_168nh_34", W = "_chevronDisabled_168nh_37", Z = "_logoState_168nh_41", $ = "_headerExpanded_168nh_54", ee = "_thinkingBubbleContent_168nh_59", ne = "_scrollableContainer_168nh_67", te = "_contentExpanded_168nh_85", oe = "_sidebar_168nh_91", re = "_pillState_168nh_109", e = {
|
|
12
12
|
thinkingBubbleContainer: q,
|
|
13
13
|
thinkingBubbleHeader: z,
|
|
14
14
|
headerLeft: F,
|
|
@@ -19,97 +19,97 @@ import '../../../../styles/thinkingBubble.css';const q = "_thinkingBubbleContain
|
|
|
19
19
|
logoState: Z,
|
|
20
20
|
headerExpanded: $,
|
|
21
21
|
thinkingBubbleContent: ee,
|
|
22
|
-
scrollableContainer:
|
|
23
|
-
contentExpanded:
|
|
22
|
+
scrollableContainer: ne,
|
|
23
|
+
contentExpanded: te,
|
|
24
24
|
sidebar: oe,
|
|
25
|
-
pillState:
|
|
26
|
-
},
|
|
25
|
+
pillState: re
|
|
26
|
+
}, ae = 5, se = 50, ie = 300, le = 120, xe = ({
|
|
27
27
|
content: s,
|
|
28
|
-
className:
|
|
28
|
+
className: v,
|
|
29
29
|
variant: L = "modal",
|
|
30
|
-
isThinkingComplete:
|
|
30
|
+
isThinkingComplete: n = !1,
|
|
31
31
|
...I
|
|
32
32
|
}) => {
|
|
33
33
|
const {
|
|
34
34
|
formatMessage: i
|
|
35
|
-
} =
|
|
35
|
+
} = M(), S = L === "sidebar", [c, h] = b(!1), [a, f] = b(!1), [d, H] = b(!1), p = k(), A = k(), o = B(null), m = B(!1);
|
|
36
36
|
u(() => {
|
|
37
37
|
if (s) {
|
|
38
|
-
const
|
|
39
|
-
return () =>
|
|
38
|
+
const r = [setTimeout(() => H(!0), se), setTimeout(() => h(!0), ie)];
|
|
39
|
+
return () => r.forEach(clearTimeout);
|
|
40
40
|
}
|
|
41
41
|
}, [s]);
|
|
42
|
-
const
|
|
43
|
-
o.current && s && c && !
|
|
42
|
+
const E = _(() => {
|
|
43
|
+
o.current && s && c && !m.current && o.current.scrollTo({
|
|
44
44
|
top: o.current.scrollHeight,
|
|
45
45
|
behavior: "smooth"
|
|
46
46
|
});
|
|
47
47
|
}, [s, c]);
|
|
48
48
|
u(() => {
|
|
49
|
-
|
|
50
|
-
}, [
|
|
51
|
-
const
|
|
49
|
+
E();
|
|
50
|
+
}, [E]);
|
|
51
|
+
const D = _(() => {
|
|
52
52
|
if (o.current) {
|
|
53
|
-
const
|
|
54
|
-
|
|
53
|
+
const r = o.current, y = r.scrollTop + r.clientHeight >= r.scrollHeight - ae;
|
|
54
|
+
m.current = !y;
|
|
55
55
|
}
|
|
56
|
-
}, []),
|
|
57
|
-
const
|
|
58
|
-
f(
|
|
56
|
+
}, []), x = _(() => o.current ? o.current.scrollHeight > le : !1, []), N = () => {
|
|
57
|
+
const r = !a;
|
|
58
|
+
f(r), n && h(r);
|
|
59
59
|
};
|
|
60
60
|
u(() => {
|
|
61
|
-
|
|
62
|
-
}, [
|
|
63
|
-
const
|
|
61
|
+
n && (f(!1), h(!1));
|
|
62
|
+
}, [n]);
|
|
63
|
+
const R = () => n ? /* @__PURE__ */ t(Y, {
|
|
64
64
|
color: G,
|
|
65
65
|
height: 24,
|
|
66
66
|
width: 24
|
|
67
|
-
}) : /* @__PURE__ */
|
|
67
|
+
}) : /* @__PURE__ */ t(V, {}), O = !x() && !n, T = C(e.thinkingBubbleContainer, {
|
|
68
68
|
[e.logoState]: !d,
|
|
69
69
|
[e.headerExpanded]: d,
|
|
70
|
-
[e.contentExpanded]:
|
|
71
|
-
[e.pillState]:
|
|
70
|
+
[e.contentExpanded]: a,
|
|
71
|
+
[e.pillState]: n && !a,
|
|
72
72
|
[e.sidebar]: S
|
|
73
|
-
},
|
|
73
|
+
}, v), P = !x() && !n;
|
|
74
74
|
return /* @__PURE__ */ g("div", {
|
|
75
|
-
className:
|
|
75
|
+
className: T,
|
|
76
76
|
...I,
|
|
77
77
|
children: [/* @__PURE__ */ g("button", {
|
|
78
|
-
"aria-controls":
|
|
79
|
-
"aria-expanded": c && (!
|
|
78
|
+
"aria-controls": A,
|
|
79
|
+
"aria-expanded": c && (!n || a),
|
|
80
80
|
"aria-labelledby": p,
|
|
81
81
|
className: e.thinkingBubbleHeader,
|
|
82
|
-
disabled:
|
|
83
|
-
onClick:
|
|
82
|
+
disabled: P,
|
|
83
|
+
onClick: N,
|
|
84
84
|
type: "button",
|
|
85
85
|
"data-target-id": "button-thinkingCompleted|thinkingInProgress|thinkingCompleted|thinkingInProgress|collapseThinkingContent|expandThinkingContent",
|
|
86
86
|
children: [/* @__PURE__ */ g("div", {
|
|
87
87
|
className: e.headerLeft,
|
|
88
|
-
children: [/* @__PURE__ */
|
|
88
|
+
children: [/* @__PURE__ */ t("div", {
|
|
89
89
|
className: e.thinkingBubbleLogo,
|
|
90
|
-
children:
|
|
91
|
-
}), d && /* @__PURE__ */
|
|
90
|
+
children: R()
|
|
91
|
+
}), d && /* @__PURE__ */ t(w, {
|
|
92
92
|
as: "h3",
|
|
93
|
-
color:
|
|
93
|
+
color: n ? "textOnLightSecondary" : "textOnLightDefault",
|
|
94
94
|
id: p,
|
|
95
95
|
variant: "titleMedium",
|
|
96
|
-
children: i(
|
|
96
|
+
children: i(n ? l.thinkingCompleted : l.thinkingInProgress)
|
|
97
97
|
})]
|
|
98
|
-
}), d && /* @__PURE__ */
|
|
99
|
-
content: i(
|
|
100
|
-
children: /* @__PURE__ */
|
|
98
|
+
}), d && /* @__PURE__ */ t(j, {
|
|
99
|
+
content: i(a ? l.collapseThinkingContent : l.expandThinkingContent),
|
|
100
|
+
children: /* @__PURE__ */ t(X, {
|
|
101
101
|
"aria-hidden": "true",
|
|
102
|
-
className:
|
|
102
|
+
className: C(e.chevronIcon, a && e.chevronRotated, O && e.chevronDisabled)
|
|
103
103
|
})
|
|
104
104
|
})]
|
|
105
|
-
}), c && (!
|
|
105
|
+
}), c && (!n || a) && /* @__PURE__ */ t("div", {
|
|
106
106
|
className: e.thinkingBubbleContent,
|
|
107
|
-
children: /* @__PURE__ */
|
|
107
|
+
children: /* @__PURE__ */ t("div", {
|
|
108
108
|
ref: o,
|
|
109
109
|
"aria-label": i(l.thinkingContentScrollableArea),
|
|
110
110
|
className: e.scrollableContainer,
|
|
111
|
-
onScroll:
|
|
112
|
-
children: /* @__PURE__ */
|
|
111
|
+
onScroll: D,
|
|
112
|
+
children: /* @__PURE__ */ t(U, {
|
|
113
113
|
children: s
|
|
114
114
|
})
|
|
115
115
|
})
|
|
@@ -117,6 +117,6 @@ import '../../../../styles/thinkingBubble.css';const q = "_thinkingBubbleContain
|
|
|
117
117
|
});
|
|
118
118
|
};
|
|
119
119
|
export {
|
|
120
|
-
|
|
121
|
-
|
|
120
|
+
xe as ThinkingBubble,
|
|
121
|
+
xe as default
|
|
122
122
|
};
|
package/dist/styles/answer.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._answer_dkxyx_1{white-space:pre-wrap;border:none}._answer_dkxyx_1 ._loadingContainer_dkxyx_5{box-sizing:border-box;width:var(--size-15);height:var(--size-15);padding:18px}._answer_dkxyx_1 ._alertIcon_dkxyx_11{margin-left:.5rem}._answer_dkxyx_1 ._error_dkxyx_14{display:flex;align-items:center}._answer_dkxyx_1 ._footer_dkxyx_18{display:flex;align-items:center;justify-content:space-between;height:1.5rem}._answer_dkxyx_1 ._footer_dkxyx_18 ._copyButtonContainer_dkxyx_24,._answer_dkxyx_1 ._footer_dkxyx_18 ._feedbackButtonsContainer_dkxyx_25{opacity:0;transition:opacity .3s}._answer_dkxyx_1 ._footer_dkxyx_18._shouldHaveMarginTop_dkxyx_29{margin-top:.75rem}._answer_dkxyx_1 ._footer_dkxyx_18._shouldUseAnimation_dkxyx_32{max-height:0;overflow-y:hidden}._answer_dkxyx_1 ._footer_dkxyx_18._shouldUseAnimation_dkxyx_32._shouldAnimateHeight_dkxyx_36{max-height:200px;transition:max-height 1s ease-in}._answer_dkxyx_1 ._footer_dkxyx_18 ._footerButtons_dkxyx_40,._answer_dkxyx_1 ._footer_dkxyx_18 ._feedbackButtonsContainer_dkxyx_25{display:flex;gap:.25rem;margin-inline-start:auto}._answer_dkxyx_1 ._iconAvatar_dkxyx_46{display:flex;align-items:center;justify-content:center;width:var(--size-16);height:var(--size-16);background-color:#faf5fe;border-radius:50%}@media (max-width: 374px){._answer_dkxyx_1 ._iconAvatar_dkxyx_46{width:var(--size-6);height:var(--size-6)}}._answer_dkxyx_1:hover ._copyButtonContainer_dkxyx_24,._answer_dkxyx_1:hover ._feedbackButtonsContainer_dkxyx_25,._answer_dkxyx_1 ._copyButtonContainer_dkxyx_24:focus-within,._answer_dkxyx_1 ._feedbackButtonsContainer_dkxyx_25:focus-within,._answer_dkxyx_1 ._footerButtons_dkxyx_40._buttonsVisible_dkxyx_62 ._copyButtonContainer_dkxyx_24,._answer_dkxyx_1 ._footerButtons_dkxyx_40._buttonsVisible_dkxyx_62 ._feedbackButtonsContainer_dkxyx_25{opacity:1}._answer_dkxyx_1:hover ._copyButtonContainer_dkxyx_24>button,._answer_dkxyx_1:hover ._feedbackButtonsContainer_dkxyx_25>button,._answer_dkxyx_1 ._copyButtonContainer_dkxyx_24:focus-within>button,._answer_dkxyx_1 ._feedbackButtonsContainer_dkxyx_25:focus-within>button,._answer_dkxyx_1 ._footerButtons_dkxyx_40._buttonsVisible_dkxyx_62 ._copyButtonContainer_dkxyx_24>button,._answer_dkxyx_1 ._footerButtons_dkxyx_40._buttonsVisible_dkxyx_62 ._feedbackButtonsContainer_dkxyx_25>button{outline-offset:-2px}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._thinkingBubbleContainer_168nh_2{font-size:var(--body-default-font-size);border:1px solid var(--black-opacity-08);transition:width .3s ease,height .3s ease}._thinkingBubbleHeader_168nh_8{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--space-4) var(--space-4);background:none;border:none}._thinkingBubbleHeader_168nh_8:not([disabled]){cursor:pointer}._thinkingBubbleHeader_168nh_8 ._headerLeft_168nh_20{display:flex;gap:var(--space-4);align-items:center}._thinkingBubbleHeader_168nh_8 ._thinkingBubbleLogo_168nh_25{width:var(--size-6);height:var(--size-6)}._thinkingBubbleHeader_168nh_8 ._chevronIcon_168nh_29{width:var(--size-4);height:var(--size-4);opacity:1}._thinkingBubbleHeader_168nh_8 ._chevronIcon_168nh_29._chevronRotated_168nh_34{transform:rotate(90deg)}._thinkingBubbleHeader_168nh_8 ._chevronIcon_168nh_29._chevronDisabled_168nh_37{opacity:0}._logoState_168nh_41{display:flex;align-items:center;justify-content:center;width:var(--size-15);height:var(--size-15);border-radius:var(--radius-half)}._logoState_168nh_41 ._thinkingBubbleHeader_168nh_8{justify-content:center;padding:0}._headerExpanded_168nh_54{width:100%;border-radius:var(--radius-8)}._thinkingBubbleContent_168nh_59{position:relative;max-height:140px;padding:0 var(--space-4) var(--space-2) var(--space-14);opacity:1;transition:opacity .15s ease,max-height .15s ease}._scrollableContainer_168nh_67{max-height:120px;padding-right:var(--space-3);overflow-y:auto;scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:transparent transparent}._scrollableContainer_168nh_67::-webkit-scrollbar-track,._scrollableContainer_168nh_67::-webkit-scrollbar-thumb{background:transparent}._scrollableContainer_168nh_67:hover{scrollbar-color:rgba(0,0,0,.3) transparent}._scrollableContainer_168nh_67:hover::-webkit-scrollbar-thumb{background:#0000004d}._contentExpanded_168nh_85 ._thinkingBubbleContent_168nh_59{max-height:420px}._contentExpanded_168nh_85 ._scrollableContainer_168nh_67{max-height:400px}._contentExpanded_168nh_85._sidebar_168nh_91 ._thinkingBubbleContent_168nh_59{max-height:320px}._contentExpanded_168nh_85._sidebar_168nh_91 ._scrollableContainer_168nh_67{max-height:300px}._thinkingBubbleContent_168nh_59:before{position:absolute;top:0;right:var(--space-8);bottom:0;left:var(--space-9);background:linear-gradient(to bottom,white 0%,transparent 8px,transparent calc(100% - 16px),white 100%);content:"";pointer-events:none}._pillState_168nh_109{max-width:fit-content;opacity:1;transition:width .3s ease,height .3s ease}._pillState_168nh_109 ._thinkingBubbleHeader_168nh_8{gap:var(--space-2)}
|
|
@@ -1,3 +1,7 @@
|
|
|
1
|
-
declare const BoxAILoadingIndicator: (
|
|
1
|
+
declare const BoxAILoadingIndicator: ({ className, height, width, }: {
|
|
2
|
+
className?: string;
|
|
3
|
+
height?: number;
|
|
4
|
+
width?: number;
|
|
5
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
|
2
6
|
export { BoxAILoadingIndicator };
|
|
3
7
|
export default BoxAILoadingIndicator;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@box/box-ai-content-answers",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.157.0",
|
|
4
4
|
"peerDependencies": {
|
|
5
5
|
"@box/blueprint-web": "^7.8.0",
|
|
6
6
|
"@box/blueprint-web-assets": "^4.56.1",
|
|
@@ -17,10 +17,10 @@
|
|
|
17
17
|
},
|
|
18
18
|
"devDependencies": {
|
|
19
19
|
"@box/babel-plugin-target-attributes": "1.3.0",
|
|
20
|
-
"@box/blueprint-web": "^12.
|
|
20
|
+
"@box/blueprint-web": "^12.78.0",
|
|
21
21
|
"@box/blueprint-web-assets": "^4.69.0",
|
|
22
|
-
"@box/box-ai-agent-selector": "^0.63.
|
|
23
|
-
"@box/item-icon": "^0.27.
|
|
22
|
+
"@box/box-ai-agent-selector": "^0.63.7",
|
|
23
|
+
"@box/item-icon": "^0.27.7",
|
|
24
24
|
"@box/storybook-utils": "^0.14.5",
|
|
25
25
|
"@testing-library/react": "^15.0.6",
|
|
26
26
|
"react": "^18.3.0",
|