tabby-ai-assistant 1.0.8 → 1.0.10

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

@@ -1,10 +1,11 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { Component, Input, Output, EventEmitter, ViewEncapsulation } from '@angular/core';
 import { ChatMessage } from '../../types/ai.types';
 
 @Component({
     selector: 'app-chat-message',
     templateUrl: './chat-message.component.html',
-    styleUrls: ['./chat-message.component.scss']
+    styleUrls: ['./chat-message.component.scss'],
+    encapsulation: ViewEncapsulation.None
 })
 export class ChatMessageComponent {
     @Input() message!: ChatMessage;

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

@@ -1,21 +1,23 @@
 <div class="chat-settings">
-    <h3>聊天设置</h3>
+    <h3>{{ t.chatSettings.title }}</h3>
 
     <!-- 主题设置 -->
     <div class="settings-section">
-        <h4>外观</h4>
+        <h4>{{ t.chatSettings.appearance }}</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>
+            <label>{{ t.chatSettings.theme }}</label>
+            <div class="theme-selector">
+                <button *ngFor="let themeOption of themes" class="theme-btn"
+                    [class.active]="settings.theme === themeOption.value" (click)="updateTheme(themeOption.value)" type="button">
+                    <div class="theme-preview" [attr.data-theme]="themeOption.value"></div>
+                    <span>{{ themeOption.label }}</span>
+                </button>
+            </div>
         </div>
 
         <div class="form-group">
-            <label>字体大小</label>
+            <label>{{ t.chatSettings.fontSize }}</label>
             <div class="font-size-selector">
                 <button
                     *ngFor="let size of fontSizes"
@@ -27,60 +29,83 @@
             </div>
         </div>
 
-        <div class="form-check">
+        <div class="form-check compact-mode-check">
             <input
                 type="checkbox"
                 id="compactMode"
                 [(ngModel)]="settings.compactMode"
                 (change)="toggleCompactMode()">
-            <label for="compactMode">紧凑模式</label>
+            <label for="compactMode">
+                <strong>{{ t.chatSettings.compactMode }}</strong>
+                <span class="option-desc">{{ t.chatSettings.compactModeDesc }}</span>
+            </label>
         </div>
     </div>
 
     <!-- 聊天行为 -->
     <div class="settings-section">
-        <h4>聊天行为</h4>
+        <h4>{{ t.chatSettings.behavior }}</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 class="setting-item">
+            <div class="form-check">
+                <input
+                    type="checkbox"
+                    id="enterToSend"
+                    [(ngModel)]="settings.enterToSend"
+                    (change)="saveSetting('ui.enterToSend', settings.enterToSend)">
+                <label for="enterToSend">
+                    <strong>{{ t.chatSettings.enterToSend }}</strong>
+                    <span class="option-desc">{{ t.chatSettings.enterToSendDesc }}</span>
+                </label>
+            </div>
         </div>
 
-        <div class="form-check">
-            <input
-                type="checkbox"
-                id="showTimestamps"
-                [(ngModel)]="settings.showTimestamps"
-                (change)="saveSetting('ui.showTimestamps', settings.showTimestamps)">
-            <label for="showTimestamps">显示时间戳</label>
+        <div class="setting-item">
+            <div class="form-check">
+                <input
+                    type="checkbox"
+                    id="showTimestamps"
+                    [(ngModel)]="settings.showTimestamps"
+                    (change)="saveSetting('ui.showTimestamps', settings.showTimestamps)">
+                <label for="showTimestamps">
+                    <strong>{{ t.chatSettings.showTimestamps }}</strong>
+                    <span class="option-desc">{{ t.chatSettings.showTimestampsDesc }}</span>
+                </label>
+            </div>
         </div>
 
-        <div class="form-check">
-            <input
-                type="checkbox"
-                id="showAvatars"
-                [(ngModel)]="settings.showAvatars"
-                (change)="saveSetting('ui.showAvatars', settings.showAvatars)">
-            <label for="showAvatars">显示头像</label>
+        <div class="setting-item">
+            <div class="form-check">
+                <input
+                    type="checkbox"
+                    id="showAvatars"
+                    [(ngModel)]="settings.showAvatars"
+                    (change)="saveSetting('ui.showAvatars', settings.showAvatars)">
+                <label for="showAvatars">
+                    <strong>{{ t.chatSettings.showAvatars }}</strong>
+                    <span class="option-desc">{{ t.chatSettings.showAvatarsDesc }}</span>
+                </label>
+            </div>
         </div>
 
-        <div class="form-check">
-            <input
-                type="checkbox"
-                id="soundEnabled"
-                [(ngModel)]="settings.soundEnabled"
-                (change)="saveSetting('ui.soundEnabled', settings.soundEnabled)">
-            <label for="soundEnabled">启用提示音</label>
+        <div class="setting-item">
+            <div class="form-check">
+                <input
+                    type="checkbox"
+                    id="soundEnabled"
+                    [(ngModel)]="settings.soundEnabled"
+                    (change)="saveSetting('ui.soundEnabled', settings.soundEnabled)">
+                <label for="soundEnabled">
+                    <strong>{{ t.chatSettings.soundEnabled }}</strong>
+                    <span class="option-desc">{{ t.chatSettings.soundEnabledDesc }}</span>
+                </label>
+            </div>
         </div>
     </div>
 
     <!-- 聊天历史 -->
     <div class="settings-section">
-        <h4>聊天历史</h4>
+        <h4>{{ t.chatSettings.history }}</h4>
 
         <div class="form-check">
             <input
@@ -88,20 +113,26 @@
                 id="chatHistoryEnabled"
                 [(ngModel)]="settings.chatHistoryEnabled"
                 (change)="saveSetting('chatHistoryEnabled', settings.chatHistoryEnabled)">
-            <label for="chatHistoryEnabled">启用聊天历史</label>
+            <label for="chatHistoryEnabled">
+                <strong>{{ t.chatSettings.enableHistory }}</strong>
+                <span class="option-desc">{{ t.chatSettings.enableHistoryDesc }}</span>
+            </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 class="form-group history-limit" *ngIf="settings.chatHistoryEnabled">
+            <label>{{ t.chatSettings.maxHistory }}</label>
+            <div class="input-with-unit">
+                <input
+                    type="number"
+                    class="form-control"
+                    [(ngModel)]="settings.maxChatHistory"
+                    (change)="saveSetting('maxChatHistory', settings.maxChatHistory)"
+                    min="10"
+                    max="1000"
+                    step="10">
+                <span class="unit">{{ t.chatSettings.maxHistoryUnit }}</span>
+            </div>
+            <small class="form-text">{{ t.chatSettings.autoSaveDesc }}</small>
         </div>
 
         <div class="form-check" *ngIf="settings.chatHistoryEnabled">
@@ -110,23 +141,26 @@
                 id="autoSaveChat"
                 [(ngModel)]="settings.autoSaveChat"
                 (change)="saveSetting('autoSaveChat', settings.autoSaveChat)">
-            <label for="autoSaveChat">自动保存聊天记录</label>
+            <label for="autoSaveChat">
+                <strong>{{ t.chatSettings.autoSave }}</strong>
+                <span class="option-desc">{{ t.chatSettings.autoSaveDesc }}</span>
+            </label>
         </div>
     </div>
 
     <!-- 操作按钮 -->
     <div class="settings-actions">
         <button class="btn btn-secondary" (click)="exportSettings()">
-            <i class="icon-export"></i>
-            导出设置
+            <i class="fa fa-download"></i>
+            {{ t.chatSettings.exportSettings }}
         </button>
         <button class="btn btn-danger" (click)="clearChatHistory()">
-            <i class="icon-clear"></i>
-            清空聊天记录
+            <i class="fa fa-trash"></i>
+            {{ t.chatSettings.clearHistory }}
         </button>
-        <button class="btn btn-warning" (click)="resetToDefaults()">
-            <i class="icon-refresh"></i>
-            重置为默认
+        <button class="btn btn-outline" (click)="resetToDefaults()">
+            <i class="fa fa-undo"></i>
+            {{ t.chatSettings.resetDefaults }}
         </button>
     </div>
 </div>

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

@@ -1,46 +1,56 @@
 .chat-settings {
     padding: 1.5rem;
+    max-width: 900px;
 
     h3 {
         margin: 0 0 1.5rem 0;
         font-size: 1.25rem;
         font-weight: 600;
-        color: var(--ai-dark);
+        color: var(--ai-text-primary);
     }
 
     .settings-section {
         margin-bottom: 2rem;
-        padding-bottom: 1.5rem;
-        border-bottom: 1px solid var(--ai-border);
+        padding: 1.5rem;
+        background-color: var(--ai-bg-secondary);
+        border-radius: 12px;
+        border: 1px solid var(--ai-border);
 
         &:last-child {
             border-bottom: none;
+            padding-bottom: 0;
         }
 
         h4 {
-            margin: 0 0 1rem 0;
+            margin: 0 0 1.25rem 0;
             font-size: 1.125rem;
             font-weight: 600;
-            color: var(--ai-dark);
+            color: var(--ai-text-primary);
         }
 
         .form-group {
-            margin-bottom: 1rem;
+            margin-bottom: 1.5rem;
+
+            &:last-child {
+                margin-bottom: 0;
+            }
 
             label {
                 display: block;
                 font-weight: 500;
-                margin-bottom: 0.5rem;
-                color: var(--ai-dark);
+                margin-bottom: 0.625rem;
+                color: var(--ai-text-primary);
+                font-size: 0.875rem;
             }
 
             .form-control {
                 width: 100%;
-                padding: 0.5rem 0.75rem;
+                max-width: 200px;
+                padding: 0.625rem 0.875rem;
                 border: 1px solid var(--ai-border);
-                border-radius: 0.375rem;
+                border-radius: 8px;
                 background-color: var(--ai-bg-primary);
-                color: var(--ai-dark);
+                color: var(--ai-text-primary);
                 font-size: 14px;
 
                 &:focus {
@@ -50,87 +60,220 @@
                 }
             }
 
-            .font-size-selector {
+            .form-text {
+                font-size: 0.8125rem;
+                color: var(--ai-text-secondary);
+                margin-top: 0.5rem;
+            }
+        }
+
+        .theme-selector {
+            display: flex;
+            gap: 1rem;
+            flex-wrap: wrap;
+
+            .theme-btn {
+                padding: 0.75rem;
+                border: 2px solid var(--ai-border);
+                border-radius: 12px;
+                background-color: var(--ai-bg-primary);
+                cursor: pointer;
+                transition: all 0.2s ease;
                 display: flex;
+                flex-direction: column;
+                align-items: center;
                 gap: 0.5rem;
-                flex-wrap: wrap;
+                min-width: 100px;
 
-                .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);
+                    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+                    transform: translateY(-2px);
+                }
+
+                &.active {
+                    border-color: var(--ai-primary);
+                    background-color: rgba(0, 123, 255, 0.08);
+                    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2);
+                }
+
+                .theme-preview {
+                    width: 56px;
+                    height: 56px;
+                    border-radius: 8px;
+                    border: 2px solid var(--ai-border);
+                    transition: all 0.2s ease;
+
+                    &[data-theme="light"] {
+                        background: linear-gradient(135deg, #ffffff 0%, #f0f0f0 100%);
+                    }
 
-                    &:hover {
-                        border-color: var(--ai-primary);
+                    &[data-theme="dark"] {
+                        background: linear-gradient(135deg, #3a3a4a 0%, #1a1a2a 100%);
                     }
 
-                    &.active {
-                        background-color: var(--ai-primary);
-                        color: white;
-                        border-color: var(--ai-primary);
+                    &[data-theme="auto"] {
+                        background: linear-gradient(135deg, #ffffff 0%, #3a3a4a 50%, #1a1a2a 100%);
                     }
                 }
+
+                span {
+                    font-size: 0.875rem;
+                    color: var(--ai-text-primary);
+                    font-weight: 500;
+                }
             }
+        }
 
-            .form-text {
+        .font-size-selector {
+            display: flex;
+            gap: 0.75rem;
+            flex-wrap: wrap;
+
+            .font-size-btn {
+                padding: 0.625rem 1rem;
+                border: 2px solid var(--ai-border);
+                border-radius: 8px;
+                background-color: var(--ai-bg-primary);
+                color: var(--ai-text-primary);
+                cursor: pointer;
+                transition: all 0.2s ease;
                 font-size: 0.875rem;
-                color: var(--ai-secondary);
-                margin-top: 0.25rem;
+                font-weight: 500;
+                min-width: 60px;
+
+                &:hover {
+                    border-color: var(--ai-primary);
+                    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+                    transform: translateY(-1px);
+                }
+
+                &.active {
+                    background-color: var(--ai-primary);
+                    color: white;
+                    border-color: var(--ai-primary);
+                    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
+                }
             }
         }
 
         .form-check {
             display: flex;
-            align-items: center;
-            gap: 0.5rem;
-            margin-bottom: 0.75rem;
+            align-items: flex-start;
+            gap: 0.75rem;
+            padding: 0.75rem;
+            border-radius: 8px;
+            margin-bottom: 0.5rem;
+            transition: background-color 0.2s;
+
+            &:hover {
+                background-color: rgba(255, 255, 255, 0.03);
+            }
+
+            &:last-child {
+                margin-bottom: 0;
+            }
 
             input[type="checkbox"] {
-                width: 1rem;
-                height: 1rem;
+                width: 1.125rem;
+                height: 1.125rem;
+                margin-top: 0.125rem;
                 accent-color: var(--ai-primary);
+                flex-shrink: 0;
             }
 
             label {
                 margin: 0;
-                font-weight: 400;
                 cursor: pointer;
-                color: var(--ai-dark);
+                flex: 1;
+
+                strong {
+                    display: block;
+                    margin-bottom: 0.25rem;
+                    color: var(--ai-text-primary);
+                    font-size: 0.9375rem;
+                }
+
+                .option-desc {
+                    display: block;
+                    font-size: 0.8125rem;
+                    color: var(--ai-text-secondary);
+                    font-weight: normal;
+                }
+            }
+        }
+
+        .setting-item {
+            margin-bottom: 0.5rem;
+
+            &:last-child {
+                margin-bottom: 0;
+            }
+        }
+
+        .compact-mode-check {
+            margin-top: 0.5rem;
+        }
+
+        .input-with-unit {
+            display: flex;
+            align-items: center;
+            gap: 0;
+
+            .form-control {
+                border-top-right-radius: 0;
+                border-bottom-right-radius: 0;
+                max-width: 120px;
+            }
+
+            .unit {
+                padding: 0.625rem 1rem;
+                background-color: var(--ai-bg-primary);
+                border: 1px solid var(--ai-border);
+                border-left: none;
+                border-top-right-radius: 8px;
+                border-bottom-right-radius: 8px;
+                color: var(--ai-text-secondary);
+                font-size: 0.875rem;
             }
         }
+
+        .history-limit {
+            margin-top: 1rem;
+        }
     }
 
     .settings-actions {
         display: flex;
-        gap: 0.75rem;
+        gap: 1rem;
         flex-wrap: wrap;
         margin-top: 2rem;
         padding-top: 1.5rem;
         border-top: 1px solid var(--ai-border);
 
         .btn {
-            padding: 0.5rem 1rem;
+            padding: 0.75rem 1.5rem;
             border: none;
-            border-radius: 0.375rem;
-            font-weight: 500;
+            border-radius: 8px;
+            font-weight: 600;
             cursor: pointer;
-            transition: all 0.2s;
+            transition: all 0.2s ease;
             display: flex;
             align-items: center;
-            gap: 0.375rem;
+            gap: 0.5rem;
             font-size: 0.875rem;
 
+            i {
+                font-size: 1rem;
+            }
+
             &.btn-secondary {
-                background-color: var(--ai-secondary);
+                background-color: var(--ai-text-secondary);
                 color: white;
 
                 &:hover {
                     background-color: #5a6268;
+                    transform: translateY(-1px);
                 }
             }
 
@@ -140,15 +283,19 @@
 
                 &:hover {
                     background-color: #c82333;
+                    transform: translateY(-1px);
                 }
             }
 
-            &.btn-warning {
-                background-color: var(--ai-warning);
-                color: var(--ai-dark);
+            &.btn-outline {
+                background-color: transparent;
+                border: 2px solid var(--ai-border);
+                color: var(--ai-text-secondary);
 
                 &:hover {
-                    background-color: #e0a800;
+                    border-color: var(--ai-primary);
+                    color: var(--ai-primary);
+                    transform: translateY(-1px);
                 }
             }
         }
@@ -160,6 +307,33 @@
     .chat-settings {
         padding: 1rem;
 
+        .settings-section {
+            padding: 1rem;
+
+            .theme-selector {
+                .theme-btn {
+                    min-width: 80px;
+                    padding: 0.5rem;
+
+                    .theme-preview {
+                        width: 48px;
+                        height: 48px;
+                    }
+
+                    span {
+                        font-size: 0.8rem;
+                    }
+                }
+            }
+
+            .font-size-selector {
+                .font-size-btn {
+                    padding: 0.5rem 0.875rem;
+                    min-width: 55px;
+                }
+            }
+        }
+
         .settings-actions {
             flex-direction: column;
 
@@ -169,4 +343,4 @@
             }
         }
     }
-}
+}