@promptbook/cli 0.104.0-1 → 0.104.0-11

package/apps/agents-server/src/app/admin/messages/MessagesClient.tsx

@@ -0,0 +1,294 @@
+'use client';
+
+import { useEffect, useMemo, useState } from 'react';
+import { Card } from '../../../components/Homepage/Card';
+import {
+    $fetchMessages,
+    type MessageRow,
+    type MessageSendAttemptRow,
+} from '../../../utils/messagesAdmin';
+
+function formatDate(dateString: string | null | undefined): string {
+    if (!dateString) return '-';
+    const date = new Date(dateString);
+    if (Number.isNaN(date.getTime())) return dateString;
+    return date.toLocaleString();
+}
+
+function getMessagePreview(content: string, maxLength = 120): string {
+    if (!content) return '-';
+    return content.length > maxLength ? `${content.slice(0, maxLength)}…` : content;
+}
+
+function getStatusBadge(attempts: MessageSendAttemptRow[] | undefined) {
+    if (!attempts || attempts.length === 0) {
+        return <span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-800">Pending</span>;
+    }
+    const success = attempts.find(a => a.isSuccessful);
+    if (success) {
+        return <span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800">Sent ({success.providerName})</span>;
+    }
+    return <span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-red-100 text-red-800">Failed ({attempts.length})</span>;
+}
+
+export function MessagesClient() {
+    const [items, setItems] = useState<MessageRow[]>([]);
+    const [total, setTotal] = useState(0);
+    const [page, setPage] = useState(1);
+    const [pageSize, setPageSize] = useState(20);
+    const [searchInput, setSearchInput] = useState('');
+    const [search, setSearch] = useState('');
+    const [channel, setChannel] = useState('');
+    const [direction, setDirection] = useState('');
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+
+    // Load messages whenever filters / pagination change
+    useEffect(() => {
+        let isCancelled = false;
+
+        async function loadData() {
+            try {
+                setLoading(true);
+                setError(null);
+
+                const response = await $fetchMessages({
+                    page,
+                    pageSize,
+                    search: search || undefined,
+                    channel: channel || undefined,
+                    direction: direction || undefined,
+                });
+
+                if (isCancelled) return;
+
+                setItems(response.items);
+                setTotal(response.total);
+            } catch (err) {
+                if (isCancelled) return;
+                setError(err instanceof Error ? err.message : 'Failed to load messages');
+            } finally {
+                if (!isCancelled) {
+                    setLoading(false);
+                }
+            }
+        }
+
+        loadData();
+
+        return () => {
+            isCancelled = true;
+        };
+    }, [page, pageSize, search, channel, direction]);
+
+    const totalPages = useMemo(() => {
+        if (total <= 0 || pageSize <= 0) return 1;
+        return Math.max(1, Math.ceil(total / pageSize));
+    }, [total, pageSize]);
+
+    const handleSearchSubmit = (event: React.FormEvent) => {
+        event.preventDefault();
+        setPage(1);
+        setSearch(searchInput.trim());
+    };
+
+    const handlePageSizeChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+        const next = parseInt(event.target.value, 10);
+        if (!Number.isNaN(next) && next > 0) {
+            setPageSize(next);
+            setPage(1);
+        }
+    };
+
+    const pagination = (
+        <div className="mt-4 flex flex-col items-center justify-between gap-3 border-t border-gray-100 pt-4 text-xs text-gray-600 md:flex-row">
+            <div>
+                {total > 0 ? (
+                    <>
+                        Showing <span className="font-semibold">{Math.min((page - 1) * pageSize + 1, total)}</span> –{' '}
+                        <span className="font-semibold">{Math.min(page * pageSize, total)}</span> of{' '}
+                        <span className="font-semibold">{total}</span> messages
+                    </>
+                ) : (
+                    'No messages'
+                )}
+            </div>
+            <div className="flex items-center gap-2">
+                <button
+                    type="button"
+                    onClick={() => setPage((prev) => Math.max(1, prev - 1))}
+                    disabled={page <= 1}
+                    className="inline-flex items-center justify-center rounded-md border border-gray-300 px-2 py-1 text-xs font-medium text-gray-700 disabled:cursor-not-allowed disabled:opacity-50"
+                >
+                    Previous
+                </button>
+                <span>
+                    Page <span className="font-semibold">{page}</span> of{' '}
+                    <span className="font-semibold">{totalPages}</span>
+                </span>
+                <button
+                    type="button"
+                    onClick={() => setPage((prev) => Math.min(totalPages, prev + 1))}
+                    disabled={page >= totalPages}
+                    className="inline-flex items-center justify-center rounded-md border border-gray-300 px-2 py-1 text-xs font-medium text-gray-700 disabled:cursor-not-allowed disabled:opacity-50"
+                >
+                    Next
+                </button>
+            </div>
+        </div>
+    );
+
+    return (
+        <div className="container mx-auto px-4 py-8 space-y-6">
+            <div className="mt-20 mb-4 flex flex-col gap-2 md:flex-row md:items-end md:justify-between">
+                <div>
+                    <h1 className="text-3xl text-gray-900 font-light">Messages</h1>
+                    <p className="mt-1 text-sm text-gray-500">
+                        Inspect all inbound and outbound messages and their statuses.
+                    </p>
+                </div>
+                <div className="flex items-end gap-4 text-sm text-gray-500 md:text-right">
+                    <div>
+                        <div className="text-xl font-semibold text-gray-900">{total.toLocaleString()}</div>
+                        <div className="text-xs uppercase tracking-wide text-gray-400">Total messages</div>
+                    </div>
+                </div>
+            </div>
+            <Card>
+                <div className="flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
+                    <form onSubmit={handleSearchSubmit} className="flex flex-col gap-2 md:flex-row md:items-end">
+                        <div className="flex flex-col gap-1">
+                            <label htmlFor="search" className="text-sm font-medium text-gray-700">
+                                Search
+                            </label>
+                            <input
+                                id="search"
+                                type="text"
+                                value={searchInput}
+                                onChange={(event) => setSearchInput(event.target.value)}
+                                placeholder="Search in content..."
+                                className="w-full md:w-72 px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+                            />
+                        </div>
+                        <button
+                            type="submit"
+                            className="mt-2 inline-flex items-center justify-center rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 md:mt-0 md:ml-3"
+                        >
+                            Apply
+                        </button>
+                    </form>
+
+                    <div className="flex flex-col gap-2 md:flex-row md:items-end md:gap-4">
+                        <div className="flex flex-col gap-1">
+                            <label htmlFor="channelFilter" className="text-sm font-medium text-gray-700">
+                                Channel
+                            </label>
+                            <select
+                                id="channelFilter"
+                                value={channel}
+                                onChange={(e) => { setChannel(e.target.value); setPage(1); }}
+                                className="w-full md:w-40 px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+                            >
+                                <option value="">All</option>
+                                <option value="EMAIL">Email</option>
+                                <option value="PROMPTBOOK_CHAT">Chat</option>
+                            </select>
+                        </div>
+
+                        <div className="flex flex-col gap-1">
+                            <label htmlFor="directionFilter" className="text-sm font-medium text-gray-700">
+                                Direction
+                            </label>
+                            <select
+                                id="directionFilter"
+                                value={direction}
+                                onChange={(e) => { setDirection(e.target.value); setPage(1); }}
+                                className="w-full md:w-40 px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+                            >
+                                <option value="">All</option>
+                                <option value="INBOUND">Inbound</option>
+                                <option value="OUTBOUND">Outbound</option>
+                            </select>
+                        </div>
+
+                        <div className="flex flex-col gap-1">
+                            <label htmlFor="pageSize" className="text-sm font-medium text-gray-700">
+                                Page size
+                            </label>
+                            <select
+                                id="pageSize"
+                                value={pageSize}
+                                onChange={handlePageSizeChange}
+                                className="w-28 px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+                            >
+                                <option value={10}>10</option>
+                                <option value={20}>20</option>
+                                <option value={50}>50</option>
+                                <option value={100}>100</option>
+                            </select>
+                        </div>
+                    </div>
+                </div>
+            </Card>
+
+            <Card>
+                <div className="flex items-center justify-between mb-4">
+                    <h2 className="text-lg font-medium text-gray-900">Message list</h2>
+                </div>
+                {error && <div className="mb-4 rounded-md bg-red-50 px-4 py-3 text-sm text-red-800">{error}</div>}
+
+                {loading && items.length === 0 ? (
+                    <div className="py-8 text-center text-gray-500">Loading messages…</div>
+                ) : items.length === 0 ? (
+                    <div className="py-8 text-center text-gray-500">No messages found.</div>
+                ) : (
+                    <div className="overflow-x-auto">
+                        <table className="min-w-full divide-y divide-gray-200 text-sm">
+                            <thead className="bg-gray-50">
+                                <tr>
+                                    <th className="px-4 py-3 text-left font-medium text-gray-500">Time</th>
+                                    <th className="px-4 py-3 text-left font-medium text-gray-500">Channel</th>
+                                    <th className="px-4 py-3 text-left font-medium text-gray-500">Direction</th>
+                                    <th className="px-4 py-3 text-left font-medium text-gray-500">Sender/Recipients</th>
+                                    <th className="px-4 py-3 text-left font-medium text-gray-500">Content</th>
+                                    <th className="px-4 py-3 text-left font-medium text-gray-500">Status</th>
+                                </tr>
+                            </thead>
+                            <tbody className="divide-y divide-gray-200 bg-white">
+                                {items.map((row) => (
+                                    <tr key={row.id}>
+                                        <td className="whitespace-nowrap px-4 py-3 text-gray-700">
+                                            {formatDate(row.createdAt)}
+                                        </td>
+                                        <td className="whitespace-nowrap px-4 py-3 text-gray-700">
+                                            {row.channel}
+                                        </td>
+                                        <td className="whitespace-nowrap px-4 py-3 text-gray-700">
+                                            {row.direction}
+                                        </td>
+                                        <td className="max-w-xs px-4 py-3 text-gray-700">
+                                            <div className="truncate" title={JSON.stringify({ sender: row.sender, recipients: row.recipients }, null, 2)}>
+                                                {/* Simple preview of sender/recipients */}
+                                                S: {JSON.stringify(row.sender)}<br/>
+                                                R: {JSON.stringify(row.recipients)}
+                                            </div>
+                                        </td>
+                                        <td className="max-w-md px-4 py-3 text-gray-700">
+                                            <div className="max-h-24 overflow-hidden overflow-ellipsis text-xs leading-snug">
+                                                {getMessagePreview(row.content)}
+                                            </div>
+                                        </td>
+                                        <td className="whitespace-nowrap px-4 py-3 text-gray-700">
+                                            {getStatusBadge(row.sendAttempts)}
+                                        </td>
+                                    </tr>
+                                ))}
+                            </tbody>
+                        </table>
+                    </div>
+                )}
+                {pagination}
+            </Card>
+        </div>
+    );
+}

package/apps/agents-server/src/app/admin/messages/page.tsx

@@ -0,0 +1,13 @@
+import { ForbiddenPage } from '../../../components/ForbiddenPage/ForbiddenPage';
+import { isUserAdmin } from '../../../utils/isUserAdmin';
+import { MessagesClient } from './MessagesClient';
+
+export default async function AdminMessagesPage() {
+    const isAdmin = await isUserAdmin();
+
+    if (!isAdmin) {
+        return <ForbiddenPage />;
+    }
+
+    return <MessagesClient />;
+}

package/apps/agents-server/src/app/admin/messages/send-email/SendEmailClient.tsx

@@ -0,0 +1,104 @@
+'use client';
+
+import { useState } from 'react';
+import { assertsError } from '../../../../../../../src/errors/assertsError';
+import { sendEmailAction } from './actions';
+
+export function SendEmailClient() {
+    const [status, setStatus] = useState<'IDLE' | 'LOADING' | 'SUCCESS' | 'ERROR'>('IDLE');
+    const [errorMessage, setErrorMessage] = useState<string | null>(null);
+
+    const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+        event.preventDefault();
+        setStatus('LOADING');
+        setErrorMessage(null);
+
+        const formData = new FormData(event.currentTarget);
+
+        try {
+            await sendEmailAction(formData);
+            setStatus('SUCCESS');
+        } catch (error) {
+            assertsError(error);
+            console.error(error);
+            setStatus('ERROR');
+            setErrorMessage(error.message);
+        }
+    };
+
+    return (
+        <div className="container mx-auto p-4">
+            <h1 className="text-2xl font-bold mb-4">Send Email (Test)</h1>
+
+            {status === 'SUCCESS' && (
+                <div className="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-4">
+                    Email sent successfully!
+                </div>
+            )}
+
+            {status === 'ERROR' && (
+                <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
+                    Error: {errorMessage}
+                </div>
+            )}
+
+            <form onSubmit={handleSubmit} className="space-y-4 max-w-lg">
+                <div>
+                    <label className="block text-sm font-medium text-gray-700">From</label>
+                    <input
+                        name="from"
+                        type="text"
+                        defaultValue="Test Promptbook <test@ptbk.io>"
+                        required
+                        className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 border p-2"
+                    />
+                </div>
+
+                <div>
+                    <label className="block text-sm font-medium text-gray-700">To</label>
+                    <input
+                        name="to"
+                        type="text"
+                        placeholder="recipient@example.com"
+                        defaultValue="Pavol Hejný <pavol@ptbk.io>"
+                        required
+                        className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 border p-2"
+                    />
+                    <p className="text-xs text-gray-500 mt-1">Separate multiple addresses with commas</p>
+                </div>
+
+                <div>
+                    <label className="block text-sm font-medium text-gray-700">Subject</label>
+                    <input
+                        name="subject"
+                        type="text"
+                        placeholder="Test Email"
+                        defaultValue="Test Email"
+                        required
+                        className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 border p-2"
+                    />
+                </div>
+
+                <div>
+                    <label className="block text-sm font-medium text-gray-700">Body</label>
+                    <textarea
+                        name="body"
+                        rows={6}
+                        placeholder="Hello, this is a test email."
+                        defaultValue="Hello, this is a test email."
+                        required
+                        className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 border p-2"
+                    />
+                </div>
+
+                <button
+                    type="submit"
+                    disabled={status === 'LOADING'}
+                    className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded disabled:opacity-50"
+                >
+                    {status === 'LOADING' ? 'Sending...' : 'Send Email'}
+                </button>
+            </form>
+        </div>
+    );
+}

package/apps/agents-server/src/app/admin/messages/send-email/actions.ts

@@ -0,0 +1,35 @@
+'use server';
+
+import type { string_email, string_emails, string_html } from '@promptbook-local/types';
+import { parseEmailAddress } from '../../../../message-providers/email/_common/utils/parseEmailAddress';
+import { parseEmailAddresses } from '../../../../message-providers/email/_common/utils/parseEmailAddresses';
+import { stringifyEmailAddress } from '../../../../message-providers/email/_common/utils/stringifyEmailAddress';
+import { sendMessage } from '../../../../utils/messages/sendMessage';
+
+export async function sendEmailAction(formData: FormData) {
+    const from = formData.get('from') as string;
+    const to = formData.get('to') as string;
+    const subject = formData.get('subject') as string;
+    const body = formData.get('body') as string;
+
+    if (!from || !to || !subject || !body) {
+        throw new Error('All fields are required');
+    }
+
+    const sender = stringifyEmailAddress(parseEmailAddress(from as string_email));
+    const recipients = parseEmailAddresses(to as string_emails).map(stringifyEmailAddress);
+
+    await sendMessage({
+        channel: 'EMAIL',
+        direction: 'OUTBOUND',
+        sender,
+        recipients,
+        subject,
+        content: body as string_html,
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        threadId: crypto.randomUUID() as any,
+        cc: [],
+        attachments: [],
+        metadata: {},
+    });
+}

package/apps/agents-server/src/app/admin/messages/send-email/page.tsx

@@ -0,0 +1,13 @@
+import { ForbiddenPage } from '../../../../components/ForbiddenPage/ForbiddenPage';
+import { isUserAdmin } from '../../../../utils/isUserAdmin';
+import { SendEmailClient } from './SendEmailClient';
+
+export default async function AdminSendEmailPage() {
+    const isAdmin = await isUserAdmin();
+
+    if (!isAdmin) {
+        return <ForbiddenPage />;
+    }
+
+    return <SendEmailClient />;
+}

package/apps/agents-server/src/app/admin/metadata/MetadataClient.tsx

@@ -1,6 +1,7 @@
 'use client';
 
-import { FileText, Hash, Image, Shield, ToggleLeft, Type, Upload } from 'lucide-react';
+import { upload } from '@vercel/blob/client';
+import { FileTextIcon, HashIcon, ImageIcon, ShieldIcon, ToggleLeftIcon, TypeIcon, Upload } from 'lucide-react';
 import { useEffect, useRef, useState } from 'react';
 import { metadataDefaults, MetadataType } from '../../../database/metadataDefaults';
 
@@ -148,19 +149,19 @@ export function MetadataClient() {
     const getTypeIcon = (type?: MetadataType) => {
         switch (type) {
             case 'TEXT_SINGLE_LINE':
-                return <Type className="w-4 h-4" />;
+                return <TypeIcon className="w-4 h-4" />;
             case 'TEXT':
-                return <FileText className="w-4 h-4" />;
+                return <FileTextIcon className="w-4 h-4" />;
             case 'NUMBER':
-                return <Hash className="w-4 h-4" />;
+                return <HashIcon className="w-4 h-4" />;
             case 'BOOLEAN':
-                return <ToggleLeft className="w-4 h-4" />;
+                return <ToggleLeftIcon className="w-4 h-4" />;
             case 'IMAGE_URL':
-                return <Image className="w-4 h-4" />;
+                return <ImageIcon className="w-4 h-4" />;
             case 'IP_RANGE':
-                return <Shield className="w-4 h-4" />;
+                return <ShieldIcon className="w-4 h-4" />;
             default:
-                return <Type className="w-4 h-4" />;
+                return <TypeIcon className="w-4 h-4" />;
         }
     };
 
@@ -185,26 +186,29 @@ export function MetadataClient() {
 
         try {
             setIsUploading(true);
-            const formData = new FormData();
-            formData.append('file', file);
 
-            const response = await fetch('/api/upload', {
-                method: 'POST',
-                body: formData,
+            // Build the full path including prefix and user/files directory
+            const pathPrefix = process.env.NEXT_PUBLIC_CDN_PATH_PREFIX || '';
+            const uploadPath = pathPrefix ? `${pathPrefix}/user/files/${file.name}` : `user/files/${file.name}`;
+
+            // Upload directly to Vercel Blob using client upload
+            const blob = await upload(uploadPath, file, {
+                access: 'public',
+                handleUploadUrl: '/api/upload',
+                clientPayload: JSON.stringify({
+                    purpose: formState.key || 'METADATA_IMAGE',
+                    contentType: file.type,
+                }),
             });
 
-            if (!response.ok) {
-                throw new Error(`Failed to upload file: ${response.statusText}`);
-            }
-
-            const { fileUrl: longFileUrl } = await response.json();
+            const fileUrl = blob.url;
 
             const LONG_URL = `${process.env.NEXT_PUBLIC_CDN_PUBLIC_URL!}/${process.env
                 .NEXT_PUBLIC_CDN_PATH_PREFIX!}/user/files/`;
             const SHORT_URL = `https://ptbk.io/k/`;
             // <- TODO: [🌍] Unite this logic in one place
 
-            const shortFileUrl = longFileUrl.split(LONG_URL).join(SHORT_URL);
+            const shortFileUrl = fileUrl.split(LONG_URL).join(SHORT_URL);
             setFormState((prev) => ({ ...prev, value: shortFileUrl }));
         } catch (err) {
             setError(err instanceof Error ? err.message : 'Failed to upload image');

package/apps/agents-server/src/app/admin/search-engine-test/SearchEngineTestClient.tsx

@@ -0,0 +1,109 @@
+'use client';
+
+import { useState } from 'react';
+import { Card } from '../../../components/Homepage/Card';
+import { SearchResult } from '../../../../../../src/search-engines/SearchResult';
+import { search } from './actions';
+
+export function SearchEngineTestClient() {
+    const [query, setQuery] = useState('');
+    const [provider, setProvider] = useState('dummy');
+    const [results, setResults] = useState<SearchResult[] | null>(null);
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+
+    const handleSearch = async () => {
+        if (!query) return;
+
+        setIsLoading(true);
+        setError(null);
+        setResults(null);
+
+        try {
+            const results = await search(query, provider);
+            setResults(results);
+        } catch (err) {
+            setError(String(err));
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    return (
+        <div className="container mx-auto px-4 py-8 space-y-6">
+             <div className="mt-20 mb-4 flex flex-col gap-2 md:flex-row md:items-end md:justify-between">
+                <div>
+                    <h1 className="text-3xl text-gray-900 font-light">Search Engine Test</h1>
+                    <p className="mt-1 text-sm text-gray-500">
+                        Test the search engine capabilities by providing a query.
+                    </p>
+                </div>
+            </div>
+
+            <Card>
+                <div className="mb-4 space-y-4">
+                     <div className="space-y-2">
+                        <label className="block text-sm font-medium text-gray-700">Query</label>
+                        <input
+                            type="text"
+                            value={query}
+                            onChange={(e) => setQuery(e.target.value)}
+                            placeholder="e.g., Cat"
+                            className="w-full p-2 border border-gray-300 rounded"
+                            disabled={isLoading}
+                             onKeyDown={(e) => {
+                                if (e.key === 'Enter') {
+                                    handleSearch();
+                                }
+                            }}
+                        />
+                    </div>
+                     <div className="space-y-2">
+                        <label className="block text-sm font-medium text-gray-700">Provider</label>
+                        <select
+                            value={provider}
+                            onChange={(e) => setProvider(e.target.value)}
+                            className="w-full p-2 border border-gray-300 rounded"
+                            disabled={isLoading}
+                        >
+                            <option value="dummy">Dummy</option>
+                            <option value="bing">Bing</option>
+                        </select>
+                    </div>
+
+                    <div className="flex justify-end">
+                        <button
+                            onClick={handleSearch}
+                            disabled={isLoading || !query}
+                            className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded disabled:opacity-50"
+                        >
+                            {isLoading ? 'Searching...' : 'Search'}
+                        </button>
+                    </div>
+                </div>
+
+                {error && (
+                     <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4" role="alert">
+                        <strong className="font-bold">Error: </strong>
+                        <span className="block sm:inline">{error}</span>
+                    </div>
+                )}
+
+                {results && (
+                     <div className="space-y-4">
+                        <h2 className="text-xl font-semibold">Results</h2>
+                        {results.map((result, index) => (
+                            <div key={index} className="border p-4 rounded bg-gray-50">
+                                <a href={result.url} target="_blank" rel="noopener noreferrer" className="text-blue-600 font-bold hover:underline">
+                                    {result.title}
+                                </a>
+                                <div className="text-sm text-green-700">{result.url}</div>
+                                <p className="text-gray-700">{result.snippet}</p>
+                            </div>
+                        ))}
+                    </div>
+                )}
+            </Card>
+        </div>
+    );
+}