Frontend Documentation

מבנה קבצים

app/
├── templates/
│   └── mcp-chatbot.html         # HTML Template (400 lines)
│
└── static/
    ├── js/
    │   └── modules/
    │       └── mcp-chatbot-manager.js  # JavaScript Manager (750 lines)
    │
    ├── css/
    │   └── modules/
    │       └── mcp-chatbot.css         # Custom Styles (420 lines)
    │
    └── docs/
        └── mcp-chatbot/
            ├── index.html
            ├── architecture.html
            ├── api-reference.html
            ├── database.html
            ├── intents.html
            ├── functions.html
            ├── prompts.html
            ├── knowledge-base.html
            ├── getting-started.html
            └── frontend.html

MCPChatbotManager Class

המחלקה הראשית שמנהלת את כל הלוגיקה של הצ'אטבוט בצד הלקוח:

class MCPChatbotManager {
    constructor() {
        this.conversations = [];
        this.currentConversationId = null;
        this.isTyping = false;
        this.settings = {};

        this.initializeElements();
        this.bindEvents();
        this.loadConversations();
        this.initSystem();
    }
}

// Initialize on document ready
document.addEventListener('DOMContentLoaded', () => {
    window.mcpChatbot = new MCPChatbotManager();
});

מתודות עיקריות:

מתודה	תיאור	פרמטרים
initializeElements()	אתחול כל רפרנסים ל-DOM elements	-
bindEvents()	הצמדת event listeners	-
loadConversations()	טעינת רשימת שיחות מה-API	-
createConversation()	יצירת שיחה חדשה	-
loadConversation(id)	טעינת שיחה קיימת	conversationId: number
sendMessage()	שליחת הודעה לשרת	-
renderMessage(msg, isUser)	רינדור הודעה בממשק	message: object, isUser: boolean
showTypingIndicator()	הצגת אנימציית "מקליד..."	-
hideTypingIndicator()	הסתרת אנימציית הקלדה	-
deleteConversation(id)	מחיקת שיחה	conversationId: number
openSettings()	פתיחת מודל הגדרות	-
saveSettings()	שמירת הגדרות	-

API Client Methods

מתודות לתקשורת עם ה-Backend:

// Generic API call method
async apiCall(endpoint, method = 'GET', data = null) {
    const options = {
        method,
        headers: { 'Content-Type': 'application/json' }
    };

    if (data) {
        options.body = JSON.stringify(data);
    }

    const response = await fetch(`/api/mcp-chatbot${endpoint}`, options);
    return response.json();
}

// Example usage
async loadConversations() {
    const result = await this.apiCall('/conversations');
    if (result.success) {
        this.conversations = result.conversations;
        this.renderConversationList();
    }
}

async sendMessage() {
    const message = this.messageInput.value.trim();
    if (!message) return;

    // Show user message
    this.renderMessage({ content: message }, true);
    this.messageInput.value = '';
    this.showTypingIndicator();

    // Send to server
    const result = await this.apiCall(
        `/conversations/${this.currentConversationId}/messages`,
        'POST',
        { message }
    );

    this.hideTypingIndicator();

    if (result.success) {
        this.renderMessage({
            content: result.response,
            function_called: result.function_called,
            intent: result.intent
        }, false);
    }
}

HTML Template Structure

מבנה ה-HTML הראשי של הצ'אטבוט:

<div class="mcp-container">
    <!-- Sidebar -->
    <aside class="mcp-sidebar">
        <div class="mcp-sidebar-header">
            <button id="newChatBtn">שיחה חדשה</button>
        </div>
        <div id="conversationList" class="mcp-conversation-list">
            <!-- Dynamic conversation items -->
        </div>
    </aside>

    <!-- Main Chat Area -->
    <main class="mcp-main">
        <!-- Welcome Screen (shown when no chat) -->
        <div id="welcomeScreen" class="mcp-welcome">
            <h2>MCP Chatbot</h2>
            <p>איך אפשר לעזור?</p>
            <div class="mcp-quick-actions">
                <!-- Quick action buttons -->
            </div>
        </div>

        <!-- Chat Area (hidden initially) -->
        <div id="chatArea" class="mcp-chat-area" style="display:none">
            <div id="messagesContainer" class="mcp-messages">
                <!-- Dynamic messages -->
            </div>
        </div>

        <!-- Input Area -->
        <div class="mcp-input-area">
            <textarea id="messageInput" placeholder="הקלד הודעה..."></textarea>
            <button id="sendBtn">שלח</button>
        </div>
    </main>
</div>

<!-- Settings Modal -->
<div id="settingsModal" class="modal">
    <!-- Modal content -->
</div>

CSS Variables (Theming)

משתני CSS להתאמה אישית של העיצוב:

משתנה	ערך ברירת מחדל	שימוש
--mcp-primary	#667eea	צבע ראשי
--mcp-secondary	#764ba2	צבע משני
--mcp-background	#f8fafc	רקע כללי
--mcp-sidebar-bg	linear-gradient(...)	רקע סרגל צד
--mcp-user-bubble	linear-gradient(...)	בועת הודעת משתמש
--mcp-bot-bubble	#ffffff	בועת הודעת בוט
--mcp-text-primary	#1e293b	צבע טקסט ראשי
--mcp-text-secondary	#64748b	צבע טקסט משני
--mcp-border	#e2e8f0	צבע גבולות
--mcp-shadow	0 2px 12px rgba(0,0,0,0.08)	צל כרטיסים

דוגמה להתאמה אישית:

/* Custom theme override */
:root {
    --mcp-primary: #10b981;      /* Green theme */
    --mcp-secondary: #059669;
    --mcp-user-bubble: linear-gradient(135deg, #10b981, #059669);
}

/* Dark mode */
[data-theme="dark"] {
    --mcp-background: #1e293b;
    --mcp-bot-bubble: #334155;
    --mcp-text-primary: #f8fafc;
    --mcp-text-secondary: #94a3b8;
}

CSS Classes Reference

Class	שימוש	אלמנט
`.mcp-container`	מכיל ראשי של הצ'אטבוט	div
`.mcp-sidebar`	סרגל צד עם רשימת שיחות	aside
`.mcp-main`	אזור הצ'אט הראשי	main
`.mcp-welcome`	מסך פתיחה עם פעולות מהירות	div
`.mcp-messages`	מכיל את רשימת ההודעות	div
`.mcp-message`	הודעה בודדת	div
`.mcp-message.user`	הודעת משתמש (צד ימין)	div
`.mcp-message.bot`	הודעת בוט (צד שמאל)	div
`.mcp-bubble`	בועת הודעה	div
`.mcp-input-area`	אזור הקלט בתחתית	div
`.mcp-typing`	אינדיקטור "מקליד..."	div
`.mcp-quick-action`	כפתור פעולה מהירה	button

JavaScript Events

אירועים מותאמים שמופעלים על ידי המערכת:

// Custom events dispatched by MCPChatbotManager

// When a new conversation is created
document.dispatchEvent(new CustomEvent('mcp:conversation:created', {
    detail: { conversationId, title }
}));

// When a message is sent
document.dispatchEvent(new CustomEvent('mcp:message:sent', {
    detail: { conversationId, message }
}));

// When a response is received
document.dispatchEvent(new CustomEvent('mcp:message:received', {
    detail: { conversationId, response, intent, function_called }
}));

// When settings are saved
document.dispatchEvent(new CustomEvent('mcp:settings:saved', {
    detail: { settings }
}));

// Listen to events
document.addEventListener('mcp:message:received', (e) => {
    console.log('Bot responded:', e.detail.response);
    console.log('Intent:', e.detail.intent);
});

Dependencies

ספריות חיצוניות בשימוש:

ספרייה	גרסה	שימוש
Bootstrap	5.3.0	Grid system, components, RTL support
Bootstrap Icons	1.11.0	אייקונים
SweetAlert2	11.x	הודעות ואזהרות
Marked.js	Optional	עיבוד Markdown בתגובות

CDN Links:

<!-- Bootstrap RTL -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.rtl.min.css" rel="stylesheet">

<!-- Bootstrap Icons -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css" rel="stylesheet">

<!-- SweetAlert2 -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

מדריך התאמה אישית

1. שינוי צבעים

הוסף קובץ CSS משלך והגדר מחדש את המשתנים:

/* my-theme.css */
:root {
    --mcp-primary: #your-color;
}

2. הוספת פונקציונליות

האזן לאירועים והוסף לוגיקה משלך:

// my-extension.js
document.addEventListener('mcp:message:received', (e) => {
    // Your custom logic
});

3. הרחבת המחלקה

ירש מ-MCPChatbotManager ועקוף מתודות:

class CustomChatbot extends MCPChatbotManager {
    renderMessage(msg, isUser) {
        // Custom rendering
        super.renderMessage(msg, isUser);
        // Additional logic
    }
}