tabby-ai-assistant 1.0.8 → 1.0.10

package/src/components/chat/chat-interface.component.scss

@@ -3,7 +3,7 @@
     flex-direction: column;
     height: 100%;
     background-color: var(--ai-bg-primary);
-    color: var(--ai-dark);
+    color: var(--ai-text-primary);
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
 }
 
@@ -67,7 +67,7 @@
 
             &:hover {
                 background-color: var(--ai-border);
-                color: var(--ai-dark);
+                color: var(--ai-text-primary);
             }
 
             &.danger:hover {
@@ -207,7 +207,7 @@
         .message-content {
             .message-bubble {
                 background-color: var(--ai-assistant-message);
-                color: var(--ai-dark);
+                color: var(--ai-text-primary);
                 border-bottom-left-radius: 0.25rem;
             }
         }
@@ -227,7 +227,7 @@
         .message-content {
             .message-bubble {
                 background-color: var(--ai-system-message);
-                color: var(--ai-dark);
+                color: var(--ai-text-primary);
                 border-radius: 0.5rem;
                 font-style: italic;
             }
@@ -235,6 +235,54 @@
     }
 }
 
+/* 紧凑模式 */
+.ai-chat-container.compact-mode {
+    padding: 0.5rem;
+
+    .message-item {
+        gap: 0.5rem;
+        margin-bottom: 0.25rem;
+
+        .message-avatar {
+            .avatar {
+                width: 28px;
+                height: 28px;
+                font-size: 0.875rem;
+            }
+        }
+
+        .message-content {
+            .message-bubble {
+                padding: 0.4rem 0.75rem;
+                font-size: calc(var(--chat-font-size, 14px) - 1px);
+            }
+
+            .message-time {
+                font-size: 0.625rem;
+                padding: 0 0.25rem;
+            }
+        }
+    }
+
+    .messages-wrapper {
+        gap: 0.5rem;
+    }
+
+    .date-separator {
+        margin: 0.5rem 0;
+
+        .date-text {
+            font-size: 0.75rem;
+            padding: 0 0.5rem;
+        }
+    }
+}
+
+/* 字体大小应用 */
+.message-bubble {
+    font-size: var(--chat-font-size, 14px);
+}
+
 /* 头像 */
 .message-avatar {
     flex-shrink: 0;
@@ -401,4 +449,362 @@
             font-size: 0.8rem;
         }
     }
+}
+
+// ============================================
+// 像素风格主题 (Pixel Retro)
+// ============================================
+.ai-chat-interface.ai-theme-pixel,
+.ai-chat-interface[data-ai-theme="pixel"] {
+    background-color: #0f380f !important;
+    color: #9bbc0f !important;
+
+    .ai-chat-header {
+        background: #1a2a1a !important;
+        border-color: #9bbc0f !important;
+
+        .ai-title {
+            color: #9bbc0f !important;
+        }
+
+        .provider-badge {
+            background: #306230 !important;
+            border: 2px solid #9bbc0f !important;
+        }
+
+        .btn-icon {
+            color: #9bbc0f !important;
+            border: 2px solid #9bbc0f !important;
+
+            &:hover {
+                background: #9bbc0f !important;
+                color: #0f380f !important;
+            }
+        }
+    }
+
+    .ai-chat-container {
+        .message-item {
+            &.user-message {
+                .message-bubble {
+                    background: #0f380f !important;
+                    border: 3px solid #9bbc0f !important;
+                    border-radius: 0 !important;
+                    color: #9bbc0f !important;
+                }
+            }
+
+            &.assistant-message {
+                .message-bubble {
+                    background: #306230 !important;
+                    border: 3px solid #9bbc0f !important;
+                    border-radius: 0 !important;
+                    color: #9bbc0f !important;
+                }
+            }
+
+            &.system-message {
+                .message-bubble {
+                    background: #1a1a1a !important;
+                    border: 2px solid #ffeb3b !important;
+                    border-radius: 0 !important;
+                    color: #ffeb3b !important;
+                }
+            }
+        }
+
+        .date-separator::before {
+            background-color: #9bbc0f !important;
+        }
+
+        .date-text {
+            background-color: #0f380f !important;
+            color: #9bbc0f !important;
+        }
+    }
+
+    .scroll-btn {
+        background: #306230 !important;
+        border: 2px solid #9bbc0f !important;
+        color: #9bbc0f !important;
+    }
+
+    .ai-chat-input {
+        background: #1a2a1a !important;
+        border-color: #9bbc0f !important;
+    }
+
+    .chat-tips {
+        background: rgba(155, 188, 15, 0.1) !important;
+        border-color: #9bbc0f !important;
+
+        .tip-item {
+            color: #9bbc0f !important;
+        }
+    }
+
+    // 输入框
+    .chat-textarea {
+        background: #0f380f !important;
+        border: 3px solid #9bbc0f !important;
+        border-radius: 0 !important;
+        color: #9bbc0f !important;
+        font-family: 'Courier New', monospace !important;
+
+        &:focus {
+            outline: none;
+            border-color: #8bac0f !important;
+            box-shadow: 4px 4px 0 rgba(48, 98, 48, 0.8) !important;
+        }
+
+        &::placeholder {
+            color: rgba(155, 188, 15, 0.5) !important;
+        }
+    }
+
+    // 发送按钮
+    .send-btn {
+        background: #306230 !important;
+        border: 3px solid #9bbc0f !important;
+        border-radius: 0 !important;
+        color: #9bbc0f !important;
+
+        &:hover:not(:disabled) {
+            background: #9bbc0f !important;
+            color: #0f380f !important;
+        }
+
+        &:disabled {
+            opacity: 0.5;
+        }
+    }
+
+    h2, h3, h4 {
+        font-family: 'Courier New', monospace !important;
+        letter-spacing: 1px !important;
+    }
+}
+
+// ============================================
+// 科技风格主题 (Cyber Tech)
+// ============================================
+.ai-chat-interface.ai-theme-tech,
+.ai-chat-interface[data-ai-theme="tech"] {
+    background-color: #0a0a0f !important;
+    color: #00fff9 !important;
+
+    .ai-chat-header {
+        background: linear-gradient(90deg, #12121a 0%, #1a1a2e 100%) !important;
+        border-color: rgba(0, 255, 249, 0.3) !important;
+
+        .ai-title {
+            color: #00fff9 !important;
+            text-shadow: 0 0 10px rgba(0, 255, 249, 0.5) !important;
+        }
+
+        .provider-badge {
+            background: rgba(0, 255, 249, 0.1) !important;
+            border: 1px solid #00fff9 !important;
+            color: #00fff9 !important;
+            box-shadow: 0 0 10px rgba(0, 255, 249, 0.3) !important;
+        }
+
+        .btn-icon {
+            color: #00fff9 !important;
+            border: 1px solid rgba(0, 255, 249, 0.3) !important;
+            box-shadow: 0 0 5px rgba(0, 255, 249, 0.2) !important;
+
+            &:hover {
+                background: rgba(0, 255, 249, 0.2) !important;
+                box-shadow: 0 0 15px rgba(0, 255, 249, 0.4) !important;
+            }
+
+            &.danger:hover {
+                background: rgba(255, 51, 102, 0.3) !important;
+                border-color: #ff3366 !important;
+                box-shadow: 0 0 15px rgba(255, 51, 102, 0.4) !important;
+            }
+        }
+    }
+
+    .ai-chat-container {
+        background: repeating-linear-gradient(
+            0deg,
+            transparent,
+            transparent 2px,
+            rgba(0, 255, 249, 0.02) 2px,
+            rgba(0, 255, 249, 0.02) 4px
+        ) !important;
+
+        .message-item {
+            &.user-message {
+                .message-bubble {
+                    background: linear-gradient(
+                        135deg,
+                        rgba(0, 255, 249, 0.15) 0%,
+                        rgba(0, 255, 249, 0.05) 100%
+                    ) !important;
+                    border: 1px solid rgba(0, 255, 249, 0.4) !important;
+                    border-radius: 4px !important;
+                    color: #00fff9 !important;
+                    box-shadow:
+                        0 0 10px rgba(0, 255, 249, 0.2),
+                        inset 0 0 20px rgba(0, 255, 249, 0.05) !important;
+                }
+
+                .avatar.user {
+                    background: linear-gradient(135deg, #00fff9 0%, #00e6e0 100%) !important;
+                    box-shadow: 0 0 10px rgba(0, 255, 249, 0.5) !important;
+                }
+            }
+
+            &.assistant-message {
+                .message-bubble {
+                    background: linear-gradient(
+                        135deg,
+                        rgba(255, 0, 255, 0.1) 0%,
+                        rgba(255, 0, 255, 0.05) 100%
+                    ) !important;
+                    border: 1px solid rgba(255, 0, 255, 0.3) !important;
+                    border-radius: 4px !important;
+                    color: #f8f9fa !important;
+                    box-shadow:
+                        0 0 10px rgba(255, 0, 255, 0.15),
+                        inset 0 0 20px rgba(255, 0, 255, 0.05) !important;
+                }
+
+                .avatar.assistant {
+                    background: linear-gradient(135deg, #ff00ff 0%, #e600e6 100%) !important;
+                    box-shadow: 0 0 10px rgba(255, 0, 255, 0.5) !important;
+                }
+            }
+
+            &.system-message {
+                .message-bubble {
+                    background: rgba(0, 255, 136, 0.1) !important;
+                    border: 1px solid rgba(0, 255, 136, 0.4) !important;
+                    border-radius: 4px !important;
+                    color: #00ff88 !important;
+                    box-shadow: 0 0 10px rgba(0, 255, 136, 0.2) !important;
+                }
+
+                .avatar.system {
+                    background: linear-gradient(135deg, #00ff88 0%, #00cc6a 100%) !important;
+                    box-shadow: 0 0 10px rgba(0, 255, 136, 0.5) !important;
+                }
+            }
+        }
+
+        .date-separator::before {
+            background: linear-gradient(
+                90deg,
+                transparent,
+                rgba(0, 255, 249, 0.3),
+                transparent
+            ) !important;
+        }
+
+        .date-text {
+            background-color: #0a0a0f !important;
+            color: rgba(0, 255, 249, 0.7) !important;
+            border: 1px solid rgba(0, 255, 249, 0.2) !important;
+            border-radius: 4px !important;
+        }
+    }
+
+    .scroll-btn {
+        background: linear-gradient(135deg, #12121a 0%, #1a1a2e 100%) !important;
+        border: 1px solid #00fff9 !important;
+        color: #00fff9 !important;
+        box-shadow: 0 0 15px rgba(0, 255, 249, 0.3) !important;
+
+        &:hover {
+            box-shadow: 0 0 25px rgba(0, 255, 249, 0.5) !important;
+        }
+    }
+
+    .ai-chat-input {
+        background: linear-gradient(180deg, #12121a 0%, #0a0a0f 100%) !important;
+        border-color: rgba(0, 255, 249, 0.2) !important;
+        box-shadow: 0 -5px 20px rgba(0, 255, 249, 0.1) !important;
+    }
+
+    .chat-tips {
+        background: rgba(0, 255, 249, 0.03) !important;
+        border-color: rgba(0, 255, 249, 0.2) !important;
+
+        .tip-item {
+            color: rgba(0, 255, 249, 0.8) !important;
+            text-shadow: 0 0 5px rgba(0, 255, 249, 0.3) !important;
+        }
+    }
+
+    // 输入框
+    .chat-textarea {
+        background: rgba(0, 255, 249, 0.05) !important;
+        border: 1px solid rgba(0, 255, 249, 0.3) !important;
+        border-radius: 4px !important;
+        color: #00fff9 !important;
+        font-family: 'Segoe UI', 'Share Tech Mono', monospace !important;
+        box-shadow:
+            0 0 10px rgba(0, 255, 249, 0.1),
+            inset 0 0 20px rgba(0, 255, 249, 0.05) !important;
+
+        &:focus {
+            outline: none;
+            border-color: #00fff9 !important;
+            box-shadow:
+                0 0 20px rgba(0, 255, 249, 0.3),
+                inset 0 0 30px rgba(0, 255, 249, 0.1) !important;
+        }
+
+        &::placeholder {
+            color: rgba(0, 255, 249, 0.4) !important;
+        }
+    }
+
+    // 发送按钮
+    .send-btn {
+        background: linear-gradient(135deg, rgba(0, 255, 249, 0.2) 0%, rgba(0, 255, 249, 0.1) 100%) !important;
+        border: 1px solid #00fff9 !important;
+        border-radius: 4px !important;
+        color: #00fff9 !important;
+        box-shadow:
+            0 0 10px rgba(0, 255, 249, 0.2),
+            inset 0 0 10px rgba(0, 255, 249, 0.1) !important;
+
+        &:hover:not(:disabled) {
+            background: linear-gradient(135deg, rgba(0, 255, 249, 0.4) 0%, rgba(0, 255, 249, 0.2) 100%) !important;
+            box-shadow:
+                0 0 20px rgba(0, 255, 249, 0.4),
+                inset 0 0 20px rgba(0, 255, 249, 0.2) !important;
+        }
+
+        &:disabled {
+            opacity: 0.5;
+            box-shadow: none !important;
+        }
+    }
+
+    // 加载指示器
+    .loading-indicator {
+        background: rgba(0, 255, 249, 0.05) !important;
+        border: 1px solid rgba(0, 255, 249, 0.2) !important;
+
+        .typing-indicator span {
+            background: #00fff9 !important;
+            box-shadow: 0 0 10px #00fff9 !important;
+        }
+
+        .loading-text {
+            color: rgba(0, 255, 249, 0.7) !important;
+        }
+    }
+
+    h2, h3, h4 {
+        font-family: 'Segoe UI', 'Share Tech Mono', monospace !important;
+        text-shadow:
+            0 0 10px rgba(0, 255, 249, 0.5),
+            0 0 20px rgba(0, 255, 249, 0.3) !important;
+    }
 }

package/src/components/chat/chat-interface.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy, ViewChild, ElementRef, AfterViewChecked } from '@angular/core';
+import { Component, OnInit, OnDestroy, ViewChild, ElementRef, AfterViewChecked, ViewEncapsulation } from '@angular/core';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { ChatMessage, MessageRole, StreamEvent } from '../../types/ai.types';
@@ -7,11 +7,13 @@ import { ConfigProviderService } from '../../services/core/config-provider.servi
 import { LoggerService } from '../../services/core/logger.service';
 import { ChatHistoryService } from '../../services/chat/chat-history.service';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { TranslateService } from '../../i18n';
 
 @Component({
     selector: 'app-chat-interface',
     templateUrl: './chat-interface.component.html',
-    styleUrls: ['./chat-interface.component.scss']
+    styleUrls: ['./chat-interface.component.scss'],
+    encapsulation: ViewEncapsulation.None
 })
 export class ChatInterfaceComponent implements OnInit, OnDestroy, AfterViewChecked {
     @ViewChild('chatContainer') chatContainerRef!: ElementRef;
@@ -22,21 +24,50 @@ export class ChatInterfaceComponent implements OnInit, OnDestroy, AfterViewCheck
     currentSessionId: string = '';
     showScrollTop = false;
     showScrollBottom = false;
+
+    // UI 设置（从配置加载）
+    showTimestamps: boolean = true;
+    showAvatars: boolean = true;
+    soundEnabled: boolean = false;
+    compactMode: boolean = false;
+    fontSize: number = 14;
+
+    // 翻译对象
+    t: any;
+
     private destroy$ = new Subject<void>();
     private shouldScrollToBottom = false;
+    private notificationSound: HTMLAudioElement | null = null;
 
     constructor(
         private aiService: AiAssistantService,
         private config: ConfigProviderService,
         private logger: LoggerService,
         private modal: NgbModal,
-        private chatHistory: ChatHistoryService
-    ) { }
+        private chatHistory: ChatHistoryService,
+        private translate: TranslateService
+    ) {
+        this.t = this.translate.t;
+    }
 
     ngOnInit(): void {
+        // 监听语言变化
+        this.translate.translation$.pipe(
+            takeUntil(this.destroy$)
+        ).subscribe(translation => {
+            this.t = translation;
+            // 如果有欢迎消息，重新发送以更新语言
+            if (this.messages.length > 0 && this.messages[0].role === MessageRole.ASSISTANT) {
+                this.sendWelcomeMessage();
+            }
+        });
+
         // 生成或加载会话 ID
         this.currentSessionId = this.generateSessionId();
 
+        // 加载 UI 设置
+        this.loadUISettings();
+
         // 加载当前提供商信息
         this.loadCurrentProvider();
 
@@ -52,6 +83,38 @@ export class ChatInterfaceComponent implements OnInit, OnDestroy, AfterViewCheck
         setTimeout(() => this.checkScrollState(), 100);
     }
 
+    /**
+     * 加载 UI 设置
+     */
+    private loadUISettings(): void {
+        this.showTimestamps = this.config.get<boolean>('ui.showTimestamps', true) ?? true;
+        this.showAvatars = this.config.get<boolean>('ui.showAvatars', true) ?? true;
+        this.soundEnabled = this.config.get<boolean>('ui.soundEnabled', false) ?? false;
+        this.compactMode = this.config.get<boolean>('ui.compactMode', false) ?? false;
+        this.fontSize = this.config.get<number>('ui.fontSize', 14) ?? 14;
+
+        // 应用设置
+        this.applyStoredSettings();
+    }
+
+    /**
+     * 应用存储的 UI 设置
+     */
+    private applyStoredSettings(): void {
+        // 应用字体大小
+        document.documentElement.style.setProperty('--chat-font-size', `${this.fontSize}px`);
+
+        // 应用紧凑模式
+        const container = document.querySelector('.ai-chat-container');
+        if (container) {
+            if (this.compactMode) {
+                container.classList.add('compact-mode');
+            } else {
+                container.classList.remove('compact-mode');
+            }
+        }
+    }
+
     ngOnDestroy(): void {
         // 保存当前会话
         this.saveChatHistory();
@@ -121,7 +184,7 @@ export class ChatInterfaceComponent implements OnInit, OnDestroy, AfterViewCheck
         const welcomeMessage: ChatMessage = {
             id: this.generateId(),
             role: MessageRole.ASSISTANT,
-            content: `您好！我是AI助手。\n\n我可以帮助您：\n• 将自然语言转换为终端命令\n• 解释复杂的命令\n• 分析命令执行结果\n• 提供错误修复建议\n\n当前使用：${this.currentProvider}\n\n请输入您的问题或描述您想执行的命令。`,
+            content: `${this.t.chatInterface.welcomeMessage}\n\n${this.t.chatInterface.tipCommand}\n\n${this.t.chatInterface.tipShortcut}`,
             timestamp: new Date()
         };
         this.messages.push(welcomeMessage);
@@ -179,22 +242,23 @@ export class ChatInterfaceComponent implements OnInit, OnDestroy, AfterViewCheck
                     }
                     // 工具调用开始 - 显示提示
                     else if (event.type === 'tool_use_start') {
-                        aiMessage.content += '\n\n🔧 正在执行工具...';
+                        aiMessage.content += `\n\n🔧 ${this.t.chatInterface.executingTool}`;
                         this.shouldScrollToBottom = true;
                     }
                     // 工具调用完成 - 更新状态
                     else if (event.type === 'tool_use_end') {
-                        aiMessage.content = aiMessage.content.replace('🔧 正在执行工具...', '✅ 工具执行完成');
+                        aiMessage.content = aiMessage.content.replace(`🔧 ${this.t.chatInterface.executingTool}`, `✅ ${this.t.chatInterface.toolComplete}`);
                         this.shouldScrollToBottom = true;
                     }
                     // 消息结束
                     else if (event.type === 'message_end') {
                         this.logger.info('Stream completed');
+                        this.playNotificationSound();
                     }
                 },
                 error: (error) => {
                     this.logger.error('Stream error', error);
-                    aiMessage.content += `\n\n❌ 错误: ${error instanceof Error ? error.message : 'Unknown error'}`;
+                    aiMessage.content += `\n\n${this.t.chatInterface.errorPrefix}: ${error instanceof Error ? error.message : 'Unknown error'}`;
                     this.isLoading = false;
                     this.shouldScrollToBottom = true;
                     this.saveChatHistory();
@@ -213,7 +277,7 @@ export class ChatInterfaceComponent implements OnInit, OnDestroy, AfterViewCheck
             const errorMessage: ChatMessage = {
                 id: this.generateId(),
                 role: MessageRole.ASSISTANT,
-                content: `抱歉，我遇到了一些问题：${error instanceof Error ? error.message : 'Unknown error'}\n\n请稍后重试。`,
+                content: `${this.t.chatInterface.errorPrefix}: ${error instanceof Error ? error.message : 'Unknown error'}\n\n${this.t.chatInterface.tipShortcut}`,
                 timestamp: new Date()
             };
             this.messages.push(errorMessage);
@@ -226,7 +290,7 @@ export class ChatInterfaceComponent implements OnInit, OnDestroy, AfterViewCheck
      * 清空聊天记录
      */
     clearChat(): void {
-        if (confirm('确定要清空聊天记录吗？')) {
+        if (confirm(this.t.chatInterface.clearChatConfirm)) {
             // 删除当前会话
             if (this.currentSessionId) {
                 this.chatHistory.deleteSession(this.currentSessionId);
@@ -286,7 +350,7 @@ export class ChatInterfaceComponent implements OnInit, OnDestroy, AfterViewCheck
             }));
 
         if (configuredProviders.length === 0) {
-            alert('没有可用的AI提供商，请先在设置中配置。');
+            alert(this.t.providers.testError);
             return;
         }
 
@@ -296,7 +360,7 @@ export class ChatInterfaceComponent implements OnInit, OnDestroy, AfterViewCheck
         ).join('\n');
 
         const choice = prompt(
-            `当前使用: ${this.currentProvider}\n\n可用的AI提供商:\n${providerList}\n\n请输入序号选择提供商:`,
+            `${this.t.chatInterface.providerBadge}: ${this.currentProvider}\n\n${this.t.chatInterface.switchProvider}:\n${providerList}\n\n${this.t.chatInterface.inputPlaceholder}`,
             '1'
         );
 
@@ -312,12 +376,12 @@ export class ChatInterfaceComponent implements OnInit, OnDestroy, AfterViewCheck
                 const systemMessage: ChatMessage = {
                     id: this.generateId(),
                     role: MessageRole.SYSTEM,
-                    content: `已切换到 ${this.currentProvider}`,
+                    content: `${this.t.chatInterface.providerBadge}: ${this.currentProvider}`,
                     timestamp: new Date()
                 };
                 this.messages.push(systemMessage);
             } else {
-                alert('无效的选择');
+                alert(this.t.chatInterface.errorPrefix);
             }
         }
     }
@@ -422,6 +486,33 @@ export class ChatInterfaceComponent implements OnInit, OnDestroy, AfterViewCheck
         });
     }
 
+    /**
+     * 播放提示音
+     */
+    private playNotificationSound(): void {
+        if (!this.soundEnabled) return;
+
+        try {
+            // 使用系统提示音
+            const audioContext = new (window.AudioContext || (window as any).webkitAudioContext)();
+            const oscillator = audioContext.createOscillator();
+            const gainNode = audioContext.createGain();
+
+            oscillator.connect(gainNode);
+            gainNode.connect(audioContext.destination);
+
+            oscillator.frequency.value = 800;
+            oscillator.type = 'sine';
+            gainNode.gain.setValueAtTime(0.1, audioContext.currentTime);
+            gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.2);
+
+            oscillator.start(audioContext.currentTime);
+            oscillator.stop(audioContext.currentTime + 0.2);
+        } catch (error) {
+            // 忽略音频播放错误
+        }
+    }
+
     /**
      * 检查是否为今天的消息
      */

package/src/components/chat/chat-message.component.scss

@@ -39,7 +39,7 @@
         .message-content {
             .message-bubble {
                 background-color: var(--ai-assistant-message);
-                color: var(--ai-dark);
+                color: var(--ai-text-primary);
                 border-bottom-left-radius: 0.25rem;
             }
         }
@@ -58,7 +58,7 @@
         .message-content {
             .message-bubble {
                 background-color: var(--ai-system-message);
-                color: var(--ai-dark);
+                color: var(--ai-text-primary);
                 border-radius: 0.5rem;
                 font-style: italic;
             }
@@ -151,7 +151,7 @@
 
                 &:hover {
                     background: rgba(0, 0, 0, 0.1);
-                    color: var(--ai-dark);
+                    color: var(--ai-text-primary);
                 }
             }
         }