@peers-app/peers-ui 0.14.0 → 0.15.0

package/src/screens/tools/tool-schema.tsx

@@ -1,5 +1,10 @@
-import { IDoc, IOSchema, IOSchemaType, ITool, Observable } from "@peers-app/peers-sdk";
-import React from "react";
+import {
+  type IDoc,
+  type IOSchema,
+  IOSchemaType,
+  type ITool,
+  type Observable,
+} from "@peers-app/peers-sdk";
 import { IOSchemaEditor } from "../../components/io-schema";
 import { useObservable } from "../../hooks";
 
@@ -19,24 +24,26 @@ export const ToolSchema = (props: { tool: IDoc<ITool> }) => {
     <div>
       {tool.isAssistantRunner && (
         <>
-          <span style={{ width: '130px', display: 'inline-block' }} className="fw-bold">
+          <span style={{ width: "130px", display: "inline-block" }} className="fw-bold">
             Config Schema:
           </span>
-          <IOSchemaEditor ioSchema={tool.qs.configSchema as Observable<IOSchema>} simpleValueName="input" />
+          <IOSchemaEditor
+            ioSchema={tool.qs.configSchema as Observable<IOSchema>}
+            simpleValueName="input"
+          />
           <br />
         </>
       )}
 
-      <span style={{ width: '130px', display: 'inline-block' }} className="fw-bold">
+      <span style={{ width: "130px", display: "inline-block" }} className="fw-bold">
         Input Schema:
       </span>
       <IOSchemaEditor ioSchema={tool.qs.inputSchema} simpleValueName="input" />
 
-      <span style={{ width: '130px', display: 'inline-block' }} className="mt-4 fw-bold">
+      <span style={{ width: "130px", display: "inline-block" }} className="mt-4 fw-bold">
         Output Schema:
-
       </span>
       <IOSchemaEditor ioSchema={tool.qs.outputSchema} simpleValueName="output" />
     </div>
-  )
-}
+  );
+};

package/src/screens/tools/tool-test-details.tsx

@@ -1,9 +1,8 @@
-import { useObservableState, usePromise } from "../../hooks";
-import React from "react";
-import { ToolTests, ITool, Tools } from "@peers-app/peers-sdk";
+import { type ITool, Tools, ToolTests } from "@peers-app/peers-sdk";
+import { LoadingIndicator } from "../../components/loading-indicator";
 import { MarkdownEditor } from "../../components/markdown-editor/editor";
 import { SaveButton } from "../../components/save-button";
-import { LoadingIndicator } from "../../components/loading-indicator";
+import { useObservableState, usePromise } from "../../hooks";
 import { updateActiveTabTitle } from "../../tabs-layout/tabs-state";
 
 export const ToolTestDetails = (props: { toolTestId: string }) => {
@@ -38,20 +37,15 @@ export const ToolTestDetails = (props: { toolTestId: string }) => {
         </div>
       </div>
 
-      <div
-        style={{ height: 'calc(100vh - 55px)', overflowY: 'auto', width: '100%' }}
-      >
+      <div style={{ height: "calc(100vh - 55px)", overflowY: "auto", width: "100%" }}>
         <small>Test description:</small>
         <div
           style={{
-            border: '1px solid #ccc',
-            borderRadius: '5px',
+            border: "1px solid #ccc",
+            borderRadius: "5px",
           }}
         >
-          <MarkdownEditor
-            value={toolTest.qs.description}
-            hideToolbar={true}
-          />
+          <MarkdownEditor value={toolTest.qs.description} hideToolbar={true} />
         </div>
 
         {/* <small>Input:</small>
@@ -83,18 +77,13 @@ export const ToolTestDetails = (props: { toolTestId: string }) => {
         <small>Code:</small>
         <div
           style={{
-            border: '1px solid #ccc',
-            borderRadius: '5px',
+            border: "1px solid #ccc",
+            borderRadius: "5px",
           }}
         >
-          <MarkdownEditor
-            value={toolTest.qs.code}
-            hideToolbar={true}
-          />
+          <MarkdownEditor value={toolTest.qs.code} hideToolbar={true} />
         </div>
-
-
       </div>
     </div>
   );
-}
+};

package/src/screens/tools/tool-test-list.tsx

@@ -1,74 +1,73 @@
-import React, { useEffect } from 'react'
-import { useObservableState } from '../../hooks';
-import { newid, ToolTests, IToolTest } from "@peers-app/peers-sdk";
-import { mainContentPath } from '../../globals';
-import { Input } from '../../components/input';
-
+import { type IToolTest, newid, ToolTests } from "@peers-app/peers-sdk";
+import type React from "react";
+import { useEffect } from "react";
+import { Input } from "../../components/input";
+import { mainContentPath } from "../../globals";
+import { useObservableState } from "../../hooks";
 
 export const ToolTestList = (props: { toolId: string }) => {
   const { toolId } = props;
 
   const testsObs = useObservableState<IToolTest[]>([]);
-  const searchText = useObservableState<string>('');
+  const searchText = useObservableState<string>("");
 
   useEffect(() => {
-    ToolTests().list({ toolId, }).then(tests => {
-      testsObs(tests);
-    });
-  }, [toolId]);
+    ToolTests()
+      .list({ toolId })
+      .then((tests) => {
+        testsObs(tests);
+      });
+  }, [toolId, testsObs]);
 
-  const tests = testsObs().filter(test => test.description.toLowerCase().includes(searchText().toLowerCase()));
+  const tests = testsObs().filter((test) =>
+    test.description.toLowerCase().includes(searchText().toLowerCase()),
+  );
 
   async function createTest(evt: React.KeyboardEvent<HTMLInputElement>) {
     if (evt.key !== "Enter") return;
     evt.preventDefault();
-    // TODO maybe use LLM call to do this? 
+    // TODO maybe use LLM call to do this?
     const test = await ToolTests().insert({
       toolTestId: newid(),
       toolId,
       description: searchText(),
-      code: '',
+      code: "",
       input: {},
       output: {},
     });
-    testsObs([
-      ...tests,
-      test
-    ]);
-    searchText('');
+    testsObs([...tests, test]);
+    searchText("");
     mainContentPath(`tools/tests/${test.toolTestId}`);
   }
 
   return (
     <div>
-
       <Input
-        className='form-control mb-2'
+        className="form-control mb-2"
         value={searchText}
         onKeyDown={createTest}
-        placeholder='Search or create new test'
+        placeholder="Search or create new test"
       />
 
       {testsObs().length === 0 && (
-        <div className='text-center'>
+        <div className="text-center">
           <p>No test for this tool yet</p>
         </div>
       )}
 
       {testsObs().length !== 0 && tests.length === 0 && (
-        <div className='text-center'>
+        <div className="text-center">
           <p>No matching tests found</p>
         </div>
       )}
 
       {tests.map((test, iTest) => {
         return (
-          <p key={iTest} onDoubleClick={e => mainContentPath(`tools/tests/${test.toolTestId}`)}>
-            {test.description.split('\n')[0]}
+          <p key={iTest} onDoubleClick={(_e) => mainContentPath(`tools/tests/${test.toolTestId}`)}>
+            {test.description.split("\n")[0]}
           </p>
-        )
+        );
       })}
-
     </div>
-  )
-}
+  );
+};

package/src/screens/variables/variable-details.tsx

@@ -1,5 +1,13 @@
-import { camelCaseToSpaces, getIconClassName, IDoc, IPersistentVar, observable, Observable, PersistentVars } from "@peers-app/peers-sdk";
-import React, { useEffect } from "react";
+import {
+  camelCaseToSpaces,
+  getIconClassName,
+  type IDoc,
+  type IPersistentVar,
+  type Observable,
+  observable,
+  PersistentVars,
+} from "@peers-app/peers-sdk";
+import { useEffect } from "react";
 import { Checkbox } from "../../components/checkbox";
 import { Input } from "../../components/input";
 import { LoadingIndicator } from "../../components/loading-indicator";
@@ -14,25 +22,30 @@ interface IProps {
 }
 
 export const VariableDetails = (props: IProps) => {
-
-  const persistentVariable = usePromise(async () => {
-    const persistentVariable = await PersistentVars().get(props.persistentVarId);
-    if (!persistentVariable) {
-      throw new Error('Variable not found');
-    }
-    updateActiveTabTitle(persistentVariable.name || "Variable");
-    return PersistentVars().initDoc(persistentVariable);
-  }, undefined, [props.persistentVarId]);
-
+  const persistentVariable = usePromise(
+    async () => {
+      const persistentVariable = await PersistentVars().get(props.persistentVarId);
+      if (!persistentVariable) {
+        throw new Error("Variable not found");
+      }
+      updateActiveTabTitle(persistentVariable.name || "Variable");
+      return PersistentVars().initDoc(persistentVariable);
+    },
+    undefined,
+    [props.persistentVarId],
+  );
 
   useEffect(() => {
     if (!persistentVariable) return;
     const sub = persistentVariable.qs.name.subscribe(() => {
-      persistentVariable.name = persistentVariable.qs.name().replaceAll(/\s/g, '_').replaceAll(/[^a-zA-Z0-9_-]/g, '');
+      persistentVariable.name = persistentVariable.qs
+        .name()
+        .replaceAll(/\s/g, "_")
+        .replaceAll(/[^a-zA-Z0-9_-]/g, "");
     });
     return () => {
       sub.dispose();
-    }
+    };
   }, [persistentVariable]);
 
   if (!persistentVariable) {
@@ -41,7 +54,6 @@ export const VariableDetails = (props: IProps) => {
 
   return (
     <div className="container-fluid p-3">
-
       <div className="d-flex">
         <div>
           <h4>
@@ -52,17 +64,14 @@ export const VariableDetails = (props: IProps) => {
           <h4>
             <Input
               key={persistentVariable.persistentVarId}
-              className='border border-0'
-              style={{ width: '100%', outline: 'none', backgroundColor: 'transparent' }}
+              className="border border-0"
+              style={{ width: "100%", outline: "none", backgroundColor: "transparent" }}
               value={persistentVariable.qs.name}
             />
           </h4>
         </div>
         <div>
-          <SaveButton
-            key={persistentVariable.persistentVarId}
-            doc={persistentVariable}
-          />
+          <SaveButton key={persistentVariable.persistentVarId} doc={persistentVariable} />
         </div>
       </div>
 
@@ -70,26 +79,26 @@ export const VariableDetails = (props: IProps) => {
         key={persistentVariable.persistentVarId}
         tabs={[
           {
-            name: 'Info', content:
+            name: "Info",
+            content: (
               <ScreenTabBody>
                 <VariableInfo persistentVariable={persistentVariable} />
               </ScreenTabBody>
+            ),
           },
         ]}
       />
     </div>
-  )
-}
-
+  );
+};
 
 const VariableInfo = (props: { persistentVariable: IDoc<IPersistentVar> }) => {
-  const { persistentVariable: pvar } = props
+  const { persistentVariable: pvar } = props;
 
-  pvar.description = pvar.description || '';
+  pvar.description = pvar.description || "";
 
   return (
     <div>
-
       <small>Name:</small>
       <Input
         value={pvar.qs.name}
@@ -102,10 +111,7 @@ const VariableInfo = (props: { persistentVariable: IDoc<IPersistentVar> }) => {
         <VariableScope pvar={pvar} />
         <div className="ms-2">
           <label className="form-label small mt-2 me-2">Is Secret:</label>
-          <Checkbox
-            className="form-check-input mt-2"
-            checked={pvar.qs.isSecret}
-          />
+          <Checkbox className="form-check-input mt-2" checked={pvar.qs.isSecret} />
         </div>
       </div>
 
@@ -113,29 +119,38 @@ const VariableInfo = (props: { persistentVariable: IDoc<IPersistentVar> }) => {
       <VariableValue pvar={pvar} />
 
       <small className="mt-2">Description:</small>
-      <MarkdownEditorInline
-        value={pvar.qs.description as Observable<string>}
-      />
-
+      <MarkdownEditorInline value={pvar.qs.description as Observable<string>} />
     </div>
-  )
-}
-
+  );
+};
 
 const VariableScope = (props: { pvar: IDoc<IPersistentVar> }) => {
-
   const { pvar } = props;
 
   const [scope, setScope] = useObservable(pvar.qs.scope);
 
   return (
     <div className="dropdown">
-      <button className="btn btn-secondary dropdown-toggle" type="button" id="colorModeDropdown" data-bs-toggle="dropdown" aria-expanded="false">
+      <button
+        className="btn btn-secondary dropdown-toggle"
+        type="button"
+        id="colorModeDropdown"
+        data-bs-toggle="dropdown"
+        aria-expanded="false"
+      >
         Scope: {camelCaseToSpaces(scope)}
       </button>
       <ul className="dropdown-menu" aria-labelledby="colorModeDropdown">
-        <li><button className="dropdown-item" onClick={() => setScope('device')}>Device {scope === 'device' && '✓'}</button></li>
-        <li><button className="dropdown-item" onClick={() => setScope('user')}>User {scope === 'user' && '✓'}</button></li>
+        <li>
+          <button className="dropdown-item" onClick={() => setScope("device")}>
+            Device {scope === "device" && "✓"}
+          </button>
+        </li>
+        <li>
+          <button className="dropdown-item" onClick={() => setScope("user")}>
+            User {scope === "user" && "✓"}
+          </button>
+        </li>
         {/* <li><button className="dropdown-item" onClick={() => setScope('group')}>Group {scope === 'group' && '✓'}</button></li> */}
       </ul>
     </div>
@@ -149,7 +164,7 @@ const VariableValue = (props: { pvar: IDoc<IPersistentVar> }) => {
   const scalarValue = observable(pvar.value.value);
   // WARNING: we're assuming this is a string
   useSubscription(pvar.qs.value, (value) => {
-    scalarValue(value?.value);    
+    scalarValue(value?.value);
   });
   useSubscription(scalarValue, (value) => {
     pvar.value = { value };
@@ -167,17 +182,14 @@ const VariableValue = (props: { pvar: IDoc<IPersistentVar> }) => {
           title="Variable value"
         />
       </>
-    )
+    );
   }
 
   return (
     <>
       <small>Value:</small>
-      <MarkdownEditorInline
-        value={scalarValue}
-        hideToolbar
-      />
+      <MarkdownEditorInline value={scalarValue} hideToolbar />
       <br />
     </>
-  )
-}
+  );
+};

package/src/screens/variables/variable-list.tsx

@@ -1,21 +1,26 @@
-import React from 'react';
-import { getIconClassName, getUserContext, IPersistentVar, newid, PersistentVars } from "@peers-app/peers-sdk";
-import { MarkdownWithMentions } from '../../components/markdown-with-mentions';
-import { mainContentPath } from '../../globals';
-import { ListScreen } from '../../components/list-screen';
-import { registerInternalPeersUI } from '../../ui-router/ui-loader';
+import {
+  getIconClassName,
+  getUserContext,
+  type IPersistentVar,
+  newid,
+  PersistentVars,
+} from "@peers-app/peers-sdk";
+import { ListScreen } from "../../components/list-screen";
+import { MarkdownWithMentions } from "../../components/markdown-with-mentions";
+import { mainContentPath } from "../../globals";
+import { registerInternalPeersUI } from "../../ui-router/ui-loader";
 
 export function VariableList() {
   async function newRecord(name: string) {
     const userContext = await getUserContext();
     const isPersonal = userContext.currentlyActiveGroupId() === userContext.userId;
-    const varName = name.replace(/\s+/g, '_');
+    const varName = name.replace(/\s+/g, "_");
     const pVar = await PersistentVars().save({
       persistentVarId: newid(),
       name: varName,
-      scope: isPersonal ? 'user' : 'group',
-      description: '',
-      value: { value: '' },
+      scope: isPersonal ? "user" : "group",
+      description: "",
+      value: { value: "" },
       userCreated: true,
     });
     mainContentPath(`variables/${pVar.persistentVarId}`);
@@ -24,26 +29,20 @@ export function VariableList() {
 
   function getFilter(searchText: string) {
     return {
-      $or: [
-        { name: { $matchWords: searchText } },
-        { description: { $matchWords: searchText } },
-      ],
-      userCreated: true
+      $or: [{ name: { $matchWords: searchText } }, { description: { $matchWords: searchText } }],
+      userCreated: true,
     };
   }
 
   function renderItem(persistentVar: IPersistentVar) {
     return (
-      <div
-        key={persistentVar.persistentVarId}
-        className='container-fluid pb-4'
-      >
+      <div key={persistentVar.persistentVarId} className="container-fluid pb-4">
         <i className={getIconClassName(PersistentVars())}></i>&nbsp;
         <a href={`#variables/${persistentVar.persistentVarId}`}>
-          {persistentVar.name || '<empty-name>'}
+          {persistentVar.name || "<empty-name>"}
         </a>
-        <div style={{ paddingLeft: '20px' }}>
-          <MarkdownWithMentions content={persistentVar.description || ''} />
+        <div style={{ paddingLeft: "20px" }}>
+          <MarkdownWithMentions content={persistentVar.description || ""} />
         </div>
       </div>
     );
@@ -54,7 +53,7 @@ export function VariableList() {
       table={PersistentVars()}
       newRecord={newRecord}
       getFilter={getFilter}
-      sortBy={['name']}
+      sortBy={["name"]}
       renderItem={renderItem}
       placeholderName="environment variable"
     />
@@ -62,13 +61,13 @@ export function VariableList() {
 }
 
 registerInternalPeersUI({
-  peersUIId: '00m5fshz2g6ea23v8z6y0a1ci',
+  peersUIId: "00m5fshz2g6ea23v8z6y0a1ci",
   component: VariableList,
   routes: [
     {
-      isMatch: (props, context) => context.path === 'variables',
-      uiCategory: 'screen',
-      priority: 2
-    }
-  ]
-})
+      isMatch: (_props, context) => context.path === "variables",
+      uiCategory: "screen",
+      priority: 2,
+    },
+  ],
+});