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] 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>
   );
 }