@peers-app/peers-ui 0.0.14

package/dist/screens/tools/tool-details.js

@@ -0,0 +1,68 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToolDetails = void 0;
+const react_1 = __importDefault(require("react"));
+const peers_sdk_1 = require("@peers-app/peers-sdk");
+const loading_indicator_1 = require("../../components/loading-indicator");
+const save_button_1 = require("../../components/save-button");
+const tabs_1 = require("../../components/tabs");
+const tool_code_1 = require("./tool-code");
+const tool_info_1 = require("./tool-info");
+const tool_schema_1 = require("./tool-schema");
+const hooks_1 = require("../../hooks");
+const input_1 = require("../../components/input");
+const tabs_state_1 = require("../../tabs-layout/tabs-state");
+const ToolDetails = (props) => {
+    const tool = (0, hooks_1.usePromise)(async () => {
+        const toolData = await (0, peers_sdk_1.Tools)().get(props.toolId);
+        if (!toolData)
+            return null;
+        (0, tabs_state_1.updateActiveTabTitle)(toolData.name || "Tool");
+        return (0, peers_sdk_1.Tools)().initDoc(toolData);
+    }, undefined, [props.toolId]);
+    if (tool === null) {
+        return react_1.default.createElement("div", null, "Tool not found");
+    }
+    if (!tool) {
+        return react_1.default.createElement(loading_indicator_1.LoadingIndicator, null);
+    }
+    function saveChanges() {
+        if (!tool)
+            return;
+        tool.save();
+    }
+    return (react_1.default.createElement("div", { className: "container-fluid p-3", style: { overflowY: 'hidden' } },
+        react_1.default.createElement("div", { className: "d-flex" },
+            react_1.default.createElement("div", null,
+                react_1.default.createElement("h4", null,
+                    react_1.default.createElement("i", { className: "bi bi-tools me-2" }))),
+            react_1.default.createElement("div", { className: "flex-grow-1" },
+                react_1.default.createElement("h4", null,
+                    react_1.default.createElement(input_1.Input, { key: tool.toolId, className: 'border border-0', style: { width: '100%', outline: 'none', backgroundColor: 'transparent' }, value: tool.qs.name }))),
+            react_1.default.createElement("div", null,
+                react_1.default.createElement(save_button_1.SaveButton, { key: tool.toolId, onClick: saveChanges, doc: tool }))),
+        react_1.default.createElement(tabs_1.Tabs, { key: tool.toolId, tabs: [
+                {
+                    name: 'Info', content: react_1.default.createElement(tabs_1.ScreenTabBody, null,
+                        react_1.default.createElement(tool_info_1.ToolInfo, { tool: tool }))
+                },
+                {
+                    name: 'Schema', content: react_1.default.createElement(tabs_1.ScreenTabBody, null,
+                        react_1.default.createElement(tool_schema_1.ToolSchema, { tool: tool }))
+                },
+                {
+                    name: 'Code', content: react_1.default.createElement(tabs_1.ScreenTabBody, null,
+                        react_1.default.createElement(tool_code_1.ToolCode, { tool: tool }))
+                },
+                // {
+                //   name: 'Tests', content:
+                //     <ScreenTabBody>
+                //       <ToolTestList toolId={tool.toolId} />
+                //     </ScreenTabBody>
+                // },
+            ] })));
+};
+exports.ToolDetails = ToolDetails;

package/dist/screens/tools/tool-info.d.ts

@@ -0,0 +1,5 @@
+import { IDoc, ITool } from "@peers-app/peers-sdk";
+import React from "react";
+export declare const ToolInfo: (props: {
+    tool: IDoc<ITool>;
+}) => React.JSX.Element;

package/dist/screens/tools/tool-info.js

@@ -0,0 +1,74 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToolInfo = void 0;
+const peers_sdk_1 = require("@peers-app/peers-sdk");
+const react_1 = __importStar(require("react"));
+const checkbox_1 = require("../../components/checkbox");
+const input_1 = require("../../components/input");
+const editor_inline_1 = require("../../components/markdown-editor/editor-inline");
+const ToolInfo = (props) => {
+    const { tool } = props;
+    const [markdownUsageObs] = (0, react_1.useState)(() => (0, peers_sdk_1.observable)(tool.usageDescription));
+    const [markdownDetailedObs] = (0, react_1.useState)(() => (0, peers_sdk_1.observable)(tool.detailedDescription || ''));
+    (0, react_1.useEffect)(() => {
+        const sub = markdownUsageObs.subscribe(() => {
+            tool.usageDescription = markdownUsageObs();
+        });
+        const sub2 = tool.qs.name.subscribe(() => {
+            tool.name = tool.qs.name().replaceAll(/\s/g, '_').replaceAll(/[^a-zA-Z0-9_-]/g, '');
+        });
+        const sub3 = markdownDetailedObs.subscribe(() => {
+            tool.detailedDescription = markdownDetailedObs();
+        });
+        return () => {
+            sub.dispose();
+            sub2.dispose();
+            sub3.dispose();
+        };
+    }, [tool]);
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement("small", null, "Name:"),
+        react_1.default.createElement(input_1.Input, { value: tool.qs.name, className: "form-control mb-3 p-0 ps-2", placeholder: "Tool name", title: "Tool name" }),
+        react_1.default.createElement("div", null,
+            react_1.default.createElement("label", { className: "form-label small mt-2 me-2" }, "Is Assistant Runner:"),
+            react_1.default.createElement(checkbox_1.Checkbox, { className: "form-check-input mt-2", checked: tool.qs.isAssistantRunner })),
+        react_1.default.createElement("small", null, "Usage Description:"),
+        react_1.default.createElement(editor_inline_1.MarkdownEditorInline, { value: markdownUsageObs }),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement("small", null, "Detailed Description:"),
+        react_1.default.createElement(editor_inline_1.MarkdownEditorInline, { value: markdownDetailedObs })));
+};
+exports.ToolInfo = ToolInfo;

package/dist/screens/tools/tool-list.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare function ToolList(): React.JSX.Element;

package/dist/screens/tools/tool-list.js

@@ -0,0 +1,123 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToolList = ToolList;
+const peers_sdk_1 = require("@peers-app/peers-sdk");
+const react_1 = __importStar(require("react"));
+const input_1 = require("../../components/input");
+const lazy_list_1 = require("../../components/lazy-list");
+const loading_indicator_1 = require("../../components/loading-indicator");
+const markdown_with_mentions_1 = require("../../components/markdown-with-mentions");
+const globals_1 = require("../../globals");
+const hooks_1 = require("../../hooks");
+function ToolList() {
+    const [searchTextObs] = (0, react_1.useState)(() => (0, peers_sdk_1.observable)(''));
+    const [searchText] = (0, hooks_1.useObservable)(searchTextObs);
+    const [cursorObs] = (0, react_1.useState)(() => (0, peers_sdk_1.observable)());
+    const [cursorId] = (0, react_1.useState)(() => (0, peers_sdk_1.observable)((0, peers_sdk_1.newid)()));
+    async function newCursor() {
+        let cursor;
+        const _searchText = searchText.trim();
+        if (_searchText) {
+            cursor = await (0, peers_sdk_1.Tools)().cursor({ name: { $matchWords: _searchText } }, { sortBy: ['-toolId'] });
+        }
+        else {
+            cursor = await (0, peers_sdk_1.Tools)().cursor(undefined, { sortBy: ['-toolId'] });
+        }
+        cursorObs(cursor);
+        cursorId((0, peers_sdk_1.newid)());
+        return cursor;
+    }
+    (0, react_1.useEffect)(() => {
+        const sub = searchTextObs.subscribe(() => {
+            cursorObs(undefined);
+            cursorId((0, peers_sdk_1.newid)());
+        });
+        return () => sub.dispose();
+    }, [searchText]);
+    async function searchSubmit(evt) {
+        if (evt.key !== "Enter")
+            return;
+        if (!searchText.trim())
+            return;
+        let toolName = searchText.trim().replace(/\s+/g, '_').replaceAll(/[^a-zA-Z0-9_]/g, '');
+        const tool = await (0, peers_sdk_1.Tools)().initRecord({
+            name: toolName,
+            usageDescription: searchText.trim(),
+            detailedDescription: '',
+            inputSchema: { type: peers_sdk_1.IOSchemaType.simple, fields: [{ name: 'input', type: peers_sdk_1.FieldType.string, description: '' }] },
+            outputSchema: { type: peers_sdk_1.IOSchemaType.simple, fields: [{ name: 'output', type: peers_sdk_1.FieldType.string, description: '' }] },
+        });
+        await (0, peers_sdk_1.Tools)().insert(tool);
+        (0, globals_1.mainContentPath)(`tools/${tool.toolId}`);
+    }
+    async function loadMore(existingTools) {
+        let moreMatches = [];
+        let cursor = cursorObs() || await newCursor();
+        for await (const tool of cursor) {
+            if (existingTools.find(w => w.toolId === tool.toolId))
+                continue;
+            moreMatches.push(tool);
+            if (searchText.length && moreMatches.length > 5)
+                break;
+            if (moreMatches.length >= 50)
+                break;
+        }
+        if (moreMatches.length === 0) {
+            cursorObs(undefined);
+        }
+        return moreMatches;
+    }
+    return (react_1.default.createElement("div", { className: 'container-fluid' },
+        react_1.default.createElement(input_1.Input, { value: searchTextObs, className: "form-control mt-3", style: { marginBottom: "10px" }, placeholder: "Search or create new tool", autoFocus: (0, globals_1.isDesktop)() ? true : false, onKeyUp: evt => searchSubmit(evt) }),
+        react_1.default.createElement("div", { className: "peers-list-container" },
+            react_1.default.createElement(lazy_list_1.LazyList, { key: cursorId(), loadMore: loadMore, scrollThreshold: 0.6, renderItems: (tools) => {
+                    return tools.map(tool => {
+                        let markdownContent = (tool.usageDescription + '\n\n---\n\n' + (tool.detailedDescription ?? ''));
+                        const maxLen = 500;
+                        if (markdownContent.length > maxLen) {
+                            markdownContent = markdownContent.substring(0, maxLen) + '...';
+                        }
+                        markdownContent = markdownContent.replace(/\n\n---\n\n$/, '');
+                        return (react_1.default.createElement("div", { key: tool.toolId, className: 'container-fluid pb-4' },
+                            react_1.default.createElement("i", { className: "bi bi-tools" }),
+                            "\u00A0",
+                            react_1.default.createElement("a", { href: `#tools/${tool.toolId}` }, tool.name),
+                            react_1.default.createElement("div", { style: { paddingLeft: '20px' } },
+                                react_1.default.createElement(markdown_with_mentions_1.MarkdownWithMentions, { content: markdownContent }))));
+                    });
+                }, loadingIndicator: react_1.default.createElement("div", { className: "d-flex justify-content-center", style: { height: 200 } },
+                    react_1.default.createElement(loading_indicator_1.LoadingIndicator, null)), endOfList: react_1.default.createElement("div", { className: "d-flex justify-content-center", style: { height: 200 } }) }))));
+}

package/dist/screens/tools/tool-schema.d.ts

@@ -0,0 +1,5 @@
+import { IDoc, ITool } from "@peers-app/peers-sdk";
+import React from "react";
+export declare const ToolSchema: (props: {
+    tool: IDoc<ITool>;
+}) => React.JSX.Element;

package/dist/screens/tools/tool-schema.js

@@ -0,0 +1,30 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToolSchema = void 0;
+const peers_sdk_1 = require("@peers-app/peers-sdk");
+const react_1 = __importDefault(require("react"));
+const io_schema_1 = require("../../components/io-schema");
+const hooks_1 = require("../../hooks");
+const ToolSchema = (props) => {
+    const { tool } = props;
+    (0, hooks_1.useObservable)(tool.qs.isAssistantRunner);
+    if (tool.isAssistantRunner && !tool.configSchema) {
+        tool.configSchema = {
+            type: peers_sdk_1.IOSchemaType.complex,
+            fields: [],
+        };
+    }
+    return (react_1.default.createElement("div", null,
+        tool.isAssistantRunner && (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement("span", { style: { width: '130px', display: 'inline-block' }, className: "fw-bold" }, "Config Schema:"),
+            react_1.default.createElement(io_schema_1.IOSchemaEditor, { ioSchema: tool.qs.configSchema, simpleValueName: "input" }),
+            react_1.default.createElement("br", null))),
+        react_1.default.createElement("span", { style: { width: '130px', display: 'inline-block' }, className: "fw-bold" }, "Input Schema:"),
+        react_1.default.createElement(io_schema_1.IOSchemaEditor, { ioSchema: tool.qs.inputSchema, simpleValueName: "input" }),
+        react_1.default.createElement("span", { style: { width: '130px', display: 'inline-block' }, className: "mt-4 fw-bold" }, "Output Schema:"),
+        react_1.default.createElement(io_schema_1.IOSchemaEditor, { ioSchema: tool.qs.outputSchema, simpleValueName: "output" })));
+};
+exports.ToolSchema = ToolSchema;

package/dist/screens/tools/tool-test-details.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+export declare const ToolTestDetails: (props: {
+    toolTestId: string;
+}) => React.JSX.Element;

package/dist/screens/tools/tool-test-details.js

@@ -0,0 +1,54 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToolTestDetails = void 0;
+const hooks_1 = require("../../hooks");
+const react_1 = __importDefault(require("react"));
+const peers_sdk_1 = require("@peers-app/peers-sdk");
+const editor_1 = require("../../components/markdown-editor/editor");
+const save_button_1 = require("../../components/save-button");
+const loading_indicator_1 = require("../../components/loading-indicator");
+const tabs_state_1 = require("../../tabs-layout/tabs-state");
+const ToolTestDetails = (props) => {
+    const { toolTestId } = props;
+    const tool = (0, hooks_1.useObservableState)(undefined);
+    const toolTest = (0, hooks_1.usePromise)(async () => {
+        const toolTestData = await (0, peers_sdk_1.ToolTests)().get(toolTestId);
+        if (!toolTestData)
+            return null;
+        const _tool = await (0, peers_sdk_1.Tools)().get(toolTestData.toolId);
+        tool(_tool);
+        const doc = (0, peers_sdk_1.ToolTests)().initDoc(toolTestData);
+        (0, tabs_state_1.updateActiveTabTitle)(_tool?.name ? `${_tool.name} Test` : "Tool Test");
+        return doc;
+    });
+    if (toolTest === null) {
+        return react_1.default.createElement("div", null, "ToolTest not found");
+    }
+    if (!toolTest) {
+        return react_1.default.createElement(loading_indicator_1.LoadingIndicator, null);
+    }
+    return (react_1.default.createElement("div", { className: "container-fluid mt-2" },
+        react_1.default.createElement("div", null,
+            react_1.default.createElement("a", { href: `#tools/${toolTest.toolId}` },
+                "Tool: ",
+                tool()?.name),
+            react_1.default.createElement("div", { className: "float-end" },
+                react_1.default.createElement(save_button_1.SaveButton, { doc: toolTest }))),
+        react_1.default.createElement("div", { style: { height: 'calc(100vh - 55px)', overflowY: 'auto', width: '100%' } },
+            react_1.default.createElement("small", null, "Test description:"),
+            react_1.default.createElement("div", { style: {
+                    border: '1px solid #ccc',
+                    borderRadius: '5px',
+                } },
+                react_1.default.createElement(editor_1.MarkdownEditor, { value: toolTest.qs.description, hideToolbar: true })),
+            react_1.default.createElement("small", null, "Code:"),
+            react_1.default.createElement("div", { style: {
+                    border: '1px solid #ccc',
+                    borderRadius: '5px',
+                } },
+                react_1.default.createElement(editor_1.MarkdownEditor, { value: toolTest.qs.code, hideToolbar: true })))));
+};
+exports.ToolTestDetails = ToolTestDetails;

package/dist/screens/tools/tool-test-list.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const ToolTestList: (props: {
+    toolId: string;
+}) => React.JSX.Element;

package/dist/screens/tools/tool-test-list.js

@@ -0,0 +1,82 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToolTestList = void 0;
+const react_1 = __importStar(require("react"));
+const hooks_1 = require("../../hooks");
+const peers_sdk_1 = require("@peers-app/peers-sdk");
+const globals_1 = require("../../globals");
+const input_1 = require("../../components/input");
+const ToolTestList = (props) => {
+    const { toolId } = props;
+    const testsObs = (0, hooks_1.useObservableState)([]);
+    const searchText = (0, hooks_1.useObservableState)('');
+    (0, react_1.useEffect)(() => {
+        (0, peers_sdk_1.ToolTests)().list({ toolId, }).then(tests => {
+            testsObs(tests);
+        });
+    }, [toolId]);
+    const tests = testsObs().filter(test => test.description.toLowerCase().includes(searchText().toLowerCase()));
+    async function createTest(evt) {
+        if (evt.key !== "Enter")
+            return;
+        evt.preventDefault();
+        // TODO maybe use LLM call to do this? 
+        const test = await (0, peers_sdk_1.ToolTests)().insert({
+            toolTestId: (0, peers_sdk_1.newid)(),
+            toolId,
+            description: searchText(),
+            code: '',
+            input: {},
+            output: {},
+        });
+        testsObs([
+            ...tests,
+            test
+        ]);
+        searchText('');
+        (0, globals_1.mainContentPath)(`tools/tests/${test.toolTestId}`);
+    }
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(input_1.Input, { className: 'form-control mb-2', value: searchText, onKeyDown: createTest, placeholder: 'Search or create new test' }),
+        testsObs().length === 0 && (react_1.default.createElement("div", { className: 'text-center' },
+            react_1.default.createElement("p", null, "No test for this tool yet"))),
+        testsObs().length !== 0 && tests.length === 0 && (react_1.default.createElement("div", { className: 'text-center' },
+            react_1.default.createElement("p", null, "No matching tests found"))),
+        tests.map((test, iTest) => {
+            return (react_1.default.createElement("p", { key: iTest, onDoubleClick: e => (0, globals_1.mainContentPath)(`tools/tests/${test.toolTestId}`) }, test.description.split('\n')[0]));
+        })));
+};
+exports.ToolTestList = ToolTestList;

package/dist/screens/variables/variable-details.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+interface IProps {
+    persistentVarId: string;
+}
+export declare const VariableDetails: (props: IProps) => React.JSX.Element;
+export {};

package/dist/screens/variables/variable-details.js

@@ -0,0 +1,140 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VariableDetails = void 0;
+const peers_sdk_1 = require("@peers-app/peers-sdk");
+const react_1 = __importStar(require("react"));
+const checkbox_1 = require("../../components/checkbox");
+const input_1 = require("../../components/input");
+const loading_indicator_1 = require("../../components/loading-indicator");
+const editor_inline_1 = require("../../components/markdown-editor/editor-inline");
+const save_button_1 = require("../../components/save-button");
+const tabs_1 = require("../../components/tabs");
+const hooks_1 = require("../../hooks");
+const tabs_state_1 = require("../../tabs-layout/tabs-state");
+const VariableDetails = (props) => {
+    const persistentVariable = (0, hooks_1.usePromise)(async () => {
+        const persistentVariable = await (0, peers_sdk_1.PersistentVars)().get(props.persistentVarId);
+        if (!persistentVariable) {
+            throw new Error('Variable not found');
+        }
+        (0, tabs_state_1.updateActiveTabTitle)(persistentVariable.name || "Variable");
+        return (0, peers_sdk_1.PersistentVars)().initDoc(persistentVariable);
+    }, undefined, [props.persistentVarId]);
+    (0, react_1.useEffect)(() => {
+        if (!persistentVariable)
+            return;
+        const sub = persistentVariable.qs.name.subscribe(() => {
+            persistentVariable.name = persistentVariable.qs.name().replaceAll(/\s/g, '_').replaceAll(/[^a-zA-Z0-9_-]/g, '');
+        });
+        return () => {
+            sub.dispose();
+        };
+    }, [persistentVariable]);
+    if (!persistentVariable) {
+        return react_1.default.createElement(loading_indicator_1.LoadingIndicator, null);
+    }
+    return (react_1.default.createElement("div", { className: "container-fluid p-3" },
+        react_1.default.createElement("div", { className: "d-flex" },
+            react_1.default.createElement("div", null,
+                react_1.default.createElement("h4", null,
+                    react_1.default.createElement("i", { className: `${(0, peers_sdk_1.getIconClassName)((0, peers_sdk_1.PersistentVars)())} me-2"` }))),
+            react_1.default.createElement("div", { className: "flex-grow-1" },
+                react_1.default.createElement("h4", null,
+                    react_1.default.createElement(input_1.Input, { key: persistentVariable.persistentVarId, className: 'border border-0', style: { width: '100%', outline: 'none', backgroundColor: 'transparent' }, value: persistentVariable.qs.name }))),
+            react_1.default.createElement("div", null,
+                react_1.default.createElement(save_button_1.SaveButton, { key: persistentVariable.persistentVarId, doc: persistentVariable }))),
+        react_1.default.createElement(tabs_1.Tabs, { key: persistentVariable.persistentVarId, tabs: [
+                {
+                    name: 'Info', content: react_1.default.createElement(tabs_1.ScreenTabBody, null,
+                        react_1.default.createElement(VariableInfo, { persistentVariable: persistentVariable }))
+                },
+            ] })));
+};
+exports.VariableDetails = VariableDetails;
+const VariableInfo = (props) => {
+    const { persistentVariable: pvar } = props;
+    pvar.description = pvar.description || '';
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement("small", null, "Name:"),
+        react_1.default.createElement(input_1.Input, { value: pvar.qs.name, className: "form-control mb-3 p-0 ps-2", placeholder: "Variable name", title: "Variable name" }),
+        react_1.default.createElement("div", { className: "d-flex flex-row" },
+            react_1.default.createElement(VariableScope, { pvar: pvar }),
+            react_1.default.createElement("div", { className: "ms-2" },
+                react_1.default.createElement("label", { className: "form-label small mt-2 me-2" }, "Is Secret:"),
+                react_1.default.createElement(checkbox_1.Checkbox, { className: "form-check-input mt-2", checked: pvar.qs.isSecret }))),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement(VariableValue, { pvar: pvar }),
+        react_1.default.createElement("small", { className: "mt-2" }, "Description:"),
+        react_1.default.createElement(editor_inline_1.MarkdownEditorInline, { value: pvar.qs.description })));
+};
+const VariableScope = (props) => {
+    const { pvar } = props;
+    const [scope, setScope] = (0, hooks_1.useObservable)(pvar.qs.scope);
+    return (react_1.default.createElement("div", { className: "dropdown" },
+        react_1.default.createElement("button", { className: "btn btn-secondary dropdown-toggle", type: "button", id: "colorModeDropdown", "data-bs-toggle": "dropdown", "aria-expanded": "false" },
+            "Scope: ",
+            (0, peers_sdk_1.camelCaseToSpaces)(scope)),
+        react_1.default.createElement("ul", { className: "dropdown-menu", "aria-labelledby": "colorModeDropdown" },
+            react_1.default.createElement("li", null,
+                react_1.default.createElement("button", { className: "dropdown-item", onClick: () => setScope('device') },
+                    "Device ",
+                    scope === 'device' && '✓')),
+            react_1.default.createElement("li", null,
+                react_1.default.createElement("button", { className: "dropdown-item", onClick: () => setScope('user') },
+                    "User ",
+                    scope === 'user' && '✓')))));
+};
+const VariableValue = (props) => {
+    const { pvar } = props;
+    const [isSecret] = (0, hooks_1.useObservable)(pvar.qs.isSecret);
+    const scalarValue = (0, peers_sdk_1.observable)(pvar.value.value);
+    // WARNING: we're assuming this is a string
+    (0, hooks_1.useSubscription)(pvar.qs.value, (value) => {
+        scalarValue(value?.value);
+    });
+    (0, hooks_1.useSubscription)(scalarValue, (value) => {
+        pvar.value = { value };
+    });
+    if (isSecret) {
+        return (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement("small", null, "Value:"),
+            react_1.default.createElement(input_1.Input, { value: scalarValue, type: "password", className: "form-control mb-3 p-0 ps-2", placeholder: "Variable value", title: "Variable value" })));
+    }
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("small", null, "Value:"),
+        react_1.default.createElement(editor_inline_1.MarkdownEditorInline, { value: scalarValue, hideToolbar: true }),
+        react_1.default.createElement("br", null)));
+};

package/dist/screens/variables/variable-list.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare function VariableList(): React.JSX.Element;