@chat-js/cli 0.6.1 → 0.6.3

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

@@ -5,172 +5,172 @@ import { BrainIcon, ChevronDownIcon } from "lucide-react";
 import type { ComponentProps } from "react";
 import { createContext, memo, useContext, useEffect, useState } from "react";
 import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
+	Collapsible,
+	CollapsibleContent,
+	CollapsibleTrigger,
 } from "@/components/ui/collapsible";
 import { cn } from "@/lib/utils";
 import { Response } from "./response";
 import { Shimmer } from "./shimmer";
 
 type ReasoningContextValue = {
-  isStreaming: boolean;
-  isOpen: boolean;
-  setIsOpen: (open: boolean) => void;
-  duration: number;
+	isStreaming: boolean;
+	isOpen: boolean;
+	setIsOpen: (open: boolean) => void;
+	duration: number;
 };
 
 const ReasoningContext = createContext<ReasoningContextValue | null>(null);
 
 const useReasoning = () => {
-  const context = useContext(ReasoningContext);
-  if (!context) {
-    throw new Error("Reasoning components must be used within Reasoning");
-  }
-  return context;
+	const context = useContext(ReasoningContext);
+	if (!context) {
+		throw new Error("Reasoning components must be used within Reasoning");
+	}
+	return context;
 };
 
 export type ReasoningProps = ComponentProps<typeof Collapsible> & {
-  isStreaming?: boolean;
-  open?: boolean;
-  defaultOpen?: boolean;
-  onOpenChange?: (open: boolean) => void;
-  duration?: number;
+	isStreaming?: boolean;
+	open?: boolean;
+	defaultOpen?: boolean;
+	onOpenChange?: (open: boolean) => void;
+	duration?: number;
 };
 
 const AUTO_CLOSE_DELAY = 1000;
 const MS_IN_S = 1000;
 
 export const Reasoning = memo(
-  ({
-    className,
-    isStreaming = false,
-    open,
-    defaultOpen = true,
-    onOpenChange,
-    duration: durationProp,
-    children,
-    ...props
-  }: ReasoningProps) => {
-    const [isOpen, setIsOpen] = useControllableState({
-      prop: open,
-      defaultProp: defaultOpen,
-      onChange: onOpenChange,
-    });
-    const [duration, setDuration] = useControllableState({
-      prop: durationProp,
-      defaultProp: 0,
-    });
-
-    const [hasAutoClosed, setHasAutoClosed] = useState(false);
-    const [startTime, setStartTime] = useState<number | null>(null);
-
-    // Track duration when streaming starts and ends
-    useEffect(() => {
-      if (isStreaming) {
-        if (startTime === null) {
-          setStartTime(Date.now());
-        }
-      } else if (startTime !== null) {
-        setDuration(Math.ceil((Date.now() - startTime) / MS_IN_S));
-        setStartTime(null);
-      }
-    }, [isStreaming, startTime, setDuration]);
-
-    // Auto-open when streaming starts, auto-close when streaming ends (once only)
-    useEffect(() => {
-      if (defaultOpen && !isStreaming && isOpen && !hasAutoClosed) {
-        // Add a small delay before closing to allow user to see the content
-        const timer = setTimeout(() => {
-          setIsOpen(false);
-          setHasAutoClosed(true);
-        }, AUTO_CLOSE_DELAY);
-
-        return () => clearTimeout(timer);
-      }
-    }, [isStreaming, isOpen, defaultOpen, setIsOpen, hasAutoClosed]);
-
-    const handleOpenChange = (newOpen: boolean) => {
-      setIsOpen(newOpen);
-    };
-
-    return (
-      <ReasoningContext.Provider
-        value={{ isStreaming, isOpen, setIsOpen, duration }}
-      >
-        <Collapsible
-          className={cn("not-prose mb-4", className)}
-          onOpenChange={handleOpenChange}
-          open={isOpen}
-          {...props}
-        >
-          {children}
-        </Collapsible>
-      </ReasoningContext.Provider>
-    );
-  }
+	({
+		className,
+		isStreaming = false,
+		open,
+		defaultOpen = true,
+		onOpenChange,
+		duration: durationProp,
+		children,
+		...props
+	}: ReasoningProps) => {
+		const [isOpen, setIsOpen] = useControllableState({
+			prop: open,
+			defaultProp: defaultOpen,
+			onChange: onOpenChange,
+		});
+		const [duration, setDuration] = useControllableState({
+			prop: durationProp,
+			defaultProp: 0,
+		});
+
+		const [hasAutoClosed, setHasAutoClosed] = useState(false);
+		const [startTime, setStartTime] = useState<number | null>(null);
+
+		// Track duration when streaming starts and ends
+		useEffect(() => {
+			if (isStreaming) {
+				if (startTime === null) {
+					setStartTime(Date.now());
+				}
+			} else if (startTime !== null) {
+				setDuration(Math.ceil((Date.now() - startTime) / MS_IN_S));
+				setStartTime(null);
+			}
+		}, [isStreaming, startTime, setDuration]);
+
+		// Auto-open when streaming starts, auto-close when streaming ends (once only)
+		useEffect(() => {
+			if (defaultOpen && !isStreaming && isOpen && !hasAutoClosed) {
+				// Add a small delay before closing to allow user to see the content
+				const timer = setTimeout(() => {
+					setIsOpen(false);
+					setHasAutoClosed(true);
+				}, AUTO_CLOSE_DELAY);
+
+				return () => clearTimeout(timer);
+			}
+		}, [isStreaming, isOpen, defaultOpen, setIsOpen, hasAutoClosed]);
+
+		const handleOpenChange = (newOpen: boolean) => {
+			setIsOpen(newOpen);
+		};
+
+		return (
+			<ReasoningContext.Provider
+				value={{ isStreaming, isOpen, setIsOpen, duration }}
+			>
+				<Collapsible
+					className={cn("not-prose mb-4", className)}
+					onOpenChange={handleOpenChange}
+					open={isOpen}
+					{...props}
+				>
+					{children}
+				</Collapsible>
+			</ReasoningContext.Provider>
+		);
+	},
 );
 
 export type ReasoningTriggerProps = ComponentProps<typeof CollapsibleTrigger>;
 
 const getThinkingMessage = (isStreaming: boolean, duration?: number) => {
-  if (isStreaming) {
-    return <Shimmer duration={1}>Thinking...</Shimmer>;
-  }
-  if (duration === undefined || duration === 0) {
-    return <p>Thought for a few seconds</p>;
-  }
-  return <p>Thought for {duration} seconds</p>;
+	if (isStreaming) {
+		return <Shimmer duration={1}>Thinking...</Shimmer>;
+	}
+	if (duration === undefined || duration === 0) {
+		return <p>Thought for a few seconds</p>;
+	}
+	return <p>Thought for {duration} seconds</p>;
 };
 
 export const ReasoningTrigger = memo(
-  ({ className, children, ...props }: ReasoningTriggerProps) => {
-    const { isStreaming, isOpen, duration } = useReasoning();
-
-    return (
-      <CollapsibleTrigger
-        className={cn(
-          "flex w-full items-center gap-2 text-muted-foreground text-sm transition-colors hover:text-foreground",
-          className
-        )}
-        {...props}
-      >
-        {children ?? (
-          <>
-            <BrainIcon className="size-4" />
-            {getThinkingMessage(isStreaming, duration)}
-            <ChevronDownIcon
-              className={cn(
-                "size-4 transition-transform",
-                isOpen ? "rotate-180" : "rotate-0"
-              )}
-            />
-          </>
-        )}
-      </CollapsibleTrigger>
-    );
-  }
+	({ className, children, ...props }: ReasoningTriggerProps) => {
+		const { isStreaming, isOpen, duration } = useReasoning();
+
+		return (
+			<CollapsibleTrigger
+				className={cn(
+					"flex w-full items-center gap-2 text-muted-foreground text-sm transition-colors hover:text-foreground",
+					className,
+				)}
+				{...props}
+			>
+				{children ?? (
+					<>
+						<BrainIcon className="size-4" />
+						{getThinkingMessage(isStreaming, duration)}
+						<ChevronDownIcon
+							className={cn(
+								"size-4 transition-transform",
+								isOpen ? "rotate-180" : "rotate-0",
+							)}
+						/>
+					</>
+				)}
+			</CollapsibleTrigger>
+		);
+	},
 );
 
 export type ReasoningContentProps = ComponentProps<
-  typeof CollapsibleContent
+	typeof CollapsibleContent
 > & {
-  children: string;
+	children: string;
 };
 
 export const ReasoningContent = memo(
-  ({ className, children, ...props }: ReasoningContentProps) => (
-    <CollapsibleContent
-      className={cn(
-        "mt-4 text-sm",
-        "data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-muted-foreground outline-none data-[state=closed]:animate-out data-[state=open]:animate-in",
-        className
-      )}
-      {...props}
-    >
-      <Response className="grid gap-2">{children}</Response>
-    </CollapsibleContent>
-  )
+	({ className, children, ...props }: ReasoningContentProps) => (
+		<CollapsibleContent
+			className={cn(
+				"mt-4 text-sm",
+				"data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-muted-foreground outline-none data-[state=closed]:animate-out data-[state=open]:animate-in",
+				className,
+			)}
+			{...props}
+		>
+			<Response className="grid gap-2">{children}</Response>
+		</CollapsibleContent>
+	),
 );
 
 Reasoning.displayName = "Reasoning";

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

@@ -1,11 +1,11 @@
 "use client";
 
-import { cn } from "@/lib/utils";
 import { code } from "@streamdown/code";
 import { math } from "@streamdown/math";
 import { mermaid } from "@streamdown/mermaid";
 import { type ComponentProps, memo } from "react";
 import { Streamdown } from "streamdown";
+import { cn } from "@/lib/utils";
 import "streamdown/styles.css";
 
 const plugins = { code, mermaid, math };
@@ -13,17 +13,20 @@ const plugins = { code, mermaid, math };
 type ResponseProps = ComponentProps<typeof Streamdown>;
 
 export const Response = memo(
-  ({ className, ...props }: ResponseProps) => (
-    <Streamdown
-      className={cn(
-        "size-full [&>*:first-child]:mt-0 [&>*:last-child]:mb-0",
-        className
-      )}
-      plugins={plugins}
-      {...props}
-    />
-  ),
-  (prevProps, nextProps) => prevProps.children === nextProps.children && prevProps.isAnimating === nextProps.isAnimating && prevProps.mode === nextProps.mode
+	({ className, ...props }: ResponseProps) => (
+		<Streamdown
+			className={cn(
+				"size-full [&>*:first-child]:mt-0 [&>*:last-child]:mb-0",
+				className,
+			)}
+			plugins={plugins}
+			{...props}
+		/>
+	),
+	(prevProps, nextProps) =>
+		prevProps.children === nextProps.children &&
+		prevProps.isAnimating === nextProps.isAnimating &&
+		prevProps.mode === nextProps.mode,
 );
 
 Response.displayName = "Response";

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

@@ -4,9 +4,9 @@ import type { ToolUIPart } from "ai";
 import { ChevronDownIcon, Code } from "lucide-react";
 import type { ComponentProps } from "react";
 import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
+	Collapsible,
+	CollapsibleContent,
+	CollapsibleTrigger,
 } from "@/components/ui/collapsible";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { cn } from "@/lib/utils";
@@ -16,138 +16,138 @@ import { getStatusBadge } from "./tool";
 export type SandboxRootProps = ComponentProps<typeof Collapsible>;
 
 export const Sandbox = ({ className, ...props }: SandboxRootProps) => (
-  <Collapsible
-    className={cn("not-prose group mb-4 w-full rounded-md border", className)}
-    defaultOpen
-    {...props}
-  />
+	<Collapsible
+		className={cn("not-prose group mb-4 w-full rounded-md border", className)}
+		defaultOpen
+		{...props}
+	/>
 );
 
 export type SandboxHeaderProps = {
-  title?: string;
-  state: ToolUIPart["state"];
-  className?: string;
+	title?: string;
+	state: ToolUIPart["state"];
+	className?: string;
 };
 
 export const SandboxHeader = ({
-  className,
-  title,
-  state,
-  ...props
+	className,
+	title,
+	state,
+	...props
 }: SandboxHeaderProps) => (
-  <CollapsibleTrigger
-    className={cn(
-      "flex w-full items-center justify-between gap-4 p-3",
-      className
-    )}
-    {...props}
-  >
-    <div className="flex items-center gap-2">
-      <Code className="size-4 text-muted-foreground" />
-      <span className="font-medium text-sm">{title}</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">
+			<Code className="size-4 text-muted-foreground" />
+			<span className="font-medium text-sm">{title}</span>
+			{getStatusBadge(state)}
+		</div>
+		<ChevronDownIcon className="size-4 text-muted-foreground transition-transform group-data-[state=open]:rotate-180" />
+	</CollapsibleTrigger>
 );
 
 export type SandboxContentProps = ComponentProps<typeof CollapsibleContent>;
 
 export const SandboxContent = ({
-  className,
-  ...props
+	className,
+	...props
 }: SandboxContentProps) => (
-  <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 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 outline-none data-[state=closed]:animate-out data-[state=open]:animate-in",
+			className,
+		)}
+		{...props}
+	/>
 );
 
 export type SandboxTabsProps = ComponentProps<typeof Tabs>;
 
 export const SandboxTabs = ({ className, ...props }: SandboxTabsProps) => (
-  <Tabs className={cn("w-full", className)} {...props} />
+	<Tabs className={cn("w-full", className)} {...props} />
 );
 
 export type SandboxTabsBarProps = ComponentProps<"div">;
 
 export const SandboxTabsBar = ({
-  className,
-  ...props
+	className,
+	...props
 }: SandboxTabsBarProps) => (
-  <div
-    className={cn(
-      "flex w-full items-center border-border border-t border-b",
-      className
-    )}
-    {...props}
-  />
+	<div
+		className={cn(
+			"flex w-full items-center border-border border-t border-b",
+			className,
+		)}
+		{...props}
+	/>
 );
 
 export type SandboxTabsListProps = ComponentProps<typeof TabsList>;
 
 export const SandboxTabsList = ({
-  className,
-  ...props
+	className,
+	...props
 }: SandboxTabsListProps) => (
-  <TabsList
-    className={cn("h-auto rounded-none border-0 bg-transparent p-0", className)}
-    {...props}
-  />
+	<TabsList
+		className={cn("h-auto rounded-none border-0 bg-transparent p-0", className)}
+		{...props}
+	/>
 );
 
 export type SandboxTabsTriggerProps = ComponentProps<typeof TabsTrigger>;
 
 export const SandboxTabsTrigger = ({
-  className,
-  ...props
+	className,
+	...props
 }: SandboxTabsTriggerProps) => (
-  <TabsTrigger
-    className={cn(
-      "rounded-none border-0 border-transparent border-b-2 px-4 py-2 font-medium text-muted-foreground text-sm transition-colors data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:text-foreground data-[state=active]:shadow-none",
-      className
-    )}
-    {...props}
-  />
+	<TabsTrigger
+		className={cn(
+			"rounded-none border-0 border-transparent border-b-2 px-4 py-2 font-medium text-muted-foreground text-sm transition-colors data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:text-foreground data-[state=active]:shadow-none",
+			className,
+		)}
+		{...props}
+	/>
 );
 
 export type SandboxTabContentProps = ComponentProps<typeof TabsContent>;
 
 export const SandboxTabContent = ({
-  className,
-  ...props
+	className,
+	...props
 }: SandboxTabContentProps) => (
-  <TabsContent className={cn("mt-0 text-sm", className)} {...props} />
+	<TabsContent className={cn("mt-0 text-sm", className)} {...props} />
 );
 
 export type SandboxCodeProps = ComponentProps<typeof CodeBlock>;
 
 export const SandboxCode = ({ className, ...props }: SandboxCodeProps) => (
-  <CodeBlock className={cn("min-h-10 border-0", className)} {...props}>
-    <CodeBlockCopyButton
-      className="opacity-0 transition-opacity duration-200 group-hover:opacity-100"
-      size="sm"
-    />
-  </CodeBlock>
+	<CodeBlock className={cn("min-h-10 border-0", className)} {...props}>
+		<CodeBlockCopyButton
+			className="opacity-0 transition-opacity duration-200 group-hover:opacity-100"
+			size="sm"
+		/>
+	</CodeBlock>
 );
 
 export type SandboxOutputProps = Omit<
-  ComponentProps<typeof CodeBlock>,
-  "language"
+	ComponentProps<typeof CodeBlock>,
+	"language"
 >;
 
 export const SandboxOutput = ({ className, ...props }: SandboxOutputProps) => (
-  <CodeBlock
-    className={cn("min-h-10 border-0", className)}
-    language="log"
-    {...props}
-  >
-    <CodeBlockCopyButton
-      className="opacity-0 transition-opacity duration-200 group-hover:opacity-100"
-      size="sm"
-    />
-  </CodeBlock>
+	<CodeBlock
+		className={cn("min-h-10 border-0", className)}
+		language="log"
+		{...props}
+	>
+		<CodeBlockCopyButton
+			className="opacity-0 transition-opacity duration-200 group-hover:opacity-100"
+			size="sm"
+		/>
+	</CodeBlock>
 );