revert width of modal

This PR changes ModelUpdate mechanism from a statically-typed struct to an interface, allowing us to define the update mechanism and the update types separately. This sets us up to move app logic and update mechanisms into separate packages. Ultimately, sstore will only define low-level persistence logic.

README.md

@@ -10,7 +10,7 @@
 
 # Wave Terminal 
 
-A open-source, cross-platform, modern terminal for seamless workflows.
+A open-source, cross-platform, AI-integrated, modern terminal for seamless workflows.
 
 Wave isn't just another terminal emulator; it's a rethink on how terminals are built.  Wave combines command line with the power of the open web to help veteran CLI users and new developers alike.
 
@@ -18,6 +18,7 @@ Wave isn't just another terminal emulator; it's a rethink on how terminals are b
 * Persistent sessions that can restore state across network disconnections and reboots
 * Searchable contextual command history across all remote sessions (saved locally)
 * Workspaces, tabs, and command blocks to keep you organized
+* AI Integration with ChatGPT (or ChatGPT compatible APIs) to help write commands and get answers inline
 
 ## Installation
 
@@ -35,6 +36,7 @@ brew install --cask wave
 * Homepage — https://www.waveterm.dev
 * Download Page — https://www.waveterm.dev/download
 * Documentation — https://docs.waveterm.dev/
+* Blog — https://blog.waveterm.dev/
 * Quick Start Guide — https://docs.waveterm.dev/quickstart/
 * Discord Community — https://discord.gg/XfvZ334gwU
 

src/app/app.tsx

@@ -9,7 +9,7 @@ import { If } from "tsx-control-statements/components";
 import dayjs from "dayjs";
 import type { ContextMenuOpts } from "../types/types";
 import localizedFormat from "dayjs/plugin/localizedFormat";
-import { GlobalModel } from "../model/model";
+import { GlobalModel } from "../models";
 import { isBlank } from "../util/util";
 import { WorkspaceView } from "./workspace/workspaceview";
 import { PluginsView } from "./pluginsview/pluginsview";
@@ -32,7 +32,7 @@ class App extends React.Component<{}, {}> {
     dcWait: OV<boolean> = mobx.observable.box(false, { name: "dcWait" });
     mainContentRef: React.RefObject<HTMLDivElement> = React.createRef();
 
-    constructor(props: any) {
+    constructor(props: {}) {
         super(props);
         if (GlobalModel.isDev) document.body.className = "is-dev";
     }

src/app/appconst.ts

@@ -8,6 +8,7 @@ export const SESSION_SETTINGS = "sessionSettings";
 export const LINE_SETTINGS = "lineSettings";
 export const CLIENT_SETTINGS = "clientSettings";
 export const TAB_SWITCHER = "tabSwitcher";
+export const USER_INPUT = "userInput";
 
 export const LineContainer_Main = "main";
 export const LineContainer_History = "history";
@@ -16,3 +17,33 @@ export const LineContainer_Sidebar = "sidebar";
 export const ConfirmKey_HideShellPrompt = "hideshellprompt";
 
 export const NoStrPos = -1;
+
+export const RemotePtyRows = 8; // also in main.tsx
+export const RemotePtyCols = 80;
+export const ProdServerEndpoint = "http://127.0.0.1:1619";
+export const ProdServerWsEndpoint = "ws://127.0.0.1:1623";
+export const DevServerEndpoint = "http://127.0.0.1:8090";
+export const DevServerWsEndpoint = "ws://127.0.0.1:8091";
+export const DefaultTermFontSize = 12;
+export const MinFontSize = 8;
+export const MaxFontSize = 24;
+export const InputChunkSize = 500;
+export const RemoteColors = ["red", "green", "yellow", "blue", "magenta", "cyan", "white", "orange"];
+export const TabColors = ["red", "orange", "yellow", "green", "mint", "cyan", "blue", "violet", "pink", "white"];
+export const TabIcons = [
+    "sparkle",
+    "fire",
+    "ghost",
+    "cloud",
+    "compass",
+    "crown",
+    "droplet",
+    "graduation-cap",
+    "heart",
+    "file",
+];
+
+// @ts-ignore
+export const VERSION = __WAVETERM_VERSION__;
+// @ts-ignore
+export const BUILD = __WAVETERM_BUILD__;

src/app/bookmarks/bookmarks.tsx

@@ -8,7 +8,7 @@ import { boundMethod } from "autobind-decorator";
 import { If, For } from "tsx-control-statements/components";
 import cn from "classnames";
 import type { BookmarkType } from "../../types/types";
-import { GlobalModel } from "../../model/model";
+import { GlobalModel } from "../../models";
 import { CmdStrCode, Markdown } from "../common/elements";
 
 import { ReactComponent as XmarkIcon } from "../assets/icons/line/xmark.svg";
@@ -19,8 +19,16 @@ import { ReactComponent as FavoritesIcon } from "../assets/icons/favourites.svg"
 
 import "./bookmarks.less";
 
+type BookmarkProps = {
+    bookmark: BookmarkType;
+};
+
 @mobxReact.observer
-class Bookmark extends React.Component<{ bookmark: BookmarkType }, {}> {
+class Bookmark extends React.Component<BookmarkProps, {}> {
+    constructor(props: BookmarkProps) {
+        super(props);
+    }
+
     @boundMethod
     handleDeleteClick(): void {
         let { bookmark } = this.props;
@@ -179,6 +187,10 @@ class Bookmark extends React.Component<{ bookmark: BookmarkType }, {}> {
 
 @mobxReact.observer
 class BookmarksView extends React.Component<{}, {}> {
+    constructor(props: {}) {
+        super(props);
+    }
+
     @boundMethod
     closeView(): void {
         GlobalModel.bookmarksModel.closeView();

src/app/clientsettings/clientsettings.tsx

@@ -6,24 +6,20 @@ 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 { GlobalModel, GlobalCommandRunner, RemotesModel } from "../../models";
 import { Toggle, InlineSettingsTextEdit, SettingsError, Dropdown } from "../common/elements";
-import { CommandRtnType, ClientDataType } from "../../types/types";
+import * as types from "../../types/types";
 import { commandRtnHandler, isBlank } from "../../util/util";
+import * as appconst from "../appconst";
 
 import "./clientsettings.less";
 
-type OV<V> = mobx.IObservableValue<V>;
-
-// @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<boolean> = mobx.observable.box(false, { name: "clientSettings-fontSizeDropdownActive" });
-    errorMessage: OV<string> = mobx.observable.box(null, { name: "ClientSettings-errorMessage" });
+    fontSizeDropdownActive: types.OV<boolean> = mobx.observable.box(false, {
+        name: "clientSettings-fontSizeDropdownActive",
+    });
+    errorMessage: types.OV<string> = mobx.observable.box(null, { name: "ClientSettings-errorMessage" });
 
     @boundMethod
     dismissError(): void {
@@ -52,7 +48,7 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
 
     @boundMethod
     handleChangeTelemetry(val: boolean): void {
-        let prtn: Promise<CommandRtnType> = null;
+        let prtn: Promise<types.CommandRtnType> = null;
         if (val) {
             prtn = GlobalCommandRunner.telemetryOn(false);
         } else {
@@ -63,7 +59,7 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
 
     @boundMethod
     handleChangeReleaseCheck(val: boolean): void {
-        let prtn: Promise<CommandRtnType> = null;
+        let prtn: Promise<types.CommandRtnType> = null;
         if (val) {
             prtn = GlobalCommandRunner.releaseCheckAutoOn(false);
         } else {
@@ -74,7 +70,7 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
 
     getFontSizes(): any {
         let availableFontSizes: { label: string; value: number }[] = [];
-        for (let s = MinFontSize; s <= MaxFontSize; s++) {
+        for (let s = appconst.MinFontSize; s <= appconst.MaxFontSize; s++) {
             availableFontSizes.push({ label: s + "px", value: s });
         }
         return availableFontSizes;
@@ -116,7 +112,7 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
             return null;
         }
 
-        let cdata: ClientDataType = GlobalModel.clientData.get();
+        let cdata: types.ClientDataType = GlobalModel.clientData.get();
         let openAIOpts = cdata.openaiopts ?? {};
         let apiTokenStr = isBlank(openAIOpts.apitoken) ? "(not set)" : "********";
         let maxTokensStr = String(
@@ -151,7 +147,7 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
                     <div className="settings-field">
                         <div className="settings-label">Client Version</div>
                         <div className="settings-input">
-                            {VERSION} {BUILD}
+                            {appconst.VERSION} {appconst.BUILD}
                         </div>
                     </div>
                     <div className="settings-field">

src/app/common/elements/markdown.less

@@ -5,6 +5,7 @@
     margin-bottom: 10px;
     font-family: @markdown-font;
     font-size: 14px;
+    overflow-wrap: break-word;
 
     code {
         background-color: @markdown-highlight;

src/app/common/elements/markdown.tsx

@@ -6,7 +6,7 @@ import * as mobxReact from "mobx-react";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import cn from "classnames";
-import { GlobalModel } from "../../../model/model";
+import { GlobalModel } from "../../../models";
 
 import "./markdown.less";
 

src/app/common/elements/passwordfield.tsx

@@ -60,7 +60,13 @@ class PasswordField extends TextField {
         };
 
         return (
-            <div className={cn(`wave-textfield wave-password ${className || ""}`, { focused: focused, error: error })}>
+            <div
+                className={cn(`wave-textfield wave-password ${className || ""}`, {
+                    focused: focused,
+                    error: error,
+                    "no-label": !label,
+                })}
+            >
                 {decoration?.startDecoration && <>{decoration.startDecoration}</>}
                 <div className="wave-textfield-inner">
                     <label

src/app/common/elements/resizablesidebar.tsx

@@ -6,7 +6,7 @@ import * as mobxReact from "mobx-react";
 import * as mobx from "mobx";
 import { boundMethod } from "autobind-decorator";
 import cn from "classnames";
-import { GlobalModel, GlobalCommandRunner } from "../../../model/model";
+import { GlobalModel, GlobalCommandRunner } from "../../../models";
 import { MagicLayout } from "../../magiclayout";
 
 import "./resizablesidebar.less";

src/app/common/elements/showwaveshellinstallprompt.tsx

@@ -1,7 +1,7 @@
 // Copyright 2023, Command Line Inc.
 // SPDX-License-Identifier: Apache-2.0
 
-import { GlobalModel } from "../../../model/model";
+import { GlobalModel } from "../../../models";
 import * as appconst from "../../appconst";
 
 function ShowWaveShellInstallPrompt(callbackFn: () => void) {

src/app/common/modals/about.tsx

@@ -5,18 +5,14 @@ import * as React from "react";
 import * as mobxReact from "mobx-react";
 import * as mobx from "mobx";
 import { boundMethod } from "autobind-decorator";
-import { GlobalModel } from "../../../model/model";
+import { GlobalModel } from "../../../models";
 import { Modal, LinkButton } from "../elements";
 import * as util from "../../../util/util";
+import * as appconst from "../../appconst";
 
 import logo from "../../assets/waveterm-logo-with-bg.svg";
 import "./about.less";
 
-// @ts-ignore
-const VERSION = __WAVETERM_VERSION__;
-// @ts-ignore
-let BUILD = __WAVETERM_BUILD__;
-
 @mobxReact.observer
 class AboutModal extends React.Component<{}, {}> {
     @boundMethod
@@ -42,7 +38,7 @@ class AboutModal extends React.Component<{}, {}> {
         return (
             <div className="status updated">
                 <div className="text-selectable">
-                    Client Version {VERSION} ({BUILD})
+                    Client Version {appconst.VERSION} ({appconst.BUILD})
                 </div>
             </div>
         );
@@ -55,7 +51,7 @@ class AboutModal extends React.Component<{}, {}> {
                         <span>Up to Date</span>
                     </div>
                     <div className="selectable">
-                        Client Version {VERSION} ({BUILD})
+                        Client Version {appconst.VERSION} ({appconst.BUILD})
                     </div>
                 </div>
             );
@@ -67,7 +63,7 @@ class AboutModal extends React.Component<{}, {}> {
                     <span>Outdated Version</span>
                 </div>
                 <div className="selectable">
-                    Client Version {VERSION} ({BUILD})
+                    Client Version {appconst.VERSION} ({appconst.BUILD})
                 </div>
                 <div>
                     <button onClick={this.updateApp} className="button color-green text-secondary">

src/app/common/modals/alert.tsx

@@ -6,7 +6,7 @@ import * as mobxReact from "mobx-react";
 import { boundMethod } from "autobind-decorator";
 import { If } from "tsx-control-statements/components";
 import { Markdown, Modal, Button, Checkbox } from "../elements";
-import { GlobalModel, GlobalCommandRunner } from "../../../model/model";
+import { GlobalModel, GlobalCommandRunner } from "../../../models";
 
 import "./alert.less";
 

src/app/common/modals/clientstop.tsx

@@ -5,7 +5,7 @@ import * as React from "react";
 import * as mobxReact from "mobx-react";
 import { boundMethod } from "autobind-decorator";
 import { If } from "tsx-control-statements/components";
-import { GlobalModel } from "../../../model/model";
+import { GlobalModel } from "../../../models";
 import { Modal, Button } from "../elements";
 
 import "./clientstop.less";

src/app/common/modals/createremoteconn.tsx

@@ -6,7 +6,7 @@ import * as mobxReact from "mobx-react";
 import * as mobx from "mobx";
 import { boundMethod } from "autobind-decorator";
 import { If } from "tsx-control-statements/components";
-import { GlobalModel, GlobalCommandRunner, RemotesModel } from "../../../model/model";
+import { GlobalModel, GlobalCommandRunner, RemotesModel } from "../../../models";
 import * as T from "../../../types/types";
 import {
     Modal,

src/app/common/modals/disconnected.tsx

@@ -5,7 +5,7 @@ import * as React from "react";
 import * as mobxReact from "mobx-react";
 import * as mobx from "mobx";
 import { boundMethod } from "autobind-decorator";
-import { GlobalModel } from "../../../model/model";
+import { GlobalModel } from "../../../models";
 import { Modal, Button } from "../elements";
 
 import "./disconnected.less";

src/app/common/modals/editremoteconn.tsx

@@ -6,7 +6,7 @@ import * as mobxReact from "mobx-react";
 import * as mobx from "mobx";
 import { If } from "tsx-control-statements/components";
 import { boundMethod } from "autobind-decorator";
-import { GlobalModel, GlobalCommandRunner, RemotesModel } from "../../../model/model";
+import { GlobalModel, GlobalCommandRunner, RemotesModel } from "../../../models";
 import * as T from "../../../types/types";
 import { Modal, TextField, InputDecoration, Dropdown, PasswordField, Tooltip } from "../elements";
 import * as util from "../../../util/util";

src/app/common/modals/index.tsx

@@ -9,3 +9,4 @@ export { TabSwitcherModal } from "./tabswitcher";
 export { SessionSettingsModal } from "./sessionsettings";
 export { ScreenSettingsModal } from "./screensettings";
 export { LineSettingsModal } from "./linesettings";
+export { UserInputModal } from "./userinput";

src/app/common/modals/linesettings.tsx

@@ -5,7 +5,7 @@ import * as React from "react";
 import * as mobxReact from "mobx-react";
 import * as mobx from "mobx";
 import { boundMethod } from "autobind-decorator";
-import { GlobalModel, GlobalCommandRunner } from "../../../model/model";
+import { GlobalModel, GlobalCommandRunner } from "../../../models";
 import { SettingsError, Modal, Dropdown } from "../elements";
 import { LineType, RendererPluginType } from "../../../types/types";
 import { PluginModel } from "../../../plugins/plugins";

src/app/common/modals/provider.tsx

@@ -3,7 +3,7 @@
 
 import * as React from "react";
 import * as mobxReact from "mobx-react";
-import { GlobalModel } from "../../../model/model";
+import { GlobalModel } from "../../../models";
 import { TosModal } from "./tos";
 
 @mobxReact.observer
@@ -17,7 +17,7 @@ class ModalsProvider extends React.Component {
         for (let i = 0; i < store.length; i++) {
             let entry = store[i];
             let Comp = entry.component;
-            rtn.push(<Comp key={entry.uniqueKey} />);
+            rtn.push(<Comp key={entry.uniqueKey} {...entry.props} />);
         }
         return <>{rtn}</>;
     }

src/app/common/modals/registry.tsx

@@ -12,19 +12,21 @@ import {
     SessionSettingsModal,
     ScreenSettingsModal,
     LineSettingsModal,
+    UserInputModal,
 } from "../modals";
 import * as constants from "../../appconst";
 
-const modalsRegistry: { [key: string]: () => React.ReactElement } = {
-    [constants.ABOUT]: () => <AboutModal />,
-    [constants.CREATE_REMOTE]: () => <CreateRemoteConnModal />,
-    [constants.VIEW_REMOTE]: () => <ViewRemoteConnDetailModal />,
-    [constants.EDIT_REMOTE]: () => <EditRemoteConnModal />,
-    [constants.ALERT]: () => <AlertModal />,
-    [constants.SCREEN_SETTINGS]: () => <ScreenSettingsModal />,
-    [constants.SESSION_SETTINGS]: () => <SessionSettingsModal />,
-    [constants.LINE_SETTINGS]: () => <LineSettingsModal />,
-    [constants.TAB_SWITCHER]: () => <TabSwitcherModal />,
+const modalsRegistry: { [key: string]: React.ComponentType } = {
+    [constants.ABOUT]: AboutModal,
+    [constants.CREATE_REMOTE]: CreateRemoteConnModal,
+    [constants.VIEW_REMOTE]: ViewRemoteConnDetailModal,
+    [constants.EDIT_REMOTE]: EditRemoteConnModal,
+    [constants.ALERT]: AlertModal,
+    [constants.SCREEN_SETTINGS]: ScreenSettingsModal,
+    [constants.SESSION_SETTINGS]: SessionSettingsModal,
+    [constants.LINE_SETTINGS]: LineSettingsModal,
+    [constants.TAB_SWITCHER]: TabSwitcherModal,
+    [constants.USER_INPUT]: UserInputModal,
 };
 
 export { modalsRegistry };