tabby-ai-assistant 1.0.0

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

@@ -0,0 +1,354 @@
+.ai-chat-interface {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    background-color: var(--ai-bg-primary);
+    color: var(--ai-dark);
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+/* 头部 */
+.ai-chat-header {
+    padding: 1rem 1.5rem;
+    background-color: var(--ai-bg-secondary);
+    border-bottom: 1px solid var(--ai-border);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-shrink: 0;
+
+    .header-left {
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+
+        .ai-title {
+            margin: 0;
+            font-size: 1.25rem;
+            font-weight: 600;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+
+            .icon-chat {
+                font-size: 1.5rem;
+            }
+        }
+
+        .provider-badge {
+            padding: 0.25rem 0.75rem;
+            background-color: var(--ai-primary);
+            color: white;
+            border-radius: 1rem;
+            font-size: 0.875rem;
+            font-weight: 500;
+            display: flex;
+            align-items: center;
+            gap: 0.375rem;
+        }
+    }
+
+    .header-actions {
+        display: flex;
+        gap: 0.5rem;
+
+        .btn-icon {
+            width: 36px;
+            height: 36px;
+            border: none;
+            background: transparent;
+            border-radius: 0.375rem;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            transition: all 0.2s;
+            color: var(--ai-secondary);
+
+            &:hover {
+                background-color: var(--ai-border);
+                color: var(--ai-dark);
+            }
+
+            &.danger:hover {
+                background-color: var(--ai-danger);
+                color: white;
+            }
+
+            .icon-switch,
+            .icon-export,
+            .icon-clear {
+                font-size: 1.125rem;
+            }
+        }
+    }
+}
+
+/* 消息容器 */
+.ai-chat-container {
+    flex: 1;
+    overflow-y: auto;
+    padding: 1rem;
+    scroll-behavior: smooth;
+
+    .messages-wrapper {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+    }
+
+    .date-separator {
+        text-align: center;
+        margin: 1rem 0;
+        position: relative;
+
+        &::before {
+            content: '';
+            position: absolute;
+            top: 50%;
+            left: 0;
+            right: 0;
+            height: 1px;
+            background-color: var(--ai-border);
+        }
+
+        .date-text {
+            background-color: var(--ai-bg-primary);
+            padding: 0 1rem;
+            font-size: 0.875rem;
+            color: var(--ai-secondary);
+            position: relative;
+        }
+    }
+}
+
+/* 消息项 */
+.message-item {
+    display: flex;
+    gap: 0.75rem;
+    max-width: 85%;
+
+    &.user-message {
+        align-self: flex-end;
+        flex-direction: row-reverse;
+
+        .message-avatar {
+            .avatar.user {
+                background-color: var(--ai-primary);
+                color: white;
+            }
+        }
+
+        .message-content {
+            .message-bubble {
+                background-color: var(--ai-primary);
+                color: white;
+                border-bottom-right-radius: 0.25rem;
+            }
+        }
+    }
+
+    &.assistant-message {
+        align-self: flex-start;
+
+        .message-avatar {
+            .avatar.assistant {
+                background-color: var(--ai-success);
+                color: white;
+            }
+        }
+
+        .message-content {
+            .message-bubble {
+                background-color: var(--ai-assistant-message);
+                color: var(--ai-dark);
+                border-bottom-left-radius: 0.25rem;
+            }
+        }
+    }
+
+    &.system-message {
+        align-self: center;
+        max-width: 90%;
+
+        .message-avatar {
+            .avatar.system {
+                background-color: var(--ai-warning);
+                color: white;
+            }
+        }
+
+        .message-content {
+            .message-bubble {
+                background-color: var(--ai-system-message);
+                color: var(--ai-dark);
+                border-radius: 0.5rem;
+                font-style: italic;
+            }
+        }
+    }
+}
+
+/* 头像 */
+.message-avatar {
+    flex-shrink: 0;
+
+    .avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 1.25rem;
+    }
+}
+
+/* 消息内容 */
+.message-content {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+
+    .message-bubble {
+        padding: 0.75rem 1rem;
+        border-radius: 0.75rem;
+        box-shadow: var(--ai-box-shadow);
+        word-wrap: break-word;
+        white-space: pre-wrap;
+
+        .message-text {
+            margin: 0;
+            line-height: 1.6;
+
+            pre {
+                margin: 0;
+                white-space: pre-wrap;
+                word-wrap: break-word;
+                font-family: inherit;
+                font-size: inherit;
+            }
+
+            &.ai-response {
+                white-space: pre-wrap;
+            }
+        }
+    }
+
+    .message-time {
+        font-size: 0.75rem;
+        opacity: 0.6;
+        padding: 0 0.5rem;
+    }
+}
+
+/* 加载指示器 */
+.loading-indicator {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.75rem 1rem;
+    background-color: var(--ai-assistant-message);
+    border-radius: 0.75rem;
+    align-self: flex-start;
+    max-width: 200px;
+
+    .typing-indicator {
+        display: flex;
+        gap: 0.25rem;
+
+        span {
+            width: 6: 6pxpx;
+            height;
+            border-radius: 50%;
+            background-color: var(--ai-secondary);
+            animation: typing 1.4s infinite ease-in-out;
+
+            &:nth-child(1) {
+                animation-delay: -0.32s;
+            }
+
+            &:nth-child(2) {
+                animation-delay: -0.16s;
+            }
+        }
+    }
+
+    .loading-text {
+        font-size: 0.875rem;
+        color: var(--ai-secondary);
+    }
+}
+
+@keyframes typing {
+    0%, 80%, 100% {
+        transform: scale(0.8);
+        opacity: 0.5;
+    }
+    40% {
+        transform: scale(1);
+        opacity: 1;
+    }
+}
+
+/* 输入区域 */
+.ai-chat-input {
+    flex-shrink: 0;
+    border-top: 1px solid var(--ai-border);
+    background-color: var(--ai-bg-secondary);
+}
+
+/* 提示信息 */
+.chat-tips {
+    padding: 0.75rem 1.5rem;
+    background-color: rgba(0, 123, 255, 0.05);
+    border-top: 1px solid var(--ai-border);
+
+    .tip-item {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        margin: 0.375rem 0;
+        font-size: 0.875rem;
+        color: var(--ai-info);
+
+        i {
+            font-size: 1rem;
+        }
+    }
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+    .ai-chat-header {
+        padding: 0.75rem 1rem;
+
+        .header-left {
+            .ai-title {
+                font-size: 1rem;
+            }
+
+            .provider-badge {
+                font-size: 0.75rem;
+                padding: 0.2rem 0.6rem;
+            }
+        }
+
+        .header-actions .btn-icon {
+            width: 32px;
+            height: 32px;
+        }
+    }
+
+    .message-item {
+        max-width: 95%;
+    }
+
+    .chat-tips {
+        padding: 0.5rem 1rem;
+
+        .tip-item {
+            font-size: 0.8rem;
+        }
+    }
+}

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

@@ -0,0 +1,224 @@
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { ChatMessage, MessageRole } 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 { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+
+@Component({
+    selector: 'app-chat-interface',
+    templateUrl: './chat-interface.component.html',
+    styleUrls: ['./chat-interface.component.scss']
+})
+export class ChatInterfaceComponent implements OnInit, OnDestroy {
+    messages: ChatMessage[] = [];
+    isLoading = false;
+    currentProvider: string = '';
+    private destroy$ = new Subject<void>();
+
+    constructor(
+        private aiService: AiAssistantService,
+        private config: ConfigProviderService,
+        private logger: LoggerService,
+        private modal: NgbModal
+    ) {}
+
+    ngOnInit(): void {
+        // 加载当前提供商信息
+        this.loadCurrentProvider();
+
+        // 加载聊天历史
+        this.loadChatHistory();
+
+        // 发送欢迎消息
+        this.sendWelcomeMessage();
+    }
+
+    ngOnDestroy(): void {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+
+    /**
+     * 加载当前提供商信息
+     */
+    private loadCurrentProvider(): void {
+        const status = this.aiService.getProviderStatus();
+        this.currentProvider = status.active?.displayName || 'Unknown';
+    }
+
+    /**
+     * 加载聊天历史
+     */
+    private loadChatHistory(): void {
+        // TODO: 从本地存储或数据库加载历史消息
+        // 暂时使用空数组
+        this.messages = [];
+    }
+
+    /**
+     * 发送欢迎消息
+     */
+    private sendWelcomeMessage(): void {
+        const welcomeMessage: ChatMessage = {
+            id: this.generateId(),
+            role: MessageRole.ASSISTANT,
+            content: `您好！我是AI助手。\n\n我可以帮助您：\n• 将自然语言转换为终端命令\n• 解释复杂的命令\n• 分析命令执行结果\n• 提供错误修复建议\n\n当前使用：${this.currentProvider}\n\n请输入您的问题或描述您想执行的命令。`,
+            timestamp: new Date()
+        };
+        this.messages.push(welcomeMessage);
+    }
+
+    /**
+     * 处理发送消息
+     */
+    async onSendMessage(content: string): Promise<void> {
+        if (!content.trim() || this.isLoading) {
+            return;
+        }
+
+        // 添加用户消息
+        const userMessage: ChatMessage = {
+            id: this.generateId(),
+            role: MessageRole.USER,
+            content: content.trim(),
+            timestamp: new Date()
+        };
+        this.messages.push(userMessage);
+
+        // 滚动到底部
+        setTimeout(() => this.scrollToBottom(), 0);
+
+        // 清空输入框
+        content = '';
+
+        // 显示加载状态
+        this.isLoading = true;
+
+        try {
+            // 发送请求到AI
+            const response = await this.aiService.chat({
+                messages: this.messages,
+                maxTokens: 1000,
+                temperature: 0.7
+            });
+
+            // 添加AI响应
+            this.messages.push(response.message);
+
+            // 保存聊天历史
+            this.saveChatHistory();
+
+        } catch (error) {
+            this.logger.error('Failed to send message', error);
+
+            // 添加错误消息
+            const errorMessage: ChatMessage = {
+                id: this.generateId(),
+                role: MessageRole.ASSISTANT,
+                content: `抱歉，我遇到了一些问题：${error instanceof Error ? error.message : 'Unknown error'}\n\n请稍后重试。`,
+                timestamp: new Date()
+            };
+            this.messages.push(errorMessage);
+        } finally {
+            this.isLoading = false;
+            // 滚动到底部
+            setTimeout(() => this.scrollToBottom(), 0);
+        }
+    }
+
+    /**
+     * 清空聊天记录
+     */
+    clearChat(): void {
+        if (confirm('确定要清空聊天记录吗？')) {
+            this.messages = [];
+            this.sendWelcomeMessage();
+            localStorage.removeItem('ai-assistant-chat-history');
+        }
+    }
+
+    /**
+     * 导出聊天记录
+     */
+    exportChat(): void {
+        const chatData = {
+            provider: this.currentProvider,
+            exportTime: new Date().toISOString(),
+            messages: this.messages
+        };
+
+        const blob = new Blob([JSON.stringify(chatData, null, 2)], { type: 'application/json' });
+        const url = window.URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = `ai-chat-${new Date().toISOString().slice(0, 10)}.json`;
+        a.click();
+        window.URL.revokeObjectURL(url);
+    }
+
+    /**
+     * 切换提供商
+     */
+    switchProvider(): void {
+        // TODO: 打开提供商选择对话框
+        this.logger.info('Switch provider requested');
+    }
+
+    /**
+     * 滚动到底部
+     */
+    private scrollToBottom(): void {
+        const chatContainer = document.querySelector('.ai-chat-container');
+        if (chatContainer) {
+            chatContainer.scrollTop = chatContainer.scrollHeight;
+        }
+    }
+
+    /**
+     * 保存聊天历史
+     */
+    private saveChatHistory(): void {
+        try {
+            // 限制历史记录数量
+            const recentMessages = this.messages.slice(-100);
+            localStorage.setItem('ai-assistant-chat-history', JSON.stringify(recentMessages));
+        } catch (error) {
+            this.logger.error('Failed to save chat history', error);
+        }
+    }
+
+    /**
+     * 生成唯一ID
+     */
+    private generateId(): string {
+        return `${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+    }
+
+    /**
+     * 获取消息时间格式
+     */
+    formatTimestamp(timestamp: Date): string {
+        return timestamp.toLocaleTimeString('zh-CN', {
+            hour: '2-digit',
+            minute: '2-digit'
+        });
+    }
+
+    /**
+     * 检查是否为今天的消息
+     */
+    isToday(date: Date): boolean {
+        const today = new Date();
+        return date.toDateString() === today.toDateString();
+    }
+
+    /**
+     * 检查是否为同一天的消息
+     */
+    isSameDay(date1: Date, date2: Date): boolean {
+        return date1.toDateString() === date2.toDateString();
+    }
+}

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

@@ -0,0 +1,65 @@
+<div class="chat-message"
+     [ngClass]="{
+         'user-message': isUserMessage(),
+         'assistant-message': isAssistantMessage(),
+         'system-message': isSystemMessage(),
+         'grouped': isGrouped,
+         'with-avatar': showAvatar
+     }"
+     (click)="onMessageClick()">
+
+    <!-- 头像 -->
+    <div *ngIf="showAvatar" class="message-avatar">
+        <div *ngIf="isUserMessage()" class="avatar user">
+            <i class="icon-user"></i>
+        </div>
+        <div *ngIf="isAssistantMessage()" class="avatar assistant">
+            <i class="icon-bot"></i>
+        </div>
+        <div *ngIf="isSystemMessage()" class="avatar system">
+            <i class="icon-info"></i>
+        </div>
+    </div>
+
+    <!-- 消息内容 -->
+    <div class="message-content">
+        <div class="message-bubble">
+            <!-- 用户消息 -->
+            <div *ngIf="isUserMessage()" class="message-text">
+                {{ message.content }}
+            </div>
+
+            <!-- AI消息 -->
+            <div *ngIf="isAssistantMessage()" class="message-text ai-response">
+                <pre>{{ message.content }}</pre>
+            </div>
+
+            <!-- 系统消息 -->
+            <div *ngIf="isSystemMessage()" class="message-text system">
+                <i class="icon-warning"></i>
+                {{ message.content }}
+            </div>
+
+            <!-- 操作按钮（仅AI消息显示） -->
+            <div *ngIf="isAssistantMessage()" class="message-actions">
+                <button class="action-btn" (click)="copyMessage()" title="复制">
+                    <i class="icon-copy"></i>
+                </button>
+                <button class="action-btn" (click)="regenerateResponse()" title="重新生成">
+                    <i class="icon-refresh"></i>
+                </button>
+                <button class="action-btn" (click)="markAsHelpful()" title="有用">
+                    <i class="icon-thumbs-up"></i>
+                </button>
+                <button class="action-btn" (click)="markAsNotHelpful()" title="无用">
+                    <i class="icon-thumbs-down"></i>
+                </button>
+            </div>
+        </div>
+
+        <!-- 时间戳 -->
+        <div *ngIf="showTimestamp" class="message-time">
+            {{ formatTime(message.timestamp) }}
+        </div>
+    </div>
+</div>