From 7b9287316d36ce5d94ff445fb6279dbc01c62851 Mon Sep 17 00:00:00 2001
From: Mike Sawka <mike.sawka@gmail.com>
Date: Wed, 17 Jan 2024 15:39:24 -0800
Subject: [PATCH] touchups to UI for AI chat feature (#237)

---
 src/app/common/common.less               |  4 +---
 src/app/workspace/cmdinput/aichat.tsx    | 16 ++++++++--------
 src/app/workspace/cmdinput/cmdinput.less | 12 ++++++++----
 src/app/workspace/cmdinput/cmdinput.tsx  | 20 +++++++++++++++++---
 src/model/model.ts                       |  3 +--
 waveshell/pkg/packet/packet.go           |  2 +-
 6 files changed, 36 insertions(+), 21 deletions(-)

diff --git a/src/app/common/common.less b/src/app/common/common.less
index 3a9f65dc..3ca716ae 100644
--- a/src/app/common/common.less
+++ b/src/app/common/common.less
@@ -407,9 +407,7 @@
     }
     
     pre.selected {
-        border-style: solid;
-        outline-width: 2px;
-        border-color: @term-green; 
+        outline: 2px solid @term-green;
     }
 
     .title.is-1 {
diff --git a/src/app/workspace/cmdinput/aichat.tsx b/src/app/workspace/cmdinput/aichat.tsx
index 008fe8eb..debba909 100644
--- a/src/app/workspace/cmdinput/aichat.tsx
+++ b/src/app/workspace/cmdinput/aichat.tsx
@@ -139,10 +139,10 @@ class AIChat extends React.Component<{}, {}> {
         let msgClassName = "chat-msg " + senderClassName;
         let innerHTML: React.JSX.Element = (
             <span>
-                <span style={{ display: "flex" }}>
-                    <i className="fa-sharp fa-solid fa-user" style={{ marginRight: "5px", marginTop: "1px" }}></i>
-                    <p style={{ marginRight: "5px" }}>You</p>
-                </span>
+                <div style={{ display: "flex", marginBottom: 2 }}>
+                    <i className="fa-sharp fa-solid fa-user" style={{ marginRight: "7px", marginTop: "2px" }}></i>
+                    <div style={{ marginRight: "5px" }}>You</div>
+                </div>
                 <p className="msg-text">{chatItem.userquery}</p>
             </span>
         );
@@ -152,13 +152,13 @@ class AIChat extends React.Component<{}, {}> {
             } else {
                 innerHTML = (
                     <span>
-                        <span style={{ display: "flex" }}>
+                        <div style={{ display: "flex", marginBottom: 2 }}>
                             <i
                                 className="fa-sharp fa-solid fa-headset"
-                                style={{ marginRight: "5px", marginTop: "1px" }}
+                                style={{ marginRight: "7px", marginTop: "3px" }}
                             ></i>
-                            <p style={{ marginRight: "5px" }}>ChatGPT</p>
-                        </span>
+                            <div style={{ marginRight: "5px" }}>ChatGPT</div>
+                        </div>
                         <Markdown text={chatItem.assistantresponse.message} codeSelect />
                     </span>
                 );
diff --git a/src/app/workspace/cmdinput/cmdinput.less b/src/app/workspace/cmdinput/cmdinput.less
index 07134cb6..4d02cd17 100644
--- a/src/app/workspace/cmdinput/cmdinput.less
+++ b/src/app/workspace/cmdinput/cmdinput.less
@@ -190,12 +190,16 @@
                 display: inline-block;
                 margin-right: 0;
                 padding: 0.2em 0.7rem;
-                opacity: 0.5;
-                cursor: pointer;
                 border-radius: 4px;
                 vertical-align: super;
-                &:hover {
-                    opacity: 1;
+
+                .hint-elem {
+                    cursor: pointer;
+                    opacity: 0.5;
+
+                    &:hover {
+                        opacity: 1.0;
+                    }
                 }
             }
         }
diff --git a/src/app/workspace/cmdinput/cmdinput.tsx b/src/app/workspace/cmdinput/cmdinput.tsx
index f6b0693b..6625b9df 100644
--- a/src/app/workspace/cmdinput/cmdinput.tsx
+++ b/src/app/workspace/cmdinput/cmdinput.tsx
@@ -74,6 +74,14 @@ class CmdInput extends React.Component<{}, {}> {
         GlobalModel.inputModel.giveFocus();
     }
 
+    @boundMethod
+    clickAIHint(e: any): void {
+        e.preventDefault();
+        e.stopPropagation();
+        let inputModel = GlobalModel.inputModel;
+        inputModel.openAIAssistantChat();
+    }
+
     @boundMethod
     clickHistoryHint(e: any): void {
         e.preventDefault();
@@ -218,12 +226,18 @@ class CmdInput extends React.Component<{}, {}> {
                             </div>**/}
                         {!focusVal && (
                             <div onClick={this.clickFocusInputHint} className="cmd-btn hoverEffect">
-                                focus input ({renderCmdText("I")})
+                                <div className="hint-elem">focus input ({renderCmdText("I")})</div>
                             </div>
                         )}
                         {focusVal && (
-                            <div onMouseDown={this.clickHistoryHint} className="cmd-btn hoverEffect">
-                                {historyShow ? "close (esc)" : "history (ctrl-r)"}
+                            <div className="cmd-btn hoverEffect">
+                                <If condition={historyShow}>
+                                    <div className="hint-elem" onMouseDown={this.clickHistoryHint}>close (esc)</div>
+                                </If>
+                                <If condition={!historyShow}>
+                                    <div className="hint-elem" onMouseDown={this.clickHistoryHint}>history (ctrl-r)</div>
+                                    <div className="hint-elem" onMouseDown={this.clickAIHint}>AI (ctrl-space)</div>
+                                </If>
                             </div>
                         )}
                         <ExecIcon
diff --git a/src/model/model.ts b/src/model/model.ts
index 7d937114..6e2bd407 100644
--- a/src/model/model.ts
+++ b/src/model/model.ts
@@ -1738,8 +1738,7 @@ class InputModel {
             let curBlockRef = this.codeSelectBlockRefArray[this.codeSelectSelectedIndex.get()];
             let codeText = curBlockRef.current.innerText;
             codeText = codeText.replace(/\n$/, ""); // remove trailing newline
-            let newLineValue = this.getCurLine() + " " + codeText;
-            this.setCurLine(newLineValue);
+            this.setCurLine(codeText);
             this.giveFocus();
         }
     }
diff --git a/waveshell/pkg/packet/packet.go b/waveshell/pkg/packet/packet.go
index 3c439c8e..a19d4f85 100644
--- a/waveshell/pkg/packet/packet.go
+++ b/waveshell/pkg/packet/packet.go
@@ -78,7 +78,7 @@ const PacketEOFStr = "EOF"
 
 var TypeStrToFactory map[string]reflect.Type
 
-const OpenAICmdInfoChatGreetingMessage = "Hello, may I help you with this command? \n(Press ESC to close and Ctrl+L to clear chat buffer)"
+const OpenAICmdInfoChatGreetingMessage = "Hello, may I help you with this command?  \n(Ctrl-Space: open, ESC: close, Ctrl+L: clear chat buffer, Up/Down: select code blocks, Enter: to copy a selected code block to the command input)"
 
 func init() {
 	TypeStrToFactory = make(map[string]reflect.Type)