@chat-js/cli 0.4.0 → 0.6.1

package/templates/chat-app/components/artifact-actions.tsx

@@ -1,8 +1,21 @@
 import { type Dispatch, memo, type SetStateAction, useState } from "react";
 import { toast } from "sonner";
+import type {
+  Artifact,
+  ArtifactActionContext,
+  ArtifactMetadata,
+} from "@/components/create-artifact";
+import {
+  codeArtifact,
+  getCodeArtifactMetadata,
+} from "@/lib/artifacts/code/client";
+import {
+  getSheetArtifactMetadata,
+  sheetArtifact,
+} from "@/lib/artifacts/sheet/client";
+import { textArtifact } from "@/lib/artifacts/text/client";
 import { cn } from "@/lib/utils";
-import { artifactDefinitions, type UIArtifact } from "./artifact-panel";
-import type { ArtifactActionContext } from "./create-artifact";
+import type { UIArtifact } from "./artifact-panel";
 import { Button } from "./ui/button";
 import { Toggle } from "./ui/toggle";
 import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
@@ -13,13 +26,33 @@ interface ArtifactActionsProps {
   handleVersionChange: (type: "next" | "prev" | "toggle" | "latest") => void;
   isCurrentVersion: boolean;
   isReadonly: boolean;
-  metadata: any;
+  metadata: ArtifactMetadata;
   mode: "edit" | "diff";
-  setMetadata: Dispatch<SetStateAction<any>>;
+  setMetadata: Dispatch<SetStateAction<ArtifactMetadata>>;
 }
 
-function PureArtifactActions({
+function createTypedMetadataSetter<M extends ArtifactMetadata>(
+  setMetadata: Dispatch<SetStateAction<ArtifactMetadata>>,
+  coerce: (metadata: ArtifactMetadata) => M
+): Dispatch<SetStateAction<M>> {
+  return (value) => {
+    setMetadata((current) => {
+      const typedCurrent = coerce(current);
+      return typeof value === "function" ? value(typedCurrent) : value;
+    });
+  };
+}
+
+interface TypedArtifactActionsProps<M extends ArtifactMetadata>
+  extends Omit<ArtifactActionsProps, "metadata" | "setMetadata"> {
+  artifactDefinition: Artifact<string, M>;
+  metadata: M;
+  setMetadata: Dispatch<SetStateAction<M>>;
+}
+
+function TypedArtifactActions<M extends ArtifactMetadata>({
   artifact,
+  artifactDefinition,
   handleVersionChange,
   currentVersionIndex,
   isCurrentVersion,
@@ -27,18 +60,10 @@ function PureArtifactActions({
   metadata,
   setMetadata,
   isReadonly,
-}: ArtifactActionsProps) {
+}: TypedArtifactActionsProps<M>) {
   const [isLoading, setIsLoading] = useState(false);
 
-  const artifactDefinition = artifactDefinitions.find(
-    (definition) => definition.kind === artifact.kind
-  );
-
-  if (!artifactDefinition) {
-    throw new Error("Artifact definition not found!");
-  }
-
-  const actionContext: ArtifactActionContext = {
+  const actionContext: ArtifactActionContext<M> = {
     content: artifact.content,
     handleVersionChange,
     currentVersionIndex,
@@ -50,7 +75,7 @@ function PureArtifactActions({
   };
 
   function isActionDisabled(action: {
-    isDisabled?: (context: ArtifactActionContext) => boolean;
+    isDisabled?: (context: ArtifactActionContext<M>) => boolean;
   }): boolean {
     if (isLoading || artifact.status === "streaming") {
       return true;
@@ -106,7 +131,7 @@ function PureArtifactActions({
                 </div>
               ) : (
                 <Button
-                  className={cn("h-fit dark:hover:bg-zinc-700", {
+                  className={cn("h-fit hover:bg-accent", {
                     "p-2": !action.label,
                     "px-2 py-1.5": action.label,
                   })}
@@ -137,7 +162,45 @@ function PureArtifactActions({
 }
 
 export const ArtifactActions = memo(
-  PureArtifactActions,
+  function ArtifactActions(props: ArtifactActionsProps) {
+    switch (props.artifact.kind) {
+      case "code":
+        return (
+          <TypedArtifactActions
+            {...props}
+            artifactDefinition={codeArtifact}
+            metadata={getCodeArtifactMetadata(props.metadata)}
+            setMetadata={createTypedMetadataSetter(
+              props.setMetadata,
+              getCodeArtifactMetadata
+            )}
+          />
+        );
+      case "sheet":
+        return (
+          <TypedArtifactActions
+            {...props}
+            artifactDefinition={sheetArtifact}
+            metadata={getSheetArtifactMetadata(props.metadata)}
+            setMetadata={createTypedMetadataSetter(
+              props.setMetadata,
+              getSheetArtifactMetadata
+            )}
+          />
+        );
+      case "text":
+        return (
+          <TypedArtifactActions
+            {...props}
+            artifactDefinition={textArtifact}
+            metadata={props.metadata}
+            setMetadata={props.setMetadata}
+          />
+        );
+      default:
+        throw new Error("Artifact definition not found!");
+    }
+  },
   (prevProps, nextProps) => {
     if (prevProps.artifact.status !== nextProps.artifact.status) {
       return false;

package/templates/chat-app/components/artifact-panel.tsx

@@ -5,14 +5,21 @@ import {
 } from "@ai-sdk-tools/store";
 import { useQueryClient } from "@tanstack/react-query";
 import { formatDistance } from "date-fns";
+import type { Dispatch, SetStateAction } from "react";
 import { memo, useCallback, useEffect, useRef, useState } from "react";
 import { useDebounceCallback } from "usehooks-ts";
 import { useDocuments, useSaveDocument } from "@/hooks/chat-sync-hooks";
 import { useArtifact } from "@/hooks/use-artifact";
 import type { ChatMessage } from "@/lib/ai/types";
 import type { ArtifactKind } from "@/lib/artifacts/artifact-kind";
-import { codeArtifact } from "@/lib/artifacts/code/client";
-import { sheetArtifact } from "@/lib/artifacts/sheet/client";
+import {
+  codeArtifact,
+  getCodeArtifactMetadata,
+} from "@/lib/artifacts/code/client";
+import {
+  getSheetArtifactMetadata,
+  sheetArtifact,
+} from "@/lib/artifacts/sheet/client";
 import { textArtifact } from "@/lib/artifacts/text/client";
 import type { Document } from "@/lib/db/schema";
 import { cn } from "@/lib/utils";
@@ -27,6 +34,7 @@ import {
   ArtifactTitle,
 } from "./ai-elements/artifact";
 import { ArtifactActions as ArtifactPanelActions } from "./artifact-actions";
+import type { ArtifactMetadata } from "./create-artifact";
 //
 import { Toolbar } from "./toolbar";
 import { ScrollArea } from "./ui/scroll-area";
@@ -45,6 +53,18 @@ export interface UIArtifact {
   title: string;
 }
 
+function createTypedMetadataSetter<M extends ArtifactMetadata>(
+  setMetadata: Dispatch<SetStateAction<ArtifactMetadata>>,
+  coerce: (metadata: ArtifactMetadata) => M
+): Dispatch<SetStateAction<M>> {
+  return (value) => {
+    setMetadata((current) => {
+      const typedCurrent = coerce(current);
+      return typeof value === "function" ? value(typedCurrent) : value;
+    });
+  };
+}
+
 function PureArtifactPanel({
   isReadonly,
   isAuthenticated,
@@ -77,15 +97,7 @@ function PureArtifactPanel({
         (doc) => doc.messageId === artifact.messageId
       );
 
-      if (mostRecentDocumentIndex !== -1) {
-        const mostRecentDocument = documents[mostRecentDocumentIndex];
-        setDocument(mostRecentDocument);
-        setCurrentVersionIndex(mostRecentDocumentIndex);
-        setArtifact((currentArtifact) => ({
-          ...currentArtifact,
-          content: mostRecentDocument.content ?? "",
-        }));
-      } else {
+      if (mostRecentDocumentIndex === -1) {
         // Fallback to the most recent document
         const latestDocument = documents.at(-1);
         if (latestDocument) {
@@ -96,6 +108,14 @@ function PureArtifactPanel({
             content: latestDocument.content ?? "",
           }));
         }
+      } else {
+        const mostRecentDocument = documents[mostRecentDocumentIndex];
+        setDocument(mostRecentDocument);
+        setCurrentVersionIndex(mostRecentDocumentIndex);
+        setArtifact((currentArtifact) => ({
+          ...currentArtifact,
+          content: mostRecentDocument.content ?? "",
+        }));
       }
     }
   }, [documents, setArtifact, artifact.messageId]);
@@ -112,17 +132,6 @@ function PureArtifactPanel({
     }
   );
 
-  const artifactDefinition = artifactDefinitions.find(
-    (definition) => definition.kind === artifact.kind
-  );
-
-  if (!artifactDefinition) {
-    throw new Error("Artifact definition not found!");
-  }
-
-  const ArtifactContentComponent = artifactDefinition.content;
-  const ArtifactFooterComponent = artifactDefinition.footer;
-
   const handleContentChange = useCallback(
     (updatedContent: string) => {
       if (!documents) {
@@ -225,22 +234,48 @@ function PureArtifactPanel({
       : true;
 
   useEffect(() => {
-    if (
-      artifact.documentId !== "init" &&
-      artifact.status !== "streaming" &&
-      artifactDefinition.initialize
-    ) {
-      artifactDefinition.initialize({
-        documentId: artifact.documentId,
-        setMetadata,
-        trpc,
-        queryClient,
-        isAuthenticated,
-      });
+    if (artifact.documentId !== "init" && artifact.status !== "streaming") {
+      switch (artifact.kind) {
+        case "code":
+          codeArtifact.initialize?.({
+            documentId: artifact.documentId,
+            setMetadata: createTypedMetadataSetter(
+              setMetadata,
+              getCodeArtifactMetadata
+            ),
+            trpc,
+            queryClient,
+            isAuthenticated,
+          });
+          break;
+        case "sheet":
+          sheetArtifact.initialize?.({
+            documentId: artifact.documentId,
+            setMetadata: createTypedMetadataSetter(
+              setMetadata,
+              getSheetArtifactMetadata
+            ),
+            trpc,
+            queryClient,
+            isAuthenticated,
+          });
+          break;
+        case "text":
+          textArtifact.initialize?.({
+            documentId: artifact.documentId,
+            setMetadata,
+            trpc,
+            queryClient,
+            isAuthenticated,
+          });
+          break;
+        default:
+          break;
+      }
     }
   }, [
     artifact.documentId,
-    artifactDefinition,
+    artifact.kind,
     setMetadata,
     trpc,
     queryClient,
@@ -272,6 +307,76 @@ function PureArtifactPanel({
     title: artifact.title,
   };
 
+  const renderArtifactContent = () => {
+    switch (artifact.kind) {
+      case "code":
+        return (
+          <>
+            <codeArtifact.content
+              {...sharedArtifactProps}
+              metadata={getCodeArtifactMetadata(metadata)}
+              setMetadata={createTypedMetadataSetter(
+                setMetadata,
+                getCodeArtifactMetadata
+              )}
+            />
+            {codeArtifact.footer ? (
+              <codeArtifact.footer
+                {...sharedArtifactProps}
+                metadata={getCodeArtifactMetadata(metadata)}
+                setMetadata={createTypedMetadataSetter(
+                  setMetadata,
+                  getCodeArtifactMetadata
+                )}
+              />
+            ) : null}
+          </>
+        );
+      case "sheet":
+        return (
+          <>
+            <sheetArtifact.content
+              {...sharedArtifactProps}
+              metadata={getSheetArtifactMetadata(metadata)}
+              setMetadata={createTypedMetadataSetter(
+                setMetadata,
+                getSheetArtifactMetadata
+              )}
+            />
+            {sheetArtifact.footer ? (
+              <sheetArtifact.footer
+                {...sharedArtifactProps}
+                metadata={getSheetArtifactMetadata(metadata)}
+                setMetadata={createTypedMetadataSetter(
+                  setMetadata,
+                  getSheetArtifactMetadata
+                )}
+              />
+            ) : null}
+          </>
+        );
+      case "text":
+        return (
+          <>
+            <textArtifact.content
+              {...sharedArtifactProps}
+              metadata={metadata}
+              setMetadata={setMetadata}
+            />
+            {textArtifact.footer ? (
+              <textArtifact.footer
+                {...sharedArtifactProps}
+                metadata={metadata}
+                setMetadata={setMetadata}
+              />
+            ) : null}
+          </>
+        );
+      default:
+        return null;
+    }
+  };
+
   return (
     <ArtifactCard
       className={cn(
@@ -283,7 +388,7 @@ function PureArtifactPanel({
       <ArtifactHeader className="items-start bg-background/80 p-2">
         <div className="flex flex-row items-start gap-4">
           <ArtifactClose
-            className="h-fit p-2 dark:hover:bg-zinc-700"
+            className="h-fit p-2 hover:bg-accent"
             data-testid="artifact-close-button"
             onClick={closeArtifact}
             variant="outline"
@@ -336,7 +441,7 @@ function PureArtifactPanel({
       <ArtifactContent className="flex h-full flex-col p-0">
         <ScrollArea className="h-full max-w-full!">
           <div className="flex flex-col items-center bg-background/80">
-            <ArtifactContentComponent {...sharedArtifactProps} />
+            {renderArtifactContent()}
 
             {isCurrentVersion && !isReadonly && (
               <Toolbar
@@ -351,10 +456,6 @@ function PureArtifactPanel({
           </div>
         </ScrollArea>
 
-        {ArtifactFooterComponent ? (
-          <ArtifactFooterComponent {...sharedArtifactProps} />
-        ) : null}
-
         {!(isCurrentVersion || isReadonly) && (
           <VersionFooter
             currentVersionIndex={currentVersionIndex}

package/templates/chat-app/components/attachment-list.tsx

@@ -66,7 +66,7 @@ function AttachmentPill({
   return (
     <div
       className={cn(
-        "group relative flex h-8 cursor-default select-none items-center gap-1.5 rounded-md border border-border px-1.5 font-medium text-sm transition-all hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        "group relative flex h-8 cursor-default select-none items-center gap-1.5 rounded-md border border-border px-1.5 font-medium text-sm transition-all hover:bg-accent hover:text-accent-foreground",
         isUploading && "opacity-60"
       )}
       data-testid="input-attachment-preview"

package/templates/chat-app/components/{social-auth-providers.tsx → auth-providers.tsx}

@@ -1,9 +1,12 @@
 "use client";
 
 import { Github } from "lucide-react";
+import { toast } from "sonner";
+import { ElectronBrowserSignIn } from "@/components/electron-auth-ui";
 import { Button } from "@/components/ui/button";
 import authClient from "@/lib/auth-client";
 import { config } from "@/lib/config";
+import type { SocialAuthSignInOptions } from "@/lib/social-auth";
 
 function GoogleIcon({ className }: { className?: string }) {
   return (
@@ -38,13 +41,55 @@ function VercelIcon({ className }: { className?: string }) {
   );
 }
 
-export function SocialAuthProviders() {
+export function SocialAuthProviders({
+  callbackURL,
+  electronBrowserLabel,
+  isElectron = false,
+  onRedirectToUrl,
+  query = {},
+  signInOptions,
+}: {
+  callbackURL?: string;
+  electronBrowserLabel?: string;
+  isElectron?: boolean;
+  onRedirectToUrl?: (url: string) => void;
+  query?: Record<string, string>;
+  signInOptions?: SocialAuthSignInOptions;
+} = {}) {
+  // In the Electron app, use the @better-auth/electron bridges exposed by
+  // setupRenderer() in the preload script. requestAuth() opens the sign-in
+  // URL in the user's default browser with the proper PKCE params.
+  if (config.desktopApp.enabled && isElectron) {
+    return <ElectronBrowserSignIn buttonLabel={electronBrowserLabel} />;
+  }
+
+  async function signIn(provider: "google" | "github" | "vercel") {
+    try {
+      const result = await authClient.signIn.social({
+        provider,
+        callbackURL,
+        ...signInOptions,
+        fetchOptions: {
+          query,
+        },
+      });
+
+      const redirectUrl = result.data?.url;
+      if (redirectUrl) {
+        onRedirectToUrl?.(redirectUrl);
+      }
+    } catch (error) {
+      console.error(`Failed to start ${provider} sign-in`, error);
+      toast.error("Couldn't start sign-in. Please try again.");
+    }
+  }
+
   return (
     <div className="space-y-2">
       {config.authentication.google ? (
         <Button
           className="w-full"
-          onClick={() => authClient.signIn.social({ provider: "google" })}
+          onClick={() => signIn("google")}
           type="button"
           variant="outline"
         >
@@ -55,7 +100,7 @@ export function SocialAuthProviders() {
       {config.authentication.github ? (
         <Button
           className="w-full"
-          onClick={() => authClient.signIn.social({ provider: "github" })}
+          onClick={() => signIn("github")}
           type="button"
           variant="outline"
         >
@@ -66,7 +111,7 @@ export function SocialAuthProviders() {
       {config.authentication.vercel ? (
         <Button
           className="w-full"
-          onClick={() => authClient.signIn.social({ provider: "vercel" })}
+          onClick={() => signIn("vercel")}
           type="button"
           variant="outline"
         >

package/templates/chat-app/components/chat/chat-welcome.tsx

@@ -34,12 +34,12 @@ function PureChatWelcome({
   return (
     <div
       className={cn(
-        "flex min-h-0 flex-1 flex-col items-center justify-center",
+        "flex min-h-0 flex-1 flex-col justify-end md:justify-center",
         className
       )}
     >
-      <div className="mx-auto w-full p-2 @[500px]:px-4 md:max-w-3xl">
-        <div className="mb-6">
+      <div className="mx-auto w-full p-2 @[500px]:px-4 @[500px]:pb-6 pb-4 md:max-w-3xl">
+        <div className="mb-4 md:mb-6">
           <WelcomeMessage />
         </div>
         <MultimodalInput

package/templates/chat-app/components/chat-menu-items.tsx

@@ -36,7 +36,7 @@ export function ChatMenuItems({
       {showShare && onShare && <ShareMenuItem onShare={onShare} />}
 
       <DropdownMenuItem
-        className="cursor-pointer text-destructive focus:bg-destructive/15 focus:text-destructive dark:text-red-500"
+        className="cursor-pointer text-destructive focus:bg-destructive/15 focus:text-destructive"
         onSelect={onDelete}
       >
         <Trash2 size={16} />

package/templates/chat-app/components/chat-sync.tsx

@@ -8,6 +8,7 @@ import { useDataStream } from "@/components/data-stream-provider";
 import { useSaveMessageMutation } from "@/hooks/chat-sync-hooks";
 import { useCompleteDataPart } from "@/hooks/use-complete-data-part";
 import { ChatSDKError } from "@/lib/ai/errors";
+import { getStreamErrorToastContent } from "@/lib/ai/stream-errors";
 import type { ChatMessage } from "@/lib/ai/types";
 import {
   useAddMessageToTree,
@@ -103,14 +104,8 @@ export function ChatSync({
       }
 
       console.error(error);
-      const cause = error.cause;
-      if (cause && typeof cause === "string") {
-        toast.error(error.message ?? "An error occured, please try again!", {
-          description: cause,
-        });
-      } else {
-        toast.error(error.message ?? "An error occured, please try again!");
-      }
+      const { message, description } = getStreamErrorToastContent(error);
+      toast.error(message, description ? { description } : undefined);
     },
   });
 

package/templates/chat-app/components/console.tsx

@@ -54,16 +54,16 @@ export function Console({
 
   return consoleOutputs.length > 0 ? (
     <div className={cn("flex w-full flex-col overflow-hidden", className)}>
-      <div className="flex h-full w-full flex-col overflow-x-hidden overflow-y-scroll border-zinc-200 border-t bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-900">
-        <div className="sticky top-0 z-50 flex h-fit w-full flex-row items-center justify-between border-zinc-200 border-b bg-muted px-2 py-1 dark:border-zinc-700">
-          <div className="flex flex-row items-center gap-3 pl-2 text-sm text-zinc-800 dark:text-zinc-50">
+      <div className="flex h-full w-full flex-col overflow-x-hidden overflow-y-scroll border-border border-t bg-muted">
+        <div className="sticky top-0 z-50 flex h-fit w-full flex-row items-center justify-between border-border border-b bg-muted px-2 py-1">
+          <div className="flex flex-row items-center gap-3 pl-2 text-foreground text-sm">
             <div className="text-muted-foreground">
               <Terminal size={16} />
             </div>
             <div>Console</div>
           </div>
           <Button
-            className="size-fit p-1 hover:bg-zinc-200 dark:hover:bg-zinc-700"
+            className="size-fit p-1 hover:bg-accent"
             onClick={() => setConsoleOutputs([])}
             size="icon"
             variant="ghost"
@@ -75,7 +75,7 @@ export function Console({
         <div>
           {consoleOutputs.map((consoleOutput, index) => (
             <div
-              className="flex flex-row border-zinc-200 border-b bg-zinc-50 px-4 py-2 font-mono text-sm dark:border-zinc-700 dark:bg-zinc-900"
+              className="flex flex-row border-border border-b bg-muted px-4 py-2 font-mono text-sm"
               key={consoleOutput.id}
             >
               <div
@@ -102,10 +102,10 @@ export function Console({
                   </div>
                 </div>
               ) : (
-                <div className="flex w-full flex-col gap-2 overflow-x-scroll text-zinc-900 dark:text-zinc-50">
-                  {consoleOutput.contents.map((content, contentIndex) =>
+                <div className="flex w-full flex-col gap-2 overflow-x-scroll text-foreground">
+                  {consoleOutput.contents.map((content) =>
                     content.type === "image" ? (
-                      <picture key={`${consoleOutput.id}-${contentIndex}`}>
+                      <picture key={`${consoleOutput.id}-${content.value}`}>
                         <img
                           alt="output"
                           className="w-full max-w-(--breakpoint-toast-mobile) rounded-md"
@@ -117,7 +117,7 @@ export function Console({
                     ) : (
                       <div
                         className="break-word-wrap w-full whitespace-pre-line"
-                        key={`${consoleOutput.id}-${contentIndex}`}
+                        key={`${consoleOutput.id}-${content.type}-${content.value}`}
                       >
                         {content.value}
                       </div>

package/templates/chat-app/components/context-usage.tsx

@@ -94,8 +94,8 @@ function ContextUsage({
     if (!usage) {
       return 0;
     }
-    const input = (usage as any).inputTokens ?? 0;
-    const cached = (usage as any).cachedInputTokens ?? 0;
+    const input = usage.inputTokens ?? 0;
+    const cached = usage.cachedInputTokens ?? 0;
     return input + cached;
   }, [usage]);
 

package/templates/chat-app/components/create-artifact.tsx

@@ -7,7 +7,11 @@ import type { ChatMessage, CustomUIDataTypes } from "@/lib/ai/types";
 import type { useTRPC } from "@/trpc/react";
 import type { UIArtifact } from "./artifact-panel";
 
-export interface ArtifactActionContext<M = any> {
+export type ArtifactMetadata = object | null;
+
+export interface ArtifactActionContext<
+  M extends ArtifactMetadata = ArtifactMetadata,
+> {
   content: string;
   currentVersionIndex: number;
   handleVersionChange: (type: "next" | "prev" | "toggle" | "latest") => void;
@@ -18,7 +22,7 @@ export interface ArtifactActionContext<M = any> {
   setMetadata: Dispatch<SetStateAction<M>>;
 }
 
-interface ArtifactAction<M = any> {
+interface ArtifactAction<M extends ArtifactMetadata = ArtifactMetadata> {
   description: string;
   icon: ReactNode;
   isDisabled?: (context: ArtifactActionContext<M>) => boolean;
@@ -37,7 +41,7 @@ export interface ArtifactToolbarItem {
   onClick: (context: ArtifactToolbarContext) => void;
 }
 
-interface ArtifactContent<M = any> {
+interface ArtifactContent<M extends ArtifactMetadata = ArtifactMetadata> {
   content: string;
   currentVersionIndex: number;
   getDocumentContentById: (index: number) => string;
@@ -53,7 +57,10 @@ interface ArtifactContent<M = any> {
   title: string;
 }
 
-interface ArtifactConfig<T extends string, M = any> {
+interface ArtifactConfig<
+  T extends string,
+  M extends ArtifactMetadata = ArtifactMetadata,
+> {
   actions: ArtifactAction<M>[];
   content: ComponentType<ArtifactContent<M>>;
   description: string;
@@ -80,7 +87,10 @@ interface ArtifactConfig<T extends string, M = any> {
   toolbar: ArtifactToolbarItem[];
 }
 
-export class Artifact<T extends string, M = any> {
+export class Artifact<
+  T extends string,
+  M extends ArtifactMetadata = ArtifactMetadata,
+> {
   readonly kind: T;
   readonly description: string;
   readonly content: ComponentType<ArtifactContent<M>>;