Merge pull request #59 from dwhiffing/settings-modal

Moved Settings to modal
magiclabs · Sep 13, 2024 · f9eaf87 · f9eaf87
2 parents e6071d7 + 9c7a2dc
commit f9eaf87
Show file tree

Hide file tree

Showing 6 changed files with 316 additions and 240 deletions.
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,4 +1,5 @@
 import MagicProvider from "@/components/MagicProvider";
+import ChatProvider from "@/components/ChatProvider";
 import { Toaster } from "@/components/ui/sonner";
 
 import "./globals.css";
@@ -24,10 +25,12 @@ export default function RootLayout({
       </head>
       <body className={assistant.className}>
         <MagicProvider>
-          <div className="flex h-screen w-full flex-col bg-background">
-            {children}
-          </div>
-          <Toaster position="top-right" />
+          <ChatProvider>
+            <div className="flex h-screen w-full flex-col bg-background">
+              {children}
+            </div>
+            <Toaster position="top-right" />
+          </ChatProvider>
         </MagicProvider>
       </body>
     </html>

diff --git a/app/page.tsx b/app/page.tsx
@@ -11,19 +11,19 @@ import { useContracts } from "@/utils/useContracts";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { EditContractModal } from "@/components/EditContractModal";
 import { ConfirmAlert } from "@/components/ConfirmAlert";
+import { ChatSettingsModal } from "@/components/ChatSettingsModal";
+import { shortenAddress } from "@/utils/shortenAddress";
+import { toast } from "sonner";
+import { useChat } from "@/components/ChatProvider";
 
 export default function Page() {
   const { contracts } = useContracts();
   const [editContractKey, setEditContractKey] = useState<number | null>(null);
   const [isUploadModalOpen, setIsUploadModalOpen] = useState(false);
-  const {
-    magic,
-    teeWalletAddress,
-    isLoggedIn,
-    handleLogin,
-    handleLogout,
-    isLoading,
-  } = useMagic();
+  const [isSettingsModalOpen, setIsSettingsModalOpen] = useState(false);
+  const { teeWalletAddress, isLoggedIn, handleLogin, handleLogout, isLoading } =
+    useMagic();
+  const { modelName } = useChat();
 
   return (
     <div className="flex flex-col h-screen">
@@ -34,45 +34,36 @@ export default function Page() {
       ) : isLoggedIn ? (
         <>
           <div className="flex flex-1 overflow-hidden">
-            {/* Comment to hide side nav */}
-            {process.env.NODE_ENV === "development" && (
-              <div className="hidden w-96 flex-col border-r bg-card p-4 sm:flex">
-                <div className="grid gap-2 p-2 text-foreground">
-                  <div className="px-2 text-xs font-medium text-muted-foreground">
-                    Uploaded Contracts
-                  </div>
-
-                  <ScrollArea className="max-h-[calc(100vh-11rem)]">
-                    <div className="grid gap-2">
-                      {contracts.map((contract) => (
-                        <ContractItem
-                          key={contract.key}
-                          contract={contract}
-                          onEdit={() => setEditContractKey(contract.key)}
-                        />
-                      ))}
-                    </div>
-                  </ScrollArea>
-                  <Button onClick={() => setIsUploadModalOpen(true)}>
-                    Upload Contract
-                  </Button>
+            <div className="hidden w-72 md:w-96 flex-col border-r bg-card p-4 sm:flex">
+              <div className="grid gap-2 text-foreground">
+                <div className="px-2 text-xs font-medium text-muted-foreground">
+                  Uploaded Contracts
                 </div>
+
+                <ScrollArea className="max-h-[calc(100vh-11rem)]">
+                  <div className="grid gap-2">
+                    {contracts.map((contract) => (
+                      <ContractItem
+                        key={contract.key}
+                        contract={contract}
+                        onEdit={() => setEditContractKey(contract.key)}
+                      />
+                    ))}
+                  </div>
+                </ScrollArea>
+                <Button onClick={() => setIsUploadModalOpen(true)}>
+                  Upload Contract
+                </Button>
               </div>
-            )}
+            </div>
 
-            {/* Remove div with id=temp if enabling side nav */}
             <div id="temp" className="flex-1 overflow-hidden flex flex-col">
               {/* Top Navigation */}
-              <nav className="bg-background text-primary p-4 flex justify-between items-center">
+              <nav className="bg-background border-b text-primary p-4 flex justify-between items-center">
                 <h1 className="text-xl font-bold">Magic Chat Prototype</h1>
                 <div className="flex gap-4 items-center">
-                  {teeWalletAddress && (
-                    <p className="opacity-50 hidden md:block text-sm">
-                      TEE Wallet: {teeWalletAddress}
-                    </p>
-                  )}
-                  <Button onClick={() => magic?.wallet.showUI()}>
-                    Show Wallet
+                  <Button onClick={() => setIsSettingsModalOpen(true)}>
+                    Settings
                   </Button>
                   <ConfirmAlert
                     onConfirm={handleLogout}
@@ -82,10 +73,33 @@ export default function Page() {
                 </div>
               </nav>
 
-              <ChatWindow titleText="Magic Chat Prototype" />
+              <div className="flex-1">
+                <ChatWindow />
+              </div>
+
+              <div className="p-4 opacity-50 text-sm flex justify-between">
+                {teeWalletAddress && (
+                  <p
+                    className="cursor-pointer"
+                    onClick={() => {
+                      toast("Copied to clipboard");
+                      navigator.clipboard.writeText(teeWalletAddress);
+                    }}
+                  >
+                    Wallet Address: {shortenAddress(teeWalletAddress)}
+                  </p>
+                )}
+
+                <p>Model: {modelName}</p>
+              </div>
             </div>
           </div>
 
+          <ChatSettingsModal
+            isOpen={isSettingsModalOpen}
+            onClose={() => setIsSettingsModalOpen(false)}
+          />
+
           <EditContractModal
             contractKey={editContractKey}
             onClose={() => setEditContractKey(null)}

diff --git a/components/ChatProvider.tsx b/components/ChatProvider.tsx
@@ -0,0 +1,69 @@
+"use client";
+
+import { createContext, useContext, useState } from "react";
+import { UseChatHelpers, UseChatOptions, useChat as useAiChat } from "ai/react";
+import { MODELS } from "@/constants";
+import { useContracts } from "@/utils/useContracts";
+import { toast } from "sonner";
+
+export const ChatContext = createContext<
+  Pick<
+    UseChatOptions & UseChatHelpers,
+    "messages" | "handleInputChange" | "handleSubmit" | "isLoading" | "input"
+  > & {
+    modelName: string;
+    clearOnChange: boolean;
+    onClearMessages: () => void;
+    setModelName: (name: string) => void;
+    setClearOnChange: (v: boolean) => void;
+  }
+>({
+  messages: [],
+  handleInputChange: () => {},
+  handleSubmit: () => {},
+  isLoading: false,
+  input: "",
+  modelName: "",
+  clearOnChange: false,
+  onClearMessages: () => {},
+  setModelName: () => {},
+  setClearOnChange: () => {},
+});
+
+export const useChat = () => useContext(ChatContext);
+
+const ChatProvider = ({ children }: any) => {
+  const { disabledKeys } = useContracts();
+  const [modelName, setModelName] = useState(MODELS["openai"][0]);
+  const [clearOnChange, setClearOnChange] = useState(false);
+
+  const chatContext = useAiChat({
+    api: "api/chat",
+    body: { disabledContractKeys: disabledKeys, modelName },
+    streamProtocol: "text",
+    onError: (e) => {
+      toast(e.message);
+    },
+  });
+
+  const onClearMessages = () => {
+    chatContext.setMessages([]);
+  };
+
+  return (
+    <ChatContext.Provider
+      value={{
+        ...chatContext,
+        modelName,
+        setModelName,
+        clearOnChange,
+        setClearOnChange,
+        onClearMessages,
+      }}
+    >
+      {children}
+    </ChatContext.Provider>
+  );
+};
+
+export default ChatProvider;
diff --git a/components/ChatSettings.tsx b/components/ChatSettings.tsx