@promptbook/cli 0.104.0-9 → 0.104.0

package/apps/agents-server/src/app/agents/[agentName]/book+chat/AgentBookAndChatComponent.tsx.todo

@@ -1,160 +0,0 @@
-'use client';
-
-import { ResizablePanelsAuto } from '@common/components/ResizablePanelsAuto/ResizablePanelsAuto';
-import { useStateInLocalStorage } from '@common/hooks/useStateInLocalStorage';
-import { AgentChat, BookEditor } from '@promptbook-local/components';
-import { Agent, book } from '@promptbook-local/core';
-// import { RemoteLlmExecutionTools } from '@promptbook-local/remote-client';
-import { OpenAiAssistantExecutionTools } from '@promptbook-local/openai';
-import type { string_book } from '@promptbook-local/types';
-import { useMemo, useState } from 'react';
-
-export function AgentBookAndChatComponent() {
-    const [apiKey, setApiKey] = useStateInLocalStorage<string>('openai-apiKey', () => '');
-    const [isApiKeyVisible, setIsApiKeyVisible] = useState(false);
-    const [isApiKeySectionCollapsed, setIsApiKeySectionCollapsed] = useState(!!apiKey);
-
-    const [agentSource, setAgentSource] = useStateInLocalStorage<string_book>(
-        'marigold-agentSource-1',
-        // TODO: [🐱‍🚀] Uplad image to ptbk.io CDN
-        () => book`
-            Marigold
-
-            META IMAGE https://westlandsuk.co.uk/wp-content/uploads/2021/06/Inspired.MarigoldFlowers_CMYK_40mm.jpg
-            META COLOR #EC810B
-
-            PERSONA You are writing stories about Witcher
-            RULE Do not talk about our world, only about the Witcher universe
-
-            KNOWLEDGE {Geralt of Rivia}
-            Geralt of Rivia is a witcher, a monster hunter for hire, known for his white hair and cat-like eyes.
-            He possesses superhuman abilities due to mutations he underwent during the Trial of the Grasses.
-            Geralt is skilled in swordsmanship, alchemy, and magic signs.
-            He is often accompanied by his horse, Roach, and has a complex relationship with {Yennefer of Vengerberg},
-            a powerful sorceress, and {Ciri}, his adopted daughter with a destiny intertwined with his own.
-            His secret word is "Apple".
-
-            KNOWLEDGE {Yennefer of Vengerberg}
-            Yennefer of Vengerberg is a formidable sorceress known for her beauty, intelligence, and temper.
-            She has a complicated past, having been born with a hunchback and later transformed through magic.
-            Yennefer is deeply connected to Geralt of Rivia, with whom she shares a tumultuous romantic relationship.
-            She is also a mother figure to {Ciri}, whom she trains in the ways of magic.
-            Her secret word is "Banana".
-
-            KNOWLEDGE {Ciri}
-            Ciri, also known as {Cirilla Fiona Elen Riannon}, is a young woman with a mysterious past and a powerful destiny.
-            She is the daughter of {Poviss}, the ruler of the kingdom of Cintra, and possesses the Elder Blood, which grants her extraordinary abilities.
-            Ciri is a skilled fighter and has been trained in the ways of the sword by Geralt of Rivia.
-            Her destiny is intertwined with that of Geralt and Yennefer, as they both seek to protect her from those who would exploit her powers.
-            Her secret word is "Cherry".
-            
-        `,
-    );
-
-    const agent = useMemo(() => {
-        /*/
-        // TODO: [🐱‍🚀] Try working with `RemoteLlmExecutionTools`
-        const llm = new RemoteLlmExecutionTools({
-            remoteServerUrl: 'https://promptbook.s5.ptbk.io/',
-            identification: {
-                isAnonymous: false,
-                appId: '20a65fee-59f6-4d05-acd0-8e5ae8345488',
-            },
-        });
-        /**/
-
-        /**/
-        const llm = new OpenAiAssistantExecutionTools({
-            dangerouslyAllowBrowser: true,
-            isCreatingNewAssistantsAllowed: true, // <- TODO: [🐱‍🚀] Test without whether warning is shown
-            apiKey,
-            assistantId: 'asst_xI94Elk27nssnwAUkG2Cmok8', // <- TODO: [🧠] Make dynamic
-            isVerbose: true,
-        });
-        /**/
-
-        const agent = new Agent({
-            executionTools: {
-                llm,
-            },
-            agentSource: [agentSource, setAgentSource],
-            isVerbose: true,
-        });
-
-        return agent;
-    }, [agentSource, setAgentSource, apiKey]);
-
-    return (
-        <div className="min-h-screen relative">
-            {/* Floating API Key Configuration */}
-            <div className={`fixed top-24 right-4 z-50 ${isApiKeySectionCollapsed ? '' : 'min-w-[400px]'}`}>
-                {isApiKeySectionCollapsed ? (
-                    // Collapsed state - small corner button
-                    <button
-                        onClick={() => setIsApiKeySectionCollapsed(false)}
-                        className="bg-gray-100 hover:bg-gray-200 border border-gray-300 rounded-full p-2 shadow-lg transition-all flex items-center gap-1"
-                        title="Configure OpenAI API Key"
-                    >
-                        <span className="text-sm">🔑</span>
-                    </button>
-                ) : (
-                    // Expanded state - full configuration panel
-                    <div className="bg-white border border-gray-300 rounded-lg shadow-lg">
-                        <div className="flex items-center justify-between p-3 bg-gray-100 rounded-t-lg border-b border-gray-300">
-                            <span className="font-medium text-sm">OpenAI API Key</span>
-                            <button
-                                onClick={() => setIsApiKeySectionCollapsed(true)}
-                                className="text-gray-600 hover:text-gray-800 text-lg leading-none"
-                                title="Collapse"
-                            >
-                                ✕
-                            </button>
-                        </div>
-                        <div className="p-3">
-                            <label className="flex items-center gap-2">
-                                <span className="text-sm font-medium whitespace-nowrap">API Key:</span>
-                                <input
-                                    type={isApiKeyVisible ? 'text' : 'password'}
-                                    value={apiKey}
-                                    onChange={(e) => setApiKey(e.target.value)}
-                                    placeholder="sk-proj-..."
-                                    className="flex-1 px-3 py-2 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-                                />
-                                <button
-                                    type="button"
-                                    onClick={() => setIsApiKeyVisible(!isApiKeyVisible)}
-                                    className="px-2 py-2 bg-white border border-gray-300 rounded-md hover:bg-gray-50 transition-colors text-sm"
-                                    title={isApiKeyVisible ? 'Hide API key' : 'Show API key'}
-                                >
-                                    {isApiKeyVisible ? '🙈' : '👁️'}
-                                </button>
-                            </label>
-                        </div>
-                    </div>
-                )}
-            </div>
-
-            <ResizablePanelsAuto name="two-editors">
-                <BookEditor
-                    className="w-full h-full"
-                    isBorderRadiusDisabled
-                    height={null}
-                    value={agentSource}
-                    onChange={setAgentSource}
-                    // className={styles.BookEditor}
-                    isVerbose={false}
-                    onFileUpload={(file) => {
-                        return file.name;
-                    }}
-                />
-
-                <AgentChat className={`h-full flex flex-col`} {...{ agent }} />
-            </ResizablePanelsAuto>
-        </div>
-    );
-}
-
-/**
- * TODO: [🐱‍🚀] Make self-learning book createAgentLlmExecutionTools, use bidirectional agentSource
- * TODO: [🚗] Components and pages here should be just tiny UI wraper around proper agent logic and conponents
- */

package/apps/agents-server/src/app/agents/[agentName]/book+chat/page.tsx

@@ -1,45 +0,0 @@
-'use server';
-
-import { ForbiddenPage } from '@/src/components/ForbiddenPage/ForbiddenPage';
-import { $provideAgentCollectionForServer } from '@/src/tools/$provideAgentCollectionForServer';
-import { isUserAdmin } from '@/src/utils/isUserAdmin';
-import { headers } from 'next/headers';
-import { $sideEffect } from '../../../../../../../src/utils/organization/$sideEffect';
-import { isAgentDeleted } from '../_utils';
-import { generateAgentMetadata } from '../generateAgentMetadata';
-import { AgentBookAndChat } from './AgentBookAndChat';
-import { DeletedAgentBanner } from '../../../../components/DeletedAgentBanner';
-
-export const generateMetadata = generateAgentMetadata;
-
-export default async function AgentBookAndChatPage({ params }: { params: Promise<{ agentName: string }> }) {
-    $sideEffect(headers());
-
-    let { agentName } = await params;
-    agentName = decodeURIComponent(agentName);
-
-    const isDeleted = await isAgentDeleted(agentName);
-
-    if (isDeleted) {
-        return (
-            <div className="w-screen h-[calc(100vh-60px)] flex items-center justify-center p-8">
-                <DeletedAgentBanner />
-            </div>
-        );
-    }
-
-    if (!(await isUserAdmin())) {
-        /* <- TODO: [👹] Here should be user permissions */
-        return <ForbiddenPage />;
-    }
-
-    const collection = await $provideAgentCollectionForServer();
-    const agentSource = await collection.getAgentSource(agentName);
-    const agentUrl = `/agents/${agentName}`;
-
-    return (
-        <div className={`w-screen h-[calc(100vh-60px)]`}>
-            <AgentBookAndChat agentName={agentName} initialAgentSource={agentSource} agentUrl={agentUrl} />
-        </div>
-    );
-}

package/apps/agents-server/src/app/agents/[agentName]/book+chat/page.tsx.todo

@@ -1,21 +0,0 @@
-'use client';
-
-import dynamic from 'next/dynamic';
-
-const SelfLearningBook = dynamic(
-    () => import('./AgentBookAndChatComponent').then((module) => module.AgentBookAndChatComponent),
-    {
-        ssr: false,
-    },
-);
-
-export default function AgentBookAndChatPage() {
-    return <SelfLearningBook />;
-}
-
-/**
- * TODO: [🐱‍🚀] Private / public / open agents
- * TODO: [🐱‍🚀] Allow http://localhost:4440/agents/agent-123.book to download the agent book file
- * TODO: [🐱‍🚀] BOOK_MIME_TYPE in config
- * TODO: [🚗] Components and pages here should be just tiny UI wraper around proper agent logic and conponents
- */

package/apps/agents-server/src/app/agents/[agentName]/chat/AgentChatWrapper.tsx

@@ -1,68 +0,0 @@
-'use client';
-
-import { usePromise } from '@common/hooks/usePromise';
-import { AgentChat } from '@promptbook-local/components';
-import { RemoteAgent } from '@promptbook-local/core';
-import { useCallback, useMemo } from 'react';
-import { string_agent_url } from '../../../../../../../src/types/typeAliases';
-
-type AgentChatWrapperProps = {
-    agentUrl: string_agent_url;
-};
-
-// TODO: [🐱‍🚀] Rename to AgentChatSomethingWrapper
-
-export function AgentChatWrapper(props: AgentChatWrapperProps) {
-    const { agentUrl } = props;
-
-    const agentPromise = useMemo(
-        () =>
-            RemoteAgent.connect({
-                agentUrl,
-                isVerbose: true,
-            }),
-        [agentUrl],
-    );
-
-    const { value: agent } = usePromise(agentPromise, [agentPromise]);
-
-    const handleFeedback = useCallback(
-        async (feedback: {
-            rating: number;
-            textRating?: string;
-            chatThread?: string;
-            userNote?: string;
-            expectedAnswer?: string | null;
-        }) => {
-            if (!agent) {
-                return;
-            }
-
-            await fetch(`${agentUrl}/api/feedback`, {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify({
-                    rating: feedback.rating.toString(),
-                    textRating: feedback.textRating,
-                    chatThread: feedback.chatThread,
-                    userNote: feedback.textRating, // Mapping textRating to userNote as well if needed, or just textRating
-                    expectedAnswer: feedback.expectedAnswer,
-                    agentHash: agent.agentHash,
-                }),
-            });
-        },
-        [agent, agentUrl],
-    );
-
-    if (!agent) {
-        return <>{/* <- TODO: [🐱‍🚀] <PromptbookLoading /> */}</>;
-    }
-
-    return <AgentChat className={`w-full h-full`} agent={agent} onFeedback={handleFeedback} />;
-}
-
-/**
- * TODO: [🚗] Transfer the saving logic to `<BookEditor/>` be aware of CRDT / yjs approach to be implementable in future
- */

package/apps/agents-server/src/app/agents/[agentName]/chat/page.tsx

@@ -1,45 +0,0 @@
-'use server';
-
-import { headers } from 'next/headers';
-import { $sideEffect } from '../../../../../../../src/utils/organization/$sideEffect';
-import { isAgentDeleted } from '../_utils';
-import { generateAgentMetadata } from '../generateAgentMetadata';
-import { AgentChatWrapper } from '../AgentChatWrapper';
-import { DeletedAgentBanner } from '../../../../components/DeletedAgentBanner';
-
-export const generateMetadata = generateAgentMetadata;
-
-export default async function AgentChatPage({
-    params,
-    searchParams,
-}: {
-    params: Promise<{ agentName: string }>;
-    searchParams: Promise<{ message?: string }>;
-}) {
-    $sideEffect(headers());
-    let { agentName } = await params;
-    agentName = decodeURIComponent(agentName);
-    const { message } = await searchParams;
-
-    const isDeleted = await isAgentDeleted(agentName);
-
-    if (isDeleted) {
-        return (
-            <main className="w-screen h-screen flex items-center justify-center p-8">
-                <DeletedAgentBanner message="This agent has been deleted. You can restore it from the Recycle Bin." />
-            </main>
-        );
-    }
-
-    const agentUrl = `/agents/${agentName}`;
-
-    return (
-        <main className={`w-screen h-screen`}>
-            <AgentChatWrapper agentUrl={agentUrl} autoExecuteMessage={message} />
-        </main>
-    );
-}
-
-/**
- * TODO: [🚗] Components and pages here should be just tiny UI wraper around proper agent logic and conponents
- */

package/apps/agents-server/src/app/agents/[agentName]/code/api/route.ts

@@ -1,68 +0,0 @@
-import { $provideAgentCollectionForServer } from '@/src/tools/$provideAgentCollectionForServer';
-import { $provideExecutionToolsForServer } from '@/src/tools/$provideExecutionToolsForServer';
-import { NextRequest, NextResponse } from 'next/server';
-import { $bookTranspilersRegister } from '../../../../../../../../src/transpilers/_common/register/$bookTranspilersRegister';
-import { keepUnused } from '../../../../../../../../src/utils/organization/keepUnused';
-
-export async function GET(request: NextRequest, { params }: { params: Promise<{ agentName: string }> }) {
-    keepUnused(request);
-    keepUnused(params);
-    // const agentName = (await params).agentName;
-
-    try {
-        // Get available transpilers
-        const transpilers = $bookTranspilersRegister.list().map((transpiler) => ({
-            name: transpiler.name,
-            title: transpiler.title,
-        }));
-
-        return NextResponse.json({ transpilers });
-    } catch (error) {
-        console.error('Error getting transpilers:', error);
-        return NextResponse.json({ error: 'Failed to get transpilers' }, { status: 500 });
-    }
-}
-
-export async function POST(request: NextRequest, { params }: { params: Promise<{ agentName: string }> }) {
-    const agentName = (await params).agentName;
-
-    try {
-        const { transpilerName } = await request.json();
-
-        if (!transpilerName) {
-            return NextResponse.json({ error: 'Transpiler name is required' }, { status: 400 });
-        }
-
-        // Get the transpiler
-        const allTranspilers = $bookTranspilersRegister.list();
-        const transpiler = allTranspilers.find((t) => t.name === transpilerName);
-        if (!transpiler) {
-            return NextResponse.json({ error: 'Transpiler not found' }, { status: 404 });
-        }
-
-        // Get agent source
-        const collection = await $provideAgentCollectionForServer();
-        const agentSource = await collection.getAgentSource(agentName);
-
-        if (!agentSource) {
-            return NextResponse.json({ error: 'Agent source not found' }, { status: 404 });
-        }
-
-        // Get execution tools
-        const tools = await $provideExecutionToolsForServer();
-
-        // Transpile the code
-        const transpiledCode = await transpiler.transpileBook(agentSource, tools);
-
-        return NextResponse.json({
-            code: transpiledCode,
-            transpiler: {
-                name: transpiler.name,
-                title: transpiler.title,
-            },
-        });
-    } catch (error) {
-        console.error('Error transpiling code:', error);
-        return NextResponse.json({ error: 'Failed to transpile code' }, { status: 500 });
-    }
-}

package/apps/agents-server/src/app/agents/[agentName]/code/page.tsx

@@ -1,223 +0,0 @@
-'use client';
-
-import { NEXT_PUBLIC_SITE_URL } from '@/config';
-import Editor from '@monaco-editor/react';
-import { generatePlaceholderAgentProfileImageUrl } from '@promptbook-local/core';
-import { AgentBasicInformation } from '@promptbook-local/types';
-import { ArrowLeftIcon, ChevronDownIcon, CodeIcon } from 'lucide-react';
-import Link from 'next/link';
-import { useCallback, useEffect, useState } from 'react';
-
-type Transpiler = {
-    name: string;
-    title: string;
-};
-
-type TranspilationResult = {
-    code: string;
-    transpiler: Transpiler;
-};
-
-function getLanguageFromTranspiler(transpilerName?: string): string {
-    if (!transpilerName) return 'plaintext';
-
-    // Map transpiler names to Monaco language identifiers
-    if (transpilerName.includes('openai-sdk')) return 'javascript';
-    if (transpilerName.includes('langchain') || transpilerName.includes('python')) return 'python';
-    if (transpilerName.includes('markdown')) return 'markdown';
-
-    // Default to plaintext for unknown transpilers
-    return 'plaintext';
-}
-
-export default function AgentCodePage({ params }: { params: Promise<{ agentName: string }> }) {
-    const [agentName, setAgentName] = useState<string>('');
-    const [agentProfile, setAgentProfile] = useState<AgentBasicInformation | null>(null);
-    const [transpilers, setTranspilers] = useState<Transpiler[]>([]);
-    const [selectedTranspiler, setSelectedTranspiler] = useState<Transpiler | null>(null);
-    const [transpiledCode, setTranspiledCode] = useState<string>('');
-    const [loading, setLoading] = useState(false);
-    const [error, setError] = useState<string>('');
-
-    useEffect(() => {
-        params.then((p) => setAgentName(p.agentName));
-    }, [params]);
-
-    useEffect(() => {
-        if (!agentName) return;
-
-        // Fetch agent profile
-        fetch(`/api/agents/${encodeURIComponent(agentName)}`)
-            .then((res) => res.json())
-            .then((data) => setAgentProfile(data))
-            .catch((err) => console.error('Error fetching agent profile:', err));
-
-        // Fetch available transpilers
-        fetch(`/agents/${encodeURIComponent(agentName)}/code/api`)
-            .then((res) => res.json())
-            .then((data) => {
-                setTranspilers(data.transpilers || []);
-                if (data.transpilers && data.transpilers.length > 0) {
-                    setSelectedTranspiler(data.transpilers[0]);
-                }
-            })
-            .catch((err) => console.error('Error fetching transpilers:', err));
-    }, [agentName]);
-
-    const transpileCode = useCallback(
-        async (transpilerName: string) => {
-            setLoading(true);
-            setError('');
-
-            try {
-                const response = await fetch(`/agents/${encodeURIComponent(agentName)}/code/api`, {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                    },
-                    body: JSON.stringify({ transpilerName }),
-                });
-
-                if (!response.ok) {
-                    const errorData = await response.json();
-                    throw new Error(errorData.error || 'Failed to transpile code');
-                }
-
-                const result: TranspilationResult = await response.json();
-                setTranspiledCode(result.code);
-            } catch (err) {
-                setError(err instanceof Error ? err.message : 'Failed to transpile code');
-                setTranspiledCode('');
-            } finally {
-                setLoading(false);
-            }
-        },
-        [agentName],
-    );
-
-    useEffect(() => {
-        if (selectedTranspiler && agentName) {
-            transpileCode(selectedTranspiler.name);
-        }
-    }, [selectedTranspiler, agentName, transpileCode]);
-
-    if (!agentProfile) {
-        return (
-            <div className="min-h-screen p-6 md:p-12 flex flex-col items-center bg-gray-50">
-                <div className="w-full max-w-4xl bg-white rounded-xl shadow-sm border border-gray-200 p-12">
-                    <div className="text-center">Loading...</div>
-                </div>
-            </div>
-        );
-    }
-
-    return (
-        <div className="min-h-screen p-6 md:p-12 flex flex-col items-center bg-gray-50">
-            <div className="w-full max-w-4xl bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
-                {/* Header */}
-                <div className="p-6 border-b border-gray-200 flex items-center gap-4">
-                    {/* eslint-disable @typescript-eslint/no-explicit-any, @next/next/no-img-element */}
-
-                    <img
-                        src={
-                            agentProfile.meta.image ||
-                            generatePlaceholderAgentProfileImageUrl(
-                                agentProfile.permanentId || agentName,
-                                NEXT_PUBLIC_SITE_URL, // <- TODO: !!!! Use here `const { publicUrl } = await $provideServer();`
-                            )
-                        }
-                        alt={agentProfile.meta.fullname || agentName}
-                        className="w-16 h-16 rounded-full object-cover border-2 border-gray-200"
-                    />
-
-                    <div className="flex-1">
-                        {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
-                        <h1 className="text-2xl font-bold text-gray-900">
-                            {(agentProfile as any)?.meta?.fullname || agentName}
-                        </h1>
-                        <p className="text-gray-500 flex items-center gap-2">
-                            <CodeIcon className="w-4 h-4" />
-                            Generated Code
-                        </p>
-                    </div>
-                    <Link
-                        href={`/agents/${encodeURIComponent(agentName)}`}
-                        className="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-full transition-colors"
-                        title="Back to Agent"
-                    >
-                        <ArrowLeftIcon className="w-6 h-6" />
-                    </Link>
-                </div>
-
-                <div className="p-6">
-                    {/* Transpiler Selector */}
-                    <div className="mb-6">
-                        <label className="block text-sm font-medium text-gray-700 mb-2">Select Transpiler</label>
-                        <div className="relative">
-                            <select
-                                value={selectedTranspiler?.name || ''}
-                                onChange={(e) => {
-                                    const transpiler = transpilers.find((t) => t.name === e.target.value);
-                                    if (transpiler) setSelectedTranspiler(transpiler);
-                                }}
-                                className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-                            >
-                                {transpilers.map((transpiler) => (
-                                    <option key={transpiler.name} value={transpiler.name}>
-                                        {transpiler.title}
-                                    </option>
-                                ))}
-                            </select>
-                            <ChevronDownIcon className="absolute right-3 top-3 w-4 h-4 text-gray-400 pointer-events-none" />
-                        </div>
-                    </div>
-
-                    {/* Code Display */}
-                    <div className="bg-gray-50 rounded-lg border border-gray-200 overflow-hidden">
-                        <div className="p-4 border-b border-gray-200 flex items-center justify-between">
-                            <h2 className="text-lg font-semibold text-gray-900">
-                                {selectedTranspiler?.title || 'Generated Code'}
-                            </h2>
-                            {loading && <div className="text-sm text-gray-500">Generating...</div>}
-                        </div>
-                        <div className="p-4">
-                            {error && (
-                                <div className="text-red-600 text-sm mb-4 p-3 bg-red-50 rounded border border-red-200">
-                                    {error}
-                                </div>
-                            )}
-                            {transpiledCode ? (
-                                <div className="h-96 border border-gray-200 rounded">
-                                    <Editor
-                                        value={transpiledCode}
-                                        language={getLanguageFromTranspiler(selectedTranspiler?.name)}
-                                        options={{
-                                            readOnly: true,
-                                            minimap: { enabled: false },
-                                            fontSize: 14,
-                                            lineNumbers: 'on',
-                                            scrollBeyondLastLine: false,
-                                            automaticLayout: true,
-                                            wordWrap: 'on',
-                                        }}
-                                        loading={
-                                            <div className="flex items-center justify-center h-full text-gray-500">
-                                                Loading editor...
-                                            </div>
-                                        }
-                                    />
-                                </div>
-                            ) : loading ? (
-                                <div className="text-gray-500 text-center py-8">Generating code...</div>
-                            ) : (
-                                <div className="text-gray-500 text-center py-8">
-                                    Select a transpiler to generate code
-                                </div>
-                            )}
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    );
-}