@chat-js/cli 0.6.1 → 0.6.3

package/templates/chat-app/components/login-form.tsx

@@ -1,9 +1,9 @@
 "use client";
 
-import Link from "next/link";
 import { useSearchParams } from "next/navigation";
 import { Suspense, useEffect, useState } from "react";
 import { SocialAuthProviders } from "@/components/auth-providers";
+import { InternalLink } from "@/components/internal-link";
 import {
   Card,
   CardContent,
@@ -65,12 +65,12 @@ export function LoginForm({
             ) : (
               <div className="text-center text-sm">
                 Don&apos;t have an account?{" "}
-                <Link
+                <InternalLink
                   className="underline underline-offset-4"
                   href={registerHref}
                 >
                   Sign up
-                </Link>
+                </InternalLink>
               </div>
             )}
           </div>
@@ -78,8 +78,8 @@ export function LoginForm({
       </Card>
       <div className="text-balance text-center text-muted-foreground text-xs [&_a]:underline [&_a]:underline-offset-4 [&_a]:hover:text-primary">
         By clicking continue, you agree to our{" "}
-        <Link href="/terms">Terms of Service</Link> and{" "}
-        <Link href="/privacy">Privacy Policy</Link>.
+        <InternalLink href="/terms">Terms of Service</InternalLink> and{" "}
+        <InternalLink href="/privacy">Privacy Policy</InternalLink>.
       </div>
     </div>
   );

package/templates/chat-app/components/message-parts.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import type { ToolUIPart } from "ai";
 import {
   isDataUIPart,
   isReasoningUIPart,
@@ -9,24 +8,14 @@ import {
   isToolUIPart,
 } from "ai";
 import { memo } from "react";
-import type { ChatTools } from "@/lib/ai/types";
 import {
   useMessagePartByPartIdx,
   useMessagePartTypesById,
 } from "@/lib/stores/hooks-message-parts";
-import { CodeExecution } from "./part/code-execution";
-import { DeepResearch } from "./part/deep-research";
-import { DocumentTool } from "./part/document-tool";
 import { DynamicToolPart } from "./part/dynamic-tool";
-import { GenerateImage } from "./part/generate-image";
-import { GenerateVideo } from "./part/generate-video";
 import { ReasoningPart } from "./part/message-reasoning";
-import { ReadDocument } from "./part/read-document";
-
-import { RetrieveUrl } from "./part/retrieve-url";
 import { TextMessagePart } from "./part/text-message-part";
-import { Weather } from "./part/weather";
-import { WebSearch } from "./part/web-search";
+import { ToolPart } from "./part/tool-part";
 
 interface MessagePartsProps {
   isLoading: boolean;
@@ -34,64 +23,6 @@ interface MessagePartsProps {
   messageId: string;
 }
 
-function ToolPart({
-  part,
-  messageId,
-  isReadonly,
-}: {
-  part: ToolUIPart<ChatTools>;
-  messageId: string;
-  isReadonly: boolean;
-}) {
-  const type = part.type;
-
-  if (type === "tool-getWeather") {
-    return <Weather tool={part} />;
-  }
-
-  if (
-    type === "tool-createTextDocument" ||
-    type === "tool-createCodeDocument" ||
-    type === "tool-createSheetDocument" ||
-    type === "tool-editTextDocument" ||
-    type === "tool-editCodeDocument" ||
-    type === "tool-editSheetDocument"
-  ) {
-    return (
-      <DocumentTool isReadonly={isReadonly} messageId={messageId} tool={part} />
-    );
-  }
-
-  if (type === "tool-retrieveUrl") {
-    return <RetrieveUrl tool={part} />;
-  }
-
-  if (type === "tool-readDocument") {
-    return <ReadDocument tool={part} />;
-  }
-
-  if (type === "tool-codeExecution") {
-    return <CodeExecution tool={part} />;
-  }
-
-  if (type === "tool-generateImage") {
-    return <GenerateImage tool={part} />;
-  }
-
-  if (type === "tool-generateVideo") {
-    return <GenerateVideo tool={part} />;
-  }
-
-  if (type === "tool-deepResearch") {
-    return <DeepResearch messageId={messageId} part={part} />;
-  }
-
-  if (type === "tool-webSearch") {
-    return <WebSearch messageId={messageId} part={part} />;
-  }
-  return null;
-}
-
 // Render a single part by index with minimal subscriptions
 function PureMessagePart({
   messageId,
@@ -124,7 +55,6 @@ function PureMessagePart({
         <ToolPart isReadonly={isReadonly} messageId={messageId} part={part} />
       );
     }
-    // At this point it's a Dynamic Tool, tools are handled beforehand by the ToolPart component
     return (
       <DynamicToolPart
         isReadonly={isReadonly}

package/templates/chat-app/components/model-selector.tsx

@@ -7,7 +7,6 @@ import {
   ChevronUpIcon,
   FilterIcon,
 } from "lucide-react";
-import Link from "next/link";
 import {
   memo,
   type ReactNode,
@@ -19,6 +18,7 @@ import {
   useRef,
   useState,
 } from "react";
+import { InternalLink } from "@/components/internal-link";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
@@ -697,10 +697,10 @@ function PureModelSelector({
                   size="sm"
                   variant="ghost"
                 >
-                  <Link aria-label="Add Models" href="/settings/models">
+                  <InternalLink aria-label="Add Models" href="/settings/models">
                     Add Models
                     <ChevronRightIcon className="h-4 w-4" />
-                  </Link>
+                  </InternalLink>
                 </Button>
               </div>
             )}

package/templates/chat-app/components/new-chat-button.tsx

@@ -1,8 +1,8 @@
 "use client";
 
 import { Plus } from "lucide-react";
-import Link from "next/link";
 import { useEffect, useState } from "react";
+import { InternalLink } from "@/components/internal-link";
 import { getNewChatShortcutText } from "@/components/keyboard-shortcuts";
 import { SidebarMenuButton, useSidebar } from "@/components/ui/sidebar";
 import { useChatId } from "@/providers/chat-id-provider";
@@ -18,10 +18,10 @@ export function NewChatButton() {
 
   return (
     <SidebarMenuButton asChild className="mt-4" tooltip="New Chat">
-      <Link
+      <InternalLink
         className="flex w-full items-center gap-2"
         href="/"
-        onClick={() => {
+        onNavigate={() => {
           setOpenMobile(false);
           refreshChatID();
         }}
@@ -31,7 +31,7 @@ export function NewChatButton() {
         <span className="ml-auto text-muted-foreground text-xs">
           {shortcutText}
         </span>
-      </Link>
+      </InternalLink>
     </SidebarMenuButton>
   );
 }

package/templates/chat-app/components/part/document-common.tsx

@@ -1,12 +1,12 @@
 import { File, Loader2, Pencil } from "lucide-react";
 import { memo } from "react";
 import { useArtifact } from "@/hooks/use-artifact";
+import type { ChatMessage } from "@/lib/ai/types";
+import type { ArtifactKind } from "@/lib/artifacts/artifact-kind";
 import type {
   CreateDocumentToolType,
   EditDocumentToolType,
-} from "@/lib/ai/tools/documents/types";
-import type { ChatMessage } from "@/lib/ai/types";
-import type { ArtifactKind } from "@/lib/artifacts/artifact-kind";
+} from "@/tools/platform/documents/types";
 
 export type CreateDocumentTool = Extract<
   ChatMessage["parts"][number],

package/templates/chat-app/components/part/document-tool.tsx

@@ -2,13 +2,13 @@
 
 import { memo, useEffect } from "react";
 import { useArtifact } from "@/hooks/use-artifact";
+import type { ChatMessage } from "@/lib/ai/types";
+import { useIsLastArtifact } from "@/lib/stores/hooks-message-parts";
 import {
   type DocumentToolType,
   getToolKind,
   isEditTool,
-} from "@/lib/ai/tools/documents/types";
-import type { ChatMessage } from "@/lib/ai/types";
-import { useIsLastArtifact } from "@/lib/stores/hooks-message-parts";
+} from "@/tools/platform/documents/types";
 import { DocumentPreview } from "./document-preview";
 
 type DocumentTool = Extract<

package/templates/chat-app/components/part/message-annotations.tsx

@@ -1,9 +1,9 @@
 import { memo } from "react";
+import { useMessageResearchUpdatePartsById } from "@/lib/stores/hooks-base";
 import type {
   ResearchUpdate,
   WebSearchUpdate,
-} from "@/lib/ai/tools/research-updates-schema";
-import { useMessageResearchUpdatePartsById } from "@/lib/stores/hooks-base";
+} from "@/tools/platform/research-updates-schema";
 import { ReasonSearchResearchProgress } from "../deep-research-progress";
 import { Sources } from "../sources";
 

package/templates/chat-app/components/part/tool-part.tsx

@@ -0,0 +1,92 @@
+"use client";
+
+import type { ToolUIPart } from "ai";
+import type { ComponentType } from "react";
+import {
+  type InstalledToolPart,
+  type InstalledToolType,
+  isInstalledToolType,
+  type ToolRendererProps,
+  toolRendererRegistry,
+} from "@/lib/ai/tool-renderer-registry";
+import type { ChatTools } from "@/lib/ai/types";
+import { CodeExecution } from "./code-execution";
+import { DeepResearch } from "./deep-research";
+import { DocumentTool } from "./document-tool";
+import { GenerateImage } from "./generate-image";
+import { GenerateVideo } from "./generate-video";
+import { ReadDocument } from "./read-document";
+import { WebSearch } from "./web-search";
+
+interface ToolPartProps {
+  isReadonly: boolean;
+  messageId: string;
+  part: ToolUIPart<ChatTools>;
+}
+
+function renderInstalledTool<T extends InstalledToolType>({
+  part,
+  messageId,
+  isReadonly,
+}: {
+  part: InstalledToolPart<T>;
+  messageId: string;
+  isReadonly: boolean;
+}) {
+  const Renderer = toolRendererRegistry[part.type] as unknown as ComponentType<
+    ToolRendererProps<T>
+  >;
+
+  return <Renderer isReadonly={isReadonly} messageId={messageId} tool={part} />;
+}
+
+export function ToolPart({ part, messageId, isReadonly }: ToolPartProps) {
+  const type = part.type;
+
+  if (
+    type === "tool-createTextDocument" ||
+    type === "tool-createCodeDocument" ||
+    type === "tool-createSheetDocument" ||
+    type === "tool-editTextDocument" ||
+    type === "tool-editCodeDocument" ||
+    type === "tool-editSheetDocument"
+  ) {
+    return (
+      <DocumentTool isReadonly={isReadonly} messageId={messageId} tool={part} />
+    );
+  }
+
+  if (type === "tool-readDocument") {
+    return <ReadDocument tool={part} />;
+  }
+
+  if (type === "tool-codeExecution") {
+    return <CodeExecution tool={part} />;
+  }
+
+  if (type === "tool-generateImage") {
+    return <GenerateImage tool={part} />;
+  }
+
+  if (type === "tool-generateVideo") {
+    return <GenerateVideo tool={part} />;
+  }
+
+  if (type === "tool-deepResearch") {
+    return <DeepResearch messageId={messageId} part={part} />;
+  }
+
+  if (type === "tool-webSearch") {
+    return <WebSearch messageId={messageId} part={part} />;
+  }
+
+  if (isInstalledToolType(type)) {
+    return renderInstalledTool({
+      part: part as InstalledToolPart<typeof type>,
+      messageId,
+      isReadonly,
+    });
+  }
+
+  return null;
+}

package/templates/chat-app/components/project-chat-item.tsx

@@ -2,9 +2,9 @@
 
 import { formatDistance } from "date-fns";
 import { MoreHorizontal, Pencil, Trash2 } from "lucide-react";
-import Link from "next/link";
 import { useState } from "react";
 import { ChatRenameDialog } from "@/components/chat-rename-dialog";
+import { InternalLink } from "@/components/internal-link";
 import { ShareDialog } from "@/components/share-button";
 import { Button } from "@/components/ui/button";
 import {
@@ -42,7 +42,7 @@ export function ProjectChatItem({
     <>
       <div className="group relative">
         <div className="relative flex items-center gap-3 px-4 py-3 transition-colors hover:bg-muted/50">
-          <Link className="absolute inset-0 z-10" href={chatHref} />
+          <InternalLink className="absolute inset-0 z-10" href={chatHref} />
           <div className="min-w-0 flex-1">
             <div className="truncate font-medium text-sm">{chat.title}</div>
             <div className="text-muted-foreground text-xs">

package/templates/chat-app/components/research-progress.tsx

@@ -1,9 +1,9 @@
 import { Maximize2, Minimize2 } from "lucide-react";
 import React from "react";
 import { UpdateTitle } from "@/components/update-title";
-// Type-only imports
-import type { ResearchUpdate } from "@/lib/ai/tools/research-updates-schema";
 import { cn } from "@/lib/utils";
+// Type-only imports
+import type { ResearchUpdate } from "@/tools/platform/research-updates-schema";
 import { ResearchTask } from "./research-task";
 import { ResearchTasks } from "./research-tasks";
 

package/templates/chat-app/components/research-task.tsx

@@ -2,7 +2,7 @@ import { Loader2, SearchIcon } from "lucide-react";
 import { motion } from "motion/react";
 import { Badge } from "@/components/ui/badge";
 import { UpdateTitle } from "@/components/update-title";
-import type { ResearchUpdate } from "@/lib/ai/tools/research-updates-schema";
+import type { ResearchUpdate } from "@/tools/platform/research-updates-schema";
 import { WebSourceBadge } from "./source-badge";
 
 export const ResearchTask = ({

package/templates/chat-app/components/research-tasks.tsx

@@ -2,8 +2,8 @@ import { CircleCheck, Dot, FileText, Pencil, Sparkles } from "lucide-react";
 import { motion } from "motion/react";
 import type React from "react";
 import type { ReactNode } from "react";
-import type { ResearchUpdate } from "@/lib/ai/tools/research-updates-schema";
 import { cn } from "@/lib/utils";
+import type { ResearchUpdate } from "@/tools/platform/research-updates-schema";
 import { ResearchTask } from "./research-task";
 
 export const ResearchTasks = ({ updates }: { updates: ResearchUpdate[] }) => (

package/templates/chat-app/components/settings/connectors-settings.tsx

@@ -10,10 +10,10 @@ import {
   Radio,
   Trash2,
 } from "lucide-react";
-import Link from "next/link";
 import { useQueryStates } from "nuqs";
 import { Fragment, useCallback, useMemo } from "react";
 import { toast } from "sonner";
+import { InternalLink } from "@/components/internal-link";
 import { ConnectorHeader } from "@/components/settings/connector-header";
 import { McpConnectDialog } from "@/components/settings/mcp-connect-dialog";
 import { McpCreateDialog } from "@/components/settings/mcp-create-dialog";
@@ -335,7 +335,7 @@ function CustomConnectorRow({
             size="sm"
             variant="outline"
           >
-            <Link href={href}>
+            <InternalLink href={href}>
               {isTestingConnection ? (
                 <span className="inline-flex items-center gap-2">
                   <Loader2 className="size-4 animate-spin" />
@@ -346,7 +346,7 @@ function CustomConnectorRow({
                   {actionLabel}
                 </span>
               )}
-            </Link>
+            </InternalLink>
           </Button>
         ) : null}
         <DropdownMenu>
@@ -405,7 +405,7 @@ function BuiltInConnectorRow({ connector }: { connector: McpConnector }) {
         url={connector.url}
       />
       <Button asChild size="sm" variant="outline">
-        <Link href={href}>View</Link>
+        <InternalLink href={href}>View</InternalLink>
       </Button>
     </div>
   );

package/templates/chat-app/components/settings/mcp-details-page.tsx

@@ -10,10 +10,10 @@ import {
   Trash2,
   Wrench,
 } from "lucide-react";
-import Link from "next/link";
 import { useRouter, useSearchParams } from "next/navigation";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { toast } from "sonner";
+import { InternalLink } from "@/components/internal-link";
 import { Button } from "@/components/ui/button";
 import { Label } from "@/components/ui/label";
 import { ScrollArea } from "@/components/ui/scroll-area";
@@ -237,10 +237,10 @@ export function McpDetailsPage({ connectorId }: { connectorId: string }) {
     return (
       <SettingsPageContent className="gap-4">
         <Button asChild className="w-fit" size="sm" variant="ghost">
-          <Link href="/settings/connectors">
+          <InternalLink href="/settings/connectors">
             <ChevronLeft className="size-4" />
             Back
-          </Link>
+          </InternalLink>
         </Button>
         <div className="flex flex-col items-center justify-center py-12 text-center">
           <AlertCircle className="size-6 text-destructive" />
@@ -259,10 +259,10 @@ export function McpDetailsPage({ connectorId }: { connectorId: string }) {
   return (
     <SettingsPageContent className="gap-4">
       <Button asChild className="w-fit" size="sm" variant="ghost">
-        <Link href="/settings/connectors">
+        <InternalLink href="/settings/connectors">
           <ChevronLeft className="size-4" />
           Back
-        </Link>
+        </InternalLink>
       </Button>
 
       <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">

package/templates/chat-app/components/settings/settings-nav.tsx

@@ -1,9 +1,9 @@
 "use client";
 
 import { Cpu, Plug, Settings } from "lucide-react";
-import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { useMemo } from "react";
+import { InternalLink } from "@/components/internal-link";
 import { config } from "@/lib/config";
 import { cn } from "@/lib/utils";
 
@@ -46,7 +46,7 @@ export function SettingsNav({
             : pathname.startsWith(href);
 
         return (
-          <Link
+          <InternalLink
             className={cn(
               "flex items-center gap-2 rounded-md px-3 py-2.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
               isActive && "bg-muted text-foreground"
@@ -56,7 +56,7 @@ export function SettingsNav({
           >
             <Icon className="size-4" />
             {label}
-          </Link>
+          </InternalLink>
         );
       })}
     </nav>

package/templates/chat-app/components/sidebar-chat-item.tsx

@@ -1,10 +1,9 @@
 "use client";
 import { MoreHorizontal } from "lucide-react";
-import Link from "next/link";
-import { useRouter } from "next/navigation";
 import { memo, useState } from "react";
 import { toast } from "sonner";
 import { ChatMenuItems } from "@/components/chat-menu-items";
+import { InternalLink } from "@/components/internal-link";
 import { ShareDialog } from "@/components/share-button";
 import {
   DropdownMenu,
@@ -40,7 +39,6 @@ const PureSidebarChatItem = ({
     chat.projectId
       ? `/project/${chat.projectId}/chat/${chat.id}`
       : `/chat/${chat.id}`;
-  const router = useRouter();
   const [isEditing, setIsEditing] = useState(false);
   const [editTitle, setEditTitle] = useState(chat.title);
   const [shareDialogOpen, setShareDialogOpen] = useState(false);
@@ -87,21 +85,15 @@ const PureSidebarChatItem = ({
         </div>
       ) : (
         <SidebarMenuButton asChild isActive={isActive}>
-          <Link
+          <InternalLink
             href={chatHref}
-            onClick={(e) => {
-              // Allow middle-click and ctrl+click to open in new tab
-              if (e.button === 1 || e.ctrlKey || e.metaKey) {
-                return;
-              }
-              e.preventDefault();
-              router.push(chatHref);
+            onNavigate={() => {
               setOpenMobile(false);
             }}
             prefetch={prefetch}
           >
             <span>{chat.title}</span>
-          </Link>
+          </InternalLink>
         </SidebarMenuButton>
       )}
 

package/templates/chat-app/components/sidebar-project-item.tsx

@@ -1,10 +1,9 @@
 "use client";
 
 import { MoreHorizontal } from "lucide-react";
-import Link from "next/link";
-import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { DeleteProjectDialog } from "@/components/delete-project-dialog";
+import { InternalLink } from "@/components/internal-link";
 import {
   type ProjectDetailsData,
   ProjectDetailsDialog,
@@ -36,7 +35,6 @@ export function SidebarProjectItem({
 }) {
   const [showEditDialog, setShowEditDialog] = useState(false);
   const [showDeleteDialog, setShowDeleteDialog] = useState(false);
-  const router = useRouter();
 
   const { mutateAsync: renameProject, isPending } = useRenameProject();
 
@@ -56,14 +54,9 @@ export function SidebarProjectItem({
   return (
     <SidebarMenuItem>
       <SidebarMenuButton asChild className="cursor-pointer" isActive={isActive}>
-        <Link
+        <InternalLink
           href={projectHref}
-          onClick={(e) => {
-            if (e.button === 1 || e.ctrlKey || e.metaKey) {
-              return;
-            }
-            e.preventDefault();
-            router.push(projectHref);
+          onNavigate={() => {
             setOpenMobile(false);
           }}
           prefetch={false}
@@ -74,7 +67,7 @@ export function SidebarProjectItem({
             size={16}
           />
           <span>{project.name}</span>
-        </Link>
+        </InternalLink>
       </SidebarMenuButton>
 
       <DropdownMenu modal={true}>

package/templates/chat-app/components/sidebar-top-row.tsx

@@ -2,7 +2,7 @@
 
 import { PanelLeft } from "lucide-react";
 import Image from "next/image";
-import Link from "next/link";
+import { InternalLink } from "@/components/internal-link";
 import { SidebarToggle } from "@/components/sidebar-toggle";
 import { useSidebar } from "@/components/ui/sidebar";
 import { config } from "@/lib/config";
@@ -17,10 +17,10 @@ export function SidebarTopRow() {
   return (
     <div className="flex w-full items-center justify-between gap-2">
       {isExpanded ? (
-        <Link
+        <InternalLink
           className="flex flex-row items-center gap-2"
           href="/"
-          onClick={() => {
+          onNavigate={() => {
             setOpenMobile(false);
             refreshChatID();
           }}
@@ -35,22 +35,22 @@ export function SidebarTopRow() {
             />
             {config.appName}
           </span>
-        </Link>
+        </InternalLink>
       ) : (
         <button
           aria-label="Expand sidebar"
-          className="group/logo relative flex size-8 items-center justify-center rounded-md hover:bg-muted"
+          className="relative flex size-8 items-center justify-center rounded-md transition-colors group-hover/sidebar:bg-muted"
           onClick={toggleSidebar}
           type="button"
         >
           <Image
             alt={config.appName}
-            className="h-5 w-5 transition-opacity duration-150 group-hover/logo:opacity-0"
+            className="h-5 w-5 transition-opacity duration-150 group-hover/sidebar:opacity-0"
             height={20}
             src="/icon.svg"
             width={20}
           />
-          <PanelLeft className="absolute size-4 opacity-0 transition-opacity duration-150 group-hover/logo:opacity-100" />
+          <PanelLeft className="absolute size-4 opacity-0 transition-opacity duration-150 group-hover/sidebar:opacity-100" />
         </button>
       )}
 

package/templates/chat-app/components/sidebar-user-nav.tsx

@@ -9,9 +9,9 @@ import {
   Settings,
   Sun,
 } from "lucide-react";
-import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useTheme } from "next-themes";
+import { InternalLink } from "@/components/internal-link";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import {
   DropdownMenu,
@@ -129,10 +129,10 @@ export function SidebarUserNav() {
             <DropdownMenuSeparator />
             <DropdownMenuGroup>
               <DropdownMenuItem asChild>
-                <Link href="/settings">
+                <InternalLink href="/settings">
                   <Settings className="mr-2 size-4" />
                   Settings
-                </Link>
+                </InternalLink>
               </DropdownMenuItem>
               <DropdownMenuItem
                 onClick={() =>