@codrstudio/openclaude-chat 0.1.0 → 0.2.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 (62) hide show
  1. package/dist/components/StreamingIndicator.js +5 -5
  2. package/dist/display/DisplayReactRenderer.js +12 -12
  3. package/dist/display/react-sandbox/bootstrap.js +150 -150
  4. package/dist/styles.css +1 -2
  5. package/package.json +64 -61
  6. package/src/components/Chat.tsx +107 -107
  7. package/src/components/ErrorNote.tsx +35 -35
  8. package/src/components/LazyRender.tsx +42 -42
  9. package/src/components/Markdown.tsx +114 -114
  10. package/src/components/MessageBubble.tsx +107 -107
  11. package/src/components/MessageInput.tsx +421 -421
  12. package/src/components/MessageList.tsx +153 -153
  13. package/src/components/StreamingIndicator.tsx +19 -19
  14. package/src/display/AlertRenderer.tsx +23 -23
  15. package/src/display/CarouselRenderer.tsx +141 -141
  16. package/src/display/ChartRenderer.tsx +195 -195
  17. package/src/display/ChoiceButtonsRenderer.tsx +114 -114
  18. package/src/display/CodeBlockRenderer.tsx +49 -49
  19. package/src/display/ComparisonTableRenderer.tsx +132 -132
  20. package/src/display/DataTableRenderer.tsx +144 -144
  21. package/src/display/DisplayReactRenderer.tsx +269 -269
  22. package/src/display/FileCardRenderer.tsx +55 -55
  23. package/src/display/GalleryRenderer.tsx +65 -65
  24. package/src/display/ImageViewerRenderer.tsx +114 -114
  25. package/src/display/LinkPreviewRenderer.tsx +74 -74
  26. package/src/display/MapViewRenderer.tsx +75 -75
  27. package/src/display/MetricCardRenderer.tsx +29 -29
  28. package/src/display/PriceHighlightRenderer.tsx +62 -62
  29. package/src/display/ProductCardRenderer.tsx +112 -112
  30. package/src/display/ProgressStepsRenderer.tsx +59 -59
  31. package/src/display/SourcesListRenderer.tsx +47 -47
  32. package/src/display/SpreadsheetRenderer.tsx +86 -86
  33. package/src/display/StepTimelineRenderer.tsx +75 -75
  34. package/src/display/index.ts +21 -21
  35. package/src/display/react-sandbox/bootstrap.ts +155 -155
  36. package/src/display/registry.ts +84 -84
  37. package/src/display/sdk-types.ts +217 -217
  38. package/src/hooks/ChatProvider.tsx +21 -21
  39. package/src/hooks/useIsMobile.ts +15 -15
  40. package/src/hooks/useOpenClaudeChat.ts +476 -476
  41. package/src/index.ts +76 -76
  42. package/src/lib/utils.ts +6 -6
  43. package/src/parts/PartErrorBoundary.tsx +51 -51
  44. package/src/parts/PartRenderer.tsx +145 -145
  45. package/src/parts/ReasoningBlock.tsx +41 -41
  46. package/src/parts/ToolActivity.tsx +78 -78
  47. package/src/parts/ToolResult.tsx +79 -79
  48. package/src/styles.css +2 -2
  49. package/src/types.ts +41 -41
  50. package/src/ui/alert.tsx +77 -77
  51. package/src/ui/badge.tsx +36 -36
  52. package/src/ui/button.tsx +54 -54
  53. package/src/ui/card.tsx +68 -68
  54. package/src/ui/collapsible.tsx +7 -7
  55. package/src/ui/dialog.tsx +122 -122
  56. package/src/ui/dropdown-menu.tsx +76 -76
  57. package/src/ui/input.tsx +24 -24
  58. package/src/ui/progress.tsx +36 -36
  59. package/src/ui/scroll-area.tsx +48 -48
  60. package/src/ui/separator.tsx +31 -31
  61. package/src/ui/skeleton.tsx +9 -9
  62. package/src/ui/table.tsx +114 -114
package/src/ui/input.tsx CHANGED
@@ -1,24 +1,24 @@
1
- import * as React from "react"
2
-
3
- import { cn } from "../lib/utils"
4
-
5
- const Input = React.forwardRef<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>>(
6
- ({ className, type, ...props }, ref) => (
7
- <input
8
- type={type}
9
- className={cn(
10
- "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors",
11
- "file:border-0 file:bg-transparent file:text-sm file:font-medium",
12
- "placeholder:text-muted-foreground",
13
- "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
14
- "disabled:cursor-not-allowed disabled:opacity-50",
15
- className,
16
- )}
17
- ref={ref}
18
- {...props}
19
- />
20
- ),
21
- )
22
- Input.displayName = "Input"
23
-
24
- export { Input }
1
+ import * as React from "react"
2
+
3
+ import { cn } from "../lib/utils"
4
+
5
+ const Input = React.forwardRef<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>>(
6
+ ({ className, type, ...props }, ref) => (
7
+ <input
8
+ type={type}
9
+ className={cn(
10
+ "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors",
11
+ "file:border-0 file:bg-transparent file:text-sm file:font-medium",
12
+ "placeholder:text-muted-foreground",
13
+ "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
14
+ "disabled:cursor-not-allowed disabled:opacity-50",
15
+ className,
16
+ )}
17
+ ref={ref}
18
+ {...props}
19
+ />
20
+ ),
21
+ )
22
+ Input.displayName = "Input"
23
+
24
+ export { Input }
@@ -1,36 +1,36 @@
1
- import * as React from "react";
2
- import { cn } from "../lib/utils.js";
3
-
4
- interface ProgressProps extends React.HTMLAttributes<HTMLDivElement> {
5
- value?: number;
6
- max?: number;
7
- }
8
-
9
- const Progress = React.forwardRef<HTMLDivElement, ProgressProps>(
10
- ({ className, value = 0, max = 100, ...props }, ref) => {
11
- const percentage = Math.min(Math.max((value / max) * 100, 0), 100);
12
-
13
- return (
14
- <div
15
- ref={ref}
16
- role="progressbar"
17
- aria-valuenow={value}
18
- aria-valuemin={0}
19
- aria-valuemax={max}
20
- className={cn(
21
- "relative h-2 w-full overflow-hidden rounded-full bg-secondary",
22
- className
23
- )}
24
- {...props}
25
- >
26
- <div
27
- className="h-full bg-primary transition-all"
28
- style={{ width: `${percentage}%` }}
29
- />
30
- </div>
31
- );
32
- }
33
- );
34
- Progress.displayName = "Progress";
35
-
36
- export { Progress };
1
+ import * as React from "react";
2
+ import { cn } from "../lib/utils.js";
3
+
4
+ interface ProgressProps extends React.HTMLAttributes<HTMLDivElement> {
5
+ value?: number;
6
+ max?: number;
7
+ }
8
+
9
+ const Progress = React.forwardRef<HTMLDivElement, ProgressProps>(
10
+ ({ className, value = 0, max = 100, ...props }, ref) => {
11
+ const percentage = Math.min(Math.max((value / max) * 100, 0), 100);
12
+
13
+ return (
14
+ <div
15
+ ref={ref}
16
+ role="progressbar"
17
+ aria-valuenow={value}
18
+ aria-valuemin={0}
19
+ aria-valuemax={max}
20
+ className={cn(
21
+ "relative h-2 w-full overflow-hidden rounded-full bg-secondary",
22
+ className
23
+ )}
24
+ {...props}
25
+ >
26
+ <div
27
+ className="h-full bg-primary transition-all"
28
+ style={{ width: `${percentage}%` }}
29
+ />
30
+ </div>
31
+ );
32
+ }
33
+ );
34
+ Progress.displayName = "Progress";
35
+
36
+ export { Progress };
@@ -1,48 +1,48 @@
1
- "use client"
2
-
3
- import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
4
- import * as React from "react"
5
-
6
- import { cn } from "../lib/utils"
7
-
8
- const ScrollArea = React.forwardRef<
9
- React.ElementRef<typeof ScrollAreaPrimitive.Root>,
10
- React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
11
- >(({ className, children, ...props }, ref) => (
12
- <ScrollAreaPrimitive.Root
13
- ref={ref}
14
- className={cn("relative overflow-hidden", className)}
15
- {...props}
16
- >
17
- <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
18
- {children}
19
- </ScrollAreaPrimitive.Viewport>
20
- <ScrollBar />
21
- <ScrollAreaPrimitive.Corner />
22
- </ScrollAreaPrimitive.Root>
23
- ))
24
- ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
25
-
26
- const ScrollBar = React.forwardRef<
27
- React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
28
- React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
29
- >(({ className, orientation = "vertical", ...props }, ref) => (
30
- <ScrollAreaPrimitive.ScrollAreaScrollbar
31
- ref={ref}
32
- orientation={orientation}
33
- className={cn(
34
- "flex touch-none select-none transition-colors",
35
- orientation === "vertical" &&
36
- "h-full w-2.5 border-l border-l-transparent p-[1px]",
37
- orientation === "horizontal" &&
38
- "h-2.5 flex-col border-t border-t-transparent p-[1px]",
39
- className
40
- )}
41
- {...props}
42
- >
43
- <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
44
- </ScrollAreaPrimitive.ScrollAreaScrollbar>
45
- ))
46
- ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
47
-
48
- export { ScrollArea, ScrollBar }
1
+ "use client"
2
+
3
+ import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
4
+ import * as React from "react"
5
+
6
+ import { cn } from "../lib/utils"
7
+
8
+ const ScrollArea = React.forwardRef<
9
+ React.ElementRef<typeof ScrollAreaPrimitive.Root>,
10
+ React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
11
+ >(({ className, children, ...props }, ref) => (
12
+ <ScrollAreaPrimitive.Root
13
+ ref={ref}
14
+ className={cn("relative overflow-hidden", className)}
15
+ {...props}
16
+ >
17
+ <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
18
+ {children}
19
+ </ScrollAreaPrimitive.Viewport>
20
+ <ScrollBar />
21
+ <ScrollAreaPrimitive.Corner />
22
+ </ScrollAreaPrimitive.Root>
23
+ ))
24
+ ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
25
+
26
+ const ScrollBar = React.forwardRef<
27
+ React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
28
+ React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
29
+ >(({ className, orientation = "vertical", ...props }, ref) => (
30
+ <ScrollAreaPrimitive.ScrollAreaScrollbar
31
+ ref={ref}
32
+ orientation={orientation}
33
+ className={cn(
34
+ "flex touch-none select-none transition-colors",
35
+ orientation === "vertical" &&
36
+ "h-full w-2.5 border-l border-l-transparent p-[1px]",
37
+ orientation === "horizontal" &&
38
+ "h-2.5 flex-col border-t border-t-transparent p-[1px]",
39
+ className
40
+ )}
41
+ {...props}
42
+ >
43
+ <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
44
+ </ScrollAreaPrimitive.ScrollAreaScrollbar>
45
+ ))
46
+ ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
47
+
48
+ export { ScrollArea, ScrollBar }
@@ -1,31 +1,31 @@
1
- "use client"
2
-
3
- import * as SeparatorPrimitive from "@radix-ui/react-separator"
4
- import * as React from "react"
5
-
6
- import { cn } from "../lib/utils"
7
-
8
- const Separator = React.forwardRef<
9
- React.ElementRef<typeof SeparatorPrimitive.Root>,
10
- React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
11
- >(
12
- (
13
- { className, orientation = "horizontal", decorative = true, ...props },
14
- ref
15
- ) => (
16
- <SeparatorPrimitive.Root
17
- ref={ref}
18
- decorative={decorative}
19
- orientation={orientation}
20
- className={cn(
21
- "shrink-0 bg-border",
22
- orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
23
- className
24
- )}
25
- {...props}
26
- />
27
- )
28
- )
29
- Separator.displayName = SeparatorPrimitive.Root.displayName
30
-
31
- export { Separator }
1
+ "use client"
2
+
3
+ import * as SeparatorPrimitive from "@radix-ui/react-separator"
4
+ import * as React from "react"
5
+
6
+ import { cn } from "../lib/utils"
7
+
8
+ const Separator = React.forwardRef<
9
+ React.ElementRef<typeof SeparatorPrimitive.Root>,
10
+ React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
11
+ >(
12
+ (
13
+ { className, orientation = "horizontal", decorative = true, ...props },
14
+ ref
15
+ ) => (
16
+ <SeparatorPrimitive.Root
17
+ ref={ref}
18
+ decorative={decorative}
19
+ orientation={orientation}
20
+ className={cn(
21
+ "shrink-0 bg-border",
22
+ orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
23
+ className
24
+ )}
25
+ {...props}
26
+ />
27
+ )
28
+ )
29
+ Separator.displayName = SeparatorPrimitive.Root.displayName
30
+
31
+ export { Separator }
@@ -1,9 +1,9 @@
1
- import * as React from "react"
2
-
3
- import { cn } from "../lib/utils"
4
-
5
- function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
6
- return <div className={cn("animate-pulse rounded-md bg-primary/10", className)} {...props} />
7
- }
8
-
9
- export { Skeleton }
1
+ import * as React from "react"
2
+
3
+ import { cn } from "../lib/utils"
4
+
5
+ function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
6
+ return <div className={cn("animate-pulse rounded-md bg-primary/10", className)} {...props} />
7
+ }
8
+
9
+ export { Skeleton }
package/src/ui/table.tsx CHANGED
@@ -1,114 +1,114 @@
1
- import * as React from "react"
2
-
3
- import { cn } from "../lib/utils"
4
-
5
- function Table({ className, ...props }: React.ComponentProps<"table">) {
6
- return (
7
- <div
8
- data-slot="table-container"
9
- className="relative w-full overflow-x-auto"
10
- >
11
- <table
12
- data-slot="table"
13
- className={cn("w-full caption-bottom text-sm", className)}
14
- {...props}
15
- />
16
- </div>
17
- )
18
- }
19
-
20
- function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
21
- return (
22
- <thead
23
- data-slot="table-header"
24
- className={cn("[&_tr]:border-b", className)}
25
- {...props}
26
- />
27
- )
28
- }
29
-
30
- function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
31
- return (
32
- <tbody
33
- data-slot="table-body"
34
- className={cn("[&_tr:last-child]:border-0", className)}
35
- {...props}
36
- />
37
- )
38
- }
39
-
40
- function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
41
- return (
42
- <tfoot
43
- data-slot="table-footer"
44
- className={cn(
45
- "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
46
- className
47
- )}
48
- {...props}
49
- />
50
- )
51
- }
52
-
53
- function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
54
- return (
55
- <tr
56
- data-slot="table-row"
57
- className={cn(
58
- "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
59
- className
60
- )}
61
- {...props}
62
- />
63
- )
64
- }
65
-
66
- function TableHead({ className, ...props }: React.ComponentProps<"th">) {
67
- return (
68
- <th
69
- data-slot="table-head"
70
- className={cn(
71
- "h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0",
72
- className
73
- )}
74
- {...props}
75
- />
76
- )
77
- }
78
-
79
- function TableCell({ className, ...props }: React.ComponentProps<"td">) {
80
- return (
81
- <td
82
- data-slot="table-cell"
83
- className={cn(
84
- "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0",
85
- className
86
- )}
87
- {...props}
88
- />
89
- )
90
- }
91
-
92
- function TableCaption({
93
- className,
94
- ...props
95
- }: React.ComponentProps<"caption">) {
96
- return (
97
- <caption
98
- data-slot="table-caption"
99
- className={cn("mt-4 text-sm text-muted-foreground", className)}
100
- {...props}
101
- />
102
- )
103
- }
104
-
105
- export {
106
- Table,
107
- TableHeader,
108
- TableBody,
109
- TableFooter,
110
- TableHead,
111
- TableRow,
112
- TableCell,
113
- TableCaption,
114
- }
1
+ import * as React from "react"
2
+
3
+ import { cn } from "../lib/utils"
4
+
5
+ function Table({ className, ...props }: React.ComponentProps<"table">) {
6
+ return (
7
+ <div
8
+ data-slot="table-container"
9
+ className="relative w-full overflow-x-auto"
10
+ >
11
+ <table
12
+ data-slot="table"
13
+ className={cn("w-full caption-bottom text-sm", className)}
14
+ {...props}
15
+ />
16
+ </div>
17
+ )
18
+ }
19
+
20
+ function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
21
+ return (
22
+ <thead
23
+ data-slot="table-header"
24
+ className={cn("[&_tr]:border-b", className)}
25
+ {...props}
26
+ />
27
+ )
28
+ }
29
+
30
+ function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
31
+ return (
32
+ <tbody
33
+ data-slot="table-body"
34
+ className={cn("[&_tr:last-child]:border-0", className)}
35
+ {...props}
36
+ />
37
+ )
38
+ }
39
+
40
+ function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
41
+ return (
42
+ <tfoot
43
+ data-slot="table-footer"
44
+ className={cn(
45
+ "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
46
+ className
47
+ )}
48
+ {...props}
49
+ />
50
+ )
51
+ }
52
+
53
+ function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
54
+ return (
55
+ <tr
56
+ data-slot="table-row"
57
+ className={cn(
58
+ "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
59
+ className
60
+ )}
61
+ {...props}
62
+ />
63
+ )
64
+ }
65
+
66
+ function TableHead({ className, ...props }: React.ComponentProps<"th">) {
67
+ return (
68
+ <th
69
+ data-slot="table-head"
70
+ className={cn(
71
+ "h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0",
72
+ className
73
+ )}
74
+ {...props}
75
+ />
76
+ )
77
+ }
78
+
79
+ function TableCell({ className, ...props }: React.ComponentProps<"td">) {
80
+ return (
81
+ <td
82
+ data-slot="table-cell"
83
+ className={cn(
84
+ "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0",
85
+ className
86
+ )}
87
+ {...props}
88
+ />
89
+ )
90
+ }
91
+
92
+ function TableCaption({
93
+ className,
94
+ ...props
95
+ }: React.ComponentProps<"caption">) {
96
+ return (
97
+ <caption
98
+ data-slot="table-caption"
99
+ className={cn("mt-4 text-sm text-muted-foreground", className)}
100
+ {...props}
101
+ />
102
+ )
103
+ }
104
+
105
+ export {
106
+ Table,
107
+ TableHeader,
108
+ TableBody,
109
+ TableFooter,
110
+ TableHead,
111
+ TableRow,
112
+ TableCell,
113
+ TableCaption,
114
+ }