Migrate to ai sdk v5

apps/web/app/(app)/[emailAccountId]/assistant/AIChatButton.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { useSidebar } from "@/components/ui/sidebar";
+import { MessageCircleIcon } from "lucide-react";
+
+export function AIChatButton() {
+  const { setOpen } = useSidebar();
+
+  return (
+    <Button
+      size="sm"
+      variant="primaryBlue"
+      onClick={() => setOpen(["chat-sidebar"])}
+    >
+      <MessageCircleIcon className="mr-2 size-4" />
+      AI Chat
+    </Button>
+  );
+}

apps/web/app/(app)/[emailAccountId]/assistant/ExecutedRulesTable.tsx

@@ -15,7 +15,6 @@ import type { ParsedMessage } from "@/utils/types";
 import { ViewEmailButton } from "@/components/ViewEmailButton";
 import { ExecutedRuleStatus } from "@prisma/client";
 import { FixWithChat } from "@/app/(app)/[emailAccountId]/assistant/FixWithChat";
-import type { SetInputFunction } from "@/components/assistant-chat/types";
 import { useAssistantNavigation } from "@/hooks/useAssistantNavigation";
 import { useAccount } from "@/providers/EmailAccountProvider";
 
@@ -74,7 +73,7 @@ export function RuleCell({
   status: ExecutedRuleStatus;
   reason?: string | null;
   message: ParsedMessage;
-  setInput: SetInputFunction;
+  setInput: (input: string) => void;
 }) {
   const { createAssistantUrl } = useAssistantNavigation(emailAccountId);
 

apps/web/app/(app)/[emailAccountId]/assistant/FixWithChat.tsx

@@ -1,8 +1,5 @@
-import { useRouter } from "next/navigation";
-import { useQueryState } from "nuqs";
 import { MessageCircleIcon } from "lucide-react";
 import { Button } from "@/components/ui/button";
-import type { SetInputFunction } from "@/components/assistant-chat/types";
 import type { ParsedMessage } from "@/utils/types";
 import type { RunRulesResult } from "@/utils/ai/choose-rule/run-rules";
 import { truncate } from "@/utils/string";
@@ -18,28 +15,30 @@ import { useRules } from "@/hooks/useRules";
 import { useAccount } from "@/providers/EmailAccountProvider";
 import { useModal } from "@/hooks/useModal";
 import { NEW_RULE_ID } from "@/app/(app)/[emailAccountId]/assistant/consts";
-import { useAssistantNavigation } from "@/hooks/useAssistantNavigation";
 import { Label } from "@/components/Input";
 import { ButtonList } from "@/components/ButtonList";
 import type { RulesResponse } from "@/app/api/user/rules/route";
 import { ProcessResultDisplay } from "@/app/(app)/[emailAccountId]/assistant/ProcessResultDisplay";
 import { NONE_RULE_ID } from "@/app/(app)/[emailAccountId]/assistant/consts";
+import { useSidebar } from "@/components/ui/sidebar";
 
 export function FixWithChat({
   setInput,
   message,
   result,
 }: {
-  setInput: SetInputFunction;
+  setInput: (input: string) => void;
   message: ParsedMessage;
   result: RunRulesResult | null;
 }) {
   const { data, isLoading, error } = useRules();
   const { emailAccountId } = useAccount();
   const { isModalOpen, setIsModalOpen } = useModal();
-  const { createAssistantUrl } = useAssistantNavigation(emailAccountId);
-  const router = useRouter();
-  const [currentTab] = useQueryState("tab");
+  // const { createAssistantUrl } = useAssistantNavigation(emailAccountId);
+  // const router = useRouter();
+  // const [currentTab] = useQueryState("tab");
+
+  const { setOpen } = useSidebar();
 
   return (
     <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
@@ -82,23 +81,22 @@ export function FixWithChat({
                   });
                 }
 
-                if (setInput) {
-                  // this is only set if we're in the correct context
-                  setInput(input);
-                } else {
-                  // redirect to the assistant page
-                  const searchParams = new URLSearchParams();
-                  searchParams.set("input", input);
-                  if (currentTab) searchParams.set("tab", currentTab);
-
-                  router.push(
-                    createAssistantUrl({
-                      input,
-                      tab: currentTab || undefined,
-                      path: `/assistant${searchParams.toString()}`,
-                    }),
-                  );
-                }
+                setInput(input);
+                setOpen(["chat-sidebar"]);
+                // } else {
+                //   // redirect to the assistant page
+                //   const searchParams = new URLSearchParams();
+                //   searchParams.set("input", input);
+                //   if (currentTab) searchParams.set("tab", currentTab);
+
+                //   router.push(
+                //     createAssistantUrl({
+                //       input,
+                //       tab: currentTab || undefined,
+                //       path: `/assistant${searchParams.toString()}`,
+                //     }),
+                //   );
+                // }
 
                 setIsModalOpen(false);
               }}

apps/web/app/(app)/[emailAccountId]/assistant/History.tsx

@@ -22,7 +22,7 @@ import { TablePagination } from "@/components/TablePagination";
 import { Badge } from "@/components/Badge";
 import { RulesSelect } from "@/app/(app)/[emailAccountId]/assistant/RulesSelect";
 import { useAccount } from "@/providers/EmailAccountProvider";
-import { useChat } from "@/components/assistant-chat/ChatContext";
+import { useChat } from "@/providers/ChatProvider";
 
 export function History() {
   const [page] = useQueryState("page", parseAsInteger.withDefault(1));

apps/web/app/(app)/[emailAccountId]/assistant/Pending.tsx

@@ -30,7 +30,7 @@ import { Checkbox } from "@/components/Checkbox";
 import { useToggleSelect } from "@/hooks/useToggleSelect";
 import { RulesSelect } from "@/app/(app)/[emailAccountId]/assistant/RulesSelect";
 import { useAccount } from "@/providers/EmailAccountProvider";
-import { useChat } from "@/components/assistant-chat/ChatContext";
+import { useChat } from "@/providers/ChatProvider";
 
 export function Pending() {
   const [page] = useQueryState("page", parseAsInteger.withDefault(1));

apps/web/app/(app)/[emailAccountId]/assistant/ProcessRules.tsx

@@ -38,8 +38,7 @@ import { ProcessResultDisplay } from "@/app/(app)/[emailAccountId]/assistant/Pro
 import { Tooltip } from "@/components/Tooltip";
 import { useAccount } from "@/providers/EmailAccountProvider";
 import { FixWithChat } from "@/app/(app)/[emailAccountId]/assistant/FixWithChat";
-import { useChat } from "@/components/assistant-chat/ChatContext";
-import type { SetInputFunction } from "@/components/assistant-chat/types";
+import { useChat } from "@/providers/ChatProvider";
 
 type Message = MessagesResponse["messages"][number];
 
@@ -318,7 +317,7 @@ function ProcessRulesRow({
   onRun: (rerun?: boolean) => void;
   testMode: boolean;
   emailAccountId: string;
-  setInput: SetInputFunction;
+  setInput: (input: string) => void;
 }) {
   return (
     <TableRow

apps/web/app/(app)/[emailAccountId]/assistant/page.tsx

@@ -41,7 +41,7 @@ export default async function AssistantPage({
         <PermissionsCheck />
 
         <div className="flex h-[calc(100vh-theme(spacing.16))] flex-col">
-          <Chat emailAccountId={emailAccountId} />
+          <Chat />
         </div>
       </Suspense>
     </EmailProvider>

apps/web/app/(app)/[emailAccountId]/automation/page.tsx

@@ -2,7 +2,7 @@ import { Suspense } from "react";
 import { cookies } from "next/headers";
 import Link from "next/link";
 import { redirect } from "next/navigation";
-import { MessageCircleIcon, SlidersIcon } from "lucide-react";
+import { SlidersIcon } from "lucide-react";
 import prisma from "@/utils/prisma";
 import { History } from "@/app/(app)/[emailAccountId]/assistant/History";
 import { Pending } from "@/app/(app)/[emailAccountId]/assistant/Pending";
@@ -20,6 +20,7 @@ import { SettingsTab } from "@/app/(app)/[emailAccountId]/assistant/settings/Set
 import { PageHeading } from "@/components/Typography";
 import { TabSelect } from "@/components/TabSelect";
 import { RulesTab } from "@/app/(app)/[emailAccountId]/assistant/RulesTab";
+import { AIChatButton } from "@/app/(app)/[emailAccountId]/assistant/AIChatButton";
 
 export const maxDuration = 300; // Applies to the actions
 
@@ -85,7 +86,7 @@ export default async function AutomationPage({
       <Suspense>
         <PermissionsCheck />
 
-        <div className="mx-4">
+        <div className="mx-4 mt-2">
           <div className="w-screen-xl mx-auto max-w-screen-xl">
             <div className="w-full">
               <PremiumAlertWithData className="mb-2" />
@@ -203,12 +204,7 @@ function ExtraActions({ emailAccountId }: { emailAccountId: string }) {
         buttonProps={{ size: "sm", variant: "ghost" }}
       />
 
-      <Button size="sm" variant="primaryBlue" asChild>
-        <Link href={prefixPath(emailAccountId, "/assistant")}>
-          <MessageCircleIcon className="mr-2 size-4" />
-          AI Chat
-        </Link>
-      </Button>
+      <AIChatButton />
     </div>
   );
 }

apps/web/app/(app)/[emailAccountId]/simple/Summary.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useCompletion } from "ai/react";
+import { useCompletion } from "@ai-sdk/react";
 import { useEffect } from "react";
 import { ButtonLoader } from "@/components/Loading";
 import { ViewMoreButton } from "@/app/(app)/[emailAccountId]/simple/ViewMoreButton";

apps/web/app/(app)/[emailAccountId]/usage/usage.tsx

@@ -7,13 +7,9 @@ import { usePremium } from "@/components/PremiumAlert";
 import { LoadingContent } from "@/components/LoadingContent";
 import { env } from "@/env";
 import { isPremium } from "@/utils/premium";
+import type { RedisUsage } from "@/utils/redis/usage";
 
-export function Usage(props: {
-  usage?: {
-    openaiCalls: number;
-    openaiTokensUsed: number;
-  } | null;
-}) {
+export function Usage(props: { usage: RedisUsage | null }) {
   const { premium, isLoading, error } = usePremium();
 
   return (

apps/web/app/(app)/layout.tsx

@@ -2,7 +2,6 @@ import "../../styles/globals.css";
 import type React from "react";
 import { cookies } from "next/headers";
 import { Suspense } from "react";
-import dynamic from "next/dynamic";
 import { redirect } from "next/navigation";
 import { SideNavWithTopNav } from "@/components/SideNavWithTopNav";
 import { TokenCheck } from "@/components/TokenCheck";
@@ -40,7 +39,7 @@ export default async function AppLayout({
   if (!session?.user.email) redirect("/login");
 
   const cookieStore = await cookies();
-  const isClosed = cookieStore.get("sidebar_state")?.value === "false";
+  const isClosed = cookieStore.get("left-sidebar:state")?.value === "false";
 
   return (
     <AppProviders>
@@ -59,12 +58,12 @@ export default async function AppLayout({
         <Suspense>
           <LastLogin email={session.user.email} />
         </Suspense>
-        <Suspense>
+        {/* <Suspense>
           <CrispWithNoSSR email={session.user.email} />
-        </Suspense>
+        </Suspense> */}
       </ErrorBoundary>
     </AppProviders>
   );
 }
 
-const CrispWithNoSSR = dynamic(() => import("@/components/CrispChat"));
+// const CrispWithNoSSR = dynamic(() => import("@/components/CrispChat"));