From 44221b74a49cafff3e71e08f3469fcd006b0bf3a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Atahan=20K=C4=B1l=C4=B1=C3=A7?= <atahan.kilic@hotmail.com>
Date: Fri, 29 Nov 2024 13:25:23 +0100
Subject: [PATCH] remove logger & improve ui

---
 .../src/browser/chat-input-widget.tsx         | 12 +++++-----
 .../src/browser/chat-view-widget.tsx          |  9 --------
 .../ai-chat-ui/src/browser/style/index.css    | 22 +++++++++++++++++--
 3 files changed, 26 insertions(+), 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
index 5fb44439f54eb..1ea74f5d31856 100644
--- 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
index 616733b9d7f05..015506d705be3 100644
--- 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
index 624a64b9b911b..5799e1cc9b8cc 100644
--- 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;