restructured plugins (#30)

src/app/app.less

@@ -367,3 +367,56 @@ a.a-block {
     }
 }
 
+.alt-view {
+    background-color: #111;
+    overflow-y: auto;
+    flex-grow: 1;
+
+    .alt-title {
+        margin: 20px 10px 0px 5px;
+        padding-left: 10px;
+        padding-bottom: 12px;
+        color: @term-bright-white;
+        border-bottom: 1px solid white;
+    }
+
+    .alt-list {
+        color: @term-white;
+        margin: 4px 10px 5px 5px;
+        border-bottom: 1px solid white;
+    }
+
+    .no-content {
+        color: @term-white;
+        padding: 30px 10px 35px 10px;
+        border-bottom: 1px solid white;
+    }
+
+    .close-button {
+        position: absolute;
+        padding: 4px;
+
+        color: #aaa;
+        right: 15px;
+        top: 18px;
+        cursor: pointer;
+
+        &:hover {
+            color: #fff;
+        }
+    }
+
+    .alt-help {
+        color: @term-white;
+        margin-top: 20px;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+
+        margin-bottom: 10px;
+
+        .help-entry {
+            margin-left: 20px;
+        }
+    }
+}

src/app/line/linecomps.tsx

@@ -28,9 +28,9 @@ import { ReactComponent as MinusIcon } from "../assets/icons/minus.svg";
 
 import type { LineContainerModel } from "../../model/model";
 import { renderCmdText } from "../common/common";
-import { SimpleBlobRenderer } from "../../plugins/renderer/basicrenderer";
-import { IncrementalRenderer } from "../../plugins/renderer/incrementalrenderer";
-import { TerminalRenderer } from "../../plugins/terminal/Terminal";
+import { SimpleBlobRenderer } from "../../plugins/prompt-core/renderer/basicrenderer";
+import { IncrementalRenderer } from "../../plugins/prompt-core/renderer/incrementalrenderer";
+import { TerminalRenderer } from "../../plugins/prompt-core/terminal/terminal";
 import { isBlank } from "../../util/util";
 import { PluginModel } from "../../plugins/plugins";
 import { Prompt } from "../common/prompt/prompt";

src/app/line/lines.less

@@ -45,7 +45,7 @@
     .line-header {
         display: flex;
         flex-direction: row;
-        height: 36px;
+        padding-bottom: 0.7em;
         width: 100%;
 
         &.is-expanded {
@@ -332,8 +332,6 @@
         display: flex;
         flex-direction: row;
 
-        margin-top: -4px;
-
         .simple-line-status {
             margin-top: 5px;
         }
@@ -445,8 +443,7 @@
 .lines {
     display: flex;
     flex-direction: column;
-    height: 80vh;
-    overflow-y: scroll;
+    overflow-y: auto;
     padding: 10px 0 10px 0;
     flex-grow: 1;
     position: relative;

src/app/line/renderer/basicrenderer.tsx

@@ -19,12 +19,10 @@ import type {
     LineType,
     TermContextUnion,
     RendererContainerType,
-} from "../../types/types";
-import * as T from "../../types/types";
-import { PacketDataBuffer } from "../../common/prompt/ptydata";
-import { debounce, throttle } from "throttle-debounce";
-import * as util from "../../util/util";
-import { GlobalModel } from "../../model/model";
+} from "../../../types/types";
+import { debounce } from "throttle-debounce";
+import * as util from "../../../util/util";
+import { GlobalModel } from "../../../model/model";
 
 type OV<V> = mobx.IObservableValue<V>;
 type CV<V> = mobx.IComputedValue<V>;

src/index.less

@@ -1,5 +1,5 @@
 @base-color: #eceeec;
-@base-background: rgba(21, 23, 21, 1.0);
+@base-background: rgba(21, 23, 21, 1);
 @base-background-transparent: rgba(21, 23, 21, 0.7);
 @base-background-dev: rgba(21, 23, 21, 1);
 @base-border: rgba(241, 246, 243, 0.08);
@@ -41,4 +41,3 @@
 @soft-blue: #729fcf;
 
 @active-menu-color: rgb(0, 71, 171);
-

src/model/model.ts

@@ -11,7 +11,7 @@ import {
     boundInt,
     isModKeyPress,
 } from "../util/util";
-import { TermWrap } from "../plugins/terminal/term";
+import { TermWrap } from "../plugins/prompt-core/terminal/term";
 import type {
     SessionDataType,
     LineType,

src/plugins/code/code.less

@@ -0,0 +1,127 @@
+@import "../../index.less";
+
+.code-renderer {
+    .scroller {
+        padding-top: 10px;
+        padding-bottom: 15px;
+    }
+
+    .monaco-editor .monaco-editor-background {
+        background-color: rgba(255, 255, 255, 0.075) !important;
+    }
+    .monaco-editor .scrollbar {
+        height: 4px !important;
+        width: 4px !important;
+    }
+    .monaco-editor .scrollbar .slider {
+        background-color: rgba(255, 255, 255) !important;
+    }
+
+    .cmd-hints,
+    .dropdown {
+        display: inline-block;
+        position: relative;
+        min-width: 6rem;
+        max-width: 6rem;
+        margin-right: 8px;
+    }
+    .hint-item {
+        border-radius: 4px 4px 0 0;
+        padding: 3px 9px 2px 8px;
+        text-align: center;
+    }
+    section {
+        transition: height 0.3s ease-in-out;
+    }
+    .preview {
+        color: #000;
+        background-color: rgb(200, 200, 200);
+    }
+    .preview:hover {
+        background-color: @term-white !important;
+    }
+    .save-enabled {
+        color: @term-white;
+        background-color: #4e9a06;
+    }
+    .save-disabled {
+        color: rgb(52, 52, 52);
+        background-color: #aaaea7;
+        cursor: default !important;
+    }
+    .save-disabled:hover {
+        background-color: #aaaea7;
+    }
+    .close {
+        color: @term-white;
+        background-color: #9e0000;
+    }
+    .message {
+        color: @term-white;
+        border-radius: 6px;
+        margin-bottom: 1rem;
+        padding: 4px 1rem;
+        max-width: 80vw;
+    }
+    .readonly {
+        position: absolute;
+        top: calc(1.5rem + 3px);
+        right: 10rem;
+        border-radius: 5px;
+        background-color: @term-bright-red;
+        color: @term-white;
+        z-index: 1;
+        padding: 0 6px 2px;
+    }
+
+    /** customising react-split-it **/
+    .jsoneditor {
+        border: none !important;
+    }
+
+    .split-horizontal {
+        display: flex;
+        width: 100%;
+        height: 100%;
+    }
+    .split-vertical {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+    }
+
+    .gutter {
+        flex-shrink: 0;
+        flex-grow: 0;
+        background: rgb(100, 100, 100);
+        max-width: 4px;
+    }
+    .gutter-horizontal {
+        cursor: col-resize;
+    }
+    .gutter-vertical {
+        cursor: row-resize;
+    }
+    .gutter:hover {
+        background: rgb(155, 155, 155);
+    }
+    .gutter-dragging:hover {
+        background: rgb(155, 155, 155);
+    }
+
+    .pane {
+        flex-shrink: 1;
+        flex-grow: 1;
+        position: relative;
+        min-width: 20rem;
+    }
+    .pane-dragging {
+        overflow: hidden;
+    }
+
+    .scrollable {
+        height: 100vh;
+        max-height: 100vh;
+        overflow: auto;
+    }
+}

src/plugins/code/code.tsx

@@ -7,8 +7,7 @@ import Split from "react-split-it";
 import loader from "@monaco-editor/loader";
 loader.config({ paths: { vs: "./node_modules/monaco-editor/min/vs" } });
 
-import "./split.less";
-import "../plugins.less";
+import "./code.less";
 
 function renderCmdText(text: string): any {
     return <span>&#x2318;{text}</span>;
@@ -425,13 +424,12 @@ class SourceCodeRenderer extends React.Component<
         const { exitcode } = this.props;
         const { code, message, isPreviewerAvailable, showPreview, editorFraction } = this.state;
 
-        if (code == null)
-            return <div className="renderer-container code-renderer" style={{ height: this.props.savedHeight }} />;
+        if (code == null) return <div className="code-renderer" style={{ height: this.props.savedHeight }} />;
 
         if (exitcode === 1)
             return (
                 <div
-                    className="renderer-container code-renderer"
+                    className="code-renderer"
                     style={{
                         fontSize: GlobalModel.termFontSize.get(),
                         color: "white",
@@ -442,7 +440,7 @@ class SourceCodeRenderer extends React.Component<
             );
 
         return (
-            <div className="renderer-container code-renderer">
+            <div className="code-renderer">
                 <Split sizes={[editorFraction, 1 - editorFraction]} onSetSizes={this.setSizes}>
                     {this.getCodeEditor()}
                     {isPreviewerAvailable && showPreview && this.getPreviewer()}

src/plugins/code/split.less

@@ -1,52 +0,0 @@
-/* example-split.css */
-.code-renderer {
-    .jsoneditor {
-        border: none !important;
-    }
-
-    .split-horizontal {
-        display: flex;
-        width: 100%;
-        height: 100%;
-    }
-    .split-vertical {
-        display: flex;
-        flex-direction: column;
-        height: 100%;
-    }
-
-    .gutter {
-        flex-shrink: 0;
-        flex-grow: 0;
-        background: rgb(100, 100, 100);
-        max-width: 4px;
-    }
-    .gutter-horizontal {
-        cursor: col-resize;
-    }
-    .gutter-vertical {
-        cursor: row-resize;
-    }
-    .gutter:hover {
-        background: rgb(155, 155, 155);
-    }
-    .gutter-dragging:hover {
-        background: rgb(155, 155, 155);
-    }
-
-    .pane {
-        flex-shrink: 1;
-        flex-grow: 1;
-        position: relative;
-        min-width: 20rem;
-    }
-    .pane-dragging {
-        overflow: hidden;
-    }
-
-    .scrollable {
-        height: 100vh;
-        max-height: 100vh;
-        overflow: scroll;
-    }
-}

src/plugins/image/image.less

@@ -0,0 +1,8 @@
+@import "../../index.less";
+
+.image-renderer {
+    padding: 10px;
+    img {
+        display: block;
+    }
+}

src/plugins/image/image.tsx

@@ -1,9 +1,9 @@
 import * as React from "react";
 import * as mobx from "mobx";
 import * as mobxReact from "mobx-react";
-import { RendererContext, RendererOpts } from "../types/types";
+import { RendererContext, RendererOpts } from "../../types/types";
 
-import "./plugins.less";
+import "./image.less";
 
 type OV<V> = mobx.IObservableValue<V>;
 type CV<V> = mobx.IComputedValue<V>;
@@ -64,7 +64,7 @@ class SimpleImageRenderer extends React.Component<
         let dataBlob = this.props.data;
         if (dataBlob == null || dataBlob.notFound) {
             return (
-                <div className="renderer-container image-renderer" style={{ fontSize: this.props.opts.termFontSize }}>
+                <div className="image-renderer" style={{ fontSize: this.props.opts.termFontSize }}>
                     <div className="load-error-text">
                         ERROR: file {dataBlob && dataBlob.name ? JSON.stringify(dataBlob.name) : ""} not found
                     </div>
@@ -80,7 +80,7 @@ class SimpleImageRenderer extends React.Component<
             forceHeight = this.props.savedHeight;
         }
         return (
-            <div className="renderer-container image-renderer" style={{ height: forceHeight }}>
+            <div className="image-renderer" style={{ height: forceHeight }}>
                 <img
                     ref={this.imageRef}
                     style={{ maxHeight: opts.idealSize.height, maxWidth: opts.idealSize.width }}

src/plugins/markdown/markdown.less

@@ -0,0 +1,86 @@
+@import "../../index.less";
+
+.markdown-renderer {
+    color: @term-white;
+    margin-bottom: 10px;
+
+    .scroller {
+        overflow-y: auto;
+    }
+
+    code {
+        background-color: @term-black;
+        color: @term-white;
+        padding: 5px;
+    }
+
+    code.inline {
+        padding-top: 0;
+        padding-bottom: 0;
+    }
+
+    .title {
+        color: @term-white;
+        margin-top: 16px;
+        margin-bottom: 8px;
+    }
+
+    strong {
+        color: @term-white;
+    }
+
+    a {
+        color: #32afff;
+    }
+
+    table {
+        tr th {
+            color: @term-white;
+        }
+    }
+
+    ul {
+        list-style-type: disc;
+        list-style-position: outside;
+        margin-left: 16px;
+    }
+
+    ol {
+        list-style-position: outside;
+        margin-left: 19px;
+    }
+
+    blockquote {
+        margin: 4px 10px 4px 10px;
+        border-radius: 3px;
+        background-color: #444;
+        padding: 2px 4px 2px 6px;
+    }
+
+    pre {
+        background-color: inherit;
+        margin: 4px 10px 4px 10px;
+        padding: 2px 4px 2px 6px;
+    }
+
+    .title.is-1 {
+        border-bottom: 1px solid #777;
+        padding-bottom: 6px;
+    }
+    .title.is-2 {
+        border-bottom: 1px solid #777;
+        padding-bottom: 6px;
+    }
+    .title.is-3 {
+    }
+    .title.is-4 {
+    }
+    .title.is-5 {
+    }
+    .title.is-6 {
+    }
+}
+
+.markdown > *:first-child {
+    margin-top: 0 !important;
+}

src/plugins/markdown/markdown.tsx

@@ -1,13 +1,11 @@
 import * as React from "react";
 import * as mobx from "mobx";
 import * as mobxReact from "mobx-react";
-import cn from "classnames";
-import { If, For, When, Otherwise, Choose } from "tsx-control-statements/components";
-import { WindowSize, RendererContext, TermOptsType, LineType, RendererOpts } from "../types/types";
+import { RendererContext, RendererOpts } from "../../types/types";
 import { sprintf } from "sprintf-js";
-import { Markdown } from "../app/common/common";
+import { Markdown } from "../../app/common/common";
 
-import "./plugins.less";
+import "./markdown.less";
 
 type OV<V> = mobx.IObservableValue<V>;
 
@@ -46,10 +44,7 @@ class SimpleMarkdownRenderer extends React.Component<
         let dataBlob = this.props.data;
         if (dataBlob == null || dataBlob.notFound) {
             return (
-                <div
-                    className="renderer-container markdown-renderer"
-                    style={{ fontSize: this.props.opts.termFontSize }}
-                >
+                <div className="markdown-renderer" style={{ fontSize: this.props.opts.termFontSize }}>
                     <div className="load-error-text">
                         ERROR: file {dataBlob && dataBlob.name ? JSON.stringify(dataBlob.name) : ""} not found
                     </div>
@@ -58,33 +53,21 @@ class SimpleMarkdownRenderer extends React.Component<
         }
         if (this.markdownError.get() != null) {
             return (
-                <div
-                    className="renderer-container markdown-renderer"
-                    style={{ fontSize: this.props.opts.termFontSize }}
-                >
+                <div className="markdown-renderer" style={{ fontSize: this.props.opts.termFontSize }}>
                     <div className="load-error-text">{this.markdownError.get()}</div>
                 </div>
             );
         }
         if (this.markdownText.get() == null) {
-            return <div className="renderer-container markdown-renderer" style={{ height: this.props.savedHeight }} />;
+            return <div className="markdown-renderer" style={{ height: this.props.savedHeight }} />;
         }
         let opts = this.props.opts;
-        let markdownText = this.markdownText.get();
-        let maxWidth = opts.maxSize.width;
-        let minWidth = opts.maxSize.width;
-        if (minWidth > 1000) {
-            minWidth = 1000;
-        }
         return (
-            <div className="renderer-container markdown-renderer">
+            <div className="markdown-renderer">
                 <div
                     className="scroller"
                     style={{
                         maxHeight: opts.maxSize.height,
-                        minWidth: minWidth,
-                        width: "min-content",
-                        maxWidth: maxWidth,
                     }}
                 >
                     <Markdown text={this.markdownText.get()} style={{ maxHeight: opts.maxSize.height }} />

src/plugins/mustache/mustache.less

@@ -0,0 +1,19 @@
+@import "../../index.less";
+
+.mustache-renderer {
+    color: @term-white;
+    .cmd-hints {
+        display: inline-block !important;
+        position: relative;
+        margin-right: 26px;
+    }
+    .hint-item {
+        border-radius: 4px 4px 0 0;
+        padding: 3px 9px 2px 8px;
+        text-align: center;
+    }
+    .refresh-button {
+        color: rgb(52, 52, 52);
+        background-color: @term-white;
+    }
+}

src/plugins/mustache/mustache.tsx

@@ -1,17 +1,14 @@
 import * as React from "react";
 import * as mobx from "mobx";
 import * as mobxReact from "mobx-react";
-import cn from "classnames";
 import { boundMethod } from "autobind-decorator";
-import { If, For, When, Otherwise, Choose } from "tsx-control-statements/components";
-import * as T from "../types/types";
-import { sprintf } from "sprintf-js";
-import { isBlank } from "../util/util";
+import * as T from "../../types/types";
+import { isBlank } from "../../util/util";
 import mustache from "mustache";
 import * as DOMPurify from "dompurify";
-import { GlobalModel } from "../model/model";
+import { GlobalModel } from "../../model/model";
 
-import "./plugins.less";
+import "./mustache.less";
 
 type OV<V> = mobx.IObservableValue<V>;
 
@@ -146,10 +143,7 @@ class SimpleMustacheRenderer extends React.Component<
         let errorMessage = this.dataLoadError.get() ?? this.templateLoadError.get();
         if (errorMessage != null) {
             return (
-                <div
-                    className="renderer-container mustache-renderer"
-                    style={{ fontSize: this.props.opts.termFontSize }}
-                >
+                <div className="mustache-renderer" style={{ fontSize: this.props.opts.termFontSize }}>
                     <div className="load-error-text">ERROR: {errorMessage}</div>
                     {this.renderCmdHints()}
                 </div>
@@ -158,7 +152,7 @@ class SimpleMustacheRenderer extends React.Component<
         if (this.templateLoading.get() || this.dataLoading.get()) {
             return (
                 <div
-                    className="renderer-container mustache-renderer"
+                    className="mustache-renderer"
                     style={{ fontSize: this.props.opts.termFontSize, height: this.props.savedHeight }}
                 >
                     <div className="renderer-loading">
@@ -182,10 +176,7 @@ class SimpleMustacheRenderer extends React.Component<
             renderedText = DOMPurify.sanitize(renderedText);
         } catch (e) {
             return (
-                <div
-                    className="renderer-container mustache-renderer"
-                    style={{ fontSize: this.props.opts.termFontSize }}
-                >
+                <div className="mustache-renderer" style={{ fontSize: this.props.opts.termFontSize }}>
                     <div className="load-error-text">ERROR running template: {e.message}</div>
                     {this.renderCmdHints()}
                 </div>
@@ -193,7 +184,7 @@ class SimpleMustacheRenderer extends React.Component<
         }
         // TODO non-term content font-size (default to 16)
         return (
-            <div className="renderer-container mustache-renderer" style={{ fontSize: 16 }}>
+            <div className="mustache-renderer" style={{ fontSize: 16 }}>
                 <div
                     className="scroller"
                     style={{

src/plugins/openai/openai.less

@@ -0,0 +1,36 @@
+@import "../../index.less";
+
+.openai-renderer {
+    .openai-message {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+
+        .openai-role {
+            color: @term-bright-green;
+            font-weight: bold;
+            width: 100px;
+        }
+
+        .openai-role.openai-role-assistant {
+            color: @term-bright-white;
+        }
+
+        .openai-content-user {
+            white-space: pre;
+            color: @term-white;
+        }
+
+        .openai-content-assistant {
+            color: @term-white;
+        }
+
+        .openai-role-error {
+            color: @term-bright-red;
+        }
+
+        .openai-content-error {
+            color: @term-bright-red;
+        }
+    }
+}

src/plugins/openai/openai.tsx

@@ -1,13 +1,13 @@
 import * as React from "react";
 import * as mobx from "mobx";
 import * as mobxReact from "mobx-react";
-import * as T from "../types/types";
+import * as T from "../../types/types";
 import { debounce } from "throttle-debounce";
 import { boundMethod } from "autobind-decorator";
-import { PacketDataBuffer } from "./util/ptydata";
-import { Markdown } from "../app/common/common";
+import { PacketDataBuffer } from "../prompt-core/ptydata";
+import { Markdown } from "../../app/common/common";
 
-import "./plugins.less";
+import "./openai.less";
 
 type OV<V> = mobx.IObservableValue<V>;
 
@@ -227,14 +227,14 @@ class OpenAIRenderer extends React.Component<{ model: OpenAIRendererModel }> {
         let loadError = model.loadError.get();
         if (loadError != null) {
             return (
-                <div className="renderer-container openai-renderer openai-error" style={styleVal}>
+                <div className="openai-renderer openai-error" style={styleVal}>
                     {this.renderPrompt(cmd)}
                     {this.renderError()}
                 </div>
             );
         }
         return (
-            <div className="renderer-container openai-renderer" style={styleVal}>
+            <div className="openai-renderer" style={styleVal}>
                 {this.renderPrompt(cmd)}
                 {this.renderOutput(cmd)}
             </div>

src/plugins/plugins.less

@@ -1,324 +0,0 @@
-@import "../index.less";
-
-.alt-view {
-    background-color: #111;
-    overflow-y: auto;
-    flex-grow: 1;
-
-    .alt-title {
-        margin: 20px 10px 0px 5px;
-        padding-left: 10px;
-        padding-bottom: 12px;
-        color: @term-bright-white;
-        border-bottom: 1px solid white;
-    }
-
-    .alt-list {
-        color: @term-white;
-        margin: 4px 10px 5px 5px;
-        border-bottom: 1px solid white;
-    }
-
-    .no-content {
-        color: @term-white;
-        padding: 30px 10px 35px 10px;
-        border-bottom: 1px solid white;
-    }
-
-    .close-button {
-        position: absolute;
-        padding: 4px;
-
-        color: #aaa;
-        right: 15px;
-        top: 18px;
-        cursor: pointer;
-
-        &:hover {
-            color: #fff;
-        }
-    }
-
-    .alt-help {
-        color: @term-white;
-        margin-top: 20px;
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-
-        margin-bottom: 10px;
-
-        .help-entry {
-            margin-left: 20px;
-        }
-    }
-}
-
-.image-renderer {
-    padding: 10px;
-    img {
-        display: block;
-    }
-}
-
-.renderer-container {
-    margin-top: 1em;
-    .error-container {
-        color: @term-red;
-
-        padding: 5px;
-    }
-
-    .scroller {
-        overflow: auto;
-        display: flex;
-        flex-direction: row;
-        overscroll-behavior: contain;
-    }
-
-    .dropdown {
-        background: #dbdbdb;
-        color: @term-black;
-        border-radius: 6px 6px 0 0;
-
-        padding: 2px 0 5px 5px;
-        outline: none;
-    }
-}
-
-.renderer-container.code-renderer {
-    .scroller {
-        padding-top: 10px;
-        padding-bottom: 15px;
-    }
-
-    .monaco-editor .monaco-editor-background {
-        background-color: rgba(255, 255, 255, 0.075) !important;
-    }
-    .monaco-editor .scrollbar {
-        height: 4px !important;
-        width: 4px !important;
-    }
-    .monaco-editor .scrollbar .slider {
-        background-color: rgba(255, 255, 255) !important;
-    }
-
-    .cmd-hints,
-    .dropdown {
-        display: inline-block;
-        position: relative;
-        min-width: 6rem;
-        max-width: 6rem;
-        margin-right: 8px;
-    }
-    .hint-item {
-        border-radius: 4px 4px 0 0;
-        padding: 3px 9px 2px 8px;
-        text-align: center;
-    }
-    section {
-        transition: height 0.3s ease-in-out;
-    }
-    .preview {
-        color: #000;
-        background-color: rgb(200, 200, 200);
-    }
-    .preview:hover {
-        background-color: @term-white !important;
-    }
-    .save-enabled {
-        color: @term-white;
-        background-color: #4e9a06;
-    }
-    .save-disabled {
-        color: rgb(52, 52, 52);
-        background-color: #aaaea7;
-        cursor: default !important;
-    }
-    .save-disabled:hover {
-        background-color: #aaaea7;
-    }
-    .close {
-        color: @term-white;
-        background-color: #9e0000;
-    }
-    .message {
-        color: @term-white;
-        border-radius: 6px;
-        margin-bottom: 1rem;
-        padding: 4px 1rem;
-        max-width: 80vw;
-    }
-    .readonly {
-        position: absolute;
-        top: calc(1.5rem + 3px);
-        right: 10rem;
-        border-radius: 5px;
-        background-color: @term-bright-red;
-        color: @term-white;
-        z-index: 1;
-        padding: 0 6px 2px;
-    }
-}
-
-.renderer-container.mustache-renderer {
-    color: @term-white;
-    .cmd-hints {
-        display: inline-block !important;
-        position: relative;
-        margin-right: 26px;
-    }
-    .hint-item {
-        border-radius: 4px 4px 0 0;
-        padding: 3px 9px 2px 8px;
-        text-align: center;
-    }
-    .refresh-button {
-        color: rgb(52, 52, 52);
-        background-color: @term-white;
-    }
-}
-
-.renderer-container .content {
-    padding: 5px;
-    width: fit-content;
-
-    blockquote {
-        background-color: #222;
-    }
-
-    code {
-        background-color: #222;
-    }
-
-    pre {
-        background-color: #222;
-        margin: 2px 10px 6px 10px;
-        padding: 4px 4px 4px 6px;
-    }
-
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-        color: @term-white;
-    }
-}
-
-.openai-renderer {
-    .openai-message {
-        display: flex;
-        flex-direction: row;
-        justify-content: flex-start;
-
-        .openai-role {
-            color: @term-bright-green;
-            font-weight: bold;
-            width: 100px;
-        }
-
-        .openai-role.openai-role-assistant {
-            color: @term-bright-white;
-        }
-
-        .openai-content-user {
-            white-space: pre;
-            color: @term-white;
-        }
-
-        .openai-content-assistant {
-            color: @term-white;
-        }
-
-        .openai-role-error {
-            color: @term-bright-red;
-        }
-
-        .openai-content-error {
-            color: @term-bright-red;
-        }
-    }
-}
-
-.markdown {
-    color: @term-white;
-    margin-bottom: 10px;
-
-    code {
-        background-color: @term-black;
-        color: @term-white;
-        padding: 5px;
-    }
-
-    code.inline {
-        padding-top: 0;
-        padding-bottom: 0;
-    }
-
-    .title {
-        color: @term-white;
-        margin-top: 16px;
-        margin-bottom: 8px;
-    }
-
-    strong {
-        color: @term-white;
-    }
-
-    a {
-        color: #32afff;
-    }
-
-    table {
-        tr th {
-            color: @term-white;
-        }
-    }
-
-    ul {
-        list-style-type: disc;
-        list-style-position: outside;
-        margin-left: 16px;
-    }
-
-    ol {
-        list-style-position: outside;
-        margin-left: 19px;
-    }
-
-    blockquote {
-        margin: 4px 10px 4px 10px;
-        border-radius: 3px;
-        background-color: #444;
-        padding: 2px 4px 2px 6px;
-    }
-
-    pre {
-        background-color: inherit;
-        margin: 4px 10px 4px 10px;
-        padding: 2px 4px 2px 6px;
-    }
-
-    .title.is-1 {
-        border-bottom: 1px solid #777;
-        padding-bottom: 6px;
-    }
-    .title.is-2 {
-        border-bottom: 1px solid #777;
-        padding-bottom: 6px;
-    }
-    .title.is-3 {
-    }
-    .title.is-4 {
-    }
-    .title.is-5 {
-    }
-    .title.is-6 {
-    }
-}
-
-.markdown > *:first-child {
-    margin-top: 0 !important;
-}

src/plugins/plugins.ts

@@ -1,9 +1,9 @@
 import { RendererPluginType } from "../types/types";
-import { SimpleImageRenderer } from "./image";
-import { SimpleMarkdownRenderer } from "./markdown";
-import { SourceCodeRenderer } from "./code";
-import { SimpleMustacheRenderer } from "./mustache";
-import { OpenAIRenderer, OpenAIRendererModel } from "./openai";
+import { SimpleImageRenderer } from "./image/image";
+import { SimpleMarkdownRenderer } from "./markdown/markdown";
+import { SourceCodeRenderer } from "./code/code";
+import { SimpleMustacheRenderer } from "./mustache/mustache";
+import { OpenAIRenderer, OpenAIRendererModel } from "./openai/openai";
 import { isBlank } from "../util/util";
 import { sprintf } from "sprintf-js";
 

src/plugins/prompt-core/renderer/basicrenderer.tsx

@@ -1,30 +1,22 @@
 import * as React from "react";
 import * as mobxReact from "mobx-react";
 import * as mobx from "mobx";
-import { sprintf } from "sprintf-js";
-import { boundMethod } from "autobind-decorator";
-import { If, For, When, Otherwise, Choose } from "tsx-control-statements/components";
 import type {
     RendererModelInitializeParams,
     TermOptsType,
     RendererContext,
     RendererOpts,
-    SimpleBlobRendererComponent,
     RendererModelContainerApi,
     RendererPluginType,
     PtyDataType,
-    RendererModel,
     RendererOptsUpdate,
     LineStateType,
-    LineType,
     TermContextUnion,
     RendererContainerType,
-} from "../../types/types";
-import * as T from "../../types/types";
-import { PacketDataBuffer } from "../../common/prompt/ptydata";
+} from "../../../types/types";
 import { debounce, throttle } from "throttle-debounce";
-import * as util from "../../util/util";
-import { GlobalModel } from "../../model/model";
+import * as util from "../../../util/util";
+import { GlobalModel } from "../../../model/model";
 
 type OV<V> = mobx.IObservableValue<V>;
 type CV<V> = mobx.IComputedValue<V>;

src/plugins/prompt-core/terminal/term.ts

@@ -2,8 +2,8 @@ import * as mobx from "mobx";
 import { Terminal } from "xterm";
 import { sprintf } from "sprintf-js";
 import { boundMethod } from "autobind-decorator";
-import { windowWidthToCols, windowHeightToRows } from "../../util/textmeasure";
-import { boundInt } from "../../util/util";
+import { windowWidthToCols, windowHeightToRows } from "../../../util/textmeasure";
+import { boundInt } from "../../../util/util";
 import type {
     TermContextUnion,
     TermOptsType,
@@ -11,8 +11,8 @@ import type {
     RendererContext,
     WindowSize,
     PtyDataType,
-} from "../../types/types";
-import { getTheme } from "../../app/common/themes";
+} from "../../../types/types";
+import { getTheme } from "../../../app/common/themes";
 
 type DataUpdate = {
     data: Uint8Array;

src/plugins/prompt-core/terminal/terminal.less

@@ -1,9 +1,8 @@
-@import "../../index.less";
+@import "../../../index.less";
 @import "./xterm.less";
 
 .terminal-wrapper {
     position: relative;
-    margin-top: 1em;
 
     .term-block {
         position: absolute;
@@ -23,7 +22,7 @@
 
     &.focus .xterm {
         .xterm-screen {
-            overflow-y: scroll;
+            overflow-y: auto;
             overscroll-behavior: contain;
         }
 

src/plugins/prompt-core/terminal/terminal.tsx

@@ -5,11 +5,11 @@ import { boundMethod } from "autobind-decorator";
 import dayjs from "dayjs";
 import localizedFormat from "dayjs/plugin/localizedFormat";
 import { If } from "tsx-control-statements/components";
-import { GlobalModel, LineContainerModel } from "../../model/model";
-import { termHeightFromRows } from "../../util/textmeasure";
-import type { LineType } from "../../types/types";
+import { GlobalModel, LineContainerModel } from "../../../model/model";
+import { termHeightFromRows } from "../../../util/textmeasure";
+import type { LineType } from "../../../types/types";
 import cn from "classnames";
-import * as lineutil from "../../app/line/lineutil";
+import * as lineutil from "../../../app/line/lineutil";
 
 import "./terminal.less";
 
@@ -150,7 +150,7 @@ class TerminalRenderer extends React.Component<
             .get();
         let cmd = screen.getCmd(line); // will not be null
         let usedRows = screen.getUsedRows(lineutil.getRendererContext(line), line, cmd, width);
-        let termHeight = termHeightFromRows(usedRows <= 1 ? usedRows : usedRows + 3, GlobalModel.termFontSize.get());
+        let termHeight = termHeightFromRows(usedRows <= 1 ? usedRows : usedRows + 4, GlobalModel.termFontSize.get());
         let termLoaded = this.termLoaded.get();
         return (
             <div

src/plugins/prompt-core/terminal/xterm.less

@@ -94,7 +94,7 @@
 .xterm .xterm-viewport {
     /* On OS X this is required in order for the scroll bar to appear fully opaque */
     background-color: #000;
-    overflow-y: scroll;
+    overflow-y: auto;
     cursor: default;
     position: absolute;
     right: 0;

version.js

@@ -1,2 +1,2 @@
-const VERSION = "v0.3.1";
+const VERSION = "v0.4.0";
 module.exports = VERSION;