@shapesos/clay 0.4.0 → 0.5.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/chat.cjs +259 -417
- package/dist/chat.cjs.map +1 -1
- package/dist/chat.d.cts +16 -22
- package/dist/chat.d.ts +16 -22
- package/dist/chat.js +16 -6
- package/dist/chunk-72TJUKMV.js +1 -0
- package/dist/{chunk-UKM5VQKW.js → chunk-BIATJTD4.js} +5 -5
- package/dist/chunk-BIATJTD4.js.map +1 -0
- package/dist/chunk-DRBRT57F.js +1 -0
- package/dist/chunk-DRBRT57F.js.map +1 -0
- package/dist/chunk-JC2RQL5O.js +76 -0
- package/dist/chunk-JC2RQL5O.js.map +1 -0
- package/dist/{chunk-6HNZQ2BF.js → chunk-JF3P66JF.js} +2 -1
- package/dist/chunk-JF3P66JF.js.map +1 -0
- package/dist/chunk-K2Q5MQWJ.js +17 -0
- package/dist/chunk-K2Q5MQWJ.js.map +1 -0
- package/dist/chunk-MLCRDVQ2.js +89 -0
- package/dist/chunk-MLCRDVQ2.js.map +1 -0
- package/dist/chunk-OLJIJYB5.js +46 -0
- package/dist/chunk-OLJIJYB5.js.map +1 -0
- package/dist/chunk-PCBRMJJJ.js +415 -0
- package/dist/chunk-PCBRMJJJ.js.map +1 -0
- package/dist/chunk-SMTOVZ3O.js +19 -0
- package/dist/chunk-SMTOVZ3O.js.map +1 -0
- package/dist/{chunk-A6DKIFWS.js → chunk-WQ2QTUYA.js} +9 -1
- package/dist/chunk-WQ2QTUYA.js.map +1 -0
- package/dist/chunk-WZHNMC6P.js +77 -0
- package/dist/chunk-WZHNMC6P.js.map +1 -0
- package/dist/icon.cjs +38 -23
- package/dist/icon.cjs.map +1 -1
- package/dist/icon.d.cts +6 -2
- package/dist/icon.d.ts +6 -2
- package/dist/icon.js +6 -4
- package/dist/index.cjs +417 -449
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +5 -11
- package/dist/index.d.ts +5 -11
- package/dist/index.js +42 -34
- package/dist/index.js.map +1 -1
- package/dist/keyboard-shortcut.cjs +238 -0
- package/dist/keyboard-shortcut.cjs.map +1 -0
- package/dist/keyboard-shortcut.d.cts +19 -0
- package/dist/keyboard-shortcut.d.ts +19 -0
- package/dist/keyboard-shortcut.js +14 -0
- package/dist/keyboard-shortcut.js.map +1 -0
- package/dist/lottie.cjs +5 -5
- package/dist/lottie.cjs.map +1 -1
- package/dist/lottie.js +1 -1
- package/dist/text-area.cjs +497 -0
- package/dist/text-area.cjs.map +1 -0
- package/dist/text-area.d.cts +18 -0
- package/dist/text-area.d.ts +18 -0
- package/dist/text-area.js +11 -0
- package/dist/text-area.js.map +1 -0
- package/dist/tokens.cjs +9 -0
- package/dist/tokens.cjs.map +1 -1
- package/dist/tokens.d.cts +2 -0
- package/dist/tokens.d.ts +2 -0
- package/dist/tokens.js +2 -2
- package/dist/utils.cjs +60 -0
- package/dist/utils.cjs.map +1 -0
- package/dist/utils.d.cts +7 -0
- package/dist/utils.d.ts +7 -0
- package/dist/utils.js +13 -0
- package/dist/utils.js.map +1 -0
- package/package.json +17 -1
- package/dist/chunk-2GFOESHR.js +0 -613
- package/dist/chunk-2GFOESHR.js.map +0 -1
- package/dist/chunk-6HNZQ2BF.js.map +0 -1
- package/dist/chunk-7AJSQJQ5.js +0 -1
- package/dist/chunk-A6DKIFWS.js.map +0 -1
- package/dist/chunk-P7NISN4V.js +0 -115
- package/dist/chunk-P7NISN4V.js.map +0 -1
- package/dist/chunk-UKM5VQKW.js.map +0 -1
- /package/dist/{chunk-7AJSQJQ5.js.map → chunk-72TJUKMV.js.map} +0 -0
|
@@ -0,0 +1,415 @@
|
|
|
1
|
+
import {
|
|
2
|
+
IconButton
|
|
3
|
+
} from "./chunk-MLCRDVQ2.js";
|
|
4
|
+
import {
|
|
5
|
+
typographyMixin,
|
|
6
|
+
typographyTypes
|
|
7
|
+
} from "./chunk-WQ2QTUYA.js";
|
|
8
|
+
import {
|
|
9
|
+
colors
|
|
10
|
+
} from "./chunk-JF3P66JF.js";
|
|
11
|
+
import {
|
|
12
|
+
markdownToPlainText
|
|
13
|
+
} from "./chunk-SMTOVZ3O.js";
|
|
14
|
+
|
|
15
|
+
// src/chat/chat-message-content/chat-message-content.tsx
|
|
16
|
+
import ReactMarkdown from "react-markdown";
|
|
17
|
+
import remarkBreaks from "remark-breaks";
|
|
18
|
+
import remarkGfm from "remark-gfm";
|
|
19
|
+
|
|
20
|
+
// src/chat/chat-message-content/chat-message-content-styles.ts
|
|
21
|
+
import styled from "styled-components";
|
|
22
|
+
var ContentWrapper = styled.div`
|
|
23
|
+
${typographyMixin(typographyTypes.GEIST_BODY_S_REGULAR)};
|
|
24
|
+
color: ${colors["brown-100"]};
|
|
25
|
+
word-break: break-word;
|
|
26
|
+
|
|
27
|
+
& h1 {
|
|
28
|
+
${typographyMixin(typographyTypes.GEIST_HEADING_S_BOLD)};
|
|
29
|
+
margin-block: 20px;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
& h2 {
|
|
33
|
+
${typographyMixin(typographyTypes.GEIST_BODY_L_SEMI_BOLD)};
|
|
34
|
+
margin-block: 12px;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
& h3,
|
|
38
|
+
& h4,
|
|
39
|
+
& h5,
|
|
40
|
+
& h6 {
|
|
41
|
+
${typographyMixin(typographyTypes.GEIST_BODY_M_SEMI_BOLD)};
|
|
42
|
+
margin-block: 8px;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
& strong {
|
|
46
|
+
${typographyMixin(typographyTypes.GEIST_BODY_S_SEMI_BOLD)};
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
& p {
|
|
50
|
+
margin-block: 8px;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
& ul,
|
|
54
|
+
& ol {
|
|
55
|
+
margin-block: 16px;
|
|
56
|
+
padding-left: 20px;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
& li + li {
|
|
60
|
+
margin-block: 4px;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
& ol {
|
|
64
|
+
list-style-type: decimal;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
& ol ol {
|
|
68
|
+
list-style-type: lower-alpha;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
& ol ol ol {
|
|
72
|
+
list-style-type: lower-roman;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
& a {
|
|
76
|
+
color: inherit;
|
|
77
|
+
text-decoration-line: underline;
|
|
78
|
+
text-decoration-style: dotted;
|
|
79
|
+
text-decoration-thickness: auto;
|
|
80
|
+
text-underline-offset: auto;
|
|
81
|
+
text-underline-position: from-font;
|
|
82
|
+
transition: color 75ms ease-in-out;
|
|
83
|
+
|
|
84
|
+
&:hover {
|
|
85
|
+
color: ${colors["blue-600"]};
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
& hr {
|
|
90
|
+
border: none;
|
|
91
|
+
border-top: 1px solid ${colors["brown-40"]};
|
|
92
|
+
margin-block: 20px;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
& table {
|
|
96
|
+
margin: 0;
|
|
97
|
+
width: 100%;
|
|
98
|
+
border-collapse: collapse;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
& th,
|
|
102
|
+
& td {
|
|
103
|
+
border: none;
|
|
104
|
+
border-bottom: 1px solid ${colors["brown-40"]};
|
|
105
|
+
text-align: left;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
& th {
|
|
109
|
+
${typographyMixin(typographyTypes.GEIST_LABEL_CAPTION_MEDIUM)};
|
|
110
|
+
padding: 8px;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
& td {
|
|
114
|
+
${typographyMixin(typographyTypes.GEIST_BODY_XS_MEDIUM)};
|
|
115
|
+
padding: 16px 8px;
|
|
116
|
+
min-width: 150px;
|
|
117
|
+
width: 1%;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
& td strong {
|
|
121
|
+
font-weight: inherit;
|
|
122
|
+
font-size: inherit;
|
|
123
|
+
line-height: inherit;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
& blockquote {
|
|
127
|
+
margin-block: 4px;
|
|
128
|
+
margin-inline: 0px;
|
|
129
|
+
padding-left: 16px;
|
|
130
|
+
border-left: 4px solid ${colors["brown-40"]};
|
|
131
|
+
color: ${colors["brown-80"]};
|
|
132
|
+
}
|
|
133
|
+
`;
|
|
134
|
+
var TableScroll = styled.div`
|
|
135
|
+
width: 100%;
|
|
136
|
+
overflow-x: auto;
|
|
137
|
+
overflow-y: hidden;
|
|
138
|
+
margin-block: 8px 16px;
|
|
139
|
+
`;
|
|
140
|
+
|
|
141
|
+
// src/chat/chat-message-content/chat-message-content.tsx
|
|
142
|
+
import { jsx } from "react/jsx-runtime";
|
|
143
|
+
function ScrollableTable({ node: _node, ...props }) {
|
|
144
|
+
return /* @__PURE__ */ jsx(TableScroll, { children: /* @__PURE__ */ jsx("table", { ...props }) });
|
|
145
|
+
}
|
|
146
|
+
var markdownComponents = {
|
|
147
|
+
table: ScrollableTable
|
|
148
|
+
};
|
|
149
|
+
function ChatMessageContent({ content }) {
|
|
150
|
+
return /* @__PURE__ */ jsx(ContentWrapper, { children: /* @__PURE__ */ jsx(ReactMarkdown, { remarkPlugins: [remarkGfm, remarkBreaks], components: markdownComponents, children: content }) });
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
// src/chat/chat-message-actions/chat-message-actions.tsx
|
|
154
|
+
import { useCallback as useCallback2 } from "react";
|
|
155
|
+
|
|
156
|
+
// node_modules/@tabler/icons-react/dist/esm/createReactComponent.mjs
|
|
157
|
+
import { forwardRef, createElement } from "react";
|
|
158
|
+
|
|
159
|
+
// node_modules/@tabler/icons-react/dist/esm/defaultAttributes.mjs
|
|
160
|
+
var defaultAttributes = {
|
|
161
|
+
outline: {
|
|
162
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
163
|
+
width: 24,
|
|
164
|
+
height: 24,
|
|
165
|
+
viewBox: "0 0 24 24",
|
|
166
|
+
fill: "none",
|
|
167
|
+
stroke: "currentColor",
|
|
168
|
+
strokeWidth: 2,
|
|
169
|
+
strokeLinecap: "round",
|
|
170
|
+
strokeLinejoin: "round"
|
|
171
|
+
},
|
|
172
|
+
filled: {
|
|
173
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
174
|
+
width: 24,
|
|
175
|
+
height: 24,
|
|
176
|
+
viewBox: "0 0 24 24",
|
|
177
|
+
fill: "currentColor",
|
|
178
|
+
stroke: "none"
|
|
179
|
+
}
|
|
180
|
+
};
|
|
181
|
+
|
|
182
|
+
// node_modules/@tabler/icons-react/dist/esm/createReactComponent.mjs
|
|
183
|
+
var createReactComponent = (type, iconName, iconNamePascal, iconNode) => {
|
|
184
|
+
const Component = forwardRef(
|
|
185
|
+
({ color = "currentColor", size = 24, stroke = 2, title, className, children, ...rest }, ref) => createElement(
|
|
186
|
+
"svg",
|
|
187
|
+
{
|
|
188
|
+
ref,
|
|
189
|
+
...defaultAttributes[type],
|
|
190
|
+
width: size,
|
|
191
|
+
height: size,
|
|
192
|
+
className: [`tabler-icon`, `tabler-icon-${iconName}`, className].join(" "),
|
|
193
|
+
...type === "filled" ? {
|
|
194
|
+
fill: color
|
|
195
|
+
} : {
|
|
196
|
+
strokeWidth: stroke,
|
|
197
|
+
stroke: color
|
|
198
|
+
},
|
|
199
|
+
...rest
|
|
200
|
+
},
|
|
201
|
+
[
|
|
202
|
+
title && createElement("title", { key: "svg-title" }, title),
|
|
203
|
+
...iconNode.map(([tag, attrs]) => createElement(tag, attrs)),
|
|
204
|
+
...Array.isArray(children) ? children : [children]
|
|
205
|
+
]
|
|
206
|
+
)
|
|
207
|
+
);
|
|
208
|
+
Component.displayName = `${iconNamePascal}`;
|
|
209
|
+
return Component;
|
|
210
|
+
};
|
|
211
|
+
|
|
212
|
+
// node_modules/@tabler/icons-react/dist/esm/icons/IconCheck.mjs
|
|
213
|
+
var __iconNode = [["path", { "d": "M5 12l5 5l10 -10", "key": "svg-0" }]];
|
|
214
|
+
var IconCheck = createReactComponent("outline", "check", "Check", __iconNode);
|
|
215
|
+
|
|
216
|
+
// node_modules/@tabler/icons-react/dist/esm/icons/IconCopy.mjs
|
|
217
|
+
var __iconNode2 = [["path", { "d": "M7 9.667a2.667 2.667 0 0 1 2.667 -2.667h8.666a2.667 2.667 0 0 1 2.667 2.667v8.666a2.667 2.667 0 0 1 -2.667 2.667h-8.666a2.667 2.667 0 0 1 -2.667 -2.667l0 -8.666", "key": "svg-0" }], ["path", { "d": "M4.012 16.737a2.005 2.005 0 0 1 -1.012 -1.737v-10c0 -1.1 .9 -2 2 -2h10c.75 0 1.158 .385 1.5 1", "key": "svg-1" }]];
|
|
218
|
+
var IconCopy = createReactComponent("outline", "copy", "Copy", __iconNode2);
|
|
219
|
+
|
|
220
|
+
// node_modules/@tabler/icons-react/dist/esm/icons/IconThumbDown.mjs
|
|
221
|
+
var __iconNode3 = [["path", { "d": "M7 13v-8a1 1 0 0 0 -1 -1h-2a1 1 0 0 0 -1 1v7a1 1 0 0 0 1 1h3a4 4 0 0 1 4 4v1a2 2 0 0 0 4 0v-5h3a2 2 0 0 0 2 -2l-1 -5a2 3 0 0 0 -2 -2h-7a3 3 0 0 0 -3 3", "key": "svg-0" }]];
|
|
222
|
+
var IconThumbDown = createReactComponent("outline", "thumb-down", "ThumbDown", __iconNode3);
|
|
223
|
+
|
|
224
|
+
// node_modules/@tabler/icons-react/dist/esm/icons/IconThumbUp.mjs
|
|
225
|
+
var __iconNode4 = [["path", { "d": "M7 11v8a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1v-7a1 1 0 0 1 1 -1h3a4 4 0 0 0 4 -4v-1a2 2 0 0 1 4 0v5h3a2 2 0 0 1 2 2l-1 5a2 3 0 0 1 -2 2h-7a3 3 0 0 1 -3 -3", "key": "svg-0" }]];
|
|
226
|
+
var IconThumbUp = createReactComponent("outline", "thumb-up", "ThumbUp", __iconNode4);
|
|
227
|
+
|
|
228
|
+
// src/chat/chat-context/chat-context.ts
|
|
229
|
+
import { createContext, useContext } from "react";
|
|
230
|
+
var ChatContext = createContext(null);
|
|
231
|
+
function useChatContext() {
|
|
232
|
+
const context = useContext(ChatContext);
|
|
233
|
+
if (!context) {
|
|
234
|
+
throw new Error("useChatContext must be used within a Chat.Root component");
|
|
235
|
+
}
|
|
236
|
+
return context;
|
|
237
|
+
}
|
|
238
|
+
|
|
239
|
+
// src/chat/hooks/use-copy-to-clipboard.ts
|
|
240
|
+
import { useState, useCallback, useRef, useEffect } from "react";
|
|
241
|
+
|
|
242
|
+
// src/utils/clipboard.ts
|
|
243
|
+
function copyToClipboard(text, options) {
|
|
244
|
+
navigator.clipboard.writeText(text).then(
|
|
245
|
+
() => options?.onSuccess?.(),
|
|
246
|
+
(error) => options?.onFailure?.(error)
|
|
247
|
+
);
|
|
248
|
+
}
|
|
249
|
+
|
|
250
|
+
// src/chat/hooks/use-copy-to-clipboard.ts
|
|
251
|
+
var RESET_DELAY_MS = 2e3;
|
|
252
|
+
function useCopyToClipboard() {
|
|
253
|
+
const [isCopied, setIsCopied] = useState(false);
|
|
254
|
+
const timeoutRef = useRef(null);
|
|
255
|
+
useEffect(() => {
|
|
256
|
+
return () => {
|
|
257
|
+
if (timeoutRef.current) clearTimeout(timeoutRef.current);
|
|
258
|
+
};
|
|
259
|
+
}, []);
|
|
260
|
+
const copy = useCallback((text) => {
|
|
261
|
+
copyToClipboard(markdownToPlainText(text), {
|
|
262
|
+
onSuccess: () => {
|
|
263
|
+
setIsCopied(true);
|
|
264
|
+
if (timeoutRef.current) clearTimeout(timeoutRef.current);
|
|
265
|
+
timeoutRef.current = setTimeout(() => {
|
|
266
|
+
setIsCopied(false);
|
|
267
|
+
timeoutRef.current = null;
|
|
268
|
+
}, RESET_DELAY_MS);
|
|
269
|
+
}
|
|
270
|
+
});
|
|
271
|
+
}, []);
|
|
272
|
+
return { isCopied, copy };
|
|
273
|
+
}
|
|
274
|
+
|
|
275
|
+
// src/chat/constants.ts
|
|
276
|
+
var MESSAGE_ROLE = {
|
|
277
|
+
USER: "user",
|
|
278
|
+
ASSISTANT: "assistant"
|
|
279
|
+
};
|
|
280
|
+
|
|
281
|
+
// src/chat/chat-message-actions/chat-message-actions-styles.ts
|
|
282
|
+
import styled2 from "styled-components";
|
|
283
|
+
var FADE_DURATION_MS = 150;
|
|
284
|
+
var ANIMATE_DURATION_MS = 200;
|
|
285
|
+
var ActionsContainer = styled2.div`
|
|
286
|
+
display: flex;
|
|
287
|
+
opacity: ${({ $role }) => $role === MESSAGE_ROLE.ASSISTANT ? 1 : 0};
|
|
288
|
+
pointer-events: ${({ $role }) => $role === MESSAGE_ROLE.ASSISTANT ? "auto" : "none"};
|
|
289
|
+
transition: opacity ${FADE_DURATION_MS}ms ease;
|
|
290
|
+
`;
|
|
291
|
+
var AnimatedAction = styled2.div`
|
|
292
|
+
display: flex;
|
|
293
|
+
overflow: hidden;
|
|
294
|
+
max-width: ${({ $visible }) => $visible ? "40px" : "0"};
|
|
295
|
+
opacity: ${({ $visible }) => $visible ? 1 : 0};
|
|
296
|
+
transition: max-width ${ANIMATE_DURATION_MS}ms ease, opacity ${ANIMATE_DURATION_MS}ms ease;
|
|
297
|
+
`;
|
|
298
|
+
|
|
299
|
+
// src/chat/chat-message-actions/chat-message-actions.tsx
|
|
300
|
+
import { jsx as jsx2, jsxs } from "react/jsx-runtime";
|
|
301
|
+
function ChatMessageActions({ className, messageId, content, role, isHelpful }) {
|
|
302
|
+
const { onCopyMessage, onThumbUpClick, onThumbDownClick } = useChatContext();
|
|
303
|
+
const { isCopied, copy } = useCopyToClipboard();
|
|
304
|
+
const handleCopy = useCallback2(() => {
|
|
305
|
+
copy(content);
|
|
306
|
+
onCopyMessage?.(messageId);
|
|
307
|
+
}, [content, messageId, copy, onCopyMessage]);
|
|
308
|
+
const handleThumbUp = useCallback2(() => {
|
|
309
|
+
onThumbUpClick?.(messageId, isHelpful === true ? null : true);
|
|
310
|
+
}, [messageId, isHelpful, onThumbUpClick]);
|
|
311
|
+
const handleThumbDown = useCallback2(() => {
|
|
312
|
+
onThumbDownClick?.(messageId, isHelpful === false ? null : false);
|
|
313
|
+
}, [messageId, isHelpful, onThumbDownClick]);
|
|
314
|
+
const isAssistant = role === MESSAGE_ROLE.ASSISTANT;
|
|
315
|
+
const hasFeedback = isAssistant && (onThumbUpClick || onThumbDownClick);
|
|
316
|
+
return /* @__PURE__ */ jsxs(ActionsContainer, { $role: role, className, children: [
|
|
317
|
+
/* @__PURE__ */ jsx2(
|
|
318
|
+
IconButton,
|
|
319
|
+
{
|
|
320
|
+
icon: isCopied ? IconCheck : IconCopy,
|
|
321
|
+
onClick: handleCopy,
|
|
322
|
+
"aria-label": isCopied ? "Copied" : "Copy message"
|
|
323
|
+
}
|
|
324
|
+
),
|
|
325
|
+
hasFeedback && /* @__PURE__ */ jsx2(AnimatedAction, { $visible: isHelpful !== false, children: /* @__PURE__ */ jsx2(
|
|
326
|
+
IconButton,
|
|
327
|
+
{
|
|
328
|
+
icon: IconThumbUp,
|
|
329
|
+
onClick: handleThumbUp,
|
|
330
|
+
isSelected: isHelpful === true,
|
|
331
|
+
"aria-label": "Good response"
|
|
332
|
+
}
|
|
333
|
+
) }),
|
|
334
|
+
hasFeedback && /* @__PURE__ */ jsx2(AnimatedAction, { $visible: isHelpful !== true, children: /* @__PURE__ */ jsx2(
|
|
335
|
+
IconButton,
|
|
336
|
+
{
|
|
337
|
+
icon: IconThumbDown,
|
|
338
|
+
onClick: handleThumbDown,
|
|
339
|
+
isSelected: isHelpful === false,
|
|
340
|
+
"aria-label": "Bad response"
|
|
341
|
+
}
|
|
342
|
+
) })
|
|
343
|
+
] });
|
|
344
|
+
}
|
|
345
|
+
|
|
346
|
+
// src/chat/chat-message/chat-message-styles.ts
|
|
347
|
+
import styled3 from "styled-components";
|
|
348
|
+
var MessageRow = styled3.div`
|
|
349
|
+
display: flex;
|
|
350
|
+
justify-content: ${({ $role }) => $role === MESSAGE_ROLE.USER ? "flex-end" : "flex-start"};
|
|
351
|
+
|
|
352
|
+
&:hover ${ActionsContainer} {
|
|
353
|
+
opacity: 1;
|
|
354
|
+
pointer-events: auto;
|
|
355
|
+
}
|
|
356
|
+
`;
|
|
357
|
+
var MessageContainer = styled3.div`
|
|
358
|
+
display: flex;
|
|
359
|
+
flex-direction: column;
|
|
360
|
+
align-items: ${({ $role }) => $role === MESSAGE_ROLE.USER ? "flex-end" : "flex-start"};
|
|
361
|
+
max-width: 90%;
|
|
362
|
+
width: ${({ $role }) => $role === MESSAGE_ROLE.USER ? "auto" : "100%"};
|
|
363
|
+
gap: 12px;
|
|
364
|
+
`;
|
|
365
|
+
var MessageBubble = styled3.div`
|
|
366
|
+
${typographyMixin(typographyTypes.GEIST_BODY_S_REGULAR)};
|
|
367
|
+
color: ${colors["brown-100"]};
|
|
368
|
+
background: ${({ $role }) => $role === MESSAGE_ROLE.USER ? colors.white : "transparent"};
|
|
369
|
+
padding: ${({ $role }) => $role === MESSAGE_ROLE.USER ? "12px 16px" : "0"};
|
|
370
|
+
border-radius: ${({ $role }) => $role === MESSAGE_ROLE.USER ? "16px" : "0"};
|
|
371
|
+
max-width: 100%;
|
|
372
|
+
min-width: 0;
|
|
373
|
+
`;
|
|
374
|
+
|
|
375
|
+
// src/chat/chat-message/chat-message.tsx
|
|
376
|
+
import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
377
|
+
function ChatMessage({ message }) {
|
|
378
|
+
return /* @__PURE__ */ jsx3(MessageRow, { $role: message.role, children: /* @__PURE__ */ jsxs2(MessageContainer, { $role: message.role, children: [
|
|
379
|
+
/* @__PURE__ */ jsx3(MessageBubble, { $role: message.role, children: /* @__PURE__ */ jsx3(ChatMessageContent, { content: message.content }) }),
|
|
380
|
+
/* @__PURE__ */ jsx3(
|
|
381
|
+
ChatMessageActions,
|
|
382
|
+
{
|
|
383
|
+
messageId: message.id,
|
|
384
|
+
content: message.content,
|
|
385
|
+
role: message.role,
|
|
386
|
+
isHelpful: message.isHelpful
|
|
387
|
+
}
|
|
388
|
+
)
|
|
389
|
+
] }) });
|
|
390
|
+
}
|
|
391
|
+
|
|
392
|
+
export {
|
|
393
|
+
ChatContext,
|
|
394
|
+
useChatContext,
|
|
395
|
+
useCopyToClipboard,
|
|
396
|
+
MESSAGE_ROLE,
|
|
397
|
+
ChatMessage
|
|
398
|
+
};
|
|
399
|
+
/*! Bundled license information:
|
|
400
|
+
|
|
401
|
+
@tabler/icons-react/dist/esm/defaultAttributes.mjs:
|
|
402
|
+
@tabler/icons-react/dist/esm/createReactComponent.mjs:
|
|
403
|
+
@tabler/icons-react/dist/esm/icons/IconCheck.mjs:
|
|
404
|
+
@tabler/icons-react/dist/esm/icons/IconCopy.mjs:
|
|
405
|
+
@tabler/icons-react/dist/esm/icons/IconThumbDown.mjs:
|
|
406
|
+
@tabler/icons-react/dist/esm/icons/IconThumbUp.mjs:
|
|
407
|
+
@tabler/icons-react/dist/esm/tabler-icons-react.mjs:
|
|
408
|
+
(**
|
|
409
|
+
* @license @tabler/icons-react v3.37.1 - MIT
|
|
410
|
+
*
|
|
411
|
+
* This source code is licensed under the MIT license.
|
|
412
|
+
* See the LICENSE file in the root directory of this source tree.
|
|
413
|
+
*)
|
|
414
|
+
*/
|
|
415
|
+
//# sourceMappingURL=chunk-PCBRMJJJ.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/chat/chat-message-content/chat-message-content.tsx","../src/chat/chat-message-content/chat-message-content-styles.ts","../src/chat/chat-message-actions/chat-message-actions.tsx","../node_modules/@tabler/icons-react/src/defaultAttributes.ts","../node_modules/@tabler/icons-react/src/createReactComponent.ts","../node_modules/@tabler/icons-react/src/icons/IconCheck.ts","../node_modules/@tabler/icons-react/src/icons/IconCopy.ts","../node_modules/@tabler/icons-react/src/icons/IconThumbDown.ts","../node_modules/@tabler/icons-react/src/icons/IconThumbUp.ts","../src/chat/chat-context/chat-context.ts","../src/chat/hooks/use-copy-to-clipboard.ts","../src/utils/clipboard.ts","../src/chat/constants.ts","../src/chat/chat-message-actions/chat-message-actions-styles.ts","../src/chat/chat-message/chat-message-styles.ts","../src/chat/chat-message/chat-message.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport ReactMarkdown from \"react-markdown\";\nimport remarkBreaks from \"remark-breaks\";\nimport remarkGfm from \"remark-gfm\";\n\nimport { ContentWrapper, TableScroll } from \"./chat-message-content-styles\";\n\ninterface ChatMessageContentProps {\n content: string;\n}\n\nfunction ScrollableTable({ node: _node, ...props }: { node?: unknown; children?: ReactNode }): ReactNode {\n return (\n <TableScroll>\n <table {...props} />\n </TableScroll>\n );\n}\n\nconst markdownComponents = {\n table: ScrollableTable as React.ComponentType<unknown>,\n};\n\nexport function ChatMessageContent({ content }: ChatMessageContentProps) {\n return (\n <ContentWrapper>\n <ReactMarkdown remarkPlugins={[remarkGfm, remarkBreaks]} components={markdownComponents}>\n {content}\n </ReactMarkdown>\n </ContentWrapper>\n );\n}\n","import styled from \"styled-components\";\n\nimport { colors } from \"../../tokens/colors\";\nimport { typographyMixin, typographyTypes } from \"../../tokens/typography\";\n\nexport const ContentWrapper = styled.div`\n ${typographyMixin(typographyTypes.GEIST_BODY_S_REGULAR)};\n color: ${colors[\"brown-100\"]};\n word-break: break-word;\n\n & h1 {\n ${typographyMixin(typographyTypes.GEIST_HEADING_S_BOLD)};\n margin-block: 20px;\n }\n\n & h2 {\n ${typographyMixin(typographyTypes.GEIST_BODY_L_SEMI_BOLD)};\n margin-block: 12px;\n }\n\n & h3,\n & h4,\n & h5,\n & h6 {\n ${typographyMixin(typographyTypes.GEIST_BODY_M_SEMI_BOLD)};\n margin-block: 8px;\n }\n\n & strong {\n ${typographyMixin(typographyTypes.GEIST_BODY_S_SEMI_BOLD)};\n }\n\n & p {\n margin-block: 8px;\n }\n\n & ul,\n & ol {\n margin-block: 16px;\n padding-left: 20px;\n }\n\n & li + li {\n margin-block: 4px;\n }\n\n & ol {\n list-style-type: decimal;\n }\n\n & ol ol {\n list-style-type: lower-alpha;\n }\n\n & ol ol ol {\n list-style-type: lower-roman;\n }\n\n & a {\n color: inherit;\n text-decoration-line: underline;\n text-decoration-style: dotted;\n text-decoration-thickness: auto;\n text-underline-offset: auto;\n text-underline-position: from-font;\n transition: color 75ms ease-in-out;\n\n &:hover {\n color: ${colors[\"blue-600\"]};\n }\n }\n\n & hr {\n border: none;\n border-top: 1px solid ${colors[\"brown-40\"]};\n margin-block: 20px;\n }\n\n & table {\n margin: 0;\n width: 100%;\n border-collapse: collapse;\n }\n\n & th,\n & td {\n border: none;\n border-bottom: 1px solid ${colors[\"brown-40\"]};\n text-align: left;\n }\n\n & th {\n ${typographyMixin(typographyTypes.GEIST_LABEL_CAPTION_MEDIUM)};\n padding: 8px;\n }\n\n & td {\n ${typographyMixin(typographyTypes.GEIST_BODY_XS_MEDIUM)};\n padding: 16px 8px;\n min-width: 150px;\n width: 1%;\n }\n\n & td strong {\n font-weight: inherit;\n font-size: inherit;\n line-height: inherit;\n }\n\n & blockquote {\n margin-block: 4px;\n margin-inline: 0px;\n padding-left: 16px;\n border-left: 4px solid ${colors[\"brown-40\"]};\n color: ${colors[\"brown-80\"]};\n }\n`;\n\nexport const TableScroll = styled.div`\n width: 100%;\n overflow-x: auto;\n overflow-y: hidden;\n margin-block: 8px 16px;\n`;\n","import { useCallback } from \"react\";\nimport { IconCopy, IconCheck, IconThumbUp, IconThumbDown } from \"@tabler/icons-react\";\n\nimport { IconButton } from \"../../components/icon-button/icon-button\";\nimport { useChatContext } from \"../chat-context/chat-context\";\nimport { useCopyToClipboard } from \"../hooks/use-copy-to-clipboard\";\nimport { MESSAGE_ROLE } from \"../constants\";\nimport type { MessageRole } from \"../types\";\nimport { ActionsContainer, AnimatedAction } from \"./chat-message-actions-styles\";\n\ninterface ChatMessageActionsProps {\n className?: string;\n messageId: string;\n content: string;\n role: MessageRole;\n isHelpful?: boolean | null;\n}\n\nexport function ChatMessageActions({ className, messageId, content, role, isHelpful }: ChatMessageActionsProps) {\n const { onCopyMessage, onThumbUpClick, onThumbDownClick } = useChatContext();\n const { isCopied, copy } = useCopyToClipboard();\n\n const handleCopy = useCallback(() => {\n copy(content);\n onCopyMessage?.(messageId);\n }, [content, messageId, copy, onCopyMessage]);\n\n const handleThumbUp = useCallback(() => {\n onThumbUpClick?.(messageId, isHelpful === true ? null : true);\n }, [messageId, isHelpful, onThumbUpClick]);\n\n const handleThumbDown = useCallback(() => {\n onThumbDownClick?.(messageId, isHelpful === false ? null : false);\n }, [messageId, isHelpful, onThumbDownClick]);\n\n const isAssistant = role === MESSAGE_ROLE.ASSISTANT;\n const hasFeedback = isAssistant && (onThumbUpClick || onThumbDownClick);\n\n return (\n <ActionsContainer $role={role} className={className}>\n <IconButton\n icon={isCopied ? IconCheck : IconCopy}\n onClick={handleCopy}\n aria-label={isCopied ? \"Copied\" : \"Copy message\"}\n />\n\n {hasFeedback && (\n <AnimatedAction $visible={isHelpful !== false}>\n <IconButton\n icon={IconThumbUp}\n onClick={handleThumbUp}\n isSelected={isHelpful === true}\n aria-label=\"Good response\"\n />\n </AnimatedAction>\n )}\n\n {hasFeedback && (\n <AnimatedAction $visible={isHelpful !== true}>\n <IconButton\n icon={IconThumbDown}\n onClick={handleThumbDown}\n isSelected={isHelpful === false}\n aria-label=\"Bad response\"\n />\n </AnimatedAction>\n )}\n </ActionsContainer>\n );\n}\n","export default {\n outline: {\n xmlns: 'http://www.w3.org/2000/svg',\n width: 24,\n height: 24,\n viewBox: '0 0 24 24',\n fill: 'none',\n stroke: 'currentColor',\n strokeWidth: 2,\n strokeLinecap: 'round',\n strokeLinejoin: 'round',\n },\n filled: {\n xmlns: 'http://www.w3.org/2000/svg',\n width: 24,\n height: 24,\n viewBox: '0 0 24 24',\n fill: 'currentColor',\n stroke: 'none',\n },\n};\n","import { forwardRef, createElement } from 'react';\nimport defaultAttributes from './defaultAttributes';\nimport type { IconNode, IconProps, Icon } from './types';\n\nconst createReactComponent = (\n type: 'outline' | 'filled',\n iconName: string,\n iconNamePascal: string,\n iconNode: IconNode,\n) => {\n const Component = forwardRef<SVGSVGElement, IconProps>(\n (\n { color = 'currentColor', size = 24, stroke = 2, title, className, children, ...rest }: IconProps,\n ref,\n ) =>\n createElement(\n 'svg',\n {\n ref,\n ...defaultAttributes[type],\n width: size,\n height: size,\n className: [`tabler-icon`, `tabler-icon-${iconName}`, className].join(' '),\n ...(type === 'filled'\n ? {\n fill: color,\n }\n : {\n strokeWidth: stroke,\n stroke: color,\n }),\n ...rest,\n },\n [\n title && createElement('title', { key: 'svg-title' }, title),\n ...iconNode.map(([tag, attrs]) => createElement(tag, attrs)),\n ...(Array.isArray(children) ? children : [children]),\n ],\n ),\n );\n\n Component.displayName = `${iconNamePascal}`;\n\n return Component;\n};\n\nexport default createReactComponent;\n","import createReactComponent from '../createReactComponent';\nimport { IconNode } from '../types';\n\nexport const __iconNode: IconNode = [[\"path\",{\"d\":\"M5 12l5 5l10 -10\",\"key\":\"svg-0\"}]]\n\nconst IconCheck = createReactComponent('outline', 'check', 'Check', __iconNode);\n\nexport default IconCheck;","import createReactComponent from '../createReactComponent';\nimport { IconNode } from '../types';\n\nexport const __iconNode: IconNode = [[\"path\",{\"d\":\"M7 9.667a2.667 2.667 0 0 1 2.667 -2.667h8.666a2.667 2.667 0 0 1 2.667 2.667v8.666a2.667 2.667 0 0 1 -2.667 2.667h-8.666a2.667 2.667 0 0 1 -2.667 -2.667l0 -8.666\",\"key\":\"svg-0\"}],[\"path\",{\"d\":\"M4.012 16.737a2.005 2.005 0 0 1 -1.012 -1.737v-10c0 -1.1 .9 -2 2 -2h10c.75 0 1.158 .385 1.5 1\",\"key\":\"svg-1\"}]]\n\nconst IconCopy = createReactComponent('outline', 'copy', 'Copy', __iconNode);\n\nexport default IconCopy;","import createReactComponent from '../createReactComponent';\nimport { IconNode } from '../types';\n\nexport const __iconNode: IconNode = [[\"path\",{\"d\":\"M7 13v-8a1 1 0 0 0 -1 -1h-2a1 1 0 0 0 -1 1v7a1 1 0 0 0 1 1h3a4 4 0 0 1 4 4v1a2 2 0 0 0 4 0v-5h3a2 2 0 0 0 2 -2l-1 -5a2 3 0 0 0 -2 -2h-7a3 3 0 0 0 -3 3\",\"key\":\"svg-0\"}]]\n\nconst IconThumbDown = createReactComponent('outline', 'thumb-down', 'ThumbDown', __iconNode);\n\nexport default IconThumbDown;","import createReactComponent from '../createReactComponent';\nimport { IconNode } from '../types';\n\nexport const __iconNode: IconNode = [[\"path\",{\"d\":\"M7 11v8a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1v-7a1 1 0 0 1 1 -1h3a4 4 0 0 0 4 -4v-1a2 2 0 0 1 4 0v5h3a2 2 0 0 1 2 2l-1 5a2 3 0 0 1 -2 2h-7a3 3 0 0 1 -3 -3\",\"key\":\"svg-0\"}]]\n\nconst IconThumbUp = createReactComponent('outline', 'thumb-up', 'ThumbUp', __iconNode);\n\nexport default IconThumbUp;","import { createContext, useContext } from \"react\";\nimport type { ChatContextValue } from \"../types\";\n\nexport const ChatContext = createContext<ChatContextValue | null>(null);\n\nexport function useChatContext(): ChatContextValue {\n const context = useContext(ChatContext);\n if (!context) {\n throw new Error(\"useChatContext must be used within a Chat.Root component\");\n }\n return context;\n}\n","import { useState, useCallback, useRef, useEffect } from \"react\";\n\nimport { copyToClipboard } from \"@/utils/clipboard\";\nimport { markdownToPlainText } from \"@/utils/markdown-to-plain-text\";\n\nconst RESET_DELAY_MS = 2000;\n\ninterface UseCopyToClipboardResult {\n isCopied: boolean;\n copy: (text: string) => void;\n}\n\nexport function useCopyToClipboard(): UseCopyToClipboardResult {\n const [isCopied, setIsCopied] = useState(false);\n const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n useEffect(() => {\n return () => {\n if (timeoutRef.current) clearTimeout(timeoutRef.current);\n };\n }, []);\n\n const copy = useCallback((text: string) => {\n copyToClipboard(markdownToPlainText(text), {\n onSuccess: () => {\n setIsCopied(true);\n if (timeoutRef.current) clearTimeout(timeoutRef.current);\n timeoutRef.current = setTimeout(() => {\n setIsCopied(false);\n timeoutRef.current = null;\n }, RESET_DELAY_MS);\n },\n });\n }, []);\n\n return { isCopied, copy };\n}\n","interface CopyToClipboardOptions {\n onSuccess?: () => void;\n onFailure?: (error: unknown) => void;\n}\n\nexport function copyToClipboard(text: string, options?: CopyToClipboardOptions): void {\n navigator.clipboard.writeText(text).then(\n () => options?.onSuccess?.(),\n (error) => options?.onFailure?.(error)\n );\n}\n","export const MESSAGE_ROLE = {\n USER: \"user\",\n ASSISTANT: \"assistant\",\n} as const;\n","import styled from \"styled-components\";\n\nimport { MESSAGE_ROLE } from \"../constants\";\nimport type { MessageRole } from \"../types\";\n\nconst FADE_DURATION_MS = 150;\nconst ANIMATE_DURATION_MS = 200;\n\nexport const ActionsContainer = styled.div<{ $role: MessageRole }>`\n display: flex;\n opacity: ${({ $role }) => ($role === MESSAGE_ROLE.ASSISTANT ? 1 : 0)};\n pointer-events: ${({ $role }) => ($role === MESSAGE_ROLE.ASSISTANT ? \"auto\" : \"none\")};\n transition: opacity ${FADE_DURATION_MS}ms ease;\n`;\n\nexport const AnimatedAction = styled.div<{ $visible: boolean }>`\n display: flex;\n overflow: hidden;\n max-width: ${({ $visible }) => ($visible ? \"40px\" : \"0\")};\n opacity: ${({ $visible }) => ($visible ? 1 : 0)};\n transition: max-width ${ANIMATE_DURATION_MS}ms ease, opacity ${ANIMATE_DURATION_MS}ms ease;\n`;\n","import styled from \"styled-components\";\n\nimport { colors } from \"../../tokens/colors\";\nimport { typographyMixin, typographyTypes } from \"../../tokens/typography\";\nimport { ActionsContainer } from \"../chat-message-actions/chat-message-actions-styles\";\nimport { MESSAGE_ROLE } from \"../constants\";\nimport type { MessageRole } from \"../types\";\n\nexport const MessageRow = styled.div<{ $role: MessageRole }>`\n display: flex;\n justify-content: ${({ $role }) => ($role === MESSAGE_ROLE.USER ? \"flex-end\" : \"flex-start\")};\n\n &:hover ${ActionsContainer} {\n opacity: 1;\n pointer-events: auto;\n }\n`;\n\nexport const MessageContainer = styled.div<{ $role: MessageRole }>`\n display: flex;\n flex-direction: column;\n align-items: ${({ $role }) => ($role === MESSAGE_ROLE.USER ? \"flex-end\" : \"flex-start\")};\n max-width: 90%;\n width: ${({ $role }) => ($role === MESSAGE_ROLE.USER ? \"auto\" : \"100%\")};\n gap: 12px;\n`;\n\nexport const MessageBubble = styled.div<{ $role: MessageRole }>`\n ${typographyMixin(typographyTypes.GEIST_BODY_S_REGULAR)};\n color: ${colors[\"brown-100\"]};\n background: ${({ $role }) => ($role === MESSAGE_ROLE.USER ? colors.white : \"transparent\")};\n padding: ${({ $role }) => ($role === MESSAGE_ROLE.USER ? \"12px 16px\" : \"0\")};\n border-radius: ${({ $role }) => ($role === MESSAGE_ROLE.USER ? \"16px\" : \"0\")};\n max-width: 100%;\n min-width: 0;\n`;\n","import type { ChatMessage as ChatMessageType } from \"../types\";\nimport { ChatMessageContent } from \"../chat-message-content/chat-message-content\";\nimport { ChatMessageActions } from \"../chat-message-actions/chat-message-actions\";\nimport { MessageRow, MessageBubble, MessageContainer } from \"./chat-message-styles\";\n\ninterface ChatMessageProps {\n message: ChatMessageType;\n}\n\nexport function ChatMessage({ message }: ChatMessageProps) {\n return (\n <MessageRow $role={message.role}>\n <MessageContainer $role={message.role}>\n <MessageBubble $role={message.role}>\n <ChatMessageContent content={message.content} />\n </MessageBubble>\n <ChatMessageActions\n messageId={message.id}\n content={message.content}\n role={message.role}\n isHelpful={message.isHelpful}\n />\n </MessageContainer>\n </MessageRow>\n );\n}\n"],"mappings":"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","names":["useCallback","__iconNode","__iconNode","__iconNode","styled","styled","jsx","useCallback","styled","styled","jsx","jsxs"]}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
// src/utils/markdown-to-plain-text.ts
|
|
2
|
+
var PLACEHOLDER_PREFIX = "\u200B\u200BIC";
|
|
3
|
+
var PLACEHOLDER_SUFFIX = "\u200B\u200B";
|
|
4
|
+
var PLACEHOLDER_REGEX = new RegExp(`${PLACEHOLDER_PREFIX}(\\d+)${PLACEHOLDER_SUFFIX}`, "g");
|
|
5
|
+
function markdownToPlainText(markdown) {
|
|
6
|
+
if (!markdown) return "";
|
|
7
|
+
const inlineCodeSnippets = [];
|
|
8
|
+
let result = markdown.replace(/```[\s\S]*?```/g, "").replace(/`([^`]+)`/g, (_match, code) => {
|
|
9
|
+
inlineCodeSnippets.push(code);
|
|
10
|
+
return `${PLACEHOLDER_PREFIX}${inlineCodeSnippets.length - 1}${PLACEHOLDER_SUFFIX}`;
|
|
11
|
+
}).replace(/^#{1,6}\s+/gm, "").replace(/^(?:---|\*\*\*|___)\s*$/gm, "").replace(/\*{3}(.+?)\*{3}/g, "$1").replace(/\*{2}(.+?)\*{2}/g, "$1").replace(/_{2}(.+?)_{2}/g, "$1").replace(/\*(.+?)\*/g, "$1").replace(/_(.+?)_/g, "$1").replace(/~~(.+?)~~/g, "$1").replace(/!\[([^\]]*)\]\([^)]+\)/g, "$1").replace(/\[([^\]]+)\]\([^)]+\)/g, "$1").replace(/^>\s?/gm, "").replace(/^\|[-:\s|]+\|\s*$/gm, "").replace(/^\|\s?/gm, "").replace(/\s?\|$/gm, "").replace(/\n{3,}/g, "\n\n").trim();
|
|
12
|
+
result = result.replace(PLACEHOLDER_REGEX, (_match, index) => inlineCodeSnippets[Number(index)]);
|
|
13
|
+
return result;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
export {
|
|
17
|
+
markdownToPlainText
|
|
18
|
+
};
|
|
19
|
+
//# sourceMappingURL=chunk-SMTOVZ3O.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/utils/markdown-to-plain-text.ts"],"sourcesContent":["const PLACEHOLDER_PREFIX = \"\\u200B\\u200BIC\";\nconst PLACEHOLDER_SUFFIX = \"\\u200B\\u200B\";\nconst PLACEHOLDER_REGEX = new RegExp(`${PLACEHOLDER_PREFIX}(\\\\d+)${PLACEHOLDER_SUFFIX}`, \"g\");\n\nexport function markdownToPlainText(markdown: string): string {\n if (!markdown) return \"\";\n\n // Protect inline code content from bold/italic stripping by replacing with placeholders\n const inlineCodeSnippets: string[] = [];\n let result = markdown\n // Code blocks (must come first)\n .replace(/```[\\s\\S]*?```/g, \"\")\n // Inline code → placeholder\n .replace(/`([^`]+)`/g, (_match, code: string) => {\n inlineCodeSnippets.push(code);\n return `${PLACEHOLDER_PREFIX}${inlineCodeSnippets.length - 1}${PLACEHOLDER_SUFFIX}`;\n })\n // Remove headings markers, keep text\n .replace(/^#{1,6}\\s+/gm, \"\")\n // Remove horizontal rules\n .replace(/^(?:---|\\*\\*\\*|___)\\s*$/gm, \"\")\n // Bold + italic\n .replace(/\\*{3}(.+?)\\*{3}/g, \"$1\")\n // Bold\n .replace(/\\*{2}(.+?)\\*{2}/g, \"$1\")\n .replace(/_{2}(.+?)_{2}/g, \"$1\")\n // Italic\n .replace(/\\*(.+?)\\*/g, \"$1\")\n .replace(/_(.+?)_/g, \"$1\")\n // Strikethrough\n .replace(/~~(.+?)~~/g, \"$1\")\n // Images:  → alt (must come before links)\n .replace(/!\\[([^\\]]*)\\]\\([^)]+\\)/g, \"$1\")\n // Links: [text](url) → text\n .replace(/\\[([^\\]]+)\\]\\([^)]+\\)/g, \"$1\")\n // Blockquote markers\n .replace(/^>\\s?/gm, \"\")\n // Table separator rows (|---|---|)\n .replace(/^\\|[-:\\s|]+\\|\\s*$/gm, \"\")\n // Table rows: | a | b | → a | b\n .replace(/^\\|\\s?/gm, \"\")\n .replace(/\\s?\\|$/gm, \"\")\n // Collapse multiple blank lines\n .replace(/\\n{3,}/g, \"\\n\\n\")\n .trim();\n\n // Restore inline code content\n result = result.replace(PLACEHOLDER_REGEX, (_match, index: string) => inlineCodeSnippets[Number(index)]);\n\n return result;\n}\n"],"mappings":";AAAA,IAAM,qBAAqB;AAC3B,IAAM,qBAAqB;AAC3B,IAAM,oBAAoB,IAAI,OAAO,GAAG,kBAAkB,SAAS,kBAAkB,IAAI,GAAG;AAErF,SAAS,oBAAoB,UAA0B;AAC5D,MAAI,CAAC,SAAU,QAAO;AAGtB,QAAM,qBAA+B,CAAC;AACtC,MAAI,SAAS,SAEV,QAAQ,mBAAmB,EAAE,EAE7B,QAAQ,cAAc,CAAC,QAAQ,SAAiB;AAC/C,uBAAmB,KAAK,IAAI;AAC5B,WAAO,GAAG,kBAAkB,GAAG,mBAAmB,SAAS,CAAC,GAAG,kBAAkB;AAAA,EACnF,CAAC,EAEA,QAAQ,gBAAgB,EAAE,EAE1B,QAAQ,6BAA6B,EAAE,EAEvC,QAAQ,oBAAoB,IAAI,EAEhC,QAAQ,oBAAoB,IAAI,EAChC,QAAQ,kBAAkB,IAAI,EAE9B,QAAQ,cAAc,IAAI,EAC1B,QAAQ,YAAY,IAAI,EAExB,QAAQ,cAAc,IAAI,EAE1B,QAAQ,2BAA2B,IAAI,EAEvC,QAAQ,0BAA0B,IAAI,EAEtC,QAAQ,WAAW,EAAE,EAErB,QAAQ,uBAAuB,EAAE,EAEjC,QAAQ,YAAY,EAAE,EACtB,QAAQ,YAAY,EAAE,EAEtB,QAAQ,WAAW,MAAM,EACzB,KAAK;AAGR,WAAS,OAAO,QAAQ,mBAAmB,CAAC,QAAQ,UAAkB,mBAAmB,OAAO,KAAK,CAAC,CAAC;AAEvG,SAAO;AACT;","names":[]}
|
|
@@ -16,6 +16,7 @@ var typographyTypes = {
|
|
|
16
16
|
GEIST_BODY_S_REGULAR: "GEIST_BODY_S_REGULAR",
|
|
17
17
|
GEIST_BODY_S_MEDIUM: "GEIST_BODY_S_MEDIUM",
|
|
18
18
|
GEIST_BODY_S_SEMI_BOLD: "GEIST_BODY_S_SEMI_BOLD",
|
|
19
|
+
GEIST_BODY_S_BOLD: "GEIST_BODY_S_BOLD",
|
|
19
20
|
// Geist Body Medium (18px)
|
|
20
21
|
GEIST_BODY_M_LIGHT: "GEIST_BODY_M_LIGHT",
|
|
21
22
|
GEIST_BODY_M_REGULAR: "GEIST_BODY_M_REGULAR",
|
|
@@ -109,6 +110,13 @@ var typographyStyles = {
|
|
|
109
110
|
lineHeight: 24,
|
|
110
111
|
letterSpacing: -0.08
|
|
111
112
|
},
|
|
113
|
+
[typographyTypes.GEIST_BODY_S_BOLD]: {
|
|
114
|
+
fontFamily: fontFamilies.GEIST,
|
|
115
|
+
fontSize: 16,
|
|
116
|
+
fontWeight: 700,
|
|
117
|
+
lineHeight: 24,
|
|
118
|
+
letterSpacing: -0.08
|
|
119
|
+
},
|
|
112
120
|
// Geist Body Medium (18px)
|
|
113
121
|
[typographyTypes.GEIST_BODY_M_LIGHT]: {
|
|
114
122
|
fontFamily: fontFamilies.GEIST,
|
|
@@ -289,4 +297,4 @@ export {
|
|
|
289
297
|
typographyStyles,
|
|
290
298
|
typographyMixin
|
|
291
299
|
};
|
|
292
|
-
//# sourceMappingURL=chunk-
|
|
300
|
+
//# sourceMappingURL=chunk-WQ2QTUYA.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/tokens/typography.ts"],"sourcesContent":["export const fontFamilies = {\n GEIST: \"Geist\",\n CRIMSON_PRO: \"Crimson Pro\",\n} as const;\n\nexport const typographyTypes = {\n // Geist Label Caption (12px)\n GEIST_LABEL_CAPTION_REGULAR: \"GEIST_LABEL_CAPTION_REGULAR\",\n GEIST_LABEL_CAPTION_MEDIUM: \"GEIST_LABEL_CAPTION_MEDIUM\",\n GEIST_LABEL_CAPTION_SEMI_BOLD: \"GEIST_LABEL_CAPTION_SEMI_BOLD\",\n\n // Geist Body Extra Small (14px)\n GEIST_BODY_XS_REGULAR: \"GEIST_BODY_XS_REGULAR\",\n GEIST_BODY_XS_MEDIUM: \"GEIST_BODY_XS_MEDIUM\",\n GEIST_BODY_XS_BOLD: \"GEIST_BODY_XS_BOLD\",\n\n // Geist Body Small (16px)\n GEIST_BODY_S_REGULAR: \"GEIST_BODY_S_REGULAR\",\n GEIST_BODY_S_MEDIUM: \"GEIST_BODY_S_MEDIUM\",\n GEIST_BODY_S_SEMI_BOLD: \"GEIST_BODY_S_SEMI_BOLD\",\n GEIST_BODY_S_BOLD: \"GEIST_BODY_S_BOLD\",\n\n // Geist Body Medium (18px)\n GEIST_BODY_M_LIGHT: \"GEIST_BODY_M_LIGHT\",\n GEIST_BODY_M_REGULAR: \"GEIST_BODY_M_REGULAR\",\n GEIST_BODY_M_MEDIUM: \"GEIST_BODY_M_MEDIUM\",\n GEIST_BODY_M_SEMI_BOLD: \"GEIST_BODY_M_SEMI_BOLD\",\n\n // Geist Body Large (20px)\n GEIST_BODY_L_REGULAR: \"GEIST_BODY_L_REGULAR\",\n GEIST_BODY_L_MEDIUM: \"GEIST_BODY_L_MEDIUM\",\n GEIST_BODY_L_SEMI_BOLD: \"GEIST_BODY_L_SEMI_BOLD\",\n GEIST_BODY_L_BOLD: \"GEIST_BODY_L_BOLD\",\n\n // Geist Heading Small (24px)\n GEIST_HEADING_S_REGULAR: \"GEIST_HEADING_S_REGULAR\",\n GEIST_HEADING_S_MEDIUM: \"GEIST_HEADING_S_MEDIUM\",\n GEIST_HEADING_S_BOLD: \"GEIST_HEADING_S_BOLD\",\n\n // Geist Heading Medium (28px)\n GEIST_HEADING_M_BOLD: \"GEIST_HEADING_M_BOLD\",\n\n // Geist Heading Large (32px)\n GEIST_HEADING_L_REGULAR: \"GEIST_HEADING_L_REGULAR\",\n GEIST_HEADING_L_MEDIUM: \"GEIST_HEADING_L_MEDIUM\",\n GEIST_HEADING_L_SEMI_BOLD: \"GEIST_HEADING_L_SEMI_BOLD\",\n GEIST_HEADING_L_BOLD: \"GEIST_HEADING_L_BOLD\",\n\n // Geist Display Large (36px)\n GEIST_DISPLAY_L_MEDIUM: \"GEIST_DISPLAY_L_MEDIUM\",\n\n // Crimson Pro Body Small (16px)\n CRIMSON_PRO_BODY_S_LIGHT: \"CRIMSON_PRO_BODY_S_LIGHT\",\n\n // Crimson Pro Body Medium (18px)\n CRIMSON_PRO_BODY_M_LIGHT: \"CRIMSON_PRO_BODY_M_LIGHT\",\n\n // Crimson Pro Heading Medium (24px)\n CRIMSON_PRO_HEADING_M_MEDIUM: \"CRIMSON_PRO_HEADING_M_MEDIUM\",\n\n // Crimson Pro Display Extra Large (46px)\n CRIMSON_PRO_DISPLAY_XL_REGULAR: \"CRIMSON_PRO_DISPLAY_XL_REGULAR\",\n} as const;\n\nexport type TypographyType = (typeof typographyTypes)[keyof typeof typographyTypes];\n\nexport interface TypographyStyle {\n fontFamily: string;\n fontSize: number;\n fontWeight: number;\n lineHeight: number;\n letterSpacing?: number;\n fontStyle?: string;\n}\n\nexport const typographyStyles: Record<TypographyType, TypographyStyle> = {\n // Geist Label Caption (12px)\n [typographyTypes.GEIST_LABEL_CAPTION_REGULAR]: {\n fontFamily: fontFamilies.GEIST,\n fontSize: 12,\n fontWeight: 400,\n lineHeight: 16,\n },\n [typographyTypes.GEIST_LABEL_CAPTION_MEDIUM]: {\n fontFamily: fontFamilies.GEIST,\n fontSize: 12,\n fontWeight: 500,\n lineHeight: 16,\n },\n [typographyTypes.GEIST_LABEL_CAPTION_SEMI_BOLD]: {\n fontFamily: fontFamilies.GEIST,\n fontSize: 12,\n fontWeight: 600,\n lineHeight: 16,\n },\n\n // Geist Body Extra Small (14px)\n [typographyTypes.GEIST_BODY_XS_REGULAR]: {\n fontFamily: fontFamilies.GEIST,\n fontSize: 14,\n fontWeight: 400,\n lineHeight: 20,\n },\n [typographyTypes.GEIST_BODY_XS_MEDIUM]: {\n fontFamily: fontFamilies.GEIST,\n fontSize: 14,\n fontWeight: 500,\n lineHeight: 20,\n },\n [typographyTypes.GEIST_BODY_XS_BOLD]: {\n fontFamily: fontFamilies.GEIST,\n fontSize: 14,\n fontWeight: 600,\n lineHeight: 20,\n },\n\n // Geist Body Small (16px)\n [typographyTypes.GEIST_BODY_S_REGULAR]: {\n fontFamily: fontFamilies.GEIST,\n fontSize: 16,\n fontWeight: 400,\n lineHeight: 24,\n letterSpacing: -0.08,\n },\n [typographyTypes.GEIST_BODY_S_MEDIUM]: {\n fontFamily: fontFamilies.GEIST,\n fontSize: 16,\n fontWeight: 500,\n lineHeight: 24,\n letterSpacing: -0.08,\n },\n [typographyTypes.GEIST_BODY_S_SEMI_BOLD]: {\n fontFamily: fontFamilies.GEIST,\n fontSize: 16,\n fontWeight: 600,\n lineHeight: 24,\n letterSpacing: -0.08,\n },\n [typographyTypes.GEIST_BODY_S_BOLD]: {\n fontFamily: fontFamilies.GEIST,\n fontSize: 16,\n fontWeight: 700,\n lineHeight: 24,\n letterSpacing: -0.08,\n },\n\n // Geist Body Medium (18px)\n [typographyTypes.GEIST_BODY_M_LIGHT]: {\n fontFamily: fontFamilies.GEIST,\n fontSize: 18,\n fontWeight: 300,\n lineHeight: 28,\n letterSpacing: -0.09,\n },\n [typographyTypes.GEIST_BODY_M_REGULAR]: {\n fontFamily: fontFamilies.GEIST,\n fontSize: 18,\n fontWeight: 400,\n lineHeight: 28,\n letterSpacing: -0.09,\n },\n [typographyTypes.GEIST_BODY_M_MEDIUM]: {\n fontFamily: fontFamilies.GEIST,\n fontSize: 18,\n fontWeight: 500,\n lineHeight: 28,\n letterSpacing: -0.09,\n },\n [typographyTypes.GEIST_BODY_M_SEMI_BOLD]: {\n fontFamily: fontFamilies.GEIST,\n fontSize: 18,\n fontWeight: 600,\n lineHeight: 28,\n letterSpacing: -0.09,\n },\n\n // Geist Body Large (20px)\n [typographyTypes.GEIST_BODY_L_REGULAR]: {\n fontFamily: fontFamilies.GEIST,\n fontSize: 20,\n fontWeight: 400,\n lineHeight: 30,\n letterSpacing: -0.2,\n },\n [typographyTypes.GEIST_BODY_L_MEDIUM]: {\n fontFamily: fontFamilies.GEIST,\n fontSize: 20,\n fontWeight: 500,\n lineHeight: 30,\n letterSpacing: -0.2,\n },\n [typographyTypes.GEIST_BODY_L_SEMI_BOLD]: {\n fontFamily: fontFamilies.GEIST,\n fontSize: 20,\n fontWeight: 600,\n lineHeight: 30,\n letterSpacing: -0.2,\n },\n [typographyTypes.GEIST_BODY_L_BOLD]: {\n fontFamily: fontFamilies.GEIST,\n fontSize: 20,\n fontWeight: 700,\n lineHeight: 30,\n letterSpacing: -0.2,\n },\n\n // Geist Heading Small (24px)\n [typographyTypes.GEIST_HEADING_S_REGULAR]: {\n fontFamily: fontFamilies.GEIST,\n fontSize: 24,\n fontWeight: 400,\n lineHeight: 32,\n letterSpacing: -0.48,\n },\n [typographyTypes.GEIST_HEADING_S_MEDIUM]: {\n fontFamily: fontFamilies.GEIST,\n fontSize: 24,\n fontWeight: 500,\n lineHeight: 32,\n letterSpacing: -0.48,\n },\n [typographyTypes.GEIST_HEADING_S_BOLD]: {\n fontFamily: fontFamilies.GEIST,\n fontSize: 24,\n fontWeight: 700,\n lineHeight: 32,\n letterSpacing: -0.48,\n },\n\n // Geist Heading Medium (28px)\n [typographyTypes.GEIST_HEADING_M_BOLD]: {\n fontFamily: fontFamilies.GEIST,\n fontSize: 28,\n fontWeight: 700,\n lineHeight: 36,\n letterSpacing: -0.6,\n },\n\n // Geist Heading Large (32px)\n [typographyTypes.GEIST_HEADING_L_REGULAR]: {\n fontFamily: fontFamilies.GEIST,\n fontSize: 32,\n fontWeight: 400,\n lineHeight: 40,\n letterSpacing: -0.64,\n },\n [typographyTypes.GEIST_HEADING_L_MEDIUM]: {\n fontFamily: fontFamilies.GEIST,\n fontSize: 32,\n fontWeight: 500,\n lineHeight: 40,\n letterSpacing: -0.64,\n },\n [typographyTypes.GEIST_HEADING_L_SEMI_BOLD]: {\n fontFamily: fontFamilies.GEIST,\n fontSize: 32,\n fontWeight: 600,\n lineHeight: 40,\n letterSpacing: -0.64,\n },\n [typographyTypes.GEIST_HEADING_L_BOLD]: {\n fontFamily: fontFamilies.GEIST,\n fontSize: 32,\n fontWeight: 700,\n lineHeight: 40,\n letterSpacing: -0.64,\n },\n\n // Geist Display Large (36px)\n [typographyTypes.GEIST_DISPLAY_L_MEDIUM]: {\n fontFamily: fontFamilies.GEIST,\n fontSize: 36,\n fontWeight: 500,\n lineHeight: 44,\n letterSpacing: -0.72,\n },\n\n // Crimson Pro Body Small (16px)\n [typographyTypes.CRIMSON_PRO_BODY_S_LIGHT]: {\n fontFamily: fontFamilies.CRIMSON_PRO,\n fontSize: 16,\n fontWeight: 300,\n lineHeight: 20,\n letterSpacing: -0.32,\n fontStyle: \"italic\",\n },\n\n // Crimson Pro Body Medium (18px)\n [typographyTypes.CRIMSON_PRO_BODY_M_LIGHT]: {\n fontFamily: fontFamilies.CRIMSON_PRO,\n fontSize: 18,\n fontWeight: 300,\n lineHeight: 28,\n letterSpacing: 0,\n fontStyle: \"italic\",\n },\n\n // Crimson Pro Heading Medium (24px)\n [typographyTypes.CRIMSON_PRO_HEADING_M_MEDIUM]: {\n fontFamily: fontFamilies.CRIMSON_PRO,\n fontSize: 24,\n fontWeight: 400,\n lineHeight: 32,\n letterSpacing: -0.48,\n fontStyle: \"italic\",\n },\n\n // Crimson Pro Display Extra Large (46px)\n [typographyTypes.CRIMSON_PRO_DISPLAY_XL_REGULAR]: {\n fontFamily: fontFamilies.CRIMSON_PRO,\n fontSize: 46,\n fontWeight: 400,\n lineHeight: 54,\n letterSpacing: -1.38,\n fontStyle: \"italic\",\n },\n};\n\nexport function typographyMixin(type: TypographyType): string {\n const style = typographyStyles[type];\n return [\n `font-family: \"${style.fontFamily}\", sans-serif`,\n `font-size: ${style.fontSize}px`,\n `font-weight: ${style.fontWeight}`,\n `line-height: ${style.lineHeight}px`,\n `letter-spacing: ${style.letterSpacing != null ? `${style.letterSpacing}px` : \"inherit\"}`,\n `font-style: ${style.fontStyle ?? \"normal\"}`,\n ].join(\";\\n \");\n}\n"],"mappings":"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","names":[]}
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
import {
|
|
2
|
+
Icon
|
|
3
|
+
} from "./chunk-OLJIJYB5.js";
|
|
4
|
+
import {
|
|
5
|
+
colors
|
|
6
|
+
} from "./chunk-JF3P66JF.js";
|
|
7
|
+
|
|
8
|
+
// src/components/keyboard-shortcut/keyboard-shortcut-styles.ts
|
|
9
|
+
import styled, { css } from "styled-components";
|
|
10
|
+
|
|
11
|
+
// src/components/keyboard-shortcut/types.ts
|
|
12
|
+
var KEYBOARD_SHORTCUT_VARIANTS = {
|
|
13
|
+
OUTLINED: "outlined",
|
|
14
|
+
FILLED: "filled"
|
|
15
|
+
};
|
|
16
|
+
|
|
17
|
+
// src/components/keyboard-shortcut/keyboard-shortcut-styles.ts
|
|
18
|
+
var variantStyles = {
|
|
19
|
+
[KEYBOARD_SHORTCUT_VARIANTS.OUTLINED]: css`
|
|
20
|
+
border: 1px solid ${colors["white-alpha-40"]};
|
|
21
|
+
color: ${colors["brown-10"]};
|
|
22
|
+
`,
|
|
23
|
+
[KEYBOARD_SHORTCUT_VARIANTS.FILLED]: css`
|
|
24
|
+
background: ${colors["brown-80"]};
|
|
25
|
+
color: ${colors["brown-10"]};
|
|
26
|
+
`
|
|
27
|
+
};
|
|
28
|
+
var Wrapper = styled.div`
|
|
29
|
+
display: inline-flex;
|
|
30
|
+
align-items: center;
|
|
31
|
+
gap: 2px;
|
|
32
|
+
`;
|
|
33
|
+
var Key = styled.kbd`
|
|
34
|
+
display: inline-flex;
|
|
35
|
+
align-items: center;
|
|
36
|
+
justify-content: center;
|
|
37
|
+
padding: 2px;
|
|
38
|
+
border-radius: 6px;
|
|
39
|
+
${({ $variant }) => variantStyles[$variant]};
|
|
40
|
+
`;
|
|
41
|
+
|
|
42
|
+
// src/components/keyboard-shortcut/keyboard-shortcut.tsx
|
|
43
|
+
import { jsx } from "react/jsx-runtime";
|
|
44
|
+
function KeyboardShortcut({
|
|
45
|
+
keys,
|
|
46
|
+
variant = KEYBOARD_SHORTCUT_VARIANTS.OUTLINED,
|
|
47
|
+
className
|
|
48
|
+
}) {
|
|
49
|
+
return /* @__PURE__ */ jsx(Wrapper, { className, children: keys.map((KeyComponent, index) => /* @__PURE__ */ jsx(Key, { $variant: variant, children: /* @__PURE__ */ jsx(Icon, { icon: KeyComponent, size: 12 }) }, index)) });
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
// src/components/keyboard-shortcut/icons/icon-ctrl.tsx
|
|
53
|
+
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
54
|
+
function IconCtrl(props) {
|
|
55
|
+
const { width = 24, height = 24, ...rest } = props;
|
|
56
|
+
return /* @__PURE__ */ jsx2("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width, height, fill: "none", ...rest, children: /* @__PURE__ */ jsx2(
|
|
57
|
+
"text",
|
|
58
|
+
{
|
|
59
|
+
x: "50%",
|
|
60
|
+
y: "50%",
|
|
61
|
+
dominantBaseline: "central",
|
|
62
|
+
textAnchor: "middle",
|
|
63
|
+
fill: "currentColor",
|
|
64
|
+
fontFamily: "Geist, sans-serif",
|
|
65
|
+
fontWeight: 300,
|
|
66
|
+
fontSize: 14,
|
|
67
|
+
children: "Ctrl"
|
|
68
|
+
}
|
|
69
|
+
) });
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
export {
|
|
73
|
+
KEYBOARD_SHORTCUT_VARIANTS,
|
|
74
|
+
KeyboardShortcut,
|
|
75
|
+
IconCtrl
|
|
76
|
+
};
|
|
77
|
+
//# sourceMappingURL=chunk-WZHNMC6P.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/keyboard-shortcut/keyboard-shortcut-styles.ts","../src/components/keyboard-shortcut/types.ts","../src/components/keyboard-shortcut/keyboard-shortcut.tsx","../src/components/keyboard-shortcut/icons/icon-ctrl.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { colors } from \"../../tokens/colors\";\nimport { KEYBOARD_SHORTCUT_VARIANTS } from \"./types\";\nimport type { KeyboardShortcutVariant } from \"./types\";\n\nconst variantStyles: Record<KeyboardShortcutVariant, ReturnType<typeof css>> = {\n [KEYBOARD_SHORTCUT_VARIANTS.OUTLINED]: css`\n border: 1px solid ${colors[\"white-alpha-40\"]};\n color: ${colors[\"brown-10\"]};\n `,\n [KEYBOARD_SHORTCUT_VARIANTS.FILLED]: css`\n background: ${colors[\"brown-80\"]};\n color: ${colors[\"brown-10\"]};\n `,\n};\n\nexport const Wrapper = styled.div`\n display: inline-flex;\n align-items: center;\n gap: 2px;\n`;\n\nexport const Key = styled.kbd<{ $variant: KeyboardShortcutVariant }>`\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 2px;\n border-radius: 6px;\n ${({ $variant }) => variantStyles[$variant]};\n`;\n","import type { ComponentType, SVGProps } from \"react\";\n\nexport type KeyIcon = ComponentType<SVGProps<SVGSVGElement>>;\n\nexport const KEYBOARD_SHORTCUT_VARIANTS = {\n OUTLINED: \"outlined\",\n FILLED: \"filled\",\n} as const;\n\nexport type KeyboardShortcutVariant = (typeof KEYBOARD_SHORTCUT_VARIANTS)[keyof typeof KEYBOARD_SHORTCUT_VARIANTS];\n\nexport interface KeyboardShortcutProps {\n keys: KeyIcon[];\n variant?: KeyboardShortcutVariant;\n className?: string;\n}\n","import type { ReactElement } from \"react\";\n\nimport { Icon } from \"../icon/icon\";\nimport { Key, Wrapper } from \"./keyboard-shortcut-styles\";\nimport { KEYBOARD_SHORTCUT_VARIANTS } from \"./types\";\nimport type { KeyboardShortcutProps } from \"./types\";\n\nexport function KeyboardShortcut({\n keys,\n variant = KEYBOARD_SHORTCUT_VARIANTS.OUTLINED,\n className,\n}: KeyboardShortcutProps): ReactElement {\n return (\n <Wrapper className={className}>\n {keys.map((KeyComponent, index) => (\n <Key key={index} $variant={variant}>\n <Icon icon={KeyComponent} size={12} />\n </Key>\n ))}\n </Wrapper>\n );\n}\n","import type { ReactElement, SVGProps } from \"react\";\n\nexport function IconCtrl(props: SVGProps<SVGSVGElement>): ReactElement {\n const { width = 24, height = 24, ...rest } = props;\n\n return (\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width={width} height={height} fill=\"none\" {...rest}>\n <text\n x=\"50%\"\n y=\"50%\"\n dominantBaseline=\"central\"\n textAnchor=\"middle\"\n fill=\"currentColor\"\n fontFamily=\"Geist, sans-serif\"\n fontWeight={300}\n fontSize={14}\n >\n Ctrl\n </text>\n </svg>\n );\n}\n"],"mappings":";;;;;;;;AAAA,OAAO,UAAU,WAAW;;;ACIrB,IAAM,6BAA6B;AAAA,EACxC,UAAU;AAAA,EACV,QAAQ;AACV;;;ADDA,IAAM,gBAAyE;AAAA,EAC7E,CAAC,2BAA2B,QAAQ,GAAG;AAAA,wBACjB,OAAO,gBAAgB,CAAC;AAAA,aACnC,OAAO,UAAU,CAAC;AAAA;AAAA,EAE7B,CAAC,2BAA2B,MAAM,GAAG;AAAA,kBACrB,OAAO,UAAU,CAAC;AAAA,aACvB,OAAO,UAAU,CAAC;AAAA;AAE/B;AAEO,IAAM,UAAU,OAAO;AAAA;AAAA;AAAA;AAAA;AAMvB,IAAM,MAAM,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMtB,CAAC,EAAE,SAAS,MAAM,cAAc,QAAQ,CAAC;AAAA;;;AEbnC;AATH,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA,UAAU,2BAA2B;AAAA,EACrC;AACF,GAAwC;AACtC,SACE,oBAAC,WAAQ,WACN,eAAK,IAAI,CAAC,cAAc,UACvB,oBAAC,OAAgB,UAAU,SACzB,8BAAC,QAAK,MAAM,cAAc,MAAM,IAAI,KAD5B,KAEV,CACD,GACH;AAEJ;;;ACdM,gBAAAA,YAAA;AALC,SAAS,SAAS,OAA8C;AACrE,QAAM,EAAE,QAAQ,IAAI,SAAS,IAAI,GAAG,KAAK,IAAI;AAE7C,SACE,gBAAAA,KAAC,SAAI,OAAM,8BAA6B,SAAQ,aAAY,OAAc,QAAgB,MAAK,QAAQ,GAAG,MACxG,0BAAAA;AAAA,IAAC;AAAA;AAAA,MACC,GAAE;AAAA,MACF,GAAE;AAAA,MACF,kBAAiB;AAAA,MACjB,YAAW;AAAA,MACX,MAAK;AAAA,MACL,YAAW;AAAA,MACX,YAAY;AAAA,MACZ,UAAU;AAAA,MACX;AAAA;AAAA,EAED,GACF;AAEJ;","names":["jsx"]}
|