@chat-js/cli 0.6.1 → 0.6.3

package/templates/chat-app/components/ui/empty.tsx

@@ -3,102 +3,102 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 function Empty({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      className={cn(
-        "flex min-w-0 flex-1 flex-col items-center justify-center gap-6 text-balance rounded-lg border-dashed p-6 text-center md:p-12",
-        className
-      )}
-      data-slot="empty"
-      {...props}
-    />
-  );
+	return (
+		<div
+			className={cn(
+				"flex min-w-0 flex-1 flex-col items-center justify-center gap-6 text-balance rounded-lg border-dashed p-6 text-center md:p-12",
+				className,
+			)}
+			data-slot="empty"
+			{...props}
+		/>
+	);
 }
 
 function EmptyHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      className={cn(
-        "flex max-w-sm flex-col items-center gap-2 text-center",
-        className
-      )}
-      data-slot="empty-header"
-      {...props}
-    />
-  );
+	return (
+		<div
+			className={cn(
+				"flex max-w-sm flex-col items-center gap-2 text-center",
+				className,
+			)}
+			data-slot="empty-header"
+			{...props}
+		/>
+	);
 }
 
 const emptyMediaVariants = cva(
-  "mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
-  {
-    variants: {
-      variant: {
-        default: "bg-transparent",
-        icon: "flex size-10 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-6",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
+	"mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
+	{
+		variants: {
+			variant: {
+				default: "bg-transparent",
+				icon: "flex size-10 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-6",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	},
 );
 
 function EmptyMedia({
-  className,
-  variant = "default",
-  ...props
+	className,
+	variant = "default",
+	...props
 }: React.ComponentProps<"div"> & VariantProps<typeof emptyMediaVariants>) {
-  return (
-    <div
-      className={cn(emptyMediaVariants({ variant, className }))}
-      data-slot="empty-icon"
-      data-variant={variant}
-      {...props}
-    />
-  );
+	return (
+		<div
+			className={cn(emptyMediaVariants({ variant, className }))}
+			data-slot="empty-icon"
+			data-variant={variant}
+			{...props}
+		/>
+	);
 }
 
 function EmptyTitle({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      className={cn("font-medium text-lg tracking-tight", className)}
-      data-slot="empty-title"
-      {...props}
-    />
-  );
+	return (
+		<div
+			className={cn("font-medium text-lg tracking-tight", className)}
+			data-slot="empty-title"
+			{...props}
+		/>
+	);
 }
 
 function EmptyDescription({ className, ...props }: React.ComponentProps<"p">) {
-  return (
-    <div
-      className={cn(
-        "text-muted-foreground text-sm/relaxed [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
-        className
-      )}
-      data-slot="empty-description"
-      {...props}
-    />
-  );
+	return (
+		<div
+			className={cn(
+				"text-muted-foreground text-sm/relaxed [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
+				className,
+			)}
+			data-slot="empty-description"
+			{...props}
+		/>
+	);
 }
 
 function EmptyContent({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      className={cn(
-        "flex w-full min-w-0 max-w-sm flex-col items-center gap-4 text-balance text-sm",
-        className
-      )}
-      data-slot="empty-content"
-      {...props}
-    />
-  );
+	return (
+		<div
+			className={cn(
+				"flex w-full min-w-0 max-w-sm flex-col items-center gap-4 text-balance text-sm",
+				className,
+			)}
+			data-slot="empty-content"
+			{...props}
+		/>
+	);
 }
 
 export {
-  Empty,
-  EmptyHeader,
-  EmptyTitle,
-  EmptyDescription,
-  EmptyContent,
-  EmptyMedia,
+	Empty,
+	EmptyContent,
+	EmptyDescription,
+	EmptyHeader,
+	EmptyMedia,
+	EmptyTitle,
 };

package/templates/chat-app/components/ui/extra/action-container.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import Link from "next/link";
 import type * as React from "react";
+import { InternalLink } from "@/components/internal-link";
 
 import { cn } from "@/lib/utils";
 
@@ -19,7 +19,7 @@ function ActionContainer({ className, ...props }: ActionContainerProps) {
   );
 }
 
-type ActionContainerLinkProps = React.ComponentProps<typeof Link>;
+type ActionContainerLinkProps = React.ComponentProps<typeof InternalLink>;
 
 function ActionContainerLink({
   className,
@@ -27,7 +27,7 @@ function ActionContainerLink({
   ...props
 }: ActionContainerLinkProps) {
   return (
-    <Link
+    <InternalLink
       className={cn("absolute inset-0 z-10", className)}
       tabIndex={tabIndex ?? -1}
       {...props}

package/templates/chat-app/components/ui/extra/scroll-area-viewport-ref.tsx

@@ -12,30 +12,30 @@ import { cn } from "@/lib/utils";
 import { ScrollBar } from "../scroll-area";
 
 export function ScrollArea({
-  className,
-  children,
-  viewportRef,
-  ...props
+	className,
+	children,
+	viewportRef,
+	...props
 }: React.ComponentProps<typeof ScrollAreaPrimitive.Root> & {
-  viewportRef?: React.Ref<
-    React.ComponentRef<typeof ScrollAreaPrimitive.Viewport>
-  >;
+	viewportRef?: React.Ref<
+		React.ComponentRef<typeof ScrollAreaPrimitive.Viewport>
+	>;
 }) {
-  return (
-    <ScrollAreaPrimitive.Root
-      className={cn("relative", className)}
-      data-slot="scroll-area"
-      {...props}
-    >
-      <ScrollAreaPrimitive.Viewport
-        className="size-full rounded-[inherit] outline-none transition-[color,box-shadow] focus-visible:outline-1 focus-visible:ring-[3px] focus-visible:ring-ring/50"
-        data-slot="scroll-area-viewport"
-        ref={viewportRef}
-      >
-        {children}
-      </ScrollAreaPrimitive.Viewport>
-      <ScrollBar />
-      <ScrollAreaPrimitive.Corner />
-    </ScrollAreaPrimitive.Root>
-  );
+	return (
+		<ScrollAreaPrimitive.Root
+			className={cn("relative", className)}
+			data-slot="scroll-area"
+			{...props}
+		>
+			<ScrollAreaPrimitive.Viewport
+				className="size-full rounded-[inherit] outline-none transition-[color,box-shadow] focus-visible:outline-1 focus-visible:ring-[3px] focus-visible:ring-ring/50"
+				data-slot="scroll-area-viewport"
+				ref={viewportRef}
+			>
+				{children}
+			</ScrollAreaPrimitive.Viewport>
+			<ScrollBar />
+			<ScrollAreaPrimitive.Corner />
+		</ScrollAreaPrimitive.Root>
+	);
 }

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

@@ -4,13 +4,13 @@ import type * as LabelPrimitive from "@radix-ui/react-label";
 import { Slot } from "@radix-ui/react-slot";
 import * as React from "react";
 import {
-  Controller,
-  type ControllerProps,
-  type FieldPath,
-  type FieldValues,
-  FormProvider,
-  useFormContext,
-  useFormState,
+	Controller,
+	type ControllerProps,
+	type FieldPath,
+	type FieldValues,
+	FormProvider,
+	useFormContext,
+	useFormState,
 } from "react-hook-form";
 import { Label } from "@/components/ui/label";
 import { cn } from "@/lib/utils";
@@ -18,146 +18,146 @@ import { cn } from "@/lib/utils";
 const Form = FormProvider;
 
 type FormFieldContextValue<
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+	TFieldValues extends FieldValues = FieldValues,
+	TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 > = {
-  name: TName;
+	name: TName;
 };
 
 const FormFieldContext = React.createContext<FormFieldContextValue>(
-  {} as FormFieldContextValue
+	{} as FormFieldContextValue,
 );
 
 const FormField = <
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+	TFieldValues extends FieldValues = FieldValues,
+	TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 >({
-  ...props
+	...props
 }: ControllerProps<TFieldValues, TName>) => (
-  <FormFieldContext.Provider value={{ name: props.name }}>
-    <Controller {...props} />
-  </FormFieldContext.Provider>
+	<FormFieldContext.Provider value={{ name: props.name }}>
+		<Controller {...props} />
+	</FormFieldContext.Provider>
 );
 
 const useFormField = () => {
-  const fieldContext = React.useContext(FormFieldContext);
-  const itemContext = React.useContext(FormItemContext);
-  const { getFieldState } = useFormContext();
-  const formState = useFormState({ name: fieldContext.name });
-  const fieldState = getFieldState(fieldContext.name, formState);
-
-  if (!fieldContext) {
-    throw new Error("useFormField should be used within <FormField>");
-  }
-
-  const { id } = itemContext;
-
-  return {
-    id,
-    name: fieldContext.name,
-    formItemId: `${id}-form-item`,
-    formDescriptionId: `${id}-form-item-description`,
-    formMessageId: `${id}-form-item-message`,
-    ...fieldState,
-  };
+	const fieldContext = React.useContext(FormFieldContext);
+	const itemContext = React.useContext(FormItemContext);
+	const { getFieldState } = useFormContext();
+	const formState = useFormState({ name: fieldContext.name });
+	const fieldState = getFieldState(fieldContext.name, formState);
+
+	if (!fieldContext) {
+		throw new Error("useFormField should be used within <FormField>");
+	}
+
+	const { id } = itemContext;
+
+	return {
+		id,
+		name: fieldContext.name,
+		formItemId: `${id}-form-item`,
+		formDescriptionId: `${id}-form-item-description`,
+		formMessageId: `${id}-form-item-message`,
+		...fieldState,
+	};
 };
 
 type FormItemContextValue = {
-  id: string;
+	id: string;
 };
 
 const FormItemContext = React.createContext<FormItemContextValue>(
-  {} as FormItemContextValue
+	{} as FormItemContextValue,
 );
 
 function FormItem({ className, ...props }: React.ComponentProps<"div">) {
-  const id = React.useId();
-
-  return (
-    <FormItemContext.Provider value={{ id }}>
-      <div
-        className={cn("grid gap-2", className)}
-        data-slot="form-item"
-        {...props}
-      />
-    </FormItemContext.Provider>
-  );
+	const id = React.useId();
+
+	return (
+		<FormItemContext.Provider value={{ id }}>
+			<div
+				className={cn("grid gap-2", className)}
+				data-slot="form-item"
+				{...props}
+			/>
+		</FormItemContext.Provider>
+	);
 }
 
 function FormLabel({
-  className,
-  ...props
+	className,
+	...props
 }: React.ComponentProps<typeof LabelPrimitive.Root>) {
-  const { error, formItemId } = useFormField();
-
-  return (
-    <Label
-      className={cn("data-[error=true]:text-destructive", className)}
-      data-error={!!error}
-      data-slot="form-label"
-      htmlFor={formItemId}
-      {...props}
-    />
-  );
+	const { error, formItemId } = useFormField();
+
+	return (
+		<Label
+			className={cn("data-[error=true]:text-destructive", className)}
+			data-error={!!error}
+			data-slot="form-label"
+			htmlFor={formItemId}
+			{...props}
+		/>
+	);
 }
 
 function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
-  const { error, formItemId, formDescriptionId, formMessageId } =
-    useFormField();
-
-  return (
-    <Slot
-      aria-describedby={
-        error ? `${formDescriptionId} ${formMessageId}` : `${formDescriptionId}`
-      }
-      aria-invalid={!!error}
-      data-slot="form-control"
-      id={formItemId}
-      {...props}
-    />
-  );
+	const { error, formItemId, formDescriptionId, formMessageId } =
+		useFormField();
+
+	return (
+		<Slot
+			aria-describedby={
+				error ? `${formDescriptionId} ${formMessageId}` : `${formDescriptionId}`
+			}
+			aria-invalid={!!error}
+			data-slot="form-control"
+			id={formItemId}
+			{...props}
+		/>
+	);
 }
 
 function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
-  const { formDescriptionId } = useFormField();
-
-  return (
-    <p
-      className={cn("text-muted-foreground text-sm", className)}
-      data-slot="form-description"
-      id={formDescriptionId}
-      {...props}
-    />
-  );
+	const { formDescriptionId } = useFormField();
+
+	return (
+		<p
+			className={cn("text-muted-foreground text-sm", className)}
+			data-slot="form-description"
+			id={formDescriptionId}
+			{...props}
+		/>
+	);
 }
 
 function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
-  const { error, formMessageId } = useFormField();
-  const body = error ? String(error?.message ?? "") : props.children;
-
-  if (!body) {
-    return null;
-  }
-
-  return (
-    <p
-      className={cn("text-destructive text-sm", className)}
-      data-slot="form-message"
-      id={formMessageId}
-      {...props}
-    >
-      {body}
-    </p>
-  );
+	const { error, formMessageId } = useFormField();
+	const body = error ? String(error?.message ?? "") : props.children;
+
+	if (!body) {
+		return null;
+	}
+
+	return (
+		<p
+			className={cn("text-destructive text-sm", className)}
+			data-slot="form-message"
+			id={formMessageId}
+			{...props}
+		>
+			{body}
+		</p>
+	);
 }
 
 export {
-  useFormField,
-  Form,
-  FormItem,
-  FormLabel,
-  FormControl,
-  FormDescription,
-  FormMessage,
-  FormField,
+	Form,
+	FormControl,
+	FormDescription,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+	useFormField,
 };

package/templates/chat-app/components/ui/hover-card.tsx

@@ -6,39 +6,39 @@ import type * as React from "react";
 import { cn } from "@/lib/utils";
 
 function HoverCard({
-  ...props
+	...props
 }: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
-  return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />;
+	return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />;
 }
 
 function HoverCardTrigger({
-  ...props
+	...props
 }: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
-  return (
-    <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
-  );
+	return (
+		<HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
+	);
 }
 
 function HoverCardContent({
-  className,
-  align = "center",
-  sideOffset = 4,
-  ...props
+	className,
+	align = "center",
+	sideOffset = 4,
+	...props
 }: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
-  return (
-    <HoverCardPrimitive.Portal data-slot="hover-card-portal">
-      <HoverCardPrimitive.Content
-        align={align}
-        className={cn(
-          "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[state=closed]:animate-out data-[state=open]:animate-in",
-          className
-        )}
-        data-slot="hover-card-content"
-        sideOffset={sideOffset}
-        {...props}
-      />
-    </HoverCardPrimitive.Portal>
-  );
+	return (
+		<HoverCardPrimitive.Portal data-slot="hover-card-portal">
+			<HoverCardPrimitive.Content
+				align={align}
+				className={cn(
+					"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[state=closed]:animate-out data-[state=open]:animate-in",
+					className,
+				)}
+				data-slot="hover-card-content"
+				sideOffset={sideOffset}
+				{...props}
+			/>
+		</HoverCardPrimitive.Portal>
+	);
 }
 
-export { HoverCard, HoverCardTrigger, HoverCardContent };
+export { HoverCard, HoverCardContent, HoverCardTrigger };