Correcting some bugs and working on responsive.

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 (
+        <Dialog>
+            <DialogTrigger asChild>
+                {props.children}
+            </DialogTrigger>
+            <DialogContent className="sm:max-w-[425px] w-full">
+                <DialogHeader>
+                    <DialogTitle>Agent Edge Key</DialogTitle>
+                </DialogHeader>
+                <div className="sm:max-w-[375px] w-full text-center">
+                    <CodeSnippet
+                        code={code}
+                        className="w-full overflow-x-auto break-words"
+                    />
+                </div>
+                <DialogFooter>
+                    <div className="flex items-center justify-between w-full">
+                        <CopyButton value={code}/>
+                        <Button type="submit">Save changes</Button>
+                    </div>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    );
+}

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 (
-        <div className="prose prose-invert">
-          <pre className="bg-[#1e1e1e] rounded-md p-4">
-            <code className="language-javascript text-[#d4d4d4]">{`
-           ${props.children}
-            `}</code>
-          </pre>
+        <div className="flex items-center space-x-4 w-full">
+            <code
+                className="text-xs sm:text-sm inline-flex text-left bg-gray-800 text-white rounded-lg p-4 overflow-x-auto whitespace-nowrap max-w-full"
+            >
+                <span className="flex-1">{props.code}</span>
+            </code>
         </div>
-    )
+    );
 }

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 (
+        <Button
+            // className={cn(buttonVariants({size: "sm"}))}
+            onClick={() => {
+                copyToClipboardWithMeta(value)
+                setHasCopied(true)
+            }}
+            {...props}
+        >
+            <span className="mr-2">Copy</span>
+            {hasCopied ? <CheckIcon/> : <Copy size="18"/>}
+        </Button>
+    )
+}

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