@chat-js/cli 0.6.1 → 0.6.3

package/templates/chat-app/components/ai-elements/shimmer.tsx

@@ -2,63 +2,63 @@
 
 import { motion } from "motion/react";
 import {
-  type CSSProperties,
-  type ElementType,
-  type JSX,
-  memo,
-  useMemo,
+	type CSSProperties,
+	type ElementType,
+	type JSX,
+	memo,
+	useMemo,
 } from "react";
 import { cn } from "@/lib/utils";
 
 export type TextShimmerProps = {
-  children: string;
-  as?: ElementType;
-  className?: string;
-  duration?: number;
-  spread?: number;
+	children: string;
+	as?: ElementType;
+	className?: string;
+	duration?: number;
+	spread?: number;
 };
 
 const ShimmerComponent = ({
-  children,
-  as: Component = "p",
-  className,
-  duration = 2,
-  spread = 2,
+	children,
+	as: Component = "p",
+	className,
+	duration = 2,
+	spread = 2,
 }: TextShimmerProps) => {
-  const MotionComponent = motion.create(
-    Component as keyof JSX.IntrinsicElements
-  );
+	const MotionComponent = motion.create(
+		Component as keyof JSX.IntrinsicElements,
+	);
 
-  const dynamicSpread = useMemo(
-    () => (children?.length ?? 0) * spread,
-    [children, spread]
-  );
+	const dynamicSpread = useMemo(
+		() => (children?.length ?? 0) * spread,
+		[children, spread],
+	);
 
-  return (
-    <MotionComponent
-      animate={{ backgroundPosition: "0% center" }}
-      className={cn(
-        "relative inline-block bg-[length:250%_100%,auto] bg-clip-text text-transparent",
-        "[--bg:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--color-background),#0000_calc(50%+var(--spread)))] [background-repeat:no-repeat,padding-box]",
-        className
-      )}
-      initial={{ backgroundPosition: "100% center" }}
-      style={
-        {
-          "--spread": `${dynamicSpread}px`,
-          backgroundImage:
-            "var(--bg), linear-gradient(var(--color-muted-foreground), var(--color-muted-foreground))",
-        } as CSSProperties
-      }
-      transition={{
-        repeat: Number.POSITIVE_INFINITY,
-        duration,
-        ease: "linear",
-      }}
-    >
-      {children}
-    </MotionComponent>
-  );
+	return (
+		<MotionComponent
+			animate={{ backgroundPosition: "0% center" }}
+			className={cn(
+				"relative inline-block bg-[length:250%_100%,auto] bg-clip-text text-transparent",
+				"[--bg:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--color-background),#0000_calc(50%+var(--spread)))] [background-repeat:no-repeat,padding-box]",
+				className,
+			)}
+			initial={{ backgroundPosition: "100% center" }}
+			style={
+				{
+					"--spread": `${dynamicSpread}px`,
+					backgroundImage:
+						"var(--bg), linear-gradient(var(--color-muted-foreground), var(--color-muted-foreground))",
+				} as CSSProperties
+			}
+			transition={{
+				repeat: Number.POSITIVE_INFINITY,
+				duration,
+				ease: "linear",
+			}}
+		>
+			{children}
+		</MotionComponent>
+	);
 };
 
 export const Shimmer = memo(ShimmerComponent);

package/templates/chat-app/components/ai-elements/suggestion.tsx

@@ -8,46 +8,46 @@ import { cn } from "@/lib/utils";
 export type SuggestionsProps = ComponentProps<typeof ScrollArea>;
 
 export const Suggestions = ({
-  className,
-  children,
-  ...props
+	className,
+	children,
+	...props
 }: SuggestionsProps) => (
-  <ScrollArea className="w-full overflow-x-auto whitespace-nowrap" {...props}>
-    <div className={cn("flex w-max flex-nowrap items-center gap-2", className)}>
-      {children}
-    </div>
-    <ScrollBar className="hidden" orientation="horizontal" />
-  </ScrollArea>
+	<ScrollArea className="w-full overflow-x-auto whitespace-nowrap" {...props}>
+		<div className={cn("flex w-max flex-nowrap items-center gap-2", className)}>
+			{children}
+		</div>
+		<ScrollBar className="hidden" orientation="horizontal" />
+	</ScrollArea>
 );
 
 export type SuggestionProps = Omit<ComponentProps<typeof Button>, "onClick"> & {
-  suggestion: string;
-  onClick?: (suggestion: string) => void;
+	suggestion: string;
+	onClick?: (suggestion: string) => void;
 };
 
 export const Suggestion = ({
-  suggestion,
-  onClick,
-  className,
-  variant = "outline",
-  size = "sm",
-  children,
-  ...props
+	suggestion,
+	onClick,
+	className,
+	variant = "outline",
+	size = "sm",
+	children,
+	...props
 }: SuggestionProps) => {
-  const handleClick = () => {
-    onClick?.(suggestion);
-  };
+	const handleClick = () => {
+		onClick?.(suggestion);
+	};
 
-  return (
-    <Button
-      className={cn("cursor-pointer rounded-full px-4", className)}
-      onClick={handleClick}
-      size={size}
-      type="button"
-      variant={variant}
-      {...props}
-    >
-      {children || suggestion}
-    </Button>
-  );
+	return (
+		<Button
+			className={cn("cursor-pointer rounded-full px-4", className)}
+			onClick={handleClick}
+			size={size}
+			type="button"
+			variant={variant}
+			{...props}
+		>
+			{children || suggestion}
+		</Button>
+	);
 };

package/templates/chat-app/components/ai-elements/tool.tsx

@@ -2,20 +2,20 @@
 
 import type { ToolUIPart } from "ai";
 import {
-  CheckCircleIcon,
-  ChevronDownIcon,
-  CircleIcon,
-  ClockIcon,
-  WrenchIcon,
-  XCircleIcon,
+	CheckCircleIcon,
+	ChevronDownIcon,
+	CircleIcon,
+	ClockIcon,
+	WrenchIcon,
+	XCircleIcon,
 } from "lucide-react";
 import type { ComponentProps, ReactNode } from "react";
 import { isValidElement } from "react";
 import { Badge } from "@/components/ui/badge";
 import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
+	Collapsible,
+	CollapsibleContent,
+	CollapsibleTrigger,
 } from "@/components/ui/collapsible";
 import { cn } from "@/lib/utils";
 import { CodeBlock } from "./code-block";
@@ -23,141 +23,141 @@ import { CodeBlock } from "./code-block";
 export type ToolProps = ComponentProps<typeof Collapsible>;
 
 export const Tool = ({ className, ...props }: ToolProps) => (
-  <Collapsible
-    className={cn("not-prose mb-4 w-full rounded-md border", className)}
-    {...props}
-  />
+	<Collapsible
+		className={cn("not-prose mb-4 w-full rounded-md border", className)}
+		{...props}
+	/>
 );
 
 export type ToolHeaderProps = {
-  title?: string;
-  type: ToolUIPart["type"];
-  state: ToolUIPart["state"];
-  className?: string;
+	title?: string;
+	type: ToolUIPart["type"];
+	state: ToolUIPart["state"];
+	className?: string;
 };
 
 export const getStatusBadge = (status: ToolUIPart["state"]) => {
-  const labels: Record<ToolUIPart["state"], string> = {
-    "input-streaming": "Pending",
-    "input-available": "Running",
-    "approval-requested": "Awaiting Approval",
-    "approval-responded": "Responded",
-    "output-available": "Completed",
-    "output-error": "Error",
-    "output-denied": "Denied",
-  };
-
-  const icons: Record<ToolUIPart["state"], ReactNode> = {
-    "input-streaming": <CircleIcon className="size-4" />,
-    "input-available": <ClockIcon className="size-4 animate-pulse" />,
-    "approval-requested": <ClockIcon className="size-4 text-yellow-600" />,
-    "approval-responded": <CheckCircleIcon className="size-4 text-blue-600" />,
-    "output-available": <CheckCircleIcon className="size-4 text-green-600" />,
-    "output-error": <XCircleIcon className="size-4 text-red-600" />,
-    "output-denied": <XCircleIcon className="size-4 text-orange-600" />,
-  };
-
-  return (
-    <Badge className="gap-1.5 rounded-full text-xs" variant="secondary">
-      {icons[status]}
-      {labels[status]}
-    </Badge>
-  );
+	const labels: Record<ToolUIPart["state"], string> = {
+		"input-streaming": "Pending",
+		"input-available": "Running",
+		"approval-requested": "Awaiting Approval",
+		"approval-responded": "Responded",
+		"output-available": "Completed",
+		"output-error": "Error",
+		"output-denied": "Denied",
+	};
+
+	const icons: Record<ToolUIPart["state"], ReactNode> = {
+		"input-streaming": <CircleIcon className="size-4" />,
+		"input-available": <ClockIcon className="size-4 animate-pulse" />,
+		"approval-requested": <ClockIcon className="size-4 text-yellow-600" />,
+		"approval-responded": <CheckCircleIcon className="size-4 text-blue-600" />,
+		"output-available": <CheckCircleIcon className="size-4 text-green-600" />,
+		"output-error": <XCircleIcon className="size-4 text-red-600" />,
+		"output-denied": <XCircleIcon className="size-4 text-orange-600" />,
+	};
+
+	return (
+		<Badge className="gap-1.5 rounded-full text-xs" variant="secondary">
+			{icons[status]}
+			{labels[status]}
+		</Badge>
+	);
 };
 
 export const ToolHeader = ({
-  className,
-  title,
-  type,
-  state,
-  ...props
+	className,
+	title,
+	type,
+	state,
+	...props
 }: ToolHeaderProps) => (
-  <CollapsibleTrigger
-    className={cn(
-      "flex w-full items-center justify-between gap-4 p-3",
-      className
-    )}
-    {...props}
-  >
-    <div className="flex items-center gap-2">
-      <WrenchIcon className="size-4 text-muted-foreground" />
-      <span className="font-medium text-sm">
-        {title ?? type.split("-").slice(1).join("-")}
-      </span>
-      {getStatusBadge(state)}
-    </div>
-    <ChevronDownIcon className="size-4 text-muted-foreground transition-transform group-data-[state=open]:rotate-180" />
-  </CollapsibleTrigger>
+	<CollapsibleTrigger
+		className={cn(
+			"flex w-full items-center justify-between gap-4 p-3",
+			className,
+		)}
+		{...props}
+	>
+		<div className="flex items-center gap-2">
+			<WrenchIcon className="size-4 text-muted-foreground" />
+			<span className="font-medium text-sm">
+				{title ?? type.split("-").slice(1).join("-")}
+			</span>
+			{getStatusBadge(state)}
+		</div>
+		<ChevronDownIcon className="size-4 text-muted-foreground transition-transform group-data-[state=open]:rotate-180" />
+	</CollapsibleTrigger>
 );
 
 export type ToolContentProps = ComponentProps<typeof CollapsibleContent>;
 
 export const ToolContent = ({ className, ...props }: ToolContentProps) => (
-  <CollapsibleContent
-    className={cn(
-      "data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-popover-foreground outline-none data-[state=closed]:animate-out data-[state=open]:animate-in",
-      className
-    )}
-    {...props}
-  />
+	<CollapsibleContent
+		className={cn(
+			"data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-popover-foreground outline-none data-[state=closed]:animate-out data-[state=open]:animate-in",
+			className,
+		)}
+		{...props}
+	/>
 );
 
 export type ToolInputProps = ComponentProps<"div"> & {
-  input: ToolUIPart["input"];
+	input: ToolUIPart["input"];
 };
 
 export const ToolInput = ({ className, input, ...props }: ToolInputProps) => (
-  <div className={cn("space-y-2 overflow-hidden p-4", className)} {...props}>
-    <h4 className="font-medium text-muted-foreground text-xs uppercase tracking-wide">
-      Parameters
-    </h4>
-    <div className="rounded-md bg-muted/50">
-      <CodeBlock code={JSON.stringify(input, null, 2)} language="json" />
-    </div>
-  </div>
+	<div className={cn("space-y-2 overflow-hidden p-4", className)} {...props}>
+		<h4 className="font-medium text-muted-foreground text-xs uppercase tracking-wide">
+			Parameters
+		</h4>
+		<div className="rounded-md bg-muted/50">
+			<CodeBlock code={JSON.stringify(input, null, 2)} language="json" />
+		</div>
+	</div>
 );
 
 export type ToolOutputProps = ComponentProps<"div"> & {
-  output: ToolUIPart["output"];
-  errorText: ToolUIPart["errorText"];
+	output: ToolUIPart["output"];
+	errorText: ToolUIPart["errorText"];
 };
 
 export const ToolOutput = ({
-  className,
-  output,
-  errorText,
-  ...props
+	className,
+	output,
+	errorText,
+	...props
 }: ToolOutputProps) => {
-  if (!(output || errorText)) {
-    return null;
-  }
-
-  let Output = <div>{output as ReactNode}</div>;
-
-  if (typeof output === "object" && !isValidElement(output)) {
-    Output = (
-      <CodeBlock code={JSON.stringify(output, null, 2)} language="json" />
-    );
-  } else if (typeof output === "string") {
-    Output = <CodeBlock code={output} language="json" />;
-  }
-
-  return (
-    <div className={cn("space-y-2 p-4", className)} {...props}>
-      <h4 className="font-medium text-muted-foreground text-xs uppercase tracking-wide">
-        {errorText ? "Error" : "Result"}
-      </h4>
-      <div
-        className={cn(
-          "overflow-x-auto rounded-md text-xs [&_table]:w-full",
-          errorText
-            ? "bg-destructive/10 text-destructive"
-            : "bg-muted/50 text-foreground"
-        )}
-      >
-        {errorText && <div>{errorText}</div>}
-        {Output}
-      </div>
-    </div>
-  );
+	if (!(output || errorText)) {
+		return null;
+	}
+
+	let Output = <div>{output as ReactNode}</div>;
+
+	if (typeof output === "object" && !isValidElement(output)) {
+		Output = (
+			<CodeBlock code={JSON.stringify(output, null, 2)} language="json" />
+		);
+	} else if (typeof output === "string") {
+		Output = <CodeBlock code={output} language="json" />;
+	}
+
+	return (
+		<div className={cn("space-y-2 p-4", className)} {...props}>
+			<h4 className="font-medium text-muted-foreground text-xs uppercase tracking-wide">
+				{errorText ? "Error" : "Result"}
+			</h4>
+			<div
+				className={cn(
+					"overflow-x-auto rounded-md text-xs [&_table]:w-full",
+					errorText
+						? "bg-destructive/10 text-destructive"
+						: "bg-muted/50 text-foreground",
+				)}
+			>
+				{errorText && <div>{errorText}</div>}
+				{Output}
+			</div>
+		</div>
+	);
 };

package/templates/chat-app/components/app-sidebar-history-conditional.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { LogIn } from "lucide-react";
-import Link from "next/link";
+import { InternalLink } from "@/components/internal-link";
 import { SidebarHistory } from "@/components/sidebar-history";
 import { Button } from "@/components/ui/button";
 import {
@@ -39,10 +39,10 @@ export function AppSidebarHistoryConditional() {
             </EmptyHeader>
             <EmptyContent>
               <Button asChild size="sm" variant="outline">
-                <Link href="/login">
+                <InternalLink href="/login">
                   <LogIn />
                   Sign In
-                </Link>
+                </InternalLink>
               </Button>
             </EmptyContent>
           </Empty>

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

@@ -1,5 +1,5 @@
 import { Cpu } from "lucide-react";
-import Link from "next/link";
+import { InternalLink } from "@/components/internal-link";
 import { NewChatButton } from "@/components/new-chat-button";
 import { SearchChatsButton } from "@/components/search-chats";
 import { SidebarTopRow } from "@/components/sidebar-top-row";
@@ -36,12 +36,12 @@ export function AppSidebar() {
           </SidebarMenuItem>
           <SidebarMenuItem>
             <SidebarMenuButton asChild tooltip="Models">
-              <Link href="/settings/models">
+              <InternalLink href="/settings/models">
                 <Cpu className="size-4" />
                 <span className="group-data-[collapsible=icon]:hidden">
                   Models
                 </span>
-              </Link>
+              </InternalLink>
             </SidebarMenuButton>
           </SidebarMenuItem>
         </SidebarMenu>

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

@@ -2,9 +2,9 @@
 
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { Globe, Plug, Settings } from "lucide-react";
-import Link from "next/link";
 import { memo } from "react";
 import { toast } from "sonner";
+import { InternalLink } from "@/components/internal-link";
 import { config } from "@/lib/config";
 import { useSession } from "@/providers/session-provider";
 import { useTRPC } from "@/trpc/react";
@@ -122,10 +122,13 @@ function PureConnectorsDropdown() {
         })}
         <DropdownMenuSeparator />
         <DropdownMenuItem asChild>
-          <Link className="flex items-center gap-2" href="/settings/connectors">
+          <InternalLink
+            className="flex items-center gap-2"
+            href="/settings/connectors"
+          >
             <Settings className="size-4" />
             <span>Manage Connectors</span>
-          </Link>
+          </InternalLink>
         </DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>

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

@@ -1,5 +1,5 @@
 import { useMemo } from "react";
-import type { ResearchUpdate } from "@/lib/ai/tools/research-updates-schema";
+import type { ResearchUpdate } from "@/tools/platform/research-updates-schema";
 import { ResearchProgress } from "./research-progress";
 
 interface ReasonSearchResearchProgressProps {

package/templates/chat-app/components/header-breadcrumb.tsx

@@ -4,6 +4,7 @@ import { type KeyboardEvent, memo, useEffect, useState } from "react";
 import { toast } from "sonner";
 import { ChatMenuItems } from "@/components/chat-menu-items";
 import { DeleteChatDialog } from "@/components/delete-chat-dialog";
+import { InternalLink } from "@/components/internal-link";
 import { ProjectIcon } from "@/components/project-icon";
 import {
   Breadcrumb,
@@ -349,17 +350,19 @@ function ProjectBreadcrumb({
   return (
     <>
       <BreadcrumbItem>
-        <BreadcrumbLink
-          aria-label={projectLabel}
-          className="flex items-center"
-          href={`/project/${projectId}`}
-          title={projectLabel}
-        >
-          {projectIcon && projectColor ? (
-            <ProjectIcon color={projectColor} icon={projectIcon} size={16} />
-          ) : (
-            projectLabel
-          )}
+        <BreadcrumbLink asChild>
+          <InternalLink
+            aria-label={projectLabel}
+            className="flex items-center"
+            href={`/project/${projectId}`}
+            title={projectLabel}
+          >
+            {projectIcon && projectColor ? (
+              <ProjectIcon color={projectColor} icon={projectIcon} size={16} />
+            ) : (
+              projectLabel
+            )}
+          </InternalLink>
         </BreadcrumbLink>
       </BreadcrumbItem>
       <BreadcrumbSeparator />

package/templates/chat-app/components/internal-link.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import type { Route } from "next";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import type * as React from "react";
+import { isElectronRenderer } from "@/lib/electron-auth";
+
+type InternalLinkProps = Omit<React.ComponentProps<typeof Link>, "href"> & {
+  href: React.ComponentProps<typeof Link>["href"] | string;
+  onNavigate?: () => void;
+};
+
+export function InternalLink({
+  onAuxClick,
+  onClick,
+  onNavigate,
+  href,
+  ...props
+}: InternalLinkProps) {
+  const router = useRouter();
+  const isElectron = isElectronRenderer();
+
+  const navigate = (event: React.MouseEvent<HTMLAnchorElement>) => {
+    onNavigate?.();
+    const targetHref = event.currentTarget.getAttribute("href");
+    if (targetHref) {
+      router.push(targetHref as Route);
+    }
+  };
+
+  const handleClick: React.MouseEventHandler<HTMLAnchorElement> = (event) => {
+    onClick?.(event);
+
+    if (event.defaultPrevented || event.button !== 0) {
+      return;
+    }
+
+    if (isElectron && (event.metaKey || event.ctrlKey || event.shiftKey)) {
+      event.preventDefault();
+      navigate(event);
+      return;
+    }
+
+    if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) {
+      return;
+    }
+
+    onNavigate?.();
+  };
+
+  const handleAuxClick: React.MouseEventHandler<HTMLAnchorElement> = (
+    event
+  ) => {
+    onAuxClick?.(event);
+
+    if (event.defaultPrevented || event.button !== 1 || !isElectron) {
+      return;
+    }
+
+    event.preventDefault();
+    navigate(event);
+  };
+
+  return (
+    <Link
+      {...props}
+      href={href as Route}
+      onAuxClick={handleAuxClick}
+      onClick={handleClick}
+    />
+  );
+}