Skip to content

Commit

Permalink
Displays tee address and model name below input. Makes wallet address…
Browse files Browse the repository at this point in the history 
… shorter and clickable to copy address
  • Loading branch information
@dwhiffing
dwhiffing committed Sep 13, 2024
1 parent 2f70bd1 commit 0bf74ea
Show file tree
Hide file tree
Showing 2 changed files with 103 additions and 93 deletions.
76 changes: 44 additions & 32 deletions app/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -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">
Expand All @@ -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>
Expand All @@ -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>

Expand Down
120 changes: 59 additions & 61 deletions components/ChatWindow.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
}

0 comments on commit 0bf74ea

Please sign in to comment.