tabby-ai-assistant 1.0.5 → 1.0.6

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

@@ -1,10 +1,11 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component, OnInit, OnDestroy, ViewChild, ElementRef, AfterViewChecked } from '@angular/core';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
-import { ChatMessage, MessageRole } from '../../types/ai.types';
+import { ChatMessage, MessageRole, StreamEvent } from '../../types/ai.types';
 import { AiAssistantService } from '../../services/core/ai-assistant.service';
 import { ConfigProviderService } from '../../services/core/config-provider.service';
 import { LoggerService } from '../../services/core/logger.service';
+import { ChatHistoryService } from '../../services/chat/chat-history.service';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 
 @Component({
@@ -12,50 +13,105 @@ import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
     templateUrl: './chat-interface.component.html',
     styleUrls: ['./chat-interface.component.scss']
 })
-export class ChatInterfaceComponent implements OnInit, OnDestroy {
+export class ChatInterfaceComponent implements OnInit, OnDestroy, AfterViewChecked {
+    @ViewChild('chatContainer') chatContainerRef!: ElementRef;
+
     messages: ChatMessage[] = [];
     isLoading = false;
     currentProvider: string = '';
+    currentSessionId: string = '';
+    showScrollTop = false;
+    showScrollBottom = false;
     private destroy$ = new Subject<void>();
+    private shouldScrollToBottom = false;
 
     constructor(
         private aiService: AiAssistantService,
         private config: ConfigProviderService,
         private logger: LoggerService,
-        private modal: NgbModal
-    ) {}
+        private modal: NgbModal,
+        private chatHistory: ChatHistoryService
+    ) { }
 
     ngOnInit(): void {
+        // 生成或加载会话 ID
+        this.currentSessionId = this.generateSessionId();
+
         // 加载当前提供商信息
         this.loadCurrentProvider();
 
         // 加载聊天历史
         this.loadChatHistory();
 
-        // 发送欢迎消息
-        this.sendWelcomeMessage();
+        // 发送欢迎消息（仅在没有历史记录时）
+        if (this.messages.length === 0) {
+            this.sendWelcomeMessage();
+        }
+
+        // 延迟检查滚动状态（等待 DOM 渲染）
+        setTimeout(() => this.checkScrollState(), 100);
     }
 
     ngOnDestroy(): void {
+        // 保存当前会话
+        this.saveChatHistory();
         this.destroy$.next();
         this.destroy$.complete();
     }
 
+    ngAfterViewChecked(): void {
+        if (this.shouldScrollToBottom) {
+            this.performScrollToBottom();
+            this.shouldScrollToBottom = false;
+        }
+    }
+
     /**
      * 加载当前提供商信息
      */
     private loadCurrentProvider(): void {
-        const status = this.aiService.getProviderStatus();
-        this.currentProvider = status.active?.displayName || 'Unknown';
+        const defaultProvider = this.config.getDefaultProvider();
+        if (defaultProvider) {
+            const providerConfig = this.config.getProviderConfig(defaultProvider);
+            this.currentProvider = providerConfig?.displayName || defaultProvider;
+        } else {
+            // 尝试获取第一个已配置的提供商
+            const allConfigs = this.config.getAllProviderConfigs();
+            const configuredProviders = Object.keys(allConfigs).filter(k => allConfigs[k]?.apiKey);
+            if (configuredProviders.length > 0) {
+                const firstProvider = configuredProviders[0];
+                const providerConfig = allConfigs[firstProvider];
+                this.currentProvider = providerConfig?.displayName || firstProvider;
+                this.config.setDefaultProvider(firstProvider);
+            } else {
+                this.currentProvider = '未配置';
+            }
+        }
     }
 
     /**
      * 加载聊天历史
      */
     private loadChatHistory(): void {
-        // TODO: 从本地存储或数据库加载历史消息
-        // 暂时使用空数组
-        this.messages = [];
+        try {
+            // 尝试加载最近的会话
+            const recentSessions = this.chatHistory.getRecentSessions(1);
+            if (recentSessions.length > 0) {
+                const lastSession = recentSessions[0];
+                this.currentSessionId = lastSession.sessionId;
+                this.messages = lastSession.messages.map(msg => ({
+                    ...msg,
+                    timestamp: new Date(msg.timestamp)
+                }));
+                this.logger.info('Loaded chat history', {
+                    sessionId: this.currentSessionId,
+                    messageCount: this.messages.length
+                });
+            }
+        } catch (error) {
+            this.logger.error('Failed to load chat history', error);
+            this.messages = [];
+        }
     }
 
     /**
@@ -97,20 +153,59 @@ export class ChatInterfaceComponent implements OnInit, OnDestroy {
         // 显示加载状态
         this.isLoading = true;
 
+        // 创建一个临时的 AI 消息用于流式更新
+        const aiMessage: ChatMessage = {
+            id: this.generateId(),
+            role: MessageRole.ASSISTANT,
+            content: '',  // 初始为空
+            timestamp: new Date()
+        };
+        this.messages.push(aiMessage);
+
         try {
-            // 发送请求到AI
-            const response = await this.aiService.chat({
-                messages: this.messages,
+            // 使用流式 API
+            this.aiService.chatStream({
+                messages: this.messages.slice(0, -1),  // 排除刚添加的空 AI 消息
                 maxTokens: 1000,
                 temperature: 0.7
+            }).pipe(
+                takeUntil(this.destroy$)
+            ).subscribe({
+                next: (event) => {
+                    // 文本增量 - 逐字显示
+                    if (event.type === 'text_delta' && event.textDelta) {
+                        aiMessage.content += event.textDelta;
+                        this.shouldScrollToBottom = true;
+                    }
+                    // 工具调用开始 - 显示提示
+                    else if (event.type === 'tool_use_start') {
+                        aiMessage.content += '\n\n🔧 正在执行工具...';
+                        this.shouldScrollToBottom = true;
+                    }
+                    // 工具调用完成 - 更新状态
+                    else if (event.type === 'tool_use_end') {
+                        aiMessage.content = aiMessage.content.replace('🔧 正在执行工具...', '✅ 工具执行完成');
+                        this.shouldScrollToBottom = true;
+                    }
+                    // 消息结束
+                    else if (event.type === 'message_end') {
+                        this.logger.info('Stream completed');
+                    }
+                },
+                error: (error) => {
+                    this.logger.error('Stream error', error);
+                    aiMessage.content += `\n\n❌ 错误: ${error instanceof Error ? error.message : 'Unknown error'}`;
+                    this.isLoading = false;
+                    this.shouldScrollToBottom = true;
+                    this.saveChatHistory();
+                },
+                complete: () => {
+                    this.isLoading = false;
+                    this.saveChatHistory();
+                    this.shouldScrollToBottom = true;
+                }
             });
 
-            // 添加AI响应
-            this.messages.push(response.message);
-
-            // 保存聊天历史
-            this.saveChatHistory();
-
         } catch (error) {
             this.logger.error('Failed to send message', error);
 
@@ -122,9 +217,7 @@ export class ChatInterfaceComponent implements OnInit, OnDestroy {
                 timestamp: new Date()
             };
             this.messages.push(errorMessage);
-        } finally {
             this.isLoading = false;
-            // 滚动到底部
             setTimeout(() => this.scrollToBottom(), 0);
         }
     }
@@ -134,9 +227,29 @@ export class ChatInterfaceComponent implements OnInit, OnDestroy {
      */
     clearChat(): void {
         if (confirm('确定要清空聊天记录吗？')) {
+            // 删除当前会话
+            if (this.currentSessionId) {
+                this.chatHistory.deleteSession(this.currentSessionId);
+            }
+            // 创建新会话
+            this.currentSessionId = this.generateSessionId();
             this.messages = [];
             this.sendWelcomeMessage();
-            localStorage.removeItem('ai-assistant-chat-history');
+
+            // 确保重置加载状态
+            this.isLoading = false;
+
+            // 延迟滚动和恢复焦点，确保DOM已更新
+            setTimeout(() => {
+                this.scrollToBottom();
+                // 尝试恢复输入框焦点
+                const inputElement = document.querySelector('.chat-textarea') as HTMLTextAreaElement;
+                if (inputElement) {
+                    inputElement.focus();
+                }
+            }, 100);
+
+            this.logger.info('Chat cleared, new session created', { sessionId: this.currentSessionId });
         }
     }
 
@@ -162,34 +275,136 @@ export class ChatInterfaceComponent implements OnInit, OnDestroy {
     /**
      * 切换提供商
      */
-    switchProvider(): void {
-        // TODO: 打开提供商选择对话框
-        this.logger.info('Switch provider requested');
+    async switchProvider(): Promise<void> {
+        // 从配置服务获取已配置的提供商
+        const allConfigs = this.config.getAllProviderConfigs();
+        const configuredProviders = Object.keys(allConfigs)
+            .filter(key => allConfigs[key] && allConfigs[key].enabled !== false)
+            .map(key => ({
+                name: key,
+                displayName: allConfigs[key].displayName || key
+            }));
+
+        if (configuredProviders.length === 0) {
+            alert('没有可用的AI提供商，请先在设置中配置。');
+            return;
+        }
+
+        // 构建提供商列表
+        const providerList = configuredProviders.map((p, i) =>
+            `${i + 1}. ${p.displayName}`
+        ).join('\n');
+
+        const choice = prompt(
+            `当前使用: ${this.currentProvider}\n\n可用的AI提供商:\n${providerList}\n\n请输入序号选择提供商:`,
+            '1'
+        );
+
+        if (choice) {
+            const index = parseInt(choice, 10) - 1;
+            if (index >= 0 && index < configuredProviders.length) {
+                const selectedProvider = configuredProviders[index];
+                this.config.setDefaultProvider(selectedProvider.name);
+                this.currentProvider = selectedProvider.displayName;
+                this.logger.info('Provider switched', { provider: selectedProvider.name });
+
+                // 添加系统消息
+                const systemMessage: ChatMessage = {
+                    id: this.generateId(),
+                    role: MessageRole.SYSTEM,
+                    content: `已切换到 ${this.currentProvider}`,
+                    timestamp: new Date()
+                };
+                this.messages.push(systemMessage);
+            } else {
+                alert('无效的选择');
+            }
+        }
+    }
+
+    /**
+     * 滚动到底部（公开方法）
+     */
+    scrollToBottom(): void {
+        this.shouldScrollToBottom = true;
+    }
+
+    /**
+     * 滚动到顶部
+     */
+    scrollToTop(): void {
+        const chatContainer = this.chatContainerRef?.nativeElement || document.querySelector('.ai-chat-container');
+        if (chatContainer) {
+            chatContainer.scrollTo({ top: 0, behavior: 'smooth' });
+        }
     }
 
     /**
-     * 滚动到底部
+     * 实际执行滚动到底部
      */
-    private scrollToBottom(): void {
-        const chatContainer = document.querySelector('.ai-chat-container');
+    private performScrollToBottom(): void {
+        const chatContainer = this.chatContainerRef?.nativeElement || document.querySelector('.ai-chat-container');
         if (chatContainer) {
-            chatContainer.scrollTop = chatContainer.scrollHeight;
+            chatContainer.scrollTo({ top: chatContainer.scrollHeight, behavior: 'smooth' });
         }
     }
 
+    /**
+     * 处理滚动事件
+     */
+    onScroll(event: Event): void {
+        const target = event.target as HTMLElement;
+        if (!target) return;
+        this.updateScrollButtons(target);
+    }
+
+    /**
+     * 检查滚动状态（初始化时调用）
+     */
+    private checkScrollState(): void {
+        const chatContainer = this.chatContainerRef?.nativeElement || document.querySelector('.ai-chat-container');
+        if (chatContainer) {
+            this.updateScrollButtons(chatContainer);
+        }
+    }
+
+    /**
+     * 更新滚动按钮显示状态
+     */
+    private updateScrollButtons(container: HTMLElement): void {
+        const scrollTop = container.scrollTop;
+        const scrollHeight = container.scrollHeight;
+        const clientHeight = container.clientHeight;
+
+        // 判断是否显示滚动按钮
+        this.showScrollTop = scrollTop > 50;
+        this.showScrollBottom = scrollHeight > clientHeight && scrollTop < scrollHeight - clientHeight - 50;
+    }
+
     /**
      * 保存聊天历史
      */
     private saveChatHistory(): void {
         try {
-            // 限制历史记录数量
-            const recentMessages = this.messages.slice(-100);
-            localStorage.setItem('ai-assistant-chat-history', JSON.stringify(recentMessages));
+            if (this.messages.length > 0 && this.currentSessionId) {
+                this.chatHistory.saveSession(this.currentSessionId, this.messages);
+                this.logger.info('Chat history saved', {
+                    sessionId: this.currentSessionId,
+                    messageCount: this.messages.length
+                });
+            }
         } catch (error) {
             this.logger.error('Failed to save chat history', error);
         }
     }
 
+    /**
+     * 生成会话 ID
+     */
+    private generateSessionId(): string {
+        return `session_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+    }
+
     /**
      * 生成唯一ID
      */
@@ -222,3 +437,4 @@ export class ChatInterfaceComponent implements OnInit, OnDestroy {
         return date1.toDateString() === date2.toDateString();
     }
 }
+

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

@@ -130,7 +130,7 @@
                 color: white;
 
                 &:hover {
-                    background-color: darken(#6c757d, 7.5%);
+                    background-color: #5a6268;
                 }
             }
 
@@ -139,7 +139,7 @@
                 color: white;
 
                 &:hover {
-                    background-color: darken(#dc3545, 7.5%);
+                    background-color: #c82333;
                 }
             }
 
@@ -148,7 +148,7 @@
                 color: var(--ai-dark);
 
                 &:hover {
-                    background-color: darken(#ffc107, 7.5%);
+                    background-color: #e0a800;
                 }
             }
         }
@@ -169,4 +169,4 @@
             }
         }
     }
-}
+}

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

@@ -8,7 +8,18 @@ import { LoggerService } from '../../services/core/logger.service';
     styleUrls: ['./chat-settings.component.scss']
 })
 export class ChatSettingsComponent implements OnInit {
-    settings = {
+    settings: {
+        chatHistoryEnabled: boolean;
+        maxChatHistory: number;
+        autoSaveChat: boolean;
+        theme: string;
+        fontSize: number;
+        compactMode: boolean;
+        showTimestamps: boolean;
+        showAvatars: boolean;
+        enterToSend: boolean;
+        soundEnabled: boolean;
+    } = {
         chatHistoryEnabled: true,
         maxChatHistory: 100,
         autoSaveChat: true,
@@ -42,16 +53,16 @@ export class ChatSettingsComponent implements OnInit {
      * 加载设置
      */
     private loadSettings(): void {
-        this.settings.chatHistoryEnabled = this.config.get('chatHistoryEnabled', true);
-        this.settings.maxChatHistory = this.config.get('maxChatHistory', 100);
-        this.settings.autoSaveChat = this.config.get('autoSaveChat', true);
-        this.settings.theme = this.config.get('theme', 'auto');
-        this.settings.fontSize = this.config.get('ui.fontSize', 14);
-        this.settings.compactMode = this.config.get('ui.compactMode', false);
-        this.settings.showTimestamps = this.config.get('ui.showTimestamps', true);
-        this.settings.showAvatars = this.config.get('ui.showAvatars', true);
-        this.settings.enterToSend = this.config.get('ui.enterToSend', true);
-        this.settings.soundEnabled = this.config.get('ui.soundEnabled', true);
+        this.settings.chatHistoryEnabled = this.config.get('chatHistoryEnabled', true) ?? true;
+        this.settings.maxChatHistory = this.config.get('maxChatHistory', 100) ?? 100;
+        this.settings.autoSaveChat = this.config.get('autoSaveChat', true) ?? true;
+        this.settings.theme = this.config.get('theme', 'auto') ?? 'auto';
+        this.settings.fontSize = this.config.get('ui.fontSize', 14) ?? 14;
+        this.settings.compactMode = this.config.get('ui.compactMode', false) ?? false;
+        this.settings.showTimestamps = this.config.get('ui.showTimestamps', true) ?? true;
+        this.settings.showAvatars = this.config.get('ui.showAvatars', true) ?? true;
+        this.settings.enterToSend = this.config.get('ui.enterToSend', true) ?? true;
+        this.settings.soundEnabled = this.config.get('ui.soundEnabled', true) ?? true;
     }
 
     /**

package/src/components/common/error-message.component.html

@@ -0,0 +1,15 @@
+<div class="error-message" [ngClass]="type">
+    <div class="error-icon">
+        <i [class]="getIconClass()"></i>
+    </div>
+    <div class="error-content">
+        <h4 *ngIf="title">{{ title }}</h4>
+        <p>{{ message }}</p>
+        <div *ngIf="details" class="error-details">
+            <small>{{ details }}</small>
+        </div>
+    </div>
+    <button *ngIf="dismissible" class="error-close" (click)="onDismiss()">
+        <i class="icon-close"></i>
+    </button>
+</div>

package/src/components/common/error-message.component.scss

@@ -0,0 +1,77 @@
+.error-message {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.75rem;
+    padding: 1rem;
+    border-radius: 0.5rem;
+    border: 1px solid;
+    margin: 0.5rem 0;
+
+    &.error {
+        background-color: rgba(220, 53, 69, 0.1);
+        border-color: var(--ai-danger);
+        color: var(--ai-danger);
+    }
+
+    &.warning {
+        background-color: rgba(255, 193, 7, 0.1);
+        border-color: var(--ai-warning);
+        color: #856404;
+    }
+
+    &.info {
+        background-color: rgba(23, 162, 184, 0.1);
+        border-color: var(--ai-info);
+        color: var(--ai-info);
+    }
+
+    &.success {
+        background-color: rgba(40, 167, 69, 0.1);
+        border-color: var(--ai-success);
+        color: var(--ai-success);
+    }
+}
+
+.error-icon {
+    flex-shrink: 0;
+    font-size: 1.25rem;
+}
+
+.error-content {
+    flex: 1;
+
+    h4 {
+        margin: 0 0 0.5rem 0;
+        font-size: 1rem;
+        font-weight: 600;
+    }
+
+    p {
+        margin: 0;
+        line-height: 1.5;
+    }
+
+    .error-details {
+        margin-top: 0.5rem;
+        opacity: 0.8;
+    }
+}
+
+.error-close {
+    flex-shrink: 0;
+    width: 24px;
+    height: 24px;
+    border: none;
+    background: transparent;
+    border-radius: 0.25rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    opacity: 0.6;
+    transition: opacity 0.2s;
+
+    &:hover {
+        opacity: 1;
+    }
+}

package/src/components/common/error-message.component.ts

@@ -2,102 +2,8 @@ import { Component, Input, Output, EventEmitter } from '@angular/core';
 
 @Component({
     selector: 'app-error-message',
-    template: `
-        <div class="error-message" [ngClass]="type">
-            <div class="error-icon">
-                <i [class]="getIconClass()"></i>
-            </div>
-            <div class="error-content">
-                <h4 *ngIf="title">{{ title }}</h4>
-                <p>{{ message }}</p>
-                <div *ngIf="details" class="error-details">
-                    <small>{{ details }}</small>
-                </div>
-            </div>
-            <button *ngIf="dismissible" class="error-close" (click)="onDismiss()">
-                <i class="icon-close"></i>
-            </button>
-        </div>
-    `,
-    styles: [`
-        .error-message {
-            display: flex;
-            align-items: flex-start;
-            gap: 0.75rem;
-            padding: 1rem;
-            border-radius: 0.5rem;
-            border: 1px solid;
-            margin: 0.5rem 0;
-
-            &.error {
-                background-color: rgba(220, 53, 69, 0.1);
-                border-color: var(--ai-danger);
-                color: var(--ai-danger);
-            }
-
-            &.warning {
-                background-color: rgba(255, 193, 7, 0.1);
-                border-color: var(--ai-warning);
-                color: #856404;
-            }
-
-            &.info {
-                background-color: rgba(23, 162, 184, 0.1);
-                border-color: var(--ai-info);
-                color: var(--ai-info);
-            }
-
-            &.success {
-                background-color: rgba(40, 167, 69, 0.1);
-                border-color: var(--ai-success);
-                color: var(--ai-success);
-            }
-        }
-
-        .error-icon {
-            flex-shrink: 0;
-            font-size: 1.25rem;
-        }
-
-        .error-content {
-            flex: 1;
-
-            h4 {
-                margin: 0 0 0.5rem 0;
-                font-size: 1rem;
-                font-weight: 600;
-            }
-
-            p {
-                margin: 0;
-                line-height: 1.5;
-            }
-
-            .error-details {
-                margin-top: 0.5rem;
-                opacity: 0.8;
-            }
-        }
-
-        .error-close {
-            flex-shrink: 0;
-            width: 24px;
-            height: 24px;
-            border: none;
-            background: transparent;
-            border-radius: 0.25rem;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            cursor: pointer;
-            opacity: 0.6;
-            transition: opacity 0.2s;
-
-            &:hover {
-                opacity: 1;
-            }
-        }
-    `]
+    templateUrl: './error-message.component.html',
+    styleUrls: ['./error-message.component.scss']
 })
 export class ErrorMessageComponent {
     @Input() type: 'error' | 'warning' | 'info' | 'success' = 'error';

package/src/components/common/loading-spinner.component.html

@@ -0,0 +1,4 @@
+<div class="spinner-container" [ngClass]="size">
+    <div class="spinner"></div>
+    <p *ngIf="message" class="spinner-message">{{ message }}</p>
+</div>