tabby-ai-assistant 1.0.0

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

@@ -0,0 +1,183 @@
+.chat-input-container {
+    padding: 1rem;
+    background-color: var(--ai-bg-secondary);
+}
+
+/* 输入区域 */
+.input-wrapper {
+    position: relative;
+    margin-bottom: 0.75rem;
+
+    .chat-textarea {
+        width: 100%;
+        min-height: 44px;
+        max-height: 120px;
+        padding: 0.75rem 1rem;
+        padding-right: 4rem; // 为字符计数留出空间
+        border: 2px solid var(--ai-border);
+        border-radius: 0.75rem;
+        background-color: var(--ai-bg-primary);
+        color: var(--ai-dark);
+        font-family: inherit;
+        font-size: 14px;
+        line-height: 1.5;
+        resize: none;
+        transition: all 0.2s;
+        overflow-y: hidden; // 初始隐藏滚动条
+
+        &:focus {
+            outline: none;
+            border-color: var(--ai-primary);
+            box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.15);
+        }
+
+        &:disabled {
+            background-color: var(--ai-bg-secondary);
+            cursor: not-allowed;
+            opacity: 0.6;
+        }
+
+        &::placeholder {
+            color: var(--ai-secondary);
+            opacity: 0.8;
+        }
+    }
+
+    .char-counter {
+        position: absolute;
+        bottom: 0.5rem;
+        right: 0.75rem;
+        font-size: 0.75rem;
+        color: var(--ai-secondary);
+        background-color: var(--ai-bg-primary);
+        padding: 0.125rem 0.375rem;
+        border-radius: 0.25rem;
+
+        &.warning {
+            color: var(--ai-warning);
+        }
+
+        &.error {
+            color: var(--ai-danger);
+            font-weight: 600;
+        }
+    }
+}
+
+/* 操作按钮 */
+.input-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.5rem;
+
+    .btn-icon {
+        width: 40px;
+        height: 40px;
+        border: none;
+        background: transparent;
+        border-radius: 0.5rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        transition: all 0.2s;
+        color: var(--ai-secondary);
+
+        &:hover {
+            background-color: var(--ai-border);
+            color: var(--ai-dark);
+        }
+
+        .icon-clear {
+            font-size: 1.125rem;
+        }
+    }
+
+    .btn-send {
+        min-width: 100px;
+        height: 40px;
+        padding: 0 1rem;
+        border: none;
+        border-radius: 0.5rem;
+        background-color: var(--ai-primary);
+        color: white;
+        font-weight: 500;
+        cursor: pointer;
+        transition: all 0.2s;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0.5rem;
+
+        &:hover:not(:disabled) {
+            background-color: darken(#007bff, 7.5%);
+            transform: translateY(-1px);
+        }
+
+        &:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+            transform: none;
+        }
+
+        .icon-send {
+            font-size: 1rem;
+        }
+
+        .btn-text {
+            font-size: 0.875rem;
+        }
+    }
+}
+
+/* 帮助提示 */
+.input-hints {
+    margin-top: 0.5rem;
+    display: flex;
+    gap: 1rem;
+    flex-wrap: wrap;
+
+    .hint-item {
+        font-size: 0.75rem;
+        color: var(--ai-secondary);
+        display: flex;
+        align-items: center;
+        gap: 0.375rem;
+
+        kbd {
+            padding: 0.125rem 0.375rem;
+            background-color: var(--ai-bg-primary);
+            border: 1px solid var(--ai-border);
+            border-radius: 0.25rem;
+            font-size: 0.7rem;
+            font-family: monospace;
+        }
+
+        .icon-warning {
+            color: var(--ai-warning);
+            font-size: 0.875rem;
+        }
+    }
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+    .chat-input-container {
+        padding: 0.75rem;
+    }
+
+    .input-actions {
+        .btn-send {
+            min-width: 80px;
+            .btn-text {
+                display: none;
+            }
+        }
+    }
+
+    .input-hints {
+        .hint-item {
+            font-size: 0.7rem;
+        }
+    }
+}

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

@@ -0,0 +1,149 @@
+import { Component, Output, EventEmitter, Input, ViewChild, ElementRef, OnInit, OnDestroy } from '@angular/core';
+import { Subject } from 'rxjs';
+import { debounceTime, takeUntil } from 'rxjs/operators';
+
+@Component({
+    selector: 'app-chat-input',
+    templateUrl: './chat-input.component.html',
+    styleUrls: ['./chat-input.component.scss']
+})
+export class ChatInputComponent implements OnInit, OnDestroy {
+    @Input() disabled = false;
+    @Input() placeholder = '输入您的问题或描述要执行的命令...';
+    @Output() send = new EventEmitter<string>();
+
+    @ViewChild('textInput', { static: false }) textInput!: ElementRef<HTMLTextAreaElement>;
+
+    inputValue = '';
+    private inputSubject = new Subject<string>();
+    private destroy$ = new Subject<void>();
+    isComposing = false; // 用于处理中文输入法
+
+    ngOnInit(): void {
+        // 监听输入变化，实现防抖
+        this.inputSubject.pipe(
+            debounceTime(300),
+            takeUntil(this.destroy$)
+        ).subscribe(value => {
+            // 这里可以触发自动完成或其他功能
+            this.onInputChange(value);
+        });
+    }
+
+    ngOnDestroy(): void {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+
+    /**
+     * 处理输入变化
+     */
+    onInputChange(value: string): void {
+        // TODO: 实现智能建议功能
+        // 可以基于输入内容提供命令建议
+    }
+
+    /**
+     * 处理键盘事件
+     */
+    onKeydown(event: KeyboardEvent): void {
+        // Enter 发送（不包含Shift）
+        if (event.key === 'Enter' && !event.shiftKey && !this.isComposing) {
+            event.preventDefault();
+            this.submit();
+        }
+    }
+
+    /**
+     * 处理输入事件
+     */
+    onInput(event: Event): void {
+        const target = event.target as HTMLTextAreaElement;
+        this.inputValue = target.value;
+        this.inputSubject.next(this.inputValue);
+        this.autoResize();
+    }
+
+    /**
+     * 处理composition开始（输入法）
+     */
+    onCompositionStart(): void {
+        this.isComposing = true;
+    }
+
+    /**
+     * 处理composition结束（输入法）
+     */
+    onCompositionEnd(): void {
+        this.isComposing = false;
+        this.autoResize();
+    }
+
+    /**
+     * 提交消息
+     */
+    submit(): void {
+        const message = this.inputValue.trim();
+        if (message && !this.disabled) {
+            this.send.emit(message);
+            this.inputValue = '';
+            setTimeout(() => this.autoResize(), 0);
+            this.textInput?.nativeElement.focus();
+        }
+    }
+
+    /**
+     * 清空输入
+     */
+    clear(): void {
+        this.inputValue = '';
+        this.autoResize();
+        this.textInput?.nativeElement.focus();
+    }
+
+    /**
+     * 自动调整高度
+     */
+    private autoResize(): void {
+        if (this.textInput?.nativeElement) {
+            const textarea = this.textInput.nativeElement;
+            textarea.style.height = 'auto';
+            textarea.style.height = Math.min(textarea.scrollHeight, 120) + 'px';
+        }
+    }
+
+    /**
+     * 获取字符计数
+     */
+    getCharCount(): number {
+        return this.inputValue.length;
+    }
+
+    /**
+     * 获取字符限制
+     */
+    getCharLimit(): number {
+        return 4000; // 4K字符限制
+    }
+
+    /**
+     * 检查是否接近限制
+     */
+    isNearLimit(): boolean {
+        return this.getCharCount() > this.getCharLimit() * 0.8;
+    }
+
+    /**
+     * 检查是否超过限制
+     */
+    isOverLimit(): boolean {
+        return this.getCharCount() > this.getCharLimit();
+    }
+
+    /**
+     * 聚焦输入框
+     */
+    focus(): void {
+        this.textInput?.nativeElement.focus();
+    }
+}

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

@@ -0,0 +1,119 @@
+<div class="ai-chat-interface">
+    <!-- 头部 -->
+    <div class="ai-chat-header">
+        <div class="header-left">
+            <h2 class="ai-title">
+                <i class="icon-chat"></i>
+                AI助手
+            </h2>
+            <span class="provider-badge">
+                <i class="icon-provider"></i>
+                {{ currentProvider }}
+            </span>
+        </div>
+        <div class="header-actions">
+            <button class="btn-icon" (click)="switchProvider()" title="切换AI提供商">
+                <i class="icon-switch"></i>
+            </button>
+            <button class="btn-icon" (click)="exportChat()" title="导出聊天记录">
+                <i class="icon-export"></i>
+            </button>
+            <button class="btn-icon danger" (click)="clearChat()" title="清空聊天记录">
+                <i class="icon-clear"></i>
+            </button>
+        </div>
+    </div>
+
+    <!-- 消息列表 -->
+    <div class="ai-chat-container">
+        <div class="messages-wrapper">
+            <!-- 消息分组 -->
+            <ng-container *ngFor="let message of messages; let i = index">
+                <!-- 检查是否需要显示日期分隔线 -->
+                <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') }}
+                    </span>
+                </div>
+
+                <!-- 消息项 -->
+                <div class="message-item"
+                     [ngClass]="{
+                         'user-message': message.role === 'user',
+                         'assistant-message': message.role === 'assistant',
+                         'system-message': message.role === 'system'
+                     }">
+                    <!-- 头像 -->
+                    <div class="message-avatar">
+                        <div *ngIf="message.role === 'user'" class="avatar user">
+                            <i class="icon-user"></i>
+                        </div>
+                        <div *ngIf="message.role === 'assistant'" class="avatar assistant">
+                            <i class="icon-bot"></i>
+                        </div>
+                        <div *ngIf="message.role === 'system'" class="avatar system">
+                            <i class="icon-info"></i>
+                        </div>
+                    </div>
+
+                    <!-- 消息内容 -->
+                    <div class="message-content">
+                        <div class="message-bubble">
+                            <!-- 用户消息 -->
+                            <div *ngIf="message.role === 'user'" class="message-text">
+                                {{ message.content }}
+                            </div>
+
+                            <!-- AI消息 -->
+                            <div *ngIf="message.role === 'assistant'" class="message-text ai-response">
+                                <pre>{{ message.content }}</pre>
+                            </div>
+
+                            <!-- 系统消息 -->
+                            <div *ngIf="message.role === 'system'" class="message-text system">
+                                <i class="icon-warning"></i>
+                                {{ message.content }}
+                            </div>
+                        </div>
+
+                        <!-- 消息时间 -->
+                        <div class="message-time">
+                            {{ formatTimestamp(message.timestamp) }}
+                        </div>
+                    </div>
+                </div>
+            </ng-container>
+
+            <!-- 加载指示器 -->
+            <div *ngIf="isLoading" class="loading-indicator">
+                <div class="typing-indicator">
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                </div>
+                <span class="loading-text">AI正在思考...</span>
+            </div>
+        </div>
+    </div>
+
+    <!-- 输入区域 -->
+    <div class="ai-chat-input">
+        <app-chat-input
+            (send)="onSendMessage($event)"
+            [disabled]="isLoading">
+        </app-chat-input>
+    </div>
+
+    <!-- 提示信息 -->
+    <div class="chat-tips" *ngIf="messages.length === 1">
+        <div class="tip-item">
+            <i class="icon-lightbulb"></i>
+            <span>提示：您可以描述想执行的命令，例如"查看当前目录的所有文件"</span>
+        </div>
+        <div class="tip-item">
+            <i class="icon-keyboard"></i>
+            <span>快捷键：Ctrl+Shift+G 生成命令，Ctrl+Shift+E 解释命令</span>
+        </div>
+    </div>
+</div>