touchups to UI for AI chat feature (#237)

This commit is contained in:
Mike Sawka 2024-01-17 15:39:24 -08:00 committed by GitHub
parent 781ed2e57e
commit 7b9287316d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 36 additions and 21 deletions

View File

@ -407,9 +407,7 @@
}
pre.selected {
border-style: solid;
outline-width: 2px;
border-color: @term-green;
outline: 2px solid @term-green;
}
.title.is-1 {

View File

@ -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>
);

View File

@ -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;
.hint-elem {
cursor: pointer;
opacity: 0.5;
&:hover {
opacity: 1;
opacity: 1.0;
}
}
}
}

View File

@ -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

View File

@ -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();
}
}

View File

@ -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)