chore: rename blocks to artifacts (#793)

artifacts/sheet/client.tsx

@@ -0,0 +1,115 @@
+import { Artifact } from '@/components/create-artifact';
+import {
+  CopyIcon,
+  LineChartIcon,
+  RedoIcon,
+  SparklesIcon,
+  UndoIcon,
+} from '@/components/icons';
+import { SpreadsheetEditor } from '@/components/sheet-editor';
+import { parse, unparse } from 'papaparse';
+import { toast } from 'sonner';
+
+type Metadata = any;
+
+export const sheetArtifact = new Artifact<'sheet', Metadata>({
+  kind: 'sheet',
+  description: 'Useful for working with spreadsheets',
+  initialize: async () => {},
+  onStreamPart: ({ setArtifact, streamPart }) => {
+    if (streamPart.type === 'sheet-delta') {
+      setArtifact((draftArtifact) => ({
+        ...draftArtifact,
+        content: streamPart.content as string,
+        isVisible: true,
+        status: 'streaming',
+      }));
+    }
+  },
+  content: ({
+    content,
+    currentVersionIndex,
+    isCurrentVersion,
+    onSaveContent,
+    status,
+  }) => {
+    return (
+      <SpreadsheetEditor
+        content={content}
+        currentVersionIndex={currentVersionIndex}
+        isCurrentVersion={isCurrentVersion}
+        saveContent={onSaveContent}
+        status={status}
+      />
+    );
+  },
+  actions: [
+    {
+      icon: <UndoIcon size={18} />,
+      description: 'View Previous version',
+      onClick: ({ handleVersionChange }) => {
+        handleVersionChange('prev');
+      },
+      isDisabled: ({ currentVersionIndex }) => {
+        if (currentVersionIndex === 0) {
+          return true;
+        }
+
+        return false;
+      },
+    },
+    {
+      icon: <RedoIcon size={18} />,
+      description: 'View Next version',
+      onClick: ({ handleVersionChange }) => {
+        handleVersionChange('next');
+      },
+      isDisabled: ({ isCurrentVersion }) => {
+        if (isCurrentVersion) {
+          return true;
+        }
+
+        return false;
+      },
+    },
+    {
+      icon: <CopyIcon />,
+      description: 'Copy as .csv',
+      onClick: ({ content }) => {
+        const parsed = parse<string[]>(content, { skipEmptyLines: true });
+
+        const nonEmptyRows = parsed.data.filter((row) =>
+          row.some((cell) => cell.trim() !== ''),
+        );
+
+        const cleanedCsv = unparse(nonEmptyRows);
+
+        navigator.clipboard.writeText(cleanedCsv);
+        toast.success('Copied csv to clipboard!');
+      },
+    },
+  ],
+  toolbar: [
+    {
+      description: 'Format and clean data',
+      icon: <SparklesIcon />,
+      onClick: ({ appendMessage }) => {
+        appendMessage({
+          role: 'user',
+          content: 'Can you please format and clean the data?',
+        });
+      },
+    },
+    {
+      description: 'Analyze and visualize data',
+      icon: <LineChartIcon />,
+      onClick: ({ appendMessage }) => {
+        appendMessage({
+          role: 'user',
+          content:
+            'Can you please analyze and visualize the data by creating a new code artifact in python?',
+        });
+      },
+    },
+  ],
+});

artifacts/sheet/server.ts

@@ -0,0 +1,78 @@
+import { myProvider } from '@/lib/ai/models';
+import { sheetPrompt, updateDocumentPrompt } from '@/lib/ai/prompts';
+import { createDocumentHandler } from '@/lib/artifacts/server';
+import { streamObject } from 'ai';
+import { z } from 'zod';
+
+export const sheetDocumentHandler = createDocumentHandler<'sheet'>({
+  kind: 'sheet',
+  onCreateDocument: async ({ title, dataStream }) => {
+    let draftContent = '';
+
+    const { fullStream } = streamObject({
+      model: myProvider.languageModel('artifact-model'),
+      system: sheetPrompt,
+      prompt: title,
+      schema: z.object({
+        csv: z.string().describe('CSV data'),
+      }),
+    });
+
+    for await (const delta of fullStream) {
+      const { type } = delta;
+
+      if (type === 'object') {
+        const { object } = delta;
+        const { csv } = object;
+
+        if (csv) {
+          dataStream.writeData({
+            type: 'sheet-delta',
+            content: csv,
+          });
+
+          draftContent = csv;
+        }
+      }
+    }
+
+    dataStream.writeData({
+      type: 'sheet-delta',
+      content: draftContent,
+    });
+
+    return draftContent;
+  },
+  onUpdateDocument: async ({ document, description, dataStream }) => {
+    let draftContent = '';
+
+    const { fullStream } = streamObject({
+      model: myProvider.languageModel('artifact-model'),
+      system: updateDocumentPrompt(document.content, 'sheet'),
+      prompt: description,
+      schema: z.object({
+        csv: z.string(),
+      }),
+    });
+
+    for await (const delta of fullStream) {
+      const { type } = delta;
+
+      if (type === 'object') {
+        const { object } = delta;
+        const { csv } = object;
+
+        if (csv) {
+          dataStream.writeData({
+            type: 'sheet-delta',
+            content: csv,
+          });
+
+          draftContent = csv;
+        }
+      }
+    }
+
+    return draftContent;
+  },
+});