From b22b8a928698e51d7a13748c608b29285b7990bd Mon Sep 17 00:00:00 2001 From: charles-gauthereau Date: Sat, 23 Nov 2024 21:10:45 +0100 Subject: [PATCH] Correcting some bugs and working on responsive. --- .../dashboard/agents/[agentId]/page.tsx | 47 +++++++++-------- .../Agent/AgentModalKey/AgentModalKey.tsx | 52 +++++++++++++++++++ .../wrappers/CodeSnippet/CodeSnippet.tsx | 21 +++++--- src/components/wrappers/copy-button.tsx | 45 ++++++++++++++++ src/utils/edge_key.ts | 22 ++++++++ 5 files changed, 158 insertions(+), 29 deletions(-) create mode 100644 src/components/wrappers/Agent/AgentModalKey/AgentModalKey.tsx create mode 100644 src/components/wrappers/copy-button.tsx create mode 100644 src/utils/edge_key.ts diff --git a/app/(customer)/dashboard/agents/[agentId]/page.tsx b/app/(customer)/dashboard/agents/[agentId]/page.tsx index 9134d618..7be3c63a 100644 --- a/app/(customer)/dashboard/agents/[agentId]/page.tsx +++ b/app/(customer)/dashboard/agents/[agentId]/page.tsx @@ -1,6 +1,6 @@ import {PageParams} from "@/types/next"; import {Page, PageActions, PageContent, PageDescription, PageHeader, PageTitle} from "@/features/layout/page"; -import {Button} from "@/components/ui/button"; +import {Button, buttonVariants} from "@/components/ui/button"; import {Tabs, TabsContent, TabsList, TabsTrigger} from "@/components/ui/tabs"; import {Card, CardContent, CardHeader} from "@/components/ui/card"; import {backupColumns} from "@/features/backup/columns"; @@ -9,6 +9,8 @@ import {DataTableWithPagination} from "@/components/wrappers/table/data-table-wi import {prisma} from "@/prisma"; import {GearIcon} from "@radix-ui/react-icons"; import Link from "next/link"; +import {AgentModalKey} from "@/components/wrappers/Agent/AgentModalKey/AgentModalKey"; +import {KeyRound} from "lucide-react"; export default async function RoutePage(props: PageParams<{ agentId: string }>) { @@ -77,31 +79,34 @@ export default async function RoutePage(props: PageParams<{ agentId: string }>) return ( - - - {agent.name} - - - - - - - - - - - - {agent.description} - +
+ + {agent.name} + + + + + + + + + + + +
+ {agent.description} -
- +
+ Backups - + Success rate @@ -109,7 +114,7 @@ export default async function RoutePage(props: PageParams<{ agentId: string }>) {successRate ?? "Unavailable for now."} - + Last contact diff --git a/src/components/wrappers/Agent/AgentModalKey/AgentModalKey.tsx b/src/components/wrappers/Agent/AgentModalKey/AgentModalKey.tsx new file mode 100644 index 00000000..bcacf814 --- /dev/null +++ b/src/components/wrappers/Agent/AgentModalKey/AgentModalKey.tsx @@ -0,0 +1,52 @@ +"use client" +import {Button} from "@/components/ui/button" +import { + Dialog, + DialogContent, + DialogDescription, + DialogFooter, + DialogHeader, + DialogTitle, + DialogTrigger, +} from "@/components/ui/dialog" + +import {PropsWithChildren} from "types-react"; +import {CodeSnippet} from "@/components/wrappers/CodeSnippet/CodeSnippet"; +import {generateEdgeKey} from "@/utils/edge_key"; +import {Copy} from "lucide-react"; +import {useState} from "react"; +import {CopyButton} from "@/components/wrappers/copy-button"; + +export type agentRegistrationDialogProps = PropsWithChildren<{}> + + +export function AgentModalKey(props: agentRegistrationDialogProps) { + + const edge_key = generateEdgeKey('https://ok.com', '1234567'); + const code = `EDGE_KEY = ${edge_key}`; + + return ( + + + {props.children} + + + + Agent Edge Key + +
+ +
+ +
+ + +
+ + + + ); +} \ No newline at end of file diff --git a/src/components/wrappers/CodeSnippet/CodeSnippet.tsx b/src/components/wrappers/CodeSnippet/CodeSnippet.tsx index 623b451f..b3590620 100644 --- a/src/components/wrappers/CodeSnippet/CodeSnippet.tsx +++ b/src/components/wrappers/CodeSnippet/CodeSnippet.tsx @@ -1,17 +1,22 @@ import {PropsWithChildren} from "react"; +import {ClipboardCopy, Copy} from "lucide-react"; -export type CodeSnippetProps = PropsWithChildren<{}>; +export type CodeSnippetProps = PropsWithChildren<{ + code: string +}>; export const CodeSnippet = (props: CodeSnippetProps) => { + + return ( -
- 
-            {`
-           ${props.children}
-            `}
-
+
+ + {props.code} +
- ) + ); } \ No newline at end of file diff --git a/src/components/wrappers/copy-button.tsx b/src/components/wrappers/copy-button.tsx new file mode 100644 index 00000000..96e5fd5e --- /dev/null +++ b/src/components/wrappers/copy-button.tsx @@ -0,0 +1,45 @@ +"use client" + +import {useEffect, useState} from "react"; +import {CheckIcon, ClipboardIcon, Copy} from "lucide-react"; +import {Button, buttonVariants} from "@/components/ui/button"; +import {cn} from "@/lib/utils"; +import {useTranslations} from "use-intl"; + + +export async function copyToClipboardWithMeta(value: string) { + navigator.clipboard.writeText(value) +} + + +export type CopyButtonProps = { + value: string +} + + +export const CopyButton = (props: CopyButtonProps) => { + + const {value} = props + + const [hasCopied, setHasCopied] = useState(false) + + useEffect(() => { + setTimeout(() => { + setHasCopied(false) + }, 2000) + }, [hasCopied]) + + return ( + + ) +} \ No newline at end of file diff --git a/src/utils/edge_key.ts b/src/utils/edge_key.ts new file mode 100644 index 00000000..3d405fb8 --- /dev/null +++ b/src/utils/edge_key.ts @@ -0,0 +1,22 @@ + +export function generateEdgeKey(serverUrl: string, agentId: string): string { + const edgeKeyData = { + serverUrl, + agentId, + }; + const edgeKeyJson = JSON.stringify(edgeKeyData); + const edgeKeyBuffer = Buffer.from(edgeKeyJson, 'utf-8'); + const edgeKeyBase64 = edgeKeyBuffer.toString('base64').replace(/=+$/, '').replace(/\+/g, '-').replace(/\//g, '_'); + return edgeKeyBase64; +} + +function decodeEdgeKey(edgeKey: string): object { + let edgeKeyWithPadding = edgeKey.replace(/-/g, '+').replace(/_/g, '/'); + const paddingNeeded = edgeKeyWithPadding.length % 4; + if (paddingNeeded !== 0) { + edgeKeyWithPadding += '='.repeat(4 - paddingNeeded); + } + const edgeKeyBuffer = Buffer.from(edgeKeyWithPadding, 'base64'); + const edgeKeyJson = edgeKeyBuffer.toString('utf-8'); + return JSON.parse(edgeKeyJson); +}