@chat-js/cli 0.6.1 → 0.6.3

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

@@ -10,91 +10,91 @@ import { cn } from "@/lib/utils";
 export type ConversationProps = ComponentProps<typeof StickToBottom>;
 
 export const Conversation = ({ className, ...props }: ConversationProps) => (
-  <StickToBottom
-    className={cn("relative flex-1 overflow-y-hidden", className)}
-    initial="smooth"
-    resize="smooth"
-    role="log"
-    {...props}
-  />
+	<StickToBottom
+		className={cn("relative flex-1 overflow-y-hidden", className)}
+		initial="smooth"
+		resize="smooth"
+		role="log"
+		{...props}
+	/>
 );
 
 export type ConversationContentProps = ComponentProps<
-  typeof StickToBottom.Content
+	typeof StickToBottom.Content
 >;
 
 export const ConversationContent = ({
-  className,
-  ...props
+	className,
+	...props
 }: ConversationContentProps) => (
-  <StickToBottom.Content
-    className={cn("flex flex-col gap-8 p-4", className)}
-    {...props}
-  />
+	<StickToBottom.Content
+		className={cn("flex flex-col gap-8 p-4", className)}
+		{...props}
+	/>
 );
 
 export type ConversationEmptyStateProps = ComponentProps<"div"> & {
-  title?: string;
-  description?: string;
-  icon?: React.ReactNode;
+	title?: string;
+	description?: string;
+	icon?: React.ReactNode;
 };
 
 export const ConversationEmptyState = ({
-  className,
-  title = "No messages yet",
-  description = "Start a conversation to see messages here",
-  icon,
-  children,
-  ...props
+	className,
+	title = "No messages yet",
+	description = "Start a conversation to see messages here",
+	icon,
+	children,
+	...props
 }: ConversationEmptyStateProps) => (
-  <div
-    className={cn(
-      "flex size-full flex-col items-center justify-center gap-3 p-8 text-center",
-      className
-    )}
-    {...props}
-  >
-    {children ?? (
-      <>
-        {icon && <div className="text-muted-foreground">{icon}</div>}
-        <div className="space-y-1">
-          <h3 className="font-medium text-sm">{title}</h3>
-          {description && (
-            <p className="text-muted-foreground text-sm">{description}</p>
-          )}
-        </div>
-      </>
-    )}
-  </div>
+	<div
+		className={cn(
+			"flex size-full flex-col items-center justify-center gap-3 p-8 text-center",
+			className,
+		)}
+		{...props}
+	>
+		{children ?? (
+			<>
+				{icon && <div className="text-muted-foreground">{icon}</div>}
+				<div className="space-y-1">
+					<h3 className="font-medium text-sm">{title}</h3>
+					{description && (
+						<p className="text-muted-foreground text-sm">{description}</p>
+					)}
+				</div>
+			</>
+		)}
+	</div>
 );
 
 export type ConversationScrollButtonProps = ComponentProps<typeof Button>;
 
 export const ConversationScrollButton = ({
-  className,
-  ...props
+	className,
+	...props
 }: ConversationScrollButtonProps) => {
-  const { isAtBottom, scrollToBottom } = useStickToBottomContext();
+	const { isAtBottom, scrollToBottom } = useStickToBottomContext();
 
-  const handleScrollToBottom = useCallback(() => {
-    scrollToBottom();
-  }, [scrollToBottom]);
+	const handleScrollToBottom = useCallback(() => {
+		scrollToBottom();
+	}, [scrollToBottom]);
 
-  return (
-    !isAtBottom && (
-      <Button
-        className={cn(
-          "absolute bottom-4 left-[50%] translate-x-[-50%] rounded-full",
-          className
-        )}
-        onClick={handleScrollToBottom}
-        size="icon"
-        type="button"
-        variant="outline"
-        {...props}
-      >
-        <ArrowDownIcon className="size-4" />
-      </Button>
-    )
-  );
+	return (
+		!isAtBottom && (
+			<Button
+				className={cn(
+					"absolute bottom-4 left-[50%] translate-x-[-50%] rounded-full",
+					className,
+				)}
+				onClick={handleScrollToBottom}
+				size="icon"
+				type="button"
+				variant="outline"
+				{...props}
+			>
+				<ArrowDownIcon className="size-4" />
+			</Button>
+		)
+	);
 };

package/templates/chat-app/components/ai-elements/extra/conversation-content-scroll-area.tsx

@@ -8,8 +8,8 @@
 
 import type { ComponentProps } from "react";
 import {
-  type StickToBottom,
-  useStickToBottomContext,
+	type StickToBottom,
+	useStickToBottomContext,
 } from "use-stick-to-bottom";
 import { ScrollArea } from "@/components/ui/extra/scroll-area-viewport-ref";
 import { cn } from "@/lib/utils";
@@ -17,33 +17,33 @@ import { cn } from "@/lib/utils";
 type ConversationContentProps = ComponentProps<typeof StickToBottom.Content>;
 
 export const ConversationContent = ({
-  className,
-  children,
-  ...props
+	className,
+	children,
+	...props
 }: ConversationContentProps) => {
-  const context = useStickToBottomContext();
+	const context = useStickToBottomContext();
 
-  return (
-    <ScrollArea
-      className={cn(
-        "h-full w-full",
-        // Avoid overscroll with page down
-        "*:data-radix-scroll-area-viewport:contain-strict",
-        // Radix injects an inner wrapper: <Viewport><div style='min-width: 100%; display: table;'></div></Viewport>
-        // Force it to behave like a normal block and allow shrinking to avoid horizontal overflow.
-        "[&_[data-slot=scroll-area-viewport]>div]:block!",
-        "[&_[data-slot=scroll-area-viewport]>div]:min-w-0!",
-        "[&_[data-slot=scroll-area-viewport]>div]:max-w-full"
-      )}
-      viewportRef={context.scrollRef}
-    >
-      <div
-        {...props}
-        className={cn("flex flex-col gap-8 p-4", className)}
-        ref={context.contentRef}
-      >
-        {typeof children === "function" ? children(context) : children}
-      </div>
-    </ScrollArea>
-  );
+	return (
+		<ScrollArea
+			className={cn(
+				"h-full w-full",
+				// Avoid overscroll with page down
+				"*:data-radix-scroll-area-viewport:contain-strict",
+				// Radix injects an inner wrapper: <Viewport><div style='min-width: 100%; display: table;'></div></Viewport>
+				// Force it to behave like a normal block and allow shrinking to avoid horizontal overflow.
+				"[&_[data-slot=scroll-area-viewport]>div]:block!",
+				"[&_[data-slot=scroll-area-viewport]>div]:min-w-0!",
+				"[&_[data-slot=scroll-area-viewport]>div]:max-w-full",
+			)}
+			viewportRef={context.scrollRef}
+		>
+			<div
+				{...props}
+				className={cn("flex flex-col gap-8 p-4", className)}
+				ref={context.contentRef}
+			>
+				{typeof children === "function" ? children(context) : children}
+			</div>
+		</ScrollArea>
+	);
 };

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

@@ -8,35 +8,35 @@ import { cn } from "@/lib/utils";
 import { getStatusBadge } from "../tool";
 
 type McpToolHeaderProps = {
-  title?: string;
-  type: ToolUIPart["type"];
-  state: ToolUIPart["state"];
-  className?: string;
-  icon?: ReactNode;
+	title?: string;
+	type: ToolUIPart["type"];
+	state: ToolUIPart["state"];
+	className?: string;
+	icon?: ReactNode;
 };
 
 export const McpToolHeader = ({
-  className,
-  title,
-  type,
-  state,
-  icon,
-  ...props
+	className,
+	title,
+	type,
+	state,
+	icon,
+	...props
 }: McpToolHeaderProps) => (
-  <CollapsibleTrigger
-    className={cn(
-      "flex w-full items-center justify-between gap-4 p-3",
-      className
-    )}
-    {...props}
-  >
-    <div className="flex items-center gap-2">
-      {icon ?? <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">
+			{icon ?? <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>
 );