feat: Add Steps, ImageGallery, and Carousel visualization tools

src/components/chat-mention-input.tsx

@@ -366,6 +366,22 @@ export function ChatMentionInputSuggestion({
           label = "table";
           description = "Create a table";
           break;
+        case DefaultToolName.CreateTimeline:
+          label = "timeline";
+          description = "Create a timeline visualization";
+          break;
+        case DefaultToolName.CreateSteps:
+          label = "steps";
+          description = "Create a step-by-step guide";
+          break;
+        case DefaultToolName.CreateImageGallery:
+          label = "image-gallery";
+          description = "Create an image gallery";
+          break;
+        case DefaultToolName.CreateCarousel:
+          label = "carousel";
+          description = "Create a carousel";
+          break;
         case DefaultToolName.WebSearch:
           label = "web-search";
           description = "Search the web";

src/components/default-tool-icon.tsx

@@ -10,6 +10,10 @@ import {
   CodeIcon,
   HammerIcon,
   TableOfContents,
+  LayoutList,
+  ListChecks,
+  Images,
+  GalleryHorizontalEnd,
 } from "lucide-react";
 import { useMemo } from "react";
 
@@ -38,6 +42,22 @@ export function DefaultToolIcon({
         <TableOfContents className={cn("size-3.5 text-blue-500", className)} />
       );
     }
+    if (name === DefaultToolName.CreateTimeline) {
+      return <LayoutList className={cn("size-3.5 text-blue-500", className)} />;
+    }
+    if (name === DefaultToolName.CreateSteps) {
+      return <ListChecks className={cn("size-3.5 text-blue-500", className)} />;
+    }
+    if (name === DefaultToolName.CreateImageGallery) {
+      return <Images className={cn("size-3.5 text-blue-500", className)} />;
+    }
+    if (name === DefaultToolName.CreateCarousel) {
+      return (
+        <GalleryHorizontalEnd
+          className={cn("size-3.5 text-blue-500", className)}
+        />
+      );
+    }
     if (name === DefaultToolName.WebSearch) {
       return <GlobeIcon className={cn("size-3.5 text-blue-400", className)} />;
     }

src/components/message-parts.tsx

@@ -695,6 +695,47 @@ const InteractiveTable = dynamic(
   },
 );
 
+const Timeline = dynamic(
+  () => import("./tool-invocation/timeline").then((mod) => mod.Timeline),
+  {
+    ssr: false,
+    loading,
+  },
+);
+
+const StepsInvocation = dynamic(
+  () =>
+    import("./tool-invocation/steps-invocation").then(
+      (mod) => mod.StepsInvocation,
+    ),
+  {
+    ssr: false,
+    loading,
+  },
+);
+
+const GalleryInvocation = dynamic(
+  () =>
+    import("./tool-invocation/gallery-invocation").then(
+      (mod) => mod.GalleryInvocation,
+    ),
+  {
+    ssr: false,
+    loading,
+  },
+);
+
+const CarouselInvocation = dynamic(
+  () =>
+    import("./tool-invocation/carousel-invocation").then(
+      (mod) => mod.CarouselInvocation,
+    ),
+  {
+    ssr: false,
+    loading,
+  },
+);
+
 const WebSearchToolInvocation = dynamic(
   () =>
     import("./tool-invocation/web-search").then(
@@ -926,6 +967,31 @@ export const ToolMessagePart = memo(
                 {...(input as any)}
               />
             );
+          case DefaultToolName.CreateTimeline:
+            return (
+              <Timeline key={`${toolCallId}-${toolName}`} {...(input as any)} />
+            );
+          case DefaultToolName.CreateSteps:
+            return (
+              <StepsInvocation
+                key={`${toolCallId}-${toolName}`}
+                {...(input as any)}
+              />
+            );
+          case DefaultToolName.CreateImageGallery:
+            return (
+              <GalleryInvocation
+                key={`${toolCallId}-${toolName}`}
+                {...(input as any)}
+              />
+            );
+          case DefaultToolName.CreateCarousel:
+            return (
+              <CarouselInvocation
+                key={`${toolCallId}-${toolName}`}
+                {...(input as any)}
+              />
+            );
         }
       }
       return null;

src/components/tool-invocation/carousel-invocation.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import * as React from "react";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/components/ui/carousel";
+import { JsonViewPopup } from "../json-view-popup";
+import { Markdown } from "@/components/markdown";
+
+// Carousel invocation props interface matching tool schema
+export interface CarouselInvocationProps {
+  title: string;
+  description?: string;
+  items: Array<{
+    content: React.ReactNode;
+    id?: string;
+  }>;
+  itemsToScroll?: number;
+}
+
+export function CarouselInvocation(props: CarouselInvocationProps) {
+  const { title, description, items, itemsToScroll = 1 } = props;
+
+  return (
+    <Card className="bg-card">
+      <CardHeader className="flex flex-col gap-2 relative">
+        <CardTitle className="flex items-center">
+          Carousel - {title}
+          <div className="absolute right-4 top-0">
+            <JsonViewPopup data={props} />
+          </div>
+        </CardTitle>
+        {description && <CardDescription>{description}</CardDescription>}
+      </CardHeader>
+      <CardContent>
+        <Carousel itemsToScroll={itemsToScroll}>
+          <CarouselContent>
+            {items.map((item, index) => (
+              <CarouselItem
+                key={item.id || index}
+                className="basis-full md:basis-1/2 lg:basis-1/3"
+              >
+                <div className="p-4 border border-border rounded-lg bg-card h-full">
+                  {typeof item.content === "string" ? (
+                    <Markdown>{item.content}</Markdown>
+                  ) : (
+                    item.content
+                  )}
+                </div>
+              </CarouselItem>
+            ))}
+          </CarouselContent>
+          <CarouselPrevious />
+          <CarouselNext />
+        </Carousel>
+      </CardContent>
+    </Card>
+  );
+}

src/components/tool-invocation/gallery-invocation.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import * as React from "react";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { ImageGallery, type ImageItem } from "@/components/ui/image-gallery";
+import { JsonViewPopup } from "../json-view-popup";
+
+// Gallery invocation props interface matching tool schema
+export interface GalleryInvocationProps {
+  title: string;
+  description?: string;
+  images: ImageItem[];
+}
+
+export function GalleryInvocation(props: GalleryInvocationProps) {
+  const { title, description, images } = props;
+
+  return (
+    <Card className="bg-card">
+      <CardHeader className="flex flex-col gap-2 relative">
+        <CardTitle className="flex items-center">
+          Gallery - {title}
+          <div className="absolute right-4 top-0">
+            <JsonViewPopup data={props} />
+          </div>
+        </CardTitle>
+        {description && <CardDescription>{description}</CardDescription>}
+      </CardHeader>
+      <CardContent>
+        <ImageGallery images={images} />
+      </CardContent>
+    </Card>
+  );
+}

src/components/tool-invocation/steps-invocation.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import * as React from "react";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Steps, StepsItem } from "@/components/ui/steps";
+import { JsonViewPopup } from "../json-view-popup";
+
+// Steps invocation props interface matching tool schema
+export interface StepsInvocationProps {
+  title: string;
+  description?: string;
+  steps: Array<{
+    title: string;
+    details: string;
+    number?: number;
+  }>;
+}
+
+export function StepsInvocation(props: StepsInvocationProps) {
+  const { title, description, steps } = props;
+
+  return (
+    <Card className="bg-card">
+      <CardHeader className="flex flex-col gap-2 relative">
+        <CardTitle className="flex items-center">
+          Steps - {title}
+          <div className="absolute right-4 top-0">
+            <JsonViewPopup data={props} />
+          </div>
+        </CardTitle>
+        {description && <CardDescription>{description}</CardDescription>}
+      </CardHeader>
+      <CardContent>
+        <Steps>
+          {steps.map((step, index) => (
+            <StepsItem
+              key={index}
+              title={step.title}
+              details={step.details}
+              number={step.number}
+            />
+          ))}
+        </Steps>
+      </CardContent>
+    </Card>
+  );
+}