ui/components.py

import gradio as gr
import logging
import modelscope_studio.components.pro as pro
from modelscope_studio.components.pro.chatbot import (
    ChatbotBotConfig, ChatbotDataMessage,
    ChatbotPromptsConfig, ChatbotUserConfig, ChatbotWelcomeConfig,
    ChatbotActionConfig
)
from modelscope_studio.components.pro.multimodal_input import MultimodalInputUploadConfig

logger = logging.getLogger(__name__)

def create_header():
    """Create the header markdown component and content"""
    return gr.Markdown(
        """
        # 🏥 Trợ Lý Sức Khỏe AI
        ### Sức khỏe của bạn cũng là sức khỏe của chúng tôi
        
        ⚠️ **Lưu ý:** Đây là tư vấn tham khảo. Hãy gặp bác sĩ cho các vấn đề nghiêm trọng.
        """
    )


def create_chatbot():
    """Create the chatbot component with welcome config and prompts"""
    return pro.Chatbot(
        value=[],  # Start with empty history
        height=800,  # Use flex=1 to fill remaining space
        elem_style=dict(flex=1, border="1px solid #eee", borderRadius="8px", padding="10px"),
        welcome_config=ChatbotWelcomeConfig(
            variant="borderless",
            icon="https://photoavatarmaker.com/wp-content/uploads/2025/04/doctor-avatar-sample.jpeg",
            title="Xin chào, tôi là Trợ Lý Sức Khỏe AI",
            description="Bạn có thể upload hình ảnh và nhập text để bắt đầu.",
            prompts=ChatbotPromptsConfig(
                title="Tôi có thể giúp bạn gì hôm nay?",
                styles={
                    "list": {
                        "width": '100%',
                    },
                    "item": {
                        "flex": 1,
                    },
                },
                items=[{
                    "label": "📅 Lập kế hoạch",
                    "children": [{
                        "description": "Giúp tôi lập kế hoạch chế độ ăn uống"
                    }, {
                        "description": "Giúp tôi lập kế hoạch tập luyện"
                    }, {
                        "description": "Giúp tôi lập kế hoạch sức khỏe toàn diện"
                    }]
                }, {
                    "label": "🏥 Tư vấn sức khỏe",
                    "children": [{
                        "description": "Tôi bị đau đầu thường xuyên, nên làm gì?"
                    }, {
                        "description": "Làm thế nào để cải thiện giấc ngủ?"
                    }, {
                        "description": "Tôi nên ăn gì để tăng cường miễn dịch?"
                    }]
                }])),
        user_config=ChatbotUserConfig(
            actions=["copy", "edit"],
            avatar="https://api.dicebear.com/7.x/miniavs/svg?seed=3"
        ),
        bot_config=ChatbotBotConfig(
            header="Trợ Lý Sức Khỏe AI",
            actions=["copy", "like", "dislike", "retry",
                     ChatbotActionConfig(
                         action="delete",
                         popconfirm=dict(
                             title="Delete the message",
                             description="Are you sure to delete this message?",
                             okButtonProps=dict(danger=True))
                     )
                     ],
            avatar="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*s5sNRo5LjfQAAAAAAAAAAAAADgCCAQ/fmt.webp"
        ),
    )


def create_input_row():
    """Create the input block with textbox and submit button inside same container"""
    with gr.Group(elem_classes=["input-block"]) as block:
        gr.Markdown("💡 Mô tả chi tiết vấn đề của bạn để nhận được lời khuyên phù hợp nhất", elem_classes=["input-label"])
        with gr.Row(elem_classes=["input-row"]):
            message = gr.Textbox(
                label="Nhập tin nhắn của bạn",
                placeholder="Ví dụ: Tôi bị đau đầu thường xuyên, nên làm gì?",
                elem_classes=["message-input"],
                scale=9,
                show_label=False,
                container=False
            )
            submit_btn = gr.Button("Gửi", variant="primary", scale=1, size="sm")

    return block, message, submit_btn


def create_clear_button():
    """Create the clear button as a badge overlay"""
    clear_btn = gr.Button("Xóa lịch sử", variant="secondary", size="sm", elem_classes=["clear-badge"])
    return clear_btn


def create_top_header():
    """Create the top header"""
    with gr.Row() as row:
        welcome_text = gr.Markdown("")
        login_btn = gr.Button("🔐 Đăng nhập", scale=1,
                              elem_classes=["small-button"])
        logout_btn = gr.Button("🔐 Đăng xuất", visible=False,
                               scale=1, elem_classes=["small-button"])

    return row, welcome_text, login_btn, logout_btn


def create_login_form():
    with gr.Column(visible=False, elem_id="login-form", elem_classes=["login-form-container"]) as column:
        gr.Markdown("## 🔐 Đăng nhập để lưu lịch sử",
                    elem_id="login-title", elem_classes=["login-title"])
        username = gr.Textbox(
            label="👤 Tên đăng nhập", placeholder="Nhập tên đăng nhập...", lines=1, elem_classes=["login-input"])
        password = gr.Textbox(label="🔑 Mật khẩu", placeholder="Nhập mật khẩu...",
                              type="password", lines=1, elem_classes=["login-input"])
        with gr.Row(elem_classes=["login-buttons"]):
            login_submit = gr.Button(
                "Đăng nhập", variant="primary", elem_classes=["login-btn"])
            register_btn = gr.Button(
                "Đăng ký", variant="secondary", elem_classes=["register-btn"])
        back_btn = gr.Button("Trở lại", variant="primary",
                             elem_classes=["back-btn"])
        status = gr.Textbox(label="Trạng thái",
                            interactive=False, elem_classes=["login-status"])

    return column, username, password, login_submit, register_btn, back_btn, status