From 2e2e7eb053e860ab7d19869d5129b0626f4a301b Mon Sep 17 00:00:00 2001
From: Daniel Whiffing <danielwhiffing@gmail.com>
Date: Fri, 13 Sep 2024 14:37:07 -0400
Subject: [PATCH 1/4] Changes chat settings to modal

---
 app/page.tsx                |  23 ++++----
 components/ChatSettings.tsx | 106 +++++++++++++++++++++---------------
 components/ChatWindow.tsx   |  16 +++---
 3 files changed, 81 insertions(+), 64 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index 34827be..ab60e28 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -16,14 +16,9 @@ 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();
 
   return (
     <div className="flex flex-col h-screen">
@@ -37,7 +32,7 @@ export default function Page() {
             {/* 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="grid gap-2 text-foreground">
                   <div className="px-2 text-xs font-medium text-muted-foreground">
                     Uploaded Contracts
                   </div>
@@ -71,8 +66,9 @@ export default function Page() {
                       TEE Wallet: {teeWalletAddress}
                     </p>
                   )}
-                  <Button onClick={() => magic?.wallet.showUI()}>
-                    Show Wallet
+
+                  <Button onClick={() => setIsSettingsModalOpen(true)}>
+                    Settings
                   </Button>
                   <ConfirmAlert
                     onConfirm={handleLogout}
@@ -82,7 +78,10 @@ export default function Page() {
                 </div>
               </nav>
 
-              <ChatWindow titleText="Magic Chat Prototype" />
+              <ChatWindow
+                isSettingsOpen={isSettingsModalOpen}
+                onCloseSettings={() => setIsSettingsModalOpen(false)}
+              />
             </div>
           </div>
 
diff --git a/components/ChatSettings.tsx b/components/ChatSettings.tsx
index 4d9ad82..335c735 100644
--- a/components/ChatSettings.tsx
+++ b/components/ChatSettings.tsx
@@ -13,7 +13,18 @@ import { Checkbox } from "./ui/checkbox";
 import { MODELS } from "@/constants";
 import { findInferenceByModelName } from "@/utils/utils";
 
+import { Button } from "./ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogTitle,
+  DialogHeader,
+  DialogFooter,
+} from "./ui/dialog";
+
 type IChatSettingProps = {
+  isOpen: boolean;
+  onClose: () => void;
   clearOnChange: boolean;
   onClearOnChange: (value: boolean) => void;
   modelName: string;
@@ -32,59 +43,68 @@ export function ChatSettings(props: IChatSettingProps) {
   };
 
   return (
-    <div className="w-80 border-l p-4 overflow-y-auto">
-      <h3 className="font-semibold mb-4">Settings</h3>
-      <div className="space-y-4">
-        <div>
-          <Label htmlFor="inferenceProvider">Inference</Label>
-          <Select
-            value={inferenceProvider}
-            onValueChange={handleInferenceProviderChange}
-          >
-            <SelectTrigger id="modelName">
-              <SelectValue placeholder="Select a provider" />
-            </SelectTrigger>
-            <SelectContent>
-              {Object.keys(MODELS).map((i) => (
-                <SelectItem key={i} value={i}>
-                  {i}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </div>
-        {inferenceProvider && (
+    <Dialog open={props.isOpen} onOpenChange={props.onClose}>
+      <DialogContent className="">
+        <DialogHeader>
+          <DialogTitle>Settings</DialogTitle>
+        </DialogHeader>
+
+        <div className="flex w-full flex-col gap-4 mt-4">
           <div>
-            <Label htmlFor="modelName">Model</Label>
-            <Select value={modelName} onValueChange={onModelNameChange}>
+            <Label htmlFor="inferenceProvider">Inference</Label>
+            <Select
+              value={inferenceProvider}
+              onValueChange={handleInferenceProviderChange}
+            >
               <SelectTrigger id="modelName">
-                <SelectValue placeholder="Select a model" />
+                <SelectValue placeholder="Select a provider" />
               </SelectTrigger>
               <SelectContent>
-                {MODELS[inferenceProvider].map((modelName) => (
-                  <SelectItem key={modelName} value={modelName}>
-                    {modelName}
+                {Object.keys(MODELS).map((i) => (
+                  <SelectItem key={i} value={i}>
+                    {i}
                   </SelectItem>
                 ))}
               </SelectContent>
             </Select>
           </div>
-        )}
+          {inferenceProvider && (
+            <div>
+              <Label htmlFor="modelName">Model</Label>
+              <Select value={modelName} onValueChange={onModelNameChange}>
+                <SelectTrigger id="modelName">
+                  <SelectValue placeholder="Select a model" />
+                </SelectTrigger>
+                <SelectContent>
+                  {MODELS[inferenceProvider].map((modelName) => (
+                    <SelectItem key={modelName} value={modelName}>
+                      {modelName}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          )}
+
+          <div className="flex items-center space-x-2">
+            <Checkbox
+              id="terms"
+              checked={clearOnChange}
+              onCheckedChange={onClearOnChange}
+            />
+            <label
+              htmlFor="terms"
+              className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+            >
+              Clear Chat on Model change
+            </label>
+          </div>
 
-        <div className="flex items-center space-x-2">
-          <Checkbox
-            id="terms"
-            checked={clearOnChange}
-            onCheckedChange={onClearOnChange}
-          />
-          <label
-            htmlFor="terms"
-            className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-          >
-            Clear Chat on Model change
-          </label>
+          <DialogFooter>
+            <Button onClick={props.onClose}>Close</Button>
+          </DialogFooter>
         </div>
-      </div>
-    </div>
+      </DialogContent>
+    </Dialog>
   );
 }
diff --git a/components/ChatWindow.tsx b/components/ChatWindow.tsx
index 5e57bae..283d3b6 100644
--- a/components/ChatWindow.tsx
+++ b/components/ChatWindow.tsx
@@ -5,13 +5,7 @@ import { useChat } from "ai/react";
 import { useEffect, useRef, useState, type FormEvent } from "react";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
-import {
-  Card,
-  CardHeader,
-  CardContent,
-  CardFooter,
-  CardTitle,
-} from "@/components/ui/card";
+import { Card, CardContent, CardFooter } from "@/components/ui/card";
 import { ChatMessageBubble } from "@/components/ChatMessageBubble";
 import { LoadingIcon } from "@/components/LoadingIcon";
 import { Label } from "@/components/ui/label";
@@ -21,8 +15,10 @@ import { useContracts } from "@/utils/useContracts";
 import { ChatSettings } from "./ChatSettings";
 import { MODELS } from "@/constants";
 
-export function ChatWindow(props: { titleText?: string }) {
-  const { titleText } = props;
+export function ChatWindow(props: {
+  isSettingsOpen: boolean;
+  onCloseSettings: () => void;
+}) {
   const chatContainerRef = useRef<HTMLDivElement>(null);
   const { disabledKeys } = useContracts();
   const [modelName, setModelName] = useState(MODELS["openai"][0]);
@@ -157,6 +153,8 @@ export function ChatWindow(props: { titleText?: string }) {
         </CardFooter>
       </Card>
       <ChatSettings
+        isOpen={props.isSettingsOpen}
+        onClose={props.onCloseSettings}
         clearOnChange={clearOnChange}
         onClearOnChange={setClearOnChange}
         modelName={modelName}

From 2f70bd194ed4dfe360c754937549ad381cd094a9 Mon Sep 17 00:00:00 2001
From: Daniel Whiffing <danielwhiffing@gmail.com>
Date: Fri, 13 Sep 2024 15:01:18 -0400
Subject: [PATCH 2/4] Adds ChatContext

---
 app/layout.tsx                                | 11 +--
 app/page.tsx                                  | 11 +--
 components/ChatProvider.tsx                   | 69 +++++++++++++++++++
 ...ChatSettings.tsx => ChatSettingsModal.tsx} | 28 +++++---
 components/ChatWindow.tsx                     | 46 ++-----------
 5 files changed, 107 insertions(+), 58 deletions(-)
 create mode 100644 components/ChatProvider.tsx
 rename components/{ChatSettings.tsx => ChatSettingsModal.tsx} (85%)

diff --git a/app/layout.tsx b/app/layout.tsx
index c24dc17..d776f1d 100644
--- 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
index ab60e28..d4c19fd 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -11,6 +11,7 @@ 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";
 
 export default function Page() {
   const { contracts } = useContracts();
@@ -78,13 +79,15 @@ export default function Page() {
                 </div>
               </nav>
 
-              <ChatWindow
-                isSettingsOpen={isSettingsModalOpen}
-                onCloseSettings={() => setIsSettingsModalOpen(false)}
-              />
+              <ChatWindow />
             </div>
           </div>
 
+          <ChatSettingsModal
+            isOpen={isSettingsModalOpen}
+            onClose={() => setIsSettingsModalOpen(false)}
+          />
+
           <EditContractModal
             contractKey={editContractKey}
             onClose={() => setEditContractKey(null)}
diff --git a/components/ChatProvider.tsx b/components/ChatProvider.tsx
new file mode 100644
index 0000000..5468469
--- /dev/null
+++ 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/ChatSettingsModal.tsx
similarity index 85%
rename from components/ChatSettings.tsx
rename to components/ChatSettingsModal.tsx
index 335c735..569808a 100644
--- a/components/ChatSettings.tsx
+++ b/components/ChatSettingsModal.tsx
@@ -21,19 +21,29 @@ import {
   DialogHeader,
   DialogFooter,
 } from "./ui/dialog";
+import { useChat } from "./ChatProvider";
 
 type IChatSettingProps = {
   isOpen: boolean;
   onClose: () => void;
-  clearOnChange: boolean;
-  onClearOnChange: (value: boolean) => void;
-  modelName: string;
-  onModelNameChange: (value: string) => void;
 };
 
-export function ChatSettings(props: IChatSettingProps) {
-  const { modelName, onModelNameChange, clearOnChange, onClearOnChange } =
-    props;
+export function ChatSettingsModal(props: IChatSettingProps) {
+  const {
+    modelName,
+    setModelName,
+    onClearMessages,
+    clearOnChange,
+    setClearOnChange,
+  } = useChat();
+
+  const onSetModelName = (value: string) => {
+    if (clearOnChange) {
+      onClearMessages();
+    }
+    setModelName(value);
+  };
+
   const [inferenceProvider, setInferenceProvider] = useState(() => {
     return findInferenceByModelName(modelName);
   });
@@ -71,7 +81,7 @@ export function ChatSettings(props: IChatSettingProps) {
           {inferenceProvider && (
             <div>
               <Label htmlFor="modelName">Model</Label>
-              <Select value={modelName} onValueChange={onModelNameChange}>
+              <Select value={modelName} onValueChange={onSetModelName}>
                 <SelectTrigger id="modelName">
                   <SelectValue placeholder="Select a model" />
                 </SelectTrigger>
@@ -90,7 +100,7 @@ export function ChatSettings(props: IChatSettingProps) {
             <Checkbox
               id="terms"
               checked={clearOnChange}
-              onCheckedChange={onClearOnChange}
+              onCheckedChange={setClearOnChange}
             />
             <label
               htmlFor="terms"
diff --git a/components/ChatWindow.tsx b/components/ChatWindow.tsx
index 283d3b6..fac7c02 100644
--- a/components/ChatWindow.tsx
+++ b/components/ChatWindow.tsx
@@ -1,8 +1,6 @@
 "use client";
 
-import { toast } from "sonner";
-import { useChat } from "ai/react";
-import { useEffect, useRef, useState, type FormEvent } from "react";
+import { useEffect, useRef, type FormEvent } from "react";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardFooter } from "@/components/ui/card";
@@ -11,34 +9,19 @@ import { LoadingIcon } from "@/components/LoadingIcon";
 import { Label } from "@/components/ui/label";
 import { CornerDownLeft, Trash2 } from "lucide-react";
 import { ConfirmAlert } from "./ConfirmAlert";
-import { useContracts } from "@/utils/useContracts";
-import { ChatSettings } from "./ChatSettings";
-import { MODELS } from "@/constants";
+import { useChat } from "./ChatProvider";
 
-export function ChatWindow(props: {
-  isSettingsOpen: boolean;
-  onCloseSettings: () => void;
-}) {
+export function ChatWindow() {
   const chatContainerRef = useRef<HTMLDivElement>(null);
-  const { disabledKeys } = useContracts();
-  const [modelName, setModelName] = useState(MODELS["openai"][0]);
-  const [clearOnChange, setClearOnChange] = useState(false);
 
   const {
     messages,
     input,
     handleInputChange,
     handleSubmit,
-    setMessages,
+    onClearMessages,
     isLoading,
-  } = useChat({
-    api: "api/chat",
-    body: { disabledContractKeys: disabledKeys, modelName },
-    streamProtocol: "text",
-    onError: (e) => {
-      toast(e.message);
-    },
-  });
+  } = useChat();
 
   const scrollToBottom = () => {
     if (chatContainerRef.current) {
@@ -77,17 +60,6 @@ export function ChatWindow(props: {
     handleSubmit(e);
   }
 
-  const onClearMessages = () => {
-    setMessages([]);
-  };
-
-  const onModelNameChange = (value: string) => {
-    if (clearOnChange) {
-      onClearMessages();
-    }
-    setModelName(value);
-  };
-
   return (
     <div className="flex border-t">
       <Card className="flex grow flex-col h-[calc(100vh-6rem)] border-none shadow-none">
@@ -152,14 +124,6 @@ export function ChatWindow(props: {
           </form>
         </CardFooter>
       </Card>
-      <ChatSettings
-        isOpen={props.isSettingsOpen}
-        onClose={props.onCloseSettings}
-        clearOnChange={clearOnChange}
-        onClearOnChange={setClearOnChange}
-        modelName={modelName}
-        onModelNameChange={onModelNameChange}
-      />
     </div>
   );
 }

From 0bf74ea65b1b6c2b8dd21ef1843ac5f1cd8af615 Mon Sep 17 00:00:00 2001
From: Daniel Whiffing <danielwhiffing@gmail.com>
Date: Fri, 13 Sep 2024 16:16:41 -0400
Subject: [PATCH 3/4] Displays tee address and model name below input.  Makes
 wallet address shorter and clickable to copy address

---
 app/page.tsx              |  76 ++++++++++++++----------
 components/ChatWindow.tsx | 120 +++++++++++++++++++-------------------
 2 files changed, 103 insertions(+), 93 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index d4c19fd..60e0e8c 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -12,6 +12,9 @@ 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();
@@ -20,6 +23,7 @@ export default function Page() {
   const [isSettingsModalOpen, setIsSettingsModalOpen] = useState(false);
   const { teeWalletAddress, isLoggedIn, handleLogin, handleLogout, isLoading } =
     useMagic();
+  const { modelName } = useChat();
 
   return (
     <div className="flex flex-col h-screen">
@@ -30,44 +34,34 @@ 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 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={() => setIsSettingsModalOpen(true)}>
                     Settings
                   </Button>
@@ -79,7 +73,25 @@ export default function Page() {
                 </div>
               </nav>
 
-              <ChatWindow />
+              <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>
 
diff --git a/components/ChatWindow.tsx b/components/ChatWindow.tsx
index fac7c02..34cbcab 100644
--- a/components/ChatWindow.tsx
+++ b/components/ChatWindow.tsx
@@ -61,69 +61,67 @@ export function ChatWindow() {
   }
 
   return (
-    <div className="flex border-t">
-      <Card className="flex grow flex-col h-[calc(100vh-6rem)] border-none shadow-none">
-        <CardContent className="flex-grow overflow-hidden p-0">
-          <div className="flex h-full">
-            <div ref={chatContainerRef} className="flex-1 p-4 overflow-y-auto">
-              <div className="grid gap-4">
-                {messages.length > 0
-                  ? messages.map((m) => (
-                      <ChatMessageBubble key={m.id} message={m} />
-                    ))
-                  : null}
-              </div>
+    <Card className="flex grow flex-col h-full border-none shadow-none">
+      <CardContent className="flex-grow overflow-hidden p-0">
+        <div className="flex h-full">
+          <div ref={chatContainerRef} className="flex-1 p-4 overflow-y-auto">
+            <div className="grid gap-4">
+              {messages.length > 0
+                ? messages.map((m) => (
+                    <ChatMessageBubble key={m.id} message={m} />
+                  ))
+                : null}
             </div>
           </div>
-        </CardContent>
-        <CardFooter className="pb-0">
-          <form
-            onSubmit={sendMessage}
-            className="w-full relative overflow-hidden rounded-lg border bg-background"
-          >
-            <Label htmlFor="message" className="sr-only">
-              Message
-            </Label>
-            <Input
-              id="message"
-              className="min-h-12 border-0 p-3 pb-2 shadow-none focus-visible:ring-0"
-              value={input}
-              placeholder="Type your message here..."
-              onChange={handleInputChange}
+        </div>
+      </CardContent>
+      <CardFooter className="pb-0 px-4">
+        <form
+          onSubmit={sendMessage}
+          className="w-full relative overflow-hidden rounded-lg border bg-background"
+        >
+          <Label htmlFor="message" className="sr-only">
+            Message
+          </Label>
+          <Input
+            id="message"
+            className="min-h-12 border-0 p-3 pb-2 shadow-none focus-visible:ring-0"
+            value={input}
+            placeholder="Type your message here..."
+            onChange={handleInputChange}
+          />
+          <div className="flex items-center p-2 pt-0">
+            <ConfirmAlert
+              onConfirm={onClearMessages}
+              description="This will clear out your chat history"
+              button={
+                <Button variant="ghost" size="icon" title="Clear messages">
+                  <Trash2 strokeWidth={1.5} size={20} />
+                  <span className="sr-only">Clear messages</span>
+                </Button>
+              }
             />
-            <div className="flex items-center p-2 pt-0">
-              <ConfirmAlert
-                onConfirm={onClearMessages}
-                description="This will clear out your chat history"
-                button={
-                  <Button variant="ghost" size="icon" title="Clear messages">
-                    <Trash2 strokeWidth={1.5} size={20} />
-                    <span className="sr-only">Clear messages</span>
-                  </Button>
-                }
-              />
-              <Button
-                type="submit"
-                size="sm"
-                className="ml-auto gap-1.5"
-                disabled={isLoading}
-              >
-                {isLoading ? (
-                  <div role="status" className="flex justify-center">
-                    <LoadingIcon />
-                    <span className="sr-only">Loading...</span>
-                  </div>
-                ) : (
-                  <>
-                    Send
-                    <CornerDownLeft strokeWidth={1.5} size={20} />
-                  </>
-                )}
-              </Button>
-            </div>
-          </form>
-        </CardFooter>
-      </Card>
-    </div>
+            <Button
+              type="submit"
+              size="sm"
+              className="ml-auto gap-1.5"
+              disabled={isLoading}
+            >
+              {isLoading ? (
+                <div role="status" className="flex justify-center">
+                  <LoadingIcon />
+                  <span className="sr-only">Loading...</span>
+                </div>
+              ) : (
+                <>
+                  Send
+                  <CornerDownLeft strokeWidth={1.5} size={20} />
+                </>
+              )}
+            </Button>
+          </div>
+        </form>
+      </CardFooter>
+    </Card>
   );
 }

From 9c7a2dc906f5dc62bc6ee536112a025b20dc6744 Mon Sep 17 00:00:00 2001
From: Daniel Whiffing <danielwhiffing@gmail.com>
Date: Fri, 13 Sep 2024 17:16:34 -0400
Subject: [PATCH 4/4] Fixes scroll

---
 components/ChatWindow.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/ChatWindow.tsx b/components/ChatWindow.tsx
index 34cbcab..7ad546a 100644
--- a/components/ChatWindow.tsx
+++ b/components/ChatWindow.tsx
@@ -61,7 +61,7 @@ export function ChatWindow() {
   }
 
   return (
-    <Card className="flex grow flex-col h-full border-none shadow-none">
+    <Card className="flex grow flex-col h-[calc(100vh-8rem)] border-none shadow-none">
       <CardContent className="flex-grow overflow-hidden p-0">
         <div className="flex h-full">
           <div ref={chatContainerRef} className="flex-1 p-4 overflow-y-auto">