chore: rename blocks to artifacts (#793)

lib/ai/models.ts

@@ -17,7 +17,7 @@ export const myProvider = customProvider({
       middleware: extractReasoningMiddleware({ tagName: 'think' }),
     }),
     'title-model': openai('gpt-4-turbo'),
-    'block-model': openai('gpt-4o-mini'),
+    'artifact-model': openai('gpt-4o-mini'),
   },
   imageModels: {
     'small-model': openai.image('dall-e-2'),

lib/ai/prompts.ts

@@ -1,13 +1,13 @@
-import { BlockKind } from '@/components/block';
+import { ArtifactKind } from '@/components/artifact';
 
-export const blocksPrompt = `
-Blocks is a special user interface mode that helps users with writing, editing, and other content creation tasks. When block is open, it is on the right side of the screen, while the conversation is on the left side. When creating or updating documents, changes are reflected in real-time on the blocks and visible to the user.
+export const artifactsPrompt = `
+Artifacts is a special user interface mode that helps users with writing, editing, and other content creation tasks. When artifact is open, it is on the right side of the screen, while the conversation is on the left side. When creating or updating documents, changes are reflected in real-time on the artifacts and visible to the user.
 
-When asked to write code, always use blocks. When writing code, specify the language in the backticks, e.g. \`\`\`python\`code here\`\`\`. The default language is Python. Other languages are not yet supported, so let the user know if they request a different language.
+When asked to write code, always use artifacts. When writing code, specify the language in the backticks, e.g. \`\`\`python\`code here\`\`\`. The default language is Python. Other languages are not yet supported, so let the user know if they request a different language.
 
 DO NOT UPDATE DOCUMENTS IMMEDIATELY AFTER CREATING THEM. WAIT FOR USER FEEDBACK OR REQUEST TO UPDATE IT.
 
-This is a guide for using blocks tools: \`createDocument\` and \`updateDocument\`, which render content on a blocks beside the conversation.
+This is a guide for using artifacts tools: \`createDocument\` and \`updateDocument\`, which render content on a artifacts beside the conversation.
 
 **When to use \`createDocument\`:**
 - For substantial content (>10 lines) or code
@@ -42,7 +42,7 @@ export const systemPrompt = ({
   if (selectedChatModel === 'chat-model-reasoning') {
     return regularPrompt;
   } else {
-    return `${regularPrompt}\n\n${blocksPrompt}`;
+    return `${regularPrompt}\n\n${artifactsPrompt}`;
   }
 };
 
@@ -80,7 +80,7 @@ You are a spreadsheet creation assistant. Create a spreadsheet in csv format bas
 
 export const updateDocumentPrompt = (
   currentContent: string | null,
-  type: BlockKind,
+  type: ArtifactKind,
 ) =>
   type === 'text'
     ? `\

lib/ai/tools/create-document.ts

@@ -2,7 +2,10 @@ import { generateUUID } from '@/lib/utils';
 import { DataStreamWriter, tool } from 'ai';
 import { z } from 'zod';
 import { Session } from 'next-auth';
-import { blockKinds, documentHandlersByBlockKind } from '@/lib/blocks/server';
+import {
+  artifactKinds,
+  documentHandlersByArtifactKind,
+} from '@/lib/artifacts/server';
 
 interface CreateDocumentProps {
   session: Session;
@@ -15,7 +18,7 @@ export const createDocument = ({ session, dataStream }: CreateDocumentProps) =>
       'Create a document for a writing or content creation activities. This tool will call other functions that will generate the contents of the document based on the title and kind.',
     parameters: z.object({
       title: z.string(),
-      kind: z.enum(blockKinds),
+      kind: z.enum(artifactKinds),
     }),
     execute: async ({ title, kind }) => {
       const id = generateUUID();
@@ -40,9 +43,9 @@ export const createDocument = ({ session, dataStream }: CreateDocumentProps) =>
         content: '',
       });
 
-      const documentHandler = documentHandlersByBlockKind.find(
-        (documentHandlerByBlockKind) =>
-          documentHandlerByBlockKind.kind === kind,
+      const documentHandler = documentHandlersByArtifactKind.find(
+        (documentHandlerByArtifactKind) =>
+          documentHandlerByArtifactKind.kind === kind,
       );
 
       if (!documentHandler) {

lib/ai/tools/request-suggestions.ts

@@ -36,7 +36,7 @@ export const requestSuggestions = ({
       > = [];
 
       const { elementStream } = streamObject({
-        model: myProvider.languageModel('block-model'),
+        model: myProvider.languageModel('artifact-model'),
         system:
           'You are a help writing assistant. Given a piece of writing, please offer suggestions to improve the piece of writing and describe the change. It is very important for the edits to contain full sentences instead of just words. Max 5 suggestions.',
         prompt: document.content,

lib/ai/tools/update-document.ts

@@ -2,7 +2,7 @@ import { DataStreamWriter, tool } from 'ai';
 import { Session } from 'next-auth';
 import { z } from 'zod';
 import { getDocumentById, saveDocument } from '@/lib/db/queries';
-import { documentHandlersByBlockKind } from '@/lib/blocks/server';
+import { documentHandlersByArtifactKind } from '@/lib/artifacts/server';
 
 interface UpdateDocumentProps {
   session: Session;
@@ -32,9 +32,9 @@ export const updateDocument = ({ session, dataStream }: UpdateDocumentProps) =>
         content: document.title,
       });
 
-      const documentHandler = documentHandlersByBlockKind.find(
-        (documentHandlerByBlockKind) =>
-          documentHandlerByBlockKind.kind === document.kind,
+      const documentHandler = documentHandlersByArtifactKind.find(
+        (documentHandlerByArtifactKind) =>
+          documentHandlerByArtifactKind.kind === document.kind,
       );
 
       if (!documentHandler) {

lib/artifacts/server.ts

@@ -1,8 +1,8 @@
-import { codeDocumentHandler } from '@/blocks/code/server';
-import { imageDocumentHandler } from '@/blocks/image/server';
-import { sheetDocumentHandler } from '@/blocks/sheet/server';
-import { textDocumentHandler } from '@/blocks/text/server';
-import { BlockKind } from '@/components/block';
+import { codeDocumentHandler } from '@/artifacts/code/server';
+import { imageDocumentHandler } from '@/artifacts/image/server';
+import { sheetDocumentHandler } from '@/artifacts/sheet/server';
+import { textDocumentHandler } from '@/artifacts/text/server';
+import { ArtifactKind } from '@/components/artifact';
 import { DataStreamWriter } from 'ai';
 import { Document } from '../db/schema';
 import { saveDocument } from '../db/queries';
@@ -11,7 +11,7 @@ import { Session } from 'next-auth';
 export interface SaveDocumentProps {
   id: string;
   title: string;
-  kind: BlockKind;
+  kind: ArtifactKind;
   content: string;
   userId: string;
 }
@@ -30,13 +30,13 @@ export interface UpdateDocumentCallbackProps {
   session: Session;
 }
 
-export interface DocumentHandler<T = BlockKind> {
+export interface DocumentHandler<T = ArtifactKind> {
   kind: T;
   onCreateDocument: (args: CreateDocumentCallbackProps) => Promise<void>;
   onUpdateDocument: (args: UpdateDocumentCallbackProps) => Promise<void>;
 }
 
-export function createDocumentHandler<T extends BlockKind>(config: {
+export function createDocumentHandler<T extends ArtifactKind>(config: {
   kind: T;
   onCreateDocument: (params: CreateDocumentCallbackProps) => Promise<string>;
   onUpdateDocument: (params: UpdateDocumentCallbackProps) => Promise<string>;
@@ -87,13 +87,13 @@ export function createDocumentHandler<T extends BlockKind>(config: {
 }
 
 /*
- * Use this array to define the document handlers for each block kind.
+ * Use this array to define the document handlers for each artifact kind.
  */
-export const documentHandlersByBlockKind: Array<DocumentHandler> = [
+export const documentHandlersByArtifactKind: Array<DocumentHandler> = [
   textDocumentHandler,
   codeDocumentHandler,
   imageDocumentHandler,
   sheetDocumentHandler,
 ];
 
-export const blockKinds = ['text', 'code', 'image', 'sheet'] as const;
+export const artifactKinds = ['text', 'code', 'image', 'sheet'] as const;

lib/db/queries.ts

@@ -16,7 +16,7 @@ import {
   message,
   vote,
 } from './schema';
-import { BlockKind } from '@/components/block';
+import { ArtifactKind } from '@/components/artifact';
 
 // Optionally, if not using email/pass login, you can
 // use the Drizzle adapter for Auth.js / NextAuth
@@ -176,7 +176,7 @@ export async function saveDocument({
 }: {
   id: string;
   title: string;
-  kind: BlockKind;
+  kind: ArtifactKind;
   content: string;
   userId: string;
 }) {

lib/db/schema.ts

@@ -10,7 +10,6 @@ import {
   foreignKey,
   boolean,
 } from 'drizzle-orm/pg-core';
-import { blockKinds } from '../blocks/server';
 
 export const user = pgTable('User', {
   id: uuid('id').primaryKey().notNull().defaultRandom(),

lib/editor/suggestions.tsx

@@ -9,7 +9,7 @@ import { createRoot } from 'react-dom/client';
 
 import { Suggestion as PreviewSuggestion } from '@/components/suggestion';
 import type { Suggestion } from '@/lib/db/schema';
-import { BlockKind } from '@/components/block';
+import { ArtifactKind } from '@/components/artifact';
 
 export interface UISuggestion extends Suggestion {
   selectionStart: number;
@@ -70,7 +70,7 @@ export function projectWithPositions(
 export function createSuggestionWidget(
   suggestion: UISuggestion,
   view: EditorView,
-  blockKind: BlockKind = 'text',
+  artifactKind: ArtifactKind = 'text',
 ): { dom: HTMLElement; destroy: () => void } {
   const dom = document.createElement('span');
   const root = createRoot(dom);
@@ -117,7 +117,7 @@ export function createSuggestionWidget(
     <PreviewSuggestion
       suggestion={suggestion}
       onApply={onApply}
-      blockKind={blockKind}
+      artifactKind={artifactKind}
     />,
   );