@revikornmann/muka-ui 0.12.0 → 0.14.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 (112) hide show
  1. package/build/manifest.json +10 -0
  2. package/dist/cjs/components/AgentTaskList/AgentTaskList.js +1 -1
  3. package/dist/cjs/components/BadgeNumber/BadgeNumber.css +105 -0
  4. package/dist/cjs/components/BadgeNumber/BadgeNumber.js +19 -0
  5. package/dist/cjs/components/BadgeNumber/BadgeNumber.js.map +1 -0
  6. package/dist/cjs/components/BadgeNumber/index.js +11 -0
  7. package/dist/cjs/components/BadgeNumber/index.js.map +1 -0
  8. package/dist/cjs/components/ChatMessage/ChatMessage.css +324 -0
  9. package/dist/cjs/components/ChatMessage/ChatMessage.js +138 -0
  10. package/dist/cjs/components/ChatMessage/ChatMessage.js.map +1 -0
  11. package/dist/cjs/components/ChatMessage/index.js +7 -0
  12. package/dist/cjs/components/ChatMessage/index.js.map +1 -0
  13. package/dist/cjs/components/ChatMessageList/ChatMessageList.js +1 -1
  14. package/dist/cjs/components/ChatMessageStack/ChatMessageStack.css +51 -0
  15. package/dist/cjs/components/ChatMessageStack/ChatMessageStack.js +49 -0
  16. package/dist/cjs/components/ChatMessageStack/ChatMessageStack.js.map +1 -0
  17. package/dist/cjs/components/ChatMessageStack/index.js +6 -0
  18. package/dist/cjs/components/ChatMessageStack/index.js.map +1 -0
  19. package/dist/cjs/components/ChatPhotoGrid/ChatPhotoGrid.css +8 -2
  20. package/dist/cjs/components/ChatPhotoGrid/ChatPhotoGrid.js +1 -1
  21. package/dist/cjs/components/Menu/Menu.js +5 -4
  22. package/dist/cjs/components/Menu/Menu.js.map +1 -1
  23. package/dist/cjs/components/index.js +9 -5
  24. package/dist/cjs/components/index.js.map +1 -1
  25. package/dist/cjs/utils/useLongPress.js +71 -0
  26. package/dist/cjs/utils/useLongPress.js.map +1 -0
  27. package/dist/esm/components/AgentTaskList/AgentTaskList.js +1 -1
  28. package/dist/esm/components/BadgeNumber/BadgeNumber.css +105 -0
  29. package/dist/esm/components/BadgeNumber/BadgeNumber.js +15 -0
  30. package/dist/esm/components/BadgeNumber/BadgeNumber.js.map +1 -0
  31. package/dist/esm/components/BadgeNumber/index.js +3 -0
  32. package/dist/esm/components/BadgeNumber/index.js.map +1 -0
  33. package/dist/esm/components/ChatMessage/ChatMessage.css +324 -0
  34. package/dist/esm/components/ChatMessage/ChatMessage.js +134 -0
  35. package/dist/esm/components/ChatMessage/ChatMessage.js.map +1 -0
  36. package/dist/esm/components/ChatMessage/index.js +2 -0
  37. package/dist/esm/components/ChatMessage/index.js.map +1 -0
  38. package/dist/esm/components/ChatMessageList/ChatMessageList.js +1 -1
  39. package/dist/esm/components/ChatMessageStack/ChatMessageStack.css +51 -0
  40. package/dist/esm/components/ChatMessageStack/ChatMessageStack.js +42 -0
  41. package/dist/esm/components/ChatMessageStack/ChatMessageStack.js.map +1 -0
  42. package/dist/esm/components/ChatMessageStack/index.js +2 -0
  43. package/dist/esm/components/ChatMessageStack/index.js.map +1 -0
  44. package/dist/esm/components/ChatPhotoGrid/ChatPhotoGrid.css +8 -2
  45. package/dist/esm/components/ChatPhotoGrid/ChatPhotoGrid.js +1 -1
  46. package/dist/esm/components/Menu/Menu.js +5 -4
  47. package/dist/esm/components/Menu/Menu.js.map +1 -1
  48. package/dist/esm/components/index.js +3 -1
  49. package/dist/esm/components/index.js.map +1 -1
  50. package/dist/esm/utils/useLongPress.js +68 -0
  51. package/dist/esm/utils/useLongPress.js.map +1 -0
  52. package/dist/styles/components/BadgeNumber.css +105 -0
  53. package/dist/styles/components/ChatMessage.css +324 -0
  54. package/dist/styles/components/ChatMessageStack.css +51 -0
  55. package/dist/styles/components/ChatPhotoGrid.css +8 -2
  56. package/dist/styles/index.css +2694 -2475
  57. package/dist/styles/muka-dark.css +2694 -2475
  58. package/dist/styles/muka-light.css +2694 -2475
  59. package/dist/styles/tokens-bouwplan-dark.css +32 -5
  60. package/dist/styles/tokens-bouwplan-light.css +32 -5
  61. package/dist/styles/tokens-fscl-dark.css +32 -5
  62. package/dist/styles/tokens-fscl-light.css +32 -5
  63. package/dist/styles/tokens-grip-dark.css +32 -5
  64. package/dist/styles/tokens-grip-light.css +32 -5
  65. package/dist/styles/tokens-muka-dark.css +32 -5
  66. package/dist/styles/tokens-muka-light.css +32 -5
  67. package/dist/styles/tokens-wireframe-dark.css +31 -4
  68. package/dist/styles/tokens-wireframe-light.css +31 -4
  69. package/dist/styles/wireframe-dark.css +2693 -2474
  70. package/dist/styles/wireframe-light.css +2693 -2474
  71. package/dist/types/components/AgentTaskList/AgentTaskList.d.ts +1 -1
  72. package/dist/types/components/BadgeNumber/BadgeNumber.d.ts +17 -0
  73. package/dist/types/components/BadgeNumber/BadgeNumber.d.ts.map +1 -0
  74. package/dist/types/components/BadgeNumber/index.d.ts +3 -0
  75. package/dist/types/components/BadgeNumber/index.d.ts.map +1 -0
  76. package/dist/types/components/ChatMessage/ChatMessage.d.ts +127 -0
  77. package/dist/types/components/ChatMessage/ChatMessage.d.ts.map +1 -0
  78. package/dist/types/components/ChatMessage/index.d.ts +2 -0
  79. package/dist/types/components/ChatMessage/index.d.ts.map +1 -0
  80. package/dist/types/components/ChatMessageList/ChatMessageList.d.ts +2 -2
  81. package/dist/types/components/ChatMessageList/ChatMessageList.d.ts.map +1 -1
  82. package/dist/types/components/ChatMessageStack/ChatMessageStack.d.ts +46 -0
  83. package/dist/types/components/ChatMessageStack/ChatMessageStack.d.ts.map +1 -0
  84. package/dist/types/components/ChatMessageStack/index.d.ts +2 -0
  85. package/dist/types/components/ChatMessageStack/index.d.ts.map +1 -0
  86. package/dist/types/components/ChatPhotoGrid/ChatPhotoGrid.d.ts +1 -1
  87. package/dist/types/components/Menu/Menu.d.ts +12 -0
  88. package/dist/types/components/Menu/Menu.d.ts.map +1 -1
  89. package/dist/types/components/index.d.ts +3 -1
  90. package/dist/types/components/index.d.ts.map +1 -1
  91. package/dist/types/utils/useLongPress.d.ts +28 -0
  92. package/dist/types/utils/useLongPress.d.ts.map +1 -0
  93. package/package.json +1 -1
  94. package/tokens/t3-semantics/ui.json +29 -0
  95. package/tokens/t4-components/badge-number.json +48 -0
  96. package/tokens/t4-components/chatbubble.json +33 -7
  97. package/tokens/t4-components/chatphotogrid.json +2 -2
  98. package/dist/cjs/components/ChatBubble/ChatBubble.css +0 -300
  99. package/dist/cjs/components/ChatBubble/ChatBubble.js +0 -37
  100. package/dist/cjs/components/ChatBubble/ChatBubble.js.map +0 -1
  101. package/dist/cjs/components/ChatBubble/index.js +0 -6
  102. package/dist/cjs/components/ChatBubble/index.js.map +0 -1
  103. package/dist/esm/components/ChatBubble/ChatBubble.css +0 -300
  104. package/dist/esm/components/ChatBubble/ChatBubble.js +0 -33
  105. package/dist/esm/components/ChatBubble/ChatBubble.js.map +0 -1
  106. package/dist/esm/components/ChatBubble/index.js +0 -2
  107. package/dist/esm/components/ChatBubble/index.js.map +0 -1
  108. package/dist/styles/components/ChatBubble.css +0 -300
  109. package/dist/types/components/ChatBubble/ChatBubble.d.ts +0 -85
  110. package/dist/types/components/ChatBubble/ChatBubble.d.ts.map +0 -1
  111. package/dist/types/components/ChatBubble/index.d.ts +0 -2
  112. package/dist/types/components/ChatBubble/index.d.ts.map +0 -1
@@ -1,300 +0,0 @@
1
- /* ChatBubble Component Styles */
2
-
3
- .muka-chat-bubble {
4
- display: flex;
5
- flex-direction: column;
6
- width: 100%;
7
- max-width: 100%;
8
- }
9
-
10
- /* ─── Row: avatar rail + bubble + action bar ───────────────
11
- *
12
- * A two-row grid rather than a flex column, so the avatar bottom-aligns to the
13
- * bubble itself and not to the action bar underneath it (Figma 5223:8520).
14
- */
15
-
16
- .muka-chat-bubble__row {
17
- display: grid;
18
- grid-template-columns: minmax(0, 1fr);
19
- grid-template-areas:
20
- 'bubble'
21
- 'actions';
22
- column-gap: var(--chatbubble-row-gap);
23
- row-gap: var(--chatbubble-gap);
24
- width: 100%;
25
- }
26
-
27
- .muka-chat-bubble--has-avatar .muka-chat-bubble__row {
28
- grid-template-columns: auto minmax(0, 1fr);
29
- grid-template-areas:
30
- 'rail bubble'
31
- '. actions';
32
- }
33
-
34
- .muka-chat-bubble--own.muka-chat-bubble--has-avatar .muka-chat-bubble__row {
35
- grid-template-columns: minmax(0, 1fr) auto;
36
- grid-template-areas:
37
- 'bubble rail'
38
- 'actions .';
39
- }
40
-
41
- .muka-chat-bubble__rail {
42
- grid-area: rail;
43
- /* Sits on the bubble's baseline, above the action bar */
44
- align-self: end;
45
- display: flex;
46
- justify-content: center;
47
- min-width: var(--chatbubble-avatar-size);
48
- }
49
-
50
- /* ─── Bubble surface ───────────────────────────────────── */
51
-
52
- .muka-chat-bubble__bubble {
53
- grid-area: bubble;
54
- max-width: var(--chatbubble-max-width);
55
- position: relative;
56
- display: flex;
57
- flex-direction: column;
58
- gap: var(--chatbubble-gap);
59
- width: 100%;
60
- padding: var(--chatbubble-padding);
61
- border-radius: var(--chatbubble-radius);
62
- border: var(--border-width-regular) solid transparent;
63
- word-break: break-word;
64
- }
65
-
66
- .muka-chat-bubble--own .muka-chat-bubble__bubble,
67
- .muka-chat-bubble--own .muka-chat-bubble__actions {
68
- justify-self: end;
69
- }
70
-
71
- .muka-chat-bubble--own .muka-chat-bubble__bubble {
72
- background-color: var(--chatbubble-color-own-background);
73
- border-color: var(--chatbubble-color-own-border);
74
- color: var(--chatbubble-color-own-foreground);
75
- /* Room for the inset timestamp in the bottom-right corner */
76
- padding-right: var(--spacing-6);
77
- }
78
-
79
- .muka-chat-bubble--peer .muka-chat-bubble__bubble {
80
- background-color: var(--chatbubble-color-peer-background);
81
- border-color: var(--chatbubble-color-peer-border);
82
- color: var(--chatbubble-color-peer-foreground);
83
- box-shadow: var(--shadow-level2);
84
- }
85
-
86
- .muka-chat-bubble--agent .muka-chat-bubble__bubble {
87
- background-color: var(--chatbubble-color-agent-background);
88
- border-color: var(--chatbubble-color-agent-border);
89
- color: var(--chatbubble-color-agent-foreground);
90
- }
91
-
92
- /* ─── Header row (author · meta · time · badge) ────────── */
93
-
94
- .muka-chat-bubble__header {
95
- display: flex;
96
- flex-flow: row wrap;
97
- align-items: center;
98
- gap: var(--chatbubble-row-gap);
99
- }
100
-
101
- .muka-chat-bubble__author {
102
- font-family: var(--text-body-base-bold-fontFamily);
103
- font-weight: var(--text-body-base-bold-fontWeight);
104
- font-size: var(--text-body-base-bold-fontSize);
105
- line-height: var(--text-body-base-bold-lineHeight);
106
- }
107
-
108
- .muka-chat-bubble__author-meta {
109
- /* Inherits the variant's body colour from the bubble */
110
- color: inherit;
111
- font-family: var(--text-body-base-regular-fontFamily);
112
- font-weight: var(--text-body-base-regular-fontWeight);
113
- font-size: var(--text-body-base-regular-fontSize);
114
- line-height: var(--text-body-base-regular-lineHeight);
115
- }
116
-
117
- .muka-chat-bubble__badge {
118
- display: inline-flex;
119
- align-items: center;
120
- }
121
-
122
- /*
123
- * Keep the first line of content clear of the absolutely positioned menu
124
- * button in the bubble's top-right corner.
125
- */
126
- .muka-chat-bubble--has-menu .muka-chat-bubble__header,
127
- .muka-chat-bubble--has-menu.muka-chat-bubble--no-header .muka-chat-bubble__message {
128
- padding-right: var(--spacing-6);
129
- }
130
-
131
- /* ─── Body ─────────────────────────────────────────────── */
132
-
133
- .muka-chat-bubble__body {
134
- display: flex;
135
- flex-direction: column;
136
- gap: var(--chatbubble-gap);
137
- min-width: 0;
138
- }
139
-
140
- /* The agent balloon spaces its blocks further apart (Figma 5223:8520) */
141
- .muka-chat-bubble--agent .muka-chat-bubble__body {
142
- gap: var(--chatbubble-body-gap);
143
- }
144
-
145
- .muka-chat-bubble__media {
146
- min-width: 0;
147
- }
148
-
149
- .muka-chat-bubble__message {
150
- font-family: var(--text-body-base-regular-fontFamily);
151
- font-weight: var(--text-body-base-regular-fontWeight);
152
- font-size: var(--text-body-base-regular-fontSize);
153
- line-height: var(--text-body-base-regular-lineHeight);
154
- white-space: pre-wrap;
155
- word-break: break-word;
156
- }
157
-
158
- /* Empty message block should not add a gap of its own */
159
- .muka-chat-bubble__message:empty {
160
- display: none;
161
- }
162
-
163
- /* ─── Embedded card ────────────────────────────────────── */
164
-
165
- .muka-chat-bubble__embed {
166
- position: relative;
167
- display: flex;
168
- flex-direction: column;
169
- gap: var(--chatbubble-embed-gap);
170
- padding: var(--chatbubble-embed-padding);
171
- border-radius: var(--chatbubble-embed-radius);
172
- border: var(--border-width-regular) solid transparent;
173
- }
174
-
175
- /*
176
- * The embed sits on the raised surface of its author's role, one step apart
177
- * from the bubble it is nested in, and reuses that role's border colour.
178
- */
179
- .muka-chat-bubble--own .muka-chat-bubble__embed {
180
- background-color: var(--chatbubble-embed-color-own-background);
181
- border-color: var(--chatbubble-embed-color-own-border);
182
- color: var(--chatbubble-embed-color-own-foreground);
183
- }
184
-
185
- .muka-chat-bubble--peer .muka-chat-bubble__embed {
186
- background-color: var(--chatbubble-embed-color-peer-background);
187
- border-color: var(--chatbubble-embed-color-peer-border);
188
- color: var(--chatbubble-embed-color-peer-foreground);
189
- }
190
-
191
- .muka-chat-bubble--agent .muka-chat-bubble__embed {
192
- background-color: var(--chatbubble-embed-color-agent-background);
193
- border-color: var(--chatbubble-embed-color-agent-border);
194
- color: var(--chatbubble-embed-color-agent-foreground);
195
- }
196
-
197
- .muka-chat-bubble__embed-content {
198
- display: flex;
199
- flex-direction: column;
200
- gap: var(--chatbubble-embed-gap);
201
- min-width: 0;
202
- }
203
-
204
- .muka-chat-bubble__embed-copy {
205
- position: absolute;
206
- top: var(--chatbubble-embed-padding);
207
- right: var(--chatbubble-embed-padding);
208
- }
209
-
210
- /* ─── Stacked full-width action buttons ────────────────── */
211
-
212
- .muka-chat-bubble__action-stack {
213
- display: flex;
214
- flex-direction: column;
215
- gap: var(--chatbubble-action-stack-gap);
216
- }
217
-
218
- /* ─── Inset timestamp (user variant) ───────────────────── */
219
-
220
- .muka-chat-bubble__timestamp {
221
- color: var(--chatbubble-color-timestamp);
222
- font-family: var(--text-body-sm-regular-fontFamily);
223
- font-weight: var(--text-body-sm-regular-fontWeight);
224
- font-size: var(--text-body-sm-regular-fontSize);
225
- line-height: var(--text-body-sm-regular-lineHeight);
226
- white-space: nowrap;
227
- }
228
-
229
- .muka-chat-bubble__timestamp--inset {
230
- align-self: flex-end;
231
- }
232
-
233
- /* ─── Menu affordance ──────────────────────────────────── */
234
-
235
- .muka-chat-bubble__menu {
236
- position: absolute;
237
- top: var(--spacing-1);
238
- right: var(--spacing-1);
239
- }
240
-
241
- /* ─── Meta action row (below the bubble) ───────────────── */
242
-
243
- .muka-chat-bubble__actions {
244
- grid-area: actions;
245
- max-width: var(--chatbubble-max-width);
246
- display: flex;
247
- align-items: center;
248
- gap: 0;
249
- }
250
-
251
- .muka-chat-bubble--own .muka-chat-bubble__actions,
252
- .muka-chat-bubble--agent .muka-chat-bubble__actions {
253
- justify-content: flex-end;
254
- }
255
-
256
- /*
257
- * The meta row uses 32px icon buttons per the design. Expand the pointer/touch
258
- * target to the 44px WCAG 2.1 AA minimum without changing the visual size.
259
- */
260
- .muka-chat-bubble__actions .muka-button--icon-only {
261
- position: relative;
262
- }
263
-
264
- .muka-chat-bubble__actions .muka-button--icon-only::after {
265
- content: '';
266
- position: absolute;
267
- top: 50%;
268
- left: 50%;
269
- width: 44px;
270
- height: 44px;
271
- transform: translate(-50%, -50%);
272
- }
273
-
274
- /* ─── Print ────────────────────────────────────────────── */
275
-
276
- @media print {
277
- .muka-chat-bubble__bubble {
278
- box-shadow: none;
279
- break-inside: avoid;
280
- print-color-adjust: exact;
281
- -webkit-print-color-adjust: exact;
282
- }
283
-
284
- .muka-chat-bubble__embed {
285
- break-inside: avoid;
286
- print-color-adjust: exact;
287
- -webkit-print-color-adjust: exact;
288
- }
289
-
290
- .muka-chat-bubble__menu,
291
- .muka-chat-bubble__actions,
292
- .muka-chat-bubble__embed-copy,
293
- .muka-chat-bubble__action-stack {
294
- display: none;
295
- }
296
-
297
- .muka-chat-bubble__column {
298
- max-width: 100%;
299
- }
300
- }
@@ -1,37 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.ChatBubble = void 0;
4
- const jsx_runtime_1 = require("react/jsx-runtime");
5
- const Button_1 = require("../Button");
6
- const Icon_1 = require("../Icon");
7
- require("./ChatBubble.css");
8
- /**
9
- * ChatBubble — a single chat message.
10
- *
11
- * Composes with `ChatMessageList`. Pass `<ChatPhotoGrid />` to `media`, an
12
- * `<AgentTaskList />` above the bubble for tool progress, and a `<Badge />` to
13
- * `badge` for visibility scope.
14
- */
15
- const ChatBubble = ({ variant, children, avatar, author, authorMeta, badge, timestamp, media, embed, onEmbedCopy, embedCopyLabel = 'Copy', actionStack, onCopy, copyLabel = 'Copy', onFeedback, feedback = null, feedbackUpLabel = 'Helpful', feedbackDownLabel = 'Not helpful', onRefresh, refreshLabel = 'Regenerate', actions, onMenuClick, menuLabel = 'Message options', className = '', }) => {
16
- // The own variant shows its timestamp inside the bubble; the others in the header row.
17
- const timestampInHeader = variant !== 'own';
18
- const hasHeader = Boolean(author || badge || (timestampInHeader && timestamp));
19
- const classes = [
20
- 'muka-chat-bubble',
21
- `muka-chat-bubble--${variant}`,
22
- avatar && 'muka-chat-bubble--has-avatar',
23
- onMenuClick && 'muka-chat-bubble--has-menu',
24
- !hasHeader && 'muka-chat-bubble--no-header',
25
- className,
26
- ]
27
- .filter(Boolean)
28
- .join(' ');
29
- // The rail is only reserved when an avatar is supplied. To keep grouped
30
- // messages aligned, pass a spacer node for the follow-up messages.
31
- const rail = avatar ? ((0, jsx_runtime_1.jsx)("div", { className: "muka-chat-bubble__rail", children: avatar })) : null;
32
- const hasActionBar = Boolean(onCopy || onFeedback || onRefresh || actions);
33
- return ((0, jsx_runtime_1.jsx)("div", { className: classes, "data-variant": variant, children: (0, jsx_runtime_1.jsxs)("div", { className: "muka-chat-bubble__row", children: [variant !== 'own' ? rail : null, (0, jsx_runtime_1.jsxs)("div", { className: "muka-chat-bubble__bubble", children: [hasHeader && ((0, jsx_runtime_1.jsxs)("div", { className: "muka-chat-bubble__header", children: [author && ((0, jsx_runtime_1.jsx)("span", { className: "muka-chat-bubble__author", children: author })), authorMeta && ((0, jsx_runtime_1.jsx)("span", { className: "muka-chat-bubble__author-meta", children: authorMeta })), timestampInHeader && timestamp && ((0, jsx_runtime_1.jsx)("span", { className: "muka-chat-bubble__timestamp", children: timestamp })), badge && (0, jsx_runtime_1.jsx)("span", { className: "muka-chat-bubble__badge", children: badge })] })), (0, jsx_runtime_1.jsxs)("div", { className: "muka-chat-bubble__body", children: [media && (0, jsx_runtime_1.jsx)("div", { className: "muka-chat-bubble__media", children: media }), (0, jsx_runtime_1.jsx)("div", { className: "muka-chat-bubble__message", children: children }), embed && ((0, jsx_runtime_1.jsxs)("div", { className: "muka-chat-bubble__embed", children: [(0, jsx_runtime_1.jsx)("div", { className: "muka-chat-bubble__embed-content", children: embed }), onEmbedCopy && ((0, jsx_runtime_1.jsx)("div", { className: "muka-chat-bubble__embed-copy", children: (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "muted", size: "md", iconOnly: true, type: "button", "aria-label": embedCopyLabel, onClick: onEmbedCopy, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "file-copy", size: "sm" }) }) }))] })), actionStack && ((0, jsx_runtime_1.jsx)("div", { className: "muka-chat-bubble__action-stack", children: actionStack }))] }), !timestampInHeader && timestamp && ((0, jsx_runtime_1.jsx)("span", { className: "muka-chat-bubble__timestamp muka-chat-bubble__timestamp--inset", children: timestamp })), onMenuClick && ((0, jsx_runtime_1.jsx)("div", { className: "muka-chat-bubble__menu", children: (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "muted", size: "sm", iconOnly: true, type: "button", "aria-label": menuLabel, onClick: onMenuClick, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "arrow-down-s", size: "xs" }) }) }))] }), hasActionBar && ((0, jsx_runtime_1.jsxs)("div", { className: "muka-chat-bubble__actions", children: [onCopy && ((0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "muted", size: "sm", iconOnly: true, type: "button", "aria-label": copyLabel, onClick: onCopy, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "file-copy", size: "xs" }) })), onFeedback && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "muted", size: "sm", iconOnly: true, type: "button", "aria-label": feedbackUpLabel, "aria-pressed": feedback === 'up', onClick: () => onFeedback(feedback === 'up' ? null : 'up'), children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "thumb-up", size: "xs" }) }), (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "muted", size: "sm", iconOnly: true, type: "button", "aria-label": feedbackDownLabel, "aria-pressed": feedback === 'down', onClick: () => onFeedback(feedback === 'down' ? null : 'down'), children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "thumb-down", size: "xs" }) })] })), onRefresh && ((0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "muted", size: "sm", iconOnly: true, type: "button", "aria-label": refreshLabel, onClick: onRefresh, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "restart", size: "xs" }) })), actions] })), variant === 'own' ? rail : null] }) }));
34
- };
35
- exports.ChatBubble = ChatBubble;
36
- exports.default = exports.ChatBubble;
37
- //# sourceMappingURL=ChatBubble.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ChatBubble.js","sourceRoot":"","sources":["../../../../components/ChatBubble/ChatBubble.tsx"],"names":[],"mappings":"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"}
@@ -1,6 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.ChatBubble = void 0;
4
- var ChatBubble_1 = require("./ChatBubble");
5
- Object.defineProperty(exports, "ChatBubble", { enumerable: true, get: function () { return ChatBubble_1.ChatBubble; } });
6
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/ChatBubble/index.ts"],"names":[],"mappings":";;;AAAA,2CAAgE;AAAvD,wGAAA,UAAU,OAAA"}
@@ -1,300 +0,0 @@
1
- /* ChatBubble Component Styles */
2
-
3
- .muka-chat-bubble {
4
- display: flex;
5
- flex-direction: column;
6
- width: 100%;
7
- max-width: 100%;
8
- }
9
-
10
- /* ─── Row: avatar rail + bubble + action bar ───────────────
11
- *
12
- * A two-row grid rather than a flex column, so the avatar bottom-aligns to the
13
- * bubble itself and not to the action bar underneath it (Figma 5223:8520).
14
- */
15
-
16
- .muka-chat-bubble__row {
17
- display: grid;
18
- grid-template-columns: minmax(0, 1fr);
19
- grid-template-areas:
20
- 'bubble'
21
- 'actions';
22
- column-gap: var(--chatbubble-row-gap);
23
- row-gap: var(--chatbubble-gap);
24
- width: 100%;
25
- }
26
-
27
- .muka-chat-bubble--has-avatar .muka-chat-bubble__row {
28
- grid-template-columns: auto minmax(0, 1fr);
29
- grid-template-areas:
30
- 'rail bubble'
31
- '. actions';
32
- }
33
-
34
- .muka-chat-bubble--own.muka-chat-bubble--has-avatar .muka-chat-bubble__row {
35
- grid-template-columns: minmax(0, 1fr) auto;
36
- grid-template-areas:
37
- 'bubble rail'
38
- 'actions .';
39
- }
40
-
41
- .muka-chat-bubble__rail {
42
- grid-area: rail;
43
- /* Sits on the bubble's baseline, above the action bar */
44
- align-self: end;
45
- display: flex;
46
- justify-content: center;
47
- min-width: var(--chatbubble-avatar-size);
48
- }
49
-
50
- /* ─── Bubble surface ───────────────────────────────────── */
51
-
52
- .muka-chat-bubble__bubble {
53
- grid-area: bubble;
54
- max-width: var(--chatbubble-max-width);
55
- position: relative;
56
- display: flex;
57
- flex-direction: column;
58
- gap: var(--chatbubble-gap);
59
- width: 100%;
60
- padding: var(--chatbubble-padding);
61
- border-radius: var(--chatbubble-radius);
62
- border: var(--border-width-regular) solid transparent;
63
- word-break: break-word;
64
- }
65
-
66
- .muka-chat-bubble--own .muka-chat-bubble__bubble,
67
- .muka-chat-bubble--own .muka-chat-bubble__actions {
68
- justify-self: end;
69
- }
70
-
71
- .muka-chat-bubble--own .muka-chat-bubble__bubble {
72
- background-color: var(--chatbubble-color-own-background);
73
- border-color: var(--chatbubble-color-own-border);
74
- color: var(--chatbubble-color-own-foreground);
75
- /* Room for the inset timestamp in the bottom-right corner */
76
- padding-right: var(--spacing-6);
77
- }
78
-
79
- .muka-chat-bubble--peer .muka-chat-bubble__bubble {
80
- background-color: var(--chatbubble-color-peer-background);
81
- border-color: var(--chatbubble-color-peer-border);
82
- color: var(--chatbubble-color-peer-foreground);
83
- box-shadow: var(--shadow-level2);
84
- }
85
-
86
- .muka-chat-bubble--agent .muka-chat-bubble__bubble {
87
- background-color: var(--chatbubble-color-agent-background);
88
- border-color: var(--chatbubble-color-agent-border);
89
- color: var(--chatbubble-color-agent-foreground);
90
- }
91
-
92
- /* ─── Header row (author · meta · time · badge) ────────── */
93
-
94
- .muka-chat-bubble__header {
95
- display: flex;
96
- flex-flow: row wrap;
97
- align-items: center;
98
- gap: var(--chatbubble-row-gap);
99
- }
100
-
101
- .muka-chat-bubble__author {
102
- font-family: var(--text-body-base-bold-fontFamily);
103
- font-weight: var(--text-body-base-bold-fontWeight);
104
- font-size: var(--text-body-base-bold-fontSize);
105
- line-height: var(--text-body-base-bold-lineHeight);
106
- }
107
-
108
- .muka-chat-bubble__author-meta {
109
- /* Inherits the variant's body colour from the bubble */
110
- color: inherit;
111
- font-family: var(--text-body-base-regular-fontFamily);
112
- font-weight: var(--text-body-base-regular-fontWeight);
113
- font-size: var(--text-body-base-regular-fontSize);
114
- line-height: var(--text-body-base-regular-lineHeight);
115
- }
116
-
117
- .muka-chat-bubble__badge {
118
- display: inline-flex;
119
- align-items: center;
120
- }
121
-
122
- /*
123
- * Keep the first line of content clear of the absolutely positioned menu
124
- * button in the bubble's top-right corner.
125
- */
126
- .muka-chat-bubble--has-menu .muka-chat-bubble__header,
127
- .muka-chat-bubble--has-menu.muka-chat-bubble--no-header .muka-chat-bubble__message {
128
- padding-right: var(--spacing-6);
129
- }
130
-
131
- /* ─── Body ─────────────────────────────────────────────── */
132
-
133
- .muka-chat-bubble__body {
134
- display: flex;
135
- flex-direction: column;
136
- gap: var(--chatbubble-gap);
137
- min-width: 0;
138
- }
139
-
140
- /* The agent balloon spaces its blocks further apart (Figma 5223:8520) */
141
- .muka-chat-bubble--agent .muka-chat-bubble__body {
142
- gap: var(--chatbubble-body-gap);
143
- }
144
-
145
- .muka-chat-bubble__media {
146
- min-width: 0;
147
- }
148
-
149
- .muka-chat-bubble__message {
150
- font-family: var(--text-body-base-regular-fontFamily);
151
- font-weight: var(--text-body-base-regular-fontWeight);
152
- font-size: var(--text-body-base-regular-fontSize);
153
- line-height: var(--text-body-base-regular-lineHeight);
154
- white-space: pre-wrap;
155
- word-break: break-word;
156
- }
157
-
158
- /* Empty message block should not add a gap of its own */
159
- .muka-chat-bubble__message:empty {
160
- display: none;
161
- }
162
-
163
- /* ─── Embedded card ────────────────────────────────────── */
164
-
165
- .muka-chat-bubble__embed {
166
- position: relative;
167
- display: flex;
168
- flex-direction: column;
169
- gap: var(--chatbubble-embed-gap);
170
- padding: var(--chatbubble-embed-padding);
171
- border-radius: var(--chatbubble-embed-radius);
172
- border: var(--border-width-regular) solid transparent;
173
- }
174
-
175
- /*
176
- * The embed sits on the raised surface of its author's role, one step apart
177
- * from the bubble it is nested in, and reuses that role's border colour.
178
- */
179
- .muka-chat-bubble--own .muka-chat-bubble__embed {
180
- background-color: var(--chatbubble-embed-color-own-background);
181
- border-color: var(--chatbubble-embed-color-own-border);
182
- color: var(--chatbubble-embed-color-own-foreground);
183
- }
184
-
185
- .muka-chat-bubble--peer .muka-chat-bubble__embed {
186
- background-color: var(--chatbubble-embed-color-peer-background);
187
- border-color: var(--chatbubble-embed-color-peer-border);
188
- color: var(--chatbubble-embed-color-peer-foreground);
189
- }
190
-
191
- .muka-chat-bubble--agent .muka-chat-bubble__embed {
192
- background-color: var(--chatbubble-embed-color-agent-background);
193
- border-color: var(--chatbubble-embed-color-agent-border);
194
- color: var(--chatbubble-embed-color-agent-foreground);
195
- }
196
-
197
- .muka-chat-bubble__embed-content {
198
- display: flex;
199
- flex-direction: column;
200
- gap: var(--chatbubble-embed-gap);
201
- min-width: 0;
202
- }
203
-
204
- .muka-chat-bubble__embed-copy {
205
- position: absolute;
206
- top: var(--chatbubble-embed-padding);
207
- right: var(--chatbubble-embed-padding);
208
- }
209
-
210
- /* ─── Stacked full-width action buttons ────────────────── */
211
-
212
- .muka-chat-bubble__action-stack {
213
- display: flex;
214
- flex-direction: column;
215
- gap: var(--chatbubble-action-stack-gap);
216
- }
217
-
218
- /* ─── Inset timestamp (user variant) ───────────────────── */
219
-
220
- .muka-chat-bubble__timestamp {
221
- color: var(--chatbubble-color-timestamp);
222
- font-family: var(--text-body-sm-regular-fontFamily);
223
- font-weight: var(--text-body-sm-regular-fontWeight);
224
- font-size: var(--text-body-sm-regular-fontSize);
225
- line-height: var(--text-body-sm-regular-lineHeight);
226
- white-space: nowrap;
227
- }
228
-
229
- .muka-chat-bubble__timestamp--inset {
230
- align-self: flex-end;
231
- }
232
-
233
- /* ─── Menu affordance ──────────────────────────────────── */
234
-
235
- .muka-chat-bubble__menu {
236
- position: absolute;
237
- top: var(--spacing-1);
238
- right: var(--spacing-1);
239
- }
240
-
241
- /* ─── Meta action row (below the bubble) ───────────────── */
242
-
243
- .muka-chat-bubble__actions {
244
- grid-area: actions;
245
- max-width: var(--chatbubble-max-width);
246
- display: flex;
247
- align-items: center;
248
- gap: 0;
249
- }
250
-
251
- .muka-chat-bubble--own .muka-chat-bubble__actions,
252
- .muka-chat-bubble--agent .muka-chat-bubble__actions {
253
- justify-content: flex-end;
254
- }
255
-
256
- /*
257
- * The meta row uses 32px icon buttons per the design. Expand the pointer/touch
258
- * target to the 44px WCAG 2.1 AA minimum without changing the visual size.
259
- */
260
- .muka-chat-bubble__actions .muka-button--icon-only {
261
- position: relative;
262
- }
263
-
264
- .muka-chat-bubble__actions .muka-button--icon-only::after {
265
- content: '';
266
- position: absolute;
267
- top: 50%;
268
- left: 50%;
269
- width: 44px;
270
- height: 44px;
271
- transform: translate(-50%, -50%);
272
- }
273
-
274
- /* ─── Print ────────────────────────────────────────────── */
275
-
276
- @media print {
277
- .muka-chat-bubble__bubble {
278
- box-shadow: none;
279
- break-inside: avoid;
280
- print-color-adjust: exact;
281
- -webkit-print-color-adjust: exact;
282
- }
283
-
284
- .muka-chat-bubble__embed {
285
- break-inside: avoid;
286
- print-color-adjust: exact;
287
- -webkit-print-color-adjust: exact;
288
- }
289
-
290
- .muka-chat-bubble__menu,
291
- .muka-chat-bubble__actions,
292
- .muka-chat-bubble__embed-copy,
293
- .muka-chat-bubble__action-stack {
294
- display: none;
295
- }
296
-
297
- .muka-chat-bubble__column {
298
- max-width: 100%;
299
- }
300
- }