diy-cloth1/src/app/components/shared/ai-chat/ai-chat.component.html

<div class="ai-chat-container">
    <!-- 对话头部 -->
    <div class="ai-chat-header">
        <div class="ai-chat-avatar">
            <span class="avatar-icon">🤖</span>
            <div class="avatar-status"></div>
        </div>
        <div class="ai-chat-info">
            <h3>AI时尚顾问 <span style="font-size: 12px; background: linear-gradient(45deg, #ff6b6b, #ffa726); padding: 2px 6px; border-radius: 8px; color: white;">DeepSeek驱动</span></h3>
            <p>{{ aiChatSubtitle }}</p>
        </div>
        <button class="ai-chat-close" (click)="closeChat()">✕</button>
    </div>

    <!-- 对话消息区 -->
    <div class="ai-chat-messages" #aiChatMessages>
        <div *ngFor="let message of messages" [ngClass]="{'ai-message': message.sender === 'ai', 'user-message': message.sender === 'user'}">
            <div class="message-avatar">{{ message.sender === 'ai' ? '🤖' : '👤' }}</div>
            <div class="message-content">
                <div class="message-text" [class.ai-formatted]="message.isFormatted" [innerHTML]="message.htmlText"></div>
                <div class="message-time">{{ message.timestamp | date:'HH:mm' }}</div>
            </div>
        </div>
        <div *ngIf="isLoading" class="ai-message loading-message" id="ai-loading-message">
            <div class="message-avatar">🤖</div>
            <div class="message-content">
                <div class="message-text">
                    <span class="loading-dots">DeepSeek AI正在思考中<span class="dots">...</span></span>
                </div>
            </div>
        </div>
    </div>

    <!-- 快捷指令 -->
    <div class="ai-quick-commands">
        <div class="quick-command" (click)="sendQuickCommand('帮我搭配一套商务装')">
            <span class="command-icon">👔</span>
            <span>商务装搭配</span>
        </div>
        <div class="quick-command" (click)="sendQuickCommand('推荐春季流行色')">
            <span class="command-icon">🌸</span>
            <span>春季流行色</span>
        </div>
        <div class="quick-command" (click)="sendQuickCommand('分析我的穿衣风格')">
            <span class="command-icon">✨</span>
            <span>风格分析</span>
        </div>
        <div class="quick-command" (click)="sendQuickCommand('约会穿什么好看')">
            <span class="command-icon">💕</span>
            <span>约会搭配</span>
        </div>
    </div>

    <!-- 输入工具栏 -->
    <div class="ai-chat-input-area">
        <div class="input-toolbar">
            <button class="input-tool" (click)="startVoiceInput()" title="语音输入">
                <span class="tool-icon">🎤</span>
            </button>
            <button class="input-tool" (click)="uploadImage()" title="图片识别">
                <span class="tool-icon">📷</span>
            </button>
            <button class="input-tool" (click)="showEmoji()" title="表情">
                <span class="tool-icon">😊</span>
            </button>
        </div>
        <div class="input-container">
            <input 
                type="text" 
                [(ngModel)]="newMessage"
                placeholder="说说你的搭配需求..." 
                (keyup.enter)="sendMessage()"
            >
            <button class="send-button" (click)="sendMessage()">
                <span class="send-icon">➤</span>
            </button>
        </div>
    </div>
</div>