@box/box-ai-content-answers 1.0.2 → 1.1.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.
Files changed (18) hide show
  1. package/dist/chunks/types.js +15 -12
  2. package/dist/esm/index.js +19 -18
  3. package/dist/esm/lib/components/answer/citation.js +37 -35
  4. package/dist/esm/lib/components/answer/references.js +24 -22
  5. package/dist/esm/lib/components/api-wrapper/utils/format.js +6 -5
  6. package/dist/esm/lib/components/common/mock-data.js +19 -17
  7. package/dist/esm/lib/components/thinkingBubble/boxAILoadingIndicator.js +138 -96
  8. package/dist/i18n/en-CA.js +1 -1
  9. package/dist/i18n/en-CA.properties +1 -1
  10. package/dist/i18n/en-x-pseudo.js +88 -88
  11. package/dist/i18n/en-x-pseudo.properties +88 -88
  12. package/dist/i18n/ja-JP.js +1 -1
  13. package/dist/i18n/ja-JP.properties +1 -1
  14. package/dist/types/lib/components/answer/citation.d.ts +3 -2
  15. package/dist/types/lib/components/answer/stories/shared.d.ts +8 -0
  16. package/dist/types/lib/types.d.ts +4 -0
  17. package/package.json +4 -4
  18. package/dist/styles/boxAILoadingIndicator.css +0 -1
package/dist/esm/lib/components/thinkingBubble/boxAILoadingIndicator.js CHANGED
@@ -1,195 +1,237 @@
1
- import s from "clsx";
2
- import { useIntl as n } from "react-intl";
3
- import p from "../answer/messages.js";
4
- import { jsxs as r, jsx as e } from "react/jsx-runtime";
5
- import '../../../../styles/boxAILoadingIndicator.css';const c = "_boxAILoadingIndicator_ddl80_1", d = "_ring_ddl80_1", g = "_ringTwo_ddl80_11", m = "_blueRing_ddl80_18", y = "_blueDraw_ddl80_1", u = "_blueFade_ddl80_1", _ = "_blueRingTwo_ddl80_22", w = "_purpleRing_ddl80_25", x = "_purpleDraw_ddl80_1", f = "_purpleFade_ddl80_1", h = "_purpleRingTwo_ddl80_29", R = "_magentaRing_ddl80_32", b = "_magentaDraw_ddl80_1", T = "_magentaFade_ddl80_1", $ = "_magentaRingTwo_ddl80_36", F = "_bgRings_ddl80_39", o = {
6
- boxAILoadingIndicator: c,
7
- ring: d,
8
- ringTwo: g,
9
- blueRing: m,
10
- blueDraw: y,
11
- blueFade: u,
12
- blueRingTwo: _,
13
- purpleRing: w,
14
- purpleDraw: x,
15
- purpleFade: f,
16
- purpleRingTwo: h,
17
- magentaRing: R,
18
- magentaDraw: b,
19
- magentaFade: T,
20
- magentaRingTwo: $,
21
- bgRings: F
22
- }, L = ({
23
- className: t,
24
- height: l = 24,
25
- width: a = 24
1
+ import f from "clsx";
2
+ import { useId as g } from "react";
3
+ import { useIntl as m } from "react-intl";
4
+ import h from "../answer/messages.js";
5
+ import { jsxs as e, jsx as r } from "react/jsx-runtime";
6
+ const C = ({
7
+ className: p,
8
+ height: c = 24,
9
+ width: d = 24
26
10
  }) => {
27
11
  const {
28
- formatMessage: i
29
- } = n();
30
- return /* @__PURE__ */ r("svg", {
31
- "aria-label": i(p.loadingAnswer),
12
+ formatMessage: y
13
+ } = m(), t = g().replace(/:/g, ""), o = `blueGradient-${t}`, a = `purpleGradient-${t}`, i = `magentaGradient-${t}`, s = `whiteBorder-${t}`, l = `clip1-${t}`, n = `clip2-${t}`;
14
+ return /* @__PURE__ */ e("svg", {
15
+ "aria-label": y(h.loadingAnswer),
32
16
  "aria-live": "polite",
33
- className: s(o.boxAILoadingIndicator, t),
34
- height: l,
17
+ className: f("boxai-loading", p),
18
+ height: c,
35
19
  role: "status",
36
20
  viewBox: "0 0 400 400",
37
- width: a,
21
+ width: d,
38
22
  xmlns: "http://www.w3.org/2000/svg",
39
- children: [/* @__PURE__ */ r("defs", {
40
- children: [/* @__PURE__ */ r("linearGradient", {
41
- id: "magentaGradient",
23
+ children: [/* @__PURE__ */ e("defs", {
24
+ children: [/* @__PURE__ */ e("linearGradient", {
25
+ id: i,
42
26
  x1: "0%",
43
27
  x2: "100%",
44
28
  y1: "0%",
45
29
  y2: "100%",
46
- children: [/* @__PURE__ */ e("stop", {
30
+ children: [/* @__PURE__ */ r("stop", {
47
31
  offset: "0%",
48
32
  style: {
49
33
  stopColor: "#FF80FF",
50
34
  stopOpacity: 1
51
35
  }
52
- }), /* @__PURE__ */ e("stop", {
36
+ }), /* @__PURE__ */ r("stop", {
53
37
  offset: "50%",
54
38
  style: {
55
39
  stopColor: "#FF00FF",
56
40
  stopOpacity: 1
57
41
  }
58
- }), /* @__PURE__ */ e("stop", {
42
+ }), /* @__PURE__ */ r("stop", {
59
43
  offset: "100%",
60
44
  style: {
61
45
  stopColor: "#CC00CC",
62
46
  stopOpacity: 1
63
47
  }
64
48
  })]
65
- }), /* @__PURE__ */ r("linearGradient", {
66
- id: "purpleGradient",
49
+ }), /* @__PURE__ */ e("linearGradient", {
50
+ id: a,
67
51
  x1: "0%",
68
52
  x2: "100%",
69
53
  y1: "0%",
70
54
  y2: "100%",
71
- children: [/* @__PURE__ */ e("stop", {
55
+ children: [/* @__PURE__ */ r("stop", {
72
56
  offset: "0%",
73
57
  style: {
74
58
  stopColor: "#BB66EE",
75
59
  stopOpacity: 1
76
60
  }
77
- }), /* @__PURE__ */ e("stop", {
61
+ }), /* @__PURE__ */ r("stop", {
78
62
  offset: "50%",
79
63
  style: {
80
64
  stopColor: "#9933CC",
81
65
  stopOpacity: 1
82
66
  }
83
- }), /* @__PURE__ */ e("stop", {
67
+ }), /* @__PURE__ */ r("stop", {
84
68
  offset: "100%",
85
69
  style: {
86
70
  stopColor: "#7722AA",
87
71
  stopOpacity: 1
88
72
  }
89
73
  })]
90
- }), /* @__PURE__ */ r("linearGradient", {
91
- id: "blueGradient",
74
+ }), /* @__PURE__ */ e("linearGradient", {
75
+ id: o,
92
76
  x1: "0%",
93
77
  x2: "100%",
94
78
  y1: "0%",
95
79
  y2: "100%",
96
- children: [/* @__PURE__ */ e("stop", {
80
+ children: [/* @__PURE__ */ r("stop", {
97
81
  offset: "0%",
98
82
  style: {
99
83
  stopColor: "#77BBFF",
100
84
  stopOpacity: 1
101
85
  }
102
- }), /* @__PURE__ */ e("stop", {
86
+ }), /* @__PURE__ */ r("stop", {
103
87
  offset: "50%",
104
88
  style: {
105
89
  stopColor: "#3399FF",
106
90
  stopOpacity: 1
107
91
  }
108
- }), /* @__PURE__ */ e("stop", {
92
+ }), /* @__PURE__ */ r("stop", {
109
93
  offset: "100%",
110
94
  style: {
111
95
  stopColor: "#0077DD",
112
96
  stopOpacity: 1
113
97
  }
114
98
  })]
115
- }), /* @__PURE__ */ r("filter", {
99
+ }), /* @__PURE__ */ e("filter", {
116
100
  height: "140%",
117
- id: "whiteBorder",
101
+ id: s,
118
102
  width: "140%",
119
103
  x: "-20%",
120
104
  y: "-20%",
121
- children: [/* @__PURE__ */ e("feMorphology", {
105
+ children: [/* @__PURE__ */ r("feMorphology", {
122
106
  in: "SourceAlpha",
123
107
  operator: "dilate",
124
108
  radius: "5",
125
109
  result: "expanded"
126
- }), /* @__PURE__ */ e("feFlood", {
110
+ }), /* @__PURE__ */ r("feFlood", {
127
111
  floodColor: "white",
128
112
  floodOpacity: "1",
129
113
  result: "whiteColor"
130
- }), /* @__PURE__ */ e("feComposite", {
114
+ }), /* @__PURE__ */ r("feComposite", {
131
115
  in: "whiteColor",
132
116
  in2: "expanded",
133
117
  operator: "in",
134
118
  result: "whiteBorder"
135
- }), /* @__PURE__ */ e("feComposite", {
119
+ }), /* @__PURE__ */ r("feComposite", {
136
120
  in: "SourceGraphic",
137
121
  in2: "whiteBorder",
138
122
  operator: "over"
139
123
  })]
140
- }), /* @__PURE__ */ e("clipPath", {
141
- id: "clip1",
142
- children: /* @__PURE__ */ e("path", {
124
+ }), /* @__PURE__ */ r("clipPath", {
125
+ id: l,
126
+ children: /* @__PURE__ */ r("path", {
143
127
  d: "M0,200 L400,200 L400,400 L0,400 z"
144
128
  })
145
- }), /* @__PURE__ */ e("clipPath", {
146
- id: "clip2",
147
- children: /* @__PURE__ */ e("path", {
129
+ }), /* @__PURE__ */ r("clipPath", {
130
+ id: n,
131
+ children: /* @__PURE__ */ r("path", {
148
132
  d: "M0,0 L400,0 L400,200 L0,200 z"
149
133
  })
150
134
  })]
151
- }), /* @__PURE__ */ r("g", {
152
- className: o.bgRings,
153
- children: [/* @__PURE__ */ r("g", {
154
- clipPath: "url(#clip1)",
155
- children: [/* @__PURE__ */ e("ellipse", {
156
- className: `${o.ringTwo} ${o.blueRingTwo}`,
135
+ }), /* @__PURE__ */ r("style", {
136
+ children: `
137
+ .boxai-loading .ring {
138
+ fill: none;
139
+ stroke-width: 28;
140
+ stroke-linecap: round;
141
+ animation-duration: 3s;
142
+ animation-timing-function: ease-in-out;
143
+ animation-iteration-count: infinite;
144
+ opacity: 0;
145
+ filter: url(#${s});
146
+ }
147
+ .boxai-loading .ring-two {
148
+ fill: none;
149
+ stroke-width: 28;
150
+ stroke-linecap: round;
151
+ opacity: 1;
152
+ filter: url(#${s});
153
+ }
154
+ .boxai-loading .blue-ring { stroke: url(#${o}); animation-name: blue-draw, blue-fade; }
155
+ .boxai-loading .blue-ring-two { stroke: url(#${o}); }
156
+ .boxai-loading .purple-ring { stroke: url(#${a}); animation-name: purple-draw, purple-fade; }
157
+ .boxai-loading .purple-ring-two { stroke: url(#${a}); }
158
+ .boxai-loading .magenta-ring { stroke: url(#${i}); animation-name: magenta-draw, magenta-fade; }
159
+ .boxai-loading .magenta-ring-two { stroke: url(#${i}); }
160
+ .boxai-loading .bg-rings { opacity: 0.2; }
161
+
162
+ @keyframes magenta-draw {
163
+ 0%, 3% { stroke-dasharray: 0 780; stroke-dashoffset: 390; }
164
+ 45%, 60% { stroke-dasharray: 780 0; stroke-dashoffset: 390; }
165
+ 87%, 100% { stroke-dasharray: 0 780; stroke-dashoffset: -390; }
166
+ }
167
+ @keyframes purple-draw {
168
+ 0%, 13% { stroke-dasharray: 0 780; stroke-dashoffset: 390; }
169
+ 55%, 70% { stroke-dasharray: 780 0; stroke-dashoffset: 390; }
170
+ 87%, 100% { stroke-dasharray: 0 780; stroke-dashoffset: -390; }
171
+ }
172
+ @keyframes blue-draw {
173
+ 0%, 23% { stroke-dasharray: 0 780; stroke-dashoffset: 390; }
174
+ 65%, 80% { stroke-dasharray: 780 0; stroke-dashoffset: 390; }
175
+ 87%, 100% { stroke-dasharray: 0 780; stroke-dashoffset: -390; }
176
+ }
177
+ @keyframes magenta-fade {
178
+ 0%, 2% { opacity: 0; }
179
+ 15%, 80% { opacity: 1; }
180
+ 87%, 100% { opacity: 0; }
181
+ }
182
+ @keyframes purple-fade {
183
+ 0%, 12% { opacity: 0; }
184
+ 25%, 80% { opacity: 1; }
185
+ 87%, 100% { opacity: 0; }
186
+ }
187
+ @keyframes blue-fade {
188
+ 0%, 22% { opacity: 0; }
189
+ 35%, 80% { opacity: 1; }
190
+ 87%, 100% { opacity: 0; }
191
+ }
192
+ `
193
+ }), /* @__PURE__ */ e("g", {
194
+ className: "bg-rings",
195
+ children: [/* @__PURE__ */ e("g", {
196
+ clipPath: `url(#${l})`,
197
+ children: [/* @__PURE__ */ r("ellipse", {
198
+ className: "ring-two blue-ring-two",
157
199
  cx: "200",
158
200
  cy: "200",
159
201
  rx: "80",
160
202
  ry: "160",
161
203
  transform: "rotate(-60, 200, 200)"
162
- }), /* @__PURE__ */ e("ellipse", {
163
- className: `${o.ringTwo} ${o.purpleRingTwo}`,
204
+ }), /* @__PURE__ */ r("ellipse", {
205
+ className: "ring-two purple-ring-two",
164
206
  cx: "200",
165
207
  cy: "200",
166
208
  rx: "80",
167
209
  ry: "160",
168
210
  transform: "rotate(60, 200, 200)"
169
- }), /* @__PURE__ */ e("ellipse", {
170
- className: `${o.ringTwo} ${o.magentaRingTwo}`,
211
+ }), /* @__PURE__ */ r("ellipse", {
212
+ className: "ring-two magenta-ring-two",
171
213
  cx: "200",
172
214
  cy: "200",
173
215
  rx: "80",
174
216
  ry: "160"
175
217
  })]
176
- }), /* @__PURE__ */ r("g", {
177
- clipPath: "url(#clip2)",
178
- children: [/* @__PURE__ */ e("ellipse", {
179
- className: `${o.ringTwo} ${o.magentaRingTwo}`,
218
+ }), /* @__PURE__ */ e("g", {
219
+ clipPath: `url(#${n})`,
220
+ children: [/* @__PURE__ */ r("ellipse", {
221
+ className: "ring-two magenta-ring-two",
180
222
  cx: "200",
181
223
  cy: "200",
182
224
  rx: "80",
183
225
  ry: "160"
184
- }), /* @__PURE__ */ e("ellipse", {
185
- className: `${o.ringTwo} ${o.blueRingTwo}`,
226
+ }), /* @__PURE__ */ r("ellipse", {
227
+ className: "ring-two blue-ring-two",
186
228
  cx: "200",
187
229
  cy: "200",
188
230
  rx: "80",
189
231
  ry: "160",
190
232
  transform: "rotate(-60, 200, 200)"
191
- }), /* @__PURE__ */ e("ellipse", {
192
- className: `${o.ringTwo} ${o.purpleRingTwo}`,
233
+ }), /* @__PURE__ */ r("ellipse", {
234
+ className: "ring-two purple-ring-two",
193
235
  cx: "200",
194
236
  cy: "200",
195
237
  rx: "80",
@@ -197,46 +239,46 @@ import '../../../../styles/boxAILoadingIndicator.css';const c = "_boxAILoadingIn
197
239
  transform: "rotate(60, 200, 200)"
198
240
  })]
199
241
  })]
200
- }), /* @__PURE__ */ r("g", {
201
- clipPath: "url(#clip1)",
202
- children: [/* @__PURE__ */ e("ellipse", {
203
- className: `${o.ring} ${o.blueRing}`,
242
+ }), /* @__PURE__ */ e("g", {
243
+ clipPath: `url(#${l})`,
244
+ children: [/* @__PURE__ */ r("ellipse", {
245
+ className: "ring blue-ring",
204
246
  cx: "200",
205
247
  cy: "200",
206
248
  rx: "80",
207
249
  ry: "160",
208
250
  transform: "rotate(-60, 200, 200)"
209
- }), /* @__PURE__ */ e("ellipse", {
210
- className: `${o.ring} ${o.purpleRing}`,
251
+ }), /* @__PURE__ */ r("ellipse", {
252
+ className: "ring purple-ring",
211
253
  cx: "200",
212
254
  cy: "200",
213
255
  rx: "80",
214
256
  ry: "160",
215
257
  transform: "rotate(60, 200, 200)"
216
- }), /* @__PURE__ */ e("ellipse", {
217
- className: `${o.ring} ${o.magentaRing}`,
258
+ }), /* @__PURE__ */ r("ellipse", {
259
+ className: "ring magenta-ring",
218
260
  cx: "200",
219
261
  cy: "200",
220
262
  rx: "80",
221
263
  ry: "160"
222
264
  })]
223
- }), /* @__PURE__ */ r("g", {
224
- clipPath: "url(#clip2)",
225
- children: [/* @__PURE__ */ e("ellipse", {
226
- className: `${o.ring} ${o.magentaRing}`,
265
+ }), /* @__PURE__ */ e("g", {
266
+ clipPath: `url(#${n})`,
267
+ children: [/* @__PURE__ */ r("ellipse", {
268
+ className: "ring magenta-ring",
227
269
  cx: "200",
228
270
  cy: "200",
229
271
  rx: "80",
230
272
  ry: "160"
231
- }), /* @__PURE__ */ e("ellipse", {
232
- className: `${o.ring} ${o.blueRing}`,
273
+ }), /* @__PURE__ */ r("ellipse", {
274
+ className: "ring blue-ring",
233
275
  cx: "200",
234
276
  cy: "200",
235
277
  rx: "80",
236
278
  ry: "160",
237
279
  transform: "rotate(-60, 200, 200)"
238
- }), /* @__PURE__ */ e("ellipse", {
239
- className: `${o.ring} ${o.purpleRing}`,
280
+ }), /* @__PURE__ */ r("ellipse", {
281
+ className: "ring purple-ring",
240
282
  cx: "200",
241
283
  cy: "200",
242
284
  rx: "80",
@@ -247,6 +289,6 @@ import '../../../../styles/boxAILoadingIndicator.css';const c = "_boxAILoadingIn
247
289
  });
248
290
  };
249
291
  export {
250
- L as BoxAILoadingIndicator,
251
- L as default
292
+ C as BoxAILoadingIndicator,
293
+ C as default
252
294
  };
package/dist/i18n/en-CA.js CHANGED
@@ -1,7 +1,7 @@
1
1
  export default {
2
2
  "boxAI.contentAnswers.addToNote": "Add to Note",
3
3
  "boxAI.contentAnswers.addedToNote": "Added",
4
- "boxAI.contentAnswers.analyzingRequest": "Analyzing your request",
4
+ "boxAI.contentAnswers.analyzingRequest": "Analyzing...",
5
5
  "boxAI.contentAnswers.ariaTypeSuccessIconLabel": "success",
6
6
  "boxAI.contentAnswers.ask": "Ask",
7
7
  "boxAI.contentAnswers.askDisabledTooltip": "You can submit another question once Box AI has finished responding",
package/dist/i18n/en-CA.properties CHANGED
@@ -3,7 +3,7 @@ boxAI.contentAnswers.addToNote = Add to Note
3
3
  # Added to note confirmation text
4
4
  boxAI.contentAnswers.addedToNote = Added
5
5
  # Text shown next to the loading indicator while analyzing the request
6
- boxAI.contentAnswers.analyzingRequest = Analyzing your request
6
+ boxAI.contentAnswers.analyzingRequest = Analyzing...
7
7
  # Notification banner success icon aria label
8
8
  boxAI.contentAnswers.ariaTypeSuccessIconLabel = success
9
9
  # Content Answers submit input button text