tabby-ai-assistant 1.0.5 → 1.0.6

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

@@ -1,17 +1,9 @@
 <div class="chat-input-container">
     <!-- 输入区域 -->
     <div class="input-wrapper">
-        <textarea
-            #textInput
-            class="chat-textarea"
-            [value]="inputValue"
-            [placeholder]="placeholder"
-            [disabled]="disabled"
-            (keydown)="onKeydown($event)"
-            (input)="onInput($event)"
-            (compositionstart)="onCompositionStart()"
-            (compositionend)="onCompositionEnd()"
-            rows="1">
+        <textarea #textInput class="chat-textarea" [(ngModel)]="inputValue" [placeholder]="placeholder"
+            [disabled]="disabled" (keydown)="onKeydown($event)" (input)="onInput($event)"
+            (compositionstart)="onCompositionStart()" (compositionend)="onCompositionEnd()" rows="1">
         </textarea>
 
         <!-- 字符计数 -->
@@ -26,21 +18,14 @@
     <!-- 操作按钮 -->
     <div class="input-actions">
         <!-- 清空按钮 -->
-        <button
-            *ngIf="inputValue && !disabled"
-            class="btn-icon"
-            (click)="clear()"
-            title="清空">
-            <i class="icon-clear"></i>
+        <button *ngIf="inputValue && !disabled" class="btn-icon" (click)="clear()" title="清空">
+            <i class="fa fa-times"></i>
         </button>
 
         <!-- 发送按钮 -->
-        <button
-            class="btn-send"
-            [disabled]="!inputValue.trim() || disabled || isOverLimit()"
-            (click)="submit()"
+        <button class="btn-send" [disabled]="!inputValue.trim() || disabled || isOverLimit()" (click)="submit()"
             title="发送 (Enter)">
-            <i class="icon-send"></i>
+            <i class="fa fa-paper-plane"></i>
             <span class="btn-text">发送</span>
         </button>
     </div>
@@ -54,8 +39,8 @@
             <kbd>Shift + Enter</kbd> 换行
         </span>
         <span class="hint-item" *ngIf="isNearLimit()">
-            <i class="icon-warning"></i>
+            <i class="fa fa-exclamation-triangle"></i>
             接近字符限制
         </span>
     </div>
-</div>
+</div>

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

@@ -110,7 +110,7 @@
         gap: 0.5rem;
 
         &:hover:not(:disabled) {
-            background-color: darken(#007bff, 7.5%);
+            background-color: #0069d9;
             transform: translateY(-1px);
         }
 
@@ -169,6 +169,7 @@
     .input-actions {
         .btn-send {
             min-width: 80px;
+
             .btn-text {
                 display: none;
             }
@@ -180,4 +181,4 @@
             font-size: 0.7rem;
         }
     }
-}
+}

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

@@ -3,117 +3,125 @@
     <div class="ai-chat-header">
         <div class="header-left">
             <h2 class="ai-title">
-                <i class="icon-chat"></i>
+                <i class="fa fa-comments"></i>
                 AI助手
             </h2>
             <span class="provider-badge">
-                <i class="icon-provider"></i>
+                <i class="fa fa-cloud"></i>
                 {{ currentProvider }}
             </span>
         </div>
         <div class="header-actions">
             <button class="btn-icon" (click)="switchProvider()" title="切换AI提供商">
-                <i class="icon-switch"></i>
+                <i class="fa fa-exchange"></i>
             </button>
             <button class="btn-icon" (click)="exportChat()" title="导出聊天记录">
-                <i class="icon-export"></i>
+                <i class="fa fa-download"></i>
             </button>
             <button class="btn-icon danger" (click)="clearChat()" title="清空聊天记录">
-                <i class="icon-clear"></i>
+                <i class="fa fa-trash"></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 class="chat-content-wrapper">
+        <!-- 消息列表 -->
+        <div class="ai-chat-container" #chatContainer (scroll)="onScroll($event)">
+            <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-content">
-                        <div class="message-bubble">
-                            <!-- 用户消息 -->
-                            <div *ngIf="message.role === 'user'" class="message-text">
-                                {{ message.content }}
+                    <!-- 消息项 -->
+                    <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="fa fa-user"></i>
                             </div>
-
-                            <!-- AI消息 -->
-                            <div *ngIf="message.role === 'assistant'" class="message-text ai-response">
-                                <pre>{{ message.content }}</pre>
+                            <div *ngIf="message.role === 'assistant'" class="avatar assistant">
+                                <i class="fa fa-robot"></i>
                             </div>
-
-                            <!-- 系统消息 -->
-                            <div *ngIf="message.role === 'system'" class="message-text system">
-                                <i class="icon-warning"></i>
-                                {{ message.content }}
+                            <div *ngIf="message.role === 'system'" class="avatar system">
+                                <i class="fa fa-info-circle"></i>
                             </div>
                         </div>
 
-                        <!-- 消息时间 -->
-                        <div class="message-time">
-                            {{ formatTimestamp(message.timestamp) }}
+                        <!-- 消息内容 -->
+                        <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="fa fa-exclamation-triangle"></i>
+                                    {{ message.content }}
+                                </div>
+                            </div>
+
+                            <!-- 消息时间 -->
+                            <div class="message-time">
+                                {{ formatTimestamp(message.timestamp) }}
+                            </div>
                         </div>
                     </div>
-                </div>
-            </ng-container>
+                </ng-container>
 
-            <!-- 加载指示器 -->
-            <div *ngIf="isLoading" class="loading-indicator">
-                <div class="typing-indicator">
-                    <span></span>
-                    <span></span>
-                    <span></span>
+                <!-- 加载指示器 -->
+                <div *ngIf="isLoading" class="loading-indicator">
+                    <div class="typing-indicator">
+                        <span></span>
+                        <span></span>
+                        <span></span>
+                    </div>
+                    <span class="loading-text">AI正在思考...</span>
                 </div>
-                <span class="loading-text">AI正在思考...</span>
             </div>
         </div>
+
+        <!-- 滚动按钮 (在容器外部以便固定定位) -->
+        <button *ngIf="showScrollTop" class="scroll-btn scroll-top" (click)="scrollToTop()" title="滚动到顶部">
+            <i class="fa fa-chevron-up"></i>
+        </button>
+        <button *ngIf="showScrollBottom" class="scroll-btn scroll-bottom" (click)="scrollToBottom()" title="滚动到底部">
+            <i class="fa fa-chevron-down"></i>
+        </button>
     </div>
 
     <!-- 输入区域 -->
     <div class="ai-chat-input">
-        <app-chat-input
-            (send)="onSendMessage($event)"
-            [disabled]="isLoading">
+        <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>
+            <i class="fa fa-lightbulb-o"></i>
             <span>提示：您可以描述想执行的命令，例如"查看当前目录的所有文件"</span>
         </div>
         <div class="tip-item">
-            <i class="icon-keyboard"></i>
+            <i class="fa fa-keyboard-o"></i>
             <span>快捷键：Ctrl+Shift+G 生成命令，Ctrl+Shift+E 解释命令</span>
         </div>
     </div>
-</div>
+</div>

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

@@ -84,6 +84,15 @@
     }
 }
 
+/* 内容包装器 (用于滚动按钮定位) */
+.chat-content-wrapper {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    overflow: hidden;
+}
+
 /* 消息容器 */
 .ai-chat-container {
     flex: 1;
@@ -122,6 +131,43 @@
     }
 }
 
+/* 滚动按钮 */
+.scroll-btn {
+    position: absolute;
+    z-index: 100;
+    width: 36px;
+    height: 36px;
+    border: none;
+    border-radius: 50%;
+    background-color: var(--ai-primary);
+    color: white;
+    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 ease;
+    opacity: 0.9;
+    right: 15px;
+
+    &:hover {
+        opacity: 1;
+        transform: scale(1.1);
+    }
+
+    &.scroll-top {
+        top: 10px;
+    }
+
+    &.scroll-bottom {
+        bottom: 10px;
+    }
+
+    i {
+        font-size: 0.875rem;
+    }
+}
+
 /* 消息项 */
 .message-item {
     display: flex;
@@ -258,8 +304,8 @@
         gap: 0.25rem;
 
         span {
-            width: 6: 6pxpx;
-            height;
+            width: 6px;
+            height: 6px;
             border-radius: 50%;
             background-color: var(--ai-secondary);
             animation: typing 1.4s infinite ease-in-out;
@@ -281,10 +327,14 @@
 }
 
 @keyframes typing {
-    0%, 80%, 100% {
+
+    0%,
+    80%,
+    100% {
         transform: scale(0.8);
         opacity: 0.5;
     }
+
     40% {
         transform: scale(1);
         opacity: 1;
@@ -351,4 +401,4 @@
             font-size: 0.8rem;
         }
     }
-}
+}