diff --git a/src/app/app.tsx b/src/app/app.tsx
index 42dba420..3acaa712 100644
--- a/src/app/app.tsx
+++ b/src/app/app.tsx
@@ -16,6 +16,7 @@ import { PluginsView } from "./pluginsview/pluginsview";
import { BookmarksView } from "./bookmarks/bookmarks";
import { HistoryView } from "./history/history";
import { ConnectionsView } from "./connections/connections";
+import { ClientSettingsView } from "./clientsettings/clientsettings";
import { MainSideBar } from "./sidebar/sidebar";
import { DisconnectedModal, ClientStopModal } from "./common/modals";
import { ModalsProvider } from "./common/modals/provider";
@@ -109,6 +110,7 @@ class App extends React.Component<{}, {}> {
+
diff --git a/src/app/clientsettings/clientsettings.less b/src/app/clientsettings/clientsettings.less
new file mode 100644
index 00000000..034953ec
--- /dev/null
+++ b/src/app/clientsettings/clientsettings.less
@@ -0,0 +1,200 @@
+@import "../../app/common/themes/themes.less";
+
+.clientsettings-view {
+ background-color: @background-session;
+ flex-grow: 1;
+ display: flex;
+ flex-direction: column;
+ position: relative;
+ overflow: auto;
+ margin-bottom: 10px;
+ margin-right: 10px;
+ border-radius: 8px;
+ border: 1px solid rgba(241, 246, 243, 0.08);
+ background: rgba(13, 13, 13, 0.85);
+
+ .header {
+ margin: 24px 18px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding-bottom: 20px;
+ border-bottom: 1px solid white;
+ }
+
+ .content {
+ padding: 0 18px 0 30px;
+ }
+
+ // just marked these as important since we're keeping the
+ // settings-field styles below this intact until we figure out what do with them
+ .settings-field {
+ &:not(:first-child) {
+ margin-top: 15px !important;
+ }
+
+ .settings-label {
+ width: 250px !important;
+ }
+ }
+
+ // @TODO: These styles are duplicated in the settings modals
+ .settings-field {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+
+ &.settings-field.sub-field {
+ .settings-label {
+ font-weight: normal;
+
+ text-align: right;
+ padding-right: 20px;
+ }
+ }
+
+ &.settings-error {
+ color: @term-red;
+ margin-top: 20px;
+ padding: 10px;
+ border-radius: 5px;
+ background-color: #200707;
+ border: 1px solid @term-red;
+ font-weight: bold;
+
+ .error-dismiss {
+ padding: 2px;
+ cursor: pointer;
+ }
+ }
+
+ .settings-label {
+ font-weight: bold;
+ width: 12em;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ margin-right: 10px;
+
+ .info-message {
+ margin-left: 5px;
+ }
+ }
+
+ .settings-input {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+
+ &.settings-clickable {
+ cursor: pointer;
+ }
+
+ &.inline-edit.edit-active {
+ input.input {
+ padding: 0;
+ height: 20px;
+ }
+
+ .button {
+ height: 20px;
+ }
+ }
+
+ input {
+ padding: 4px;
+ border-radius: 3px;
+ }
+
+ .control {
+ .icon {
+ width: 1.5em;
+ height: 1.5em;
+ margin: 0;
+ }
+ }
+
+ .tab-color-icon.color-default path {
+ fill: @tab-green;
+ }
+ .tab-color-icon.color-green path {
+ fill: @tab-green;
+ }
+ .tab-color-icon.color-orange path {
+ fill: @tab-orange;
+ }
+ .tab-color-icon.color-red path {
+ fill: @tab-red;
+ }
+ .tab-color-icon.color-yellow path {
+ fill: @tab-yellow;
+ }
+ .tab-color-icon.color-blue path {
+ fill: @tab-blue;
+ }
+ .tab-color-icon.color-mint path {
+ fill: @tab-mint;
+ }
+ .tab-color-icon.color-cyan path {
+ fill: @tab-cyan;
+ }
+ .tab-color-icon.color-white path {
+ fill: @tab-white;
+ }
+ .tab-color-icon.color-violet path {
+ fill: @tab-violet;
+ }
+ .tab-color-icon.color-pink path {
+ fill: @tab-pink;
+ }
+
+ .tab-colors,
+ .tab-icons {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+
+ .tab-color-sep,
+ .tab-icon-sep {
+ padding-left: 10px;
+ padding-right: 10px;
+ font-weight: bold;
+ }
+
+ .tab-color-icon,
+ .tab-icon-icon {
+ width: 1.1em;
+ vertical-align: middle;
+ }
+
+ .tab-color-name,
+ .tab-icon-name {
+ margin-left: 1em;
+ }
+
+ .tab-color-select,
+ .tab-icon-select {
+ cursor: pointer;
+ margin: 5px;
+ &:hover {
+ outline: 2px solid white;
+ }
+ }
+ }
+
+ .action-text {
+ margin-left: 20px;
+
+ color: @term-red;
+ }
+
+ .settings-share-link {
+ width: 160px;
+ }
+ }
+
+ &:not(:first-child) {
+ margin-top: 10px;
+ }
+ }
+}
diff --git a/src/app/clientsettings/clientsettings.tsx b/src/app/clientsettings/clientsettings.tsx
new file mode 100644
index 00000000..8d3c4cde
--- /dev/null
+++ b/src/app/clientsettings/clientsettings.tsx
@@ -0,0 +1,219 @@
+// Copyright 2023, Command Line Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import * as React from "react";
+import * as mobxReact from "mobx-react";
+import * as mobx from "mobx";
+import { boundMethod } from "autobind-decorator";
+import cn from "classnames";
+import { GlobalModel, GlobalCommandRunner, MinFontSize, MaxFontSize, RemotesModel } from "../../model/model";
+import { Toggle, InlineSettingsTextEdit, SettingsError, Dropdown } from "../common/common";
+import { CommandRtnType, ClientDataType } from "../../types/types";
+import { commandRtnHandler, isBlank } from "../../util/util";
+
+import "./clientsettings.less";
+
+type OV = mobx.IObservableValue;
+
+// @ts-ignore
+const VERSION = __WAVETERM_VERSION__;
+// @ts-ignore
+const BUILD = __WAVETERM_BUILD__;
+
+@mobxReact.observer
+class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hoveredItemId: string }> {
+ fontSizeDropdownActive: OV = mobx.observable.box(false, { name: "clientSettings-fontSizeDropdownActive" });
+ errorMessage: OV = mobx.observable.box(null, { name: "ClientSettings-errorMessage" });
+
+ @boundMethod
+ closeModal(): void {
+ GlobalModel.modalsModel.popModal();
+ }
+
+ @boundMethod
+ dismissError(): void {
+ mobx.action(() => {
+ this.errorMessage.set(null);
+ })();
+ }
+
+ @boundMethod
+ handleChangeFontSize(fontSize: string): void {
+ let newFontSize = Number(fontSize);
+ this.fontSizeDropdownActive.set(false);
+ if (GlobalModel.termFontSize.get() == newFontSize) {
+ return;
+ }
+ let prtn = GlobalCommandRunner.setTermFontSize(newFontSize, false);
+ commandRtnHandler(prtn, this.errorMessage);
+ }
+
+ @boundMethod
+ togglefontSizeDropdown(): void {
+ mobx.action(() => {
+ this.fontSizeDropdownActive.set(!this.fontSizeDropdownActive.get());
+ })();
+ }
+
+ @boundMethod
+ handleChangeTelemetry(val: boolean): void {
+ let prtn: Promise = null;
+ if (val) {
+ prtn = GlobalCommandRunner.telemetryOn(false);
+ } else {
+ prtn = GlobalCommandRunner.telemetryOff(false);
+ }
+ commandRtnHandler(prtn, this.errorMessage);
+ }
+
+ @boundMethod
+ handleChangeReleaseCheck(val: boolean): void {
+ let prtn: Promise = null;
+ if (val) {
+ prtn = GlobalCommandRunner.releaseCheckAutoOn(false);
+ } else {
+ prtn = GlobalCommandRunner.releaseCheckAutoOff(false);
+ }
+ commandRtnHandler(prtn, this.errorMessage);
+ }
+
+ getFontSizes(): any {
+ let availableFontSizes: { label: string; value: number }[] = [];
+ for (let s = MinFontSize; s <= MaxFontSize; s++) {
+ availableFontSizes.push({ label: s + "px", value: s });
+ }
+ return availableFontSizes;
+ }
+
+ @boundMethod
+ inlineUpdateOpenAIModel(newModel: string): void {
+ let prtn = GlobalCommandRunner.setClientOpenAISettings({ model: newModel });
+ commandRtnHandler(prtn, this.errorMessage);
+ }
+
+ @boundMethod
+ inlineUpdateOpenAIToken(newToken: string): void {
+ let prtn = GlobalCommandRunner.setClientOpenAISettings({ apitoken: newToken });
+ commandRtnHandler(prtn, this.errorMessage);
+ }
+
+ @boundMethod
+ inlineUpdateOpenAIMaxTokens(newMaxTokensStr: string): void {
+ let prtn = GlobalCommandRunner.setClientOpenAISettings({ maxtokens: newMaxTokensStr });
+ commandRtnHandler(prtn, this.errorMessage);
+ }
+
+ @boundMethod
+ setErrorMessage(msg: string): void {
+ mobx.action(() => {
+ this.errorMessage.set(msg);
+ })();
+ }
+
+ render() {
+ let isHidden = GlobalModel.activeMainView.get() != "clientsettings";
+ if (isHidden) {
+ return null;
+ }
+
+ let cdata: ClientDataType = GlobalModel.clientData.get();
+ let openAIOpts = cdata.openaiopts ?? {};
+ let apiTokenStr = isBlank(openAIOpts.apitoken) ? "(not set)" : "********";
+ let maxTokensStr = String(
+ openAIOpts.maxtokens == null || openAIOpts.maxtokens == 0 ? 1000 : openAIOpts.maxtokens
+ );
+ let curFontSize = GlobalModel.termFontSize.get();
+
+ return (
+
+
+
+
+
+
Client ID
+
{cdata.clientid}
+
+
+
Client Version
+
+ {VERSION} {BUILD}
+
+
+
+
DB Version
+
{cdata.dbversion}
+
+
+
Basic Telemetry
+
+
+
+
+
+
Check for Updates
+
+
+
+
+
+
+
+
OpenAI MaxTokens
+
+
+
+
+
+
+