chore: update to ai sdk v5 beta (#1074)

artifacts/code/client.tsx

@@ -12,8 +12,8 @@ import { toast } from 'sonner';
 import { generateUUID } from '@/lib/utils';
 import {
   Console,
-  ConsoleOutput,
-  ConsoleOutputContent,
+  type ConsoleOutput,
+  type ConsoleOutputContent,
 } from '@/components/console';
 
 const OUTPUT_HANDLERS = {
@@ -76,10 +76,10 @@ export const codeArtifact = new Artifact<'code', Metadata>({
     });
   },
   onStreamPart: ({ streamPart, setArtifact }) => {
-    if (streamPart.type === 'code-delta') {
+    if (streamPart.type === 'data-codeDelta') {
       setArtifact((draftArtifact) => ({
         ...draftArtifact,
-        content: streamPart.content as string,
+        content: streamPart.data,
         isVisible:
           draftArtifact.status === 'streaming' &&
           draftArtifact.content.length > 300 &&
@@ -249,20 +249,30 @@ export const codeArtifact = new Artifact<'code', Metadata>({
     {
       icon: <MessageIcon />,
       description: 'Add comments',
-      onClick: ({ appendMessage }) => {
-        appendMessage({
+      onClick: ({ sendMessage }) => {
+        sendMessage({
           role: 'user',
-          content: 'Add comments to the code snippet for understanding',
+          parts: [
+            {
+              type: 'text',
+              text: 'Add comments to the code snippet for understanding',
+            },
+          ],
         });
       },
     },
     {
       icon: <LogsIcon />,
       description: 'Add logs',
-      onClick: ({ appendMessage }) => {
-        appendMessage({
+      onClick: ({ sendMessage }) => {
+        sendMessage({
           role: 'user',
-          content: 'Add logs to the code snippet for debugging',
+          parts: [
+            {
+              type: 'text',
+              text: 'Add logs to the code snippet for debugging',
+            },
+          ],
         });
       },
     },

artifacts/code/server.ts

@@ -26,9 +26,10 @@ export const codeDocumentHandler = createDocumentHandler<'code'>({
         const { code } = object;
 
         if (code) {
-          dataStream.writeData({
-            type: 'code-delta',
-            content: code ?? '',
+          dataStream.write({
+            type: 'data-codeDelta',
+            data: code ?? '',
+            transient: true,
           });
 
           draftContent = code;
@@ -58,9 +59,10 @@ export const codeDocumentHandler = createDocumentHandler<'code'>({
         const { code } = object;
 
         if (code) {
-          dataStream.writeData({
-            type: 'code-delta',
-            content: code ?? '',
+          dataStream.write({
+            type: 'data-codeDelta',
+            data: code ?? '',
+            transient: true,
           });
 
           draftContent = code;

artifacts/image/client.tsx

@@ -7,10 +7,10 @@ export const imageArtifact = new Artifact({
   kind: 'image',
   description: 'Useful for image generation',
   onStreamPart: ({ streamPart, setArtifact }) => {
-    if (streamPart.type === 'image-delta') {
+    if (streamPart.type === 'data-imageDelta') {
       setArtifact((draftArtifact) => ({
         ...draftArtifact,
-        content: streamPart.content as string,
+        content: streamPart.data,
         isVisible: true,
         status: 'streaming',
       }));

artifacts/image/server.ts

@@ -15,9 +15,10 @@ export const imageDocumentHandler = createDocumentHandler<'image'>({
 
     draftContent = image.base64;
 
-    dataStream.writeData({
-      type: 'image-delta',
-      content: image.base64,
+    dataStream.write({
+      type: 'data-imageDelta',
+      data: image.base64,
+      transient: true,
     });
 
     return draftContent;
@@ -33,9 +34,10 @@ export const imageDocumentHandler = createDocumentHandler<'image'>({
 
     draftContent = image.base64;
 
-    dataStream.writeData({
-      type: 'image-delta',
-      content: image.base64,
+    dataStream.write({
+      type: 'data-imageDelta',
+      data: image.base64,
+      transient: true,
     });
 
     return draftContent;

artifacts/sheet/client.tsx

@@ -17,10 +17,10 @@ export const sheetArtifact = new Artifact<'sheet', Metadata>({
   description: 'Useful for working with spreadsheets',
   initialize: async () => {},
   onStreamPart: ({ setArtifact, streamPart }) => {
-    if (streamPart.type === 'sheet-delta') {
+    if (streamPart.type === 'data-sheetDelta') {
       setArtifact((draftArtifact) => ({
         ...draftArtifact,
-        content: streamPart.content as string,
+        content: streamPart.data,
         isVisible: true,
         status: 'streaming',
       }));
@@ -93,21 +93,27 @@ export const sheetArtifact = new Artifact<'sheet', Metadata>({
     {
       description: 'Format and clean data',
       icon: <SparklesIcon />,
-      onClick: ({ appendMessage }) => {
-        appendMessage({
+      onClick: ({ sendMessage }) => {
+        sendMessage({
           role: 'user',
-          content: 'Can you please format and clean the data?',
+          parts: [
+            { type: 'text', text: 'Can you please format and clean the data?' },
+          ],
         });
       },
     },
     {
       description: 'Analyze and visualize data',
       icon: <LineChartIcon />,
-      onClick: ({ appendMessage }) => {
-        appendMessage({
+      onClick: ({ sendMessage }) => {
+        sendMessage({
           role: 'user',
-          content:
-            'Can you please analyze and visualize the data by creating a new code artifact in python?',
+          parts: [
+            {
+              type: 'text',
+              text: 'Can you please analyze and visualize the data by creating a new code artifact in python?',
+            },
+          ],
         });
       },
     },

artifacts/sheet/server.ts

@@ -26,9 +26,10 @@ export const sheetDocumentHandler = createDocumentHandler<'sheet'>({
         const { csv } = object;
 
         if (csv) {
-          dataStream.writeData({
-            type: 'sheet-delta',
-            content: csv,
+          dataStream.write({
+            type: 'data-sheetDelta',
+            data: csv,
+            transient: true,
           });
 
           draftContent = csv;
@@ -36,9 +37,10 @@ export const sheetDocumentHandler = createDocumentHandler<'sheet'>({
       }
     }
 
-    dataStream.writeData({
-      type: 'sheet-delta',
-      content: draftContent,
+    dataStream.write({
+      type: 'data-sheetDelta',
+      data: draftContent,
+      transient: true,
     });
 
     return draftContent;
@@ -63,9 +65,10 @@ export const sheetDocumentHandler = createDocumentHandler<'sheet'>({
         const { csv } = object;
 
         if (csv) {
-          dataStream.writeData({
-            type: 'sheet-delta',
-            content: csv,
+          dataStream.write({
+            type: 'data-sheetDelta',
+            data: csv,
+            transient: true,
           });
 
           draftContent = csv;

artifacts/text/client.tsx

@@ -10,7 +10,7 @@ import {
   RedoIcon,
   UndoIcon,
 } from '@/components/icons';
-import { Suggestion } from '@/lib/db/schema';
+import type { Suggestion } from '@/lib/db/schema';
 import { toast } from 'sonner';
 import { getSuggestions } from '../actions';
 
@@ -29,22 +29,19 @@ export const textArtifact = new Artifact<'text', TextArtifactMetadata>({
     });
   },
   onStreamPart: ({ streamPart, setMetadata, setArtifact }) => {
-    if (streamPart.type === 'suggestion') {
+    if (streamPart.type === 'data-suggestion') {
       setMetadata((metadata) => {
         return {
-          suggestions: [
-            ...metadata.suggestions,
-            streamPart.content as Suggestion,
-          ],
+          suggestions: [...metadata.suggestions, streamPart.data],
         };
       });
     }
 
-    if (streamPart.type === 'text-delta') {
+    if (streamPart.type === 'data-textDelta') {
       setArtifact((draftArtifact) => {
         return {
           ...draftArtifact,
-          content: draftArtifact.content + (streamPart.content as string),
+          content: draftArtifact.content + streamPart.data,
           isVisible:
             draftArtifact.status === 'streaming' &&
             draftArtifact.content.length > 400 &&
@@ -90,9 +87,7 @@ export const textArtifact = new Artifact<'text', TextArtifactMetadata>({
             onSaveContent={onSaveContent}
           />
 
-          {metadata &&
-          metadata.suggestions &&
-          metadata.suggestions.length > 0 ? (
+          {metadata?.suggestions && metadata.suggestions.length > 0 ? (
             <div className="md:hidden h-dvh w-12 shrink-0" />
           ) : null}
         </div>
@@ -155,22 +150,30 @@ export const textArtifact = new Artifact<'text', TextArtifactMetadata>({
     {
       icon: <PenIcon />,
       description: 'Add final polish',
-      onClick: ({ appendMessage }) => {
-        appendMessage({
+      onClick: ({ sendMessage }) => {
+        sendMessage({
           role: 'user',
-          content:
-            'Please add final polish and check for grammar, add section titles for better structure, and ensure everything reads smoothly.',
+          parts: [
+            {
+              type: 'text',
+              text: 'Please add final polish and check for grammar, add section titles for better structure, and ensure everything reads smoothly.',
+            },
+          ],
         });
       },
     },
     {
       icon: <MessageIcon />,
       description: 'Request suggestions',
-      onClick: ({ appendMessage }) => {
-        appendMessage({
+      onClick: ({ sendMessage }) => {
+        sendMessage({
           role: 'user',
-          content:
-            'Please add suggestions you have that could improve the writing.',
+          parts: [
+            {
+              type: 'text',
+              text: 'Please add suggestions you have that could improve the writing.',
+            },
+          ],
         });
       },
     },

artifacts/text/server.ts

@@ -19,14 +19,15 @@ export const textDocumentHandler = createDocumentHandler<'text'>({
     for await (const delta of fullStream) {
       const { type } = delta;
 
-      if (type === 'text-delta') {
-        const { textDelta } = delta;
+      if (type === 'text') {
+        const { text } = delta;
 
-        draftContent += textDelta;
+        draftContent += text;
 
-        dataStream.writeData({
-          type: 'text-delta',
-          content: textDelta,
+        dataStream.write({
+          type: 'data-textDelta',
+          data: text,
+          transient: true,
         });
       }
     }
@@ -41,7 +42,7 @@ export const textDocumentHandler = createDocumentHandler<'text'>({
       system: updateDocumentPrompt(document.content, 'text'),
       experimental_transform: smoothStream({ chunking: 'word' }),
       prompt: description,
-      experimental_providerMetadata: {
+      providerOptions: {
         openai: {
           prediction: {
             type: 'content',
@@ -54,13 +55,15 @@ export const textDocumentHandler = createDocumentHandler<'text'>({
     for await (const delta of fullStream) {
       const { type } = delta;
 
-      if (type === 'text-delta') {
-        const { textDelta } = delta;
+      if (type === 'text') {
+        const { text } = delta;
 
-        draftContent += textDelta;
-        dataStream.writeData({
-          type: 'text-delta',
-          content: textDelta,
+        draftContent += text;
+
+        dataStream.write({
+          type: 'data-textDelta',
+          data: text,
+          transient: true,
         });
       }
     }