Add model selector

package.json

@@ -22,8 +22,8 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@ai-sdk/openai": "^0.0.54",
-    "ai": "^4.0.20",
+    "@ai-sdk/openai": "^1.1.9",
+    "ai": "^4.1.16",
     "concurrently": "^8.2.2",
     "date-fns": "^3.6.0",
     "lodash": "^4.17.21",

src/app/api/chat/route.ts

@@ -17,10 +17,20 @@ export const POST = auth(async (req) => {
 
   const payload = await req.json();
 
-  const result = await streamText({
-    model: openai("gpt-4-turbo"),
+  const result = streamText({
+    model: openai(payload.model),
     messages: convertToCoreMessages(payload.messages),
+    providerOptions: {
+      openai: {
+        reasoningEffort: "low",
+      },
+    },
   });
 
-  return result.toDataStreamResponse();
+  return result.toDataStreamResponse({
+    getErrorMessage(error) {
+      console.log(error);
+      return "An error occurred.";
+    },
+  });
 });

src/app/components/Actions.tsx

@@ -4,10 +4,13 @@ import { styled } from "../../../styled-system/jsx";
 import HmrTimestamp from "./HmrTimestamp";
 import { AuthButtonClient } from "../login/components/AuthButton/AuthButtonClient";
 import { IconButton } from "@/components/IconButton";
+import { ModelSelector } from "./ModelSelector";
 
 type Props = {
   disabledHistoryActions: boolean;
+  model: string;
   onDeleteHistory: () => void;
+  onModelChange: (model: string) => void;
   onShowHistory: () => void;
   onLoad: () => void;
   onReset: () => void;
@@ -29,7 +32,9 @@ const StyledActions = styled("div", {
 
 export function Actions({
   disabledHistoryActions,
+  model,
   onDeleteHistory,
+  onModelChange,
   onShowHistory,
   onLoad,
   onReset,
@@ -46,6 +51,7 @@ export function Actions({
           Last update: <HmrTimestamp />
         </div>
       )}
+      <ModelSelector value={model} onChange={onModelChange} />
       <IconButton name="reset" iconSize="md" onClick={onReset} />
       <IconButton
         name="history"

src/app/components/ModelSelector.tsx

@@ -0,0 +1,24 @@
+import { styled } from "../../../styled-system/jsx";
+
+const StyledSelect = styled("select", {
+  base: {
+    padding: "4rem 8rem",
+    border: "1px solid black",
+    backgroundColor: "white",
+    cursor: "pointer",
+  },
+});
+
+type Props = {
+  value: string;
+  onChange: (value: string) => void;
+};
+
+export function ModelSelector({ value, onChange }: Props) {
+  return (
+    <StyledSelect value={value} onChange={(e) => onChange(e.target.value)}>
+      <option value="gpt-4-turbo">GPT-4 Turbo (1C/1K tokens)</option>
+      <option value="o3-mini">o3 mini (0.4C/1K tokens)</option>
+    </StyledSelect>
+  );
+}

src/app/login/components/AuthButton/AuthButtonClient.tsx

@@ -1,16 +1,15 @@
 "use client";
 // Runs on the client so that we can display a spinner while login/logout is being processed
 
-import { useFormState, useFormStatus } from "react-dom";
+import { IconButton } from "@/components/IconButton";
+import { ReactNode, useActionState } from "react";
+import { FaGithub } from "react-icons/fa6";
 import { Button } from "../../../../components/Button";
 import Spinner from "../../../../components/Spinner";
-import { ReactNode } from "react";
 import { signIn, signOut } from "./authActions";
-import { FaGithub } from "react-icons/fa6";
-import { IconButton } from "@/components/IconButton";
 
 function PendingServerAction({ children }: { children: ReactNode }) {
-  const { pending } = useFormStatus();
+  const [, , pending] = useActionState(signIn, undefined);
 
   return pending ? <Spinner /> : children;
 }
@@ -34,7 +33,7 @@ export function AuthButtonClient({
 }: {
   isSignedIn?: boolean;
 }) {
-  const [, action] = useFormState(isSignedIn ? signOut : signIn, undefined);
+  const [, action] = useActionState(isSignedIn ? signOut : signIn, undefined);
 
   return (
     <form action={action} style={isSignedIn ? { lineHeight: 0 } : {}}>

src/app/page.tsx

@@ -2,7 +2,13 @@
 
 import { useChat, type Message as MessageType } from "ai/react";
 import { cloneDeep, debounce } from "lodash";
-import { ChangeEventHandler, useCallback, useRef, useState } from "react";
+import {
+  ChangeEventHandler,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
 import superjson from "superjson";
 import { loadJsonFile } from "../utils/loadJsonFile";
 import { saveJsonFile } from "../utils/saveJsonFile";
@@ -16,6 +22,7 @@ import { useScrollToTarget } from "@/hooks/useScrollToTarget";
 import { useHistory } from "@/hooks/useHistory";
 import { styled } from "../../styled-system/jsx";
 import { isDev } from "@/utils/consts";
+import useLocalStorageState from "use-local-storage-state";
 
 if (!isDev) {
   const buildInfo = process.env["NEXT_PUBLIC_BUILD_INFO"]?.split(",");
@@ -55,6 +62,9 @@ export default function Home() {
   const [showHistory, setShowHistory] = useState(false);
   const [showDeleteConfirmation, setShowDeleteConfirmation] = useState(false);
   const [activeHistoryEntry, setActiveHistoryEntry] = useState<MessageType[]>();
+  const [model, setModel] = useLocalStorageState<string>("model", {
+    defaultValue: "gpt-4-turbo",
+  });
   const [systemValue, setSystemValue] = useState(
     "You are a concise assistant.",
   );
@@ -72,8 +82,17 @@ export default function Home() {
   } = useChat({
     keepLastMessageOnError: true,
     initialMessages: [createSystemMessage(systemValue)],
+    body: {
+      model,
+    },
   });
 
+  useEffect(() => {
+    if (error) {
+      console.log(error);
+    }
+  }, [error]);
+
   const [conversationHistory, setConversationHistory] = useHistory(
     isLoading,
     messages,
@@ -115,9 +134,11 @@ export default function Home() {
     <>
       <Actions
         disabledHistoryActions={Object.keys(conversationHistory).length === 0}
+        model={model}
         onDeleteHistory={() => {
           setShowDeleteConfirmation(true);
         }}
+        onModelChange={setModel}
         onShowHistory={() => {
           setShowHistory(true);
         }}