remove logger & improve ui

eclipsesource · Nov 29, 2024 · 44221b7 · 44221b7
1 parent 3db5078
commit 44221b7
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 17 deletions.
diff --git a/packages/ai-chat-ui/src/browser/chat-input-widget.tsx b/packages/ai-chat-ui/src/browser/chat-input-widget.tsx
@@ -252,13 +252,13 @@ const ChatInput: React.FunctionComponent<ChatInputProperties> = (props: ChatInpu
     }
 
     return <div className='theia-ChatInput'>
-        {props.pinnedAgent !== undefined &&
-            <div style={{ display: "flex", flexDirection: "row", justifyContent: "space-between" }}>
-                <p>{props.pinnedAgent.name}</p>
-                <span className="codicon codicon-remove-close option" title="unpin" onClick={handleUnpin} />
-            </div>
-        }
         <div className='theia-ChatInput-Editor-Box'>
+            {props.pinnedAgent !== undefined &&
+                <div className='theia-ChatInput-Popup'>
+                    <span>@{props.pinnedAgent.name}</span>
+                    <span className="codicon codicon-remove-close option" title="unpin" onClick={handleUnpin} />
+                </div>
+            }
             <div className='theia-ChatInput-Editor' ref={editorContainerRef} onKeyDown={onKeyDown} onFocus={handleInputFocus} onBlur={handleInputBlur}>
                 <div ref={placeholderRef} className='theia-ChatInput-Editor-Placeholder'>Ask a question</div>
             </div>

diff --git a/packages/ai-chat-ui/src/browser/chat-view-widget.tsx b/packages/ai-chat-ui/src/browser/chat-view-widget.tsx
@@ -22,8 +22,6 @@ import { AIChatInputWidget } from './chat-input-widget';
 import { ChatViewTreeWidget } from './chat-tree-view/chat-view-tree-widget';
 import { AIActivationService } from '@theia/ai-core/lib/browser/ai-activation-service';
 
-import { ILogger } from '@theia/core';
-
 export namespace ChatViewWidget {
     export interface State {
         locked?: boolean;
@@ -51,9 +49,6 @@ export class ChatViewWidget extends BaseWidget implements ExtractableWidget, Sta
     @inject(AIActivationService)
     protected readonly activationService: AIActivationService;
 
-    @inject(ILogger)
-    protected readonly logger: ILogger;
-
     protected chatSession: ChatSession;
 
     protected _state: ChatViewWidget.State = { locked: false };
@@ -120,9 +115,6 @@ export class ChatViewWidget extends BaseWidget implements ExtractableWidget, Sta
                 const session = event.sessionId ? this.chatService.getSession(event.sessionId) : this.chatService.createSession();
 
                 if (session) {
-
-                    this.logger.info("session:", session)
-
                     this.chatSession = session;
                     this.treeWidget.trackChatModel(this.chatSession.model);
                     this.inputWidget.chatModel = this.chatSession.model;
@@ -185,7 +177,6 @@ export class ChatViewWidget extends BaseWidget implements ExtractableWidget, Sta
     }
 
     protected onUnpin(): void {
-        this.logger.info("unpin")
         this.chatSession.pinnedAgent = undefined;
         this.inputWidget.pinnedAgent = this.chatSession.pinnedAgent;
     }

diff --git a/packages/ai-chat-ui/src/browser/style/index.css b/packages/ai-chat-ui/src/browser/style/index.css
@@ -159,11 +159,29 @@ div:last-child>.theia-ChatNode {
   overflow: hidden;
 }
 
+.theia-ChatInput-Popup {
+  position: relative;
+  bottom: -5px;
+  right: -2px;
+  padding-top: 7px;
+  padding-left: 10px;
+  padding-right: 10px;
+  padding-bottom: 9px;
+  display: flex;
+  flex-direction: row;
+  align-items: start;
+  align-self: flex-end;
+  gap: 10px;
+  border: var(--theia-border-width) solid var(--theia-dropdown-border);
+  border-radius: 4px;
+}
+
 .theia-ChatInput-Editor {
   width: 100%;
   height: auto;
   border: var(--theia-border-width) solid var(--theia-dropdown-border);
   border-radius: 4px;
+  position: relative;
   display: flex;
   flex-direction: column-reverse;
   overflow: hidden;
@@ -184,8 +202,8 @@ div:last-child>.theia-ChatNode {
 
 .theia-ChatInput-Editor-Placeholder {
   position: absolute;
-  top: -3px;
-  left: 19px;
+  top: 0;
+  left: 8px;
   right: 0;
   bottom: 0;
   display: flex;