tabby-ai-assistant 1.0.0

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

@@ -0,0 +1,168 @@
+import { Component, OnInit } from '@angular/core';
+import { ConfigProviderService } from '../../services/core/config-provider.service';
+import { LoggerService } from '../../services/core/logger.service';
+
+@Component({
+    selector: 'app-chat-settings',
+    templateUrl: './chat-settings.component.html',
+    styleUrls: ['./chat-settings.component.scss']
+})
+export class ChatSettingsComponent implements OnInit {
+    settings = {
+        chatHistoryEnabled: true,
+        maxChatHistory: 100,
+        autoSaveChat: true,
+        theme: 'auto',
+        fontSize: 14,
+        compactMode: false,
+        showTimestamps: true,
+        showAvatars: true,
+        enterToSend: true,
+        soundEnabled: true
+    };
+
+    themes = [
+        { value: 'auto', label: '跟随系统' },
+        { value: 'light', label: '浅色主题' },
+        { value: 'dark', label: '深色主题' }
+    ];
+
+    fontSizes = [12, 14, 16, 18, 20];
+
+    constructor(
+        private config: ConfigProviderService,
+        private logger: LoggerService
+    ) {}
+
+    ngOnInit(): void {
+        this.loadSettings();
+    }
+
+    /**
+     * 加载设置
+     */
+    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);
+    }
+
+    /**
+     * 保存设置
+     */
+    saveSetting(key: string, value: any): void {
+        try {
+            this.config.set(key, value);
+            this.logger.debug('Chat setting saved', { key, value });
+        } catch (error) {
+            this.logger.error('Failed to save chat setting', error);
+        }
+    }
+
+    /**
+     * 更新主题
+     */
+    updateTheme(theme: string): void {
+        this.settings.theme = theme;
+        this.saveSetting('theme', theme);
+        this.applyTheme(theme);
+    }
+
+    /**
+     * 应用主题
+     */
+    private applyTheme(theme: string): void {
+        const body = document.body;
+        body.classList.remove('light-theme', 'dark-theme');
+
+        if (theme === 'light') {
+            body.classList.add('light-theme');
+        } else if (theme === 'dark') {
+            body.classList.add('dark-theme');
+        }
+        // 'auto' 主题由系统决定
+    }
+
+    /**
+     * 更新字体大小
+     */
+    updateFontSize(size: number): void {
+        this.settings.fontSize = size;
+        this.saveSetting('ui.fontSize', size);
+        document.documentElement.style.setProperty('--chat-font-size', `${size}px`);
+    }
+
+    /**
+     * 切换紧凑模式
+     */
+    toggleCompactMode(): void {
+        this.settings.compactMode = !this.settings.compactMode;
+        this.saveSetting('ui.compactMode', this.settings.compactMode);
+        document.documentElement.classList.toggle('compact-chat', this.settings.compactMode);
+    }
+
+    /**
+     * 清空聊天历史
+     */
+    clearChatHistory(): void {
+        if (confirm('确定要清空所有聊天记录吗？此操作不可恢复。')) {
+            localStorage.removeItem('ai-assistant-chat-history');
+            this.logger.info('Chat history cleared');
+            alert('聊天记录已清空');
+        }
+    }
+
+    /**
+     * 导出聊天设置
+     */
+    exportSettings(): void {
+        const exportData = {
+            chatSettings: this.settings,
+            exportTime: new Date().toISOString()
+        };
+
+        const blob = new Blob([JSON.stringify(exportData, null, 2)], { type: 'application/json' });
+        const url = window.URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = `chat-settings-${new Date().toISOString().slice(0, 10)}.json`;
+        a.click();
+        window.URL.revokeObjectURL(url);
+    }
+
+    /**
+     * 重置为默认设置
+     */
+    resetToDefaults(): void {
+        if (confirm('确定要重置所有设置为默认值吗？')) {
+            this.settings = {
+                chatHistoryEnabled: true,
+                maxChatHistory: 100,
+                autoSaveChat: true,
+                theme: 'auto',
+                fontSize: 14,
+                compactMode: false,
+                showTimestamps: true,
+                showAvatars: true,
+                enterToSend: true,
+                soundEnabled: true
+            };
+
+            // 保存所有设置
+            Object.entries(this.settings).forEach(([key, value]) => {
+                const configKey = key.includes('.') ? key : `ui.${key}`;
+                this.saveSetting(configKey, value);
+            });
+
+            this.logger.info('Chat settings reset to defaults');
+            alert('设置已重置为默认值');
+        }
+    }
+}

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

@@ -0,0 +1,124 @@
+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;
+            }
+        }
+    `]
+})
+export class ErrorMessageComponent {
+    @Input() type: 'error' | 'warning' | 'info' | 'success' = 'error';
+    @Input() title: string = '';
+    @Input() message: string = '';
+    @Input() details: string = '';
+    @Input() dismissible: boolean = false;
+
+    @Output() dismissed = new EventEmitter<void>();
+
+    getIconClass(): string {
+        const icons: { [key: string]: string } = {
+            'error': 'icon-error',
+            'warning': 'icon-warning',
+            'info': 'icon-info',
+            'success': 'icon-success'
+        };
+        return icons[this.type] || 'icon-error';
+    }
+
+    onDismiss(): void {
+        this.dismissed.emit();
+    }
+}

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

@@ -0,0 +1,72 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+    selector: 'app-loading-spinner',
+    template: `
+        <div class="spinner-container" [ngClass]="size">
+            <div class="spinner"></div>
+            <p *ngIf="message" class="spinner-message">{{ message }}</p>
+        </div>
+    `,
+    styles: [`
+        .spinner-container {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            padding: 2rem;
+
+            &.small {
+                padding: 1rem;
+
+                .spinner {
+                    width: 24px;
+                    height: 24px;
+                    border-width: 2px;
+                }
+
+                .spinner-message {
+                    font-size: 0.75rem;
+                    margin-top: 0.5rem;
+                }
+            }
+
+            &.medium {
+                .spinner {
+                    width: 36px;
+                    height: 36px;
+                    border-width: 3px;
+                }
+            }
+
+            &.large {
+                .spinner {
+                    width: 48px;
+                    height: 48px;
+                    border-width: 4px;
+                }
+            }
+        }
+
+        .spinner {
+            border: 3px solid var(--ai-border);
+            border-top-color: var(--ai-primary);
+            border-radius: 50%;
+            animation: spin 0.8s linear infinite;
+        }
+
+        .spinner-message {
+            margin-top: 1rem;
+            color: var(--ai-secondary);
+            font-size: 0.875rem;
+        }
+
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+    `]
+})
+export class LoadingSpinnerComponent {
+    @Input() size: 'small' | 'medium' | 'large' = 'medium';
+    @Input() message: string = '';
+}

package/src/components/security/consent-dialog.component.ts

@@ -0,0 +1,77 @@
+import { Component, Input } from '@angular/core';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { RiskLevel } from '../../types/security.types';
+
+@Component({
+    selector: 'app-consent-dialog',
+    template: `
+        <div class="consent-dialog">
+            <div class="dialog-header">
+                <i class="icon-help-circle"></i>
+                <h3>确认执行</h3>
+            </div>
+            <div class="dialog-content">
+                <p>确定要执行此命令吗？</p>
+                <div class="command-preview">
+                    <code>{{ command }}</code>
+                </div>
+                <div class="checkbox-group">
+                    <label>
+                        <input type="checkbox" [(ngModel)]="rememberChoice">
+                        记住我的选择（30天内不再提示）
+                    </label>
+                </div>
+            </div>
+            <div class="dialog-footer">
+                <button class="btn btn-secondary" (click)="cancel()">取消</button>
+                <button class="btn btn-primary" (click)="confirm()">确认执行</button>
+            </div>
+        </div>
+    `,
+    styles: [`
+        .consent-dialog {
+            background: var(--ai-bg-primary);
+            border-radius: 0.5rem;
+            max-width: 500px;
+        }
+        .dialog-header {
+            padding: 1.5rem;
+            text-align: center;
+            border-bottom: 1px solid var(--ai-border);
+        }
+        .dialog-content {
+            padding: 1.5rem;
+        }
+        .command-preview {
+            background: var(--ai-bg-secondary);
+            padding: 0.75rem;
+            border-radius: 0.375rem;
+            margin: 1rem 0;
+        }
+        .checkbox-group {
+            margin-top: 1rem;
+        }
+        .dialog-footer {
+            padding: 1rem 1.5rem;
+            display: flex;
+            justify-content: flex-end;
+            gap: 0.5rem;
+            border-top: 1px solid var(--ai-border);
+        }
+    `]
+})
+export class ConsentDialogComponent {
+    @Input() command: string = '';
+    @Input() riskLevel: RiskLevel = RiskLevel.MEDIUM;
+    rememberChoice = false;
+
+    constructor(public activeModal: NgbActiveModal) {}
+
+    confirm(): void {
+        this.activeModal.close({ confirmed: true, remember: this.rememberChoice });
+    }
+
+    cancel(): void {
+        this.activeModal.dismiss('cancel');
+    }
+}

package/src/components/security/password-prompt.component.ts

@@ -0,0 +1,79 @@
+import { Component, Input } from '@angular/core';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+
+@Component({
+    selector: 'app-password-prompt',
+    template: `
+        <div class="password-prompt">
+            <div class="prompt-header">
+                <i class="icon-lock"></i>
+                <h3>密码验证</h3>
+            </div>
+            <div class="prompt-content">
+                <p>请输入密码以执行此高风险操作：</p>
+                <input
+                    type="password"
+                    class="form-control"
+                    [(ngModel)]="password"
+                    (keydown.enter)="submit()"
+                    placeholder="输入密码"
+                    #passwordInput>
+                <div *ngIf="errorMessage" class="error-message">
+                    <i class="icon-alert-circle"></i>
+                    {{ errorMessage }}
+                </div>
+            </div>
+            <div class="prompt-footer">
+                <button class="btn btn-secondary" (click)="cancel()">取消</button>
+                <button class="btn btn-primary" (click)="submit()" [disabled]="!password">确认</button>
+            </div>
+        </div>
+    `,
+    styles: [`
+        .password-prompt {
+            background: var(--ai-bg-primary);
+            border-radius: 0.5rem;
+            max-width: 400px;
+            margin: 0 auto;
+        }
+        .prompt-header {
+            padding: 1.5rem;
+            text-align: center;
+            border-bottom: 1px solid var(--ai-border);
+        }
+        .prompt-content {
+            padding: 1.5rem;
+        }
+        .error-message {
+            margin-top: 0.75rem;
+            color: var(--ai-danger);
+            font-size: 0.875rem;
+        }
+        .prompt-footer {
+            padding: 1rem 1.5rem;
+            display: flex;
+            justify-content: flex-end;
+            gap: 0.5rem;
+            border-top: 1px solid var(--ai-border);
+        }
+    `]
+})
+export class PasswordPromptComponent {
+    @Input() title: string = '密码验证';
+    password = '';
+    errorMessage = '';
+
+    constructor(public activeModal: NgbActiveModal) {}
+
+    submit(): void {
+        if (this.password) {
+            this.activeModal.close(this.password);
+        } else {
+            this.errorMessage = '请输入密码';
+        }
+    }
+
+    cancel(): void {
+        this.activeModal.dismiss('cancel');
+    }
+}

package/src/components/security/risk-confirm-dialog.component.html

@@ -0,0 +1,87 @@
+<div class="risk-confirm-dialog">
+    <!-- 头部 -->
+    <div class="dialog-header">
+        <div class="risk-indicator" [style.color]="getRiskLevelColor()">
+            <i [class]="getRiskLevelIcon()"></i>
+            <span>{{ getRiskLevelText() }}</span>
+        </div>
+        <button type="button" class="close-button" (click)="cancel()">
+            <i class="icon-x"></i>
+        </button>
+    </div>
+
+    <!-- 内容 -->
+    <div class="dialog-content">
+        <!-- 风险提示 -->
+        <div class="risk-warning" [ngClass]="isHighRisk() ? 'high-risk' : 'medium-risk'">
+            <div class="warning-icon">
+                <i [class]="getRiskLevelIcon()"></i>
+            </div>
+            <div class="warning-text">
+                <h4>安全警告</h4>
+                <p>此命令被识别为{{ getRiskLevelText() }}，请仔细确认后再执行。</p>
+            </div>
+        </div>
+
+        <!-- 命令信息 -->
+        <div class="command-info">
+            <div class="info-section">
+                <label>将要执行的命令:</label>
+                <div class="command-display">
+                    <code>{{ command }}</code>
+                    <button class="btn-copy" (click)="navigator.clipboard.writeText(command)" title="复制">
+                        <i class="icon-copy"></i>
+                    </button>
+                </div>
+            </div>
+
+            <div class="info-section">
+                <label>命令解释:</label>
+                <p class="explanation">{{ explanation }}</p>
+            </div>
+
+            <!-- 安全建议 -->
+            <div class="info-section" *ngIf="suggestions.length > 0">
+                <label>安全建议:</label>
+                <ul class="suggestions-list">
+                    <li *ngFor="let suggestion of suggestions">
+                        <i class="icon-lightbulb"></i>
+                        <span>{{ suggestion }}</span>
+                    </li>
+                </ul>
+            </div>
+        </div>
+
+        <!-- 额外警告（高风险） -->
+        <div *ngIf="isHighRisk()" class="high-risk-warning">
+            <div class="warning-box">
+                <i class="icon-alert-triangle"></i>
+                <div class="warning-content">
+                    <strong>⚠️ 重要提示</strong>
+                    <p *ngIf="riskLevel === 'critical'">
+                        此命令可能导致系统损坏或数据丢失，请在执行前备份重要数据！
+                    </p>
+                    <p *ngIf="riskLevel === 'high'">
+                        此命令将修改系统设置或删除文件，请确保您了解命令的作用。
+                    </p>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- 底部按钮 -->
+    <div class="dialog-footer">
+        <button type="button" class="btn btn-secondary" (click)="cancel()">
+            <i class="icon-x"></i>
+            取消
+        </button>
+        <button
+            type="button"
+            class="btn btn-danger"
+            [ngClass]="{ 'btn-critical': isHighRisk() }"
+            (click)="confirm()">
+            <i [class]="isHighRisk() ? 'icon-alert-triangle' : 'icon-check'"></i>
+            {{ isHighRisk() ? '仍要执行' : '确认执行' }}
+        </button>
+    </div>
+</div>