Upstream/waveterm
1
0
Fork 0
mirror of https://github.com/wavetermdev/waveterm.git synced 2024-12-21 16:38:23 +01:00
Code Issues Packages Projects Releases Wiki Activity

Clean up styling and focus behavior for cmdinput (#546)

Browse Source 
* Clean up cmdinput

* Remove unused css styles, clicking on textarea will focus back to textarea without closing history

* cleanup logic for activating textarea

* actions buttons should always show, should properly disable inactive views

* clicking actions toggles the view

* remove titlebar spacer, clean up padding

* Make AIChat and HistoryInfo share a common layout

* fix ai chat scroll

* clean up formatting

* fix chat textarea resizing

* align prompt and input

* update infomsg to use auxview

* update comments

* fix widths and key error

* add todo

* adjust padding for input, remove debug

* Don't capture clicks on the prompt area
This commit is contained in:
Evan Simkowitz 2024-04-04 19:29:43 -07:00 committed by GitHub
parent 0fe767cdf3
commit 1c23701181
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
17 changed files with 724 additions and 795 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
public/themes/default.css
View File

@ -42,16 +42,19 @@
--app-bg-color: black;
--app-accent-color: rgb(88, 193, 66);
--app-accent-bg-color: rgba(88, 193, 66, 0.25);
--app-accent-bg-darker-color: rgba(88, 193, 66, 0.5);
--app-text-color: rgb(211, 215, 207);
--app-text-primary-color: rgb(255, 255, 255);
--app-text-secondary-color: rgb(195, 200, 194);
--app-text-disabled-color: rgb(173, 173, 173);
--app-text-bg-color: rgb(23, 23, 23);
--app-text-bg-disabled-color: rgb(51, 51, 51);
--app-border-color: rgb(51, 51, 51);
--app-maincontent-bg-color: #333;
--app-maincontent-bg-color: rgb(51, 51, 51);
--app-panel-bg-color: rgba(21, 23, 21, 1);
--app-panel-bg-color-dev: rgb(21, 23, 48);
--app-icon-color: rgb(139, 145, 138);
--app-icon-hover-color: #fff;
--app-icon-hover-color: rgb(255, 255, 255);
--app-selected-mask-color: rgba(255, 255, 255, 0.06);
/* global status colors */
@ -122,18 +125,18 @@
/* line colors */
--line-sidebar-message-color: rgb(196, 160, 0);
--line-background: rgba(21, 23, 21, 1);
--line-avatar-color: #eceeec;
--line-background: var(--app-panel-bg-color);
--line-avatar-color: rgb(236, 238, 236);
--line-text-color: rgb(211, 215, 207);
--line-svg-fill-color: rgb(150, 152, 150);
--line-svg-hover-fill-color: #eceeec;
--line-svg-hover-fill-color: rgb(236, 238, 236);
--line-separator-color: rgb(126, 126, 126);
--line-error-color: var(--app-error-color);
--line-warning-color: var(--app-warning-color);
--line-base-soft-blue-color: #729fcf;
--line-base-soft-blue-color: rgb(114, 159, 207);
--line-active-border-color: var(--app-accent-color);
--line-selected-bg-color: rgba(255, 255, 255, 0.05);
--line-selected-border-left-color: #777777;
--line-selected-border-left-color: rgb(119, 119, 119);
--line-selected-error-border-color: rgba(204, 0, 0, 0.8);
--line-selected-error-bg-color: rgb(19, 4, 3);
--line-error-bg-color: rgba(200, 0, 0, 0.1);
@ -152,22 +155,21 @@
/* table colors */
--table-border-color: rgba(241, 246, 243, 0.15);
--table-thead-border-top-color: rgba(250, 250, 250, 0.1);
--table-thead-bright-border-color: #ccc;
--table-thead-bright-border-color: rgb(204, 204, 204);
--table-thead-bg-color: rgba(250, 250, 250, 0.02);
--table-tr-border-bottom-color: rgba(241, 246, 243, 0.15);
--table-tr-hover-bg-color: rgba(255, 255, 255, 0.06);
--table-tr-selected-bg-color: #222;
--table-tr-selected-hover-bg-color: #333;
--table-tr-selected-bg-color: rgb(34, 34, 34);
--table-tr-selected-hover-bg-color: var(--app-maincontent-bg-color);
/* cmdinput colors */
--cmdinput-textarea-bg-color: #171717;
--cmdinput-bg-color: var(--app-text-bg-color);
--cmdinput-text-error-color: var(--term-red);
--cmdinput-history-item-error-color: var(--term-bright-red);
--cmdinput-history-item-selected-error-color: var(--term-bright-red);
--cmdinput-button-bg-color: rgb(88, 193, 66);
--cmdinput-comment-button-bg-color: rgb(57, 113, 255);
--cmdinput-disabled-icon-color: rgb(76, 81, 75, 1);
--cmdinput-history-bg-color: rgb(21, 23, 21, 1);
--cmdinput-button-bg-color: var(--tab-green);
--cmdinput-disabled-bg-color: var(--app-text-bg-disabled-color);
--cmdinput-history-bg-color: var(--app-bg-color);
/* screen view color */
--screen-view-text-caption-color: rgb(139, 145, 138);

32
public/themes/light.css
View File

@ -5,20 +5,20 @@
@import url("./term-light.css");
:root {
--app-bg-color: #fefefe;
--app-bg-color: rgb(254, 254, 254);
--app-accent-color: rgb(75, 166, 57);
--app-accent-bg-color: rgba(75, 166, 57, 0.2);
--app-text-color: #000;
--app-text-color: rgb(0, 0, 0);
--app-text-primary-color: rgb(0, 0, 0, 0.9);
--app-text-secondary-color: rgb(0, 0, 0, 0.7);
--app-border-color: rgb(139 145 138);
--app-panel-bg-color: #e0e0e0;
--app-panel-bg-color-dev: #e0e0e0;
--app-icon-color: rgb(80, 80, 80);
--app-icon-hover-color: rgb(100, 100, 100);
--app-panel-bg-color: rgb(224, 224, 224);
--app-panel-bg-color-dev: rgb(224, 224, 224);
--app-icon-color: rgb(110, 110, 110);
--app-icon-hover-color: rgb(80, 80, 80);
--app-selected-mask-color: rgba(0, 0, 0, 0.06);
--input-bg-color: #eeeeee;
--input-bg-color: rgb(238, 238, 238);
/* tab color */
--tab-white: rgb(0, 0, 0, 0.6);
@ -30,8 +30,8 @@
--table-thead-bg-color: rgba(250, 250, 250, 0.15);
--table-tr-border-bottom-color: rgba(0, 0, 0, 0.15);
--table-tr-hover-bg-color: rgba(0, 0, 0, 0.15);
--table-tr-selected-bg-color: #dddddd;
--table-tr-selected-hover-bg-color: #cccccc;
--table-tr-selected-bg-color: rgb(221, 221, 221);
--table-tr-selected-hover-bg-color: rgb(204, 204, 204);
/* form colors */
--form-element-border-color: rgba(0, 0, 0, 0.3);
@ -41,8 +41,8 @@
--form-element-label-color: rgba(0, 0, 0, 0.6);
--form-element-secondary-color: rgba(0, 0, 0, 0.09);
--form-element-icon-color: rgb(0, 0, 0, 0.6);
--form-element-disabled-text-color: #b7b7b7;
--form-element-placeholder-color: #b7b7b7;
--form-element-disabled-text-color: rgb(183, 183, 183);
--form-element-placeholder-color: rgb(183, 183, 183);
--markdown-bg-color: rgb(0, 0, 0, 0.1);
@ -50,8 +50,6 @@
--modal-header-bottom-border-color: rgba(0, 0, 0, 0.3);
/* cmd input */
--cmdinput-textarea-bg-color: rgba(0, 0, 0, 0.1);
--cmdinput-textarea-border-color: var(--form-element-border-color);
/* scroll colors */
--scrollbar-background-color: var(--app-bg-color);
@ -64,15 +62,15 @@
--line-actions-inactive-color: rgba(0, 0, 0, 0.3);
--line-actions-active-color: rgba(0, 0, 0, 1);
--logo-button-hover-bg-color: #f0f0f0;
--logo-button-hover-bg-color: rgb(240, 240, 240);
--xterm-viewport-border-color: rgba(0, 0, 0, 0.3);
--datepicker-cell-hover-bg-color: #f0f0f0;
--datepicker-cell-hover-bg-color: rgb(240, 240, 240);
--datepicker-cell-other-text-color: rgba(0, 0, 0, 0.3);
--datepicker-header-fade-color: rgba(0, 0, 0, 0.4);
--datepicker-year-header-bg-color: #f5f5f5;
--datepicker-year-header-border-color: #dcdcdc;
--datepicker-year-header-bg-color: rgb(245, 245, 245);
--datepicker-year-header-border-color: rgb(220, 220, 220);
/* toggle colors */
--toggle-thumb-color: var(--app-bg-color);

5
src/app/line/line.less
View File

@ -106,11 +106,6 @@
}
}
&.top-border {
border-top: 1px solid #777;
padding: 10px;
}
&:hover .meta .termopts {
display: block;
}

2
src/app/sidebar/main.tsx
View File

@ -242,7 +242,7 @@ class MainSideBar extends React.Component<MainSideBarProps, {}> {
}
render() {
let mainView = GlobalModel.activeMainView.get();
const mainView = GlobalModel.activeMainView.get();
const historyActive = mainView == "history";
const connectionsActive = mainView == "connections";
const settingsActive = mainView == "clientsettings";

70
src/app/workspace/cmdinput/aichat.less Normal file
View File

@ -0,0 +1,70 @@
.cmd-aichat {
padding-bottom: 0 !important;
.auxview-content {
flex-flow: column nowrap;
height: 100%;
.chat-window {
overflow-y: auto;
margin-bottom: 5px;
flex: 1 1 auto;
flex-direction: column-reverse;
}
.chat-input {
padding: 0.5em 0.5em 0.5em 0.5em;
flex: 1 0 auto;
.chat-textarea {
color: var(--app-text-primary-color);
background-color: var(--cmdinput-textarea-bg);
resize: none;
width: 100%;
border: transparent;
outline: none;
overflow: auto;
overflow-wrap: anywhere;
font-family: var(--termfontfamily);
font-weight: normal;
line-height: var(--termlineheight);
}
}
.chat-msg {
margin-top: calc(var(--termpad) * 2);
margin-bottom: calc(var(--termpad) * 2);
.chat-msg-header {
display: flex;
margin-bottom: 2px;
i {
margin-right: 0.5em;
}
.chat-username {
font-weight: bold;
margin-right: 5px;
}
}
}
.chat-msg-assistant {
color: var(--app-text-color);
}
.chat-msg-user {
.msg-text {
font-family: var(--markdown-font);
font-size: 14px;
white-space: pre-wrap;
}
}
.chat-msg-error {
color: var(--cmdinput-text-error);
font-family: var(--markdown-font);
font-size: 14px;
}
}
}

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

@ -5,18 +5,18 @@ import * as React from "react";
import * as mobxReact from "mobx-react";
import * as mobx from "mobx";
import { GlobalModel } from "@/models";
import { isBlank } from "@/util/util";
import { boundMethod } from "autobind-decorator";
import cn from "classnames";
import { If, For } from "tsx-control-statements/components";
import { Markdown } from "@/elements";
import { checkKeyPressed, adaptFromReactOrNativeKeyEvent } from "@/util/keyutil";
import { AuxiliaryCmdView } from "./auxview";
import "./aichat.less";
class AIChatKeybindings extends React.Component<{ AIChatObject: AIChat }, {}> {
componentDidMount(): void {
let AIChatObject = this.props.AIChatObject;
let keybindManager = GlobalModel.keybindManager;
let inputModel = GlobalModel.inputModel;
const AIChatObject = this.props.AIChatObject;
const keybindManager = GlobalModel.keybindManager;
const inputModel = GlobalModel.inputModel;
keybindManager.registerKeybinding("pane", "aichat", "generic:confirm", (waveEvent) => {
AIChatObject.onEnterKeyPressed();
@ -54,10 +54,10 @@ class AIChatKeybindings extends React.Component<{ AIChatObject: AIChat }, {}> {
@mobxReact.observer
class AIChat extends React.Component<{}, {}> {
chatListKeyCount: number = 0;
textAreaNumLines: mobx.IObservableValue<number> = mobx.observable.box(1, { name: "textAreaNumLines" });
chatWindowScrollRef: React.RefObject<HTMLDivElement>;
textAreaRef: React.RefObject<HTMLTextAreaElement>;
isFocused: OV<boolean>;
termFontSize: number = 14;
constructor(props: any) {
super(props);
@ -69,8 +69,7 @@ class AIChat extends React.Component<{}, {}> {
}
componentDidMount() {
let model = GlobalModel;
let inputModel = model.inputModel;
const inputModel = GlobalModel.inputModel;
if (this.chatWindowScrollRef != null && this.chatWindowScrollRef.current != null) {
this.chatWindowScrollRef.current.scrollTop = this.chatWindowScrollRef.current.scrollHeight;
}
@ -79,6 +78,7 @@ class AIChat extends React.Component<{}, {}> {
inputModel.setCmdInfoChatRefs(this.textAreaRef, this.chatWindowScrollRef);
}
this.requestChatUpdate();
this.onTextAreaChange(null);
}
componentDidUpdate() {
@ -92,20 +92,18 @@ class AIChat extends React.Component<{}, {}> {
}
submitChatMessage(messageStr: string) {
let model = GlobalModel;
let inputModel = model.inputModel;
let curLine = inputModel.getCurLine();
let prtn = GlobalModel.submitChatInfoCommand(messageStr, curLine, false);
const curLine = GlobalModel.inputModel.getCurLine();
const prtn = GlobalModel.submitChatInfoCommand(messageStr, curLine, false);
prtn.then((rtn) => {
if (!rtn.success) {
console.log("submit chat command error: " + rtn.error);
}
}).catch((error) => {});
}).catch((_) => {});
}
getLinePos(elem: any): { numLines: number; linePos: number } {
let numLines = elem.value.split("\n").length;
let linePos = elem.value.substr(0, elem.selectionStart).split("\n").length;
const numLines = elem.value.split("\n").length;
const linePos = elem.value.substr(0, elem.selectionStart).split("\n").length;
return { numLines, linePos };
}
@ -121,22 +119,32 @@ class AIChat extends React.Component<{}, {}> {
})();
}
// Adjust the height of the textarea to fit the text
onTextAreaChange(e: any) {
// set height of textarea based on number of newlines
mobx.action(() => {
this.textAreaNumLines.set(e.target.value.split(/\n/).length);
GlobalModel.inputModel.codeSelectDeselectAll();
})();
// Calculate the bounding height of the text area
const textAreaMaxLines = 4;
const textAreaLineHeight = this.termFontSize * 1.5;
const textAreaMinHeight = textAreaLineHeight;
const textAreaMaxHeight = textAreaLineHeight * textAreaMaxLines;
// Get the height of the wrapped text area content. Courtesy of https://stackoverflow.com/questions/995168/textarea-to-resize-based-on-content-length
this.textAreaRef.current.style.height = "1px";
const scrollHeight: number = this.textAreaRef.current.scrollHeight;
// Set the new height of the text area, bounded by the min and max height.
const newHeight = Math.min(Math.max(scrollHeight, textAreaMinHeight), textAreaMaxHeight);
this.textAreaRef.current.style.height = newHeight + "px";
GlobalModel.inputModel.codeSelectDeselectAll();
}
onEnterKeyPressed() {
let inputModel = GlobalModel.inputModel;
let currentRef = this.textAreaRef.current;
const inputModel = GlobalModel.inputModel;
const currentRef = this.textAreaRef.current;
if (currentRef == null) {
return;
}
if (inputModel.getCodeSelectSelectedIndex() == -1) {
let messageStr = currentRef.value;
const messageStr = currentRef.value;
this.submitChatMessage(messageStr);
currentRef.value = "";
} else {
@ -145,7 +153,7 @@ class AIChat extends React.Component<{}, {}> {
}
onExpandInputPressed() {
let currentRef = this.textAreaRef.current;
const currentRef = this.textAreaRef.current;
if (currentRef == null) {
return;
}
@ -154,7 +162,7 @@ class AIChat extends React.Component<{}, {}> {
}
onArrowUpPressed(): boolean {
let currentRef = this.textAreaRef.current;
const currentRef = this.textAreaRef.current;
if (currentRef == null) {
return false;
}
@ -168,8 +176,8 @@ class AIChat extends React.Component<{}, {}> {
}
onArrowDownPressed(): boolean {
let currentRef = this.textAreaRef.current;
let inputModel = GlobalModel.inputModel;
const currentRef = this.textAreaRef.current;
const inputModel = GlobalModel.inputModel;
if (currentRef == null) {
return false;
}
@ -190,10 +198,10 @@ class AIChat extends React.Component<{}, {}> {
}
renderChatMessage(chatItem: OpenAICmdInfoChatMessageType): any {
let curKey = "chatmsg-" + this.chatListKeyCount;
const curKey = "chatmsg-" + this.chatListKeyCount;
this.chatListKeyCount++;
let senderClassName = chatItem.isassistantresponse ? "chat-msg-assistant" : "chat-msg-user";
let msgClassName = "chat-msg " + senderClassName;
const senderClassName = chatItem.isassistantresponse ? "chat-msg-assistant" : "chat-msg-user";
const msgClassName = "chat-msg " + senderClassName;
let innerHTML: React.JSX.Element = (
<span>
<div className="chat-msg-header">
@ -226,31 +234,10 @@ class AIChat extends React.Component<{}, {}> {
);
}
renderChatWindow(): any {
let model = GlobalModel;
let inputModel = model.inputModel;
let chatMessageItems = inputModel.AICmdInfoChatItems.slice();
let chitem: OpenAICmdInfoChatMessageType = null;
return (
<div className="chat-window" ref={this.chatWindowScrollRef}>
<For each="chitem" index="idx" of={chatMessageItems}>
{this.renderChatMessage(chitem)}
</For>
</div>
);
}
render() {
let model = GlobalModel;
let inputModel = model.inputModel;
const termFontSize = 14;
const textAreaMaxLines = 4;
const textAreaLineHeight = termFontSize * 1.5;
const textAreaPadding = 2 * 0.5 * termFontSize;
let textAreaMaxHeight = textAreaLineHeight * textAreaMaxLines + textAreaPadding;
let textAreaInnerHeight = this.textAreaNumLines.get() * textAreaLineHeight + textAreaPadding;
let renderKeybindings = mobx
const chatMessageItems = GlobalModel.inputModel.AICmdInfoChatItems.slice();
const chitem: OpenAICmdInfoChatMessageType = null;
const renderKeybindings = mobx
.computed(() => {
return (
this.isFocused.get() ||
@ -260,42 +247,39 @@ class AIChat extends React.Component<{}, {}> {
);
})
.get();
return (
<div className="cmd-aichat">
<AuxiliaryCmdView
title="Wave AI"
className="cmd-aichat"
onClose={() => GlobalModel.inputModel.closeAIAssistantChat(true)}
iconClass="fa-sharp fa-solid fa-sparkles"
>
<If condition={renderKeybindings}>
<AIChatKeybindings AIChatObject={this}></AIChatKeybindings>
</If>
<div className="cmdinput-titlebar">
<div className="title-icon">
<i className="fa-sharp fa-solid fa-sparkles" />
</div>
<div className="title-string">Wave AI</div>
<div className="flex-spacer"></div>
<div
className="close-button"
title="Close (ESC)"
onClick={() => inputModel.closeAIAssistantChat(true)}
>
<i className="fa-sharp fa-solid fa-xmark-large" />
</div>
<div className="chat-window" ref={this.chatWindowScrollRef}>
<For each="chitem" index="idx" of={chatMessageItems}>
{this.renderChatMessage(chitem)}
</For>
</div>
<div className="titlebar-spacer" />
{this.renderChatWindow()}
<textarea
key="main"
ref={this.textAreaRef}
autoComplete="off"
autoCorrect="off"
id="chat-cmd-input"
onFocus={this.onTextAreaFocused.bind(this)}
onBlur={this.onTextAreaBlur.bind(this)}
onChange={this.onTextAreaChange.bind(this)}
onKeyDown={this.onKeyDown}
style={{ height: textAreaInnerHeight, maxHeight: textAreaMaxHeight, fontSize: termFontSize }}
className={cn("chat-textarea")}
placeholder="Send a Message..."
></textarea>
</div>
<div className="chat-input">
<textarea
key="main"
ref={this.textAreaRef}
autoComplete="off"
autoCorrect="off"
id="chat-cmd-input"
onFocus={this.onTextAreaFocused.bind(this)}
onBlur={this.onTextAreaBlur.bind(this)}
onChange={this.onTextAreaChange.bind(this)}
onKeyDown={this.onKeyDown}
style={{ fontSize: this.termFontSize }}
className="chat-textarea"
placeholder="Send a Message..."
></textarea>
</div>
</AuxiliaryCmdView>
);
}
}

51
src/app/workspace/cmdinput/auxview.less Normal file
View File

@ -0,0 +1,51 @@
// For the additonal views, we want less padding on the top and bottom than we want for the base-cmdinput div
.auxview {
padding: var(--termpad) calc(var(--termpad) * 2) var(--termpad) calc(var(--termpad) * 3 - 1px);
overflow: auto;
flex-shrink: 1;
width: 100%;
--auxview-titlebar-height: 18px;
.auxview-titlebar {
position: absolute;
z-index: 22;
top: 0;
left: 0;
background-color: var(--app-panel-bg-color);
color: var(--term-blue);
padding: 6px 10px 6px 10px;
display: flex;
flex-direction: row;
width: 100%;
border-bottom: 1px solid var(--app-border-color);
font: var(--base-font);
user-select: none;
cursor: default;
line-height: var(--auxview-titlebar-height);
.title-string {
font-weight: bold;
}
.close-button {
cursor: pointer;
i {
color: var(--app-icon-color);
&:hover {
color: var(--app-icon-hover-color);
}
}
}
div:not(.close-button, .flex-spacer) {
margin-right: 10px;
}
}
.auxview-content {
display: flex;
padding-top: calc(var(--auxview-titlebar-height) + 6px);
}
}

50
src/app/workspace/cmdinput/auxview.tsx Normal file
View File

@ -0,0 +1,50 @@
// Copyright 2024, Command Line Inc.
// SPDX-License-Identifier: Apache-2.0
import * as React from "react";
import cn from "classnames";
import { If } from "tsx-control-statements/components";
import "./auxview.less";
export class AuxiliaryCmdView extends React.Component<
{
title: string;
className?: string;
iconClass?: string;
titleBarContents?: React.ReactElement[];
children?: React.ReactNode;
onClose?: React.MouseEventHandler<HTMLDivElement>;
},
{}
> {
render() {
const { title, className, iconClass, titleBarContents, children, onClose } = this.props;
return (
<div className={cn("auxview", className)}>
<div className="auxview-titlebar">
<If condition={iconClass != null}>
<div className="title-icon">
<i className={iconClass} />
</div>
</If>
<div className="title-string">{title}</div>
<If condition={titleBarContents != null}>{titleBarContents}</If>
<div className="flex-spacer"></div>
<If condition={onClose != null}>
<div className="close-button" title="Close (ESC)" onClick={onClose}>
<i className="fa-sharp fa-solid fa-xmark-large" />
</div>
</If>
</div>
<If condition={children != null}>
<div className="auxview-content">{children}</div>
</If>
</div>
);
}
}

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

@ -7,127 +7,17 @@
position: absolute;
bottom: 0;
width: 100%;
padding: calc(var(--termpad) * 2) calc(var(--termpad) * 2) calc(var(--termpad) * 2) calc(var(--termpad) * 3 - 1px);
z-index: 100;
border-top: 2px solid var(--app-border-color);
background-color: var(--app-bg-color);
&.has-info,
// Apply a border between the base cmdinput and any views shown above it
// TODO: use a generic selector for this
&.has-aichat,
&.has-history {
.cmdinput-actions {
display: none;
}
}
.titlebar-spacer {
height: 31px;
}
.cmdinput-conn {
position: absolute;
top: 0;
left: 0;
border-radius: 0 0 4px 0;
background-color: rgba(88, 193, 66, 0.3);
padding: 2px 10px 4px 10px;
font-size: calc(var(--termfontsize));
cursor: pointer;
i {
margin-left: 5px;
}
&:hover {
background-color: rgba(88, 193, 66, 0.5);
}
}
.cmdinput-actions {
position: absolute;
border-radius: 4px;
padding-left: 4px;
padding-right: 4px;
font-size: calc(var(--termfontsize) + 2px);
line-height: 1.2;
// we want to align to 2nd line of meta. that's 2xPad + 1xLineHightSm
// height of actions is 1xLineHeight + 8px (2x2px padding on icons)
top: calc(var(--termpad));
right: calc(var(--termpad) * 2);
display: flex;
flex-direction: row;
align-items: center;
.cmdinput-icon {
display: inline-flex;
color: var(--app-icon-hover-color);
opacity: 0.5;
.centered-icon {
.positional-icon-visible;
}
&.running-cmds {
.rotate {
fill: var(--app-warning-color);
}
}
&.active {
opacity: 1;
}
&:hover {
opacity: 1;
}
padding: 4px 6px;
cursor: pointer;
}
.line-icon + .line-icon:not(.line-icon-shrink-left) {
margin-left: 3px;
}
}
.cmdinput-titlebar {
position: absolute;
z-index: 22;
top: 0;
left: 0;
background-color: var(--app-panel-bg-color);
color: var(--term-blue);
padding: 6px 10px 6px 10px;
display: flex;
flex-direction: row;
width: 100%;
overflow-x: auto;
border-bottom: 1px solid var(--app-border-color);
font: var(--base-font);
.title-icon {
margin-right: 10px;
}
.title-string {
font-weight: bold;
}
.close-button {
cursor: pointer;
i {
color: var(--app-icon-color);
&:hover {
color: var(--app-icon-hover-color);
}
}
}
.spacer {
flex: 0 0 10px;
&.has-history,
&.has-info {
.base-cmdinput {
border-top: 1px solid var(--app-border-color);
}
}
@ -135,22 +25,12 @@
padding-top: var(--termpad);
}
.focus-indicator {
height: 90%;
top: 5%;
left: 4px;
}
&.has-history,
&.has-aichat {
padding-top: var(--termpad);
height: max(300px, 70%);
}
&.has-remote {
max-height: max(300px, 70%);
}
.remote-status-warning {
display: flex;
flex-direction: row;
@ -164,394 +44,153 @@
}
}
.input-minmax-control {
position: absolute;
top: 5px;
right: 5px;
color: var(--term-foreground);
padding: 5px;
cursor: pointer;
}
.cmd-input-grow-spacer {
flex-grow: 1;
}
.base-cmdinput:not(:first-child) {
margin-top: var(--termpad);
}
.cmd-input-context {
color: var(--term-bright-white);
white-space: nowrap;
display: flex;
justify-content: space-between;
align-items: center;
font-family: var(--termfontfamily);
font-size: var(--termfontsize);
line-height: var(--termlineheight);
margin-left: 2px;
}
.cmd-input-filter {
opacity: 0.5;
&:hover {
opacity: 1;
}
.avatar {
display: inline-block;
width: 1em;
height: 1em;
margin: 0 0.5em;
vertical-align: text-top;
fill: var(--term-foreground);
}
.warning {
fill: var(--term-yellow);
}
}
.cmd-input-field {
.base-cmdinput {
position: relative;
padding-right: var(--termpad);
font-family: var(--termfontfamily);
font-weight: normal;
line-height: var(--termlineheight);
font-size: var(--termfontsize);
// Rather than apply the padding to the whole container, we will apply it to the inner contents directly.
// This is more fragile, but allows us to capture a larger target area for the individual components.
--padding-top: var(--termpad);
--padding-sides: calc(var(--termpad) * 2);
.cmd-hints {
position: absolute;
bottom: -14px;
right: 0px;
}
.control {
padding: 1em 2px;
}
.textareainput-div {
position: relative;
&.control {
padding: var(--termpad) 0;
}
.shelltag {
position: absolute;
// 13px = 10px height + 3px padding. subtract termpad to account for textareainput-div padding (2px not sure?)
bottom: calc(-13px + var(--termpad));
right: 0px;
font-size: 10px;
color: var(--app-text-secondary-color);
line-height: 1;
padding: 1px 8px 3px 8px;
background-color: var(--cmdinput-textarea-bg-color);
border-radius: 0 0 5px 5px;
}
}
textarea {
color: var(--app-text-primary-color);
background-color: var(--cmdinput-textarea-bg-color);
padding: var(--termpad);
resize: none;
overflow: auto;
overflow-wrap: anywhere;
border-color: transparent;
border: none;
.cmd-input-context {
color: var(--term-bright-white);
white-space: nowrap;
display: flex;
justify-content: space-between;
align-items: center;
font-family: var(--termfontfamily);
font-size: var(--termfontsize);
line-height: var(--termlineheight);
// We don't want to pad the bottom or it will push the input field down.
padding: var(--padding-top) var(--padding-sides) 0 var(--padding-sides);
margin-left: 2px;
}
.cmd-input-field {
position: relative;
font-family: var(--termfontfamily);
font-weight: normal;
line-height: var(--termlineheight);
font-size: var(--termfontsize);
border-radius: 4px 4px 0 4px; // 0 is for shelltag
border: none;
cursor: text;
&.display-disabled {
background-color: #444;
// We don't want to pad the top or it will push the input field down.
padding: 0 var(--padding-sides) var(--padding-top) var(--padding-sides);
.cmd-hints {
position: absolute;
bottom: -14px;
right: 0px;
}
.control {
padding: 1em 2px;
}
&:focus {
.textareainput-div {
position: relative;
&.control {
padding: var(--termpad) 0;
}
.shelltag {
position: absolute;
// 13px = 10px height + 3px padding. subtract termpad to account for textareainput-div padding (2px not sure?)
bottom: calc(-13px + var(--termpad));
right: 0;
font-size: 10px;
color: var(--app-text-secondary-color);
line-height: 1;
user-select: none;
}
}
textarea {
color: var(--app-text-primary-color);
background-color: var(--app-bg-color);
padding: var(--termpad) 0;
resize: none;
overflow: auto;
overflow-wrap: anywhere;
font-family: var(--termfontfamily);
line-height: var(--termlineheight);
font-size: var(--termfontsize);
border: none;
box-shadow: none;
}
input.history-input {
border: 0;
padding: 0;
height: 0;
}
.cmd-quick-context .button {
background-color: var(--app-bg-color) !important;
color: var(--app-text-color);
}
&.inputmode-global .cmd-quick-context .button {
color: var(--app-bg-color);
background-color: var(--cmdinput-button-bg-color) !important;
}
&.inputmode-comment .cmd-quick-context .button {
color: var(--app-bg-color);
background-color: var(--cmdinput-comment-button-bg-color) !important;
}
}
input.history-input {
border: 0;
padding: 0;
height: 0;
}
.cmd-quick-context .button {
background-color: #000 !important;
color: var(--app-text-color);
}
&.inputmode-global .cmd-quick-context .button {
color: var(--app-bg-color);
background-color: var(--cmdinput-button-bg-color) !important;
}
&.inputmode-comment .cmd-quick-context .button {
color: var(--app-bg-color);
background-color: var(--cmdinput-comment-button-bg-color) !important;
}
.cmd-exec {
.cmdinput-actions {
position: absolute;
right: 0;
.icon {
vertical-align: bottom;
margin-right: 1em;
width: 2.5em;
height: 2.5em;
cursor: pointer;
border-radius: 50%;
fill: var(--app-accent-color);
padding: 0.25em;
}
.icon.disabled {
fill: var(--cmdinput-disabled-icon-color);
cursor: default;
}
.cmd-btn {
display: inline-block;
margin-right: 0;
padding: 0.2em 0.7rem;
border-radius: 4px;
vertical-align: super;
font-size: calc(var(--termfontsize) + 2px);
line-height: 1.2;
.hint-elem {
cursor: pointer;
opacity: 0.5;
// Align to the same bounds as the input field
top: var(--padding-top);
right: var(--padding-sides);
&:hover {
opacity: 1;
display: flex;
flex-direction: row;
align-items: center;
.cmdinput-icon {
display: inline-flex;
color: var(--app-icon-hover-color);
opacity: 0.5;
.centered-icon {
.positional-icon-visible;
}
&.running-cmds {
.rotate {
fill: var(--app-warning-color);
}
}
}
}
}
.cmd-aichat {
display: flex;
justify-content: flex-end;
flex-flow: column nowrap;
margin-bottom: 10px;
flex-shrink: 1;
overflow-y: auto;
.chat-window {
overflow-y: auto;
margin-bottom: 5px;
flex-shrink: 1;
flex-direction: column-reverse;
}
.chat-textarea {
color: var(--app-text-primary-color);
background-color: var(--cmdinput-textarea-bg);
padding: 0.5em;
resize: none;
overflow: auto;
overflow-wrap: anywhere;
border-color: transparent;
border: none;
font-family: var(--termfontfamily);
font-weight: normal;
flex-shrink: 0;
flex-grow: 1;
border-radius: 4px;
&:focus {
border: none;
outline: none;
}
}
.chat-msg {
margin-top: calc(var(--termpad) * 2);
margin-bottom: calc(var(--termpad) * 2);
.chat-msg-header {
display: flex;
margin-bottom: 2px;
i {
margin-right: 0.5em;
&.active {
opacity: 1;
}
.chat-username {
font-weight: bold;
margin-right: 5px;
}
}
}
.chat-msg-assistant {
color: var(--app-text-color);
}
.chat-msg-user {
.msg-text {
font-family: var(--markdown-font);
font-size: 14px;
white-space: pre-wrap;
}
}
.chat-msg-error {
color: var(--cmdinput-text-error);
font-family: var(--markdown-font);
font-size: 14px;
}
.grow-spacer {
flex: 1 0 10px;
}
}
.cmd-history {
color: var(--app-text-color);
font-family: var(--termfontfamily);
font-size: var(--termfontsize);
overflow: auto;
flex-shrink: 1;
.history-title {
div:first-child {
margin-left: var(--termpad);
}
.history-opt {
white-space: nowrap;
}
.history-clickable-opt {
cursor: pointer;
&:hover {
color: var(--app-text-primary-color);
opacity: 1;
}
}
.history-clickable-opt {
white-space: nowrap;
// This aligns the icons with the prompt field.
// We don't need right padding because the whole input field is already padded.
padding: 2px 0 0 12px;
cursor: pointer;
}
}
.history-items {
color: var(--app-text-color);
padding-bottom: 6px;
.history-line {
white-space: pre;
.line-icon + .line-icon:not(.line-icon-shrink-left) {
margin-left: 3px;
}
.history-item.history-haderror {
color: var(--cmdinput-history-item-error-color);
}
.history-line:first-child {
margin-left: 0 !important;
}
.history-item {
padding-left: 5px;
cursor: pointer;
&:hover {
background-color: #222;
}
}
.history-item.is-selected {
font-weight: bold;
color: var(--app-text-primary-color);
background-color: #444;
}
.history-item.is-selected.history-haderror {
color: var(--cmdinput-history-item-selected-error-color);
}
}
}
.cmd-input-info {
flex-shrink: 1;
overflow-y: auto;
margin-bottom: var(--termpad);
font-family: var(--termfontfamily);
font-size: var(--termfontsize);
line-height: var(--termlineheight);
.info-title {
position: absolute;
z-index: 102;
top: 5px;
left: 0;
font-size: calc(var(--termfontsize) + 2px);
background-color: var(--app-bg-color);
color: var(--term-blue);
padding-bottom: 4px;
padding-left: calc(var(--termpad) * 2);
display: flex;
flex-direction: row;
width: 100%;
overflow-x: auto;
border-bottom: 1px solid var(--app-border-color);
}
.info-title + .info-msg,
.info-title + .info-lines,
.info-title + .info-comps,
.info-title + .info-error {
margin-top: 26px;
}
.info-msg {
color: var(--term-blue);
padding-bottom: 2px;
a {
color: var(--term-blue);
}
}
.info-lines {
color: var(--app-text-color);
white-space: pre;
padding-bottom: 6px;
}
.info-comps {
display: flex;
flex-direction: row;
flex-wrap: wrap;
padding-bottom: 5px;
font-weight: normal;
font-family: var(--termfontfamily);
font-size: var(--termfontsize);
.info-comp {
min-width: 200px;
color: var(--term-foreground);
margin-right: 10px;
&.has-space {
text-decoration: underline dotted #777;
}
}
.metacmd-comp {
color: var(--term-bright-green);
}
}
.info-error {
color: var(--cmdinput-text-error-color);
padding-bottom: 2px;
}
}
}

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

@ -61,12 +61,17 @@ class CmdInput extends React.Component<{}, {}> {
}
@boundMethod
cmdInputClick(e: any): void {
baseCmdInputClick(e: React.MouseEvent): void {
if (this.promptRef.current != null) {
if (this.promptRef.current.contains(e.target)) {
return;
}
}
if ((e.target as HTMLDivElement).classList.contains("cmd-input-context")) {
e.stopPropagation();
return;
}
GlobalModel.inputModel.setHistoryFocus(false);
GlobalModel.inputModel.giveFocus();
}
@ -74,8 +79,12 @@ class CmdInput extends React.Component<{}, {}> {
clickAIAction(e: any): void {
e.preventDefault();
e.stopPropagation();
let inputModel = GlobalModel.inputModel;
inputModel.openAIAssistantChat();
const inputModel = GlobalModel.inputModel;
if (inputModel.aIChatShow.get()) {
inputModel.closeAIAssistantChat(true);
} else {
inputModel.openAIAssistantChat();
}
}
@boundMethod
@ -160,6 +169,9 @@ class CmdInput extends React.Component<{}, {}> {
}
let shellInitMsg: string = null;
let hidePrompt = false;
const openView = inputModel.getOpenView();
const hasOpenView = openView ? `has-${openView}` : null;
if (ri == null) {
let shellStr = "shell";
if (!util.isBlank(remote?.defaultshelltype)) {
@ -172,42 +184,7 @@ class CmdInput extends React.Component<{}, {}> {
}
}
return (
<div
ref={this.cmdInputRef}
className={cn(
"cmd-input",
{ "has-info": infoShow },
{ "has-aichat": aiChatShow },
{ "has-history": historyShow },
{ active: focusVal }
)}
>
<div className="cmdinput-actions">
<If condition={numRunningLines > 0}>
<div
key="running"
className={cn("cmdinput-icon", "running-cmds", { active: filterRunning })}
title="Filter for Running Commands"
onClick={() => this.toggleFilter(screen)}
>
<CenteredIcon>{numRunningLines}</CenteredIcon>{" "}
<CenteredIcon>
<RotateIcon className="rotate warning spin" />
</CenteredIcon>
</div>
</If>
<div key="ai" title="Wave AI (Ctrl-Space)" className="cmdinput-icon" onClick={this.clickAIAction}>
<i className="fa-sharp fa-regular fa-sparkles fa-fw" />
</div>
<div
key="history"
title="Tab History (Ctrl-R)"
className="cmdinput-icon"
onClick={this.clickHistoryAction}
>
<i className="fa-sharp fa-regular fa-clock-rotate-left fa-fw" />
</div>
</div>
<div ref={this.cmdInputRef} className={cn("cmd-input", hasOpenView, { active: focusVal })}>
<If condition={historyShow}>
<div className="cmd-input-grow-spacer"></div>
<HistoryInfo />
@ -252,7 +229,38 @@ class CmdInput extends React.Component<{}, {}> {
</Button>
</div>
</If>
<div key="base-cmdinput" className="base-cmdinput">
<div key="base-cmdinput" className="base-cmdinput" onClick={this.baseCmdInputClick}>
<div className="cmdinput-actions">
<If condition={numRunningLines > 0}>
<div
key="running"
className={cn("cmdinput-icon", "running-cmds", { active: filterRunning })}
title="Filter for Running Commands"
onClick={() => this.toggleFilter(screen)}
>
<CenteredIcon>{numRunningLines}</CenteredIcon>{" "}
<CenteredIcon>
<RotateIcon className="rotate warning spin" />
</CenteredIcon>
</div>
</If>
<div
key="ai"
title="Wave AI (Ctrl-Space)"
className="cmdinput-icon"
onClick={this.clickAIAction}
>
<i className="fa-sharp fa-regular fa-sparkles fa-fw" />
</div>
<div
key="history"
title="Tab History (Ctrl-R)"
className="cmdinput-icon"
onClick={this.clickHistoryAction}
>
<i className="fa-sharp fa-regular fa-clock-rotate-left fa-fw" />
</div>
</div>
<If condition={!hidePrompt}>
<div key="prompt" className="cmd-input-context">
<div className="has-text-white">

60
src/app/workspace/cmdinput/historyinfo.less Normal file
View File

@ -0,0 +1,60 @@
.cmd-history {
color: var(--app-text-color);
font-family: var(--termfontfamily);
font-size: var(--termfontsize);
.auxview-titlebar {
.history-opt {
white-space: nowrap;
}
.history-clickable-opt {
cursor: pointer;
white-space: nowrap;
cursor: pointer;
&:hover {
color: var(--app-text-primary-color);
}
}
}
.history-items {
color: var(--app-text-color);
width: 100%;
.history-item {
cursor: pointer;
border-radius: 5px;
.history-line {
white-space: pre;
&:first-child {
margin-left: 0 !important;
}
}
&:hover {
background-color: var(--table-tr-hover-bg-color);
}
&.history-haderror {
color: var(--cmdinput-history-item-error-color);
}
&.is-selected {
font-weight: bold;
color: var(--app-text-primary-color);
background-color: var(--table-tr-selected-bg-color);
&:hover {
background-color: var(--table-tr-selected-hover-bg-color);
}
}
&.is-selected.history-haderror {
color: var(--cmdinput-history-item-selected-error-color);
}
}
}
}

100
src/app/workspace/cmdinput/historyinfo.tsx
View File

@ -13,6 +13,9 @@ import localizedFormat from "dayjs/plugin/localizedFormat";
import { GlobalModel } from "@/models";
import { isBlank } from "@/util/util";
import "./historyinfo.less";
import { AuxiliaryCmdView } from "./auxview";
dayjs.extend(localizedFormat);
const TDots = "⋮";
@ -43,7 +46,7 @@ class HItem extends React.Component<
if (hitem.remote == null || isBlank(hitem.remote.remoteid)) {
return sprintf("%-15s ", "");
}
let r = GlobalModel.getRemote(hitem.remote.remoteid);
const r = GlobalModel.getRemote(hitem.remote.remoteid);
if (r == null) {
return sprintf("%-15s ", "???");
}
@ -71,15 +74,15 @@ class HItem extends React.Component<
if (!opts.limitRemote) {
remoteStr = this.renderRemote(hitem);
}
let selectedStr = isSelected ? "*" : " ";
let lineNumStr = hitem.linenum > 0 ? "(" + hitem.linenum + ")" : "";
const selectedStr = isSelected ? "*" : " ";
const lineNumStr = hitem.linenum > 0 ? "(" + hitem.linenum + ")" : "";
if (isBlank(opts.queryType) || opts.queryType == "screen") {
return selectedStr + sprintf("%7s", lineNumStr) + " " + remoteStr;
}
if (opts.queryType == "session") {
let screenStr = "";
if (!isBlank(hitem.screenid)) {
let scrName = scrNames[hitem.screenid];
const scrName = scrNames[hitem.screenid];
if (scrName != null) {
screenStr = "[" + truncateWithTDots(scrName, 15) + "]";
}
@ -89,19 +92,18 @@ class HItem extends React.Component<
if (opts.queryType == "global") {
let sessionStr = "";
if (!isBlank(hitem.sessionid)) {
let sessionName = snames[hitem.sessionid];
const sessionName = snames[hitem.sessionid];
if (sessionName != null) {
sessionStr = "#" + truncateWithTDots(sessionName, 15);
}
}
let screenStr = "";
if (!isBlank(hitem.screenid)) {
let scrName = scrNames[hitem.screenid];
const scrName = scrNames[hitem.screenid];
if (scrName != null) {
screenStr = "[" + truncateWithTDots(scrName, 13) + "]";
}
}
let ssStr = sessionStr + screenStr;
return (
selectedStr +
sprintf("%15s ", sessionStr) +
@ -116,12 +118,12 @@ class HItem extends React.Component<
}
render() {
let { hitem, isSelected, opts, snames, scrNames } = this.props;
let lines = hitem.cmdstr.split("\n");
const { hitem, isSelected, opts, snames, scrNames } = this.props;
const lines = hitem.cmdstr.split("\n");
let line: string = "";
let idx = 0;
let infoText = this.renderHInfoText(hitem, opts, isSelected, snames, scrNames);
let infoTextSpacer = sprintf("%" + infoText.length + "s", "");
const infoText = this.renderHInfoText(hitem, opts, isSelected, snames, scrNames);
const infoTextSpacer = sprintf("%" + infoText.length + "s", "");
return (
<div
key={hitem.historynum}
@ -153,7 +155,7 @@ class HistoryInfo extends React.Component<{}, {}> {
containingText: mobx.IObservableValue<string> = mobx.observable.box("");
componentDidMount() {
let inputModel = GlobalModel.inputModel;
const inputModel = GlobalModel.inputModel;
let hitem = inputModel.getHistorySelectedItem();
if (hitem == null) {
hitem = inputModel.getFirstHistoryItem();
@ -170,15 +172,15 @@ class HistoryInfo extends React.Component<{}, {}> {
@boundMethod
handleItemClick(hitem: HistoryItem) {
let inputModel = GlobalModel.inputModel;
let selItem = inputModel.getHistorySelectedItem();
const inputModel = GlobalModel.inputModel;
const selItem = inputModel.getHistorySelectedItem();
inputModel.setHistoryFocus(true);
if (this.lastClickHNum == hitem.historynum && selItem != null && selItem.historynum == hitem.historynum) {
inputModel.grabSelectedHistoryItem();
return;
}
inputModel.giveFocus();
inputModel.setHistorySelectionNum(hitem.historynum);
let now = Date.now();
const now = Date.now();
this.lastClickHNum = hitem.historynum;
this.lastClickTs = now;
setTimeout(() => {
@ -191,24 +193,41 @@ class HistoryInfo extends React.Component<{}, {}> {
@boundMethod
handleClickType() {
let inputModel = GlobalModel.inputModel;
const inputModel = GlobalModel.inputModel;
inputModel.setHistoryFocus(true);
inputModel.toggleHistoryType();
}
@boundMethod
handleClickRemote() {
let inputModel = GlobalModel.inputModel;
const inputModel = GlobalModel.inputModel;
inputModel.setHistoryFocus(true);
inputModel.toggleRemoteType();
}
@boundMethod
getTitleBarContents(): React.ReactElement[] {
const opts = GlobalModel.inputModel.historyQueryOpts.get();
return [
<div className="history-opt history-clickable-opt" key="screen" onClick={this.handleClickType}>
[for {opts.queryType} &#x2318;S]
</div>,
<div className="history-opt" key="query-str" title="type to search">
[containing '{opts.queryStr}']
</div>,
<div className="history-opt history-clickable-opt" key="remote" onClick={this.handleClickRemote}>
[{opts.limitRemote ? "this" : "any"} remote &#x2318;R]
</div>,
];
}
render() {
let inputModel = GlobalModel.inputModel;
let idx: number = 0;
let selItem = inputModel.getHistorySelectedItem();
let hitems = inputModel.getFilteredHistoryItems();
hitems = hitems.slice().reverse();
const inputModel = GlobalModel.inputModel;
const selItem = inputModel.getHistorySelectedItem();
const hitems = inputModel.getFilteredHistoryItems().slice().reverse();
const opts = inputModel.historyQueryOpts.get();
let hitem: HistoryItem = null;
let opts = inputModel.historyQueryOpts.get();
let snames: Record<string, string> = {};
let scrNames: Record<string, string> = {};
if (opts.queryType == "global") {
@ -218,29 +237,13 @@ class HistoryInfo extends React.Component<{}, {}> {
scrNames = GlobalModel.getScreenNames();
}
return (
<div className="cmd-history hide-scrollbar">
<div className="cmdinput-titlebar history-title">
<div className="title-icon">
<i className="fa-sharp fa-solid fa-clock-rotate-left" />
</div>
<div className="title-string">History</div>
<div className="spacer"></div>
<div className="history-opt history-clickable-opt" onClick={this.handleClickType}>
[for {opts.queryType} &#x2318;S]
</div>
<div className="spacer"></div>
<div className="history-opt" title="type to search">
[containing '{opts.queryStr}']
</div>
<div className="spacer"></div>
<div className="history-opt history-clickable-opt" onClick={this.handleClickRemote}>
[{opts.limitRemote ? "this" : "any"} remote &#x2318;R]
</div>
<div className="flex-spacer"></div>
<div className="close-button" title="Close (ESC)">
<i className="fa-sharp fa-solid fa-xmark-large" onClick={this.handleClose}></i>
</div>
</div>
<AuxiliaryCmdView
title="History"
className="cmd-history hide-scrollbar"
onClose={this.handleClose}
titleBarContents={this.getTitleBarContents()}
iconClass="fa-sharp fa-solid fa-clock-rotate-left"
>
<div
className={cn(
"history-items",
@ -248,7 +251,6 @@ class HistoryInfo extends React.Component<{}, {}> {
{ "show-sessions": opts.queryType == "global" }
)}
>
<div className="titlebar-spacer" />
<If condition={hitems.length == 0}>[no history]</If>
<If condition={hitems.length > 0}>
<For each="hitem" index="idx" of={hitems}>
@ -264,7 +266,7 @@ class HistoryInfo extends React.Component<{}, {}> {
</For>
</If>
</div>
</div>
</AuxiliaryCmdView>
);
}
}

49
src/app/workspace/cmdinput/infomsg.less Normal file
View File

@ -0,0 +1,49 @@
.cmd-input-info {
font-family: var(--termfontfamily);
font-size: var(--termfontsize);
line-height: var(--termlineheight);
.info-msg {
color: var(--term-blue);
padding-bottom: 2px;
a {
color: var(--term-blue);
}
}
.info-lines {
color: var(--app-text-color);
white-space: pre;
padding-bottom: 6px;
}
.info-comps {
display: flex;
flex-direction: row;
flex-wrap: wrap;
padding-bottom: 5px;
font-weight: normal;
font-family: var(--termfontfamily);
font-size: var(--termfontsize);
.info-comp {
min-width: 200px;
color: var(--term-foreground);
margin-right: 10px;
&.has-space {
text-decoration: underline dotted #777;
}
}
.metacmd-comp {
color: var(--term-bright-green);
}
}
.info-error {
color: var(--cmdinput-text-error-color);
padding-bottom: 2px;
}
}

22
src/app/workspace/cmdinput/infomsg.tsx
View File

@ -9,6 +9,9 @@ import dayjs from "dayjs";
import localizedFormat from "dayjs/plugin/localizedFormat";
import { GlobalModel } from "@/models";
import * as appconst from "@/app/appconst";
import { AuxiliaryCmdView } from "./auxview";
import "./infomsg.less";
dayjs.extend(localizedFormat);
@ -40,29 +43,22 @@ class InfoMsg extends React.Component<{}, {}> {
}
render() {
let model = GlobalModel;
let inputModel = model.inputModel;
let infoMsg = inputModel.infoMsg.get();
let infoShow = inputModel.infoShow.get();
const inputModel = GlobalModel.inputModel;
const infoMsg: InfoType = inputModel.infoMsg.get();
const infoShow: boolean = inputModel.infoShow.get();
let line: string = null;
let istr: string = null;
let idx: number = 0;
let titleStr = null;
let remoteEditKey = "inforemoteedit";
if (infoMsg != null) {
titleStr = infoMsg.infotitle;
}
let activeScreen = model.getActiveScreen();
if (!infoShow) {
return null;
}
return (
<div className="cmd-input-info" style={{ display: infoShow ? "block" : "none" }}>
<If condition={infoMsg?.infotitle}>
<div key="infotitle" className="info-title">
{titleStr}
</div>
</If>
<AuxiliaryCmdView title={titleStr} className="cmd-input-info">
<If condition={infoMsg?.infomsg}>
<div key="infomsg" className="info-msg">
<If condition={infoMsg.infomsghtml}>
@ -108,7 +104,7 @@ class InfoMsg extends React.Component<{}, {}> {
<div className="info-error">to reset, run: /reset:cwd</div>
</If>
</If>
</div>
</AuxiliaryCmdView>
);
}
}

13
src/app/workspace/cmdinput/textareainput.tsx
View File

@ -287,7 +287,7 @@ class TextAreaInput extends React.Component<{ screen: Screen; onHeightChange: ()
setFocus(): void {
const inputModel = GlobalModel.inputModel;
if (inputModel.historyShow.get()) {
if (inputModel.historyFocus.get()) {
this.historyInputRef.current.focus();
} else {
this.mainInputRef.current.focus();
@ -551,7 +551,7 @@ class TextAreaInput extends React.Component<{ screen: Screen; onHeightChange: ()
@boundMethod
handleMainFocus(e: any) {
const inputModel = GlobalModel.inputModel;
if (inputModel.historyShow.get()) {
if (inputModel.historyFocus.get()) {
e.preventDefault();
if (this.historyInputRef.current != null) {
this.historyInputRef.current.focus();
@ -578,7 +578,7 @@ class TextAreaInput extends React.Component<{ screen: Screen; onHeightChange: ()
@boundMethod
handleHistoryFocus(e: any) {
const inputModel = GlobalModel.inputModel;
if (!inputModel.historyShow.get()) {
if (!inputModel.historyFocus.get()) {
e.preventDefault();
if (this.mainInputRef.current != null) {
this.mainInputRef.current.focus();
@ -616,7 +616,9 @@ class TextAreaInput extends React.Component<{ screen: Screen; onHeightChange: ()
if (numLines > 1 || longLine || inputModel.inputExpanded.get()) {
displayLines = 5;
}
const disabled = inputModel.historyShow.get();
// TODO: invert logic here. We should track focus on the main textarea and assume aux view is focused if not.
const disabled = inputModel.historyFocus.get();
if (disabled) {
displayLines = 1;
}
@ -661,7 +663,7 @@ class TextAreaInput extends React.Component<{ screen: Screen; onHeightChange: ()
<HistoryKeybindings inputObject={this}></HistoryKeybindings>
</If>
<If condition={!disabled && !util.isBlank(shellType)}>
<If condition={!util.isBlank(shellType)}>
<div className="shelltag">{shellType}</div>
</If>
<textarea
@ -678,6 +680,7 @@ class TextAreaInput extends React.Component<{ screen: Screen; onHeightChange: ()
onKeyDown={this.onKeyDown}
onChange={this.onChange}
onSelect={this.onSelect}
placeholder="Type here..."
className={cn("textarea", { "display-disabled": disabled })}
></textarea>
<input

164
src/models/input.ts
View File

@ -25,6 +25,7 @@ function getDefaultHistoryQueryOpts(): HistoryQueryOpts {
class InputModel {
globalModel: Model;
historyShow: OV<boolean> = mobx.observable.box(false);
historyFocus: OV<boolean> = mobx.observable.box(false);
infoShow: OV<boolean> = mobx.observable.box(false);
aIChatShow: OV<boolean> = mobx.observable.box(false);
cmdInputHeight: OV<number> = mobx.observable.box(0);
@ -92,7 +93,7 @@ class InputModel {
}
toggleHistoryType(): void {
let opts = mobx.toJS(this.historyQueryOpts.get());
const opts = mobx.toJS(this.historyQueryOpts.get());
let htype = opts.queryType;
if (htype == "screen") {
htype = "session";
@ -105,7 +106,7 @@ class InputModel {
}
toggleRemoteType(): void {
let opts = mobx.toJS(this.historyQueryOpts.get());
const opts = mobx.toJS(this.historyQueryOpts.get());
if (opts.limitRemote) {
opts.limitRemote = false;
opts.limitRemoteInstance = false;
@ -139,21 +140,21 @@ class InputModel {
}
_focusCmdInput(): void {
let elem = document.getElementById("main-cmd-input");
const elem = document.getElementById("main-cmd-input");
if (elem != null) {
elem.focus();
}
}
_focusHistoryInput(): void {
let elem: HTMLElement = document.querySelector(".cmd-input input.history-input");
const elem: HTMLElement = document.querySelector(".cmd-input input.history-input");
if (elem != null) {
elem.focus();
}
}
giveFocus(): void {
if (this.historyShow.get()) {
if (this.historyFocus.get()) {
this._focusHistoryInput();
} else {
this._focusCmdInput();
@ -165,7 +166,7 @@ class InputModel {
this.physicalInputFocused.set(isFocused);
})();
if (isFocused) {
let screen = this.globalModel.getActiveScreen();
const screen = this.globalModel.getActiveScreen();
if (screen != null) {
if (screen.focusType.get() != "input") {
GlobalCommandRunner.screenSetFocus("input");
@ -175,11 +176,11 @@ class InputModel {
}
hasFocus(): boolean {
let mainInputElem = document.getElementById("main-cmd-input");
const mainInputElem = document.getElementById("main-cmd-input");
if (document.activeElement == mainInputElem) {
return true;
}
let historyInputElem = document.querySelector(".cmd-input input.history-input");
const historyInputElem = document.querySelector(".cmd-input input.history-input");
if (document.activeElement == historyInputElem) {
return true;
}
@ -190,6 +191,19 @@ class InputModel {
return false;
}
getOpenView(): string {
if (this.historyShow.get()) {
return "history";
}
if (this.aIChatShow.get()) {
return "aichat";
}
if (this.infoShow.get()) {
return "info";
}
return null;
}
setHistoryType(htype: HistoryTypeStrs): void {
if (this.historyQueryOpts.get().queryType == htype) {
return;
@ -201,20 +215,19 @@ class InputModel {
if (oldItem == null) {
return 0;
}
let newItems = this.getFilteredHistoryItems();
const newItems = this.getFilteredHistoryItems();
if (newItems.length == 0) {
return 0;
}
let bestIdx = 0;
for (let i = 0; i < newItems.length; i++) {
for (const [i, item] of newItems.entries()) {
// still start at i=0 to catch the historynum equality case
let item = newItems[i];
if (item.historynum == oldItem.historynum) {
bestIdx = i;
break;
}
let bestTsDiff = Math.abs(item.ts - newItems[bestIdx].ts);
let curTsDiff = Math.abs(item.ts - oldItem.ts);
const bestTsDiff = Math.abs(item.ts - newItems[bestIdx].ts);
const curTsDiff = Math.abs(item.ts - oldItem.ts);
if (curTsDiff < bestTsDiff) {
bestIdx = i;
}
@ -224,9 +237,9 @@ class InputModel {
setHistoryQueryOpts(opts: HistoryQueryOpts): void {
mobx.action(() => {
let oldItem = this.getHistorySelectedItem();
const oldItem = this.getHistorySelectedItem();
this.historyQueryOpts.set(opts);
let bestIndex = this.findBestNewIndex(oldItem);
const bestIndex = this.findBestNewIndex(oldItem);
setTimeout(() => this.setHistoryIndex(bestIndex, true), 10);
})();
}
@ -253,17 +266,28 @@ class InputModel {
this.setInputPopUpType("none");
}
this.historyShow.set(show);
this.historyFocus.set(show);
if (this.hasFocus()) {
this.giveFocus();
}
})();
}
setHistoryFocus(focus: boolean): void {
if (this.historyFocus.get() == focus) {
return;
}
mobx.action(() => {
this.historyFocus.set(focus);
this.giveFocus();
})();
}
isHistoryLoaded(): boolean {
if (this.historyLoading.get()) {
return false;
}
let hitems = this.historyItems.get();
const hitems = this.historyItems.get();
return hitems != null;
}
@ -294,6 +318,7 @@ class InputModel {
if (!this.historyShow.get()) {
mobx.action(() => {
this.setHistoryShow(true);
this.aIChatShow.set(false);
this.infoShow.set(false);
this.dropModHistory(true);
this.giveFocus();
@ -311,11 +336,11 @@ class InputModel {
}
getHistorySelectedItem(): HistoryItem {
let hidx = this.historyIndex.get();
const hidx = this.historyIndex.get();
if (hidx == 0) {
return null;
}
let hitems = this.getFilteredHistoryItems();
const hitems = this.getFilteredHistoryItems();
if (hidx > hitems.length) {
return null;
}
@ -323,7 +348,7 @@ class InputModel {
}
getFirstHistoryItem(): HistoryItem {
let hitems = this.getFilteredHistoryItems();
const hitems = this.getFilteredHistoryItems();
if (hitems.length == 0) {
return null;
}
@ -331,9 +356,9 @@ class InputModel {
}
setHistorySelectionNum(hnum: string): void {
let hitems = this.getFilteredHistoryItems();
for (let i = 0; i < hitems.length; i++) {
if (hitems[i].historynum == hnum) {
const hitems = this.getFilteredHistoryItems();
for (const [i, hitem] of hitems.entries()) {
if (hitem.historynum == hnum) {
this.setHistoryIndex(i + 1);
return;
}
@ -342,8 +367,8 @@ class InputModel {
setHistoryInfo(hinfo: HistoryInfoType): void {
mobx.action(() => {
let oldItem = this.getHistorySelectedItem();
let hitems: HistoryItem[] = hinfo.items ?? [];
const oldItem = this.getHistorySelectedItem();
const hitems: HistoryItem[] = hinfo.items ?? [];
this.historyItems.set(hitems);
this.historyLoading.set(false);
this.historyQueryOpts.get().queryType = hinfo.historytype;
@ -352,7 +377,7 @@ class InputModel {
this.historyQueryOpts.get().limitRemoteInstance = false;
}
if (this.historyAfterLoadIndex == -1) {
let bestIndex = this.findBestNewIndex(oldItem);
const bestIndex = this.findBestNewIndex(oldItem);
setTimeout(() => this.setHistoryIndex(bestIndex, true), 100);
} else if (this.historyAfterLoadIndex) {
if (hitems.length >= this.historyAfterLoadIndex) {
@ -371,10 +396,10 @@ class InputModel {
}
_getFilteredHistoryItems(): HistoryItem[] {
let hitems: HistoryItem[] = this.historyItems.get() ?? [];
let rtn: HistoryItem[] = [];
let opts = mobx.toJS(this.historyQueryOpts.get());
let ctx = this.globalModel.getUIContext();
const hitems: HistoryItem[] = this.historyItems.get() ?? [];
const rtn: HistoryItem[] = [];
const opts: HistoryQueryOpts = mobx.toJS(this.historyQueryOpts.get());
const ctx = this.globalModel.getUIContext();
let curRemote: RemotePtrType = ctx.remote;
if (curRemote == null) {
curRemote = { ownerid: "", name: "", remoteid: "" };
@ -411,7 +436,7 @@ class InputModel {
if (isBlank(hitem.cmdstr)) {
continue;
}
let idx = hitem.cmdstr.indexOf(opts.queryStr);
const idx = hitem.cmdstr.indexOf(opts.queryStr);
if (idx == -1) {
continue;
}
@ -423,24 +448,24 @@ class InputModel {
}
scrollHistoryItemIntoView(hnum: string): void {
let elem: HTMLElement = document.querySelector(".cmd-history .hnum-" + hnum);
const elem: HTMLElement = document.querySelector(".cmd-history .hnum-" + hnum);
if (elem == null) {
return;
}
let historyDiv = elem.closest(".cmd-history");
const historyDiv = elem.closest(".cmd-history");
if (historyDiv == null) {
return;
}
let buffer = 15;
const buffer = 15;
let titleHeight = 24;
let titleDiv: HTMLElement = document.querySelector(".cmd-history .history-title");
const titleDiv: HTMLElement = document.querySelector(".cmd-history .history-title");
if (titleDiv != null) {
titleHeight = titleDiv.offsetHeight + 2;
}
let elemOffset = elem.offsetTop;
let elemHeight = elem.clientHeight;
let topPos = historyDiv.scrollTop;
let endPos = topPos + historyDiv.clientHeight;
const elemOffset = elem.offsetTop;
const elemHeight = elem.clientHeight;
const topPos = historyDiv.scrollTop;
const endPos = topPos + historyDiv.clientHeight;
if (elemOffset + elemHeight + buffer > endPos) {
if (elemHeight + buffer > historyDiv.clientHeight - titleHeight) {
historyDiv.scrollTop = elemOffset - titleHeight;
@ -459,7 +484,7 @@ class InputModel {
}
grabSelectedHistoryItem(): void {
let hitem = this.getHistorySelectedItem();
const hitem = this.getHistorySelectedItem();
if (hitem == null) {
this.resetHistory();
return;
@ -498,9 +523,8 @@ class InputModel {
if (!this.isHistoryLoaded()) {
return;
}
let hitems = this.getFilteredHistoryItems();
let idx = this.historyIndex.get();
idx += amt;
const hitems = this.getFilteredHistoryItems();
let idx = this.historyIndex.get() + amt;
if (idx < 0) {
idx = 0;
}
@ -540,7 +564,6 @@ class InputModel {
}
setAIChatFocus() {
console.log("setting ai chat focus");
if (this.aiChatTextAreaRef?.current != null) {
this.aiChatTextAreaRef.current.focus();
}
@ -551,9 +574,8 @@ class InputModel {
this.codeSelectSelectedIndex.get() >= 0 &&
this.codeSelectSelectedIndex.get() < this.codeSelectBlockRefArray.length
) {
let curBlockRef = this.codeSelectBlockRefArray[this.codeSelectSelectedIndex.get()];
let codeText = curBlockRef.current.innerText;
codeText = codeText.replace(/\n$/, ""); // remove trailing newline
const curBlockRef = this.codeSelectBlockRefArray[this.codeSelectSelectedIndex.get()];
const codeText = curBlockRef.current.innerText.replace(/\n$/, ""); // remove trailing newline
this.setCurLine(codeText);
this.giveFocus();
}
@ -574,23 +596,21 @@ class InputModel {
mobx.action(() => {
if (blockIndex >= 0 && blockIndex < this.codeSelectBlockRefArray.length) {
this.codeSelectSelectedIndex.set(blockIndex);
let currentRef = this.codeSelectBlockRefArray[blockIndex].current;
if (currentRef != null) {
if (this.aiChatWindowRef?.current != null) {
let chatWindowTop = this.aiChatWindowRef.current.scrollTop;
let chatWindowBottom = chatWindowTop + this.aiChatWindowRef.current.clientHeight - 100;
let elemTop = currentRef.offsetTop;
let elemBottom = elemTop - currentRef.offsetHeight;
let elementIsInView = elemBottom < chatWindowBottom && elemTop > chatWindowTop;
if (!elementIsInView) {
this.aiChatWindowRef.current.scrollTop =
elemBottom - this.aiChatWindowRef.current.clientHeight / 3;
}
const currentRef = this.codeSelectBlockRefArray[blockIndex].current;
if (currentRef != null && this.aiChatWindowRef?.current != null) {
const chatWindowTop = this.aiChatWindowRef.current.scrollTop;
const chatWindowBottom = chatWindowTop + this.aiChatWindowRef.current.clientHeight - 100;
const elemTop = currentRef.offsetTop;
let elemBottom = elemTop - currentRef.offsetHeight;
const elementIsInView = elemBottom < chatWindowBottom && elemTop > chatWindowTop;
if (!elementIsInView) {
this.aiChatWindowRef.current.scrollTop =
elemBottom - this.aiChatWindowRef.current.clientHeight / 3;
}
}
this.codeSelectBlockRefArray = [];
this.setAIChatFocus();
}
this.codeSelectBlockRefArray = [];
this.setAIChatFocus();
})();
}
@ -603,7 +623,7 @@ class InputModel {
} else if (this.codeSelectSelectedIndex.get() == this.codeSelectBottom) {
return;
}
let incBlockIndex = this.codeSelectSelectedIndex.get() + 1;
const incBlockIndex = this.codeSelectSelectedIndex.get() + 1;
if (this.codeSelectSelectedIndex.get() == this.codeSelectBlockRefArray.length - 1) {
this.codeSelectDeselectAll();
if (this.aiChatWindowRef?.current != null) {
@ -627,7 +647,7 @@ class InputModel {
} else if (this.codeSelectSelectedIndex.get() == this.codeSelectTop) {
return;
}
let decBlockIndex = this.codeSelectSelectedIndex.get() - 1;
const decBlockIndex = this.codeSelectSelectedIndex.get() - 1;
if (decBlockIndex < 0) {
this.codeSelectDeselectAll(this.codeSelectTop);
if (this.aiChatWindowRef?.current != null) {
@ -666,6 +686,8 @@ class InputModel {
mobx.action(() => {
this.setInputPopUpType("aichat");
this.aIChatShow.set(true);
this.historyShow.set(false);
this.infoShow.set(false);
this.setAIChatFocus();
})();
}
@ -686,7 +708,7 @@ class InputModel {
}
clearAIAssistantChat(): void {
let prtn = this.globalModel.submitChatInfoCommand("", "", true);
const prtn = this.globalModel.submitChatInfoCommand("", "", true);
prtn.then((rtn) => {
if (!rtn.success) {
console.log("submit chat command error: " + rtn.error);
@ -700,11 +722,11 @@ class InputModel {
if (!this.infoShow.get()) {
return false;
}
let info = this.infoMsg.get();
const info = this.infoMsg.get();
if (info == null) {
return false;
}
let div = document.querySelector(".cmd-input-info");
const div = document.querySelector(".cmd-input-info");
if (div == null) {
return false;
}
@ -736,7 +758,7 @@ class InputModel {
this.setHistoryShow(false);
return;
}
let isShowing = this.infoShow.get();
const isShowing = this.infoShow.get();
if (isShowing) {
this.infoShow.set(false);
} else {
@ -750,7 +772,7 @@ class InputModel {
@boundMethod
uiSubmitCommand(): void {
mobx.action(() => {
let commandStr = this.getCurLine();
const commandStr = this.getCurLine();
if (commandStr.trim() == "") {
return;
}
@ -771,7 +793,7 @@ class InputModel {
}
setCurLine(val: string): void {
let hidx = this.historyIndex.get();
const hidx = this.historyIndex.get();
mobx.action(() => {
if (this.modHistory.length <= hidx) {
this.modHistory.length = hidx + 1;
@ -803,15 +825,15 @@ class InputModel {
}
getCurLine(): string {
let hidx = this.historyIndex.get();
const hidx = this.historyIndex.get();
if (hidx < this.modHistory.length && this.modHistory[hidx] != null) {
return this.modHistory[hidx];
}
let hitems = this.getFilteredHistoryItems();
const hitems = this.getFilteredHistoryItems();
if (hidx == 0 || hitems == null || hidx > hitems.length) {
return "";
}
let hitem = hitems[hidx - 1];
const hitem = hitems[hidx - 1];
if (hitem == null) {
return "";
}

20
src/util/textmeasure.ts
View File

@ -23,7 +23,7 @@ function getMonoFontSize(fontSize: number): MonoFontSize {
if (MonoFontSizes[fontSize] != null) {
return MonoFontSizes[fontSize];
}
let size = measureText("W", { pre: true, mono: true, fontSize: fontSize });
const size = measureText("W", { pre: true, mono: true, fontSize: fontSize });
if (size.height != 0 && size.width != 0) {
MonoFontSizes[fontSize] = size;
}
@ -38,7 +38,7 @@ function measureText(text: string, textOpts: { pre?: boolean; mono?: boolean; fo
if (textOpts == null) {
throw new Error("invalid textOpts passed to measureText (null)");
}
let textElem = document.createElement("span");
const textElem = document.createElement("span");
if (textOpts.pre) {
textElem.classList.add("pre");
}
@ -53,19 +53,19 @@ function measureText(text: string, textOpts: { pre?: boolean; mono?: boolean; fo
}
}
textElem.innerText = text;
let measureDiv = document.getElementById("measure");
const measureDiv = document.getElementById("measure");
if (measureDiv == null) {
throw new Error("cannot measure text, no #measure div");
}
measureDiv.replaceChildren(textElem);
let height = Math.ceil(textElem.offsetHeight);
let width = textElem.offsetWidth;
let pad = Math.floor(height / 2);
const height = Math.ceil(textElem.offsetHeight);
const width = textElem.offsetWidth;
const pad = Math.floor(height / 2);
return { width, height, pad, fontSize: textOpts.fontSize };
}
function windowWidthToCols(width: number, fontSize: number): number {
let dr = getMonoFontSize(fontSize);
const dr = getMonoFontSize(fontSize);
let cols = Math.trunc((width - MagicLayout.ScreenMaxContentWidthBuffer) / dr.width) - 1;
cols = boundInt(cols, MinTermCols, MaxTermCols);
return cols;
@ -80,7 +80,7 @@ function windowHeightToRows(lhe: LineHeightEnv, height: number): number {
}
function termWidthFromCols(cols: number, fontSize: number): number {
let dr = getMonoFontSize(fontSize);
const dr = getMonoFontSize(fontSize);
return Math.ceil(dr.width * cols) + MagicLayout.TermWidthBuffer;
}
@ -89,12 +89,12 @@ function termWidthFromCols(cols: number, fontSize: number): number {
// works out to `realHeight = round(ceil(height * dpr) * rows / dpr) / rows`
// their calculation is based off the "totalRows" (so that argument has been added)
function termHeightFromRows(rows: number, fontSize: number, totalRows: number): number {
let dr = getMonoFontSize(fontSize);
const dr = getMonoFontSize(fontSize);
const dpr = window.devicePixelRatio;
if (totalRows == null || totalRows == 0) {
totalRows = rows > 25 ? rows : 25;
}
let realHeight = Math.round((Math.ceil(dr.height * dpr) * totalRows) / dpr) / totalRows;
const realHeight = Math.round((Math.ceil(dr.height * dpr) * totalRows) / dpr) / totalRows;
return Math.ceil(realHeight * rows);
}