[WIP] feat: UI to allow users to manage different AI models

app/package.json

@@ -23,6 +23,7 @@
     "@capacitor/preferences": "^5.0.7",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-menubar": "^1.0.4",
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-slot": "^1.0.2",
     "@supabase/auth-helpers-nextjs": "^0.8.7",

app/src/components/Chat.tsx

@@ -1,21 +1,21 @@
+import { Label } from '@radix-ui/react-menubar';
 import { SupabaseClient } from '@supabase/supabase-js';
 import { useMutation, useQuery } from '@tanstack/react-query';
 import { useEffect, useRef, useState } from 'react';
 import { toast } from 'sonner';
 import { useSupabaseConfig } from '../utils/useSupabaseConfig';
 import ChatLog, { Message } from './ChatLog';
-import LogoutButton from './LogoutButton';
-import { NavMenu } from './NavMenu';
-import NewConversationButton from './NewConversationButton';
+import { useModelContext } from './ModelProvider';
+import { NewConversationMenuBar } from './NewConversationMenuBar';
 import PromptForm from './PromptForm';
 import SideMenu from './SideMenu';
-import { ThemeToggle } from './ThemeToggle';
 
 export default function Chat({
   supabaseClient,
 }: {
   supabaseClient: SupabaseClient;
 }) {
+  const { model } = useModelContext();
   const bottomRef = useRef<HTMLDivElement | null>(null);
   const textareaRef = useRef<HTMLTextAreaElement | null>(null);
 
@@ -199,22 +199,20 @@ export default function Chat({
   return (
     <>
       <div className="from-background fixed top-0 flex h-24 w-full items-center justify-between bg-gradient-to-b"></div>
-      <div className="fixed left-4 top-4 flex space-x-4">
+      <div className="fixed inset-0 flex p-4">
         <SideMenu
           supabaseClient={supabaseClient}
           setConversationId={setConversationId}
+          newConversation={newConversation}
         />
-      </div>
-      <div className="fixed right-4 top-4 flex space-x-4">
-        <NavMenu>
-          <LogoutButton supabaseClient={supabaseClient} />
-          <NewConversationButton
-            createNewConversation={() => {
-              newConversation.mutate();
-            }}
-          />
-          <ThemeToggle />
-        </NavMenu>
+        <div className="ml-auto">
+          <Label>Conversation ID: {conversationId}</Label>
+          <Label>
+            Model from context:
+            {model ? model : 'No model selected'}
+          </Label>
+          <NewConversationMenuBar newConversation={newConversation} />
+        </div>
       </div>
 
       <div className="mb-32 mt-12 p-8">

app/src/components/ConversationHistory.tsx

@@ -1,9 +1,9 @@
 import { range } from '@/utils/range';
 import { SupabaseClient } from '@supabase/supabase-js';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import { AnimatePresence, motion } from 'framer-motion';
 import { ArrowRight, Trash } from 'lucide-react';
 import { toast } from 'sonner';
+import { Button } from './ui/button';
 import { DrawerClose } from './ui/drawer';
 import { Skeleton } from './ui/skeleton';
 
@@ -74,56 +74,76 @@ export default function ConversationHistory({
     return `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`;
   };
 
-  return (
-    <AnimatePresence initial={false}>
-      <div className="max-h-[80vh] space-y-4 overflow-auto pr-2">
-        {getAllConversations.data && getAllConversations.data.length > 0
-          ? getAllConversations.data.map((conversation) => (
-              <motion.div
-                key={conversation.id}
-                className="card bg-muted/20 mb-2 flex rounded-xl px-4 py-3 shadow-sm"
-                initial={{ opacity: 0 }}
-                animate={{ opacity: 1 }}
-                exit={{ opacity: 0 }}
-              >
-                <div className="flex flex-col justify-between">
-                  <div>ID: {conversation.id}</div>
-                  <div className="text-sm text-gray-500">
-                    Created: {formatDate(conversation.created_at)}
-                  </div>
-                </div>
-                <div className="flex flex-col items-center justify-center pl-10">
-                  <DrawerClose>
-                    <ArrowRight
-                      size={20}
-                      onClick={() => setConversationId(conversation['id'])}
-                    />
-                  </DrawerClose>
-                  <Trash
-                    className="mt-2"
-                    size={20}
-                    onClick={() => deleteConversation.mutate(conversation.id)}
-                  />
-                </div>
-              </motion.div>
-            ))
-          : range(6).map((i) => <ItemSkeleton key={i} />)}
+  if (
+    !getAllConversations.data ||
+    (getAllConversations.data && getAllConversations.data.length <= 0)
+  ) {
+    return (
+      <div className="mr-2 space-y-4">
+        {range(12).map((i) => (
+          <Skeleton key={i} className="bg-muted/20 h-22 w-full rounded-xl" />
+        ))}
       </div>
-    </AnimatePresence>
+    );
+  }
+
+  return (
+    <div className="mr-2 space-y-2">
+      {getAllConversations.data.map((conversation) => {
+        return (
+          <ConversationHistoryItem
+            key={conversation.id}
+            conversation={conversation}
+            setConversationId={setConversationId}
+            deleteConversation={deleteConversation}
+          />
+        );
+      })}
+    </div>
   );
 }
 
-function ItemSkeleton() {
+function ConversationHistoryItem({
+  conversation,
+  setConversationId,
+  deleteConversation,
+}: {
+  conversation: Conversation;
+  setConversationId: (id: number) => void;
+  deleteConversation: { mutate: (id: number) => void };
+}) {
+  const formatDate = (dateString: string) => {
+    const date = new Date(dateString);
+    return `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`;
+  };
+
   return (
-    <Skeleton className="card bg-muted/20 mb-2 flex gap-8 rounded-xl px-4 py-3 shadow-sm">
-      <div className="flex flex-col justify-between gap-2">
-        <Skeleton className="h-4 w-[20vw]" />
-        <Skeleton className="h-4 w-[20vw]" />
+    <div key={conversation.id} className="bg-card flex rounded-xl px-4 py-3">
+      <div className="flex flex-col justify-evenly">
+        <div>Conversation ID: {conversation.id}</div>
+        <div className="text-sm text-gray-500">
+          Created: {formatDate(conversation.created_at)}
+        </div>
       </div>
-      <div className="ml-auto flex flex-col items-center justify-center gap-2">
-        <Skeleton className="size-[20px]" />
-        <Skeleton className="size-[20px]" />
+      <div className="ml-auto flex flex-col gap-2">
+        <DrawerClose>
+          <Button
+            size={'icon'}
+            variant={'ghost'}
+            onClick={() => setConversationId(conversation['id'])}
+          >
+            <ArrowRight size={20} />
+          </Button>
+        </DrawerClose>
+
+        <Button
+          size={'icon'}
+          variant={'ghost'}
+          onClick={() => deleteConversation.mutate(conversation.id)}
+        >
+          <Trash size={20} />
+        </Button>
       </div>
-    </Skeleton>
+    </div>
   );
 }

app/src/components/LogoutButton.tsx

@@ -9,11 +9,11 @@ export default function LogoutButton({
 }) {
   return (
     <Button
-      size={'icon'}
-      className="bg-muted/20 text-muted-foreground hover:bg-muted/40 rounded-full"
+      className="bg-muted/20 text-muted-foreground hover:bg-muted/40 flex justify-start rounded-full"
       onClick={async () => await supabaseClient.auth.signOut()}
     >
-      <LogOut size={20} />
+      Logout
+      <LogOut className="ml-auto" size={20} />
     </Button>
   );
 }