tabby-ai-assistant 1.0.9 → 1.0.11

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "tabby-ai-assistant",
-    "version": "1.0.9",
+    "version": "1.0.11",
     "description": "Tabby终端AI助手插件 - 支持多AI提供商（OpenAI、Anthropic、Minimax、GLM、Ollama、vLLM）",
     "main": "dist/index.js",
     "typings": "dist/index.d.ts",
@@ -25,8 +25,8 @@
     ],
     "author": "Mr.zhang",
     "license": "MIT",
-    "repository": "",
-    "homepage": "",
+    "repository": "https://github.com/zhangyang-crazy-one/tabby-ai-assistant",
+    "homepage": "https://github.com/zhangyang-crazy-one/tabby-ai-assistant",
     "dependencies": {
         "@angular/animations": "~15.2.10",
         "@angular/common": "~15.2.10",

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

@@ -74,6 +74,49 @@
     }
 }
 
+// Token 使用进度条
+.token-usage-bar {
+    position: relative;
+    height: 20px;
+    background: rgba(255, 255, 255, 0.08);
+    border-radius: 4px;
+    margin: 8px 16px;
+    overflow: hidden;
+
+    .usage-progress {
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 100%;
+        border-radius: 4px;
+        transition: width 0.3s ease, background-color 0.3s ease;
+
+        &.usage-low {
+            background: linear-gradient(90deg, #4ade80, #22c55e);
+        }
+
+        &.usage-medium {
+            background: linear-gradient(90deg, #fbbf24, #f59e0b);
+        }
+
+        &.usage-high {
+            background: linear-gradient(90deg, #f87171, #ef4444);
+        }
+    }
+
+    .usage-text {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        font-size: 11px;
+        font-weight: 500;
+        color: var(--ai-text-primary, #f8f9fa);
+        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
+        white-space: nowrap;
+    }
+}
+
 // Messages container
 .ai-sidebar-messages {
     flex: 1 !important;

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

@@ -8,6 +8,7 @@ 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';
+import { ContextManager } from '../../services/context/manager';
 
 /**
  * AI Sidebar 组件 - 替代 ChatInterfaceComponent
@@ -54,6 +55,19 @@ import { ThemeService, ThemeType } from '../../services/core/theme.service';
                 </div>
             </div>
 
+            <!-- Token 使用情况 -->
+            <div class="token-usage-bar" *ngIf="currentTokens > 0">
+                <div class="usage-progress"
+                     [style.width.%]="tokenUsagePercent"
+                     [ngClass]="{
+                         'usage-low': tokenUsagePercent < 50,
+                         'usage-medium': tokenUsagePercent >= 50 && tokenUsagePercent < 80,
+                         'usage-high': tokenUsagePercent >= 80
+                     }">
+                </div>
+                <span class="usage-text">{{ currentTokens | number }} / {{ maxTokens | number }} Token</span>
+            </div>
+
             <!-- Messages -->
             <div class="ai-sidebar-messages" #chatContainer (scroll)="onScroll($event)">
                 <div *ngFor="let message of messages; let i = index" class="message-item" [ngClass]="message.role">
@@ -167,6 +181,11 @@ export class AiSidebarComponent implements OnInit, OnDestroy, AfterViewChecked,
     isComposing = false;
     charLimit = 4000;
 
+    // Token 使用状态
+    currentTokens: number = 0;
+    maxTokens: number = 200000;
+    tokenUsagePercent: number = 0;
+
     private destroy$ = new Subject<void>();
     private shouldScrollToBottom = false;
 
@@ -175,7 +194,8 @@ export class AiSidebarComponent implements OnInit, OnDestroy, AfterViewChecked,
         private config: ConfigProviderService,
         private logger: LoggerService,
         private chatHistory: ChatHistoryService,
-        private themeService: ThemeService
+        private themeService: ThemeService,
+        private contextManager: ContextManager
     ) { }
 
     ngOnInit(): void {
@@ -357,11 +377,33 @@ export class AiSidebarComponent implements OnInit, OnDestroy, AfterViewChecked,
             this.messages.push(errorMessage);
         } finally {
             this.isLoading = false;
+            // 更新 Token 使用情况
+            this.updateTokenUsage();
             // 滚动到底部
             setTimeout(() => this.scrollToBottom(), 0);
         }
     }
 
+    /**
+     * 更新 Token 使用情况
+     */
+    private updateTokenUsage(): void {
+        // 获取最大上下文限制
+        this.maxTokens = this.config.getActiveProviderContextWindow() || 200000;
+
+        // 计算当前消息的 Token 使用量（简单估算：每4个字符≈1 Token）
+        this.currentTokens = this.messages.reduce((sum, msg) => {
+            const content = typeof msg.content === 'string' ? msg.content : '';
+            return sum + Math.ceil(content.length / 4);
+        }, 0);
+
+        // 计算使用百分比
+        this.tokenUsagePercent = Math.min(
+            Math.round((this.currentTokens / this.maxTokens) * 100),
+            100
+        );
+    }
+
     /**
      * 清空聊天记录
      */

package/src/components/settings/ai-settings-tab.component.html

@@ -34,12 +34,15 @@
     </div>
 
     <!-- 标签页导航 -->
-    <div class="tabs-nav" *ngIf="isEnabled">
-        <button *ngFor="let tab of tabs" class="tab-button" [class.active]="activeTab === tab.id"
-            (click)="switchTab(tab.id)">
+    <div class="settings-tabs" *ngIf="isEnabled">
+        <div *ngFor="let tab of tabs"
+             class="tab-item"
+             [class.active]="activeTab === tab.id"
+             [attr.data-tab]="tab.id"
+             (click)="switchTab(tab.id)">
             <i [class]="tab.icon"></i>
-            <span>{{ t[tab.labelKey.split('.')[0]][tab.labelKey.split('.')[1]] }}</span>
-        </button>
+            <span>{{ t.settings?.[tab.labelKey.split('.')[1]] || tab.labelKey }}</span>
+        </div>
     </div>
 
     <!-- 内容区域 -->
@@ -56,6 +59,11 @@
             </app-provider-config>
         </div>
 
+        <!-- 上下文管理设置 -->
+        <div *ngIf="activeTab === 'context'" class="tab-content">
+            <app-context-settings></app-context-settings>
+        </div>
+
         <!-- 安全设置 -->
         <div *ngIf="activeTab === 'security'" class="tab-content">
             <app-security-settings></app-security-settings>

package/src/components/settings/ai-settings-tab.component.scss

@@ -97,49 +97,168 @@
     }
 }
 
-/* 标签页导航 */
-.tabs-nav {
+// ==================== Tab 导航栏 ====================
+.settings-tabs {
     display: flex;
-    background-color: var(--ai-bg-secondary);
-    border-bottom: 1px solid var(--ai-border);
+    align-items: center;
+    gap: 6px;
+    padding: 10px 16px;
+    background: linear-gradient(180deg,
+        rgba(0, 0, 0, 0.15) 0%,
+        rgba(0, 0, 0, 0.05) 100%
+    );
+    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+    margin-bottom: 20px;
     overflow-x: auto;
+    scrollbar-width: thin;
 
-    .tab-button {
-        padding: 0.75rem 1.5rem;
-        border: none;
+    // 自定义滚动条
+    &::-webkit-scrollbar {
+        height: 4px;
+    }
+    &::-webkit-scrollbar-track {
         background: transparent;
-        border-bottom: 2px solid transparent;
-        display: flex;
-        align-items: center;
-        gap: 0.5rem;
-        cursor: pointer;
-        transition: all 0.2s;
-        color: var(--ai-text-secondary);
-        white-space: nowrap;
-        font-size: 0.875rem;
-        font-weight: 500;
+    }
+    &::-webkit-scrollbar-thumb {
+        background: rgba(255, 255, 255, 0.15);
+        border-radius: 4px;
 
         &:hover {
-            color: var(--ai-text-primary);
-            background-color: rgba(0, 0, 0, 0.05);
+            background: rgba(255, 255, 255, 0.25);
+        }
+    }
+}
+
+.tab-item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    padding: 10px 20px;
+    border-radius: 20px;
+    cursor: pointer;
+    white-space: nowrap;
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--ai-text-secondary, #8a8f98);
+    background: transparent;
+    border: 1px solid transparent;
+    transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+    position: relative;
+    user-select: none;
+
+    // 图标
+    i {
+        font-size: 14px;
+        transition: transform 0.2s ease, color 0.2s ease, filter 0.2s ease;
+    }
+
+    // 悬停效果
+    &:hover:not(.active) {
+        background: rgba(255, 255, 255, 0.06);
+        color: var(--ai-text-primary, #e0e0e0);
+        border-color: rgba(255, 255, 255, 0.08);
+
+        i {
+            transform: scale(1.12);
         }
+    }
+
+    // 点击效果
+    &:active:not(.active) {
+        transform: scale(0.97);
+    }
 
-        &.active {
-            color: var(--ai-primary);
-            border-bottom-color: var(--ai-primary);
-            background-color: rgba(0, 123, 255, 0.05);
+    // 选中状态
+    &.active {
+        background: linear-gradient(135deg,
+            #4a9eff 0%,
+            #2d7dd2 50%,
+            #1a6bc0 100%
+        );
+        color: #ffffff;
+        border: 1px solid rgba(255, 255, 255, 0.2);
+        box-shadow:
+            0 4px 16px rgba(45, 125, 210, 0.4),
+            0 2px 4px rgba(0, 0, 0, 0.2),
+            inset 0 1px 0 rgba(255, 255, 255, 0.25);
+
+        i {
+            color: white;
+            filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.5));
         }
 
-        .icon-settings,
-        .icon-provider,
-        .icon-shield,
-        .icon-chat,
-        .icon-advanced {
-            font-size: 1rem;
+        // 选中光晕效果
+        &::before {
+            content: '';
+            position: absolute;
+            top: -2px;
+            left: -2px;
+            right: -2px;
+            bottom: -2px;
+            border-radius: 22px;
+            background: linear-gradient(135deg,
+                rgba(74, 158, 255, 0.3) 0%,
+                rgba(45, 125, 210, 0.1) 100%
+            );
+            z-index: -1;
+            opacity: 0;
+            animation: glowPulse 2s ease-in-out infinite;
         }
     }
 }
 
+// 各 Tab 图标独特颜色（未选中状态）
+.tab-item:not(.active) {
+    // 基本设置 - 银灰色
+    &[data-tab="general"] i,
+    i.fa-cog {
+        color: #9ca3af;
+    }
+
+    // AI 提供商 - 天蓝色
+    &[data-tab="providers"] i,
+    i.fa-cloud {
+        color: #60a5fa;
+    }
+
+    // 上下文设置 - 青蓝色
+    &[data-tab="context"] i,
+    i.fa-database {
+        color: #38bdf8;
+    }
+
+    // 安全设置 - 翠绿色
+    &[data-tab="security"] i,
+    i.fa-shield {
+        color: #4ade80;
+    }
+
+    // 聊天设置 - 紫罗兰色
+    &[data-tab="chat"] i,
+    i.fa-comments {
+        color: #c084fc;
+    }
+
+    // 高级设置 - 橙色
+    &[data-tab="advanced"] i,
+    i.fa-sliders {
+        color: #fb923c;
+    }
+}
+
+// 光晕脉冲动画
+@keyframes glowPulse {
+    0%, 100% {
+        opacity: 0.5;
+        transform: scale(1);
+    }
+    50% {
+        opacity: 0.8;
+        transform: scale(1.02);
+    }
+}
+
 /* 内容区域 */
 .settings-content {
     flex: 1;
@@ -363,10 +482,22 @@
         }
     }
 
-    .tabs-nav {
-        .tab-button {
-            padding: 0.5rem 1rem;
-            font-size: 0.8rem;
+    .settings-tabs {
+        padding: 8px 12px;
+        gap: 4px;
+
+        .tab-item {
+            padding: 8px 14px;
+            font-size: 12px;
+
+            // 小屏幕隐藏文字，只显示图标
+            span {
+                display: none;
+            }
+
+            i {
+                font-size: 16px;
+            }
         }
     }
 

package/src/components/settings/ai-settings-tab.component.ts

@@ -66,6 +66,7 @@ export class AiSettingsTabComponent implements OnInit, OnDestroy {
         this.tabs = [
             { id: 'general', labelKey: 'settings.generalTab', icon: 'fa fa-cog' },
             { id: 'providers', labelKey: 'settings.providersTab', icon: 'fa fa-cloud' },
+            { id: 'context', labelKey: 'settings.contextTab', icon: 'fa fa-database' },
             { id: 'security', labelKey: 'settings.securityTab', icon: 'fa fa-shield' },
             { id: 'chat', labelKey: 'settings.chatTab', icon: 'fa fa-comments' },
             { id: 'advanced', labelKey: 'settings.advancedTab', icon: 'fa fa-sliders' }

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

@@ -0,0 +1,87 @@
+<div class="context-settings">
+    <h3>{{ t.contextSettings?.title || '上下文管理' }}</h3>
+
+    <!-- 自动压缩开关 -->
+    <div class="setting-section">
+        <div class="section-header">
+            <h4>{{ t.contextSettings?.autoCompact || '自动压缩' }}</h4>
+        </div>
+        <div class="setting-item">
+            <label>{{ t.contextSettings?.enableAutoCompact || '启用自动压缩' }}</label>
+            <div class="toggle-switch">
+                <input type="checkbox" id="auto-compact"
+                    [checked]="autoCompactEnabled"
+                    (change)="toggleAutoCompact()">
+                <label for="auto-compact">
+                    {{ autoCompactEnabled ? (t.common?.enabled || '启用') : (t.common?.disabled || '禁用') }}
+                </label>
+            </div>
+            <p class="setting-desc">{{ t.contextSettings?.autoCompactDesc || '当上下文超过阈值时自动压缩历史消息' }}</p>
+        </div>
+    </div>
+
+    <!-- Token 配置 -->
+    <div class="setting-section">
+        <div class="section-header">
+            <h4>{{ t.contextSettings?.tokenConfig || 'Token 配置' }}</h4>
+        </div>
+
+        <!-- 当前供应商上下文信息 -->
+        <div class="provider-context-info">
+            <i class="fa fa-info-circle"></i>
+            <span>{{ t.contextSettings?.currentProviderLimit || '当前供应商上下文限制' }}: {{ activeProviderContextWindow | number }} Token</span>
+        </div>
+
+        <div class="setting-item">
+            <label>{{ t.contextSettings?.maxContextTokens || '最大上下文 Token 数' }}</label>
+            <input type="number" class="form-control" [(ngModel)]="config.maxContextTokens"
+                min="10000" [max]="activeProviderContextWindow" step="10000">
+            <p class="setting-desc">{{ t.contextSettings?.maxContextTokensDesc || '不能超过当前供应商的上下文限制' }}</p>
+        </div>
+
+        <div class="setting-item">
+            <label>{{ t.contextSettings?.reservedOutputTokens || '输出预留 Token 数' }}</label>
+            <input type="number" class="form-control" [(ngModel)]="config.reservedOutputTokens"
+                min="1000" max="32000" step="1000">
+            <p class="setting-desc">{{ t.contextSettings?.reservedOutputTokensDesc || '为 AI 回复预留的 Token 数量' }}</p>
+        </div>
+    </div>
+
+    <!-- 压缩阈值配置 -->
+    <div class="setting-section">
+        <div class="section-header">
+            <h4>{{ t.contextSettings?.thresholdConfig || '压缩阈值' }}</h4>
+        </div>
+
+        <div class="setting-item">
+            <label>{{ t.contextSettings?.pruneThreshold || '裁剪阈值' }}: {{ (config.pruneThreshold * 100).toFixed(0) }}%</label>
+            <input type="range" class="form-range" [(ngModel)]="config.pruneThreshold"
+                min="0.5" max="0.9" step="0.05">
+            <p class="setting-desc">{{ t.contextSettings?.pruneThresholdDesc || '使用率超过此阈值时裁剪冗余内容（默认：70%）' }}</p>
+        </div>
+
+        <div class="setting-item">
+            <label>{{ t.contextSettings?.compactThreshold || '压缩阈值' }}: {{ (config.compactThreshold * 100).toFixed(0) }}%</label>
+            <input type="range" class="form-range" [(ngModel)]="config.compactThreshold"
+                min="0.7" max="0.95" step="0.05">
+            <p class="setting-desc">{{ t.contextSettings?.compactThresholdDesc || '使用率超过此阈值时生成摘要压缩（默认：85%）' }}</p>
+        </div>
+
+        <div class="setting-item">
+            <label>{{ t.contextSettings?.messagesToKeep || '保留消息数' }}</label>
+            <input type="number" class="form-control" [(ngModel)]="config.messagesToKeep"
+                min="1" max="20" step="1">
+            <p class="setting-desc">{{ t.contextSettings?.messagesToKeepDesc || '压缩时始终保留的最近消息数量（默认：3）' }}</p>
+        </div>
+    </div>
+
+    <!-- 操作按钮 -->
+    <div class="form-actions">
+        <button class="btn btn-primary" (click)="saveConfig()">
+            <i class="fa fa-save"></i> {{ t.providers?.saveConfig || '保存配置' }}
+        </button>
+        <button class="btn btn-secondary" (click)="resetToDefaults()">
+            <i class="fa fa-undo"></i> {{ t.common?.reset || '重置默认' }}
+        </button>
+    </div>
+</div>

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

@@ -0,0 +1,133 @@
+.context-settings {
+    max-width: 800px;
+
+    h3 {
+        margin: 0 0 1.5rem 0;
+        font-size: 1.25rem;
+        font-weight: 600;
+        color: var(--ai-text-primary);
+    }
+}
+
+.provider-context-info {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 10px 12px;
+    background: var(--ai-bg-tertiary, #f0f4f8);
+    border: 1px solid var(--ai-primary, #3b82f6);
+    border-radius: 8px;
+    margin-bottom: 16px;
+    font-size: 0.9em;
+    color: var(--ai-text-secondary, #64748b);
+
+    i {
+        color: var(--ai-primary, #3b82f6);
+        font-size: 1.1em;
+    }
+}
+
+.setting-section {
+    margin-bottom: 24px;
+    padding: 16px;
+    background: var(--ai-bg-secondary);
+    border: 1px solid var(--ai-border);
+    border-radius: 12px;
+
+    .section-header h4 {
+        margin: 0 0 16px 0;
+        font-size: 16px;
+        font-weight: 600;
+        color: var(--ai-text-primary);
+    }
+}
+
+.setting-item {
+    margin-bottom: 16px;
+
+    label {
+        display: block;
+        font-weight: 500;
+        margin-bottom: 6px;
+        color: var(--ai-text-primary);
+    }
+
+    .setting-desc {
+        font-size: 0.85em;
+        color: var(--ai-text-secondary);
+        margin-top: 4px;
+        margin-bottom: 0;
+    }
+
+    .form-control, .form-range {
+        width: 100%;
+        max-width: 300px;
+        padding: 8px 12px;
+        border: 1px solid var(--ai-border);
+        border-radius: 8px;
+        background: var(--ai-bg-primary);
+        color: var(--ai-text-primary);
+    }
+
+    .form-range {
+        padding: 0;
+        height: 6px;
+        cursor: pointer;
+    }
+}
+
+.toggle-switch {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    input[type="checkbox"] {
+        width: 18px;
+        height: 18px;
+        accent-color: var(--ai-primary);
+        cursor: pointer;
+    }
+
+    label {
+        margin: 0;
+        font-weight: normal;
+        cursor: pointer;
+    }
+}
+
+.form-actions {
+    display: flex;
+    gap: 12px;
+    margin-top: 24px;
+
+    .btn {
+        padding: 10px 20px;
+        border: none;
+        border-radius: 8px;
+        cursor: pointer;
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
+        font-size: 14px;
+        font-weight: 500;
+        transition: all 0.2s;
+
+        &.btn-primary {
+            background-color: var(--ai-primary);
+            color: white;
+
+            &:hover {
+                background-color: var(--ai-primary-hover);
+            }
+        }
+
+        &.btn-secondary {
+            background-color: var(--ai-secondary);
+            color: white;
+
+            &:hover {
+                filter: brightness(0.9);
+            }
+        }
+    }
+}