@peers-app/peers-ui 0.0.14

package/src/components/left-bar.tsx

@@ -0,0 +1,264 @@
+import { IPackage, Packages } from "@peers-app/peers-sdk";
+import React from 'react';
+import { isDesktop, mainContentPath } from '../globals';
+import { useObservable, usePromise } from '../hooks';
+import { OffCanvas } from './off-canvas';
+// import { useObservable } from 'peers-ui';
+
+const offCanvasEffects = { hide: () => {} };
+
+export const LeftBar = () => {
+  const [_isDesktop] = useObservable(isDesktop);
+
+  // const [usersAndGroups, setUsersAndGroups] = useState<(IUser | IGroup)[]>([]);
+  
+  if (_isDesktop) {
+    return (
+      <div  
+        className='left-bar-desktop'
+        style={{ position: 'fixed', top: 0, left: 0 }}
+      >
+        <LeftBarContent />
+      </div>
+    )
+  } else {
+    return (
+      <OffCanvas id="leftBar" position="left" keepOpen={_isDesktop} effects={offCanvasEffects}>
+        <LeftBarContent />
+      </OffCanvas>
+    )
+  }
+}
+
+export const LeftBarContent = () => {
+  const [contentPath] = useObservable(mainContentPath);
+  const [_isDesktop] = useObservable(isDesktop);
+
+  const packagesWithNavItems = usePromise(async () => {
+    const packages = await Packages().list();
+    return packages.filter(pkg => pkg.appNavs?.length);
+  }, []);  
+
+  const knowledgeSublinks = [
+    { text: "Frames", icon: "bi bi-window-dock", path: "knowledge-frames", left: 15 },
+    { text: "Predicates", icon: "bi bi-node-plus-fill", left: 15 },
+    { text: "Graph", icon: "bi bi-diagram-3-fill", left: 15 },
+  ]
+  
+  const knowledgeSublinkActive = contentPath.startsWith('knowledge-') || knowledgeSublinks.find(ks => contentPath.startsWith(ks.path || ks.text.toLowerCase()));
+
+  const containerClassName = `d-flex flex-column flex-shrink-0 p-2 text-white ` + (_isDesktop ? 'bg-dark-subtle' : 'bg-dark');
+
+  const content = (
+    <div className={containerClassName} style={{ width: "300px", height: "100vh" }} >
+      <div className="clearfix" 
+        // style={{ borderBottom: 'solid', borderColor: '#606365', borderWidth: '1px' }}
+      >
+        <div className="dropdown" style={{ display: 'inline-block', width: '200px' }}>
+          <a
+            id="dropdownUser1"
+            data-bs-toggle="dropdown"
+            aria-expanded="false"
+            className="d-flex align-items-center text-white text-decoration-none"
+            href="#"
+            tabIndex={-1}
+          >
+            <span className="fs-4">Peers</span>
+            &nbsp;&nbsp;&nbsp;
+            <i className="bi bi-three-dots-vertical" style={{ fontSize: '12pt' }}></i>
+          </a>
+          <ul
+            className="dropdown-menu dropdown-menu-end dropdown-menu-dark text-small shadow"
+            style={{ border: '1px grey solid' }}
+            aria-labelledby="dropdownUser1"
+          >
+            {/* <li><a className="dropdown-item" href="#groups/create">New Group</a></li>
+            <li><hr className="dropdown-divider" /></li> */}
+            <li><a className="dropdown-item" href="#profile">Profile</a></li>
+            <li><a className="dropdown-item" href="#settings">Settings</a></li>
+          </ul>
+        </div>
+      </div>
+
+      <hr className='p-0' />
+
+      <MenuSection
+        menuItems={[
+          // { text: "Shell", icon: "bi bi-robot" },
+          // { text: "Threads", icon: "bi bi-terminal", path: "shell" },
+          // { text: "Journal", icon: "bi bi-journal-text" },
+          // { text: "Journal", icon: "bi bi-journal-bookmark" },
+          // { text: "Tasks", icon: "bi bi-list-task" },
+          // { text: "Calendar", icon: "bi bi-calendar-week", link: "calendar" },
+          // { text: "AI Models", icon: "bi bi-cpu" },
+          { text: "Variables", icon: "bi bi-braces" },
+          { text: "Types", icon: "bi bi-code-square", path: "peer-types" },
+          { text: "Assistants", icon: "bi bi-person-fill-gear" },
+          { text: "Tools", icon: "bi bi-tools" },
+          { text: "Workflows", icon: "bi bi-database-fill-gear" },
+          { text: "Events", icon: "bi bi-lightning-charge-fill" },
+          { text: "Packages", icon: "bi bi-box-fill" },
+          // { text: "Notes", icon: "bi bi-collection" },
+        ]}
+      />
+
+      <hr />
+
+      <MenuSection
+        menuItems={[
+          { text: "Threads", icon: "bi bi-cpu", path: "shell" },
+
+          { text: `Knowledge ${knowledgeSublinkActive ? '' : '+'}`, icon: "bi bi-journal-bookmark-fill", path: "knowledge-values" },
+          ...(knowledgeSublinkActive && knowledgeSublinks || []),          
+        ]}
+      />
+
+      {(packagesWithNavItems?.length ?? 0) > 0 && packagesWithNavItems?.map(p => <PackageNavItems key={p.packageId} pkg={p} />)}
+
+
+      {/* <hr />
+      <label style={{ color: 'silver' }}>Feeds</label>
+      <MenuSection
+        menuItems={[
+          { text: "Public", icon: "bi bi-globe" },
+          { text: "Trusted", icon: "bi bi-person-fill-lock" },
+        ]}
+      /> */}
+
+      {/* <hr /> */}
+      {/* <label style={{ color: 'silver' }}>Channels & Groups</label>
+      coming soon... */}
+
+
+      {/* {MenuSection({
+        menuItems: usersAndGroups.map(ug => ({
+          text: ug.name,
+          icon: "bi bi-people-fill",
+          link: `/#${ug.id}`,
+          onClick: () => offCanvasEffects.hide?.(),
+          id: ug.id
+        }))
+      })} */}
+
+
+    </div>
+  )
+  return content;
+}
+
+interface IMenuItemProps {
+  text: string
+  path?: string
+  icon: string
+  className?: string
+  left?: number
+  // onClick?: (...args: any[]) => any
+  // id?: string
+}
+
+function MenuItem(props: IMenuItemProps) {
+  useObservable(mainContentPath);
+  const link = props.path ?? props.text.replace(/\s/g, '-').toLowerCase();
+  const href = window.location.href.split('#')[1]?.trim() ?? '';
+  // let isActive = href.endsWith(link);
+  let isActive = href.split('/')[0] === link || href.startsWith(link);
+  if (link === 'shell' && !href) {
+    isActive = true;    
+  }
+  return (
+    <div
+      className={`nav-link text-white ${isActive && 'active' || ''} ${props.className || ''}`}
+      // onClick={() => window.location = (window.origin + props.link) as any}
+      style={{ cursor: "pointer", marginLeft: `${props.left || 0}px` }}
+      onClick={() => {
+        offCanvasEffects.hide?.();
+        mainContentPath(link)
+      }}
+    >
+      <a
+        className={`text-white`}
+        style={{ textDecoration: 'none' }}
+      // onClick={props.onClick}
+      >
+        <i className={props.icon}></i>
+        &nbsp;
+        {props.text}
+      </a>
+      {/* 
+      {isActive && props.id && (
+        <span className="dropdown float-end">
+          <span
+            id="ddGroupSettings" data-bs-toggle="dropdown" aria-expanded="false"
+            className="d-flex align-items-center text-white text-decoration-none"
+            onClick={evt => evt.stopPropagation()}
+          >
+            <i className="bi bi-three-dots-vertical"></i>
+          </span>
+          <ul 
+            className="dropdown-menu dropdown-menu-dark text-small shadow" 
+            aria-labelledby="ddGroupSettings" 
+            // onClick={props.onClick}
+          >
+            <li>
+              <a className="dropdown-item" href={`/#groups/${props.id}`}>
+                Details
+              </a>
+            </li>
+          </ul>
+        </span>
+      )} */}
+    </div>
+  );
+}
+
+interface IMenuSectionProps {
+  menuItems: IMenuItemProps[]
+}
+function MenuSection(props: IMenuSectionProps) {
+  return (
+    <div className="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
+
+      {props.menuItems.map(mi => <MenuItem key={mi.text + mi.path} {...mi}></MenuItem>)}
+
+    </div>
+  );
+}
+
+function PackageNavItems(props: { pkg: IPackage }) {
+  const pkg = props.pkg;
+  if (!pkg.appNavs || pkg.appNavs.length === 0) {
+    return null;
+  }
+
+  // if (pkg.appNavs?.length === 1 && pkg.appNavs[0].name === pkg.name) {
+  //   const iconClassName = pkg.appNavs[0].iconClassName || "bi bi-question-square";
+  //   // this package only has one nav item and it's named the same as the package so just show it as a top level item
+  //   return <MenuItem
+  //     text={pkg.name}
+  //     icon={iconClassName}
+  //   />
+  // }
+
+  return (
+    <>
+      {pkg.appNavs.length !== 1 || pkg.appNavs[0].name !== pkg.name && (
+        <label style={{ color: 'silver' }}>{pkg.name}</label>
+      )}
+      <MenuSection
+        menuItems={
+          pkg.appNavs.map(ni => {
+            let path = `package-nav/${pkg.packageId}/${(ni.navigationPath ?? ni.name).replace(/[^a-zA-Z0-9]/g, '-').toLowerCase()}`;
+            while (path.includes('//')) {
+              path = path.replace('//', '/');
+            }            
+            return {
+              text: ni.name,
+              icon: ni.iconClassName || "bi bi-box-seam",
+              path,
+            }
+          })
+        }
+      />
+    </>
+  )
+}

package/src/components/list-screen.tsx

@@ -0,0 +1,105 @@
+import { DataFilter, ICursorIterable, observable, SortBy, Table } from "@peers-app/peers-sdk";
+import * as _ from 'lodash';
+import React, { useEffect, useState } from 'react';
+import { isDesktop } from '../globals';
+import { useObservable } from "../hooks";
+import { Input } from './input';
+import { LazyList } from './lazy-list';
+import { LoadingIndicator } from './loading-indicator';
+
+interface IProps<T extends { [key: string]: any; }> {
+  table: Table<T>;
+  newRecord: (text: string) => Promise<T>;
+  getFilter?: (text: string) => DataFilter<T>;
+  sortBy?: SortBy<T>;
+  renderItem: (record: T) => JSX.Element;
+  placeholderName?: string;
+}
+
+export function ListScreen<T extends { [key: string]: any; }>(props: IProps<T>) {
+  const {
+    table,
+    newRecord,
+    sortBy,
+  } = props;
+
+  const [searchTextObs] = useState(() => observable(''));
+  const [searchText] = useObservable(searchTextObs);
+
+  const [cursorObs] = useState(() => observable<ICursorIterable<T>>());
+  
+  async function newCursor() {
+    const filter = props.getFilter ? props.getFilter(searchText) : null;
+    const cursor = await table.cursor(filter || {}, { sortBy, ...(filter ? {} : { textSearch: searchText }) });
+    cursorObs(cursor);
+    return cursor;
+  }
+
+  useEffect(() => {
+    newCursor();
+  }, [searchText]);
+
+  const idFieldName = table.metaData.primaryKeyName;
+
+  async function loadMore(existing: T[]): Promise<T[]> {
+    let moreMatches: T[] = [];
+    let cursor = cursorObs() || await newCursor();
+    for await (const nextRecord of cursor) {
+      if (existing.find(e => e[idFieldName] === nextRecord[idFieldName])) continue;
+      moreMatches.push(nextRecord);
+      if (searchText.length && moreMatches.length > 5) break;
+      if (moreMatches.length >= 10) break;
+    }
+    if (moreMatches.length === 0) {
+      cursorObs(undefined);
+    }
+    // if we're using default textSearch, list items with the most words matched in the name first
+    if (!props.getFilter && moreMatches && searchText && table.metaData.fields.find(f => f.name === 'name')) {
+      const words = searchText.toLowerCase().split(' ');
+      moreMatches = _.sortBy(moreMatches, r => words.filter(w => r.name.toLowerCase().includes(w)).length).reverse();
+    }
+    return moreMatches;
+  }
+
+
+  async function searchSubmit(evt: React.KeyboardEvent<HTMLInputElement>) {
+    if (evt.key !== "Enter") return;
+    const name = searchText.trim();
+    if (!name) return;
+    searchTextObs('');
+    await newRecord(name);
+  }
+
+  return (
+    <div className='container-fluid'>
+
+      <div className="input-group mt-3 mb-3">
+        <Input value={searchTextObs} className="form-control" placeholder={`Search or create ${props.placeholderName || table.metaData.name}`}
+          autoFocus={isDesktop() ? true : false}
+          onKeyUp={evt => searchSubmit(evt)}
+        />
+      </div>
+
+      <div className="peers-list-container">
+        <LazyList
+          resetTrigger={searchText}
+          loadMore={loadMore}
+          scrollThreshold={0.6}          
+          renderItems={(notes) => {
+            return notes.map(props.renderItem);
+          }}
+          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/components/loading-indicator.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export const LoadingIndicator = () => {
+  return (
+    <span className="spinner-grow spinner-grow-sm text-secondary m-4" role="status">
+      <span className="visually-hidden">Loading...</span>
+    </span>
+  )
+}

package/src/components/main-content-container.tsx

@@ -0,0 +1,76 @@
+import React, { useState } from 'react';
+import SplitPane from 'react-split-pane';
+import { openThreads, threadViewOpen } from '../globals';
+import { ThreadContainer, startNewThread } from './messages/thread-view';
+import { Router } from './router';
+import { useObservable } from '../hooks';
+
+export const MainContentContainer = () => {
+
+  const splitPositionGlobalName = 'mainContentContainerSplitPos';
+  let [splitPos, setSplitPos] = useState(localStorage.getItem(splitPositionGlobalName) || '800');
+  useObservable(threadViewOpen);
+  
+  if (!threadViewOpen()) {
+    return (
+      <>
+        <button
+          className="btn small m-0 p-0 thread-view-open-button"
+          onClick={() => {
+            const lastThread = openThreads()[0];
+            if (!lastThread) {
+              startNewThread();
+            } else {
+              threadViewOpen(true);
+            }
+          }}
+          style={{
+            position: 'fixed',
+            // top: '3px',
+            // right: '16px',
+            top: '-5px',
+            right: '6px',
+            zIndex: 1000,
+            // backgroundColor: 'white',  
+            backgroundColor: 'transparent'          
+          }}
+        >
+          +
+          {/* <i className="bi bi-box-arrow-down-left"></i> */}
+        </button>
+
+        <Router />
+      </>
+    )
+  }
+
+  return (
+    // @ts-ignore
+    <SplitPane
+      split="vertical"
+      defaultSize={parseInt(splitPos)}
+      onChange={(size) => {
+        localStorage.setItem(splitPositionGlobalName, String(size));
+        setSplitPos(String(size));
+      }}
+      style={{
+        position: 'unset',
+        height: `100vh`,
+      }}
+    >
+      <div>
+        <Router />
+      </div>
+      <div
+        className='thread-view'
+        style={{
+          height: `100vh`,
+          overflowY: 'scroll',
+          width: `calc(100vw - ${splitPos}px - 300px)`,
+        }}
+      >
+        <ThreadContainer />
+      </div>
+    </SplitPane>
+  )
+}

package/src/components/markdown-editor/autolink-plugin.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import {
+  AutoLinkPlugin,
+  createLinkMatcherWithRegExp,
+} from '@lexical/react/LexicalAutoLinkPlugin';
+
+
+const URL_REGEX =
+  /((https?:\/\/(www\.)?)|(www\.))[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)(?<![-.+():%])/;
+
+const EMAIL_REGEX =
+  /(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))/;
+
+const MATCHERS = [
+  createLinkMatcherWithRegExp(URL_REGEX, (text) => {
+    return text.startsWith('http') ? text : `https://${text}`;
+  }),
+  createLinkMatcherWithRegExp(EMAIL_REGEX, (text) => {
+    return `mailto:${text}`;
+  }),
+];
+
+export function LexicalAutoLinkPlugin(): JSX.Element {
+  return <AutoLinkPlugin matchers={MATCHERS} />;
+}
+
+
+
+import { LinkPlugin as LexicalLinkPlugin } from '@lexical/react/LexicalLinkPlugin';
+
+export default function LinkPlugin(): JSX.Element {
+  const validateUrl = (url: string) => {
+    return url.startsWith('http://') || url.startsWith('https://') || url.startsWith('mailto:');
+  };
+  return <LexicalLinkPlugin validateUrl={validateUrl} />;
+}

package/src/components/markdown-editor/editor-inline.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import { IMarkdownEditorProps, MarkdownEditor } from "./editor";
+
+export const MarkdownEditorInline = (props: IMarkdownEditorProps) => {
+  return (
+    <div className="border rounded border-dark-subtle">
+      <MarkdownEditor {...props} />
+    </div>
+  )
+}

package/src/components/markdown-editor/editor.tsx

@@ -0,0 +1,152 @@
+import { CodeNode } from '@lexical/code';
+import { AutoLinkNode, LinkNode } from '@lexical/link';
+import { ListItemNode, ListNode } from '@lexical/list';
+import { AutoFocusPlugin } from '@lexical/react/LexicalAutoFocusPlugin';
+import { CheckListPlugin, } from '@lexical/react/LexicalCheckListPlugin';
+import { LexicalComposer } from '@lexical/react/LexicalComposer';
+import { ContentEditable } from '@lexical/react/LexicalContentEditable';
+import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary';
+import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
+import { ListPlugin } from '@lexical/react/LexicalListPlugin';
+import { MarkdownShortcutPlugin } from '@lexical/react/LexicalMarkdownShortcutPlugin';
+import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
+import { TabIndentationPlugin } from '@lexical/react/LexicalTabIndentationPlugin';
+import { HeadingNode, QuoteNode } from '@lexical/rich-text';
+import { observable, Observable } from "@peers-app/peers-sdk";
+import React, { useEffect, useState } from 'react';
+import { LexicalAutoLinkPlugin } from './autolink-plugin';
+import { customMarkdownTransformers, MarkdownPlugin } from './markdown-plugin';
+import { MentionNode } from './mention-node';
+import { MentionsPlugin } from './mentions-plugin';
+import theme from './theme';
+import { IToolbarControl, ToolbarPlugin } from './toolbar';
+import { COMMAND_PRIORITY_LOW, KEY_DOWN_COMMAND } from 'lexical';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { IMentionConfig, mentionConfigs } from '../../mention-configs';
+
+
+const editorConfig = {
+  namespace: 'PeersEditor',
+  nodes: [
+    HeadingNode,
+    QuoteNode,
+    CodeNode,
+    ListNode,
+    ListItemNode,
+    MentionNode,
+    AutoLinkNode as any,
+    LinkNode,
+  ],
+  // Handling of errors during update
+  onError(error: Error) {
+    throw error;
+  },
+  // The editor theme
+  theme,
+};
+
+export interface IEditorEffects {
+  onKeyDown?: (e: React.KeyboardEvent) => (boolean | void);
+  focus?: () => void;
+}
+
+export interface IMarkdownEditorProps {
+  value: Observable<string>;
+  effects?: IEditorEffects;
+  topRightControls?: IToolbarControl[];
+  autoFocus?: boolean;
+  hideToolbar?: boolean;
+  maxHeight?: string | number;
+  mentionConfigs?: IMentionConfig[];
+}
+
+export function MarkdownEditor(props: IMarkdownEditorProps) {
+  const { effects } = props;
+  const editorRef = React.useRef<HTMLDivElement>(null);
+
+  const [mentionsOpen] = useState(() => {
+    const obs = observable(false);
+    return obs;
+  });
+
+  if (effects) {
+    effects.focus = () => {
+      if (editorRef.current?.children[0]) {
+        const div = editorRef.current.children[0] as HTMLDivElement;
+        setTimeout(() => {
+          div.focus();
+          // Set the selection to the end of the div content
+          const range = document.createRange();
+          range.selectNodeContents(div);
+          range.collapse(false);
+          const selection = window.getSelection();
+          if (selection) {
+            selection.removeAllRanges();
+            selection.addRange(range);
+          }
+        }, 10);
+      }
+    }
+  }
+
+  const _mentionConfigs = props.mentionConfigs ?? mentionConfigs;
+
+  return (
+    <LexicalComposer initialConfig={{ ...editorConfig }}>
+      <div className="editor-container">
+        {props.hideToolbar ? null : <ToolbarPlugin topRightControls={props.topRightControls} />}
+
+        <div
+          className="editor-inner"
+          ref={editorRef}
+          style={{ maxHeight: props.maxHeight, overflowY: 'auto' }}
+        >
+          <RichTextPlugin
+            contentEditable={
+              <ContentEditable
+                className="editor-input p-2"
+              />
+            }
+            placeholder={null}
+            ErrorBoundary={LexicalErrorBoundary}
+          />
+          <HistoryPlugin />
+          {props.autoFocus && <AutoFocusPlugin defaultSelection='rootEnd' />}
+          <ListPlugin />
+
+          {_mentionConfigs.length > 0 && (
+            <MentionsPlugin
+              mentionConfigs={_mentionConfigs}
+              mentionsOpen={mentionsOpen}
+            />
+          )}
+
+          <LexicalAutoLinkPlugin />
+          <MarkdownPlugin markdownObs={props.value} />
+          <MarkdownShortcutPlugin transformers={customMarkdownTransformers} />
+          <CheckListPlugin />
+          <TabIndentationPlugin />
+          <OnKeyDownPlugin effects={props.effects} mentionsOpen={mentionsOpen} />
+        </div>
+      </div>
+    </LexicalComposer>
+  );
+}
+
+const OnKeyDownPlugin = (props: { effects?: IEditorEffects, mentionsOpen: Observable<boolean> }) => {
+  const [editor] = useLexicalComposerContext();
+  useEffect(() => {
+    const removeListener = editor.registerCommand(KEY_DOWN_COMMAND, (event: KeyboardEvent) => {
+      if (props.mentionsOpen()) {
+        return false;
+      }
+      if (props.effects?.onKeyDown) {
+        const result = props.effects.onKeyDown(event as any);
+        return !!result;
+      }
+      return false;
+    }, COMMAND_PRIORITY_LOW);
+    return removeListener;
+  }, [editor]);
+  return null;
+}