@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,33 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
2
- import { Button } from '../Button';
3
- import { Icon } from '../Icon';
4
- import './ChatBubble.css';
5
- /**
6
- * ChatBubble — a single chat message.
7
- *
8
- * Composes with `ChatMessageList`. Pass `<ChatPhotoGrid />` to `media`, an
9
- * `<AgentTaskList />` above the bubble for tool progress, and a `<Badge />` to
10
- * `badge` for visibility scope.
11
- */
12
- export 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 = '', }) => {
13
- // The own variant shows its timestamp inside the bubble; the others in the header row.
14
- const timestampInHeader = variant !== 'own';
15
- const hasHeader = Boolean(author || badge || (timestampInHeader && timestamp));
16
- const classes = [
17
- 'muka-chat-bubble',
18
- `muka-chat-bubble--${variant}`,
19
- avatar && 'muka-chat-bubble--has-avatar',
20
- onMenuClick && 'muka-chat-bubble--has-menu',
21
- !hasHeader && 'muka-chat-bubble--no-header',
22
- className,
23
- ]
24
- .filter(Boolean)
25
- .join(' ');
26
- // The rail is only reserved when an avatar is supplied. To keep grouped
27
- // messages aligned, pass a spacer node for the follow-up messages.
28
- const rail = avatar ? (_jsx("div", { className: "muka-chat-bubble__rail", children: avatar })) : null;
29
- const hasActionBar = Boolean(onCopy || onFeedback || onRefresh || actions);
30
- return (_jsx("div", { className: classes, "data-variant": variant, children: _jsxs("div", { className: "muka-chat-bubble__row", children: [variant !== 'own' ? rail : null, _jsxs("div", { className: "muka-chat-bubble__bubble", children: [hasHeader && (_jsxs("div", { className: "muka-chat-bubble__header", children: [author && (_jsx("span", { className: "muka-chat-bubble__author", children: author })), authorMeta && (_jsx("span", { className: "muka-chat-bubble__author-meta", children: authorMeta })), timestampInHeader && timestamp && (_jsx("span", { className: "muka-chat-bubble__timestamp", children: timestamp })), badge && _jsx("span", { className: "muka-chat-bubble__badge", children: badge })] })), _jsxs("div", { className: "muka-chat-bubble__body", children: [media && _jsx("div", { className: "muka-chat-bubble__media", children: media }), _jsx("div", { className: "muka-chat-bubble__message", children: children }), embed && (_jsxs("div", { className: "muka-chat-bubble__embed", children: [_jsx("div", { className: "muka-chat-bubble__embed-content", children: embed }), onEmbedCopy && (_jsx("div", { className: "muka-chat-bubble__embed-copy", children: _jsx(Button, { variant: "muted", size: "md", iconOnly: true, type: "button", "aria-label": embedCopyLabel, onClick: onEmbedCopy, children: _jsx(Icon, { name: "file-copy", size: "sm" }) }) }))] })), actionStack && (_jsx("div", { className: "muka-chat-bubble__action-stack", children: actionStack }))] }), !timestampInHeader && timestamp && (_jsx("span", { className: "muka-chat-bubble__timestamp muka-chat-bubble__timestamp--inset", children: timestamp })), onMenuClick && (_jsx("div", { className: "muka-chat-bubble__menu", children: _jsx(Button, { variant: "muted", size: "sm", iconOnly: true, type: "button", "aria-label": menuLabel, onClick: onMenuClick, children: _jsx(Icon, { name: "arrow-down-s", size: "xs" }) }) }))] }), hasActionBar && (_jsxs("div", { className: "muka-chat-bubble__actions", children: [onCopy && (_jsx(Button, { variant: "muted", size: "sm", iconOnly: true, type: "button", "aria-label": copyLabel, onClick: onCopy, children: _jsx(Icon, { name: "file-copy", size: "xs" }) })), onFeedback && (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "muted", size: "sm", iconOnly: true, type: "button", "aria-label": feedbackUpLabel, "aria-pressed": feedback === 'up', onClick: () => onFeedback(feedback === 'up' ? null : 'up'), children: _jsx(Icon, { name: "thumb-up", size: "xs" }) }), _jsx(Button, { variant: "muted", size: "sm", iconOnly: true, type: "button", "aria-label": feedbackDownLabel, "aria-pressed": feedback === 'down', onClick: () => onFeedback(feedback === 'down' ? null : 'down'), children: _jsx(Icon, { name: "thumb-down", size: "xs" }) })] })), onRefresh && (_jsx(Button, { variant: "muted", size: "sm", iconOnly: true, type: "button", "aria-label": refreshLabel, onClick: onRefresh, children: _jsx(Icon, { name: "restart", size: "xs" }) })), actions] })), variant === 'own' ? rail : null] }) }));
31
- };
32
- export default ChatBubble;
33
- //# 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,2 +0,0 @@
1
- export { ChatBubble } from './ChatBubble';
2
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/ChatBubble/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAwB,MAAM,cAAc,CAAC"}
@@ -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,85 +0,0 @@
1
- import React from 'react';
2
- import './ChatBubble.css';
3
- export interface ChatBubbleProps {
4
- /**
5
- * Message author.
6
- * - `own` — the signed-in user's own message: right-aligned, timestamp inside bottom-right
7
- * - `peer` — another human in the conversation: left-aligned card with border + shadow
8
- * - `agent` — AI or system author: left-aligned balloon
9
- */
10
- variant: 'own' | 'peer' | 'agent';
11
- /** Message body. Plain text or rich content (e.g. a markdown renderer) */
12
- children: React.ReactNode;
13
- /**
14
- * Avatar rendered in the rail beside the bubble (right for `own`, left otherwise).
15
- * Pass an `<Avatar />` or `<ProfileBadge />`.
16
- */
17
- avatar?: React.ReactNode;
18
- /** Author name shown in the header row (`peer` and `agent`) */
19
- author?: string;
20
- /** Role or label rendered after the author name (e.g. "Onderaannemer elektra") */
21
- authorMeta?: string;
22
- /**
23
- * Status/visibility badge rendered at the end of the header row.
24
- * Pass a `<Badge size="sm">` (e.g. "Alleen zichtbaar voor jou").
25
- */
26
- badge?: React.ReactNode;
27
- /** Timestamp (e.g. "19:54"). In the header row, except for `own` where it sits inside the bubble. */
28
- timestamp?: string;
29
- /** Media block above the message body — typically a `<ChatPhotoGrid />` */
30
- media?: React.ReactNode;
31
- /**
32
- * Tinted, bordered card rendered inside the bubble below the body.
33
- * Content-agnostic — pass whatever structured content the message carries.
34
- */
35
- embed?: React.ReactNode;
36
- /** When provided, renders a copy button in the embed's top-right corner */
37
- onEmbedCopy?: () => void;
38
- /** Accessible label for the embed copy button. Default: 'Copy' */
39
- embedCopyLabel?: string;
40
- /**
41
- * Vertical stack of full-width action buttons rendered inside the bubble
42
- * (e.g. "Ja, sluit af" / "Annuleer"). Pass `<Button fullWidth>` children.
43
- */
44
- actionStack?: React.ReactNode;
45
- /** When provided, renders a copy button in the action bar below the bubble */
46
- onCopy?: () => void;
47
- /** Accessible label for the copy action. Default: 'Copy' */
48
- copyLabel?: string;
49
- /**
50
- * When provided, renders the thumbs up/down feedback pair in the action bar.
51
- * Called with the value the user picked, or `null` when they clear it.
52
- */
53
- onFeedback?: (value: 'up' | 'down' | null) => void;
54
- /** Current feedback selection. Drives `aria-pressed` on the thumbs. */
55
- feedback?: 'up' | 'down' | null;
56
- /** Accessible label for thumbs up. Default: 'Helpful' */
57
- feedbackUpLabel?: string;
58
- /** Accessible label for thumbs down. Default: 'Not helpful' */
59
- feedbackDownLabel?: string;
60
- /** When provided, renders a refresh/regenerate button in the action bar */
61
- onRefresh?: () => void;
62
- /** Accessible label for the refresh action. Default: 'Regenerate' */
63
- refreshLabel?: string;
64
- /**
65
- * Extra nodes appended to the action bar after the built-in copy, feedback
66
- * and refresh actions. Toggle buttons should set `aria-pressed`.
67
- */
68
- actions?: React.ReactNode;
69
- /** When provided, renders a chevron affordance in the bubble's top-right corner */
70
- onMenuClick?: () => void;
71
- /** Accessible label for the menu button. Default: 'Message options' */
72
- menuLabel?: string;
73
- /** Additional CSS classes */
74
- className?: string;
75
- }
76
- /**
77
- * ChatBubble — a single chat message.
78
- *
79
- * Composes with `ChatMessageList`. Pass `<ChatPhotoGrid />` to `media`, an
80
- * `<AgentTaskList />` above the bubble for tool progress, and a `<Badge />` to
81
- * `badge` for visibility scope.
82
- */
83
- export declare const ChatBubble: React.FC<ChatBubbleProps>;
84
- export default ChatBubble;
85
- //# sourceMappingURL=ChatBubble.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ChatBubble.d.ts","sourceRoot":"","sources":["../../../../components/ChatBubble/ChatBubble.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,kBAAkB,CAAC;AAE1B,MAAM,WAAW,eAAe;IAC9B;;;;;OAKG;IACH,OAAO,EAAE,KAAK,GAAG,MAAM,GAAG,OAAO,CAAC;IAElC,0EAA0E;IAC1E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB,+DAA+D;IAC/D,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,kFAAkF;IAClF,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAExB,qGAAqG;IACrG,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,2EAA2E;IAC3E,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAExB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAExB,2EAA2E;IAC3E,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IAEzB,kEAAkE;IAClE,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;;OAGG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE9B,8EAA8E;IAC9E,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB,4DAA4D;IAC5D,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAEnD,uEAAuE;IACvE,QAAQ,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,IAAI,CAAC;IAEhC,yDAAyD;IACzD,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,+DAA+D;IAC/D,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B,2EAA2E;IAC3E,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IAEvB,qEAAqE;IACrE,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;OAGG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B,mFAAmF;IACnF,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IAEzB,uEAAuE;IACvE,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;GAMG;AACH,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAsLhD,CAAC;AAEF,eAAe,UAAU,CAAC"}
@@ -1,2 +0,0 @@
1
- export { ChatBubble, type ChatBubbleProps } from './ChatBubble';
2
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/ChatBubble/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,cAAc,CAAC"}