This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

Train using Python:

• Python training examples

Supabase SQL Steps

1. Create an extension:

   CREATE EXTENSION IF NOT EXISTS vector;

2. Create the table:

   CREATE TABLE document_embeddings (
       id uuid DEFAULT uuid_generate_v4() PRIMARY KEY,
       content text,
       metadata jsonb,
       embedding vector(768)
   );

3. Create the match_documents function:

   CREATE OR REPLACE FUNCTION match_documents(
       query_embedding vector(768), 
       match_count int = 5
   )
   RETURNS TABLE(
       id uuid,
       content text,
       metadata jsonb,
       similarity float
   )
   LANGUAGE plpgsql
   AS $$
   BEGIN
       RETURN QUERY
       SELECT
           d.id,
           d.content,
           d.metadata,
           (1 - (d.embedding <=> query_embedding)) AS similarity
       FROM
           documents d
       ORDER BY
           d.embedding <=> query_embedding
       LIMIT
           match_count;
   END;
   $$;

To Insert into an Existing Webpage

1. Add CSS Style to the page:

   <style>
        /* Chatbot button styles */
        #chatbot-button {
            position: fixed;
            bottom: 10px;
            left: 10px;
            height: 50px;
            width: 50px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            z-index: 1000;
            font-size: 24px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            animation: pop 1s ease-in-out infinite alternate;
        }
   
        @keyframes pop {
            0% {
                transform: scale(1);
            }
            100% {
                transform: scale(1.2);
            }
        }
   
        /* Chatbot iframe styles */
        #chatbot-iframe-container {
            position: fixed;
            bottom: 70px;
            left: 10px;
            height: 0;
            width: 0;
            overflow: hidden; /* Ensure the content is hidden when minimized */
            transition: height 0.3s ease-in-out, width 0.3s ease-in-out; /* Explicitly define transitions for height and width */
            z-index: 1000;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            border-radius: 10px; /* Add rounded corners */
            border: 2px solid #007bff; /* Add a border */
        }
   
        #chatbot-iframe {
            width: 100%;
            height: 100%;
            border: none;
            border-radius: 10px; /* Add rounded corners */
        }
   
        /* Expanded iframe styles */
        #chatbot-iframe-container.expanded {
            height: 500px !important;
            width: 400px !important; /* Adjust width if needed */
        }
    </style>

2. Add HTML to the body:

   <!-- Chatbot button -->
    <div id="chatbot-button">
        💬
    </div>
   
    <!-- Chatbot iframe container -->
    <div id="chatbot-iframe-container">
        <iframe
            id="chatbot-iframe"
            src="https://[YOUR VERCEL APP URL].vercel.app"
        ></iframe>
    </div>
   
    <script>
        // Get the chatbot button and iframe container elements
        const chatbotButton = document.getElementById('chatbot-button');
        const chatbotIframeContainer = document.getElementById('chatbot-iframe-container');
   
        // Add a click event listener to the chatbot button
        chatbotButton.addEventListener('click', () => {
            // Toggle the expanded class on the iframe container
            console.log('Chatbot button clicked'); // Debugging log
            chatbotIframeContainer.classList.toggle('expanded');
            console.log('Iframe container classes:', chatbotIframeContainer.className); // Debugging log
        });
   
        // Stop the animation after 10 seconds or 10 iterations
        setTimeout(() => {
            chatbotButton.style.animation = 'none';
        }, 10000); // 10 seconds (10 iterations at 1s each)
    </script>