tabby-ai-assistant 1.0.0

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

@@ -0,0 +1,178 @@
+.chat-message {
+    display: flex;
+    gap: 0.75rem;
+    margin-bottom: 1rem;
+    cursor: pointer;
+    transition: opacity 0.2s;
+
+    &:hover {
+        opacity: 0.95;
+    }
+
+    &.user-message {
+        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 {
+        .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 {
+        justify-content: center;
+
+        .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;
+            }
+        }
+    }
+
+    &.grouped {
+        &.user-message,
+        &.assistant-message {
+            .message-avatar {
+                opacity: 0.6;
+            }
+
+            .message-content {
+                .message-bubble {
+                    border-radius: 0.75rem;
+                }
+            }
+        }
+    }
+
+    &.with-avatar {
+        .message-avatar {
+            flex-shrink: 0;
+
+            .avatar {
+                width: 36px;
+                height: 36px;
+                border-radius: 50%;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                font-size: 1rem;
+            }
+        }
+    }
+}
+
+/* 消息内容 */
+.message-content {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    max-width: 70%;
+
+    .message-bubble {
+        padding: 0.75rem 1rem;
+        border-radius: 0.75rem;
+        box-shadow: var(--ai-box-shadow);
+        word-wrap: break-word;
+        position: relative;
+
+        .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-actions {
+            display: flex;
+            gap: 0.25rem;
+            margin-top: 0.5rem;
+            opacity: 0;
+            transition: opacity 0.2s;
+
+            .action-btn {
+                width: 28px;
+                height: 28px;
+                border: none;
+                background: rgba(0, 0, 0, 0.05);
+                border-radius: 0.375rem;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                cursor: pointer;
+                transition: all 0.2s;
+                color: var(--ai-secondary);
+
+                &:hover {
+                    background: rgba(0, 0, 0, 0.1);
+                    color: var(--ai-dark);
+                }
+            }
+        }
+
+        &:hover .message-actions {
+            opacity: 1;
+        }
+    }
+
+    .message-time {
+        font-size: 0.75rem;
+        opacity: 0.6;
+        padding: 0 0.5rem;
+    }
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+    .chat-message {
+        .message-content {
+            max-width: 85%;
+        }
+    }
+}

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

@@ -0,0 +1,93 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { ChatMessage } from '../../types/ai.types';
+
+@Component({
+    selector: 'app-chat-message',
+    templateUrl: './chat-message.component.html',
+    styleUrls: ['./chat-message.component.scss']
+})
+export class ChatMessageComponent {
+    @Input() message!: ChatMessage;
+    @Input() showAvatar = true;
+    @Input() showTimestamp = true;
+    @Input() isGrouped = false; // 是否与上一条消息分组
+    @Output() messageClick = new EventEmitter<ChatMessage>();
+    @Output() messageAction = new EventEmitter<{ action: string; message: ChatMessage }>();
+
+    /**
+     * 处理消息点击
+     */
+    onMessageClick(): void {
+        this.messageClick.emit(this.message);
+    }
+
+    /**
+     * 处理消息操作
+     */
+    onAction(action: string): void {
+        this.messageAction.emit({ action, message: this.message });
+    }
+
+    /**
+     * 复制消息内容
+     */
+    copyMessage(): void {
+        navigator.clipboard.writeText(this.message.content).then(() => {
+            // TODO: 显示复制成功提示
+        });
+    }
+
+    /**
+     * 重新生成响应
+     */
+    regenerateResponse(): void {
+        if (this.message.role === 'assistant') {
+            this.onAction('regenerate');
+        }
+    }
+
+    /**
+     * 标记为有用
+     */
+    markAsHelpful(): void {
+        this.onAction('helpful');
+    }
+
+    /**
+     * 标记为无用
+     */
+    markAsNotHelpful(): void {
+        this.onAction('not-helpful');
+    }
+
+    /**
+     * 格式化时间
+     */
+    formatTime(timestamp: Date): string {
+        return timestamp.toLocaleTimeString('zh-CN', {
+            hour: '2-digit',
+            minute: '2-digit'
+        });
+    }
+
+    /**
+     * 检查是否为用户消息
+     */
+    isUserMessage(): boolean {
+        return this.message.role === 'user';
+    }
+
+    /**
+     * 检查是否为AI消息
+     */
+    isAssistantMessage(): boolean {
+        return this.message.role === 'assistant';
+    }
+
+    /**
+     * 检查是否为系统消息
+     */
+    isSystemMessage(): boolean {
+        return this.message.role === 'system';
+    }
+}

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

@@ -0,0 +1,132 @@
+<div class="chat-settings">
+    <h3>聊天设置</h3>
+
+    <!-- 主题设置 -->
+    <div class="settings-section">
+        <h4>外观</h4>
+
+        <div class="form-group">
+            <label>主题</label>
+            <select class="form-control" [(ngModel)]="settings.theme" (change)="updateTheme(settings.theme)">
+                <option *ngFor="let theme of themes" [value]="theme.value">
+                    {{ theme.label }}
+                </option>
+            </select>
+        </div>
+
+        <div class="form-group">
+            <label>字体大小</label>
+            <div class="font-size-selector">
+                <button
+                    *ngFor="let size of fontSizes"
+                    class="font-size-btn"
+                    [class.active]="settings.fontSize === size"
+                    (click)="updateFontSize(size)">
+                    {{ size }}px
+                </button>
+            </div>
+        </div>
+
+        <div class="form-check">
+            <input
+                type="checkbox"
+                id="compactMode"
+                [(ngModel)]="settings.compactMode"
+                (change)="toggleCompactMode()">
+            <label for="compactMode">紧凑模式</label>
+        </div>
+    </div>
+
+    <!-- 聊天行为 -->
+    <div class="settings-section">
+        <h4>聊天行为</h4>
+
+        <div class="form-check">
+            <input
+                type="checkbox"
+                id="enterToSend"
+                [(ngModel)]="settings.enterToSend"
+                (change)="saveSetting('ui.enterToSend', settings.enterToSend)">
+            <label for="enterToSend">Enter键发送消息</label>
+        </div>
+
+        <div class="form-check">
+            <input
+                type="checkbox"
+                id="showTimestamps"
+                [(ngModel)]="settings.showTimestamps"
+                (change)="saveSetting('ui.showTimestamps', settings.showTimestamps)">
+            <label for="showTimestamps">显示时间戳</label>
+        </div>
+
+        <div class="form-check">
+            <input
+                type="checkbox"
+                id="showAvatars"
+                [(ngModel)]="settings.showAvatars"
+                (change)="saveSetting('ui.showAvatars', settings.showAvatars)">
+            <label for="showAvatars">显示头像</label>
+        </div>
+
+        <div class="form-check">
+            <input
+                type="checkbox"
+                id="soundEnabled"
+                [(ngModel)]="settings.soundEnabled"
+                (change)="saveSetting('ui.soundEnabled', settings.soundEnabled)">
+            <label for="soundEnabled">启用提示音</label>
+        </div>
+    </div>
+
+    <!-- 聊天历史 -->
+    <div class="settings-section">
+        <h4>聊天历史</h4>
+
+        <div class="form-check">
+            <input
+                type="checkbox"
+                id="chatHistoryEnabled"
+                [(ngModel)]="settings.chatHistoryEnabled"
+                (change)="saveSetting('chatHistoryEnabled', settings.chatHistoryEnabled)">
+            <label for="chatHistoryEnabled">启用聊天历史</label>
+        </div>
+
+        <div class="form-group" *ngIf="settings.chatHistoryEnabled">
+            <label>最大历史记录数</label>
+            <input
+                type="number"
+                class="form-control"
+                [(ngModel)]="settings.maxChatHistory"
+                (change)="saveSetting('maxChatHistory', settings.maxChatHistory)"
+                min="10"
+                max="1000"
+                step="10">
+            <small class="form-text">保存的最大聊天记录数量</small>
+        </div>
+
+        <div class="form-check" *ngIf="settings.chatHistoryEnabled">
+            <input
+                type="checkbox"
+                id="autoSaveChat"
+                [(ngModel)]="settings.autoSaveChat"
+                (change)="saveSetting('autoSaveChat', settings.autoSaveChat)">
+            <label for="autoSaveChat">自动保存聊天记录</label>
+        </div>
+    </div>
+
+    <!-- 操作按钮 -->
+    <div class="settings-actions">
+        <button class="btn btn-secondary" (click)="exportSettings()">
+            <i class="icon-export"></i>
+            导出设置
+        </button>
+        <button class="btn btn-danger" (click)="clearChatHistory()">
+            <i class="icon-clear"></i>
+            清空聊天记录
+        </button>
+        <button class="btn btn-warning" (click)="resetToDefaults()">
+            <i class="icon-refresh"></i>
+            重置为默认
+        </button>
+    </div>
+</div>

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

@@ -0,0 +1,172 @@
+.chat-settings {
+    padding: 1.5rem;
+
+    h3 {
+        margin: 0 0 1.5rem 0;
+        font-size: 1.25rem;
+        font-weight: 600;
+        color: var(--ai-dark);
+    }
+
+    .settings-section {
+        margin-bottom: 2rem;
+        padding-bottom: 1.5rem;
+        border-bottom: 1px solid var(--ai-border);
+
+        &:last-child {
+            border-bottom: none;
+        }
+
+        h4 {
+            margin: 0 0 1rem 0;
+            font-size: 1.125rem;
+            font-weight: 600;
+            color: var(--ai-dark);
+        }
+
+        .form-group {
+            margin-bottom: 1rem;
+
+            label {
+                display: block;
+                font-weight: 500;
+                margin-bottom: 0.5rem;
+                color: var(--ai-dark);
+            }
+
+            .form-control {
+                width: 100%;
+                padding: 0.5rem 0.75rem;
+                border: 1px solid var(--ai-border);
+                border-radius: 0.375rem;
+                background-color: var(--ai-bg-primary);
+                color: var(--ai-dark);
+                font-size: 14px;
+
+                &:focus {
+                    outline: none;
+                    border-color: var(--ai-primary);
+                    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.15);
+                }
+            }
+
+            .font-size-selector {
+                display: flex;
+                gap: 0.5rem;
+                flex-wrap: wrap;
+
+                .font-size-btn {
+                    padding: 0.5rem 0.75rem;
+                    border: 1px solid var(--ai-border);
+                    border-radius: 0.375rem;
+                    background-color: var(--ai-bg-primary);
+                    color: var(--ai-dark);
+                    cursor: pointer;
+                    transition: all 0.2s;
+                    font-size: 0.875rem;
+
+                    &:hover {
+                        border-color: var(--ai-primary);
+                    }
+
+                    &.active {
+                        background-color: var(--ai-primary);
+                        color: white;
+                        border-color: var(--ai-primary);
+                    }
+                }
+            }
+
+            .form-text {
+                font-size: 0.875rem;
+                color: var(--ai-secondary);
+                margin-top: 0.25rem;
+            }
+        }
+
+        .form-check {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            margin-bottom: 0.75rem;
+
+            input[type="checkbox"] {
+                width: 1rem;
+                height: 1rem;
+                accent-color: var(--ai-primary);
+            }
+
+            label {
+                margin: 0;
+                font-weight: 400;
+                cursor: pointer;
+                color: var(--ai-dark);
+            }
+        }
+    }
+
+    .settings-actions {
+        display: flex;
+        gap: 0.75rem;
+        flex-wrap: wrap;
+        margin-top: 2rem;
+        padding-top: 1.5rem;
+        border-top: 1px solid var(--ai-border);
+
+        .btn {
+            padding: 0.5rem 1rem;
+            border: none;
+            border-radius: 0.375rem;
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 0.2s;
+            display: flex;
+            align-items: center;
+            gap: 0.375rem;
+            font-size: 0.875rem;
+
+            &.btn-secondary {
+                background-color: var(--ai-secondary);
+                color: white;
+
+                &:hover {
+                    background-color: darken(#6c757d, 7.5%);
+                }
+            }
+
+            &.btn-danger {
+                background-color: var(--ai-danger);
+                color: white;
+
+                &:hover {
+                    background-color: darken(#dc3545, 7.5%);
+                }
+            }
+
+            &.btn-warning {
+                background-color: var(--ai-warning);
+                color: var(--ai-dark);
+
+                &:hover {
+                    background-color: darken(#ffc107, 7.5%);
+                }
+            }
+        }
+    }
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+    .chat-settings {
+        padding: 1rem;
+
+        .settings-actions {
+            flex-direction: column;
+
+            .btn {
+                width: 100%;
+                justify-content: center;
+            }
+        }
+    }
+}