@peers-app/peers-ui 0.0.14

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

@@ -0,0 +1,42 @@
+import { IDoc, IOSchema, IOSchemaType, ITool, Observable } from "@peers-app/peers-sdk";
+import React from "react";
+import { IOSchemaEditor } from "../../components/io-schema";
+import { useObservable } from "../../hooks";
+
+export const ToolSchema = (props: { tool: IDoc<ITool> }) => {
+  const { tool } = props;
+
+  useObservable(tool.qs.isAssistantRunner);
+
+  if (tool.isAssistantRunner && !tool.configSchema) {
+    tool.configSchema = {
+      type: IOSchemaType.complex,
+      fields: [],
+    };
+  }
+
+  return (
+    <div>
+      {tool.isAssistantRunner && (
+        <>
+          <span style={{ width: '130px', display: 'inline-block' }} className="fw-bold">
+            Config Schema:
+          </span>
+          <IOSchemaEditor ioSchema={tool.qs.configSchema as Observable<IOSchema>} simpleValueName="input" />
+          <br />
+        </>
+      )}
+
+      <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">
+        Output Schema:
+
+      </span>
+      <IOSchemaEditor ioSchema={tool.qs.outputSchema} simpleValueName="output" />
+    </div>
+  )
+}

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

@@ -0,0 +1,100 @@
+import { useObservableState, usePromise } from "../../hooks";
+import React from "react";
+import { ToolTests, ITool, Tools } from "@peers-app/peers-sdk";
+import { MarkdownEditor } from "../../components/markdown-editor/editor";
+import { SaveButton } from "../../components/save-button";
+import { LoadingIndicator } from "../../components/loading-indicator";
+import { updateActiveTabTitle } from "../../tabs-layout/tabs-state";
+
+export const ToolTestDetails = (props: { toolTestId: string }) => {
+  const { toolTestId } = props;
+
+  const tool = useObservableState<ITool | undefined>(undefined);
+
+  const toolTest = usePromise(async () => {
+    const toolTestData = await ToolTests().get(toolTestId);
+    if (!toolTestData) return null;
+    const _tool = await Tools().get(toolTestData.toolId);
+    tool(_tool);
+    const doc = ToolTests().initDoc(toolTestData);
+    updateActiveTabTitle(_tool?.name ? `${_tool.name} Test` : "Tool Test");
+    return doc;
+  });
+
+  if (toolTest === null) {
+    return <div>ToolTest not found</div>;
+  }
+
+  if (!toolTest) {
+    return <LoadingIndicator />;
+  }
+
+  return (
+    <div className="container-fluid mt-2">
+      <div>
+        <a href={`#tools/${toolTest.toolId}`}>Tool: {tool()?.name}</a>
+        <div className="float-end">
+          <SaveButton doc={toolTest} />
+        </div>
+      </div>
+
+      <div
+        style={{ height: 'calc(100vh - 55px)', overflowY: 'auto', width: '100%' }}
+      >
+        <small>Test description:</small>
+        <div
+          style={{
+            border: '1px solid #ccc',
+            borderRadius: '5px',
+          }}
+        >
+          <MarkdownEditor
+            value={toolTest.qs.description}
+            hideToolbar={true}
+          />
+        </div>
+
+        {/* <small>Input:</small>
+        <div
+          style={{
+            border: '1px solid #ccc',
+            borderRadius: '5px',
+          }}
+        >
+          <MarkdownEditor
+            value={toolTest.qs.input}
+            hideToolbar={true}
+          />
+        </div>
+        
+        <small>Output:</small>
+        <div
+          style={{
+            border: '1px solid #ccc',
+            borderRadius: '5px',
+          }}
+        >
+          <MarkdownEditor
+            value={toolTest.qs.output}
+            hideToolbar={true}
+          />
+        </div> */}
+
+        <small>Code:</small>
+        <div
+          style={{
+            border: '1px solid #ccc',
+            borderRadius: '5px',
+          }}
+        >
+          <MarkdownEditor
+            value={toolTest.qs.code}
+            hideToolbar={true}
+          />
+        </div>
+
+
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,74 @@
+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';
+
+
+export const ToolTestList = (props: { toolId: string }) => {
+  const { toolId } = props;
+
+  const testsObs = useObservableState<IToolTest[]>([]);
+  const searchText = useObservableState<string>('');
+
+  useEffect(() => {
+    ToolTests().list({ toolId, }).then(tests => {
+      testsObs(tests);
+    });
+  }, [toolId]);
+
+  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? 
+    const test = await ToolTests().insert({
+      toolTestId: newid(),
+      toolId,
+      description: searchText(),
+      code: '',
+      input: {},
+      output: {},
+    });
+    testsObs([
+      ...tests,
+      test
+    ]);
+    searchText('');
+    mainContentPath(`tools/tests/${test.toolTestId}`);
+  }
+
+  return (
+    <div>
+
+      <Input
+        className='form-control mb-2'
+        value={searchText}
+        onKeyDown={createTest}
+        placeholder='Search or create new test'
+      />
+
+      {testsObs().length === 0 && (
+        <div className='text-center'>
+          <p>No test for this tool yet</p>
+        </div>
+      )}
+
+      {testsObs().length !== 0 && tests.length === 0 && (
+        <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>
+        )
+      })}
+
+    </div>
+  )
+}

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

@@ -0,0 +1,183 @@
+import { camelCaseToSpaces, getIconClassName, IDoc, IPersistentVar, observable, Observable, PersistentVars } from "@peers-app/peers-sdk";
+import React, { useEffect } from "react";
+import { Checkbox } from "../../components/checkbox";
+import { Input } from "../../components/input";
+import { LoadingIndicator } from "../../components/loading-indicator";
+import { MarkdownEditorInline } from "../../components/markdown-editor/editor-inline";
+import { SaveButton } from "../../components/save-button";
+import { ScreenTabBody, Tabs } from "../../components/tabs";
+import { useObservable, usePromise, useSubscription } from "../../hooks";
+import { updateActiveTabTitle } from "../../tabs-layout/tabs-state";
+
+interface IProps {
+  persistentVarId: string;
+}
+
+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]);
+
+
+  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 <LoadingIndicator />;
+  }
+
+  return (
+    <div className="container-fluid p-3">
+
+      <div className="d-flex">
+        <div>
+          <h4>
+            <i className={`${getIconClassName(PersistentVars())} me-2"`}></i>
+          </h4>
+        </div>
+        <div className="flex-grow-1">
+          <h4>
+            <Input
+              key={persistentVariable.persistentVarId}
+              className='border border-0'
+              style={{ width: '100%', outline: 'none', backgroundColor: 'transparent' }}
+              value={persistentVariable.qs.name}
+            />
+          </h4>
+        </div>
+        <div>
+          <SaveButton
+            key={persistentVariable.persistentVarId}
+            doc={persistentVariable}
+          />
+        </div>
+      </div>
+
+      <Tabs
+        key={persistentVariable.persistentVarId}
+        tabs={[
+          {
+            name: 'Info', content:
+              <ScreenTabBody>
+                <VariableInfo persistentVariable={persistentVariable} />
+              </ScreenTabBody>
+          },
+        ]}
+      />
+    </div>
+  )
+}
+
+
+const VariableInfo = (props: { persistentVariable: IDoc<IPersistentVar> }) => {
+  const { persistentVariable: pvar } = props
+
+  pvar.description = pvar.description || '';
+
+  return (
+    <div>
+
+      <small>Name:</small>
+      <Input
+        value={pvar.qs.name}
+        className="form-control mb-3 p-0 ps-2"
+        placeholder="Variable name"
+        title="Variable name"
+      />
+
+      <div className="d-flex flex-row">
+        <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}
+          />
+        </div>
+      </div>
+
+      <br />
+      <VariableValue pvar={pvar} />
+
+      <small className="mt-2">Description:</small>
+      <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">
+        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('group')}>Group {scope === 'group' && '✓'}</button></li> */}
+      </ul>
+    </div>
+  );
+};
+
+const VariableValue = (props: { pvar: IDoc<IPersistentVar> }) => {
+  const { pvar } = props;
+
+  const [isSecret] = useObservable(pvar.qs.isSecret);
+  const scalarValue = observable(pvar.value.value);
+  // WARNING: we're assuming this is a string
+  useSubscription(pvar.qs.value, (value) => {
+    scalarValue(value?.value);    
+  });
+  useSubscription(scalarValue, (value) => {
+    pvar.value = { value };
+  });
+
+  if (isSecret) {
+    return (
+      <>
+        <small>Value:</small>
+        <Input
+          value={scalarValue}
+          type="password"
+          className="form-control mb-3 p-0 ps-2"
+          placeholder="Variable value"
+          title="Variable value"
+        />
+      </>
+    )
+  }
+
+  return (
+    <>
+      <small>Value:</small>
+      <MarkdownEditorInline
+        value={scalarValue}
+        hideToolbar
+      />
+      <br />
+    </>
+  )
+}

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

@@ -0,0 +1,74 @@
+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';
+
+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 pVar = await PersistentVars().save({
+      persistentVarId: newid(),
+      name: varName,
+      scope: isPersonal ? 'user' : 'group',
+      description: '',
+      value: { value: '' },
+      userCreated: true,
+    });
+    mainContentPath(`variables/${pVar.persistentVarId}`);
+    return pVar;
+  }
+
+  function getFilter(searchText: string) {
+    return {
+      $or: [
+        { name: { $matchWords: searchText } },
+        { description: { $matchWords: searchText } },
+      ],
+      userCreated: true
+    };
+  }
+
+  function renderItem(persistentVar: IPersistentVar) {
+    return (
+      <div
+        key={persistentVar.persistentVarId}
+        className='container-fluid pb-4'
+      >
+        <i className={getIconClassName(PersistentVars())}></i>&nbsp;
+        <a href={`#variables/${persistentVar.persistentVarId}`}>
+          {persistentVar.name || '<empty-name>'}
+        </a>
+        <div style={{ paddingLeft: '20px' }}>
+          <MarkdownWithMentions content={persistentVar.description || ''} />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <ListScreen
+      table={PersistentVars()}
+      newRecord={newRecord}
+      getFilter={getFilter}
+      sortBy={['name']}
+      renderItem={renderItem}
+      placeholderName="environment variable"
+    />
+  );
+}
+
+registerInternalPeersUI({
+  peersUIId: '00m5fshz2g6ea23v8z6y0a1ci',
+  component: VariableList,
+  routes: [
+    {
+      isMatch: (props, context) => context.path === 'variables',
+      uiCategory: 'screen',
+      priority: 2
+    }
+  ]
+})

package/src/screens/workflows/workflow-details.tsx

@@ -0,0 +1,130 @@
+import { defaultAssistantId, getAllAssistantIdsMentioned, IPeerEventHandler, IWorkflow, observable, PeerEventHandlers, runWorkflow, Workflows } from "@peers-app/peers-sdk";
+import React, { useState } from "react";
+import { Input } from "../../components/input";
+import { LoadingIndicator } from "../../components/loading-indicator";
+import { SaveButton } from "../../components/save-button";
+import { ScreenTabBody, Tabs } from "../../components/tabs";
+import { openThread } from "../../globals";
+import { usePromise } from "../../hooks";
+import { updateActiveTabTitle } from "../../tabs-layout/tabs-state";
+import { WorkflowInfo } from "./workflow-info";
+import { WorkflowInstructions } from "./workflow-instructions";
+import { WorkflowEventSubscriptions } from "./workflow-subscriptions";
+
+interface IProps {
+  workflowId: string;
+}
+
+export const WorkflowDetails = (props: IProps) => {
+
+  const workflow = usePromise(async () => {
+    const workflow = await Workflows().get(props.workflowId);
+    if (!workflow) {
+      throw new Error('Workflow not found');
+    }
+    updateActiveTabTitle(workflow.name || "Workflow");
+    return Workflows().initDoc(workflow);
+  }, undefined, [props.workflowId]);
+
+  const [handlers] = useState(() => observable([] as IPeerEventHandler[]));
+
+  const handlersLoaded = usePromise(async () => {
+    if (!workflow) return false;
+    const _handlers = await PeerEventHandlers().list({ handlerWorkflowId: workflow.workflowId });
+    handlers(_handlers);
+    return true;
+  }, false, [workflow]);
+
+  const allLoaded = !!(workflow && handlersLoaded);
+
+  if (!allLoaded) {
+    return <LoadingIndicator />;
+  }
+
+  async function saveChanges() {
+    if (!workflow) return;
+    workflow.updatedAt = new Date();
+    const assistantsMentioned = await getAllAssistantIdsMentioned(workflow.instructions[0].markdown ?? '');
+    workflow.defaultAssistantId = assistantsMentioned[0] || defaultAssistantId;
+    workflow.save();
+    const oldHandlers = await PeerEventHandlers().list({ handlerWorkflowId: workflow.workflowId });
+    for (const oldHandler of oldHandlers) {
+      await PeerEventHandlers().delete(oldHandler.peerEventHandlerId);
+    }
+    for (const handler of handlers()) {
+      PeerEventHandlers().save(handler, { restoreIfDeleted: true });
+    }
+  }
+
+  return (
+    <div className="container-fluid p-3">
+
+      <div className="d-flex">
+        <div>
+          <h4>
+            <i className="bi bi-database-fill-gear me-2"></i>
+          </h4>
+        </div>
+        <div className="flex-grow-1">
+          <h4>
+            <Input
+              key={workflow.workflowId}
+              className='border border-0'
+              style={{ width: '100%', outline: 'none', backgroundColor: 'transparent' }}
+              value={workflow.qs.name}
+            />
+          </h4>
+        </div>
+        <div>
+          <button className="btn btn-success me-2" onClick={() => {
+            saveChanges(); // TODO take this out, is just for testing
+            _runWorkflow(workflow.toJS());
+          }}>
+            Run All
+          </button>
+
+          <SaveButton
+            key={workflow.workflowId}
+            onClick={saveChanges}
+            doc={workflow}
+          />
+
+        </div>
+      </div>
+
+      <Tabs
+        key={workflow.workflowId}
+        tabs={[
+          {
+            name: 'Info', content:
+              <ScreenTabBody>
+                <WorkflowInfo workflow={workflow} />
+              </ScreenTabBody>
+          },
+          {
+            name: 'Instructions', content:
+              <ScreenTabBody>
+                <WorkflowInstructions workflow={workflow} />
+              </ScreenTabBody>
+          },
+          {
+            name: 'Subscriptions', content:
+              <ScreenTabBody>
+                <WorkflowEventSubscriptions workflow={workflow} eventSubscriptions={handlers} />
+              </ScreenTabBody>
+          },
+        ]}
+      />
+    </div>
+  )
+}
+
+
+async function _runWorkflow(workflow: IWorkflow) {
+  // TODO maybe warn if there are pending changes
+  const run = await runWorkflow({
+    workflowId: workflow.workflowId,
+    vars: {},
+  });
+  openThread(run.parentMessageId);
+}

package/src/screens/workflows/workflow-info.tsx

@@ -0,0 +1,29 @@
+
+import { Input } from "../../components/input";
+import React from "react";
+import { IDoc, IWorkflow } from "@peers-app/peers-sdk";
+import { MarkdownEditorInline } from "../../components/markdown-editor/editor-inline";
+
+
+export const WorkflowInfo = (props: { workflow: IDoc<IWorkflow> }) => {
+  const { workflow } = props;
+
+  return (
+    <div>
+      <small>Name:</small>
+      <Input
+        value={workflow.qs.name}
+        className="form-control mb-3 p-0 ps-2"
+        placeholder="Workflow name"
+        title="Workflow name"
+      />
+
+      <small>Description:</small>
+      <MarkdownEditorInline
+        value={workflow.qs.description}
+      />
+
+    </div>
+  )
+}
+