added openai bug fix

package.json

@@ -32,16 +32,15 @@
         "electron-updater": "^6.1.8",
         "framer-motion": "^10.16.16",
         "mobx": "6.12",
-        "mobx-react": "^9.1.1",
+        "mobx-react": "^7.5.0",
         "monaco-editor": "^0.44.0",
         "mustache": "^4.2.0",
         "node-fetch": "^3.2.10",
         "overlayscrollbars": "^2.6.1",
         "overlayscrollbars-react": "^0.5.5",
         "papaparse": "^5.4.1",
-        "preact": "^10.20.1",
-        "react": "npm:@preact/compat",
-        "react-dom": "npm:@preact/compat",
+        "react": "^18.1.0",
+        "react-dom": "^18.1.0",
         "react-markdown": "^9.0.0",
         "remark": "^15.0.1",
         "remark-gfm": "^4.0.0",
@@ -50,10 +49,8 @@
         "tsx-control-statements": "^5.1.1",
         "uuid": "^9.0.0",
         "winston": "^3.8.2",
-        "xterm": "^5.3.0",
-        "xterm-addon-serialize": "^0.11.0",
-        "xterm-addon-web-links": "^0.9.0",
-        "xterm-addon-webgl": "^0.16.0"
+        "xterm": "^5.0.0",
+        "xterm-addon-web-links": "^0.9.0"
     },
     "devDependencies": {
         "@babel/cli": "^7.17.10",
@@ -72,6 +69,7 @@
         "@types/electron": "^1.6.10",
         "@types/node": "^20.11.0",
         "@types/papaparse": "^5.3.10",
+        "@types/react": "^18.0.12",
         "@types/semver": "^7.5.6",
         "@types/sprintf-js": "^1.1.3",
         "@types/throttle-debounce": "^5.0.1",
@@ -105,4 +103,4 @@
     "scripts": {
         "postinstall": "electron-builder install-app-deps"
     }
-}
+}

public/themes/default.css

@@ -87,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);

public/themes/light.css

@@ -36,8 +36,8 @@
     /* 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);

src/app/app.tsx

@@ -28,7 +28,7 @@ import "./app.less";
 dayjs.extend(localizedFormat);
 
 @mobxReact.observer
-class App extends React.PureComponent<{}, {}> {
+class App extends React.Component<{}, {}> {
     dcWait: OV<boolean> = mobx.observable.box(false, { name: "dcWait" });
     mainContentRef: React.RefObject<HTMLDivElement> = React.createRef();
 

src/app/bookmarks/bookmarks.tsx

@@ -22,7 +22,7 @@ type BookmarkProps = {
     bookmark: BookmarkType;
 };
 
-class BookmarkKeybindings extends React.PureComponent<{}, {}> {
+class BookmarkKeybindings extends React.Component<{}, {}> {
     @boundMethod
     componentDidMount(): void {
         let keybindManager = GlobalModel.keybindManager;
@@ -76,7 +76,7 @@ class BookmarkKeybindings extends React.PureComponent<{}, {}> {
 }
 
 @mobxReact.observer
-class Bookmark extends React.PureComponent<BookmarkProps, {}> {
+class Bookmark extends React.Component<BookmarkProps, {}> {
     @boundMethod
     handleDeleteClick(): void {
         let { bookmark } = this.props;
@@ -232,7 +232,7 @@ class Bookmark extends React.PureComponent<BookmarkProps, {}> {
 }
 
 @mobxReact.observer
-class BookmarksView extends React.PureComponent<{}, {}> {
+class BookmarksView extends React.Component<{}, {}> {
     @boundMethod
     handleClose() {
         GlobalModel.bookmarksModel.closeView();

src/app/clientsettings/clientsettings.tsx

@@ -14,7 +14,7 @@ import * as appconst from "@/app/appconst";
 import "./clientsettings.less";
 import { MainView } from "../common/elements/mainview";
 
-class ClientSettingsKeybindings extends React.PureComponent<{}, {}> {
+class ClientSettingsKeybindings extends React.Component<{}, {}> {
     componentDidMount() {
         let clientSettingsViewModel = GlobalModel.clientSettingsViewModel;
         let keybindManager = GlobalModel.keybindManager;
@@ -34,7 +34,7 @@ class ClientSettingsKeybindings extends React.PureComponent<{}, {}> {
 }
 
 @mobxReact.observer
-class ClientSettingsView extends React.PureComponent<{ model: RemotesModel }, { hoveredItemId: string }> {
+class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hoveredItemId: string }> {
     errorMessage: OV<string> = mobx.observable.box(null, { name: "ClientSettings-errorMessage" });
 
     @boundMethod

src/app/common/elements/button.less

@@ -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;
     }

src/app/common/elements/button.tsx

@@ -16,7 +16,7 @@ interface ButtonProps {
     termInline?: boolean;
 }
 
-class Button extends React.PureComponent<ButtonProps> {
+class Button extends React.Component<ButtonProps> {
     static defaultProps = {
         style: {},
         className: "primary",

src/app/common/elements/checkbox.tsx

@@ -7,7 +7,7 @@ import cn from "classnames";
 
 import "./checkbox.less";
 
-class Checkbox extends React.PureComponent<
+class Checkbox extends React.Component<
     {
         checked?: boolean;
         defaultChecked?: boolean;

src/app/common/elements/cmdstrcode.tsx

@@ -11,7 +11,7 @@ import { ReactComponent as CopyIcon } from "@/assets/icons/history/copy.svg";
 
 import "./cmdstrcode.less";
 
-class CmdStrCode extends React.PureComponent<
+class CmdStrCode extends React.Component<
     {
         cmdstr: string;
         onUse: () => void;

src/app/common/elements/datepicker.tsx

@@ -457,7 +457,7 @@ const DatePicker: React.FC<DatePickerProps> = ({ selectedDate, format = "MM/DD/Y
                                 ref={inputRef}
                                 type="text"
                                 value={dateParts[part]}
-                                onChange={(e) => handleDatePartChange(part, (e.target as HTMLInputElement).value)}
+                                onChange={(e) => handleDatePartChange(part, e.target.value)}
                                 onKeyDown={(e) => handleKeyDown(e, part)}
                                 onMouseDown={(e) => handleMouseDown(e, part)}
                                 onFocus={(e) => handleFocus(e, part)}

src/app/common/elements/dropdown.tsx

@@ -36,7 +36,8 @@ interface DropdownState {
     isTouched: boolean;
 }
 
-class Dropdown extends React.PureComponent<DropdownProps, DropdownState> {
+@mobxReact.observer
+class Dropdown extends React.Component<DropdownProps, DropdownState> {
     wrapperRef: React.RefObject<HTMLDivElement>;
     menuRef: React.RefObject<HTMLDivElement>;
     timeoutId: any;
@@ -52,7 +53,7 @@ class Dropdown extends React.PureComponent<DropdownProps, DropdownState> {
         };
         this.wrapperRef = React.createRef();
         this.menuRef = React.createRef();
-        this.curUuid = uuidv4();
+        this.curUuid == uuidv4();
     }
 
     componentDidMount() {
@@ -99,9 +100,6 @@ class Dropdown extends React.PureComponent<DropdownProps, DropdownState> {
 
     @boundMethod
     handleClick() {
-        if (!this.state.isOpen || !this.state.isTouched) {
-            this.registerKeybindings();
-        }
         this.toggleDropdown();
     }
 
@@ -111,7 +109,6 @@ class Dropdown extends React.PureComponent<DropdownProps, DropdownState> {
         this.registerKeybindings();
     }
 
-    @boundMethod
     registerKeybindings() {
         let keybindManager = GlobalModel.keybindManager;
         let domain = "dropdown-" + this.curUuid;
@@ -125,7 +122,6 @@ class Dropdown extends React.PureComponent<DropdownProps, DropdownState> {
         });
         keybindManager.registerKeybinding("control", domain, "generic:cancel", (waveEvent) => {
             this.setState({ isOpen: false });
-            this.unregisterKeybindings();
             return true;
         });
         keybindManager.registerKeybinding("control", domain, "generic:selectAbove", (waveEvent) => {
@@ -169,22 +165,20 @@ class Dropdown extends React.PureComponent<DropdownProps, DropdownState> {
         }
     }
 
-    @boundMethod
     handleBlur() {
         this.unregisterKeybindings();
     }
 
-    @boundMethod
     unregisterKeybindings() {
         let domain = "dropdown-" + this.curUuid;
         GlobalModel.keybindManager.unregisterDomain(domain);
     }
 
     @boundMethod
-    handleKeyDown(event: React.TargetedEvent) {}
+    handleKeyDown(event: React.KeyboardEvent) {}
 
     @boundMethod
-    handleSelect(value: string, event?: React.TargetedEvent) {
+    handleSelect(value: string, event?: React.MouseEvent | React.KeyboardEvent) {
         const { onChange } = this.props;
         if (event) {
             event.stopPropagation(); // This stops the event from bubbling up to the wrapper
@@ -195,7 +189,6 @@ class Dropdown extends React.PureComponent<DropdownProps, DropdownState> {
         }
         onChange(value);
         this.setState({ isOpen: false, isTouched: true });
-        this.unregisterKeybindings();
     }
 
     @boundMethod

src/app/common/elements/inlinesettingstextedit.tsx

@@ -14,7 +14,7 @@ import { v4 as uuidv4 } from "uuid";
 import "./inlinesettingstextedit.less";
 
 @mobxReact.observer
-class InlineSettingsTextEdit extends React.PureComponent<
+class InlineSettingsTextEdit extends React.Component<
     {
         text: string;
         value: string;

src/app/common/elements/inputdecoration.tsx

@@ -13,7 +13,7 @@ interface InputDecorationProps {
 }
 
 @mobxReact.observer
-class InputDecoration extends React.PureComponent<InputDecorationProps, {}> {
+class InputDecoration extends React.Component<InputDecorationProps, {}> {
     render() {
         const { children, position = "end" } = this.props;
         return (

src/app/common/elements/linkbutton.tsx

@@ -11,7 +11,7 @@ interface LinkButtonProps extends ButtonProps {
     target?: string;
 }
 
-class LinkButton extends React.PureComponent<LinkButtonProps> {
+class LinkButton extends React.Component<LinkButtonProps> {
     render() {
         const { leftIcon, rightIcon, children, className, ...rest } = this.props;
 

src/app/common/elements/mainview.tsx

@@ -9,7 +9,7 @@ import { GlobalModel } from "@/models";
 import "./mainview.less";
 
 @mobxReact.observer
-class MainView extends React.PureComponent<{
+class MainView extends React.Component<{
     title: string;
     onClose: () => void;
     children: React.ReactNode;

src/app/common/elements/markdown.tsx

@@ -28,10 +28,7 @@ function CodeRenderer(props: any): any {
 }
 
 @mobxReact.observer
-class CodeBlockMarkdown extends React.PureComponent<
-    { children: React.ReactNode; codeSelectSelectedIndex?: number },
-    {}
-> {
+class CodeBlockMarkdown extends React.Component<{ children: React.ReactNode; codeSelectSelectedIndex?: number }, {}> {
     blockIndex: number;
     blockRef: React.RefObject<HTMLPreElement>;
 
@@ -42,9 +39,9 @@ class CodeBlockMarkdown extends React.PureComponent<
     }
 
     render() {
-        let clickHandler: (e: React.JSX.TargetedMouseEvent<HTMLElement>, blockIndex: number) => void;
+        let clickHandler: (e: React.MouseEvent<HTMLElement>, blockIndex: number) => void;
         let inputModel = GlobalModel.inputModel;
-        clickHandler = (e: React.JSX.TargetedMouseEvent<HTMLElement>, blockIndex: number) => {
+        clickHandler = (e: React.MouseEvent<HTMLElement>, blockIndex: number) => {
             inputModel.setCodeSelectSelectedCodeBlock(blockIndex);
         };
         let selected = this.blockIndex == this.props.codeSelectSelectedIndex;
@@ -61,7 +58,7 @@ class CodeBlockMarkdown extends React.PureComponent<
 }
 
 @mobxReact.observer
-class Markdown extends React.PureComponent<
+class Markdown extends React.Component<
     { text: string; style?: any; extraClassName?: string; codeSelect?: boolean },
     {}
 > {
@@ -69,7 +66,7 @@ class Markdown extends React.PureComponent<
         if (codeSelect) {
             return <CodeBlockMarkdown codeSelectSelectedIndex={codeSelectIndex}>{props.children}</CodeBlockMarkdown>;
         } else {
-            const clickHandler = (e: React.JSX.TargetedMouseEvent<HTMLElement>) => {
+            const clickHandler = (e: React.MouseEvent<HTMLElement>) => {
                 let blockText = (e.target as HTMLElement).innerText;
                 if (blockText) {
                     blockText = blockText.replace(/\n$/, ""); // remove trailing newline

src/app/common/elements/modal.tsx

@@ -39,7 +39,7 @@ interface ModalFooterProps {
     keybindings?: boolean;
 }
 
-class ModalKeybindings extends React.PureComponent<{ onOk?: () => void; onCancel?: () => void }, {}> {
+class ModalKeybindings extends React.Component<{ onOk?: () => void; onCancel?: () => void }, {}> {
     curId: string;
 
     @boundMethod
@@ -105,7 +105,7 @@ interface ModalProps {
     onClickBackdrop?: () => void;
 }
 
-class Modal extends React.PureComponent<ModalProps> {
+class Modal extends React.Component<ModalProps> {
     static Header = ModalHeader;
     static Footer = ModalFooter;
 

src/app/common/elements/numberfield.tsx

@@ -10,7 +10,7 @@ class NumberField extends TextField {
     @boundMethod
     handleInputChange(e: React.ChangeEvent<HTMLInputElement>) {
         const { required, onChange } = this.props;
-        const inputValue = (e.target as HTMLInputElement).value;
+        const inputValue = e.target.value;
 
         // Allow only numeric input
         if (inputValue === "" || /^\d*$/.test(inputValue)) {