refactor: switch from biome to prettier + eslint (#266)

* refactor: switch from biome back to prettier + eslint * run prettier * fix build ,add changesets
Yonom · Jun 20, 2024 · 36f3a1f · 36f3a1f
1 parent b7a18d9
commit 36f3a1f
Show file tree

Hide file tree

Showing 158 changed files with 3,048 additions and 5,158 deletions.
diff --git a/.changeset/lovely-trains-relax.md b/.changeset/lovely-trains-relax.md
@@ -0,0 +1,5 @@
+---
+"@assistant-ui/react": patch
+---
+
+fix: add DisplayName to primitive components for better error logs
diff --git a/.changeset/ninety-llamas-notice.md b/.changeset/ninety-llamas-notice.md
@@ -0,0 +1,5 @@
+---
+"@assistant-ui/react": patch
+---
+
+chore: upgrade to radix-ui 1.1
diff --git a/.changeset/polite-jars-move.md b/.changeset/polite-jars-move.md
@@ -0,0 +1,8 @@
+---
+"@assistant-ui/react-hook-form": patch
+"@assistant-ui/react-ai-sdk": patch
+"@assistant-ui/react": patch
+"assistant-ui": patch
+---
+
+chore: update dependencies
diff --git a/.github/workflows/changeset.yaml b/.github/workflows/changeset.yaml
@@ -41,4 +41,4 @@ jobs:
           publish: pnpm ci:publish
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
diff --git a/README.md b/README.md
@@ -25,7 +25,7 @@ import { useVercelUseChatRuntime } from "@assistant-ui/react-ai-sdk";
 import { AssistantModal } from "@/components/ui/assistant-ui/assistant-modal";
 
 export default const MyApp = () => {
-  const chat = useChat({ 
+  const chat = useChat({
     api: "/api/chat" // your backend route
   });
   const runtime = useVercelUseChatRuntime(chat);
@@ -36,4 +36,4 @@ export default const MyApp = () => {
     </AssistantRuntimeProvider>
   );
 }
-```
+```
diff --git a/apps/www/.eslintrc.json b/apps/www/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}
diff --git a/apps/www/components.json b/apps/www/components.json
@@ -14,4 +14,4 @@
     "components": "@/components",
     "utils": "@/lib/utils"
   }
-}
+}
diff --git a/apps/www/components/Home.tsx b/apps/www/components/Home.tsx
@@ -43,10 +43,10 @@ export default function Home() {
   return (
     <main className="container mx-auto flex flex-col gap-6 self-stretch py-4">
       <div className="mt-12 flex flex-col gap-4 self-center">
-        <h1 className="text-center font-extrabold text-4xl">
+        <h1 className="text-center text-4xl font-extrabold">
           React Components for AI Chat
         </h1>
-        <p className="text-center text-foreground/85 text-xl">
+        <p className="text-foreground/85 text-center text-xl">
           Add an AI chatbot to your app in minutes.
         </p>
       </div>

diff --git a/apps/www/components/Onboarding.tsx b/apps/www/components/Onboarding.tsx
@@ -15,13 +15,13 @@ export default function Onboarding() {
   }, []);
   return (
     <div className="mx-auto flex w-full max-w-4xl flex-col gap-4 py-10">
-      <h2 className="font-extrabold text-2xl">Get Onboarded By a Founder</h2>
+      <h2 className="text-2xl font-extrabold">Get Onboarded By a Founder</h2>
       <Cal
         calLink="simon-farshid/assistant-ui-onboarding"
         style={{ width: "100%", height: "620px", overflow: "scroll" }}
         config={{ layout: "month_view" }}
       />
-      <h2 className="font-extrabold text-2xl">Self-Guided Onboarding</h2>
+      <h2 className="text-2xl font-extrabold">Self-Guided Onboarding</h2>
       <p>
         If you prefer to explore on your own, you can visit the{" "}
         <Link href="/docs/getting-started" className="text-green-600">

diff --git a/apps/www/components/chatgpt/ChatGPT.tsx b/apps/www/components/chatgpt/ChatGPT.tsx
@@ -24,14 +24,14 @@ import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
 
 export const ChatGPT: FC = () => {
   return (
-    <ThreadPrimitive.Root className="dark flex h-full flex-col items-stretch bg-[#212121] px-4 text-foreground">
+    <ThreadPrimitive.Root className="text-foreground dark flex h-full flex-col items-stretch bg-[#212121] px-4">
       <ThreadPrimitive.Viewport className="flex flex-grow flex-col gap-8 overflow-y-scroll pt-16">
         <ThreadPrimitive.Empty>
           <div className="flex flex-grow flex-col items-center justify-center">
             <Avatar.Root className="flex h-12 w-12 items-center justify-center rounded-[24px] border border-white/15 shadow">
               <Avatar.AvatarFallback>C</Avatar.AvatarFallback>
             </Avatar.Root>
-            <p className="mt-4 text-white text-xl">How can I help you today?</p>
+            <p className="mt-4 text-xl text-white">How can I help you today?</p>
           </div>
         </ThreadPrimitive.Empty>
 
@@ -51,7 +51,7 @@ export const ChatGPT: FC = () => {
         />
         <ThreadPrimitive.If running={false}>
           <ComposerPrimitive.Send className="m-2 flex size-8 items-center justify-center rounded-full bg-white transition-opacity disabled:opacity-10">
-            <ArrowUpIcon className="size-5 text-black [&_path]:stroke-[1] [&_path]:stroke-black" />
+            <ArrowUpIcon className="size-5 text-black [&_path]:stroke-black [&_path]:stroke-[1]" />
           </ComposerPrimitive.Send>
         </ThreadPrimitive.If>
         <ThreadPrimitive.If running>
@@ -60,7 +60,7 @@ export const ChatGPT: FC = () => {
           </ComposerPrimitive.Cancel>
         </ThreadPrimitive.If>
       </ComposerPrimitive.Root>
-      <p className="p-2 text-center text-[#cdcdcd] text-xs">
+      <p className="p-2 text-center text-xs text-[#cdcdcd]">
         ChatGPT can make mistakes. Check important info.
       </p>
     </ThreadPrimitive.Root>
@@ -89,7 +89,7 @@ const UserMessage: FC = () => {
         </p>
       </div>
 
-      <BranchPicker className="mt-2 mr-3" />
+      <BranchPicker className="mr-3 mt-2" />
     </MessagePrimitive.Root>
   );
 };
@@ -100,10 +100,10 @@ const EditComposer: FC = () => {
       <ComposerPrimitive.Input className="flex h-8 w-full resize-none bg-transparent p-5 pb-0 text-white outline-none" />
 
       <div className="m-3 mt-2 flex items-center justify-center gap-2 self-end">
-        <ComposerPrimitive.Cancel className="rounded-full bg-zinc-900 px-3 py-2 font-semibold text-sm text-white hover:bg-zinc-800">
+        <ComposerPrimitive.Cancel className="rounded-full bg-zinc-900 px-3 py-2 text-sm font-semibold text-white hover:bg-zinc-800">
           Cancel
         </ComposerPrimitive.Cancel>
-        <ComposerPrimitive.Send className="rounded-full bg-white px-3 py-2 font-semibold text-black text-sm hover:bg-white/90">
+        <ComposerPrimitive.Send className="rounded-full bg-white px-3 py-2 text-sm font-semibold text-black hover:bg-white/90">
           Send
         </ComposerPrimitive.Send>
       </div>
@@ -115,7 +115,7 @@ const AssistantMessage: FC = () => {
   return (
     <MessagePrimitive.Root className="relative mx-auto flex w-full max-w-screen-md gap-3">
       <Avatar.Root className="flex size-8 flex-shrink-0 items-center justify-center rounded-[24px] border border-white/15 shadow">
-        <Avatar.AvatarFallback className="text-white text-xs">
+        <Avatar.AvatarFallback className="text-xs text-white">
           C
         </Avatar.AvatarFallback>
       </Avatar.Root>
@@ -161,7 +161,7 @@ const BranchPicker: FC<{ className?: string }> = ({ className }) => {
     <BranchPickerPrimitive.Root
       hideWhenSingleBranch
       className={cn(
-        "inline-flex items-center font-semibold text-[#b4b4b4] text-sm",
+        "inline-flex items-center text-sm font-semibold text-[#b4b4b4]",
         className,
       )}
     >

diff --git a/apps/www/components/claude/Claude.tsx b/apps/www/components/claude/Claude.tsx
@@ -18,7 +18,7 @@ export const Claude: FC = () => {
       <ThreadPrimitive.Viewport className="flex flex-grow flex-col overflow-y-scroll">
         <ThreadPrimitive.Messages components={{ Message: ChatMessage }} />
         <ThreadPrimitive.If empty={false}>
-          <p className="mx-auto w-full max-w-screen-md p-2 text-right text-[#b8b5a9] text-xs">
+          <p className="mx-auto w-full max-w-screen-md p-2 text-right text-xs text-[#b8b5a9]">
             Claude can make mistakes. Please double-check responses.
           </p>
         </ThreadPrimitive.If>
@@ -32,12 +32,12 @@ export const Claude: FC = () => {
           />
           <ComposerPrimitive.Send
             type="submit"
-            className="m-2 flex h-8 w-8 items-center justify-center rounded-lg bg-[#ae5630] font-bold text-2xl disabled:opacity-0"
+            className="m-2 flex h-8 w-8 items-center justify-center rounded-lg bg-[#ae5630] text-2xl font-bold disabled:opacity-0"
           >
             <ArrowUpIcon
               width={16}
               height={16}
-              className="text-[#ddd] [&_path]:stroke-[0.5] [&_path]:stroke-white"
+              className="text-[#ddd] [&_path]:stroke-white [&_path]:stroke-[0.5]"
             />
           </ComposerPrimitive.Send>
         </div>
@@ -57,7 +57,7 @@ const ChatMessage: FC = () => {
     <MessagePrimitive.Root className="relative mx-auto mb-4 flex w-full max-w-screen-md flex-col gap-3">
       <div
         className={cn(
-          "relative flex gap-2 rounded-2xl bg-gradient-to-b from-50% from-[#21201c] to-[#1a1915] px-3 py-2.5",
+          "relative flex gap-2 rounded-2xl bg-gradient-to-b from-[#21201c] from-50% to-[#1a1915] px-3 py-2.5",
           message.role === "user" && "self-start",
           message.role === "assistant" &&
             "bg-[linear-gradient(to_bottom,_hsla(60_1.8%_22%_/_0.75)_0%,_hsla(60_1.8%_22%_/_0)_90%)] pb-4 font-serif",
@@ -84,14 +84,14 @@ const ChatMessage: FC = () => {
       <MessagePrimitive.If assistant>
         <ActionBarPrimitive.Root
           autohide="not-last"
-          className="-bottom-3 absolute mr-3 flex items-center gap-3 self-end rounded-lg border border-[#6c6a6040] bg-[#393937] px-2 py-1"
+          className="absolute -bottom-3 mr-3 flex items-center gap-3 self-end rounded-lg border border-[#6c6a6040] bg-[#393937] px-2 py-1"
         >
-          <ActionBarPrimitive.Reload className="flex items-center gap-1 font-mono text-[#b4b4b4] text-xs hover:text-white">
+          <ActionBarPrimitive.Reload className="flex items-center gap-1 font-mono text-xs text-[#b4b4b4] hover:text-white">
             <ReloadIcon width={12} height={12} />
             Retry
           </ActionBarPrimitive.Reload>
 
-          <ActionBarPrimitive.Copy className="flex items-center gap-1 font-mono text-[#b4b4b4] text-xs hover:text-white">
+          <ActionBarPrimitive.Copy className="flex items-center gap-1 font-mono text-xs text-[#b4b4b4] hover:text-white">
             <ClipboardIcon width={12} height={12} />
             Copy
           </ActionBarPrimitive.Copy>

diff --git a/apps/www/components/docs/ParametersTable.tsx b/apps/www/components/docs/ParametersTable.tsx
@@ -16,17 +16,17 @@ type ParameterProps = {
 const Parameter: FC<ParameterProps> = ({ parameter, isLast }) => {
   return (
     <div
-      className={`flex flex-col gap-1 px-3 py-3${!isLast ? " border-b" : ""}`}
+      className={`flex flex-col gap-1 px-3 py-3${!isLast ? "border-b" : ""}`}
     >
       <div className="relative flex gap-2">
-        <h3 className="font-mono font-semibold text-sm">
+        <h3 className="font-mono text-sm font-semibold">
           {parameter.name}
           {!parameter.required && "?"}:
         </h3>
-        <div className="no-scrollbar w-full overflow-x-scroll text-nowrap pr-12 font-mono text-foreground/70 text-sm">
+        <div className="no-scrollbar text-foreground/70 w-full overflow-x-scroll text-nowrap pr-12 font-mono text-sm">
           {parameter.type}
         </div>
-        <div className="pointer-events-none absolute top-0 right-0 h-5 w-12 bg-gradient-to-r from-white/0 to-background/100" />
+        <div className="to-background/100 pointer-events-none absolute right-0 top-0 h-5 w-12 bg-gradient-to-r from-white/0" />
       </div>
       <div>
         <p className="text-foreground/70 text-sm">{parameter.description}</p>
@@ -40,7 +40,9 @@ const Parameter: FC<ParameterProps> = ({ parameter, isLast }) => {
 
 const ParametersList = ({
   parameters,
-}: { parameters: Array<ParameterDef> }) => {
+}: {
+  parameters: Array<ParameterDef>;
+}) => {
   return parameters.map((parameter, idx) => (
     <Parameter
       key={parameter.name}
@@ -53,7 +55,7 @@ const ParametersBox: FC<ParametersTableProps> = ({ type, parameters }) => {
   return (
     <div className="relative m-2 mb-1 flex flex-col rounded-lg border">
       {!!type && (
-        <h3 className="-translate-y-1/2 absolute right-3 z-10 rounded-md border bg-background px-4 py-2 font-mono font-semibold text-foreground/70 text-xs">
+        <h3 className="bg-background text-foreground/70 absolute right-3 z-10 -translate-y-1/2 rounded-md border px-4 py-2 font-mono text-xs font-semibold">
           {type}
         </h3>
       )}

diff --git a/apps/www/components/shadcn/Shadcn.tsx b/apps/www/components/shadcn/Shadcn.tsx
@@ -6,7 +6,7 @@ import { cn } from "@/lib/utils";
 import icon from "@/public/favicon/favicon.svg";
 import type { TooltipContentProps } from "@radix-ui/react-tooltip";
 import Image from "next/image";
-import { type FC, forwardRef } from "react";
+import { type FC } from "react";
 import { Thread } from "@/components/ui/assistant-ui/thread";
 import { Sheet, SheetContent, SheetTrigger } from "../ui/sheet";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
@@ -17,21 +17,24 @@ type ButtonWithTooltipProps = ButtonProps & {
   side?: TooltipContentProps["side"];
 };
 
-const ButtonWithTooltip = forwardRef<HTMLButtonElement, ButtonWithTooltipProps>(
-  ({ children, tooltip, side = "top", ...rest }, ref) => {
-    return (
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <Button {...rest} ref={ref}>
-            {children}
-            <span className="sr-only">{tooltip}</span>
-          </Button>
-        </TooltipTrigger>
-        <TooltipContent side={side}>{tooltip}</TooltipContent>
-      </Tooltip>
-    );
-  },
-);
+const ButtonWithTooltip: FC<ButtonWithTooltipProps> = ({
+  children,
+  tooltip,
+  side = "top",
+  ...rest
+}) => {
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button {...rest}>
+          {children}
+          <span className="sr-only">{tooltip}</span>
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent side={side}>{tooltip}</TooltipContent>
+    </Tooltip>
+  );
+};
 
 const TopLeft: FC = () => {
   return (
@@ -41,7 +44,7 @@ const TopLeft: FC = () => {
       tooltip="New Chat"
       side="right"
     >
-      <div className="flex items-center gap-2 font-semibold text-sm">
+      <div className="flex items-center gap-2 text-sm font-semibold">
         <Image src={icon} alt="logo" className="inline size-4" />
         <span>assistant-ui</span>
       </div>
@@ -53,15 +56,15 @@ const TopLeft: FC = () => {
 
 const MainLeft: FC = () => {
   return (
-    <nav className="flex flex-col items-stretch gap-1 font-medium text-sm">
+    <nav className="flex flex-col items-stretch gap-1 text-sm font-medium">
       <Link
         href="#"
-        className="flex items-center gap-3 rounded-lg bg-muted px-3 py-2 text-primary transition-all hover:text-primary"
+        className="bg-muted text-primary hover:text-primary flex items-center gap-3 rounded-lg px-3 py-2 transition-all"
       >
         New Chat
         <ButtonWithTooltip
           variant={"ghost"}
-          className="ml-auto h-auto p-0 hover:text-foreground/60"
+          className="hover:text-foreground/60 ml-auto h-auto p-0"
           tooltip="Archive"
         >
           <ArchiveIcon className="size-4" />

diff --git a/apps/www/components/ui/avatar.tsx b/apps/www/components/ui/avatar.tsx
@@ -1,9 +1,9 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as AvatarPrimitive from "@radix-ui/react-avatar"
+import * as React from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const Avatar = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Root>,
@@ -13,12 +13,12 @@ const Avatar = React.forwardRef<
     ref={ref}
     className={cn(
       "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
-      className
+      className,
     )}
     {...props}
   />
-))
-Avatar.displayName = AvatarPrimitive.Root.displayName
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
 
 const AvatarImage = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Image>,
@@ -29,8 +29,8 @@ const AvatarImage = React.forwardRef<
     className={cn("aspect-square h-full w-full", className)}
     {...props}
   />
-))
-AvatarImage.displayName = AvatarPrimitive.Image.displayName
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
 
 const AvatarFallback = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Fallback>,
@@ -39,12 +39,12 @@ const AvatarFallback = React.forwardRef<
   <AvatarPrimitive.Fallback
     ref={ref}
     className={cn(
-      "flex h-full w-full items-center justify-center rounded-full bg-muted",
-      className
+      "bg-muted flex h-full w-full items-center justify-center rounded-full",
+      className,
     )}
     {...props}
   />
-))
-AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
 
-export { Avatar, AvatarImage, AvatarFallback }
+export { Avatar, AvatarImage, AvatarFallback };
diff --git a/apps/www/components/ui/card.tsx b/apps/www/components/ui/card.tsx
@@ -9,7 +9,7 @@ const Card = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      "rounded-xl border bg-card text-card-foreground shadow",
+      "bg-card text-card-foreground rounded-xl border shadow",
       className,
     )}
     {...props}
-Original file line number
+Diff line change
@@ Expand Up / @@ -14,4 +14,4 @@ @@
         "components": "@/components",
         "utils": "@/lib/utils"
       }
-    }
+    }