Skip to content

Commit cc3f153

Browse files
TrynaxTrynax
committed
format with prettier
1 parent 4a8a07e commit cc3f153

File tree

8 files changed

+159
-103
lines changed

8 files changed

+159
-103
lines changed

‎src/artifacts/code/client.tsx‎

Lines changed: 42 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,9 @@ interface CodeArtifactMetadata extends ArtifactMetadata {
1212

1313
export const codeArtifact = new Artifact<"code", CodeArtifactMetadata>({
1414
kind: "code",
15-
description: "A code artifact for writing, editing, and executing code snippets.",
16-
15+
description:
16+
"A code artifact for writing, editing, and executing code snippets.",
17+
1718
initialize: async ({ documentId, setMetadata }) => {
1819
setMetadata({
1920
language: "javascript",
@@ -29,12 +30,13 @@ export const codeArtifact = new Artifact<"code", CodeArtifactMetadata>({
2930
language: streamPart.content as string,
3031
}));
3132
}
32-
33+
3334
if (streamPart.type === "content-update") {
3435
setArtifact((draftArtifact) => {
35-
const newContent = draftArtifact.content + (streamPart.content as string);
36-
const lineCount = newContent.split('\n').length;
37-
36+
const newContent =
37+
draftArtifact.content + (streamPart.content as string);
38+
const lineCount = newContent.split("\n").length;
39+
3840
setMetadata((metadata) => ({
3941
...metadata,
4042
lineCount,
@@ -63,32 +65,38 @@ export const codeArtifact = new Artifact<"code", CodeArtifactMetadata>({
6365
if (isLoading) {
6466
return (
6567
<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 className="h-8 w-8 animate-spin rounded-full border-b-2 border-green-600"></div>
69+
<span className="ml-2 text-sm text-gray-600">
70+
Loading code artifact...
71+
</span>
6872
</div>
6973
);
7074
}
7175

7276
if (mode === "diff") {
7377
const oldContent = getDocumentContentById(currentVersionIndex - 1);
7478
const newContent = getDocumentContentById(currentVersionIndex);
75-
79+
7680
return (
7781
<div className="space-y-4">
7882
<h3 className="text-lg font-semibold">Code Comparison</h3>
7983
<div className="grid grid-cols-2 gap-4">
8084
<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">
85+
<h4 className="mb-2 text-sm font-medium text-gray-600">
86+
Previous Version
87+
</h4>
88+
<div className="rounded-lg border border-red-200 bg-red-50 p-4">
89+
<pre className="overflow-x-auto font-mono text-sm">
8490
<code>{oldContent}</code>
8591
</pre>
8692
</div>
8793
</div>
8894
<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">
95+
<h4 className="mb-2 text-sm font-medium text-gray-600">
96+
Current Version
97+
</h4>
98+
<div className="rounded-lg border border-green-200 bg-green-50 p-4">
99+
<pre className="overflow-x-auto font-mono text-sm">
92100
<code>{newContent}</code>
93101
</pre>
94102
</div>
@@ -110,40 +118,44 @@ export const codeArtifact = new Artifact<"code", CodeArtifactMetadata>({
110118
<span>Language: {metadata.language}</span>
111119
<span>Lines: {metadata.lineCount}</span>
112120
{metadata.lastExecuted && (
113-
<span>Last executed: {metadata.lastExecuted.toLocaleTimeString()}</span>
121+
<span>
122+
Last executed: {metadata.lastExecuted.toLocaleTimeString()}
123+
</span>
114124
)}
115125
</div>
116-
126+
117127
<div className="flex items-center space-x-2">
118128
<button
119129
onClick={executeCode}
120130
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"
131+
className="flex items-center space-x-1 rounded bg-green-600 px-3 py-1 text-sm text-white hover:bg-green-700 disabled:opacity-50"
122132
>
123-
<Play className="w-3 h-3" />
133+
<Play className="h-3 w-3" />
124134
<span>{metadata.isExecuting ? "Running..." : "Run"}</span>
125135
</button>
126136
</div>
127137
</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>
138+
139+
<div className="rounded-lg border bg-gray-900">
140+
<div className="flex items-center justify-between rounded-t-lg bg-gray-800 px-4 py-2">
141+
<span className="text-sm text-white">
142+
Language: {metadata.language}
143+
</span>
132144
</div>
133-
145+
134146
<textarea
135147
value={content}
136148
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"
149+
className="h-96 w-full resize-none rounded-b-lg border-0 bg-gray-900 p-4 font-mono text-sm text-green-400 focus:ring-2 focus:ring-green-500 focus:outline-none"
138150
placeholder="// Write your code here..."
139151
disabled={!isCurrentVersion}
140152
spellCheck={false}
141153
/>
142154
</div>
143-
155+
144156
{status === "streaming" && (
145157
<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>
158+
<div className="mr-2 h-4 w-4 animate-spin rounded-full border-b-2 border-green-600"></div>
147159
Generating code...
148160
</div>
149161
)}
@@ -153,7 +165,7 @@ export const codeArtifact = new Artifact<"code", CodeArtifactMetadata>({
153165

154166
actions: [
155167
{
156-
icon: <RefreshCw className="w-4 h-4" />,
168+
icon: <RefreshCw className="h-4 w-4" />,
157169
description: "Regenerate code",
158170
onClick: ({ appendMessage }) => {
159171
appendMessage({
@@ -166,14 +178,14 @@ export const codeArtifact = new Artifact<"code", CodeArtifactMetadata>({
166178

167179
toolbar: [
168180
{
169-
icon: <Copy className="w-4 h-4" />,
181+
icon: <Copy className="h-4 w-4" />,
170182
description: "Copy code",
171183
onClick: () => {
172184
toast.success("Code copied to clipboard!");
173185
},
174186
},
175187
{
176-
icon: <Download className="w-4 h-4" />,
188+
icon: <Download className="h-4 w-4" />,
177189
description: "Download file",
178190
onClick: () => {
179191
toast.success("File downloaded!");

‎src/artifacts/code/server.ts‎

Lines changed: 29 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@ import { openai } from "@ai-sdk/openai";
44

55
export const codeDocumentHandler = createDocumentHandler<"code">({
66
kind: "code",
7-
7+
88
onCreateDocument: async ({ title, dataStream }) => {
99
let draftContent = "";
10-
10+
1111
const { fullStream } = streamText({
1212
model: openai("gpt-4o"),
1313
system: `You are an expert software developer. Generate high-quality, working code based on the user's request.
@@ -28,11 +28,11 @@ Format your response as clean code without markdown code blocks.`,
2828

2929
// Detect language from the first few tokens and send metadata
3030
let hasDetectedLanguage = false;
31-
31+
3232
for await (const delta of fullStream) {
3333
if (delta.type === "text-delta") {
3434
draftContent += delta.textDelta;
35-
35+
3636
// Try to detect language from the beginning of the content
3737
if (!hasDetectedLanguage && draftContent.length > 20) {
3838
const language = detectLanguage(draftContent);
@@ -44,7 +44,7 @@ Format your response as clean code without markdown code blocks.`,
4444
hasDetectedLanguage = true;
4545
}
4646
}
47-
47+
4848
dataStream.writeData({
4949
type: "content-update",
5050
content: delta.textDelta,
@@ -57,7 +57,7 @@ Format your response as clean code without markdown code blocks.`,
5757

5858
onUpdateDocument: async ({ document, description, dataStream }) => {
5959
let draftContent = "";
60-
60+
6161
const { fullStream } = streamText({
6262
model: openai("gpt-4o"),
6363
system: `You are an expert software developer and code reviewer. You will receive existing code and instructions on how to modify it.
@@ -105,32 +105,48 @@ Format your response as clean code without markdown code blocks.`,
105105

106106
function detectLanguage(code: string): string | null {
107107
const content = code.toLowerCase().trim();
108-
108+
109109
// Check for explicit language comments
110110
if (content.includes("// language:")) {
111111
const match = content.match(/\/\/ language:\s*(\w+)/);
112112
return match?.[1] ?? null;
113113
}
114-
114+
115115
// Pattern-based detection
116-
if (content.includes("def ") || content.includes("import ") || content.includes("print(")) {
116+
if (
117+
content.includes("def ") ||
118+
content.includes("import ") ||
119+
content.includes("print(")
120+
) {
117121
return "python";
118122
}
119-
if (content.includes("function ") || content.includes("const ") || content.includes("console.log")) {
123+
if (
124+
content.includes("function ") ||
125+
content.includes("const ") ||
126+
content.includes("console.log")
127+
) {
120128
return "javascript";
121129
}
122-
if (content.includes("interface ") || content.includes("type ") || content.includes(": string")) {
130+
if (
131+
content.includes("interface ") ||
132+
content.includes("type ") ||
133+
content.includes(": string")
134+
) {
123135
return "typescript";
124136
}
125137
if (content.includes("<!doctype") || content.includes("<html")) {
126138
return "html";
127139
}
128-
if (content.includes("select ") || content.includes("from ") || content.includes("where ")) {
140+
if (
141+
content.includes("select ") ||
142+
content.includes("from ") ||
143+
content.includes("where ")
144+
) {
129145
return "sql";
130146
}
131147
if (content.includes("{") && content.includes(":") && content.includes("}")) {
132148
return "json";
133149
}
134-
150+
135151
return null;
136152
}

0 commit comments

Comments
 (0)