feat: v1 — persistent shell, model gateway, artifact improvements (#1462)

hooks/use-active-chat.tsx

@@ -0,0 +1,301 @@
+"use client";
+
+import type { UseChatHelpers } from "@ai-sdk/react";
+import { useChat } from "@ai-sdk/react";
+import { DefaultChatTransport } from "ai";
+import { usePathname } from "next/navigation";
+import {
+  createContext,
+  type Dispatch,
+  type ReactNode,
+  type SetStateAction,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import useSWR, { useSWRConfig } from "swr";
+import { unstable_serialize } from "swr/infinite";
+import { useDataStream } from "@/components/chat/data-stream-provider";
+import { getChatHistoryPaginationKey } from "@/components/chat/sidebar-history";
+import { toast } from "@/components/chat/toast";
+import type { VisibilityType } from "@/components/chat/visibility-selector";
+import { useAutoResume } from "@/hooks/use-auto-resume";
+import { DEFAULT_CHAT_MODEL } from "@/lib/ai/models";
+import type { Vote } from "@/lib/db/schema";
+import { ChatbotError } from "@/lib/errors";
+import type { ChatMessage } from "@/lib/types";
+import { fetcher, fetchWithErrorHandlers, generateUUID } from "@/lib/utils";
+
+type ActiveChatContextValue = {
+  chatId: string;
+  messages: ChatMessage[];
+  setMessages: UseChatHelpers<ChatMessage>["setMessages"];
+  sendMessage: UseChatHelpers<ChatMessage>["sendMessage"];
+  status: UseChatHelpers<ChatMessage>["status"];
+  stop: UseChatHelpers<ChatMessage>["stop"];
+  regenerate: UseChatHelpers<ChatMessage>["regenerate"];
+  addToolApprovalResponse: UseChatHelpers<ChatMessage>["addToolApprovalResponse"];
+  input: string;
+  setInput: Dispatch<SetStateAction<string>>;
+  visibilityType: VisibilityType;
+  isReadonly: boolean;
+  isLoading: boolean;
+  votes: Vote[] | undefined;
+  currentModelId: string;
+  setCurrentModelId: (id: string) => void;
+  showCreditCardAlert: boolean;
+  setShowCreditCardAlert: Dispatch<SetStateAction<boolean>>;
+};
+
+const ActiveChatContext = createContext<ActiveChatContextValue | null>(null);
+
+function extractChatId(pathname: string): string | null {
+  const match = pathname.match(/\/chat\/([^/]+)/);
+  return match ? match[1] : null;
+}
+
+export function ActiveChatProvider({ children }: { children: ReactNode }) {
+  const pathname = usePathname();
+  const { setDataStream } = useDataStream();
+  const { mutate } = useSWRConfig();
+
+  const chatIdFromUrl = extractChatId(pathname);
+  const isNewChat = !chatIdFromUrl;
+  const newChatIdRef = useRef(generateUUID());
+  const prevPathnameRef = useRef(pathname);
+
+  if (isNewChat && prevPathnameRef.current !== pathname) {
+    newChatIdRef.current = generateUUID();
+  }
+  prevPathnameRef.current = pathname;
+
+  const chatId = chatIdFromUrl ?? newChatIdRef.current;
+
+  const [currentModelId, setCurrentModelId] = useState(DEFAULT_CHAT_MODEL);
+  const currentModelIdRef = useRef(currentModelId);
+  useEffect(() => {
+    currentModelIdRef.current = currentModelId;
+  }, [currentModelId]);
+
+  const [input, setInput] = useState("");
+  const [showCreditCardAlert, setShowCreditCardAlert] = useState(false);
+
+  const { data: chatData, isLoading } = useSWR(
+    isNewChat
+      ? null
+      : `${process.env.NEXT_PUBLIC_BASE_PATH ?? ""}/api/messages?chatId=${chatId}`,
+    fetcher,
+    { revalidateOnFocus: false }
+  );
+
+  const initialMessages: ChatMessage[] = isNewChat
+    ? []
+    : (chatData?.messages ?? []);
+  const visibility: VisibilityType = isNewChat
+    ? "private"
+    : (chatData?.visibility ?? "private");
+
+  const {
+    messages,
+    setMessages,
+    sendMessage,
+    status,
+    stop,
+    regenerate,
+    resumeStream,
+    addToolApprovalResponse,
+  } = useChat<ChatMessage>({
+    id: chatId,
+    messages: initialMessages,
+    generateId: generateUUID,
+    sendAutomaticallyWhen: ({ messages: currentMessages }) => {
+      const lastMessage = currentMessages.at(-1);
+      return (
+        lastMessage?.parts?.some(
+          (part) =>
+            "state" in part &&
+            part.state === "approval-responded" &&
+            "approval" in part &&
+            (part.approval as { approved?: boolean })?.approved === true
+        ) ?? false
+      );
+    },
+    transport: new DefaultChatTransport({
+      api: `${process.env.NEXT_PUBLIC_BASE_PATH ?? ""}/api/chat`,
+      fetch: fetchWithErrorHandlers,
+      prepareSendMessagesRequest(request) {
+        const lastMessage = request.messages.at(-1);
+        const isToolApprovalContinuation =
+          lastMessage?.role !== "user" ||
+          request.messages.some((msg) =>
+            msg.parts?.some((part) => {
+              const state = (part as { state?: string }).state;
+              return (
+                state === "approval-responded" || state === "output-denied"
+              );
+            })
+          );
+
+        return {
+          body: {
+            id: request.id,
+            ...(isToolApprovalContinuation
+              ? { messages: request.messages }
+              : { message: lastMessage }),
+            selectedChatModel: currentModelIdRef.current,
+            selectedVisibilityType: visibility,
+            ...request.body,
+          },
+        };
+      },
+    }),
+    onData: (dataPart) => {
+      setDataStream((ds) => (ds ? [...ds, dataPart] : []));
+    },
+    onFinish: () => {
+      mutate(unstable_serialize(getChatHistoryPaginationKey));
+    },
+    onError: (error) => {
+      if (error.message?.includes("AI Gateway requires a valid credit card")) {
+        setShowCreditCardAlert(true);
+      } else if (error instanceof ChatbotError) {
+        toast({ type: "error", description: error.message });
+      } else {
+        toast({
+          type: "error",
+          description: error.message || "Oops, an error occurred!",
+        });
+      }
+    },
+  });
+
+  const loadedChatIds = useRef(new Set<string>());
+
+  if (isNewChat && !loadedChatIds.current.has(newChatIdRef.current)) {
+    loadedChatIds.current.add(newChatIdRef.current);
+  }
+
+  useEffect(() => {
+    if (loadedChatIds.current.has(chatId)) {
+      return;
+    }
+    if (chatData?.messages) {
+      loadedChatIds.current.add(chatId);
+      setMessages(chatData.messages);
+    }
+  }, [chatId, chatData?.messages, setMessages]);
+
+  const prevChatIdRef = useRef(chatId);
+  useEffect(() => {
+    if (prevChatIdRef.current !== chatId) {
+      prevChatIdRef.current = chatId;
+      if (isNewChat) {
+        setMessages([]);
+      }
+    }
+  }, [chatId, isNewChat, setMessages]);
+
+  useEffect(() => {
+    if (chatData && !isNewChat) {
+      const cookieModel = document.cookie
+        .split("; ")
+        .find((row) => row.startsWith("chat-model="))
+        ?.split("=")[1];
+      if (cookieModel) {
+        setCurrentModelId(decodeURIComponent(cookieModel));
+      }
+    }
+  }, [chatData, isNewChat]);
+
+  const hasAppendedQueryRef = useRef(false);
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search);
+    const query = params.get("query");
+    if (query && !hasAppendedQueryRef.current) {
+      hasAppendedQueryRef.current = true;
+      window.history.replaceState(
+        {},
+        "",
+        `${process.env.NEXT_PUBLIC_BASE_PATH ?? ""}/chat/${chatId}`
+      );
+      sendMessage({
+        role: "user" as const,
+        parts: [{ type: "text", text: query }],
+      });
+    }
+  }, [sendMessage, chatId]);
+
+  useAutoResume({
+    autoResume: !isNewChat && !!chatData,
+    initialMessages,
+    resumeStream,
+    setMessages,
+  });
+
+  const isReadonly = isNewChat ? false : (chatData?.isReadonly ?? false);
+
+  const { data: votes } = useSWR<Vote[]>(
+    !isReadonly && messages.length >= 2
+      ? `${process.env.NEXT_PUBLIC_BASE_PATH ?? ""}/api/vote?chatId=${chatId}`
+      : null,
+    fetcher,
+    { revalidateOnFocus: false }
+  );
+
+  const value = useMemo<ActiveChatContextValue>(
+    () => ({
+      chatId,
+      messages,
+      setMessages,
+      sendMessage,
+      status,
+      stop,
+      regenerate,
+      addToolApprovalResponse,
+      input,
+      setInput,
+      visibilityType: visibility,
+      isReadonly,
+      isLoading: !isNewChat && isLoading,
+      votes,
+      currentModelId,
+      setCurrentModelId,
+      showCreditCardAlert,
+      setShowCreditCardAlert,
+    }),
+    [
+      chatId,
+      messages,
+      setMessages,
+      sendMessage,
+      status,
+      stop,
+      regenerate,
+      addToolApprovalResponse,
+      input,
+      visibility,
+      isReadonly,
+      isNewChat,
+      isLoading,
+      votes,
+      currentModelId,
+      showCreditCardAlert,
+    ]
+  );
+
+  return (
+    <ActiveChatContext.Provider value={value}>
+      {children}
+    </ActiveChatContext.Provider>
+  );
+}
+
+export function useActiveChat() {
+  const context = useContext(ActiveChatContext);
+  if (!context) {
+    throw new Error("useActiveChat must be used within ActiveChatProvider");
+  }
+  return context;
+}

hooks/use-artifact.ts

@@ -2,7 +2,7 @@
 
 import { useCallback, useMemo } from "react";
 import useSWR from "swr";
-import type { UIArtifact } from "@/components/artifact";
+import type { UIArtifact } from "@/components/chat/artifact";
 
 export const initialArtifactData: UIArtifact = {
   documentId: "init",

hooks/use-auto-resume.ts

@@ -2,7 +2,7 @@
 
 import type { UseChatHelpers } from "@ai-sdk/react";
 import { useEffect } from "react";
-import { useDataStream } from "@/components/data-stream-provider";
+import { useDataStream } from "@/components/chat/data-stream-provider";
 import type { ChatMessage } from "@/lib/types";
 
 export type UseAutoResumeParams = {
@@ -30,9 +30,6 @@ export function useAutoResume({
     if (mostRecentMessage?.role === "user") {
       resumeStream();
     }
-
-    // we intentionally run this once
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [autoResume, initialMessages.at, resumeStream]);
 
   useEffect(() => {

hooks/use-chat-visibility.ts

@@ -7,8 +7,8 @@ import { updateChatVisibility } from "@/app/(chat)/actions";
 import {
   type ChatHistory,
   getChatHistoryPaginationKey,
-} from "@/components/sidebar-history";
-import type { VisibilityType } from "@/components/visibility-selector";
+} from "@/components/chat/sidebar-history";
+import type { VisibilityType } from "@/components/chat/visibility-selector";
 
 export function useChatVisibility({
   chatId,

hooks/use-messages.tsx

@@ -15,6 +15,7 @@ export function useMessages({
     scrollToBottom,
     onViewportEnter,
     onViewportLeave,
+    reset,
   } = useScrollToBottom();
 
   const [hasSentMessage, setHasSentMessage] = useState(false);
@@ -33,5 +34,6 @@ export function useMessages({
     onViewportEnter,
     onViewportLeave,
     hasSentMessage,
+    reset,
   };
 }

hooks/use-scroll-to-bottom.tsx

@@ -7,7 +7,6 @@ export function useScrollToBottom() {
   const isAtBottomRef = useRef(true);
   const isUserScrollingRef = useRef(false);
 
-  // Keep ref in sync with state
   useEffect(() => {
     isAtBottomRef.current = isAtBottom;
   }, [isAtBottom]);
@@ -30,7 +29,6 @@ export function useScrollToBottom() {
     });
   }, []);
 
-  // Handle user scroll events
   useEffect(() => {
     const container = containerRef.current;
     if (!container) {
@@ -40,16 +38,13 @@ export function useScrollToBottom() {
     let scrollTimeout: ReturnType<typeof setTimeout>;
 
     const handleScroll = () => {
-      // Mark as user scrolling
       isUserScrollingRef.current = true;
       clearTimeout(scrollTimeout);
 
-      // Update isAtBottom state
       const atBottom = checkIfAtBottom();
       setIsAtBottom(atBottom);
       isAtBottomRef.current = atBottom;
 
-      // Reset user scrolling flag after scroll ends
       scrollTimeout = setTimeout(() => {
         isUserScrollingRef.current = false;
       }, 150);
@@ -62,7 +57,6 @@ export function useScrollToBottom() {
     };
   }, [checkIfAtBottom]);
 
-  // Auto-scroll when content changes
   useEffect(() => {
     const container = containerRef.current;
     if (!container) {
@@ -70,7 +64,6 @@ export function useScrollToBottom() {
     }
 
     const scrollIfNeeded = () => {
-      // Only auto-scroll if user was at bottom and isn't actively scrolling
       if (isAtBottomRef.current && !isUserScrollingRef.current) {
         requestAnimationFrame(() => {
           container.scrollTo({
@@ -83,7 +76,6 @@ export function useScrollToBottom() {
       }
     };
 
-    // Watch for DOM changes
     const mutationObserver = new MutationObserver(scrollIfNeeded);
     mutationObserver.observe(container, {
       childList: true,
@@ -91,11 +83,9 @@ export function useScrollToBottom() {
       characterData: true,
     });
 
-    // Watch for size changes
     const resizeObserver = new ResizeObserver(scrollIfNeeded);
     resizeObserver.observe(container);
 
-    // Also observe children for size changes
     for (const child of container.children) {
       resizeObserver.observe(child);
     }
@@ -116,6 +106,12 @@ export function useScrollToBottom() {
     isAtBottomRef.current = false;
   }
 
+  const reset = useCallback(() => {
+    setIsAtBottom(true);
+    isAtBottomRef.current = true;
+    isUserScrollingRef.current = false;
+  }, []);
+
   return {
     containerRef,
     endRef,
@@ -123,5 +119,6 @@ export function useScrollToBottom() {
     scrollToBottom,
     onViewportEnter,
     onViewportLeave,
+    reset,
   };
 }