@peers-app/peers-ui 0.0.14

package/src/screens/knowledge/knowledge-frame-details.tsx

@@ -0,0 +1,176 @@
+import { DataFilter, formatMention, getAllMentions, IDoc, IKnowledgeFrame, IKnowledgeValue, KnowledgeFrames, KnowledgeValues, Observable, observable, PeersUI } from "@peers-app/peers-sdk";
+import { sortBy } from "lodash";
+import React, { useState } from "react";
+import { Input } from "../../components/input";
+import { LoadingIndicator } from "../../components/loading-indicator";
+import { SaveButton } from "../../components/save-button";
+import { Typeahead } from "../../components/typeahead/typeahead";
+import { useObservable, useObservableState, usePromise, useSubscription } from "../../hooks";
+import { mentionConfigs } from "../../mention-configs";
+import { updateActiveTabTitle } from "../../tabs-layout/tabs-state";
+
+interface IProps {
+  knowledgeFrameId: string;
+}
+
+export const KnowledgeFrameDetails = (props: IProps) => {
+
+  const frame = usePromise(async () => {
+    const frame = await KnowledgeFrames().get(props.knowledgeFrameId);
+    if (!frame) {
+      throw new Error('Knowledge Frame not found');
+    }
+    const doc = KnowledgeFrames().initDoc(frame);
+    updateActiveTabTitle(doc.name || "Knowledge Frame");
+    return doc;
+  }, undefined, [props.knowledgeFrameId]);
+
+  const typeaheadText = useObservableState('', true);
+
+  if (!frame) {
+    return <LoadingIndicator />;
+  }
+
+  function createKnowledgeValue() {
+    console.log('submit', { textValue: typeaheadText() });
+  }
+
+  return (
+    <div className="container-fluid p-3">
+
+      <div className="d-flex">
+        <div>
+          <h4>
+            <i className="me-2 bi bi-window-dock"></i>
+          </h4>
+        </div>
+        <div className="flex-grow-1">
+          <h4>
+            <Input
+              key={frame.knowledgeFrameId}
+              className='border border-0'
+              style={{ width: '100%', outline: 'none', backgroundColor: 'transparent' }}
+              value={frame.qs.name}
+            />
+          </h4>
+        </div>
+        <div>
+          <SaveButton
+            key={frame.knowledgeFrameId}
+            doc={frame}
+          />
+        </div>
+      </div>
+
+      <br />
+
+      <Typeahead
+        value={observable('')}
+        textValue={typeaheadText}
+        mentionConfigs={mentionConfigs}
+        // placeholder={`Search for knowledge to add or create new`}
+        autoFocus
+        onSubmit={createKnowledgeValue}
+      />
+
+      <KnowledgeSearchValuesList searchText={typeaheadText} />
+
+      <KnowledgeFrameValuesList frame={frame} />
+
+    </div>
+  )
+}
+
+let p: ReturnType<typeof setTimeout> | undefined = undefined;
+const KnowledgeSearchValuesList = (props: { searchText: Observable<string> }) => {
+  const { searchText } = props;
+
+  useObservable(searchText);
+  const [searchResults, setSearchResults] = useState<IKnowledgeValue[] | undefined>(undefined);
+
+  useSubscription(searchText, async (text) => {
+    clearTimeout(p);
+    setSearchResults(undefined);
+    if (!searchText()) {
+      return;
+    }
+    p = setTimeout(async () => {
+      p = undefined;
+      const values = await searchKnowledgeValues(searchText());
+      if (p) return;
+      setSearchResults(values);
+    }, 1000);
+  }, true);
+
+  if (!searchText()) {
+    return null;
+  }
+
+  if (searchResults === undefined) {
+    return (
+      <div className="d-flex justify-content-center m-3">
+        <div className="spinner-grow" role="status"
+          style={{ width: '1.2rem', height: '1.2rem', }}
+        >
+          <span className="visually-hidden">Loading...</span>
+        </div>
+      </div>
+    )
+  }
+  if (searchResults.length === 0) {
+    return (
+      <div className="d-flex justify-content-center mt-3" style={{ minHeight: '35px' }}>
+        <div>No results found</div>
+      </div>
+    )
+  }
+  return (
+    <div style={{ minHeight: '51px' }}>
+      {searchResults.map(item => 
+        <PeersUI
+          key={item.knowledgeValueId}
+          uiEditMode="view"
+          uiCategory="list-item"
+          props={{ knowledgeValue: item }}
+        />
+      )}
+    </div>
+  )
+}
+
+const KnowledgeFrameValuesList = (props: { frame: IDoc<IKnowledgeFrame> }) => {
+  const { frame } = props;
+  return (
+    <div>
+      show values included in frame
+    </div>
+  )
+}
+
+export async function searchKnowledgeValues(searchText: string): Promise<IKnowledgeValue[]> {
+  const mentions = getAllMentions(searchText)
+  const typeMentions = mentions.filter(m => m.kind === "type");
+  const otherMentions = mentions.filter(m => m.kind !== "type");
+  const filter: DataFilter<IKnowledgeValue> = {};
+  if (typeMentions.length) {
+    filter.peerTypeId = typeMentions.map(m => m.id);
+    for (const typeMention of typeMentions) {
+      searchText = searchText.replace(formatMention(typeMention), '');
+    }
+  }
+
+  if (otherMentions.length) {
+    for (const mention of mentions) {
+      searchText = searchText.replace(formatMention(mention), mention.id);
+    }
+  }
+  searchText = searchText.trim();
+  
+  let matches = await KnowledgeValues().list(filter, { pageSize: 100, textSearch: searchText });
+
+  if (searchText) {
+    const words = searchText.toLowerCase().split(' ');
+    matches = sortBy(matches, r => words.filter(w => r.name.toLowerCase().includes(w)).length).reverse();
+  }
+  return matches;
+}

package/src/screens/knowledge/knowledge-frame-list.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { newid, IKnowledgeFrame, KnowledgeFrames } from "@peers-app/peers-sdk";
+import { ListScreen } from '../../components/list-screen';
+import { mainContentPath } from '../../globals';
+
+
+export const KnowledgeFrameList = () => {
+  const screenPathPart = 'knowledge-frames';
+  const icon = 'bi bi-window-dock';
+
+  return ListScreen({
+    table: KnowledgeFrames(),
+    sortBy: ['-modified'],
+    placeholderName: 'frame',
+    getFilter: (text: string) => {
+      return {
+        $or: [
+          { name: { $matchWords: text } },
+          { body: { $matchWords: text } },
+        ]
+      };
+    },
+    newRecord: async (text: string) => {
+      const knowledgeFrame = await KnowledgeFrames().insert({
+        knowledgeFrameId: newid(),
+        name: text,
+        knowledgeValueIds: [],
+        body: '',
+        modified: Date.now(),
+      });
+      mainContentPath(`${screenPathPart}/${knowledgeFrame.knowledgeFrameId}`);
+      return knowledgeFrame;
+    },
+    renderItem: (item: IKnowledgeFrame) => {
+      return (
+        <div
+          key={item.knowledgeFrameId}
+          className='container-fluid pb-4'
+        >
+          <i style={{ cursor: 'pointer' }} className={icon}></i>
+          &nbsp;&nbsp; 
+          <a href={`#${screenPathPart}/${item.knowledgeFrameId}`}>
+            {item.name?.trim() || 'No Name'}
+          </a>
+        </div>
+      )
+    },
+  });
+};

package/src/screens/knowledge/knowledge-value-details.tsx

@@ -0,0 +1,181 @@
+import { IDoc, IKnowledgeValue, KnowledgeValues, newid, PeersUI, PeerTypes } from "@peers-app/peers-sdk";
+import React, { useEffect, useState } from "react";
+import { Input } from "../../components/input";
+import { IOSchemaValues } from "../../components/io-schema-values";
+import { LoadingIndicator } from "../../components/loading-indicator";
+import { SaveButton } from "../../components/save-button";
+import { Tooltip } from "../../components/tooltip";
+import { Typeahead } from "../../components/typeahead/typeahead";
+import { useObservable, usePromise, useSubscription } from "../../hooks";
+import { valueTypeMentionConfig } from "../../mention-configs";
+import { updateActiveTabTitle } from "../../tabs-layout/tabs-state";
+
+interface IProps {
+  knowledgeValueId: string;
+}
+
+export const KnowledgeValueDetails = (props: IProps) => {
+
+  const knowledgeValue = usePromise(async () => {
+    const knowledgeValue = await KnowledgeValues().get(props.knowledgeValueId);
+    if (!knowledgeValue) {
+      throw new Error('Knowledge Value not found');
+    }
+    updateActiveTabTitle(knowledgeValue.name || "Knowledge Value");
+    return KnowledgeValues().initDoc(knowledgeValue);
+  }, undefined, [props.knowledgeValueId]);
+
+  // Force refresh when value type changes
+  const [forceRefreshOnTypeChange, setForceRefreshOnTypeChange] = useState(newid());
+  useEffect(() => {
+    if (!knowledgeValue) return;
+    const sub = knowledgeValue.qs.peerTypeId.subscribe(() => {
+      setForceRefreshOnTypeChange(newid());
+    });
+    return () => {
+      sub.dispose();
+    }
+  }, [knowledgeValue]);
+
+  if (!(knowledgeValue)) {
+    return <LoadingIndicator />;
+  }
+
+  async function saveChanges() {
+    if (!knowledgeValue) return;
+    const type = await PeerTypes().get(knowledgeValue.peerTypeId);
+    const existingFields = type?.schema.fields.map(f => f.name) || [];
+    const value = knowledgeValue.value || {};
+    for (const key of Object.keys(value)) {
+      if (!existingFields.includes(key)) {
+        delete value[key];
+      }
+    }
+    knowledgeValue.save();
+  }
+
+  return (
+    <div className="container-fluid p-1">
+      <Autosave doc={knowledgeValue} />
+
+      <div className="d-flex">
+        <div>
+          <h4>
+            <KnowledgeValueIcon knowledgeValue={knowledgeValue} />
+          </h4>
+        </div>
+        <div className="flex-grow-1">
+          <h4>
+            <Input
+              className='border border-0'
+              style={{ width: '100%', outline: 'none', backgroundColor: 'transparent' }}
+              value={knowledgeValue.qs.name}
+              placeholder="Name"
+            />
+          </h4>
+        </div>
+        <div>
+          <SaveButton
+            key={knowledgeValue.knowledgeValueId}
+            doc={knowledgeValue}
+            onClick={saveChanges}
+          />
+        </div>
+      </div>
+
+      {/* <br /> */}
+
+      <PeersUI 
+        key={forceRefreshOnTypeChange} 
+        uiEditMode="edit"
+        uiCategory="details"
+        props={{ knowledgeValue }}
+      >
+        <KnowledgeValueDefaultEditor knowledgeValue={knowledgeValue} />
+      </PeersUI>
+    </div>
+  )
+}
+
+const Autosave = (props: { doc: IDoc<IKnowledgeValue> }) => {
+  let p = setTimeout(() => { }, 0);
+  const oldTypeId = props.doc.peerTypeId;
+  useSubscription(props.doc.q, () => {
+    clearTimeout(p);
+    p = setTimeout(() => {
+      if (props.doc.q() === 0) return;
+      if (oldTypeId === props.doc.peerTypeId) {
+        props.doc.lastModified = new Date();
+        props.doc.save();
+      } else {
+        console.log('Not auto-saving because type changed which can cause unexpected data loss');
+      }
+    }, 2000);
+  });
+  return null;
+}
+
+const KnowledgeValueIcon = (props: { knowledgeValue: IDoc<IKnowledgeValue> }) => {
+  const { knowledgeValue } = props;
+
+  useObservable(knowledgeValue.qs.peerTypeId);
+
+  const valueType = usePromise(async () => {
+    const valueType = await PeerTypes().get(knowledgeValue.peerTypeId, { useCache: true });
+    return valueType;
+  }, undefined, [knowledgeValue.peerTypeId]);
+
+  return (
+    <Tooltip
+      handle={
+        <i className={"btn btn-secondary dropdown-toggle me-2 " + (valueType?.iconClass || "bi bi-diagram-2-fill")}>&nbsp;</i>
+      }
+      positions={['bottom', 'right', 'left']}
+      genericContent={
+        <div 
+          style={{ minWidth: 200 }}
+          className="bg-dark p-2"
+        >
+          <small>
+            Knowledge Type:
+          </small>
+          <Typeahead
+            value={knowledgeValue.qs.peerTypeId}
+            mentionConfigs={[valueTypeMentionConfig]}
+          />          
+        </div>
+      }
+    />
+  );
+}
+
+const KnowledgeValueDefaultEditor = (props: { knowledgeValue: IDoc<IKnowledgeValue> }) => {
+  const { knowledgeValue } = props;
+  const [peerTypeId] = useObservable(knowledgeValue.qs.peerTypeId);
+
+  const valueType = usePromise(async () => {
+    const valueType = await PeerTypes().get(peerTypeId);
+    if (valueType) {
+      return PeerTypes().initDoc(valueType);
+    }
+  }, null, [peerTypeId]);
+
+  if (valueType === undefined) {
+    return <div>Value Type {peerTypeId} not found in database</div>
+  }
+
+  if (!valueType) {
+    return <LoadingIndicator />;
+  }
+
+  return (
+    <div>
+      <IOSchemaValues
+        q={knowledgeValue.q}
+        ioSchema={valueType.schema}
+        values={knowledgeValue.value || {}}
+        excludeFields={['name']}
+      />
+    </div>
+  );
+}

package/src/screens/knowledge/knowledge-value-list-item.tsx

@@ -0,0 +1,48 @@
+import { IKnowledgeValue, knowledgeValueSchema, PeerTypes } from "@peers-app/peers-sdk";
+import React from 'react';
+import { z } from 'zod';
+import { usePromise } from '../../hooks';
+import { registerInternalPeersUI } from '../../ui-router/ui-loader';
+
+export const KnowledgeValueListItem = (props: { knowledgeValue: IKnowledgeValue }) => {
+  const { knowledgeValue } = props;
+  const id = knowledgeValue.knowledgeValueId;
+  const _item = knowledgeValue.value as any;
+  const description = _item.description || _item.body || _item.content || _item.value;
+
+  const peerType = usePromise(async () => {
+    const peerType = await PeerTypes().get(knowledgeValue.peerTypeId, { useCache: true });
+    return peerType;
+  }, undefined, [knowledgeValue.peerTypeId]);
+
+  const name = knowledgeValue.name || knowledgeValue.value?.name || knowledgeValue.knowledgeValueId;
+
+  return (
+    <div
+      key={id}
+      className='container-fluid pb-3'
+    >
+      <i style={{ cursor: 'pointer' }} className={peerType?.iconClass || "bi bi-diagram-2-fill"}></i>
+      &nbsp;&nbsp;
+      <a href={`#knowledge-values/${id}`}>
+        {name || 'No Name'}
+      </a>
+      {/* <div style={{ paddingLeft: '20px' }}>
+        <MarkdownWithMentions content={String(description || '').substring(0, 200)} />
+      </div> */}
+    </div>
+  )
+}
+
+registerInternalPeersUI({
+  peersUIId: '00m5enc2nj313e8neyf35f1gp',
+  component: KnowledgeValueListItem,
+  propsSchema: z.object({
+    knowledgeValue: knowledgeValueSchema as any,
+  }),
+  routes: [{
+    // isMatch: (props) => true,
+    uiCategory: 'list-item',
+    uiEditMode: 'view',
+  }]
+});

package/src/screens/knowledge/knowledge-value-list.tsx

@@ -0,0 +1,131 @@
+import { ICursorIterable, IKnowledgeValue, KnowledgeValues, newid, observable, PeersUI } 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 { isDesktop, mainContentPath } from '../../globals';
+import { useObservable } from "../../hooks";
+import { registerInternalPeersUI } from "../../ui-router/ui-loader";
+import './knowledge-value-list-item';
+
+const screenPathPart = 'knowledge-values';
+// const icon = 'bi bi-diagram-2-fill';
+
+
+export const KnowledgeValueList = (props: {}) => {
+  const [searchTextObs] = useState(() => observable(''));
+  const [searchText] = useObservable(searchTextObs);
+
+  const [cursorObs] = useState(() => observable<ICursorIterable<IKnowledgeValue>>());
+  const [allLoadedIds] = useState(() => new Set<string>());
+
+  async function newCursor() {
+    const cursor = await KnowledgeValues().cursor({}, { sortBy: ['-lastModified', '-knowledgeValueId'], textSearch: searchText });
+    cursorObs(cursor);
+    return cursor;
+  }
+
+  useEffect(() => {
+    cursorObs(undefined); // Clear existing cursor first
+    allLoadedIds.clear(); // Clear loaded IDs when search changes
+    newCursor();
+  }, [searchText]);
+
+
+  async function loadMore(existing: IKnowledgeValue[]): Promise<IKnowledgeValue[]> {
+    let moreMatches: IKnowledgeValue[] = [];
+    let cursor = cursorObs() || await newCursor();
+    
+    for await (const nextRecord of cursor) {
+      // Skip if already loaded globally or in existing items
+      if (allLoadedIds.has(nextRecord.knowledgeValueId) || 
+          existing.some(e => e.knowledgeValueId === nextRecord.knowledgeValueId)) {
+        continue;
+      }
+      
+      allLoadedIds.add(nextRecord.knowledgeValueId); // Track as loaded
+      moreMatches.push(nextRecord);
+      if (searchText.length && moreMatches.length > 5) break;
+      if (moreMatches.length >= 50) break;
+    }
+    if (moreMatches.length === 0) {
+      cursorObs(undefined);
+    }
+    
+    return moreMatches;
+  }
+
+
+  async function searchSubmit(evt: React.KeyboardEvent<HTMLInputElement>) {
+    if (evt.key !== "Enter") return;
+    const name = searchText.trim();
+    if (!name) return;
+
+    const newKV = await KnowledgeValues().insert({
+      knowledgeValueId: newid(),
+      lastModified: new Date(),
+      name: name,
+      peerTypeId: "00m3g0ntcop3mrh6ynuzgekiy", // `Note` value type
+      value: {
+        body: '',
+      },
+    });
+    mainContentPath(`${screenPathPart}/${newKV.knowledgeValueId}`);
+  }
+
+  return (
+    <div className='container-fluid'>
+
+      <div className="input-group mt-3 mb-3">
+        {/* <Typeahead /> */}
+        <Input value={searchTextObs} className="form-control" placeholder={`Search or create knowledge`}
+          autoFocus={isDesktop() ? true : false}
+          onKeyUp={evt => searchSubmit(evt)}
+        />
+      </div>
+
+      <div className="peers-list-container">
+        <LazyList
+          resetTrigger={searchText}
+          loadMore={loadMore}
+          scrollThreshold={0.6}
+          renderItems={(items) => {
+            // return items.map(item => <KnowledgeValueListItem key={item.knowledgeValueId} data={item} />);
+            return items.map(item => 
+              <PeersUI 
+                key={item.knowledgeValueId} 
+                uiEditMode='view'
+                uiCategory='list-item'
+                props={{ knowledgeValue: item }}
+              />
+            );
+          }}
+          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>
+  );
+};
+
+
+registerInternalPeersUI({
+  peersUIId: '00m5fshz2g6ea23v8z6y0a1ck',
+  component: KnowledgeValueList,
+  routes: [
+    {
+      isMatch: (props, context) => context.path === 'knowledge-values',
+      // path: 'knowledge-values',
+      uiCategory: 'screen',
+      priority: 2
+    }
+  ]
+})

package/src/screens/packages/package-details.tsx

@@ -0,0 +1,117 @@
+import { Packages, rpcServerCalls } from "@peers-app/peers-sdk";
+import React from "react";
+import { LoadingIndicator } from "../../components/loading-indicator";
+import { ISaveButtonProps, SaveButton } from "../../components/save-button";
+import { ScreenTabBody, Tabs } from "../../components/tabs";
+import { PackageInfo } from "./package-info";
+import { useObservableState, usePromise } from "../../hooks";
+import { Input } from "../../components/input";
+import { updateActiveTabTitle } from "../../tabs-layout/tabs-state";
+
+
+interface IProps {
+  packageId: string;
+}
+
+export const PackageDetails = (props: IProps) => {
+
+  const refresh = useObservableState(Date.now());
+
+  const pkg = usePromise(async () => {
+    const pkg = await Packages().get(props.packageId);
+    if (!pkg) {
+      throw new Error('Workflow not found');
+    }
+    updateActiveTabTitle(pkg.name || "Package");
+    return Packages().initDoc(pkg);
+  }, undefined, [props.packageId, refresh()]);
+
+  if (!pkg) {
+    return <LoadingIndicator />;
+  }
+
+  const addActions: ISaveButtonProps['addActions'] = [
+    {
+      label: 'Reload Package',
+      onClick: async () => {
+        await rpcServerCalls.installOrUpdatePackage(pkg.packageId);
+        await pkg.load();
+        window.location.reload();
+      }
+    },
+  ];
+  if (!pkg.remoteRepo) {
+    addActions.push({
+      label: 'Make Remote ',
+      // className: 'text-bg-warning',
+      onClick: async () => {
+        if (confirm(`Create a remote repository from this local one: ${pkg.name}`)) {
+          try {
+
+            await rpcServerCalls.linkRemoteRepo(pkg.packageId);
+            await rpcServerCalls.installOrUpdatePackage(pkg.packageId);
+            refresh(Date.now());
+          } catch (err) {
+            alert(`Error linking remote repo: ${err}`);
+          }
+        }
+      }
+    });
+  }
+
+  return (
+    <div className="container-fluid p-3">
+
+      <div className="d-flex">
+        <div>
+          <h4>
+            <i className="bi bi-box-fill me-2"></i>
+          </h4>
+        </div>
+        <div className="flex-grow-1">
+          <h4>
+            <Input
+              key={pkg.packageId}
+              className='border border-0'
+              style={{ width: '100%', outline: 'none', backgroundColor: 'transparent' }}
+              value={pkg.qs.name}
+            />
+          </h4>
+        </div>
+        <div>
+          <SaveButton
+            key={pkg.packageId}
+            doc={pkg}
+            addActions={[
+              ...addActions
+            ]}
+          />
+        </div>
+      </div>
+
+      <Tabs
+        key={pkg.packageId}
+        tabs={[
+          {
+            name: 'Info', content:
+              <ScreenTabBody>
+                <PackageInfo pkg={pkg} />
+              </ScreenTabBody>
+          },
+          {
+            name: 'Components', content:
+              <ScreenTabBody>
+                TODO - show all of the different components in the package
+              </ScreenTabBody>
+          },
+          {
+            name: 'Dependencies', content:
+              <ScreenTabBody>
+                TODO - show all of the dependencies of the package
+              </ScreenTabBody>
+          },
+        ]}
+      />
+    </div>
+  )
+}