@peers-app/peers-ui 0.0.14

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

@@ -0,0 +1,127 @@
+import { IDoc, IWorkflow, IWorkflowInstruction, Observable, observable } from "@peers-app/peers-sdk";
+import React, { useEffect, useState } from "react";
+import { IEditorEffects } from "../../components/markdown-editor/editor";
+import { MarkdownEditorInline } from "../../components/markdown-editor/editor-inline";
+import { useObservable } from "../../hooks";
+
+export const WorkflowInstructions = (props: { workflow: IDoc<IWorkflow> }) => {
+  const { workflow } = props;
+
+  const instructions = workflow.qs.instructions;
+  useObservable(instructions);
+  const [focusedInstructionIndex] = useState(() => observable(0));
+
+  return (
+    <div>
+      {workflow.qs.instructions().map((instruction, i) => {
+        return (
+          <div
+            key={i}
+            className="mb-2"
+            style={{
+              // border: '1px solid #ccc',
+              // borderRadius: '5px',
+            }}
+          >
+            <WorkflowInstruction
+              workflow={workflow}
+              instructions={instructions}
+              thisInstructionIndex={i}
+              focusedInstructionIndex={focusedInstructionIndex}
+            />
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+
+interface IWorkflowInstructionProps {
+  workflow: IDoc<IWorkflow>;
+  instructions: Observable<IWorkflowInstruction[]>;
+  thisInstructionIndex: number;
+  focusedInstructionIndex: Observable<number>;
+  insertInstructionBelow?: () => void;
+  deleteInstruction?: () => void;
+}
+
+const WorkflowInstruction = (props: IWorkflowInstructionProps) => {
+  const { instructions, thisInstructionIndex, focusedInstructionIndex } = props;
+
+  const [mdEffects] = useState<IEditorEffects>(() => ({}));
+
+  const thisInstruction = instructions()[thisInstructionIndex];
+
+  const [markdownObs] = useState(() => observable(thisInstruction.markdown ?? ''));
+
+  useEffect(() => {
+    const sub = focusedInstructionIndex.subscribe(focusedIndex => {
+      if (focusedIndex === thisInstructionIndex) {
+        mdEffects.focus?.();
+      }
+    });
+    return () => sub.dispose();
+  }, [thisInstructionIndex]);
+
+  useEffect(() => {
+    markdownObs(thisInstruction.markdown ?? '');
+    const sub = markdownObs.subscribe(value => {
+      thisInstruction.markdown = value;
+      props.workflow.q(props.workflow.q() + 1);
+    });
+    return () => sub.dispose();
+  }, [thisInstruction, instructions(), thisInstructionIndex]);
+
+
+  let backspacedOnEmpty = false;
+  mdEffects.onKeyDown = (evt) => {
+    if (evt.key === 'Enter') {
+      if (markdownObs().match(/\n\s*\n$/)) {
+        // if the markdown ends with a new line, zero or more whitespace and then another newline, insert a new instruction below
+        evt.preventDefault();
+        const _instructions = instructions();
+        _instructions.splice(thisInstructionIndex + 1, 0, { markdown: '' });
+        instructions([..._instructions]);
+        markdownObs(markdownObs().trim());
+        focusedInstructionIndex(thisInstructionIndex + 1);
+      }
+    }
+    if (evt.key === 'Backspace') {
+      if (markdownObs().trim() === '') {
+        if (backspacedOnEmpty) {
+          evt.preventDefault();
+          const _instructions = instructions();
+          if (_instructions.length > 1) {
+            _instructions.splice(thisInstructionIndex, 1);
+            instructions([..._instructions]);
+            focusedInstructionIndex(thisInstructionIndex - 1);
+          }
+          backspacedOnEmpty = false;
+        } else {
+          backspacedOnEmpty = true;
+        }
+      }
+    }
+  };
+
+  function runThisInstruction() {
+    // runInstructions([thisInstruction]);
+    confirm('TODO: run this instruction not implemented yet');
+  }
+
+  return (
+    <MarkdownEditorInline
+      value={markdownObs}
+      effects={mdEffects}
+      autoFocus={props.thisInstructionIndex === focusedInstructionIndex()}
+      topRightControls={[
+        {
+          iconClass: 'bi bi-play',
+          title: `Run this instruction.`,
+          onClick: runThisInstruction,
+        }
+      ]}
+    />
+  )
+}

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

@@ -0,0 +1,107 @@
+import { ICursorIterable, IWorkflow, newid, observable, Workflows } from "@peers-app/peers-sdk";
+import React, { useEffect, useState } from 'react';
+import { Input } from '../../components/input';
+import { LazyList } from '../../components/lazy-list';
+import { LoadingIndicator } from '../../components/loading-indicator';
+import { MarkdownWithMentions } from '../../components/markdown-with-mentions';
+import { isDesktop, mainContentPath, me } from '../../globals';
+import { useObservable } from '../../hooks';
+
+export function WorkflowList() {
+
+  const [searchTextObs] = useState(() => observable(''));
+  const [searchText] = useObservable(searchTextObs);
+
+  const [cursorObs] = useState(() => observable<ICursorIterable<IWorkflow>>());
+  const [cursorId] = useState(() => observable(newid()));
+
+  async function newCursor() {
+    const cursor = await Workflows().cursor({ name: { $matchWords: searchText } }, { sortBy: ['-updatedAt'] });
+    cursorObs(cursor);
+    cursorId(newid());
+    return cursor;
+  }
+
+  useEffect(() => {
+    newCursor();
+  }, [searchText]);
+
+  async function searchSubmit(evt: React.KeyboardEvent<HTMLInputElement>) {
+    if (evt.key !== "Enter") return;
+    if (!searchText.trim()) return;
+    const workflowName = searchText.trim();
+    const workflow = await Workflows().initRecord({
+      name: workflowName,
+      description: '',
+      instructions: [{
+        markdown: '// TODO add a link to workflow documentation and examples',
+      }],
+      createdBy: me.userId,
+      // defaultAssistantId: '',
+    });
+    await Workflows().insert(workflow);
+    mainContentPath(`workflows/${workflow.workflowId}`);
+  }
+
+
+  async function loadMore(existingWorkflows: IWorkflow[]): Promise<IWorkflow[]> {
+    let moreMatches: IWorkflow[] = [];
+    let cursor = cursorObs() || await newCursor();
+    for await (const workflow of cursor) {
+      if (existingWorkflows.find(w => w.workflowId === workflow.workflowId)) continue;
+      moreMatches.push(workflow);
+      if (searchText.length && moreMatches.length > 5) break;
+      if (moreMatches.length >= 50) break;
+    }
+    if (moreMatches.length === 0) {
+      cursorObs(undefined);
+    }    
+    return moreMatches;
+  }
+
+  return (
+    <div className='container-fluid'>
+      <Input value={searchTextObs} className="form-control mt-3" style={{ marginBottom: "10px" }} placeholder="Search or create new workflow"
+        autoFocus={isDesktop() ? true : false}
+        onKeyUp={evt => searchSubmit(evt)}
+      />
+
+      <div className="peers-list-container">
+        <LazyList
+          key={cursorId()}
+          loadMore={loadMore}
+          scrollThreshold={0.6}
+          renderItems={(workflows) => {
+            return workflows.map(workflow => {
+              const markdownContent = workflow.description || workflow.instructions[0].markdown || '';
+              return (
+                <div
+                  key={workflow.workflowId}
+                  className='container-fluid pb-4'
+                >
+                  <i className="bi bi-database-fill-gear"></i>&nbsp;
+                  <a href={`#workflows/${workflow.workflowId}`}>
+                    {workflow.name}
+                  </a>
+                  <div style={{ paddingLeft: '20px' }}>
+                    <MarkdownWithMentions content={markdownContent} />
+                  </div>
+                </div>
+              )
+            })
+          }}
+          loadingIndicator={
+            <div className="d-flex justify-content-center" style={{ height: 200 }}>
+              <LoadingIndicator />
+            </div>
+          }
+          endOfList={
+            <div className="d-flex justify-content-center" style={{ height: 200 }}>
+              {/* <span className="h3">End of List</span> */}
+            </div>
+          }
+        />
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,58 @@
+import { formatMention, getAllMentions, IDoc, IPeerEventHandler, IWorkflow, newid, observable, Observable, PeerEventTypes } from "@peers-app/peers-sdk";
+import { isEqual } from "lodash";
+import React, { useState } from "react";
+import { LoadingIndicator } from "../../components/loading-indicator";
+import { MarkdownEditorInline } from "../../components/markdown-editor/editor-inline";
+import { Tooltip } from "../../components/tooltip";
+import { usePromise, useSubscription } from "../../hooks";
+
+export const WorkflowEventSubscriptions = (props: { workflow: IDoc<IWorkflow>, eventSubscriptions: Observable<IPeerEventHandler[]> }) => {
+  const { workflow, eventSubscriptions } = props;
+
+  const [subscriptionsMarkdown] = useState(() => observable(''));
+
+  const markdownInitialized = usePromise(async () => {
+    const eventTypeIds = eventSubscriptions().map(h => h.peerEventTypeId);
+    const subscribedEvents = await PeerEventTypes().list({ peerEventTypeId: { $in: eventTypeIds } });
+    const peerEventTypeNames = subscribedEvents.reduce((acc, evt) => ({ ...acc, [evt.peerEventTypeId]: evt.name }), {} as Record<string, string>);
+    const mentions = eventTypeIds.map(eventTypeId => '- ' + formatMention({ kind: 'event', id: eventTypeId, name: peerEventTypeNames[eventTypeId] ?? eventTypeId }));
+    const markdown = `${mentions.join('\n') || '- '}`;
+    subscriptionsMarkdown(markdown);
+    return true;
+  });
+
+  useSubscription(subscriptionsMarkdown, () => {
+    if (!markdownInitialized) return;
+    const startEventTypeIds = eventSubscriptions().map(h => h.peerEventTypeId);
+    const eventTypeIds = getAllMentions(subscriptionsMarkdown()).filter(m => m.kind === 'event').map(m => m.id);
+    if (isEqual(startEventTypeIds, eventTypeIds)) return;
+    const newHandler: IPeerEventHandler[] = eventTypeIds.map(eventTypeId => ({
+      peerEventHandlerId: newid(),
+      peerEventTypeId: eventTypeId,
+      handlerWorkflowId: workflow.workflowId,
+    }));
+    eventSubscriptions(newHandler);
+    workflow.q(workflow.q() + 1);
+  });
+
+  if (!markdownInitialized) {
+    return <LoadingIndicator />;
+  }
+
+  return (
+    <div>
+
+      <div className='mt-2'>
+        <small>Mention events that should trigger this workflow:</small>
+        <small>
+          <Tooltip markdownContent={`The mentions will be reformatted as a bulleted list regardless of how they are entered.  All other content except for event mentions will be discarded.`} />
+        </small>
+
+        <MarkdownEditorInline
+          value={subscriptionsMarkdown}
+        />
+      </div>
+
+    </div>
+  );
+};

package/src/setupTests.ts

@@ -0,0 +1,32 @@
+import '@testing-library/jest-dom';
+
+// Mock IntersectionObserver
+(global as any).IntersectionObserver = class {
+  constructor() {}
+  disconnect() {}
+  observe() {}
+  unobserve() {}
+};
+
+// Mock window.matchMedia
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: jest.fn().mockImplementation(query => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(), // deprecated
+    removeListener: jest.fn(), // deprecated
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  })),
+});
+
+// Mock ResizeObserver
+(global as any).ResizeObserver = class {
+  constructor() {}
+  disconnect() {}
+  observe() {}
+  unobserve() {}
+};

package/src/system-apps/assistants.app.ts

@@ -0,0 +1,7 @@
+import { IAppNav } from "@peers-app/peers-sdk";
+
+export const assistantsApp: IAppNav = {
+  name: 'Assistants',
+  iconClassName: 'bi-person-fill-gear',
+  navigationPath: 'assistants'
+};

package/src/system-apps/contacts.app.ts

@@ -0,0 +1,8 @@
+import { IAppNav } from "@peers-app/peers-sdk";
+
+export const contactsApp: IAppNav = {
+  name: 'Contacts',
+  displayName: 'Contacts',
+  iconClassName: 'bi-person-fill-check',
+  navigationPath: 'contacts'
+};

package/src/system-apps/events.app.ts

@@ -0,0 +1,7 @@
+import { IAppNav } from "@peers-app/peers-sdk";
+
+export const eventsApp: IAppNav = {
+  name: 'Events',
+  iconClassName: 'bi-lightning-charge-fill',
+  navigationPath: 'events'
+};

package/src/system-apps/groups.app.ts

@@ -0,0 +1,8 @@
+import { IAppNav } from "@peers-app/peers-sdk";
+
+export const groupsApp: IAppNav = {
+  name: 'Groups',
+  displayName: 'Groups',
+  iconClassName: 'bi-people-fill',
+  navigationPath: 'groups'
+};

package/src/system-apps/index.ts

@@ -0,0 +1,79 @@
+import { IAppNav, IPackage } from "@peers-app/peers-sdk";
+
+// Import all system apps
+export { searchApp } from './search.app';
+export { assistantsApp } from './assistants.app';
+export { toolsApp } from './tools.app';
+export { workflowsApp } from './workflows.app';
+export { eventsApp } from './events.app';
+export { variablesApp } from './variables.app';
+export { typesApp } from './types.app';
+export { packagesApp } from './packages.app';
+export { threadsApp } from './threads.app';
+export { knowledgeValuesApp } from './knowledge-values.app';
+export { knowledgeFramesApp } from './knowledge-frames.app';
+export { predicatesApp } from './predicates.app';
+export { profileApp } from './profile.app';
+export { settingsApp } from './settings.app';
+export { groupsApp } from './groups.app';
+export { contactsApp } from './contacts.app';
+
+// Import individual apps
+import { searchApp } from './search.app';
+import { assistantsApp } from './assistants.app';
+import { toolsApp } from './tools.app';
+import { workflowsApp } from './workflows.app';
+import { eventsApp } from './events.app';
+import { variablesApp } from './variables.app';
+import { typesApp } from './types.app';
+import { packagesApp } from './packages.app';
+import { threadsApp } from './threads.app';
+import { knowledgeValuesApp } from './knowledge-values.app';
+import { knowledgeFramesApp } from './knowledge-frames.app';
+import { predicatesApp } from './predicates.app';
+import { profileApp } from './profile.app';
+import { settingsApp } from './settings.app';
+import { groupsApp } from './groups.app';
+import { contactsApp } from './contacts.app';
+
+// Collection of all system apps
+export const systemApps: IAppNav[] = [
+  // Core Navigation & Search
+  searchApp,
+  threadsApp,
+
+  // Knowledge & Data
+  knowledgeValuesApp,
+  knowledgeFramesApp,
+  predicatesApp,
+
+  // Core Management Apps
+  variablesApp,
+  typesApp,
+  assistantsApp,
+  toolsApp,
+  workflowsApp,
+  eventsApp,
+  packagesApp,
+  groupsApp,
+  contactsApp,
+  
+  // User & Settings Apps
+  profileApp,
+  settingsApp,
+];
+
+// Virtual system package for tabs integration
+export const systemPackage: IPackage = {
+  packageId: 'system-apps',
+  name: 'System Apps',
+  description: 'Core system functionality and management tools',
+  appNavs: systemApps,
+  createdBy: 'system',
+  localPath: '',
+  disabled: false,
+  signature: '',
+  packageBundleFileId: '',
+  packageBundleFileHash: '',
+  // System apps use existing router instead of separate bundle files
+};

package/src/system-apps/knowledge-frames.app.ts

@@ -0,0 +1,8 @@
+import { IAppNav } from "@peers-app/peers-sdk";
+
+export const knowledgeFramesApp: IAppNav = {
+  name: 'Knowledge Frames',
+  displayName: 'K-Frames',
+  iconClassName: 'bi-window-dock',
+  navigationPath: 'knowledge-frames'
+};

package/src/system-apps/knowledge-values.app.ts

@@ -0,0 +1,8 @@
+import { IAppNav } from "@peers-app/peers-sdk";
+
+export const knowledgeValuesApp: IAppNav = {
+  name: 'Knowledge Values',
+  displayName: 'K-Values',
+  iconClassName: 'bi-journal-bookmark-fill',
+  navigationPath: 'knowledge-values'
+};

package/src/system-apps/packages.app.ts

@@ -0,0 +1,7 @@
+import { IAppNav } from "@peers-app/peers-sdk";
+
+export const packagesApp: IAppNav = {
+  name: 'Packages',
+  iconClassName: 'bi-box-fill',
+  navigationPath: 'packages'
+};

package/src/system-apps/predicates.app.ts

@@ -0,0 +1,7 @@
+import { IAppNav } from "@peers-app/peers-sdk";
+
+export const predicatesApp: IAppNav = {
+  name: 'Predicates',
+  iconClassName: 'bi-node-plus-fill',
+  navigationPath: 'predicates'
+};

package/src/system-apps/profile.app.ts

@@ -0,0 +1,7 @@
+import { IAppNav } from "@peers-app/peers-sdk";
+
+export const profileApp: IAppNav = {
+  name: 'Profile',
+  iconClassName: 'bi-person-circle',
+  navigationPath: 'profile'
+};

package/src/system-apps/search.app.ts

@@ -0,0 +1,8 @@
+import { IAppNav } from "@peers-app/peers-sdk";
+
+export const searchApp: IAppNav = {
+  name: 'Search',
+  displayName: 'Search',
+  iconClassName: 'bi-search',
+  navigationPath: 'search',  
+};

package/src/system-apps/settings.app.ts

@@ -0,0 +1,7 @@
+import { IAppNav } from "@peers-app/peers-sdk";
+
+export const settingsApp: IAppNav = {
+  name: 'Settings',
+  iconClassName: 'bi-gear-fill',
+  navigationPath: 'settings'
+};

package/src/system-apps/threads.app.ts

@@ -0,0 +1,7 @@
+import { IAppNav } from "@peers-app/peers-sdk";
+
+export const threadsApp: IAppNav = {
+  name: 'Threads',
+  iconClassName: 'bi-cpu',
+  navigationPath: 'threads'
+};

package/src/system-apps/tools.app.ts

@@ -0,0 +1,7 @@
+import { IAppNav } from "@peers-app/peers-sdk";
+
+export const toolsApp: IAppNav = {
+  name: 'Tools',
+  iconClassName: 'bi-tools',
+  navigationPath: 'tools'
+};

package/src/system-apps/types.app.ts

@@ -0,0 +1,7 @@
+import { IAppNav } from "@peers-app/peers-sdk";
+
+export const typesApp: IAppNav = {
+  name: 'Types',
+  iconClassName: 'bi-code-square',
+  navigationPath: 'peer-types'
+};

package/src/system-apps/variables.app.ts

@@ -0,0 +1,7 @@
+import { IAppNav } from "@peers-app/peers-sdk";
+
+export const variablesApp: IAppNav = {
+  name: 'Variables',
+  iconClassName: 'bi-braces',
+  navigationPath: 'variables'
+};

package/src/system-apps/workflows.app.ts

@@ -0,0 +1,7 @@
+import { IAppNav } from "@peers-app/peers-sdk";
+
+export const workflowsApp: IAppNav = {
+  name: 'Workflows',
+  iconClassName: 'bi-database-fill-gear',
+  navigationPath: 'workflows'
+};