tabby-ai-assistant 1.0.8 → 1.0.10

package/src/components/chat/ai-sidebar.component.ts

@@ -1,11 +1,13 @@
-import { Component, OnInit, OnDestroy, ViewChild, ElementRef, AfterViewChecked } from '@angular/core';
+import { Component, OnInit, OnDestroy, ViewChild, ElementRef, AfterViewChecked, AfterViewInit, ViewEncapsulation, HostBinding } 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 { ChatHistoryService } from '../../services/chat/chat-history.service';
 import { AiSidebarService } from '../../services/chat/ai-sidebar.service';
+import { ThemeService, ThemeType } from '../../services/core/theme.service';
 
 /**
  * AI Sidebar 组件 - 替代 ChatInterfaceComponent
@@ -137,349 +139,17 @@ import { AiSidebarService } from '../../services/chat/ai-sidebar.service';
             </div>
         </div>
     `,
-    styles: [`
-        :host {
-            display: block;
-            height: 100%;
-            width: 100%;
-        }
-
-        .ai-sidebar-container {
-            display: flex;
-            flex-direction: column;
-            height: 100%;
-            background: var(--bs-body-bg, #1e1e1e);
-            color: var(--bs-body-color, #e0e0e0);
-            overflow: hidden;
-        }
-
-        .ai-sidebar-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding: 12px 16px;
-            border-bottom: 1px solid var(--bs-border-color, #333);
-            background: var(--bs-tertiary-bg, #252525);
-        }
-
-        .header-title {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            font-weight: 600;
-            font-size: 14px;
-        }
-
-        .header-icon {
-            color: var(--bs-primary, #0d6efd);
-        }
-
-        .provider-badge {
-            padding: 2px 6px;
-            background: var(--bs-secondary-bg, #2a2a2a);
-            border-radius: 4px;
-            font-size: 11px;
-            color: var(--bs-secondary-color, #aaa);
-            font-weight: normal;
-        }
-
-        .header-actions {
-            display: flex;
-            gap: 4px;
-        }
-
-        .header-actions .btn-link {
-            padding: 4px 8px;
-            color: var(--bs-secondary-color, #aaa);
-            border: none;
-            background: transparent;
-            cursor: pointer;
-            border-radius: 4px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            transition: all 0.2s;
-        }
-
-        .header-actions .btn-link:hover {
-            color: var(--bs-primary, #0d6efd);
-            background: var(--bs-hover-bg, rgba(255, 255, 255, 0.05));
-        }
-
-        .header-actions .btn-close-sidebar {
-            margin-right: 4px;
-            padding-right: 8px;
-            border-right: 1px solid var(--bs-border-color, #333);
-        }
-
-        .header-actions .btn-close-sidebar:hover {
-            color: var(--bs-danger, #dc3545);
-        }
-
-        .ai-sidebar-messages {
-            flex: 1;
-            overflow-y: auto;
-            overflow-x: hidden;
-            padding: 16px;
-            scroll-behavior: smooth;
-        }
-
-        .ai-sidebar-messages::-webkit-scrollbar {
-            width: 8px;
-        }
-
-        .ai-sidebar-messages::-webkit-scrollbar-track {
-            background: var(--bs-body-bg, #1e1e1e);
-        }
-
-        .ai-sidebar-messages::-webkit-scrollbar-thumb {
-            background: var(--bs-border-color, #333);
-            border-radius: 4px;
-        }
-
-        .ai-sidebar-messages::-webkit-scrollbar-thumb:hover {
-            background: var(--bs-secondary-color, #666);
-        }
-
-        .message-item {
-            display: flex;
-            gap: 12px;
-            margin-bottom: 16px;
-            animation: fadeIn 0.3s ease-in;
-        }
-
-        @keyframes fadeIn {
-            from {
-                opacity: 0;
-                transform: translateY(10px);
-            }
-            to {
-                opacity: 1;
-                transform: translateY(0);
-            }
-        }
-
-        .message-avatar {
-            flex-shrink: 0;
-            width: 32px;
-            height: 32px;
-            border-radius: 50%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            background: var(--bs-secondary-bg, #2a2a2a);
-            color: var(--bs-primary, #0d6efd);
-        }
-
-        .message-item.assistant .message-avatar {
-            color: var(--bs-primary, #0d6efd);
-        }
-
-        .message-item.user .message-avatar {
-            color: var(--bs-success, #28a745);
-        }
-
-        .message-content {
-            flex: 1;
-            min-width: 0;
-        }
-
-        .message-header {
-            display: flex;
-            gap: 8px;
-            align-items: center;
-            margin-bottom: 4px;
-        }
-
-        .message-role {
-            font-size: 12px;
-            font-weight: 600;
-            color: var(--bs-primary, #0d6efd);
-        }
-
-        .message-time {
-            font-size: 11px;
-            color: var(--bs-secondary-color, #999);
-        }
-
-        .message-text {
-            font-size: 13px;
-            line-height: 1.6;
-            color: var(--bs-body-color, #e0e0e0);
-            word-wrap: break-word;
-            white-space: pre-wrap;
-        }
-
-        .message-item.loading {
-            opacity: 0.7;
-        }
-
-        .loading-dots {
-            display: flex;
-            gap: 4px;
-            padding: 8px 0;
-        }
-
-        .loading-dots span {
-            width: 6px;
-            height: 6px;
-            border-radius: 50%;
-            background: var(--bs-primary, #0d6efd);
-            animation: bounce 1.4s infinite ease-in-out;
-        }
-
-        .loading-dots span:nth-child(1) {
-            animation-delay: -0.32s;
-        }
-
-        .loading-dots span:nth-child(2) {
-            animation-delay: -0.16s;
-        }
-
-        @keyframes bounce {
-            0%, 80%, 100% {
-                transform: scale(0);
-            }
-            40% {
-                transform: scale(1);
-            }
-        }
-
-        .scroll-btn {
-            position: absolute;
-            right: 16px;
-            width: 32px;
-            height: 32px;
-            border-radius: 50%;
-            border: 1px solid var(--bs-border-color, #333);
-            background: var(--bs-body-bg, #1e1e1e);
-            color: var(--bs-primary, #0d6efd);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
-            transition: all 0.2s;
-            z-index: 10;
-        }
-
-        .scroll-btn:hover {
-            background: var(--bs-hover-bg, rgba(255, 255, 255, 0.05));
-            transform: translateY(-2px);
-        }
-
-        .scroll-btn.scroll-top {
-            bottom: 120px;
-        }
-
-        .scroll-btn.scroll-bottom {
-            bottom: 80px;
-        }
-
-        .ai-sidebar-input {
-            padding: 12px 16px;
-            border-top: 1px solid var(--bs-border-color, #333);
-            background: var(--bs-tertiary-bg, #252525);
-        }
-
-        .input-container {
-            position: relative;
-            display: flex;
-            gap: 8px;
-            align-items: flex-end;
-        }
-
-        .message-input {
-            flex: 1;
-            min-height: 38px;
-            max-height: 120px;
-            padding: 8px 12px;
-            border: 1px solid var(--bs-border-color, #333);
-            border-radius: 8px;
-            background: var(--bs-body-bg, #1e1e1e);
-            color: var(--bs-body-color, #e0e0e0);
-            font-size: 13px;
-            font-family: inherit;
-            resize: none;
-            outline: none;
-            transition: border-color 0.2s;
-        }
-
-        .message-input:focus {
-            border-color: var(--bs-primary, #0d6efd);
-        }
-
-        .message-input:disabled {
-            opacity: 0.6;
-            cursor: not-allowed;
-        }
-
-        .message-input::placeholder {
-            color: var(--bs-secondary-color, #999);
-        }
-
-        .send-btn {
-            width: 38px;
-            height: 38px;
-            border-radius: 8px;
-            border: 1px solid var(--bs-border-color, #333);
-            background: var(--bs-primary, #0d6efd);
-            color: white;
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            transition: all 0.2s;
-            flex-shrink: 0;
-        }
-
-        .send-btn:hover:not(:disabled) {
-            background: var(--bs-primary-hover, #0b5ed7);
-            transform: translateY(-1px);
-        }
-
-        .send-btn:disabled {
-            opacity: 0.4;
-            cursor: not-allowed;
-            background: var(--bs-secondary-bg, #2a2a2a);
-        }
-
-        .input-footer {
-            margin-top: 6px;
-            display: flex;
-            justify-content: flex-end;
-        }
-
-        .char-count {
-            color: var(--bs-secondary-color, #999);
-            font-size: 11px;
-        }
-
-        .char-count.warning {
-            color: var(--bs-warning, #ffc107);
-        }
-
-        .char-count.danger {
-            color: var(--bs-danger, #dc3545);
-        }
-
-        /* Responsive adjustments */
-        @media (max-width: 768px) {
-            .ai-sidebar-header {
-                padding: 10px 12px;
-            }
-
-            .ai-sidebar-messages {
-                padding: 12px;
-            }
-
-            .ai-sidebar-input {
-                padding: 10px 12px;
-            }
-        }
-    `]
+    styleUrls: ['./ai-sidebar.component.scss'],
+    encapsulation: ViewEncapsulation.None
 })
-export class AiSidebarComponent implements OnInit, OnDestroy, AfterViewChecked {
+export class AiSidebarComponent implements OnInit, OnDestroy, AfterViewChecked, AfterViewInit {
+    // HostBinding 确保样式正确应用
+    @HostBinding('style.display') displayStyle = 'flex';
+    @HostBinding('style.flex-direction') flexDirection = 'column';
+    @HostBinding('style.height') heightStyle = '100%';
+    @HostBinding('style.width') widthStyle = '100%';
+    @HostBinding('style.overflow') overflowStyle = 'hidden';
+
     @ViewChild('chatContainer') chatContainerRef!: ElementRef;
     @ViewChild('textInput') textInput!: ElementRef<HTMLTextAreaElement>;
 
@@ -504,10 +174,18 @@ export class AiSidebarComponent implements OnInit, OnDestroy, AfterViewChecked {
         private aiService: AiAssistantService,
         private config: ConfigProviderService,
         private logger: LoggerService,
-        private chatHistory: ChatHistoryService
+        private chatHistory: ChatHistoryService,
+        private themeService: ThemeService
     ) { }
 
     ngOnInit(): void {
+        // 监听主题变化
+        this.themeService.theme$.pipe(
+            takeUntil(this.destroy$)
+        ).subscribe(theme => {
+            this.logger.debug('Sidebar theme changed', { theme });
+        });
+
         // 生成或加载会话 ID
         this.currentSessionId = this.generateSessionId();
 
@@ -533,6 +211,31 @@ export class AiSidebarComponent implements OnInit, OnDestroy, AfterViewChecked {
         this.destroy$.complete();
     }
 
+    ngAfterViewInit(): void {
+        // 强制设置滚动样式 - 绕过 CSS 优先级问题
+        this.forceScrollStyles();
+    }
+
+    /**
+     * 强制设置滚动容器样式
+     * 使用 JavaScript 直接设置，优先级最高
+     */
+    private forceScrollStyles(): void {
+        setTimeout(() => {
+            const container = this.chatContainerRef?.nativeElement;
+            if (container) {
+                // 直接设置内联样式 - 优先级最高
+                container.style.flex = '1 1 auto';
+                container.style.height = '0';
+                container.style.minHeight = '0';
+                container.style.overflowY = 'auto';
+                container.style.overflowX = 'hidden';
+                container.style.display = 'block';
+                this.logger.debug('[AI Sidebar] Scroll styles applied via JS');
+            }
+        }, 100);  // 延迟确保 DOM 已渲染
+    }
+
     ngAfterViewChecked(): void {
         if (this.shouldScrollToBottom) {
             this.performScrollToBottom();

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

@@ -17,7 +17,7 @@
         border: 2px solid var(--ai-border);
         border-radius: 0.75rem;
         background-color: var(--ai-bg-primary);
-        color: var(--ai-dark);
+        color: var(--ai-text-primary);
         font-family: inherit;
         font-size: 14px;
         line-height: 1.5;
@@ -85,7 +85,7 @@
 
         &:hover {
             background-color: var(--ai-border);
-            color: var(--ai-dark);
+            color: var(--ai-text-primary);
         }
 
         .icon-clear {

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

@@ -1,11 +1,13 @@
-import { Component, Output, EventEmitter, Input, ViewChild, ElementRef, OnInit, OnDestroy } from '@angular/core';
+import { Component, Output, EventEmitter, Input, ViewChild, ElementRef, OnInit, OnDestroy, ViewEncapsulation } from '@angular/core';
 import { Subject } from 'rxjs';
 import { debounceTime, takeUntil } from 'rxjs/operators';
+import { ConfigProviderService } from '../../services/core/config-provider.service';
 
 @Component({
     selector: 'app-chat-input',
     templateUrl: './chat-input.component.html',
-    styleUrls: ['./chat-input.component.scss']
+    styleUrls: ['./chat-input.component.scss'],
+    encapsulation: ViewEncapsulation.None
 })
 export class ChatInputComponent implements OnInit, OnDestroy {
     @Input() disabled = false;
@@ -18,8 +20,14 @@ export class ChatInputComponent implements OnInit, OnDestroy {
     private inputSubject = new Subject<string>();
     private destroy$ = new Subject<void>();
     isComposing = false; // 用于处理中文输入法
+    enterToSend: boolean = true; // Enter键发送
+
+    constructor(private config: ConfigProviderService) {}
 
     ngOnInit(): void {
+        // 读取 Enter 发送设置
+        this.enterToSend = this.config.get<boolean>('ui.enterToSend', true) ?? true;
+
         // 监听输入变化，实现防抖
         this.inputSubject.pipe(
             debounceTime(300),
@@ -47,10 +55,13 @@ export class ChatInputComponent implements OnInit, OnDestroy {
      * 处理键盘事件
      */
     onKeydown(event: KeyboardEvent): void {
-        // Enter 发送（不包含Shift）
+        // Enter 发送（根据配置决定）
         if (event.key === 'Enter' && !event.shiftKey && !this.isComposing) {
-            event.preventDefault();
-            this.submit();
+            if (this.enterToSend) {
+                event.preventDefault();
+                this.submit();
+            }
+            // 如果 enterToSend 为 false，Enter 会插入换行符
         }
     }
 

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

@@ -4,7 +4,7 @@
         <div class="header-left">
             <h2 class="ai-title">
                 <i class="fa fa-comments"></i>
-                AI助手
+                {{ t.chatInterface.title }}
             </h2>
             <span class="provider-badge">
                 <i class="fa fa-cloud"></i>
@@ -12,13 +12,13 @@
             </span>
         </div>
         <div class="header-actions">
-            <button class="btn-icon" (click)="switchProvider()" title="切换AI提供商">
+            <button class="btn-icon" (click)="switchProvider()" [title]="t.chatInterface.switchProvider">
                 <i class="fa fa-exchange"></i>
             </button>
-            <button class="btn-icon" (click)="exportChat()" title="导出聊天记录">
+            <button class="btn-icon" (click)="exportChat()" [title]="t.chatInterface.exportChat">
                 <i class="fa fa-download"></i>
             </button>
-            <button class="btn-icon danger" (click)="clearChat()" title="清空聊天记录">
+            <button class="btn-icon danger" (click)="clearChat()" [title]="t.chatInterface.clearChat">
                 <i class="fa fa-trash"></i>
             </button>
         </div>
@@ -35,7 +35,7 @@
                     <div *ngIf="i === 0 || !isSameDay(message.timestamp, messages[i-1].timestamp)"
                         class="date-separator">
                         <span class="date-text">
-                            {{ isToday(message.timestamp) ? '今天' : message.timestamp.toLocaleDateString('zh-CN') }}
+                            {{ isToday(message.timestamp) ? t.common.today : message.timestamp.toLocaleDateString('zh-CN') }}
                         </span>
                     </div>
 
@@ -46,7 +46,7 @@
                              'system-message': message.role === 'system'
                          }">
                         <!-- 头像 -->
-                        <div class="message-avatar">
+                        <div class="message-avatar" *ngIf="showAvatars">
                             <div *ngIf="message.role === 'user'" class="avatar user">
                                 <i class="fa fa-user"></i>
                             </div>
@@ -79,7 +79,7 @@
                             </div>
 
                             <!-- 消息时间 -->
-                            <div class="message-time">
+                            <div class="message-time" *ngIf="showTimestamps">
                                 {{ formatTimestamp(message.timestamp) }}
                             </div>
                         </div>
@@ -93,7 +93,7 @@
                         <span></span>
                         <span></span>
                     </div>
-                    <span class="loading-text">AI正在思考...</span>
+                    <span class="loading-text">{{ t.chatInterface.thinking }}</span>
                 </div>
             </div>
         </div>
@@ -117,11 +117,11 @@
     <div class="chat-tips" *ngIf="messages.length === 1">
         <div class="tip-item">
             <i class="fa fa-lightbulb-o"></i>
-            <span>提示：您可以描述想执行的命令，例如"查看当前目录的所有文件"</span>
+            <span>{{ t.chatInterface.tipCommand }}</span>
         </div>
         <div class="tip-item">
             <i class="fa fa-keyboard-o"></i>
-            <span>快捷键：Ctrl+Shift+G 生成命令，Ctrl+Shift+E 解释命令</span>
+            <span>{{ t.chatInterface.tipShortcut }}</span>
         </div>
     </div>
-</div>
+</div>