templates/index.html

{% extends "base.html" %}

{% block content %}
<div class="chat-container">
    <div class="chat-sidebar">
        <button id="new-chat-btn" class="new-chat-btn">
            <i class="fas fa-plus"></i> Новый чат
        </button>
        <div class="chat-list" id="chat-list">
            {% for chat in chats %}
            <div class="chat-item" data-chat-id="{{ chat['chat_id'] }}">
                <div class="chat-item-main">
                    <i class="fas fa-comment chat-icon"></i>
                    <div class="chat-item-content">
                        <span class="chat-title">{{ chat['title'] }}</span>
                        <span class="chat-date">{{ chat['created_at'].strftime('%d.%m.%Y') if chat['created_at'] else '' }}</span>
                    </div>
                </div>
                <button class="delete-chat-btn" title="Удалить чат">
                    <i class="fas fa-trash"></i>
                </button>
            </div>
            {% endfor %}
        </div>
    </div>

    <div class="chat-main">
        <div class="chat-header">
            <h3 id="current-chat-title">Анализатор эмоций</h3>
        </div>
        
        <div id="chat-box" class="chat-box">
            <div class="welcome-message">
                <div class="welcome-icon">
                    <i class="fas fa-robot"></i>
                </div>
                <h4>Привет! Я помогу проанализировать эмоции</h4>
                <p>Отправьте текст или голосовое сообщение для анализа</p>
            </div>
        </div>

        <div class="chat-controls">
            <div class="input-group">
                <input type="text" id="user-input" class="chat-input" placeholder="Введите сообщение...">
                <button id="send-btn" class="send-btn">
                    <i class="fas fa-paper-plane"></i>
                </button>
            </div>

            <div class="audio-controls">
                <div class="file-upload">
                    <label for="audio-file" id="upload-btn" class="file-upload-btn">
                        <i class="fas fa-file-audio"></i> Загрузить аудио
                    </label>
                    <input type="file" id="audio-file" accept="audio/*">
                    <div id="file-info" class="file-info">
                        <span id="file-name"></span>
                        <button id="clear-file" class="clear-file-btn">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                </div>

                <div class="record-controls">
                    <button id="record-btn" class="record-btn">
                        <i class="fas fa-microphone"></i>
                    </button>
                    <button id="stop-btn" class="stop-btn" disabled>
                        <i class="fas fa-stop"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}