Upstream/waveterm
1
0
Fork 0
mirror of https://github.com/wavetermdev/waveterm.git synced 2025-01-02 18:39:05 +01:00
Code Issues Packages Projects Releases Wiki Activity

touchups to UI for AI chat feature (#237)

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/common/common.less
View File

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

16
src/app/workspace/cmdinput/aichat.tsx
View File

@ -139,10 +139,10 @@ class AIChat extends React.Component<{}, {}> {
let msgClassName = "chat-msg " + senderClassName; let msgClassName = "chat-msg " + senderClassName;
let innerHTML: React.JSX.Element = ( let innerHTML: React.JSX.Element = (
<span> <span>
<span style={{ display: "flex" }}> <div style={{ display: "flex", marginBottom: 2 }}>
<i className="fa-sharp fa-solid fa-user" style={{ marginRight: "5px", marginTop: "1px" }}></i> <i className="fa-sharp fa-solid fa-user" style={{ marginRight: "7px", marginTop: "2px" }}></i>
<p style={{ marginRight: "5px" }}>You</p> <div style={{ marginRight: "5px" }}>You</div>
</span> </div>
<p className="msg-text">{chatItem.userquery}</p> <p className="msg-text">{chatItem.userquery}</p>
</span> </span>
); );
@ -152,13 +152,13 @@ class AIChat extends React.Component<{}, {}> {
} else { } else {
innerHTML = ( innerHTML = (
<span> <span>
<span style={{ display: "flex" }}> <div style={{ display: "flex", marginBottom: 2 }}>
<i <i
className="fa-sharp fa-solid fa-headset" className="fa-sharp fa-solid fa-headset"
style={{ marginRight: "5px", marginTop: "1px" }} style={{ marginRight: "7px", marginTop: "3px" }}
></i> ></i>
<p style={{ marginRight: "5px" }}>ChatGPT</p> <div style={{ marginRight: "5px" }}>ChatGPT</div>
</span> </div>
<Markdown text={chatItem.assistantresponse.message} codeSelect /> <Markdown text={chatItem.assistantresponse.message} codeSelect />
</span> </span>
); );

12
src/app/workspace/cmdinput/cmdinput.less
View File

@ -190,12 +190,16 @@
display: inline-block; display: inline-block;
margin-right: 0; margin-right: 0;
padding: 0.2em 0.7rem; padding: 0.2em 0.7rem;
opacity: 0.5;
cursor: pointer;
border-radius: 4px; border-radius: 4px;
vertical-align: super; vertical-align: super;
&:hover {
opacity: 1; .hint-elem {
cursor: pointer;
opacity: 0.5;
&:hover {
opacity: 1.0;
}
} }
} }
} }

20
src/app/workspace/cmdinput/cmdinput.tsx
View File

@ -74,6 +74,14 @@ class CmdInput extends React.Component<{}, {}> {
GlobalModel.inputModel.giveFocus(); GlobalModel.inputModel.giveFocus();
} }
@boundMethod
clickAIHint(e: any): void {
e.preventDefault();
e.stopPropagation();
let inputModel = GlobalModel.inputModel;
inputModel.openAIAssistantChat();
}
@boundMethod @boundMethod
clickHistoryHint(e: any): void { clickHistoryHint(e: any): void {
e.preventDefault(); e.preventDefault();
@ -218,12 +226,18 @@ class CmdInput extends React.Component<{}, {}> {
</div>**/} </div>**/}
{!focusVal && ( {!focusVal && (
<div onClick={this.clickFocusInputHint} className="cmd-btn hoverEffect"> <div onClick={this.clickFocusInputHint} className="cmd-btn hoverEffect">
focus input ({renderCmdText("I")}) <div className="hint-elem">focus input ({renderCmdText("I")})</div>
</div> </div>
)} )}
{focusVal && ( {focusVal && (
<div onMouseDown={this.clickHistoryHint} className="cmd-btn hoverEffect"> <div className="cmd-btn hoverEffect">
{historyShow ? "close (esc)" : "history (ctrl-r)"} <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> </div>
)} )}
<ExecIcon <ExecIcon

3
src/model/model.ts
View File

@ -1738,8 +1738,7 @@ class InputModel {
let curBlockRef = this.codeSelectBlockRefArray[this.codeSelectSelectedIndex.get()]; let curBlockRef = this.codeSelectBlockRefArray[this.codeSelectSelectedIndex.get()];
let codeText = curBlockRef.current.innerText; let codeText = curBlockRef.current.innerText;
codeText = codeText.replace(/\n$/, ""); // remove trailing newline codeText = codeText.replace(/\n$/, ""); // remove trailing newline
let newLineValue = this.getCurLine() + " " + codeText; this.setCurLine(codeText);
this.setCurLine(newLineValue);
this.giveFocus(); this.giveFocus();
} }
} }

2
waveshell/pkg/packet/packet.go
View File

@ -78,7 +78,7 @@ const PacketEOFStr = "EOF"
var TypeStrToFactory map[string]reflect.Type 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() { func init() {
TypeStrToFactory = make(map[string]reflect.Type) TypeStrToFactory = make(map[string]reflect.Type)