@peers-app/peers-ui 0.0.14

package/src/screens/contacts/contact-details.tsx

@@ -0,0 +1,175 @@
+import { getUserContext, IDoc, IUser, TrustLevel, Users } from "@peers-app/peers-sdk";
+import React 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 { usePromise } from "../../hooks";
+import { updateActiveTabTitle } from "../../tabs-layout/tabs-state";
+import { registerInternalPeersUI } from "../../ui-router/ui-loader";
+
+interface IProps {
+  userId: string;
+}
+
+export const ContactDetails = (props: IProps) => {
+
+  const contact = usePromise(async () => {
+    const userContext = await getUserContext();
+    const contact = await Users(userContext.userDataContext).get(props.userId);
+    if (!contact) {
+      throw new Error('Contact not found');
+    }
+    updateActiveTabTitle(contact.name || "Contact");
+    return Users(userContext.userDataContext).initDoc(contact);
+  }, undefined, [props.userId]);
+
+  if (!contact) {
+    return <LoadingIndicator />;
+  }
+
+  return (
+    <div className="container-fluid p-3">
+
+      <div className="d-flex">
+        <div>
+          <h4>
+            <i className="bi-person-fill-check me-2"></i>
+          </h4>
+        </div>
+        <div className="flex-grow-1">
+          <h4>
+            <Input
+              key={contact.userId}
+              className='border border-0'
+              style={{ width: '100%', outline: 'none', backgroundColor: 'transparent' }}
+              value={contact.qs.name}
+            />
+          </h4>
+        </div>
+        <div>
+          <SaveButton
+            key={contact.userId}
+            doc={contact}
+          />
+        </div>
+      </div>
+
+      <Tabs
+        key={contact.userId}
+        tabs={[
+          {
+            name: 'Info', content:
+              <ScreenTabBody>
+                <ContactInfo contact={contact} />
+              </ScreenTabBody>
+          },
+        ]}
+      />
+    </div>
+  )
+}
+
+const ContactInfo = (props: { contact: IDoc<IUser> }) => {
+  const { contact } = props;
+
+  return (
+    <div>
+      <div className="mb-3">
+        <small>Name:</small>
+        <Input
+          value={contact.qs.name}
+          className="form-control mb-3 p-0 ps-2"
+          placeholder="Contact name"
+          title="Contact name"
+        />
+      </div>
+
+      <div className="mb-3">
+        <small>User ID:</small>
+        <div className="form-control-plaintext text-muted small">
+          {contact.userId}
+        </div>
+      </div>
+
+      <div className="mb-3">
+        <small>Public Key:</small>
+        <Input
+          value={contact.qs.publicKey}
+          className="form-control mb-3 p-0 ps-2"
+          placeholder="Public key"
+          title="Public key"
+        />
+      </div>
+
+      <div className="mb-3">
+        <small>Public Box Key:</small>
+        <Input
+          value={contact.qs.publicBoxKey}
+          className="form-control mb-3 p-0 ps-2"
+          placeholder="Public box key"
+          title="Public box key"
+        />
+      </div>
+
+      <div className="mb-3">
+        <small>Trust Level:</small>
+        <div className="mt-2">
+          <TrustLevelSelector contact={contact} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const TrustLevelSelector = (props: { contact: IDoc<IUser> }) => {
+  const { contact } = props;
+
+  const trustLevels = [
+    { value: TrustLevel.Self, label: 'Self', color: 'success' },
+    { value: TrustLevel.Trusted, label: 'Trusted', color: 'success' },
+    { value: TrustLevel.Known, label: 'Known', color: 'info' },
+    { value: TrustLevel.NewDevice, label: 'New Device', color: 'primary' },
+    { value: TrustLevel.NewUser, label: 'New User', color: 'primary' },
+    { value: TrustLevel.Unknown, label: 'Unknown', color: 'warning' },
+    { value: TrustLevel.Untrusted, label: 'Untrusted', color: 'danger' },
+    { value: TrustLevel.Malicious, label: 'Malicious', color: 'danger' },
+  ];
+
+  return (
+    <div className="d-flex flex-wrap gap-2">
+      {trustLevels.map(level => (
+        <button
+          key={level.value}
+          className={`btn btn-sm ${
+            contact.trustLevel === level.value 
+              ? `btn-${level.color}` 
+              : `btn-outline-${level.color}`
+          }`}
+          onClick={() => contact.trustLevel = level.value}
+        >
+          {level.label}
+        </button>
+      ))}
+    </div>
+  );
+};
+
+registerInternalPeersUI({
+  peersUIId: '00contact00details00component',
+  component: ContactDetails,
+  routes: [
+    {
+      isMatch: (props, context) => {
+        const match = context.path.match(/^contacts\/([a-zA-Z0-9]+)$/);
+        if (match) {
+          props.userId = match[1];
+          return true;
+        }
+        return false;
+      },
+      uiCategory: 'screen',
+      priority: 2
+    }
+  ]
+});

package/src/screens/contacts/contact-list.tsx

@@ -0,0 +1,251 @@
+import { getUserContext, ICursorIterable, IUserWithSource, observable, TrustLevel, Users, usersCursor } 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 { mainContentPath } from '../../globals';
+import { useObservable } from '../../hooks';
+import { registerInternalPeersUI } from '../../ui-router/ui-loader';
+
+export function ContactList() {
+  const [searchTextObs] = useState(() => observable(''));
+  const [searchText] = useObservable(searchTextObs);
+  const [cursorObs] = useState(() => observable<ICursorIterable<IUserWithSource>>());
+  const [existingContacts, setExistingContacts] = useState<IUserWithSource[]>([]);
+
+  async function newCursor() {
+    const cursor = await usersCursor({ name: { $matchWords: searchText } });
+    cursorObs(cursor);
+    return cursor;
+  }
+
+  useEffect(() => {
+    newCursor();
+    setExistingContacts([]); // Reset existing contacts when search changes
+  }, [searchText]);
+
+  async function loadMore(existing: IUserWithSource[]): Promise<IUserWithSource[]> {
+    let moreMatches: IUserWithSource[] = [];
+    let cursor = cursorObs() || await newCursor();
+    for await (const nextContact of cursor) {
+      if (existing.find(e => e.userId === nextContact.userId)) continue;
+      moreMatches.push(nextContact);
+      if (searchText.length && moreMatches.length > 5) break;
+      if (moreMatches.length >= 10) break;
+    }
+    if (moreMatches.length === 0) {
+      cursorObs(undefined);
+    }
+    setExistingContacts(existing.concat(moreMatches)); // Track all loaded contacts
+    return moreMatches;
+  }
+
+  function isValidUserId(id: string): boolean {
+    // Check if it's a valid ID format (alphanumeric, typically 25 characters)
+    return /^[a-zA-Z0-9]{20,30}$/.test(id);
+  }
+
+  async function createContact(userId: string) {
+    try {
+      const userContext = await getUserContext();
+      const usersTable = Users(userContext.userDataContext);
+      
+      const newContact = await usersTable.initRecord({
+        userId: userId.trim(),
+        name: 'New User',
+        publicKey: '',
+        publicBoxKey: '',
+        trustLevel: TrustLevel.NewUser
+      });
+      
+      await usersTable.save(newContact);
+      
+      // Navigate to the details screen for the new contact
+      mainContentPath(`contacts/${userId.trim()}`);
+    } catch (error) {
+      console.error('Error creating contact:', error);
+    }
+  }
+
+  async function handleSearchSubmit(evt: React.KeyboardEvent<HTMLInputElement>) {
+    if (evt.key !== 'Enter') return;
+    
+    const input = searchText.trim();
+    if (!input) return;
+    
+    // Check if there are any existing results
+    if (existingContacts.length === 0) {
+      // No results found, check if it's a valid user ID
+      if (isValidUserId(input)) {
+        // Clear search and create new contact with the ID
+        searchTextObs('');
+        await createContact(input);
+      }
+    }
+  }
+
+  function renderItems(contacts: IUserWithSource[]): JSX.Element[] {
+    const elements: JSX.Element[] = [];
+    let lastSource: string | null = null;
+
+    contacts.forEach((contact, index) => {
+      // Add horizontal separator when source changes
+      if (lastSource && lastSource !== contact.source) {
+        elements.push(
+          <div key={`separator-${index}`} className="my-3">
+            <hr className="border-secondary opacity-50" />
+          </div>
+        );
+      }
+
+      elements.push(
+        <ContactCard key={contact.userId} contact={contact} />
+      );
+
+      lastSource = contact.source;
+    });
+
+    return elements;
+  }
+
+  return (
+    <div className="container-fluid p-3">
+      <div className="d-flex justify-content-between align-items-center mb-3">
+        <h4>
+          <i className="bi-person-fill-check me-2" />
+          Contacts
+        </h4>
+      </div>
+
+      <div className="input-group mb-3">
+        <Input 
+          value={searchTextObs} 
+          className="form-control" 
+          placeholder="Search or create contacts"
+          autoFocus={true}
+          onKeyUp={handleSearchSubmit}
+        />
+      </div>
+
+      <div className="peers-list-container">
+        <LazyList
+          resetTrigger={searchText}
+          loadMore={loadMore}
+          scrollThreshold={0.6}
+          renderItems={renderItems}
+          loadingIndicator={
+            <div className="d-flex justify-content-center" style={{ height: 200 }}>
+              <LoadingIndicator />
+            </div>
+          }
+          endOfList={
+            <div className="d-flex justify-content-center" style={{ height: 200 }}>
+              {/* End of contacts */}
+            </div>
+          }
+        />
+      </div>
+    </div>
+  );
+}
+
+interface ContactCardProps {
+  contact: IUserWithSource;
+}
+
+const ContactCard = ({ contact }: ContactCardProps) => {
+  const getSourceLabel = (source: string) => {
+    switch (source) {
+      case 'userDataContext': return 'Personal';
+      case 'currentDataContext': return 'Current Context';
+      case 'otherDataContexts': return 'Groups';
+      default: return source;
+    }
+  };
+
+  const getSourceIcon = (source: string) => {
+    switch (source) {
+      case 'userDataContext': return 'bi-person-fill';
+      case 'currentDataContext': return 'bi-house-fill';
+      case 'otherDataContexts': return 'bi-people-fill';
+      default: return 'bi-question-circle';
+    }
+  };
+
+  return (
+    <div className="list-group-item d-flex align-items-center justify-content-between py-2">
+      <div className="d-flex align-items-center">
+        <i className="bi-person-circle me-3" style={{ fontSize: '32px', color: '#6c757d' }} />
+        <div>
+          <strong>{contact.name}</strong>
+          <div className="d-flex align-items-center">
+            <small className="text-muted">{contact.userId}</small>
+            <span className="mx-1 text-muted">•</span>
+            <small className="text-info d-flex align-items-center">
+              <i className={`${getSourceIcon(contact.source)} me-1`} />
+              {getSourceLabel(contact.source)}
+            </small>
+          </div>
+        </div>
+      </div>
+      
+      <div className="d-flex align-items-center">
+        {<TrustLevelBadge level={contact.trustLevel || TrustLevel.Unknown} />}
+        <a href={`#contacts/${contact.userId}`} className="btn btn-outline-primary btn-sm ms-2">
+          <i className="bi-eye me-1" />
+          View
+        </a>
+      </div>
+    </div>
+  );
+};
+
+interface TrustLevelBadgeProps {
+  level: TrustLevel;
+}
+
+const TrustLevelBadge = ({ level }: TrustLevelBadgeProps) => {
+  // Define trust level configurations with their numeric values
+  const trustLevelConfigs = [
+    { value: TrustLevel.Self, color: 'success', icon: 'bi-shield-fill-check', text: 'Self' },
+    { value: TrustLevel.Trusted, color: 'success', icon: 'bi-shield-check', text: 'Trusted' },
+    { value: TrustLevel.Known, color: 'info', icon: 'bi-shield-check', text: 'Known' },
+    { value: TrustLevel.NewDevice, color: 'primary', icon: 'bi-shield-plus', text: 'New Device' },
+    { value: TrustLevel.NewUser, color: 'primary', icon: 'bi-shield-plus', text: 'New User' },
+    { value: TrustLevel.Unknown, color: 'warning', icon: 'bi-shield-exclamation', text: 'Unknown' },
+    { value: TrustLevel.Untrusted, color: 'danger', icon: 'bi-shield-x', text: 'Untrusted' },
+    { value: TrustLevel.Malicious, color: 'danger', icon: 'bi-shield-x', text: 'Malicious' }
+  ];
+
+  // Sort by trust level value (ascending, so lowest first)
+  const sortedConfigs = trustLevelConfigs.sort((a, b) => a.value - b.value);
+  
+  // Find the highest trust level that is at or below the current level
+  let config = { color: 'secondary', icon: 'bi-shield', text: 'Unknown' };
+  for (const trustConfig of sortedConfigs) {
+    if (level >= trustConfig.value) {
+      config = trustConfig;
+    } else {
+      break;
+    }
+  }
+
+  return (
+    <span className={`badge bg-${config.color} d-flex align-items-center gap-1`}>
+      <i className={config.icon} />
+      {config.text}
+    </span>
+  );
+};
+
+registerInternalPeersUI({
+  peersUIId: '00mfc4ql0lgqmjxrpvcd4ufk0',
+  component: ContactList,
+  routes: [
+    {
+      isMatch: (props, context) => context.path === 'contacts',
+      uiCategory: 'screen',
+      priority: 2
+    }
+  ]
+});

package/src/screens/contacts/index.ts

@@ -0,0 +1,6 @@
+// Import all contact screen components to ensure they register their routes
+import './contact-list';
+import './contact-details';
+
+export * from "./contact-list";
+export * from "./contact-details";

package/src/screens/events/cron.ts

@@ -0,0 +1,74 @@
+import cronValidate from "cron-validate";
+import moment from "moment-timezone";
+import { parseExpression } from 'cron-parser';
+
+
+export function getCronErrors(cronExpression: string): string | false {
+  const validationResult = cronValidate(cronExpression);
+
+  if (validationResult.isError()) {
+    const errors = validationResult.getError();
+    const errorMarkdown = ['Validation errors:', ...errors].join('\n- ');
+    return errorMarkdown;
+  }
+
+  let parseError = '';
+  try {
+    parseExpression(cronExpression);
+  } catch (e: any) {
+    parseError = e.message;
+  }
+  if (parseError) {
+    return 'Validation error: ' + parseError;
+  }
+  return false;
+}
+
+export function getCronExplanation(cronExpression: string) {
+  if (!cronExpression) {
+    return '';
+  }
+  function formatDate(date: Date) {
+    // let dtStr = moment
+    return moment(date).calendar(null, {
+      sameDay: '[Today at] LT',
+      nextDay: '[Tomorrow at] LT',
+      nextWeek: 'dddd [at] LT',
+      lastDay: '[Yesterday at] LT',
+      lastWeek: '[Last] dddd [at] LT',
+      sameElse: 'L [at] LT'
+    }) + `\n  - \`${date.toISOString().replace(':00.000Z', 'Z')}\``;
+  }
+  let parsed = parseExpression(cronExpression);
+
+  const strDates: string[] = [];
+  let i = 1;
+  while (true) {
+    const dt = parsed.prev().toString();
+    strDates.push(`- ${formatDate(new Date(dt))}`);
+    i++;
+    if (i > 3) break;
+  }
+  strDates.push('Prior three dates:');
+  strDates.reverse();
+  strDates.push('\nNext three dates:');
+  i = 1;
+  parsed = parseExpression(cronExpression);
+  while (true) {
+    const dt = parsed.next().toString();
+    strDates.push(`- ${formatDate(new Date(dt))}`);
+    i++;
+    if (i > 3) break;
+  }
+
+ return strDates.join('\n');
+}
+
+export function getNextCronDate(cronExpression: string): Date {
+  const errors = getCronErrors(cronExpression);
+  if (errors) {
+    throw new Error(errors);
+  }
+  const parsed = parseExpression(cronExpression);
+  return new Date(parsed.next().toString());
+}

package/src/screens/events/event-details.tsx

@@ -0,0 +1,117 @@
+import { IPeerEventHandler, observable, PeerEventHandlers, PeerEventTypes } from "@peers-app/peers-sdk";
+import React, { useState } from "react";
+import { Input } from "../../components/input";
+import { IOSchemaEditor } from "../../components/io-schema";
+import { LoadingIndicator } from "../../components/loading-indicator";
+import { SaveButton } from "../../components/save-button";
+import { ScreenTabBody, Tabs } from "../../components/tabs";
+import { usePromise } from "../../hooks";
+import { updateActiveTabTitle } from "../../tabs-layout/tabs-state";
+import { PeerEventHandlersUI } from "./event-handlers";
+import { PeerEventInfo } from "./event-info";
+import { PeerEventSchedule } from "./event-schedule";
+
+interface IProps {
+  peerEventTypeId: string;
+}
+
+export const PeerEventDetails = (props: IProps) => {
+
+  const peerEventType = usePromise(async () => {
+    const peerEvent = await PeerEventTypes().get(props.peerEventTypeId);
+    if (!peerEvent) {
+      throw new Error('Workflow not found');
+    }
+    const doc = PeerEventTypes().initDoc(peerEvent);
+    updateActiveTabTitle(doc.name || "Event");
+    return doc;
+  }, undefined, [props.peerEventTypeId]);
+
+  const [handlers] = useState(() => observable([] as IPeerEventHandler[]));
+
+  const handlersLoaded = usePromise(async () => {
+    if (!peerEventType) return false;
+    const _handlers = await PeerEventHandlers().list({ peerEventTypeId: peerEventType?.peerEventTypeId });
+    handlers(_handlers);
+    return true;
+  }, false, [peerEventType]);
+
+  const allLoaded = !!(peerEventType && handlersLoaded);
+
+  if (!allLoaded) {
+    return <LoadingIndicator />;
+  }
+
+  async function saveChanges() {
+    if (!peerEventType) return;
+    await peerEventType.save();
+    const oldHandlers = await PeerEventHandlers().list({ peerEventTypeId: peerEventType.peerEventTypeId });
+    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-lightning-charge-fill me-2"></i>
+          </h4>
+        </div>
+        <div className="flex-grow-1">
+          <h4>
+            <Input
+              key={peerEventType.peerEventTypeId}
+              className='border border-0'
+              style={{ width: '100%', outline: 'none', backgroundColor: 'transparent' }}
+              value={peerEventType.qs.name}
+            />
+          </h4>
+        </div>
+        <div>
+          <SaveButton
+            key={peerEventType.peerEventTypeId}
+            onClick={saveChanges}
+            doc={peerEventType}
+          />
+        </div>
+      </div>
+
+      <Tabs
+        key={peerEventType.peerEventTypeId}
+        tabs={[
+          {
+            name: 'Info', content:
+              <ScreenTabBody>
+                <PeerEventInfo peerEventType={peerEventType} />
+              </ScreenTabBody>
+          },
+          {
+            name: 'Schema', content:
+              <ScreenTabBody>
+                <IOSchemaEditor ioSchema={peerEventType.qs.schema} simpleValueName="Event" />
+              </ScreenTabBody>
+          },
+          {
+            name: 'Triggers', content:
+              <ScreenTabBody>
+                <PeerEventSchedule peerEventType={peerEventType} />
+              </ScreenTabBody>
+          },
+          {
+            name: 'Handlers', content:
+              <ScreenTabBody>
+                <PeerEventHandlersUI peerEventType={peerEventType} handlers={handlers} />
+              </ScreenTabBody>
+          },
+
+        ]}
+      />
+    </div>
+  )
+}

package/src/screens/events/event-handlers.tsx

@@ -0,0 +1,61 @@
+import { observable, Observable } from "@peers-app/peers-sdk";
+import { isEqual } from "lodash";
+import React, { useState } from "react";
+import { newid, IDoc, IPeerEventHandler, IPeerEventType, Workflows } from "@peers-app/peers-sdk";
+import { Tooltip } from "../../components/tooltip";
+import { MarkdownEditorInline } from "../../components/markdown-editor/editor-inline";
+import { LoadingIndicator } from "../../components/loading-indicator";
+import { formatMention, getAllMentions } from "@peers-app/peers-sdk";
+import { usePromise, useSubscription } from "../../hooks";
+
+export const PeerEventHandlersUI = (props: { peerEventType: IDoc<IPeerEventType>, handlers: Observable<IPeerEventHandler[]> }) => {
+  const { peerEventType, handlers } = props;
+
+  const [handlersMarkdown] = useState(() => observable(''));
+
+  const markdownInitialized = usePromise(async () => {
+    const workflowIds = handlers().map(h => h.handlerWorkflowId);
+    const handlerWorkflows = await Workflows().list({ workflowId: { $in: workflowIds } });
+    const workflowTitles = handlerWorkflows.reduce((acc, wf) => ({ ...acc, [wf.workflowId]: wf.name }), {} as Record<string, string>);
+    const mentions = workflowIds.map(workflowId => '- ' + formatMention({ kind: 'workflow', id: workflowId, name: workflowTitles[workflowId] ?? workflowId }));
+    const markdown = `${mentions.join('\n') || '- '}`;
+    handlersMarkdown(markdown);
+    return true;
+  });
+
+  useSubscription(handlersMarkdown, () => {
+    if (!markdownInitialized) return;
+    const startWorkflowIds = handlers().map(h => h.handlerWorkflowId);
+    const workflowIds = getAllMentions(handlersMarkdown()).filter(m => m.kind === 'workflow').map(m => m.id);
+    if (isEqual(startWorkflowIds, workflowIds)) return;
+    const newHandlers: IPeerEventHandler[] = workflowIds.map(workflowId => ({
+      peerEventHandlerId: newid(),
+      peerEventTypeId: peerEventType.peerEventTypeId,
+      handlerWorkflowId: workflowId,
+    }));
+    handlers(newHandlers);
+    peerEventType.q(peerEventType.q() + 1);
+    console.log('new handlers', newHandlers.map(h => h.handlerWorkflowId));
+  });
+
+  if (!markdownInitialized) {
+    return <LoadingIndicator />;
+  }
+
+  return (
+    <div>
+
+      <div className='mt-2'>
+        <small>Mention workflows this event should trigger:</small>
+        <small>
+          <Tooltip markdownContent={`The mentions will be reformatted as a bulleted list regardless of how they are entered.  All other content except for workflow mentions will be discarded.`} />
+        </small>
+
+        <MarkdownEditorInline
+          value={handlersMarkdown}
+        />
+      </div>
+
+    </div>
+  );
+};