Skip to content

Commit 45e129a

Browse files
TrynaxTrynax
committed
feat: Implement basic artifacts system with text, code, and custom types
1 parent 5732945 commit 45e129a

File tree

14 files changed

+1336
-0
lines changed

14 files changed

+1336
-0
lines changed

‎src/app/(general)/test-artifacts/page.tsx‎

Lines changed: 187 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,187 @@
1+
"use client";
2+
3+
import { useState } from "react";
4+
import { api } from "@/trpc/react";
5+
import { Button } from "@/components/ui/button";
6+
import { Input } from "@/components/ui/input";
7+
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
8+
import {
9+
DropdownMenu,
10+
DropdownMenuContent,
11+
DropdownMenuItem,
12+
DropdownMenuTrigger
13+
} from "@/components/ui/dropdown-menu";
14+
import { ArtifactKind } from "@prisma/client";
15+
import { ChevronDown } from "lucide-react";
16+
17+
export default function ArtifactsTestPage() {
18+
const [title, setTitle] = useState("");
19+
const [kind, setKind] = useState<ArtifactKind>("text");
20+
21+
const { data: documents, refetch } = api.documents.list.useQuery({});
22+
const createDocument = api.documents.create.useMutation({
23+
onSuccess: () => {
24+
refetch();
25+
setTitle("");
26+
},
27+
});
28+
const generateContent = api.documents.generateContent.useMutation({
29+
onSuccess: () => {
30+
refetch();
31+
setTitle("");
32+
},
33+
});
34+
const deleteDocument = api.documents.delete.useMutation({
35+
onSuccess: () => {
36+
refetch();
37+
},
38+
});
39+
40+
const handleCreateDocument = () => {
41+
if (!title.trim()) return;
42+
43+
createDocument.mutate({
44+
title,
45+
kind,
46+
initialContent: "This is initial content for testing.",
47+
});
48+
};
49+
50+
const handleGenerateContent = () => {
51+
if (!title.trim()) return;
52+
53+
generateContent.mutate({
54+
title,
55+
kind,
56+
});
57+
};
58+
59+
return (
60+
<div className="container mx-auto py-8 space-y-8">
61+
<div className="space-y-4">
62+
<h1 className="text-3xl font-bold">Artifacts Testing</h1>
63+
<p className="text-gray-600">Test the artifacts system functionality</p>
64+
</div>
65+
66+
{/* Create Document Form */}
67+
<Card>
68+
<CardHeader>
69+
<CardTitle>Create New Document</CardTitle>
70+
<CardDescription>Test document creation and content generation</CardDescription>
71+
</CardHeader>
72+
<CardContent className="space-y-4">
73+
<div className="flex gap-4">
74+
<Input
75+
placeholder="Document title..."
76+
value={title}
77+
onChange={(e) => setTitle(e.target.value)}
78+
className="flex-1"
79+
/>
80+
<DropdownMenu>
81+
<DropdownMenuTrigger asChild>
82+
<Button variant="outline" className="w-32 justify-between">
83+
{kind}
84+
<ChevronDown className="h-4 w-4" />
85+
</Button>
86+
</DropdownMenuTrigger>
87+
<DropdownMenuContent>
88+
<DropdownMenuItem onClick={() => setKind("text")}>
89+
Text
90+
</DropdownMenuItem>
91+
<DropdownMenuItem onClick={() => setKind("code")}>
92+
Code
93+
</DropdownMenuItem>
94+
<DropdownMenuItem onClick={() => setKind("custom")}>
95+
Custom
96+
</DropdownMenuItem>
97+
</DropdownMenuContent>
98+
</DropdownMenu>
99+
</div>
100+
<div className="flex gap-2">
101+
<Button
102+
onClick={handleCreateDocument}
103+
disabled={!title.trim() || createDocument.isPending}
104+
>
105+
{createDocument.isPending ? "Creating..." : "Create Empty Document"}
106+
</Button>
107+
<Button
108+
onClick={handleGenerateContent}
109+
disabled={!title.trim() || generateContent.isPending}
110+
variant="secondary"
111+
>
112+
{generateContent.isPending ? "Generating..." : "Generate with AI"}
113+
</Button>
114+
</div>
115+
</CardContent>
116+
</Card>
117+
118+
{/* Documents List */}
119+
<Card>
120+
<CardHeader>
121+
<CardTitle>Documents ({documents?.documents.length || 0})</CardTitle>
122+
<CardDescription>Your created artifacts</CardDescription>
123+
</CardHeader>
124+
<CardContent>
125+
{documents?.documents.length === 0 ? (
126+
<p className="text-gray-500 text-center py-8">No documents yet. Create one above!</p>
127+
) : (
128+
<div className="space-y-4">
129+
{documents?.documents.map((document) => (
130+
<div key={document.id} className="border rounded-lg p-4 space-y-2">
131+
<div className="flex items-center justify-between">
132+
<div>
133+
<h3 className="font-semibold">{document.title}</h3>
134+
<p className="text-sm text-gray-500">
135+
Type: {document.kind} • Created: {new Date(document.createdAt).toLocaleString()}
136+
</p>
137+
</div>
138+
<Button
139+
variant="destructive"
140+
size="sm"
141+
onClick={() => deleteDocument.mutate({ id: document.id })}
142+
disabled={deleteDocument.isPending}
143+
>
144+
Delete
145+
</Button>
146+
</div>
147+
{document.content && (
148+
<div className="bg-gray-50 rounded p-3 max-h-32 overflow-auto">
149+
<pre className="text-sm whitespace-pre-wrap">{document.content}</pre>
150+
</div>
151+
)}
152+
</div>
153+
))}
154+
</div>
155+
)}
156+
</CardContent>
157+
</Card>
158+
159+
{/* API Status */}
160+
<Card>
161+
<CardHeader>
162+
<CardTitle>System Status</CardTitle>
163+
</CardHeader>
164+
<CardContent>
165+
<div className="grid grid-cols-2 gap-4 text-sm">
166+
<div>
167+
<span className="font-medium">Database:</span>{" "}
168+
<span className="text-green-600">Connected ✓</span>
169+
</div>
170+
<div>
171+
<span className="font-medium">AI Provider:</span>{" "}
172+
<span className="text-green-600">Ready ✓</span>
173+
</div>
174+
<div>
175+
<span className="font-medium">Documents API:</span>{" "}
176+
<span className="text-green-600">Working ✓</span>
177+
</div>
178+
<div>
179+
<span className="font-medium">Artifact Types:</span>{" "}
180+
<span className="text-blue-600">Text, Code, Custom</span>
181+
</div>
182+
</div>
183+
</CardContent>
184+
</Card>
185+
</div>
186+
);
187+
}

‎src/artifacts/code/client.tsx‎

Lines changed: 183 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,183 @@
1+
import { Artifact } from "@/lib/artifacts/artifact";
2+
import type { ArtifactMetadata } from "@/lib/artifacts/types";
3+
import { Play, Copy, Download, RefreshCw } from "lucide-react";
4+
import { toast } from "sonner";
5+
6+
interface CodeArtifactMetadata extends ArtifactMetadata {
7+
language: string;
8+
lineCount: number;
9+
lastExecuted?: Date;
10+
isExecuting: boolean;
11+
}
12+
13+
export const codeArtifact = new Artifact<"code", CodeArtifactMetadata>({
14+
kind: "code",
15+
description: "A code artifact for writing, editing, and executing code snippets.",
16+
17+
initialize: async ({ documentId, setMetadata }) => {
18+
setMetadata({
19+
language: "javascript",
20+
lineCount: 0,
21+
isExecuting: false,
22+
});
23+
},
24+
25+
onStreamPart: ({ streamPart, setMetadata, setArtifact }) => {
26+
if (streamPart.type === "language-update") {
27+
setMetadata((metadata) => ({
28+
...metadata,
29+
language: streamPart.content as string,
30+
}));
31+
}
32+
33+
if (streamPart.type === "content-update") {
34+
setArtifact((draftArtifact) => {
35+
const newContent = draftArtifact.content + (streamPart.content as string);
36+
const lineCount = newContent.split('\n').length;
37+
38+
setMetadata((metadata) => ({
39+
...metadata,
40+
lineCount,
41+
}));
42+
43+
return {
44+
...draftArtifact,
45+
content: newContent,
46+
status: "streaming",
47+
};
48+
});
49+
}
50+
},
51+
52+
content: ({
53+
mode,
54+
status,
55+
content,
56+
isCurrentVersion,
57+
currentVersionIndex,
58+
onSaveContent,
59+
getDocumentContentById,
60+
isLoading,
61+
metadata,
62+
}) => {
63+
if (isLoading) {
64+
return (
65+
<div className="flex items-center justify-center p-8">
66+
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-green-600"></div>
67+
<span className="ml-2 text-sm text-gray-600">Loading code artifact...</span>
68+
</div>
69+
);
70+
}
71+
72+
if (mode === "diff") {
73+
const oldContent = getDocumentContentById(currentVersionIndex - 1);
74+
const newContent = getDocumentContentById(currentVersionIndex);
75+
76+
return (
77+
<div className="space-y-4">
78+
<h3 className="text-lg font-semibold">Code Comparison</h3>
79+
<div className="grid grid-cols-2 gap-4">
80+
<div>
81+
<h4 className="text-sm font-medium text-gray-600 mb-2">Previous Version</h4>
82+
<div className="bg-red-50 border border-red-200 rounded-lg p-4">
83+
<pre className="text-sm font-mono overflow-x-auto">
84+
<code>{oldContent}</code>
85+
</pre>
86+
</div>
87+
</div>
88+
<div>
89+
<h4 className="text-sm font-medium text-gray-600 mb-2">Current Version</h4>
90+
<div className="bg-green-50 border border-green-200 rounded-lg p-4">
91+
<pre className="text-sm font-mono overflow-x-auto">
92+
<code>{newContent}</code>
93+
</pre>
94+
</div>
95+
</div>
96+
</div>
97+
</div>
98+
);
99+
}
100+
101+
const executeCode = async () => {
102+
// TODO: Implement code execution using E2B or similar service
103+
toast.info("Code execution coming soon!");
104+
};
105+
106+
return (
107+
<div className="space-y-4">
108+
<div className="flex items-center justify-between text-sm text-gray-600">
109+
<div className="flex items-center space-x-4">
110+
<span>Language: {metadata.language}</span>
111+
<span>Lines: {metadata.lineCount}</span>
112+
{metadata.lastExecuted && (
113+
<span>Last executed: {metadata.lastExecuted.toLocaleTimeString()}</span>
114+
)}
115+
</div>
116+
117+
<div className="flex items-center space-x-2">
118+
<button
119+
onClick={executeCode}
120+
disabled={!isCurrentVersion || metadata.isExecuting}
121+
className="flex items-center space-x-1 px-3 py-1 bg-green-600 text-white rounded text-sm hover:bg-green-700 disabled:opacity-50"
122+
>
123+
<Play className="w-3 h-3" />
124+
<span>{metadata.isExecuting ? "Running..." : "Run"}</span>
125+
</button>
126+
</div>
127+
</div>
128+
129+
<div className="border rounded-lg bg-gray-900">
130+
<div className="flex items-center justify-between px-4 py-2 bg-gray-800 rounded-t-lg">
131+
<span className="text-white text-sm">Language: {metadata.language}</span>
132+
</div>
133+
134+
<textarea
135+
value={content}
136+
onChange={(e) => onSaveContent(e.target.value)}
137+
className="w-full h-96 p-4 bg-gray-900 text-green-400 font-mono text-sm border-0 rounded-b-lg resize-none focus:outline-none focus:ring-2 focus:ring-green-500"
138+
placeholder="// Write your code here..."
139+
disabled={!isCurrentVersion}
140+
spellCheck={false}
141+
/>
142+
</div>
143+
144+
{status === "streaming" && (
145+
<div className="flex items-center text-sm text-green-600">
146+
<div className="animate-spin rounded-full h-4 w-4 border-b-2 border-green-600 mr-2"></div>
147+
Generating code...
148+
</div>
149+
)}
150+
</div>
151+
);
152+
},
153+
154+
actions: [
155+
{
156+
icon: <RefreshCw className="w-4 h-4" />,
157+
description: "Regenerate code",
158+
onClick: ({ appendMessage }) => {
159+
appendMessage({
160+
role: "user",
161+
content: "Please regenerate and improve this code.",
162+
});
163+
},
164+
},
165+
],
166+
167+
toolbar: [
168+
{
169+
icon: <Copy className="w-4 h-4" />,
170+
description: "Copy code",
171+
onClick: () => {
172+
toast.success("Code copied to clipboard!");
173+
},
174+
},
175+
{
176+
icon: <Download className="w-4 h-4" />,
177+
description: "Download file",
178+
onClick: () => {
179+
toast.success("File downloaded!");
180+
},
181+
},
182+
],
183+
});

0 commit comments

Comments
 (0)