Upload 3 files

ui/app.js

@@ -0,0 +1,157 @@
+const API_BASE_URL = 'http://127.0.0.1:7861';
+
+const promptInput = document.getElementById('promptInput');
+const responseTypeSelect = document.getElementById('responseTypeSelect');
+const generateBtn = document.getElementById('generateBtn');
+const chatWindow = document.getElementById('chat-window');
+const newSessionBtn = document.getElementById('newSessionBtn');
+const clearHistoryBtn = document.getElementById('clearHistoryBtn');
+
+let currentSessionId = localStorage.getItem('langchainChatSessionId') || crypto.randomUUID();
+let isLoading = false;
+
+const updateSessionId = (newId) => {
+    currentSessionId = newId;
+    localStorage.setItem('langchainChatSessionId', currentSessionId);
+    console.log(`Session ID set to: ${currentSessionId}`);
+};
+
+const escapeHtml = (text) => {
+    if (!text) return '';
+    const map = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#039;' };
+    return text.replace(/[&<>"']/g, m => map[m]);
+};
+
+const scrollToBottom = () => {
+    chatWindow.scrollTop = chatWindow.scrollHeight;
+};
+
+const displayUserMessage = (text) => {
+    const messageEl = document.createElement('div');
+    messageEl.className = 'message-bubble user';
+    messageEl.textContent = text;
+    chatWindow.appendChild(messageEl);
+    scrollToBottom();
+};
+
+const displayBotMessage = (data) => {
+    const messageEl = document.createElement('div');
+    messageEl.className = 'message-bubble bot';
+
+    let content = '';
+    if (data.explanation) {
+        content += `<div class="content-block"><h3>Explanation</h3>${escapeHtml(data.explanation)}</div>`;
+    }
+    if (data.generated_code) {
+        content += `<div class="content-block"><h3>Code</h3><pre>${escapeHtml(data.generated_code)}</pre></div>`;
+    }
+    if (!data.explanation && !data.generated_code && data.response) {
+         content += `<div class="content-block">${escapeHtml(data.response)}</div>`;
+    }
+
+    messageEl.innerHTML = content;
+    chatWindow.appendChild(messageEl);
+    scrollToBottom();
+};
+
+const toggleTypingIndicator = (show) => {
+    let indicator = document.getElementById('typing-indicator');
+    if (show) {
+        if (!indicator) {
+            indicator = document.createElement('div');
+            indicator.id = 'typing-indicator';
+            indicator.className = 'message-bubble bot typing-indicator';
+            indicator.innerHTML = '<span></span><span></span><span></span>';
+            chatWindow.appendChild(indicator);
+            scrollToBottom();
+        }
+    } else {
+        if (indicator) {
+            indicator.remove();
+        }
+    }
+};
+
+const generateResponse = async () => {
+    const prompt = promptInput.value.trim();
+    if (!prompt || isLoading) return;
+
+    isLoading = true;
+    generateBtn.disabled = true;
+    
+    displayUserMessage(prompt);
+    promptInput.value = '';
+    promptInput.style.height = 'auto'; // Reset height
+    toggleTypingIndicator(true);
+
+    try {
+        const response = await fetch(`${API_BASE_URL}/generate/`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                prompt,
+                session_id: currentSessionId,
+                response_type: responseTypeSelect.value,
+            }),
+        });
+
+        if (!response.ok) {
+            const errorData = await response.json();
+            throw new Error(errorData.detail || `HTTP error! status: ${response.status}`);
+        }
+
+        const data = await response.json();
+        displayBotMessage(data);
+
+    } catch (error) {
+        displayBotMessage({ explanation: `Error: ${error.message}` });
+    } finally {
+        isLoading = false;
+        generateBtn.disabled = false;
+        toggleTypingIndicator(false);
+    }
+};
+
+const newSession = () => {
+    updateSessionId(crypto.randomUUID());
+    chatWindow.innerHTML = '';
+    // You might want a system message here
+    displayBotMessage({response: "New session started. How can I help you today?"});
+};
+
+const clearHistory = async () => {
+     try {
+        await fetch(`${API_BASE_URL}/clear_history/`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ session_id: currentSessionId }),
+        });
+        chatWindow.innerHTML = '';
+        displayBotMessage({response: "Conversation history for this session has been cleared."});
+    } catch (error) {
+        displayBotMessage({ explanation: `Error clearing history: ${error.message}` });
+    }
+};
+
+// Event Listeners
+generateBtn.addEventListener('click', generateResponse);
+promptInput.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+        generateResponse();
+    }
+});
+
+// Auto-resize textarea
+promptInput.addEventListener('input', () => {
+    promptInput.style.height = 'auto';
+    promptInput.style.height = `${promptInput.scrollHeight}px`;
+});
+
+newSessionBtn.addEventListener('click', newSession);
+clearHistoryBtn.addEventListener('click', clearHistory);
+
+document.addEventListener('DOMContentLoaded', () => {
+    updateSessionId(currentSessionId);
+    displayBotMessage({response: "Welcome! I'm ready to assist you."});
+}); 

ui/index.html

@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>LangChain AI Chatbot</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="chat-container">
+        <header class="chat-header">
+            <h1>AI Chatbot</h1>
+            <div class="header-controls">
+                <select id="responseTypeSelect" class="bg-tertiary border border-primary text-primary text-sm rounded-md focus:ring-accent-user focus:border-accent-user block w-full p-2" style="background-color: var(--bg-tertiary); border-color: var(--border-primary);">
+                    <option value="both">Explain & Code</option>
+                    <option value="conversation">Conversation</option>
+                    <option value="code">Code Only</option>
+                    <option value="explanation">Explanation Only</option>
+                </select>
+                <button id="newSessionBtn" class="btn-icon" title="New Session">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0011.667 0l3.181-3.183m-4.991-2.691V5.25a2.25 2.25 0 00-2.25-2.25L12 3m0 0l-3.181 3.183a8.25 8.25 0 000 11.667l3.181 3.183" /></svg>
+                </button>
+                <button id="clearHistoryBtn" class="btn-icon" title="Clear History">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" /></svg>
+                </button>
+            </div>
+        </header>
+        <main id="chat-window"></main>
+        <footer class="chat-input-area">
+            <textarea id="promptInput" rows="1" placeholder="Ask anything..."></textarea>
+            <button id="generateBtn" class="btn-send">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5" /></svg>
+            </button>
+        </footer>
+    </div>
+    <div id="errorMessage" style="display: none;"></div>
+    <script src="app.js"></script>
+</body>
+</html> 

ui/style.css

@@ -0,0 +1,207 @@
+:root {
+    --bg-primary: #0D1117;
+    --bg-secondary: #161B22;
+    --bg-tertiary: #21262D;
+    --border-primary: #30363D;
+    --text-primary: #C9D1D9;
+    --text-secondary: #8B949E;
+    --accent-user: #2F81F7;
+    --accent-user-hover: #58A6FF;
+    --font-family-sans: 'Inter', sans-serif;
+    --font-family-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
+}
+
+body {
+    font-family: var(--font-family-sans);
+    background-color: var(--bg-primary);
+    color: var(--text-primary);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    padding: 1rem;
+}
+
+.chat-container {
+    background-color: var(--bg-secondary);
+    border: 1px solid var(--border-primary);
+    border-radius: 0.75rem;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+    width: 100%;
+    max-width: 800px;
+    height: 90vh;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+.chat-header {
+    padding: 0.75rem 1.5rem;
+    border-bottom: 1px solid var(--border-primary);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-shrink: 0;
+}
+
+.chat-header h1 {
+    font-size: 1.25rem;
+    font-weight: 600;
+}
+
+.header-controls {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+}
+
+#chat-window {
+    flex-grow: 1;
+    padding: 1.5rem;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.message-bubble {
+    max-width: 75%;
+    padding: 0.75rem 1.25rem;
+    border-radius: 1.25rem;
+    line-height: 1.6;
+    word-wrap: break-word;
+}
+
+.message-bubble.user {
+    background-color: var(--accent-user);
+    color: white;
+    align-self: flex-end;
+    border-bottom-right-radius: 0.375rem;
+}
+
+.message-bubble.bot {
+    background-color: var(--bg-tertiary);
+    color: var(--text-primary);
+    align-self: flex-start;
+    border-bottom-left-radius: 0.375rem;
+}
+
+.bot .content-block {
+    border-top: 1px solid var(--border-primary);
+    margin-top: 0.75rem;
+    padding-top: 0.75rem;
+}
+
+.bot .content-block:first-child {
+    margin-top: 0;
+    padding-top: 0;
+    border-top: none;
+}
+
+.bot h3 {
+    font-size: 0.75rem;
+    text-transform: uppercase;
+    color: var(--text-secondary);
+    margin-bottom: 0.5rem;
+    font-weight: 600;
+}
+
+.bot pre {
+    font-family: var(--font-family-mono);
+    font-size: 0.9rem;
+    background-color: var(--bg-primary);
+    padding: 0.75rem;
+    border-radius: 0.5rem;
+    white-space: pre-wrap;
+    word-break: break-all;
+}
+
+.typing-indicator {
+    display: flex;
+    gap: 0.25rem;
+    align-items: center;
+    padding: 0.75rem 1.25rem;
+}
+.typing-indicator span {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background-color: var(--text-secondary);
+    animation: bounce 1.4s infinite ease-in-out both;
+}
+.typing-indicator span:nth-child(1) { animation-delay: -0.32s; }
+.typing-indicator span:nth-child(2) { animation-delay: -0.16s; }
+@keyframes bounce {
+    0%, 80%, 100% { transform: scale(0); }
+    40% { transform: scale(1.0); }
+}
+
+
+.chat-input-area {
+    padding: 1rem 1.5rem;
+    border-top: 1px solid var(--border-primary);
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+}
+
+.chat-input-area textarea {
+    flex-grow: 1;
+    background-color: var(--bg-tertiary);
+    border: 1px solid var(--border-primary);
+    border-radius: 1.5rem;
+    padding: 0.75rem 1.25rem;
+    color: var(--text-primary);
+    resize: none;
+    outline: none;
+    transition: all 0.2s;
+}
+.chat-input-area textarea:focus {
+    border-color: var(--accent-user);
+    box-shadow: 0 0 0 3px rgba(47, 129, 247, 0.3);
+}
+
+.btn-send {
+    flex-shrink: 0;
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    background-color: var(--accent-user);
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.2s;
+    border: none;
+}
+.btn-send:hover:not(:disabled) {
+    background-color: var(--accent-user-hover);
+}
+.btn-send:disabled {
+    background-color: var(--text-secondary);
+    cursor: not-allowed;
+}
+.btn-send svg {
+    width: 24px;
+    height: 24px;
+}
+
+/* Utility for session management buttons */
+.btn-icon {
+    background: none;
+    border: none;
+    color: var(--text-secondary);
+    cursor: pointer;
+    padding: 0.5rem;
+    border-radius: 50%;
+    transition: all 0.2s;
+}
+.btn-icon:hover {
+    background-color: var(--bg-tertiary);
+    color: var(--text-primary);
+}
+.btn-icon svg { width: 20px; height: 20px; }
+
+/* Hiding original elements not needed in chat UI */
+#historyContainer, #rawResponseDisplay, #getHistoryBtn { display: none !important; }