@box/box-ai-content-answers 0.61.0 → 0.62.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.
|
@@ -1,105 +1,107 @@
|
|
|
1
1
|
import "../../../../styles/answer.css";
|
|
2
|
-
import { useBreakpoint as
|
|
3
|
-
import { BoxAi as
|
|
4
|
-
import { Size5 as
|
|
5
|
-
import
|
|
6
|
-
import * as
|
|
7
|
-
import { useIntl as
|
|
8
|
-
import { A as
|
|
9
|
-
import { MediaContainer as
|
|
2
|
+
import { useBreakpoint as k, Breakpoint as z, Text as b } from "@box/blueprint-web";
|
|
3
|
+
import { BoxAi as M, AlertTriangle as H } from "@box/blueprint-web-assets/icons/Line";
|
|
4
|
+
import { Size5 as L, Size6 as x, Gray65 as D, Size4 as f } from "@box/blueprint-web-assets/tokens/tokens";
|
|
5
|
+
import F from "clsx";
|
|
6
|
+
import * as c from "react";
|
|
7
|
+
import { useIntl as U } from "react-intl";
|
|
8
|
+
import { A as o } from "../../../../chunks/types.js";
|
|
9
|
+
import { MediaContainer as m } from "../common/media-container.js";
|
|
10
10
|
import { AnswerContent as y } from "./answer-content.js";
|
|
11
|
-
import { CopyButton as
|
|
12
|
-
import { InlineError as
|
|
13
|
-
import { LoadingElement as
|
|
11
|
+
import { CopyButton as B } from "./copy-button.js";
|
|
12
|
+
import { InlineError as C } from "./inline-error.js";
|
|
13
|
+
import { LoadingElement as G } from "./loading-element.js";
|
|
14
14
|
import d from "./messages.js";
|
|
15
|
-
import { References as
|
|
16
|
-
import { jsxs as
|
|
17
|
-
const
|
|
18
|
-
answer:
|
|
19
|
-
alertIcon:
|
|
20
|
-
error:
|
|
21
|
-
footer:
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
15
|
+
import { References as j } from "./references.js";
|
|
16
|
+
import { jsxs as s, jsx as t } from "react/jsx-runtime";
|
|
17
|
+
const W = "_answer_5bwzk_1", q = "_alertIcon_5bwzk_4", J = "_error_5bwzk_7", K = "_footer_5bwzk_11", Q = "_shouldHaveMarginTop_5bwzk_17", V = "_shouldUseAnimation_5bwzk_20", X = "_shouldAnimateHeight_5bwzk_24", Y = "_iconAvatar_5bwzk_28", r = {
|
|
18
|
+
answer: W,
|
|
19
|
+
alertIcon: q,
|
|
20
|
+
error: J,
|
|
21
|
+
footer: K,
|
|
22
|
+
shouldHaveMarginTop: Q,
|
|
23
|
+
shouldUseAnimation: V,
|
|
24
|
+
shouldAnimateHeight: X,
|
|
25
|
+
iconAvatar: Y
|
|
26
|
+
}, Z = /* @__PURE__ */ new Set([o.RATE_LIMITING, o.NO_CONTENT, o.PRECONDITION_FAILED, o.GENERAL]), fe = /* @__PURE__ */ c.memo(({
|
|
27
|
+
answer: n,
|
|
28
|
+
citations: u,
|
|
29
|
+
error: e,
|
|
29
30
|
contentType: S,
|
|
30
|
-
isCitationsEnabled:
|
|
31
|
-
isCompleted:
|
|
32
|
-
isLoading:
|
|
31
|
+
isCitationsEnabled: A = !1,
|
|
32
|
+
isCompleted: a = !1,
|
|
33
|
+
isLoading: w = !1,
|
|
33
34
|
isMarkdownEnabled: I = !1,
|
|
34
35
|
onCitationClick: N,
|
|
35
36
|
onAnswerCopy: R,
|
|
36
37
|
recordAction: i,
|
|
37
|
-
useAnimation:
|
|
38
|
+
useAnimation: g = !0
|
|
38
39
|
}) => {
|
|
39
|
-
const
|
|
40
|
-
formatMessage:
|
|
41
|
-
} =
|
|
42
|
-
|
|
43
|
-
setTimeout(() =>
|
|
44
|
-
}, [
|
|
45
|
-
const
|
|
40
|
+
const p = Z.has(e), E = w && !n && !e, [T, v] = c.useState(a), {
|
|
41
|
+
formatMessage: l
|
|
42
|
+
} = U(), _ = k() === z.Small ? L : x;
|
|
43
|
+
c.useEffect(() => {
|
|
44
|
+
setTimeout(() => v(a), 0);
|
|
45
|
+
}, [a]);
|
|
46
|
+
const h = () => /* @__PURE__ */ t(H, {
|
|
47
|
+
className: r.alertIcon,
|
|
48
|
+
color: D,
|
|
49
|
+
"data-testid": "content-answers-error-alert-icon",
|
|
50
|
+
height: f,
|
|
51
|
+
role: "presentation",
|
|
52
|
+
width: f
|
|
53
|
+
}), O = () => /* @__PURE__ */ s(b, {
|
|
46
54
|
as: "p",
|
|
47
55
|
className: r.error,
|
|
48
56
|
color: "textOnLightSecondary",
|
|
49
57
|
"data-testid": "content-answers-error",
|
|
50
58
|
variant: "caption",
|
|
51
|
-
children: [
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
})]
|
|
59
|
-
});
|
|
60
|
-
return /* @__PURE__ */ n("div", {
|
|
59
|
+
children: [e === o.RESPONSE_INTERRUPTED && l(d.responseInterruptedError), e === o.RESPONSE_FAILED && l(d.responseFailedError), e === o.RESPONSE_STOPPED && l(d.responseStoppedError), e !== o.RESPONSE_STOPPED && h()]
|
|
60
|
+
}), P = () => e !== o.RESPONSE_STOPPED ? /* @__PURE__ */ t(B, {
|
|
61
|
+
answer: n,
|
|
62
|
+
onAnswerCopy: R,
|
|
63
|
+
recordAction: i
|
|
64
|
+
}) : n ? null : h();
|
|
65
|
+
return /* @__PURE__ */ s("div", {
|
|
61
66
|
"aria-live": "polite",
|
|
62
67
|
className: r.answer,
|
|
63
68
|
"data-testid": "content-answers-answer",
|
|
64
|
-
children: [!
|
|
65
|
-
children: [/* @__PURE__ */
|
|
66
|
-
children: /* @__PURE__ */
|
|
69
|
+
children: [!p && !E && /* @__PURE__ */ s(m, {
|
|
70
|
+
children: [/* @__PURE__ */ t(m.Figure, {
|
|
71
|
+
children: /* @__PURE__ */ t("div", {
|
|
67
72
|
className: r.iconAvatar,
|
|
68
|
-
children: /* @__PURE__ */
|
|
73
|
+
children: /* @__PURE__ */ t(M, {
|
|
69
74
|
height: _,
|
|
70
75
|
role: "presentation",
|
|
71
76
|
width: _
|
|
72
77
|
})
|
|
73
78
|
})
|
|
74
|
-
}), /* @__PURE__ */
|
|
75
|
-
children: [/* @__PURE__ */
|
|
76
|
-
answer:
|
|
79
|
+
}), /* @__PURE__ */ s(m.Content, {
|
|
80
|
+
children: [/* @__PURE__ */ t(y, {
|
|
81
|
+
answer: n,
|
|
77
82
|
isMarkdownEnabled: I
|
|
78
|
-
}),
|
|
79
|
-
className:
|
|
80
|
-
[r.
|
|
81
|
-
[r.shouldAnimateHeight]:
|
|
83
|
+
}), a && /* @__PURE__ */ s("div", {
|
|
84
|
+
className: F(r.footer, {
|
|
85
|
+
[r.shouldHaveMarginTop]: n,
|
|
86
|
+
[r.shouldAnimateHeight]: T,
|
|
87
|
+
[r.shouldUseAnimation]: g
|
|
82
88
|
}),
|
|
83
89
|
"data-testid": "content-answers-answer-footer",
|
|
84
|
-
children: [
|
|
85
|
-
citations:
|
|
90
|
+
children: [e && O(), A && !e && /* @__PURE__ */ t(j, {
|
|
91
|
+
citations: u,
|
|
86
92
|
onCitationClick: N,
|
|
87
93
|
recordAction: i
|
|
88
|
-
}),
|
|
89
|
-
answer: a,
|
|
90
|
-
onAnswerCopy: R,
|
|
91
|
-
recordAction: i
|
|
92
|
-
})]
|
|
94
|
+
}), P()]
|
|
93
95
|
})]
|
|
94
96
|
})]
|
|
95
|
-
}),
|
|
97
|
+
}), p && /* @__PURE__ */ t(C, {
|
|
96
98
|
contentType: S,
|
|
97
|
-
error:
|
|
99
|
+
error: e,
|
|
98
100
|
recordAction: i
|
|
99
|
-
}),
|
|
101
|
+
}), E && /* @__PURE__ */ t(G, {})]
|
|
100
102
|
});
|
|
101
103
|
});
|
|
102
104
|
export {
|
|
103
|
-
|
|
104
|
-
|
|
105
|
+
fe as Answer,
|
|
106
|
+
fe as default
|
|
105
107
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@box/box-ai-content-answers",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.62.0",
|
|
4
4
|
"peerDependencies": {
|
|
5
5
|
"@box/blueprint-web": "^7.8.0",
|
|
6
6
|
"@box/blueprint-web-assets": "^4.16.0",
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
"remarkable": "^2.0.1"
|
|
14
14
|
},
|
|
15
15
|
"devDependencies": {
|
|
16
|
-
"@box/blueprint-web": "^8.1.
|
|
16
|
+
"@box/blueprint-web": "^8.1.1",
|
|
17
17
|
"@box/blueprint-web-assets": "^4.28.0",
|
|
18
18
|
"@box/storybook-utils": "^0.7.0",
|
|
19
19
|
"@testing-library/react": "^15.0.6",
|
|
@@ -52,5 +52,5 @@
|
|
|
52
52
|
"**/*.css"
|
|
53
53
|
],
|
|
54
54
|
"license": "SEE LICENSE IN LICENSE",
|
|
55
|
-
"gitHead": "
|
|
55
|
+
"gitHead": "04ed35c59eefe989e527ecd06e3107144d332781"
|
|
56
56
|
}
|
package/styles/answer.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._answer_5bwzk_1{white-space:pre-wrap}._answer_5bwzk_1 ._alertIcon_5bwzk_4{margin-left:.5rem}._answer_5bwzk_1 ._error_5bwzk_7{display:flex;align-items:center}._answer_5bwzk_1 ._footer_5bwzk_11{height:1.5rem;display:flex;justify-content:space-between;align-items:center}._answer_5bwzk_1 ._footer_5bwzk_11._shouldHaveMarginTop_5bwzk_17{margin-top:.75rem}._answer_5bwzk_1 ._footer_5bwzk_11._shouldUseAnimation_5bwzk_20{max-height:0;overflow-y:hidden}._answer_5bwzk_1 ._footer_5bwzk_11._shouldUseAnimation_5bwzk_20._shouldAnimateHeight_5bwzk_24{max-height:200px;transition:max-height 1s ease-in}._answer_5bwzk_1 ._iconAvatar_5bwzk_28{display:flex;align-items:center;justify-content:center;width:var(--size-8);height:var(--size-8);border-radius:50%}@media (max-width: 374px){._answer_5bwzk_1 ._iconAvatar_5bwzk_28{width:var(--size-6);height:var(--size-6)}}
|
|
@@ -22,4 +22,5 @@ export declare const answerWithLargeTable = "\n| English | Spanish |
|
|
|
22
22
|
export declare const answerWithTable = "\n| English | Spanish | Color |\n|---------------|---------------|-------------|\n| Apple | Manzana | Red |\n| Banana | Pl\u00E1tano | Yellow |\n| Orange | Naranja | Orange |\n| Grape | Uva | Purple |\n| Strawberry | Fresa | Red |\n| Blueberry | Ar\u00E1ndano | Blue |\n| Lemon | Lim\u00F3n | Yellow |\n| Pineapple | Pi\u00F1a | Brown/Yellow|\n| Watermelon | Sand\u00EDa | Green/Red |\n| Cherry | Cereza | Red |\n";
|
|
23
23
|
export declare const answerWithCodeBlocks = "\nCode Blocks\n```html\n<div>\n <p>This is a paragraph inside a <div> block.</p>\n</div>\n```\n\n```\nfunction greet(name) {\n console.log('Hello, ' + name + '!');\n}\n\ngreet('World');\n```\n\n```c++\n#include <iostream>\n\nint main() {\n std::cout << \"Hello, world! This is a long line that will cause overflow in the code block when displayed on a narrow screen or container.\" << std::endl;\n return 0;\n}\n```\n";
|
|
24
24
|
export declare const DefaultAnswer: (props: AnswerProps) => import("react/jsx-runtime").JSX.Element;
|
|
25
|
+
export declare const StoppedAnswer: (props: AnswerProps) => import("react/jsx-runtime").JSX.Element;
|
|
25
26
|
export declare const WithUpdatedAnswer: (props: AnswerProps) => import("react/jsx-runtime").JSX.Element;
|