mirror of
https://github.com/wavetermdev/backup.git
synced 2026-04-22 15:26:58 -07:00
Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Evan Simkowitz
|
ac52ba33c3 |
+2
-4
@@ -49,10 +49,8 @@
|
||||
"tsx-control-statements": "^5.1.1",
|
||||
"uuid": "^9.0.0",
|
||||
"winston": "^3.8.2",
|
||||
"xterm": "^5.3.0",
|
||||
"xterm-addon-web-links": "^0.9.0",
|
||||
"xterm-addon-serialize": "^0.11.0",
|
||||
"xterm-addon-webgl": "^0.16.0"
|
||||
"xterm": "^5.0.0",
|
||||
"xterm-addon-web-links": "^0.9.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/cli": "^7.17.10",
|
||||
|
||||
+16
-18
@@ -42,19 +42,16 @@
|
||||
--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: rgb(51, 51, 51);
|
||||
--app-maincontent-bg-color: #333;
|
||||
--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: rgb(255, 255, 255);
|
||||
--app-icon-hover-color: #fff;
|
||||
--app-selected-mask-color: rgba(255, 255, 255, 0.06);
|
||||
|
||||
/* global status colors */
|
||||
@@ -90,7 +87,7 @@
|
||||
--form-element-border-color: rgba(241, 246, 243, 0.15);
|
||||
--form-element-bg-color: var(--app-bg-color);
|
||||
--form-element-text-color: var(--app-text-primary-color);
|
||||
--form-element-primary-text-color: var(--app-text-primary-color);
|
||||
--form-element-primary-text-color: var(--form-element-text-color);
|
||||
--form-element-label-color: var(--app-text-secondary-color);
|
||||
--form-element-primary-color: var(--app-accent-color);
|
||||
--form-element-secondary-color: rgba(255, 255, 255, 0.2);
|
||||
@@ -125,18 +122,18 @@
|
||||
|
||||
/* line colors */
|
||||
--line-sidebar-message-color: rgb(196, 160, 0);
|
||||
--line-background: var(--app-panel-bg-color);
|
||||
--line-avatar-color: rgb(236, 238, 236);
|
||||
--line-background: rgba(21, 23, 21, 1);
|
||||
--line-avatar-color: #eceeec;
|
||||
--line-text-color: rgb(211, 215, 207);
|
||||
--line-svg-fill-color: rgb(150, 152, 150);
|
||||
--line-svg-hover-fill-color: rgb(236, 238, 236);
|
||||
--line-svg-hover-fill-color: #eceeec;
|
||||
--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: rgb(114, 159, 207);
|
||||
--line-base-soft-blue-color: #729fcf;
|
||||
--line-active-border-color: var(--app-accent-color);
|
||||
--line-selected-bg-color: rgba(255, 255, 255, 0.05);
|
||||
--line-selected-border-left-color: rgb(119, 119, 119);
|
||||
--line-selected-border-left-color: #777777;
|
||||
--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);
|
||||
@@ -155,21 +152,22 @@
|
||||
/* 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: rgb(204, 204, 204);
|
||||
--table-thead-bright-border-color: #ccc;
|
||||
--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: rgb(34, 34, 34);
|
||||
--table-tr-selected-hover-bg-color: var(--app-maincontent-bg-color);
|
||||
--table-tr-selected-bg-color: #222;
|
||||
--table-tr-selected-hover-bg-color: #333;
|
||||
|
||||
/* cmdinput colors */
|
||||
--cmdinput-bg-color: var(--app-text-bg-color);
|
||||
--cmdinput-textarea-bg-color: #171717;
|
||||
--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: var(--tab-green);
|
||||
--cmdinput-disabled-bg-color: var(--app-text-bg-disabled-color);
|
||||
--cmdinput-history-bg-color: var(--app-bg-color);
|
||||
--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);
|
||||
|
||||
/* screen view color */
|
||||
--screen-view-text-caption-color: rgb(139, 145, 138);
|
||||
|
||||
+19
-17
@@ -5,20 +5,20 @@
|
||||
@import url("./term-light.css");
|
||||
|
||||
:root {
|
||||
--app-bg-color: rgb(254, 254, 254);
|
||||
--app-bg-color: #fefefe;
|
||||
--app-accent-color: rgb(75, 166, 57);
|
||||
--app-accent-bg-color: rgba(75, 166, 57, 0.2);
|
||||
--app-text-color: rgb(0, 0, 0);
|
||||
--app-text-color: #000;
|
||||
--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: 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-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-selected-mask-color: rgba(0, 0, 0, 0.06);
|
||||
|
||||
--input-bg-color: rgb(238, 238, 238);
|
||||
--input-bg-color: #eeeeee;
|
||||
|
||||
/* tab color */
|
||||
--tab-white: rgb(0, 0, 0, 0.6);
|
||||
@@ -30,19 +30,19 @@
|
||||
--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: rgb(221, 221, 221);
|
||||
--table-tr-selected-hover-bg-color: rgb(204, 204, 204);
|
||||
--table-tr-selected-bg-color: #dddddd;
|
||||
--table-tr-selected-hover-bg-color: #cccccc;
|
||||
|
||||
/* form colors */
|
||||
--form-element-border-color: rgba(0, 0, 0, 0.3);
|
||||
--form-element-bg-color: var(--app-bg-color);
|
||||
--form-element-text-color: var(--app-text-primary-color);
|
||||
--form-element-primary-text-color: var(--app-text-primary-color);
|
||||
--form-element-text-color: var(--app-text-color);
|
||||
--form-element-primary-text-color: var(--app-bg-color);
|
||||
--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: rgb(183, 183, 183);
|
||||
--form-element-placeholder-color: rgb(183, 183, 183);
|
||||
--form-element-disabled-text-color: #b7b7b7;
|
||||
--form-element-placeholder-color: #b7b7b7;
|
||||
|
||||
--markdown-bg-color: rgb(0, 0, 0, 0.1);
|
||||
|
||||
@@ -50,6 +50,8 @@
|
||||
--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);
|
||||
@@ -62,15 +64,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: rgb(240, 240, 240);
|
||||
--logo-button-hover-bg-color: #f0f0f0;
|
||||
|
||||
--xterm-viewport-border-color: rgba(0, 0, 0, 0.3);
|
||||
|
||||
--datepicker-cell-hover-bg-color: rgb(240, 240, 240);
|
||||
--datepicker-cell-hover-bg-color: #f0f0f0;
|
||||
--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: rgb(245, 245, 245);
|
||||
--datepicker-year-header-border-color: rgb(220, 220, 220);
|
||||
--datepicker-year-header-bg-color: #f5f5f5;
|
||||
--datepicker-year-header-border-color: #dcdcdc;
|
||||
|
||||
/* toggle colors */
|
||||
--toggle-thumb-color: var(--app-bg-color);
|
||||
|
||||
@@ -9,7 +9,6 @@ import { If } from "tsx-control-statements/components";
|
||||
import { GlobalModel, GlobalCommandRunner, RemotesModel, getApi } from "@/models";
|
||||
import { Toggle, InlineSettingsTextEdit, SettingsError, Dropdown } from "@/common/elements";
|
||||
import { commandRtnHandler, isBlank } from "@/util/util";
|
||||
import { getTermThemes } from "@/util/themeutil";
|
||||
import * as appconst from "@/app/appconst";
|
||||
|
||||
import "./clientsettings.less";
|
||||
@@ -74,19 +73,6 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
|
||||
commandRtnHandler(prtn, this.errorMessage);
|
||||
}
|
||||
|
||||
@boundMethod
|
||||
handleChangeTermTheme(theme: string): void {
|
||||
// For global terminal theme, the key is global, otherwise it's either
|
||||
// sessionId or screenId.
|
||||
const currTheme = GlobalModel.getTermTheme()["global"];
|
||||
if (currTheme == theme) {
|
||||
return;
|
||||
}
|
||||
|
||||
const prtn = GlobalCommandRunner.setGlobalTermTheme(theme, false);
|
||||
commandRtnHandler(prtn, this.errorMessage);
|
||||
}
|
||||
|
||||
@boundMethod
|
||||
handleChangeTelemetry(val: boolean): void {
|
||||
let prtn: Promise<CommandRtnType> = null;
|
||||
@@ -207,8 +193,6 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
|
||||
const curFontSize = GlobalModel.getTermFontSize();
|
||||
const curFontFamily = GlobalModel.getTermFontFamily();
|
||||
const curTheme = GlobalModel.getThemeSource();
|
||||
const termThemes = getTermThemes(GlobalModel.termThemes, "Wave Default");
|
||||
const currTermTheme = GlobalModel.getTermTheme()["global"] ?? termThemes[0].label;
|
||||
|
||||
return (
|
||||
<MainView className="clientsettings-view" title="Client Settings" onClose={this.handleClose}>
|
||||
@@ -249,19 +233,6 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<If condition={termThemes.length > 0}>
|
||||
<div className="settings-field">
|
||||
<div className="settings-label">Terminal Theme</div>
|
||||
<div className="settings-input">
|
||||
<Dropdown
|
||||
className="terminal-theme-dropdown"
|
||||
options={termThemes}
|
||||
defaultValue={currTermTheme}
|
||||
onChange={this.handleChangeTermTheme}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</If>
|
||||
<div className="settings-field">
|
||||
<div className="settings-label">Client ID</div>
|
||||
<div className="settings-input">{cdata.clientid}</div>
|
||||
|
||||
@@ -27,10 +27,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
&.primary.danger {
|
||||
background: var(--app-error-color);
|
||||
}
|
||||
|
||||
&.primary.outlined {
|
||||
background: none;
|
||||
border: 1px solid var(--form-element-primary-color);
|
||||
@@ -40,37 +36,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
&.primary.greyoutlined {
|
||||
background: none;
|
||||
border: 1px solid var(--app-text-secondary-color);
|
||||
|
||||
i {
|
||||
fill: var(--app-text-secondary-color);
|
||||
}
|
||||
}
|
||||
|
||||
&.primary.outlined,
|
||||
&.primary.greyoutlined {
|
||||
&.hover-danger:hover {
|
||||
color: var(--form-element-primary-text-color);
|
||||
border: 1px solid var(--app-error-color);
|
||||
background: var(--app-error-color);
|
||||
}
|
||||
}
|
||||
|
||||
&.primary.outlined.danger {
|
||||
background: none;
|
||||
border: 1px solid var(--app-error-color);
|
||||
|
||||
i {
|
||||
fill: var(--app-error-color);
|
||||
}
|
||||
}
|
||||
|
||||
&.greytext {
|
||||
color: var(--app-text-secondary-color);
|
||||
}
|
||||
|
||||
&.primary.ghost {
|
||||
background: none;
|
||||
i {
|
||||
@@ -78,13 +43,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
&.primary.ghost.danger {
|
||||
background: none;
|
||||
i {
|
||||
fill: var(--app-error-color);
|
||||
}
|
||||
}
|
||||
|
||||
&.secondary {
|
||||
color: var(--form-element-text-color);
|
||||
background: var(--form-element-secondary-color);
|
||||
@@ -98,11 +56,6 @@
|
||||
border: 1px solid var(--form-element-text-color);
|
||||
}
|
||||
|
||||
&.secondary.outlined.danger {
|
||||
background: none;
|
||||
border: 1px solid var(--app-error-color);
|
||||
}
|
||||
|
||||
&.secondary.ghost {
|
||||
background: none;
|
||||
}
|
||||
|
||||
@@ -25,6 +25,7 @@ const DatePicker: React.FC<DatePickerProps> = ({ selectedDate, format = "MM/DD/Y
|
||||
const [selDate, setSelDate] = useState(dayjs(selectedDate)); // Initialize with dayjs object
|
||||
const [showYearAccordion, setShowYearAccordion] = useState(false);
|
||||
const [expandedYear, setExpandedYear] = useState<number | null>(selDate.year());
|
||||
const [selectionTimeoutId, setSelectionTimeoutId] = useState<string | number | NodeJS.Timeout | null>(null);
|
||||
const yearRefs = useRef<YearRefs>({});
|
||||
const wrapperRef = useRef<HTMLDivElement>(null);
|
||||
const modalRef = useRef<HTMLDivElement>(null);
|
||||
@@ -301,24 +302,51 @@ const DatePicker: React.FC<DatePickerProps> = ({ selectedDate, format = "MM/DD/Y
|
||||
: null;
|
||||
|
||||
const handleDatePartChange = (part: string, value: string) => {
|
||||
console.log("Date part changed: ", part, value);
|
||||
const newDateParts = { ...dateParts, [part]: value };
|
||||
setDateParts(newDateParts);
|
||||
|
||||
console.log("New date parts: ", newDateParts);
|
||||
// Construct a new date from the updated parts
|
||||
const newDate = dayjs(`${newDateParts.YYYY}-${newDateParts.MM}-${newDateParts.DD}`);
|
||||
if (newDate.isValid()) {
|
||||
onSelectDate(newDate.toDate()); // Call onSelectDate with the new date
|
||||
setSelDate(newDate); // Update selDate with the new dayjs object
|
||||
} else {
|
||||
console.log("Invalid date");
|
||||
setSelDate(dayjs(new Date()));
|
||||
}
|
||||
onSelectDate(selDate.toDate()); // Call onSelectDate with the new date
|
||||
};
|
||||
|
||||
const handleArrowNavigation = (key: string, currentPart: string) => {
|
||||
console.log("Arrow key pressed: ", key);
|
||||
const currentIndex = formatParts.indexOf(currentPart);
|
||||
let targetInput;
|
||||
|
||||
const incrementInput = (part: string, increment: number) => {
|
||||
let newValue = parseInt(dateParts[part]) + increment;
|
||||
switch (part) {
|
||||
case "MM":
|
||||
newValue = newValue > 12 ? 1 : newValue < 1 ? 12 : newValue;
|
||||
break;
|
||||
case "DD":
|
||||
const daysInMonth = dayjs(selDate).daysInMonth();
|
||||
console.log("Days in month: ", daysInMonth);
|
||||
newValue = newValue > daysInMonth ? 1 : newValue < 1 ? daysInMonth : newValue;
|
||||
break;
|
||||
case "YYYY":
|
||||
// No bounds for year
|
||||
break;
|
||||
}
|
||||
handleDatePartChange(part, newValue.toString());
|
||||
};
|
||||
|
||||
if (key == "ArrowLeft" && currentIndex > 0) {
|
||||
targetInput = inputRefs.current[formatParts[currentIndex - 1]].current;
|
||||
} else if (key == "ArrowRight" && currentIndex < formatParts.length - 1) {
|
||||
targetInput = inputRefs.current[formatParts[currentIndex + 1]].current;
|
||||
} else if (key == "ArrowUp") {
|
||||
incrementInput(currentPart, 1);
|
||||
} else if (key == "ArrowDown") {
|
||||
incrementInput(currentPart, -1);
|
||||
}
|
||||
|
||||
if (targetInput) {
|
||||
@@ -350,6 +378,14 @@ const DatePicker: React.FC<DatePickerProps> = ({ selectedDate, format = "MM/DD/Y
|
||||
handleArrowNavigation("ArrowRight", part);
|
||||
return true;
|
||||
});
|
||||
keybindManager.registerKeybinding("control", domain, "generic:selectAbove", (_) => {
|
||||
handleArrowNavigation("ArrowUp", part);
|
||||
return true;
|
||||
});
|
||||
keybindManager.registerKeybinding("control", domain, "generic:selectBelow", (_) => {
|
||||
handleArrowNavigation("ArrowDown", part);
|
||||
return true;
|
||||
});
|
||||
keybindManager.registerKeybinding("control", domain, "generic:space", (_) => {
|
||||
toggleModal();
|
||||
return true;
|
||||
@@ -368,10 +404,10 @@ const DatePicker: React.FC<DatePickerProps> = ({ selectedDate, format = "MM/DD/Y
|
||||
});
|
||||
for (let numpadKey = 0; numpadKey <= 9; numpadKey++) {
|
||||
keybindManager.registerKeybinding("control", domain, "generic:numpad-" + numpadKey.toString(), (_) => {
|
||||
console.log("Numpad key pressed: ", numpadKey);
|
||||
const currentPart = part;
|
||||
const maxLength = currentPart === "YYYY" ? 4 : 2;
|
||||
const newValue = event.target.value.length < maxLength ? event.target.value + numpadKey : numpadKey;
|
||||
let selectionTimeoutId = null;
|
||||
handleDatePartChange(currentPart, newValue);
|
||||
|
||||
// Clear any existing timeout
|
||||
@@ -380,10 +416,12 @@ const DatePicker: React.FC<DatePickerProps> = ({ selectedDate, format = "MM/DD/Y
|
||||
}
|
||||
|
||||
// Re-focus and select the input after state update
|
||||
selectionTimeoutId = setTimeout(() => {
|
||||
event.target.focus();
|
||||
event.target.select();
|
||||
}, 0);
|
||||
setSelectionTimeoutId(
|
||||
setTimeout(() => {
|
||||
event.target.focus();
|
||||
event.target.select();
|
||||
}, 0)
|
||||
);
|
||||
return true;
|
||||
});
|
||||
}
|
||||
|
||||
@@ -53,7 +53,7 @@ class Dropdown extends React.Component<DropdownProps, DropdownState> {
|
||||
};
|
||||
this.wrapperRef = React.createRef();
|
||||
this.menuRef = React.createRef();
|
||||
this.curUuid = uuidv4();
|
||||
this.curUuid == uuidv4();
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
@@ -100,9 +100,6 @@ class Dropdown extends React.Component<DropdownProps, DropdownState> {
|
||||
|
||||
@boundMethod
|
||||
handleClick() {
|
||||
if (!this.state.isOpen || !this.state.isTouched) {
|
||||
this.registerKeybindings();
|
||||
}
|
||||
this.toggleDropdown();
|
||||
}
|
||||
|
||||
@@ -112,7 +109,6 @@ class Dropdown extends React.Component<DropdownProps, DropdownState> {
|
||||
this.registerKeybindings();
|
||||
}
|
||||
|
||||
@boundMethod
|
||||
registerKeybindings() {
|
||||
let keybindManager = GlobalModel.keybindManager;
|
||||
let domain = "dropdown-" + this.curUuid;
|
||||
@@ -126,7 +122,6 @@ class Dropdown extends React.Component<DropdownProps, DropdownState> {
|
||||
});
|
||||
keybindManager.registerKeybinding("control", domain, "generic:cancel", (waveEvent) => {
|
||||
this.setState({ isOpen: false });
|
||||
this.unregisterKeybindings();
|
||||
return true;
|
||||
});
|
||||
keybindManager.registerKeybinding("control", domain, "generic:selectAbove", (waveEvent) => {
|
||||
@@ -170,12 +165,10 @@ class Dropdown extends React.Component<DropdownProps, DropdownState> {
|
||||
}
|
||||
}
|
||||
|
||||
@boundMethod
|
||||
handleBlur() {
|
||||
this.unregisterKeybindings();
|
||||
}
|
||||
|
||||
@boundMethod
|
||||
unregisterKeybindings() {
|
||||
let domain = "dropdown-" + this.curUuid;
|
||||
GlobalModel.keybindManager.unregisterDomain(domain);
|
||||
@@ -196,7 +189,6 @@ class Dropdown extends React.Component<DropdownProps, DropdownState> {
|
||||
}
|
||||
onChange(value);
|
||||
this.setState({ isOpen: false, isTouched: true });
|
||||
this.unregisterKeybindings();
|
||||
}
|
||||
|
||||
@boundMethod
|
||||
|
||||
@@ -7,10 +7,8 @@ import ReactMarkdown from "react-markdown";
|
||||
import remarkGfm from "remark-gfm";
|
||||
import cn from "classnames";
|
||||
import { GlobalModel } from "@/models";
|
||||
import { v4 as uuidv4 } from "uuid";
|
||||
|
||||
import "./markdown.less";
|
||||
import { boundMethod } from "autobind-decorator";
|
||||
|
||||
function LinkRenderer(props: any): any {
|
||||
let newUrl = "https://extern?" + encodeURIComponent(props.href);
|
||||
@@ -30,17 +28,14 @@ function CodeRenderer(props: any): any {
|
||||
}
|
||||
|
||||
@mobxReact.observer
|
||||
class CodeBlockMarkdown extends React.Component<
|
||||
{ children: React.ReactNode; codeSelectSelectedIndex?: number; uuid: string },
|
||||
{}
|
||||
> {
|
||||
class CodeBlockMarkdown extends React.Component<{ children: React.ReactNode; codeSelectSelectedIndex?: number }, {}> {
|
||||
blockIndex: number;
|
||||
blockRef: React.RefObject<HTMLPreElement>;
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.blockRef = React.createRef();
|
||||
this.blockIndex = GlobalModel.inputModel.addCodeBlockToCodeSelect(this.blockRef, this.props.uuid);
|
||||
this.blockIndex = GlobalModel.inputModel.addCodeBlockToCodeSelect(this.blockRef);
|
||||
}
|
||||
|
||||
render() {
|
||||
@@ -67,21 +62,9 @@ class Markdown extends React.Component<
|
||||
{ text: string; style?: any; extraClassName?: string; codeSelect?: boolean },
|
||||
{}
|
||||
> {
|
||||
curUuid: string;
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.curUuid = uuidv4();
|
||||
}
|
||||
|
||||
@boundMethod
|
||||
CodeBlockRenderer(props: any, codeSelect: boolean, codeSelectIndex: number, curUuid: string): any {
|
||||
CodeBlockRenderer(props: any, codeSelect: boolean, codeSelectIndex: number): any {
|
||||
if (codeSelect) {
|
||||
return (
|
||||
<CodeBlockMarkdown codeSelectSelectedIndex={codeSelectIndex} uuid={curUuid}>
|
||||
{props.children}
|
||||
</CodeBlockMarkdown>
|
||||
);
|
||||
return <CodeBlockMarkdown codeSelectSelectedIndex={codeSelectIndex}>{props.children}</CodeBlockMarkdown>;
|
||||
} else {
|
||||
const clickHandler = (e: React.MouseEvent<HTMLElement>) => {
|
||||
let blockText = (e.target as HTMLElement).innerText;
|
||||
@@ -107,7 +90,7 @@ class Markdown extends React.Component<
|
||||
h5: (props) => HeaderRenderer(props, 5),
|
||||
h6: (props) => HeaderRenderer(props, 6),
|
||||
code: (props) => CodeRenderer(props),
|
||||
pre: (props) => this.CodeBlockRenderer(props, codeSelect, curCodeSelectIndex, this.curUuid),
|
||||
pre: (props) => this.CodeBlockRenderer(props, codeSelect, curCodeSelectIndex),
|
||||
};
|
||||
return (
|
||||
<div className={cn("markdown content", this.props.extraClassName)} style={this.props.style}>
|
||||
|
||||
@@ -1,16 +0,0 @@
|
||||
import { OverlayScrollbarsComponentProps, useOverlayScrollbars } from "overlayscrollbars-react";
|
||||
import React from "react";
|
||||
|
||||
export const ScrollbarsComponent = (props: {
|
||||
options?: OverlayScrollbarsComponentProps["options"];
|
||||
children: React.ReactNode;
|
||||
childrenRef: React.RefObject<any>;
|
||||
}) => {
|
||||
const [initialize, instance] = useOverlayScrollbars({ options: props.options });
|
||||
|
||||
React.useEffect(() => {
|
||||
initialize(props.childrenRef.current);
|
||||
}, [initialize, props.childrenRef.current]);
|
||||
|
||||
return <div ref={props.childrenRef}>{props.children}</div>;
|
||||
};
|
||||
@@ -11,9 +11,8 @@ import { GlobalModel, GlobalCommandRunner, Screen } from "@/models";
|
||||
import { SettingsError, Modal, Dropdown, Tooltip } from "@/elements";
|
||||
import * as util from "@/util/util";
|
||||
import { Button } from "@/elements";
|
||||
import { If } from "tsx-control-statements/components";
|
||||
import { commandRtnHandler } from "@/util/util";
|
||||
import { getTermThemes } from "@/util/themeutil";
|
||||
import { ReactComponent as GlobeIcon } from "@/assets/icons/globe.svg";
|
||||
import { ReactComponent as StatusCircleIcon } from "@/assets/icons/statuscircle.svg";
|
||||
import {
|
||||
TabColorSelector,
|
||||
TabIconSelector,
|
||||
@@ -154,34 +153,11 @@ class ScreenSettingsModal extends React.Component<{}, {}> {
|
||||
});
|
||||
}
|
||||
|
||||
@boundMethod
|
||||
handleChangeTermTheme(theme: string): void {
|
||||
const currTheme = GlobalModel.getTermTheme()[this.screenId];
|
||||
if (currTheme == theme) {
|
||||
return;
|
||||
}
|
||||
const prtn = GlobalCommandRunner.setScreenTermTheme(this.screenId, theme, false);
|
||||
commandRtnHandler(prtn, this.errorMessage);
|
||||
}
|
||||
|
||||
@boundMethod
|
||||
selectRemote(cname: string): void {
|
||||
let prtn = GlobalCommandRunner.screenSetRemote(cname, true, false);
|
||||
util.commandRtnHandler(prtn, this.errorMessage);
|
||||
}
|
||||
|
||||
render() {
|
||||
const screen = this.screen;
|
||||
if (screen == null) {
|
||||
return null;
|
||||
}
|
||||
let color: string = null;
|
||||
let icon: string = null;
|
||||
let index: number = 0;
|
||||
const curRemote = GlobalModel.getRemote(GlobalModel.getActiveScreen().getCurRemoteInstance().remoteid);
|
||||
const termThemes = getTermThemes(GlobalModel.termThemes);
|
||||
const currTermTheme = GlobalModel.getTermTheme()[this.screenId] ?? termThemes[0].label;
|
||||
|
||||
return (
|
||||
<Modal className="screen-settings-modal">
|
||||
<Modal.Header onClose={this.closeModal} title={`Tab Settings (${screen.name.get()})`} />
|
||||
@@ -210,19 +186,6 @@ class ScreenSettingsModal extends React.Component<{}, {}> {
|
||||
<TabIconSelector screen={screen} errorMessage={this.errorMessage} />
|
||||
</div>
|
||||
</div>
|
||||
<If condition={termThemes.length > 0}>
|
||||
<div className="settings-field">
|
||||
<div className="settings-label">Terminal Theme</div>
|
||||
<div className="settings-input">
|
||||
<Dropdown
|
||||
className="terminal-theme-dropdown"
|
||||
options={termThemes}
|
||||
defaultValue={currTermTheme}
|
||||
onChange={this.handleChangeTermTheme}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</If>
|
||||
<div className="settings-field">
|
||||
<div className="settings-label actions-label">
|
||||
<div>Actions</div>
|
||||
|
||||
@@ -6,10 +6,8 @@ import * as mobxReact from "mobx-react";
|
||||
import * as mobx from "mobx";
|
||||
import { boundMethod } from "autobind-decorator";
|
||||
import { GlobalModel, GlobalCommandRunner, Session } from "@/models";
|
||||
import { If } from "tsx-control-statements/components";
|
||||
import { Toggle, InlineSettingsTextEdit, SettingsError, Modal, Tooltip, Button, Dropdown } from "@/elements";
|
||||
import { commandRtnHandler } from "@/util/util";
|
||||
import { getTermThemes } from "@/util/themeutil";
|
||||
import { Button } from "@/elements";
|
||||
import { Toggle, InlineSettingsTextEdit, SettingsError, Modal, Tooltip } from "@/elements";
|
||||
import * as util from "@/util/util";
|
||||
|
||||
import "./sessionsettings.less";
|
||||
@@ -78,16 +76,6 @@ class SessionSettingsModal extends React.Component<{}, {}> {
|
||||
});
|
||||
}
|
||||
|
||||
@boundMethod
|
||||
handleChangeTermTheme(theme: string): void {
|
||||
const currTheme = GlobalModel.getTermTheme()[this.sessionId];
|
||||
if (currTheme == theme) {
|
||||
return;
|
||||
}
|
||||
const prtn = GlobalCommandRunner.setSessionTermTheme(this.sessionId, theme, false);
|
||||
commandRtnHandler(prtn, this.errorMessage);
|
||||
}
|
||||
|
||||
@boundMethod
|
||||
dismissError(): void {
|
||||
mobx.action(() => {
|
||||
@@ -99,9 +87,6 @@ class SessionSettingsModal extends React.Component<{}, {}> {
|
||||
if (this.session == null) {
|
||||
return null;
|
||||
}
|
||||
const termThemes = getTermThemes(GlobalModel.termThemes);
|
||||
const currTermTheme = GlobalModel.getTermTheme()[this.sessionId] ?? termThemes[0].label;
|
||||
|
||||
return (
|
||||
<Modal className="session-settings-modal">
|
||||
<Modal.Header onClose={this.closeModal} title={`Workspace Settings (${this.session.name.get()})`} />
|
||||
@@ -119,19 +104,6 @@ class SessionSettingsModal extends React.Component<{}, {}> {
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<If condition={termThemes.length > 0}>
|
||||
<div className="settings-field">
|
||||
<div className="settings-label">Terminal Theme</div>
|
||||
<div className="settings-input">
|
||||
<Dropdown
|
||||
className="terminal-theme-dropdown"
|
||||
options={termThemes}
|
||||
defaultValue={currTermTheme}
|
||||
onChange={this.handleChangeTermTheme}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</If>
|
||||
<div className="settings-field">
|
||||
<div className="settings-label">
|
||||
<div>Archived</div>
|
||||
|
||||
@@ -308,6 +308,7 @@ class HistoryView extends React.Component<{}, {}> {
|
||||
hvm.setFromDate(null);
|
||||
return;
|
||||
}
|
||||
console.log;
|
||||
hvm.setFromDate(newDate);
|
||||
}
|
||||
|
||||
@@ -485,10 +486,10 @@ class HistoryView extends React.Component<{}, {}> {
|
||||
options={this.getRemoteItems(rnames, remoteIds)}
|
||||
onChange={this.clickLimitRemote}
|
||||
/>
|
||||
{/* <div className="fromts">
|
||||
<div className="fromts">
|
||||
<div className="fromts-text">From: </div>
|
||||
<DatePicker selectedDate={new Date()} onSelectDate={this.handleFromTsChange} />
|
||||
</div> */}
|
||||
</div>
|
||||
<div
|
||||
className="filter-cmds search-checkbox hoverEffect"
|
||||
title="Filter common commands like 'ls' and 'cd' from the results"
|
||||
@@ -669,11 +670,6 @@ class LineContainer extends React.Component<{ historyId: string; width: number }
|
||||
this.line = hvm.getLineById(this.historyItem.lineid);
|
||||
}
|
||||
|
||||
componentDidMount(): void {
|
||||
GlobalModel.bumpTermRenderVersion();
|
||||
GlobalModel.termThemeSrcEl.set(null);
|
||||
}
|
||||
|
||||
@boundMethod
|
||||
handleHeightChange(lineNum: number, newHeight: number, oldHeight: number): void {
|
||||
return;
|
||||
@@ -714,9 +710,8 @@ class LineContainer extends React.Component<{ historyId: string; width: number }
|
||||
ssStr = sprintf("#%s[%s]", session.name.get(), screen.name.get());
|
||||
canViewInContext = true;
|
||||
}
|
||||
const termRenderVersion = GlobalModel.termRenderVersion.get();
|
||||
return (
|
||||
<div className="line-container" key={termRenderVersion}>
|
||||
<div className="line-container">
|
||||
<If condition={canViewInContext}>
|
||||
<div className="line-context">
|
||||
<div title="View in Context" className="vic-btn" onClick={this.viewInContext}>
|
||||
|
||||
@@ -106,6 +106,11 @@
|
||||
}
|
||||
}
|
||||
|
||||
&.top-border {
|
||||
border-top: 1px solid #777;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
&:hover .meta .termopts {
|
||||
display: block;
|
||||
}
|
||||
|
||||
+145
-156
@@ -8,7 +8,7 @@ import { sprintf } from "sprintf-js";
|
||||
import { boundMethod } from "autobind-decorator";
|
||||
import dayjs from "dayjs";
|
||||
import localizedFormat from "dayjs/plugin/localizedFormat";
|
||||
import { Choose, If, Otherwise, When } from "tsx-control-statements/components";
|
||||
import { If } from "tsx-control-statements/components";
|
||||
import { GlobalModel, GlobalCommandRunner, Cmd } from "@/models";
|
||||
import { termHeightFromRows } from "@/util/textmeasure";
|
||||
import cn from "classnames";
|
||||
@@ -25,22 +25,23 @@ import * as lineutil from "./lineutil";
|
||||
import { ErrorBoundary } from "@/common/error/errorboundary";
|
||||
import * as appconst from "@/app/appconst";
|
||||
import * as util from "@/util/util";
|
||||
import * as textmeasure from "@/util/textmeasure";
|
||||
|
||||
import "./line.less";
|
||||
import { RotateIcon } from "../common/icons/icons";
|
||||
import { CenteredIcon, RotateIcon } from "../common/icons/icons";
|
||||
|
||||
const DebugHeightProblems = false;
|
||||
const MinLine = 0;
|
||||
const MaxLine = 1000;
|
||||
const heightLog = {};
|
||||
let heightLog = {};
|
||||
(window as any).heightLog = heightLog;
|
||||
(window as any).findHeightProblems = function () {
|
||||
for (const linenum in heightLog) {
|
||||
const lh = heightLog[linenum];
|
||||
for (let linenum in heightLog) {
|
||||
let lh = heightLog[linenum];
|
||||
if (lh.heightArr == null || lh.heightArr.length < 2) {
|
||||
continue;
|
||||
}
|
||||
const firstHeight = lh.heightArr[0];
|
||||
let firstHeight = lh.heightArr[0];
|
||||
for (let i = 1; i < lh.heightArr.length; i++) {
|
||||
if (lh.heightArr[i] != firstHeight) {
|
||||
console.log("line", linenum, "heights", lh.heightArr);
|
||||
@@ -56,7 +57,7 @@ function cmdShouldMarkError(cmd: Cmd): boolean {
|
||||
if (cmd.getStatus() == "error") {
|
||||
return true;
|
||||
}
|
||||
const exitCode = cmd.getExitCode();
|
||||
let exitCode = cmd.getExitCode();
|
||||
// 0, SIGINT, or SIGPIPE
|
||||
if (exitCode == 0 || exitCode == 130 || exitCode == 141) {
|
||||
return false;
|
||||
@@ -141,7 +142,7 @@ class LineActions extends React.Component<{ screen: LineContainerType; line: Lin
|
||||
handleLineSettings(e: any): void {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
const { line } = this.props;
|
||||
let { line } = this.props;
|
||||
if (line != null) {
|
||||
mobx.action(() => {
|
||||
GlobalModel.lineSettingsModal.set(line.linenum);
|
||||
@@ -151,89 +152,74 @@ class LineActions extends React.Component<{ screen: LineContainerType; line: Lin
|
||||
}
|
||||
|
||||
render() {
|
||||
const { line, screen } = this.props;
|
||||
let { line, screen } = this.props;
|
||||
const isMinimized = line.linestate["wave:min"];
|
||||
const containerType = screen.getContainerType();
|
||||
return (
|
||||
<div className="line-actions">
|
||||
<Choose>
|
||||
<When condition={containerType == appconst.LineContainer_Main}>
|
||||
<div key="restart" title="Restart Command" className="line-icon" onClick={this.clickRestart}>
|
||||
<i className="fa-sharp fa-regular fa-arrows-rotate fa-fw" />
|
||||
</div>
|
||||
<div
|
||||
key="delete"
|
||||
title="Delete Line (⌘D)"
|
||||
className="line-icon"
|
||||
onClick={this.clickDelete}
|
||||
>
|
||||
<i className="fa-sharp fa-regular fa-trash fa-fw" />
|
||||
</div>
|
||||
<div
|
||||
key="bookmark"
|
||||
title="Bookmark"
|
||||
className={cn("line-icon", "line-bookmark")}
|
||||
onClick={this.clickBookmark}
|
||||
>
|
||||
<i className="fa-sharp fa-regular fa-bookmark fa-fw" />
|
||||
</div>
|
||||
<div
|
||||
key="minimize"
|
||||
title={`${isMinimized ? "Show Output" : "Hide Output"}`}
|
||||
className={cn("line-icon", isMinimized ? "active" : "")}
|
||||
onClick={this.clickMinimize}
|
||||
>
|
||||
<Choose>
|
||||
<When condition={isMinimized}>
|
||||
<i className="fa-sharp fa-regular fa-circle-plus fa-fw" />
|
||||
</When>
|
||||
<Otherwise>
|
||||
<i className="fa-sharp fa-regular fa-circle-minus fa-fw" />
|
||||
</Otherwise>
|
||||
</Choose>
|
||||
</div>
|
||||
<div
|
||||
className="line-icon line-sidebar"
|
||||
onClick={this.clickMoveToSidebar}
|
||||
title="Move to Sidebar"
|
||||
>
|
||||
<i className="fa-sharp fa-solid fa-right-to-line fa-fw" />
|
||||
</div>
|
||||
<div
|
||||
key="settings"
|
||||
title="Line Settings"
|
||||
className="line-icon line-icon-shrink-left"
|
||||
onClick={this.handleLineSettings}
|
||||
>
|
||||
<i className="fa-sharp fa-regular fa-ellipsis-vertical fa-fw" />
|
||||
</div>
|
||||
</When>
|
||||
<When condition={containerType == appconst.LineContainer_Sidebar}>
|
||||
<div
|
||||
key="delete"
|
||||
title="Delete Line (⌘D)"
|
||||
className="line-icon"
|
||||
onClick={this.clickDelete}
|
||||
>
|
||||
<i className="fa-sharp fa-regular fa-trash fa-fw" />
|
||||
</div>
|
||||
<div
|
||||
key="bookmark"
|
||||
title="Bookmark"
|
||||
className={cn("line-icon", "line-bookmark")}
|
||||
onClick={this.clickBookmark}
|
||||
>
|
||||
<i className="fa-sharp fa-regular fa-bookmark fa-fw" />
|
||||
</div>
|
||||
<div
|
||||
className="line-icon line-sidebar"
|
||||
onClick={this.clickRemoveFromSidebar}
|
||||
title="Move to Sidebar"
|
||||
>
|
||||
<i className="fa-sharp fa-solid fa-left-to-line fa-fw" />
|
||||
</div>
|
||||
</When>
|
||||
</Choose>
|
||||
<If condition={containerType == appconst.LineContainer_Main}>
|
||||
<div key="restart" title="Restart Command" className="line-icon" onClick={this.clickRestart}>
|
||||
<i className="fa-sharp fa-regular fa-arrows-rotate fa-fw" />
|
||||
</div>
|
||||
<div key="delete" title="Delete Line (⌘D)" className="line-icon" onClick={this.clickDelete}>
|
||||
<i className="fa-sharp fa-regular fa-trash fa-fw" />
|
||||
</div>
|
||||
<div
|
||||
key="bookmark"
|
||||
title="Bookmark"
|
||||
className={cn("line-icon", "line-bookmark")}
|
||||
onClick={this.clickBookmark}
|
||||
>
|
||||
<i className="fa-sharp fa-regular fa-bookmark fa-fw" />
|
||||
</div>
|
||||
<div
|
||||
key="minimize"
|
||||
title={`${isMinimized ? "Show Output" : "Hide Output"}`}
|
||||
className={cn("line-icon", isMinimized ? "active" : "")}
|
||||
onClick={this.clickMinimize}
|
||||
>
|
||||
<If condition={isMinimized}>
|
||||
<i className="fa-sharp fa-regular fa-circle-plus fa-fw" />
|
||||
</If>
|
||||
<If condition={!isMinimized}>
|
||||
<i className="fa-sharp fa-regular fa-circle-minus fa-fw" />
|
||||
</If>
|
||||
</div>
|
||||
<div className="line-icon line-sidebar" onClick={this.clickMoveToSidebar} title="Move to Sidebar">
|
||||
<i className="fa-sharp fa-solid fa-right-to-line fa-fw" />
|
||||
</div>
|
||||
<div
|
||||
key="settings"
|
||||
title="Line Settings"
|
||||
className="line-icon line-icon-shrink-left"
|
||||
onClick={this.handleLineSettings}
|
||||
>
|
||||
<i className="fa-sharp fa-regular fa-ellipsis-vertical fa-fw" />
|
||||
</div>
|
||||
</If>
|
||||
<If condition={containerType == appconst.LineContainer_Sidebar}>
|
||||
<div key="restart" title="Restart Command" className="line-icon" onClick={this.clickRestart}>
|
||||
<i className="fa-sharp fa-regular fa-arrows-rotate fa-fw" />
|
||||
</div>
|
||||
<div key="delete" title="Delete Line (⌘D)" className="line-icon" onClick={this.clickDelete}>
|
||||
<i className="fa-sharp fa-regular fa-trash fa-fw" />
|
||||
</div>
|
||||
<div
|
||||
key="bookmark"
|
||||
title="Bookmark"
|
||||
className={cn("line-icon", "line-bookmark")}
|
||||
onClick={this.clickBookmark}
|
||||
>
|
||||
<i className="fa-sharp fa-regular fa-bookmark fa-fw" />
|
||||
</div>
|
||||
<div
|
||||
className="line-icon line-sidebar"
|
||||
onClick={this.clickRemoveFromSidebar}
|
||||
title="Move to Sidebar"
|
||||
>
|
||||
<i className="fa-sharp fa-solid fa-left-to-line fa-fw" />
|
||||
</div>
|
||||
</If>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -268,9 +254,9 @@ class LineHeader extends React.Component<{ screen: LineContainerType; line: Line
|
||||
}
|
||||
|
||||
renderMeta1(cmd: Cmd) {
|
||||
const { line } = this.props;
|
||||
let { line } = this.props;
|
||||
let formattedTime: string = "";
|
||||
const restartTs = cmd.getRestartTs();
|
||||
let restartTs = cmd.getRestartTs();
|
||||
let timeTitle: string = null;
|
||||
if (restartTs != null && restartTs > 0) {
|
||||
formattedTime = "restarted @ " + lineutil.getLineDateTimeStr(restartTs);
|
||||
@@ -278,8 +264,8 @@ class LineHeader extends React.Component<{ screen: LineContainerType; line: Line
|
||||
} else {
|
||||
formattedTime = lineutil.getLineDateTimeStr(line.ts);
|
||||
}
|
||||
const renderer = line.renderer;
|
||||
const durationMs = cmd.getDurationMs();
|
||||
let renderer = line.renderer;
|
||||
let durationMs = cmd.getDurationMs();
|
||||
return (
|
||||
<div key="meta1" className="meta meta-line1">
|
||||
<SmallLineAvatar line={line} cmd={cmd} />
|
||||
@@ -301,7 +287,7 @@ class LineHeader extends React.Component<{ screen: LineContainerType; line: Line
|
||||
}
|
||||
|
||||
render() {
|
||||
const { line, cmd } = this.props;
|
||||
let { line, cmd } = this.props;
|
||||
const hidePrompt = getIsHidePrompt(line);
|
||||
return (
|
||||
<div key="header" className={cn("line-header", { "hide-prompt": hidePrompt })}>
|
||||
@@ -317,7 +303,7 @@ class SmallLineAvatar extends React.Component<{ line: LineType; cmd: Cmd; onRigh
|
||||
render() {
|
||||
const { line, cmd } = this.props;
|
||||
const lineNumStr = (line.linenumtemp ? "~" : "#") + String(line.linenum);
|
||||
const status = cmd != null ? cmd.getStatus() : "done";
|
||||
let status = cmd != null ? cmd.getStatus() : "done";
|
||||
const exitcode = cmd != null ? cmd.getExitCode() : 0;
|
||||
const isComment = line.linetype == "text";
|
||||
let icon = null;
|
||||
@@ -373,7 +359,7 @@ class RtnState extends React.Component<{ cmd: Cmd; line: LineType }> {
|
||||
}
|
||||
|
||||
checkStateDiffLoad(): void {
|
||||
const cmd = this.props.cmd;
|
||||
let cmd = this.props.cmd;
|
||||
if (cmd == null || !cmd.getRtnState() || this.rtnStateDiffFetched) {
|
||||
return;
|
||||
}
|
||||
@@ -420,7 +406,7 @@ class RtnState extends React.Component<{ cmd: Cmd; line: LineType }> {
|
||||
}
|
||||
|
||||
render() {
|
||||
const { cmd } = this.props;
|
||||
let { cmd } = this.props;
|
||||
const rsdiff = this.rtnStateDiff.get();
|
||||
const termFontSize = GlobalModel.getTermFontSize();
|
||||
let rtnStateDiffSize = termFontSize - 2;
|
||||
@@ -502,7 +488,7 @@ class LineCmd extends React.Component<
|
||||
if (elem != null) {
|
||||
curHeight = elem.offsetHeight;
|
||||
}
|
||||
const linenum = line.linenum;
|
||||
let linenum = line.linenum;
|
||||
if (DebugHeightProblems && linenum >= MinLine && linenum <= MaxLine) {
|
||||
heightLog[linenum] = heightLog[linenum] || {};
|
||||
heightLog[linenum].heightArr = heightLog[linenum].heightArr || [];
|
||||
@@ -699,7 +685,7 @@ class LineCmd extends React.Component<
|
||||
const isFocused = mobx
|
||||
.computed(
|
||||
() => {
|
||||
const screenFocusType = screen.getFocusType();
|
||||
let screenFocusType = screen.getFocusType();
|
||||
return isPhysicalFocused && screenFocusType == "cmd";
|
||||
},
|
||||
{ name: "computed-isFocused" }
|
||||
@@ -708,7 +694,7 @@ class LineCmd extends React.Component<
|
||||
const shouldCmdFocus = mobx
|
||||
.computed(
|
||||
() => {
|
||||
const screenFocusType = screen.getFocusType();
|
||||
let screenFocusType = screen.getFocusType();
|
||||
return isSelected && screenFocusType == "cmd";
|
||||
},
|
||||
{ name: "computed-shouldCmdFocus" }
|
||||
@@ -739,9 +725,16 @@ class LineCmd extends React.Component<
|
||||
rendererPlugin = PluginModel.getRendererPluginByName(line.renderer);
|
||||
}
|
||||
const rendererType = lineutil.getRendererType(line);
|
||||
const hidePrompt = rendererPlugin?.hidePrompt;
|
||||
const termFontSize = GlobalModel.getTermFontSize();
|
||||
const containerType = screen.getContainerType();
|
||||
const isMinimized = line.linestate["wave:min"] && containerType == appconst.LineContainer_Main;
|
||||
const lhv: LineChromeHeightVars = {
|
||||
numCmdLines: lineutil.countCmdLines(cmd.getCmdStr()),
|
||||
zeroHeight: isMinimized,
|
||||
hasLine2: !hidePrompt,
|
||||
};
|
||||
const chromeHeight = textmeasure.calcLineChromeHeight(GlobalModel.lineHeightEnv, lhv);
|
||||
return (
|
||||
<div
|
||||
className={mainDivCn}
|
||||
@@ -756,64 +749,55 @@ class LineCmd extends React.Component<
|
||||
</If>
|
||||
<LineActions screen={screen} line={line} cmd={cmd} />
|
||||
<LineHeader screen={screen} line={line} cmd={cmd} />
|
||||
<If condition={!isMinimized}>
|
||||
<Choose>
|
||||
<When condition={isInSidebar}>
|
||||
<div className="sidebar-message" style={{ fontSize: termFontSize }}>
|
||||
showing in sidebar =>
|
||||
</div>
|
||||
</When>
|
||||
<Otherwise>
|
||||
<ErrorBoundary
|
||||
plugin={rendererPlugin?.name}
|
||||
lineContext={lineutil.getRendererContext(line)}
|
||||
>
|
||||
<If condition={rendererPlugin == null && !isNoneRenderer}>
|
||||
<TerminalRenderer
|
||||
screen={screen}
|
||||
line={line}
|
||||
width={width}
|
||||
staticRender={staticRender}
|
||||
visible={visible}
|
||||
onHeightChange={this.handleHeightChange}
|
||||
collapsed={false}
|
||||
/>
|
||||
</If>
|
||||
<If condition={rendererPlugin != null && rendererPlugin.rendererType == "simple"}>
|
||||
<SimpleBlobRenderer
|
||||
rendererContainer={screen}
|
||||
lineId={line.lineid}
|
||||
plugin={rendererPlugin}
|
||||
onHeightChange={this.handleHeightChange}
|
||||
initParams={this.makeRendererModelInitializeParams()}
|
||||
scrollToBringIntoViewport={this.scrollToBringIntoViewport}
|
||||
isSelected={isSelected}
|
||||
shouldFocus={shouldCmdFocus}
|
||||
/>
|
||||
</If>
|
||||
<If condition={rendererPlugin != null && rendererPlugin.rendererType == "full"}>
|
||||
<IncrementalRenderer
|
||||
rendererContainer={screen}
|
||||
lineId={line.lineid}
|
||||
plugin={rendererPlugin}
|
||||
onHeightChange={this.handleHeightChange}
|
||||
initParams={this.makeRendererModelInitializeParams()}
|
||||
isSelected={isSelected}
|
||||
/>
|
||||
</If>
|
||||
</ErrorBoundary>
|
||||
<If condition={isRtnState}>
|
||||
<RtnState cmd={cmd} line={line} />
|
||||
</If>
|
||||
<If condition={isSelected && !isFocused && rendererType == "terminal"}>
|
||||
<div className="cmd-hints">
|
||||
<div className="hint-item color-nohover-white">
|
||||
focus line ({renderCmdText("L")})
|
||||
</div>
|
||||
</div>
|
||||
</If>
|
||||
</Otherwise>
|
||||
</Choose>
|
||||
<If condition={!isMinimized && isInSidebar}>
|
||||
<div className="sidebar-message" style={{ fontSize: termFontSize }}>
|
||||
showing in sidebar =>
|
||||
</div>
|
||||
</If>
|
||||
<If condition={!isMinimized && !isInSidebar}>
|
||||
<ErrorBoundary plugin={rendererPlugin?.name} lineContext={lineutil.getRendererContext(line)}>
|
||||
<If condition={rendererPlugin == null && !isNoneRenderer}>
|
||||
<TerminalRenderer
|
||||
screen={screen}
|
||||
line={line}
|
||||
width={width}
|
||||
staticRender={staticRender}
|
||||
visible={visible}
|
||||
onHeightChange={this.handleHeightChange}
|
||||
collapsed={false}
|
||||
/>
|
||||
</If>
|
||||
<If condition={rendererPlugin != null && rendererPlugin.rendererType == "simple"}>
|
||||
<SimpleBlobRenderer
|
||||
rendererContainer={screen}
|
||||
lineId={line.lineid}
|
||||
plugin={rendererPlugin}
|
||||
onHeightChange={this.handleHeightChange}
|
||||
initParams={this.makeRendererModelInitializeParams()}
|
||||
scrollToBringIntoViewport={this.scrollToBringIntoViewport}
|
||||
isSelected={isSelected}
|
||||
shouldFocus={shouldCmdFocus}
|
||||
/>
|
||||
</If>
|
||||
<If condition={rendererPlugin != null && rendererPlugin.rendererType == "full"}>
|
||||
<IncrementalRenderer
|
||||
rendererContainer={screen}
|
||||
lineId={line.lineid}
|
||||
plugin={rendererPlugin}
|
||||
onHeightChange={this.handleHeightChange}
|
||||
initParams={this.makeRendererModelInitializeParams()}
|
||||
isSelected={isSelected}
|
||||
/>
|
||||
</If>
|
||||
</ErrorBoundary>
|
||||
<If condition={isRtnState}>
|
||||
<RtnState cmd={cmd} line={line} />
|
||||
</If>
|
||||
<If condition={isSelected && !isFocused && rendererType == "terminal"}>
|
||||
<div className="cmd-hints">
|
||||
<div className="hint-item color-nohover-white">focus line ({renderCmdText("L")})</div>
|
||||
</div>
|
||||
</If>
|
||||
</If>
|
||||
</div>
|
||||
);
|
||||
@@ -893,6 +877,11 @@ class LineText extends React.Component<
|
||||
name: "computed-isSelected",
|
||||
})
|
||||
.get();
|
||||
const isFocused = mobx
|
||||
.computed(() => screen.getFocusType() == "cmd", {
|
||||
name: "computed-isFocused",
|
||||
})
|
||||
.get();
|
||||
const mainClass = cn("line", "line-text", "focus-parent", { selected: isSelected });
|
||||
return (
|
||||
<div
|
||||
|
||||
@@ -15,7 +15,6 @@ import * as util from "@/util/util";
|
||||
import * as lineutil from "./lineutil";
|
||||
|
||||
import "./lines.less";
|
||||
import { GlobalModel } from "@/models";
|
||||
|
||||
dayjs.extend(localizedFormat);
|
||||
|
||||
|
||||
@@ -242,7 +242,7 @@ class MainSideBar extends React.Component<MainSideBarProps, {}> {
|
||||
}
|
||||
|
||||
render() {
|
||||
const mainView = GlobalModel.activeMainView.get();
|
||||
let mainView = GlobalModel.activeMainView.get();
|
||||
const historyActive = mainView == "history";
|
||||
const connectionsActive = mainView == "connections";
|
||||
const settingsActive = mainView == "clientsettings";
|
||||
|
||||
@@ -25,29 +25,4 @@
|
||||
&.collapsed {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.keybind-debug-pane {
|
||||
padding: 10px;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
|
||||
.keybind-pane-title {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.keybind-level {
|
||||
margin-top: 10px;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.keybind-domain {
|
||||
font-size: 14px;
|
||||
margin-left: 20px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,7 +4,6 @@
|
||||
import * as React from "react";
|
||||
import * as mobxReact from "mobx-react";
|
||||
import dayjs from "dayjs";
|
||||
import { If, For } from "tsx-control-statements/components";
|
||||
|
||||
import localizedFormat from "dayjs/plugin/localizedFormat";
|
||||
import { GlobalModel } from "@/models";
|
||||
@@ -18,41 +17,6 @@ interface RightSideBarProps {
|
||||
parentRef: React.RefObject<HTMLElement>;
|
||||
}
|
||||
|
||||
@mobxReact.observer
|
||||
class KeybindDevPane extends React.Component<{}, {}> {
|
||||
render() {
|
||||
let curActiveKeybinds: Array<{ name: string; domains: Array<string> }> =
|
||||
GlobalModel.keybindManager.getActiveKeybindings();
|
||||
let keybindLevel: { name: string; domains: Array<string> } = null;
|
||||
let domain: string = null;
|
||||
let curVersion = GlobalModel.keybindManager.getActiveKeybindsVersion().get();
|
||||
let levelIdx: number = 0;
|
||||
let domainIdx: number = 0;
|
||||
let lastKeyData = GlobalModel.keybindManager.getLastKeyData();
|
||||
return (
|
||||
<div className="keybind-debug-pane">
|
||||
<div className="keybind-pane-title">Keybind Manager</div>
|
||||
<For index="levelIdx" each="keybindLevel" of={curActiveKeybinds}>
|
||||
<div className="keybind-level" key={"level-" + curVersion + levelIdx}>
|
||||
{keybindLevel.name}
|
||||
</div>
|
||||
<For index="domainIdx" each="domain" of={keybindLevel.domains}>
|
||||
<div className="keybind-domain" key={"domain-" + curVersion + domainIdx}>
|
||||
{domain}
|
||||
</div>
|
||||
</For>
|
||||
</For>
|
||||
<br />
|
||||
<br />
|
||||
<div>
|
||||
<h1>Last KeyPress Domain: {lastKeyData.domain}</h1>
|
||||
<h1>Last KeyPress key: {lastKeyData.keyPress}</h1>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@mobxReact.observer
|
||||
class RightSideBar extends React.Component<RightSideBarProps, {}> {
|
||||
render() {
|
||||
@@ -71,9 +35,6 @@ class RightSideBar extends React.Component<RightSideBarProps, {}> {
|
||||
<i className="fa-sharp fa-regular fa-xmark"></i>
|
||||
</Button>
|
||||
</div>
|
||||
<If condition={GlobalModel.isDev}>
|
||||
<KeybindDevPane></KeybindDevPane>
|
||||
</If>
|
||||
</React.Fragment>
|
||||
)}
|
||||
</ResizableSidebar>
|
||||
|
||||
@@ -1,70 +0,0 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -5,20 +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 { AuxiliaryCmdView } from "./auxview";
|
||||
|
||||
import "./aichat.less";
|
||||
import { UseOverlayScrollbarsInitialization, useOverlayScrollbars } from "overlayscrollbars-react";
|
||||
import { ScrollbarsComponent } from "@/app/common/elements/scrollbars";
|
||||
import { checkKeyPressed, adaptFromReactOrNativeKeyEvent } from "@/util/keyutil";
|
||||
|
||||
class AIChatKeybindings extends React.Component<{ AIChatObject: AIChat }, {}> {
|
||||
componentDidMount(): void {
|
||||
const AIChatObject = this.props.AIChatObject;
|
||||
const keybindManager = GlobalModel.keybindManager;
|
||||
const inputModel = GlobalModel.inputModel;
|
||||
let AIChatObject = this.props.AIChatObject;
|
||||
let keybindManager = GlobalModel.keybindManager;
|
||||
let inputModel = GlobalModel.inputModel;
|
||||
|
||||
keybindManager.registerKeybinding("pane", "aichat", "generic:confirm", (waveEvent) => {
|
||||
AIChatObject.onEnterKeyPressed();
|
||||
@@ -56,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);
|
||||
@@ -71,8 +69,9 @@ class AIChat extends React.Component<{}, {}> {
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
const inputModel = GlobalModel.inputModel;
|
||||
if (this.chatWindowScrollRef?.current != null) {
|
||||
let model = GlobalModel;
|
||||
let inputModel = model.inputModel;
|
||||
if (this.chatWindowScrollRef != null && this.chatWindowScrollRef.current != null) {
|
||||
this.chatWindowScrollRef.current.scrollTop = this.chatWindowScrollRef.current.scrollHeight;
|
||||
}
|
||||
if (this.textAreaRef.current != null) {
|
||||
@@ -80,11 +79,10 @@ class AIChat extends React.Component<{}, {}> {
|
||||
inputModel.setCmdInfoChatRefs(this.textAreaRef, this.chatWindowScrollRef);
|
||||
}
|
||||
this.requestChatUpdate();
|
||||
this.onTextAreaChange(null);
|
||||
}
|
||||
|
||||
componentDidUpdate() {
|
||||
if (this.chatWindowScrollRef?.current != null) {
|
||||
if (this.chatWindowScrollRef != null && this.chatWindowScrollRef.current != null) {
|
||||
this.chatWindowScrollRef.current.scrollTop = this.chatWindowScrollRef.current.scrollHeight;
|
||||
}
|
||||
}
|
||||
@@ -94,18 +92,20 @@ class AIChat extends React.Component<{}, {}> {
|
||||
}
|
||||
|
||||
submitChatMessage(messageStr: string) {
|
||||
const curLine = GlobalModel.inputModel.getCurLine();
|
||||
const prtn = GlobalModel.submitChatInfoCommand(messageStr, curLine, false);
|
||||
let model = GlobalModel;
|
||||
let inputModel = model.inputModel;
|
||||
let curLine = inputModel.getCurLine();
|
||||
let prtn = GlobalModel.submitChatInfoCommand(messageStr, curLine, false);
|
||||
prtn.then((rtn) => {
|
||||
if (!rtn.success) {
|
||||
console.log("submit chat command error: " + rtn.error);
|
||||
}
|
||||
}).catch((_) => {});
|
||||
}).catch((error) => {});
|
||||
}
|
||||
|
||||
getLinePos(elem: any): { numLines: number; linePos: number } {
|
||||
const numLines = elem.value.split("\n").length;
|
||||
const linePos = elem.value.substr(0, elem.selectionStart).split("\n").length;
|
||||
let numLines = elem.value.split("\n").length;
|
||||
let linePos = elem.value.substr(0, elem.selectionStart).split("\n").length;
|
||||
return { numLines, linePos };
|
||||
}
|
||||
|
||||
@@ -121,32 +121,22 @@ class AIChat extends React.Component<{}, {}> {
|
||||
})();
|
||||
}
|
||||
|
||||
// Adjust the height of the textarea to fit the text
|
||||
onTextAreaChange(e: any) {
|
||||
// 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();
|
||||
// set height of textarea based on number of newlines
|
||||
mobx.action(() => {
|
||||
this.textAreaNumLines.set(e.target.value.split(/\n/).length);
|
||||
GlobalModel.inputModel.codeSelectDeselectAll();
|
||||
})();
|
||||
}
|
||||
|
||||
onEnterKeyPressed() {
|
||||
const inputModel = GlobalModel.inputModel;
|
||||
const currentRef = this.textAreaRef.current;
|
||||
let inputModel = GlobalModel.inputModel;
|
||||
let currentRef = this.textAreaRef.current;
|
||||
if (currentRef == null) {
|
||||
return;
|
||||
}
|
||||
if (inputModel.getCodeSelectSelectedIndex() == -1) {
|
||||
const messageStr = currentRef.value;
|
||||
let messageStr = currentRef.value;
|
||||
this.submitChatMessage(messageStr);
|
||||
currentRef.value = "";
|
||||
} else {
|
||||
@@ -155,7 +145,7 @@ class AIChat extends React.Component<{}, {}> {
|
||||
}
|
||||
|
||||
onExpandInputPressed() {
|
||||
const currentRef = this.textAreaRef.current;
|
||||
let currentRef = this.textAreaRef.current;
|
||||
if (currentRef == null) {
|
||||
return;
|
||||
}
|
||||
@@ -164,7 +154,7 @@ class AIChat extends React.Component<{}, {}> {
|
||||
}
|
||||
|
||||
onArrowUpPressed(): boolean {
|
||||
const currentRef = this.textAreaRef.current;
|
||||
let currentRef = this.textAreaRef.current;
|
||||
if (currentRef == null) {
|
||||
return false;
|
||||
}
|
||||
@@ -178,8 +168,8 @@ class AIChat extends React.Component<{}, {}> {
|
||||
}
|
||||
|
||||
onArrowDownPressed(): boolean {
|
||||
const currentRef = this.textAreaRef.current;
|
||||
const inputModel = GlobalModel.inputModel;
|
||||
let currentRef = this.textAreaRef.current;
|
||||
let inputModel = GlobalModel.inputModel;
|
||||
if (currentRef == null) {
|
||||
return false;
|
||||
}
|
||||
@@ -200,10 +190,10 @@ class AIChat extends React.Component<{}, {}> {
|
||||
}
|
||||
|
||||
renderChatMessage(chatItem: OpenAICmdInfoChatMessageType): any {
|
||||
const curKey = "chatmsg-" + this.chatListKeyCount;
|
||||
let curKey = "chatmsg-" + this.chatListKeyCount;
|
||||
this.chatListKeyCount++;
|
||||
const senderClassName = chatItem.isassistantresponse ? "chat-msg-assistant" : "chat-msg-user";
|
||||
const msgClassName = "chat-msg " + senderClassName;
|
||||
let senderClassName = chatItem.isassistantresponse ? "chat-msg-assistant" : "chat-msg-user";
|
||||
let msgClassName = "chat-msg " + senderClassName;
|
||||
let innerHTML: React.JSX.Element = (
|
||||
<span>
|
||||
<div className="chat-msg-header">
|
||||
@@ -236,57 +226,68 @@ 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() {
|
||||
const chatMessageItems = GlobalModel.inputModel.AICmdInfoChatItems.slice();
|
||||
const chitem: OpenAICmdInfoChatMessageType = null;
|
||||
const renderKeybindings = mobx
|
||||
.computed(() => {
|
||||
return (
|
||||
this.isFocused.get() ||
|
||||
GlobalModel.inputModel.hasFocus() ||
|
||||
(GlobalModel.getActiveScreen().getFocusType() == "input" &&
|
||||
GlobalModel.activeMainView.get() == "session")
|
||||
);
|
||||
})
|
||||
.get();
|
||||
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 isFocused = this.isFocused.get();
|
||||
|
||||
return (
|
||||
<AuxiliaryCmdView
|
||||
title="Wave AI"
|
||||
className="cmd-aichat"
|
||||
onClose={() => GlobalModel.inputModel.closeAIAssistantChat(true)}
|
||||
iconClass="fa-sharp fa-solid fa-sparkles"
|
||||
>
|
||||
<If condition={renderKeybindings}>
|
||||
<div className="cmd-aichat">
|
||||
<If condition={isFocused}>
|
||||
<AIChatKeybindings AIChatObject={this}></AIChatKeybindings>
|
||||
</If>
|
||||
<ScrollbarsComponent
|
||||
childrenRef={this.chatWindowScrollRef}
|
||||
options={{ scrollbars: { autoHide: "leave" } }}
|
||||
>
|
||||
<div className="chat-window" ref={this.chatWindowScrollRef}>
|
||||
<For each="chitem" index="idx" of={chatMessageItems}>
|
||||
{this.renderChatMessage(chitem)}
|
||||
</For>
|
||||
<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>
|
||||
</ScrollbarsComponent>
|
||||
<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>
|
||||
<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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user