@aprovan/patchwork-chat 0.1.0-dev.6bd527d

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 (27) hide show
  1. package/.turbo/turbo-build.log +22 -0
  2. package/.utcp_config.json +14 -0
  3. package/.working/widgets/27060b91-a2a5-4272-b243-6eb904bd4070/main.tsx +107 -0
  4. package/LICENSE +373 -0
  5. package/dist/assets/__vite-browser-external-BIHI7g3E.js +1 -0
  6. package/dist/assets/index-Ct0GSTdJ.css +1 -0
  7. package/dist/assets/index-ueH8ysw1.js +1455 -0
  8. package/dist/index.html +18 -0
  9. package/index.html +17 -0
  10. package/package.json +55 -0
  11. package/postcss.config.js +6 -0
  12. package/src/App.tsx +7 -0
  13. package/src/components/ui/avatar.tsx +48 -0
  14. package/src/components/ui/badge.tsx +36 -0
  15. package/src/components/ui/button.tsx +56 -0
  16. package/src/components/ui/card.tsx +86 -0
  17. package/src/components/ui/collapsible.tsx +9 -0
  18. package/src/components/ui/dialog.tsx +60 -0
  19. package/src/components/ui/input.tsx +25 -0
  20. package/src/components/ui/scroll-area.tsx +46 -0
  21. package/src/index.css +190 -0
  22. package/src/lib/utils.ts +6 -0
  23. package/src/main.tsx +10 -0
  24. package/src/pages/ChatPage.tsx +461 -0
  25. package/tailwind.config.js +71 -0
  26. package/tsconfig.json +25 -0
  27. package/vite.config.ts +26 -0
package/dist/index.html ADDED
@@ -0,0 +1,18 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <link
7
+ rel="icon"
8
+ type="image/png"
9
+ href="https://raw.githubusercontent.com/AprovanLabs/aprovan.com/main/docs/assets/social-labs.png"
10
+ />
11
+ <title>Patchwork Chat</title>
12
+ <script type="module" crossorigin src="/assets/index-ueH8ysw1.js"></script>
13
+ <link rel="stylesheet" crossorigin href="/assets/index-Ct0GSTdJ.css">
14
+ </head>
15
+ <body class="min-h-screen bg-background font-sans antialiased">
16
+ <div id="root"></div>
17
+ </body>
18
+ </html>
package/index.html ADDED
@@ -0,0 +1,17 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <link
7
+ rel="icon"
8
+ type="image/png"
9
+ href="https://raw.githubusercontent.com/AprovanLabs/aprovan.com/main/docs/assets/social-labs.png"
10
+ />
11
+ <title>Patchwork Chat</title>
12
+ </head>
13
+ <body class="min-h-screen bg-background font-sans antialiased">
14
+ <div id="root"></div>
15
+ <script type="module" src="/src/main.tsx"></script>
16
+ </body>
17
+ </html>
package/package.json ADDED
@@ -0,0 +1,55 @@
1
+ {
2
+ "name": "@aprovan/patchwork-chat",
3
+ "version": "0.1.0-dev.6bd527d",
4
+ "type": "module",
5
+ "dependencies": {
6
+ "@ai-sdk/react": "^3.0.69",
7
+ "@aprovan/bobbin": "^0.1.0",
8
+ "@radix-ui/react-avatar": "^1.1.11",
9
+ "@radix-ui/react-collapsible": "^1.1.12",
10
+ "@radix-ui/react-scroll-area": "^1.2.10",
11
+ "@radix-ui/react-slot": "^1.2.4",
12
+ "@tiptap/core": "^3.19.0",
13
+ "@tiptap/extension-placeholder": "^3.19.0",
14
+ "@tiptap/extension-typography": "^3.19.0",
15
+ "@tiptap/pm": "^3.19.0",
16
+ "@tiptap/react": "^3.19.0",
17
+ "@tiptap/starter-kit": "^3.19.0",
18
+ "ai": "^6.0.67",
19
+ "class-variance-authority": "^0.7.1",
20
+ "clsx": "^2.1.1",
21
+ "lucide-react": "^0.511.0",
22
+ "react": "^18.3.1",
23
+ "react-dom": "^18.3.1",
24
+ "react-markdown": "^10.1.0",
25
+ "remark-gfm": "^4.0.1",
26
+ "tailwind-merge": "^3.4.0",
27
+ "tiptap-markdown": "^0.9.0",
28
+ "@aprovan/patchwork-compiler": "0.1.2-dev.6bd527d",
29
+ "@aprovan/patchwork-editor": "0.1.1-dev.6bd527d",
30
+ "@aprovan/stitchery": "0.1.0-dev.6bd527d"
31
+ },
32
+ "devDependencies": {
33
+ "@aprovan/copilot-proxy": "0.1.0",
34
+ "@tailwindcss/typography": "^0.5.19",
35
+ "@types/node": "^22.19.7",
36
+ "@types/react": "^18.3.27",
37
+ "@types/react-dom": "^18.3.7",
38
+ "@vitejs/plugin-react": "^4.7.0",
39
+ "autoprefixer": "^10.4.24",
40
+ "concurrently": "^9.2.1",
41
+ "postcss": "^8.5.6",
42
+ "tailwindcss": "^3.4.19",
43
+ "tsx": "^4.19.0",
44
+ "typescript": "^5.9.3",
45
+ "vite": "^6.4.1"
46
+ },
47
+ "scripts": {
48
+ "dev": "concurrently -n proxy,stitchery,vite -c green,magenta,blue \"pnpm dev:proxy\" \"pnpm dev:stitchery\" \"sleep 2 && vite\"",
49
+ "dev:client": "vite",
50
+ "dev:proxy": "pnpm exec copilot-proxy serve",
51
+ "dev:stitchery": "node ../../packages/stitchery/dist/cli.js serve -p 6435 --utcp-config .utcp_config.json --local-package @aprovan/patchwork-image-shadcn:../../packages/images/shadcn -v --vfs-dir ../../.working/widgets --vfs-use-paths",
52
+ "build": "tsc && vite build",
53
+ "preview": "vite preview"
54
+ }
55
+ }
package/postcss.config.js ADDED
@@ -0,0 +1,6 @@
1
+ export default {
2
+ plugins: {
3
+ tailwindcss: {},
4
+ autoprefixer: {},
5
+ },
6
+ };
package/src/App.tsx ADDED
@@ -0,0 +1,7 @@
1
+ import ChatPage from './pages/ChatPage';
2
+
3
+ function App() {
4
+ return <ChatPage />;
5
+ }
6
+
7
+ export default App;
package/src/components/ui/avatar.tsx ADDED
@@ -0,0 +1,48 @@
1
+ import * as React from 'react';
2
+ import * as AvatarPrimitive from '@radix-ui/react-avatar';
3
+
4
+ import { cn } from '@/lib/utils';
5
+
6
+ const Avatar = React.forwardRef<
7
+ React.ElementRef<typeof AvatarPrimitive.Root>,
8
+ React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
9
+ >(({ className, ...props }, ref) => (
10
+ <AvatarPrimitive.Root
11
+ ref={ref}
12
+ className={cn(
13
+ 'relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full',
14
+ className,
15
+ )}
16
+ {...props}
17
+ />
18
+ ));
19
+ Avatar.displayName = AvatarPrimitive.Root.displayName;
20
+
21
+ const AvatarImage = React.forwardRef<
22
+ React.ElementRef<typeof AvatarPrimitive.Image>,
23
+ React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
24
+ >(({ className, ...props }, ref) => (
25
+ <AvatarPrimitive.Image
26
+ ref={ref}
27
+ className={cn('aspect-square h-full w-full', className)}
28
+ {...props}
29
+ />
30
+ ));
31
+ AvatarImage.displayName = AvatarPrimitive.Image.displayName;
32
+
33
+ const AvatarFallback = React.forwardRef<
34
+ React.ElementRef<typeof AvatarPrimitive.Fallback>,
35
+ React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
36
+ >(({ className, ...props }, ref) => (
37
+ <AvatarPrimitive.Fallback
38
+ ref={ref}
39
+ className={cn(
40
+ 'flex h-full w-full items-center justify-center rounded-full bg-muted',
41
+ className,
42
+ )}
43
+ {...props}
44
+ />
45
+ ));
46
+ AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
47
+
48
+ export { Avatar, AvatarImage, AvatarFallback };
package/src/components/ui/badge.tsx ADDED
@@ -0,0 +1,36 @@
1
+ import * as React from 'react';
2
+ import { cva, type VariantProps } from 'class-variance-authority';
3
+
4
+ import { cn } from '@/lib/utils';
5
+
6
+ const badgeVariants = cva(
7
+ 'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
8
+ {
9
+ variants: {
10
+ variant: {
11
+ default:
12
+ 'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
13
+ secondary:
14
+ 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
15
+ destructive:
16
+ 'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
17
+ outline: 'text-foreground',
18
+ },
19
+ },
20
+ defaultVariants: {
21
+ variant: 'default',
22
+ },
23
+ },
24
+ );
25
+
26
+ export interface BadgeProps
27
+ extends React.HTMLAttributes<HTMLDivElement>,
28
+ VariantProps<typeof badgeVariants> {}
29
+
30
+ function Badge({ className, variant, ...props }: BadgeProps) {
31
+ return (
32
+ <div className={cn(badgeVariants({ variant }), className)} {...props} />
33
+ );
34
+ }
35
+
36
+ export { Badge, badgeVariants };
package/src/components/ui/button.tsx ADDED
@@ -0,0 +1,56 @@
1
+ import * as React from 'react';
2
+ import { Slot } from '@radix-ui/react-slot';
3
+ import { cva, type VariantProps } from 'class-variance-authority';
4
+
5
+ import { cn } from '@/lib/utils';
6
+
7
+ const buttonVariants = cva(
8
+ 'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
9
+ {
10
+ variants: {
11
+ variant: {
12
+ default: 'bg-primary text-primary-foreground hover:bg-primary/90',
13
+ destructive:
14
+ 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
15
+ outline:
16
+ 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
17
+ secondary:
18
+ 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
19
+ ghost: 'hover:bg-accent hover:text-accent-foreground',
20
+ link: 'text-primary underline-offset-4 hover:underline',
21
+ },
22
+ size: {
23
+ default: 'h-10 px-4 py-2',
24
+ sm: 'h-9 rounded-md px-3',
25
+ lg: 'h-11 rounded-md px-8',
26
+ icon: 'h-10 w-10',
27
+ },
28
+ },
29
+ defaultVariants: {
30
+ variant: 'default',
31
+ size: 'default',
32
+ },
33
+ },
34
+ );
35
+
36
+ export interface ButtonProps
37
+ extends React.ButtonHTMLAttributes<HTMLButtonElement>,
38
+ VariantProps<typeof buttonVariants> {
39
+ asChild?: boolean;
40
+ }
41
+
42
+ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
43
+ ({ className, variant, size, asChild = false, ...props }, ref) => {
44
+ const Comp = asChild ? Slot : 'button';
45
+ return (
46
+ <Comp
47
+ className={cn(buttonVariants({ variant, size, className }))}
48
+ ref={ref}
49
+ {...props}
50
+ />
51
+ );
52
+ },
53
+ );
54
+ Button.displayName = 'Button';
55
+
56
+ export { Button, buttonVariants };
package/src/components/ui/card.tsx ADDED
@@ -0,0 +1,86 @@
1
+ import * as React from 'react';
2
+
3
+ import { cn } from '@/lib/utils';
4
+
5
+ const Card = React.forwardRef<
6
+ HTMLDivElement,
7
+ React.HTMLAttributes<HTMLDivElement>
8
+ >(({ className, ...props }, ref) => (
9
+ <div
10
+ ref={ref}
11
+ className={cn(
12
+ 'rounded-lg border bg-card text-card-foreground shadow-sm',
13
+ className,
14
+ )}
15
+ {...props}
16
+ />
17
+ ));
18
+ Card.displayName = 'Card';
19
+
20
+ const CardHeader = React.forwardRef<
21
+ HTMLDivElement,
22
+ React.HTMLAttributes<HTMLDivElement>
23
+ >(({ className, ...props }, ref) => (
24
+ <div
25
+ ref={ref}
26
+ className={cn('flex flex-col space-y-1.5 p-6', className)}
27
+ {...props}
28
+ />
29
+ ));
30
+ CardHeader.displayName = 'CardHeader';
31
+
32
+ const CardTitle = React.forwardRef<
33
+ HTMLParagraphElement,
34
+ React.HTMLAttributes<HTMLHeadingElement>
35
+ >(({ className, ...props }, ref) => (
36
+ <h3
37
+ ref={ref}
38
+ className={cn(
39
+ 'text-2xl font-semibold leading-none tracking-tight',
40
+ className,
41
+ )}
42
+ {...props}
43
+ />
44
+ ));
45
+ CardTitle.displayName = 'CardTitle';
46
+
47
+ const CardDescription = React.forwardRef<
48
+ HTMLParagraphElement,
49
+ React.HTMLAttributes<HTMLParagraphElement>
50
+ >(({ className, ...props }, ref) => (
51
+ <p
52
+ ref={ref}
53
+ className={cn('text-sm text-muted-foreground', className)}
54
+ {...props}
55
+ />
56
+ ));
57
+ CardDescription.displayName = 'CardDescription';
58
+
59
+ const CardContent = React.forwardRef<
60
+ HTMLDivElement,
61
+ React.HTMLAttributes<HTMLDivElement>
62
+ >(({ className, ...props }, ref) => (
63
+ <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
64
+ ));
65
+ CardContent.displayName = 'CardContent';
66
+
67
+ const CardFooter = React.forwardRef<
68
+ HTMLDivElement,
69
+ React.HTMLAttributes<HTMLDivElement>
70
+ >(({ className, ...props }, ref) => (
71
+ <div
72
+ ref={ref}
73
+ className={cn('flex items-center p-6 pt-0', className)}
74
+ {...props}
75
+ />
76
+ ));
77
+ CardFooter.displayName = 'CardFooter';
78
+
79
+ export {
80
+ Card,
81
+ CardHeader,
82
+ CardFooter,
83
+ CardTitle,
84
+ CardDescription,
85
+ CardContent,
86
+ };
package/src/components/ui/collapsible.tsx ADDED
@@ -0,0 +1,9 @@
1
+ import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
2
+
3
+ const Collapsible = CollapsiblePrimitive.Root
4
+
5
+ const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
6
+
7
+ const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
8
+
9
+ export { Collapsible, CollapsibleTrigger, CollapsibleContent }
package/src/components/ui/dialog.tsx ADDED
@@ -0,0 +1,60 @@
1
+ import * as React from 'react';
2
+ import { X } from 'lucide-react';
3
+
4
+ interface DialogProps {
5
+ open: boolean;
6
+ onOpenChange: (open: boolean) => void;
7
+ children: React.ReactNode;
8
+ }
9
+
10
+ export function Dialog({ open, onOpenChange, children }: DialogProps) {
11
+ React.useEffect(() => {
12
+ const handleEscape = (e: KeyboardEvent) => {
13
+ if (e.key === 'Escape') onOpenChange(false);
14
+ };
15
+ if (open) document.addEventListener('keydown', handleEscape);
16
+ return () => document.removeEventListener('keydown', handleEscape);
17
+ }, [open, onOpenChange]);
18
+
19
+ if (!open) return null;
20
+
21
+ return (
22
+ <div className="fixed inset-0 z-50 flex items-center justify-center">
23
+ <div
24
+ className="fixed inset-0 bg-black/50"
25
+ onClick={() => onOpenChange(false)}
26
+ />
27
+ <div className="relative z-50 w-full max-w-2xl max-h-[85vh] overflow-hidden rounded-lg border bg-background shadow-lg">
28
+ {children}
29
+ </div>
30
+ </div>
31
+ );
32
+ }
33
+
34
+ export function DialogHeader({ children, className = '' }: { children: React.ReactNode; className?: string }) {
35
+ return (
36
+ <div className={`flex items-center justify-between p-4 border-b ${className}`}>
37
+ {children}
38
+ </div>
39
+ );
40
+ }
41
+
42
+ export function DialogTitle({ children }: { children: React.ReactNode }) {
43
+ return <h2 className="text-lg font-semibold">{children}</h2>;
44
+ }
45
+
46
+ export function DialogContent({ children, className = '' }: { children: React.ReactNode; className?: string }) {
47
+ return <div className={`p-4 overflow-auto max-h-[calc(85vh-4rem)] ${className}`}>{children}</div>;
48
+ }
49
+
50
+ export function DialogClose({ onClose }: { onClose: () => void }) {
51
+ return (
52
+ <button
53
+ onClick={onClose}
54
+ className="rounded-sm opacity-70 hover:opacity-100 transition-opacity"
55
+ >
56
+ <X className="h-4 w-4" />
57
+ <span className="sr-only">Close</span>
58
+ </button>
59
+ );
60
+ }
package/src/components/ui/input.tsx ADDED
@@ -0,0 +1,25 @@
1
+ import * as React from 'react';
2
+
3
+ import { cn } from '@/lib/utils';
4
+
5
+ export interface InputProps
6
+ extends React.InputHTMLAttributes<HTMLInputElement> {}
7
+
8
+ const Input = React.forwardRef<HTMLInputElement, InputProps>(
9
+ ({ className, type, ...props }, ref) => {
10
+ return (
11
+ <input
12
+ type={type}
13
+ className={cn(
14
+ 'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
15
+ className,
16
+ )}
17
+ ref={ref}
18
+ {...props}
19
+ />
20
+ );
21
+ },
22
+ );
23
+ Input.displayName = 'Input';
24
+
25
+ export { Input };
package/src/components/ui/scroll-area.tsx ADDED
@@ -0,0 +1,46 @@
1
+ import * as React from 'react';
2
+ import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
3
+
4
+ import { cn } from '@/lib/utils';
5
+
6
+ const ScrollArea = React.forwardRef<
7
+ React.ElementRef<typeof ScrollAreaPrimitive.Root>,
8
+ React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
9
+ >(({ className, children, ...props }, ref) => (
10
+ <ScrollAreaPrimitive.Root
11
+ ref={ref}
12
+ className={cn('relative overflow-hidden', className)}
13
+ {...props}
14
+ >
15
+ <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
16
+ {children}
17
+ </ScrollAreaPrimitive.Viewport>
18
+ <ScrollBar />
19
+ <ScrollAreaPrimitive.Corner />
20
+ </ScrollAreaPrimitive.Root>
21
+ ));
22
+ ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
23
+
24
+ const ScrollBar = React.forwardRef<
25
+ React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
26
+ React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
27
+ >(({ className, orientation = 'vertical', ...props }, ref) => (
28
+ <ScrollAreaPrimitive.ScrollAreaScrollbar
29
+ ref={ref}
30
+ orientation={orientation}
31
+ className={cn(
32
+ 'flex touch-none select-none transition-colors',
33
+ orientation === 'vertical' &&
34
+ 'h-full w-2.5 border-l border-l-transparent p-[1px]',
35
+ orientation === 'horizontal' &&
36
+ 'h-2.5 flex-col border-t border-t-transparent p-[1px]',
37
+ className,
38
+ )}
39
+ {...props}
40
+ >
41
+ <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
42
+ </ScrollAreaPrimitive.ScrollAreaScrollbar>
43
+ ));
44
+ ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
45
+
46
+ export { ScrollArea, ScrollBar };
package/src/index.css ADDED
@@ -0,0 +1,190 @@
1
+ @tailwind base;
2
+ @tailwind components;
3
+ @tailwind utilities;
4
+
5
+ @layer base {
6
+ :root {
7
+ --background: 0 0% 100%;
8
+ --foreground: 222.2 84% 4.9%;
9
+ --card: 0 0% 100%;
10
+ --card-foreground: 222.2 84% 4.9%;
11
+ --popover: 0 0% 100%;
12
+ --popover-foreground: 222.2 84% 4.9%;
13
+ --primary: 222.2 47.4% 11.2%;
14
+ --primary-foreground: 210 40% 98%;
15
+ --secondary: 210 40% 96.1%;
16
+ --secondary-foreground: 222.2 47.4% 11.2%;
17
+ --muted: 210 40% 96.1%;
18
+ --muted-foreground: 215.4 16.3% 46.9%;
19
+ --accent: 210 40% 96.1%;
20
+ --accent-foreground: 222.2 47.4% 11.2%;
21
+ --destructive: 0 84.2% 60.2%;
22
+ --destructive-foreground: 210 40% 98%;
23
+ --border: 214.3 31.8% 91.4%;
24
+ --input: 214.3 31.8% 91.4%;
25
+ --ring: 222.2 84% 4.9%;
26
+ --radius: 0.5rem;
27
+ }
28
+
29
+ .dark {
30
+ --background: 222.2 84% 4.9%;
31
+ --foreground: 210 40% 98%;
32
+ --card: 222.2 84% 4.9%;
33
+ --card-foreground: 210 40% 98%;
34
+ --popover: 222.2 84% 4.9%;
35
+ --popover-foreground: 210 40% 98%;
36
+ --primary: 210 40% 98%;
37
+ --primary-foreground: 222.2 47.4% 11.2%;
38
+ --secondary: 217.2 32.6% 17.5%;
39
+ --secondary-foreground: 210 40% 98%;
40
+ --muted: 217.2 32.6% 17.5%;
41
+ --muted-foreground: 215 20.2% 65.1%;
42
+ --accent: 217.2 32.6% 17.5%;
43
+ --accent-foreground: 210 40% 98%;
44
+ --destructive: 0 62.8% 30.6%;
45
+ --destructive-foreground: 210 40% 98%;
46
+ --border: 217.2 32.6% 17.5%;
47
+ --input: 217.2 32.6% 17.5%;
48
+ --ring: 212.7 26.8% 83.9%;
49
+ }
50
+ }
51
+
52
+ @layer base {
53
+ * {
54
+ @apply border-border;
55
+ }
56
+ body {
57
+ @apply bg-background text-foreground;
58
+ }
59
+ }
60
+
61
+ /* Tiptap Markdown Editor Styles */
62
+ .markdown-editor .tiptap {
63
+ outline: none;
64
+ }
65
+
66
+ .markdown-editor .tiptap p {
67
+ margin: 0;
68
+ }
69
+
70
+ .markdown-editor .tiptap > * + * {
71
+ margin-top: 0.5em;
72
+ }
73
+
74
+ /* Placeholder styling */
75
+ .markdown-editor .tiptap p.is-editor-empty:first-child::before {
76
+ color: hsl(var(--muted-foreground));
77
+ content: attr(data-placeholder);
78
+ float: left;
79
+ height: 0;
80
+ pointer-events: none;
81
+ }
82
+
83
+ /* Inline code */
84
+ .markdown-editor .tiptap code {
85
+ background-color: hsl(var(--muted));
86
+ border-radius: 0.25rem;
87
+ padding: 0.125rem 0.25rem;
88
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
89
+ font-size: 0.875em;
90
+ }
91
+
92
+ /* Code blocks */
93
+ .markdown-editor .tiptap pre {
94
+ background-color: hsl(var(--muted));
95
+ border-radius: 0.375rem;
96
+ padding: 0.5rem 0.75rem;
97
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
98
+ font-size: 0.875em;
99
+ overflow-x: auto;
100
+ }
101
+
102
+ .markdown-editor .tiptap pre code {
103
+ background: none;
104
+ padding: 0;
105
+ font-size: inherit;
106
+ }
107
+
108
+ /* Blockquotes */
109
+ .markdown-editor .tiptap blockquote {
110
+ border-left: 4px solid hsl(var(--muted-foreground) / 0.3);
111
+ padding-left: 1rem;
112
+ font-style: italic;
113
+ color: hsl(var(--muted-foreground));
114
+ }
115
+
116
+ /* Lists */
117
+ .markdown-editor .tiptap ul,
118
+ .markdown-editor .tiptap ol {
119
+ padding-left: 1.5rem;
120
+ margin: 0.25em 0;
121
+ }
122
+
123
+ .markdown-editor .tiptap ul {
124
+ list-style-type: disc;
125
+ }
126
+
127
+ .markdown-editor .tiptap ol {
128
+ list-style-type: decimal;
129
+ }
130
+
131
+ .markdown-editor .tiptap li {
132
+ margin: 0.125em 0;
133
+ }
134
+
135
+ /* Headings - more subtle for chat input */
136
+ .markdown-editor .tiptap h1,
137
+ .markdown-editor .tiptap h2,
138
+ .markdown-editor .tiptap h3 {
139
+ font-weight: 600;
140
+ line-height: 1.25;
141
+ }
142
+
143
+ .markdown-editor .tiptap h1 {
144
+ font-size: 1.25em;
145
+ }
146
+
147
+ .markdown-editor .tiptap h2 {
148
+ font-size: 1.125em;
149
+ }
150
+
151
+ .markdown-editor .tiptap h3 {
152
+ font-size: 1em;
153
+ }
154
+
155
+ /* Bold & Italic */
156
+ .markdown-editor .tiptap strong {
157
+ font-weight: 600;
158
+ }
159
+
160
+ .markdown-editor .tiptap em {
161
+ font-style: italic;
162
+ }
163
+
164
+ /* Strikethrough */
165
+ .markdown-editor .tiptap s {
166
+ text-decoration: line-through;
167
+ }
168
+
169
+ /* Code block wrapper with language input */
170
+ .markdown-editor .code-block-wrapper {
171
+ display: flex;
172
+ flex-direction: column;
173
+ }
174
+
175
+ .markdown-editor .code-block-wrapper pre {
176
+ margin: 0;
177
+ }
178
+
179
+ .markdown-editor .code-block-wrapper .language-input-wrapper {
180
+ user-select: none;
181
+ pointer-events: auto;
182
+ }
183
+
184
+ .markdown-editor .code-block-wrapper .language-input {
185
+ background: transparent;
186
+ user-select: text !important;
187
+ pointer-events: auto !important;
188
+ cursor: text;
189
+ -webkit-user-select: text !important;
190
+ }
package/src/lib/utils.ts ADDED
@@ -0,0 +1,6 @@
1
+ import { type ClassValue, clsx } from 'clsx';
2
+ import { twMerge } from 'tailwind-merge';
3
+
4
+ export function cn(...inputs: ClassValue[]) {
5
+ return twMerge(clsx(inputs));
6
+ }
package/src/main.tsx ADDED
@@ -0,0 +1,10 @@
1
+ import React from 'react';
2
+ import ReactDOM from 'react-dom/client';
3
+ import App from './App';
4
+ import './index.css';
5
+
6
+ ReactDOM.createRoot(document.getElementById('root')!).render(
7
+ <React.StrictMode>
8
+ <App />
9
+ </React.StrictMode>,
10
+ );