@yourgpt/copilot-sdk 1.4.34 → 1.4.35

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 (8) hide show
  1. package/dist/styles.css +57 -62
  2. package/dist/ui/index.cjs +75 -184
  3. package/dist/ui/index.cjs.map +1 -1
  4. package/dist/ui/index.d.cts +13 -5
  5. package/dist/ui/index.d.ts +13 -5
  6. package/dist/ui/index.js +75 -184
  7. package/dist/ui/index.js.map +1 -1
  8. package/package.json +1 -1
package/dist/styles.css CHANGED
@@ -1,66 +1,61 @@
1
1
  /* YourGPT Copilot SDK - Base Styles */
2
- /* Default neutral theme */
3
-
4
- :root {
5
- --background: hsl(0 0% 100%);
6
- --foreground: hsl(240 10% 3.9%);
7
-
8
- --card: hsl(0 0% 100%);
9
- --card-foreground: hsl(240 10% 3.9%);
10
-
11
- --popover: hsl(0 0% 100%);
12
- --popover-foreground: hsl(240 10% 3.9%);
13
-
14
- --primary: hsl(240 5.9% 10%);
15
- --primary-foreground: hsl(0 0% 98%);
16
-
17
- --secondary: hsl(240 4.8% 95.9%);
18
- --secondary-foreground: hsl(240 5.9% 10%);
19
-
20
- --muted: hsl(240 4.8% 95.9%);
21
- --muted-foreground: hsl(240 3.8% 46.1%);
22
-
23
- --accent: hsl(240 4.8% 95.9%);
24
- --accent-foreground: hsl(240 5.9% 10%);
25
-
26
- --destructive: hsl(0 84.2% 60.2%);
27
- --destructive-foreground: hsl(0 0% 98%);
28
-
29
- --border: hsl(240 5.9% 90%);
30
- --input: hsl(240 5.9% 90%);
31
- --ring: hsl(240 5.9% 10%);
32
-
33
- --radius: 0.5rem;
34
- }
35
-
36
- .dark {
37
- --background: hsl(240 10% 3.9%);
38
- --foreground: hsl(0 0% 98%);
39
-
40
- --card: hsl(240 10% 3.9%);
41
- --card-foreground: hsl(0 0% 98%);
42
-
43
- --popover: hsl(240 10% 3.9%);
44
- --popover-foreground: hsl(0 0% 98%);
45
-
46
- --primary: hsl(0 0% 98%);
47
- --primary-foreground: hsl(240 5.9% 10%);
48
-
49
- --secondary: hsl(240 3.7% 15.9%);
50
- --secondary-foreground: hsl(0 0% 98%);
51
-
52
- --muted: hsl(240 3.7% 15.9%);
53
- --muted-foreground: hsl(240 5% 64.9%);
54
-
55
- --accent: hsl(240 3.7% 15.9%);
56
- --accent-foreground: hsl(0 0% 98%);
57
-
58
- --destructive: hsl(0 62.8% 30.6%);
59
- --destructive-foreground: hsl(0 0% 98%);
60
-
61
- --border: hsl(240 3.7% 15.9%);
62
- --input: hsl(240 3.7% 15.9%);
63
- --ring: hsl(240 4.9% 83.9%);
2
+ /*
3
+ * IMPORTANT: These are fallback defaults only.
4
+ * If user has their own shadcn/ui CSS variables defined on :root,
5
+ * those will be used instead (user styles should be imported AFTER this file
6
+ * or defined outside @layer to take precedence).
7
+ *
8
+ * To ensure your app's variables take precedence:
9
+ * 1. Import SDK styles first: import "@yourgpt/copilot-sdk/ui/styles.css"
10
+ * 2. Then import your globals.css with your :root variables
11
+ */
12
+
13
+ /* Low-priority layer for SDK defaults - user styles will override */
14
+ @layer csdk-base {
15
+ :root {
16
+ --background: hsl(0 0% 100%);
17
+ --foreground: hsl(240 10% 3.9%);
18
+ --card: hsl(0 0% 100%);
19
+ --card-foreground: hsl(240 10% 3.9%);
20
+ --popover: hsl(0 0% 100%);
21
+ --popover-foreground: hsl(240 10% 3.9%);
22
+ --primary: hsl(240 5.9% 10%);
23
+ --primary-foreground: hsl(0 0% 98%);
24
+ --secondary: hsl(240 4.8% 95.9%);
25
+ --secondary-foreground: hsl(240 5.9% 10%);
26
+ --muted: hsl(240 4.8% 95.9%);
27
+ --muted-foreground: hsl(240 3.8% 46.1%);
28
+ --accent: hsl(240 4.8% 95.9%);
29
+ --accent-foreground: hsl(240 5.9% 10%);
30
+ --destructive: hsl(0 84.2% 60.2%);
31
+ --destructive-foreground: hsl(0 0% 98%);
32
+ --border: hsl(240 5.9% 90%);
33
+ --input: hsl(240 5.9% 90%);
34
+ --ring: hsl(240 5.9% 10%);
35
+ --radius: 0.5rem;
36
+ }
37
+
38
+ .dark {
39
+ --background: hsl(240 10% 3.9%);
40
+ --foreground: hsl(0 0% 98%);
41
+ --card: hsl(240 10% 3.9%);
42
+ --card-foreground: hsl(0 0% 98%);
43
+ --popover: hsl(240 10% 3.9%);
44
+ --popover-foreground: hsl(0 0% 98%);
45
+ --primary: hsl(0 0% 98%);
46
+ --primary-foreground: hsl(240 5.9% 10%);
47
+ --secondary: hsl(240 3.7% 15.9%);
48
+ --secondary-foreground: hsl(0 0% 98%);
49
+ --muted: hsl(240 3.7% 15.9%);
50
+ --muted-foreground: hsl(240 5% 64.9%);
51
+ --accent: hsl(240 3.7% 15.9%);
52
+ --accent-foreground: hsl(0 0% 98%);
53
+ --destructive: hsl(0 62.8% 30.6%);
54
+ --destructive-foreground: hsl(0 0% 98%);
55
+ --border: hsl(240 3.7% 15.9%);
56
+ --input: hsl(240 3.7% 15.9%);
57
+ --ring: hsl(240 4.9% 83.9%);
58
+ }
64
59
  }
65
60
 
66
61
  /* Loader Animations */
package/dist/ui/index.cjs CHANGED
@@ -41,10 +41,7 @@ var HoverCardPrimitive__namespace = /*#__PURE__*/_interopNamespace(HoverCardPrim
41
41
  function cn(...inputs) {
42
42
  return tailwindMerge.twMerge(clsx.clsx(inputs));
43
43
  }
44
- function DotsLoader({
45
- className,
46
- size = "md"
47
- }) {
44
+ function DotsLoader({ className, size = "md" }) {
48
45
  const dotSizes = {
49
46
  sm: "h-1 w-1",
50
47
  md: "h-1.5 w-1.5",
@@ -55,37 +52,21 @@ function DotsLoader({
55
52
  md: "h-5",
56
53
  lg: "h-6"
57
54
  };
58
- return /* @__PURE__ */ jsxRuntime.jsxs(
59
- "div",
60
- {
61
- className: cn(
62
- "flex items-end space-x-1",
63
- containerSizes[size],
64
- className
65
- ),
66
- children: [
67
- [...Array(3)].map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(
68
- "div",
69
- {
70
- className: cn(
71
- "bg-primary csdk-loader-bounce-dots rounded-full",
72
- dotSizes[size]
73
- ),
74
- style: {
75
- animationDelay: `${i * 160}ms`
76
- }
77
- },
78
- i
79
- )),
80
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Loading" })
81
- ]
82
- }
83
- );
55
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center translate-y-[-2px] space-x-1", containerSizes[size], className), children: [
56
+ [...Array(3)].map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(
57
+ "div",
58
+ {
59
+ className: cn("bg-primary csdk-loader-bounce-dots rounded-full", dotSizes[size]),
60
+ style: {
61
+ animationDelay: `${i * 160}ms`
62
+ }
63
+ },
64
+ i
65
+ )),
66
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Loading" })
67
+ ] });
84
68
  }
85
- function TypingLoader({
86
- className,
87
- size = "md"
88
- }) {
69
+ function TypingLoader({ className, size = "md" }) {
89
70
  const dotSizes = {
90
71
  sm: "h-1 w-1",
91
72
  md: "h-1.5 w-1.5",
@@ -96,37 +77,21 @@ function TypingLoader({
96
77
  md: "h-5",
97
78
  lg: "h-6"
98
79
  };
99
- return /* @__PURE__ */ jsxRuntime.jsxs(
100
- "div",
101
- {
102
- className: cn(
103
- "flex items-center space-x-1",
104
- containerSizes[size],
105
- className
106
- ),
107
- children: [
108
- [...Array(3)].map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(
109
- "div",
110
- {
111
- className: cn(
112
- "bg-primary csdk-loader-typing rounded-full",
113
- dotSizes[size]
114
- ),
115
- style: {
116
- animationDelay: `${i * 250}ms`
117
- }
118
- },
119
- i
120
- )),
121
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Loading" })
122
- ]
123
- }
124
- );
80
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center space-x-1", containerSizes[size], className), children: [
81
+ [...Array(3)].map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(
82
+ "div",
83
+ {
84
+ className: cn("bg-primary csdk-loader-typing rounded-full", dotSizes[size]),
85
+ style: {
86
+ animationDelay: `${i * 250}ms`
87
+ }
88
+ },
89
+ i
90
+ )),
91
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Loading" })
92
+ ] });
125
93
  }
126
- function WaveLoader({
127
- className,
128
- size = "md"
129
- }) {
94
+ function WaveLoader({ className, size = "md" }) {
130
95
  const barWidths = {
131
96
  sm: "w-0.5",
132
97
  md: "w-0.5",
@@ -142,38 +107,22 @@ function WaveLoader({
142
107
  md: ["8px", "12px", "16px", "12px", "8px"],
143
108
  lg: ["10px", "15px", "20px", "15px", "10px"]
144
109
  };
145
- return /* @__PURE__ */ jsxRuntime.jsxs(
146
- "div",
147
- {
148
- className: cn(
149
- "flex items-center gap-0.5",
150
- containerSizes[size],
151
- className
152
- ),
153
- children: [
154
- [...Array(5)].map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(
155
- "div",
156
- {
157
- className: cn(
158
- "bg-primary csdk-loader-wave rounded-full",
159
- barWidths[size]
160
- ),
161
- style: {
162
- animationDelay: `${i * 100}ms`,
163
- height: heights[size][i]
164
- }
165
- },
166
- i
167
- )),
168
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Loading" })
169
- ]
170
- }
171
- );
110
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-0.5", containerSizes[size], className), children: [
111
+ [...Array(5)].map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(
112
+ "div",
113
+ {
114
+ className: cn("bg-primary csdk-loader-wave rounded-full", barWidths[size]),
115
+ style: {
116
+ animationDelay: `${i * 100}ms`,
117
+ height: heights[size][i]
118
+ }
119
+ },
120
+ i
121
+ )),
122
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Loading" })
123
+ ] });
172
124
  }
173
- function TerminalLoader({
174
- className,
175
- size = "md"
176
- }) {
125
+ function TerminalLoader({ className, size = "md" }) {
177
126
  const cursorSizes = {
178
127
  sm: "h-3 w-1.5",
179
128
  md: "h-4 w-2",
@@ -189,57 +138,21 @@ function TerminalLoader({
189
138
  md: "h-5",
190
139
  lg: "h-6"
191
140
  };
192
- return /* @__PURE__ */ jsxRuntime.jsxs(
193
- "div",
194
- {
195
- className: cn(
196
- "flex items-center space-x-1",
197
- containerSizes[size],
198
- className
199
- ),
200
- children: [
201
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-primary font-mono", textSizes[size]), children: ">" }),
202
- /* @__PURE__ */ jsxRuntime.jsx(
203
- "div",
204
- {
205
- className: cn(
206
- "bg-primary csdk-loader-blink",
207
- cursorSizes[size]
208
- )
209
- }
210
- ),
211
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Loading" })
212
- ]
213
- }
214
- );
141
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center space-x-1", containerSizes[size], className), children: [
142
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-primary font-mono", textSizes[size]), children: ">" }),
143
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("bg-primary csdk-loader-blink", cursorSizes[size]) }),
144
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Loading" })
145
+ ] });
215
146
  }
216
- function TextBlinkLoader({
217
- text = "Thinking",
218
- className,
219
- size = "md"
220
- }) {
147
+ function TextBlinkLoader({ text = "Thinking", className, size = "md" }) {
221
148
  const textSizes = {
222
149
  sm: "text-xs",
223
150
  md: "text-sm",
224
151
  lg: "text-base"
225
152
  };
226
- return /* @__PURE__ */ jsxRuntime.jsx(
227
- "div",
228
- {
229
- className: cn(
230
- "csdk-loader-text-blink font-medium",
231
- textSizes[size],
232
- className
233
- ),
234
- children: text
235
- }
236
- );
153
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("csdk-loader-text-blink font-medium", textSizes[size], className), children: text });
237
154
  }
238
- function TextShimmerLoader({
239
- text = "Thinking",
240
- className,
241
- size = "md"
242
- }) {
155
+ function TextShimmerLoader({ text = "Thinking", className, size = "md" }) {
243
156
  const textSizes = {
244
157
  sm: "text-xs",
245
158
  md: "text-sm",
@@ -259,11 +172,7 @@ function TextShimmerLoader({
259
172
  }
260
173
  );
261
174
  }
262
- function TextDotsLoader({
263
- className,
264
- text = "Thinking",
265
- size = "md"
266
- }) {
175
+ function TextDotsLoader({ className, text = "Thinking", size = "md" }) {
267
176
  const textSizes = {
268
177
  sm: "text-xs",
269
178
  md: "text-sm",
@@ -272,39 +181,13 @@ function TextDotsLoader({
272
181
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("inline-flex items-center", className), children: [
273
182
  /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-primary font-medium", textSizes[size]), children: text }),
274
183
  /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex", children: [
275
- /* @__PURE__ */ jsxRuntime.jsx(
276
- "span",
277
- {
278
- className: "text-primary csdk-loader-loading-dots",
279
- style: { animationDelay: "0.2s" },
280
- children: "."
281
- }
282
- ),
283
- /* @__PURE__ */ jsxRuntime.jsx(
284
- "span",
285
- {
286
- className: "text-primary csdk-loader-loading-dots",
287
- style: { animationDelay: "0.4s" },
288
- children: "."
289
- }
290
- ),
291
- /* @__PURE__ */ jsxRuntime.jsx(
292
- "span",
293
- {
294
- className: "text-primary csdk-loader-loading-dots",
295
- style: { animationDelay: "0.6s" },
296
- children: "."
297
- }
298
- )
184
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary csdk-loader-loading-dots", style: { animationDelay: "0.2s" }, children: "." }),
185
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary csdk-loader-loading-dots", style: { animationDelay: "0.4s" }, children: "." }),
186
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary csdk-loader-loading-dots", style: { animationDelay: "0.6s" }, children: "." })
299
187
  ] })
300
188
  ] });
301
189
  }
302
- function Loader({
303
- variant = "typing",
304
- size = "md",
305
- text,
306
- className
307
- }) {
190
+ function Loader({ variant = "typing", size = "md", text, className }) {
308
191
  switch (variant) {
309
192
  case "dots":
310
193
  return /* @__PURE__ */ jsxRuntime.jsx(DotsLoader, { size, className });
@@ -605,7 +488,7 @@ function ScrollButton({
605
488
  variant,
606
489
  size,
607
490
  className: cn(
608
- "h-10 w-10 rounded-full transition-all duration-150 ease-out shadow-md",
491
+ "h-10 w-10 rounded-full transition-all duration-150 ease-out shadow-md bg-background",
609
492
  !isAtBottom ? "translate-y-0 scale-100 opacity-100" : "pointer-events-none translate-y-4 scale-95 opacity-0",
610
493
  className
611
494
  ),
@@ -683,7 +566,7 @@ var AvatarImage = React18__namespace.forwardRef(({ className, ...props }, ref) =
683
566
  AvatarPrimitive__namespace.Image,
684
567
  {
685
568
  ref,
686
- className: cn("aspect-square h-full w-full", className),
569
+ className: cn("aspect-square h-full w-full object-cover", className),
687
570
  ...props
688
571
  }
689
572
  ));
@@ -703,12 +586,16 @@ AvatarFallback.displayName = AvatarPrimitive__namespace.Fallback.displayName;
703
586
  var Message = ({ children, className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("csdk-message flex gap-3", className), ...props, children });
704
587
  var MessageAvatar = ({
705
588
  src,
706
- alt,
589
+ alt = "Avatar",
707
590
  fallback,
708
591
  fallbackIcon,
592
+ children,
709
593
  delayMs,
710
594
  className
711
595
  }) => {
596
+ if (children) {
597
+ return /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("csdk-avatar flex shrink-0 size-7", className), children });
598
+ }
712
599
  return /* @__PURE__ */ jsxRuntime.jsxs(Avatar, { className: cn("csdk-avatar size-7 shrink-0", className), children: [
713
600
  /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src, alt }),
714
601
  /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { delayMs, children: fallbackIcon || fallback })
@@ -3505,9 +3392,10 @@ function DefaultMessage({
3505
3392
  showUserAvatar && /* @__PURE__ */ jsxRuntime.jsx(
3506
3393
  MessageAvatar,
3507
3394
  {
3508
- src: userAvatar.src || "",
3395
+ src: userAvatar.src,
3509
3396
  alt: "User",
3510
- fallback: userAvatar.fallback
3397
+ fallback: userAvatar.fallback,
3398
+ children: userAvatar.component
3511
3399
  }
3512
3400
  )
3513
3401
  ]
@@ -3544,11 +3432,12 @@ function DefaultMessage({
3544
3432
  /* @__PURE__ */ jsxRuntime.jsx(
3545
3433
  MessageAvatar,
3546
3434
  {
3547
- src: assistantAvatar.src || "",
3435
+ src: assistantAvatar.src,
3548
3436
  alt: "Assistant",
3549
3437
  fallback: assistantAvatar.fallback,
3550
- fallbackIcon: !assistantAvatar.src && !assistantAvatar.fallback ? /* @__PURE__ */ jsxRuntime.jsx(copilot_sdk_logo_default, { className: "size-5" }) : void 0,
3551
- className: "bg-muted"
3438
+ fallbackIcon: !assistantAvatar.src && !assistantAvatar.fallback && !assistantAvatar.component ? /* @__PURE__ */ jsxRuntime.jsx(copilot_sdk_logo_default, { className: "size-5" }) : void 0,
3439
+ className: "bg-muted",
3440
+ children: assistantAvatar.component
3552
3441
  }
3553
3442
  ),
3554
3443
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 max-w-[80%] w-fit", children: [
@@ -4346,8 +4235,8 @@ function ChatComponent({
4346
4235
  // Appearance
4347
4236
  showPoweredBy = true,
4348
4237
  showUserAvatar = false,
4349
- userAvatar = { fallback: "U" },
4350
- assistantAvatar = { fallback: "AI" },
4238
+ userAvatar: userAvatarProp,
4239
+ assistantAvatar: assistantAvatarProp,
4351
4240
  loaderVariant = "typing",
4352
4241
  fontSize = "sm",
4353
4242
  // Attachments
@@ -4389,6 +4278,8 @@ function ChatComponent({
4389
4278
  onSwitchThread,
4390
4279
  isThreadBusy
4391
4280
  }) {
4281
+ const userAvatar = { fallback: "U", ...userAvatarProp };
4282
+ const assistantAvatar = { fallback: "AI", ...assistantAvatarProp };
4392
4283
  const [input, setInput] = React18.useState("");
4393
4284
  const [pendingAttachments, setPendingAttachments] = React18.useState([]);
4394
4285
  const [isDragging, setIsDragging] = React18.useState(false);